@cosmicdrift/kumiko-document-designer 0.363.0 → 0.365.0

package/dist/web/i18n.js

@@ -1,11 +1,6 @@
 export const documentDesignerTranslations = {
     en: {
-        "documentDesigner.actions.discard": "Discard changes",
         "documentDesigner.actions.generatePdf": "Generate PDF",
-        "documentDesigner.actions.publish": "Publish",
-        "documentDesigner.actions.save": "Save",
-        "documentDesigner.breadcrumb.platform": "Platform",
-        "documentDesigner.breadcrumb.templates": "Templates",
         "documentDesigner.canvas.caption": 'Page 1 · {format} · The preview shows page breaks only roughly; "Generate PDF" is authoritative.',
         "documentDesigner.canvas.fromLayout": 'from layout "{layout}"',
         "documentDesigner.error.resourceTooLarge": "The image is too large. Please choose a smaller file.",
@@ -16,43 +11,40 @@ export const documentDesignerTranslations = {
         "documentDesigner.localeDialog.discard": "Discard changes",
         "documentDesigner.localeDialog.save": "Save and switch",
         "documentDesigner.localeDialog.title": "Unsaved changes",
-        "documentDesigner.mode.edit": "Edit",
-        "documentDesigner.mode.label": "View",
-        "documentDesigner.mode.preview": "Preview",
         "documentDesigner.notFound": 'Template "{slug}" was not found.',
-        "documentDesigner.origin.system": "System template",
-        "documentDesigner.origin.tenant": "Tenant customisation",
         "documentDesigner.originBar.export": "Export as bundle",
         "documentDesigner.originBar.noTotal": "System template for all tenants. {count} tenants have their own version and do not receive changes made here.",
         "documentDesigner.originBar.withTotal": "System template for all tenants. {count} of {total} tenants have their own version and do not receive changes made here.",
         "documentDesigner.originBar.showOverrides": "Show tenant customisations",
-        "documentDesigner.overrides.active": "Customised and active",
-        "documentDesigner.overrides.draftOnly": "Draft only",
-        "documentDesigner.overrides.none": "No own version",
+        "documentDesigner.overrides.action.diff": "Show difference",
+        "documentDesigner.overrides.action.open": "Open",
+        "documentDesigner.overrides.back": "Back to the list",
+        "documentDesigner.overrides.column.changed": "Changed",
+        "documentDesigner.overrides.column.status": "Status",
+        "documentDesigner.overrides.column.tenant": "Tenant",
+        "documentDesigner.overrides.column.version": "Version",
+        "documentDesigner.overrides.detail.version": "{tenant}, version {version}",
+        "documentDesigner.overrides.empty": "No tenant has customised this template. Changes here apply to everyone.",
+        "documentDesigner.overrides.status.active": "Customised",
+        "documentDesigner.overrides.status.draft": "Draft",
+        "documentDesigner.overrides.summary": "{count} tenants have their own version.",
         "documentDesigner.overrides.title": "Tenant customisations",
-        "documentDesigner.overrides.total": "Tenants in total",
         "documentDesigner.overrides.usedBy": "Used by",
         "documentDesigner.overrides.usedByEmpty": "No registered notification uses this template directly.",
         "documentDesigner.pdfUnavailable": "PDF generation is not available: {message}",
-        "documentDesigner.placeholders.fromLayout": "Layout",
+        "documentDesigner.pdfUnavailableNoReason": "PDF generation is not available.",
         "documentDesigner.placeholders.layoutHint": 'Images travel with the PDF as data URIs. Header and footer come from the layout "{layout}" and are the same on every page.',
-        "documentDesigner.placeholders.missing": "missing",
-        "documentDesigner.placeholders.system": "System placeholders",
-        "documentDesigner.placeholders.title": "Placeholders",
         "documentDesigner.preview.loading": "Generating PDF...",
         "documentDesigner.preview.pageOf": "Page {page} of {pages}",
         "documentDesigner.preview.renderFailed": "The PDF could not be displayed.",
         "documentDesigner.preview.stale": "The preview is out of date. Generate the PDF again.",
         "documentDesigner.resources.empty": "No images yet.",
-        "documentDesigner.resources.insert": "Insert",
-        "documentDesigner.resources.insertNamed": "Insert image {key}",
         "documentDesigner.resources.saveFirst": "Save the template first, then you can upload images.",
         "documentDesigner.resources.title": "Resources",
         "documentDesigner.resources.upload": "+ Upload",
         "documentDesigner.settings.fileName": "File name",
         "documentDesigner.settings.landscape": "Landscape",
         "documentDesigner.settings.layout": "Layout",
-        "documentDesigner.settings.layoutDefault": "Default",
         "documentDesigner.settings.layoutHeaderFooter": "Header and footer from layout",
         "documentDesigner.settings.marginBottom": "Bottom (mm)",
         "documentDesigner.settings.marginLeft": "Left (mm)",
@@ -61,37 +53,28 @@ export const documentDesignerTranslations = {
         "documentDesigner.settings.metaAuthor": "Author",
         "documentDesigner.settings.metadata": "PDF metadata",
         "documentDesigner.settings.metaLanguage": "Language",
+        "documentDesigner.settings.metaLanguageHint": "Follows the template language. Switch it with the language selector in the header.",
+        "documentDesigner.settings.margins": "Margins in mm (top, right, bottom, left)",
         "documentDesigner.settings.metaTitle": "Title",
         "documentDesigner.settings.orientation": "Orientation",
-        "documentDesigner.settings.page": "Page",
+        "documentDesigner.settings.page": "Document",
         "documentDesigner.settings.pageFormat": "Page format",
         "documentDesigner.settings.portrait": "Portrait",
         "documentDesigner.settings.printBackground": "Print backgrounds and colours",
         "documentDesigner.settings.storage": "Storage",
         "documentDesigner.settings.storageHint": "Every generated PDF carries the template id and version. Invoices stay verifiable even if the template changes later.",
-        "documentDesigner.settings.versions": "Versions",
         "documentDesigner.status.active": "Active",
         "documentDesigner.status.activeVersion": "Active v{version}",
         "documentDesigner.status.draft": "Draft",
         "documentDesigner.status.draftVersion": "Draft v{version}",
-        "documentDesigner.system.imprint": "Imprint",
-        "documentDesigner.system.page": "Page / Pages",
-        "documentDesigner.system.pages": "Pages",
-        "documentDesigner.system.signature": "Signature",
-        "documentDesigner.system.tenantName": "Tenant name",
         "documentDesigner.validation.lastProbe": "Last test run: {pages} pages, {size}, {seconds} s",
         "documentDesigner.validation.missingRequired": 'Required placeholder "{name}" is missing. Publishing is blocked.',
-        "documentDesigner.validation.ok": "All required placeholders are present.",
+        "documentDesigner.validation.ok": "All required placeholders are present. After publishing, new PDFs use this version.",
     },
     de: {
-        "documentDesigner.actions.discard": "Änderungen verwerfen",
         "documentDesigner.actions.generatePdf": "PDF erzeugen",
-        "documentDesigner.actions.publish": "Veröffentlichen",
-        "documentDesigner.actions.save": "Speichern",
-        "documentDesigner.breadcrumb.platform": "Plattform",
-        "documentDesigner.breadcrumb.templates": "Vorlagen",
         "documentDesigner.canvas.caption": 'Seite 1 · {format} · Die Vorschau zeigt Seitengrenzen nur ungefähr, verbindlich ist "PDF erzeugen".',
-        "documentDesigner.canvas.fromLayout": 'aus Layout "{layout}"',
+        "documentDesigner.canvas.fromLayout": "aus Layout „{layout}“",
         "documentDesigner.error.resourceTooLarge": "Das Bild ist zu groß. Bitte eine kleinere Datei wählen.",
         "documentDesigner.error.resourceUnsupportedImage": "Dieses Bildformat wird nicht unterstützt. Nutzen Sie PNG, JPEG, GIF oder WebP.",
         "documentDesigner.locale": "Sprache",
@@ -100,43 +83,40 @@ export const documentDesignerTranslations = {
         "documentDesigner.localeDialog.discard": "Änderungen verwerfen",
         "documentDesigner.localeDialog.save": "Speichern und wechseln",
         "documentDesigner.localeDialog.title": "Ungespeicherte Änderungen",
-        "documentDesigner.mode.edit": "Bearbeiten",
-        "documentDesigner.mode.label": "Ansicht",
-        "documentDesigner.mode.preview": "Vorschau",
         "documentDesigner.notFound": 'Die Vorlage "{slug}" wurde nicht gefunden.',
-        "documentDesigner.origin.system": "System-Vorlage",
-        "documentDesigner.origin.tenant": "Mandanten-Anpassung",
         "documentDesigner.originBar.export": "Als Bundle exportieren",
         "documentDesigner.originBar.noTotal": "System-Vorlage für alle Mandanten. {count} Mandanten haben eine eigene Fassung und bekommen Änderungen hier nicht.",
         "documentDesigner.originBar.withTotal": "System-Vorlage für alle Mandanten. {count} von {total} Mandanten haben eine eigene Fassung und bekommen Änderungen hier nicht.",
         "documentDesigner.originBar.showOverrides": "Anpassungen der Mandanten anzeigen",
-        "documentDesigner.overrides.active": "Angepasst und aktiv",
-        "documentDesigner.overrides.draftOnly": "Nur Entwurf",
-        "documentDesigner.overrides.none": "Ohne eigene Fassung",
+        "documentDesigner.overrides.action.diff": "Unterschied anzeigen",
+        "documentDesigner.overrides.action.open": "Öffnen",
+        "documentDesigner.overrides.back": "Zurück zur Liste",
+        "documentDesigner.overrides.column.changed": "Geändert",
+        "documentDesigner.overrides.column.status": "Status",
+        "documentDesigner.overrides.column.tenant": "Mandant",
+        "documentDesigner.overrides.column.version": "Version",
+        "documentDesigner.overrides.detail.version": "{tenant}, Version {version}",
+        "documentDesigner.overrides.empty": "Kein Mandant hat diese Vorlage angepasst. Änderungen hier gelten für alle.",
+        "documentDesigner.overrides.status.active": "Angepasst",
+        "documentDesigner.overrides.status.draft": "Entwurf",
+        "documentDesigner.overrides.summary": "{count} Mandanten haben eine eigene Fassung.",
         "documentDesigner.overrides.title": "Anpassungen der Mandanten",
-        "documentDesigner.overrides.total": "Mandanten gesamt",
         "documentDesigner.overrides.usedBy": "Wird verwendet von",
         "documentDesigner.overrides.usedByEmpty": "Keine registrierte Benachrichtigung nutzt diese Vorlage direkt.",
         "documentDesigner.pdfUnavailable": "PDF-Erzeugung nicht verfügbar: {message}",
-        "documentDesigner.placeholders.fromLayout": "Layout",
+        "documentDesigner.pdfUnavailableNoReason": "PDF-Erzeugung nicht verfügbar.",
         "documentDesigner.placeholders.layoutHint": 'Bilder gehen im PDF als Data-URI mit. Kopf- und Fußzeile kommen aus dem Layout "{layout}" und sind auf allen Seiten gleich.',
-        "documentDesigner.placeholders.missing": "fehlt",
-        "documentDesigner.placeholders.system": "System-Platzhalter",
-        "documentDesigner.placeholders.title": "Platzhalter",
         "documentDesigner.preview.loading": "PDF wird erzeugt ...",
         "documentDesigner.preview.pageOf": "Seite {page} von {pages}",
         "documentDesigner.preview.renderFailed": "Das PDF konnte nicht angezeigt werden.",
         "documentDesigner.preview.stale": "Die Vorschau ist veraltet. Bitte das PDF neu erzeugen.",
         "documentDesigner.resources.empty": "Noch keine Bilder.",
-        "documentDesigner.resources.insert": "Einfügen",
-        "documentDesigner.resources.insertNamed": "Bild {key} einfügen",
         "documentDesigner.resources.saveFirst": "Speichern Sie die Vorlage zuerst, danach können Bilder hochgeladen werden.",
         "documentDesigner.resources.title": "Ressourcen",
         "documentDesigner.resources.upload": "+ Hochladen",
         "documentDesigner.settings.fileName": "Dateiname",
         "documentDesigner.settings.landscape": "Querformat",
         "documentDesigner.settings.layout": "Layout",
-        "documentDesigner.settings.layoutDefault": "Standard",
         "documentDesigner.settings.layoutHeaderFooter": "Kopf- und Fußzeile aus Layout",
         "documentDesigner.settings.marginBottom": "Unten (mm)",
         "documentDesigner.settings.marginLeft": "Links (mm)",
@@ -145,26 +125,22 @@ export const documentDesignerTranslations = {
         "documentDesigner.settings.metaAuthor": "Autor",
         "documentDesigner.settings.metadata": "Metadaten im PDF",
         "documentDesigner.settings.metaLanguage": "Sprache",
+        "documentDesigner.settings.metaLanguageHint": "Folgt der Sprache der Vorlage. Umstellen über die Sprachauswahl im Kopf.",
+        "documentDesigner.settings.margins": "Ränder in mm (oben, rechts, unten, links)",
         "documentDesigner.settings.metaTitle": "Titel",
         "documentDesigner.settings.orientation": "Ausrichtung",
-        "documentDesigner.settings.page": "Seite",
+        "documentDesigner.settings.page": "Dokument",
         "documentDesigner.settings.pageFormat": "Seitenformat",
         "documentDesigner.settings.portrait": "Hochformat",
         "documentDesigner.settings.printBackground": "Hintergründe und Farben drucken",
         "documentDesigner.settings.storage": "Ablage",
         "documentDesigner.settings.storageHint": "Jedes erzeugte PDF trägt Vorlagen-Id und Version. Rechnungen bleiben so nachweisbar, auch wenn die Vorlage später geändert wird.",
-        "documentDesigner.settings.versions": "Versionen",
         "documentDesigner.status.active": "Aktiv",
         "documentDesigner.status.activeVersion": "Aktiv v{version}",
         "documentDesigner.status.draft": "Entwurf",
         "documentDesigner.status.draftVersion": "Entwurf v{version}",
-        "documentDesigner.system.imprint": "Impressum",
-        "documentDesigner.system.page": "Seite / Seiten",
-        "documentDesigner.system.pages": "Seiten",
-        "documentDesigner.system.signature": "Signatur",
-        "documentDesigner.system.tenantName": "Mandantenname",
         "documentDesigner.validation.lastProbe": "Letzte Probe-Erzeugung: {pages} Seiten, {size}, {seconds} s",
         "documentDesigner.validation.missingRequired": 'Pflicht-Platzhalter "{name}" fehlt. Veröffentlichen ist gesperrt.',
-        "documentDesigner.validation.ok": "Alle Pflicht-Platzhalter vorhanden.",
+        "documentDesigner.validation.ok": "Alle Pflicht-Platzhalter vorhanden. Nach dem Veröffentlichen nutzen neue PDFs diese Fassung.",
     },
 };

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

@@ -1,14 +1,14 @@
 import { type ReactNode } from "react";
 import type { LayoutKind, LayoutSourceView, TenantOverrideCounts } from "./layout-types.js";
 import type { OverviewRowView } from "./overview-row.js";
-export declare function LayoutEditorBody({ kind, slug, isSystemAdmin, source, overviewRows, overrides, onKindChange, onReload, onBack, }: {
+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>;
-    readonly onBack: () => void;
 }): ReactNode;

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

@@ -2,43 +2,49 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // @runtime client
 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 { ModeSwitch, StatusBadge, TextareaField } from "@cosmicdrift/kumiko-renderer-web";
-import { useDeferredValue, useState } from "react";
+import { cn, ModeSwitch, TextareaField } from "@cosmicdrift/kumiko-renderer-web";
+import { useState } from "react";
+import { BRANDING_QUERY_QN } from "../constants.js";
 import { composeLayoutHtml } from "./compose-layout.js";
-import { AppearanceRail, BrandingRail, MjmlPreviewRail, PlaceholderRail, UsedByRail, } from "./layout-rails.js";
-import { layoutUsers } from "./layout-users.js";
+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 { AppearanceRail, BrandingRail, MjmlSourceRail, PlaceholderRail, RendererRail, UsedByRail, } from "./layout-rails.js";
+import { systemLabelMap } from "./mail-draft.js";
 import { OriginBar } from "./origin-bar.js";
-import { asRowStatus, statusLabel, statusTone } from "./status-label.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",
 };
-function RegionLabel({ children }) {
-    return (_jsx("span", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: children }));
-}
-function PaperRegion({ label, testId, children, }) {
-    return (_jsxs("div", { className: "flex flex-col gap-1.5 px-8 py-3", "data-testid": testId, children: [_jsx(RegionLabel, { children: label }), children] }));
-}
+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;
 }
-function FooterMessage({ blockingIssue, checked, userCount, isMail, }) {
-    const t = useTranslation();
-    if (!checked) {
-        return (_jsx("span", { className: "text-sm text-muted-foreground", children: t("documentDesigner.editor.footer.checking") }));
-    }
-    if (blockingIssue !== undefined) {
-        return (_jsx("span", { className: "text-sm text-status-bad", "data-testid": "document-designer-footer-issue", children: issueText(t, blockingIssue) }));
-    }
-    return (_jsx("span", { className: "text-sm text-status-ok", "data-testid": "document-designer-footer-ok", children: t(isMail ? "documentDesigner.editor.footer.okMail" : "documentDesigner.editor.footer.okPdf", {
-            count: userCount,
-        }) }));
+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);
+}
+// 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] }));
 }
-export function LayoutEditorBody({ kind, slug, isSystemAdmin, source, overviewRows, overrides, onKindChange, onReload, onBack, }) {
+export function LayoutEditorBody({ kind, slug, isSystemAdmin, source, overviewRows, usedByCount, overrides, onKindChange, onReload, }) {
     const t = useTranslation();
-    const { Banner, Button, Dialog, Heading, Link, Text } = usePrimitives();
+    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");
@@ -46,32 +52,44 @@ export function LayoutEditorBody({ kind, slug, isSystemAdmin, source, overviewRo
     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;
+        footer !== source.regions.footer ||
+        appearanceDirty;
     const dirty = mjmlMode ? mjml !== (source.mjmlSource ?? "") : htmlDirty;
     const content = mjmlMode
         ? mjml
         : composeLayoutHtml({ header, signature: isMail ? signature : "", footer });
-    const deferredContent = useDeferredValue(content);
+    const debouncedContent = useDebouncedValue(content, VALIDATE_DEBOUNCE_MS);
     const validation = useQuery(TemplateResolverQueries.validate, {
         slug,
         kind,
         contentFormat: mjmlMode ? "mjml" : "html",
-        content: deferredContent,
+        content: debouncedContent,
         locale: source.locale,
         scope: isSystemAdmin ? "system" : "tenant",
     });
     const checked = validation.data;
     const shownRow = isSystemAdmin ? source.system : (source.tenant ?? source.system);
-    const userCount = layoutUsers(overviewRows, kind, slug).length;
+    const userCount = usedByCount;
     const placeholders = checked?.systemPlaceholders ?? [];
+    const placeholderLabels = systemLabelMap(t, placeholders);
     const requestKind = (next) => {
         if (next === kind)
             return;
@@ -88,7 +106,7 @@ export function LayoutEditorBody({ kind, slug, isSystemAdmin, source, overviewRo
             locale: source.locale,
             content,
             contentFormat: mjmlMode ? "mjml" : "html",
-            meta: {},
+            meta: appearanceEditable ? metaToSave(appearance, source.meta) : isMail ? source.meta : {},
         };
         const saved = isSystemAdmin
             ? await upsertSystem.mutate(base)
@@ -108,31 +126,62 @@ export function LayoutEditorBody({ kind, slug, isSystemAdmin, source, overviewRo
     };
     const busy = upsertTenant.pending || upsertSystem.pending || publishSystem.pending;
     const shownStatus = shownRow === null ? null : asRowStatus(shownRow.status);
-    const canSave = dirty && checked?.canSave === true && !busy;
-    const canPublish = checked?.canPublish === true && (dirty || shownStatus === "draft") && !busy;
+    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 backLink = (_jsx(Link, { href: "#", onPress: onBack, testId: "document-designer-back", children: t("documentDesigner.editor.crumb") }));
-    return (_jsxs("div", { className: "flex flex-col gap-4 p-6", "data-testid": "document-designer-layout-editor", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [backLink, _jsx(Text, { variant: "muted", children: "\u203A" }), _jsx(Heading, { variant: "page", testId: "document-designer-editor-title", children: t(isMail ? "documentDesigner.editor.title.mail" : "documentDesigner.editor.title.pdf") }), shownRow !== null && shownStatus !== null && (_jsx(StatusBadge, { tone: statusTone(shownStatus), testId: "document-designer-editor-status", children: statusLabel(t, shownStatus, shownRow.version) })), _jsx(StatusBadge, { tone: source.tenant !== null ? "accent" : "muted", testId: "document-designer-editor-origin", children: t(source.tenant !== null
-                            ? "documentDesigner.source.tenant"
-                            : "documentDesigner.source.system") }), _jsx("div", { className: "grow" }), _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() }), _jsxs("div", { className: "grid items-start gap-4 lg:grid-cols-[260px_minmax(0,1fr)_280px]", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(BrandingRail, {}), _jsx(PlaceholderRail, { validation: checked })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [showMjmlTab && (_jsx("div", { className: "flex justify-end", 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") },
-                                    ] }) })), 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(_Fragment, { children: [source.effectiveFormat === "mjml" && (_jsx(Banner, { variant: "info", testId: "document-designer-mjml-notice", children: t(isSystemAdmin
+    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(isMail
+                        ? "documentDesigner.editor.footer.okMail"
+                        : "documentDesigner.editor.footer.okPdf", { 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.
+    const blocks = (isMail ? MAIL_DOCUMENT_BLOCKS : PDF_DOCUMENT_BLOCKS).filter((block) => block !== "steps");
+    // 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 }));
+    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: isMail
-                                            ? "mx-auto w-[600px] max-w-full divide-y rounded-md border bg-card py-2"
-                                            : "mx-auto min-h-[842px] w-[595px] max-w-full divide-y rounded-md border bg-card py-2", "data-testid": "document-designer-paper", children: [_jsx(PaperRegion, { label: t("documentDesigner.editor.region.header"), testId: "document-designer-region-header", children: _jsx(DocumentContentEditor, { id: REGION_EDITOR_IDS.header, value: header, onChange: setHeader, variables: placeholders, readOnly: false, blocks: isMail ? MAIL_DOCUMENT_BLOCKS : PDF_DOCUMENT_BLOCKS, toolbar: "compact" }) }), _jsx(PaperRegion, { label: t("documentDesigner.editor.region.content"), testId: "document-designer-region-content", children: _jsx("div", { className: "rounded-md border border-dashed px-4 py-6 text-center text-sm text-muted-foreground", 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", children: _jsx(DocumentContentEditor, { id: REGION_EDITOR_IDS.signature, value: signature, onChange: setSignature, variables: placeholders, readOnly: false, blocks: MAIL_DOCUMENT_BLOCKS, toolbar: "compact" }) })), _jsx(PaperRegion, { label: t("documentDesigner.editor.region.footer"), testId: "document-designer-region-footer", children: _jsx(DocumentContentEditor, { id: REGION_EDITOR_IDS.footer, value: footer, onChange: setFooter, variables: placeholders, readOnly: false, blocks: isMail ? MAIL_DOCUMENT_BLOCKS : PDF_DOCUMENT_BLOCKS, toolbar: "compact" }) })] })] }))] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(AppearanceRail, { kind: kind }), showMjmlTab && !mjmlMode && source.mjmlSource !== null && (_jsx(MjmlPreviewRail, { mjmlSource: source.mjmlSource })), _jsx(UsedByRail, { layoutSlug: slug, kind: kind, rows: overviewRows })] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3 border-t pt-3", "data-testid": "document-designer-footer-bar", children: [saveError !== null ? (_jsx(Banner, { variant: "error", testId: "document-designer-save-error", children: saveError })) : (_jsx(FooterMessage, { blockingIssue: blockingIssue, checked: checked !== null, userCount: userCount, isMail: isMail })), _jsx("div", { className: "grow" }), dirty && (_jsx(Button, { variant: "ghost", onClick: () => {
-                            setHeader(source.regions.header);
-                            setSignature(source.regions.signature);
-                            setFooter(source.regions.footer);
-                            setMjml(source.mjmlSource ?? "");
-                            setSaveError(null);
-                        }, testId: "document-designer-discard", children: t("documentDesigner.editor.discard") })), _jsx(Button, { variant: "secondary", disabled: !canSave, loading: busy, onClick: () => save(false), testId: "document-designer-save", children: t("documentDesigner.editor.save") }), _jsx(Button, { disabled: !canPublish, onClick: () => save(true), testId: "document-designer-publish", children: t("documentDesigner.editor.publish") })] }), _jsx(Dialog, { open: pendingKind !== null, onOpenChange: (open) => {
+                                            : "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) => {
                     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.js

@@ -4,16 +4,20 @@ import { TemplateResolverQueries } from "@cosmicdrift/kumiko-bundled-features/te
 import { useNav, useQuery, useUserRoles } from "@cosmicdrift/kumiko-renderer";
 import { ErrorState, LoadingState } from "@cosmicdrift/kumiko-renderer-web";
 import { useState } from "react";
-import { DEFAULT_LAYOUT_SLUG, PLATFORM_TEMPLATES_SCREEN_ID, TEMPLATES_SCREEN_ID, } from "../constants.js";
+import { DEFAULT_LAYOUT_SLUG } from "../constants.js";
 import { LayoutEditorBody } from "./layout-editor-body.js";
+import { layoutUserKind } from "./layout-users.js";
 import { parseOverviewRow } from "./overview-row.js";
 function parseLayoutKind(raw) {
     return raw === "pdf-layout" ? "pdf-layout" : "mail-layout";
 }
 function LayoutEditorLoader({ kind, slug, isSystemAdmin, onKindChange, }) {
-    const nav = useNav();
     const source = useQuery(TemplateResolverQueries.layoutSource, { kind, slug });
-    const overview = useQuery(TemplateResolverQueries.overview, { limit: 200 });
+    const overview = useQuery(TemplateResolverQueries.overview, {
+        limit: 200,
+        layoutSlug: slug,
+        filters: [{ field: "kind", op: "in", value: [layoutUserKind(kind)] }],
+    });
     const overrides = useQuery(TemplateResolverQueries.tenantOverrides, { slug, kind }, { enabled: isSystemAdmin });
     if (source.error !== null) {
         return (_jsx(ErrorState, { error: source.error, onRetry: () => void source.refetch(), testId: "document-designer-layout-error" }));
@@ -24,13 +28,16 @@ function LayoutEditorLoader({ kind, slug, isSystemAdmin, onKindChange, }) {
     const data = source.data;
     const rows = (overview.data?.rows ?? []).flatMap((row) => parseOverviewRow(row) ?? []);
     const reload = async () => {
-        await Promise.all([source.refetch(), overview.refetch(), overrides.refetch()]);
+        // refetch ignores `enabled`, and tenant-overrides is denied to everyone but the platform admin.
+        await Promise.all([
+            source.refetch(),
+            overview.refetch(),
+            ...(isSystemAdmin ? [overrides.refetch()] : []),
+        ]);
     };
     // A saved or reset layout is a new version: remount so the editors take the stored regions.
     const bodyKey = [kind, slug, data.tenant?.id, data.tenant?.version, data.system?.version].join("|");
-    return (_jsx(LayoutEditorBody, { kind: kind, slug: slug, isSystemAdmin: isSystemAdmin, source: data, overviewRows: rows, overrides: isSystemAdmin ? overrides.data : null, onKindChange: onKindChange, onReload: reload, onBack: () => nav.navigate({
-            screenId: isSystemAdmin ? PLATFORM_TEMPLATES_SCREEN_ID : TEMPLATES_SCREEN_ID,
-        }) }, bodyKey));
+    return (_jsx(LayoutEditorBody, { kind: kind, slug: slug, isSystemAdmin: isSystemAdmin, source: data, overviewRows: rows, usedByCount: overview.data?.total ?? rows.length, overrides: isSystemAdmin ? overrides.data : null, onKindChange: onKindChange, onReload: reload }, bodyKey));
 }
 export function LayoutEditor() {
     const nav = useNav();

package/dist/web/layout-html.d.ts

@@ -3,5 +3,7 @@ export type LayoutHtmlProps = {
     readonly html: string;
     /** Label per system placeholder (`data-variable`), shown as a chip. */
     readonly systemLabels: Readonly<Record<string, string>>;
+    /** Display URL of an `img[data-resource]` key (the tenant logo, a linked image); no URL drops the image. */
+    readonly resourceSrc?: (key: string) => string | undefined;
 };
 export declare function LayoutHtml(props: LayoutHtmlProps): ReactNode;

package/dist/web/layout-html.js

@@ -63,8 +63,20 @@ function renderNode(node, props, path) {
         return (_jsx("span", { className: "mx-0.5 inline-flex rounded border border-primary/30 bg-primary/10 px-1.5 text-xs text-primary", children: props.systemLabels[variable] ?? variable }, path));
     }
     const align = ALIGN_CLASSES[node.getAttribute("data-align") ?? ""];
-    const className = cn(TAG_CLASSES[tag], align);
+    const className = cn(TAG_CLASSES[tag], align, node.getAttribute("data-size") === "small" && "text-xs");
     if (tag === "img") {
+        const resource = node.getAttribute("data-resource");
+        if (resource !== null) {
+            const resourceUrl = props.resourceSrc?.(resource);
+            if (resourceUrl === undefined)
+                return null;
+            return createElement("img", {
+                key: path,
+                className: "max-h-10 max-w-40 object-contain",
+                src: resourceUrl,
+                alt: node.getAttribute("alt") ?? resource,
+            });
+        }
         const src = node.getAttribute("src") ?? "";
         if (!SAFE_IMAGE_SRC.test(src))
             return null;

package/dist/web/layout-meta.d.ts

@@ -0,0 +1,29 @@
+export declare const LAYOUT_WIDTHS: readonly [560, 600, 640];
+export declare const LAYOUT_FONTS: readonly ["sans", "serif"];
+export declare const LAYOUT_ACCENT_LINES: readonly ["branding", "none"];
+export declare const LAYOUT_BUTTON_STYLES: readonly ["filled-rounded", "filled-square", "outline"];
+export type LayoutWidth = (typeof LAYOUT_WIDTHS)[number];
+export type LayoutFont = (typeof LAYOUT_FONTS)[number];
+export type LayoutAccentLine = (typeof LAYOUT_ACCENT_LINES)[number];
+export type LayoutButtonStyle = (typeof LAYOUT_BUTTON_STYLES)[number];
+/** What the server stores; every field is optional and a missing one means the default. */
+export type LayoutMeta = {
+    readonly width?: LayoutWidth;
+    readonly font?: LayoutFont;
+    readonly outerBackground?: string;
+    readonly accentLine?: LayoutAccentLine;
+    readonly buttonStyle?: LayoutButtonStyle;
+};
+/** The five appearance values with defaults applied; `outerBackground` stays text while it is being typed. */
+export type LayoutAppearance = {
+    readonly width: LayoutWidth;
+    readonly font: LayoutFont;
+    readonly outerBackground: string;
+    readonly accentLine: LayoutAccentLine;
+    readonly buttonStyle: LayoutButtonStyle;
+};
+export declare const DEFAULT_LAYOUT_APPEARANCE: LayoutAppearance;
+export declare function isHexColor(value: string): boolean;
+export declare function appearanceOf(meta: LayoutMeta): LayoutAppearance;
+/** Keeps a field that was already stored, even when it now equals the default; drops every other default. */
+export declare function metaToSave(appearance: LayoutAppearance, stored: LayoutMeta): LayoutMeta;

package/dist/web/layout-meta.js

@@ -0,0 +1,32 @@
+// @runtime client
+// Mirrors the mail-layout meta of template-resolver (template-meta.ts); the server parses it again on every write and render.
+export const LAYOUT_WIDTHS = [560, 600, 640];
+export const LAYOUT_FONTS = ["sans", "serif"];
+export const LAYOUT_ACCENT_LINES = ["branding", "none"];
+export const LAYOUT_BUTTON_STYLES = ["filled-rounded", "filled-square", "outline"];
+export const DEFAULT_LAYOUT_APPEARANCE = {
+    width: 600,
+    font: "sans",
+    outerBackground: "#f5f5f5",
+    accentLine: "none",
+    buttonStyle: "filled-rounded",
+};
+const HEX_COLOR = /^#[0-9a-fA-F]{6}$/;
+export function isHexColor(value) {
+    return HEX_COLOR.test(value);
+}
+export function appearanceOf(meta) {
+    return { ...DEFAULT_LAYOUT_APPEARANCE, ...meta };
+}
+/** Keeps a field that was already stored, even when it now equals the default; drops every other default. */
+export function metaToSave(appearance, stored) {
+    const defaults = DEFAULT_LAYOUT_APPEARANCE;
+    const keep = (key) => appearance[key] !== defaults[key] || key in stored;
+    return {
+        ...(keep("width") && { width: appearance.width }),
+        ...(keep("font") && { font: appearance.font }),
+        ...(keep("outerBackground") && { outerBackground: appearance.outerBackground }),
+        ...(keep("accentLine") && { accentLine: appearance.accentLine }),
+        ...(keep("buttonStyle") && { buttonStyle: appearance.buttonStyle }),
+    };
+}