#166
Live shell
A working app shell with a rail, panel and page content whose pathname lives in local state and updates on navigation.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Live shell" pattern (@codeatlasdev/ui demo #166, layout/app-shell) in my app.
Call get_demo({ ids: ["#166"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Wiring the shell into an app: the router owns the URL and the shell receives it as a prop.
Keep these library parts, with the props and tokens the demo uses:
- AppShellLayout, PageShell, KpiCard, KpiGrid, Card, NavModule from "@codeatlasdev/ui"
Behaviour to keep:
- `<AppShellLayout {modules} {pathname} onNavigate={(path) => (pathname = path)} persistPanel={false} mainId={null} skipLink={false}>`
- `const modules: NavModule[]` has two modules, `id: 'app'` and `id: 'account'`, with 3 items each
- `let pathname = $state('/app/dashboard')` is the only navigation state
- `function intercept(e: MouseEvent)` turns in-stage `a[href^="/"]` clicks into `pathname` updates
- Page is `<PageShell title={titles[pathname] ?? 'Page'} description={pathname}>` with a `KpiGrid` of 2 `KpiCard` items: Revenue and Users
- Stage 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 - PageShell
@codeatlasdev/ui - KpiCard
@codeatlasdev/ui - KpiGrid
@codeatlasdev/ui - Card
@codeatlasdev/ui
How it is built
- `<AppShellLayout {modules} {pathname} onNavigate={(path) => (pathname = path)} persistPanel={false} mainId={null} skipLink={false}>`
- `const modules: NavModule[]` has two modules, `id: 'app'` and `id: 'account'`, with 3 items each
- `let pathname = $state('/app/dashboard')` is the only navigation state
- `function intercept(e: MouseEvent)` turns in-stage `a[href^="/"]` clicks into `pathname` updates
- Page is `<PageShell title={titles[pathname] ?? 'Page'} description={pathname}>` with a `KpiGrid` of 2 `KpiCard` items: Revenue and Users
- Stage height is `height: 440px`
Related
Loading source.