@takazudo/zudo-doc 3.3.0 → 4.0.0

package/dist/design-token-panel-bootstrap.js

@@ -1,6 +1,7 @@
 "use client";
 import {
   configurePanel,
+  reapplyPersistedOverrides,
   setLifecycleAdapter,
   showDesignTokenPanel
 } from "@takazudo/zdtp";
@@ -8,37 +9,112 @@ import {
   BEFORE_NAVIGATE_EVENT,
   AFTER_NAVIGATE_EVENT
 } from "./transitions/page-events.js";
+import {
+  DEFAULT_THEME_PACK_SLUG,
+  THEME_PACK_CHANGED_EVENT,
+  readThemePackFromDom
+} from "./theme-pack-switcher/theme-pack-sync.js";
 import { buildDesignTokenPanelConfig } from "virtual:zudo-doc-design-token-panel-config";
 const COLOR_SCHEME_CHANGED_EVENT = "color-scheme-changed";
 function openStateKey(instancePrefix) {
   return `${instancePrefix}-open`;
 }
+function readOpenState(instancePrefix) {
+  try {
+    return localStorage.getItem(openStateKey(instancePrefix)) === "1";
+  } catch {
+    return false;
+  }
+}
 function readMode() {
   return document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
 }
-function bootstrapDesignTokenPanel(configOrBuilder) {
-  if (typeof window === "undefined" || typeof document === "undefined") {
+function withPackScopedStoragePrefix(config, activePack) {
+  if (activePack === DEFAULT_THEME_PACK_SLUG) return config;
+  return { ...config, storagePrefix: `${config.storagePrefix}--${activePack}` };
+}
+function collectDeclaredTokenNames(config) {
+  const names = [];
+  for (const tab of config.tabs ?? []) {
+    for (const tier of tab.tiers ?? []) {
+      for (const item of tier.items ?? []) {
+        names.push(item.cssVar);
+      }
+    }
+    const baseRoles = tab.colorExtras?.baseRoles;
+    if (baseRoles) {
+      for (const cssVar of Object.values(baseRoles)) {
+        if (typeof cssVar === "string" && cssVar.length > 0) {
+          names.push(cssVar);
+        }
+      }
+    }
+  }
+  return names;
+}
+function clearAppliedTokenOverrides(config) {
+  const names = collectDeclaredTokenNames(config);
+  if (config.applySink) {
+    try {
+      config.applySink.clear(names);
+    } catch (err) {
+      console.warn(
+        "[zudo-doc] applySink.clear threw during theme-pack switch; outgoing overrides may linger.",
+        err
+      );
+    }
     return;
   }
-  const isBuilder = typeof configOrBuilder === "function";
-  const builder = isBuilder ? configOrBuilder : () => configOrBuilder;
-  let handle = configurePanel(builder(readMode()));
-  if (isBuilder) {
-    let pendingMode = readMode();
-    let timer = null;
-    window.addEventListener(COLOR_SCHEME_CHANGED_EVENT, () => {
-      pendingMode = readMode();
-      if (timer !== null) return;
-      timer = setTimeout(() => {
-        timer = null;
-        const mode = pendingMode;
-        const wasOpen = localStorage.getItem(openStateKey(handle.instanceId)) === "1";
-        handle.destroy();
-        handle = configurePanel(builder(mode));
-        if (wasOpen) showDesignTokenPanel();
-      }, 0);
-    });
+  const style = document.documentElement.style;
+  for (const name of names) {
+    style.removeProperty(name);
+  }
+}
+function bootstrapDesignTokenPanel(buildConfig) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return;
   }
+  let currentConfig = withPackScopedStoragePrefix(
+    buildConfig(readMode()),
+    readThemePackFromDom()
+  );
+  let handle = configurePanel(currentConfig);
+  let pendingMode = readMode();
+  let timer = null;
+  window.addEventListener(COLOR_SCHEME_CHANGED_EVENT, () => {
+    pendingMode = readMode();
+    if (timer !== null) return;
+    timer = setTimeout(() => {
+      timer = null;
+      const mode = pendingMode;
+      const wasOpen = readOpenState(handle.instanceId);
+      handle.destroy();
+      currentConfig = withPackScopedStoragePrefix(
+        buildConfig(mode),
+        readThemePackFromDom()
+      );
+      handle = configurePanel(currentConfig);
+      if (wasOpen) showDesignTokenPanel();
+    }, 0);
+  });
+  let pendingPack = readThemePackFromDom();
+  let packTimer = null;
+  window.addEventListener(THEME_PACK_CHANGED_EVENT, () => {
+    pendingPack = readThemePackFromDom();
+    if (packTimer !== null) return;
+    packTimer = setTimeout(() => {
+      packTimer = null;
+      const pack = pendingPack;
+      const wasOpen = readOpenState(handle.instanceId);
+      const outgoingConfig = currentConfig;
+      handle.destroy();
+      clearAppliedTokenOverrides(outgoingConfig);
+      currentConfig = withPackScopedStoragePrefix(buildConfig(readMode()), pack);
+      handle = configurePanel(currentConfig);
+      reapplyPersistedOverrides();
+      if (wasOpen) showDesignTokenPanel();
+    }, 0);
+  });
   window.__zdtpReadyClicks?.();
   const adapter = {
     onBeforeSwap(cb) {
@@ -65,5 +141,6 @@ function DesignTokenPanelBootstrap() {
 DesignTokenPanelBootstrap.displayName = "DesignTokenPanelBootstrap";
 export {
   DesignTokenPanelBootstrap,
-  bootstrapDesignTokenPanel
+  bootstrapDesignTokenPanel,
+  withPackScopedStoragePrefix
 };

package/dist/design-token-panel-config/index.js

@@ -200,10 +200,7 @@ function buildDesignTokenPanelConfig(mode) {
     // `SCHEMA_V3` constants (#498/#505), which are unrelated to this field.
     // It is thus a purely descriptive config value with no runtime effect;
     // set to v3 (a literal, not one of those constants) to match what real
-    // exports carry. Distinct from the host serde's `DESIGN_TOKEN_SCHEMA`
-    // (`zudo-doc-design-tokens/v3` — bumped from v2 in #2599 so a stale
-    // pre-5/3-minimize export resets instead of crashing on import), which
-    // governs a separate round-trip.
+    // exports carry.
     schemaId: "zudo-design-tokens/v3",
     exportFilenameBase: "zudo-doc-design-tokens",
     tabs: [buildPaletteTab(mode), buildColorTab(mode), buildFontTab(), buildSpacingTab(), buildSizeTab()]

package/dist/doc-body-end-islands/design-token-panel-island.d.ts

@@ -0,0 +1,15 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import type { FactoryComponent } from "../factory-context/index.js";
+export interface DesignTokenPanelIslandDeps {
+    designTokenPanel: boolean;
+    DesignTokenPanelBootstrap?: FactoryComponent;
+}
+/**
+ * Bind the current settings gate to the package-owned bootstrap island.
+ * Kept separate from the rest of the package body-end islands so a host
+ * BodyEndIslands override can be composed with this package-owned marker
+ * without duplicating the other package defaults.
+ */
+export declare function createDesignTokenPanelIsland(deps: DesignTokenPanelIslandDeps): () => JSX.Element | null;

package/dist/doc-body-end-islands/design-token-panel-island.js

@@ -0,0 +1,31 @@
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+import { Island } from "@takazudo/zfb";
+const ZDTP_TOGGLE_SHIM_SRC = `(function(){
+if(window.__zdtpToggleShimInstalled)return;
+window.__zdtpToggleShimInstalled=true;
+var pending=false;
+function shim(){pending=true;}
+window.addEventListener('toggle-design-token-panel',shim);
+window.__zdtpReadyClicks=function(){
+window.removeEventListener('toggle-design-token-panel',shim);
+delete window.__zdtpReadyClicks;
+if(pending){pending=false;window.dispatchEvent(new CustomEvent('toggle-design-token-panel'));}
+};
+})();`;
+function createDesignTokenPanelIsland(deps) {
+  const DesignTokenPanelBootstrap = deps.DesignTokenPanelBootstrap;
+  function DesignTokenPanelIsland() {
+    if (!deps.designTokenPanel || !DesignTokenPanelBootstrap) return null;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: ZDTP_TOGGLE_SHIM_SRC } }),
+      Island({
+        when: "load",
+        children: /* @__PURE__ */ jsx(DesignTokenPanelBootstrap, {})
+      })
+    ] });
+  }
+  return DesignTokenPanelIsland;
+}
+export {
+  createDesignTokenPanelIsland
+};

package/dist/doc-body-end-islands/index.d.ts

@@ -2,34 +2,36 @@
 /** @jsxImportSource preact */
 import type { JSX } from "preact";
 import type { FactoryComponent } from "../factory-context/index.js";
-/** The `settings` subset this factory reads — the four package-island flags.
+import type { ThemePackSwitcherProps } from "../theme-pack-switcher/index.js";
+/** The `settings` subset this factory reads — the package feature flags.
  *  A structural subset so the host can pass its full `Settings` object. */
 export interface BodyEndIslandsSettings {
     aiAssistant: boolean;
     imageEnlarge: boolean;
     mermaid: boolean;
     /** Gates the pure-SSR `<PageLoadingOverlay/>` mount (zudolab/zudo-doc#2482),
-     *  mirroring the host gate and `enableClientRouter`'s on package-owned routes.
-     *  Optional so adding it is NOT a breaking change for external callers that
-     *  construct this documented subset — this is an exported package subpath API.
-     *  `undefined` is treated as `false` (no overlay) at the mount site, preserving
-     *  pre-#2482 behavior; internal callers always pass the full `Settings`. */
-    dynamicPageTransition?: boolean;
-    /** Gates the `DesignTokenPanelBootstrap` island mount (#2658). Optional for
-     *  the same external-caller-compat reason as `dynamicPageTransition` above.
-     *  `undefined` is treated as `false` (no panel island). Even when `true`,
-     *  nothing mounts unless `deps.DesignTokenPanelBootstrap` was also supplied
-     *  — see {@link BodyEndIslandsDeps}. */
-    designTokenPanel?: boolean;
+     *  mirroring the host gate and `enableClientRouter` on package-owned routes. */
+    dynamicPageTransition: boolean;
+    /** Gates the `DesignTokenPanelBootstrap` island mount (#2658). Even when
+     *  `true`, nothing mounts unless `deps.DesignTokenPanelBootstrap` was also
+     *  supplied — see {@link BodyEndIslandsDeps}. */
+    designTokenPanel: boolean;
     /**
-     * Gates the `FindInPageInit` island mount (zudolab/zudo-doc#2689). Optional
-     * for the same external-caller-compat reason as `dynamicPageTransition`/
-     * `designTokenPanel` above. `undefined` is treated as `false` (no island).
+     * Gates the `FindInPageInit` island mount (zudolab/zudo-doc#2689).
      * Controls the PACKAGE-DEFAULT `BodyEndIslands` slot only — a host that
      * overrides the `BodyEndIslands` chrome binding must mount `FindInPageInit`
      * itself.
      */
-    findInPage?: boolean;
+    findInPage: boolean;
+    /**
+     * Gates the `ThemePackSwitcher` flyout island mount (ADR
+     * `docs/adr/theme-packs.md` Decision 7; #2821). Optional — the field is
+     * optional on the host `Settings` census too (default `false`). Even when
+     * `true`, nothing mounts unless `deps.themePackSwitcherProps` AND
+     * `deps.ThemePackSwitcher` were also supplied — see
+     * {@link BodyEndIslandsDeps}.
+     */
+    themePackSwitcher?: boolean;
 }
 /** Dependencies injected by `_chrome.tsx` (carries the virtual-module settings). */
 export interface BodyEndIslandsDeps {
@@ -47,6 +49,20 @@ export interface BodyEndIslandsDeps {
      * not a crash.
      */
     DesignTokenPanelBootstrap?: FactoryComponent;
+    /**
+     * SSR props for the theme-pack switcher flyout (#2821) — derived from
+     * `ctx.themePackRegistry` by `chrome/derive.tsx` (only the chrome-derive
+     * path knows the registry). `null`/omitted renders the feature inert even
+     * when `settings.themePackSwitcher` is `true`.
+     */
+    themePackSwitcherProps?: ThemePackSwitcherProps | null;
+    /**
+     * The real `ThemePackSwitcher` island component (#2821), injected by
+     * `chrome/derive.tsx` (which statically imports it — the island-scanner
+     * reachability chain, mirroring `DesignTokenPanelBootstrap` above).
+     * Omitted means no switcher island mounts — a safe no-op, not a crash.
+     */
+    ThemePackSwitcher?: FactoryComponent;
 }
 /** Props for the produced `BodyEndIslands` component. */
 export interface BodyEndIslandsProps {
@@ -59,4 +75,10 @@ export interface BodyEndIslandsProps {
      */
     aiChatBodyLabel?: string;
 }
+/**
+ * Build the package-default `BodyEndIslands` component bound to the host's
+ * serializable `settings` flags. The produced component matches the
+ * `createDocBodyEnd` `BodyEndIslands` slot contract
+ * (`(props: { basePath: string }) => JSX.Element`).
+ */
 export declare function createBodyEndIslands(deps: BodyEndIslandsDeps): (props: BodyEndIslandsProps) => JSX.Element;

package/dist/doc-body-end-islands/index.js

@@ -5,22 +5,20 @@ import { ImageEnlarge, ImageEnlargeSsrFallback } from "../image-enlarge/index.js
 import { MermaidEnlarge, MermaidEnlargeSsrFallback } from "../mermaid-enlarge/index.js";
 import { FindInPageInit } from "../find-in-page/index.js";
 import { PageLoadingOverlay } from "../page-loading/index.js";
+import { createDesignTokenPanelIsland } from "./design-token-panel-island.js";
+import { createThemePackSwitcherIsland } from "./theme-pack-switcher-island.js";
 const DEFAULT_AI_CHAT_BODY_LABEL = "Ask a question about the documentation.";
-const ZDTP_TOGGLE_SHIM_SRC = `(function(){
-if(window.__zdtpToggleShimInstalled)return;
-window.__zdtpToggleShimInstalled=true;
-var pending=false;
-function shim(){pending=true;}
-window.addEventListener('toggle-design-token-panel',shim);
-window.__zdtpReadyClicks=function(){
-window.removeEventListener('toggle-design-token-panel',shim);
-delete window.__zdtpReadyClicks;
-if(pending){pending=false;window.dispatchEvent(new CustomEvent('toggle-design-token-panel'));}
-};
-})();`;
 function createBodyEndIslands(deps) {
   const { settings } = deps;
-  const DesignTokenPanelBootstrap = deps.DesignTokenPanelBootstrap;
+  const DesignTokenPanelIsland = createDesignTokenPanelIsland({
+    designTokenPanel: settings.designTokenPanel,
+    DesignTokenPanelBootstrap: deps.DesignTokenPanelBootstrap
+  });
+  const ThemePackSwitcherIsland = createThemePackSwitcherIsland({
+    themePackSwitcher: settings.themePackSwitcher === true,
+    themePackSwitcherProps: deps.themePackSwitcherProps ?? null,
+    ThemePackSwitcher: deps.ThemePackSwitcher
+  });
   function BodyEndIslands({
     basePath,
     aiChatBodyLabel = DEFAULT_AI_CHAT_BODY_LABEL
@@ -42,20 +40,14 @@ function createBodyEndIslands(deps) {
       ssrFallback: /* @__PURE__ */ jsx(MermaidEnlargeSsrFallback, {}),
       children: /* @__PURE__ */ jsx(MermaidEnlarge, {})
     }) : null;
-    const designTokenPanelBootstrap = settings.designTokenPanel && DesignTokenPanelBootstrap ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: ZDTP_TOGGLE_SHIM_SRC } }),
-      Island({
-        when: "load",
-        children: /* @__PURE__ */ jsx(DesignTokenPanelBootstrap, {})
-      })
-    ] }) : null;
     const findInPageInit = settings.findInPage ? Island({
       when: "load",
       children: /* @__PURE__ */ jsx(FindInPageInit, {})
     }) : null;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       settings.dynamicPageTransition ? /* @__PURE__ */ jsx(PageLoadingOverlay, {}) : null,
-      designTokenPanelBootstrap,
+      /* @__PURE__ */ jsx(DesignTokenPanelIsland, {}),
+      /* @__PURE__ */ jsx(ThemePackSwitcherIsland, {}),
       findInPageInit,
       aiAssistant,
       imageEnlarge,

package/dist/doc-body-end-islands/theme-pack-switcher-island.d.ts

@@ -0,0 +1,37 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import type { FactoryComponent } from "../factory-context/index.js";
+import type { ThemePackSwitcherProps } from "../theme-pack-switcher/index.js";
+export interface ThemePackSwitcherIslandDeps {
+    /** The `settings.themePackSwitcher` gate (default `false`). */
+    themePackSwitcher: boolean;
+    /**
+     * SSR props derived from `ctx.themePackRegistry` by
+     * `chrome/derive.tsx` (ADR theme-packs.md Decision 7 "Switcher data
+     * flow"). `null` means the registry was not threaded
+     * (`themePackRegistry: null`) — the whole feature renders inert even when
+     * the settings gate is on.
+     */
+    themePackSwitcherProps: ThemePackSwitcherProps | null;
+    /**
+     * The real `ThemePackSwitcher` island component. Injected (not imported
+     * here) mirroring `design-token-panel-island.tsx`'s shape: the props above
+     * only exist on the chrome-derive path, so `chrome/derive.tsx` supplies the
+     * statically imported package component as the default for every
+     * `createChrome` consumer (route → chrome → derive → component is the
+     * island-scanner reachability chain — the #2480 lesson). Omitted means no
+     * island mounts even when the gate is on — a safe no-op, not a crash.
+     */
+    ThemePackSwitcher?: FactoryComponent;
+}
+/**
+ * Bind the settings gate + the SSR-derived props to the theme-pack switcher
+ * flyout island mount (`Island({ when: "load" })` — the island SSRs its
+ * launcher markup and hydrates at load; its serializable props ride the
+ * marker's `data-props` JSON). Kept separate from the rest of the package
+ * body-end islands so a host BodyEndIslands override can be composed with
+ * this package-owned mount without duplicating the other package defaults
+ * (the `design-token-panel-island.tsx` pattern).
+ */
+export declare function createThemePackSwitcherIsland(deps: ThemePackSwitcherIslandDeps): () => JSX.Element | null;

package/dist/doc-body-end-islands/theme-pack-switcher-island.js

@@ -0,0 +1,18 @@
+import { Fragment, jsx } from "preact/jsx-runtime";
+import { Island } from "@takazudo/zfb";
+function createThemePackSwitcherIsland(deps) {
+  const ThemePackSwitcher = deps.ThemePackSwitcher;
+  function ThemePackSwitcherIsland() {
+    if (!deps.themePackSwitcher || deps.themePackSwitcherProps === null || !ThemePackSwitcher) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children: Island({
+      when: "load",
+      children: /* @__PURE__ */ jsx(ThemePackSwitcher, { ...deps.themePackSwitcherProps })
+    }) });
+  }
+  return ThemePackSwitcherIsland;
+}
+export {
+  createThemePackSwitcherIsland
+};

package/dist/doc-content-header/index.js

@@ -37,7 +37,7 @@ function createDocContentHeader(ctx) {
           children: t("doc.fallbackNotice", locale)
         }
       ),
-      entry.data.description && /* @__PURE__ */ jsx("p", { class: "mb-vsp-lg text-title text-muted", children: entry.data.description }),
+      entry.data.description && /* @__PURE__ */ jsx("p", { class: "mb-vsp-lg text-title text-muted", "data-doc-description": true, children: entry.data.description }),
       /* @__PURE__ */ jsx(
         FrontmatterPreview,
         {

package/dist/doc-history-area/index.d.ts

@@ -8,8 +8,8 @@ export interface DocHistoryMetaEntry {
     author: string;
     createdDate: string;
     updatedDate: string;
-    /** Source file extension (".mdx" | ".md") — optional in older manifests. */
-    ext?: string;
+    /** Source file extension recorded by the current build-time manifest. */
+    ext: ".mdx" | ".md";
 }
 /** Settings subset read by the DocHistoryArea factory. */
 export interface DocHistoryAreaSettings {
@@ -36,12 +36,18 @@ export interface DocHistoryAreaProps {
     /**
      * Raw zfb entry slug (relative path without extension), e.g.
      * "getting-started/intro" or "getting-started/index". Appended with
-     * the source extension from the build-time manifest (".mdx" fallback)
-     * to form the file path passed to buildGitHubSourceUrl.
+     * the source extension from the build-time manifest to form the file path
+     * passed to buildGitHubSourceUrl.
      * Omit for auto-index pages (no underlying MDX file) — sourceUrl
      * will be suppressed automatically.
      */
     entrySlug?: string;
+    /**
+     * Source extension from the current content entry. Used only when the file
+     * has no manifest metadata yet (for example, an untracked file or a build
+     * with `SKIP_DOC_HISTORY=1`). A present manifest owns its required `ext`.
+     */
+    sourceFileExt?: ".mdx" | ".md";
     /**
      * Content directory for the active locale, e.g. "src/content/docs"
      * or "src/content/docs-ja". Combined with entrySlug to build the

package/dist/doc-history-area/index.js

@@ -22,6 +22,7 @@ function createDocHistoryArea(ctx) {
     slug,
     locale,
     entrySlug,
+    sourceFileExt,
     contentDir,
     isFallback
   }) {
@@ -62,8 +63,8 @@ function createDocHistoryArea(ctx) {
       )
     });
     const utilSettings = settings.bodyFootUtilArea;
-    const sourceExt = meta?.ext ?? ".mdx";
-    const sourceUrl = utilSettings && utilSettings.viewSourceLink && entrySlug && contentDir ? buildGitHubSourceUrl(contentDir, entrySlug + sourceExt) : null;
+    const sourceExt = meta ? meta.ext : sourceFileExt;
+    const sourceUrl = utilSettings && utilSettings.viewSourceLink && entrySlug && sourceExt && contentDir ? buildGitHubSourceUrl(contentDir, entrySlug + sourceExt) : null;
     const viewSourceLabel = t("doc.viewSource", locale);
     void historyLabel;
     return /* @__PURE__ */ jsx(

package/dist/doc-metainfo-area/index.d.ts

@@ -8,6 +8,7 @@ export interface DocHistoryMetaEntry {
     author: string;
     createdDate: string;
     updatedDate: string;
+    ext: ".mdx" | ".md";
 }
 /** Settings subset read by the DocMetainfoArea factory. */
 export interface DocMetainfoAreaSettings {

package/dist/doc-page-props/index.d.ts

@@ -1,6 +1,7 @@
 export type { HeadingItem } from "../extract-headings/index.js";
 import type { HeadingItem } from "../extract-headings/index.js";
 import type { BreadcrumbItem } from "../breadcrumb/types.js";
+import type { CollectionEntry } from "@takazudo/zfb/content";
 /**
  * Nav tree node shape as consumed by doc-route pages.
  *
@@ -35,37 +36,20 @@ export interface DocPageFrontmatter {
     draft?: boolean;
     unlisted?: boolean;
     standalone?: boolean;
+    sidebar_position?: number;
+    sidebar_label?: string;
     category_no_page?: boolean;
+    category_sort_order?: "asc" | "desc";
     pagination_prev?: string | null;
     pagination_next?: string | null;
     tags?: string[];
     [key: string]: unknown;
 }
 /**
- * A zfb content collection entry augmented with the `id`/`collection` fields
- * the host's `@/utils/docs` helpers expect, plus the typed `data` and
- * renderer surface.
- *
- * Structural counterpart of the host's `DocPageEntry` (from
- * `pages/lib/doc-page-props.ts`). The host stub re-exports this type under
- * the original name.
+ * The native zfb collection entry with docs frontmatter. Route consumers
+ * derive canonical route slugs from `entry.data.slug ?? toRouteSlug(entry.slug)`.
  */
-export interface DocPageEntry {
-    /** zfb content engine slug (filename without `.md`/`.mdx`). */
-    slug: string;
-    /** Bridged from `slug` for host `@/utils/docs` compat. */
-    id: string;
-    /** Collection name, e.g. "docs", "docs-ja", "docs-v-1.0". */
-    collection: string;
-    /** Parsed frontmatter. Structural superset of `DocPageFrontmatter`. */
-    data: DocPageFrontmatter;
-    /** Raw MDX body (for heading extraction). */
-    body?: string;
-    /** zfb module specifier (for Content bridge). */
-    module_specifier: string;
-    /** zfb content renderer — callable Preact component. */
-    Content: unknown;
-}
+export type DocPageEntry = CollectionEntry<DocPageFrontmatter>;
 export interface AutoIndexNode extends DocNavNode {
     children: DocNavNode[];
 }

package/dist/doc-page-renderer/index.d.ts

@@ -121,6 +121,7 @@ export interface DocPageRendererDeps {
         slug: string;
         locale: string;
         entrySlug?: string;
+        sourceFileExt?: ".mdx" | ".md";
         contentDir?: string;
         isFallback?: boolean;
     }) => VNode | null;

package/dist/doc-page-renderer/index.js

@@ -102,6 +102,7 @@ function createRenderDocPage(ctx) {
               slug,
               locale,
               entrySlug: props.entry.slug,
+              sourceFileExt: props.entry.module_specifier.endsWith(".mdx") ? ".mdx" : props.entry.module_specifier.endsWith(".md") ? ".md" : void 0,
               contentDir: opts.docHistoryContentDir,
               isFallback
             }

package/dist/doc-page-shell/index.js

@@ -1,29 +1,32 @@
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 import { Island } from "@takazudo/zfb";
 import { DocLayoutWithDefaults } from "../doclayout/index.js";
-import { Toc, MobileToc, getTocTitle } from "../toc/index.js";
-import { Breadcrumb } from "../breadcrumb/index.js";
+import { MobileToc, getTocTitle } from "../toc/index.js";
 import { NavCardGrid } from "../nav-indexing/index.js";
 import {
   createSidebarPrepaint,
   createSidebarVisibilityPrepaint
 } from "../sidebar-prepaint/index.js";
 import { createHeadWithDefaults } from "../head-with-defaults/index.js";
-import { createSidebarWithDefaults } from "../sidebar-with-defaults/index.js";
-import { createHeaderWithDefaults } from "../header-with-defaults/index.js";
-import { createFooterWithDefaults } from "../footer-with-defaults/index.js";
+import { resolveThemePackSsrSlug } from "../theme/theme-pack-provider.js";
 import { createDocBodyEnd } from "../doc-body-end/index.js";
-import { createDocPager } from "../doc-pager/index.js";
 import { deriveComposeMetaTitle } from "../chrome/derive.js";
+import { derivePrimaryChromeSlots } from "../chrome/primary-slots.js";
 import { assertChromeContext } from "../chrome/assert-chrome-context.js";
 function createDocPageShell(ctx) {
   assertChromeContext(ctx, "createDocPageShell");
   const settings = ctx.settings;
   const composeMetaTitle = deriveComposeMetaTitle(ctx);
   const HeadWithDefaults = createHeadWithDefaults(ctx);
-  const SidebarWithDefaults = createSidebarWithDefaults(ctx);
-  const HeaderWithDefaults = createHeaderWithDefaults(ctx);
-  const FooterWithDefaults = createFooterWithDefaults(ctx);
+  const {
+    Header: HeaderWithDefaults,
+    Footer: FooterWithDefaults,
+    Sidebar: SidebarWithDefaults,
+    Toc,
+    Breadcrumb,
+    DocPager
+  } = derivePrimaryChromeSlots(ctx);
+  const customTocIsPresent = ctx.hostBindings.Toc !== void 0;
   const sidebarToggleEnabled = Boolean(
     ctx.settings.sidebarToggle
   );
@@ -34,7 +37,10 @@ function createDocPageShell(ctx) {
     sidebarToggle: sidebarToggleEnabled
   });
   const DocBodyEnd = createDocBodyEnd(ctx);
-  const DocPager = createDocPager(ctx);
+  const dataThemePack = resolveThemePackSsrSlug(
+    ctx.themePackRegistry,
+    ctx.settings
+  );
   function DocPageShell(props) {
     const {
       kind,
@@ -66,7 +72,7 @@ function createDocPageShell(ctx) {
     } = props;
     const tocTitle = getTocTitle(locale);
     const shouldRenderToc = !hideToc && headings.length > 0;
-    const tocOverride = shouldRenderToc ? Island({
+    const tocOverride = shouldRenderToc ? customTocIsPresent ? /* @__PURE__ */ jsx(Toc, { headings, title: tocTitle }) : Island({
       when: "load",
       children: /* @__PURE__ */ jsx(Toc, { headings, title: tocTitle })
     }) : void 0;
@@ -84,6 +90,7 @@ function createDocPageShell(ctx) {
           /* @__PURE__ */ jsx(SidebarVisibilityPrepaint, { hideSidebar })
         ] }),
         lang: locale,
+        dataThemePack,
         noindex: settings.noindex,
         hideSidebar,
         hideToc,
@@ -128,7 +135,7 @@ function createDocPageShell(ctx) {
           /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("h1", { class: "text-heading font-bold mb-vsp-xs", children: autoIndexLabel }),
             metainfoSlot,
-            description && /* @__PURE__ */ jsx("p", { class: "mb-vsp-lg text-title text-muted", children: description }),
+            description && /* @__PURE__ */ jsx("p", { class: "mb-vsp-lg text-title text-muted", "data-doc-description": true, children: description }),
             /* @__PURE__ */ jsx(NavCardGrid, { children: autoIndexChildren ?? [] })
           ] })
         ) : (

package/dist/doc-pager/index.js

@@ -5,7 +5,7 @@ function createDocPager(ctx) {
   assertChromeContext(ctx, "createDocPager");
   const t = ctx.t;
   function DocPager({ prev, next, locale }) {
-    return /* @__PURE__ */ jsxs("nav", { class: "mt-vsp-2xl grid grid-cols-2 gap-hsp-xl", children: [
+    return /* @__PURE__ */ jsxs("nav", { class: "mt-vsp-2xl grid grid-cols-2 gap-hsp-xl", "data-doc-pager": true, children: [
       prev ? /* @__PURE__ */ jsxs(
         "a",
         {