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

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

@@ -0,0 +1,209 @@
+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 { EditorHeader, EditorLocaleSwitch, EditorModeSwitch, originOf, } from "./editor-header.js";
+import { EditorBody, EditorFooter, EditorFrame } from "./editor-shell.js";
+import { fileUrl } from "./file-name.js";
+import { MailConfirmDialogs } from "./mail-dialogs.js";
+import { buildMeta, isDraftDirty, loadedMailOf, parseJsonRecord, parseLinkedResources, systemLabelMap, variableLabelMap, } from "./mail-draft.js";
+import { MailEditCenter } from "./mail-edit-center.js";
+import { footerMessage, metaFieldMessages } from "./mail-footer.js";
+import { PlaceholderSection, ResourceSection, SystemPlaceholderSection } from "./mail-left-rail.js";
+import { MissingLocaleCanvas } from "./mail-missing-locale.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 { useOwnAddress } from "./use-own-address.js";
+import { useSettledValue } from "./use-settled-value.js";
+import { useTestMail } from "./use-test-mail.js";
+// The editor replaces this token with the decoded image size once the preview image loaded.
+const SIZE_TOKEN = "{size}";
+function uniqueValues(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 uniqueValues([...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);
+    const [settled, settle] = useSettledValue(baseline);
+    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 [resetError, setResetError] = useState(null);
+    const [editorEpoch, setEditorEpoch] = useState(0);
+    const [includeAttachments, setIncludeAttachments] = useState(true);
+    const [prefixSubject, setPrefixSubject] = useState(true);
+    const insert = useInsertTargets();
+    const persistence = useMailPersistence({
+        slug,
+        locale,
+        title,
+        isSystemAdmin,
+        row,
+    });
+    const testMail = useTestMail();
+    const own = useOwnAddress();
+    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),
+        variableSchema,
+        locale,
+        scope: isSystemAdmin ? "system" : "tenant",
+    }).data;
+    const update = (patch) => {
+        const next = { ...draft, ...patch };
+        setDraft(next);
+        settle(next);
+    };
+    const reset = () => {
+        setDraft(baseline);
+        settle(baseline);
+        setEditorEpoch((epoch) => epoch + 1);
+        persistence.clearError();
+    };
+    const dirty = isDraftDirty(draft, baseline);
+    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 saveDraft = () => void saveAndReload(false);
+    const perform = (target) => props.onLocaleChange(target.locale);
+    const leave = (target) => {
+        if (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,
+                        size: SIZE_TOKEN,
+                    }),
+                },
+            ],
+        ]
+        : []));
+    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),
+            variableSchema,
+            includeAttachments,
+            prefixSubject,
+        });
+    };
+    // Nothing is written yet in a missing language, so no placeholder may read as missing.
+    const railValidation = locked && validation != null ? { ...validation, missingRequired: [] } : (validation ?? null);
+    const names = placeholderNames(validation ?? null);
+    const vocabulary = {
+        names,
+        labels: {
+            ...systemLabelMap(t, validation?.systemPlaceholders ?? []),
+            ...variableLabelMap(validation?.variables ?? {}),
+        },
+        system: validation?.systemPlaceholders ?? [],
+    };
+    const attachments = resources.filter((resource) => resource.kind !== "image");
+    const footer = locked || validation === undefined || validation === null
+        ? null
+        : footerMessage(t, validation, mode === "preview");
+    const fieldErrors = locked ? {} : metaFieldMessages(t, validation ?? null);
+    const publish = () => void saveAndReload(true);
+    const controls = (_jsx(EditorLocaleSwitch, { testIdPrefix: "mail", locales: props.locales, locale: locale, onLocale: (next) => leave({ kind: "locale", locale: next }) }));
+    const origin = row === null ? null : originOf(row.scope !== "tenant", props.systemVersion !== null);
+    return (_jsxs(EditorFrame, { testId: "document-designer-mail-editor", children: [_jsx(EditorHeader, { title: title, stored: row === null ? null : { status: row.status, version: row.version }, actions: { busy, canSave, canPublish, onSave: saveDraft, onPublish: publish }, children: _jsx(EditorModeSwitch, { testIdPrefix: "mail", mode: mode, onMode: setMode }) }), mode === "edit" && (_jsx(MailOriginBar, { row: row, systemVersion: props.systemVersion, locale: locale, isSystemAdmin: isSystemAdmin, creating: creating, controls: controls, onReload: () => {
+                    setResetError(null);
+                    void onReload();
+                }, onResetError: setResetError })), 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 })), resetError !== null && (_jsx(Banner, { variant: "error", testId: "mail-reset-error", children: resetError })), resourceError !== null && (_jsx(Banner, { variant: "error", testId: "mail-resource-error", children: resourceError })), mode === "edit" ? (_jsx(EditorBody, { left: _jsxs(_Fragment, { children: [_jsx(PlaceholderSection, { validation: railValidation, onInsert: insert.insertPlaceholder }), _jsx(SystemPlaceholderSection, { validation: railValidation, onInsert: insert.insertPlaceholder }), _jsx(ResourceSection, { resources: resources, pdfTitles: pdfTitles, canUpload: uploadTemplateId !== null, onUpload: () => setUploadOpen(true), onInsert: insert.insertResource, onRemove: (key) => setDialog({ kind: "remove", key }) })] }), center: locked ? (_jsx(MissingLocaleCanvas, { slug: slug, locale: locale, fallbackLocale: props.fallbackLocale, copyScope: isSystemAdmin ? "system" : "tenant", onCreateBlank: () => setCreating(true), onCopied: () => void onReload() })) : (_jsx(MailEditCenter, { draft: draft, vocabulary: vocabulary, resourcePreviews: resourcePreviews, insert: insert, readOnly: false, fieldErrors: fieldErrors, onChange: update }, editorEpoch)), right: _jsxs(_Fragment, { children: [_jsx(PropertiesSection, { draft: draft, layouts: layouts.rows, onChange: update }), _jsx(AttachmentSection, { attachments: attachments, 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),
+                    variableSchema,
+                }, validation: validation ?? null, slug: slug, locale: locale, fromName: settled.senderName, own: own, origin: origin, controls: controls, testMail: {
+                    pending: testMail.pending,
+                    onSend: sendTestMail,
+                    includeAttachments,
+                    onIncludeAttachments: setIncludeAttachments,
+                    prefixSubject,
+                    onPrefixSubject: setPrefixSubject,
+                } })), !locked && (_jsx(EditorFooter, { testIdPrefix: "mail-editor", message: footer, saveError: persistence.error, modifiedAt: row?.modifiedAt ?? null, dirty: dirty, busy: busy, canSave: canSave, canPublish: canPublish, onDiscard: () => setDialog({ kind: "discard" }), onSave: saveDraft, onPublish: publish })), 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" });
+                }, 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,68 @@
+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 } 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 [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();
+        } }, `${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,10 @@
+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;
+};
+declare const MAIL_META_FIELDS: readonly ["subject", "previewText"];
+export type MailMetaField = (typeof MAIL_META_FIELDS)[number];
+export declare function metaFieldMessages(t: Translate, validation: MailValidation | null): Partial<Record<MailMetaField, string>>;
+export {};

package/dist/web/mail-footer.js

@@ -0,0 +1,43 @@
+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 MAIL_META_FIELDS = ["subject", "previewText"];
+// The server names the setting and the reason per issue; the field itself shows that sentence.
+export function metaFieldMessages(t, validation) {
+    if (validation === null)
+        return {};
+    const messages = {};
+    for (const field of MAIL_META_FIELDS) {
+        const issue = validation.issues.find((candidate) => candidate.path === `meta.${field}`);
+        if (issue !== undefined)
+            messages[field] = issueText(t, issue);
+    }
+    return messages;
+}

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

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import type { LinkedResourceView, MailValidation } from "./mail-types.js";
+export type PlaceholderSource = Pick<MailValidation, "variables" | "used" | "missingRequired" | "systemPlaceholders">;
+export declare function PlaceholderSection({ validation, onInsert, idPrefix, }: {
+    readonly validation: PlaceholderSource | null;
+    readonly onInsert: (name: string) => void;
+    readonly idPrefix?: string;
+}): ReactNode;
+export declare function SystemPlaceholderSection({ validation, onInsert, idPrefix, isLayoutOwned, }: {
+    readonly validation: PlaceholderSource | null;
+    readonly onInsert: (name: string) => void;
+    readonly idPrefix?: string;
+    /** Placeholders the layout fills in, so a template that never uses them is fine. */
+    readonly isLayoutOwned?: (name: string) => boolean;
+}): 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,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { LAYOUT_OWNED_PLACEHOLDERS, PLACEHOLDER_SYMBOL, SYSTEM_PLACEHOLDER_TYPE, systemPlaceholderLabel, } from "./mail-draft.js";
+import { RailHint, RailRow, RailSection } from "./rail.js";
+function placeholderStatus(t, validation, name) {
+    if (validation.missingRequired.includes(name)) {
+        return { text: t("documentDesigner.mail.placeholder.missing"), tone: "bad" };
+    }
+    return validation.used.includes(name) ? { text: "✓", tone: "ok" } : { text: "–", tone: "muted" };
+}
+export function PlaceholderSection({ validation, onInsert, idPrefix = "mail", }) {
+    const t = useTranslation();
+    const entries = Object.entries(validation?.variables ?? {});
+    return (_jsxs(RailSection, { title: t("documentDesigner.mail.placeholder.title"), testId: `${idPrefix}-editor-placeholders`, children: [validation !== null &&
+                entries.map(([name, variable]) => {
+                    const status = placeholderStatus(t, validation, name);
+                    return (_jsx(RailRow, { testId: `${idPrefix}-placeholder-${name}`, symbol: PLACEHOLDER_SYMBOL[variable.type], label: variable.label ?? name, required: variable.required === true, bad: validation.missingRequired.includes(name), trailing: status.text, trailingTone: status.tone, onPress: () => onInsert(name) }, name));
+                }), _jsx(RailHint, { children: t("documentDesigner.mail.placeholder.hint") })] }));
+}
+export function SystemPlaceholderSection({ validation, onInsert, idPrefix = "mail", isLayoutOwned = (name) => LAYOUT_OWNED_PLACEHOLDERS.has(name), }) {
+    const t = useTranslation();
+    return (_jsxs(RailSection, { title: t("documentDesigner.mail.system.title"), testId: `${idPrefix}-editor-system-placeholders`, children: [(validation?.systemPlaceholders ?? []).map((name) => {
+                const used = validation?.used.includes(name) === true;
+                const layoutOwned = !used && isLayoutOwned(name);
+                return (_jsx(RailRow, { testId: `${idPrefix}-system-${name}`, symbol: PLACEHOLDER_SYMBOL[SYSTEM_PLACEHOLDER_TYPE[name] ?? "text"], label: systemPlaceholderLabel(t, name), trailing: used ? "✓" : layoutOwned ? t("documentDesigner.mail.system.layout") : "–", trailingTone: used ? "ok" : "muted", onPress: () => onInsert(name) }, name));
+            }), _jsx(RailHint, { children: t("documentDesigner.mail.system.hint") })] }));
+}
+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 (_jsx(RailRow, { testId: "mail-resource-row", symbol: row.symbol, label: row.label, trailing: row.meta, action: _jsx(Button, { variant: "danger-ghost", size: "sm", onClick: () => onRemove(resource.key), testId: `mail-resource-remove-${resource.key}`, children: t("documentDesigner.mail.resource.remove") }), ...(resource.kind === "image" && { onPress: () => onInsert(resource.key) }) }, resource.key));
+            }), _jsx(RailHint, { children: t("documentDesigner.mail.resource.hint") })] }));
+}

package/dist/web/mail-missing-locale.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+export declare function languageAdjective(t: (key: string, params?: Readonly<Record<string, unknown>>) => string, locale: string): string;
+export declare function MissingLocaleCanvas({ slug, locale, fallbackLocale, copyScope, onCreateBlank, onCopied, }: {
+    readonly slug: string;
+    readonly locale: string;
+    readonly fallbackLocale: string | null;
+    readonly copyScope: "tenant" | "system";
+    readonly onCreateBlank: () => void;
+    readonly onCopied: () => void;
+}): ReactNode;

package/dist/web/mail-missing-locale.js

@@ -0,0 +1,45 @@
+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 { languageName } from "./mail-origin-bar.js";
+export function languageAdjective(t, locale) {
+    const key = `documentDesigner.mail.languageAdjective.${locale}`;
+    const translated = t(key);
+    return translated === key ? locale : translated;
+}
+// Shown in place of the editor while a language has no version yet: nothing to edit, so no
+// subject line, toolbar or properties; the two ways to get a version sit right here.
+export function MissingLocaleCanvas({ slug, locale, fallbackLocale, copyScope, onCreateBlank, onCopied, }) {
+    const t = useTranslation();
+    const { Banner, Button } = usePrimitives();
+    const copyLocale = useMutation(TemplateResolverHandlers.copyLocale);
+    const [error, setError] = useState(null);
+    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 (_jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center p-8", "data-testid": "mail-missing-locale", children: _jsxs("div", { className: "flex max-w-md flex-col items-center gap-4 text-center", children: [_jsx("p", { className: "m-0 text-base", children: fallbackLocale === null
+                        ? t("documentDesigner.mail.missing.textNoFallback", {
+                            language: languageName(t, locale),
+                        })
+                        : t("documentDesigner.mail.missing.text", {
+                            language: languageName(t, locale),
+                            locale,
+                            fallbackAdjective: languageAdjective(t, fallbackLocale),
+                        }) }), _jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [fallbackLocale !== null && (_jsx(Button, { variant: "primary", disabled: copyLocale.pending, onClick: () => copy(fallbackLocale), testId: "mail-copy-locale", children: t("documentDesigner.mail.missing.copy", {
+                                language: languageName(t, fallbackLocale),
+                            }) })), _jsx(Button, { variant: "secondary", onClick: onCreateBlank, testId: "mail-create-blank", children: t("documentDesigner.mail.origin.createBlank") })] }), fallbackLocale !== null && (_jsx("p", { className: "m-0 text-xs text-muted-foreground", children: t("documentDesigner.mail.origin.copyNote") })), error !== null && (_jsx(Banner, { variant: "error", testId: "mail-copy-error", children: error }))] }) }));
+}

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

@@ -0,0 +1,15 @@
+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, systemVersion, locale, isSystemAdmin, creating, controls, onReload, onResetError, }: {
+    readonly row: TemplateRowView | null;
+    readonly systemVersion: number | null;
+    readonly locale: string;
+    readonly isSystemAdmin: boolean;
+    readonly creating: boolean;
+    readonly controls: ReactNode;
+    readonly onReload: () => void;
+    readonly onResetError: (message: string) => void;
+}): ReactNode;
+export {};

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

@@ -0,0 +1,60 @@
+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 { originOf } from "./editor-header.js";
+import { EditorInfoBar } from "./editor-shell.js";
+import { DiffDrawer } from "./origin-bar.js";
+import { draftBesideActiveSentence } from "./status-label.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) {
+    const besideActive = draftBesideActiveSentence(t, row);
+    if (besideActive !== null)
+        return besideActive;
+    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");
+}
+function MissingLocaleBar({ locale, creating, controls, }) {
+    const t = useTranslation();
+    return creating ? (_jsx(EditorInfoBar, { tone: "muted", testId: "mail-origin-bar", controls: controls, children: t("documentDesigner.mail.origin.creating", { language: languageName(t, locale) }) })) : (_jsx(EditorInfoBar, { tone: "warn", testId: "mail-origin-bar", controls: controls, children: t("documentDesigner.mail.origin.missing", { language: languageName(t, locale) }) }));
+}
+function TenantOriginBar({ row, systemVersion, controls, onReset, onResetError, }) {
+    const t = useTranslation();
+    const { Button, Dialog } = usePrimitives();
+    const [diffOpen, setDiffOpen] = useState(false);
+    const [resetOpen, setResetOpen] = useState(false);
+    const resetToSystem = useMutation(TemplateResolverHandlers.resetToSystem);
+    const hasSystem = systemVersion !== null;
+    return (_jsxs(EditorInfoBar, { tone: "active", testId: "mail-origin-bar", origin: originOf(false, hasSystem), controls: controls, overlays: _jsxs(_Fragment, { children: [diffOpen && _jsx(DiffDrawer, { tenantId: row.id, onClose: () => setDiffOpen(false) }), _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();
+                        else
+                            onResetError(dispatcherErrorText(result.error, t));
+                    } })] }), links: 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") })] })), children: [hasSystem
+                ? t("documentDesigner.mail.origin.overrides", { version: systemVersion })
+                : t("documentDesigner.mail.origin.tenantOnly"), " ", statusSentence(t, row)] }));
+}
+export function MailOriginBar({ row, systemVersion, locale, isSystemAdmin, creating, controls, onReload, onResetError, }) {
+    const t = useTranslation();
+    if (row === null) {
+        return _jsx(MissingLocaleBar, { locale: locale, creating: creating, controls: controls });
+    }
+    if (row.scope === "tenant") {
+        return (_jsx(TenantOriginBar, { row: row, systemVersion: systemVersion, controls: controls, onReset: onReload, onResetError: onResetError }));
+    }
+    return (_jsx(EditorInfoBar, { tone: "muted", testId: "mail-origin-bar", origin: "system", controls: controls, 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();
+            } })) }));
+}