<!-- source-hash: 0de96ea9df1ea6a28df1ff674cfc5e14 -->
Full-page wrapper component for dev-center sections (`/roadmap`, `/bug-fixes-and-enhancements`, `/releases`) in the OpenFrame platform. It composes `PageShell → PageLayout → DevSectionView` to deliver a consistent hero icon, search, and filter pill layout across all dev sections.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `DevSectionPage` | Component | Main page wrapper factory for any `OpenframeDevSectionKey` section |
| `DevSectionPageProps` | Interface | Props contract for `sectionKey`, `children`, `preControls`, and `backButton` |
| `SECTION_HERO_ICON_CLASS` | Constant | Tailwind class applied uniformly to all section hero icons |

### Props

| Prop | Type | Description |
|------|------|-------------|
| `sectionKey` | `OpenframeDevSectionKey` | Looks up section metadata from `OPENFRAME_DEV_SECTIONS` |
| `children` | `ReactNode` | Page-specific list body (e.g. `<RoadmapList />`) |
| `preControls` | `ReactNode` (optional) | Slot rendered between the hero and search/filter controls |
| `backButton` | `{ label?, href? } \| false` (optional) | Configures or hides the back button; defaults to `Back to home → /` |

## Usage Example

```typescript
// Adding a new section page is a single mount:
import { DevSectionPage } from '@/components/dev-center/dev-section-page';

export default function RoadmapPage() {
  return (
    <DevSectionPage
      sectionKey="roadmap"
      backButton={{ label: 'Back to home', href: '/' }}
    >
      <RoadmapList />
    </DevSectionPage>
  );
}

// With a preControls slot (e.g. Help Center ticket form above filters):
<DevSectionPage
  sectionKey="help-center"
  preControls={<OpenTicketForm />}
  backButton={false} // hide back button
>
  <TicketList />
</DevSectionPage>
```

> **Extensibility:** Adding a new dev-center section requires only one entry in `OPENFRAME_DEV_SECTIONS` plus a single page file mounting `DevSectionPage` with the new key. Design system changes to `BackButton` or `TitleBlock` propagate automatically via the shared `PageLayout`.