@kerfjs/ui 5.0.0-beta.4 → 5.0.0-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.4",
+  "version": "5.0.0-beta.6",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",
@@ -88,6 +88,10 @@
       "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",
@@ -102,10 +106,29 @@
       "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"
+    },
+    "./workbench": {
+      "types": "./dist/workbench.d.ts",
+      "import": "./dist/workbench.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",
@@ -149,10 +172,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",
@@ -178,14 +201,17 @@
     "./resizable-region.css": "./dist/styles/resizable-region.css",
     "./app-tab.css": "./dist/styles/app-tab.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",
+    "./workbench.css": "./dist/styles/workbench.css",
+    "./tab-scaffold.css": "./dist/styles/tab-scaffold.css",
     "./loading-spinner.css": "./dist/styles/loading-spinner.css",
     "./select.css": "./dist/styles/select.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",
+    "./panel-header.css": "./dist/styles/panel-header.css",
     "./value-table.css": "./dist/styles/value-table.css",
     "./ai/*": "./ai/*",
     "./docs/*": "./docs/*"

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

@@ -4,7 +4,7 @@ import './recipes.css';
 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 { 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';
@@ -24,8 +24,8 @@ export const createRecipe: RecipeFactory = (announce) => {
     <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>
+      <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`); } };

package/ux-demo/recipes/composer-form.tsx

@@ -6,7 +6,7 @@ import '@awesome.me/webawesome/dist/components/input/input.js';
 import '@awesome.me/webawesome/dist/components/textarea/textarea.js';
 import './recipes.css';
 
-import { DialogHeader } from '@kerfjs/ui/dialog-header';
+import { PanelHeader } from '@kerfjs/ui/panel-header';
 import { Select } from '@kerfjs/ui/select';
 import { StateBanner } from '@kerfjs/ui/state-banner';
 import { signal } from 'kerfjs';
@@ -30,7 +30,7 @@ export const createRecipe: RecipeFactory = (announce) => {
   const audience = signal('team');
   const status = signal<'idle' | 'error' | 'saved'>('idle');
   const render = () => <form class="kui-recipe recipe-form kui-recipe__surface kui-content" data-recipe="recipe-composer-form" aria-labelledby="recipe-composer-title" aria-describedby="recipe-composer-summary" noValidate>
-    <DialogHeader title="Publish workspace update" titleId="recipe-composer-title" summary="Share a concise, actionable update with collaborators." summaryId="recipe-composer-summary" />
+    <PanelHeader title="Publish workspace update" titleId="recipe-composer-title" summary="Share a concise, actionable update with collaborators." summaryId="recipe-composer-summary" />
     {status.value === 'error' && <StateBanner title="Add a title before publishing" detail="The update body and audience are preserved." tone="danger" urgency="alert" />}
     {status.value === 'saved' && <StateBanner title="Update published" detail="The team audience can now read it." tone="success" />}
     <div class="recipe-form__section recipe-form__fields">

package/ux-demo/recipes/list-workspace-states.tsx

@@ -3,7 +3,7 @@ import './recipes.css';
 
 import { EmptyState } from '@kerfjs/ui/empty-state';
 import { LoadingSpinner } from '@kerfjs/ui/loading-spinner';
-import { PageHeader } from '@kerfjs/ui/page-header';
+import { PanelHeader } from '@kerfjs/ui/panel-header';
 import { StateBanner } from '@kerfjs/ui/state-banner';
 import { signal } from 'kerfjs';
 
@@ -21,6 +21,6 @@ export const createRecipe: RecipeFactory = (announce) => {
     if (state.value === 'error') return <StateBanner title="Release tasks could not be refreshed" detail="Existing filters are preserved. Try again when the connection recovers." tone="danger" urgency="alert" action={<button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="retry">Retry</button>} />;
     return <>{state.value === 'stale' && <StateBanner title="Showing saved results" detail="Refreshing in the background." tone="warning" action={<span class="kui-inline-metadata"><LoadingSpinner label="Refreshing release tasks" /><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="finish">Finish refresh</button></span>} />}{populated()}</>;
   };
-  const render = () => <section class="kui-recipe recipe-list kui-recipe__surface kui-pane" data-recipe="recipe-list-workspace-states" data-list-state={state.value}><PageHeader title="Release tasks" action={<div class="kui-control-cluster"><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="empty">Clear</button><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="fail">Simulate failure</button><button class="kui-recipe__button" data-primary="true" type="button" data-action="recipe-action" data-recipe-command="refresh">Refresh</button></div>} /><div class="recipe-list__body kui-pane__content kui-content">{renderBody()}<p class="kui-recipe__ownership kui-content-item">The recipe owns feedback placement and stable content. The app owns fetching, cache age, retry policy, and domain rows.</p></div></section>;
+  const render = () => <section class="kui-recipe recipe-list kui-recipe__surface kui-pane" data-recipe="recipe-list-workspace-states" data-list-state={state.value}><PanelHeader title="Release tasks" titleId="recipe-list-title" actions={<div class="kui-control-cluster"><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="empty">Clear</button><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="fail">Simulate failure</button><button class="kui-recipe__button" data-primary="true" type="button" data-action="recipe-action" data-recipe-command="refresh">Refresh</button></div>} /><div class="recipe-list__body kui-pane__content kui-content">{renderBody()}<p class="kui-recipe__ownership kui-content-item">The recipe owns feedback placement and stable content. The app owns fetching, cache age, retry policy, and domain rows.</p></div></section>;
   return { render, action(command) { const next: Record<string, ListState> = { load: 'populated', empty: 'empty', create: 'populated', fail: 'error', retry: 'populated', refresh: 'stale', finish: 'populated' }; if (command in next) state.value = next[command]!; announce(`List state: ${state.value}`); } };
 };

package/ux-demo/recipes/loaders.ts

@@ -8,6 +8,7 @@ export const recipeIds = [
   'recipe-composer-form',
   'recipe-list-workspace-states',
   'recipe-compact-toolbar',
+  'recipe-navigation-stack',
 ] as const;
 
 export type RecipeId = typeof recipeIds[number];
@@ -20,6 +21,7 @@ export const recipeLoaders: Record<RecipeId, () => Promise<{ createRecipe: Recip
   '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'),
 };
 
 export function isRecipeId(value: string): value is RecipeId {

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

@@ -4,10 +4,10 @@ import '@awesome.me/webawesome/dist/components/button/button.js';
 import '@awesome.me/webawesome/dist/components/dialog/dialog.js';
 import './recipes.css';
 
-import { DialogHeader } from '@kerfjs/ui/dialog-header';
 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 { ValueTable, ValueTableRow } from '@kerfjs/ui/value-table';
 import { signal } from 'kerfjs';
 import { FileText } from 'lucide';
@@ -27,7 +27,7 @@ interface RecipeDialogElement extends HTMLElement {
 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-master-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/master-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"><DialogHeader 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>} actionsLabel="Project detail actions" /><div class="recipe-master-detail kui-pane__content"><nav class="recipe-master-detail__master kui-pane" aria-label="Projects"><MenuHeader label="Recent projects" /><div class="kui-pane__content kui-content"><section>{Object.entries(records).map(([id, record]) => <MenuItem action="recipe-action" itemId={id} label={record.name} selected={selected.value === id} multiline />)}</section></div></nav><section class="recipe-master-detail__detail kui-content" aria-live="polite"><h3 class="recipe-master-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-master-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></section></div></div></wa-dialog></section>;
+  const render = () => <section class="kui-recipe kui-content" data-recipe="recipe-master-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/master-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"><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-master-detail kui-pane__content"><nav class="recipe-master-detail__master kui-pane" aria-label="Projects"><MenuHeader label="Recent projects" /><div class="kui-pane__content kui-content"><section>{Object.entries(records).map(([id, record]) => <MenuItem action="recipe-action" itemId={id} label={record.name} selected={selected.value === id} multiline />)}</section></div></nav><section class="recipe-master-detail__detail kui-content" aria-live="polite"><h3 class="recipe-master-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-master-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></section></div></div></wa-dialog></section>;
   return {
     render,
     action(command, element) {

package/ux-demo/recipes/mount-recipe.ts

@@ -1,3 +1,4 @@
+import { wireNavStack } from '@kerfjs/ui/wire-nav-stack';
 import { wireResizableRegions } from '@kerfjs/ui/wire-resizable-regions';
 import { delegate, mount } from 'kerfjs';
 import { delegateActions } from 'kerfjs/actions';
@@ -23,11 +24,13 @@ export function mountRecipe(root: HTMLElement, controller: RecipeController): ()
   const stopResize = wireResizableRegions(root, {
     onCommit: ({ id, size }) => controller.resize?.(id, size),
   });
+  const stopNav = wireNavStack(root, { onBack: () => controller.action('nav-back', root) });
 
   let disposed = false;
   return () => {
     if (disposed) return;
     disposed = true;
+    stopNav();
     stopResize();
     stopDialogs();
     stopInputs();

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

@@ -0,0 +1,76 @@
+import '@kerfjs/ui/layout.css';
+import '@kerfjs/ui/nav-stack.css';
+import '@kerfjs/ui/toolbar-text.css';
+import './recipes.css';
+
+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';
+
+import type { RecipeFactory } from './types.js';
+
+interface LibraryItem {
+  id: string;
+  label: string;
+  detail: string;
+}
+
+const ITEMS: LibraryItem[] = [
+  { id: 'tokens', label: 'Design tokens', detail: 'Semantic color, spacing, and radius scales shared across every surface.' },
+  { id: 'controls', label: 'Toolbar controls', detail: 'Control groups and segmented controls with their hover and pressed contracts.' },
+  { id: 'layouts', label: 'App layouts', detail: 'Navigation stacks, split views, workbench, and bottom-tab scaffolds.' },
+];
+
+export const createRecipe: RecipeFactory = (announce) => {
+  const listView = (): NavStackView => ({
+    key: 'library',
+    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" />} />)}
+      </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>,
+  });
+
+  const detailView = (item: LibraryItem): NavStackView => ({
+    key: item.id,
+    title: item.label,
+    content: <div class="recipe-navstack__view kui-pane__content kui-content">
+      <div class="kui-content-item">
+        <LucideIcon icon={FileText} name="file-text" />
+        <strong>{item.label}</strong>
+        <p class="kui-recipe__muted">{item.detail}</p>
+      </div>
+    </div>,
+  });
+
+  const views = signal<NavStackView[]>([listView()]);
+
+  const render = () => <section class="kui-recipe recipe-navstack kui-recipe__surface" data-recipe="recipe-navigation-stack">
+    <div class="recipe-navstack__stage"><NavStack id="recipe-nav" label="Component library" views={views.value} /></div>
+  </section>;
+
+  return {
+    render,
+    action(command, element) {
+      if (command === 'nav-back') {
+        if (views.value.length > 1) {
+          views.value = views.value.slice(0, -1);
+          announce('Navigated back');
+        }
+        return;
+      }
+      const id = element.dataset.itemId;
+      const item = ITEMS.find((candidate) => candidate.id === id);
+      if (item) {
+        views.value = [...views.value, detailView(item)];
+        announce(`Opened ${item.label}`);
+      }
+    },
+  };
+};

package/ux-demo/recipes/recipes.css

@@ -113,9 +113,6 @@
 .recipe-header__context {
   margin: 0;
 }
-.recipe-header .kui-page-header__action {
-  max-width: 100%;
-}
 
 .recipe-master-detail {
   display: grid;
@@ -140,7 +137,7 @@
   --spacing: 0;
   --width: min(62rem, calc(100vw - 2rem));
 }
-.recipe-dialog .kui-dialog-header {
+.recipe-dialog .kui-panel-header {
   margin-inline: 0;
 }
 
@@ -206,8 +203,11 @@
   gap: var(--kui-layout-content-gap);
 }
 .recipe-compact-toolbar__guide {
+  /* Span the toolbar's full width instead of the 8px content-item inset — under a
+     full-bleed toolbar/divider the inset read as the boxes floating too far in. */
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin-inline: 0;
   gap: var(--kui-layout-control-gap);
 }
 .recipe-compact-toolbar__guide > div {
@@ -321,10 +321,6 @@
   .recipe-compact-toolbar__guide {
     grid-template-columns: 1fr;
   }
-  .recipe-header .kui-page-header {
-    align-items: flex-start;
-    flex-direction: column;
-  }
 }
 
 @media (forced-colors: active) {
@@ -342,3 +338,18 @@
     transition-duration: 1ms !important;
   }
 }
+
+.recipe-navstack {
+  display: flex;
+  width: min(28rem, 100%);
+  margin-inline: auto;
+  flex-direction: column;
+}
+.recipe-navstack__stage {
+  height: 24rem;
+}
+.recipe-navstack__view {
+  /* The view is a .kui-content stack whose rows own their 8px margins; add only a
+     little block breathing room, not an inline pad that would double-inset them. */
+  padding-block: var(--kui-space-2xs);
+}

package/ux-demo/recipes/workspace-header.tsx

@@ -1,12 +1,12 @@
 import '@kerfjs/ui/layout.css';
 import './recipes.css';
 
-import { PageHeader } from '@kerfjs/ui/page-header';
+import { PanelHeader } from '@kerfjs/ui/panel-header';
 import { StateBanner } from '@kerfjs/ui/state-banner';
 
 import type { RecipeFactory } from './types.js';
 
 export const createRecipe: RecipeFactory = (announce) => ({
-  render: () => <section class="kui-recipe recipe-header kui-recipe__surface kui-content" data-recipe="recipe-workspace-header"><p class="recipe-header__context kui-inline-metadata kui-content-item"><span>Northstar workspace</span><span>·</span><span>Product planning</span></p><PageHeader title="Accessibility readiness and responsive navigation rollout" action={<div class="kui-control-cluster"><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="share">Share</button><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="more">More actions</button><button class="kui-recipe__button" data-primary="true" type="button" data-action="recipe-action" data-recipe-command="publish">Publish update</button></div>} /><StateBanner title="Ready for review" detail="All required checks passed 18 minutes ago." tone="success" /><p class="kui-recipe__ownership kui-content-item">The recipe owns page hierarchy and action relocation. The app owns authorization, command behavior, breadcrumbs, and product copy.</p></section>,
+  render: () => <section class="kui-recipe recipe-header kui-recipe__surface kui-content" data-recipe="recipe-workspace-header"><p class="recipe-header__context kui-inline-metadata kui-content-item"><span>Northstar workspace</span><span>·</span><span>Product planning</span></p><PanelHeader title="Accessibility readiness and responsive navigation rollout" titleId="recipe-workspace-title" actions={<div class="kui-control-cluster"><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="share">Share</button><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="more">More actions</button><button class="kui-recipe__button" data-primary="true" type="button" data-action="recipe-action" data-recipe-command="publish">Publish update</button></div>} /><StateBanner title="Ready for review" detail="All required checks passed 18 minutes ago." tone="success" /><p class="kui-recipe__ownership kui-content-item">The recipe owns page hierarchy and action relocation. The app owns authorization, command behavior, breadcrumbs, and product copy.</p></section>,
   action(command) { announce(`${command} requested`); },
 });

package/dist/browser/page-header.js

@@ -1,3 +0,0 @@
-import '../styles/foundation.css';
-import '../styles/page-header.css';
-export * from '../page-header.js';

package/dist/chunk-2PES33HS.js

@@ -1,13 +0,0 @@
-import { jsxs, jsx } from 'kerfjs/jsx-runtime';
-
-// src/page-header.tsx
-function PageHeader({ title, action }) {
-  return /* @__PURE__ */ jsxs("header", { class: "kui-page-header", "data-component": "page-header", children: [
-    /* @__PURE__ */ jsx("h1", { children: title }),
-    action && /* @__PURE__ */ jsx("div", { class: "kui-page-header__action", children: action })
-  ] });
-}
-
-export { PageHeader };
-
-//# sourceMappingURL=chunk-2PES33HS.js.map

package/dist/chunk-2PES33HS.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/page-header.tsx"],"names":[],"mappings":";;;AAOO,SAAS,UAAA,CAAW,EAAE,KAAA,EAAO,MAAA,EAAO,EAAoB;AAC7D,EAAA,uBAAO,IAAA,CAAC,QAAA,EAAA,EAAO,KAAA,EAAM,iBAAA,EAAkB,kBAAe,aAAA,EAAc,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,QAAI,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IAAM,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,2BAA2B,QAAA,EAAA,MAAA,EAAO;AAAA,GAAA,EAAO,CAAA;AACrJ","file":"chunk-2PES33HS.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface PageHeaderProps {\n  title: string | SafeHtml;\n  action?: SafeHtml;\n}\n\nexport function PageHeader({ title, action }: PageHeaderProps) {\n  return <header class=\"kui-page-header\" data-component=\"page-header\"><h1>{title}</h1>{action && <div class=\"kui-page-header__action\">{action}</div>}</header>;\n}\n"]}

package/dist/chunk-GY5WH7TO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/toolbar-text.tsx"],"names":[],"mappings":";;;AAQO,SAAS,YAAY,EAAE,IAAA,EAAM,OAAO,SAAA,EAAW,SAAA,GAAY,IAAG,EAAqB;AACxF,EAAA,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,cAAA,EAAe,WAAA,EAAW,IAAA,EAAO,QAAA,EAAA,IAAA,EAAK,CAAA;AACnH","file":"chunk-GY5WH7TO.js","sourcesContent":["export type ToolbarTextSize = 'large' | 'default' | 'small';\n\nexport interface ToolbarTextProps {\n  text: string;\n  size?: ToolbarTextSize;\n  className?: string;\n}\n\nexport function ToolbarText({ text, size = 'default', className = '' }: ToolbarTextProps) {\n  return <span class={`kui-toolbar-text ${className}`.trim()} data-component=\"toolbar-text\" data-size={size}>{text}</span>;\n}\n"]}

package/dist/chunk-H5AGGVU5.js

@@ -1,75 +0,0 @@
-import { placeTokenSearchCaret, readTokenSearchField } from './chunk-7LDCTU7D.js';
-import { delegate } from 'kerfjs';
-
-function editorFromEvent(root, event) {
-  const target = event.target;
-  if (!(target instanceof Element)) return;
-  const editor = target.closest("[data-token-search-editor]");
-  return editor && root.contains(editor) ? editor : void 0;
-}
-function caretQueryOffset(editor) {
-  const selection = editor.ownerDocument.getSelection();
-  if (!selection || selection.rangeCount === 0) return;
-  const selectionRange = selection.getRangeAt(0);
-  if (!editor.contains(selectionRange.startContainer)) return;
-  const prefixRange = editor.ownerDocument.createRange();
-  prefixRange.selectNodeContents(editor);
-  prefixRange.setEnd(selectionRange.startContainer, selectionRange.startOffset);
-  const prefix = editor.ownerDocument.createElement("div");
-  prefix.append(prefixRange.cloneContents());
-  return readTokenSearchField(prefix).query.length;
-}
-function replacementEditor(root, id) {
-  return [...root.querySelectorAll("[data-token-search-editor]")].find((editor) => editor.dataset.tokenSearchEditor === id);
-}
-function wireTokenSearchFields(root, { onSubmit }) {
-  const pending = /* @__PURE__ */ new WeakMap();
-  const onBeforeInput = (event) => {
-    const inputEvent = event;
-    const editor = editorFromEvent(root, event);
-    if (!editor || !inputEvent.inputType.startsWith("delete") || editor.ownerDocument.activeElement !== editor) return;
-    const field = editor.closest('[data-component="token-search-field"]');
-    const id = field?.dataset.tokenSearchId;
-    const offset = caretQueryOffset(editor);
-    if (!id || offset === void 0 || field?.dataset.disabled === "true") return;
-    pending.set(editor, {
-      id,
-      offset,
-      tokenCount: editor.querySelectorAll('[data-component="token-search-token"]').length
-    });
-  };
-  const onInput = (event) => {
-    const editor = editorFromEvent(root, event);
-    if (!editor) return;
-    const deletion = pending.get(editor);
-    pending.delete(editor);
-    if (!deletion || editor.querySelectorAll('[data-component="token-search-token"]').length >= deletion.tokenCount) return;
-    editor.ownerDocument.defaultView.requestAnimationFrame(() => {
-      const replacement = replacementEditor(root, deletion.id);
-      if (!replacement) return;
-      const active = replacement.ownerDocument.activeElement;
-      if (active !== editor && active !== replacement && active !== replacement.ownerDocument.body) return;
-      placeTokenSearchCaret(replacement, deletion.offset);
-    });
-  };
-  root.addEventListener("beforeinput", onBeforeInput, true);
-  root.addEventListener("input", onInput, true);
-  const stopSubmit = delegate(root, "keydown", "[data-token-search-editor]", (event, element) => {
-    const keyboardEvent = event;
-    const editor = element;
-    const field = editor.closest('[data-component="token-search-field"]');
-    const id = field?.dataset.tokenSearchId;
-    if (keyboardEvent.key !== "Enter" || keyboardEvent.isComposing || !id || field?.dataset.disabled === "true") return;
-    keyboardEvent.preventDefault();
-    onSubmit({ id, editor });
-  });
-  return () => {
-    root.removeEventListener("beforeinput", onBeforeInput, true);
-    root.removeEventListener("input", onInput, true);
-    stopSubmit();
-  };
-}
-
-export { wireTokenSearchFields };
-
-//# sourceMappingURL=chunk-H5AGGVU5.js.map

package/dist/chunk-H5AGGVU5.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/wire-token-search-fields.ts"],"names":[],"mappings":"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","file":"chunk-H5AGGVU5.js","sourcesContent":["import { delegate } from 'kerfjs';\n\nimport { placeTokenSearchCaret, readTokenSearchField } from './token-search-field.js';\n\nexport interface TokenSearchSubmit {\n  id: string;\n  editor: HTMLElement;\n}\n\nexport interface WireTokenSearchFieldsOptions {\n  onSubmit: (submission: TokenSearchSubmit) => void;\n}\n\ninterface PendingTokenDeletion {\n  id: string;\n  offset: number;\n  tokenCount: number;\n}\n\nfunction editorFromEvent(root: HTMLElement, event: Event): HTMLElement | undefined {\n  const target = event.target;\n  if (!(target instanceof Element)) return;\n  const editor = target.closest<HTMLElement>('[data-token-search-editor]');\n  return editor && root.contains(editor) ? editor : undefined;\n}\n\nfunction caretQueryOffset(editor: HTMLElement): number | undefined {\n  const selection = editor.ownerDocument.getSelection();\n  if (!selection || selection.rangeCount === 0) return;\n  const selectionRange = selection.getRangeAt(0);\n  if (!editor.contains(selectionRange.startContainer)) return;\n  const prefixRange = editor.ownerDocument.createRange();\n  prefixRange.selectNodeContents(editor);\n  prefixRange.setEnd(selectionRange.startContainer, selectionRange.startOffset);\n  const prefix = editor.ownerDocument.createElement('div');\n  prefix.append(prefixRange.cloneContents());\n  return readTokenSearchField(prefix).query.length;\n}\n\nfunction replacementEditor(root: HTMLElement, id: string): HTMLElement | undefined {\n  return [...root.querySelectorAll<HTMLElement>('[data-token-search-editor]')]\n    .find((editor) => editor.dataset.tokenSearchEditor === id);\n}\n\n/** Keep TokenSearchField wrapping, submit Enter, and preserve its caret across controlled token deletion. */\nexport function wireTokenSearchFields(root: HTMLElement, { onSubmit }: WireTokenSearchFieldsOptions) {\n  const pending = new WeakMap<HTMLElement, PendingTokenDeletion>();\n  const onBeforeInput = (event: Event) => {\n    const inputEvent = event as InputEvent;\n    const editor = editorFromEvent(root, event);\n    if (!editor || !inputEvent.inputType.startsWith('delete') || editor.ownerDocument.activeElement !== editor) return;\n    const field = editor.closest<HTMLElement>('[data-component=\"token-search-field\"]');\n    const id = field?.dataset.tokenSearchId;\n    const offset = caretQueryOffset(editor);\n    if (!id || offset === undefined || field?.dataset.disabled === 'true') return;\n    pending.set(editor, {\n      id,\n      offset,\n      tokenCount: editor.querySelectorAll('[data-component=\"token-search-token\"]').length,\n    });\n  };\n  const onInput = (event: Event) => {\n    const editor = editorFromEvent(root, event);\n    if (!editor) return;\n    const deletion = pending.get(editor);\n    pending.delete(editor);\n    if (!deletion || editor.querySelectorAll('[data-component=\"token-search-token\"]').length >= deletion.tokenCount) return;\n    editor.ownerDocument.defaultView!.requestAnimationFrame(() => {\n      const replacement = replacementEditor(root, deletion.id);\n      if (!replacement) return;\n      const active = replacement.ownerDocument.activeElement;\n      if (active !== editor && active !== replacement && active !== replacement.ownerDocument.body) return;\n      placeTokenSearchCaret(replacement, deletion.offset);\n    });\n  };\n  root.addEventListener('beforeinput', onBeforeInput, true);\n  root.addEventListener('input', onInput, true);\n\n  const stopSubmit = delegate(root, 'keydown', '[data-token-search-editor]', (event, element) => {\n    const keyboardEvent = event as KeyboardEvent;\n    const editor = element as HTMLElement;\n    const field = editor.closest<HTMLElement>('[data-component=\"token-search-field\"]');\n    const id = field?.dataset.tokenSearchId;\n    if (keyboardEvent.key !== 'Enter' || keyboardEvent.isComposing || !id || field?.dataset.disabled === 'true') return;\n    keyboardEvent.preventDefault();\n    onSubmit({ id, editor });\n  });\n  return () => {\n    root.removeEventListener('beforeinput', onBeforeInput, true);\n    root.removeEventListener('input', onInput, true);\n    stopSubmit();\n  };\n}\n"]}

package/dist/chunk-K3G72I6D.js

@@ -1,24 +0,0 @@
-import { ToolbarControlGroup } from './chunk-MFKMHK5W.js';
-import { Toolbar } from './chunk-DAFFDO33.js';
-import { jsxs, jsx } from 'kerfjs/jsx-runtime';
-
-function DialogHeader({ title, titleId, summary, summaryId, icon, iconClassName = "", actions, actionsLabel }) {
-  const titleContent = /* @__PURE__ */ jsx("div", { class: "kui-dialog-header__copy", children: /* @__PURE__ */ jsx("h2", { id: titleId, children: title }) });
-  const identity = /* @__PURE__ */ jsx(
-    ToolbarControlGroup,
-    {
-      appearance: "borderless",
-      className: "kui-dialog-header__identity",
-      children: icon ? [/* @__PURE__ */ jsx("span", { class: `kui-dialog-header__icon ${iconClassName}`.trim(), children: icon }), titleContent] : titleContent
-    }
-  );
-  const actionGroup = actions && /* @__PURE__ */ jsx(ToolbarControlGroup, { className: "kui-dialog-header__actions", label: actionsLabel, children: actions });
-  return /* @__PURE__ */ jsxs("div", { class: "kui-dialog-header", "data-component": "dialog-header", "data-has-icon": String(Boolean(icon)), "data-has-actions": String(Boolean(actions)), "data-has-summary": String(Boolean(summary)), children: [
-    /* @__PURE__ */ jsx(Toolbar, { leading: identity, trailing: actionGroup, divider: false, className: "kui-dialog-header__toolbar" }),
-    summary && /* @__PURE__ */ jsx("p", { class: "kui-dialog-header__summary", id: summaryId, children: summary })
-  ] });
-}
-
-export { DialogHeader };
-
-//# sourceMappingURL=chunk-K3G72I6D.js.map

package/dist/chunk-K3G72I6D.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/dialog-header.tsx"],"names":[],"mappings":";;;;AAgBO,SAAS,YAAA,CAAa,EAAE,KAAA,EAAO,OAAA,EAAS,OAAA,EAAS,SAAA,EAAW,IAAA,EAAM,aAAA,GAAgB,EAAA,EAAI,OAAA,EAAS,YAAA,EAAa,EAAsB;AACvI,EAAA,MAAM,YAAA,mBAAe,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,yBAAA,EAA0B,8BAAC,IAAA,EAAA,EAAG,EAAA,EAAI,OAAA,EAAU,QAAA,EAAA,KAAA,EAAM,CAAA,EAAK,CAAA;AACvF,EAAA,MAAM,QAAA,mBAAW,GAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MAChB,UAAA,EAAW,YAAA;AAAA,MACX,SAAA,EAAU,6BAAA;AAAA,MACV,QAAA,EAAU,IAAA,GAAO,iBAAC,GAAA,CAAC,UAAK,KAAA,EAAO,CAAA,wBAAA,EAA2B,aAAa,CAAA,CAAA,CAAG,IAAA,EAAK,EAAI,QAAA,EAAA,IAAA,EAAK,CAAA,EAAS,YAAY,CAAA,GAAI;AAAA;AAAA,GACnH;AACA,EAAA,MAAM,WAAA,GAAc,2BAAW,GAAA,CAAC,mBAAA,EAAA,EAAoB,WAAU,4BAAA,EAA6B,KAAA,EAAO,cAAe,QAAA,EAAA,OAAA,EAAQ,CAAA;AAEzH,EAAA,uBAAO,IAAA,CAAC,SAAI,KAAA,EAAM,mBAAA,EAAoB,kBAAe,eAAA,EAAgB,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,GAAG,kBAAA,EAAkB,MAAA,CAAO,OAAA,CAAQ,OAAO,CAAC,CAAA,EAAG,oBAAkB,MAAA,CAAO,OAAA,CAAQ,OAAO,CAAC,CAAA,EAC9L,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAS,QAAA,EAAU,QAAA,EAAU,aAAa,OAAA,EAAS,KAAA,EAAO,WAAU,4BAAA,EAA6B,CAAA;AAAA,IACzG,2BAAW,GAAA,CAAC,GAAA,EAAA,EAAE,OAAM,4BAAA,EAA6B,EAAA,EAAI,WAAY,QAAA,EAAA,OAAA,EAAQ;AAAA,GAAA,EAC5E,CAAA;AACF","file":"chunk-K3G72I6D.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Toolbar } from './toolbar.js';\nimport { ToolbarControlGroup } from './toolbar-control-group.js';\n\nexport interface DialogHeaderProps {\n  title: string;\n  titleId: string;\n  summary?: string;\n  summaryId?: string;\n  icon?: SafeHtml;\n  iconClassName?: string;\n  actions?: SafeHtml;\n  actionsLabel?: string;\n}\n\nexport function DialogHeader({ title, titleId, summary, summaryId, icon, iconClassName = '', actions, actionsLabel }: DialogHeaderProps) {\n  const titleContent = <div class=\"kui-dialog-header__copy\"><h2 id={titleId}>{title}</h2></div>;\n  const identity = <ToolbarControlGroup\n    appearance=\"borderless\"\n    className=\"kui-dialog-header__identity\"\n    children={icon ? [<span class={`kui-dialog-header__icon ${iconClassName}`.trim()}>{icon}</span>, titleContent] : titleContent}\n  />;\n  const actionGroup = actions && <ToolbarControlGroup className=\"kui-dialog-header__actions\" label={actionsLabel}>{actions}</ToolbarControlGroup>;\n\n  return <div class=\"kui-dialog-header\" data-component=\"dialog-header\" data-has-icon={String(Boolean(icon))} data-has-actions={String(Boolean(actions))} data-has-summary={String(Boolean(summary))}>\n    <Toolbar leading={identity} trailing={actionGroup} divider={false} className=\"kui-dialog-header__toolbar\" />\n    {summary && <p class=\"kui-dialog-header__summary\" id={summaryId}>{summary}</p>}\n  </div>;\n}\n"]}

package/dist/dialog-header.d.ts

@@ -1,15 +0,0 @@
-import { SafeHtml } from 'kerfjs';
-
-interface DialogHeaderProps {
-    title: string;
-    titleId: string;
-    summary?: string;
-    summaryId?: string;
-    icon?: SafeHtml;
-    iconClassName?: string;
-    actions?: SafeHtml;
-    actionsLabel?: string;
-}
-declare function DialogHeader({ title, titleId, summary, summaryId, icon, iconClassName, actions, actionsLabel }: DialogHeaderProps): SafeHtml;
-
-export { DialogHeader, type DialogHeaderProps };

package/dist/dialog-header.js

@@ -1,5 +0,0 @@
-export { DialogHeader } from './chunk-K3G72I6D.js';
-
-
-
-//# sourceMappingURL=dialog-header.js.map

package/dist/dialog-header.js.map

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

package/dist/page-header.d.ts

@@ -1,9 +0,0 @@
-import { SafeHtml } from 'kerfjs';
-
-interface PageHeaderProps {
-    title: string | SafeHtml;
-    action?: SafeHtml;
-}
-declare function PageHeader({ title, action }: PageHeaderProps): SafeHtml;
-
-export { PageHeader, type PageHeaderProps };

package/dist/page-header.js

@@ -1,3 +0,0 @@
-export { PageHeader } from './chunk-2PES33HS.js';
-
-//# sourceMappingURL=page-header.js.map

package/dist/page-header.js.map

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