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

package/dist/web/overrides-drawer.js

@@ -0,0 +1,95 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { TemplateResolverQueries } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { formatWhen, usePrimitives, useQuery, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { Drawer, EmptyState, LoadingState } from "@cosmicdrift/kumiko-renderer-web";
+import { useMemo, useState } from "react";
+import { DiffView } from "./origin-bar.js";
+import { DOCUMENT_PDF_KIND, } from "./types.js";
+const DRAWER_WIDTH = 960;
+function TenantDetail({ slug, locale, view, onBack, }) {
+    const t = useTranslation();
+    const { Button } = usePrimitives();
+    const detail = useQuery(TemplateResolverQueries.tenantOverrides, {
+        slug,
+        kind: DOCUMENT_PDF_KIND,
+        locale,
+        diffTenantId: view.row.tenantId,
+    });
+    return (_jsxs("div", { className: "flex flex-col gap-3", "data-testid": "document-designer-overrides-detail", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("h3", { className: "m-0 text-sm font-semibold", children: t("documentDesigner.overrides.detail.version", {
+                            tenant: view.row.tenantName,
+                            version: view.row.version,
+                        }) }), _jsx(Button, { variant: "link", onClick: onBack, testId: "document-designer-overrides-back", children: t("documentDesigner.overrides.back") })] }), detail.data?.diff == null ? (_jsx(LoadingState, {})) : (_jsx(DiffView, { data: detail.data.diff, mode: view.mode }))] }));
+}
+export function OverridesDrawer({ open, onOpenChange, slug, locale, overrides, }) {
+    const t = useTranslation();
+    const { DataTable } = usePrimitives();
+    const [view, setView] = useState(null);
+    // 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 usedBy = usage.data?.usedBy ?? [];
+    const tenantRows = overrides?.rows ?? [];
+    const columns = useMemo(() => [
+        {
+            field: "tenantName",
+            label: t("documentDesigner.overrides.column.tenant"),
+            type: "text",
+            sortable: false,
+        },
+        {
+            field: "status",
+            label: t("documentDesigner.overrides.column.status"),
+            type: "select",
+            sortable: false,
+            optionLabels: {
+                active: t("documentDesigner.overrides.status.active"),
+                draft: t("documentDesigner.overrides.status.draft"),
+            },
+            optionTones: { active: "ok", draft: "warn" },
+        },
+        {
+            field: "versionLabel",
+            label: t("documentDesigner.overrides.column.version"),
+            type: "text",
+            sortable: false,
+        },
+        {
+            field: "changed",
+            label: t("documentDesigner.overrides.column.changed"),
+            type: "text",
+            sortable: false,
+        },
+    ], [t]);
+    const rows = useMemo(() => tenantRows.map((row) => ({
+        id: row.tenantId,
+        values: {
+            tenantName: row.tenantName,
+            status: row.status,
+            versionLabel: `v${row.version}`,
+            changed: formatWhen(row.changedAt),
+        },
+    })), [tenantRows]);
+    const openRow = (row, mode) => {
+        const found = tenantRows.find((candidate) => candidate.tenantId === row.id);
+        if (found !== undefined)
+            setView({ row: found, mode });
+    };
+    return (_jsx(Drawer, { open: open, onOpenChange: (next) => {
+            if (!next)
+                setView(null);
+            onOpenChange(next);
+        }, title: t("documentDesigner.overrides.title"), width: DRAWER_WIDTH, testId: "document-designer-overrides-drawer", children: _jsx("div", { className: "flex flex-col gap-5", children: view !== null ? (_jsx(TenantDetail, { slug: slug, locale: locale, view: view, onBack: () => setView(null) })) : (_jsxs(_Fragment, { children: [tenantRows.length > 0 && (_jsx("p", { className: "m-0 text-sm text-muted-foreground", "data-testid": "overrides-summary", children: t("documentDesigner.overrides.summary", { count: tenantRows.length }) })), tenantRows.length === 0 ? (_jsx(EmptyState, { title: t("documentDesigner.overrides.empty") })) : (_jsx(DataTable, { columns: columns, rows: rows, rowActionMode: "inline", rowActions: [
+                            {
+                                id: "diff",
+                                label: t("documentDesigner.overrides.action.diff"),
+                                style: "secondary",
+                                onTrigger: (row) => openRow(row, "diff"),
+                            },
+                            {
+                                id: "open",
+                                label: t("documentDesigner.overrides.action.open"),
+                                style: "secondary",
+                                onTrigger: (row) => openRow(row, "full"),
+                            },
+                        ], testId: "document-designer-overrides-table" })), _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,23 @@
+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;
+    /** An open draft beside the served version, never another tenant's. */
+    readonly draftVersion: number | null;
+    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,48 @@
+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, draftVersion, 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),
+        draftVersion: numberOr(draftVersion, null),
+        systemVersion: numberOr(systemVersion, null),
+        modifiedAt: stringOr(modifiedAt, ""),
+        usedBy: usages,
+        usedByCount: numberOr(usedByCount, usages.length),
+    };
+}

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

@@ -0,0 +1,19 @@
+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;
+    readonly resourceSrc?: (key: string) => string | undefined;
+};
+export declare function PageCanvas(props: PageCanvasProps): ReactNode;

package/dist/web/page-canvas.js

@@ -0,0 +1,48 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { DocumentContentEditor, PDF_DEFAULT_MARGIN_MM, PDF_DOCUMENT_BLOCKS, PDF_FOOTER_MARGIN_MM, } 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;
+// Page width in CSS px at 96 dpi as a cap; the page shrinks with a narrow column instead of scrolling sideways.
+const PAGE_WIDTH_CLASSES = {
+    "A4-portrait": "max-w-[794px]",
+    "A4-landscape": "max-w-[1123px]",
+    "Letter-portrait": "max-w-[816px]",
+    "Letter-landscape": "max-w-[1056px]",
+};
+function RegionBlock({ html, systemLabels, resourceSrc, caption, }) {
+    if (html.trim() === "")
+        return null;
+    return (_jsxs("div", { className: "relative border border-dashed border-border bg-muted/40 p-2 pt-4 text-xs text-muted-foreground", children: [_jsx("span", { className: "absolute left-2 top-0.5 text-[10px] uppercase tracking-wide", children: caption }), _jsx(LayoutHtml, { html: html, systemLabels: systemLabels, ...(resourceSrc !== undefined && { resourceSrc }) })] }));
+}
+// The letterhead is a band across the whole paper, outside the page margins, like on printed letter paper.
+function HeaderBand({ html, systemLabels, resourceSrc, caption, }) {
+    return (_jsxs("div", { className: "relative border-b border-border bg-muted px-[8%] pb-4 pt-6 text-xs text-foreground [&_td:last-child]:whitespace-nowrap", "data-testid": "document-designer-letterhead", children: [_jsx("span", { className: "absolute right-[8%] top-2 text-[10px] uppercase tracking-wide text-muted-foreground", children: caption }), _jsx(LayoutHtml, { html: html, systemLabels: systemLabels, ...(resourceSrc !== undefined && { resourceSrc }) })] }));
+}
+export function PageCanvas(props) {
+    const t = useTranslation();
+    const { meta } = props;
+    const showRegions = meta.layoutHeaderFooter && props.regions !== null;
+    // The letterhead band sits in the top margin, so the content starts right below it.
+    const showLetterhead = showRegions && props.regions !== null && props.regions.header.trim() !== "";
+    // Same fallback as the PDF renderer: a footer region reserves a taller bottom margin (the header band replaces the top margin on the canvas).
+    const hasFooter = showRegions && props.regions !== null && props.regions.footer.trim() !== "";
+    const fromLayout = t("documentDesigner.canvas.fromLayout", { layout: props.layoutName });
+    const regionCaption = (region) => `${t(`documentDesigner.editor.region.${region}`)} · ${fromLayout}`;
+    // 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 fallbackMm = side === "bottom" && hasFooter ? PDF_FOOTER_MARGIN_MM : PDF_DEFAULT_MARGIN_MM;
+            const mm = meta.margins[side] === "" ? fallbackMm : meta.margins[side];
+            element.style.setProperty(`--page-margin-${side}`, `${Math.round(mm * MM_TO_PX)}px`);
+        }
+    }, [meta.margins, hasFooter]);
+    const renderPaper = (editable) => (_jsxs("div", { className: "flex w-full flex-col items-center gap-2", children: [_jsxs("div", { "data-testid": "document-designer-page", className: cn("flex min-h-[1000px] w-full flex-col bg-card shadow-md", PAGE_WIDTH_CLASSES[`${meta.pageFormat}-${meta.orientation}`]), children: [showLetterhead && props.regions !== null && (_jsx(HeaderBand, { html: props.regions.header, systemLabels: props.systemLabels, resourceSrc: props.resourceSrc, caption: fromLayout })), _jsxs("div", { ref: applyMargins, className: cn("flex min-h-0 flex-1 flex-col pr-(--page-margin-right) pb-(--page-margin-bottom) pl-(--page-margin-left)", !showLetterhead && "pt-(--page-margin-top)"), children: [_jsxs("div", { className: "relative my-2 min-h-0 flex-1 border border-dashed border-primary/40 p-2 pt-5", "data-testid": "document-designer-content-area", children: [_jsx("span", { className: "absolute left-2 top-0.5 text-[10px] uppercase tracking-wide text-primary", children: t("documentDesigner.editor.region.content") }), editable] }), showRegions && props.regions !== null && (_jsxs(_Fragment, { children: [_jsx(RegionBlock, { html: props.regions.signature, systemLabels: props.systemLabels, resourceSrc: props.resourceSrc, caption: regionCaption("signature") }), _jsx(RegionBlock, { html: props.regions.footer, systemLabels: props.systemLabels, resourceSrc: props.resourceSrc, caption: regionCaption("footer") })] }))] })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: t("documentDesigner.canvas.caption", { format: meta.pageFormat }) })] }));
+    return (_jsx("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", "data-testid": "pdf-editor-center", 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, chrome: "canvas", renderPaper: renderPaper, onEditorReady: props.onEditorReady }) }));
+}

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

@@ -0,0 +1,13 @@
+import type { FooterTone } from "./editor-shell.js";
+import type { ValidationResult } from "./types.js";
+type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
+export type GeneratedProbe = {
+    readonly pages: number;
+    readonly sizeBytes: number;
+    readonly durationMs: number;
+};
+export declare function pdfFooterMessage(t: Translate, validation: ValidationResult, probe: GeneratedProbe | null): {
+    readonly tone: FooterTone;
+    readonly text: string;
+};
+export {};

package/dist/web/pdf-footer.js

@@ -0,0 +1,34 @@
+function formatSize(bytes) {
+    return bytes < 1024 * 1024
+        ? `${Math.max(1, Math.round(bytes / 1024))} KB`
+        : `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+// One sentence like the mail footer: missing required placeholders first, then other blocking
+// issues, then warnings, else "ready" plus the last test run.
+export function pdfFooterMessage(t, validation, probe) {
+    if (validation.missingRequired.length > 0) {
+        const names = validation.missingRequired
+            .map((name) => validation.variables[name]?.label ?? name)
+            .join(", ");
+        return { tone: "bad", text: t("documentDesigner.validation.missingRequired", { name: names }) };
+    }
+    const blocking = [...validation.issues, ...validation.publishIssues][0];
+    if (blocking !== undefined) {
+        const translated = t(blocking.i18nKey, blocking.params);
+        return { tone: "bad", text: translated === blocking.i18nKey ? blocking.code : translated };
+    }
+    const warning = validation.warnings[0];
+    if (warning !== undefined) {
+        const translated = t(warning.i18nKey, { detail: warning.detail });
+        return { tone: "warn", text: translated === warning.i18nKey ? warning.code : translated };
+    }
+    const ok = t("documentDesigner.validation.ok");
+    if (probe === null)
+        return { tone: "ok", text: ok };
+    const lastProbe = t("documentDesigner.validation.lastProbe", {
+        pages: probe.pages,
+        size: formatSize(probe.sizeBytes),
+        seconds: (probe.durationMs / 1000).toFixed(1),
+    });
+    return { tone: "ok", text: `${ok} ${lastProbe}` };
+}

package/dist/web/pdf-left-rail.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+export declare function visibleSystemPlaceholders(names: readonly string[]): readonly string[];
+export declare function PdfResourceSection({ resourceKeys, canUpload, layoutName, onInsert, onUpload, }: {
+    readonly resourceKeys: readonly string[];
+    readonly canUpload: boolean;
+    readonly layoutName: string;
+    readonly onInsert: (key: string) => void;
+    readonly onUpload: (file: File) => Promise<void>;
+}): ReactNode;

package/dist/web/pdf-left-rail.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { UploadZone } from "@cosmicdrift/kumiko-renderer-web";
+import { RailField, RailHint, RailRow, RailSection } from "./rail.js";
+// unsubscribeUrl belongs to mail; the PDF designer never offers it.
+const HIDDEN_SYSTEM_PLACEHOLDERS = new Set(["unsubscribeUrl"]);
+export function visibleSystemPlaceholders(names) {
+    return names.filter((name) => !HIDDEN_SYSTEM_PLACEHOLDERS.has(name));
+}
+const IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"];
+export function PdfResourceSection({ resourceKeys, canUpload, layoutName, onInsert, onUpload, }) {
+    const t = useTranslation();
+    const { Button } = usePrimitives();
+    return (_jsxs(RailSection, { title: t("documentDesigner.resources.title"), testId: "pdf-editor-resources", children: [resourceKeys.length === 0 && _jsx(RailRow, { label: t("documentDesigner.resources.empty") }), resourceKeys.map((key) => (_jsx(RailRow, { testId: `pdf-resource-${key}`, symbol: "\u25A3", label: key, onPress: () => onInsert(key) }, key))), _jsx(RailField, { children: canUpload ? (_jsx(UploadZone, { multiple: false, accept: IMAGE_TYPES, title: t("documentDesigner.resources.upload"), onUpload: onUpload, testId: "document-designer-upload" })) : (_jsx(Button, { variant: "secondary", size: "sm", disabled: true, children: t("documentDesigner.resources.upload") })) }), !canUpload && _jsx(RailHint, { children: t("documentDesigner.resources.saveFirst") }), _jsx(RailHint, { children: t("documentDesigner.placeholders.layoutHint", { layout: layoutName }) })] }));
+}

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

@@ -0,0 +1,21 @@
+import { PDF_ORIENTATIONS, PDF_PAGE_FORMATS } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+export type PageFormat = (typeof PDF_PAGE_FORMATS)[number];
+export type Orientation = (typeof PDF_ORIENTATIONS)[number];
+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,95 @@
+// @runtime client
+import { PDF_ORIENTATIONS, PDF_PAGE_FORMATS, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { isOneOf, isPlainObject, propertyOf } from "@cosmicdrift/kumiko-types/type-guards";
+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(PDF_PAGE_FORMATS, pageFormat) ? pageFormat : EMPTY_PDF_META.pageFormat,
+        orientation: isOneOf(PDF_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"), ""),
+    };
+}
+/** 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;
+    // Unset sides stay out so the renderer's per-side fallbacks (header/footer margins) still apply.
+    const setMargins = MARGIN_SIDES.flatMap((side) => {
+        const mm = draft.margins[side];
+        return mm === "" ? [] : [[side, mm]];
+    });
+    if (setMargins.length > 0)
+        meta["margins"] = Object.fromEntries(setMargins);
+    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,112 @@
+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, useMemo } 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 loadingTask = pdfjs.getDocument({ data: decodeBase64(pdfBase64) });
+        return { ok: true, document: await loadingTask.promise, loadingTask };
+    }
+    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) {
+        const previous = cachedLoad;
+        cachedKey = pdfBase64;
+        cachedLoad = loadDocument(pdfBase64);
+        void previous?.then((loaded) => {
+            if (loaded.ok)
+                void loaded.loadingTask.destroy();
+        });
+    }
+    return cachedLoad;
+}
+function PageView({ document, pageNumber, }) {
+    const t = useTranslation();
+    const page = use(pageFor(document, pageNumber));
+    // Stable identity: the mount callbacks below depend on it, and a new viewport per render re-mounts canvas and text layer.
+    const viewport = useMemo(() => page.getViewport({ scale: RENDER_SCALE }), [page]);
+    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;
+        let cancelled = false;
+        void import("pdfjs-dist").then(({ TextLayer }) => {
+            // skip: cleanup ran before pdfjs finished loading
+            if (cancelled)
+                return undefined;
+            // TextLayer.cancel() keeps rendered spans; a re-mount must not append a second layer.
+            container.replaceChildren();
+            const textLayer = new TextLayer({
+                textContentSource: page.streamTextContent(),
+                container,
+                viewport,
+            });
+            layer = textLayer;
+            return textLayer.render().catch(() => undefined);
+        });
+        return () => {
+            cancelled = true;
+            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-card 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;