A page-level wrapper that composes `DevSectionPage` chrome around `OnboardingGuidesCatalogView` for the `/onboarding-guides` route. Supports both SSR (server-pre-fetched data) and self-fetch (client-side endpoint) modes. ## Key Components | Export | Type | Description | |---|---|---| | `OnboardingGuidesCatalogPage` | `React.FC` | Full catalog page with layout chrome and guide grid | | `OnboardingGuidesCatalogPageProps` | `interface` | Props contract for both SSR and self-fetch modes | | `SectionSummary` | local type | Shape of section pill data `{ section, section_order, count }` | **Internal composition:** - **`DevSectionPage`** — provides `sectionKey="onboarding"` page chrome (back button, title, subtitle, optional `PageShell`) - **`OnboardingGuidesCatalogView`** — RAG search, section pills, and guide grid; all data props forwarded verbatim ## Usage Example **SSR mode** (data pre-fetched on server): ```typescript import { OnboardingGuidesCatalogPage } from './onboarding-guides-catalog-page' // In a Next.js Server Component or page export default function Page() { const guides = await fetchGuides() const sections = await fetchSections() return ( ) } ``` **Self-fetch mode** (view fetches its own data): ```typescript } /> ``` > **`shell` prop:** Pass `shell={false}` when the host layout already wraps the page in a container — this prevents double-wrapping by skipping the internal `PageShell`.