@kerfjs/ui 5.0.0-beta.9 → 5.0.0-beta.90

package/dist/wire-nav-stack.js

@@ -1,17 +1,39 @@
 import { delegate } from 'kerfjs';
 
-// src/wire-nav-stack.ts
+// src/components/navigation/nav-stack/wiring/wire-nav-stack.ts
 var DEFAULT_DURATION = 200;
+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"));
+  return Array.from(
+    viewport.querySelectorAll(":scope > .kui-nav-stack__view")
+  );
 }
 function topView(viewport) {
-  const live = viewsOf(viewport).filter((view) => view.dataset.navExiting !== "true");
+  const live = viewsOf(viewport).filter(
+    (view) => view.dataset.navExiting !== "true"
+  );
   return live[live.length - 1];
 }
 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]");
@@ -19,9 +41,52 @@ function wireNavStack(root, options = {}) {
   };
   const view = section.ownerDocument.defaultView ?? window;
   const duration = options.duration ?? DEFAULT_DURATION;
-  const disposeBack = delegate(section, "click", "[data-nav-back]", () => options.onBack?.());
+  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",
+    "[data-nav-back]",
+    () => options.onBack?.()
+  );
   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();
@@ -39,47 +104,158 @@ 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 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;
+        if (node instanceof HTMLElement && node.classList.contains("kui-nav-stack__view") && node.dataset.navExiting !== "true")
+          removed.push(node);
       });
     }
     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;
   });
-  observer.observe(viewport, { childList: true });
+  observer.observe(viewport, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["data-nav-key", "data-nav-active"]
+  });
   return () => {
     disposeBack();
+    section.removeEventListener("focusin", onFocusIn);
     observer.disconnect();
-    for (const timer of timers) view.clearTimeout(timer);
-    timers.clear();
+    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(viewport.querySelectorAll<HTMLElement>(':scope > .kui-nav-stack__view'));\n}\n\nfunction topView(viewport: Element): HTMLElement | undefined {\n  const live = viewsOf(viewport).filter((view) => view.dataset.navExiting !== 'true');\n  return live[live.length - 1];\n}\n\nfunction reducedMotion(view: Window): boolean {\n  return typeof view.matchMedia === 'function' && view.matchMedia('(prefers-reduced-motion: reduce)').matches;\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(root: Element, options: WireNavStackOptions = {}): () => void {\n  const section = root.matches('[data-component=\"nav-stack\"]') ? root : 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]', () => options.onBack?.());\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(() => 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      view.requestAnimationFrame(() => el.classList.add('kui-nav-stack__view--exiting'));\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 (node instanceof HTMLElement && node.classList.contains('kui-nav-stack__view') && node.dataset.navExiting !== 'true') removed.push(node);\n      });\n      record.addedNodes.forEach((node) => {\n        if (node instanceof HTMLElement && node.classList.contains('kui-nav-stack__view')) 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;\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  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  });\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    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-AQNKJRFH.js';
+export { wireResizableRegions } from './chunk-GS2QD3N7.js';
+
 
 
 //# sourceMappingURL=wire-resizable-regions.js.map

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

@@ -0,0 +1,72 @@
+/**
+ * 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.
+ *
+ * Structure is re-read after every DOM change below root (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-3CXRQAYT.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

@@ -0,0 +1,63 @@
+import { Signal, ReadonlySignal } from 'kerfjs';
+import { DeviceClass } from './device-class.js';
+
+/** Minimal `localStorage`-shaped store, so the persistence hook is testable. */
+interface SidebarStorage {
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+}
+interface WireSidebarPanel {
+    /** The panel id — matches `CollapsiblePanel`'s `id` and a toggle's `panelId`. */
+    id: string;
+    /** The app-owned collapsed signal. `wireSidebar` reads it (focus, overlay) and
+     *  writes it (toggle, Escape, backdrop, persistence). */
+    collapsed: Signal<boolean>;
+    /** `data-action` value the panel's toggle button(s) carry. */
+    toggleAction: string;
+    /** 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[];
+    /**
+     * When provided, the sidebar adopts a compact **overlay** presentation while
+     * `deviceClass.compact` is true: an open panel floats over the content with a
+     * 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;
+}
+/**
+ * The reusable sidebar-semantics layer for {@link CollapsiblePanel}s: toggle
+ * 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 `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.
+ */
+declare function wireSidebar(root: HTMLElement, { panels, deviceClass, compactPresentation, exclusiveCompact, storage, }: WireSidebarOptions): () => void;
+
+export { type SidebarStorage, type WireSidebarOptions, type WireSidebarPanel, wireSidebar };