@kerfjs/ui 5.0.0-beta.103 → 5.0.0-beta.105

package/ai/components/color-picker.md

@@ -0,0 +1,90 @@
+# ColorPicker
+
+<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
+
+`@kerfjs/ui:color-picker` · Kerf UI · component · Controls
+
+A full inline color picker: a saturation and brightness area, hue and opacity sliders, an RGB/HSL/HSB/Grayscale model menu with channel fields, a hex field (8 digits below full opacity) and opacity field, a screen sampler where the EyeDropper API exists, and optional preset and sample swatches.
+
+## When to use
+
+Let a person choose any color precisely, by dragging, typing channel or hex values, sampling the screen, or picking a preset or saved sample.
+
+- Any color is allowed and the person may need precision (a fill, stroke, or brand color): render ColorPicker with value, wire wireColorPickers with onChange, and re-render with the reported value and mode.
+- A design tool keeps presets or saved colors: pass presets, samples, and addSampleAction.
+
+**Not when:**
+
+- Do not use it for a small curated palette; use ColorSwatches.
+- Do not leave it always open in a form; use ColorField, which opens it from a swatch and hex trigger.
+- Do not use wa-color-picker or a native color input styled by hand.
+
+**Alternatives:**
+
+- [ColorSwatches](./color-swatches.md) (nearest) — Use ColorSwatches for a fixed palette.
+
+## Imports
+
+- JavaScript: `@kerfjs/ui/color-picker` — exports `ColorPicker`, `ColorPickerProps`, `ColorPickerMode`, `ColorPickerSamples`, `ColorPickerRootAttributes`, `colorPickerChannels`, `colorPickerAreaText`, `colorPickerStyle`.
+- CSS: the browser build of `@kerfjs/ui/color-picker` pulls its CSS automatically; import `@kerfjs/ui/color-picker.css` manually only without the `browser` export condition.
+- Wiring: `wireColorPickers` from `@kerfjs/ui/wire-color-pickers` (required).
+- Declared side effects: browser-condition-css.
+
+## Props
+
+Exact prop names and types: [`@kerfjs/ui/color-picker`](../public-api-signatures-v1.md#kerfjsuicolor-picker) in `public-api-signatures-v1.md`. Do not infer props from examples.
+
+**Variants (configure, do not restyle):**
+
+- with or without opacity
+- RGB, HSL, HSB, or Grayscale channel fields
+- presets and titled sample groups with an add button
+- screen sampler where the EyeDropper API exists
+- disabled
+
+## Composition
+
+- Parents: any.
+- Contexts: `application-ui`.
+- Children: unrestricted.
+- Built from: [ColorSwatches](./color-swatches.md), [LucideIcon](./lucide-icon.md).
+
+## State and wiring
+
+**The app owns:** the value and mode (update them from onChange and re-render); presets and samples, and adding to samples on addSampleAction; the field name and form association.
+
+**Wiring:** `wireColorPickers` is required.
+
+- Use wireColorPickers as documented.
+
+**Wiring-owned state attributes** — never render, remove, or branch on these as app state:
+
+- `data-shown` on `kui-color-picker__channel` (`wireColorPickers`): The text a channel, hex, or opacity field last showed, so leaving an unedited field commits nothing.
+- `data-count` on `kui-color-picker__channels` (`wireColorPickers`): How many channel fields the current model shows (1 for Grayscale, 3 otherwise).
+
+## Geometry
+
+Margin: none · border: self · padding: self (layout role: controls). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
+
+- The panel takes the shared block-content inset and a 320px maximum width; its rows are 12px apart.
+
+## Accessibility
+
+- The area is a slider named Saturation and Brightness with a spoken value; the arrow keys move it (Shift for 10% steps), Page Up and Down change brightness, Home and End saturation.
+- Hue and opacity are native range inputs; every field is named (Red, Hue, Hex Color, Opacity); the picker is a named group.
+
+## 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-color-picker`, `kui-color-picker__surface`, `kui-color-picker__area`, `kui-color-picker__area-thumb`, `kui-color-picker__hue`, `kui-color-picker__opacity`, `kui-color-picker__controls`, `kui-color-picker__mode-wrap`, `kui-color-picker__mode-icon`, `kui-color-picker__mode`, `kui-color-picker__tool`, `kui-color-picker__channels`, `kui-color-picker__hex-row`, `kui-color-picker__field`, `kui-color-picker__field-label`, `kui-color-picker__field--hex`.
+
+Never put `kui-color-picker`, `kui-color-picker__surface`, `kui-color-picker__area`, `kui-color-picker__area-thumb`, `kui-color-picker__hue`, `kui-color-picker__opacity`, `kui-color-picker__controls`, `kui-color-picker__mode-wrap`, `kui-color-picker__mode-icon`, `kui-color-picker__mode`, `kui-color-picker__tool`, `kui-color-picker__channels`, `kui-color-picker__hex-row`, `kui-color-picker__field`, `kui-color-picker__field-label`, `kui-color-picker__field--hex` on an element you write; render `ColorPicker` instead (`KUI-L103`).
+
+Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-*` selectors (`KUI-L001`, `KUI-L010`), unknown or private tokens (`KUI-L002`, `KUI-L012`), and any application rule that restyles the component, forced dimensions included (`KUI-L019`).
+
+## Related
+
+- Components: [ColorSwatches](./color-swatches.md), [LucideIcon](./lucide-icon.md).
+- Docs: [`docs/color-picker.md`](../../docs/color-picker.md), [`docs/component-selection.md#problem-to-component-matrix`](../../docs/component-selection.md#problem-to-component-matrix).
+- UX catalog route: `?component=color-picker`.

package/ai/components/color-swatches.md

@@ -0,0 +1,82 @@
+# ColorSwatches
+
+<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
+
+`@kerfjs/ui:color-swatches` · Kerf UI · component · Controls
+
+A fixed palette: a native radio group of round color swatches with no visible text, each named by its color, the chosen one ringed independently of hue, with a struck-through no-color swatch, compact size, and disabled state.
+
+## When to use
+
+Let a person choose one color from a small fixed palette (a label, tag, or command color), or no color.
+
+- A setting takes one color from a small, curated palette (a label, calendar, or command color): render ColorSwatches with name, a label, swatches, and value, and read the choice on change.
+- No color is a valid choice: include a swatch with color 'transparent'.
+
+**Not when:**
+
+- Do not use it when any color is allowed; use a ColorPicker or ColorField.
+- Do not use it for choices that are not colors; use ChoiceChips or a RadioGroup.
+- Do not put text in the swatches; the color's label names each one.
+
+**Alternatives:**
+
+- [ChoiceChips](./choice-chips.md) (nearest) — Use ChoiceChips with swatches when each color also needs a visible name.
+- [RadioGroup](./radio-group.md) (nearest) — Use a RadioGroup for choices that are not colors.
+
+## Imports
+
+- JavaScript: `@kerfjs/ui/color-swatches` — exports `ColorSwatches`, `ColorSwatchesProps`, `ColorSwatch`, `ColorSwatchesSize`, `ColorSwatchesRootAttributes`.
+- CSS: the browser build of `@kerfjs/ui/color-swatches` pulls its CSS automatically; import `@kerfjs/ui/color-swatches.css` manually only without the `browser` export condition.
+- Declared side effects: browser-condition-css.
+
+## Props
+
+Exact prop names and types: [`@kerfjs/ui/color-swatches`](../public-api-signatures-v1.md#kerfjsuicolor-swatches) in `public-api-signatures-v1.md`. Do not infer props from examples.
+
+**Variants (configure, do not restyle):**
+
+- fixed palette with a visible label
+- a no-color swatch
+- compact size
+- disabled
+- ariaLabel without a visible label
+
+## Composition
+
+- Parents: any.
+- Contexts: `application-ui`.
+- Children: unrestricted.
+
+## State and wiring
+
+**The app owns:** the palette and its color names; the chosen value (read it on change through action); the field name and form association.
+
+No wiring helper.
+
+## Geometry
+
+Margin: none · border: self · padding: self (layout role: controls). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
+
+- The group takes the shared block-content inset (a transparent 1px border and 8px padding), so its label sits on the text column; each swatch keeps 4px of room for its ring, pulled back at the row's edges.
+
+## Accessibility
+
+- It is a native radio group: Tab reaches it once and the arrow keys move the choice; each radio is named by its color label, also shown as the swatch's hover hint.
+- The chosen swatch wears a ring in the text color set off by a gap, so the choice never depends on hue; forced colors draw it in Highlight.
+
+## 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-color-swatches`, `kui-color-swatches__label`, `kui-color-swatches__list`, `kui-color-swatches__swatch`, `kui-color-swatches__input`, `kui-color-swatches__dot`.
+
+Never put `kui-color-swatches`, `kui-color-swatches__label`, `kui-color-swatches__list`, `kui-color-swatches__swatch`, `kui-color-swatches__input`, `kui-color-swatches__dot` on an element you write; render `ColorSwatches` instead (`KUI-L103`).
+
+Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-*` selectors (`KUI-L001`, `KUI-L010`), unknown or private tokens (`KUI-L002`, `KUI-L012`), and any application rule that restyles the component, forced dimensions included (`KUI-L019`).
+
+## Related
+
+- Components: [ChoiceChips](./choice-chips.md), [RadioGroup](./radio-group.md).
+- Docs: [`docs/color-swatches.md`](../../docs/color-swatches.md), [`docs/component-selection.md#problem-to-component-matrix`](../../docs/component-selection.md#problem-to-component-matrix).
+- UX catalog route: `?component=color-swatches`.

package/ai/components/combobox.md

@@ -15,13 +15,13 @@ Let people pick an existing value or create a new one by typing (tags, labels, r
 **Not when:**
 
 - Do not use when only existing values are allowed and nothing needs typing; use Select.
-- Do not use for free text plus removable filter tokens in one editor; use TokenSearchField.
+- Do not use for free text plus removable filter tokens in one editor; use SearchField.
 - Do not style a native input with a datalist from app CSS.
 
 **Alternatives:**
 
 - [Select](./select.md) (nearest) — Use Select when only existing values are allowed.
-- [TokenSearchField](./token-search-field.md) (nearest) — Use TokenSearchField for search text with removable filter tokens.
+- [SearchField](./search-field.md) (nearest) — Use SearchField for search text with removable filter tokens.
 
 ## Imports
 
@@ -58,6 +58,7 @@ Exact prop names and types: [`@kerfjs/ui/combobox`](../public-api-signatures-v1.
 **Wiring-owned state attributes** — never render, remove, or branch on these as app state:
 
 - `data-value` on `the create option (kui-combobox__option[data-create])` (`wireComboboxes`): The typed text the create option would commit; rewritten as the person types.
+- `data-placement` on `kui-combobox__listbox` (`wireComboboxes`): The side the open listbox was placed on (bottom-start, or top-start after a flip when the field is near the viewport's bottom).
 
 ## Geometry
 
@@ -68,6 +69,7 @@ Margin: none · border: self · padding: self (layout role: controls). `self` me
 ## Accessibility
 
 - Native input with role=combobox, aria-autocomplete=list, aria-expanded, aria-controls, and aria-activedescendant; options are role=option in a listbox. The visible label is a real label; the hint is aria-describedby.
+- The suggestion listbox is a manual popover in the top layer, placed below the field at its width and flipped when short, so a clipping or scrolling ancestor (an AnchoredSurface, a dialog, a scrolling List) never cuts it off.
 
 ## Styling boundary
 
@@ -77,12 +79,12 @@ Public class hooks (select for layout placement only, never to change the compon
 
 Never put `kui-combobox`, `kui-combobox__label`, `kui-combobox__hint`, `kui-combobox__control`, `kui-combobox__input`, `kui-combobox__listbox`, `kui-combobox__option` on an element you write; render `Combobox` instead (`KUI-L103`).
 
-Public tokens it reads: `--kui-combobox-z-index`, `--kui-color-neutral-on-quiet`, `--kui-color-text-quiet`, `--kui-color-neutral-border-normal`, `--kui-color-text`, `--kui-color-surface`, `--kui-color-surface-raised`, `--kui-color-text-link`, `--kui-color-brand-fill-quiet`, `--kui-font-xs`, `--kui-font-s`, `--kui-layout-item-padding`, `--kui-layout-rounded-radius`, `--kui-shadow-l`, `--kui-space-2xs`, `--kui-space-xs`. Set a token only where its public contract allows; prefer a prop.
+Public tokens it reads: `--kui-color-neutral-on-quiet`, `--kui-color-text-quiet`, `--kui-color-neutral-border-normal`, `--kui-color-text`, `--kui-color-surface`, `--kui-color-surface-raised`, `--kui-color-text-link`, `--kui-color-brand-fill-quiet`, `--kui-font-xs`, `--kui-font-s`, `--kui-layout-item-padding`, `--kui-layout-rounded-radius`, `--kui-shadow-l`, `--kui-space-2xs`, `--kui-space-xs`. Set a token only where its public contract allows; prefer a prop.
 
 Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-*` selectors (`KUI-L001`, `KUI-L010`), unknown or private tokens (`KUI-L002`, `KUI-L012`), and any application rule that restyles the component, forced dimensions included (`KUI-L019`).
 
 ## Related
 
-- Components: [Select](./select.md), [TokenSearchField](./token-search-field.md).
+- Components: [Select](./select.md), [SearchField](./search-field.md).
 - Docs: [`docs/component-selection.md`](../../docs/component-selection.md), [`docs/component-selection.md#problem-to-component-matrix`](../../docs/component-selection.md#problem-to-component-matrix).
 - UX catalog route: `?component=combobox`.

package/ai/components/content-item.md

@@ -32,12 +32,13 @@ Render one self-contained .kui-content child that owns its 8px inline margin, re
 ## Imports
 
 - JavaScript: `@kerfjs/ui/content-item` — exports `ContentItem`.
+- JavaScript: `@kerfjs/ui/selection` — exports `applySelection`, `selectionGesture`, `isApplePlatform`.
 - CSS: the browser build of `@kerfjs/ui/content-item` pulls its CSS automatically; import `@kerfjs/ui/content-item.css` manually only without the `browser` export condition.
 - Declared side effects: browser-condition-css.
 
 ## Props
 
-Exact prop names and types: [`@kerfjs/ui/content-item`](../public-api-signatures-v1.md#kerfjsuicontent-item) in `public-api-signatures-v1.md`. Do not infer props from examples.
+Exact prop names and types: [`@kerfjs/ui/content-item`](../public-api-signatures-v1.md#kerfjsuicontent-item), [`@kerfjs/ui/selection`](../public-api-signatures-v1.md#kerfjsuiselection) in `public-api-signatures-v1.md`. Do not infer props from examples.
 
 **Variants (configure, do not restyle):**
 
@@ -51,6 +52,7 @@ Exact prop names and types: [`@kerfjs/ui/content-item`](../public-api-signatures
 - chat bubble at the start or end of the row (bubble), fit to its content up to 80%
 - named focus-target region
 - multi-select rich grid row
+- gridRow: a non-selectable row (role="row" with a gridcell) between selectable rows of a multi-select List or Grid
 
 ## Composition
 
@@ -75,7 +77,8 @@ Margin: self · border: self · padding: self (layout role: structure). `self` m
 - An ordinary item adds no role or name; pass ariaLabel only when the item is a distinct named region (it then renders role="region").
 - focusTarget makes the item a programmatic focus target (tabindex="-1", never a tab stop), such as a NavStack view's data-nav-focus target.
 - The frame is decorative and never the only signal of state.
-- selectionMode="multiple" renders a focusable row with aria-selected and a gridcell for nested controls; place it in a labeled List selectionMode="multiple" grid. wireContentItems moves focus among rows with Up/Down and Home/End while nested controls retain those keys. Guard the app's delegated card action with isContentItemActivation so a nested control does not select the row.
+- selectionMode="multiple" renders a focusable row with aria-selected and a gridcell for nested controls; place it in a labeled List selectionMode="multiple" grid. wireContentItems moves focus among rows with Up/Down and Home/End while nested controls retain those keys. Enter and Space activate the card with a click that carries the key's Shift, Ctrl, and Cmd state, so one delegated click handler implements range and toggle selection for pointer and keyboard alike. Guard the app's delegated card action with isContentItemActivation so a nested control does not select the row.
+- In a multi-select List or Grid, wireContentItems keeps one roving Tab stop (the last focused row, else the first selected, else the first enabled) across re-renders. A gridRow item is a row with a gridcell and no aria-selected or Tab stop; arrow keys skip it and its controls stay reachable by Tab.
 
 ## Styling boundary
 

package/ai/components/disclosure.md

@@ -0,0 +1,83 @@
+# Disclosure
+
+<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
+
+`@kerfjs/ui:disclosure` · Kerf UI · component · Structure
+
+Content a person shows and hides under a summary row: a native details element with a DisclosureArrow, a title, and an optional quiet detail, on content-item geometry, with plain, framed, and sunken appearances and native exclusive (accordion) groups.
+
+## When to use
+
+Keep secondary or optional content one press away under a summary, or let a person open one of several sections at a time.
+
+- Optional or advanced content should stay out of the way until a person asks for it (advanced settings, a build log, release notes).
+- A list of questions or sections should open one at a time: give the Disclosures the same name for a native exclusive accordion.
+
+**Not when:**
+
+- Do not use it to switch between peer views; use a SegmentedControl or TabBar.
+- Do not use it for primary navigation or a collapsible sidebar; use a List or CollapsiblePanel.
+- Do not hand-build a details element with its own marker CSS, and do not use wa-details or wa-accordion.
+
+**Alternatives:**
+
+- [CollapsiblePanel](./collapsible-panel.md) (nearest) — Use a CollapsiblePanel for a rail or drawer that collapses beside the work area.
+
+## Imports
+
+- JavaScript: `@kerfjs/ui/disclosure` — exports `Disclosure`, `DisclosureProps`, `DisclosureAppearance`, `DisclosureRootAttributes`.
+- CSS: the browser build of `@kerfjs/ui/disclosure` pulls its CSS automatically; import `@kerfjs/ui/disclosure.css` manually only without the `browser` export condition.
+- Declared side effects: browser-condition-css.
+
+## Props
+
+Exact prop names and types: [`@kerfjs/ui/disclosure`](../public-api-signatures-v1.md#kerfjsuidisclosure) in `public-api-signatures-v1.md`. Do not infer props from examples.
+
+**Variants (configure, do not restyle):**
+
+- plain, framed, or sunken appearance
+- open or closed initially
+- a quiet detail after the title
+- an exclusive accordion group sharing a name
+
+## Composition
+
+- Parents: any.
+- Contexts: `application-ui`.
+- Children: unrestricted.
+- Built from: [DisclosureArrow](./disclosure-arrow.md), [LucideIcon](./lucide-icon.md).
+
+## State and wiring
+
+**The app owns:** the title, detail, and content; the initial open state, and closing it from code (element.open = false); the exclusive group name; reacting to the native toggle event (captured, through toggleAction).
+
+No wiring helper.
+
+## Geometry
+
+Margin: self · border: self · padding: self (layout role: structure). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
+
+- The root takes the content-item geometry (8px inline margin, a 1px border, 8px padding); the content starts on the title's text column.
+
+## Accessibility
+
+- The native summary is a button that Enter and Space toggle and that reports its expanded state; the DisclosureArrow is decorative.
+- Keep the title a short, meaningful name for the hidden content; the open state survives re-renders because the platform owns it.
+
+## 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-disclosure`, `kui-disclosure__summary`, `kui-disclosure__title`, `kui-disclosure__detail`, `kui-disclosure__content`.
+
+Never put `kui-disclosure`, `kui-disclosure__summary`, `kui-disclosure__title`, `kui-disclosure__detail`, `kui-disclosure__content` on an element you write; render `Disclosure` instead (`KUI-L103`).
+
+Public tokens it reads: `--kui-disclosure-arrow-size`. Set a token only where its public contract allows; prefer a prop.
+
+Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-*` selectors (`KUI-L001`, `KUI-L010`), unknown or private tokens (`KUI-L002`, `KUI-L012`), and any application rule that restyles the component, forced dimensions included (`KUI-L019`).
+
+## Related
+
+- Components: [DisclosureArrow](./disclosure-arrow.md), [LucideIcon](./lucide-icon.md), [CollapsiblePanel](./collapsible-panel.md).
+- Docs: [`docs/disclosure.md`](../../docs/disclosure.md), [`docs/component-selection.md#problem-to-component-matrix`](../../docs/component-selection.md#problem-to-component-matrix).
+- UX catalog route: `?component=disclosure`.

package/ai/components/file-picker.md

@@ -40,6 +40,7 @@ Exact prop names and types: [`@kerfjs/ui/file-picker`](../public-api-signatures-
 - disabled
 - accept filter
 - multiple or single
+- dropScope: a selector for an enclosing panel that also takes drops, highlighting the zone while files are over any part of it
 
 ## Composition
 

package/ai/components/foundation.md

@@ -55,7 +55,7 @@ Margin: none · border: none · padding: none (layout role: foundation). `self`
 
 The component owns its own styles. Configure it through its props and variants; do not override its internals.
 
-Public tokens it reads: `--kui-font-sans`, `--kui-font-mono`, `--kui-font-2xs`, `--kui-font-xs`, `--kui-font-s`, `--kui-font-m`, `--kui-font-l`, `--kui-font-xl`, `--kui-font-2xl`, `--kui-font-weight-semibold`, `--kui-space-none`, `--kui-space-2xs`, `--kui-space-xs`, `--kui-space-s`, `--kui-space-m`, `--kui-space-l`, `--kui-space-xl`, `--kui-bp-mobile`, `--kui-bp-tablet`, `--kui-bp-desktop`, `--kui-bp-xl-desktop`, `--kui-layout-inline-margin`, `--kui-layout-item-border-width`, `--kui-layout-item-padding`, `--kui-layout-item-gap`, `--kui-layout-content-gap`, `--kui-layout-control-gap`, `--kui-layout-metadata-gap`, `--kui-layout-highlight-inset`, `--kui-layout-rounded-radius`, `--kui-layout-pill-radius`, `--kui-toolbar-group-inner-size`, `--kui-toolbar-group-size`, `--kui-toolbar-gap`, `--kui-safe-area-block-start`, `--kui-safe-area-block-end`, `--kui-safe-area-inline-start`, `--kui-safe-area-inline-end`, `--kui-radius-s`, `--kui-radius-m`, `--kui-radius-l`, `--kui-radius-circle`, `--kui-radius-pill`, `--kui-disclosure-icon-scale`, `--kui-color-surface`, `--kui-color-surface-raised`, `--kui-color-surface-lowered`, `--kui-sunken-texture`, `--kui-sunken-surface`, `--kui-chrome-material`, `--kui-chrome-material-raised`, `--kui-chrome-material-filter`, `--kui-color-text`, `--kui-color-text-quiet`, `--kui-color-text-link`, `--kui-color-neutral-fill-quiet`, `--kui-color-neutral-fill-normal`, `--kui-color-neutral-fill-loud`, `--kui-color-neutral-border-quiet`, `--kui-color-neutral-border-normal`, `--kui-color-neutral-border-loud`, `--kui-color-neutral-on-quiet`, `--kui-color-neutral-on-normal`, `--kui-color-neutral-on-loud`, `--kui-color-brand-fill-loud`, `--kui-color-brand-fill-quiet`, `--kui-color-brand-fill-normal`, `--kui-color-brand-border-quiet`, `--kui-color-brand-border-normal`, `--kui-color-brand-border-loud`, `--kui-color-brand-on-quiet`, `--kui-color-brand-on-normal`, `--kui-color-brand-on-loud`, `--kui-color-brand-on-fill`, `--kui-color-pop-fill-loud`, `--kui-color-pop-fill-quiet`, `--kui-color-pop-fill-normal`, `--kui-color-pop-border-quiet`, `--kui-color-pop-border-normal`, `--kui-color-pop-border-loud`, `--kui-color-pop-on-quiet`, `--kui-color-pop-on-normal`, `--kui-color-pop-on-loud`, `--kui-color-pop-on-fill`, `--kui-color-success-fill-loud`, `--kui-color-success-fill-quiet`, `--kui-color-success-fill-normal`, `--kui-color-success-border-quiet`, `--kui-color-success-border-normal`, `--kui-color-success-border-loud`, `--kui-color-success-on-quiet`, `--kui-color-success-on-normal`, `--kui-color-success-on-loud`, `--kui-color-success-on-fill`, `--kui-color-warning-fill-loud`, `--kui-color-warning-fill-quiet`, `--kui-color-warning-fill-normal`, `--kui-color-warning-border-quiet`, `--kui-color-warning-border-normal`, `--kui-color-warning-border-loud`, `--kui-color-warning-on-quiet`, `--kui-color-warning-on-normal`, `--kui-color-warning-on-loud`, `--kui-color-warning-on-fill`, `--kui-color-danger-fill-loud`, `--kui-color-danger-fill-quiet`, `--kui-color-danger-fill-normal`, `--kui-color-danger-border-quiet`, `--kui-color-danger-border-normal`, `--kui-color-danger-border-loud`, `--kui-color-danger-on-quiet`, `--kui-color-danger-on-normal`, `--kui-color-danger-on-loud`, `--kui-color-danger-on-fill`, `--kui-focus-ring`, `--kui-shadow-s`, `--kui-shadow-l`. Set a token only where its public contract allows; prefer a prop.
+Public tokens it reads: `--kui-font-sans`, `--kui-font-mono`, `--kui-font-2xs`, `--kui-font-xs`, `--kui-font-s`, `--kui-font-m`, `--kui-font-l`, `--kui-font-xl`, `--kui-font-2xl`, `--kui-font-weight-semibold`, `--kui-space-none`, `--kui-space-2xs`, `--kui-space-xs`, `--kui-space-s`, `--kui-space-m`, `--kui-space-l`, `--kui-space-xl`, `--kui-bp-mobile`, `--kui-bp-tablet`, `--kui-bp-desktop`, `--kui-bp-xl-desktop`, `--kui-layout-inline-margin`, `--kui-layout-item-border-width`, `--kui-layout-item-padding`, `--kui-layout-item-gap`, `--kui-layout-content-gap`, `--kui-layout-control-gap`, `--kui-layout-metadata-gap`, `--kui-layout-highlight-inset`, `--kui-layout-rounded-radius`, `--kui-layout-pill-radius`, `--kui-toolbar-group-inner-size`, `--kui-toolbar-group-size`, `--kui-toolbar-gap`, `--kui-safe-area-block-start`, `--kui-safe-area-block-end`, `--kui-safe-area-inline-start`, `--kui-safe-area-inline-end`, `--kui-radius-s`, `--kui-radius-m`, `--kui-radius-l`, `--kui-radius-circle`, `--kui-radius-pill`, `--kui-disclosure-icon-scale`, `--kui-color-surface`, `--kui-color-surface-raised`, `--kui-color-surface-lowered`, `--kui-sunken-texture`, `--kui-sunken-surface`, `--kui-chrome-material`, `--kui-chrome-material-raised`, `--kui-chrome-material-filter`, `--kui-color-text`, `--kui-color-text-quiet`, `--kui-color-text-link`, `--kui-color-neutral-fill-quiet`, `--kui-color-neutral-fill-normal`, `--kui-color-neutral-fill-loud`, `--kui-color-neutral-border-quiet`, `--kui-color-neutral-border-normal`, `--kui-color-neutral-border-loud`, `--kui-color-neutral-on-quiet`, `--kui-color-neutral-on-normal`, `--kui-color-neutral-on-loud`, `--kui-color-brand-fill-loud`, `--kui-color-brand-fill-quiet`, `--kui-color-brand-fill-normal`, `--kui-color-brand-border-quiet`, `--kui-color-brand-border-normal`, `--kui-color-brand-border-loud`, `--kui-color-brand-on-quiet`, `--kui-color-brand-on-normal`, `--kui-color-brand-on-loud`, `--kui-color-brand-on-fill`, `--kui-color-pop-fill-loud`, `--kui-color-pop-fill-quiet`, `--kui-color-pop-fill-normal`, `--kui-color-pop-border-quiet`, `--kui-color-pop-border-normal`, `--kui-color-pop-border-loud`, `--kui-color-pop-on-quiet`, `--kui-color-pop-on-normal`, `--kui-color-pop-on-loud`, `--kui-color-pop-on-fill`, `--kui-color-success-fill-loud`, `--kui-color-success-fill-quiet`, `--kui-color-success-fill-normal`, `--kui-color-success-border-quiet`, `--kui-color-success-border-normal`, `--kui-color-success-border-loud`, `--kui-color-success-on-quiet`, `--kui-color-success-on-normal`, `--kui-color-success-on-loud`, `--kui-color-success-on-fill`, `--kui-color-warning-fill-loud`, `--kui-color-warning-fill-quiet`, `--kui-color-warning-fill-normal`, `--kui-color-warning-border-quiet`, `--kui-color-warning-border-normal`, `--kui-color-warning-border-loud`, `--kui-color-warning-on-quiet`, `--kui-color-warning-on-normal`, `--kui-color-warning-on-loud`, `--kui-color-warning-on-fill`, `--kui-color-danger-fill-loud`, `--kui-color-danger-fill-quiet`, `--kui-color-danger-fill-normal`, `--kui-color-danger-border-quiet`, `--kui-color-danger-border-normal`, `--kui-color-danger-border-loud`, `--kui-color-danger-on-quiet`, `--kui-color-danger-on-normal`, `--kui-color-danger-on-loud`, `--kui-color-danger-on-fill`, `--kui-focus-ring`, `--kui-shadow-s`, `--kui-shadow-m`, `--kui-shadow-l`. Set a token only where its public contract allows; prefer a prop.
 
 Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-*` selectors (`KUI-L001`, `KUI-L010`), unknown or private tokens (`KUI-L002`, `KUI-L012`), and any application rule that restyles the component, forced dimensions included (`KUI-L019`).
 

package/ai/components/list-action-row.md

@@ -16,13 +16,13 @@ Keep a selectable primary row action and an independently named trailing action
 
 **Not when:**
 
-- Use ListItem when trailing content is dormant metadata; use AppTab only for tablist semantics and ToolbarControlGroup only for toolbar controls.
+- Use ListItem when trailing content is dormant metadata; use TabBarItem only for tablist semantics and ToolbarControlGroup only for toolbar controls.
 - Do not inject declaration strings; use className, public tokens, and cataloged component props for application styling.
 
 **Alternatives:**
 
 - [ListItem](./list-item.md) (nearest) — Trailing content is noninteractive.
-- [AppTab](./tabs.md) (semantic alternative) — The primary control selects a tabpanel inside TabBar.
+- [TabBarItem](./tabs.md) (semantic alternative) — The primary control selects a tabpanel inside TabBar.
 
 ## Imports
 
@@ -103,6 +103,6 @@ Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-
 
 ## Related
 
-- Components: [LucideIcon](./lucide-icon.md), [LoadingSpinner](./loading-spinner.md), [PopupMenu](./popup-menu.md), [ListItem](./list-item.md), [AppTab](./tabs.md).
+- Components: [LucideIcon](./lucide-icon.md), [LoadingSpinner](./loading-spinner.md), [PopupMenu](./popup-menu.md), [ListItem](./list-item.md), [TabBarItem](./tabs.md).
 - Docs: [`docs/component-selection.md`](../../docs/component-selection.md), [`docs/component-selection.md#problem-to-component-matrix`](../../docs/component-selection.md#problem-to-component-matrix).
 - UX catalog route: `?component=list-action-row`.

package/ai/components/list-detail-dialog.md

@@ -0,0 +1,90 @@
+# ListDetailDialog
+
+<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
+
+`@kerfjs/ui:list-detail-dialog` · Kerf UI · component · Structure
+
+A modal list-detail dialog whose list and detail columns each run its full height: the list column carries a secondary title and its own controls, the detail column carries the dialog's primary title, actions, and close control, and compact devices get a full-screen drill-down.
+
+## When to use
+
+Present a selectable list beside the selected item's detail inside a modal, with the dialog's title and close control in the detail column and a one-pane drill-down on compact devices.
+
+- A modal task picks one record from a list and shows its detail beside it (project details, account switcher, settings categories): render ListDetailDialog with list and detail, open it with openDialog(), and pass compact from deviceClass().value.compact.
+- The dialog's primary title, actions, and close control belong to the selected item's detail rather than spanning both columns, and the column divider should run the dialog's full height.
+
+**Not when:**
+
+- Do not use it for a single-pane dialog; use DialogSurface.
+- Do not compose DialogSurface around a SplitView by hand for this layout; the surface header would span both columns and stop the divider below it.
+- Do not use it when the task needs a durable route or more working space than a modal; use a page with SplitView.
+
+**Alternatives:**
+
+- [Surface Scaffolds](./surface-scaffold.md) (nearest) — Use DialogSurface for a single-pane dialog.
+- [SplitView](./split-view.md) (responsive-alternative) — Use SplitView for the same list-detail flow as a page rather than a modal.
+- [WorkbenchDialog](./workbench-dialog.md) (nearest) — Use WorkbenchDialog for an editing task with side panels.
+
+## Imports
+
+- JavaScript: `@kerfjs/ui/list-detail-dialog` — exports `ListDetailDialog`, `ListDetailDialogProps`, `ListDetailDialogList`, `ListDetailDialogDetail`, `ListDetailDialogRootAttributes`, `openDialog`, `closeDialog`.
+- CSS: the browser build of `@kerfjs/ui/list-detail-dialog` pulls its CSS automatically; import `@kerfjs/ui/list-detail-dialog.css` manually only without the `browser` export condition.
+- Wiring: `wireNavStack` from `@kerfjs/ui/wire-nav-stack` (optional).
+- Declared side effects: browser-condition-css.
+
+## Props
+
+Exact prop names and types: [`@kerfjs/ui/list-detail-dialog`](../public-api-signatures-v1.md#kerfjsuilist-detail-dialog), [`@kerfjs/ui/wire-nav-stack`](../public-api-signatures-v1.md#kerfjsuiwire-nav-stack) in `public-api-signatures-v1.md`. Do not infer props from examples.
+
+**Variants (configure, do not restyle):**
+
+- roomy modal: a full-height list column and a full-height detail column with a fixed list width (default 280px, at most 40% of the dialog)
+- list column header controls and a pinned list footer
+- detail header actions before the close control, a description under the title, and a pinned detail footer
+- compact full-screen NavStack drill-down with the close control on every view
+- definite height (default 560px) or a viewport height cap, viewport gutter, size or preferred width, and light dismiss
+
+## Composition
+
+- Parents: any.
+- Contexts: `application-ui`.
+- Children: unrestricted.
+- Built from: [Surface Scaffolds](./surface-scaffold.md), [SplitView](./split-view.md), [NavStack](./nav-stack.md), [Pane](./pane.md), [Toolbar](./toolbar.md), [ToolbarText](./toolbar-text.md), [ToolbarControlGroup](./toolbar-control-group.md), [LucideIcon](./lucide-icon.md).
+
+## State and wiring
+
+**The app owns:** open state (openDialog and closeDialog); device-class policy (compact); selected item and, on compact devices, detailActive and the back action (nav-back); list and detail content, their titles, toolbar controls, and footers; dismissal policy (lightDismiss).
+
+**Wiring:** `wireNavStack` is optional.
+
+**Wiring-owned state attributes** — never render, remove, or branch on these as app state:
+
+- `data-nav-chrome-transition` on `kui-nav-stack` (`wireNavStack`): "true" while the chrome cross-fades between the outgoing and incoming view.
+- `data-nav-chrome-copy` on `kui-nav-stack__chrome-copy` (`wireNavStack`): Marks the inert, aria-hidden snapshot of the outgoing chrome shown during the cross-fade.
+- `data-nav-revealed` on `kui-nav-stack__view` (`wireNavStack`): "true" on the preserved, aria-hidden previous view while an incoming view slides over it.
+- `data-nav-exiting` on `kui-nav-stack__view` (`wireNavStack`): "true" on a popped view the helper briefly re-inserts to slide it out.
+- `data-chrome-overlay` on `kui-nav-stack` (`wireNavStack`): measured once the helper has measured the compact stack's overlay chrome (compactStack.chromePresentation: overlay) and published its border-box height on the stack root. Re-applied if a re-render drops it.
+- `data-bottom-toolbar-overlay` on `kui-nav-stack` (`wireNavStack`): measured once the helper has measured the compact stack's overlay bottom toolbar (compactStack.bottomToolbarPresentation: overlay) and published its border-box height on the stack root. Re-applied if a re-render drops it.
+
+## Geometry
+
+Margin: parent · border: self · padding: child (layout role: structure). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
+
+- The dialog draws no header and no body inset; each column is a Pane that owns its chrome and content insets, and the column divider runs the dialog's full height.
+
+## Accessibility
+
+- It is a native modal \<dialog> named by label: the page is inert, focus stays inside, Escape asks to close, and focus returns to the opener on close.
+- On roomy devices the detail title is a level-2 heading; every presentation keeps a close control named Close (closeLabel), and the compact back control is named by backLabel.
+
+## Styling boundary
+
+The component owns its own styles. Configure it through its props and variants; do not override its internals.
+
+Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-*` selectors (`KUI-L001`, `KUI-L010`), unknown or private tokens (`KUI-L002`, `KUI-L012`), and any application rule that restyles the component, forced dimensions included (`KUI-L019`).
+
+## Related
+
+- Components: [Surface Scaffolds](./surface-scaffold.md), [SplitView](./split-view.md), [NavStack](./nav-stack.md), [Pane](./pane.md), [Toolbar](./toolbar.md), [ToolbarText](./toolbar-text.md), [ToolbarControlGroup](./toolbar-control-group.md), [LucideIcon](./lucide-icon.md), [WorkbenchDialog](./workbench-dialog.md).
+- Docs: [`docs/list-detail-dialog.md`](../../docs/list-detail-dialog.md), [`docs/recipes.md#list-detail-dialog`](../../docs/recipes.md#list-detail-dialog).
+- UX catalog route: `?component=list-detail-dialog`.

package/ai/components/list.md

@@ -20,6 +20,7 @@ Standardize vertical component layout, optional physical-side text/control inset
 - Use scrollClearance on the scrollable List that reaches an edge overlaid by chrome (a DialogSurface floating footer) so rows scroll visibly beneath it while the first and last rows still rest clear of it.
 - Render a bounded, framed result picker of ListItem rows (search results, duplicate candidates) with scrollable, frame, and typed maxHeight/minHeight instead of an app-owned bordered scroller.
 - Call wireListFocusScroll(root) once when keyboard users move focus through a scrollable List's rows, so Firefox and Safari bring a partly hidden focused row and its ring fully into view as Chromium does.
+- Cap and center a page-level content column (a settings page or setup form) with contentWidth and, for long prose, inset="document", instead of an application max-width wrapper.
 
 **Not when:**
 
@@ -62,6 +63,7 @@ Exact prop names and types: [`@kerfjs/ui/list`](../public-api-signatures-v1.md#k
 - rootAttributes: safe data-\*, aria-\*, and structural role on the root
 - scroll dividers when named as wireScrollDividers targets chrome
 - multi-select grid for rich ContentItem rows
+- contentWidth (compact 440px, medium 640px, wide 864px) and contentAlign for a readable, centered page column
 
 **CSS-value props** (typed builders from `@kerfjs/ui/css-values`; raw CSS strings are rejected):
 

package/ai/components/lucide-icon.md

@@ -35,6 +35,7 @@ Exact prop names and types: [`@kerfjs/ui/lucide-icon`](../public-api-signatures-
 - inline text flow
 - outline (default appearance)
 - solid (appearance=solid)
+- hover title for a status icon
 
 ## Composition
 
@@ -55,6 +56,7 @@ Margin: none · border: none · padding: none (layout role: foundation). `self`
 ## Accessibility
 
 - Decorative icons are aria-hidden; meaningful icons require a label.
+- title adds an SVG \<title> as hover text over the whole icon box (a transparent hit box fills the 24-unit view box); with label, the label stays the name, and alone the title names the icon.
 
 ## Usage examples
 

package/ai/components/{composer.md → message-composer.md}

@@ -1,10 +1,10 @@
-# Composer
+# MessageComposer
 
 <!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
 
-`@kerfjs/ui:composer` · Kerf UI · component · Controls
+`@kerfjs/ui:message-composer` · Kerf UI · component · Controls
 
-A raised chat or prompt composer: a framed message field that grows with its content above an action row with a hint and a send button.
+A raised chat or prompt composer: a framed message field that grows with its content above a compact Toolbar action row with leading controls, a hint, and a send button.
 
 ## When to use
 
@@ -19,25 +19,26 @@ Write a chat message or prompt in a raised frame whose border turns brand while
 
 **Alternatives:**
 
-- [Textarea](./wa-textarea.md) (prefer-over) — Use Composer instead of a wa-textarea and a button in app-styled chrome for a chat or prompt composer; it owns the raised frame, focus-within border, auto-grow, and action row.
+- [Textarea](./wa-textarea.md) (prefer-over) — Use MessageComposer instead of a wa-textarea and a button in app-styled chrome for a chat or prompt composer; it owns the raised frame, focus-within border, auto-grow, and action row.
 
 ## Imports
 
-- JavaScript: `@kerfjs/ui/composer` — exports `Composer`, `wireComposers`.
-- CSS: the browser build of `@kerfjs/ui/composer` pulls its CSS automatically; import `@kerfjs/ui/composer.css` manually only without the `browser` export condition.
-- Wiring: `wireComposers` from `@kerfjs/ui/wire-composers` (optional).
+- JavaScript: `@kerfjs/ui/message-composer` — exports `MessageComposer`, `wireMessageComposers`.
+- CSS: the browser build of `@kerfjs/ui/message-composer` pulls its CSS automatically; import `@kerfjs/ui/message-composer.css` manually only without the `browser` export condition.
+- Wiring: `wireMessageComposers` from `@kerfjs/ui/wire-message-composers` (optional).
 - Declared side effects: browser-condition-css.
 
 ## Props
 
-Exact prop names and types: [`@kerfjs/ui/composer`](../public-api-signatures-v1.md#kerfjsuicomposer), [`@kerfjs/ui/wire-composers`](../public-api-signatures-v1.md#kerfjsuiwire-composers) in `public-api-signatures-v1.md`. Do not infer props from examples.
+Exact prop names and types: [`@kerfjs/ui/message-composer`](../public-api-signatures-v1.md#kerfjsuimessage-composer), [`@kerfjs/ui/wire-message-composers`](../public-api-signatures-v1.md#kerfjsuiwire-message-composers) in `public-api-signatures-v1.md`. Do not infer props from examples.
 
 **Variants (configure, do not restyle):**
 
 - minRows and maxRows bounds for the growing field
 - optional hint, described by the field when an id is given
+- optional leading controls (attach, model Select) in the Toolbar action row's leading zone
 - disabled field
-- submitOnEnter: Enter or Cmd/Ctrl+Enter activates the first trailing action, Shift+Enter inserts a newline (with wireComposers)
+- submitOnEnter: Enter or Cmd/Ctrl+Enter activates the first trailing action, Shift+Enter inserts a newline (with wireMessageComposers)
 - slotted into a DialogSurface floating footer
 
 ## Composition
@@ -45,7 +46,7 @@ Exact prop names and types: [`@kerfjs/ui/composer`](../public-api-signatures-v1.
 - Parents: any.
 - Contexts: `chat-composer`, `dialog-floating-footer`.
 - Children: unrestricted.
-- Built from: [Text](./text.md).
+- Built from: [Text](./text.md), [Toolbar](./toolbar.md).
 
 Zones (a zone is bound to JSX only through its listed prop; never assume the zone id is a prop):
 
@@ -55,7 +56,7 @@ Zones (a zone is bound to JSX only through its listed prop; never assume the zon
 
 - value — controlled
 
-**Wiring:** `wireComposers` is optional.
+**Wiring:** `wireMessageComposers` is optional.
 
 ## Geometry
 
@@ -70,14 +71,14 @@ Margin: none · border: self · padding: self (layout role: controls). `self` me
 
 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-composer`.
+Public class hooks (select for layout placement only, never to change the component's look): `kui-message-composer`.
 
-Never put `kui-composer` on an element you write; render `Composer` instead (`KUI-L103`).
+Never put `kui-message-composer` on an element you write; render `MessageComposer` instead (`KUI-L103`).
 
 Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-*` selectors (`KUI-L001`, `KUI-L010`), unknown or private tokens (`KUI-L002`, `KUI-L012`), and any application rule that restyles the component, forced dimensions included (`KUI-L019`).
 
 ## Related
 
-- Components: [Text](./text.md), [Textarea](./wa-textarea.md).
-- Docs: [`docs/composer.md`](../../docs/composer.md), [`docs/accessibility.md#composer`](../../docs/accessibility.md#composer).
-- UX catalog route: `?component=composer`.
+- Components: [Text](./text.md), [Toolbar](./toolbar.md), [Textarea](./wa-textarea.md).
+- Docs: [`docs/message-composer.md`](../../docs/message-composer.md), [`docs/accessibility.md#messagecomposer`](../../docs/accessibility.md#messagecomposer).
+- UX catalog route: `?component=message-composer`.

package/ai/components/pane.md

@@ -37,6 +37,7 @@ Organize a sidebar, main area, inspector, or dialog column into fixed vertical h
 - JavaScript: `@kerfjs/ui/pane` — exports `Pane`, `wireScrollDividers`.
 - CSS: the browser build of `@kerfjs/ui/pane` pulls its CSS automatically; import `@kerfjs/ui/pane.css` manually only without the `browser` export condition.
 - Wiring: `wireScrollDividers` from `@kerfjs/ui/wire-scroll-dividers` (optional).
+- Wiring: `wirePaneChrome` from `@kerfjs/ui/wire-pane-chrome` (optional).
 - Declared side effects: browser-condition-css.
 
 ## Props
@@ -59,6 +60,7 @@ Exact prop names and types: [`@kerfjs/ui/pane`](../public-api-signatures-v1.md#k
 - app-chosen background color (background), replacing the default or sunken fill
 - scoped tint re-deriving surface and text tokens from an app color (tint)
 - clear (transparent) overlay header, optionally with the scroll-edge material (headerPresentation: clear, scrollEdge: material)
+- compactChrome { header, footer }: fixed, scroll, or overlay (opened by compactChromeOpen), applied by a NavStack view, TabNavigator scene, full-screen dialog, or compact Workbench
 
 ## Composition
 
@@ -76,7 +78,7 @@ Zones (a zone is bound to JSX only through its listed prop; never assume the zon
 
 **The app owns:** root and content semantics; accessible labels; header, content, and footer children; which logical boundaries show separators; which sides may compensate for device safe areas in an app-owned arrangement (safeAreaEdges); responsive placement and visibility; whether the chrome dividers follow the scroll, always show, or never show (chromeDividers); default or sunken scrolling work surface (appearance); whether to reserve a vertical scrollbar gutter for opaque edge-to-edge content (--kui-pane-scrollbar-gutter); optional keyboard or programmatic focus (tabIndex) and persistent focus outline (outlined); whether the scrolling content clears overlaying chrome on its block edges (scrollClearance, also in PaneConfig, so a Workbench mainPane or panel pane, a CollapsiblePanel pane, or a NavStack view pane forwards it); whether the header is docked in its own row or laid over the scrolling content on the translucent chrome material (headerPresentation, also in PaneConfig); an optional app-chosen surface color that replaces the appearance's fill (background, a typed CssColor from @kerfjs/ui/css-values, also in PaneConfig, so a Workbench panel or mainPane, a CollapsiblePanel pane, or a NavStack view pane forwards it); an optional scoped tint (tint: { color, scheme }, also in PaneConfig): the color and the declared light or dark scheme it belongs to; Kerf does no color detection; an optional tint accent (tint.accent) that re-derives the brand ramp, links, and focus ring inside the tinted scope at AA.
 
-**Wiring:** `wireScrollDividers` is optional.
+**Wiring:** `wireScrollDividers`, `wirePaneChrome` is optional.
 
 **Wiring-owned state attributes** — never render, remove, or branch on these as app state: