## Key Components ### `HighlightConfigSection` A client-side React component that renders two controls side-by-side: - **Target Duration Select** — dropdown offering 1–5 minute presets (3 minutes recommended) via a controlled `` component ### `HighlightConfigSectionProps` | Prop | Type | Description | |---|---|---| | `targetDurationSeconds` | `number` | Current duration value in seconds | | `onTargetDurationChange` | `(seconds: number) => void` | Fires on duration selection change | | `disabled` | `boolean` | Disables all controls (default: `false`) | | `className` | `string` | Optional extra CSS classes | ## Usage Example ```typescript import { HighlightConfigSection } from './highlight-config-section'; function MyHighlightForm() { const [duration, setDuration] = React.useState(180); // 3 minutes default const [skipSubs, setSkipSubs] = React.useState(false); return ( ); } ``` > **Note:** This component is designed to be shared across `CustomerInterview` and `ProductRelease` entity flows. View the source at [`highlight-config-section.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/highlight-config-section.tsx).