@kerfjs/ui 5.0.0-beta.78 → 5.0.0-beta.79

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.78` and `kerfjs@5.0.0-beta.78`. 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.79` and `kerfjs@5.0.0-beta.79`. 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`
 
@@ -1238,7 +1238,7 @@ interface WireScrollDividersOptions {
     /**
      * App-owned scroll arrangements to pair beyond the ones found by structure
      * (every `Pane`'s header and footer around its content, every `NavStack`'s
-     * and `TabScaffold`'s chrome around its active region, and every `TabBar`
+     * and `TabNavigator`'s chrome around its active region, and every `TabBar`
      * strip).
      */
     targets?: readonly ScrollDividerTarget[];
@@ -1258,11 +1258,11 @@ type Root = HTMLElement | Document;
  * - every `Pane` with a header or footer: its header shows a bottom divider and
  *   its footer a top divider (drawn by the Pane, per its `chromeDividers`);
  * - every `NavStack`'s top chrome and bottom toolbar around its active view,
- *   and every `TabScaffold`'s bar under its active scene: the chrome shows a
+ *   and every `TabNavigator`'s bar under its active scene: the chrome shows a
  *   bottom (top chrome) or top (bottom toolbar, bar) divider. The scroller is
  *   whichever element actually scrolls there: the view or scene itself, or,
  *   through a sole child with no chrome of its own on that edge, a `Pane`'s
- *   content or a nested `NavStack` / `TabScaffold` region (a Pane's own header
+ *   content or a nested `NavStack` / `TabNavigator` region (a Pane's own header
  *   or footer draws that boundary instead);
  * - every `TabBar` strip: the bar draws a divider on each side of the strip
  *   whose tabs are scrolled out of view;
@@ -2115,14 +2115,14 @@ declare function wireSidebar(root: HTMLElement, { panels, deviceClass, compactPr
 export { type SidebarStorage, type WireSidebarOptions, type WireSidebarPanel, wireSidebar };
 ```
 
-## `@kerfjs/ui/tab-scaffold`
+## `@kerfjs/ui/tab-navigator`
 
 ```ts
 import { SafeHtml } from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 import { PaneAppearance } from './pane.js';
 
-interface TabScaffoldTabBase<Id extends string> {
+interface TabNavigatorTabBase<Id extends string> {
     id: Id;
     label: string;
     /** Decorative icon shown above the label in the bottom bar. */
@@ -2135,7 +2135,7 @@ interface TabScaffoldTabBase<Id extends string> {
     deepInset?: boolean;
 }
 /** A tab with an optional count or short-status badge. */
-interface TabScaffoldTabCountBadge {
+interface TabNavigatorTabCountBadge {
     /**
      * Optional count or short status shown as a solid danger `Badge` at the
      * top-trailing corner of the tab icon (the iOS tab-bar badge). Omitted, `''`,
@@ -2153,7 +2153,7 @@ interface TabScaffoldTabCountBadge {
     badgeLabel?: string;
 }
 /** A tab with the text-free dot badge (new content without a count). */
-interface TabScaffoldTabDotBadge {
+interface TabNavigatorTabDotBadge {
     /**
      * `true` shows a solid danger dot `Badge` at the top-trailing corner of the
      * tab icon — the iOS tab-bar dot for new content without a count.
@@ -2167,12 +2167,12 @@ interface TabScaffoldTabDotBadge {
     badgeLabel: string;
 }
 /** One bottom-bar destination: its label, optional icon and badge, and content. */
-type TabScaffoldTab<Id extends string = string> = TabScaffoldTabBase<Id> & (TabScaffoldTabCountBadge | TabScaffoldTabDotBadge);
-interface TabScaffoldProps<Id extends string = string> {
+type TabNavigatorTab<Id extends string = string> = TabNavigatorTabBase<Id> & (TabNavigatorTabCountBadge | TabNavigatorTabDotBadge);
+interface TabNavigatorProps<Id extends string = string> {
     id: string;
     /** Accessible name for the tab bar. */
     label: string;
-    tabs: readonly TabScaffoldTab<Id>[];
+    tabs: readonly TabNavigatorTab<Id>[];
     /** The controlled active tab id (the app owns selection). */
     active: NoInfer<Id>;
     /**
@@ -2190,32 +2190,32 @@ interface TabScaffoldProps<Id extends string = string> {
     slot?: string;
 }
 /**
- * A mobile-first, iOS-like bottom tab scaffold: a bottom tab bar that switches
+ * A mobile-first, iOS-like bottom tab navigator: a bottom tab bar that switches
  * between major sections, each tab keeping its own content (usually a `NavStack`)
  * mounted so its stack and scroll survive a switch. Controlled — the app owns
- * `active`; wire selection with `@kerfjs/ui/wire-tab-scaffold`'s `wireTabScaffold`.
+ * `active`; wire selection with `@kerfjs/ui/wire-tab-navigator`'s `wireTabNavigator`.
  * On larger classes, promote the tabs to a `Workbench` rail or sidebar instead of
  * a bottom bar. See `docs/23-app-layouts.md` §3.4.
  */
-declare function TabScaffold<Id extends string>({ id, label, tabs, active, chromeDividers, className, slot, }: TabScaffoldProps<Id>): SafeHtml;
+declare function TabNavigator<Id extends string>({ id, label, tabs, active, chromeDividers, className, slot, }: TabNavigatorProps<Id>): SafeHtml;
 
-export { TabScaffold, type TabScaffoldProps, type TabScaffoldTab };
+export { TabNavigator, type TabNavigatorProps, type TabNavigatorTab };
 ```
 
-## `@kerfjs/ui/wire-tab-scaffold`
+## `@kerfjs/ui/wire-tab-navigator`
 
 ```ts
-interface WireTabScaffoldOptions {
+interface WireTabNavigatorOptions {
     /** Invoked with the selected tab id when a bottom-bar tab is activated. */
     onSelect: (tabId: string) => void;
 }
 /**
- * Wire a `TabScaffold`'s bottom tab bar: clicking a tab calls `onSelect` with its
+ * Wire a `TabNavigator`'s bottom tab bar: clicking a tab calls `onSelect` with its
  * id (the app then updates its controlled `active`). Returns a disposer.
  */
-declare function wireTabScaffold(root: Element, options: WireTabScaffoldOptions): () => void;
+declare function wireTabNavigator(root: Element, options: WireTabNavigatorOptions): () => void;
 
-export { type WireTabScaffoldOptions, wireTabScaffold };
+export { type WireTabNavigatorOptions, wireTabNavigator };
 ```
 
 ## `@kerfjs/ui/resizable-region`

package/ai/skill.md

@@ -253,8 +253,8 @@ Hard rules:
     15a. Use `Text` from `@kerfjs/ui/text` for ordinary headings, paragraphs, and inline secondary text outside toolbar title zones. Omit `variant` for the default `p`, pass `h1`–`h6` according to the document outline, or use `variant="span"` inside a row, label, or table cell; ordinary native attributes pass through. Express supporting, error, compact, or code text with the independent finite `tone="quiet|danger"`, `size="compact"`, and `font="monospace"` props instead of global utility classes or appearance-only heading choices. Block Text variants own a transparent 1px border and the standard item padding; `span` owns no box geometry. Keep toolbar identity/title content on `ToolbarText` and list-aligned bare prose on `ListInsetText`. `ToolbarText` below `xlarge` is intentionally quiet identity text in default tone; a normal-color subsection title is `Text` with an `h2`–`h6` variant (or `ListHeader` for a list or menu section), never a recolored `ToolbarText`. Use `controlMargins` with canonical physical Sides for an exterior 8px control gutter without a Row wrapper; avoid stacking parent insets, and remember spans retain native inline margin behavior.
 
 16. Keep a visible collapsible pane's collapse control in its own toolbar. When hidden, move its restore control into the adjacent main toolbar on the corresponding logical edge: leading for an inline-start sidebar and trailing for an inline-end inspector. Collapse the pane completely; do not preserve an empty icon-only rail.
-    16a. Dividers between pinned chrome and scrolling content are component chrome: a `Toolbar` draws none by default (`dividerSides` is for a permanent edge only). Call `wireScrollDividers(appRoot)` from `@kerfjs/ui/wire-scroll-dividers` once and retain its disposer; a plain `Pane` with `chromeDividers="scroll"` draws the line under its header only while content is scrolled beneath it and over its footer only while more content lies below (never when the content fits), every `NavStack`'s top chrome and bottom toolbar and every `TabScaffold` bar do the same around the active view or scene (keyed on whatever actually scrolls there, including a sole `Pane`'s content), and every `TabBar` marks each side of its strip with tabs scrolled out of view. Configure a pane with `chromeDividers` (`scroll` by default for plain panes, `always` by default for sunken panes, or explicit `scroll`, `always`, `none`, also via `PaneConfig`); `always` draws both lines even when content fits. A `NavStack` or `TabScaffold` has its own `chromeDividers` (same values: `always` draws the chrome lines without the wiring, `none` never, even when wired; a `SplitView` forwards it through `compactStack`); a `toolbarConfig.dividerSides` edge stays the Toolbar's own. Name app-owned chrome by id in `targets`. The wiring writes only `data-scroll-overflow` / `data-scroll-divider` state; never write a border onto a component to show a divider.
-17. The direct children of a `Toolbar` zone are `ToolbarText` (identity/title text) and `ToolbarControlGroup`; `trailing` also accepts one standalone primary `wa-button` that keeps its own Web Awesome chrome. Never drop other bare buttons, inputs, links, or arbitrary markup straight into a zone. Put identity/title text directly in the zone as `ToolbarText`; wrap interactive controls and icon tiles in `ToolbarControlGroup`. `SegmentedControl`, `Select`, a collapsible `TokenSearchField`, and other Web Awesome controls live inside a group. Configure zone behavior with `Toolbar.centerAlign` and its `responsive` / `responsiveAt` policy instead of selecting toolbar zone classes. No policy clips an action: trailing (and stacked center) zones wrap whole groups onto another row, and the center zone never compresses below its content (a leading title too long for the row truncates with an ellipsis instead), so never hide or shrink a toolbar control to make it fit; use `responsive="wrap"` for a heading whose title must stay whole, and move genuinely lower-priority commands into an app-owned "More" popup menu. For an ordinary icon/action control inside a group, use a plain `<button>` (the group styles `> button` fully) — that is the default; reach for `wa-button` only when you need a Web Awesome feature. A popup menu in a toolbar is a `PopupMenu` (`@kerfjs/ui/popup-menu`, registered once via `@kerfjs/ui/popup-menu/register`) in a `single` group with `nestedDropdown` and a `menuInset`: give it typed `items` (commands with `action`s, `heading`s, `divider`s) and a trigger `icon` plus visible `text` or an accessible `label`; never hand-write `wa-dropdown` / `wa-dropdown-item` markup for a menu. Let the group size that trigger from its icon, localized text, and caret; do not force a width on the menu or button. By default a group stays on one row: each icon sits beside its label, and the toolbar's `responsive` policy relocates whole groups when needed. Set `overflow="wrap"` only for independent links that should move as whole actions to another row within the group; use `overflow="scroll"` for a bounded one-row action strip. A `ToolbarText` is one line ending in an ellipsis by default; opt into `wrap` (capped by `maxLines`) or `ellipsis={false}` deliberately. Inside a group, a `Select` or `PopupMenu` trigger drops its focus ring while its popup is open (the open popup and its current row show where focus is) and the ring returns when the popup closes; a ring follows the control's shape (a pill for an icon-and-caret trigger, a circle for a compact icon button) — set `focusRingOwner="group"` on a Select whose group paints the composed ring, and never add CSS to show, hide, or reshape a ring. For a compact mixed group, keep the standard item padding and raised selected chrome; the selected item paints over the outer border without an internal separator. For an avatar control, set `content="avatar"` and `avatarImage` on the group instead of inserting an `img`: a lone control paints the contained image on the outer group and a multi-button group paints it only on the pressed selection highlight. Compose panel/dialog/page headings with a direct extra-large `ToolbarText`, optional grouped icon, grouped trailing controls, and app-owned supporting copy below. A non-interactive heading icon is an icon tile: put the `LucideIcon` directly in its `ToolbarControlGroup` (it takes an icon button's 40px slot and centers), never inside a `<button>` that does nothing. A group remains 44px outside (`calc(2px + remify(42px))`) when its border/background are transparent; use 8px between groups and inside items. Each zone item sits in the toolbar's top 44px control band, centered by its own size; a taller item (a wrapped title, a second trailing row) starts at the band's top and grows down without moving the others, so a wrapped `ToolbarText` keeps trailing controls beside its first line — do not add alignment CSS for this. Split dormant and interactive regions: `ListHeader` fills the available inline width by default; set `width="content"` to shrink-wrap while retaining its normal geometry, or `inline` when it belongs in surrounding text without outer margin, border, or padding. It keeps its label and mutually exclusive semantic count or non-count `badge` together, with an independent logical-end action unless disclosure mode makes the title cluster the button. Its action visual defaults to 18px through `--kui-list-header-action-icon-size` inside a fitted 36px hover square whose transparent hit layer keeps the pointer target at least 44px (44px wide by the 36px row in `density="compact"`); never shrink the target to match the visual, and never force the button to 44px. Pass every non-negative safe-integer section quantity through `count` with a localized full spoken `countLabel`; never concatenate it into `label` or put a number in `badge`. `ListItem.trailing` is dormant; use `ListActionRow` when primary and trailing actions need sibling native buttons. Its `label`, `icon`, and `trailingActionIcon` slots are also dormant and cannot contain controls. Let panes relocate at narrow widths instead of shrinking targets. Dividers are chrome and earn their place: a `Toolbar` draws none by default, and the line between pinned chrome and scrolling content comes from scroll state (rule 16a), so never add a border, a permanent `dividerSides`, or a margin to fake or adjust one.
+    16a. Dividers between pinned chrome and scrolling content are component chrome: a `Toolbar` draws none by default (`dividerSides` is for a permanent edge only). Call `wireScrollDividers(appRoot)` from `@kerfjs/ui/wire-scroll-dividers` once and retain its disposer; a plain `Pane` with `chromeDividers="scroll"` draws the line under its header only while content is scrolled beneath it and over its footer only while more content lies below (never when the content fits), every `NavStack`'s top chrome and bottom toolbar and every `TabNavigator` bar do the same around the active view or scene (keyed on whatever actually scrolls there, including a sole `Pane`'s content), and every `TabBar` marks each side of its strip with tabs scrolled out of view. Configure a pane with `chromeDividers` (`scroll` by default for plain panes, `always` by default for sunken panes, or explicit `scroll`, `always`, `none`, also via `PaneConfig`); `always` draws both lines even when content fits. A `NavStack` or `TabNavigator` has its own `chromeDividers` (same values: `always` draws the chrome lines without the wiring, `none` never, even when wired; a `SplitView` forwards it through `compactStack`); a `toolbarConfig.dividerSides` edge stays the Toolbar's own. Name app-owned chrome by id in `targets`. The wiring writes only `data-scroll-overflow` / `data-scroll-divider` state; never write a border onto a component to show a divider.
+17. Each `Toolbar` zone accepts `KerfUiContent` directly, including status content, native controls, and application markup. Put identity/title text directly in the zone as `ToolbarText`; use `ToolbarControlGroup` when related controls need shared toolbar chrome, sizing, hover treatment, or overflow behavior. Bare controls keep their own styling and accessibility responsibilities. A standalone primary `wa-button` in trailing keeps its own Web Awesome chrome. `SegmentedControl`, `Select`, and `TokenSearchField` can live inside a group when they need that shared presentation. Configure zone behavior with `Toolbar.centerAlign` and its `responsive` / `responsiveAt` policy instead of selecting toolbar zone classes. No policy clips an action: trailing (and stacked center) zones wrap whole groups onto another row, and the center zone never compresses below its content (a leading title too long for the row truncates with an ellipsis instead), so never hide or shrink a toolbar control to make it fit; use `responsive="wrap"` for a heading whose title must stay whole, and move genuinely lower-priority commands into an app-owned "More" popup menu. For an ordinary icon/action control inside a group, use a plain `<button>` (the group styles `> button` fully) — that is the default; reach for `wa-button` only when you need a Web Awesome feature. A popup menu in a toolbar is a `PopupMenu` (`@kerfjs/ui/popup-menu`, registered once via `@kerfjs/ui/popup-menu/register`) in a `single` group with `nestedDropdown` and a `menuInset`: give it typed `items` (commands with `action`s, `heading`s, `divider`s) and a trigger `icon` plus visible `text` or an accessible `label`; never hand-write `wa-dropdown` / `wa-dropdown-item` markup for a menu. Let the group size that trigger from its icon, localized text, and caret; do not force a width on the menu or button. By default a group stays on one row: each icon sits beside its label, and the toolbar's `responsive` policy relocates whole groups when needed. Set `overflow="wrap"` only for independent links that should move as whole actions to another row within the group; use `overflow="scroll"` for a bounded one-row action strip. A `ToolbarText` is one line ending in an ellipsis by default; opt into `wrap` (capped by `maxLines`) or `ellipsis={false}` deliberately. Inside a group, a `Select` or `PopupMenu` trigger drops its focus ring while its popup is open (the open popup and its current row show where focus is) and the ring returns when the popup closes; a ring follows the control's shape (a pill for an icon-and-caret trigger, a circle for a compact icon button) — set `focusRingOwner="group"` on a Select whose group paints the composed ring, and never add CSS to show, hide, or reshape a ring. For a compact mixed group, keep the standard item padding and raised selected chrome; the selected item paints over the outer border without an internal separator. For an avatar control, set `content="avatar"` and `avatarImage` on the group instead of inserting an `img`: a lone control paints the contained image on the outer group and a multi-button group paints it only on the pressed selection highlight. Compose panel/dialog/page headings with a direct extra-large `ToolbarText`, optional grouped icon, grouped trailing controls, and app-owned supporting copy below. A non-interactive heading icon is an icon tile: put the `LucideIcon` directly in its `ToolbarControlGroup` (it takes an icon button's 40px slot and centers), never inside a `<button>` that does nothing. A group remains 44px outside (`calc(2px + remify(42px))`) when its border/background are transparent; use 8px between groups and inside items. Each zone item sits in the toolbar's top 44px control band, centered by its own size; a taller item (a wrapped title, a second trailing row) starts at the band's top and grows down without moving the others, so a wrapped `ToolbarText` keeps trailing controls beside its first line — do not add alignment CSS for this. Split dormant and interactive regions: `ListHeader` fills the available inline width by default; set `width="content"` to shrink-wrap while retaining its normal geometry, or `inline` when it belongs in surrounding text without outer margin, border, or padding. It keeps its label and mutually exclusive semantic count or non-count `badge` together, with an independent logical-end action unless disclosure mode makes the title cluster the button. Its action visual defaults to 18px through `--kui-list-header-action-icon-size` inside a fitted 36px hover square whose transparent hit layer keeps the pointer target at least 44px (44px wide by the 36px row in `density="compact"`); never shrink the target to match the visual, and never force the button to 44px. Pass every non-negative safe-integer section quantity through `count` with a localized full spoken `countLabel`; never concatenate it into `label` or put a number in `badge`. `ListItem.trailing` is dormant; use `ListActionRow` when primary and trailing actions need sibling native buttons. Its `label`, `icon`, and `trailingActionIcon` slots are also dormant and cannot contain controls. Let panes relocate at narrow widths instead of shrinking targets. Dividers are chrome and earn their place: a `Toolbar` draws none by default, and the line between pinned chrome and scrolling content comes from scroll state (rule 16a), so never add a border, a permanent `dividerSides`, or a margin to fake or adjust one.
     For a toolbar heading that must remain at the 20px `--kui-font-l` step, use `ToolbarText size="xlarge-fixed"`; `xlarge` retains the responsive page-title clamp. Pass `headingLevel` when it is a section landmark.
 
 18. When a recurring concept has no matching export or production recipe, keep its semantics in a thin application adapter while reusing the public layout vocabulary. The composer recipe uses one visible form surface, toolbar title/supporting-copy ids, shared 8px field/action gutters, 24px major rhythm, and a conditional StateBanner as its only nested semantic surface; do not turn every section into a card or double-inset intrinsically bordered controls. For multi-line banner copy use `copyLayout="stacked"`; use `actionPlacement="below"` for an action on its own trailing row. The application-local `../docs/examples/command-palette-adapter.tsx` is reference source for one such missing concept, not an `@kerfjs/ui` runtime export or catalog recipe. The application owns its registration, ranking, history, permissions, availability, shortcut policy, focus policy, dispatch, and copy. If a missing concept recurs across products, open an upstream component or recipe request.
@@ -267,7 +267,7 @@ For a rail view heading, use `presentation="title"` for the 36px bold,
 flush-start trigger and adjacent caret. Set `focusRingInset` when an ancestor
 clips focus painting; never restyle Select shadow parts from application CSS.
 
-19. Compose `ValueTable` from typed `ValueTableRow` entries instead of handwritten `dt`/`dd` wrappers. Pass `icon` for the optional 24px leading visual; the row owns 8px of root-scaled top and bottom padding, the 8px iconless or 40px icon-bearing separator start, and the common 8px right inset. 20. Use the standard direct `Toolbar` composition for a panel, dialog, or page heading, not a private wrapper or custom heading row. Put an optional icon in a `ToolbarControlGroup`, the title directly in the leading zone as extra-large `ToolbarText`, and actions in a trailing group. Set `headingLevel` for page/section landmarks. Supporting copy stays below the toolbar as app-owned content. The app owns modal behavior, focus, dismissal, command policy, ids, and action handling. 21. Space with the official five-step scale, picked by how connected two elements are — not by eye. `0` `--kui-space-none` = no separation (one unit); `4px` `--kui-space-2xs` = very minor air on a connected cluster; `8px` `--kui-space-xs` = standard, between elements within a group; `16px` `--kui-space-m` = minor, between homogeneous groups; `24px` `--kui-space-l` = major, between heterogeneous groups (the `.kui-content` rhythm). The 8px-vs-24px distinction is inside-a-group vs between-major-differing-regions. `--kui-space-s` (12px) and `--kui-space-xl` (32px) are off-scale exceptions. For `Row.gap`, `Grid.gap`, or `List.gap`, pass a finite shorthand such as `gap="xs"` or `gap="m"`; use `Spacer` for one intentional typed empty width/height or a flexible main-axis gap. When one token is insufficient, import typed builders from the CSS-free `@kerfjs/ui/css-values` subpath. Preserve property grammar: lengths for gap/Spacer/Skeleton geometry, `flex()` for Row/Grid/List flex, and a foreground color for choice icons: `uiColor()` with a `*-on-*` or text token (`success-on-quiet`, `text-quiet`) or `foregroundColorVar()`. Fill tokens (`*-fill-*`) are backgrounds, not foregrounds, and `SelectChoice.color` rejects them. Never cast between brands or emit raw row `style` declarations. `plus` is not standalone and must be wrapped in `calc`; `remify()` remains source-CSS syntax and is never a runtime prop value. See `docs/layout.md` "Spacing scale". 22. Pick a whole-screen layout from the opt-in, tree-shakeable subpaths by data + interaction + device, and derive responsiveness from `@kerfjs/ui/device-class`'s `deviceClass()` (`compact` = handset or portrait tablet = one pane at a time). Simple/flat → `NavStack` with one entry (single pane), plus `TabScaffold` (`@kerfjs/ui/tab-scaffold`, iOS bottom tabs, each tab its own `NavStack`) for 2–5 co-equal sections on `compact`; show an unread count on a tab with its `badge` (a number or short string, rendered as the top-trailing danger `Badge` on the icon) plus a localized `badgeLabel` ("3 unread", folded into the tab's name as "Inbox, 3 unread"), never by concatenating the count into `label` or restyling the badge; for new content without a count pass `badge: true` (the text-free dot) with its required `badgeLabel` ("New activity"). Drill-down → `NavStack` (`@kerfjs/ui/nav-stack`), upgrading to `SplitView` (`@kerfjs/ui/split-view`, list-detail) once both panes fit (`atLeast('tablet')` landscape); `SplitView` collapses to a `NavStack` on `compact`. Keep each stack's ordered views controlled; put view-specific bottom chrome on `NavStackView.bottomToolbar` (or use the component-level persistent fallback), then call `wireNavStack` so content slides while the active view's top and bottom chrome cross-fade and focus moves into the new top view/restores on pop. Mark a preferred initial heading or control with `data-nav-focus` when DOM order is not sufficient. The stack's top chrome is a real `Toolbar`: put a view's title and groups on `NavStackView.toolbar` (`title`, `leading`, `center`, `trailing`), where its Toolbar configuration overrides stack-wide `toolbarConfig` defaults; configure `backIcon` / `backText` through the stack, never with CSS. Each view and the stack fallback use a structured `bottomToolbar` with an accessible `label`; a view can also provide `header` / `footer`, `headerList` / `footerList`, and `pane` configuration, which render a Pane around that view's scrolling content. `SplitView` forwards both of its inner components: `resizable` takes the list `ResizableRegion`'s `separator`, `handleIcon`, `contentOverflow`, and collapse props (`collapsed`, `transitioning`, `collapseMotion`, `restoreControl`, `restorePosition`), and `compactStack` takes the compact stack's `toolbarConfig`, `backIcon`, `backText`, `hideToolbar`, `bottomToolbar`, plus `list` / `detail` view toolbars (structured `toolbar` and `bottomToolbar`). Complex tool with peripheral panels → `Workbench` (`@kerfjs/ui/workbench`, collapsible rails + drawer) `atLeast('desktop')`, degrading to `NavStack`/overlays below. Workbench panels are fixed-size unless a panel opts in with `resizable` (`true` or `{ min, max }`); then render `size={sizeSignal.value}` and call `wireWorkbench(root, { id, panels: { leftRail: { size: sizeSignal, storageKey? } }, deviceClass })` from `@kerfjs/ui/wire-workbench` for pointer drags, arrow/Shift+arrow/Home/End on the separator, persistence, and no resizing on `compact` classes. Inline rails, fixed or resizable, leave the work area `mainMinSize` px of width (a `Workbench` prop, default 320, `0` off), and an inline bottom drawer leaves it `mainMinHeight` px of height (default 120, `0` off): resizable panels stop growing there, rails shrink in proportion when the Workbench narrows and the drawer when it gets shorter, so do not add your own main-area `min-width` / `min-height`. Rails present as overlays below the `narrow` Workbench container breakpoint (704px) by default — `responsiveOverlayAt: "compact"` moves that to 448px and `"never"` keeps a rail inline — and a bottom drawer opts in the same way; do not derive `presentation` from `deviceClass`, and overlays never resize. At compact widths an overlay rail fills the Workbench less a 44px dismiss strip (`--kui-workbench-overlay-dismiss-margin`) on the side away from its edge; `compactOverlay: "full"` makes one rail fill it. Pass each such panel's `collapsed` signal to `wireWorkbench` too (`panels: { leftRail: { collapsed: navCollapsed } }`, `size` optional) so the overlay is transient like `wireSidebar`'s compact overlay: it collapses when the breakpoint begins to apply (the inline state returns when it ends), takes focus on its first control and keeps Tab inside it while open, and closes on Escape or an outside press with focus returned to its toggle (give each toggle `aria-controls` naming its panel's derived id, `<workbench id>-left-rail` / `-right-rail` / `-bottom-drawer`, so a panel open at wire-up has a focus target too); opening one overlay closes the other open overlays, so they never cover each other's controls; do not hand-roll those listeners (`dismissOverlays: false` opts out of all of it, `exclusiveOverlays: false` of exclusivity only). Collapse stays the app's `collapsed` flag and keeps the size, so an expanded panel returns at its last size. Let the Workbench compose panel toolbars: give each panel `toolbar: { label, title?, leading?, center?, trailing?, toggle: { action, name, showLabel?, hideLabel? } }` and the work area `mainToolbar` (and `mainBottomToolbar` for a drawer). Each of these toolbars takes the `Toolbar`'s configuration (`ToolbarConfig`: `dividerSides`, `centerAlign`, `responsive`, `responsiveAt`, `safeAreaEdges`); configure a composed toolbar through those props (for example `dividerSides: ""` to drop its divider), never with CSS. Configure the composed panes and chrome lists the same way: a panel's `pane` (and `CollapsiblePanel`'s `pane`) and the Workbench's `mainPane` take `PaneConfig` (`contentElement`, `contentLabel`, `separators`, `safeAreaEdges` — for example `{ contentElement: "nav", contentLabel: "Files" }` for a navigator rail), and `mainHeaderList` / `mainFooterList` take `ListConfig` (`gap`, `hAlign`, `vAlign`, `dividerSides`, `textInsets`, `controlInsets`). Open, a panel's toolbar places groups in its leading, center, and trailing zones, with the toggle last; mark a ToolbarControlGroup relocateOnCollapse to keep it available when closed (pass marked groups directly or in arrays rather than JSX fragments); closed, marked groups follow zone order into the work area before the toggle — a left rail's lead `mainToolbar`, a right rail's end it, a drawer's trail `mainBottomToolbar` or float in a corner `FloatingToolbar` — and panel-only groups stay behind. A control sits near where its effect appears: a collapsed drawer's restore belongs in the bottom toolbar or a `FloatingToolbar` beside the drawer, not in a distant top toolbar. Do not hand-place panel toggles in the work-area toolbar or render a second copy, and handle only the toggle's `data-action`. A collapsed panel renders `inert` and `aria-hidden` by itself, on the rail/drawer and its content (its `restoreControl` stays outside and reachable), so do not add your own `tabindex`, `aria-hidden`, or `inert` to hide it. These are declarative (the app owns the stack/selection/collapsed/active state as signals) with disposer-returning `wire…` helpers; each stays out of the barrel, and its CSS-aware browser import loads the layout's CSS plus that of every component it renders (`Pane`, `Toolbar`, `List`, …), so do not hand-import `pane.css` or the other internal stylesheets; the companion `.css` subpath is only for pipelines without the `browser` condition. For a standalone collapsible rail or bottom drawer outside a full shell, use `CollapsiblePanel` + `CollapsiblePanelToggle` (`@kerfjs/ui/collapsible-panel`) with `wireSidebar` (`@kerfjs/ui/wire-sidebar`): the standard collapse animation and per-side icon convention (`PanelLeft*`/`PanelRight*`/`PanelBottom*`) plus toggle, focus, compact overlay, and persistence semantics. Give a standalone panel the same `toolbar` roles and render `CollapsiblePanelRelocated` in your work-area toolbar (first in leading for a left rail, last in trailing for a right rail, a bottom toolbar or a `FloatingToolbar` restoreControl for a drawer) instead of hand-placing a second toggle. A collapsed `CollapsiblePanel`, `ResizableRegion`, or Workbench panel renders `inert` and `aria-hidden` by itself, so do not hide collapsed content yourself either. Likewise an open side overlay (a Workbench rail overlay, a `wireSidebar` compact overlay, an overlay `CollapsiblePanel` or horizontal `ResizableRegion`) hides the covered work area's `FloatingToolbar`s and restore corners by itself until it closes, so do not hide them from overlay state. A compact overlay opens only on a user action: wire-up on a compact device and a wide-to-compact crossing collapse every panel, and a wide crossing restores the inline state. Seed the signal with `signal(device.value.compact)` and pass the panel's `inlineCollapsed` default so the first compact render has no overlay. Dialogs pick the same inner layout, then present per device class (full-screen modal on `compact`, inline on desktop). A list-detail dialog is a Workbench-shaped layout on roomy devices: a full-height list sidebar and a full-height main column, each a `Pane` with its own top `Toolbar`; the main column holds the primary xl title, the close control (`data-dialog="close"` in a `without-header` Web Awesome dialog), and the record actions, never a header spanning both columns. A top-level percentage-height shell needs a definite containing height: opt into `@kerfjs/ui/document.css` and put `.kui-app-root` on the one direct mount container, or provide equivalent application-owned geometry. The global baseline is deliberately absent from `styles.css` and component imports. See `docs/app-layouts.md`, `docs/document-baseline.md`, and `docs/collapsible-panel.md`. 23. Layouts and `Pane` are safe-area aware without configuration: backgrounds, separators, and dividers paint through a device's unsafe areas (a collapsible rail or drawer grows by the inset it docks to), content is padded only on the sides a region actually reaches, and block insets are scroll padding inside the scroller so first/last content can always be scrolled clear. Interior edges get nothing, and a collapsed rail hands its edge back to the center. Never add your own `env(safe-area-inset-*)` padding around a kerf layout or pane — that double-insets. In an app-owned arrangement of panes, pass `Pane.safeAreaEdges` (the sides that pane reaches; `[]` opts out); give an app bar or bottom bar that sits at a screen edge outside a Pane header or footer `Toolbar.safeAreaEdges` for the sides it reaches (for example `['block-start', 'inline-start', 'inline-end']`); the Workbench `mainToolbar` / `mainBottomToolbar` and panel `toolbar` configurations forward the same `safeAreaEdges` to their `Toolbar`. Do not set the internal `--kui-edge-inset-*` context yourself. The device insets are `--kui-safe-area-*` (defaulting to `env()`), overridable on `:root`. See `docs/app-layouts.md` "Safe areas".
+19. Compose `ValueTable` from typed `ValueTableRow` entries instead of handwritten `dt`/`dd` wrappers. Pass `icon` for the optional 24px leading visual; the row owns 8px of root-scaled top and bottom padding, the 8px iconless or 40px icon-bearing separator start, and the common 8px right inset. 20. Use the standard direct `Toolbar` composition for a panel, dialog, or page heading, not a private wrapper or custom heading row. Put an optional icon in a `ToolbarControlGroup`, the title directly in the leading zone as extra-large `ToolbarText`, and actions in a trailing group. Set `headingLevel` for page/section landmarks. Supporting copy stays below the toolbar as app-owned content. The app owns modal behavior, focus, dismissal, command policy, ids, and action handling. 21. Space with the official five-step scale, picked by how connected two elements are — not by eye. `0` `--kui-space-none` = no separation (one unit); `4px` `--kui-space-2xs` = very minor air on a connected cluster; `8px` `--kui-space-xs` = standard, between elements within a group; `16px` `--kui-space-m` = minor, between homogeneous groups; `24px` `--kui-space-l` = major, between heterogeneous groups (the `.kui-content` rhythm). The 8px-vs-24px distinction is inside-a-group vs between-major-differing-regions. `--kui-space-s` (12px) and `--kui-space-xl` (32px) are off-scale exceptions. For `Row.gap`, `Grid.gap`, or `List.gap`, pass a finite shorthand such as `gap="xs"` or `gap="m"`; use `Spacer` for one intentional typed empty width/height or a flexible main-axis gap. When one token is insufficient, import typed builders from the CSS-free `@kerfjs/ui/css-values` subpath. Preserve property grammar: lengths for gap/Spacer/Skeleton geometry, `flex()` for Row/Grid/List flex, and a foreground color for choice icons: `uiColor()` with a `*-on-*` or text token (`success-on-quiet`, `text-quiet`) or `foregroundColorVar()`. Fill tokens (`*-fill-*`) are backgrounds, not foregrounds, and `SelectChoice.color` rejects them. Never cast between brands or emit raw row `style` declarations. `plus` is not standalone and must be wrapped in `calc`; `remify()` remains source-CSS syntax and is never a runtime prop value. See `docs/layout.md` "Spacing scale". 22. Pick a whole-screen layout from the opt-in, tree-shakeable subpaths by data + interaction + device, and derive responsiveness from `@kerfjs/ui/device-class`'s `deviceClass()` (`compact` = handset or portrait tablet = one pane at a time). Simple/flat → `NavStack` with one entry (single pane), plus `TabNavigator` (`@kerfjs/ui/tab-navigator`, iOS bottom tabs, each tab its own `NavStack`) for 2–5 co-equal sections on `compact`; show an unread count on a tab with its `badge` (a number or short string, rendered as the top-trailing danger `Badge` on the icon) plus a localized `badgeLabel` ("3 unread", folded into the tab's name as "Inbox, 3 unread"), never by concatenating the count into `label` or restyling the badge; for new content without a count pass `badge: true` (the text-free dot) with its required `badgeLabel` ("New activity"). Drill-down → `NavStack` (`@kerfjs/ui/nav-stack`), upgrading to `SplitView` (`@kerfjs/ui/split-view`, list-detail) once both panes fit (`atLeast('tablet')` landscape); `SplitView` collapses to a `NavStack` on `compact`. Keep each stack's ordered views controlled; put view-specific bottom chrome on `NavStackView.bottomToolbar` (or use the component-level persistent fallback), then call `wireNavStack` so content slides while the active view's top and bottom chrome cross-fade and focus moves into the new top view/restores on pop. Mark a preferred initial heading or control with `data-nav-focus` when DOM order is not sufficient. The stack's top chrome is a real `Toolbar`: put a view's title and groups on `NavStackView.toolbar` (`title`, `leading`, `center`, `trailing`), where its Toolbar configuration overrides stack-wide `toolbarConfig` defaults; configure `backIcon` / `backText` through the stack, never with CSS. Each view and the stack fallback use a structured `bottomToolbar` with an accessible `label`; a view can also provide `header` / `footer`, `headerList` / `footerList`, and `pane` configuration, which render a Pane around that view's scrolling content. `SplitView` forwards both of its inner components: `resizable` takes the list `ResizableRegion`'s `separator`, `handleIcon`, `contentOverflow`, and collapse props (`collapsed`, `transitioning`, `collapseMotion`, `restoreControl`, `restorePosition`), and `compactStack` takes the compact stack's `toolbarConfig`, `backIcon`, `backText`, `hideToolbar`, `bottomToolbar`, plus `list` / `detail` view toolbars (structured `toolbar` and `bottomToolbar`). Complex tool with peripheral panels → `Workbench` (`@kerfjs/ui/workbench`, collapsible rails + drawer) `atLeast('desktop')`, degrading to `NavStack`/overlays below. Workbench panels are fixed-size unless a panel opts in with `resizable` (`true` or `{ min, max }`); then render `size={sizeSignal.value}` and call `wireWorkbench(root, { id, panels: { leftRail: { size: sizeSignal, storageKey? } }, deviceClass })` from `@kerfjs/ui/wire-workbench` for pointer drags, arrow/Shift+arrow/Home/End on the separator, persistence, and no resizing on `compact` classes. Inline rails, fixed or resizable, leave the work area `mainMinSize` px of width (a `Workbench` prop, default 320, `0` off), and an inline bottom drawer leaves it `mainMinHeight` px of height (default 120, `0` off): resizable panels stop growing there, rails shrink in proportion when the Workbench narrows and the drawer when it gets shorter, so do not add your own main-area `min-width` / `min-height`. Rails present as overlays below the `narrow` Workbench container breakpoint (704px) by default — `responsiveOverlayAt: "compact"` moves that to 448px and `"never"` keeps a rail inline — and a bottom drawer opts in the same way; do not derive `presentation` from `deviceClass`, and overlays never resize. At compact widths an overlay rail fills the Workbench less a 44px dismiss strip (`--kui-workbench-overlay-dismiss-margin`) on the side away from its edge; `compactOverlay: "full"` makes one rail fill it. Pass each such panel's `collapsed` signal to `wireWorkbench` too (`panels: { leftRail: { collapsed: navCollapsed } }`, `size` optional) so the overlay is transient like `wireSidebar`'s compact overlay: it collapses when the breakpoint begins to apply (the inline state returns when it ends), takes focus on its first control and keeps Tab inside it while open, and closes on Escape or an outside press with focus returned to its toggle (give each toggle `aria-controls` naming its panel's derived id, `<workbench id>-left-rail` / `-right-rail` / `-bottom-drawer`, so a panel open at wire-up has a focus target too); opening one overlay closes the other open overlays, so they never cover each other's controls; do not hand-roll those listeners (`dismissOverlays: false` opts out of all of it, `exclusiveOverlays: false` of exclusivity only). Collapse stays the app's `collapsed` flag and keeps the size, so an expanded panel returns at its last size. Let the Workbench compose panel toolbars: give each panel `toolbar: { label, title?, leading?, center?, trailing?, toggle: { action, name, showLabel?, hideLabel? } }` and the work area `mainToolbar` (and `mainBottomToolbar` for a drawer). Each of these toolbars takes the `Toolbar`'s configuration (`ToolbarConfig`: `dividerSides`, `centerAlign`, `responsive`, `responsiveAt`, `safeAreaEdges`); configure a composed toolbar through those props (for example `dividerSides: ""` to drop its divider), never with CSS. Configure the composed panes and chrome lists the same way: a panel's `pane` (and `CollapsiblePanel`'s `pane`) and the Workbench's `mainPane` take `PaneConfig` (`contentElement`, `contentLabel`, `separators`, `safeAreaEdges` — for example `{ contentElement: "nav", contentLabel: "Files" }` for a navigator rail), and `mainHeaderList` / `mainFooterList` take `ListConfig` (`gap`, `hAlign`, `vAlign`, `dividerSides`, `textInsets`, `controlInsets`). Open, a panel's toolbar places groups in its leading, center, and trailing zones, with the toggle last; mark a ToolbarControlGroup relocateOnCollapse to keep it available when closed (pass marked groups directly or in arrays rather than JSX fragments); closed, marked groups follow zone order into the work area before the toggle — a left rail's lead `mainToolbar`, a right rail's end it, a drawer's trail `mainBottomToolbar` or float in a corner `FloatingToolbar` — and panel-only groups stay behind. A control sits near where its effect appears: a collapsed drawer's restore belongs in the bottom toolbar or a `FloatingToolbar` beside the drawer, not in a distant top toolbar. Do not hand-place panel toggles in the work-area toolbar or render a second copy, and handle only the toggle's `data-action`. A collapsed panel renders `inert` and `aria-hidden` by itself, on the rail/drawer and its content (its `restoreControl` stays outside and reachable), so do not add your own `tabindex`, `aria-hidden`, or `inert` to hide it. These are declarative (the app owns the stack/selection/collapsed/active state as signals) with disposer-returning `wire…` helpers; each stays out of the barrel, and its CSS-aware browser import loads the layout's CSS plus that of every component it renders (`Pane`, `Toolbar`, `List`, …), so do not hand-import `pane.css` or the other internal stylesheets; the companion `.css` subpath is only for pipelines without the `browser` condition. For a standalone collapsible rail or bottom drawer outside a full shell, use `CollapsiblePanel` + `CollapsiblePanelToggle` (`@kerfjs/ui/collapsible-panel`) with `wireSidebar` (`@kerfjs/ui/wire-sidebar`): the standard collapse animation and per-side icon convention (`PanelLeft*`/`PanelRight*`/`PanelBottom*`) plus toggle, focus, compact overlay, and persistence semantics. Give a standalone panel the same `toolbar` roles and render `CollapsiblePanelRelocated` in your work-area toolbar (first in leading for a left rail, last in trailing for a right rail, a bottom toolbar or a `FloatingToolbar` restoreControl for a drawer) instead of hand-placing a second toggle. A collapsed `CollapsiblePanel`, `ResizableRegion`, or Workbench panel renders `inert` and `aria-hidden` by itself, so do not hide collapsed content yourself either. Likewise an open side overlay (a Workbench rail overlay, a `wireSidebar` compact overlay, an overlay `CollapsiblePanel` or horizontal `ResizableRegion`) hides the covered work area's `FloatingToolbar`s and restore corners by itself until it closes, so do not hide them from overlay state. A compact overlay opens only on a user action: wire-up on a compact device and a wide-to-compact crossing collapse every panel, and a wide crossing restores the inline state. Seed the signal with `signal(device.value.compact)` and pass the panel's `inlineCollapsed` default so the first compact render has no overlay. Dialogs pick the same inner layout, then present per device class (full-screen modal on `compact`, inline on desktop). A list-detail dialog is a Workbench-shaped layout on roomy devices: a full-height list sidebar and a full-height main column, each a `Pane` with its own top `Toolbar`; the main column holds the primary xl title, the close control (`data-dialog="close"` in a `without-header` Web Awesome dialog), and the record actions, never a header spanning both columns. A top-level percentage-height shell needs a definite containing height: opt into `@kerfjs/ui/document.css` and put `.kui-app-root` on the one direct mount container, or provide equivalent application-owned geometry. The global baseline is deliberately absent from `styles.css` and component imports. See `docs/app-layouts.md`, `docs/document-baseline.md`, and `docs/collapsible-panel.md`. 23. Layouts and `Pane` are safe-area aware without configuration: backgrounds, separators, and dividers paint through a device's unsafe areas (a collapsible rail or drawer grows by the inset it docks to), content is padded only on the sides a region actually reaches, and block insets are scroll padding inside the scroller so first/last content can always be scrolled clear. Interior edges get nothing, and a collapsed rail hands its edge back to the center. Never add your own `env(safe-area-inset-*)` padding around a kerf layout or pane — that double-insets. In an app-owned arrangement of panes, pass `Pane.safeAreaEdges` (the sides that pane reaches; `[]` opts out); give an app bar or bottom bar that sits at a screen edge outside a Pane header or footer `Toolbar.safeAreaEdges` for the sides it reaches (for example `['block-start', 'inline-start', 'inline-end']`); the Workbench `mainToolbar` / `mainBottomToolbar` and panel `toolbar` configurations forward the same `safeAreaEdges` to their `Toolbar`. Do not set the internal `--kui-edge-inset-*` context yourself. The device insets are `--kui-safe-area-*` (defaulting to `env()`), overridable on `:root`. See `docs/app-layouts.md` "Safe areas".
 
 For application tabs, `AppTab presentation="icon-only"` retains its accessible `name`, `labelMaxWidth` truncates the visible name, and `attention` colors it through `--kui-app-tab-attention-color`. Configure TabBar strip geometry through public `--kui-tab-bar-strip-*` tokens.
 
@@ -312,7 +312,7 @@ Common mistakes:
 | Add demo-only markup for a production state                                                                                       | Add the state to the production component, then render that export in the catalog                                                                                                                                                                                                             |
 | Choose a listed ecosystem component by default                                                                                    | Apply the component-selection guidance above; catalog coverage means supported and themed, not preferred                                                                                                                                                                                      |
 | Add sidebar-specific wrapper padding                                                                                              | Use the unpadded `.kui-pane`; let `ListHeader`, `ListItem`, and `ContentItem` own their 8/1/8 geometry                                                                                                                                                                                        |
-| Put bare text or controls directly in a toolbar slot                                                                              | Wrap every item in `ToolbarControlGroup`, using `appearance="borderless"` for transparent chrome                                                                                                                                                                                              |
+| Expect a bare toolbar control to receive group chrome automatically                                                               | Style and name the direct control itself, or use `ToolbarControlGroup` when controls need shared chrome                                                                                                                                                                                       |
 | Reach for `wa-button` for a plain control inside a `ToolbarControlGroup`                                                          | Use a plain `<button>` (the group styles it fully); for a popup menu use `PopupMenu`, which renders its own trigger                                                                                                                                                                           |
 | Render a `Discouraged` Web Awesome element (`wa-dropdown`, `wa-button-group`, `wa-select`, `wa-tab-group`, `wa-icon`, …) directly | Use the Kerf component that wraps or replaces it (`PopupMenu`, `SegmentedControl`, `Select`, `TabBar`, `LucideIcon`); file a component gap rather than dropping to the raw element. `KUI-L301` (`ui-preferences`, also run by `kerf-ui-doctor`) reports the raw tag and names the replacement |
 | Let a toolbar group wrap, or stack an icon above its label                                                                        | Keep icon and label on one row and let the group size to its content; relocate whole groups with the toolbar's `responsive` policy                                                                                                                                                            |
@@ -361,9 +361,10 @@ titles at every size; default tone retains existing identity and heading colors.
 
 Navigation transition continuity: `wireNavStack` slides the incoming view over the preserved previous view on push and the outgoing view off on pop, cross-fades both live chrome surfaces with inert snapshots, and settles/cancels an interrupted transition before starting the next. Reduced motion and duration zero settle immediately.
 
-For a tab scene with drill-down, place a `NavStack` directly in `TabScaffoldTab.content`. Give its views structured `toolbar` and `pane` configuration and omit both stack and view `bottomToolbar`; the scaffold bar remains the only bottom chrome. Wire the scaffold and stack on their respective roots. See `docs/tab-scaffold.md` and the catalog's **NavStack inside a tab** example.
+For a tab scene with drill-down, place a `NavStack` directly in `TabNavigatorTab.content`. Give its views structured `toolbar` and `pane` configuration and omit both stack and view `bottomToolbar`; the navigator bar remains the only bottom chrome. Wire the navigator and stack on their respective roots. See `docs/tab-navigator.md` and the catalog's **NavStack inside a tab** example.
 
-Use `Pane.deepInset` (also in `PaneConfig`) or `TabScaffoldTab.deepInset` for a plain scene when its scrolling content needs a 16px outer gutter. The extra 8px is applied to the scroll surface, while nested Row/List/Grid item margins stay 8px. When a tab scene is a sole Pane or NavStack, configure deep inset on that child's Pane; the tab bar and top toolbar stay full width.
+Use `Pane.deepInset` (also in `PaneConfig`) or `TabNavigatorTab.deepInset` for a plain scene when its scrolling content needs a 16px outer gutter. The extra 8px is applied to the scroll surface, while nested Row/List/Grid item margins stay 8px. When a tab scene is a sole Pane or NavStack, configure deep inset on that child's Pane; the tab bar and top toolbar stay full width.
+An edge-to-edge table or similar Pane child can read `--kui-pane-content-inset-inline-start` and `--kui-pane-content-inset-inline-end`: negate them for the child's logical margins, then add them to the child's text padding. The inherited values include routed safe areas and `deepInset`; keep the child in the Pane's single scroll slot. See `docs/app-layouts.md` for the CSS recipe.
 
 Expanded search groups accept `expandedOverflow="visible"` to anchor app-owned suggestion/date/help surfaces below their relative root; collapsed/default groups retain existing clipping. Apps own surface placement/dismissal and use `data-token-search-keep-open` or `collapsible.keepOpenOn` for focus.
 

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.78` 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.79` 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';

package/dist/browser/tab-navigator.js

@@ -0,0 +1,4 @@
+import '../styles/foundation.css';
+import '../styles/badge.css';
+import '../styles/components/navigation/tab-scaffold/tab-scaffold.css';
+export * from '../tab-navigator.js';

package/dist/{chunk-QYXKMLHO.js → chunk-3CXRQAYT.js}

@@ -248,7 +248,7 @@ function createController(ownerDocument) {
         subtree: true,
         childList: true,
         attributes: true,
-        // The shown NavStack view and TabScaffold scene change by attribute.
+        // The shown NavStack view and TabNavigator scene change by attribute.
         attributeFilter: [
           SCROLL_OVERFLOW,
           SCROLL_DIVIDER,
@@ -285,4 +285,4 @@ function createController(ownerDocument) {
 
 export { wireScrollDividers };
 
-//# sourceMappingURL=chunk-QYXKMLHO.js.map
+//# sourceMappingURL=chunk-3CXRQAYT.js.map

package/dist/chunk-3CXRQAYT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/wiring/wire-scroll-dividers.ts"],"names":["view"],"mappings":"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","file":"chunk-3CXRQAYT.js","sourcesContent":["/**\n * An app-owned scroll arrangement outside a `Pane`: the `id` of the element\n * that scrolls and the `id`s of the pinned chrome on each physical side of it.\n * Each named chrome element shows its divider on the side facing the scroller\n * while content is scrolled away beyond that side. Ids are resolved below the\n * wired root on every refresh, so a re-render that replaces an element keeps\n * the pairing.\n */\nexport interface ScrollDividerTarget {\n  /** The `id` of the scrolling element. */\n  scroller: string;\n  /** Chrome above the scroller: shows its bottom divider once scrolled down. */\n  top?: string;\n  /**\n   * Chrome right of the scroller: shows its left divider while content is\n   * hidden beyond the scroller's right edge (never when nothing overflows).\n   */\n  right?: string;\n  /**\n   * Chrome below the scroller: shows its top divider while content is hidden\n   * beyond the scroller's bottom edge (never when nothing overflows).\n   */\n  bottom?: string;\n  /** Chrome left of the scroller: shows its right divider once scrolled right. */\n  left?: string;\n}\n\nexport interface WireScrollDividersOptions {\n  /**\n   * App-owned scroll arrangements to pair beyond the ones found by structure\n   * (every `Pane`'s header and footer around its content, every `NavStack`'s\n   * and `TabNavigator`'s chrome around its active region, and every `TabBar`\n   * strip).\n   */\n  targets?: readonly ScrollDividerTarget[];\n}\n\ntype Edge = 't' | 'r' | 'b' | 'l';\n\nconst EDGES: readonly Edge[] = ['t', 'r', 'b', 'l'];\n\n/** The side of a chrome element that faces a scroller it sits on `edge` of. */\nconst FACING: Record<Edge, Edge> = { t: 'b', r: 'l', b: 't', l: 'r' };\n\nconst TARGET_EDGES: Record<Edge, 'top' | 'right' | 'bottom' | 'left'> = {\n  t: 'top',\n  r: 'right',\n  b: 'bottom',\n  l: 'left',\n};\n\n/** On a scroller: the edges beyond which content is currently hidden. */\nconst SCROLL_OVERFLOW = 'data-scroll-overflow';\n/** On a chrome element: its sides that currently show a scroll divider. */\nconst SCROLL_DIVIDER = 'data-scroll-divider';\n\n/**\n * Scroll distance, in px, that must be exceeded to count as \"away from an\n * edge\": `scrollWidth`/`scrollHeight` are rounded to whole pixels while the\n * scroll position is fractional, so a scroller at its end can report up to a\n * pixel still to go.\n */\nconst THRESHOLD = 1;\n\ninterface Pairing {\n  scroller: HTMLElement;\n  chrome: Partial<Record<Edge, HTMLElement>>;\n}\n\n/** A double-quoted CSS attribute-selector value. */\nconst quoted = (value: string) =>\n  `\"${value.replaceAll('\\\\', '\\\\\\\\').replaceAll('\"', '\\\\\"')}\"`;\n\n/** Elements matching `selector` at and below root. */\nfunction within<T extends Element>(\n  root: HTMLElement | Document,\n  selector: string,\n): T[] {\n  const found = [...root.querySelectorAll<T>(selector)];\n  if (root.nodeType === 1 && (root as HTMLElement).matches(selector))\n    found.unshift(root as unknown as T);\n  return found;\n}\n\nconst directChild = (parent: Element, selector: string) =>\n  [...parent.children].find((child): child is HTMLElement =>\n    child.matches(selector),\n  );\n\nconst PANE_CHROME = {\n  t: '.kui-pane__header, .kui-pane__toolbar',\n  b: '.kui-pane__footer',\n} as const;\n\n/** A NavStack's live (not cross-fading copy) chrome on `edge`. */\nconst NAV_STACK_CHROME = {\n  t: '.kui-nav-stack__chrome:not([data-nav-chrome-copy])',\n  b: '.kui-nav-stack__bottom:not([data-nav-chrome-copy])',\n} as const;\n\n/** A NavStack's active view: the top entry, never one sliding out. */\nfunction activeView(stack: Element): HTMLElement | undefined {\n  const viewport = directChild(stack, '.kui-nav-stack__viewport');\n  if (!viewport) return undefined;\n  return [...viewport.children]\n    .filter((child): child is HTMLElement =>\n      child.matches(\n        '.kui-nav-stack__view[data-nav-active=\"true\"]:not([data-nav-exiting=\"true\"])',\n      ),\n    )\n    .at(-1);\n}\n\n/** A TabNavigator's shown scene. */\nfunction activeScene(scaffold: Element): HTMLElement | undefined {\n  const scenes = directChild(scaffold, '.kui-tab-scaffold__scenes');\n  return scenes\n    ? directChild(scenes, '.kui-tab-scaffold__scene[data-active=\"true\"]')\n    : undefined;\n}\n\n/**\n * The elements that may scroll against a layout region's `edge` (the top or\n * bottom of a NavStack view or a TabNavigator scene): the region itself, then,\n * through a sole child that puts no chrome of its own on that edge, a Pane's\n * content slot or a nested NavStack's or TabNavigator's active region. Every\n * candidate is paired with the layout's chrome; one that does not overflow\n * reports nothing, so the chrome keys on whichever element actually scrolls.\n * A sole child with chrome on that edge (a Pane header, a nested NavStack's\n * top chrome, a TabNavigator's bar) stops the walk: that chrome draws its own\n * divider against its own content.\n */\nfunction regionScrollers(region: HTMLElement, edge: 't' | 'b'): HTMLElement[] {\n  const found: HTMLElement[] = [];\n  let current: HTMLElement | undefined = region;\n  while (current) {\n    found.push(current);\n    if (current.children.length !== 1) break;\n    const child: Element = current.children[0]!;\n    if (child.matches('.kui-pane')) {\n      current = directChild(child, PANE_CHROME[edge])\n        ? undefined\n        : directChild(child, '.kui-pane__content');\n      if (current) found.push(current);\n      break;\n    }\n    if (child.matches('.kui-nav-stack'))\n      current = directChild(child, NAV_STACK_CHROME[edge])\n        ? undefined\n        : activeView(child);\n    else if (child.matches('.kui-tab-scaffold') && edge === 't')\n      current = activeScene(child);\n    else current = undefined;\n  }\n  return found;\n}\n\n/** Canonical top/right/bottom/left string of the given edges. */\nconst sides = (edges: ReadonlySet<Edge>) =>\n  EDGES.filter((edge) => edges.has(edge)).join('');\n\n/**\n * Which edges of `scroller` currently have content hidden beyond them. Nothing\n * overflows when the content fits, so the far edges report no divider then.\n * Horizontal edges are physical, so a right-to-left scroller (whose\n * `scrollLeft` runs from the negative maximum to 0) reports the same sides.\n */\nfunction measure(scroller: HTMLElement): string {\n  const edges = new Set<Edge>();\n  const maxY = scroller.scrollHeight - scroller.clientHeight;\n  if (maxY > THRESHOLD) {\n    if (scroller.scrollTop > THRESHOLD) edges.add('t');\n    if (maxY - scroller.scrollTop > THRESHOLD) edges.add('b');\n  }\n  const maxX = scroller.scrollWidth - scroller.clientWidth;\n  if (maxX > THRESHOLD) {\n    const view = scroller.ownerDocument.defaultView;\n    const rtl = view?.getComputedStyle(scroller).direction === 'rtl';\n    const left = rtl ? maxX + scroller.scrollLeft : scroller.scrollLeft;\n    if (left > THRESHOLD) edges.add('l');\n    if (maxX - left > THRESHOLD) edges.add('r');\n  }\n  return sides(edges);\n}\n\ntype StateAttribute = typeof SCROLL_OVERFLOW | typeof SCROLL_DIVIDER;\ntype Root = HTMLElement | Document;\n\ninterface Registration {\n  root: Root;\n  targets: readonly ScrollDividerTarget[];\n}\n\n// A document has one attribute writer even when registrations overlap. The\n// WeakMap ties this coordination cache to the document's lifetime.\nconst CONTROLLERS = new WeakMap<\n  Document,\n  (registration: Registration) => () => void\n>();\n\n/** Set (or, for an empty value, remove) one of this wiring's attributes. */\nfunction write(element: Element, name: StateAttribute, value: string) {\n  if (element.getAttribute(name) === (value || null)) return;\n  if (name === SCROLL_OVERFLOW) {\n    if (value) element.setAttribute(SCROLL_OVERFLOW, value);\n    else element.removeAttribute(SCROLL_OVERFLOW);\n  } else if (value) element.setAttribute(SCROLL_DIVIDER, value);\n  else element.removeAttribute(SCROLL_DIVIDER);\n}\n\n/**\n * Wire scroll dividers below `root`: a divider between pinned chrome and the\n * content that scrolls beside it shows only while content is scrolled away\n * from that edge. Near edges (top, left) hide at the scroll start; far edges\n * (bottom, right) hide at the scroll end and whenever nothing overflows.\n *\n * The wiring only reports scroll state; each component draws its own divider\n * from it. It writes `data-scroll-overflow` (the edges with hidden content, in\n * canonical `t`/`r`/`b`/`l` order) on each scroller, and `data-scroll-divider`\n * (the sides to draw) on each paired chrome element:\n *\n * - every `Pane` with a header or footer: its header shows a bottom divider and\n *   its footer a top divider (drawn by the Pane, per its `chromeDividers`);\n * - every `NavStack`'s top chrome and bottom toolbar around its active view,\n *   and every `TabNavigator`'s bar under its active scene: the chrome shows a\n *   bottom (top chrome) or top (bottom toolbar, bar) divider. The scroller is\n *   whichever element actually scrolls there: the view or scene itself, or,\n *   through a sole child with no chrome of its own on that edge, a `Pane`'s\n *   content or a nested `NavStack` / `TabNavigator` region (a Pane's own header\n *   or footer draws that boundary instead);\n * - every `TabBar` strip: the bar draws a divider on each side of the strip\n *   whose tabs are scrolled out of view;\n * - each app-owned `targets` pairing: a `Toolbar` or `List` named as chrome\n *   draws the divider on its facing side.\n *\n * Structure is re-read after every DOM change below root (a re-render that\n * drops the attributes gets them back before paint), scroll is tracked with\n * one capturing listener per registered root, and size changes of each\n * scroller and its children with a `ResizeObserver`. Overlapping registrations\n * share one attribute writer; each disposer removes its registration, and the\n * final disposer removes the wiring-owned attributes. See\n * `docs/23-app-layouts.md` §3.7.\n */\nexport function wireScrollDividers(\n  root: Root,\n  { targets = [] }: WireScrollDividersOptions = {},\n): () => void {\n  const ownerDocument = (\n    root.nodeType === 9 ? (root as Document) : root.ownerDocument\n  )!;\n  let register = CONTROLLERS.get(ownerDocument);\n  if (!register) {\n    register = createController(ownerDocument);\n    CONTROLLERS.set(ownerDocument, register);\n  }\n  return register({ root, targets });\n}\n\nfunction createController(\n  ownerDocument: Document,\n): (registration: Registration) => () => void {\n  const view = ownerDocument.defaultView;\n  let disposed = false;\n  const registrations = new Set<Registration>();\n  const listenedRoots = new Set<Root>();\n  let pairings: Pairing[] = [];\n  const overflow = new Map<HTMLElement, string>();\n  /** Every element this wiring has written, with what it wrote. */\n  const written = new Map<Element, Map<StateAttribute, string>>();\n\n  const byId = (root: Root, id: string | undefined) => {\n    if (!id) return undefined;\n    const [match] = within<HTMLElement>(root, `[id=${quoted(id)}]`);\n    return match;\n  };\n\n  const collect = (): Pairing[] => {\n    const found: Pairing[] = [];\n    for (const { root, targets } of registrations) {\n      for (const pane of within<HTMLElement>(root, '.kui-pane')) {\n        const scroller = directChild(pane, '.kui-pane__content');\n        const header = directChild(pane, PANE_CHROME.t);\n        const footer = directChild(pane, PANE_CHROME.b);\n        if (scroller && (header || footer))\n          found.push({ scroller, chrome: { t: header, b: footer } });\n      }\n      const pairRegion = (\n        region: HTMLElement | undefined,\n        edge: 't' | 'b',\n        chrome: HTMLElement | undefined,\n      ) => {\n        if (!region || !chrome) return;\n        for (const scroller of regionScrollers(region, edge))\n          found.push({ scroller, chrome: { [edge]: chrome } });\n      };\n      for (const stack of within<HTMLElement>(root, '.kui-nav-stack')) {\n        const view = activeView(stack);\n        for (const edge of ['t', 'b'] as const)\n          pairRegion(view, edge, directChild(stack, NAV_STACK_CHROME[edge]));\n      }\n      for (const scaffold of within<HTMLElement>(root, '.kui-tab-scaffold'))\n        pairRegion(\n          activeScene(scaffold),\n          'b',\n          directChild(scaffold, '.kui-tab-scaffold__bar'),\n        );\n      for (const strip of within<HTMLElement>(root, '[data-kui-tab-list]'))\n        found.push({ scroller: strip, chrome: {} });\n      for (const target of targets) {\n        const scroller = byId(root, target.scroller);\n        if (!scroller) continue;\n        const chrome: Pairing['chrome'] = {};\n        for (const edge of EDGES)\n          chrome[edge] = byId(root, target[TARGET_EDGES[edge]]);\n        found.push({ scroller, chrome });\n      }\n    }\n    return found;\n  };\n\n  /** Write every paired element's attributes from the measured overflow. */\n  const apply = () => {\n    const current = new Map<Element, Map<StateAttribute, string>>();\n    const dividers = new Map<HTMLElement, Set<Edge>>();\n    for (const { scroller, chrome } of pairings) {\n      const edges = overflow.get(scroller)!;\n      (\n        current.get(scroller) ?? current.set(scroller, new Map()).get(scroller)!\n      ).set(SCROLL_OVERFLOW, edges);\n      for (const edge of EDGES) {\n        const element = chrome[edge];\n        if (!element) continue;\n        const shown = dividers.get(element) ?? new Set<Edge>();\n        dividers.set(element, shown);\n        if (edges.includes(edge)) shown.add(FACING[edge]);\n      }\n    }\n    for (const [element, shown] of dividers)\n      (\n        current.get(element) ?? current.set(element, new Map()).get(element)!\n      ).set(SCROLL_DIVIDER, sides(shown));\n    // Anything written before that is no longer paired gets its attributes back.\n    for (const [element, values] of written)\n      for (const name of values.keys())\n        if (!current.get(element)?.has(name)) write(element, name, '');\n    written.clear();\n    for (const [element, values] of current) {\n      written.set(element, values);\n      for (const [name, value] of values) write(element, name, value);\n    }\n  };\n\n  const observed = new Set<Element>();\n  const resizeObserver = view?.ResizeObserver\n    ? new view.ResizeObserver((entries) => {\n        if (disposed) return;\n        const scrollers = new Set(pairings.map(({ scroller }) => scroller));\n        for (const { target } of entries) {\n          const scroller = scrollers.has(target as HTMLElement)\n            ? (target as HTMLElement)\n            : target.parentElement;\n          if (scroller && scrollers.has(scroller))\n            overflow.set(scroller, measure(scroller));\n        }\n        apply();\n      })\n    : undefined;\n\n  const observeSizes = () => {\n    if (!resizeObserver) return;\n    const wanted = new Set<Element>();\n    for (const { scroller } of pairings) {\n      wanted.add(scroller);\n      for (const child of scroller.children) wanted.add(child);\n    }\n    for (const element of observed)\n      if (!wanted.has(element)) {\n        resizeObserver.unobserve(element);\n        observed.delete(element);\n      }\n    for (const element of wanted)\n      if (!observed.has(element)) {\n        resizeObserver.observe(element);\n        observed.add(element);\n      }\n  };\n\n  const refresh = () => {\n    pairings = collect();\n    overflow.clear();\n    for (const { scroller } of pairings)\n      overflow.set(scroller, measure(scroller));\n    observeSizes();\n    apply();\n  };\n\n  const onScroll = (event: Event) => {\n    const scroller = event.target as HTMLElement;\n    if (!overflow.has(scroller)) return;\n    const edges = measure(scroller);\n    if (edges === overflow.get(scroller)) return;\n    overflow.set(scroller, edges);\n    apply();\n  };\n\n  const mutationObserver = view?.MutationObserver\n    ? new view.MutationObserver((records) => {\n        if (disposed) return;\n        // A re-render that only dropped or changed attributes this wiring\n        // owns gets them back without re-measuring; structure changes\n        // re-read every pairing.\n        if (\n          records.every(\n            ({ type, attributeName }) =>\n              type === 'attributes' &&\n              (attributeName === SCROLL_OVERFLOW ||\n                attributeName === SCROLL_DIVIDER),\n          )\n        )\n          apply();\n        else refresh();\n      })\n    : undefined;\n\n  const syncRoots = () => {\n    const roots = new Set([...registrations].map(({ root }) => root));\n    for (const root of listenedRoots)\n      if (!roots.has(root)) {\n        root.removeEventListener('scroll', onScroll, { capture: true });\n        listenedRoots.delete(root);\n      }\n    for (const root of roots)\n      if (!listenedRoots.has(root)) {\n        root.addEventListener('scroll', onScroll, {\n          capture: true,\n          passive: true,\n        });\n        listenedRoots.add(root);\n      }\n    mutationObserver?.disconnect();\n    for (const root of roots)\n      mutationObserver?.observe(root, {\n        subtree: true,\n        childList: true,\n        attributes: true,\n        // The shown NavStack view and TabNavigator scene change by attribute.\n        attributeFilter: [\n          SCROLL_OVERFLOW,\n          SCROLL_DIVIDER,\n          'id',\n          'class',\n          'data-nav-active',\n          'data-nav-exiting',\n          'data-active',\n        ],\n      });\n  };\n\n  return (registration) => {\n    registrations.add(registration);\n    syncRoots();\n    refresh();\n    return () => {\n      if (!registrations.delete(registration)) return;\n      syncRoots();\n      if (registrations.size) refresh();\n      else {\n        disposed = true;\n        resizeObserver?.disconnect();\n        for (const [element, values] of written)\n          for (const name of values.keys()) write(element, name, '');\n        written.clear();\n        overflow.clear();\n        observed.clear();\n        pairings = [];\n        CONTROLLERS.delete(ownerDocument);\n      }\n    };\n  };\n}\n"]}

package/dist/{chunk-G4VKQP7B.js → chunk-3SXWV2IR.js}

@@ -75,6 +75,10 @@ function TokenSearchField({
       "data-fill": String(fill),
       "data-has-trailing": String(Boolean(trailing || trailingAction)),
       "data-presentation": presentation,
+      "data-placeholder": tokens.length ? tokenPlaceholder : placeholder,
+      "data-placeholder-visible": String(
+        query.length === 0 && tokens.length === 0
+      ),
       slot,
       children: !resolvedExpanded ? /* @__PURE__ */ jsx(
         "button",
@@ -288,4 +292,4 @@ function placeTokenSearchCaret(editor, offset) {
 
 export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField };
 
-//# sourceMappingURL=chunk-G4VKQP7B.js.map
+//# sourceMappingURL=chunk-3SXWV2IR.js.map

package/dist/chunk-3SXWV2IR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/token-search-field/token-search-field.tsx"],"names":[],"mappings":"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","file":"chunk-3SXWV2IR.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { Search, X } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport type { TokenSearchModel } from './model/token-search-model.js';\n\nexport interface TokenSearchToken {\n  value: string;\n  label: string;\n  offset?: number;\n  accessibleLabel?: string;\n}\n\nexport interface TokenSearchTrailingAction {\n  icon: SafeHtml;\n  label: string;\n  action: string;\n  id?: string;\n}\n\nexport type TokenSearchEditorAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-key'?: never;\n    'data-morph-skip'?: never;\n    'data-token-search-editor'?: never;\n    'data-token-count'?: never;\n    'data-placeholder'?: never;\n  }\n>;\n\ninterface TokenSearchFieldBaseProps {\n  id: string;\n  label: string;\n  query?: string;\n  tokens?: readonly TokenSearchToken[];\n  /** Opt-in grammar, suggestion, and evaluation state. Overrides `query` and `tokens`. */\n  model?: TokenSearchModel;\n  /**\n   * Editor identity for a programmatic text replacement. The editor's text is\n   * DOM-owned between token changes, so a new `query` with the same tokens\n   * does not re-render it (that would reset the caret on every keystroke).\n   * Change `revision` when the app replaces the text itself — reseeding a\n   * persistent dialog's field on reopen, applying a saved search — and the\n   * editor is rebuilt from `query` and `tokens`.\n   */\n  revision?: string | number;\n  placeholder?: string;\n  tokenPlaceholder?: string;\n  disabled?: boolean;\n  autofocus?: boolean;\n  /** Let an expanded collapsible field consume the available inline width. */\n  fill?: boolean;\n  leading?: KerfUiContent;\n  editAction?: string;\n  removeAction?: string;\n  clearAction?: string;\n  clearLabel?: string;\n  /** Icon for the clear button. Default: the Lucide `x` glyph token chips also use. */\n  clearIcon?: SafeHtml;\n  className?: string;\n  editorAttributes?: TokenSearchEditorAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\ntype TokenSearchTrailingProps =\n  | { trailing?: KerfUiContent; trailingAction?: never }\n  | { trailing?: never; trailingAction: TokenSearchTrailingAction };\n\ntype TokenSearchPresentationProps =\n  | {\n      /** Standalone field chrome or the inset visual layer of a configured toolbar group. */\n      presentation?: 'standalone' | 'toolbar-group';\n      hint?: never;\n      required?: never;\n    }\n  | {\n      /** Visible form label and optional hint around the full-width standalone control. */\n      presentation: 'form-field';\n      hint?: string;\n      /** Marks the editor required; the app validates its value. */\n      required?: boolean;\n    };\n\ntype TokenSearchCollapsibleProps =\n  | {\n      /** Allow an empty field to render as one iconic action. */\n      collapsible: true;\n      /** Keep an empty collapsible field open while the application owns focus. */\n      expanded?: boolean;\n      expandAction?: string;\n      expandLabel?: string;\n    }\n  | {\n      collapsible?: false;\n      expanded?: never;\n      expandAction?: never;\n      expandLabel?: never;\n    };\n\nexport type TokenSearchFieldProps = TokenSearchFieldBaseProps &\n  TokenSearchCollapsibleProps &\n  TokenSearchTrailingProps &\n  TokenSearchPresentationProps;\n\nexport interface TokenSearchFieldValue {\n  query: string;\n  tokens: TokenSearchToken[];\n}\n\ntype TokenSearchPart =\n  { kind: 'text'; value: string } | { kind: 'token'; token: TokenSearchToken };\n\nfunction orderedParts(\n  query: string,\n  tokens: readonly TokenSearchToken[],\n): TokenSearchPart[] {\n  const ordered = tokens\n    .map((token, index) => ({\n      token,\n      index,\n      offset: Math.max(0, Math.min(query.length, token.offset ?? query.length)),\n    }))\n    .sort(\n      (left, right) => left.offset - right.offset || left.index - right.index,\n    );\n  const parts: TokenSearchPart[] = [];\n  let cursor = 0;\n  for (const { token, offset } of ordered) {\n    parts.push({ kind: 'text', value: query.slice(cursor, offset) });\n    parts.push({ kind: 'token', token: { ...token, offset } });\n    cursor = offset;\n  }\n  parts.push({ kind: 'text', value: query.slice(cursor) });\n  return parts;\n}\n\nfunction CloseIcon() {\n  return <LucideIcon icon={X} name=\"x\" />;\n}\n\nexport function TokenSearchField({\n  id,\n  label,\n  query = '',\n  tokens = [],\n  model,\n  revision,\n  placeholder = 'Search',\n  tokenPlaceholder = 'Add search…',\n  disabled = false,\n  autofocus = false,\n  fill = false,\n  collapsible = false,\n  expanded = false,\n  expandAction = 'expand-token-search',\n  expandLabel,\n  leading,\n  trailing,\n  trailingAction,\n  presentation = 'standalone',\n  hint,\n  required = false,\n  editAction = 'edit-search-token',\n  removeAction = 'remove-search-token',\n  clearAction = 'clear-token-search',\n  clearLabel = 'Clear search',\n  clearIcon,\n  className = '',\n  editorAttributes = {},\n  slot,\n}: TokenSearchFieldProps) {\n  if (model) {\n    query = model.state.value.query;\n    tokens = model.state.value.tokens;\n  }\n  const suggestions = model?.suggestions.value ?? [];\n  const parts = orderedParts(query, tokens);\n  const tokenKey = tokens.map((token) => token.value).join('|');\n  const key = model\n    ? `${id}@${String(revision ?? '')}:${model.editorRevision.value}:${tokenKey}`\n    : revision === undefined\n      ? `${id}:${tokenKey}`\n      : `${id}@${String(revision)}:${tokenKey}`;\n  const resolvedExpanded =\n    !collapsible || expanded || query.length > 0 || tokens.length > 0;\n  const control = (\n    <div\n      class={`kui-token-search ${presentation === 'form-field' ? '' : className}`.trim()}\n      data-component=\"token-search-field\"\n      data-token-search-id={id}\n      data-disabled={String(disabled)}\n      data-collapsible={String(collapsible)}\n      data-expanded={String(resolvedExpanded)}\n      data-fill={String(fill)}\n      data-has-trailing={String(Boolean(trailing || trailingAction))}\n      data-presentation={presentation}\n      data-placeholder={tokens.length ? tokenPlaceholder : placeholder}\n      data-placeholder-visible={String(\n        query.length === 0 && tokens.length === 0,\n      )}\n      slot={slot}\n    >\n      {!resolvedExpanded ? (\n        <button\n          type=\"button\"\n          class=\"kui-token-search__expand\"\n          data-action={expandAction}\n          aria-label={expandLabel ?? label}\n          title={expandLabel ?? label}\n          disabled={disabled}\n        >\n          <LucideIcon icon={Search} name=\"search\" />\n        </button>\n      ) : (\n        <>\n          <span class=\"kui-token-search__leading\" aria-hidden=\"true\">\n            {leading ?? <LucideIcon icon={Search} name=\"search\" />}\n          </span>\n          <div\n            {...editorAttributes}\n            class=\"kui-token-search__editor\"\n            data-key={key}\n            data-morph-skip\n            data-token-search-editor={id}\n            data-token-count={tokens.length}\n            data-placeholder={tokens.length ? tokenPlaceholder : placeholder}\n            role=\"searchbox\"\n            aria-label={presentation === 'form-field' ? undefined : label}\n            aria-labelledby={\n              presentation === 'form-field' ? `${id}-label` : undefined\n            }\n            aria-describedby={\n              presentation === 'form-field' && hint ? `${id}-hint` : undefined\n            }\n            aria-required={required ? 'true' : undefined}\n            aria-disabled={disabled ? 'true' : undefined}\n            contenteditable={disabled ? 'false' : 'true'}\n            spellcheck=\"false\"\n            autofocus={autofocus}\n          >\n            {parts.map((part) =>\n              part.kind === 'text' ? (\n                <span\n                  data-token-search-text\n                  data-empty={String(part.value.length === 0)}\n                >\n                  {part.value || (tokens.length ? '\\u200b' : '')}\n                </span>\n              ) : (\n                <span\n                  class=\"kui-token-search__token\"\n                  contenteditable=\"false\"\n                  data-component=\"token-search-token\"\n                  data-token-value={part.token.value}\n                >\n                  <button\n                    type=\"button\"\n                    class=\"kui-token-search__token-edit\"\n                    data-action={editAction}\n                    data-token-value={part.token.value}\n                    aria-label={`Edit ${part.token.accessibleLabel ?? part.token.label}`}\n                    disabled={disabled}\n                  >\n                    {part.token.label}\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"kui-token-search__token-remove\"\n                    data-action={removeAction}\n                    data-token-value={part.token.value}\n                    aria-label={`Remove ${part.token.accessibleLabel ?? part.token.label}`}\n                    disabled={disabled}\n                  >\n                    <CloseIcon />\n                  </button>\n                </span>\n              ),\n            )}\n          </div>\n          {(query || tokens.length > 0) && (\n            <button\n              type=\"button\"\n              class=\"kui-token-search__clear\"\n              data-action={clearAction}\n              aria-label={clearLabel}\n              title={clearLabel}\n              disabled={disabled}\n            >\n              {clearIcon ?? <CloseIcon />}\n            </button>\n          )}\n          {trailingAction ? (\n            <button\n              type=\"button\"\n              class=\"kui-token-search__trailing-action\"\n              id={trailingAction.id}\n              data-action={trailingAction.action}\n              aria-label={trailingAction.label}\n              title={trailingAction.label}\n              disabled={disabled}\n            >\n              {trailingAction.icon}\n            </button>\n          ) : trailing ? (\n            <span class=\"kui-token-search__trailing\">{trailing}</span>\n          ) : null}\n          {!disabled && suggestions.length > 0 && (\n            <div\n              class=\"kui-token-search__suggestions\"\n              data-token-search-keep-open\n            >\n              {suggestions.map((suggestion) => (\n                <button\n                  type=\"button\"\n                  class=\"kui-token-search__suggestion\"\n                  data-token-search-suggestion={suggestion.value}\n                >\n                  {suggestion.label}\n                </button>\n              ))}\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n  if (presentation !== 'form-field') return control;\n  return (\n    <div\n      class={`kui-token-search__field ${className}`.trim()}\n      data-token-search-form-field={id}\n    >\n      <div\n        class=\"kui-token-search__field-label\"\n        id={`${id}-label`}\n        data-token-search-form-label={id}\n      >\n        {label}\n        {required && (\n          <span class=\"kui-token-search__field-required\" aria-hidden=\"true\">\n            *\n          </span>\n        )}\n      </div>\n      {control}\n      {hint && (\n        <div class=\"kui-token-search__field-hint\" id={`${id}-hint`}>\n          {hint}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Read editable text and ordered token offsets from a rendered TokenSearchField editor. */\nexport function readTokenSearchField(\n  editor: HTMLElement,\n  knownTokens: readonly TokenSearchToken[] = [],\n): TokenSearchFieldValue {\n  let query = '';\n  const tokens: TokenSearchToken[] = [];\n  const visit = (node: Node): void => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      query += (node.textContent ?? '')\n        .replaceAll('\\u00a0', ' ')\n        .replaceAll('\\u200b', '');\n      return;\n    }\n    if (!(node instanceof HTMLElement)) return;\n    if (node.matches('[data-component=\"token-search-token\"]')) {\n      const value = node.dataset.tokenValue;\n      const known = knownTokens.find((token) => token.value === value);\n      if (known) tokens.push({ ...known, offset: query.length });\n      else if (value)\n        tokens.push({ value, label: value, offset: query.length });\n      return;\n    }\n    if (node.tagName === 'BR') {\n      query += ' ';\n      return;\n    }\n    for (const child of node.childNodes) visit(child);\n  };\n  for (const child of editor.childNodes) visit(child);\n  return { query, tokens };\n}\n\n/** Focus an editor and place its caret at a text offset, skipping atomic token chips. */\nexport function placeTokenSearchCaret(\n  editor: HTMLElement,\n  offset?: number,\n): void {\n  editor.focus({ preventScroll: true });\n  const selection = globalThis.getSelection();\n  if (!selection) return;\n  const range = document.createRange();\n  if (offset === undefined) {\n    range.selectNodeContents(editor);\n    range.collapse(false);\n  } else {\n    let remaining = Math.max(0, offset);\n    let found = false;\n    const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT, {\n      acceptNode: (node) =>\n        node.parentElement?.closest('[data-component=\"token-search-token\"]')\n          ? NodeFilter.FILTER_REJECT\n          : NodeFilter.FILTER_ACCEPT,\n    });\n    for (let node = walker.nextNode(); node; node = walker.nextNode()) {\n      const source = node.textContent ?? '';\n      const length = source.replaceAll('\\u200b', '').length;\n      if (remaining <= length) {\n        range.setStart(\n          node,\n          source === '\\u200b' ? 0 : Math.min(remaining, source.length),\n        );\n        range.collapse(true);\n        found = true;\n        break;\n      }\n      remaining -= length;\n    }\n    if (!found) {\n      range.selectNodeContents(editor);\n      range.collapse(false);\n    }\n  }\n  selection.removeAllRanges();\n  selection.addRange(range);\n}\n"]}

package/dist/{chunk-VLPE6OPN.js → chunk-62VMNBV2.js}

@@ -1,4 +1,4 @@
-import { readTokenSearchField, placeTokenSearchCaret } from './chunk-G4VKQP7B.js';
+import { readTokenSearchField, placeTokenSearchCaret } from './chunk-3SXWV2IR.js';
 import { autoUpdate, computePosition, offset, flip, shift, size } from '@floating-ui/dom';
 import { delegate, delegateCapture, signal } from 'kerfjs';
 
@@ -379,6 +379,10 @@ function wireTokenSearchFields(root, {
     const field = editor.closest(
       '[data-component="token-search-field"]'
     );
+    if (field)
+      field.dataset.placeholderVisible = String(
+        !editor.querySelector(TOKEN_SELECTOR) && readTokenSearchField(editor).query.length === 0
+      );
     const id = field?.dataset.tokenSearchId;
     if (id && field?.dataset.disabled !== "true") {
       const model = models[id];
@@ -772,4 +776,4 @@ function wireTokenSearchFields(root, {
 
 export { wireTokenSearchFields };
 
-//# sourceMappingURL=chunk-VLPE6OPN.js.map
+//# sourceMappingURL=chunk-62VMNBV2.js.map