@cosmicdrift/kumiko-document-designer 0.0.0-stage → 0.364.0

package/dist/web/layout-rails.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+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 BRANDING_SCREEN_SHORT_ID = BRANDING_SCREEN_QN.slice(BRANDING_SCREEN_QN.lastIndexOf(":") + 1);
+function logoName(logoUrl) {
+    const path = logoUrl.split("?")[0] ?? "";
+    return path.slice(path.lastIndexOf("/") + 1);
+}
+function hostOf(siteUrl) {
+    return siteUrl.replace(/^https?:\/\//, "").replace(/\/$/, "");
+}
+// 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({ data, unavailable, }) {
+    const t = useTranslation();
+    const nav = useNav();
+    const features = useAppFeatures();
+    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 (unavailable) {
+        return (_jsx(RailSection, { title: t("documentDesigner.branding.title"), testId: "document-designer-branding", children: _jsx(RailHint, { children: t("documentDesigner.branding.unavailable") }) }));
+    }
+    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(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 ?? []);
+    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({ appearance, onChange, fromMjml, }) {
+    const t = useTranslation();
+    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(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 MjmlSourceRail({ mjmlSource }) {
+    const t = useTranslation();
+    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

@@ -0,0 +1,66 @@
+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;
+    readonly code: string;
+    readonly i18nKey: string;
+    readonly params?: Readonly<Record<string, unknown>>;
+};
+export type LayoutValidation = {
+    readonly canSave: boolean;
+    readonly canPublish: boolean;
+    readonly issues: readonly ValidationIssue[];
+    readonly publishIssues: readonly ValidationIssue[];
+    readonly used: readonly string[];
+    readonly systemPlaceholders: readonly string[];
+};
+export type BrandingView = {
+    readonly title: string;
+    readonly accentColor: string;
+    readonly logoUrl: string;
+    readonly logoFile: string;
+    readonly siteUrl: string;
+};
+export type TenantOverrideCounts = {
+    readonly activeOverrides: number;
+    readonly draftOverrides: number;
+    readonly totalTenants: number | null;
+};
+export type TemplateDiff = {
+    readonly identical: boolean;
+    readonly blocks: readonly {
+        readonly change: "same" | "added" | "removed";
+        readonly content: string;
+    }[];
+    readonly meta: readonly {
+        readonly key: string;
+        readonly tenant?: unknown;
+        readonly system?: unknown;
+    }[];
+};
+export type UpsertResponse = {
+    readonly id: string;
+};
+export type LayoutSourceRow = {
+    readonly id: string;
+    readonly version: number;
+    readonly status: string;
+    readonly locale: string;
+    readonly active?: ServedVersionView | null;
+};
+export type LayoutSourceView = {
+    readonly tenant: LayoutSourceRow | null;
+    readonly system: (LayoutSourceRow & {
+        readonly contentFormat: string;
+    }) | null;
+    readonly regions: {
+        readonly header: string;
+        readonly signature: string;
+        readonly footer: string;
+    };
+    readonly effectiveFormat: "html" | "mjml" | null;
+    readonly mjmlSource: string | null;
+    readonly meta: LayoutMeta;
+    readonly locale: string;
+};

package/dist/web/layout-types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +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

@@ -0,0 +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 = layoutUserKind(kind);
+    return rows.filter((row) => row.kind === documentKind && (row.layoutSlug ?? DEFAULT_LAYOUT_SLUG) === layoutSlug);
+}

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

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+export type LeaveTarget = {
+    readonly kind: "locale";
+    readonly locale: string;
+};
+export type ConfirmDialog = {
+    readonly kind: "none";
+} | {
+    readonly kind: "discard";
+} | {
+    readonly kind: "remove";
+    readonly key: string;
+} | {
+    readonly kind: "leave";
+    readonly target: LeaveTarget;
+};
+export declare function MailConfirmDialogs({ dialog, onClose, onDiscard, onRemove, onLeaveSave, onLeaveDiscard, }: {
+    readonly dialog: ConfirmDialog;
+    readonly onClose: () => void;
+    readonly onDiscard: () => void;
+    readonly onRemove: (key: string) => Promise<void>;
+    readonly onLeaveSave: (target: LeaveTarget) => Promise<void>;
+    readonly onLeaveDiscard: (target: LeaveTarget) => void;
+}): ReactNode;

package/dist/web/mail-dialogs.js

@@ -0,0 +1,15 @@
+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, 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 === "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

@@ -0,0 +1,19 @@
+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 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;
+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

@@ -0,0 +1,154 @@
+export const EMPTY_DRAFT = {
+    subject: "",
+    previewText: "",
+    layoutSlug: "",
+    category: "",
+    senderName: "",
+    replyTo: "",
+    body: "",
+};
+export const PLACEHOLDER_SYMBOL = {
+    text: "T",
+    money: "€",
+    date: "D",
+    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);
+}
+// Stored JSON columns come back as a JSON string or an already parsed object.
+export function parseJsonRecord(value) {
+    if (isRecord(value))
+        return value;
+    if (typeof value !== "string" || value === "")
+        return {};
+    try {
+        const parsed = JSON.parse(value);
+        return isRecord(parsed) ? parsed : {};
+    }
+    catch {
+        return {};
+    }
+}
+function categoryOf(value) {
+    return value === "transactional" || value === "marketing" ? value : "";
+}
+function textOf(value) {
+    return typeof value === "string" ? value : "";
+}
+export function loadedMailOf(row) {
+    if (row === null)
+        return EMPTY_DRAFT;
+    const meta = parseJsonRecord(row.meta);
+    return {
+        subject: textOf(meta["subject"]),
+        previewText: textOf(meta["previewText"]),
+        layoutSlug: textOf(meta["layoutSlug"]),
+        category: categoryOf(meta["category"]),
+        senderName: textOf(meta["senderName"]),
+        replyTo: textOf(meta["replyTo"]),
+        body: row.content,
+    };
+}
+export function buildMeta(draft) {
+    return {
+        subject: draft.subject,
+        ...(draft.previewText !== "" && { previewText: draft.previewText }),
+        ...(draft.layoutSlug !== "" && { layoutSlug: draft.layoutSlug }),
+        ...(draft.category !== "" && { category: draft.category }),
+        ...(draft.senderName !== "" && { senderName: draft.senderName }),
+        ...(draft.replyTo !== "" && { replyTo: draft.replyTo }),
+    };
+}
+export function isDraftDirty(current, saved) {
+    return (current.subject !== saved.subject ||
+        current.previewText !== saved.previewText ||
+        current.layoutSlug !== saved.layoutSlug ||
+        current.category !== saved.category ||
+        current.senderName !== saved.senderName ||
+        current.replyTo !== saved.replyTo ||
+        current.body !== saved.body);
+}
+export function parseLinkedResources(value) {
+    return Object.entries(parseJsonRecord(value)).flatMap(([key, entry]) => {
+        if (typeof entry === "string")
+            return [{ kind: "image", key, fileRefId: entry }];
+        if (!isRecord(entry))
+            return [];
+        const fileName = textOf(entry["fileName"]);
+        if (entry["kind"] === "file") {
+            return [{ kind: "file", key, fileRefId: textOf(entry["fileRefId"]), fileName }];
+        }
+        if (entry["kind"] === "rendered-pdf") {
+            return [{ kind: "pdf", key, templateSlug: textOf(entry["templateSlug"]), fileName }];
+        }
+        return [];
+    });
+}
+const KEY_MAX_LENGTH = 64;
+// Resource keys allow letters, digits, dot, dash and underscore; a taken key gets a numeric suffix.
+export function uniqueResourceKey(source, taken) {
+    const withoutExtension = source.replace(/\.[A-Za-z0-9]{1,5}$/, "");
+    const base = withoutExtension
+        .toLowerCase()
+        .replace(/[^a-z0-9._-]+/g, "-")
+        .replace(/^-+|-+$/g, "")
+        .slice(0, KEY_MAX_LENGTH - 4) || "resource";
+    if (!taken.includes(base))
+        return base;
+    for (let n = 2;; n += 1) {
+        const candidate = `${base}-${n}`;
+        if (!taken.includes(candidate))
+            return candidate;
+    }
+}
+export function lastSlugSegment(slug) {
+    const parts = slug.split(":");
+    return parts[parts.length - 1] ?? slug;
+}
+export function formatKilobytes(bytes) {
+    return `${Math.max(1, Math.round(bytes / 1024))} KB`;
+}
+// Labels for the chip editors; list item fields are addressed as "list.item".
+export function variableLabelMap(variables) {
+    const labels = {};
+    for (const [name, variable] of Object.entries(variables)) {
+        if (variable.label !== undefined)
+            labels[name] = variable.label;
+        for (const [itemName, item] of Object.entries(variable.item ?? {})) {
+            if (item.label !== undefined)
+                labels[`${name}.${itemName}`] = item.label;
+        }
+    }
+    return labels;
+}
+export function displayValue(t, value) {
+    if (Array.isArray(value))
+        return t("documentDesigner.mail.preview.entries", { count: value.length });
+    if (isRecord(value)) {
+        const { amount, currency } = value;
+        if (typeof amount === "number" && typeof currency === "string")
+            return `${amount} ${currency}`;
+        return JSON.stringify(value);
+    }
+    return String(value ?? "");
+}

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

@@ -0,0 +1,19 @@
+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 = {
+    readonly names: readonly string[];
+    readonly labels: Readonly<Record<string, string>>;
+    readonly system: readonly string[];
+};
+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

@@ -0,0 +1,12 @@
+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";
+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, fieldErrors, onChange, }) {
+    const t = useTranslation();
+    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, 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

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