@takazudo/zudo-doc 5.28.2 → 6.0.0

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;

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

@@ -1,9 +1,12 @@
-import { jsx, jsxs } from "preact/jsx-runtime";
-import { useEffect, useRef, useState } from "preact/hooks";
-import { HighlightedCode } from "./highlighted-code.js";
+import { jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import {
-  createPreviewAutoHeightController
-} from "./preview-auto-height.js";
+  computed,
+  getScope,
+  signal,
+  Show
+} from "@takazudo/zfb/zudo-react";
+import { HighlightedCode } from "./highlighted-code.js";
+import { createPreviewAutoHeightController } from "./preview-auto-height.js";
 const DEFAULT_LABELS = {
   mobile: "Mobile",
   tablet: "Tablet",
@@ -49,52 +52,44 @@ function PreviewBase({
   const sourceVisible = showSource ?? true;
   const viewportControlsVisible = showViewportControls ?? true;
   const viewports = viewportControlsVisible ? buildViewports(resolvedLabels) : DEFAULT_VIEWPORTS;
-  const [activeViewport, setActiveViewport] = useState(2);
-  const [codeOpen, setCodeOpen] = useState(
-    sourceVisible && (defaultOpen ?? false)
-  );
-  const [iframeHeight, setIframeHeight] = useState(height ?? 200);
-  const iframeRef = useRef(null);
-  const iframeHeightRef = useRef(iframeHeight);
-  const autoHeightControllerRef = useRef(
-    null
-  );
-  iframeHeightRef.current = iframeHeight;
+  const scope = getScope();
+  const activeViewport = signal(2);
+  const codeOpen = signal(sourceVisible && (defaultOpen ?? false));
+  const iframeHeight = signal(height ?? 200);
+  const iframeRef = { current: null };
   const autoHeightEnabled = (autoHeight ?? true) && height == null;
-  useEffect(() => {
-    const iframe = iframeRef.current;
-    if (!iframe || !autoHeightEnabled) return;
-    const controller = createPreviewAutoHeightController({
-      iframe,
+  let controller = null;
+  scope.onActivate(() => {
+    const frame = iframeRef.current;
+    if (!frame || !autoHeightEnabled) return;
+    const nextController = createPreviewAutoHeightController({
+      iframe: frame,
       syncDelay,
-      getCurrentHeight: () => iframeHeightRef.current,
+      getCurrentHeight: () => iframeHeight.value,
       setHeight: (nextHeight) => {
-        iframeHeightRef.current = nextHeight;
-        setIframeHeight(nextHeight);
+        iframeHeight.value = nextHeight;
       }
     });
-    autoHeightControllerRef.current = controller;
-    const onLoad = () => controller.handleLoad();
-    iframe.addEventListener("load", onLoad);
+    controller = nextController;
+    const onLoad = () => nextController.handleLoad();
+    frame.addEventListener("load", onLoad);
     try {
-      if (iframe.contentDocument?.readyState === "complete") {
-        controller.handleLoad();
-      }
+      if (frame.contentDocument?.readyState === "complete") nextController.handleLoad();
     } catch {
     }
     return () => {
-      iframe.removeEventListener("load", onLoad);
-      controller.destroy();
-      if (autoHeightControllerRef.current === controller) {
-        autoHeightControllerRef.current = null;
-      }
+      frame.removeEventListener("load", onLoad);
+      nextController.destroy();
+      controller = null;
     };
-  }, [autoHeightEnabled, srcdoc, syncDelay]);
-  useEffect(() => {
-    if (!autoHeightEnabled) return;
-    autoHeightControllerRef.current?.schedule();
-  }, [activeViewport, autoHeightEnabled]);
-  const containerWidth = viewportControlsVisible ? viewports[activeViewport]?.width ?? "100%" : "100%";
+  });
+  scope.effect(() => {
+    activeViewport.value;
+    if (autoHeightEnabled) controller?.schedule();
+  });
+  const containerWidth = computed(
+    () => viewportControlsVisible ? viewports[activeViewport.value]?.width ?? "100%" : "100%"
+  );
   return /* @__PURE__ */ jsxs("div", { class: "border border-muted rounded-lg overflow-hidden my-vsp-md", children: [
     (viewportControlsVisible || title) && /* @__PURE__ */ jsxs("div", { class: "flex items-center justify-between px-hsp-md py-hsp-sm bg-surface border-b border-muted gap-hsp-sm flex-wrap", children: [
       title && /* @__PURE__ */ jsx("span", { class: "text-caption font-semibold text-fg", children: title }),
@@ -108,12 +103,13 @@ function PreviewBase({
             "button",
             {
               type: "button",
-              class: `min-h-[44px] min-w-[44px] px-hsp-sm py-hsp-2xs text-caption border rounded-full cursor-pointer transition-[background,color,border-color] duration-150 leading-snug ${i === activeViewport ? "bg-accent text-bg border-accent hover:bg-accent-hover hover:border-accent-hover" : "bg-transparent text-muted border-muted hover:bg-[color-mix(in_srgb,var(--color-surface)_80%,var(--color-fg)_20%)]"}`,
-              "aria-pressed": i === activeViewport,
-              onClick: () => setActiveViewport(i),
+              class: computed(() => `min-h-[44px] min-w-[44px] px-hsp-sm py-hsp-2xs text-caption border rounded-full cursor-pointer transition-[background,color,border-color] duration-150 leading-snug ${i === activeViewport.value ? "bg-accent text-bg border-accent hover:bg-accent-hover hover:border-accent-hover" : "bg-transparent text-muted border-muted hover:bg-[color-mix(in_srgb,var(--color-surface)_80%,var(--color-fg)_20%)]"}`),
+              "aria-pressed": computed(() => i === activeViewport.value),
+              "on:click": () => {
+                activeViewport.value = i;
+              },
               children: vp.label
-            },
-            vp.label
+            }
           ))
         }
       )
@@ -122,16 +118,16 @@ function PreviewBase({
       "div",
       {
         class: "resize-x overflow-auto max-w-full mx-auto",
-        style: { width: containerWidth },
+        style: computed(() => ({ width: containerWidth.value })),
         children: /* @__PURE__ */ jsx(
           "iframe",
           {
             ref: iframeRef,
-            class: "block w-full border-none bg-[#fff] rounded shadow-[0_1px_3px_color-mix(in_srgb,var(--color-fg)_8%,transparent)]",
-            srcDoc: srcdoc,
-            sandbox,
-            style: { height: height ?? iframeHeight },
-            title: title ?? resolvedLabels.preview
+            class: "block w-full border-none bg-[#fff] rounded zd-preview-shadow",
+            title: title ?? resolvedLabels.preview,
+            ...sandbox !== void 0 ? { sandbox } : {},
+            srcdoc,
+            style: computed(() => ({ height: `${iframeHeight.value}px` }))
           }
         )
       }
@@ -142,22 +138,24 @@ function PreviewBase({
         {
           type: "button",
           class: "flex min-h-[44px] min-w-[44px] items-center w-full px-hsp-md py-hsp-sm text-caption font-medium text-muted bg-surface border-none cursor-pointer gap-hsp-xs hover:bg-[color-mix(in_srgb,var(--color-surface)_80%,var(--color-fg)_20%)]",
-          onClick: () => setCodeOpen((v) => !v),
+          "on:click": () => {
+            codeOpen.value = !codeOpen.value;
+          },
           "aria-expanded": codeOpen,
           children: [
             /* @__PURE__ */ jsx(
               "span",
               {
-                class: `text-caption transition-transform duration-200 ${codeOpen ? "rotate-90" : ""}`,
+                class: computed(() => `text-caption transition-transform duration-200 ${codeOpen.value ? "rotate-90" : ""}`),
                 "aria-hidden": "true",
                 children: "\u25B6"
               }
             ),
-            codeOpen ? resolvedLabels.hideCode : resolvedLabels.showCode
+            computed(() => codeOpen.value ? resolvedLabels.hideCode : resolvedLabels.showCode)
           ]
         }
       ),
-      codeOpen && /* @__PURE__ */ jsx("div", { children: codeBlocks.map((block, idx) => /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(Show, { when: codeOpen, children: () => /* @__PURE__ */ jsx("div", { children: codeBlocks.map((block, idx) => /* @__PURE__ */ jsxs(
         "div",
         {
           class: `overflow-x-auto ${idx > 0 ? "border-t border-muted" : ""}`,
@@ -165,9 +163,8 @@ function PreviewBase({
             /* @__PURE__ */ jsx("span", { class: "block px-hsp-md py-hsp-xs text-caption font-semibold text-muted bg-surface border-b border-muted uppercase tracking-wider", children: block.title }),
             /* @__PURE__ */ jsx(HighlightedCode, { code: block.code, language: block.language })
           ]
-        },
-        block.title
-      )) })
+        }
+      )) }) })
     ] })
   ] });
 }