Storybook stories for the `PageContainer` layout component, covering legacy usage patterns and all advanced variants (list, detail, form, content) with header and padding configurations. ## Key Components - **`Legacy`** — Basic container with full-width background using className-based styling - **`LegacyCustomBackground`** / **`LegacyContentWidthBackground`** — Legacy mode with custom background and scoped content-width background - **`ListPage`** / **`ListPageMultipleActions`** — List variant with title, subtitle, and one or more action buttons - **`DetailPage`** / **`DetailPageWithActions`** — Detail variant with back button and optional action buttons - **`FormPage`** — Form variant with cancel back button and draft/publish actions - **`ContentPage`** — Generic content variant with title - **`CustomHeaderContent`** — List variant using a fully custom `headerContent` ReactNode - **`WithHeaderActions`** — List variant combining `headerActions` slot with standard `actions` array - **`HiddenHeader`** — Content variant with `showHeader: false` - **`WithPaddingAndBackground`** — Demonstrates `padding` (`lg`) and `background` (`card`) props ## Usage Example ```typescript // List page with actions , variant: 'accent' }, ]} > // Detail page with back navigation , variant: 'outline' }, ]} > ``` ## Configurable Controls | Prop | Type | Options | |---|---|---| | `variant` | select | `list`, `detail`, `form`, `content` | | `padding` | select | `none`, `sm`, `md`, `lg` | | `background` | select | `default`, `card`, `transparent` | | `showHeader` | boolean | `true` / `false` | **Source:** [`PageContainer.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/PageContainer.stories.tsx)