@kerfjs/ui 5.0.0-beta.63 → 5.0.0-beta.64

package/dist/{token-search-field-DvgFLhLL.d.ts → token-search-field-Xk8jiw8Y.d.ts}

@@ -60,6 +60,12 @@ interface TokenSearchToken {
     offset?: number;
     accessibleLabel?: string;
 }
+interface TokenSearchTrailingAction {
+    icon: SafeHtml;
+    label: string;
+    action: string;
+    id?: string;
+}
 type TokenSearchEditorAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
     'data-key'?: never;
@@ -88,8 +94,9 @@ interface TokenSearchFieldBaseProps {
     tokenPlaceholder?: string;
     disabled?: boolean;
     autofocus?: boolean;
+    /** Let an expanded collapsible field consume the available inline width. */
+    fill?: boolean;
     leading?: KerfUiContent;
-    trailing?: KerfUiContent;
     /** Standalone field chrome or the inset visual layer of a configured toolbar group. */
     presentation?: 'standalone' | 'toolbar-group';
     editAction?: string;
@@ -103,6 +110,13 @@ interface TokenSearchFieldBaseProps {
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
+type TokenSearchTrailingProps = {
+    trailing?: KerfUiContent;
+    trailingAction?: never;
+} | {
+    trailing?: never;
+    trailingAction: TokenSearchTrailingAction;
+};
 type TokenSearchCollapsibleProps = {
     /** Allow an empty field to render as one iconic action. */
     collapsible: true;
@@ -116,15 +130,15 @@ type TokenSearchCollapsibleProps = {
     expandAction?: never;
     expandLabel?: never;
 };
-type TokenSearchFieldProps = TokenSearchFieldBaseProps & TokenSearchCollapsibleProps;
+type TokenSearchFieldProps = TokenSearchFieldBaseProps & TokenSearchCollapsibleProps & TokenSearchTrailingProps;
 interface TokenSearchFieldValue {
     query: string;
     tokens: TokenSearchToken[];
 }
-declare function TokenSearchField({ id, label, query, tokens, model, revision, placeholder, tokenPlaceholder, disabled, autofocus, collapsible, expanded, expandAction, expandLabel, leading, trailing, presentation, editAction, removeAction, clearAction, clearLabel, clearIcon, className, editorAttributes, slot, }: TokenSearchFieldProps): SafeHtml;
+declare function TokenSearchField({ id, label, query, tokens, model, revision, placeholder, tokenPlaceholder, disabled, autofocus, fill, collapsible, expanded, expandAction, expandLabel, leading, trailing, trailingAction, presentation, editAction, removeAction, clearAction, clearLabel, clearIcon, className, editorAttributes, slot, }: TokenSearchFieldProps): SafeHtml;
 /** Read editable text and ordered token offsets from a rendered TokenSearchField editor. */
 declare function readTokenSearchField(editor: HTMLElement, knownTokens?: readonly TokenSearchToken[]): TokenSearchFieldValue;
 /** Focus an editor and place its caret at a text offset, skipping atomic token chips. */
 declare function placeTokenSearchCaret(editor: HTMLElement, offset?: number): void;
 
-export { type TokenSearchEditorAttributes as T, TokenSearchField as a, type TokenSearchFieldProps as b, type TokenSearchFieldValue as c, type TokenSearchModel as d, type TokenSearchModelOptions as e, type TokenSearchResolvedToken as f, type TokenSearchRule as g, type TokenSearchState as h, type TokenSearchSuggestion as i, type TokenSearchToken as j, createTokenSearchModel as k, placeTokenSearchCaret as p, readTokenSearchField as r };
+export { type TokenSearchEditorAttributes as T, TokenSearchField as a, type TokenSearchFieldProps as b, type TokenSearchFieldValue as c, type TokenSearchModel as d, type TokenSearchModelOptions as e, type TokenSearchResolvedToken as f, type TokenSearchRule as g, type TokenSearchState as h, type TokenSearchSuggestion as i, type TokenSearchToken as j, type TokenSearchTrailingAction as k, createTokenSearchModel as l, placeTokenSearchCaret as p, readTokenSearchField as r };

package/dist/token-search-field.d.ts

@@ -1,3 +1,3 @@
 import 'kerfjs';
 import './semantic-content-BbzjvSu9.js';
-export { T as TokenSearchEditorAttributes, a as TokenSearchField, b as TokenSearchFieldProps, c as TokenSearchFieldValue, j as TokenSearchToken, p as placeTokenSearchCaret, r as readTokenSearchField } from './token-search-field-DvgFLhLL.js';
+export { T as TokenSearchEditorAttributes, a as TokenSearchField, b as TokenSearchFieldProps, c as TokenSearchFieldValue, j as TokenSearchToken, k as TokenSearchTrailingAction, p as placeTokenSearchCaret, r as readTokenSearchField } from './token-search-field-Xk8jiw8Y.js';

package/dist/token-search-field.js

@@ -1,4 +1,4 @@
-export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-RTJNJTG3.js';
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-NSVLUDUW.js';
 
 
 

package/dist/token-search-model.d.ts

@@ -1,3 +1,3 @@
 import 'kerfjs';
-export { d as TokenSearchModel, e as TokenSearchModelOptions, f as TokenSearchResolvedToken, g as TokenSearchRule, h as TokenSearchState, i as TokenSearchSuggestion, k as createTokenSearchModel } from './token-search-field-DvgFLhLL.js';
+export { d as TokenSearchModel, e as TokenSearchModelOptions, f as TokenSearchResolvedToken, g as TokenSearchRule, h as TokenSearchState, i as TokenSearchSuggestion, l as createTokenSearchModel } from './token-search-field-Xk8jiw8Y.js';
 import './semantic-content-BbzjvSu9.js';

package/dist/wire-catalog.js

@@ -1,4 +1,4 @@
-import { wireWorkbench } from './chunk-OBAFAH5B.js';
+import { wireWorkbench } from './chunk-TJK44RQC.js';
 
 import { wireScrollDividers } from './chunk-JCV4GXWB.js';
 

package/dist/wire-content-items.js

@@ -1,13 +1,17 @@
 // src/wire-content-items.ts
 var ITEM_SELECTOR = '[data-component="content-item"][data-interactive="true"]';
 var NESTED_CONTROL_SELECTOR = 'button, a[href], input, select, textarea, [contenteditable="true"], [role="button"]';
-function actionItem(root, target) {
+function actionItem(root, event) {
+  const target = event.target;
   if (!(target instanceof Element)) return null;
   const item = target.closest(ITEM_SELECTOR);
   if (!item || !root.contains(item) || item.dataset.disabled === "true")
     return null;
-  const nested = target.closest(NESTED_CONTROL_SELECTOR);
-  if (nested && nested !== item && item.contains(nested)) return null;
+  for (const node of event.composedPath()) {
+    if (node === item) break;
+    if (node instanceof Element && node.matches(NESTED_CONTROL_SELECTOR))
+      return null;
+  }
   return item;
 }
 function wireContentItems(root) {
@@ -19,7 +23,7 @@ function wireContentItems(root) {
   const keydown = (event) => {
     if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey)
       return;
-    const item = actionItem(root, event.target);
+    const item = actionItem(root, event);
     if (!item) return;
     if (event.key === "Enter") {
       event.preventDefault();
@@ -40,7 +44,7 @@ function wireContentItems(root) {
     if (!item) return;
     event.preventDefault();
     clearSpace();
-    if (item === actionItem(root, event.target) && item.ownerDocument.activeElement === item)
+    if (item === actionItem(root, event) && item.ownerDocument.activeElement === item)
       item.click();
   };
   const focusout = (event) => {

package/dist/wire-content-items.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/wire-content-items.ts"],"names":[],"mappings":"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","file":"wire-content-items.js","sourcesContent":["const ITEM_SELECTOR =\n  '[data-component=\"content-item\"][data-interactive=\"true\"]';\nconst NESTED_CONTROL_SELECTOR =\n  'button, a[href], input, select, textarea, [contenteditable=\"true\"], [role=\"button\"]';\n\nfunction actionItem(root: HTMLElement, target: EventTarget | null) {\n  if (!(target instanceof Element)) return null;\n  const item = target.closest<HTMLElement>(ITEM_SELECTOR);\n  if (!item || !root.contains(item) || item.dataset.disabled === 'true')\n    return null;\n  const nested = target.closest(NESTED_CONTROL_SELECTOR);\n  if (nested && nested !== item && item.contains(nested)) return null;\n  return item;\n}\n\n/**\n * Give interactive ContentItems native-like Enter/Space activation with one\n * delegated listener pair. Space activates on release and is cancelled if\n * focus moves; the item's own `data-action` still goes through the app's\n * ordinary delegated click handler. Returns a disposer.\n */\nexport function wireContentItems(root: HTMLElement): () => void {\n  let pendingSpace: HTMLElement | null = null;\n\n  const clearSpace = () => {\n    pendingSpace?.removeAttribute('data-kui-pressed');\n    pendingSpace = null;\n  };\n\n  const keydown = (event: KeyboardEvent) => {\n    if (\n      event.defaultPrevented ||\n      event.altKey ||\n      event.ctrlKey ||\n      event.metaKey\n    )\n      return;\n    const item = actionItem(root, event.target);\n    if (!item) return;\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      item.click();\n      return;\n    }\n    if (event.key === ' ' || event.key === 'Spacebar') {\n      event.preventDefault();\n      if (event.repeat) return;\n      clearSpace();\n      pendingSpace = item;\n      item.setAttribute('data-kui-pressed', 'true');\n    }\n  };\n\n  const keyup = (event: KeyboardEvent) => {\n    if (event.key !== ' ' && event.key !== 'Spacebar') return;\n    const item = pendingSpace;\n    if (!item) return;\n    event.preventDefault();\n    clearSpace();\n    if (\n      item === actionItem(root, event.target) &&\n      item.ownerDocument.activeElement === item\n    )\n      item.click();\n  };\n\n  const focusout = (event: FocusEvent) => {\n    if (event.target === pendingSpace) clearSpace();\n  };\n\n  root.addEventListener('keydown', keydown);\n  root.addEventListener('keyup', keyup);\n  root.addEventListener('focusout', focusout);\n  return () => {\n    clearSpace();\n    root.removeEventListener('keydown', keydown);\n    root.removeEventListener('keyup', keyup);\n    root.removeEventListener('focusout', focusout);\n  };\n}\n"]}
+{"version":3,"sources":["../src/wire-content-items.ts"],"names":[],"mappings":"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","file":"wire-content-items.js","sourcesContent":["const ITEM_SELECTOR =\n  '[data-component=\"content-item\"][data-interactive=\"true\"]';\nconst NESTED_CONTROL_SELECTOR =\n  'button, a[href], input, select, textarea, [contenteditable=\"true\"], [role=\"button\"]';\n\nfunction actionItem(root: HTMLElement, event: Event) {\n  const target = event.target;\n  if (!(target instanceof Element)) return null;\n  const item = target.closest<HTMLElement>(ITEM_SELECTOR);\n  if (!item || !root.contains(item) || item.dataset.disabled === 'true')\n    return null;\n  // Composed events expose native controls inside a custom element's shadow\n  // root even though event.target is retargeted to its host here.\n  for (const node of event.composedPath()) {\n    if (node === item) break;\n    if (node instanceof Element && node.matches(NESTED_CONTROL_SELECTOR))\n      return null;\n  }\n  return item;\n}\n\n/**\n * Give interactive ContentItems native-like Enter/Space activation with one\n * delegated listener pair. Space activates on release and is cancelled if\n * focus moves; the item's own `data-action` still goes through the app's\n * ordinary delegated click handler. Returns a disposer.\n */\nexport function wireContentItems(root: HTMLElement): () => void {\n  let pendingSpace: HTMLElement | null = null;\n\n  const clearSpace = () => {\n    pendingSpace?.removeAttribute('data-kui-pressed');\n    pendingSpace = null;\n  };\n\n  const keydown = (event: KeyboardEvent) => {\n    if (\n      event.defaultPrevented ||\n      event.altKey ||\n      event.ctrlKey ||\n      event.metaKey\n    )\n      return;\n    const item = actionItem(root, event);\n    if (!item) return;\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      item.click();\n      return;\n    }\n    if (event.key === ' ' || event.key === 'Spacebar') {\n      event.preventDefault();\n      if (event.repeat) return;\n      clearSpace();\n      pendingSpace = item;\n      item.setAttribute('data-kui-pressed', 'true');\n    }\n  };\n\n  const keyup = (event: KeyboardEvent) => {\n    if (event.key !== ' ' && event.key !== 'Spacebar') return;\n    const item = pendingSpace;\n    if (!item) return;\n    event.preventDefault();\n    clearSpace();\n    if (\n      item === actionItem(root, event) &&\n      item.ownerDocument.activeElement === item\n    )\n      item.click();\n  };\n\n  const focusout = (event: FocusEvent) => {\n    if (event.target === pendingSpace) clearSpace();\n  };\n\n  root.addEventListener('keydown', keydown);\n  root.addEventListener('keyup', keyup);\n  root.addEventListener('focusout', focusout);\n  return () => {\n    clearSpace();\n    root.removeEventListener('keydown', keydown);\n    root.removeEventListener('keyup', keyup);\n    root.removeEventListener('focusout', focusout);\n  };\n}\n"]}

package/dist/wire-token-search-fields.d.ts

@@ -1,5 +1,5 @@
 import { Signal } from 'kerfjs';
-import { d as TokenSearchModel } from './token-search-field-DvgFLhLL.js';
+import { d as TokenSearchModel } from './token-search-field-Xk8jiw8Y.js';
 import './semantic-content-BbzjvSu9.js';
 
 interface TokenSearchSubmit {

package/dist/wire-token-search-fields.js

@@ -1,4 +1,4 @@
-export { wireTokenSearchFields } from './chunk-R75GGNWY.js';
+export { wireTokenSearchFields } from './chunk-M5H2RMCH.js';
 
 
 

package/dist/wire-workbench.js

@@ -1,4 +1,4 @@
-export { wireWorkbench } from './chunk-OBAFAH5B.js';
+export { wireWorkbench } from './chunk-TJK44RQC.js';
 
 
 

package/docs/accessibility.md

@@ -206,10 +206,14 @@ are presentational. A keyboard-focused item is the menu's current row, painted
 with the Select's current-option fill rather than a second focus ring inside the
 open popup. A disabled item stays in the menu but cannot be
 chosen; disable the whole trigger only when every command is unavailable.
+Clicking outside dismisses a context `PopupMenu`, including one reopened while
+its previous hide animation is still finishing.
 Nested items use Web Awesome's submenu pointer and Left/Right arrow routing;
 headings and dividers can separate nested groups without becoming keyboard
 choices. A rapid ArrowDown or ArrowUp after opening a submenu keeps the chosen
-item focused when its show animation finishes. Set `checked` to `true` or `false` for checkbox menu semantics; omit it
+item focused when its show animation finishes. If a submenu is reopened during
+its close animation, it remains visible; pointer and ArrowRight actions also
+recover a submenu left hidden with an open state. Set `checked` to `true` or `false` for checkbox menu semantics; omit it
 for a plain command. `details` supplies optional
 trailing visual content without changing a command's accessible label. A
 `context` menu's invisible anchor is outside the accessibility tree and normal
@@ -432,7 +436,11 @@ it) with `data-token-search-keep-open`, or pass `collapsible.keepOpenOn(target)`
 so focus or pointer activation moving into it does not collapse an empty field.
 The helper preserves the pointer target when a browser omits
 `focusout.relatedTarget`, preventing the field or target from disappearing
-between pointerdown and click. `wireTokenSearchFields`
+between pointerdown and click. For an empty field losing focus during a pointer
+press, managed collapse waits until that press's click has dispatched (or the
+press ends without a click), then rechecks focus and content before closing.
+This keeps a shifting search row from moving the pressed control mid-click.
+`wireTokenSearchFields`
 can also, opt-in via `keyboard`, own atomic-chip editing keys: from a collapsed
 caret with no selection, Backspace removes the token before the caret and Delete
 the token after it (reported through `onRemoveToken` for the app to apply to its

package/docs/catalog.md

@@ -117,8 +117,12 @@ own overlay implementation.
   spacing wrapper. A composition row may place the composition root there.
 
 Use `align="glyph"` for a bare glyph/text specimen, `align="inline-control"`
-for a control whose own inline padding contributes about 8px, and `align="none"`
-(the default) for a content item or composition that owns its geometry.
+for a control whose own inline padding contributes about 8px, and
+`align="text-trigger"` for a Web Awesome dropdown's text trigger whose visible
+label needs an 8px inset (such as a plain `PopupMenu` trigger). The dropdown host
+has no layout box, so this inset applies to its button child. Use
+`align="none"` (the default) for a content item or composition that owns its
+geometry.
 
 ```tsx
 import { CatalogExample, CatalogExampleStack } from "@kerfjs/ui/catalog";

package/docs/component-contract.md

@@ -428,7 +428,9 @@ tones can be rethemed globally with
 segmented-control, app-tab, and tab-bar colors likewise use their public
 `--kui-*-*` variables. `SegmentedControl` exposes surface, border, foreground,
 hover, and selected-state variables, so rounded, pill, and toolbar presentations
-remain opinionated but locally overridable.
+remain opinionated but locally overridable. Its label color switches with the
+theme without Web Awesome's native button color transition, so a dark filled
+track never briefly pairs with an interpolated low-contrast label.
 
 Inset hover and selection surfaces follow the outer control shape instead of
 choosing an independent radius. `--kui-layout-highlight-inset` is the full
@@ -481,6 +483,15 @@ declarations.
 one child 8px inline margin, a real 1px border, 8px padding, and 12px corners;
 the border stays transparent unless `frame="framed"`, so framing never changes
 geometry. `shape="pill"` selects the 22px radius.
+`flush` removes block padding and borders while preserving inline geometry;
+`title` passes through as the native tooltip. Interactive hover uses the normal
+neutral fill so it remains visible on a lowered surface. For a card with
+multiple actions, put sibling buttons in a static ContentItem (or use
+`ListActionRow` for a simple two-action row).
+For an interactive ContentItem, `wireContentItems` activates the card on Enter
+or Space only when the key event originated from the card itself. A nested
+native control, including one inside a custom element's shadow root, keeps its
+own keyboard activation.
 
 `ToolbarControlGroup` is the unit of toolbar organization, even for dormant
 text. Each group reserves `calc(2px + remify(42px))`, or 44px, with 8px between
@@ -510,11 +521,23 @@ own inset (8px for a raw `wa-dropdown`, the Select listbox's 4px for a
 open popup, fade-in surface, surface inset, row height and padding, current-row
 fill, and group titles, all read from one private popup-choice contract in
 `foundation.css`. Checkbox items reserve a check column; plain commands start
-at the checkmark's leading edge. Compact mixed controls retain the standard
+at the checkmark's leading edge, beside the group title rather than the
+farther-in Select option label. Checked submenu items keep their checkmark and
+label inside the submenu surface. Compact mixed controls retain the standard
 item padding, omit an internal separator, and let the raised selected item paint
 over the outer border instead of shrinking to an inset highlight. The Web
 Awesome trigger's shadow base owns max-content sizing, so icons, localized text,
 and the shadow caret determine the width without a fixed host measurement.
+With `popup-menu/register` loaded, PopupMenu and a raw dropdown inside
+`PopupSurface` preserve item navigation made during the Web Awesome show
+animation across its final initial-focus handoff.
+At viewport widths of 480px or less, `PopupMenu` places an open submenu above
+or below its parent menu, choosing the side with room and constraining the
+submenu to the viewport. It never paints over the parent list. The submenu
+remains a native Web Awesome `menu`: the reverse horizontal arrow (ArrowLeft in
+LTR, ArrowRight in RTL) returns focus to its parent item, Escape dismisses the
+menu, and choosing a child dispatches the normal
+`data-action` and `wa-select` events. Wider viewports retain the side cascade.
 The enclosing `Toolbar` owns zone alignment and responsive topology: use
 `centerAlign="stretch"` when the center group should consume its track, and
 choose `responsive="stack"` with `responsiveAt="compact" | "narrow"`,
@@ -585,6 +608,15 @@ render, hands in its own via `collapsible.signals`, drives it through
 UI is consistent by default without every app reinventing it. A collapsed
 field may reveal its editor after the current microtask; the helper keeps a
 bounded render-frame focus handoff for that reveal and cancels it on disposal.
+`TokenSearchField.trailingAction` supplies an icon, accessible `label`, delegated
+`action`, and optional `id`; the field renders a 24px wide button that fills its
+34px line slot, including the hit target, disabled state, hover, and focus ring.
+Use `trailing` for passive content. The two props are mutually exclusive.
+For a collapsible search in a stretched Toolbar center, `fill` lets the expanded
+field and its enclosing search `ToolbarControlGroup` consume the available width;
+the collapsed action retains its fixed icon width.
+Grammar suggestion rows align their labels to one leading edge inside the
+anchored popover, including when the labels have different lengths.
 
 A public subpath that exposes several visual components is a folder-backed
 surface. Put each component in its own source file and give each visual

package/docs/component-selection.md

@@ -333,6 +333,13 @@ For common structured search, use `createTokenSearchModel` from `@kerfjs/ui/toke
 For a sibling date picker or other app helper, call `model.commit(value)` while a `name:` prefix is active. It parses and commits that value for the active rule even when it is absent from suggestions, replacing the unfinished prefix text. Invalid values and calls without an active prefix leave the query unchanged; `choose(value)` remains restricted to suggested tokens.
 To apply a saved search or restore a query programmatically, call `model.replace({ query, tokens })`. It publishes parsed state and rebuilds the DOM-owned editor text even when no chip changed. For a field without a model, change the field's `revision` prop when setting `query` yourself.
 When one root contains both kinds of field, a registered model enables chip keyboard behavior only for its own field. Other fields keep native editing unless the root opts into `keyboard` with an application removal callback.
+For an icon action at the end of the field, pass `trailingAction` with `icon`,
+accessible `label`, and delegated `action` (plus optional `id`). The component
+renders a button that fills the trailing hit target. Reserve `trailing` for
+passive content such as a shortcut hint.
+Set `fill` on a collapsible `TokenSearchField` in a stretched Toolbar center to
+use the available width when expanded; the field and its search group retain
+their compact widths when collapsed.
 
 ## Toolbar composition
 

package/docs/layout.md

@@ -188,6 +188,7 @@ import { ContentItem } from "@kerfjs/ui/content-item";
 <Pane label="Inspector">
   <ContentItem>{details}</ContentItem>
   <ContentItem frame="framed">{pendingChanges}</ContentItem>
+  <ContentItem flush>{markdownPreview}</ContentItem>
   <ContentItem shape="pill">{summary}</ContentItem>
 </Pane>;
 ```
@@ -202,7 +203,10 @@ needs to align with neighboring items is `ListInsetText`. Safe `data-*`
 metadata goes in `rootAttributes`. Pass `ariaLabel` only for a distinct named
 region (`role="region"`), and `focusTarget` to make the item a programmatic
 focus target (`tabindex="-1"`), for example a NavStack view's `data-nav-focus`
-target.
+target. `flush` removes block padding and both block borders while retaining
+the inline margin, padding, and border. Use it for content such as a markdown
+preview that must reach the item's top and bottom edges. `title` passes through
+to the root element as a native tooltip.
 
 For a selectable card, set `interactive`, a delegated `action`, and an optional
 `itemId`. Wire `wireContentItems(root)` once on the containing app root; it
@@ -211,13 +215,19 @@ the app's ordinary `data-action` handler. `selectionMode="toggle"` maps
 `selected` to a button's `aria-pressed`; `selectionMode="single"` maps it to an
 option's `aria-selected` and belongs in an app-owned `role="listbox"` container.
 An interactive card is a Tab stop, and `disabled` removes its action and Tab
-stop while exposing `aria-disabled`. Keep interactive descendants outside a
-card; a card is one action target. Hover, pressed, focus, and selected paints
-reuse the reserved border without changing geometry. `rootAttributes` still
-accepts safe app `data-*` metadata, while the card owns its interaction data.
-
-The rendered classes — `.kui-content-item`, `.kui-content-item--framed`, and
-`.kui-content-item--pill` — stay public for the rare element that must carry the
+stop while exposing `aria-disabled`. Hover uses the normal neutral fill so it
+remains visible on a lowered surface; hover, pressed, focus, and selected paints
+do not change geometry. A single-action card has no interactive descendants.
+For a rich card with a primary and secondary action, render a static
+`ContentItem` with sibling buttons inside it. Each button then has its own
+focus stop and action without nesting controls inside an interactive card.
+`ListActionRow` already packages this pattern for a simple two-action row.
+`rootAttributes` still accepts safe app `data-*` metadata, while the card owns
+its interaction data.
+
+The rendered classes — `.kui-content-item`, `.kui-content-item--framed`,
+`.kui-content-item--pill`, and `.kui-content-item--flush` — stay public for the
+rare element that must carry the
 geometry itself (for example a `<ul>` list or a `Text` paragraph in an
 application-owned adapter). Prefer `ContentItem` everywhere else so the framing
 choice is typed. A plain `<div class="kui-content-item">` is exactly what
@@ -410,14 +420,24 @@ import { px } from "@kerfjs/ui/css-values";
   <label>Provider <input /></label>
   <label>Endpoint <input /></label>
 </Grid>;
+
+<Grid minColumnWidth={px(160)} autoFill gap="m">
+  <DocumentTile />
+</Grid>;
 ```
 
 `columns` must be a positive safe integer; invalid counts throw instead of
 silently producing invalid CSS. Import `px` from `@kerfjs/ui/css-values` for a
 pixel minimum. `columns` and `minColumnWidth` are mutually exclusive. In the
 responsive mode, the container width decides how many equal tracks fit; constrain
-the Grid's outer width when the form should have a maximum count. Grid is
-layout-only and adds no ARIA grid role. The application owns child semantics.
+the Grid's outer width when the form should have a maximum count.
+`autoFill` keeps the unoccupied responsive tracks so one or two tiles retain
+their shared track width rather than expanding across an otherwise empty row.
+It requires `minColumnWidth`; the default `auto-fit` keeps the existing form
+behavior. When Grid is a direct child of a flex-owned `ListInsetControl`, pass
+`flex` so the Grid takes the available row width instead of shrink-wrapping.
+Grid is layout-only and adds no ARIA grid role. The application owns child
+semantics.
 Use application-owned CSS grid for intrinsic, asymmetric, spanning, or masonry
 tracks, and use `ResizableRegion` when people must adjust a boundary.
 

package/docs/surface-scaffold.md

@@ -2,8 +2,10 @@
 
 `DialogSurface` and `PopupSurface` configure recurring Web Awesome surface
 geometry without application `::part()` overrides. They do not replace Web
-Awesome behavior: the application still owns open state, focus lifecycle,
-dismissal policy, ids, labels, and content.
+Awesome behavior: the application still owns open state, dismissal policy, ids,
+labels, and content. With `@kerfjs/ui/popup-menu/register` imported, a dropdown
+inside `PopupSurface` also keeps keyboard item navigation made during its show
+animation when Web Awesome completes its initial focus handoff.
 
 Wrap one `wa-dialog` with `DialogSurface`. Choose `size` (`small`, `medium`, or
 `large`), `presentation` (`modal`, `side-sheet`, or `fullscreen`), and independent
@@ -22,4 +24,5 @@ Wrap one `PopupMenu` (or another single `wa-dropdown`) with `PopupSurface`. `ins
 padding for a child that already owns row insets, `compact` uses 4px, and
 `standard` uses the shared 8px surface inset. Keep the dropdown trigger named and
 preserve `data-morph-skip-children` when its upgraded light-DOM items must retain
-identity across Kerf rerenders.
+identity across Kerf rerenders. Import `@kerfjs/ui/popup-menu/register` once for
+the focus handoff fix when wrapping a raw `wa-dropdown`.

package/docs/ux-demo.md

@@ -22,6 +22,7 @@ deterministic state, and semantic layout owners from the [recipe guide](./recipe
 
 - It imports public component subpaths, exercising their browser-selected reachable CSS rather than a catalog-only style path.
 - The `ListActionRow` route demonstrates sibling primary/trailing native controls, independent disabled states, controlled selection, first-line leading-icon alignment for wrapped labels, and an application-owned native popover relationship without nesting controls. The `ListItem` route demonstrates the same multiline leading-icon anchor alongside its single-control navigation contract.
+- The `PopupMenu` route's context example opens one app-owned menu either at the row's right-click point or below its adjacent, keyboard-operable Demand actions button. Its interactive row/button composition opts out of the catalog geometry overlay so the overlay's border and margin highlights do not masquerade as a row inset during activation. The Nested decisions example shows the automatic phone-width submenu placement above or below its parent list, with native ArrowLeft return, Escape dismissal, and child selection.
 - The `AppTab` and `TabBar` routes are focused component specimens: AppTab shows its selected, compact, segmented, icon-only, truncation, placeholder, pending, metadata, and close-icon axes inside the required tablist context; TabBar shows its rail, segmented, inspector, allocation, placement, and accessory-zone axes, including an adjacent action plus a separately pinned end action whose tabs overflow at narrow widths, without application readouts. The separate `Application tabs` composition route demonstrates controlled selection, matching panel content, overflow, adding (a new tab opens `pending` with a spinner and stays selectable while its panel shows a `Skeleton` heading until a simulated load completes), closing, keyboard/pointer reordering, and application-owned ordering. The `ResizableRegion` route likewise replaces only the decorative handle glyph while retaining separator semantics and shared wiring.
 - Every first-party visual component and every free Web Awesome 3.12 component has its own stable `?component=<id>` URL and focused demo. Composite header, menu, and feedback scenarios remain addressable alongside their subcomponents; the root opens the first Kerf component. The former aggregate Web Awesome theme specimen is intentionally omitted because its component families are covered by those focused routes.
 - `ai/component-catalog.json` is the canonical catalog metadata. A deterministic checked-in projection supplies the demo's unique id, category, kind (`component`, `composition`, or `recipe`), source (`kerf` or `webawesome`), name, description, recommendation, direct `uses` dependencies, existing documentation path, and demo-source path; first-party, recipe, and Web Awesome renderer maps are exhaustively typed against its generated id unions. Functional groups follow their authored importance order; components precede compositions inside each group, equal-importance entries use alphabetical order, and the Recipes group comes last. Composition names stay concise and project a visible `Composition` sidebar tag. Non-supported Web Awesome recommendations project to a visible `Discouraged` tag, with Popup as the deliberate conditional exception. Demo paths resolve to the matching `ui/ux-demo/demos/<id>.tsx` or `ui/ux-demo/recipes/*.tsx` file, or to `ui/ux-demo/webawesome-demos.tsx` for Web Awesome entries. `ui/ux-demo/main.tsx` owns only the catalog shell, shared state, routing, and interaction wiring. First-party component entries additionally derive `ui/src/<public-subpath>.tsx` from their canonical `delivery.browserImport` or opt-in `delivery.moduleImport`.

package/docs/workbench.md

@@ -379,7 +379,11 @@ const stop = wireWorkbench(root, {
   full-size overlay over the work area rather than squeezing beside it (see
   the catalog's resizable and responsive-drawer Workbench examples).
   A numeric value measures the Workbench container, not the viewport. If the
-  rest of an app switches by viewport width and its Workbench can be narrower
+  app has no numeric Workbench breakpoint, the overlay wiring does not measure
+  the Workbench on ordinary panel updates. For numeric breakpoints the wiring
+  mirrors the active panel state onto the Workbench root, keeping work-area
+  styles local to actual overlay transitions. If the rest of an app switches
+  by viewport width and its Workbench can be narrower
   than the viewport, keep the app's viewport decision in
   `presentation: "overlay"` and pass its `collapsed` signals to
   `wireWorkbench`. On entering that mode, collapse the panels; after leaving,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.63",
+  "version": "5.0.0-beta.64",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",

package/dist/chunk-7AKGPBCC.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/content-item.tsx"],"names":[],"mappings":";;;AAWA,IAAM,8BAAA,mBAAiC,IAAI,GAAA,CAAI,CAAC,gBAAgB,CAAC,CAAA;AACjE,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,eAAA;AAAA,EACA,qBAAA;AAAA,EACA;AACF,CAAC,CAAA;AA+EM,SAAS,WAAA,CAAY;AAAA,EAC1B,QAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,WAAA,GAAc,KAAA;AAAA,EACd,MAAA;AAAA,EACA,MAAA;AAAA,EACA,aAAA,GAAgB,MAAA;AAAA,EAChB,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,kBAAA,GAAqB,oBAAA;AAAA,IACzB,cAAA;AAAA,IACA,cACI,8BAAA,GACA;AAAA,GACN;AACA,EAAA,IAAI,WAAA,IAAe,CAAC,MAAA,EAAQ;AAC1B,IAAA,MAAM,IAAI,MAAM,4CAA4C,CAAA;AAAA,EAC9D;AACA,EAAA,IAAI,WAAA,IAAe,QAAA,IAAY,aAAA,KAAkB,MAAA,EAAQ;AACvD,IAAA,MAAM,IAAI,MAAM,+CAA+C,CAAA;AAAA,EACjE;AACA,EAAA,MAAM,GAAA,GAAM;AAAA,IACV,kBAAA;AAAA,IACA,KAAA,KAAU,SAAS,wBAAA,GAA2B,EAAA;AAAA,IAC9C,KAAA,KAAU,WAAW,0BAAA,GAA6B,EAAA;AAAA,IAClD;AAAA,GACF,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACX,EAAA,MAAM,wBAAwB,WAAA,GAC1B;AAAA,IACE,kBAAA,EAAoB,MAAA;AAAA,IACpB,aAAA,EAAe,WAAW,MAAA,GAAY,MAAA;AAAA,IACtC,cAAA,EAAgB,MAAA;AAAA,IAChB,qBAAA,EAAuB,aAAA;AAAA,IACvB,eAAA,EACE,aAAA,KAAkB,MAAA,GAAS,MAAA,GAAY,OAAO,QAAQ,CAAA;AAAA,IACxD,eAAA,EAAiB,WAAW,MAAA,GAAS;AAAA,MAEvC,EAAC;AACL,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,kBAAA;AAAA,MACH,GAAG,qBAAA;AAAA,MACJ,KAAA,EAAO,GAAA;AAAA,MACP,gBAAA,EAAe,cAAA;AAAA,MACf,MACE,WAAA,GACI,aAAA,KAAkB,WAChB,QAAA,GACA,QAAA,GACF,YACE,QAAA,GACA,MAAA;AAAA,MAER,YAAA,EAAY,SAAA;AAAA,MACZ,iBACE,WAAA,IAAe,aAAA,KAAkB,QAAA,GAAW,MAAA,CAAO,QAAQ,CAAA,GAAI,MAAA;AAAA,MAEjE,gBACE,WAAA,IAAe,aAAA,KAAkB,QAAA,GAAW,MAAA,CAAO,QAAQ,CAAA,GAAI,MAAA;AAAA,MAEjE,eAAA,EAAe,WAAA,IAAe,QAAA,GAAW,MAAA,GAAS,MAAA;AAAA,MAClD,UACE,WAAA,GAAe,QAAA,GAAW,IAAA,GAAO,GAAA,GAAO,cAAc,IAAA,GAAO,MAAA;AAAA,MAE/D,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-7AKGPBCC.js","sourcesContent":["import { filterDataAttributes } from './extension-attributes.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\n/** Whether the item's always-reserved 1px border is transparent or visible. */\nexport type ContentItemFrame = 'none' | 'framed';\n\n/** Corner shape: the 12px rounded rectangle or the 22px pill. */\nexport type ContentItemShape = 'rounded' | 'pill';\n/** `single` uses option selection; `toggle` uses a pressed button. */\nexport type ContentItemSelectionMode = 'none' | 'single' | 'toggle';\n\nconst contentItemProtectedAttributes = new Set(['data-component']);\nconst interactiveProtectedAttributes = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-interactive',\n  'data-selected',\n  'data-disabled',\n  'data-selection-mode',\n  'data-kui-pressed',\n]);\n\ntype ContentItemRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n  }\n>;\n\ntype ContentItemInteractiveRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-interactive'?: never;\n    'data-selected'?: never;\n    'data-disabled'?: never;\n    'data-selection-mode'?: never;\n    'data-kui-pressed'?: never;\n  }\n>;\n\ninterface ContentItemBaseProps {\n  /** Item content; a plain string is allowed for bare copy. */\n  children?: KerfUiContent | string;\n  /**\n   * `framed` paints the standard neutral border in the 1px the item always\n   * reserves, so framing never changes geometry. Frame only an item that\n   * marks a real distinction. Defaults to `none` (transparent border).\n   */\n  frame?: ContentItemFrame;\n  /** Corner shape. Defaults to `rounded`. */\n  shape?: ContentItemShape;\n  /**\n   * Names the item as a distinct region (`role=\"region\"`). Omit it for an\n   * ordinary item, which stays a non-landmark grouping.\n   */\n  ariaLabel?: string;\n  /**\n   * Makes the item a programmatic focus target (`tabindex=\"-1\"`, never a tab\n   * stop), for example the preferred initial focus of a NavStack view when\n   * combined with `data-nav-focus` in `rootAttributes`.\n   */\n  focusTarget?: boolean;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport type ContentItemProps = ContentItemBaseProps &\n  (\n    | {\n        interactive?: false;\n        action?: never;\n        itemId?: never;\n        selectionMode?: never;\n        selected?: never;\n        disabled?: never;\n        /** Existing static `data-*` metadata remains available. */\n        rootAttributes?: ContentItemRootAttributes;\n      }\n    | {\n        /** Enable a keyboard reachable card; wire `wireContentItems` once on its containing root. */\n        interactive: true;\n        /** Delegated action dispatched by pointer, Enter, or Space. */\n        action: string;\n        itemId?: string;\n        selectionMode?: ContentItemSelectionMode;\n        selected?: boolean;\n        disabled?: boolean;\n        /** Safe app metadata; interaction attributes are component-owned. */\n        rootAttributes?: ContentItemInteractiveRootAttributes;\n      }\n  );\n\n/**\n * One self-contained `.kui-content` child: an 8px inline margin, a real 1px\n * border (transparent unless `framed`), 8px padding, and a rounded or pill\n * radius. It owns that whole geometry, so wrappers must not add more.\n */\nexport function ContentItem({\n  children,\n  frame = 'none',\n  shape = 'rounded',\n  ariaLabel,\n  focusTarget = false,\n  interactive = false,\n  action,\n  itemId,\n  selectionMode = 'none',\n  selected = false,\n  disabled = false,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ContentItemProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    interactive\n      ? interactiveProtectedAttributes\n      : contentItemProtectedAttributes,\n  );\n  if (interactive && !action) {\n    throw new Error('Interactive ContentItem requires an action');\n  }\n  if (interactive && selected && selectionMode === 'none') {\n    throw new Error('Selected ContentItem requires a selectionMode');\n  }\n  const cls = [\n    'kui-content-item',\n    shape === 'pill' ? 'kui-content-item--pill' : '',\n    frame === 'framed' ? 'kui-content-item--framed' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const interactiveAttributes = interactive\n    ? {\n        'data-interactive': 'true',\n        'data-action': disabled ? undefined : action,\n        'data-item-id': itemId,\n        'data-selection-mode': selectionMode,\n        'data-selected':\n          selectionMode === 'none' ? undefined : String(selected),\n        'data-disabled': disabled ? 'true' : undefined,\n      }\n    : {};\n  return (\n    <div\n      {...safeRootAttributes}\n      {...interactiveAttributes}\n      class={cls}\n      data-component=\"content-item\"\n      role={\n        interactive\n          ? selectionMode === 'single'\n            ? 'option'\n            : 'button'\n          : ariaLabel\n            ? 'region'\n            : undefined\n      }\n      aria-label={ariaLabel}\n      aria-selected={\n        interactive && selectionMode === 'single' ? String(selected) : undefined\n      }\n      aria-pressed={\n        interactive && selectionMode === 'toggle' ? String(selected) : undefined\n      }\n      aria-disabled={interactive && disabled ? 'true' : undefined}\n      tabindex={\n        interactive ? (disabled ? '-1' : '0') : focusTarget ? '-1' : undefined\n      }\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/chunk-OBAFAH5B.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/workbench-overlays.ts","../src/wire-workbench.ts"],"names":["active","element","panel","inside","effect","selector"],"mappings":"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","file":"chunk-OBAFAH5B.js","sourcesContent":["// The transient-overlay behavior `wireWorkbench` gives Workbench panels that\n// present as overlays: a responsive overlay starts collapsed when its\n// breakpoint begins to apply, an open overlay takes focus and keeps Tab inside\n// it, and it closes on Escape or a press outside it. It mirrors `wireSidebar`'s\n// compact overlay (the ARIA dialog pattern). Internal.\n\nimport { effect, type Signal } from 'kerfjs';\n\nimport type { WorkbenchPanelKey } from './workbench-resize.js';\n\n/** A Workbench panel whose app-owned `collapsed` signal the wiring may write. */\nexport interface WorkbenchOverlayPanel {\n  key: WorkbenchPanelKey;\n  collapsed: Signal<boolean>;\n  keepOpenOn?: (target: Node) => boolean;\n}\n\n/** Each panel's own element, never a nested Workbench's. */\nconst PANEL_SELECTORS: Record<WorkbenchPanelKey, string> = {\n  leftRail: ':scope > [data-workbench-rail=\"left\"]',\n  rightRail: ':scope > [data-workbench-rail=\"right\"]',\n  bottomDrawer: ':scope > .kui-workbench__center > [data-workbench-drawer]',\n};\n\nconst RESTORE_PANELS: Record<WorkbenchPanelKey, string> = {\n  leftRail: 'left',\n  rightRail: 'right',\n  bottomDrawer: 'bottom',\n};\n\nconst FOCUSABLE =\n  'a[href],area[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * The panel's focusable controls, in tab order. Only an open panel is ever\n * asked. The selector drops disabled controls and `tabindex=\"-1\"`; a\n * rendered control the CSS hides (the separator of a panel whose responsive\n * overlay breakpoint applies is `display: none`) is dropped too, or Tab would\n * wrap from a control focus can never reach. Where `checkVisibility` is\n * missing, every matched control counts.\n */\nconst focusables = (element: HTMLElement): HTMLElement[] =>\n  [...element.querySelectorAll<HTMLElement>(FOCUSABLE)].filter(\n    (control) =>\n      typeof control.checkVisibility !== 'function' ||\n      control.checkVisibility(),\n  );\n\n/**\n * Wire transient overlay behavior for the given panels of the Workbench that\n * `findWorkbench` returns (looked up on use, so the Workbench may render after\n * wire-up). The app still owns each `collapsed` signal; this wiring only\n * writes it:\n *\n * - When a panel's `responsiveOverlayAt` breakpoint begins to apply (at\n *   wire-up, on first render, or on a crossing), its inline collapsed state is\n *   remembered and the panel collapses, so no overlay covers the work area\n *   until the user opens it. When the breakpoint stops applying (or on\n *   disposal) the remembered state comes back. These presentation changes\n *   skip the collapse motion.\n * - A panel that opens while it presents as an overlay takes focus: its\n *   first focusable control (else the panel itself) is focused, without\n *   scrolling its sliding content. While an overlay is open, Tab and\n *   Shift+Tab cycle through the controls of the overlay that holds focus\n *   (else the most recently opened one) and never reach the work area it\n *   covers — the ARIA dialog pattern `wireSidebar`'s compact overlay follows.\n *   Inline panels are left alone.\n * - Escape closes the open overlay panel that holds focus, else the most\n *   recently opened one; a press that starts and ends outside an open overlay\n *   panel closes it. Static `presentation: \"overlay\"` panels are included.\n * - Focus stranded in a panel that closes — however it closed, including\n *   through the app's own control inside it — returns to the control that\n *   had it when the panel opened, else to the panel's restore control, else\n *   to a control outside it whose `aria-controls` names the panel (or an\n *   element inside it). The last covers a panel that was already open at\n *   wire-up, which has no recorded opener. Focus a press inside the panel\n *   dropped to the body counts as stranded too: Safari and macOS WebKit\n *   never focus a clicked button, so pressing the panel's own close control\n *   blurs the focused control before the click closes the panel. Focus the\n *   user has since moved to any element is left where it is.\n * - With `exclusive`, a panel that opens while it presents as an overlay\n *   closes every other open overlay panel, so overlays never cover each\n *   other's controls. Inline panels are never closed by it.\n *\n * Returns a disposer.\n */\nexport function wireWorkbenchOverlays(\n  root: HTMLElement,\n  findWorkbench: () => HTMLElement | null,\n  panels: readonly WorkbenchOverlayPanel[],\n  exclusive = false,\n): () => void {\n  const ownerDocument = root.ownerDocument;\n  const disposers: Array<() => void> = [];\n  // Open panels, most recently opened last, and each one's opener: the\n  // control that had focus when it opened.\n  const openOrder: WorkbenchOverlayPanel[] = [];\n  const openers = new Map<WorkbenchOverlayPanel, HTMLElement>();\n  // The open panel the latest press started in while focus was inside it,\n  // until focus next lands anywhere. Safari and macOS WebKit never focus a\n  // clicked button, so pressing a panel's own close control blurs the focused\n  // control to the body before the click closes the panel; this is how the\n  // close still counts as leaving focus stranded in it.\n  let pressedFocus: WorkbenchOverlayPanel | undefined;\n  /**\n   * The `aria-controls` control a click just activated, kept for a couple of\n   * frames: the toggle a panel opens or closes from, even once the app's\n   * render has removed it.\n   */\n  let activated: HTMLElement | undefined;\n\n  const panelElement = (panel: WorkbenchOverlayPanel): HTMLElement | null =>\n    findWorkbench()?.querySelector<HTMLElement>(PANEL_SELECTORS[panel.key]) ??\n    null;\n  /** Whether the panel's responsive overlay breakpoint currently applies. */\n  const responsive = (element: HTMLElement): boolean =>\n    element.dataset.presentation === 'inline' &&\n    element.hasAttribute('data-responsive-overlay-at') &&\n    globalThis.getComputedStyle(element).position === 'absolute';\n  const overlaid = (element: HTMLElement): boolean =>\n    element.dataset.presentation === 'overlay' || responsive(element);\n\n  /** Where focus goes when a panel it was in closes. */\n  const restoreTarget = (\n    panel: WorkbenchOverlayPanel,\n    element: HTMLElement | null,\n  ): HTMLElement | undefined => {\n    const opener = openers.get(panel);\n    // An opener inside another panel that has closed since (an exclusive\n    // overlay closes the one it was opened from) would strand focus there too.\n    if (\n      opener?.isConnected &&\n      !element?.contains(opener) &&\n      !panels.some(\n        (other) =>\n          other.collapsed.peek() && panelElement(other)?.contains(opener),\n      )\n    )\n      return opener;\n    const side = RESTORE_PANELS[panel.key];\n    const restore = findWorkbench()\n      ?.querySelector<HTMLElement>(\n        `.kui-workbench__restore[data-panel=\"${side}\"]`,\n      )\n      ?.querySelector<HTMLElement>(FOCUSABLE);\n    return restore ?? (element ? controller(element) : undefined);\n  };\n  /**\n   * A control outside the panel that names it, or an element inside it, in\n   * its `aria-controls`: the app's toggle for a panel with no opener.\n   */\n  const controller = (element: HTMLElement): HTMLElement | undefined => {\n    const ids = new Set(\n      [element, ...element.querySelectorAll('[id]')].map((node) => node.id),\n    );\n    ids.delete('');\n    return [\n      ...ownerDocument.querySelectorAll<HTMLElement>('[aria-controls]'),\n    ].find(\n      (control) =>\n        !element.contains(control) &&\n        control.matches(FOCUSABLE) &&\n        control\n          .getAttribute('aria-controls')!\n          .split(/\\s+/)\n          .some((id) => ids.has(id)),\n    );\n  };\n  /** Whether a control's `aria-controls` (always present) names panel `id`. */\n  const namesPanel = (control: Element, id: string): boolean =>\n    control.getAttribute('aria-controls')!.split(/\\s+/).includes(id);\n  /** The panel's own control for itself: its toggle inside it. */\n  const controlInside = (element: HTMLElement): HTMLElement | undefined =>\n    [...element.querySelectorAll<HTMLElement>('[aria-controls]')].find(\n      (control) =>\n        control.matches(FOCUSABLE) && namesPanel(control, element.id),\n    );\n  const rescueFocus = (panel: WorkbenchOverlayPanel): void => {\n    const element = panelElement(panel);\n    const target = restoreTarget(panel, element);\n    if (target) {\n      target.focus();\n      return;\n    }\n    // An app that renders its restore control after this write has not\n    // produced it yet; look again once the current batch settles.\n    globalThis.queueMicrotask(() => {\n      if (!panel.collapsed.peek()) return;\n      const later = restoreTarget(panel, panelElement(panel));\n      const active = ownerDocument.activeElement;\n      if (later) later.focus();\n      else if (active instanceof HTMLElement && element?.contains(active))\n        active.blur();\n    });\n  };\n\n  /**\n   * A presentation-driven write: no collapse motion, because nothing the user\n   * did moved the panel. The app's render has normally applied the new state\n   * by the time the write returns, so the content's transition is suspended\n   * across one style flush.\n   */\n  const adapt = (\n    panel: WorkbenchOverlayPanel,\n    element: HTMLElement,\n    collapsed: boolean,\n  ): void => {\n    if (panel.collapsed.peek() === collapsed) return;\n    const stranded = collapsed && element.contains(ownerDocument.activeElement);\n    panel.collapsed.value = collapsed;\n    // Every Workbench panel renders its content wrapper, and never with a\n    // style of its own, so the attribute goes again once the flush is done.\n    const content = element.querySelector<HTMLElement>(\n      ':scope > .kui-workbench__panel-content',\n    )!;\n    content.style.transition = 'none';\n    void globalThis.getComputedStyle(content).transform;\n    content.removeAttribute('style');\n    // The collapse effect has normally returned the focus already; on\n    // disposal, after the effects are gone, this is what returns it.\n    if (stranded && element.contains(ownerDocument.activeElement))\n      rescueFocus(panel);\n  };\n\n  // The inline collapsed state of each panel whose responsive overlay\n  // currently applies, restored when it stops applying.\n  const inlineState = new Map<WorkbenchOverlayPanel, boolean>();\n  const sync = (): void => {\n    const workbench = findWorkbench();\n    const width = workbench?.getBoundingClientRect().width ?? 0;\n    for (const panel of panels) {\n      const element = panelElement(panel);\n      if (!element) continue;\n      // CSS container queries cannot take a runtime pixel value. For a\n      // numeric threshold the same measured Workbench width drives the CSS\n      // presentation hook and the collapsed-state transition below.\n      const at = Number(element.dataset.responsiveOverlayAt);\n      const custom =\n        element.dataset.responsiveOverlayAt !== undefined &&\n        Number.isFinite(at) &&\n        at > 0;\n      const customActive =\n        custom && element.dataset.presentation === 'inline' && width <= at;\n      if (customActive) {\n        if (element.dataset.responsiveOverlayActive !== 'true')\n          element.dataset.responsiveOverlayActive = 'true';\n      } else if (element.hasAttribute('data-responsive-overlay-active'))\n        element.removeAttribute('data-responsive-overlay-active');\n      const active = responsive(element);\n      if (active && !inlineState.has(panel)) {\n        inlineState.set(panel, panel.collapsed.peek());\n        adapt(panel, element, true);\n      } else if (!active && inlineState.has(panel)) {\n        const remembered = inlineState.get(panel)!;\n        inlineState.delete(panel);\n        adapt(panel, element, remembered);\n      }\n      // A signal write can patch or replace the panel synchronously. Preserve\n      // the measured presentation marker on the rendered element too.\n      const rendered = panelElement(panel);\n      if (\n        rendered &&\n        customActive &&\n        rendered.dataset.responsiveOverlayActive !== 'true'\n      )\n        rendered.dataset.responsiveOverlayActive = 'true';\n    }\n  };\n\n  // The Workbench is its own breakpoint container, so its size is what moves a\n  // panel across the breakpoint. It may render after wire-up or be replaced,\n  // and the app may change a presentation, so both are observed too.\n  let observed: HTMLElement | null = null;\n  const resizeObserver =\n    typeof globalThis.ResizeObserver === 'function'\n      ? new globalThis.ResizeObserver(() => sync())\n      : undefined;\n  /** Observe the current Workbench; whether it changed. */\n  const track = (): boolean => {\n    const workbench = findWorkbench();\n    if (workbench === observed) return false;\n    if (observed) resizeObserver?.unobserve(observed);\n    observed = workbench;\n    if (workbench) resizeObserver?.observe(workbench);\n    return true;\n  };\n  const mutationObserver = new MutationObserver((records) => {\n    if (track() || records.some((record) => record.type === 'attributes'))\n      sync();\n  });\n  mutationObserver.observe(root, {\n    attributes: true,\n    attributeFilter: [\n      'data-presentation',\n      'data-responsive-overlay-at',\n      'data-responsive-overlay-active',\n    ],\n    childList: true,\n    subtree: true,\n  });\n  // The breakpoints are in rem, so a root font-size change (a text-size\n  // setting applied after load) moves a panel across them without resizing\n  // the Workbench. A 1rem probe outside the app's tree reports that change.\n  const remProbe = ownerDocument.createElement('div');\n  remProbe.setAttribute('aria-hidden', 'true');\n  remProbe.style.cssText =\n    'position:absolute;width:1rem;height:0;overflow:hidden;visibility:hidden;pointer-events:none';\n  if (resizeObserver) {\n    ownerDocument.body.append(remProbe);\n    resizeObserver.observe(remProbe);\n  }\n  disposers.push(() => {\n    mutationObserver.disconnect();\n    resizeObserver?.disconnect();\n    remProbe.remove();\n  });\n  track();\n  sync();\n\n  for (const panel of panels) {\n    let previous = panel.collapsed.peek();\n    if (!previous) openOrder.push(panel);\n    disposers.push(\n      effect(() => {\n        const collapsed = panel.collapsed.value;\n        if (collapsed === previous) return;\n        previous = collapsed;\n        const index = openOrder.indexOf(panel);\n        if (index >= 0) openOrder.splice(index, 1);\n        if (collapsed) {\n          // Whatever closed the panel — Escape, an outside press, a\n          // breakpoint, or the app's own control inside it — focus left in\n          // it would be stranded in a hidden panel. So would focus that a\n          // press inside it dropped to the body (see `pressedFocus`).\n          const active = ownerDocument.activeElement;\n          const element = panelElement(panel);\n          if (\n            element?.contains(active) ||\n            // The panel's own control closed it (focused or not), so hand\n            // focus to the control that reopens it.\n            (activated !== undefined && element?.contains(activated)) ||\n            (pressedFocus === panel &&\n              (active === null || active === ownerDocument.body))\n          )\n            rescueFocus(panel);\n          return;\n        }\n        openOrder.push(panel);\n        const element = panelElement(panel);\n        const active = ownerDocument.activeElement;\n        if (\n          active instanceof HTMLElement &&\n          active !== ownerDocument.body &&\n          !element?.contains(active)\n        )\n          openers.set(panel, active);\n        else openers.delete(panel);\n        // A focused toggle the app's render removes as the panel opens — a\n        // Workbench toolbar toggle leaves the work-area toolbar for the\n        // panel's own — would drop focus to the body. Hand it to the panel's\n        // own control for it, so a keyboard user keeps their place. The\n        // render may land before this effect (the toggle is gone already, so\n        // the activated control stands in for the opener) or after it, in a\n        // microtask or a later frame.\n        const toggle =\n          openers.get(panel) ??\n          (activated && element && namesPanel(activated, element.id)\n            ? activated\n            : undefined);\n        if (toggle) {\n          const handOff = (frames: number): void => {\n            const focused = ownerDocument.activeElement;\n            if (panel.collapsed.peek()) return;\n            if (toggle.isConnected) {\n              if (toggle === focused && frames > 0)\n                globalThis.requestAnimationFrame(() => handOff(frames - 1));\n              return;\n            }\n            if (focused !== null && focused !== ownerDocument.body) return;\n            const current = panelElement(panel);\n            if (current) controlInside(current)?.focus({ preventScroll: true });\n          };\n          globalThis.queueMicrotask(() => handOff(5));\n        }\n        if (!element || !overlaid(element)) return;\n        // Opening an overlay closes the others. Their collapse effects run\n        // after this one, by which time focus has moved into this panel, so\n        // none of them hands it back to an opener.\n        if (exclusive)\n          for (const [other] of openOverlays())\n            if (other !== panel) other.collapsed.value = true;\n        // An overlay covers the work area, so focus moves in with it rather\n        // than staying on a control it may cover. Without preventScroll the\n        // browser scrolls the panel's clipped, still-sliding content to reveal\n        // the target, which then unwinds as the slide finishes.\n        (focusables(element)[0] ?? element).focus({ preventScroll: true });\n      }),\n    );\n  }\n\n  /** The open overlay panels with their elements, most recent last. */\n  const openOverlays = (): Array<[WorkbenchOverlayPanel, HTMLElement]> =>\n    openOrder.flatMap((panel): Array<[WorkbenchOverlayPanel, HTMLElement]> => {\n      const element = panelElement(panel);\n      return !panel.collapsed.peek() && element && overlaid(element)\n        ? [[panel, element]]\n        : [];\n    });\n\n  const inAllowedPortal = (\n    panel: WorkbenchOverlayPanel,\n    path: EventTarget[],\n  ): boolean => {\n    const keepOpenOn = panel.keepOpenOn;\n    return Boolean(\n      keepOpenOn &&\n      path.some((target) => target instanceof Node && keepOpenOn(target)),\n    );\n  };\n\n  const onKeydown = (event: KeyboardEvent): void => {\n    if (\n      (event.key !== 'Escape' && event.key !== 'Tab') ||\n      event.defaultPrevented\n    )\n      return;\n    const open = openOverlays();\n    if (open.length === 0) return;\n    // A dialog or menu launched from a panel owns its own keyboard handling.\n    if (open.some(([panel]) => inAllowedPortal(panel, event.composedPath())))\n      return;\n    const active = ownerDocument.activeElement;\n    const [panel, element] =\n      open.find(([, candidate]) => candidate.contains(active)) ??\n      open[open.length - 1]!;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      // The collapse effect returns focus stranded inside it.\n      panel.collapsed.value = true;\n      return;\n    }\n    // Tab stays inside the open overlay: it wraps at either end, and focus\n    // that is somewhere else (the app moved it, or the panel had no control\n    // to take it when it opened) comes back in.\n    const items = focusables(element);\n    if (items.length === 0) return;\n    const first = items[0]!;\n    const last = items[items.length - 1]!;\n    const inside = element.contains(active);\n    if (event.shiftKey && (!inside || active === first)) {\n      event.preventDefault();\n      last.focus();\n    } else if (!event.shiftKey && (!inside || active === last)) {\n      event.preventDefault();\n      first.focus();\n    }\n  };\n\n  // An outside press closes an open overlay when it both starts and ends\n  // outside it. Deciding at the click lets an app toggle that closes the panel\n  // run first, and a press that opens a panel never closes it.\n  let pressed: WorkbenchOverlayPanel[] = [];\n  const inside = (\n    panel: WorkbenchOverlayPanel,\n    element: HTMLElement,\n    path: EventTarget[],\n  ): boolean => path.includes(element) || inAllowedPortal(panel, path);\n  const onPointerdown = (event: PointerEvent): void => {\n    const path = event.composedPath();\n    pressed = openOverlays()\n      .filter(([panel, element]) => !inside(panel, element, path))\n      .map(([panel]) => panel);\n    // Before the press's default action moves focus: the open panel it\n    // started in, when focus was inside that panel too.\n    const active = ownerDocument.activeElement;\n    pressedFocus = panels.find((panel) => {\n      if (panel.collapsed.peek()) return false;\n      const element = panelElement(panel);\n      return !!element && path.includes(element) && element.contains(active);\n    });\n  };\n  // Focus landing anywhere is a deliberate move the rescue must not undo.\n  const onFocusin = (): void => {\n    pressedFocus = undefined;\n  };\n  const onClick = (event: MouseEvent): void => {\n    const candidates = pressed;\n    pressed = [];\n    const path = event.composedPath();\n    for (const [panel, element] of openOverlays())\n      if (candidates.includes(panel) && !inside(panel, element, path))\n        panel.collapsed.value = true;\n  };\n  const onActivate = (event: MouseEvent): void => {\n    const target = event.target;\n    const control =\n      target instanceof Element\n        ? target.closest<HTMLElement>('[aria-controls]')\n        : null;\n    // Recorded whether or not it took focus: Safari and macOS WebKit never\n    // focus a clicked button.\n    if (!control) return;\n    activated = control;\n    // The collapse effect may run after the click's dispatch (the app can\n    // batch its write), so keep the control for a couple of frames.\n    globalThis.requestAnimationFrame(() =>\n      globalThis.requestAnimationFrame(() => {\n        if (activated === control) activated = undefined;\n      }),\n    );\n  };\n  ownerDocument.addEventListener('keydown', onKeydown);\n  ownerDocument.addEventListener('pointerdown', onPointerdown, true);\n  ownerDocument.addEventListener('click', onActivate, true);\n  ownerDocument.addEventListener('click', onClick);\n  ownerDocument.addEventListener('focusin', onFocusin, true);\n  disposers.push(() => {\n    ownerDocument.removeEventListener('keydown', onKeydown);\n    ownerDocument.removeEventListener('pointerdown', onPointerdown, true);\n    ownerDocument.removeEventListener('click', onActivate, true);\n    ownerDocument.removeEventListener('click', onClick);\n    ownerDocument.removeEventListener('focusin', onFocusin, true);\n  });\n\n  return () => {\n    for (const dispose of disposers.splice(0)) dispose();\n    for (const panel of panels)\n      panelElement(panel)?.removeAttribute('data-responsive-overlay-active');\n    // After every observer and effect is gone, so handing the inline state\n    // back cannot re-enter the wiring.\n    for (const [panel, remembered] of inlineState) {\n      const element = panelElement(panel);\n      if (element) adapt(panel, element, remembered);\n      else panel.collapsed.value = remembered;\n    }\n    inlineState.clear();\n  };\n}\n","import { effect, type ReadonlySignal, type Signal } from 'kerfjs';\n\nimport type { DeviceClass } from './device-class.js';\nimport { type ResizeLimit, wireResizeHandles } from './resize-wiring.js';\nimport {\n  wireWorkbenchOverlays,\n  type WorkbenchOverlayPanel,\n} from './workbench-overlays.js';\nimport {\n  type WorkbenchPanelKey,\n  workbenchRegionId,\n} from './workbench-resize.js';\n\nexport type { WorkbenchPanelKey };\n\n/** Minimal `localStorage`-shaped store, so the persistence hook is testable. */\nexport interface WorkbenchStorage {\n  getItem(key: string): string | null;\n  setItem(key: string, value: string): void;\n}\n\n/** One Workbench panel's app-owned state. */\nexport interface WireWorkbenchPanel {\n  /**\n   * The app-owned size signal a `resizable` panel renders as its `size`.\n   * `wireWorkbench` writes each committed resize here; collapsing never\n   * touches it, so an expanded panel returns at the size it had. Omit it for\n   * a panel that is not resizable.\n   */\n  size?: Signal<number>;\n  /**\n   * When set with `size`, the size is loaded from and saved to `storage`\n   * under this key, so the panel remembers the user's size.\n   */\n  storageKey?: string;\n  /**\n   * The app-owned signal the panel renders as its `collapsed`. With it (and\n   * `dismissOverlays`, on by default) `wireWorkbench` treats the panel as a\n   * transient overlay while it presents as one: it collapses when its\n   * `responsiveOverlayAt` breakpoint begins to apply and gets its inline state\n   * back when the breakpoint stops applying, an open overlay takes focus and\n   * keeps Tab inside it, and it closes on Escape or a press outside it.\n   */\n  collapsed?: Signal<boolean>;\n  /**\n   * Treat presses in a portal surface launched by this panel (for example a\n   * body-level menu or dialog) as inside it. The predicate receives each Node\n   * in the press's composed path; return true for the portal root. Ordinary\n   * presses outside the panel and its allowed surfaces still dismiss it.\n   */\n  keepOpenOn?: (target: Node) => boolean;\n}\n\n/** A resize the user made, after `wireWorkbench` wrote it to the size signal. */\nexport interface WorkbenchResize {\n  panel: WorkbenchPanelKey;\n  size: number;\n  source: 'keyboard' | 'pointer';\n}\n\nexport interface WireWorkbenchOptions {\n  /** The `id` the `Workbench` was rendered with. */\n  id: string;\n  /**\n   * The wired panels, keyed like the `Workbench` props. Render a panel given\n   * a `size` with `resizable` and `size={panel.size.value}`, and one given a\n   * `collapsed` signal with `collapsed={panel.collapsed.value}`.\n   */\n  panels: Partial<Record<WorkbenchPanelKey, WireWorkbenchPanel>>;\n  /**\n   * When provided, resizing is suspended while `deviceClass.compact` is true —\n   * the classes where rails become overlay drawers or are replaced.\n   */\n  deviceClass?: ReadonlySignal<DeviceClass>;\n  /** Persistence store (default `globalThis.localStorage`, if present). */\n  storage?: WorkbenchStorage;\n  /** Keyboard step in px (default 16). */\n  step?: number;\n  /** Shift+arrow step in px (default 64). */\n  largeStep?: number;\n  /** Called after each committed resize. */\n  onResize?: (change: WorkbenchResize) => void;\n  /**\n   * Treat the panels given a `collapsed` signal as transient overlays while\n   * they present as overlays (default `true`), like `wireSidebar`'s compact\n   * overlay: a panel whose `responsiveOverlayAt` breakpoint begins to apply\n   * starts collapsed, with no collapse motion, and gets its inline collapsed\n   * state back when the breakpoint stops applying (and on disposal); an open\n   * overlay panel, responsive or `presentation: \"overlay\"`, closes on Escape\n   * or a press that starts and ends outside it. A panel that opens as an\n   * overlay takes focus on its first focusable control, and while it is open\n   * Tab and Shift+Tab cycle through its controls instead of reaching the\n   * work area it covers (the ARIA dialog pattern of `wireSidebar`'s compact\n   * overlay); inline panels never move focus. Focus stranded in a closing\n   * panel — however it closed, the app's own control inside it included —\n   * returns to the control that had it when the panel opened, else to the\n   * panel's restore control, else to a control outside the panel whose\n   * `aria-controls` names it (each panel's `id` is its region id, e.g.\n   * `studio-left-rail`) — the fallback for a panel already open at wire-up.\n   * An opener inside a panel that has closed since is skipped. `false` leaves\n   * every `collapsed` write and all focus handling to the app.\n   */\n  dismissOverlays?: boolean;\n  /**\n   * Keep overlays exclusive (default `true`), like `wireSidebar`'s\n   * `exclusiveCompact`: when a panel opens while it presents as an overlay,\n   * every other open overlay panel — rails and the bottom drawer alike —\n   * closes, so one overlay never covers another's controls. Panels presenting\n   * inline are never closed by it. Applies only with `dismissOverlays`.\n   */\n  exclusiveOverlays?: boolean;\n}\n\nfunction defaultStorage(): WorkbenchStorage | undefined {\n  try {\n    return globalThis.localStorage ?? undefined;\n  } catch {\n    return undefined;\n  }\n}\n\n/** A stored size, or undefined when the stored text is not a usable size. */\nfunction storedSize(text: string | null) {\n  if (text === null) return undefined;\n  const size = Number(text);\n  return Number.isFinite(size) && size > 0 ? Math.round(size) : undefined;\n}\n\n/** A double-quoted CSS attribute-selector value. */\nconst quoted = (value: string) =>\n  `\"${value.replaceAll('\\\\', '\\\\\\\\').replaceAll('\"', '\\\\\"')}\"`;\n\nconst px = (value: string) => Number.parseFloat(value) || 0;\n\n/**\n * The largest size a resizable panel may take while the work area keeps its\n * minimum: for a rail, its minimum width (the Workbench's `mainMinSize`,\n * rendered as `data-main-min-size`) — the Workbench width, less that minimum,\n * the other in-flow rails as shown, and the rail's own safe-area extent and\n * border; for the bottom drawer, its minimum height (`mainMinHeight`, rendered\n * as `data-main-min-height`) — the work-area column's height, less that\n * minimum and the drawer's own safe-area extent and border. A panel the\n * container has already squeezed is held at the size it shows, so it can\n * shrink but not grow. Without layout (no box yet) or a minimum, the panel's\n * own maximum stands.\n */\nconst mainRoomLimit: ResizeLimit = (region, { max }) => {\n  const horizontal = region.dataset.axis === 'horizontal';\n  // A rail's parent is the Workbench; the drawer's is the work-area column.\n  const container = region.parentElement;\n  const workbench = horizontal ? container : container?.parentElement;\n  const mainMin = Number(\n    horizontal\n      ? workbench?.dataset.mainMinSize\n      : workbench?.dataset.mainMinHeight,\n  );\n  if (!container || !(mainMin > 0)) return max;\n  const box = container.getBoundingClientRect();\n  const room = horizontal ? box.width : box.height;\n  if (room <= 0) return max;\n  let others = 0;\n  if (horizontal)\n    for (const rail of container.children) {\n      if (\n        rail === region ||\n        !rail.matches('.kui-workbench__rail') ||\n        globalThis.getComputedStyle(rail).position === 'absolute'\n      )\n        continue;\n      others += rail.getBoundingClientRect().width;\n    }\n  const style = globalThis.getComputedStyle(region);\n  const size = px(region.style.getPropertyValue('--kui-resizable-region-size'));\n  const border =\n    style.boxSizing === 'border-box'\n      ? 0\n      : horizontal\n        ? px(style.borderInlineStartWidth) + px(style.borderInlineEndWidth)\n        : px(style.borderBlockStartWidth) + px(style.borderBlockEndWidth);\n  // The track is the size plus the panel's safe-area extent (its flex basis).\n  const extent = px(style.flexBasis) - size + border;\n  return Math.floor(room - Math.min(mainMin, room) - others - extent);\n};\n\n/**\n * Wire a `Workbench`'s panels. For `resizable` panels given a `size` signal:\n * pointer drags and arrow / Shift+arrow / Home / End on each panel's\n * separator, clamped to the panel's limits and to the room that leaves the\n * work area its minimum width and height, committed to the app-owned size signals.\n * Optional persistence loads and saves each size; optional `deviceClass`\n * suspends resizing on compact classes. Collapse stays the app's `collapsed`\n * flag and never changes a size. For panels given a `collapsed` signal,\n * overlays are transient (`dismissOverlays`): a responsive overlay starts\n * collapsed, an open overlay takes focus and keeps Tab inside it, it closes\n * on Escape or an outside press, and\n * opening one overlay closes the others (`exclusiveOverlays`). Returns a disposer. See `docs/23-app-layouts.md` §3.3.\n */\nexport function wireWorkbench(\n  root: HTMLElement,\n  {\n    id,\n    panels,\n    deviceClass,\n    storage = defaultStorage(),\n    step,\n    largeStep,\n    onResize,\n    dismissOverlays = true,\n    exclusiveOverlays = true,\n  }: WireWorkbenchOptions,\n): () => void {\n  const keys = Object.keys(panels) as WorkbenchPanelKey[];\n  const entries = keys.flatMap((key) => {\n    const size = panels[key]?.size;\n    return size\n      ? [\n          {\n            key,\n            size,\n            storageKey: panels[key]!.storageKey,\n            regionId: workbenchRegionId(id, key),\n          },\n        ]\n      : [];\n  });\n  const byRegion = new Map(entries.map((entry) => [entry.regionId, entry]));\n  const disposers: Array<() => void> = [];\n\n  // Seed from storage before any effect runs, so the first render after\n  // wire-up already has the remembered size; then mirror every size change.\n  for (const { size, storageKey } of entries) {\n    if (!storageKey || !storage) continue;\n    const seed = storedSize(storage.getItem(storageKey));\n    if (seed !== undefined) size.value = seed;\n    disposers.push(\n      effect(() => {\n        storage.setItem(storageKey, String(size.value));\n      }),\n    );\n  }\n\n  // Each panel is matched by its own region id, so this wiring never drives a\n  // ResizableRegion or another Workbench below the same root.\n  const selector = entries\n    .map(\n      ({ regionId }) =>\n        `[data-resizable=\"true\"][data-region-id=${quoted(regionId)}]`,\n    )\n    .join(', ');\n  const start = () =>\n    wireResizeHandles(\n      root,\n      {\n        step,\n        largeStep,\n        onCommit: ({ id: regionId, size, source }) => {\n          // The selector only matches configured panels.\n          const entry = byRegion.get(regionId)!;\n          entry.size.value = size;\n          onResize?.({ panel: entry.key, size, source });\n        },\n      },\n      selector,\n      mainRoomLimit,\n    );\n\n  let stopResize: (() => void) | undefined;\n  if (selector) {\n    if (deviceClass) {\n      disposers.push(\n        effect(() => {\n          const compact = deviceClass.value.compact;\n          stopResize?.();\n          stopResize = compact ? undefined : start();\n        }),\n      );\n    } else {\n      stopResize = start();\n    }\n  }\n\n  const overlayPanels = keys.flatMap((key): WorkbenchOverlayPanel[] => {\n    const collapsed = panels[key]?.collapsed;\n    return collapsed\n      ? [{ key, collapsed, keepOpenOn: panels[key]?.keepOpenOn }]\n      : [];\n  });\n  if (dismissOverlays && overlayPanels.length > 0) {\n    const selector = `[data-component=\"workbench\"][id=${quoted(id)}]`;\n    disposers.push(\n      wireWorkbenchOverlays(\n        root,\n        () =>\n          root.matches(selector)\n            ? root\n            : root.querySelector<HTMLElement>(selector),\n        overlayPanels,\n        exclusiveOverlays,\n      ),\n    );\n  }\n\n  return () => {\n    stopResize?.();\n    stopResize = undefined;\n    for (const dispose of disposers.splice(0)) dispose();\n  };\n}\n"]}