@cosmicdrift/kumiko-document-designer 0.377.0 → 0.378.0

package/dist/constants.d.ts

@@ -9,6 +9,7 @@ export declare const PLATFORM_TEMPLATES_NAV_ID: "platform-templates";
 export declare const BRANDING_SCREEN_QN: "managed-pages:screen:branding-settings";
 export declare const BRANDING_QUERY_QN: "managed-pages:query:branding";
 export declare const USER_ME_QUERY_QN: "user:query:user:me";
+export declare const FILES_FEATURE_NAME: "files";
 export declare const PROFILE_FEATURE_NAME: "user-profile";
 export declare const PROFILE_SCREEN_ID: "profile";
 export declare const DEFAULT_LAYOUT_SLUG: "default";

package/dist/constants.js

@@ -12,6 +12,8 @@ export const BRANDING_SCREEN_QN = "managed-pages:screen:branding-settings";
 export const BRANDING_QUERY_QN = "managed-pages:query:branding";
 // Pinned like the branding names: the user features' constants are not exported to the web barrel.
 export const USER_ME_QUERY_QN = "user:query:user:me";
+// Pinned like the profile names: the framework's files constant is not exported to the web barrel.
+export const FILES_FEATURE_NAME = "files";
 export const PROFILE_FEATURE_NAME = "user-profile";
 export const PROFILE_SCREEN_ID = "profile";
 export const DEFAULT_LAYOUT_SLUG = "default";

package/dist/feature.d.ts

@@ -1,2 +1,6 @@
-import { type FeatureDefinition } from "@cosmicdrift/kumiko-framework/engine";
-export declare function createDocumentDesignerFeature(): FeatureDefinition;
+import { type FeatureDefinition, type RoleAccessRule } from "@cosmicdrift/kumiko-framework/engine";
+export type DocumentDesignerOptions = {
+    /** Roles besides SystemAdmin that see the tenant overview and the editors. Pass `templateEditAccess(tenantEditable)` of the template-resolver mount so the screens match the templates a tenant may edit. */
+    readonly access?: RoleAccessRule;
+};
+export declare function createDocumentDesignerFeature(options?: DocumentDesignerOptions): FeatureDefinition;

package/dist/feature.js

@@ -3,10 +3,10 @@ import { DOCUMENT_DESIGNER_FEATURE, LAYOUT_EDITOR_SCREEN_ID, MAIL_EDITOR_SCREEN_
 import { DOCUMENT_DESIGNER_I18N } from "./i18n.js";
 import { TEMPLATE_FACETS, templateColumns, templateRowActions } from "./list-definition.js";
 const OVERVIEW_QUERY = "template-resolver:query:overview";
-const TENANT_ROLES = ["TenantAdmin", "SystemAdmin"];
-export function createDocumentDesignerFeature() {
+export function createDocumentDesignerFeature(options = {}) {
+    const editorRoles = [...new Set(["SystemAdmin", ...(options.access?.roles ?? [])])];
     return defineFeature(DOCUMENT_DESIGNER_FEATURE, (r) => {
-        r.describe("Template overview and layout editor: lists the mail, PDF and layout templates of a tenant (platform admins see the system templates and how many tenants customised each) and edits the mail layout and the PDF letterhead in the browser. Mount after template-resolver and, for the branding rail, managed-pages. Client: `documentDesignerClient()`; admin-shell lists the navs with `includeDocumentDesigner`.");
+        r.describe("Template overview and layout editor: lists the mail, PDF and layout templates of a tenant (platform admins see the system templates and how many tenants customised each) and edits the mail layout and the PDF letterhead in the browser. Mount after template-resolver and, for the branding rail, managed-pages. Client: `documentDesignerClient()`; admin-shell lists the navs with `includeDocumentDesigner`. The tenant overview and the editors are for SystemAdmin only; the `access` option adds roles (normally `templateEditAccess(tenantEditable)` of the template-resolver mount), and the server still enforces per template which of them may save.");
         r.uiHints({
             displayLabel: "Documents · Template Designer",
             category: "content",
@@ -25,14 +25,14 @@ export function createDocumentDesignerFeature() {
             searchPlaceholder: i18nKey("documentDesigner.search"),
             pagination: "pages",
             defaultSort: { field: "modifiedAt", dir: "desc" },
-            access: { roles: access.roles(...TENANT_ROLES) },
+            access: { roles: access.roles(...editorRoles) },
         });
         r.nav({
             id: TEMPLATES_NAV_ID,
             label: "document-designer:nav.templates",
             icon: "file",
             screen: `${DOCUMENT_DESIGNER_FEATURE}:screen:${TEMPLATES_SCREEN_ID}`,
-            access: { roles: access.roles(...TENANT_ROLES) },
+            access: { roles: access.roles(...editorRoles) },
             order: 15,
         });
         r.screen({
@@ -62,7 +62,7 @@ export function createDocumentDesignerFeature() {
             renderer: { react: { __component: LAYOUT_EDITOR_SCREEN_ID } },
             description: "documentDesigner.screen.layoutEditor.description",
             dormant: true,
-            access: { roles: access.roles(...TENANT_ROLES) },
+            access: { roles: access.roles(...editorRoles) },
         });
         r.screen({
             id: PDF_TEMPLATE_EDITOR_SCREEN_ID,
@@ -70,7 +70,7 @@ export function createDocumentDesignerFeature() {
             renderer: { react: { __component: PDF_TEMPLATE_EDITOR_SCREEN_ID } },
             description: "Editor for one PDF template: edit the body, print a preview through the print service, review tenant customisations and export the template as a bundle.",
             dormant: true,
-            access: { roles: access.roles(...TENANT_ROLES) },
+            access: { roles: access.roles(...editorRoles) },
         });
         // kumiko-lint-ignore app-feature-structure Board-2/3 mail editor (placeholder rail, chip editors, live preview, test mail) has no declarative screen type
         r.screen({
@@ -79,7 +79,7 @@ export function createDocumentDesignerFeature() {
             renderer: { react: { __component: MAIL_EDITOR_SCREEN_ID } },
             description: "documentDesigner.screen.mailEditor.description",
             dormant: true,
-            access: { roles: access.roles(...TENANT_ROLES) },
+            access: { roles: access.roles(...editorRoles) },
         });
     });
 }

package/dist/i18n.js

@@ -397,6 +397,18 @@ export const DOCUMENT_DESIGNER_I18N = {
         en: "Save first, then upload.",
         de: "Erst speichern, dann hochladen.",
     },
+    "documentDesigner.mail.resource.noFilesFeature": {
+        en: "Uploads need the files feature, which this app has not mounted.",
+        de: "Uploads brauchen das Files-Feature, das diese App nicht eingebunden hat.",
+    },
+    "documentDesigner.mail.testMail.unavailable.noChannel": {
+        en: "Test mails need the email channel, which this app has not mounted.",
+        de: "Test-Mails brauchen den E-Mail-Kanal, den diese App nicht eingebunden hat.",
+    },
+    "documentDesigner.mail.testMail.unavailable.noAddress": {
+        en: "No email address is stored for you, so no test mail can be sent.",
+        de: "Für dich ist keine E-Mail-Adresse hinterlegt, daher kann keine Test-Mail gesendet werden.",
+    },
     "documentDesigner.mail.resource.inline": {
         en: "Inline",
         de: "Inline",

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { DEFAULT_TEMPLATE_LOCALES, DOCUMENT_DESIGNER_FEATURE, LAYOUT_EDITOR_SCREEN_ID, MAIL_EDITOR_SCREEN_ID, PDF_TEMPLATE_EDITOR_SCREEN_ID, PLATFORM_TEMPLATES_NAV_ID, PLATFORM_TEMPLATES_SCREEN_ID, TEMPLATE_EDITOR_SCREENS, TEMPLATES_NAV_ID, TEMPLATES_SCREEN_ID, type TemplateEditorKind, } from "./constants.ts";
-export { createDocumentDesignerFeature } from "./feature.ts";
+export { createDocumentDesignerFeature, type DocumentDesignerOptions } from "./feature.ts";

package/dist/web/i18n.js

@@ -35,10 +35,9 @@ export const documentDesignerTranslations = {
         "documentDesigner.pdfUnavailableNoReason": "PDF generation is not available.",
         "documentDesigner.placeholders.layoutHint": 'Images travel with the PDF as data URIs. Header and footer come from the layout "{layout}" and are the same on every page.',
         "documentDesigner.preview.loading": "Generating PDF...",
-        "documentDesigner.preview.pageOf": "Page {page} of {pages}",
-        "documentDesigner.preview.renderFailed": "The PDF could not be displayed.",
         "documentDesigner.preview.stale": "The preview is out of date. Generate the PDF again.",
         "documentDesigner.resources.empty": "No images yet.",
+        "documentDesigner.resources.noFilesFeature": "Uploads need the files feature, which this app has not mounted.",
         "documentDesigner.resources.saveFirst": "Save the template first, then you can upload images.",
         "documentDesigner.resources.title": "Resources",
         "documentDesigner.resources.upload": "+ Upload",
@@ -108,10 +107,9 @@ export const documentDesignerTranslations = {
         "documentDesigner.pdfUnavailableNoReason": "PDF-Erzeugung nicht verfügbar.",
         "documentDesigner.placeholders.layoutHint": 'Bilder gehen im PDF als Data-URI mit. Kopf- und Fußzeile kommen aus dem Layout "{layout}" und sind auf allen Seiten gleich.',
         "documentDesigner.preview.loading": "PDF wird erzeugt ...",
-        "documentDesigner.preview.pageOf": "Seite {page} von {pages}",
-        "documentDesigner.preview.renderFailed": "Das PDF konnte nicht angezeigt werden.",
         "documentDesigner.preview.stale": "Die Vorschau ist veraltet. Bitte das PDF neu erzeugen.",
         "documentDesigner.resources.empty": "Noch keine Bilder.",
+        "documentDesigner.resources.noFilesFeature": "Uploads brauchen das Files-Feature, das diese App nicht eingebunden hat.",
         "documentDesigner.resources.saveFirst": "Speichere die Vorlage zuerst, danach können Bilder hochgeladen werden.",
         "documentDesigner.resources.title": "Ressourcen",
         "documentDesigner.resources.upload": "+ Hochladen",
@@ -181,10 +179,9 @@ export const documentDesignerTranslations = {
         "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.noFilesFeature": "Las subidas necesitan la función de archivos, que esta app no ha montado.",
         "documentDesigner.resources.saveFirst": "Guarda primero la plantilla; después podrás subir imágenes.",
         "documentDesigner.resources.title": "Recursos",
         "documentDesigner.resources.upload": "+ Subir",

package/dist/web/layout-editor-body.js

@@ -143,8 +143,8 @@ export function LayoutEditorBody({ kind, slug, isSystemAdmin, source, overviewRo
                 };
     const accentColor = branding.data?.accentColor ?? "";
     const showAccentLine = isMail && appearanceEditable && appearance.accentLine === "branding" && isHexColor(accentColor);
-    // A layout region has no per-mail variables, so a steps block there could never show a stage.
-    const blocks = (isMail ? MAIL_DOCUMENT_BLOCKS : PDF_DOCUMENT_BLOCKS).filter((block) => block !== "steps");
+    // A layout region has no per-mail variables, so a steps block there could never show a stage and an images block no photos.
+    const blocks = (isMail ? MAIL_DOCUMENT_BLOCKS : PDF_DOCUMENT_BLOCKS).filter((block) => block !== "steps" && block !== "images");
     // The layout's "logo" resource is the branding logo, so the editor shows it instead of a chip.
     const logoFile = branding.data?.logoFile ?? "";
     const resourcePreviews = logoFile === ""

package/dist/web/mail-editor-body.js

@@ -18,6 +18,7 @@ import { MailPreviewMode } from "./mail-preview.js";
 import { AttachmentSection, ChromeSection, PropertiesSection, UsageSection, } from "./mail-right-rail.js";
 import { UploadModal } from "./mail-upload-modal.js";
 import { VersionsSection } from "./mail-versions.js";
+import { useFilesCapability } from "./use-files-capability.js";
 import { useInsertTargets } from "./use-insert-targets.js";
 import { useMailPersistence } from "./use-mail-persistence.js";
 import { useOverviewRows } from "./use-overview-rows.js";
@@ -66,6 +67,7 @@ export function MailEditorBody(props) {
     });
     const testMail = useTestMail();
     const own = useOwnAddress();
+    const filesAvailable = useFilesCapability();
     const resourceRemove = useMutation(TemplateResolverHandlers.resourceRemove);
     const layouts = useOverviewRows("mail-layout");
     const pdfTemplates = useOverviewRows("document-pdf");
@@ -175,7 +177,7 @@ export function MailEditorBody(props) {
     return (_jsxs(EditorFrame, { testId: "document-designer-mail-editor", children: [_jsx(EditorHeader, { title: title, stored: row === null ? null : { status: row.status, version: row.version }, actions: { busy, canSave, canPublish, onSave: saveDraft, onPublish: publish }, children: _jsx(EditorModeSwitch, { testIdPrefix: "mail", mode: mode, onMode: setMode }) }), mode === "edit" && (_jsx(MailOriginBar, { row: row, systemVersion: props.systemVersion, locale: locale, isSystemAdmin: isSystemAdmin, creating: creating, controls: controls, onReload: () => {
                     setResetError(null);
                     void onReload();
-                }, onResetError: setResetError })), testMail.state.kind === "sent" && (_jsx(Banner, { variant: "primary", testId: "mail-test-sent", children: t("documentDesigner.mail.testMail.sent", { subject: testMail.state.subject }) })), testMail.state.kind === "error" && (_jsx(Banner, { variant: "error", testId: "mail-test-error", children: testMail.state.text })), resetError !== null && (_jsx(Banner, { variant: "error", testId: "mail-reset-error", children: resetError })), resourceError !== null && (_jsx(Banner, { variant: "error", testId: "mail-resource-error", children: resourceError })), mode === "edit" ? (_jsx(EditorBody, { left: _jsxs(_Fragment, { children: [_jsx(PlaceholderSection, { validation: railValidation, onInsert: insert.insertPlaceholder }), _jsx(SystemPlaceholderSection, { validation: railValidation, onInsert: insert.insertPlaceholder }), _jsx(ResourceSection, { resources: resources, pdfTitles: pdfTitles, canUpload: uploadTemplateId !== null, onUpload: () => setUploadOpen(true), onInsert: insert.insertResource, onRemove: (key) => setDialog({ kind: "remove", key }) })] }), center: locked ? (_jsx(MissingLocaleCanvas, { slug: slug, locale: locale, fallbackLocale: props.fallbackLocale, copyScope: isSystemAdmin ? "system" : "tenant", onCreateBlank: () => setCreating(true), onCopied: () => void onReload() })) : (_jsx(MailEditCenter, { draft: draft, vocabulary: vocabulary, resourcePreviews: resourcePreviews, insert: insert, readOnly: false, fieldErrors: fieldErrors, onChange: update }, editorEpoch)), right: _jsxs(_Fragment, { children: [_jsx(PropertiesSection, { slug: slug, draft: draft, layouts: layouts.rows, onChange: update }), _jsx(ChromeSection, { draft: draft, vocabulary: vocabulary, insert: insert, onChange: update }), _jsx(AttachmentSection, { attachments: attachments, pdfTitles: pdfTitles, canEdit: uploadTemplateId !== null, onAddPdf: () => setPdfOpen(true), onRemove: (key) => setDialog({ kind: "remove", key }) }), _jsx(UsageSection, { slug: slug }), _jsx(VersionsSection, { rowId: row?.id ?? null, currentVersion: row?.version ?? 0, currentStatus: row?.status ?? "draft" })] }) })) : (_jsx(MailPreviewMode, { payload: {
+                }, onResetError: setResetError })), testMail.state.kind === "sent" && (_jsx(Banner, { variant: "primary", testId: "mail-test-sent", children: t("documentDesigner.mail.testMail.sent", { subject: testMail.state.subject }) })), testMail.state.kind === "error" && (_jsx(Banner, { variant: "error", testId: "mail-test-error", children: testMail.state.text })), resetError !== null && (_jsx(Banner, { variant: "error", testId: "mail-reset-error", children: resetError })), resourceError !== null && (_jsx(Banner, { variant: "error", testId: "mail-resource-error", children: resourceError })), mode === "edit" ? (_jsx(EditorBody, { left: _jsxs(_Fragment, { children: [_jsx(PlaceholderSection, { validation: railValidation, onInsert: insert.insertPlaceholder }), _jsx(SystemPlaceholderSection, { validation: railValidation, onInsert: insert.insertPlaceholder }), _jsx(ResourceSection, { resources: resources, pdfTitles: pdfTitles, canUpload: uploadTemplateId !== null, filesAvailable: filesAvailable, onUpload: () => setUploadOpen(true), onInsert: insert.insertResource, onRemove: (key) => setDialog({ kind: "remove", key }) })] }), center: locked ? (_jsx(MissingLocaleCanvas, { slug: slug, locale: locale, fallbackLocale: props.fallbackLocale, copyScope: isSystemAdmin ? "system" : "tenant", onCreateBlank: () => setCreating(true), onCopied: () => void onReload() })) : (_jsx(MailEditCenter, { draft: draft, vocabulary: vocabulary, resourcePreviews: resourcePreviews, insert: insert, readOnly: false, fieldErrors: fieldErrors, onChange: update }, editorEpoch)), right: _jsxs(_Fragment, { children: [_jsx(PropertiesSection, { slug: slug, draft: draft, layouts: layouts.rows, onChange: update }), _jsx(ChromeSection, { draft: draft, vocabulary: vocabulary, insert: insert, onChange: update }), _jsx(AttachmentSection, { attachments: attachments, pdfTitles: pdfTitles, canEdit: uploadTemplateId !== null, onAddPdf: () => setPdfOpen(true), onRemove: (key) => setDialog({ kind: "remove", key }) }), _jsx(UsageSection, { slug: slug }), _jsx(VersionsSection, { rowId: row?.id ?? null, currentVersion: row?.version ?? 0, currentStatus: row?.status ?? "draft" })] }) })) : (_jsx(MailPreviewMode, { payload: {
                     slug,
                     kind: "mail",
                     locale,
@@ -184,6 +186,7 @@ export function MailEditorBody(props) {
                     variableSchema,
                     ...(picked !== null && { variables: picked }),
                 }, picked: picked, onPick: setPicked, validation: validation ?? null, slug: slug, locale: locale, fromName: settled.senderName, own: own, origin: origin, controls: controls, testMail: {
+                    availability: testMail.availability,
                     pending: testMail.pending,
                     onSend: sendTestMail,
                     includeAttachments,

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

@@ -13,10 +13,11 @@ export declare function SystemPlaceholderSection({ validation, onInsert, idPrefi
     /** Placeholders the layout fills in, so a template that never uses them is fine. */
     readonly isLayoutOwned?: (name: string) => boolean;
 }): ReactNode;
-export declare function ResourceSection({ resources, pdfTitles, canUpload, onUpload, onInsert, onRemove, }: {
+export declare function ResourceSection({ resources, pdfTitles, canUpload, filesAvailable, onUpload, onInsert, onRemove, }: {
     readonly resources: readonly LinkedResourceView[];
     readonly pdfTitles: ReadonlyMap<string, string>;
     readonly canUpload: boolean;
+    readonly filesAvailable: boolean;
     readonly onUpload: () => void;
     readonly onInsert: (key: string) => void;
     readonly onRemove: (key: string) => void;

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

@@ -47,10 +47,10 @@ function resourceRow(t, resource, pdfTitles) {
             };
     }
 }
-export function ResourceSection({ resources, pdfTitles, canUpload, onUpload, onInsert, onRemove, }) {
+export function ResourceSection({ resources, pdfTitles, canUpload, filesAvailable, onUpload, onInsert, onRemove, }) {
     const t = useTranslation();
     const { Button } = usePrimitives();
-    return (_jsxs(RailSection, { title: t("documentDesigner.mail.resource.title"), testId: "mail-editor-resources", action: _jsx(Button, { variant: "link", disabled: !canUpload, onClick: onUpload, testId: "mail-resource-upload-open", children: t("documentDesigner.mail.resource.upload") }), children: [!canUpload && _jsx(RailHint, { children: t("documentDesigner.mail.resource.saveFirst") }), resources.map((resource) => {
+    return (_jsxs(RailSection, { title: t("documentDesigner.mail.resource.title"), testId: "mail-editor-resources", action: _jsx(Button, { variant: "link", disabled: !canUpload || !filesAvailable, onClick: onUpload, testId: "mail-resource-upload-open", children: t("documentDesigner.mail.resource.upload") }), children: [!filesAvailable && _jsx(RailHint, { children: t("documentDesigner.mail.resource.noFilesFeature") }), filesAvailable && !canUpload && (_jsx(RailHint, { children: t("documentDesigner.mail.resource.saveFirst") })), resources.map((resource) => {
                 const row = resourceRow(t, resource, pdfTitles);
                 return (_jsx(RailRow, { testId: "mail-resource-row", symbol: row.symbol, label: row.label, trailing: row.meta, action: _jsx(Button, { variant: "danger-ghost", size: "sm", onClick: () => onRemove(resource.key), testId: `mail-resource-remove-${resource.key}`, children: t("documentDesigner.mail.resource.remove") }), ...(resource.kind === "image" && { onPress: () => onInsert(resource.key) }) }, resource.key));
             }), _jsx(RailHint, { children: t("documentDesigner.mail.resource.hint") })] }));

package/dist/web/mail-preview-side.d.ts

@@ -1,7 +1,9 @@
 import { type ReactNode } from "react";
 import type { MailPreview, MailValidation, PickedValues } from "./mail-types.ts";
 import type { OwnAddress } from "./use-own-address.ts";
+import type { TestMailAvailability } from "./use-test-mail.ts";
 export type TestMailControls = {
+    readonly availability: TestMailAvailability;
     readonly pending: boolean;
     readonly onSend: () => void;
     readonly includeAttachments: boolean;

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

@@ -77,5 +77,7 @@ export function PreviewSide({ preview, validation, slug, locale, own, testMail,
     const t = useTranslation();
     const { Button, Field, Input, Text } = usePrimitives();
     const hasAttachments = preview?.attachments.some((a) => a.kind !== "inline") === true;
-    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: onPick }), 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") })] })] }));
+    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: onPick }), 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 || !testMail.availability.canSend, loading: testMail.pending, onClick: testMail.onSend, testId: "mail-test-send", children: t("documentDesigner.mail.testMail.send") })] }), testMail.availability.reason !== null && (_jsx(RailHint, { children: t(testMail.availability.reason === "no_channel"
+                            ? "documentDesigner.mail.testMail.unavailable.noChannel"
+                            : "documentDesigner.mail.testMail.unavailable.noAddress") })), _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-preview.js

@@ -23,7 +23,7 @@ function HeadRow({ label, children, }) {
 function MailFrame({ preview, format, width, fromName, recipient, }) {
     const t = useTranslation();
     const attachments = preview.attachments.flatMap((a) => attachmentText(t, a) ?? []);
-    return (_jsxs("div", { className: "mx-auto flex w-full max-w-[680px] flex-col border bg-card shadow-md", "data-testid": "mail-preview-frame", children: [_jsxs("div", { className: "grid grid-cols-[80px_minmax(0,1fr)] gap-y-1 border-b px-5 py-3.5 text-sm", children: [_jsx(HeadRow, { label: t("documentDesigner.mail.preview.from"), children: _jsx("span", { "data-testid": "mail-preview-from", children: fromName === "" ? t("documentDesigner.mail.props.senderDefault") : fromName }) }), recipient !== null && (_jsx(HeadRow, { label: t("documentDesigner.mail.preview.to"), children: _jsx("span", { "data-testid": "mail-preview-to", children: recipient }) })), _jsx(HeadRow, { label: t("documentDesigner.mail.meta.subject"), children: _jsx("span", { className: "font-medium", "data-testid": "mail-preview-subject", children: preview.subject ?? "" }) }), attachments.length > 0 && (_jsx(HeadRow, { label: t("documentDesigner.mail.preview.attachments"), children: _jsx("span", { className: "flex flex-col items-start gap-1", "data-testid": "mail-preview-attachments", children: attachments.map((line) => (_jsx("span", { className: "rounded border bg-muted px-2 py-0.5 text-xs", children: line }, line))) }) }))] }), format === "html" ? (_jsx("iframe", { title: t("documentDesigner.mail.preview.frameTitle"), sandbox: "", srcDoc: preview.displayHtml ?? preview.html, className: `h-[560px] border-0 bg-background ${width === "mobile" ? "w-[375px] self-center" : "w-full"}`, "data-testid": "mail-preview-iframe" })) : (_jsx("pre", { className: "h-[560px] overflow-auto whitespace-pre-wrap p-4 font-mono text-sm", "data-testid": "mail-preview-text", children: preview.text ?? "" }))] }));
+    return (_jsxs("div", { className: "mx-auto flex min-h-0 w-full max-w-[680px] flex-1 flex-col border bg-card shadow-md", "data-testid": "mail-preview-frame", children: [_jsxs("div", { className: "grid grid-cols-[80px_minmax(0,1fr)] gap-y-1 border-b px-5 py-3.5 text-sm", children: [_jsx(HeadRow, { label: t("documentDesigner.mail.preview.from"), children: _jsx("span", { "data-testid": "mail-preview-from", children: fromName === "" ? t("documentDesigner.mail.props.senderDefault") : fromName }) }), recipient !== null && (_jsx(HeadRow, { label: t("documentDesigner.mail.preview.to"), children: _jsx("span", { "data-testid": "mail-preview-to", children: recipient }) })), _jsx(HeadRow, { label: t("documentDesigner.mail.meta.subject"), children: _jsx("span", { className: "font-medium", "data-testid": "mail-preview-subject", children: preview.subject ?? "" }) }), attachments.length > 0 && (_jsx(HeadRow, { label: t("documentDesigner.mail.preview.attachments"), children: _jsx("span", { className: "flex flex-col items-start gap-1", "data-testid": "mail-preview-attachments", children: attachments.map((line) => (_jsx("span", { className: "rounded border bg-muted px-2 py-0.5 text-xs", children: line }, line))) }) }))] }), format === "html" ? (_jsx("iframe", { title: t("documentDesigner.mail.preview.frameTitle"), sandbox: "", srcDoc: preview.displayHtml ?? preview.html, className: `min-h-[420px] flex-1 border-0 bg-background ${width === "mobile" ? "w-[375px] self-center" : "w-full"}`, "data-testid": "mail-preview-iframe" })) : (_jsx("pre", { className: "min-h-[420px] flex-1 overflow-auto whitespace-pre-wrap p-4 font-mono text-sm", "data-testid": "mail-preview-text", children: preview.text ?? "" }))] }));
 }
 // The preview mail goes to the example recipient of the sample values, not to the test-mail address.
 function recipientOf(preview, own) {

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

@@ -119,4 +119,8 @@ export type UpsertResponse = {
 export type SendTestResponse = {
     readonly subject: string;
 };
+export type SendTestStatus = {
+    readonly canSend: boolean;
+    readonly reason: "no_channel" | "no_address" | null;
+};
 export type PickedValues = Readonly<Record<string, unknown>>;

package/dist/web/page-canvas.d.ts

@@ -12,6 +12,7 @@ export type PageCanvasProps = {
     readonly systemVariables: readonly string[];
     readonly systemLabels: Readonly<Record<string, string>>;
     readonly variableNames: readonly string[];
+    readonly imageVariables: readonly string[];
     readonly resourcePreviews: Readonly<Record<string, DocumentResourcePreview>>;
     readonly onEditorReady: (handle: DocumentEditorHandle | null) => void;
     readonly resourceSrc?: (key: string) => string | undefined;

package/dist/web/page-canvas.js

@@ -44,5 +44,5 @@ export function PageCanvas(props) {
         }
     }, [meta.margins, hasFooter]);
     const renderPaper = (editable) => (_jsxs("div", { className: "flex w-full flex-col items-center gap-2", children: [_jsxs("div", { "data-testid": "document-designer-page", className: cn("flex min-h-[1000px] w-full flex-col bg-card shadow-md", PAGE_WIDTH_CLASSES[`${meta.pageFormat}-${meta.orientation}`]), children: [showLetterhead && props.regions !== null && (_jsx(HeaderBand, { html: props.regions.header, systemLabels: props.systemLabels, resourceSrc: props.resourceSrc, caption: fromLayout })), _jsxs("div", { ref: applyMargins, className: cn("flex min-h-0 flex-1 flex-col pr-(--page-margin-right) pb-(--page-margin-bottom) pl-(--page-margin-left)", !showLetterhead && "pt-(--page-margin-top)"), children: [_jsxs("div", { className: "relative my-2 min-h-0 flex-1 border border-dashed border-primary/40 p-2 pt-5", "data-testid": "document-designer-content-area", children: [_jsx("span", { className: "absolute left-2 top-0.5 text-[10px] uppercase tracking-wide text-primary", children: t("documentDesigner.editor.region.content") }), editable] }), showRegions && props.regions !== null && (_jsxs(_Fragment, { children: [_jsx(RegionBlock, { html: props.regions.signature, systemLabels: props.systemLabels, resourceSrc: props.resourceSrc, caption: regionCaption("signature") }), _jsx(RegionBlock, { html: props.regions.footer, systemLabels: props.systemLabels, resourceSrc: props.resourceSrc, caption: regionCaption("footer") })] }))] })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: t("documentDesigner.canvas.caption", { format: meta.pageFormat }) })] }));
-    return (_jsx("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", "data-testid": "pdf-editor-center", children: _jsx(DocumentContentEditor, { id: "document-designer-content", value: props.content, onChange: props.onContentChange, variables: props.variableNames, readOnly: false, blocks: PDF_DOCUMENT_BLOCKS, variableLabels: props.variableLabels, systemVariables: props.systemVariables, resourcePreviews: props.resourcePreviews, chrome: "canvas", renderPaper: renderPaper, onEditorReady: props.onEditorReady }) }));
+    return (_jsx("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", "data-testid": "pdf-editor-center", children: _jsx(DocumentContentEditor, { id: "document-designer-content", value: props.content, onChange: props.onContentChange, variables: props.variableNames, imageVariables: props.imageVariables, readOnly: false, blocks: PDF_DOCUMENT_BLOCKS, variableLabels: props.variableLabels, systemVariables: props.systemVariables, resourcePreviews: props.resourcePreviews, chrome: "canvas", renderPaper: renderPaper, onEditorReady: props.onEditorReady }) }));
 }

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

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

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

@@ -9,8 +9,8 @@ export function visibleSystemPlaceholders(names) {
     return names.filter((name) => !HIDDEN_SYSTEM_PLACEHOLDERS.has(name));
 }
 const IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"];
-export function PdfResourceSection({ resourceKeys, canUpload, layoutName, onInsert, onUpload, }) {
+export function PdfResourceSection({ resourceKeys, canUpload, filesAvailable, layoutName, onInsert, onUpload, }) {
     const t = useTranslation();
     const { Button } = usePrimitives();
-    return (_jsxs(RailSection, { title: t("documentDesigner.resources.title"), testId: "pdf-editor-resources", children: [resourceKeys.length === 0 && _jsx(RailRow, { label: t("documentDesigner.resources.empty") }), resourceKeys.map((key) => (_jsx(RailRow, { testId: `pdf-resource-${key}`, symbol: "\u25A3", label: key, onPress: () => onInsert(key) }, key))), _jsx(RailField, { children: canUpload ? (_jsx(UploadZone, { multiple: false, accept: IMAGE_TYPES, title: t("documentDesigner.resources.upload"), onUpload: onUpload, testId: "document-designer-upload" })) : (_jsx(Button, { variant: "secondary", size: "sm", disabled: true, children: t("documentDesigner.resources.upload") })) }), !canUpload && _jsx(RailHint, { children: t("documentDesigner.resources.saveFirst") }), _jsx(RailHint, { children: t("documentDesigner.placeholders.layoutHint", { layout: layoutName }) })] }));
+    return (_jsxs(RailSection, { title: t("documentDesigner.resources.title"), testId: "pdf-editor-resources", children: [resourceKeys.length === 0 && _jsx(RailRow, { label: t("documentDesigner.resources.empty") }), resourceKeys.map((key) => (_jsx(RailRow, { testId: `pdf-resource-${key}`, symbol: "\u25A3", label: key, onPress: () => onInsert(key) }, key))), _jsx(RailField, { children: canUpload && filesAvailable ? (_jsx(UploadZone, { multiple: false, accept: IMAGE_TYPES, title: t("documentDesigner.resources.upload"), onUpload: onUpload, testId: "document-designer-upload" })) : (_jsx(Button, { variant: "secondary", size: "sm", disabled: true, children: t("documentDesigner.resources.upload") })) }), !filesAvailable && _jsx(RailHint, { children: t("documentDesigner.resources.noFilesFeature") }), filesAvailable && !canUpload && (_jsx(RailHint, { children: t("documentDesigner.resources.saveFirst") })), _jsx(RailHint, { children: t("documentDesigner.placeholders.layoutHint", { layout: layoutName }) })] }));
 }

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

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // @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";
@@ -17,16 +17,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 +69,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 +138,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 +289,7 @@ export function PdfTemplateEditor({ slug, locale: requestedLocale, onLocaleChang
         ? null
         : {
             ...validation,
+            variables,
             systemPlaceholders: visibleSystemPlaceholders(validation.systemPlaceholders),
         };
     const layoutFills = (name) => layout !== null &&
@@ -302,7 +336,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/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,8 @@
+// @runtime client
+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-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,17 @@
 // @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 +28,5 @@ export function useTestMail() {
             });
         }
     };
-    return { state, pending: sendTest.pending, send };
+    return { availability, state, pending: sendTest.pending, send };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-document-designer",
-  "version": "0.377.0",
+  "version": "0.378.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.378.0",
+    "@cosmicdrift/kumiko-framework": "0.378.0",
+    "@cosmicdrift/kumiko-renderer": "0.378.0",
+    "@cosmicdrift/kumiko-renderer-puppeteer-client": "0.378.0",
+    "@cosmicdrift/kumiko-types": "0.378.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,29 @@
 [
+  {
+    "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/web/pdf-preview.d.ts

@@ -1,4 +0,0 @@
-import { type ReactNode } from "react";
-export declare function PdfPreview({ pdfBase64 }: {
-    readonly pdfBase64: string;
-}): ReactNode;

package/dist/web/pdf-preview.js

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