# XWUIShellPage

Page-level container inside the app shell's main body - consistent header (breadcrumbs, title, toolbar, description), scrollable content, optional start/end asides, sticky action bar, and footer. Composes `XWUIShell` + `XWUINavBreadcrumbs`. Industry ops pages (e.g. `XWUIOpsSchedulePage`) subclass or compose this base.

## Basic Usage - a page scaffold

The page header is built from `data`; the content slot holds the main body.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage - a page scaffold
description: The page header (breadcrumbs + title + toolbar) is built from data; the content slot holds the main body.
```

## Admin settings page

Settings page using real slots: title + toolbar header, filter aside, and form body.

```example
file: examples/AdminLayout.ts
html: examples/AdminLayout.html
title: Admin settings page
description: A settings page using the page's real slots: title + toolbar header, a filter aside, and form body.
```

## Detail page - record / entity view

Breadcrumb trail + title + toolbar actions in the header; metadata in the end aside.

```example
file: examples/Detail.ts
html: examples/Detail.html
title: Detail page - record / entity view
description: Real XWUIShellPage API: breadcrumb trail + title + toolbar actions in the header; metadata in the end aside.
```

## Grid layout - dashboard content

The page frames the header; the content area is a CSS-grid dashboard of cards.

```example
file: examples/GridLayout.ts
html: examples/GridLayout.html
title: Grid layout - dashboard content
description: The page frames the header; the content area is a CSS-grid dashboard of cards.
```

## Page with aside columns + sticky action bar

Start/end asides plus a sticky action bar - the pattern industry record/edit pages use.

```example
file: examples/WithAsides.ts
html: examples/WithAsides.html
title: Page with aside columns + sticky action bar
description: Demonstrates the extension surface reserved for industry-specific pages.
```

## Responsive asides (stack on narrow)

Asides flank content on wide screens and stack above/below once the viewport narrows.

```example
file: examples/ResponsiveAsides.ts
html: examples/ResponsiveAsides.html
title: Responsive Asides (stack on narrow)
description: The asides flank the content on wide screens and STACK above / below it once the viewport narrows.
```

## Sticky action bar

`data.stickyActions` latches to the bottom edge of the body and stays put while scrolling.

```example
file: examples/StickyActions.ts
html: examples/StickyActions.html
title: Sticky Action Bar
description: data.stickyActions latches to the bottom edge of the body and stays put as you scroll.
```

## Industry page subclasses

Ready-made presets - Detail / List / Docs / Dashboard - each seeding sensible config and tagging the root with `data-page-kind`.

```example
file: examples/IndustryPages.ts
html: examples/IndustryPages.html
title: Industry Page Subclasses
description: Ready-made presets over XWUIShellPage - Detail / List / Docs / Dashboard - each seeds sensible config.
```

```api
```