@takazudo/zudo-doc 5.28.2 → 6.0.1

package/dist/doc-history/index.js

@@ -1,21 +1,21 @@
 "use client";
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
-import { useState, useEffect, useCallback, useMemo, useRef } from "preact/compat";
+import { Fragment, jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
+import { computed, For, getScope, Show, signal } from "@takazudo/zfb/zudo-react";
 import { SmartBreak } from "../smart-break/index.js";
 import { History, Close, ArrowLeft } from "../icons/index.js";
 import { AFTER_NAVIGATE_EVENT } from "../transitions/index.js";
-import { useModalDialog } from "../use-modal-dialog/index.js";
+import { modalDialog } from "../use-modal-dialog/index.js";
 import { formatDate } from "../format-date/index.js";
 function Spinner() {
-  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-vsp-xl", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { class: "flex items-center justify-center py-vsp-xl", children: /* @__PURE__ */ jsx(
     "span",
     {
-      className: "inline-block box-border rounded-full animate-spin",
+      class: "inline-block box-border rounded-full page-loading-spinner",
       style: {
-        width: 48,
-        height: 48,
+        width: "48px",
+        height: "48px",
         border: "5px solid var(--color-fg, #fff)",
-        borderBottomColor: "transparent"
+        "border-bottom-color": "transparent"
       }
     }
   ) });
@@ -87,7 +87,7 @@ function buildSideBySideRows(changes) {
 }
 const DIFF_CACHE_LIMIT = 32;
 const diffCache = /* @__PURE__ */ new Map();
-async function getCachedDiff(olderHash, newerHash, olderContent, newerContent) {
+async function getCachedDiff(olderHash, newerHash, olderContent, newerContent, isCurrent) {
   const key = `${olderHash}::${newerHash}`;
   const hit = diffCache.get(key);
   if (hit) {
@@ -101,6 +101,7 @@ async function getCachedDiff(olderHash, newerHash, olderContent, newerContent) {
       throw new Error('Compare requires the optional peer "diff": install it to use docHistory');
     }
   );
+  if (!isCurrent()) throw new Error("Comparison cancelled");
   const changes = diffLines(olderContent, newerContent);
   diffCache.set(key, changes);
   if (diffCache.size > DIFF_CACHE_LIMIT) {
@@ -114,70 +115,72 @@ function DiffViewer({
   onBack,
   showBackButton
 }) {
-  const [changes, setChanges] = useState(null);
-  const [diffError, setDiffError] = useState(null);
-  useEffect(() => {
+  const scope = getScope();
+  const changes = signal(null);
+  const diffError = signal(null);
+  const tableRevision = signal(0);
+  scope.onActivate(() => {
     let cancelled = false;
-    setDiffError(null);
     getCachedDiff(
       selection.older.hash,
       selection.newer.hash,
       selection.older.content,
-      selection.newer.content
+      selection.newer.content,
+      () => !cancelled && !scope.abortSignal.aborted
     ).then((result) => {
-      if (!cancelled) setChanges(result);
+      if (!cancelled && !scope.abortSignal.aborted) {
+        changes.value = result;
+        tableRevision.value++;
+      }
     }).catch((e) => {
-      if (!cancelled) {
-        setDiffError(e instanceof Error ? e.message : "Failed to compute diff");
+      if (!cancelled && !scope.abortSignal.aborted) {
+        diffError.value = e instanceof Error ? e.message : "Failed to compute diff";
       }
     });
     return () => {
       cancelled = true;
     };
-  }, [selection.older.hash, selection.newer.hash]);
-  const rows = useMemo(
-    () => changes ? buildSideBySideRows(changes) : [],
-    [changes]
-  );
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-hsp-sm px-hsp-lg py-vsp-xs border-b border-muted", children: [
+  });
+  const tableSnapshots = computed(() => changes.value ? [{ revision: tableRevision.value, rows: buildSideBySideRows(changes.value) }] : []);
+  return /* @__PURE__ */ jsxs("div", { class: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs("div", { class: "flex items-center gap-hsp-sm px-hsp-lg py-vsp-xs border-b border-muted", children: [
       showBackButton && /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          onClick: onBack,
-          className: "text-muted hover:text-fg lg:hidden",
+          "on:click": onBack,
+          class: "text-muted hover:text-fg lg:hidden",
           "aria-label": "Back to revisions",
-          children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-icon-sm w-icon-sm" })
+          children: /* @__PURE__ */ jsx(ArrowLeft, { class: "h-icon-sm w-icon-sm" })
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex", children: [
-        /* @__PURE__ */ jsx("div", { className: "w-1/2 text-small text-muted font-mono truncate pr-hsp-sm", children: selection.older.hash.slice(0, 7) }),
-        /* @__PURE__ */ jsx("div", { className: "w-1/2 text-small text-muted font-mono truncate pl-hsp-sm", children: selection.newer.hash.slice(0, 7) })
+      /* @__PURE__ */ jsxs("div", { class: "flex-1 min-w-0 flex", children: [
+        /* @__PURE__ */ jsx("div", { class: "w-1/2 text-small text-muted font-mono truncate pr-hsp-sm", children: selection.older.hash.slice(0, 7) }),
+        /* @__PURE__ */ jsx("div", { class: "w-1/2 text-small text-muted font-mono truncate pl-hsp-sm", children: selection.newer.hash.slice(0, 7) })
       ] })
     ] }),
-    diffError && /* @__PURE__ */ jsx("div", { className: "px-hsp-lg py-vsp-lg text-danger text-small", children: diffError }),
-    !changes && !diffError && /* @__PURE__ */ jsx(Spinner, {}),
-    /* @__PURE__ */ jsx("div", { className: `flex-1 overflow-auto${!changes ? " hidden" : ""}`, children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse", style: { tableLayout: "fixed" }, children: [
+    /* @__PURE__ */ jsx(Show, { when: computed(() => diffError.value !== null), children: () => /* @__PURE__ */ jsx("div", { class: "px-hsp-lg py-vsp-lg text-danger text-small", children: diffError }) }),
+    /* @__PURE__ */ jsx(Show, { when: computed(() => !changes.value && !diffError.value), children: () => /* @__PURE__ */ jsx(Spinner, {}) }),
+    /* @__PURE__ */ jsx("div", { class: computed(() => `flex-1 overflow-auto${!changes.value ? " hidden" : ""}`), children: /* @__PURE__ */ jsx(For, { each: tableSnapshots, by: (snapshot) => snapshot.revision, children: (snapshot) => /* @__PURE__ */ jsxs("table", { class: "w-full border-collapse", style: { "table-layout": "fixed" }, children: [
       /* @__PURE__ */ jsxs("colgroup", { children: [
         /* @__PURE__ */ jsx("col", { style: { width: "2.5rem" } }),
         /* @__PURE__ */ jsx("col", {}),
         /* @__PURE__ */ jsx("col", { style: { width: "2.5rem" } }),
         /* @__PURE__ */ jsx("col", {})
       ] }),
-      /* @__PURE__ */ jsx("tbody", { children: rows.map((row, idx) => {
+      /* @__PURE__ */ jsx("tbody", { children: snapshot.value.rows.map((row) => {
         const leftBg = row.type === "removed" || row.type === "changed" ? "diff-line-removed" : "";
         const rightBg = row.type === "added" || row.type === "changed" ? "diff-line-added" : "";
         const leftEmpty = row.leftLine === null;
         const rightEmpty = row.rightLine === null;
-        return /* @__PURE__ */ jsxs("tr", { className: "diff-row", children: [
-          /* @__PURE__ */ jsx("td", { className: `diff-line-num ${leftBg}`, children: row.leftNum ?? "" }),
-          /* @__PURE__ */ jsx("td", { className: `diff-line-content ${leftBg}${leftEmpty ? " diff-line-empty" : ""}`, children: row.leftLine ?? "" }),
-          /* @__PURE__ */ jsx("td", { className: `diff-line-num ${rightBg}`, children: row.rightNum ?? "" }),
-          /* @__PURE__ */ jsx("td", { className: `diff-line-content ${rightBg}${rightEmpty ? " diff-line-empty" : ""}`, children: row.rightLine ?? "" })
-        ] }, idx);
+        return /* @__PURE__ */ jsxs("tr", { class: "diff-row", children: [
+          /* @__PURE__ */ jsx("td", { class: `diff-line-num ${leftBg}`, children: row.leftNum ?? "" }),
+          /* @__PURE__ */ jsx("td", { class: `diff-line-content ${leftBg}${leftEmpty ? " diff-line-empty" : ""}`, children: row.leftLine ?? "" }),
+          /* @__PURE__ */ jsx("td", { class: `diff-line-num ${rightBg}`, children: row.rightNum ?? "" }),
+          /* @__PURE__ */ jsx("td", { class: `diff-line-content ${rightBg}${rightEmpty ? " diff-line-empty" : ""}`, children: row.rightLine ?? "" })
+        ] });
       }) })
-    ] }) })
+    ] }) }) })
   ] });
 }
 function RevisionList({
@@ -186,16 +189,17 @@ function RevisionList({
   displayLocale,
   dateFormats
 }) {
-  const [selectedA, setSelectedA] = useState(1);
-  const [selectedB, setSelectedB] = useState(0);
+  const revisionEntries = signal(entries);
+  const selectedA = signal(1);
+  const selectedB = signal(0);
   if (entries.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "px-hsp-lg py-vsp-lg text-muted text-small", children: "No revision history available." });
+    return /* @__PURE__ */ jsx("div", { class: "px-hsp-lg py-vsp-lg text-muted text-small", children: "No revision history available." });
   }
-  const canCompare = selectedA !== selectedB && selectedA >= 0 && selectedB >= 0 && selectedA < entries.length && selectedB < entries.length;
+  const canCompare = computed(() => selectedA.value !== selectedB.value && selectedA.value >= 0 && selectedB.value >= 0 && selectedA.value < entries.length && selectedB.value < entries.length);
   function handleCompare() {
-    if (!canCompare) return;
-    const idxOlder = Math.max(selectedA, selectedB);
-    const idxNewer = Math.min(selectedA, selectedB);
+    if (!canCompare.value) return;
+    const idxOlder = Math.max(selectedA.value, selectedB.value);
+    const idxNewer = Math.min(selectedA.value, selectedB.value);
     const olderEntry = entries[idxOlder];
     const newerEntry = entries[idxNewer];
     if (!olderEntry || !newerEntry) return;
@@ -204,41 +208,49 @@ function RevisionList({
       newer: newerEntry
     });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
-    entries.length >= 2 && /* @__PURE__ */ jsxs("div", { className: "px-hsp-lg py-vsp-xs border-b border-muted flex items-center gap-hsp-sm", children: [
+  return /* @__PURE__ */ jsxs("div", { class: "flex flex-col h-full", children: [
+    entries.length >= 2 && /* @__PURE__ */ jsxs("div", { class: "px-hsp-lg py-vsp-xs border-b border-muted flex items-center gap-hsp-sm", children: [
       /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          disabled: !canCompare,
-          onClick: handleCompare,
-          className: canCompare ? "px-hsp-md py-vsp-2xs text-small rounded bg-accent text-bg hover:bg-accent-hover" : "px-hsp-md py-vsp-2xs text-small rounded bg-surface text-muted cursor-not-allowed",
+          disabled: computed(() => !canCompare.value),
+          "on:click": handleCompare,
+          class: computed(
+            () => canCompare.value ? "px-hsp-md py-vsp-2xs text-small rounded bg-accent text-bg hover:bg-accent-hover" : "px-hsp-md py-vsp-2xs text-small rounded bg-surface text-muted cursor-not-allowed"
+          ),
           children: "Compare"
         }
       ),
-      /* @__PURE__ */ jsx("span", { className: "text-caption text-muted", children: "Select two revisions (A / B)" })
+      /* @__PURE__ */ jsx("span", { class: "text-caption text-muted", children: "Select two revisions (A / B)" })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: entries.map((entry, idx) => {
-      const isA = selectedA === idx;
-      const isB = selectedB === idx;
+    /* @__PURE__ */ jsx("div", { class: "flex-1 overflow-auto", children: /* @__PURE__ */ jsx(For, { each: revisionEntries, by: (entry) => entry.hash, children: (entry, idx) => {
+      const isA = computed(() => selectedA.value === idx.value);
+      const isB = computed(() => selectedB.value === idx.value);
       const dateStr = formatDate(
-        entry.date,
+        entry.value.date,
         displayLocale ?? "en",
         dateFormats?.full
       );
       return /* @__PURE__ */ jsx(
         "div",
         {
-          className: isA || isB ? "px-hsp-lg py-vsp-xs border-b border-muted bg-surface" : "px-hsp-lg py-vsp-xs border-b border-muted hover:bg-surface",
-          children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-hsp-sm", children: [
-            entries.length >= 2 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-vsp-2xs pt-[2px] shrink-0", children: [
+          class: computed(
+            () => isA.value || isB.value ? "px-hsp-lg py-vsp-xs border-b border-muted bg-surface" : "px-hsp-lg py-vsp-xs border-b border-muted hover:bg-surface"
+          ),
+          children: /* @__PURE__ */ jsxs("div", { class: "flex items-start gap-hsp-sm", children: [
+            entries.length >= 2 && /* @__PURE__ */ jsxs("div", { class: "flex flex-col gap-vsp-2xs pt-[2px] shrink-0", children: [
               /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
-                  onClick: () => setSelectedA(idx),
-                  className: isA ? "w-[1.5rem] h-[1.25rem] text-caption rounded flex items-center justify-center bg-accent text-bg" : "w-[1.5rem] h-[1.25rem] text-caption rounded flex items-center justify-center border border-muted text-muted hover:border-fg hover:text-fg",
-                  "aria-label": `Select revision ${entry.hash.slice(0, 7)} as A`,
+                  "on:click": () => {
+                    selectedA.value = idx.value;
+                  },
+                  class: computed(
+                    () => isA.value ? "w-[1.5rem] h-[1.25rem] text-caption rounded flex items-center justify-center bg-accent text-bg" : "w-[1.5rem] h-[1.25rem] text-caption rounded flex items-center justify-center border border-muted text-muted hover:border-fg hover:text-fg"
+                  ),
+                  "aria-label": `Select revision ${entry.value.hash.slice(0, 7)} as A`,
                   children: "A"
                 }
               ),
@@ -246,26 +258,29 @@ function RevisionList({
                 "button",
                 {
                   type: "button",
-                  onClick: () => setSelectedB(idx),
-                  className: isB ? "w-[1.5rem] h-[1.25rem] text-caption rounded flex items-center justify-center bg-accent text-bg" : "w-[1.5rem] h-[1.25rem] text-caption rounded flex items-center justify-center border border-muted text-muted hover:border-fg hover:text-fg",
-                  "aria-label": `Select revision ${entry.hash.slice(0, 7)} as B`,
+                  "on:click": () => {
+                    selectedB.value = idx.value;
+                  },
+                  class: computed(
+                    () => isB.value ? "w-[1.5rem] h-[1.25rem] text-caption rounded flex items-center justify-center bg-accent text-bg" : "w-[1.5rem] h-[1.25rem] text-caption rounded flex items-center justify-center border border-muted text-muted hover:border-fg hover:text-fg"
+                  ),
+                  "aria-label": `Select revision ${entry.value.hash.slice(0, 7)} as B`,
                   children: "B"
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-hsp-sm", children: [
-                /* @__PURE__ */ jsx("code", { className: "text-caption text-accent font-mono", children: entry.hash.slice(0, 7) }),
-                /* @__PURE__ */ jsx("span", { className: "text-caption text-muted", children: dateStr })
+            /* @__PURE__ */ jsxs("div", { class: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { class: "flex items-baseline gap-hsp-sm", children: [
+                /* @__PURE__ */ jsx("code", { class: "text-caption text-accent font-mono", children: entry.value.hash.slice(0, 7) }),
+                /* @__PURE__ */ jsx("span", { class: "text-caption text-muted", children: dateStr })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "text-small text-fg mt-vsp-2xs truncate", children: /* @__PURE__ */ jsx(SmartBreak, { children: entry.message }) }),
-              /* @__PURE__ */ jsx("div", { className: "text-caption text-muted", children: entry.author })
+              /* @__PURE__ */ jsx("div", { class: "text-small text-fg mt-vsp-2xs truncate", children: /* @__PURE__ */ jsx(SmartBreak, { children: entry.value.message }) }),
+              /* @__PURE__ */ jsx("div", { class: "text-caption text-muted", children: entry.value.author })
             ] })
           ] })
-        },
-        entry.hash
+        }
       );
-    }) })
+    } }) })
   ] });
 }
 function DocHistory({
@@ -275,67 +290,81 @@ function DocHistory({
   displayLocale,
   dateFormats
 }) {
-  const [view, setView] = useState("closed");
-  const [data, setData] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [diffSelection, setDiffSelection] = useState(
-    null
-  );
-  const returnFocusRef = useRef(null);
+  const scope = getScope();
+  const view = signal("closed");
+  const data = signal(null);
+  const loading = signal(false);
+  const error = signal(null);
+  const diffSelection = signal(null);
+  const returnFocusRef = { current: null };
   const base = basePath.replace(/\/+$/, "");
   const historySlug = slug === "" ? "index" : slug;
   const fetchPath = locale ? `${base}/doc-history/${locale}/${historySlug}.json` : `${base}/doc-history/${historySlug}.json`;
-  const fetchHistory = useCallback(async () => {
-    if (data) return;
-    setLoading(true);
-    setError(null);
+  let fetchController = null;
+  let fetchRun = 0;
+  const fetchHistory = async () => {
+    if (data.value || loading.value) return;
+    fetchController?.abort();
+    const controller = new AbortController();
+    fetchController = controller;
+    const run = ++fetchRun;
+    loading.value = true;
+    error.value = null;
     try {
-      const res = await fetch(fetchPath);
+      const res = await fetch(fetchPath, { signal: controller.signal });
+      if (controller.signal.aborted || scope.abortSignal.aborted || run !== fetchRun) return;
       if (!res.ok) {
         throw new Error(`Failed to load history (${res.status})`);
       }
       const json = await res.json();
+      if (controller.signal.aborted || scope.abortSignal.aborted || run !== fetchRun) return;
       if (!json || !Array.isArray(json.entries)) {
         throw new Error("Malformed history response");
       }
-      setData(json);
+      data.value = json;
     } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to load history");
+      if (!controller.signal.aborted && !scope.abortSignal.aborted && run === fetchRun)
+        error.value = e instanceof Error ? e.message : "Failed to load history";
     } finally {
-      setLoading(false);
+      if (!scope.abortSignal.aborted && run === fetchRun) loading.value = false;
     }
-  }, [data, fetchPath]);
+  };
+  scope.onActivate(() => () => {
+    fetchController?.abort();
+    fetchRun++;
+  });
   function handleOpen(e) {
     returnFocusRef.current = e.currentTarget;
-    setView("revisions");
-    fetchHistory();
+    view.value = "revisions";
+    void fetchHistory();
   }
-  const handleClose = useCallback(() => {
-    setView("closed");
-    setDiffSelection(null);
-  }, []);
+  const handleClose = () => {
+    view.value = "closed";
+    diffSelection.value = null;
+    fetchController?.abort();
+    fetchRun++;
+    loading.value = false;
+  };
   function handleSelectDiff(selection) {
-    setDiffSelection(selection);
-    setView("diff");
+    diffSelection.value = selection;
+    view.value = "diff";
   }
   function handleBackToRevisions() {
-    setDiffSelection(null);
-    setView("revisions");
+    diffSelection.value = null;
+    view.value = "revisions";
   }
-  useEffect(() => {
-    if (view !== "closed") {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
+  scope.effect(() => {
+    if (view.value === "closed") return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
     return () => {
-      document.body.style.overflow = "";
+      document.body.style.overflow = previousOverflow;
     };
-  }, [view]);
-  const isOpen = view !== "closed";
-  const hasDiff = view === "diff" && diffSelection;
-  const { dialogRef } = useModalDialog({
+  });
+  const isOpen = computed(() => view.value !== "closed");
+  const hasDiff = computed(() => view.value === "diff" && diffSelection.value !== null);
+  const diffPairs = computed(() => diffSelection.value && view.value === "diff" ? [{ key: `${diffSelection.value.older.hash}:${diffSelection.value.newer.hash}`, selection: diffSelection.value }] : []);
+  const { dialogRef } = modalDialog(scope, {
     isOpen,
     onClose: handleClose,
     navigateEvent: AFTER_NAVIGATE_EVENT,
@@ -343,16 +372,17 @@ function DocHistory({
     returnFocusRef
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "flex justify-end mt-vsp-xl", children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { class: "flex justify-end mt-vsp-xl", children: /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
-        onClick: handleOpen,
-        className: "doc-history-trigger flex items-center gap-hsp-xs px-hsp-md py-vsp-xs rounded-lg bg-surface border border-muted text-muted hover:text-accent hover:border-accent focus-visible:text-accent focus-visible:border-accent transition-colors",
+        "on:click": handleOpen,
+        "data-doc-history-trigger": "",
+        class: "flex items-center gap-hsp-xs px-hsp-md py-vsp-xs rounded-lg bg-surface border border-muted text-muted hover:text-accent hover:border-accent focus-visible:text-accent focus-visible:border-accent transition-colors duration-0",
         "aria-label": "View document history",
         children: [
-          /* @__PURE__ */ jsx(History, { className: "h-icon-md w-icon-md" }),
-          /* @__PURE__ */ jsx("span", { className: "text-small", children: "History" })
+          /* @__PURE__ */ jsx(History, { class: "h-icon-md w-icon-md" }),
+          /* @__PURE__ */ jsx("span", { class: "text-small", children: "History" })
         ]
       }
     ) }),
@@ -361,34 +391,37 @@ function DocHistory({
       {
         ref: dialogRef,
         "aria-label": "Document revision history",
-        className: "doc-history-panel z-modal fixed inset-0 m-0 h-full w-full max-h-full max-w-full bg-bg border-none p-0 backdrop:z-modal-backdrop backdrop:bg-bg/30",
+        "data-doc-history-panel": "",
+        class: "z-modal fixed inset-0 m-0 h-full w-full max-h-full max-w-full bg-bg border-none p-0 backdrop:z-modal-backdrop backdrop:bg-bg/30",
         style: { color: "var(--color-fg)" },
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-hsp-lg py-vsp-xs border-b border-muted", children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-body font-semibold text-fg", children: view === "diff" ? "Diff" : "Revision History" }),
+          /* @__PURE__ */ jsxs("div", { class: "flex items-center justify-between px-hsp-lg py-vsp-xs border-b border-muted", children: [
+            /* @__PURE__ */ jsx("h2", { class: "text-body font-semibold text-fg", children: computed(() => view.value === "diff" ? "Diff" : "Revision History") }),
             /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
-                onClick: handleClose,
-                className: "text-muted hover:text-fg",
+                "on:click": handleClose,
+                class: "text-muted hover:text-fg",
                 "aria-label": "Close history panel",
-                children: /* @__PURE__ */ jsx(Close, { className: "h-icon-md w-icon-md" })
+                children: /* @__PURE__ */ jsx(Close, { class: "h-icon-md w-icon-md" })
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "h-[calc(100%-3rem)] overflow-hidden", children: [
-            loading && /* @__PURE__ */ jsx(Spinner, {}),
-            error && /* @__PURE__ */ jsx("div", { className: "px-hsp-lg py-vsp-lg text-danger text-small", children: error }),
-            !loading && !error && data && /* @__PURE__ */ jsxs("div", { className: "flex h-full", children: [
+          /* @__PURE__ */ jsxs("div", { class: "h-[calc(100%_-_3rem)] overflow-hidden", children: [
+            /* @__PURE__ */ jsx(Show, { when: loading, children: () => /* @__PURE__ */ jsx(Spinner, {}) }),
+            /* @__PURE__ */ jsx(Show, { when: computed(() => error.value !== null), children: () => /* @__PURE__ */ jsx("div", { class: "px-hsp-lg py-vsp-lg text-danger text-small", children: error }) }),
+            /* @__PURE__ */ jsx(Show, { when: computed(() => !loading.value && !error.value && data.value !== null), children: () => /* @__PURE__ */ jsxs("div", { class: "flex h-full", children: [
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: hasDiff ? "hidden lg:flex lg:flex-col lg:w-[clamp(16rem,25%,22rem)] shrink-0 border-r border-muted h-full" : "flex flex-col w-full h-full",
+                  class: computed(
+                    () => hasDiff.value ? "hidden lg:flex lg:flex-col lg:w-[clamp(16rem,25%,22rem)] shrink-0 border-r border-muted h-full" : "flex flex-col w-full h-full"
+                  ),
                   children: /* @__PURE__ */ jsx(
                     RevisionList,
                     {
-                      entries: data.entries,
+                      entries: data.value.entries,
                       onSelectDiff: handleSelectDiff,
                       displayLocale,
                       dateFormats
@@ -396,16 +429,8 @@ function DocHistory({
                   )
                 }
               ),
-              hasDiff && /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 h-full", children: /* @__PURE__ */ jsx(
-                DiffViewer,
-                {
-                  selection: diffSelection,
-                  onBack: handleBackToRevisions,
-                  showBackButton: true
-                },
-                `${diffSelection.older.hash}:${diffSelection.newer.hash}`
-              ) })
-            ] })
+              /* @__PURE__ */ jsx(Show, { when: hasDiff, children: () => /* @__PURE__ */ jsx("div", { class: "flex-1 min-w-0 h-full", children: /* @__PURE__ */ jsx(For, { each: diffPairs, by: (pair) => pair.key, children: (pair) => /* @__PURE__ */ jsx(DiffViewer, { selection: pair.value.selection, onBack: handleBackToRevisions, showBackButton: true }) }) }) })
+            ] }) })
           ] })
         ]
       }

package/dist/doc-history-area/index.d.ts

@@ -1,6 +1,5 @@
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import type { VNode } from "preact";
+import type { Child, Description } from "@takazudo/zfb/zudo-react";
 import type { ChromeContext } from "../factory-context/index.js";
 import type { ResolvedDateFormats, Settings } from "../settings.js";
 /** Per-entry metadata shape from the doc-history manifest. */
@@ -27,12 +26,13 @@ export interface DocHistoryAreaSettings {
  * Must match the interface of `@takazudo/zudo-doc/doc-history`'s DocHistory.
  */
 export type DocHistoryComponent = (props: {
+    ssrFallback?: Child;
     slug: string;
     locale?: string;
     basePath?: string;
     displayLocale?: string;
     dateFormats?: ResolvedDateFormats;
-}) => VNode;
+}) => Description;
 export interface DocHistoryAreaProps {
     /** Page slug, e.g. "getting-started/intro". */
     slug: string;
@@ -77,4 +77,6 @@ export interface DocHistoryAreaProps {
  * DocHistory island is a HOST-bound slot (`ctx.hostBindings.DocHistory`,
  * default: a no-op stub rendering an empty fragment).
  */
-export declare function createDocHistoryArea<S extends Settings = Settings>(ctx: ChromeContext<S>): (props: DocHistoryAreaProps) => VNode | null;
+export declare function createDocHistoryArea<S extends Settings = Settings>(ctx: ChromeContext<S>): (props: DocHistoryAreaProps) => Child;
+/** Server-only fixed-target boundary. The fallback never crosses island JSON props. */
+export declare function DocHistoryBoundary({ ssrFallback, ...props }: Parameters<DocHistoryComponent>[0]): Description;

package/dist/doc-history-area/index.js

@@ -1,5 +1,6 @@
-import { jsx, jsxs } from "preact/jsx-runtime";
+import { Fragment, jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import { Island } from "@takazudo/zfb";
+import { DocHistory as DocHistoryClient } from "../doc-history/index.js";
 import { compileExclude } from "../doc-history-exclude/index.js";
 import { BodyFootUtilArea } from "../body-foot-util/index.js";
 import { toHistorySlug } from "../slug/index.js";
@@ -20,7 +21,6 @@ function createDocHistoryArea(ctx) {
   );
   const DocHistory = deriveDocHistorySlot(ctx);
   const dateFormatsFor = deriveDateFormats(ctx);
-  DocHistory.displayName = "DocHistory";
   function DocHistoryArea({
     slug,
     locale,
@@ -57,20 +57,17 @@ function createDocHistoryArea(ctx) {
         updatedDate ? `: ${updatedDate}` : ""
       ] })
     ] });
-    const docHistoryIsland = showDocHistoryUi ? Island({
-      when: "idle",
-      ssrFallback: fallback,
-      children: /* @__PURE__ */ jsx(
-        DocHistory,
-        {
-          slug: historySlug,
-          locale: docHistoryLocale,
-          basePath: docHistoryBasePath,
-          displayLocale: docHistoryDisplayLocale,
-          dateFormats: docHistoryDateFormats
-        }
-      )
-    }) : null;
+    const docHistoryIsland = showDocHistoryUi ? /* @__PURE__ */ jsx(
+      DocHistory,
+      {
+        ssrFallback: fallback,
+        slug: historySlug,
+        ...docHistoryLocale !== void 0 ? { locale: docHistoryLocale } : {},
+        basePath: docHistoryBasePath,
+        displayLocale: docHistoryDisplayLocale,
+        dateFormats: docHistoryDateFormats
+      }
+    ) : null;
     void historyLabel;
     const utilSettings = settings.bodyFootUtilArea;
     const sourceExt = meta ? meta.ext : sourceFileExt;
@@ -87,6 +84,10 @@ function createDocHistoryArea(ctx) {
   }
   return DocHistoryArea;
 }
+function DocHistoryBoundary({ ssrFallback, ...props }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Island, { when: "idle", ssrFallback, children: /* @__PURE__ */ jsx(DocHistoryClient, { ...props }) }) });
+}
 export {
+  DocHistoryBoundary,
   createDocHistoryArea
 };

package/dist/doc-metainfo-area/index.d.ts

@@ -1,6 +1,5 @@
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import type { VNode } from "preact";
+import type { Child } from "@takazudo/zfb/zudo-react";
 import type { ChromeContext } from "../factory-context/index.js";
 import type { Settings } from "../settings.js";
 /** Per-entry metadata shape from the doc-history manifest. */
@@ -40,4 +39,4 @@ export interface DocMetainfoAreaProps {
  * package slug helper; the per-page git-history manifest is a HOST-bound slot
  * (`ctx.hostBindings.docHistoryMeta`, default `{}` → no Created/Updated block).
  */
-export declare function createDocMetainfoArea<S extends Settings = Settings>(ctx: ChromeContext<S>): (props: DocMetainfoAreaProps) => VNode | null;
+export declare function createDocMetainfoArea<S extends Settings = Settings>(ctx: ChromeContext<S>): (props: DocMetainfoAreaProps) => Child;

package/dist/doc-metainfo-area/index.js

@@ -1,4 +1,4 @@
-import { jsx } from "preact/jsx-runtime";
+import { jsx } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import { DocMetainfo } from "../metainfo/index.js";
 import { toHistorySlug } from "../slug/index.js";
 import { assertChromeContext } from "../chrome/assert-chrome-context.js";