<!-- source-hash: f1c1fbdd04d056b4c98f44f6bacd4fb8 -->
Unified page layout components providing two layout variants for consistent page structure across the application.

## Key Components

| Export | Max Width | Purpose |
|--------|-----------|---------|
| `PageShell` | 1920px | List pages, dashboards, wide layouts |
| `ArticleDetailLayout` | 1280px | Articles, blog posts, release notes, case studies |

**`LayoutProps` interface:**
- `children` — page content (no additional layout wrappers needed)
- `schemas?` — optional JSON-LD `<script>` elements (breadcrumbs, article schema, etc.)

Both components render a `<main>` element with `bg-ods-bg`, `min-h-screen`, responsive horizontal padding (`px-6` / `md:px-20`), and vertical padding (`py-6` / `md:py-10`).

## Usage Example

```typescript
// Wide layout for a list/dashboard page
import { PageShell } from '@/components/article-detail-layout';

export default function DevicesPage() {
  return (
    <PageShell>
      <DeviceTable />
    </PageShell>
  );
}

// Constrained layout for a readable article/detail page
import { ArticleDetailLayout } from '@/components/article-detail-layout';

export default function BlogPost({ schema }: { schema: React.ReactNode }) {
  return (
    <ArticleDetailLayout schemas={schema}>
      <ArticleContent />
    </ArticleDetailLayout>
  );
}
```

> Child components should render content only — no additional `<main>`, max-width, or padding wrappers required.