@takazudo/zudo-doc 5.24.2 → 5.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/asset-components/asset-card.js +2 -2
  3. package/dist/asset-components/asset-code.js +1 -1
  4. package/dist/asset-index-page/body.d.ts +80 -0
  5. package/dist/asset-index-page/body.js +116 -0
  6. package/dist/asset-index-page/index.d.ts +3 -9
  7. package/dist/asset-index-page/index.js +18 -149
  8. package/dist/asset-index-page/tree.d.ts +24 -0
  9. package/dist/asset-index-page/tree.js +43 -0
  10. package/dist/asset-page/body.d.ts +98 -0
  11. package/dist/asset-page/body.js +107 -0
  12. package/dist/asset-page/components.d.ts +94 -0
  13. package/dist/asset-page/components.js +175 -0
  14. package/dist/asset-page/index.d.ts +3 -78
  15. package/dist/asset-page/index.js +30 -240
  16. package/dist/asset-page/shared.d.ts +15 -0
  17. package/dist/asset-page/shared.js +28 -0
  18. package/dist/breadcrumb/breadcrumb.js +1 -1
  19. package/dist/compiled.css +15 -40
  20. package/dist/config/component-tokens.js +3 -1
  21. package/dist/config.d.ts +10 -0
  22. package/dist/config.js +1 -0
  23. package/dist/doc-pager/index.js +2 -2
  24. package/dist/footer/footer.js +3 -3
  25. package/dist/header-with-defaults/index.d.ts +20 -0
  26. package/dist/header-with-defaults/index.js +9 -2
  27. package/dist/home-page/index.js +48 -21
  28. package/dist/i18n-defaults/index.js +3 -0
  29. package/dist/mdx-components/index.js +1 -1
  30. package/dist/nav-indexing/category-nav.js +1 -1
  31. package/dist/nav-indexing/category-tree-nav.js +1 -1
  32. package/dist/nav-indexing/doc-card-grid.js +2 -2
  33. package/dist/nav-indexing/docs-sitemap.js +2 -2
  34. package/dist/nav-indexing/nav-card-grid.d.ts +3 -2
  35. package/dist/nav-indexing/nav-card-grid.js +3 -3
  36. package/dist/nav-indexing/note-tray-index-parts/card-list.js +1 -1
  37. package/dist/nav-indexing/note-tray-index-parts/index-list.js +1 -1
  38. package/dist/nav-indexing/note-tray-index-parts/timeline.js +1 -1
  39. package/dist/nav-indexing/site-tree-nav-demo.js +2 -2
  40. package/dist/nav-indexing/versions-page-content.js +2 -2
  41. package/dist/plugins/routes.js +2 -13
  42. package/dist/safelist.css +1 -1
  43. package/dist/settings.d.ts +2 -0
  44. package/dist/site-tree-nav-island/index.js +3 -3
  45. package/dist/theme-packs/foundry/pack.css +4 -9
  46. package/eject/asset-components/asset-card.tsx +2 -2
  47. package/eject/asset-components/asset-code.tsx +1 -1
  48. package/eject/breadcrumb/breadcrumb.tsx +1 -1
  49. package/eject/doc-pager/index.tsx +2 -2
  50. package/eject/footer/footer.tsx +4 -4
  51. package/eject/site-tree-nav-island/index.tsx +4 -4
  52. package/package.json +37 -9
@@ -0,0 +1,107 @@
1
+ import { jsx, jsxs } from "preact/jsx-runtime";
2
+ import { BodyFootUtilArea } from "../body-foot-util/index.js";
3
+ import {
4
+ AssetActions,
5
+ AssetBodyLayout,
6
+ AssetCodeBody,
7
+ AssetDetails,
8
+ AssetDownloadPanel,
9
+ AssetHeader,
10
+ AssetImageStage,
11
+ AssetLinkedFrom,
12
+ AssetPdfStage,
13
+ AssetVideoStage
14
+ } from "./components.js";
15
+ import { ASSET_DETAILS_PREPAINT_SCRIPT, ASSET_PAGE_SCRIPT } from "./script.js";
16
+ function resolveAssetPageLabels(t, locale) {
17
+ return {
18
+ badge: t("asset.badge", locale),
19
+ updated: t("doc.updated", locale),
20
+ linesTemplate: t("asset.lines", locale),
21
+ download: t("asset.download", locale),
22
+ openRaw: t("asset.openRaw", locale),
23
+ copy: t("asset.copy", locale),
24
+ wrap: t("asset.wrap", locale),
25
+ truncated: t("asset.truncated", locale),
26
+ noPreview: t("asset.noPreview", locale),
27
+ linkedFrom: t("asset.linkedFrom", locale),
28
+ backTo: t("asset.backTo", locale),
29
+ detailsHeading: t("asset.details", locale),
30
+ detailsType: t("asset.type", locale),
31
+ detailsSize: t("asset.size", locale),
32
+ detailsPath: t("asset.path", locale),
33
+ detailsDimensions: t("asset.dimensions", locale),
34
+ fit: t("asset.fit", locale),
35
+ actualSize: t("asset.actualSize", locale),
36
+ checker: t("asset.checker", locale),
37
+ dark: t("asset.dark", locale),
38
+ enlarge: t("asset.enlarge", locale),
39
+ detailsCollapse: t("asset.detailsCollapse", locale),
40
+ detailsExpand: t("asset.detailsExpand", locale),
41
+ viewSource: t("doc.viewSource", locale)
42
+ };
43
+ }
44
+ function renderAssetDetailsPrepaintScript() {
45
+ return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: ASSET_DETAILS_PREPAINT_SCRIPT } });
46
+ }
47
+ function AssetPageBody({
48
+ entry: asset,
49
+ locale,
50
+ rawUrl,
51
+ labels,
52
+ fullPattern,
53
+ backLink,
54
+ viewSourceUrl,
55
+ showViewSource
56
+ }) {
57
+ const linesLabel = labels.linesTemplate.replace("{count}", String(asset.lines ?? 0));
58
+ const linked = /* @__PURE__ */ jsx(AssetLinkedFrom, { asset, label: labels.linkedFrom });
59
+ const detailsLabels = {
60
+ heading: labels.detailsHeading,
61
+ type: labels.detailsType,
62
+ size: labels.detailsSize,
63
+ path: labels.detailsPath,
64
+ dimensions: labels.detailsDimensions,
65
+ updated: labels.updated
66
+ };
67
+ const imageStageLabels = {
68
+ fit: labels.fit,
69
+ actualSize: labels.actualSize,
70
+ checker: labels.checker,
71
+ dark: labels.dark,
72
+ enlarge: labels.enlarge
73
+ };
74
+ const details = /* @__PURE__ */ jsx(AssetDetails, { asset, labels: detailsLabels });
75
+ const downloadPanel = /* @__PURE__ */ jsx(AssetDownloadPanel, { asset, rawUrl, noPreview: labels.noPreview, downloadLabel: labels.download, copyLabel: labels.copy });
76
+ let stage;
77
+ const isMedia = asset.previewable && asset.sniffOk && ["image", "video", "pdf"].includes(asset.kind);
78
+ if (!asset.previewable || !asset.sniffOk) stage = downloadPanel;
79
+ else if (asset.kind === "image") stage = /* @__PURE__ */ jsx(AssetImageStage, { asset, rawUrl, labels: imageStageLabels });
80
+ else if (asset.kind === "video") stage = /* @__PURE__ */ jsx(AssetVideoStage, { asset, rawUrl });
81
+ else if (asset.kind === "pdf") stage = /* @__PURE__ */ jsx(AssetPdfStage, { asset, rawUrl, children: downloadPanel });
82
+ else stage = /* @__PURE__ */ jsx(AssetCodeBody, { asset, copyLabel: labels.copy, wrapLabel: labels.wrap, truncatedLabel: labels.truncated, linesLabel });
83
+ const detailsToggleLabels = {
84
+ collapse: labels.detailsCollapse,
85
+ expand: labels.detailsExpand
86
+ };
87
+ const body = /* @__PURE__ */ jsx(AssetBodyLayout, { stage, details, linked, toggleLabels: detailsToggleLabels });
88
+ return /* @__PURE__ */ jsxs("div", { class: "zd-asset-page", "data-zd-asset-page": true, children: [
89
+ 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: [
90
+ "\u2190 ",
91
+ labels.backTo,
92
+ " ",
93
+ backLink.title
94
+ ] }) }),
95
+ /* @__PURE__ */ jsx(AssetHeader, { asset, locale, badge: labels.badge, updatedLabel: labels.updated, linesLabel, fullPattern }),
96
+ /* @__PURE__ */ jsx(AssetActions, { rawUrl, downloadLabel: labels.download, openRawLabel: labels.openRaw, copyLabel: labels.copy, wrapLabel: labels.wrap, code: !isMedia && asset.previewable && asset.sniffOk }),
97
+ body,
98
+ /* @__PURE__ */ jsx(AssetActions, { rawUrl, downloadLabel: labels.download, openRawLabel: labels.openRaw, copyLabel: labels.copy, wrapLabel: labels.wrap, bottom: true }),
99
+ showViewSource && /* @__PURE__ */ jsx(BodyFootUtilArea, { sourceUrl: viewSourceUrl, viewSourceLabel: labels.viewSource, docHistoryIsland: null }),
100
+ /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: ASSET_PAGE_SCRIPT } })
101
+ ] });
102
+ }
103
+ export {
104
+ AssetPageBody,
105
+ renderAssetDetailsPrepaintScript,
106
+ resolveAssetPageLabels
107
+ };
@@ -0,0 +1,94 @@
1
+ /** @jsxRuntime automatic */
2
+ /** @jsxImportSource preact */
3
+ import type { ComponentChildren, VNode } from "preact";
4
+ import type { DateFormatPattern } from "../format-date/index.js";
5
+ import type { AssetRecord } from "../plugins/internal/asset-viewer/types.js";
6
+ export declare function AssetEyebrow({ asset, badge }: {
7
+ asset: AssetRecord;
8
+ badge: string;
9
+ }): VNode;
10
+ export declare function AssetHeader({ asset, locale, badge, updatedLabel, linesLabel, fullPattern }: {
11
+ asset: AssetRecord;
12
+ locale: string;
13
+ badge: string;
14
+ updatedLabel: string;
15
+ linesLabel?: string;
16
+ fullPattern?: DateFormatPattern;
17
+ }): VNode;
18
+ export declare function AssetActions({ rawUrl, downloadLabel, openRawLabel, copyLabel, wrapLabel, code, bottom }: {
19
+ rawUrl: string;
20
+ downloadLabel: string;
21
+ openRawLabel: string;
22
+ copyLabel: string;
23
+ wrapLabel: string;
24
+ code?: boolean;
25
+ bottom?: boolean;
26
+ }): VNode;
27
+ export declare function AssetCodeBody({ asset, copyLabel, wrapLabel, truncatedLabel, linesLabel }: {
28
+ asset: AssetRecord;
29
+ copyLabel: string;
30
+ wrapLabel: string;
31
+ truncatedLabel: string;
32
+ linesLabel?: string;
33
+ }): VNode;
34
+ export interface AssetImageStageLabels {
35
+ fit: string;
36
+ actualSize: string;
37
+ checker: string;
38
+ dark: string;
39
+ enlarge: string;
40
+ }
41
+ export declare function AssetImageStage({ asset, rawUrl, labels }: {
42
+ asset: AssetRecord;
43
+ rawUrl: string;
44
+ labels: AssetImageStageLabels;
45
+ }): VNode;
46
+ export declare function AssetVideoStage({ asset, rawUrl }: {
47
+ asset: AssetRecord;
48
+ rawUrl: string;
49
+ }): VNode;
50
+ export declare function AssetPdfStage({ asset, rawUrl, children }: {
51
+ asset: AssetRecord;
52
+ rawUrl: string;
53
+ children: ComponentChildren;
54
+ }): VNode;
55
+ export declare function AssetDownloadPanel({ asset, rawUrl, noPreview, downloadLabel, copyLabel }: {
56
+ asset: AssetRecord;
57
+ rawUrl: string;
58
+ noPreview: string;
59
+ downloadLabel: string;
60
+ copyLabel: string;
61
+ }): VNode;
62
+ export declare function AssetLinkedFrom({ asset, label }: {
63
+ asset: AssetRecord;
64
+ label: string;
65
+ }): VNode | null;
66
+ export interface AssetDetailsLabels {
67
+ heading: string;
68
+ type: string;
69
+ size: string;
70
+ path: string;
71
+ dimensions: string;
72
+ updated: string;
73
+ }
74
+ export declare function AssetDetails({ asset, labels }: {
75
+ asset: AssetRecord;
76
+ labels: AssetDetailsLabels;
77
+ }): VNode;
78
+ export interface AssetDetailsToggleLabels {
79
+ collapse: string;
80
+ expand: string;
81
+ }
82
+ /**
83
+ * The single definition of the asset body grid and its bordered details card.
84
+ * Every asset kind routes through it — do not fork a per-kind variant (#3940).
85
+ *
86
+ * Exported (unlike its pre-#4221 module-private form in `index.tsx`) so
87
+ * `body.tsx#AssetPageBody` can compose it from a different module.
88
+ */
89
+ export declare function AssetBodyLayout({ stage, details, linked, toggleLabels }: {
90
+ stage: ComponentChildren;
91
+ details: ComponentChildren;
92
+ linked: ComponentChildren;
93
+ toggleLabels: AssetDetailsToggleLabels;
94
+ }): VNode;
@@ -0,0 +1,175 @@
1
+ import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
2
+ import { formatDate } from "../format-date/index.js";
3
+ import { formatAssetBytes } from "../asset-components/index.js";
4
+ import { ChevronLeft, ChevronRight } from "../icons/index.js";
5
+ import { actionClass, facetLabel, kindLabel } from "./shared.js";
6
+ function AssetEyebrow({ asset, badge }) {
7
+ return /* @__PURE__ */ jsxs("div", { class: "mb-vsp-xs flex flex-wrap items-center gap-hsp-xs text-micro tracking-wide uppercase", children: [
8
+ /* @__PURE__ */ jsx("span", { class: "rounded-full border border-muted px-hsp-sm py-vsp-3xs text-fg", children: badge }),
9
+ /* @__PURE__ */ jsx("span", { class: "rounded-full border border-muted px-hsp-sm py-vsp-3xs text-muted", children: kindLabel(asset) })
10
+ ] });
11
+ }
12
+ function AssetHeader({ asset, locale, badge, updatedLabel, linesLabel, fullPattern }) {
13
+ const facet = facetLabel(asset, linesLabel);
14
+ return /* @__PURE__ */ jsxs("header", { children: [
15
+ /* @__PURE__ */ jsx(AssetEyebrow, { asset, badge }),
16
+ /* @__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 }),
17
+ /* @__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: [
18
+ asset.dir && /* @__PURE__ */ jsx("span", { children: asset.dir }),
19
+ facet && /* @__PURE__ */ jsx("span", { children: facet }),
20
+ /* @__PURE__ */ jsx("span", { children: formatAssetBytes(asset.bytes) }),
21
+ asset.updatedDate && /* @__PURE__ */ jsxs("span", { children: [
22
+ updatedLabel,
23
+ " ",
24
+ formatDate(asset.updatedDate, locale, fullPattern)
25
+ ] }),
26
+ asset.author && /* @__PURE__ */ jsx("span", { children: asset.author })
27
+ ] }),
28
+ asset.description && /* @__PURE__ */ jsx("p", { class: "mb-vsp-lg text-title text-muted", "data-doc-description": true, children: asset.description })
29
+ ] });
30
+ }
31
+ function AssetActions({ rawUrl, downloadLabel, openRawLabel, copyLabel, wrapLabel, code = false, bottom = false }) {
32
+ 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: [
33
+ /* @__PURE__ */ jsx("a", { download: true, href: rawUrl, class: `${actionClass(true)} hover:underline focus-visible:underline`, children: downloadLabel }),
34
+ /* @__PURE__ */ jsx("a", { href: rawUrl, "data-zfb-reload": true, target: "_blank", rel: "noopener", class: `${actionClass()} hover:underline focus-visible:underline`, children: openRawLabel }),
35
+ code && /* @__PURE__ */ jsx("button", { type: "button", disabled: true, "data-zd-asset-action": "copy", class: actionClass(), children: copyLabel }),
36
+ code && /* @__PURE__ */ jsx("button", { type: "button", disabled: true, "data-zd-asset-action": "wrap", class: actionClass(), children: wrapLabel })
37
+ ] });
38
+ }
39
+ function AssetCodeBody({ asset, copyLabel, wrapLabel, truncatedLabel, linesLabel }) {
40
+ const highlightedCode = asset.html?.match(/^<pre\b[^>]*>\s*(<code\b[\s\S]*<\/code>)\s*<\/pre>$/)?.[1] ?? "";
41
+ return /* @__PURE__ */ jsxs("section", { children: [
42
+ /* @__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: [
43
+ /* @__PURE__ */ jsxs("span", { class: "font-mono", children: [
44
+ asset.name,
45
+ " \xB7 ",
46
+ linesLabel ?? `${asset.lines ?? 0} lines`,
47
+ " \xB7 ",
48
+ formatAssetBytes(asset.bytes),
49
+ " \xB7 ",
50
+ kindLabel(asset)
51
+ ] }),
52
+ /* @__PURE__ */ jsxs("span", { class: "flex gap-hsp-sm", children: [
53
+ /* @__PURE__ */ jsx("button", { type: "button", disabled: true, "data-zd-asset-action": "copy", class: "text-fg hover:text-accent focus-visible:text-accent", children: copyLabel }),
54
+ /* @__PURE__ */ jsx("button", { type: "button", disabled: true, "data-zd-asset-action": "wrap", class: "text-fg hover:text-accent focus-visible:text-accent", children: wrapLabel })
55
+ ] })
56
+ ] }),
57
+ /* @__PURE__ */ jsx("pre", { class: "hi-root zd-asset-code", "data-lang": asset.language ?? "text", dangerouslySetInnerHTML: { __html: highlightedCode } }),
58
+ asset.truncated && /* @__PURE__ */ jsx("p", { class: "mt-vsp-xs text-caption text-muted", children: truncatedLabel })
59
+ ] });
60
+ }
61
+ function EnlargeIcon() {
62
+ 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" }) });
63
+ }
64
+ function AssetImageStage({ asset, rawUrl, labels }) {
65
+ return /* @__PURE__ */ jsxs("section", { children: [
66
+ /* @__PURE__ */ jsxs("div", { class: "mb-vsp-xs flex flex-wrap gap-hsp-sm text-caption", children: [
67
+ /* @__PURE__ */ jsxs("div", { class: "flex rounded border border-muted", children: [
68
+ /* @__PURE__ */ jsx("button", { type: "button", "aria-pressed": "true", "data-zd-asset-action": "fit", class: "px-hsp-sm py-vsp-3xs", children: labels.fit }),
69
+ /* @__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 })
70
+ ] }),
71
+ /* @__PURE__ */ jsxs("div", { class: "flex rounded border border-muted", children: [
72
+ /* @__PURE__ */ jsx("button", { type: "button", "aria-pressed": "true", "data-zd-asset-action": "checker", class: "px-hsp-sm py-vsp-3xs", children: labels.checker }),
73
+ /* @__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 })
74
+ ] })
75
+ ] }),
76
+ /* @__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: [
77
+ /* @__PURE__ */ jsx("img", { src: rawUrl, alt: asset.description ?? asset.name, width: asset.width, height: asset.height }),
78
+ /* @__PURE__ */ jsx("button", { type: "button", class: "zd-enlarge-btn", hidden: true, "aria-label": labels.enlarge, children: /* @__PURE__ */ jsx(EnlargeIcon, {}) })
79
+ ] })
80
+ ] });
81
+ }
82
+ function AssetVideoStage({ asset, rawUrl }) {
83
+ 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" }) });
84
+ }
85
+ function AssetPdfStage({ asset, rawUrl, children }) {
86
+ return /* @__PURE__ */ jsxs("section", { children: [
87
+ /* @__PURE__ */ jsx("iframe", { title: asset.name, src: `${rawUrl}#view=FitH`, class: "zd-asset-pdf h-[70vh] w-full rounded border border-muted" }),
88
+ /* @__PURE__ */ jsx("div", { class: "mt-vsp-sm", children })
89
+ ] });
90
+ }
91
+ function AssetDownloadPanel({ asset, rawUrl, noPreview, downloadLabel, copyLabel }) {
92
+ return /* @__PURE__ */ jsxs("section", { class: "rounded border border-dashed border-muted p-hsp-xl text-center", children: [
93
+ /* @__PURE__ */ jsx("div", { "aria-hidden": "true", class: "mb-vsp-xs text-heading", children: "\u2193" }),
94
+ /* @__PURE__ */ jsx("h2", { class: "font-mono text-title font-bold", children: asset.name }),
95
+ /* @__PURE__ */ jsxs("p", { class: "mb-vsp-sm text-caption text-muted", children: [
96
+ kindLabel(asset),
97
+ " \xB7 ",
98
+ formatAssetBytes(asset.bytes)
99
+ ] }),
100
+ /* @__PURE__ */ jsx("p", { class: "mb-vsp-md text-small text-muted", children: noPreview }),
101
+ /* @__PURE__ */ jsxs("div", { class: "flex flex-wrap justify-center gap-hsp-sm", children: [
102
+ /* @__PURE__ */ jsx("a", { download: true, href: rawUrl, class: `${actionClass(true)} hover:underline focus-visible:underline`, children: downloadLabel }),
103
+ /* @__PURE__ */ jsx("button", { type: "button", "data-zd-asset-action": "copy-url", "data-zd-copy-url": rawUrl, class: actionClass(), children: copyLabel })
104
+ ] })
105
+ ] });
106
+ }
107
+ function AssetLinkedFrom({ asset, label }) {
108
+ if (asset.linkedFrom.length === 0) return null;
109
+ return /* @__PURE__ */ jsxs("section", { class: "mt-vsp-lg", children: [
110
+ /* @__PURE__ */ jsx("h2", { class: "mb-vsp-xs text-title font-bold", children: label }),
111
+ /* @__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: [
112
+ /* @__PURE__ */ jsx("p", { class: "text-caption text-muted", children: link.crumb }),
113
+ /* @__PURE__ */ jsx("a", { href: link.href, class: "text-fg hover:text-accent focus-visible:text-accent hover:underline focus-visible:underline", children: link.title }),
114
+ /* @__PURE__ */ jsx("p", { class: "text-caption italic text-muted", children: link.context })
115
+ ] })) })
116
+ ] });
117
+ }
118
+ function AssetDetails({ asset, labels }) {
119
+ const rows = [[labels.type, asset.mime], [labels.size, formatAssetBytes(asset.bytes)], [labels.path, asset.path]];
120
+ if (asset.width !== void 0 && asset.height !== void 0) rows.splice(1, 0, [labels.dimensions, `${asset.width} \xD7 ${asset.height}`]);
121
+ if (asset.updatedDate) rows.push([labels.updated, asset.updatedDate]);
122
+ return /* @__PURE__ */ jsxs("section", { children: [
123
+ /* @__PURE__ */ jsx("h2", { class: "mb-vsp-xs text-title font-bold", children: labels.heading }),
124
+ /* @__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: [
125
+ /* @__PURE__ */ jsx("dt", { class: "font-medium text-muted", children: term }),
126
+ /* @__PURE__ */ jsx("dd", { class: "min-w-0 break-words text-fg", children: value })
127
+ ] })) })
128
+ ] });
129
+ }
130
+ const ASSET_DETAILS_RAIL_ID = "zd-asset-details-rail";
131
+ function AssetDetailsToggle({ labels }) {
132
+ return /* @__PURE__ */ jsxs(
133
+ "button",
134
+ {
135
+ type: "button",
136
+ disabled: true,
137
+ "data-zd-asset-details-toggle": true,
138
+ "data-zd-label-collapse": labels.collapse,
139
+ "data-zd-label-expand": labels.expand,
140
+ "aria-controls": ASSET_DETAILS_RAIL_ID,
141
+ "aria-expanded": "true",
142
+ "aria-label": labels.collapse,
143
+ 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",
144
+ children: [
145
+ /* @__PURE__ */ jsx("span", { "data-zd-asset-details-chevron": "collapse", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-icon-sm w-icon-sm" }) }),
146
+ /* @__PURE__ */ jsx("span", { "data-zd-asset-details-chevron": "expand", children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-icon-sm w-icon-sm" }) })
147
+ ]
148
+ }
149
+ );
150
+ }
151
+ function AssetBodyLayout({ stage, details, linked, toggleLabels }) {
152
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
153
+ /* @__PURE__ */ jsx(AssetDetailsToggle, { labels: toggleLabels }),
154
+ /* @__PURE__ */ jsxs("div", { class: "zd-asset-media-grid", children: [
155
+ /* @__PURE__ */ jsx("div", { class: "min-w-0", children: stage }),
156
+ /* @__PURE__ */ jsxs("div", { id: ASSET_DETAILS_RAIL_ID, "data-zd-asset-details": true, class: "zd-asset-media-rail", children: [
157
+ /* @__PURE__ */ jsx("div", { class: "rounded border border-muted p-hsp-lg", children: details }),
158
+ linked
159
+ ] })
160
+ ] })
161
+ ] });
162
+ }
163
+ export {
164
+ AssetActions,
165
+ AssetBodyLayout,
166
+ AssetCodeBody,
167
+ AssetDetails,
168
+ AssetDownloadPanel,
169
+ AssetEyebrow,
170
+ AssetHeader,
171
+ AssetImageStage,
172
+ AssetLinkedFrom,
173
+ AssetPdfStage,
174
+ AssetVideoStage
175
+ };
@@ -1,91 +1,16 @@
1
1
  /** @jsxRuntime automatic */
2
2
  /** @jsxImportSource preact */
3
- import type { ComponentChildren, JSX, VNode } from "preact";
3
+ import type { JSX } from "preact";
4
4
  import type { ChromeContext } from "../factory-context/index.js";
5
- import type { DateFormatPattern } from "../format-date/index.js";
6
5
  import type { AssetRecord } from "../plugins/internal/asset-viewer/types.js";
7
6
  import type { Settings } from "../settings.js";
8
7
  export { ASSET_DETAILS_HIDDEN_ATTR, ASSET_DETAILS_PREPAINT_SCRIPT, ASSET_DETAILS_STORAGE_KEY, ASSET_PAGE_SCRIPT, } from "./script.js";
9
8
  export type { AssetRecord } from "../plugins/internal/asset-viewer/types.js";
9
+ export { AssetActions, AssetCodeBody, AssetDetails, AssetDownloadPanel, AssetEyebrow, AssetHeader, AssetImageStage, AssetLinkedFrom, AssetPdfStage, AssetVideoStage, type AssetDetailsLabels, type AssetDetailsToggleLabels, type AssetImageStageLabels, } from "./components.js";
10
+ export { AssetPageBody, resolveAssetPageLabels, type AssetPageBodyProps, type AssetPageLabels, } from "./body.js";
10
11
  export interface AssetPageViewProps {
11
12
  entry: AssetRecord;
12
13
  locale?: string;
13
14
  }
14
- export declare function AssetEyebrow({ asset, badge }: {
15
- asset: AssetRecord;
16
- badge: string;
17
- }): VNode;
18
- export declare function AssetHeader({ asset, locale, badge, updatedLabel, linesLabel, fullPattern }: {
19
- asset: AssetRecord;
20
- locale: string;
21
- badge: string;
22
- updatedLabel: string;
23
- linesLabel?: string;
24
- fullPattern?: DateFormatPattern;
25
- }): VNode;
26
- export declare function AssetActions({ rawUrl, downloadLabel, openRawLabel, copyLabel, wrapLabel, code, bottom }: {
27
- rawUrl: string;
28
- downloadLabel: string;
29
- openRawLabel: string;
30
- copyLabel: string;
31
- wrapLabel: string;
32
- code?: boolean;
33
- bottom?: boolean;
34
- }): VNode;
35
- export declare function AssetCodeBody({ asset, copyLabel, wrapLabel, truncatedLabel, linesLabel }: {
36
- asset: AssetRecord;
37
- copyLabel: string;
38
- wrapLabel: string;
39
- truncatedLabel: string;
40
- linesLabel?: string;
41
- }): VNode;
42
- export interface AssetImageStageLabels {
43
- fit: string;
44
- actualSize: string;
45
- checker: string;
46
- dark: string;
47
- enlarge: string;
48
- }
49
- export declare function AssetImageStage({ asset, rawUrl, labels }: {
50
- asset: AssetRecord;
51
- rawUrl: string;
52
- labels: AssetImageStageLabels;
53
- }): VNode;
54
- export declare function AssetVideoStage({ asset, rawUrl }: {
55
- asset: AssetRecord;
56
- rawUrl: string;
57
- }): VNode;
58
- export declare function AssetPdfStage({ asset, rawUrl, children }: {
59
- asset: AssetRecord;
60
- rawUrl: string;
61
- children: ComponentChildren;
62
- }): VNode;
63
- export declare function AssetDownloadPanel({ asset, rawUrl, noPreview, downloadLabel, copyLabel }: {
64
- asset: AssetRecord;
65
- rawUrl: string;
66
- noPreview: string;
67
- downloadLabel: string;
68
- copyLabel: string;
69
- }): VNode;
70
- export declare function AssetLinkedFrom({ asset, label }: {
71
- asset: AssetRecord;
72
- label: string;
73
- }): VNode | null;
74
- export interface AssetDetailsLabels {
75
- heading: string;
76
- type: string;
77
- size: string;
78
- path: string;
79
- dimensions: string;
80
- updated: string;
81
- }
82
- export declare function AssetDetails({ asset, labels }: {
83
- asset: AssetRecord;
84
- labels: AssetDetailsLabels;
85
- }): VNode;
86
- export interface AssetDetailsToggleLabels {
87
- collapse: string;
88
- expand: string;
89
- }
90
15
  /** Build the package-owned wide asset viewer page from a chrome context. */
91
16
  export declare function createAssetPageView<S extends Settings = Settings>(ctx: ChromeContext<S>): (props: AssetPageViewProps) => JSX.Element;