@kerfjs/ui 4.4.1 → 4.5.0-beta.1

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@kerfjs/ui",
-  "version": "4.4.1",
+  "version": "4.5.0-beta.1",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",
   "author": "Brian Westphal <brian.westphal@bleugris.com>",
-  "homepage": "https://brianwestphal.github.io/kerf/docs/ui-package/",
+  "homepage": "https://brianwestphal.github.io/kerf/docs/component-packages/",
   "repository": {
     "type": "git",
     "url": "https://github.com/brianwestphal/kerf",
@@ -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": [
@@ -44,6 +49,11 @@
       "browser": "./dist/browser/lucide-icon.js",
       "import": "./dist/lucide-icon.js"
     },
+    "./disclosure-arrow": {
+      "types": "./dist/disclosure-arrow.d.ts",
+      "browser": "./dist/browser/disclosure-arrow.js",
+      "import": "./dist/disclosure-arrow.js"
+    },
     "./toolbar": {
       "types": "./dist/toolbar.d.ts",
       "browser": "./dist/browser/toolbar.js",
@@ -54,20 +64,45 @@
       "browser": "./dist/browser/toolbar-control-group.js",
       "import": "./dist/toolbar-control-group.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-item": {
-      "types": "./dist/menu-item.d.ts",
-      "browser": "./dist/browser/menu-item.js",
-      "import": "./dist/menu-item.js"
+    "./list": {
+      "types": "./dist/list.d.ts",
+      "browser": "./dist/browser/list.js",
+      "import": "./dist/list.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",
@@ -78,11 +113,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",
@@ -92,10 +159,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",
@@ -107,15 +206,38 @@
       "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",
       "import": "./dist/segmented-control.js"
     },
+    "./token-search-field": {
+      "types": "./dist/token-search-field.d.ts",
+      "browser": "./dist/browser/token-search-field.js",
+      "import": "./dist/token-search-field.js"
+    },
+    "./wire-token-search-fields": {
+      "types": "./dist/wire-token-search-fields.d.ts",
+      "import": "./dist/wire-token-search-fields.js"
+    },
     "./select/register": {
       "types": "./dist/select-register.d.ts",
       "import": "./dist/select-register.js"
     },
+    "./webawesome": {
+      "types": "./dist/webawesome.d.ts",
+      "import": "./dist/webawesome.js"
+    },
     "./state-banner": {
       "types": "./dist/state-banner.d.ts",
       "browser": "./dist/browser/state-banner.js",
@@ -126,10 +248,10 @@
       "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"
+    "./panel-header": {
+      "types": "./dist/panel-header.d.ts",
+      "browser": "./dist/browser/panel-header.js",
+      "import": "./dist/panel-header.js"
     },
     "./value-table": {
       "types": "./dist/value-table.d.ts",
@@ -140,62 +262,119 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./foundation.css": "./src/foundation.css",
-    "./webawesome.css": "./src/webawesome.css",
-    "./styles.css": "./src/styles.css",
-    "./lucide-icon.css": "./src/lucide-icon.css",
-    "./toolbar.css": "./src/toolbar.css",
-    "./toolbar-control-group.css": "./src/toolbar-control-group.css",
-    "./toolbar-text.css": "./src/toolbar-text.css",
-    "./menu-item.css": "./src/menu-item.css",
-    "./menu-header.css": "./src/menu-header.css",
-    "./resizable-region.css": "./src/resizable-region.css",
-    "./app-tab.css": "./src/app-tab.css",
-    "./tab-bar.css": "./src/tab-bar.css",
-    "./page-header.css": "./src/page-header.css",
-    "./loading-spinner.css": "./src/loading-spinner.css",
-    "./select.css": "./src/select.css",
-    "./segmented-control.css": "./src/segmented-control.css",
-    "./state-banner.css": "./src/state-banner.css",
-    "./empty-state.css": "./src/empty-state.css",
-    "./dialog-header.css": "./src/dialog-header.css",
-    "./value-table.css": "./src/value-table.css",
+    "./foundation.css": "./dist/styles/foundation.css",
+    "./layout.css": "./dist/styles/layout.css",
+    "./webawesome.css": "./dist/styles/webawesome.css",
+    "./styles.css": "./dist/styles/styles.css",
+    "./lucide-icon.css": "./dist/styles/lucide-icon.css",
+    "./disclosure-arrow.css": "./dist/styles/disclosure-arrow.css",
+    "./toolbar.css": "./dist/styles/toolbar.css",
+    "./toolbar-control-group.css": "./dist/styles/toolbar-control-group.css",
+    "./floating-toolbar.css": "./dist/styles/floating-toolbar.css",
+    "./toolbar-text.css": "./dist/styles/toolbar-text.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",
+    "./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",
+    "./panel-header.css": "./dist/styles/panel-header.css",
+    "./value-table.css": "./dist/styles/value-table.css",
     "./ai/*": "./ai/*",
     "./docs/*": "./docs/*"
   },
   "files": [
     "dist",
-    "src/*.css",
     "ai",
+    "analyzer",
+    "doctor",
+    "evaluator",
+    "traversal-exclusions.mjs",
     "docs",
+    "ux-demo/recipes",
     "llms.txt",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
-    "build": "tsup && node ../scripts/clean-dist-output.mjs dist && node scripts/build-browser-entries.mjs",
+    "build": "tsup && node ../scripts/clean-dist-output.mjs dist && node scripts/build-css.mjs && node scripts/build-browser-entries.mjs",
     "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",
-    "lint": "eslint src tests ux-demo --max-warnings 0",
+    "format": "prettier --write . --ignore-unknown",
+    "format:css": "prettier --write \"src/**/*.css\" \"ux-demo/**/*.css\"",
+    "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 && 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": "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: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 lint && npm run typecheck && npm test && 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": "^4.0.0",
-    "lucide": "^1.43.0"
+    "kerfjs": "^4.0.0-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",
@@ -204,11 +383,14 @@
     "@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",
     "happy-dom": "^20.9.0",
     "lucide": "1.43.0",
+    "postcss": "^8.5.28",
+    "prettier": "^3.9.6",
     "tsup": "^8.3.0",
     "typescript": "^6.0.3",
     "typescript7": "npm:typescript@^7.0.2",

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

@@ -0,0 +1,228 @@
+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 { PanelHeader } from '@kerfjs/ui/panel-header';
+import { ResizableRegion } from '@kerfjs/ui/resizable-region';
+import { Toolbar } from '@kerfjs/ui/toolbar';
+import { ToolbarControlGroup } from '@kerfjs/ui/toolbar-control-group';
+import { ToolbarText } from '@kerfjs/ui/toolbar-text';
+import { ValueTable, ValueTableRow } from '@kerfjs/ui/value-table';
+import { signal } from 'kerfjs';
+import { Bell, Folder, Inbox, Settings } from 'lucide';
+
+import type { RecipeFactory } from './types.js';
+
+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">
+              <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>
+    </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`);
+    },
+  };
+};