@kerfjs/ui 5.0.0-beta.104 → 5.0.0-beta.106

package/dist/{wire-token-search-fields.js.map → wire-choice-chips.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"wire-token-search-fields.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"wire-choice-chips.js"}

package/dist/wire-color-fields.d.ts

@@ -0,0 +1,33 @@
+import { ColorPickerMode, ColorPickerProps } from './color-picker.js';
+import 'kerfjs';
+import './color-swatches.js';
+import './css-values.js';
+
+/** Reported to {@link WireColorFieldsOptions.onInput} and `onChange`. */
+interface ColorFieldChange {
+    id: string;
+    /** `#rrggbb`, or `#rrggbbaa` below full opacity. */
+    value: string;
+    mode: ColorPickerMode;
+}
+/** The picker options a field's popup takes beyond its value, model, and opacity. */
+type ColorFieldPickerOptions = Pick<ColorPickerProps, 'presets' | 'samples' | 'addSampleAction' | 'eyedropper'>;
+interface WireColorFieldsOptions {
+    /** Every live edit in the open picker. */
+    onInput?: (change: ColorFieldChange) => void;
+    /** A committed edit: apply it and re-render the ColorField with it. */
+    onChange?: (change: ColorFieldChange) => void;
+    /** Per-field picker options (presets, samples, the sampler), keyed by field id. */
+    pickers?: Readonly<Record<string, ColorFieldPickerOptions>>;
+}
+/**
+ * Wire every ColorField under `root`: pressing a field's trigger opens a
+ * ColorPicker in an AnchoredSurface below it, with the field's value, model,
+ * and opacity, plus any `pickers[id]` options. Edits preview at once on the
+ * trigger's swatch and hex and go to `onInput`; committed edits go to
+ * `onChange`. Escape or a press outside closes the picker and returns focus
+ * to the trigger. Returns a disposer that also closes an open picker.
+ */
+declare function wireColorFields(root: HTMLElement, { onInput, onChange, pickers }?: WireColorFieldsOptions): () => void;
+
+export { type ColorFieldChange, type ColorFieldPickerOptions, type WireColorFieldsOptions, wireColorFields };

package/dist/wire-color-fields.js

@@ -0,0 +1,82 @@
+import { wireColorPickers } from './chunk-ACUKTVS3.js';
+import { ColorPicker } from './chunk-EKBMUXFV.js';
+
+
+import { openAnchoredSurface } from './chunk-3WYREXW4.js';
+
+
+
+import { signal } from 'kerfjs';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+function wireColorFields(root, { onInput, onChange, pickers = {} } = {}) {
+  const open = /* @__PURE__ */ new Map();
+  const preview = (field, value) => {
+    field.querySelector(".kui-color-field__swatch").style.setProperty("--_kui-color-field-color", value);
+    field.querySelector(".kui-color-field__hex").textContent = value.slice(1).toUpperCase();
+    const hidden = field.querySelector(
+      'input[type="hidden"]'
+    );
+    if (hidden) hidden.value = value;
+  };
+  const onClick = (event) => {
+    const trigger = event.target.closest(
+      ".kui-color-field__trigger"
+    );
+    const field = trigger?.closest(
+      '[data-component="color-field"]'
+    );
+    if (!trigger || !field || trigger.disabled || open.has(field)) return;
+    const id = field.dataset.colorFieldId;
+    const value = signal(field.dataset.value);
+    const mode = signal(field.dataset.mode);
+    const label = root.ownerDocument.getElementById(`${id}-label`)?.textContent?.trim() || "Color";
+    const handle = openAnchoredSurface(
+      trigger,
+      () => /* @__PURE__ */ jsx(
+        ColorPicker,
+        {
+          ...pickers[id],
+          id: `${id}-picker`,
+          label,
+          value: value.value,
+          mode: mode.value,
+          alpha: field.hasAttribute("data-alpha")
+        }
+      ),
+      { label, placement: "bottom", align: "start" }
+    );
+    trigger.setAttribute("aria-expanded", "true");
+    const report = (committed) => (change) => {
+      preview(field, change.value);
+      const payload = { id, value: change.value, mode: change.mode };
+      if (committed) {
+        field.dataset.value = change.value;
+        field.dataset.mode = change.mode;
+        value.value = change.value;
+        mode.value = change.mode;
+        onChange?.(payload);
+      } else onInput?.(payload);
+    };
+    const stopPicker = wireColorPickers(handle.el, {
+      onInput: report(false),
+      onChange: report(true)
+    });
+    const close = () => handle.close();
+    open.set(field, close);
+    void handle.result.then(() => {
+      stopPicker();
+      open.delete(field);
+      trigger.setAttribute("aria-expanded", "false");
+    });
+  };
+  root.addEventListener("click", onClick);
+  return () => {
+    root.removeEventListener("click", onClick);
+    for (const close of open.values()) close();
+  };
+}
+
+export { wireColorFields };
+
+//# sourceMappingURL=wire-color-fields.js.map

package/dist/wire-color-fields.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/color-field/wiring/wire-color-fields.tsx"],"names":[],"mappings":";;;;;;;;;;;AAyCO,SAAS,eAAA,CACd,IAAA,EACA,EAAE,OAAA,EAAS,QAAA,EAAU,UAAU,EAAC,EAAE,GAA4B,EAAC,EACnD;AACZ,EAAA,MAAM,IAAA,uBAAW,GAAA,EAA6B;AAE9C,EAAA,MAAM,OAAA,GAAU,CAAC,KAAA,EAAoB,KAAA,KAAkB;AACrD,IAAA,KAAA,CACG,cAA2B,0BAA0B,CAAA,CACrD,KAAA,CAAM,WAAA,CAAY,4BAA4B,KAAK,CAAA;AACtD,IAAA,KAAA,CAAM,aAAA,CAAc,uBAAuB,CAAA,CAAG,WAAA,GAAc,MACzD,KAAA,CAAM,CAAC,EACP,WAAA,EAAY;AACf,IAAA,MAAM,SAAS,KAAA,CAAM,aAAA;AAAA,MACnB;AAAA,KACF;AACA,IAAA,IAAI,MAAA,SAAe,KAAA,GAAQ,KAAA;AAAA,EAC7B,CAAA;AAEA,EAAA,MAAM,OAAA,GAAU,CAAC,KAAA,KAAsB;AACrC,IAAA,MAAM,OAAA,GAAW,MAAM,MAAA,CAAmB,OAAA;AAAA,MACxC;AAAA,KACF;AACA,IAAA,MAAM,QAAQ,OAAA,EAAS,OAAA;AAAA,MACrB;AAAA,KACF;AACA,IAAA,IAAI,CAAC,WAAW,CAAC,KAAA,IAAS,QAAQ,QAAA,IAAY,IAAA,CAAK,GAAA,CAAI,KAAK,CAAA,EAAG;AAC/D,IAAA,MAAM,EAAA,GAAK,MAAM,OAAA,CAAQ,YAAA;AACzB,IAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,KAAA,CAAM,OAAA,CAAQ,KAAM,CAAA;AACzC,IAAA,MAAM,IAAA,GAAO,MAAA,CAAO,KAAA,CAAM,OAAA,CAAQ,IAAuB,CAAA;AACzD,IAAA,MAAM,KAAA,GACJ,IAAA,CAAK,aAAA,CAAc,cAAA,CAAe,CAAA,EAAG,EAAE,CAAA,MAAA,CAAQ,CAAA,EAAG,WAAA,EAAa,IAAA,EAAK,IACpE,OAAA;AACF,IAAA,MAAM,MAAA,GAAS,mBAAA;AAAA,MACb,OAAA;AAAA,MACA,sBACE,GAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACE,GAAG,QAAQ,EAAE,CAAA;AAAA,UACd,EAAA,EAAI,GAAG,EAAE,CAAA,OAAA,CAAA;AAAA,UACT,KAAA;AAAA,UACA,OAAO,KAAA,CAAM,KAAA;AAAA,UACb,MAAM,IAAA,CAAK,KAAA;AAAA,UACX,KAAA,EAAO,KAAA,CAAM,YAAA,CAAa,YAAY;AAAA;AAAA,OACxC;AAAA,MAEF,EAAE,KAAA,EAAO,SAAA,EAAW,QAAA,EAAU,OAAO,OAAA;AAAQ,KAC/C;AACA,IAAA,OAAA,CAAQ,YAAA,CAAa,iBAAiB,MAAM,CAAA;AAC5C,IAAA,MAAM,MAAA,GACJ,CAAC,SAAA,KACD,CAAC,MAAA,KAAqD;AACpD,MAAA,OAAA,CAAQ,KAAA,EAAO,OAAO,KAAK,CAAA;AAC3B,MAAA,MAAM,OAAA,GAAU,EAAE,EAAA,EAAI,KAAA,EAAO,OAAO,KAAA,EAAO,IAAA,EAAM,OAAO,IAAA,EAAK;AAC7D,MAAA,IAAI,SAAA,EAAW;AAEb,QAAA,KAAA,CAAM,OAAA,CAAQ,QAAQ,MAAA,CAAO,KAAA;AAC7B,QAAA,KAAA,CAAM,OAAA,CAAQ,OAAO,MAAA,CAAO,IAAA;AAC5B,QAAA,KAAA,CAAM,QAAQ,MAAA,CAAO,KAAA;AACrB,QAAA,IAAA,CAAK,QAAQ,MAAA,CAAO,IAAA;AACpB,QAAA,QAAA,GAAW,OAAO,CAAA;AAAA,MACpB,CAAA,gBAAiB,OAAO,CAAA;AAAA,IAC1B,CAAA;AACF,IAAA,MAAM,UAAA,GAAa,gBAAA,CAAiB,MAAA,CAAO,EAAA,EAAI;AAAA,MAC7C,OAAA,EAAS,OAAO,KAAK,CAAA;AAAA,MACrB,QAAA,EAAU,OAAO,IAAI;AAAA,KACtB,CAAA;AACD,IAAA,MAAM,KAAA,GAAQ,MAAM,MAAA,CAAO,KAAA,EAAM;AACjC,IAAA,IAAA,CAAK,GAAA,CAAI,OAAO,KAAK,CAAA;AACrB,IAAA,KAAK,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,MAAM;AAC5B,MAAA,UAAA,EAAW;AACX,MAAA,IAAA,CAAK,OAAO,KAAK,CAAA;AACjB,MAAA,OAAA,CAAQ,YAAA,CAAa,iBAAiB,OAAO,CAAA;AAAA,IAC/C,CAAC,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,IAAA,CAAK,gBAAA,CAAiB,SAAS,OAAO,CAAA;AACtC,EAAA,OAAO,MAAM;AACX,IAAA,IAAA,CAAK,mBAAA,CAAoB,SAAS,OAAO,CAAA;AACzC,IAAA,KAAA,MAAW,KAAA,IAAS,IAAA,CAAK,MAAA,EAAO,EAAG,KAAA,EAAM;AAAA,EAC3C,CAAA;AACF","file":"wire-color-fields.js","sourcesContent":["import { signal } from 'kerfjs';\n\nimport { openAnchoredSurface } from '../../../feedback/anchored-surface/anchored-surface.js';\nimport {\n  ColorPicker,\n  type ColorPickerMode,\n  type ColorPickerProps,\n} from '../../color-picker/color-picker.js';\nimport { wireColorPickers } from '../../color-picker/wiring/wire-color-pickers.js';\n\n/** Reported to {@link WireColorFieldsOptions.onInput} and `onChange`. */\nexport interface ColorFieldChange {\n  id: string;\n  /** `#rrggbb`, or `#rrggbbaa` below full opacity. */\n  value: string;\n  mode: ColorPickerMode;\n}\n\n/** The picker options a field's popup takes beyond its value, model, and opacity. */\nexport type ColorFieldPickerOptions = Pick<\n  ColorPickerProps,\n  'presets' | 'samples' | 'addSampleAction' | 'eyedropper'\n>;\n\nexport interface WireColorFieldsOptions {\n  /** Every live edit in the open picker. */\n  onInput?: (change: ColorFieldChange) => void;\n  /** A committed edit: apply it and re-render the ColorField with it. */\n  onChange?: (change: ColorFieldChange) => void;\n  /** Per-field picker options (presets, samples, the sampler), keyed by field id. */\n  pickers?: Readonly<Record<string, ColorFieldPickerOptions>>;\n}\n\n/**\n * Wire every ColorField under `root`: pressing a field's trigger opens a\n * ColorPicker in an AnchoredSurface below it, with the field's value, model,\n * and opacity, plus any `pickers[id]` options. Edits preview at once on the\n * trigger's swatch and hex and go to `onInput`; committed edits go to\n * `onChange`. Escape or a press outside closes the picker and returns focus\n * to the trigger. Returns a disposer that also closes an open picker.\n */\nexport function wireColorFields(\n  root: HTMLElement,\n  { onInput, onChange, pickers = {} }: WireColorFieldsOptions = {},\n): () => void {\n  const open = new Map<HTMLElement, () => void>();\n\n  const preview = (field: HTMLElement, value: string) => {\n    field\n      .querySelector<HTMLElement>('.kui-color-field__swatch')!\n      .style.setProperty('--_kui-color-field-color', value);\n    field.querySelector('.kui-color-field__hex')!.textContent = value\n      .slice(1)\n      .toUpperCase();\n    const hidden = field.querySelector<HTMLInputElement>(\n      'input[type=\"hidden\"]',\n    );\n    if (hidden) hidden.value = value;\n  };\n\n  const onClick = (event: MouseEvent) => {\n    const trigger = (event.target as Element).closest<HTMLButtonElement>(\n      '.kui-color-field__trigger',\n    );\n    const field = trigger?.closest<HTMLElement>(\n      '[data-component=\"color-field\"]',\n    );\n    if (!trigger || !field || trigger.disabled || open.has(field)) return;\n    const id = field.dataset.colorFieldId!;\n    const value = signal(field.dataset.value!);\n    const mode = signal(field.dataset.mode as ColorPickerMode);\n    const label =\n      root.ownerDocument.getElementById(`${id}-label`)?.textContent?.trim() ||\n      'Color';\n    const handle = openAnchoredSurface(\n      trigger,\n      () => (\n        <ColorPicker\n          {...pickers[id]}\n          id={`${id}-picker`}\n          label={label}\n          value={value.value}\n          mode={mode.value}\n          alpha={field.hasAttribute('data-alpha')}\n        />\n      ),\n      { label, placement: 'bottom', align: 'start' },\n    );\n    trigger.setAttribute('aria-expanded', 'true');\n    const report =\n      (committed: boolean) =>\n      (change: { value: string; mode: ColorPickerMode }) => {\n        preview(field, change.value);\n        const payload = { id, value: change.value, mode: change.mode };\n        if (committed) {\n          // Until the app re-renders, the next open starts from this edit.\n          field.dataset.value = change.value;\n          field.dataset.mode = change.mode;\n          value.value = change.value;\n          mode.value = change.mode;\n          onChange?.(payload);\n        } else onInput?.(payload);\n      };\n    const stopPicker = wireColorPickers(handle.el, {\n      onInput: report(false),\n      onChange: report(true),\n    });\n    const close = () => handle.close();\n    open.set(field, close);\n    void handle.result.then(() => {\n      stopPicker();\n      open.delete(field);\n      trigger.setAttribute('aria-expanded', 'false');\n    });\n  };\n\n  root.addEventListener('click', onClick);\n  return () => {\n    root.removeEventListener('click', onClick);\n    for (const close of open.values()) close();\n  };\n}\n"]}

package/dist/wire-color-pickers.d.ts

@@ -0,0 +1,34 @@
+import { ColorPickerMode } from './color-picker.js';
+import 'kerfjs';
+import './color-swatches.js';
+import './css-values.js';
+
+/** Reported to {@link WireColorPickersOptions.onInput} and `onChange`. */
+interface ColorPickerChange {
+    id: string;
+    /** `#rrggbb`, or `#rrggbbaa` below full opacity. */
+    value: string;
+    mode: ColorPickerMode;
+    element: HTMLElement;
+}
+interface WireColorPickersOptions {
+    /** Every live change: a drag, an arrow key, a field edit. */
+    onInput?: (change: ColorPickerChange) => void;
+    /** A committed change: a drag or key run ending, a field or swatch commit, a mode switch. */
+    onChange?: (change: ColorPickerChange) => void;
+}
+/**
+ * Make every ColorPicker under `root` interactive. The area takes pointer
+ * drags and the arrow keys (Shift for steps of 10%); the hue and opacity
+ * sliders are native ranges; channel, hex, and opacity fields commit on Enter
+ * or blur; the model menu switches the channel fields; the screen sampler
+ * opens the EyeDropper where the browser has it; preset and sample swatches
+ * apply their color. Each change updates the picker at once, dispatches a
+ * bubbling `kui-color-input` (or `kui-color-change` when committed) event
+ * with `{ value, mode }`, and calls `onInput` / `onChange`. When the app
+ * re-renders a picker with a different `value`, the picker adopts it.
+ * Returns a disposer.
+ */
+declare function wireColorPickers(root: HTMLElement, { onInput, onChange }?: WireColorPickersOptions): () => void;
+
+export { type ColorPickerChange, type WireColorPickersOptions, wireColorPickers };

package/dist/wire-color-pickers.js

@@ -0,0 +1,9 @@
+export { wireColorPickers } from './chunk-ACUKTVS3.js';
+
+
+
+
+
+
+
+//# sourceMappingURL=wire-color-pickers.js.map

package/dist/wire-color-pickers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"wire-color-pickers.js"}

package/dist/wire-comboboxes.js

@@ -1,3 +1,4 @@
-export { wireComboboxes } from './chunk-FDZNYD4C.js';
+export { wireComboboxes } from './chunk-GCAK23PU.js';
+
 
 //# sourceMappingURL=wire-comboboxes.js.map

package/dist/wire-content-items.d.ts

@@ -4,7 +4,11 @@ declare function isContentItemActivation(event: Event, item: HTMLElement): boole
  * Give interactive ContentItems native-like Enter/Space activation with one
  * delegated listener pair. Space activates on release and is cancelled if
  * focus moves; the item's own `data-action` still goes through the app's
- * ordinary delegated click handler. Returns a disposer.
+ * ordinary delegated click handler. The activation click mirrors the Shift,
+ * Ctrl, and Meta state of the activating key (Space uses the state at press),
+ * so the click handler can read `shiftKey` / `metaKey` / `ctrlKey` for
+ * keyboard range and toggle selection. Alt-modified keys are left to the
+ * platform. Returns a disposer.
  */
 declare function wireContentItems(root: HTMLElement): () => void;
 

package/dist/wire-content-items.js

@@ -2,6 +2,14 @@
 var ITEM_SELECTOR = '[data-component="content-item"][data-interactive="true"]';
 var NESTED_CONTROL_SELECTOR = 'button, a[href], input, select, textarea, [contenteditable="true"], [role="button"]';
 var MULTI_GRID_SELECTOR = '[role="grid"][aria-multiselectable="true"]';
+var MULTI_ROW_SELECTOR = `${ITEM_SELECTOR}[data-selection-mode="multiple"]`;
+function gridRows(grid) {
+  return Array.from(
+    grid.querySelectorAll(
+      `${MULTI_ROW_SELECTOR}:not([data-disabled="true"])`
+    )
+  ).filter((row) => row.closest(MULTI_GRID_SELECTOR) === grid);
+}
 function nextTile(item, rows, key) {
   const current = item.getBoundingClientRect();
   const centerX = current.left + current.width / 2;
@@ -46,18 +54,73 @@ function actionItem(root, event) {
 function isContentItemActivation(event, item) {
   return actionItem(item, event) === item;
 }
+function activate(item, modifiers) {
+  item.dispatchEvent(
+    new MouseEvent("click", {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      view: item.ownerDocument.defaultView,
+      shiftKey: modifiers.shiftKey,
+      ctrlKey: modifiers.ctrlKey,
+      metaKey: modifiers.metaKey
+    })
+  );
+}
 function wireContentItems(root) {
+  const activeRows = /* @__PURE__ */ new WeakMap();
+  const rove = (grid) => {
+    const rows = gridRows(grid);
+    const remembered = activeRows.get(grid);
+    const stop = remembered && rows.includes(remembered) ? remembered : rows.find((row) => row.getAttribute("aria-selected") === "true") ?? rows[0];
+    for (const row of rows) {
+      const want = row === stop ? "0" : "-1";
+      if (row.getAttribute("tabindex") !== want)
+        row.setAttribute("tabindex", want);
+    }
+  };
+  const grids = () => [
+    ...root.matches(MULTI_GRID_SELECTOR) ? [root] : [],
+    ...root.querySelectorAll(MULTI_GRID_SELECTOR)
+  ];
+  let roving = false;
+  const scheduleRove = () => {
+    if (roving) return;
+    roving = true;
+    globalThis.queueMicrotask(() => {
+      roving = false;
+      for (const grid of grids()) rove(grid);
+    });
+  };
+  const View = root.ownerDocument.defaultView;
+  const observer = View && "MutationObserver" in View ? new View.MutationObserver(scheduleRove) : null;
+  observer?.observe(root, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["tabindex", "aria-selected", "data-disabled"]
+  });
+  for (const grid of grids()) rove(grid);
+  const focusin = (event) => {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    const row = target.closest(MULTI_ROW_SELECTOR);
+    const grid = row?.closest(MULTI_GRID_SELECTOR);
+    if (!row || !grid || !root.contains(grid)) return;
+    activeRows.set(grid, row);
+    rove(grid);
+  };
   let pendingSpace = null;
   const clearSpace = () => {
-    pendingSpace?.removeAttribute("data-kui-pressed");
+    pendingSpace?.item.removeAttribute("data-kui-pressed");
     pendingSpace = null;
   };
   const keydown = (event) => {
-    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey)
-      return;
+    if (event.defaultPrevented || event.altKey) return;
     const item = actionItem(root, event);
     if (!item) return;
-    if (item.dataset.selectionMode === "multiple" && [
+    const commandKey = event.ctrlKey || event.metaKey;
+    if (!commandKey && item.dataset.selectionMode === "multiple" && [
       "ArrowDown",
       "ArrowUp",
       "ArrowLeft",
@@ -67,11 +130,7 @@ function wireContentItems(root) {
     ].includes(event.key)) {
       const grid = item.closest(MULTI_GRID_SELECTOR);
       if (!grid) return;
-      const rows = Array.from(
-        grid.querySelectorAll(
-          `${ITEM_SELECTOR}[data-selection-mode="multiple"]:not([data-disabled="true"])`
-        )
-      ).filter((row) => row.closest(MULTI_GRID_SELECTOR) === grid);
+      const rows = gridRows(grid);
       const index = rows.indexOf(item);
       if (index < 0) return;
       const isTileGrid = grid.getAttribute("data-component") === "grid";
@@ -100,34 +159,44 @@ function wireContentItems(root) {
     }
     if (event.key === "Enter") {
       event.preventDefault();
-      item.click();
+      activate(item, event);
       return;
     }
     if (event.key === " " || event.key === "Spacebar") {
       event.preventDefault();
       if (event.repeat) return;
       clearSpace();
-      pendingSpace = item;
+      pendingSpace = {
+        item,
+        modifiers: {
+          shiftKey: event.shiftKey,
+          ctrlKey: event.ctrlKey,
+          metaKey: event.metaKey
+        }
+      };
       item.setAttribute("data-kui-pressed", "true");
     }
   };
   const keyup = (event) => {
     if (event.key !== " " && event.key !== "Spacebar") return;
-    const item = pendingSpace;
-    if (!item) return;
+    if (!pendingSpace) return;
+    const { item, modifiers } = pendingSpace;
     event.preventDefault();
     clearSpace();
     if (item === actionItem(root, event) && item.ownerDocument.activeElement === item)
-      item.click();
+      activate(item, modifiers);
   };
   const focusout = (event) => {
-    if (event.target === pendingSpace) clearSpace();
+    if (event.target === pendingSpace?.item) clearSpace();
   };
   root.addEventListener("keydown", keydown);
   root.addEventListener("keyup", keyup);
   root.addEventListener("focusout", focusout);
+  root.addEventListener("focusin", focusin);
   return () => {
     clearSpace();
+    observer?.disconnect();
+    root.removeEventListener("focusin", focusin);
     root.removeEventListener("keydown", keydown);
     root.removeEventListener("keyup", keyup);
     root.removeEventListener("focusout", focusout);

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/surfaces/content-item/wiring/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\"]';\nconst MULTI_GRID_SELECTOR = '[role=\"grid\"][aria-multiselectable=\"true\"]';\n\nfunction nextTile(\n  item: HTMLElement,\n  rows: HTMLElement[],\n  key: string,\n): HTMLElement | undefined {\n  const current = item.getBoundingClientRect();\n  const centerX = current.left + current.width / 2;\n  const candidates = rows\n    .filter((row) => row !== item)\n    .map((row) => {\n      const rect = row.getBoundingClientRect();\n      return { row, x: rect.left + rect.width / 2, y: rect.top };\n    });\n  const sameLine = (y: number) => Math.abs(y - current.top) < 1;\n  const directed = candidates.filter(({ x, y }) => {\n    switch (key) {\n      case 'ArrowLeft':\n        return sameLine(y) && x < centerX;\n      case 'ArrowRight':\n        return sameLine(y) && x > centerX;\n      case 'ArrowUp':\n        return y < current.top - 1;\n      default:\n        return y > current.top + 1;\n    }\n  });\n  directed.sort((a, b) => {\n    if (key === 'ArrowLeft') return b.x - a.x;\n    if (key === 'ArrowRight') return a.x - b.x;\n    const vertical = Math.abs(a.y - current.top) - Math.abs(b.y - current.top);\n    return vertical || Math.abs(a.x - centerX) - Math.abs(b.x - centerX);\n  });\n  return directed[0]?.row;\n}\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/** True when a card action originated on the card rather than a nested control. */\nexport function isContentItemActivation(\n  event: Event,\n  item: HTMLElement,\n): boolean {\n  return actionItem(item, event) === 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 (\n      item.dataset.selectionMode === 'multiple' &&\n      [\n        'ArrowDown',\n        'ArrowUp',\n        'ArrowLeft',\n        'ArrowRight',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      const grid = item.closest(MULTI_GRID_SELECTOR);\n      if (!grid) return;\n      const rows = Array.from(\n        grid.querySelectorAll<HTMLElement>(\n          `${ITEM_SELECTOR}[data-selection-mode=\"multiple\"]:not([data-disabled=\"true\"])`,\n        ),\n      ).filter((row) => row.closest(MULTI_GRID_SELECTOR) === grid);\n      const index = rows.indexOf(item);\n      if (index < 0) return;\n      const isTileGrid = grid.getAttribute('data-component') === 'grid';\n      let next: HTMLElement | undefined;\n      switch (event.key) {\n        case 'Home':\n          next = rows[0];\n          break;\n        case 'End':\n          next = rows[rows.length - 1];\n          break;\n        case 'ArrowDown':\n        case 'ArrowUp':\n          next = isTileGrid\n            ? nextTile(item, rows, event.key)\n            : rows[index + (event.key === 'ArrowDown' ? 1 : -1)];\n          break;\n        case 'ArrowLeft':\n        case 'ArrowRight':\n          next = isTileGrid ? nextTile(item, rows, event.key) : undefined;\n          break;\n      }\n      if (next) {\n        event.preventDefault();\n        next.focus();\n      }\n      return;\n    }\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"]}
+{"version":3,"sources":["../src/components/surfaces/content-item/wiring/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\"]';\nconst MULTI_GRID_SELECTOR = '[role=\"grid\"][aria-multiselectable=\"true\"]';\nconst MULTI_ROW_SELECTOR = `${ITEM_SELECTOR}[data-selection-mode=\"multiple\"]`;\n\n/** The enabled selectable rows of one multi-select grid, in order. */\nfunction gridRows(grid: Element): HTMLElement[] {\n  return Array.from(\n    grid.querySelectorAll<HTMLElement>(\n      `${MULTI_ROW_SELECTOR}:not([data-disabled=\"true\"])`,\n    ),\n  ).filter((row) => row.closest(MULTI_GRID_SELECTOR) === grid);\n}\n\nfunction nextTile(\n  item: HTMLElement,\n  rows: HTMLElement[],\n  key: string,\n): HTMLElement | undefined {\n  const current = item.getBoundingClientRect();\n  const centerX = current.left + current.width / 2;\n  const candidates = rows\n    .filter((row) => row !== item)\n    .map((row) => {\n      const rect = row.getBoundingClientRect();\n      return { row, x: rect.left + rect.width / 2, y: rect.top };\n    });\n  const sameLine = (y: number) => Math.abs(y - current.top) < 1;\n  const directed = candidates.filter(({ x, y }) => {\n    switch (key) {\n      case 'ArrowLeft':\n        return sameLine(y) && x < centerX;\n      case 'ArrowRight':\n        return sameLine(y) && x > centerX;\n      case 'ArrowUp':\n        return y < current.top - 1;\n      default:\n        return y > current.top + 1;\n    }\n  });\n  directed.sort((a, b) => {\n    if (key === 'ArrowLeft') return b.x - a.x;\n    if (key === 'ArrowRight') return a.x - b.x;\n    const vertical = Math.abs(a.y - current.top) - Math.abs(b.y - current.top);\n    return vertical || Math.abs(a.x - centerX) - Math.abs(b.x - centerX);\n  });\n  return directed[0]?.row;\n}\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/** True when a card action originated on the card rather than a nested control. */\nexport function isContentItemActivation(\n  event: Event,\n  item: HTMLElement,\n): boolean {\n  return actionItem(item, event) === item;\n}\n\ntype ActivationModifiers = Pick<\n  KeyboardEvent,\n  'shiftKey' | 'ctrlKey' | 'metaKey'\n>;\n\n/**\n * Activate an item with a click that carries the activating key's modifier\n * state, so one delegated click handler serves pointer and keyboard\n * multi-selection alike (Shift extends a range, Cmd/Ctrl toggles one item).\n */\nfunction activate(item: HTMLElement, modifiers: ActivationModifiers) {\n  item.dispatchEvent(\n    new MouseEvent('click', {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      view: item.ownerDocument.defaultView,\n      shiftKey: modifiers.shiftKey,\n      ctrlKey: modifiers.ctrlKey,\n      metaKey: modifiers.metaKey,\n    }),\n  );\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. The activation click mirrors the Shift,\n * Ctrl, and Meta state of the activating key (Space uses the state at press),\n * so the click handler can read `shiftKey` / `metaKey` / `ctrlKey` for\n * keyboard range and toggle selection. Alt-modified keys are left to the\n * platform. Returns a disposer.\n */\nexport function wireContentItems(root: HTMLElement): () => void {\n  // Roving tabindex: each multi-select grid is one Tab stop, on the last\n  // focused row, else the first selected, else the first enabled row.\n  const activeRows = new WeakMap<Element, HTMLElement>();\n  const rove = (grid: Element) => {\n    const rows = gridRows(grid);\n    const remembered = activeRows.get(grid);\n    const stop =\n      remembered && rows.includes(remembered)\n        ? remembered\n        : (rows.find((row) => row.getAttribute('aria-selected') === 'true') ??\n          rows[0]);\n    for (const row of rows) {\n      const want = row === stop ? '0' : '-1';\n      if (row.getAttribute('tabindex') !== want)\n        row.setAttribute('tabindex', want);\n    }\n  };\n  const grids = () =>\n    [\n      ...(root.matches(MULTI_GRID_SELECTOR) ? [root] : []),\n      ...root.querySelectorAll(MULTI_GRID_SELECTOR),\n    ] as Element[];\n  // A re-render resets every row's tabindex to its template value, so the\n  // roving stop is restored after each change (deduplicated per task).\n  let roving = false;\n  const scheduleRove = () => {\n    if (roving) return;\n    roving = true;\n    globalThis.queueMicrotask(() => {\n      roving = false;\n      for (const grid of grids()) rove(grid);\n    });\n  };\n  const View = root.ownerDocument.defaultView;\n  const observer =\n    View && 'MutationObserver' in View\n      ? new View.MutationObserver(scheduleRove)\n      : null;\n  observer?.observe(root, {\n    childList: true,\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['tabindex', 'aria-selected', 'data-disabled'],\n  });\n  for (const grid of grids()) rove(grid);\n\n  const focusin = (event: FocusEvent) => {\n    const target = event.target;\n    if (!(target instanceof Element)) return;\n    const row = target.closest<HTMLElement>(MULTI_ROW_SELECTOR);\n    const grid = row?.closest(MULTI_GRID_SELECTOR);\n    if (!row || !grid || !root.contains(grid)) return;\n    activeRows.set(grid, row);\n    rove(grid);\n  };\n\n  let pendingSpace: {\n    item: HTMLElement;\n    modifiers: ActivationModifiers;\n  } | null = null;\n\n  const clearSpace = () => {\n    pendingSpace?.item.removeAttribute('data-kui-pressed');\n    pendingSpace = null;\n  };\n\n  const keydown = (event: KeyboardEvent) => {\n    if (event.defaultPrevented || event.altKey) return;\n    const item = actionItem(root, event);\n    if (!item) return;\n    const commandKey = event.ctrlKey || event.metaKey;\n    if (\n      !commandKey &&\n      item.dataset.selectionMode === 'multiple' &&\n      [\n        'ArrowDown',\n        'ArrowUp',\n        'ArrowLeft',\n        'ArrowRight',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      const grid = item.closest(MULTI_GRID_SELECTOR);\n      if (!grid) return;\n      const rows = gridRows(grid);\n      const index = rows.indexOf(item);\n      if (index < 0) return;\n      const isTileGrid = grid.getAttribute('data-component') === 'grid';\n      let next: HTMLElement | undefined;\n      switch (event.key) {\n        case 'Home':\n          next = rows[0];\n          break;\n        case 'End':\n          next = rows[rows.length - 1];\n          break;\n        case 'ArrowDown':\n        case 'ArrowUp':\n          next = isTileGrid\n            ? nextTile(item, rows, event.key)\n            : rows[index + (event.key === 'ArrowDown' ? 1 : -1)];\n          break;\n        case 'ArrowLeft':\n        case 'ArrowRight':\n          next = isTileGrid ? nextTile(item, rows, event.key) : undefined;\n          break;\n      }\n      if (next) {\n        event.preventDefault();\n        next.focus();\n      }\n      return;\n    }\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      activate(item, event);\n      return;\n    }\n    if (event.key === ' ' || event.key === 'Spacebar') {\n      event.preventDefault();\n      if (event.repeat) return;\n      clearSpace();\n      pendingSpace = {\n        item,\n        modifiers: {\n          shiftKey: event.shiftKey,\n          ctrlKey: event.ctrlKey,\n          metaKey: event.metaKey,\n        },\n      };\n      item.setAttribute('data-kui-pressed', 'true');\n    }\n  };\n\n  const keyup = (event: KeyboardEvent) => {\n    if (event.key !== ' ' && event.key !== 'Spacebar') return;\n    if (!pendingSpace) return;\n    const { item, modifiers } = pendingSpace;\n    event.preventDefault();\n    clearSpace();\n    if (\n      item === actionItem(root, event) &&\n      item.ownerDocument.activeElement === item\n    )\n      activate(item, modifiers);\n  };\n\n  const focusout = (event: FocusEvent) => {\n    if (event.target === pendingSpace?.item) clearSpace();\n  };\n\n  root.addEventListener('keydown', keydown);\n  root.addEventListener('keyup', keyup);\n  root.addEventListener('focusout', focusout);\n  root.addEventListener('focusin', focusin);\n  return () => {\n    clearSpace();\n    observer?.disconnect();\n    root.removeEventListener('focusin', focusin);\n    root.removeEventListener('keydown', keydown);\n    root.removeEventListener('keyup', keyup);\n    root.removeEventListener('focusout', focusout);\n  };\n}\n"]}

package/dist/wire-file-pickers.d.ts

@@ -15,8 +15,9 @@ interface WireFilePickersOptions {
 declare function fileMatchesAccept(file: File, accept: string): boolean;
 /**
  * Report files chosen through any `FilePickerTrigger` or `FileDropZone` below
- * root, or dropped on a `FileDropZone`, and mark a zone `data-dragging` while
- * files are dragged over it. Dropped files are filtered by the input's
+ * root, or dropped on a `FileDropZone` (or anywhere in the enclosing element
+ * its `dropScope` names), and mark a zone `data-dragging` while files are
+ * dragged over it or its scope. Dropped files are filtered by the input's
  * `accept` (and to one when it is not `multiple`); a disabled picker ignores
  * drops. The input is reset after each report, so choosing the same file again
  * reports again. Dispose with the owning application.

package/dist/wire-file-pickers.js

@@ -1,3 +1,3 @@
-export { fileMatchesAccept, wireFilePickers } from './chunk-2MSPNRWJ.js';
+export { fileMatchesAccept, wireFilePickers } from './chunk-KK3S5OTW.js';
 
 //# sourceMappingURL=wire-file-pickers.js.map

package/dist/{wire-composers.d.ts → wire-message-composers.d.ts}

@@ -1,16 +1,17 @@
 type Root = HTMLElement | Document;
 /**
- * Enter-to-send for every `Composer` rendered with `submitOnEnter` below
+ * Enter-to-send for every `MessageComposer` rendered with `submitOnEnter` below
  * root. In its field, Enter (alone or with Cmd or Ctrl) activates the
  * composer's first trailing action, so a keyboard send runs the same
  * delegated handler as a click. Shift+Enter and Alt+Enter insert a newline.
  * Nothing is sent, and no newline is inserted, when the message is empty or
  * whitespace-only, the key is auto-repeating, or the first action is
- * disabled, loading, or `aria-disabled`. An Enter that commits an IME
+ * disabled, loading (a busy `Button` reports `aria-busy`), or
+ * `aria-disabled`. An Enter that commits an IME
  * composition (`isComposing`, keyCode 229, or between `compositionstart` and
  * `compositionend`) is left to the input method. Dispose with the owning
  * application.
  */
-declare function wireComposers(root: Root): () => void;
+declare function wireMessageComposers(root: Root): () => void;
 
-export { wireComposers };
+export { wireMessageComposers };

package/dist/wire-message-composers.js

@@ -0,0 +1,3 @@
+export { wireMessageComposers } from './chunk-HTERKONR.js';
+
+//# sourceMappingURL=wire-message-composers.js.map

package/dist/wire-message-composers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"wire-message-composers.js"}

package/dist/wire-overlay-sheets.js

@@ -1,4 +1,4 @@
-export { wireOverlaySheets } from './chunk-5NQF35VO.js';
+export { wireOverlaySheets } from './chunk-4RECPEHI.js';
 
 
 //# sourceMappingURL=wire-overlay-sheets.js.map

package/dist/wire-pane-chrome.d.ts

@@ -0,0 +1,21 @@
+import { Signal } from 'kerfjs';
+
+/** The app-owned open state of a Pane's `overlay` compact chrome. */
+interface WirePaneChromeOptions {
+    /** The signal the Pane renders as `compactChromeOpen.header`. */
+    header?: Signal<boolean>;
+    /** The signal the Pane renders as `compactChromeOpen.footer`. */
+    footer?: Signal<boolean>;
+}
+/**
+ * Make a Pane's open `overlay` compact chrome transient, like a Workbench's
+ * overlay rail: Escape, or a press that starts and ends outside the open
+ * chrome, sets its signal back to false, and focus left inside the closed
+ * chrome returns to the control that had focus when it opened. `root` holds
+ * the Pane (its NavStack, dialog, or Workbench); the app still opens the
+ * chrome from its own control, and a press on that control toggles as usual
+ * because the dismissal is decided at the click. Returns a disposer.
+ */
+declare function wirePaneChrome(root: HTMLElement, { header, footer }: WirePaneChromeOptions): () => void;
+
+export { type WirePaneChromeOptions, wirePaneChrome };

package/dist/wire-pane-chrome.js

@@ -0,0 +1,67 @@
+import { effect } from 'kerfjs';
+
+// src/components/layout/pane/wiring/wire-pane-chrome.ts
+function wirePaneChrome(root, { header, footer }) {
+  const doc = root.ownerDocument;
+  const slots = [
+    ["header", header],
+    ["footer", footer]
+  ].filter((entry) => entry[1] !== void 0);
+  const elementOf = (slot) => root.querySelector(
+    `.kui-pane[data-compact-${slot}="overlay"] > .kui-pane__${slot}`
+  );
+  const open = () => slots.filter(([, state]) => state.peek());
+  const openers = /* @__PURE__ */ new Map();
+  const stops = slots.map(([slot, state]) => {
+    let was = state.peek();
+    return effect(() => {
+      const now = state.value;
+      if (now && !was) openers.set(slot, doc.activeElement);
+      if (!now && was) {
+        const element = elementOf(slot);
+        const opener = openers.get(slot);
+        if (element?.contains(doc.activeElement) && opener instanceof HTMLElement)
+          opener.focus({ preventScroll: true });
+        openers.delete(slot);
+      }
+      was = now;
+    });
+  });
+  const onKeydown = (event) => {
+    if (event.key !== "Escape" || event.defaultPrevented) return;
+    const shown = open();
+    if (shown.length === 0) return;
+    event.preventDefault();
+    const [, state] = shown.find(([slot]) => elementOf(slot)?.contains(doc.activeElement)) ?? shown[shown.length - 1];
+    state.value = false;
+  };
+  let pressed = [];
+  const outside = (slot, path) => {
+    const element = elementOf(slot);
+    return !element || !path.includes(element);
+  };
+  const onPointerdown = (event) => {
+    const path = event.composedPath();
+    pressed = open().map(([slot]) => slot).filter((slot) => outside(slot, path));
+  };
+  const onClick = (event) => {
+    const candidates = pressed;
+    pressed = [];
+    const path = event.composedPath();
+    for (const [slot, state] of open())
+      if (candidates.includes(slot) && outside(slot, path)) state.value = false;
+  };
+  doc.addEventListener("keydown", onKeydown);
+  doc.addEventListener("pointerdown", onPointerdown, true);
+  doc.addEventListener("click", onClick);
+  return () => {
+    for (const stop of stops) stop();
+    doc.removeEventListener("keydown", onKeydown);
+    doc.removeEventListener("pointerdown", onPointerdown, true);
+    doc.removeEventListener("click", onClick);
+  };
+}
+
+export { wirePaneChrome };
+
+//# sourceMappingURL=wire-pane-chrome.js.map

package/dist/wire-pane-chrome.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/pane/wiring/wire-pane-chrome.ts"],"names":[],"mappings":"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","file":"wire-pane-chrome.js","sourcesContent":["import { effect, type Signal } from 'kerfjs';\n\n/** The app-owned open state of a Pane's `overlay` compact chrome. */\nexport interface WirePaneChromeOptions {\n  /** The signal the Pane renders as `compactChromeOpen.header`. */\n  header?: Signal<boolean>;\n  /** The signal the Pane renders as `compactChromeOpen.footer`. */\n  footer?: Signal<boolean>;\n}\n\ntype Slot = 'header' | 'footer';\n\n/**\n * Make a Pane's open `overlay` compact chrome transient, like a Workbench's\n * overlay rail: Escape, or a press that starts and ends outside the open\n * chrome, sets its signal back to false, and focus left inside the closed\n * chrome returns to the control that had focus when it opened. `root` holds\n * the Pane (its NavStack, dialog, or Workbench); the app still opens the\n * chrome from its own control, and a press on that control toggles as usual\n * because the dismissal is decided at the click. Returns a disposer.\n */\nexport function wirePaneChrome(\n  root: HTMLElement,\n  { header, footer }: WirePaneChromeOptions,\n): () => void {\n  const doc = root.ownerDocument;\n  const slots = (\n    [\n      ['header', header],\n      ['footer', footer],\n    ] as const\n  ).filter((entry): entry is [Slot, Signal<boolean>] => entry[1] !== undefined);\n  const elementOf = (slot: Slot) =>\n    root.querySelector<HTMLElement>(\n      `.kui-pane[data-compact-${slot}=\"overlay\"] > .kui-pane__${slot}`,\n    );\n  const open = () => slots.filter(([, state]) => state.peek());\n  const openers = new Map<Slot, Element | null>();\n\n  const stops = slots.map(([slot, state]) => {\n    let was = state.peek();\n    return effect(() => {\n      const now = state.value;\n      if (now && !was) openers.set(slot, doc.activeElement);\n      if (!now && was) {\n        // Focus stranded in the closed chrome goes back to its opener.\n        const element = elementOf(slot);\n        const opener = openers.get(slot);\n        if (\n          element?.contains(doc.activeElement) &&\n          opener instanceof HTMLElement\n        )\n          opener.focus({ preventScroll: true });\n        openers.delete(slot);\n      }\n      was = now;\n    });\n  });\n\n  const onKeydown = (event: KeyboardEvent) => {\n    if (event.key !== 'Escape' || event.defaultPrevented) return;\n    const shown = open();\n    if (shown.length === 0) return;\n    event.preventDefault();\n    // The chrome holding focus closes first; otherwise the last one opened.\n    const [, state] =\n      shown.find(([slot]) => elementOf(slot)?.contains(doc.activeElement)) ??\n      shown[shown.length - 1]!;\n    state.value = false;\n  };\n\n  let pressed: Slot[] = [];\n  const outside = (slot: Slot, path: EventTarget[]) => {\n    const element = elementOf(slot);\n    return !element || !path.includes(element);\n  };\n  const onPointerdown = (event: PointerEvent) => {\n    const path = event.composedPath();\n    pressed = open()\n      .map(([slot]) => slot)\n      .filter((slot) => outside(slot, path));\n  };\n  const onClick = (event: MouseEvent) => {\n    const candidates = pressed;\n    pressed = [];\n    const path = event.composedPath();\n    for (const [slot, state] of open())\n      if (candidates.includes(slot) && outside(slot, path)) state.value = false;\n  };\n\n  doc.addEventListener('keydown', onKeydown);\n  doc.addEventListener('pointerdown', onPointerdown, true);\n  doc.addEventListener('click', onClick);\n  return () => {\n    for (const stop of stops) stop();\n    doc.removeEventListener('keydown', onKeydown);\n    doc.removeEventListener('pointerdown', onPointerdown, true);\n    doc.removeEventListener('click', onClick);\n  };\n}\n"]}