@takazudo/zudo-doc 5.28.2 → 6.0.0

package/dist/ai-chat-modal/index.js

@@ -1,145 +1,216 @@
 "use client";
-import { jsx, jsxs } from "preact/jsx-runtime";
-import { useState, useEffect, useRef, useCallback, memo } from "preact/compat";
+import { jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
+import {
+  batch,
+  computed,
+  For,
+  getScope,
+  Show,
+  signal
+} from "@takazudo/zfb/zudo-react";
 import { renderMarkdown } from "../render-markdown/index.js";
 import { SmartBreak } from "../smart-break/index.js";
 import { BEFORE_NAVIGATE_EVENT } from "../transitions/index.js";
-import { useModalDialog } from "../use-modal-dialog/index.js";
+import { modalDialog } from "../use-modal-dialog/index.js";
 function isAiChatResponse(data) {
   return typeof data === "object" && data !== null;
 }
-const ChatMessageRow = memo(function ChatMessageRow2({ msg }) {
+function ChatMessageRow({ msg }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `mb-vsp-xs flex ${msg.role === "user" ? "justify-end" : "justify-start"}`,
+      class: `mb-vsp-xs flex ${msg.role === "user" ? "justify-end" : "justify-start"}`,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: msg.role === "user" ? "You: " : "Assistant: " }),
-        msg.role === "user" ? /* @__PURE__ */ jsx("div", { className: "max-w-[85%] rounded-t-[1rem] rounded-bl-[1rem] rounded-br-[0.25rem] bg-chat-user-bg px-hsp-md py-vsp-2xs text-small leading-relaxed text-chat-user-text", children: /* @__PURE__ */ jsx(SmartBreak, { children: msg.content }) }) : /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "ai-chat-md max-w-[85%] rounded-t-[1rem] rounded-br-[1rem] rounded-bl-[0.25rem] bg-chat-assistant-bg px-hsp-md py-vsp-2xs text-small leading-relaxed text-chat-assistant-text",
-            dangerouslySetInnerHTML: { __html: renderMarkdown(msg.content) }
-          }
+        /* @__PURE__ */ jsx("span", { class: "sr-only", children: msg.role === "user" ? "You: " : "Assistant: " }),
+        msg.role === "user" ? /* @__PURE__ */ jsx("div", { class: "max-w-[85%] rounded-t-[1rem] rounded-bl-[1rem] rounded-br-[0.25rem] bg-chat-user-bg px-hsp-md py-vsp-2xs text-small leading-relaxed text-chat-user-text", children: /* @__PURE__ */ jsx(SmartBreak, { children: msg.content }) }) : (
+          // `renderMarkdown` escapes authored content before adding its small,
+          // protocol-checked tag allowlist. This generated HTML is the only
+          // payload assigned to rawHtml; the opaque subtree has no owned children.
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              class: "ai-chat-md max-w-[85%] rounded-t-[1rem] rounded-br-[1rem] rounded-bl-[0.25rem] bg-chat-assistant-bg px-hsp-md py-vsp-2xs text-small leading-relaxed text-chat-assistant-text",
+              rawHtml: renderMarkdown(msg.content)
+            }
+          )
         )
       ]
     }
   );
-});
+}
 function AiChatModal({ basePath }) {
-  const messagesEndRef = useRef(null);
-  const inputRef = useRef(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const [messages, setMessages] = useState([]);
-  const [input, setInput] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const resetState = useCallback(() => {
-    setIsOpen(false);
-    setMessages([]);
-    setInput("");
-    setError(null);
-    setLoading(false);
-  }, []);
-  const { dialogRef, handleBackdropClick } = useModalDialog({
+  const scope = getScope();
+  const messagesEndRef = { current: null };
+  const inputRef = { current: null };
+  const isOpen = signal(false);
+  const messages = signal([]);
+  const input = signal("");
+  const loading = signal(false);
+  const error = signal(null);
+  const isComposing = signal(false);
+  let nextMessageId = 0;
+  let requestVersion = 0;
+  let activeRequest = null;
+  let cleanupActiveRequest = null;
+  const busy = computed(() => loading.value);
+  const sendDisabled = computed(() => busy.value || input.value.trim().length === 0);
+  const showEmptyState = computed(() => messages.value.length === 0 && !busy.value);
+  const hasError = computed(() => error.value !== null);
+  const latestAssistantMessage = computed(() => {
+    const current = messages.value;
+    for (let index = current.length - 1; index >= 0; index--) {
+      const message = current[index];
+      if (message?.role === "assistant") return message.content;
+    }
+    return "";
+  });
+  const cancelActiveRequest = () => {
+    requestVersion++;
+    activeRequest?.abort();
+    cleanupActiveRequest?.();
+    activeRequest = null;
+    cleanupActiveRequest = null;
+  };
+  const resetState = () => {
+    cancelActiveRequest();
+    batch(() => {
+      isOpen.value = false;
+      messages.value = [];
+      input.value = "";
+      error.value = null;
+      loading.value = false;
+      isComposing.value = false;
+    });
+  };
+  const { dialogRef, handleBackdropClick } = modalDialog(scope, {
     isOpen,
     onClose: resetState,
     navigateEvent: BEFORE_NAVIGATE_EVENT,
     backdropClickClose: true,
     restoreFocusOnly: true
   });
-  useEffect(() => {
-    function handleToggle() {
+  scope.onActivate(() => {
+    const handleToggle = (_event) => {
       const dialog = dialogRef.current;
-      if (!dialog || !dialog.isConnected) return;
+      if (!dialog?.isConnected) return;
       if (dialog.open) {
         dialog.close();
       } else {
-        setIsOpen(true);
+        isOpen.value = true;
       }
-    }
+    };
     window.addEventListener("toggle-ai-chat", handleToggle);
     return () => window.removeEventListener("toggle-ai-chat", handleToggle);
-  }, [dialogRef]);
-  useEffect(() => {
-    if (isOpen) {
-      inputRef.current?.focus();
+  });
+  scope.onCleanup(cancelActiveRequest);
+  scope.effect(() => {
+    if (isOpen.value) inputRef.current?.focus();
+  });
+  scope.effect(() => {
+    messages.value;
+    loading.value;
+    messagesEndRef.current?.scrollIntoView?.({ behavior: "smooth" });
+  });
+  const sendMessage = async () => {
+    const trimmed = input.value.trim();
+    if (!trimmed || loading.value || isComposing.value || scope.abortSignal.aborted) {
+      return;
     }
-  }, [isOpen]);
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages, loading]);
-  const sendMessage = useCallback(async () => {
-    const trimmed = input.trim();
-    if (!trimmed || loading) return;
-    const userMessage = { role: "user", content: trimmed };
-    const updatedMessages = [...messages, userMessage];
-    setMessages(updatedMessages);
-    setInput("");
-    setError(null);
-    setLoading(true);
+    const requestMessages = messages.value.map(({ role, content }) => ({ role, content }));
+    const userMessage = {
+      id: ++nextMessageId,
+      role: "user",
+      content: trimmed
+    };
+    const controller = new AbortController();
+    const currentRequest = ++requestVersion;
+    activeRequest = controller;
+    const abortForScope = () => controller.abort();
+    scope.abortSignal.addEventListener("abort", abortForScope, { once: true });
+    const cleanupScopeAbort = () => scope.abortSignal.removeEventListener("abort", abortForScope);
+    cleanupActiveRequest = cleanupScopeAbort;
+    const isCurrentRequest = () => currentRequest === requestVersion && activeRequest === controller && !controller.signal.aborted && !scope.abortSignal.aborted;
+    let assistantMessage = null;
+    let responseError;
+    batch(() => {
+      messages.value = [...messages.value, userMessage];
+      input.value = "";
+      error.value = null;
+      loading.value = true;
+    });
     try {
       const base = basePath.replace(/\/+$/, "");
-      const res = await fetch(`${base}/api/ai-chat`, {
+      const response = await fetch(`${base}/api/ai-chat`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          message: trimmed,
-          history: messages
-        })
+        body: JSON.stringify({ message: trimmed, history: requestMessages }),
+        signal: controller.signal
       });
-      const raw = await res.json();
+      if (!isCurrentRequest()) return;
+      const raw = await response.json();
+      if (!isCurrentRequest()) return;
       const data = isAiChatResponse(raw) ? raw : {};
-      if (!res.ok) {
-        setError(("error" in data && typeof data.error === "string" ? data.error : null) || "Something went wrong");
+      if (!response.ok) {
+        responseError = ("error" in data && typeof data.error === "string" ? data.error : null) || "Something went wrong";
       } else if ("response" in data && typeof data.response === "string" && data.response) {
-        setMessages((prev) => [
-          ...prev,
-          { role: "assistant", content: data.response }
-        ]);
+        assistantMessage = { id: ++nextMessageId, role: "assistant", content: data.response };
       } else {
-        setError("Received an empty or invalid response");
+        responseError = "Received an empty or invalid response";
       }
     } catch {
-      setError("Failed to connect to the AI assistant");
+      if (isCurrentRequest()) responseError = "Failed to connect to the AI assistant";
     } finally {
-      setLoading(false);
+      cleanupScopeAbort();
+      if (activeRequest === controller) cleanupActiveRequest = null;
+      if (isCurrentRequest()) {
+        activeRequest = null;
+        batch(() => {
+          if (assistantMessage) messages.value = [...messages.value, assistantMessage];
+          if (responseError !== void 0) error.value = responseError;
+          loading.value = false;
+        });
+      }
     }
-  }, [input, loading, messages, basePath]);
-  function handleKeyDown(e) {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      sendMessage();
+  };
+  const handleKeyDown = (event) => {
+    const keyboard = event;
+    if (keyboard.key !== "Enter" || keyboard.shiftKey || keyboard.isComposing || isComposing.value || event.defaultPrevented) {
+      return;
     }
-  }
+    event.preventDefault();
+    void sendMessage();
+  };
+  const handleSendClick = (event) => {
+    if (event.defaultPrevented || isComposing.value) return;
+    void sendMessage();
+  };
   return /* @__PURE__ */ jsx(
     "dialog",
     {
       ref: dialogRef,
-      onClick: handleBackdropClick,
-      className: "z-modal m-0 h-dvh max-h-none w-dvw max-w-none border-none bg-surface p-0 text-fg backdrop:z-modal-backdrop backdrop:bg-bg/80 lg:m-auto lg:h-[90vh] lg:max-h-[90vh] lg:w-[90vw] lg:max-w-[52.5rem] lg:border-solid lg:border lg:border-fg",
-      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between border-b border-muted px-hsp-lg py-vsp-xs", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-title font-bold text-fg", children: "AI Assistant" }),
+      "on:click": handleBackdropClick,
+      class: "z-modal m-0 h-dvh max-h-none w-dvw max-w-none border-none bg-surface p-0 text-fg backdrop:z-modal-backdrop backdrop:bg-bg/80 lg:m-auto lg:h-[90vh] lg:max-h-[90vh] lg:w-[90vw] lg:max-w-[52.5rem] lg:border-solid lg:border lg:border-fg",
+      children: /* @__PURE__ */ jsxs("div", { class: "flex h-full flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { class: "flex shrink-0 items-center justify-between border-b border-muted px-hsp-lg py-vsp-xs", children: [
+          /* @__PURE__ */ jsx("h2", { class: "text-title font-bold text-fg", children: "AI Assistant" }),
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              onClick: () => dialogRef.current?.close(),
-              className: "flex items-center justify-center text-muted transition-colors hover:text-fg",
+              "on:click": () => dialogRef.current?.close(),
+              class: "flex items-center justify-center text-muted transition-colors duration-0 hover:text-fg",
               "aria-label": "Close",
               children: /* @__PURE__ */ jsxs(
                 "svg",
                 {
-                  xmlns: "http://www.w3.org/2000/svg",
                   width: "20",
                   height: "20",
                   viewBox: "0 0 24 24",
                   fill: "none",
                   stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
+                  "stroke-width": "2",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
                   "aria-hidden": "true",
                   children: [
                     /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
@@ -150,79 +221,69 @@ function AiChatModal({ basePath }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { role: "log", "aria-label": "Chat messages", className: "flex-1 overflow-y-auto px-hsp-lg py-vsp-sm", children: [
-          messages.length === 0 && !loading && /* @__PURE__ */ jsx("p", { className: "py-vsp-xl text-center text-small text-muted", children: "Ask a question about the documentation." }),
-          messages.map((msg, i) => /* @__PURE__ */ jsx(ChatMessageRow, { msg }, i)),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              "aria-live": "polite",
-              "aria-atomic": "true",
-              className: "sr-only",
-              children: (() => {
-                for (let i = messages.length - 1; i >= 0; i--) {
-                  const msg = messages[i];
-                  if (msg && msg.role === "assistant") return msg.content;
-                }
-                return "";
-              })()
-            }
-          ),
-          loading && /* @__PURE__ */ jsx("div", { className: "mb-vsp-xs flex justify-start", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs("div", { role: "log", "aria-label": "Chat messages", class: "flex-1 overflow-y-auto px-hsp-lg py-vsp-sm", children: [
+          /* @__PURE__ */ jsx(Show, { when: showEmptyState, children: () => /* @__PURE__ */ jsx("p", { class: "py-vsp-xl text-center text-small text-muted", children: "Ask a question about the documentation." }) }),
+          /* @__PURE__ */ jsx(For, { each: messages, by: (message) => message.id, children: (message) => /* @__PURE__ */ jsx(ChatMessageRow, { msg: message.value }) }),
+          /* @__PURE__ */ jsx("div", { "aria-live": "polite", "aria-atomic": "true", class: "sr-only", children: latestAssistantMessage }),
+          /* @__PURE__ */ jsx(Show, { when: busy, children: () => /* @__PURE__ */ jsx("div", { class: "mb-vsp-xs flex justify-start", children: /* @__PURE__ */ jsx(
             "div",
             {
               role: "status",
-              className: "rounded-t-[1rem] rounded-br-[1rem] rounded-bl-[0.25rem] bg-chat-assistant-bg px-hsp-md py-vsp-2xs text-small text-muted",
+              class: "rounded-t-[1rem] rounded-br-[1rem] rounded-bl-[0.25rem] bg-chat-assistant-bg px-hsp-md py-vsp-2xs text-small text-muted",
               children: "Thinking..."
             }
-          ) }),
-          error && /* @__PURE__ */ jsx(
+          ) }) }),
+          /* @__PURE__ */ jsx(Show, { when: hasError, children: () => /* @__PURE__ */ jsx(
             "div",
             {
               role: "alert",
-              className: "mb-vsp-xs rounded-[0.75rem] border border-danger bg-bg px-hsp-md py-vsp-2xs text-small text-danger",
-              children: error
+              class: "mb-vsp-xs rounded-[0.75rem] border border-danger bg-bg px-hsp-md py-vsp-2xs text-small text-danger",
+              children: computed(() => error.value ?? "")
             }
-          ),
+          ) }),
           /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-muted px-hsp-lg py-vsp-xs", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-hsp-sm", children: [
+        /* @__PURE__ */ jsx("div", { class: "shrink-0 border-t border-muted px-hsp-lg py-vsp-xs", children: /* @__PURE__ */ jsxs("div", { class: "flex items-center gap-x-hsp-sm", children: [
           /* @__PURE__ */ jsx(
             "input",
             {
               ref: inputRef,
               type: "text",
-              value: input,
-              onChange: (e) => setInput(e.currentTarget.value),
-              onKeyDown: handleKeyDown,
-              disabled: loading,
+              modelValue: input,
+              "on:compositionstart": () => {
+                isComposing.value = true;
+              },
+              "on:compositionend": () => {
+                isComposing.value = false;
+              },
+              "on:keydown": handleKeyDown,
+              disabled: busy,
               "aria-label": "Type your message",
-              "aria-busy": loading,
+              "aria-busy": busy,
               placeholder: "Type your message...",
-              className: "flex-1 rounded-full border border-muted bg-bg px-hsp-lg py-vsp-2xs text-small text-fg placeholder:text-muted focus:border-accent focus:outline-none disabled:opacity-50"
+              class: "flex-1 rounded-full border border-muted bg-bg px-hsp-lg py-vsp-2xs text-small text-fg placeholder:text-muted focus:border-accent focus:outline-none disabled:opacity-50"
             }
           ),
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              onClick: sendMessage,
-              disabled: loading || !input.trim(),
-              "aria-busy": loading,
-              className: "flex h-[2rem] w-[2rem] shrink-0 items-center justify-center rounded-full bg-accent text-bg transition-colors hover:bg-accent-hover disabled:opacity-50",
+              "on:click": handleSendClick,
+              disabled: sendDisabled,
+              "aria-busy": busy,
+              class: "flex h-[2rem] w-[2rem] shrink-0 items-center justify-center rounded-full bg-accent text-bg transition-colors duration-0 hover:bg-accent-hover disabled:opacity-50",
               "aria-label": "Send message",
               children: /* @__PURE__ */ jsxs(
                 "svg",
                 {
-                  xmlns: "http://www.w3.org/2000/svg",
                   width: "16",
                   height: "16",
                   viewBox: "0 0 24 24",
                   fill: "none",
                   stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
+                  "stroke-width": "2",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
                   "aria-hidden": "true",
                   children: [
                     /* @__PURE__ */ jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
@@ -237,7 +298,6 @@ function AiChatModal({ basePath }) {
     }
   );
 }
-AiChatModal.displayName = "AiChatModal";
 export {
   AiChatModal
 };

package/dist/asset-components/asset-card.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 AssetComponentContext } from "./shared.js";
 export interface AssetCardProps {
     src: string;

package/dist/asset-components/asset-card.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "preact/jsx-runtime";
+import { jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import { assetRawHref, assetViewerHref } from "../asset-path/index.js";
 import {
   AssetFileIcon,
@@ -39,23 +39,23 @@ function createAssetCard(context) {
       )
     ].filter((value) => value !== void 0);
     const finalDescription = description ?? entry.description;
-    return /* @__PURE__ */ jsx("article", { className: "rounded-lg border border-muted bg-surface px-hsp-lg py-vsp-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-x-hsp-md", children: [
-      /* @__PURE__ */ jsx("span", { className: "flex h-icon-lg w-icon-lg shrink-0 items-center justify-center text-muted", children: /* @__PURE__ */ jsx(AssetFileIcon, { className: "h-icon-lg w-icon-lg" }) }),
-      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsxs("div", { className: "font-mono text-small text-fg", children: [
-          entry.dir ? /* @__PURE__ */ jsxs("span", { className: "text-muted", children: [
+    return /* @__PURE__ */ jsx("article", { class: "rounded-lg border border-muted bg-surface px-hsp-lg py-vsp-sm", children: /* @__PURE__ */ jsxs("div", { class: "flex items-start gap-x-hsp-md", children: [
+      /* @__PURE__ */ jsx("span", { class: "flex h-icon-lg w-icon-lg shrink-0 items-center justify-center text-muted", children: /* @__PURE__ */ jsx(AssetFileIcon, { class: "h-icon-lg w-icon-lg" }) }),
+      /* @__PURE__ */ jsxs("div", { class: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { class: "font-mono text-small text-fg", children: [
+          entry.dir ? /* @__PURE__ */ jsxs("span", { class: "text-muted", children: [
             entry.dir,
             "/"
           ] }) : null,
           /* @__PURE__ */ jsx("strong", { children: title ?? entry.name })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "mt-vsp-3xs text-caption text-muted", children: details.join(" \xB7 ") }),
-        finalDescription ? /* @__PURE__ */ jsx("p", { className: "mt-vsp-xs text-small text-muted", children: finalDescription }) : null,
-        /* @__PURE__ */ jsxs("div", { className: "mt-vsp-xs flex gap-x-hsp-lg text-caption", children: [
+        /* @__PURE__ */ jsx("div", { class: "mt-vsp-3xs text-caption text-muted", children: details.join(" \xB7 ") }),
+        finalDescription ? /* @__PURE__ */ jsx("p", { class: "mt-vsp-xs text-small text-muted", children: finalDescription }) : null,
+        /* @__PURE__ */ jsxs("div", { class: "mt-vsp-xs flex gap-x-hsp-lg text-caption", children: [
           /* @__PURE__ */ jsxs(
             "a",
             {
-              className: "text-fg hover:text-accent focus-visible:text-accent hover:underline focus-visible:underline",
+              class: "text-fg hover:text-accent focus-visible:text-accent hover:underline focus-visible:underline",
               href: viewerHref,
               children: [
                 assetComponentText(
@@ -70,9 +70,9 @@ function createAssetCard(context) {
           /* @__PURE__ */ jsxs(
             "a",
             {
-              className: "text-fg hover:text-accent focus-visible:text-accent hover:underline focus-visible:underline",
+              class: "text-fg hover:text-accent focus-visible:text-accent hover:underline focus-visible:underline",
               href: rawHref,
-              download: true,
+              download: "",
               children: [
                 assetComponentText(
                   context,

package/dist/asset-components/asset-code.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 AssetComponentContext } from "./shared.js";
 export interface AssetCodeProps {
     src: string;

package/dist/asset-components/asset-code.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "preact/jsx-runtime";
+import { jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import { assetViewerHref } from "../asset-path/index.js";
 import {
   AssetFileIcon,
@@ -49,22 +49,22 @@ function createAssetCode(context) {
     });
     const shown = Math.max(0, excerpt.endLine - excerpt.startLine + 1);
     const rangeLabel = requested.end === void 0 ? `lines ${requested.start}\u2013end` : requested.start === requested.end ? `line ${requested.start}` : `lines ${requested.start}\u2013${requested.end}`;
-    return /* @__PURE__ */ jsxs("section", { className: "overflow-hidden rounded-lg border border-muted bg-surface", children: [
-      /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-x-hsp-md border-b border-muted px-hsp-lg py-vsp-2xs text-caption", children: [
-        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-x-hsp-xs font-mono text-fg", children: [
-          /* @__PURE__ */ jsx(AssetFileIcon, { className: "h-icon-sm w-icon-sm shrink-0" }),
+    return /* @__PURE__ */ jsxs("section", { class: "overflow-hidden rounded-lg border border-muted bg-surface", children: [
+      /* @__PURE__ */ jsxs("header", { class: "flex items-center justify-between gap-x-hsp-md border-b border-muted px-hsp-lg py-vsp-2xs text-caption", children: [
+        /* @__PURE__ */ jsxs("span", { class: "flex min-w-0 items-center gap-x-hsp-xs font-mono text-fg", children: [
+          /* @__PURE__ */ jsx(AssetFileIcon, { class: "h-icon-sm w-icon-sm shrink-0" }),
           /* @__PURE__ */ jsx("span", { children: title ?? resolved.path })
         ] }),
-        /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted", children: rangeLabel })
+        /* @__PURE__ */ jsx("span", { class: "shrink-0 text-muted", children: rangeLabel })
       ] }),
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: "overflow-x-auto bg-code-bg text-code-fg text-caption",
-          dangerouslySetInnerHTML: { __html: excerpt.html }
+          class: "overflow-x-auto bg-code-bg text-code-fg text-caption",
+          rawHtml: excerpt.html
         }
       ),
-      /* @__PURE__ */ jsxs("footer", { className: "flex flex-wrap items-center justify-between gap-x-hsp-md gap-y-vsp-3xs border-t border-muted px-hsp-lg py-vsp-2xs text-caption text-muted", children: [
+      /* @__PURE__ */ jsxs("footer", { class: "flex flex-wrap items-center justify-between gap-x-hsp-md gap-y-vsp-3xs border-t border-muted px-hsp-lg py-vsp-2xs text-caption text-muted", children: [
         /* @__PURE__ */ jsx("span", { children: assetComponentText(
           context,
           "asset.showingLines",
@@ -74,7 +74,7 @@ function createAssetCode(context) {
         /* @__PURE__ */ jsxs(
           "a",
           {
-            className: "text-fg hover:text-accent focus-visible:text-accent hover:underline focus-visible:underline",
+            class: "text-fg hover:text-accent focus-visible:text-accent hover:underline focus-visible:underline",
             href: viewerHref,
             children: [
               assetComponentText(

package/dist/asset-components/shared.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 { AssetIndexEntry, AssetManifest } from "../route-context-payload/types.js";
 export interface AssetComponentContext {
     base: string;
@@ -22,8 +21,8 @@ export declare function resolveAssetEntry(src: string, context: AssetComponentCo
 } | null;
 export declare function formatAssetBytes(bytes: number): string;
 export declare function formatAssetLanguage(language: string | undefined): string;
-export declare function AssetFileIcon({ className, }: {
-    className?: string;
+export declare function AssetFileIcon({ class: className, }: {
+    class?: string;
 }): JSX.Element;
 export declare function MissingAssetWarning({ children, }: {
     children: string;

package/dist/asset-components/shared.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "preact/jsx-runtime";
+import { jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import { decodeAuthoredHref } from "../asset-path/index.js";
 function assetComponentViewerLocale(context, path) {
   if (context.isDefaultLocaleOnlyPath?.(`/${context.routePrefix}/${path}`)) {
@@ -53,12 +53,12 @@ function formatAssetLanguage(language) {
   return known[language.toLowerCase()] ?? language;
 }
 function AssetFileIcon({
-  className
+  class: className
 }) {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
-      className,
+      class: className,
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
@@ -79,7 +79,7 @@ function MissingAssetWarning({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "rounded border border-warning/30 bg-warning/5 px-hsp-lg py-vsp-xs text-small text-warning",
+      class: "rounded border border-warning/30 bg-warning/5 px-hsp-lg py-vsp-xs text-small text-warning",
       role: "status",
       children
     }

package/dist/asset-index-page/body.d.ts

@@ -1,6 +1,5 @@
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import type { ComponentType, VNode } from "preact";
+import type { Child, Component } from "@takazudo/zfb/zudo-react";
 import type { AssetIndexEntry } from "../route-context-payload/types.js";
 import { type AssetTreeNode } from "./tree.js";
 /**
@@ -43,8 +42,8 @@ export interface AssetIndexPageLabels {
  * own strings even when `t` itself falls back internally.
  */
 export declare function resolveAssetIndexPageLabels(t: (key: string, locale?: string) => string, locale: string): AssetIndexPageLabels;
-export declare function iconFor(asset: AssetIndexEntry): ComponentType<{
-    className?: string;
+export declare function iconFor(asset: AssetIndexEntry): Component<{
+    class?: string;
 }>;
 export declare function AssetTree({ node, base, routePrefix, locale, fileCountLabel, fileCountSingleLabel, linesLabel, root }: {
     node: AssetTreeNode;
@@ -55,7 +54,7 @@ export declare function AssetTree({ node, base, routePrefix, locale, fileCountLa
     fileCountSingleLabel: string;
     linesLabel: string;
     root?: boolean;
-}): VNode;
+}): Child;
 export interface AssetIndexPageBodyProps {
     /** Every asset entry in the index. */
     entries: AssetIndexEntry[];
@@ -77,4 +76,4 @@ export interface AssetIndexPageBodyProps {
  * `DocLayoutWithDefaults`'s children before the #4223 split. Plain props
  * only, no `ChromeContext`.
  */
-export declare function AssetIndexPageBody({ entries, labels, base, routePrefix, dir, locale }: AssetIndexPageBodyProps): VNode;
+export declare function AssetIndexPageBody({ entries, labels, base, routePrefix, dir, locale }: AssetIndexPageBodyProps): Child;