@cosmicdrift/kumiko-document-designer 0.363.0 → 0.364.0

package/dist/web/page-canvas.js

@@ -1,38 +1,48 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @runtime client
-import { DocumentContentEditor, PDF_DOCUMENT_BLOCKS, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { DocumentContentEditor, PDF_DEFAULT_MARGIN_MM, PDF_DOCUMENT_BLOCKS, PDF_FOOTER_MARGIN_MM, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
 import { useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { cn } from "@cosmicdrift/kumiko-renderer-web";
 import { useCallback } from "react";
 import { LayoutHtml } from "./layout-html.js";
 import { MARGIN_SIDES } from "./pdf-meta.js";
 const MM_TO_PX = 96 / 25.4;
-const DEFAULT_MARGIN_MM = 15;
-// Page width in CSS px at 96 dpi, as a class so no inline width is needed.
+// Page width in CSS px at 96 dpi as a cap; the page shrinks with a narrow column instead of scrolling sideways.
 const PAGE_WIDTH_CLASSES = {
-    "A4-portrait": "w-[794px]",
-    "A4-landscape": "w-[1123px]",
-    "Letter-portrait": "w-[816px]",
-    "Letter-landscape": "w-[1056px]",
+    "A4-portrait": "max-w-[794px]",
+    "A4-landscape": "max-w-[1123px]",
+    "Letter-portrait": "max-w-[816px]",
+    "Letter-landscape": "max-w-[1056px]",
 };
-function RegionBlock({ html, systemLabels, caption, }) {
+function RegionBlock({ html, systemLabels, resourceSrc, caption, }) {
     if (html.trim() === "")
         return null;
-    return (_jsxs("div", { className: "relative border border-dashed border-border bg-muted/40 p-2 text-xs text-muted-foreground", children: [_jsx("span", { className: "absolute right-1 top-0 text-[10px] uppercase tracking-wide", children: caption }), _jsx(LayoutHtml, { html: html, systemLabels: systemLabels })] }));
+    return (_jsxs("div", { className: "relative border border-dashed border-border bg-muted/40 p-2 pt-4 text-xs text-muted-foreground", children: [_jsx("span", { className: "absolute left-2 top-0.5 text-[10px] uppercase tracking-wide", children: caption }), _jsx(LayoutHtml, { html: html, systemLabels: systemLabels, ...(resourceSrc !== undefined && { resourceSrc }) })] }));
+}
+// The letterhead is a band across the whole paper, outside the page margins, like on printed letter paper.
+function HeaderBand({ html, systemLabels, resourceSrc, caption, }) {
+    return (_jsxs("div", { className: "relative border-b border-border bg-muted px-[8%] pb-4 pt-6 text-xs text-foreground [&_td:last-child]:whitespace-nowrap", "data-testid": "document-designer-letterhead", children: [_jsx("span", { className: "absolute right-[8%] top-2 text-[10px] uppercase tracking-wide text-muted-foreground", children: caption }), _jsx(LayoutHtml, { html: html, systemLabels: systemLabels, ...(resourceSrc !== undefined && { resourceSrc }) })] }));
 }
 export function PageCanvas(props) {
     const t = useTranslation();
     const { meta } = props;
     const showRegions = meta.layoutHeaderFooter && props.regions !== null;
-    const caption = t("documentDesigner.canvas.fromLayout", { layout: props.layoutName });
+    // The letterhead band sits in the top margin, so the content starts right below it.
+    const showLetterhead = showRegions && props.regions !== null && props.regions.header.trim() !== "";
+    // Same fallback as the PDF renderer: a footer region reserves a taller bottom margin (the header band replaces the top margin on the canvas).
+    const hasFooter = showRegions && props.regions !== null && props.regions.footer.trim() !== "";
+    const fromLayout = t("documentDesigner.canvas.fromLayout", { layout: props.layoutName });
+    const regionCaption = (region) => `${t(`documentDesigner.editor.region.${region}`)} · ${fromLayout}`;
     // CSS variables instead of a style prop: margins are user data, classes are static.
     const applyMargins = useCallback((element) => {
         if (element === null)
             return;
         for (const side of MARGIN_SIDES) {
-            const mm = meta.margins[side] === "" ? DEFAULT_MARGIN_MM : meta.margins[side];
+            const fallbackMm = side === "bottom" && hasFooter ? PDF_FOOTER_MARGIN_MM : PDF_DEFAULT_MARGIN_MM;
+            const mm = meta.margins[side] === "" ? fallbackMm : meta.margins[side];
             element.style.setProperty(`--page-margin-${side}`, `${Math.round(mm * MM_TO_PX)}px`);
         }
-    }, [meta.margins]);
-    return (_jsxs("div", { className: "flex flex-col items-center gap-2 overflow-auto bg-muted p-6", children: [_jsxs("div", { ref: applyMargins, "data-testid": "document-designer-page", className: cn("flex min-h-[1000px] max-w-none flex-col bg-background shadow-md", "pt-(--page-margin-top) pr-(--page-margin-right) pb-(--page-margin-bottom) pl-(--page-margin-left)", PAGE_WIDTH_CLASSES[`${meta.pageFormat}-${meta.orientation}`]), children: [showRegions && props.regions !== null && (_jsx(RegionBlock, { html: props.regions.header, systemLabels: props.systemLabels, caption: caption })), _jsx("div", { className: "min-h-0 flex-1 py-2", children: _jsx(DocumentContentEditor, { id: "document-designer-content", value: props.content, onChange: props.onContentChange, variables: props.variableNames, readOnly: false, blocks: PDF_DOCUMENT_BLOCKS, variableLabels: props.variableLabels, systemVariables: props.systemVariables, resourcePreviews: props.resourcePreviews, onEditorReady: props.onEditorReady }) }), showRegions && props.regions !== null && (_jsxs(_Fragment, { children: [_jsx(RegionBlock, { html: props.regions.signature, systemLabels: props.systemLabels, caption: caption }), _jsx(RegionBlock, { html: props.regions.footer, systemLabels: props.systemLabels, caption: caption })] }))] }), _jsx("p", { className: "text-xs text-muted-foreground", children: t("documentDesigner.canvas.caption", { format: meta.pageFormat }) })] }));
+    }, [meta.margins, hasFooter]);
+    const renderPaper = (editable) => (_jsxs("div", { className: "flex w-full flex-col items-center gap-2", children: [_jsxs("div", { "data-testid": "document-designer-page", className: cn("flex min-h-[1000px] w-full flex-col bg-card shadow-md", PAGE_WIDTH_CLASSES[`${meta.pageFormat}-${meta.orientation}`]), children: [showLetterhead && props.regions !== null && (_jsx(HeaderBand, { html: props.regions.header, systemLabels: props.systemLabels, resourceSrc: props.resourceSrc, caption: fromLayout })), _jsxs("div", { ref: applyMargins, className: cn("flex min-h-0 flex-1 flex-col pr-(--page-margin-right) pb-(--page-margin-bottom) pl-(--page-margin-left)", !showLetterhead && "pt-(--page-margin-top)"), children: [_jsxs("div", { className: "relative my-2 min-h-0 flex-1 border border-dashed border-primary/40 p-2 pt-5", "data-testid": "document-designer-content-area", children: [_jsx("span", { className: "absolute left-2 top-0.5 text-[10px] uppercase tracking-wide text-primary", children: t("documentDesigner.editor.region.content") }), editable] }), showRegions && props.regions !== null && (_jsxs(_Fragment, { children: [_jsx(RegionBlock, { html: props.regions.signature, systemLabels: props.systemLabels, resourceSrc: props.resourceSrc, caption: regionCaption("signature") }), _jsx(RegionBlock, { html: props.regions.footer, systemLabels: props.systemLabels, resourceSrc: props.resourceSrc, caption: regionCaption("footer") })] }))] })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: t("documentDesigner.canvas.caption", { format: meta.pageFormat }) })] }));
+    return (_jsx("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", "data-testid": "pdf-editor-center", children: _jsx(DocumentContentEditor, { id: "document-designer-content", value: props.content, onChange: props.onContentChange, variables: props.variableNames, readOnly: false, blocks: PDF_DOCUMENT_BLOCKS, variableLabels: props.variableLabels, systemVariables: props.systemVariables, resourcePreviews: props.resourcePreviews, chrome: "canvas", renderPaper: renderPaper, onEditorReady: props.onEditorReady }) }));
 }

package/dist/web/pdf-footer.d.ts

@@ -0,0 +1,13 @@
+import type { FooterTone } from "./editor-shell.js";
+import type { ValidationResult } from "./types.js";
+type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
+export type GeneratedProbe = {
+    readonly pages: number;
+    readonly sizeBytes: number;
+    readonly durationMs: number;
+};
+export declare function pdfFooterMessage(t: Translate, validation: ValidationResult, probe: GeneratedProbe | null): {
+    readonly tone: FooterTone;
+    readonly text: string;
+};
+export {};

package/dist/web/pdf-footer.js

@@ -0,0 +1,34 @@
+function formatSize(bytes) {
+    return bytes < 1024 * 1024
+        ? `${Math.max(1, Math.round(bytes / 1024))} KB`
+        : `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+// One sentence like the mail footer: missing required placeholders first, then other blocking
+// issues, then warnings, else "ready" plus the last test run.
+export function pdfFooterMessage(t, validation, probe) {
+    if (validation.missingRequired.length > 0) {
+        const names = validation.missingRequired
+            .map((name) => validation.variables[name]?.label ?? name)
+            .join(", ");
+        return { tone: "bad", text: t("documentDesigner.validation.missingRequired", { name: names }) };
+    }
+    const blocking = [...validation.issues, ...validation.publishIssues][0];
+    if (blocking !== undefined) {
+        const translated = t(blocking.i18nKey, blocking.params);
+        return { tone: "bad", text: translated === blocking.i18nKey ? blocking.code : translated };
+    }
+    const warning = validation.warnings[0];
+    if (warning !== undefined) {
+        const translated = t(warning.i18nKey, { detail: warning.detail });
+        return { tone: "warn", text: translated === warning.i18nKey ? warning.code : translated };
+    }
+    const ok = t("documentDesigner.validation.ok");
+    if (probe === null)
+        return { tone: "ok", text: ok };
+    const lastProbe = t("documentDesigner.validation.lastProbe", {
+        pages: probe.pages,
+        size: formatSize(probe.sizeBytes),
+        seconds: (probe.durationMs / 1000).toFixed(1),
+    });
+    return { tone: "ok", text: `${ok} ${lastProbe}` };
+}

package/dist/web/pdf-left-rail.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+export declare function visibleSystemPlaceholders(names: readonly string[]): readonly string[];
+export declare function PdfResourceSection({ resourceKeys, canUpload, layoutName, onInsert, onUpload, }: {
+    readonly resourceKeys: readonly string[];
+    readonly canUpload: boolean;
+    readonly layoutName: string;
+    readonly onInsert: (key: string) => void;
+    readonly onUpload: (file: File) => Promise<void>;
+}): ReactNode;

package/dist/web/pdf-left-rail.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { UploadZone } from "@cosmicdrift/kumiko-renderer-web";
+import { RailField, RailHint, RailRow, RailSection } from "./rail.js";
+// 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));
+}
+const IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"];
+export function PdfResourceSection({ resourceKeys, canUpload, layoutName, onInsert, onUpload, }) {
+    const t = useTranslation();
+    const { Button } = usePrimitives();
+    return (_jsxs(RailSection, { title: t("documentDesigner.resources.title"), testId: "pdf-editor-resources", children: [resourceKeys.length === 0 && _jsx(RailRow, { label: t("documentDesigner.resources.empty") }), resourceKeys.map((key) => (_jsx(RailRow, { testId: `pdf-resource-${key}`, symbol: "\u25A3", label: key, onPress: () => onInsert(key) }, key))), _jsx(RailField, { children: canUpload ? (_jsx(UploadZone, { multiple: false, accept: IMAGE_TYPES, title: t("documentDesigner.resources.upload"), onUpload: onUpload, testId: "document-designer-upload" })) : (_jsx(Button, { variant: "secondary", size: "sm", disabled: true, children: t("documentDesigner.resources.upload") })) }), !canUpload && _jsx(RailHint, { children: t("documentDesigner.resources.saveFirst") }), _jsx(RailHint, { children: t("documentDesigner.placeholders.layoutHint", { layout: layoutName }) })] }));
+}

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

@@ -1,8 +1,6 @@
-export declare const PAGE_FORMATS: readonly ["A4", "Letter"];
-export declare const ORIENTATIONS: readonly ["portrait", "landscape"];
-export type PageFormat = (typeof PAGE_FORMATS)[number];
-export type Orientation = (typeof ORIENTATIONS)[number];
-export declare const DEFAULT_MARGIN_MM = 15;
+import { PDF_ORIENTATIONS, PDF_PAGE_FORMATS } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+export type PageFormat = (typeof PDF_PAGE_FORMATS)[number];
+export type Orientation = (typeof PDF_ORIENTATIONS)[number];
 export type MarginSide = "top" | "right" | "bottom" | "left";
 export declare const MARGIN_SIDES: readonly ["top", "right", "bottom", "left"];
 export type PdfMetaDraft = {

package/dist/web/pdf-meta.js

@@ -1,10 +1,6 @@
 // @runtime client
+import { PDF_ORIENTATIONS, PDF_PAGE_FORMATS, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
 import { isOneOf, isPlainObject, propertyOf } from "@cosmicdrift/kumiko-types/type-guards";
-export const PAGE_FORMATS = ["A4", "Letter"];
-export const ORIENTATIONS = ["portrait", "landscape"];
-// Mirrors the renderer's fallback margin; used to complete a partly filled set,
-// because the server schema only accepts all four sides together.
-export const DEFAULT_MARGIN_MM = 15;
 export const MARGIN_SIDES = [
     "top",
     "right",
@@ -51,8 +47,8 @@ export function parsePdfMeta(raw) {
     const metadata = propertyOf(parsed, "metadata");
     return {
         layoutSlug: stringOr(parsed["layoutSlug"], ""),
-        pageFormat: isOneOf(PAGE_FORMATS, pageFormat) ? pageFormat : EMPTY_PDF_META.pageFormat,
-        orientation: isOneOf(ORIENTATIONS, orientation) ? orientation : EMPTY_PDF_META.orientation,
+        pageFormat: isOneOf(PDF_PAGE_FORMATS, pageFormat) ? pageFormat : EMPTY_PDF_META.pageFormat,
+        orientation: isOneOf(PDF_ORIENTATIONS, orientation) ? orientation : EMPTY_PDF_META.orientation,
         printBackground: booleanOr(parsed["printBackground"], true),
         layoutHeaderFooter: booleanOr(parsed["layoutHeaderFooter"], true),
         margins: {
@@ -66,9 +62,6 @@ export function parsePdfMeta(raw) {
         author: stringOr(propertyOf(metadata, "author"), ""),
     };
 }
-function hasAnyMargin(margins) {
-    return MARGIN_SIDES.some((side) => margins[side] !== "");
-}
 /** Builds the meta object for the server; defaults and empty fields are left out. */
 export function serializePdfMeta(draft) {
     const meta = {};
@@ -82,12 +75,13 @@ export function serializePdfMeta(draft) {
         meta["printBackground"] = false;
     if (!draft.layoutHeaderFooter)
         meta["layoutHeaderFooter"] = false;
-    if (hasAnyMargin(draft.margins)) {
-        meta["margins"] = Object.fromEntries(MARGIN_SIDES.map((side) => [
-            side,
-            draft.margins[side] === "" ? DEFAULT_MARGIN_MM : draft.margins[side],
-        ]));
-    }
+    // Unset sides stay out so the renderer's per-side fallbacks (header/footer margins) still apply.
+    const setMargins = MARGIN_SIDES.flatMap((side) => {
+        const mm = draft.margins[side];
+        return mm === "" ? [] : [[side, mm]];
+    });
+    if (setMargins.length > 0)
+        meta["margins"] = Object.fromEntries(setMargins);
     if (draft.fileName.trim() !== "")
         meta["fileName"] = draft.fileName.trim();
     const metadata = {};

package/dist/web/pdf-preview.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // @runtime client
 /// <reference path="./pdfjs-worker.d.ts" />
 import { useTranslation } from "@cosmicdrift/kumiko-renderer";
-import { Suspense, use, useCallback } from "react";
+import { Suspense, use, useCallback, useMemo } from "react";
 // pdf.js runs in the main thread ("fake worker"): the worker module is bundled
 // with the app and handed over through globalThis.pdfjsWorker, so no worker or
 // CDN URL is ever fetched (self-hosting and CSP stay intact).
@@ -23,10 +23,8 @@ async function loadDocument(pdfBase64) {
             import("pdfjs-dist/build/pdf.worker.min.mjs"),
         ]);
         Object.assign(globalThis, { pdfjsWorker: worker });
-        const document = await pdfjs.getDocument({
-            data: decodeBase64(pdfBase64),
-        }).promise;
-        return { ok: true, document };
+        const loadingTask = pdfjs.getDocument({ data: decodeBase64(pdfBase64) });
+        return { ok: true, document: await loadingTask.promise, loadingTask };
     }
     catch {
         return { ok: false };
@@ -35,15 +33,21 @@ async function loadDocument(pdfBase64) {
 // The promise must be stable across renders for use(); only the latest PDF is kept.
 function documentFor(pdfBase64) {
     if (cachedKey !== pdfBase64 || cachedLoad === null) {
+        const previous = cachedLoad;
         cachedKey = pdfBase64;
         cachedLoad = loadDocument(pdfBase64);
+        void previous?.then((loaded) => {
+            if (loaded.ok)
+                void loaded.loadingTask.destroy();
+        });
     }
     return cachedLoad;
 }
 function PageView({ document, pageNumber, }) {
     const t = useTranslation();
     const page = use(pageFor(document, pageNumber));
-    const viewport = page.getViewport({ scale: RENDER_SCALE });
+    // Stable identity: the mount callbacks below depend on it, and a new viewport per render re-mounts canvas and text layer.
+    const viewport = useMemo(() => page.getViewport({ scale: RENDER_SCALE }), [page]);
     const mountCanvas = useCallback((canvas) => {
         if (canvas === null)
             return;
@@ -57,7 +61,13 @@ function PageView({ document, pageNumber, }) {
         container.style.setProperty("--total-scale-factor", String(RENDER_SCALE));
         container.style.setProperty("--scale-factor", String(RENDER_SCALE));
         let layer = null;
+        let cancelled = false;
         void import("pdfjs-dist").then(({ TextLayer }) => {
+            // skip: cleanup ran before pdfjs finished loading
+            if (cancelled)
+                return undefined;
+            // TextLayer.cancel() keeps rendered spans; a re-mount must not append a second layer.
+            container.replaceChildren();
             const textLayer = new TextLayer({
                 textContentSource: page.streamTextContent(),
                 container,
@@ -66,9 +76,12 @@ function PageView({ document, pageNumber, }) {
             layer = textLayer;
             return textLayer.render().catch(() => undefined);
         });
-        return () => layer?.cancel();
+        return () => {
+            cancelled = true;
+            layer?.cancel();
+        };
     }, [page, viewport]);
-    return (_jsxs("figure", { className: "m-0 flex flex-col items-center gap-2", "data-testid": `pdf-page-${pageNumber}`, children: [_jsxs("div", { className: "relative w-fit bg-background shadow-md", children: [_jsx("canvas", { ref: mountCanvas, width: viewport.width, height: viewport.height }), _jsx("div", { ref: mountTextLayer, className: "absolute inset-0 overflow-hidden leading-none [&_span]:absolute [&_span]:origin-top-left [&_span]:cursor-text [&_span]:whitespace-pre [&_span]:text-transparent [&_span::selection]:bg-primary/30" })] }), _jsx("figcaption", { className: "text-xs text-muted-foreground", children: t("documentDesigner.preview.pageOf", { page: pageNumber, pages: document.numPages }) })] }));
+    return (_jsxs("figure", { className: "m-0 flex flex-col items-center gap-2", "data-testid": `pdf-page-${pageNumber}`, children: [_jsxs("div", { className: "relative w-fit bg-card shadow-md", children: [_jsx("canvas", { ref: mountCanvas, width: viewport.width, height: viewport.height }), _jsx("div", { ref: mountTextLayer, className: "absolute inset-0 overflow-hidden leading-none [&_span]:absolute [&_span]:origin-top-left [&_span]:cursor-text [&_span]:whitespace-pre [&_span]:text-transparent [&_span::selection]:bg-primary/30" })] }), _jsx("figcaption", { className: "text-xs text-muted-foreground", children: t("documentDesigner.preview.pageOf", { page: pageNumber, pages: document.numPages }) })] }));
 }
 const pageCache = new WeakMap();
 function pageFor(document, pageNumber) {

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

@@ -3,36 +3,47 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 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 { 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 { PlaceholderPanel, visibleSystemPlaceholders, } from "./placeholder-panel.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 = {};
-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"]);
+// 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) });
-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 insert = useInsertTargets();
+    const overview = useOverviewRows(DOCUMENT_PDF_KIND);
     const roles = useUserRoles();
     const scope = roles?.includes("SystemAdmin") === true ? "system" : "tenant";
     const rowsQuery = useQuery(TemplateResolverQueries.list, {
@@ -61,11 +72,12 @@ export function PdfTemplateEditor({ slug, locale: requestedLocale, onLocaleChang
             clearTimeout(settleTimer.current);
     }, []);
     const [overridesOpen, setOverridesOpen] = useState(false);
-    const editorHandle = useRef(null);
+    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);
@@ -90,35 +102,25 @@ export function PdfTemplateEditor({ slug, locale: requestedLocale, onLocaleChang
         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 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 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 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]);
-    const onEditorReady = useCallback((handle) => {
-        editorHandle.current = handle;
-    }, []);
     if (rowsQuery.loading && rowsQuery.data === null)
         return _jsx(LoadingState, {});
     if (rowsQuery.error !== null)
@@ -143,6 +145,7 @@ export function PdfTemplateEditor({ slug, locale: requestedLocale, onLocaleChang
         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() {
@@ -220,10 +223,11 @@ export function PdfTemplateEditor({ slug, locale: requestedLocale, onLocaleChang
             setActionError(describeError(t, result.error));
         setBusy(null);
     }
-    function switchMode(next) {
-        setMode(next);
-        if (next === "preview" && pdfAvailable && !generatedFresh && busy === null)
-            void generatePdf();
+    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);
@@ -243,53 +247,63 @@ export function PdfTemplateEditor({ slug, locale: requestedLocale, onLocaleChang
         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 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 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"
+    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") })] })), _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) => {
+                                    : 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 () => {

package/dist/web/rail.d.ts

@@ -5,10 +5,21 @@ export declare function RailSection({ title, action, testId, children, }: {
     readonly testId?: string;
     readonly children: ReactNode;
 }): ReactNode;
-export declare function RailRow({ symbol, label, trailing, bad, testId, onPress, }: {
+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;
@@ -16,3 +27,4 @@ export declare function RailRow({ symbol, label, trailing, bad, testId, onPress,
 export declare function RailHint({ children }: {
     readonly children: ReactNode;
 }): ReactNode;
+export {};

package/dist/web/rail.js

@@ -1,14 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, 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] }));
+    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 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 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-2 pt-1 text-xs text-muted-foreground", children: children });
+    return _jsx("p", { className: "px-3.5 pt-1 pb-2 text-xs text-muted-foreground", children: children });
 }