@takazudo/zudo-doc 5.28.2 → 6.0.1

package/dist/transitions/nested-island-props-refresh.js

@@ -1,183 +1,165 @@
 import { BEFORE_SWAP_EVENT } from "./page-events.js";
-const PERSIST_ATTR = "data-zfb-transition-persist";
-const ISLAND_ATTR = "data-zfb-island";
-const PROPS_ATTR = "data-props";
-const PROPS_PRESERVE_ATTR = "data-zd-props-preserve";
-const ISLAND_REMOUNT_ATTR = "data-zfb-island-remount";
-const DOCUMENT_NODE = 9;
-const installedControllers = /* @__PURE__ */ new WeakMap();
-function installNestedIslandPropsRefresh({
-  document: document2,
-  reportError
-}) {
-  const onBeforeSwap = (event) => {
-    const swapEvent = event;
-    const incoming = swapEvent.newDocument;
-    if (!isDocument(incoming) || incoming === document2 || typeof swapEvent.swap !== "function") {
-      return;
+const PERSIST = "data-zfb-transition-persist";
+const PRESERVE = "data-zd-props-preserve";
+const PROPS = "data-props";
+const MARKERS = ["data-zfb-island", "data-zfb-island-skip-ssr"];
+const IDENTITY = [
+  ...MARKERS,
+  "data-zfb-transport",
+  "data-zfb-protocol",
+  "data-zfb-build"
+];
+const SCHEDULE = ["data-when", "data-media"];
+const ISLAND_SELECTOR = MARKERS.map((attr) => `[${attr}]`).join(",");
+const installed = /* @__PURE__ */ new WeakMap();
+function installNestedIslandPropsRefresh({ document: document2, reportError }) {
+  const listener = (event) => {
+    const navigation = event;
+    const incoming = navigation.newDocument;
+    if (!isDocument(incoming) || incoming === document2 || typeof navigation.swap !== "function") return;
+    try {
+      prepareIncoming(document2, incoming);
+    } catch (error) {
+      for (const root of incoming.querySelectorAll(`[${PERSIST}]`)) root.removeAttribute(PERSIST);
+      try {
+        if (reportError) reportError(error);
+        else queueMicrotask(() => {
+          throw error;
+        });
+      } catch (reporterError) {
+        queueMicrotask(() => {
+          throw reporterError;
+        });
+      }
     }
-    const capturedSwap = swapEvent.swap;
-    const plan = buildNestedIslandPropsMutationPlan(document2, incoming);
-    let commitStarted = false;
-    let commitOutcome;
-    const composedSwap = function(...args) {
-      if (commitStarted) {
-        if (!commitOutcome) return void 0;
-        if (!commitOutcome.ok) throw commitOutcome.error;
-        return commitOutcome.value;
+    const delegate = navigation.swap;
+    let started = false;
+    let outcome;
+    const composed = function(...args) {
+      if (started) {
+        if (!outcome) return void 0;
+        if (!outcome.ok) throw outcome.error;
+        return outcome.value;
       }
-      commitStarted = true;
+      started = true;
       try {
-        const value = commitMutationPlanAndDelegate(
-          plan,
-          capturedSwap,
-          this,
-          args,
-          reportError
-        );
-        commitOutcome = { ok: true, value };
+        const value = delegate.apply(this, args);
+        outcome = { ok: true, value };
         return value;
       } catch (error) {
-        commitOutcome = { ok: false, error };
+        outcome = { ok: false, error };
         throw error;
       }
     };
     try {
-      swapEvent.swap = composedSwap;
+      navigation.swap = composed;
     } catch {
-      return;
     }
-    if (swapEvent.swap !== composedSwap) return;
   };
-  document2.addEventListener(BEFORE_SWAP_EVENT, onBeforeSwap);
-  return () => document2.removeEventListener(BEFORE_SWAP_EVENT, onBeforeSwap);
+  document2.addEventListener(BEFORE_SWAP_EVENT, listener);
+  return () => document2.removeEventListener(BEFORE_SWAP_EVENT, listener);
 }
 function ensureNestedIslandPropsRefresh(options) {
-  const resolved = options ?? resolveBrowserOptions();
-  if (!resolved || installedControllers.has(resolved.document)) return;
-  installedControllers.set(
-    resolved.document,
-    installNestedIslandPropsRefresh(resolved)
-  );
+  const resolved = options ?? (typeof document === "undefined" ? void 0 : { document });
+  if (!resolved || installed.has(resolved.document)) return;
+  installed.set(resolved.document, installNestedIslandPropsRefresh(resolved));
 }
 function disposeNestedIslandPropsRefresh(document2) {
-  installedControllers.get(document2)?.();
-  installedControllers.delete(document2);
+  installed.get(document2)?.();
+  installed.delete(document2);
 }
-function buildNestedIslandPropsMutationPlan(liveDocument, incomingDocument) {
-  const plan = [];
-  const liveRoots = collectRefreshableRoots(liveDocument);
-  if (liveRoots.size === 0) return Object.freeze(plan);
-  const incomingRoots = collectRefreshableRoots(incomingDocument);
-  for (const [persistKey, liveRoot] of liveRoots) {
-    const incomingRoot = incomingRoots.get(persistKey);
-    if (!incomingRoot) continue;
-    const incomingIslands = collectUniqueOwnedIslands(incomingRoot);
-    if (incomingIslands.size === 0) continue;
-    for (const [name, liveIsland] of collectUniqueOwnedIslands(liveRoot, true)) {
-      const incomingIsland = incomingIslands.get(name);
-      if (!incomingIsland) continue;
-      const incomingProps = incomingIsland.getAttribute(PROPS_ATTR);
-      if (incomingProps === liveIsland.getAttribute(PROPS_ATTR)) continue;
-      plan.push(Object.freeze({ liveIsland, incomingProps }));
-    }
-  }
-  return Object.freeze(plan);
+function isDocument(value) {
+  return typeof value === "object" && value !== null && value.nodeType === 9 && typeof value.querySelectorAll === "function";
 }
-function commitMutationPlanAndDelegate(plan, delegate, receiver, args, reportError) {
-  const helperErrors = [];
-  for (const mutation of plan) {
-    try {
-      applyPropsMutation(mutation);
-    } catch (error) {
-      helperErrors.push(error);
-    }
-  }
-  let delegateResult;
-  try {
-    delegateResult = delegate.apply(receiver, args);
-  } catch (delegateError) {
-    reportRefreshErrors(helperErrors, reportError);
-    throw delegateError;
+function uniqueRoots(doc) {
+  const roots = /* @__PURE__ */ new Map();
+  const duplicates = /* @__PURE__ */ new Set();
+  for (const root of doc.querySelectorAll(`[${PERSIST}]`)) {
+    if (root.parentElement?.closest(`[${PERSIST}]`)) continue;
+    const key = root.getAttribute(PERSIST);
+    if (!key) continue;
+    if (roots.has(key)) duplicates.add(key);
+    else roots.set(key, root);
   }
-  reportRefreshErrors(helperErrors, reportError);
-  return delegateResult;
+  for (const key of duplicates) roots.delete(key);
+  return roots;
 }
-function collectRefreshableRoots(doc) {
-  const roots = indexUniquely(
-    doc.querySelectorAll(`[${PERSIST_ATTR}]`),
-    PERSIST_ATTR
-  );
-  for (const [persistKey, element] of roots) {
-    if (element.parentElement?.closest(`[${PERSIST_ATTR}]`)) {
-      roots.delete(persistKey);
-    }
+function ownedIslands(root) {
+  const islands = /* @__PURE__ */ new Map();
+  for (const element of root.querySelectorAll(ISLAND_SELECTOR)) {
+    if (element.closest(`[${PERSIST}]`) !== root) continue;
+    const name = element.getAttribute(MARKERS[0]) ?? element.getAttribute(MARKERS[1]);
+    if (!name || islands.has(name)) return void 0;
+    islands.set(name, element);
   }
-  return roots;
+  return islands;
 }
-function collectUniqueOwnedIslands(root, excludePreserved = false) {
-  const owned = Array.from(root.querySelectorAll(`[${ISLAND_ATTR}]`)).filter(
-    (island) => {
-      if (island.closest(`[${PERSIST_ATTR}]`) !== root) return false;
-      if (!excludePreserved) return true;
-      const preserveBoundary = island.closest(`[${PROPS_PRESERVE_ATTR}]`);
-      return preserveBoundary === null || !root.contains(preserveBoundary);
-    }
-  );
-  return indexUniquely(owned, ISLAND_ATTR);
+function sameAttributes(a, b, names) {
+  return names.every((name) => a.getAttribute(name) === b.getAttribute(name));
 }
-function indexUniquely(elements, attribute) {
-  const byValue = /* @__PURE__ */ new Map();
-  const duplicated = /* @__PURE__ */ new Set();
-  for (const element of elements) {
-    const value = element.getAttribute(attribute);
-    if (!value) continue;
-    if (byValue.has(value)) {
-      duplicated.add(value);
-      continue;
-    }
-    byValue.set(value, element);
-  }
-  for (const value of duplicated) byValue.delete(value);
-  return byValue;
+function sameStructure(a, b) {
+  if (a.tagName !== b.tagName || a.getAttribute(PERSIST) !== b.getAttribute(PERSIST) || a.id !== b.id) return false;
+  if (a !== b && (MARKERS.some((attr) => a.hasAttribute(attr)) || MARKERS.some((attr) => b.hasAttribute(attr)))) return true;
+  const left = Array.from(a.children);
+  const right = Array.from(b.children);
+  return left.length === right.length && left.every((child, index) => right[index] !== void 0 && sameStructure(child, right[index]));
 }
-function applyPropsMutation({
-  liveIsland,
-  incomingProps
-}) {
-  if (incomingProps === null) {
-    liveIsland.removeAttribute(PROPS_ATTR);
-  } else {
-    liveIsland.setAttribute(PROPS_ATTR, incomingProps);
-  }
-  liveIsland.setAttribute(ISLAND_REMOUNT_ATTR, "");
+function preserved(island, root) {
+  const boundary = island.closest(`[${PRESERVE}]`);
+  return boundary !== null && (boundary === root || root.contains(boundary));
 }
-function reportRefreshErrors(errors, reportError) {
-  if (errors.length === 0) return;
-  const error = errors.length === 1 ? errors[0] : new AggregateError(errors, "Nested-island props refresh failed");
-  if (reportError) {
-    try {
-      reportError(error);
-    } catch (reporterError) {
-      surfaceAsynchronously(reporterError);
+function prepareIncoming(live, incoming) {
+  const liveRoots = uniqueRoots(live);
+  const incomingRoots = uniqueRoots(incoming);
+  const liveCounts = countKeys(live);
+  const incomingCounts = countKeys(incoming);
+  for (const root of incoming.querySelectorAll(`[${PERSIST}]`)) {
+    if (root.parentElement?.closest(`[${PERSIST}]`)) continue;
+    const key = root.getAttribute(PERSIST);
+    if (!key || incomingCounts.get(key) !== 1) {
+      root.removeAttribute(PERSIST);
+      continue;
+    }
+    const liveCount = liveCounts.get(key) ?? 0;
+    if (liveCount === 0) {
+      continue;
+    }
+    if (liveCount !== 1) {
+      root.removeAttribute(PERSIST);
+      continue;
+    }
+    const oldRoot = liveRoots.get(key);
+    const newRoot = incomingRoots.get(key);
+    if (!oldRoot || newRoot !== root || !sameStructure(oldRoot, root)) {
+      root.removeAttribute(PERSIST);
+      continue;
+    }
+    const oldIslands = ownedIslands(oldRoot);
+    const newIslands = ownedIslands(root);
+    if (!oldIslands || !newIslands || oldIslands.size !== newIslands.size || [...oldIslands.keys()].some((name) => !newIslands.has(name))) {
+      root.removeAttribute(PERSIST);
+      continue;
+    }
+    if ([...oldIslands].some(([name, oldIsland]) => !sameAttributes(oldIsland, newIslands.get(name), SCHEDULE))) {
+      root.removeAttribute(PERSIST);
+      continue;
+    }
+    for (const [name, oldIsland] of oldIslands) {
+      const newIsland = newIslands.get(name);
+      if (!preserved(oldIsland, oldRoot) || !sameAttributes(oldIsland, newIsland, IDENTITY)) continue;
+      const value = oldIsland.getAttribute(PROPS);
+      if (value === null) newIsland.removeAttribute(PROPS);
+      else newIsland.setAttribute(PROPS, value);
     }
-    return;
   }
-  surfaceAsynchronously(error);
 }
-function surfaceAsynchronously(error) {
-  queueMicrotask(() => {
-    throw error;
-  });
-}
-function isDocument(value) {
-  if (typeof value !== "object" || value === null) return false;
-  const candidate = value;
-  return candidate.nodeType === DOCUMENT_NODE && typeof candidate.querySelectorAll === "function";
-}
-function resolveBrowserOptions() {
-  if (typeof document === "undefined") return void 0;
-  return { document };
+function countKeys(doc) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const root of doc.querySelectorAll(`[${PERSIST}]`)) {
+    const key = root.getAttribute(PERSIST);
+    if (key) counts.set(key, (counts.get(key) ?? 0) + 1);
+  }
+  return counts;
 }
 export {
   disposeNestedIslandPropsRefresh,

package/dist/transitions/page-events.d.ts

@@ -8,12 +8,9 @@
  */
 export declare const BEFORE_NAVIGATE_EVENT = "zfb:before-preparation";
 /**
- * Event name fired once the new page's `<body>` has been swapped in.
- * Today resolves to `"zfb:after-swap"` — dispatched by zfb's
- * client-router after a Strategy B SPA navigation completes (and on
- * the initial page load, so consumers register one listener and get
- * both first-paint and post-swap behavior). Direct successor to
- * Astro's `astro:page-load`.
+ * Event name fired after a SPA body swap. Today resolves to
+ * `"zfb:after-swap"`. The initial page load uses `zfb:page-load` instead;
+ * callers needing both paths initialize on first paint as well.
  */
 export declare const AFTER_NAVIGATE_EVENT = "zfb:after-swap";
 /**
@@ -22,15 +19,14 @@ export declare const AFTER_NAVIGATE_EVENT = "zfb:after-swap";
  * dispatched by zfb's client-router with a mutable `event.newDocument`
  * carrying the incoming document that is about to replace the live one
  * (zudolab/zudo-doc#3136 / #3137). Consumers that need to influence the
- * incoming document BEFORE zfb's head-swap persistence logic runs (e.g.
+ * incoming document BEFORE zfb's island teardown and head/body swap run (e.g.
  * injecting a `<link>` so an href-matching stylesheet survives the swap
  * instead of being removed and re-fetched) must mutate `event.newDocument`
  * synchronously from a handler registered on this event — by the time
  * `AFTER_NAVIGATE_EVENT` fires the swap has already completed. This module
  * does not export a subscribe helper for it (unlike `onBeforeNavigate` /
- * `onAfterNavigate`) because the one current consumer
- * (`theme-pack-provider.tsx`) needs the raw event object's `newDocument`,
- * not just a bare notification.
+ * `onAfterNavigate`) because its consumers need the raw event object's
+ * `newDocument`, not just a bare notification.
  */
 export declare const BEFORE_SWAP_EVENT = "zfb:before-swap";
 /**
@@ -46,9 +42,8 @@ export declare const BEFORE_SWAP_EVENT = "zfb:before-swap";
 export declare function onBeforeNavigate(handler: () => void): () => void;
 /**
  * Subscribe to "navigation end" — runs `handler` after each page-body
- * swap. Mirrors Astro's `astro:page-load`: fires once on first load,
- * and again on every SPA navigation (zfb's Strategy B client-router
- * dispatches `zfb:after-swap` on the document for both cases).
+ * swap. The first page load is signaled separately by `zfb:page-load`;
+ * callers that need initial setup must also initialize on first paint.
  *
  * Returns an unsubscribe function. SSR-safe: returns a no-op when
  * called outside a browser.

package/dist/tree-nav-shared/index.d.ts

@@ -1,13 +1,12 @@
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
 export declare const INDENT = "clamp(0.8rem, 1.2vw, 1.625rem)";
 export declare const CONNECTOR_OFFSET = "clamp(0.2rem, 0.3vw, 0.5rem)";
 export declare const CONNECTOR_WIDTH = "clamp(0.4rem, 0.6vw, 1rem)";
 export declare const BASE_PAD = "clamp(0.4rem, 0.8vw, 1.3rem)";
 export declare function connectorLeft(depth: number): string;
-export declare function CategoryLinkIcon({ className }: {
-    className?: string;
-}): import("preact").JSX.Element;
+export declare function CategoryLinkIcon({ class: className }: {
+    class?: string;
+}): import("@takazudo/zfb").Description;
 export declare function ConnectorLines({ depth, isLast, widthScale, topPad, }: {
     depth: number;
     isLast: boolean;
@@ -19,4 +18,4 @@ export declare function ConnectorLines({ depth, isLast, widthScale, topPad, }: {
      * aligned with the first line instead of the row's vertical center.
      */
     topPad?: string;
-}): import("preact").JSX.Element | null;
+}): import("@takazudo/zfb").Description | null;

package/dist/tree-nav-shared/index.js

@@ -1,4 +1,4 @@
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+import { Fragment, jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
 const INDENT = "clamp(0.8rem, 1.2vw, 1.625rem)";
 const CONNECTOR_OFFSET = "clamp(0.2rem, 0.3vw, 0.5rem)";
 const CONNECTOR_WIDTH = "clamp(0.4rem, 0.6vw, 1rem)";
@@ -7,15 +7,14 @@ function connectorLeft(depth) {
   return `calc(${depth} * ${INDENT} + ${CONNECTOR_OFFSET})`;
 }
 const CATEGORY_LINK_PATH = "M5.746 5.74 0 11.49l20.987 20.96C34.126 45.572 41.963 53.45 41.948 53.523c-.012.062-9.456 9.544-20.986 21.07L0 95.55l5.714 5.715c3.142 3.143 5.748 5.715 5.79 5.715s2.63-2.563 5.75-5.696l17.939-18.001c21.867-21.94 29.443-29.599 29.443-29.768 0-.114-.665-.804-5.084-5.275C51.872 40.47 11.71.125 11.565.036 11.525.01 8.906 2.578 5.746 5.74m38.345-.066c-3.132 3.13-5.696 5.71-5.696 5.732-.001.022 2.16 2.185 4.8 4.807 2.641 2.623 8.382 8.338 12.758 12.702 15.38 15.337 23.763 23.641 24.314 24.086.19.153.346.336.346.405 0 .07-1.738 1.847-3.887 3.976a17515 17515 0 0 0-20.35 20.264 19555 19555 0 0 1-17.223 17.158c-.416.409-.757.77-.757.8 0 .083 11.415 11.485 11.457 11.445.235-.22 53.542-53.528 53.542-53.543C103.395 53.472 49.891.02 49.837 0c-.028-.01-2.613 2.543-5.746 5.674";
-function CategoryLinkIcon({ className }) {
+function CategoryLinkIcon({ class: className }) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
-      xmlns: "http://www.w3.org/2000/svg",
       fill: "currentColor",
       viewBox: "0 0 103.395 107.049",
       "aria-hidden": "true",
-      className: `shrink-0 ${className ?? ""}`,
+      class: `shrink-0 ${className ?? ""}`,
       children: /* @__PURE__ */ jsx("path", { d: CATEGORY_LINK_PATH })
     }
   );
@@ -34,10 +33,10 @@ function ConnectorLines({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: "absolute border-l border-dashed border-muted",
+        class: "absolute border-l border-dashed border-muted",
         style: {
           left,
-          top: 0,
+          top: "0px",
           bottom: isLast ? `calc(100% - ${firstLineMid})` : 0
         }
       }
@@ -45,7 +44,7 @@ function ConnectorLines({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: "absolute border-t border-dashed border-muted",
+        class: "absolute border-t border-dashed border-muted",
         style: {
           left,
           width,

package/dist/use-modal-dialog/index.d.ts

@@ -1,70 +1,16 @@
-interface UseModalDialogOptions {
-    /** True when the dialog should be open. */
-    isOpen: boolean;
-    /** Called when the dialog is closed for any reason (Escape, backdrop, navigation). */
+import type { Listener, ReadonlySignal, Ref, Scope } from "@takazudo/zfb/zudo-react";
+export interface ModalDialogOptions {
+    isOpen: ReadonlySignal<boolean>;
     onClose: () => void;
-    /**
-     * DOM event name that triggers a close-and-reset. Pass the host's SPA
-     * after-navigate event name (e.g. `AFTER_NAVIGATE_EVENT`); pass `undefined`
-     * to skip navigation-close wiring entirely.
-     */
     navigateEvent?: string;
-    /**
-     * When `true`, enable backdrop-click-to-close. The caller must forward the
-     * click handler returned by this hook to the `<dialog>` element's `onClick`.
-     * Defaults to `false` so opt-in only.
-     */
     backdropClickClose?: boolean;
-    /**
-     * When `true`, enable focus management:
-     *  - On open: capture `document.activeElement` as the return target (unless
-     *    `returnFocusRef` is provided), then move focus to the first focusable
-     *    element inside the dialog (or the dialog itself as a fallback).
-     *  - On close: restore focus to the captured element.
-     *
-     * When a caller already manages focus internally (e.g. ai-chat-modal focuses
-     * its input in its own effect), pass `restoreFocusOnly: true` instead to get
-     * trigger-capture + restore without the "move into dialog" step.
-     */
     manageFocus?: boolean;
-    /**
-     * Like `manageFocus` but skips the "focus first element in dialog" step —
-     * use when the caller has its own focus-on-open logic and only needs
-     * trigger-capture + focus restore on close.
-     */
     restoreFocusOnly?: boolean;
-    /**
-     * Optional ref holding the element to return focus to on close. When
-     * provided and non-null, this takes precedence over the internally captured
-     * `document.activeElement`. Useful when the trigger element is conditionally
-     * rendered and therefore removed from the DOM before the open effect fires
-     * (e.g. the doc-history trigger button, which is unmounted when `isOpen`
-     * is true). The caller should set `returnFocusRef.current` to the trigger
-     * element in its click handler, before calling `setState`.
-     */
-    returnFocusRef?: React.RefObject<HTMLElement | null>;
+    returnFocusRef?: Ref<HTMLElement>;
 }
-interface UseModalDialogResult {
-    dialogRef: React.RefObject<HTMLDialogElement>;
-    /**
-     * Pass this to `<dialog onClick={handleBackdropClick}>`.
-     * Only wired when `backdropClickClose` is true; otherwise a no-op.
-     */
-    handleBackdropClick: (e: React.MouseEvent<HTMLDialogElement>) => void;
+export interface ModalDialogResult {
+    dialogRef: Ref<HTMLDialogElement>;
+    handleBackdropClick: Listener<Event>;
 }
-/**
- * Shared hook for `<dialog>`-based modal components.
- *
- * Usage:
- * ```tsx
- * const { dialogRef, handleBackdropClick } = useModalDialog({
- *   isOpen,
- *   onClose: handleClose,
- *   navigateEvent: AFTER_NAVIGATE_EVENT,
- *   backdropClickClose: true,
- * });
- * return <dialog ref={dialogRef} onClick={handleBackdropClick} ... />;
- * ```
- */
-export declare function useModalDialog({ isOpen, onClose, navigateEvent, backdropClickClose, manageFocus, restoreFocusOnly, returnFocusRef, }: UseModalDialogOptions): UseModalDialogResult;
-export {};
+/** Call during setup in the scope that owns the dialog element. */
+export declare function modalDialog(scope: Scope, options: ModalDialogOptions): ModalDialogResult;

package/dist/use-modal-dialog/index.js

@@ -1,73 +1,55 @@
-"use client";
-import { useEffect, useRef } from "preact/compat";
-function useModalDialog({
-  isOpen,
-  onClose,
-  navigateEvent,
-  backdropClickClose = false,
-  manageFocus = false,
-  restoreFocusOnly = false,
-  returnFocusRef
-}) {
-  const dialogRef = useRef(null);
-  const internalTriggerRef = useRef(null);
-  useEffect(() => {
+function modalDialog(scope, options) {
+  const dialogRef = { current: null };
+  let capturedTrigger = null;
+  let closingFromNavigation = false;
+  const ownsFocus = options.manageFocus || options.restoreFocusOnly;
+  scope.effect(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
-    if (isOpen && !dialog.open) {
-      if ((manageFocus || restoreFocusOnly) && !returnFocusRef) {
-        internalTriggerRef.current = document.activeElement;
-      }
+    if (options.isOpen.value && !dialog.open) {
+      closingFromNavigation = false;
+      if (ownsFocus && !options.returnFocusRef) capturedTrigger = document.activeElement;
       dialog.showModal();
-      if (manageFocus && !restoreFocusOnly) {
-        const FOCUSABLE = 'button:not([disabled]),a[href],[tabindex]:not([tabindex="-1"]),input:not([disabled]),select:not([disabled]),textarea:not([disabled])';
-        const first = dialog.querySelector(FOCUSABLE);
-        if (first) {
-          first.focus();
-        } else {
-          dialog.focus();
-        }
+      if (options.manageFocus && !options.restoreFocusOnly) {
+        const focusable = dialog.querySelector(
+          'button:not([disabled]),a[href],[tabindex]:not([tabindex="-1"]),input:not([disabled]),select:not([disabled]),textarea:not([disabled])'
+        );
+        (focusable ?? dialog).focus();
       }
-    } else if (!isOpen && dialog.open) {
+    } else if (!options.isOpen.value && dialog.open) {
       dialog.close();
     }
-  }, [isOpen, manageFocus, restoreFocusOnly, returnFocusRef]);
-  useEffect(() => {
+  });
+  scope.onActivate(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
-    function onDialogClose() {
-      if (manageFocus || restoreFocusOnly) {
-        const trigger = returnFocusRef ? returnFocusRef.current : internalTriggerRef.current;
-        if (trigger instanceof HTMLElement) {
-          trigger.focus();
-        }
-        internalTriggerRef.current = null;
+    const onDialogClose = () => {
+      if (ownsFocus) {
+        const trigger = options.returnFocusRef?.current ?? capturedTrigger;
+        if (trigger instanceof HTMLElement) trigger.focus();
+        capturedTrigger = null;
       }
-      if (isOpen) onClose();
-    }
+      if (options.isOpen.value && !closingFromNavigation) options.onClose();
+      closingFromNavigation = false;
+    };
+    const onNavigation = () => {
+      if (!dialog.open) return;
+      closingFromNavigation = true;
+      dialog.close();
+      options.onClose();
+    };
     dialog.addEventListener("close", onDialogClose);
-    return () => dialog.removeEventListener("close", onDialogClose);
-  }, [isOpen, onClose, manageFocus, restoreFocusOnly, returnFocusRef]);
-  useEffect(() => {
-    if (!navigateEvent) return;
-    function handleNavigation() {
-      const dialog = dialogRef.current;
-      if (dialog?.open) {
-        dialog.close();
-        onClose();
-      }
-    }
-    document.addEventListener(navigateEvent, handleNavigation);
-    return () => document.removeEventListener(navigateEvent, handleNavigation);
-  }, [navigateEvent, onClose]);
-  function handleBackdropClick(e) {
-    if (!backdropClickClose) return;
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (e.target === dialog) dialog.close();
-  }
+    if (options.navigateEvent) document.addEventListener(options.navigateEvent, onNavigation);
+    return () => {
+      dialog.removeEventListener("close", onDialogClose);
+      if (options.navigateEvent) document.removeEventListener(options.navigateEvent, onNavigation);
+    };
+  });
+  const handleBackdropClick = (event) => {
+    if (options.backdropClickClose && event.target === dialogRef.current) dialogRef.current?.close();
+  };
   return { dialogRef, handleBackdropClick };
 }
 export {
-  useModalDialog
+  modalDialog
 };

package/dist/versions-page/index.d.ts

@@ -1,6 +1,6 @@
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import type { ComponentChildren, JSX } from "preact";
+import type { Child } from "@takazudo/zfb/zudo-react";
+import type { JSX } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import type { ChromeContext } from "../factory-context/index.js";
 import type { Settings } from "../settings.js";
 /** Minimal version config entry needed by the versions page. */
@@ -56,7 +56,7 @@ export interface VersionsPageDeps {
 /** Props for the VersionsPageView component. */
 export interface VersionsPageViewProps {
     locale: string;
-    children?: ComponentChildren;
+    children?: Child;
 }
 /**
  * Create a `VersionsPageView` component from the unified {@link ChromeContext}