@cosmicdrift/kumiko-document-designer 0.388.0 → 0.390.0

package/dist/feature.js

@@ -1,6 +1,6 @@
 import { access, defineFeature, i18nKey, } from "@cosmicdrift/kumiko-framework/engine";
 import { TEMPLATE_FACETS, templateColumns, templateRowActions } from "./list-definition.js";
-import { DOCUMENT_DESIGNER_FEATURE, LAYOUT_EDITOR_SCREEN_ID, MAIL_EDITOR_SCREEN_ID, PDF_TEMPLATE_EDITOR_SCREEN_ID, PLATFORM_TEMPLATES_NAV_ID, PLATFORM_TEMPLATES_SCREEN_ID, TEMPLATES_NAV_ID, TEMPLATES_SCREEN_ID, } from "./web/constants.js";
+import { DOCUMENT_DESIGNER_FEATURE, LAYOUT_EDITOR_SCREEN_ID, MAIL_EDITOR_SCREEN_ID, PDF_TEMPLATE_EDITOR_SCREEN_ID, PLATFORM_LAYOUT_EDITOR_SCREEN_ID, PLATFORM_TEMPLATES_NAV_ID, PLATFORM_TEMPLATES_SCREEN_ID, TEMPLATES_NAV_ID, TEMPLATES_SCREEN_ID, } from "./web/constants.js";
 import { DOCUMENT_DESIGNER_I18N } from "./web/i18n.js";
 const OVERVIEW_QUERY = "template-resolver:query:overview";
 export function createDocumentDesignerFeature(options = {}) {
@@ -20,7 +20,7 @@ export function createDocumentDesignerFeature(options = {}) {
             query: OVERVIEW_QUERY,
             columns: templateColumns({ platform: false }),
             facets: [...TEMPLATE_FACETS],
-            rowActions: templateRowActions(),
+            rowActions: templateRowActions({ platform: false }),
             searchable: true,
             searchPlaceholder: i18nKey("documentDesigner.search"),
             pagination: "pages",
@@ -41,7 +41,7 @@ export function createDocumentDesignerFeature(options = {}) {
             query: OVERVIEW_QUERY,
             columns: templateColumns({ platform: true }),
             facets: [...TEMPLATE_FACETS],
-            rowActions: templateRowActions(),
+            rowActions: templateRowActions({ platform: true }),
             searchable: true,
             searchPlaceholder: i18nKey("documentDesigner.search"),
             pagination: "pages",
@@ -64,6 +64,14 @@ export function createDocumentDesignerFeature(options = {}) {
             dormant: true,
             access: { roles: access.roles(...editorRoles) },
         });
+        r.screen({
+            id: PLATFORM_LAYOUT_EDITOR_SCREEN_ID,
+            type: "custom",
+            renderer: { react: { __component: PLATFORM_LAYOUT_EDITOR_SCREEN_ID } },
+            description: "documentDesigner.screen.layoutEditor.description",
+            dormant: true,
+            access: { roles: access.systemAdmin },
+        });
         r.screen({
             id: PDF_TEMPLATE_EDITOR_SCREEN_ID,
             type: "custom",

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { createDocumentDesignerFeature, type DocumentDesignerOptions } from "./feature.ts";
-export { DEFAULT_TEMPLATE_LOCALES, DOCUMENT_DESIGNER_FEATURE, LAYOUT_EDITOR_SCREEN_ID, MAIL_EDITOR_SCREEN_ID, PDF_TEMPLATE_EDITOR_SCREEN_ID, PLATFORM_TEMPLATES_NAV_ID, PLATFORM_TEMPLATES_SCREEN_ID, TEMPLATE_EDITOR_SCREENS, TEMPLATES_NAV_ID, TEMPLATES_SCREEN_ID, type TemplateEditorKind, } from "./web/constants.ts";
+export { DEFAULT_TEMPLATE_LOCALES, DOCUMENT_DESIGNER_FEATURE, LAYOUT_EDITOR_SCREEN_ID, MAIL_EDITOR_SCREEN_ID, PDF_TEMPLATE_EDITOR_SCREEN_ID, PLATFORM_LAYOUT_EDITOR_SCREEN_ID, PLATFORM_TEMPLATES_NAV_ID, PLATFORM_TEMPLATES_SCREEN_ID, TEMPLATE_EDITOR_SCREENS, TEMPLATES_NAV_ID, TEMPLATES_SCREEN_ID, type TemplateEditorKind, } from "./web/constants.ts";

package/dist/index.js

@@ -1,2 +1,2 @@
 export { createDocumentDesignerFeature } from "./feature.js";
-export { DEFAULT_TEMPLATE_LOCALES, DOCUMENT_DESIGNER_FEATURE, LAYOUT_EDITOR_SCREEN_ID, MAIL_EDITOR_SCREEN_ID, PDF_TEMPLATE_EDITOR_SCREEN_ID, PLATFORM_TEMPLATES_NAV_ID, PLATFORM_TEMPLATES_SCREEN_ID, TEMPLATE_EDITOR_SCREENS, TEMPLATES_NAV_ID, TEMPLATES_SCREEN_ID, } from "./web/constants.js";
+export { DEFAULT_TEMPLATE_LOCALES, DOCUMENT_DESIGNER_FEATURE, LAYOUT_EDITOR_SCREEN_ID, MAIL_EDITOR_SCREEN_ID, PDF_TEMPLATE_EDITOR_SCREEN_ID, PLATFORM_LAYOUT_EDITOR_SCREEN_ID, PLATFORM_TEMPLATES_NAV_ID, PLATFORM_TEMPLATES_SCREEN_ID, TEMPLATE_EDITOR_SCREENS, TEMPLATES_NAV_ID, TEMPLATES_SCREEN_ID, } from "./web/constants.js";

package/dist/list-definition.d.ts

@@ -3,4 +3,6 @@ export declare function templateColumns(options: {
     readonly platform: boolean;
 }): ListColumnSpec[];
 export declare const TEMPLATE_FACETS: readonly ListFacetSpec[];
-export declare function templateRowActions(): RowAction[];
+export declare function templateRowActions(options: {
+    readonly platform: boolean;
+}): RowAction[];

package/dist/list-definition.js

@@ -1,6 +1,6 @@
 import { TemplateResolverHandlers } from "@cosmicdrift/kumiko-bundled-features/template-resolver";
 import { i18nKey, } from "@cosmicdrift/kumiko-framework/engine";
-import { DocumentDesignerCells, TEMPLATE_EDITOR_SCREENS, } from "./web/constants.js";
+import { DocumentDesignerCells, PLATFORM_LAYOUT_EDITOR_SCREEN_ID, TEMPLATE_EDITOR_SCREENS, } from "./web/constants.js";
 function cell(component) {
     return { react: { __component: component } };
 }
@@ -85,6 +85,9 @@ export const TEMPLATE_FACETS = [
         ],
     },
 ];
+function isLayoutKind(kind) {
+    return kind === "mail-layout" || kind === "pdf-layout";
+}
 const EDITABLE_KINDS = [
     "mail",
     "document-pdf",
@@ -101,9 +104,13 @@ const RESET_LOCKED_OVERRIDE_ACTION = {
     style: "danger",
     visible: { field: "canResetLockedOverride", eq: true },
 };
-export function templateRowActions() {
+// The screen the row is opened from fixes the layout scope: the platform overview edits the system
+// layout, the tenant overview always the tenant's own, even for a SystemAdmin on a system-origin row.
+export function templateRowActions(options) {
     const editActions = EDITABLE_KINDS.flatMap((kind) => {
-        const screen = TEMPLATE_EDITOR_SCREENS[kind];
+        const screen = options.platform && isLayoutKind(kind)
+            ? PLATFORM_LAYOUT_EDITOR_SCREEN_ID
+            : TEMPLATE_EDITOR_SCREENS[kind];
         if (screen === undefined)
             return [];
         return [

package/dist/web/client-plugin.js

@@ -4,14 +4,17 @@ import { mergeTranslations, translationsByLocaleFromKeys, useNav, } from "@cosmi
 import { LoadingState } from "@cosmicdrift/kumiko-renderer/web";
 import { lazy, Suspense } from "react";
 import { createLocalesCell, KindCell, ModifiedCell, OriginCell, OverriddenByCell, StatusCell, TitleCell, UsedByCell, } from "./cells.js";
-import { DEFAULT_TEMPLATE_LOCALES, DOCUMENT_DESIGNER_FEATURE, DocumentDesignerCells, LAYOUT_EDITOR_SCREEN_ID, MAIL_EDITOR_SCREEN_ID, PDF_TEMPLATE_EDITOR_SCREEN_ID, } from "./constants.js";
+import { DEFAULT_TEMPLATE_LOCALES, DOCUMENT_DESIGNER_FEATURE, DocumentDesignerCells, LAYOUT_EDITOR_SCREEN_ID, MAIL_EDITOR_SCREEN_ID, PDF_TEMPLATE_EDITOR_SCREEN_ID, PLATFORM_LAYOUT_EDITOR_SCREEN_ID, } from "./constants.js";
 import { documentDesignerTranslations } from "./default-translations.js";
 import { DOCUMENT_DESIGNER_I18N } from "./i18n.js";
 // The editors pull tiptap, MJML preview and the page canvas; load them on first mount.
 const LazyLayoutEditor = lazy(() => import("./layout-editor.js").then((module) => ({ default: module.LayoutEditor })));
 const LazyPdfTemplateEditor = lazy(() => import("./pdf-template-editor.js").then((module) => ({ default: module.PdfTemplateEditor })));
 function LayoutEditorScreen() {
-    return (_jsx(Suspense, { fallback: _jsx(LoadingState, {}), children: _jsx(LazyLayoutEditor, {}) }));
+    return (_jsx(Suspense, { fallback: _jsx(LoadingState, {}), children: _jsx(LazyLayoutEditor, { scope: "tenant" }) }));
+}
+function PlatformLayoutEditorScreen() {
+    return (_jsx(Suspense, { fallback: _jsx(LoadingState, {}), children: _jsx(LazyLayoutEditor, { scope: "system" }) }));
 }
 function createLazyMailEditor(appLocales) {
     const LazyMailEditor = lazy(() => import("./mail-editor.js").then((module) => ({
@@ -47,6 +50,7 @@ export function documentDesignerClient(options = {}) {
         },
         components: {
             [LAYOUT_EDITOR_SCREEN_ID]: LayoutEditorScreen,
+            [PLATFORM_LAYOUT_EDITOR_SCREEN_ID]: PlatformLayoutEditorScreen,
             [PDF_TEMPLATE_EDITOR_SCREEN_ID]: PdfTemplateEditorScreen,
             [MAIL_EDITOR_SCREEN_ID]: createLazyMailEditor(options.appLocales ?? DEFAULT_TEMPLATE_LOCALES),
         },

package/dist/web/constants.d.ts

@@ -2,6 +2,7 @@ export declare const DOCUMENT_DESIGNER_FEATURE: "document-designer";
 export declare const TEMPLATES_SCREEN_ID: "templates";
 export declare const PLATFORM_TEMPLATES_SCREEN_ID: "platform-templates";
 export declare const LAYOUT_EDITOR_SCREEN_ID: "layout-editor";
+export declare const PLATFORM_LAYOUT_EDITOR_SCREEN_ID: "platform-layout-editor";
 export declare const PDF_TEMPLATE_EDITOR_SCREEN_ID: "pdf-template-editor";
 export declare const MAIL_EDITOR_SCREEN_ID: "mail-editor";
 export declare const TEMPLATES_NAV_ID: "templates";

package/dist/web/constants.js

@@ -3,6 +3,7 @@ export const DOCUMENT_DESIGNER_FEATURE = "document-designer";
 export const TEMPLATES_SCREEN_ID = "templates";
 export const PLATFORM_TEMPLATES_SCREEN_ID = "platform-templates";
 export const LAYOUT_EDITOR_SCREEN_ID = "layout-editor";
+export const PLATFORM_LAYOUT_EDITOR_SCREEN_ID = "platform-layout-editor";
 export const PDF_TEMPLATE_EDITOR_SCREEN_ID = "pdf-template-editor";
 export const MAIL_EDITOR_SCREEN_ID = "mail-editor";
 export const TEMPLATES_NAV_ID = "templates";

package/dist/web/i18n.js

@@ -3,6 +3,7 @@ export const DOCUMENT_DESIGNER_I18N = {
     "screen:templates.title": { en: "Templates", de: "Vorlagen" },
     "screen:platform-templates.title": { en: "System templates", de: "System-Vorlagen" },
     "screen:layout-editor.title": { en: "Layout", de: "Layout" },
+    "screen:platform-layout-editor.title": { en: "System layout", de: "System-Layout" },
     "screen:pdf-template-editor.title": { en: "PDF template", de: "PDF-Vorlage" },
     "document-designer:nav.templates": { en: "Templates", de: "Vorlagen" },
     "document-designer:nav.platformTemplates": { en: "System templates", de: "System-Vorlagen" },

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 {};