@cosmicdrift/kumiko-document-designer 0.388.0 → 0.390.0

package/dist/web/layout-editor-logic.js

@@ -0,0 +1,143 @@
+import { MAIL_DOCUMENT_BLOCKS, PDF_DOCUMENT_BLOCKS, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { dispatcherErrorText } from "@cosmicdrift/kumiko-renderer";
+import { pluralKey } from "@cosmicdrift/kumiko-renderer/headless";
+import { composeLayoutHtml } from "./compose-layout.js";
+import { fileUrl } from "./file-name.js";
+import { isHexColor, metaToSave } from "./layout-meta.js";
+import { asRowStatus } from "./status-label.js";
+export const REGION_EDITOR_IDS = {
+    header: "document-designer-region-header",
+    signature: "document-designer-region-signature",
+    footer: "document-designer-region-footer",
+};
+export const PAPER_WIDTH_CLASS = {
+    560: "max-w-[560px]",
+    600: "max-w-[600px]",
+    640: "max-w-[640px]",
+};
+export function issueText(t, issue) {
+    const translated = t(issue.i18nKey, issue.params);
+    return translated === issue.i18nKey ? issue.code : translated;
+}
+export function sameAppearance(a, b) {
+    return (a.width === b.width &&
+        a.font === b.font &&
+        a.outerBackground === b.outerBackground &&
+        a.accentLine === b.accentLine &&
+        a.buttonStyle === b.buttonStyle);
+}
+export function initialTab(showMjmlTab, source) {
+    return showMjmlTab && source.effectiveFormat === "mjml" ? "mjml" : "draft";
+}
+export function layoutDirty(input) {
+    const { source } = input;
+    const appearanceDirty = input.appearanceEditable && !sameAppearance(input.appearance, input.storedAppearance);
+    const htmlDirty = input.header !== source.regions.header ||
+        input.signature !== source.regions.signature ||
+        input.footer !== source.regions.footer ||
+        appearanceDirty;
+    return input.mjmlMode ? input.mjml !== (source.mjmlSource ?? "") : htmlDirty;
+}
+export function layoutContent(input) {
+    return input.mjmlMode
+        ? input.mjml
+        : composeLayoutHtml({
+            header: input.header,
+            signature: input.isMail ? input.signature : "",
+            footer: input.footer,
+        });
+}
+export function footerMessageOf(input) {
+    const { t, checked, userCount } = input;
+    if (checked === null)
+        return null; // skip: nothing validated yet, no footer message
+    if (!input.appearanceValid) {
+        return { tone: "bad", text: t("documentDesigner.appearance.backgroundInvalid") };
+    }
+    const blockingIssue = [...checked.issues, ...checked.publishIssues][0];
+    if (blockingIssue !== undefined)
+        return { tone: "bad", text: issueText(t, blockingIssue) };
+    return {
+        tone: "ok",
+        text: t(pluralKey(input.isMail
+            ? "documentDesigner.editor.footer.okMail"
+            : "documentDesigner.editor.footer.okPdf", userCount), { count: userCount }),
+    };
+}
+// A layout region has no per-mail variables, so a steps block there could never show a stage and an images block no photos.
+export function layoutBlocks(isMail) {
+    return (isMail ? MAIL_DOCUMENT_BLOCKS : PDF_DOCUMENT_BLOCKS).filter((block) => block !== "steps" && block !== "images");
+}
+// The layout's "logo" resource is the branding logo, so the editor shows it instead of a chip.
+export function resourcePreviewsOf(branding, isMail, t) {
+    const logoFile = branding?.logoFile ?? "";
+    if (logoFile === "")
+        return undefined; // skip: no branding logo to preview
+    return {
+        logo: {
+            src: fileUrl(logoFile),
+            caption: isMail ? t("documentDesigner.editor.logoCaption") : "",
+        },
+    };
+}
+function metaOf(input) {
+    if (input.appearanceEditable)
+        return metaToSave(input.appearance, input.source.meta);
+    return input.isMail ? input.source.meta : {};
+}
+export async function saveLayout(input) {
+    const { t, setSaveError } = input;
+    setSaveError(null);
+    const base = {
+        slug: input.slug,
+        kind: input.kind,
+        locale: input.source.locale,
+        content: input.content,
+        contentFormat: input.mjmlMode ? "mjml" : "html",
+        meta: metaOf(input),
+    };
+    const saved = input.isSystemAdmin
+        ? await input.upsertSystem.mutate(base)
+        : await input.upsertTenant.mutate({ ...base, status: input.publish ? "active" : "draft" });
+    if (!saved.isSuccess) {
+        setSaveError(dispatcherErrorText(saved.error, t));
+        // skip: the failure is shown through saveError
+        return;
+    }
+    if (input.isSystemAdmin && input.publish) {
+        const published = await input.publishSystem.mutate({ id: saved.data.id });
+        if (!published.isSuccess) {
+            setSaveError(dispatcherErrorText(published.error, t));
+            // skip: the failure is shown through saveError
+            return;
+        }
+    }
+    await input.onReload();
+}
+export function accentLineShown(input) {
+    return (input.isMail &&
+        input.appearanceEditable &&
+        input.appearance.accentLine === "branding" &&
+        isHexColor(input.accentColor));
+}
+export function appearanceFlags(input) {
+    // An mjml layout brings its own look; the appearance fields only drive structured (html) layouts.
+    const appearanceFromMjml = input.source.effectiveFormat === "mjml" || input.mjmlMode;
+    const appearanceEditable = input.isMail && !appearanceFromMjml;
+    const appearanceValid = !appearanceEditable || isHexColor(input.appearance.outerBackground);
+    return { appearanceFromMjml, appearanceEditable, appearanceValid };
+}
+export function shownRowOf(isSystemAdmin, source) {
+    return isSystemAdmin ? source.system : (source.tenant ?? source.system);
+}
+export function layoutSaveFlags(input) {
+    const { checked, appearanceValid, busy } = input;
+    const shownStatus = input.shownRow === null ? null : asRowStatus(input.shownRow.status);
+    return {
+        canSave: input.dirty && checked?.canSave === true && appearanceValid && !busy,
+        canPublish: checked?.canPublish === true &&
+            appearanceValid &&
+            (input.dirty || shownStatus === "draft") &&
+            !busy,
+    };
+}

package/dist/web/layout-editor-paper.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from "react";
+import type { Translate } from "./layout-editor-logic.ts";
+import type { LayoutEditorModel } from "./use-layout-editor-state.ts";
+export declare function renderPaper(t: Translate, m: LayoutEditorModel): ReactNode;

package/dist/web/layout-editor-paper.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DocumentContentEditor } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { cn } from "@cosmicdrift/kumiko-renderer/web";
+import { PAPER_WIDTH_CLASS, REGION_EDITOR_IDS } from "./layout-editor-logic.js";
+// A dashed, labelled area of the paper; the focused one owns the shared toolbar.
+function PaperRegion({ label, testId, children, onFocus, }) {
+    return (_jsxs("div", { className: "relative rounded-sm border border-dashed border-input p-3", "data-testid": testId, onFocusCapture: onFocus, children: [_jsx("span", { className: "absolute -top-2.5 left-2.5 bg-card px-1.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: label }), children] }));
+}
+function renderRegionEditor(m, region, value, onChange) {
+    const { resourcePreviews } = m;
+    return (_jsx(DocumentContentEditor, { id: REGION_EDITOR_IDS[region], value: value, onChange: onChange, variables: m.placeholders, variableLabels: m.placeholderLabels, systemVariables: m.placeholders, readOnly: false, blocks: m.blocks, ...(resourcePreviews && { resourcePreviews }), chrome: "canvas", toolbarHost: m.activeRegion === region ? m.toolbarHost : null }));
+}
+function renderContentSlot(t, isMail) {
+    return (_jsxs("div", { className: "rounded-sm border-2 border-dashed border-primary bg-primary/10 px-3 py-9 text-center font-medium text-primary", "data-testid": "document-designer-region-content", children: ["\u229E ", t("documentDesigner.editor.region.content"), _jsx("small", { className: "mt-1 block text-xs font-normal opacity-85", children: t(isMail ? "documentDesigner.editor.slot.mail" : "documentDesigner.editor.slot.pdf") })] }));
+}
+function renderSignatureRegion(t, m) {
+    return (_jsx(PaperRegion, { label: t("documentDesigner.editor.region.signature"), testId: "document-designer-region-signature", onFocus: () => m.setActiveRegion("signature"), children: renderRegionEditor(m, "signature", m.signature, m.setSignature) }));
+}
+function renderFooterRegion(t, m) {
+    return (_jsx("div", { className: cn(m.isMail && "-mx-8 -mb-6 bg-muted px-8 py-4"), children: _jsx(PaperRegion, { label: t("documentDesigner.editor.region.footer"), testId: "document-designer-region-footer", onFocus: () => m.setActiveRegion("footer"), children: renderRegionEditor(m, "footer", m.footer, m.setFooter) }) }));
+}
+export function renderPaper(t, m) {
+    return (_jsxs("div", { className: cn("mx-auto flex w-full flex-col gap-5 bg-card px-8 py-6 shadow-md", m.isMail ? PAPER_WIDTH_CLASS[m.appearance.width] : "min-h-[842px] max-w-[595px]", m.showAccentLine && "border-t-4 border-t-(--layout-accent)"), ref: (element) => element?.style.setProperty("--layout-accent", m.accentColor), "data-testid": "document-designer-paper", children: [_jsx(PaperRegion, { label: t("documentDesigner.editor.region.header"), testId: "document-designer-region-header", onFocus: () => m.setActiveRegion("header"), children: renderRegionEditor(m, "header", m.header, m.setHeader) }), renderContentSlot(t, m.isMail), m.isMail && renderSignatureRegion(t, m), renderFooterRegion(t, m)] }));
+}

package/dist/web/layout-editor.d.ts

@@ -1,2 +1,4 @@
 import { type ReactNode } from "react";
-export declare function LayoutEditor(): ReactNode;
+export declare function LayoutEditor({ scope, }: {
+    readonly scope?: "tenant" | "system";
+}): ReactNode;

package/dist/web/layout-editor.js

@@ -11,7 +11,11 @@ function parseLayoutKind(raw) {
     return raw === "pdf-layout" ? "pdf-layout" : "mail-layout";
 }
 function LayoutEditorLoader({ kind, slug, isSystemAdmin, onKindChange, }) {
-    const source = useQuery(TemplateResolverQueries.layoutSource, { kind, slug });
+    const source = useQuery(TemplateResolverQueries.layoutSource, {
+        kind,
+        slug,
+        scope: isSystemAdmin ? "system" : "tenant",
+    });
     const overview = useQuery(TemplateResolverQueries.overview, {
         limit: 200,
         layoutSlug: slug,
@@ -38,10 +42,10 @@ function LayoutEditorLoader({ kind, slug, isSystemAdmin, onKindChange, }) {
     const bodyKey = [kind, slug, data.tenant?.id, data.tenant?.version, data.system?.version].join("|");
     return (_jsx(LayoutEditorBody, { kind: kind, slug: slug, isSystemAdmin: isSystemAdmin, source: data, overviewRows: rows, usedByCount: overview.data?.total ?? rows.length, overrides: isSystemAdmin ? overrides.data : null, onKindChange: onKindChange, onReload: reload }, bodyKey));
 }
-export function LayoutEditor() {
+export function LayoutEditor({ scope = "tenant", }) {
     const nav = useNav();
     const roles = useUserRoles();
     const [kind, setKind] = useState(() => parseLayoutKind(nav.searchParams["kind"]));
     const slug = nav.searchParams["slug"] ?? DEFAULT_LAYOUT_SLUG;
-    return (_jsx(LayoutEditorLoader, { kind: kind, slug: slug, isSystemAdmin: roles?.includes("SystemAdmin") === true, onKindChange: setKind }, kind));
+    return (_jsx(LayoutEditorLoader, { kind: kind, slug: slug, isSystemAdmin: scope === "system" && roles?.includes("SystemAdmin") === true, onKindChange: setKind }, kind));
 }

package/dist/web/mail-editor-body.d.ts

@@ -1,17 +1,5 @@
-import { type ReactNode } from "react";
-import type { MailValidation, TemplateRowView } from "./mail-types.ts";
-export type MailEditorBodyProps = {
-    readonly slug: string;
-    readonly locale: string;
-    readonly locales: readonly string[];
-    readonly title: string;
-    readonly isSystemAdmin: boolean;
-    readonly row: TemplateRowView | null;
-    readonly systemVersion: number | null;
-    readonly fallbackLocale: string | null;
-    readonly onLocaleChange: (locale: string) => void;
-    readonly onReload: () => Promise<void>;
-    readonly onRefreshRow: () => Promise<void>;
-};
-export declare function placeholderNames(validation: MailValidation | null): string[];
+import type { ReactNode } from "react";
+import type { MailEditorBodyProps } from "./mail-editor-logic.ts";
+export type { MailEditorBodyProps } from "./mail-editor-logic.ts";
+export { placeholderNames } from "./mail-editor-logic.ts";
 export declare function MailEditorBody(props: MailEditorBodyProps): ReactNode;

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

@@ -1,216 +1,39 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TemplateResolverHandlers, TemplateResolverQueries, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
-import { dispatcherErrorText, useMutation, usePrimitives, useQuery, useTranslation, useUnsavedInputSource, } from "@cosmicdrift/kumiko-renderer";
-import { useState } from "react";
-import { EditorHeader, EditorLocaleSwitch, EditorModeSwitch, originOf, } from "./editor-header.js";
-import { EditorBody, EditorFooter, EditorFrame } from "./editor-shell.js";
-import { fileUrl } from "./file-name.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { EditorHeader, EditorModeSwitch, originOf } from "./editor-header.js";
+import { EditorFooter, EditorFrame } from "./editor-shell.js";
 import { MailConfirmDialogs } from "./mail-dialogs.js";
-import { buildMeta, isDraftDirty, loadedMailOf, parseJsonRecord, parseLinkedResources, pickDeclaredVariables, systemLabelMap, variableLabelMap, } from "./mail-draft.js";
-import { MailEditCenter } from "./mail-edit-center.js";
-import { footerMessage, metaFieldMessages } from "./mail-footer.js";
-import { PlaceholderSection, ResourceSection, SystemPlaceholderSection, } from "./mail-left-rail.js";
-import { MissingLocaleCanvas } from "./mail-missing-locale.js";
+import { renderMailBanners, renderMailControls, renderMailEditBody, renderMailModals, } from "./mail-editor-render.js";
 import { MailOriginBar } from "./mail-origin-bar.js";
-import { PdfLinkModal } from "./mail-pdf-link-modal.js";
-import { MailPreviewMode } from "./mail-preview.js";
-import { AttachmentSection, ChromeSection, PropertiesSection, UsageSection, } from "./mail-right-rail.js";
-import { UploadModal } from "./mail-upload-modal.js";
-import { VersionsSection } from "./mail-versions.js";
-import { useFilesCapability } from "./use-files-capability.js";
-import { useInsertTargets } from "./use-insert-targets.js";
-import { useMailPersistence } from "./use-mail-persistence.js";
-import { useOverviewRows } from "./use-overview-rows.js";
-import { useOwnAddress } from "./use-own-address.js";
-import { useSettledValue } from "./use-settled-value.js";
-import { useTestMail } from "./use-test-mail.js";
-import { templateTitleText } from "./used-by-label.js";
-// The editor replaces this token with the decoded image size once the preview image loaded.
-const SIZE_TOKEN = "{size}";
-function uniqueValues(values) {
-    return [...new Set(values)];
-}
-export function placeholderNames(validation) {
-    if (validation === null)
-        return [];
-    const own = Object.entries(validation.variables).flatMap(([name, variable]) => [
-        name,
-        ...Object.keys(variable.item ?? {}).map((item) => `${name}.${item}`),
-    ]);
-    return uniqueValues([...own, ...validation.systemPlaceholders]);
-}
+import { renderMailPreview } from "./mail-preview-render.js";
+import { useMailEditorState } from "./use-mail-editor-state.js";
+export { placeholderNames } from "./mail-editor-logic.js";
 export function MailEditorBody(props) {
-    const { slug, locale, title, isSystemAdmin, row, onReload, onRefreshRow } = props;
+    const { locale, title, isSystemAdmin, row, onReload } = props;
     const t = useTranslation();
     const { Banner } = usePrimitives();
-    const [baseline] = useState(() => loadedMailOf(row));
-    const [draft, setDraft] = useState(baseline);
-    const [settled, settle] = useSettledValue(baseline);
-    const [mode, setMode] = useState("edit");
-    const [creating, setCreating] = useState(false);
-    const [dialog, setDialog] = useState({ kind: "none" });
-    const [uploadOpen, setUploadOpen] = useState(false);
-    const [pdfOpen, setPdfOpen] = useState(false);
-    const [resourceError, setResourceError] = useState(null);
-    const [resetError, setResetError] = useState(null);
-    const [editorEpoch, setEditorEpoch] = useState(0);
-    const [includeAttachments, setIncludeAttachments] = useState(true);
-    const [prefixSubject, setPrefixSubject] = useState(true);
-    const [picked, setPicked] = useState(null);
-    const insert = useInsertTargets();
-    const persistence = useMailPersistence({
-        slug,
-        locale,
-        title,
-        isSystemAdmin,
-        row,
-    });
-    const testMail = useTestMail();
-    const own = useOwnAddress();
-    const filesAvailable = useFilesCapability();
-    const resourceRemove = useMutation(TemplateResolverHandlers.resourceRemove);
-    const layouts = useOverviewRows("mail-layout");
-    const pdfTemplates = useOverviewRows("document-pdf");
-    const locked = row === null && !creating;
-    const variableSchema = parseJsonRecord(row?.variableSchema);
-    const validation = useQuery(TemplateResolverQueries.validate, {
-        slug,
-        kind: "mail",
-        contentFormat: "html",
-        content: settled.body,
-        meta: buildMeta(settled),
-        variableSchema,
-        locale,
-        scope: isSystemAdmin ? "system" : "tenant",
-    }).data;
-    const pickedVariables = pickDeclaredVariables(picked, validation?.variables);
-    const update = (patch) => {
-        const next = { ...draft, ...patch };
-        setDraft(next);
-        settle(next);
-    };
-    const reset = () => {
-        setDraft(baseline);
-        settle(baseline);
-        setEditorEpoch((epoch) => epoch + 1);
-        persistence.clearError();
-    };
-    const dirty = isDraftDirty(draft, baseline);
-    useUnsavedInputSource(() => dirty);
-    const busy = persistence.busy;
-    const canSave = !locked && !busy && validation?.canSave === true && (dirty || creating);
-    const canPublish = !locked &&
-        !busy &&
-        validation?.canPublish === true &&
-        (dirty || creating || row?.status !== "active");
-    const saveAndReload = async (publish) => {
-        if ((await persistence.save(draft, publish)) !== "failed")
-            await onReload();
-    };
-    const saveDraft = () => void saveAndReload(false);
-    const perform = (target) => props.onLocaleChange(target.locale);
-    const leave = (target) => {
-        if (target.locale === locale)
-            return;
-        if (dirty)
-            setDialog({ kind: "leave", target });
-        else
-            perform(target);
-    };
-    const resources = parseLinkedResources(row?.linkedResources);
-    const pdfTitles = new Map(pdfTemplates.rows.map((template) => [template.slug, templateTitleText(t, template.title)]));
-    const resourcePreviews = Object.fromEntries(resources.flatMap((resource) => resource.kind === "image"
-        ? [
-            [
-                resource.key,
-                {
-                    src: fileUrl(resource.fileRefId),
-                    caption: t("documentDesigner.mail.resource.caption", {
-                        key: resource.key,
-                        size: SIZE_TOKEN,
-                    }),
-                },
-            ],
-        ]
-        : []));
-    const uploadTemplateId = row?.scope === "tenant" ? row.id : null;
-    const takenKeys = resources.map((resource) => resource.key);
-    const removeResource = async (key) => {
-        if (uploadTemplateId === null)
-            return;
-        setResourceError(null);
-        const result = await resourceRemove.mutate({ templateId: uploadTemplateId, key });
-        if (result.isSuccess)
-            await onRefreshRow();
-        else
-            setResourceError(dispatcherErrorText(result.error, t));
-    };
-    const sendTestMail = () => {
-        void testMail.send({
-            slug,
-            locale,
-            content: draft.body,
-            meta: buildMeta(draft),
-            variableSchema,
-            includeAttachments,
-            prefixSubject,
-            ...(pickedVariables !== null && { variables: pickedVariables }),
-        });
-    };
-    // Nothing is written yet in a missing language, so no placeholder may read as missing.
-    const railValidation = locked && validation != null ? { ...validation, missingRequired: [] } : (validation ?? null);
-    const names = placeholderNames(validation ?? null);
-    const vocabulary = {
-        names,
-        labels: {
-            ...systemLabelMap(t, validation?.systemPlaceholders ?? []),
-            ...variableLabelMap(t, validation?.variables ?? {}),
-        },
-        system: validation?.systemPlaceholders ?? [],
-    };
-    const attachments = resources.filter((resource) => resource.kind !== "image");
-    const footer = locked || validation === undefined || validation === null
-        ? null
-        : footerMessage(t, validation, mode === "preview" && testMail.availability.canSend);
-    const fieldErrors = locked ? {} : metaFieldMessages(t, validation ?? null);
-    const publish = () => void saveAndReload(true);
-    const controls = (_jsx(EditorLocaleSwitch, { testIdPrefix: "mail", locales: props.locales, locale: locale, onLocale: (next) => leave({ kind: "locale", locale: next }) }));
+    const m = useMailEditorState(props, t);
+    const { mode, setMode, setDialog, setResetError } = m.ui;
+    const saveDraft = () => void m.saveAndReload(false);
+    const publish = () => void m.saveAndReload(true);
+    const controls = renderMailControls(props, m);
     const origin = row === null ? null : originOf(row.scope !== "tenant", props.systemVersion !== null);
-    return (_jsxs(EditorFrame, { testId: "document-designer-mail-editor", children: [_jsx(EditorHeader, { title: title, stored: row === null ? null : { status: row.status, version: row.version }, actions: { busy, canSave, canPublish, onSave: saveDraft, onPublish: publish }, children: _jsx(EditorModeSwitch, { testIdPrefix: "mail", mode: mode, onMode: setMode }) }), mode === "edit" && (_jsx(MailOriginBar, { row: row, systemVersion: props.systemVersion, locale: locale, isSystemAdmin: isSystemAdmin, creating: creating, controls: controls, onReload: () => {
+    return (_jsxs(EditorFrame, { testId: "document-designer-mail-editor", children: [_jsx(EditorHeader, { title: title, stored: row === null ? null : { status: row.status, version: row.version }, actions: {
+                    busy: m.busy,
+                    canSave: m.canSave,
+                    canPublish: m.canPublish,
+                    onSave: saveDraft,
+                    onPublish: publish,
+                }, children: _jsx(EditorModeSwitch, { testIdPrefix: "mail", mode: mode, onMode: setMode }) }), mode === "edit" && (_jsx(MailOriginBar, { row: row, systemVersion: props.systemVersion, locale: locale, isSystemAdmin: isSystemAdmin, creating: m.ui.creating, controls: controls, onReload: () => {
                     setResetError(null);
                     void onReload();
-                }, onResetError: setResetError })), 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 })), mode === "edit" ? (_jsx(EditorBody, { left: _jsxs(_Fragment, { children: [_jsx(PlaceholderSection, { validation: railValidation, onInsert: insert.insertPlaceholder }), _jsx(SystemPlaceholderSection, { validation: railValidation, onInsert: insert.insertPlaceholder }), _jsx(ResourceSection, { resources: resources, pdfTitles: pdfTitles, canUpload: uploadTemplateId !== null, filesAvailable: filesAvailable, onUpload: () => setUploadOpen(true), onInsert: insert.insertResource, onRemove: (key) => setDialog({ kind: "remove", key }) })] }), center: locked ? (_jsx(MissingLocaleCanvas, { slug: slug, locale: locale, fallbackLocale: props.fallbackLocale, copyScope: isSystemAdmin ? "system" : "tenant", onCreateBlank: () => setCreating(true), onCopied: () => void onReload() })) : (_jsx(MailEditCenter, { draft: draft, vocabulary: vocabulary, resourcePreviews: resourcePreviews, insert: insert, readOnly: false, fieldErrors: fieldErrors, onChange: update }, editorEpoch)), right: _jsxs(_Fragment, { children: [_jsx(PropertiesSection, { slug: slug, draft: draft, layouts: layouts.rows, onChange: update }), _jsx(ChromeSection, { draft: draft, vocabulary: vocabulary, insert: insert, onChange: update }), _jsx(AttachmentSection, { attachments: attachments, pdfTitles: pdfTitles, canEdit: uploadTemplateId !== null, onAddPdf: () => setPdfOpen(true), onRemove: (key) => setDialog({ kind: "remove", key }) }), _jsx(UsageSection, { slug: slug }), _jsx(VersionsSection, { rowId: row?.id ?? null, currentVersion: row?.version ?? 0, currentStatus: row?.status ?? "draft" })] }) })) : (_jsx(MailPreviewMode, { payload: {
-                    slug,
-                    kind: "mail",
-                    locale,
-                    content: settled.body,
-                    meta: buildMeta(settled),
-                    variableSchema,
-                    ...(pickedVariables !== null && { variables: pickedVariables }),
-                }, picked: picked, onPick: setPicked, validation: validation ?? null, slug: slug, locale: locale, fromName: settled.senderName, own: own, origin: origin, controls: controls, testMail: {
-                    availability: testMail.availability,
-                    pending: testMail.pending,
-                    onSend: sendTestMail,
-                    includeAttachments,
-                    onIncludeAttachments: setIncludeAttachments,
-                    prefixSubject,
-                    onPrefixSubject: setPrefixSubject,
-                } })), !locked && (_jsx(EditorFooter, { testIdPrefix: "mail-editor", message: footer, saveError: persistence.error, modifiedAt: row?.modifiedAt ?? null, dirty: dirty, busy: busy, canSave: canSave, canPublish: canPublish, onDiscard: () => setDialog({ kind: "discard" }), onSave: saveDraft, onPublish: publish })), uploadTemplateId !== null && (_jsxs(_Fragment, { children: [_jsx(UploadModal, { open: uploadOpen, onOpenChange: setUploadOpen, target: {
-                            templateId: uploadTemplateId,
-                            takenKeys,
-                            onUploaded: (uploaded) => {
-                                if (uploaded.purpose === "image")
-                                    insert.insertResource(uploaded.key);
-                                void onRefreshRow();
-                            },
-                        } }), _jsx(PdfLinkModal, { open: pdfOpen, onOpenChange: setPdfOpen, templates: pdfTemplates.rows, variableLabels: vocabulary.labels, templateId: uploadTemplateId, takenKeys: takenKeys, onLinked: () => void onRefreshRow() })] })), _jsx(MailConfirmDialogs, { dialog: dialog, onClose: () => setDialog({ kind: "none" }), onDiscard: () => {
-                    reset();
+                }, onResetError: setResetError })), renderMailBanners(Banner, t, m), mode === "edit"
+                ? renderMailEditBody(props, m)
+                : renderMailPreview(props, m, controls, origin), !m.locked && (_jsx(EditorFooter, { testIdPrefix: "mail-editor", message: m.footer, saveError: m.services.persistence.error, modifiedAt: row?.modifiedAt ?? null, dirty: m.dirty, busy: m.busy, canSave: m.canSave, canPublish: m.canPublish, onDiscard: () => setDialog({ kind: "discard" }), onSave: saveDraft, onPublish: publish })), renderMailModals(props, m), _jsx(MailConfirmDialogs, { dialog: m.ui.dialog, onClose: () => setDialog({ kind: "none" }), onDiscard: () => {
+                    m.reset();
                     setDialog({ kind: "none" });
-                }, onRemove: removeResource, onLeaveSave: async (target) => {
-                    if ((await persistence.save(draft, false)) === "saved")
-                        perform(target);
-                }, onLeaveDiscard: (target) => {
+                }, onRemove: m.removeResource, onLeaveSave: m.leaveSave, onLeaveDiscard: (target) => {
                     setDialog({ kind: "none" });
-                    perform(target);
+                    m.perform(target);
                 } })] }));
 }

package/dist/web/mail-editor-logic.d.ts

@@ -0,0 +1,70 @@
+import type { EditorVocabulary } from "./mail-edit-center.tsx";
+import type { LinkedResourceView, MailDraft, MailValidation, PickedValues, TemplateRowView } from "./mail-types.ts";
+type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
+export type MailEditorBodyProps = {
+    readonly slug: string;
+    readonly locale: string;
+    readonly locales: readonly string[];
+    readonly title: string;
+    readonly isSystemAdmin: boolean;
+    readonly row: TemplateRowView | null;
+    readonly systemVersion: number | null;
+    readonly fallbackLocale: string | null;
+    readonly onLocaleChange: (locale: string) => void;
+    readonly onReload: () => Promise<void>;
+    readonly onRefreshRow: () => Promise<void>;
+};
+export declare function placeholderNames(validation: MailValidation | null): string[];
+export declare function mailSaveFlags(input: {
+    readonly locked: boolean;
+    readonly busy: boolean;
+    readonly validation: MailValidation | null;
+    readonly dirty: boolean;
+    readonly creating: boolean;
+    readonly row: TemplateRowView | null;
+}): {
+    readonly canSave: boolean;
+    readonly canPublish: boolean;
+};
+export declare function resourcePreviewsOfMail(resources: readonly LinkedResourceView[], t: Translate): {
+    [k: string]: {
+        src: string;
+        caption: string;
+    };
+};
+export declare function railValidationOf(locked: boolean, validation: MailValidation | null): MailValidation | null;
+export declare function vocabularyOf(t: Translate, validation: MailValidation | null): EditorVocabulary;
+export declare function testMailPayload(input: {
+    readonly slug: string;
+    readonly locale: string;
+    readonly draft: MailDraft;
+    readonly variableSchema: Readonly<Record<string, unknown>>;
+    readonly includeAttachments: boolean;
+    readonly prefixSubject: boolean;
+    readonly pickedVariables: PickedValues | null;
+}): {
+    slug: string;
+    locale: string;
+    content: string;
+    meta: Record<string, unknown>;
+    variableSchema: Readonly<Record<string, unknown>>;
+    includeAttachments: boolean;
+    prefixSubject: boolean;
+    variables?: Readonly<Record<string, unknown>> | undefined;
+};
+export declare function previewPayload(input: {
+    readonly slug: string;
+    readonly locale: string;
+    readonly settled: MailDraft;
+    readonly variableSchema: Readonly<Record<string, unknown>>;
+    readonly pickedVariables: PickedValues | null;
+}): {
+    slug: string;
+    kind: "mail";
+    locale: string;
+    content: string;
+    meta: Record<string, unknown>;
+    variableSchema: Readonly<Record<string, unknown>>;
+    variables?: Readonly<Record<string, unknown>> | undefined;
+};
+export {};

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

@@ -0,0 +1,81 @@
+import { fileUrl } from "./file-name.js";
+import { buildMeta, systemLabelMap, variableLabelMap } from "./mail-draft.js";
+// The editor replaces this token with the decoded image size once the preview image loaded.
+const SIZE_TOKEN = "{size}";
+function uniqueValues(values) {
+    return [...new Set(values)];
+}
+export function placeholderNames(validation) {
+    if (validation === null)
+        return [];
+    const own = Object.entries(validation.variables).flatMap(([name, variable]) => [
+        name,
+        ...Object.keys(variable.item ?? {}).map((item) => `${name}.${item}`),
+    ]);
+    return uniqueValues([...own, ...validation.systemPlaceholders]);
+}
+export function mailSaveFlags(input) {
+    const { locked, busy, validation, dirty, creating, row } = input;
+    return {
+        canSave: !locked && !busy && validation?.canSave === true && (dirty || creating),
+        canPublish: !locked &&
+            !busy &&
+            validation?.canPublish === true &&
+            (dirty || creating || row?.status !== "active"),
+    };
+}
+export function resourcePreviewsOfMail(resources, t) {
+    return Object.fromEntries(resources.flatMap((resource) => resource.kind === "image"
+        ? [
+            [
+                resource.key,
+                {
+                    src: fileUrl(resource.fileRefId),
+                    caption: t("documentDesigner.mail.resource.caption", {
+                        key: resource.key,
+                        size: SIZE_TOKEN,
+                    }),
+                },
+            ],
+        ]
+        : []));
+}
+// Nothing is written yet in a missing language, so no placeholder may read as missing.
+export function railValidationOf(locked, validation) {
+    return locked && validation != null
+        ? { ...validation, missingRequired: [] }
+        : (validation ?? null);
+}
+export function vocabularyOf(t, validation) {
+    return {
+        names: placeholderNames(validation ?? null),
+        labels: {
+            ...systemLabelMap(t, validation?.systemPlaceholders ?? []),
+            ...variableLabelMap(t, validation?.variables ?? {}),
+        },
+        system: validation?.systemPlaceholders ?? [],
+    };
+}
+export function testMailPayload(input) {
+    return {
+        slug: input.slug,
+        locale: input.locale,
+        content: input.draft.body,
+        meta: buildMeta(input.draft),
+        variableSchema: input.variableSchema,
+        includeAttachments: input.includeAttachments,
+        prefixSubject: input.prefixSubject,
+        ...(input.pickedVariables !== null && { variables: input.pickedVariables }),
+    };
+}
+export function previewPayload(input) {
+    return {
+        slug: input.slug,
+        kind: "mail",
+        locale: input.locale,
+        content: input.settled.body,
+        meta: buildMeta(input.settled),
+        variableSchema: input.variableSchema,
+        ...(input.pickedVariables !== null && { variables: input.pickedVariables }),
+    };
+}