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

package/dist/web/pdf-template-editor.js

@@ -0,0 +1,326 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { TemplateResolverHandlers, TemplateResolverQueries, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { useDispatcher, usePrimitives, useQuery, useTranslation, useUserRoles, } from "@cosmicdrift/kumiko-renderer";
+import { RendererPuppeteerClientQueries } from "@cosmicdrift/kumiko-renderer-puppeteer-client/qualified-names";
+import { ErrorState, LoadingState, ModeSwitch, StatusBadge, uploadFileRef, } from "@cosmicdrift/kumiko-renderer-web";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { describeError, isAlreadyActive } from "./errors.js";
+import { OverridesDrawer } from "./overrides-drawer.js";
+import { PageCanvas } from "./page-canvas.js";
+import { EMPTY_PDF_META, parsePdfMeta, serializePdfMeta } from "./pdf-meta.js";
+import { PdfPreview } from "./pdf-preview.js";
+import { PlaceholderPanel, visibleSystemPlaceholders, } from "./placeholder-panel.js";
+import { SettingsPanel } from "./settings-panel.js";
+import { localesOf, parseJsonObject, pickRow, resolveLocale } from "./template-rows.js";
+import { DEFAULT_LAYOUT_SLUG, DOCUMENT_PDF_KIND, PDF_LAYOUT_KIND, } from "./types.js";
+const SETTLE_MS = 500;
+const NO_VARIABLES = {};
+const SYSTEM_LABEL_NAMES = ["tenantName", "imprint", "signature", "page", "pages"];
+// Page numbers share one row in the panel; "pages" is inserted with "page".
+const MERGED_SYSTEM_PLACEHOLDERS = new Set(["pages"]);
+const draftFromDetail = (detail) => ({
+    content: detail.content,
+    meta: parsePdfMeta(detail.meta),
+});
+const snapshotOf = (draft) => JSON.stringify({ content: draft.content, meta: serializePdfMeta(draft.meta) });
+function formatSize(bytes) {
+    return bytes < 1024 * 1024
+        ? `${Math.max(1, Math.round(bytes / 1024))} KB`
+        : `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+export function PdfTemplateEditor({ slug, locale: requestedLocale, onLocaleChange, }) {
+    const t = useTranslation();
+    const dispatcher = useDispatcher();
+    const { Button, Banner, Dialog } = usePrimitives();
+    const roles = useUserRoles();
+    const scope = roles?.includes("SystemAdmin") === true ? "system" : "tenant";
+    const rowsQuery = useQuery(TemplateResolverQueries.list, {
+        kind: DOCUMENT_PDF_KIND,
+    });
+    const rows = rowsQuery.data ?? [];
+    const locales = localesOf(rows, slug);
+    const locale = resolveLocale(requestedLocale, locales);
+    const row = pickRow(rows, slug, locale, scope);
+    const detailQuery = useQuery(TemplateResolverQueries.findById, { id: row?.id ?? "" }, { enabled: row !== undefined });
+    const detail = detailQuery.data !== null &&
+        detailQuery.data?.slug === slug &&
+        detailQuery.data.locale === locale
+        ? detailQuery.data
+        : null;
+    const [state, setState] = useState(null);
+    if (detail !== null && (state === null || state.key !== detail.id)) {
+        const draft = draftFromDetail(detail);
+        setState({ key: detail.id, draft, settled: draft, snapshot: snapshotOf(draft) });
+    }
+    const current = state !== null && detail !== null && state.key === detail.id ? state : null;
+    const settleTimer = useRef(null);
+    // A pending settle must not fire into an unmounted editor.
+    useEffect(() => () => {
+        if (settleTimer.current !== null)
+            clearTimeout(settleTimer.current);
+    }, []);
+    const [overridesOpen, setOverridesOpen] = useState(false);
+    const editorHandle = useRef(null);
+    const [mode, setMode] = useState("edit");
+    const [busy, setBusy] = useState(null);
+    const [actionError, setActionError] = useState(null);
+    const [generated, setGenerated] = useState(null);
+    const [pendingLocale, setPendingLocale] = useState(null);
+    const variableSchema = useMemo(() => parseJsonObject(detail?.variableSchema ?? null), [detail?.variableSchema]);
+    const settledMeta = current === null ? null : serializePdfMeta(current.settled.meta);
+    const validationQuery = useQuery(TemplateResolverQueries.validate, {
+        slug,
+        kind: DOCUMENT_PDF_KIND,
+        contentFormat: "html",
+        content: current?.settled.content ?? "",
+        meta: settledMeta ?? {},
+        variableSchema,
+        locale,
+        scope,
+    }, { enabled: current !== null });
+    const validation = validationQuery.data;
+    const layoutSlug = current?.settled.meta.layoutSlug ?? "";
+    const previewQuery = useQuery(TemplateResolverQueries.preview, {
+        slug,
+        kind: DOCUMENT_PDF_KIND,
+        locale,
+        content: detail?.content ?? "",
+        meta: layoutSlug === "" ? {} : { layoutSlug },
+        variableSchema,
+    }, { enabled: detail !== null });
+    const layout = previewQuery.error === null ? (previewQuery.data?.layout ?? null) : null;
+    const layoutsQuery = useQuery(TemplateResolverQueries.list, {
+        kind: PDF_LAYOUT_KIND,
+        locale,
+    });
+    const layoutSlugs = [
+        ...new Set((layoutsQuery.data ?? []).map((layoutRow) => layoutRow.slug)),
+    ].sort();
+    const statusQuery = useQuery(RendererPuppeteerClientQueries.status, {});
+    const pdfAvailable = statusQuery.error === null && statusQuery.data?.available === true;
+    const unavailableMessage = statusQuery.data?.available === false ? (statusQuery.data.message ?? "") : "";
+    const showOrigin = scope === "system";
+    const overridesQuery = useQuery(TemplateResolverQueries.tenantOverrides, { slug, kind: DOCUMENT_PDF_KIND, locale }, { enabled: showOrigin && detail !== null });
+    const variables = validation?.variables ?? NO_VARIABLES;
+    const systemLabel = useCallback((name) => {
+        const label = t(`documentDesigner.system.${name}`);
+        return label === `documentDesigner.system.${name}` ? name : label;
+    }, [t]);
+    const variableLabels = useMemo(() => Object.fromEntries(Object.entries(variables).flatMap(([name, info]) => info.label === undefined ? [] : [[name, info.label]])), [variables]);
+    const systemLabels = useMemo(() => Object.fromEntries(SYSTEM_LABEL_NAMES.map((name) => [name, systemLabel(name)])), [systemLabel]);
+    const systemVariables = useMemo(() => visibleSystemPlaceholders(validation?.systemPlaceholders ?? []), [validation?.systemPlaceholders]);
+    const variableNames = useMemo(() => Object.keys(variables), [variables]);
+    const linkedResources = detail?.linkedResources ?? null;
+    // The editor shows resource images from the stored copies; no extra request is made here.
+    const resourcePreviews = useMemo(() => Object.fromEntries(Object.entries(parseJsonObject(linkedResources)).flatMap(([key, fileRefId]) => typeof fileRefId === "string"
+        ? [[key, { src: `/api/files/${encodeURIComponent(fileRefId)}`, caption: key }]]
+        : [])), [linkedResources]);
+    const onEditorReady = useCallback((handle) => {
+        editorHandle.current = handle;
+    }, []);
+    if (rowsQuery.loading && rowsQuery.data === null)
+        return _jsx(LoadingState, {});
+    if (rowsQuery.error !== null)
+        return _jsx(ErrorState, { error: rowsQuery.error });
+    if (row === undefined)
+        return _jsx(Banner, { variant: "info", children: t("documentDesigner.notFound", { slug }) });
+    if (current === null || detail === null) {
+        return detailQuery.error !== null ? _jsx(ErrorState, { error: detailQuery.error }) : _jsx(LoadingState, {});
+    }
+    const dirty = snapshotOf(current.draft) !== current.snapshot;
+    const generatedFresh = generated !== null && generated.forSnapshot === snapshotOf(current.draft);
+    function updateDraft(next) {
+        setState((previous) => (previous === null ? previous : { ...previous, draft: next }));
+        if (settleTimer.current !== null)
+            clearTimeout(settleTimer.current);
+        settleTimer.current = setTimeout(() => {
+            setState((previous) => previous === null ? previous : { ...previous, settled: previous.draft });
+        }, SETTLE_MS);
+    }
+    function resetDraft(source) {
+        const draft = draftFromDetail(source);
+        if (settleTimer.current !== null)
+            clearTimeout(settleTimer.current);
+        setState({ key: source.id, draft, settled: draft, snapshot: snapshotOf(draft) });
+        setActionError(null);
+    }
+    async function reload() {
+        await Promise.all([rowsQuery.refetch(), detailQuery.refetch(), validationQuery.refetch()]);
+    }
+    async function persist() {
+        const draft = current?.draft ?? { content: "", meta: EMPTY_PDF_META };
+        const parentTemplateId = detail?.scope === "system" ? detail.id : detail?.parentTemplateId;
+        const result = await dispatcher.write(scope === "system"
+            ? TemplateResolverHandlers.upsertSystem
+            : TemplateResolverHandlers.upsertTenant, {
+            slug,
+            kind: DOCUMENT_PDF_KIND,
+            locale,
+            content: draft.content,
+            contentFormat: "html",
+            variableSchema,
+            meta: serializePdfMeta(draft.meta),
+            ...(scope === "tenant" && parentTemplateId != null && { parentTemplateId }),
+        });
+        if (!result.isSuccess) {
+            setActionError(describeError(t, result.error));
+            return null;
+        }
+        setState((previous) => previous === null ? previous : { ...previous, snapshot: snapshotOf(draft) });
+        return result.data;
+    }
+    async function save() {
+        setBusy("save");
+        setActionError(null);
+        const saved = await persist();
+        if (saved !== null)
+            await reload();
+        setBusy(null);
+        return saved !== null;
+    }
+    async function publish() {
+        setBusy("publish");
+        setActionError(null);
+        // A system save activates immediately; a tenant row needs a save first when it
+        // does not exist yet or carries unsaved edits, then an explicit publish.
+        const needsSave = dirty || detail?.scope === "system";
+        const saved = needsSave ? await persist() : null;
+        const saveFailed = needsSave && saved === null;
+        // upsertSystem already activates, so only a tenant row needs the explicit publish.
+        const alreadyActivatedBySave = scope === "system" && saved !== null;
+        const templateId = saved?.id ?? detail?.id ?? null;
+        if (templateId !== null && !saveFailed && !alreadyActivatedBySave) {
+            const result = await dispatcher.write(scope === "system"
+                ? TemplateResolverHandlers.publishSystem
+                : TemplateResolverHandlers.publish, { id: templateId });
+            if (!result.isSuccess && !isAlreadyActive(result.error))
+                setActionError(describeError(t, result.error));
+        }
+        await reload();
+        setBusy(null);
+    }
+    async function generatePdf() {
+        if (current === null)
+            return;
+        setMode("preview");
+        setBusy("pdf");
+        setActionError(null);
+        const forSnapshot = snapshotOf(current.draft);
+        const result = await dispatcher.query(RendererPuppeteerClientQueries.previewPdf, {
+            slug,
+            locale,
+            content: current.draft.content,
+            meta: serializePdfMeta(current.draft.meta),
+            variableSchema,
+        });
+        if (result.isSuccess)
+            setGenerated({ forSnapshot, result: result.data });
+        else
+            setActionError(describeError(t, result.error));
+        setBusy(null);
+    }
+    function switchMode(next) {
+        setMode(next);
+        if (next === "preview" && pdfAvailable && !generatedFresh && busy === null)
+            void generatePdf();
+    }
+    async function uploadResource(file) {
+        const sourceFileRefId = await uploadFileRef(file);
+        const result = await dispatcher.write(TemplateResolverHandlers.resourceUpload, {
+            templateId: detail?.id,
+            sourceFileRefId,
+        });
+        if (!result.isSuccess)
+            throw new Error(describeError(t, result.error));
+        await detailQuery.refetch();
+    }
+    function requestLocale(next) {
+        if (next === locale)
+            return;
+        if (dirty)
+            setPendingLocale(next);
+        else
+            onLocaleChange?.(next);
+    }
+    const used = validation?.used ?? [];
+    const missingRequired = validation?.missingRequired ?? [];
+    const layoutName = layout?.slug ?? DEFAULT_LAYOUT_SLUG;
+    const systemNames = visibleSystemPlaceholders(validation?.systemPlaceholders ?? []).filter((name) => !MERGED_SYSTEM_PLACEHOLDERS.has(name));
+    const systemRows = systemNames.map((name) => ({
+        name,
+        label: systemLabel(name),
+        status: used.includes(name)
+            ? "used"
+            : layout !== null &&
+                (layout.html.includes(`data-variable="${name}"`) || layout.html.includes(`{{${name}}}`))
+                ? "layout"
+                : "unused",
+    }));
+    const overrideCount = (overridesQuery.data?.activeOverrides ?? 0) + (overridesQuery.data?.draftOverrides ?? 0);
+    const canPublish = validation?.canPublish === true;
+    const issueTexts = [...(validation?.issues ?? []), ...(validation?.publishIssues ?? [])].map((issue) => t(issue.i18nKey, issue.params));
+    const resourceKeys = Object.keys(parseJsonObject(detail.linkedResources));
+    const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", disabled: !dirty || busy !== null, onClick: () => resetDraft(detail), children: t("documentDesigner.actions.discard") }), _jsx(Button, { variant: "secondary", disabled: busy !== null || validation?.canSave === false, loading: busy === "save", onClick: () => void save(), children: t("documentDesigner.actions.save") }), _jsx(Button, { variant: "primary", disabled: busy !== null || !canPublish, loading: busy === "publish", onClick: () => void publish(), children: t("documentDesigner.actions.publish") })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-3", "data-testid": "pdf-template-editor", children: [_jsxs("header", { className: "flex flex-wrap items-center gap-3", children: [_jsxs("nav", { className: "text-sm text-muted-foreground", children: [scope === "system" ? `${t("documentDesigner.breadcrumb.platform")} › ` : "", t("documentDesigner.breadcrumb.templates"), " \u203A", " ", _jsx("span", { className: "text-foreground", children: slug })] }), _jsx(StatusBadge, { tone: detail.status === "active" ? "ok" : "warn", children: t(detail.status === "active"
+                            ? "documentDesigner.status.activeVersion"
+                            : "documentDesigner.status.draftVersion", { version: detail.version }) }), _jsx(StatusBadge, { tone: "muted", children: t(detail.scope === "system"
+                            ? "documentDesigner.origin.system"
+                            : "documentDesigner.origin.tenant") }), _jsx(ModeSwitch, { ariaLabel: t("documentDesigner.locale"), value: locale, onChange: requestLocale, options: (locales.length > 0 ? locales : [locale]).map((value) => ({
+                            value,
+                            label: value.toUpperCase(),
+                        })) }), _jsx(ModeSwitch, { ariaLabel: t("documentDesigner.mode.label"), variant: "pill", value: mode, onChange: switchMode, options: [
+                            { value: "edit", label: t("documentDesigner.mode.edit") },
+                            { value: "preview", label: t("documentDesigner.mode.preview") },
+                        ] }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [_jsx(Button, { variant: "secondary", disabled: !pdfAvailable || busy !== null, loading: busy === "pdf", onClick: () => void generatePdf(), children: t("documentDesigner.actions.generatePdf") }), actions] })] }), showOrigin && detail.scope === "system" && (_jsx(Banner, { variant: "info", actions: _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsx(Button, { variant: "link", onClick: () => void exportBundle(), children: t("documentDesigner.originBar.export") }), _jsx(Button, { variant: "link", onClick: () => setOverridesOpen(true), children: t("documentDesigner.originBar.showOverrides") })] }), children: overridesQuery.data?.totalTenants == null
+                    ? t("documentDesigner.originBar.noTotal", { count: overrideCount })
+                    : t("documentDesigner.originBar.withTotal", {
+                        count: overrideCount,
+                        total: overridesQuery.data.totalTenants,
+                    }) })), _jsx(OverridesDrawer, { open: overridesOpen, onOpenChange: setOverridesOpen, slug: slug, overrides: overridesQuery.data }), !pdfAvailable && statusQuery.loading === false && (_jsx(Banner, { variant: "warning", children: t("documentDesigner.pdfUnavailable", { message: unavailableMessage }) })), actionError !== null && _jsx(Banner, { variant: "error", children: actionError }), _jsxs("div", { className: "grid grid-cols-[260px_minmax(0,1fr)_300px] items-start gap-4", children: [_jsx(PlaceholderPanel, { variables: variables, used: used, missingRequired: missingRequired, systemRows: systemRows, resourceKeys: resourceKeys, canUpload: detail.scope === scope, layoutName: layoutName, onInsert: (name) => editorHandle.current?.insertPlaceholder(name), onInsertResource: (key) => editorHandle.current?.insertResource(key), onUpload: uploadResource }), mode === "edit" ? (_jsx(PageCanvas, { meta: current.draft.meta, content: current.draft.content, onContentChange: (content) => updateDraft({ ...current.draft, content }), regions: layout?.regions ?? null, layoutName: layoutName, variableLabels: variableLabels, systemVariables: systemVariables, systemLabels: systemLabels, variableNames: variableNames, resourcePreviews: resourcePreviews, onEditorReady: onEditorReady })) : generated !== null && generatedFresh ? (_jsx(PdfPreview, { pdfBase64: generated.result.pdfBase64 })) : (_jsxs("div", { className: "flex flex-col items-start gap-3 bg-muted p-6", "data-testid": "document-designer-preview-stale", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: busy === "pdf"
+                                    ? t("documentDesigner.preview.loading")
+                                    : t("documentDesigner.preview.stale") }), _jsx(Button, { variant: "secondary", disabled: !pdfAvailable || busy !== null, onClick: () => void generatePdf(), children: t("documentDesigner.actions.generatePdf") })] })), _jsx(SettingsPanel, { meta: current.draft.meta, onMetaChange: (meta) => updateDraft({ ...current.draft, meta }), layoutSlugs: layoutSlugs, locale: locale, version: {
+                            version: detail.version,
+                            status: detail.status,
+                            modifiedAt: detail.modifiedAt,
+                        } })] }), _jsxs("footer", { className: "flex flex-wrap items-start justify-between gap-3 border-t border-border pt-3", children: [_jsxs("ul", { className: "m-0 flex list-none flex-col gap-1 p-0 text-sm", "data-testid": "document-designer-validation", children: [missingRequired.length === 0 && validation !== undefined && validation !== null && (_jsx("li", { className: "text-status-ok", children: t("documentDesigner.validation.ok") })), missingRequired.map((name) => (_jsx("li", { className: "text-status-bad", children: t("documentDesigner.validation.missingRequired", {
+                                    name: variables[name]?.label ?? name,
+                                }) }, name))), issueTexts.map((text) => (_jsx("li", { className: "text-status-bad", children: text }, text))), (validation?.warnings ?? []).map((warning) => (_jsx("li", { className: "text-status-warn", children: t(warning.i18nKey, { detail: warning.detail }) }, `${warning.code}:${warning.detail}`))), generated !== null && (_jsx("li", { className: "text-muted-foreground", children: t("documentDesigner.validation.lastProbe", {
+                                    pages: generated.result.pageCount,
+                                    size: formatSize(generated.result.sizeBytes),
+                                    seconds: (generated.result.durationMs / 1000).toFixed(1),
+                                }) }))] }), _jsx("div", { className: "flex items-center gap-2", children: actions })] }), _jsx(Dialog, { open: pendingLocale !== null, onOpenChange: (open) => {
+                    if (!open)
+                        setPendingLocale(null);
+                }, title: t("documentDesigner.localeDialog.title"), description: t("documentDesigner.localeDialog.description"), confirmLabel: t("documentDesigner.localeDialog.save"), cancelLabel: t("documentDesigner.localeDialog.cancel"), onConfirm: async () => {
+                    const target = pendingLocale;
+                    if (target !== null && (await save()))
+                        onLocaleChange?.(target);
+                    setPendingLocale(null);
+                }, children: _jsx(Button, { variant: "danger-ghost", onClick: () => {
+                        const target = pendingLocale;
+                        setPendingLocale(null);
+                        resetDraft(detail);
+                        if (target !== null)
+                            onLocaleChange?.(target);
+                    }, children: t("documentDesigner.localeDialog.discard") }) })] }));
+    async function exportBundle() {
+        const result = await dispatcher.query(TemplateResolverQueries.exportBundle, {
+            slug,
+            kind: DOCUMENT_PDF_KIND,
+            scope: "system",
+        });
+        if (!result.isSuccess) {
+            setActionError(describeError(t, result.error));
+            return;
+        }
+        const url = URL.createObjectURL(new Blob([JSON.stringify(result.data, null, 2)], { type: "application/json" }));
+        const anchor = document.createElement("a");
+        anchor.href = url;
+        // Slugs are namespaced with ":", which browsers rewrite in download names
+        // on their own; replacing it here keeps the file name stable everywhere.
+        anchor.download = `${slug.replace(/[\\/:*?"<>|]/g, "_")}.bundle.json`;
+        anchor.click();
+        URL.revokeObjectURL(url);
+    }
+}

package/dist/web/placeholder-panel.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import type { VariableInfo } from "./types.js";
+export type SystemPlaceholderRow = {
+    readonly name: string;
+    readonly label: string;
+    readonly status: "used" | "layout" | "unused";
+};
+export type PlaceholderPanelProps = {
+    readonly variables: Readonly<Record<string, VariableInfo>>;
+    readonly used: readonly string[];
+    readonly missingRequired: readonly string[];
+    readonly systemRows: readonly SystemPlaceholderRow[];
+    readonly resourceKeys: readonly string[];
+    readonly canUpload: boolean;
+    readonly layoutName: string;
+    readonly onInsert: (name: string) => void;
+    readonly onInsertResource: (key: string) => void;
+    readonly onUpload: (file: File) => Promise<void>;
+};
+export declare function visibleSystemPlaceholders(names: readonly string[]): readonly string[];
+export declare function PlaceholderPanel(props: PlaceholderPanelProps): ReactNode;

package/dist/web/placeholder-panel.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { cn, SectionCard, UploadZone } from "@cosmicdrift/kumiko-renderer-web";
+const TYPE_GLYPHS = {
+    text: "T",
+    money: "€",
+    date: "D",
+    link: "↗",
+    list: "≡",
+};
+// unsubscribeUrl belongs to mail; the PDF designer never offers it.
+const HIDDEN_SYSTEM_PLACEHOLDERS = new Set(["unsubscribeUrl"]);
+export function visibleSystemPlaceholders(names) {
+    return names.filter((name) => !HIDDEN_SYSTEM_PLACEHOLDERS.has(name));
+}
+export function PlaceholderPanel(props) {
+    const t = useTranslation();
+    const { Button } = usePrimitives();
+    const names = Object.keys(props.variables);
+    return (_jsxs("div", { className: "flex flex-col gap-4", "data-testid": "document-designer-placeholders", children: [_jsx(SectionCard, { title: t("documentDesigner.placeholders.title"), children: _jsx("ul", { className: "m-0 flex list-none flex-col gap-1 p-0", children: names.map((name) => {
+                        const info = props.variables[name];
+                        if (info === undefined)
+                            return null;
+                        const missing = props.missingRequired.includes(name);
+                        const isUsed = props.used.includes(name);
+                        return (_jsx("li", { children: _jsxs("button", { type: "button", "data-testid": `placeholder-${name}`, onClick: () => props.onInsert(name), className: cn("flex w-full items-center gap-2 rounded-md border px-2 py-1 text-left text-sm", missing
+                                    ? "border-status-bad bg-status-bad-surface"
+                                    : "border-border bg-background hover:bg-muted"), children: [_jsx("span", { className: "w-4 text-center text-xs text-muted-foreground", children: TYPE_GLYPHS[info.type] }), _jsxs("span", { className: "min-w-0 flex-1 truncate", children: [info.label ?? name, info.required === true ? " *" : ""] }), _jsx("span", { className: cn("text-xs", missing ? "font-medium text-status-bad" : "text-muted-foreground"), children: missing ? t("documentDesigner.placeholders.missing") : isUsed ? "✓" : "–" })] }) }, name));
+                    }) }) }), _jsx(SectionCard, { title: t("documentDesigner.placeholders.system"), children: _jsx("ul", { className: "m-0 flex list-none flex-col gap-1 p-0", children: props.systemRows.map((row) => (_jsx("li", { children: _jsxs("button", { type: "button", "data-testid": `system-placeholder-${row.name}`, onClick: () => props.onInsert(row.name), className: "flex w-full items-center gap-2 rounded-md border border-primary/30 bg-primary/10 px-2 py-1 text-left text-sm text-primary", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: row.label }), _jsx("span", { className: "text-xs", children: row.status === "used"
+                                        ? "✓"
+                                        : row.status === "layout"
+                                            ? t("documentDesigner.placeholders.fromLayout")
+                                            : "–" })] }) }, row.name))) }) }), _jsxs(SectionCard, { title: t("documentDesigner.resources.title"), children: [props.resourceKeys.length === 0 ? (_jsx("p", { className: "text-xs text-muted-foreground", children: t("documentDesigner.resources.empty") })) : (_jsx("ul", { className: "m-0 flex list-none flex-col gap-1 p-0 font-mono text-xs", children: props.resourceKeys.map((key) => (_jsxs("li", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "truncate", children: key }), _jsx(Button, { variant: "link", size: "sm", onClick: () => props.onInsertResource(key), ariaLabel: t("documentDesigner.resources.insertNamed", { key }), children: t("documentDesigner.resources.insert") })] }, key))) })), props.canUpload ? (_jsx(UploadZone, { multiple: false, accept: ["image/png", "image/jpeg", "image/gif", "image/webp"], title: t("documentDesigner.resources.upload"), onUpload: props.onUpload, testId: "document-designer-upload" })) : (_jsx(Button, { variant: "secondary", size: "sm", disabled: true, children: t("documentDesigner.resources.upload") })), !props.canUpload && (_jsx("p", { className: "text-xs text-muted-foreground", children: t("documentDesigner.resources.saveFirst") }))] }), _jsx("p", { className: "text-xs text-muted-foreground", children: t("documentDesigner.placeholders.layoutHint", { layout: props.layoutName }) })] }));
+}

package/dist/web/preview-record-picker.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+export type PreviewRecordPickerProps = {
+    readonly slug: string;
+    readonly locale: string;
+    readonly onPick: (values: Readonly<Record<string, unknown>>) => void;
+};
+export type PreviewRecordPicker = {
+    readonly label: string;
+    readonly renderPicker: (props: PreviewRecordPickerProps) => ReactNode;
+};
+export declare const PreviewRecordPickerProvider: import("react").Provider<PreviewRecordPicker | null>;
+export declare function usePreviewRecordPicker(): PreviewRecordPicker | null;

package/dist/web/preview-record-picker.js

@@ -0,0 +1,7 @@
+// @runtime client
+import { createContext, useContext } from "react";
+const PreviewRecordPickerContext = createContext(null);
+export const PreviewRecordPickerProvider = PreviewRecordPickerContext.Provider;
+export function usePreviewRecordPicker() {
+    return useContext(PreviewRecordPickerContext);
+}

package/dist/web/rail.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+export declare function RailSection({ title, action, testId, children, }: {
+    readonly title: string;
+    readonly action?: ReactNode;
+    readonly testId?: string;
+    readonly children: ReactNode;
+}): ReactNode;
+export declare function RailRow({ symbol, label, trailing, bad, testId, onPress, }: {
+    readonly symbol?: string;
+    readonly label: string;
+    readonly trailing?: ReactNode;
+    readonly bad?: boolean;
+    readonly testId?: string;
+    readonly onPress?: () => void;
+}): ReactNode;
+export declare function RailHint({ children }: {
+    readonly children: ReactNode;
+}): ReactNode;

package/dist/web/rail.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { usePrimitives } from "@cosmicdrift/kumiko-renderer";
+import { cn } from "@cosmicdrift/kumiko-renderer-web";
+export function RailSection({ title, action, testId, children, }) {
+    return (_jsxs("section", { className: "flex flex-col gap-1", "data-testid": testId, children: [_jsxs("div", { className: "flex items-center gap-2 pt-3 pb-1", children: [_jsx("span", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: title }), _jsx("div", { className: "grow" }), action] }), children] }));
+}
+export function RailRow({ symbol, label, trailing, bad, testId, onPress, }) {
+    const { Button } = usePrimitives();
+    return (_jsxs("div", { className: cn("flex items-center gap-2 rounded px-2 py-1", bad === true && "bg-status-bad-surface text-status-bad"), "data-testid": testId, "data-bad": bad === true ? "true" : undefined, children: [symbol !== undefined && (_jsx("span", { className: "w-4 shrink-0 text-center text-xs text-muted-foreground", children: symbol })), _jsx("span", { className: "min-w-0 grow truncate text-sm", children: onPress === undefined ? (label) : (_jsx(Button, { variant: "link", onClick: onPress, ...(testId !== undefined && { testId: `${testId}-insert` }), children: label })) }), trailing !== undefined && (_jsx("span", { className: "min-w-0 max-w-[60%] truncate text-right text-xs text-muted-foreground", title: typeof trailing === "string" ? trailing : undefined, children: trailing }))] }));
+}
+export function RailHint({ children }) {
+    return _jsx("p", { className: "px-2 pt-1 text-xs text-muted-foreground", children: children });
+}

package/dist/web/settings-panel.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import { type PdfMetaDraft } from "./pdf-meta.js";
+import type { TemplateStatus } from "./types.js";
+export type VersionInfo = {
+    readonly version: number;
+    readonly status: TemplateStatus;
+    readonly modifiedAt: string | null;
+};
+export type SettingsPanelProps = {
+    readonly meta: PdfMetaDraft;
+    readonly onMetaChange: (next: PdfMetaDraft) => void;
+    /** Layout slugs available for this locale; the default layout is always offered. */
+    readonly layoutSlugs: readonly string[];
+    readonly locale: string;
+    readonly version: VersionInfo;
+};
+export declare function SettingsPanel({ meta, onMetaChange, layoutSlugs, locale, version, }: SettingsPanelProps): ReactNode;

package/dist/web/settings-panel.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { ModeSwitch, SectionCard, StatusBadge } from "@cosmicdrift/kumiko-renderer-web";
+import { MARGIN_SIDES, ORIENTATIONS, PAGE_FORMATS, } from "./pdf-meta.js";
+const SIDE_LABEL_KEYS = {
+    top: "documentDesigner.settings.marginTop",
+    right: "documentDesigner.settings.marginRight",
+    bottom: "documentDesigner.settings.marginBottom",
+    left: "documentDesigner.settings.marginLeft",
+};
+export function SettingsPanel({ meta, onMetaChange, layoutSlugs, locale, version, }) {
+    const t = useTranslation();
+    const { Field, Input } = usePrimitives();
+    const patch = (changes) => onMetaChange({ ...meta, ...changes });
+    return (_jsxs("div", { className: "flex flex-col gap-4", "data-testid": "document-designer-settings", children: [_jsxs(SectionCard, { title: t("documentDesigner.settings.page"), children: [_jsx(Field, { id: "dd-layout", label: t("documentDesigner.settings.layout"), children: _jsx(Input, { kind: "select", id: "dd-layout", name: "layoutSlug", value: meta.layoutSlug, onChange: (layoutSlug) => patch({ layoutSlug }), display: "dropdown", options: [
+                                { value: "", label: t("documentDesigner.settings.layoutDefault") },
+                                ...layoutSlugs.map((slug) => ({ value: slug, label: slug })),
+                            ] }) }), _jsx(Field, { id: "dd-file-name", label: t("documentDesigner.settings.fileName"), children: _jsx(Input, { kind: "text", id: "dd-file-name", name: "fileName", value: meta.fileName, onChange: (fileName) => patch({ fileName }), placeholder: "rechnung-{{number}}.pdf" }) }), _jsx(ModeSwitch, { ariaLabel: t("documentDesigner.settings.pageFormat"), value: meta.pageFormat, onChange: (pageFormat) => patch({ pageFormat }), options: PAGE_FORMATS.map((value) => ({ value, label: value })) }), _jsx(ModeSwitch, { ariaLabel: t("documentDesigner.settings.orientation"), value: meta.orientation, onChange: (orientation) => patch({ orientation }), options: ORIENTATIONS.map((value) => ({
+                            value,
+                            label: t(`documentDesigner.settings.${value}`),
+                        })) }), _jsx("div", { className: "grid grid-cols-2 gap-2", children: MARGIN_SIDES.map((side) => (_jsx(Field, { id: `dd-margin-${side}`, label: t(SIDE_LABEL_KEYS[side]), children: _jsx(Input, { kind: "number", id: `dd-margin-${side}`, name: `margin-${side}`, value: meta.margins[side], onChange: (value) => patch({ margins: { ...meta.margins, [side]: value ?? "" } }), placeholder: "15" }) }, side))) }), _jsx(Field, { id: "dd-print-background", label: t("documentDesigner.settings.printBackground"), layout: "inline", children: _jsx(Input, { kind: "boolean", id: "dd-print-background", name: "printBackground", value: meta.printBackground, onChange: (printBackground) => patch({ printBackground }) }) }), _jsx(Field, { id: "dd-layout-header-footer", label: t("documentDesigner.settings.layoutHeaderFooter"), layout: "inline", children: _jsx(Input, { kind: "boolean", id: "dd-layout-header-footer", name: "layoutHeaderFooter", value: meta.layoutHeaderFooter, onChange: (layoutHeaderFooter) => patch({ layoutHeaderFooter }) }) })] }), _jsxs(SectionCard, { title: t("documentDesigner.settings.metadata"), children: [_jsx(Field, { id: "dd-meta-title", label: t("documentDesigner.settings.metaTitle"), children: _jsx(Input, { kind: "text", id: "dd-meta-title", name: "metaTitle", value: meta.title, onChange: (title) => patch({ title }) }) }), _jsx(Field, { id: "dd-meta-author", label: t("documentDesigner.settings.metaAuthor"), children: _jsx(Input, { kind: "text", id: "dd-meta-author", name: "metaAuthor", value: meta.author, onChange: (author) => patch({ author }) }) }), _jsx(Field, { id: "dd-meta-language", label: t("documentDesigner.settings.metaLanguage"), children: _jsx(Input, { kind: "text", id: "dd-meta-language", name: "metaLanguage", value: locale, onChange: () => undefined, disabled: true }) })] }), _jsx(SectionCard, { title: t("documentDesigner.settings.storage"), children: _jsx("p", { className: "text-xs text-muted-foreground", children: t("documentDesigner.settings.storageHint") }) }), _jsx(SectionCard, { title: t("documentDesigner.settings.versions"), children: _jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx("span", { children: `v${version.version}` }), _jsx("span", { className: "text-xs text-muted-foreground", children: version.modifiedAt?.slice(0, 10) ?? "" }), _jsx(StatusBadge, { tone: version.status === "active" ? "ok" : "warn", children: t(version.status === "active"
+                                ? "documentDesigner.status.active"
+                                : "documentDesigner.status.draft") })] }) })] }));
+}

package/dist/web/status-label.d.ts

@@ -0,0 +1,7 @@
+import type { StatusBadgeTone } from "@cosmicdrift/kumiko-renderer-web";
+import type { OverviewRowView } from "./overview-row.js";
+type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
+export declare function statusTone(status: OverviewRowView["status"]): StatusBadgeTone;
+export declare function statusLabel(t: Translate, status: OverviewRowView["status"], version: number): string;
+export declare function asRowStatus(status: string): OverviewRowView["status"];
+export {};

package/dist/web/status-label.js

@@ -0,0 +1,18 @@
+const STATUS_TONE = {
+    active: "ok",
+    draft: "muted",
+    archived: "muted",
+};
+export function statusTone(status) {
+    return STATUS_TONE[status];
+}
+export function statusLabel(t, status, version) {
+    if (status === "archived")
+        return t("documentDesigner.status.archived");
+    return t(status === "active"
+        ? "documentDesigner.status.activeVersion"
+        : "documentDesigner.status.draftVersion", { version });
+}
+export function asRowStatus(status) {
+    return status === "active" || status === "archived" ? status : "draft";
+}

package/dist/web/template-rows.d.ts

@@ -0,0 +1,9 @@
+import type { TemplateListRow, TemplateScope } from "./types.js";
+/**
+ * The row the editor works on. A tenant sees its own customisation, or the
+ * system row as the starting point for one; a SystemAdmin edits the system row.
+ */
+export declare function pickRow(rows: readonly TemplateListRow[], slug: string, locale: string, scope: TemplateScope): TemplateListRow | undefined;
+export declare function localesOf(rows: readonly TemplateListRow[], slug: string): readonly string[];
+export declare function resolveLocale(requested: string | undefined, available: readonly string[]): string;
+export declare function parseJsonObject(raw: string | null): Record<string, unknown>;

package/dist/web/template-rows.js

@@ -0,0 +1,34 @@
+// @runtime client
+import { isPlainObject } from "@cosmicdrift/kumiko-types/type-guards";
+/**
+ * The row the editor works on. A tenant sees its own customisation, or the
+ * system row as the starting point for one; a SystemAdmin edits the system row.
+ */
+export function pickRow(rows, slug, locale, scope) {
+    const candidates = rows.filter((row) => row.slug === slug && row.locale === locale);
+    if (scope === "system")
+        return candidates.find((row) => row.scope === "system");
+    return (candidates.find((row) => row.scope === "tenant") ??
+        candidates.find((row) => row.scope === "system"));
+}
+export function localesOf(rows, slug) {
+    return [...new Set(rows.filter((row) => row.slug === slug).map((row) => row.locale))].sort();
+}
+export function resolveLocale(requested, available) {
+    if (requested !== undefined && requested !== "")
+        return requested;
+    if (available.includes("de") || available.length === 0)
+        return "de";
+    return available[0] ?? "de";
+}
+export function parseJsonObject(raw) {
+    if (raw === null)
+        return {};
+    try {
+        const parsed = JSON.parse(raw);
+        return isPlainObject(parsed) ? parsed : {};
+    }
+    catch {
+        return {};
+    }
+}