@cosmicdrift/kumiko-document-designer 0.371.0 → 0.372.0

package/dist/web/cells.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @runtime client
 import { TemplateResolverQueries } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
-import { toInstant } from "@cosmicdrift/kumiko-headless";
+import { EMPTY_VALUE_PLACEHOLDER, toInstant } from "@cosmicdrift/kumiko-headless";
 import { formatWhen, useQuery, useTranslation, } from "@cosmicdrift/kumiko-renderer";
 import { StatusBadge } from "@cosmicdrift/kumiko-renderer-web";
 import { parseOverviewRow } from "./overview-row.js";
 import { statusLabel, statusTone } from "./status-label.js";
 import { templateTitle, usedByLabel } from "./used-by-label.js";
-const EMPTY_MARK = "–";
 function withRow(row, render) {
     const parsed = parseOverviewRow(row);
-    return parsed === null ? EMPTY_MARK : render(parsed);
+    return parsed === null ? EMPTY_VALUE_PLACEHOLDER : render(parsed);
 }
 export function TitleCell({ row }) {
     const t = useTranslation();
@@ -34,7 +33,7 @@ export function createLocalesCell(appLocales) {
     return function LocalesCell({ row }) {
         return withRow(row, (r) => {
             if (r.kind === "mail-layout" || r.kind === "pdf-layout")
-                return EMPTY_MARK;
+                return EMPTY_VALUE_PLACEHOLDER;
             const present = new Set(r.locales);
             const shown = [...appLocales, ...r.locales.filter((l) => !appLocales.includes(l))];
             return (_jsx("span", { className: "inline-flex gap-1", children: shown.map((locale) => (_jsx("span", { "data-testid": `document-designer-locale-${locale}`, "data-present": present.has(locale), className: present.has(locale)
@@ -65,7 +64,7 @@ function formatModifiedDate(value) {
     }
 }
 export function ModifiedCell({ row }) {
-    return withRow(row, (r) => r.modifiedAt === "" ? (EMPTY_MARK) : (_jsx("span", { className: "whitespace-nowrap", title: formatWhen(r.modifiedAt), children: formatModifiedDate(r.modifiedAt) })));
+    return withRow(row, (r) => r.modifiedAt === "" ? (EMPTY_VALUE_PLACEHOLDER) : (_jsx("span", { className: "whitespace-nowrap", title: formatWhen(r.modifiedAt), children: formatModifiedDate(r.modifiedAt) })));
 }
 function OverriddenByCount({ slug, kind, }) {
     const t = useTranslation();
@@ -74,7 +73,7 @@ function OverriddenByCount({ slug, kind, }) {
         kind,
     });
     if (data === null)
-        return EMPTY_MARK;
+        return EMPTY_VALUE_PLACEHOLDER;
     const label = data.totalTenants === null
         ? t("documentDesigner.overriddenBy.tenants", { active: data.activeOverrides })
         : t("documentDesigner.overriddenBy.ofTotal", {
@@ -84,5 +83,5 @@ function OverriddenByCount({ slug, kind, }) {
     return _jsx("span", { className: "whitespace-nowrap", children: label });
 }
 export function OverriddenByCell({ row }) {
-    return withRow(row, (r) => r.origin === "system" ? _jsx(OverriddenByCount, { slug: r.slug, kind: r.kind }) : EMPTY_MARK);
+    return withRow(row, (r) => r.origin === "system" ? (_jsx(OverriddenByCount, { slug: r.slug, kind: r.kind })) : (EMPTY_VALUE_PLACEHOLDER));
 }

package/dist/web/i18n.js

@@ -43,6 +43,7 @@ export const documentDesignerTranslations = {
         "documentDesigner.resources.title": "Resources",
         "documentDesigner.resources.upload": "+ Upload",
         "documentDesigner.settings.fileName": "File name",
+        "documentDesigner.settings.fileNamePlaceholder": "invoice-{{number}}.pdf",
         "documentDesigner.settings.landscape": "Landscape",
         "documentDesigner.settings.layout": "Layout",
         "documentDesigner.settings.layoutHeaderFooter": "Header and footer from layout",
@@ -115,6 +116,7 @@ export const documentDesignerTranslations = {
         "documentDesigner.resources.title": "Ressourcen",
         "documentDesigner.resources.upload": "+ Hochladen",
         "documentDesigner.settings.fileName": "Dateiname",
+        "documentDesigner.settings.fileNamePlaceholder": "rechnung-{{number}}.pdf",
         "documentDesigner.settings.landscape": "Querformat",
         "documentDesigner.settings.layout": "Layout",
         "documentDesigner.settings.layoutHeaderFooter": "Kopf- und Fußzeile aus Layout",
@@ -143,4 +145,77 @@ export const documentDesignerTranslations = {
         "documentDesigner.validation.missingRequired": 'Pflicht-Platzhalter "{name}" fehlt. Veröffentlichen ist gesperrt.',
         "documentDesigner.validation.ok": "Alle Pflicht-Platzhalter vorhanden. Nach dem Veröffentlichen nutzen neue PDFs diese Fassung.",
     },
+    es: {
+        "documentDesigner.actions.generatePdf": "Generar PDF",
+        "documentDesigner.canvas.caption": "Página 1 · {format} · La vista previa solo muestra los saltos de página de forma aproximada; lo que vale es «Generar PDF».",
+        "documentDesigner.canvas.fromLayout": "del diseño «{layout}»",
+        "documentDesigner.error.resourceTooLarge": "La imagen es demasiado grande. Elige un archivo más pequeño.",
+        "documentDesigner.error.resourceUnsupportedImage": "Este formato de imagen no es compatible. Usa PNG, JPEG, GIF o WebP.",
+        "documentDesigner.locale": "Idioma",
+        "documentDesigner.localeDialog.cancel": "Cancelar",
+        "documentDesigner.localeDialog.description": "Los cambios en este idioma aún no se han guardado.",
+        "documentDesigner.localeDialog.discard": "Descartar cambios",
+        "documentDesigner.localeDialog.save": "Guardar y cambiar",
+        "documentDesigner.localeDialog.title": "Cambios sin guardar",
+        "documentDesigner.notFound": "No se encontró la plantilla «{slug}».",
+        "documentDesigner.originBar.export": "Exportar como paquete",
+        "documentDesigner.originBar.noTotal": "Plantilla del sistema para todas las organizaciones. {count} organizaciones tienen su propia versión y no reciben los cambios que hagas aquí.",
+        "documentDesigner.originBar.withTotal": "Plantilla del sistema para todas las organizaciones. {count} de {total} organizaciones tienen su propia versión y no reciben los cambios que hagas aquí.",
+        "documentDesigner.originBar.showOverrides": "Ver personalizaciones de las organizaciones",
+        "documentDesigner.overrides.action.diff": "Ver diferencias",
+        "documentDesigner.overrides.action.open": "Abrir",
+        "documentDesigner.overrides.back": "Volver a la lista",
+        "documentDesigner.overrides.column.changed": "Modificada",
+        "documentDesigner.overrides.column.status": "Estado",
+        "documentDesigner.overrides.column.tenant": "Organización",
+        "documentDesigner.overrides.column.version": "Versión",
+        "documentDesigner.overrides.detail.version": "{tenant}, versión {version}",
+        "documentDesigner.overrides.empty": "Ninguna organización ha personalizado esta plantilla. Los cambios que hagas aquí se aplican a todas.",
+        "documentDesigner.overrides.status.active": "Personalizada",
+        "documentDesigner.overrides.status.draft": "Borrador",
+        "documentDesigner.overrides.summary": "{count} organizaciones tienen su propia versión.",
+        "documentDesigner.overrides.title": "Personalizaciones de las organizaciones",
+        "documentDesigner.overrides.usedBy": "Se usa en",
+        "documentDesigner.overrides.usedByEmpty": "Ninguna notificación registrada usa esta plantilla directamente.",
+        "documentDesigner.pdfUnavailable": "La generación de PDF no está disponible: {message}",
+        "documentDesigner.pdfUnavailableNoReason": "La generación de PDF no está disponible.",
+        "documentDesigner.placeholders.layoutHint": "Las imágenes van incluidas en el PDF como URI de datos. El encabezado y el pie de página vienen del diseño «{layout}» y son iguales en todas las páginas.",
+        "documentDesigner.preview.loading": "Generando PDF...",
+        "documentDesigner.preview.pageOf": "Página {page} de {pages}",
+        "documentDesigner.preview.renderFailed": "No se pudo mostrar el PDF.",
+        "documentDesigner.preview.stale": "La vista previa está desactualizada. Vuelve a generar el PDF.",
+        "documentDesigner.resources.empty": "Todavía no hay imágenes.",
+        "documentDesigner.resources.saveFirst": "Guarda primero la plantilla; después podrás subir imágenes.",
+        "documentDesigner.resources.title": "Recursos",
+        "documentDesigner.resources.upload": "+ Subir",
+        "documentDesigner.settings.fileName": "Nombre del archivo",
+        "documentDesigner.settings.fileNamePlaceholder": "factura-{{number}}.pdf",
+        "documentDesigner.settings.landscape": "Horizontal",
+        "documentDesigner.settings.layout": "Diseño",
+        "documentDesigner.settings.layoutHeaderFooter": "Encabezado y pie de página del diseño",
+        "documentDesigner.settings.marginBottom": "Inferior (mm)",
+        "documentDesigner.settings.marginLeft": "Izquierdo (mm)",
+        "documentDesigner.settings.marginRight": "Derecho (mm)",
+        "documentDesigner.settings.marginTop": "Superior (mm)",
+        "documentDesigner.settings.metaAuthor": "Autor",
+        "documentDesigner.settings.metadata": "Metadatos del PDF",
+        "documentDesigner.settings.metaLanguage": "Idioma",
+        "documentDesigner.settings.metaLanguageHint": "Sigue el idioma de la plantilla. Cámbialo con el selector de idioma del encabezado.",
+        "documentDesigner.settings.margins": "Márgenes en mm (superior, derecho, inferior, izquierdo)",
+        "documentDesigner.settings.metaTitle": "Título",
+        "documentDesigner.settings.orientation": "Orientación",
+        "documentDesigner.settings.page": "Documento",
+        "documentDesigner.settings.pageFormat": "Formato de página",
+        "documentDesigner.settings.portrait": "Vertical",
+        "documentDesigner.settings.printBackground": "Imprimir fondos y colores",
+        "documentDesigner.settings.storage": "Almacenamiento",
+        "documentDesigner.settings.storageHint": "Cada PDF generado lleva el id y la versión de la plantilla. Así las facturas siguen siendo verificables aunque la plantilla cambie más adelante.",
+        "documentDesigner.status.active": "Activa",
+        "documentDesigner.status.activeVersion": "Activa v{version}",
+        "documentDesigner.status.draft": "Borrador",
+        "documentDesigner.status.draftVersion": "Borrador v{version}",
+        "documentDesigner.validation.lastProbe": "Última generación de prueba: {pages} páginas, {size}, {seconds} s",
+        "documentDesigner.validation.missingRequired": "Falta el marcador obligatorio «{name}». No se puede publicar.",
+        "documentDesigner.validation.ok": "Están todos los marcadores obligatorios. Tras publicar, los PDF nuevos usan esta versión.",
+    },
 };

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

@@ -5,6 +5,7 @@ export declare const LAYOUT_OWNED_PLACEHOLDERS: ReadonlySet<string>;
 export declare const SYSTEM_PLACEHOLDER_TYPE: Readonly<Record<string, PlaceholderType>>;
 type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
 export declare function systemPlaceholderLabel(t: Translate, name: string): string;
+export declare function labelPlaceholders(line: string, variableLabels: Readonly<Record<string, string>>): string;
 export declare function systemLabelMap(t: Translate, names: readonly string[]): Readonly<Record<string, string>>;
 export declare function parseJsonRecord(value: unknown): Readonly<Record<string, unknown>>;
 export declare function loadedMailOf(row: TemplateRowView | null): MailDraft;
@@ -15,5 +16,9 @@ export declare function uniqueResourceKey(source: string, taken: readonly string
 export declare function lastSlugSegment(slug: string): string;
 export declare function formatKilobytes(bytes: number): string;
 export declare function variableLabelMap(t: Translate, variables: Readonly<Record<string, MailVariable>>): Record<string, string>;
-export declare function displayValue(t: (key: string, params?: Readonly<Record<string, unknown>>) => string, value: unknown): string;
+export type SampleValueFormat = {
+    readonly locale: string;
+    readonly tenantCurrency: string | undefined;
+};
+export declare function displayValue(t: (key: string, params?: Readonly<Record<string, unknown>>) => string, value: unknown, type: PlaceholderType | undefined, format: SampleValueFormat): string;
 export {};

package/dist/web/mail-draft.js

@@ -1,3 +1,5 @@
+// @runtime client
+import { DOCUMENT_FALLBACK_CURRENCY, formatDocumentDate, formatDocumentMoney, formatDocumentPercent, } from "@cosmicdrift/kumiko-headless";
 import { variableLabelText } from "./used-by-label.js";
 export const EMPTY_DRAFT = {
     subject: "",
@@ -33,6 +35,13 @@ export function systemPlaceholderLabel(t, name) {
     const translated = t(key);
     return translated === key ? name : translated;
 }
+// For places that show a stored {{name}} line as plain text instead of chips.
+export function labelPlaceholders(line, variableLabels) {
+    return line.replace(/\{\{([^{}]*)\}\}/g, (_token, rawName) => {
+        const name = rawName.trim();
+        return Object.hasOwn(variableLabels, name) ? (variableLabels[name] ?? name) : name;
+    });
+}
 // Chips in the editors show these instead of the raw system names.
 export function systemLabelMap(t, names) {
     return Object.fromEntries(names.map((name) => [name, systemPlaceholderLabel(t, name)]));
@@ -156,14 +165,19 @@ export function variableLabelMap(t, variables) {
     }
     return labels;
 }
-export function displayValue(t, value) {
+export function displayValue(t, value, type, format) {
     if (Array.isArray(value))
         return t("documentDesigner.mail.preview.entries", { count: value.length });
-    if (isRecord(value)) {
-        const { amount, currency } = value;
-        if (typeof amount === "number" && typeof currency === "string")
-            return `${amount} ${currency}`;
-        return JSON.stringify(value);
+    if (type === "money") {
+        if (typeof value === "number" && format.tenantCurrency === undefined)
+            return String(value);
+        return formatDocumentMoney(value, format.tenantCurrency ?? DOCUMENT_FALLBACK_CURRENCY, format.locale);
     }
+    if (type === "date")
+        return formatDocumentDate(value, format.locale);
+    if (type === "percent")
+        return formatDocumentPercent(value, format.locale);
+    if (isRecord(value))
+        return JSON.stringify(value);
     return String(value ?? "");
 }

package/dist/web/mail-origin-bar.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @runtime client
 import { TemplateResolverHandlers } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { EMPTY_VALUE_PLACEHOLDER } from "@cosmicdrift/kumiko-headless";
 import { dispatcherErrorText, formatWhen, useMutation, usePrimitives, useTranslation, } from "@cosmicdrift/kumiko-renderer";
 import { useState } from "react";
 import { originOf } from "./editor-header.js";
@@ -18,7 +19,7 @@ function statusSentence(t, row) {
         return besideActive;
     if (row.status === "active") {
         return t("documentDesigner.mail.origin.activeSince", {
-            when: row.modifiedAt === null ? "–" : formatWhen(row.modifiedAt),
+            when: row.modifiedAt === null ? EMPTY_VALUE_PLACEHOLDER : formatWhen(row.modifiedAt),
         });
     }
     return t(row.status === "archived"

package/dist/web/mail-preview-side.js

@@ -1,30 +1,54 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @runtime client
-import { useNav, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { ConfigQueries } from "@cosmicdrift/kumiko-bundled-features/config/web";
+import { DOCUMENT_FALLBACK_CURRENCY } from "@cosmicdrift/kumiko-headless";
+import { useNav, usePrimitives, useQuery, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { TENANT_CURRENCY_CONFIG_KEY } from "@cosmicdrift/kumiko-types/fields";
 import { useState } from "react";
 import { displayValue } from "./mail-draft.js";
 import { usePreviewRecordPicker } from "./preview-record-picker.js";
 import { RailField, RailHint, RailRow, RailSection } from "./rail.js";
 import { variableLabelText } from "./used-by-label.js";
 const noop = () => undefined;
-// Check params list names as arrays; the message templates expect one string.
-function checkText(t, check) {
+// Check params list placeholder names as arrays; the message templates expect one string, and
+// the editor shows each placeholder by its label.
+function checkText(t, check, validation) {
+    const labelOf = (name) => typeof name === "string"
+        ? variableLabelText(t, name, validation?.variables[name]?.label)
+        : String(name);
     const params = Object.fromEntries(Object.entries(check.params ?? {}).map(([name, value]) => [
         name,
-        Array.isArray(value) ? value.join(", ") : value,
+        Array.isArray(value) ? value.map(labelOf).join(", ") : value,
     ]));
     const translated = t(check.i18nKey, params);
     return translated === check.i18nKey ? check.code : translated;
 }
-function SampleValues({ preview, validation, picked, }) {
+// Same source and fallback as the renderer's readDocumentFormat, so a bare amount shows
+// the currency the rendered mail prints.
+function useTenantCurrency() {
+    const { data, error } = useQuery(ConfigQueries.values, {
+        keys: [TENANT_CURRENCY_CONFIG_KEY],
+    });
+    if (error)
+        return undefined;
+    if (data === null)
+        return undefined;
+    const value = data[TENANT_CURRENCY_CONFIG_KEY]?.value;
+    return typeof value === "string" && value !== "" ? value : DOCUMENT_FALLBACK_CURRENCY;
+}
+function SampleValues({ preview, validation, picked, locale, }) {
     const t = useTranslation();
+    const tenantCurrency = useTenantCurrency();
     const values = { ...(preview?.sampleValues ?? {}), ...(picked ?? {}) };
     const names = Object.keys(validation?.variables ?? values);
     return (_jsx(_Fragment, { children: names.map((name) => {
             const missing = validation?.missingRequired.includes(name) === true;
             return (_jsx(RailRow, { testId: `mail-sample-${name}`, label: variableLabelText(t, name, validation?.variables[name]?.label), nameHint: name, bad: missing, trailing: missing
                     ? t("documentDesigner.mail.preview.missingInContent")
-                    : displayValue(t, values[name]) }, name));
+                    : displayValue(t, values[name], validation?.variables[name]?.type, {
+                        locale,
+                        tenantCurrency,
+                    }) }, name));
         }) }));
 }
 function RecordPickerLink({ slug, locale, onPick, }) {
@@ -54,5 +78,5 @@ export function PreviewSide({ preview, validation, slug, locale, own, testMail,
     const { Button, Field, Input, Text } = usePrimitives();
     const hasAttachments = preview?.attachments.some((a) => a.kind !== "inline") === true;
     const [picked, setPicked] = useState(null);
-    return (_jsxs("div", { "data-testid": "mail-preview-side", children: [_jsxs(RailSection, { title: t("documentDesigner.mail.preview.samples"), action: _jsx(RecordPickerLink, { slug: slug, locale: locale, onPick: setPicked }), children: [_jsx(SampleValues, { preview: preview, validation: validation, picked: picked }), _jsx(RailHint, { children: t("documentDesigner.mail.preview.samplesHint") })] }), _jsxs(RailSection, { title: t("documentDesigner.mail.testMail.title"), children: [_jsx(TestMailRecipient, { own: own }), _jsxs(RailField, { children: [_jsx(Field, { id: "mail-test-prefix", label: t("documentDesigner.mail.testMail.prefixSubject"), layout: "inline", children: _jsx(Input, { kind: "boolean", id: "mail-test-prefix", name: "mail-test-prefix", value: testMail.prefixSubject, onChange: testMail.onPrefixSubject }) }), hasAttachments ? (_jsx(Field, { id: "mail-test-attachments", label: t("documentDesigner.mail.testMail.attachments"), layout: "inline", children: _jsx(Input, { kind: "boolean", id: "mail-test-attachments", name: "mail-test-attachments", value: testMail.includeAttachments, onChange: testMail.onIncludeAttachments }) })) : (_jsx(Text, { variant: "muted", testId: "mail-test-no-attachments", children: t("documentDesigner.mail.testMail.noAttachments") })), _jsx(Button, { variant: "secondary", width: "full", disabled: testMail.pending, loading: testMail.pending, onClick: testMail.onSend, testId: "mail-test-send", children: t("documentDesigner.mail.testMail.send") })] }), _jsx(RailHint, { children: t("documentDesigner.mail.testMail.hint") })] }), _jsxs(RailSection, { title: t("documentDesigner.mail.preview.checks"), testId: "mail-preview-checks", children: [(preview?.checks ?? []).map((check) => (_jsx(RailRow, { testId: `mail-check-${check.code}`, symbol: check.ok ? "✓" : "!", label: checkText(t, check), bad: !check.ok }, check.code))), _jsx(RailHint, { children: t("documentDesigner.mail.preview.checksHint") })] })] }));
+    return (_jsxs("div", { "data-testid": "mail-preview-side", children: [_jsxs(RailSection, { title: t("documentDesigner.mail.preview.samples"), action: _jsx(RecordPickerLink, { slug: slug, locale: locale, onPick: setPicked }), children: [_jsx(SampleValues, { preview: preview, validation: validation, picked: picked, locale: locale }), _jsx(RailHint, { children: t("documentDesigner.mail.preview.samplesHint") })] }), _jsxs(RailSection, { title: t("documentDesigner.mail.testMail.title"), children: [_jsx(TestMailRecipient, { own: own }), _jsxs(RailField, { children: [_jsx(Field, { id: "mail-test-prefix", label: t("documentDesigner.mail.testMail.prefixSubject"), layout: "inline", children: _jsx(Input, { kind: "boolean", id: "mail-test-prefix", name: "mail-test-prefix", value: testMail.prefixSubject, onChange: testMail.onPrefixSubject }) }), hasAttachments ? (_jsx(Field, { id: "mail-test-attachments", label: t("documentDesigner.mail.testMail.attachments"), layout: "inline", children: _jsx(Input, { kind: "boolean", id: "mail-test-attachments", name: "mail-test-attachments", value: testMail.includeAttachments, onChange: testMail.onIncludeAttachments }) })) : (_jsx(Text, { variant: "muted", testId: "mail-test-no-attachments", children: t("documentDesigner.mail.testMail.noAttachments") })), _jsx(Button, { variant: "secondary", width: "full", disabled: testMail.pending, loading: testMail.pending, onClick: testMail.onSend, testId: "mail-test-send", children: t("documentDesigner.mail.testMail.send") })] }), _jsx(RailHint, { children: t("documentDesigner.mail.testMail.hint") })] }), _jsxs(RailSection, { title: t("documentDesigner.mail.preview.checks"), testId: "mail-preview-checks", children: [(preview?.checks ?? []).map((check) => (_jsx(RailRow, { testId: `mail-check-${check.code}`, symbol: check.ok ? "✓" : "!", label: checkText(t, check, validation), bad: !check.ok }, check.code))), _jsx(RailHint, { children: t("documentDesigner.mail.preview.checksHint") })] })] }));
 }

package/dist/web/mail-right-rail.js

@@ -4,6 +4,7 @@ import { MAIL_TONES, PlaceholderLineEditor, TemplateResolverQueries, } from "@co
 import { useAppFeatures, useNav, usePrimitives, useQuery, useTranslation, } from "@cosmicdrift/kumiko-renderer";
 import { isOneOf } from "@cosmicdrift/kumiko-types/type-guards";
 import { DEFAULT_LAYOUT_SLUG, TENANT_MAIL_SENDING_SCREEN_ID } from "../constants.js";
+import { labelPlaceholders } from "./mail-draft.js";
 import { RailField, RailHint, RailRow, RailSection } from "./rail.js";
 import { usageParts } from "./used-by-label.js";
 function useTemplateUsage(slug) {
@@ -93,7 +94,7 @@ const TONE_LABEL_KEYS = {
 };
 // The stored tone may be a placeholder that resolves per mail; the select keeps it as its own
 // option so opening the template never silently drops it.
-function toneOptions(t, current) {
+function toneOptions(t, current, variableLabels) {
     const fixed = MAIL_TONES.map((tone) => ({ value: tone, label: t(TONE_LABEL_KEYS[tone]) }));
     return current === "" || isOneOf(MAIL_TONES, current)
         ? fixed
@@ -101,7 +102,9 @@ function toneOptions(t, current) {
             ...fixed,
             {
                 value: current,
-                label: t("documentDesigner.mail.chrome.toneFromPlaceholder", { value: current }),
+                label: t("documentDesigner.mail.chrome.toneFromPlaceholder", {
+                    value: labelPlaceholders(current, variableLabels),
+                }),
             },
         ];
 }
@@ -110,7 +113,7 @@ export function ChromeSection({ draft, vocabulary, insert, onChange, }) {
     const { Field, Input } = usePrimitives();
     // "accent" is the renderer default, so it is stored as an empty value.
     const toneValue = draft.tone === "" ? "accent" : draft.tone;
-    return (_jsxs(RailSection, { title: t("documentDesigner.mail.chrome.title"), testId: "mail-editor-chrome", children: [_jsx(RailField, { children: _jsx(Field, { id: "mail-header-chip", label: t("documentDesigner.mail.chrome.headerChip"), children: _jsx("div", { onFocusCapture: insert.markFocused("headerChip"), "data-testid": "mail-header-chip", children: _jsx(PlaceholderLineEditor, { id: "mail-header-chip", value: draft.headerChip, onChange: (headerChip) => onChange({ headerChip }), variableLabels: vocabulary.labels, systemVariables: vocabulary.system, placeholder: t("documentDesigner.mail.chrome.headerChipPlaceholder"), onEditorReady: insert.register("headerChip"), "aria-label": t("documentDesigner.mail.chrome.headerChip") }) }) }) }), _jsx(RailField, { children: _jsx(Field, { id: "mail-tone", label: t("documentDesigner.mail.chrome.tone"), children: _jsx(Input, { kind: "select", id: "mail-tone", name: "mail-tone", value: toneValue, display: "dropdown", onChange: (next) => onChange({ tone: next === "accent" ? "" : next }), options: toneOptions(t, draft.tone) }) }) }), _jsx(RailField, { children: _jsx(Field, { id: "mail-footer-note", label: t("documentDesigner.mail.chrome.footerNote"), children: _jsx("div", { onFocusCapture: insert.markFocused("footerNote"), "data-testid": "mail-footer-note", children: _jsx(PlaceholderLineEditor, { id: "mail-footer-note", value: draft.footerNote, onChange: (footerNote) => onChange({ footerNote }), variableLabels: vocabulary.labels, systemVariables: vocabulary.system, placeholder: t("documentDesigner.mail.chrome.footerNotePlaceholder"), onEditorReady: insert.register("footerNote"), "aria-label": t("documentDesigner.mail.chrome.footerNote") }) }) }) }), _jsx(RailHint, { children: t("documentDesigner.mail.chrome.hint") })] }));
+    return (_jsxs(RailSection, { title: t("documentDesigner.mail.chrome.title"), testId: "mail-editor-chrome", children: [_jsx(RailField, { children: _jsx(Field, { id: "mail-header-chip", label: t("documentDesigner.mail.chrome.headerChip"), children: _jsx("div", { onFocusCapture: insert.markFocused("headerChip"), "data-testid": "mail-header-chip", children: _jsx(PlaceholderLineEditor, { id: "mail-header-chip", value: draft.headerChip, onChange: (headerChip) => onChange({ headerChip }), variableLabels: vocabulary.labels, systemVariables: vocabulary.system, placeholder: t("documentDesigner.mail.chrome.headerChipPlaceholder"), onEditorReady: insert.register("headerChip"), "aria-label": t("documentDesigner.mail.chrome.headerChip") }) }) }) }), _jsx(RailField, { children: _jsx(Field, { id: "mail-tone", label: t("documentDesigner.mail.chrome.tone"), children: _jsx(Input, { kind: "select", id: "mail-tone", name: "mail-tone", value: toneValue, display: "dropdown", onChange: (next) => onChange({ tone: next === "accent" ? "" : next }), options: toneOptions(t, draft.tone, vocabulary.labels) }) }) }), _jsx(RailField, { children: _jsx(Field, { id: "mail-footer-note", label: t("documentDesigner.mail.chrome.footerNote"), children: _jsx("div", { onFocusCapture: insert.markFocused("footerNote"), "data-testid": "mail-footer-note", children: _jsx(PlaceholderLineEditor, { id: "mail-footer-note", value: draft.footerNote, onChange: (footerNote) => onChange({ footerNote }), variableLabels: vocabulary.labels, systemVariables: vocabulary.system, placeholder: t("documentDesigner.mail.chrome.footerNotePlaceholder"), onEditorReady: insert.register("footerNote"), "aria-label": t("documentDesigner.mail.chrome.footerNote") }) }) }) }), _jsx(RailHint, { children: t("documentDesigner.mail.chrome.hint") })] }));
 }
 export function UsageSection({ slug }) {
     const t = useTranslation();

package/dist/web/mail-versions.js

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EMPTY_VALUE_PLACEHOLDER } from "@cosmicdrift/kumiko-headless";
 // @runtime client
 import { formatWhen, useAppFeatures, useQuery, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { StatusBadge } from "@cosmicdrift/kumiko-renderer-web";
@@ -29,7 +30,7 @@ function VersionRows({ rowId, currentVersion, currentStatus, }) {
     return (_jsx(_Fragment, { children: versions.map((row) => (_jsx(RailRow, { testId: `mail-version-${row.version}`, label: t("documentDesigner.mail.versions.line", {
                 version: row.version,
                 when: formatWhen(row.createdAt),
-                name: names.get(row.createdBy) ?? "–",
+                name: names.get(row.createdBy) ?? EMPTY_VALUE_PLACEHOLDER,
             }), trailing: row.version === currentVersion ? (_jsx(StatusBadge, { tone: statusTone(status), children: statusLabel(t, status, row.version) })) : undefined }, row.version))) }));
 }
 // Hidden when the audit feature is not mounted, so no failing query shows up as an error.

package/dist/web/origin-bar.js

@@ -1,6 +1,7 @@
 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 { EMPTY_VALUE_PLACEHOLDER } from "@cosmicdrift/kumiko-headless";
 import { dispatcherErrorText, useMutation, usePrimitives, useQuery, useTranslation, } from "@cosmicdrift/kumiko-renderer";
 import { EmptyState, ErrorState, LoadingState } from "@cosmicdrift/kumiko-renderer-web";
 import { useState } from "react";
@@ -19,7 +20,7 @@ const DIFF_TONE = {
 };
 function metaValueText(value) {
     if (value === undefined || value === null)
-        return "–";
+        return EMPTY_VALUE_PLACEHOLDER;
     return typeof value === "string" ? value : JSON.stringify(value);
 }
 // "full" shows the tenant's version as it reads (everything but the removed system blocks).

package/dist/web/rail.js

@@ -12,8 +12,13 @@ const TRAILING_TONE = {
     bad: "text-status-bad",
     muted: "text-muted-foreground",
 };
+// The star rides on the last word so a wrapping label never leaves it alone on a line.
+function RequiredLabel({ label }) {
+    const lastSpace = label.lastIndexOf(" ");
+    return (_jsxs(_Fragment, { children: [label.slice(0, lastSpace + 1), _jsxs("span", { className: "whitespace-nowrap", children: [label.slice(lastSpace + 1), _jsx("span", { className: "font-semibold text-status-bad", children: " *" })] })] }));
+}
 export function RailRow({ symbol, label, nameHint, 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"), title: nameHint !== undefined && nameHint !== label ? nameHint : undefined, 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 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 })), _jsx("span", { className: cn("min-w-0 grow break-words text-sm", trailing !== undefined && "min-w-min max-w-[65%] shrink-0", bad === true && "text-status-bad"), title: nameHint !== undefined && nameHint !== label ? nameHint : undefined, children: required === true ? _jsx(RequiredLabel, { label: label }) : label }), 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 })] }));
 }

package/dist/web/settings-panel.js

@@ -21,7 +21,7 @@ export function SettingsPanel({ meta, onMetaChange, layouts, locale, version, vo
     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) => {
+                                })) }) }), _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: t("documentDesigner.settings.fileNamePlaceholder") }) }), _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 });

package/dist/web/used-by-label.js

@@ -1,3 +1,4 @@
+import { EMPTY_VALUE_PLACEHOLDER } from "@cosmicdrift/kumiko-headless";
 // @runtime client
 import { DEFAULT_LAYOUT_SLUG } from "../constants.js";
 // t() returns the key itself when no translation exists.
@@ -31,7 +32,6 @@ export function usageLabel(t, usage) {
     return usage.feature === "" ? notification : `${feature} · ${notification}`;
 }
 export function usedByLabel(t, row) {
-    const emptyMark = "–";
     if (row.kind === "mail-layout" || row.kind === "pdf-layout") {
         if (row.slug === DEFAULT_LAYOUT_SLUG) {
             return t(row.kind === "mail-layout"
@@ -39,9 +39,9 @@ export function usedByLabel(t, row) {
                 : "documentDesigner.usedBy.allPdfs");
         }
         return row.usedByCount === 0
-            ? emptyMark
+            ? EMPTY_VALUE_PLACEHOLDER
             : t("documentDesigner.usedBy.templates", { count: row.usedByCount });
     }
     const first = row.usedBy[0];
-    return first === undefined ? emptyMark : usageLabel(t, first);
+    return first === undefined ? EMPTY_VALUE_PLACEHOLDER : usageLabel(t, first);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-document-designer",
-  "version": "0.371.0",
+  "version": "0.372.0",
   "description": "Document designer for Kumiko: template overview, layout editor (mail layout, PDF letterhead) and the PDF template editor.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -19,13 +19,13 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-bundled-features": "0.371.0",
-    "@cosmicdrift/kumiko-framework": "0.371.0",
-    "@cosmicdrift/kumiko-headless": "0.371.0",
-    "@cosmicdrift/kumiko-renderer": "0.371.0",
-    "@cosmicdrift/kumiko-renderer-puppeteer-client": "0.371.0",
-    "@cosmicdrift/kumiko-renderer-web": "0.371.0",
-    "@cosmicdrift/kumiko-types": "0.371.0",
+    "@cosmicdrift/kumiko-bundled-features": "0.372.0",
+    "@cosmicdrift/kumiko-framework": "0.372.0",
+    "@cosmicdrift/kumiko-headless": "0.372.0",
+    "@cosmicdrift/kumiko-renderer": "0.372.0",
+    "@cosmicdrift/kumiko-renderer-puppeteer-client": "0.372.0",
+    "@cosmicdrift/kumiko-renderer-web": "0.372.0",
+    "@cosmicdrift/kumiko-types": "0.372.0",
     "pdfjs-dist": "6.3.289",
     "react": "^19.2.6"
   },

package/src/changes.json

@@ -1,4 +1,22 @@
 [
+  {
+    "version": "0.372.0",
+    "type": "fix",
+    "title": "The designer names placeholders by their label everywhere",
+    "detail": "Placeholder chips in the mail subject, the header label, the footer note and the paper editor now show only the variable's label; the raw name stays available as a tooltip. The tone select reads \"From placeholder: <label>\" instead of \"{{tone}}\", and the validation notes in the preview list labels instead of names. The file-name hint in the settings is translated (de, en, es). Unknown placeholders and variables without a label still show their name."
+  },
+  {
+    "version": "0.372.0",
+    "type": "fix",
+    "title": "Sample values show formatted money and dates",
+    "detail": "The sample-values bar in the mail preview formats money, dates and percentages in the language of the selected tab and with the tenant currency, through the same helpers the mail and PDF renderers use (formatDocumentMoney, formatDocumentDate and formatDocumentPercent, now exported from kumiko-headless). An amount reads \"1.284,50 €\" instead of \"128450 EUR\". The required star in the placeholder list stays on the label's last word instead of wrapping onto its own line. config/web now exports ConfigQueries."
+  },
+  {
+    "version": "0.371.1",
+    "type": "fix",
+    "title": "The Document Designer editor shows its own texts in Spanish",
+    "detail": "The client translation bundle of the Document Designer (canvas caption, origin bar, tenant customisations, resources, PDF settings, preview and validation messages) had only en and de, so Spanish users saw these texts in English. It now ships an es block that uses tú and the same terms as locale-es (organización, diseño, marcador). A parity test keeps the keys and placeholders of en, de and es aligned."
+  },
   {
     "version": "0.370.0",
     "type": "fix",