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

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

@@ -0,0 +1,142 @@
+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 { ModeSwitch, StatusBadge, TextareaField } from "@cosmicdrift/kumiko-renderer-web";
+import { useDeferredValue, useState } from "react";
+import { composeLayoutHtml } from "./compose-layout.js";
+import { AppearanceRail, BrandingRail, MjmlPreviewRail, PlaceholderRail, UsedByRail, } from "./layout-rails.js";
+import { layoutUsers } from "./layout-users.js";
+import { OriginBar } from "./origin-bar.js";
+import { asRowStatus, statusLabel, statusTone } from "./status-label.js";
+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] }));
+}
+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,
+        }) }));
+}
+export function LayoutEditorBody({ kind, slug, isSystemAdmin, source, overviewRows, overrides, onKindChange, onReload, onBack, }) {
+    const t = useTranslation();
+    const { Banner, Button, Dialog, Heading, Link, Text } = 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 [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 mjmlMode = tab === "mjml";
+    const htmlDirty = header !== source.regions.header ||
+        signature !== source.regions.signature ||
+        footer !== source.regions.footer;
+    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 = layoutUsers(overviewRows, kind, slug).length;
+    const placeholders = checked?.systemPlaceholders ?? [];
+    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: {},
+        };
+        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 && !busy;
+    const canPublish = checked?.canPublish === true && (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
+                                            ? "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) => {
+                    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,41 @@
+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, PLATFORM_TEMPLATES_SCREEN_ID, TEMPLATES_SCREEN_ID, } from "../constants.js";
+import { LayoutEditorBody } from "./layout-editor-body.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 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, overrides: isSystemAdmin ? overrides.data : null, onKindChange: onKindChange, onReload: reload, onBack: () => nav.navigate({
+            screenId: isSystemAdmin ? PLATFORM_TEMPLATES_SCREEN_ID : TEMPLATES_SCREEN_ID,
+        }) }, 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,7 @@
+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>>;
+};
+export declare function LayoutHtml(props: LayoutHtmlProps): ReactNode;

package/dist/web/layout-html.js

@@ -0,0 +1,81 @@
+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);
+    if (tag === "img") {
+        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-rails.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import type { LayoutKind, LayoutValidation } from "./layout-types.js";
+import type { OverviewRowView } from "./overview-row.js";
+export declare function BrandingRail(): ReactNode;
+export declare function PlaceholderRail({ validation, }: {
+    readonly validation: LayoutValidation | null;
+}): ReactNode;
+export declare function AppearanceRail({ kind }: {
+    readonly kind: LayoutKind;
+}): ReactNode;
+export declare function UsedByRail({ layoutSlug, kind, rows, }: {
+    readonly layoutSlug: string;
+    readonly kind: LayoutKind;
+    readonly rows: readonly OverviewRowView[];
+}): ReactNode;
+export declare function MjmlPreviewRail({ mjmlSource }: {
+    readonly mjmlSource: string;
+}): ReactNode;

package/dist/web/layout-rails.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { useAppFeatures, useNav, usePrimitives, useQuery, useTranslation, } from "@cosmicdrift/kumiko-renderer";
+import { DetailList, EmptyState, SectionCard } from "@cosmicdrift/kumiko-renderer-web";
+import { BRANDING_QUERY_QN, BRANDING_SCREEN_QN } from "../constants.js";
+import { layoutUsers } from "./layout-users.js";
+import { statusLabel } from "./status-label.js";
+const NOT_SET_MARK = "–";
+const HEX_COLOR = /^#[0-9a-f]{3,8}$/i;
+const BRANDING_SCREEN_SHORT_ID = BRANDING_SCREEN_QN.slice(BRANDING_SCREEN_QN.lastIndexOf(":") + 1);
+function logoName(logoUrl) {
+    const path = logoUrl.split("?")[0] ?? "";
+    return path.slice(path.lastIndexOf("/") + 1);
+}
+function hostOf(siteUrl) {
+    return siteUrl.replace(/^https?:\/\//, "").replace(/\/$/, "");
+}
+function BrandingSwatch({ color }) {
+    if (!HEX_COLOR.test(color))
+        return color;
+    return (_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx("span", { "data-testid": "document-designer-accent-swatch", className: "inline-block size-3.5 rounded-sm border", style: { backgroundColor: color } }), _jsx("span", { className: "font-mono text-xs", children: color })] }));
+}
+export function BrandingRail() {
+    const t = useTranslation();
+    const nav = useNav();
+    const features = useAppFeatures();
+    const { Link, Text } = usePrimitives();
+    const { data, loading, error } = useQuery(BRANDING_QUERY_QN, {});
+    const hasBrandingScreen = features.some((feature) => feature.featureName === "managed-pages" &&
+        feature.screens.some((screen) => screen.id === BRANDING_SCREEN_SHORT_ID));
+    const notSet = t("documentDesigner.branding.notSet");
+    const editLink = hasBrandingScreen ? (_jsx(Link, { href: nav.hrefFor({ screenId: BRANDING_SCREEN_SHORT_ID }), onPress: () => nav.navigate({ screenId: BRANDING_SCREEN_SHORT_ID }), testId: "document-designer-branding-edit", children: t("documentDesigner.branding.edit") })) : undefined;
+    if (error !== null || (data === null && !loading)) {
+        return (_jsx(SectionCard, { title: t("documentDesigner.branding.title"), testId: "document-designer-branding", children: _jsx(EmptyState, { title: t("documentDesigner.branding.unavailable") }) }));
+    }
+    const value = (text) => text === undefined || text === "" ? notSet : text;
+    const logo = data?.logoUrl !== undefined && data.logoUrl !== ""
+        ? logoName(data.logoUrl)
+        : data?.logoFile !== undefined && data.logoFile !== ""
+            ? t("documentDesigner.branding.logoUploaded")
+            : notSet;
+    return (_jsxs(SectionCard, { title: t("documentDesigner.branding.title"), action: editLink, testId: "document-designer-branding", children: [_jsx(DetailList, { rows: [
+                    { label: t("documentDesigner.branding.productName"), value: value(data?.title) },
+                    {
+                        label: t("documentDesigner.branding.accentColor"),
+                        value: data?.accentColor === undefined || data.accentColor === "" ? (notSet) : (_jsx(BrandingSwatch, { color: data.accentColor })),
+                    },
+                    { label: t("documentDesigner.branding.logo"), value: logo },
+                    {
+                        label: t("documentDesigner.branding.website"),
+                        value: data?.siteUrl === undefined || data.siteUrl === "" ? notSet : hostOf(data.siteUrl),
+                    },
+                ] }), _jsx(Text, { variant: "muted", children: t("documentDesigner.branding.hint") })] }));
+}
+export function PlaceholderRail({ validation, }) {
+    const t = useTranslation();
+    const used = new Set(validation?.used ?? []);
+    const placeholderLabel = (name) => {
+        const key = `documentDesigner.placeholder.${name}`;
+        const label = t(key);
+        return label === key ? name : label;
+    };
+    return (_jsx(SectionCard, { title: t("documentDesigner.layoutPlaceholders.title"), testId: "document-designer-placeholders", children: _jsx(DetailList, { rows: [
+                {
+                    label: `${t("documentDesigner.placeholders.content")} *`,
+                    value: "✓",
+                },
+                ...(validation?.systemPlaceholders ?? []).map((name) => ({
+                    id: `placeholder-${name}`,
+                    label: placeholderLabel(name),
+                    value: used.has(name) ? "✓" : NOT_SET_MARK,
+                })),
+            ] }) }));
+}
+export function AppearanceRail({ kind }) {
+    const t = useTranslation();
+    const { Text } = usePrimitives();
+    const rows = kind === "mail-layout"
+        ? [
+            { label: t("documentDesigner.appearance.width"), value: "600 px" },
+            {
+                label: t("documentDesigner.appearance.font"),
+                value: t("documentDesigner.appearance.systemFont"),
+            },
+            {
+                label: t("documentDesigner.appearance.background"),
+                value: t("documentDesigner.appearance.backgroundValue"),
+            },
+        ]
+        : [{ label: t("documentDesigner.appearance.pageFormat"), value: "A4" }];
+    return (_jsxs(SectionCard, { title: t("documentDesigner.appearance.title"), testId: "document-designer-appearance", children: [_jsx(DetailList, { rows: rows }), _jsx(Text, { variant: "muted", children: t("documentDesigner.appearance.hint") })] }));
+}
+export function UsedByRail({ layoutSlug, kind, rows, }) {
+    const t = useTranslation();
+    const users = layoutUsers(rows, kind, layoutSlug);
+    return (_jsx(SectionCard, { title: t("documentDesigner.usedBy.title"), testId: "document-designer-used-by", children: users.length === 0 ? (_jsx(EmptyState, { title: t("documentDesigner.usedBy.none") })) : (_jsx(DetailList, { rows: users.map((row) => ({
+                id: `used-by-${row.id}`,
+                label: row.title,
+                value: row.origin === "system"
+                    ? t("documentDesigner.source.system")
+                    : statusLabel(t, row.status, row.version),
+            })) })) }));
+}
+export function MjmlPreviewRail({ mjmlSource }) {
+    const t = useTranslation();
+    return (_jsx(SectionCard, { title: t("documentDesigner.mjml.title"), testId: "document-designer-mjml-preview", children: _jsx("pre", { className: "max-h-56 overflow-auto whitespace-pre-wrap rounded-md bg-muted p-3 font-mono text-xs", children: mjmlSource }) }));
+}

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

@@ -0,0 +1,62 @@
+export type LayoutKind = "mail-layout" | "pdf-layout";
+export type ValidationIssue = {
+    readonly path: string;
+    readonly code: string;
+    readonly i18nKey: string;
+    readonly params?: Readonly<Record<string, unknown>>;
+};
+export type LayoutValidation = {
+    readonly canSave: boolean;
+    readonly canPublish: boolean;
+    readonly issues: readonly ValidationIssue[];
+    readonly publishIssues: readonly ValidationIssue[];
+    readonly used: readonly string[];
+    readonly systemPlaceholders: readonly string[];
+};
+export type BrandingView = {
+    readonly title: string;
+    readonly accentColor: string;
+    readonly logoUrl: string;
+    readonly logoFile: string;
+    readonly siteUrl: string;
+};
+export type TenantOverrideCounts = {
+    readonly activeOverrides: number;
+    readonly draftOverrides: number;
+    readonly totalTenants: number | null;
+};
+export type TemplateDiff = {
+    readonly identical: boolean;
+    readonly blocks: readonly {
+        readonly change: "same" | "added" | "removed";
+        readonly content: string;
+    }[];
+    readonly meta: readonly {
+        readonly key: string;
+        readonly tenant?: unknown;
+        readonly system?: unknown;
+    }[];
+};
+export type UpsertResponse = {
+    readonly id: string;
+};
+export type LayoutSourceRow = {
+    readonly id: string;
+    readonly version: number;
+    readonly status: string;
+    readonly locale: string;
+};
+export type LayoutSourceView = {
+    readonly tenant: LayoutSourceRow | null;
+    readonly system: (LayoutSourceRow & {
+        readonly contentFormat: string;
+    }) | null;
+    readonly regions: {
+        readonly header: string;
+        readonly signature: string;
+        readonly footer: string;
+    };
+    readonly effectiveFormat: "html" | "mjml" | null;
+    readonly mjmlSource: string | null;
+    readonly locale: string;
+};

package/dist/web/layout-types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+import type { LayoutKind } from "./layout-types.js";
+import type { OverviewRowView } from "./overview-row.js";
+export declare function layoutUsers(rows: readonly OverviewRowView[], kind: LayoutKind, layoutSlug: string): readonly OverviewRowView[];

package/dist/web/layout-users.js

@@ -0,0 +1,8 @@
+// @runtime client
+import { DEFAULT_LAYOUT_SLUG } from "../constants.js";
+// Templates whose content is wrapped by this layout. A template without an explicit
+// layoutSlug uses the default layout.
+export function layoutUsers(rows, kind, layoutSlug) {
+    const documentKind = kind === "mail-layout" ? "mail" : "document-pdf";
+    return rows.filter((row) => row.kind === documentKind && (row.layoutSlug ?? DEFAULT_LAYOUT_SLUG) === layoutSlug);
+}

package/dist/web/mail-dialogs.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+export type LeaveTarget = {
+    readonly kind: "locale";
+    readonly locale: string;
+} | {
+    readonly kind: "back";
+};
+export type ConfirmDialog = {
+    readonly kind: "none";
+} | {
+    readonly kind: "discard";
+} | {
+    readonly kind: "activeSave";
+} | {
+    readonly kind: "remove";
+    readonly key: string;
+} | {
+    readonly kind: "leave";
+    readonly target: LeaveTarget;
+};
+export declare function MailConfirmDialogs({ dialog, onClose, onDiscard, onSaveDraft, onRemove, onLeaveSave, onLeaveDiscard, }: {
+    readonly dialog: ConfirmDialog;
+    readonly onClose: () => void;
+    readonly onDiscard: () => void;
+    readonly onSaveDraft: () => Promise<void>;
+    readonly onRemove: (key: string) => Promise<void>;
+    readonly onLeaveSave: (target: LeaveTarget) => Promise<void>;
+    readonly onLeaveDiscard: (target: LeaveTarget) => void;
+}): ReactNode;

package/dist/web/mail-dialogs.js

@@ -0,0 +1,15 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+export function MailConfirmDialogs({ dialog, onClose, onDiscard, onSaveDraft, onRemove, onLeaveSave, onLeaveDiscard, }) {
+    const t = useTranslation();
+    const { Button, Dialog } = usePrimitives();
+    const closeUnless = (open) => {
+        if (!open)
+            onClose();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Dialog, { open: dialog.kind === "discard", onOpenChange: closeUnless, title: t("documentDesigner.mail.discard.title"), description: t("documentDesigner.mail.discard.description"), confirmLabel: t("documentDesigner.mail.discard.confirm"), variant: "danger", testId: "mail-discard-dialog", onConfirm: onDiscard }), _jsx(Dialog, { open: dialog.kind === "activeSave", onOpenChange: closeUnless, title: t("documentDesigner.mail.activeSave.title"), description: t("documentDesigner.mail.activeSave.description"), confirmLabel: t("documentDesigner.mail.activeSave.confirm"), testId: "mail-active-save-dialog", onConfirm: onSaveDraft }), _jsx(Dialog, { open: dialog.kind === "remove", onOpenChange: closeUnless, title: t("documentDesigner.mail.remove.title"), description: t("documentDesigner.mail.remove.description"), confirmLabel: t("documentDesigner.mail.remove.confirm"), variant: "danger", testId: "mail-remove-dialog", onConfirm: () => (dialog.kind === "remove" ? onRemove(dialog.key) : Promise.resolve()) }), _jsx(Dialog, { open: dialog.kind === "leave", onOpenChange: closeUnless, title: t("documentDesigner.mail.leave.title"), description: t("documentDesigner.mail.leave.description"), confirmLabel: t("documentDesigner.mail.leave.save"), testId: "mail-leave-dialog", onConfirm: () => (dialog.kind === "leave" ? onLeaveSave(dialog.target) : Promise.resolve()), children: _jsx(Button, { variant: "danger-ghost", onClick: () => {
+                        if (dialog.kind === "leave")
+                            onLeaveDiscard(dialog.target);
+                    }, testId: "mail-leave-discard", children: t("documentDesigner.mail.leave.discard") }) })] }));
+}

package/dist/web/mail-draft.d.ts

@@ -0,0 +1,17 @@
+import type { LinkedResourceView, MailDraft, MailVariable, PlaceholderType, TemplateRowView } from "./mail-types.js";
+export declare const EMPTY_DRAFT: MailDraft;
+export declare const PLACEHOLDER_SYMBOL: Readonly<Record<PlaceholderType, string>>;
+export declare function parseJsonRecord(value: unknown): Readonly<Record<string, unknown>>;
+export type LoadedMail = {
+    readonly draft: MailDraft;
+    readonly sender: unknown;
+};
+export declare function loadedMailOf(row: TemplateRowView | null): LoadedMail;
+export declare function buildMeta(draft: MailDraft, sender: unknown): Record<string, unknown>;
+export declare function isDraftDirty(current: MailDraft, saved: MailDraft): boolean;
+export declare function parseLinkedResources(value: unknown): readonly LinkedResourceView[];
+export declare function uniqueResourceKey(source: string, taken: readonly string[]): string;
+export declare function lastSlugSegment(slug: string): string;
+export declare function formatKilobytes(bytes: number): string;
+export declare function variableLabelMap(variables: Readonly<Record<string, MailVariable>>): Record<string, string>;
+export declare function displayValue(t: (key: string, params?: Readonly<Record<string, unknown>>) => string, value: unknown): string;