Canonical chrome wrapper for dev-center sections (Roadmap, Delivery, Releases) that owns title rendering, inline search input, filter pill row, and URL parameter wiring. Designed for dual-mode use: tabbed compact headings or full-page hero layouts. ## Key Components ### `DevSectionView` The primary export. A client component that renders section-level chrome and delegates list rendering to `children`. **Props (`DevSectionViewProps`):** | Prop | Type | Description | |---|---|---| | `sectionKey` | `OpenframeDevSectionKey` | Drives title, search, and filter config via the registry | | `hero` | `{ icon, title?, description }` | Enables full-page hero mode with icon + h1 + description | | `preControls` | `ReactNode` | Optional slot between hero and search/filter controls | | `children` | `ReactNode` | List body; reads URL params set by this component | | `showHeading` | `boolean` | Defaults `true`; pass `false` when host renders the title elsewhere | **Internal behavior:** - Search input is **controlled** — commits to URL only on Enter (not every keystroke), preventing excessive navigation events - Filter changes write immediately to URL params via `router.replace` with `scroll: false` - Default filter value removes the param from the URL entirely (clean URLs) - `useEffect` syncs controlled search state from URL on param changes (e.g., tab switches) ## Usage Example ```typescript // Full-page hero mode (e.g. /roadmap route) , title: "Product Roadmap", description: "See what's coming next across the platform.", }} > // Compact tab mode (e.g. inside /roadmap-and-releases tabbed view) ``` ## Source [`dev-section-view.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/dev-section-view.tsx)