@cosmicdrift/kumiko-document-designer 0.363.0 → 0.365.0

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;

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

@@ -1,10 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @runtime client
-import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { useNav, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { useState } from "react";
 import { displayValue } from "./mail-draft.js";
 import { usePreviewRecordPicker } from "./preview-record-picker.js";
-import { RailHint, RailRow, RailSection } from "./rail.js";
+import { RailField, RailHint, RailRow, RailSection } from "./rail.js";
+const noop = () => undefined;
 // Check params list names as arrays; the message templates expect one string.
 function checkText(t, check) {
     const params = Object.fromEntries(Object.entries(check.params ?? {}).map(([name, value]) => [
@@ -40,9 +41,17 @@ function RecordPickerLink({ slug, locale, onPick, }) {
                     },
                 }) })] }));
 }
-export function PreviewSide({ preview, validation, slug, locale, testMail, }) {
+function TestMailRecipient({ own }) {
     const t = useTranslation();
-    const { Button, Field, Text } = usePrimitives();
+    const nav = useNav();
+    const { Field, Input, Link } = usePrimitives();
+    const { profileScreenId } = own;
+    return (_jsxs(RailField, { children: [_jsx(Field, { id: "mail-test-recipient", label: t("documentDesigner.mail.testMail.recipient"), children: _jsx(Input, { kind: "text", id: "mail-test-recipient", name: "mail-test-recipient", testId: "mail-test-recipient", value: own.email ?? t("documentDesigner.mail.testMail.ownAddress"), onChange: noop, disabled: true }) }), profileScreenId !== null && (_jsx(Link, { href: nav.hrefFor({ screenId: profileScreenId }), onPress: () => nav.navigate({ screenId: profileScreenId }), testId: "mail-test-recipient-edit", children: t("documentDesigner.mail.testMail.changeAddress") }))] }));
+}
+export function PreviewSide({ preview, validation, slug, locale, own, testMail, }) {
+    const t = useTranslation();
+    const { Button, Field, Input, Text } = usePrimitives();
+    const hasAttachments = preview?.attachments.some((a) => a.kind !== "inline") === true;
     const [picked, setPicked] = useState(null);
-    return (_jsxs("div", { className: "flex flex-col", "data-testid": "mail-preview-side", children: [_jsxs(RailSection, { title: t("documentDesigner.mail.preview.samples"), action: _jsx(RecordPickerLink, { slug: slug, locale: locale, onPick: setPicked }), children: [_jsx(SampleValues, { preview: preview, validation: validation, picked: picked }), _jsx(RailHint, { children: t("documentDesigner.mail.preview.samplesHint") })] }), _jsxs(RailSection, { title: t("documentDesigner.mail.testMail.title"), children: [_jsxs("div", { className: "flex flex-col gap-2 px-2", children: [_jsx(Field, { id: "mail-test-recipient", label: t("documentDesigner.mail.testMail.recipient"), children: _jsx(Text, { children: t("documentDesigner.mail.testMail.ownAddress") }) }), _jsxs(Text, { variant: "muted", children: ["\u2713 ", t("documentDesigner.mail.testMail.prefix")] }), _jsxs(Text, { variant: "muted", children: ["\u2713 ", t("documentDesigner.mail.testMail.attachments")] }), _jsx(Button, { variant: "secondary", disabled: testMail.pending, loading: testMail.pending, onClick: testMail.onSend, testId: "mail-test-send", children: t("documentDesigner.mail.testMail.send") })] }), _jsx(RailHint, { children: t("documentDesigner.mail.testMail.hint") })] }), _jsx(RailSection, { title: t("documentDesigner.mail.preview.checks"), testId: "mail-preview-checks", children: (preview?.checks ?? []).map((check) => (_jsx(RailRow, { testId: `mail-check-${check.code}`, symbol: check.ok ? "✓" : "!", label: checkText(t, check), bad: !check.ok }, check.code))) })] }));
+    return (_jsxs("div", { "data-testid": "mail-preview-side", children: [_jsxs(RailSection, { title: t("documentDesigner.mail.preview.samples"), action: _jsx(RecordPickerLink, { slug: slug, locale: locale, onPick: setPicked }), children: [_jsx(SampleValues, { preview: preview, validation: validation, picked: picked }), _jsx(RailHint, { children: t("documentDesigner.mail.preview.samplesHint") })] }), _jsxs(RailSection, { title: t("documentDesigner.mail.testMail.title"), children: [_jsx(TestMailRecipient, { own: own }), _jsxs(RailField, { children: [_jsx(Field, { id: "mail-test-prefix", label: t("documentDesigner.mail.testMail.prefixSubject"), layout: "inline", children: _jsx(Input, { kind: "boolean", id: "mail-test-prefix", name: "mail-test-prefix", value: testMail.prefixSubject, onChange: testMail.onPrefixSubject }) }), hasAttachments ? (_jsx(Field, { id: "mail-test-attachments", label: t("documentDesigner.mail.testMail.attachments"), layout: "inline", children: _jsx(Input, { kind: "boolean", id: "mail-test-attachments", name: "mail-test-attachments", value: testMail.includeAttachments, onChange: testMail.onIncludeAttachments }) })) : (_jsx(Text, { variant: "muted", testId: "mail-test-no-attachments", children: t("documentDesigner.mail.testMail.noAttachments") })), _jsx(Button, { variant: "secondary", width: "full", disabled: testMail.pending, loading: testMail.pending, onClick: testMail.onSend, testId: "mail-test-send", children: t("documentDesigner.mail.testMail.send") })] }), _jsx(RailHint, { children: t("documentDesigner.mail.testMail.hint") })] }), _jsxs(RailSection, { title: t("documentDesigner.mail.preview.checks"), testId: "mail-preview-checks", children: [(preview?.checks ?? []).map((check) => (_jsx(RailRow, { testId: `mail-check-${check.code}`, symbol: check.ok ? "✓" : "!", label: checkText(t, check), bad: !check.ok }, check.code))), _jsx(RailHint, { children: t("documentDesigner.mail.preview.checksHint") })] })] }));
 }

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

@@ -1,5 +1,8 @@
 import { type ReactNode } from "react";
+import type { EditorOrigin } from "./editor-header.js";
+import { type TestMailControls } from "./mail-preview-side.js";
 import type { MailValidation } from "./mail-types.js";
+import type { OwnAddress } from "./use-own-address.js";
 export type PreviewPayload = {
     readonly slug: string;
     readonly kind: "mail";
@@ -8,13 +11,14 @@ export type PreviewPayload = {
     readonly meta: Readonly<Record<string, unknown>>;
     readonly variableSchema: unknown;
 };
-export declare function MailPreviewMode({ payload, validation, slug, locale, testMail, }: {
+export declare function MailPreviewMode({ payload, validation, slug, locale, fromName, own, controls, origin, testMail, }: {
     readonly payload: PreviewPayload;
     readonly validation: MailValidation | null;
     readonly slug: string;
     readonly locale: string;
-    readonly testMail: {
-        readonly pending: boolean;
-        readonly onSend: () => void;
-    };
+    readonly fromName: string;
+    readonly own: OwnAddress;
+    readonly controls: ReactNode;
+    readonly origin: EditorOrigin | null;
+    readonly testMail: TestMailControls;
 }): ReactNode;

package/dist/web/mail-preview.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @runtime client
 import { TemplateResolverQueries } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
 import { dispatcherErrorText, usePrimitives, useQuery, useTranslation, } from "@cosmicdrift/kumiko-renderer";
 import { LoadingState, ModeSwitch } from "@cosmicdrift/kumiko-renderer-web";
 import { useState } from "react";
+import { EditorBody, EditorInfoBar } from "./editor-shell.js";
 import { formatKilobytes } from "./mail-draft.js";
 import { PreviewSide } from "./mail-preview-side.js";
 function attachmentText(t, attachment) {
@@ -16,28 +17,38 @@ function attachmentText(t, attachment) {
             return `⎘ ${attachment.name} · ${t("documentDesigner.mail.preview.generatedOnSend")}`;
     }
 }
-function MailFrame({ preview, format, width, }) {
+function HeadRow({ label, children, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsx("span", { className: "min-w-0", children: children })] }));
+}
+function MailFrame({ preview, format, width, fromName, recipient, }) {
     const t = useTranslation();
     const attachments = preview.attachments.flatMap((a) => attachmentText(t, a) ?? []);
-    return (_jsxs("div", { className: "flex flex-col overflow-hidden rounded-md border", "data-testid": "mail-preview-frame", children: [_jsxs("div", { className: "flex flex-col gap-1 border-b bg-muted px-4 py-3 text-sm", children: [_jsxs("div", { className: "flex gap-3", children: [_jsx("span", { className: "w-16 shrink-0 text-muted-foreground", children: t("documentDesigner.mail.meta.subject") }), _jsx("span", { className: "font-medium", "data-testid": "mail-preview-subject", children: preview.subject ?? "" })] }), attachments.length > 0 && (_jsxs("div", { className: "flex gap-3", children: [_jsx("span", { className: "w-16 shrink-0 text-muted-foreground", children: t("documentDesigner.mail.preview.attachments") }), _jsx("span", { className: "flex flex-col", "data-testid": "mail-preview-attachments", children: attachments.map((line) => (_jsx("span", { children: line }, line))) })] }))] }), format === "html" ? (_jsx("iframe", { title: t("documentDesigner.mail.preview.frameTitle"), sandbox: "", srcDoc: preview.displayHtml ?? preview.html, className: `h-[560px] border-0 bg-background ${width === "mobile" ? "w-[375px] self-center" : "w-full"}`, "data-testid": "mail-preview-iframe" })) : (_jsx("pre", { className: "h-[560px] overflow-auto whitespace-pre-wrap p-4 font-mono text-sm", "data-testid": "mail-preview-text", children: preview.text ?? "" }))] }));
+    return (_jsxs("div", { className: "mx-auto flex w-full max-w-[680px] flex-col border bg-card shadow-md", "data-testid": "mail-preview-frame", children: [_jsxs("div", { className: "grid grid-cols-[80px_minmax(0,1fr)] gap-y-1 border-b px-5 py-3.5 text-sm", children: [_jsx(HeadRow, { label: t("documentDesigner.mail.preview.from"), children: _jsx("span", { "data-testid": "mail-preview-from", children: fromName === "" ? t("documentDesigner.mail.props.senderDefault") : fromName }) }), recipient !== null && (_jsx(HeadRow, { label: t("documentDesigner.mail.preview.to"), children: _jsx("span", { "data-testid": "mail-preview-to", children: recipient }) })), _jsx(HeadRow, { label: t("documentDesigner.mail.meta.subject"), children: _jsx("span", { className: "font-medium", "data-testid": "mail-preview-subject", children: preview.subject ?? "" }) }), attachments.length > 0 && (_jsx(HeadRow, { label: t("documentDesigner.mail.preview.attachments"), children: _jsx("span", { className: "flex flex-col items-start gap-1", "data-testid": "mail-preview-attachments", children: attachments.map((line) => (_jsx("span", { className: "rounded border bg-muted px-2 py-0.5 text-xs", children: line }, line))) }) }))] }), format === "html" ? (_jsx("iframe", { title: t("documentDesigner.mail.preview.frameTitle"), sandbox: "", srcDoc: preview.displayHtml ?? preview.html, className: `h-[560px] border-0 bg-background ${width === "mobile" ? "w-[375px] self-center" : "w-full"}`, "data-testid": "mail-preview-iframe" })) : (_jsx("pre", { className: "h-[560px] overflow-auto whitespace-pre-wrap p-4 font-mono text-sm", "data-testid": "mail-preview-text", children: preview.text ?? "" }))] }));
+}
+// The preview mail goes to the example recipient of the sample values, not to the test-mail address.
+function recipientOf(preview, own) {
+    const { recipientName: name, recipientEmail: email } = preview.sampleValues;
+    if (typeof name !== "string" || name === "")
+        return own.email;
+    return typeof email === "string" && email !== "" ? `${name} <${email}>` : name;
 }
 function layoutText(t, preview) {
-    return preview?.layout == null
+    return preview?.mailLayout == null
         ? t("documentDesigner.mail.preview.barPlain")
-        : t("documentDesigner.mail.preview.bar", { layout: preview.layout.slug });
+        : t("documentDesigner.mail.preview.bar", { version: preview.mailLayout.version });
 }
-export function MailPreviewMode({ payload, validation, slug, locale, testMail, }) {
+export function MailPreviewMode({ payload, validation, slug, locale, fromName, own, controls, origin, testMail, }) {
     const t = useTranslation();
     const { Banner } = usePrimitives();
     const [format, setFormat] = useState("html");
     const [width, setWidth] = useState("desktop");
     const query = useQuery(TemplateResolverQueries.preview, payload);
     const preview = query.data;
-    return (_jsxs("div", { className: "flex flex-col gap-3", "data-testid": "mail-editor-preview", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2 rounded-md border bg-muted px-4 py-2.5", children: [_jsx("span", { className: "text-sm", "data-testid": "mail-preview-bar", children: layoutText(t, preview) }), _jsx("div", { className: "grow" }), _jsx(ModeSwitch, { value: format, onChange: setFormat, ariaLabel: t("documentDesigner.mail.preview.formatSwitch"), testId: "mail-preview-format", options: [
-                            { value: "html", label: t("documentDesigner.mail.preview.html") },
-                            { value: "text", label: t("documentDesigner.mail.preview.text") },
-                        ] }), _jsx(ModeSwitch, { value: width, onChange: setWidth, ariaLabel: t("documentDesigner.mail.preview.widthSwitch"), testId: "mail-preview-width", options: [
-                            { value: "desktop", label: t("documentDesigner.mail.preview.desktop") },
-                            { value: "mobile", label: t("documentDesigner.mail.preview.mobile") },
-                        ] })] }), _jsxs("div", { className: "grid items-start gap-4 lg:grid-cols-[minmax(0,1fr)_300px]", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-3", children: [query.error !== null && (_jsx(Banner, { variant: "error", testId: "mail-preview-error", children: dispatcherErrorText(query.error, t) })), preview === null ? (query.error === null && _jsx(LoadingState, {})) : (_jsx(MailFrame, { preview: preview, format: format, width: width }))] }), _jsx(PreviewSide, { preview: preview, validation: validation, slug: slug, locale: locale, testMail: testMail })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(EditorInfoBar, { tone: "muted", testId: "mail-preview-bar", origin: origin, controls: controls, links: _jsxs(_Fragment, { children: [_jsx(ModeSwitch, { value: format, onChange: setFormat, ariaLabel: t("documentDesigner.mail.preview.formatSwitch"), testId: "mail-preview-format", options: [
+                                { value: "html", label: t("documentDesigner.mail.preview.html") },
+                                { value: "text", label: t("documentDesigner.mail.preview.text") },
+                            ] }), _jsx(ModeSwitch, { value: width, onChange: setWidth, ariaLabel: t("documentDesigner.mail.preview.widthSwitch"), testId: "mail-preview-width", options: [
+                                { value: "desktop", label: t("documentDesigner.mail.preview.desktop") },
+                                { value: "mobile", label: t("documentDesigner.mail.preview.mobile") },
+                            ] })] }), children: layoutText(t, preview) }), _jsx(EditorBody, { testId: "mail-editor-preview", center: _jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-3 overflow-auto px-8 py-6", children: [query.error !== null && (_jsx(Banner, { variant: "error", testId: "mail-preview-error", children: dispatcherErrorText(query.error, t) })), preview === null ? (query.error === null && _jsx(LoadingState, {})) : (_jsx(MailFrame, { preview: preview, format: format, width: width, fromName: fromName, recipient: recipientOf(preview, own) }))] }), right: _jsx(PreviewSide, { preview: preview, validation: validation, slug: slug, locale: locale, own: own, testMail: testMail }) })] }));
 }

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

@@ -1,6 +1,8 @@
 import type { ReactNode } from "react";
+import type { EditorVocabulary } from "./mail-edit-center.js";
 import type { LinkedResourceView, MailDraft } from "./mail-types.js";
 import type { OverviewRowView } from "./overview-row.js";
+import type { InsertTargets } from "./use-insert-targets.js";
 export declare function layoutOptionLabel(t: (key: string, params?: Readonly<Record<string, unknown>>) => string, layout: OverviewRowView): string;
 export declare function AttachmentSection({ attachments, pdfTitles, canEdit, onAddPdf, onRemove, }: {
     readonly attachments: readonly LinkedResourceView[];
@@ -14,6 +16,12 @@ export declare function PropertiesSection({ draft, layouts, onChange, }: {
     readonly layouts: readonly OverviewRowView[];
     readonly onChange: (patch: Partial<MailDraft>) => void;
 }): ReactNode;
+export declare function ChromeSection({ draft, vocabulary, insert, onChange, }: {
+    readonly draft: MailDraft;
+    readonly vocabulary: EditorVocabulary;
+    readonly insert: InsertTargets;
+    readonly onChange: (patch: Partial<MailDraft>) => void;
+}): ReactNode;
 export declare function UsageSection({ slug }: {
     readonly slug: string;
 }): ReactNode;

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

@@ -1,14 +1,33 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @runtime client
-import { TemplateResolverQueries } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { MAIL_TONES, PlaceholderLineEditor, TemplateResolverQueries, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
 import { usePrimitives, useQuery, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { isOneOf } from "@cosmicdrift/kumiko-types/type-guards";
 import { DEFAULT_LAYOUT_SLUG } from "../constants.js";
-import { RailHint, RailRow, RailSection } from "./rail.js";
+import { RailField, RailHint, RailRow, RailSection } from "./rail.js";
 import { usageParts } from "./used-by-label.js";
 export function layoutOptionLabel(t, layout) {
+    // A layout has no registry title; the slug would read like an id, so name it by kind.
+    const title = layout.title === layout.slug
+        ? t(`documentDesigner.editor.title.${layout.kind === "mail-layout" ? "mail" : "pdf"}`)
+        : layout.title;
     return t(layout.origin === "tenant"
         ? "documentDesigner.mail.props.layoutTenant"
-        : "documentDesigner.mail.props.layoutSystem", { title: layout.title, version: layout.version });
+        : "documentDesigner.mail.props.layoutSystem", { title, version: layout.version });
+}
+// Without a stored default layout the renderer uses its built-in one, so the
+// select still needs an option for the value it shows.
+function layoutOptions(t, layouts) {
+    const stored = layouts.map((layout) => ({
+        value: layout.slug,
+        label: layoutOptionLabel(t, layout),
+    }));
+    return layouts.some((layout) => layout.slug === DEFAULT_LAYOUT_SLUG)
+        ? stored
+        : [
+            { value: DEFAULT_LAYOUT_SLUG, label: t("documentDesigner.mail.props.layoutBuiltIn") },
+            ...stored,
+        ];
 }
 function UsageRows({ slug }) {
     const t = useTranslation();
@@ -24,22 +43,54 @@ function UsageRows({ slug }) {
 export function AttachmentSection({ attachments, pdfTitles, canEdit, onAddPdf, onRemove, }) {
     const t = useTranslation();
     const { Button } = usePrimitives();
-    return (_jsxs(RailSection, { title: t("documentDesigner.mail.attachments.title"), testId: "mail-editor-attachments", action: _jsx(Button, { variant: "link", disabled: !canEdit, onClick: onAddPdf, testId: "mail-attachment-pdf-open", children: t("documentDesigner.mail.attachments.addPdf") }), children: [attachments.length === 0 && (_jsx(RailHint, { children: t("documentDesigner.mail.attachments.none") })), attachments.map((attachment) => (_jsxs("div", { className: "flex items-center gap-1", "data-testid": "mail-attachment-row", children: [_jsx("div", { className: "min-w-0 grow", children: attachment.kind === "pdf" ? (_jsx(RailRow, { symbol: "\u2398", label: t("documentDesigner.mail.attachments.pdfRow", {
-                                title: pdfTitles.get(attachment.templateSlug) ?? attachment.templateSlug,
-                            }), trailing: attachment.fileName })) : (_jsx(RailRow, { symbol: "\u2398", label: attachment.kind === "file" ? attachment.fileName : attachment.key, trailing: t("documentDesigner.mail.attachments.file") })) }), _jsx(Button, { variant: "danger-ghost", size: "sm", onClick: () => onRemove(attachment.key), testId: `mail-attachment-remove-${attachment.key}`, children: t("documentDesigner.mail.resource.remove") })] }, attachment.key)))] }));
+    return (_jsxs(RailSection, { title: t("documentDesigner.mail.attachments.title"), testId: "mail-editor-attachments", action: _jsx(Button, { variant: "link", disabled: !canEdit, onClick: onAddPdf, testId: "mail-attachment-pdf-open", children: t("documentDesigner.mail.attachments.addPdf") }), children: [attachments.length === 0 && _jsx(RailRow, { label: t("documentDesigner.mail.attachments.none") }), attachments.map((attachment) => (_jsx(RailRow, { testId: "mail-attachment-row", symbol: "\u2398", label: attachment.kind === "pdf"
+                    ? t("documentDesigner.mail.attachments.pdfRow", {
+                        title: pdfTitles.get(attachment.templateSlug) ?? attachment.templateSlug,
+                    })
+                    : attachment.kind === "file"
+                        ? attachment.fileName
+                        : attachment.key, trailing: attachment.kind === "pdf"
+                    ? attachment.fileName
+                    : t("documentDesigner.mail.attachments.file"), action: _jsx(Button, { variant: "danger-ghost", size: "sm", onClick: () => onRemove(attachment.key), testId: `mail-attachment-remove-${attachment.key}`, children: t("documentDesigner.mail.resource.remove") }) }, attachment.key))), _jsx(RailHint, { children: t("documentDesigner.mail.attachments.hint") })] }));
 }
 export function PropertiesSection({ draft, layouts, onChange, }) {
     const t = useTranslation();
-    const { Field, Input, Text } = usePrimitives();
+    const { Field, Input } = usePrimitives();
     const layoutValue = draft.layoutSlug === "" ? DEFAULT_LAYOUT_SLUG : draft.layoutSlug;
     const categoryValue = draft.category === "" ? "transactional" : draft.category;
-    return (_jsxs(RailSection, { title: t("documentDesigner.mail.props.title"), testId: "mail-editor-properties", children: [_jsxs("div", { className: "flex flex-col gap-3 px-2", children: [_jsx(Field, { id: "mail-layout", label: t("documentDesigner.mail.props.layout"), children: _jsx(Input, { kind: "select", id: "mail-layout", name: "mail-layout", value: layoutValue, onChange: (next) => onChange({ layoutSlug: next }), options: layouts.map((layout) => ({
-                                value: layout.slug,
-                                label: layoutOptionLabel(t, layout),
-                            })) }) }), _jsx(Field, { id: "mail-sender", label: t("documentDesigner.mail.props.sender"), children: _jsx(Text, { testId: "mail-sender", children: t("documentDesigner.mail.props.senderDefault") }) }), _jsx(Field, { id: "mail-category", label: t("documentDesigner.mail.props.category"), children: _jsx(Input, { kind: "select", id: "mail-category", name: "mail-category", value: categoryValue, onChange: (next) => onChange({ category: next === "marketing" ? "marketing" : "transactional" }), options: [
-                                { value: "transactional", label: t("documentDesigner.mail.props.transactional") },
-                                { value: "marketing", label: t("documentDesigner.mail.props.marketing") },
-                            ] }) })] }), _jsx(RailHint, { children: t("documentDesigner.mail.props.categoryHint") })] }));
+    return (_jsxs(RailSection, { title: t("documentDesigner.mail.props.title"), testId: "mail-editor-properties", children: [_jsx(RailField, { children: _jsx(Field, { id: "mail-layout", label: t("documentDesigner.mail.props.layout"), children: _jsx(Input, { kind: "select", id: "mail-layout", name: "mail-layout", value: layoutValue, display: "dropdown", onChange: (next) => onChange({ layoutSlug: next }), options: layoutOptions(t, layouts) }) }) }), _jsx(RailField, { children: _jsx(Field, { id: "mail-sender", label: t("documentDesigner.mail.props.sender"), children: _jsx(Input, { kind: "text", id: "mail-sender", name: "mail-sender", testId: "mail-sender", value: draft.senderName, onChange: (next) => onChange({ senderName: next }), placeholder: t("documentDesigner.mail.props.senderPlaceholder") }) }) }), _jsx(RailHint, { children: t("documentDesigner.mail.props.senderHint") }), _jsx(RailField, { children: _jsx(Field, { id: "mail-reply-to", label: t("documentDesigner.mail.props.replyTo"), children: _jsx(Input, { kind: "email", id: "mail-reply-to", name: "mail-reply-to", testId: "mail-reply-to", value: draft.replyTo, onChange: (next) => onChange({ replyTo: next }) }) }) }), _jsx(RailField, { children: _jsx(Field, { id: "mail-category", label: t("documentDesigner.mail.props.category"), children: _jsx(Input, { kind: "select", id: "mail-category", name: "mail-category", value: categoryValue, display: "dropdown", onChange: (next) => onChange({ category: next === "marketing" ? "marketing" : "transactional" }), options: [
+                            { value: "transactional", label: t("documentDesigner.mail.props.transactional") },
+                            { value: "marketing", label: t("documentDesigner.mail.props.marketing") },
+                        ] }) }) }), _jsx(RailHint, { children: t("documentDesigner.mail.props.categoryHint") })] }));
+}
+const TONE_LABEL_KEYS = {
+    accent: "documentDesigner.mail.chrome.toneAccent",
+    info: "documentDesigner.mail.chrome.toneInfo",
+    success: "documentDesigner.mail.chrome.toneSuccess",
+    warning: "documentDesigner.mail.chrome.toneWarning",
+    danger: "documentDesigner.mail.chrome.toneDanger",
+    neutral: "documentDesigner.mail.chrome.toneNeutral",
+};
+// The stored tone may be a placeholder that resolves per mail; the select keeps it as its own
+// option so opening the template never silently drops it.
+function toneOptions(t, current) {
+    const fixed = MAIL_TONES.map((tone) => ({ value: tone, label: t(TONE_LABEL_KEYS[tone]) }));
+    return current === "" || isOneOf(MAIL_TONES, current)
+        ? fixed
+        : [
+            ...fixed,
+            {
+                value: current,
+                label: t("documentDesigner.mail.chrome.toneFromPlaceholder", { value: current }),
+            },
+        ];
+}
+export function ChromeSection({ draft, vocabulary, insert, onChange, }) {
+    const t = useTranslation();
+    const { Field, Input } = usePrimitives();
+    // "accent" is the renderer default, so it is stored as an empty value.
+    const toneValue = draft.tone === "" ? "accent" : draft.tone;
+    return (_jsxs(RailSection, { title: t("documentDesigner.mail.chrome.title"), testId: "mail-editor-chrome", children: [_jsx(RailField, { children: _jsx(Field, { id: "mail-header-chip", label: t("documentDesigner.mail.chrome.headerChip"), children: _jsx("div", { onFocusCapture: insert.markFocused("headerChip"), "data-testid": "mail-header-chip", children: _jsx(PlaceholderLineEditor, { id: "mail-header-chip", value: draft.headerChip, onChange: (headerChip) => onChange({ headerChip }), variableLabels: vocabulary.labels, systemVariables: vocabulary.system, placeholder: t("documentDesigner.mail.chrome.headerChipPlaceholder"), onEditorReady: insert.register("headerChip"), "aria-label": t("documentDesigner.mail.chrome.headerChip") }) }) }) }), _jsx(RailField, { children: _jsx(Field, { id: "mail-tone", label: t("documentDesigner.mail.chrome.tone"), children: _jsx(Input, { kind: "select", id: "mail-tone", name: "mail-tone", value: toneValue, display: "dropdown", onChange: (next) => onChange({ tone: next === "accent" ? "" : next }), options: toneOptions(t, draft.tone) }) }) }), _jsx(RailField, { children: _jsx(Field, { id: "mail-footer-note", label: t("documentDesigner.mail.chrome.footerNote"), children: _jsx("div", { onFocusCapture: insert.markFocused("footerNote"), "data-testid": "mail-footer-note", children: _jsx(PlaceholderLineEditor, { id: "mail-footer-note", value: draft.footerNote, onChange: (footerNote) => onChange({ footerNote }), variableLabels: vocabulary.labels, systemVariables: vocabulary.system, placeholder: t("documentDesigner.mail.chrome.footerNotePlaceholder"), onEditorReady: insert.register("footerNote"), "aria-label": t("documentDesigner.mail.chrome.footerNote") }) }) }) }), _jsx(RailHint, { children: t("documentDesigner.mail.chrome.hint") })] }));
 }
 export function UsageSection({ slug }) {
     const t = useTranslation();

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

@@ -1,4 +1,5 @@
 import type { ValidationIssue } from "./layout-types.js";
+import type { ServedVersionView } from "./types.js";
 export type PlaceholderType = "text" | "money" | "date" | "link" | "list";
 export type MailVariable = {
     readonly type: PlaceholderType;
@@ -52,9 +53,10 @@ export type MailPreview = {
     readonly displayHtml?: string;
     readonly text: string | null;
     readonly attachments: readonly PreviewAttachment[];
-    readonly layout: {
+    readonly mailLayout?: {
         readonly slug: string;
         readonly scope: string;
+        readonly version: number;
     } | null;
     readonly sampleValues: Readonly<Record<string, unknown>>;
     readonly checks: readonly PreviewCheck[];
@@ -80,6 +82,7 @@ export type TemplateRowView = {
     readonly linkedResources: unknown;
     readonly meta: unknown;
     readonly modifiedAt: string | null;
+    readonly active?: ServedVersionView | null;
 };
 export type MailCategory = "" | "transactional" | "marketing";
 export type MailDraft = {
@@ -87,6 +90,12 @@ export type MailDraft = {
     readonly previewText: string;
     readonly layoutSlug: string;
     readonly category: MailCategory;
+    readonly senderName: string;
+    readonly replyTo: string;
+    /** Meta lines without rail fields yet; carried so a tenant save keeps them. */
+    readonly headerChip: string;
+    readonly tone: string;
+    readonly footerNote: string;
     readonly body: string;
 };
 export type LinkedResourceView = {

package/dist/web/mail-upload-modal.js

@@ -2,7 +2,7 @@ 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 { useRef, useState } from "react";
 import { fetchStoredFileName } from "./file-name.js";
 import { uniqueResourceKey } from "./mail-draft.js";
 const IMAGE_ACCEPT = ["image/png", "image/jpeg", "image/gif", "image/webp"];
@@ -11,6 +11,12 @@ function useResourceUpload(target) {
     const resourceUpload = useMutation(TemplateResolverHandlers.resourceUpload);
     const [error, setError] = useState(null);
     const [busy, setBusy] = useState(false);
+    // takenKeys only refreshes after the fire-and-forget row refetch, so keys handed out
+    // here must be remembered or a quick second upload of the same file name collides.
+    const uploadedKeys = useRef({
+        templateId: target.templateId,
+        keys: new Set(),
+    });
     const upload = async (fileRefId, purpose) => {
         if (fileRefId === null)
             return;
@@ -22,7 +28,10 @@ function useResourceUpload(target) {
                 setError(t("documentDesigner.mail.upload.noFileName"));
                 return;
             }
-            const key = uniqueResourceKey(fileName, target.takenKeys);
+            if (uploadedKeys.current.templateId !== target.templateId) {
+                uploadedKeys.current = { templateId: target.templateId, keys: new Set() };
+            }
+            const key = uniqueResourceKey(fileName, [...target.takenKeys, ...uploadedKeys.current.keys]);
             const result = await resourceUpload.mutate({
                 sourceFileRefId: fileRefId,
                 templateId: target.templateId,
@@ -34,6 +43,7 @@ function useResourceUpload(target) {
                 setError(dispatcherErrorText(result.error, t));
                 return;
             }
+            uploadedKeys.current.keys.add(key);
             target.onUploaded({ key, purpose });
         }
         finally {

package/dist/web/mail-versions.js

@@ -1,8 +1,8 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @runtime client
 import { formatWhen, useAppFeatures, useQuery, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { StatusBadge } from "@cosmicdrift/kumiko-renderer-web";
-import { RailRow, RailSection } from "./rail.js";
+import { RailHint, RailRow, RailSection } from "./rail.js";
 import { asRowStatus, statusLabel, statusTone } from "./status-label.js";
 const AUDIT_FEATURE = "audit";
 const AUDIT_LIST_QUERY = "audit:query:list";
@@ -39,5 +39,5 @@ export function VersionsSection({ rowId, currentVersion, currentStatus, }) {
     if (rowId === null || !features.some((feature) => feature.featureName === AUDIT_FEATURE)) {
         return null;
     }
-    return (_jsx(RailSection, { title: t("documentDesigner.mail.versions.title"), testId: "mail-editor-versions", children: _jsx(VersionRows, { rowId: rowId, currentVersion: currentVersion, currentStatus: currentStatus }) }));
+    return (_jsxs(RailSection, { title: t("documentDesigner.mail.versions.title"), testId: "mail-editor-versions", children: [_jsx(VersionRows, { rowId: rowId, currentVersion: currentVersion, currentStatus: currentStatus }), _jsx(RailHint, { children: t("documentDesigner.mail.versions.hint") })] }));
 }

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

@@ -1,13 +1,22 @@
 import { type ReactNode } from "react";
-import type { LayoutKind, LayoutSourceView, TenantOverrideCounts } from "./layout-types.js";
+import type { LayoutKind, LayoutSourceView, TemplateDiff, TenantOverrideCounts } from "./layout-types.js";
+export declare function DiffView({ data, mode, }: {
+    readonly data: TemplateDiff;
+    readonly mode?: "diff" | "full";
+}): ReactNode;
 export declare function DiffPanel({ tenantId }: {
     readonly tenantId: string;
 }): ReactNode;
-export declare function OriginBar({ isSystemAdmin, source, kind, userCount, overrides, onReset, }: {
+export declare function DiffDrawer({ tenantId, onClose, }: {
+    readonly tenantId: string;
+    readonly onClose: () => void;
+}): ReactNode;
+export declare function OriginBar({ isSystemAdmin, source, kind, userCount, overrides, onReset, onResetError, }: {
     readonly isSystemAdmin: boolean;
     readonly source: LayoutSourceView;
     readonly kind: LayoutKind;
     readonly userCount: number;
     readonly overrides: TenantOverrideCounts | null;
     readonly onReset: () => void;
+    readonly onResetError: (message: string) => void;
 }): ReactNode;

package/dist/web/origin-bar.js

@@ -1,9 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @runtime client
 import { TemplateResolverHandlers, TemplateResolverQueries, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
-import { useMutation, usePrimitives, useQuery, useTranslation } from "@cosmicdrift/kumiko-renderer";
-import { EmptyState, LoadingState } from "@cosmicdrift/kumiko-renderer-web";
+import { dispatcherErrorText, useMutation, usePrimitives, useQuery, useTranslation, } from "@cosmicdrift/kumiko-renderer";
+import { EmptyState, ErrorState, LoadingState } from "@cosmicdrift/kumiko-renderer-web";
 import { useState } from "react";
+import { originOf } from "./editor-header.js";
+import { EditorInfoBar } from "./editor-shell.js";
+import { draftBesideActiveSentence } from "./status-label.js";
 const DIFF_MARK = {
     same: " ",
     added: "+",
@@ -19,18 +22,36 @@ function metaValueText(value) {
         return "–";
     return typeof value === "string" ? value : JSON.stringify(value);
 }
-export function DiffPanel({ tenantId }) {
+// "full" shows the tenant's version as it reads (everything but the removed system blocks).
+export function DiffView({ data, mode = "diff", }) {
     const t = useTranslation();
-    const { data, loading } = useQuery(TemplateResolverQueries.diffToSystem, {
-        id: tenantId,
-    });
-    if (loading || data === null)
-        return _jsx(LoadingState, {});
-    if (data.identical)
+    if (mode === "diff" && data.identical) {
         return _jsx(EmptyState, { title: t("documentDesigner.editor.diff.identical") });
+    }
     // Diff blocks have no identity beyond their position.
-    const entries = data.blocks.map((block, position) => ({ block, key: `block-${position}` }));
-    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("ul", { className: "flex flex-col gap-1", "data-testid": "document-designer-diff", children: entries.map(({ block, key }) => (_jsxs("li", { "data-change": block.change, className: `whitespace-pre-wrap rounded px-2 py-1 font-mono text-xs ${DIFF_TONE[block.change]}`, children: [DIFF_MARK[block.change], " ", block.content] }, key))) }), data.meta.length > 0 && (_jsx("ul", { className: "flex flex-col gap-1", "data-testid": "document-designer-diff-meta", children: data.meta.map((entry) => (_jsxs("li", { className: "rounded bg-muted px-2 py-1 font-mono text-xs", children: [entry.key, ": ", metaValueText(entry.system), " \u2192 ", metaValueText(entry.tenant)] }, entry.key))) }))] }));
+    const entries = data.blocks
+        .map((block, position) => ({ block, key: `block-${position}` }))
+        .filter(({ block }) => mode === "diff" || block.change !== "removed");
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("ul", { className: "flex flex-col gap-1", "data-testid": "document-designer-diff", children: entries.map(({ block, key }) => (_jsxs("li", { "data-change": block.change, className: `whitespace-pre-wrap rounded px-2 py-1 font-mono text-xs ${DIFF_TONE[block.change]}`, children: [mode === "diff" && `${DIFF_MARK[block.change]} `, block.content] }, key))) }), mode === "diff" && data.meta.length > 0 && (_jsx("ul", { className: "flex flex-col gap-1", "data-testid": "document-designer-diff-meta", children: data.meta.map((entry) => (_jsxs("li", { className: "rounded bg-muted px-2 py-1 font-mono text-xs", children: [entry.key, ": ", metaValueText(entry.system), " \u2192 ", metaValueText(entry.tenant)] }, entry.key))) }))] }));
+}
+export function DiffPanel({ tenantId }) {
+    const { data, loading, error, refetch } = useQuery(TemplateResolverQueries.diffToSystem, { id: tenantId });
+    if (error !== null)
+        return _jsx(ErrorState, { error: error, onRetry: () => void refetch() });
+    if (loading || data === null)
+        return _jsx(LoadingState, {});
+    return _jsx(DiffView, { data: data });
+}
+export function DiffDrawer({ tenantId, onClose, }) {
+    const t = useTranslation();
+    const { Drawer, Modal } = usePrimitives();
+    const title = t("documentDesigner.editor.diff.title");
+    const body = _jsx(DiffPanel, { tenantId: tenantId });
+    const onOpenChange = (open) => {
+        if (!open)
+            onClose();
+    };
+    return Drawer === undefined ? (_jsx(Modal, { open: true, onOpenChange: onOpenChange, title: title, children: body })) : (_jsx(Drawer, { open: true, onOpenChange: onOpenChange, title: title, children: body }));
 }
 function originText(t, args) {
     const { isSystemAdmin, source, kind, userCount, overrides } = args;
@@ -60,23 +81,24 @@ function originText(t, args) {
         ? t("documentDesigner.editor.origin.none")
         : t("documentDesigner.editor.origin.system");
 }
-export function OriginBar({ isSystemAdmin, source, kind, userCount, overrides, onReset, }) {
+export function OriginBar({ isSystemAdmin, source, kind, userCount, overrides, 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 { tenant, system } = source;
+    const besideActive = isSystemAdmin || tenant === null ? null : draftBesideActiveSentence(t, tenant);
     const canDiff = tenant !== null && system?.contentFormat === "html";
     const canReset = tenant !== null && system !== null && !isSystemAdmin;
-    const diffTitle = t("documentDesigner.editor.diff.title");
-    const diffBody = tenant === null ? null : _jsx(DiffPanel, { tenantId: tenant.id });
-    return (_jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2 rounded-md border bg-muted px-4 py-2.5", "data-testid": "document-designer-origin-bar", children: [_jsx(Text, { children: originText(t, { isSystemAdmin, source, kind, userCount, overrides }) }), _jsx("div", { className: "grow" }), canDiff && (_jsx(Button, { variant: "link", onClick: () => setDiffOpen(true), testId: "document-designer-diff-open", children: t("documentDesigner.editor.diff.open") })), canReset && (_jsx(Button, { variant: "link", onClick: () => setResetOpen(true), testId: "document-designer-reset-open", children: t("documentDesigner.editor.reset.open") })), 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.editor.reset.title"), description: t("documentDesigner.editor.reset.description"), confirmLabel: t("documentDesigner.editor.reset.confirm"), variant: "danger", onConfirm: async () => {
-                    if (tenant === null)
-                        return;
-                    const result = await resetToSystem.mutate({ id: tenant.id });
-                    if (result.isSuccess)
-                        onReset();
-                } })] }));
+    const links = (_jsxs(_Fragment, { children: [canDiff && (_jsx(Button, { variant: "link", onClick: () => setDiffOpen(true), testId: "document-designer-diff-open", children: t("documentDesigner.editor.diff.open") })), canReset && (_jsx(Button, { variant: "link", onClick: () => setResetOpen(true), testId: "document-designer-reset-open", children: t("documentDesigner.editor.reset.open") }))] }));
+    return (_jsxs(EditorInfoBar, { tone: tenant !== null ? "active" : "muted", testId: "document-designer-origin-bar", origin: originOf(tenant === null, system !== null), links: links, overlays: _jsxs(_Fragment, { children: [diffOpen && tenant !== null && (_jsx(DiffDrawer, { tenantId: tenant.id, onClose: () => setDiffOpen(false) })), _jsx(Dialog, { open: resetOpen, onOpenChange: setResetOpen, title: t("documentDesigner.editor.reset.title"), description: t("documentDesigner.editor.reset.description"), confirmLabel: t("documentDesigner.editor.reset.confirm"), variant: "danger", onConfirm: async () => {
+                        if (tenant === null)
+                            return;
+                        const result = await resetToSystem.mutate({ id: tenant.id });
+                        if (result.isSuccess)
+                            onReset();
+                        else
+                            onResetError(dispatcherErrorText(result.error, t));
+                    } })] }), children: [originText(t, { isSystemAdmin, source, kind, userCount, overrides }), besideActive !== null && ` ${besideActive}`] }));
 }

package/dist/web/overrides-drawer.d.ts

@@ -1,9 +1,10 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 import { type TenantOverrides } from "./types.js";
 export type OverridesDrawerProps = {
     readonly open: boolean;
     readonly onOpenChange: (open: boolean) => void;
     readonly slug: string;
+    readonly locale: string;
     readonly overrides: TenantOverrides | null;
 };
-export declare function OverridesDrawer({ open, onOpenChange, slug, overrides, }: OverridesDrawerProps): ReactNode;
+export declare function OverridesDrawer({ open, onOpenChange, slug, locale, overrides, }: OverridesDrawerProps): ReactNode;