<!-- source-hash: 601f78e11aff8ba0205359b5d858638e -->
Unified page container component that supports both legacy layout patterns and a new advanced UI pattern with variants, titles, actions, and responsive headers.

## Key Components

### Exported Types
- **`PageContainerProps`** — Union type supporting `LegacyPageContainerProps` and `AdvancedPageContainerProps`

### Main Export
- **`PageContainer`** — Auto-detects prop interface via `isAdvancedProps()` type guard and delegates to the appropriate renderer

### Internal Renderers
- **`renderLegacyPageContainer`** — Wraps content in a configurable semantic element (`section`, `div`, `main`, `article`) with optional full-width background
- **`renderAdvancedPageContainer`** — Renders variant-aware layout (`list` | `detail` | `form` | `content`) with header, back button, title, subtitle, and `PageActions`

## Usage Example

```typescript
// Legacy usage
<PageContainer backgroundClassName="bg-gray-100" contentPadding="px-6 py-4">
  <h1>Content</h1>
</PageContainer>

// Advanced - list page
<PageContainer
  variant="list"
  title="Devices"
  subtitle="All managed devices"
  actions={[{ label: 'Add Device', onClick: handleAdd }]}
>
  <DeviceTable />
</PageContainer>

// Advanced - detail page with back button
<PageContainer
  variant="detail"
  title="Device Details"
  backButton={{ label: 'Back', onClick: () => router.back() }}
  headerActions={<StatusBadge status="online" />}
>
  <DeviceDetail />
</PageContainer>
```

> **Deprecated:** Prefer `PageLayout` from `'../layout/page-layout'` for new implementations.