@cosmicdrift/kumiko-document-designer 0.389.0 → 0.390.0

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

@@ -1,14 +1,3 @@
-import { type ReactNode } from "react";
-import type { LayoutKind, LayoutSourceView, TenantOverrideCounts } from "./layout-types.ts";
-import type { OverviewRowView } from "./overview-row.ts";
-export declare function LayoutEditorBody({ kind, slug, isSystemAdmin, source, overviewRows, usedByCount, overrides, onKindChange, onReload, }: {
-    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>;
-}): ReactNode;
+import type { ReactNode } from "react";
+import { type LayoutEditorBodyProps } from "./use-layout-editor-state.ts";
+export declare function LayoutEditorBody(props: LayoutEditorBodyProps): ReactNode;

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

@@ -1,187 +1,40 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DocumentContentEditor, MAIL_DOCUMENT_BLOCKS, PDF_DOCUMENT_BLOCKS, TemplateResolverHandlers, TemplateResolverQueries, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
-import { dispatcherErrorText, useMutation, usePrimitives, useQuery, useTranslation, } from "@cosmicdrift/kumiko-renderer";
-import { pluralKey } from "@cosmicdrift/kumiko-renderer/headless";
-import { cn, ModeSwitch, TextareaField } from "@cosmicdrift/kumiko-renderer/web";
-import { useState } from "react";
-import { composeLayoutHtml } from "./compose-layout.js";
-import { BRANDING_QUERY_QN } from "./constants.js";
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { ModeSwitch } from "@cosmicdrift/kumiko-renderer/web";
 import { EditorHeader } from "./editor-header.js";
 import { EditorBody, EditorFooter, EditorFrame } from "./editor-shell.js";
-import { fileUrl } from "./file-name.js";
-import { appearanceOf, isHexColor, metaToSave, } from "./layout-meta.js";
+import { renderCenter } from "./layout-editor-center.js";
 import { AppearanceRail, BrandingRail, MjmlSourceRail, PlaceholderRail, RendererRail, UsedByRail, } from "./layout-rails.js";
-import { systemLabelMap } from "./mail-draft.js";
 import { OriginBar } from "./origin-bar.js";
-import { asRowStatus } from "./status-label.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;
-const REGION_EDITOR_IDS = {
-    header: "document-designer-region-header",
-    signature: "document-designer-region-signature",
-    footer: "document-designer-region-footer",
-};
-const PAPER_WIDTH_CLASS = {
-    560: "max-w-[560px]",
-    600: "max-w-[600px]",
-    640: "max-w-[640px]",
-};
-function issueText(t, issue) {
-    const translated = t(issue.i18nKey, issue.params);
-    return translated === issue.i18nKey ? issue.code : translated;
+import { useLayoutEditorState, } from "./use-layout-editor-state.js";
+function renderLeftRail(props, m) {
+    const { branding } = m;
+    return (_jsxs(_Fragment, { children: [_jsx(BrandingRail, { data: branding.data, unavailable: branding.error !== null || (branding.data === null && !branding.loading) }), _jsx(PlaceholderRail, { validation: m.checked }), _jsx(RendererRail, { kind: props.kind })] }));
 }
-function sameAppearance(a, b) {
-    return (a.width === b.width &&
-        a.font === b.font &&
-        a.outerBackground === b.outerBackground &&
-        a.accentLine === b.accentLine &&
-        a.buttonStyle === b.buttonStyle);
+function renderRightRail(props, m) {
+    return (_jsxs(_Fragment, { children: [m.isMail && (_jsx(AppearanceRail, { appearance: m.appearance, onChange: m.setAppearance, fromMjml: m.appearanceFromMjml })), m.isMail && !m.mjmlMode && _jsx(MjmlSourceRail, { mjmlSource: props.source.mjmlSource }), _jsx(UsedByRail, { layoutSlug: props.slug, kind: props.kind, rows: props.overviewRows })] }));
 }
-// A dashed, labelled area of the paper; the focused one owns the shared toolbar.
-function PaperRegion({ label, testId, children, onFocus, }) {
-    return (_jsxs("div", { className: "relative rounded-sm border border-dashed border-input p-3", "data-testid": testId, onFocusCapture: onFocus, children: [_jsx("span", { className: "absolute -top-2.5 left-2.5 bg-card px-1.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: label }), children] }));
+function renderKindSwitch(t, props, m) {
+    return (_jsx(ModeSwitch, { value: props.kind, onChange: m.requestKind, ariaLabel: t("documentDesigner.editor.kindSwitch"), testId: "document-designer-kind-switch", options: [
+            { value: "mail-layout", label: t("documentDesigner.editor.kind.mail") },
+            { value: "pdf-layout", label: t("documentDesigner.editor.kind.pdf") },
+        ] }));
 }
-export function LayoutEditorBody({ kind, slug, isSystemAdmin, source, overviewRows, usedByCount, overrides, onKindChange, onReload, }) {
+export function LayoutEditorBody(props) {
+    const { kind, isSystemAdmin, source, overrides, onKindChange, onReload } = props;
     const t = useTranslation();
     const { Banner, Dialog } = usePrimitives();
-    const isMail = kind === "mail-layout";
-    const showMjmlTab = isSystemAdmin && source.mjmlSource !== null;
-    const [tab, setTab] = useState(showMjmlTab && source.effectiveFormat === "mjml" ? "mjml" : "draft");
-    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";
-    // An mjml layout brings its own look; the appearance fields only drive structured (html) layouts.
-    const appearanceFromMjml = source.effectiveFormat === "mjml" || mjmlMode;
-    const appearanceEditable = isMail && !appearanceFromMjml;
-    const appearanceDirty = appearanceEditable && !sameAppearance(appearance, storedAppearance);
-    const appearanceValid = !appearanceEditable || isHexColor(appearance.outerBackground);
-    const htmlDirty = header !== source.regions.header ||
-        signature !== source.regions.signature ||
-        footer !== source.regions.footer ||
-        appearanceDirty;
-    const dirty = mjmlMode ? mjml !== (source.mjmlSource ?? "") : htmlDirty;
-    const content = mjmlMode
-        ? mjml
-        : composeLayoutHtml({ header, signature: isMail ? signature : "", footer });
-    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 = isSystemAdmin ? source.system : (source.tenant ?? source.system);
-    const userCount = usedByCount;
-    const placeholders = checked?.systemPlaceholders ?? [];
-    const placeholderLabels = systemLabelMap(t, placeholders);
-    const requestKind = (next) => {
-        if (next === kind)
-            return;
-        if (dirty)
-            setPendingKind(next);
-        else
-            onKindChange(next);
-    };
-    const save = async (publish) => {
-        setSaveError(null);
-        const base = {
-            slug,
-            kind,
-            locale: source.locale,
-            content,
-            contentFormat: mjmlMode ? "mjml" : "html",
-            meta: appearanceEditable ? metaToSave(appearance, source.meta) : isMail ? source.meta : {},
-        };
-        const saved = isSystemAdmin
-            ? await upsertSystem.mutate(base)
-            : await upsertTenant.mutate({ ...base, status: publish ? "active" : "draft" });
-        if (!saved.isSuccess) {
-            setSaveError(dispatcherErrorText(saved.error, t));
-            return;
-        }
-        if (isSystemAdmin && publish) {
-            const published = await publishSystem.mutate({ id: saved.data.id });
-            if (!published.isSuccess) {
-                setSaveError(dispatcherErrorText(published.error, t));
-                return;
-            }
-        }
-        await onReload();
-    };
-    const busy = upsertTenant.pending || upsertSystem.pending || publishSystem.pending;
-    const shownStatus = shownRow === null ? null : asRowStatus(shownRow.status);
-    const canSave = dirty && checked?.canSave === true && appearanceValid && !busy;
-    const canPublish = checked?.canPublish === true && appearanceValid && (dirty || shownStatus === "draft") && !busy;
-    const blockingIssue = checked === null ? undefined : [...checked.issues, ...checked.publishIssues][0];
-    const footerMessage = checked === null
-        ? null
-        : !appearanceValid
-            ? { tone: "bad", text: t("documentDesigner.appearance.backgroundInvalid") }
-            : blockingIssue !== undefined
-                ? { tone: "bad", text: issueText(t, blockingIssue) }
-                : {
-                    tone: "ok",
-                    text: t(pluralKey(isMail
-                        ? "documentDesigner.editor.footer.okMail"
-                        : "documentDesigner.editor.footer.okPdf", userCount), { count: userCount }),
-                };
-    const accentColor = branding.data?.accentColor ?? "";
-    const showAccentLine = isMail && appearanceEditable && appearance.accentLine === "branding" && isHexColor(accentColor);
-    // A layout region has no per-mail variables, so a steps block there could never show a stage and an images block no photos.
-    const blocks = (isMail ? MAIL_DOCUMENT_BLOCKS : PDF_DOCUMENT_BLOCKS).filter((block) => block !== "steps" && block !== "images");
-    // The layout's "logo" resource is the branding logo, so the editor shows it instead of a chip.
-    const logoFile = branding.data?.logoFile ?? "";
-    const resourcePreviews = logoFile === ""
-        ? undefined
-        : {
-            logo: {
-                src: fileUrl(logoFile),
-                caption: isMail ? t("documentDesigner.editor.logoCaption") : "",
-            },
-        };
-    const regionEditor = (region, value, onChange) => (_jsx(DocumentContentEditor, { id: REGION_EDITOR_IDS[region], value: value, onChange: onChange, variables: placeholders, variableLabels: placeholderLabels, systemVariables: placeholders, readOnly: false, blocks: blocks, ...(resourcePreviews && { resourcePreviews }), chrome: "canvas", toolbarHost: activeRegion === region ? toolbarHost : null }));
+    const m = useLayoutEditorState(props, t);
+    const { pendingKind, setPendingKind } = m;
     return (_jsxs(EditorFrame, { testId: "document-designer-layout-editor", children: [_jsx(EditorHeader, { title: t(kind === "mail-layout"
                     ? "documentDesigner.editor.title.mail"
-                    : "documentDesigner.editor.title.pdf"), stored: shownRow, actions: {
-                    busy,
-                    canSave,
-                    canPublish,
-                    onSave: () => void save(false),
-                    onPublish: () => void save(true),
-                }, children: _jsx(ModeSwitch, { value: kind, onChange: requestKind, ariaLabel: t("documentDesigner.editor.kindSwitch"), testId: "document-designer-kind-switch", options: [
-                        { value: "mail-layout", label: t("documentDesigner.editor.kind.mail") },
-                        { value: "pdf-layout", label: t("documentDesigner.editor.kind.pdf") },
-                    ] }) }), _jsx(OriginBar, { isSystemAdmin: isSystemAdmin, source: source, kind: kind, userCount: userCount, overrides: overrides, onReset: () => void onReload(), onResetError: setSaveError }), _jsx(EditorBody, { left: _jsxs(_Fragment, { children: [_jsx(BrandingRail, { data: branding.data, unavailable: branding.error !== null || (branding.data === null && !branding.loading) }), _jsx(PlaceholderRail, { validation: checked }), _jsx(RendererRail, { kind: kind })] }), center: _jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center border-b bg-background", children: [_jsx("div", { ref: setToolbarHost, className: "min-w-0 flex-1" }), showMjmlTab && (_jsx("div", { className: "shrink-0 px-3 py-1", children: _jsx(ModeSwitch, { value: tab, onChange: setTab, ariaLabel: t("documentDesigner.editor.tabSwitch"), testId: "layout-mjml-tab", options: [
-                                            { value: "draft", label: t("documentDesigner.editor.tab.draft") },
-                                            { value: "mjml", label: t("documentDesigner.editor.tab.mjml") },
-                                        ] }) }))] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto px-8 py-6", children: mjmlMode ? (_jsx(TextareaField, { id: "document-designer-mjml-source", name: "mjml", label: t("documentDesigner.editor.mjml.label"), value: mjml, onChange: setMjml, rows: 24, testId: "document-designer-mjml-source" })) : (_jsxs("div", { className: "flex flex-col gap-3", children: [source.effectiveFormat === "mjml" && (_jsx(Banner, { variant: "info", testId: "document-designer-mjml-notice", children: t(isSystemAdmin
-                                            ? "documentDesigner.editor.mjmlNotice.platform"
-                                            : "documentDesigner.editor.mjmlNotice.tenant") })), _jsxs("div", { className: cn("mx-auto flex w-full flex-col gap-5 bg-card px-8 py-6 shadow-md", isMail ? PAPER_WIDTH_CLASS[appearance.width] : "min-h-[842px] max-w-[595px]", showAccentLine && "border-t-4 border-t-(--layout-accent)"), ref: (element) => element?.style.setProperty("--layout-accent", accentColor), "data-testid": "document-designer-paper", children: [_jsx(PaperRegion, { label: t("documentDesigner.editor.region.header"), testId: "document-designer-region-header", onFocus: () => setActiveRegion("header"), children: regionEditor("header", header, setHeader) }), _jsxs("div", { className: "rounded-sm border-2 border-dashed border-primary bg-primary/10 px-3 py-9 text-center font-medium text-primary", "data-testid": "document-designer-region-content", children: ["\u229E ", t("documentDesigner.editor.region.content"), _jsx("small", { className: "mt-1 block text-xs font-normal opacity-85", children: t(isMail
-                                                            ? "documentDesigner.editor.slot.mail"
-                                                            : "documentDesigner.editor.slot.pdf") })] }), isMail && (_jsx(PaperRegion, { label: t("documentDesigner.editor.region.signature"), testId: "document-designer-region-signature", onFocus: () => setActiveRegion("signature"), children: regionEditor("signature", signature, setSignature) })), _jsx("div", { className: cn(isMail && "-mx-8 -mb-6 bg-muted px-8 py-4"), children: _jsx(PaperRegion, { label: t("documentDesigner.editor.region.footer"), testId: "document-designer-region-footer", onFocus: () => setActiveRegion("footer"), children: regionEditor("footer", footer, setFooter) }) })] })] })) })] }), right: _jsxs(_Fragment, { children: [isMail && (_jsx(AppearanceRail, { appearance: appearance, onChange: setAppearance, fromMjml: appearanceFromMjml })), isMail && !mjmlMode && _jsx(MjmlSourceRail, { mjmlSource: source.mjmlSource }), _jsx(UsedByRail, { layoutSlug: slug, kind: kind, rows: overviewRows })] }) }), _jsx(EditorFooter, { testIdPrefix: "document-designer", message: footerMessage, saveError: saveError, modifiedAt: null, dirty: dirty, busy: busy, canSave: canSave, canPublish: canPublish, onDiscard: () => {
-                    setHeader(source.regions.header);
-                    setSignature(source.regions.signature);
-                    setFooter(source.regions.footer);
-                    setMjml(source.mjmlSource ?? "");
-                    setAppearance(storedAppearance);
-                    setSaveError(null);
-                }, onSave: () => void save(false), onPublish: () => void save(true) }), _jsx(Dialog, { open: pendingKind !== null, onOpenChange: (open) => {
+                    : "documentDesigner.editor.title.pdf"), stored: m.shownRow, actions: {
+                    busy: m.busy,
+                    canSave: m.canSave,
+                    canPublish: m.canPublish,
+                    onSave: () => void m.save(false),
+                    onPublish: () => void m.save(true),
+                }, children: renderKindSwitch(t, props, m) }), _jsx(OriginBar, { isSystemAdmin: isSystemAdmin, source: source, kind: kind, userCount: m.userCount, overrides: overrides, onReset: () => void onReload(), onResetError: m.setSaveError }), _jsx(EditorBody, { left: renderLeftRail(props, m), center: renderCenter(Banner, t, props, m), right: renderRightRail(props, m) }), _jsx(EditorFooter, { testIdPrefix: "document-designer", message: m.footerMessage, saveError: m.saveError, modifiedAt: null, dirty: m.dirty, busy: m.busy, canSave: m.canSave, canPublish: m.canPublish, onDiscard: m.discard, onSave: () => void m.save(false), onPublish: () => void m.save(true) }), _jsx(Dialog, { open: pendingKind !== null, onOpenChange: (open) => {
                     if (!open)
                         setPendingKind(null);
                 }, title: t("documentDesigner.editor.dirtySwitch.title"), description: t("documentDesigner.editor.dirtySwitch.description"), confirmLabel: t("documentDesigner.editor.dirtySwitch.confirm"), variant: "danger", onConfirm: () => {

package/dist/web/layout-editor-center.d.ts

@@ -0,0 +1,7 @@
+import type { usePrimitives } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import type { Translate } from "./layout-editor-logic.ts";
+import type { LayoutEditorBodyProps, LayoutEditorModel } from "./use-layout-editor-state.ts";
+type Banner = ReturnType<typeof usePrimitives>["Banner"];
+export declare function renderCenter(Banner: Banner, t: Translate, props: LayoutEditorBodyProps, m: LayoutEditorModel): ReactNode;
+export {};

package/dist/web/layout-editor-center.js

@@ -0,0 +1,23 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ModeSwitch, TextareaField } from "@cosmicdrift/kumiko-renderer/web";
+import { renderPaper } from "./layout-editor-paper.js";
+function renderToolbarRow(t, m) {
+    return (_jsxs("div", { className: "flex items-center border-b bg-background", children: [_jsx("div", { ref: m.setToolbarHost, className: "min-w-0 flex-1" }), m.showMjmlTab && (_jsx("div", { className: "shrink-0 px-3 py-1", children: _jsx(ModeSwitch, { value: m.tab, onChange: m.setTab, ariaLabel: t("documentDesigner.editor.tabSwitch"), testId: "layout-mjml-tab", options: [
+                        { value: "draft", label: t("documentDesigner.editor.tab.draft") },
+                        { value: "mjml", label: t("documentDesigner.editor.tab.mjml") },
+                    ] }) }))] }));
+}
+function renderMjmlNotice(Banner, t, props) {
+    return (_jsx(Banner, { variant: "info", testId: "document-designer-mjml-notice", children: t(props.isSystemAdmin
+            ? "documentDesigner.editor.mjmlNotice.platform"
+            : "documentDesigner.editor.mjmlNotice.tenant") }));
+}
+function renderDraftCanvas(Banner, t, props, m) {
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [props.source.effectiveFormat === "mjml" && renderMjmlNotice(Banner, t, props), renderPaper(t, m)] }));
+}
+function renderMjmlSource(t, m) {
+    return (_jsx(TextareaField, { id: "document-designer-mjml-source", name: "mjml", label: t("documentDesigner.editor.mjml.label"), value: m.mjml, onChange: m.setMjml, rows: 24, testId: "document-designer-mjml-source" }));
+}
+export function renderCenter(Banner, t, props, m) {
+    return (_jsxs(_Fragment, { children: [renderToolbarRow(t, m), _jsx("div", { className: "min-h-0 flex-1 overflow-auto px-8 py-6", children: m.mjmlMode ? renderMjmlSource(t, m) : renderDraftCanvas(Banner, t, props, m) })] }));
+}

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

@@ -0,0 +1,97 @@
+import { type useMutation } from "@cosmicdrift/kumiko-renderer";
+import type { FooterTone } from "./editor-shell.tsx";
+import { type LayoutAppearance, type LayoutWidth } from "./layout-meta.ts";
+import type { BrandingView, LayoutKind, LayoutSourceView, LayoutValidation, UpsertResponse, ValidationIssue } from "./layout-types.ts";
+export type EditorTab = "draft" | "mjml";
+export type Region = "header" | "signature" | "footer";
+export type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
+export declare const REGION_EDITOR_IDS: Readonly<Record<Region, string>>;
+export declare const PAPER_WIDTH_CLASS: Readonly<Record<LayoutWidth, string>>;
+export type FooterMessage = {
+    readonly tone: FooterTone;
+    readonly text: string;
+} | null;
+export type ResourcePreviews = Readonly<Record<string, {
+    readonly src: string;
+    readonly caption: string;
+}>>;
+export declare function issueText(t: Translate, issue: ValidationIssue): string;
+export declare function sameAppearance(a: LayoutAppearance, b: LayoutAppearance): boolean;
+export declare function initialTab(showMjmlTab: boolean, source: LayoutSourceView): EditorTab;
+export declare function layoutDirty(input: {
+    readonly mjmlMode: boolean;
+    readonly mjml: string;
+    readonly header: string;
+    readonly signature: string;
+    readonly footer: string;
+    readonly appearance: LayoutAppearance;
+    readonly storedAppearance: LayoutAppearance;
+    readonly appearanceEditable: boolean;
+    readonly source: LayoutSourceView;
+}): boolean;
+export declare function layoutContent(input: {
+    readonly mjmlMode: boolean;
+    readonly mjml: string;
+    readonly header: string;
+    readonly signature: string;
+    readonly footer: string;
+    readonly isMail: boolean;
+}): string;
+export declare function footerMessageOf(input: {
+    readonly t: Translate;
+    readonly checked: LayoutValidation | null;
+    readonly appearanceValid: boolean;
+    readonly isMail: boolean;
+    readonly userCount: number;
+}): FooterMessage;
+export declare function layoutBlocks(isMail: boolean): ("align" | "button" | "divider" | "image" | "pageBreak" | "repeat" | "table")[];
+export declare function resourcePreviewsOf(branding: BrandingView | null, isMail: boolean, t: Translate): ResourcePreviews | undefined;
+type UpsertMutation = ReturnType<typeof useMutation<UpsertResponse>>;
+type PublishMutation = ReturnType<typeof useMutation>;
+export type SaveLayoutInput = {
+    readonly publish: boolean;
+    readonly kind: LayoutKind;
+    readonly slug: string;
+    readonly source: LayoutSourceView;
+    readonly content: string;
+    readonly mjmlMode: boolean;
+    readonly isMail: boolean;
+    readonly isSystemAdmin: boolean;
+    readonly appearanceEditable: boolean;
+    readonly appearance: LayoutAppearance;
+    readonly t: Translate;
+    readonly upsertTenant: UpsertMutation;
+    readonly upsertSystem: UpsertMutation;
+    readonly publishSystem: PublishMutation;
+    readonly setSaveError: (message: string | null) => void;
+    readonly onReload: () => Promise<void>;
+};
+export declare function saveLayout(input: SaveLayoutInput): Promise<void>;
+export declare function accentLineShown(input: {
+    readonly isMail: boolean;
+    readonly appearanceEditable: boolean;
+    readonly appearance: LayoutAppearance;
+    readonly accentColor: string;
+}): boolean;
+export declare function appearanceFlags(input: {
+    readonly isMail: boolean;
+    readonly mjmlMode: boolean;
+    readonly source: LayoutSourceView;
+    readonly appearance: LayoutAppearance;
+}): {
+    appearanceFromMjml: boolean;
+    appearanceEditable: boolean;
+    appearanceValid: boolean;
+};
+export declare function shownRowOf(isSystemAdmin: boolean, source: LayoutSourceView): import("./layout-types.ts").LayoutSourceRow | null;
+export declare function layoutSaveFlags(input: {
+    readonly dirty: boolean;
+    readonly checked: LayoutValidation | null;
+    readonly appearanceValid: boolean;
+    readonly busy: boolean;
+    readonly shownRow: ReturnType<typeof shownRowOf>;
+}): {
+    canSave: boolean;
+    canPublish: boolean;
+};
+export {};

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

@@ -0,0 +1,143 @@
+import { MAIL_DOCUMENT_BLOCKS, PDF_DOCUMENT_BLOCKS, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { dispatcherErrorText } from "@cosmicdrift/kumiko-renderer";
+import { pluralKey } from "@cosmicdrift/kumiko-renderer/headless";
+import { composeLayoutHtml } from "./compose-layout.js";
+import { fileUrl } from "./file-name.js";
+import { isHexColor, metaToSave } from "./layout-meta.js";
+import { asRowStatus } from "./status-label.js";
+export const REGION_EDITOR_IDS = {
+    header: "document-designer-region-header",
+    signature: "document-designer-region-signature",
+    footer: "document-designer-region-footer",
+};
+export const PAPER_WIDTH_CLASS = {
+    560: "max-w-[560px]",
+    600: "max-w-[600px]",
+    640: "max-w-[640px]",
+};
+export function issueText(t, issue) {
+    const translated = t(issue.i18nKey, issue.params);
+    return translated === issue.i18nKey ? issue.code : translated;
+}
+export function sameAppearance(a, b) {
+    return (a.width === b.width &&
+        a.font === b.font &&
+        a.outerBackground === b.outerBackground &&
+        a.accentLine === b.accentLine &&
+        a.buttonStyle === b.buttonStyle);
+}
+export function initialTab(showMjmlTab, source) {
+    return showMjmlTab && source.effectiveFormat === "mjml" ? "mjml" : "draft";
+}
+export function layoutDirty(input) {
+    const { source } = input;
+    const appearanceDirty = input.appearanceEditable && !sameAppearance(input.appearance, input.storedAppearance);
+    const htmlDirty = input.header !== source.regions.header ||
+        input.signature !== source.regions.signature ||
+        input.footer !== source.regions.footer ||
+        appearanceDirty;
+    return input.mjmlMode ? input.mjml !== (source.mjmlSource ?? "") : htmlDirty;
+}
+export function layoutContent(input) {
+    return input.mjmlMode
+        ? input.mjml
+        : composeLayoutHtml({
+            header: input.header,
+            signature: input.isMail ? input.signature : "",
+            footer: input.footer,
+        });
+}
+export function footerMessageOf(input) {
+    const { t, checked, userCount } = input;
+    if (checked === null)
+        return null; // skip: nothing validated yet, no footer message
+    if (!input.appearanceValid) {
+        return { tone: "bad", text: t("documentDesigner.appearance.backgroundInvalid") };
+    }
+    const blockingIssue = [...checked.issues, ...checked.publishIssues][0];
+    if (blockingIssue !== undefined)
+        return { tone: "bad", text: issueText(t, blockingIssue) };
+    return {
+        tone: "ok",
+        text: t(pluralKey(input.isMail
+            ? "documentDesigner.editor.footer.okMail"
+            : "documentDesigner.editor.footer.okPdf", userCount), { count: userCount }),
+    };
+}
+// A layout region has no per-mail variables, so a steps block there could never show a stage and an images block no photos.
+export function layoutBlocks(isMail) {
+    return (isMail ? MAIL_DOCUMENT_BLOCKS : PDF_DOCUMENT_BLOCKS).filter((block) => block !== "steps" && block !== "images");
+}
+// The layout's "logo" resource is the branding logo, so the editor shows it instead of a chip.
+export function resourcePreviewsOf(branding, isMail, t) {
+    const logoFile = branding?.logoFile ?? "";
+    if (logoFile === "")
+        return undefined; // skip: no branding logo to preview
+    return {
+        logo: {
+            src: fileUrl(logoFile),
+            caption: isMail ? t("documentDesigner.editor.logoCaption") : "",
+        },
+    };
+}
+function metaOf(input) {
+    if (input.appearanceEditable)
+        return metaToSave(input.appearance, input.source.meta);
+    return input.isMail ? input.source.meta : {};
+}
+export async function saveLayout(input) {
+    const { t, setSaveError } = input;
+    setSaveError(null);
+    const base = {
+        slug: input.slug,
+        kind: input.kind,
+        locale: input.source.locale,
+        content: input.content,
+        contentFormat: input.mjmlMode ? "mjml" : "html",
+        meta: metaOf(input),
+    };
+    const saved = input.isSystemAdmin
+        ? await input.upsertSystem.mutate(base)
+        : await input.upsertTenant.mutate({ ...base, status: input.publish ? "active" : "draft" });
+    if (!saved.isSuccess) {
+        setSaveError(dispatcherErrorText(saved.error, t));
+        // skip: the failure is shown through saveError
+        return;
+    }
+    if (input.isSystemAdmin && input.publish) {
+        const published = await input.publishSystem.mutate({ id: saved.data.id });
+        if (!published.isSuccess) {
+            setSaveError(dispatcherErrorText(published.error, t));
+            // skip: the failure is shown through saveError
+            return;
+        }
+    }
+    await input.onReload();
+}
+export function accentLineShown(input) {
+    return (input.isMail &&
+        input.appearanceEditable &&
+        input.appearance.accentLine === "branding" &&
+        isHexColor(input.accentColor));
+}
+export function appearanceFlags(input) {
+    // An mjml layout brings its own look; the appearance fields only drive structured (html) layouts.
+    const appearanceFromMjml = input.source.effectiveFormat === "mjml" || input.mjmlMode;
+    const appearanceEditable = input.isMail && !appearanceFromMjml;
+    const appearanceValid = !appearanceEditable || isHexColor(input.appearance.outerBackground);
+    return { appearanceFromMjml, appearanceEditable, appearanceValid };
+}
+export function shownRowOf(isSystemAdmin, source) {
+    return isSystemAdmin ? source.system : (source.tenant ?? source.system);
+}
+export function layoutSaveFlags(input) {
+    const { checked, appearanceValid, busy } = input;
+    const shownStatus = input.shownRow === null ? null : asRowStatus(input.shownRow.status);
+    return {
+        canSave: input.dirty && checked?.canSave === true && appearanceValid && !busy,
+        canPublish: checked?.canPublish === true &&
+            appearanceValid &&
+            (input.dirty || shownStatus === "draft") &&
+            !busy,
+    };
+}

package/dist/web/layout-editor-paper.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from "react";
+import type { Translate } from "./layout-editor-logic.ts";
+import type { LayoutEditorModel } from "./use-layout-editor-state.ts";
+export declare function renderPaper(t: Translate, m: LayoutEditorModel): ReactNode;

package/dist/web/layout-editor-paper.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DocumentContentEditor } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { cn } from "@cosmicdrift/kumiko-renderer/web";
+import { PAPER_WIDTH_CLASS, REGION_EDITOR_IDS } from "./layout-editor-logic.js";
+// A dashed, labelled area of the paper; the focused one owns the shared toolbar.
+function PaperRegion({ label, testId, children, onFocus, }) {
+    return (_jsxs("div", { className: "relative rounded-sm border border-dashed border-input p-3", "data-testid": testId, onFocusCapture: onFocus, children: [_jsx("span", { className: "absolute -top-2.5 left-2.5 bg-card px-1.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: label }), children] }));
+}
+function renderRegionEditor(m, region, value, onChange) {
+    const { resourcePreviews } = m;
+    return (_jsx(DocumentContentEditor, { id: REGION_EDITOR_IDS[region], value: value, onChange: onChange, variables: m.placeholders, variableLabels: m.placeholderLabels, systemVariables: m.placeholders, readOnly: false, blocks: m.blocks, ...(resourcePreviews && { resourcePreviews }), chrome: "canvas", toolbarHost: m.activeRegion === region ? m.toolbarHost : null }));
+}
+function renderContentSlot(t, isMail) {
+    return (_jsxs("div", { className: "rounded-sm border-2 border-dashed border-primary bg-primary/10 px-3 py-9 text-center font-medium text-primary", "data-testid": "document-designer-region-content", children: ["\u229E ", t("documentDesigner.editor.region.content"), _jsx("small", { className: "mt-1 block text-xs font-normal opacity-85", children: t(isMail ? "documentDesigner.editor.slot.mail" : "documentDesigner.editor.slot.pdf") })] }));
+}
+function renderSignatureRegion(t, m) {
+    return (_jsx(PaperRegion, { label: t("documentDesigner.editor.region.signature"), testId: "document-designer-region-signature", onFocus: () => m.setActiveRegion("signature"), children: renderRegionEditor(m, "signature", m.signature, m.setSignature) }));
+}
+function renderFooterRegion(t, m) {
+    return (_jsx("div", { className: cn(m.isMail && "-mx-8 -mb-6 bg-muted px-8 py-4"), children: _jsx(PaperRegion, { label: t("documentDesigner.editor.region.footer"), testId: "document-designer-region-footer", onFocus: () => m.setActiveRegion("footer"), children: renderRegionEditor(m, "footer", m.footer, m.setFooter) }) }));
+}
+export function renderPaper(t, m) {
+    return (_jsxs("div", { className: cn("mx-auto flex w-full flex-col gap-5 bg-card px-8 py-6 shadow-md", m.isMail ? PAPER_WIDTH_CLASS[m.appearance.width] : "min-h-[842px] max-w-[595px]", m.showAccentLine && "border-t-4 border-t-(--layout-accent)"), ref: (element) => element?.style.setProperty("--layout-accent", m.accentColor), "data-testid": "document-designer-paper", children: [_jsx(PaperRegion, { label: t("documentDesigner.editor.region.header"), testId: "document-designer-region-header", onFocus: () => m.setActiveRegion("header"), children: renderRegionEditor(m, "header", m.header, m.setHeader) }), renderContentSlot(t, m.isMail), m.isMail && renderSignatureRegion(t, m), renderFooterRegion(t, m)] }));
+}

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

@@ -1,17 +1,5 @@
-import { type ReactNode } from "react";
-import type { MailValidation, TemplateRowView } from "./mail-types.ts";
-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[];
+import type { ReactNode } from "react";
+import type { MailEditorBodyProps } from "./mail-editor-logic.ts";
+export type { MailEditorBodyProps } from "./mail-editor-logic.ts";
+export { placeholderNames } from "./mail-editor-logic.ts";
 export declare function MailEditorBody(props: MailEditorBodyProps): ReactNode;