@takazudo/zudo-doc 5.24.1 → 5.25.0

package/CHANGELOG.md

@@ -8,6 +8,31 @@ The format is based on Keep a Changelog, and release notes are generated from th
 
 No unreleased changes.
 
+## [5.25.0] - 2026-09-16
+
+### Features
+
+- Added a `siteTreeNavSecondary` setting: top-level categories named here move out of the home page's card grid into a compact secondary link row, and the "See all tags" link was restyled to match it. There is no CLI or prompt surface yet — set it by hand in your config after scaffolding. (42bd642c5)
+- Added an optional `sidebarNodes` prop to `HeaderWithDefaultsProps`, letting a host override the mobile-drawer sidebar tree per render (as a fixed array or a callback with a lazy `buildDefault()`) without replacing the whole `Header` chrome component. (01a7d088d)
+- Added zfb-free asset-viewer subpaths — `./asset-page/{body,components,script}`, `./asset-index-page`, and `./asset-index-page/{body,tree,script}` — so `AssetPageBody` / `AssetIndexPageBody` and their `resolveAsset*Labels(t, locale)` helpers can be imported and rendered without a `ChromeContext` or any `@takazudo/zfb*` package. `./asset-page` and `./asset-index-page` remain the zfb-bound factories; neither body provides `DocLayout`, so the caller owns the outer page shell. (558aa58cf)
+- Applied the sitewide link-color rule across package chrome, so link styling is now consistent everywhere instead of varying per component. Prose links stay accent + underline; every other link sits at `text-fg` (or `text-muted` in tertiary chrome) and turns accent on hover and focus, with static underlines removed outside prose and tertiary inline rows. This covers the footer, breadcrumb, and DocPager (ffef68952), nav-indexing lists, note-tray parts, and site-tree-nav focus (4ed4e2f7d), nav-indexing card grids (224232644), and the asset controls and image-caption viewer link (87ee6c1d5). Expect visible link-color and underline changes if you relied on the previous per-component styling.
+
+### Bug Fixes
+
+- The asset page no longer reuses a singleton prepaint-script VNode across SSR passes, which could let one render's prepaint state leak into another. (9bc892343)
+- The `foundry` theme pack keeps its footer copyright underline, which the link-color rule work had removed. (dcec0daeb)
+
+### Other Changes
+
+- Removed the `.zudo-doc/routes-src` project-local staging step for package-owned route injection. It was a workaround for zfb not resolving `virtual:*` imports from route files under `node_modules`; zfb resolves those imports directly now, so the published `routes-src/` file is injected without a staging copy. If your project has a leftover `<project>/.zudo-doc/` directory, it is now inert and can be deleted. (c56b24342)
+- The `@takazudo/zfb`, `@takazudo/zfb-runtime`, and `@takazudo/zfb-md-wasm` peer dependency floors are now `^2.18.0` (e4d4b64b3). That release reworks package-injected routes and plugin virtual modules — the islands scanner resolves plugin virtual modules and is seeded with package-route entrypoints, dev CSS content globs are seeded from injected routes, and injected-route entrypoints are staged as exact files that SSR virtual modules may import. It changes no API, export, or config default, so existing projects need no migration beyond having zfb 2.18.0 installed.
+
+## [5.24.2] - 2026-09-15
+
+### Bug Fixes
+
+- `katex` and `diff` are optional peers again in practice: a site with `math` and `docHistory` off now builds without either installed. Both are loaded through a rejection-handled dynamic import instead of a static or unguarded import that failed with `Could not resolve "katex"` / `Could not resolve "diff"` under `packageOwnedRoutes`. Rendering `` without `katex` installed throws a clear error telling you to install it and set `math: true`. (72f36d027)
+
 ## [5.24.1] - 2026-09-15
 
 ### Bug Fixes

package/dist/asset-components/asset-card.js

@@ -55,7 +55,7 @@ function createAssetCard(context) {
           /* @__PURE__ */ jsxs(
             "a",
             {
-              className: "text-accent hover:underline focus-visible:underline",
+              className: "text-fg hover:text-accent focus-visible:text-accent hover:underline focus-visible:underline",
               href: viewerHref,
               children: [
                 assetComponentText(
@@ -70,7 +70,7 @@ function createAssetCard(context) {
           /* @__PURE__ */ jsxs(
             "a",
             {
-              className: "text-accent hover:underline focus-visible:underline",
+              className: "text-fg hover:text-accent focus-visible:text-accent hover:underline focus-visible:underline",
               href: rawHref,
               download: true,
               children: [

package/dist/asset-components/asset-code.js

@@ -74,7 +74,7 @@ function createAssetCode(context) {
         /* @__PURE__ */ jsxs(
           "a",
           {
-            className: "text-accent hover:underline focus-visible:underline",
+            className: "text-fg hover:text-accent focus-visible:text-accent hover:underline focus-visible:underline",
             href: viewerHref,
             children: [
               assetComponentText(

package/dist/asset-index-page/body.d.ts

@@ -0,0 +1,80 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+import type { ComponentType, VNode } from "preact";
+import type { AssetIndexEntry } from "../route-context-payload/types.js";
+import { type AssetTreeNode } from "./tree.js";
+/**
+ * Localized strings `AssetIndexPageBody` needs to render, resolved ahead of
+ * time (typically via `resolveAssetIndexPageLabels`) so the body needs no
+ * `t()`/`ctx` of its own.
+ *
+ * `fileCount`, `fileCountSingle`, `folderCount`, `folderCountSingle`, and
+ * `lines` are raw translation templates and still carry the literal
+ * `"{count}"` placeholder — they are NOT pre-expanded. The body substitutes
+ * the placeholder itself (via `countLabel` for the two counts, and per-file
+ * for `lines`) because the substituted count depends on the specific node/
+ * asset being rendered, not on locale alone. Every other field below is an
+ * already-resolved, ready-to-render string.
+ */
+export interface AssetIndexPageLabels {
+    /** Page/crumb title (e.g. "Assets") — doubles as the eyebrow badge and `<h1>` text. */
+    crumb: string;
+    /** Secondary eyebrow badge, e.g. "Index". */
+    indexBadge: string;
+    /** Description shown under the title. */
+    indexDescription: string;
+    /** Raw `asset.fileCount` template — see the interface doc comment above. */
+    fileCount: string;
+    /** Raw `asset.fileCountSingle` template. */
+    fileCountSingle: string;
+    /** Raw `asset.folderCount` template. */
+    folderCount: string;
+    /** Raw `asset.folderCountSingle` template. */
+    folderCountSingle: string;
+    expandAll: string;
+    collapseAll: string;
+    indexEmpty: string;
+    /** Raw `asset.lines` template. */
+    lines: string;
+}
+/**
+ * Builds `AssetIndexPageLabels` from a `t(key, locale)` translator, bound to
+ * the given `locale` — NOT the default locale, so a localized page gets its
+ * own strings even when `t` itself falls back internally.
+ */
+export declare function resolveAssetIndexPageLabels(t: (key: string, locale?: string) => string, locale: string): AssetIndexPageLabels;
+export declare function iconFor(asset: AssetIndexEntry): ComponentType<{
+    className?: string;
+}>;
+export declare function AssetTree({ node, base, routePrefix, locale, fileCountLabel, fileCountSingleLabel, linesLabel, root }: {
+    node: AssetTreeNode;
+    base: string;
+    routePrefix: string;
+    locale?: string;
+    fileCountLabel: string;
+    fileCountSingleLabel: string;
+    linesLabel: string;
+    root?: boolean;
+}): VNode;
+export interface AssetIndexPageBodyProps {
+    /** Every asset entry in the index. */
+    entries: AssetIndexEntry[];
+    /** Localized strings — see `resolveAssetIndexPageLabels()`. */
+    labels: AssetIndexPageLabels;
+    /** Resolved `settings.base`, forwarded to file link hrefs. */
+    base: string;
+    /** Resolved asset-viewer route prefix, forwarded to file link hrefs. */
+    routePrefix: string;
+    /** Asset-viewer source directory (e.g. `assets`), rendered verbatim as `public/${dir}/`. */
+    dir: string;
+    /** Locale segment (undefined for the default locale), forwarded to file link hrefs. */
+    locale?: string;
+}
+/**
+ * Renders the asset index page body — header, file/folder counts, toolbar,
+ * the nested tree (or empty state), and the inline bootstrap script —
+ * exactly what `createAssetIndexPageView` placed inline as
+ * `DocLayoutWithDefaults`'s children before the #4223 split. Plain props
+ * only, no `ChromeContext`.
+ */
+export declare function AssetIndexPageBody({ entries, labels, base, routePrefix, dir, locale }: AssetIndexPageBodyProps): VNode;

package/dist/asset-index-page/body.js

@@ -0,0 +1,116 @@
+import { jsx, jsxs } from "preact/jsx-runtime";
+import { formatAssetBytes } from "../asset-components/index.js";
+import { assetViewerHref } from "../asset-path/index.js";
+import { facetLabel, kindLabel } from "../asset-page/shared.js";
+import {
+  ChevronRight,
+  FileArchive,
+  FileCode,
+  FileGeneric,
+  FileImage,
+  FilePdf,
+  FileText,
+  FileVideo,
+  Folder,
+  FolderOpen
+} from "../icons/index.js";
+import { ASSET_INDEX_PAGE_SCRIPT } from "./script.js";
+import { basename, buildAssetTree, countLabel, folderCount } from "./tree.js";
+const ARCHIVE_EXTENSIONS = /* @__PURE__ */ new Set(["zip", "tar", "gz", "tgz", "7z", "rar"]);
+function resolveAssetIndexPageLabels(t, locale) {
+  return {
+    crumb: t("asset.crumb", locale),
+    indexBadge: t("asset.indexBadge", locale),
+    indexDescription: t("asset.indexDescription", locale),
+    fileCount: t("asset.fileCount", locale),
+    fileCountSingle: t("asset.fileCountSingle", locale),
+    folderCount: t("asset.folderCount", locale),
+    folderCountSingle: t("asset.folderCountSingle", locale),
+    expandAll: t("asset.expandAll", locale),
+    collapseAll: t("asset.collapseAll", locale),
+    indexEmpty: t("asset.indexEmpty", locale),
+    lines: t("asset.lines", locale)
+  };
+}
+function iconFor(asset) {
+  const extension = basename(asset.path).split(".").at(-1)?.toLowerCase();
+  if (asset.kind === "other" && extension && ARCHIVE_EXTENSIONS.has(extension)) return FileArchive;
+  const icons = {
+    code: FileCode,
+    text: FileText,
+    image: FileImage,
+    video: FileVideo,
+    pdf: FilePdf,
+    other: FileGeneric
+  };
+  return icons[asset.kind];
+}
+function AssetTree({ node, base, routePrefix, locale, fileCountLabel, fileCountSingleLabel, linesLabel, root = false }) {
+  return /* @__PURE__ */ jsxs("ul", { "data-zd-asset-tree": root ? true : void 0, children: [
+    node.dirs.map((dir) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("details", { open: true, children: [
+      /* @__PURE__ */ jsxs("summary", { class: "flex cursor-pointer items-center gap-hsp-xs rounded px-hsp-sm py-vsp-3xs text-small hover:bg-accent/10 focus-visible:bg-accent/10", children: [
+        /* @__PURE__ */ jsx(ChevronRight, { className: "h-icon-xs w-icon-xs shrink-0 text-muted transition-transform" }),
+        /* @__PURE__ */ jsx(Folder, { className: "h-icon-sm w-icon-sm shrink-0 text-muted" }),
+        /* @__PURE__ */ jsx(FolderOpen, { className: "h-icon-sm w-icon-sm shrink-0 text-muted" }),
+        /* @__PURE__ */ jsxs("span", { class: "min-w-0 truncate font-mono text-fg", children: [
+          dir.name,
+          "/"
+        ] }),
+        /* @__PURE__ */ jsxs("span", { class: "ml-auto hidden whitespace-nowrap pl-hsp-lg text-caption text-muted sm:block", children: [
+          countLabel(dir.fileCount, fileCountLabel, fileCountSingleLabel),
+          " \xB7 ",
+          formatAssetBytes(dir.bytes)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(AssetTree, { node: dir, base, routePrefix, locale, fileCountLabel, fileCountSingleLabel, linesLabel })
+    ] }) })),
+    node.files.map((asset) => {
+      const Icon = iconFor(asset);
+      const facet = facetLabel(asset, asset.lines !== void 0 ? linesLabel.replace("{count}", String(asset.lines)) : void 0);
+      const meta = [kindLabel(asset), facet, formatAssetBytes(asset.bytes)].filter(Boolean).join(" \xB7 ");
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", { href: assetViewerHref({ base, routePrefix, path: asset.path, locale }), title: asset.name, class: "flex min-w-0 items-center gap-hsp-xs rounded px-hsp-sm py-vsp-3xs text-small text-fg hover:bg-accent/10 hover:text-accent hover:underline focus-visible:bg-accent/10 focus-visible:text-accent focus-visible:underline", children: [
+        /* @__PURE__ */ jsx(Icon, { className: "h-icon-sm w-icon-sm shrink-0 text-muted" }),
+        /* @__PURE__ */ jsx("span", { class: "min-w-0 truncate font-mono", children: basename(asset.path) }),
+        /* @__PURE__ */ jsx("span", { class: "ml-auto hidden whitespace-nowrap pl-hsp-lg text-caption text-muted sm:block", children: meta })
+      ] }) });
+    })
+  ] });
+}
+function AssetIndexPageBody({ entries, labels, base, routePrefix, dir, locale }) {
+  const tree = buildAssetTree(entries);
+  const folders = folderCount(tree);
+  return /* @__PURE__ */ jsxs("div", { "data-zd-asset-index-page": true, children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsxs("div", { class: "mb-vsp-xs flex flex-wrap items-center gap-hsp-xs text-micro tracking-wide uppercase", children: [
+        /* @__PURE__ */ jsx("span", { class: "rounded-full border border-muted px-hsp-sm py-vsp-3xs text-fg", children: labels.crumb }),
+        /* @__PURE__ */ jsx("span", { class: "rounded-full border border-muted px-hsp-sm py-vsp-3xs text-muted", children: labels.indexBadge })
+      ] }),
+      /* @__PURE__ */ jsx("h1", { class: "mb-vsp-xs border-b border-fg pb-vsp-xs font-mono text-heading font-bold leading-tight break-words", children: labels.crumb }),
+      /* @__PURE__ */ jsxs("div", { "data-doc-metainfo": true, class: "mb-vsp-md flex flex-wrap items-center gap-x-hsp-md gap-y-vsp-2xs text-caption text-fg", children: [
+        /* @__PURE__ */ jsx("span", { children: countLabel(tree.fileCount, labels.fileCount, labels.fileCountSingle) }),
+        /* @__PURE__ */ jsx("span", { children: countLabel(folders, labels.folderCount, labels.folderCountSingle) }),
+        /* @__PURE__ */ jsx("span", { children: formatAssetBytes(tree.bytes) })
+      ] }),
+      /* @__PURE__ */ jsx("p", { class: "mb-vsp-lg text-title text-muted", children: labels.indexDescription })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { class: "mb-vsp-sm flex flex-wrap items-center justify-between gap-hsp-sm text-caption", children: [
+      /* @__PURE__ */ jsxs("span", { class: "font-mono text-muted", children: [
+        "public/",
+        dir,
+        "/"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { class: "flex gap-hsp-sm", children: [
+        /* @__PURE__ */ jsx("button", { type: "button", disabled: true, "data-zd-asset-index-action": "expand", class: "text-fg hover:text-accent focus-visible:text-accent", children: labels.expandAll }),
+        /* @__PURE__ */ jsx("button", { type: "button", disabled: true, "data-zd-asset-index-action": "collapse", class: "text-fg hover:text-accent focus-visible:text-accent", children: labels.collapseAll })
+      ] })
+    ] }),
+    entries.length > 0 ? /* @__PURE__ */ jsx(AssetTree, { root: true, node: tree, base, routePrefix, locale, fileCountLabel: labels.fileCount, fileCountSingleLabel: labels.fileCountSingle, linesLabel: labels.lines }) : /* @__PURE__ */ jsx("p", { class: "text-small text-muted", "data-zd-asset-index-empty": true, children: labels.indexEmpty }),
+    /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: ASSET_INDEX_PAGE_SCRIPT } })
+  ] });
+}
+export {
+  AssetIndexPageBody,
+  AssetTree,
+  iconFor,
+  resolveAssetIndexPageLabels
+};

package/dist/asset-index-page/index.d.ts

@@ -5,18 +5,12 @@ import type { ChromeContext } from "../factory-context/index.js";
 import type { AssetIndexEntry } from "../route-context-payload/types.js";
 import type { Settings } from "../settings.js";
 export { ASSET_INDEX_PAGE_SCRIPT } from "./script.js";
-export interface AssetTreeNode {
-    name: string;
-    dirs: AssetTreeNode[];
-    files: AssetIndexEntry[];
-    fileCount: number;
-    bytes: number;
-}
+export { buildAssetTree } from "./tree.js";
+export type { AssetTreeNode } from "./tree.js";
+export { AssetIndexPageBody, AssetTree, iconFor, resolveAssetIndexPageLabels, type AssetIndexPageBodyProps, type AssetIndexPageLabels, } from "./body.js";
 export interface AssetIndexPageViewProps {
     entries: AssetIndexEntry[];
     locale?: string;
 }
-/** Build a sorted directory tree and aggregate every directory's subtree totals. */
-export declare function buildAssetTree(entries: AssetIndexEntry[]): AssetTreeNode;
 /** Build the package-owned wide asset index from a chrome context. */
 export declare function createAssetIndexPageView<S extends Settings = Settings>(ctx: ChromeContext<S>): (props: AssetIndexPageViewProps) => JSX.Element;

package/dist/asset-index-page/index.js

@@ -1,122 +1,19 @@
-import { jsx, jsxs } from "preact/jsx-runtime";
-import { assetViewerHref } from "../asset-path/index.js";
-import { formatAssetBytes } from "../asset-components/index.js";
+import { jsx } from "preact/jsx-runtime";
 import { assertChromeContext } from "../chrome/assert-chrome-context.js";
 import { deriveBodyEndIslands, deriveComposeMetaTitle } from "../chrome/derive.js";
 import { derivePrimaryChromeSlots } from "../chrome/primary-slots.js";
 import { DocLayoutWithDefaults } from "../doclayout/index.js";
 import { createHeadWithDefaults } from "../head-with-defaults/index.js";
-import {
-  ChevronRight,
-  FileArchive,
-  FileCode,
-  FileGeneric,
-  FileImage,
-  FilePdf,
-  FileText,
-  FileVideo,
-  Folder,
-  FolderOpen
-} from "../icons/index.js";
 import { resolveThemePackSsrSlug } from "../theme/theme-pack-provider.js";
+import { AssetIndexPageBody, resolveAssetIndexPageLabels } from "./body.js";
 import { ASSET_INDEX_PAGE_SCRIPT } from "./script.js";
-import { ASSET_INDEX_PAGE_SCRIPT as ASSET_INDEX_PAGE_SCRIPT2 } from "./script.js";
-const ARCHIVE_EXTENSIONS = /* @__PURE__ */ new Set(["zip", "tar", "gz", "tgz", "7z", "rar"]);
-function basename(path) {
-  return path.split("/").at(-1) ?? path;
-}
-function freezeTree(node) {
-  const dirs = [...node.dirs.values()].sort((a, b) => a.name.localeCompare(b.name)).map(freezeTree);
-  const files = [...node.files].sort((a, b) => basename(a.path).localeCompare(basename(b.path)));
-  return {
-    name: node.name,
-    dirs,
-    files,
-    fileCount: files.length + dirs.reduce((total, dir) => total + dir.fileCount, 0),
-    bytes: files.reduce((total, file) => total + file.bytes, 0) + dirs.reduce((total, dir) => total + dir.bytes, 0)
-  };
-}
-function buildAssetTree(entries) {
-  const root = { name: "", dirs: /* @__PURE__ */ new Map(), files: [] };
-  for (const entry of entries) {
-    let node = root;
-    for (const segment of entry.dir.split("/").filter(Boolean)) {
-      let child = node.dirs.get(segment);
-      if (!child) {
-        child = { name: segment, dirs: /* @__PURE__ */ new Map(), files: [] };
-        node.dirs.set(segment, child);
-      }
-      node = child;
-    }
-    node.files.push(entry);
-  }
-  return freezeTree(root);
-}
-function folderCount(node) {
-  return node.dirs.reduce((total, dir) => total + 1 + folderCount(dir), 0);
-}
-function formatDuration(seconds) {
-  const rounded = Math.round(seconds);
-  return `${Math.floor(rounded / 60)}:${String(rounded % 60).padStart(2, "0")}`;
-}
-function kindLabel(asset) {
-  if (asset.language) return asset.language;
-  return asset.mime.split("/").at(-1)?.toUpperCase() ?? asset.kind.toUpperCase();
-}
-function facetLabel(asset, linesLabel) {
-  if (asset.lines !== void 0) return linesLabel.replace("{count}", String(asset.lines));
-  if (asset.kind === "video" && asset.durationSec !== void 0) return formatDuration(asset.durationSec);
-  if (asset.width !== void 0 && asset.height !== void 0) return `${asset.width} \xD7 ${asset.height}`;
-  if (asset.durationSec !== void 0) return formatDuration(asset.durationSec);
-  return null;
-}
-function iconFor(asset) {
-  const extension = basename(asset.path).split(".").at(-1)?.toLowerCase();
-  if (asset.kind === "other" && extension && ARCHIVE_EXTENSIONS.has(extension)) return FileArchive;
-  const icons = {
-    code: FileCode,
-    text: FileText,
-    image: FileImage,
-    video: FileVideo,
-    pdf: FilePdf,
-    other: FileGeneric
-  };
-  return icons[asset.kind];
-}
-function countLabel(count, plural, single) {
-  return (count === 1 ? single : plural).replace("{count}", String(count));
-}
-function AssetTree({ node, base, routePrefix, locale, fileCountLabel, fileCountSingleLabel, linesLabel, root = false }) {
-  return /* @__PURE__ */ jsxs("ul", { "data-zd-asset-tree": root ? true : void 0, children: [
-    node.dirs.map((dir) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("details", { open: true, children: [
-      /* @__PURE__ */ jsxs("summary", { class: "flex cursor-pointer items-center gap-hsp-xs rounded px-hsp-sm py-vsp-3xs text-small hover:bg-accent/10 focus-visible:bg-accent/10", children: [
-        /* @__PURE__ */ jsx(ChevronRight, { className: "h-icon-xs w-icon-xs shrink-0 text-muted transition-transform" }),
-        /* @__PURE__ */ jsx(Folder, { className: "h-icon-sm w-icon-sm shrink-0 text-muted" }),
-        /* @__PURE__ */ jsx(FolderOpen, { className: "h-icon-sm w-icon-sm shrink-0 text-muted" }),
-        /* @__PURE__ */ jsxs("span", { class: "min-w-0 truncate font-mono text-fg", children: [
-          dir.name,
-          "/"
-        ] }),
-        /* @__PURE__ */ jsxs("span", { class: "ml-auto hidden whitespace-nowrap pl-hsp-lg text-caption text-muted sm:block", children: [
-          countLabel(dir.fileCount, fileCountLabel, fileCountSingleLabel),
-          " \xB7 ",
-          formatAssetBytes(dir.bytes)
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(AssetTree, { node: dir, base, routePrefix, locale, fileCountLabel, fileCountSingleLabel, linesLabel })
-    ] }) })),
-    node.files.map((asset) => {
-      const Icon = iconFor(asset);
-      const facet = facetLabel(asset, linesLabel);
-      const meta = [kindLabel(asset), facet, formatAssetBytes(asset.bytes)].filter(Boolean).join(" \xB7 ");
-      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", { href: assetViewerHref({ base, routePrefix, path: asset.path, locale }), title: asset.name, class: "flex min-w-0 items-center gap-hsp-xs rounded px-hsp-sm py-vsp-3xs text-small text-fg hover:bg-accent/10 hover:text-accent hover:underline focus-visible:bg-accent/10 focus-visible:text-accent focus-visible:underline", children: [
-        /* @__PURE__ */ jsx(Icon, { className: "h-icon-sm w-icon-sm shrink-0 text-muted" }),
-        /* @__PURE__ */ jsx("span", { class: "min-w-0 truncate font-mono", children: basename(asset.path) }),
-        /* @__PURE__ */ jsx("span", { class: "ml-auto hidden whitespace-nowrap pl-hsp-lg text-caption text-muted sm:block", children: meta })
-      ] }) });
-    })
-  ] });
-}
+import { buildAssetTree } from "./tree.js";
+import {
+  AssetIndexPageBody as AssetIndexPageBody2,
+  AssetTree,
+  iconFor,
+  resolveAssetIndexPageLabels as resolveAssetIndexPageLabels2
+} from "./body.js";
 function createAssetIndexPageView(ctx) {
   assertChromeContext(ctx, "createAssetIndexPageView");
   const settings = ctx.settings;
@@ -132,45 +29,17 @@ function createAssetIndexPageView(ctx) {
     const dir = ctx.assetManifest?.dir ?? settings.assetViewerDir;
     const indexUrl = ctx.withBase(`/${localeSegment ? `${localeSegment}/` : ""}${routePrefix}/`);
     const homeUrl = ctx.withBase(`/${localeSegment ? `${localeSegment}/` : ""}`);
-    const tree = buildAssetTree(entries);
-    const folders = folderCount(tree);
-    const fileCountLabel = t("asset.fileCount", locale);
-    const fileCountSingleLabel = t("asset.fileCountSingle", locale);
-    const folderCountLabel = t("asset.folderCount", locale);
-    const folderCountSingleLabel = t("asset.folderCountSingle", locale);
-    const title = t("asset.crumb", locale);
-    return /* @__PURE__ */ jsx(DocLayoutWithDefaults, { title: composeMetaTitle(title), head: /* @__PURE__ */ jsx(HeadWithDefaults, { title, description: t("asset.indexDescription", locale), canonical: ctx.absoluteUrl(indexUrl) }), lang: locale, dataThemePack, noindex: settings.noindex, hideSidebar: true, hideToc: true, sidebarOverride: false, contentWide: true, breadcrumbOverride: /* @__PURE__ */ jsx(BreadcrumbWithDefaults, { items: [{ label: "", href: homeUrl }, { label: title }] }), headerOverride: /* @__PURE__ */ jsx(HeaderWithDefaults, { lang: locale, currentPath: indexUrl, hideSidebarToggle: true }), footerOverride: /* @__PURE__ */ jsx(FooterWithDefaults, { lang: locale }), bodyEndComponents: /* @__PURE__ */ jsx(BodyEndIslands, { basePath: settings.base ?? "/" }), enableClientRouter: settings.dynamicPageTransition, children: /* @__PURE__ */ jsxs("div", { "data-zd-asset-index-page": true, children: [
-      /* @__PURE__ */ jsxs("header", { children: [
-        /* @__PURE__ */ jsxs("div", { class: "mb-vsp-xs flex flex-wrap items-center gap-hsp-xs text-micro tracking-wide uppercase", children: [
-          /* @__PURE__ */ jsx("span", { class: "rounded-full border border-muted px-hsp-sm py-vsp-3xs text-fg", children: title }),
-          /* @__PURE__ */ jsx("span", { class: "rounded-full border border-muted px-hsp-sm py-vsp-3xs text-muted", children: t("asset.indexBadge", locale) })
-        ] }),
-        /* @__PURE__ */ jsx("h1", { class: "mb-vsp-xs border-b border-fg pb-vsp-xs font-mono text-heading font-bold leading-tight break-words", children: title }),
-        /* @__PURE__ */ jsxs("div", { "data-doc-metainfo": true, class: "mb-vsp-md flex flex-wrap items-center gap-x-hsp-md gap-y-vsp-2xs text-caption text-fg", children: [
-          /* @__PURE__ */ jsx("span", { children: countLabel(tree.fileCount, fileCountLabel, fileCountSingleLabel) }),
-          /* @__PURE__ */ jsx("span", { children: countLabel(folders, folderCountLabel, folderCountSingleLabel) }),
-          /* @__PURE__ */ jsx("span", { children: formatAssetBytes(tree.bytes) })
-        ] }),
-        /* @__PURE__ */ jsx("p", { class: "mb-vsp-lg text-title text-muted", children: t("asset.indexDescription", locale) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { class: "mb-vsp-sm flex flex-wrap items-center justify-between gap-hsp-sm text-caption", children: [
-        /* @__PURE__ */ jsxs("span", { class: "font-mono text-muted", children: [
-          "public/",
-          dir,
-          "/"
-        ] }),
-        /* @__PURE__ */ jsxs("span", { class: "flex gap-hsp-sm", children: [
-          /* @__PURE__ */ jsx("button", { type: "button", disabled: true, "data-zd-asset-index-action": "expand", class: "text-fg hover:text-accent focus-visible:text-accent", children: t("asset.expandAll", locale) }),
-          /* @__PURE__ */ jsx("button", { type: "button", disabled: true, "data-zd-asset-index-action": "collapse", class: "text-fg hover:text-accent focus-visible:text-accent", children: t("asset.collapseAll", locale) })
-        ] })
-      ] }),
-      entries.length > 0 ? /* @__PURE__ */ jsx(AssetTree, { root: true, node: tree, base: settings.base, routePrefix, locale: localeSegment, fileCountLabel, fileCountSingleLabel, linesLabel: t("asset.lines", locale) }) : /* @__PURE__ */ jsx("p", { class: "text-small text-muted", "data-zd-asset-index-empty": true, children: t("asset.indexEmpty", locale) }),
-      /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: ASSET_INDEX_PAGE_SCRIPT } })
-    ] }) });
+    const labels = resolveAssetIndexPageLabels(t, locale);
+    const title = labels.crumb;
+    return /* @__PURE__ */ jsx(DocLayoutWithDefaults, { title: composeMetaTitle(title), head: /* @__PURE__ */ jsx(HeadWithDefaults, { title, description: labels.indexDescription, canonical: ctx.absoluteUrl(indexUrl) }), lang: locale, dataThemePack, noindex: settings.noindex, hideSidebar: true, hideToc: true, sidebarOverride: false, contentWide: true, breadcrumbOverride: /* @__PURE__ */ jsx(BreadcrumbWithDefaults, { items: [{ label: "", href: homeUrl }, { label: title }] }), headerOverride: /* @__PURE__ */ jsx(HeaderWithDefaults, { lang: locale, currentPath: indexUrl, hideSidebarToggle: true }), footerOverride: /* @__PURE__ */ jsx(FooterWithDefaults, { lang: locale }), bodyEndComponents: /* @__PURE__ */ jsx(BodyEndIslands, { basePath: settings.base ?? "/" }), enableClientRouter: settings.dynamicPageTransition, children: /* @__PURE__ */ jsx(AssetIndexPageBody, { entries, labels, base: settings.base, routePrefix, dir, locale: localeSegment }) });
   };
 }
 export {
-  ASSET_INDEX_PAGE_SCRIPT2 as ASSET_INDEX_PAGE_SCRIPT,
+  ASSET_INDEX_PAGE_SCRIPT,
+  AssetIndexPageBody2 as AssetIndexPageBody,
+  AssetTree,
   buildAssetTree,
-  createAssetIndexPageView
+  createAssetIndexPageView,
+  iconFor,
+  resolveAssetIndexPageLabels2 as resolveAssetIndexPageLabels
 };

package/dist/asset-index-page/tree.d.ts

@@ -0,0 +1,24 @@
+import type { AssetIndexEntry } from "../route-context-payload/types.js";
+export interface AssetTreeNode {
+    name: string;
+    dirs: AssetTreeNode[];
+    files: AssetIndexEntry[];
+    fileCount: number;
+    bytes: number;
+}
+interface MutableAssetTreeNode {
+    name: string;
+    dirs: Map<string, MutableAssetTreeNode>;
+    files: AssetIndexEntry[];
+}
+/** Last path segment (basename) of an asset's path, used for sorting and display. */
+export declare function basename(path: string): string;
+/** Freeze a mutable build-time node into the sorted, aggregated `AssetTreeNode` shape. */
+export declare function freezeTree(node: MutableAssetTreeNode): AssetTreeNode;
+/** Build a sorted directory tree and aggregate every directory's subtree totals. */
+export declare function buildAssetTree(entries: AssetIndexEntry[]): AssetTreeNode;
+/** Total number of directories in the subtree rooted at `node`, excluding the root itself. */
+export declare function folderCount(node: AssetTreeNode): number;
+/** Pick the singular/plural label variant for `count` and substitute its `{count}` placeholder. */
+export declare function countLabel(count: number, plural: string, single: string): string;
+export {};

package/dist/asset-index-page/tree.js

@@ -0,0 +1,43 @@
+function basename(path) {
+  return path.split("/").at(-1) ?? path;
+}
+function freezeTree(node) {
+  const dirs = [...node.dirs.values()].sort((a, b) => a.name.localeCompare(b.name)).map(freezeTree);
+  const files = [...node.files].sort((a, b) => basename(a.path).localeCompare(basename(b.path)));
+  return {
+    name: node.name,
+    dirs,
+    files,
+    fileCount: files.length + dirs.reduce((total, dir) => total + dir.fileCount, 0),
+    bytes: files.reduce((total, file) => total + file.bytes, 0) + dirs.reduce((total, dir) => total + dir.bytes, 0)
+  };
+}
+function buildAssetTree(entries) {
+  const root = { name: "", dirs: /* @__PURE__ */ new Map(), files: [] };
+  for (const entry of entries) {
+    let node = root;
+    for (const segment of entry.dir.split("/").filter(Boolean)) {
+      let child = node.dirs.get(segment);
+      if (!child) {
+        child = { name: segment, dirs: /* @__PURE__ */ new Map(), files: [] };
+        node.dirs.set(segment, child);
+      }
+      node = child;
+    }
+    node.files.push(entry);
+  }
+  return freezeTree(root);
+}
+function folderCount(node) {
+  return node.dirs.reduce((total, dir) => total + 1 + folderCount(dir), 0);
+}
+function countLabel(count, plural, single) {
+  return (count === 1 ? single : plural).replace("{count}", String(count));
+}
+export {
+  basename,
+  buildAssetTree,
+  countLabel,
+  folderCount,
+  freezeTree
+};

package/dist/asset-page/body.d.ts

@@ -0,0 +1,98 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+import type { VNode } from "preact";
+import type { DateFormatPattern } from "../format-date/index.js";
+import type { AssetRecord } from "../plugins/internal/asset-viewer/types.js";
+/**
+ * Localized strings `AssetPageBody` needs to render, resolved ahead of time
+ * (typically via `resolveAssetPageLabels`) so the body needs no `t()`/`ctx`
+ * of its own.
+ *
+ * `linesTemplate` is the raw `asset.lines` translation and still carries the
+ * literal `"{count}"` placeholder — it is NOT pre-expanded. `AssetPageBody`
+ * substitutes the placeholder per-asset (mirroring `createAssetPageView`'s
+ * prior inline `.replace("{count}", …)` call), because the substituted count
+ * depends on the specific `entry` being rendered, not on locale alone. Every
+ * other field below is an already-resolved, ready-to-render string.
+ */
+export interface AssetPageLabels {
+    /** Eyebrow badge text (e.g. "Asset"). */
+    badge: string;
+    /** "Updated" label — shared by the header metadata line and the details table. */
+    updated: string;
+    /** Raw `asset.lines` translation template — see the interface doc comment above. */
+    linesTemplate: string;
+    download: string;
+    openRaw: string;
+    copy: string;
+    wrap: string;
+    truncated: string;
+    noPreview: string;
+    linkedFrom: string;
+    backTo: string;
+    detailsHeading: string;
+    detailsType: string;
+    detailsSize: string;
+    detailsPath: string;
+    detailsDimensions: string;
+    fit: string;
+    actualSize: string;
+    checker: string;
+    dark: string;
+    enlarge: string;
+    detailsCollapse: string;
+    detailsExpand: string;
+    /** "View source on GitHub" label for the body-foot utility area. */
+    viewSource: string;
+}
+/**
+ * Builds `AssetPageLabels` from a `t(key, locale)` translator, bound to the
+ * given `locale` — NOT the default locale, so a localized page gets its own
+ * strings even when `t` itself falls back internally.
+ */
+export declare function resolveAssetPageLabels(t: (key: string, locale?: string) => string, locale: string): AssetPageLabels;
+/**
+ * Head-level pre-paint markup: restores a persisted collapsed details-rail
+ * preference to `<html data-asset-details-hidden>` before first paint, so a
+ * hard reload of a collapsed page never flashes the expanded rail (#3941
+ * D3). Render this ahead of the rest of the page `head` — see
+ * `createAssetPageView`'s `head` prop on `DocLayoutWithDefaults`.
+ *
+ * A function, not a shared constant VNode: Preact's diffing mutates
+ * bookkeeping fields onto the vnode objects it renders, so one instance
+ * reused across many independent SSR passes (e.g. every asset page in a
+ * `zfb build` run, all sharing this module) is a latent hazard. Each call
+ * returns a fresh vnode.
+ */
+export declare function renderAssetDetailsPrepaintScript(): VNode;
+export interface AssetPageBodyProps {
+    /** The asset record being rendered. */
+    entry: AssetRecord;
+    /** Active locale — used for date formatting; all labels are pre-resolved. */
+    locale: string;
+    /** Resolved raw-asset URL (download href / stage src), e.g. from `assetRawHref()`. */
+    rawUrl: string;
+    /** Localized strings — see `resolveAssetPageLabels()`. */
+    labels: AssetPageLabels;
+    /** Resolved date pattern for the "Updated" date, e.g. `deriveDateFormats(ctx)(locale).full`. */
+    fullPattern?: DateFormatPattern;
+    /** The "← Back to …" link target. Omit to render no back link. */
+    backLink?: AssetRecord["linkedFrom"][number];
+    /**
+     * Resolved GitHub "view source" URL (via `buildGitHubSourceUrl`), or
+     * `null`/`undefined` when `githubUrl` isn't configured. Only rendered when
+     * `showViewSource` is true; `BodyFootUtilArea` itself hides the link when
+     * this is falsy.
+     */
+    viewSourceUrl?: string | null;
+    /** Whether the body-foot "view source" utility area is enabled (`settings.bodyFootUtilArea`). */
+    showViewSource: boolean;
+}
+/**
+ * Renders the asset viewer page body — back link, header, actions, the
+ * stage/details/linked media grid, bottom actions, the body-foot view-source
+ * link, and the inline bootstrap script — exactly what `createAssetPageView`
+ * placed inline as `DocLayoutWithDefaults`'s children before the #4221
+ * split. Plain props only, no `ChromeContext`.
+ */
+export declare function AssetPageBody({ entry: asset, locale, rawUrl, labels, fullPattern, backLink, viewSourceUrl, showViewSource, }: AssetPageBodyProps): VNode;