@kerfjs/ui 5.0.0-beta.8 → 5.0.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.8",
+  "version": "5.0.0-beta.9",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",
@@ -64,20 +64,20 @@
       "browser": "./dist/browser/toolbar-text.js",
       "import": "./dist/toolbar-text.js"
     },
-    "./menu-action-row": {
-      "types": "./dist/menu-action-row.d.ts",
-      "browser": "./dist/browser/menu-action-row.js",
-      "import": "./dist/menu-action-row.js"
+    "./list-action-row": {
+      "types": "./dist/list-action-row.d.ts",
+      "browser": "./dist/browser/list-action-row.js",
+      "import": "./dist/list-action-row.js"
     },
-    "./menu-item": {
-      "types": "./dist/menu-item.d.ts",
-      "browser": "./dist/browser/menu-item.js",
-      "import": "./dist/menu-item.js"
+    "./list-item": {
+      "types": "./dist/list-item.d.ts",
+      "browser": "./dist/browser/list-item.js",
+      "import": "./dist/list-item.js"
     },
-    "./menu-header": {
-      "types": "./dist/menu-header.d.ts",
-      "browser": "./dist/browser/menu-header.js",
-      "import": "./dist/menu-header.js"
+    "./list-header": {
+      "types": "./dist/list-header.d.ts",
+      "browser": "./dist/browser/list-header.js",
+      "import": "./dist/list-header.js"
     },
     "./resizable-region": {
       "types": "./dist/resizable-region.d.ts",
@@ -97,6 +97,14 @@
       "browser": "./dist/browser/app-tab.js",
       "import": "./dist/app-tab.js"
     },
+    "./catalog": {
+      "types": "./dist/catalog.d.ts",
+      "import": "./dist/catalog.js"
+    },
+    "./wire-catalog": {
+      "types": "./dist/wire-catalog.d.ts",
+      "import": "./dist/wire-catalog.js"
+    },
     "./tab-bar": {
       "types": "./dist/tab-bar.d.ts",
       "browser": "./dist/browser/tab-bar.js",
@@ -200,11 +208,12 @@
     "./toolbar.css": "./dist/styles/toolbar.css",
     "./toolbar-control-group.css": "./dist/styles/toolbar-control-group.css",
     "./toolbar-text.css": "./dist/styles/toolbar-text.css",
-    "./menu-action-row.css": "./dist/styles/menu-action-row.css",
-    "./menu-item.css": "./dist/styles/menu-item.css",
-    "./menu-header.css": "./dist/styles/menu-header.css",
+    "./list-action-row.css": "./dist/styles/list-action-row.css",
+    "./list-item.css": "./dist/styles/list-item.css",
+    "./list-header.css": "./dist/styles/list-header.css",
     "./resizable-region.css": "./dist/styles/resizable-region.css",
     "./app-tab.css": "./dist/styles/app-tab.css",
+    "./catalog.css": "./dist/styles/catalog.css",
     "./tab-bar.css": "./dist/styles/tab-bar.css",
     "./nav-stack.css": "./dist/styles/nav-stack.css",
     "./split-view.css": "./dist/styles/split-view.css",

package/ux-demo/recipes/app-shell.tsx

@@ -1,9 +1,9 @@
 import '@kerfjs/ui/layout.css';
 import './recipes.css';
 
+import { ListHeader } from '@kerfjs/ui/list-header';
+import { ListItem } from '@kerfjs/ui/list-item';
 import { LucideIcon } from '@kerfjs/ui/lucide-icon';
-import { MenuHeader } from '@kerfjs/ui/menu-header';
-import { MenuItem } from '@kerfjs/ui/menu-item';
 import { PanelHeader } from '@kerfjs/ui/panel-header';
 import { ResizableRegion } from '@kerfjs/ui/resizable-region';
 import { Toolbar } from '@kerfjs/ui/toolbar';
@@ -23,7 +23,7 @@ export const createRecipe: RecipeFactory = (announce) => {
   const render = () => <section class="kui-recipe recipe-shell kui-recipe__surface kui-layout" data-recipe="recipe-app-shell" data-responsive-pane={responsivePane.value}>
     <Toolbar label="Atlas workspace" leading={<ToolbarControlGroup appearance="borderless" single><ToolbarText text="Atlas" /></ToolbarControlGroup>} trailing={<div class="recipe-shell__toolbar-actions"><ToolbarControlGroup className="recipe-shell__responsive-controls" appearance="borderless" label="Workspace panes"><button type="button" aria-label="Show navigation" aria-controls="recipe-shell-navigation" aria-pressed={String(responsivePane.value === 'navigation')} data-action="recipe-action" data-recipe-command="show-navigation"><LucideIcon icon={Folder} name="folder" /></button><button type="button" aria-label="Show content" aria-controls="recipe-shell-content" aria-pressed={String(responsivePane.value === 'content')} data-action="recipe-action" data-recipe-command="show-content"><LucideIcon icon={Inbox} name="inbox" /></button><button type="button" aria-label="Show inspector" aria-controls="recipe-shell-inspector" aria-pressed={String(responsivePane.value === 'inspector')} data-action="recipe-action" data-recipe-command="show-inspector"><LucideIcon icon={Settings} name="settings" /></button></ToolbarControlGroup><ToolbarControlGroup appearance="borderless" label="Workspace controls"><button type="button" aria-label="Notifications" data-action="recipe-action" data-recipe-command="notify"><LucideIcon icon={Bell} name="bell" /></button><button type="button" aria-label="Settings" data-action="recipe-action" data-recipe-command="settings"><LucideIcon icon={Settings} name="settings" /></button></ToolbarControlGroup></div>} />
     <div class="recipe-shell__body">
-      <div id="recipe-shell-navigation" class="recipe-shell__nav-region"><ResizableRegion id="recipe-navigation" label="Navigation" size={navigationSize.value} min={180} max={320}><aside class="recipe-shell__nav kui-pane"><MenuHeader label="Workspace" /><nav class="recipe-shell__nav-list kui-pane__content kui-content" aria-label="Workspace"><section><MenuItem action="recipe-action" itemId="inbox" label="Inbox" icon={<LucideIcon icon={Inbox} name="inbox" />} selected={selected.value === 'inbox'} /><MenuItem action="recipe-action" itemId="projects" label="Projects with a deliberately wrapping title" icon={<LucideIcon icon={Folder} name="folder" />} selected={selected.value === 'projects'} multiline /></section></nav></aside></ResizableRegion></div>
+      <div id="recipe-shell-navigation" class="recipe-shell__nav-region"><ResizableRegion id="recipe-navigation" label="Navigation" size={navigationSize.value} min={180} max={320}><aside class="recipe-shell__nav kui-pane"><ListHeader label="Workspace" /><nav class="recipe-shell__nav-list kui-pane__content kui-content" aria-label="Workspace"><section><ListItem action="recipe-action" itemId="inbox" label="Inbox" icon={<LucideIcon icon={Inbox} name="inbox" />} selected={selected.value === 'inbox'} /><ListItem action="recipe-action" itemId="projects" label="Projects with a deliberately wrapping title" icon={<LucideIcon icon={Folder} name="folder" />} selected={selected.value === 'projects'} multiline /></section></nav></aside></ResizableRegion></div>
       <main id="recipe-shell-content" class="recipe-shell__main kui-pane"><PanelHeader title={selected.value === 'inbox' ? 'Inbox triage' : 'Active projects'} titleId="recipe-shell-main-title" actions={<button class="kui-recipe__button" data-primary="true" type="button" data-action="recipe-action" data-recipe-command="new">New task</button>} /><div class="recipe-shell__main-body kui-pane__content kui-content"><p class="kui-recipe__ownership kui-content-item">Recipe owns pane geometry and one scroll owner per pane. The app owns routing, data, pane visibility, sizes, and persistence.</p><div class="recipe-shell__cards">{['Release accessibility audit', 'Prepare tablet navigation', 'Review stale-data states', 'Confirm package boundaries'].map((title) => <article class="recipe-shell__card kui-content-item"><strong>{title}</strong><p class="kui-recipe__muted">Assigned to the interface systems team · due this week</p></article>)}</div></div></main>
       <div id="recipe-shell-inspector" class="recipe-shell__inspector-region"><ResizableRegion id="recipe-inspector" label="Inspector" size={inspectorSize.value} min={200} max={360} edge="start"><aside class="recipe-shell__inspector kui-pane"><PanelHeader title="Inspector" titleId="recipe-shell-inspector-title" /><div class="recipe-shell__inspector-body kui-pane__content kui-content"><ValueTable label="Selected task"><ValueTableRow label="Status" value="In review" /><ValueTableRow label="Owner" value="Mara Chen" /><ValueTableRow label="Priority" value="High" /></ValueTable></div></aside></ResizableRegion></div>
     </div>

package/ux-demo/recipes/list-detail-dialog.tsx

@@ -0,0 +1,45 @@
+import '@kerfjs/ui/layout.css';
+import '@kerfjs/ui/webawesome.css';
+import '@awesome.me/webawesome/dist/components/button/button.js';
+import '@awesome.me/webawesome/dist/components/dialog/dialog.js';
+import './recipes.css';
+
+import { ListHeader } from '@kerfjs/ui/list-header';
+import { ListItem } from '@kerfjs/ui/list-item';
+import { LucideIcon } from '@kerfjs/ui/lucide-icon';
+import { PanelHeader } from '@kerfjs/ui/panel-header';
+import { ValueTable, ValueTableRow } from '@kerfjs/ui/value-table';
+import { signal } from 'kerfjs';
+import { FileText } from 'lucide';
+
+import type { RecipeFactory } from './types.js';
+
+const records = {
+  alpha: { name: 'Northstar migration', owner: 'Mara Chen', state: 'In review', updated: 'Today, 09:42' },
+  beta: { name: 'Tablet navigation', owner: 'Sam Rivera', state: 'Ready', updated: 'Yesterday, 16:20' },
+  gamma: { name: 'Contrast audit', owner: 'Inez Okafor', state: 'Blocked', updated: 'Monday, 11:05' },
+} as const;
+
+interface RecipeDialogElement extends HTMLElement {
+  open: boolean;
+}
+
+export const createRecipe: RecipeFactory = (announce) => {
+  const selected = signal<keyof typeof records>('alpha');
+  const open = { value: false };
+  const render = () => <section class="kui-recipe kui-content" data-recipe="recipe-list-detail-dialog"><button class="kui-recipe__button kui-content-item" data-primary="true" type="button" data-action="recipe-action" data-recipe-command="open">Open project details</button><p class="kui-recipe__ownership kui-content-item">Web Awesome owns modal focus and dismissal. The recipe owns header/body/list-detail anatomy; the app owns open state, selection, and policy.</p><wa-dialog class="recipe-dialog" label="Project details" without-header open={open.value}><div class="recipe-dialog__pane kui-pane"><div class="recipe-list-detail kui-pane__content"><nav class="recipe-list-detail__list kui-pane" aria-label="Projects"><ListHeader label="Recent projects" /><div class="kui-pane__content kui-content"><section>{Object.entries(records).map(([id, record]) => <ListItem action="recipe-action" itemId={id} label={record.name} selected={selected.value === id} multiline />)}</section></div></nav><section class="recipe-list-detail__detail kui-pane"><PanelHeader title="Project details" titleId="recipe-dialog-title" summary="Compare delivery state without leaving the workspace." summaryId="recipe-dialog-summary" icon={<LucideIcon icon={FileText} name="file-text" />} actions={<wa-button appearance="plain" data-action="recipe-action" data-recipe-command="close">Close</wa-button>} /><div class="recipe-list-detail__body kui-pane__content kui-content" aria-live="polite"><h3 class="recipe-list-detail__title kui-recipe__pane-title kui-content-item">{records[selected.value].name}</h3><ValueTable label="Project details"><ValueTableRow label="Owner" value={records[selected.value].owner} /><ValueTableRow label="Status" value={records[selected.value].state} /><ValueTableRow label="Updated" value={records[selected.value].updated} /></ValueTable><div class="recipe-list-detail__actions kui-control-cluster"><wa-button appearance="outlined" data-action="recipe-action" data-recipe-command="archive">Archive</wa-button><wa-button variant="brand" appearance="accent" data-action="recipe-action" data-recipe-command="open-record">Open project</wa-button></div></div></section></div></div></wa-dialog></section>;
+  return {
+    render,
+    action(command, element) {
+      const id = element.dataset.itemId;
+      if (id && id in records) { selected.value = id as keyof typeof records; announce(`Selected ${records[selected.value].name}`); return; }
+      const dialog = element.closest('[data-recipe]')?.querySelector<RecipeDialogElement>('wa-dialog');
+      if (command === 'open' && dialog) { element.focus(); open.value = true; dialog.open = true; return; }
+      if (command === 'close' && dialog) { dialog.open = false; return; }
+      announce(`${command} requested`);
+    },
+    afterHide() {
+      open.value = false;
+    },
+  };
+};

package/ux-demo/recipes/loaders.ts

@@ -4,11 +4,12 @@ export const recipeIds = [
   'recipe-app-shell',
   'recipe-navigation-sidebar',
   'recipe-workspace-header',
-  'recipe-master-detail-dialog',
+  'recipe-list-detail-dialog',
   'recipe-composer-form',
   'recipe-list-workspace-states',
   'recipe-compact-toolbar',
   'recipe-navigation-stack',
+  'recipe-loading-inspector',
 ] as const;
 
 export type RecipeId = typeof recipeIds[number];
@@ -17,11 +18,12 @@ export const recipeLoaders: Record<RecipeId, () => Promise<{ createRecipe: Recip
   'recipe-app-shell': () => import('./app-shell.js'),
   'recipe-navigation-sidebar': () => import('./navigation-sidebar.js'),
   'recipe-workspace-header': () => import('./workspace-header.js'),
-  'recipe-master-detail-dialog': () => import('./master-detail-dialog.js'),
+  'recipe-list-detail-dialog': () => import('./list-detail-dialog.js'),
   'recipe-composer-form': () => import('./composer-form.js'),
   'recipe-list-workspace-states': () => import('./list-workspace-states.js'),
   'recipe-compact-toolbar': () => import('./compact-toolbar.js'),
   'recipe-navigation-stack': () => import('./navigation-stack.js'),
+  'recipe-loading-inspector': () => import('./loading-inspector.js'),
 };
 
 export function isRecipeId(value: string): value is RecipeId {

package/ux-demo/recipes/loading-inspector.tsx

@@ -0,0 +1,79 @@
+import '@kerfjs/ui/layout.css';
+import '@kerfjs/ui/select/register';
+import './recipes.css';
+
+import { ListItem } from '@kerfjs/ui/list-item';
+import { LucideIcon } from '@kerfjs/ui/lucide-icon';
+import { PanelHeader } from '@kerfjs/ui/panel-header';
+import { SegmentedControl } from '@kerfjs/ui/segmented-control';
+import { Select } from '@kerfjs/ui/select';
+import { StateBanner } from '@kerfjs/ui/state-banner';
+import { ValueTable, ValueTableRow } from '@kerfjs/ui/value-table';
+import { signal } from 'kerfjs';
+import { Columns3, FileText, Inbox, List } from 'lucide';
+
+import type { RecipeFactory } from './types.js';
+
+const icon = (node: Parameters<typeof LucideIcon>[0]['icon'], name: string) => <LucideIcon icon={node} name={name} />;
+
+/**
+ * A record inspector whose per-record values load asynchronously. Every
+ * value-bearing component takes `placeholder` from one loading flag, so the same
+ * chrome renders a faithful loading state and then the populated record — no
+ * separate skeleton markup. The composition is the point; `Skeleton` is the
+ * primitive it is built on (see the Skeleton component demo).
+ */
+export const createRecipe: RecipeFactory = (announce) => {
+  const loading = signal(true);
+  const render = () => {
+    const p = loading.value;
+    return <section class="kui-recipe recipe-inspector kui-recipe__surface kui-pane" data-recipe="recipe-loading-inspector" data-inspector-loading={String(p)}>
+      <PanelHeader
+        title="Ticket · KF-2048"
+        titleId="recipe-inspector-title"
+        summary="Restore keyboard focus after a dialog closes"
+        summaryId="recipe-inspector-summary"
+        icon={icon(FileText, 'file-text')}
+        placeholder={p}
+        actions={<button class="kui-recipe__button" data-primary="true" type="button" data-action="recipe-action" data-recipe-command="toggle">{p ? 'Show loaded' : 'Show loading'}</button>}
+      />
+      <div class="recipe-inspector__body kui-pane__content kui-content">
+        <section>
+          <ValueTable label="Ticket details">
+            <ValueTableRow label="Status" value="In review" icon={icon(Inbox, 'inbox')} placeholder={p} />
+            <ValueTableRow label="Owner" value="Mara Lopez" placeholder={p} />
+            <ValueTableRow label="Priority" value="High" placeholder={p} />
+            <ValueTableRow label="Updated" value="2 hours ago" placeholder={p} />
+          </ValueTable>
+        </section>
+        <Select name="recipe-inspector-status" value="review" label="Status" placeholder={p} choices={[
+          { value: 'review', label: 'In review' },
+          { value: 'ready', label: 'Ready' },
+          { value: 'done', label: 'Done' },
+        ]} />
+        <SegmentedControl id="recipe-inspector-view" label="Inspector view" value="details" appearance="toolbar" shape="pill" size="small" placeholder={p} choices={[
+          { value: 'details', label: 'Details', content: icon(List, 'list') },
+          { value: 'activity', label: 'Activity', content: icon(Columns3, 'columns-3') },
+          { value: 'files', label: 'Files', content: icon(FileText, 'file-text') },
+        ]} />
+        <section>
+          <ListItem action="recipe-action" itemId="reassign" label="Reassign ticket" icon={icon(Inbox, 'inbox')} placeholder={p} />
+          <ListItem action="recipe-action" itemId="watch" label="Watch for changes" placeholder={p} />
+        </section>
+        {p
+          ? <StateBanner tone="info" title="" detail="" icon={icon(FileText, 'file-text')} placeholder />
+          : <StateBanner tone="success" title="Up to date" detail="All checks passed on the latest revision." icon={icon(FileText, 'file-text')} />}
+        <p class="kui-recipe__ownership kui-content-item">Each value-bearing component's <code>placeholder</code> prop renders skeletons in its value slots while loading, so the recipe composes a faithful loading inspector from real chrome. The app owns the loading lifecycle and which values are still unknown.</p>
+      </div>
+    </section>;
+  };
+  return {
+    render,
+    action(command) {
+      if (command === 'toggle') {
+        loading.value = !loading.value;
+        announce(loading.value ? 'Inspector is loading' : 'Inspector loaded');
+      }
+    },
+  };
+};

package/ux-demo/recipes/navigation-sidebar.tsx

@@ -1,9 +1,9 @@
 import '@kerfjs/ui/layout.css';
 import './recipes.css';
 
+import { ListHeader } from '@kerfjs/ui/list-header';
+import { ListItem } from '@kerfjs/ui/list-item';
 import { LucideIcon } from '@kerfjs/ui/lucide-icon';
-import { MenuHeader } from '@kerfjs/ui/menu-header';
-import { MenuItem } from '@kerfjs/ui/menu-item';
 import { Toolbar } from '@kerfjs/ui/toolbar';
 import { ToolbarControlGroup } from '@kerfjs/ui/toolbar-control-group';
 import { signal } from 'kerfjs';
@@ -16,11 +16,11 @@ export const createRecipe: RecipeFactory = (announce) => {
   const expanded = signal(true);
   const render = () => <aside class="kui-recipe recipe-sidebar kui-recipe__surface kui-pane" data-recipe="recipe-navigation-sidebar">
     <div class="recipe-sidebar__body kui-pane__content kui-content">
-      <section><MenuHeader label="Workspace" count={3} countLabel="3 workspaces" action="recipe-action" actionLabel="Add workspace item" actionIcon={<LucideIcon icon={Plus} name="plus" />} /><MenuItem action="recipe-action" itemId="inbox" label="Inbox" icon={<LucideIcon icon={Inbox} name="inbox" />} trailing={<span>12</span>} selected={selected.value === 'inbox'} /><MenuItem action="recipe-action" itemId="shared" label="Shared with me" icon={<LucideIcon icon={Users} name="users" />} selected={selected.value === 'shared'} /><MenuItem action="recipe-action" itemId="drafts" label="Drafts without an icon" selected={selected.value === 'drafts'} /></section>
-      <section><MenuHeader label="Projects" toggle action="recipe-action" expanded={expanded.value} />{expanded.value && <><MenuItem action="recipe-action" itemId="design" label="Design system rollout across desktop and tablet" icon={<LucideIcon icon={Folder} name="folder" />} selected={selected.value === 'design'} multiline /><MenuItem action="recipe-action" itemId="archive" label="Archived" disabled title="Available to administrators" /><div class="kui-content-item"><strong>Quarterly goal</strong><p class="kui-recipe__muted">Ship accessible navigation patterns to every workspace.</p></div></>}</section>
+      <section><ListHeader label="Workspace" count={3} countLabel="3 workspaces" action="recipe-action" actionLabel="Add workspace item" actionIcon={<LucideIcon icon={Plus} name="plus" />} /><ListItem action="recipe-action" itemId="inbox" label="Inbox" icon={<LucideIcon icon={Inbox} name="inbox" />} trailing={<span>12</span>} selected={selected.value === 'inbox'} /><ListItem action="recipe-action" itemId="shared" label="Shared with me" icon={<LucideIcon icon={Users} name="users" />} selected={selected.value === 'shared'} /><ListItem action="recipe-action" itemId="drafts" label="Drafts without an icon" selected={selected.value === 'drafts'} /></section>
+      <section><ListHeader label="Projects" toggle action="recipe-action" expanded={expanded.value} />{expanded.value && <><ListItem action="recipe-action" itemId="design" label="Design system rollout across desktop and tablet" icon={<LucideIcon icon={Folder} name="folder" />} selected={selected.value === 'design'} multiline /><ListItem action="recipe-action" itemId="archive" label="Archived" disabled title="Available to administrators" /><div class="kui-content-item"><strong>Quarterly goal</strong><p class="kui-recipe__muted">Ship accessible navigation patterns to every workspace.</p></div></>}</section>
       <p class="kui-recipe__ownership kui-content-item">The recipe owns pane, content-item, and toolbar geometry. The app owns routes, permissions, labels, and disclosure state.</p>
     </div>
     <footer class="recipe-sidebar__footer kui-pane__footer"><Toolbar label="Sidebar actions" divider={false} leading={<ToolbarControlGroup appearance="borderless" single><button type="button" aria-label="Add project" data-action="recipe-action" data-recipe-command="add"><LucideIcon icon={Plus} name="plus" /></button></ToolbarControlGroup>} trailing={<ToolbarControlGroup appearance="borderless" single><button type="button" aria-label="Workspace settings" data-action="recipe-action" data-recipe-command="settings"><LucideIcon icon={Settings} name="settings" /></button></ToolbarControlGroup>} /></footer>
   </aside>;
-  return { render, action(command, element) { if (element.matches('.kui-menu-header__toggle')) { expanded.value = !expanded.value; announce(expanded.value ? 'Projects expanded' : 'Projects collapsed'); return; } const id = element.dataset.itemId; if (id) selected.value = id; announce(id ? `Selected ${id}` : `${command} requested`); } };
+  return { render, action(command, element) { if (element.matches('.kui-list-header__toggle')) { expanded.value = !expanded.value; announce(expanded.value ? 'Projects expanded' : 'Projects collapsed'); return; } const id = element.dataset.itemId; if (id) selected.value = id; announce(id ? `Selected ${id}` : `${command} requested`); } };
 };

package/ux-demo/recipes/navigation-stack.tsx

@@ -3,9 +3,9 @@ import '@kerfjs/ui/nav-stack.css';
 import '@kerfjs/ui/toolbar-text.css';
 import './recipes.css';
 
+import { ListHeader } from '@kerfjs/ui/list-header';
+import { ListItem } from '@kerfjs/ui/list-item';
 import { LucideIcon } from '@kerfjs/ui/lucide-icon';
-import { MenuHeader } from '@kerfjs/ui/menu-header';
-import { MenuItem } from '@kerfjs/ui/menu-item';
 import { NavStack, type NavStackView } from '@kerfjs/ui/nav-stack';
 import { signal } from 'kerfjs';
 import { ChevronRight, FileText, Folder } from 'lucide';
@@ -30,8 +30,8 @@ export const createRecipe: RecipeFactory = (announce) => {
     title: 'Library',
     content: <div class="recipe-navstack__view kui-pane__content kui-content">
       <section>
-        <MenuHeader label="Components" />
-        {ITEMS.map((item) => <MenuItem action="recipe-action" itemId={item.id} label={item.label} icon={<LucideIcon icon={Folder} name="folder" />} trailing={<LucideIcon icon={ChevronRight} name="chevron-right" />} />)}
+        <ListHeader label="Components" />
+        {ITEMS.map((item) => <ListItem action="recipe-action" itemId={item.id} label={item.label} icon={<LucideIcon icon={Folder} name="folder" />} trailing={<LucideIcon icon={ChevronRight} name="chevron-right" />} />)}
       </section>
       <p class="kui-recipe__ownership kui-content-item">The recipe owns the stack as a signal of views and pushes/pops it; `NavStack` renders the stack and `wireNavStack` slides the content and settles the chrome. The app owns selection, data, and routing.</p>
     </div>,

package/ux-demo/recipes/recipes.css

@@ -114,23 +114,25 @@
   margin: 0;
 }
 
-.recipe-master-detail {
+.recipe-list-detail {
   display: grid;
   width: 100%;
   min-height: 25rem;
   grid-template-columns: minmax(13rem, 0.8fr) minmax(18rem, 1.4fr);
 }
-.recipe-master-detail__master {
+.recipe-list-detail__list {
   border-inline-end: 1px solid var(--kui-color-border);
 }
-.recipe-master-detail__detail {
+.recipe-list-detail__detail {
   min-width: 0;
+}
+.recipe-list-detail__body {
   padding-block: var(--kui-layout-item-gap);
 }
-.recipe-master-detail__title {
+.recipe-list-detail__title {
   margin-inline: var(--kui-layout-inline-margin, remify(8px));
 }
-.recipe-master-detail__actions {
+.recipe-list-detail__actions {
   margin-inline: var(--kui-layout-inline-margin, remify(8px));
 }
 .recipe-dialog {
@@ -256,10 +258,10 @@
   .recipe-compact-toolbar__guide {
     grid-template-columns: 1fr 1fr;
   }
-  .recipe-master-detail {
+  .recipe-list-detail {
     grid-template-columns: 1fr;
   }
-  .recipe-master-detail__master {
+  .recipe-list-detail__list {
     border-inline-end: 0;
     border-block-end: 1px solid var(--kui-color-border);
   }
@@ -353,3 +355,7 @@
      little block breathing room, not an inline pad that would double-inset them. */
   padding-block: var(--kui-space-2xs);
 }
+
+.recipe-inspector {
+  width: min(remify(560px), 100%);
+}

package/dist/browser/menu-action-row.js

@@ -1,4 +0,0 @@
-import '../styles/foundation.css';
-import '../styles/skeleton.css';
-import '../styles/menu-action-row.css';
-export * from '../menu-action-row.js';

package/dist/menu-action-row.js

@@ -1,5 +0,0 @@
-export { MenuActionRow } from './chunk-3YD6ZNRA.js';
-
-
-
-//# sourceMappingURL=menu-action-row.js.map

package/dist/menu-action-row.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"menu-action-row.js"}

package/dist/menu-header.js

@@ -1,7 +0,0 @@
-export { MenuHeader } from './chunk-H6URQGJI.js';
-
-
-
-
-
-//# sourceMappingURL=menu-header.js.map

package/dist/menu-header.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"menu-header.js"}

package/dist/menu-item.js

@@ -1,5 +0,0 @@
-export { MenuItem } from './chunk-YKUUZPED.js';
-
-
-
-//# sourceMappingURL=menu-item.js.map

package/dist/menu-item.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"menu-item.js"}

package/dist/styles/menu-action-row.css

@@ -1,160 +0,0 @@
-.kui-menu-action-row {
-  --kui-menu-action-row-color: var(--kui-color-neutral-on-normal);
-  --kui-menu-action-row-border: transparent;
-  --kui-menu-action-row-background: transparent;
-  --kui-menu-action-row-hover-border: var(--kui-color-neutral-border-normal);
-  --kui-menu-action-row-hover-background: var(--kui-color-neutral-fill-quiet);
-  --kui-menu-action-row-selected-color: var(--kui-color-brand-on-quiet);
-  --kui-menu-action-row-selected-border: var(--kui-color-brand-border-quiet);
-  --kui-menu-action-row-selected-background: var(--kui-color-brand-fill-normal);
-  --kui-menu-action-row-trailing-hover-background: var(
-    --kui-color-neutral-fill-normal
-  );
-  display: flex;
-  width: calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem)));
-  min-height: 2.75rem;
-  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
-  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
-  color: var(--kui-menu-action-row-color);
-  background: var(--kui-menu-action-row-background);
-  box-shadow: inset 0 0 0 1px var(--kui-menu-action-row-border);
-  align-items: stretch;
-}
-
-.kui-menu-action-row:has(.kui-menu-action-row__primary:hover) {
-  --kui-menu-action-row-border: var(--kui-menu-action-row-hover-border);
-  --kui-menu-action-row-background: var(--kui-menu-action-row-hover-background);
-}
-
-.kui-menu-action-row[data-selected="true"],
-.kui-menu-action-row[data-pressed="true"] {
-  --kui-menu-action-row-border: var(--kui-menu-action-row-selected-border);
-  --kui-menu-action-row-background: var(
-    --kui-menu-action-row-selected-background
-  );
-  color: var(--kui-menu-action-row-selected-color);
-  font-weight: 650;
-}
-
-.kui-menu-action-row:has(.kui-menu-action-row__primary:focus-visible) {
-  outline: var(--kui-focus-ring);
-  outline-offset: 1px;
-}
-
-.kui-menu-action-row__primary,
-.kui-menu-action-row__trailing-action {
-  height: auto !important;
-  min-height: 2.75rem;
-  padding: 0;
-  border: 0;
-  appearance: none;
-  color: inherit;
-  background: transparent;
-  cursor: pointer;
-  font: inherit;
-}
-
-.kui-menu-action-row__primary {
-  position: relative;
-  display: block;
-  flex: 1 1 auto;
-  min-width: 2.75rem;
-  padding: var(--kui-layout-item-padding, 0.5rem);
-  padding-inline-start: calc(1px + var(--kui-layout-item-padding, 0.5rem));
-  text-align: start;
-}
-
-.kui-menu-action-row__primary:focus-visible {
-  outline: none;
-}
-
-.kui-menu-action-row__primary:disabled,
-.kui-menu-action-row__trailing-action:disabled {
-  cursor: not-allowed;
-  opacity: 0.58;
-}
-
-.kui-menu-action-row__icon {
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: calc(1px + var(--kui-layout-item-padding, 0.5rem));
-  display: grid;
-  width: 1.5rem;
-  height: 1.5rem;
-  color: currentColor;
-  transform: translateY(-50%);
-  place-items: center;
-}
-
-.kui-menu-action-row__icon svg {
-  display: block;
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.kui-menu-action-row__label {
-  display: grid;
-  min-width: 0;
-  min-height: calc(
-    2.75rem - (2 * var(--kui-layout-item-padding, 0.5rem))
-  );
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  align-items: center;
-}
-
-.kui-menu-action-row[data-has-icon="true"] .kui-menu-action-row__label {
-  margin-inline-start: calc(
-    1.5rem + var(--kui-layout-item-gap, 0.5rem)
-  );
-}
-
-.kui-menu-action-row[data-multiline="true"] .kui-menu-action-row__label {
-  display: block;
-  overflow: visible;
-  overflow-wrap: anywhere;
-  white-space: normal;
-}
-
-.kui-menu-action-row[data-multiline="true"] .kui-menu-action-row__icon {
-  inset-block-start: calc(
-    var(--kui-layout-item-padding, 0.5rem) + (1lh / 2)
-  );
-}
-
-.kui-menu-action-row__trailing-action {
-  display: grid;
-  width: 2.75rem;
-  min-width: 2.75rem;
-  border-radius: var(--kui-radius-pill);
-  place-items: center;
-}
-
-.kui-menu-action-row__trailing-action:hover:not(:disabled) {
-  background: var(--kui-menu-action-row-trailing-hover-background);
-}
-
-.kui-menu-action-row__trailing-action:focus-visible {
-  outline: var(--kui-focus-ring);
-  outline-offset: -2px;
-}
-
-.kui-menu-action-row__trailing-action > svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-@media (forced-colors: active) {
-  .kui-menu-action-row {
-    --kui-menu-action-row-border: ButtonText;
-    outline: 1px solid ButtonText;
-    outline-offset: -1px;
-  }
-
-  .kui-menu-action-row[data-selected="true"],
-  .kui-menu-action-row[data-pressed="true"] {
-    --kui-menu-action-row-selected-color: HighlightText;
-    --kui-menu-action-row-selected-background: Highlight;
-  }
-}