@takazudo/zudo-doc 5.28.2 → 6.0.1

package/dist/mermaid-enlarge/index.js

@@ -1,8 +1,8 @@
 "use client";
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
-import { useState, useEffect, useRef, useCallback } from "preact/compat";
+import { Fragment, jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
+import { batch, computed, getScope, Show, signal } from "@takazudo/zfb/zudo-react";
 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 {
   MERMAID_ENLARGE_DIALOG_CLASS,
   ENLARGE_DIALOG_STYLE
@@ -16,16 +16,16 @@ const MIN_SCALE = 1;
 const MAX_SCALE = 4;
 const ARROW_PAN_STEP = 40;
 function PlusIcon() {
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", focusable: "false", children: [
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
     /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
   ] });
 }
 function MinusIcon() {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) });
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) });
 }
 function PanIcon() {
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinejoin: "round", strokeLinecap: "round", "aria-hidden": "true", focusable: "false", children: [
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linejoin": "round", "stroke-linecap": "round", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsx("path", { d: "M9 11V5.5a1.5 1.5 0 0 1 3 0V11" }),
     /* @__PURE__ */ jsx("path", { d: "M12 11V4.5a1.5 1.5 0 0 1 3 0V11" }),
     /* @__PURE__ */ jsx("path", { d: "M15 11V6a1.5 1.5 0 0 1 3 0v6.5a6.5 6.5 0 0 1-6.5 6.5h-1a6 6 0 0 1-4.6-2.16l-2.2-2.86a1.5 1.5 0 0 1 2.3-1.92L9 13" }),
@@ -33,16 +33,33 @@ function PanIcon() {
   ] });
 }
 function MermaidEnlarge() {
-  const [open, setOpen] = useState(null);
-  const [scale, setScale] = useState(1);
-  const [translate, setTranslate] = useState({ x: 0, y: 0 });
-  const [panActive, setPanActive] = useState(false);
-  const innerRef = useRef(null);
-  const dragState = useRef({ dragging: false, startX: 0, startY: 0, originX: 0, originY: 0 });
-  useEffect(() => {
+  const scope = getScope();
+  const open = signal(null);
+  const scale = signal(MIN_SCALE);
+  const translate = signal({ x: 0, y: 0 });
+  const panActive = signal(false);
+  const innerRef = { current: null };
+  const dragState = {
+    dragging: false,
+    startX: 0,
+    startY: 0,
+    originX: 0,
+    originY: 0
+  };
+  const isOpen = computed(() => open.value !== null);
+  const zoomed = computed(() => scale.value > MIN_SCALE);
+  const atMax = computed(() => scale.value >= MAX_SCALE);
+  const transformStyle = computed(() => ({
+    transform: `translate(${translate.value.x}px, ${translate.value.y}px) scale(${scale.value})`,
+    "transform-origin": "center"
+  }));
+  const svgHtml = computed(() => open.value?.svgHtml ?? "");
+  const panActiveAttr = computed(() => panActive.value && zoomed.value ? "" : void 0);
+  scope.onActivate(() => {
+    let active = true;
     let mutationObserver = null;
     function injectButton(container) {
-      if (container.querySelector(INJECTED_BTN_SELECTOR) !== null) return;
+      if (!active || container.querySelector(INJECTED_BTN_SELECTOR) !== null) return;
       const rendered = container.hasAttribute("data-mermaid-rendered") || container.querySelector(DIAGRAM_SVG_SELECTOR) !== null;
       if (!rendered) return;
       container.setAttribute(BTN_INJECTED_ATTR, "");
@@ -51,19 +68,19 @@ function MermaidEnlarge() {
       btn.type = "button";
       btn.className = "zd-enlarge-btn";
       btn.setAttribute("aria-label", "Enlarge diagram");
-      btn.innerHTML = '<svg viewBox="0 0 38.99 38.99" fill="currentColor" focusable="false" aria-hidden="true"><polygon points="16.2 13.74 5.92 3.47 11.2 3.47 11.2 0 3.47 0 0 0 0 3.47 0 11.2 3.47 11.2 3.47 5.92 13.74 16.2 16.2 13.74" /><polygon points="25.24 16.2 35.52 5.92 35.52 11.2 38.99 11.2 38.99 3.47 38.99 0 35.52 0 27.79 0 27.79 3.47 33.07 3.47 22.79 13.74 25.24 16.2" /><polygon points="22.79 25.24 33.07 35.52 27.79 35.52 27.79 38.99 35.52 38.99 38.99 38.99 38.99 35.52 38.99 27.79 35.52 27.79 35.52 33.07 25.24 22.79 22.79 25.24" /><polygon points="13.74 22.79 3.47 33.07 3.47 27.79 0 27.79 0 35.52 0 38.99 3.47 38.99 11.2 38.99 11.2 35.52 5.92 35.52 16.2 25.24 13.74 22.79" /></svg>';
+      btn.innerHTML = '<svg viewBox="0 0 38.99 38.99" fill="currentColor" aria-hidden="true"><polygon points="16.2 13.74 5.92 3.47 11.2 3.47 11.2 0 3.47 0 0 0 0 3.47 0 11.2 3.47 11.2 3.47 5.92 13.74 16.2 16.2 13.74" /><polygon points="25.24 16.2 35.52 5.92 35.52 11.2 38.99 11.2 38.99 3.47 38.99 0 35.52 0 27.79 0 27.79 3.47 33.07 3.47 22.79 13.74 25.24 16.2" /><polygon points="22.79 25.24 33.07 35.52 27.79 35.52 27.79 38.99 35.52 38.99 38.99 38.99 38.99 35.52 38.99 27.79 35.52 27.79 35.52 33.07 25.24 22.79 22.79 25.24" /><polygon points="13.74 22.79 3.47 33.07 3.47 27.79 0 27.79 0 35.52 0 38.99 3.47 38.99 11.2 38.99 11.2 35.52 5.92 35.52 16.2 25.24 13.74 22.79" /></svg>';
       container.appendChild(btn);
     }
     function scan() {
-      const scope = document.querySelector(CONTENT_SCOPE_SELECTOR);
-      if (!scope) return;
-      scope.querySelectorAll(".mermaid").forEach((el) => injectButton(el));
+      if (!active) return;
+      const content = document.querySelector(CONTENT_SCOPE_SELECTOR);
+      content?.querySelectorAll(".mermaid").forEach(injectButton);
     }
     function startObserving() {
-      const scope = document.querySelector(CONTENT_SCOPE_SELECTOR);
-      if (scope) {
+      const content = document.querySelector(CONTENT_SCOPE_SELECTOR);
+      if (content) {
         mutationObserver = new MutationObserver(() => scan());
-        mutationObserver.observe(scope, {
+        mutationObserver.observe(content, {
           childList: true,
           subtree: true,
           attributes: true,
@@ -80,165 +97,168 @@ function MermaidEnlarge() {
     startObserving();
     document.addEventListener(AFTER_NAVIGATE_EVENT, handleAfterNavigate);
     return () => {
+      active = false;
       mutationObserver?.disconnect();
       document.removeEventListener(AFTER_NAVIGATE_EVENT, handleAfterNavigate);
     };
-  }, []);
-  useEffect(() => {
-    function handleDocumentClick(e) {
-      const target = e.target;
+  });
+  scope.onActivate(() => {
+    let active = true;
+    function handleDocumentClick(event) {
+      if (!active || !(event.target instanceof Element)) return;
+      const target = event.target;
       const container = target.closest(".zd-mermaid-enlargeable");
-      if (!container) return;
-      if (!target.closest(".zd-enlarge-btn")) return;
+      if (!container || !target.closest(".zd-enlarge-btn")) return;
       const svg = container.querySelector(DIAGRAM_SVG_SELECTOR);
       if (!svg) return;
-      setScale(1);
-      setTranslate({ x: 0, y: 0 });
-      setPanActive(false);
-      setOpen({ container, svgHtml: svg.outerHTML });
+      batch(() => {
+        scale.value = MIN_SCALE;
+        translate.value = { x: 0, y: 0 };
+        panActive.value = false;
+        open.value = { container, svgHtml: svg.outerHTML };
+      });
     }
     document.addEventListener("click", handleDocumentClick);
-    return () => document.removeEventListener("click", handleDocumentClick);
-  }, []);
-  useEffect(() => {
-    if (!open) return;
-    const { container } = open;
+    return () => {
+      active = false;
+      document.removeEventListener("click", handleDocumentClick);
+    };
+  });
+  scope.effect(() => {
+    const current = open.value;
+    if (!current) return;
+    let active = true;
     const observer = new MutationObserver(() => {
-      const svg = container.querySelector(DIAGRAM_SVG_SELECTOR);
-      if (svg && svg.outerHTML !== open.svgHtml) {
-        setOpen({ container, svgHtml: svg.outerHTML });
+      const latest = open.value;
+      if (!active || scope.abortSignal.aborted || !latest || latest.container !== current.container) return;
+      const svg = current.container.querySelector(DIAGRAM_SVG_SELECTOR);
+      if (svg && svg.outerHTML !== latest.svgHtml) {
+        open.value = { container: current.container, svgHtml: svg.outerHTML };
       }
     });
-    observer.observe(container, { childList: true, subtree: true });
-    return () => observer.disconnect();
-  }, [open]);
-  const handleClose = useCallback(() => setOpen(null), []);
-  const { dialogRef, handleBackdropClick } = useModalDialog({
-    isOpen: open !== null,
-    onClose: handleClose,
-    navigateEvent: AFTER_NAVIGATE_EVENT,
-    backdropClickClose: true
+    observer.observe(current.container, { childList: true, subtree: true });
+    return () => {
+      active = false;
+      observer.disconnect();
+    };
   });
-  const zoomIn = useCallback(() => {
-    setScale((s) => Math.min(MAX_SCALE, s * ZOOM_STEP));
-  }, []);
-  const zoomOut = useCallback(() => {
-    setScale((s) => {
-      const next = Math.max(MIN_SCALE, s / ZOOM_STEP);
+  function handleClose() {
+    open.value = null;
+  }
+  function zoomIn() {
+    scale.value = Math.min(MAX_SCALE, scale.value * ZOOM_STEP);
+  }
+  function zoomOut() {
+    const next = Math.max(MIN_SCALE, scale.value / ZOOM_STEP);
+    batch(() => {
+      scale.value = next;
       if (next <= MIN_SCALE) {
-        setTranslate({ x: 0, y: 0 });
-        setPanActive(false);
+        translate.value = { x: 0, y: 0 };
+        panActive.value = false;
       }
-      return next;
     });
-  }, []);
-  const togglePan = useCallback(() => {
-    setPanActive((p) => !p);
-  }, []);
-  const clampTranslate = useCallback(
-    (x, y, s) => {
-      const inner = innerRef.current;
-      if (!inner) return { x, y };
-      const rect = inner.getBoundingClientRect();
-      const baseW = rect.width / s;
-      const baseH = rect.height / s;
-      const maxX = Math.max(0, (baseW * s - baseW) / 2);
-      const maxY = Math.max(0, (baseH * s - baseH) / 2);
-      return {
-        x: Math.max(-maxX, Math.min(maxX, x)),
-        y: Math.max(-maxY, Math.min(maxY, y))
-      };
-    },
-    []
-  );
-  const onPointerDown = useCallback(
-    (e) => {
-      if (!panActive || scale <= MIN_SCALE) return;
-      const d = dragState.current;
-      d.dragging = true;
-      d.startX = e.clientX;
-      d.startY = e.clientY;
-      d.originX = translate.x;
-      d.originY = translate.y;
-      e.currentTarget.setPointerCapture?.(e.pointerId);
-    },
-    [panActive, scale, translate]
-  );
-  const onPointerMove = useCallback(
-    (e) => {
-      const d = dragState.current;
-      if (!d.dragging) return;
-      const nextX = d.originX + (e.clientX - d.startX);
-      const nextY = d.originY + (e.clientY - d.startY);
-      setTranslate(clampTranslate(nextX, nextY, scale));
-    },
-    [scale, clampTranslate]
-  );
-  const onPointerUp = useCallback((e) => {
-    const d = dragState.current;
-    if (!d.dragging) return;
-    d.dragging = false;
-    e.currentTarget.releasePointerCapture?.(e.pointerId);
-  }, []);
-  const onViewportKeyDown = useCallback(
-    (e) => {
-      if (scale <= MIN_SCALE) return;
-      let dx = 0;
-      let dy = 0;
-      if (e.key === "ArrowLeft") dx = ARROW_PAN_STEP;
-      else if (e.key === "ArrowRight") dx = -ARROW_PAN_STEP;
-      else if (e.key === "ArrowUp") dy = ARROW_PAN_STEP;
-      else if (e.key === "ArrowDown") dy = -ARROW_PAN_STEP;
-      else return;
-      e.preventDefault();
-      setTranslate((t) => clampTranslate(t.x + dx, t.y + dy, scale));
-    },
-    [scale, clampTranslate]
-  );
-  const zoomed = scale > MIN_SCALE;
-  const atMax = scale >= MAX_SCALE;
+  }
+  function togglePan() {
+    panActive.value = !panActive.value;
+  }
+  function clampTranslate(x, y, currentScale) {
+    const inner = innerRef.current;
+    if (!inner) return { x, y };
+    const rect = inner.getBoundingClientRect();
+    const baseW = rect.width / currentScale;
+    const baseH = rect.height / currentScale;
+    const maxX = Math.max(0, (baseW * currentScale - baseW) / 2);
+    const maxY = Math.max(0, (baseH * currentScale - baseH) / 2);
+    return {
+      x: Math.max(-maxX, Math.min(maxX, x)),
+      y: Math.max(-maxY, Math.min(maxY, y))
+    };
+  }
+  function onPointerDown(event) {
+    const pointer = event;
+    if (!panActive.value || scale.value <= MIN_SCALE) return;
+    dragState.dragging = true;
+    dragState.startX = pointer.clientX;
+    dragState.startY = pointer.clientY;
+    dragState.originX = translate.value.x;
+    dragState.originY = translate.value.y;
+    pointer.currentTarget.setPointerCapture?.(pointer.pointerId);
+  }
+  function onPointerMove(event) {
+    const pointer = event;
+    if (!dragState.dragging) return;
+    const nextX = dragState.originX + (pointer.clientX - dragState.startX);
+    const nextY = dragState.originY + (pointer.clientY - dragState.startY);
+    translate.value = clampTranslate(nextX, nextY, scale.value);
+  }
+  function onPointerUp(event) {
+    const pointer = event;
+    if (!dragState.dragging) return;
+    dragState.dragging = false;
+    pointer.currentTarget.releasePointerCapture?.(pointer.pointerId);
+  }
+  function onViewportKeyDown(event) {
+    const keyboard = event;
+    if (scale.value <= MIN_SCALE) return;
+    let dx = 0;
+    let dy = 0;
+    if (keyboard.key === "ArrowLeft") dx = ARROW_PAN_STEP;
+    else if (keyboard.key === "ArrowRight") dx = -ARROW_PAN_STEP;
+    else if (keyboard.key === "ArrowUp") dy = ARROW_PAN_STEP;
+    else if (keyboard.key === "ArrowDown") dy = -ARROW_PAN_STEP;
+    else return;
+    keyboard.preventDefault();
+    translate.value = clampTranslate(
+      translate.value.x + dx,
+      translate.value.y + dy,
+      scale.value
+    );
+  }
+  const { dialogRef, handleBackdropClick } = modalDialog(scope, {
+    isOpen,
+    onClose: handleClose,
+    navigateEvent: AFTER_NAVIGATE_EVENT,
+    backdropClickClose: true
+  });
   return /* @__PURE__ */ jsx(
     "dialog",
     {
       ref: dialogRef,
-      onClick: handleBackdropClick,
+      "on:click": handleBackdropClick,
       "aria-label": "Enlarged diagram",
-      className: MERMAID_ENLARGE_DIALOG_CLASS,
+      class: MERMAID_ENLARGE_DIALOG_CLASS,
       style: ENLARGE_DIALOG_STYLE,
-      children: open && /* @__PURE__ */ jsxs(Fragment, { children: [
+      children: /* @__PURE__ */ jsx(Show, { when: isOpen, children: () => /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "zd-mermaid-viewport",
-            tabIndex: 0,
-            onPointerDown,
-            onPointerMove,
-            onPointerUp,
-            onPointerCancel: onPointerUp,
-            onKeyDown: onViewportKeyDown,
-            "data-pan-active": panActive && zoomed ? "" : void 0,
+            class: "zd-mermaid-viewport",
+            tabindex: 0,
+            "on:pointerdown": onPointerDown,
+            "on:pointermove": onPointerMove,
+            "on:pointerup": onPointerUp,
+            "on:pointercancel": onPointerUp,
+            "on:keydown": onViewportKeyDown,
+            "data-pan-active": panActiveAttr,
             children: /* @__PURE__ */ jsx(
               "div",
               {
                 ref: innerRef,
-                className: "zd-mermaid-transform",
-                style: {
-                  transform: `translate(${translate.x}px, ${translate.y}px) scale(${scale})`,
-                  transformOrigin: "center"
-                },
-                dangerouslySetInnerHTML: { __html: open.svgHtml }
+                class: "zd-mermaid-transform",
+                style: transformStyle,
+                rawHtml: svgHtml
               }
             )
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "zd-mermaid-toolbar", role: "toolbar", "aria-label": "Diagram zoom controls", children: [
+        /* @__PURE__ */ jsxs("div", { class: "zd-mermaid-toolbar", role: "toolbar", "aria-label": "Diagram zoom controls", children: [
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              className: "zd-mermaid-tool-btn",
+              class: "zd-mermaid-tool-btn",
               "aria-label": "Zoom in",
-              onClick: zoomIn,
+              "on:click": zoomIn,
               disabled: atMax,
               children: /* @__PURE__ */ jsx(PlusIcon, {})
             }
@@ -247,10 +267,10 @@ function MermaidEnlarge() {
             "button",
             {
               type: "button",
-              className: "zd-mermaid-tool-btn",
+              class: "zd-mermaid-tool-btn",
               "aria-label": "Zoom out",
-              onClick: zoomOut,
-              disabled: !zoomed,
+              "on:click": zoomOut,
+              disabled: computed(() => !zoomed.value),
               children: /* @__PURE__ */ jsx(MinusIcon, {})
             }
           ),
@@ -258,11 +278,11 @@ function MermaidEnlarge() {
             "button",
             {
               type: "button",
-              className: "zd-mermaid-tool-btn",
+              class: "zd-mermaid-tool-btn",
               "aria-label": "Toggle pan mode",
               "aria-pressed": panActive,
-              onClick: togglePan,
-              disabled: !zoomed,
+              "on:click": togglePan,
+              disabled: computed(() => !zoomed.value),
               children: /* @__PURE__ */ jsx(PanIcon, {})
             }
           )
@@ -271,21 +291,17 @@ function MermaidEnlarge() {
           "button",
           {
             type: "button",
-            onClick: () => dialogRef.current?.close(),
-            className: "zd-enlarge-dialog-close",
+            "on:click": () => dialogRef.current?.close(),
+            class: "zd-enlarge-dialog-close",
             "aria-label": "Close enlarged diagram",
-            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 161.03 161.03", fill: "currentColor", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("polygon", { points: "161.03 10.27 150.76 0 80.51 70.24 10.27 0 0 10.27 70.24 80.51 0 150.76 10.27 161.03 80.51 90.78 150.76 161.03 161.03 150.76 90.78 80.51 161.03 10.27" }) })
+            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 161.03 161.03", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("polygon", { points: "161.03 10.27 150.76 0 80.51 70.24 10.27 0 0 10.27 70.24 80.51 0 150.76 10.27 161.03 80.51 90.78 150.76 161.03 161.03 150.76 90.78 80.51 161.03 10.27" }) })
           }
         )
-      ] })
+      ] }) })
     }
   );
 }
 MermaidEnlarge.displayName = "MermaidEnlarge";
-function MermaidEnlargeSsrFallback() {
-  return /* @__PURE__ */ jsx("dialog", { "aria-label": "Enlarged diagram", className: MERMAID_ENLARGE_DIALOG_CLASS, style: ENLARGE_DIALOG_STYLE });
-}
 export {
-  MermaidEnlarge,
-  MermaidEnlargeSsrFallback
+  MermaidEnlarge
 };

package/dist/mermaid-enlarge/public.d.ts

@@ -0,0 +1,2 @@
+export { MermaidEnlarge } from "./index.js";
+export { MermaidEnlargeSsrFallback } from "./ssr-fallback.js";

package/dist/mermaid-enlarge/public.js

@@ -0,0 +1,6 @@
+import { MermaidEnlarge } from "./index.js";
+import { MermaidEnlargeSsrFallback } from "./ssr-fallback.js";
+export {
+  MermaidEnlarge,
+  MermaidEnlargeSsrFallback
+};

package/dist/mermaid-enlarge/ssr-fallback.d.ts

@@ -0,0 +1,2 @@
+/** Closed dialog shell rendered before island activation. */
+export declare function MermaidEnlargeSsrFallback(): import("@takazudo/zfb").Description;

package/dist/mermaid-enlarge/ssr-fallback.js

@@ -0,0 +1,8 @@
+import { jsx } from "@takazudo/zfb/zudo-react/jsx-runtime";
+import { MERMAID_ENLARGE_DIALOG_CLASS, ENLARGE_DIALOG_STYLE } from "../island-types/index.js";
+function MermaidEnlargeSsrFallback() {
+  return /* @__PURE__ */ jsx("dialog", { "aria-label": "Enlarged diagram", class: MERMAID_ENLARGE_DIALOG_CLASS, style: ENLARGE_DIALOG_STYLE });
+}
+export {
+  MermaidEnlargeSsrFallback
+};

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

@@ -1,6 +1,5 @@
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import type { VNode } from "preact";
+import type { Child } from "@takazudo/zfb/zudo-react";
 export interface DocMetainfoProps {
     /**
      * Pre-formatted creation date string (e.g. `"Jan 1, 2024"`).
@@ -43,4 +42,4 @@ export declare const DEFAULT_UPDATED_LABEL = "Updated";
  * Returns `null` when no displayable field is provided, mirroring the
  * original `hasInfo && (...)` guard.
  */
-export declare function DocMetainfo(props: DocMetainfoProps): VNode | null;
+export declare function DocMetainfo(props: DocMetainfoProps): Child;

package/dist/metainfo/doc-metainfo.js

@@ -1,11 +1,10 @@
-import { jsx, jsxs } from "preact/jsx-runtime";
+import { jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
 const DEFAULT_CREATED_LABEL = "Created";
 const DEFAULT_UPDATED_LABEL = "Updated";
 function ClockIcon() {
   return /* @__PURE__ */ jsx(
     "svg",
     {
-      xmlns: "http://www.w3.org/2000/svg",
       class: "h-icon-xs w-icon-xs",
       fill: "none",
       viewBox: "0 0 24 24",
@@ -27,7 +26,6 @@ function RefreshIcon() {
   return /* @__PURE__ */ jsx(
     "svg",
     {
-      xmlns: "http://www.w3.org/2000/svg",
       class: "h-icon-xs w-icon-xs",
       fill: "none",
       viewBox: "0 0 24 24",
@@ -49,7 +47,6 @@ function UserIcon() {
   return /* @__PURE__ */ jsx(
     "svg",
     {
-      xmlns: "http://www.w3.org/2000/svg",
       class: "h-icon-xs w-icon-xs",
       fill: "none",
       viewBox: "0 0 24 24",

package/dist/metainfo/doc-tags.d.ts

@@ -1,6 +1,5 @@
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import type { VNode } from "preact";
+import type { Child } from "@takazudo/zfb/zudo-react";
 /**
  * A single resolved tag with its navigation href. The legacy
  * `doc-tags` called `resolvePageTags(tags)` and used `TagNav`
@@ -59,4 +58,4 @@ export declare const DEFAULT_TAGGED_WITH_LABEL = "Tagged with";
  * The pointed-chip shape is reproduced verbatim from the page-variant
  * branch of `tag-nav` using the same `clip-path` values.
  */
-export declare function DocTags(props: DocTagsProps): VNode | null;
+export declare function DocTags(props: DocTagsProps): Child;

package/dist/metainfo/doc-tags.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "preact/jsx-runtime";
+import { jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
 const DEFAULT_TAGS_LABEL = "Tags";
 const DEFAULT_TAGGED_WITH_LABEL = "Tagged with";
 function DocTags(props) {

package/dist/metainfo/frontmatter-preview.d.ts

@@ -1,6 +1,5 @@
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import type { ComponentChildren, VNode } from "preact";
+import type { Child, Component } from "@takazudo/zfb/zudo-react";
 /**
  * Props passed to a per-key custom renderer component.
  *
@@ -24,7 +23,7 @@ export interface FrontmatterCellRendererProps {
  * Return `null` or `undefined` to fall through to the built-in
  * `renderValue()` plain-text path.
  */
-export type FrontmatterCellRenderer = (props: FrontmatterCellRendererProps) => ComponentChildren;
+export type FrontmatterCellRenderer = Component<FrontmatterCellRendererProps>;
 export interface FrontmatterPreviewProps {
     /**
      * Pre-filtered `[key, value]` pairs to display. The legacy component
@@ -88,4 +87,4 @@ export declare const DEFAULT_VALUE_COL_LABEL = "Value";
  * the matching renderer. A renderer that returns `null` or `undefined` falls
  * through to the built-in `renderValue()` plain-text path.
  */
-export declare function FrontmatterPreview(props: FrontmatterPreviewProps): VNode | null;
+export declare function FrontmatterPreview(props: FrontmatterPreviewProps): Child;

package/dist/metainfo/frontmatter-preview.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "preact/jsx-runtime";
+import { jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
 const DEFAULT_FRONTMATTER_PREVIEW_TITLE = "Frontmatter";
 const DEFAULT_KEY_COL_LABEL = "Key";
 const DEFAULT_VALUE_COL_LABEL = "Value";

package/dist/nav-data-prep/index.js

@@ -12,10 +12,12 @@ function buildRootMenuItems(lang, currentVersion, headerNav, t, navHref) {
   return headerNav.map((item) => ({
     label: item.labelKey ? t(item.labelKey, lang) : item.label,
     href: navHref(item.path, lang, currentVersion, item.versioned),
-    children: item.children?.map((child) => ({
-      label: child.labelKey ? t(child.labelKey, lang) : child.label,
-      href: navHref(child.path, lang, currentVersion, child.versioned)
-    }))
+    ...item.children !== void 0 ? {
+      children: item.children.map((child) => ({
+        label: child.labelKey ? t(child.labelKey, lang) : child.label,
+        href: navHref(child.path, lang, currentVersion, child.versioned)
+      }))
+    } : {}
   }));
 }
 function buildLocaleLinksForNav(currentPath, lang, localeCount, buildLocaleLinks) {

package/dist/nav-indexing/category-nav.d.ts

@@ -1,6 +1,5 @@
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import type { JSX } from "preact";
+import type { JSX } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import type { NavNode } from "./types.js";
 export interface CategoryNavProps {
     /**
@@ -13,7 +12,7 @@ export interface CategoryNavProps {
     class?: string;
 }
 /**
- * CategoryNav — JSX port of `src/components/category-nav`.
+ * CategoryNav — server renderer for the category card list.
  *
  * Renders direct children of a category as a two-column grid of card links.
  * Each card shows the node's label (with an arrow icon) and an optional

package/dist/nav-indexing/category-nav.js

@@ -1,9 +1,8 @@
-import { jsx, jsxs } from "preact/jsx-runtime";
+import { jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
 function ArrowIcon() {
   return /* @__PURE__ */ jsx(
     "svg",
     {
-      xmlns: "http://www.w3.org/2000/svg",
       fill: "currentColor",
       viewBox: "0 0 103.395 107.049",
       "aria-hidden": "true",

package/dist/nav-indexing/category-tree-nav.d.ts

@@ -1,6 +1,5 @@
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import type { JSX } from "preact";
+import type { JSX } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import type { NavNode } from "./types.js";
 export interface CategoryTreeNavProps {
     /**
@@ -12,7 +11,7 @@ export interface CategoryTreeNavProps {
     maxDepth?: number;
 }
 /**
- * CategoryTreeNav — JSX port of `src/components/category-tree-nav`.
+ * CategoryTreeNav — server renderer for the category tree list.
  *
  * Renders the children of a category as a recursive disc-bulleted list. Links
  * are rendered for nodes that have a page; plain text for structural nodes.