@cosmicdrift/kumiko-document-designer 0.363.0 → 0.365.0

package/dist/web/overrides-drawer.js

@@ -1,19 +1,95 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { 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 })] }));
+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, overrides, }) {
+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 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}`))) }))] })] }) }));
+    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

@@ -13,6 +13,8 @@ export type OverviewRowView = {
     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[];

package/dist/web/overview-row.js

@@ -21,7 +21,7 @@ function usageViewOf(value) {
 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;
+    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")
@@ -39,6 +39,7 @@ export function parseOverviewRow(row) {
             : [],
         status,
         version: numberOr(version, 0),
+        draftVersion: numberOr(draftVersion, null),
         systemVersion: numberOr(systemVersion, null),
         modifiedAt: stringOr(modifiedAt, ""),
         usedBy: usages,

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

@@ -13,6 +13,7 @@ export type PageCanvasProps = {
     readonly systemLabels: Readonly<Record<string, string>>;
     readonly variableNames: readonly string[];
     readonly resourcePreviews: Readonly<Record<string, DocumentResourcePreview>>;
-    readonly onEditorReady: (handle: DocumentEditorHandle) => void;
+    readonly onEditorReady: (handle: DocumentEditorHandle | null) => void;
+    readonly resourceSrc?: (key: string) => string | undefined;
 };
 export declare function PageCanvas(props: PageCanvasProps): ReactNode;

package/dist/web/page-canvas.js

@@ -1,38 +1,48 @@
 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 { 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;
-const DEFAULT_MARGIN_MM = 15;
-// Page width in CSS px at 96 dpi, as a class so no inline width is needed.
+// 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": "w-[794px]",
-    "A4-landscape": "w-[1123px]",
-    "Letter-portrait": "w-[816px]",
-    "Letter-landscape": "w-[1056px]",
+    "A4-portrait": "max-w-[794px]",
+    "A4-landscape": "max-w-[1123px]",
+    "Letter-portrait": "max-w-[816px]",
+    "Letter-landscape": "max-w-[1056px]",
 };
-function RegionBlock({ html, systemLabels, caption, }) {
+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 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 })] }));
+    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;
-    const caption = t("documentDesigner.canvas.fromLayout", { layout: props.layoutName });
+    // 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 mm = meta.margins[side] === "" ? DEFAULT_MARGIN_MM : meta.margins[side];
+            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]);
-    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 }) })] }));
+    }, [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

@@ -1,8 +1,6 @@
-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;
+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 = {

package/dist/web/pdf-meta.js

@@ -1,10 +1,6 @@
 // @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 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",
@@ -51,8 +47,8 @@ export function parsePdfMeta(raw) {
     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,
+        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: {
@@ -66,9 +62,6 @@ export function parsePdfMeta(raw) {
         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 = {};
@@ -82,12 +75,13 @@ export function serializePdfMeta(draft) {
         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],
-        ]));
-    }
+    // 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 = {};

package/dist/web/pdf-preview.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // @runtime client
 /// <reference path="./pdfjs-worker.d.ts" />
 import { useTranslation } from "@cosmicdrift/kumiko-renderer";
-import { Suspense, use, useCallback } from "react";
+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).
@@ -23,10 +23,8 @@ async function loadDocument(pdfBase64) {
             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 };
+        const loadingTask = pdfjs.getDocument({ data: decodeBase64(pdfBase64) });
+        return { ok: true, document: await loadingTask.promise, loadingTask };
     }
     catch {
         return { ok: false };
@@ -35,15 +33,21 @@ async function loadDocument(pdfBase64) {
 // 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));
-    const viewport = page.getViewport({ scale: RENDER_SCALE });
+    // 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;
@@ -57,7 +61,13 @@ function PageView({ document, pageNumber, }) {
         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,
@@ -66,9 +76,12 @@ function PageView({ document, pageNumber, }) {
             layer = textLayer;
             return textLayer.render().catch(() => undefined);
         });
-        return () => layer?.cancel();
+        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-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 }) })] }));
+    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) {