<!-- source-hash: f72131cedcde7906c303bc3ea8538959 -->
Storybook stories for the `PageContainer` layout component, covering legacy and advanced usage variants including list, detail, form, and content page layouts.

## Key Components

- **`Legacy`** — Basic container with full-width background and no structured header
- **`LegacyCustomBackground`** / **`LegacyContentWidthBackground`** — Legacy mode with custom background and content-width options
- **`ListPage`** / **`ListPageMultipleActions`** — List variant with title, subtitle, and action buttons
- **`DetailPage`** / **`DetailPageWithActions`** — Detail variant with back button navigation and optional actions
- **`FormPage`** — Form variant with cancel/save/publish actions
- **`ContentPage`** — Generic content layout variant
- **`CustomHeaderContent`** / **`WithHeaderActions`** / **`HiddenHeader`** — Header customization stories
- **`WithPaddingAndBackground`** — Demonstrates `padding` and `background` prop combinations

## Storybook Controls

| Control | Options |
|---------|---------|
| `variant` | `list`, `detail`, `form`, `content` |
| `padding` | `none`, `sm`, `md`, `lg` |
| `background` | `default`, `card`, `transparent` |
| `showHeader` | `boolean` |

## Usage Example

```typescript
// List page with actions
<PageContainer
  variant="list"
  title="Devices"
  subtitle="24 devices found"
  actions={[
    { label: 'Add Device', onClick: handleAdd, icon: <Plus />, variant: 'primary' }
  ]}
>
  <DeviceTable />
</PageContainer>

// Detail page with back navigation
<PageContainer
  variant="detail"
  title="Device Details"
  backButton={{ label: 'Back to Devices', onClick: handleBack }}
  actions={[
    { label: 'Delete', onClick: handleDelete, variant: 'outline' }
  ]}
>
  <DeviceDetails />
</PageContainer>
```