@kerfjs/ui 5.0.0-beta.97 → 5.0.0-beta.98

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

@@ -1,6 +1,6 @@
 # Public API signatures for the UI authoring corpus
 
-Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.97` and `kerfjs@5.0.0-beta.97`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
+Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.98` and `kerfjs@5.0.0-beta.98`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
 
 ## `@kerfjs/ui/css-values`
 
@@ -1515,7 +1515,7 @@ export { type ListDropPosition, type ListReorder, type ListReorderSource, type L
 ## `@kerfjs/ui/nav-stack`
 
 ```ts
-export { c as NavStack, N as NavStackProps, d as NavStackToolbarConfig, a as NavStackView, e as NavStackViewBottomToolbar, f as NavStackViewToolbar } from './nav-stack-BvSKY448.js';
+export { c as NavStack, N as NavStackProps, d as NavStackToolbarConfig, a as NavStackView, e as NavStackViewBottomToolbar, f as NavStackViewToolbar } from './nav-stack-Cp3Y8kJ9.js';
 import 'kerfjs';
 import './semantic-content-BbzjvSu9.js';
 import './list.js';
@@ -1559,7 +1559,7 @@ export { type WireNavStackOptions, wireNavStack };
 ```ts
 import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
-import { N as NavStackProps, a as NavStackView } from './nav-stack-BvSKY448.js';
+import { N as NavStackProps, a as NavStackView } from './nav-stack-Cp3Y8kJ9.js';
 import { ResizableRegionProps } from './resizable-region.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
@@ -1782,7 +1782,7 @@ export { Pane, type PaneAppearance, type PaneChromeDividers, type PaneChromePlac
 ```ts
 import { SafeHtml } from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
-import { b as NavPane, N as NavStackProps } from './nav-stack-BvSKY448.js';
+import { b as NavPane, N as NavStackProps } from './nav-stack-Cp3Y8kJ9.js';
 import { ListConfig } from './list.js';
 import { PaneConfig } from './pane.js';
 import { ResizableRegionSeparator, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionPresentation, ResizableRegionRestorePosition } from './resizable-region.js';
@@ -2662,7 +2662,7 @@ import './toolbar.js';
 import './sides-BPSWde0A.js';
 import './pane.js';
 import './workbench.js';
-import './nav-stack-BvSKY448.js';
+import './nav-stack-Cp3Y8kJ9.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';
@@ -2726,7 +2726,11 @@ interface CatalogExampleProps {
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
-/** A labeled catalog specimen with optional explanatory text and alignment. */
+/**
+ * A labeled catalog specimen with optional explanatory text and alignment. A
+ * supplied `label` also names the rendered `section`, so each specimen is an
+ * addressable region; an unlabeled example stays an ordinary grouping.
+ */
 declare function CatalogExample({ label, note, align, viewport, compactFallback, rootAttributes, className, children, slot, }: CatalogExampleProps): SafeHtml;
 
 type CatalogExampleStackRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
@@ -2735,9 +2739,19 @@ type CatalogExampleStackRootAttributes = Readonly<Record<`data-${string}`, strin
     'data-catalog-example-label'?: never;
     'data-catalog-example-note'?: never;
     'data-align'?: never;
+    'data-width'?: never;
 }>;
+/**
+ * How wide a stack may grow: `reading` (default) caps it at a 736px reading
+ * measure for component specimens; `full` lets it span the stage for
+ * application-width compositions such as boards, app shells, drawers, and
+ * split views.
+ */
+type CatalogExampleStackWidth = 'reading' | 'full';
 interface CatalogExampleStackProps {
     label?: string;
+    /** Maximum width of the stack (default `reading`). */
+    width?: CatalogExampleStackWidth;
     rootAttributes?: CatalogExampleStackRootAttributes;
     className?: string;
     children?: KerfUiContent;
@@ -2745,7 +2759,7 @@ interface CatalogExampleStackProps {
     slot?: string;
 }
 /** A vertically stacked group of catalog examples. */
-declare function CatalogExampleStack({ label, rootAttributes, className, children, slot, }: CatalogExampleStackProps): kerfjs.SafeHtml;
+declare function CatalogExampleStack({ label, width, rootAttributes, className, children, slot, }: CatalogExampleStackProps): kerfjs.SafeHtml;
 
 /**
  * Browser helpers for UX Review region captures from a catalog. The local
@@ -2773,7 +2787,7 @@ declare function uxReviewCaptureUrl({ projectDirectory, title, context, }: UxRev
  */
 declare function loadUxReviewProject(pageUrl: string | URL, fetchImpl?: typeof globalThis.fetch): Promise<string | null>;
 
-export { Catalog, CatalogExample, type CatalogExampleAlign, type CatalogExampleProps, CatalogExampleStack, type CatalogExampleStackProps, type CatalogExampleViewport, CatalogProps, UX_REVIEW_PROJECT_PATH, type UxReviewCapture, loadUxReviewProject, uxReviewCaptureUrl };
+export { Catalog, CatalogExample, type CatalogExampleAlign, type CatalogExampleProps, CatalogExampleStack, type CatalogExampleStackProps, type CatalogExampleStackWidth, type CatalogExampleViewport, CatalogProps, UX_REVIEW_PROJECT_PATH, type UxReviewCapture, loadUxReviewProject, uxReviewCaptureUrl };
 ```
 
 ## `@kerfjs/ui/catalog-resources`
@@ -2786,7 +2800,7 @@ import './semantic-content-BbzjvSu9.js';
 import './sides-BPSWde0A.js';
 import './pane.js';
 import './workbench.js';
-import './nav-stack-BvSKY448.js';
+import './nav-stack-Cp3Y8kJ9.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';
@@ -2840,7 +2854,7 @@ import './semantic-content-BbzjvSu9.js';
 import './sides-BPSWde0A.js';
 import './pane.js';
 import './workbench.js';
-import './nav-stack-BvSKY448.js';
+import './nav-stack-Cp3Y8kJ9.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';

package/ai/skill.md

@@ -306,7 +306,7 @@ Hard rules:
 11. Use token-controlled `TokenSearchField` when free text and removable structured filters share one editor. Editable text stays DOM-owned between token changes; to replace the text programmatically (reseeding a persistent dialog's field on reopen, applying a saved search) change the field's `revision` along with `query` for an unmanaged field, or call `model.replace({ query, tokens })` for a model-managed field; never re-key a wrapper. The leading icon, first text line, clear action, and trailing slot share one fixed row when content wraps. For automatic parsing, chips, suggestions, and evaluation, use createTokenSearchModel with grammar rules, pass it as TokenSearchField.model, and register it in wireTokenSearchFields models; a rule's `suggest(input, state)` receives committed tokens so it can exclude selected values. Otherwise the app owns parsing and suggestions; call `readTokenSearchField()` on input, empty `textContent` on clear, use `placeTokenSearchCaret()` after explicit controlled focus changes, and call `wireTokenSearchFields()` once so Enter submits without inserting a line break and keyboard chip deletion restores focus plus the text-relative caret after controlled replacement. `clearIcon` replaces the clear action's glyph (its `clearLabel` still names it). Enable `collapsible` for an animated iconic closed state, standalone or inside `ToolbarControlGroup`; the field keeps text or tokens expanded, and `wireTokenSearchFields()` manages the transient expand/collapse/focus by default (activate to reveal + focus, Escape or empty blur to collapse). Bind the field's `expanded` to the returned handle's `expanded(id)` signal or adopt your own via `collapsible.signals`; opt a behavior out only when the app must own it. Do not hand-roll the open handler, the focusout collapse, a clear-button mousedown guard, or reopening after controlled clear or Select All deletion — the helper keeps the replacement editor open and focused. Clear and deletion restoration finish at the replacement mutation checkpoint before the next input task, so shortcut-letter typing cannot escape to the page and delayed animation frames cannot overwrite a later selection. Persist both query and tokens returned by the DOM read. For real-app adoption it also provides a focusout keep-open exception (`data-token-search-keep-open` regions or `collapsible.keepOpenOn(target)`, so a sibling suggestions/date/help surface does not collapse an empty field), opt-in atomic-chip keyboard (`keyboard`: Backspace/Delete remove the adjacent chip via `onRemoveToken`, ArrowRight moves the caret past a trailing chip), and an `onEdit({id, editor, event})` input callback (the `InputEvent` lets you gate on `inputType`/`data`) — reach for these instead of re-adding hand-rolled keydown/input handlers around the field.
     An application helper can call `model.commit(value)` for the active `name:` prefix when it computes a valid value outside suggestions; invalid values and missing prefixes leave the query unchanged.
 12. Demo work uses public production component subpaths and their browser-selected CSS. Focused demos and recipes have no local stylesheet, inline style, or styling-only class; use public components and `CatalogExample.viewport` for unavoidable specimen constraints (a recipe declares its frame through its exported `presentation`). When a recipe needs a capability no component offers, report the component gap instead of adding CSS. Use exactly three demo kinds: a `component` is one component with variants/states, a `composition` is a focused container of components commonly used together, and a `recipe` is the recommended production approach to a task. Organize catalog routes into product-important functional groups; within each group put all components before compositions, order each kind by importance with display-name alphabetical tie-breaking, and put recipes after every component/composition group. Show `Composition` as an entry tag instead of repeating the word in its name. Give every public visual component its own category-grouped catalog route; list themed third-party components under a clearly labeled collapsible ecosystem section, with a focused route for each. For the complete taxonomy, focused/composition decision, `CatalogExample` / `CatalogExampleStack` row/group nesting, specimen structure and metadata ownership, follow the single [Catalog demo authoring contract](../docs/catalog.md#catalog-demo-authoring-contract), discovered machine-readably through [`catalog-authoring.json`](./catalog-authoring.json). Never infer structure from private `kui-catalog-*` classes. Project each component's deterministic repository-relative demo source and existing documentation path so the detail can expose `View demo source` and `Read guidance` links without a runtime export; also derive first-party component implementation paths from their canonical browser imports, and label Web Awesome documentation as Kerf integration guidance. Declare direct `uses` relationships so `Used by` stays derivable, and theme shell chrome through the same semantic tokens as the stage instead of drawing a substitute. Enable `wireCatalog({ revealSelection: true })` for long desktop sidebars so controlled selections remain visible without moving focus; keep its default compact media guard unless compact scrolling is an explicit product behavior, and use `revealCatalogEntry` for an initial deep link.
-13. The Web Awesome theme makes Tooltip and Popover arrowless by default. Keep that default unless a pointer materially clarifies the anchor; opt back in with `--wa-tooltip-arrow-size`, `--kui-wa-popover-arrow-size`, or a popover's public `--arrow-size`, and use `without-arrow` when local no-arrow intent should survive theme changes. Its non-field chrome uses `--kui-wa-control-inset` (8px controls/items), `--kui-wa-surface-margin` / `--kui-wa-surface-inset` (8px around/inside Accordion, Card, Details, Callout, and Include), and `--kui-wa-container-inset` (16px Tab Panel content and framed disclosure regions). Plain Details use the 8px surface inset on the trigger and keep the body flush; plain Accordion items use it on both trigger and body. Outlined and sunken Details use the 16px container inset on the trigger and 8px on the body; framed Accordion items use 16px on both. Dialog maps its body to the 8px surface tier and its footer to the 16px container tier independently of `--spacing`. Override those tiers instead of restyling individual parts. Filled badges use each variant's quiet fill with normal text so their compact copy stays WCAG-AA readable; override the pair with `--kui-wa-badge-filled-background` / `--kui-wa-badge-filled-foreground`, not host selectors. When a dialog provides another dismissal affordance, put `hide-actions` on the `wa-dialog` host to hide its directly exported `header-actions` part; never chain `::part()` selectors through internal parts. Checkbox and Radio Group option regions, the Color Picker trigger, and Slider's complete interactive region receive the shared 8px logical inline outer inset because those controls have no bordered field shell. Known Date field captions and bordered text-like field hints align with values at the 9px border-plus-padding inset. OTP Input's label uses the same uppercase xs/650 treatment as other field labels, and both its label and hint use that 9px inset.
+13. The Web Awesome theme makes Tooltip and Popover arrowless by default. Keep that default unless a pointer materially clarifies the anchor; opt back in with `--wa-tooltip-arrow-size`, `--kui-wa-popover-arrow-size`, or a popover's public `--arrow-size`, and use `without-arrow` when local no-arrow intent should survive theme changes. Its non-field chrome uses `--kui-wa-control-inset` (8px controls/items), `--kui-wa-surface-margin` / `--kui-wa-surface-inset` (8px around/inside Accordion, Card, Details, Callout, and Include), and `--kui-wa-container-inset` (16px Tab Panel content and framed disclosure regions). Plain Details use the 8px surface inset on the trigger and keep the body flush; plain Accordion items use it on both trigger and body. Outlined and sunken Details use the 16px container inset on the trigger and 8px on the body; framed Accordion items use 16px on both. Dialog maps its body to the 8px surface tier and its footer to the 16px container tier independently of `--spacing`. Override those tiers instead of restyling individual parts. Filled badges use each variant's quiet fill with normal text so their compact copy stays WCAG-AA readable; override the pair with `--kui-wa-badge-filled-background` / `--kui-wa-badge-filled-foreground`, not host selectors. The theme draws a dialog's or drawer's built-in close control as the same 40px borderless circle a single `ToolbarControlGroup` button uses, so do not restyle it. When a dialog provides another dismissal affordance, put `hide-actions` on the `wa-dialog` host to hide its directly exported `header-actions` part; never chain `::part()` selectors through internal parts. Checkbox and Radio Group option regions, the Color Picker trigger, and Slider's complete interactive region receive the shared 8px logical inline outer inset because those controls have no bordered field shell. Known Date field captions and bordered text-like field hints align with values at the 9px border-plus-padding inset. OTP Input's label uses the same uppercase xs/650 treatment as other field labels, and both its label and hint use that 9px inset.
 14. Treat the complete Web Awesome catalog as support coverage, not a recommendation list. Its UX sidebar marks superseded and exceptional entries `Discouraged`. Use `openAnchoredSurface` from `@kerfjs/ui/anchored-surface` for arbitrary interactive help or popup content beside a control, or `openAnchoredSurfaceAt` at pointer coordinates; pass an accessible label and let the app own content/actions. It stays interactive inside a native `<dialog>`, `wa-dialog`, or `wa-drawer` (no host markup needed for the Web Awesome ones) and closes with that dialog. Consider Popup only when its lower-level behavior is specifically needed. Prefer Kerf `Select` over direct Dropdown/Dropdown Item/Select/Option composition, `SegmentedControl` over Button Group, `TabBar` or `SegmentedControl` over Web Awesome Tabs, `LucideIcon` over Web Awesome Icon, and `ResizableRegion` over Split Panel. Use Tree/Tree Item, Animated Image, and Comparison only for a specific required behavior; avoid Zoomable Frame. Never render a `Discouraged` element directly in application, demo, or recipe markup; reach it only through the Kerf component that wraps it (`PopupMenu` renders `wa-dropdown`, `Select` renders `wa-select` / `wa-option`), and treat a Kerf component gap as a request to file, not a reason to drop to the raw element.
 15. Build sidebars, main areas, inspectors, and dialogs by rendering `Pane` (`@kerfjs/ui/pane`): an unpadded `.kui-pane` root, an optional `header`, one scrolling `.kui-pane__content`, and an optional `footer`; pick landmarks with `element` / `contentElement`. Never write a component's anatomy classes (`kui-pane`, `kui-toolbar`, `kui-list-item`, …) onto your own element to recreate it — render the component (`KUI-L103`). Only the catalog's `placeableClasses` (the `.kui-content` / `.kui-scroll-owner` / `.kui-control-cluster` / `.kui-inline-metadata` layout utilities, `.kui-app-root`, and `.kui-content-item` geometry on a non-div carrier) belong on elements you write. Use `Row` instead of a hand-written flex-row wrapper, `List` instead of a hand-written flex-column wrapper, and `Grid` instead of repeated equal-track CSS when children need a fixed positive count of evenly distributed columns. `Row` defaults to left/full with an `xs` gap and no wrapping; Grid defaults to an `xs` gap and keeps each track at `minmax(0, 1fr)`; List retains full/top and zero-gap defaults. The app owns Grid's responsive column-count changes. When a Row, List, or Grid is the layout root of a definite-height parent (an app root or a fixed-height frame), pass `fill` so it takes that full height, and put route/test/recipe `data-*` markers in its `rootAttributes`; never wrap a layout in a frame `Pane` just for height or a root attribute, because its content slot becomes a scroll owner that never scrolls. Inside a flex layout use `flex`, not `fill`. Use `List` when rows or sections also need flex growth, one vertical scroll owner, or physical-edge dividers. `dividerSides`, `textInsets`, and `controlInsets` use canonical physical `t`/`r`/`b`/`l` order; text geometry wins where text and control selections overlap. `ListInsetText` and `ListInsetControl` inset all four sides by default and accept the same `sides` grammar for selective edges. A dialog body is generally a `List`: set `DialogSurface bodyInset="none"` when its list children own geometry, and wrap bare dialog prose in `ListInsetText` so it aligns with bordered siblings without a second inset. Add `.kui-content` for 24px major vertical separation and render each ordinary surface-like child as `ContentItem` (`@kerfjs/ui/content-item`) for a child-owned 8px inline margin, 1px border, 8px padding, and 12px radius. For a chat transcript, set `bubble="start"` (other participants) or `bubble="end"` with `appearance="brand-loud"` (the person's own messages) instead of app width, alignment, or color CSS; the item fits its message up to 80% of the row. Choose `frame="framed"` (neutral border in the always-reserved 1px, same geometry) only for a real distinction and `shape="pill"` for 22px; do not hand-write `<div class="kui-content-item">` or its modifier classes. There is no filled variant: a lowered filled surface is `SunkenPanel`. Do not pad pane shells, duplicate item geometry in wrappers, or create nested scroll owners. Align text to text and icons to icons across a pane — a title, a row label, and bare prose share the same text column (`ListInsetText` puts bare text on it); a border is decoration and never the alignment anchor, so a bordered surface extends to the pane gutter instead of being indented to line its border up with a heading's text.
     15a. Use `Text` from `@kerfjs/ui/text` for ordinary headings, paragraphs, and inline secondary text outside toolbar title zones. Omit `variant` for the default `p`, pass `h1`–`h6` according to the document outline, or use `variant="span"` inside a row, label, or table cell; ordinary native attributes pass through. Express supporting, error, compact, or code text with the independent finite `tone="quiet|danger"`, `size="compact"`, and `font="monospace"` props instead of global utility classes or appearance-only heading choices. Block Text variants own a transparent 1px border and the standard item padding; `span` owns no box geometry. Keep toolbar identity/title content on `ToolbarText` and list-aligned bare prose on `ListInsetText`. `ToolbarText` below `xlarge` is intentionally quiet identity text in default tone; a normal-color subsection title is `Text` with an `h2`–`h6` variant (or `ListHeader` for a list or menu section), never a recolored `ToolbarText`. Use `controlMargins` with canonical physical Sides for an exterior 8px control gutter without a Row wrapper; avoid stacking parent insets, and remember spans retain native inline margin behavior.
@@ -326,7 +326,7 @@ For a rail view heading, use `presentation="title"` for the 36px bold,
 flush-start trigger and adjacent caret. Set `focusRingInset` when an ancestor
 clips focus painting; never restyle Select shadow parts from application CSS.
 
-19. Compose `ValueTable` from typed `ValueTableRow` entries instead of handwritten `dt`/`dd` wrappers. Pass `icon` for the optional 24px leading visual; the row owns 8px of root-scaled top and bottom padding, the 8px iconless or 40px icon-bearing separator start, and the common 8px right inset. 20. Use the standard direct `Toolbar` composition for a panel, dialog, or page heading, not a private wrapper or custom heading row. Put an optional icon in a `ToolbarControlGroup`, the title directly in the leading zone as extra-large `ToolbarText`, and actions in a trailing group. Set `headingLevel` for page/section landmarks. Supporting copy stays below the toolbar as app-owned content. The app owns modal behavior, focus, dismissal, command policy, ids, and action handling. 21. Space with the official five-step scale, picked by how connected two elements are — not by eye. `0` `--kui-space-none` = no separation (one unit); `4px` `--kui-space-2xs` = very minor air on a connected cluster; `8px` `--kui-space-xs` = standard, between elements within a group; `16px` `--kui-space-m` = minor, between homogeneous groups; `24px` `--kui-space-l` = major, between heterogeneous groups (the `.kui-content` rhythm). The 8px-vs-24px distinction is inside-a-group vs between-major-differing-regions. `--kui-space-s` (12px) and `--kui-space-xl` (32px) are off-scale exceptions. For `Row.gap`, `Grid.gap`, or `List.gap`, pass a finite shorthand such as `gap="xs"` or `gap="m"`; use `Spacer` for one intentional typed empty width/height or a flexible main-axis gap. When one token is insufficient, import typed builders from the CSS-free `@kerfjs/ui/css-values` subpath. Preserve property grammar: lengths for gap/Spacer/Skeleton geometry, `flex()` for Row/Grid/List flex, and a foreground color for choice icons: `uiColor()` with a `*-on-*` or text token (`success-on-quiet`, `text-quiet`) or `foregroundColorVar()`. Fill tokens (`*-fill-*`) are backgrounds, not foregrounds, and `SelectChoice.color` rejects them. Never cast between brands or emit raw row `style` declarations. `plus` is not standalone and must be wrapped in `calc`; `remify()` remains source-CSS syntax and is never a runtime prop value. See `docs/layout.md` "Spacing scale". 22. Pick a whole-screen layout from the opt-in, tree-shakeable subpaths by data + interaction + device, and derive responsiveness from `@kerfjs/ui/device-class`'s `deviceClass()` (`compact` = handset or portrait tablet = one pane at a time). Simple/flat → `NavStack` with one entry (single pane), plus `TabNavigator` (`@kerfjs/ui/tab-navigator`, iOS bottom tabs, each tab its own `NavStack`) for 2–5 co-equal sections on `compact`; show an unread count on a tab with its `badge` (a number or short string, rendered as the top-trailing danger `Badge` on the icon) plus a localized `badgeLabel` ("3 unread", folded into the tab's name as "Inbox, 3 unread"), never by concatenating the count into `label` or restyling the badge; for new content without a count pass `badge: true` (the text-free dot) with its required `badgeLabel` ("New activity"). Drill-down → `NavStack` (`@kerfjs/ui/nav-stack`), upgrading to `SplitView` (`@kerfjs/ui/split-view`, list-detail) once both panes fit (`atLeast('tablet')` landscape); `SplitView` collapses to a `NavStack` on `compact`. Keep each stack's ordered views controlled; put view-specific bottom chrome on `NavStackView.bottomToolbar` (or use the component-level persistent fallback), then call `wireNavStack` so content slides while the active view's top and bottom chrome cross-fade and focus moves into the new top view/restores on pop. Mark a preferred initial heading or control with `data-nav-focus` when DOM order is not sufficient. The stack's top chrome is a real `Toolbar`: put a view's title and groups on `NavStackView.toolbar` (`title`, `leading`, `center`, `trailing`), where its Toolbar configuration overrides stack-wide `toolbarConfig` defaults; configure `backIcon` / `backText` through the stack, never with CSS. Each view and the stack fallback use a structured `bottomToolbar` with an accessible `label`; a view can also provide `header` / `footer`, `headerList` / `footerList`, and `pane` configuration, which render a Pane around that view's scrolling content. `SplitView` forwards both of its inner components: `resizable` takes the list `ResizableRegion`'s `separator`, `handleIcon`, `contentOverflow`, and collapse props (`collapsed`, `transitioning`, `collapseMotion`, `restoreControl`, `restorePosition`), and `compactStack` takes the compact stack's `toolbarConfig`, `backIcon`, `backText`, `hideToolbar`, `bottomToolbar`, plus `list` / `detail` view toolbars (structured `toolbar` and `bottomToolbar`). Complex tool with peripheral panels → `Workbench` (`@kerfjs/ui/workbench`, collapsible rails + drawer) `atLeast('desktop')`, degrading to `NavStack`/overlays below. Workbench panels are fixed-size unless a panel opts in with `resizable` (`true` or `{ min, max }`); then render `size={sizeSignal.value}` and call `wireWorkbench(root, { id, panels: { leftRail: { size: sizeSignal, storageKey? } }, deviceClass })` from `@kerfjs/ui/wire-workbench` for pointer drags, arrow/Shift+arrow/Home/End on the separator, persistence, and no resizing on `compact` classes. Inline rails, fixed or resizable, leave the work area `mainMinSize` px of width (a `Workbench` prop, default 320, `0` off), and an inline bottom drawer leaves it `mainMinHeight` px of height (default 120, `0` off): resizable panels stop growing there, rails shrink in proportion when the Workbench narrows and the drawer when it gets shorter, so do not add your own main-area `min-width` / `min-height`. Rails present as overlays below the `narrow` Workbench container breakpoint (704px) by default — `responsiveOverlayAt: "compact"` moves that to 448px and `"never"` keeps a rail inline — and a bottom drawer opts in the same way; do not derive `presentation` from `deviceClass`, and overlays never resize. At compact widths an overlay rail fills the Workbench less a 44px dismiss strip (`--kui-workbench-overlay-dismiss-margin`) on the side away from its edge; `compactOverlay: "full"` makes one rail fill it. Pass each such panel's `collapsed` signal to `wireWorkbench` too (`panels: { leftRail: { collapsed: navCollapsed } }`, `size` optional) so the overlay is transient like `wireSidebar`'s compact overlay: it collapses when the breakpoint begins to apply (the inline state returns when it ends), takes focus on its first control and keeps Tab inside it while open, and closes on Escape or an outside press with focus returned to its toggle (give each toggle `aria-controls` naming its panel's derived id, `<workbench id>-left-rail` / `-right-rail` / `-bottom-drawer`, so a panel open at wire-up has a focus target too); opening one overlay closes the other open overlays, so they never cover each other's controls; do not hand-roll those listeners (`dismissOverlays: false` opts out of all of it, `exclusiveOverlays: false` of exclusivity only). Collapse stays the app's `collapsed` flag and keeps the size, so an expanded panel returns at its last size. Let the Workbench compose panel toolbars: give each panel `toolbar: { label, title?, leading?, center?, trailing?, toggle: { action, name, showLabel?, hideLabel? } }` and the work area `mainToolbar` (and `mainBottomToolbar` for a drawer). Each of these toolbars takes the `Toolbar`'s configuration (`ToolbarConfig`: `dividerSides`, `centerAlign`, `responsive`, `responsiveAt`, `safeAreaEdges`); configure a composed toolbar through those props (for example `dividerSides: ""` to drop its divider), never with CSS. Configure the composed panes and chrome lists the same way: a panel's `pane` (and `CollapsiblePanel`'s `pane`) and the Workbench's `mainPane` take `PaneConfig` (`contentElement`, `contentLabel`, `separators`, `safeAreaEdges` — for example `{ contentElement: "nav", contentLabel: "Files" }` for a navigator rail), and `mainHeaderList` / `mainFooterList` take `ListConfig` (`gap`, `hAlign`, `vAlign`, `dividerSides`, `textInsets`, `controlInsets`). Open, a panel's toolbar places groups in its leading, center, and trailing zones, with the toggle last; mark a ToolbarControlGroup relocateOnCollapse to keep it available when closed (pass marked groups directly or in arrays rather than JSX fragments); closed, marked groups follow zone order into the work area before the toggle — a left rail's lead `mainToolbar`, a right rail's end it, a drawer's trail `mainBottomToolbar` or float in a corner `FloatingToolbar` — and panel-only groups stay behind. A control sits near where its effect appears: a collapsed drawer's restore belongs in the bottom toolbar or a `FloatingToolbar` beside the drawer, not in a distant top toolbar. Do not hand-place panel toggles in the work-area toolbar or render a second copy, and handle only the toggle's `data-action`. A collapsed panel renders `inert` and `aria-hidden` by itself, on the rail/drawer and its content (its `restoreControl` stays outside and reachable), so do not add your own `tabindex`, `aria-hidden`, or `inert` to hide it. These are declarative (the app owns the stack/selection/collapsed/active state as signals) with disposer-returning `wire…` helpers; each stays out of the barrel, and its CSS-aware browser import loads the layout's CSS plus that of every component it renders (`Pane`, `Toolbar`, `List`, …), so do not hand-import `pane.css` or the other internal stylesheets; the companion `.css` subpath is only for pipelines without the `browser` condition. For a standalone collapsible rail or bottom drawer outside a full shell, use `CollapsiblePanel` + `CollapsiblePanelToggle` (`@kerfjs/ui/collapsible-panel`) with `wireSidebar` (`@kerfjs/ui/wire-sidebar`): the standard collapse animation and per-side icon convention (`PanelLeft*`/`PanelRight*`/`PanelBottom*`) plus toggle, focus, compact overlay, and persistence semantics. Give a standalone panel the same `toolbar` roles and render `CollapsiblePanelRelocated` in your work-area toolbar (first in leading for a left rail, last in trailing for a right rail, a bottom toolbar or a `FloatingToolbar` restoreControl for a drawer) instead of hand-placing a second toggle. A collapsed `CollapsiblePanel`, `ResizableRegion`, or Workbench panel renders `inert` and `aria-hidden` by itself, so do not hide collapsed content yourself either. Likewise an open side overlay (a Workbench rail overlay, a `wireSidebar` compact overlay, an overlay `CollapsiblePanel` or horizontal `ResizableRegion`) hides the covered work area's `FloatingToolbar`s and restore corners by itself until it closes, so do not hide them from overlay state. A compact overlay opens only on a user action: wire-up on a compact device and a wide-to-compact crossing collapse every panel, and a wide crossing restores the inline state. Seed the signal with `signal(device.value.compact)` and pass the panel's `inlineCollapsed` default so the first compact render has no overlay. Dialogs pick the same inner layout, then present per device class (full-screen modal on `compact`, inline on desktop). A list-detail dialog is a Workbench-shaped layout on roomy devices: a full-height list sidebar and a full-height main column, each a `Pane` with its own top `Toolbar`; the main column holds the primary xl title, the close control (`data-dialog="close"` in a `without-header` Web Awesome dialog), and the record actions, never a header spanning both columns. A top-level percentage-height shell needs a definite containing height: opt into `@kerfjs/ui/document.css` and put `.kui-app-root` on the one direct mount container, or provide equivalent application-owned geometry. The global baseline is deliberately absent from `styles.css` and component imports. See `docs/app-layouts.md`, `docs/document-baseline.md`, and `docs/collapsible-panel.md`. 23. Layouts and `Pane` are safe-area aware without configuration: backgrounds, separators, and dividers paint through a device's unsafe areas (a collapsible rail or drawer grows by the inset it docks to), content is padded only on the sides a region actually reaches, and block insets are scroll padding inside the scroller so first/last content can always be scrolled clear. Interior edges get nothing, and a collapsed rail hands its edge back to the center. Never add your own `env(safe-area-inset-*)` padding around a kerf layout or pane — that double-insets. In an app-owned arrangement of panes, pass `Pane.safeAreaEdges` (the sides that pane reaches; `[]` opts out); give an app bar or bottom bar that sits at a screen edge outside a Pane header or footer `Toolbar.safeAreaEdges` for the sides it reaches (for example `['block-start', 'inline-start', 'inline-end']`); the Workbench `mainToolbar` / `mainBottomToolbar` and panel `toolbar` configurations forward the same `safeAreaEdges` to their `Toolbar`. Do not set the internal `--kui-edge-inset-*` context yourself. The device insets are `--kui-safe-area-*` (defaulting to `env()`), overridable on `:root`. See `docs/app-layouts.md` "Safe areas".
+19. Compose `ValueTable` from typed `ValueTableRow` entries instead of handwritten `dt`/`dd` wrappers. Pass `icon` for the optional 24px leading visual; the row owns 8px of root-scaled top and bottom padding, the 8px iconless or 40px icon-bearing separator start, and the common 8px right inset. 20. Use the standard direct `Toolbar` composition for a panel, dialog, or page heading, not a private wrapper or custom heading row. Put an optional icon in a `ToolbarControlGroup`, the title directly in the leading zone as extra-large `ToolbarText`, and actions in a trailing group. Set `headingLevel` for page/section landmarks. Supporting copy stays below the toolbar as app-owned content. The app owns modal behavior, focus, dismissal, command policy, ids, and action handling. 21. Space with the official five-step scale, picked by how connected two elements are — not by eye. `0` `--kui-space-none` = no separation (one unit); `4px` `--kui-space-2xs` = very minor air on a connected cluster; `8px` `--kui-space-xs` = standard, between elements within a group; `16px` `--kui-space-m` = minor, between homogeneous groups; `24px` `--kui-space-l` = major, between heterogeneous groups (the `.kui-content` rhythm). The 8px-vs-24px distinction is inside-a-group vs between-major-differing-regions. `--kui-space-s` (12px) and `--kui-space-xl` (32px) are off-scale exceptions. For `Row.gap`, `Grid.gap`, or `List.gap`, pass a finite shorthand such as `gap="xs"` or `gap="m"`; use `Spacer` for one intentional typed empty width/height or a flexible main-axis gap. When one token is insufficient, import typed builders from the CSS-free `@kerfjs/ui/css-values` subpath. Preserve property grammar: lengths for gap/Spacer/Skeleton geometry, `flex()` for Row/Grid/List flex, and a foreground color for choice icons: `uiColor()` with a `*-on-*` or text token (`success-on-quiet`, `text-quiet`) or `foregroundColorVar()`. Fill tokens (`*-fill-*`) are backgrounds, not foregrounds, and `SelectChoice.color` rejects them. Never cast between brands or emit raw row `style` declarations. `plus` is not standalone and must be wrapped in `calc`; `remify()` remains source-CSS syntax and is never a runtime prop value. See `docs/layout.md` "Spacing scale". 22. Pick a whole-screen layout from the opt-in, tree-shakeable subpaths by data + interaction + device, and derive responsiveness from `@kerfjs/ui/device-class`'s `deviceClass()` (`compact` = handset or portrait tablet = one pane at a time). Simple/flat → `NavStack` with one entry (single pane), plus `TabNavigator` (`@kerfjs/ui/tab-navigator`, iOS bottom tabs, each tab its own `NavStack`) for 2–5 co-equal sections on `compact`; show an unread count on a tab with its `badge` (a number or short string, rendered as the top-trailing danger `Badge` on the icon) plus a localized `badgeLabel` ("3 unread", folded into the tab's name as "Inbox, 3 unread"), never by concatenating the count into `label` or restyling the badge; for new content without a count pass `badge: true` (the text-free dot) with its required `badgeLabel` ("New activity"). Drill-down → `NavStack` (`@kerfjs/ui/nav-stack`), upgrading to `SplitView` (`@kerfjs/ui/split-view`, list-detail) once both panes fit (`atLeast('tablet')` landscape); `SplitView` collapses to a `NavStack` on `compact`. Keep each stack's ordered views controlled; put view-specific bottom chrome on `NavStackView.bottomToolbar` (or use the component-level persistent fallback), then call `wireNavStack` so content slides while the active view's top and bottom chrome cross-fade and focus moves into the new top view/restores on pop. Mark a preferred initial heading or control with `data-nav-focus` when DOM order is not sufficient. The stack's top chrome is a real `Toolbar`: put a view's title and groups on `NavStackView.toolbar` (`title`, `leading`, `center`, `trailing`), where its Toolbar configuration overrides stack-wide `toolbarConfig` defaults; the title leads, left-aligned and xlarge, at the root and steps down to large and centers (truncating before any control) once the back control shows, unless the view supplies `center` — do not restyle it to align; configure `backIcon` / `backText` through the stack, never with CSS. Each view and the stack fallback use a structured `bottomToolbar` with an accessible `label`; a view can also provide `header` / `footer`, `headerList` / `footerList`, and `pane` configuration, which render a Pane around that view's scrolling content. `SplitView` forwards both of its inner components: `resizable` takes the list `ResizableRegion`'s `separator`, `handleIcon`, `contentOverflow`, and collapse props (`collapsed`, `transitioning`, `collapseMotion`, `restoreControl`, `restorePosition`), and `compactStack` takes the compact stack's `toolbarConfig`, `backIcon`, `backText`, `hideToolbar`, `bottomToolbar`, plus `list` / `detail` view toolbars (structured `toolbar` and `bottomToolbar`). Complex tool with peripheral panels → `Workbench` (`@kerfjs/ui/workbench`, collapsible rails + drawer) `atLeast('desktop')`, degrading to `NavStack`/overlays below. Workbench panels are fixed-size unless a panel opts in with `resizable` (`true` or `{ min, max }`); then render `size={sizeSignal.value}` and call `wireWorkbench(root, { id, panels: { leftRail: { size: sizeSignal, storageKey? } }, deviceClass })` from `@kerfjs/ui/wire-workbench` for pointer drags, arrow/Shift+arrow/Home/End on the separator, persistence, and no resizing on `compact` classes. Inline rails, fixed or resizable, leave the work area `mainMinSize` px of width (a `Workbench` prop, default 320, `0` off), and an inline bottom drawer leaves it `mainMinHeight` px of height (default 120, `0` off): resizable panels stop growing there, rails shrink in proportion when the Workbench narrows and the drawer when it gets shorter, so do not add your own main-area `min-width` / `min-height`. Rails present as overlays below the `narrow` Workbench container breakpoint (704px) by default — `responsiveOverlayAt: "compact"` moves that to 448px and `"never"` keeps a rail inline — and a bottom drawer opts in the same way; do not derive `presentation` from `deviceClass`, and overlays never resize. At compact widths an overlay rail fills the Workbench less a 44px dismiss strip (`--kui-workbench-overlay-dismiss-margin`) on the side away from its edge; `compactOverlay: "full"` makes one rail fill it. Pass each such panel's `collapsed` signal to `wireWorkbench` too (`panels: { leftRail: { collapsed: navCollapsed } }`, `size` optional) so the overlay is transient like `wireSidebar`'s compact overlay: it collapses when the breakpoint begins to apply (the inline state returns when it ends), takes focus on its first control and keeps Tab inside it while open, and closes on Escape or an outside press with focus returned to its toggle (give each toggle `aria-controls` naming its panel's derived id, `<workbench id>-left-rail` / `-right-rail` / `-bottom-drawer`, so a panel open at wire-up has a focus target too); opening one overlay closes the other open overlays, so they never cover each other's controls; do not hand-roll those listeners (`dismissOverlays: false` opts out of all of it, `exclusiveOverlays: false` of exclusivity only). Collapse stays the app's `collapsed` flag and keeps the size, so an expanded panel returns at its last size. Let the Workbench compose panel toolbars: give each panel `toolbar: { label, title?, leading?, center?, trailing?, toggle: { action, name, showLabel?, hideLabel? } }` and the work area `mainToolbar` (and `mainBottomToolbar` for a drawer). Each of these toolbars takes the `Toolbar`'s configuration (`ToolbarConfig`: `dividerSides`, `centerAlign`, `responsive`, `responsiveAt`, `safeAreaEdges`); configure a composed toolbar through those props (for example `dividerSides: ""` to drop its divider), never with CSS. Configure the composed panes and chrome lists the same way: a panel's `pane` (and `CollapsiblePanel`'s `pane`) and the Workbench's `mainPane` take `PaneConfig` (`contentElement`, `contentLabel`, `separators`, `safeAreaEdges` — for example `{ contentElement: "nav", contentLabel: "Files" }` for a navigator rail), and `mainHeaderList` / `mainFooterList` take `ListConfig` (`gap`, `hAlign`, `vAlign`, `dividerSides`, `textInsets`, `controlInsets`). Open, a panel's toolbar places groups in its leading, center, and trailing zones, with the toggle last; mark a ToolbarControlGroup relocateOnCollapse to keep it available when closed (pass marked groups directly or in arrays rather than JSX fragments); closed, marked groups follow zone order into the work area before the toggle — a left rail's lead `mainToolbar`, a right rail's end it, a drawer's trail `mainBottomToolbar` or float in a corner `FloatingToolbar` — and panel-only groups stay behind. A control sits near where its effect appears: a collapsed drawer's restore belongs in the bottom toolbar or a `FloatingToolbar` beside the drawer, not in a distant top toolbar. Do not hand-place panel toggles in the work-area toolbar or render a second copy, and handle only the toggle's `data-action`. A collapsed panel renders `inert` and `aria-hidden` by itself, on the rail/drawer and its content (its `restoreControl` stays outside and reachable), so do not add your own `tabindex`, `aria-hidden`, or `inert` to hide it. These are declarative (the app owns the stack/selection/collapsed/active state as signals) with disposer-returning `wire…` helpers; each stays out of the barrel, and its CSS-aware browser import loads the layout's CSS plus that of every component it renders (`Pane`, `Toolbar`, `List`, …), so do not hand-import `pane.css` or the other internal stylesheets; the companion `.css` subpath is only for pipelines without the `browser` condition. For a standalone collapsible rail or bottom drawer outside a full shell, use `CollapsiblePanel` + `CollapsiblePanelToggle` (`@kerfjs/ui/collapsible-panel`) with `wireSidebar` (`@kerfjs/ui/wire-sidebar`): the standard collapse animation and per-side icon convention (`PanelLeft*`/`PanelRight*`/`PanelBottom*`) plus toggle, focus, compact overlay, and persistence semantics. Give a standalone panel the same `toolbar` roles and render `CollapsiblePanelRelocated` in your work-area toolbar (first in leading for a left rail, last in trailing for a right rail, a bottom toolbar or a `FloatingToolbar` restoreControl for a drawer) instead of hand-placing a second toggle. A collapsed `CollapsiblePanel`, `ResizableRegion`, or Workbench panel renders `inert` and `aria-hidden` by itself, so do not hide collapsed content yourself either. Likewise an open side overlay (a Workbench rail overlay, a `wireSidebar` compact overlay, an overlay `CollapsiblePanel` or horizontal `ResizableRegion`) hides the covered work area's `FloatingToolbar`s and restore corners by itself until it closes, so do not hide them from overlay state. A compact overlay opens only on a user action: wire-up on a compact device and a wide-to-compact crossing collapse every panel, and a wide crossing restores the inline state. Seed the signal with `signal(device.value.compact)` and pass the panel's `inlineCollapsed` default so the first compact render has no overlay. Dialogs pick the same inner layout, then present per device class (full-screen modal on `compact`, inline on desktop). A list-detail dialog is a Workbench-shaped layout on roomy devices: a full-height list sidebar and a full-height main column, each a `Pane` with its own top `Toolbar`; the main column holds the primary xl title, the close control (`data-dialog="close"` in a `without-header` Web Awesome dialog), and the record actions, never a header spanning both columns. A top-level percentage-height shell needs a definite containing height: opt into `@kerfjs/ui/document.css` and put `.kui-app-root` on the one direct mount container, or provide equivalent application-owned geometry. The global baseline is deliberately absent from `styles.css` and component imports. See `docs/app-layouts.md`, `docs/document-baseline.md`, and `docs/collapsible-panel.md`. 23. Layouts and `Pane` are safe-area aware without configuration: backgrounds, separators, and dividers paint through a device's unsafe areas (a collapsible rail or drawer grows by the inset it docks to), content is padded only on the sides a region actually reaches, and block insets are scroll padding inside the scroller so first/last content can always be scrolled clear. Interior edges get nothing, and a collapsed rail hands its edge back to the center. Never add your own `env(safe-area-inset-*)` padding around a kerf layout or pane — that double-insets. In an app-owned arrangement of panes, pass `Pane.safeAreaEdges` (the sides that pane reaches; `[]` opts out); give an app bar or bottom bar that sits at a screen edge outside a Pane header or footer `Toolbar.safeAreaEdges` for the sides it reaches (for example `['block-start', 'inline-start', 'inline-end']`); the Workbench `mainToolbar` / `mainBottomToolbar` and panel `toolbar` configurations forward the same `safeAreaEdges` to their `Toolbar`. Do not set the internal `--kui-edge-inset-*` context yourself. The device insets are `--kui-safe-area-*` (defaulting to `env()`), overridable on `:root`. See `docs/app-layouts.md` "Safe areas".
 
 For application tabs, `AppTab presentation="icon-only"` retains its accessible `name`, `labelMaxWidth` truncates the visible name, and `attention` colors it through `--kui-app-tab-attention-color`. Configure TabBar strip geometry through public `--kui-tab-bar-strip-*` tokens.
 

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

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

package/dist/catalog-resources.d.ts

@@ -5,7 +5,7 @@ import './semantic-content-BbzjvSu9.js';
 import './sides-BPSWde0A.js';
 import './pane.js';
 import './workbench.js';
-import './nav-stack-BvSKY448.js';
+import './nav-stack-Cp3Y8kJ9.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';

package/dist/catalog.d.ts

@@ -7,7 +7,7 @@ import './toolbar.js';
 import './sides-BPSWde0A.js';
 import './pane.js';
 import './workbench.js';
-import './nav-stack-BvSKY448.js';
+import './nav-stack-Cp3Y8kJ9.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';
@@ -71,7 +71,11 @@ interface CatalogExampleProps {
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
-/** A labeled catalog specimen with optional explanatory text and alignment. */
+/**
+ * A labeled catalog specimen with optional explanatory text and alignment. A
+ * supplied `label` also names the rendered `section`, so each specimen is an
+ * addressable region; an unlabeled example stays an ordinary grouping.
+ */
 declare function CatalogExample({ label, note, align, viewport, compactFallback, rootAttributes, className, children, slot, }: CatalogExampleProps): SafeHtml;
 
 type CatalogExampleStackRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
@@ -80,9 +84,19 @@ type CatalogExampleStackRootAttributes = Readonly<Record<`data-${string}`, strin
     'data-catalog-example-label'?: never;
     'data-catalog-example-note'?: never;
     'data-align'?: never;
+    'data-width'?: never;
 }>;
+/**
+ * How wide a stack may grow: `reading` (default) caps it at a 736px reading
+ * measure for component specimens; `full` lets it span the stage for
+ * application-width compositions such as boards, app shells, drawers, and
+ * split views.
+ */
+type CatalogExampleStackWidth = 'reading' | 'full';
 interface CatalogExampleStackProps {
     label?: string;
+    /** Maximum width of the stack (default `reading`). */
+    width?: CatalogExampleStackWidth;
     rootAttributes?: CatalogExampleStackRootAttributes;
     className?: string;
     children?: KerfUiContent;
@@ -90,7 +104,7 @@ interface CatalogExampleStackProps {
     slot?: string;
 }
 /** A vertically stacked group of catalog examples. */
-declare function CatalogExampleStack({ label, rootAttributes, className, children, slot, }: CatalogExampleStackProps): kerfjs.SafeHtml;
+declare function CatalogExampleStack({ label, width, rootAttributes, className, children, slot, }: CatalogExampleStackProps): kerfjs.SafeHtml;
 
 /**
  * Browser helpers for UX Review region captures from a catalog. The local
@@ -118,4 +132,4 @@ declare function uxReviewCaptureUrl({ projectDirectory, title, context, }: UxRev
  */
 declare function loadUxReviewProject(pageUrl: string | URL, fetchImpl?: typeof globalThis.fetch): Promise<string | null>;
 
-export { Catalog, CatalogExample, type CatalogExampleAlign, type CatalogExampleProps, CatalogExampleStack, type CatalogExampleStackProps, type CatalogExampleViewport, CatalogProps, UX_REVIEW_PROJECT_PATH, type UxReviewCapture, loadUxReviewProject, uxReviewCaptureUrl };
+export { Catalog, CatalogExample, type CatalogExampleAlign, type CatalogExampleProps, CatalogExampleStack, type CatalogExampleStackProps, type CatalogExampleStackWidth, type CatalogExampleViewport, CatalogProps, UX_REVIEW_PROJECT_PATH, type UxReviewCapture, loadUxReviewProject, uxReviewCaptureUrl };

package/dist/catalog.js

@@ -1,4 +1,4 @@
-import { Workbench } from './chunk-BU23Z5HZ.js';
+import { Workbench } from './chunk-527IAEWG.js';
 import { uxReviewCaptureUrl } from './chunk-6C6DLP3W.js';
 export { UX_REVIEW_PROJECT_PATH, loadUxReviewProject, uxReviewCaptureUrl } from './chunk-6C6DLP3W.js';
 
@@ -622,6 +622,7 @@ function CatalogExample({
       class: `kui-catalog-example ${className}`.trim(),
       "data-catalog-example": true,
       "data-align": align,
+      "aria-label": label,
       slot,
       children: [
         label !== void 0 ? /* @__PURE__ */ jsx(
@@ -652,10 +653,12 @@ var protectedAttributes3 = /* @__PURE__ */ new Set([
   "data-catalog-example-stack",
   "data-catalog-example-label",
   "data-catalog-example-note",
-  "data-align"
+  "data-align",
+  "data-width"
 ]);
 function CatalogExampleStack({
   label,
+  width = "reading",
   rootAttributes = {},
   className = "",
   children,
@@ -671,6 +674,7 @@ function CatalogExampleStack({
       ...safeRootAttributes,
       class: `kui-catalog-example-stack ${className}`.trim(),
       "data-catalog-example-stack": true,
+      "data-width": width === "full" ? "full" : void 0,
       "aria-label": label,
       slot,
       children

package/dist/catalog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/catalog/components/catalog-resource-footer.tsx","../src/catalog/components/catalog-section-entries.tsx","../src/catalog/components/catalog-secondary-sections.tsx","../src/catalog/components/catalog-section-list.tsx","../src/catalog/components/catalog-sidebar.tsx","../src/catalog/components/catalog-stage.tsx","../src/catalog/components/catalog-ux-review-link.tsx","../src/catalog/components/catalog.tsx","../src/catalog/components/catalog-example.tsx","../src/catalog/components/catalog-example-stack.tsx"],"names":["jsxs","jsx","Fragment","protectedAttributes"],"mappings":"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","file":"catalog.js","sourcesContent":["import { ExternalLink, Waypoints } from 'lucide';\n\nimport {\n  PopupMenu,\n  type PopupMenuEntry,\n} from '../../components/actions/popup-menu/popup-menu.js';\nimport {\n  Toolbar,\n  type ToolbarConfig,\n} from '../../components/actions/toolbar/toolbar.js';\nimport {\n  ToolbarActionLink,\n  ToolbarControlGroup,\n} from '../../components/actions/toolbar-control-group/toolbar-control-group.js';\nimport { Row } from '../../components/layout/row/row.js';\nimport { LucideIcon } from '../../components/media/lucide-icon/lucide-icon.js';\nimport type { KerfUiContent } from '../../shared/content/semantic-content.js';\nimport type { CatalogRelated, CatalogResource } from '../types.js';\n\ninterface CatalogResourceFooterProps {\n  name: string;\n  resources: readonly CatalogResource[];\n  related: readonly CatalogRelated[];\n  status?: KerfUiContent;\n  selectAction: string;\n  toolbar?: ToolbarConfig;\n}\n\nfunction relatedMenuItems(\n  related: readonly CatalogRelated[],\n  selectAction: string,\n): PopupMenuEntry[] {\n  const groups: string[] = [];\n  for (const entry of related)\n    if (!groups.includes(entry.group)) groups.push(entry.group);\n\n  const items: PopupMenuEntry[] = [];\n  groups.forEach((group, index) => {\n    if (index > 0) items.push({ kind: 'divider' });\n    items.push({ kind: 'heading', label: group });\n    for (const entry of related)\n      if (entry.group === group)\n        items.push({\n          label: entry.name,\n          action: selectAction,\n          attributes: { 'data-item-id': entry.id },\n        });\n  });\n  return items;\n}\n\n/** Status, resources, and related-entry navigation for the active specimen. */\nexport function CatalogResourceFooter({\n  name,\n  resources,\n  related,\n  status,\n  selectAction,\n  toolbar,\n}: CatalogResourceFooterProps) {\n  return (\n    <>\n      {status ? (\n        <Row\n          hAlign=\"space-between\"\n          vAlign=\"baseline\"\n          gap=\"xs\"\n          wrap\n          textInsets=\"trl\"\n        >\n          {status}\n        </Row>\n      ) : null}\n      <Toolbar\n        position=\"footer\"\n        label={`${name} resources`}\n        density={toolbar?.density}\n        dividerSides={toolbar?.dividerSides}\n        centerAlign={toolbar?.centerAlign}\n        responsive={toolbar?.responsive ?? 'stack'}\n        responsiveAt={toolbar?.responsiveAt ?? 'narrow'}\n        safeAreaEdges={toolbar?.safeAreaEdges}\n        leading={\n          resources.length > 0 ? (\n            <ToolbarControlGroup\n              label={`${name} resources`}\n              content=\"mixed\"\n              size=\"compact\"\n              overflow=\"wrap\"\n            >\n              {resources.map((resource) => (\n                <ToolbarActionLink\n                  href={resource.href}\n                  label={resource.label}\n                  detail={resource.detail}\n                  ariaLabel={`${name}: ${resource.label} (opens in new tab)`}\n                  external\n                  icon={<LucideIcon icon={ExternalLink} name=\"external-link\" />}\n                />\n              ))}\n            </ToolbarControlGroup>\n          ) : null\n        }\n        trailing={\n          related.length > 0 ? (\n            <ToolbarControlGroup\n              single\n              content=\"mixed\"\n              nestedDropdown\n              menuInset=\"compact\"\n              size=\"compact\"\n              label=\"Related entries\"\n            >\n              <PopupMenu\n                text=\"Components\"\n                icon={<LucideIcon icon={Waypoints} name=\"waypoints\" />}\n                placement=\"top-end\"\n                items={relatedMenuItems(related, selectAction)}\n                rootAttributes={{ 'data-catalog-related': '' }}\n              />\n            </ToolbarControlGroup>\n          ) : null\n        }\n      />\n    </>\n  );\n}\n","import { List } from '../../components/collections/list/list.js';\nimport { ListHeader } from '../../components/collections/list-header/list-header.js';\nimport { ListItem } from '../../components/collections/list-item/list-item.js';\nimport type { CatalogEntry, CatalogSection } from '../types.js';\n\n/** One labeled section of catalog entries. */\nexport function CatalogSectionEntries({\n  section,\n  active,\n  selectAction,\n}: {\n  section: CatalogSection;\n  active: string;\n  selectAction: string;\n}) {\n  return (\n    <List rootAttributes={{ 'data-catalog-section': section.category }}>\n      <ListHeader label={section.category} />\n      <List gap=\"2xs\">\n        {section.entries.map((entry: CatalogEntry) => (\n          <ListItem\n            action={selectAction}\n            itemId={entry.id}\n            label={entry.name}\n            status={entry.tags?.join(' · ')}\n            selected={active === entry.id}\n            title={entry.description}\n            multiline\n            rootAttributes={{ 'data-catalog-entry-name': entry.name }}\n          />\n        ))}\n      </List>\n    </List>\n  );\n}\n","import { List } from '../../components/collections/list/list.js';\nimport { ListHeader } from '../../components/collections/list-header/list-header.js';\nimport type { CatalogSecondaryGroup } from '../types.js';\nimport { CatalogSectionEntries } from './catalog-section-entries.js';\n\ninterface CatalogSecondarySectionsProps {\n  group: CatalogSecondaryGroup;\n  active: string;\n  selectAction: string;\n  toggleAction: string;\n}\n\n/** The quieter, optionally collapsible navigation below primary sections. */\nexport function CatalogSecondarySections({\n  group,\n  active,\n  selectAction,\n  toggleAction,\n}: CatalogSecondarySectionsProps) {\n  const open = !group.collapsible || Boolean(group.expanded);\n  return (\n    <List\n      dividerSides=\"t\"\n      controlInsets=\"t\"\n      rootAttributes={{ 'data-catalog-secondary-group': group.label }}\n    >\n      {group.collapsible ? (\n        <ListHeader\n          label={group.label}\n          toggle\n          expanded={open}\n          action={toggleAction}\n        />\n      ) : (\n        <ListHeader label={group.label} />\n      )}\n      <List\n        gap=\"m\"\n        rootAttributes={{\n          'data-catalog-secondary': '',\n          'data-catalog-secondary-collapsed': String(!open),\n        }}\n      >\n        {group.sections.map((section) => (\n          <CatalogSectionEntries\n            section={section}\n            active={active}\n            selectAction={selectAction}\n          />\n        ))}\n      </List>\n    </List>\n  );\n}\n","import type { CatalogSection } from '../types.js';\nimport { CatalogSectionEntries } from './catalog-section-entries.js';\n\n/** The primary category sections in the catalog navigation. */\nexport function CatalogSectionList({\n  sections,\n  active,\n  selectAction,\n}: {\n  sections: readonly CatalogSection[];\n  active: string;\n  selectAction: string;\n}) {\n  return (\n    <>\n      {sections.map((section) => (\n        <CatalogSectionEntries\n          section={section}\n          active={active}\n          selectAction={selectAction}\n        />\n      ))}\n    </>\n  );\n}\n","import { List } from '../../components/collections/list/list.js';\nimport { ListInsetText } from '../../components/collections/list-inset-text/list-inset-text.js';\nimport { Text } from '../../components/typography/text/text.js';\nimport type { KerfUiContent } from '../../shared/content/semantic-content.js';\nimport type {\n  CatalogBrand,\n  CatalogSecondaryGroup,\n  CatalogSection,\n} from '../types.js';\nimport { CatalogSecondarySections } from './catalog-secondary-sections.js';\nimport { CatalogSectionList } from './catalog-section-list.js';\n\ninterface CatalogSidebarProps {\n  brand: CatalogBrand;\n  sections: readonly CatalogSection[];\n  active: string;\n  secondarySections?: CatalogSecondaryGroup;\n  footer?: KerfUiContent;\n  selectAction: string;\n  toggleSecondaryAction: string;\n}\n\n/** The catalog navigation: brand subtitle, entry sections, and footer. */\nexport function CatalogSidebar({\n  brand,\n  sections,\n  active,\n  secondarySections,\n  footer,\n  selectAction,\n  toggleSecondaryAction,\n}: CatalogSidebarProps) {\n  return (\n    <nav aria-label={`${brand.title} components`} data-catalog-sidebar>\n      <List gap=\"m\" controlInsets=\"b\">\n        {brand.subtitle ? (\n          <ListInsetText sides=\"rl\">\n            <Text variant=\"span\" size=\"compact\" tone=\"quiet\">\n              {brand.subtitle}\n            </Text>\n          </ListInsetText>\n        ) : null}\n        <CatalogSectionList\n          sections={sections}\n          active={active}\n          selectAction={selectAction}\n        />\n        {secondarySections ? (\n          <CatalogSecondarySections\n            group={secondarySections}\n            active={active}\n            selectAction={selectAction}\n            toggleAction={toggleSecondaryAction}\n          />\n        ) : null}\n        <ListInsetText\n          sides=\"rl\"\n          rootAttributes={{ 'data-catalog-filter-empty': '' }}\n        >\n          <Text variant=\"span\" tone=\"quiet\">\n            No matching items\n          </Text>\n        </ListInsetText>\n        {footer}\n      </List>\n    </nav>\n  );\n}\n","import type { KerfUiContent } from '../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../shared/dom/extension-attributes.js';\nimport type {\n  CatalogBackgroundStyle,\n  CatalogStageRootAttributes,\n} from '../types.js';\n\nconst protectedAttributes = new Set([\n  'data-catalog-stage',\n  'data-background-style',\n]);\n\ninterface CatalogStageProps {\n  name: string;\n  content: KerfUiContent;\n  backgroundStyle?: CatalogBackgroundStyle;\n  rootAttributes?: CatalogStageRootAttributes;\n}\n\n/** The preview canvas for an active Catalog entry. */\nexport function CatalogStage({\n  name,\n  content,\n  backgroundStyle = 'checkerboard',\n  rootAttributes = {},\n}: CatalogStageProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    protectedAttributes,\n  );\n  return (\n    <section\n      {...safeRootAttributes}\n      class=\"kui-catalog__stage\"\n      data-catalog-stage\n      data-background-style={backgroundStyle}\n      aria-label={`${name} preview`}\n    >\n      <div class=\"kui-catalog__canvas\">{content}</div>\n    </section>\n  );\n}\n","import { Scan } from 'lucide';\n\nimport {\n  ToolbarActionLink,\n  ToolbarControlGroup,\n} from '../../components/actions/toolbar-control-group/toolbar-control-group.js';\nimport { LucideIcon } from '../../components/media/lucide-icon/lucide-icon.js';\nimport type { CatalogEntry, CatalogUxReview } from '../types.js';\nimport { uxReviewCaptureUrl } from '../ux-review.js';\n\n/**\n * The \"Capture region\" header link for the active entry. `wireCatalog` adds\n * the page URL to its context when it is followed, since the URL can change\n * after this render (`urlParam`).\n */\nexport function CatalogUxReviewLink({\n  uxReview: { projectDirectory, name },\n  entry,\n  category,\n}: {\n  uxReview: CatalogUxReview & { name: string };\n  entry: CatalogEntry;\n  category: string;\n}) {\n  return (\n    <ToolbarControlGroup\n      appearance=\"borderless\"\n      single\n      size=\"compact\"\n      content=\"mixed\"\n      buttonAppearance=\"push\"\n    >\n      <ToolbarActionLink\n        href={uxReviewCaptureUrl({\n          projectDirectory,\n          title: `${name}: ${entry.name}`,\n          context: `${name} catalog\\nSelected ${category}: ${entry.name} (${entry.id})`,\n        })}\n        label=\"Capture region\"\n        ariaLabel={`Capture ${entry.name} in UX Review`}\n        icon={<LucideIcon icon={Scan} name=\"scan\" />}\n      />\n    </ToolbarControlGroup>\n  );\n}\n","import { Contrast, Moon, Sun, X, ZapOff } from 'lucide';\n\nimport { PopupMenu } from '../../components/actions/popup-menu/popup-menu.js';\nimport { ToolbarControlGroup } from '../../components/actions/toolbar-control-group/toolbar-control-group.js';\nimport { ToolbarText } from '../../components/actions/toolbar-text/toolbar-text.js';\nimport { ListInsetControl } from '../../components/collections/list-inset-control/list-inset-control.js';\nimport { ListInsetText } from '../../components/collections/list-inset-text/list-inset-text.js';\nimport { TokenSearchField } from '../../components/forms/token-search-field/token-search-field.js';\nimport { Workbench } from '../../components/layout/workbench/workbench.js';\nimport { LucideIcon } from '../../components/media/lucide-icon/lucide-icon.js';\nimport { Text } from '../../components/typography/text/text.js';\nimport type { CatalogEntry, CatalogProps, CatalogSection } from '../types.js';\nimport { CatalogResourceFooter } from './catalog-resource-footer.js';\nimport { CatalogSidebar } from './catalog-sidebar.js';\nimport { CatalogStage } from './catalog-stage.js';\nimport { CatalogUxReviewLink } from './catalog-ux-review-link.js';\n\nfunction findEntry(\n  sections: readonly CatalogSection[],\n  id: string,\n): { entry: CatalogEntry; category: string } | undefined {\n  for (const section of sections) {\n    for (const entry of section.entries)\n      if (entry.id === id) return { entry, category: section.category };\n  }\n  return undefined;\n}\n\n/**\n * Controlled, stateless component-catalog shell: a `Workbench` whose left rail\n * is the catalog navigation and whose work area is the active entry — its\n * toolbar, description, preview stage, and resource footer. The sidebar's\n * standard toggle moves into the entry toolbar while it is collapsed, and on\n * a small screen the sidebar overlays the stage like any Workbench rail.\n * An entry's `settings` render in a right-rail settings pane beside the stage,\n * with the same toggle relocation and small-screen overlay.\n */\nexport function Catalog({\n  id = 'kui-catalog',\n  brand,\n  sections,\n  active,\n  content,\n  collapsed = false,\n  theme,\n  increasedContrast,\n  reducedMotion,\n  backgroundControl = false,\n  headerActions,\n  settings,\n  settingsCollapsed = false,\n  settingsPanel = {},\n  uxReview,\n  secondarySections,\n  sidebarFooter,\n  status,\n  backgroundStyle,\n  stageRootAttributes,\n  selectAction = 'catalog-select',\n  toggleSidebarAction = 'catalog-toggle-sidebar',\n  toggleThemeAction = 'catalog-toggle-theme',\n  toggleContrastAction = 'catalog-toggle-contrast',\n  toggleMotionAction = 'catalog-toggle-motion',\n  selectBackgroundAction = 'catalog-select-background',\n  toggleSecondaryAction = 'catalog-toggle-secondary',\n  toggleSettingsAction = 'catalog-toggle-settings',\n  headerPlacement = 'auto',\n  footerPlacement = 'auto',\n  sidebar = {},\n  mainToolbar,\n  footerToolbar,\n  className = '',\n  slot,\n}: CatalogProps) {\n  const found =\n    findEntry(sections, active) ??\n    (secondarySections\n      ? findEntry(secondarySections.sections, active)\n      : undefined);\n  const selected = found?.entry;\n  const name = selected?.name ?? '';\n  const nextTheme = theme === 'dark' ? 'light' : 'dark';\n  const catalogName = `${brand.title} catalog`;\n  const displayControls =\n    increasedContrast !== undefined ||\n    reducedMotion !== undefined ||\n    backgroundControl ||\n    theme !== undefined;\n  const hasSettings =\n    settings !== undefined && settings !== null && settings !== false;\n  const settingsTitle = settingsPanel.title ?? 'Settings';\n\n  return (\n    <main\n      class={`kui-catalog ${className}`.trim()}\n      data-component=\"catalog\"\n      data-sidebar-collapsed={String(collapsed)}\n      data-settings-collapsed={\n        hasSettings ? String(settingsCollapsed) : undefined\n      }\n      slot={slot}\n    >\n      <Workbench\n        id={id}\n        label={catalogName}\n        leftRail={{\n          label: catalogName,\n          size: sidebar.size ?? 288,\n          resizable: sidebar.resizable,\n          separator: sidebar.separator,\n          collapseMotion: sidebar.collapseMotion,\n          presentation: sidebar.presentation,\n          responsiveOverlayAt: sidebar.responsiveOverlayAt,\n          compactOverlay: sidebar.compactOverlay,\n          collapsed,\n          toolbar: {\n            ...sidebar.toolbar,\n            label: `${catalogName} header`,\n            title: (\n              <>\n                {brand.logoUrl ? (\n                  <ToolbarControlGroup\n                    appearance=\"borderless\"\n                    content=\"avatar\"\n                    shape=\"rounded\"\n                    single\n                    avatarImage={brand.logoUrl}\n                  >\n                    {null}\n                  </ToolbarControlGroup>\n                ) : null}\n                <ToolbarText text={brand.title} size=\"large\" headingLevel={1} />\n              </>\n            ),\n            toggle: { action: toggleSidebarAction, name: catalogName },\n          },\n          header: (\n            <ListInsetControl sides=\"rbl\">\n              <TokenSearchField\n                id={`${id}-filter`}\n                label=\"Filter catalog\"\n                placeholder=\"Filter items or headings\"\n                editorAttributes={{ 'data-catalog-filter': '' }}\n                trailingAction={{\n                  icon: <LucideIcon icon={X} name=\"x\" />,\n                  label: 'Clear filter',\n                  action: 'catalog-clear-filter',\n                }}\n              />\n            </ListInsetControl>\n          ),\n          content: (\n            <CatalogSidebar\n              brand={brand}\n              sections={sections}\n              active={active}\n              secondarySections={secondarySections}\n              footer={sidebarFooter}\n              selectAction={selectAction}\n              toggleSecondaryAction={toggleSecondaryAction}\n            />\n          ),\n        }}\n        rightRail={\n          hasSettings\n            ? {\n                label: name ? `${name} ${settingsTitle}` : settingsTitle,\n                size: settingsPanel.size ?? 288,\n                resizable: settingsPanel.resizable,\n                separator: settingsPanel.separator,\n                collapseMotion: settingsPanel.collapseMotion,\n                presentation: settingsPanel.presentation,\n                responsiveOverlayAt: settingsPanel.responsiveOverlayAt,\n                compactOverlay: settingsPanel.compactOverlay,\n                collapsed: settingsCollapsed,\n                toolbar: {\n                  ...settingsPanel.toolbar,\n                  label: `${settingsTitle} header`,\n                  // A peripheral rail beside the xl entry title takes the\n                  // default title size, so it never truncates at 288px.\n                  title: <ToolbarText text={settingsTitle} headingLevel={2} />,\n                  toggle: {\n                    action: toggleSettingsAction,\n                    name: settingsTitle.toLocaleLowerCase(),\n                  },\n                },\n                content: settings,\n              }\n            : undefined\n        }\n        mainToolbar={{\n          ...mainToolbar,\n          label: `${name} header`,\n          // The entry title stays whole; actions wrap below it when narrow.\n          responsive: mainToolbar?.responsive ?? 'wrap',\n          title: <ToolbarText text={name} size=\"xlarge\" headingLevel={2} />,\n          trailing: (\n            <>\n              {headerActions}\n              {uxReview && found ? (\n                <CatalogUxReviewLink\n                  uxReview={{ ...uxReview, name: uxReview.name ?? brand.title }}\n                  entry={found.entry}\n                  category={found.category}\n                />\n              ) : null}\n              {displayControls ? (\n                <ToolbarControlGroup\n                  appearance=\"borderless\"\n                  content=\"mixed\"\n                  size=\"compact\"\n                  overflow=\"wrap\"\n                  buttonAppearance=\"push\"\n                  label=\"Catalog display settings\"\n                >\n                  {increasedContrast !== undefined ? (\n                    <button\n                      type=\"button\"\n                      data-action={toggleContrastAction}\n                      aria-pressed={String(increasedContrast)}\n                    >\n                      <LucideIcon icon={Contrast} name=\"contrast\" />\n                      <span>Contrast</span>\n                    </button>\n                  ) : null}\n                  {reducedMotion !== undefined ? (\n                    <button\n                      type=\"button\"\n                      data-action={toggleMotionAction}\n                      aria-pressed={String(reducedMotion)}\n                    >\n                      <LucideIcon icon={ZapOff} name=\"zap-off\" />\n                      <span>Reduce motion</span>\n                    </button>\n                  ) : null}\n                  {backgroundControl ? (\n                    <PopupMenu\n                      text=\"Background\"\n                      rootAttributes={{ 'data-catalog-background-menu': '' }}\n                      items={[\n                        { value: 'checkerboard', label: 'Checkerboard' },\n                        {\n                          value: 'vertical-stripes',\n                          label: 'Vertical stripes',\n                        },\n                        { value: 'layout-guide', label: 'Layout guide' },\n                        { value: 'surface', label: 'Surface' },\n                        { value: 'sunken', label: 'Sunken' },\n                      ].map(({ value, label }) => ({\n                        label,\n                        action: selectBackgroundAction,\n                        checked: (backgroundStyle ?? 'checkerboard') === value,\n                        attributes: { 'data-background-choice': value },\n                      }))}\n                    />\n                  ) : null}\n                  {theme ? (\n                    <button\n                      type=\"button\"\n                      data-action={toggleThemeAction}\n                      aria-label={`Use ${nextTheme} theme`}\n                      data-theme-preview={theme}\n                    >\n                      {nextTheme === 'dark' ? (\n                        <LucideIcon icon={Moon} name=\"moon\" />\n                      ) : (\n                        <LucideIcon icon={Sun} name=\"sun\" />\n                      )}\n                      <span>{nextTheme === 'dark' ? 'Dark' : 'Light'}</span>\n                    </button>\n                  ) : null}\n                </ToolbarControlGroup>\n              ) : null}\n            </>\n          ),\n        }}\n        mainPane={{ appearance: 'sunken' }}\n        mainFooter={\n          <CatalogResourceFooter\n            name={name}\n            resources={selected?.resources ?? []}\n            related={selected?.related ?? []}\n            status={status}\n            selectAction={selectAction}\n            toolbar={footerToolbar}\n          />\n        }\n        mainHeader={\n          selected?.description ? (\n            <ListInsetText\n              sides=\"trbl\"\n              rootAttributes={{ 'data-catalog-description': '' }}\n            >\n              <Text variant=\"span\">{selected.description}</Text>\n            </ListInsetText>\n          ) : null\n        }\n        mainHeaderPlacement={headerPlacement}\n        mainFooterPlacement={footerPlacement}\n        main={\n          <CatalogStage\n            name={name}\n            content={content}\n            backgroundStyle={backgroundStyle}\n            rootAttributes={stageRootAttributes}\n          />\n        }\n      />\n    </main>\n  );\n}\n","import type { SafeHtml } from 'kerfjs';\n\nimport { ListHeader } from '../../components/collections/list-header/list-header.js';\nimport { ListInsetText } from '../../components/collections/list-inset-text/list-inset-text.js';\nimport { Text } from '../../components/typography/text/text.js';\nimport type { KerfUiContent } from '../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../shared/dom/extension-attributes.js';\nimport { ensureSunkenTexture } from '../../shared/styles/sunken-texture.js';\n\n/** How a specimen aligns its visible edge with its `ListHeader` label. */\nexport type CatalogExampleAlign =\n  'glyph' | 'inline-control' | 'text-trigger' | 'none';\n\nexport interface CatalogExampleViewport {\n  layout?: 'grid' | 'flex' | 'flex-column';\n  width?: 'full' | 'compact' | 'medium' | 'wide' | 'text' | 'control';\n  /** Fixed specimen height; `app` frames an application-sized recipe or layout.\n   *  A fixed height is definite, so a child that fills with `height: 100%`\n   *  (a horizontal `ResizableRegion`, say) spans the whole frame. */\n  height?: 'short' | 'reduced' | 'medium' | 'tall' | 'app';\n  /** A minimum the frame may grow past. It is not a definite height: a child\n   *  sized with `height: 100%` falls back to its content height, so use\n   *  `height` when the specimen must fill the frame. */\n  minHeight?: 'short' | 'medium';\n  frame?: 'solid' | 'dashed';\n  surface?: 'default' | 'lowered';\n  overflow?: 'hidden' | 'auto-x';\n  responsive?: 'roomy-only';\n  shadow?: boolean;\n  /** Public component custom properties applied to the specimen viewport. */\n  tokens?: Readonly<Record<`--${string}`, string>>;\n}\n\nconst protectedAttributes = new Set([\n  'data-catalog-example',\n  'data-catalog-example-stack',\n  'data-catalog-example-label',\n  'data-catalog-example-note',\n  'data-align',\n]);\n\ntype CatalogExampleRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-catalog-example'?: never;\n    'data-catalog-example-stack'?: never;\n    'data-catalog-example-label'?: never;\n    'data-catalog-example-note'?: never;\n    'data-align'?: never;\n  }\n>;\n\nexport interface CatalogExampleProps {\n  label?: string;\n  note?: SafeHtml | string;\n  align?: CatalogExampleAlign;\n  /** Optional catalog-owned constraints for demonstrating layout components. */\n  viewport?: CatalogExampleViewport;\n  /** Replacement guidance shown when a roomy-only viewport is hidden. */\n  compactFallback?: SafeHtml | string;\n  rootAttributes?: CatalogExampleRootAttributes;\n  className?: string;\n  children?: KerfUiContent;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** A labeled catalog specimen with optional explanatory text and alignment. */\nexport function CatalogExample({\n  label,\n  note,\n  align = 'none',\n  viewport,\n  compactFallback,\n  rootAttributes = {},\n  className = '',\n  children,\n  slot,\n}: CatalogExampleProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    protectedAttributes,\n  );\n  const viewportStyle = viewport?.tokens\n    ? Object.entries(viewport.tokens)\n        .map(([name, value]) => `${name}:${value}`)\n        .join(';')\n    : undefined;\n  if (viewport?.surface === 'lowered') ensureSunkenTexture();\n  const specimen = viewport ? (\n    <div\n      class=\"kui-catalog-example__viewport\"\n      data-catalog-example-viewport\n      data-layout={viewport.layout}\n      data-width={viewport.width}\n      data-height={viewport.height}\n      data-min-height={viewport.minHeight}\n      data-frame={viewport.frame}\n      data-surface={viewport.surface}\n      data-overflow={viewport.overflow}\n      data-responsive={viewport.responsive}\n      data-shadow={viewport.shadow ? 'true' : undefined}\n      style={viewportStyle}\n    >\n      {children}\n    </div>\n  ) : (\n    children\n  );\n\n  return (\n    <section\n      {...safeRootAttributes}\n      class={`kui-catalog-example ${className}`.trim()}\n      data-catalog-example\n      data-align={align}\n      slot={slot}\n    >\n      {label !== undefined ? (\n        <ListHeader\n          label={label}\n          width=\"content\"\n          rootAttributes={{ 'data-catalog-example-label': '' }}\n        />\n      ) : null}\n      {note !== undefined ? (\n        <ListInsetText\n          sides=\"rl\"\n          className=\"kui-catalog-example__note\"\n          rootAttributes={{ 'data-catalog-example-note': '' }}\n        >\n          <Text variant=\"span\" size=\"compact\" tone=\"quiet\">\n            {note}\n          </Text>\n        </ListInsetText>\n      ) : null}\n      {compactFallback !== undefined ? (\n        <Text tone=\"quiet\" className=\"kui-catalog-example__compact-fallback\">\n          {compactFallback}\n        </Text>\n      ) : null}\n      {specimen}\n    </section>\n  );\n}\n","import type { KerfUiContent } from '../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../shared/dom/extension-attributes.js';\n\nconst protectedAttributes = new Set([\n  'data-catalog-example',\n  'data-catalog-example-stack',\n  'data-catalog-example-label',\n  'data-catalog-example-note',\n  'data-align',\n]);\n\ntype CatalogExampleStackRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-catalog-example'?: never;\n    'data-catalog-example-stack'?: never;\n    'data-catalog-example-label'?: never;\n    'data-catalog-example-note'?: never;\n    'data-align'?: never;\n  }\n>;\n\nexport interface CatalogExampleStackProps {\n  label?: string;\n  rootAttributes?: CatalogExampleStackRootAttributes;\n  className?: string;\n  children?: KerfUiContent;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** A vertically stacked group of catalog examples. */\nexport function CatalogExampleStack({\n  label,\n  rootAttributes = {},\n  className = '',\n  children,\n  slot,\n}: CatalogExampleStackProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    protectedAttributes,\n  );\n\n  return (\n    <section\n      {...safeRootAttributes}\n      class={`kui-catalog-example-stack ${className}`.trim()}\n      data-catalog-example-stack\n      aria-label={label}\n      slot={slot}\n    >\n      {children}\n    </section>\n  );\n}\n"]}
+{"version":3,"sources":["../src/catalog/components/catalog-resource-footer.tsx","../src/catalog/components/catalog-section-entries.tsx","../src/catalog/components/catalog-secondary-sections.tsx","../src/catalog/components/catalog-section-list.tsx","../src/catalog/components/catalog-sidebar.tsx","../src/catalog/components/catalog-stage.tsx","../src/catalog/components/catalog-ux-review-link.tsx","../src/catalog/components/catalog.tsx","../src/catalog/components/catalog-example.tsx","../src/catalog/components/catalog-example-stack.tsx"],"names":["jsxs","jsx","Fragment","protectedAttributes"],"mappings":"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","file":"catalog.js","sourcesContent":["import { ExternalLink, Waypoints } from 'lucide';\n\nimport {\n  PopupMenu,\n  type PopupMenuEntry,\n} from '../../components/actions/popup-menu/popup-menu.js';\nimport {\n  Toolbar,\n  type ToolbarConfig,\n} from '../../components/actions/toolbar/toolbar.js';\nimport {\n  ToolbarActionLink,\n  ToolbarControlGroup,\n} from '../../components/actions/toolbar-control-group/toolbar-control-group.js';\nimport { Row } from '../../components/layout/row/row.js';\nimport { LucideIcon } from '../../components/media/lucide-icon/lucide-icon.js';\nimport type { KerfUiContent } from '../../shared/content/semantic-content.js';\nimport type { CatalogRelated, CatalogResource } from '../types.js';\n\ninterface CatalogResourceFooterProps {\n  name: string;\n  resources: readonly CatalogResource[];\n  related: readonly CatalogRelated[];\n  status?: KerfUiContent;\n  selectAction: string;\n  toolbar?: ToolbarConfig;\n}\n\nfunction relatedMenuItems(\n  related: readonly CatalogRelated[],\n  selectAction: string,\n): PopupMenuEntry[] {\n  const groups: string[] = [];\n  for (const entry of related)\n    if (!groups.includes(entry.group)) groups.push(entry.group);\n\n  const items: PopupMenuEntry[] = [];\n  groups.forEach((group, index) => {\n    if (index > 0) items.push({ kind: 'divider' });\n    items.push({ kind: 'heading', label: group });\n    for (const entry of related)\n      if (entry.group === group)\n        items.push({\n          label: entry.name,\n          action: selectAction,\n          attributes: { 'data-item-id': entry.id },\n        });\n  });\n  return items;\n}\n\n/** Status, resources, and related-entry navigation for the active specimen. */\nexport function CatalogResourceFooter({\n  name,\n  resources,\n  related,\n  status,\n  selectAction,\n  toolbar,\n}: CatalogResourceFooterProps) {\n  return (\n    <>\n      {status ? (\n        <Row\n          hAlign=\"space-between\"\n          vAlign=\"baseline\"\n          gap=\"xs\"\n          wrap\n          textInsets=\"trl\"\n        >\n          {status}\n        </Row>\n      ) : null}\n      <Toolbar\n        position=\"footer\"\n        label={`${name} resources`}\n        density={toolbar?.density}\n        dividerSides={toolbar?.dividerSides}\n        centerAlign={toolbar?.centerAlign}\n        responsive={toolbar?.responsive ?? 'stack'}\n        responsiveAt={toolbar?.responsiveAt ?? 'narrow'}\n        safeAreaEdges={toolbar?.safeAreaEdges}\n        leading={\n          resources.length > 0 ? (\n            <ToolbarControlGroup\n              label={`${name} resources`}\n              content=\"mixed\"\n              size=\"compact\"\n              overflow=\"wrap\"\n            >\n              {resources.map((resource) => (\n                <ToolbarActionLink\n                  href={resource.href}\n                  label={resource.label}\n                  detail={resource.detail}\n                  ariaLabel={`${name}: ${resource.label} (opens in new tab)`}\n                  external\n                  icon={<LucideIcon icon={ExternalLink} name=\"external-link\" />}\n                />\n              ))}\n            </ToolbarControlGroup>\n          ) : null\n        }\n        trailing={\n          related.length > 0 ? (\n            <ToolbarControlGroup\n              single\n              content=\"mixed\"\n              nestedDropdown\n              menuInset=\"compact\"\n              size=\"compact\"\n              label=\"Related entries\"\n            >\n              <PopupMenu\n                text=\"Components\"\n                icon={<LucideIcon icon={Waypoints} name=\"waypoints\" />}\n                placement=\"top-end\"\n                items={relatedMenuItems(related, selectAction)}\n                rootAttributes={{ 'data-catalog-related': '' }}\n              />\n            </ToolbarControlGroup>\n          ) : null\n        }\n      />\n    </>\n  );\n}\n","import { List } from '../../components/collections/list/list.js';\nimport { ListHeader } from '../../components/collections/list-header/list-header.js';\nimport { ListItem } from '../../components/collections/list-item/list-item.js';\nimport type { CatalogEntry, CatalogSection } from '../types.js';\n\n/** One labeled section of catalog entries. */\nexport function CatalogSectionEntries({\n  section,\n  active,\n  selectAction,\n}: {\n  section: CatalogSection;\n  active: string;\n  selectAction: string;\n}) {\n  return (\n    <List rootAttributes={{ 'data-catalog-section': section.category }}>\n      <ListHeader label={section.category} />\n      <List gap=\"2xs\">\n        {section.entries.map((entry: CatalogEntry) => (\n          <ListItem\n            action={selectAction}\n            itemId={entry.id}\n            label={entry.name}\n            status={entry.tags?.join(' · ')}\n            selected={active === entry.id}\n            title={entry.description}\n            multiline\n            rootAttributes={{ 'data-catalog-entry-name': entry.name }}\n          />\n        ))}\n      </List>\n    </List>\n  );\n}\n","import { List } from '../../components/collections/list/list.js';\nimport { ListHeader } from '../../components/collections/list-header/list-header.js';\nimport type { CatalogSecondaryGroup } from '../types.js';\nimport { CatalogSectionEntries } from './catalog-section-entries.js';\n\ninterface CatalogSecondarySectionsProps {\n  group: CatalogSecondaryGroup;\n  active: string;\n  selectAction: string;\n  toggleAction: string;\n}\n\n/** The quieter, optionally collapsible navigation below primary sections. */\nexport function CatalogSecondarySections({\n  group,\n  active,\n  selectAction,\n  toggleAction,\n}: CatalogSecondarySectionsProps) {\n  const open = !group.collapsible || Boolean(group.expanded);\n  return (\n    <List\n      dividerSides=\"t\"\n      controlInsets=\"t\"\n      rootAttributes={{ 'data-catalog-secondary-group': group.label }}\n    >\n      {group.collapsible ? (\n        <ListHeader\n          label={group.label}\n          toggle\n          expanded={open}\n          action={toggleAction}\n        />\n      ) : (\n        <ListHeader label={group.label} />\n      )}\n      <List\n        gap=\"m\"\n        rootAttributes={{\n          'data-catalog-secondary': '',\n          'data-catalog-secondary-collapsed': String(!open),\n        }}\n      >\n        {group.sections.map((section) => (\n          <CatalogSectionEntries\n            section={section}\n            active={active}\n            selectAction={selectAction}\n          />\n        ))}\n      </List>\n    </List>\n  );\n}\n","import type { CatalogSection } from '../types.js';\nimport { CatalogSectionEntries } from './catalog-section-entries.js';\n\n/** The primary category sections in the catalog navigation. */\nexport function CatalogSectionList({\n  sections,\n  active,\n  selectAction,\n}: {\n  sections: readonly CatalogSection[];\n  active: string;\n  selectAction: string;\n}) {\n  return (\n    <>\n      {sections.map((section) => (\n        <CatalogSectionEntries\n          section={section}\n          active={active}\n          selectAction={selectAction}\n        />\n      ))}\n    </>\n  );\n}\n","import { List } from '../../components/collections/list/list.js';\nimport { ListInsetText } from '../../components/collections/list-inset-text/list-inset-text.js';\nimport { Text } from '../../components/typography/text/text.js';\nimport type { KerfUiContent } from '../../shared/content/semantic-content.js';\nimport type {\n  CatalogBrand,\n  CatalogSecondaryGroup,\n  CatalogSection,\n} from '../types.js';\nimport { CatalogSecondarySections } from './catalog-secondary-sections.js';\nimport { CatalogSectionList } from './catalog-section-list.js';\n\ninterface CatalogSidebarProps {\n  brand: CatalogBrand;\n  sections: readonly CatalogSection[];\n  active: string;\n  secondarySections?: CatalogSecondaryGroup;\n  footer?: KerfUiContent;\n  selectAction: string;\n  toggleSecondaryAction: string;\n}\n\n/** The catalog navigation: brand subtitle, entry sections, and footer. */\nexport function CatalogSidebar({\n  brand,\n  sections,\n  active,\n  secondarySections,\n  footer,\n  selectAction,\n  toggleSecondaryAction,\n}: CatalogSidebarProps) {\n  return (\n    <nav aria-label={`${brand.title} components`} data-catalog-sidebar>\n      <List gap=\"m\" controlInsets=\"b\">\n        {brand.subtitle ? (\n          <ListInsetText sides=\"rl\">\n            <Text variant=\"span\" size=\"compact\" tone=\"quiet\">\n              {brand.subtitle}\n            </Text>\n          </ListInsetText>\n        ) : null}\n        <CatalogSectionList\n          sections={sections}\n          active={active}\n          selectAction={selectAction}\n        />\n        {secondarySections ? (\n          <CatalogSecondarySections\n            group={secondarySections}\n            active={active}\n            selectAction={selectAction}\n            toggleAction={toggleSecondaryAction}\n          />\n        ) : null}\n        <ListInsetText\n          sides=\"rl\"\n          rootAttributes={{ 'data-catalog-filter-empty': '' }}\n        >\n          <Text variant=\"span\" tone=\"quiet\">\n            No matching items\n          </Text>\n        </ListInsetText>\n        {footer}\n      </List>\n    </nav>\n  );\n}\n","import type { KerfUiContent } from '../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../shared/dom/extension-attributes.js';\nimport type {\n  CatalogBackgroundStyle,\n  CatalogStageRootAttributes,\n} from '../types.js';\n\nconst protectedAttributes = new Set([\n  'data-catalog-stage',\n  'data-background-style',\n]);\n\ninterface CatalogStageProps {\n  name: string;\n  content: KerfUiContent;\n  backgroundStyle?: CatalogBackgroundStyle;\n  rootAttributes?: CatalogStageRootAttributes;\n}\n\n/** The preview canvas for an active Catalog entry. */\nexport function CatalogStage({\n  name,\n  content,\n  backgroundStyle = 'checkerboard',\n  rootAttributes = {},\n}: CatalogStageProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    protectedAttributes,\n  );\n  return (\n    <section\n      {...safeRootAttributes}\n      class=\"kui-catalog__stage\"\n      data-catalog-stage\n      data-background-style={backgroundStyle}\n      aria-label={`${name} preview`}\n    >\n      <div class=\"kui-catalog__canvas\">{content}</div>\n    </section>\n  );\n}\n","import { Scan } from 'lucide';\n\nimport {\n  ToolbarActionLink,\n  ToolbarControlGroup,\n} from '../../components/actions/toolbar-control-group/toolbar-control-group.js';\nimport { LucideIcon } from '../../components/media/lucide-icon/lucide-icon.js';\nimport type { CatalogEntry, CatalogUxReview } from '../types.js';\nimport { uxReviewCaptureUrl } from '../ux-review.js';\n\n/**\n * The \"Capture region\" header link for the active entry. `wireCatalog` adds\n * the page URL to its context when it is followed, since the URL can change\n * after this render (`urlParam`).\n */\nexport function CatalogUxReviewLink({\n  uxReview: { projectDirectory, name },\n  entry,\n  category,\n}: {\n  uxReview: CatalogUxReview & { name: string };\n  entry: CatalogEntry;\n  category: string;\n}) {\n  return (\n    <ToolbarControlGroup\n      appearance=\"borderless\"\n      single\n      size=\"compact\"\n      content=\"mixed\"\n      buttonAppearance=\"push\"\n    >\n      <ToolbarActionLink\n        href={uxReviewCaptureUrl({\n          projectDirectory,\n          title: `${name}: ${entry.name}`,\n          context: `${name} catalog\\nSelected ${category}: ${entry.name} (${entry.id})`,\n        })}\n        label=\"Capture region\"\n        ariaLabel={`Capture ${entry.name} in UX Review`}\n        icon={<LucideIcon icon={Scan} name=\"scan\" />}\n      />\n    </ToolbarControlGroup>\n  );\n}\n","import { Contrast, Moon, Sun, X, ZapOff } from 'lucide';\n\nimport { PopupMenu } from '../../components/actions/popup-menu/popup-menu.js';\nimport { ToolbarControlGroup } from '../../components/actions/toolbar-control-group/toolbar-control-group.js';\nimport { ToolbarText } from '../../components/actions/toolbar-text/toolbar-text.js';\nimport { ListInsetControl } from '../../components/collections/list-inset-control/list-inset-control.js';\nimport { ListInsetText } from '../../components/collections/list-inset-text/list-inset-text.js';\nimport { TokenSearchField } from '../../components/forms/token-search-field/token-search-field.js';\nimport { Workbench } from '../../components/layout/workbench/workbench.js';\nimport { LucideIcon } from '../../components/media/lucide-icon/lucide-icon.js';\nimport { Text } from '../../components/typography/text/text.js';\nimport type { CatalogEntry, CatalogProps, CatalogSection } from '../types.js';\nimport { CatalogResourceFooter } from './catalog-resource-footer.js';\nimport { CatalogSidebar } from './catalog-sidebar.js';\nimport { CatalogStage } from './catalog-stage.js';\nimport { CatalogUxReviewLink } from './catalog-ux-review-link.js';\n\nfunction findEntry(\n  sections: readonly CatalogSection[],\n  id: string,\n): { entry: CatalogEntry; category: string } | undefined {\n  for (const section of sections) {\n    for (const entry of section.entries)\n      if (entry.id === id) return { entry, category: section.category };\n  }\n  return undefined;\n}\n\n/**\n * Controlled, stateless component-catalog shell: a `Workbench` whose left rail\n * is the catalog navigation and whose work area is the active entry — its\n * toolbar, description, preview stage, and resource footer. The sidebar's\n * standard toggle moves into the entry toolbar while it is collapsed, and on\n * a small screen the sidebar overlays the stage like any Workbench rail.\n * An entry's `settings` render in a right-rail settings pane beside the stage,\n * with the same toggle relocation and small-screen overlay.\n */\nexport function Catalog({\n  id = 'kui-catalog',\n  brand,\n  sections,\n  active,\n  content,\n  collapsed = false,\n  theme,\n  increasedContrast,\n  reducedMotion,\n  backgroundControl = false,\n  headerActions,\n  settings,\n  settingsCollapsed = false,\n  settingsPanel = {},\n  uxReview,\n  secondarySections,\n  sidebarFooter,\n  status,\n  backgroundStyle,\n  stageRootAttributes,\n  selectAction = 'catalog-select',\n  toggleSidebarAction = 'catalog-toggle-sidebar',\n  toggleThemeAction = 'catalog-toggle-theme',\n  toggleContrastAction = 'catalog-toggle-contrast',\n  toggleMotionAction = 'catalog-toggle-motion',\n  selectBackgroundAction = 'catalog-select-background',\n  toggleSecondaryAction = 'catalog-toggle-secondary',\n  toggleSettingsAction = 'catalog-toggle-settings',\n  headerPlacement = 'auto',\n  footerPlacement = 'auto',\n  sidebar = {},\n  mainToolbar,\n  footerToolbar,\n  className = '',\n  slot,\n}: CatalogProps) {\n  const found =\n    findEntry(sections, active) ??\n    (secondarySections\n      ? findEntry(secondarySections.sections, active)\n      : undefined);\n  const selected = found?.entry;\n  const name = selected?.name ?? '';\n  const nextTheme = theme === 'dark' ? 'light' : 'dark';\n  const catalogName = `${brand.title} catalog`;\n  const displayControls =\n    increasedContrast !== undefined ||\n    reducedMotion !== undefined ||\n    backgroundControl ||\n    theme !== undefined;\n  const hasSettings =\n    settings !== undefined && settings !== null && settings !== false;\n  const settingsTitle = settingsPanel.title ?? 'Settings';\n\n  return (\n    <main\n      class={`kui-catalog ${className}`.trim()}\n      data-component=\"catalog\"\n      data-sidebar-collapsed={String(collapsed)}\n      data-settings-collapsed={\n        hasSettings ? String(settingsCollapsed) : undefined\n      }\n      slot={slot}\n    >\n      <Workbench\n        id={id}\n        label={catalogName}\n        leftRail={{\n          label: catalogName,\n          size: sidebar.size ?? 288,\n          resizable: sidebar.resizable,\n          separator: sidebar.separator,\n          collapseMotion: sidebar.collapseMotion,\n          presentation: sidebar.presentation,\n          responsiveOverlayAt: sidebar.responsiveOverlayAt,\n          compactOverlay: sidebar.compactOverlay,\n          collapsed,\n          toolbar: {\n            ...sidebar.toolbar,\n            label: `${catalogName} header`,\n            title: (\n              <>\n                {brand.logoUrl ? (\n                  <ToolbarControlGroup\n                    appearance=\"borderless\"\n                    content=\"avatar\"\n                    shape=\"rounded\"\n                    single\n                    avatarImage={brand.logoUrl}\n                  >\n                    {null}\n                  </ToolbarControlGroup>\n                ) : null}\n                <ToolbarText text={brand.title} size=\"large\" headingLevel={1} />\n              </>\n            ),\n            toggle: { action: toggleSidebarAction, name: catalogName },\n          },\n          header: (\n            <ListInsetControl sides=\"rbl\">\n              <TokenSearchField\n                id={`${id}-filter`}\n                label=\"Filter catalog\"\n                placeholder=\"Filter items or headings\"\n                editorAttributes={{ 'data-catalog-filter': '' }}\n                trailingAction={{\n                  icon: <LucideIcon icon={X} name=\"x\" />,\n                  label: 'Clear filter',\n                  action: 'catalog-clear-filter',\n                }}\n              />\n            </ListInsetControl>\n          ),\n          content: (\n            <CatalogSidebar\n              brand={brand}\n              sections={sections}\n              active={active}\n              secondarySections={secondarySections}\n              footer={sidebarFooter}\n              selectAction={selectAction}\n              toggleSecondaryAction={toggleSecondaryAction}\n            />\n          ),\n        }}\n        rightRail={\n          hasSettings\n            ? {\n                label: name ? `${name} ${settingsTitle}` : settingsTitle,\n                size: settingsPanel.size ?? 288,\n                resizable: settingsPanel.resizable,\n                separator: settingsPanel.separator,\n                collapseMotion: settingsPanel.collapseMotion,\n                presentation: settingsPanel.presentation,\n                responsiveOverlayAt: settingsPanel.responsiveOverlayAt,\n                compactOverlay: settingsPanel.compactOverlay,\n                collapsed: settingsCollapsed,\n                toolbar: {\n                  ...settingsPanel.toolbar,\n                  label: `${settingsTitle} header`,\n                  // A peripheral rail beside the xl entry title takes the\n                  // default title size, so it never truncates at 288px.\n                  title: <ToolbarText text={settingsTitle} headingLevel={2} />,\n                  toggle: {\n                    action: toggleSettingsAction,\n                    name: settingsTitle.toLocaleLowerCase(),\n                  },\n                },\n                content: settings,\n              }\n            : undefined\n        }\n        mainToolbar={{\n          ...mainToolbar,\n          label: `${name} header`,\n          // The entry title stays whole; actions wrap below it when narrow.\n          responsive: mainToolbar?.responsive ?? 'wrap',\n          title: <ToolbarText text={name} size=\"xlarge\" headingLevel={2} />,\n          trailing: (\n            <>\n              {headerActions}\n              {uxReview && found ? (\n                <CatalogUxReviewLink\n                  uxReview={{ ...uxReview, name: uxReview.name ?? brand.title }}\n                  entry={found.entry}\n                  category={found.category}\n                />\n              ) : null}\n              {displayControls ? (\n                <ToolbarControlGroup\n                  appearance=\"borderless\"\n                  content=\"mixed\"\n                  size=\"compact\"\n                  overflow=\"wrap\"\n                  buttonAppearance=\"push\"\n                  label=\"Catalog display settings\"\n                >\n                  {increasedContrast !== undefined ? (\n                    <button\n                      type=\"button\"\n                      data-action={toggleContrastAction}\n                      aria-pressed={String(increasedContrast)}\n                    >\n                      <LucideIcon icon={Contrast} name=\"contrast\" />\n                      <span>Contrast</span>\n                    </button>\n                  ) : null}\n                  {reducedMotion !== undefined ? (\n                    <button\n                      type=\"button\"\n                      data-action={toggleMotionAction}\n                      aria-pressed={String(reducedMotion)}\n                    >\n                      <LucideIcon icon={ZapOff} name=\"zap-off\" />\n                      <span>Reduce motion</span>\n                    </button>\n                  ) : null}\n                  {backgroundControl ? (\n                    <PopupMenu\n                      text=\"Background\"\n                      rootAttributes={{ 'data-catalog-background-menu': '' }}\n                      items={[\n                        { value: 'checkerboard', label: 'Checkerboard' },\n                        {\n                          value: 'vertical-stripes',\n                          label: 'Vertical stripes',\n                        },\n                        { value: 'layout-guide', label: 'Layout guide' },\n                        { value: 'surface', label: 'Surface' },\n                        { value: 'sunken', label: 'Sunken' },\n                      ].map(({ value, label }) => ({\n                        label,\n                        action: selectBackgroundAction,\n                        checked: (backgroundStyle ?? 'checkerboard') === value,\n                        attributes: { 'data-background-choice': value },\n                      }))}\n                    />\n                  ) : null}\n                  {theme ? (\n                    <button\n                      type=\"button\"\n                      data-action={toggleThemeAction}\n                      aria-label={`Use ${nextTheme} theme`}\n                      data-theme-preview={theme}\n                    >\n                      {nextTheme === 'dark' ? (\n                        <LucideIcon icon={Moon} name=\"moon\" />\n                      ) : (\n                        <LucideIcon icon={Sun} name=\"sun\" />\n                      )}\n                      <span>{nextTheme === 'dark' ? 'Dark' : 'Light'}</span>\n                    </button>\n                  ) : null}\n                </ToolbarControlGroup>\n              ) : null}\n            </>\n          ),\n        }}\n        mainPane={{ appearance: 'sunken' }}\n        mainFooter={\n          <CatalogResourceFooter\n            name={name}\n            resources={selected?.resources ?? []}\n            related={selected?.related ?? []}\n            status={status}\n            selectAction={selectAction}\n            toolbar={footerToolbar}\n          />\n        }\n        mainHeader={\n          selected?.description ? (\n            <ListInsetText\n              sides=\"trbl\"\n              rootAttributes={{ 'data-catalog-description': '' }}\n            >\n              <Text variant=\"span\">{selected.description}</Text>\n            </ListInsetText>\n          ) : null\n        }\n        mainHeaderPlacement={headerPlacement}\n        mainFooterPlacement={footerPlacement}\n        main={\n          <CatalogStage\n            name={name}\n            content={content}\n            backgroundStyle={backgroundStyle}\n            rootAttributes={stageRootAttributes}\n          />\n        }\n      />\n    </main>\n  );\n}\n","import type { SafeHtml } from 'kerfjs';\n\nimport { ListHeader } from '../../components/collections/list-header/list-header.js';\nimport { ListInsetText } from '../../components/collections/list-inset-text/list-inset-text.js';\nimport { Text } from '../../components/typography/text/text.js';\nimport type { KerfUiContent } from '../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../shared/dom/extension-attributes.js';\nimport { ensureSunkenTexture } from '../../shared/styles/sunken-texture.js';\n\n/** How a specimen aligns its visible edge with its `ListHeader` label. */\nexport type CatalogExampleAlign =\n  'glyph' | 'inline-control' | 'text-trigger' | 'none';\n\nexport interface CatalogExampleViewport {\n  layout?: 'grid' | 'flex' | 'flex-column';\n  width?: 'full' | 'compact' | 'medium' | 'wide' | 'text' | 'control';\n  /** Fixed specimen height; `app` frames an application-sized recipe or layout.\n   *  A fixed height is definite, so a child that fills with `height: 100%`\n   *  (a horizontal `ResizableRegion`, say) spans the whole frame. */\n  height?: 'short' | 'reduced' | 'medium' | 'tall' | 'app';\n  /** A minimum the frame may grow past. It is not a definite height: a child\n   *  sized with `height: 100%` falls back to its content height, so use\n   *  `height` when the specimen must fill the frame. */\n  minHeight?: 'short' | 'medium';\n  frame?: 'solid' | 'dashed';\n  surface?: 'default' | 'lowered';\n  overflow?: 'hidden' | 'auto-x';\n  responsive?: 'roomy-only';\n  shadow?: boolean;\n  /** Public component custom properties applied to the specimen viewport. */\n  tokens?: Readonly<Record<`--${string}`, string>>;\n}\n\nconst protectedAttributes = new Set([\n  'data-catalog-example',\n  'data-catalog-example-stack',\n  'data-catalog-example-label',\n  'data-catalog-example-note',\n  'data-align',\n]);\n\ntype CatalogExampleRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-catalog-example'?: never;\n    'data-catalog-example-stack'?: never;\n    'data-catalog-example-label'?: never;\n    'data-catalog-example-note'?: never;\n    'data-align'?: never;\n  }\n>;\n\nexport interface CatalogExampleProps {\n  label?: string;\n  note?: SafeHtml | string;\n  align?: CatalogExampleAlign;\n  /** Optional catalog-owned constraints for demonstrating layout components. */\n  viewport?: CatalogExampleViewport;\n  /** Replacement guidance shown when a roomy-only viewport is hidden. */\n  compactFallback?: SafeHtml | string;\n  rootAttributes?: CatalogExampleRootAttributes;\n  className?: string;\n  children?: KerfUiContent;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A labeled catalog specimen with optional explanatory text and alignment. A\n * supplied `label` also names the rendered `section`, so each specimen is an\n * addressable region; an unlabeled example stays an ordinary grouping.\n */\nexport function CatalogExample({\n  label,\n  note,\n  align = 'none',\n  viewport,\n  compactFallback,\n  rootAttributes = {},\n  className = '',\n  children,\n  slot,\n}: CatalogExampleProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    protectedAttributes,\n  );\n  const viewportStyle = viewport?.tokens\n    ? Object.entries(viewport.tokens)\n        .map(([name, value]) => `${name}:${value}`)\n        .join(';')\n    : undefined;\n  if (viewport?.surface === 'lowered') ensureSunkenTexture();\n  const specimen = viewport ? (\n    <div\n      class=\"kui-catalog-example__viewport\"\n      data-catalog-example-viewport\n      data-layout={viewport.layout}\n      data-width={viewport.width}\n      data-height={viewport.height}\n      data-min-height={viewport.minHeight}\n      data-frame={viewport.frame}\n      data-surface={viewport.surface}\n      data-overflow={viewport.overflow}\n      data-responsive={viewport.responsive}\n      data-shadow={viewport.shadow ? 'true' : undefined}\n      style={viewportStyle}\n    >\n      {children}\n    </div>\n  ) : (\n    children\n  );\n\n  return (\n    <section\n      {...safeRootAttributes}\n      class={`kui-catalog-example ${className}`.trim()}\n      data-catalog-example\n      data-align={align}\n      aria-label={label}\n      slot={slot}\n    >\n      {label !== undefined ? (\n        <ListHeader\n          label={label}\n          width=\"content\"\n          rootAttributes={{ 'data-catalog-example-label': '' }}\n        />\n      ) : null}\n      {note !== undefined ? (\n        <ListInsetText\n          sides=\"rl\"\n          className=\"kui-catalog-example__note\"\n          rootAttributes={{ 'data-catalog-example-note': '' }}\n        >\n          <Text variant=\"span\" size=\"compact\" tone=\"quiet\">\n            {note}\n          </Text>\n        </ListInsetText>\n      ) : null}\n      {compactFallback !== undefined ? (\n        <Text tone=\"quiet\" className=\"kui-catalog-example__compact-fallback\">\n          {compactFallback}\n        </Text>\n      ) : null}\n      {specimen}\n    </section>\n  );\n}\n","import type { KerfUiContent } from '../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../shared/dom/extension-attributes.js';\n\nconst protectedAttributes = new Set([\n  'data-catalog-example',\n  'data-catalog-example-stack',\n  'data-catalog-example-label',\n  'data-catalog-example-note',\n  'data-align',\n  'data-width',\n]);\n\ntype CatalogExampleStackRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-catalog-example'?: never;\n    'data-catalog-example-stack'?: never;\n    'data-catalog-example-label'?: never;\n    'data-catalog-example-note'?: never;\n    'data-align'?: never;\n    'data-width'?: never;\n  }\n>;\n\n/**\n * How wide a stack may grow: `reading` (default) caps it at a 736px reading\n * measure for component specimens; `full` lets it span the stage for\n * application-width compositions such as boards, app shells, drawers, and\n * split views.\n */\nexport type CatalogExampleStackWidth = 'reading' | 'full';\n\nexport interface CatalogExampleStackProps {\n  label?: string;\n  /** Maximum width of the stack (default `reading`). */\n  width?: CatalogExampleStackWidth;\n  rootAttributes?: CatalogExampleStackRootAttributes;\n  className?: string;\n  children?: KerfUiContent;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** A vertically stacked group of catalog examples. */\nexport function CatalogExampleStack({\n  label,\n  width = 'reading',\n  rootAttributes = {},\n  className = '',\n  children,\n  slot,\n}: CatalogExampleStackProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    protectedAttributes,\n  );\n\n  return (\n    <section\n      {...safeRootAttributes}\n      class={`kui-catalog-example-stack ${className}`.trim()}\n      data-catalog-example-stack\n      data-width={width === 'full' ? 'full' : undefined}\n      aria-label={label}\n      slot={slot}\n    >\n      {children}\n    </section>\n  );\n}\n"]}

package/dist/{chunk-BU23Z5HZ.js → chunk-527IAEWG.js}

@@ -1,5 +1,5 @@
 import { WORKBENCH_MAIN_MIN_SIZE, WORKBENCH_MAIN_MIN_HEIGHT, workbenchRegionId, WORKBENCH_RESIZE_DEFAULTS } from './chunk-S4ZGTDSG.js';
-import { NavStack } from './chunk-AYHC62OZ.js';
+import { NavStack } from './chunk-AZWE2FB5.js';
 import { clampRegionSize, ResizeGrip } from './chunk-Y6KT7ZTR.js';
 import { FloatingToolbar } from './chunk-S3ECMF23.js';
 import { panelToggleGroup, groupSizeFor, composedPanelBody, relocatedPanelGroups } from './chunk-P74VXMB6.js';
@@ -51,7 +51,9 @@ function panelBody(workbenchId, key, panel) {
         responsive: stack.toolbarConfig?.responsive ?? toolbar?.responsive,
         responsiveAt: stack.toolbarConfig?.responsiveAt ?? toolbar?.responsiveAt,
         safeAreaEdges: stack.toolbarConfig?.safeAreaEdges ?? toolbar?.safeAreaEdges,
-        titleSize: stack.toolbarConfig?.titleSize,
+        // A rail or drawer is peripheral to the work area's xlarge title, so
+        // its stack keeps the large title at every depth.
+        titleSize: stack.toolbarConfig?.titleSize ?? "large",
         headingLevel: stack.toolbarConfig?.headingLevel
       },
       panelToggle: toolbar?.toggle ? panelToggleGroup(
@@ -528,4 +530,4 @@ function Workbench({
 
 export { Workbench };
 
-//# sourceMappingURL=chunk-BU23Z5HZ.js.map
+//# sourceMappingURL=chunk-527IAEWG.js.map