@takazudo/zudo-doc 5.24.2 → 5.25.0

package/dist/asset-page/index.js

@@ -1,203 +1,36 @@
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
-import { BodyFootUtilArea } from "../body-foot-util/index.js";
 import { deriveBodyEndIslands, deriveDateFormats } from "../chrome/derive.js";
 import { deriveComposeMetaTitle } from "../chrome/derive.js";
 import { derivePrimaryChromeSlots } from "../chrome/primary-slots.js";
 import { assertChromeContext } from "../chrome/assert-chrome-context.js";
 import { DocLayoutWithDefaults } from "../doclayout/index.js";
-import { formatDate } from "../format-date/index.js";
 import { buildGitHubSourceUrl } from "../github-helpers/index.js";
 import { createHeadWithDefaults } from "../head-with-defaults/index.js";
 import { assetRawHref, assetViewerHref } from "../asset-path/index.js";
-import { ChevronLeft, ChevronRight } from "../icons/index.js";
-import { formatAssetBytes } from "../asset-components/index.js";
 import { resolveThemePackSsrSlug } from "../theme/theme-pack-provider.js";
-import { ASSET_DETAILS_PREPAINT_SCRIPT, ASSET_PAGE_SCRIPT } from "./script.js";
+import { AssetPageBody, renderAssetDetailsPrepaintScript, resolveAssetPageLabels } from "./body.js";
 import {
   ASSET_DETAILS_HIDDEN_ATTR,
-  ASSET_DETAILS_PREPAINT_SCRIPT as ASSET_DETAILS_PREPAINT_SCRIPT2,
+  ASSET_DETAILS_PREPAINT_SCRIPT,
   ASSET_DETAILS_STORAGE_KEY,
-  ASSET_PAGE_SCRIPT as ASSET_PAGE_SCRIPT2
+  ASSET_PAGE_SCRIPT
 } from "./script.js";
-function formatDuration(seconds) {
-  const rounded = Math.round(seconds);
-  const minutes = Math.floor(rounded / 60);
-  const remainder = (rounded % 60).toString().padStart(2, "0");
-  return `${minutes}:${remainder}`;
-}
-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 ?? `${asset.lines} 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 AssetEyebrow({ asset, badge }) {
-  return /* @__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: badge }),
-    /* @__PURE__ */ jsx("span", { class: "rounded-full border border-muted px-hsp-sm py-vsp-3xs text-muted", children: kindLabel(asset) })
-  ] });
-}
-function AssetHeader({ asset, locale, badge, updatedLabel, linesLabel, fullPattern }) {
-  const facet = facetLabel(asset, linesLabel);
-  return /* @__PURE__ */ jsxs("header", { children: [
-    /* @__PURE__ */ jsx(AssetEyebrow, { asset, badge }),
-    /* @__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: asset.name }),
-    /* @__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: [
-      asset.dir && /* @__PURE__ */ jsx("span", { children: asset.dir }),
-      facet && /* @__PURE__ */ jsx("span", { children: facet }),
-      /* @__PURE__ */ jsx("span", { children: formatAssetBytes(asset.bytes) }),
-      asset.updatedDate && /* @__PURE__ */ jsxs("span", { children: [
-        updatedLabel,
-        " ",
-        formatDate(asset.updatedDate, locale, fullPattern)
-      ] }),
-      asset.author && /* @__PURE__ */ jsx("span", { children: asset.author })
-    ] }),
-    asset.description && /* @__PURE__ */ jsx("p", { class: "mb-vsp-lg text-title text-muted", "data-doc-description": true, children: asset.description })
-  ] });
-}
-function actionClass(primary = false) {
-  return `${primary ? "border-accent bg-accent text-bg" : "border-muted bg-surface text-fg"} inline-flex items-center justify-center rounded border px-hsp-md py-vsp-2xs text-caption font-medium hover:border-accent focus-visible:border-accent`;
-}
-function AssetActions({ rawUrl, downloadLabel, openRawLabel, copyLabel, wrapLabel, code = false, bottom = false }) {
-  return /* @__PURE__ */ jsxs("div", { class: `${bottom ? "mt-vsp-lg border-t border-muted pt-vsp-md" : "mb-vsp-md"} flex flex-wrap gap-hsp-sm`, "data-zd-asset-actions": true, children: [
-    /* @__PURE__ */ jsx("a", { download: true, href: rawUrl, class: `${actionClass(true)} hover:underline focus-visible:underline`, children: downloadLabel }),
-    /* @__PURE__ */ jsx("a", { href: rawUrl, "data-zfb-reload": true, target: "_blank", rel: "noopener", class: `${actionClass()} hover:underline focus-visible:underline`, children: openRawLabel }),
-    code && /* @__PURE__ */ jsx("button", { type: "button", disabled: true, "data-zd-asset-action": "copy", class: actionClass(), children: copyLabel }),
-    code && /* @__PURE__ */ jsx("button", { type: "button", disabled: true, "data-zd-asset-action": "wrap", class: actionClass(), children: wrapLabel })
-  ] });
-}
-function AssetCodeBody({ asset, copyLabel, wrapLabel, truncatedLabel, linesLabel }) {
-  const highlightedCode = asset.html?.match(/^<pre\b[^>]*>\s*(<code\b[\s\S]*<\/code>)\s*<\/pre>$/)?.[1] ?? "";
-  return /* @__PURE__ */ jsxs("section", { children: [
-    /* @__PURE__ */ jsxs("div", { class: "zd-asset-filebar flex flex-wrap items-center justify-between gap-hsp-sm border border-muted bg-surface px-hsp-md py-vsp-2xs text-caption", children: [
-      /* @__PURE__ */ jsxs("span", { class: "font-mono", children: [
-        asset.name,
-        " \xB7 ",
-        linesLabel ?? `${asset.lines ?? 0} lines`,
-        " \xB7 ",
-        formatAssetBytes(asset.bytes),
-        " \xB7 ",
-        kindLabel(asset)
-      ] }),
-      /* @__PURE__ */ jsxs("span", { class: "flex gap-hsp-sm", children: [
-        /* @__PURE__ */ jsx("button", { type: "button", disabled: true, "data-zd-asset-action": "copy", class: "text-fg hover:text-accent focus-visible:text-accent", children: copyLabel }),
-        /* @__PURE__ */ jsx("button", { type: "button", disabled: true, "data-zd-asset-action": "wrap", class: "text-fg hover:text-accent focus-visible:text-accent", children: wrapLabel })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("pre", { class: "hi-root zd-asset-code", "data-lang": asset.language ?? "text", dangerouslySetInnerHTML: { __html: highlightedCode } }),
-    asset.truncated && /* @__PURE__ */ jsx("p", { class: "mt-vsp-xs text-caption text-muted", children: truncatedLabel })
-  ] });
-}
-function EnlargeIcon() {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M8 3H3v5m13-5h5v5M8 21H3v-5m13 5h5v-5M3 8l6-6m12 6-6-6M3 16l6 6m12-6-6 6" }) });
-}
-function AssetImageStage({ asset, rawUrl, labels }) {
-  return /* @__PURE__ */ jsxs("section", { children: [
-    /* @__PURE__ */ jsxs("div", { class: "mb-vsp-xs flex flex-wrap gap-hsp-sm text-caption", children: [
-      /* @__PURE__ */ jsxs("div", { class: "flex rounded border border-muted", children: [
-        /* @__PURE__ */ jsx("button", { type: "button", "aria-pressed": "true", "data-zd-asset-action": "fit", class: "px-hsp-sm py-vsp-3xs", children: labels.fit }),
-        /* @__PURE__ */ jsx("button", { type: "button", "aria-pressed": "false", "data-zd-asset-action": "1to1", class: "border-l border-muted px-hsp-sm py-vsp-3xs", children: labels.actualSize })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { class: "flex rounded border border-muted", children: [
-        /* @__PURE__ */ jsx("button", { type: "button", "aria-pressed": "true", "data-zd-asset-action": "checker", class: "px-hsp-sm py-vsp-3xs", children: labels.checker }),
-        /* @__PURE__ */ jsx("button", { type: "button", "aria-pressed": "false", "data-zd-asset-action": "dark", class: "border-l border-muted px-hsp-sm py-vsp-3xs", children: labels.dark })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("figure", { class: "zd-enlargeable zd-asset-stage is-checker flex min-h-[20rem] items-center justify-center overflow-auto rounded border border-muted bg-surface p-hsp-lg", children: [
-      /* @__PURE__ */ jsx("img", { src: rawUrl, alt: asset.description ?? asset.name, width: asset.width, height: asset.height }),
-      /* @__PURE__ */ jsx("button", { type: "button", class: "zd-enlarge-btn", hidden: true, "aria-label": labels.enlarge, children: /* @__PURE__ */ jsx(EnlargeIcon, {}) })
-    ] })
-  ] });
-}
-function AssetVideoStage({ asset, rawUrl }) {
-  return /* @__PURE__ */ jsx("div", { class: "zd-asset-stage flex items-center justify-center rounded border border-muted bg-surface p-hsp-lg", children: /* @__PURE__ */ jsx("video", { controls: true, preload: "metadata", src: rawUrl, width: asset.width, height: asset.height, class: "max-w-full" }) });
-}
-function AssetPdfStage({ asset, rawUrl, children }) {
-  return /* @__PURE__ */ jsxs("section", { children: [
-    /* @__PURE__ */ jsx("iframe", { title: asset.name, src: `${rawUrl}#view=FitH`, class: "zd-asset-pdf h-[70vh] w-full rounded border border-muted" }),
-    /* @__PURE__ */ jsx("div", { class: "mt-vsp-sm", children })
-  ] });
-}
-function AssetDownloadPanel({ asset, rawUrl, noPreview, downloadLabel, copyLabel }) {
-  return /* @__PURE__ */ jsxs("section", { class: "rounded border border-dashed border-muted p-hsp-xl text-center", children: [
-    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", class: "mb-vsp-xs text-heading", children: "\u2193" }),
-    /* @__PURE__ */ jsx("h2", { class: "font-mono text-title font-bold", children: asset.name }),
-    /* @__PURE__ */ jsxs("p", { class: "mb-vsp-sm text-caption text-muted", children: [
-      kindLabel(asset),
-      " \xB7 ",
-      formatAssetBytes(asset.bytes)
-    ] }),
-    /* @__PURE__ */ jsx("p", { class: "mb-vsp-md text-small text-muted", children: noPreview }),
-    /* @__PURE__ */ jsxs("div", { class: "flex flex-wrap justify-center gap-hsp-sm", children: [
-      /* @__PURE__ */ jsx("a", { download: true, href: rawUrl, class: `${actionClass(true)} hover:underline focus-visible:underline`, children: downloadLabel }),
-      /* @__PURE__ */ jsx("button", { type: "button", "data-zd-asset-action": "copy-url", "data-zd-copy-url": rawUrl, class: actionClass(), children: copyLabel })
-    ] })
-  ] });
-}
-function AssetLinkedFrom({ asset, label }) {
-  if (asset.linkedFrom.length === 0) return null;
-  return /* @__PURE__ */ jsxs("section", { class: "mt-vsp-lg", children: [
-    /* @__PURE__ */ jsx("h2", { class: "mb-vsp-xs text-title font-bold", children: label }),
-    /* @__PURE__ */ jsx("ul", { class: "space-y-vsp-sm", children: asset.linkedFrom.map((link) => /* @__PURE__ */ jsxs("li", { class: "border-l border-muted pl-hsp-md", children: [
-      /* @__PURE__ */ jsx("p", { class: "text-caption text-muted", children: link.crumb }),
-      /* @__PURE__ */ jsx("a", { href: link.href, class: "text-accent hover:underline focus-visible:underline", children: link.title }),
-      /* @__PURE__ */ jsx("p", { class: "text-caption italic text-muted", children: link.context })
-    ] })) })
-  ] });
-}
-function AssetDetails({ asset, labels }) {
-  const rows = [[labels.type, asset.mime], [labels.size, formatAssetBytes(asset.bytes)], [labels.path, asset.path]];
-  if (asset.width !== void 0 && asset.height !== void 0) rows.splice(1, 0, [labels.dimensions, `${asset.width} \xD7 ${asset.height}`]);
-  if (asset.updatedDate) rows.push([labels.updated, asset.updatedDate]);
-  return /* @__PURE__ */ jsxs("section", { children: [
-    /* @__PURE__ */ jsx("h2", { class: "mb-vsp-xs text-title font-bold", children: labels.heading }),
-    /* @__PURE__ */ jsx("dl", { "data-zd-asset-details-list": true, class: "grid grid-cols-[auto_1fr] gap-x-hsp-md gap-y-vsp-2xs text-caption", children: rows.map(([term, value]) => /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("dt", { class: "font-medium text-muted", children: term }),
-      /* @__PURE__ */ jsx("dd", { class: "min-w-0 break-words text-fg", children: value })
-    ] })) })
-  ] });
-}
-const ASSET_DETAILS_RAIL_ID = "zd-asset-details-rail";
-function AssetDetailsToggle({ labels }) {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      disabled: true,
-      "data-zd-asset-details-toggle": true,
-      "data-zd-label-collapse": labels.collapse,
-      "data-zd-label-expand": labels.expand,
-      "aria-controls": ASSET_DETAILS_RAIL_ID,
-      "aria-expanded": "true",
-      "aria-label": labels.collapse,
-      class: "zd-asset-details-toggle hidden lg:flex fixed bottom-vsp-xl z-sidebar items-center justify-center w-[1.5rem] h-[3rem] bg-surface border border-muted border-r-0 rounded-l-DEFAULT text-muted cursor-pointer transition-colors duration-200 ease-in-out hover:text-fg disabled:cursor-default disabled:opacity-50",
-      children: [
-        /* @__PURE__ */ jsx("span", { "data-zd-asset-details-chevron": "collapse", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-icon-sm w-icon-sm" }) }),
-        /* @__PURE__ */ jsx("span", { "data-zd-asset-details-chevron": "expand", children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-icon-sm w-icon-sm" }) })
-      ]
-    }
-  );
-}
-function AssetBodyLayout({ stage, details, linked, toggleLabels }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(AssetDetailsToggle, { labels: toggleLabels }),
-    /* @__PURE__ */ jsxs("div", { class: "zd-asset-media-grid", children: [
-      /* @__PURE__ */ jsx("div", { class: "min-w-0", children: stage }),
-      /* @__PURE__ */ jsxs("div", { id: ASSET_DETAILS_RAIL_ID, "data-zd-asset-details": true, class: "zd-asset-media-rail", children: [
-        /* @__PURE__ */ jsx("div", { class: "rounded border border-muted p-hsp-lg", children: details }),
-        linked
-      ] })
-    ] })
-  ] });
-}
+import {
+  AssetActions,
+  AssetCodeBody,
+  AssetDetails,
+  AssetDownloadPanel,
+  AssetEyebrow,
+  AssetHeader,
+  AssetImageStage,
+  AssetLinkedFrom,
+  AssetPdfStage,
+  AssetVideoStage
+} from "./components.js";
+import {
+  AssetPageBody as AssetPageBody2,
+  resolveAssetPageLabels as resolveAssetPageLabels2
+} from "./body.js";
 function createAssetPageView(ctx) {
   assertChromeContext(ctx, "createAssetPageView");
   const settings = ctx.settings;
@@ -214,10 +47,6 @@ function createAssetPageView(ctx) {
     const dir = ctx.assetManifest?.dir ?? settings.assetViewerDir;
     const viewerUrl = assetViewerHref({ base: settings.base, routePrefix, path: asset.path, locale: localeSegment });
     const rawUrl = assetRawHref({ base: settings.base, dir, path: asset.path });
-    const linesLabel = t("asset.lines", locale).replace(
-      "{count}",
-      String(asset.lines ?? 0)
-    );
     const dirSegments = asset.dir.split("/").filter(Boolean);
     const indexUrl = ctx.withBase(`/${localeSegment ? `${localeSegment}/` : ""}${routePrefix}/`);
     const homeUrl = ctx.withBase(`/${localeSegment ? `${localeSegment}/` : ""}`);
@@ -228,62 +57,21 @@ function createAssetPageView(ctx) {
       ...dirSegments.map((label) => ({ label })),
       { label: asset.name }
     ];
-    const linked = /* @__PURE__ */ jsx(AssetLinkedFrom, { asset, label: t("asset.linkedFrom", locale) });
-    const detailsLabels = {
-      heading: t("asset.details", locale),
-      type: t("asset.type", locale),
-      size: t("asset.size", locale),
-      path: t("asset.path", locale),
-      dimensions: t("asset.dimensions", locale),
-      updated: t("doc.updated", locale)
-    };
-    const imageStageLabels = {
-      fit: t("asset.fit", locale),
-      actualSize: t("asset.actualSize", locale),
-      checker: t("asset.checker", locale),
-      dark: t("asset.dark", locale),
-      enlarge: t("asset.enlarge", locale)
-    };
-    const details = /* @__PURE__ */ jsx(AssetDetails, { asset, labels: detailsLabels });
-    const downloadPanel = /* @__PURE__ */ jsx(AssetDownloadPanel, { asset, rawUrl, noPreview: t("asset.noPreview", locale), downloadLabel: t("asset.download", locale), copyLabel: t("asset.copy", locale) });
-    let stage;
-    const isMedia = asset.previewable && asset.sniffOk && ["image", "video", "pdf"].includes(asset.kind);
-    if (!asset.previewable || !asset.sniffOk) stage = downloadPanel;
-    else if (asset.kind === "image") stage = /* @__PURE__ */ jsx(AssetImageStage, { asset, rawUrl, labels: imageStageLabels });
-    else if (asset.kind === "video") stage = /* @__PURE__ */ jsx(AssetVideoStage, { asset, rawUrl });
-    else if (asset.kind === "pdf") stage = /* @__PURE__ */ jsx(AssetPdfStage, { asset, rawUrl, children: downloadPanel });
-    else stage = /* @__PURE__ */ jsx(AssetCodeBody, { asset, copyLabel: t("asset.copy", locale), wrapLabel: t("asset.wrap", locale), truncatedLabel: t("asset.truncated", locale), linesLabel });
-    const detailsToggleLabels = {
-      collapse: t("asset.detailsCollapse", locale),
-      expand: t("asset.detailsExpand", locale)
-    };
-    const body = /* @__PURE__ */ jsx(AssetBodyLayout, { stage, details, linked, toggleLabels: detailsToggleLabels });
-    const showSource = settings.bodyFootUtilArea !== false && settings.bodyFootUtilArea.viewSourceLink !== false;
-    const railPrepaint = /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: ASSET_DETAILS_PREPAINT_SCRIPT } });
+    const labels = resolveAssetPageLabels(t, locale);
+    const showViewSource = settings.bodyFootUtilArea !== false && settings.bodyFootUtilArea.viewSourceLink !== false;
+    const viewSourceUrl = buildGitHubSourceUrl(settings.githubUrl, `public/${dir}`, asset.path);
+    const fullPattern = dateFormatsFor(locale).full;
     return /* @__PURE__ */ jsx(DocLayoutWithDefaults, { title: composeMetaTitle(asset.name), head: /* @__PURE__ */ jsxs(Fragment, { children: [
-      railPrepaint,
+      renderAssetDetailsPrepaintScript(),
       /* @__PURE__ */ jsx(HeadWithDefaults, { title: asset.name, description: asset.description, canonical: ctx.absoluteUrl(viewerUrl) })
-    ] }), lang: locale, dataThemePack, noindex: settings.noindex, hideSidebar: true, hideToc: true, sidebarOverride: false, contentWide: true, breadcrumbOverride: /* @__PURE__ */ jsx(BreadcrumbWithDefaults, { items: breadcrumbItems }), headerOverride: /* @__PURE__ */ jsx(HeaderWithDefaults, { lang: locale, currentPath: viewerUrl, hideSidebarToggle: true }), footerOverride: /* @__PURE__ */ jsx(FooterWithDefaults, { lang: locale }), bodyEndComponents: /* @__PURE__ */ jsx(BodyEndIslands, { basePath: settings.base ?? "/", forceImageEnlarge: asset.kind === "image" && asset.previewable && asset.sniffOk }), enableClientRouter: settings.dynamicPageTransition, children: /* @__PURE__ */ jsxs("div", { class: "zd-asset-page", "data-zd-asset-page": true, children: [
-      backLink && /* @__PURE__ */ jsx("p", { class: "mb-vsp-xs text-caption", children: /* @__PURE__ */ jsxs("a", { href: backLink.href, class: "text-muted hover:text-accent focus-visible:text-accent hover:underline focus-visible:underline", children: [
-        "\u2190 ",
-        t("asset.backTo", locale),
-        " ",
-        backLink.title
-      ] }) }),
-      /* @__PURE__ */ jsx(AssetHeader, { asset, locale, badge: t("asset.badge", locale), updatedLabel: t("doc.updated", locale), linesLabel, fullPattern: dateFormatsFor(locale).full }),
-      /* @__PURE__ */ jsx(AssetActions, { rawUrl, downloadLabel: t("asset.download", locale), openRawLabel: t("asset.openRaw", locale), copyLabel: t("asset.copy", locale), wrapLabel: t("asset.wrap", locale), code: !isMedia && asset.previewable && asset.sniffOk }),
-      body,
-      /* @__PURE__ */ jsx(AssetActions, { rawUrl, downloadLabel: t("asset.download", locale), openRawLabel: t("asset.openRaw", locale), copyLabel: t("asset.copy", locale), wrapLabel: t("asset.wrap", locale), bottom: true }),
-      showSource && /* @__PURE__ */ jsx(BodyFootUtilArea, { sourceUrl: buildGitHubSourceUrl(settings.githubUrl, `public/${dir}`, asset.path), viewSourceLabel: t("doc.viewSource", locale), docHistoryIsland: null }),
-      /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: ASSET_PAGE_SCRIPT } })
-    ] }) });
+    ] }), lang: locale, dataThemePack, noindex: settings.noindex, hideSidebar: true, hideToc: true, sidebarOverride: false, contentWide: true, breadcrumbOverride: /* @__PURE__ */ jsx(BreadcrumbWithDefaults, { items: breadcrumbItems }), headerOverride: /* @__PURE__ */ jsx(HeaderWithDefaults, { lang: locale, currentPath: viewerUrl, hideSidebarToggle: true }), footerOverride: /* @__PURE__ */ jsx(FooterWithDefaults, { lang: locale }), bodyEndComponents: /* @__PURE__ */ jsx(BodyEndIslands, { basePath: settings.base ?? "/", forceImageEnlarge: asset.kind === "image" && asset.previewable && asset.sniffOk }), enableClientRouter: settings.dynamicPageTransition, children: /* @__PURE__ */ jsx(AssetPageBody, { entry: asset, locale, rawUrl, labels, fullPattern, backLink, viewSourceUrl, showViewSource }) });
   };
 }
 export {
   ASSET_DETAILS_HIDDEN_ATTR,
-  ASSET_DETAILS_PREPAINT_SCRIPT2 as ASSET_DETAILS_PREPAINT_SCRIPT,
+  ASSET_DETAILS_PREPAINT_SCRIPT,
   ASSET_DETAILS_STORAGE_KEY,
-  ASSET_PAGE_SCRIPT2 as ASSET_PAGE_SCRIPT,
+  ASSET_PAGE_SCRIPT,
   AssetActions,
   AssetCodeBody,
   AssetDetails,
@@ -292,7 +80,9 @@ export {
   AssetHeader,
   AssetImageStage,
   AssetLinkedFrom,
+  AssetPageBody2 as AssetPageBody,
   AssetPdfStage,
   AssetVideoStage,
-  createAssetPageView
+  createAssetPageView,
+  resolveAssetPageLabels2 as resolveAssetPageLabels
 };

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

@@ -0,0 +1,15 @@
+import type { AssetIndexEntry } from "../route-context-payload/types.js";
+/** Formats a duration in seconds as `M:SS`. */
+export declare function formatDuration(seconds: number): string;
+/** Short kind badge for an asset: its language when known, else the MIME subtype or kind, uppercased. */
+export declare function kindLabel(asset: AssetIndexEntry): string;
+/**
+ * Secondary metadata facet shown next to the kind badge: line count, video
+ * duration, or image dimensions — whichever applies to the asset's kind.
+ * `linesLabel`, when given, is used verbatim in place of the default
+ * `"${lines} lines"` fallback (callers resolve the localized/templated text
+ * themselves).
+ */
+export declare function facetLabel(asset: AssetIndexEntry, linesLabel?: string): string | null;
+/** Tailwind classes for an asset action button/link, primary (filled) or secondary (outlined). */
+export declare function actionClass(primary?: boolean): string;

package/dist/asset-page/shared.js

@@ -0,0 +1,28 @@
+function formatDuration(seconds) {
+  const rounded = Math.round(seconds);
+  const minutes = Math.floor(rounded / 60);
+  const remainder = (rounded % 60).toString().padStart(2, "0");
+  return `${minutes}:${remainder}`;
+}
+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 ?? `${asset.lines} 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 actionClass(primary = false) {
+  return `${primary ? "border-accent bg-accent text-bg" : "border-muted bg-surface text-fg"} inline-flex items-center justify-center rounded border px-hsp-md py-vsp-2xs text-caption font-medium hover:border-accent focus-visible:border-accent`;
+}
+export {
+  actionClass,
+  facetLabel,
+  formatDuration,
+  kindLabel
+};

package/dist/breadcrumb/breadcrumb.js

@@ -81,7 +81,7 @@ function Breadcrumb(props) {
           "a",
           {
             href: item.href,
-            class: "text-muted underline hover:text-fg flex items-center gap-x-hsp-2xs",
+            class: "text-muted hover:text-accent hover:underline focus-visible:text-accent focus-visible:underline flex items-center gap-x-hsp-2xs",
             children: [
               i === 0 && /* @__PURE__ */ jsx(HomeIcon, {}),
               /* @__PURE__ */ jsx(SmartLabel, { label: item.label })

package/dist/compiled.css

@@ -972,6 +972,9 @@
 .gap-x-hsp-sm {
   column-gap: var(--spacing-hsp-sm);
 }
+.gap-x-hsp-xl {
+  column-gap: var(--spacing-hsp-xl);
+}
 .gap-x-hsp-xs {
   column-gap: var(--spacing-hsp-xs);
 }
@@ -1462,6 +1465,9 @@
 .text-accent {
   color: var(--color-accent);
 }
+.text-accent-hover {
+  color: var(--color-accent-hover);
+}
 .text-bg {
   color: var(--color-bg);
 }
@@ -1658,13 +1664,6 @@
     }
   }
 }
-.group-hover\:text-accent-hover {
-  &:is(:where(.group):hover *) {
-    @media (hover: hover) {
-      color: var(--color-accent-hover);
-    }
-  }
-}
 .group-hover\:text-bg {
   &:is(:where(.group):hover *) {
     @media (hover: hover) {
@@ -1686,23 +1685,11 @@
     }
   }
 }
-.group-hover\:decoration-accent {
-  &:is(:where(.group):hover *) {
-    @media (hover: hover) {
-      text-decoration-color: var(--color-accent);
-    }
-  }
-}
 .group-focus-visible\:text-accent {
   &:is(:where(.group):focus-visible *) {
     color: var(--color-accent);
   }
 }
-.group-focus-visible\:text-accent-hover {
-  &:is(:where(.group):focus-visible *) {
-    color: var(--color-accent-hover);
-  }
-}
 .group-focus-visible\:text-fg {
   &:is(:where(.group):focus-visible *) {
     color: var(--color-fg);
@@ -1713,11 +1700,6 @@
     text-decoration-line: underline;
   }
 }
-.group-focus-visible\:decoration-accent {
-  &:is(:where(.group):focus-visible *) {
-    text-decoration-color: var(--color-accent);
-  }
-}
 .peer-hover\:border-accent {
   &:is(:where(.peer):hover ~ *) {
     @media (hover: hover) {
@@ -1902,13 +1884,6 @@
     }
   }
 }
-.hover\:decoration-accent {
-  &:hover {
-    @media (hover: hover) {
-      text-decoration-color: var(--color-accent);
-    }
-  }
-}
 .focus\:border-accent {
   &:focus {
     border-color: var(--color-accent);
@@ -1953,11 +1928,6 @@
     text-decoration-line: underline;
   }
 }
-.focus-visible\:decoration-accent {
-  &:focus-visible {
-    text-decoration-color: var(--color-accent);
-  }
-}
 .focus-visible\:outline-2 {
   &:focus-visible {
     outline-style: var(--tw-outline-style);
@@ -2252,14 +2222,19 @@
     pointer-events: auto;
   }
 }
-.\[\&_a\]\:text-accent {
+.\[\&_a\]\:underline {
   & a {
+    text-decoration-line: underline;
+  }
+}
+.\[\&_a\:focus-visible\]\:text-accent {
+  & a:focus-visible {
     color: var(--color-accent);
   }
 }
-.\[\&_a\]\:underline {
-  & a {
-    text-decoration-line: underline;
+.\[\&_a\:hover\]\:text-accent {
+  & a:hover {
+    color: var(--color-accent);
   }
 }
 .\[\&_li\]\:mb-0 {

package/dist/config/component-tokens.js

@@ -126,6 +126,8 @@ const COMPONENT_TOKENS = [
   // utility (0,1,0) and only matches the styled anchor — not block or hash-link
   // variants. Default `underline` is a CSS keyword literal: no text-decoration
   // token exists in the scale (documented exception to the prefer-var-() rule).
+  // Prose links only (Link Color Rule, rule 1 — src/CLAUDE.md): chrome links are
+  // `text-fg`, so the underlined hero/footer-copyright rows (rule 2) never match.
   {
     cssVar: "--zdc-doc-link-decoration",
     selector: "a.text-accent.underline",
@@ -134,7 +136,7 @@ const COMPONENT_TOKENS = [
     component: "content-link",
     surface: "content",
     category: "typography",
-    description: "Text decoration of styled content links (the `text-accent underline` path in ContentLink; excludes block and hash-link variants). Defaults to `underline` (byte-identical to the current utility). Set to `none` to remove underlines from content links."
+    description: "Text decoration of prose links only \u2014 the `text-accent underline` path in ContentLink (`a.text-accent.underline`); excludes block and hash-link variants and never matches chrome links, including the underlined home hero and footer copyright rows (those are `text-fg`). Defaults to `underline` (byte-identical to the current utility). Set to `none` to remove underlines from prose links."
   },
   // ── Admonition block ([data-admonition], content-admonition.tsx, #2460) ───
   // The base `[data-admonition]` rule in content.css has:

package/dist/config.d.ts

@@ -155,6 +155,16 @@ export interface ZudoDocConfig {
      * @default []
      */
     siteTreeNavIgnore?: string[];
+    /**
+     * Top-level category slugs moved OUT of the package-owned home-page category
+     * grid on `/` and locale homes and rendered instead as one row of small
+     * links directly under the grid, in this list's order. Home page only — the
+     * `<SiteTreeNav />` MDX tag is unchanged. Slugs absent from the tree are
+     * skipped, `siteTreeNavIgnore` wins over this list, and a category with no
+     * page of its own stays in the grid.
+     * @default []
+     */
+    siteTreeNavSecondary?: string[];
     /**
      * Minify production HTML output from `zfb build`.
      * @default true

package/dist/config.js

@@ -47,6 +47,7 @@ const DEFAULT_SETTINGS = {
   trailingSlash: false,
   home: { wide: false, introMarkdown: "", sitemapHeading: "" },
   siteTreeNavIgnore: [],
+  siteTreeNavSecondary: [],
   minifyHtml: true,
   docsDir: "src/content/docs",
   entryDocSlug: "getting-started",

package/dist/doc-pager/index.js

@@ -19,7 +19,7 @@ function createDocPager(ctx) {
               /* @__PURE__ */ jsx(ChevronLeft, { className: "h-[1.125rem] w-[1.125rem]" }),
               /* @__PURE__ */ jsx("span", { class: "no-underline", children: t("nav.previous", locale) })
             ] }),
-            /* @__PURE__ */ jsx("p", { class: "text-small font-semibold underline group-hover:text-accent", children: prev.label }),
+            /* @__PURE__ */ jsx("p", { class: "text-small font-semibold text-fg group-hover:text-accent group-hover:underline group-focus-visible:text-accent group-focus-visible:underline", children: prev.label }),
             prev.date && /* @__PURE__ */ jsx("p", { class: "text-caption text-muted", children: formatDate(prev.date, locale, dateFormatsFor(locale).full) })
           ]
         }
@@ -34,7 +34,7 @@ function createDocPager(ctx) {
               /* @__PURE__ */ jsx("span", { class: "no-underline", children: t("nav.next", locale) }),
               /* @__PURE__ */ jsx(ChevronRight, { className: "h-[1.125rem] w-[1.125rem]" })
             ] }),
-            /* @__PURE__ */ jsx("p", { class: "text-small font-semibold underline group-hover:text-accent", children: next.label }),
+            /* @__PURE__ */ jsx("p", { class: "text-small font-semibold text-fg group-hover:text-accent group-hover:underline group-focus-visible:text-accent group-focus-visible:underline", children: next.label }),
             next.date && /* @__PURE__ */ jsx("p", { class: "text-caption text-muted", children: formatDate(next.date, locale, dateFormatsFor(locale).full) })
           ]
         }

package/dist/footer/footer.js

@@ -6,7 +6,7 @@ function Footer(props) {
   const persistKey = props.persistKey;
   const hasColumns = linkColumns.length > 0 || tagColumns.length > 0;
   const hasCopyright = copyright.length > 0;
-  const copyrightClass = hasColumns ? "text-center text-caption text-muted [&_a]:text-accent [&_a]:underline mt-vsp-lg border-t border-muted pt-vsp-md" : "text-center text-caption text-muted [&_a]:text-accent [&_a]:underline";
+  const copyrightClass = hasColumns ? "text-center text-caption text-muted [&_a]:underline [&_a:hover]:text-accent [&_a:focus-visible]:text-accent mt-vsp-lg border-t border-muted pt-vsp-md" : "text-center text-caption text-muted [&_a]:underline [&_a:hover]:text-accent [&_a:focus-visible]:text-accent";
   return /* @__PURE__ */ jsx(
     "footer",
     {
@@ -25,7 +25,7 @@ function Footer(props) {
                   "a",
                   {
                     href: item.href,
-                    class: "text-caption text-muted hover:text-accent hover:underline focus-visible:underline",
+                    class: "text-caption text-muted hover:text-accent hover:underline focus-visible:text-accent focus-visible:underline",
                     ...item.isExternal ? {
                       target: "_blank",
                       rel: "noopener noreferrer"
@@ -47,7 +47,7 @@ function Footer(props) {
                   "a",
                   {
                     href,
-                    class: "text-caption text-muted hover:text-accent hover:underline focus-visible:underline",
+                    class: "text-caption text-muted hover:text-accent hover:underline focus-visible:text-accent focus-visible:underline",
                     children: [
                       "#",
                       tag,

package/dist/header-with-defaults/index.d.ts

@@ -3,6 +3,7 @@
 import type { JSX } from "preact";
 import type { ChromeContext } from "../factory-context/index.js";
 import type { Settings } from "../settings.js";
+import type { SidebarNavNode } from "../sidebar/types.js";
 export interface HeaderWithDefaultsProps {
     /** Active locale; defaults to the configured defaultLocale. */
     lang?: string;
@@ -16,6 +17,25 @@ export interface HeaderWithDefaultsProps {
     navSection?: string;
     /** Omit the mobile sidebar toggle and its drawer landmark. */
     hideSidebarToggle?: boolean;
+    /**
+     * Override the mobile-drawer sidebar tree passed to `SidebarToggle`,
+     * resolved per render against that render's `lang`/`navSection`/
+     * `currentVersion`.
+     *
+     * - An array is passed to `SidebarToggle` as-is — no default build, no
+     *   version-href remapping.
+     * - A callback receives the resolved `lang`/`navSection`/`currentVersion`
+     *   plus a lazy `buildDefault()` that reproduces today's default tree
+     *   (`buildSidebarNodes(lang, navSection, currentVersion)`) only when
+     *   called.
+     * - Omitted: behavior is unchanged from before this prop existed.
+     */
+    sidebarNodes?: SidebarNavNode[] | ((args: {
+        lang: string;
+        navSection: string | undefined;
+        currentVersion: string | undefined;
+        buildDefault: () => SidebarNavNode[];
+    }) => SidebarNavNode[]);
 }
 /** Version config entry subset the factory reads. */
 export interface HeaderVersionEntry {

package/dist/header-with-defaults/index.js

@@ -39,14 +39,21 @@ function createHeaderWithDefaults(ctx) {
       currentVersion,
       currentSlug,
       navSection,
-      hideSidebarToggle = false
+      hideSidebarToggle = false,
+      sidebarNodes: sidebarNodesProp
     } = props;
     const lang = langProp;
     const rootMenuItems = buildRootMenuItems(lang, currentVersion);
     const backToMenuLabel = t("nav.backToMenu", lang);
     const localeLinks = buildLocaleLinksForNav(currentPath, lang, locales.length);
     const themeDefaultMode = getThemeDefaultMode();
-    const sidebarNodes = buildSidebarNodes(lang, navSection, currentVersion);
+    const buildDefaultSidebarNodes = () => buildSidebarNodes(lang, navSection, currentVersion);
+    const sidebarNodes = sidebarNodesProp === void 0 ? buildDefaultSidebarNodes() : typeof sidebarNodesProp === "function" ? sidebarNodesProp({
+      lang,
+      navSection,
+      currentVersion,
+      buildDefault: buildDefaultSidebarNodes
+    }) : sidebarNodesProp;
     const sidebarToggle = hideSidebarToggle ? false : Island({
       when: "visible",
       children: /* @__PURE__ */ jsx(