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

package/dist/web/mail-draft.js

@@ -0,0 +1,132 @@
+export const EMPTY_DRAFT = {
+    subject: "",
+    previewText: "",
+    layoutSlug: "",
+    category: "",
+    body: "",
+};
+export const PLACEHOLDER_SYMBOL = {
+    text: "T",
+    money: "€",
+    date: "D",
+    link: "↗",
+    list: "≡",
+};
+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 { draft: EMPTY_DRAFT, sender: undefined };
+    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"],
+    };
+}
+export function buildMeta(draft, sender) {
+    return {
+        subject: draft.subject,
+        ...(draft.previewText !== "" && { previewText: draft.previewText }),
+        ...(draft.layoutSlug !== "" && { layoutSlug: draft.layoutSlug }),
+        ...(draft.category !== "" && { category: draft.category }),
+        ...(sender !== undefined && { sender }),
+    };
+}
+export function isDraftDirty(current, saved) {
+    return (current.subject !== saved.subject ||
+        current.previewText !== saved.previewText ||
+        current.layoutSlug !== saved.layoutSlug ||
+        current.category !== saved.category ||
+        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,17 @@
+import { type DocumentResourcePreview } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import type { ReactNode } from "react";
+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, onChange, }: {
+    readonly draft: MailDraft;
+    readonly vocabulary: EditorVocabulary;
+    readonly resourcePreviews: Readonly<Record<string, DocumentResourcePreview>>;
+    readonly insert: InsertTargets;
+    readonly readOnly: boolean;
+    readonly onChange: (patch: Partial<MailDraft>) => void;
+}): ReactNode;

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

@@ -0,0 +1,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] }));
+}
+export function MailEditCenter({ draft, vocabulary, resourcePreviews, insert, readOnly, 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") }) })] }));
+}

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

@@ -0,0 +1,18 @@
+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>;
+    readonly onBack: () => void;
+};
+export declare function placeholderNames(validation: MailValidation | null): string[];
+export declare function MailEditorBody(props: MailEditorBodyProps): ReactNode;

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

@@ -0,0 +1,193 @@
+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 { dispatcherErrorText, useMutation, usePrimitives, useQuery, useTranslation, } from "@cosmicdrift/kumiko-renderer";
+import { useState } from "react";
+import { fileUrl } from "./file-name.js";
+import { MailConfirmDialogs } from "./mail-dialogs.js";
+import { buildMeta, isDraftDirty, loadedMailOf, parseJsonRecord, parseLinkedResources, variableLabelMap, } from "./mail-draft.js";
+import { MailEditCenter } from "./mail-edit-center.js";
+import { MailFooter } from "./mail-footer.js";
+import { MailHeader } from "./mail-header.js";
+import { PlaceholderSection, ResourceSection, SystemPlaceholderSection } from "./mail-left-rail.js";
+import { MailOriginBar } from "./mail-origin-bar.js";
+import { PdfLinkModal } from "./mail-pdf-link-modal.js";
+import { MailPreviewMode } from "./mail-preview.js";
+import { AttachmentSection, PropertiesSection, UsageSection } from "./mail-right-rail.js";
+import { UploadModal } from "./mail-upload-modal.js";
+import { VersionsSection } from "./mail-versions.js";
+import { useInsertTargets } from "./use-insert-targets.js";
+import { useMailPersistence } from "./use-mail-persistence.js";
+import { useOverviewRows } from "./use-overview-rows.js";
+import { useSettledValue } from "./use-settled-value.js";
+import { useTestMail } from "./use-test-mail.js";
+function sortedUnique(values) {
+    return [...new Set(values)];
+}
+export function placeholderNames(validation) {
+    if (validation === null)
+        return [];
+    const own = Object.entries(validation.variables).flatMap(([name, variable]) => [
+        name,
+        ...Object.keys(variable.item ?? {}).map((item) => `${name}.${item}`),
+    ]);
+    return sortedUnique([...own, ...validation.systemPlaceholders]);
+}
+export function MailEditorBody(props) {
+    const { slug, locale, title, isSystemAdmin, row, onReload, onRefreshRow } = props;
+    const t = useTranslation();
+    const { Banner } = usePrimitives();
+    const [baseline] = useState(() => loadedMailOf(row));
+    const [draft, setDraft] = useState(baseline.draft);
+    const [settled, settle] = useSettledValue(baseline.draft);
+    const [mode, setMode] = useState("edit");
+    const [creating, setCreating] = useState(false);
+    const [dialog, setDialog] = useState({ kind: "none" });
+    const [uploadOpen, setUploadOpen] = useState(false);
+    const [pdfOpen, setPdfOpen] = useState(false);
+    const [resourceError, setResourceError] = useState(null);
+    const [editorEpoch, setEditorEpoch] = useState(0);
+    const insert = useInsertTargets();
+    const persistence = useMailPersistence({
+        slug,
+        locale,
+        title,
+        isSystemAdmin,
+        row,
+        sender: baseline.sender,
+    });
+    const testMail = useTestMail();
+    const resourceRemove = useMutation(TemplateResolverHandlers.resourceRemove);
+    const layouts = useOverviewRows("mail-layout");
+    const pdfTemplates = useOverviewRows("document-pdf");
+    const locked = row === null && !creating;
+    const variableSchema = parseJsonRecord(row?.variableSchema);
+    const validation = useQuery(TemplateResolverQueries.validate, {
+        slug,
+        kind: "mail",
+        contentFormat: "html",
+        content: settled.body,
+        meta: buildMeta(settled, baseline.sender),
+        variableSchema,
+        locale,
+        scope: isSystemAdmin ? "system" : "tenant",
+    }).data;
+    const update = (patch) => {
+        const next = { ...draft, ...patch };
+        setDraft(next);
+        settle(next);
+    };
+    const reset = () => {
+        setDraft(baseline.draft);
+        settle(baseline.draft);
+        setEditorEpoch((epoch) => epoch + 1);
+        persistence.clearError();
+    };
+    const dirty = isDraftDirty(draft, baseline.draft);
+    const isActiveTenantRow = row?.scope === "tenant" && row.status === "active";
+    const busy = persistence.busy;
+    const canSave = !locked && !busy && validation?.canSave === true && (dirty || creating);
+    const canPublish = !locked &&
+        !busy &&
+        validation?.canPublish === true &&
+        (dirty || creating || row?.status !== "active");
+    const persist = async (publish) => persistence.save(draft, publish);
+    const saveAndReload = async (publish) => {
+        if (await persist(publish))
+            await onReload();
+    };
+    const requestSave = () => {
+        if (isActiveTenantRow)
+            setDialog({ kind: "activeSave" });
+        else
+            void saveAndReload(false);
+    };
+    const perform = (target) => {
+        if (target.kind === "locale")
+            props.onLocaleChange(target.locale);
+        else
+            props.onBack();
+    };
+    const leave = (target) => {
+        if (target.kind === "locale" && target.locale === locale)
+            return;
+        if (dirty)
+            setDialog({ kind: "leave", target });
+        else
+            perform(target);
+    };
+    const resources = parseLinkedResources(row?.linkedResources);
+    const pdfTitles = new Map(pdfTemplates.rows.map((template) => [template.slug, template.title]));
+    const resourcePreviews = Object.fromEntries(resources.flatMap((resource) => resource.kind === "image"
+        ? [
+            [
+                resource.key,
+                {
+                    src: fileUrl(resource.fileRefId),
+                    caption: t("documentDesigner.mail.resource.caption", { key: resource.key }),
+                },
+            ],
+        ]
+        : []));
+    const uploadTemplateId = row?.scope === "tenant" ? row.id : null;
+    const takenKeys = resources.map((resource) => resource.key);
+    const removeResource = async (key) => {
+        if (uploadTemplateId === null)
+            return;
+        setResourceError(null);
+        const result = await resourceRemove.mutate({ templateId: uploadTemplateId, key });
+        if (result.isSuccess)
+            await onRefreshRow();
+        else
+            setResourceError(dispatcherErrorText(result.error, t));
+    };
+    const sendTestMail = () => {
+        void testMail.send({
+            slug,
+            locale,
+            content: draft.body,
+            meta: buildMeta(draft, baseline.sender),
+            variableSchema,
+        });
+    };
+    const names = placeholderNames(validation ?? null);
+    const vocabulary = {
+        names,
+        labels: variableLabelMap(validation?.variables ?? {}),
+        system: validation?.systemPlaceholders ?? [],
+    };
+    const rails = { validation: validation ?? null, row, slug, draft, onChange: update };
+    return (_jsxs("div", { className: "flex flex-col gap-4 p-6", "data-testid": "document-designer-mail-editor", children: [_jsx(MailHeader, { title: title, row: row, locales: props.locales, locale: locale, mode: mode, testPending: testMail.pending, actions: {
+                    busy,
+                    canSave,
+                    canPublish,
+                    onSave: requestSave,
+                    onPublish: () => void saveAndReload(true),
+                }, onBack: () => leave({ kind: "back" }), onLocale: (next) => leave({ kind: "locale", locale: next }), onMode: setMode, onTestMail: sendTestMail }), testMail.state.kind === "sent" && (_jsx(Banner, { variant: "primary", testId: "mail-test-sent", children: t("documentDesigner.mail.testMail.sent", { subject: testMail.state.subject }) })), testMail.state.kind === "error" && (_jsx(Banner, { variant: "error", testId: "mail-test-error", children: testMail.state.text })), resourceError !== null && (_jsx(Banner, { variant: "error", testId: "mail-resource-error", children: resourceError })), _jsx(MailOriginBar, { row: row, title: title, systemVersion: props.systemVersion, slug: slug, locale: locale, fallbackLocale: props.fallbackLocale, isSystemAdmin: isSystemAdmin, creating: creating, onCreateBlank: () => setCreating(true), onReload: () => void onReload() }), mode === "edit" ? (_jsxs("div", { className: "grid items-start gap-4 lg:grid-cols-[260px_minmax(0,1fr)_300px]", children: [_jsxs("div", { className: "flex max-h-[70vh] flex-col overflow-y-auto", children: [_jsx(PlaceholderSection, { validation: rails.validation, onInsert: insert.insertPlaceholder }), _jsx(SystemPlaceholderSection, { validation: rails.validation, onInsert: insert.insertPlaceholder }), _jsx(ResourceSection, { resources: resources, pdfTitles: pdfTitles, canUpload: uploadTemplateId !== null, onUpload: () => setUploadOpen(true), onInsert: insert.insertResource, onRemove: (key) => setDialog({ kind: "remove", key }) })] }), _jsx(MailEditCenter, { draft: draft, vocabulary: vocabulary, resourcePreviews: resourcePreviews, insert: insert, readOnly: locked, onChange: update }, editorEpoch), _jsxs("div", { className: "flex max-h-[70vh] flex-col overflow-y-auto", children: [_jsx(PropertiesSection, { draft: draft, layouts: layouts.rows, onChange: update }), _jsx(AttachmentSection, { attachments: resources.filter((resource) => resource.kind !== "image"), pdfTitles: pdfTitles, canEdit: uploadTemplateId !== null, onAddPdf: () => setPdfOpen(true), onRemove: (key) => setDialog({ kind: "remove", key }) }), _jsx(UsageSection, { slug: slug }), _jsx(VersionsSection, { rowId: row?.id ?? null, currentVersion: row?.version ?? 0, currentStatus: row?.status ?? "draft" })] })] })) : (_jsx(MailPreviewMode, { payload: {
+                    slug,
+                    kind: "mail",
+                    locale,
+                    content: settled.body,
+                    meta: buildMeta(settled, baseline.sender),
+                    variableSchema,
+                }, validation: validation ?? null, slug: slug, locale: locale, testMail: { pending: testMail.pending, onSend: sendTestMail } })), _jsx(MailFooter, { validation: validation ?? null, previewMode: mode === "preview", saveError: persistence.error, modifiedAt: row?.modifiedAt ?? null, dirty: dirty, busy: busy, canSave: canSave, canPublish: canPublish, onDiscard: () => setDialog({ kind: "discard" }), onSave: requestSave, onPublish: () => void saveAndReload(true) }), uploadTemplateId !== null && (_jsxs(_Fragment, { children: [_jsx(UploadModal, { open: uploadOpen, onOpenChange: setUploadOpen, target: {
+                            templateId: uploadTemplateId,
+                            takenKeys,
+                            onUploaded: (uploaded) => {
+                                if (uploaded.purpose === "image")
+                                    insert.insertResource(uploaded.key);
+                                void onRefreshRow();
+                            },
+                        } }), _jsx(PdfLinkModal, { open: pdfOpen, onOpenChange: setPdfOpen, templates: pdfTemplates.rows, variableLabels: vocabulary.labels, templateId: uploadTemplateId, takenKeys: takenKeys, onLinked: () => void onRefreshRow() })] })), _jsx(MailConfirmDialogs, { dialog: dialog, onClose: () => setDialog({ kind: "none" }), onDiscard: () => {
+                    reset();
+                    setDialog({ kind: "none" });
+                }, onSaveDraft: async () => {
+                    await saveAndReload(false);
+                }, onRemove: removeResource, onLeaveSave: async (target) => {
+                    if (await persist(false))
+                        perform(target);
+                }, onLeaveDiscard: (target) => {
+                    setDialog({ kind: "none" });
+                    perform(target);
+                } })] }));
+}

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

@@ -0,0 +1,2 @@
+import { type ComponentType } from "react";
+export declare function createMailEditor(appLocales: readonly string[]): ComponentType;

package/dist/web/mail-editor.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @runtime client
+import { TemplateResolverQueries } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { useNav, useQuery, useUserRoles } from "@cosmicdrift/kumiko-renderer";
+import { LoadingState } from "@cosmicdrift/kumiko-renderer-web";
+import { useState } from "react";
+import { DEFAULT_TEMPLATE_LOCALES, PLATFORM_TEMPLATES_SCREEN_ID, TEMPLATES_SCREEN_ID, } from "../constants.js";
+import { MailEditorBody } from "./mail-editor-body.js";
+import { useOverviewRows } from "./use-overview-rows.js";
+function defaultLocaleOf(appLocales, rowLocales) {
+    const preferred = appLocales[0] ?? DEFAULT_TEMPLATE_LOCALES[0] ?? "de";
+    if (rowLocales.length === 0 || rowLocales.includes(preferred))
+        return preferred;
+    return rowLocales[0] ?? preferred;
+}
+function fallbackLocaleOf(locale, rowLocales) {
+    const others = rowLocales.filter((candidate) => candidate !== locale);
+    const preferred = DEFAULT_TEMPLATE_LOCALES[0];
+    return (preferred !== undefined && others.includes(preferred) ? preferred : others[0]) ?? null;
+}
+function shownSummaryOf(summaries, slug, isSystemAdmin) {
+    const ofSlug = summaries.filter((summary) => summary.slug === slug);
+    const tenant = ofSlug.find((summary) => summary.scope === "tenant");
+    const system = ofSlug.find((summary) => summary.scope === "system");
+    return (isSystemAdmin ? system : (tenant ?? system)) ?? null;
+}
+function MailEditorData({ slug, locale, locales, overviewRow, isSystemAdmin, onLocaleChange, refreshOverview, }) {
+    const nav = useNav();
+    const [generation, setGeneration] = useState(0);
+    const list = useQuery(TemplateResolverQueries.list, {
+        kind: "mail",
+        locale,
+        includeSystem: true,
+    });
+    const shown = shownSummaryOf(list.data ?? [], slug, isSystemAdmin);
+    const stored = useQuery(TemplateResolverQueries.findById, { id: shown?.id ?? "" }, { enabled: shown !== null });
+    const row = stored.data !== null && stored.data.id === shown?.id ? stored.data : null;
+    // A changed row id keeps the previous row in `stored` until the new one arrives.
+    if (list.data === null || (shown !== null && row === null))
+        return _jsx(LoadingState, {});
+    const reload = async () => {
+        await Promise.all([list.refetch(), refreshOverview()]);
+        await stored.refetch();
+        setGeneration((current) => current + 1);
+    };
+    const rowLocales = overviewRow?.locales ?? [];
+    return (_jsx(MailEditorBody, { slug: slug, locale: locale, locales: locales, title: overviewRow?.title ?? slug, isSystemAdmin: isSystemAdmin, row: row, systemVersion: overviewRow?.systemVersion ?? null, fallbackLocale: fallbackLocaleOf(locale, rowLocales), onLocaleChange: onLocaleChange, onReload: reload, onRefreshRow: async () => {
+            await stored.refetch();
+        }, onBack: () => nav.navigate({
+            screenId: isSystemAdmin ? PLATFORM_TEMPLATES_SCREEN_ID : TEMPLATES_SCREEN_ID,
+        }) }, `${locale}|${generation}|${row?.id ?? "none"}`));
+}
+function MailEditorEntry({ appLocales }) {
+    const nav = useNav();
+    const roles = useUserRoles();
+    const slug = nav.searchParams["slug"] ?? "";
+    const overview = useOverviewRows("mail", slug);
+    const [picked, setPicked] = useState(nav.searchParams["locale"] ?? null);
+    if (!overview.loaded)
+        return _jsx(LoadingState, {});
+    const overviewRow = overview.rows.find((candidate) => candidate.slug === slug) ?? null;
+    const rowLocales = overviewRow?.locales ?? [];
+    const locale = picked ?? defaultLocaleOf(appLocales, rowLocales);
+    const locales = [...new Set([...appLocales, ...rowLocales])];
+    return (_jsx(MailEditorData, { slug: slug, locale: locale, locales: locales, overviewRow: overviewRow, isSystemAdmin: roles?.includes("SystemAdmin") === true, onLocaleChange: setPicked, refreshOverview: overview.refetch }, locale));
+}
+export function createMailEditor(appLocales) {
+    return function MailEditor() {
+        return _jsx(MailEditorEntry, { appLocales: appLocales });
+    };
+}

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

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

package/dist/web/mail-footer.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { formatWhen, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+function issueText(t, issue) {
+    const translated = t(issue.i18nKey, issue.params);
+    return translated === issue.i18nKey ? issue.code : translated;
+}
+function missingLabels(validation) {
+    return validation.missingRequired
+        .map((name) => validation.variables[name]?.label ?? name)
+        .join(", ");
+}
+// The footer sentence: missing required placeholders first, then other blocking issues,
+// then hints (not-yet-uploaded resources), else "ready".
+export function footerMessage(t, validation, previewMode) {
+    if (validation.missingRequired.length > 0) {
+        return {
+            tone: "bad",
+            text: t(previewMode
+                ? "documentDesigner.mail.footer.missingPreview"
+                : "documentDesigner.mail.footer.missing", { names: missingLabels(validation) }),
+        };
+    }
+    const blocking = [...validation.issues, ...validation.publishIssues][0];
+    if (blocking !== undefined)
+        return { tone: "bad", text: issueText(t, blocking) };
+    const warning = validation.warnings[0];
+    if (warning !== undefined) {
+        const translated = t(warning.i18nKey, { detail: warning.detail });
+        return { tone: "warn", text: translated === warning.i18nKey ? warning.code : translated };
+    }
+    return { tone: "ok", text: t("documentDesigner.mail.footer.ok") };
+}
+const TONE_CLASS = {
+    bad: "text-status-bad",
+    warn: "text-status-warn",
+    ok: "text-status-ok",
+};
+export function MailFooter({ validation, previewMode, saveError, modifiedAt, dirty, busy, canSave, canPublish, onDiscard, onSave, onPublish, }) {
+    const t = useTranslation();
+    const { Banner, Button, Text } = usePrimitives();
+    const message = validation === null ? null : footerMessage(t, validation, previewMode);
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-3 border-t pt-3", "data-testid": "mail-editor-footer", children: [saveError !== null ? (_jsx(Banner, { variant: "error", testId: "mail-editor-save-error", children: saveError })) : (_jsx("span", { className: `text-sm ${message === null ? "text-muted-foreground" : TONE_CLASS[message.tone]}`, "data-testid": "mail-editor-footer-message", "data-tone": message?.tone, children: message === null ? t("documentDesigner.editor.footer.checking") : message.text })), _jsx("div", { className: "grow" }), modifiedAt !== null && (_jsx(Text, { variant: "muted", testId: "mail-editor-saved-at", children: t("documentDesigner.mail.footer.savedAt", { when: formatWhen(modifiedAt) }) })), dirty && (_jsx(Button, { variant: "ghost", onClick: onDiscard, testId: "document-designer-discard", children: t("documentDesigner.editor.discard") })), _jsx(Button, { variant: "secondary", disabled: !canSave, loading: busy, onClick: onSave, testId: "document-designer-save", children: t("documentDesigner.editor.save") }), _jsx(Button, { disabled: !canPublish, onClick: onPublish, testId: "document-designer-publish", children: t("documentDesigner.editor.publish") })] }));
+}

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

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import type { TemplateRowView } from "./mail-types.js";
+export type EditorMode = "edit" | "preview";
+export type HeaderActions = {
+    readonly busy: boolean;
+    readonly canSave: boolean;
+    readonly canPublish: boolean;
+    readonly onSave: () => void;
+    readonly onPublish: () => void;
+};
+export declare function MailHeader({ title, row, locales, locale, mode, testPending, actions, onBack, onLocale, onMode, onTestMail, }: {
+    readonly title: string;
+    readonly row: TemplateRowView | null;
+    readonly locales: readonly string[];
+    readonly locale: string;
+    readonly mode: EditorMode;
+    readonly testPending: boolean;
+    readonly actions: HeaderActions;
+    readonly onBack: () => void;
+    readonly onLocale: (locale: string) => void;
+    readonly onMode: (mode: EditorMode) => void;
+    readonly onTestMail: () => void;
+}): ReactNode;

package/dist/web/mail-header.js

@@ -0,0 +1,16 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { ModeSwitch, StatusBadge } from "@cosmicdrift/kumiko-renderer-web";
+import { asRowStatus, statusLabel, statusTone } from "./status-label.js";
+export function MailHeader({ title, row, locales, locale, mode, testPending, actions, onBack, onLocale, onMode, onTestMail, }) {
+    const t = useTranslation();
+    const { Button, Heading, Link, Text } = usePrimitives();
+    const status = row === null ? null : asRowStatus(row.status);
+    return (_jsxs("div", { className: "flex flex-col gap-3", "data-testid": "mail-editor-header", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(Link, { href: "#", onPress: onBack, testId: "document-designer-back", children: t("documentDesigner.editor.crumb") }), _jsx(Text, { variant: "muted", children: "\u203A" }), _jsx(Heading, { variant: "page", testId: "document-designer-editor-title", children: title }), row !== null && status !== null && (_jsxs(_Fragment, { children: [_jsx(StatusBadge, { tone: statusTone(status), testId: "document-designer-editor-status", children: statusLabel(t, status, row.version) }), _jsx(StatusBadge, { tone: row.scope === "tenant" ? "accent" : "muted", testId: "document-designer-editor-origin", children: t(row.scope === "tenant"
+                                    ? "documentDesigner.origin.tenant"
+                                    : "documentDesigner.origin.system") })] })), _jsx("div", { className: "grow" }), _jsx(ModeSwitch, { value: locale, onChange: onLocale, ariaLabel: t("documentDesigner.mail.header.localeSwitch"), testId: "mail-locale-switch", options: locales.map((code) => ({ value: code, label: code })) }), _jsx(ModeSwitch, { value: mode, onChange: onMode, ariaLabel: t("documentDesigner.mail.header.modeSwitch"), testId: "mail-mode-switch", options: [
+                            { value: "edit", label: t("documentDesigner.mail.header.edit") },
+                            { value: "preview", label: t("documentDesigner.mail.header.preview") },
+                        ] })] }), _jsxs("div", { className: "flex items-center gap-3", "data-testid": "mail-editor-header-actions", children: [_jsx(Button, { variant: "secondary", disabled: testPending, loading: testPending, onClick: onTestMail, testId: "mail-test-mail-header", children: t("documentDesigner.mail.header.testMail") }), _jsx(Button, { variant: "secondary", disabled: !actions.canSave, loading: actions.busy, onClick: actions.onSave, testId: "mail-header-save", children: t("documentDesigner.editor.save") }), _jsx(Button, { disabled: !actions.canPublish, onClick: actions.onPublish, testId: "mail-header-publish", children: t("documentDesigner.editor.publish") })] })] }));
+}

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

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import type { LinkedResourceView, MailValidation } from "./mail-types.js";
+export declare function PlaceholderSection({ validation, onInsert, }: {
+    readonly validation: MailValidation | null;
+    readonly onInsert: (name: string) => void;
+}): ReactNode;
+export declare function SystemPlaceholderSection({ validation, onInsert, }: {
+    readonly validation: MailValidation | null;
+    readonly onInsert: (name: string) => void;
+}): ReactNode;
+export declare function ResourceSection({ resources, pdfTitles, canUpload, onUpload, onInsert, onRemove, }: {
+    readonly resources: readonly LinkedResourceView[];
+    readonly pdfTitles: ReadonlyMap<string, string>;
+    readonly canUpload: boolean;
+    readonly onUpload: () => void;
+    readonly onInsert: (key: string) => void;
+    readonly onRemove: (key: string) => void;
+}): ReactNode;

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

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