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

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`);
+    },
+  };
 };

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

@@ -2,7 +2,10 @@ import '@kerfjs/ui/layout.css';
 import '@kerfjs/ui/collapsible-panel.css';
 import './recipes.css';
 
-import { CollapsiblePanel, CollapsiblePanelToggle } from '@kerfjs/ui/collapsible-panel';
+import {
+  CollapsiblePanel,
+  CollapsiblePanelToggle,
+} from '@kerfjs/ui/collapsible-panel';
 import { deviceClass } from '@kerfjs/ui/device-class';
 import { ListHeader } from '@kerfjs/ui/list-header';
 import { ListItem } from '@kerfjs/ui/list-item';
@@ -26,7 +29,12 @@ const DRAWER_ACTION = 'recipe-sidebar-drawer';
  */
 function memoryStorage(): SidebarStorage {
   const map = new Map<string, string>();
-  return { getItem: (key) => map.get(key) ?? null, setItem: (key, value) => { map.set(key, value); } };
+  return {
+    getItem: (key) => map.get(key) ?? null,
+    setItem: (key, value) => {
+      map.set(key, value);
+    },
+  };
 }
 
 export const createRecipe: RecipeFactory = (announce) => {
@@ -38,52 +46,157 @@ export const createRecipe: RecipeFactory = (announce) => {
   // switches the rail/drawer to a dismissable overlay presentation.
   const device = deviceClass();
 
-  const railToggle = (inPanel: boolean) => <CollapsiblePanelToggle side="left" collapsed={railCollapsed.value} action={RAIL_ACTION} panelId="sidebar-rail" label={railCollapsed.value ? 'Show navigation' : 'Hide navigation'} className={inPanel ? '' : 'recipe-collapsible-sidebar__reveal'} />;
-  const drawerToggle = () => <CollapsiblePanelToggle side="bottom" collapsed={drawerCollapsed.value} action={DRAWER_ACTION} panelId="sidebar-console" label={drawerCollapsed.value ? 'Show activity' : 'Hide activity'} />;
+  const railToggle = (inPanel: boolean) => (
+    <CollapsiblePanelToggle
+      side="left"
+      collapsed={railCollapsed.value}
+      action={RAIL_ACTION}
+      panelId="sidebar-rail"
+      label={railCollapsed.value ? 'Show navigation' : 'Hide navigation'}
+      className={inPanel ? '' : 'recipe-collapsible-sidebar__reveal'}
+    />
+  );
+  const drawerToggle = () => (
+    <CollapsiblePanelToggle
+      side="bottom"
+      collapsed={drawerCollapsed.value}
+      action={DRAWER_ACTION}
+      panelId="sidebar-console"
+      label={drawerCollapsed.value ? 'Show activity' : 'Hide activity'}
+    />
+  );
 
-  const render = () => <section class="kui-recipe recipe-collapsible-sidebar kui-recipe__surface" data-recipe="recipe-collapsible-sidebar" data-rail-collapsed={String(railCollapsed.value)} data-drawer-collapsed={String(drawerCollapsed.value)}>
-    <CollapsiblePanel id="sidebar-rail" side="left" size={232} collapsed={railCollapsed.value} label="Workspace navigation" className="recipe-collapsible-sidebar__rail kui-pane">
-      <div class="recipe-collapsible-sidebar__rail-head">
-        <ToolbarText text="Atlas" />
-        <ToolbarControlGroup appearance="borderless" single>{railToggle(true)}</ToolbarControlGroup>
-      </div>
-      <nav class="recipe-collapsible-sidebar__nav kui-pane__content kui-content" aria-label="Workspace">
-        <section>
-          <ListHeader label="Workspace" />
-          <ListItem action="recipe-action" itemId="inbox" label="Inbox" icon={<LucideIcon icon={Inbox} name="inbox" />} trailing={<span>12</span>} selected={selected.value === 'inbox'} />
-          <ListItem action="recipe-action" itemId="projects" label="Projects" icon={<LucideIcon icon={Folder} name="folder" />} selected={selected.value === 'projects'} />
-          <ListItem action="recipe-action" itemId="shared" label="Shared with me" icon={<LucideIcon icon={Users} name="users" />} selected={selected.value === 'shared'} />
-        </section>
-      </nav>
-    </CollapsiblePanel>
-    <main class="recipe-collapsible-sidebar__main kui-pane">
-      <PanelHeader
-        title={selected.value === 'projects' ? 'Projects' : selected.value === 'shared' ? 'Shared with me' : 'Inbox'}
-        titleId="recipe-collapsible-main-title"
-        icon={railToggle(false)}
-        actions={<ToolbarControlGroup appearance="borderless" single>{drawerToggle()}</ToolbarControlGroup>}
-      />
-      <div class="recipe-collapsible-sidebar__body kui-pane__content kui-content">
-        <p class="kui-recipe__ownership kui-content-item">The app owns each panel's <code>collapsed</code> signal, sizes, and content; <code>wireSidebar</code> owns the toggle, focus move/restore, the compact overlay, and persistence.</p>
-        <article class="recipe-collapsible-sidebar__card kui-content-item"><strong>Narrow the window to a compact width</strong><p class="kui-recipe__muted">The rail and drawer become a dismissable overlay: a backdrop, Escape, and a trapped Tab ring, all managed by the wire.</p></article>
-      </div>
-    </main>
-    <CollapsiblePanel id="sidebar-console" side="bottom" size={168} collapsed={drawerCollapsed.value} label="Activity" className="recipe-collapsible-sidebar__drawer kui-pane">
-      <Toolbar label="Activity" divider leading={<ToolbarControlGroup appearance="borderless" single><ToolbarText text="Activity" size="small" /></ToolbarControlGroup>} trailing={<ToolbarControlGroup appearance="borderless" single>{drawerToggle()}</ToolbarControlGroup>} />
-      <div class="recipe-collapsible-sidebar__drawer-body kui-pane__content kui-content">
-        <ul class="recipe-collapsible-sidebar__log">
-          <li><LucideIcon icon={Bell} name="bell" />Deploy finished · 2m ago</li>
-          <li><LucideIcon icon={Bell} name="bell" />Review requested · 9m ago</li>
-        </ul>
-      </div>
-    </CollapsiblePanel>
-  </section>;
+  const render = () => (
+    <section
+      class="kui-recipe recipe-collapsible-sidebar kui-recipe__surface"
+      data-recipe="recipe-collapsible-sidebar"
+      data-rail-collapsed={String(railCollapsed.value)}
+      data-drawer-collapsed={String(drawerCollapsed.value)}
+    >
+      <CollapsiblePanel
+        id="sidebar-rail"
+        side="left"
+        size={232}
+        collapsed={railCollapsed.value}
+        label="Workspace navigation"
+        className="recipe-collapsible-sidebar__rail kui-pane"
+      >
+        <div class="recipe-collapsible-sidebar__rail-head">
+          <ToolbarText text="Atlas" />
+          <ToolbarControlGroup appearance="borderless" single>
+            {railToggle(true)}
+          </ToolbarControlGroup>
+        </div>
+        <nav
+          class="recipe-collapsible-sidebar__nav kui-pane__content kui-content"
+          aria-label="Workspace"
+        >
+          <section>
+            <ListHeader label="Workspace" />
+            <ListItem
+              action="recipe-action"
+              itemId="inbox"
+              label="Inbox"
+              icon={<LucideIcon icon={Inbox} name="inbox" />}
+              trailing={<span>12</span>}
+              selected={selected.value === 'inbox'}
+            />
+            <ListItem
+              action="recipe-action"
+              itemId="projects"
+              label="Projects"
+              icon={<LucideIcon icon={Folder} name="folder" />}
+              selected={selected.value === 'projects'}
+            />
+            <ListItem
+              action="recipe-action"
+              itemId="shared"
+              label="Shared with me"
+              icon={<LucideIcon icon={Users} name="users" />}
+              selected={selected.value === 'shared'}
+            />
+          </section>
+        </nav>
+      </CollapsiblePanel>
+      <main class="recipe-collapsible-sidebar__main kui-pane">
+        <PanelHeader
+          title={
+            selected.value === 'projects'
+              ? 'Projects'
+              : selected.value === 'shared'
+                ? 'Shared with me'
+                : 'Inbox'
+          }
+          titleId="recipe-collapsible-main-title"
+          icon={railToggle(false)}
+          actions={
+            <ToolbarControlGroup appearance="borderless" single>
+              {drawerToggle()}
+            </ToolbarControlGroup>
+          }
+        />
+        <div class="recipe-collapsible-sidebar__body kui-pane__content kui-content">
+          <p class="kui-recipe__ownership kui-content-item">
+            The app owns each panel's <code>collapsed</code> signal, sizes, and
+            content; <code>wireSidebar</code> owns the toggle, focus
+            move/restore, the compact overlay, and persistence.
+          </p>
+          <article class="recipe-collapsible-sidebar__card kui-content-item">
+            <strong>Narrow the window to a compact width</strong>
+            <p class="kui-recipe__muted">
+              The rail and drawer become a dismissable overlay: a backdrop,
+              Escape, and a trapped Tab ring, all managed by the wire.
+            </p>
+          </article>
+        </div>
+      </main>
+      <CollapsiblePanel
+        id="sidebar-console"
+        side="bottom"
+        size={168}
+        collapsed={drawerCollapsed.value}
+        label="Activity"
+        className="recipe-collapsible-sidebar__drawer kui-pane"
+      >
+        <Toolbar
+          label="Activity"
+          divider
+          leading={
+            <ToolbarControlGroup appearance="borderless" single>
+              <ToolbarText text="Activity" size="small" />
+            </ToolbarControlGroup>
+          }
+          trailing={
+            <ToolbarControlGroup appearance="borderless" single>
+              {drawerToggle()}
+            </ToolbarControlGroup>
+          }
+        />
+        <div class="recipe-collapsible-sidebar__drawer-body kui-pane__content kui-content">
+          <ul class="recipe-collapsible-sidebar__log">
+            <li>
+              <LucideIcon icon={Bell} name="bell" />
+              Deploy finished · 2m ago
+            </li>
+            <li>
+              <LucideIcon icon={Bell} name="bell" />
+              Review requested · 9m ago
+            </li>
+          </ul>
+        </div>
+      </CollapsiblePanel>
+    </section>
+  );
 
   return {
     render,
     action(command, element) {
       const id = element.dataset.itemId;
-      if (id) { selected.value = id; announce(`Opened ${id}`); return; }
+      if (id) {
+        selected.value = id;
+        announce(`Opened ${id}`);
+        return;
+      }
       announce(`${command} requested`);
     },
     wire(root) {
@@ -91,8 +204,18 @@ export const createRecipe: RecipeFactory = (announce) => {
         deviceClass: device,
         storage,
         panels: [
-          { id: 'sidebar-rail', collapsed: railCollapsed, toggleAction: RAIL_ACTION, storageKey: 'recipe-sidebar-rail' },
-          { id: 'sidebar-console', collapsed: drawerCollapsed, toggleAction: DRAWER_ACTION, storageKey: 'recipe-sidebar-console' },
+          {
+            id: 'sidebar-rail',
+            collapsed: railCollapsed,
+            toggleAction: RAIL_ACTION,
+            storageKey: 'recipe-sidebar-rail',
+          },
+          {
+            id: 'sidebar-console',
+            collapsed: drawerCollapsed,
+            toggleAction: DRAWER_ACTION,
+            storageKey: 'recipe-sidebar-console',
+          },
         ],
       });
     },

package/ux-demo/recipes/compact-toolbar.tsx

@@ -17,27 +17,129 @@ export const createRecipe: RecipeFactory = (announce) => {
   const view = signal('list');
   const sort = signal('updated');
   const filtered = signal(false);
-  const render = () => <section class="kui-recipe recipe-compact-toolbar kui-recipe__surface kui-layout" data-recipe="recipe-compact-toolbar">
-    <Toolbar
-      label="Task workspace controls"
-      leading={<ToolbarControlGroup appearance="borderless" single><ToolbarText text="Tasks" size="small" /></ToolbarControlGroup>}
-      center={<ToolbarControlGroup><SegmentedControl id="recipe-view" label="View" value={view.value} action="recipe-action" appearance="toolbar" shape="pill" size="small" choices={[{ value: 'list', label: 'List' }, { value: 'board', label: 'Board' }, { value: 'timeline', label: 'Timeline' }]} /></ToolbarControlGroup>}
-      trailing={<div class="kui-control-cluster"><Select name="recipe-sort" value={sort.value} ariaLabel="Sort tasks" fitMenu choices={[{ value: 'updated', label: 'Recently updated' }, { value: 'priority', label: 'Priority' }, { value: 'owner', label: 'Owner' }, { value: 'created', label: 'Created date' }]} /><ToolbarControlGroup label="Task actions" buttonAppearance="push"><button type="button" aria-label="Toggle filters" aria-pressed={String(filtered.value)} data-action="recipe-action" data-recipe-command="filter"><LucideIcon icon={Filter} name="filter" /></button><button type="button" aria-label="Refresh tasks" data-action="recipe-action" data-recipe-command="refresh"><LucideIcon icon={RefreshCw} name="refresh-cw" /></button></ToolbarControlGroup><button class="kui-recipe__button" type="button" aria-label="More task actions" data-action="recipe-action" data-recipe-command="more"><LucideIcon icon={MoreHorizontal} name="more-horizontal" /></button></div>}
-    />
-    <div class="recipe-compact-toolbar__guide kui-content-item"><div><strong>ToolbarControlGroup</strong><span class="kui-recipe__muted">Related commands or pressed tools.</span></div><div><strong>SegmentedControl</strong><span class="kui-recipe__muted">A few visible exclusive choices.</span></div><div><strong>Select</strong><span class="kui-recipe__muted">A longer controlled value list.</span></div><div><strong>Ordinary button</strong><span class="kui-recipe__muted">One independent command.</span></div></div>
-    <p class="kui-recipe__ownership kui-content-item">The recipe owns control semantics and wrapping. The app owns values, actions, persistence, and responsive priority.</p>
-  </section>;
+  const render = () => (
+    <section
+      class="kui-recipe recipe-compact-toolbar kui-recipe__surface kui-layout"
+      data-recipe="recipe-compact-toolbar"
+    >
+      <Toolbar
+        label="Task workspace controls"
+        leading={
+          <ToolbarControlGroup appearance="borderless" single>
+            <ToolbarText text="Tasks" size="small" />
+          </ToolbarControlGroup>
+        }
+        center={
+          <ToolbarControlGroup>
+            <SegmentedControl
+              id="recipe-view"
+              label="View"
+              value={view.value}
+              action="recipe-action"
+              appearance="toolbar"
+              shape="pill"
+              size="small"
+              choices={[
+                { value: 'list', label: 'List' },
+                { value: 'board', label: 'Board' },
+                { value: 'timeline', label: 'Timeline' },
+              ]}
+            />
+          </ToolbarControlGroup>
+        }
+        trailing={
+          <div class="kui-control-cluster">
+            <Select
+              name="recipe-sort"
+              value={sort.value}
+              ariaLabel="Sort tasks"
+              fitMenu
+              choices={[
+                { value: 'updated', label: 'Recently updated' },
+                { value: 'priority', label: 'Priority' },
+                { value: 'owner', label: 'Owner' },
+                { value: 'created', label: 'Created date' },
+              ]}
+            />
+            <ToolbarControlGroup label="Task actions" buttonAppearance="push">
+              <button
+                type="button"
+                aria-label="Toggle filters"
+                aria-pressed={String(filtered.value)}
+                data-action="recipe-action"
+                data-recipe-command="filter"
+              >
+                <LucideIcon icon={Filter} name="filter" />
+              </button>
+              <button
+                type="button"
+                aria-label="Refresh tasks"
+                data-action="recipe-action"
+                data-recipe-command="refresh"
+              >
+                <LucideIcon icon={RefreshCw} name="refresh-cw" />
+              </button>
+            </ToolbarControlGroup>
+            <button
+              class="kui-recipe__button"
+              type="button"
+              aria-label="More task actions"
+              data-action="recipe-action"
+              data-recipe-command="more"
+            >
+              <LucideIcon icon={MoreHorizontal} name="more-horizontal" />
+            </button>
+          </div>
+        }
+      />
+      <div class="recipe-compact-toolbar__guide kui-content-item">
+        <div>
+          <strong>ToolbarControlGroup</strong>
+          <span class="kui-recipe__muted">
+            Related commands or pressed tools.
+          </span>
+        </div>
+        <div>
+          <strong>SegmentedControl</strong>
+          <span class="kui-recipe__muted">
+            A few visible exclusive choices.
+          </span>
+        </div>
+        <div>
+          <strong>Select</strong>
+          <span class="kui-recipe__muted">A longer controlled value list.</span>
+        </div>
+        <div>
+          <strong>Ordinary button</strong>
+          <span class="kui-recipe__muted">One independent command.</span>
+        </div>
+      </div>
+      <p class="kui-recipe__ownership kui-content-item">
+        The recipe owns control semantics and wrapping. The app owns values,
+        actions, persistence, and responsive priority.
+      </p>
+    </section>
+  );
   return {
     render,
     action(command, element) {
       const value = element.dataset.segmentValue;
       if (value) view.value = value;
       if (command === 'filter') filtered.value = !filtered.value;
-      announce(value ? `View: ${value}` : command === 'filter' ? `Filters ${filtered.value ? 'on' : 'off'}` : `${command} requested`);
+      announce(
+        value
+          ? `View: ${value}`
+          : command === 'filter'
+            ? `Filters ${filtered.value ? 'on' : 'off'}`
+            : `${command} requested`,
+      );
     },
     change(element) {
       const value = (element as HTMLElement & { value?: string }).value;
-      if (element.getAttribute('name') === 'recipe-sort' && value) { sort.value = value; announce(`Sort: ${value}`); }
+      if (element.getAttribute('name') === 'recipe-sort' && value) {
+        sort.value = value;
+        announce(`Sort: ${value}`);
+      }
     },
   };
 };