<!-- source-hash: 508a1c69dd2d082f4bed6cb98c63998b -->
Canonical chrome wrapper for dev-center sections (Roadmap, Delivery, Releases), handling title rendering, inline search, filter pills, and URL-param wiring in both tabbed and full-page layout modes.

## Key Components

### `DevSectionView`
The single shared layout shell consumed by every dev-center section page. Supports two display modes:
- **Hero mode** — full-page layout with icon, `<h1>`, and description (pass `hero` prop)
- **Compact mode** — tab-context `<h2>` heading only (omit `hero`)

### `DevSectionViewProps`
| Prop | Type | Description |
|------|------|-------------|
| `sectionKey` | `OpenframeDevSectionKey` | Registry key driving title, search, and filter config |
| `hero` | `{ icon: ReactNode, description: string }` | Enables full-page hero rendering |
| `preControls` | `ReactNode` | Optional slot between hero and search/filter controls |
| `children` | `ReactNode` | Section-specific list body; reads URL params set by this component |

### URL Contract
- Search commits to `?<paramKey>=...` on **Enter only** (not every keystroke)
- Filter changes are applied immediately via `router.replace` with `scroll: false`
- Default filter values are omitted from the URL (cleaned via `params.delete`)
- `searchValue` is lazy-initialized from URL params to prevent stale flash on tab switch

## Usage Example

```typescript
// Hero (full-page) mode
<DevSectionView
  sectionKey="roadmap"
  hero={{ icon: <RoadmapIcon />, description: "Track upcoming features." }}
  preControls={<NewTicketForm />}
>
  <RoadmapList />
</DevSectionView>

// Compact (tabbed) mode
<DevSectionView sectionKey="releases">
  <ReleasesList />
</DevSectionView>
```

Children read filter/search state directly from URL params via `useSearchParams()` — no prop drilling required.