@kerfjs/ui 5.0.0-beta.17 → 5.0.0-beta.18

package/docs/nav-stack.md

@@ -8,9 +8,9 @@ a `NavStack` with one entry**. It is one of the opt-in app layouts (see
 Import the component and its companion stylesheet:
 
 ```ts
-import { NavStack, type NavStackView } from '@kerfjs/ui/nav-stack';
-import { wireNavStack } from '@kerfjs/ui/wire-nav-stack';
-import '@kerfjs/ui/nav-stack.css';
+import { NavStack, type NavStackView } from "@kerfjs/ui/nav-stack";
+import { wireNavStack } from "@kerfjs/ui/wire-nav-stack";
+import "@kerfjs/ui/nav-stack.css";
 ```
 
 ## State lives in the app
@@ -20,16 +20,25 @@ stack as a `signal<NavStackView[]>`, `NavStack({ views })` renders it, and
 `wireNavStack` animates the transitions.
 
 ```tsx
-const views = signal<NavStackView[]>([{ key: 'inbox', title: 'Inbox', content: <InboxView /> }]);
+const views = signal<NavStackView[]>([
+  { key: "inbox", title: "Inbox", content: <InboxView /> },
+]);
 
 // render inside mount():
 <NavStack id="mail" label="Mail" views={views.value} />;
 
 // once, after first render:
-const dispose = wireNavStack(root, { onBack: () => { views.value = views.value.slice(0, -1); } });
+const dispose = wireNavStack(root, {
+  onBack: () => {
+    views.value = views.value.slice(0, -1);
+  },
+});
 
 // push / pop by editing the signal:
-views.value = [...views.value, { key: id, title: 'Message', content: <MessageView id={id} /> }];
+views.value = [
+  ...views.value,
+  { key: id, title: "Message", content: <MessageView id={id} /> },
+];
 ```
 
 `NavStack` renders every entry stacked, the last one active and the rest kept

package/docs/recipes.md

@@ -14,12 +14,12 @@ the public `onCommit` callback, retains every disposer, and returns one
 idempotent disposer:
 
 ```ts
-import { createRecipe } from './navigation-sidebar.js';
-import { mountRecipe } from './mount-recipe.js';
+import { createRecipe } from "./navigation-sidebar.js";
+import { mountRecipe } from "./mount-recipe.js";
 
-const root = document.querySelector<HTMLElement>('#navigation')!;
+const root = document.querySelector<HTMLElement>("#navigation")!;
 const stopRecipe = mountRecipe(root, createRecipe(announce));
-window.addEventListener('pagehide', stopRecipe, { once: true });
+window.addEventListener("pagehide", stopRecipe, { once: true });
 ```
 
 The adapter is delivered as reference source, not a new package runtime export.

package/docs/split-view.md

@@ -6,9 +6,9 @@ on compact ones. One of the opt-in app layouts (see
 [`../../docs/23-app-layouts.md`](../../docs/23-app-layouts.md)).
 
 ```ts
-import { SplitView } from '@kerfjs/ui/split-view';
-import { deviceClass } from '@kerfjs/ui/device-class';
-import '@kerfjs/ui/split-view.css';
+import { SplitView } from "@kerfjs/ui/split-view";
+import { deviceClass } from "@kerfjs/ui/device-class";
+import "@kerfjs/ui/split-view.css";
 // plus nav-stack.css when the compact path is reachable, and
 // wireResizableRegions / wireNavStack for the interactive behavior.
 ```

package/docs/tab-scaffold.md

@@ -7,9 +7,9 @@ opt-in app layouts (see [`../../docs/23-app-layouts.md`](../../docs/23-app-layou
 It is distinct from `TabBar` (document-oriented, reorderable strips).
 
 ```ts
-import { TabScaffold } from '@kerfjs/ui/tab-scaffold';
-import { wireTabScaffold } from '@kerfjs/ui/wire-tab-scaffold';
-import '@kerfjs/ui/tab-scaffold.css';
+import { TabScaffold } from "@kerfjs/ui/tab-scaffold";
+import { wireTabScaffold } from "@kerfjs/ui/wire-tab-scaffold";
+import "@kerfjs/ui/tab-scaffold.css";
 ```
 
 ## Controlled selection
@@ -19,20 +19,29 @@ The app owns the active tab (a signal); `TabScaffold` renders every tab's scene
 clicks.
 
 ```tsx
-const active = signal('home');
+const active = signal("home");
 
 <TabScaffold
   id="app"
   label="Sections"
   active={active.value}
   tabs={[
-    { id: 'home', label: 'Home', icon: <HomeIcon />, content: <HomeStack /> },
-    { id: 'search', label: 'Search', icon: <SearchIcon />, content: <SearchStack /> },
+    { id: "home", label: "Home", icon: <HomeIcon />, content: <HomeStack /> },
+    {
+      id: "search",
+      label: "Search",
+      icon: <SearchIcon />,
+      content: <SearchStack />,
+    },
   ]}
 />;
 
 // once, after first render:
-const dispose = wireTabScaffold(root, { onSelect: (id) => { active.value = id; } });
+const dispose = wireTabScaffold(root, {
+  onSelect: (id) => {
+    active.value = id;
+  },
+});
 ```
 
 Each `TabScaffoldTab` has an `id`, `label`, optional `icon`, and `content`. The

package/docs/webawesome-theme.md

@@ -4,10 +4,10 @@
 free components and the Kerf/Hot Sheet 2 design system.
 
 ```ts
-import type {} from '@kerfjs/ui/webawesome';
-import '@kerfjs/ui/webawesome.css';
-import '@awesome.me/webawesome/dist/components/button/button.js';
-import '@awesome.me/webawesome/dist/components/input/input.js';
+import type {} from "@kerfjs/ui/webawesome";
+import "@kerfjs/ui/webawesome.css";
+import "@awesome.me/webawesome/dist/components/button/button.js";
+import "@awesome.me/webawesome/dist/components/input/input.js";
 ```
 
 The type-only package import augments `kerfjs/jsx-runtime` with the 70
@@ -138,12 +138,12 @@ subtree, or for one instance after the theme import:
 
 ```css
 :root {
-  --wa-tooltip-arrow-size: .375rem;
-  --kui-wa-popover-arrow-size: .375rem;
+  --wa-tooltip-arrow-size: 0.375rem;
+  --kui-wa-popover-arrow-size: 0.375rem;
 }
 
 .pointed-popover {
-  --arrow-size: .5rem;
+  --arrow-size: 0.5rem;
 }
 ```
 
@@ -244,7 +244,7 @@ smallest subtree that needs a different identity:
 :root {
   --wa-color-brand-fill-loud: #7540a8;
   --wa-color-focus: #7540a8;
-  --wa-form-control-border-radius: .5rem;
+  --wa-form-control-border-radius: 0.5rem;
 }
 
 .billing-workspace {

package/docs/workbench.md

@@ -8,8 +8,8 @@ sidebar. One of the opt-in app layouts (see
 desktop-class devices.
 
 ```ts
-import { Workbench } from '@kerfjs/ui/workbench';
-import '@kerfjs/ui/workbench.css';
+import { Workbench } from "@kerfjs/ui/workbench";
+import "@kerfjs/ui/workbench.css";
 ```
 
 ## State lives in the app
@@ -25,9 +25,22 @@ const navCollapsed = signal(false);
   id="studio"
   label="Studio"
   main={<Editor />}
-  leftRail={{ content: <Navigator />, label: 'Navigator', collapsed: navCollapsed.value, size: 280 }}
-  rightRail={{ content: <Inspector />, label: 'Inspector', collapsed: inspectorCollapsed.value }}
-  bottomDrawer={{ content: <Console />, label: 'Console', collapsed: consoleCollapsed.value }}
+  leftRail={{
+    content: <Navigator />,
+    label: "Navigator",
+    collapsed: navCollapsed.value,
+    size: 280,
+  }}
+  rightRail={{
+    content: <Inspector />,
+    label: "Inspector",
+    collapsed: inspectorCollapsed.value,
+  }}
+  bottomDrawer={{
+    content: <Console />,
+    label: "Console",
+    collapsed: consoleCollapsed.value,
+  }}
 />;
 ```
 

package/llms.txt

@@ -6,7 +6,7 @@
 > generate correct, good-looking kerf UI — it is not a catalog to browse.
 
 ```bash
-npm install kerfjs @kerfjs/ui   # kerfjs is a peer; Web Awesome is an optional peer
+npm install kerfjs @kerfjs/ui # kerfjs is a peer; Web Awesome is an optional peer
 ```
 
 Import each component from its own subpath (`@kerfjs/ui/list-item`, `@kerfjs/ui/toolbar`,
@@ -22,15 +22,18 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
    [public-api-signatures-v1.md](./ai/public-api-signatures-v1.md) (real prop names,
    callback shapes, disposer return types).
 3. **For exhaustive, structured facts** (ids, exports, variants, `publicClasses`,
-   relationships, side effects) load the
+   relationships, side effects, and geometry ownership) load the
    [Machine-readable component catalog](./ai/component-catalog.json) — the
-   canonical checked-in source; its schema is alongside it.
+   canonical checked-in source; its schema is alongside it. Also load the
+   consuming application's catalog extension when present; generate one from the
+   [Consumer catalog extension schema](./ai/component-catalog-extension.schema.json)
+   when app-owned components must participate in selection or alignment.
 4. **Apply the rules below and in** [skill.md](./ai/skill.md).
 
 ## Core rules (do the right thing)
 
 - **Reach for the primitive, not for CSS.** The package is built to look right
-  *unstyled*. Before adding `padding`, `margin`, `width`, `height`, `border`,
+  _unstyled_. Before adding `padding`, `margin`, `width`, `height`, `border`,
   `background`, a wrapper card, or a decoration, check whether the component, the
   pane, or the content-item already owns it — it almost always does. Prefer a
   component prop or a `--kui-*` token; write CSS only for genuinely new structure,
@@ -69,7 +72,7 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
   popup menu. A toolbar popup menu is a `single` `ToolbarControlGroup` around a
   `wa-dropdown` (its `slot="trigger"` `wa-button` is the toolbar button, kept under
   `data-morph-skip-children`).
-- **`PanelHeader` is *the* panel/dialog/page heading.** A plain toolbar with an
+- **`PanelHeader` is _the_ panel/dialog/page heading.** A plain toolbar with an
   optional bordered icon group, an extra-large `ToolbarText` title, the trailing
   controls you pass, and an optional subtitle below — do not hand-build a heading
   row or restyle a toolbar into one.
@@ -90,7 +93,7 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
 - **App state is domain/persisted; helpers own only ephemeral mechanics.** Keep
   navigation stacks, tab selection and order, pane sizes, and `collapsed`/`expanded`
   disclosure flags in the app — they are data or persisted layout, and the app reads
-  them to render. The `wire…` helpers own the *ephemeral* parts: `wireNavStack` the
+  them to render. The `wire…` helpers own the _ephemeral_ parts: `wireNavStack` the
   push/pop animation, `wireTabBars` the overflow autoscroll and drag preview,
   `wireResizableRegions` the live drag preview; they report committed changes via
   callbacks. The one richer case is `wireTokenSearchFields`, which manages the
@@ -128,13 +131,16 @@ tree-shakeable, declarative with `wire…` helpers, each with a companion CSS im
 `NavStack`, `SplitView`, `Workbench`, `TabScaffold`, driven by `deviceClass()` from
 `@kerfjs/ui/device-class`. For a standalone collapsible rail/drawer outside a full
 shell, `@kerfjs/ui/collapsible-panel` (`CollapsiblePanel`, `CollapsiblePanelToggle`)
-+ `@kerfjs/ui/wire-sidebar` (`wireSidebar`: toggle, focus, compact overlay, persistence).
-`@kerfjs/ui/catalog` is another opt-in shell — a
-`Catalog` component + `wireCatalog` helper for building a component-gallery catalog
-(collapsible category sidebar + preview stage + resources footer) from your own
-entries; controlled/stateless like the layouts. `@kerfjs/ui/webawesome` is a
-type-only boundary for `wa-*` JSX; `@kerfjs/ui/select/register` and the CSS are the
-declared side effects.
+
+- `@kerfjs/ui/wire-sidebar` (`wireSidebar`: toggle, focus, compact overlay, persistence).
+  `@kerfjs/ui/catalog` is another opt-in shell — a
+  `Catalog` component + `wireCatalog` helper for building a component-gallery catalog
+  (collapsible category sidebar + preview stage + resources footer, with an opt-in
+  transparent-bound and margin geometry overlay plus focus-preserving active-row
+  reveal for long desktop sidebars) from your own
+  entries; controlled/stateless like the layouts. `@kerfjs/ui/webawesome` is a
+  type-only boundary for `wa-*` JSX; `@kerfjs/ui/select/register` and the CSS are the
+  declared side effects.
 
 ## Reference
 
@@ -146,5 +152,5 @@ declared side effects.
 - [recipes.md](./docs/recipes.md): production compositions (app shell, list-detail dialog, composer form, …) as copyable references.
 - [app-layouts.md](./docs/app-layouts.md): choosing `NavStack`/`SplitView`/`Workbench`/`TabScaffold` by data + interaction + device, and dialog presentation.
 - [webawesome-theme.md](./docs/webawesome-theme.md): the optional Web Awesome theme; catalog coverage means themed-and-supported, not preferred (prefer the Kerf primitive when one exists). The UX sidebar visibly tags superseded and exceptional Web Awesome choices as `Discouraged`; Popup remains an available conditional positioning primitive.
-- [component-catalog.json](./ai/component-catalog.json) + [public-api-signatures-v1.md](./ai/public-api-signatures-v1.md) + [webawesome-jsx-signatures-v1.md](./ai/webawesome-jsx-signatures-v1.md): machine-readable facts and exact signatures.
+- [component-catalog.json](./ai/component-catalog.json) + [component-catalog-extension.schema.json](./ai/component-catalog-extension.schema.json) + [public-api-signatures-v1.md](./ai/public-api-signatures-v1.md) + [webawesome-jsx-signatures-v1.md](./ai/webawesome-jsx-signatures-v1.md): machine-readable facts, a reusable app-component extension contract, and exact signatures.
 - [README.md](./README.md): package overview and the component subpath table.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.17",
+  "version": "5.0.0-beta.18",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",
@@ -272,8 +272,9 @@
     "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\"",
+    "check:format": "prettier --check . --ignore-unknown",
     "catalog:sync": "node scripts/sync-component-catalog.mjs",
     "check:catalog": "node scripts/sync-component-catalog.mjs --check && node scripts/check-component-catalog.mjs",
     "check:recipes": "node scripts/check-recipes.mjs",
@@ -285,14 +286,15 @@
     "ai:regressions:record": "node scripts/record-ai-regression-run.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: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: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 run check:design-templates && npm pack --dry-run",
+    "check": "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 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",

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

@@ -19,14 +19,210 @@ 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`); } };
+  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`);
+    },
+  };
 };