@cosmicdrift/kumiko-document-designer 0.377.0 → 0.379.0

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

@@ -1,11 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @runtime client
 import { TemplateResolverHandlers, TemplateResolverQueries, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
 import { useDispatcher, usePrimitives, useQuery, useTranslation, useUserRoles, } from "@cosmicdrift/kumiko-renderer";
-import { ErrorState, LoadingState, uploadFileRef } from "@cosmicdrift/kumiko-renderer/web";
+import { ErrorState, LoadingState, PdfPreview, uploadFileRef, } from "@cosmicdrift/kumiko-renderer/web";
 import { RendererPuppeteerClientQueries } from "@cosmicdrift/kumiko-renderer-puppeteer-client/qualified-names";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { BRANDING_QUERY_QN } from "../constants.js";
+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";
@@ -17,16 +16,41 @@ import { PageCanvas } from "./page-canvas.js";
 import { pdfFooterMessage } from "./pdf-footer.js";
 import { PdfResourceSection, visibleSystemPlaceholders } from "./pdf-left-rail.js";
 import { EMPTY_PDF_META, parsePdfMeta, serializePdfMeta } from "./pdf-meta.js";
-import { PdfPreview } from "./pdf-preview.js";
 import { SettingsPanel } from "./settings-panel.js";
 import { draftBesideActiveSentence } from "./status-label.js";
 import { localesOf, parseJsonObject, pickRow, resolveLocale } from "./template-rows.js";
 import { DEFAULT_LAYOUT_SLUG, DOCUMENT_PDF_KIND, PDF_LAYOUT_KIND, } from "./types.js";
+import { useFilesCapability } from "./use-files-capability.js";
 import { useInsertTargets } from "./use-insert-targets.js";
 import { useOverviewRows } from "./use-overview-rows.js";
 import { templateTitle } from "./used-by-label.js";
 const SETTLE_MS = 500;
 const NO_VARIABLES = {};
+// Only the label of an images variable is needed, for the Images block and its picker.
+function imageLabelSource(variables) {
+    const result = {};
+    for (const [name, info] of Object.entries(variables)) {
+        if (info.type === "images" && info.label !== undefined) {
+            result[name] = { type: "text", label: info.label };
+        }
+    }
+    return result;
+}
+function textVariablesOf(variables) {
+    const result = {};
+    for (const [name, info] of Object.entries(variables)) {
+        if (info.type === "images")
+            continue;
+        const { item, ...rest } = info;
+        const columns = Object.entries(item ?? {}).flatMap(([column, def]) => def.type === "images" ? [] : [[column, { ...def, type: def.type }]]);
+        result[name] = {
+            ...rest,
+            type: info.type,
+            ...(item !== undefined && { item: Object.fromEntries(columns) }),
+        };
+    }
+    return result;
+}
 // Opening the preview prints the page without a click; a failed print is not retried for the same draft.
 function RunOnMount({ run }) {
     useEffect(() => {
@@ -44,6 +68,7 @@ export function PdfTemplateEditor({ slug, locale: requestedLocale, onLocaleChang
     const dispatcher = useDispatcher();
     const { Button, Banner, Dialog } = usePrimitives();
     const insert = useInsertTargets();
+    const filesAvailable = useFilesCapability();
     const overview = useOverviewRows(DOCUMENT_PDF_KIND);
     const roles = useUserRoles();
     const scope = roles?.includes("SystemAdmin") === true ? "system" : "tenant";
@@ -112,10 +137,17 @@ export function PdfTemplateEditor({ slug, locale: requestedLocale, onLocaleChang
     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 allVariables = validation?.variables ?? NO_VARIABLES;
+    // Photos are record data, never an inline placeholder: images variables only feed the Images block.
+    const variables = useMemo(() => textVariablesOf(allVariables), [allVariables]);
+    const imageVariables = useMemo(() => Object.keys(allVariables).filter((name) => allVariables[name]?.type === "images"), [allVariables]);
     const systemVariables = useMemo(() => visibleSystemPlaceholders(validation?.systemPlaceholders ?? []), [validation?.systemPlaceholders]);
     const systemLabels = useMemo(() => systemLabelMap(t, systemVariables), [t, systemVariables]);
-    const variableLabels = useMemo(() => ({ ...systemLabels, ...variableLabelMap(t, variables) }), [systemLabels, variables, t]);
+    const variableLabels = useMemo(() => ({
+        ...systemLabels,
+        ...variableLabelMap(t, variables),
+        ...variableLabelMap(t, imageLabelSource(allVariables)),
+    }), [systemLabels, variables, allVariables, t]);
     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.
@@ -256,6 +288,7 @@ export function PdfTemplateEditor({ slug, locale: requestedLocale, onLocaleChang
         ? null
         : {
             ...validation,
+            variables,
             systemPlaceholders: visibleSystemPlaceholders(validation.systemPlaceholders),
         };
     const layoutFills = (name) => layout !== null &&
@@ -302,7 +335,7 @@ export function PdfTemplateEditor({ slug, locale: requestedLocale, onLocaleChang
                     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.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, filesAvailable: filesAvailable, 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, imageVariables: imageVariables, resourcePreviews: resourcePreviews, onEditorReady: insert.register("body") }) })) : (_jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: generated !== null && generatedFresh ? (_jsx(PdfPreview, { source: { base64: generated.result.pdfBase64 }, testId: "document-designer-pdf-preview" })) : (_jsxs("div", { className: "flex flex-col items-start gap-3 p-6", "data-testid": "document-designer-preview-stale", children: [pdfAvailable && busy === null && _jsx(RunOnMount, { run: printOnce }), _jsx("p", { className: "text-sm text-muted-foreground", children: busy === "pdf"
                                     ? t("documentDesigner.preview.loading")
                                     : t("documentDesigner.preview.stale") }), _jsx(Button, { variant: "secondary", disabled: !pdfAvailable || busy !== null, onClick: () => void generatePdf(), children: t("documentDesigner.actions.generatePdf") })] })) })), right: _jsx(SettingsPanel, { meta: current.draft.meta, onMetaChange: (meta) => updateDraft({ ...current.draft, meta }), layouts: layouts.rows, locale: locale, version: { id: detail.id, version: detail.version, status: detail.status }, vocabulary: vocabulary, insert: insert, draftKey: `${current.key}:${draftEpoch}` }) }), _jsx(EditorFooter, { testIdPrefix: "pdf-editor", message: footer, saveError: actionError, modifiedAt: detail.modifiedAt ?? null, dirty: dirty, busy: busy === "save", canSave: busy === null && validation?.canSave !== false, canPublish: busy === null && canPublish, onDiscard: () => resetDraft(detail), onSave: () => void save(), onPublish: () => void publish() }), _jsx(Dialog, { open: pendingLocale !== null, onOpenChange: (open) => {
                     if (!open)

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

@@ -1,4 +1,3 @@
-// @runtime client
 import { createContext, useContext } from "react";
 const PreviewRecordPickerContext = createContext(null);
 export const PreviewRecordPickerProvider = PreviewRecordPickerContext.Provider;

package/dist/web/rail.js

@@ -1,8 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @runtime client
 import { cn } from "@cosmicdrift/kumiko-renderer/web";
 export function RailSection({ title, action, testId, children, }) {
-    return (_jsxs("section", { className: "flex flex-col border-b pb-1", "data-testid": testId, children: [_jsxs("div", { className: "flex items-center gap-2 px-3.5 pt-2.5 pb-1", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: title }), _jsx("div", { className: "grow" }), action] }), children] }));
+    return (_jsxs("section", { className: "flex flex-col border-b pb-1", "data-testid": testId, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 px-3.5 pt-2.5 pb-1", children: [_jsx("span", { className: "min-w-0 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: title }), action !== undefined && _jsx("div", { className: "ml-auto", children: action })] }), children] }));
 }
 export function RailField({ children }) {
     return _jsx("div", { className: "flex flex-col gap-3 px-3.5 py-2", children: children });
@@ -18,8 +17,13 @@ function RequiredLabel({ label }) {
     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 })), _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";
+    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(
+                // anywhere, not break-word: only it lets a file name without spaces narrow the min-content
+                // width, so the label wraps instead of running under the action.
+                "min-w-0 grow wrap-anywhere 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 text-xs", action !== undefined ? "basis-full wrap-anywhere" : "truncate text-right", bad === true ? "text-status-bad" : TRAILING_TONE[trailingTone]), title: typeof trailing === "string" ? trailing : undefined, children: trailing }))] }));
+    // Beside an action the row is too narrow for label and trailing text: the trailing text takes its
+    // own line and wraps there instead of being clipped to an ellipsis.
+    const rowClass = cn("flex min-h-10 min-w-0 grow items-center gap-2 px-3.5 text-left", action !== undefined && "flex-wrap gap-y-0.5 py-1");
     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 }) {

package/dist/web/settings-panel.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @runtime client
 import { PDF_ORIENTATIONS, PDF_PAGE_FORMATS, PlaceholderLineEditor, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
 import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { languageName } from "./mail-origin-bar.js";

package/dist/web/template-rows.js

@@ -1,4 +1,3 @@
-// @runtime client
 import { isPlainObject } from "@cosmicdrift/kumiko-types/type-guards";
 /**
  * The row the editor works on. A tenant sees its own customisation, or the

package/dist/web/types.d.ts

@@ -39,7 +39,7 @@ export type ServedVersionView = {
     readonly version: number;
     readonly since: string;
 };
-export type VariableType = "text" | "link" | "money" | "date" | "percent" | "list";
+export type VariableType = "text" | "link" | "money" | "date" | "percent" | "list" | "images";
 export type VariableInfo = {
     readonly type: VariableType;
     readonly label?: string;

package/dist/web/use-files-capability.d.ts

@@ -0,0 +1 @@
+export declare function useFilesCapability(): boolean;

package/dist/web/use-files-capability.js

@@ -0,0 +1,7 @@
+import { useAppFeatures } from "@cosmicdrift/kumiko-renderer";
+import { FILES_FEATURE_NAME } from "./constants.js";
+// The app schema lists every mounted feature, screenless ones included, so this is the server's
+// answer: without the files feature there is no upload route.
+export function useFilesCapability() {
+    return useAppFeatures().some((feature) => feature.featureName === FILES_FEATURE_NAME);
+}

package/dist/web/use-mail-persistence.js

@@ -1,4 +1,3 @@
-// @runtime client
 import { TemplateResolverHandlers } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
 import { useMutation, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { useState } from "react";

package/dist/web/use-overview-rows.js

@@ -1,4 +1,3 @@
-// @runtime client
 import { TemplateResolverQueries } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
 import { useQuery } from "@cosmicdrift/kumiko-renderer";
 import { parseOverviewRow } from "./overview-row.js";

package/dist/web/use-own-address.js

@@ -1,6 +1,5 @@
-// @runtime client
 import { useAppFeatures, useQuery } from "@cosmicdrift/kumiko-renderer";
-import { PROFILE_FEATURE_NAME, PROFILE_SCREEN_ID, USER_ME_QUERY_QN } from "../constants.js";
+import { PROFILE_FEATURE_NAME, PROFILE_SCREEN_ID, USER_ME_QUERY_QN } from "./constants.js";
 export function useOwnAddress() {
     const features = useAppFeatures();
     const me = useQuery(USER_ME_QUERY_QN, {});

package/dist/web/use-settled-value.js

@@ -1,4 +1,3 @@
-// @runtime client
 import { useCallback, useRef, useState } from "react";
 export const SETTLE_DELAY_MS = 400;
 // Handler-driven debounce: the timer starts in the change handler, so no effect is needed.

package/dist/web/use-test-mail.d.ts

@@ -1,3 +1,4 @@
+import type { SendTestStatus } from "./mail-types.ts";
 export type TestMailState = {
     readonly kind: "idle";
 } | {
@@ -7,7 +8,12 @@ export type TestMailState = {
     readonly kind: "error";
     readonly text: string;
 };
+export type TestMailAvailability = {
+    readonly canSend: boolean;
+    readonly reason: SendTestStatus["reason"];
+};
 export type TestMail = {
+    readonly availability: TestMailAvailability;
     readonly state: TestMailState;
     readonly pending: boolean;
     readonly send: (payload: Readonly<Record<string, unknown>>) => Promise<void>;

package/dist/web/use-test-mail.js

@@ -1,12 +1,16 @@
-// @runtime client
-import { TemplateResolverHandlers } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
-import { dispatcherErrorText, useMutation, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { TemplateResolverHandlers, TemplateResolverQueries, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { dispatcherErrorText, useMutation, useQuery, useTranslation, } from "@cosmicdrift/kumiko-renderer";
 import { useState } from "react";
 const TOO_MANY_REQUESTS = 429;
 // The recipient is always the caller; the server never returns the address.
 export function useTestMail() {
     const t = useTranslation();
     const sendTest = useMutation(TemplateResolverHandlers.sendTest);
+    const status = useQuery(TemplateResolverQueries.sendTestStatus, {});
+    const availability = {
+        canSend: status.data?.canSend === true,
+        reason: status.data?.reason ?? null,
+    };
     const [state, setState] = useState({ kind: "idle" });
     const send = async (payload) => {
         setState({ kind: "idle" });
@@ -23,5 +27,5 @@ export function useTestMail() {
             });
         }
     };
-    return { state, pending: sendTest.pending, send };
+    return { availability, state, pending: sendTest.pending, send };
 }

package/dist/web/used-by-label.d.ts

@@ -1,6 +1,7 @@
 import type { OverviewRowView, OverviewUsageView } from "./overview-row.ts";
 type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
 export declare function variableLabelText(t: Translate, name: string, label: string | undefined): string;
+export declare function templateTitleText(t: Translate, title: string): string;
 export declare function templateTitle(t: Translate, row: Pick<OverviewRowView, "title" | "slug" | "kind">): string;
 export declare function usageParts(t: Translate, usage: OverviewUsageView): {
     readonly feature: string;

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

@@ -1,6 +1,5 @@
-import { EMPTY_VALUE_PLACEHOLDER } from "@cosmicdrift/kumiko-renderer/headless";
-// @runtime client
-import { DEFAULT_LAYOUT_SLUG } from "../constants.js";
+import { EMPTY_VALUE_PLACEHOLDER, pluralKey } from "@cosmicdrift/kumiko-renderer/headless";
+import { DEFAULT_LAYOUT_SLUG } from "./constants.js";
 // t() returns the key itself when no translation exists.
 function translateOrRaw(t, key, raw) {
     const translated = t(key);
@@ -11,11 +10,15 @@ export function variableLabelText(t, name, label) {
     return label === undefined ? name : translateOrRaw(t, label, label);
 }
 const NOTIFICATION_SLUG = /^([^:]+):notify:([^:]+)$/;
+// A seeded system template may store an i18n key as its title; plain text stays as typed.
+export function templateTitleText(t, title) {
+    return translateOrRaw(t, title, title);
+}
 // A seeded system mail has no stored title, so its notification label from the
 // owning feature names it; the slug stays the last resort.
 export function templateTitle(t, row) {
     if (row.title !== row.slug)
-        return row.title;
+        return templateTitleText(t, row.title);
     const match = row.kind === "mail" ? NOTIFICATION_SLUG.exec(row.slug) : null;
     if (match === null)
         return row.slug;
@@ -40,7 +43,9 @@ export function usedByLabel(t, row) {
         }
         return row.usedByCount === 0
             ? EMPTY_VALUE_PLACEHOLDER
-            : t("documentDesigner.usedBy.templates", { count: row.usedByCount });
+            : t(pluralKey("documentDesigner.usedBy.templates", row.usedByCount), {
+                count: row.usedByCount,
+            });
     }
     const first = row.usedBy[0];
     return first === undefined ? EMPTY_VALUE_PLACEHOLDER : usageLabel(t, first);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-document-designer",
-  "version": "0.377.0",
+  "version": "0.379.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>",
@@ -16,15 +16,15 @@
     "./web": {
       "types": "./dist/web/index.d.ts",
       "default": "./dist/web/index.js"
-    }
+    },
+    "./web/styles.css": "./src/web/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-bundled-features": "0.377.0",
-    "@cosmicdrift/kumiko-framework": "0.377.0",
-    "@cosmicdrift/kumiko-renderer": "0.377.0",
-    "@cosmicdrift/kumiko-renderer-puppeteer-client": "0.377.0",
-    "@cosmicdrift/kumiko-types": "0.377.0",
-    "pdfjs-dist": "6.3.289",
+    "@cosmicdrift/kumiko-bundled-features": "0.379.0",
+    "@cosmicdrift/kumiko-framework": "0.379.0",
+    "@cosmicdrift/kumiko-renderer": "0.379.0",
+    "@cosmicdrift/kumiko-renderer-puppeteer-client": "0.379.0",
+    "@cosmicdrift/kumiko-types": "0.379.0",
     "react": "^19.2.6"
   },
   "devDependencies": {
@@ -51,11 +51,13 @@
       "./web": {
         "types": "./dist/web/index.d.ts",
         "default": "./dist/web/index.js"
-      }
+      },
+      "./web/styles.css": "./src/web/styles.css"
     }
   },
   "files": [
     "dist",
+    "src/web/styles.css",
     "src/changes.json",
     "README.md",
     "LICENSE"

package/src/changes.json

@@ -1,4 +1,47 @@
 [
+  {
+    "version": "0.379.0",
+    "type": "fix",
+    "title": "Designer rails wrap instead of clipping",
+    "detail": "A rail section wraps its action below the heading instead of clipping it, a resource name without spaces wraps inside its row instead of running under \"Remove\" and its meta text takes its own line instead of an ellipsis, the footer no longer offers a test mail when send-test-status says none can be sent, and the header label placeholder reads \"e.g. Reminder\" instead of an incident example. In a narrow window (1024px beside the app sidebar) both rails share the left column so the page keeps its room, and the header leaves save and publish to the footer below 1280px so the template title stays readable."
+  },
+  {
+    "version": "0.379.0",
+    "type": "fix",
+    "title": "Long template names wrap in the template overview",
+    "detail": "In the template overview, a long template name such as \"Kündigungshinweis an den Betreiber\" now wraps to a second line instead of widening the first column. The overview fits at 1280 px again when billing-foundation templates are listed."
+  },
+  {
+    "version": "0.379.0",
+    "type": "improvement",
+    "title": "Template overview shows locked tenant overrides",
+    "detail": "Rows with lockedOverride and lockedOverrideI18nKey show the status text as a warning badge in the status column. The row action \"Remove own version\" calls the existing resetToSystem with the new overview field lockedOverrideId (the tenant row; one locale per click). The status shows a short label with the long sentence as tooltip."
+  },
+  {
+    "version": "0.378.0",
+    "type": "fix",
+    "title": "Mail preview fills the editor column",
+    "detail": "The preview frame (HTML and plain text) had a fixed height of 560px, so long mails were cut off mid-sentence with an empty grey area below. The frame now grows with the center column (at least 420px) and scrolls inside."
+  },
+  {
+    "version": "0.378.0",
+    "type": "breaking",
+    "title": "Designer screens are SystemAdmin-only unless the app passes access",
+    "detail": "The templates screen, layout, PDF and mail editors are visible to SystemAdmin only by default. createDocumentDesignerFeature takes an optional access rule whose roles are added.",
+    "migration": "Pass createDocumentDesignerFeature({ access: templateEditAccess(tenantEditable) }) with the same entries given to the template resolver when TenantAdmins edit templates."
+  },
+  {
+    "version": "0.378.0",
+    "type": "improvement",
+    "title": "Stylesheet export for the designer",
+    "detail": "\"@cosmicdrift/kumiko-document-designer/web/styles.css\" registers the designer's own Tailwind sources. Apps that embed the designer import it after the renderer stylesheet."
+  },
+  {
+    "version": "0.378.0",
+    "type": "fix",
+    "title": "Upload and test mail follow the server's capabilities",
+    "detail": "Upload is disabled with a hint when the files feature is not mounted, and the test mail button is disabled with a hint when the server has no email channel or no address for the user."
+  },
   {
     "version": "0.372.0",
     "type": "fix",

package/src/web/styles.css

@@ -0,0 +1,12 @@
+/* Tailwind v4 resolves relative @source paths against the REALPATH of the
+   imported CSS file, so only the package itself knows where its sources live
+   in every install layout (workspace, node_modules, isolated or pnpm stores);
+   a path from the renderer's stylesheet would point at a sibling that is not
+   there. `./` is this package's src/web, `../../dist` its compiled twin
+   (class names survive as string literals in the .js). An app imports this
+   file after `@cosmicdrift/kumiko-renderer/web/styles.css`. */
+@source "./**/*.{ts,tsx}";
+@source "../../dist/**/*.js";
+/* `tsc --build` emits compiled tests into dist in the monorepo; published dist has none. */
+@source not "./**/__tests__/**";
+@source not "../../dist/**/__tests__/**";

package/dist/i18n.d.ts

@@ -1,6 +0,0 @@
-type Localized = {
-    readonly en: string;
-    readonly de: string;
-};
-export declare const DOCUMENT_DESIGNER_I18N: Readonly<Record<string, Localized>>;
-export {};