Open the palette

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

Build the "Open the palette" pattern (@codeatlasdev/ui demo #156, navigation/command-palette) in my app.

Call get_demo({ ids: ["#156"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Global quick navigation: jump to any page of a multi-module app by typing its name.

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

Behaviour to keep:
- `<CommandPalette {modules} onNavigate={(path) => (picked = path)} bind:open />`
- `const modules: NavModule[]` has two modules, `id: 'app'` with 3 items and `id: 'account'` with 3 items
- Items carry `id`, `label`, `icon` and `path`, for example `path: '/app/dashboard'`
- `<Button variant="filled" onclick={() => (open = true)}>` with `{#snippet leading()}<Keyboard size={16} />{/snippet}` opens it
- A `<Kbd>` hint is shown beside the button
- Result shown in `aria-live="polite"` as `Selected: <code>{picked}</code>`

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

• CommandPalette @codeatlasdev/ui
• Button @codeatlasdev/ui
• Kbd @codeatlasdev/ui

How it is built

• `<CommandPalette {modules} onNavigate={(path) => (picked = path)} bind:open />`
• `const modules: NavModule[]` has two modules, `id: 'app'` with 3 items and `id: 'account'` with 3 items
• Items carry `id`, `label`, `icon` and `path`, for example `path: '/app/dashboard'`
• `<Button variant="filled" onclick={() => (open = true)}>` with `{#snippet leading()}<Keyboard size={16} />{/snippet}` opens it
• A `<Kbd>` hint is shown beside the button
• Result shown in `aria-live="polite"` as `Selected: <code>{picked}</code>`

Related

• #422 Async results component/navigation
• #155 Keyboard component/navigation
• #146 autofocus component/navigation
• #149 focusTrap component/navigation
• #157 Left and right component/navigation
• #160 Basic component/navigation