Full-page wrapper component for dev-center sections (`/roadmap`, `/bug-fixes-and-enhancements`, `/releases`) in the OpenFrame lib, composing `PageShell → PageLayout → DevSectionView → list body` into a single reusable factory.
## Key Components
### `DevSectionPage` (default export)
The primary component. Resolves section metadata from `OPENFRAME_DEV_SECTIONS` by `sectionKey`, wires the back-button navigation, and renders the page hierarchy.
### `DevSectionPageProps`
| Prop | Type | Default | Description |
|---|---|---|---|
| `sectionKey` | `OpenframeDevSectionKey` | required | Key into `OPENFRAME_DEV_SECTIONS` config |
| `children` | `ReactNode` | required | List body (e.g. ``) |
| `preControls` | `ReactNode` | — | Slot rendered between hero and search/filter controls |
| `backButton` | `{ label?, href? } \| false` | `{ label: 'Back to home', href: '/' }` | Back-button config; `false` hides it |
| `title` | `string` | section hero title | Override hero title for non-OpenFrame embeds |
| `subtitle` | `string` | section hero description | Override hero subtitle |
| `shell` | `boolean` | `true` | Wraps in `` (``); set `false` when host layout already provides the container |
## Usage Example
```typescript
// Standard standalone page (e.g. app/roadmap/page.tsx)
import { DevSectionPage } from '@/components/dev-sections/dev-section-page';
import { RoadmapList } from '@/components/roadmap/roadmap-list';
export default function RoadmapPage() {
return (
);
}
// Embedded inside a host app that already provides
}
>
// Hide back button entirely
```
## Adding a New Section
Register one entry in `OPENFRAME_DEV_SECTIONS` with the new key, then create a single-line page file mounting `DevSectionPage` with that key — no changes to this component required.
---
**Source:** [`flamingo-stack/openframe-oss-lib`](https://github.com/flamingo-stack/openframe-oss-lib)