@kerfjs/ui 4.5.0-beta.1 → 5.0.0-beta.100

package/dist/wire-sidebar.js

@@ -1,6 +1,6 @@
 import { effect, delegate } from 'kerfjs';
 
-// src/wire-sidebar.ts
+// src/components/layout/collapsible-panel/wiring/wire-sidebar.ts
 var FOCUSABLE = 'a[href],area[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
 function focusables(panel) {
   return [...panel.querySelectorAll(FOCUSABLE)];
@@ -12,19 +12,52 @@ function defaultStorage() {
     return void 0;
   }
 }
-function wireSidebar(root, { panels, deviceClass, storage = defaultStorage() }) {
+function wireSidebar(root, {
+  panels,
+  deviceClass,
+  compactPresentation = "overlay",
+  exclusiveCompact = true,
+  storage = defaultStorage()
+}) {
   const ownerDocument = root.ownerDocument;
   const byAction = new Map(panels.map((panel) => [panel.toggleAction, panel]));
   const returnFocus = /* @__PURE__ */ new Map();
   const disposers = [];
+  const adapting = /* @__PURE__ */ new Set();
+  const overlayActive = () => Boolean(deviceClass?.value.compact) && compactPresentation === "overlay";
+  let inlineState;
+  const setAll = (value) => {
+    for (const panel of panels) {
+      const next = value(panel);
+      if (panel.collapsed.peek() === next) continue;
+      adapting.add(panel);
+      panel.collapsed.value = next;
+    }
+  };
+  const restoreInline = () => {
+    const remembered = inlineState;
+    if (!remembered) return;
+    inlineState = void 0;
+    setAll((panel) => remembered.get(panel));
+  };
+  if (overlayActive()) inlineState = /* @__PURE__ */ new Map();
+  for (const panel of panels) {
+    const stored = panel.storageKey && storage ? storage.getItem(panel.storageKey) : null;
+    const seed = stored === "true" || stored === "false" ? stored === "true" : panel.inlineCollapsed;
+    if (inlineState) {
+      inlineState.set(panel, seed ?? panel.collapsed.peek());
+      panel.collapsed.value = true;
+    } else if (seed !== void 0) {
+      panel.collapsed.value = seed;
+    }
+  }
   for (const panel of panels) {
     if (!panel.storageKey || !storage) continue;
-    const stored = storage.getItem(panel.storageKey);
-    if (stored === "true" || stored === "false")
-      panel.collapsed.value = stored === "true";
     disposers.push(
       effect(() => {
-        storage.setItem(panel.storageKey, String(panel.collapsed.value));
+        const collapsed = panel.collapsed.value;
+        if (overlayActive()) return;
+        storage.setItem(panel.storageKey, String(collapsed));
       })
     );
   }
@@ -39,9 +72,23 @@ function wireSidebar(root, { panels, deviceClass, storage = defaultStorage() })
       const panel = byAction.get(trigger.dataset.action ?? "");
       if (!panel) return;
       returnFocus.set(panel.id, trigger);
-      panel.collapsed.value = !panel.collapsed.value;
+      const next = !panel.collapsed.value;
+      panel.collapsed.value = next;
+      if (!next && exclusiveCompact && overlayActive()) {
+        for (const other of panels)
+          if (other !== panel) other.collapsed.value = true;
+      }
     })
   );
+  const restoreFocus = (panel) => {
+    const element = panelElement(panel.id);
+    const trigger = returnFocus.get(panel.id);
+    const target = trigger?.isConnected && !element?.contains(trigger) ? trigger : [...root.querySelectorAll("[data-action]")].find(
+      (candidate) => candidate.dataset.action === panel.toggleAction && !element?.contains(candidate)
+    );
+    target?.focus();
+    return target !== void 0;
+  };
   for (const panel of panels) {
     let previous = panel.collapsed.value;
     disposers.push(
@@ -50,44 +97,98 @@ function wireSidebar(root, { panels, deviceClass, storage = defaultStorage() })
         if (collapsed === previous) return;
         previous = collapsed;
         const element = panelElement(panel.id);
-        if (!collapsed && element) {
-          (focusables(element)[0] ?? element).focus();
-        } else if (collapsed) {
-          returnFocus.get(panel.id)?.focus();
+        if (adapting.delete(panel)) {
+          if (collapsed && element?.contains(ownerDocument.activeElement))
+            restoreFocus(panel);
+          return;
+        }
+        const replaced = deviceClass?.value.compact && compactPresentation === "hidden";
+        if (!collapsed && element && !replaced) {
+          (focusables(element)[0] ?? element).focus({ preventScroll: true });
+        } else if (collapsed && !restoreFocus(panel)) {
+          const retry = (frames) => {
+            if (!panel.collapsed.peek() || restoreFocus(panel) || frames === 0)
+              return;
+            globalThis.requestAnimationFrame(() => retry(frames - 1));
+          };
+          globalThis.queueMicrotask(() => retry(3));
         }
       })
     );
   }
   if (deviceClass) {
     let backdrop;
+    let hostResponsive;
+    let hostOverlay;
+    let backdropFor;
     const openPanel = () => panels.find((panel) => !panel.collapsed.value);
     const removeBackdrop = () => {
       backdrop?.remove();
       backdrop = void 0;
+      backdropFor = void 0;
+    };
+    const setHostData = (name, value) => {
+      if (root.dataset[name] === value) return;
+      if (value === void 0) delete root.dataset[name];
+      else root.dataset[name] = value;
+    };
+    const syncHost = () => {
+      setHostData("collapsibleResponsive", hostResponsive);
+      setHostData("collapsibleOverlay", hostOverlay);
+      if (!backdrop || backdropFor === void 0) return;
+      const element = panelElement(backdropFor);
+      if (element && backdrop.nextElementSibling !== element)
+        element.parentElement?.insertBefore(backdrop, element);
     };
     disposers.push(
       effect(() => {
         const compact = deviceClass.value.compact;
-        const open = compact ? openPanel() : void 0;
-        root.dataset.collapsibleOverlay = String(compact);
-        if (compact && open) {
+        const overlay = compact && compactPresentation === "overlay";
+        for (const panel of panels) void panel.collapsed.value;
+        if (overlay && !inlineState) {
+          inlineState = new Map(
+            panels.map((panel) => [panel, panel.collapsed.peek()])
+          );
+          setAll(() => true);
+        } else if (!overlay) {
+          restoreInline();
+        }
+        const open = overlay ? panels.find((panel) => !panel.collapsed.peek()) : void 0;
+        hostResponsive = compact ? compactPresentation : "inline";
+        hostOverlay = compact ? String(overlay) : void 0;
+        if (open) {
           if (!backdrop) {
             backdrop = ownerDocument.createElement("button");
             backdrop.type = "button";
             backdrop.className = "kui-collapsible-panel__backdrop";
             backdrop.setAttribute("aria-label", "Close");
-            backdrop.addEventListener("click", () => collapse(open));
-            const element = panelElement(open.id);
-            element?.parentElement?.insertBefore(backdrop, element);
+            backdrop.dataset.morphPreserve = "";
+            backdrop.addEventListener("click", () => {
+              const current = openPanel();
+              if (current) collapse(current);
+            });
           }
+          backdropFor = open.id;
         } else {
           removeBackdrop();
-          if (!compact) delete root.dataset.collapsibleOverlay;
         }
+        syncHost();
       })
     );
+    const observer = new MutationObserver(syncHost);
+    observer.observe(root, {
+      attributes: true,
+      attributeFilter: [
+        "data-collapsible-responsive",
+        "data-collapsible-overlay"
+      ],
+      childList: true,
+      subtree: true
+    });
+    disposers.push(() => observer.disconnect());
     const onKeydown = (event) => {
-      if (!deviceClass.value.compact) return;
+      if (!deviceClass.value.compact || compactPresentation !== "overlay")
+        return;
       const open = openPanel();
       if (!open) return;
       if (event.key === "Escape") {
@@ -119,7 +220,9 @@ function wireSidebar(root, { panels, deviceClass, storage = defaultStorage() })
   }
   return () => {
     for (const dispose of disposers.splice(0)) dispose();
+    restoreInline();
     delete root.dataset.collapsibleOverlay;
+    delete root.dataset.collapsibleResponsive;
   };
 }
 

package/dist/wire-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/wire-sidebar.ts"],"names":[],"mappings":"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","file":"wire-sidebar.js","sourcesContent":["import { delegate, effect, type ReadonlySignal, type Signal } from 'kerfjs';\n\nimport type { DeviceClass } from './device-class.js';\n\n/** Minimal `localStorage`-shaped store, so the persistence hook is testable. */\nexport interface SidebarStorage {\n  getItem(key: string): string | null;\n  setItem(key: string, value: string): void;\n}\n\nexport interface WireSidebarPanel {\n  /** The panel id — matches `CollapsiblePanel`'s `id` and a toggle's `panelId`. */\n  id: string;\n  /** The app-owned collapsed signal. `wireSidebar` reads it (focus, overlay) and\n   *  writes it (toggle, Escape, backdrop, persistence). */\n  collapsed: Signal<boolean>;\n  /** `data-action` value the panel's toggle button(s) carry. */\n  toggleAction: string;\n  /** When set, the collapsed state is loaded from and saved to `storage` under\n   *  this key (a persistence hook), so the panel remembers its state. */\n  storageKey?: string;\n}\n\nexport interface WireSidebarOptions {\n  panels: readonly WireSidebarPanel[];\n  /**\n   * When provided, the sidebar adopts a compact **overlay** presentation while\n   * `deviceClass.compact` is true: an open panel floats over the content with a\n   * dismissable backdrop, Escape and backdrop-click collapse it, and focus is\n   * trapped within the open panel (the ARIA dialog pattern). Without it the panel\n   * is always inline.\n   */\n  deviceClass?: ReadonlySignal<DeviceClass>;\n  /** Persistence store (default `globalThis.localStorage`, if present). */\n  storage?: SidebarStorage;\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\nfunction focusables(panel: HTMLElement): HTMLElement[] {\n  // Focus only ever targets an OPEN panel, so the selector (which already drops\n  // disabled controls and tabindex=\"-1\") is sufficient without a layout-based\n  // visibility check that a headless DOM can't answer.\n  return [...panel.querySelectorAll<HTMLElement>(FOCUSABLE)];\n}\n\nfunction defaultStorage(): SidebarStorage | undefined {\n  try {\n    return globalThis.localStorage ?? undefined;\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * The reusable sidebar-semantics layer for {@link CollapsiblePanel}s: toggle\n * delegation with focus restore, focus-into on open, an optional compact overlay\n * (backdrop + Escape + focus trap) driven by {@link deviceClass}, and an optional\n * persistence hook. The app owns each `collapsed` signal and the layout; this wire\n * owns the interaction. Returns a disposer. See `docs/24-collapsible-panel.md`.\n */\nexport function wireSidebar(\n  root: HTMLElement,\n  { panels, deviceClass, storage = defaultStorage() }: WireSidebarOptions,\n): () => void {\n  const ownerDocument = root.ownerDocument;\n  const byAction = new Map(panels.map((panel) => [panel.toggleAction, panel]));\n  const returnFocus = new Map<string, HTMLElement>();\n  const disposers: Array<() => void> = [];\n\n  // Persistence: seed from storage, then mirror on change.\n  for (const panel of panels) {\n    if (!panel.storageKey || !storage) continue;\n    const stored = storage.getItem(panel.storageKey);\n    if (stored === 'true' || stored === 'false')\n      panel.collapsed.value = stored === 'true';\n    disposers.push(\n      effect(() => {\n        storage.setItem(panel.storageKey!, String(panel.collapsed.value));\n      }),\n    );\n  }\n\n  const panelElement = (id: string): HTMLElement | null =>\n    root.querySelector<HTMLElement>(`[data-collapsible-panel=\"${id}\"]`);\n\n  const collapse = (panel: WireSidebarPanel): void => {\n    if (panel.collapsed.value) return;\n    panel.collapsed.value = true;\n  };\n\n  // Toggle delegation. The trigger is remembered so focus restores to it on close.\n  disposers.push(\n    delegate(root, 'click', '[data-action]', (_event, element) => {\n      const trigger = element as HTMLElement;\n      const panel = byAction.get(trigger.dataset.action ?? '');\n      if (!panel) return;\n      returnFocus.set(panel.id, trigger);\n      panel.collapsed.value = !panel.collapsed.value;\n    }),\n  );\n\n  // Focus: move into the panel when it opens; restore to the trigger when it closes.\n  for (const panel of panels) {\n    let previous = panel.collapsed.value;\n    disposers.push(\n      effect(() => {\n        const collapsed = panel.collapsed.value;\n        if (collapsed === previous) return;\n        previous = collapsed;\n        const element = panelElement(panel.id);\n        if (!collapsed && element) {\n          (focusables(element)[0] ?? element).focus();\n        } else if (collapsed) {\n          returnFocus.get(panel.id)?.focus();\n        }\n      }),\n    );\n  }\n\n  // Compact overlay: a dismissable backdrop + Escape + focus trap while compact\n  // and a panel is open.\n  if (deviceClass) {\n    let backdrop: HTMLButtonElement | undefined;\n    const openPanel = (): WireSidebarPanel | undefined =>\n      panels.find((panel) => !panel.collapsed.value);\n    const removeBackdrop = (): void => {\n      backdrop?.remove();\n      backdrop = undefined;\n    };\n    disposers.push(\n      effect(() => {\n        const compact = deviceClass.value.compact;\n        const open = compact ? openPanel() : undefined;\n        root.dataset.collapsibleOverlay = String(compact);\n        if (compact && open) {\n          if (!backdrop) {\n            backdrop = ownerDocument.createElement('button');\n            backdrop.type = 'button';\n            backdrop.className = 'kui-collapsible-panel__backdrop';\n            backdrop.setAttribute('aria-label', 'Close');\n            backdrop.addEventListener('click', () => collapse(open));\n            const element = panelElement(open.id);\n            element?.parentElement?.insertBefore(backdrop, element);\n          }\n        } else {\n          removeBackdrop();\n          if (!compact) delete root.dataset.collapsibleOverlay;\n        }\n      }),\n    );\n\n    const onKeydown = (event: KeyboardEvent): void => {\n      if (!deviceClass.value.compact) return;\n      const open = openPanel();\n      if (!open) return;\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        collapse(open);\n        return;\n      }\n      if (event.key !== 'Tab') return;\n      const element = panelElement(open.id);\n      if (!element) return;\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 active = ownerDocument.activeElement;\n      if (event.shiftKey && active === first) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && active === last) {\n        event.preventDefault();\n        first.focus();\n      }\n    };\n    ownerDocument.addEventListener('keydown', onKeydown);\n    disposers.push(() =>\n      ownerDocument.removeEventListener('keydown', onKeydown),\n    );\n    disposers.push(removeBackdrop);\n  }\n\n  return () => {\n    for (const dispose of disposers.splice(0)) dispose();\n    delete root.dataset.collapsibleOverlay;\n  };\n}\n"]}
+{"version":3,"sources":["../src/components/layout/collapsible-panel/wiring/wire-sidebar.ts"],"names":[],"mappings":"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","file":"wire-sidebar.js","sourcesContent":["import { delegate, effect, type ReadonlySignal, type Signal } from 'kerfjs';\n\nimport type { DeviceClass } from '../../../../shared/environment/device-class.js';\n\n/** Minimal `localStorage`-shaped store, so the persistence hook is testable. */\nexport interface SidebarStorage {\n  getItem(key: string): string | null;\n  setItem(key: string, value: string): void;\n}\n\nexport interface WireSidebarPanel {\n  /** The panel id — matches `CollapsiblePanel`'s `id` and a toggle's `panelId`. */\n  id: string;\n  /** The app-owned collapsed signal. `wireSidebar` reads it (focus, overlay) and\n   *  writes it (toggle, Escape, backdrop, persistence). */\n  collapsed: Signal<boolean>;\n  /** `data-action` value the panel's toggle button(s) carry. */\n  toggleAction: string;\n  /** When set, the panel's inline collapsed state is loaded from and saved to\n   *  `storage` under this key (a persistence hook), so the panel remembers the\n   *  user's inline choice. A compact overlay's open/closed state is transient\n   *  and is never persisted. */\n  storageKey?: string;\n  /** The panel's inline (non-compact) collapsed state when `storage` holds no\n   *  choice for it; wire-up seeds the signal with it. Defaults to the signal's\n   *  own value. Set it when the app seeds the signal from the device class\n   *  (`signal(device.value.compact)`) so a compact first render already starts\n   *  collapsed while a later crossing to a wide class still restores this\n   *  inline default. */\n  inlineCollapsed?: boolean;\n}\n\nexport interface WireSidebarOptions {\n  panels: readonly WireSidebarPanel[];\n  /**\n   * When provided, the sidebar adopts a compact **overlay** presentation while\n   * `deviceClass.compact` is true: an open panel floats over the content with a\n   * dismissable backdrop, Escape and backdrop-click collapse it, and focus is\n   * trapped within the open panel (the ARIA dialog pattern). Without it the panel\n   * is always inline.\n   *\n   * An overlay is transient and user-initiated: whenever the compact overlay\n   * presentation begins (wire-up on a compact device, or a crossing from a wide\n   * class), every panel starts collapsed so nothing blocks the page until the\n   * user opens it. The inline state is remembered and restored when the device\n   * crosses back to a wide class (and on disposal).\n   */\n  deviceClass?: ReadonlySignal<DeviceClass>;\n  /** Compact devices either overlay the panels (default) or hide them in favor\n   *  of an application-owned responsive replacement. */\n  compactPresentation?: 'overlay' | 'hidden';\n  /** Collapse the other panels when one opens in compact overlay mode. */\n  exclusiveCompact?: boolean;\n  /** Persistence store (default `globalThis.localStorage`, if present). */\n  storage?: SidebarStorage;\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\nfunction focusables(panel: HTMLElement): HTMLElement[] {\n  // Focus only ever targets an OPEN panel, so the selector (which already drops\n  // disabled controls and tabindex=\"-1\") is sufficient without a layout-based\n  // visibility check that a headless DOM can't answer.\n  return [...panel.querySelectorAll<HTMLElement>(FOCUSABLE)];\n}\n\nfunction defaultStorage(): SidebarStorage | undefined {\n  try {\n    return globalThis.localStorage ?? undefined;\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * The reusable sidebar-semantics layer for {@link CollapsiblePanel}s: toggle\n * delegation with focus restore, focus-into on open, an optional compact overlay\n * (backdrop + Escape + focus trap) driven by {@link deviceClass}, and an optional\n * persistence hook. The app owns each `collapsed` signal and the layout; this wire\n * owns the interaction. Returns a disposer. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.\n */\nexport function wireSidebar(\n  root: HTMLElement,\n  {\n    panels,\n    deviceClass,\n    compactPresentation = 'overlay',\n    exclusiveCompact = true,\n    storage = defaultStorage(),\n  }: WireSidebarOptions,\n): () => void {\n  const ownerDocument = root.ownerDocument;\n  const byAction = new Map(panels.map((panel) => [panel.toggleAction, panel]));\n  const returnFocus = new Map<string, HTMLElement>();\n  const disposers: Array<() => void> = [];\n  // Panels whose next collapsed change is presentation-driven, not a user\n  // action, so it must not move focus the way a toggle does. A set rather than\n  // a flag: writes made inside an effect are batched, so the focus effects run\n  // after the writer returns.\n  const adapting = new Set<WireSidebarPanel>();\n  const overlayActive = (): boolean =>\n    Boolean(deviceClass?.value.compact) && compactPresentation === 'overlay';\n\n  // Initial-state contract: an overlay is transient and only ever opens on a\n  // user action. Entering the overlay presentation (at wire-up or on a wide →\n  // compact crossing) remembers each panel's inline state and collapses it;\n  // leaving it (compact → wide, or disposal) restores the remembered state.\n  let inlineState: Map<WireSidebarPanel, boolean> | undefined;\n  const setAll = (value: (panel: WireSidebarPanel) => boolean): void => {\n    for (const panel of panels) {\n      const next = value(panel);\n      if (panel.collapsed.peek() === next) continue;\n      adapting.add(panel);\n      panel.collapsed.value = next;\n    }\n  };\n  const restoreInline = (): void => {\n    const remembered = inlineState;\n    if (!remembered) return;\n    inlineState = undefined;\n    setAll((panel) => remembered.get(panel)!);\n  };\n\n  // Seed each panel's inline state from storage or `inlineCollapsed`. On a\n  // compact overlay device the seed is only remembered: the panel starts\n  // collapsed, synchronously and before any effect exists, so the first render\n  // after wire-up already has no overlay open.\n  if (overlayActive()) inlineState = new Map();\n  for (const panel of panels) {\n    const stored =\n      panel.storageKey && storage ? storage.getItem(panel.storageKey) : null;\n    const seed =\n      stored === 'true' || stored === 'false'\n        ? stored === 'true'\n        : panel.inlineCollapsed;\n    if (inlineState) {\n      inlineState.set(panel, seed ?? panel.collapsed.peek());\n      panel.collapsed.value = true;\n    } else if (seed !== undefined) {\n      panel.collapsed.value = seed;\n    }\n  }\n\n  // Persistence mirrors inline changes only. An overlay's open/closed state is\n  // transient, so it is never written.\n  for (const panel of panels) {\n    if (!panel.storageKey || !storage) continue;\n    disposers.push(\n      effect(() => {\n        const collapsed = panel.collapsed.value;\n        if (overlayActive()) return;\n        storage.setItem(panel.storageKey!, String(collapsed));\n      }),\n    );\n  }\n\n  const panelElement = (id: string): HTMLElement | null =>\n    root.querySelector<HTMLElement>(`[data-collapsible-panel=\"${id}\"]`);\n\n  const collapse = (panel: WireSidebarPanel): void => {\n    if (panel.collapsed.value) return;\n    panel.collapsed.value = true;\n  };\n\n  // Toggle delegation. The trigger is remembered so focus restores to it on close.\n  disposers.push(\n    delegate(root, 'click', '[data-action]', (_event, element) => {\n      const trigger = element as HTMLElement;\n      const panel = byAction.get(trigger.dataset.action ?? '');\n      if (!panel) return;\n      returnFocus.set(panel.id, trigger);\n      const next = !panel.collapsed.value;\n      panel.collapsed.value = next;\n      if (!next && exclusiveCompact && overlayActive()) {\n        for (const other of panels)\n          if (other !== panel) other.collapsed.value = true;\n      }\n    }),\n  );\n\n  // Where focus goes when a panel closes: the trigger that toggled it, unless\n  // that trigger sits inside the now-hidden panel (the documented\n  // collapse-inside placement) or was re-rendered away. Then it goes to the\n  // panel's toggle outside it — the always-visible expand toggle, which an app\n  // may render only while the panel is collapsed. Returns whether it moved.\n  const restoreFocus = (panel: WireSidebarPanel): boolean => {\n    const element = panelElement(panel.id);\n    const trigger = returnFocus.get(panel.id);\n    const target =\n      trigger?.isConnected && !element?.contains(trigger)\n        ? trigger\n        : [...root.querySelectorAll<HTMLElement>('[data-action]')].find(\n            (candidate) =>\n              candidate.dataset.action === panel.toggleAction &&\n              !element?.contains(candidate),\n          );\n    target?.focus();\n    return target !== undefined;\n  };\n\n  // Focus: move into the panel when it opens; restore it when it closes.\n  for (const panel of panels) {\n    let previous = panel.collapsed.value;\n    disposers.push(\n      effect(() => {\n        const collapsed = panel.collapsed.value;\n        if (collapsed === previous) return;\n        previous = collapsed;\n        const element = panelElement(panel.id);\n        if (adapting.delete(panel)) {\n          // A presentation change, not a user action: only rescue focus that\n          // the collapse would strand inside the now-hidden panel.\n          if (collapsed && element?.contains(ownerDocument.activeElement))\n            restoreFocus(panel);\n          return;\n        }\n        const replaced =\n          deviceClass?.value.compact && compactPresentation === 'hidden';\n        if (!collapsed && element && !replaced) {\n          // Without preventScroll the browser scrolls the panel's clipped,\n          // still-sliding content to reveal the focus target, which then\n          // unwinds as the slide finishes: the content jumps and drifts back.\n          (focusables(element)[0] ?? element).focus({ preventScroll: true });\n        } else if (collapsed && !restoreFocus(panel)) {\n          // An app that renders after this effect has not produced its\n          // expand toggle (or relocated it into its work-area toolbar) yet;\n          // look again once the batch settles, then for a few frames.\n          const retry = (frames: number): void => {\n            if (!panel.collapsed.peek() || restoreFocus(panel) || frames === 0)\n              return;\n            globalThis.requestAnimationFrame(() => retry(frames - 1));\n          };\n          globalThis.queueMicrotask(() => retry(3));\n        }\n      }),\n    );\n  }\n\n  // Compact overlay: a dismissable backdrop + Escape + focus trap while compact\n  // and a panel is open.\n  if (deviceClass) {\n    let backdrop: HTMLButtonElement | undefined;\n    // The host state this wire owns, recorded so it can be re-applied: the\n    // app re-renders (and morphs) the root for reasons that never touch a\n    // panel signal (a nav selection, say), and a morph strips attributes and\n    // nodes the template doesn't emit.\n    let hostResponsive: string | undefined;\n    let hostOverlay: string | undefined;\n    let backdropFor: string | undefined;\n    const openPanel = (): WireSidebarPanel | undefined =>\n      panels.find((panel) => !panel.collapsed.value);\n    const removeBackdrop = (): void => {\n      backdrop?.remove();\n      backdrop = undefined;\n      backdropFor = undefined;\n    };\n    const setHostData = (\n      name: 'collapsibleResponsive' | 'collapsibleOverlay',\n      value: string | undefined,\n    ): void => {\n      if (root.dataset[name] === value) return;\n      if (value === undefined) delete root.dataset[name];\n      else root.dataset[name] = value;\n    };\n    // Idempotent, so the observer below settles after one corrective write.\n    const syncHost = (): void => {\n      setHostData('collapsibleResponsive', hostResponsive);\n      setHostData('collapsibleOverlay', hostOverlay);\n      if (!backdrop || backdropFor === undefined) return;\n      const element = panelElement(backdropFor);\n      if (element && backdrop.nextElementSibling !== element)\n        element.parentElement?.insertBefore(backdrop, element);\n    };\n    disposers.push(\n      effect(() => {\n        const compact = deviceClass.value.compact;\n        const overlay = compact && compactPresentation === 'overlay';\n        // A crossing adapts the panels here, in the same effect that owns the\n        // host state. Every panel's state is read so an open or close moves\n        // the backdrop; re-renders that touch no panel are covered by the\n        // observer below.\n        for (const panel of panels) void panel.collapsed.value;\n        if (overlay && !inlineState) {\n          inlineState = new Map(\n            panels.map((panel) => [panel, panel.collapsed.peek()]),\n          );\n          setAll(() => true);\n        } else if (!overlay) {\n          restoreInline();\n        }\n        const open = overlay\n          ? panels.find((panel) => !panel.collapsed.peek())\n          : undefined;\n        hostResponsive = compact ? compactPresentation : 'inline';\n        hostOverlay = compact ? String(overlay) : undefined;\n        if (open) {\n          if (!backdrop) {\n            backdrop = ownerDocument.createElement('button');\n            backdrop.type = 'button';\n            backdrop.className = 'kui-collapsible-panel__backdrop';\n            backdrop.setAttribute('aria-label', 'Close');\n            // Injected after render: the morph's removal pass must skip it.\n            backdrop.dataset.morphPreserve = '';\n            backdrop.addEventListener('click', () => {\n              const current = openPanel();\n              if (current) collapse(current);\n            });\n          }\n          backdropFor = open.id;\n        } else {\n          removeBackdrop();\n        }\n        syncHost();\n      }),\n    );\n    const observer = new MutationObserver(syncHost);\n    observer.observe(root, {\n      attributes: true,\n      attributeFilter: [\n        'data-collapsible-responsive',\n        'data-collapsible-overlay',\n      ],\n      childList: true,\n      subtree: true,\n    });\n    disposers.push(() => observer.disconnect());\n\n    const onKeydown = (event: KeyboardEvent): void => {\n      if (!deviceClass.value.compact || compactPresentation !== 'overlay')\n        return;\n      const open = openPanel();\n      if (!open) return;\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        collapse(open);\n        return;\n      }\n      if (event.key !== 'Tab') return;\n      const element = panelElement(open.id);\n      if (!element) return;\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 active = ownerDocument.activeElement;\n      if (event.shiftKey && active === first) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && active === last) {\n        event.preventDefault();\n        first.focus();\n      }\n    };\n    ownerDocument.addEventListener('keydown', onKeydown);\n    disposers.push(() =>\n      ownerDocument.removeEventListener('keydown', onKeydown),\n    );\n    disposers.push(removeBackdrop);\n  }\n\n  return () => {\n    for (const dispose of disposers.splice(0)) dispose();\n    // After every effect is gone, so handing the inline state back cannot\n    // re-create overlay chrome or persist anything.\n    restoreInline();\n    delete root.dataset.collapsibleOverlay;\n    delete root.dataset.collapsibleResponsive;\n  };\n}\n"]}

package/dist/wire-tab-bars.d.ts

@@ -1,5 +1,6 @@
 import { TabActivation } from './tab-bar.js';
 import 'kerfjs';
+import './semantic-content-BbzjvSu9.js';
 
 type TabReorderSource = 'pointer' | 'keyboard';
 type TabDropPosition = 'before' | 'after';

package/dist/wire-tab-bars.js

@@ -1,3 +1,3 @@
-export { reorderTabs, wireTabBars } from './chunk-UKKSMZYT.js';
+export { reorderTabs, wireTabBars } from './chunk-K4AT3V3J.js';
 
 //# sourceMappingURL=wire-tab-bars.js.map

package/dist/wire-tab-navigator.d.ts

@@ -0,0 +1,13 @@
+interface WireTabNavigatorOptions {
+    /** Invoked with the selected tab id when a bottom-bar tab is activated. */
+    onSelect: (tabId: string) => void;
+}
+/**
+ * Wire a `TabNavigator`'s bottom tab bar: clicking a tab calls `onSelect` with its
+ * id (the app then updates its controlled `active`). With
+ * `barPresentation="overlay"` it also measures the live bar and lays it over
+ * the scenes (see `TabNavigatorProps.barPresentation`). Returns a disposer.
+ */
+declare function wireTabNavigator(root: Element, options: WireTabNavigatorOptions): () => void;
+
+export { type WireTabNavigatorOptions, wireTabNavigator };

package/dist/wire-tab-navigator.js

@@ -0,0 +1,153 @@
+import { delegate } from 'kerfjs';
+
+// src/components/navigation/tab-navigator/wiring/wire-tab-navigator.ts
+var BAR_OVERLAY = "data-bar-overlay";
+var BAR_BLOCK_SIZE = "--_kui-tab-scaffold-bar-block-size";
+var BAR_SCROLLBAR_INLINE_SIZE = "--_kui-tab-scaffold-bar-scrollbar-inline-size";
+var NESTED_LAYOUT = ["nav-stack", "split-view", "workbench", "tab-scaffold"].map((name) => `[data-component="${name}"]`).join(", ");
+function paneScroller(pane) {
+  if (pane.querySelector(":scope > .kui-pane__footer")) return void 0;
+  return pane.querySelector(":scope > .kui-pane__content") ?? void 0;
+}
+function activeScroller(section) {
+  const scene = section.querySelector(
+    ':scope > .kui-tab-scaffold__scenes > .kui-tab-scaffold__scene[data-active="true"]'
+  );
+  if (!scene) return void 0;
+  const only = scene.children.length === 1 ? scene.children[0] : void 0;
+  if (!only?.matches(`[data-component="pane"], ${NESTED_LAYOUT}`)) return scene;
+  if (only.matches('[data-component="pane"]')) return paneScroller(only);
+  if (!only.matches('[data-component="nav-stack"]')) return void 0;
+  if (only.querySelector(":scope > [data-nav-stack-bottom]") && only.getAttribute("data-bottom-toolbar-presentation") !== "overlay")
+    return void 0;
+  const views = [
+    ...only.querySelectorAll(
+      ':scope > [data-nav-stack-viewport] > [data-nav-active="true"]:not([data-nav-exiting="true"])'
+    )
+  ];
+  const view = views.at(-1);
+  if (!view) return void 0;
+  const child = view.children.length === 1 ? view.children[0] : void 0;
+  if (child?.matches('[data-component="pane"]')) return paneScroller(child);
+  return child?.matches(NESTED_LAYOUT) ? void 0 : view;
+}
+function wireBarOverlay(section) {
+  const view = section.ownerDocument.defaultView ?? window;
+  let bar;
+  let size;
+  let scroller;
+  let scrollbarSize = 0;
+  const writeProperty = (name, value) => {
+    if (section.style.getPropertyValue(name) === value) return;
+    if (value) section.style.setProperty(name, value);
+    else section.style.removeProperty(name);
+  };
+  const publish = () => {
+    const measured = bar !== void 0 && size !== void 0;
+    writeProperty(BAR_BLOCK_SIZE, measured ? `${size}px` : "");
+    writeProperty(
+      BAR_SCROLLBAR_INLINE_SIZE,
+      measured && scrollbarSize > 0 ? `${scrollbarSize}px` : ""
+    );
+    if (section.getAttribute("style") === "") section.removeAttribute("style");
+    if (measured && section.getAttribute(BAR_OVERLAY) !== "measured")
+      section.setAttribute(BAR_OVERLAY, "measured");
+    else if (!measured && section.hasAttribute(BAR_OVERLAY))
+      section.removeAttribute(BAR_OVERLAY);
+  };
+  const measureScrollbar = () => {
+    if (!scroller) {
+      scrollbarSize = 0;
+      return;
+    }
+    const style = view.getComputedStyle(scroller);
+    scrollbarSize = Math.max(
+      0,
+      scroller.offsetWidth - scroller.clientWidth - (Number.parseFloat(style.borderLeftWidth) || 0) - (Number.parseFloat(style.borderRightWidth) || 0)
+    );
+  };
+  const resizeObserver = view.ResizeObserver ? new view.ResizeObserver((entries) => {
+    for (const entry of entries)
+      if (entry.target === bar)
+        size = entry.borderBoxSize?.[0]?.blockSize ?? entry.target.getBoundingClientRect().height;
+      else if (entry.target === scroller) measureScrollbar();
+    publish();
+  }) : void 0;
+  const sync = () => {
+    const next = section.getAttribute("data-bar-presentation") === "overlay" ? section.querySelector(
+      ":scope > .kui-tab-scaffold__bar"
+    ) ?? void 0 : void 0;
+    if (next !== bar) {
+      if (bar) resizeObserver?.unobserve(bar);
+      bar = next;
+      if (!bar) size = void 0;
+      else {
+        if (size === void 0 || !resizeObserver)
+          size = bar.getBoundingClientRect().height;
+        resizeObserver?.observe(bar, { box: "border-box" });
+      }
+    }
+    const covered = bar ? activeScroller(section) : void 0;
+    if (covered !== scroller) {
+      if (scroller) resizeObserver?.unobserve(scroller);
+      scroller = covered;
+      measureScrollbar();
+      if (scroller) resizeObserver?.observe(scroller);
+    }
+    publish();
+  };
+  const mutationObserver = new MutationObserver(sync);
+  mutationObserver.observe(section, {
+    childList: true,
+    attributes: true,
+    attributeFilter: ["data-bar-presentation", BAR_OVERLAY, "style"]
+  });
+  const sceneObserver = new MutationObserver(sync);
+  const scenes = section.querySelector(":scope > .kui-tab-scaffold__scenes");
+  if (scenes)
+    sceneObserver.observe(scenes, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: [
+        "data-active",
+        "data-nav-active",
+        "data-nav-exiting",
+        "data-bottom-toolbar-presentation"
+      ]
+    });
+  sync();
+  return () => {
+    mutationObserver.disconnect();
+    sceneObserver.disconnect();
+    resizeObserver?.disconnect();
+    bar = void 0;
+    size = void 0;
+    scroller = void 0;
+    scrollbarSize = 0;
+    publish();
+  };
+}
+function wireTabNavigator(root, options) {
+  const section = root.matches('[data-component="tab-scaffold"]') ? root : root.querySelector('[data-component="tab-scaffold"]');
+  if (!(section instanceof HTMLElement)) return () => {
+  };
+  const stopClicks = delegate(
+    section,
+    "click",
+    "[data-tab-scaffold-tab]",
+    (_event, target) => {
+      const tabId = target.getAttribute("data-tab-scaffold-tab");
+      if (tabId) options.onSelect(tabId);
+    }
+  );
+  const stopOverlay = wireBarOverlay(section);
+  return () => {
+    stopClicks();
+    stopOverlay();
+  };
+}
+
+export { wireTabNavigator };
+
+//# sourceMappingURL=wire-tab-navigator.js.map

package/dist/wire-tab-navigator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/tab-navigator/wiring/wire-tab-navigator.ts"],"names":[],"mappings":"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","file":"wire-tab-navigator.js","sourcesContent":["import { delegate } from 'kerfjs';\n\n/** On an overlay-bar TabNavigator: the wiring has measured its live bar. */\nconst BAR_OVERLAY = 'data-bar-overlay';\n/** The measured bar's border-box block size, published on the root. */\nconst BAR_BLOCK_SIZE = '--_kui-tab-scaffold-bar-block-size';\n/**\n * The inline size of the active scene's classic (space-taking) vertical\n * scrollbar running beneath the bar, which the bar leaves uncovered. Unset for\n * an overlay scrollbar, which takes no space.\n */\nconst BAR_SCROLLBAR_INLINE_SIZE =\n  '--_kui-tab-scaffold-bar-scrollbar-inline-size';\n/** A layout that, as a scene's (or view's) only child, owns its scroller. */\nconst NESTED_LAYOUT = ['nav-stack', 'split-view', 'workbench', 'tab-scaffold']\n  .map((name) => `[data-component=\"${name}\"]`)\n  .join(', ');\n\n/**\n * A sole Pane's scroller when it reaches the bottom edge: its content, unless\n * a footer sits between the content and the bar.\n */\nfunction paneScroller(pane: Element): HTMLElement | undefined {\n  if (pane.querySelector(':scope > .kui-pane__footer')) return undefined;\n  return (\n    pane.querySelector<HTMLElement>(':scope > .kui-pane__content') ?? undefined\n  );\n}\n\n/**\n * The element whose vertical scrollbar runs beneath the bar in the active\n * scene: the scene itself; a sole Pane's content; or, in a sole NavStack\n * without a docked bottom toolbar, its active view (or that view's sole Pane's\n * content). Undefined when chrome (a Pane footer, a docked stack toolbar) or a\n * nested layout's own scroller ends above the bar.\n */\nfunction activeScroller(section: Element): HTMLElement | undefined {\n  const scene = section.querySelector<HTMLElement>(\n    ':scope > .kui-tab-scaffold__scenes > .kui-tab-scaffold__scene[data-active=\"true\"]',\n  );\n  if (!scene) return undefined;\n  const only = scene.children.length === 1 ? scene.children[0]! : undefined;\n  if (!only?.matches(`[data-component=\"pane\"], ${NESTED_LAYOUT}`)) return scene;\n  if (only.matches('[data-component=\"pane\"]')) return paneScroller(only);\n  if (!only.matches('[data-component=\"nav-stack\"]')) return undefined;\n  if (\n    only.querySelector(':scope > [data-nav-stack-bottom]') &&\n    only.getAttribute('data-bottom-toolbar-presentation') !== 'overlay'\n  )\n    return undefined;\n  const views = [\n    ...only.querySelectorAll<HTMLElement>(\n      ':scope > [data-nav-stack-viewport] > [data-nav-active=\"true\"]:not([data-nav-exiting=\"true\"])',\n    ),\n  ];\n  const view = views.at(-1);\n  if (!view) return undefined;\n  const child = view.children.length === 1 ? view.children[0]! : undefined;\n  if (child?.matches('[data-component=\"pane\"]')) return paneScroller(child);\n  return child?.matches(NESTED_LAYOUT) ? undefined : view;\n}\n\n/**\n * `barPresentation=\"overlay\"`: measure the live tab bar's border box (bottom\n * safe area and its 1px top edge included) and publish it on the root with\n * the gate that lays the bar over the scenes. The size follows the bar as\n * labels wrap, text zooms, or the safe area changes, and a re-render that\n * replaces the bar or strips the published state gets it back before paint.\n */\nfunction wireBarOverlay(section: HTMLElement): () => void {\n  const view = section.ownerDocument.defaultView ?? window;\n  let bar: HTMLElement | undefined;\n  let size: number | undefined;\n  let scroller: HTMLElement | undefined;\n  let scrollbarSize = 0;\n  const writeProperty = (name: string, value: string): void => {\n    if (section.style.getPropertyValue(name) === value) return;\n    if (value) section.style.setProperty(name, value);\n    else section.style.removeProperty(name);\n  };\n  const publish = (): void => {\n    const measured = bar !== undefined && size !== undefined;\n    writeProperty(BAR_BLOCK_SIZE, measured ? `${size}px` : '');\n    writeProperty(\n      BAR_SCROLLBAR_INLINE_SIZE,\n      measured && scrollbarSize > 0 ? `${scrollbarSize}px` : '',\n    );\n    if (section.getAttribute('style') === '') section.removeAttribute('style');\n    // The gate changes only when it must, so the observer below settles.\n    if (measured && section.getAttribute(BAR_OVERLAY) !== 'measured')\n      section.setAttribute(BAR_OVERLAY, 'measured');\n    else if (!measured && section.hasAttribute(BAR_OVERLAY))\n      section.removeAttribute(BAR_OVERLAY);\n  };\n  const measureScrollbar = (): void => {\n    if (!scroller) {\n      scrollbarSize = 0;\n      return;\n    }\n    const style = view.getComputedStyle(scroller);\n    scrollbarSize = Math.max(\n      0,\n      scroller.offsetWidth -\n        scroller.clientWidth -\n        (Number.parseFloat(style.borderLeftWidth) || 0) -\n        (Number.parseFloat(style.borderRightWidth) || 0),\n    );\n  };\n  const resizeObserver = view.ResizeObserver\n    ? new view.ResizeObserver((entries) => {\n        for (const entry of entries)\n          if (entry.target === bar)\n            size =\n              entry.borderBoxSize?.[0]?.blockSize ??\n              entry.target.getBoundingClientRect().height;\n          // A scrollbar appearing or leaving resizes the content box.\n          else if (entry.target === scroller) measureScrollbar();\n        publish();\n      })\n    : undefined;\n  const sync = (): void => {\n    const next =\n      section.getAttribute('data-bar-presentation') === 'overlay'\n        ? (section.querySelector<HTMLElement>(\n            ':scope > .kui-tab-scaffold__bar',\n          ) ?? undefined)\n        : undefined;\n    if (next !== bar) {\n      if (bar) resizeObserver?.unobserve(bar);\n      bar = next;\n      if (!bar) size = undefined;\n      else {\n        // A replacement keeps the last size until the observer reports it\n        // after layout; a first bar (or one with no observer) is measured now.\n        if (size === undefined || !resizeObserver)\n          size = bar.getBoundingClientRect().height;\n        // The border box: a forced-colors edge changes no content box.\n        resizeObserver?.observe(bar, { box: 'border-box' });\n      }\n    }\n    // The active scroller changes with the active tab, a stack's push or pop,\n    // or a re-render of the scene.\n    const covered = bar ? activeScroller(section) : undefined;\n    if (covered !== scroller) {\n      if (scroller) resizeObserver?.unobserve(scroller);\n      scroller = covered;\n      measureScrollbar();\n      if (scroller) resizeObserver?.observe(scroller);\n    }\n    publish();\n  };\n  const mutationObserver = new MutationObserver(sync);\n  mutationObserver.observe(section, {\n    childList: true,\n    attributes: true,\n    attributeFilter: ['data-bar-presentation', BAR_OVERLAY, 'style'],\n  });\n  // Scene switches and nested stack transitions below the root.\n  const sceneObserver = new MutationObserver(sync);\n  const scenes = section.querySelector(':scope > .kui-tab-scaffold__scenes');\n  if (scenes)\n    sceneObserver.observe(scenes, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: [\n        'data-active',\n        'data-nav-active',\n        'data-nav-exiting',\n        'data-bottom-toolbar-presentation',\n      ],\n    });\n  sync();\n  return () => {\n    mutationObserver.disconnect();\n    sceneObserver.disconnect();\n    resizeObserver?.disconnect();\n    bar = undefined;\n    size = undefined;\n    scroller = undefined;\n    scrollbarSize = 0;\n    publish();\n  };\n}\n\nexport interface WireTabNavigatorOptions {\n  /** Invoked with the selected tab id when a bottom-bar tab is activated. */\n  onSelect: (tabId: string) => void;\n}\n\n/**\n * Wire a `TabNavigator`'s bottom tab bar: clicking a tab calls `onSelect` with its\n * id (the app then updates its controlled `active`). With\n * `barPresentation=\"overlay\"` it also measures the live bar and lays it over\n * the scenes (see `TabNavigatorProps.barPresentation`). Returns a disposer.\n */\nexport function wireTabNavigator(\n  root: Element,\n  options: WireTabNavigatorOptions,\n): () => void {\n  const section = root.matches('[data-component=\"tab-scaffold\"]')\n    ? root\n    : root.querySelector('[data-component=\"tab-scaffold\"]');\n  if (!(section instanceof HTMLElement)) return () => {};\n  const stopClicks = delegate(\n    section,\n    'click',\n    '[data-tab-scaffold-tab]',\n    (_event, target) => {\n      const tabId = target.getAttribute('data-tab-scaffold-tab');\n      if (tabId) options.onSelect(tabId);\n    },\n  );\n  const stopOverlay = wireBarOverlay(section);\n  return () => {\n    stopClicks();\n    stopOverlay();\n  };\n}\n"]}

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

@@ -1,4 +1,6 @@
 import { Signal } from 'kerfjs';
+import { d as TokenSearchModel } from './token-search-model-aYR0YAei.js';
+import './semantic-content-BbzjvSu9.js';
 
 interface TokenSearchSubmit {
     id: string;
@@ -76,6 +78,8 @@ interface TokenSearchCollapsibleOptions {
     signals?: Readonly<Record<string, Signal<boolean>>>;
 }
 interface WireTokenSearchFieldsOptions {
+    /** Optional automatic grammar/suggestion models, keyed by TokenSearchField id. */
+    models?: Readonly<Record<string, TokenSearchModel>>;
     onSubmit?: (submission: TokenSearchSubmit) => void;
     /** Fired on every editor `input`, after the browser mutates it, so a caller can drop its own `input` listener. */
     onEdit?: (edit: TokenSearchEdit) => void;
@@ -106,6 +110,6 @@ interface TokenSearchFieldsHandle {
  * expand/collapse/focus. Returns a {@link TokenSearchFieldsHandle} — a disposer that also
  * exposes the managed `expanded` state per field id.
  */
-declare function wireTokenSearchFields(root: HTMLElement, { onSubmit, onEdit, collapsible, keyboard, }?: WireTokenSearchFieldsOptions): TokenSearchFieldsHandle;
+declare function wireTokenSearchFields(root: HTMLElement, { models, onSubmit, onEdit, collapsible, keyboard, }?: WireTokenSearchFieldsOptions): TokenSearchFieldsHandle;
 
 export { type TokenSearchCollapsibleOptions, type TokenSearchEdit, type TokenSearchFieldsHandle, type TokenSearchKeyboardOptions, type TokenSearchSubmit, type TokenSearchTokenRemoval, type WireTokenSearchFieldsOptions, wireTokenSearchFields };

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

@@ -1,4 +1,5 @@
-export { wireTokenSearchFields } from './chunk-OJWWHFH3.js';
+export { wireTokenSearchFields } from './chunk-YOA5W5ZH.js';
+
 
 
 

package/dist/wire-toolbar-visibility.d.ts

@@ -0,0 +1,13 @@
+type Root = HTMLElement | Document;
+/**
+ * Wire ToolbarText and ToolbarControlGroup width thresholds below root.
+ * Below is strict: hideBelow hides at width < threshold; showBelow hides at
+ * width >= threshold. Percentages use the closest Toolbar's content box;
+ * em and custom properties use the item's own inherited context. Invalid,
+ * negative, unresolved, or contradictory thresholds leave the item visible.
+ * This helper changes only a component-owned visibility marker. Existing
+ * CSS visibility policies still apply. Dispose with the owning application.
+ */
+declare function wireToolbarVisibility(root: Root): () => void;
+
+export { wireToolbarVisibility };

package/dist/wire-toolbar-visibility.js

@@ -0,0 +1,3 @@
+export { wireToolbarVisibility } from './chunk-2GOCOLQL.js';
+
+//# sourceMappingURL=wire-toolbar-visibility.js.map

package/dist/wire-toolbar-visibility.js.map

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