@takazudo/zudo-doc 5.28.2 → 6.0.0

package/dist/smart-break/index.d.ts

@@ -1,6 +1,5 @@
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import type { VNode } from "preact";
+import type { Child } from "@takazudo/zfb/zudo-react";
 /**
  * Heuristic: does `text` look like a URL, filesystem path, or similar
  * structure where inserting <wbr> after delimiters aids line-wrapping?
@@ -20,14 +19,14 @@ export declare function isPathLike(text: string): boolean;
  * the input string unchanged so callers can trust non-path prose passes
  * through untouched.
  */
-export declare function smartBreak(text: string): VNode | string;
+export declare function smartBreak(text: string): Child;
 /**
  * Preact function component wrapper — pure, server-renderable.
  * Stringifies children and defers to smartBreak.
  */
 export declare function SmartBreak({ children }: {
     children?: unknown;
-}): VNode;
+}): Child;
 /**
  * HTML-escape `text` and inject a literal "<wbr>" tag after every
  * delimiter character. Unlike smartBreakToHtml, this does NOT check

package/dist/smart-break/index.js

@@ -1,4 +1,4 @@
-import { Fragment, jsx } from "preact/jsx-runtime";
+import { Fragment, jsx } from "@takazudo/zfb/zudo-react/jsx-runtime";
 function isPathLike(text) {
   if (!text) return false;
   if (text.includes("://")) return true;

package/dist/tab-item/tab-item.d.ts

@@ -1,6 +1,5 @@
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import type { ComponentChildren } from "preact";
+import type { Child } from "@takazudo/zfb/zudo-react";
 export interface TabItemProps {
     /** Human-readable label rendered by the parent Tabs trigger row. */
     label: string;
@@ -16,7 +15,7 @@ export interface TabItemProps {
      */
     default?: boolean;
     /** Panel body. */
-    children?: ComponentChildren;
+    children?: Child;
 }
 /**
  * One tab panel.
@@ -33,5 +32,5 @@ export interface TabItemProps {
  * `[data-tab-default]` and reapplies `hidden` / `aria-selected` so
  * the SSR-rendered defaults survive group sync and View Transitions.
  */
-export declare function TabItem({ label, value, default: isDefault, children, }: TabItemProps): import("preact").JSX.Element;
+export declare function TabItem({ label, value, default: isDefault, children, }: TabItemProps): import("@takazudo/zfb").Description;
 export default TabItem;

package/dist/tab-item/tab-item.js

@@ -1,4 +1,4 @@
-import { jsx } from "preact/jsx-runtime";
+import { jsx } from "@takazudo/zfb/zudo-react/jsx-runtime";
 function TabItem({
   label,
   value,

package/dist/tag-pages/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 { ChromeContext } from "../factory-context/index.js";
 import type { Settings } from "../settings.js";
 import type { DocPageEntry } from "../doc-page-props/index.js";
@@ -95,7 +95,7 @@ export interface TagPagesAPI {
     /** "All Tags" index page — computes the tag map at render time. */
     TagsIndexPageView: (props: {
         locale: string;
-        children?: ComponentChildren;
+        children?: Child;
     }) => JSX.Element;
 }
 /**

package/dist/tag-pages/index.js

@@ -1,4 +1,4 @@
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+import { Fragment, jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import { DocLayoutWithDefaults } from "../doclayout/index.js";
 import { DocCardGrid, TagNav } from "../nav-indexing/index.js";
 import { memoizeDerived } from "../nav-source-cache/index.js";
@@ -76,16 +76,16 @@ function createTagPages(ctx) {
     const cardItems = tagInfo.docs.map((doc) => ({
       href: docsUrl(doc.slug, locale),
       title: doc.title,
-      description: doc.description
+      ...doc.description !== void 0 ? { description: doc.description } : {}
     }));
     return /* @__PURE__ */ jsxs(
       DocLayoutWithDefaults,
       {
         title: composeMetaTitle(pageTitle),
         head: /* @__PURE__ */ jsx(HeadWithDefaults, { title: pageTitle }),
-        lang: isDefault ? void 0 : locale,
-        dataThemePack,
-        noindex: settings.noindex,
+        ...isDefault ? {} : { lang: locale },
+        ...dataThemePack !== void 0 ? { dataThemePack } : {},
+        ...settings.noindex !== void 0 ? { noindex: settings.noindex } : {},
         hideSidebar: true,
         hideToc: true,
         sidebarOverride: /* @__PURE__ */ jsx(Fragment, {}),
@@ -93,7 +93,7 @@ function createTagPages(ctx) {
         breadcrumbOverride: /* @__PURE__ */ jsx(Breadcrumb, { items: breadcrumbItems }),
         footerOverride: /* @__PURE__ */ jsx(FooterWithDefaults, { lang: locale }),
         bodyEndComponents: /* @__PURE__ */ jsx(BodyEndIslands, { basePath: settings.base ?? "/" }),
-        enableClientRouter: settings.dynamicPageTransition,
+        ...settings.dynamicPageTransition !== void 0 ? { enableClientRouter: settings.dynamicPageTransition } : {},
         children: [
           /* @__PURE__ */ jsx("h1", { class: "text-heading font-bold mb-vsp-xs break-words", children: pageTitle }),
           /* @__PURE__ */ jsx("p", { class: "text-muted mb-vsp-lg", children: countText }),
@@ -127,9 +127,9 @@ function createTagPages(ctx) {
       {
         title: composeMetaTitle(pageTitle),
         head: /* @__PURE__ */ jsx(HeadWithDefaults, { title: pageTitle }),
-        lang: isDefault ? void 0 : locale,
-        dataThemePack,
-        noindex: settings.noindex,
+        ...isDefault ? {} : { lang: locale },
+        ...dataThemePack !== void 0 ? { dataThemePack } : {},
+        ...settings.noindex !== void 0 ? { noindex: settings.noindex } : {},
         hideSidebar: true,
         hideToc: true,
         sidebarOverride: /* @__PURE__ */ jsx(Fragment, {}),
@@ -137,7 +137,7 @@ function createTagPages(ctx) {
         breadcrumbOverride: /* @__PURE__ */ jsx(Breadcrumb, { items: breadcrumbItems }),
         footerOverride: /* @__PURE__ */ jsx(FooterWithDefaults, { lang: locale }),
         bodyEndComponents: /* @__PURE__ */ jsx(BodyEndIslands, { basePath: settings.base ?? "/" }),
-        enableClientRouter: settings.dynamicPageTransition,
+        ...settings.dynamicPageTransition !== void 0 ? { enableClientRouter: settings.dynamicPageTransition } : {},
         children: [
           /* @__PURE__ */ jsx("h1", { class: "text-heading font-bold mb-vsp-lg break-words", children: pageTitle }),
           !settings.docTags || tags.length === 0 ? /* @__PURE__ */ jsx("p", { class: "text-muted", children: t("doc.noTags", locale) }) : /* @__PURE__ */ jsx(TagNav, { variant: "all", tags, labels }),

package/dist/theme/color-scheme-provider.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentChildren } from "preact";
+import type { Child } from "@takazudo/zfb/zudo-react";
 /**
  * Subset of the host's `ColorModeConfig` that the v2 provider actually
  * consumes. Kept locally so the v2 package does not need to import a host
@@ -22,6 +22,6 @@ export interface ColorSchemeProviderProps {
      */
     colorMode: ColorSchemeProviderColorMode | null;
     /** Optional children; preserved for forward compatibility. */
-    children?: ComponentChildren;
+    children?: Child;
 }
-export default function ColorSchemeProvider({ cssText, colorMode, }: ColorSchemeProviderProps): import("preact").JSX.Element;
+export default function ColorSchemeProvider({ cssText, colorMode, }: ColorSchemeProviderProps): import("@takazudo/zfb").Description;

package/dist/theme/color-scheme-provider.js

@@ -1,4 +1,4 @@
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+import { Fragment, jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import { AFTER_NAVIGATE_EVENT } from "../transitions/page-events.js";
 import {
   COLOR_SCHEME_CHANGED_EVENT,
@@ -56,8 +56,8 @@ function ColorSchemeProvider({
     Boolean(colorMode.respectPrefersColorScheme)
   ) : null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: cssText } }),
-    bootstrap !== null && /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: bootstrap } })
+    /* @__PURE__ */ jsx("style", { rawHtml: cssText }),
+    bootstrap !== null && /* @__PURE__ */ jsx("script", { rawHtml: bootstrap })
   ] });
 }
 export {

package/dist/theme/theme-pack-provider.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from "preact";
+import type { JSX } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import type { ThemePackRegistry } from "../theme-packs-registry/index.js";
 /**
  * Transient `<html>` attribute the bootstrap sets while the pack stylesheet

package/dist/theme/theme-pack-provider.js

@@ -1,4 +1,4 @@
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+import { Fragment, jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import {
   AFTER_NAVIGATE_EVENT,
   BEFORE_SWAP_EVENT
@@ -105,8 +105,8 @@ function ThemePackProvider({
   const configuredVersion = enabled[configuredSlug];
   const noscriptHref = configuredSlug !== DEFAULT_THEME_PACK_SLUG && configuredVersion !== void 0 ? buildPackCssUrl(base, configuredSlug, configuredVersion) : null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: THEME_PACK_LATCH_CSS } }),
-    /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: bootstrap } }),
+    /* @__PURE__ */ jsx("style", { rawHtml: THEME_PACK_LATCH_CSS }),
+    /* @__PURE__ */ jsx("script", { rawHtml: bootstrap }),
     noscriptHref !== null && /* @__PURE__ */ jsx("noscript", { children: /* @__PURE__ */ jsx("link", { rel: "stylesheet", href: noscriptHref }) })
   ] });
 }

package/dist/theme/theme-toggle.d.ts

@@ -1,6 +1,5 @@
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import type { VNode } from "preact";
+import type { Description } from "@takazudo/zfb/zudo-react";
 import { type ThemeToggleProps } from "../theme-toggle/index.js";
 /**
  * Default-export appearance menu for theme preference. Wraps the bare
@@ -10,4 +9,4 @@ import { type ThemeToggleProps } from "../theme-toggle/index.js";
  * want to control hydration timing themselves) should import the bare
  * component from `@takazudo/zudo-doc/theme-toggle` instead.
  */
-export default function ThemeToggle(props?: ThemeToggleProps): VNode;
+export default function ThemeToggle(props?: ThemeToggleProps): Description;

package/dist/theme/theme-toggle.js

@@ -1,4 +1,4 @@
-import { jsx } from "preact/jsx-runtime";
+import { jsx } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import { Island } from "@takazudo/zfb";
 import {
   ThemeToggle as ThemeToggleBare

package/dist/theme-pack-dialog/index.d.ts

@@ -1,5 +1,5 @@
 import type { ThemePackDialogProps } from "../theme-pack-switcher/index.js";
-export declare function ThemePackDialog({ open, onClose, order, active, base }: ThemePackDialogProps): import("preact").JSX.Element;
+export declare function ThemePackDialog({ open, onClose, order, active, base }: ThemePackDialogProps): import("@takazudo/zfb").Description;
 export declare namespace ThemePackDialog {
     var displayName: string;
 }

package/dist/theme-pack-dialog/index.js

@@ -1,69 +1,70 @@
 "use client";
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "preact/compat";
+import { Fragment, jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
+import { computed, For, getScope, Show, signal } from "@takazudo/zfb/zudo-react";
 import { Close } from "../icons/index.js";
 import { AFTER_NAVIGATE_EVENT } from "../transitions/index.js";
 import { applyThemePack, DEFAULT_THEME_PACK_SLUG } from "../theme-pack-switcher/theme-pack-sync.js";
 import { connectActivePackSync } from "../theme-pack-switcher/switcher-state.js";
-import { useModalDialog } from "../use-modal-dialog/index.js";
+import { modalDialog } from "../use-modal-dialog/index.js";
 import { parseThemePackRegistryPayload, resolveDialogMode } from "./dialog-state.js";
 import { ThemePackCard } from "./theme-pack-card.js";
 const COLOR_SCHEME_CHANGED_EVENT = "color-scheme-changed";
 const LAUNCHER_SELECTOR = "[data-switcher-launcher]";
 function ThemePackDialog({ open, onClose, order, active, base }) {
-  const [registryState, setRegistryState] = useState("idle");
-  const [packs, setPacks] = useState(null);
-  const [mode, setMode] = useState(
-    () => typeof document === "undefined" ? "light" : resolveDialogMode(document.documentElement.getAttribute("data-theme"))
-  );
-  const [activeSlug, setActiveSlug] = useState(active);
-  const launcherFocusRef = useRef(null);
+  const scope = getScope();
+  const registryState = signal("idle");
+  const packs = signal(null);
+  const mode = signal("light");
+  const activeSlug = signal(active);
+  const retryToken = signal(0);
+  const launcherFocusRef = { current: null };
   const hasBrowsablePacks = order.some((entry) => entry.slug !== DEFAULT_THEME_PACK_SLUG);
-  useEffect(() => connectActivePackSync(setActiveSlug), []);
-  useEffect(() => {
-    function sync() {
-      setMode(resolveDialogMode(document.documentElement.getAttribute("data-theme")));
-    }
+  scope.onActivate(() => connectActivePackSync((slug) => {
+    activeSlug.value = slug;
+  }));
+  scope.onActivate(() => {
+    const sync = () => {
+      mode.value = resolveDialogMode(document.documentElement.getAttribute("data-theme"));
+    };
+    sync();
     window.addEventListener(COLOR_SCHEME_CHANGED_EVENT, sync);
     return () => window.removeEventListener(COLOR_SCHEME_CHANGED_EVENT, sync);
-  }, []);
-  useEffect(() => {
-    if (!open) return;
-    launcherFocusRef.current = document.querySelector(LAUNCHER_SELECTOR);
-  }, [open]);
-  const hasOpenedRef = useRef(false);
-  const [fetchToken, setFetchToken] = useState(0);
-  useEffect(() => {
-    if (open && !hasOpenedRef.current) {
-      hasOpenedRef.current = true;
-      if (hasBrowsablePacks) setFetchToken((t) => t + 1);
-    }
-  }, [open, hasBrowsablePacks]);
-  useEffect(() => {
-    if (fetchToken === 0) return;
-    let cancelled = false;
-    setRegistryState("loading");
-    fetch(`${base}theme-packs/index.json`).then((res) => {
+  });
+  scope.effect(() => {
+    if (open.value) launcherFocusRef.current = document.querySelector(LAUNCHER_SELECTOR);
+  });
+  scope.effect(() => {
+    if (!open.value || !hasBrowsablePacks || packs.value !== null) return;
+    retryToken.value;
+    const controller = new AbortController();
+    const abortFromScope = () => controller.abort();
+    scope.abortSignal.addEventListener("abort", abortFromScope, { once: true });
+    registryState.value = "loading";
+    void fetch(`${base}theme-packs/index.json`, { signal: controller.signal }).then((res) => {
       if (!res.ok) throw new Error(`theme-packs/index.json responded ${res.status}`);
       return res.json();
     }).then((data) => {
-      if (cancelled) return;
+      if (controller.signal.aborted || scope.abortSignal.aborted) return;
       const parsed = parseThemePackRegistryPayload(data);
       if (parsed === null) {
-        setRegistryState("error");
+        registryState.value = "error";
         return;
       }
-      setPacks(parsed);
-      setRegistryState("loaded");
+      packs.value = parsed;
+      registryState.value = "loaded";
     }).catch(() => {
-      if (!cancelled) setRegistryState("error");
+      if (!controller.signal.aborted && !scope.abortSignal.aborted) registryState.value = "error";
     });
     return () => {
-      cancelled = true;
+      controller.abort();
+      scope.abortSignal.removeEventListener("abort", abortFromScope);
+      if (registryState.value === "loading") registryState.value = "idle";
     };
-  }, [fetchToken, base]);
-  const retry = useCallback(() => setFetchToken((t) => t + 1), []);
-  const { dialogRef, handleBackdropClick } = useModalDialog({
+  });
+  const retry = () => {
+    retryToken.value++;
+  };
+  const { dialogRef, handleBackdropClick } = modalDialog(scope, {
     isOpen: open,
     onClose,
     navigateEvent: AFTER_NAVIGATE_EVENT,
@@ -75,72 +76,65 @@ function ThemePackDialog({ open, onClose, order, active, base }) {
     "dialog",
     {
       ref: dialogRef,
-      onClick: handleBackdropClick,
+      "on:click": handleBackdropClick,
       "aria-labelledby": "zd-theme-pack-dialog-title",
-      className: "z-modal m-auto max-h-[85vh] w-[calc(100vw-2rem)] max-w-[64rem] rounded-lg border border-muted bg-surface p-0 text-fg backdrop:z-modal-backdrop backdrop:bg-bg/80",
-      children: /* @__PURE__ */ jsxs("div", { className: "flex max-h-[85vh] flex-col", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between gap-hsp-sm border-b border-muted px-hsp-lg py-vsp-sm", children: [
-          /* @__PURE__ */ jsx("h2", { id: "zd-theme-pack-dialog-title", className: "text-title font-bold text-fg", children: "Preview theme" }),
+      class: "z-modal m-auto max-h-[85vh] w-[calc(100vw_-_2rem)] max-w-[64rem] rounded-lg border border-muted bg-surface p-0 text-fg backdrop:z-modal-backdrop backdrop:bg-bg/80",
+      children: /* @__PURE__ */ jsxs("div", { class: "flex max-h-[85vh] flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { class: "flex shrink-0 items-center justify-between gap-hsp-sm border-b border-muted px-hsp-lg py-vsp-sm", children: [
+          /* @__PURE__ */ jsx("h2", { id: "zd-theme-pack-dialog-title", class: "text-title font-bold text-fg", children: "Preview theme" }),
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              onClick: () => dialogRef.current?.close(),
+              "on:click": () => dialogRef.current?.close(),
               "aria-label": "Close",
-              className: "flex items-center justify-center text-muted transition-colors hover:text-fg",
-              children: /* @__PURE__ */ jsx(Close, { className: "h-icon-sm w-icon-sm" })
+              class: "flex items-center justify-center text-muted transition-colors duration-0 hover:text-fg",
+              children: /* @__PURE__ */ jsx(Close, { class: "h-icon-sm w-icon-sm" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-hsp-lg py-vsp-lg", children: !hasBrowsablePacks ? /* @__PURE__ */ jsx("p", { className: "py-vsp-xl text-center text-small text-muted", children: "No other theme packs are configured \u2014 only the default look is available." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          registryState === "error" && /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { class: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-hsp-lg py-vsp-lg", children: !hasBrowsablePacks ? /* @__PURE__ */ jsx("p", { class: "py-vsp-xl text-center text-small text-muted", children: "No other theme packs are configured \u2014 only the default look is available." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Show, { when: computed(() => registryState.value === "error"), children: () => /* @__PURE__ */ jsxs(
             "div",
             {
               role: "alert",
-              className: "mx-auto flex max-w-sm flex-col items-center gap-vsp-xs rounded-[0.75rem] border border-danger bg-bg px-hsp-lg py-vsp-lg text-center text-small text-danger",
+              class: "mx-auto flex flex-col items-center gap-vsp-xs rounded-[0.75rem] border border-danger bg-bg px-hsp-lg py-vsp-lg text-center text-small text-danger",
               children: [
                 /* @__PURE__ */ jsx("p", { children: "Could not load theme previews." }),
                 /* @__PURE__ */ jsx(
                   "button",
                   {
                     type: "button",
-                    onClick: retry,
-                    className: "rounded border border-danger px-hsp-md py-hsp-2xs text-caption text-danger transition-colors hover:bg-danger/10",
+                    "on:click": retry,
+                    class: "rounded border border-danger px-hsp-md py-hsp-2xs text-caption text-danger transition-colors hover:bg-danger/10",
                     children: "Retry"
                   }
                 )
               ]
             }
-          ),
-          (registryState === "idle" || registryState === "loading") && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("p", { role: "status", className: "sr-only", children: "Loading theme previews\u2026" }),
+          ) }),
+          /* @__PURE__ */ jsx(Show, { when: computed(() => registryState.value === "idle" || registryState.value === "loading"), children: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { role: "status", class: "sr-only", children: "Loading theme previews\u2026" }),
             /* @__PURE__ */ jsx(
               "div",
               {
                 "aria-hidden": "true",
-                className: "grid grid-cols-1 gap-hsp-lg sm:grid-cols-2 lg:grid-cols-3",
-                children: order.map((entry) => /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "h-[10rem] animate-pulse rounded-lg border border-muted bg-surface/50"
-                  },
-                  entry.slug
-                ))
+                class: "grid grid-cols-1 gap-hsp-lg sm:grid-cols-2 lg:grid-cols-3",
+                children: /* @__PURE__ */ jsx(For, { each: computed(() => order), by: (entry) => entry.slug, children: () => /* @__PURE__ */ jsx("div", { class: "h-[10rem] rounded-lg border border-muted bg-surface/50" }) })
               }
             )
-          ] }),
-          packs !== null && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-hsp-lg sm:grid-cols-2 lg:grid-cols-3", children: packs.map((meta) => /* @__PURE__ */ jsx(
+          ] }) }),
+          /* @__PURE__ */ jsx(Show, { when: computed(() => packs.value !== null), children: () => /* @__PURE__ */ jsx("div", { class: "grid grid-cols-1 gap-hsp-lg sm:grid-cols-2 lg:grid-cols-3", children: /* @__PURE__ */ jsx(For, { each: computed(() => (packs.value ?? []).map((meta) => ({ meta, key: `${meta.slug}:${mode.value}` }))), by: (item) => item.key, children: (item) => /* @__PURE__ */ jsx(
             ThemePackCard,
             {
-              meta,
-              mode,
-              isActive: meta.slug === activeSlug,
+              meta: item.value.meta,
+              mode: mode.value,
+              isActive: computed(() => item.value.meta.slug === activeSlug.value),
               onSelect: () => {
-                void applyThemePack(meta.slug);
+                void applyThemePack(item.value.meta.slug);
               }
-            },
-            meta.slug
-          )) })
+            }
+          ) }) }) })
         ] }) })
       ] })
     }

package/dist/theme-pack-dialog/theme-pack-card.d.ts

@@ -1,6 +1,5 @@
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import type { VNode } from "preact";
+import { type Child, type ReadonlySignal } from "@takazudo/zfb/zudo-react";
 import type { ThemePackMeta } from "../theme-packs-registry/index.js";
 export interface ThemePackCardProps {
     /** Full pack meta (incl. resolved preview swatches) for one registry entry. */
@@ -10,7 +9,7 @@ export interface ThemePackCardProps {
      *  badge shown alongside the name). */
     mode: "light" | "dark";
     /** Whether this card's pack is the currently active one (selected ring). */
-    isActive: boolean;
+    isActive: boolean | ReadonlySignal<boolean>;
     /** Apply this pack — the caller wires this to `applyThemePack(meta.slug)`;
      *  this component stays a plain presentational click forwarder. */
     onSelect: () => void;
@@ -22,4 +21,4 @@ export interface ThemePackCardProps {
  * — ADR Decision 7 — so the selected ring is driven by `isActive`, not by
  * the click itself).
  */
-export declare function ThemePackCard({ meta, mode, isActive, onSelect }: ThemePackCardProps): VNode;
+export declare function ThemePackCard({ meta, mode, isActive, onSelect }: ThemePackCardProps): Child;

package/dist/theme-pack-dialog/theme-pack-card.js

@@ -1,39 +1,41 @@
-import { jsx, jsxs } from "preact/jsx-runtime";
+import { jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
+import { computed } from "@takazudo/zfb/zudo-react";
 function ThemePackCard({ meta, mode, isActive, onSelect }) {
   const swatches = meta.preview[mode];
+  const selected = computed(() => typeof isActive === "boolean" ? isActive : isActive.value);
   const fontCaption = meta.fonts.display ?? meta.fonts.sans;
   return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
-      onClick: onSelect,
-      "aria-pressed": isActive,
+      "on:click": onSelect,
+      "aria-pressed": selected,
       "aria-label": `Apply ${meta.name} theme pack \u2014 ${meta.mode === "dark" ? "Dark" : "Light"}. ${meta.description}`,
-      className: `flex flex-col gap-vsp-2xs rounded-lg border p-hsp-sm text-left transition-colors focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 ${isActive ? "border-accent ring-2 ring-accent" : "border-muted hover:border-accent"}`,
+      class: computed(() => `flex flex-col gap-vsp-2xs rounded-lg border p-hsp-sm text-left transition-colors duration-0 focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 ${selected.value ? "border-accent zd-theme-pack-active-ring" : "border-muted hover:border-accent"}`),
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
             "aria-hidden": "true",
-            className: "flex flex-col gap-vsp-3xs rounded-md border p-hsp-sm",
+            class: "flex flex-col gap-vsp-3xs border p-hsp-sm",
             style: {
-              backgroundColor: swatches.bg,
+              "background-color": swatches.bg,
               color: swatches.fg,
-              borderColor: `color-mix(in oklch, ${swatches.fg} 15%, transparent)`
+              "border-color": `color-mix(in oklch, ${swatches.fg} 15%, transparent)`
             },
             children: [
-              /* @__PURE__ */ jsx("p", { className: "text-title font-bold", children: "Aa Heading" }),
-              /* @__PURE__ */ jsxs("p", { className: "text-small", children: [
+              /* @__PURE__ */ jsx("p", { class: "text-title font-bold", children: "Aa Heading" }),
+              /* @__PURE__ */ jsxs("p", { class: "text-small", children: [
                 "The quick brown fox jumps over",
                 " ",
-                /* @__PURE__ */ jsx("span", { className: "underline", style: { color: swatches.accent }, children: "the lazy dog" }),
+                /* @__PURE__ */ jsx("span", { class: "underline", style: { color: swatches.accent }, children: "the lazy dog" }),
                 "."
               ] }),
               /* @__PURE__ */ jsxs(
                 "p",
                 {
-                  className: "rounded px-hsp-2xs py-hsp-3xs font-mono text-caption",
-                  style: { backgroundColor: `color-mix(in oklch, ${swatches.fg} 8%, transparent)` },
+                  class: "rounded px-hsp-2xs font-mono text-caption",
+                  style: { "background-color": `color-mix(in oklch, ${swatches.fg} 8%, transparent)` },
                   children: [
                     /* @__PURE__ */ jsx("span", { style: { color: swatches.syntax.keyword }, children: "const" }),
                     " ",
@@ -57,12 +59,12 @@ function ThemePackCard({ meta, mode, isActive, onSelect }) {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-hsp-sm", children: [
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-body font-bold text-fg", children: meta.name }),
-          /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full border border-muted px-hsp-sm text-micro tracking-wide text-muted uppercase", children: meta.mode === "dark" ? "Dark" : "Light" })
+        /* @__PURE__ */ jsxs("div", { class: "flex items-center justify-between gap-hsp-sm", children: [
+          /* @__PURE__ */ jsx("span", { class: "min-w-0 truncate text-body font-bold text-fg", children: meta.name }),
+          /* @__PURE__ */ jsx("span", { class: "shrink-0 rounded-full border border-muted px-hsp-sm text-micro tracking-wide text-muted uppercase", children: meta.mode === "dark" ? "Dark" : "Light" })
         ] }),
-        /* @__PURE__ */ jsx("p", { className: "text-caption text-muted", children: meta.description }),
-        /* @__PURE__ */ jsx("p", { className: "text-micro text-muted", children: fontCaption })
+        /* @__PURE__ */ jsx("p", { class: "text-caption text-muted", children: meta.description }),
+        /* @__PURE__ */ jsx("p", { class: "text-micro text-muted", children: fontCaption })
       ]
     }
   );

package/dist/theme-pack-switcher/index.d.ts

@@ -1,6 +1,5 @@
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import type { JSX } from "preact";
+import { type Component, type Child, type ReadonlySignal } from "@takazudo/zfb/zudo-react";
 import { type ThemePackOrderEntry } from "./switcher-state.js";
 export type { ThemePackOrderEntry } from "./switcher-state.js";
 /**
@@ -27,7 +26,7 @@ export interface ThemePackSwitcherProps {
  *  via `applyThemePack(slug)` and the dialog stays open (ADR Decision 7). */
 export interface ThemePackDialogProps {
     /** Whether the dialog is currently open. */
-    open: boolean;
+    open: ReadonlySignal<boolean>;
     /** Close callback (Esc / ✕ / backdrop — the dialog's own close paths). */
     onClose: () => void;
     /** The switcher order — also the dialog grid order. */
@@ -38,14 +37,14 @@ export interface ThemePackDialogProps {
     base: string;
 }
 /** The browse-all dialog component contract (#2825). */
-export type ThemePackDialogComponent = (props: ThemePackDialogProps) => JSX.Element | null;
+export type ThemePackDialogComponent = Component<ThemePackDialogProps>;
 /**
  * The bottom-right theme-pack switcher flyout. Mounted (settings-gated on
  * `themePackSwitcher`) by the package body-end islands via
  * `Island({ when: "load" })` — see
  * `../doc-body-end-islands/theme-pack-switcher-island.tsx`.
  */
-export declare function ThemePackSwitcher({ active, order, base, pendingUntilHydrated, }: ThemePackSwitcherProps): JSX.Element;
+export declare function ThemePackSwitcher({ active, order, base, pendingUntilHydrated, }: ThemePackSwitcherProps): Child;
 export declare namespace ThemePackSwitcher {
     var displayName: string;
 }