@takazudo/zudo-doc 5.24.2 → 5.26.0

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;

package/dist/asset-page/body.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from "preact/jsx-runtime";
+import { BodyFootUtilArea } from "../body-foot-util/index.js";
+import {
+  AssetActions,
+  AssetBodyLayout,
+  AssetCodeBody,
+  AssetDetails,
+  AssetDownloadPanel,
+  AssetHeader,
+  AssetImageStage,
+  AssetLinkedFrom,
+  AssetPdfStage,
+  AssetVideoStage
+} from "./components.js";
+import { ASSET_DETAILS_PREPAINT_SCRIPT, ASSET_PAGE_SCRIPT } from "./script.js";
+function resolveAssetPageLabels(t, locale) {
+  return {
+    badge: t("asset.badge", locale),
+    updated: t("doc.updated", locale),
+    linesTemplate: t("asset.lines", locale),
+    download: t("asset.download", locale),
+    openRaw: t("asset.openRaw", locale),
+    copy: t("asset.copy", locale),
+    wrap: t("asset.wrap", locale),
+    truncated: t("asset.truncated", locale),
+    noPreview: t("asset.noPreview", locale),
+    linkedFrom: t("asset.linkedFrom", locale),
+    backTo: t("asset.backTo", locale),
+    detailsHeading: t("asset.details", locale),
+    detailsType: t("asset.type", locale),
+    detailsSize: t("asset.size", locale),
+    detailsPath: t("asset.path", locale),
+    detailsDimensions: t("asset.dimensions", locale),
+    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),
+    detailsCollapse: t("asset.detailsCollapse", locale),
+    detailsExpand: t("asset.detailsExpand", locale),
+    viewSource: t("doc.viewSource", locale)
+  };
+}
+function renderAssetDetailsPrepaintScript() {
+  return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: ASSET_DETAILS_PREPAINT_SCRIPT } });
+}
+function AssetPageBody({
+  entry: asset,
+  locale,
+  rawUrl,
+  labels,
+  fullPattern,
+  backLink,
+  viewSourceUrl,
+  showViewSource
+}) {
+  const linesLabel = labels.linesTemplate.replace("{count}", String(asset.lines ?? 0));
+  const linked = /* @__PURE__ */ jsx(AssetLinkedFrom, { asset, label: labels.linkedFrom });
+  const detailsLabels = {
+    heading: labels.detailsHeading,
+    type: labels.detailsType,
+    size: labels.detailsSize,
+    path: labels.detailsPath,
+    dimensions: labels.detailsDimensions,
+    updated: labels.updated
+  };
+  const imageStageLabels = {
+    fit: labels.fit,
+    actualSize: labels.actualSize,
+    checker: labels.checker,
+    dark: labels.dark,
+    enlarge: labels.enlarge
+  };
+  const details = /* @__PURE__ */ jsx(AssetDetails, { asset, labels: detailsLabels });
+  const downloadPanel = /* @__PURE__ */ jsx(AssetDownloadPanel, { asset, rawUrl, noPreview: labels.noPreview, downloadLabel: labels.download, copyLabel: labels.copy });
+  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: labels.copy, wrapLabel: labels.wrap, truncatedLabel: labels.truncated, linesLabel });
+  const detailsToggleLabels = {
+    collapse: labels.detailsCollapse,
+    expand: labels.detailsExpand
+  };
+  const body = /* @__PURE__ */ jsx(AssetBodyLayout, { stage, details, linked, toggleLabels: detailsToggleLabels });
+  return /* @__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 ",
+      labels.backTo,
+      " ",
+      backLink.title
+    ] }) }),
+    /* @__PURE__ */ jsx(AssetHeader, { asset, locale, badge: labels.badge, updatedLabel: labels.updated, linesLabel, fullPattern }),
+    /* @__PURE__ */ jsx(AssetActions, { rawUrl, downloadLabel: labels.download, openRawLabel: labels.openRaw, copyLabel: labels.copy, wrapLabel: labels.wrap, code: !isMedia && asset.previewable && asset.sniffOk }),
+    body,
+    /* @__PURE__ */ jsx(AssetActions, { rawUrl, downloadLabel: labels.download, openRawLabel: labels.openRaw, copyLabel: labels.copy, wrapLabel: labels.wrap, bottom: true }),
+    showViewSource && /* @__PURE__ */ jsx(BodyFootUtilArea, { sourceUrl: viewSourceUrl, viewSourceLabel: labels.viewSource, docHistoryIsland: null }),
+    /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: ASSET_PAGE_SCRIPT } })
+  ] });
+}
+export {
+  AssetPageBody,
+  renderAssetDetailsPrepaintScript,
+  resolveAssetPageLabels
+};

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

@@ -0,0 +1,94 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+import type { ComponentChildren, VNode } from "preact";
+import type { DateFormatPattern } from "../format-date/index.js";
+import type { AssetRecord } from "../plugins/internal/asset-viewer/types.js";
+export declare function AssetEyebrow({ asset, badge }: {
+    asset: AssetRecord;
+    badge: string;
+}): VNode;
+export declare function AssetHeader({ asset, locale, badge, updatedLabel, linesLabel, fullPattern }: {
+    asset: AssetRecord;
+    locale: string;
+    badge: string;
+    updatedLabel: string;
+    linesLabel?: string;
+    fullPattern?: DateFormatPattern;
+}): VNode;
+export declare function AssetActions({ rawUrl, downloadLabel, openRawLabel, copyLabel, wrapLabel, code, bottom }: {
+    rawUrl: string;
+    downloadLabel: string;
+    openRawLabel: string;
+    copyLabel: string;
+    wrapLabel: string;
+    code?: boolean;
+    bottom?: boolean;
+}): VNode;
+export declare function AssetCodeBody({ asset, copyLabel, wrapLabel, truncatedLabel, linesLabel }: {
+    asset: AssetRecord;
+    copyLabel: string;
+    wrapLabel: string;
+    truncatedLabel: string;
+    linesLabel?: string;
+}): VNode;
+export interface AssetImageStageLabels {
+    fit: string;
+    actualSize: string;
+    checker: string;
+    dark: string;
+    enlarge: string;
+}
+export declare function AssetImageStage({ asset, rawUrl, labels }: {
+    asset: AssetRecord;
+    rawUrl: string;
+    labels: AssetImageStageLabels;
+}): VNode;
+export declare function AssetVideoStage({ asset, rawUrl }: {
+    asset: AssetRecord;
+    rawUrl: string;
+}): VNode;
+export declare function AssetPdfStage({ asset, rawUrl, children }: {
+    asset: AssetRecord;
+    rawUrl: string;
+    children: ComponentChildren;
+}): VNode;
+export declare function AssetDownloadPanel({ asset, rawUrl, noPreview, downloadLabel, copyLabel }: {
+    asset: AssetRecord;
+    rawUrl: string;
+    noPreview: string;
+    downloadLabel: string;
+    copyLabel: string;
+}): VNode;
+export declare function AssetLinkedFrom({ asset, label }: {
+    asset: AssetRecord;
+    label: string;
+}): VNode | null;
+export interface AssetDetailsLabels {
+    heading: string;
+    type: string;
+    size: string;
+    path: string;
+    dimensions: string;
+    updated: string;
+}
+export declare function AssetDetails({ asset, labels }: {
+    asset: AssetRecord;
+    labels: AssetDetailsLabels;
+}): VNode;
+export interface AssetDetailsToggleLabels {
+    collapse: string;
+    expand: string;
+}
+/**
+ * The single definition of the asset body grid and its bordered details card.
+ * Every asset kind routes through it — do not fork a per-kind variant (#3940).
+ *
+ * Exported (unlike its pre-#4221 module-private form in `index.tsx`) so
+ * `body.tsx#AssetPageBody` can compose it from a different module.
+ */
+export declare function AssetBodyLayout({ stage, details, linked, toggleLabels }: {
+    stage: ComponentChildren;
+    details: ComponentChildren;
+    linked: ComponentChildren;
+    toggleLabels: AssetDetailsToggleLabels;
+}): VNode;

package/dist/asset-page/components.js

@@ -0,0 +1,175 @@
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+import { formatDate } from "../format-date/index.js";
+import { formatAssetBytes } from "../asset-components/index.js";
+import { ChevronLeft, ChevronRight } from "../icons/index.js";
+import { actionClass, facetLabel, kindLabel } from "./shared.js";
+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 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-fg hover:text-accent focus-visible: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
+      ] })
+    ] })
+  ] });
+}
+export {
+  AssetActions,
+  AssetBodyLayout,
+  AssetCodeBody,
+  AssetDetails,
+  AssetDownloadPanel,
+  AssetEyebrow,
+  AssetHeader,
+  AssetImageStage,
+  AssetLinkedFrom,
+  AssetPdfStage,
+  AssetVideoStage
+};

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

@@ -1,91 +1,16 @@
 /** @jsxRuntime automatic */
 /** @jsxImportSource preact */
-import type { ComponentChildren, JSX, VNode } from "preact";
+import type { JSX } from "preact";
 import type { ChromeContext } from "../factory-context/index.js";
-import type { DateFormatPattern } from "../format-date/index.js";
 import type { AssetRecord } from "../plugins/internal/asset-viewer/types.js";
 import type { Settings } from "../settings.js";
 export { ASSET_DETAILS_HIDDEN_ATTR, ASSET_DETAILS_PREPAINT_SCRIPT, ASSET_DETAILS_STORAGE_KEY, ASSET_PAGE_SCRIPT, } from "./script.js";
 export type { AssetRecord } from "../plugins/internal/asset-viewer/types.js";
+export { AssetActions, AssetCodeBody, AssetDetails, AssetDownloadPanel, AssetEyebrow, AssetHeader, AssetImageStage, AssetLinkedFrom, AssetPdfStage, AssetVideoStage, type AssetDetailsLabels, type AssetDetailsToggleLabels, type AssetImageStageLabels, } from "./components.js";
+export { AssetPageBody, resolveAssetPageLabels, type AssetPageBodyProps, type AssetPageLabels, } from "./body.js";
 export interface AssetPageViewProps {
     entry: AssetRecord;
     locale?: string;
 }
-export declare function AssetEyebrow({ asset, badge }: {
-    asset: AssetRecord;
-    badge: string;
-}): VNode;
-export declare function AssetHeader({ asset, locale, badge, updatedLabel, linesLabel, fullPattern }: {
-    asset: AssetRecord;
-    locale: string;
-    badge: string;
-    updatedLabel: string;
-    linesLabel?: string;
-    fullPattern?: DateFormatPattern;
-}): VNode;
-export declare function AssetActions({ rawUrl, downloadLabel, openRawLabel, copyLabel, wrapLabel, code, bottom }: {
-    rawUrl: string;
-    downloadLabel: string;
-    openRawLabel: string;
-    copyLabel: string;
-    wrapLabel: string;
-    code?: boolean;
-    bottom?: boolean;
-}): VNode;
-export declare function AssetCodeBody({ asset, copyLabel, wrapLabel, truncatedLabel, linesLabel }: {
-    asset: AssetRecord;
-    copyLabel: string;
-    wrapLabel: string;
-    truncatedLabel: string;
-    linesLabel?: string;
-}): VNode;
-export interface AssetImageStageLabels {
-    fit: string;
-    actualSize: string;
-    checker: string;
-    dark: string;
-    enlarge: string;
-}
-export declare function AssetImageStage({ asset, rawUrl, labels }: {
-    asset: AssetRecord;
-    rawUrl: string;
-    labels: AssetImageStageLabels;
-}): VNode;
-export declare function AssetVideoStage({ asset, rawUrl }: {
-    asset: AssetRecord;
-    rawUrl: string;
-}): VNode;
-export declare function AssetPdfStage({ asset, rawUrl, children }: {
-    asset: AssetRecord;
-    rawUrl: string;
-    children: ComponentChildren;
-}): VNode;
-export declare function AssetDownloadPanel({ asset, rawUrl, noPreview, downloadLabel, copyLabel }: {
-    asset: AssetRecord;
-    rawUrl: string;
-    noPreview: string;
-    downloadLabel: string;
-    copyLabel: string;
-}): VNode;
-export declare function AssetLinkedFrom({ asset, label }: {
-    asset: AssetRecord;
-    label: string;
-}): VNode | null;
-export interface AssetDetailsLabels {
-    heading: string;
-    type: string;
-    size: string;
-    path: string;
-    dimensions: string;
-    updated: string;
-}
-export declare function AssetDetails({ asset, labels }: {
-    asset: AssetRecord;
-    labels: AssetDetailsLabels;
-}): VNode;
-export interface AssetDetailsToggleLabels {
-    collapse: string;
-    expand: string;
-}
 /** Build the package-owned wide asset viewer page from a chrome context. */
 export declare function createAssetPageView<S extends Settings = Settings>(ctx: ChromeContext<S>): (props: AssetPageViewProps) => JSX.Element;