@cosmicdrift/kumiko-document-designer 0.363.0 → 0.364.0

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.js

@@ -3,12 +3,16 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { TemplateResolverQueries } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
 import { usePrimitives, useQuery, useTranslation } from "@cosmicdrift/kumiko-renderer";
 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 });
 }
 function UsageRows({ slug }) {
     const t = useTranslation();
@@ -24,22 +28,28 @@ 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: layouts.map((layout) => ({
+                            value: layout.slug,
+                            label: layoutOptionLabel(t, layout),
+                        })) }) }) }), _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") })] }));
 }
 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,8 @@ export type MailDraft = {
     readonly previewText: string;
     readonly layoutSlug: string;
     readonly category: MailCategory;
+    readonly senderName: string;
+    readonly replyTo: string;
     readonly body: string;
 };
 export type LinkedResourceView = {

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;

package/dist/web/overrides-drawer.js

@@ -1,19 +1,95 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @runtime client
 import { TemplateResolverQueries } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
-import { useQuery, useTranslation } from "@cosmicdrift/kumiko-renderer";
-import { Drawer } from "@cosmicdrift/kumiko-renderer-web";
-import { DOCUMENT_PDF_KIND } from "./types.js";
-function BreakdownRow({ label, value }) {
-    return (_jsxs("li", { className: "flex items-center justify-between gap-4 text-sm", children: [_jsx("span", { children: label }), _jsx("span", { className: "tabular-nums", children: value })] }));
+import { formatWhen, usePrimitives, useQuery, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { Drawer, EmptyState, LoadingState } from "@cosmicdrift/kumiko-renderer-web";
+import { useMemo, useState } from "react";
+import { DiffView } from "./origin-bar.js";
+import { DOCUMENT_PDF_KIND, } from "./types.js";
+const DRAWER_WIDTH = 960;
+function TenantDetail({ slug, locale, view, onBack, }) {
+    const t = useTranslation();
+    const { Button } = usePrimitives();
+    const detail = useQuery(TemplateResolverQueries.tenantOverrides, {
+        slug,
+        kind: DOCUMENT_PDF_KIND,
+        locale,
+        diffTenantId: view.row.tenantId,
+    });
+    return (_jsxs("div", { className: "flex flex-col gap-3", "data-testid": "document-designer-overrides-detail", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("h3", { className: "m-0 text-sm font-semibold", children: t("documentDesigner.overrides.detail.version", {
+                            tenant: view.row.tenantName,
+                            version: view.row.version,
+                        }) }), _jsx(Button, { variant: "link", onClick: onBack, testId: "document-designer-overrides-back", children: t("documentDesigner.overrides.back") })] }), detail.data?.diff == null ? (_jsx(LoadingState, {})) : (_jsx(DiffView, { data: detail.data.diff, mode: view.mode }))] }));
 }
-export function OverridesDrawer({ open, onOpenChange, slug, overrides, }) {
+export function OverridesDrawer({ open, onOpenChange, slug, locale, overrides, }) {
     const t = useTranslation();
+    const { DataTable } = usePrimitives();
+    const [view, setView] = useState(null);
     // Only asked while the drawer is open; the answer is not needed for the editor itself.
     const usage = useQuery(TemplateResolverQueries.usage, { slug, kind: DOCUMENT_PDF_KIND }, { enabled: open });
-    const active = overrides?.activeOverrides ?? 0;
-    const draft = overrides?.draftOverrides ?? 0;
-    const total = overrides?.totalTenants ?? null;
     const usedBy = usage.data?.usedBy ?? [];
-    return (_jsx(Drawer, { open: open, onOpenChange: onOpenChange, title: t("documentDesigner.overrides.title"), testId: "document-designer-overrides-drawer", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("section", { className: "flex flex-col gap-2", children: _jsxs("ul", { className: "m-0 flex list-none flex-col gap-1 p-0", children: [_jsx(BreakdownRow, { label: t("documentDesigner.overrides.active"), value: active }), _jsx(BreakdownRow, { label: t("documentDesigner.overrides.draftOnly"), value: draft }), total !== null && (_jsx(BreakdownRow, { label: t("documentDesigner.overrides.none"), value: Math.max(0, total - active - draft) })), total !== null && (_jsx(BreakdownRow, { label: t("documentDesigner.overrides.total"), value: total }))] }) }), _jsxs("section", { className: "flex flex-col gap-2", children: [_jsx("h3", { className: "m-0 text-sm font-semibold", children: t("documentDesigner.overrides.usedBy") }), usedBy.length === 0 ? (_jsx("p", { className: "m-0 text-sm text-muted-foreground", children: t("documentDesigner.overrides.usedByEmpty") })) : (_jsx("ul", { className: "m-0 flex list-none flex-col gap-1 p-0 font-mono text-xs", children: usedBy.map((entry) => (_jsx("li", { children: entry.qualifiedName }, `${entry.qualifiedName}:${entry.role}`))) }))] })] }) }));
+    const tenantRows = overrides?.rows ?? [];
+    const columns = useMemo(() => [
+        {
+            field: "tenantName",
+            label: t("documentDesigner.overrides.column.tenant"),
+            type: "text",
+            sortable: false,
+        },
+        {
+            field: "status",
+            label: t("documentDesigner.overrides.column.status"),
+            type: "select",
+            sortable: false,
+            optionLabels: {
+                active: t("documentDesigner.overrides.status.active"),
+                draft: t("documentDesigner.overrides.status.draft"),
+            },
+            optionTones: { active: "ok", draft: "warn" },
+        },
+        {
+            field: "versionLabel",
+            label: t("documentDesigner.overrides.column.version"),
+            type: "text",
+            sortable: false,
+        },
+        {
+            field: "changed",
+            label: t("documentDesigner.overrides.column.changed"),
+            type: "text",
+            sortable: false,
+        },
+    ], [t]);
+    const rows = useMemo(() => tenantRows.map((row) => ({
+        id: row.tenantId,
+        values: {
+            tenantName: row.tenantName,
+            status: row.status,
+            versionLabel: `v${row.version}`,
+            changed: formatWhen(row.changedAt),
+        },
+    })), [tenantRows]);
+    const openRow = (row, mode) => {
+        const found = tenantRows.find((candidate) => candidate.tenantId === row.id);
+        if (found !== undefined)
+            setView({ row: found, mode });
+    };
+    return (_jsx(Drawer, { open: open, onOpenChange: (next) => {
+            if (!next)
+                setView(null);
+            onOpenChange(next);
+        }, title: t("documentDesigner.overrides.title"), width: DRAWER_WIDTH, testId: "document-designer-overrides-drawer", children: _jsx("div", { className: "flex flex-col gap-5", children: view !== null ? (_jsx(TenantDetail, { slug: slug, locale: locale, view: view, onBack: () => setView(null) })) : (_jsxs(_Fragment, { children: [tenantRows.length > 0 && (_jsx("p", { className: "m-0 text-sm text-muted-foreground", "data-testid": "overrides-summary", children: t("documentDesigner.overrides.summary", { count: tenantRows.length }) })), tenantRows.length === 0 ? (_jsx(EmptyState, { title: t("documentDesigner.overrides.empty") })) : (_jsx(DataTable, { columns: columns, rows: rows, rowActionMode: "inline", rowActions: [
+                            {
+                                id: "diff",
+                                label: t("documentDesigner.overrides.action.diff"),
+                                style: "secondary",
+                                onTrigger: (row) => openRow(row, "diff"),
+                            },
+                            {
+                                id: "open",
+                                label: t("documentDesigner.overrides.action.open"),
+                                style: "secondary",
+                                onTrigger: (row) => openRow(row, "full"),
+                            },
+                        ], testId: "document-designer-overrides-table" })), _jsxs("section", { className: "flex flex-col gap-2", children: [_jsx("h3", { className: "m-0 text-sm font-semibold", children: t("documentDesigner.overrides.usedBy") }), usedBy.length === 0 ? (_jsx("p", { className: "m-0 text-sm text-muted-foreground", children: t("documentDesigner.overrides.usedByEmpty") })) : (_jsx("ul", { className: "m-0 flex list-none flex-col gap-1 p-0 font-mono text-xs", children: usedBy.map((entry) => (_jsx("li", { children: entry.qualifiedName }, `${entry.qualifiedName}:${entry.role}`))) }))] })] })) }) }));
 }

package/dist/web/overview-row.d.ts

@@ -13,6 +13,8 @@ export type OverviewRowView = {
     readonly locales: readonly string[];
     readonly status: "draft" | "active" | "archived";
     readonly version: number;
+    /** An open draft beside the served version, never another tenant's. */
+    readonly draftVersion: number | null;
     readonly systemVersion: number | null;
     readonly modifiedAt: string;
     readonly usedBy: readonly OverviewUsageView[];

package/dist/web/overview-row.js

@@ -21,7 +21,7 @@ function usageViewOf(value) {
 const stringOr = (value, fallback) => typeof value === "string" ? value : fallback;
 const numberOr = (value, fallback) => typeof value === "number" ? value : fallback;
 export function parseOverviewRow(row) {
-    const { id, title, layoutSlug, slug, kind, origin, locales, status, version, systemVersion, modifiedAt, usedBy, usedByCount, } = row;
+    const { id, title, layoutSlug, slug, kind, origin, locales, status, version, draftVersion, systemVersion, modifiedAt, usedBy, usedByCount, } = row;
     if (typeof slug !== "string" || !isTemplateKind(kind) || !isStatus(status))
         return null;
     if (origin !== "tenant" && origin !== "system")
@@ -39,6 +39,7 @@ export function parseOverviewRow(row) {
             : [],
         status,
         version: numberOr(version, 0),
+        draftVersion: numberOr(draftVersion, null),
         systemVersion: numberOr(systemVersion, null),
         modifiedAt: stringOr(modifiedAt, ""),
         usedBy: usages,

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

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