@cosmicdrift/kumiko-document-designer 0.389.0 → 0.390.0

package/dist/web/mail-editor-render.js

@@ -0,0 +1,51 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EditorLocaleSwitch } from "./editor-header.js";
+import { EditorBody } from "./editor-shell.js";
+import { MailEditCenter } from "./mail-edit-center.js";
+import { PlaceholderSection, ResourceSection, SystemPlaceholderSection, } from "./mail-left-rail.js";
+import { MissingLocaleCanvas } from "./mail-missing-locale.js";
+import { PdfLinkModal } from "./mail-pdf-link-modal.js";
+import { AttachmentSection, ChromeSection, PropertiesSection, UsageSection, } from "./mail-right-rail.js";
+import { UploadModal } from "./mail-upload-modal.js";
+import { VersionsSection } from "./mail-versions.js";
+export function renderMailControls(props, m) {
+    return (_jsx(EditorLocaleSwitch, { testIdPrefix: "mail", locales: props.locales, locale: props.locale, onLocale: (next) => m.leave({ kind: "locale", locale: next }) }));
+}
+export function renderMailBanners(Banner, t, m) {
+    const { testMail } = m.services;
+    const { resetError, resourceError } = m.ui;
+    return (_jsxs(_Fragment, { children: [testMail.state.kind === "sent" && (_jsx(Banner, { variant: "primary", testId: "mail-test-sent", children: t("documentDesigner.mail.testMail.sent", { subject: testMail.state.subject }) })), testMail.state.kind === "error" && (_jsx(Banner, { variant: "error", testId: "mail-test-error", children: testMail.state.text })), resetError !== null && (_jsx(Banner, { variant: "error", testId: "mail-reset-error", children: resetError })), resourceError !== null && (_jsx(Banner, { variant: "error", testId: "mail-resource-error", children: resourceError }))] }));
+}
+function renderLeftRail(m) {
+    const { insert, filesAvailable } = m.services;
+    const { setUploadOpen, setDialog } = m.ui;
+    return (_jsxs(_Fragment, { children: [_jsx(PlaceholderSection, { validation: m.railValidation, onInsert: insert.insertPlaceholder }), _jsx(SystemPlaceholderSection, { validation: m.railValidation, onInsert: insert.insertPlaceholder }), _jsx(ResourceSection, { resources: m.resources, pdfTitles: m.pdfTitles, canUpload: m.uploadTemplateId !== null, filesAvailable: filesAvailable, onUpload: () => setUploadOpen(true), onInsert: insert.insertResource, onRemove: (key) => setDialog({ kind: "remove", key }) })] }));
+}
+function renderCenterCanvas(props, m) {
+    if (m.locked) {
+        return (_jsx(MissingLocaleCanvas, { slug: props.slug, locale: props.locale, fallbackLocale: props.fallbackLocale, copyScope: props.isSystemAdmin ? "system" : "tenant", onCreateBlank: () => m.ui.setCreating(true), onCopied: () => void props.onReload() }));
+    }
+    return (_jsx(MailEditCenter, { draft: m.ui.draft, vocabulary: m.vocabulary, resourcePreviews: m.resourcePreviews, insert: m.services.insert, readOnly: false, fieldErrors: m.fieldErrors, onChange: m.update }, m.ui.editorEpoch));
+}
+function renderRightRail(props, m) {
+    const { row } = props;
+    return (_jsxs(_Fragment, { children: [_jsx(PropertiesSection, { slug: props.slug, draft: m.ui.draft, layouts: m.services.layouts.rows, onChange: m.update }), _jsx(ChromeSection, { draft: m.ui.draft, vocabulary: m.vocabulary, insert: m.services.insert, onChange: m.update }), _jsx(AttachmentSection, { attachments: m.attachments, pdfTitles: m.pdfTitles, canEdit: m.uploadTemplateId !== null, onAddPdf: () => m.ui.setPdfOpen(true), onRemove: (key) => m.ui.setDialog({ kind: "remove", key }) }), _jsx(UsageSection, { slug: props.slug }), _jsx(VersionsSection, { rowId: row?.id ?? null, currentVersion: row?.version ?? 0, currentStatus: row?.status ?? "draft" })] }));
+}
+export function renderMailEditBody(props, m) {
+    return (_jsx(EditorBody, { left: renderLeftRail(m), center: renderCenterCanvas(props, m), right: renderRightRail(props, m) }));
+}
+export function renderMailModals(props, m) {
+    const { uploadTemplateId, takenKeys } = m;
+    if (uploadTemplateId === null)
+        return false; // skip: only tenant rows accept uploads
+    const { insert, pdfTemplates } = m.services;
+    return (_jsxs(_Fragment, { children: [_jsx(UploadModal, { open: m.ui.uploadOpen, onOpenChange: m.ui.setUploadOpen, target: {
+                    templateId: uploadTemplateId,
+                    takenKeys,
+                    onUploaded: (uploaded) => {
+                        if (uploaded.purpose === "image")
+                            insert.insertResource(uploaded.key);
+                        void props.onRefreshRow();
+                    },
+                } }), _jsx(PdfLinkModal, { open: m.ui.pdfOpen, onOpenChange: m.ui.setPdfOpen, templates: pdfTemplates.rows, variableLabels: m.vocabulary.labels, templateId: uploadTemplateId, takenKeys: takenKeys, onLinked: () => void props.onRefreshRow() })] }));
+}

package/dist/web/mail-preview-render.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+import type { MailEditorBodyProps } from "./mail-editor-logic.ts";
+import type { MailEditorModel } from "./mail-editor-model.ts";
+import { MailPreviewMode } from "./mail-preview.tsx";
+export declare function renderMailPreview(props: MailEditorBodyProps, m: MailEditorModel, controls: ReactNode, origin: React.ComponentProps<typeof MailPreviewMode>["origin"]): ReactNode;

package/dist/web/mail-preview-render.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { previewPayload } from "./mail-editor-logic.js";
+import { MailPreviewMode } from "./mail-preview.js";
+export function renderMailPreview(props, m, controls, origin) {
+    const { ui, services } = m;
+    const { testMail } = services;
+    return (_jsx(MailPreviewMode, { payload: previewPayload({
+            slug: props.slug,
+            locale: props.locale,
+            settled: ui.settled,
+            variableSchema: m.variableSchema,
+            pickedVariables: m.pickedVariables,
+        }), picked: m.picked, onPick: m.setPicked, validation: m.validation ?? null, slug: props.slug, locale: props.locale, fromName: ui.settled.senderName, own: services.own, origin: origin, controls: controls, testMail: {
+            availability: testMail.availability,
+            pending: testMail.pending,
+            onSend: m.sendTestMail,
+            includeAttachments: ui.includeAttachments,
+            onIncludeAttachments: ui.setIncludeAttachments,
+            prefixSubject: ui.prefixSubject,
+            onPrefixSubject: ui.setPrefixSubject,
+        } }));
+}

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

@@ -0,0 +1,27 @@
+import type { useDispatcher } from "@cosmicdrift/kumiko-renderer";
+import { type Draft, type EditorState } from "./pdf-editor-draft.ts";
+import { type TemplateDetail } from "./types.ts";
+import type { PdfEditorState } from "./use-pdf-editor-state.ts";
+type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
+export type PdfActionsInput = {
+    readonly s: PdfEditorState;
+    readonly t: Translate;
+    readonly dispatcher: ReturnType<typeof useDispatcher>;
+    readonly slug: string;
+    readonly current: EditorState;
+    readonly detail: TemplateDetail;
+    readonly dirty: boolean;
+    readonly onLocaleChange: ((locale: string) => void) | undefined;
+};
+export declare function buildPdfActions(input: PdfActionsInput): {
+    updateDraft: (next: Draft) => void;
+    resetDraft: (source: TemplateDetail) => void;
+    save: () => Promise<boolean>;
+    publish: () => Promise<void>;
+    generatePdf: () => Promise<void>;
+    printOnce: () => void;
+    uploadResource: (file: File) => Promise<void>;
+    requestLocale: (next: string) => void;
+};
+export type PdfActions = ReturnType<typeof buildPdfActions>;
+export {};

package/dist/web/pdf-editor-actions.js

@@ -0,0 +1,146 @@
+import { TemplateResolverHandlers } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { uploadFileRef } from "@cosmicdrift/kumiko-renderer/web";
+import { RendererPuppeteerClientQueries } from "@cosmicdrift/kumiko-renderer-puppeteer-client/qualified-names";
+import { describeError, isAlreadyActive } from "./errors.js";
+import { draftFromDetail, SETTLE_MS, snapshotOf, } from "./pdf-editor-draft.js";
+import { serializePdfMeta } from "./pdf-meta.js";
+import { DOCUMENT_PDF_KIND, } from "./types.js";
+function draftActions(input) {
+    const { s } = input;
+    const { setState } = s.doc;
+    const { settleTimer } = s;
+    function updateDraft(next) {
+        setState((previous) => (previous === null ? previous : { ...previous, draft: next }));
+        if (settleTimer.current !== null)
+            clearTimeout(settleTimer.current);
+        settleTimer.current = setTimeout(() => {
+            setState((previous) => previous === null ? previous : { ...previous, settled: previous.draft });
+        }, SETTLE_MS);
+    }
+    function resetDraft(source) {
+        const draft = draftFromDetail(source);
+        if (settleTimer.current !== null)
+            clearTimeout(settleTimer.current);
+        setState({ key: source.id, draft, settled: draft, snapshot: snapshotOf(draft) });
+        s.ui.setDraftEpoch((epoch) => epoch + 1);
+        s.ui.setActionError(null);
+    }
+    return { updateDraft, resetDraft };
+}
+function writeActions(input) {
+    const { s, t, dispatcher, slug, current, detail, dirty } = input;
+    const { locale, rowsQuery, detailQuery, setState } = s.doc;
+    const { variableSchema, validationQuery } = s.server;
+    const { scope } = s.host;
+    const { setBusy, setActionError } = s.ui;
+    async function reload() {
+        await Promise.all([rowsQuery.refetch(), detailQuery.refetch(), validationQuery.refetch()]);
+    }
+    async function persist() {
+        const { draft } = current;
+        const parentTemplateId = detail?.scope === "system" ? detail.id : detail?.parentTemplateId;
+        const result = await dispatcher.write(scope === "system"
+            ? TemplateResolverHandlers.upsertSystem
+            : TemplateResolverHandlers.upsertTenant, {
+            slug,
+            kind: DOCUMENT_PDF_KIND,
+            locale,
+            content: draft.content,
+            contentFormat: "html",
+            variableSchema,
+            meta: serializePdfMeta(draft.meta),
+            ...(scope === "tenant" && parentTemplateId != null && { parentTemplateId }),
+        });
+        if (!result.isSuccess) {
+            setActionError(describeError(t, result.error));
+            return null;
+        }
+        setState((previous) => previous === null ? previous : { ...previous, snapshot: snapshotOf(draft) });
+        return result.data;
+    }
+    async function save() {
+        setBusy("save");
+        setActionError(null);
+        const saved = await persist();
+        if (saved !== null)
+            await reload();
+        setBusy(null);
+        return saved !== null;
+    }
+    async function publish() {
+        setBusy("publish");
+        setActionError(null);
+        // A system save activates immediately; a tenant row needs a save first when it
+        // does not exist yet or carries unsaved edits, then an explicit publish.
+        const needsSave = dirty || detail?.scope === "system";
+        const saved = needsSave ? await persist() : null;
+        const saveFailed = needsSave && saved === null;
+        // upsertSystem already activates, so only a tenant row needs the explicit publish.
+        const alreadyActivatedBySave = scope === "system" && saved !== null;
+        const templateId = saved?.id ?? detail?.id ?? null;
+        if (templateId !== null && !saveFailed && !alreadyActivatedBySave) {
+            const result = await dispatcher.write(scope === "system"
+                ? TemplateResolverHandlers.publishSystem
+                : TemplateResolverHandlers.publish, { id: templateId });
+            if (!result.isSuccess && !isAlreadyActive(result.error))
+                setActionError(describeError(t, result.error));
+        }
+        await reload();
+        setBusy(null);
+    }
+    return { save, publish };
+}
+function pdfActions(input) {
+    const { s, t, dispatcher, slug, current, detail, dirty, onLocaleChange } = input;
+    const { locale, detailQuery } = s.doc;
+    const { variableSchema } = s.server;
+    const { setMode, setBusy, setActionError, setGenerated, autoPrintedFor, setPendingLocale } = s.ui;
+    async function generatePdf() {
+        setMode("preview");
+        setBusy("pdf");
+        setActionError(null);
+        const forSnapshot = snapshotOf(current.draft);
+        const result = await dispatcher.query(RendererPuppeteerClientQueries.previewPdf, {
+            slug,
+            locale,
+            content: current.draft.content,
+            meta: serializePdfMeta(current.draft.meta),
+            variableSchema,
+        });
+        if (result.isSuccess)
+            setGenerated({ forSnapshot, result: result.data });
+        else
+            setActionError(describeError(t, result.error));
+        setBusy(null);
+    }
+    function printOnce() {
+        // skip: this draft was already printed
+        if (autoPrintedFor.current === snapshotOf(current.draft))
+            return;
+        autoPrintedFor.current = snapshotOf(current.draft);
+        void generatePdf();
+    }
+    async function uploadResource(file) {
+        const sourceFileRefId = await uploadFileRef(file);
+        const result = await dispatcher.write(TemplateResolverHandlers.resourceUpload, {
+            templateId: detail?.id,
+            sourceFileRefId,
+        });
+        if (!result.isSuccess)
+            throw new Error(describeError(t, result.error));
+        await detailQuery.refetch();
+    }
+    function requestLocale(next) {
+        // skip: the requested locale is already open
+        if (next === locale)
+            return;
+        if (dirty)
+            setPendingLocale(next);
+        else
+            onLocaleChange?.(next);
+    }
+    return { generatePdf, printOnce, uploadResource, requestLocale };
+}
+export function buildPdfActions(input) {
+    return { ...draftActions(input), ...writeActions(input), ...pdfActions(input) };
+}

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

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+import type { PdfRenderContext } from "./pdf-editor-context.ts";
+export declare function renderPdfHeader(c: PdfRenderContext): ReactNode;
+export declare function renderPdfInfoBar(c: PdfRenderContext): ReactNode;
+export declare function renderPdfFooter(c: PdfRenderContext): ReactNode;
+export declare function renderPdfLocaleDialog(c: PdfRenderContext): ReactNode;

package/dist/web/pdf-editor-chrome.js

@@ -0,0 +1,60 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EditorHeader, EditorLocaleSwitch, EditorModeSwitch, originOf } from "./editor-header.js";
+import { EditorFooter, EditorInfoBar } from "./editor-shell.js";
+import { OverridesDrawer } from "./overrides-drawer.js";
+export function renderPdfHeader(c) {
+    const { s, view, detail, actions } = c;
+    const { busy, mode, setMode } = s.ui;
+    return (_jsx(EditorHeader, { title: view.title, stored: { status: detail.status, version: detail.version }, actions: {
+            busy: busy === "save",
+            canSave: busy === null && s.server.validation?.canSave !== false,
+            canPublish: busy === null && view.canPublish,
+            onSave: () => void actions.save(),
+            onPublish: () => void actions.publish(),
+        }, children: _jsx(EditorModeSwitch, { testIdPrefix: "pdf", mode: mode, onMode: setMode }) }));
+}
+function renderInfoControls(c) {
+    const { t, Button, s, view, actions } = c;
+    const { busy, mode } = s.ui;
+    const { locale, locales } = s.doc;
+    return (_jsxs(_Fragment, { children: [_jsx(EditorLocaleSwitch, { testIdPrefix: "pdf", locales: locales.length > 0 ? locales : [locale], locale: locale, onLocale: actions.requestLocale }), mode === "preview" && (_jsx(Button, { variant: "secondary", disabled: !view.pdfAvailable || busy !== null, loading: busy === "pdf", onClick: () => void actions.generatePdf(), testId: "pdf-generate-header", children: t("documentDesigner.actions.generatePdf") }))] }));
+}
+function renderOverrideLinks(c) {
+    const { t, Button, s, view } = c;
+    return (view.showOverrideLinks && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "link", onClick: () => void c.exportBundle(), children: t("documentDesigner.originBar.export") }), _jsx(Button, { variant: "link", onClick: () => s.ui.setOverridesOpen(true), children: t("documentDesigner.originBar.showOverrides") })] })));
+}
+function renderUnavailableNote(c) {
+    const { t, view } = c;
+    return (view.pdfUnavailableNote && (_jsxs(_Fragment, { children: [" ", _jsx("span", { "data-testid": "pdf-unavailable", children: view.unavailableMessage === ""
+                    ? t("documentDesigner.pdfUnavailableNoReason")
+                    : t("documentDesigner.pdfUnavailable", { message: view.unavailableMessage }) })] })));
+}
+export function renderPdfInfoBar(c) {
+    const { s, view, detail, slug } = c;
+    const { overridesOpen, setOverridesOpen } = s.ui;
+    return (_jsxs(EditorInfoBar, { tone: view.pdfUnavailableNote ? "warn" : detail.scope === "tenant" ? "active" : "muted", testId: "pdf-origin-bar", origin: originOf(detail.scope === "system", view.systemVersion !== null), controls: renderInfoControls(c), overlays: _jsx(OverridesDrawer, { open: overridesOpen, onOpenChange: setOverridesOpen, slug: slug, locale: s.doc.locale, overrides: s.server.overridesQuery.data }), links: renderOverrideLinks(c), children: [view.originText, view.besideActiveSentence !== null && ` ${view.besideActiveSentence}`, renderUnavailableNote(c)] }));
+}
+export function renderPdfFooter(c) {
+    const { s, view, detail, actions } = c;
+    const { busy } = s.ui;
+    return (_jsx(EditorFooter, { testIdPrefix: "pdf-editor", message: view.footer, saveError: s.ui.actionError, modifiedAt: detail.modifiedAt ?? null, dirty: view.dirty, busy: busy === "save", canSave: busy === null && s.server.validation?.canSave !== false, canPublish: busy === null && view.canPublish, onDiscard: () => actions.resetDraft(detail), onSave: () => void actions.save(), onPublish: () => void actions.publish() }));
+}
+export function renderPdfLocaleDialog(c) {
+    const { t, Button, Dialog, s, actions, detail, onLocaleChange } = c;
+    const { pendingLocale, setPendingLocale } = s.ui;
+    return (_jsx(Dialog, { open: pendingLocale !== null, onOpenChange: (open) => {
+            if (!open)
+                setPendingLocale(null);
+        }, title: t("documentDesigner.localeDialog.title"), description: t("documentDesigner.localeDialog.description"), confirmLabel: t("documentDesigner.localeDialog.save"), cancelLabel: t("documentDesigner.localeDialog.cancel"), onConfirm: async () => {
+            const target = pendingLocale;
+            if (target !== null && (await actions.save()))
+                onLocaleChange?.(target);
+            setPendingLocale(null);
+        }, children: _jsx(Button, { variant: "danger-ghost", onClick: () => {
+                const target = pendingLocale;
+                setPendingLocale(null);
+                actions.resetDraft(detail);
+                if (target !== null)
+                    onLocaleChange?.(target);
+            }, children: t("documentDesigner.localeDialog.discard") }) }));
+}

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

@@ -0,0 +1,22 @@
+import type { usePrimitives } from "@cosmicdrift/kumiko-renderer";
+import type { PdfActions } from "./pdf-editor-actions.ts";
+import type { EditorState } from "./pdf-editor-draft.ts";
+import type { PdfView } from "./pdf-editor-view.ts";
+import type { TemplateDetail } from "./types.ts";
+import type { PdfEditorState } from "./use-pdf-editor-state.ts";
+type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
+type Primitives = ReturnType<typeof usePrimitives>;
+export type PdfRenderContext = {
+    readonly t: Translate;
+    readonly Button: Primitives["Button"];
+    readonly Dialog: Primitives["Dialog"];
+    readonly slug: string;
+    readonly s: PdfEditorState;
+    readonly actions: PdfActions;
+    readonly view: PdfView;
+    readonly current: EditorState;
+    readonly detail: TemplateDetail;
+    readonly onLocaleChange: ((locale: string) => void) | undefined;
+    readonly exportBundle: () => Promise<void>;
+};
+export {};

package/dist/web/pdf-editor-context.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,23 @@
+import type { MailVariable } from "./mail-types.ts";
+import { type PdfMetaDraft } from "./pdf-meta.ts";
+import type { PdfPreviewResult, TemplateDetail, VariableInfo } from "./types.ts";
+export declare const SETTLE_MS = 500;
+export declare const NO_VARIABLES: Readonly<Record<string, VariableInfo>>;
+export type Draft = {
+    readonly content: string;
+    readonly meta: PdfMetaDraft;
+};
+export type EditorState = {
+    readonly key: string;
+    readonly draft: Draft;
+    readonly settled: Draft;
+    readonly snapshot: string;
+};
+export type GeneratedPdf = {
+    readonly forSnapshot: string;
+    readonly result: PdfPreviewResult;
+};
+export declare const draftFromDetail: (detail: TemplateDetail) => Draft;
+export declare const snapshotOf: (draft: Draft) => string;
+export declare function imageLabelSource(variables: Readonly<Record<string, VariableInfo>>): Readonly<Record<string, MailVariable>>;
+export declare function textVariablesOf(variables: Readonly<Record<string, VariableInfo>>): Readonly<Record<string, MailVariable>>;

package/dist/web/pdf-editor-draft.js

@@ -0,0 +1,33 @@
+import { parsePdfMeta, serializePdfMeta } from "./pdf-meta.js";
+export const SETTLE_MS = 500;
+export const NO_VARIABLES = {};
+export const draftFromDetail = (detail) => ({
+    content: detail.content,
+    meta: parsePdfMeta(detail.meta),
+});
+export const snapshotOf = (draft) => JSON.stringify({ content: draft.content, meta: serializePdfMeta(draft.meta) });
+// Only the label of an images variable is needed, for the Images block and its picker.
+export function imageLabelSource(variables) {
+    const result = {};
+    for (const [name, info] of Object.entries(variables)) {
+        if (info.type === "images" && info.label !== undefined) {
+            result[name] = { type: "text", label: info.label };
+        }
+    }
+    return result;
+}
+export function textVariablesOf(variables) {
+    const result = {};
+    for (const [name, info] of Object.entries(variables)) {
+        if (info.type === "images")
+            continue;
+        const { item, ...rest } = info;
+        const columns = Object.entries(item ?? {}).flatMap(([column, def]) => def.type === "images" ? [] : [[column, { ...def, type: def.type }]]);
+        result[name] = {
+            ...rest,
+            type: info.type,
+            ...(item !== undefined && { item: Object.fromEntries(columns) }),
+        };
+    }
+    return result;
+}

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

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+import type { PdfRenderContext } from "./pdf-editor-context.ts";
+export declare function renderPdfLeftRail(c: PdfRenderContext): ReactNode;
+export declare function renderPdfEditCanvas(c: PdfRenderContext): ReactNode;
+export declare function renderPdfPreviewPane(c: PdfRenderContext): ReactNode;
+export declare function renderPdfSettings(c: PdfRenderContext): ReactNode;

package/dist/web/pdf-editor-panes.js

@@ -0,0 +1,40 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PdfPreview } from "@cosmicdrift/kumiko-renderer/web";
+import { useEffect } from "react";
+import { PlaceholderSection, SystemPlaceholderSection } from "./mail-left-rail.js";
+import { PageCanvas } from "./page-canvas.js";
+import { PdfResourceSection } from "./pdf-left-rail.js";
+import { SettingsPanel } from "./settings-panel.js";
+// Opening the preview prints the page without a click; a failed print is not retried for the same draft.
+function RunOnMount({ run }) {
+    useEffect(() => {
+        run();
+    }, [run]);
+    return null;
+}
+export function renderPdfLeftRail(c) {
+    const { s, view, detail, actions } = c;
+    const { insert, filesAvailable, scope } = s.host;
+    return (_jsxs(_Fragment, { children: [_jsx(PlaceholderSection, { validation: view.placeholderSource, onInsert: insert.insertPlaceholder, idPrefix: "pdf" }), _jsx(SystemPlaceholderSection, { validation: view.placeholderSource, onInsert: insert.insertPlaceholder, idPrefix: "pdf", isLayoutOwned: view.layoutFills }), _jsx(PdfResourceSection, { resourceKeys: view.resourceKeys, canUpload: detail.scope === scope, filesAvailable: filesAvailable, layoutName: view.layoutName, onInsert: insert.insertResource, onUpload: actions.uploadResource })] }));
+}
+export function renderPdfEditCanvas(c) {
+    const { s, view, current, actions } = c;
+    const { insert } = s.host;
+    const { vocabulary } = s;
+    return (_jsx("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", onFocusCapture: insert.markFocused("body"), children: _jsx(PageCanvas, { meta: current.draft.meta, content: current.draft.content, onContentChange: (content) => actions.updateDraft({ ...current.draft, content }), regions: s.server.layout?.regions ?? null, layoutName: view.layoutName, resourceSrc: view.layoutResourceSrc, variableLabels: vocabulary.variableLabels, systemVariables: vocabulary.systemVariables, systemLabels: vocabulary.systemLabels, variableNames: vocabulary.variableNames, imageVariables: vocabulary.imageVariables, resourcePreviews: vocabulary.resourcePreviews, onEditorReady: insert.register("body") }) }));
+}
+function renderStalePreview(c) {
+    const { t, Button, s, view, actions } = c;
+    const { busy } = s.ui;
+    return (_jsxs("div", { className: "flex flex-col items-start gap-3 p-6", "data-testid": "document-designer-preview-stale", children: [view.pdfAvailable && busy === null && _jsx(RunOnMount, { run: actions.printOnce }), _jsx("p", { className: "text-sm text-muted-foreground", children: busy === "pdf"
+                    ? t("documentDesigner.preview.loading")
+                    : t("documentDesigner.preview.stale") }), _jsx(Button, { variant: "secondary", disabled: !view.pdfAvailable || busy !== null, onClick: () => void actions.generatePdf(), children: t("documentDesigner.actions.generatePdf") })] }));
+}
+export function renderPdfPreviewPane(c) {
+    const { generated } = c.s.ui;
+    return (_jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: generated !== null && c.view.generatedFresh ? (_jsx(PdfPreview, { source: { base64: generated.result.pdfBase64 }, testId: "document-designer-pdf-preview" })) : (renderStalePreview(c)) }));
+}
+export function renderPdfSettings(c) {
+    const { s, view, current, detail, actions } = c;
+    return (_jsx(SettingsPanel, { meta: current.draft.meta, onMetaChange: (meta) => actions.updateDraft({ ...current.draft, meta }), layouts: s.server.layouts.rows, locale: s.doc.locale, version: { id: detail.id, version: detail.version, status: detail.status }, vocabulary: view.vocabulary, insert: s.host.insert, draftKey: `${current.key}:${s.ui.draftEpoch}` }));
+}

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

@@ -0,0 +1,52 @@
+import type { EditorState } from "./pdf-editor-draft.ts";
+import { type TemplateDetail } from "./types.ts";
+import type { PdfEditorState } from "./use-pdf-editor-state.ts";
+type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
+export declare function buildPdfView(input: {
+    readonly t: Translate;
+    readonly s: PdfEditorState;
+    readonly slug: string;
+    readonly current: EditorState;
+    readonly detail: TemplateDetail;
+}): {
+    dirty: boolean;
+    generatedFresh: boolean;
+    canPublish: boolean;
+    pdfAvailable: boolean;
+    unavailableMessage: string;
+    pdfUnavailableNote: boolean;
+    layoutName: string;
+    layoutResourceSrc: (key: string) => string | undefined;
+    placeholderSource: {
+        canSave: boolean;
+        canPublish: boolean;
+        issues: readonly import("@cosmicdrift/kumiko-framework/errors").FieldIssue[];
+        publishIssues: readonly import("@cosmicdrift/kumiko-framework/errors").FieldIssue[];
+        used: readonly string[];
+        unknown: readonly string[];
+        missingRequired: readonly string[];
+        warnings: readonly import("./types.ts").ValidationWarning[];
+        variables: Readonly<Record<string, import("./mail-types.ts").MailVariable>>;
+        systemPlaceholders: readonly string[];
+    } | null;
+    layoutFills: (name: string) => boolean;
+    resourceKeys: string[];
+    title: string;
+    systemVersion: number | null;
+    vocabulary: {
+        names: string[];
+        labels: {
+            [x: string]: string;
+        };
+        system: readonly string[];
+    };
+    footer: {
+        readonly tone: import("./editor-shell.tsx").FooterTone;
+        readonly text: string;
+    } | null;
+    showOverrideLinks: boolean;
+    originText: string;
+    besideActiveSentence: string | null;
+};
+export type PdfView = ReturnType<typeof buildPdfView>;
+export {};

package/dist/web/pdf-editor-view.js

@@ -0,0 +1,89 @@
+import { fileUrl } from "./file-name.js";
+import { snapshotOf } from "./pdf-editor-draft.js";
+import { pdfFooterMessage } from "./pdf-footer.js";
+import { visibleSystemPlaceholders } from "./pdf-left-rail.js";
+import { draftBesideActiveSentence } from "./status-label.js";
+import { parseJsonObject } from "./template-rows.js";
+import { DEFAULT_LAYOUT_SLUG } from "./types.js";
+import { templateTitle, templateTitleText } from "./used-by-label.js";
+function originTextOf(t, s, detail, systemVersion, showOverrideLinks) {
+    const overrides = s.server.overridesQuery.data;
+    if (showOverrideLinks) {
+        const overrideCount = (overrides?.activeOverrides ?? 0) + (overrides?.draftOverrides ?? 0);
+        return overrides?.totalTenants == null
+            ? t("documentDesigner.originBar.noTotal", { count: overrideCount })
+            : t("documentDesigner.originBar.withTotal", {
+                count: overrideCount,
+                total: overrides.totalTenants,
+            });
+    }
+    if (detail.scope === "system")
+        return t("documentDesigner.mail.origin.system", { version: detail.version });
+    return systemVersion === null
+        ? t("documentDesigner.mail.origin.tenantOnly")
+        : t("documentDesigner.mail.origin.overrides", { version: systemVersion });
+}
+function footerOf(t, s) {
+    const { validation } = s.server;
+    const { generated } = s.ui;
+    if (validation === undefined || validation === null)
+        return null; // skip: nothing validated yet
+    return pdfFooterMessage(t, validation, generated === null
+        ? null
+        : {
+            pages: generated.result.pageCount,
+            sizeBytes: generated.result.sizeBytes,
+            durationMs: generated.result.durationMs,
+        });
+}
+function layoutNameOf(t, s, layoutSlugShown) {
+    const layoutTitle = s.server.layouts.rows.find((row) => row.slug === layoutSlugShown)?.title;
+    return layoutTitle === undefined ? layoutSlugShown : templateTitleText(t, layoutTitle);
+}
+function placeholderSourceOf(s) {
+    const { validation } = s.server;
+    return validation === undefined || validation === null
+        ? null
+        : {
+            ...validation,
+            variables: s.vocabulary.variables,
+            systemPlaceholders: visibleSystemPlaceholders(validation.systemPlaceholders),
+        };
+}
+export function buildPdfView(input) {
+    const { t, s, slug, current, detail } = input;
+    const { layout, validation, statusQuery, brandingLogoFile } = s.server;
+    const { generated } = s.ui;
+    const pdfAvailable = statusQuery.error === null && statusQuery.data?.available === true;
+    const unavailableMessage = statusQuery.data?.available === false ? (statusQuery.data.message ?? "") : "";
+    const layoutSlugShown = layout?.slug ?? DEFAULT_LAYOUT_SLUG;
+    const layoutName = layoutNameOf(t, s, layoutSlugShown);
+    const overviewRow = s.host.overview.rows.find((candidate) => candidate.slug === slug);
+    const systemVersion = overviewRow?.systemVersion ?? null;
+    const showOverrideLinks = s.server.showOrigin && detail.scope === "system";
+    return {
+        dirty: snapshotOf(current.draft) !== current.snapshot,
+        generatedFresh: generated !== null && generated.forSnapshot === snapshotOf(current.draft),
+        canPublish: validation?.canPublish === true,
+        pdfAvailable,
+        unavailableMessage,
+        pdfUnavailableNote: !pdfAvailable && statusQuery.loading === false,
+        layoutName,
+        layoutResourceSrc: (key) => key === "logo" && brandingLogoFile !== "" ? fileUrl(brandingLogoFile) : undefined,
+        placeholderSource: placeholderSourceOf(s),
+        layoutFills: (name) => layout !== null &&
+            (layout.html.includes(`data-variable="${name}"`) || layout.html.includes(`{{${name}}}`)),
+        resourceKeys: Object.keys(parseJsonObject(detail.linkedResources)),
+        title: overviewRow === undefined ? slug : templateTitle(t, overviewRow),
+        systemVersion,
+        vocabulary: {
+            names: s.vocabulary.variableNames,
+            labels: s.vocabulary.variableLabels,
+            system: s.vocabulary.systemVariables,
+        },
+        footer: footerOf(t, s),
+        showOverrideLinks,
+        originText: originTextOf(t, s, detail, systemVersion, showOverrideLinks),
+        besideActiveSentence: draftBesideActiveSentence(t, detail),
+    };
+}

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

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 export type PdfTemplateEditorProps = {
     readonly slug: string;
     /** Template locale; defaults to "de", or the first locale the slug has. */