@cosmicdrift/kumiko-document-designer 0.0.0-stage → 0.364.0

package/dist/web/i18n.js

@@ -0,0 +1,146 @@
+export const documentDesignerTranslations = {
+    en: {
+        "documentDesigner.actions.generatePdf": "Generate PDF",
+        "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.",
+        "documentDesigner.error.resourceUnsupportedImage": "This image format is not supported. Use PNG, JPEG, GIF or WebP.",
+        "documentDesigner.locale": "Language",
+        "documentDesigner.localeDialog.cancel": "Cancel",
+        "documentDesigner.localeDialog.description": "The changes of this language have not been saved yet.",
+        "documentDesigner.localeDialog.discard": "Discard changes",
+        "documentDesigner.localeDialog.save": "Save and switch",
+        "documentDesigner.localeDialog.title": "Unsaved changes",
+        "documentDesigner.notFound": 'Template "{slug}" was not found.',
+        "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.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.usedBy": "Used by",
+        "documentDesigner.overrides.usedByEmpty": "No registered notification uses this template directly.",
+        "documentDesigner.pdfUnavailable": "PDF generation is not available: {message}",
+        "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.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.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.layoutHeaderFooter": "Header and footer from layout",
+        "documentDesigner.settings.marginBottom": "Bottom (mm)",
+        "documentDesigner.settings.marginLeft": "Left (mm)",
+        "documentDesigner.settings.marginRight": "Right (mm)",
+        "documentDesigner.settings.marginTop": "Top (mm)",
+        "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": "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.status.active": "Active",
+        "documentDesigner.status.activeVersion": "Active v{version}",
+        "documentDesigner.status.draft": "Draft",
+        "documentDesigner.status.draftVersion": "Draft v{version}",
+        "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. After publishing, new PDFs use this version.",
+    },
+    de: {
+        "documentDesigner.actions.generatePdf": "PDF erzeugen",
+        "documentDesigner.canvas.caption": 'Seite 1 · {format} · Die Vorschau zeigt Seitengrenzen nur ungefähr, verbindlich ist "PDF erzeugen".',
+        "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",
+        "documentDesigner.localeDialog.cancel": "Abbrechen",
+        "documentDesigner.localeDialog.description": "Die Änderungen in dieser Sprache sind noch nicht gespeichert.",
+        "documentDesigner.localeDialog.discard": "Änderungen verwerfen",
+        "documentDesigner.localeDialog.save": "Speichern und wechseln",
+        "documentDesigner.localeDialog.title": "Ungespeicherte Änderungen",
+        "documentDesigner.notFound": 'Die Vorlage "{slug}" wurde nicht gefunden.',
+        "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.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.usedBy": "Wird verwendet von",
+        "documentDesigner.overrides.usedByEmpty": "Keine registrierte Benachrichtigung nutzt diese Vorlage direkt.",
+        "documentDesigner.pdfUnavailable": "PDF-Erzeugung nicht verfügbar: {message}",
+        "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.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.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.layoutHeaderFooter": "Kopf- und Fußzeile aus Layout",
+        "documentDesigner.settings.marginBottom": "Unten (mm)",
+        "documentDesigner.settings.marginLeft": "Links (mm)",
+        "documentDesigner.settings.marginRight": "Rechts (mm)",
+        "documentDesigner.settings.marginTop": "Oben (mm)",
+        "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": "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.status.active": "Aktiv",
+        "documentDesigner.status.activeVersion": "Aktiv v{version}",
+        "documentDesigner.status.draft": "Entwurf",
+        "documentDesigner.status.draftVersion": "Entwurf v{version}",
+        "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. Nach dem Veröffentlichen nutzen neue PDFs diese Fassung.",
+    },
+};

package/dist/web/index.d.ts

@@ -0,0 +1,6 @@
+export { type DocumentDesignerClientOptions, documentDesignerClient, PdfTemplateEditorScreen, } from "./client-plugin.js";
+export { composeLayoutHtml, type LayoutRegionValues } from "./compose-layout.js";
+export { documentDesignerTranslations } from "./i18n.js";
+export { PdfTemplateEditor, type PdfTemplateEditorProps } from "./pdf-template-editor.js";
+export { type PreviewRecordPicker, type PreviewRecordPickerProps, PreviewRecordPickerProvider, } from "./preview-record-picker.js";
+export { usageLabel, usedByLabel } from "./used-by-label.js";

package/dist/web/index.js

@@ -0,0 +1,7 @@
+// @runtime client
+export { documentDesignerClient, PdfTemplateEditorScreen, } from "./client-plugin.js";
+export { composeLayoutHtml } from "./compose-layout.js";
+export { documentDesignerTranslations } from "./i18n.js";
+export { PdfTemplateEditor } from "./pdf-template-editor.js";
+export { PreviewRecordPickerProvider, } from "./preview-record-picker.js";
+export { usageLabel, usedByLabel } from "./used-by-label.js";

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

@@ -0,0 +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, 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;

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

@@ -0,0 +1,187 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @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 { cn, ModeSwitch, TextareaField } from "@cosmicdrift/kumiko-renderer-web";
+import { useDeferredValue, useState } from "react";
+import { BRANDING_QUERY_QN } from "../constants.js";
+import { composeLayoutHtml } from "./compose-layout.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 } from "./status-label.js";
+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;
+}
+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, usedByCount, overrides, onKindChange, onReload, }) {
+    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 deferredContent = useDeferredValue(content);
+    const validation = useQuery(TemplateResolverQueries.validate, {
+        slug,
+        kind,
+        contentFormat: mjmlMode ? "mjml" : "html",
+        content: deferredContent,
+        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(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);
+    const blocks = isMail ? MAIL_DOCUMENT_BLOCKS : PDF_DOCUMENT_BLOCKS;
+    // 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: 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: () => {
+                    if (pendingKind !== null)
+                        onKindChange(pendingKind);
+                } })] }));
+}

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

@@ -0,0 +1,2 @@
+import { type ReactNode } from "react";
+export declare function LayoutEditor(): ReactNode;

package/dist/web/layout-editor.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @runtime client
+import { TemplateResolverQueries } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { useNav, useQuery, useUserRoles } from "@cosmicdrift/kumiko-renderer";
+import { ErrorState, LoadingState } from "@cosmicdrift/kumiko-renderer-web";
+import { useState } from "react";
+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 source = useQuery(TemplateResolverQueries.layoutSource, { kind, slug });
+    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" }));
+    }
+    if (source.data === null) {
+        return _jsx(LoadingState, {});
+    }
+    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()]);
+    };
+    // 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, usedByCount: overview.data?.total ?? rows.length, overrides: isSystemAdmin ? overrides.data : null, onKindChange: onKindChange, onReload: reload }, bodyKey));
+}
+export function LayoutEditor() {
+    const nav = useNav();
+    const roles = useUserRoles();
+    const [kind, setKind] = useState(() => parseLayoutKind(nav.searchParams["kind"]));
+    const slug = nav.searchParams["slug"] ?? DEFAULT_LAYOUT_SLUG;
+    return (_jsx(LayoutEditorLoader, { kind: kind, slug: slug, isSystemAdmin: roles?.includes("SystemAdmin") === true, onKindChange: setKind }, kind));
+}

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

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+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

@@ -0,0 +1,93 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+// @runtime client
+import { cn } from "@cosmicdrift/kumiko-renderer-web";
+import { createElement, useMemo } from "react";
+// Layout regions arrive server-sanitised, but the preview still renders them
+// through a whitelist instead of innerHTML so a sanitiser gap can never run
+// markup in the admin session. Unknown elements are unwrapped, scripts dropped.
+const TAG_CLASSES = {
+    div: "",
+    p: "m-0",
+    span: "",
+    strong: "font-semibold",
+    b: "font-semibold",
+    em: "italic",
+    i: "italic",
+    u: "underline",
+    small: "text-xs",
+    h1: "m-0 text-lg font-semibold",
+    h2: "m-0 text-base font-semibold",
+    h3: "m-0 text-sm font-semibold",
+    table: "w-full border-collapse",
+    thead: "",
+    tbody: "",
+    tr: "",
+    td: "align-top",
+    th: "align-top text-left font-semibold",
+    ul: "m-0 list-disc pl-5",
+    ol: "m-0 list-decimal pl-5",
+    li: "",
+    a: "underline",
+    hr: "my-1 border-border",
+    br: "",
+    img: "max-h-12 max-w-full object-contain",
+};
+const VOID_TAGS = new Set(["br", "hr", "img"]);
+const DROPPED_TAGS = new Set(["script", "style", "iframe", "object", "embed"]);
+const SAFE_IMAGE_SRC = /^data:image\/(png|jpeg|gif|webp);base64,[A-Za-z0-9+/=]+$/;
+const ALIGN_CLASSES = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+    justify: "text-justify",
+};
+const ELEMENT_NODE = 1;
+const TEXT_NODE = 3;
+function renderChildren(node, props, path) {
+    return Array.from(node.childNodes).map((child, index) => renderNode(child, props, `${path}.${index}`));
+}
+function renderNode(node, props, path) {
+    if (node.nodeType === TEXT_NODE)
+        return node.textContent;
+    if (node.nodeType !== ELEMENT_NODE)
+        return null;
+    const tag = node.nodeName.toLowerCase();
+    if (DROPPED_TAGS.has(tag))
+        return null;
+    if (!(node instanceof Element))
+        return null;
+    if (!(tag in TAG_CLASSES))
+        return _jsx("span", { children: renderChildren(node, props, path) }, path);
+    const variable = node.getAttribute("data-variable");
+    if (variable !== null) {
+        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, 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;
+        return createElement("img", { key: path, className, src, alt: node.getAttribute("alt") ?? "" });
+    }
+    if (VOID_TAGS.has(tag))
+        return createElement(tag, { key: path, className });
+    return createElement(tag, { key: path, className }, ...renderChildren(node, props, path));
+}
+export function LayoutHtml(props) {
+    const { html } = props;
+    const body = useMemo(() => new DOMParser().parseFromString(html, "text/html").body, [html]);
+    return _jsx(_Fragment, { children: renderChildren(body, props, "r") });
+}

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 }),
+    };
+}

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import { type LayoutAppearance } from "./layout-meta.js";
+import type { BrandingView, LayoutKind, LayoutValidation } from "./layout-types.js";
+import type { OverviewRowView } from "./overview-row.js";
+export declare function BrandingRail({ data, unavailable, }: {
+    readonly data: BrandingView | null;
+    readonly unavailable: boolean;
+}): ReactNode;
+export declare function PlaceholderRail({ validation, }: {
+    readonly validation: LayoutValidation | null;
+}): ReactNode;
+export declare function RendererRail({ kind }: {
+    readonly kind: LayoutKind;
+}): ReactNode;
+export declare function AppearanceRail({ appearance, onChange, fromMjml, }: {
+    readonly appearance: LayoutAppearance;
+    readonly onChange: (next: LayoutAppearance) => void;
+    /** An mjml layout brings its own look, so the controls would have no effect. */
+    readonly fromMjml: boolean;
+}): ReactNode;
+export declare function UsedByRail({ layoutSlug, kind, rows, }: {
+    readonly layoutSlug: string;
+    readonly kind: LayoutKind;
+    readonly rows: readonly OverviewRowView[];
+}): ReactNode;
+export declare function MjmlSourceRail({ mjmlSource }: {
+    readonly mjmlSource: string | null;
+}): ReactNode;