@takazudo/zudo-doc 5.24.2 → 5.26.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

@@ -363,9 +363,6 @@
 .isolate {
   isolation: isolate;
 }
-.z-50 {
-  z-index: 50;
-}
 .z-9999 {
   z-index: 9999;
 }
@@ -552,9 +549,6 @@
 .inline-flex {
   display: inline-flex;
 }
-.list-item {
-  display: list-item;
-}
 .table {
   display: table;
 }
@@ -808,6 +802,9 @@
 .flex-1 {
   flex: 1;
 }
+.shrink {
+  flex-shrink: 1;
+}
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -858,9 +855,6 @@
 .grid-cols-\[auto_1fr\] {
   grid-template-columns: auto 1fr;
 }
-.grid-cols-\[repeat\(auto-fit\,minmax\(12rem\,1fr\)\)\] {
-  grid-template-columns: repeat(auto-fit,minmax(12rem,1fr));
-}
 .grid-rows-\[auto_auto\] {
   grid-template-rows: auto auto;
 }
@@ -972,6 +966,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);
 }
@@ -1320,9 +1317,6 @@
 .pt-vsp-xs {
   padding-top: var(--spacing-vsp-xs);
 }
-.pr-\[4px\] {
-  padding-right: 4px;
-}
 .pr-hsp-lg {
   padding-right: var(--spacing-hsp-lg);
 }
@@ -1453,6 +1447,9 @@
 .break-words {
   overflow-wrap: break-word;
 }
+.wrap-anywhere {
+  overflow-wrap: anywhere;
+}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1465,12 +1462,6 @@
 .text-bg {
   color: var(--color-bg);
 }
-.text-bg\/70 {
-  color: var(--color-bg);
-  @supports (color: color-mix(in lab, red, red)) {
-    color: color-mix(in oklab, var(--color-bg) 70%, transparent);
-  }
-}
 .text-chat-assistant-text {
   color: var(--color-chat-assistant-text);
 }
@@ -1540,10 +1531,6 @@
 .opacity-60 {
   opacity: 60%;
 }
-.shadow-\[0_1px_3px_color-mix\(in_srgb\,transparent\)\] {
-  --tw-shadow: 0 1px 3px var(--tw-shadow-color, color-mix(in srgb,transparent));
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-}
 .shadow-\[0_1px_3px_color-mix\(in_srgb\,var\(--color-fg\)_8\%\,transparent\)\] {
   --tw-shadow: 0 1px 3px var(--tw-shadow-color, var(--color-fg));
   @supports (color: color-mix(in lab, red, red)) {
@@ -1551,10 +1538,6 @@
   }
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
-.shadow-\[0_1px_3px_color-mix\(in_srgb\,…\)\] {
-  --tw-shadow: 0 1px 3px var(--tw-shadow-color, color-mix(in srgb,…));
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-}
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1574,10 +1557,6 @@
   outline-style: var(--tw-outline-style);
   outline-width: 1px;
 }
-.sepia {
-  --tw-sepia: sepia(100%);
-  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-}
 .filter {
   filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
 }
@@ -1658,13 +1637,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 +1658,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 +1673,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 +1857,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 +1901,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 +2195,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 {
@@ -2370,7 +2318,6 @@
   --color-zd-chat-assistant-text: var(--zd-chat-assistant-text);
   --color-zd-matched-keyword-bg: var(--zd-matched-keyword-bg);
   --color-zd-matched-keyword-fg: var(--zd-matched-keyword-fg);
-  --z-index-content: 0;
   --z-index-local-1: 1;
   --z-index-local-2: 2;
   --z-index-sidebar: 10;

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-assertions/index.d.ts

@@ -42,6 +42,32 @@ export interface EmptyStringFaviconOrLogoSubject {
  * object is not an empty string).
  */
 export declare function assertNoEmptyStringFaviconOrLogo(settings: EmptyStringFaviconOrLogoSubject): void;
+/** Structural subset of `Settings` the zdtp-bundling helpers read. */
+export interface ZdtpBundlingSubject {
+    designTokenPanel?: boolean;
+    bundleZdtp?: boolean;
+}
+/**
+ * Resolve whether `@takazudo/zdtp` is bundled into the island build.
+ *
+ * `bundleZdtp` is optional and carries NO `DEFAULT_SETTINGS` key — its default
+ * is derived here, at the read site, from `designTokenPanel`. So a project
+ * that never heard of `bundleZdtp` keeps exactly today's behaviour (#4201):
+ * panel off → zdtp shadowed, panel on → zdtp bundled. Setting `bundleZdtp`
+ * explicitly decouples the two, which is the whole point (#4261): a host that
+ * mounts its own panel through `@takazudo/zudo-doc/design-token-panel-bootstrap`
+ * needs the real loader while the package panel stays off.
+ */
+export declare function resolvesBundleZdtp(settings: ZdtpBundlingSubject): boolean;
+/**
+ * Reject `designTokenPanel: true` together with `bundleZdtp: false`.
+ *
+ * That pair mounts the package-owned panel while shadowing
+ * `@takazudo/zudo-doc/zdtp-loader` with a throwing stub, so the panel's
+ * `loadZdtp()` is guaranteed to reject at runtime — a green build that breaks
+ * in the browser. Fail loudly at config resolution instead (#4261).
+ */
+export declare function assertZdtpBundlingConsistent(settings: ZdtpBundlingSubject): void;
 /**
  * Warn about `categoryMatch` values that cannot express the intended
  * dropdown grouping.