@takazudo/zudo-doc 5.28.1 → 6.0.0

package/dist/chrome/derive.js

@@ -1,4 +1,5 @@
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+import { Fragment, jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
+import { Island } from "@takazudo/zfb";
 import { createComposeMetaTitle } from "../compose-meta-title/index.js";
 import {
   generateCssCustomProperties,
@@ -30,8 +31,10 @@ import {
   remapVersionedHrefs,
   getThemeDefaultMode as getThemeDefaultModeBase
 } from "../nav-data-prep/index.js";
-import { buildSidebarForSection } from "../sidebar-utils/index.js";
+import { buildSidebarNavigation } from "../sidebar-utils/index.js";
 import { resolveDateFormats } from "../date-format-resolve/index.js";
+import { normalizeIslandData } from "./island-data.js";
+import { normalizeIslandData as normalizeIslandData2 } from "./island-data.js";
 const GREY_RAMPS = {
   base: [
     "oklch(0.965 0.000 0)",
@@ -113,28 +116,32 @@ function deriveColorSchemeGenerators(ctx) {
 }
 function deriveNavDataPrep(ctx) {
   function buildRootMenuItems(lang, currentVersion) {
-    return buildRootMenuItemsBase(
-      lang,
-      currentVersion,
-      ctx.settings.headerNav,
-      (key, l) => ctx.t(key, l),
-      (path, l, v, versioned) => ctx.navHref(path, l, v, versioned)
+    return normalizeIslandData(
+      buildRootMenuItemsBase(
+        lang,
+        currentVersion,
+        ctx.settings.headerNav,
+        (key, l) => ctx.t(key, l),
+        (path, l, v, versioned) => ctx.navHref(path, l, v, versioned)
+      )
     );
   }
   function buildLocaleLinksForNav(currentPath, lang, localeCount) {
-    return buildLocaleLinksForNavBase(
-      currentPath,
-      lang,
-      localeCount,
-      (path, l) => ctx.buildLocaleLinks(path, l)
+    return normalizeIslandData(
+      buildLocaleLinksForNavBase(
+        currentPath,
+        lang,
+        localeCount,
+        (path, l) => ctx.buildLocaleLinks(path, l)
+      )
     );
   }
   const sidebarsConfig = ctx.hostBindings.sidebarsConfig ?? {};
-  function buildSidebarNodes(lang, navSection, currentVersion, emptyWhenUnsectioned = true) {
-    if (navSection === void 0 && emptyWhenUnsectioned) return [];
+  function buildSidebarContext(lang, navSection, currentVersion, emptyWhenUnsectioned = true) {
+    if (navSection === void 0 && emptyWhenUnsectioned) return { nodes: [], navigation: void 0 };
     const { navDocs, categoryMeta } = ctx.loadNavSourceDocs(lang, currentVersion);
     const explicitPrefixes = ctx.getCategoryOrder().filter((cm) => cm !== "!");
-    const rawNodes = buildSidebarForSection(
+    const result = buildSidebarNavigation(
       navDocs,
       lang,
       navSection,
@@ -148,17 +155,20 @@ function deriveNavDataPrep(ctx) {
       ),
       explicitPrefixes
     );
-    return currentVersion ? remapVersionedHrefs(
-      rawNodes,
-      currentVersion,
-      lang,
-      (slug, v, l) => ctx.versionedDocsUrl(slug, v, l)
-    ) : rawNodes;
+    const remap = (nodes) => currentVersion ? remapVersionedHrefs(nodes, currentVersion, lang, (slug, v, l) => ctx.versionedDocsUrl(slug, v, l)) : nodes;
+    return normalizeIslandData({
+      nodes: remap(result.nodes),
+      navigation: { ...result.navigation, id: `${currentVersion ?? "current"}:${result.navigation.id}`, roots: remap(result.navigation.roots) }
+    });
+  }
+  function buildSidebarNodes(...args) {
+    const withoutIdentity = (nodes) => nodes.map(({ occurrenceId: _id, children, ...node }) => ({ ...node, children: withoutIdentity(children) }));
+    return withoutIdentity(buildSidebarContext(...args).nodes);
   }
   function getThemeDefaultMode() {
     return getThemeDefaultModeBase(ctx.settings.colorMode);
   }
-  return { buildRootMenuItems, buildLocaleLinksForNav, buildSidebarNodes, getThemeDefaultMode };
+  return { buildRootMenuItems, buildLocaleLinksForNav, buildSidebarNodes, buildSidebarContext, getThemeDefaultMode };
 }
 function deriveSearchWidgetSlot(ctx) {
   function SearchWidgetBound(props) {
@@ -185,13 +195,19 @@ function deriveThemePackSwitcherProps(ctx) {
 function skipsPackageDefaultDesignTokenPanel(settings) {
   return Boolean(settings.designTokenPanelConfigModule) && settings.packageOwnedRoutes !== false;
 }
+function DefaultDesignTokenPanelBoundary() {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Island, { when: "load", children: /* @__PURE__ */ jsx(DesignTokenPanelBootstrap, {}) }) });
+}
+function DefaultThemePackSwitcherBoundary(props) {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Island, { when: "load", children: /* @__PURE__ */ jsx(ThemePackSwitcher, { ...props }) }) });
+}
 function deriveBodyEndIslands(ctx) {
   const designTokenPanelDeps = {
-    DesignTokenPanelBootstrap: ctx.hostBindings.DesignTokenPanelBootstrap ?? (skipsPackageDefaultDesignTokenPanel(ctx.settings) ? void 0 : DesignTokenPanelBootstrap)
+    DesignTokenPanelBootstrap: ctx.hostBindings.DesignTokenPanelBootstrap ?? (skipsPackageDefaultDesignTokenPanel(ctx.settings) ? void 0 : DefaultDesignTokenPanelBoundary)
   };
   const themePackSwitcherDeps = {
     themePackSwitcherProps: deriveThemePackSwitcherProps(ctx),
-    ThemePackSwitcher
+    ThemePackSwitcher: DefaultThemePackSwitcherBoundary
   };
   const HostBodyEndIslands = ctx.hostBindings.BodyEndIslands;
   if (!HostBodyEndIslands) {
@@ -351,11 +367,12 @@ function deriveMdxComponents(ctx) {
       preview: ctx.t("htmlPreview.iframe.title", lang)
     };
     function HtmlPreviewBound(props) {
-      const labels = props.labels;
-      const effectiveLang = props.lang?.trim() ? props.lang : lang.trim() ? lang : "en";
+      const definedProps = normalizeIslandData(props);
+      const labels = definedProps.labels;
+      const effectiveLang = definedProps.lang?.trim() ? definedProps.lang : lang.trim() ? lang : "en";
       return HtmlPreviewWrapper({
-        globalConfig: ctx.settings.htmlPreview ?? null,
-        ...props,
+        globalConfig: normalizeIslandData(ctx.settings.htmlPreview ?? null),
+        ...definedProps,
         lang: effectiveLang,
         labels: {
           mobile: labels?.mobile ?? localizedHtmlPreviewLabels.mobile,
@@ -416,5 +433,6 @@ export {
   deriveMdxComponents,
   deriveNavDataPrep,
   deriveSearchWidgetSlot,
+  normalizeIslandData2 as normalizeIslandData,
   skipsPackageDefaultDesignTokenPanel
 };

package/dist/chrome/index.d.ts

@@ -1,8 +1,8 @@
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
 import type { RouteContext, ChromeHostBindings } from "../factory-context/index.js";
 import type { Settings } from "../settings.js";
-import type { JSX, VNode } from "preact";
+import type { Child } from "@takazudo/zfb/zudo-react";
+import type { JSX } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import type { HeaderWithDefaultsProps } from "../header-with-defaults/index.js";
 import type { SidebarWithDefaultsProps } from "../sidebar-with-defaults/index.js";
 /**
@@ -19,7 +19,7 @@ export declare function createChrome<S extends Settings = Settings>(context: Rou
     HeaderWithDefaults: (props: HeaderWithDefaultsProps) => JSX.Element;
     FooterWithDefaults: (props: {
         lang?: string;
-    }) => VNode;
+    }) => Child;
     SidebarWithDefaults: (props: SidebarWithDefaultsProps) => JSX.Element;
     renderDocPage: (props: import("../doc-page-props/index.js").DocPageBaseProps, opts: import("../doc-page-renderer/index.js").RenderDocPageOptions) => JSX.Element;
     VersionsPageView: (props: import("../versions-page/index.js").VersionsPageViewProps) => JSX.Element;
@@ -31,9 +31,9 @@ export declare function createChrome<S extends Settings = Settings>(context: Rou
     }) => JSX.Element;
     TagsIndexPageView: (props: {
         locale: string;
-        children?: import("preact").ComponentChildren;
+        children?: Child;
     }) => JSX.Element;
-    SiteTreeNavWrapper: import("../factory-context/index.js").FactoryComponent;
+    SiteTreeNavWrapper: import("../index.js").FactoryComponent;
     BodyEndIslands: (props: import("../doc-body-end-islands/index.js").BodyEndIslandsProps) => JSX.Element;
     HomePageView: (props: import("../home-page/index.js").HomePageViewProps) => JSX.Element;
     AssetPageView: (props: import("../asset-page/index.js").AssetPageViewProps) => JSX.Element;

package/dist/chrome/index.js

@@ -1,4 +1,4 @@
-import { Fragment, jsx } from "preact/jsx-runtime";
+import { Fragment, jsx } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import { createHeadWithDefaults } from "../head-with-defaults/index.js";
 import { createRenderDocPage } from "../doc-page-renderer/index.js";
 import { createVersionsPageView } from "../versions-page/index.js";

package/dist/chrome/island-data.d.ts

@@ -0,0 +1,4 @@
+/** Copy transport data before constructing descriptions so SSR and the island
+ * serializer observe the same own keys. Optional record members are omitted;
+ * malformed arrays and runtime objects fail at the boundary. */
+export declare function normalizeIslandData<T>(value: T): T;

package/dist/chrome/island-data.js

@@ -0,0 +1,52 @@
+function normalizeIslandData(value) {
+  const active = /* @__PURE__ */ new WeakSet();
+  function copy(input, path) {
+    if (input === void 0 && path === "$island") return input;
+    if (input === null || typeof input === "string" || typeof input === "boolean") {
+      return input;
+    }
+    if (typeof input === "number" && Number.isFinite(input)) return input;
+    if (typeof input !== "object") throw new TypeError(`Invalid island data at ${path}`);
+    if (active.has(input)) throw new TypeError(`Cyclic island data at ${path}`);
+    const prototype = Object.getPrototypeOf(input);
+    if (!Array.isArray(input) && prototype !== Object.prototype && prototype !== null) {
+      throw new TypeError(`Invalid island record at ${path}`);
+    }
+    active.add(input);
+    try {
+      if (Array.isArray(input)) {
+        for (const key of Reflect.ownKeys(input)) {
+          if (key !== "length" && (typeof key !== "string" || !/^(0|[1-9][0-9]*)$/.test(key) || Number(key) >= input.length)) {
+            throw new TypeError(`Invalid island array key at ${path}`);
+          }
+        }
+        return Array.from({ length: input.length }, (_, index) => {
+          const descriptor = Object.getOwnPropertyDescriptor(input, index);
+          if (!descriptor) throw new TypeError(`Sparse island array at ${path}[${index}]`);
+          if (!("value" in descriptor)) {
+            throw new TypeError(`Accessor island data at ${path}[${index}]`);
+          }
+          return copy(descriptor.value, `${path}[${index}]`);
+        });
+      }
+      const output = {};
+      for (const key of Reflect.ownKeys(input)) {
+        if (typeof key !== "string" || key === "__proto__" || key === "constructor" || key === "prototype") {
+          throw new TypeError(`Invalid island key at ${path}`);
+        }
+        const descriptor = Object.getOwnPropertyDescriptor(input, key);
+        if (!descriptor || !("value" in descriptor)) {
+          throw new TypeError(`Accessor island data at ${path}.${key}`);
+        }
+        if (descriptor.value !== void 0) output[key] = copy(descriptor.value, `${path}.${key}`);
+      }
+      return output;
+    } finally {
+      active.delete(input);
+    }
+  }
+  return copy(value, "$island");
+}
+export {
+  normalizeIslandData
+};

package/dist/chrome/primary-slots.d.ts

@@ -1,10 +1,9 @@
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import type { ComponentChildren } from "preact";
+import type { Child } from "@takazudo/zfb/zudo-react";
 import type { ChromeContext } from "../factory-context/index.js";
 import type { BreadcrumbSlotProps, DocPagerSlotProps, FooterSlotProps, HeaderSlotProps, SidebarSlotProps, TocSlotProps } from "../chrome-bindings.js";
 import type { Settings } from "../settings.js";
-type PrimarySlot<P> = (props: P) => ComponentChildren;
+type PrimarySlot<P> = (props: P) => Child;
 /**
  * Resolve all six primary chrome components through one binding object.
  * Accessors keep package defaults lazy: a home view that only reads Header and

package/dist/chrome-bindings.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentChildren } from "preact";
+import type { Child, Component } from "@takazudo/zfb/zudo-react";
 import type { BreadcrumbItem } from "./breadcrumb/index.js";
 import type { DocPageNavNode } from "./doc-page-shell/index.js";
 import type { HeadingItem } from "./toc/index.js";
@@ -34,12 +34,14 @@ export interface BodyEndIslandsSlotProps {
     forceImageEnlarge?: boolean;
 }
 /**
- * Props the chrome passes to the `DocHistory` island slot — matches
+ * Props the chrome passes to the `DocHistory` server boundary slot — matches
  * `DocHistoryProps` (`doc-history/index.tsx`) / `DocHistoryComponent`
  * (`doc-history-area`), rendered as
  * `<DocHistory slug=… locale=… basePath=… displayLocale=… dateFormats=… />`.
  */
 export interface DocHistorySlotProps {
+    /** Server-only fallback consumed by the boundary, never serialized as client props. */
+    ssrFallback?: Child;
     slug: string;
     locale?: string;
     basePath?: string;
@@ -50,8 +52,11 @@ export interface DocHistorySlotProps {
 }
 /**
  * Props the chrome passes to the `DesignTokenPanelBootstrap` slot — NONE. It is
- * rendered as `<DesignTokenPanelBootstrap />` (zero props) inside
- * `createBodyEndIslands`. An empty object type (no index signature) so a
+ * a server boundary rendered with zero props behind the package settings gate.
+ * Return a Fragment containing an Island with a statically imported client
+ * target; do not pass the raw client component. The package owns the toggle
+ * shim but does not add an Island around this boundary.
+ * An empty object type (no index signature) so a
  * zero-prop or all-optional-prop component is accepted while a component that
  * REQUIRES any prop is drift.
  */
@@ -120,7 +125,7 @@ export interface TocSlotProps {
  */
 export interface BreadcrumbSlotProps {
     items: BreadcrumbItem[];
-    rightSlot?: ComponentChildren;
+    rightSlot?: Child;
 }
 /** Props supplied to the doc-route `DocPager` replacement. */
 export interface DocPagerSlotProps {
@@ -134,30 +139,30 @@ export interface DocPagerSlotProps {
  */
 export interface ChromeBindingsInput {
     /** Primary header replacement — see {@link HeaderSlotProps}. */
-    Header?: (props: HeaderSlotProps) => unknown;
+    Header?: Component<HeaderSlotProps>;
     /** Primary footer replacement — see {@link FooterSlotProps}. */
-    Footer?: (props: FooterSlotProps) => unknown;
+    Footer?: Component<FooterSlotProps>;
     /** Primary doc-sidebar replacement — see {@link SidebarSlotProps}. */
-    Sidebar?: (props: SidebarSlotProps) => unknown;
+    Sidebar?: Component<SidebarSlotProps>;
     /** Primary desktop TOC replacement — see {@link TocSlotProps}. */
-    Toc?: (props: TocSlotProps) => unknown;
+    Toc?: Component<TocSlotProps>;
     /** Primary breadcrumb replacement — see {@link BreadcrumbSlotProps}. */
-    Breadcrumb?: (props: BreadcrumbSlotProps) => unknown;
+    Breadcrumb?: Component<BreadcrumbSlotProps>;
     /** Primary previous/next pager replacement — see {@link DocPagerSlotProps}. */
-    DocPager?: (props: DocPagerSlotProps) => unknown;
+    DocPager?: Component<DocPagerSlotProps>;
     /** Header search widget — see {@link SearchWidgetSlotProps}. */
-    SearchWidget?: (props: SearchWidgetSlotProps) => unknown;
+    SearchWidget?: Component<SearchWidgetSlotProps>;
     /**
      * Named header-right renderers. Values are callable-only and receive the
      * exact `HeaderRightComponentProps` used by the header renderer.
      */
     headerRightComponents?: HeaderRightComponentRegistry;
     /** Body-end bootstrap islands — see {@link BodyEndIslandsSlotProps}. */
-    BodyEndIslands?: (props: BodyEndIslandsSlotProps) => unknown;
-    /** DocHistory island — see {@link DocHistorySlotProps}. */
-    DocHistory?: (props: DocHistorySlotProps) => unknown;
-    /** Design-token-panel bootstrap island — see {@link DesignTokenPanelBootstrapSlotProps}. */
-    DesignTokenPanelBootstrap?: (props: DesignTokenPanelBootstrapSlotProps) => unknown;
+    BodyEndIslands?: Component<BodyEndIslandsSlotProps>;
+    /** Fixed-target DocHistory server boundary — see {@link DocHistorySlotProps}. */
+    DocHistory?: Component<DocHistorySlotProps>;
+    /** Server boundary for the design-token-panel bootstrap — see {@link DesignTokenPanelBootstrapSlotProps}. */
+    DesignTokenPanelBootstrap?: Component<DesignTokenPanelBootstrapSlotProps>;
     /**
      * Per-page git-history meta manifest (data slot). Read as
      * `Record<string, DocHistoryMetaEntry>` inside `doc-metainfo-area` /
@@ -181,13 +186,14 @@ export interface ChromeBindingsInput {
      * (parameter contravariance). Unlike `mdxExtras`, this slot has a fixed call
      * site, so it carries the real contract rather than a loose `Record`.
      */
-    frontmatterRenderers?: Record<string, (props: FrontmatterRendererSlotProps) => unknown>;
+    frontmatterRenderers?: Record<string, Component<FrontmatterRendererSlotProps>>;
     /**
-     * MDX content-component overrides (renderer record). Same loose value type as
-     * `frontmatterRenderers`; the showcase's `MdxStub = (_props: unknown) => null`
-     * is accepted deliberately (`unknown` props are a safe supertype).
+     * MDX content-component overrides (renderer record). Component props are a
+     * broad record because each MDX component has its own authored prop shape;
+     * the showcase's `MdxStub = (_props: unknown) => null` is accepted because
+     * `unknown` safely accepts that record.
      */
-    mdxExtras?: Record<string, unknown>;
+    mdxExtras?: Record<string, Component<Record<string, unknown>>>;
     /**
      * Frontmatter preview entry builder. `doc-content-header` calls it with the
      * page `data` (`Record<string, unknown>`) and spreads the result into

package/dist/code-group/index.d.ts

@@ -1,10 +1,9 @@
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import type { ComponentChildren } from "preact";
+import type { Child } from "@takazudo/zfb/zudo-react";
 type Props = {
     tabs?: string[];
-    children?: ComponentChildren;
+    children?: Child;
     [key: string]: unknown;
 };
-export declare function CodeGroup({ tabs, children, name }: Props): import("preact").JSX.Element;
+export declare function CodeGroup({ tabs, children, name }: Props): import("@takazudo/zfb").Description;
 export {};

package/dist/code-group/index.js

@@ -1,13 +1,9 @@
-import { Fragment, jsx } from "preact/jsx-runtime";
+import { Fragment, jsx } from "@takazudo/zfb/zudo-react/jsx-runtime";
+import { flattenChildren } from "@takazudo/zfb/zudo-react";
 import { Tabs } from "../code-syntax/index.js";
 import { TabItem } from "../tab-item/index.js";
-function toArray(children) {
-  if (!children) return [];
-  if (Array.isArray(children)) return children;
-  return [children];
-}
 function CodeGroup({ tabs = [], children, name }) {
-  const childArray = toArray(children);
+  const childArray = flattenChildren(children);
   const items = tabs.map((label, i) => {
     const child = childArray[i];
     return { label, child };

package/dist/code-syntax/code-block-enhancer.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";
 /**
  * Drop-in JSX replacement for the legacy `code-block-enhancer` component.
  *

package/dist/code-syntax/code-block-enhancer.js

@@ -1,9 +1,9 @@
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+import { Fragment, jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import { CODE_BLOCK_ENHANCER_SCRIPT } from "./code-block-enhancer-script.js";
 function CodeBlockEnhancer() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { class: "code-block-sr-announce", "aria-live": "polite" }),
-    /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: CODE_BLOCK_ENHANCER_SCRIPT } })
+    /* @__PURE__ */ jsx("script", { rawHtml: CODE_BLOCK_ENHANCER_SCRIPT })
   ] });
 }
 export {

package/dist/code-syntax/mermaid-init.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";
 /**
  * Props for `<MermaidInit/>`.
  *

package/dist/code-syntax/mermaid-init.js

@@ -1,4 +1,4 @@
-import { jsx } from "preact/jsx-runtime";
+import { jsx } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import {
   MERMAID_CDN_MODULE_URL,
   buildMermaidInitScript
@@ -6,7 +6,10 @@ import {
 const MERMAID_INIT_SCRIPT = buildMermaidInitScript(MERMAID_CDN_MODULE_URL);
 function MermaidInit(props = {}) {
   const script = props.script ?? (props.cdnUrl ? buildMermaidInitScript(props.cdnUrl) : MERMAID_INIT_SCRIPT);
-  return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: script } });
+  if (/<\/script\b/i.test(script)) {
+    throw new Error("MermaidInit script must not contain a closing script tag");
+  }
+  return /* @__PURE__ */ jsx("script", { rawHtml: script });
 }
 export {
   MermaidInit

package/dist/code-syntax/tabs-init-script.js

@@ -1,6 +1,6 @@
 import { AFTER_NAVIGATE_EVENT } from "../transitions/page-events.js";
 const TABS_INIT_SCRIPT = `(function () {
-  var BASE_BTN = "px-hsp-lg py-vsp-xs text-small font-medium border-b-[5px] -mb-px transition-colors";
+  var BASE_BTN = "px-hsp-lg py-vsp-xs text-small font-medium border-b-[5px] -mb-px transition-colors duration-0";
   var ACTIVE_BTN = BASE_BTN + " text-accent border-accent";
   var INACTIVE_BTN = BASE_BTN + " text-muted border-transparent hover:text-fg";
 

package/dist/code-syntax/tabs-init.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";
 /**
  * Drop-in JSX replacement for the legacy `tabs-init` component.
  *

package/dist/code-syntax/tabs-init.js

@@ -1,7 +1,7 @@
-import { jsx } from "preact/jsx-runtime";
+import { jsx } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import { TABS_INIT_SCRIPT } from "./tabs-init-script.js";
 function TabsInit() {
-  return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: TABS_INIT_SCRIPT } });
+  return /* @__PURE__ */ jsx("script", { rawHtml: TABS_INIT_SCRIPT });
 }
 export {
   TabsInit

package/dist/code-syntax/tabs.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";
 export interface TabsProps {
     /**
      * When set, clicking a tab in this group persists the chosen value to
@@ -9,15 +9,15 @@ export interface TabsProps {
      */
     groupId?: string;
     /** `<TabItem>` children (and any other content). */
-    children?: ComponentChildren;
+    children?: Child;
 }
 /**
  * Server-rendered tab container — JSX port of the legacy `tabs` component.
  *
- * Iterates `children` via `toChildArray` to discover `<TabItem>` elements
+ * Iterates `children` via `flattenChildren` to discover `<TabItem>` elements
  * and renders their labels as `<button>` elements in the tab nav bar.
- * All panels remain `hidden` on first paint; `<TabsInit>` (the companion
- * script component) activates the default/stored tab after hydration.
+ * The default panel is visible on first paint; `<TabsInit>` (the companion
+ * script component) activates a stored tab after hydration.
  *
  * Place `<TabsInit>` once in the layout — NOT inside each `<Tabs>`.
  *

package/dist/code-syntax/tabs.js

@@ -1,11 +1,11 @@
-import { jsx, jsxs } from "preact/jsx-runtime";
-import { cloneElement, toChildArray } from "preact";
+import { jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
+import { h, flattenChildren } from "@takazudo/zfb/zudo-react";
 import { TabItem } from "../tab-item/tab-item.js";
-const BASE_BTN_CLASS = "px-hsp-lg py-vsp-xs text-small font-medium border-b-[5px] -mb-px transition-colors";
+const BASE_BTN_CLASS = "px-hsp-lg py-vsp-xs text-small font-medium border-b-[5px] -mb-px transition-colors duration-0";
 const ACTIVE_BTN_CLASS = `${BASE_BTN_CLASS} text-accent border-accent`;
 const INACTIVE_BTN_CLASS = `${BASE_BTN_CLASS} text-muted border-transparent hover:text-fg`;
 function Tabs({ groupId, children }) {
-  const childArray = toChildArray(children);
+  const childArray = flattenChildren(children);
   const tabItemNodes = childArray.filter(
     (child) => typeof child === "object" && child !== null && child.type === TabItem
   );
@@ -23,18 +23,18 @@ function Tabs({ groupId, children }) {
       const props = node.props;
       const value = props.value ?? props.label;
       const isDefault = value === defaultValue;
-      return cloneElement(node, { default: isDefault });
+      return h(node.type, { ...node.props, default: isDefault, key: node.key });
     }
     return child;
   });
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      class: "tabs-container my-vsp-md",
+      class: "my-vsp-md",
       "data-tabs": true,
       "data-group-id": groupId,
       children: [
-        /* @__PURE__ */ jsx("div", { class: "tabs-nav flex border-b border-muted", role: "tablist", children: tabItems.map((item) => {
+        /* @__PURE__ */ jsx("div", { class: "flex border-b border-muted", role: "tablist", "data-tabs-nav": true, children: tabItems.map((item) => {
           const value = item.props.value ?? item.props.label;
           const isActive = value === defaultValue;
           return /* @__PURE__ */ jsx(
@@ -50,7 +50,7 @@ function Tabs({ groupId, children }) {
             value
           );
         }) }),
-        /* @__PURE__ */ jsx("div", { class: "tabs-content", children: renderedChildren })
+        /* @__PURE__ */ jsx("div", { "data-tabs-content": true, children: renderedChildren })
       ]
     }
   );