@kerfjs/ui 5.0.0-beta.3 → 5.0.0-beta.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.3",
+  "version": "5.0.0-beta.31",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",
@@ -27,6 +27,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "bin": {
+    "kerf-ui-analyze": "./analyzer/cli.mjs",
+    "kerf-ui-doctor": "./doctor/cli.mjs",
+    "kerf-ui-evaluate": "./evaluator/cli.mjs"
+  },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "sideEffects": [
@@ -39,6 +44,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./css-values": {
+      "types": "./dist/css-values.d.ts",
+      "import": "./dist/css-values.js"
+    },
     "./lucide-icon": {
       "types": "./dist/lucide-icon.d.ts",
       "browser": "./dist/browser/lucide-icon.js",
@@ -59,25 +68,50 @@
       "browser": "./dist/browser/toolbar-control-group.js",
       "import": "./dist/toolbar-control-group.js"
     },
+    "./surface-scaffold": {
+      "types": "./dist/surface-scaffold.d.ts",
+      "browser": "./dist/browser/surface-scaffold.js",
+      "import": "./dist/surface-scaffold.js"
+    },
+    "./floating-toolbar": {
+      "types": "./dist/floating-toolbar.d.ts",
+      "browser": "./dist/browser/floating-toolbar.js",
+      "import": "./dist/floating-toolbar.js"
+    },
     "./toolbar-text": {
       "types": "./dist/toolbar-text.d.ts",
       "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": {
+      "types": "./dist/list.d.ts",
+      "browser": "./dist/browser/list.js",
+      "import": "./dist/list.js"
     },
-    "./menu-item": {
-      "types": "./dist/menu-item.d.ts",
-      "browser": "./dist/browser/menu-item.js",
-      "import": "./dist/menu-item.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-header": {
-      "types": "./dist/menu-header.d.ts",
-      "browser": "./dist/browser/menu-header.js",
-      "import": "./dist/menu-header.js"
+    "./list-item": {
+      "types": "./dist/list-item.d.ts",
+      "browser": "./dist/browser/list-item.js",
+      "import": "./dist/list-item.js"
+    },
+    "./list-header": {
+      "types": "./dist/list-header.d.ts",
+      "browser": "./dist/browser/list-header.js",
+      "import": "./dist/list-header.js"
+    },
+    "./list-inset-control": {
+      "types": "./dist/list-inset-control.d.ts",
+      "browser": "./dist/browser/list-inset-control.js",
+      "import": "./dist/list-inset-control.js"
+    },
+    "./list-inset-text": {
+      "types": "./dist/list-inset-text.d.ts",
+      "browser": "./dist/browser/list-inset-text.js",
+      "import": "./dist/list-inset-text.js"
     },
     "./resizable-region": {
       "types": "./dist/resizable-region.d.ts",
@@ -88,11 +122,43 @@
       "types": "./dist/wire-resizable-regions.d.ts",
       "import": "./dist/wire-resizable-regions.js"
     },
+    "./device-class": {
+      "types": "./dist/device-class.d.ts",
+      "import": "./dist/device-class.js"
+    },
     "./app-tab": {
       "types": "./dist/app-tab.d.ts",
       "browser": "./dist/browser/app-tab.js",
       "import": "./dist/app-tab.js"
     },
+    "./catalog": {
+      "types": "./dist/catalog.d.ts",
+      "import": "./dist/catalog.js"
+    },
+    "./catalog-resources": {
+      "types": "./dist/catalog-resources.d.ts",
+      "import": "./dist/catalog-resources.js"
+    },
+    "./analyzer": {
+      "types": "./analyzer/index.d.mts",
+      "import": "./analyzer/index.mjs"
+    },
+    "./analyzer/report.schema.json": "./analyzer/report.schema.json",
+    "./doctor": {
+      "types": "./doctor/index.d.mts",
+      "import": "./doctor/index.mjs"
+    },
+    "./doctor/config.schema.json": "./doctor/config.schema.json",
+    "./doctor/report.schema.json": "./doctor/report.schema.json",
+    "./evaluator": {
+      "types": "./evaluator/index.d.mts",
+      "import": "./evaluator/index.mjs"
+    },
+    "./evaluator/report.schema.json": "./evaluator/report.schema.json",
+    "./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",
@@ -102,10 +168,42 @@
       "types": "./dist/wire-tab-bars.d.ts",
       "import": "./dist/wire-tab-bars.js"
     },
-    "./page-header": {
-      "types": "./dist/page-header.d.ts",
-      "browser": "./dist/browser/page-header.js",
-      "import": "./dist/page-header.js"
+    "./nav-stack": {
+      "types": "./dist/nav-stack.d.ts",
+      "import": "./dist/nav-stack.js"
+    },
+    "./wire-nav-stack": {
+      "types": "./dist/wire-nav-stack.d.ts",
+      "import": "./dist/wire-nav-stack.js"
+    },
+    "./split-view": {
+      "types": "./dist/split-view.d.ts",
+      "import": "./dist/split-view.js"
+    },
+    "./pane": {
+      "types": "./dist/pane.d.ts",
+      "browser": "./dist/browser/pane.js",
+      "import": "./dist/pane.js"
+    },
+    "./workbench": {
+      "types": "./dist/workbench.d.ts",
+      "import": "./dist/workbench.js"
+    },
+    "./collapsible-panel": {
+      "types": "./dist/collapsible-panel.d.ts",
+      "import": "./dist/collapsible-panel.js"
+    },
+    "./wire-sidebar": {
+      "types": "./dist/wire-sidebar.d.ts",
+      "import": "./dist/wire-sidebar.js"
+    },
+    "./tab-scaffold": {
+      "types": "./dist/tab-scaffold.d.ts",
+      "import": "./dist/tab-scaffold.js"
+    },
+    "./wire-tab-scaffold": {
+      "types": "./dist/wire-tab-scaffold.d.ts",
+      "import": "./dist/wire-tab-scaffold.js"
     },
     "./loading-spinner": {
       "types": "./dist/loading-spinner.d.ts",
@@ -117,6 +215,16 @@
       "browser": "./dist/browser/select.js",
       "import": "./dist/select.js"
     },
+    "./skeleton": {
+      "types": "./dist/skeleton.d.ts",
+      "browser": "./dist/browser/skeleton.js",
+      "import": "./dist/skeleton.js"
+    },
+    "./sunken-panel": {
+      "types": "./dist/sunken-panel.d.ts",
+      "browser": "./dist/browser/sunken-panel.js",
+      "import": "./dist/sunken-panel.js"
+    },
     "./segmented-control": {
       "types": "./dist/segmented-control.d.ts",
       "browser": "./dist/browser/segmented-control.js",
@@ -149,11 +257,6 @@
       "browser": "./dist/browser/empty-state.js",
       "import": "./dist/empty-state.js"
     },
-    "./dialog-header": {
-      "types": "./dist/dialog-header.d.ts",
-      "browser": "./dist/browser/dialog-header.js",
-      "import": "./dist/dialog-header.js"
-    },
     "./value-table": {
       "types": "./dist/value-table.d.ts",
       "browser": "./dist/browser/value-table.js",
@@ -171,21 +274,33 @@
     "./disclosure-arrow.css": "./dist/styles/disclosure-arrow.css",
     "./toolbar.css": "./dist/styles/toolbar.css",
     "./toolbar-control-group.css": "./dist/styles/toolbar-control-group.css",
+    "./surface-scaffold.css": "./dist/styles/surface-scaffold.css",
+    "./floating-toolbar.css": "./dist/styles/floating-toolbar.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.css": "./dist/styles/list.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",
+    "./list-inset-control.css": "./dist/styles/list-inset-control.css",
+    "./list-inset-text.css": "./dist/styles/list-inset-text.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",
-    "./page-header.css": "./dist/styles/page-header.css",
+    "./nav-stack.css": "./dist/styles/nav-stack.css",
+    "./split-view.css": "./dist/styles/split-view.css",
+    "./pane.css": "./dist/styles/pane.css",
+    "./workbench.css": "./dist/styles/workbench.css",
+    "./collapsible-panel.css": "./dist/styles/collapsible-panel.css",
+    "./tab-scaffold.css": "./dist/styles/tab-scaffold.css",
     "./loading-spinner.css": "./dist/styles/loading-spinner.css",
     "./select.css": "./dist/styles/select.css",
+    "./skeleton.css": "./dist/styles/skeleton.css",
+    "./sunken-panel.css": "./dist/styles/sunken-panel.css",
     "./segmented-control.css": "./dist/styles/segmented-control.css",
     "./token-search-field.css": "./dist/styles/token-search-field.css",
     "./state-banner.css": "./dist/styles/state-banner.css",
     "./empty-state.css": "./dist/styles/empty-state.css",
-    "./dialog-header.css": "./dist/styles/dialog-header.css",
     "./value-table.css": "./dist/styles/value-table.css",
     "./ai/*": "./ai/*",
     "./docs/*": "./docs/*"
@@ -193,6 +308,10 @@
   "files": [
     "dist",
     "ai",
+    "analyzer",
+    "doctor",
+    "evaluator",
+    "traversal-exclusions.mjs",
     "docs",
     "ux-demo/recipes",
     "llms.txt",
@@ -204,39 +323,62 @@
     "dev": "npm run build && vite --config ux-demo/vite.config.ts",
     "demo:build": "npm run build && vite build --config ux-demo/vite.config.ts && node scripts/check-demo-bundle.mjs",
     "demo:serve": "vite preview --config ux-demo/vite.config.ts",
+    "format": "prettier --write . --ignore-unknown",
     "format:css": "prettier --write \"src/**/*.css\" \"ux-demo/**/*.css\"",
-    "check:format": "prettier --check \"src/**/*.css\" \"ux-demo/**/*.css\"",
-    "catalog:sync": "node scripts/sync-component-catalog.mjs",
-    "check:catalog": "node scripts/sync-component-catalog.mjs --check && node scripts/check-component-catalog.mjs",
+    "check:format": "prettier --check . --ignore-unknown",
+    "catalog:sync": "node scripts/sync-component-catalog.mjs && node scripts/sync-component-catalog-v2.mjs",
+    "catalog:v2:sync": "node scripts/sync-component-catalog-v2.mjs",
+    "check:catalog": "node scripts/sync-component-catalog.mjs --check && node scripts/sync-component-catalog-v2.mjs --check && node scripts/check-component-catalog.mjs",
+    "check:profile": "node scripts/check-application-ui-profile.mjs",
+    "check:demo-conformance": "node scripts/check-catalog-demo-conformance.mjs",
     "check:recipes": "node scripts/check-recipes.mjs",
-    "check:ai-regressions": "node scripts/check-ai-regressions.mjs && node scripts/audit-ai-regression-results.mjs",
+    "check:ai-regressions": "node scripts/check-ai-regressions.mjs && node scripts/audit-ai-regression-results.mjs && node scripts/audit-ai-regression-results-v3.mjs",
     "check:ai-signatures": "node scripts/sync-ai-public-signatures.mjs --check",
     "ai:signatures:sync": "npm run build && node scripts/sync-ai-public-signatures.mjs",
     "ai:regressions:compile": "node scripts/compile-ai-regression-response.mjs",
     "ai:regressions:prepare": "node scripts/prepare-ai-regression.mjs",
     "ai:regressions:record": "node scripts/record-ai-regression-run.mjs",
+    "ai:regressions:record-v3": "node scripts/record-ai-regression-run-v3.mjs",
+    "ai:regressions:replay-v3": "node scripts/replay-ai-regression-run-v3.mjs",
     "ai:regressions:score": "node scripts/score-ai-regression.mjs",
     "check:guidance": "node scripts/check-decision-guidance.mjs",
-    "lint": "eslint src tests ux-demo docs/examples --max-warnings 0",
+    "lint:eslint": "eslint src tests ux-demo docs/examples --max-warnings 0",
+    "lint": "npm run lint:eslint && npm run check:format",
     "typecheck": "node node_modules/typescript7/bin/tsc --noEmit",
-    "test": "npm run test:unit && npm run test:bundle",
+    "test": "npm run test:unit && npm run test:bundle && npm run test:analyzer && npm run test:doctor && npm run test:evaluator",
     "test:unit": "vitest run tests/unit --coverage",
     "test:bundle": "npm run build && vitest run tests/bundle",
-    "test:consumer-types": "npm run build && node node_modules/typescript7/bin/tsc -p tests/consumer-types/webawesome/tsconfig.json",
+    "test:analyzer": "vitest run tests/integration/ui-analyzer-downstream.test.ts",
+    "test:doctor": "vitest run tests/unit/ui-doctor.test.ts tests/integration/ui-doctor-downstream.test.ts",
+    "test:evaluator": "vitest run tests/unit/ui-evaluator.test.ts tests/integration/ui-evaluator-downstream.test.ts",
+    "test:contract-types:source": "node node_modules/typescript7/bin/tsc -p tests/consumer-types/contracts/tsconfig.source.json",
+    "test:contract-types:packed": "node scripts/check-packed-type-contracts.mjs",
+    "test:consumer-types": "npm run test:contract-types:source && npm run build && node node_modules/typescript7/bin/tsc -p tests/consumer-types/webawesome/tsconfig.json && npm run test:contract-types:packed",
     "test:e2e": "npm run demo:build && playwright test",
-    "check": "npm run check:format && npm run check:catalog && npm run check:recipes && npm run check:guidance && npm run check:ai-regressions && npm run lint && npm run typecheck && npm test && npm run test:consumer-types && npm run check:ai-signatures && npm run demo:build && npm pack --dry-run",
-    "prepublishOnly": "npm run check"
+    "check": "npm run check:catalog && npm run check:profile && npm run check:demo-conformance && npm run check:recipes && npm run check:guidance && npm run check:ai-regressions && npm run lint && npm run typecheck && npm test && npm run test:consumer-types && npm run check:ai-signatures && npm run demo:build && npm run check:design-templates && npm pack --dry-run",
+    "prepublishOnly": "npm run check",
+    "check:design-templates": "node scripts/check-design-templates.mjs",
+    "check:design-templates:drift": "node scripts/check-design-templates-drift.mjs",
+    "design-templates:build": "node scripts/build-design-templates.mjs"
   },
   "peerDependencies": {
     "@awesome.me/webawesome": "^3.12.0",
     "kerfjs": "^5.0.0-0",
-    "lucide": "^1.43.0"
+    "lucide": "^1.43.0",
+    "playwright": "^1.63.0"
   },
   "peerDependenciesMeta": {
     "@awesome.me/webawesome": {
       "optional": true
+    },
+    "playwright": {
+      "optional": true
     }
   },
+  "dependencies": {
+    "postcss": "^8.5.28",
+    "typescript": "^6.0.3"
+  },
   "devDependencies": {
     "@awesome.me/webawesome": "3.12.0",
     "@eslint/js": "^10.0.1",
@@ -245,6 +387,7 @@
     "@typescript-eslint/eslint-plugin": "^8.65.0",
     "@typescript-eslint/parser": "^8.65.0",
     "@vitest/coverage-v8": "4.1.11",
+    "domotion-svg": "^0.30.1",
     "esbuild": "^0.25.0",
     "eslint": "^10.8.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",

package/traversal-exclusions.mjs

@@ -0,0 +1,27 @@
+import { relative, sep } from 'node:path';
+
+export const UI_TRAVERSAL_IGNORED_DIRECTORY_NAMES = Object.freeze([
+  '.git',
+  '.kerf-cache',
+  'coverage',
+  'dist',
+  'kerf-ui-evidence',
+  'node_modules',
+]);
+const ignoredDirectoryNames = new Set(UI_TRAVERSAL_IGNORED_DIRECTORY_NAMES);
+
+export const UI_TRAVERSAL_ESLINT_IGNORES = Object.freeze([
+  ...UI_TRAVERSAL_IGNORED_DIRECTORY_NAMES.map((name) => `**/${name}/**`),
+  '**/.claude/worktrees/**',
+]);
+
+export function isUiTraversalExcluded(root, candidate) {
+  const segments = relative(root, candidate).split(sep);
+  return (
+    segments.some((segment) => ignoredDirectoryNames.has(segment)) ||
+    segments.some(
+      (segment, index) =>
+        segment === '.claude' && segments[index + 1] === 'worktrees',
+    )
+  );
+}

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

@@ -1,10 +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 { PageHeader } from '@kerfjs/ui/page-header';
 import { ResizableRegion } from '@kerfjs/ui/resizable-region';
 import { Toolbar } from '@kerfjs/ui/toolbar';
 import { ToolbarControlGroup } from '@kerfjs/ui/toolbar-control-group';
@@ -19,14 +18,224 @@ export const createRecipe: RecipeFactory = (announce) => {
   const selected = signal('inbox');
   const navigationSize = signal(224);
   const inspectorSize = signal(240);
-  const responsivePane = signal<'content' | 'navigation' | 'inspector'>('content');
-  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>
-      <main id="recipe-shell-content" class="recipe-shell__main kui-pane"><PageHeader title={selected.value === 'inbox' ? 'Inbox triage' : 'Active projects'} action={<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"><PageHeader title="Inspector" /><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>
-  </section>;
-  return { render, action(command, element) { const pane = command.match(/^show-(navigation|content|inspector)$/)?.[1] as typeof responsivePane.value | undefined; if (pane) responsivePane.value = pane; const id = element.dataset.itemId; if (id) selected.value = id; announce(id ? `Opened ${id}` : pane ? `Showing ${pane}` : command === 'new' ? 'New task requested' : `${command} requested`); }, resize(id, size) { if (id === 'recipe-navigation') navigationSize.value = size; if (id === 'recipe-inspector') inspectorSize.value = size; announce(`${id} resized to ${size}px`); } };
+  const responsivePane = signal<'content' | 'navigation' | 'inspector'>(
+    'content',
+  );
+  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={<ToolbarText text="Atlas" />}
+        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">
+              <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">
+          <Toolbar
+            label="Current workspace view"
+            dividerSides=""
+            leading={
+              <ToolbarText
+                text={
+                  selected.value === 'inbox'
+                    ? 'Inbox triage'
+                    : 'Active projects'
+                }
+                size="xlarge"
+                id="recipe-shell-main-title"
+              />
+            }
+            trailing={
+              <ToolbarControlGroup appearance="borderless" single>
+                <button
+                  class="kui-recipe__button"
+                  data-primary="true"
+                  type="button"
+                  data-action="recipe-action"
+                  data-recipe-command="new"
+                >
+                  New task
+                </button>
+              </ToolbarControlGroup>
+            }
+          />
+          <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">
+              <Toolbar
+                label="Inspector"
+                dividerSides=""
+                leading={
+                  <ToolbarText
+                    text="Inspector"
+                    size="xlarge"
+                    id="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>
+    </section>
+  );
+  return {
+    render,
+    action(command, element) {
+      const pane = command.match(
+        /^show-(navigation|content|inspector)$/,
+      )?.[1] as typeof responsivePane.value | undefined;
+      if (pane) responsivePane.value = pane;
+      const id = element.dataset.itemId;
+      if (id) selected.value = id;
+      announce(
+        id
+          ? `Opened ${id}`
+          : pane
+            ? `Showing ${pane}`
+            : command === 'new'
+              ? 'New task requested'
+              : `${command} requested`,
+      );
+    },
+    resize(id, size) {
+      if (id === 'recipe-navigation') navigationSize.value = size;
+      if (id === 'recipe-inspector') inspectorSize.value = size;
+      announce(`${id} resized to ${size}px`);
+    },
+  };
 };