Stage

Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.

Build the "Stage" pattern (@codeatlasdev/ui demo #531, layout/app-shell) in my app.

Call get_demo({ ids: ["#531"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Map, canvas, video or 3D products where the pages float over one live layer that must keep its state across routes.

Keep these library parts, with the props and tokens the demo uses:
- AppShellLayout, Button, Card, PageShell, NavModule from "@codeatlasdev/ui"

Behaviour to keep:
- `<AppShellLayout {modules} {pathname} onNavigate={(path) => (pathname = path)} {stage} {stageVisible} persistPanel={false} mainId={null} skipLink={false}>` with `stage` a snippet that draws the map
- The map is a draggable grid whose camera lives in `$state`; an attachment counts each mount in `mounts` with `untrack` (a tracked `+=` would loop), shown in the page
- One module `id: 'field'` with 3 items: Leads, Routes, Report
- The page is `<PageShell title="Floating over the stage" description={pathname}>` with a `ca-stage-panel` wrapper around a `Card` that holds the mount count hint and an outlined `Button` toggling `stageVisible`
- Stage frame height is `height: 440px`

Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.

Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours.

Library parts

• AppShellLayout @codeatlasdev/ui
• Button @codeatlasdev/ui
• Card @codeatlasdev/ui
• PageShell @codeatlasdev/ui

How it is built

• `<AppShellLayout {modules} {pathname} onNavigate={(path) => (pathname = path)} {stage} {stageVisible} persistPanel={false} mainId={null} skipLink={false}>` with `stage` a snippet that draws the map
• The map is a draggable grid whose camera lives in `$state`; an attachment counts each mount in `mounts` with `untrack` (a tracked `+=` would loop), shown in the page
• One module `id: 'field'` with 3 items: Leads, Routes, Report
• The page is `<PageShell title="Floating over the stage" description={pathname}>` with a `ca-stage-panel` wrapper around a `Card` that holds the mount count hint and an outlined `Button` toggling `stageVisible`
• Stage frame height is `height: 440px`

Related

• #610 Map, split and page component/layout
• #166 Live shell component/layout
• #601 Short panel component/layout
• #530 Labels, search slot, badges and More component/layout
• #187 Dashboard page component/layout
• #480 Panel width component/layout