@cosmicdrift/kumiko-document-designer 0.363.0 → 0.364.0

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

@@ -3,13 +3,15 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { TemplateResolverHandlers, TemplateResolverQueries, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
 import { dispatcherErrorText, useMutation, usePrimitives, useQuery, useTranslation, } 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 { MailConfirmDialogs } from "./mail-dialogs.js";
-import { buildMeta, isDraftDirty, loadedMailOf, parseJsonRecord, parseLinkedResources, variableLabelMap, } from "./mail-draft.js";
+import { buildMeta, isDraftDirty, loadedMailOf, parseJsonRecord, parseLinkedResources, systemLabelMap, variableLabelMap, } from "./mail-draft.js";
 import { MailEditCenter } from "./mail-edit-center.js";
-import { MailFooter } from "./mail-footer.js";
-import { MailHeader } from "./mail-header.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 { MailOriginBar } from "./mail-origin-bar.js";
 import { PdfLinkModal } from "./mail-pdf-link-modal.js";
 import { MailPreviewMode } from "./mail-preview.js";
@@ -19,9 +21,12 @@ import { VersionsSection } from "./mail-versions.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";
-function sortedUnique(values) {
+// 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) {
@@ -31,22 +36,25 @@ export function placeholderNames(validation) {
         name,
         ...Object.keys(variable.item ?? {}).map((item) => `${name}.${item}`),
     ]);
-    return sortedUnique([...own, ...validation.systemPlaceholders]);
+    return uniqueValues([...own, ...validation.systemPlaceholders]);
 }
 export function MailEditorBody(props) {
     const { slug, locale, title, isSystemAdmin, row, onReload, onRefreshRow } = props;
     const t = useTranslation();
     const { Banner } = usePrimitives();
     const [baseline] = useState(() => loadedMailOf(row));
-    const [draft, setDraft] = useState(baseline.draft);
-    const [settled, settle] = useSettledValue(baseline.draft);
+    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 insert = useInsertTargets();
     const persistence = useMailPersistence({
         slug,
@@ -54,9 +62,9 @@ export function MailEditorBody(props) {
         title,
         isSystemAdmin,
         row,
-        sender: baseline.sender,
     });
     const testMail = useTestMail();
+    const own = useOwnAddress();
     const resourceRemove = useMutation(TemplateResolverHandlers.resourceRemove);
     const layouts = useOverviewRows("mail-layout");
     const pdfTemplates = useOverviewRows("document-pdf");
@@ -67,7 +75,7 @@ export function MailEditorBody(props) {
         kind: "mail",
         contentFormat: "html",
         content: settled.body,
-        meta: buildMeta(settled, baseline.sender),
+        meta: buildMeta(settled),
         variableSchema,
         locale,
         scope: isSystemAdmin ? "system" : "tenant",
@@ -78,13 +86,12 @@ export function MailEditorBody(props) {
         settle(next);
     };
     const reset = () => {
-        setDraft(baseline.draft);
-        settle(baseline.draft);
+        setDraft(baseline);
+        settle(baseline);
         setEditorEpoch((epoch) => epoch + 1);
         persistence.clearError();
     };
-    const dirty = isDraftDirty(draft, baseline.draft);
-    const isActiveTenantRow = row?.scope === "tenant" && row.status === "active";
+    const dirty = isDraftDirty(draft, baseline);
     const busy = persistence.busy;
     const canSave = !locked && !busy && validation?.canSave === true && (dirty || creating);
     const canPublish = !locked &&
@@ -96,20 +103,10 @@ export function MailEditorBody(props) {
         if (await persist(publish))
             await onReload();
     };
-    const requestSave = () => {
-        if (isActiveTenantRow)
-            setDialog({ kind: "activeSave" });
-        else
-            void saveAndReload(false);
-    };
-    const perform = (target) => {
-        if (target.kind === "locale")
-            props.onLocaleChange(target.locale);
-        else
-            props.onBack();
-    };
+    const saveDraft = () => void saveAndReload(false);
+    const perform = (target) => props.onLocaleChange(target.locale);
     const leave = (target) => {
-        if (target.kind === "locale" && target.locale === locale)
+        if (target.locale === locale)
             return;
         if (dirty)
             setDialog({ kind: "leave", target });
@@ -124,7 +121,10 @@ export function MailEditorBody(props) {
                 resource.key,
                 {
                     src: fileUrl(resource.fileRefId),
-                    caption: t("documentDesigner.mail.resource.caption", { key: resource.key }),
+                    caption: t("documentDesigner.mail.resource.caption", {
+                        key: resource.key,
+                        size: SIZE_TOKEN,
+                    }),
                 },
             ],
         ]
@@ -146,31 +146,49 @@ export function MailEditorBody(props) {
             slug,
             locale,
             content: draft.body,
-            meta: buildMeta(draft, baseline.sender),
+            meta: buildMeta(draft),
             variableSchema,
+            includeAttachments,
+            prefixSubject,
         });
     };
+    // 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: variableLabelMap(validation?.variables ?? {}),
+        labels: {
+            ...systemLabelMap(t, validation?.systemPlaceholders ?? []),
+            ...variableLabelMap(validation?.variables ?? {}),
+        },
         system: validation?.systemPlaceholders ?? [],
     };
-    const rails = { validation: validation ?? null, row, slug, draft, onChange: update };
-    return (_jsxs("div", { className: "flex flex-col gap-4 p-6", "data-testid": "document-designer-mail-editor", children: [_jsx(MailHeader, { title: title, row: row, locales: props.locales, locale: locale, mode: mode, testPending: testMail.pending, actions: {
-                    busy,
-                    canSave,
-                    canPublish,
-                    onSave: requestSave,
-                    onPublish: () => void saveAndReload(true),
-                }, onBack: () => leave({ kind: "back" }), onLocale: (next) => leave({ kind: "locale", locale: next }), onMode: setMode, onTestMail: sendTestMail }), 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 })), resourceError !== null && (_jsx(Banner, { variant: "error", testId: "mail-resource-error", children: resourceError })), _jsx(MailOriginBar, { row: row, title: title, systemVersion: props.systemVersion, slug: slug, locale: locale, fallbackLocale: props.fallbackLocale, isSystemAdmin: isSystemAdmin, creating: creating, onCreateBlank: () => setCreating(true), onReload: () => void onReload() }), mode === "edit" ? (_jsxs("div", { className: "grid items-start gap-4 lg:grid-cols-[260px_minmax(0,1fr)_300px]", children: [_jsxs("div", { className: "flex max-h-[70vh] flex-col overflow-y-auto", children: [_jsx(PlaceholderSection, { validation: rails.validation, onInsert: insert.insertPlaceholder }), _jsx(SystemPlaceholderSection, { validation: rails.validation, onInsert: insert.insertPlaceholder }), _jsx(ResourceSection, { resources: resources, pdfTitles: pdfTitles, canUpload: uploadTemplateId !== null, onUpload: () => setUploadOpen(true), onInsert: insert.insertResource, onRemove: (key) => setDialog({ kind: "remove", key }) })] }), _jsx(MailEditCenter, { draft: draft, vocabulary: vocabulary, resourcePreviews: resourcePreviews, insert: insert, readOnly: locked, onChange: update }, editorEpoch), _jsxs("div", { className: "flex max-h-[70vh] flex-col overflow-y-auto", children: [_jsx(PropertiesSection, { draft: draft, layouts: layouts.rows, onChange: update }), _jsx(AttachmentSection, { attachments: resources.filter((resource) => resource.kind !== "image"), 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: {
+    const attachments = resources.filter((resource) => resource.kind !== "image");
+    const footer = locked || validation === undefined || validation === null
+        ? null
+        : footerMessage(t, validation, mode === "preview");
+    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 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: () => {
+                    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, 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, { draft: draft, layouts: layouts.rows, 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, baseline.sender),
+                    meta: buildMeta(settled),
                     variableSchema,
-                }, validation: validation ?? null, slug: slug, locale: locale, testMail: { pending: testMail.pending, onSend: sendTestMail } })), _jsx(MailFooter, { validation: validation ?? null, previewMode: mode === "preview", saveError: persistence.error, modifiedAt: row?.modifiedAt ?? null, dirty: dirty, busy: busy, canSave: canSave, canPublish: canPublish, onDiscard: () => setDialog({ kind: "discard" }), onSave: requestSave, onPublish: () => void saveAndReload(true) }), uploadTemplateId !== null && (_jsxs(_Fragment, { children: [_jsx(UploadModal, { open: uploadOpen, onOpenChange: setUploadOpen, target: {
+                }, validation: validation ?? null, slug: slug, locale: locale, fromName: settled.senderName, own: own, origin: origin, controls: controls, testMail: {
+                    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) => {
@@ -181,8 +199,6 @@ export function MailEditorBody(props) {
                         } }), _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();
                     setDialog({ kind: "none" });
-                }, onSaveDraft: async () => {
-                    await saveAndReload(false);
                 }, onRemove: removeResource, onLeaveSave: async (target) => {
                     if (await persist(false))
                         perform(target);

package/dist/web/mail-editor.js

@@ -4,7 +4,7 @@ import { TemplateResolverQueries } from "@cosmicdrift/kumiko-bundled-features/te
 import { useNav, useQuery, useUserRoles } from "@cosmicdrift/kumiko-renderer";
 import { LoadingState } from "@cosmicdrift/kumiko-renderer-web";
 import { useState } from "react";
-import { DEFAULT_TEMPLATE_LOCALES, PLATFORM_TEMPLATES_SCREEN_ID, TEMPLATES_SCREEN_ID, } from "../constants.js";
+import { DEFAULT_TEMPLATE_LOCALES } from "../constants.js";
 import { MailEditorBody } from "./mail-editor-body.js";
 import { useOverviewRows } from "./use-overview-rows.js";
 function defaultLocaleOf(appLocales, rowLocales) {
@@ -25,7 +25,6 @@ function shownSummaryOf(summaries, slug, isSystemAdmin) {
     return (isSystemAdmin ? system : (tenant ?? system)) ?? null;
 }
 function MailEditorData({ slug, locale, locales, overviewRow, isSystemAdmin, onLocaleChange, refreshOverview, }) {
-    const nav = useNav();
     const [generation, setGeneration] = useState(0);
     const list = useQuery(TemplateResolverQueries.list, {
         kind: "mail",
@@ -46,9 +45,7 @@ function MailEditorData({ slug, locale, locales, overviewRow, isSystemAdmin, onL
     const rowLocales = overviewRow?.locales ?? [];
     return (_jsx(MailEditorBody, { slug: slug, locale: locale, locales: locales, title: overviewRow?.title ?? slug, isSystemAdmin: isSystemAdmin, row: row, systemVersion: overviewRow?.systemVersion ?? null, fallbackLocale: fallbackLocaleOf(locale, rowLocales), onLocaleChange: onLocaleChange, onReload: reload, onRefreshRow: async () => {
             await stored.refetch();
-        }, onBack: () => nav.navigate({
-            screenId: isSystemAdmin ? PLATFORM_TEMPLATES_SCREEN_ID : TEMPLATES_SCREEN_ID,
-        }) }, `${locale}|${generation}|${row?.id ?? "none"}`));
+        } }, `${locale}|${generation}|${row?.id ?? "none"}`));
 }
 function MailEditorEntry({ appLocales }) {
     const nav = useNav();

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

@@ -1,21 +1,10 @@
-import type { ReactNode } from "react";
 import type { MailValidation } from "./mail-types.js";
 type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
 export declare function footerMessage(t: Translate, validation: MailValidation, previewMode: boolean): {
     readonly tone: "bad" | "warn" | "ok";
     readonly text: string;
 };
-export declare function MailFooter({ validation, previewMode, saveError, modifiedAt, dirty, busy, canSave, canPublish, onDiscard, onSave, onPublish, }: {
-    readonly validation: MailValidation | null;
-    readonly previewMode: boolean;
-    readonly saveError: string | null;
-    readonly modifiedAt: string | null;
-    readonly dirty: boolean;
-    readonly busy: boolean;
-    readonly canSave: boolean;
-    readonly canPublish: boolean;
-    readonly onDiscard: () => void;
-    readonly onSave: () => void;
-    readonly onPublish: () => void;
-}): ReactNode;
+declare const MAIL_META_FIELDS: readonly ["subject", "previewText"];
+export type MailMetaField = (typeof MAIL_META_FIELDS)[number];
+export declare function metaFieldMessages(t: Translate, validation: MailValidation | null): Partial<Record<MailMetaField, string>>;
 export {};

package/dist/web/mail-footer.js

@@ -1,6 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @runtime client
-import { formatWhen, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
 function issueText(t, issue) {
     const translated = t(issue.i18nKey, issue.params);
     return translated === issue.i18nKey ? issue.code : translated;
@@ -31,14 +28,16 @@ export function footerMessage(t, validation, previewMode) {
     }
     return { tone: "ok", text: t("documentDesigner.mail.footer.ok") };
 }
-const TONE_CLASS = {
-    bad: "text-status-bad",
-    warn: "text-status-warn",
-    ok: "text-status-ok",
-};
-export function MailFooter({ validation, previewMode, saveError, modifiedAt, dirty, busy, canSave, canPublish, onDiscard, onSave, onPublish, }) {
-    const t = useTranslation();
-    const { Banner, Button, Text } = usePrimitives();
-    const message = validation === null ? null : footerMessage(t, validation, previewMode);
-    return (_jsxs("div", { className: "flex flex-wrap items-center gap-3 border-t pt-3", "data-testid": "mail-editor-footer", children: [saveError !== null ? (_jsx(Banner, { variant: "error", testId: "mail-editor-save-error", children: saveError })) : (_jsx("span", { className: `text-sm ${message === null ? "text-muted-foreground" : TONE_CLASS[message.tone]}`, "data-testid": "mail-editor-footer-message", "data-tone": message?.tone, children: message === null ? t("documentDesigner.editor.footer.checking") : message.text })), _jsx("div", { className: "grow" }), modifiedAt !== null && (_jsx(Text, { variant: "muted", testId: "mail-editor-saved-at", children: t("documentDesigner.mail.footer.savedAt", { when: formatWhen(modifiedAt) }) })), dirty && (_jsx(Button, { variant: "ghost", onClick: onDiscard, testId: "document-designer-discard", children: t("documentDesigner.editor.discard") })), _jsx(Button, { variant: "secondary", disabled: !canSave, loading: busy, onClick: onSave, testId: "document-designer-save", children: t("documentDesigner.editor.save") }), _jsx(Button, { disabled: !canPublish, onClick: onPublish, testId: "document-designer-publish", children: t("documentDesigner.editor.publish") })] }));
+const MAIL_META_FIELDS = ["subject", "previewText"];
+// The server names the setting and the reason per issue; the field itself shows that sentence.
+export function metaFieldMessages(t, validation) {
+    if (validation === null)
+        return {};
+    const messages = {};
+    for (const field of MAIL_META_FIELDS) {
+        const issue = validation.issues.find((candidate) => candidate.path === `meta.${field}`);
+        if (issue !== undefined)
+            messages[field] = issueText(t, issue);
+    }
+    return messages;
 }

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

@@ -1,12 +1,17 @@
 import type { ReactNode } from "react";
 import type { LinkedResourceView, MailValidation } from "./mail-types.js";
-export declare function PlaceholderSection({ validation, onInsert, }: {
-    readonly validation: MailValidation | null;
+export type PlaceholderSource = Pick<MailValidation, "variables" | "used" | "missingRequired" | "systemPlaceholders">;
+export declare function PlaceholderSection({ validation, onInsert, idPrefix, }: {
+    readonly validation: PlaceholderSource | null;
     readonly onInsert: (name: string) => void;
+    readonly idPrefix?: string;
 }): ReactNode;
-export declare function SystemPlaceholderSection({ validation, onInsert, }: {
-    readonly validation: MailValidation | null;
+export declare function SystemPlaceholderSection({ validation, onInsert, idPrefix, isLayoutOwned, }: {
+    readonly validation: PlaceholderSource | null;
     readonly onInsert: (name: string) => void;
+    readonly idPrefix?: string;
+    /** Placeholders the layout fills in, so a template that never uses them is fine. */
+    readonly isLayoutOwned?: (name: string) => boolean;
 }): ReactNode;
 export declare function ResourceSection({ resources, pdfTitles, canUpload, onUpload, onInsert, onRemove, }: {
     readonly resources: readonly LinkedResourceView[];

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

@@ -1,27 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @runtime client
 import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
-import { PLACEHOLDER_SYMBOL } from "./mail-draft.js";
+import { LAYOUT_OWNED_PLACEHOLDERS, PLACEHOLDER_SYMBOL, SYSTEM_PLACEHOLDER_TYPE, systemPlaceholderLabel, } from "./mail-draft.js";
 import { RailHint, RailRow, RailSection } from "./rail.js";
 function placeholderStatus(t, validation, name) {
-    if (validation.missingRequired.includes(name))
-        return t("documentDesigner.mail.placeholder.missing");
-    return validation.used.includes(name) ? "✓" : "–";
+    if (validation.missingRequired.includes(name)) {
+        return { text: t("documentDesigner.mail.placeholder.missing"), tone: "bad" };
+    }
+    return validation.used.includes(name) ? { text: "✓", tone: "ok" } : { text: "–", tone: "muted" };
 }
-export function PlaceholderSection({ validation, onInsert, }) {
+export function PlaceholderSection({ validation, onInsert, idPrefix = "mail", }) {
     const t = useTranslation();
     const entries = Object.entries(validation?.variables ?? {});
-    return (_jsxs(RailSection, { title: t("documentDesigner.mail.placeholder.title"), testId: "mail-editor-placeholders", children: [validation !== null &&
-                entries.map(([name, variable]) => (_jsx(RailRow, { testId: `mail-placeholder-${name}`, symbol: PLACEHOLDER_SYMBOL[variable.type], label: `${variable.label ?? name}${variable.required === true ? " *" : ""}`, bad: validation.missingRequired.includes(name), trailing: placeholderStatus(t, validation, name), onPress: () => onInsert(name) }, name))), _jsx(RailHint, { children: t("documentDesigner.mail.placeholder.hint") })] }));
-}
-function systemLabel(t, name) {
-    const key = `documentDesigner.placeholder.${name}`;
-    const translated = t(key);
-    return translated === key ? name : translated;
+    return (_jsxs(RailSection, { title: t("documentDesigner.mail.placeholder.title"), testId: `${idPrefix}-editor-placeholders`, children: [validation !== null &&
+                entries.map(([name, variable]) => {
+                    const status = placeholderStatus(t, validation, name);
+                    return (_jsx(RailRow, { testId: `${idPrefix}-placeholder-${name}`, symbol: PLACEHOLDER_SYMBOL[variable.type], label: variable.label ?? name, required: variable.required === true, bad: validation.missingRequired.includes(name), trailing: status.text, trailingTone: status.tone, onPress: () => onInsert(name) }, name));
+                }), _jsx(RailHint, { children: t("documentDesigner.mail.placeholder.hint") })] }));
 }
-export function SystemPlaceholderSection({ validation, onInsert, }) {
+export function SystemPlaceholderSection({ validation, onInsert, idPrefix = "mail", isLayoutOwned = (name) => LAYOUT_OWNED_PLACEHOLDERS.has(name), }) {
     const t = useTranslation();
-    return (_jsx(RailSection, { title: t("documentDesigner.mail.system.title"), testId: "mail-editor-system-placeholders", children: (validation?.systemPlaceholders ?? []).map((name) => (_jsx(RailRow, { testId: `mail-system-${name}`, label: systemLabel(t, name), trailing: validation?.used.includes(name) === true ? "✓" : "–", onPress: () => onInsert(name) }, name))) }));
+    return (_jsxs(RailSection, { title: t("documentDesigner.mail.system.title"), testId: `${idPrefix}-editor-system-placeholders`, children: [(validation?.systemPlaceholders ?? []).map((name) => {
+                const used = validation?.used.includes(name) === true;
+                const layoutOwned = !used && isLayoutOwned(name);
+                return (_jsx(RailRow, { testId: `${idPrefix}-system-${name}`, symbol: PLACEHOLDER_SYMBOL[SYSTEM_PLACEHOLDER_TYPE[name] ?? "text"], label: systemPlaceholderLabel(t, name), trailing: used ? "✓" : layoutOwned ? t("documentDesigner.mail.system.layout") : "–", trailingTone: used ? "ok" : "muted", onPress: () => onInsert(name) }, name));
+            }), _jsx(RailHint, { children: t("documentDesigner.mail.system.hint") })] }));
 }
 function resourceRow(t, resource, pdfTitles) {
     switch (resource.kind) {
@@ -48,6 +51,6 @@ export function ResourceSection({ resources, pdfTitles, canUpload, onUpload, onI
     const { Button } = usePrimitives();
     return (_jsxs(RailSection, { title: t("documentDesigner.mail.resource.title"), testId: "mail-editor-resources", action: _jsx(Button, { variant: "link", disabled: !canUpload, onClick: onUpload, testId: "mail-resource-upload-open", children: t("documentDesigner.mail.resource.upload") }), children: [!canUpload && _jsx(RailHint, { children: t("documentDesigner.mail.resource.saveFirst") }), resources.map((resource) => {
                 const row = resourceRow(t, resource, pdfTitles);
-                return (_jsxs("div", { className: "flex items-center gap-1", "data-testid": "mail-resource-row", children: [_jsx("div", { className: "min-w-0 grow", children: _jsx(RailRow, { symbol: row.symbol, label: row.label, trailing: row.meta, ...(resource.kind === "image" && { onPress: () => onInsert(resource.key) }) }) }), _jsx(Button, { variant: "danger-ghost", size: "sm", onClick: () => onRemove(resource.key), testId: `mail-resource-remove-${resource.key}`, children: t("documentDesigner.mail.resource.remove") })] }, resource.key));
+                return (_jsx(RailRow, { testId: "mail-resource-row", symbol: row.symbol, label: row.label, trailing: row.meta, action: _jsx(Button, { variant: "danger-ghost", size: "sm", onClick: () => onRemove(resource.key), testId: `mail-resource-remove-${resource.key}`, children: t("documentDesigner.mail.resource.remove") }), ...(resource.kind === "image" && { onPress: () => onInsert(resource.key) }) }, resource.key));
             }), _jsx(RailHint, { children: t("documentDesigner.mail.resource.hint") })] }));
 }

package/dist/web/mail-missing-locale.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+export declare function languageAdjective(t: (key: string, params?: Readonly<Record<string, unknown>>) => string, locale: string): string;
+export declare function MissingLocaleCanvas({ slug, locale, fallbackLocale, copyScope, onCreateBlank, onCopied, }: {
+    readonly slug: string;
+    readonly locale: string;
+    readonly fallbackLocale: string | null;
+    readonly copyScope: "tenant" | "system";
+    readonly onCreateBlank: () => void;
+    readonly onCopied: () => void;
+}): ReactNode;

package/dist/web/mail-missing-locale.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { TemplateResolverHandlers } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { dispatcherErrorText, useMutation, usePrimitives, useTranslation, } from "@cosmicdrift/kumiko-renderer";
+import { useState } from "react";
+import { languageName } from "./mail-origin-bar.js";
+export function languageAdjective(t, locale) {
+    const key = `documentDesigner.mail.languageAdjective.${locale}`;
+    const translated = t(key);
+    return translated === key ? locale : translated;
+}
+// Shown in place of the editor while a language has no version yet: nothing to edit, so no
+// subject line, toolbar or properties; the two ways to get a version sit right here.
+export function MissingLocaleCanvas({ slug, locale, fallbackLocale, copyScope, onCreateBlank, onCopied, }) {
+    const t = useTranslation();
+    const { Banner, Button } = usePrimitives();
+    const copyLocale = useMutation(TemplateResolverHandlers.copyLocale);
+    const [error, setError] = useState(null);
+    const copy = async (from) => {
+        setError(null);
+        const result = await copyLocale.mutate({
+            slug,
+            kind: "mail",
+            fromLocale: from,
+            toLocale: locale,
+            overwrite: false,
+            scope: copyScope,
+        });
+        if (result.isSuccess)
+            onCopied();
+        else
+            setError(dispatcherErrorText(result.error, t));
+    };
+    return (_jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center p-8", "data-testid": "mail-missing-locale", children: _jsxs("div", { className: "flex max-w-md flex-col items-center gap-4 text-center", children: [_jsx("p", { className: "m-0 text-base", children: fallbackLocale === null
+                        ? t("documentDesigner.mail.missing.textNoFallback", {
+                            language: languageName(t, locale),
+                        })
+                        : t("documentDesigner.mail.missing.text", {
+                            language: languageName(t, locale),
+                            locale,
+                            fallbackAdjective: languageAdjective(t, fallbackLocale),
+                        }) }), _jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [fallbackLocale !== null && (_jsx(Button, { variant: "primary", disabled: copyLocale.pending, onClick: () => copy(fallbackLocale), testId: "mail-copy-locale", children: t("documentDesigner.mail.missing.copy", {
+                                language: languageName(t, fallbackLocale),
+                            }) })), _jsx(Button, { variant: "secondary", onClick: onCreateBlank, testId: "mail-create-blank", children: t("documentDesigner.mail.origin.createBlank") })] }), fallbackLocale !== null && (_jsx("p", { className: "m-0 text-xs text-muted-foreground", children: t("documentDesigner.mail.origin.copyNote") })), error !== null && (_jsx(Banner, { variant: "error", testId: "mail-copy-error", children: error }))] }) }));
+}

package/dist/web/mail-origin-bar.d.ts

@@ -2,16 +2,14 @@ import { type ReactNode } from "react";
 import type { TemplateRowView } from "./mail-types.js";
 type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
 export declare function languageName(t: Translate, locale: string): string;
-export declare function MailOriginBar({ row, title, systemVersion, slug, locale, fallbackLocale, isSystemAdmin, creating, onCreateBlank, onReload, }: {
+export declare function MailOriginBar({ row, systemVersion, locale, isSystemAdmin, creating, controls, onReload, onResetError, }: {
     readonly row: TemplateRowView | null;
-    readonly title: string;
     readonly systemVersion: number | null;
-    readonly slug: string;
     readonly locale: string;
-    readonly fallbackLocale: string | null;
     readonly isSystemAdmin: boolean;
     readonly creating: boolean;
-    readonly onCreateBlank: () => void;
+    readonly controls: ReactNode;
     readonly onReload: () => void;
+    readonly onResetError: (message: string) => void;
 }): ReactNode;
 export {};

package/dist/web/mail-origin-bar.js

@@ -3,13 +3,19 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { TemplateResolverHandlers } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
 import { dispatcherErrorText, formatWhen, useMutation, usePrimitives, useTranslation, } from "@cosmicdrift/kumiko-renderer";
 import { useState } from "react";
-import { DiffPanel } from "./origin-bar.js";
+import { originOf } from "./editor-header.js";
+import { EditorInfoBar } from "./editor-shell.js";
+import { DiffDrawer } from "./origin-bar.js";
+import { draftBesideActiveSentence } from "./status-label.js";
 export function languageName(t, locale) {
     const key = `documentDesigner.mail.language.${locale}`;
     const translated = t(key);
     return translated === key ? locale : translated;
 }
 function statusSentence(t, row) {
+    const besideActive = draftBesideActiveSentence(t, row);
+    if (besideActive !== null)
+        return besideActive;
     if (row.status === "active") {
         return t("documentDesigner.mail.origin.activeSince", {
             when: row.modifiedAt === null ? "–" : formatWhen(row.modifiedAt),
@@ -19,66 +25,36 @@ function statusSentence(t, row) {
         ? "documentDesigner.mail.origin.archived"
         : "documentDesigner.mail.origin.notPublished");
 }
-const BAR_CLASS = "flex flex-wrap items-center gap-x-4 gap-y-2 rounded-md border px-4 py-2.5";
-function MissingLocaleBar({ slug, locale, fallbackLocale, copyScope, creating, onCreateBlank, onCopied, }) {
+function MissingLocaleBar({ locale, creating, controls, }) {
     const t = useTranslation();
-    const { Banner, Button, Text } = usePrimitives();
-    const copyLocale = useMutation(TemplateResolverHandlers.copyLocale);
-    const [error, setError] = useState(null);
-    if (creating) {
-        return (_jsx("div", { className: `${BAR_CLASS} bg-muted`, "data-testid": "mail-origin-bar", children: _jsx(Text, { children: t("documentDesigner.mail.origin.creating", { language: languageName(t, locale) }) }) }));
-    }
-    const copy = async (from) => {
-        setError(null);
-        const result = await copyLocale.mutate({
-            slug,
-            kind: "mail",
-            fromLocale: from,
-            toLocale: locale,
-            overwrite: false,
-            scope: copyScope,
-        });
-        if (result.isSuccess)
-            onCopied();
-        else
-            setError(dispatcherErrorText(result.error, t));
-    };
-    return (_jsxs("div", { className: `${BAR_CLASS} border-status-warn bg-status-warn-surface`, "data-testid": "mail-origin-bar", "data-variant": "warn", children: [_jsxs(Text, { children: [t(fallbackLocale === null
-                        ? "documentDesigner.mail.origin.missingNoFallback"
-                        : "documentDesigner.mail.origin.missing", {
-                        language: languageName(t, locale),
-                        locale,
-                        fallback: fallbackLocale ?? "",
-                    }), fallbackLocale !== null && ` ${t("documentDesigner.mail.origin.copyNote")}`] }), _jsx("div", { className: "grow" }), fallbackLocale !== null && (_jsx(Button, { size: "sm", variant: "secondary", loading: copyLocale.pending, onClick: () => copy(fallbackLocale), testId: "mail-copy-locale", children: t("documentDesigner.mail.origin.copyFrom", { fallback: fallbackLocale }) })), _jsx(Button, { size: "sm", variant: "secondary", onClick: onCreateBlank, testId: "mail-create-blank", children: t("documentDesigner.mail.origin.createBlank") }), error !== null && (_jsx(Banner, { variant: "error", testId: "mail-copy-error", children: error }))] }));
+    return creating ? (_jsx(EditorInfoBar, { tone: "muted", testId: "mail-origin-bar", controls: controls, children: t("documentDesigner.mail.origin.creating", { language: languageName(t, locale) }) })) : (_jsx(EditorInfoBar, { tone: "warn", testId: "mail-origin-bar", controls: controls, children: t("documentDesigner.mail.origin.missing", { language: languageName(t, locale) }) }));
 }
-function TenantOriginBar({ row, title, systemVersion, onReset, }) {
+function TenantOriginBar({ row, systemVersion, controls, onReset, onResetError, }) {
     const t = useTranslation();
-    const { Button, Dialog, Drawer, Modal, Text } = usePrimitives();
+    const { Button, Dialog } = usePrimitives();
     const [diffOpen, setDiffOpen] = useState(false);
     const [resetOpen, setResetOpen] = useState(false);
     const resetToSystem = useMutation(TemplateResolverHandlers.resetToSystem);
     const hasSystem = systemVersion !== null;
-    const diffTitle = t("documentDesigner.editor.diff.title");
-    const diffBody = _jsx(DiffPanel, { tenantId: row.id });
-    return (_jsxs("div", { className: `${BAR_CLASS} bg-muted`, "data-testid": "mail-origin-bar", children: [_jsxs(Text, { children: [hasSystem
-                        ? t("documentDesigner.mail.origin.overrides", { title, version: systemVersion })
-                        : t("documentDesigner.mail.origin.tenantOnly"), " ", statusSentence(t, row)] }), _jsx("div", { className: "grow" }), hasSystem && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "link", onClick: () => setDiffOpen(true), testId: "document-designer-diff-open", children: t("documentDesigner.editor.diff.open") }), _jsx(Button, { variant: "link", onClick: () => setResetOpen(true), testId: "document-designer-reset-open", children: t("documentDesigner.mail.origin.reset") })] })), diffOpen &&
-                (Drawer === undefined ? (_jsx(Modal, { open: true, onOpenChange: setDiffOpen, title: diffTitle, children: diffBody })) : (_jsx(Drawer, { open: true, onOpenChange: setDiffOpen, title: diffTitle, children: diffBody }))), _jsx(Dialog, { open: resetOpen, onOpenChange: setResetOpen, title: t("documentDesigner.mail.reset.title"), description: t("documentDesigner.mail.reset.description"), confirmLabel: t("documentDesigner.mail.reset.confirm"), variant: "danger", onConfirm: async () => {
-                    const result = await resetToSystem.mutate({ id: row.id });
-                    if (result.isSuccess)
-                        onReset();
-                } })] }));
+    return (_jsxs(EditorInfoBar, { tone: "active", testId: "mail-origin-bar", origin: originOf(false, hasSystem), controls: controls, overlays: _jsxs(_Fragment, { children: [diffOpen && _jsx(DiffDrawer, { tenantId: row.id, onClose: () => setDiffOpen(false) }), _jsx(Dialog, { open: resetOpen, onOpenChange: setResetOpen, title: t("documentDesigner.mail.reset.title"), description: t("documentDesigner.mail.reset.description"), confirmLabel: t("documentDesigner.mail.reset.confirm"), variant: "danger", onConfirm: async () => {
+                        const result = await resetToSystem.mutate({ id: row.id });
+                        if (result.isSuccess)
+                            onReset();
+                        else
+                            onResetError(dispatcherErrorText(result.error, t));
+                    } })] }), links: hasSystem && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "link", onClick: () => setDiffOpen(true), testId: "document-designer-diff-open", children: t("documentDesigner.editor.diff.open") }), _jsx(Button, { variant: "link", onClick: () => setResetOpen(true), testId: "document-designer-reset-open", children: t("documentDesigner.mail.origin.reset") })] })), children: [hasSystem
+                ? t("documentDesigner.mail.origin.overrides", { version: systemVersion })
+                : t("documentDesigner.mail.origin.tenantOnly"), " ", statusSentence(t, row)] }));
 }
-export function MailOriginBar({ row, title, systemVersion, slug, locale, fallbackLocale, isSystemAdmin, creating, onCreateBlank, onReload, }) {
+export function MailOriginBar({ row, systemVersion, locale, isSystemAdmin, creating, controls, onReload, onResetError, }) {
     const t = useTranslation();
-    const { Text } = usePrimitives();
     if (row === null) {
-        return (_jsx(MissingLocaleBar, { slug: slug, locale: locale, fallbackLocale: fallbackLocale, copyScope: isSystemAdmin ? "system" : "tenant", creating: creating, onCreateBlank: onCreateBlank, onCopied: onReload }));
+        return _jsx(MissingLocaleBar, { locale: locale, creating: creating, controls: controls });
     }
     if (row.scope === "tenant") {
-        return (_jsx(TenantOriginBar, { row: row, title: title, systemVersion: systemVersion, onReset: onReload }));
+        return (_jsx(TenantOriginBar, { row: row, systemVersion: systemVersion, controls: controls, onReset: onReload, onResetError: onResetError }));
     }
-    return (_jsx("div", { className: `${BAR_CLASS} bg-muted`, "data-testid": "mail-origin-bar", children: _jsx(Text, { children: t(isSystemAdmin
-                ? "documentDesigner.mail.origin.platform"
-                : "documentDesigner.mail.origin.system", { version: row.version }) }) }));
+    return (_jsx(EditorInfoBar, { tone: "muted", testId: "mail-origin-bar", origin: "system", controls: controls, children: t(isSystemAdmin
+            ? "documentDesigner.mail.origin.platform"
+            : "documentDesigner.mail.origin.system", { version: row.version }) }));
 }

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

@@ -1,12 +1,19 @@
 import { type ReactNode } from "react";
 import type { MailPreview, MailValidation } from "./mail-types.js";
-export declare function PreviewSide({ preview, validation, slug, locale, testMail, }: {
+import type { OwnAddress } from "./use-own-address.js";
+export type TestMailControls = {
+    readonly pending: boolean;
+    readonly onSend: () => void;
+    readonly includeAttachments: boolean;
+    readonly onIncludeAttachments: (next: boolean) => void;
+    readonly prefixSubject: boolean;
+    readonly onPrefixSubject: (next: boolean) => void;
+};
+export declare function PreviewSide({ preview, validation, slug, locale, own, testMail, }: {
     readonly preview: MailPreview | null;
     readonly validation: MailValidation | null;
     readonly slug: string;
     readonly locale: string;
-    readonly testMail: {
-        readonly pending: boolean;
-        readonly onSend: () => void;
-    };
+    readonly own: OwnAddress;
+    readonly testMail: TestMailControls;
 }): ReactNode;