@cosmicdrift/kumiko-document-designer 0.0.0-stage → 0.363.0

package/dist/web/origin-bar.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { TemplateResolverHandlers, TemplateResolverQueries, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { useMutation, usePrimitives, useQuery, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { EmptyState, LoadingState } from "@cosmicdrift/kumiko-renderer-web";
+import { useState } from "react";
+const DIFF_MARK = {
+    same: " ",
+    added: "+",
+    removed: "-",
+};
+const DIFF_TONE = {
+    same: "text-muted-foreground",
+    added: "bg-status-ok-surface text-status-ok",
+    removed: "bg-status-bad-surface text-status-bad",
+};
+function metaValueText(value) {
+    if (value === undefined || value === null)
+        return "–";
+    return typeof value === "string" ? value : JSON.stringify(value);
+}
+export function DiffPanel({ tenantId }) {
+    const t = useTranslation();
+    const { data, loading } = useQuery(TemplateResolverQueries.diffToSystem, {
+        id: tenantId,
+    });
+    if (loading || data === null)
+        return _jsx(LoadingState, {});
+    if (data.identical)
+        return _jsx(EmptyState, { title: t("documentDesigner.editor.diff.identical") });
+    // Diff blocks have no identity beyond their position.
+    const entries = data.blocks.map((block, position) => ({ block, key: `block-${position}` }));
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("ul", { className: "flex flex-col gap-1", "data-testid": "document-designer-diff", children: entries.map(({ block, key }) => (_jsxs("li", { "data-change": block.change, className: `whitespace-pre-wrap rounded px-2 py-1 font-mono text-xs ${DIFF_TONE[block.change]}`, children: [DIFF_MARK[block.change], " ", block.content] }, key))) }), data.meta.length > 0 && (_jsx("ul", { className: "flex flex-col gap-1", "data-testid": "document-designer-diff-meta", children: data.meta.map((entry) => (_jsxs("li", { className: "rounded bg-muted px-2 py-1 font-mono text-xs", children: [entry.key, ": ", metaValueText(entry.system), " \u2192 ", metaValueText(entry.tenant)] }, entry.key))) }))] }));
+}
+function originText(t, args) {
+    const { isSystemAdmin, source, kind, userCount, overrides } = args;
+    const systemVersion = source.system?.version ?? 0;
+    if (isSystemAdmin) {
+        if (overrides === null)
+            return t("documentDesigner.editor.origin.platformPlain", { version: systemVersion });
+        return overrides.totalTenants === null
+            ? t("documentDesigner.editor.origin.platformCount", {
+                version: systemVersion,
+                active: overrides.activeOverrides,
+            })
+            : t("documentDesigner.editor.origin.platformOfTotal", {
+                version: systemVersion,
+                active: overrides.activeOverrides,
+                total: overrides.totalTenants,
+            });
+    }
+    const usesKey = kind === "mail-layout" ? "mails" : "pdfs";
+    if (source.tenant !== null) {
+        return t(`documentDesigner.editor.origin.tenant.${usesKey}`, {
+            version: systemVersion,
+            count: userCount,
+        });
+    }
+    return source.system === null
+        ? t("documentDesigner.editor.origin.none")
+        : t("documentDesigner.editor.origin.system");
+}
+export function OriginBar({ isSystemAdmin, source, kind, userCount, overrides, onReset, }) {
+    const t = useTranslation();
+    const { Button, Dialog, Drawer, Modal, Text } = usePrimitives();
+    const [diffOpen, setDiffOpen] = useState(false);
+    const [resetOpen, setResetOpen] = useState(false);
+    const resetToSystem = useMutation(TemplateResolverHandlers.resetToSystem);
+    const { tenant, system } = source;
+    const canDiff = tenant !== null && system?.contentFormat === "html";
+    const canReset = tenant !== null && system !== null && !isSystemAdmin;
+    const diffTitle = t("documentDesigner.editor.diff.title");
+    const diffBody = tenant === null ? null : _jsx(DiffPanel, { tenantId: tenant.id });
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2 rounded-md border bg-muted px-4 py-2.5", "data-testid": "document-designer-origin-bar", children: [_jsx(Text, { children: originText(t, { isSystemAdmin, source, kind, userCount, overrides }) }), _jsx("div", { className: "grow" }), canDiff && (_jsx(Button, { variant: "link", onClick: () => setDiffOpen(true), testId: "document-designer-diff-open", children: t("documentDesigner.editor.diff.open") })), canReset && (_jsx(Button, { variant: "link", onClick: () => setResetOpen(true), testId: "document-designer-reset-open", children: t("documentDesigner.editor.reset.open") })), diffOpen &&
+                (Drawer === undefined ? (_jsx(Modal, { open: true, onOpenChange: setDiffOpen, title: diffTitle, children: diffBody })) : (_jsx(Drawer, { open: true, onOpenChange: setDiffOpen, title: diffTitle, children: diffBody }))), _jsx(Dialog, { open: resetOpen, onOpenChange: setResetOpen, title: t("documentDesigner.editor.reset.title"), description: t("documentDesigner.editor.reset.description"), confirmLabel: t("documentDesigner.editor.reset.confirm"), variant: "danger", onConfirm: async () => {
+                    if (tenant === null)
+                        return;
+                    const result = await resetToSystem.mutate({ id: tenant.id });
+                    if (result.isSuccess)
+                        onReset();
+                } })] }));
+}

package/dist/web/overrides-drawer.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import { type TenantOverrides } from "./types.js";
+export type OverridesDrawerProps = {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    readonly slug: string;
+    readonly overrides: TenantOverrides | null;
+};
+export declare function OverridesDrawer({ open, onOpenChange, slug, overrides, }: OverridesDrawerProps): ReactNode;

package/dist/web/overrides-drawer.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { TemplateResolverQueries } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { useQuery, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { Drawer } from "@cosmicdrift/kumiko-renderer-web";
+import { DOCUMENT_PDF_KIND } from "./types.js";
+function BreakdownRow({ label, value }) {
+    return (_jsxs("li", { className: "flex items-center justify-between gap-4 text-sm", children: [_jsx("span", { children: label }), _jsx("span", { className: "tabular-nums", children: value })] }));
+}
+export function OverridesDrawer({ open, onOpenChange, slug, overrides, }) {
+    const t = useTranslation();
+    // Only asked while the drawer is open; the answer is not needed for the editor itself.
+    const usage = useQuery(TemplateResolverQueries.usage, { slug, kind: DOCUMENT_PDF_KIND }, { enabled: open });
+    const active = overrides?.activeOverrides ?? 0;
+    const draft = overrides?.draftOverrides ?? 0;
+    const total = overrides?.totalTenants ?? null;
+    const usedBy = usage.data?.usedBy ?? [];
+    return (_jsx(Drawer, { open: open, onOpenChange: onOpenChange, title: t("documentDesigner.overrides.title"), testId: "document-designer-overrides-drawer", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("section", { className: "flex flex-col gap-2", children: _jsxs("ul", { className: "m-0 flex list-none flex-col gap-1 p-0", children: [_jsx(BreakdownRow, { label: t("documentDesigner.overrides.active"), value: active }), _jsx(BreakdownRow, { label: t("documentDesigner.overrides.draftOnly"), value: draft }), total !== null && (_jsx(BreakdownRow, { label: t("documentDesigner.overrides.none"), value: Math.max(0, total - active - draft) })), total !== null && (_jsx(BreakdownRow, { label: t("documentDesigner.overrides.total"), value: total }))] }) }), _jsxs("section", { className: "flex flex-col gap-2", children: [_jsx("h3", { className: "m-0 text-sm font-semibold", children: t("documentDesigner.overrides.usedBy") }), usedBy.length === 0 ? (_jsx("p", { className: "m-0 text-sm text-muted-foreground", children: t("documentDesigner.overrides.usedByEmpty") })) : (_jsx("ul", { className: "m-0 flex list-none flex-col gap-1 p-0 font-mono text-xs", children: usedBy.map((entry) => (_jsx("li", { children: entry.qualifiedName }, `${entry.qualifiedName}:${entry.role}`))) }))] })] }) }));
+}

package/dist/web/overview-row.d.ts

@@ -0,0 +1,21 @@
+import type { TemplateEditorKind } from "../constants.js";
+export type OverviewUsageView = {
+    readonly feature: string;
+    readonly notification: string;
+};
+export type OverviewRowView = {
+    readonly id: string;
+    readonly title: string;
+    readonly layoutSlug: string | null;
+    readonly slug: string;
+    readonly kind: TemplateEditorKind;
+    readonly origin: "tenant" | "system";
+    readonly locales: readonly string[];
+    readonly status: "draft" | "active" | "archived";
+    readonly version: number;
+    readonly systemVersion: number | null;
+    readonly modifiedAt: string;
+    readonly usedBy: readonly OverviewUsageView[];
+    readonly usedByCount: number;
+};
+export declare function parseOverviewRow(row: Readonly<Record<string, unknown>>): OverviewRowView | null;

package/dist/web/overview-row.js

@@ -0,0 +1,47 @@
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isTemplateKind(value) {
+    return (value === "mail" ||
+        value === "document-pdf" ||
+        value === "mail-layout" ||
+        value === "pdf-layout");
+}
+function isStatus(value) {
+    return value === "draft" || value === "active" || value === "archived";
+}
+function usageViewOf(value) {
+    if (!isRecord(value))
+        return null;
+    const { feature, notification } = value;
+    return typeof feature === "string" && typeof notification === "string"
+        ? { feature, notification }
+        : null;
+}
+const stringOr = (value, fallback) => typeof value === "string" ? value : fallback;
+const numberOr = (value, fallback) => typeof value === "number" ? value : fallback;
+export function parseOverviewRow(row) {
+    const { id, title, layoutSlug, slug, kind, origin, locales, status, version, systemVersion, modifiedAt, usedBy, usedByCount, } = row;
+    if (typeof slug !== "string" || !isTemplateKind(kind) || !isStatus(status))
+        return null;
+    if (origin !== "tenant" && origin !== "system")
+        return null;
+    const usages = Array.isArray(usedBy) ? usedBy.flatMap((u) => usageViewOf(u) ?? []) : [];
+    return {
+        id: stringOr(id, `${kind}|${slug}`),
+        title: stringOr(title, slug),
+        layoutSlug: typeof layoutSlug === "string" ? layoutSlug : null,
+        slug,
+        kind,
+        origin,
+        locales: Array.isArray(locales)
+            ? locales.filter((l) => typeof l === "string")
+            : [],
+        status,
+        version: numberOr(version, 0),
+        systemVersion: numberOr(systemVersion, null),
+        modifiedAt: stringOr(modifiedAt, ""),
+        usedBy: usages,
+        usedByCount: numberOr(usedByCount, usages.length),
+    };
+}

package/dist/web/page-canvas.d.ts

@@ -0,0 +1,18 @@
+import { type DocumentEditorHandle, type DocumentResourcePreview } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { type ReactNode } from "react";
+import { type PdfMetaDraft } from "./pdf-meta.js";
+import type { LayoutRegionsHtml } from "./types.js";
+export type PageCanvasProps = {
+    readonly meta: PdfMetaDraft;
+    readonly content: string;
+    readonly onContentChange: (value: string) => void;
+    readonly regions: LayoutRegionsHtml | null;
+    readonly layoutName: string;
+    readonly variableLabels: Readonly<Record<string, string>>;
+    readonly systemVariables: readonly string[];
+    readonly systemLabels: Readonly<Record<string, string>>;
+    readonly variableNames: readonly string[];
+    readonly resourcePreviews: Readonly<Record<string, DocumentResourcePreview>>;
+    readonly onEditorReady: (handle: DocumentEditorHandle) => void;
+};
+export declare function PageCanvas(props: PageCanvasProps): ReactNode;

package/dist/web/page-canvas.js

@@ -0,0 +1,38 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { DocumentContentEditor, PDF_DOCUMENT_BLOCKS, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { cn } from "@cosmicdrift/kumiko-renderer-web";
+import { useCallback } from "react";
+import { LayoutHtml } from "./layout-html.js";
+import { MARGIN_SIDES } from "./pdf-meta.js";
+const MM_TO_PX = 96 / 25.4;
+const DEFAULT_MARGIN_MM = 15;
+// Page width in CSS px at 96 dpi, as a class so no inline width is needed.
+const PAGE_WIDTH_CLASSES = {
+    "A4-portrait": "w-[794px]",
+    "A4-landscape": "w-[1123px]",
+    "Letter-portrait": "w-[816px]",
+    "Letter-landscape": "w-[1056px]",
+};
+function RegionBlock({ html, systemLabels, caption, }) {
+    if (html.trim() === "")
+        return null;
+    return (_jsxs("div", { className: "relative border border-dashed border-border bg-muted/40 p-2 text-xs text-muted-foreground", children: [_jsx("span", { className: "absolute right-1 top-0 text-[10px] uppercase tracking-wide", children: caption }), _jsx(LayoutHtml, { html: html, systemLabels: systemLabels })] }));
+}
+export function PageCanvas(props) {
+    const t = useTranslation();
+    const { meta } = props;
+    const showRegions = meta.layoutHeaderFooter && props.regions !== null;
+    const caption = t("documentDesigner.canvas.fromLayout", { layout: props.layoutName });
+    // CSS variables instead of a style prop: margins are user data, classes are static.
+    const applyMargins = useCallback((element) => {
+        if (element === null)
+            return;
+        for (const side of MARGIN_SIDES) {
+            const mm = meta.margins[side] === "" ? DEFAULT_MARGIN_MM : meta.margins[side];
+            element.style.setProperty(`--page-margin-${side}`, `${Math.round(mm * MM_TO_PX)}px`);
+        }
+    }, [meta.margins]);
+    return (_jsxs("div", { className: "flex flex-col items-center gap-2 overflow-auto bg-muted p-6", children: [_jsxs("div", { ref: applyMargins, "data-testid": "document-designer-page", className: cn("flex min-h-[1000px] max-w-none flex-col bg-background shadow-md", "pt-(--page-margin-top) pr-(--page-margin-right) pb-(--page-margin-bottom) pl-(--page-margin-left)", PAGE_WIDTH_CLASSES[`${meta.pageFormat}-${meta.orientation}`]), children: [showRegions && props.regions !== null && (_jsx(RegionBlock, { html: props.regions.header, systemLabels: props.systemLabels, caption: caption })), _jsx("div", { className: "min-h-0 flex-1 py-2", children: _jsx(DocumentContentEditor, { id: "document-designer-content", value: props.content, onChange: props.onContentChange, variables: props.variableNames, readOnly: false, blocks: PDF_DOCUMENT_BLOCKS, variableLabels: props.variableLabels, systemVariables: props.systemVariables, resourcePreviews: props.resourcePreviews, onEditorReady: props.onEditorReady }) }), showRegions && props.regions !== null && (_jsxs(_Fragment, { children: [_jsx(RegionBlock, { html: props.regions.signature, systemLabels: props.systemLabels, caption: caption }), _jsx(RegionBlock, { html: props.regions.footer, systemLabels: props.systemLabels, caption: caption })] }))] }), _jsx("p", { className: "text-xs text-muted-foreground", children: t("documentDesigner.canvas.caption", { format: meta.pageFormat }) })] }));
+}

package/dist/web/pdf-meta.d.ts

@@ -0,0 +1,23 @@
+export declare const PAGE_FORMATS: readonly ["A4", "Letter"];
+export declare const ORIENTATIONS: readonly ["portrait", "landscape"];
+export type PageFormat = (typeof PAGE_FORMATS)[number];
+export type Orientation = (typeof ORIENTATIONS)[number];
+export declare const DEFAULT_MARGIN_MM = 15;
+export type MarginSide = "top" | "right" | "bottom" | "left";
+export declare const MARGIN_SIDES: readonly ["top", "right", "bottom", "left"];
+export type PdfMetaDraft = {
+    readonly layoutSlug: string;
+    readonly pageFormat: PageFormat;
+    readonly orientation: Orientation;
+    readonly printBackground: boolean;
+    readonly layoutHeaderFooter: boolean;
+    readonly margins: Readonly<Record<MarginSide, number | "">>;
+    readonly fileName: string;
+    readonly title: string;
+    readonly author: string;
+};
+export declare const EMPTY_PDF_META: PdfMetaDraft;
+/** Reads the stored meta JSON string; unknown or malformed parts fall back to the defaults. */
+export declare function parsePdfMeta(raw: string | null): PdfMetaDraft;
+/** Builds the meta object for the server; defaults and empty fields are left out. */
+export declare function serializePdfMeta(draft: PdfMetaDraft): Record<string, unknown>;

package/dist/web/pdf-meta.js

@@ -0,0 +1,101 @@
+// @runtime client
+import { isOneOf, isPlainObject, propertyOf } from "@cosmicdrift/kumiko-types/type-guards";
+export const PAGE_FORMATS = ["A4", "Letter"];
+export const ORIENTATIONS = ["portrait", "landscape"];
+// Mirrors the renderer's fallback margin; used to complete a partly filled set,
+// because the server schema only accepts all four sides together.
+export const DEFAULT_MARGIN_MM = 15;
+export const MARGIN_SIDES = [
+    "top",
+    "right",
+    "bottom",
+    "left",
+];
+export const EMPTY_PDF_META = {
+    layoutSlug: "",
+    pageFormat: "A4",
+    orientation: "portrait",
+    printBackground: true,
+    layoutHeaderFooter: true,
+    margins: { top: "", right: "", bottom: "", left: "" },
+    fileName: "",
+    title: "",
+    author: "",
+};
+function stringOr(value, fallback) {
+    return typeof value === "string" ? value : fallback;
+}
+function booleanOr(value, fallback) {
+    return typeof value === "boolean" ? value : fallback;
+}
+function marginOf(margins, side) {
+    const value = propertyOf(margins, side);
+    return typeof value === "number" ? value : "";
+}
+/** Reads the stored meta JSON string; unknown or malformed parts fall back to the defaults. */
+export function parsePdfMeta(raw) {
+    if (raw === null)
+        return EMPTY_PDF_META;
+    let parsed;
+    try {
+        parsed = JSON.parse(raw);
+    }
+    catch {
+        return EMPTY_PDF_META;
+    }
+    if (!isPlainObject(parsed))
+        return EMPTY_PDF_META;
+    const pageFormat = propertyOf(parsed, "pageFormat");
+    const orientation = propertyOf(parsed, "orientation");
+    const margins = propertyOf(parsed, "margins");
+    const metadata = propertyOf(parsed, "metadata");
+    return {
+        layoutSlug: stringOr(parsed["layoutSlug"], ""),
+        pageFormat: isOneOf(PAGE_FORMATS, pageFormat) ? pageFormat : EMPTY_PDF_META.pageFormat,
+        orientation: isOneOf(ORIENTATIONS, orientation) ? orientation : EMPTY_PDF_META.orientation,
+        printBackground: booleanOr(parsed["printBackground"], true),
+        layoutHeaderFooter: booleanOr(parsed["layoutHeaderFooter"], true),
+        margins: {
+            top: marginOf(margins, "top"),
+            right: marginOf(margins, "right"),
+            bottom: marginOf(margins, "bottom"),
+            left: marginOf(margins, "left"),
+        },
+        fileName: stringOr(parsed["fileName"], ""),
+        title: stringOr(propertyOf(metadata, "title"), ""),
+        author: stringOr(propertyOf(metadata, "author"), ""),
+    };
+}
+function hasAnyMargin(margins) {
+    return MARGIN_SIDES.some((side) => margins[side] !== "");
+}
+/** Builds the meta object for the server; defaults and empty fields are left out. */
+export function serializePdfMeta(draft) {
+    const meta = {};
+    if (draft.layoutSlug !== "")
+        meta["layoutSlug"] = draft.layoutSlug;
+    if (draft.pageFormat !== "A4")
+        meta["pageFormat"] = draft.pageFormat;
+    if (draft.orientation !== "portrait")
+        meta["orientation"] = draft.orientation;
+    if (!draft.printBackground)
+        meta["printBackground"] = false;
+    if (!draft.layoutHeaderFooter)
+        meta["layoutHeaderFooter"] = false;
+    if (hasAnyMargin(draft.margins)) {
+        meta["margins"] = Object.fromEntries(MARGIN_SIDES.map((side) => [
+            side,
+            draft.margins[side] === "" ? DEFAULT_MARGIN_MM : draft.margins[side],
+        ]));
+    }
+    if (draft.fileName.trim() !== "")
+        meta["fileName"] = draft.fileName.trim();
+    const metadata = {};
+    if (draft.title.trim() !== "")
+        metadata["title"] = draft.title.trim();
+    if (draft.author.trim() !== "")
+        metadata["author"] = draft.author.trim();
+    if (Object.keys(metadata).length > 0)
+        meta["metadata"] = metadata;
+    return meta;
+}

package/dist/web/pdf-preview.d.ts

@@ -0,0 +1,4 @@
+import { type ReactNode } from "react";
+export declare function PdfPreview({ pdfBase64 }: {
+    readonly pdfBase64: string;
+}): ReactNode;

package/dist/web/pdf-preview.js

@@ -0,0 +1,99 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+/// <reference path="./pdfjs-worker.d.ts" />
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { Suspense, use, useCallback } from "react";
+// pdf.js runs in the main thread ("fake worker"): the worker module is bundled
+// with the app and handed over through globalThis.pdfjsWorker, so no worker or
+// CDN URL is ever fetched (self-hosting and CSP stay intact).
+const RENDER_SCALE = 96 / 72;
+let cachedKey = null;
+let cachedLoad = null;
+function decodeBase64(base64) {
+    const binary = atob(base64);
+    const bytes = new Uint8Array(binary.length);
+    for (let index = 0; index < binary.length; index++)
+        bytes[index] = binary.charCodeAt(index);
+    return bytes;
+}
+async function loadDocument(pdfBase64) {
+    try {
+        const [pdfjs, worker] = await Promise.all([
+            import("pdfjs-dist"),
+            import("pdfjs-dist/build/pdf.worker.min.mjs"),
+        ]);
+        Object.assign(globalThis, { pdfjsWorker: worker });
+        const document = await pdfjs.getDocument({
+            data: decodeBase64(pdfBase64),
+        }).promise;
+        return { ok: true, document };
+    }
+    catch {
+        return { ok: false };
+    }
+}
+// The promise must be stable across renders for use(); only the latest PDF is kept.
+function documentFor(pdfBase64) {
+    if (cachedKey !== pdfBase64 || cachedLoad === null) {
+        cachedKey = pdfBase64;
+        cachedLoad = loadDocument(pdfBase64);
+    }
+    return cachedLoad;
+}
+function PageView({ document, pageNumber, }) {
+    const t = useTranslation();
+    const page = use(pageFor(document, pageNumber));
+    const viewport = page.getViewport({ scale: RENDER_SCALE });
+    const mountCanvas = useCallback((canvas) => {
+        if (canvas === null)
+            return;
+        const task = page.render({ canvas, viewport });
+        task.promise.catch(() => undefined);
+        return () => task.cancel();
+    }, [page, viewport]);
+    const mountTextLayer = useCallback((container) => {
+        if (container === null)
+            return;
+        container.style.setProperty("--total-scale-factor", String(RENDER_SCALE));
+        container.style.setProperty("--scale-factor", String(RENDER_SCALE));
+        let layer = null;
+        void import("pdfjs-dist").then(({ TextLayer }) => {
+            const textLayer = new TextLayer({
+                textContentSource: page.streamTextContent(),
+                container,
+                viewport,
+            });
+            layer = textLayer;
+            return textLayer.render().catch(() => undefined);
+        });
+        return () => layer?.cancel();
+    }, [page, viewport]);
+    return (_jsxs("figure", { className: "m-0 flex flex-col items-center gap-2", "data-testid": `pdf-page-${pageNumber}`, children: [_jsxs("div", { className: "relative w-fit bg-background shadow-md", children: [_jsx("canvas", { ref: mountCanvas, width: viewport.width, height: viewport.height }), _jsx("div", { ref: mountTextLayer, className: "absolute inset-0 overflow-hidden leading-none [&_span]:absolute [&_span]:origin-top-left [&_span]:cursor-text [&_span]:whitespace-pre [&_span]:text-transparent [&_span::selection]:bg-primary/30" })] }), _jsx("figcaption", { className: "text-xs text-muted-foreground", children: t("documentDesigner.preview.pageOf", { page: pageNumber, pages: document.numPages }) })] }));
+}
+const pageCache = new WeakMap();
+function pageFor(document, pageNumber) {
+    let pages = pageCache.get(document);
+    if (pages === undefined) {
+        pages = new Map();
+        pageCache.set(document, pages);
+    }
+    let page = pages.get(pageNumber);
+    if (page === undefined) {
+        page = document.getPage(pageNumber);
+        pages.set(pageNumber, page);
+    }
+    return page;
+}
+function Pages({ pdfBase64 }) {
+    const t = useTranslation();
+    const loaded = use(documentFor(pdfBase64));
+    if (!loaded.ok) {
+        return _jsx("p", { className: "text-sm text-status-bad", children: t("documentDesigner.preview.renderFailed") });
+    }
+    const pageNumbers = Array.from({ length: loaded.document.numPages }, (_, index) => index + 1);
+    return (_jsx(_Fragment, { children: pageNumbers.map((pageNumber) => (_jsx(Suspense, { fallback: null, children: _jsx(PageView, { document: loaded.document, pageNumber: pageNumber }) }, pageNumber))) }));
+}
+export function PdfPreview({ pdfBase64 }) {
+    const t = useTranslation();
+    return (_jsx("div", { className: "flex flex-col items-center gap-6 overflow-auto bg-muted p-6", "data-testid": "document-designer-pdf-preview", children: _jsx(Suspense, { fallback: _jsx("p", { className: "text-sm text-muted-foreground", children: t("documentDesigner.preview.loading") }), children: _jsx(Pages, { pdfBase64: pdfBase64 }) }) }));
+}

package/dist/web/pdf-template-editor.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+export type PdfTemplateEditorProps = {
+    readonly slug: string;
+    /** Template locale; defaults to "de", or the first locale the slug has. */
+    readonly locale?: string;
+    readonly onLocaleChange?: (locale: string) => void;
+};
+export declare function PdfTemplateEditor({ slug, locale: requestedLocale, onLocaleChange, }: PdfTemplateEditorProps): ReactNode;