@t007/utils 0.0.34 → 0.0.35

package/dist/{arrowNavigation-DF7ul3A3.d.ts → arrowNavigation-B9bEdoqR.d.ts}

@@ -1,4 +1,4 @@
-import { K as KeyEvent, C as Config } from './scrollAssist-l0V2H-jx.js';
+import { K as KeyEvent, C as Config } from './scrollAssist-BNvPnsJq.js';
 
 type ArrowNavigationHandle = {
     /** Current computed horizontal grid size. */
@@ -21,11 +21,14 @@ type ArrowNavigationHandle = {
     goToIndex: (index: number, e?: KeyEvent) => void;
     /** Simulate directional key navigation with a keyboard-like event. */
     simulateKey: (e: KeyEvent) => void;
+    /** Synchronize the navigation items list with the DOM. */
+    sync: () => void;
     /** Remove listeners/observers and release resources. */
     destroy: () => void;
 };
 /** A vanilla JavaScript utility for managing robust arrow-key roving focus navigation. */
 declare function initArrowNavigation(container: HTMLElement, config?: Config): ArrowNavigationHandle | void;
 declare const removeArrowNavigation: (container: HTMLElement) => void | undefined;
+declare const syncArrowNavigation: (container: HTMLElement) => void | undefined;
 
-export { type ArrowNavigationHandle as A, initArrowNavigation as i, removeArrowNavigation as r };
+export { type ArrowNavigationHandle as A, initArrowNavigation as i, removeArrowNavigation as r, syncArrowNavigation as s };

package/dist/{arrowNavigation-IaWiNTa6.d.cts → arrowNavigation-zEJbo8Er.d.cts}

@@ -1,4 +1,4 @@
-import { K as KeyEvent, C as Config } from './scrollAssist-l0V2H-jx.cjs';
+import { K as KeyEvent, C as Config } from './scrollAssist-BNvPnsJq.cjs';
 
 type ArrowNavigationHandle = {
     /** Current computed horizontal grid size. */
@@ -21,11 +21,14 @@ type ArrowNavigationHandle = {
     goToIndex: (index: number, e?: KeyEvent) => void;
     /** Simulate directional key navigation with a keyboard-like event. */
     simulateKey: (e: KeyEvent) => void;
+    /** Synchronize the navigation items list with the DOM. */
+    sync: () => void;
     /** Remove listeners/observers and release resources. */
     destroy: () => void;
 };
 /** A vanilla JavaScript utility for managing robust arrow-key roving focus navigation. */
 declare function initArrowNavigation(container: HTMLElement, config?: Config): ArrowNavigationHandle | void;
 declare const removeArrowNavigation: (container: HTMLElement) => void | undefined;
+declare const syncArrowNavigation: (container: HTMLElement) => void | undefined;
 
-export { type ArrowNavigationHandle as A, initArrowNavigation as i, removeArrowNavigation as r };
+export { type ArrowNavigationHandle as A, initArrowNavigation as i, removeArrowNavigation as r, syncArrowNavigation as s };

package/dist/{chunk-ZRCBB5P4.js → chunk-NX2LWYD6.js}

@@ -4,39 +4,39 @@ import {
   createEl,
   getActiveEl,
   isInteractive
-} from "./chunk-HGUYOV3P.js";
+} from "./chunk-ZALPHCSJ.js";
 
 // src/ts/hooks/vanilla/outsideClick.ts
 import { NIL, NOOP } from "sia-reactor";
 function initOutsideClick(el, { enabled = false, onOutside = NOOP, outOnClick = true, outOnEscape = true, outOnFocusOut = false, allowBounds = false, allowInputs = false, root = window, scoped = true, capture = true } = NIL) {
-  const stacks = t007._outsiders_stacks ??= /* @__PURE__ */ new WeakMap(), existing = (t007._outsiders ??= /* @__PURE__ */ new WeakMap()).get(el);
+  const stack = t007._outsiders_stack ??= [], existing = (t007._outsiders ??= /* @__PURE__ */ new WeakMap()).get(el);
   if (!enabled || existing) return existing ? existing : void 0;
   scoped = scoped && root instanceof HTMLElement, root = scoped ? root : root === document ? document : window;
-  const stack = stacks.get(root) ?? [], onScopedOut = (e, t, p = e.touches?.[0] || e, rect = allowBounds ? el.getBoundingClientRect() : null) => {
+  const onScopedOut = (e, t, p = e.touches?.[0] || e, rect = allowBounds ? el.getBoundingClientRect() : null) => {
     if (stack.at(-1) !== el || (allowBounds ? p.clientX >= rect.left && p.clientX <= rect.right && p.clientY >= rect.top && p.clientY <= rect.bottom : el.contains(t))) return false;
     return (!scoped ? true : root.contains(t)) && onOutside(e);
   }, handleClick = ((e) => outOnClick && !(allowInputs && isInteractive(e.target)) && onScopedOut(e, e.target)), handleEscape = ((e) => outOnEscape && e.key === "Escape" && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey && stack.at(-1) === el && onOutside(e)), handleFocusOut = (e) => outOnFocusOut && !el.contains(e.relatedTarget) && onScopedOut(e, e.relatedTarget);
   root.addEventListener("mousedown", handleClick, capture), root.addEventListener("touchstart", handleClick, { passive: true, capture });
   root.addEventListener("keydown", handleEscape, capture);
   el.addEventListener("focusout", handleFocusOut, capture);
-  if (!stack.includes(el)) stack.push(el), stacks.set(root, stack);
   const destroy = () => {
     root.removeEventListener("mousedown", handleClick, capture), root.removeEventListener("touchstart", handleClick, capture);
     root.removeEventListener("keydown", handleEscape, capture);
     el.removeEventListener("focusout", handleFocusOut, capture);
     t007._outsiders.delete(el), stack.splice(stack.indexOf(el), 1);
   };
-  return t007._outsiders.set(el, destroy), destroy;
+  return !stack.includes(el) && stack.push(el), t007._outsiders.set(el, destroy), destroy;
 }
 var removeOutsideClick = (el) => t007._outsiders?.get(el)?.();
 
 // src/ts/hooks/vanilla/focusTrap.ts
 import { NIL as NIL2 } from "sia-reactor";
 function initFocusTrap(el, { enabled = false, initialSelector = "[data-autofocus]", ringClassName = "focus-outline", root = window, scoped = true, capture = true } = NIL2) {
-  const stacks = t007._ftrappers_stacks ??= /* @__PURE__ */ new WeakMap(), existing = (t007._ftrappers ??= /* @__PURE__ */ new WeakMap()).get(el);
+  const stack = t007._ftrappers_stack ??= [], existing = (t007._ftrappers ??= /* @__PURE__ */ new WeakMap()).get(el);
   if (!enabled || existing) return existing ? existing : void 0;
   scoped = scoped && root instanceof HTMLElement, root = scoped ? root : root === document ? document : window;
-  const stack = stacks.get(root) ?? [], focused = document.querySelector(":focus"), initial = el.querySelector(initialSelector), first = createEl("span", { tabIndex: 0 }, { focusGuard: "start" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), last = createEl("span", { tabIndex: 0 }, { focusGuard: "end" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), getFocusable = (c = el) => [...c.querySelectorAll(INTERACTIVE_SELECTOR)], resetFocus = (i = 0, els = getFocusable()) => els?.length ? els.at(i).focus() : (!el.hasAttribute("tabindex") && (el.tabIndex = -1), el.focus()), edgeFocus = (pre = false, rt = root) => {
+  let recovering = false;
+  const focused = document.querySelector(":focus"), initial = el.querySelector(initialSelector), first = createEl("span", { tabIndex: 0 }, { focusGuard: "start" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), last = createEl("span", { tabIndex: 0 }, { focusGuard: "end" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), getFocusable = (c = el) => [...c.querySelectorAll(INTERACTIVE_SELECTOR)], resetFocus = (i = 0, els = getFocusable()) => !recovering && (recovering = true, els?.length ? els.at(i).focus() : (!el.hasAttribute("tabindex") && (el.tabIndex = -1), el.focus()), recovering = false), edgeFocus = (pre = false, rt = root) => {
     if (!scoped) return resetFocus(pre ? -1 : 0);
     if (rt.hasAttribute("tabindex")) return rt.focus();
     const items = getFocusable();
@@ -46,24 +46,25 @@ function initFocusTrap(el, { enabled = false, initialSelector = "[data-autofocus
     while (p !== ceil && (!all.length || (pre ? rt.contains(all[0]) : rt.contains(all.at(-1))))) all = getFocusable(p = p.parentElement || ceil);
     for (let target, len = all.length, i = all.indexOf(items[pre ? 0 : items.length - 1]) + (pre ? -1 : 1); pre ? i >= 0 : i < len; pre ? i-- : i++) if (!rt.contains(target = all[i])) return target.focus();
     (pre ? first : last).blur();
-  }, handleFocusIn = () => {
+  }, handleFocusIn = (e) => {
     if (document.querySelector("dialog:modal") && !el.matches("dialog:modal")) return;
-    stack.at(-1) === el && getActiveEl(el.ownerDocument) !== root && !el.contains(getActiveEl(el.ownerDocument)) && resetFocus();
+    stack.at(-1) === el && getActiveEl(el.ownerDocument) !== root && !el.contains(getActiveEl(el.ownerDocument)) && !e.composedPath().includes(el) && resetFocus();
   }, handleInitialBlur = () => initial.classList.remove(ringClassName);
   first.addEventListener("focus", (e) => el.contains(e.relatedTarget) ? edgeFocus(true) : resetFocus(), capture), el.prepend(first);
   last.addEventListener("focus", (e) => el.contains(e.relatedTarget) ? edgeFocus() : resetFocus(-1), capture), el.append(last);
   root.addEventListener("focusin", handleFocusIn, capture);
   if (initial || !el.contains(focused)) !initial ? setTimeout(resetFocus) : setTimeout(() => (initial.classList.add(ringClassName), initial.focus(), initial.addEventListener("blur", handleInitialBlur, capture)));
-  if (!stack.includes(el)) stack.push(el), stacks.set(root, stack);
   const destroy = () => {
     focused?.isConnected && focused.focus(), first.remove(), last.remove();
     root.removeEventListener("focusin", handleFocusIn, capture);
     initial?.removeEventListener("blur", handleInitialBlur, capture);
     t007._ftrappers.delete(el), stack.splice(stack.indexOf(el), 1);
   };
-  return t007._ftrappers.set(el, destroy), destroy;
+  const handle = { destroy, sync: () => (el.prepend(first), el.append(last)) };
+  return !stack.includes(el) && stack.push(el), t007._ftrappers.set(el, handle), handle;
 }
-var removeFocusTrap = (el) => t007._ftrappers?.get(el)?.();
+var removeFocusTrap = (el) => t007._ftrappers?.get(el)?.destroy();
+var syncFocusTrap = (el) => t007._ftrappers?.get(el)?.sync();
 
 // src/ts/hooks/vanilla/ripple.ts
 import { NIL as NIL3 } from "sia-reactor";
@@ -168,5 +169,6 @@ export {
   DEFAULT_CONFIG,
   initFocusTrap,
   removeFocusTrap,
+  syncFocusTrap,
   rippleHandler
 };

package/dist/{chunk-HGUYOV3P.js → chunk-ZALPHCSJ.js}

@@ -35,8 +35,12 @@ function loadResource(req, type = "style", { module, media, crossOrigin, integri
 function getWindow(el = window) {
   return el?.ownerDocument?.defaultView ?? el?.defaultView ?? window;
 }
-function createListRenderer({ container, getKey, createNode, updateNode = NOOP, destroyNode = NOOP }) {
+function createListRenderer({ container, getKey, createNode, updateNode = NOOP, destroyNode = NOOP, initNode }) {
   let nodeRegistry = /* @__PURE__ */ new Map();
+  if (initNode) {
+    const children = Array.from(container.children);
+    for (let i = 0, len = children.length; i < len; i++) initNode(children[i], (key) => nodeRegistry.set(key, children[i]));
+  }
   return function syncDOM(array, strict = true) {
     const newRegistry = /* @__PURE__ */ new Map(), seenKeys = /* @__PURE__ */ new Set(), oldPositions = /* @__PURE__ */ new WeakMap(), children = Array.from(container.children);
     for (let i = 0, len = children.length; i < len; i++) oldPositions.set(children[i], i);
@@ -202,12 +206,13 @@ function RAFLoop(key, fn, signal, win) {
 }
 var cancelRAFLoop = (key) => t007._RAFLoopers ? t007._RAFLoopers.delete(key) : false;
 function limited(FN_KEY, fn, opts = {}) {
-  let count = 0, { key, maxTimes: max = 1 } = isStr(opts) ? { key: opts } : opts;
+  let count = 0, { key, maxTimes: max = 1, oncePerSession = true } = isStr(opts) ? { key: opts } : opts;
   const getReg = () => JSON.parse(localStorage.getItem(FN_KEY) || "{}"), setReg = (r) => localStorage.setItem(FN_KEY, JSON.stringify(r));
   const handle = (...args) => {
+    if (oncePerSession && count > 0) return void 0;
     if (!key) return count++ < max ? fn(...args) : void 0;
     const r = getReg(), c = r[key] || 0;
-    return c < max ? (r[key] = c + 1, setReg(r), fn(...args)) : void 0;
+    return c < max ? (count++, r[key] = c + 1, setReg(r), fn(...args)) : void 0;
   };
   handle.left = max - (handle.count = count);
   handle.reset = () => (count = 0, key && ((r) => (delete r[key], setReg(r)))(getReg()));

package/dist/hooks/react.cjs

@@ -127,24 +127,23 @@ var import_react2 = require("react");
 // src/ts/hooks/vanilla/outsideClick.ts
 var import_sia_reactor3 = require("sia-reactor");
 function initOutsideClick(el, { enabled = false, onOutside = import_sia_reactor3.NOOP, outOnClick = true, outOnEscape = true, outOnFocusOut = false, allowBounds = false, allowInputs = false, root = window, scoped = true, capture = true } = import_sia_reactor3.NIL) {
-  const stacks = t007._outsiders_stacks ??= /* @__PURE__ */ new WeakMap(), existing = (t007._outsiders ??= /* @__PURE__ */ new WeakMap()).get(el);
+  const stack = t007._outsiders_stack ??= [], existing = (t007._outsiders ??= /* @__PURE__ */ new WeakMap()).get(el);
   if (!enabled || existing) return existing ? existing : void 0;
   scoped = scoped && root instanceof HTMLElement, root = scoped ? root : root === document ? document : window;
-  const stack = stacks.get(root) ?? [], onScopedOut = (e, t, p = e.touches?.[0] || e, rect = allowBounds ? el.getBoundingClientRect() : null) => {
+  const onScopedOut = (e, t, p = e.touches?.[0] || e, rect = allowBounds ? el.getBoundingClientRect() : null) => {
     if (stack.at(-1) !== el || (allowBounds ? p.clientX >= rect.left && p.clientX <= rect.right && p.clientY >= rect.top && p.clientY <= rect.bottom : el.contains(t))) return false;
     return (!scoped ? true : root.contains(t)) && onOutside(e);
   }, handleClick = ((e) => outOnClick && !(allowInputs && isInteractive(e.target)) && onScopedOut(e, e.target)), handleEscape = ((e) => outOnEscape && e.key === "Escape" && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey && stack.at(-1) === el && onOutside(e)), handleFocusOut = (e) => outOnFocusOut && !el.contains(e.relatedTarget) && onScopedOut(e, e.relatedTarget);
   root.addEventListener("mousedown", handleClick, capture), root.addEventListener("touchstart", handleClick, { passive: true, capture });
   root.addEventListener("keydown", handleEscape, capture);
   el.addEventListener("focusout", handleFocusOut, capture);
-  if (!stack.includes(el)) stack.push(el), stacks.set(root, stack);
   const destroy = () => {
     root.removeEventListener("mousedown", handleClick, capture), root.removeEventListener("touchstart", handleClick, capture);
     root.removeEventListener("keydown", handleEscape, capture);
     el.removeEventListener("focusout", handleFocusOut, capture);
     t007._outsiders.delete(el), stack.splice(stack.indexOf(el), 1);
   };
-  return t007._outsiders.set(el, destroy), destroy;
+  return !stack.includes(el) && stack.push(el), t007._outsiders.set(el, destroy), destroy;
 }
 
 // src/ts/hooks/react/useOutsideClick.ts
@@ -228,7 +227,7 @@ var DEFAULT_CONFIG = {
 
 // src/ts/hooks/react/useArrowNavigation/index.ts
 function useArrowNavigation(containerRef, config = {}) {
-  const { enabled: isEnabled, selector, focusOnHover, loop, virtual, typeahead, rovingTab, resetMs, activeClass, inputSelector, defaultTabbableIndex, baseTabIndex, grid, rtl: isRtl, focusOptions, scrollIntoView, onSelect, onFocusOut } = { ...DEFAULT_CONFIG, ...config }, [gridX, setGridX] = (0, import_react3.useState)(grid.x || 1), [gridY, setGridY] = (0, import_react3.useState)(grid.y || 1), [vGridY, setVGridY] = (0, import_react3.useState)(grid.vY || 1), [activeIndex, setActiveIndex] = (0, import_react3.useState)(-1), buffer = (0, import_react3.useRef)(""), timeout = (0, import_react3.useRef)(null), itemsRef = (0, import_react3.useRef)([]), enabled = isEnabled ?? virtual, roving = rovingTab ?? !virtual, rtl = (0, import_react3.useMemo)(() => isRtl ?? ("undefined" === typeof document ? false : getComputedStyle(containerRef.current || document.body).direction === "rtl"), [containerRef, isRtl]), mutationObserverRef = (0, import_react3.useRef)(null), shouldSnub = (0, import_react3.useCallback)(() => !enabled || !containerRef.current, [enabled, containerRef]), isItemDisabled = (0, import_react3.useCallback)((el) => !el ? true : el.hasAttribute("disabled") || el.hasAttribute("aria-disabled"), []), getItems = (0, import_react3.useCallback)(() => itemsRef.current = Array.from(containerRef.current?.querySelectorAll(selector) || []), [containerRef, selector]);
+  const { enabled: isEnabled, selector, focusOnHover, loop, virtual, typeahead, rovingTab, resetMs, activeClass, inputSelector, defaultTabbableIndex, baseTabIndex, grid, rtl: isRtl, focusOptions, scrollIntoView, onSelect, onFocusOut } = { ...DEFAULT_CONFIG, ...config }, [gridX, setGridX] = (0, import_react3.useState)(grid.x || 1), [gridY, setGridY] = (0, import_react3.useState)(grid.y || 1), [vGridY, setVGridY] = (0, import_react3.useState)(grid.vY || 1), [activeIndex, setActiveIndex] = (0, import_react3.useState)(-1), buffer = (0, import_react3.useRef)(""), timeout = (0, import_react3.useRef)(null), itemsRef = (0, import_react3.useRef)([]), enabled = isEnabled ?? virtual, roving = rovingTab ?? !virtual, rtl = (0, import_react3.useMemo)(() => isRtl ?? ("undefined" === typeof document ? false : getComputedStyle(containerRef.current || document.body).direction === "rtl"), [containerRef, isRtl]), mutationObserverRef = (0, import_react3.useRef)(null), shouldSnub = (0, import_react3.useCallback)(() => !enabled || !containerRef.current, [enabled, containerRef]), isItemDisabled = (0, import_react3.useCallback)((el) => !el || el.matches('[disabled],[aria-disabled="true"],[inert],:disabled'), []), getItems = (0, import_react3.useCallback)(() => itemsRef.current = Array.from(containerRef.current?.querySelectorAll(selector) || []), [containerRef, selector]);
   const getAbleIndex = (0, import_react3.useCallback)(
     (targetIndex, e = { key: "ArrowRight", ctrlKey: false }) => {
       if (shouldSnub()) return;
@@ -302,8 +301,9 @@ function useArrowNavigation(containerRef, config = {}) {
     },
     [shouldSnub, virtual, activeIndex, gridX, gridY, vGridY, loop, rtl, goToIndex, typeahead, typeAhead]
   );
-  const latest = (0, import_react3.useRef)({ getItems, updateDOM, activeIndex });
-  (0, import_react3.useEffect)(() => void (latest.current = { getItems, updateDOM, activeIndex }), [getItems, updateDOM, activeIndex]);
+  const latest = (0, import_react3.useRef)({ getItems, updateDOM, activeIndex, calcGrid: () => {
+  } });
+  (0, import_react3.useEffect)(() => void (latest.current = { ...latest.current, getItems, updateDOM, activeIndex }), [getItems, updateDOM, activeIndex]);
   (0, import_react3.useEffect)(() => void getItems(), [getItems, enabled]);
   (0, import_react3.useEffect)(() => void (!enabled && setActiveIndex(-1)), [enabled]);
   (0, import_react3.useEffect)(() => updateDOM(), [activeIndex, updateDOM]);
@@ -332,8 +332,7 @@ function useArrowNavigation(containerRef, config = {}) {
     const all = itemsRef.current;
     const handleHover = (e) => {
       if (!focusOnHover) return;
-      const el = e.currentTarget;
-      const i = itemsRef.current?.indexOf(el);
+      const el = e.currentTarget, i = itemsRef.current?.indexOf(el);
       if (i !== -1) goToIndex(i);
     };
     for (const el of all) el.addEventListener("mouseenter", handleHover);
@@ -341,23 +340,23 @@ function useArrowNavigation(containerRef, config = {}) {
       for (const el of all) el.removeEventListener("mouseenter", handleHover);
     };
   }, [enabled, focusOnHover, goToIndex]);
+  const sync = (0, import_react3.useCallback)(() => {
+    const { getItems: getItems2, updateDOM: updateDOM2, activeIndex: activeIndex2 } = latest.current;
+    const oldEl = itemsRef.current[activeIndex2];
+    getItems2();
+    const newEl = itemsRef.current[activeIndex2];
+    updateDOM2();
+    if (oldEl && newEl && oldEl === newEl) return;
+    setActiveIndex(-1);
+  }, []);
   (0, import_react3.useEffect)(() => {
     if (shouldSnub()) return;
-    const observer = mutationObserverRef.current = new MutationObserver(() => {
-      const { getItems: getItems2, updateDOM: updateDOM2, activeIndex: activeIndex2 } = latest.current;
-      const oldEl = itemsRef.current[activeIndex2];
-      getItems2();
-      const newEl = itemsRef.current[activeIndex2];
-      updateDOM2();
-      if (oldEl && newEl && oldEl === newEl) return;
-      setActiveIndex(-1);
-    });
+    const observer = mutationObserverRef.current = new MutationObserver(sync);
     observer.observe(containerRef.current, { childList: true, subtree: true });
     return () => observer.disconnect();
-  }, [shouldSnub, containerRef]);
+  }, [shouldSnub, containerRef, sync]);
   (0, import_react3.useEffect)(() => {
     if (shouldSnub()) return;
-    const all = itemsRef.current;
     const setGrid = (g) => {
       if (g.x) setGridX(g.x);
       if (g.y) setGridY(g.y);
@@ -365,14 +364,19 @@ function useArrowNavigation(containerRef, config = {}) {
     };
     setGrid(grid);
     if (grid.x && grid.y && grid.vY) return;
-    const calcGrid = () => setGrid(getGrid(all, !grid.x, !grid.y, !grid.vY));
-    calcGrid();
+    let ancestor = null;
     const resizeObserver = new ResizeObserver(() => calcGrid());
-    resizeObserver.observe(getCommonAncestor(all[0], all[1]) ?? containerRef.current);
+    const calcGrid = () => {
+      setGrid(getGrid(itemsRef.current, !grid.x, !grid.y, !grid.vY));
+      const next = itemsRef.current.length > 1 ? getCommonAncestor(itemsRef.current[0], itemsRef.current[1]) : containerRef.current;
+      if (next && next !== ancestor) ancestor && resizeObserver.unobserve(ancestor), ancestor = next, resizeObserver.observe(ancestor);
+    };
+    latest.current.calcGrid = calcGrid;
+    calcGrid();
     return () => resizeObserver.disconnect();
   }, [shouldSnub, containerRef, grid]);
   (0, import_react3.useEffect)(() => void (timeout.current && clearTimeout(timeout.current)), []);
-  return { gridX, gridY, vGridY, activeIndex, activeItem: (0, import_react3.useCallback)(() => itemsRef.current[activeIndex] ?? null, [activeIndex]), items: (0, import_react3.useCallback)(() => itemsRef.current, []), getAbleIndex, typeAhead, goToIndex, simulateKey };
+  return { gridX, gridY, vGridY, activeIndex, activeItem: (0, import_react3.useCallback)(() => itemsRef.current[activeIndex] ?? null, [activeIndex]), items: (0, import_react3.useCallback)(() => itemsRef.current, []), getAbleIndex, typeAhead, goToIndex, simulateKey, sync };
 }
 
 // src/ts/hooks/react/useFocusTrap.ts
@@ -381,10 +385,11 @@ var import_react4 = require("react");
 // src/ts/hooks/vanilla/focusTrap.ts
 var import_sia_reactor6 = require("sia-reactor");
 function initFocusTrap(el, { enabled = false, initialSelector = "[data-autofocus]", ringClassName = "focus-outline", root = window, scoped = true, capture = true } = import_sia_reactor6.NIL) {
-  const stacks = t007._ftrappers_stacks ??= /* @__PURE__ */ new WeakMap(), existing = (t007._ftrappers ??= /* @__PURE__ */ new WeakMap()).get(el);
+  const stack = t007._ftrappers_stack ??= [], existing = (t007._ftrappers ??= /* @__PURE__ */ new WeakMap()).get(el);
   if (!enabled || existing) return existing ? existing : void 0;
   scoped = scoped && root instanceof HTMLElement, root = scoped ? root : root === document ? document : window;
-  const stack = stacks.get(root) ?? [], focused = document.querySelector(":focus"), initial = el.querySelector(initialSelector), first = (0, import_utils2.createEl)("span", { tabIndex: 0 }, { focusGuard: "start" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), last = (0, import_utils2.createEl)("span", { tabIndex: 0 }, { focusGuard: "end" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), getFocusable = (c = el) => [...c.querySelectorAll(INTERACTIVE_SELECTOR)], resetFocus = (i = 0, els = getFocusable()) => els?.length ? els.at(i).focus() : (!el.hasAttribute("tabindex") && (el.tabIndex = -1), el.focus()), edgeFocus = (pre = false, rt = root) => {
+  let recovering = false;
+  const focused = document.querySelector(":focus"), initial = el.querySelector(initialSelector), first = (0, import_utils2.createEl)("span", { tabIndex: 0 }, { focusGuard: "start" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), last = (0, import_utils2.createEl)("span", { tabIndex: 0 }, { focusGuard: "end" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), getFocusable = (c = el) => [...c.querySelectorAll(INTERACTIVE_SELECTOR)], resetFocus = (i = 0, els = getFocusable()) => !recovering && (recovering = true, els?.length ? els.at(i).focus() : (!el.hasAttribute("tabindex") && (el.tabIndex = -1), el.focus()), recovering = false), edgeFocus = (pre = false, rt = root) => {
     if (!scoped) return resetFocus(pre ? -1 : 0);
     if (rt.hasAttribute("tabindex")) return rt.focus();
     const items = getFocusable();
@@ -394,28 +399,33 @@ function initFocusTrap(el, { enabled = false, initialSelector = "[data-autofocus
     while (p !== ceil && (!all.length || (pre ? rt.contains(all[0]) : rt.contains(all.at(-1))))) all = getFocusable(p = p.parentElement || ceil);
     for (let target, len = all.length, i = all.indexOf(items[pre ? 0 : items.length - 1]) + (pre ? -1 : 1); pre ? i >= 0 : i < len; pre ? i-- : i++) if (!rt.contains(target = all[i])) return target.focus();
     (pre ? first : last).blur();
-  }, handleFocusIn = () => {
+  }, handleFocusIn = (e) => {
     if (document.querySelector("dialog:modal") && !el.matches("dialog:modal")) return;
-    stack.at(-1) === el && (0, import_utils3.getActiveEl)(el.ownerDocument) !== root && !el.contains((0, import_utils3.getActiveEl)(el.ownerDocument)) && resetFocus();
+    stack.at(-1) === el && (0, import_utils3.getActiveEl)(el.ownerDocument) !== root && !el.contains((0, import_utils3.getActiveEl)(el.ownerDocument)) && !e.composedPath().includes(el) && resetFocus();
   }, handleInitialBlur = () => initial.classList.remove(ringClassName);
   first.addEventListener("focus", (e) => el.contains(e.relatedTarget) ? edgeFocus(true) : resetFocus(), capture), el.prepend(first);
   last.addEventListener("focus", (e) => el.contains(e.relatedTarget) ? edgeFocus() : resetFocus(-1), capture), el.append(last);
   root.addEventListener("focusin", handleFocusIn, capture);
   if (initial || !el.contains(focused)) !initial ? setTimeout(resetFocus) : setTimeout(() => (initial.classList.add(ringClassName), initial.focus(), initial.addEventListener("blur", handleInitialBlur, capture)));
-  if (!stack.includes(el)) stack.push(el), stacks.set(root, stack);
   const destroy = () => {
     focused?.isConnected && focused.focus(), first.remove(), last.remove();
     root.removeEventListener("focusin", handleFocusIn, capture);
     initial?.removeEventListener("blur", handleInitialBlur, capture);
     t007._ftrappers.delete(el), stack.splice(stack.indexOf(el), 1);
   };
-  return t007._ftrappers.set(el, destroy), destroy;
+  const handle = { destroy, sync: () => (el.prepend(first), el.append(last)) };
+  return !stack.includes(el) && stack.push(el), t007._ftrappers.set(el, handle), handle;
 }
 
 // src/ts/hooks/react/useFocusTrap.ts
 var import_sia_reactor7 = require("sia-reactor");
 function useFocusTrap(ref, config = import_sia_reactor7.NIL) {
-  (0, import_react4.useEffect)(() => ref.current ? initFocusTrap(ref.current, config) : void 0, [ref, config.enabled, config.initialSelector, config.ringClassName, config.root, config.scoped, config.capture]);
+  const handle = (0, import_react4.useRef)(void 0);
+  (0, import_react4.useEffect)(() => {
+    if (!ref.current) return;
+    return handle.current = initFocusTrap(ref.current, config), () => handle.current?.destroy();
+  }, [ref, config.enabled, config.initialSelector, config.ringClassName, config.root, config.scoped, config.capture]);
+  return { sync: () => handle.current?.sync() };
 }
 
 // src/ts/hooks/react/useHighlight.ts

package/dist/hooks/react.d.cts

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
-import { a as ScrollAssistConfig, C as Config, K as KeyEvent } from '../scrollAssist-l0V2H-jx.cjs';
-import { O as OutsideClickConfig, F as FocusTrapConfig, R as RippleConfig } from '../ripple-87VO-U7A.cjs';
+import { a as ScrollAssistConfig, C as Config, K as KeyEvent, b as FocusTrapConfig } from '../scrollAssist-BNvPnsJq.cjs';
+import { O as OutsideClickConfig, R as RippleConfig } from '../ripple-D1kGErTn.cjs';
 export { H as HighlightOptions, u as useHighlight } from '../useHighlight-DYc_GF0R.cjs';
 
 /** Configuration options for the `useScrollAssist` hook. */
@@ -33,10 +33,13 @@ declare function useArrowNavigation(containerRef: React.RefObject<HTMLElement>,
     typeAhead: (key: string) => void;
     goToIndex: (targetIndex: number, e?: KeyEvent) => void;
     simulateKey: (e: KeyEvent) => void;
+    sync: () => void;
 };
 
-/** React hook  to keep focus trapped inside an element until disabled. */
-declare function useFocusTrap(ref: RefObject<HTMLElement>, config?: FocusTrapConfig): void;
+/** React hook to keep focus trapped inside an element until disabled. */
+declare function useFocusTrap(ref: RefObject<HTMLElement>, config?: FocusTrapConfig): {
+    sync: () => void | undefined;
+};
 
 /** React hook to render and control a material-style ripple animation on an element.
  * @returns Stable pointer handler for clickable UI surfaces.

package/dist/hooks/react.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
-import { a as ScrollAssistConfig, C as Config, K as KeyEvent } from '../scrollAssist-l0V2H-jx.js';
-import { O as OutsideClickConfig, F as FocusTrapConfig, R as RippleConfig } from '../ripple-87VO-U7A.js';
+import { a as ScrollAssistConfig, C as Config, K as KeyEvent, b as FocusTrapConfig } from '../scrollAssist-BNvPnsJq.js';
+import { O as OutsideClickConfig, R as RippleConfig } from '../ripple-D1kGErTn.js';
 export { H as HighlightOptions, u as useHighlight } from '../useHighlight-DYc_GF0R.js';
 
 /** Configuration options for the `useScrollAssist` hook. */
@@ -33,10 +33,13 @@ declare function useArrowNavigation(containerRef: React.RefObject<HTMLElement>,
     typeAhead: (key: string) => void;
     goToIndex: (targetIndex: number, e?: KeyEvent) => void;
     simulateKey: (e: KeyEvent) => void;
+    sync: () => void;
 };
 
-/** React hook  to keep focus trapped inside an element until disabled. */
-declare function useFocusTrap(ref: RefObject<HTMLElement>, config?: FocusTrapConfig): void;
+/** React hook to keep focus trapped inside an element until disabled. */
+declare function useFocusTrap(ref: RefObject<HTMLElement>, config?: FocusTrapConfig): {
+    sync: () => void | undefined;
+};
 
 /** React hook to render and control a material-style ripple animation on an element.
  * @returns Stable pointer handler for clickable UI surfaces.

package/dist/hooks/react.js

@@ -11,11 +11,11 @@ import {
   initFocusTrap,
   initOutsideClick,
   rippleHandler
-} from "../chunk-ZRCBB5P4.js";
+} from "../chunk-NX2LWYD6.js";
 import {
   INTERACTIVE_SELECTOR,
   getActiveEl
-} from "../chunk-HGUYOV3P.js";
+} from "../chunk-ZALPHCSJ.js";
 
 // src/ts/hooks/react/useScrollAssist.ts
 import { useEffect, useRef, useCallback } from "react";
@@ -107,7 +107,7 @@ function useOutsideClick(ref, config = NIL2) {
 // src/ts/hooks/react/useArrowNavigation/index.ts
 import { useEffect as useEffect3, useState, useCallback as useCallback2, useRef as useRef2, useMemo } from "react";
 function useArrowNavigation(containerRef, config = {}) {
-  const { enabled: isEnabled, selector, focusOnHover, loop, virtual, typeahead, rovingTab, resetMs, activeClass, inputSelector, defaultTabbableIndex, baseTabIndex, grid, rtl: isRtl, focusOptions, scrollIntoView, onSelect, onFocusOut } = { ...DEFAULT_CONFIG, ...config }, [gridX, setGridX] = useState(grid.x || 1), [gridY, setGridY] = useState(grid.y || 1), [vGridY, setVGridY] = useState(grid.vY || 1), [activeIndex, setActiveIndex] = useState(-1), buffer = useRef2(""), timeout = useRef2(null), itemsRef = useRef2([]), enabled = isEnabled ?? virtual, roving = rovingTab ?? !virtual, rtl = useMemo(() => isRtl ?? ("undefined" === typeof document ? false : getComputedStyle(containerRef.current || document.body).direction === "rtl"), [containerRef, isRtl]), mutationObserverRef = useRef2(null), shouldSnub = useCallback2(() => !enabled || !containerRef.current, [enabled, containerRef]), isItemDisabled = useCallback2((el) => !el ? true : el.hasAttribute("disabled") || el.hasAttribute("aria-disabled"), []), getItems = useCallback2(() => itemsRef.current = Array.from(containerRef.current?.querySelectorAll(selector) || []), [containerRef, selector]);
+  const { enabled: isEnabled, selector, focusOnHover, loop, virtual, typeahead, rovingTab, resetMs, activeClass, inputSelector, defaultTabbableIndex, baseTabIndex, grid, rtl: isRtl, focusOptions, scrollIntoView, onSelect, onFocusOut } = { ...DEFAULT_CONFIG, ...config }, [gridX, setGridX] = useState(grid.x || 1), [gridY, setGridY] = useState(grid.y || 1), [vGridY, setVGridY] = useState(grid.vY || 1), [activeIndex, setActiveIndex] = useState(-1), buffer = useRef2(""), timeout = useRef2(null), itemsRef = useRef2([]), enabled = isEnabled ?? virtual, roving = rovingTab ?? !virtual, rtl = useMemo(() => isRtl ?? ("undefined" === typeof document ? false : getComputedStyle(containerRef.current || document.body).direction === "rtl"), [containerRef, isRtl]), mutationObserverRef = useRef2(null), shouldSnub = useCallback2(() => !enabled || !containerRef.current, [enabled, containerRef]), isItemDisabled = useCallback2((el) => !el || el.matches('[disabled],[aria-disabled="true"],[inert],:disabled'), []), getItems = useCallback2(() => itemsRef.current = Array.from(containerRef.current?.querySelectorAll(selector) || []), [containerRef, selector]);
   const getAbleIndex = useCallback2(
     (targetIndex, e = { key: "ArrowRight", ctrlKey: false }) => {
       if (shouldSnub()) return;
@@ -181,8 +181,9 @@ function useArrowNavigation(containerRef, config = {}) {
     },
     [shouldSnub, virtual, activeIndex, gridX, gridY, vGridY, loop, rtl, goToIndex, typeahead, typeAhead]
   );
-  const latest = useRef2({ getItems, updateDOM, activeIndex });
-  useEffect3(() => void (latest.current = { getItems, updateDOM, activeIndex }), [getItems, updateDOM, activeIndex]);
+  const latest = useRef2({ getItems, updateDOM, activeIndex, calcGrid: () => {
+  } });
+  useEffect3(() => void (latest.current = { ...latest.current, getItems, updateDOM, activeIndex }), [getItems, updateDOM, activeIndex]);
   useEffect3(() => void getItems(), [getItems, enabled]);
   useEffect3(() => void (!enabled && setActiveIndex(-1)), [enabled]);
   useEffect3(() => updateDOM(), [activeIndex, updateDOM]);
@@ -211,8 +212,7 @@ function useArrowNavigation(containerRef, config = {}) {
     const all = itemsRef.current;
     const handleHover = (e) => {
       if (!focusOnHover) return;
-      const el = e.currentTarget;
-      const i = itemsRef.current?.indexOf(el);
+      const el = e.currentTarget, i = itemsRef.current?.indexOf(el);
       if (i !== -1) goToIndex(i);
     };
     for (const el of all) el.addEventListener("mouseenter", handleHover);
@@ -220,23 +220,23 @@ function useArrowNavigation(containerRef, config = {}) {
       for (const el of all) el.removeEventListener("mouseenter", handleHover);
     };
   }, [enabled, focusOnHover, goToIndex]);
+  const sync = useCallback2(() => {
+    const { getItems: getItems2, updateDOM: updateDOM2, activeIndex: activeIndex2 } = latest.current;
+    const oldEl = itemsRef.current[activeIndex2];
+    getItems2();
+    const newEl = itemsRef.current[activeIndex2];
+    updateDOM2();
+    if (oldEl && newEl && oldEl === newEl) return;
+    setActiveIndex(-1);
+  }, []);
   useEffect3(() => {
     if (shouldSnub()) return;
-    const observer = mutationObserverRef.current = new MutationObserver(() => {
-      const { getItems: getItems2, updateDOM: updateDOM2, activeIndex: activeIndex2 } = latest.current;
-      const oldEl = itemsRef.current[activeIndex2];
-      getItems2();
-      const newEl = itemsRef.current[activeIndex2];
-      updateDOM2();
-      if (oldEl && newEl && oldEl === newEl) return;
-      setActiveIndex(-1);
-    });
+    const observer = mutationObserverRef.current = new MutationObserver(sync);
     observer.observe(containerRef.current, { childList: true, subtree: true });
     return () => observer.disconnect();
-  }, [shouldSnub, containerRef]);
+  }, [shouldSnub, containerRef, sync]);
   useEffect3(() => {
     if (shouldSnub()) return;
-    const all = itemsRef.current;
     const setGrid = (g) => {
       if (g.x) setGridX(g.x);
       if (g.y) setGridY(g.y);
@@ -244,21 +244,31 @@ function useArrowNavigation(containerRef, config = {}) {
     };
     setGrid(grid);
     if (grid.x && grid.y && grid.vY) return;
-    const calcGrid = () => setGrid(getGrid(all, !grid.x, !grid.y, !grid.vY));
-    calcGrid();
+    let ancestor = null;
     const resizeObserver = new ResizeObserver(() => calcGrid());
-    resizeObserver.observe(getCommonAncestor(all[0], all[1]) ?? containerRef.current);
+    const calcGrid = () => {
+      setGrid(getGrid(itemsRef.current, !grid.x, !grid.y, !grid.vY));
+      const next = itemsRef.current.length > 1 ? getCommonAncestor(itemsRef.current[0], itemsRef.current[1]) : containerRef.current;
+      if (next && next !== ancestor) ancestor && resizeObserver.unobserve(ancestor), ancestor = next, resizeObserver.observe(ancestor);
+    };
+    latest.current.calcGrid = calcGrid;
+    calcGrid();
     return () => resizeObserver.disconnect();
   }, [shouldSnub, containerRef, grid]);
   useEffect3(() => void (timeout.current && clearTimeout(timeout.current)), []);
-  return { gridX, gridY, vGridY, activeIndex, activeItem: useCallback2(() => itemsRef.current[activeIndex] ?? null, [activeIndex]), items: useCallback2(() => itemsRef.current, []), getAbleIndex, typeAhead, goToIndex, simulateKey };
+  return { gridX, gridY, vGridY, activeIndex, activeItem: useCallback2(() => itemsRef.current[activeIndex] ?? null, [activeIndex]), items: useCallback2(() => itemsRef.current, []), getAbleIndex, typeAhead, goToIndex, simulateKey, sync };
 }
 
 // src/ts/hooks/react/useFocusTrap.ts
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect4, useRef as useRef3 } from "react";
 import { NIL as NIL3 } from "sia-reactor";
 function useFocusTrap(ref, config = NIL3) {
-  useEffect4(() => ref.current ? initFocusTrap(ref.current, config) : void 0, [ref, config.enabled, config.initialSelector, config.ringClassName, config.root, config.scoped, config.capture]);
+  const handle = useRef3(void 0);
+  useEffect4(() => {
+    if (!ref.current) return;
+    return handle.current = initFocusTrap(ref.current, config), () => handle.current?.destroy();
+  }, [ref, config.enabled, config.initialSelector, config.ringClassName, config.root, config.scoped, config.capture]);
+  return { sync: () => handle.current?.sync() };
 }
 
 // src/ts/hooks/react/useRipple.ts

package/dist/hooks/vanilla.cjs

@@ -29,7 +29,9 @@ __export(vanilla_exports, {
   removeFocusTrap: () => removeFocusTrap,
   removeOutsideClick: () => removeOutsideClick,
   removeScrollAssist: () => removeScrollAssist,
-  rippleHandler: () => rippleHandler
+  rippleHandler: () => rippleHandler,
+  syncArrowNavigation: () => syncArrowNavigation,
+  syncFocusTrap: () => syncFocusTrap
 });
 module.exports = __toCommonJS(vanilla_exports);
 
@@ -138,34 +140,34 @@ function initVScrollerator({ baseSpeed = 3, maxSpeed = 10, stepDelay = 2e3, base
 // src/ts/hooks/vanilla/outsideClick.ts
 var import_sia_reactor4 = require("sia-reactor");
 function initOutsideClick(el, { enabled = false, onOutside = import_sia_reactor4.NOOP, outOnClick = true, outOnEscape = true, outOnFocusOut = false, allowBounds = false, allowInputs = false, root = window, scoped = true, capture = true } = import_sia_reactor4.NIL) {
-  const stacks = t007._outsiders_stacks ??= /* @__PURE__ */ new WeakMap(), existing = (t007._outsiders ??= /* @__PURE__ */ new WeakMap()).get(el);
+  const stack = t007._outsiders_stack ??= [], existing = (t007._outsiders ??= /* @__PURE__ */ new WeakMap()).get(el);
   if (!enabled || existing) return existing ? existing : void 0;
   scoped = scoped && root instanceof HTMLElement, root = scoped ? root : root === document ? document : window;
-  const stack = stacks.get(root) ?? [], onScopedOut = (e, t, p = e.touches?.[0] || e, rect = allowBounds ? el.getBoundingClientRect() : null) => {
+  const onScopedOut = (e, t, p = e.touches?.[0] || e, rect = allowBounds ? el.getBoundingClientRect() : null) => {
     if (stack.at(-1) !== el || (allowBounds ? p.clientX >= rect.left && p.clientX <= rect.right && p.clientY >= rect.top && p.clientY <= rect.bottom : el.contains(t))) return false;
     return (!scoped ? true : root.contains(t)) && onOutside(e);
   }, handleClick = ((e) => outOnClick && !(allowInputs && isInteractive(e.target)) && onScopedOut(e, e.target)), handleEscape = ((e) => outOnEscape && e.key === "Escape" && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey && stack.at(-1) === el && onOutside(e)), handleFocusOut = (e) => outOnFocusOut && !el.contains(e.relatedTarget) && onScopedOut(e, e.relatedTarget);
   root.addEventListener("mousedown", handleClick, capture), root.addEventListener("touchstart", handleClick, { passive: true, capture });
   root.addEventListener("keydown", handleEscape, capture);
   el.addEventListener("focusout", handleFocusOut, capture);
-  if (!stack.includes(el)) stack.push(el), stacks.set(root, stack);
   const destroy = () => {
     root.removeEventListener("mousedown", handleClick, capture), root.removeEventListener("touchstart", handleClick, capture);
     root.removeEventListener("keydown", handleEscape, capture);
     el.removeEventListener("focusout", handleFocusOut, capture);
     t007._outsiders.delete(el), stack.splice(stack.indexOf(el), 1);
   };
-  return t007._outsiders.set(el, destroy), destroy;
+  return !stack.includes(el) && stack.push(el), t007._outsiders.set(el, destroy), destroy;
 }
 var removeOutsideClick = (el) => t007._outsiders?.get(el)?.();
 
 // src/ts/hooks/vanilla/focusTrap.ts
 var import_sia_reactor5 = require("sia-reactor");
 function initFocusTrap(el, { enabled = false, initialSelector = "[data-autofocus]", ringClassName = "focus-outline", root = window, scoped = true, capture = true } = import_sia_reactor5.NIL) {
-  const stacks = t007._ftrappers_stacks ??= /* @__PURE__ */ new WeakMap(), existing = (t007._ftrappers ??= /* @__PURE__ */ new WeakMap()).get(el);
+  const stack = t007._ftrappers_stack ??= [], existing = (t007._ftrappers ??= /* @__PURE__ */ new WeakMap()).get(el);
   if (!enabled || existing) return existing ? existing : void 0;
   scoped = scoped && root instanceof HTMLElement, root = scoped ? root : root === document ? document : window;
-  const stack = stacks.get(root) ?? [], focused = document.querySelector(":focus"), initial = el.querySelector(initialSelector), first = (0, import_utils.createEl)("span", { tabIndex: 0 }, { focusGuard: "start" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), last = (0, import_utils.createEl)("span", { tabIndex: 0 }, { focusGuard: "end" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), getFocusable = (c = el) => [...c.querySelectorAll(INTERACTIVE_SELECTOR)], resetFocus = (i = 0, els = getFocusable()) => els?.length ? els.at(i).focus() : (!el.hasAttribute("tabindex") && (el.tabIndex = -1), el.focus()), edgeFocus = (pre = false, rt = root) => {
+  let recovering = false;
+  const focused = document.querySelector(":focus"), initial = el.querySelector(initialSelector), first = (0, import_utils.createEl)("span", { tabIndex: 0 }, { focusGuard: "start" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), last = (0, import_utils.createEl)("span", { tabIndex: 0 }, { focusGuard: "end" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), getFocusable = (c = el) => [...c.querySelectorAll(INTERACTIVE_SELECTOR)], resetFocus = (i = 0, els = getFocusable()) => !recovering && (recovering = true, els?.length ? els.at(i).focus() : (!el.hasAttribute("tabindex") && (el.tabIndex = -1), el.focus()), recovering = false), edgeFocus = (pre = false, rt = root) => {
     if (!scoped) return resetFocus(pre ? -1 : 0);
     if (rt.hasAttribute("tabindex")) return rt.focus();
     const items = getFocusable();
@@ -175,24 +177,25 @@ function initFocusTrap(el, { enabled = false, initialSelector = "[data-autofocus
     while (p !== ceil && (!all.length || (pre ? rt.contains(all[0]) : rt.contains(all.at(-1))))) all = getFocusable(p = p.parentElement || ceil);
     for (let target, len = all.length, i = all.indexOf(items[pre ? 0 : items.length - 1]) + (pre ? -1 : 1); pre ? i >= 0 : i < len; pre ? i-- : i++) if (!rt.contains(target = all[i])) return target.focus();
     (pre ? first : last).blur();
-  }, handleFocusIn = () => {
+  }, handleFocusIn = (e) => {
     if (document.querySelector("dialog:modal") && !el.matches("dialog:modal")) return;
-    stack.at(-1) === el && (0, import_utils2.getActiveEl)(el.ownerDocument) !== root && !el.contains((0, import_utils2.getActiveEl)(el.ownerDocument)) && resetFocus();
+    stack.at(-1) === el && (0, import_utils2.getActiveEl)(el.ownerDocument) !== root && !el.contains((0, import_utils2.getActiveEl)(el.ownerDocument)) && !e.composedPath().includes(el) && resetFocus();
   }, handleInitialBlur = () => initial.classList.remove(ringClassName);
   first.addEventListener("focus", (e) => el.contains(e.relatedTarget) ? edgeFocus(true) : resetFocus(), capture), el.prepend(first);
   last.addEventListener("focus", (e) => el.contains(e.relatedTarget) ? edgeFocus() : resetFocus(-1), capture), el.append(last);
   root.addEventListener("focusin", handleFocusIn, capture);
   if (initial || !el.contains(focused)) !initial ? setTimeout(resetFocus) : setTimeout(() => (initial.classList.add(ringClassName), initial.focus(), initial.addEventListener("blur", handleInitialBlur, capture)));
-  if (!stack.includes(el)) stack.push(el), stacks.set(root, stack);
   const destroy = () => {
     focused?.isConnected && focused.focus(), first.remove(), last.remove();
     root.removeEventListener("focusin", handleFocusIn, capture);
     initial?.removeEventListener("blur", handleInitialBlur, capture);
     t007._ftrappers.delete(el), stack.splice(stack.indexOf(el), 1);
   };
-  return t007._ftrappers.set(el, destroy), destroy;
+  const handle = { destroy, sync: () => (el.prepend(first), el.append(last)) };
+  return !stack.includes(el) && stack.push(el), t007._ftrappers.set(el, handle), handle;
 }
-var removeFocusTrap = (el) => t007._ftrappers?.get(el)?.();
+var removeFocusTrap = (el) => t007._ftrappers?.get(el)?.destroy();
+var syncFocusTrap = (el) => t007._ftrappers?.get(el)?.sync();
 
 // src/ts/hooks/react/useArrowNavigation/consts.ts
 var import_sia_reactor6 = require("sia-reactor");
@@ -270,7 +273,7 @@ function initArrowNavigation(container, config = {}) {
   if (!config.enabled || existing) return existing ? existing : void 0;
   const { enabled: isEnabled, selector, focusOnHover, loop, virtual, typeahead, resetMs, activeClass, inputSelector, defaultTabbableIndex, baseTabIndex, grid, rtl: isRtl, focusOptions, scrollIntoView, onSelect, onFocusOut, rovingTab } = { ...DEFAULT_CONFIG, ...config };
   let gridX = grid.x || 1, gridY = grid.y || 1, vGridY = grid.vY || 1, activeIndex = -1, buffer = "", timeout = null, items = [];
-  const enabled = isEnabled ?? virtual, roving = rovingTab ?? !virtual, rtl = isRtl ?? ("undefined" === typeof document ? false : getComputedStyle(container).direction === "rtl"), shouldSnub = () => !enabled || !container, isItemDisabled = (el) => !el || el.hasAttribute("disabled") || el.hasAttribute("aria-disabled"), getItems = () => items = Array.from(container.querySelectorAll(selector));
+  const enabled = isEnabled ?? virtual, roving = rovingTab ?? !virtual, rtl = isRtl ?? ("undefined" === typeof document ? false : getComputedStyle(container).direction === "rtl"), shouldSnub = () => !enabled || !container, isItemDisabled = (el) => !el || el.matches('[disabled],[aria-disabled="true"],[inert],:disabled'), getItems = () => items = Array.from(container.querySelectorAll(selector));
   const getAbleIndex = (targetIndex, e = { key: "ArrowRight", ctrlKey: false }) => {
     if (shouldSnub() || !items.length) return null;
     let index = targetIndex;
@@ -345,37 +348,45 @@ function initArrowNavigation(container, config = {}) {
     if (idx !== -1) goToIndex(idx);
   };
   for (const el of items) el.addEventListener("mouseenter", handleHover);
-  const mutationObserver = new MutationObserver(() => {
+  const sync = () => {
     const oldEl = items[activeIndex];
+    for (const el of items) el.removeEventListener("mouseenter", handleHover);
     getItems();
+    for (const el of items) el.addEventListener("mouseenter", handleHover);
+    calcGrid();
     const newEl = items[activeIndex];
     updateDOM();
     if (oldEl && newEl && oldEl === newEl) return;
-    resetActiveIndex();
-    updateDOM();
-  });
+    resetActiveIndex(), updateDOM();
+  };
+  const mutationObserver = new MutationObserver(sync);
   mutationObserver.observe(container, { childList: true, subtree: true });
   const setGrid = (g) => {
     if (g.x !== void 0) gridX = g.x;
     if (g.y !== void 0) gridY = g.y;
     if (g.vY !== void 0) vGridY = g.vY;
   };
-  const calcGrid = () => setGrid(getGrid(items, !grid.x, !grid.y, !grid.vY));
+  let ancestor = null;
+  const resizeObserver = new ResizeObserver(() => calcGrid());
+  const calcGrid = () => {
+    setGrid(getGrid(items, !grid.x, !grid.y, !grid.vY));
+    const next = items.length > 1 ? getCommonAncestor(items[0], items[1]) : container;
+    if (next && next !== ancestor) ancestor && resizeObserver.unobserve(ancestor), ancestor = next, resizeObserver.observe(ancestor);
+  };
   setGrid(grid), calcGrid();
-  const ancestor = items.length > 1 ? getCommonAncestor(items[0], items[1]) : container;
-  const resizeObserver = new ResizeObserver(calcGrid);
-  if (ancestor) resizeObserver.observe(ancestor);
   const destroy = () => {
     for (const el of interactiveEls) el?.removeEventListener("keydown", simulateKey);
     container.removeEventListener("focusout", handleFocusOut);
     for (const el of items) el.removeEventListener("mouseenter", handleHover);
     mutationObserver.disconnect(), resizeObserver.disconnect();
     if (timeout) clearTimeout(timeout);
+    t007._arrownavs.delete(container);
   };
-  const handle = { gridX: () => gridX, gridY: () => gridY, vGridY: () => vGridY, items: () => items, activeIndex: () => activeIndex, activeItem: () => items[activeIndex] ?? null, getAbleIndex, typeAhead, goToIndex, simulateKey, destroy };
+  const handle = { gridX: () => gridX, gridY: () => gridY, vGridY: () => vGridY, items: () => items, activeIndex: () => activeIndex, activeItem: () => items[activeIndex] ?? null, getAbleIndex, typeAhead, goToIndex, simulateKey, sync, destroy };
   return t007._arrownavs.set(container, handle), handle;
 }
 var removeArrowNavigation = (container) => t007._arrownavs?.get(container)?.destroy();
+var syncArrowNavigation = (container) => t007._arrownavs?.get(container)?.sync();
 
 // src/ts/hooks/vanilla/ripple.ts
 var import_sia_reactor7 = require("sia-reactor");
@@ -409,5 +420,7 @@ function rippleHandler(e, { target, forceCenter = false, wrapperClassName = "t00
   removeFocusTrap,
   removeOutsideClick,
   removeScrollAssist,
-  rippleHandler
+  rippleHandler,
+  syncArrowNavigation,
+  syncFocusTrap
 });

package/dist/hooks/vanilla.d.cts

@@ -1,6 +1,6 @@
-export { a as ScrollAssistConfig, S as ScrollAssistHandle, b as ScrollDir, i as initScrollAssist, r as removeScrollAssist } from '../scrollAssist-l0V2H-jx.cjs';
-export { F as FocusTrapConfig, O as OutsideClickConfig, R as RippleConfig, i as initFocusTrap, a as initOutsideClick, r as removeFocusTrap, b as removeOutsideClick, c as rippleHandler } from '../ripple-87VO-U7A.cjs';
-export { A as ArrowNavigationHandle, i as initArrowNavigation, r as removeArrowNavigation } from '../arrowNavigation-IaWiNTa6.cjs';
+export { b as FocusTrapConfig, F as FocusTrapHandle, a as ScrollAssistConfig, S as ScrollAssistHandle, c as ScrollDir, i as initFocusTrap, d as initScrollAssist, r as removeFocusTrap, e as removeScrollAssist, s as syncFocusTrap } from '../scrollAssist-BNvPnsJq.cjs';
+export { O as OutsideClickConfig, R as RippleConfig, i as initOutsideClick, r as removeOutsideClick, a as rippleHandler } from '../ripple-D1kGErTn.cjs';
+export { A as ArrowNavigationHandle, i as initArrowNavigation, r as removeArrowNavigation, s as syncArrowNavigation } from '../arrowNavigation-zEJbo8Er.cjs';
 
 /** Configuration for the vertical edge-scrolling helper. */
 interface ScrolleratorOptions {

package/dist/hooks/vanilla.d.ts

@@ -1,6 +1,6 @@
-export { a as ScrollAssistConfig, S as ScrollAssistHandle, b as ScrollDir, i as initScrollAssist, r as removeScrollAssist } from '../scrollAssist-l0V2H-jx.js';
-export { F as FocusTrapConfig, O as OutsideClickConfig, R as RippleConfig, i as initFocusTrap, a as initOutsideClick, r as removeFocusTrap, b as removeOutsideClick, c as rippleHandler } from '../ripple-87VO-U7A.js';
-export { A as ArrowNavigationHandle, i as initArrowNavigation, r as removeArrowNavigation } from '../arrowNavigation-DF7ul3A3.js';
+export { b as FocusTrapConfig, F as FocusTrapHandle, a as ScrollAssistConfig, S as ScrollAssistHandle, c as ScrollDir, i as initFocusTrap, d as initScrollAssist, r as removeFocusTrap, e as removeScrollAssist, s as syncFocusTrap } from '../scrollAssist-BNvPnsJq.js';
+export { O as OutsideClickConfig, R as RippleConfig, i as initOutsideClick, r as removeOutsideClick, a as rippleHandler } from '../ripple-D1kGErTn.js';
+export { A as ArrowNavigationHandle, i as initArrowNavigation, r as removeArrowNavigation, s as syncArrowNavigation } from '../arrowNavigation-B9bEdoqR.js';
 
 /** Configuration for the vertical edge-scrolling helper. */
 interface ScrolleratorOptions {

package/dist/hooks/vanilla.js

@@ -9,13 +9,14 @@ import {
   initOutsideClick,
   removeFocusTrap,
   removeOutsideClick,
-  rippleHandler
-} from "../chunk-ZRCBB5P4.js";
+  rippleHandler,
+  syncFocusTrap
+} from "../chunk-NX2LWYD6.js";
 import {
   INTERACTIVE_SELECTOR,
   createEl,
   getActiveEl
-} from "../chunk-HGUYOV3P.js";
+} from "../chunk-ZALPHCSJ.js";
 
 // src/ts/hooks/vanilla/scrollAssist.ts
 import { NIL } from "sia-reactor";
@@ -113,7 +114,7 @@ function initArrowNavigation(container, config = {}) {
   if (!config.enabled || existing) return existing ? existing : void 0;
   const { enabled: isEnabled, selector, focusOnHover, loop, virtual, typeahead, resetMs, activeClass, inputSelector, defaultTabbableIndex, baseTabIndex, grid, rtl: isRtl, focusOptions, scrollIntoView, onSelect, onFocusOut, rovingTab } = { ...DEFAULT_CONFIG, ...config };
   let gridX = grid.x || 1, gridY = grid.y || 1, vGridY = grid.vY || 1, activeIndex = -1, buffer = "", timeout = null, items = [];
-  const enabled = isEnabled ?? virtual, roving = rovingTab ?? !virtual, rtl = isRtl ?? ("undefined" === typeof document ? false : getComputedStyle(container).direction === "rtl"), shouldSnub = () => !enabled || !container, isItemDisabled = (el) => !el || el.hasAttribute("disabled") || el.hasAttribute("aria-disabled"), getItems = () => items = Array.from(container.querySelectorAll(selector));
+  const enabled = isEnabled ?? virtual, roving = rovingTab ?? !virtual, rtl = isRtl ?? ("undefined" === typeof document ? false : getComputedStyle(container).direction === "rtl"), shouldSnub = () => !enabled || !container, isItemDisabled = (el) => !el || el.matches('[disabled],[aria-disabled="true"],[inert],:disabled'), getItems = () => items = Array.from(container.querySelectorAll(selector));
   const getAbleIndex = (targetIndex, e = { key: "ArrowRight", ctrlKey: false }) => {
     if (shouldSnub() || !items.length) return null;
     let index = targetIndex;
@@ -188,37 +189,45 @@ function initArrowNavigation(container, config = {}) {
     if (idx !== -1) goToIndex(idx);
   };
   for (const el of items) el.addEventListener("mouseenter", handleHover);
-  const mutationObserver = new MutationObserver(() => {
+  const sync = () => {
     const oldEl = items[activeIndex];
+    for (const el of items) el.removeEventListener("mouseenter", handleHover);
     getItems();
+    for (const el of items) el.addEventListener("mouseenter", handleHover);
+    calcGrid();
     const newEl = items[activeIndex];
     updateDOM();
     if (oldEl && newEl && oldEl === newEl) return;
-    resetActiveIndex();
-    updateDOM();
-  });
+    resetActiveIndex(), updateDOM();
+  };
+  const mutationObserver = new MutationObserver(sync);
   mutationObserver.observe(container, { childList: true, subtree: true });
   const setGrid = (g) => {
     if (g.x !== void 0) gridX = g.x;
     if (g.y !== void 0) gridY = g.y;
     if (g.vY !== void 0) vGridY = g.vY;
   };
-  const calcGrid = () => setGrid(getGrid(items, !grid.x, !grid.y, !grid.vY));
+  let ancestor = null;
+  const resizeObserver = new ResizeObserver(() => calcGrid());
+  const calcGrid = () => {
+    setGrid(getGrid(items, !grid.x, !grid.y, !grid.vY));
+    const next = items.length > 1 ? getCommonAncestor(items[0], items[1]) : container;
+    if (next && next !== ancestor) ancestor && resizeObserver.unobserve(ancestor), ancestor = next, resizeObserver.observe(ancestor);
+  };
   setGrid(grid), calcGrid();
-  const ancestor = items.length > 1 ? getCommonAncestor(items[0], items[1]) : container;
-  const resizeObserver = new ResizeObserver(calcGrid);
-  if (ancestor) resizeObserver.observe(ancestor);
   const destroy = () => {
     for (const el of interactiveEls) el?.removeEventListener("keydown", simulateKey);
     container.removeEventListener("focusout", handleFocusOut);
     for (const el of items) el.removeEventListener("mouseenter", handleHover);
     mutationObserver.disconnect(), resizeObserver.disconnect();
     if (timeout) clearTimeout(timeout);
+    t007._arrownavs.delete(container);
   };
-  const handle = { gridX: () => gridX, gridY: () => gridY, vGridY: () => vGridY, items: () => items, activeIndex: () => activeIndex, activeItem: () => items[activeIndex] ?? null, getAbleIndex, typeAhead, goToIndex, simulateKey, destroy };
+  const handle = { gridX: () => gridX, gridY: () => gridY, vGridY: () => vGridY, items: () => items, activeIndex: () => activeIndex, activeItem: () => items[activeIndex] ?? null, getAbleIndex, typeAhead, goToIndex, simulateKey, sync, destroy };
   return t007._arrownavs.set(container, handle), handle;
 }
 var removeArrowNavigation = (container) => t007._arrownavs?.get(container)?.destroy();
+var syncArrowNavigation = (container) => t007._arrownavs?.get(container)?.sync();
 export {
   initArrowNavigation,
   initFocusTrap,
@@ -229,5 +238,7 @@ export {
   removeFocusTrap,
   removeOutsideClick,
   removeScrollAssist,
-  rippleHandler
+  rippleHandler,
+  syncArrowNavigation,
+  syncFocusTrap
 };

package/dist/index.cjs

@@ -121,8 +121,12 @@ function loadResource(req, type = "style", { module: module2, media, crossOrigin
 function getWindow(el = window) {
   return el?.ownerDocument?.defaultView ?? el?.defaultView ?? window;
 }
-function createListRenderer({ container, getKey, createNode, updateNode = import_sia_reactor.NOOP, destroyNode = import_sia_reactor.NOOP }) {
+function createListRenderer({ container, getKey, createNode, updateNode = import_sia_reactor.NOOP, destroyNode = import_sia_reactor.NOOP, initNode }) {
   let nodeRegistry = /* @__PURE__ */ new Map();
+  if (initNode) {
+    const children = Array.from(container.children);
+    for (let i = 0, len = children.length; i < len; i++) initNode(children[i], (key) => nodeRegistry.set(key, children[i]));
+  }
   return function syncDOM(array, strict = true) {
     const newRegistry = /* @__PURE__ */ new Map(), seenKeys = /* @__PURE__ */ new Set(), oldPositions = /* @__PURE__ */ new WeakMap(), children = Array.from(container.children);
     for (let i = 0, len = children.length; i < len; i++) oldPositions.set(children[i], i);
@@ -288,12 +292,13 @@ function RAFLoop(key, fn, signal, win) {
 }
 var cancelRAFLoop = (key) => t007._RAFLoopers ? t007._RAFLoopers.delete(key) : false;
 function limited(FN_KEY, fn, opts = {}) {
-  let count = 0, { key, maxTimes: max = 1 } = isStr(opts) ? { key: opts } : opts;
+  let count = 0, { key, maxTimes: max = 1, oncePerSession = true } = isStr(opts) ? { key: opts } : opts;
   const getReg = () => JSON.parse(localStorage.getItem(FN_KEY) || "{}"), setReg = (r) => localStorage.setItem(FN_KEY, JSON.stringify(r));
   const handle = (...args) => {
+    if (oncePerSession && count > 0) return void 0;
     if (!key) return count++ < max ? fn(...args) : void 0;
     const r = getReg(), c = r[key] || 0;
-    return c < max ? (r[key] = c + 1, setReg(r), fn(...args)) : void 0;
+    return c < max ? (count++, r[key] = c + 1, setReg(r), fn(...args)) : void 0;
   };
   handle.left = max - (handle.count = count);
   handle.reset = () => (count = 0, key && ((r) => (delete r[key], setReg(r)))(getReg()));

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { A as ArrowNavigationHandle } from './arrowNavigation-IaWiNTa6.cjs';
-import { S as ScrollAssistHandle } from './scrollAssist-l0V2H-jx.cjs';
+import { A as ArrowNavigationHandle } from './arrowNavigation-zEJbo8Er.cjs';
+import { F as FocusTrapHandle, S as ScrollAssistHandle } from './scrollAssist-BNvPnsJq.cjs';
 export { NIL, NOOP } from 'sia-reactor';
 export { KEYS_BLOCKS, KeyStruct, KeysSettings, assignEl, bindAllMethods, clamp, cleanKeyCombo, createEl, formatKeyForDisplay, formatKeyShortcutsForDisplay, getActiveEl, getTermsForKey, guardAllMethods, guardMethod, isObj, keyEventAllowed, matchKeys, onAllMethods, parseForARIAKS, parseKeyCombo, requestAnimationFrame, setInterval, setTimeout, stringifyKeyEvent } from 'sia-reactor/utils';
 
@@ -11,12 +11,12 @@ declare global {
     _throttlers?: Map<string, number>;
     _debouncers?: Map<string, number>;
     _RAFLoopers?: Map<string, Function>;
-    _ftrappers?: WeakMap<HTMLElement, () => void>;
+    _ftrappers?: WeakMap<HTMLElement, FocusTrapHandle>;
     _outsiders?: WeakMap<HTMLElement, () => void>;
     _arrownavs?: WeakMap<HTMLElement, ArrowNavigationHandle>;
     _scrollers?: WeakMap<HTMLElement, ScrollAssistHandle>;
-    _ftrappers_stacks?: WeakMap<EventTarget, HTMLElement[]>;
-    _outsiders_stacks?: WeakMap<EventTarget, HTMLElement[]>;
+    _ftrappers_stack?: HTMLElement[];
+    _outsiders_stack?: HTMLElement[];
     _scrollers_r_observer?: ResizeObserver;
     _scrollers_m_observer?: MutationObserver;
   }
@@ -180,8 +180,10 @@ declare const cancelRAFLoop: (key: string) => boolean;
 interface LimitedOptions {
     /** Storage key used to persist call counts. */
     key?: string;
-    /** Maximum number of allowed calls. */
+    /** Maximum number of allowed calls. @default 1 */
     maxTimes?: number;
+    /** Only allow calling once per session, regardless of maxTimes. @default true */
+    oncePerSession?: boolean;
 }
 interface LimitedHandle<T extends (...args: any[]) => any> {
     /** Call the wrapped function with the original arguments. */
@@ -268,7 +270,7 @@ declare function loadResource(req: string | symbol, type?: ResourceType, { modul
  */
 declare function getWindow(el?: any): Window & typeof globalThis;
 /** Options for configuring a list renderer */
-type ListRendererOptions<T> = {
+type ListRendererOptions<T, El extends HTMLElement = HTMLElement> = {
     /** The container element to render the list into */
     container: HTMLElement;
     /** Function to extract a unique key from each item.
@@ -280,24 +282,30 @@ type ListRendererOptions<T> = {
      * @param item The item to create a node for
      * @returns An HTMLElement representing the item, or null/undefined to skip rendering
      */
-    createNode: (item: T) => HTMLElement | null | undefined;
+    createNode: (item: T) => El | null | undefined;
     /** Optional function to update an existing node with new item data, called when an item is reused.
      * @param node The existing DOM node for the item
      * @param item The new item data to update the node with
      */
-    updateNode?: (node: HTMLElement, item: T) => void;
+    updateNode?: (node: El, item: T) => void;
     /** Optional function to clean up a DOM node when an item is removed, called before the node is removed from the DOM.
      * @param node The DOM node to be removed
      * @param key The unique key of the item associated with the node
      */
-    destroyNode?: (node: HTMLElement, key: string) => void;
+    destroyNode?: (node: El, key: string) => void;
+    /** Optional function called once during initialization for each existing child node in the container.
+     * Allows seeding the registry with pre-existing markup so nodes are reused instead of destroyed.
+     * @param node The pre-existing DOM node
+     * @param register A callback to register the node with its corresponding item key
+     */
+    initNode?: (node: El, register: (key: string) => void) => void;
 };
 /**
  * Creates a list renderer function for efficiently updating a DOM list based on a new array of items using the L.I.S(Longest Increasing Subsequence) algorithm.
  * @param param0 The options for configuring the list renderer
  * @returns A function that synchronizes the DOM with the new array of items
  */
-declare function createListRenderer<T>({ container, getKey, createNode, updateNode, destroyNode }: ListRendererOptions<T>): (array: T[], strict?: boolean) => void;
+declare function createListRenderer<T, El extends HTMLElement = HTMLElement>({ container, getKey, createNode, updateNode, destroyNode, initNode }: ListRendererOptions<T, El>): (array: T[], strict?: boolean) => void;
 
 /** Format a file size for display.
  * @param size Size in bytes.

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { A as ArrowNavigationHandle } from './arrowNavigation-DF7ul3A3.js';
-import { S as ScrollAssistHandle } from './scrollAssist-l0V2H-jx.js';
+import { A as ArrowNavigationHandle } from './arrowNavigation-B9bEdoqR.js';
+import { F as FocusTrapHandle, S as ScrollAssistHandle } from './scrollAssist-BNvPnsJq.js';
 export { NIL, NOOP } from 'sia-reactor';
 export { KEYS_BLOCKS, KeyStruct, KeysSettings, assignEl, bindAllMethods, clamp, cleanKeyCombo, createEl, formatKeyForDisplay, formatKeyShortcutsForDisplay, getActiveEl, getTermsForKey, guardAllMethods, guardMethod, isObj, keyEventAllowed, matchKeys, onAllMethods, parseForARIAKS, parseKeyCombo, requestAnimationFrame, setInterval, setTimeout, stringifyKeyEvent } from 'sia-reactor/utils';
 
@@ -11,12 +11,12 @@ declare global {
     _throttlers?: Map<string, number>;
     _debouncers?: Map<string, number>;
     _RAFLoopers?: Map<string, Function>;
-    _ftrappers?: WeakMap<HTMLElement, () => void>;
+    _ftrappers?: WeakMap<HTMLElement, FocusTrapHandle>;
     _outsiders?: WeakMap<HTMLElement, () => void>;
     _arrownavs?: WeakMap<HTMLElement, ArrowNavigationHandle>;
     _scrollers?: WeakMap<HTMLElement, ScrollAssistHandle>;
-    _ftrappers_stacks?: WeakMap<EventTarget, HTMLElement[]>;
-    _outsiders_stacks?: WeakMap<EventTarget, HTMLElement[]>;
+    _ftrappers_stack?: HTMLElement[];
+    _outsiders_stack?: HTMLElement[];
     _scrollers_r_observer?: ResizeObserver;
     _scrollers_m_observer?: MutationObserver;
   }
@@ -180,8 +180,10 @@ declare const cancelRAFLoop: (key: string) => boolean;
 interface LimitedOptions {
     /** Storage key used to persist call counts. */
     key?: string;
-    /** Maximum number of allowed calls. */
+    /** Maximum number of allowed calls. @default 1 */
     maxTimes?: number;
+    /** Only allow calling once per session, regardless of maxTimes. @default true */
+    oncePerSession?: boolean;
 }
 interface LimitedHandle<T extends (...args: any[]) => any> {
     /** Call the wrapped function with the original arguments. */
@@ -268,7 +270,7 @@ declare function loadResource(req: string | symbol, type?: ResourceType, { modul
  */
 declare function getWindow(el?: any): Window & typeof globalThis;
 /** Options for configuring a list renderer */
-type ListRendererOptions<T> = {
+type ListRendererOptions<T, El extends HTMLElement = HTMLElement> = {
     /** The container element to render the list into */
     container: HTMLElement;
     /** Function to extract a unique key from each item.
@@ -280,24 +282,30 @@ type ListRendererOptions<T> = {
      * @param item The item to create a node for
      * @returns An HTMLElement representing the item, or null/undefined to skip rendering
      */
-    createNode: (item: T) => HTMLElement | null | undefined;
+    createNode: (item: T) => El | null | undefined;
     /** Optional function to update an existing node with new item data, called when an item is reused.
      * @param node The existing DOM node for the item
      * @param item The new item data to update the node with
      */
-    updateNode?: (node: HTMLElement, item: T) => void;
+    updateNode?: (node: El, item: T) => void;
     /** Optional function to clean up a DOM node when an item is removed, called before the node is removed from the DOM.
      * @param node The DOM node to be removed
      * @param key The unique key of the item associated with the node
      */
-    destroyNode?: (node: HTMLElement, key: string) => void;
+    destroyNode?: (node: El, key: string) => void;
+    /** Optional function called once during initialization for each existing child node in the container.
+     * Allows seeding the registry with pre-existing markup so nodes are reused instead of destroyed.
+     * @param node The pre-existing DOM node
+     * @param register A callback to register the node with its corresponding item key
+     */
+    initNode?: (node: El, register: (key: string) => void) => void;
 };
 /**
  * Creates a list renderer function for efficiently updating a DOM list based on a new array of items using the L.I.S(Longest Increasing Subsequence) algorithm.
  * @param param0 The options for configuring the list renderer
  * @returns A function that synchronizes the DOM with the new array of items
  */
-declare function createListRenderer<T>({ container, getKey, createNode, updateNode, destroyNode }: ListRendererOptions<T>): (array: T[], strict?: boolean) => void;
+declare function createListRenderer<T, El extends HTMLElement = HTMLElement>({ container, getKey, createNode, updateNode, destroyNode, initNode }: ListRendererOptions<T, El>): (array: T[], strict?: boolean) => void;
 
 /** Format a file size for display.
  * @param size Size in bytes.

package/dist/index.js

@@ -60,7 +60,7 @@ import {
   throttle,
   uid,
   uncamelize
-} from "./chunk-HGUYOV3P.js";
+} from "./chunk-ZALPHCSJ.js";
 export {
   INTERACTIVE_SELECTOR,
   KEYS_BLOCKS,

package/dist/{ripple-87VO-U7A.d.cts → ripple-D1kGErTn.d.cts}

@@ -25,25 +25,6 @@ declare function initOutsideClick(el: HTMLElement, { enabled, onOutside, outOnCl
 /** Remove outside-click handling from an element. */
 declare const removeOutsideClick: (el: HTMLElement) => void | undefined;
 
-interface FocusTrapConfig {
-    /** Enables or disables the focus trap. @default  `false`. */
-    enabled?: boolean;
-    /** The preferred initial focus target selector within the element, overrides whatever was focused. Try `autofocus` attribute if working with dialogs before this. @default  `[data-autofocus]`. */
-    initialSelector?: string;
-    /** The class name for the initial focus ring since programmatic focus is not always visible, `autofocus` attribute in dialogs might work fine as an alternative. @default  `"focus-outline"`. */
-    ringClassName?: string;
-    /** Optional root used to scope focus listeners to an element instead of the window. @default  `window`. */
-    root?: HTMLElement | Document | Window;
-    /** Whether the focus trap is scoped to the root provided it is an HTMLElement. @default  `true`. */
-    scoped?: boolean;
-    /** Passed down to all event listeners used. @default  `true`. */
-    capture?: boolean;
-}
-/** Hook to keep focus trapped inside an element until disabled. */
-declare function initFocusTrap(el: HTMLElement, { enabled, initialSelector, ringClassName, root, scoped, capture }?: FocusTrapConfig): (() => void) | void;
-/** Remove the focus trap guard from an element. */
-declare const removeFocusTrap: (el: HTMLElement) => void | undefined;
-
 interface RippleConfig {
     /** Optional explicit ripple host element. @default  event currentTarget. */
     target?: HTMLElement | null;
@@ -71,4 +52,4 @@ interface RippleConfig {
  */
 declare function rippleHandler(e: Pick<PointerEvent, "target" | "currentTarget" | "button" | "clientX" | "clientY" | "stopPropagation">, { target, forceCenter, wrapperClassName, className, holdClassName, fadeClassName, maxDuration }?: RippleConfig): void;
 
-export { type FocusTrapConfig as F, type OutsideClickConfig as O, type RippleConfig as R, initOutsideClick as a, removeOutsideClick as b, rippleHandler as c, initFocusTrap as i, removeFocusTrap as r };
+export { type OutsideClickConfig as O, type RippleConfig as R, rippleHandler as a, initOutsideClick as i, removeOutsideClick as r };

package/dist/{ripple-87VO-U7A.d.ts → ripple-D1kGErTn.d.ts}

@@ -25,25 +25,6 @@ declare function initOutsideClick(el: HTMLElement, { enabled, onOutside, outOnCl
 /** Remove outside-click handling from an element. */
 declare const removeOutsideClick: (el: HTMLElement) => void | undefined;
 
-interface FocusTrapConfig {
-    /** Enables or disables the focus trap. @default  `false`. */
-    enabled?: boolean;
-    /** The preferred initial focus target selector within the element, overrides whatever was focused. Try `autofocus` attribute if working with dialogs before this. @default  `[data-autofocus]`. */
-    initialSelector?: string;
-    /** The class name for the initial focus ring since programmatic focus is not always visible, `autofocus` attribute in dialogs might work fine as an alternative. @default  `"focus-outline"`. */
-    ringClassName?: string;
-    /** Optional root used to scope focus listeners to an element instead of the window. @default  `window`. */
-    root?: HTMLElement | Document | Window;
-    /** Whether the focus trap is scoped to the root provided it is an HTMLElement. @default  `true`. */
-    scoped?: boolean;
-    /** Passed down to all event listeners used. @default  `true`. */
-    capture?: boolean;
-}
-/** Hook to keep focus trapped inside an element until disabled. */
-declare function initFocusTrap(el: HTMLElement, { enabled, initialSelector, ringClassName, root, scoped, capture }?: FocusTrapConfig): (() => void) | void;
-/** Remove the focus trap guard from an element. */
-declare const removeFocusTrap: (el: HTMLElement) => void | undefined;
-
 interface RippleConfig {
     /** Optional explicit ripple host element. @default  event currentTarget. */
     target?: HTMLElement | null;
@@ -71,4 +52,4 @@ interface RippleConfig {
  */
 declare function rippleHandler(e: Pick<PointerEvent, "target" | "currentTarget" | "button" | "clientX" | "clientY" | "stopPropagation">, { target, forceCenter, wrapperClassName, className, holdClassName, fadeClassName, maxDuration }?: RippleConfig): void;
 
-export { type FocusTrapConfig as F, type OutsideClickConfig as O, type RippleConfig as R, initOutsideClick as a, removeOutsideClick as b, rippleHandler as c, initFocusTrap as i, removeFocusTrap as r };
+export { type OutsideClickConfig as O, type RippleConfig as R, rippleHandler as a, initOutsideClick as i, removeOutsideClick as r };

package/dist/{scrollAssist-l0V2H-jx.d.cts → scrollAssist-BNvPnsJq.d.cts}

@@ -38,6 +38,31 @@ type Config = {
     onFocusOut?: (e: FocusEvent) => void;
 };
 
+interface FocusTrapConfig {
+    /** Enables or disables the focus trap. @default  `false`. */
+    enabled?: boolean;
+    /** The preferred initial focus target selector within the element, overrides whatever was focused. Try `autofocus` attribute if working with dialogs before this. @default  `[data-autofocus]`. */
+    initialSelector?: string;
+    /** The class name for the initial focus ring since programmatic focus is not always visible, `autofocus` attribute in dialogs might work fine as an alternative. @default  `"focus-outline"`. */
+    ringClassName?: string;
+    /** Optional root used to scope focus listeners to an element instead of the window. @default  `window`. */
+    root?: HTMLElement | Document | Window;
+    /** Whether the focus trap is scoped to the root provided it is an HTMLElement. @default  `true`. */
+    scoped?: boolean;
+    /** Passed down to all event listeners used. @default  `true`. */
+    capture?: boolean;
+}
+interface FocusTrapHandle {
+    destroy: () => void;
+    sync: () => void;
+}
+/** Hook to keep focus trapped inside an element until disabled. */
+declare function initFocusTrap(el: HTMLElement, { enabled, initialSelector, ringClassName, root, scoped, capture }?: FocusTrapConfig): FocusTrapHandle | void;
+/** Remove the focus trap guard from an element. */
+declare const removeFocusTrap: (el: HTMLElement) => void | undefined;
+/** Synchronize the focus trap guards. */
+declare const syncFocusTrap: (el: HTMLElement) => void | undefined;
+
 type ScrollDir = "left" | "right" | "up" | "down";
 /** Scroll assist control object returned by initScrollAssist. */
 interface ScrollAssistHandle {
@@ -69,4 +94,4 @@ declare function initScrollAssist(el: HTMLElement, { pxPerSecond, assistClassNam
  */
 declare const removeScrollAssist: (el: HTMLElement) => void | undefined;
 
-export { type Config as C, type KeyEvent as K, type ScrollAssistHandle as S, type ScrollAssistConfig as a, type ScrollDir as b, initScrollAssist as i, removeScrollAssist as r };
+export { type Config as C, type FocusTrapHandle as F, type KeyEvent as K, type ScrollAssistHandle as S, type ScrollAssistConfig as a, type FocusTrapConfig as b, type ScrollDir as c, initScrollAssist as d, removeScrollAssist as e, initFocusTrap as i, removeFocusTrap as r, syncFocusTrap as s };

package/dist/{scrollAssist-l0V2H-jx.d.ts → scrollAssist-BNvPnsJq.d.ts}

@@ -38,6 +38,31 @@ type Config = {
     onFocusOut?: (e: FocusEvent) => void;
 };
 
+interface FocusTrapConfig {
+    /** Enables or disables the focus trap. @default  `false`. */
+    enabled?: boolean;
+    /** The preferred initial focus target selector within the element, overrides whatever was focused. Try `autofocus` attribute if working with dialogs before this. @default  `[data-autofocus]`. */
+    initialSelector?: string;
+    /** The class name for the initial focus ring since programmatic focus is not always visible, `autofocus` attribute in dialogs might work fine as an alternative. @default  `"focus-outline"`. */
+    ringClassName?: string;
+    /** Optional root used to scope focus listeners to an element instead of the window. @default  `window`. */
+    root?: HTMLElement | Document | Window;
+    /** Whether the focus trap is scoped to the root provided it is an HTMLElement. @default  `true`. */
+    scoped?: boolean;
+    /** Passed down to all event listeners used. @default  `true`. */
+    capture?: boolean;
+}
+interface FocusTrapHandle {
+    destroy: () => void;
+    sync: () => void;
+}
+/** Hook to keep focus trapped inside an element until disabled. */
+declare function initFocusTrap(el: HTMLElement, { enabled, initialSelector, ringClassName, root, scoped, capture }?: FocusTrapConfig): FocusTrapHandle | void;
+/** Remove the focus trap guard from an element. */
+declare const removeFocusTrap: (el: HTMLElement) => void | undefined;
+/** Synchronize the focus trap guards. */
+declare const syncFocusTrap: (el: HTMLElement) => void | undefined;
+
 type ScrollDir = "left" | "right" | "up" | "down";
 /** Scroll assist control object returned by initScrollAssist. */
 interface ScrollAssistHandle {
@@ -69,4 +94,4 @@ declare function initScrollAssist(el: HTMLElement, { pxPerSecond, assistClassNam
  */
 declare const removeScrollAssist: (el: HTMLElement) => void | undefined;
 
-export { type Config as C, type KeyEvent as K, type ScrollAssistHandle as S, type ScrollAssistConfig as a, type ScrollDir as b, initScrollAssist as i, removeScrollAssist as r };
+export { type Config as C, type FocusTrapHandle as F, type KeyEvent as K, type ScrollAssistHandle as S, type ScrollAssistConfig as a, type FocusTrapConfig as b, type ScrollDir as c, initScrollAssist as d, removeScrollAssist as e, initFocusTrap as i, removeFocusTrap as r, syncFocusTrap as s };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t007/utils",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "description": "High-performance utilities for the t007 ecosystem.",
   "author": "Oketade Oluwatobiloba <tobioketade007@gmail.com>",
   "license": "MIT",
@@ -76,7 +76,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "sia-reactor": "^0.0.35"
+    "sia-reactor": "^0.0.36"
   },
   "peerDependencies": {
     "react": "^18.0.0"