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

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

@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+import type { TemplateRowView } from "./mail-types.js";
+type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
+export declare function languageName(t: Translate, locale: string): string;
+export declare function MailOriginBar({ row, title, systemVersion, slug, locale, fallbackLocale, isSystemAdmin, creating, onCreateBlank, onReload, }: {
+    readonly row: TemplateRowView | null;
+    readonly title: string;
+    readonly systemVersion: number | null;
+    readonly slug: string;
+    readonly locale: string;
+    readonly fallbackLocale: string | null;
+    readonly isSystemAdmin: boolean;
+    readonly creating: boolean;
+    readonly onCreateBlank: () => void;
+    readonly onReload: () => void;
+}): ReactNode;
+export {};

package/dist/web/mail-origin-bar.js

@@ -0,0 +1,84 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { TemplateResolverHandlers } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { dispatcherErrorText, formatWhen, useMutation, usePrimitives, useTranslation, } from "@cosmicdrift/kumiko-renderer";
+import { useState } from "react";
+import { DiffPanel } from "./origin-bar.js";
+export function languageName(t, locale) {
+    const key = `documentDesigner.mail.language.${locale}`;
+    const translated = t(key);
+    return translated === key ? locale : translated;
+}
+function statusSentence(t, row) {
+    if (row.status === "active") {
+        return t("documentDesigner.mail.origin.activeSince", {
+            when: row.modifiedAt === null ? "–" : formatWhen(row.modifiedAt),
+        });
+    }
+    return t(row.status === "archived"
+        ? "documentDesigner.mail.origin.archived"
+        : "documentDesigner.mail.origin.notPublished");
+}
+const BAR_CLASS = "flex flex-wrap items-center gap-x-4 gap-y-2 rounded-md border px-4 py-2.5";
+function MissingLocaleBar({ slug, locale, fallbackLocale, copyScope, creating, onCreateBlank, onCopied, }) {
+    const t = useTranslation();
+    const { Banner, Button, Text } = usePrimitives();
+    const copyLocale = useMutation(TemplateResolverHandlers.copyLocale);
+    const [error, setError] = useState(null);
+    if (creating) {
+        return (_jsx("div", { className: `${BAR_CLASS} bg-muted`, "data-testid": "mail-origin-bar", children: _jsx(Text, { children: t("documentDesigner.mail.origin.creating", { language: languageName(t, locale) }) }) }));
+    }
+    const copy = async (from) => {
+        setError(null);
+        const result = await copyLocale.mutate({
+            slug,
+            kind: "mail",
+            fromLocale: from,
+            toLocale: locale,
+            overwrite: false,
+            scope: copyScope,
+        });
+        if (result.isSuccess)
+            onCopied();
+        else
+            setError(dispatcherErrorText(result.error, t));
+    };
+    return (_jsxs("div", { className: `${BAR_CLASS} border-status-warn bg-status-warn-surface`, "data-testid": "mail-origin-bar", "data-variant": "warn", children: [_jsxs(Text, { children: [t(fallbackLocale === null
+                        ? "documentDesigner.mail.origin.missingNoFallback"
+                        : "documentDesigner.mail.origin.missing", {
+                        language: languageName(t, locale),
+                        locale,
+                        fallback: fallbackLocale ?? "",
+                    }), fallbackLocale !== null && ` ${t("documentDesigner.mail.origin.copyNote")}`] }), _jsx("div", { className: "grow" }), fallbackLocale !== null && (_jsx(Button, { size: "sm", variant: "secondary", loading: copyLocale.pending, onClick: () => copy(fallbackLocale), testId: "mail-copy-locale", children: t("documentDesigner.mail.origin.copyFrom", { fallback: fallbackLocale }) })), _jsx(Button, { size: "sm", variant: "secondary", onClick: onCreateBlank, testId: "mail-create-blank", children: t("documentDesigner.mail.origin.createBlank") }), error !== null && (_jsx(Banner, { variant: "error", testId: "mail-copy-error", children: error }))] }));
+}
+function TenantOriginBar({ row, title, systemVersion, onReset, }) {
+    const t = useTranslation();
+    const { Button, Dialog, Drawer, Modal, Text } = usePrimitives();
+    const [diffOpen, setDiffOpen] = useState(false);
+    const [resetOpen, setResetOpen] = useState(false);
+    const resetToSystem = useMutation(TemplateResolverHandlers.resetToSystem);
+    const hasSystem = systemVersion !== null;
+    const diffTitle = t("documentDesigner.editor.diff.title");
+    const diffBody = _jsx(DiffPanel, { tenantId: row.id });
+    return (_jsxs("div", { className: `${BAR_CLASS} bg-muted`, "data-testid": "mail-origin-bar", children: [_jsxs(Text, { children: [hasSystem
+                        ? t("documentDesigner.mail.origin.overrides", { title, version: systemVersion })
+                        : t("documentDesigner.mail.origin.tenantOnly"), " ", statusSentence(t, row)] }), _jsx("div", { className: "grow" }), hasSystem && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "link", onClick: () => setDiffOpen(true), testId: "document-designer-diff-open", children: t("documentDesigner.editor.diff.open") }), _jsx(Button, { variant: "link", onClick: () => setResetOpen(true), testId: "document-designer-reset-open", children: t("documentDesigner.mail.origin.reset") })] })), diffOpen &&
+                (Drawer === undefined ? (_jsx(Modal, { open: true, onOpenChange: setDiffOpen, title: diffTitle, children: diffBody })) : (_jsx(Drawer, { open: true, onOpenChange: setDiffOpen, title: diffTitle, children: diffBody }))), _jsx(Dialog, { open: resetOpen, onOpenChange: setResetOpen, title: t("documentDesigner.mail.reset.title"), description: t("documentDesigner.mail.reset.description"), confirmLabel: t("documentDesigner.mail.reset.confirm"), variant: "danger", onConfirm: async () => {
+                    const result = await resetToSystem.mutate({ id: row.id });
+                    if (result.isSuccess)
+                        onReset();
+                } })] }));
+}
+export function MailOriginBar({ row, title, systemVersion, slug, locale, fallbackLocale, isSystemAdmin, creating, onCreateBlank, onReload, }) {
+    const t = useTranslation();
+    const { Text } = usePrimitives();
+    if (row === null) {
+        return (_jsx(MissingLocaleBar, { slug: slug, locale: locale, fallbackLocale: fallbackLocale, copyScope: isSystemAdmin ? "system" : "tenant", creating: creating, onCreateBlank: onCreateBlank, onCopied: onReload }));
+    }
+    if (row.scope === "tenant") {
+        return (_jsx(TenantOriginBar, { row: row, title: title, systemVersion: systemVersion, onReset: onReload }));
+    }
+    return (_jsx("div", { className: `${BAR_CLASS} bg-muted`, "data-testid": "mail-origin-bar", children: _jsx(Text, { children: t(isSystemAdmin
+                ? "documentDesigner.mail.origin.platform"
+                : "documentDesigner.mail.origin.system", { version: row.version }) }) }));
+}

package/dist/web/mail-pdf-link-modal.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import type { OverviewRowView } from "./overview-row.js";
+export declare function PdfLinkModal({ open, onOpenChange, templates, ...form }: {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    readonly templates: readonly OverviewRowView[];
+    readonly variableLabels: Readonly<Record<string, string>>;
+    readonly templateId: string;
+    readonly takenKeys: readonly string[];
+    readonly onLinked: () => void;
+}): ReactNode;

package/dist/web/mail-pdf-link-modal.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { PlaceholderLineEditor, TemplateResolverHandlers, TemplateResolverQueries, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { dispatcherErrorText, useMutation, usePrimitives, useQuery, useTranslation, } from "@cosmicdrift/kumiko-renderer";
+import { EmptyState } from "@cosmicdrift/kumiko-renderer-web";
+import { useState } from "react";
+import { lastSlugSegment, parseJsonRecord, uniqueResourceKey } from "./mail-draft.js";
+function pdfRowIdOf(summaries, slug) {
+    const ofSlug = (summaries ?? []).filter((row) => row.slug === slug);
+    return (ofSlug.find((row) => row.scope === "tenant") ?? ofSlug[0])?.id ?? null;
+}
+function PdfLinkForm({ templates, variableLabels, templateId, takenKeys, onLinked, }) {
+    const t = useTranslation();
+    const { Banner, Button, Field, Input } = usePrimitives();
+    const [slug, setSlug] = useState(templates[0]?.slug ?? "");
+    const [editedName, setEditedName] = useState(null);
+    const [error, setError] = useState(null);
+    const linkPdf = useMutation(TemplateResolverHandlers.resourceLinkPdf);
+    const summaries = useQuery(TemplateResolverQueries.list, {
+        kind: "document-pdf",
+        includeSystem: true,
+    });
+    const rowId = pdfRowIdOf(summaries.data, slug);
+    const row = useQuery(TemplateResolverQueries.findById, { id: rowId ?? "" }, { enabled: rowId !== null });
+    const metaName = parseJsonRecord(row.data?.meta)["fileName"];
+    const defaultName = typeof metaName === "string" && metaName !== "" ? metaName : `${lastSlugSegment(slug)}.pdf`;
+    const fileName = editedName ?? defaultName;
+    const link = async () => {
+        setError(null);
+        const result = await linkPdf.mutate({
+            templateId,
+            key: uniqueResourceKey(lastSlugSegment(slug), takenKeys),
+            templateSlug: slug,
+            fileName,
+        });
+        if (!result.isSuccess) {
+            setError(dispatcherErrorText(result.error, t));
+            return;
+        }
+        onLinked();
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [error !== null && (_jsx(Banner, { variant: "error", testId: "mail-pdf-link-error", children: error })), _jsx(Field, { id: "mail-pdf-template", label: t("documentDesigner.mail.pdfLink.template"), children: _jsx(Input, { kind: "select", id: "mail-pdf-template", name: "mail-pdf-template", value: slug, onChange: (next) => {
+                        setSlug(next);
+                        setEditedName(null);
+                    }, options: templates.map((template) => ({ value: template.slug, label: template.title })) }) }), _jsx(Field, { id: "mail-pdf-file-name", label: t("documentDesigner.mail.pdfLink.fileName"), description: t("documentDesigner.mail.pdfLink.fileNameHint"), children: _jsx(PlaceholderLineEditor, { id: "mail-pdf-file-name", value: fileName, onChange: setEditedName, variableLabels: variableLabels, "aria-label": t("documentDesigner.mail.pdfLink.fileName") }) }), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { disabled: slug === "" || fileName === "" || linkPdf.pending, loading: linkPdf.pending, onClick: link, testId: "mail-pdf-link-confirm", children: t("documentDesigner.mail.pdfLink.confirm") }) })] }));
+}
+export function PdfLinkModal({ open, onOpenChange, templates, ...form }) {
+    const t = useTranslation();
+    const { Modal } = usePrimitives();
+    return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, title: t("documentDesigner.mail.pdfLink.title"), testId: "mail-pdf-link-modal", children: templates.length === 0 ? (_jsx(EmptyState, { title: t("documentDesigner.mail.pdfLink.none") })) : (_jsx(PdfLinkForm, { templates: templates, ...form, onLinked: () => {
+                onOpenChange(false);
+                form.onLinked();
+            } })) }));
+}

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

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+import type { MailPreview, MailValidation } from "./mail-types.js";
+export declare function PreviewSide({ preview, validation, slug, locale, testMail, }: {
+    readonly preview: MailPreview | null;
+    readonly validation: MailValidation | null;
+    readonly slug: string;
+    readonly locale: string;
+    readonly testMail: {
+        readonly pending: boolean;
+        readonly onSend: () => void;
+    };
+}): ReactNode;

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

@@ -0,0 +1,48 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { useState } from "react";
+import { displayValue } from "./mail-draft.js";
+import { usePreviewRecordPicker } from "./preview-record-picker.js";
+import { RailHint, RailRow, RailSection } from "./rail.js";
+// Check params list names as arrays; the message templates expect one string.
+function checkText(t, check) {
+    const params = Object.fromEntries(Object.entries(check.params ?? {}).map(([name, value]) => [
+        name,
+        Array.isArray(value) ? value.join(", ") : value,
+    ]));
+    const translated = t(check.i18nKey, params);
+    return translated === check.i18nKey ? check.code : translated;
+}
+function SampleValues({ preview, validation, picked, }) {
+    const t = useTranslation();
+    const values = { ...(preview?.sampleValues ?? {}), ...(picked ?? {}) };
+    const names = Object.keys(validation?.variables ?? values);
+    return (_jsx(_Fragment, { children: names.map((name) => {
+            const missing = validation?.missingRequired.includes(name) === true;
+            return (_jsx(RailRow, { testId: `mail-sample-${name}`, label: validation?.variables[name]?.label ?? name, bad: missing, trailing: missing
+                    ? t("documentDesigner.mail.preview.missingInContent")
+                    : displayValue(t, values[name]) }, name));
+        }) }));
+}
+function RecordPickerLink({ slug, locale, onPick, }) {
+    const picker = usePreviewRecordPicker();
+    const { Button, Modal } = usePrimitives();
+    const [open, setOpen] = useState(false);
+    if (picker === null)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "link", onClick: () => setOpen(true), testId: "mail-record-picker-open", children: picker.label }), _jsx(Modal, { open: open, onOpenChange: setOpen, title: picker.label, testId: "mail-record-picker-modal", children: picker.renderPicker({
+                    slug,
+                    locale,
+                    onPick: (values) => {
+                        onPick(values);
+                        setOpen(false);
+                    },
+                }) })] }));
+}
+export function PreviewSide({ preview, validation, slug, locale, testMail, }) {
+    const t = useTranslation();
+    const { Button, Field, Text } = usePrimitives();
+    const [picked, setPicked] = useState(null);
+    return (_jsxs("div", { className: "flex flex-col", "data-testid": "mail-preview-side", children: [_jsxs(RailSection, { title: t("documentDesigner.mail.preview.samples"), action: _jsx(RecordPickerLink, { slug: slug, locale: locale, onPick: setPicked }), children: [_jsx(SampleValues, { preview: preview, validation: validation, picked: picked }), _jsx(RailHint, { children: t("documentDesigner.mail.preview.samplesHint") })] }), _jsxs(RailSection, { title: t("documentDesigner.mail.testMail.title"), children: [_jsxs("div", { className: "flex flex-col gap-2 px-2", children: [_jsx(Field, { id: "mail-test-recipient", label: t("documentDesigner.mail.testMail.recipient"), children: _jsx(Text, { children: t("documentDesigner.mail.testMail.ownAddress") }) }), _jsxs(Text, { variant: "muted", children: ["\u2713 ", t("documentDesigner.mail.testMail.prefix")] }), _jsxs(Text, { variant: "muted", children: ["\u2713 ", t("documentDesigner.mail.testMail.attachments")] }), _jsx(Button, { variant: "secondary", disabled: testMail.pending, loading: testMail.pending, onClick: testMail.onSend, testId: "mail-test-send", children: t("documentDesigner.mail.testMail.send") })] }), _jsx(RailHint, { children: t("documentDesigner.mail.testMail.hint") })] }), _jsx(RailSection, { title: t("documentDesigner.mail.preview.checks"), testId: "mail-preview-checks", children: (preview?.checks ?? []).map((check) => (_jsx(RailRow, { testId: `mail-check-${check.code}`, symbol: check.ok ? "✓" : "!", label: checkText(t, check), bad: !check.ok }, check.code))) })] }));
+}

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

@@ -0,0 +1,20 @@
+import { type ReactNode } from "react";
+import type { MailValidation } from "./mail-types.js";
+export type PreviewPayload = {
+    readonly slug: string;
+    readonly kind: "mail";
+    readonly locale: string;
+    readonly content: string;
+    readonly meta: Readonly<Record<string, unknown>>;
+    readonly variableSchema: unknown;
+};
+export declare function MailPreviewMode({ payload, validation, slug, locale, testMail, }: {
+    readonly payload: PreviewPayload;
+    readonly validation: MailValidation | null;
+    readonly slug: string;
+    readonly locale: string;
+    readonly testMail: {
+        readonly pending: boolean;
+        readonly onSend: () => void;
+    };
+}): ReactNode;

package/dist/web/mail-preview.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { TemplateResolverQueries } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { dispatcherErrorText, usePrimitives, useQuery, useTranslation, } from "@cosmicdrift/kumiko-renderer";
+import { LoadingState, ModeSwitch } from "@cosmicdrift/kumiko-renderer-web";
+import { useState } from "react";
+import { formatKilobytes } from "./mail-draft.js";
+import { PreviewSide } from "./mail-preview-side.js";
+function attachmentText(t, attachment) {
+    switch (attachment.kind) {
+        case "inline":
+            return null;
+        case "file":
+            return `⎘ ${attachment.name} · ${formatKilobytes(attachment.sizeBytes)}`;
+        case "rendered-pdf":
+            return `⎘ ${attachment.name} · ${t("documentDesigner.mail.preview.generatedOnSend")}`;
+    }
+}
+function MailFrame({ preview, format, width, }) {
+    const t = useTranslation();
+    const attachments = preview.attachments.flatMap((a) => attachmentText(t, a) ?? []);
+    return (_jsxs("div", { className: "flex flex-col overflow-hidden rounded-md border", "data-testid": "mail-preview-frame", children: [_jsxs("div", { className: "flex flex-col gap-1 border-b bg-muted px-4 py-3 text-sm", children: [_jsxs("div", { className: "flex gap-3", children: [_jsx("span", { className: "w-16 shrink-0 text-muted-foreground", children: t("documentDesigner.mail.meta.subject") }), _jsx("span", { className: "font-medium", "data-testid": "mail-preview-subject", children: preview.subject ?? "" })] }), attachments.length > 0 && (_jsxs("div", { className: "flex gap-3", children: [_jsx("span", { className: "w-16 shrink-0 text-muted-foreground", children: t("documentDesigner.mail.preview.attachments") }), _jsx("span", { className: "flex flex-col", "data-testid": "mail-preview-attachments", children: attachments.map((line) => (_jsx("span", { children: line }, line))) })] }))] }), format === "html" ? (_jsx("iframe", { title: t("documentDesigner.mail.preview.frameTitle"), sandbox: "", srcDoc: preview.displayHtml ?? preview.html, className: `h-[560px] border-0 bg-background ${width === "mobile" ? "w-[375px] self-center" : "w-full"}`, "data-testid": "mail-preview-iframe" })) : (_jsx("pre", { className: "h-[560px] overflow-auto whitespace-pre-wrap p-4 font-mono text-sm", "data-testid": "mail-preview-text", children: preview.text ?? "" }))] }));
+}
+function layoutText(t, preview) {
+    return preview?.layout == null
+        ? t("documentDesigner.mail.preview.barPlain")
+        : t("documentDesigner.mail.preview.bar", { layout: preview.layout.slug });
+}
+export function MailPreviewMode({ payload, validation, slug, locale, testMail, }) {
+    const t = useTranslation();
+    const { Banner } = usePrimitives();
+    const [format, setFormat] = useState("html");
+    const [width, setWidth] = useState("desktop");
+    const query = useQuery(TemplateResolverQueries.preview, payload);
+    const preview = query.data;
+    return (_jsxs("div", { className: "flex flex-col gap-3", "data-testid": "mail-editor-preview", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2 rounded-md border bg-muted px-4 py-2.5", children: [_jsx("span", { className: "text-sm", "data-testid": "mail-preview-bar", children: layoutText(t, preview) }), _jsx("div", { className: "grow" }), _jsx(ModeSwitch, { value: format, onChange: setFormat, ariaLabel: t("documentDesigner.mail.preview.formatSwitch"), testId: "mail-preview-format", options: [
+                            { value: "html", label: t("documentDesigner.mail.preview.html") },
+                            { value: "text", label: t("documentDesigner.mail.preview.text") },
+                        ] }), _jsx(ModeSwitch, { value: width, onChange: setWidth, ariaLabel: t("documentDesigner.mail.preview.widthSwitch"), testId: "mail-preview-width", options: [
+                            { value: "desktop", label: t("documentDesigner.mail.preview.desktop") },
+                            { value: "mobile", label: t("documentDesigner.mail.preview.mobile") },
+                        ] })] }), _jsxs("div", { className: "grid items-start gap-4 lg:grid-cols-[minmax(0,1fr)_300px]", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-3", children: [query.error !== null && (_jsx(Banner, { variant: "error", testId: "mail-preview-error", children: dispatcherErrorText(query.error, t) })), preview === null ? (query.error === null && _jsx(LoadingState, {})) : (_jsx(MailFrame, { preview: preview, format: format, width: width }))] }), _jsx(PreviewSide, { preview: preview, validation: validation, slug: slug, locale: locale, testMail: testMail })] })] }));
+}

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import type { LinkedResourceView, MailDraft } from "./mail-types.js";
+import type { OverviewRowView } from "./overview-row.js";
+export declare function layoutOptionLabel(t: (key: string, params?: Readonly<Record<string, unknown>>) => string, layout: OverviewRowView): string;
+export declare function AttachmentSection({ attachments, pdfTitles, canEdit, onAddPdf, onRemove, }: {
+    readonly attachments: readonly LinkedResourceView[];
+    readonly pdfTitles: ReadonlyMap<string, string>;
+    readonly canEdit: boolean;
+    readonly onAddPdf: () => void;
+    readonly onRemove: (key: string) => void;
+}): ReactNode;
+export declare function PropertiesSection({ draft, layouts, onChange, }: {
+    readonly draft: MailDraft;
+    readonly layouts: readonly OverviewRowView[];
+    readonly onChange: (patch: Partial<MailDraft>) => void;
+}): ReactNode;
+export declare function UsageSection({ slug }: {
+    readonly slug: string;
+}): ReactNode;

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

@@ -0,0 +1,47 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { TemplateResolverQueries } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { usePrimitives, useQuery, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { DEFAULT_LAYOUT_SLUG } from "../constants.js";
+import { RailHint, RailRow, RailSection } from "./rail.js";
+import { usageParts } from "./used-by-label.js";
+export function layoutOptionLabel(t, layout) {
+    return t(layout.origin === "tenant"
+        ? "documentDesigner.mail.props.layoutTenant"
+        : "documentDesigner.mail.props.layoutSystem", { title: layout.title, version: layout.version });
+}
+function UsageRows({ slug }) {
+    const t = useTranslation();
+    const { data } = useQuery(TemplateResolverQueries.usage, {
+        slug,
+        kind: "mail",
+    });
+    return (_jsx(_Fragment, { children: (data?.usedBy ?? []).map((usage) => {
+            const parts = usageParts(t, usage);
+            return (_jsx(RailRow, { label: t("documentDesigner.mail.usage.line", parts), testId: "mail-usage-row" }, `${usage.feature}:${usage.notification}`));
+        }) }));
+}
+export function AttachmentSection({ attachments, pdfTitles, canEdit, onAddPdf, onRemove, }) {
+    const t = useTranslation();
+    const { Button } = usePrimitives();
+    return (_jsxs(RailSection, { title: t("documentDesigner.mail.attachments.title"), testId: "mail-editor-attachments", action: _jsx(Button, { variant: "link", disabled: !canEdit, onClick: onAddPdf, testId: "mail-attachment-pdf-open", children: t("documentDesigner.mail.attachments.addPdf") }), children: [attachments.length === 0 && (_jsx(RailHint, { children: t("documentDesigner.mail.attachments.none") })), attachments.map((attachment) => (_jsxs("div", { className: "flex items-center gap-1", "data-testid": "mail-attachment-row", children: [_jsx("div", { className: "min-w-0 grow", children: attachment.kind === "pdf" ? (_jsx(RailRow, { symbol: "\u2398", label: t("documentDesigner.mail.attachments.pdfRow", {
+                                title: pdfTitles.get(attachment.templateSlug) ?? attachment.templateSlug,
+                            }), trailing: attachment.fileName })) : (_jsx(RailRow, { symbol: "\u2398", label: attachment.kind === "file" ? attachment.fileName : attachment.key, trailing: t("documentDesigner.mail.attachments.file") })) }), _jsx(Button, { variant: "danger-ghost", size: "sm", onClick: () => onRemove(attachment.key), testId: `mail-attachment-remove-${attachment.key}`, children: t("documentDesigner.mail.resource.remove") })] }, attachment.key)))] }));
+}
+export function PropertiesSection({ draft, layouts, onChange, }) {
+    const t = useTranslation();
+    const { Field, Input, Text } = usePrimitives();
+    const layoutValue = draft.layoutSlug === "" ? DEFAULT_LAYOUT_SLUG : draft.layoutSlug;
+    const categoryValue = draft.category === "" ? "transactional" : draft.category;
+    return (_jsxs(RailSection, { title: t("documentDesigner.mail.props.title"), testId: "mail-editor-properties", children: [_jsxs("div", { className: "flex flex-col gap-3 px-2", children: [_jsx(Field, { id: "mail-layout", label: t("documentDesigner.mail.props.layout"), children: _jsx(Input, { kind: "select", id: "mail-layout", name: "mail-layout", value: layoutValue, onChange: (next) => onChange({ layoutSlug: next }), options: layouts.map((layout) => ({
+                                value: layout.slug,
+                                label: layoutOptionLabel(t, layout),
+                            })) }) }), _jsx(Field, { id: "mail-sender", label: t("documentDesigner.mail.props.sender"), children: _jsx(Text, { testId: "mail-sender", children: t("documentDesigner.mail.props.senderDefault") }) }), _jsx(Field, { id: "mail-category", label: t("documentDesigner.mail.props.category"), children: _jsx(Input, { kind: "select", id: "mail-category", name: "mail-category", value: categoryValue, onChange: (next) => onChange({ category: next === "marketing" ? "marketing" : "transactional" }), options: [
+                                { value: "transactional", label: t("documentDesigner.mail.props.transactional") },
+                                { value: "marketing", label: t("documentDesigner.mail.props.marketing") },
+                            ] }) })] }), _jsx(RailHint, { children: t("documentDesigner.mail.props.categoryHint") })] }));
+}
+export function UsageSection({ slug }) {
+    const t = useTranslation();
+    return (_jsxs(RailSection, { title: t("documentDesigner.mail.usage.title"), testId: "mail-editor-usage", children: [_jsx(UsageRows, { slug: slug }), _jsx(RailHint, { children: t("documentDesigner.mail.usage.hint") })] }));
+}

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

@@ -0,0 +1,112 @@
+import type { ValidationIssue } from "./layout-types.js";
+export type PlaceholderType = "text" | "money" | "date" | "link" | "list";
+export type MailVariable = {
+    readonly type: PlaceholderType;
+    readonly label?: string;
+    readonly required?: boolean;
+    readonly example?: unknown;
+    readonly item?: Readonly<Record<string, {
+        readonly type: PlaceholderType;
+        readonly label?: string;
+    }>>;
+};
+export type MailWarning = {
+    readonly code: string;
+    readonly detail: string;
+    readonly i18nKey: string;
+};
+export type MailValidation = {
+    readonly canSave: boolean;
+    readonly canPublish: boolean;
+    readonly issues: readonly ValidationIssue[];
+    readonly publishIssues: readonly ValidationIssue[];
+    readonly used: readonly string[];
+    readonly unknown: readonly string[];
+    readonly missingRequired: readonly string[];
+    readonly warnings: readonly MailWarning[];
+    readonly variables: Readonly<Record<string, MailVariable>>;
+    readonly systemPlaceholders: readonly string[];
+};
+export type PreviewAttachment = {
+    readonly kind: "inline";
+    readonly name: string;
+    readonly sizeBytes: number;
+} | {
+    readonly kind: "file";
+    readonly name: string;
+    readonly sizeBytes: number;
+} | {
+    readonly kind: "rendered-pdf";
+    readonly name: string;
+    readonly templateSlug: string;
+};
+export type PreviewCheck = {
+    readonly code: string;
+    readonly ok: boolean;
+    readonly i18nKey: string;
+    readonly params?: Readonly<Record<string, unknown>>;
+};
+export type MailPreview = {
+    readonly subject: string | null;
+    readonly html: string;
+    readonly displayHtml?: string;
+    readonly text: string | null;
+    readonly attachments: readonly PreviewAttachment[];
+    readonly layout: {
+        readonly slug: string;
+        readonly scope: string;
+    } | null;
+    readonly sampleValues: Readonly<Record<string, unknown>>;
+    readonly checks: readonly PreviewCheck[];
+};
+export type TemplateRowSummary = {
+    readonly id: string;
+    readonly slug: string;
+    readonly kind: string;
+    readonly locale: string;
+    readonly scope: "tenant" | "system";
+    readonly status: string;
+    readonly modifiedAt: string;
+};
+export type TemplateRowView = {
+    readonly id: string;
+    readonly version: number;
+    readonly slug: string;
+    readonly locale: string;
+    readonly scope: "tenant" | "system";
+    readonly status: string;
+    readonly content: string;
+    readonly variableSchema: unknown;
+    readonly linkedResources: unknown;
+    readonly meta: unknown;
+    readonly modifiedAt: string | null;
+};
+export type MailCategory = "" | "transactional" | "marketing";
+export type MailDraft = {
+    readonly subject: string;
+    readonly previewText: string;
+    readonly layoutSlug: string;
+    readonly category: MailCategory;
+    readonly body: string;
+};
+export type LinkedResourceView = {
+    readonly kind: "image";
+    readonly key: string;
+    readonly fileRefId: string;
+} | {
+    readonly kind: "file";
+    readonly key: string;
+    readonly fileRefId: string;
+    readonly fileName: string;
+} | {
+    readonly kind: "pdf";
+    readonly key: string;
+    readonly templateSlug: string;
+    readonly fileName: string;
+};
+export type UpsertResponse = {
+    readonly id: string;
+};
+export type SendTestResponse = {
+    readonly subject: string;
+};

package/dist/web/mail-types.js

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

package/dist/web/mail-upload-modal.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+export type UploadedResource = {
+    readonly key: string;
+    readonly purpose: "image" | "attachment";
+};
+type UploadTarget = {
+    readonly templateId: string;
+    readonly takenKeys: readonly string[];
+    readonly onUploaded: (uploaded: UploadedResource) => void;
+};
+export declare function UploadModal({ open, onOpenChange, target, }: {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    readonly target: UploadTarget;
+}): ReactNode;
+export {};

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { TemplateResolverHandlers } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { dispatcherErrorText, useMutation, usePrimitives, useTranslation, } from "@cosmicdrift/kumiko-renderer";
+import { useState } from "react";
+import { fetchStoredFileName } from "./file-name.js";
+import { uniqueResourceKey } from "./mail-draft.js";
+const IMAGE_ACCEPT = ["image/png", "image/jpeg", "image/gif", "image/webp"];
+function useResourceUpload(target) {
+    const t = useTranslation();
+    const resourceUpload = useMutation(TemplateResolverHandlers.resourceUpload);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const upload = async (fileRefId, purpose) => {
+        if (fileRefId === null)
+            return;
+        setError(null);
+        setBusy(true);
+        try {
+            const fileName = await fetchStoredFileName(fileRefId);
+            if (fileName === null) {
+                setError(t("documentDesigner.mail.upload.noFileName"));
+                return;
+            }
+            const key = uniqueResourceKey(fileName, target.takenKeys);
+            const result = await resourceUpload.mutate({
+                sourceFileRefId: fileRefId,
+                templateId: target.templateId,
+                key,
+                purpose,
+                ...(purpose === "attachment" && { fileName }),
+            });
+            if (!result.isSuccess) {
+                setError(dispatcherErrorText(result.error, t));
+                return;
+            }
+            target.onUploaded({ key, purpose });
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return { upload, error, busy };
+}
+export function UploadModal({ open, onOpenChange, target, }) {
+    const t = useTranslation();
+    const { Banner, Field, Input, Modal, Text } = usePrimitives();
+    const { upload, error, busy } = useResourceUpload({
+        ...target,
+        onUploaded: (uploaded) => {
+            onOpenChange(false);
+            target.onUploaded(uploaded);
+        },
+    });
+    return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, title: t("documentDesigner.mail.upload.title"), testId: "mail-upload-modal", children: _jsxs("div", { className: "flex flex-col gap-4", children: [error !== null && (_jsx(Banner, { variant: "error", testId: "mail-upload-error", children: error })), busy && _jsx(Text, { variant: "muted", children: t("documentDesigner.mail.upload.busy") }), _jsx(Field, { id: "mail-upload-image", label: t("documentDesigner.mail.upload.image"), description: t("documentDesigner.mail.upload.imageHint"), children: _jsx(Input, { kind: "file", id: "mail-upload-image", name: "mail-upload-image", value: null, accept: IMAGE_ACCEPT, disabled: busy, onChange: (fileId) => void upload(fileId, "image") }) }), _jsx(Field, { id: "mail-upload-attachment", label: t("documentDesigner.mail.upload.attachment"), description: t("documentDesigner.mail.upload.attachmentHint"), children: _jsx(Input, { kind: "file", id: "mail-upload-attachment", name: "mail-upload-attachment", value: null, disabled: busy, onChange: (fileId) => void upload(fileId, "attachment") }) })] }) }));
+}

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

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+export declare function VersionsSection({ rowId, currentVersion, currentStatus, }: {
+    readonly rowId: string | null;
+    readonly currentVersion: number;
+    readonly currentStatus: string;
+}): ReactNode;

package/dist/web/mail-versions.js

@@ -0,0 +1,43 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+// @runtime client
+import { formatWhen, useAppFeatures, useQuery, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { StatusBadge } from "@cosmicdrift/kumiko-renderer-web";
+import { RailRow, RailSection } from "./rail.js";
+import { asRowStatus, statusLabel, statusTone } from "./status-label.js";
+const AUDIT_FEATURE = "audit";
+const AUDIT_LIST_QUERY = "audit:query:list";
+const MEMBER_DIRECTORY_QUERY = "tenant:query:member-directory";
+const VERSION_LIMIT = 20;
+function VersionRows({ rowId, currentVersion, currentStatus, }) {
+    const t = useTranslation();
+    const audit = useQuery(AUDIT_LIST_QUERY, {
+        aggregateType: "template-resource",
+        aggregateId: rowId,
+        limit: VERSION_LIMIT,
+    });
+    const members = useQuery(MEMBER_DIRECTORY_QUERY, { limit: 200 });
+    const names = new Map((members.data?.rows ?? []).map((member) => [member.id, member.label]));
+    const status = asRowStatus(currentStatus);
+    // The event log has one entry per change; show each version once, newest first.
+    const seen = new Set();
+    const versions = (audit.data?.rows ?? []).filter((row) => {
+        if (seen.has(row.version))
+            return false;
+        seen.add(row.version);
+        return true;
+    });
+    return (_jsx(_Fragment, { children: versions.map((row) => (_jsx(RailRow, { testId: `mail-version-${row.version}`, label: t("documentDesigner.mail.versions.line", {
+                version: row.version,
+                when: formatWhen(row.createdAt),
+                name: names.get(row.createdBy) ?? "–",
+            }), trailing: row.version === currentVersion ? (_jsx(StatusBadge, { tone: statusTone(status), children: statusLabel(t, status, row.version) })) : undefined }, row.version))) }));
+}
+// Hidden when the audit feature is not mounted, so no failing query shows up as an error.
+export function VersionsSection({ rowId, currentVersion, currentStatus, }) {
+    const t = useTranslation();
+    const features = useAppFeatures();
+    if (rowId === null || !features.some((feature) => feature.featureName === AUDIT_FEATURE)) {
+        return null;
+    }
+    return (_jsx(RailSection, { title: t("documentDesigner.mail.versions.title"), testId: "mail-editor-versions", children: _jsx(VersionRows, { rowId: rowId, currentVersion: currentVersion, currentStatus: currentStatus }) }));
+}

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

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+import type { LayoutKind, LayoutSourceView, TenantOverrideCounts } from "./layout-types.js";
+export declare function DiffPanel({ tenantId }: {
+    readonly tenantId: string;
+}): ReactNode;
+export declare function OriginBar({ isSystemAdmin, source, kind, userCount, overrides, onReset, }: {
+    readonly isSystemAdmin: boolean;
+    readonly source: LayoutSourceView;
+    readonly kind: LayoutKind;
+    readonly userCount: number;
+    readonly overrides: TenantOverrideCounts | null;
+    readonly onReset: () => void;
+}): ReactNode;