@kerfjs/ui 5.0.0-beta.65 → 5.0.0-beta.67

package/README.md

@@ -189,7 +189,7 @@ interchangeable. `ListItem` and `ListActionRow` deliberately expose no raw
 | `FloatingToolbar`                                                   | `@kerfjs/ui/floating-toolbar`           | `@kerfjs/ui/floating-toolbar.css`      |
 | `PopupMenu` (register with `@kerfjs/ui/popup-menu/register`)        | `@kerfjs/ui/popup-menu`                 | `@kerfjs/ui/popup-menu.css`            |
 | `ToolbarText`                                                       | `@kerfjs/ui/toolbar-text`               | `@kerfjs/ui/toolbar-text.css`          |
-| `Text`                                                              | `@kerfjs/ui/text`                       | `@kerfjs/ui/text.css`                  |
+| `Text`, `FieldLabel`                                                | `@kerfjs/ui/text`                       | `@kerfjs/ui/text.css`                  |
 | `List`                                                              | `@kerfjs/ui/list`                       | `@kerfjs/ui/list.css`                  |
 | `Row`                                                               | `@kerfjs/ui/row`                        | `@kerfjs/ui/row.css`                   |
 | `Grid`                                                              | `@kerfjs/ui/grid`                       | `@kerfjs/ui/grid.css`                  |

package/ai/component-catalog.json

@@ -725,6 +725,7 @@
         "preferred initial focus targets when DOM order is insufficient",
         "per-view bottom toolbar content or a persistent fallback",
         "per-view leading, center, and trailing top-toolbar groups",
+        "per-view fixed header content above the active view's scroll area",
         "top-toolbar configuration, title size, and heading level",
         "whether the chrome and bottom-toolbar dividers follow the scroll, always show, or never show (chromeDividers)"
       ],
@@ -735,6 +736,7 @@
         "configured top toolbar",
         "custom back icon or visible back text",
         "per-view bottom toolbar",
+        "persistent final top-toolbar group (panelToggle) when embedded in a Workbench panel",
         "persistent bottom-toolbar fallback",
         "chrome and bottom-toolbar dividers only while the active view scrolls beneath them (wired by wireScrollDividers)",
         "permanent or no chrome dividers (chromeDividers always or none)"
@@ -811,6 +813,7 @@
         "kui-nav-stack__chrome-copy",
         "kui-nav-stack__chrome-copy--bottom",
         "kui-nav-stack__chrome-copy--exiting",
+        "kui-nav-stack__header",
         "kui-nav-stack__viewport",
         "kui-nav-stack__view",
         "kui-nav-stack__view--entering",
@@ -1079,7 +1082,9 @@
       "kind": "component",
       "source": "kerf",
       "description": "A desktop-class multi-panel workspace with independently collapsible, optionally drag-resizable left and right rails and a bottom drawer around one central work area.",
-      "uses": [],
+      "uses": [
+        "nav-stack"
+      ],
       "purpose": "Arrange a complex tool or editor as a stable central work area with optional peripheral rails and a bottom drawer.",
       "publicExports": [
         "Workbench",
@@ -1088,6 +1093,8 @@
         "WorkbenchMainBottomToolbar",
         "WorkbenchMainToolbar",
         "WorkbenchPanel",
+        "WorkbenchStaticPanel",
+        "WorkbenchNavigationPanel",
         "WorkbenchPanelResizable",
         "WorkbenchPanelToggle",
         "WorkbenchPanelToolbar",
@@ -1114,6 +1121,7 @@
         "panel presence and content",
         "collapsed state",
         "panel sizes",
+        "navigation panel view stack and push/pop actions when navStack is supplied",
         "responsive replacement below desktop",
         "collapse controls and focus policy"
       ],
@@ -1124,6 +1132,7 @@
         "bottom drawer",
         "all panels",
         "independently collapsed panels",
+        "navigation panel with per-screen toolbar, fixed header, and one scroll owner; standard toggle remains last and relocates while collapsed",
         "opt-in drag and keyboard resizable panels with min/max limits",
         "resizable rails that leave the work area a minimum width and shrink in proportion when the Workbench narrows",
         "rails or a drawer that present as overlays below a narrow or compact Workbench container breakpoint",
@@ -1933,14 +1942,16 @@
       "category": "Structure",
       "kind": "component",
       "source": "kerf",
-      "description": "Semantic native paragraph text by default, with heading and inline-span variants plus composable semantic presentation roles.",
+      "description": "Semantic native text plus a FieldLabel heading for read-only field previews that matches themed Web Awesome form labels.",
       "uses": [],
       "purpose": "Render paragraph semantics by default, h1 through h6 when selected, or geometry-free inline secondary text as a span while independently configuring quiet or danger tone, compact through extra-large size, or monospace font.",
       "publicExports": [
-        "Text"
+        "Text",
+        "FieldLabel"
       ],
       "useWhen": [
-        "Render ordinary application headings or paragraphs with native document semantics, or inline secondary text inside rows, labels, and table cells."
+        "Render ordinary application headings or paragraphs with native document semantics, or inline secondary text inside rows, labels, and table cells.",
+        "Render FieldLabel over a read-only or click-to-edit preview that replaces a Web Awesome form control."
       ],
       "avoidWhen": [
         "Do not use Text for toolbar identity or title content; use ToolbarText inside a Toolbar zone.",
@@ -1962,7 +1973,8 @@
         "size",
         "font",
         "copy",
-        "document heading hierarchy"
+        "document heading hierarchy",
+        "FieldLabel copy, preview/edit state, and aria-labelledby association"
       ],
       "variants": [
         "p, h1 through h6, or inline span semantic variant",
@@ -1974,14 +1986,15 @@
       "accessibility": [
         "Text renders a native paragraph by default; choose an h1 through h6 variant by document outline rather than appearance, or span for inline secondary text.",
         "Ordinary global, data, and ARIA attributes pass through to the native element.",
-        "Choose tone, size, and font independently of the heading level so appearance does not distort the document outline."
+        "Choose tone, size, and font independently of the heading level so appearance does not distort the document outline.",
+        "FieldLabel is plain text, not a native label; give it an id and associate the preview group with aria-labelledby."
       ],
       "geometry": {
         "margin": "none",
         "border": "self",
         "padding": "self",
         "notes": [
-          "Block Text variants reset native margins and add a 1px transparent border plus the standard 8px item padding; flush removes the border and padding. Tight line height is available for compact copy. Span has no margin, border, or padding."
+          "Block Text variants reset native margins and add a 1px transparent border plus the standard 8px item padding; flush removes the border and padding. Tight line height is available for compact copy. Span has no margin, border, or padding. FieldLabel mirrors the themed Web Awesome label typography, 9px inline inset, and bottom gap."
         ]
       },
       "delivery": {
@@ -1993,7 +2006,8 @@
       },
       "wiring": [],
       "publicClasses": [
-        "kui-text"
+        "kui-text",
+        "kui-text__field-label"
       ],
       "publicTokens": [
         "--kui-color-danger-on-quiet",
@@ -2439,10 +2453,12 @@
         "typed CssLength gap",
         "boolean, finite-keyword, or typed CssFlex flex",
         "fill: the layout root fills a definite-height parent",
-        "rootAttributes: safe data-* metadata on the root"
+        "rootAttributes: safe data-* metadata on the root",
+        "selectionMode=multiple: labeled multi-select grid for ContentItem tiles"
       ],
       "accessibility": [
-        "Grid adds layout only and no grid role; children retain responsibility for native or ARIA semantics.",
+        "Grid adds no role by default; selectionMode=multiple requires ariaLabel and supplies a multi-select grid for ContentItem row/gridcell tiles.",
+        "wireContentItems uses rendered tile positions for Left/Right/Up/Down and reaches the first or last tile with Home/End.",
         "Responsive column-count changes preserve source and focus order."
       ],
       "geometry": {

package/ai/component-composition-rules.json

@@ -89,7 +89,7 @@
     },
     "parents": {
       "mode": "listed",
-      "entries": ["@kerfjs/ui:toolbar"]
+      "entries": ["@kerfjs/ui:toolbar", "@kerfjs/ui:floating-toolbar"]
     },
     "contexts": ["toolbar-zone"],
     "zones": [

package/ai/component-composition.json

@@ -703,6 +703,11 @@
           "owner": "application",
           "required": false
         },
+        {
+          "id": "per-view fixed header content above the active view's scroll area",
+          "owner": "application",
+          "required": false
+        },
         {
           "id": "top-toolbar configuration, title size, and heading level",
           "owner": "application",
@@ -783,6 +788,7 @@
           "kui-nav-stack__chrome-copy",
           "kui-nav-stack__chrome-copy--bottom",
           "kui-nav-stack__chrome-copy--exiting",
+          "kui-nav-stack__header",
           "kui-nav-stack__viewport",
           "kui-nav-stack__view",
           "kui-nav-stack__view--entering",
@@ -1075,6 +1081,11 @@
         },
         { "id": "collapsed state", "owner": "application", "required": false },
         { "id": "panel sizes", "owner": "application", "required": false },
+        {
+          "id": "navigation panel view stack and push/pop actions when navStack is supplied",
+          "owner": "application",
+          "required": false
+        },
         {
           "id": "responsive replacement below desktop",
           "owner": "application",
@@ -1510,7 +1521,10 @@
       "name": "ToolbarControlGroup",
       "kind": "component",
       "source": "kerf",
-      "parents": { "mode": "listed", "entries": ["@kerfjs/ui:toolbar"] },
+      "parents": {
+        "mode": "listed",
+        "entries": ["@kerfjs/ui:toolbar", "@kerfjs/ui:floating-toolbar"]
+      },
       "contexts": ["toolbar-zone"],
       "zones": [
         {
@@ -1794,6 +1808,11 @@
           "id": "document heading hierarchy",
           "owner": "application",
           "required": false
+        },
+        {
+          "id": "FieldLabel copy, preview/edit state, and aria-labelledby association",
+          "owner": "application",
+          "required": false
         }
       ],
       "wiring": {
@@ -1810,7 +1829,7 @@
           "border": "self",
           "padding": "self",
           "notes": [
-            "Block Text variants reset native margins and add a 1px transparent border plus the standard 8px item padding; flush removes the border and padding. Tight line height is available for compact copy. Span has no margin, border, or padding."
+            "Block Text variants reset native margins and add a 1px transparent border plus the standard 8px item padding; flush removes the border and padding. Tight line height is available for compact copy. Span has no margin, border, or padding. FieldLabel mirrors the themed Web Awesome label typography, 9px inline inset, and bottom gap."
           ]
         }
       },
@@ -1818,13 +1837,14 @@
         "obligations": [
           "Text renders a native paragraph by default; choose an h1 through h6 variant by document outline rather than appearance, or span for inline secondary text.",
           "Ordinary global, data, and ARIA attributes pass through to the native element.",
-          "Choose tone, size, and font independently of the heading level so appearance does not distort the document outline."
+          "Choose tone, size, and font independently of the heading level so appearance does not distort the document outline.",
+          "FieldLabel is plain text, not a native label; give it an id and associate the preview group with aria-labelledby."
         ]
       },
       "cssValueProps": [],
       "boundaries": {
         "rootClass": "kui-text",
-        "publicClasses": ["kui-text"],
+        "publicClasses": ["kui-text", "kui-text__field-label"],
         "publicTokens": [
           "--kui-color-danger-on-quiet",
           "--kui-color-text-quiet",
@@ -2088,7 +2108,8 @@
       },
       "accessibility": {
         "obligations": [
-          "Grid adds layout only and no grid role; children retain responsibility for native or ARIA semantics.",
+          "Grid adds no role by default; selectionMode=multiple requires ariaLabel and supplies a multi-select grid for ContentItem row/gridcell tiles.",
+          "wireContentItems uses rendered tile positions for Left/Right/Up/Down and reaches the first or last tile with Home/End.",
           "Responsive column-count changes preserve source and focus order."
         ]
       },

package/ai/components/grid.md

@@ -47,6 +47,7 @@ Exact prop names and types: [`@kerfjs/ui/grid`](../public-api-signatures-v1.md#k
 - boolean, finite-keyword, or typed CssFlex flex
 - fill: the layout root fills a definite-height parent
 - rootAttributes: safe data-\* metadata on the root
+- selectionMode=multiple: labeled multi-select grid for ContentItem tiles
 
 **CSS-value props** (typed builders from `@kerfjs/ui/css-values`; raw CSS strings are rejected):
 
@@ -74,7 +75,8 @@ Margin: none · border: none · padding: none (layout role: structure). `self` m
 
 ## Accessibility
 
-- Grid adds layout only and no grid role; children retain responsibility for native or ARIA semantics.
+- Grid adds no role by default; selectionMode=multiple requires ariaLabel and supplies a multi-select grid for ContentItem row/gridcell tiles.
+- wireContentItems uses rendered tile positions for Left/Right/Up/Down and reaches the first or last tile with Home/End.
 - Responsive column-count changes preserve source and focus order.
 
 ## Styling boundary

package/ai/components/nav-stack.md

@@ -43,6 +43,7 @@ Exact prop names and types: [`@kerfjs/ui/nav-stack`](../public-api-signatures-v1
 - configured top toolbar
 - custom back icon or visible back text
 - per-view bottom toolbar
+- persistent final top-toolbar group (panelToggle) when embedded in a Workbench panel
 - persistent bottom-toolbar fallback
 - chrome and bottom-toolbar dividers only while the active view scrolls beneath them (wired by wireScrollDividers)
 - permanent or no chrome dividers (chromeDividers always or none)
@@ -56,7 +57,7 @@ Exact prop names and types: [`@kerfjs/ui/nav-stack`](../public-api-signatures-v1
 
 ## State and wiring
 
-**The app owns:** ordered view stack and stable keys; view content and titles; push and pop actions; preferred initial focus targets when DOM order is insufficient; per-view bottom toolbar content or a persistent fallback; per-view leading, center, and trailing top-toolbar groups; top-toolbar configuration, title size, and heading level; whether the chrome and bottom-toolbar dividers follow the scroll, always show, or never show (chromeDividers).
+**The app owns:** ordered view stack and stable keys; view content and titles; push and pop actions; preferred initial focus targets when DOM order is insufficient; per-view bottom toolbar content or a persistent fallback; per-view leading, center, and trailing top-toolbar groups; per-view fixed header content above the active view's scroll area; top-toolbar configuration, title size, and heading level; whether the chrome and bottom-toolbar dividers follow the scroll, always show, or never show (chromeDividers).
 
 **Wiring:** `wireNavStack`, `wireScrollDividers` is required.
 
@@ -88,9 +89,9 @@ Margin: none · border: conditional · padding: child (layout role: structure).
 
 The component owns its own styles. Configure it through its props and variants; do not override its internals.
 
-Public class hooks (select for layout placement only, never to change the component's look): `kui-nav-stack`, `kui-nav-stack__chrome`, `kui-nav-stack__bottom`, `kui-nav-stack__chrome--entering`, `kui-nav-stack__chrome-copy`, `kui-nav-stack__chrome-copy--bottom`, `kui-nav-stack__chrome-copy--exiting`, `kui-nav-stack__viewport`, `kui-nav-stack__view`, `kui-nav-stack__view--entering`, `kui-nav-stack__view--exiting`.
+Public class hooks (select for layout placement only, never to change the component's look): `kui-nav-stack`, `kui-nav-stack__chrome`, `kui-nav-stack__bottom`, `kui-nav-stack__chrome--entering`, `kui-nav-stack__chrome-copy`, `kui-nav-stack__chrome-copy--bottom`, `kui-nav-stack__chrome-copy--exiting`, `kui-nav-stack__header`, `kui-nav-stack__viewport`, `kui-nav-stack__view`, `kui-nav-stack__view--entering`, `kui-nav-stack__view--exiting`.
 
-Never put `kui-nav-stack`, `kui-nav-stack__chrome`, `kui-nav-stack__bottom`, `kui-nav-stack__chrome--entering`, `kui-nav-stack__chrome-copy`, `kui-nav-stack__chrome-copy--bottom`, `kui-nav-stack__chrome-copy--exiting`, `kui-nav-stack__viewport`, `kui-nav-stack__view`, `kui-nav-stack__view--entering`, `kui-nav-stack__view--exiting` on an element you write; render `NavStack` instead (`KUI-L103`).
+Never put `kui-nav-stack`, `kui-nav-stack__chrome`, `kui-nav-stack__bottom`, `kui-nav-stack__chrome--entering`, `kui-nav-stack__chrome-copy`, `kui-nav-stack__chrome-copy--bottom`, `kui-nav-stack__chrome-copy--exiting`, `kui-nav-stack__header`, `kui-nav-stack__viewport`, `kui-nav-stack__view`, `kui-nav-stack__view--entering`, `kui-nav-stack__view--exiting` on an element you write; render `NavStack` instead (`KUI-L103`).
 
 Public tokens it reads: `--kui-nav-stack-transition-duration`. Set a token only where its public contract allows; prefer a prop.
 

package/ai/components/text.md

@@ -4,13 +4,14 @@
 
 `@kerfjs/ui:text` · Kerf UI · component · Structure
 
-Semantic native paragraph text by default, with heading and inline-span variants plus composable semantic presentation roles.
+Semantic native text plus a FieldLabel heading for read-only field previews that matches themed Web Awesome form labels.
 
 ## When to use
 
 Render paragraph semantics by default, h1 through h6 when selected, or geometry-free inline secondary text as a span while independently configuring quiet or danger tone, compact through extra-large size, or monospace font.
 
 - Render ordinary application headings or paragraphs with native document semantics, or inline secondary text inside rows, labels, and table cells.
+- Render FieldLabel over a read-only or click-to-edit preview that replaces a Web Awesome form control.
 
 **Not when:**
 
@@ -24,7 +25,7 @@ Render paragraph semantics by default, h1 through h6 when selected, or geometry-
 
 ## Imports
 
-- JavaScript: `@kerfjs/ui/text` — exports `Text`.
+- JavaScript: `@kerfjs/ui/text` — exports `Text`, `FieldLabel`.
 - CSS: the browser build of `@kerfjs/ui/text` pulls its CSS automatically; import `@kerfjs/ui/text.css` manually only without the `browser` export condition.
 - Declared side effects: browser-condition-css.
 
@@ -48,7 +49,7 @@ Exact prop names and types: [`@kerfjs/ui/text`](../public-api-signatures-v1.md#k
 
 ## State and wiring
 
-**The app owns:** semantic variant; tone; size; font; copy; document heading hierarchy.
+**The app owns:** semantic variant; tone; size; font; copy; document heading hierarchy; FieldLabel copy, preview/edit state, and aria-labelledby association.
 
 No wiring helper.
 
@@ -56,21 +57,22 @@ No wiring helper.
 
 Margin: none · border: self · padding: self (layout role: structure). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
 
-- Block Text variants reset native margins and add a 1px transparent border plus the standard 8px item padding; flush removes the border and padding. Tight line height is available for compact copy. Span has no margin, border, or padding.
+- Block Text variants reset native margins and add a 1px transparent border plus the standard 8px item padding; flush removes the border and padding. Tight line height is available for compact copy. Span has no margin, border, or padding. FieldLabel mirrors the themed Web Awesome label typography, 9px inline inset, and bottom gap.
 
 ## Accessibility
 
 - Text renders a native paragraph by default; choose an h1 through h6 variant by document outline rather than appearance, or span for inline secondary text.
 - Ordinary global, data, and ARIA attributes pass through to the native element.
 - Choose tone, size, and font independently of the heading level so appearance does not distort the document outline.
+- FieldLabel is plain text, not a native label; give it an id and associate the preview group with aria-labelledby.
 
 ## Styling boundary
 
 The component owns its own styles. Configure it through its props and variants; do not override its internals.
 
-Public class hooks (select for layout placement only, never to change the component's look): `kui-text`.
+Public class hooks (select for layout placement only, never to change the component's look): `kui-text`, `kui-text__field-label`.
 
-Never put `kui-text` on an element you write; render `Text` instead (`KUI-L103`).
+Never put `kui-text`, `kui-text__field-label` on an element you write; render `Text` instead (`KUI-L103`).
 
 Public tokens it reads: `--kui-color-danger-on-quiet`, `--kui-color-text-quiet`, `--kui-font-2xl`, `--kui-font-l`, `--kui-font-mono`, `--kui-font-xs`, `--kui-layout-item-padding`. Set a token only where its public contract allows; prefer a prop.
 

package/ai/components/toolbar-control-group.md

@@ -57,7 +57,7 @@ Exact prop names and types: [`@kerfjs/ui/toolbar-control-group`](../public-api-s
 
 ## Composition
 
-- Parents: only inside [Toolbar](./toolbar.md).
+- Parents: only inside [Toolbar](./toolbar.md) or [FloatingToolbar](./floating-toolbar.md).
 - Contexts: `toolbar-zone`.
 - Children: only `control` (required: `control`).
 - Built from: [LucideIcon](./lucide-icon.md), [SegmentedControl](./segmented-control.md).

package/ai/components/workbench.md

@@ -25,7 +25,7 @@ Arrange a complex tool or editor as a stable central work area with optional per
 
 ## Imports
 
-- JavaScript: `@kerfjs/ui/workbench` — exports `Workbench`, `WorkbenchChromePlacement`, `WorkbenchCompactOverlay`, `WorkbenchMainBottomToolbar`, `WorkbenchMainToolbar`, `WorkbenchPanel`, `WorkbenchPanelResizable`, `WorkbenchPanelToggle`, `WorkbenchPanelToolbar`, `WorkbenchProps`, `WorkbenchResponsiveOverlayAt`.
+- JavaScript: `@kerfjs/ui/workbench` — exports `Workbench`, `WorkbenchChromePlacement`, `WorkbenchCompactOverlay`, `WorkbenchMainBottomToolbar`, `WorkbenchMainToolbar`, `WorkbenchPanel`, `WorkbenchStaticPanel`, `WorkbenchNavigationPanel`, `WorkbenchPanelResizable`, `WorkbenchPanelToggle`, `WorkbenchPanelToolbar`, `WorkbenchProps`, `WorkbenchResponsiveOverlayAt`.
 - CSS: the browser build of `@kerfjs/ui/workbench` pulls its CSS automatically; import `@kerfjs/ui/workbench.css` manually only without the `browser` export condition.
 - Wiring: `wireWorkbench` from `@kerfjs/ui/wire-workbench` (optional).
 - Wiring: `wireScrollDividers` from `@kerfjs/ui/wire-scroll-dividers` (optional).
@@ -43,6 +43,7 @@ Exact prop names and types: [`@kerfjs/ui/workbench`](../public-api-signatures-v1
 - bottom drawer
 - all panels
 - independently collapsed panels
+- navigation panel with per-screen toolbar, fixed header, and one scroll owner; standard toggle remains last and relocates while collapsed
 - opt-in drag and keyboard resizable panels with min/max limits
 - resizable rails that leave the work area a minimum width and shrink in proportion when the Workbench narrows
 - rails or a drawer that present as overlays below a narrow or compact Workbench container breakpoint
@@ -60,6 +61,7 @@ Exact prop names and types: [`@kerfjs/ui/workbench`](../public-api-signatures-v1
 - Parents: any.
 - Contexts: `desktop-application-shell`.
 - Children: unrestricted.
+- Built from: [NavStack](./nav-stack.md).
 
 Zones (a zone is bound to JSX only through its listed prop; never assume the zone id is a prop):
 
@@ -70,7 +72,7 @@ Zones (a zone is bound to JSX only through its listed prop; never assume the zon
 
 ## State and wiring
 
-**The app owns:** panel presence and content; collapsed state; panel sizes; responsive replacement below desktop; collapse controls and focus policy.
+**The app owns:** panel presence and content; collapsed state; panel sizes; navigation panel view stack and push/pop actions when navStack is supplied; responsive replacement below desktop; collapse controls and focus policy.
 
 **Wiring:** `wireWorkbench`, `wireScrollDividers` is optional.
 
@@ -111,6 +113,6 @@ Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-
 
 ## Related
 
-- Components: [Pane](./pane.md).
+- Components: [NavStack](./nav-stack.md), [Pane](./pane.md).
 - Docs: [`docs/workbench.md`](../../docs/workbench.md), [`docs/workbench.md#state-lives-in-the-app`](../../docs/workbench.md#state-lives-in-the-app).
 - UX catalog route: `?component=workbench`.

package/ai/public-api-signatures-v1.md

@@ -1,6 +1,6 @@
 # Public API signatures for the UI authoring corpus
 
-Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.65` and `kerfjs@5.0.0-beta.65`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
+Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.67` and `kerfjs@5.0.0-beta.67`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
 
 ## `@kerfjs/ui/css-values`
 
@@ -1250,6 +1250,8 @@ interface NavStackView {
     center?: KerfUiContent;
     /** Trailing actions for this view's top toolbar. */
     toolbar?: KerfUiContent;
+    /** Fixed chrome below this view's toolbar, above its scrolling content. */
+    header?: KerfUiContent;
     /** Bottom toolbar for this view. Cross-fades with the top chrome on navigation. */
     bottomToolbar?: KerfUiContent;
 }
@@ -1284,6 +1286,8 @@ interface NavStackProps {
     backText?: string;
     /** The top toolbar's configuration, forwarded to its `Toolbar`. */
     toolbarConfig?: NavStackToolbarConfig;
+    /** Persistent last group in every view's top toolbar, supplied by a hosting panel. */
+    panelToggle?: KerfUiContent;
     /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */
     hideToolbar?: boolean;
     /** Optional persistent bottom toolbar used when the active view does not provide one. */
@@ -1312,7 +1316,7 @@ interface NavStackProps {
  * content fills the zones, and `toolbarConfig` configures it. A single-pane
  * layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.
  */
-declare function NavStack({ id, label, views, backLabel, backIcon, backText, toolbarConfig, hideToolbar, bottomToolbar, chromeDividers, className, slot, }: NavStackProps): kerfjs.SafeHtml;
+declare function NavStack({ id, label, views, backLabel, backIcon, backText, toolbarConfig, panelToggle, hideToolbar, bottomToolbar, chromeDividers, className, slot, }: NavStackProps): kerfjs.SafeHtml;
 
 export { NavStack, type NavStackProps, type NavStackToolbarConfig, type NavStackView };
 ```
@@ -1537,14 +1541,16 @@ export { Pane, type PaneAppearance, type PaneChromeDividers, type PaneChromePlac
 ```ts
 import { SafeHtml } from 'kerfjs';
 import { ListConfig } from './list.js';
+import { NavStackProps } from './nav-stack.js';
 import { PaneConfig } from './pane.js';
 import { ResizableRegionSeparator, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionPresentation, ResizableRegionRestorePosition } from './resizable-region.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
-import { a as PanelToolbar, b as PanelChromePlacement, c as PanelBottomToolbar, d as PanelToggle } from './panel-toolbar-DDKh4uKd.js';
 import { ToolbarConfig } from './toolbar.js';
+import { a as PanelToolbar, b as PanelChromePlacement, c as PanelBottomToolbar, d as PanelToggle } from './panel-toolbar-DDKh4uKd.js';
 import './css-values.js';
 import './flex-alignment-4ms8ZbV8.js';
 import './sides-BPSWde0A.js';
+import './toolbar-text.js';
 import './lucide-icon.js';
 import 'lucide';
 
@@ -1617,37 +1623,8 @@ interface WorkbenchPanelResizable {
     /** Largest size (default 480). */
     max?: number;
 }
-/** A collapsible Workbench panel — a side rail or the bottom drawer. */
-interface WorkbenchPanel {
-    content: KerfUiContent;
-    /**
-     * The panel's top toolbar, composed by the Workbench: its marked groups
-     * and standard `toggle` move to the work area's toolbar while the panel is
-     * collapsed. With it, `content` renders in a `Pane` below the toolbar.
-     */
-    toolbar?: WorkbenchPanelToolbar;
-    /** Fixed content below a toolbar panel's top toolbar, above its scroll region. */
-    header?: KerfUiContent;
-    /** List layout for `header`; omitted fields keep List defaults. */
-    headerList?: ListConfig;
-    /** Placement of the top toolbar and header together; default `fixed`. */
-    headerPlacement?: WorkbenchChromePlacement;
-    /** Fixed content above a toolbar panel's bottom toolbar. */
-    footer?: KerfUiContent;
-    /** List layout for `footer`; omitted fields keep List defaults. */
-    footerList?: ListConfig;
-    /** Fixed toolbar below `footer`, using footer semantics. */
-    bottomToolbar?: WorkbenchPanelBottomToolbar;
-    /** Placement of the footer and bottom toolbar together; default `fixed`. */
-    footerPlacement?: WorkbenchChromePlacement;
-    /**
-     * Configuration for a `toolbar` panel's `Pane` (`contentElement`,
-     * `contentLabel`, `separators`, `safeAreaEdges`, `chromeDividers`) — for example
-     * `{ contentElement: 'nav', contentLabel: 'Sections' }` for a navigation
-     * rail. Omitted or `undefined` fields keep the `Pane` defaults. Ignored
-     * without a `toolbar`, where `content` renders as given.
-     */
-    pane?: PaneConfig;
+/** Region sizing, collapse, and presentation shared by either panel body. */
+interface WorkbenchPanelBase {
     /** Whether the panel is currently collapsed (the app owns this). */
     collapsed?: boolean;
     /**
@@ -1694,6 +1671,41 @@ interface WorkbenchPanel {
     restoreControl?: SafeHtml;
     restorePosition?: ResizableRegionRestorePosition;
 }
+/** The original static panel body: one toolbar, optional fixed chrome, and one Pane. */
+interface WorkbenchStaticPanel extends WorkbenchPanelBase {
+    content: KerfUiContent;
+    /** The composed toolbar; marked groups and its toggle relocate on collapse. */
+    toolbar?: WorkbenchPanelToolbar;
+    header?: KerfUiContent;
+    headerList?: ListConfig;
+    headerPlacement?: WorkbenchChromePlacement;
+    footer?: KerfUiContent;
+    footerList?: ListConfig;
+    bottomToolbar?: WorkbenchPanelBottomToolbar;
+    footerPlacement?: WorkbenchChromePlacement;
+    /** Configuration for the static toolbar panel's Pane. */
+    pane?: PaneConfig;
+    navStack?: never;
+}
+/** A panel whose active NavStack view supplies the toolbar, fixed header, and scroll body. */
+interface WorkbenchNavigationPanel extends WorkbenchPanelBase {
+    navStack: Omit<NavStackProps, 'panelToggle' | 'hideToolbar' | 'className' | 'slot'>;
+    /** Supplies the standard toggle; active view groups precede it and may relocate on collapse. */
+    toolbar: Omit<WorkbenchPanelToolbar, 'title' | 'leading' | 'center' | 'trailing'> & {
+        toggle: NonNullable<WorkbenchPanelToolbar['toggle']>;
+    };
+    content?: never;
+    header?: never;
+    headerList?: never;
+    headerPlacement?: never;
+    footer?: never;
+    footerList?: never;
+    bottomToolbar?: never;
+    footerPlacement?: never;
+    pane?: never;
+}
+/** A collapsible Workbench side rail or bottom drawer. */
+type WorkbenchPanel = WorkbenchStaticPanel | WorkbenchNavigationPanel;
 interface WorkbenchProps {
     /**
      * The Workbench's `id`. Each panel's `id` derives from it —
@@ -1794,7 +1806,7 @@ interface WorkbenchProps {
  */
 declare function Workbench({ id, label, main, leftRail, rightRail, bottomDrawer, mainToolbar, mainHeader, mainFooter, mainBottomToolbar, mainHeaderPlacement, mainFooterPlacement, mainPane, mainHeaderList, mainFooterList, mainMinSize, mainMinHeight, overlayBackdrop, className, slot, }: WorkbenchProps): SafeHtml;
 
-export { Workbench, type WorkbenchChromePlacement, type WorkbenchCompactOverlay, type WorkbenchMainBottomToolbar, type WorkbenchMainToolbar, type WorkbenchPanel, type WorkbenchPanelBottomToolbar, type WorkbenchPanelResizable, type WorkbenchPanelToggle, type WorkbenchPanelToolbar, type WorkbenchProps, type WorkbenchResponsiveOverlayAt };
+export { Workbench, type WorkbenchChromePlacement, type WorkbenchCompactOverlay, type WorkbenchMainBottomToolbar, type WorkbenchMainToolbar, type WorkbenchNavigationPanel, type WorkbenchPanel, type WorkbenchPanelBottomToolbar, type WorkbenchPanelResizable, type WorkbenchPanelToggle, type WorkbenchPanelToolbar, type WorkbenchProps, type WorkbenchResponsiveOverlayAt, type WorkbenchStaticPanel };
 ```
 
 ## `@kerfjs/ui/wire-workbench`
@@ -2385,6 +2397,8 @@ import './workbench.js';
 import './list.js';
 import './css-values.js';
 import './flex-alignment-4ms8ZbV8.js';
+import './nav-stack.js';
+import './toolbar-text.js';
 import './resizable-region.js';
 import './panel-toolbar-DDKh4uKd.js';
 import './lucide-icon.js';
@@ -2478,6 +2492,8 @@ import './workbench.js';
 import './list.js';
 import './css-values.js';
 import './flex-alignment-4ms8ZbV8.js';
+import './nav-stack.js';
+import './toolbar-text.js';
 import './resizable-region.js';
 import './panel-toolbar-DDKh4uKd.js';
 import './lucide-icon.js';
@@ -3285,6 +3301,13 @@ type TextBorder = 'transparent' | 'none';
 type TextLineHeight = 'default' | 'tight';
 type TextWrap = 'normal' | 'anywhere' | 'nowrap' | 'truncate';
 type TextContent = KerfUiContent | string | number | readonly TextContent[];
+type FieldLabelProps = Omit<KerfBaseAttrs, 'children' | 'class' | 'className'> & {
+    children: string;
+    class?: string;
+    className?: string;
+};
+/** Visible field heading for a read-only preview; use its id with aria-labelledby on the preview group. */
+declare function FieldLabel({ children, class: classValue, className, ...attributes }: FieldLabelProps): kerfjs.SafeHtml;
 type TextCommonProps = Omit<KerfBaseAttrs, 'children' | 'class' | 'className'> & {
     /** Native heading, paragraph, or inline span element to render. Defaults to `p`. */
     variant?: TextVariant;
@@ -3321,7 +3344,7 @@ type TextProps = TextCommonProps & ({
  */
 declare function Text({ variant: Variant, tone, size, font, border, flush, lineHeight, wrap, maxLines, children, class: classValue, className, ...attributes }: TextProps): kerfjs.SafeHtml;
 
-export { Text, type TextBorder, type TextContent, type TextFont, type TextLineHeight, type TextProps, type TextSize, type TextTone, type TextVariant, type TextWrap };
+export { FieldLabel, type FieldLabelProps, Text, type TextBorder, type TextContent, type TextFont, type TextLineHeight, type TextProps, type TextSize, type TextTone, type TextVariant, type TextWrap };
 ```
 
 ## `@kerfjs/ui/row`
@@ -3394,6 +3417,10 @@ type GridRootAttributes = Readonly<Record<`data-${string}`, string | undefined>
 }>;
 interface GridCommonProps {
     children?: KerfUiContent;
+    /** Make this a labeled multi-select grid for `ContentItem selectionMode="multiple"` tiles. */
+    selectionMode?: 'multiple';
+    /** Accessible name for the multi-select grid. */
+    ariaLabel?: string;
     /** A named UI spacing token or typed CSS length. Defaults to xs. */
     gap?: UiSpaceName | CssLength;
     /** Allow this grid to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */
@@ -3423,7 +3450,7 @@ type GridProps = GridCommonProps & ({
     autoFill?: boolean;
 });
 /** Render equal tracks with a fixed count or a responsive minimum width. */
-declare function Grid({ children, columns, minColumnWidth, autoFill, gap, flex, fill, className, rootAttributes, slot, }: GridProps): kerfjs.SafeHtml;
+declare function Grid({ children, selectionMode, ariaLabel, columns, minColumnWidth, autoFill, gap, flex, fill, className, rootAttributes, slot, }: GridProps): kerfjs.SafeHtml;
 
 export { CssFlex, CssFlexKeyword, CssLength, Grid, type GridProps, UiSpaceName };
 ```

package/ai/skill.md

@@ -160,6 +160,10 @@ For equal-width responsive forms, set `Grid minColumnWidth={px(376)}` instead of
 `columns`. Grid fits tracks from its own container width and collapses to one
 when a second minimum-width track plus the gap no longer fits. Constrain the
 outer Grid width when the form should have a maximum column count.
+For selectable document tiles, set `Grid selectionMode="multiple"` and
+`ariaLabel`, render `ContentItem selectionMode="multiple"` children, and wire
+`wireContentItems` for arrows, Home/End, and card activation. The app owns the
+selection set and each tile's nested controls.
 
 For a complete shell, sidebar, workspace header, list-detail dialog, composer
 form, list-state lifecycle, or mixed-control toolbar, start from the runnable
@@ -242,6 +246,8 @@ Set `--kui-toolbar-inset: 0px` on an embedded Toolbar to remove its outer paddin
 
 For compact dialog copy, use `Text flush lineHeight="tight"`; for compact metadata, use `ValueTable density="compact"` and its public row columns/padding/gap tokens. `ToolbarText size="xsmall"` fits a dense rail heading. A `TokenSearchField` editor shrinks inside a narrow group by default; set `--kui-token-search-editor-min-width` when a minimum is needed. A full-height shell uses the one `.kui-app-root` mount container documented in `docs/document-baseline.md`.
 
+For a read-only field preview that replaces a Web Awesome input, use `FieldLabel` from `@kerfjs/ui/text` above the preview. Put it in `ListInsetControl sides="trl"` beside a `ContentItem` value; give it an id and use `aria-labelledby` on the preview group. The app owns preview/edit state and hint copy.
+
 Common mistakes:
 
 | Mistake                                                                                                                           | Fix                                                                                                                                                                                                                                                                                           |

package/ai/webawesome-jsx-signatures-v1.md

@@ -1,6 +1,6 @@
 # Web Awesome JSX signatures for the UI authoring corpus
 
-Generated from the emitted `@kerfjs/ui@5.0.0-beta.65` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
+Generated from the emitted `@kerfjs/ui@5.0.0-beta.67` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
 
 ```ts
 import { KerfCustomElement } from 'kerfjs/jsx-runtime';