@cosmicdrift/kumiko-document-designer 0.363.0 → 0.365.0

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

@@ -1,18 +1,28 @@
 import type { ReactNode } from "react";
-import type { LayoutKind, LayoutValidation } from "./layout-types.js";
+import { type LayoutAppearance } from "./layout-meta.js";
+import type { BrandingView, LayoutKind, LayoutValidation } from "./layout-types.js";
 import type { OverviewRowView } from "./overview-row.js";
-export declare function BrandingRail(): ReactNode;
+export declare function BrandingRail({ data, unavailable, }: {
+    readonly data: BrandingView | null;
+    readonly unavailable: boolean;
+}): ReactNode;
 export declare function PlaceholderRail({ validation, }: {
     readonly validation: LayoutValidation | null;
 }): ReactNode;
-export declare function AppearanceRail({ kind }: {
+export declare function RendererRail({ kind }: {
     readonly kind: LayoutKind;
 }): ReactNode;
+export declare function AppearanceRail({ appearance, onChange, fromMjml, }: {
+    readonly appearance: LayoutAppearance;
+    readonly onChange: (next: LayoutAppearance) => void;
+    /** An mjml layout brings its own look, so the controls would have no effect. */
+    readonly fromMjml: boolean;
+}): ReactNode;
 export declare function UsedByRail({ layoutSlug, kind, rows, }: {
     readonly layoutSlug: string;
     readonly kind: LayoutKind;
     readonly rows: readonly OverviewRowView[];
 }): ReactNode;
-export declare function MjmlPreviewRail({ mjmlSource }: {
-    readonly mjmlSource: string;
+export declare function MjmlSourceRail({ mjmlSource }: {
+    readonly mjmlSource: string | null;
 }): ReactNode;

package/dist/web/layout-rails.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @runtime client
-import { useAppFeatures, useNav, usePrimitives, useQuery, useTranslation, } from "@cosmicdrift/kumiko-renderer";
-import { DetailList, EmptyState, SectionCard } from "@cosmicdrift/kumiko-renderer-web";
-import { BRANDING_QUERY_QN, BRANDING_SCREEN_QN } from "../constants.js";
+import { useAppFeatures, useNav, usePrimitives, useTranslation, } from "@cosmicdrift/kumiko-renderer";
+import { BRANDING_SCREEN_QN } from "../constants.js";
+import { isHexColor, LAYOUT_ACCENT_LINES, LAYOUT_BUTTON_STYLES, LAYOUT_FONTS, LAYOUT_WIDTHS, } from "./layout-meta.js";
 import { layoutUsers } from "./layout-users.js";
+import { PLACEHOLDER_SYMBOL, SYSTEM_PLACEHOLDER_TYPE, systemPlaceholderLabel, } from "./mail-draft.js";
+import { RailField, RailHint, RailRow, RailSection } from "./rail.js";
 import { statusLabel } from "./status-label.js";
-const NOT_SET_MARK = "–";
-const HEX_COLOR = /^#[0-9a-f]{3,8}$/i;
 const BRANDING_SCREEN_SHORT_ID = BRANDING_SCREEN_QN.slice(BRANDING_SCREEN_QN.lastIndexOf(":") + 1);
 function logoName(logoUrl) {
     const path = logoUrl.split("?")[0] ?? "";
@@ -15,93 +15,86 @@ function logoName(logoUrl) {
 function hostOf(siteUrl) {
     return siteUrl.replace(/^https?:\/\//, "").replace(/\/$/, "");
 }
-function BrandingSwatch({ color }) {
-    if (!HEX_COLOR.test(color))
-        return color;
-    return (_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx("span", { "data-testid": "document-designer-accent-swatch", className: "inline-block size-3.5 rounded-sm border", style: { backgroundColor: color } }), _jsx("span", { className: "font-mono text-xs", children: color })] }));
+// The color is user data, so it goes into a style attribute instead of a class.
+function ColorSwatch({ color }) {
+    return (_jsx("span", { "data-testid": "document-designer-accent-swatch", className: "inline-block size-3.5 shrink-0 rounded-sm border", style: { backgroundColor: color } }));
 }
-export function BrandingRail() {
+export function BrandingRail({ data, unavailable, }) {
     const t = useTranslation();
     const nav = useNav();
     const features = useAppFeatures();
-    const { Link, Text } = usePrimitives();
-    const { data, loading, error } = useQuery(BRANDING_QUERY_QN, {});
+    const { Link } = usePrimitives();
     const hasBrandingScreen = features.some((feature) => feature.featureName === "managed-pages" &&
         feature.screens.some((screen) => screen.id === BRANDING_SCREEN_SHORT_ID));
     const notSet = t("documentDesigner.branding.notSet");
+    const value = (text) => text === undefined || text === "" ? notSet : text;
     const editLink = hasBrandingScreen ? (_jsx(Link, { href: nav.hrefFor({ screenId: BRANDING_SCREEN_SHORT_ID }), onPress: () => nav.navigate({ screenId: BRANDING_SCREEN_SHORT_ID }), testId: "document-designer-branding-edit", children: t("documentDesigner.branding.edit") })) : undefined;
-    if (error !== null || (data === null && !loading)) {
-        return (_jsx(SectionCard, { title: t("documentDesigner.branding.title"), testId: "document-designer-branding", children: _jsx(EmptyState, { title: t("documentDesigner.branding.unavailable") }) }));
+    if (unavailable) {
+        return (_jsx(RailSection, { title: t("documentDesigner.branding.title"), testId: "document-designer-branding", children: _jsx(RailHint, { children: t("documentDesigner.branding.unavailable") }) }));
     }
-    const value = (text) => text === undefined || text === "" ? notSet : text;
+    const accent = data?.accentColor ?? "";
     const logo = data?.logoUrl !== undefined && data.logoUrl !== ""
         ? logoName(data.logoUrl)
         : data?.logoFile !== undefined && data.logoFile !== ""
             ? t("documentDesigner.branding.logoUploaded")
             : notSet;
-    return (_jsxs(SectionCard, { title: t("documentDesigner.branding.title"), action: editLink, testId: "document-designer-branding", children: [_jsx(DetailList, { rows: [
-                    { label: t("documentDesigner.branding.productName"), value: value(data?.title) },
-                    {
-                        label: t("documentDesigner.branding.accentColor"),
-                        value: data?.accentColor === undefined || data.accentColor === "" ? (notSet) : (_jsx(BrandingSwatch, { color: data.accentColor })),
-                    },
-                    { label: t("documentDesigner.branding.logo"), value: logo },
-                    {
-                        label: t("documentDesigner.branding.website"),
-                        value: data?.siteUrl === undefined || data.siteUrl === "" ? notSet : hostOf(data.siteUrl),
-                    },
-                ] }), _jsx(Text, { variant: "muted", children: t("documentDesigner.branding.hint") })] }));
+    return (_jsxs(RailSection, { title: t("documentDesigner.branding.title"), action: editLink, testId: "document-designer-branding", children: [_jsx(RailRow, { label: t("documentDesigner.branding.productName"), trailing: value(data?.title) }), _jsx(RailRow, { label: t("documentDesigner.branding.accentColor"), trailing: isHexColor(accent) ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(ColorSwatch, { color: accent }), _jsx("code", { children: accent })] })) : (value(accent)) }), _jsx(RailRow, { label: t("documentDesigner.branding.logo"), trailing: logo }), _jsx(RailRow, { label: t("documentDesigner.branding.website"), trailing: data?.siteUrl === undefined || data.siteUrl === "" ? notSet : hostOf(data.siteUrl) }), _jsx(RailHint, { children: t("documentDesigner.branding.hint") })] }));
 }
 export function PlaceholderRail({ validation, }) {
     const t = useTranslation();
     const used = new Set(validation?.used ?? []);
-    const placeholderLabel = (name) => {
-        const key = `documentDesigner.placeholder.${name}`;
-        const label = t(key);
-        return label === key ? name : label;
-    };
-    return (_jsx(SectionCard, { title: t("documentDesigner.layoutPlaceholders.title"), testId: "document-designer-placeholders", children: _jsx(DetailList, { rows: [
-                {
-                    label: `${t("documentDesigner.placeholders.content")} *`,
-                    value: "✓",
-                },
-                ...(validation?.systemPlaceholders ?? []).map((name) => ({
-                    id: `placeholder-${name}`,
-                    label: placeholderLabel(name),
-                    value: used.has(name) ? "✓" : NOT_SET_MARK,
-                })),
-            ] }) }));
+    return (_jsxs(RailSection, { title: t("documentDesigner.layoutPlaceholders.title"), testId: "document-designer-placeholders", children: [_jsx(RailRow, { symbol: "\u229E", label: t("documentDesigner.placeholders.content"), required: true, trailing: "\u2713", trailingTone: "ok" }), (validation?.systemPlaceholders ?? []).map((name) => (_jsx(RailRow, { testId: `document-designer-placeholder-${name}`, symbol: PLACEHOLDER_SYMBOL[SYSTEM_PLACEHOLDER_TYPE[name] ?? "text"], label: systemPlaceholderLabel(t, name), trailing: used.has(name) ? "✓" : "–", trailingTone: used.has(name) ? "ok" : "muted" }, name)))] }));
+}
+// Both renderers always run for their kind; the rows say which one produces the output.
+export function RendererRail({ kind }) {
+    const t = useTranslation();
+    return (_jsx(RailSection, { title: t("documentDesigner.renderer.title"), testId: "document-designer-renderer", children: _jsx(RailRow, { label: t(kind === "mail-layout"
+                ? "documentDesigner.renderer.mjml"
+                : "documentDesigner.renderer.chromium"), trailing: t("documentDesigner.renderer.active"), trailingTone: "ok" }) }));
 }
-export function AppearanceRail({ kind }) {
+export function AppearanceRail({ appearance, onChange, fromMjml, }) {
     const t = useTranslation();
-    const { Text } = usePrimitives();
-    const rows = kind === "mail-layout"
-        ? [
-            { label: t("documentDesigner.appearance.width"), value: "600 px" },
-            {
-                label: t("documentDesigner.appearance.font"),
-                value: t("documentDesigner.appearance.systemFont"),
-            },
-            {
-                label: t("documentDesigner.appearance.background"),
-                value: t("documentDesigner.appearance.backgroundValue"),
-            },
-        ]
-        : [{ label: t("documentDesigner.appearance.pageFormat"), value: "A4" }];
-    return (_jsxs(SectionCard, { title: t("documentDesigner.appearance.title"), testId: "document-designer-appearance", children: [_jsx(DetailList, { rows: rows }), _jsx(Text, { variant: "muted", children: t("documentDesigner.appearance.hint") })] }));
+    const { Field, Input } = usePrimitives();
+    const patch = (changes) => onChange({ ...appearance, ...changes });
+    const backgroundInvalid = !isHexColor(appearance.outerBackground);
+    return (_jsxs(RailSection, { title: t("documentDesigner.appearance.title"), testId: "document-designer-appearance", children: [fromMjml ? (_jsx(RailHint, { children: t("documentDesigner.appearance.fromMjml") })) : (_jsxs(RailField, { children: [_jsx(Field, { id: "dd-layout-width", label: t("documentDesigner.appearance.width"), children: _jsx(Input, { kind: "select", id: "dd-layout-width", name: "width", value: String(appearance.width), onChange: (value) => {
+                                const width = LAYOUT_WIDTHS.find((candidate) => String(candidate) === value);
+                                if (width !== undefined)
+                                    patch({ width });
+                            }, display: "dropdown", options: LAYOUT_WIDTHS.map((width) => ({
+                                value: String(width),
+                                label: `${width} px`,
+                            })) }) }), _jsx(Field, { id: "dd-layout-font", label: t("documentDesigner.appearance.font"), children: _jsx(Input, { kind: "select", id: "dd-layout-font", name: "font", value: appearance.font, onChange: (value) => {
+                                const font = LAYOUT_FONTS.find((candidate) => candidate === value);
+                                if (font !== undefined)
+                                    patch({ font });
+                            }, display: "dropdown", options: LAYOUT_FONTS.map((font) => ({
+                                value: font,
+                                label: t(`documentDesigner.appearance.font.${font}`),
+                            })) }) }), _jsxs(Field, { id: "dd-layout-background", label: t("documentDesigner.appearance.background"), children: [_jsxs("div", { className: "flex items-center gap-2", children: [!backgroundInvalid && _jsx(ColorSwatch, { color: appearance.outerBackground }), _jsx(Input, { kind: "text", id: "dd-layout-background", name: "outerBackground", value: appearance.outerBackground, onChange: (outerBackground) => patch({ outerBackground }), hasError: backgroundInvalid })] }), backgroundInvalid && (_jsx("p", { role: "alert", className: "text-xs text-status-bad", children: t("documentDesigner.appearance.backgroundInvalid") }))] }), _jsx(Field, { id: "dd-layout-accent", label: t("documentDesigner.appearance.accentLine"), children: _jsx(Input, { kind: "select", id: "dd-layout-accent", name: "accentLine", value: appearance.accentLine, onChange: (value) => {
+                                const accentLine = LAYOUT_ACCENT_LINES.find((candidate) => candidate === value);
+                                if (accentLine !== undefined)
+                                    patch({ accentLine });
+                            }, display: "dropdown", options: LAYOUT_ACCENT_LINES.map((accentLine) => ({
+                                value: accentLine,
+                                label: t(`documentDesigner.appearance.accentLine.${accentLine}`),
+                            })) }) }), _jsx(Field, { id: "dd-layout-button", label: t("documentDesigner.appearance.buttonStyle"), children: _jsx(Input, { kind: "select", id: "dd-layout-button", name: "buttonStyle", value: appearance.buttonStyle, onChange: (value) => {
+                                const buttonStyle = LAYOUT_BUTTON_STYLES.find((candidate) => candidate === value);
+                                if (buttonStyle !== undefined)
+                                    patch({ buttonStyle });
+                            }, display: "dropdown", options: LAYOUT_BUTTON_STYLES.map((buttonStyle) => ({
+                                value: buttonStyle,
+                                label: t(`documentDesigner.appearance.buttonStyle.${buttonStyle}`),
+                            })) }) })] })), !fromMjml && _jsx(RailHint, { children: t("documentDesigner.appearance.fontHint") })] }));
 }
 export function UsedByRail({ layoutSlug, kind, rows, }) {
     const t = useTranslation();
     const users = layoutUsers(rows, kind, layoutSlug);
-    return (_jsx(SectionCard, { title: t("documentDesigner.usedBy.title"), testId: "document-designer-used-by", children: users.length === 0 ? (_jsx(EmptyState, { title: t("documentDesigner.usedBy.none") })) : (_jsx(DetailList, { rows: users.map((row) => ({
-                id: `used-by-${row.id}`,
-                label: row.title,
-                value: row.origin === "system"
-                    ? t("documentDesigner.source.system")
-                    : statusLabel(t, row.status, row.version),
-            })) })) }));
+    return (_jsx(RailSection, { title: t("documentDesigner.usedBy.title"), testId: "document-designer-used-by", children: users.length === 0 ? (_jsx(RailHint, { children: t("documentDesigner.usedBy.none") })) : (users.map((row) => (_jsx(RailRow, { testId: `used-by-${row.id}`, label: row.title, trailing: row.origin === "system"
+                ? t("documentDesigner.source.system")
+                : statusLabel(t, row.status, row.version) }, row.id)))) }));
 }
-export function MjmlPreviewRail({ mjmlSource }) {
+export function MjmlSourceRail({ mjmlSource }) {
     const t = useTranslation();
-    return (_jsx(SectionCard, { title: t("documentDesigner.mjml.title"), testId: "document-designer-mjml-preview", children: _jsx("pre", { className: "max-h-56 overflow-auto whitespace-pre-wrap rounded-md bg-muted p-3 font-mono text-xs", children: mjmlSource }) }));
+    return (_jsxs(RailSection, { title: t("documentDesigner.mjml.title"), testId: "document-designer-mjml-preview", children: [mjmlSource !== null && (_jsx("pre", { className: "mx-3.5 mt-1 mb-2 max-h-56 overflow-auto whitespace-pre rounded-sm border bg-muted p-2.5 font-mono text-xs text-muted-foreground", children: mjmlSource })), _jsx(RailHint, { children: t("documentDesigner.mjml.hint") })] }));
 }

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

@@ -1,3 +1,5 @@
+import type { LayoutMeta } from "./layout-meta.js";
+import type { ServedVersionView } from "./types.js";
 export type LayoutKind = "mail-layout" | "pdf-layout";
 export type ValidationIssue = {
     readonly path: string;
@@ -45,6 +47,7 @@ export type LayoutSourceRow = {
     readonly version: number;
     readonly status: string;
     readonly locale: string;
+    readonly active?: ServedVersionView | null;
 };
 export type LayoutSourceView = {
     readonly tenant: LayoutSourceRow | null;
@@ -58,5 +61,6 @@ export type LayoutSourceView = {
     };
     readonly effectiveFormat: "html" | "mjml" | null;
     readonly mjmlSource: string | null;
+    readonly meta: LayoutMeta;
     readonly locale: string;
 };

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

@@ -1,3 +1,4 @@
 import type { LayoutKind } from "./layout-types.js";
 import type { OverviewRowView } from "./overview-row.js";
+export declare function layoutUserKind(kind: LayoutKind): "mail" | "document-pdf";
 export declare function layoutUsers(rows: readonly OverviewRowView[], kind: LayoutKind, layoutSlug: string): readonly OverviewRowView[];

package/dist/web/layout-users.js

@@ -1,8 +1,11 @@
 // @runtime client
 import { DEFAULT_LAYOUT_SLUG } from "../constants.js";
+export function layoutUserKind(kind) {
+    return kind === "mail-layout" ? "mail" : "document-pdf";
+}
 // Templates whose content is wrapped by this layout. A template without an explicit
 // layoutSlug uses the default layout.
 export function layoutUsers(rows, kind, layoutSlug) {
-    const documentKind = kind === "mail-layout" ? "mail" : "document-pdf";
+    const documentKind = layoutUserKind(kind);
     return rows.filter((row) => row.kind === documentKind && (row.layoutSlug ?? DEFAULT_LAYOUT_SLUG) === layoutSlug);
 }

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

@@ -2,15 +2,11 @@ import type { ReactNode } from "react";
 export type LeaveTarget = {
     readonly kind: "locale";
     readonly locale: string;
-} | {
-    readonly kind: "back";
 };
 export type ConfirmDialog = {
     readonly kind: "none";
 } | {
     readonly kind: "discard";
-} | {
-    readonly kind: "activeSave";
 } | {
     readonly kind: "remove";
     readonly key: string;
@@ -18,11 +14,10 @@ export type ConfirmDialog = {
     readonly kind: "leave";
     readonly target: LeaveTarget;
 };
-export declare function MailConfirmDialogs({ dialog, onClose, onDiscard, onSaveDraft, onRemove, onLeaveSave, onLeaveDiscard, }: {
+export declare function MailConfirmDialogs({ dialog, onClose, onDiscard, onRemove, onLeaveSave, onLeaveDiscard, }: {
     readonly dialog: ConfirmDialog;
     readonly onClose: () => void;
     readonly onDiscard: () => void;
-    readonly onSaveDraft: () => Promise<void>;
     readonly onRemove: (key: string) => Promise<void>;
     readonly onLeaveSave: (target: LeaveTarget) => Promise<void>;
     readonly onLeaveDiscard: (target: LeaveTarget) => void;

package/dist/web/mail-dialogs.js

@@ -1,14 +1,14 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @runtime client
 import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
-export function MailConfirmDialogs({ dialog, onClose, onDiscard, onSaveDraft, onRemove, onLeaveSave, onLeaveDiscard, }) {
+export function MailConfirmDialogs({ dialog, onClose, onDiscard, onRemove, onLeaveSave, onLeaveDiscard, }) {
     const t = useTranslation();
     const { Button, Dialog } = usePrimitives();
     const closeUnless = (open) => {
         if (!open)
             onClose();
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Dialog, { open: dialog.kind === "discard", onOpenChange: closeUnless, title: t("documentDesigner.mail.discard.title"), description: t("documentDesigner.mail.discard.description"), confirmLabel: t("documentDesigner.mail.discard.confirm"), variant: "danger", testId: "mail-discard-dialog", onConfirm: onDiscard }), _jsx(Dialog, { open: dialog.kind === "activeSave", onOpenChange: closeUnless, title: t("documentDesigner.mail.activeSave.title"), description: t("documentDesigner.mail.activeSave.description"), confirmLabel: t("documentDesigner.mail.activeSave.confirm"), testId: "mail-active-save-dialog", onConfirm: onSaveDraft }), _jsx(Dialog, { open: dialog.kind === "remove", onOpenChange: closeUnless, title: t("documentDesigner.mail.remove.title"), description: t("documentDesigner.mail.remove.description"), confirmLabel: t("documentDesigner.mail.remove.confirm"), variant: "danger", testId: "mail-remove-dialog", onConfirm: () => (dialog.kind === "remove" ? onRemove(dialog.key) : Promise.resolve()) }), _jsx(Dialog, { open: dialog.kind === "leave", onOpenChange: closeUnless, title: t("documentDesigner.mail.leave.title"), description: t("documentDesigner.mail.leave.description"), confirmLabel: t("documentDesigner.mail.leave.save"), testId: "mail-leave-dialog", onConfirm: () => (dialog.kind === "leave" ? onLeaveSave(dialog.target) : Promise.resolve()), children: _jsx(Button, { variant: "danger-ghost", onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(Dialog, { open: dialog.kind === "discard", onOpenChange: closeUnless, title: t("documentDesigner.mail.discard.title"), description: t("documentDesigner.mail.discard.description"), confirmLabel: t("documentDesigner.mail.discard.confirm"), variant: "danger", testId: "mail-discard-dialog", onConfirm: onDiscard }), _jsx(Dialog, { open: dialog.kind === "remove", onOpenChange: closeUnless, title: t("documentDesigner.mail.remove.title"), description: t("documentDesigner.mail.remove.description"), confirmLabel: t("documentDesigner.mail.remove.confirm"), variant: "danger", testId: "mail-remove-dialog", onConfirm: () => (dialog.kind === "remove" ? onRemove(dialog.key) : Promise.resolve()) }), _jsx(Dialog, { open: dialog.kind === "leave", onOpenChange: closeUnless, title: t("documentDesigner.mail.leave.title"), description: t("documentDesigner.mail.leave.description"), confirmLabel: t("documentDesigner.mail.leave.save"), testId: "mail-leave-dialog", onConfirm: () => (dialog.kind === "leave" ? onLeaveSave(dialog.target) : Promise.resolve()), children: _jsx(Button, { variant: "danger-ghost", onClick: () => {
                         if (dialog.kind === "leave")
                             onLeaveDiscard(dialog.target);
                     }, testId: "mail-leave-discard", children: t("documentDesigner.mail.leave.discard") }) })] }));

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

@@ -1,13 +1,14 @@
 import type { LinkedResourceView, MailDraft, MailVariable, PlaceholderType, TemplateRowView } from "./mail-types.js";
 export declare const EMPTY_DRAFT: MailDraft;
 export declare const PLACEHOLDER_SYMBOL: Readonly<Record<PlaceholderType, string>>;
+export declare const LAYOUT_OWNED_PLACEHOLDERS: ReadonlySet<string>;
+export declare const SYSTEM_PLACEHOLDER_TYPE: Readonly<Record<string, PlaceholderType>>;
+type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
+export declare function systemPlaceholderLabel(t: Translate, name: string): string;
+export declare function systemLabelMap(t: Translate, names: readonly string[]): Readonly<Record<string, string>>;
 export declare function parseJsonRecord(value: unknown): Readonly<Record<string, unknown>>;
-export type LoadedMail = {
-    readonly draft: MailDraft;
-    readonly sender: unknown;
-};
-export declare function loadedMailOf(row: TemplateRowView | null): LoadedMail;
-export declare function buildMeta(draft: MailDraft, sender: unknown): Record<string, unknown>;
+export declare function loadedMailOf(row: TemplateRowView | null): MailDraft;
+export declare function buildMeta(draft: MailDraft): Record<string, unknown>;
 export declare function isDraftDirty(current: MailDraft, saved: MailDraft): boolean;
 export declare function parseLinkedResources(value: unknown): readonly LinkedResourceView[];
 export declare function uniqueResourceKey(source: string, taken: readonly string[]): string;
@@ -15,3 +16,4 @@ export declare function lastSlugSegment(slug: string): string;
 export declare function formatKilobytes(bytes: number): string;
 export declare function variableLabelMap(variables: Readonly<Record<string, MailVariable>>): Record<string, string>;
 export declare function displayValue(t: (key: string, params?: Readonly<Record<string, unknown>>) => string, value: unknown): string;
+export {};

package/dist/web/mail-draft.js

@@ -3,6 +3,11 @@ export const EMPTY_DRAFT = {
     previewText: "",
     layoutSlug: "",
     category: "",
+    senderName: "",
+    replyTo: "",
+    headerChip: "",
+    tone: "",
+    footerNote: "",
     body: "",
 };
 export const PLACEHOLDER_SYMBOL = {
@@ -12,6 +17,24 @@ export const PLACEHOLDER_SYMBOL = {
     link: "↗",
     list: "≡",
 };
+// Filled in by the layout around the content, so a template that never uses them is fine.
+export const LAYOUT_OWNED_PLACEHOLDERS = new Set([
+    "imprint",
+    "unsubscribeUrl",
+]);
+export const SYSTEM_PLACEHOLDER_TYPE = {
+    imprint: "link",
+    unsubscribeUrl: "link",
+};
+export function systemPlaceholderLabel(t, name) {
+    const key = `documentDesigner.placeholder.${name}`;
+    const translated = t(key);
+    return translated === key ? name : translated;
+}
+// Chips in the editors show these instead of the raw system names.
+export function systemLabelMap(t, names) {
+    return Object.fromEntries(names.map((name) => [name, systemPlaceholderLabel(t, name)]));
+}
 function isRecord(value) {
     return typeof value === "object" && value !== null && !Array.isArray(value);
 }
@@ -37,26 +60,32 @@ function textOf(value) {
 }
 export function loadedMailOf(row) {
     if (row === null)
-        return { draft: EMPTY_DRAFT, sender: undefined };
+        return EMPTY_DRAFT;
     const meta = parseJsonRecord(row.meta);
     return {
-        draft: {
-            subject: textOf(meta["subject"]),
-            previewText: textOf(meta["previewText"]),
-            layoutSlug: textOf(meta["layoutSlug"]),
-            category: categoryOf(meta["category"]),
-            body: row.content,
-        },
-        sender: meta["sender"],
+        subject: textOf(meta["subject"]),
+        previewText: textOf(meta["previewText"]),
+        layoutSlug: textOf(meta["layoutSlug"]),
+        category: categoryOf(meta["category"]),
+        senderName: textOf(meta["senderName"]),
+        replyTo: textOf(meta["replyTo"]),
+        headerChip: textOf(meta["headerChip"]),
+        tone: textOf(meta["tone"]),
+        footerNote: textOf(meta["footerNote"]),
+        body: row.content,
     };
 }
-export function buildMeta(draft, sender) {
+export function buildMeta(draft) {
     return {
         subject: draft.subject,
         ...(draft.previewText !== "" && { previewText: draft.previewText }),
         ...(draft.layoutSlug !== "" && { layoutSlug: draft.layoutSlug }),
         ...(draft.category !== "" && { category: draft.category }),
-        ...(sender !== undefined && { sender }),
+        ...(draft.senderName !== "" && { senderName: draft.senderName }),
+        ...(draft.replyTo !== "" && { replyTo: draft.replyTo }),
+        ...(draft.headerChip !== "" && { headerChip: draft.headerChip }),
+        ...(draft.tone !== "" && { tone: draft.tone }),
+        ...(draft.footerNote !== "" && { footerNote: draft.footerNote }),
     };
 }
 export function isDraftDirty(current, saved) {
@@ -64,6 +93,11 @@ export function isDraftDirty(current, saved) {
         current.previewText !== saved.previewText ||
         current.layoutSlug !== saved.layoutSlug ||
         current.category !== saved.category ||
+        current.senderName !== saved.senderName ||
+        current.replyTo !== saved.replyTo ||
+        current.headerChip !== saved.headerChip ||
+        current.tone !== saved.tone ||
+        current.footerNote !== saved.footerNote ||
         current.body !== saved.body);
 }
 export function parseLinkedResources(value) {

package/dist/web/mail-edit-center.d.ts

@@ -1,5 +1,6 @@
 import { type DocumentResourcePreview } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
 import type { ReactNode } from "react";
+import type { MailMetaField } from "./mail-footer.js";
 import type { MailDraft } from "./mail-types.js";
 import type { InsertTargets } from "./use-insert-targets.js";
 export type EditorVocabulary = {
@@ -7,11 +8,12 @@ export type EditorVocabulary = {
     readonly labels: Readonly<Record<string, string>>;
     readonly system: readonly string[];
 };
-export declare function MailEditCenter({ draft, vocabulary, resourcePreviews, insert, readOnly, onChange, }: {
+export declare function MailEditCenter({ draft, vocabulary, resourcePreviews, insert, readOnly, fieldErrors, onChange, }: {
     readonly draft: MailDraft;
     readonly vocabulary: EditorVocabulary;
     readonly resourcePreviews: Readonly<Record<string, DocumentResourcePreview>>;
     readonly insert: InsertTargets;
     readonly readOnly: boolean;
+    readonly fieldErrors: Partial<Record<MailMetaField, string>>;
     readonly onChange: (patch: Partial<MailDraft>) => void;
 }): ReactNode;

package/dist/web/mail-edit-center.js

@@ -2,10 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @runtime client
 import { DocumentContentEditor, MAIL_DOCUMENT_BLOCKS, PlaceholderLineEditor, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
 import { useTranslation } from "@cosmicdrift/kumiko-renderer";
-function MetaLine({ label, testId, onFocusCapture, children, }) {
-    return (_jsxs("div", { className: "grid grid-cols-[96px_minmax(0,1fr)] items-center gap-2", "data-testid": testId, onFocusCapture: onFocusCapture, children: [_jsx("span", { className: "text-sm text-muted-foreground", children: label }), children] }));
+const renderMailPaper = (editable) => (_jsx("div", { className: "mx-auto w-full max-w-[600px] bg-card px-10 py-7 shadow-md", children: editable }));
+function MetaLine({ label, testId, error, onFocusCapture, children, }) {
+    return (_jsxs("div", { className: "grid min-h-10 grid-cols-[84px_minmax(0,1fr)] items-center border-b bg-background px-4", "data-testid": testId, onFocusCapture: onFocusCapture, children: [_jsx("span", { className: "text-xs text-muted-foreground", children: label }), _jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("div", { className: "min-w-0 flex-1", children: children }), error !== undefined && (_jsx("span", { className: "shrink-0 text-xs text-status-bad", role: "alert", children: error }))] })] }));
 }
-export function MailEditCenter({ draft, vocabulary, resourcePreviews, insert, readOnly, onChange, }) {
+export function MailEditCenter({ draft, vocabulary, resourcePreviews, insert, readOnly, fieldErrors, onChange, }) {
     const t = useTranslation();
-    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-3", "data-testid": "mail-editor-center", children: [_jsxs("div", { className: "flex flex-col gap-2 rounded-md border bg-muted p-3", children: [_jsx(MetaLine, { label: t("documentDesigner.mail.meta.subject"), testId: "mail-meta-subject", onFocusCapture: insert.markFocused("subject"), children: _jsx(PlaceholderLineEditor, { id: "mail-subject", value: draft.subject, onChange: (subject) => onChange({ subject }), variableLabels: vocabulary.labels, systemVariables: vocabulary.system, readOnly: readOnly, onEditorReady: insert.register("subject"), "aria-label": t("documentDesigner.mail.meta.subject") }) }), _jsx(MetaLine, { label: t("documentDesigner.mail.meta.previewText"), testId: "mail-meta-preview-text", onFocusCapture: insert.markFocused("previewText"), children: _jsx(PlaceholderLineEditor, { id: "mail-preview-text", value: draft.previewText, onChange: (previewText) => onChange({ previewText }), variableLabels: vocabulary.labels, systemVariables: vocabulary.system, readOnly: readOnly, onEditorReady: insert.register("previewText"), "aria-label": t("documentDesigner.mail.meta.previewText") }) })] }), _jsx("div", { onFocusCapture: insert.markFocused("body"), "data-testid": "mail-content", children: _jsx(DocumentContentEditor, { id: "mail-body", value: draft.body, onChange: (body) => onChange({ body }), variables: vocabulary.names, readOnly: readOnly, blocks: MAIL_DOCUMENT_BLOCKS, variableLabels: vocabulary.labels, systemVariables: vocabulary.system, resourcePreviews: resourcePreviews, chrome: "canvas", onEditorReady: insert.register("body") }) })] }));
+    return (_jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", "data-testid": "mail-editor-center", children: [_jsx(MetaLine, { label: t("documentDesigner.mail.meta.subject"), testId: "mail-meta-subject", error: fieldErrors.subject, onFocusCapture: insert.markFocused("subject"), children: _jsx(PlaceholderLineEditor, { id: "mail-subject", value: draft.subject, onChange: (subject) => onChange({ subject }), variableLabels: vocabulary.labels, systemVariables: vocabulary.system, readOnly: readOnly, flat: true, onEditorReady: insert.register("subject"), "aria-label": t("documentDesigner.mail.meta.subject") }) }), _jsx(MetaLine, { label: t("documentDesigner.mail.meta.previewText"), testId: "mail-meta-preview-text", error: fieldErrors.previewText, onFocusCapture: insert.markFocused("previewText"), children: _jsx(PlaceholderLineEditor, { id: "mail-preview-text", value: draft.previewText, onChange: (previewText) => onChange({ previewText }), variableLabels: vocabulary.labels, systemVariables: vocabulary.system, readOnly: readOnly, flat: true, placeholder: t("documentDesigner.mail.meta.previewTextPlaceholder"), onEditorReady: insert.register("previewText"), "aria-label": t("documentDesigner.mail.meta.previewText") }) }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", onFocusCapture: insert.markFocused("body"), "data-testid": "mail-content", children: _jsx(DocumentContentEditor, { id: "mail-body", value: draft.body, onChange: (body) => onChange({ body }), variables: vocabulary.names, readOnly: readOnly, blocks: MAIL_DOCUMENT_BLOCKS, variableLabels: vocabulary.labels, systemVariables: vocabulary.system, resourcePreviews: resourcePreviews, chrome: "canvas", renderPaper: renderMailPaper, onEditorReady: insert.register("body") }) })] }));
 }

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

@@ -12,7 +12,6 @@ export type MailEditorBodyProps = {
     readonly onLocaleChange: (locale: string) => void;
     readonly onReload: () => Promise<void>;
     readonly onRefreshRow: () => Promise<void>;
-    readonly onBack: () => void;
 };
 export declare function placeholderNames(validation: MailValidation | null): string[];
 export declare function MailEditorBody(props: MailEditorBodyProps): ReactNode;