@kerfjs/ui 5.0.0-beta.56 → 5.0.0-beta.58

package/docs/workbench.md

@@ -9,9 +9,15 @@ desktop-class devices.
 
 ```ts
 import { Workbench } from "@kerfjs/ui/workbench";
-import "@kerfjs/ui/workbench.css";
 ```
 
+In a browser bundler that honors the `browser` export condition (Vite, esbuild, and
+webpack do by default), the import above also
+loads Workbench's stylesheet and those of the components it renders internally
+(`Pane`, `Toolbar`, `ToolbarControlGroup`, `FloatingToolbar`, `ResizableRegion`,
+`List`, `LucideIcon`). Without that condition, import the manual stylesheets instead:
+`@kerfjs/ui/workbench.css` plus those components' CSS, or `@kerfjs/ui/styles.css`.
+
 A top-level `Workbench` needs a definite containing height. Import the opt-in
 `@kerfjs/ui/document.css` baseline and add `.kui-app-root` to the direct mount
 container, or provide an equivalent definite height in application-owned
@@ -152,22 +158,23 @@ A panel's controls follow it open and closed when the Workbench composes the
 toolbars. Give a panel a `toolbar` and the work area a `mainToolbar` (and, for
 a drawer, optionally a `mainBottomToolbar`); the Workbench renders each as a
 standard `Toolbar` over a `Pane`, and moves groups between them as panels open
-and close. A panel's `toolbar` has four parts:
+and close. A panel's `toolbar` has these parts:
 
 - `title` — the panel's `ToolbarText` (the quiet default size in a rail).
-- `panelOnly` — groups that make sense only while the panel is open. They lead
-  its toolbar, after the title, and are unavailable while it is closed.
-- `constant` — groups that stay available either way. They trail the panel's
-  toolbar while it is open and move to the work area's toolbar while it is
-  closed.
+- `leading`, `center`, and `trailing` — the open panel's toolbar zones. Put
+  `ToolbarControlGroup`s in any order in these zones. Mark a group with
+  `relocateOnCollapse` to make it available in the work area while the panel
+  is closed; unmarked groups remain in the inert panel. Pass marked groups
+  directly or in arrays, including nested arrays, rather than JSX fragments
+  so their render-time annotation remains available.
 - `toggle: { action, name, showLabel?, hideLabel? }` — the standard collapse
   toggle, which the Workbench renders: the per-side panel glyph,
   `aria-controls` naming the panel, `aria-expanded`, a "Show …"/"Hide …"
   label (or your localized `showLabel` / `hideLabel`), and the `data-action`
   the app handles. It is always the last group.
-- `center` — optional panel-only center content.
 
-While a panel is closed, its `constant` groups and then its toggle go to:
+While a panel is closed, marked groups follow their open-panel zone order
+(`leading`, `center`, `trailing`), followed by its toggle:
 
 | Panel         | Where they go                                                                                                   |
 | ------------- | --------------------------------------------------------------------------------------------------------------- |
@@ -191,8 +198,8 @@ toggle, so it never depends on a control it covers. An app's own
     toolbar: {
       label: "Navigator",
       title: <ToolbarText text="Navigator" />,
-      panelOnly: <NewFileGroup />,
-      constant: <SearchGroup />,
+      leading: <NewFileGroup />,
+      trailing: <ToolbarControlGroup relocateOnCollapse label="Search files"><SearchButton /></ToolbarControlGroup>,
       toggle: { action: "toggle-navigator", name: "navigator" },
     },
     content: <Files />,
@@ -215,10 +222,13 @@ Every toolbar the Workbench composes — `mainToolbar`, `mainBottomToolbar`, and
 each panel's `toolbar` — takes the `Toolbar`'s configuration (`ToolbarConfig`):
 `dividerSides`, `centerAlign`, `responsive`, `responsiveAt`, and
 `safeAreaEdges`. Configure the toolbar through these props rather than styling
-it. By default a panel toolbar keeps its bottom divider, and the work area draws
-one divider under its header chrome and one over its footer chrome, wherever
-that chrome ends; set `dividerSides: ""` to drop a toolbar's divider, for
-example. `responsive: "wrap"` keeps a long title whole and wraps its actions
+it. No toolbar draws a divider by default: each `Pane` draws one line under
+its header chrome and one over its footer chrome, wherever that chrome ends,
+only while its content is scrolled beneath it (see
+[Scroll dividers](./layout.md#scroll-dividers) — call `wireScrollDividers`
+once at the app root). Set `dividerSides` only for a permanent separator edge,
+or `chromeDividers: "always"` on the pane for a line that never hides.
+`responsive: "wrap"` keeps a long title whole and wraps its actions
 below it. `mainBottomToolbar` also takes a `center`. A panel's
 `restorePosition` also places its floating restore controls.
 
@@ -226,7 +236,7 @@ The `Pane`s and `List`s the Workbench composes around your content are
 configurable the same way:
 
 - `mainPane` (`PaneConfig`: `contentElement`, `contentLabel`, `separators`,
-  `safeAreaEdges`) configures the work area's `Pane`, which exists whenever the
+  `safeAreaEdges`, `chromeDividers`) configures the work area's `Pane`, which exists whenever the
   work area has a toolbar, `mainHeader`, or `mainFooter`;
 - a panel's `pane` configures the `Pane` a `toolbar` panel's `content` renders
   in — for example `{ contentElement: "nav", contentLabel: "Files" }` for a
@@ -235,12 +245,12 @@ configurable the same way:
   `vAlign`, `dividerSides`, `textInsets`, `controlInsets`) configure the
   `List`s holding `mainHeader` / `mainFooter`.
 
-An omitted or `undefined` field keeps today's default, including the header
-and footer dividers described above.
+An omitted or `undefined` field keeps the default, including the scroll
+dividers described above.
 
 Size a rail so its title and groups fit at its narrowest (a resizable rail's
 `min`); a toolbar that cannot hold them drops the title rather than
-truncating it. `constant` content renders in both places while the panel is
+truncating it. Relocated content renders in both places while the panel is
 closed (the panel's copy is inert), so give it no `id`s. With `wireWorkbench`
 given the panel's `collapsed` signal, focus follows the toggle: closing a
 panel from its own toggle focuses the relocated toggle in the work area, and
@@ -523,7 +533,8 @@ when each policy applies.
 
 ## Public styling boundary
 
-Import `@kerfjs/ui/workbench.css` after the component subpath. Applications may
+The component subpath's browser build loads `workbench.css`; import
+`@kerfjs/ui/workbench.css` manually only without the `browser` condition. Applications may
 set `--kui-workbench-rail-width` and `--kui-workbench-drawer-height` on a
 Workbench instance. The supported composition classes are `.kui-workbench`,
 `.kui-workbench__rail`, `.kui-workbench__rail--left`,

package/doctor/index.mjs

@@ -21,7 +21,11 @@ import { fileURLToPath, pathToFileURL } from 'node:url';
 import { createRequire } from 'node:module';
 
 import { loadApplicationUiProfile } from '../ai/application-ui-profile.mjs';
-import { analyzeUiProject, UI_ANALYSIS_RULES } from '../analyzer/index.mjs';
+import {
+  analyzeUiProject,
+  UI_ANALYSIS_ACTIONS,
+  UI_ANALYSIS_RULES,
+} from '../analyzer/index.mjs';
 import { evaluateUi, UI_EVALUATION_RULES } from '../evaluator/index.mjs';
 import {
   isForeignRuleDefinitionDiagnostic,
@@ -547,6 +551,7 @@ function normalizeAnalyzer(report) {
         evidence: item.evidence,
         catalogFacts: item.chain,
         action:
+          UI_ANALYSIS_ACTIONS[item.ruleId] ??
           'Apply the catalog-declared composition or geometry boundary at this source location.',
         meaning: UI_ANALYSIS_RULES[item.ruleId]?.title ?? item.ruleId,
       }),

package/llms.txt

@@ -17,6 +17,17 @@ component per source file and one owned stylesheet per visual component. Keep it
 compatibility entrypoints implementation-free: JavaScript/TypeScript only re-exports
 the folder modules, and CSS only imports their owner stylesheets.
 
+## The rule: components own their styles
+
+Configure components through their typed props (size, density, inset,
+presentation, `ToolbarConfig`, `PaneConfig`, …); never restyle one from outside.
+No application or parent CSS may select a `.kui-*` class, a `[data-component]`
+root, a `wa-*` element a Kerf component renders, or its `::part()`s, and no
+writing another component's `--_kui-*` / `--kui-*` variables where a prop
+exists. When a component adapts inside another, it styles itself in that
+context in its own stylesheet. A missing prop is a component gap to report,
+not a reason to override — and your own components follow the same rule.
+
 ## How to build a screen (retrieval order)
 
 1. **Pick the component from the interface need**, not by appearance — read
@@ -25,20 +36,32 @@ the folder modules, and CSS only imports their owner stylesheets.
 2. **Get exact signatures before emitting code** — read
    [public-api-signatures-v1.md](./ai/public-api-signatures-v1.md) (real prop names,
    callback shapes, disposer return types).
-3. **For exhaustive, structured facts** (ids, exports, variants, `publicClasses`,
-   relationships, side effects, and geometry ownership) load the
-   [Machine-readable component catalog](./ai/component-catalog.json) — the
-   canonical checked-in source; its schema is alongside it. Also load the
+3. **Look up each component you use** in the
+   [component reference index](./ai/components/README.md) — one line per
+   entry — then read only those `ai/components/<id>.md` pages (1–7 KB each):
+   use/avoid, imports and side effects, a link to exact props, legal parents,
+   zones with their JSX prop and child count, app- and wiring-owned state,
+   geometry, accessibility, the styling boundary (configure through props;
+   never override internals), and `KUI-C###` diagnostics. Do not load the
+   large JSON catalogs just to choose or compose components; the pages are
+   generated from them.
+   **Tools and mechanical checks** use the JSON sources instead: the
+   [Machine-readable component catalog](./ai/component-catalog.json) (ids,
+   exports, variants, `publicClasses`, relationships, side effects, and
+   geometry ownership) — the canonical checked-in source; its schema is
+   alongside it. Also load the
    consuming application's catalog extension when present; generate one from the
    [Consumer catalog extension schema](./ai/component-catalog-extension.schema.json)
    when app-owned components must participate in selection or alignment.
-   Load the [Composition catalog v2](./ai/component-catalog-v2.json) to
-   mechanically evaluate parents, contexts, zones/cardinality, children, state,
-   wiring (including the wiring-owned `stateAttributes` an app must never
-   render or remove), responsive/layout/accessibility rules, and public
-   boundaries. V1
-   remains compatible; v2 joins catalogs by `package:id`. Consumer v2 catalogs
-   use [the v2 extension schema](./ai/component-catalog-extension-v2.schema.json).
+   A tool loads the [Composition catalog](./ai/component-composition.json) — a
+   generated composition layer beside the component catalog, not a replacement
+   for it — to mechanically evaluate parents, contexts, zones/cardinality,
+   children, state, wiring (including the wiring-owned `stateAttributes` an app
+   must never render or remove), responsive/layout/accessibility rules, and
+   public boundaries. The component catalog stays the selection and delivery
+   surface; the composition layer joins catalogs by `package:id`. Consumer
+   composition catalogs use
+   [the composition extension schema](./ai/component-composition-extension.schema.json).
    Load [compile-time contracts](./ai/compile-time-contracts-v1.json) for stable
    `KUI-T###` ids, exact declaration symbols, and the boundary between rejected
    source states and relationships that still require runtime/catalog checks.
@@ -83,7 +106,10 @@ the folder modules, and CSS only imports their owner stylesheets.
    prefer its canonical shorthand or typed helper over raw CSS strings; a
    `--wa-color-{tone}-fill-loud` override without a governing `on-loud` (same
    or ancestor scope, possibly in a co-loaded stylesheet), or whose literal
-   pair measures below 4.5:1, is review finding `KUI-L018` (set both); repair source-located errors until exit 0. Use full mode for release gates;
+   pair measures below 4.5:1, is review finding `KUI-L018` (set both); CSS that restyles a component
+   (`KUI-L019`), touches its private `--_*` variables (`KUI-L020`), overrides a token a typed prop sets
+   (`KUI-L021`), or styles it through a hook class on its root (`KUI-L022`) is an error: configure the
+   component instead, and report a component gap when no prop exists; repair source-located errors until exit 0. Use full mode for release gates;
    generated `dist`/`coverage`, dependency, cache, evidence, and nested-worktree
    directories are excluded consistently from every static stage.
    [`kerf-ui-analyze`](./docs/ui-analyzer.md) remains available when only static
@@ -98,6 +124,12 @@ the folder modules, and CSS only imports their owner stylesheets.
 
 ## Core rules (do the right thing)
 
+- **Prefer a Kerf UI component over a Web Awesome component over a raw HTML
+  tag**, using each for what it is good at. Never render a `Discouraged` Web
+  Awesome element (`wa-dropdown`, `wa-button-group`, `wa-select`, `wa-tab-group`,
+  `wa-icon`, …) directly; reach it only through the Kerf component that wraps or
+  replaces it (`PopupMenu`, `SegmentedControl`, `Select`, `TabBar`,
+  `LucideIcon`), and file a component gap rather than dropping to the raw tag.
 - **Reach for the primitive, not for CSS.** The package is built to look right
   without an application customization layer. Before adding `padding`, `margin`,
   `width`, `height`, `border`, `background`, a wrapper card, or a decoration,
@@ -210,12 +242,19 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   (`@kerfjs/ui/popup-menu`, registered once via `@kerfjs/ui/popup-menu/register`)
   in a `single` `ToolbarControlGroup` with `nestedDropdown`; never hand-write
   `wa-dropdown` markup for a menu. Let the group size the trigger from its icon,
-  localized text, and caret; do not force a dropdown or button width. Compact
+  localized text, and caret; do not force a dropdown or button width. Nothing
+  wraps inside a group: an icon sits beside its label on one row, and a
+  `ToolbarText` is one ellipsized line unless you opt into `wrap`/`maxLines`. A
+  Select or PopupMenu trigger drops its focus ring while its popup is open and
+  the ring follows the control's shape; never add ring CSS. Compact
   mixed groups keep standard item padding and raised selected chrome without an
   internal separator; the selected item paints over the outer border. For an
   avatar control, set `content="avatar"` and `avatarImage` on the group instead of
   inserting an `img`; a lone control paints the group and a multi-button group
-  paints only its pressed highlight.
+  paints only its pressed highlight. Dividers earn their place: a `Toolbar`
+  draws none by default and pinned chrome gets its line from scroll state (see
+  the scroll-divider rule below); never fake one with a border or pad below a
+  divider to make it look right.
 - **Use one direct toolbar composition for panel/dialog/page headings.** Put an
   optional icon in a `ToolbarControlGroup`, an extra-large `ToolbarText` directly
   in the leading zone, and actions in a trailing group. Supporting copy is
@@ -242,10 +281,29 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   radius minus `--kui-layout-highlight-inset`. Do not give an inner highlight an
   unrelated radius.
 - **Panes share one child-owned geometry.** Sidebars, main areas, inspectors, and
-  dialogs all use an unpadded `.kui-pane` (optional `.kui-pane__toolbar`, one
-  scrolling `.kui-pane__content`, optional `.kui-pane__footer`). A visible pane owns
-  its collapse control; a hidden pane's restore moves to the adjacent main
-  toolbar's matching edge — no icon-only rail. Keep one scroll owner per region.
+  dialogs all render `Pane`: an unpadded `.kui-pane` (optional header, one
+  scrolling `.kui-pane__content`, optional footer). Never write a component's
+  anatomy classes onto your own element to recreate it (`KUI-L103`); only
+  the catalog's `placeableClasses` (layout utilities, `.kui-app-root`,
+  `.kui-content-item` on a non-div carrier) belong there. A visible pane owns
+  its collapse control (the last control of its last group); a hidden pane's
+  restore moves to the adjacent main toolbar's matching edge — no icon-only
+  rail — and a collapsed drawer's restore sits in the bottom toolbar or a
+  `FloatingToolbar` beside the drawer, near where its effect appears. Align
+  text to text and icons to icons across a pane; a border is decoration, never
+  the alignment anchor. Keep one scroll owner per region.
+- **Dividers between pinned chrome and scrolling content are scroll state.**
+  Toolbars draw no divider by default. Call `wireScrollDividers(appRoot)`
+  (`@kerfjs/ui/wire-scroll-dividers`) once and keep its disposer: every `Pane`
+  then draws the line under its header only while content is scrolled beneath
+  it and the line 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, and
+  every `TabBar` marks each side of its strip with tabs scrolled out of view. Configure a pane with `chromeDividers`
+  (`scroll` default, `always`, `none`), and a `NavStack` or `TabScaffold`
+  with its own `chromeDividers` (same values; a `SplitView` forwards it through
+  `compactStack`); name app-owned chrome in `targets`.
+  Never add a border, or a permanent `dividerSides`, to fake one.
   While a side overlay is open (a Workbench rail overlay, a `wireSidebar` compact
   overlay, an overlay `CollapsiblePanel` or horizontal `ResizableRegion`), the
   layout hides the covered work area's `FloatingToolbar`s and restore corners
@@ -264,7 +322,9 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   (mark a preferred new-view target with `data-nav-focus`), `wireTabBars` the
   overflow autoscroll, drag preview, and
   replacement focus after controlled automatic tab activation,
-  `wireResizableRegions` the live drag preview; they report committed changes via
+  `wireResizableRegions` the live drag preview, `wireScrollDividers` the
+  scroll-state attributes from which a `Pane` draws its chrome dividers and a
+  `TabBar` its overflow dividers; they report committed changes via
   callbacks. For a tab-local action plus a separate far-edge action, set
   `TabBar trailingPlacement="adjacent"`, put the local action in `trailing`, and
   the workspace action in `end`; the component keeps both visible while its tab
@@ -326,9 +386,13 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
 `ListInsetText`, `SegmentedControl`,
 `Select`, `TokenSearchField` (+ `readTokenSearchField`, `placeTokenSearchCaret`,
 `wireTokenSearchFields`), `AppTab`, `TabBar` (+ `wireTabBars`, `reorderTabs`),
+`wireScrollDividers` (scroll-state dividers for every `Pane`, `NavStack`,
+`TabScaffold`, and `TabBar`),
 `ResizableRegion` (+ `wireResizableRegions`), `StateBanner`, `EmptyState`,
 `LoadingSpinner`, `Skeleton`, `ValueTable`, `ValueTableRow`. Whole-screen layouts (opt-in,
-tree-shakeable, declarative with `wire…` helpers, each with a companion CSS import):
+tree-shakeable, declarative with `wire…` helpers; the browser build of each layout
+subpath loads its CSS and that of the components it renders, and a companion
+CSS subpath remains for pipelines without the `browser` condition):
 `NavStack`, `SplitView`, `Workbench`, `TabScaffold`, driven by `deviceClass()` from
 `@kerfjs/ui/device-class`. For a standalone collapsible rail/drawer outside a full
 shell, `@kerfjs/ui/collapsible-panel` (`CollapsiblePanel`, `CollapsiblePanelToggle`)
@@ -357,6 +421,7 @@ shell, `@kerfjs/ui/collapsible-panel` (`CollapsiblePanel`, `CollapsiblePanelTogg
 - [workbench.md](./docs/workbench.md): the `Workbench` multi-panel shell, its collapse policies, and opt-in `resizable` panels driven by `wireWorkbench` (`@kerfjs/ui/wire-workbench`: drag, keyboard, min/max, persistence, compact suspension), the `mainMinSize` / `mainMinHeight` work-area minimums (default 320px wide beside any inline rail, 120px tall above the drawer) that resizable panels stop at and inline panels shrink around, and a panel's `responsiveOverlayAt` (`narrow` / `compact`, rails and the bottom drawer) that presents it as an overlay below a Workbench container breakpoint without a device-class check; a panel given its `collapsed` signal is a transient overlay (collapsed on entering the breakpoint, takes focus and keeps Tab inside while open, closed by Escape or an outside press, focus returned; `dismissOverlays`), and overlays are exclusive by default (opening one closes the others; `exclusiveOverlays: false` opts out).
 - [app-layouts.md](./docs/app-layouts.md): choosing `NavStack`/`SplitView`/`Workbench`/`TabScaffold` by data + interaction + device, and dialog presentation, plus the safe-area model (surfaces paint through unsafe areas; content pads only the edges it reaches; `Pane.safeAreaEdges` for app-owned arrangements, `Toolbar.safeAreaEdges` for an app bar or bottom bar at a screen edge).
 - [webawesome-theme.md](./docs/webawesome-theme.md): the optional Web Awesome theme; catalog coverage means themed-and-supported, not preferred (prefer the Kerf primitive when one exists). The UX sidebar visibly tags superseded and exceptional Web Awesome choices as `Discouraged`; Popup remains an available conditional positioning primitive.
+- [ai/components/README.md](./ai/components/README.md): the generated per-component markdown reference — the assistant entry point over both JSON catalogs.
 - [component-catalog.json](./ai/component-catalog.json) + [component-catalog-extension.schema.json](./ai/component-catalog-extension.schema.json) + [catalog-authoring.json](./ai/catalog-authoring.json) + [public-api-signatures-v1.md](./ai/public-api-signatures-v1.md) + [webawesome-jsx-signatures-v1.md](./ai/webawesome-jsx-signatures-v1.md): machine-readable selection facts, a reusable app-component extension contract, Catalog authoring discovery, and exact signatures.
 - [compile-time-contracts-v1.json](./ai/compile-time-contracts-v1.json) + [type-contracts.md](./docs/type-contracts.md): stable compile diagnostics, packed-declaration proof, migrations, and explicit non-goals.
 - [README.md](./README.md): package overview and the component subpath table.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.56",
+  "version": "5.0.0-beta.58",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",
@@ -165,6 +165,7 @@
     },
     "./catalog": {
       "types": "./dist/catalog.d.ts",
+      "browser": "./dist/browser/catalog.js",
       "import": "./dist/catalog.js"
     },
     "./catalog-resources": {
@@ -200,8 +201,13 @@
       "types": "./dist/wire-tab-bars.d.ts",
       "import": "./dist/wire-tab-bars.js"
     },
+    "./wire-scroll-dividers": {
+      "types": "./dist/wire-scroll-dividers.d.ts",
+      "import": "./dist/wire-scroll-dividers.js"
+    },
     "./nav-stack": {
       "types": "./dist/nav-stack.d.ts",
+      "browser": "./dist/browser/nav-stack.js",
       "import": "./dist/nav-stack.js"
     },
     "./wire-nav-stack": {
@@ -210,6 +216,7 @@
     },
     "./split-view": {
       "types": "./dist/split-view.d.ts",
+      "browser": "./dist/browser/split-view.js",
       "import": "./dist/split-view.js"
     },
     "./pane": {
@@ -219,10 +226,12 @@
     },
     "./workbench": {
       "types": "./dist/workbench.d.ts",
+      "browser": "./dist/browser/workbench.js",
       "import": "./dist/workbench.js"
     },
     "./collapsible-panel": {
       "types": "./dist/collapsible-panel.d.ts",
+      "browser": "./dist/browser/collapsible-panel.js",
       "import": "./dist/collapsible-panel.js"
     },
     "./wire-sidebar": {
@@ -231,6 +240,7 @@
     },
     "./tab-scaffold": {
       "types": "./dist/tab-scaffold.d.ts",
+      "browser": "./dist/browser/tab-scaffold.js",
       "import": "./dist/tab-scaffold.js"
     },
     "./wire-tab-scaffold": {
@@ -385,12 +395,12 @@
     "format": "prettier --write . --ignore-unknown",
     "format:css": "prettier --write \"src/**/*.css\" \"ux-demo/**/*.css\"",
     "check:format": "prettier --check . --ignore-unknown",
-    "catalog:sync": "node scripts/sync-component-catalog.mjs && node scripts/sync-component-catalog-v2.mjs",
-    "catalog:v2:sync": "node scripts/sync-component-catalog-v2.mjs",
+    "catalog:sync": "node scripts/sync-component-catalog.mjs && node scripts/sync-component-composition.mjs && node scripts/sync-component-docs.mjs",
+    "composition:sync": "node scripts/sync-component-composition.mjs && node scripts/sync-component-docs.mjs",
     "check:component-integrations": "node scripts/check-component-integrations.mjs",
     "component-integrations:dry-run": "node scripts/check-component-integrations.mjs --dry-run",
     "check:change": "node scripts/check-ui-change.mjs",
-    "check:catalog": "node scripts/sync-component-catalog.mjs --check && node scripts/sync-component-catalog-v2.mjs --check && node scripts/check-component-catalog.mjs",
+    "check:catalog": "node scripts/sync-component-catalog.mjs --check && node scripts/sync-component-composition.mjs --check && node scripts/sync-component-docs.mjs --check && node scripts/check-component-catalog.mjs",
     "check:profile": "node scripts/check-application-ui-profile.mjs",
     "check:demo-conformance": "node scripts/check-catalog-demo-conformance.mjs",
     "check:recipes": "node scripts/check-recipes.mjs",
@@ -402,6 +412,7 @@
     "ai:compatibility:sync": "node scripts/sync-ai-compatibility.mjs --write",
     "ai:regressions:compile": "node scripts/compile-ai-regression-response.mjs",
     "ai:regressions:prepare": "node scripts/prepare-ai-regression.mjs",
+    "ai:regressions:measure-context": "node scripts/measure-ai-regression-context.mjs",
     "ai:regressions:record": "node scripts/record-ai-regression-run.mjs",
     "ai:regressions:record-v3": "node scripts/record-ai-regression-run-v3.mjs",
     "ai:regressions:replay-v3": "node scripts/replay-ai-regression-run-v3.mjs",
@@ -410,12 +421,13 @@
     "lint:eslint": "eslint src tests ux-demo docs/examples --max-warnings 0",
     "lint": "npm run lint:eslint && npm run check:format",
     "typecheck": "node node_modules/typescript7/bin/tsc --noEmit",
-    "test": "npm run test:unit && npm run test:bundle && npm run test:analyzer && npm run test:doctor && npm run test:evaluator",
+    "test": "npm run test:unit && npm run test:bundle && npm run test:analyzer && npm run test:doctor && npm run test:evaluator && npm run test:ai-regressions",
     "test:unit": "vitest run tests/unit --coverage",
     "test:bundle": "npm run build && vitest run tests/bundle",
     "test:analyzer": "vitest run tests/integration/ui-analyzer-downstream.test.ts",
     "test:doctor": "vitest run tests/unit/ui-doctor.test.ts tests/integration/ui-doctor-downstream.test.ts",
     "test:evaluator": "vitest run tests/unit/ui-evaluator.test.ts tests/integration/ui-evaluator-downstream.test.ts",
+    "test:ai-regressions": "vitest run tests/integration/ai-regressions-v3.test.ts",
     "test:contract-types:source": "node node_modules/typescript7/bin/tsc -p tests/consumer-types/contracts/tsconfig.source.json",
     "test:contract-types:packed": "node scripts/check-packed-type-contracts.mjs",
     "test:consumer-types": "npm run test:contract-types:source && npm run build && node node_modules/typescript7/bin/tsc -p tests/consumer-types/webawesome/tsconfig.json && npm run test:contract-types:packed",

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

@@ -134,7 +134,6 @@ export const createRecipe: RecipeFactory = (announce) => {
       header={
         <Toolbar
           label="Current navigation view"
-          dividerSides=""
           leading={
             <>
               <CollapsiblePanelRelocated

package/ux-demo/recipes/composer-form.tsx

@@ -64,7 +64,6 @@ export const createRecipe: RecipeFactory = (announce) => {
         <List>
           <Toolbar
             label="Publish workspace update"
-            dividerSides=""
             leading={
               <ToolbarText
                 text="Publish workspace update"

package/ux-demo/recipes/list-detail-dialog.tsx

@@ -114,7 +114,6 @@ export const createRecipe: RecipeFactory = (announce) => {
       header={
         <Toolbar
           label="Recent projects"
-          dividerSides=""
           leading={<ToolbarText text="Recent projects" />}
         />
       }
@@ -131,7 +130,6 @@ export const createRecipe: RecipeFactory = (announce) => {
         header={
           <Toolbar
             label="Project details"
-            dividerSides=""
             leading={
               <ToolbarText
                 text={record.name}

package/ux-demo/recipes/list-workspace-states.tsx

@@ -135,7 +135,6 @@ export const createRecipe: RecipeFactory = (announce) => {
       header={
         <Toolbar
           label="Release tasks"
-          dividerSides=""
           responsive="stack"
           responsiveAt="compact"
           leading={

package/ux-demo/recipes/loading-inspector.tsx

@@ -59,7 +59,6 @@ export const createRecipe: RecipeFactory = (announce) => {
           <>
             <Toolbar
               label="Ticket inspector"
-              dividerSides=""
               responsive="wrap"
               leading={
                 <>

package/ux-demo/recipes/workspace-header.tsx

@@ -36,7 +36,6 @@ export const createRecipe: RecipeFactory = (announce) => ({
           </ListInsetText>
           <Toolbar
             label="Workspace heading"
-            dividerSides=""
             responsive="stack"
             responsiveAt="compact"
             leading={

package/ai/component-catalog-extension-v2.d.ts

@@ -1,7 +0,0 @@
-import type {
-  CatalogCompositionEntryV2,
-  ComponentCatalogV2,
-} from './component-catalog-v2.js';
-
-export type ConsumerCatalogEntryV2 = CatalogCompositionEntryV2;
-export type ConsumerComponentCatalogV2 = ComponentCatalogV2;

package/ai/component-catalog-extension-v2.schema.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$id": "https://raw.githubusercontent.com/brianwestphal/kerf/main/ui/ai/component-catalog-extension-v2.schema.json",
-  "title": "Kerf UI consumer composition catalog extension v2",
-  "allOf": [{ "$ref": "./component-catalog-v2.schema.json" }],
-  "description": "Consumer catalogs use the v2 entry contract with their own non-empty package identity; keys are always package:id."
-}

package/dist/chunk-AK67F6QN.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/pane.tsx"],"names":[],"mappings":";;;AAgBA,IAAM,uBAAA,uBAA8B,GAAA,CAAI;AAAA,EACtC,gBAAA;AAAA,EACA,uBAAA;AAAA,EACA,4BAAA;AAAA,EACA,0BAAA;AAAA,EACA,6BAAA;AAAA,EACA,2BAAA;AAAA,EACA,4BAAA;AAAA,EACA,0BAAA;AAAA,EACA,6BAAA;AAAA,EACA;AACF,CAAC,CAAA;AAED,IAAM,YAAA,GAA6C;AAAA,EACjD,aAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AA2EA,SAAS,WAAA,CACP,OAAA,EACA,QAAA,EACA,SAAA,EACA,KAAA,EACA;AACA,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,KAAA,EAAO,CAAA,8BAAA,EAAiC,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,IACzD,YAAA,EAAc;AAAA,GAChB;AACA,EAAA,IAAI,YAAY,MAAA,EAAQ,2BAAQ,MAAA,EAAA,EAAM,GAAG,YAAa,QAAA,EAAS,CAAA;AAC/D,EAAA,IAAI,YAAY,KAAA,EAAO,2BAAQ,KAAA,EAAA,EAAK,GAAG,YAAa,QAAA,EAAS,CAAA;AAC7D,EAAA,IAAI,OAAA,KAAY,SAAA;AACd,IAAA,uBAAO,GAAA,CAAC,SAAA,EAAA,EAAS,GAAG,UAAA,EAAa,QAAA,EAAS,CAAA;AAC5C,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,UAAA,EAAa,QAAA,EAAS,CAAA;AACxC;AAQO,SAAS,IAAA,CAAK;AAAA,EACnB,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,eAAA,GAAkB,OAAA;AAAA,EAClB,OAAA,GAAU,KAAA;AAAA,EACV,cAAA,GAAiB,KAAA;AAAA,EACjB,aAAa,EAAC;AAAA,EACd,aAAA,GAAgB,YAAA;AAAA,EAChB,EAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,eAAA,GAAkB,EAAA;AAAA,EAClB,gBAAA,GAAmB,EAAA;AAAA,EACnB,eAAA,GAAkB,EAAA;AAAA,EAClB,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAc;AACZ,EAAA,MAAM,kBAAA,GAAqB,oBAAA;AAAA,IACzB,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,OAAA,GAAU,WAAA;AAAA,IACd,cAAA;AAAA,IACA,QAAA;AAAA,IACA,gBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,uBACJ,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,MAAA,KAAW,SAAY,IAAA,mBACtB,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,CAAA,mCAAA,EAAsC,eAAe,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,QAEnE,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,IAED,OAAA;AAAA,IACA,MAAA,KAAW,MAAA,GAAY,IAAA,mBACtB,GAAA,CAAC,QAAA,EAAA,EAAO,KAAA,EAAO,CAAA,iBAAA,EAAoB,eAAe,CAAA,CAAA,CAAG,IAAA,EAAK,EACvD,QAAA,EAAA,MAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEF,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,GAAG,kBAAA;AAAA,IACH,KAAA,EAAO,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,IACpC,EAAA;AAAA,IACA,gBAAA,EAAkB,MAAA;AAAA,IAClB,uBAAA,EAAyB,eAAA,KAAoB,MAAA,GAAS,MAAA,GAAS,MAAA;AAAA,IAC/D,4BAAA,EAA8B,MAAA,CAAO,UAAA,CAAW,QAAA,CAAS,aAAa,CAAC,CAAA;AAAA,IACvE,0BAAA,EAA4B,MAAA,CAAO,UAAA,CAAW,QAAA,CAAS,WAAW,CAAC,CAAA;AAAA,IACnE,6BAAA,EAA+B,MAAA,CAAO,UAAA,CAAW,QAAA,CAAS,cAAc,CAAC,CAAA;AAAA,IACzE,2BAAA,EAA6B,MAAA,CAAO,UAAA,CAAW,QAAA,CAAS,YAAY,CAAC,CAAA;AAAA,IACrE,4BAAA,EAA8B,MAAA,CAAO,aAAA,CAAc,QAAA,CAAS,aAAa,CAAC,CAAA;AAAA,IAC1E,0BAAA,EAA4B,MAAA,CAAO,aAAA,CAAc,QAAA,CAAS,WAAW,CAAC,CAAA;AAAA,IACtE,6BAAA,EAA+B,MAAA;AAAA,MAC7B,aAAA,CAAc,SAAS,cAAc;AAAA,KACvC;AAAA,IACA,2BAAA,EAA6B,MAAA,CAAO,aAAA,CAAc,QAAA,CAAS,YAAY,CAAC,CAAA;AAAA,IACxE,YAAA,EAAc,KAAA;AAAA,IACd;AAAA,GACF;AAEA,EAAA,IAAI,YAAY,SAAA,EAAW,2BAAQ,SAAA,EAAA,EAAS,GAAG,YAAa,QAAA,EAAA,IAAA,EAAK,CAAA;AACjE,EAAA,IAAI,YAAY,OAAA,EAAS,2BAAQ,OAAA,EAAA,EAAO,GAAG,YAAa,QAAA,EAAA,IAAA,EAAK,CAAA;AAC7D,EAAA,IAAI,YAAY,MAAA,EAAQ,2BAAQ,MAAA,EAAA,EAAM,GAAG,YAAa,QAAA,EAAA,IAAA,EAAK,CAAA;AAC3D,EAAA,IAAI,YAAY,SAAA,EAAW,2BAAQ,SAAA,EAAA,EAAS,GAAG,YAAa,QAAA,EAAA,IAAA,EAAK,CAAA;AACjE,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,UAAA,EAAa,QAAA,EAAA,IAAA,EAAK,CAAA;AACpC","file":"chunk-AK67F6QN.js","sourcesContent":["import { filterDataAttributes } from './extension-attributes.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\n/**\n * Logical pane sides: where a {@link Pane} can show a separator and where it can\n * compensate for a device safe-area inset.\n */\nexport type PaneSeparatorSide =\n  'block-start' | 'block-end' | 'inline-start' | 'inline-end';\n\n/** Semantic root elements supported by {@link Pane}. */\nexport type PaneElement = 'article' | 'aside' | 'div' | 'main' | 'section';\n\n/** Semantic elements supported by the scrolling content slot. */\nexport type PaneContentElement = 'div' | 'main' | 'nav' | 'section';\n\nconst paneProtectedAttributes = new Set([\n  'data-component',\n  'data-chrome-placement',\n  'data-separator-block-start',\n  'data-separator-block-end',\n  'data-separator-inline-start',\n  'data-separator-inline-end',\n  'data-safe-area-block-start',\n  'data-safe-area-block-end',\n  'data-safe-area-inline-start',\n  'data-safe-area-inline-end',\n]);\n\nconst allPaneSides: readonly PaneSeparatorSide[] = [\n  'block-start',\n  'block-end',\n  'inline-start',\n  'inline-end',\n];\n\ntype PaneRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-separator-block-start'?: never;\n    'data-separator-block-end'?: never;\n    'data-separator-inline-start'?: never;\n    'data-separator-inline-end'?: never;\n    'data-safe-area-block-start'?: never;\n    'data-safe-area-block-end'?: never;\n    'data-safe-area-inline-start'?: never;\n    'data-safe-area-inline-end'?: never;\n    'data-chrome-placement'?: never;\n  }\n>;\n\n/** How a Pane's header and footer relate to its scrolling content. */\nexport type PaneChromePlacement = 'fixed' | 'auto';\n\nexport interface PaneProps {\n  /** Optional fixed chrome above the scrolling content, arranged vertically. */\n  header?: KerfUiContent;\n  /** The pane's primary vertical, scrolling content stack. */\n  children?: KerfUiContent;\n  /** Optional fixed chrome below the scrolling content. */\n  footer?: KerfUiContent;\n  /**\n   * Whether the header and footer stay pinned around the scrolling content.\n   * `fixed` (default) always pins them. `auto` pins them while the pane is\n   * tall enough, and below 480px of height (30rem, so it scales with the text\n   * size) lets the whole pane scroll as one column, so tall chrome can never\n   * squeeze the content to nothing.\n   */\n  chromePlacement?: PaneChromePlacement;\n  /** Root semantics. Defaults to `div`. */\n  element?: PaneElement;\n  /** Scrolling content semantics. Defaults to `div`. */\n  contentElement?: PaneContentElement;\n  /** Independent logical-edge separator lines. Defaults to none. */\n  separators?: readonly PaneSeparatorSide[];\n  /**\n   * Sides on which the pane may compensate for a device safe-area inset.\n   * Defaults to every side: the pane pads its slots for each side that still\n   * reaches an unsafe screen edge, as its surrounding layout reports, while its\n   * background and separators paint through. List only the sides an app-owned\n   * layout places at a screen edge, or pass `[]` to opt out.\n   */\n  safeAreaEdges?: readonly PaneSeparatorSide[];\n  id?: string;\n  /** Accessible name for a landmark root such as `aside` or `main`. */\n  label?: string;\n  /** Accessible name for a landmark scrolling slot such as `nav`. */\n  contentLabel?: string;\n  className?: string;\n  headerClassName?: string;\n  contentClassName?: string;\n  footerClassName?: string;\n  /** Safe `data-*` metadata; Pane-owned structural attributes remain protected. */\n  rootAttributes?: PaneRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A pane's configuration, apart from its content and styling hooks: the props a\n * composite that renders a `Pane` for the app (a Workbench panel or work area,\n * or a CollapsiblePanel) forwards, so the app configures that pane instead of\n * styling it. An omitted or `undefined` field keeps the composite's default.\n */\nexport type PaneConfig = Pick<\n  PaneProps,\n  'contentElement' | 'contentLabel' | 'separators' | 'safeAreaEdges'\n>;\n\nfunction paneContent(\n  element: PaneContentElement,\n  children: KerfUiContent,\n  className: string,\n  label: string | undefined,\n) {\n  const attributes = {\n    class: `kui-pane__content kui-content ${className}`.trim(),\n    'aria-label': label,\n  };\n  if (element === 'main') return <main {...attributes}>{children}</main>;\n  if (element === 'nav') return <nav {...attributes}>{children}</nav>;\n  if (element === 'section')\n    return <section {...attributes}>{children}</section>;\n  return <div {...attributes}>{children}</div>;\n}\n\n/**\n * An unpadded application column with optional fixed header/footer slots and one\n * scrolling vertical content owner. Separator lines are independently opt-in on\n * each logical edge, so the same component works as a sidebar, main area,\n * inspector, or dialog column.\n */\nexport function Pane({\n  header,\n  children,\n  footer,\n  chromePlacement = 'fixed',\n  element = 'div',\n  contentElement = 'div',\n  separators = [],\n  safeAreaEdges = allPaneSides,\n  id,\n  label,\n  contentLabel,\n  className = '',\n  headerClassName = '',\n  contentClassName = '',\n  footerClassName = '',\n  rootAttributes = {},\n  slot,\n}: PaneProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    paneProtectedAttributes,\n  );\n  const content = paneContent(\n    contentElement,\n    children,\n    contentClassName,\n    contentLabel,\n  );\n  const body = (\n    <>\n      {header === undefined ? null : (\n        <header\n          class={`kui-pane__header kui-pane__toolbar ${headerClassName}`.trim()}\n        >\n          {header}\n        </header>\n      )}\n      {content}\n      {footer === undefined ? null : (\n        <footer class={`kui-pane__footer ${footerClassName}`.trim()}>\n          {footer}\n        </footer>\n      )}\n    </>\n  );\n  const attributes = {\n    ...safeRootAttributes,\n    class: `kui-pane ${className}`.trim(),\n    id,\n    'data-component': 'pane',\n    'data-chrome-placement': chromePlacement === 'auto' ? 'auto' : undefined,\n    'data-separator-block-start': String(separators.includes('block-start')),\n    'data-separator-block-end': String(separators.includes('block-end')),\n    'data-separator-inline-start': String(separators.includes('inline-start')),\n    'data-separator-inline-end': String(separators.includes('inline-end')),\n    'data-safe-area-block-start': String(safeAreaEdges.includes('block-start')),\n    'data-safe-area-block-end': String(safeAreaEdges.includes('block-end')),\n    'data-safe-area-inline-start': String(\n      safeAreaEdges.includes('inline-start'),\n    ),\n    'data-safe-area-inline-end': String(safeAreaEdges.includes('inline-end')),\n    'aria-label': label,\n    slot,\n  };\n\n  if (element === 'article') return <article {...attributes}>{body}</article>;\n  if (element === 'aside') return <aside {...attributes}>{body}</aside>;\n  if (element === 'main') return <main {...attributes}>{body}</main>;\n  if (element === 'section') return <section {...attributes}>{body}</section>;\n  return <div {...attributes}>{body}</div>;\n}\n"]}

package/dist/chunk-G33XC2NB.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/toolbar.tsx"],"names":[],"mappings":";;;AA0DA,IAAM,KAAA,GAAQ,CACZ,KAAA,EACA,IAAA,KACI,OAAO,QAAA,CAAS,IAAI,IAAI,MAAA,GAAS,MAAA;AAEhC,SAAS,OAAA,CAAQ;AAAA,EACtB,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA,GAAe,GAAA;AAAA,EACf,WAAA,GAAc,QAAA;AAAA,EACd,UAAA,GAAa,MAAA;AAAA,EACb,YAAA,GAAe,QAAA;AAAA,EACf,aAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAiB;AACf,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACvC,gBAAA,EAAe,SAAA;AAAA,MACf,iBAAe,YAAA,IAAgB,MAAA;AAAA,MAC/B,iBAAA,EAAiB,MAAA,CAAO,OAAA,CAAQ,MAAM,CAAC,CAAA;AAAA,MACvC,mBAAA,EAAmB,WAAA;AAAA,MACnB,iBAAA,EAAiB,UAAA;AAAA,MACjB,oBAAA,EAAoB,YAAA;AAAA,MACpB,4BAAA,EAA4B,KAAA,CAAM,aAAA,EAAe,aAAa,CAAA;AAAA,MAC9D,0BAAA,EAA0B,KAAA,CAAM,aAAA,EAAe,WAAW,CAAA;AAAA,MAC1D,6BAAA,EAA6B,KAAA,CAAM,aAAA,EAAe,cAAc,CAAA;AAAA,MAChE,2BAAA,EAA2B,KAAA,CAAM,aAAA,EAAe,YAAY,CAAA;AAAA,MAC5D,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,sBAAA,EAAwB,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,wBAC3C,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,qBAAA,EAAuB,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,wBACzC,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,QAAA,EAAS;AAAA;AAAA;AAAA,GAC/C;AAEJ","file":"chunk-G33XC2NB.js","sourcesContent":["import type { PaneSeparatorSide } from './pane.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport type { Sides } from './sides.js';\n\nexport interface ToolbarProps {\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n  label?: string;\n  /** Physical divider edges in canonical top/right/bottom/left order. Defaults to bottom. */\n  dividerSides?: Sides;\n  /** Horizontal treatment of the center zone. Defaults to centered content. */\n  centerAlign?: 'center' | 'stretch';\n  /**\n   * Component-owned responsive layout; applications choose the policy rather\n   * than restyling toolbar internals. Under every policy the trailing zone\n   * wraps its groups instead of clipping an action, and the center zone keeps\n   * its whole content width: when the zones do not fit one row, the leading\n   * title truncates with an ellipsis rather than the center overlapping it.\n   * - `none` keeps one row; the leading identity truncates first.\n   * - `stack` stacks the zones at `responsiveAt`, wrapping stacked control\n   *   groups onto further rows.\n   * - `wrap` keeps one row while every zone fits at its natural width, and\n   *   otherwise moves the trailing zone below a whole leading identity.\n   * - `center-priority` gives an expanded center control the full row.\n   */\n  responsive?: 'none' | 'stack' | 'wrap' | 'center-priority';\n  /** Container width at which `responsive=\"stack\"` activates. */\n  responsiveAt?: 'compact' | 'narrow';\n  /**\n   * Screen edges this toolbar claims for device safe-area compensation, for an\n   * app bar or bottom bar that sits directly at a screen edge rather than in a\n   * Pane header or footer. Each listed side pads by the inset its surrounding\n   * layout reports through `--kui-edge-inset-*`, or the full device inset when\n   * nothing routes that edge, while the toolbar's box and dividers paint\n   * through. Omitted, the toolbar pads only the inline edges an owner such as\n   * a Pane header hands it, and never a block edge.\n   */\n  safeAreaEdges?: readonly PaneSeparatorSide[];\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A toolbar's configuration, apart from its content: the props a composite\n * that renders a `Toolbar` for the app (a Workbench or CollapsiblePanel\n * toolbar) forwards, so the app configures that toolbar instead of styling it.\n */\nexport type ToolbarConfig = Pick<\n  ToolbarProps,\n  | 'dividerSides'\n  | 'centerAlign'\n  | 'responsive'\n  | 'responsiveAt'\n  | 'safeAreaEdges'\n>;\n\nconst claim = (\n  edges: readonly PaneSeparatorSide[] | undefined,\n  side: PaneSeparatorSide,\n) => (edges?.includes(side) ? 'true' : undefined);\n\nexport function Toolbar({\n  leading,\n  center,\n  trailing,\n  label,\n  dividerSides = 'b',\n  centerAlign = 'center',\n  responsive = 'none',\n  responsiveAt = 'narrow',\n  safeAreaEdges,\n  className = '',\n  slot,\n}: ToolbarProps) {\n  return (\n    <header\n      class={`kui-toolbar ${className}`.trim()}\n      data-component=\"toolbar\"\n      divider-sides={dividerSides || undefined}\n      data-has-center={String(Boolean(center))}\n      data-center-align={centerAlign}\n      data-responsive={responsive}\n      data-responsive-at={responsiveAt}\n      data-safe-area-block-start={claim(safeAreaEdges, 'block-start')}\n      data-safe-area-block-end={claim(safeAreaEdges, 'block-end')}\n      data-safe-area-inline-start={claim(safeAreaEdges, 'inline-start')}\n      data-safe-area-inline-end={claim(safeAreaEdges, 'inline-end')}\n      aria-label={label}\n      slot={slot}\n    >\n      <div class=\"kui-toolbar__leading\">{leading}</div>\n      <div class=\"kui-toolbar__center\">{center}</div>\n      <div class=\"kui-toolbar__trailing\">{trailing}</div>\n    </header>\n  );\n}\n\nexport type { Sides } from './sides.js';\n"]}

package/dist/chunk-K6UNVKDK.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/toolbar-text.tsx"],"names":[],"mappings":";;;;AA8CO,SAAS,WAAA,CAAY;AAAA,EAC1B,IAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,SAAA,GAAY,EAAA;AAAA,EACZ,EAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,IAAA,GAAO,KAAA;AAAA,EACP,QAAA,GAAW,IAAA;AAAA,EACX,QAAA,GAAW,IAAA;AAAA,EACX;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,MAAA,GAAS,IAAA,IAAQ,QAAA,IAAY,IAAA,IAAQ,QAAA,GAAW,CAAA;AACtD,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,eAAA,EAAe,WAAW,MAAA,GAAY,OAAA;AAAA,MACtC,gBAAA,EAAgB,MAAA,GAAS,MAAA,CAAO,QAAQ,CAAA,GAAI,MAAA;AAAA,MAC5C,KAAA,EAAO,MAAA,GAAS,CAAA,6BAAA,EAAgC,QAAQ,CAAA,CAAA,GAAK,MAAA;AAAA,MAC7D,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,EAAA;AAAA,MACA,IAAA,EAAM,eAAe,SAAA,GAAY,MAAA;AAAA,MACjC,YAAA,EAAY,YAAA,GAAe,MAAA,CAAO,YAAY,CAAA,GAAI,MAAA;AAAA,MAClD,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAClC,IAAA;AAAA,MAEC,QAAA,EAAA,WAAA,mBACC,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAO,EAAA,CAAG,CAAC,CAAA,EAAG,CAAA,mBAExB,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,IAAA,EAAK;AAAA;AAAA,GAE/C;AAEJ","file":"chunk-K6UNVKDK.js","sourcesContent":["import { em } from './css-values.js';\nimport { Skeleton } from './skeleton.js';\n\nexport type ToolbarTextSize = 'xlarge' | 'large' | 'default' | 'small';\n\n/** ARIA heading level for a title exposed as a heading landmark. */\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\ninterface ToolbarTextBaseProps {\n  text: string;\n  size?: ToolbarTextSize;\n  className?: string;\n  /** Optional id, e.g. so a dialog can reference the title via aria-labelledby. */\n  id?: string;\n  /**\n   * Expose heading semantics (`role=\"heading\"` + `aria-level`) so the text acts as\n   * a heading landmark — e.g. a page's primary title. Omit to keep the plain span\n   * (the default), which suits a dialog title referenced via `aria-labelledby`.\n   */\n  headingLevel?: HeadingLevel;\n  /** Render the text as an unanimated loading skeleton instead of its value. */\n  placeholder?: boolean;\n  /**\n   * Show a trailing ellipsis (…) where the text is truncated — on the single line\n   * (default), or at the `maxLines` boundary when wrapping. Set false to hard-clip\n   * instead. Default true.\n   */\n  ellipsis?: boolean;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n  /**\n   * Cap wrapped text to this many lines, truncating past it. Only takes effect with\n   * `wrap`; ignored on a single line. `null`/omitted wraps without a line cap. Default null.\n   */\n}\n\ntype ToolbarTextWrappingProps =\n  | {\n      /** Wrap onto multiple lines; combine with `maxLines` to cap them. */\n      wrap: true;\n      maxLines?: number | null;\n    }\n  | { wrap?: false; maxLines?: never };\n\nexport type ToolbarTextProps = ToolbarTextBaseProps & ToolbarTextWrappingProps;\n\nexport function ToolbarText({\n  text,\n  size = 'default',\n  className = '',\n  id,\n  headingLevel,\n  placeholder = false,\n  wrap = false,\n  ellipsis = true,\n  maxLines = null,\n  slot,\n}: ToolbarTextProps) {\n  const capped = wrap && maxLines != null && maxLines > 0;\n  return (\n    <span\n      class={`kui-toolbar-text ${className}`.trim()}\n      data-component=\"toolbar-text\"\n      data-size={size}\n      data-wrap={wrap ? 'true' : undefined}\n      data-ellipsis={ellipsis ? undefined : 'false'}\n      data-max-lines={capped ? String(maxLines) : undefined}\n      style={capped ? `--kui-toolbar-text-max-lines:${maxLines}` : undefined}\n      data-placeholder={placeholder ? 'true' : undefined}\n      id={id}\n      role={headingLevel ? 'heading' : undefined}\n      aria-level={headingLevel ? String(headingLevel) : undefined}\n      aria-busy={placeholder ? 'true' : undefined}\n      slot={slot}\n    >\n      {placeholder ? (\n        <Skeleton width={em(8)} />\n      ) : (\n        <span class=\"kui-toolbar-text__text\">{text}</span>\n      )}\n    </span>\n  );\n}\n"]}

package/dist/chunk-MA6Z6EIM.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/list-action-row.tsx"],"names":[],"mappings":"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","file":"chunk-MA6Z6EIM.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { em, remify } from './css-values.js';\nimport {\n  filterControlAttributes,\n  filterDataAttributes,\n} from './extension-attributes.js';\nimport { LoadingSpinner } from './loading-spinner.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-has-icon',\n  'data-multiline',\n  'data-density',\n  'data-divider',\n  'data-busy',\n  'data-trailing-visibility',\n  'data-state',\n  'data-selected',\n  'data-pressed',\n]);\nconst PROTECTED_TRAILING_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-kui-disabled',\n]);\n\ntype ListActionRowRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-has-icon'?: never;\n    'data-multiline'?: never;\n    'data-density'?: never;\n    'data-divider'?: never;\n    'data-busy'?: never;\n    'data-trailing-visibility'?: never;\n    'data-state'?: never;\n    'data-selected'?: never;\n    'data-pressed'?: never;\n  }\n>;\n\ntype ListActionRowTrailingAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-kui-disabled'?: never;\n    popoverTarget?: string;\n    popoverTargetAction?: 'toggle' | 'show' | 'hide';\n    'aria-controls'?: string;\n    'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';\n  }\n>;\n\nexport interface ListActionRowProps {\n  /** Visible dormant content for the primary button. Must not contain interactive descendants. */\n  label: string | SafeHtml;\n  description?: string | SafeHtml;\n  status?: string | SafeHtml;\n  busy?: boolean;\n  density?: 'standard' | 'compact';\n  divider?: 'none' | 'before' | 'after' | 'both';\n  /** Decorative dormant content for the primary button. Must not contain interactive descendants. */\n  icon?: SafeHtml;\n  action: string;\n  itemId?: string;\n  selected?: boolean;\n  pressed?: boolean;\n  accessibleLabel?: string;\n  title?: string;\n  multiline?: boolean;\n  state?: string;\n  disabled?: boolean;\n  tabIndex?: number;\n  /** Render as an unanimated loading skeleton, disabling both actions: label, description, icon, and status text become skeletons; the `busy` indicator stays live. */\n  placeholder?: boolean;\n  trailingAction: string;\n  trailingActionLabel: string;\n  /** Decorative dormant content for the trailing button. Must not contain interactive descendants. */\n  trailingActionIcon: SafeHtml;\n  trailingActionDisabled?: boolean;\n  trailingActionTitle?: string;\n  trailingActionVisibility?: 'always' | 'interaction';\n  className?: string;\n  rootAttributes?: ListActionRowRootAttributes;\n  trailingActionAttributes?: ListActionRowTrailingAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function ListActionRow({\n  label,\n  description,\n  status,\n  busy = false,\n  density = 'standard',\n  divider = 'none',\n  icon,\n  action,\n  itemId,\n  selected = false,\n  pressed,\n  accessibleLabel,\n  title,\n  multiline = false,\n  state,\n  disabled = false,\n  tabIndex,\n  placeholder = false,\n  trailingAction,\n  trailingActionLabel,\n  trailingActionIcon,\n  trailingActionDisabled = false,\n  trailingActionTitle,\n  trailingActionVisibility = 'always',\n  className = '',\n  rootAttributes = {},\n  trailingActionAttributes = {},\n  slot,\n}: ListActionRowProps) {\n  const extensionRootAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const extensionTrailingAttributes = filterControlAttributes(\n    trailingActionAttributes,\n    PROTECTED_TRAILING_DATA_ATTRIBUTES,\n  );\n\n  return (\n    <div\n      {...extensionRootAttributes}\n      class={`kui-list-action-row ${className}`.trim()}\n      data-component=\"list-action-row\"\n      data-item-id={itemId}\n      data-has-icon={String(Boolean(icon))}\n      data-multiline={multiline ? 'true' : undefined}\n      data-density={density}\n      data-divider={divider}\n      data-busy={busy ? 'true' : undefined}\n      data-trailing-visibility={trailingActionVisibility}\n      data-state={state}\n      data-selected={String(selected)}\n      data-pressed={pressed === undefined ? undefined : String(pressed)}\n      data-placeholder={placeholder ? 'true' : undefined}\n      aria-busy={placeholder || busy ? 'true' : undefined}\n      slot={slot}\n    >\n      <button\n        type=\"button\"\n        class=\"kui-list-action-row__primary\"\n        title={placeholder ? undefined : title}\n        disabled={disabled || placeholder}\n        tabindex={placeholder ? -1 : tabIndex}\n        data-kui-disabled={disabled ? 'true' : undefined}\n        data-action={placeholder ? undefined : action}\n        data-item-id={itemId}\n        aria-label={accessibleLabel}\n        aria-current={selected ? 'page' : undefined}\n        aria-pressed={pressed === undefined ? undefined : String(pressed)}\n      >\n        {icon && (\n          <span class=\"kui-list-action-row__icon\">\n            {placeholder ? (\n              <Skeleton block width={remify(18)} height={remify(18)} />\n            ) : (\n              icon\n            )}\n          </span>\n        )}\n        <span class=\"kui-list-action-row__label\">\n          <span class=\"kui-list-action-row__primary-label\">\n            {placeholder ? <Skeleton width={em(9)} /> : label}\n          </span>\n          {description && (\n            <span class=\"kui-list-action-row__description\">\n              {placeholder ? <Skeleton width={em(11)} /> : description}\n            </span>\n          )}\n          {(busy || status) && (\n            <span class=\"kui-list-action-row__status\">\n              {/* The busy spinner is component-owned chrome drawn from a\n                  known prop, so a placeholder keeps it live; only the status\n                  text is a value and becomes a skeleton. */}\n              {busy && <LoadingSpinner />}\n              {status && (placeholder ? <Skeleton width={em(6)} /> : status)}\n            </span>\n          )}\n        </span>\n      </button>\n      <button\n        {...extensionTrailingAttributes}\n        type=\"button\"\n        class=\"kui-list-action-row__trailing-action\"\n        data-action={placeholder ? undefined : trailingAction}\n        data-item-id={itemId}\n        aria-label={trailingActionLabel}\n        title={trailingActionTitle ?? trailingActionLabel}\n        disabled={trailingActionDisabled || placeholder || undefined}\n        data-kui-disabled={trailingActionDisabled ? 'true' : undefined}\n      >\n        {trailingActionIcon}\n      </button>\n    </div>\n  );\n}\n"]}