--- a/design_system/src/catalog.js	Tue Aug 04 16:49:11 2026 -0700
+++ b/design_system/src/catalog.js	Wed Aug 05 05:25:40 2026 -0700
@@ -1,732 +1,304 @@
-/** @const {!ReadonlyArray<!Object>} shadcn concepts shown by the catalog. */
-export const componentCatalog = [
-  {
-    name: "Accordion",
-    slug: "accordion",
-    element: "zen-accordion",
-    group: "Disclosure",
-    description: "A group of native details elements with optional single-open behavior.",
-    markup: `<zen-accordion>
-  <details open><summary>Is it accessible?</summary><p>It keeps native details and summary semantics.</p></details>
-  <details><summary>Can several open?</summary><p>Add the multiple attribute to allow it.</p></details>
-</zen-accordion>`,
-  },
-  {
-    name: "Alert",
-    slug: "alert",
-    element: "zen-alert",
-    group: "Feedback",
-    description: "Status messaging with semantic tones and optional dismissal.",
-    existing: true,
-  },
-  {
-    name: "Alert Dialog",
-    slug: "alert-dialog",
-    element: "zen-alert-dialog",
-    group: "Overlays",
-    description: "A native modal dialog for decisions that require confirmation.",
-    markup: `<zen-alert-dialog>
-  <button type="button" data-zen-trigger>Delete deployment</button>
-  <dialog>
-    <h3>Delete deployment?</h3>
-    <p>This action cannot be undone.</p>
-    <button type="button" data-zen-close>Cancel</button>
-    <button type="button" value="confirm" data-zen-close>Delete</button>
-  </dialog>
-</zen-alert-dialog>`,
-  },
-  {
-    name: "Aspect Ratio",
-    slug: "aspect-ratio",
-    element: "zen-aspect-ratio",
-    group: "Layout",
-    description: "A media frame driven by a readable ratio attribute.",
-    markup: `<zen-aspect-ratio ratio="16/9">
-  <div class="demo-media">16 / 9</div>
-</zen-aspect-ratio>`,
-  },
-  {
-    name: "Attachment",
-    slug: "attachment",
-    element: "zen-attachment",
-    group: "Chat",
-    description: "File and upload state presentation using ordinary links and buttons.",
-    markup: `<zen-attachment state="complete">
-  <span aria-hidden="true">PDF</span>
-  <div><strong>release-notes.pdf</strong><small>248 KB · Ready</small></div>
-  <button type="button" aria-label="Remove attachment"><zen-icon name="close"></zen-icon></button>
-</zen-attachment>`,
-  },
-  {
-    name: "Avatar",
-    slug: "avatar",
-    element: "zen-avatar",
-    group: "Display",
-    description: "A compact identity image with a visible text fallback.",
-    markup: `<zen-avatar aria-label="June Park"><span>JP</span></zen-avatar>`,
-  },
-  {
-    name: "Badge",
-    slug: "badge",
-    element: "zen-badge",
-    group: "Display",
-    description: "A small label for metadata, state, or counts.",
-    markup: `<zen-stack direction="row">
-  <zen-badge>Default</zen-badge>
-  <zen-badge tone="success">Healthy</zen-badge>
-  <zen-badge tone="danger">Failed</zen-badge>
-</zen-stack>`,
-  },
-  {
-    name: "Breadcrumb",
-    slug: "breadcrumb",
-    element: "zen-breadcrumb",
-    group: "Navigation",
-    description: "A native navigation landmark for hierarchical location.",
-    markup: `<zen-breadcrumb>
-  <nav><ol>
-    <li><a href="/">Home</a></li>
-    <li><a href="/components">Components</a></li>
-    <li aria-current="page">Breadcrumb</li>
-  </ol></nav>
-</zen-breadcrumb>`,
-  },
-  {
-    name: "Bubble",
-    slug: "bubble",
-    element: "zen-bubble",
-    group: "Chat",
-    description: "A message bubble with incoming and outgoing alignment.",
-    markup: `<zen-stack>
-  <zen-bubble><p>The deployment is ready.</p></zen-bubble>
-  <zen-bubble align="end"><p>Ship it.</p></zen-bubble>
-</zen-stack>`,
-  },
-  {
-    name: "Button",
-    slug: "button",
-    element: "zen-button",
-    group: "Actions",
-    description: "Native buttons and links with shared variants and states.",
-    existing: true,
-  },
-  {
-    name: "Button Group",
-    slug: "button-group",
-    element: "zen-button-group",
-    group: "Actions",
-    description: "Related native buttons joined into one visual control.",
-    markup: `<zen-button-group aria-label="Text alignment">
-  <button type="button">Left</button>
-  <button type="button">Center</button>
-  <button type="button">Right</button>
-</zen-button-group>`,
-  },
-  {
-    name: "Calendar",
-    slug: "calendar",
-    element: "zen-calendar",
-    group: "Forms",
-    description: "A first-party date month grid backed by a native form value.",
-    markup: `<zen-calendar>
-  <label for="calendar-demo">Release date</label>
-  <input id="calendar-demo" type="date" value="2026-08-04" />
-</zen-calendar>`,
-  },
-  {
-    name: "Card",
-    slug: "card",
-    element: "zen-card",
-    group: "Display",
-    description: "A visual container around native article or section content.",
-    existing: true,
-  },
-  {
-    name: "Carousel",
-    slug: "carousel",
-    element: "zen-carousel",
-    group: "Collections",
-    description: "A scroll-snap collection with native buttons and keyboard controls.",
-    markup: `<zen-carousel aria-label="Recent projects">
-  <div data-zen-viewport>
-    <article>Mercurial forge</article>
-    <article>HLS player</article>
-    <article>LaTeX editor</article>
-  </div>
-  <button type="button" data-zen-prev aria-label="Previous slide"><zen-icon name="arrow-left"></zen-icon></button>
-  <button type="button" data-zen-next aria-label="Next slide"><zen-icon name="arrow-right"></zen-icon></button>
-</zen-carousel>`,
-  },
-  {
-    name: "Chart",
-    slug: "chart",
-    element: "zen-chart",
-    group: "Data",
-    description: "A dependency-free chart frame for semantic labels and custom marks.",
-    markup: `<zen-chart aria-label="Build minutes by day">
-  <div data-zen-chart-plot>
-    <span style="--zen-chart-value: 42%" data-label="Mon"></span>
-    <span style="--zen-chart-value: 76%" data-label="Tue"></span>
-    <span style="--zen-chart-value: 58%" data-label="Wed"></span>
-    <span style="--zen-chart-value: 88%" data-label="Thu"></span>
-  </div>
-</zen-chart>`,
-  },
-  {
-    name: "Checkbox",
-    slug: "checkbox",
-    element: "zen-checkbox",
-    group: "Forms",
-    description: "A styled native checkbox that remains form-associated.",
-    markup: `<zen-checkbox>
-  <label><input type="checkbox" checked /> Include deployment artifacts</label>
-</zen-checkbox>`,
-  },
-  {
-    name: "Collapsible",
-    slug: "collapsible",
-    element: "zen-collapsible",
-    group: "Disclosure",
-    description: "A single native details disclosure.",
-    markup: `<zen-collapsible>
-  <details><summary>Three changed files</summary><p>server.c, styles.css, README.md</p></details>
-</zen-collapsible>`,
-  },
-  {
-    name: "Combobox",
-    slug: "combobox",
-    element: "zen-combobox",
-    group: "Forms",
-    description: "A filterable text input backed by an accessible option list.",
-    markup: `<zen-combobox>
-  <label for="repo-combobox">Repository</label>
-  <input id="repo-combobox" autocomplete="off" placeholder="Find repository" />
-  <div role="listbox">
-    <button type="button" role="option" data-value="zenbu">zenbu</button>
-    <button type="button" role="option" data-value="hg-web">hg-web</button>
-    <button type="button" role="option" data-value="seobeo">seobeo</button>
-  </div>
-</zen-combobox>`,
-  },
-  {
-    name: "Command",
-    slug: "command",
-    element: "zen-command",
-    group: "Navigation",
-    description: "A keyboard-first filterable command list.",
-    markup: `<zen-command>
-  <input type="search" aria-label="Commands" placeholder="Type a command" />
-  <div role="menu">
-    <button type="button" role="menuitem" data-value="new">New repository</button>
-    <button type="button" role="menuitem" data-value="deploy">Deploy release</button>
-    <button type="button" role="menuitem" data-value="theme">Toggle theme</button>
-  </div>
-</zen-command>`,
-  },
-  {
-    name: "Context Menu",
-    slug: "context-menu",
-    element: "zen-context-menu",
-    group: "Menus",
-    description: "A right-click menu with keyboard navigation and native buttons.",
-    markup: `<zen-context-menu>
-  <div data-zen-trigger tabindex="0">Right-click this repository</div>
-  <div role="menu" hidden>
-    <button type="button" role="menuitem">Open</button>
-    <button type="button" role="menuitem">Clone</button>
-    <button type="button" role="menuitem">Archive</button>
-  </div>
-</zen-context-menu>`,
-  },
-  {
-    name: "Data Table",
-    slug: "data-table",
-    element: "zen-data-table",
-    group: "Data",
-    description: "A native table enhanced with optional client-side sorting.",
-    markup: `<zen-data-table>
-  <table>
-    <thead><tr>
-      <th><button type="button" data-zen-sort="name">Repository</button></th>
-      <th><button type="button" data-zen-sort="commits">Commits</button></th>
-    </tr></thead>
-    <tbody>
-      <tr><td data-key="name">seobeo</td><td data-key="commits">87</td></tr>
-      <tr><td data-key="name">hg-web</td><td data-key="commits">142</td></tr>
-      <tr><td data-key="name">design-system</td><td data-key="commits">12</td></tr>
-    </tbody>
-  </table>
-</zen-data-table>`,
-  },
-  {
-    name: "Date Picker",
-    slug: "date-picker",
-    element: "zen-date-picker",
-    group: "Forms",
-    description: "A tokenized date trigger and first-party keyboard calendar.",
-    markup: `<zen-date-picker>
-  <label for="date-picker-demo">Deploy on</label>
-  <input id="date-picker-demo" type="date" />
-</zen-date-picker>`,
-  },
-  {
-    name: "Dialog",
-    slug: "dialog",
-    element: "zen-dialog",
-    group: "Overlays",
-    description: "A native modal dialog with trigger and close wiring.",
-    markup: `<zen-dialog>
-  <button type="button" data-zen-trigger>Edit profile</button>
-  <dialog>
-    <h3>Edit profile</h3>
-    <label>Display name <input value="June" /></label>
-    <button type="button" data-zen-close>Done</button>
-  </dialog>
-</zen-dialog>`,
-  },
-  {
-    name: "Direction",
-    slug: "direction",
-    element: "zen-direction",
-    group: "Utilities",
-    description: "A light-DOM boundary for left-to-right or right-to-left content.",
-    markup: `<zen-direction dir="rtl"><p>مرحبا بالعالم</p></zen-direction>`,
-  },
-  {
-    name: "Drawer",
-    slug: "drawer",
-    element: "zen-drawer",
-    group: "Overlays",
-    description: "A native dialog presented as an edge drawer.",
-    markup: `<zen-drawer placement="bottom">
-  <button type="button" data-zen-trigger>Open drawer</button>
-  <dialog><h3>Build queue</h3><p>Two jobs are running.</p><button type="button" data-zen-close>Close</button></dialog>
-</zen-drawer>`,
-  },
-  {
-    name: "Dropdown Menu",
-    slug: "dropdown-menu",
-    element: "zen-dropdown-menu",
-    group: "Menus",
-    description: "A button-owned action menu with arrow-key navigation.",
-    markup: `<zen-dropdown-menu>
-  <button type="button" data-zen-trigger>Repository actions</button>
-  <div role="menu" hidden>
-    <button type="button" role="menuitem">Clone</button>
-    <button type="button" role="menuitem">Bookmark</button>
-    <button type="button" role="menuitem">Archive</button>
-  </div>
-</zen-dropdown-menu>`,
-  },
-  {
-    name: "Empty",
-    slug: "empty",
-    element: "zen-empty",
-    group: "Feedback",
-    description: "A structured empty state with an optional native action.",
-    markup: `<zen-empty>
-  <strong>No deployments yet</strong>
-  <p>Create the first release from the current default branch.</p>
-  <button type="button">Create deployment</button>
-</zen-empty>`,
-  },
-  {
-    name: "Field",
-    slug: "field",
-    element: "zen-field",
-    group: "Forms",
-    description: "Label, help text, validity, and a native form control.",
-    existing: true,
-  },
-  {
-    name: "Form",
-    slug: "form",
-    element: "zen-form",
-    group: "Forms",
-    description: "A native form boundary with visible browser validity state.",
-    markup: `<zen-form>
-  <form>
-    <zen-field><label>Repository name</label><input required /><small>Required</small></zen-field>
-    <button type="submit">Create</button>
-  </form>
-</zen-form>`,
-  },
-  {
-    name: "Hover Card",
-    slug: "hover-card",
-    element: "zen-hover-card",
-    group: "Overlays",
-    description: "Supplemental content shown on hover or keyboard focus.",
-    markup: `<zen-hover-card>
-  <a href="#" data-zen-trigger>@mrjunejune</a>
-  <div data-zen-content hidden><strong>June Park</strong><p>Building Zenbu in C and native HTML.</p></div>
-</zen-hover-card>`,
-  },
-  {
-    name: "Input",
-    slug: "input",
-    element: "zen-input",
-    group: "Forms",
-    description: "A styled native input with no replacement semantics.",
-    markup: `<zen-input><input type="email" placeholder="[email protected]" aria-label="Email" /></zen-input>`,
-  },
-  {
-    name: "Input Group",
-    slug: "input-group",
-    element: "zen-input-group",
-    group: "Forms",
-    description: "A native input with prefix, suffix, or inline actions.",
-    markup: `<zen-input-group>
-  <span aria-hidden="true">https://</span>
-  <input aria-label="Host" value="zenbu.babocoder.com" />
-  <button type="button">Copy</button>
-</zen-input-group>`,
-  },
-  {
-    name: "Input OTP",
-    slug: "input-otp",
-    element: "zen-input-otp",
-    group: "Forms",
-    description: "A single native one-time-code input with visual slots.",
-    markup: `<zen-input-otp>
-  <label for="otp-demo">Verification code</label>
-  <input id="otp-demo" inputmode="numeric" autocomplete="one-time-code" maxlength="6" />
-  <div data-zen-otp-slots aria-hidden="true"></div>
-</zen-input-otp>`,
-  },
-  {
-    name: "Item",
-    slug: "item",
-    element: "zen-item",
-    group: "Display",
-    description: "A flexible list row for an icon, content, and actions.",
-    markup: `<zen-item>
-  <zen-icon name="repository"></zen-icon>
-  <div><strong>hg-web</strong><small>Updated two minutes ago</small></div>
-  <button type="button">Open</button>
-</zen-item>`,
-  },
-  {
-    name: "Kbd",
-    slug: "kbd",
-    element: "zen-kbd",
-    group: "Display",
-    description: "Keyboard shortcut presentation using native kbd elements.",
-    markup: `<p>Open commands with <zen-kbd><kbd>Ctrl</kbd><span>+</span><kbd>K</kbd></zen-kbd>.</p>`,
-  },
-  {
-    name: "Label",
-    slug: "label",
-    element: "zen-label",
-    group: "Forms",
-    description: "A styled native label that keeps browser association.",
-    markup: `<zen-label><label for="label-demo">Branch name</label></zen-label>
-<zen-input><input id="label-demo" value="default" /></zen-input>`,
-  },
-  {
-    name: "Marker",
-    slug: "marker",
-    element: "zen-marker",
-    group: "Chat",
-    description: "An inline system marker for chat and activity streams.",
-    markup: `<zen-marker><span>Today</span></zen-marker>`,
-  },
-  {
-    name: "Menubar",
-    slug: "menubar",
-    element: "zen-menubar",
-    group: "Menus",
-    description: "A horizontal application menu using native buttons and menu roles.",
-    markup: `<zen-menubar>
-  <button type="button" data-zen-trigger>File</button>
-  <div role="menu" hidden><button role="menuitem">New</button><button role="menuitem">Open</button></div>
-  <button type="button" data-zen-trigger>View</button>
-  <div role="menu" hidden><button role="menuitem">Graph</button><button role="menuitem">History</button></div>
-</zen-menubar>`,
-  },
-  {
-    name: "Message",
-    slug: "message",
-    element: "zen-message",
-    group: "Chat",
-    description: "An avatar, author, and content row for conversations.",
-    markup: `<zen-message>
-  <zen-avatar aria-label="June"><span>JP</span></zen-avatar>
-  <div><strong>June</strong><zen-bubble><p>Can we deploy this release?</p></zen-bubble></div>
-</zen-message>`,
-  },
-  {
-    name: "Message Scroller",
-    slug: "message-scroller",
-    element: "zen-message-scroller",
-    group: "Chat",
-    description: "A chat viewport that follows new content until the reader scrolls away.",
-    markup: `<zen-message-scroller>
-  <div data-zen-viewport>
-    <p>Worker connected.</p><p>Build started.</p><p>Bundle created.</p><p>Deployment complete.</p>
-  </div>
-  <button type="button" data-zen-scroll-end hidden>Jump to latest</button>
-</zen-message-scroller>`,
-  },
-  {
-    name: "Native Select",
-    slug: "native-select",
-    element: "zen-native-select",
-    group: "Forms",
-    description: "A styled native select with full platform behavior.",
-    markup: `<zen-native-select><select aria-label="Environment"><option>Development</option><option>Production</option></select></zen-native-select>`,
-  },
-  {
-    name: "Navigation Menu",
-    slug: "navigation-menu",
-    element: "zen-navigation-menu",
-    group: "Navigation",
-    description: "Top-level navigation with optional keyboard-accessible flyouts.",
-    markup: `<zen-navigation-menu>
-  <nav aria-label="Products">
-    <button type="button" data-zen-trigger>Projects</button>
-    <div role="menu" hidden><a role="menuitem" href="/components">Zenbu UI</a><a role="menuitem" href="/">hg-web</a></div>
-    <a href="/tokens">Tokens</a>
-  </nav>
-</zen-navigation-menu>`,
-  },
-  {
-    name: "Pagination",
-    slug: "pagination",
-    element: "zen-pagination",
-    group: "Navigation",
-    description: "Page navigation built from native links.",
-    markup: `<zen-pagination>
-  <nav><a href="#">Previous</a><a href="#">1</a><a href="#" aria-current="page">2</a><a href="#">3</a><a href="#">Next</a></nav>
-</zen-pagination>`,
-  },
-  {
-    name: "Popover",
-    slug: "popover",
-    element: "zen-popover",
-    group: "Overlays",
-    description: "A lightweight panel using the native Popover API when available.",
-    markup: `<zen-popover>
-  <button type="button" data-zen-trigger>Open settings</button>
-  <div data-zen-content><strong>Dimensions</strong><label>Width <input value="100%" /></label></div>
-</zen-popover>`,
-  },
-  {
-    name: "Progress",
-    slug: "progress",
-    element: "zen-progress",
-    group: "Feedback",
-    description: "A styled native progress element.",
-    markup: `<zen-progress><label for="progress-demo">Uploading</label><progress id="progress-demo" value="68" max="100">68%</progress></zen-progress>`,
-  },
-  {
-    name: "Radio Group",
-    slug: "radio-group",
-    element: "zen-radio-group",
-    group: "Forms",
-    description: "A fieldset of native radio inputs.",
-    markup: `<zen-radio-group>
-  <fieldset><legend>Visibility</legend>
-    <label><input type="radio" name="visibility" checked /> Public</label>
-    <label><input type="radio" name="visibility" /> Private</label>
-  </fieldset>
-</zen-radio-group>`,
-  },
-  {
-    name: "Resizable",
-    slug: "resizable",
-    element: "zen-resizable",
-    group: "Layout",
-    description: "Two native panels separated by a pointer and keyboard handle.",
-    markup: `<zen-resizable>
-  <section data-zen-panel>Repository tree</section>
-  <div data-zen-handle tabindex="0"></div>
-  <section data-zen-panel>File preview</section>
-</zen-resizable>`,
-  },
-  {
-    name: "Scroll Area",
-    slug: "scroll-area",
-    element: "zen-scroll-area",
-    group: "Layout",
-    description: "A bounded native scroll container with theme-aware scrollbars.",
-    markup: `<zen-scroll-area tabindex="0">
-  <p>default</p><p>feature/design-system</p><p>release/2026-08</p><p>experiment/trading</p>
-</zen-scroll-area>`,
-  },
-  {
-    name: "Select",
-    slug: "select",
-    element: "zen-select",
-    group: "Forms",
-    description: "A native select styled as the default accessible implementation.",
-    markup: `<zen-select><label>Branch <select><option>default</option><option>stable</option></select></label></zen-select>`,
-  },
-  {
-    name: "Separator",
-    slug: "separator",
-    element: "zen-separator",
-    group: "Layout",
-    description: "A native horizontal rule or ARIA separator.",
-    markup: `<div>Repository</div><zen-separator><hr /></zen-separator><div>Changesets</div>`,
-  },
-  {
-    name: "Sheet",
-    slug: "sheet",
-    element: "zen-sheet",
-    group: "Overlays",
-    description: "A native dialog presented from a selected screen edge.",
-    markup: `<zen-sheet placement="right">
-  <button type="button" data-zen-trigger>Open filters</button>
-  <dialog><h3>Filters</h3><label>Author <input /></label><button type="button" data-zen-close>Apply</button></dialog>
-</zen-sheet>`,
-  },
-  {
-    name: "Sidebar",
-    slug: "sidebar",
-    element: "zen-sidebar",
-    group: "Navigation",
-    description: "A collapsible navigation region with an explicit native trigger.",
-    markup: `<zen-sidebar open>
-  <button type="button" data-zen-sidebar-trigger>Toggle sidebar</button>
-  <aside data-zen-sidebar-panel><nav><a href="/">Overview</a><a href="/components">Components</a><a href="/tokens">Tokens</a></nav></aside>
-</zen-sidebar>`,
-  },
-  {
-    name: "Skeleton",
-    slug: "skeleton",
-    element: "zen-skeleton",
-    group: "Feedback",
-    description: "A reduced-motion-safe placeholder for pending content.",
-    markup: `<zen-stack>
-  <zen-skeleton shape="circle"></zen-skeleton>
-  <zen-skeleton></zen-skeleton>
-  <zen-skeleton width="60%"></zen-skeleton>
-</zen-stack>`,
-  },
-  {
-    name: "Slider",
-    slug: "slider",
-    element: "zen-slider",
-    group: "Forms",
-    description: "A native range input with browser keyboard and pointer behavior.",
-    markup: `<zen-slider><label for="slider-demo">Volume</label><input id="slider-demo" type="range" value="65" /></zen-slider>`,
-  },
-  {
-    name: "Sonner",
-    slug: "sonner",
-    element: "zen-notifications",
-    group: "Feedback",
-    description: "Zenbu's bounded, scoped, Sonner-like notification stack.",
-    markup: `<zen-notifications aria-label="Sonner demo">
-  <button type="button" data-notification-demo data-notification-id="sonner-demo" data-tone="success" data-message="Deployment complete">Show notification</button>
-</zen-notifications>`,
-  },
-  {
-    name: "Spinner",
-    slug: "spinner",
-    element: "zen-spinner",
-    group: "Feedback",
-    description: "A small CSS loading indicator with status semantics.",
-    markup: `<zen-spinner aria-label="Loading repositories"></zen-spinner>`,
-  },
-  {
-    name: "Switch",
-    slug: "switch",
-    element: "zen-switch",
-    group: "Forms",
-    description: "A native checkbox presented with switch semantics.",
-    markup: `<zen-switch><label><input type="checkbox" checked /> Automatic deployment</label></zen-switch>`,
-  },
-  {
-    name: "Table",
-    slug: "table",
-    element: "zen-table",
-    group: "Data",
-    description: "Responsive styling around a native HTML table.",
-    markup: `<zen-table><table>
-  <caption>Recent changesets</caption>
-  <thead><tr><th>Revision</th><th>Author</th></tr></thead>
-  <tbody><tr><td>253:fdf3816959cb</td><td>June</td></tr><tr><td>252:7a7581f040e8</td><td>June</td></tr></tbody>
-</table></zen-table>`,
-  },
-  {
-    name: "Tabs",
-    slug: "tabs",
-    element: "zen-tabs",
-    group: "Disclosure",
-    description: "ARIA tabs with automatic or manual keyboard activation.",
-    markup: `<zen-tabs>
-  <div role="tablist" aria-label="Repository views">
-    <button type="button" role="tab" data-value="files">Files</button>
-    <button type="button" role="tab" data-value="history">History</button>
-    <button type="button" role="tab" data-value="graph">Graph</button>
-  </div>
-  <section role="tabpanel">Browse repository files.</section>
-  <section role="tabpanel">Inspect changesets.</section>
-  <section role="tabpanel">View branch topology.</section>
-</zen-tabs>`,
-  },
-  {
-    name: "Textarea",
-    slug: "textarea",
-    element: "zen-textarea",
-    group: "Forms",
-    description: "A styled native multiline text control.",
-    markup: `<zen-textarea><textarea aria-label="Commit message" placeholder="Describe this change"></textarea></zen-textarea>`,
-  },
-  {
-    name: "Toast",
-    slug: "toast",
-    element: "zen-notifications",
-    group: "Feedback",
-    description: "The deprecated toast concept maps to zen-notifications.",
-    markup: `<zen-alert tone="warning"><p><strong>Toast is deprecated.</strong> Use <code>zen-notifications</code> for scoped transient messages.</p></zen-alert>`,
-  },
-  {
-    name: "Toggle",
-    slug: "toggle",
-    element: "zen-toggle",
-    group: "Actions",
-    description: "A native button with managed pressed state.",
-    markup: `<zen-toggle><button type="button">Bold</button></zen-toggle>`,
-  },
-  {
-    name: "Toggle Group",
-    slug: "toggle-group",
-    element: "zen-toggle-group",
-    group: "Actions",
-    description: "Single or multiple pressed-state buttons with roving keyboard focus.",
-    markup: `<zen-toggle-group type="single" value="center" aria-label="Alignment">
-  <button type="button" value="left">Left</button>
-  <button type="button" value="center">Center</button>
-  <button type="button" value="right">Right</button>
-</zen-toggle-group>`,
-  },
-  {
-    name: "Tooltip",
-    slug: "tooltip",
-    element: "zen-tooltip",
-    group: "Overlays",
-    description: "A delayed, non-interactive description for hover and focus.",
-    markup: `<zen-tooltip>
-  <button type="button" data-zen-trigger aria-label="Add repository"><zen-icon name="add"></zen-icon></button>
-  <span data-zen-content hidden>Add repository</span>
-</zen-tooltip>`,
-  },
-  {
-    name: "Typography",
-    slug: "typography",
-    element: "zen-typography",
-    group: "Foundations",
-    description: "Readable defaults for native headings, paragraphs, lists, and code.",
-    markup: `<zen-typography>
-  <h2>The Mercurial forge</h2>
-  <p>Typography stays semantic and inherits Zenbu tokens.</p>
-  <blockquote>Own the stack, understand the stack.</blockquote>
-</zen-typography>`,
-  },
-];
+import "./components/index.js";
+import { componentCatalog } from "./component_catalog.js";
+import { ICON_NAMES } from "./components/icon.js";
+
+const stackComponent = {
+  name: "Stack",
+  slug: "stack",
+  element: "zen-stack",
+  group: "Layout",
+  description: "A Zenbu-specific flex layout primitive with tokenized gaps.",
+  existing: true,
+};
+const displayedComponents = [...componentCatalog, stackComponent];
+
+const pages = new Map([
+  ["/", "overview"],
+  ["/components", "overview"],
+  ["/tokens", "tokens"],
+  ["/icons", "icons"],
+  ["/components/button", "button"],
+  ["/components/card", "card"],
+  ["/components/alert", "alert"],
+  ["/components/field", "field"],
+  ["/components/notifications", "notifications"],
+  ["/components/stack", "stack"],
+]);
+
+for (const component of componentCatalog) {
+  pages.set(`/components/${component.slug}`, component.slug);
+}
+
+function createCatalogLink(component) {
+  const link = document.createElement("a");
+  link.href = `/components/${component.slug}`;
+  link.dataset.catalogLink = "";
+  link.dataset.zenElement = component.element;
+  link.textContent = component.name;
+  return link;
+}
+
+function createComponentCard(component) {
+  const link = createCatalogLink(component);
+  const card = document.createElement("zen-card");
+  card.setAttribute("interactive", "");
+  const article = document.createElement("article");
+  const heading = document.createElement("h3");
+  heading.textContent = component.name;
+  const description = document.createElement("p");
+  description.textContent = component.description;
+  const element = document.createElement("code");
+  element.textContent = component.element;
+  article.append(heading, description, element);
+  card.append(article);
+  link.replaceChildren(card);
+  return link;
+}
+
+function createCatalogPage(component) {
+  const section = document.createElement("section");
+  section.className = "catalog-page";
+  section.dataset.catalogPage = component.slug;
+  section.hidden = true;
+
+  const header = document.createElement("header");
+  header.className = "page-heading";
+  const eyebrow = document.createElement("p");
+  eyebrow.className = "eyebrow";
+  eyebrow.textContent = component.group;
+  const heading = document.createElement("h1");
+  heading.textContent = component.name;
+  const description = document.createElement("p");
+  description.textContent = component.description;
+  header.append(eyebrow, heading, description);
+
+  const story = document.createElement("zen-story");
+  story.setAttribute("name", `${component.name} example`);
+  const template = document.createElement("template");
+  template.innerHTML = component.markup;
+  story.append(template);
+  section.append(header, story);
+  return section;
+}
+
+function installComponentCatalog() {
+  const navigation = document.querySelector(
+    '.catalog-nav[aria-label="Components"]',
+  );
+  const componentGrid = document.querySelector(".component-grid");
+  const main = document.querySelector("#catalogMain");
+  if (!navigation || !componentGrid || !main) return;
+
+  navigation.replaceChildren(
+    ...displayedComponents.map(createCatalogLink),
+  );
+  componentGrid.replaceChildren(
+    ...displayedComponents.map(createComponentCard),
+  );
+
+  for (const component of componentCatalog) {
+    if (component.existing) continue;
+    main.append(createCatalogPage(component));
+  }
+}
+
+function installIconCatalog() {
+  const grid = document.querySelector("#iconGrid");
+  if (!grid) return;
+  const items = ICON_NAMES.map(name => {
+    const figure = document.createElement("figure");
+    const icon = document.createElement("zen-icon");
+    icon.setAttribute("name", name);
+    icon.setAttribute("size", "2rem");
+    const caption = document.createElement("figcaption");
+    const code = document.createElement("code");
+    code.textContent = name;
+    caption.append(code);
+    figure.append(icon, caption);
+    return figure;
+  });
+  grid.replaceChildren(...items);
+}
 
-/** @const {number} Number of mapped shadcn component concepts. */
-export const shadcnComponentCount = componentCatalog.length;
+function installComponentSearch() {
+  const input = document.querySelector("#componentSearch");
+  const status = document.querySelector("#componentSearchStatus");
+  if (!input || !status) return;
+  const links = [
+    ...document.querySelectorAll(
+      '.catalog-nav[aria-label="Components"] a',
+    ),
+  ];
+  const cards = [...document.querySelectorAll(".component-grid > a")];
+  const descriptions = new Map(
+    displayedComponents.map(component => [
+      component.slug,
+      [
+        component.name,
+        component.element,
+        component.group,
+        component.description,
+      ].join(" ").toLocaleLowerCase(),
+    ]),
+  );
+  const filter = () => {
+    const query = input.value.trim().toLocaleLowerCase();
+    let matches = 0;
+    for (const link of links) {
+      const slug = new URL(link.href).pathname.split("/").pop();
+      const visible = !query || descriptions.get(slug)?.includes(query);
+      link.hidden = !visible;
+      if (visible) matches++;
+    }
+    for (const card of cards) {
+      const slug = new URL(card.href).pathname.split("/").pop();
+      card.hidden = Boolean(query) &&
+        !descriptions.get(slug)?.includes(query);
+    }
+    status.textContent = query
+      ? `${matches} component${matches === 1 ? "" : "s"} found`
+      : `${links.length} components`;
+  };
+
+  input.addEventListener("input", filter);
+  input.addEventListener("keydown", event => {
+    if (event.key !== "Escape" || !input.value) return;
+    input.value = "";
+    filter();
+  });
+  document.addEventListener("keydown", event => {
+    const target = event.target;
+    const typing = target instanceof HTMLElement &&
+      target.matches("input, textarea, select, [contenteditable]");
+    if (event.key !== "/" || typing || event.metaKey || event.ctrlKey ||
+        event.altKey) return;
+    event.preventDefault();
+    input.focus();
+    input.select();
+  });
+  filter();
+}
+
+function showPage(pathname) {
+  const pageName = pages.get(pathname) || "overview";
+  for (const page of document.querySelectorAll("[data-catalog-page]")) {
+    page.hidden = page.dataset.catalogPage !== pageName;
+  }
+  for (const link of document.querySelectorAll(
+    ".catalog-sidebar [data-catalog-link]",
+  )) {
+    const active = new URL(link.href).pathname === pathname;
+    if (active) link.setAttribute("aria-current", "page");
+    else link.removeAttribute("aria-current");
+  }
+  const heading = document.querySelector(
+    `[data-catalog-page="${pageName}"] h1`,
+  );
+  if (heading) document.title = `${heading.textContent} · Zenbu UI`;
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+  installComponentCatalog();
+  installIconCatalog();
+  installComponentSearch();
+  const root = document.documentElement;
+  const systemTheme = matchMedia("(prefers-color-scheme: dark)");
+  const storedTheme = localStorage.getItem("zen-theme");
+  if (storedTheme) root.dataset.zenTheme = storedTheme;
+
+  const themeToggle = document.querySelector("#themeToggle");
+  const isDark = () => {
+    if (root.dataset.zenTheme) {
+      return root.dataset.zenTheme === "dark";
+    }
+    return systemTheme.matches;
+  };
+  const updateThemeButton = () => {
+    const dark = isDark();
+    themeToggle?.setAttribute("aria-pressed", String(dark));
+    if (themeToggle) {
+      themeToggle.textContent = dark
+        ? "Use light theme"
+        : "Use dark theme";
+    }
+  };
+  updateThemeButton();
+  themeToggle?.addEventListener("click", () => {
+    const next = isDark() ? "light" : "dark";
+    root.dataset.zenTheme = next;
+    localStorage.setItem("zen-theme", next);
+    updateThemeButton();
+  });
+  systemTheme.addEventListener("change", () => {
+    if (!root.dataset.zenTheme) updateThemeButton();
+  });
+
+  document.addEventListener("click", event => {
+    const notificationDemo = event.target.closest(
+      "[data-notification-demo]",
+    );
+    if (notificationDemo) {
+      const scope = notificationDemo.closest("zen-notifications");
+      if (!scope) return;
+      const tone = notificationDemo.dataset.tone || "info";
+      const baseId = notificationDemo.dataset.notificationId || tone;
+      const count = notificationDemo.dataset.burst === "true" ? 5 : 1;
+      for (let index = 0; index < count; index++) {
+        notificationDemo.dispatchEvent(new CustomEvent("zen-notify", {
+          bubbles: true,
+          composed: false,
+          detail: {
+            version: 1,
+            id: count > 1 ? `${baseId}-${Date.now()}-${index}` : baseId,
+            tone,
+            message: notificationDemo.dataset.message || "Notification",
+            description: notificationDemo.dataset.description,
+            announcement: tone === "error" ? "assertive" : "polite",
+            durationMs: 5000,
+            persistent: notificationDemo.dataset.persistent === "true",
+            action: notificationDemo.dataset.action === "true"
+              ? { token: `catalog-action-${Date.now()}`, label: "Retry" }
+              : undefined,
+          },
+        }));
+      }
+      return;
+    }
+
+    const dismissDemo = event.target.closest(
+      "[data-notification-dismiss-demo]",
+    );
+    if (dismissDemo) {
+      dismissDemo.dispatchEvent(new CustomEvent(
+        "zen-dismiss-notification",
+        {
+          bubbles: true,
+          composed: false,
+          detail: {
+            version: 1,
+            id: dismissDemo.dataset.notificationDismissDemo,
+          },
+        },
+      ));
+      return;
+    }
+
+    const link = event.target.closest("a[data-catalog-link]");
+    if (!link ||
+        link.origin !== location.origin ||
+        event.defaultPrevented ||
+        event.button !== 0 ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.altKey ||
+        link.hasAttribute("download") ||
+        link.target) return;
+    event.preventDefault();
+    history.pushState({}, "", link.href);
+    showPage(location.pathname);
+    document.querySelector("#catalogMain")?.focus();
+  });
+  window.addEventListener("popstate", () => showPage(location.pathname));
+  showPage(location.pathname);
+});