@cosmicdrift/kumiko-document-designer 0.389.0 → 0.390.0

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

@@ -1,230 +1,39 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TemplateResolverHandlers, TemplateResolverQueries, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
-import { dispatcherErrorText, useMutation, usePrimitives, useQuery, useTranslation, useUnsavedInputSource, } from "@cosmicdrift/kumiko-renderer";
-import { useEffect, useRef, 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { EditorHeader, EditorModeSwitch, originOf } from "./editor-header.js";
+import { EditorFooter, EditorFrame } from "./editor-shell.js";
 import { MailConfirmDialogs } from "./mail-dialogs.js";
-import { buildMeta, isDraftDirty, loadedMailOf, parseJsonRecord, parseLinkedResources, pickDeclaredVariables, 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 { renderMailBanners, renderMailControls, renderMailEditBody, renderMailModals, } from "./mail-editor-render.js";
 import { MailOriginBar } from "./mail-origin-bar.js";
-import { PdfLinkModal } from "./mail-pdf-link-modal.js";
-import { MailPreviewMode } from "./mail-preview.js";
-import { AttachmentSection, ChromeSection, PropertiesSection, UsageSection, } from "./mail-right-rail.js";
-import { UploadModal } from "./mail-upload-modal.js";
-import { VersionsSection } from "./mail-versions.js";
-import { useFilesCapability } from "./use-files-capability.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";
-import { templateTitleText } from "./used-by-label.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]);
-}
+import { renderMailPreview } from "./mail-preview-render.js";
+import { useMailEditorState } from "./use-mail-editor-state.js";
+export { placeholderNames } from "./mail-editor-logic.js";
 export function MailEditorBody(props) {
-    const { slug, locale, title, isSystemAdmin, row, onReload, onRefreshRow } = props;
+    const { locale, title, isSystemAdmin, row, onReload } = 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 [picked, setPicked] = useState(null);
-    const insert = useInsertTargets();
-    const persistence = useMailPersistence({
-        slug,
-        locale,
-        title,
-        isSystemAdmin,
-        row,
-    });
-    const testMail = useTestMail();
-    const own = useOwnAddress();
-    const filesAvailable = useFilesCapability();
-    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 pickedVariables = pickDeclaredVariables(picked, validation?.variables);
-    // A pick belongs to the variables it was made for: after the declared set changes it is dropped,
-    // so a re-added variable does not revive an old record value.
-    const declaredVariables = validation?.variables;
-    const declaredVariableNames = declaredVariables === undefined ? null : Object.keys(declaredVariables).sort().join("|");
-    const previousDeclaredNames = useRef(declaredVariableNames);
-    useEffect(() => {
-        if (declaredVariableNames === null)
-            return;
-        if (previousDeclaredNames.current !== null &&
-            previousDeclaredNames.current !== declaredVariableNames) {
-            setPicked(null);
-        }
-        previousDeclaredNames.current = declaredVariableNames;
-    }, [declaredVariableNames]);
-    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);
-    useUnsavedInputSource(() => dirty);
-    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 saveAndReload = async (publish) => {
-        if ((await persistence.save(draft, publish)) !== "failed")
-            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, templateTitleText(t, 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,
-            ...(pickedVariables !== null && { variables: pickedVariables }),
-        });
-    };
-    // 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(t, 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" && testMail.availability.canSend);
-    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 m = useMailEditorState(props, t);
+    const { mode, setMode, setDialog, setResetError } = m.ui;
+    const saveDraft = () => void m.saveAndReload(false);
+    const publish = () => void m.saveAndReload(true);
+    const controls = renderMailControls(props, m);
     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: () => {
+    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: m.busy,
+                    canSave: m.canSave,
+                    canPublish: m.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: m.ui.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, filesAvailable: filesAvailable, 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, { slug: slug, draft: draft, layouts: layouts.rows, onChange: update }), _jsx(ChromeSection, { draft: draft, vocabulary: vocabulary, insert: insert, 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,
-                    ...(pickedVariables !== null && { variables: pickedVariables }),
-                }, picked: picked, onPick: setPicked, validation: validation ?? null, slug: slug, locale: locale, fromName: settled.senderName, own: own, origin: origin, controls: controls, testMail: {
-                    availability: testMail.availability,
-                    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();
+                }, onResetError: setResetError })), renderMailBanners(Banner, t, m), mode === "edit"
+                ? renderMailEditBody(props, m)
+                : renderMailPreview(props, m, controls, origin), !m.locked && (_jsx(EditorFooter, { testIdPrefix: "mail-editor", message: m.footer, saveError: m.services.persistence.error, modifiedAt: row?.modifiedAt ?? null, dirty: m.dirty, busy: m.busy, canSave: m.canSave, canPublish: m.canPublish, onDiscard: () => setDialog({ kind: "discard" }), onSave: saveDraft, onPublish: publish })), renderMailModals(props, m), _jsx(MailConfirmDialogs, { dialog: m.ui.dialog, onClose: () => setDialog({ kind: "none" }), onDiscard: () => {
+                    m.reset();
                     setDialog({ kind: "none" });
-                }, onRemove: removeResource, onLeaveSave: async (target) => {
-                    if ((await persistence.save(draft, false)) === "saved")
-                        perform(target);
-                }, onLeaveDiscard: (target) => {
+                }, onRemove: m.removeResource, onLeaveSave: m.leaveSave, onLeaveDiscard: (target) => {
                     setDialog({ kind: "none" });
-                    perform(target);
+                    m.perform(target);
                 } })] }));
 }

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

@@ -0,0 +1,70 @@
+import type { EditorVocabulary } from "./mail-edit-center.tsx";
+import type { LinkedResourceView, MailDraft, MailValidation, PickedValues, TemplateRowView } from "./mail-types.ts";
+type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
+export type MailEditorBodyProps = {
+    readonly slug: string;
+    readonly locale: string;
+    readonly locales: readonly string[];
+    readonly title: string;
+    readonly isSystemAdmin: boolean;
+    readonly row: TemplateRowView | null;
+    readonly systemVersion: number | null;
+    readonly fallbackLocale: string | null;
+    readonly onLocaleChange: (locale: string) => void;
+    readonly onReload: () => Promise<void>;
+    readonly onRefreshRow: () => Promise<void>;
+};
+export declare function placeholderNames(validation: MailValidation | null): string[];
+export declare function mailSaveFlags(input: {
+    readonly locked: boolean;
+    readonly busy: boolean;
+    readonly validation: MailValidation | null;
+    readonly dirty: boolean;
+    readonly creating: boolean;
+    readonly row: TemplateRowView | null;
+}): {
+    readonly canSave: boolean;
+    readonly canPublish: boolean;
+};
+export declare function resourcePreviewsOfMail(resources: readonly LinkedResourceView[], t: Translate): {
+    [k: string]: {
+        src: string;
+        caption: string;
+    };
+};
+export declare function railValidationOf(locked: boolean, validation: MailValidation | null): MailValidation | null;
+export declare function vocabularyOf(t: Translate, validation: MailValidation | null): EditorVocabulary;
+export declare function testMailPayload(input: {
+    readonly slug: string;
+    readonly locale: string;
+    readonly draft: MailDraft;
+    readonly variableSchema: Readonly<Record<string, unknown>>;
+    readonly includeAttachments: boolean;
+    readonly prefixSubject: boolean;
+    readonly pickedVariables: PickedValues | null;
+}): {
+    slug: string;
+    locale: string;
+    content: string;
+    meta: Record<string, unknown>;
+    variableSchema: Readonly<Record<string, unknown>>;
+    includeAttachments: boolean;
+    prefixSubject: boolean;
+    variables?: Readonly<Record<string, unknown>> | undefined;
+};
+export declare function previewPayload(input: {
+    readonly slug: string;
+    readonly locale: string;
+    readonly settled: MailDraft;
+    readonly variableSchema: Readonly<Record<string, unknown>>;
+    readonly pickedVariables: PickedValues | null;
+}): {
+    slug: string;
+    kind: "mail";
+    locale: string;
+    content: string;
+    meta: Record<string, unknown>;
+    variableSchema: Readonly<Record<string, unknown>>;
+    variables?: Readonly<Record<string, unknown>> | undefined;
+};
+export {};

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

@@ -0,0 +1,81 @@
+import { fileUrl } from "./file-name.js";
+import { buildMeta, systemLabelMap, variableLabelMap } from "./mail-draft.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 mailSaveFlags(input) {
+    const { locked, busy, validation, dirty, creating, row } = input;
+    return {
+        canSave: !locked && !busy && validation?.canSave === true && (dirty || creating),
+        canPublish: !locked &&
+            !busy &&
+            validation?.canPublish === true &&
+            (dirty || creating || row?.status !== "active"),
+    };
+}
+export function resourcePreviewsOfMail(resources, t) {
+    return 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,
+                    }),
+                },
+            ],
+        ]
+        : []));
+}
+// Nothing is written yet in a missing language, so no placeholder may read as missing.
+export function railValidationOf(locked, validation) {
+    return locked && validation != null
+        ? { ...validation, missingRequired: [] }
+        : (validation ?? null);
+}
+export function vocabularyOf(t, validation) {
+    return {
+        names: placeholderNames(validation ?? null),
+        labels: {
+            ...systemLabelMap(t, validation?.systemPlaceholders ?? []),
+            ...variableLabelMap(t, validation?.variables ?? {}),
+        },
+        system: validation?.systemPlaceholders ?? [],
+    };
+}
+export function testMailPayload(input) {
+    return {
+        slug: input.slug,
+        locale: input.locale,
+        content: input.draft.body,
+        meta: buildMeta(input.draft),
+        variableSchema: input.variableSchema,
+        includeAttachments: input.includeAttachments,
+        prefixSubject: input.prefixSubject,
+        ...(input.pickedVariables !== null && { variables: input.pickedVariables }),
+    };
+}
+export function previewPayload(input) {
+    return {
+        slug: input.slug,
+        kind: "mail",
+        locale: input.locale,
+        content: input.settled.body,
+        meta: buildMeta(input.settled),
+        variableSchema: input.variableSchema,
+        ...(input.pickedVariables !== null && { variables: input.pickedVariables }),
+    };
+}

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

@@ -0,0 +1,105 @@
+import type { LeaveTarget } from "./mail-dialogs.tsx";
+import { type MailEditorBodyProps } from "./mail-editor-logic.ts";
+import type { MailDraft, MailValidation, PickedValues } from "./mail-types.ts";
+import type { MailServices, MailUiState } from "./use-mail-editor-parts.ts";
+type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
+export type MailModelInput = {
+    readonly props: MailEditorBodyProps;
+    readonly t: Translate;
+    readonly ui: MailUiState;
+    readonly picked: PickedValues | null;
+    readonly setPicked: (next: PickedValues | null) => void;
+    readonly services: MailServices;
+    readonly validation: MailValidation | null;
+    readonly variableSchema: Readonly<Record<string, unknown>>;
+    readonly pickedVariables: PickedValues | null;
+    readonly locked: boolean;
+    readonly dirty: boolean;
+};
+export declare function buildMailModel(input: MailModelInput): {
+    update: (patch: Partial<MailDraft>) => void;
+    reset: () => void;
+    saveAndReload: (publish: boolean) => Promise<void>;
+    perform: (target: LeaveTarget) => void;
+    leave: (target: LeaveTarget) => void;
+    leaveSave: (target: LeaveTarget) => Promise<void>;
+    removeResource: (key: string) => Promise<void>;
+    sendTestMail: () => void;
+    ui: {
+        baseline: MailDraft;
+        draft: MailDraft;
+        setDraft: import("react").Dispatch<import("react").SetStateAction<MailDraft>>;
+        settled: MailDraft;
+        settle: (next: MailDraft) => void;
+        mode: import("./editor-header.tsx").EditorMode;
+        setMode: import("react").Dispatch<import("react").SetStateAction<import("./editor-header.tsx").EditorMode>>;
+        creating: boolean;
+        setCreating: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+        dialog: import("./mail-dialogs.tsx").ConfirmDialog;
+        setDialog: import("react").Dispatch<import("react").SetStateAction<import("./mail-dialogs.tsx").ConfirmDialog>>;
+        uploadOpen: boolean;
+        setUploadOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+        pdfOpen: boolean;
+        setPdfOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+        resourceError: string | null;
+        setResourceError: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+        resetError: string | null;
+        setResetError: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+        editorEpoch: number;
+        setEditorEpoch: import("react").Dispatch<import("react").SetStateAction<number>>;
+        includeAttachments: boolean;
+        setIncludeAttachments: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+        prefixSubject: boolean;
+        setPrefixSubject: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    };
+    services: {
+        insert: import("./use-insert-targets.ts").InsertTargets;
+        persistence: import("./use-mail-persistence.ts").MailPersistence;
+        testMail: import("./use-test-mail.ts").TestMail;
+        own: import("./use-own-address.ts").OwnAddress;
+        filesAvailable: boolean;
+        resourceRemove: import("@cosmicdrift/kumiko-renderer").UseMutationResult<unknown>;
+        layouts: import("./use-overview-rows.ts").OverviewRows;
+        pdfTemplates: import("./use-overview-rows.ts").OverviewRows;
+    };
+    validation: MailValidation | null;
+    picked: Readonly<Record<string, unknown>> | null;
+    setPicked: (next: PickedValues | null) => void;
+    pickedVariables: Readonly<Record<string, unknown>> | null;
+    variableSchema: Readonly<Record<string, unknown>>;
+    locked: boolean;
+    dirty: boolean;
+    busy: boolean;
+    canSave: boolean;
+    canPublish: boolean;
+    resources: readonly import("./mail-types.ts").LinkedResourceView[];
+    pdfTitles: Map<string, string>;
+    uploadTemplateId: string | null;
+    takenKeys: string[];
+    attachments: ({
+        readonly kind: "file";
+        readonly key: string;
+        readonly fileRefId: string;
+        readonly fileName: string;
+    } | {
+        readonly kind: "pdf";
+        readonly key: string;
+        readonly templateSlug: string;
+        readonly fileName: string;
+    })[];
+    resourcePreviews: {
+        [k: string]: {
+            src: string;
+            caption: string;
+        };
+    };
+    railValidation: MailValidation | null;
+    vocabulary: import("./mail-edit-center.tsx").EditorVocabulary;
+    footer: {
+        readonly tone: "bad" | "warn" | "ok";
+        readonly text: string;
+    } | null;
+    fieldErrors: Partial<Record<"previewText" | "subject", string>>;
+};
+export type MailEditorModel = ReturnType<typeof buildMailModel>;
+export {};

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

@@ -0,0 +1,114 @@
+import { dispatcherErrorText } from "@cosmicdrift/kumiko-renderer";
+import { parseLinkedResources } from "./mail-draft.js";
+import { mailSaveFlags, railValidationOf, resourcePreviewsOfMail, testMailPayload, vocabularyOf, } from "./mail-editor-logic.js";
+import { footerMessage, metaFieldMessages } from "./mail-footer.js";
+import { templateTitleText } from "./used-by-label.js";
+function mailActions(input) {
+    const { props, ui, services } = input;
+    const { draft, baseline, settle } = ui;
+    const { persistence } = services;
+    const update = (patch) => {
+        const next = { ...draft, ...patch };
+        ui.setDraft(next);
+        settle(next);
+    };
+    const reset = () => {
+        ui.setDraft(baseline);
+        settle(baseline);
+        ui.setEditorEpoch((epoch) => epoch + 1);
+        persistence.clearError();
+    };
+    const saveAndReload = async (publish) => {
+        if ((await persistence.save(draft, publish)) !== "failed")
+            await props.onReload();
+    };
+    const perform = (target) => props.onLocaleChange(target.locale);
+    const leave = (target) => {
+        // skip: the target locale is already open
+        if (target.locale === props.locale)
+            return;
+        if (input.dirty)
+            ui.setDialog({ kind: "leave", target });
+        else
+            perform(target);
+    };
+    const leaveSave = async (target) => {
+        if ((await persistence.save(draft, false)) === "saved")
+            perform(target);
+    };
+    return { update, reset, saveAndReload, perform, leave, leaveSave };
+}
+function resourceActions(input, uploadTemplateId) {
+    const { props, t, ui, services } = input;
+    const removeResource = async (key) => {
+        // skip: only tenant rows own removable resources
+        if (uploadTemplateId === null)
+            return;
+        ui.setResourceError(null);
+        const result = await services.resourceRemove.mutate({ templateId: uploadTemplateId, key });
+        if (result.isSuccess)
+            await props.onRefreshRow();
+        else
+            ui.setResourceError(dispatcherErrorText(result.error, t));
+    };
+    const sendTestMail = () => {
+        void services.testMail.send(testMailPayload({
+            slug: props.slug,
+            locale: props.locale,
+            draft: ui.draft,
+            variableSchema: input.variableSchema,
+            includeAttachments: ui.includeAttachments,
+            prefixSubject: ui.prefixSubject,
+            pickedVariables: input.pickedVariables,
+        }));
+    };
+    return { removeResource, sendTestMail };
+}
+export function buildMailModel(input) {
+    const { props, t, ui, services, validation, locked } = input;
+    const { row } = props;
+    const busy = services.persistence.busy;
+    const { canSave, canPublish } = mailSaveFlags({
+        locked,
+        busy,
+        validation,
+        dirty: input.dirty,
+        creating: ui.creating,
+        row,
+    });
+    const resources = parseLinkedResources(row?.linkedResources);
+    const pdfTitles = new Map(services.pdfTemplates.rows.map((template) => [
+        template.slug,
+        templateTitleText(t, template.title),
+    ]));
+    const uploadTemplateId = row?.scope === "tenant" ? row.id : null;
+    const footer = locked || validation === undefined || validation === null
+        ? null
+        : footerMessage(t, validation, ui.mode === "preview" && services.testMail.availability.canSend);
+    return {
+        ui,
+        services,
+        validation,
+        picked: input.picked,
+        setPicked: input.setPicked,
+        pickedVariables: input.pickedVariables,
+        variableSchema: input.variableSchema,
+        locked,
+        dirty: input.dirty,
+        busy,
+        canSave,
+        canPublish,
+        ...mailActions(input),
+        ...resourceActions(input, uploadTemplateId),
+        resources,
+        pdfTitles,
+        uploadTemplateId,
+        takenKeys: resources.map((resource) => resource.key),
+        attachments: resources.filter((resource) => resource.kind !== "image"),
+        resourcePreviews: resourcePreviewsOfMail(resources, t),
+        railValidation: railValidationOf(locked, validation),
+        vocabulary: vocabularyOf(t, validation),
+        footer,
+        fieldErrors: locked ? {} : metaFieldMessages(t, validation),
+    };
+}

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

@@ -0,0 +1,11 @@
+import type { usePrimitives } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import type { MailEditorBodyProps } from "./mail-editor-logic.ts";
+import type { MailEditorModel } from "./mail-editor-model.ts";
+type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
+type Banner = ReturnType<typeof usePrimitives>["Banner"];
+export declare function renderMailControls(props: MailEditorBodyProps, m: MailEditorModel): ReactNode;
+export declare function renderMailBanners(Banner: Banner, t: Translate, m: MailEditorModel): ReactNode;
+export declare function renderMailEditBody(props: MailEditorBodyProps, m: MailEditorModel): ReactNode;
+export declare function renderMailModals(props: MailEditorBodyProps, m: MailEditorModel): ReactNode;
+export {};