@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.110

package/ai/components/skeleton.md

@@ -0,0 +1,84 @@
+# Skeleton
+
+<!-- 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:skeleton` · Kerf UI · component · Feedback
+
+## When to use
+
+A subtle, unanimated loading placeholder block for a not-yet-known value slot.
+
+- Stand in for a value that is still loading, on its own or via a component's placeholder prop, keeping the surrounding layout stable.
+- Placeholder a custom or free-text slot with the same visual the components' placeholder mode uses.
+- Set width and height with typed length builders or finite intrinsic-size keywords; set radius with a typed length.
+
+**Not when:**
+
+- Do not use for known progress or a busy spinner; use LoadingSpinner.
+- Do not animate it or use it as decorative filler.
+- Do not pass raw CSS strings or cross property grammars into width, height, or radius.
+
+**Alternatives:**
+
+- [Skeleton](./wa-skeleton.md) (prefer-over)
+
+## Imports
+
+- JavaScript: `@kerfjs/ui/skeleton` — exports `Skeleton`.
+- CSS: the browser build of `@kerfjs/ui/skeleton` pulls its CSS automatically; import `@kerfjs/ui/skeleton.css` manually only without the `browser` export condition.
+- Declared side effects: browser-condition-css.
+
+## Props
+
+Exact prop names and types: [`@kerfjs/ui/skeleton`](../public-api-signatures-v1.md#kerfjsuiskeleton) in `public-api-signatures-v1.md`. Do not infer props from examples.
+
+**Variants (configure, do not restyle):**
+
+- block
+- lines
+- labeled
+- typed width, height, and radius
+
+**CSS-value props** (typed builders from `@kerfjs/ui/css-values`; raw CSS strings are rejected):
+
+- `width`: size grammar; raw values: forbid; shorthands `auto`, `min-content`, `max-content`, `fit-content`; helpers `px`, `rem`, `em`, `pct`, `space`, `lengthVar`, `calc` — e.g. `width={em(12)}`
+- `height`: size grammar; raw values: forbid; shorthands `auto`, `min-content`, `max-content`, `fit-content`; helpers `px`, `rem`, `em`, `pct`, `space`, `lengthVar`, `calc` — e.g. `height={em(1.5)}`
+- `radius`: length grammar; raw values: forbid; helpers `px`, `rem`, `em`, `pct`, `space`, `lengthVar`, `calc` — e.g. `radius={px(999)}`
+
+## Composition
+
+- Parents: any.
+- Contexts: `application-ui`.
+- Children: unrestricted.
+
+## State and wiring
+
+**The app owns:** loading lifecycle; which slots are unknown; announcing the loading region.
+
+No wiring helper.
+
+## Geometry
+
+Margin: none · border: none · padding: none (layout role: feedback). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
+
+## Accessibility
+
+- Decorative by default (aria-hidden); pass label to announce it as an image. A component in placeholder mode marks itself aria-busy and disables its own controls.
+
+## 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-skeleton`, `kui-skeleton-lines`.
+
+Never put `kui-skeleton`, `kui-skeleton-lines` on an element you write; render `Skeleton` instead (`KUI-L103`).
+
+Public tokens it reads: `--kui-skeleton-radius`. 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: [Skeleton](./wa-skeleton.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=skeleton`.

package/ai/components/slider.md

@@ -0,0 +1,84 @@
+# Slider
+
+<!-- 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:slider` · Kerf UI · component · Controls
+
+A value on a continuous or stepped range: a native range input drawn as a track, a brand fill, and a thumb, with a label row, an optional live readout and unit, labeled tick stops, a hint, compact size, and disabled state.
+
+## When to use
+
+Let a person pick a value from a range where the relative position matters more than an exact number (volume, zoom, opacity, a threshold).
+
+- A setting is a value in a known range and dragging to it is natural (volume, zoom, opacity): render Slider with min, max, step, and a label; add showValue and unit for a readout.
+- Discrete stops deserve names under the track: pass ticks.
+
+**Not when:**
+
+- Do not use it when the exact number matters or the range is huge; use a TextField with type number.
+- Do not use it for an on/off choice (use Switch) or for a few named options (use SegmentedControl).
+- Do not use wa-slider.
+
+**Alternatives:**
+
+- [SegmentedControl](./segmented-control.md) (nearest) — Use a SegmentedControl for a handful of named options.
+- [TextField](./text-field.md) (nearest) — Use a numeric TextField when the exact value matters.
+
+## Imports
+
+- JavaScript: `@kerfjs/ui/slider` — exports `Slider`, `SliderProps`, `SliderSize`, `SliderTick`, `SliderRootAttributes`.
+- CSS: the browser build of `@kerfjs/ui/slider` pulls its CSS automatically; import `@kerfjs/ui/slider.css` manually only without the `browser` export condition.
+- Wiring: `wireSliders` from `@kerfjs/ui/wire-sliders` (optional).
+- Declared side effects: browser-condition-css.
+
+## Props
+
+Exact prop names and types: [`@kerfjs/ui/slider`](../public-api-signatures-v1.md#kerfjsuislider) in `public-api-signatures-v1.md`. Do not infer props from examples.
+
+**Variants (configure, do not restyle):**
+
+- labeled with a live readout and unit
+- stepped with labeled ticks
+- compact size
+- disabled
+- ariaLabel without a visible label
+- orientation="vertical" with a length, minimum at the bottom, for a volume control in a popup
+
+## Composition
+
+- Parents: any.
+- Contexts: `application-ui`.
+- Children: unrestricted.
+
+## State and wiring
+
+**The app owns:** the value (read it on input or change through action) and re-rendering with it; min, max, step, and ticks; the label, hint, and unit.
+
+**Wiring:** `wireSliders` is optional.
+
+## 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.
+
+- It fills the available width with the shared block-content inset (a transparent 1px border and 8px padding), so its label sits on the text column.
+
+## Accessibility
+
+- It is a native range input: arrow keys, Page Up and Down, Home, and End step it, and the platform announces its value (with a unit, as aria-valuetext).
+- The label names it, the hint describes it, and the readout is hidden from assistive technology because the input already reports its value; forced colors draw a Highlight fill on a GrayText track.
+
+## 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-slider`, `kui-slider__header`, `kui-slider__label`, `kui-slider__value`, `kui-slider__input`, `kui-slider__ticks`, `kui-slider__tick`, `kui-slider__hint`.
+
+Never put `kui-slider`, `kui-slider__header`, `kui-slider__label`, `kui-slider__value`, `kui-slider__input`, `kui-slider__ticks`, `kui-slider__tick`, `kui-slider__hint` on an element you write; render `Slider` 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: [SegmentedControl](./segmented-control.md), [TextField](./text-field.md).
+- Docs: [`docs/slider.md`](../../docs/slider.md), [`docs/component-selection.md#problem-to-component-matrix`](../../docs/component-selection.md#problem-to-component-matrix).
+- UX catalog route: `?component=slider`.

package/ai/components/spacer.md

@@ -0,0 +1,86 @@
+# Spacer
+
+<!-- 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:spacer` · Kerf UI · component · Structure
+
+A decorative, non-shrinking fixed gap or flexible main-axis spacer with typed physical width and height.
+
+## When to use
+
+Express an intentional empty dimension or consume remaining flex space without application-owned spacer markup or raw CSS lengths.
+
+- Reserve a fixed empty width or height from the UI spacing scale inside a layout.
+- Push siblings to opposite ends of a Row or other flex container by passing flex.
+- Use a typed CssLength when the finite spacing scale cannot express the required dimension.
+
+**Not when:**
+
+- Do not use Spacer for ordinary rhythm between siblings; prefer Row.gap or List.gap so the parent owns repeated spacing.
+- Do not use Spacer to compensate for component-owned padding, margin, alignment, or responsive layout defects.
+- Do not pass raw CSS strings to width or height.
+
+**Alternatives:**
+
+- [Row](./row.md) (parent-spacing-alternative) — Use Row.gap when every horizontal sibling needs the same repeated separation.
+- [List](./list.md) (parent-spacing-alternative) — Use List.gap when every vertical sibling needs the same repeated separation.
+
+## Imports
+
+- JavaScript: `@kerfjs/ui/spacer` — exports `Spacer`.
+- CSS: the browser build of `@kerfjs/ui/spacer` pulls its CSS automatically; import `@kerfjs/ui/spacer.css` manually only without the `browser` export condition.
+- Declared side effects: browser-condition-css.
+
+## Props
+
+Exact prop names and types: [`@kerfjs/ui/spacer`](../public-api-signatures-v1.md#kerfjsuispacer) in `public-api-signatures-v1.md`. Do not infer props from examples.
+
+**Variants (configure, do not restyle):**
+
+- fixed named width and/or height
+- fixed typed CssLength width and/or height
+- flexible main-axis space
+
+**CSS-value props** (typed builders from `@kerfjs/ui/css-values`; raw CSS strings are rejected):
+
+- `width`: length grammar; raw values: forbid; shorthands `none`, `2xs`, `xs`, `m`, `l`; exceptional (justify) `s`, `xl`; helpers `px`, `rem`, `em`, `pct`, `space`, `lengthVar`, `calc` — e.g. `width="m"`
+- `height`: length grammar; raw values: forbid; shorthands `none`, `2xs`, `xs`, `m`, `l`; exceptional (justify) `s`, `xl`; helpers `px`, `rem`, `em`, `pct`, `space`, `lengthVar`, `calc` — e.g. `height="xs"`
+
+## Composition
+
+- Parents: any.
+- Contexts: `application-ui`.
+- Children: unrestricted.
+
+## State and wiring
+
+**The app owns:** whether the empty space carries structural meaning; the named or typed dimensions; whether the spacer fills the flex main axis.
+
+No wiring helper.
+
+## Geometry
+
+Margin: none · border: none · padding: none (layout role: structure). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
+
+- A fixed Spacer does not shrink. flex changes its flex shorthand from 0 0 auto to 1 1 auto; width and height remain physical dimensions.
+
+## Accessibility
+
+- Spacer is always decorative and hidden from the accessibility tree.
+- Spacer must not contain content or become an interaction target.
+
+## 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-spacer`.
+
+Never put `kui-spacer` on an element you write; render `Spacer` 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: [Row](./row.md), [List](./list.md).
+- Docs: [`docs/layout.md`](../../docs/layout.md), [`docs/layout.md#spacer`](../../docs/layout.md#spacer).
+- UX catalog route: `?component=spacer`.

package/ai/components/split-button.md

@@ -0,0 +1,83 @@
+# SplitButton
+
+<!-- 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:split-button` · Kerf UI · component · Controls
+
+A primary action with an attached options trigger on one loud semantic fill.
+
+## When to use
+
+Render a prominent primary action plus an options trigger (provider, model, target) as one control with a semantic tone, full-width sizing, a rounded or pill shape, a busy presentation, and native aria-expanded on the trigger, outside any Toolbar.
+
+- A prominent primary action has a closely related set of options chosen from an attached trigger, such as Drive with a provider menu or Deploy with targets.
+
+**Not when:**
+
+- Do not use for a plain action without options; use wa-button.
+- Do not use inside a Toolbar for a command menu; use PopupMenu in a ToolbarControlGroup.
+- Do not use wa-button-group to build one; its hosts do not forward aria-expanded or names to their inner buttons.
+
+**Alternatives:**
+
+- [Button Group](./wa-button-group.md) (prefer-over) — SplitButton's native halves expose names and aria-expanded directly.
+- [PopupMenu](./popup-menu.md) (composes-with) — Open the app's options menu from optionsAction; PopupMenu remains the command menu inside a toolbar.
+
+## Imports
+
+- JavaScript: `@kerfjs/ui/split-button` — exports `SplitButton`.
+- CSS: the browser build of `@kerfjs/ui/split-button` pulls its CSS automatically; import `@kerfjs/ui/split-button.css` manually only without the `browser` export condition.
+- Declared side effects: browser-condition-css.
+
+## Props
+
+Exact prop names and types: [`@kerfjs/ui/split-button`](../public-api-signatures-v1.md#kerfjsuisplit-button) in `public-api-signatures-v1.md`. Do not infer props from examples.
+
+**Variants (configure, do not restyle):**
+
+- brand, neutral, success, warning, or danger tone
+- content width or fill
+- rounded or pill shape
+- busy
+- disabled primary or options
+- focusRingInset: each half's focus ring drawn inside its box for an ancestor that clips overflow
+
+## Composition
+
+- Parents: any.
+- Contexts: `application-ui`.
+- Children: unrestricted.
+- Built from: [LucideIcon](./lucide-icon.md), [LoadingSpinner](./loading-spinner.md).
+
+## State and wiring
+
+**The app owns:** the primary and options actions; the options menu and its open state; the running state, tone switch, and copy.
+
+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.
+
+## Accessibility
+
+- Both halves are native buttons in a group; the options trigger exposes aria-haspopup, aria-expanded, and optional aria-controls, and needs optionsLabel. busy sets aria-busy on the primary.
+- Each half draws the focus ring 1px outside its box; with focusRingInset it is drawn inside, two-tone with a surface-colored line inside the ring color, so it keeps 3:1 contrast on every loud fill.
+
+## 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-split-button`, `kui-split-button__options`, `kui-split-button__icon`, `kui-split-button__label`.
+
+Never put `kui-split-button`, `kui-split-button__options`, `kui-split-button__icon`, `kui-split-button__label` on an element you write; render `SplitButton` instead (`KUI-L103`).
+
+Public tokens it reads: `--kui-color-brand-fill-loud`, `--kui-color-brand-on-loud`, `--kui-color-neutral-fill-loud`, `--kui-color-neutral-on-loud`, `--kui-color-success-fill-loud`, `--kui-color-success-on-loud`, `--kui-color-warning-fill-loud`, `--kui-color-warning-on-loud`, `--kui-color-danger-fill-loud`, `--kui-color-danger-on-loud`, `--kui-focus-ring`, `--kui-font-weight-semibold`, `--kui-layout-pill-radius`, `--kui-layout-rounded-radius`, `--kui-space-s`, `--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: [LucideIcon](./lucide-icon.md), [LoadingSpinner](./loading-spinner.md), [Button Group](./wa-button-group.md), [PopupMenu](./popup-menu.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=split-button`.

package/ai/components/split-view.md

@@ -0,0 +1,105 @@
+# SplitView
+
+<!-- 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:split-view` · Kerf UI · component · Structure
+
+A responsive list-detail layout that shows both panes on roomy device classes and collapses to a navigation stack on compact classes.
+
+## When to use
+
+Present a selectable list and its detail together when space permits, with a one-pane drill-down replacement on compact devices.
+
+- Selection in a primary list updates a related detail pane and both should remain visible on roomy device classes.
+- The same list-detail flow must become a navigation stack on a handset or portrait tablet.
+
+**Not when:**
+
+- Do not use SplitView for a single linear flow; use NavStack.
+- Do not use it for a complex desktop tool with multiple peripheral panels; use Workbench.
+
+**Alternatives:**
+
+- [Navigation Stack](./recipe-navigation-stack.md) (responsive-alternative) — SplitView renders the one-pane navigation-stack form on compact device classes.
+- [Workbench](./workbench.md) (nearest) — Use Workbench when a desktop-class tool needs more than the list and detail regions.
+
+## Imports
+
+- JavaScript: `@kerfjs/ui/split-view` — exports `SplitView`, `SplitViewProps`, `SplitViewResizable`, `SplitViewCompactStack`, `SplitViewCompactViewToolbars`.
+- CSS: the browser build of `@kerfjs/ui/split-view` pulls its CSS automatically; import `@kerfjs/ui/split-view.css` manually only without the `browser` export condition.
+- Wiring: `wireResizableRegions` from `@kerfjs/ui/wire-resizable-regions` (optional).
+- Wiring: `wireNavStack` from `@kerfjs/ui/wire-nav-stack` (required).
+- Declared side effects: browser-condition-css.
+
+## Props
+
+Exact prop names and types: [`@kerfjs/ui/split-view`](../public-api-signatures-v1.md#kerfjsuisplit-view), [`@kerfjs/ui/wire-resizable-regions`](../public-api-signatures-v1.md#kerfjsuiwire-resizable-regions), [`@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):**
+
+- fixed roomy split with listWidth: a pixel size, optionally capped at a fraction of the split's width
+- resizable roomy split
+- collapsed resizable list with a restore control
+- compact list
+- compact detail
+- compact stack with configured toolbars
+
+## Composition
+
+- Parents: any.
+- Contexts: `list-detail`, `responsive-master-detail`.
+- Children: unrestricted.
+- Built from: [NavStack](./nav-stack.md), [ResizableRegion](./resize.md).
+
+Zones (a zone is bound to JSX only through its listed prop; never assume the zone id is a prop):
+
+- `list` — JSX prop `list`; accepts `list-region`; exactly 1.
+- `detail` — JSX prop `detail`; accepts `detail-region`; exactly 1.
+
+## State and wiring
+
+**The app owns:** device-class policy; selected item and detail-active state; list and detail content; optional list width and persistence; optional list collapse state and its restore control; compact list and detail toolbar groups, toolbar configuration, and chrome dividers; back action.
+
+**Wiring:** `wireResizableRegions`, `wireNavStack` is required.
+
+- Use wireNavStack as documented.
+
+**Wiring-owned state attributes** — never render, remove, or branch on these as app state:
+
+- `data-handle-inset` on `kui-resizable-region` (`wireResizableRegions`): Present while a clipping edge clamps the region: the handle and its focus ring sit inside the region instead of overhanging that edge.
+- `data-resizing` on `kui-resizable-region` (`wireResizableRegions`): "true" during an active pointer drag of the handle.
+- `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: none · 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 root owns the two-column split and the list pane owns its separator; list and detail content own their internal padding and scroll behavior.
+
+## Accessibility
+
+- Give the overall split and both meaningful panes accessible labels.
+- Wire the compact back action and optional separator keyboard behavior, and restore focus when controlled navigation replaces a view.
+
+## 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-split-view`, `kui-split-view__list`, `kui-split-view__detail`, `kui-split-view--compact`.
+
+Never put `kui-split-view`, `kui-split-view__list`, `kui-split-view__detail`, `kui-split-view--compact` on an element you write; render `SplitView` instead (`KUI-L103`).
+
+Public tokens it reads: `--kui-split-view-list-width`. 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: [NavStack](./nav-stack.md), [ResizableRegion](./resize.md), [Navigation Stack](./recipe-navigation-stack.md), [Workbench](./workbench.md).
+- Docs: [`docs/split-view.md`](../../docs/split-view.md), [`docs/app-layouts.md#decision-matrix`](../../docs/app-layouts.md#decision-matrix).
+- UX catalog route: `?component=split-view`.

package/ai/components/state-banner.md

@@ -0,0 +1,96 @@
+# StateBanner
+
+<!-- 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:state-banner` · Kerf UI · component · Feedback
+
+Polite status and assertive alert feedback with semantic tones, plus non-status pop emphasis for featured or novel content.
+
+## When to use
+
+Present persistent inline feedback or attractive non-status emphasis with a named semantic tone.
+
+- Place persistent inline semantic status beside affected work.
+
+**Not when:**
+
+- Do not use for an absent-content screen or transient confirmation.
+- Do not use pop as a substitute for success, warning, or danger.
+
+**Alternatives:**
+
+- [EmptyState](./empty-state.md) (nearest)
+- [Callout](./wa-callout.md) (prefer-over)
+- [Toast](./wa-toast.md) (prefer-over)
+- [CornerStatus](./corner-status.md) (composes-with) — Host app-level progress in a viewport corner with CornerStatus instead of fixed-position CSS.
+
+## Imports
+
+- JavaScript: `@kerfjs/ui/state-banner` — exports `StateBanner`.
+- CSS: the browser build of `@kerfjs/ui/state-banner` pulls its CSS automatically; import `@kerfjs/ui/state-banner.css` manually only without the `browser` export condition.
+- Declared side effects: browser-condition-css.
+
+## Props
+
+Exact prop names and types: [`@kerfjs/ui/state-banner`](../public-api-signatures-v1.md#kerfjsuistate-banner) in `public-api-signatures-v1.md`. Do not infer props from examples.
+
+**Variants (configure, do not restyle):**
+
+- neutral
+- info
+- pop
+- success
+- warning
+- danger
+- status
+- alert
+- badge
+- stacked copy
+- action below
+- strip presentation
+- placeholder (loading)
+
+## Composition
+
+- Parents: any.
+- Contexts: `persistent-status`, `recoverable-error`.
+- Children: unrestricted.
+- Built from: [Badge](./badge.md), [LucideIcon](./lucide-icon.md).
+
+Zones (a zone is bound to JSX only through its listed prop; never assume the zone id is a prop):
+
+- `icon` — JSX prop `icon`; accepts `dormant-decoration`; 0–1.
+- `action` — JSX prop `action`; accepts `control`; 0–1.
+
+## State and wiring
+
+**The app owns:** badge content; state mapping; message lifetime; retry behavior; copy.
+
+No wiring helper.
+
+## Geometry
+
+Margin: self · border: self · padding: self (layout role: feedback). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
+
+## Accessibility
+
+- Use alert urgency only for an attention-requiring failure.
+- Keep optional badge content terse and do not rely on its tone alone for meaning.
+
+## 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-state-banner`, `kui-state-banner__action`, `kui-state-banner__copy`, `kui-state-banner__detail`, `kui-state-banner__icon`.
+
+Never put `kui-state-banner`, `kui-state-banner__action`, `kui-state-banner__copy`, `kui-state-banner__detail`, `kui-state-banner__icon` on an element you write; render `StateBanner` instead (`KUI-L103`).
+
+Public tokens it reads: `--kui-color-brand-border-quiet`, `--kui-color-brand-fill-quiet`, `--kui-color-brand-on-fill`, `--kui-color-pop-border-normal`, `--kui-color-pop-fill-quiet`, `--kui-color-pop-on-fill`, `--kui-color-danger-border-quiet`, `--kui-color-danger-fill-quiet`, `--kui-color-danger-on-fill`, `--kui-color-neutral-border-normal`, `--kui-color-neutral-fill-quiet`, `--kui-color-neutral-on-normal`, `--kui-color-neutral-on-quiet`, `--kui-color-success-border-normal`, `--kui-color-success-fill-quiet`, `--kui-color-success-on-fill`, `--kui-color-surface`, `--kui-color-text-link`, `--kui-color-warning-border-normal`, `--kui-color-warning-fill-quiet`, `--kui-color-warning-on-fill`, `--kui-font-2xs`, `--kui-font-xs`, `--kui-radius-pill`, `--kui-state-banner-action-background`, `--kui-state-banner-action-hover-background`, `--kui-state-banner-background`, `--kui-state-banner-border`, `--kui-state-banner-copy-gap`, `--kui-state-banner-copy-row-gap`, `--kui-state-banner-danger-background`, `--kui-state-banner-danger-border`, `--kui-state-banner-danger-foreground`, `--kui-state-banner-detail`, `--kui-state-banner-foreground`, `--kui-state-banner-info-background`, `--kui-state-banner-info-border`, `--kui-state-banner-info-foreground`, `--kui-state-banner-pop-background`, `--kui-state-banner-pop-border`, `--kui-state-banner-pop-foreground`, `--kui-state-banner-neutral-background`, `--kui-state-banner-neutral-border`, `--kui-state-banner-neutral-foreground`, `--kui-state-banner-success-background`, `--kui-state-banner-success-border`, `--kui-state-banner-success-foreground`, `--kui-state-banner-warning-background`, `--kui-state-banner-warning-border`, `--kui-state-banner-warning-foreground`, `--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`).
+
+## Related
+
+- Components: [Badge](./badge.md), [LucideIcon](./lucide-icon.md), [EmptyState](./empty-state.md), [Callout](./wa-callout.md), [Toast](./wa-toast.md), [CornerStatus](./corner-status.md).
+- Docs: [`docs/component-selection.md`](../../docs/component-selection.md), [`docs/component-selection.md#ambiguous-choices`](../../docs/component-selection.md#ambiguous-choices).
+- UX catalog route: `?component=state-banner`.

package/ai/components/summary-row.md

@@ -0,0 +1,85 @@
+# SummaryRow
+
+<!-- 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:summary-row` · Kerf UI · component · Structure
+
+A selectable, focusable summary of one item as a list row or a board card, with a state rail, a clamped title, trailing meta, and a metadata line.
+
+## When to use
+
+Present dense item summaries (tickets, tasks, messages) as selectable list rows or board cards with Kerf-owned selection, hover, focus, rail, clamping, list-edge rounding, and narrow compaction, without app row CSS.
+
+- A list or board shows many items as dense, selectable summaries with an identifier, a title, a timestamp, and metadata.
+
+**Not when:**
+
+- Do not use for navigation rows with a single label; use ListItem.
+- Do not use for selectable tiles of free-form content; use ContentItem with selectionMode.
+- Do not hand-roll row chrome (selection fill, rail, title clamp, edge rounding) in app CSS.
+
+**Alternatives:**
+
+- [ListItem](./list-item.md) (nearest) — Use ListItem for navigation rows.
+- [ContentItem](./content-item.md) (nearest) — Use ContentItem for selectable rich tiles.
+
+## Imports
+
+- JavaScript: `@kerfjs/ui/summary-row` — exports `SummaryRow`.
+- CSS: the browser build of `@kerfjs/ui/summary-row` pulls its CSS automatically; import `@kerfjs/ui/summary-row.css` manually only without the `browser` export condition.
+- Declared side effects: browser-condition-css.
+
+## Props
+
+Exact prop names and types: [`@kerfjs/ui/summary-row`](../public-api-signatures-v1.md#kerfjsuisummary-row) in `public-api-signatures-v1.md`. Do not infer props from examples.
+
+**Variants (configure, do not restyle):**
+
+- row
+- card
+- selected
+- dimmed
+- state rail
+- list edge start, end, or only
+- title line budget
+- deferred rendering
+
+## Composition
+
+- Parents: any.
+- Contexts: `application-ui`.
+- Children: unrestricted.
+
+## State and wiring
+
+**The app owns:** the listbox container, selection set, and keyboard movement; the title, leading glyph, trailing meta, and metadata content; rail tone and dimming policy.
+
+No wiring helper.
+
+## Geometry
+
+Margin: none · border: self · padding: self (layout role: structure). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
+
+- Rows sit flush in a list section and round only the corners at its edges; cards are borderless rounded cards.
+
+## Accessibility
+
+- Each SummaryRow is role=option with tabindex=0 and aria-selected; place rows in a labeled role=listbox and move focus with the arrow keys in the app. The rail is decorative; carry its meaning in text.
+
+## 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-summary-row`, `kui-summary-row__rail`, `kui-summary-row__body`, `kui-summary-row__leading`, `kui-summary-row__content`, `kui-summary-row__title`, `kui-summary-row__trailing`, `kui-summary-row__metadata`.
+
+Never put `kui-summary-row`, `kui-summary-row__rail`, `kui-summary-row__body`, `kui-summary-row__leading`, `kui-summary-row__content`, `kui-summary-row__title`, `kui-summary-row__trailing`, `kui-summary-row__metadata` on an element you write; render `SummaryRow` instead (`KUI-L103`).
+
+Public tokens it reads: `--kui-color-neutral-border-quiet`, `--kui-color-text`, `--kui-color-surface`, `--kui-color-brand-border-normal`, `--kui-color-text-link`, `--kui-color-brand-fill-quiet`, `--kui-color-neutral-on-quiet`, `--kui-color-brand-fill-loud`, `--kui-color-pop-fill-loud`, `--kui-color-success-fill-loud`, `--kui-color-warning-fill-loud`, `--kui-color-danger-fill-loud`, `--kui-color-text-quiet`, `--kui-font-2xs`, `--kui-font-xs`, `--kui-layout-rounded-radius`, `--kui-space-2xs`, `--kui-space-s`, `--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: [ListItem](./list-item.md), [ContentItem](./content-item.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=summary-row`.