@cosmicdrift/kumiko-document-designer 0.371.1 → 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",
@@ -187,6 +189,7 @@ export const documentDesignerTranslations = {
         "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",

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.1",
+  "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.1",
-    "@cosmicdrift/kumiko-framework": "0.371.1",
-    "@cosmicdrift/kumiko-headless": "0.371.1",
-    "@cosmicdrift/kumiko-renderer": "0.371.1",
-    "@cosmicdrift/kumiko-renderer-puppeteer-client": "0.371.1",
-    "@cosmicdrift/kumiko-renderer-web": "0.371.1",
-    "@cosmicdrift/kumiko-types": "0.371.1",
+    "@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,16 @@
 [
+  {
+    "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",