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

package/dist/wire-nav-stack.js

@@ -1,7 +1,36 @@
 import { delegate } from 'kerfjs';
 
-// src/wire-nav-stack.ts
+// src/components/navigation/nav-stack/wiring/wire-nav-stack.ts
 var DEFAULT_DURATION = 200;
+var CHROME_OVERLAY = "data-chrome-overlay";
+var BOTTOM_TOOLBAR_OVERLAY = "data-bottom-toolbar-overlay";
+var OVERLAY_EDGES = [
+  {
+    presentation: "data-chrome-presentation",
+    element: ":scope > [data-nav-stack-chrome]:not([data-nav-chrome-copy])",
+    blockSize: "--_kui-nav-stack-chrome-block-size",
+    scrollbarInlineSize: "--_kui-nav-stack-scrollbar-inline-size",
+    // A Pane header lies beneath the chrome and starts its content below it.
+    paneChrome: ":scope > :is(.kui-pane__header, .kui-pane__toolbar)"
+  },
+  {
+    presentation: "data-bottom-toolbar-presentation",
+    element: ":scope > [data-nav-stack-bottom]:not([data-nav-chrome-copy])",
+    blockSize: "--_kui-nav-stack-bottom-block-size",
+    scrollbarInlineSize: "--_kui-nav-stack-bottom-scrollbar-inline-size",
+    // A Pane footer lies beneath the toolbar and ends its content above it.
+    paneChrome: ":scope > .kui-pane__footer"
+  }
+];
+var NESTED_LAYOUT = ["nav-stack", "split-view", "workbench", "tab-scaffold"].map((name) => `[data-component="${name}"]`).join(", ");
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
 function viewsOf(viewport) {
   return Array.from(
     viewport.querySelectorAll(":scope > .kui-nav-stack__view")
@@ -16,6 +45,16 @@ function topView(viewport) {
 function reducedMotion(view) {
   return typeof view.matchMedia === "function" && view.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
+function chromeOf(section) {
+  return Array.from(
+    section.querySelectorAll(
+      ":scope > [data-nav-stack-chrome]:not([data-nav-chrome-copy]), :scope > [data-nav-stack-bottom]:not([data-nav-chrome-copy])"
+    )
+  );
+}
+function availableFocusTarget(element) {
+  return element instanceof HTMLElement && element.isConnected && !element.matches('[disabled], [aria-disabled="true"]') && !element.closest('[inert], [hidden], [aria-hidden="true"]');
+}
 function wireNavStack(root, options = {}) {
   const section = root.matches('[data-component="nav-stack"]') ? root : root.querySelector('[data-component="nav-stack"]');
   const viewport = section?.querySelector("[data-nav-stack-viewport]");
@@ -23,6 +62,13 @@ function wireNavStack(root, options = {}) {
   };
   const view = section.ownerDocument.defaultView ?? window;
   const duration = options.duration ?? DEFAULT_DURATION;
+  const previousDuration = section.style.getPropertyValue(
+    "--kui-nav-stack-transition-duration"
+  );
+  section.style.setProperty(
+    "--kui-nav-stack-transition-duration",
+    `${Math.max(0, duration)}ms`
+  );
   const disposeBack = delegate(
     section,
     "click",
@@ -31,6 +77,37 @@ function wireNavStack(root, options = {}) {
   );
   let activeKey = topView(viewport)?.dataset.navKey;
   const timers = /* @__PURE__ */ new Set();
+  const frames = /* @__PURE__ */ new Set();
+  const frame = (fn) => {
+    const id = view.requestAnimationFrame(() => {
+      frames.delete(id);
+      fn();
+    });
+    frames.add(id);
+  };
+  const finishTransition = () => {
+    for (const id of frames) view.cancelAnimationFrame(id);
+    frames.clear();
+    for (const id of timers) view.clearTimeout(id);
+    timers.clear();
+    section.querySelectorAll(":scope > [data-nav-chrome-copy]").forEach((element) => element.remove());
+    chromeOf(section).forEach(
+      (element) => element.classList.remove("kui-nav-stack__chrome--entering")
+    );
+    viewsOf(viewport).forEach((element) => {
+      if (element.dataset.navExiting === "true") element.remove();
+      else {
+        element.classList.remove("kui-nav-stack__view--entering");
+        delete element.dataset.navRevealed;
+      }
+    });
+    delete section.dataset.navChromeTransition;
+  };
+  const rememberedFocus = /* @__PURE__ */ new Map();
+  const generatedFallbacks = /* @__PURE__ */ new Map();
+  let chromeSnapshots = chromeOf(section).map(
+    (element) => element.cloneNode(true)
+  );
   const settle = (fn) => {
     if (duration <= 0 || reducedMotion(view)) {
       fn();
@@ -48,53 +125,272 @@ function wireNavStack(root, options = {}) {
       el.classList.add("kui-nav-stack__view--entering");
       if (animated) {
         void el.offsetWidth;
-        view.requestAnimationFrame(
-          () => el.classList.remove("kui-nav-stack__view--entering")
-        );
+        frame(() => el.classList.remove("kui-nav-stack__view--entering"));
       } else {
         el.classList.remove("kui-nav-stack__view--entering");
       }
     } else if (animated) {
-      view.requestAnimationFrame(
-        () => el.classList.add("kui-nav-stack__view--exiting")
-      );
+      frame(() => el.classList.add("kui-nav-stack__view--exiting"));
     } else {
       el.classList.add("kui-nav-stack__view--exiting");
     }
   };
+  const rememberFocusedView = (target) => {
+    if (!(target instanceof HTMLElement)) return;
+    const owner = target.closest(".kui-nav-stack__view");
+    const key = owner?.dataset.navKey;
+    if (key && owner !== target && viewport.contains(owner))
+      rememberedFocus.set(key, target);
+  };
+  const focusInto = (targetView) => {
+    const key = targetView.dataset.navKey;
+    const remembered = key ? rememberedFocus.get(key) : void 0;
+    const preferred = Array.from(
+      targetView.querySelectorAll("[data-nav-focus]")
+    ).find(availableFocusTarget);
+    const first = Array.from(
+      targetView.querySelectorAll(FOCUSABLE_SELECTOR)
+    ).find(availableFocusTarget);
+    const target = (availableFocusTarget(remembered) && targetView.contains(remembered) ? remembered : void 0) ?? preferred ?? first;
+    if (target) {
+      target.focus({ preventScroll: true });
+      return;
+    }
+    if (!generatedFallbacks.has(targetView)) {
+      generatedFallbacks.set(
+        targetView,
+        targetView.hasAttribute("tabindex") ? targetView.getAttribute("tabindex") : null
+      );
+      targetView.tabIndex = -1;
+    }
+    targetView.focus({ preventScroll: true });
+  };
+  const edges = OVERLAY_EDGES.map((edge) => [
+    edge,
+    { covers: false }
+  ]);
+  const measuredEdge = (state) => state.element !== void 0 && state.size !== void 0;
+  let measuredScroller;
+  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 publishOverlay = () => {
+    for (const [edge, state] of edges) {
+      const measured = measuredEdge(state);
+      writeProperty(edge.blockSize, measured ? `${state.size}px` : "");
+      writeProperty(
+        edge.scrollbarInlineSize,
+        measured && state.covers && scrollbarSize > 0 ? `${scrollbarSize}px` : ""
+      );
+    }
+    if (section.getAttribute("style") === "") section.removeAttribute("style");
+    const [top, bottom] = edges.map(([, state]) => measuredEdge(state));
+    if (top && section.getAttribute(CHROME_OVERLAY) !== "measured")
+      section.setAttribute(CHROME_OVERLAY, "measured");
+    else if (!top && section.hasAttribute(CHROME_OVERLAY))
+      section.removeAttribute(CHROME_OVERLAY);
+    if (bottom && section.getAttribute(BOTTOM_TOOLBAR_OVERLAY) !== "measured")
+      section.setAttribute(BOTTOM_TOOLBAR_OVERLAY, "measured");
+    else if (!bottom && section.hasAttribute(BOTTOM_TOOLBAR_OVERLAY))
+      section.removeAttribute(BOTTOM_TOOLBAR_OVERLAY);
+  };
+  const activeScroller = () => {
+    const top = topView(viewport);
+    const only = top?.children.length === 1 ? top.children[0] : void 0;
+    if (!only) return { scroller: top };
+    if (only.matches(".kui-pane"))
+      return {
+        scroller: only.querySelector(":scope > .kui-pane__content") ?? void 0,
+        pane: only
+      };
+    return { scroller: only.matches(NESTED_LAYOUT) ? void 0 : top };
+  };
+  const measureScrollbar = () => {
+    const scroller = measuredScroller;
+    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 chromeObserver = view.ResizeObserver ? new view.ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const state = edges.find(
+        ([, edgeState]) => edgeState.element === entry.target
+      )?.[1];
+      if (state)
+        state.size = entry.borderBoxSize?.[0]?.blockSize ?? entry.target.getBoundingClientRect().height;
+      else if (entry.target === measuredScroller) measureScrollbar();
+    }
+    publishOverlay();
+  }) : void 0;
+  const syncOverlay = () => {
+    for (const [edge, state] of edges) {
+      const element = section.getAttribute(edge.presentation) === "overlay" ? section.querySelector(edge.element) ?? void 0 : void 0;
+      if (element === state.element) continue;
+      if (state.element) chromeObserver?.unobserve(state.element);
+      state.element = element;
+      if (!element) state.size = void 0;
+      else {
+        if (state.size === void 0 || !chromeObserver)
+          state.size = element.getBoundingClientRect().height;
+        chromeObserver?.observe(element, { box: "border-box" });
+      }
+    }
+    const { scroller, pane } = activeScroller();
+    for (const [edge, state] of edges)
+      state.covers = state.element !== void 0 && scroller !== void 0 && !pane?.querySelector(edge.paneChrome);
+    const covered = edges.some(([, state]) => state.covers) ? scroller : void 0;
+    if (covered !== measuredScroller) {
+      if (measuredScroller) chromeObserver?.unobserve(measuredScroller);
+      measuredScroller = covered;
+      measureScrollbar();
+      if (measuredScroller) chromeObserver?.observe(measuredScroller);
+    }
+    publishOverlay();
+  };
+  const overlayObserver = new MutationObserver(syncOverlay);
+  overlayObserver.observe(section, {
+    childList: true,
+    attributes: true,
+    attributeFilter: [
+      ...OVERLAY_EDGES.map((edge) => edge.presentation),
+      CHROME_OVERLAY,
+      BOTTOM_TOOLBAR_OVERLAY,
+      "style"
+    ]
+  });
+  syncOverlay();
+  const onFocusIn = (event) => rememberFocusedView(event.target);
+  section.addEventListener("focusin", onFocusIn);
+  rememberFocusedView(section.ownerDocument.activeElement);
+  const crossFadeChrome = () => {
+    const current = chromeOf(section);
+    const animated = duration > 0 && !reducedMotion(view);
+    if (!animated) {
+      chromeSnapshots = current.map(
+        (element) => element.cloneNode(true)
+      );
+      return;
+    }
+    section.dataset.navChromeTransition = "true";
+    const copies = chromeSnapshots.map((snapshot) => {
+      const copy = snapshot.cloneNode(true);
+      copy.classList.add("kui-nav-stack__chrome-copy");
+      copy.dataset.navChromeCopy = "";
+      copy.setAttribute("aria-hidden", "true");
+      copy.setAttribute("inert", "");
+      if (copy.hasAttribute("data-nav-stack-bottom"))
+        copy.classList.add("kui-nav-stack__chrome-copy--bottom");
+      section.append(copy);
+      return copy;
+    });
+    current.forEach(
+      (element) => element.classList.add("kui-nav-stack__chrome--entering")
+    );
+    void section.offsetWidth;
+    frame(() => {
+      current.forEach(
+        (element) => element.classList.remove("kui-nav-stack__chrome--entering")
+      );
+      copies.forEach(
+        (copy) => copy.classList.add("kui-nav-stack__chrome-copy--exiting")
+      );
+    });
+    settle(() => {
+      copies.forEach((copy) => copy.remove());
+      delete section.dataset.navChromeTransition;
+    });
+    chromeSnapshots = current.map((element) => {
+      const snapshot = element.cloneNode(true);
+      snapshot.classList.remove("kui-nav-stack__chrome--entering");
+      return snapshot;
+    });
+  };
   const observer = new MutationObserver((records) => {
     const removed = [];
-    let added = false;
     for (const record of records) {
+      if (record.target !== viewport) continue;
       record.removedNodes.forEach((node) => {
         if (node instanceof HTMLElement && node.classList.contains("kui-nav-stack__view") && node.dataset.navExiting !== "true")
           removed.push(node);
       });
-      record.addedNodes.forEach((node) => {
-        if (node instanceof HTMLElement && node.classList.contains("kui-nav-stack__view"))
-          added = true;
-      });
     }
     const top = topView(viewport);
     const currentKey = top?.dataset.navKey;
     const poppedTop = removed.find((node) => node.dataset.navKey === activeKey);
     if (poppedTop && currentKey !== activeKey) {
+      finishTransition();
+      poppedTop.classList.remove(
+        "kui-nav-stack__view--entering",
+        "kui-nav-stack__view--exiting"
+      );
       poppedTop.dataset.navExiting = "true";
       poppedTop.setAttribute("aria-hidden", "true");
       viewport.append(poppedTop);
+      void poppedTop.offsetWidth;
       play(poppedTop, "exiting");
+      crossFadeChrome();
+      if (top) focusInto(top);
       settle(() => poppedTop.remove());
-    } else if (added && currentKey !== activeKey && top) {
+    } else if (currentKey !== activeKey && top) {
+      finishTransition();
+      const previous = viewsOf(viewport).find(
+        (element) => element.dataset.navKey === activeKey
+      );
+      if (previous) {
+        previous.dataset.navRevealed = "true";
+        settle(() => delete previous.dataset.navRevealed);
+      }
+      rememberFocusedView(section.ownerDocument.activeElement);
       play(top, "entering");
+      crossFadeChrome();
+      focusInto(top);
     }
     activeKey = currentKey;
+    syncOverlay();
+  });
+  observer.observe(viewport, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["data-nav-key", "data-nav-active"]
   });
-  observer.observe(viewport, { childList: true });
   return () => {
     disposeBack();
+    section.removeEventListener("focusin", onFocusIn);
     observer.disconnect();
-    for (const timer of timers) view.clearTimeout(timer);
-    timers.clear();
+    overlayObserver.disconnect();
+    chromeObserver?.disconnect();
+    for (const [, state] of edges) {
+      state.element = void 0;
+      state.size = void 0;
+      state.covers = false;
+    }
+    measuredScroller = void 0;
+    scrollbarSize = 0;
+    publishOverlay();
+    finishTransition();
+    for (const [element, previousTabIndex] of generatedFallbacks) {
+      if (!element.isConnected || element.tabIndex !== -1) continue;
+      if (previousTabIndex === null) element.removeAttribute("tabindex");
+      else element.setAttribute("tabindex", previousTabIndex);
+    }
+    generatedFallbacks.clear();
+    rememberedFocus.clear();
+    if (previousDuration)
+      section.style.setProperty(
+        "--kui-nav-stack-transition-duration",
+        previousDuration
+      );
+    else section.style.removeProperty("--kui-nav-stack-transition-duration");
   };
 }
 

package/dist/wire-nav-stack.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/wire-nav-stack.ts"],"names":[],"mappings":"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","file":"wire-nav-stack.js","sourcesContent":["import { delegate } from 'kerfjs';\n\nexport interface WireNavStackOptions {\n  /** Invoked when the back control is activated. The app pops its own stack. */\n  onBack?: () => void;\n  /** Transition duration in ms (default 200). Set 0 to disable animation. */\n  duration?: number;\n}\n\nconst DEFAULT_DURATION = 200;\n\nfunction viewsOf(viewport: Element): HTMLElement[] {\n  return Array.from(\n    viewport.querySelectorAll<HTMLElement>(':scope > .kui-nav-stack__view'),\n  );\n}\n\nfunction topView(viewport: Element): HTMLElement | undefined {\n  const live = viewsOf(viewport).filter(\n    (view) => view.dataset.navExiting !== 'true',\n  );\n  return live[live.length - 1];\n}\n\nfunction reducedMotion(view: Window): boolean {\n  return (\n    typeof view.matchMedia === 'function' &&\n    view.matchMedia('(prefers-reduced-motion: reduce)').matches\n  );\n}\n\n/**\n * Animate a `NavStack`'s push/pop transitions and wire its back control. The app\n * owns the stack (a signal of `NavStackView[]`) and re-renders `NavStack` when it\n * changes; this helper slides the content and settles the chrome across each\n * change, and calls `onBack` when the back control is used. Returns a disposer.\n */\nexport function wireNavStack(\n  root: Element,\n  options: WireNavStackOptions = {},\n): () => void {\n  const section = root.matches('[data-component=\"nav-stack\"]')\n    ? root\n    : root.querySelector('[data-component=\"nav-stack\"]');\n  const viewport = section?.querySelector('[data-nav-stack-viewport]');\n  if (!(section instanceof HTMLElement) || !viewport) return () => {};\n\n  const view = section.ownerDocument.defaultView ?? window;\n  const duration = options.duration ?? DEFAULT_DURATION;\n  const disposeBack = delegate(section, 'click', '[data-nav-back]', () =>\n    options.onBack?.(),\n  );\n\n  let activeKey = topView(viewport)?.dataset.navKey;\n  const timers = new Set<number>();\n\n  const settle = (fn: () => void): void => {\n    if (duration <= 0 || reducedMotion(view)) {\n      fn();\n      return;\n    }\n    const timer = view.setTimeout(() => {\n      timers.delete(timer);\n      fn();\n    }, duration);\n    timers.add(timer);\n  };\n\n  const play = (el: HTMLElement, kind: 'entering' | 'exiting'): void => {\n    const animated = duration > 0 && !reducedMotion(view);\n    if (kind === 'entering') {\n      // Push: start the incoming view off the trailing edge, then release it so\n      // it slides to rest (translateX(100%) → 0).\n      el.classList.add('kui-nav-stack__view--entering');\n      if (animated) {\n        // Force a reflow so the starting transform applies before we clear it.\n        void el.offsetWidth;\n        view.requestAnimationFrame(() =>\n          el.classList.remove('kui-nav-stack__view--entering'),\n        );\n      } else {\n        el.classList.remove('kui-nav-stack__view--entering');\n      }\n    } else if (animated) {\n      // Pop: the outgoing view is at rest; add the off-edge class on the next\n      // frame so it slides OUT (translateX(0) → 100%), not in.\n      view.requestAnimationFrame(() =>\n        el.classList.add('kui-nav-stack__view--exiting'),\n      );\n    } else {\n      el.classList.add('kui-nav-stack__view--exiting');\n    }\n  };\n\n  const observer = new MutationObserver((records) => {\n    const removed: HTMLElement[] = [];\n    let added = false;\n    for (const record of records) {\n      record.removedNodes.forEach((node) => {\n        if (\n          node instanceof HTMLElement &&\n          node.classList.contains('kui-nav-stack__view') &&\n          node.dataset.navExiting !== 'true'\n        )\n          removed.push(node);\n      });\n      record.addedNodes.forEach((node) => {\n        if (\n          node instanceof HTMLElement &&\n          node.classList.contains('kui-nav-stack__view')\n        )\n          added = true;\n      });\n    }\n\n    const top = topView(viewport);\n    const currentKey = top?.dataset.navKey;\n    const poppedTop = removed.find((node) => node.dataset.navKey === activeKey);\n\n    if (poppedTop && currentKey !== activeKey) {\n      // Pop: bring the removed node back briefly to slide it out over the revealed view.\n      poppedTop.dataset.navExiting = 'true';\n      poppedTop.setAttribute('aria-hidden', 'true');\n      viewport.append(poppedTop);\n      play(poppedTop, 'exiting');\n      settle(() => poppedTop.remove());\n    } else if (added && currentKey !== activeKey && top) {\n      // Push: slide the new top in.\n      play(top, 'entering');\n    }\n\n    activeKey = currentKey;\n  });\n  observer.observe(viewport, { childList: true });\n\n  return () => {\n    disposeBack();\n    observer.disconnect();\n    for (const timer of timers) view.clearTimeout(timer);\n    timers.clear();\n  };\n}\n"]}
+{"version":3,"sources":["../src/components/navigation/nav-stack/wiring/wire-nav-stack.ts"],"names":[],"mappings":"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","file":"wire-nav-stack.js","sourcesContent":["import { delegate } from 'kerfjs';\n\nexport interface WireNavStackOptions {\n  /** Invoked when the back control is activated. The app pops its own stack. */\n  onBack?: () => void;\n  /** Transition duration in ms (default 200). Set 0 to disable animation. */\n  duration?: number;\n}\n\nconst DEFAULT_DURATION = 200;\n/** On an overlay-chrome NavStack: the wiring has measured its live chrome. */\nconst CHROME_OVERLAY = 'data-chrome-overlay';\n/** On an overlay-bottom-toolbar NavStack: the wiring has measured it. */\nconst BOTTOM_TOOLBAR_OVERLAY = 'data-bottom-toolbar-overlay';\n/**\n * One overlay-capable chrome edge of a NavStack: the top chrome\n * (`chromePresentation`) or the bottom toolbar (`bottomToolbarPresentation`).\n * Each names the root attribute that opts it in, its live element (never a\n * cross-fading copy), the border-box block size the wiring publishes on the\n * root once it has measured that element (beside its gate), the root\n * property for the classic scrollbar inline size it leaves uncovered, and\n * the sole-Pane slot that, when present, keeps the Pane's scroller clear of\n * it.\n */\ninterface OverlayEdge {\n  readonly presentation: string;\n  readonly element: string;\n  readonly blockSize: string;\n  readonly scrollbarInlineSize: string;\n  readonly paneChrome: string;\n}\n\nconst OVERLAY_EDGES: readonly OverlayEdge[] = [\n  {\n    presentation: 'data-chrome-presentation',\n    element: ':scope > [data-nav-stack-chrome]:not([data-nav-chrome-copy])',\n    blockSize: '--_kui-nav-stack-chrome-block-size',\n    scrollbarInlineSize: '--_kui-nav-stack-scrollbar-inline-size',\n    // A Pane header lies beneath the chrome and starts its content below it.\n    paneChrome: ':scope > :is(.kui-pane__header, .kui-pane__toolbar)',\n  },\n  {\n    presentation: 'data-bottom-toolbar-presentation',\n    element: ':scope > [data-nav-stack-bottom]:not([data-nav-chrome-copy])',\n    blockSize: '--_kui-nav-stack-bottom-block-size',\n    scrollbarInlineSize: '--_kui-nav-stack-bottom-scrollbar-inline-size',\n    // A Pane footer lies beneath the toolbar and ends its content above it.\n    paneChrome: ':scope > .kui-pane__footer',\n  },\n];\n/** A layout that, as a view's only child, owns its own chrome and scroller. */\nconst NESTED_LAYOUT = ['nav-stack', 'split-view', 'workbench', 'tab-scaffold']\n  .map((name) => `[data-component=\"${name}\"]`)\n  .join(', ');\nconst FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\nfunction viewsOf(viewport: Element): HTMLElement[] {\n  return Array.from(\n    viewport.querySelectorAll<HTMLElement>(':scope > .kui-nav-stack__view'),\n  );\n}\n\nfunction topView(viewport: Element): HTMLElement | undefined {\n  const live = viewsOf(viewport).filter(\n    (view) => view.dataset.navExiting !== 'true',\n  );\n  return live[live.length - 1];\n}\n\nfunction reducedMotion(view: Window): boolean {\n  return (\n    typeof view.matchMedia === 'function' &&\n    view.matchMedia('(prefers-reduced-motion: reduce)').matches\n  );\n}\n\nfunction chromeOf(section: HTMLElement): HTMLElement[] {\n  return Array.from(\n    section.querySelectorAll<HTMLElement>(\n      ':scope > [data-nav-stack-chrome]:not([data-nav-chrome-copy]), :scope > [data-nav-stack-bottom]:not([data-nav-chrome-copy])',\n    ),\n  );\n}\n\nfunction availableFocusTarget(\n  element: Element | null | undefined,\n): element is HTMLElement {\n  return (\n    element instanceof HTMLElement &&\n    element.isConnected &&\n    !element.matches('[disabled], [aria-disabled=\"true\"]') &&\n    !element.closest('[inert], [hidden], [aria-hidden=\"true\"]')\n  );\n}\n\n/**\n * Animate a `NavStack`'s push/pop transitions and wire its back control. The app\n * owns the stack (a signal of `NavStackView[]`) and re-renders `NavStack` when it\n * changes; this helper slides the content and settles the chrome across each\n * change, moves focus into every new top view, restores that view's last focused\n * descendant on pop, and calls `onBack` when the back control is used. Mark a\n * preferred initial target with `data-nav-focus`; otherwise the first focusable\n * descendant (or the view itself) receives focus. Returns a disposer.\n */\nexport function wireNavStack(\n  root: Element,\n  options: WireNavStackOptions = {},\n): () => void {\n  const section = root.matches('[data-component=\"nav-stack\"]')\n    ? root\n    : root.querySelector('[data-component=\"nav-stack\"]');\n  const viewport = section?.querySelector('[data-nav-stack-viewport]');\n  if (!(section instanceof HTMLElement) || !viewport) return () => {};\n\n  const view = section.ownerDocument.defaultView ?? window;\n  const duration = options.duration ?? DEFAULT_DURATION;\n  const previousDuration = section.style.getPropertyValue(\n    '--kui-nav-stack-transition-duration',\n  );\n  section.style.setProperty(\n    '--kui-nav-stack-transition-duration',\n    `${Math.max(0, duration)}ms`,\n  );\n  const disposeBack = delegate(section, 'click', '[data-nav-back]', () =>\n    options.onBack?.(),\n  );\n\n  let activeKey = topView(viewport)?.dataset.navKey;\n  const timers = new Set<number>();\n  const frames = new Set<number>();\n  const frame = (fn: () => void): void => {\n    const id = view.requestAnimationFrame(() => {\n      frames.delete(id);\n      fn();\n    });\n    frames.add(id);\n  };\n  const finishTransition = (): void => {\n    for (const id of frames) view.cancelAnimationFrame(id);\n    frames.clear();\n    for (const id of timers) view.clearTimeout(id);\n    timers.clear();\n    section\n      .querySelectorAll<HTMLElement>(':scope > [data-nav-chrome-copy]')\n      .forEach((element) => element.remove());\n    chromeOf(section).forEach((element) =>\n      element.classList.remove('kui-nav-stack__chrome--entering'),\n    );\n    viewsOf(viewport).forEach((element) => {\n      if (element.dataset.navExiting === 'true') element.remove();\n      else {\n        element.classList.remove('kui-nav-stack__view--entering');\n        delete element.dataset.navRevealed;\n      }\n    });\n    delete section.dataset.navChromeTransition;\n  };\n  const rememberedFocus = new Map<string, HTMLElement>();\n  const generatedFallbacks = new Map<HTMLElement, string | null>();\n  let chromeSnapshots = chromeOf(section).map((element) =>\n    element.cloneNode(true),\n  ) as HTMLElement[];\n\n  const settle = (fn: () => void): void => {\n    if (duration <= 0 || reducedMotion(view)) {\n      fn();\n      return;\n    }\n    const timer = view.setTimeout(() => {\n      timers.delete(timer);\n      fn();\n    }, duration);\n    timers.add(timer);\n  };\n\n  const play = (el: HTMLElement, kind: 'entering' | 'exiting'): void => {\n    const animated = duration > 0 && !reducedMotion(view);\n    if (kind === 'entering') {\n      // Push: start the incoming view off the trailing edge, then release it so\n      // it slides to rest (translateX(100%) → 0).\n      el.classList.add('kui-nav-stack__view--entering');\n      if (animated) {\n        // Force a reflow so the starting transform applies before we clear it.\n        void el.offsetWidth;\n        frame(() => el.classList.remove('kui-nav-stack__view--entering'));\n      } else {\n        el.classList.remove('kui-nav-stack__view--entering');\n      }\n    } else if (animated) {\n      // Pop: the outgoing view is at rest; add the off-edge class on the next\n      // frame so it slides OUT (translateX(0) → 100%), not in.\n      frame(() => el.classList.add('kui-nav-stack__view--exiting'));\n    } else {\n      el.classList.add('kui-nav-stack__view--exiting');\n    }\n  };\n\n  const rememberFocusedView = (target: Element | null): void => {\n    if (!(target instanceof HTMLElement)) return;\n    const owner = target.closest<HTMLElement>('.kui-nav-stack__view');\n    const key = owner?.dataset.navKey;\n    if (key && owner !== target && viewport.contains(owner))\n      rememberedFocus.set(key, target);\n  };\n\n  const focusInto = (targetView: HTMLElement): void => {\n    const key = targetView.dataset.navKey;\n    const remembered = key ? rememberedFocus.get(key) : undefined;\n    const preferred = Array.from(\n      targetView.querySelectorAll<HTMLElement>('[data-nav-focus]'),\n    ).find(availableFocusTarget);\n    const first = Array.from(\n      targetView.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n    ).find(availableFocusTarget);\n    const target =\n      (availableFocusTarget(remembered) && targetView.contains(remembered)\n        ? remembered\n        : undefined) ??\n      preferred ??\n      first;\n    if (target) {\n      target.focus({ preventScroll: true });\n      return;\n    }\n\n    if (!generatedFallbacks.has(targetView)) {\n      generatedFallbacks.set(\n        targetView,\n        targetView.hasAttribute('tabindex')\n          ? targetView.getAttribute('tabindex')\n          : null,\n      );\n      targetView.tabIndex = -1;\n    }\n    targetView.focus({ preventScroll: true });\n  };\n\n  // Overlay chrome (`chromePresentation=\"overlay\"` for the top chrome,\n  // `bottomToolbarPresentation=\"overlay\"` for the bottom toolbar): measure\n  // each live edge element, never a cross-fading copy, and publish its\n  // border-box block size with the gate that lays it over the viewport. The\n  // size follows the element as it wraps, zooms, or changes with the active\n  // view, and a re-render that strips the published state gets it back\n  // before paint. The active view's classic (space-taking) vertical\n  // scrollbar is measured too, so each overlaid edge ends where its track\n  // begins.\n  interface EdgeState {\n    element?: HTMLElement;\n    size?: number;\n    /** The active scroller's track lies beneath this edge. */\n    covers: boolean;\n  }\n  const edges = OVERLAY_EDGES.map((edge): [OverlayEdge, EdgeState] => [\n    edge,\n    { covers: false },\n  ]);\n  const measuredEdge = (state: EdgeState): boolean =>\n    state.element !== undefined && state.size !== undefined;\n  let measuredScroller: 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 publishOverlay = (): void => {\n    for (const [edge, state] of edges) {\n      const measured = measuredEdge(state);\n      writeProperty(edge.blockSize, measured ? `${state.size}px` : '');\n      writeProperty(\n        edge.scrollbarInlineSize,\n        measured && state.covers && scrollbarSize > 0\n          ? `${scrollbarSize}px`\n          : '',\n      );\n    }\n    if (section.getAttribute('style') === '') section.removeAttribute('style');\n    // Each gate changes only when it must, so the root observer settles.\n    const [top, bottom] = edges.map(([, state]) => measuredEdge(state));\n    if (top && section.getAttribute(CHROME_OVERLAY) !== 'measured')\n      section.setAttribute(CHROME_OVERLAY, 'measured');\n    else if (!top && section.hasAttribute(CHROME_OVERLAY))\n      section.removeAttribute(CHROME_OVERLAY);\n    if (bottom && section.getAttribute(BOTTOM_TOOLBAR_OVERLAY) !== 'measured')\n      section.setAttribute(BOTTOM_TOOLBAR_OVERLAY, 'measured');\n    else if (!bottom && section.hasAttribute(BOTTOM_TOOLBAR_OVERLAY))\n      section.removeAttribute(BOTTOM_TOOLBAR_OVERLAY);\n  };\n  /**\n   * The element that scrolls beneath the overlaid edges in the active view\n   * (the view itself, or a sole Pane's content), and that sole Pane, whose\n   * own header or footer keeps its scroller clear of the matching edge.\n   */\n  const activeScroller = (): { scroller?: HTMLElement; pane?: Element } => {\n    const top = topView(viewport);\n    const only = top?.children.length === 1 ? top.children[0] : undefined;\n    if (!only) return { scroller: top };\n    if (only.matches('.kui-pane'))\n      return {\n        scroller:\n          only.querySelector<HTMLElement>(':scope > .kui-pane__content') ??\n          undefined,\n        pane: only,\n      };\n    return { scroller: only.matches(NESTED_LAYOUT) ? undefined : top };\n  };\n  const measureScrollbar = (): void => {\n    const scroller = measuredScroller;\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 chromeObserver = view.ResizeObserver\n    ? new view.ResizeObserver((entries) => {\n        for (const entry of entries) {\n          const state = edges.find(\n            ([, edgeState]) => edgeState.element === entry.target,\n          )?.[1];\n          if (state)\n            state.size =\n              entry.borderBoxSize?.[0]?.blockSize ??\n              entry.target.getBoundingClientRect().height;\n          else if (entry.target === measuredScroller) measureScrollbar();\n        }\n        publishOverlay();\n      })\n    : undefined;\n  const syncOverlay = (): void => {\n    for (const [edge, state] of edges) {\n      const element =\n        section.getAttribute(edge.presentation) === 'overlay'\n          ? (section.querySelector<HTMLElement>(edge.element) ?? undefined)\n          : undefined;\n      if (element === state.element) continue;\n      if (state.element) chromeObserver?.unobserve(state.element);\n      state.element = element;\n      if (!element) state.size = undefined;\n      else {\n        // A replacement keeps the last size until the observer reports it\n        // after layout; a first one (or one with no observer to report it)\n        // is measured at once.\n        if (state.size === undefined || !chromeObserver)\n          state.size = element.getBoundingClientRect().height;\n        // The border box: a forced-colors edge changes no content box.\n        chromeObserver?.observe(element, { box: 'border-box' });\n      }\n    }\n    // A scrollbar appearing or leaving resizes the scroller's content box.\n    const { scroller, pane } = activeScroller();\n    for (const [edge, state] of edges)\n      state.covers =\n        state.element !== undefined &&\n        scroller !== undefined &&\n        !pane?.querySelector(edge.paneChrome);\n    const covered = edges.some(([, state]) => state.covers)\n      ? scroller\n      : undefined;\n    if (covered !== measuredScroller) {\n      if (measuredScroller) chromeObserver?.unobserve(measuredScroller);\n      measuredScroller = covered;\n      measureScrollbar();\n      if (measuredScroller) chromeObserver?.observe(measuredScroller);\n    }\n    publishOverlay();\n  };\n  const overlayObserver = new MutationObserver(syncOverlay);\n  overlayObserver.observe(section, {\n    childList: true,\n    attributes: true,\n    attributeFilter: [\n      ...OVERLAY_EDGES.map((edge) => edge.presentation),\n      CHROME_OVERLAY,\n      BOTTOM_TOOLBAR_OVERLAY,\n      'style',\n    ],\n  });\n  syncOverlay();\n\n  const onFocusIn = (event: Event): void =>\n    rememberFocusedView(event.target as Element | null);\n  section.addEventListener('focusin', onFocusIn);\n  rememberFocusedView(section.ownerDocument.activeElement);\n\n  const crossFadeChrome = (): void => {\n    const current = chromeOf(section);\n    const animated = duration > 0 && !reducedMotion(view);\n    if (!animated) {\n      chromeSnapshots = current.map((element) =>\n        element.cloneNode(true),\n      ) as HTMLElement[];\n      return;\n    }\n\n    section.dataset.navChromeTransition = 'true';\n    const copies = chromeSnapshots.map((snapshot) => {\n      const copy = snapshot.cloneNode(true) as HTMLElement;\n      copy.classList.add('kui-nav-stack__chrome-copy');\n      copy.dataset.navChromeCopy = '';\n      copy.setAttribute('aria-hidden', 'true');\n      copy.setAttribute('inert', '');\n      if (copy.hasAttribute('data-nav-stack-bottom'))\n        copy.classList.add('kui-nav-stack__chrome-copy--bottom');\n      section.append(copy);\n      return copy;\n    });\n\n    current.forEach((element) =>\n      element.classList.add('kui-nav-stack__chrome--entering'),\n    );\n    void section.offsetWidth;\n    frame(() => {\n      current.forEach((element) =>\n        element.classList.remove('kui-nav-stack__chrome--entering'),\n      );\n      copies.forEach((copy) =>\n        copy.classList.add('kui-nav-stack__chrome-copy--exiting'),\n      );\n    });\n    settle(() => {\n      copies.forEach((copy) => copy.remove());\n      delete section.dataset.navChromeTransition;\n    });\n    chromeSnapshots = current.map((element) => {\n      const snapshot = element.cloneNode(true) as HTMLElement;\n      snapshot.classList.remove('kui-nav-stack__chrome--entering');\n      return snapshot;\n    });\n  };\n\n  const observer = new MutationObserver((records) => {\n    const removed: HTMLElement[] = [];\n    for (const record of records) {\n      if (record.target !== viewport) continue;\n      record.removedNodes.forEach((node) => {\n        if (\n          node instanceof HTMLElement &&\n          node.classList.contains('kui-nav-stack__view') &&\n          node.dataset.navExiting !== 'true'\n        )\n          removed.push(node);\n      });\n    }\n\n    const top = topView(viewport);\n    const currentKey = top?.dataset.navKey;\n    const poppedTop = removed.find((node) => node.dataset.navKey === activeKey);\n\n    if (poppedTop && currentKey !== activeKey) {\n      finishTransition();\n      // Pop: bring the removed node back briefly to slide it out over the revealed view.\n      poppedTop.classList.remove(\n        'kui-nav-stack__view--entering',\n        'kui-nav-stack__view--exiting',\n      );\n      poppedTop.dataset.navExiting = 'true';\n      poppedTop.setAttribute('aria-hidden', 'true');\n      viewport.append(poppedTop);\n      void poppedTop.offsetWidth;\n      play(poppedTop, 'exiting');\n      crossFadeChrome();\n      if (top) focusInto(top);\n      settle(() => poppedTop.remove());\n    } else if (currentKey !== activeKey && top) {\n      finishTransition();\n      const previous = viewsOf(viewport).find(\n        (element) => element.dataset.navKey === activeKey,\n      );\n      if (previous) {\n        previous.dataset.navRevealed = 'true';\n        settle(() => delete previous.dataset.navRevealed);\n      }\n      // Push: slide the new top in.\n      rememberFocusedView(section.ownerDocument.activeElement);\n      play(top, 'entering');\n      crossFadeChrome();\n      focusInto(top);\n    }\n\n    activeKey = currentKey;\n    // The active view, and so the scroller beneath the chrome, may change.\n    syncOverlay();\n  });\n  observer.observe(viewport, {\n    childList: true,\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['data-nav-key', 'data-nav-active'],\n  });\n\n  return () => {\n    disposeBack();\n    section.removeEventListener('focusin', onFocusIn);\n    observer.disconnect();\n    overlayObserver.disconnect();\n    chromeObserver?.disconnect();\n    for (const [, state] of edges) {\n      state.element = undefined;\n      state.size = undefined;\n      state.covers = false;\n    }\n    measuredScroller = undefined;\n    scrollbarSize = 0;\n    publishOverlay();\n    finishTransition();\n    for (const [element, previousTabIndex] of generatedFallbacks) {\n      if (!element.isConnected || element.tabIndex !== -1) continue;\n      if (previousTabIndex === null) element.removeAttribute('tabindex');\n      else element.setAttribute('tabindex', previousTabIndex);\n    }\n    generatedFallbacks.clear();\n    rememberedFocus.clear();\n    if (previousDuration)\n      section.style.setProperty(\n        '--kui-nav-stack-transition-duration',\n        previousDuration,\n      );\n    else section.style.removeProperty('--kui-nav-stack-transition-duration');\n  };\n}\n"]}

package/dist/wire-resizable-regions.d.ts

@@ -9,7 +9,8 @@ interface WireResizableRegionsOptions {
     onPreview?: (change: ResizeCommit) => void;
     onCommit: (change: ResizeCommit) => void;
 }
+
 /** Wire pointer and separator-keyboard behavior for every ResizableRegion below root. */
-declare function wireResizableRegions(root: HTMLElement, { step, largeStep, onPreview, onCommit, }: WireResizableRegionsOptions): () => void;
+declare function wireResizableRegions(root: HTMLElement, options: WireResizableRegionsOptions): () => void;
 
 export { type ResizeCommit, type WireResizableRegionsOptions, wireResizableRegions };

package/dist/wire-resizable-regions.js

@@ -1,4 +1,5 @@
-export { wireResizableRegions } from './chunk-DPDBVKNA.js';
+export { wireResizableRegions } from './chunk-GS2QD3N7.js';
+
 
 
 //# sourceMappingURL=wire-resizable-regions.js.map

package/dist/wire-scroll-dividers.d.ts

@@ -0,0 +1,87 @@
+/**
+ * An app-owned scroll arrangement outside a `Pane`: the `id` of the element
+ * that scrolls and the `id`s of the pinned chrome on each physical side of it.
+ * Each named chrome element shows its divider on the side facing the scroller
+ * while content is scrolled away beyond that side. Ids are resolved below the
+ * wired root on every refresh, so a re-render that replaces an element keeps
+ * the pairing.
+ */
+interface ScrollDividerTarget {
+    /** The `id` of the scrolling element. */
+    scroller: string;
+    /** Chrome above the scroller: shows its bottom divider once scrolled down. */
+    top?: string;
+    /**
+     * Chrome right of the scroller: shows its left divider while content is
+     * hidden beyond the scroller's right edge (never when nothing overflows).
+     */
+    right?: string;
+    /**
+     * Chrome below the scroller: shows its top divider while content is hidden
+     * beyond the scroller's bottom edge (never when nothing overflows).
+     */
+    bottom?: string;
+    /** Chrome left of the scroller: shows its right divider once scrolled right. */
+    left?: string;
+}
+interface WireScrollDividersOptions {
+    /**
+     * App-owned scroll arrangements to pair beyond the ones found by structure
+     * (every `Pane`'s header and footer around its content, every `NavStack`'s
+     * and `TabNavigator`'s chrome around its active region, and every `TabBar`
+     * strip).
+     */
+    targets?: readonly ScrollDividerTarget[];
+}
+type Root = HTMLElement | Document;
+/**
+ * Wire scroll dividers below `root`: a divider between pinned chrome and the
+ * content that scrolls beside it shows only while content is scrolled away
+ * from that edge. Near edges (top, left) hide at the scroll start; far edges
+ * (bottom, right) hide at the scroll end and whenever nothing overflows.
+ *
+ * The wiring only reports scroll state; each component draws its own divider
+ * from it. It writes `data-scroll-overflow` (the edges with hidden content, in
+ * canonical `t`/`r`/`b`/`l` order) on each scroller, and `data-scroll-divider`
+ * (the sides to draw) on each paired chrome element:
+ *
+ * - every `Pane` with a header or footer: its header shows a bottom divider and
+ *   its footer a top divider (drawn by the Pane, per its `chromeDividers`);
+ * - every `NavStack`'s top chrome and bottom toolbar around its active view,
+ *   and every `TabNavigator`'s bar under its active scene: the chrome shows a
+ *   bottom (top chrome) or top (bottom toolbar, bar) divider. The scroller is
+ *   whichever element actually scrolls there: the view or scene itself, or,
+ *   through a sole child with no chrome of its own on that edge, a `Pane`'s
+ *   content or a nested `NavStack` / `TabNavigator` region (a Pane's own header
+ *   or footer draws that boundary instead);
+ * - every `TabBar` strip: the bar draws a divider on each side of the strip
+ *   whose tabs are scrolled out of view;
+ * - each app-owned `targets` pairing: a `Toolbar` or `List` named as chrome
+ *   draws the divider on its facing side.
+ *
+ * It also measures every `Pane` header laid over its content
+ * (`headerPresentation="overlay"`, with fixed chrome placement): it publishes
+ * the header's border-box block size on the Pane root as the inherited
+ * `--kui-scroll-clearance-block-start` context, and marks the root
+ * `data-header-overlay="measured"`, which moves the header over the content
+ * and has the content clear it. The measurement follows the header as it
+ * wraps, zooms, or changes content, and both are restored before paint if a
+ * re-render drops them.
+ *
+ * Structure is re-read after every DOM change below root that can change a
+ * pairing — a structural element or target id added, removed, or re-classed;
+ * mutations inside scrolled content (a row's class, a list's rows) do not
+ * re-read it. Either way the scrollers are re-measured once the next frame
+ * has laid out, before it paints, so a large render never forces a layout
+ * (where `ResizeObserver` is missing, structure is measured at once and
+ * content in the next animation frame) — and a re-render that drops the
+ * attributes gets them back before paint.
+ * Scroll is tracked with one capturing listener per registered root, and size
+ * changes of each scroller and its children with a `ResizeObserver`. Overlapping registrations
+ * share one attribute writer; each disposer removes its registration, and the
+ * final disposer removes the wiring-owned attributes. See
+ * `docs/23-app-layouts.md` §3.7.
+ */
+declare function wireScrollDividers(root: Root, { targets }?: WireScrollDividersOptions): () => void;
+
+export { type ScrollDividerTarget, type WireScrollDividersOptions, wireScrollDividers };

package/dist/wire-scroll-dividers.js

@@ -0,0 +1,3 @@
+export { wireScrollDividers } from './chunk-CXZXHZTR.js';
+
+//# sourceMappingURL=wire-scroll-dividers.js.map

package/dist/wire-scroll-dividers.js.map

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

package/dist/wire-sidebar.d.ts

@@ -14,9 +14,18 @@ interface WireSidebarPanel {
     collapsed: Signal<boolean>;
     /** `data-action` value the panel's toggle button(s) carry. */
     toggleAction: string;
-    /** When set, the collapsed state is loaded from and saved to `storage` under
-     *  this key (a persistence hook), so the panel remembers its state. */
+    /** When set, the panel's inline collapsed state is loaded from and saved to
+     *  `storage` under this key (a persistence hook), so the panel remembers the
+     *  user's inline choice. A compact overlay's open/closed state is transient
+     *  and is never persisted. */
     storageKey?: string;
+    /** The panel's inline (non-compact) collapsed state when `storage` holds no
+     *  choice for it; wire-up seeds the signal with it. Defaults to the signal's
+     *  own value. Set it when the app seeds the signal from the device class
+     *  (`signal(device.value.compact)`) so a compact first render already starts
+     *  collapsed while a later crossing to a wide class still restores this
+     *  inline default. */
+    inlineCollapsed?: boolean;
 }
 interface WireSidebarOptions {
     panels: readonly WireSidebarPanel[];
@@ -26,8 +35,19 @@ interface WireSidebarOptions {
      * dismissable backdrop, Escape and backdrop-click collapse it, and focus is
      * trapped within the open panel (the ARIA dialog pattern). Without it the panel
      * is always inline.
+     *
+     * An overlay is transient and user-initiated: whenever the compact overlay
+     * presentation begins (wire-up on a compact device, or a crossing from a wide
+     * class), every panel starts collapsed so nothing blocks the page until the
+     * user opens it. The inline state is remembered and restored when the device
+     * crosses back to a wide class (and on disposal).
      */
     deviceClass?: ReadonlySignal<DeviceClass>;
+    /** Compact devices either overlay the panels (default) or hide them in favor
+     *  of an application-owned responsive replacement. */
+    compactPresentation?: 'overlay' | 'hidden';
+    /** Collapse the other panels when one opens in compact overlay mode. */
+    exclusiveCompact?: boolean;
     /** Persistence store (default `globalThis.localStorage`, if present). */
     storage?: SidebarStorage;
 }
@@ -36,8 +56,8 @@ interface WireSidebarOptions {
  * delegation with focus restore, focus-into on open, an optional compact overlay
  * (backdrop + Escape + focus trap) driven by {@link deviceClass}, and an optional
  * persistence hook. The app owns each `collapsed` signal and the layout; this wire
- * owns the interaction. Returns a disposer. See `docs/24-collapsible-panel.md`.
+ * owns the interaction. Returns a disposer. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.
  */
-declare function wireSidebar(root: HTMLElement, { panels, deviceClass, storage }: WireSidebarOptions): () => void;
+declare function wireSidebar(root: HTMLElement, { panels, deviceClass, compactPresentation, exclusiveCompact, storage, }: WireSidebarOptions): () => void;
 
 export { type SidebarStorage, type WireSidebarOptions, type WireSidebarPanel, wireSidebar };