@cosmicdrift/kumiko-document-designer 0.389.0 → 0.390.1

package/dist/web/pdf-template-editor.js

@@ -1,159 +1,21 @@
-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 { useDispatcher, usePrimitives, useQuery, useTranslation, useUserRoles, } from "@cosmicdrift/kumiko-renderer";
-import { ErrorState, LoadingState, PdfPreview, uploadFileRef, } from "@cosmicdrift/kumiko-renderer/web";
-import { RendererPuppeteerClientQueries } from "@cosmicdrift/kumiko-renderer-puppeteer-client/qualified-names";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { BRANDING_QUERY_QN } from "./constants.js";
-import { EditorHeader, EditorLocaleSwitch, EditorModeSwitch, originOf, } from "./editor-header.js";
-import { EditorBody, EditorFooter, EditorFrame, EditorInfoBar } from "./editor-shell.js";
-import { describeError, isAlreadyActive } from "./errors.js";
-import { fileUrl } from "./file-name.js";
-import { systemLabelMap, variableLabelMap } from "./mail-draft.js";
-import { PlaceholderSection, SystemPlaceholderSection } from "./mail-left-rail.js";
-import { OverridesDrawer } from "./overrides-drawer.js";
-import { PageCanvas } from "./page-canvas.js";
-import { pdfFooterMessage } from "./pdf-footer.js";
-import { PdfResourceSection, visibleSystemPlaceholders } from "./pdf-left-rail.js";
-import { EMPTY_PDF_META, parsePdfMeta, serializePdfMeta } from "./pdf-meta.js";
-import { SettingsPanel } from "./settings-panel.js";
-import { draftBesideActiveSentence } from "./status-label.js";
-import { localesOf, parseJsonObject, pickRow, resolveLocale } from "./template-rows.js";
-import { DEFAULT_LAYOUT_SLUG, DOCUMENT_PDF_KIND, PDF_LAYOUT_KIND, } from "./types.js";
-import { useFilesCapability } from "./use-files-capability.js";
-import { useInsertTargets } from "./use-insert-targets.js";
-import { useOverviewRows } from "./use-overview-rows.js";
-import { templateTitle, templateTitleText } from "./used-by-label.js";
-const SETTLE_MS = 500;
-const NO_VARIABLES = {};
-// Only the label of an images variable is needed, for the Images block and its picker.
-function imageLabelSource(variables) {
-    const result = {};
-    for (const [name, info] of Object.entries(variables)) {
-        if (info.type === "images" && info.label !== undefined) {
-            result[name] = { type: "text", label: info.label };
-        }
-    }
-    return result;
-}
-function textVariablesOf(variables) {
-    const result = {};
-    for (const [name, info] of Object.entries(variables)) {
-        if (info.type === "images")
-            continue;
-        const { item, ...rest } = info;
-        const columns = Object.entries(item ?? {}).flatMap(([column, def]) => def.type === "images" ? [] : [[column, { ...def, type: def.type }]]);
-        result[name] = {
-            ...rest,
-            type: info.type,
-            ...(item !== undefined && { item: Object.fromEntries(columns) }),
-        };
-    }
-    return result;
-}
-// Opening the preview prints the page without a click; a failed print is not retried for the same draft.
-function RunOnMount({ run }) {
-    useEffect(() => {
-        run();
-    }, [run]);
-    return null;
-}
-const draftFromDetail = (detail) => ({
-    content: detail.content,
-    meta: parsePdfMeta(detail.meta),
-});
-const snapshotOf = (draft) => JSON.stringify({ content: draft.content, meta: serializePdfMeta(draft.meta) });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TemplateResolverQueries } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { useDispatcher, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { ErrorState, LoadingState } from "@cosmicdrift/kumiko-renderer/web";
+import { EditorBody, EditorFrame } from "./editor-shell.js";
+import { describeError } from "./errors.js";
+import { buildPdfActions } from "./pdf-editor-actions.js";
+import { renderPdfFooter, renderPdfHeader, renderPdfInfoBar, renderPdfLocaleDialog, } from "./pdf-editor-chrome.js";
+import { renderPdfEditCanvas, renderPdfLeftRail, renderPdfPreviewPane, renderPdfSettings, } from "./pdf-editor-panes.js";
+import { buildPdfView } from "./pdf-editor-view.js";
+import { DOCUMENT_PDF_KIND } from "./types.js";
+import { usePdfEditorState } from "./use-pdf-editor-state.js";
 export function PdfTemplateEditor({ slug, locale: requestedLocale, onLocaleChange, }) {
     const t = useTranslation();
     const dispatcher = useDispatcher();
     const { Button, Banner, Dialog } = usePrimitives();
-    const insert = useInsertTargets();
-    const filesAvailable = useFilesCapability();
-    const overview = useOverviewRows(DOCUMENT_PDF_KIND);
-    const roles = useUserRoles();
-    const scope = roles?.includes("SystemAdmin") === true ? "system" : "tenant";
-    const rowsQuery = useQuery(TemplateResolverQueries.list, {
-        kind: DOCUMENT_PDF_KIND,
-    });
-    const rows = rowsQuery.data ?? [];
-    const locales = localesOf(rows, slug);
-    const locale = resolveLocale(requestedLocale, locales);
-    const row = pickRow(rows, slug, locale, scope);
-    const detailQuery = useQuery(TemplateResolverQueries.findById, { id: row?.id ?? "" }, { enabled: row !== undefined });
-    const detail = detailQuery.data !== null &&
-        detailQuery.data?.slug === slug &&
-        detailQuery.data.locale === locale
-        ? detailQuery.data
-        : null;
-    const [state, setState] = useState(null);
-    if (detail !== null && (state === null || state.key !== detail.id)) {
-        const draft = draftFromDetail(detail);
-        setState({ key: detail.id, draft, settled: draft, snapshot: snapshotOf(draft) });
-    }
-    const current = state !== null && detail !== null && state.key === detail.id ? state : null;
-    const settleTimer = useRef(null);
-    // A pending settle must not fire into an unmounted editor.
-    useEffect(() => () => {
-        if (settleTimer.current !== null)
-            clearTimeout(settleTimer.current);
-    }, []);
-    const [overridesOpen, setOverridesOpen] = useState(false);
-    const [draftEpoch, setDraftEpoch] = useState(0);
-    const [mode, setMode] = useState("edit");
-    const [busy, setBusy] = useState(null);
-    const [actionError, setActionError] = useState(null);
-    const [generated, setGenerated] = useState(null);
-    const autoPrintedFor = useRef(null);
-    const [pendingLocale, setPendingLocale] = useState(null);
-    const variableSchema = useMemo(() => parseJsonObject(detail?.variableSchema ?? null), [detail?.variableSchema]);
-    const settledMeta = current === null ? null : serializePdfMeta(current.settled.meta);
-    const validationQuery = useQuery(TemplateResolverQueries.validate, {
-        slug,
-        kind: DOCUMENT_PDF_KIND,
-        contentFormat: "html",
-        content: current?.settled.content ?? "",
-        meta: settledMeta ?? {},
-        variableSchema,
-        locale,
-        scope,
-    }, { enabled: current !== null });
-    const validation = validationQuery.data;
-    const layoutSlug = current?.settled.meta.layoutSlug ?? "";
-    const previewQuery = useQuery(TemplateResolverQueries.preview, {
-        slug,
-        kind: DOCUMENT_PDF_KIND,
-        locale,
-        content: detail?.content ?? "",
-        meta: layoutSlug === "" ? {} : { layoutSlug },
-        variableSchema,
-    }, { enabled: detail !== null });
-    const layout = previewQuery.error === null ? (previewQuery.data?.layout ?? null) : null;
-    const layouts = useOverviewRows(PDF_LAYOUT_KIND);
-    // The built-in "logo" resource of a layout is the tenant's branding logo.
-    const branding = useQuery(BRANDING_QUERY_QN, {});
-    const brandingLogoFile = branding.data?.logoFile ?? "";
-    const statusQuery = useQuery(RendererPuppeteerClientQueries.status, {});
-    const pdfAvailable = statusQuery.error === null && statusQuery.data?.available === true;
-    const unavailableMessage = statusQuery.data?.available === false ? (statusQuery.data.message ?? "") : "";
-    const showOrigin = scope === "system";
-    const overridesQuery = useQuery(TemplateResolverQueries.tenantOverrides, { slug, kind: DOCUMENT_PDF_KIND, locale }, { enabled: showOrigin && detail !== null });
-    const allVariables = validation?.variables ?? NO_VARIABLES;
-    // Photos are record data, never an inline placeholder: images variables only feed the Images block.
-    const variables = useMemo(() => textVariablesOf(allVariables), [allVariables]);
-    const imageVariables = useMemo(() => Object.keys(allVariables).filter((name) => allVariables[name]?.type === "images"), [allVariables]);
-    const systemVariables = useMemo(() => visibleSystemPlaceholders(validation?.systemPlaceholders ?? []), [validation?.systemPlaceholders]);
-    const systemLabels = useMemo(() => systemLabelMap(t, systemVariables), [t, systemVariables]);
-    const variableLabels = useMemo(() => ({
-        ...systemLabels,
-        ...variableLabelMap(t, variables),
-        ...variableLabelMap(t, imageLabelSource(allVariables)),
-    }), [systemLabels, variables, allVariables, t]);
-    const variableNames = useMemo(() => Object.keys(variables), [variables]);
-    const linkedResources = detail?.linkedResources ?? null;
-    // The editor shows resource images from the stored copies; no extra request is made here.
-    const resourcePreviews = useMemo(() => Object.fromEntries(Object.entries(parseJsonObject(linkedResources)).flatMap(([key, fileRefId]) => typeof fileRefId === "string"
-        ? [[key, { src: `/api/files/${encodeURIComponent(fileRefId)}`, caption: key }]]
-        : [])), [linkedResources]);
+    const s = usePdfEditorState({ slug, requestedLocale }, t);
+    const { rowsQuery, row, current, detail, detailQuery } = s.doc;
     if (rowsQuery.loading && rowsQuery.data === null)
         return _jsx(LoadingState, {});
     if (rowsQuery.error !== null)
@@ -163,196 +25,32 @@ export function PdfTemplateEditor({ slug, locale: requestedLocale, onLocaleChang
     if (current === null || detail === null) {
         return detailQuery.error !== null ? _jsx(ErrorState, { error: detailQuery.error }) : _jsx(LoadingState, {});
     }
-    const dirty = snapshotOf(current.draft) !== current.snapshot;
-    const generatedFresh = generated !== null && generated.forSnapshot === snapshotOf(current.draft);
-    function updateDraft(next) {
-        setState((previous) => (previous === null ? previous : { ...previous, draft: next }));
-        if (settleTimer.current !== null)
-            clearTimeout(settleTimer.current);
-        settleTimer.current = setTimeout(() => {
-            setState((previous) => previous === null ? previous : { ...previous, settled: previous.draft });
-        }, SETTLE_MS);
-    }
-    function resetDraft(source) {
-        const draft = draftFromDetail(source);
-        if (settleTimer.current !== null)
-            clearTimeout(settleTimer.current);
-        setState({ key: source.id, draft, settled: draft, snapshot: snapshotOf(draft) });
-        setDraftEpoch((epoch) => epoch + 1);
-        setActionError(null);
-    }
-    async function reload() {
-        await Promise.all([rowsQuery.refetch(), detailQuery.refetch(), validationQuery.refetch()]);
-    }
-    async function persist() {
-        const draft = current?.draft ?? { content: "", meta: EMPTY_PDF_META };
-        const parentTemplateId = detail?.scope === "system" ? detail.id : detail?.parentTemplateId;
-        const result = await dispatcher.write(scope === "system"
-            ? TemplateResolverHandlers.upsertSystem
-            : TemplateResolverHandlers.upsertTenant, {
-            slug,
-            kind: DOCUMENT_PDF_KIND,
-            locale,
-            content: draft.content,
-            contentFormat: "html",
-            variableSchema,
-            meta: serializePdfMeta(draft.meta),
-            ...(scope === "tenant" && parentTemplateId != null && { parentTemplateId }),
-        });
-        if (!result.isSuccess) {
-            setActionError(describeError(t, result.error));
-            return null;
-        }
-        setState((previous) => previous === null ? previous : { ...previous, snapshot: snapshotOf(draft) });
-        return result.data;
-    }
-    async function save() {
-        setBusy("save");
-        setActionError(null);
-        const saved = await persist();
-        if (saved !== null)
-            await reload();
-        setBusy(null);
-        return saved !== null;
-    }
-    async function publish() {
-        setBusy("publish");
-        setActionError(null);
-        // A system save activates immediately; a tenant row needs a save first when it
-        // does not exist yet or carries unsaved edits, then an explicit publish.
-        const needsSave = dirty || detail?.scope === "system";
-        const saved = needsSave ? await persist() : null;
-        const saveFailed = needsSave && saved === null;
-        // upsertSystem already activates, so only a tenant row needs the explicit publish.
-        const alreadyActivatedBySave = scope === "system" && saved !== null;
-        const templateId = saved?.id ?? detail?.id ?? null;
-        if (templateId !== null && !saveFailed && !alreadyActivatedBySave) {
-            const result = await dispatcher.write(scope === "system"
-                ? TemplateResolverHandlers.publishSystem
-                : TemplateResolverHandlers.publish, { id: templateId });
-            if (!result.isSuccess && !isAlreadyActive(result.error))
-                setActionError(describeError(t, result.error));
-        }
-        await reload();
-        setBusy(null);
-    }
-    async function generatePdf() {
-        if (current === null)
-            return;
-        setMode("preview");
-        setBusy("pdf");
-        setActionError(null);
-        const forSnapshot = snapshotOf(current.draft);
-        const result = await dispatcher.query(RendererPuppeteerClientQueries.previewPdf, {
-            slug,
-            locale,
-            content: current.draft.content,
-            meta: serializePdfMeta(current.draft.meta),
-            variableSchema,
-        });
-        if (result.isSuccess)
-            setGenerated({ forSnapshot, result: result.data });
-        else
-            setActionError(describeError(t, result.error));
-        setBusy(null);
-    }
-    function printOnce() {
-        if (current === null || autoPrintedFor.current === snapshotOf(current.draft))
-            return;
-        autoPrintedFor.current = snapshotOf(current.draft);
-        void generatePdf();
-    }
-    async function uploadResource(file) {
-        const sourceFileRefId = await uploadFileRef(file);
-        const result = await dispatcher.write(TemplateResolverHandlers.resourceUpload, {
-            templateId: detail?.id,
-            sourceFileRefId,
-        });
-        if (!result.isSuccess)
-            throw new Error(describeError(t, result.error));
-        await detailQuery.refetch();
-    }
-    function requestLocale(next) {
-        if (next === locale)
-            return;
-        if (dirty)
-            setPendingLocale(next);
-        else
-            onLocaleChange?.(next);
-    }
-    const canPublish = validation?.canPublish === true;
-    const layoutSlugShown = layout?.slug ?? DEFAULT_LAYOUT_SLUG;
-    const layoutTitle = layouts.rows.find((row) => row.slug === layoutSlugShown)?.title;
-    const layoutName = layoutTitle === undefined ? layoutSlugShown : templateTitleText(t, layoutTitle);
-    const layoutResourceSrc = (key) => key === "logo" && brandingLogoFile !== "" ? fileUrl(brandingLogoFile) : undefined;
-    const placeholderSource = validation === undefined || validation === null
-        ? null
-        : {
-            ...validation,
-            variables,
-            systemPlaceholders: visibleSystemPlaceholders(validation.systemPlaceholders),
-        };
-    const layoutFills = (name) => layout !== null &&
-        (layout.html.includes(`data-variable="${name}"`) || layout.html.includes(`{{${name}}}`));
-    const overrideCount = (overridesQuery.data?.activeOverrides ?? 0) + (overridesQuery.data?.draftOverrides ?? 0);
-    const resourceKeys = Object.keys(parseJsonObject(detail.linkedResources));
-    const overviewRow = overview.rows.find((candidate) => candidate.slug === slug);
-    const title = overviewRow === undefined ? slug : templateTitle(t, overviewRow);
-    const systemVersion = overviewRow?.systemVersion ?? null;
-    const vocabulary = {
-        names: variableNames,
-        labels: variableLabels,
-        system: systemVariables,
+    const view = buildPdfView({ t, s, slug, current, detail });
+    const actions = buildPdfActions({
+        s,
+        t,
+        dispatcher,
+        slug,
+        current,
+        detail,
+        dirty: view.dirty,
+        onLocaleChange,
+    });
+    const context = {
+        t,
+        Button,
+        Dialog,
+        slug,
+        s,
+        actions,
+        view,
+        current,
+        detail,
+        onLocaleChange,
+        exportBundle,
     };
-    const footer = validation === undefined || validation === null
-        ? null
-        : pdfFooterMessage(t, validation, generated === null
-            ? null
-            : {
-                pages: generated.result.pageCount,
-                sizeBytes: generated.result.sizeBytes,
-                durationMs: generated.result.durationMs,
-            });
-    const showOverrideLinks = showOrigin && detail.scope === "system";
-    const originText = showOverrideLinks
-        ? overridesQuery.data?.totalTenants == null
-            ? t("documentDesigner.originBar.noTotal", { count: overrideCount })
-            : t("documentDesigner.originBar.withTotal", {
-                count: overrideCount,
-                total: overridesQuery.data.totalTenants,
-            })
-        : detail.scope === "system"
-            ? t("documentDesigner.mail.origin.system", { version: detail.version })
-            : systemVersion === null
-                ? t("documentDesigner.mail.origin.tenantOnly")
-                : t("documentDesigner.mail.origin.overrides", { version: systemVersion });
-    const besideActiveSentence = draftBesideActiveSentence(t, detail);
-    const pdfUnavailableNote = !pdfAvailable && statusQuery.loading === false;
-    return (_jsxs(EditorFrame, { testId: "pdf-template-editor", children: [_jsx(EditorHeader, { title: title, stored: { status: detail.status, version: detail.version }, actions: {
-                    busy: busy === "save",
-                    canSave: busy === null && validation?.canSave !== false,
-                    canPublish: busy === null && canPublish,
-                    onSave: () => void save(),
-                    onPublish: () => void publish(),
-                }, children: _jsx(EditorModeSwitch, { testIdPrefix: "pdf", mode: mode, onMode: setMode }) }), _jsxs(EditorInfoBar, { tone: pdfUnavailableNote ? "warn" : detail.scope === "tenant" ? "active" : "muted", testId: "pdf-origin-bar", origin: originOf(detail.scope === "system", systemVersion !== null), controls: _jsxs(_Fragment, { children: [_jsx(EditorLocaleSwitch, { testIdPrefix: "pdf", locales: locales.length > 0 ? locales : [locale], locale: locale, onLocale: requestLocale }), mode === "preview" && (_jsx(Button, { variant: "secondary", disabled: !pdfAvailable || busy !== null, loading: busy === "pdf", onClick: () => void generatePdf(), testId: "pdf-generate-header", children: t("documentDesigner.actions.generatePdf") }))] }), overlays: _jsx(OverridesDrawer, { open: overridesOpen, onOpenChange: setOverridesOpen, slug: slug, locale: locale, overrides: overridesQuery.data }), links: showOverrideLinks && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "link", onClick: () => void exportBundle(), children: t("documentDesigner.originBar.export") }), _jsx(Button, { variant: "link", onClick: () => setOverridesOpen(true), children: t("documentDesigner.originBar.showOverrides") })] })), children: [originText, besideActiveSentence !== null && ` ${besideActiveSentence}`, pdfUnavailableNote && (_jsxs(_Fragment, { children: [" ", _jsx("span", { "data-testid": "pdf-unavailable", children: unavailableMessage === ""
-                                    ? t("documentDesigner.pdfUnavailableNoReason")
-                                    : t("documentDesigner.pdfUnavailable", { message: unavailableMessage }) })] }))] }), _jsx(EditorBody, { left: mode === "edit" ? (_jsxs(_Fragment, { children: [_jsx(PlaceholderSection, { validation: placeholderSource, onInsert: insert.insertPlaceholder, idPrefix: "pdf" }), _jsx(SystemPlaceholderSection, { validation: placeholderSource, onInsert: insert.insertPlaceholder, idPrefix: "pdf", isLayoutOwned: layoutFills }), _jsx(PdfResourceSection, { resourceKeys: resourceKeys, canUpload: detail.scope === scope, filesAvailable: filesAvailable, layoutName: layoutName, onInsert: insert.insertResource, onUpload: uploadResource })] })) : undefined, center: mode === "edit" ? (_jsx("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", onFocusCapture: insert.markFocused("body"), children: _jsx(PageCanvas, { meta: current.draft.meta, content: current.draft.content, onContentChange: (content) => updateDraft({ ...current.draft, content }), regions: layout?.regions ?? null, layoutName: layoutName, resourceSrc: layoutResourceSrc, variableLabels: variableLabels, systemVariables: systemVariables, systemLabels: systemLabels, variableNames: variableNames, imageVariables: imageVariables, resourcePreviews: resourcePreviews, onEditorReady: insert.register("body") }) })) : (_jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: generated !== null && generatedFresh ? (_jsx(PdfPreview, { source: { base64: generated.result.pdfBase64 }, testId: "document-designer-pdf-preview" })) : (_jsxs("div", { className: "flex flex-col items-start gap-3 p-6", "data-testid": "document-designer-preview-stale", children: [pdfAvailable && busy === null && _jsx(RunOnMount, { run: printOnce }), _jsx("p", { className: "text-sm text-muted-foreground", children: busy === "pdf"
-                                    ? t("documentDesigner.preview.loading")
-                                    : t("documentDesigner.preview.stale") }), _jsx(Button, { variant: "secondary", disabled: !pdfAvailable || busy !== null, onClick: () => void generatePdf(), children: t("documentDesigner.actions.generatePdf") })] })) })), right: _jsx(SettingsPanel, { meta: current.draft.meta, onMetaChange: (meta) => updateDraft({ ...current.draft, meta }), layouts: layouts.rows, locale: locale, version: { id: detail.id, version: detail.version, status: detail.status }, vocabulary: vocabulary, insert: insert, draftKey: `${current.key}:${draftEpoch}` }) }), _jsx(EditorFooter, { testIdPrefix: "pdf-editor", message: footer, saveError: actionError, modifiedAt: detail.modifiedAt ?? null, dirty: dirty, busy: busy === "save", canSave: busy === null && validation?.canSave !== false, canPublish: busy === null && canPublish, onDiscard: () => resetDraft(detail), onSave: () => void save(), onPublish: () => void publish() }), _jsx(Dialog, { open: pendingLocale !== null, onOpenChange: (open) => {
-                    if (!open)
-                        setPendingLocale(null);
-                }, title: t("documentDesigner.localeDialog.title"), description: t("documentDesigner.localeDialog.description"), confirmLabel: t("documentDesigner.localeDialog.save"), cancelLabel: t("documentDesigner.localeDialog.cancel"), onConfirm: async () => {
-                    const target = pendingLocale;
-                    if (target !== null && (await save()))
-                        onLocaleChange?.(target);
-                    setPendingLocale(null);
-                }, children: _jsx(Button, { variant: "danger-ghost", onClick: () => {
-                        const target = pendingLocale;
-                        setPendingLocale(null);
-                        resetDraft(detail);
-                        if (target !== null)
-                            onLocaleChange?.(target);
-                    }, children: t("documentDesigner.localeDialog.discard") }) })] }));
+    const editing = s.ui.mode === "edit";
+    return (_jsxs(EditorFrame, { testId: "pdf-template-editor", children: [renderPdfHeader(context), renderPdfInfoBar(context), _jsx(EditorBody, { left: editing ? renderPdfLeftRail(context) : undefined, center: editing ? renderPdfEditCanvas(context) : renderPdfPreviewPane(context), right: renderPdfSettings(context) }), renderPdfFooter(context), renderPdfLocaleDialog(context)] }));
     async function exportBundle() {
         const result = await dispatcher.query(TemplateResolverQueries.exportBundle, {
             slug,
@@ -360,7 +58,7 @@ export function PdfTemplateEditor({ slug, locale: requestedLocale, onLocaleChang
             scope: "system",
         });
         if (!result.isSuccess) {
-            setActionError(describeError(t, result.error));
+            s.ui.setActionError(describeError(t, result.error));
             return;
         }
         const url = URL.createObjectURL(new Blob([JSON.stringify(result.data, null, 2)], { type: "application/json" }));

package/dist/web/use-layout-editor-state.d.ts

@@ -0,0 +1,62 @@
+import { type EditorTab, type Region, type Translate } from "./layout-editor-logic.ts";
+import type { BrandingView, LayoutKind, LayoutSourceView, LayoutValidation, TenantOverrideCounts } from "./layout-types.ts";
+import type { OverviewRowView } from "./overview-row.ts";
+export type LayoutEditorBodyProps = {
+    readonly kind: LayoutKind;
+    readonly slug: string;
+    readonly isSystemAdmin: boolean;
+    readonly source: LayoutSourceView;
+    readonly overviewRows: readonly OverviewRowView[];
+    readonly usedByCount: number;
+    readonly overrides: TenantOverrideCounts | null;
+    readonly onKindChange: (kind: LayoutKind) => void;
+    readonly onReload: () => Promise<void>;
+};
+export declare function useLayoutEditorState(props: LayoutEditorBodyProps, t: Translate): {
+    isMail: boolean;
+    showMjmlTab: boolean;
+    tab: EditorTab;
+    setTab: import("react").Dispatch<import("react").SetStateAction<EditorTab>>;
+    header: string;
+    setHeader: import("react").Dispatch<import("react").SetStateAction<string>>;
+    signature: string;
+    setSignature: import("react").Dispatch<import("react").SetStateAction<string>>;
+    footer: string;
+    setFooter: import("react").Dispatch<import("react").SetStateAction<string>>;
+    mjml: string;
+    setMjml: import("react").Dispatch<import("react").SetStateAction<string>>;
+    appearance: import("./layout-meta.ts").LayoutAppearance;
+    setAppearance: import("react").Dispatch<import("react").SetStateAction<import("./layout-meta.ts").LayoutAppearance>>;
+    activeRegion: Region;
+    setActiveRegion: import("react").Dispatch<import("react").SetStateAction<Region>>;
+    toolbarHost: HTMLElement | null;
+    setToolbarHost: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
+    pendingKind: LayoutKind | null;
+    setPendingKind: import("react").Dispatch<import("react").SetStateAction<LayoutKind | null>>;
+    saveError: string | null;
+    setSaveError: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    branding: import("@cosmicdrift/kumiko-renderer").UseQueryResult<BrandingView>;
+    mjmlMode: boolean;
+    appearanceFromMjml: boolean;
+    dirty: boolean;
+    checked: LayoutValidation | null;
+    shownRow: import("./layout-types.ts").LayoutSourceRow | null;
+    userCount: number;
+    placeholders: readonly string[];
+    placeholderLabels: Readonly<Record<string, string>>;
+    requestKind: (next: LayoutKind) => void;
+    save: (publish: boolean) => Promise<void>;
+    busy: boolean;
+    canSave: boolean;
+    canPublish: boolean;
+    footerMessage: import("./layout-editor-logic.ts").FooterMessage;
+    accentColor: string;
+    showAccentLine: boolean;
+    blocks: ("align" | "button" | "divider" | "image" | "pageBreak" | "repeat" | "table")[];
+    resourcePreviews: Readonly<Record<string, {
+        readonly src: string;
+        readonly caption: string;
+    }>> | undefined;
+    discard: () => void;
+};
+export type LayoutEditorModel = ReturnType<typeof useLayoutEditorState>;

package/dist/web/use-layout-editor-state.js

@@ -0,0 +1,155 @@
+import { TemplateResolverHandlers, TemplateResolverQueries, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { useMutation, useQuery } from "@cosmicdrift/kumiko-renderer";
+import { useState } from "react";
+import { BRANDING_QUERY_QN } from "./constants.js";
+import { accentLineShown, appearanceFlags, footerMessageOf, initialTab, layoutBlocks, layoutContent, layoutDirty, layoutSaveFlags, resourcePreviewsOf, saveLayout, shownRowOf, } from "./layout-editor-logic.js";
+import { appearanceOf } from "./layout-meta.js";
+import { systemLabelMap } from "./mail-draft.js";
+import { useDebouncedValue } from "./use-debounced-value.js";
+// Server-side validation compiles the whole layout (mjml), so wait for a pause in typing.
+const VALIDATE_DEBOUNCE_MS = 400;
+export function useLayoutEditorState(props, t) {
+    const { kind, slug, isSystemAdmin, source, usedByCount, onKindChange, onReload } = props;
+    const isMail = kind === "mail-layout";
+    const showMjmlTab = isSystemAdmin && source.mjmlSource !== null;
+    const [tab, setTab] = useState(initialTab(showMjmlTab, source));
+    const [header, setHeader] = useState(source.regions.header);
+    const [signature, setSignature] = useState(source.regions.signature);
+    const [footer, setFooter] = useState(source.regions.footer);
+    const [mjml, setMjml] = useState(source.mjmlSource ?? "");
+    const storedAppearance = appearanceOf(source.meta);
+    const [appearance, setAppearance] = useState(storedAppearance);
+    const [activeRegion, setActiveRegion] = useState("header");
+    const [toolbarHost, setToolbarHost] = useState(null);
+    const [pendingKind, setPendingKind] = useState(null);
+    const [saveError, setSaveError] = useState(null);
+    const upsertTenant = useMutation(TemplateResolverHandlers.upsertTenant);
+    const upsertSystem = useMutation(TemplateResolverHandlers.upsertSystem);
+    const publishSystem = useMutation(TemplateResolverHandlers.publishSystem);
+    const branding = useQuery(BRANDING_QUERY_QN, {});
+    const mjmlMode = tab === "mjml";
+    const { appearanceFromMjml, appearanceEditable, appearanceValid } = appearanceFlags({
+        isMail,
+        mjmlMode,
+        source,
+        appearance,
+    });
+    const dirty = layoutDirty({
+        mjmlMode,
+        mjml,
+        header,
+        signature,
+        footer,
+        appearance,
+        storedAppearance,
+        appearanceEditable,
+        source,
+    });
+    const content = layoutContent({ mjmlMode, mjml, header, signature, footer, isMail });
+    const debouncedContent = useDebouncedValue(content, VALIDATE_DEBOUNCE_MS);
+    const validation = useQuery(TemplateResolverQueries.validate, {
+        slug,
+        kind,
+        contentFormat: mjmlMode ? "mjml" : "html",
+        content: debouncedContent,
+        locale: source.locale,
+        scope: isSystemAdmin ? "system" : "tenant",
+    });
+    const checked = validation.data;
+    const shownRow = shownRowOf(isSystemAdmin, source);
+    const userCount = usedByCount;
+    const placeholders = checked?.systemPlaceholders ?? [];
+    const placeholderLabels = systemLabelMap(t, placeholders);
+    const requestKind = (next) => {
+        // skip: the requested kind is already open
+        if (next === kind)
+            return;
+        if (dirty)
+            setPendingKind(next);
+        else
+            onKindChange(next);
+    };
+    const save = (publish) => saveLayout({
+        publish,
+        kind,
+        slug,
+        source,
+        content,
+        mjmlMode,
+        isMail,
+        isSystemAdmin,
+        appearanceEditable,
+        appearance,
+        t,
+        upsertTenant,
+        upsertSystem,
+        publishSystem,
+        setSaveError,
+        onReload,
+    });
+    const busy = upsertTenant.pending || upsertSystem.pending || publishSystem.pending;
+    const { canSave, canPublish } = layoutSaveFlags({
+        dirty,
+        checked,
+        appearanceValid,
+        busy,
+        shownRow,
+    });
+    const footerMessage = footerMessageOf({ t, checked, appearanceValid, isMail, userCount });
+    const accentColor = branding.data?.accentColor ?? "";
+    const showAccentLine = accentLineShown({ isMail, appearanceEditable, appearance, accentColor });
+    const blocks = layoutBlocks(isMail);
+    const resourcePreviews = resourcePreviewsOf(branding.data, isMail, t);
+    const discard = () => {
+        setHeader(source.regions.header);
+        setSignature(source.regions.signature);
+        setFooter(source.regions.footer);
+        setMjml(source.mjmlSource ?? "");
+        setAppearance(storedAppearance);
+        setSaveError(null);
+    };
+    return {
+        isMail,
+        showMjmlTab,
+        tab,
+        setTab,
+        header,
+        setHeader,
+        signature,
+        setSignature,
+        footer,
+        setFooter,
+        mjml,
+        setMjml,
+        appearance,
+        setAppearance,
+        activeRegion,
+        setActiveRegion,
+        toolbarHost,
+        setToolbarHost,
+        pendingKind,
+        setPendingKind,
+        saveError,
+        setSaveError,
+        branding,
+        mjmlMode,
+        appearanceFromMjml,
+        dirty,
+        checked,
+        shownRow,
+        userCount,
+        placeholders,
+        placeholderLabels,
+        requestKind,
+        save,
+        busy,
+        canSave,
+        canPublish,
+        footerMessage,
+        accentColor,
+        showAccentLine,
+        blocks,
+        resourcePreviews,
+        discard,
+    };
+}