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

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

@@ -0,0 +1,340 @@
+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, uploadFileRef } from "@cosmicdrift/kumiko-renderer-web";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { BRANDING_QUERY_QN } from "../constants.js";
+import { EditorHeader, EditorLocaleSwitch, EditorModeSwitch, originOf, } from "./editor-header.js";
+import { EditorBody, EditorFooter, EditorFrame, EditorInfoBar } from "./editor-shell.js";
+import { describeError, isAlreadyActive } from "./errors.js";
+import { fileUrl } from "./file-name.js";
+import { systemLabelMap, variableLabelMap } from "./mail-draft.js";
+import { PlaceholderSection, SystemPlaceholderSection } from "./mail-left-rail.js";
+import { OverridesDrawer } from "./overrides-drawer.js";
+import { PageCanvas } from "./page-canvas.js";
+import { pdfFooterMessage } from "./pdf-footer.js";
+import { PdfResourceSection, visibleSystemPlaceholders } from "./pdf-left-rail.js";
+import { EMPTY_PDF_META, parsePdfMeta, serializePdfMeta } from "./pdf-meta.js";
+import { PdfPreview } from "./pdf-preview.js";
+import { SettingsPanel } from "./settings-panel.js";
+import { draftBesideActiveSentence } from "./status-label.js";
+import { localesOf, parseJsonObject, pickRow, resolveLocale } from "./template-rows.js";
+import { DEFAULT_LAYOUT_SLUG, DOCUMENT_PDF_KIND, PDF_LAYOUT_KIND, } from "./types.js";
+import { useInsertTargets } from "./use-insert-targets.js";
+import { useOverviewRows } from "./use-overview-rows.js";
+const SETTLE_MS = 500;
+const NO_VARIABLES = {};
+// Opening the preview prints the page without a click; a failed print is not retried for the same draft.
+function RunOnMount({ run }) {
+    useEffect(() => {
+        run();
+    }, [run]);
+    return null;
+}
+const draftFromDetail = (detail) => ({
+    content: detail.content,
+    meta: parsePdfMeta(detail.meta),
+});
+const snapshotOf = (draft) => JSON.stringify({ content: draft.content, meta: serializePdfMeta(draft.meta) });
+export function PdfTemplateEditor({ slug, locale: requestedLocale, onLocaleChange, }) {
+    const t = useTranslation();
+    const dispatcher = useDispatcher();
+    const { Button, Banner, Dialog } = usePrimitives();
+    const insert = useInsertTargets();
+    const overview = useOverviewRows(DOCUMENT_PDF_KIND);
+    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 [draftEpoch, setDraftEpoch] = useState(0);
+    const [mode, setMode] = useState("edit");
+    const [busy, setBusy] = useState(null);
+    const [actionError, setActionError] = useState(null);
+    const [generated, setGenerated] = useState(null);
+    const autoPrintedFor = useRef(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 layouts = useOverviewRows(PDF_LAYOUT_KIND);
+    // The built-in "logo" resource of a layout is the tenant's branding logo.
+    const branding = useQuery(BRANDING_QUERY_QN, {});
+    const brandingLogoFile = branding.data?.logoFile ?? "";
+    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 systemVariables = useMemo(() => visibleSystemPlaceholders(validation?.systemPlaceholders ?? []), [validation?.systemPlaceholders]);
+    const systemLabels = useMemo(() => systemLabelMap(t, systemVariables), [t, systemVariables]);
+    const variableLabels = useMemo(() => ({ ...systemLabels, ...variableLabelMap(variables) }), [systemLabels, variables]);
+    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]);
+    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) });
+        setDraftEpoch((epoch) => epoch + 1);
+        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 printOnce() {
+        if (current === null || autoPrintedFor.current === snapshotOf(current.draft))
+            return;
+        autoPrintedFor.current = snapshotOf(current.draft);
+        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 canPublish = validation?.canPublish === true;
+    const layoutSlugShown = layout?.slug ?? DEFAULT_LAYOUT_SLUG;
+    const layoutName = layouts.rows.find((row) => row.slug === layoutSlugShown)?.title ?? layoutSlugShown;
+    const layoutResourceSrc = (key) => key === "logo" && brandingLogoFile !== "" ? fileUrl(brandingLogoFile) : undefined;
+    const placeholderSource = validation === undefined || validation === null
+        ? null
+        : {
+            ...validation,
+            systemPlaceholders: visibleSystemPlaceholders(validation.systemPlaceholders),
+        };
+    const layoutFills = (name) => layout !== null &&
+        (layout.html.includes(`data-variable="${name}"`) || layout.html.includes(`{{${name}}}`));
+    const overrideCount = (overridesQuery.data?.activeOverrides ?? 0) + (overridesQuery.data?.draftOverrides ?? 0);
+    const resourceKeys = Object.keys(parseJsonObject(detail.linkedResources));
+    const overviewRow = overview.rows.find((candidate) => candidate.slug === slug);
+    const title = overviewRow?.title ?? slug;
+    const systemVersion = overviewRow?.systemVersion ?? null;
+    const vocabulary = {
+        names: variableNames,
+        labels: variableLabels,
+        system: systemVariables,
+    };
+    const footer = validation === undefined || validation === null
+        ? null
+        : pdfFooterMessage(t, validation, generated === null
+            ? null
+            : {
+                pages: generated.result.pageCount,
+                sizeBytes: generated.result.sizeBytes,
+                durationMs: generated.result.durationMs,
+            });
+    const showOverrideLinks = showOrigin && detail.scope === "system";
+    const originText = showOverrideLinks
+        ? overridesQuery.data?.totalTenants == null
+            ? t("documentDesigner.originBar.noTotal", { count: overrideCount })
+            : t("documentDesigner.originBar.withTotal", {
+                count: overrideCount,
+                total: overridesQuery.data.totalTenants,
+            })
+        : detail.scope === "system"
+            ? t("documentDesigner.mail.origin.system", { version: detail.version })
+            : systemVersion === null
+                ? t("documentDesigner.mail.origin.tenantOnly")
+                : t("documentDesigner.mail.origin.overrides", { version: systemVersion });
+    const besideActiveSentence = draftBesideActiveSentence(t, detail);
+    const pdfUnavailableNote = !pdfAvailable && statusQuery.loading === false;
+    return (_jsxs(EditorFrame, { testId: "pdf-template-editor", children: [_jsx(EditorHeader, { title: title, stored: { status: detail.status, version: detail.version }, actions: {
+                    busy: busy === "save",
+                    canSave: busy === null && validation?.canSave !== false,
+                    canPublish: busy === null && canPublish,
+                    onSave: () => void save(),
+                    onPublish: () => void publish(),
+                }, children: _jsx(EditorModeSwitch, { testIdPrefix: "pdf", mode: mode, onMode: setMode }) }), _jsxs(EditorInfoBar, { tone: pdfUnavailableNote ? "warn" : detail.scope === "tenant" ? "active" : "muted", testId: "pdf-origin-bar", origin: originOf(detail.scope === "system", systemVersion !== null), controls: _jsxs(_Fragment, { children: [_jsx(EditorLocaleSwitch, { testIdPrefix: "pdf", locales: locales.length > 0 ? locales : [locale], locale: locale, onLocale: requestLocale }), mode === "preview" && (_jsx(Button, { variant: "secondary", disabled: !pdfAvailable || busy !== null, loading: busy === "pdf", onClick: () => void generatePdf(), testId: "pdf-generate-header", children: t("documentDesigner.actions.generatePdf") }))] }), overlays: _jsx(OverridesDrawer, { open: overridesOpen, onOpenChange: setOverridesOpen, slug: slug, locale: locale, overrides: overridesQuery.data }), links: showOverrideLinks && (_jsxs(_Fragment, { 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: [originText, besideActiveSentence !== null && ` ${besideActiveSentence}`, pdfUnavailableNote && (_jsxs(_Fragment, { children: [" ", _jsx("span", { "data-testid": "pdf-unavailable", children: unavailableMessage === ""
+                                    ? t("documentDesigner.pdfUnavailableNoReason")
+                                    : t("documentDesigner.pdfUnavailable", { message: unavailableMessage }) })] }))] }), _jsx(EditorBody, { left: mode === "edit" ? (_jsxs(_Fragment, { children: [_jsx(PlaceholderSection, { validation: placeholderSource, onInsert: insert.insertPlaceholder, idPrefix: "pdf" }), _jsx(SystemPlaceholderSection, { validation: placeholderSource, onInsert: insert.insertPlaceholder, idPrefix: "pdf", isLayoutOwned: layoutFills }), _jsx(PdfResourceSection, { resourceKeys: resourceKeys, canUpload: detail.scope === scope, layoutName: layoutName, onInsert: insert.insertResource, onUpload: uploadResource })] })) : undefined, center: mode === "edit" ? (_jsx("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", onFocusCapture: insert.markFocused("body"), children: _jsx(PageCanvas, { meta: current.draft.meta, content: current.draft.content, onContentChange: (content) => updateDraft({ ...current.draft, content }), regions: layout?.regions ?? null, layoutName: layoutName, resourceSrc: layoutResourceSrc, variableLabels: variableLabels, systemVariables: systemVariables, systemLabels: systemLabels, variableNames: variableNames, resourcePreviews: resourcePreviews, onEditorReady: insert.register("body") }) })) : (_jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: generated !== null && generatedFresh ? (_jsx(PdfPreview, { pdfBase64: generated.result.pdfBase64 })) : (_jsxs("div", { className: "flex flex-col items-start gap-3 p-6", "data-testid": "document-designer-preview-stale", children: [pdfAvailable && busy === null && _jsx(RunOnMount, { run: printOnce }), _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") })] })) })), right: _jsx(SettingsPanel, { meta: current.draft.meta, onMetaChange: (meta) => updateDraft({ ...current.draft, meta }), layouts: layouts.rows, locale: locale, version: { id: detail.id, version: detail.version, status: detail.status }, vocabulary: vocabulary, insert: insert, draftKey: `${current.key}:${draftEpoch}` }) }), _jsx(EditorFooter, { testIdPrefix: "pdf-editor", message: footer, saveError: actionError, modifiedAt: detail.modifiedAt ?? null, dirty: dirty, busy: busy === "save", canSave: busy === null && validation?.canSave !== false, canPublish: busy === null && canPublish, onDiscard: () => resetDraft(detail), onSave: () => void save(), onPublish: () => void publish() }), _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/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,30 @@
+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 RailField({ children }: {
+    readonly children: ReactNode;
+}): ReactNode;
+declare const TRAILING_TONE: {
+    readonly ok: "text-status-ok";
+    readonly bad: "text-status-bad";
+    readonly muted: "text-muted-foreground";
+};
+export declare function RailRow({ symbol, label, required, trailing, trailingTone, action, bad, testId, onPress, }: {
+    readonly symbol?: string;
+    readonly label: string;
+    readonly required?: boolean;
+    readonly trailing?: ReactNode;
+    readonly trailingTone?: keyof typeof TRAILING_TONE;
+    readonly action?: ReactNode;
+    readonly bad?: boolean;
+    readonly testId?: string;
+    readonly onPress?: () => void;
+}): ReactNode;
+export declare function RailHint({ children }: {
+    readonly children: ReactNode;
+}): ReactNode;
+export {};

package/dist/web/rail.js

@@ -0,0 +1,22 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { cn } from "@cosmicdrift/kumiko-renderer-web";
+export function RailSection({ title, action, testId, children, }) {
+    return (_jsxs("section", { className: "flex flex-col border-b pb-1", "data-testid": testId, children: [_jsxs("div", { className: "flex items-center gap-2 px-3.5 pt-2.5 pb-1", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: title }), _jsx("div", { className: "grow" }), action] }), children] }));
+}
+export function RailField({ children }) {
+    return _jsx("div", { className: "flex flex-col gap-3 px-3.5 py-2", children: children });
+}
+const TRAILING_TONE = {
+    ok: "text-status-ok",
+    bad: "text-status-bad",
+    muted: "text-muted-foreground",
+};
+export function RailRow({ symbol, label, required, trailing, trailingTone = "muted", action, bad, testId, onPress, }) {
+    const content = (_jsxs(_Fragment, { children: [symbol !== undefined && (_jsx("span", { className: "inline-flex h-[18px] w-[22px] shrink-0 items-center justify-center rounded-sm bg-muted font-mono text-xs text-muted-foreground", children: symbol })), _jsxs("span", { className: cn("min-w-0 grow break-words text-sm", trailing !== undefined && "max-w-[65%] shrink-0", bad === true && "text-status-bad"), children: [label, required === true && _jsx("span", { className: "font-semibold text-status-bad", children: " *" })] }), trailing !== undefined && (_jsx("span", { className: cn("min-w-0 truncate text-right text-xs", bad === true ? "text-status-bad" : TRAILING_TONE[trailingTone]), title: typeof trailing === "string" ? trailing : undefined, children: trailing }))] }));
+    const rowClass = "flex min-h-10 min-w-0 grow items-center gap-2 px-3.5 text-left";
+    return (_jsxs("div", { className: cn("flex items-center border-b", bad === true && "bg-status-bad-surface"), "data-testid": testId, "data-bad": bad === true ? "true" : undefined, children: [onPress === undefined ? (_jsx("div", { className: rowClass, children: content })) : (_jsx("button", { type: "button", onClick: onPress, className: cn(rowClass, "hover:bg-muted"), ...(testId !== undefined && { "data-testid": `${testId}-insert` }), children: content })), action !== undefined && _jsx("div", { className: "shrink-0 pr-2", children: action })] }));
+}
+export function RailHint({ children }) {
+    return _jsx("p", { className: "px-3.5 pt-1 pb-2 text-xs text-muted-foreground", children: children });
+}

package/dist/web/relative-time.d.ts

@@ -0,0 +1 @@
+export declare function formatRelativeWhen(value: string, now?: number): string;

package/dist/web/relative-time.js

@@ -0,0 +1,18 @@
+const UNITS = [
+    ["day", 86_400_000],
+    ["hour", 3_600_000],
+    ["minute", 60_000],
+];
+// Falls back to the raw value for an unparseable timestamp, like formatWhen.
+export function formatRelativeWhen(value, now = Date.now()) {
+    const then = Date.parse(value);
+    if (Number.isNaN(then))
+        return value;
+    const formatter = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });
+    const elapsed = then - now;
+    for (const [unit, size] of UNITS) {
+        if (Math.abs(elapsed) >= size)
+            return formatter.format(Math.round(elapsed / size), unit);
+    }
+    return formatter.format(0, "minute");
+}

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

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import type { EditorVocabulary } from "./mail-edit-center.js";
+import type { OverviewRowView } from "./overview-row.js";
+import { type PdfMetaDraft } from "./pdf-meta.js";
+import { type TemplateStatus } from "./types.js";
+import type { InsertTargets } from "./use-insert-targets.js";
+export type VersionInfo = {
+    readonly id: string;
+    readonly version: number;
+    readonly status: TemplateStatus;
+};
+export type SettingsPanelProps = {
+    readonly meta: PdfMetaDraft;
+    readonly onMetaChange: (next: PdfMetaDraft) => void;
+    readonly layouts: readonly OverviewRowView[];
+    readonly locale: string;
+    readonly version: VersionInfo;
+    readonly vocabulary: EditorVocabulary;
+    readonly insert: InsertTargets;
+    /** Changes when the draft is replaced from outside, so the single-line editors re-read it. */
+    readonly draftKey: string;
+};
+export declare function SettingsPanel({ meta, onMetaChange, layouts, locale, version, vocabulary, insert, draftKey, }: SettingsPanelProps): ReactNode;

package/dist/web/settings-panel.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { PDF_ORIENTATIONS, PDF_PAGE_FORMATS, PlaceholderLineEditor, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { languageName } from "./mail-origin-bar.js";
+import { layoutOptionLabel } from "./mail-right-rail.js";
+import { VersionsSection } from "./mail-versions.js";
+import { MARGIN_SIDES } from "./pdf-meta.js";
+import { RailField, RailHint, RailSection } from "./rail.js";
+import { DEFAULT_LAYOUT_SLUG } from "./types.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, layouts, locale, version, vocabulary, insert, draftKey, }) {
+    const t = useTranslation();
+    const { Field, Input, Text } = usePrimitives();
+    const patch = (changes) => onMetaChange({ ...meta, ...changes });
+    return (_jsxs("div", { "data-testid": "document-designer-settings", children: [_jsx(RailSection, { title: t("documentDesigner.settings.page"), testId: "pdf-editor-document", children: _jsxs(RailField, { children: [_jsx(Field, { id: "dd-layout", label: t("documentDesigner.settings.layout"), children: _jsx(Input, { kind: "select", id: "dd-layout", name: "layoutSlug", value: meta.layoutSlug === "" ? DEFAULT_LAYOUT_SLUG : meta.layoutSlug, onChange: (layoutSlug) => patch({ layoutSlug }), display: "dropdown", options: layouts.map((layout) => ({
+                                    value: layout.slug,
+                                    label: layoutOptionLabel(t, layout),
+                                })) }) }), _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" }) }), _jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] gap-2", children: [_jsx(Field, { id: "dd-page-format", label: t("documentDesigner.settings.pageFormat"), children: _jsx(Input, { kind: "select", id: "dd-page-format", name: "pageFormat", value: meta.pageFormat, onChange: (pageFormat) => {
+                                            const next = PDF_PAGE_FORMATS.find((format) => format === pageFormat);
+                                            if (next !== undefined)
+                                                patch({ pageFormat: next });
+                                        }, display: "dropdown", options: PDF_PAGE_FORMATS.map((value) => ({ value, label: value })) }) }), _jsx(Field, { id: "dd-orientation", label: t("documentDesigner.settings.orientation"), children: _jsx(Input, { kind: "select", id: "dd-orientation", name: "orientation", value: meta.orientation, onChange: (orientation) => {
+                                            const next = PDF_ORIENTATIONS.find((candidate) => candidate === orientation);
+                                            if (next !== undefined)
+                                                patch({ orientation: next });
+                                        }, display: "dropdown", options: PDF_ORIENTATIONS.map((value) => ({
+                                            value,
+                                            label: t(`documentDesigner.settings.${value}`),
+                                        })) }) })] }), _jsxs("fieldset", { className: "m-0 flex min-w-0 flex-col gap-1 border-0 p-0", children: [_jsx("legend", { className: "p-0 text-sm font-medium", children: t("documentDesigner.settings.margins") }), _jsx("div", { className: "grid grid-cols-4 gap-1", children: MARGIN_SIDES.map((side) => (_jsx(Field, { id: `dd-margin-${side}`, label: t(SIDE_LABEL_KEYS[side]), hideLabel: true, 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(RailSection, { title: t("documentDesigner.settings.metadata"), testId: "pdf-editor-metadata", children: [_jsxs(RailField, { children: [_jsx("div", { onFocusCapture: insert.markFocused("title"), "data-testid": "pdf-meta-title", children: _jsx(Field, { id: "dd-meta-title", label: t("documentDesigner.settings.metaTitle"), children: _jsx(PlaceholderLineEditor, { id: "dd-meta-title", value: meta.title, onChange: (title) => patch({ title }), variableLabels: vocabulary.labels, systemVariables: vocabulary.system, onEditorReady: insert.register("title"), "aria-label": t("documentDesigner.settings.metaTitle") }, `title:${draftKey}`) }) }), _jsx("div", { onFocusCapture: insert.markFocused("author"), "data-testid": "pdf-meta-author", children: _jsx(Field, { id: "dd-meta-author", label: t("documentDesigner.settings.metaAuthor"), children: _jsx(PlaceholderLineEditor, { id: "dd-meta-author", value: meta.author, onChange: (author) => patch({ author }), variableLabels: vocabulary.labels, systemVariables: vocabulary.system, onEditorReady: insert.register("author"), "aria-label": t("documentDesigner.settings.metaAuthor") }, `author:${draftKey}`) }) }), _jsxs("div", { className: "flex flex-col gap-1", "data-testid": "pdf-meta-language", children: [_jsx("span", { className: "text-sm font-medium", children: t("documentDesigner.settings.metaLanguage") }), _jsx(Text, { children: `${languageName(t, locale)} (${locale})` })] })] }), _jsx(RailHint, { children: t("documentDesigner.settings.metaLanguageHint") })] }), _jsx(RailSection, { title: t("documentDesigner.settings.storage"), testId: "pdf-editor-storage", children: _jsx(RailHint, { children: t("documentDesigner.settings.storageHint") }) }), _jsx(VersionsSection, { rowId: version.id, currentVersion: version.version, currentStatus: version.status })] }));
+}

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

@@ -0,0 +1,14 @@
+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 draftBesideActiveSentence(t: Translate, row: {
+    readonly status: string;
+    readonly version: number;
+    readonly active?: {
+        readonly version: number;
+    } | null;
+}): string | null;
+export declare function asRowStatus(status: string): OverviewRowView["status"];
+export {};

package/dist/web/status-label.js

@@ -0,0 +1,26 @@
+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 draftBesideActiveSentence(t, row) {
+    if (asRowStatus(row.status) !== "draft" || row.active == null)
+        return null;
+    return t("documentDesigner.origin.draftBesideActive", {
+        active: row.active.version,
+        draft: row.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 {};
+    }
+}