@takazudo/zudo-doc 5.28.2 → 6.0.1

package/dist/home-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 { TagItem } from "../nav-indexing/types.js";
 import type { DocNavNode } from "../doc-page-props/index.js";
 import type { ChromeContext } from "../factory-context/index.js";
@@ -25,7 +25,7 @@ export interface HomePageViewProps {
      * from it (a renderer). Resolved as `extras ?? hostBindings.homeExtras?.({
      * locale })`.
      */
-    extras?: ComponentChildren;
+    extras?: Child;
     /**
      * Overrides the default first hero link, which is otherwise
      * `settings.headerNav[0]` + `t("nav.overview", locale)`. `path` is

package/dist/home-page/index.js

@@ -1,5 +1,4 @@
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
-import { Fragment as Fragment2 } from "preact";
+import { Fragment, jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import { Island } from "@takazudo/zfb";
 import { AutoLogo } from "../auto-logo/index.js";
 import { DocLayoutWithDefaults } from "../doclayout/index.js";
@@ -23,7 +22,7 @@ function HomeMetaLink({ href, children }) {
       href,
       class: "group inline-flex items-center gap-hsp-xs text-small text-fg hover:text-accent hover:underline focus-visible:text-accent focus-visible:underline",
       children: [
-        /* @__PURE__ */ jsx(CategoryLinkIcon, { className: "w-icon-sm text-muted group-hover:text-accent group-focus-visible:text-accent" }),
+        /* @__PURE__ */ jsx(CategoryLinkIcon, { class: "w-icon-sm text-muted group-hover:text-accent group-focus-visible:text-accent" }),
         /* @__PURE__ */ jsx("span", { children })
       ]
     }
@@ -52,6 +51,10 @@ function selectSecondaryNodes(tree, secondary, categoryIgnore) {
 function cssUrl(url) {
   return `url("${url.replace(/[\\"]/g, "\\$&")}")`;
 }
+function logoMaskStyle(url) {
+  const mask = `${cssUrl(url)} center/contain no-repeat`;
+  return { "-webkit-mask": mask, mask };
+}
 function createHomePageView(ctx) {
   assertChromeContext(ctx, "createHomePageView");
   const settings = ctx.settings;
@@ -131,6 +134,11 @@ function createHomePageView(ctx) {
     if (hasExtras) {
       rowItems.push(resolvedExtras);
     }
+    const rowContent = [];
+    rowItems.forEach((item, index) => {
+      if (index > 0) rowContent.push(/* @__PURE__ */ jsx("span", { class: "text-muted", children: "/" }));
+      rowContent.push(item);
+    });
     return /* @__PURE__ */ jsxs(
       DocLayoutWithDefaults,
       {
@@ -149,7 +157,7 @@ function createHomePageView(ctx) {
         bodyEndComponents: /* @__PURE__ */ jsx(BodyEndIslands, { basePath: settings.base ?? "/" }),
         enableClientRouter: settings.dynamicPageTransition,
         children: [
-          /* @__PURE__ */ jsx("div", { class: "zd-home-hero mb-vsp-xl", children: /* @__PURE__ */ jsxs("div", { class: "zd-home-inner flex flex-col items-center justify-center text-center gap-hsp-md lg:flex-row lg:text-left lg:gap-hsp-xl", children: [
+          /* @__PURE__ */ jsx("div", { "data-zd-home-hero": true, class: "mb-vsp-xl", children: /* @__PURE__ */ jsxs("div", { class: "zd-home-inner flex flex-col items-center justify-center text-center gap-hsp-md lg:flex-row lg:text-left lg:gap-hsp-xl", children: [
             logoSetting === "auto" ? /* @__PURE__ */ jsx(
               AutoLogo,
               {
@@ -160,28 +168,22 @@ function createHomePageView(ctx) {
               "div",
               {
                 class: "w-[320px] max-w-full aspect-[1200/630] bg-fg shrink-0",
-                style: {
-                  WebkitMask: `${cssUrl(withBase(logoSetting))} center/contain no-repeat`,
-                  mask: `${cssUrl(withBase(logoSetting))} center/contain no-repeat`
-                },
+                style: logoMaskStyle(withBase(logoSetting)),
                 "aria-hidden": "true"
               }
             ) : null,
             /* @__PURE__ */ jsxs("div", { class: "zd-home-copy min-w-0 lg:flex-1", children: [
-              /* @__PURE__ */ jsx("h1", { class: "text-heading font-bold mb-vsp-2xs wrap-anywhere", children: settings.siteName }),
+              /* @__PURE__ */ jsx("h1", { class: "text-heading font-bold mb-vsp-2xs zd-wrap-anywhere", children: settings.siteName }),
               /* @__PURE__ */ jsx("p", { class: "text-muted text-small mb-vsp-sm", children: rawDescription }),
-              /* @__PURE__ */ jsx("div", { class: "zd-home-links flex flex-wrap items-center justify-center lg:justify-start gap-hsp-md text-small", children: rowItems.map((item, index) => /* @__PURE__ */ jsxs(Fragment2, { children: [
-                index > 0 && /* @__PURE__ */ jsx("span", { class: "text-muted", children: "/" }),
-                item
-              ] }, index)) })
+              /* @__PURE__ */ jsx("div", { class: "zd-home-links flex flex-wrap items-center justify-center lg:justify-start gap-hsp-md text-small", children: rowContent })
             ] })
           ] }) }),
           hasIntro && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("hr", { class: "zd-home-rule", "data-home-rule": "upper" }),
-            /* @__PURE__ */ jsx("div", { class: "zd-home-intro", children: /* @__PURE__ */ jsx("div", { class: "zd-home-inner", children: /* @__PURE__ */ jsx(CompactProse, { intro }) }) })
+            /* @__PURE__ */ jsx("div", { "data-zd-home-intro": true, children: /* @__PURE__ */ jsx("div", { class: "zd-home-inner", children: /* @__PURE__ */ jsx(CompactProse, { intro }) }) })
           ] }),
           /* @__PURE__ */ jsx("hr", { class: "zd-home-rule", "data-home-rule": "lower" }),
-          /* @__PURE__ */ jsxs("section", { class: "zd-home-sitemap", children: [
+          /* @__PURE__ */ jsxs("section", { "data-zd-home-sitemap": true, children: [
             /* @__PURE__ */ jsx(HomeSectionHeading, { children: sitemapHeading }),
             Island({
               when: "idle",
@@ -191,7 +193,7 @@ function createHomePageView(ctx) {
                   tree,
                   categoryOrder,
                   categoryIgnore: [...categoryIgnore, ...movedNodes.map((n) => n.slug)],
-                  initiallyCollapsedCategorySlugs,
+                  ...initiallyCollapsedCategorySlugs !== void 0 ? { initiallyCollapsedCategorySlugs } : {},
                   locale,
                   updatedLabel: t("doc.updated", locale),
                   dateFormats: dateFormatsFor(locale)
@@ -210,7 +212,7 @@ function createHomePageView(ctx) {
           ] }),
           settings.docTags && tagCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("hr", { class: "zd-home-rule", "data-home-rule": "tags" }),
-            /* @__PURE__ */ jsx("section", { class: "zd-home-tags", children: tags && tags.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("section", { "data-zd-home-tags": true, children: tags && tags.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(HomeSectionHeading, { children: t("doc.tags", locale) }),
               /* @__PURE__ */ jsx(
                 TagNav,

package/dist/html-preview-wrapper/highlighted-code.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 HighlightedCodeProps {
     code: string;
     language: string;
@@ -10,6 +9,6 @@ export interface HighlightedCodeProps {
  * Falls back to a plain `<pre><code>` block while the runtime is loading or
  * when the current request cannot produce safe markup.
  *
- * JSX port of src/components/html-preview/highlighted-code.tsx.
+ * The runtime request is scoped to the current source panel mount.
  */
-export declare function HighlightedCode({ code, language, }: HighlightedCodeProps): VNode;
+export declare function HighlightedCode({ code, language, }: HighlightedCodeProps): Child;

package/dist/html-preview-wrapper/highlighted-code.js

@@ -1,31 +1,33 @@
-import { jsx } from "preact/jsx-runtime";
-import { useEffect, useState } from "preact/hooks";
+import { jsx } from "@takazudo/zfb/zudo-react/jsx-runtime";
+import {
+  computed,
+  getScope,
+  signal,
+  Show
+} from "@takazudo/zfb/zudo-react";
 import { startHighlightRequest } from "./highlight-runtime.js";
 function HighlightedCode({
   code,
   language
 }) {
-  const [highlighted, setHighlighted] = useState(null);
-  const html = highlighted?.code === code && highlighted.language === language ? highlighted.html : null;
-  useEffect(() => {
-    return startHighlightRequest({
+  const scope = getScope();
+  const highlighted = signal(null);
+  scope.onActivate(
+    () => startHighlightRequest({
       code,
       language,
       onSettled(nextHtml) {
-        setHighlighted(
-          nextHtml == null ? null : { code, language, html: nextHtml }
-        );
+        highlighted.value = nextHtml;
       }
-    });
-  }, [code, language]);
-  if (!html) {
-    return /* @__PURE__ */ jsx("pre", { class: "m-0 p-hsp-md bg-code-bg text-caption leading-relaxed overflow-x-auto", children: /* @__PURE__ */ jsx("code", { class: "font-mono whitespace-pre", children: code }) });
-  }
+    })
+  );
+  const html = computed(() => highlighted.value);
   return /* @__PURE__ */ jsx(
-    "div",
+    Show,
     {
-      class: "zd-html-preview-code",
-      dangerouslySetInnerHTML: { __html: html }
+      when: computed(() => html.value != null),
+      fallback: () => /* @__PURE__ */ jsx("pre", { class: "m-0 p-hsp-md bg-code-bg text-caption leading-relaxed overflow-x-auto", children: /* @__PURE__ */ jsx("code", { class: "font-mono whitespace-pre", children: code }) }),
+      children: () => /* @__PURE__ */ jsx("div", { class: "zd-html-preview-code", rawHtml: html })
     }
   );
 }

package/dist/html-preview-wrapper/html-preview-wrapper.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 HtmlPreviewLabels } from "./html-preview.js";
 /**
  * Global HTML preview configuration. Mirrors the `settings.htmlPreview`
@@ -19,7 +18,7 @@ export interface HtmlPreviewWrapperProps {
     /**
      * Controls when the preview subtree is rendered.
      *
-     * `"eager"` (and omission) preserves the server-rendered iframe and
+     * `"eager"` (and omission) preserves the server-rendered preview host and
      * hydrates it when visible. `"visible"` emits only an inert height
      * reservation during SSR and renders the preview on the client through
      * zfb's skip-SSR island path.
@@ -130,7 +129,7 @@ type HtmlPreviewWrapperInnerProps = Omit<HtmlPreviewWrapperProps, "loading">;
  * Merges global (`settings.htmlPreview`) config with per-usage props and
  * forwards everything to `<HtmlPreview>`. Renders the preview tree
  * **directly**: it does NOT wrap itself in `<Island>`. `HtmlPreviewWrapper`
- * below applies the `<Island when="visible">` wrapper around it.
+ * in `wrapper.tsx` applies the `<Island when="visible">` wrapper around it.
  *
  * ## Island invariant (read before touching the displayName / Island wiring)
  *
@@ -151,28 +150,8 @@ type HtmlPreviewWrapperInnerProps = Omit<HtmlPreviewWrapperProps, "loading">;
  * (`HtmlPreviewWrapperInner`) and is exported, so the marker resolves to
  * THIS bare component and the bundle hydrates it in-place.
  */
-export declare function HtmlPreviewWrapperInner(props: HtmlPreviewWrapperInnerProps): VNode;
+export declare function HtmlPreviewWrapperInner(props: HtmlPreviewWrapperInnerProps): Child;
 export declare namespace HtmlPreviewWrapperInner {
     var displayName: string;
 }
-/**
- * HTML preview wrapper component — the public MDX-registered binding
- * (`HtmlPreview: HtmlPreviewWrapper`).
- *
- * Eager mode wraps the bare `HtmlPreviewWrapperInner` in
- * `<Island when="visible">`, mirroring the legacy `client:visible` hydration
- * timing while preserving the complete server-rendered preview. Visible mode
- * uses zfb's skip-SSR fallback path: static output contains only an inert
- * nonzero reservation, while the real serializable inner props remain on the
- * island marker for the client mount. zfb intentionally mounts skip-SSR
- * islands immediately, so the bare inner target keeps that reservation in
- * place and applies its own one-shot IntersectionObserver gate before it
- * instantiates the preview subtree; missing observer support fails open.
- *
- * The public export name and signature are unchanged from before the
- * zudolab/zudo-doc#1925 fix, so existing consumers that register
- * `HtmlPreview: HtmlPreviewWrapper` keep working (and now hydrate correctly)
- * with no call-site change.
- */
-export declare function HtmlPreviewWrapper(props: HtmlPreviewWrapperProps): VNode;
 export {};

package/dist/html-preview-wrapper/html-preview-wrapper.js

@@ -1,63 +1,8 @@
 "use client";
-import { jsx } from "preact/jsx-runtime";
-import { useEffect, useRef, useState } from "preact/hooks";
-import { Island } from "@takazudo/zfb";
+import { jsx } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import { HtmlPreview } from "./html-preview.js";
-const VISIBLE_MOUNT_PROP = "__zudoDocVisibleMount";
-function reservationHeight(height) {
-  return height != null && height > 0 ? height : 200;
-}
-function HtmlPreviewReservation({
-  height,
-  reservationRef
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: reservationRef,
-      "aria-hidden": "true",
-      "data-zd-html-preview-reservation": true,
-      style: { height: reservationHeight(height) }
-    }
-  );
-}
 function HtmlPreviewWrapperInner(props) {
-  const runtimeProps = props;
-  const deferUntilVisible = runtimeProps[VISIBLE_MOUNT_PROP] === true;
-  const reservationRef = useRef(null);
-  const [shouldRenderPreview, setShouldRenderPreview] = useState(
-    !deferUntilVisible || typeof globalThis.IntersectionObserver !== "function"
-  );
-  useEffect(() => {
-    if (shouldRenderPreview) return;
-    if (!deferUntilVisible) {
-      setShouldRenderPreview(true);
-      return;
-    }
-    const target = reservationRef.current;
-    const Observer = globalThis.IntersectionObserver;
-    if (!target || typeof Observer !== "function") {
-      setShouldRenderPreview(true);
-      return;
-    }
-    let fired = false;
-    const observer = new Observer(
-      (entries) => {
-        if (fired || !entries.some((entry) => entry.isIntersecting)) return;
-        fired = true;
-        observer.disconnect();
-        setShouldRenderPreview(true);
-      },
-      { threshold: 0 }
-    );
-    observer.observe(target);
-    return () => {
-      fired = true;
-      observer.disconnect();
-    };
-  }, [deferUntilVisible, shouldRenderPreview]);
   const {
-    [VISIBLE_MOUNT_PROP]: _visibleMount,
     globalConfig,
     html,
     css,
@@ -76,16 +21,7 @@ function HtmlPreviewWrapperInner(props) {
     externalScripts,
     preflight,
     showResources
-  } = runtimeProps;
-  if (!shouldRenderPreview) {
-    return /* @__PURE__ */ jsx(
-      HtmlPreviewReservation,
-      {
-        height,
-        reservationRef
-      }
-    );
-  }
+  } = props;
   const mergedHead = [globalConfig?.head, head].filter(Boolean).join("\n") || void 0;
   const mergedCss = [globalConfig?.css, css].filter(Boolean).join("\n") || void 0;
   const mergedJs = [globalConfig?.js, js].filter(Boolean).join("\n") || void 0;
@@ -116,27 +52,6 @@ function HtmlPreviewWrapperInner(props) {
   );
 }
 HtmlPreviewWrapperInner.displayName = "HtmlPreviewWrapperInner";
-function HtmlPreviewWrapper(props) {
-  const { loading = "eager", ...innerProps } = props;
-  if (loading === "visible") {
-    const visibleInnerProps = {
-      ...innerProps,
-      [VISIBLE_MOUNT_PROP]: true
-    };
-    const rendered2 = Island({
-      when: "visible",
-      ssrFallback: /* @__PURE__ */ jsx(HtmlPreviewReservation, { height: innerProps.height }),
-      children: /* @__PURE__ */ jsx(HtmlPreviewWrapperInner, { ...visibleInnerProps })
-    });
-    return rendered2;
-  }
-  const rendered = Island({
-    when: "visible",
-    children: /* @__PURE__ */ jsx(HtmlPreviewWrapperInner, { ...innerProps })
-  });
-  return rendered;
-}
 export {
-  HtmlPreviewWrapper,
   HtmlPreviewWrapperInner
 };

package/dist/html-preview-wrapper/html-preview.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 HtmlPreviewLabels } from "./preview-base.js";
 export type { HtmlPreviewLabels } from "./preview-base.js";
 export interface HtmlPreviewProps {
@@ -151,12 +150,6 @@ export declare function buildSrcdoc(html: string, css?: string, head?: string, j
  * HTML preview widget — renders an isolated iframe with viewport
  * controls and a collapsible code section.
  *
- * JSX port of src/components/html-preview/html-preview.tsx with
- * React → Preact hook imports.
- *
- * Requires client-side JS (iframe load events, height sync, code
- * toggle). Mount as an island via `<HtmlPreview client:visible />` in
- * Astro, or wire up the SSR-skip placeholder pattern for non-Astro
- * consumers.
+ * Pure setup for the preview island; iframe lifecycle belongs to PreviewBase.
  */
-export declare function HtmlPreview({ html, css, head, js, title, lang, height, defaultOpen, labels, showSource, showViewportControls, fullHeight, sandbox, componentCss, componentHead, componentJs, externalStyles, externalScripts, preflight, showResources, }: HtmlPreviewProps): VNode;
+export declare function HtmlPreview({ html, css, head, js, title, lang, height, defaultOpen, labels, showSource, showViewportControls, fullHeight, sandbox, componentCss, componentHead, componentJs, externalStyles, externalScripts, preflight, showResources, }: HtmlPreviewProps): Child;

package/dist/html-preview-wrapper/html-preview.js

@@ -1,5 +1,4 @@
-import { jsx } from "preact/jsx-runtime";
-import { useMemo } from "preact/hooks";
+import { jsx } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import {
   PreviewBase
 } from "./preview-base.js";
@@ -92,37 +91,22 @@ function HtmlPreview({
   preflight,
   showResources
 }) {
-  const srcdoc = useMemo(
-    () => buildSrcdoc(
-      html,
-      css,
-      head,
-      js,
-      fullHeight,
-      externalStyles,
-      externalScripts,
-      preflight,
-      { lang, title, previewLabel: labels?.preview }
-    ),
-    [
-      html,
-      css,
-      head,
-      js,
-      fullHeight,
-      externalStyles,
-      externalScripts,
-      preflight,
-      lang,
-      title,
-      labels?.preview
-    ]
+  const srcdoc = buildSrcdoc(
+    html,
+    css,
+    head,
+    js,
+    fullHeight,
+    externalStyles,
+    externalScripts,
+    preflight,
+    { lang, title, previewLabel: labels?.preview }
   );
   const hasScripts = containsScript(head, js, externalScripts);
   const syncDelay = hasScripts ? 300 : 0;
   const sandboxValue = resolveSandbox(sandbox, hasScripts);
   const sandboxAttributeValue = sandboxValue === "" ? " " : sandboxValue;
-  const codeBlocks = useMemo(() => {
+  const codeBlocks = (() => {
     const resourceLines = showResources ? [
       ...(externalStyles ?? []).map(
         (href) => `<link rel="stylesheet" href="${href}">`
@@ -146,15 +130,7 @@ ${dedent(html)}` : dedent(html);
         }
       ] : []
     ];
-  }, [
-    html,
-    componentCss,
-    componentHead,
-    componentJs,
-    showResources,
-    externalStyles,
-    externalScripts
-  ]);
+  })();
   return /* @__PURE__ */ jsx(
     PreviewBase,
     {

package/dist/html-preview-wrapper/index.d.ts

@@ -1,4 +1,5 @@
-export { HtmlPreviewWrapper, HtmlPreviewWrapperInner, } from "./html-preview-wrapper.js";
+export { HtmlPreviewWrapperInner, } from "./html-preview-wrapper.js";
+export { HtmlPreviewWrapper } from "./wrapper.js";
 export type { HtmlPreviewWrapperProps, HtmlPreviewGlobalConfig, } from "./html-preview-wrapper.js";
 export { HtmlPreview } from "./html-preview.js";
 export type { HtmlPreviewProps } from "./html-preview.js";

package/dist/html-preview-wrapper/index.js

@@ -1,7 +1,7 @@
 import {
-  HtmlPreviewWrapper,
   HtmlPreviewWrapperInner
 } from "./html-preview-wrapper.js";
+import { HtmlPreviewWrapper } from "./wrapper.js";
 import { HtmlPreview } from "./html-preview.js";
 import { PreviewBase } from "./preview-base.js";
 import { HighlightedCode } from "./highlighted-code.js";

package/dist/html-preview-wrapper/preview-base.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 CodeBlockData {
     language: string;
     title: string;
@@ -39,7 +38,6 @@ export interface PreviewBaseProps {
  * Interactive preview base: iframe viewport switcher + collapsible code
  * section.
  *
- * JSX port of src/components/html-preview/preview-base.tsx with
- * React → Preact hook imports and `className` → `class` attribute.
+ * The native iframe is rendered during SSR and hydrated by zudo-react.
  */
-export declare function PreviewBase({ title, height, srcdoc, sandbox, syncDelay, codeBlocks, defaultOpen, labels, showSource, showViewportControls, autoHeight, }: PreviewBaseProps): VNode;
+export declare function PreviewBase({ title, height, srcdoc, sandbox, syncDelay, codeBlocks, defaultOpen, labels, showSource, showViewportControls, autoHeight, }: PreviewBaseProps): Child;