@cosmicdrift/kumiko-bundled-features 0.362.0 → 0.364.0

package/dist/template-resolver/template-validation.js

@@ -0,0 +1,173 @@
+import * as z from "zod";
+import { withParsedDocument } from "./document-sanitizer.js";
+import { isDocumentPlaceholderHref, isDocumentReferenceName } from "./document-schema.js";
+export const SYSTEM_PLACEHOLDERS = new Set([
+    "tenantName",
+    "signature",
+    "imprint",
+    "unsubscribeUrl",
+]);
+const PAGE_PLACEHOLDERS = ["page", "pages"];
+const PAGED_KINDS = new Set(["document-pdf", "pdf-layout"]);
+export function systemPlaceholdersFor(kind) {
+    return PAGED_KINDS.has(kind)
+        ? new Set([...SYSTEM_PLACEHOLDERS, ...PAGE_PLACEHOLDERS])
+        : SYSTEM_PLACEHOLDERS;
+}
+const BASE_RESOURCE_KEYS = ["logo"];
+// Mirrors TemplateVariableDef: a stored or draft schema keeps its label and example, which the
+// preview uses as sample values.
+const variableCommon = {
+    label: z.string().optional(),
+    required: z.boolean().optional(),
+};
+const textLikeExample = z.string().optional();
+const scalarVariableSchema = z.discriminatedUnion("type", [
+    z.object({ ...variableCommon, type: z.literal("text"), example: textLikeExample }),
+    z.object({ ...variableCommon, type: z.literal("link"), example: textLikeExample }),
+    z.object({ ...variableCommon, type: z.literal("richText"), example: textLikeExample }),
+    z.object({
+        ...variableCommon,
+        type: z.literal("money"),
+        example: z
+            .union([z.number(), z.object({ amount: z.number(), currency: z.string() })])
+            .optional(),
+    }),
+    z.object({ ...variableCommon, type: z.literal("date"), example: textLikeExample }),
+]);
+const variableDefSchema = z.union([
+    scalarVariableSchema,
+    z.object({
+        ...variableCommon,
+        type: z.literal("list"),
+        item: z.record(z.string(), scalarVariableSchema),
+        example: z.array(z.record(z.string(), z.unknown())).optional(),
+    }),
+]);
+// A stored variableSchema value is either a bare string (legacy "this is a text
+// variable") or a TemplateVariableDef object; anything else is not declared and
+// therefore shows up as an unknown placeholder instead of being guessed at.
+function toVariableDef(raw) {
+    if (typeof raw === "string")
+        return { type: "text" };
+    const parsed = variableDefSchema.safeParse(raw);
+    return parsed.success ? parsed.data : null;
+}
+export function resolveTemplateVariables(registry, slug, variableSchema) {
+    const declared = registry.getAllNotifications().get(slug)?.variables;
+    return declared ?? variablesFromSchema(variableSchema);
+}
+export function variablesFromSchema(variableSchema) {
+    const variables = {};
+    for (const [name, raw] of Object.entries(variableSchema)) {
+        const def = toVariableDef(raw);
+        if (def !== null)
+            variables[name] = def;
+    }
+    return variables;
+}
+function rootName(name) {
+    return name.split(".")[0] ?? name;
+}
+function listItemFields(variables, listName) {
+    const def = listName !== null && Object.hasOwn(variables, listName) ? variables[listName] : undefined;
+    return def?.type === "list" ? def.item : {};
+}
+function isKnownName(name, scope, itemFields) {
+    const { variables } = scope;
+    const root = rootName(name);
+    if (Object.hasOwn(itemFields, name) || Object.hasOwn(itemFields, root)) {
+        return { known: true, used: "" };
+    }
+    if (scope.systemPlaceholders.has(root))
+        return { known: true, used: "" };
+    if (Object.hasOwn(variables, name))
+        return { known: true, used: name };
+    if (Object.hasOwn(variables, root))
+        return { known: true, used: root };
+    return { known: false, used: "" };
+}
+function recordName(name, itemFields, scope) {
+    const resolution = isKnownName(name, scope, itemFields);
+    if (!resolution.known)
+        scope.unknown.add(name);
+    else if (resolution.used !== "")
+        scope.used.add(resolution.used);
+}
+function enclosingEachName(element) {
+    return element.closest("tr[data-each]")?.getAttribute("data-each") ?? null;
+}
+function scanBodyPlaceholders(body, scope) {
+    withParsedDocument(body, (root) => {
+        for (const element of Array.from(root.querySelectorAll("tr[data-each]"))) {
+            const listName = element.getAttribute("data-each") ?? "";
+            const def = Object.hasOwn(scope.variables, listName) ? scope.variables[listName] : undefined;
+            if (def?.type === "list")
+                scope.used.add(listName);
+            else
+                scope.unknown.add(listName);
+        }
+        for (const element of Array.from(root.querySelectorAll("span[data-variable], a[href], img[data-resource]"))) {
+            const itemFields = listItemFields(scope.variables, enclosingEachName(element));
+            const tag = element.tagName.toLowerCase();
+            if (tag === "span") {
+                recordName(element.getAttribute("data-variable") ?? "", itemFields, scope);
+            }
+            else if (tag === "a") {
+                const href = element.getAttribute("href") ?? "";
+                if (isDocumentPlaceholderHref(href))
+                    recordName(href.slice(2, -2), itemFields, scope);
+            }
+            else {
+                const key = element.getAttribute("data-resource") ?? "";
+                if (!scope.resourceKeys.has(key))
+                    scope.unknownResources.add(key);
+            }
+        }
+    });
+}
+const HANDLEBARS_EXPRESSION = /\{\{([^{}]*)\}\}/g;
+// Meta text supports only plain `{{name}}` / `{{name.field}}`; every other
+// Handlebars construct is reported as unknown so it can never reach the compiler.
+function scanMetaPlaceholders(text, scope) {
+    const leftover = text.replace(HANDLEBARS_EXPRESSION, (_match, inner) => {
+        const name = inner.trim();
+        if (isDocumentReferenceName(name))
+            recordName(name, {}, scope);
+        else
+            scope.unknown.add(`{{${inner}}}`);
+        return "";
+    });
+    if (/[{}]/.test(leftover))
+        scope.unknown.add("{");
+}
+function metaTexts(meta) {
+    if (meta === null || !("subject" in meta))
+        return [];
+    return [meta.subject, ...(meta.previewText === undefined ? [] : [meta.previewText])];
+}
+export function validateTemplatePlaceholders(input) {
+    const scope = {
+        variables: input.variables,
+        systemPlaceholders: systemPlaceholdersFor(input.kind),
+        resourceKeys: new Set([...BASE_RESOURCE_KEYS, ...(input.resourceKeys ?? [])]),
+        used: new Set(),
+        unknown: new Set(),
+        unknownResources: new Set(),
+    };
+    scanBodyPlaceholders(input.body, scope);
+    for (const text of metaTexts(input.meta))
+        scanMetaPlaceholders(text, scope);
+    const missingRequired = Object.entries(input.variables)
+        .filter(([name, def]) => def.required === true && !scope.used.has(name))
+        .map(([name]) => name);
+    return {
+        unknown: [...scope.unknown].sort(),
+        missingRequired: missingRequired.sort(),
+        used: [...scope.used].sort(),
+        unknownResources: [...scope.unknownResources].sort(),
+    };
+}
+export function hasPlaceholderProblems(validation) {
+    return validation.unknown.length > 0 || validation.missingRequired.length > 0;
+}

package/dist/template-resolver/testing.js

@@ -37,7 +37,7 @@ export async function assertConsumerHandlesNotFound(consumer, opts) {
         await consumer.resolve({
             tenantId,
             slug,
-            kind: "mail-html",
+            kind: "mail",
             locale: "de",
         });
     }
@@ -60,7 +60,7 @@ export async function assertConsumerRespectsLocaleFallback(consumer, opts) {
     await seedTemplate(db, {
         tenantId: SYSTEM_TENANT_ID,
         slug,
-        kind: "notification",
+        kind: "document-pdf",
         locale: FALLBACK_LOCALE,
         scope: "system",
         content: "conformance-fallback-content",
@@ -68,7 +68,7 @@ export async function assertConsumerRespectsLocaleFallback(consumer, opts) {
     const result = await consumer.resolve({
         tenantId,
         slug,
-        kind: "notification",
+        kind: "document-pdf",
         locale: "tr",
     });
     if (result.locale !== FALLBACK_LOCALE) {
@@ -89,7 +89,7 @@ export async function assertConsumerHandlesMissingResourceKeys(consumer, opts) {
     await seedTemplate(db, {
         tenantId: SYSTEM_TENANT_ID,
         slug,
-        kind: "mail-html",
+        kind: "mail",
         locale: "de",
         scope: "system",
         linkedResources: { logo: "file_missing" },
@@ -97,7 +97,7 @@ export async function assertConsumerHandlesMissingResourceKeys(consumer, opts) {
     const template = await consumer.resolve({
         tenantId,
         slug,
-        kind: "mail-html",
+        kind: "mail",
         locale: "de",
     });
     try {

package/dist/template-resolver/user-content-table.d.ts

@@ -49,26 +49,29 @@ export declare const userContentEntryEntity: import("@cosmicdrift/kumiko-types/f
     kind: {
         readonly type: "select";
         readonly description?: string;
-        readonly options: readonly ["notification", "mail-html", "document-pdf", "image-snapshot", "text-block", "ai-prompt"];
+        readonly options: readonly ["mail", "document-pdf", "image-snapshot", "notification", "text-block", "snippet", "ai-prompt", "mail-layout", "pdf-layout"];
         readonly required?: boolean;
         readonly sortable?: boolean;
         readonly filterable?: boolean;
         readonly sensitive?: boolean;
-        readonly default?: "ai-prompt" | "document-pdf" | "image-snapshot" | "mail-html" | "notification" | "text-block" | undefined;
+        readonly default?: "ai-prompt" | "document-pdf" | "image-snapshot" | "mail" | "mail-layout" | "notification" | "pdf-layout" | "snippet" | "text-block" | undefined;
         readonly access?: import("@cosmicdrift/kumiko-types/fields").FieldAccess;
         readonly display?: "radio" | "dropdown";
         readonly optionTones?: {
             readonly "ai-prompt"?: "bad" | "neutral" | "ok" | "warn" | undefined;
             readonly "document-pdf"?: "bad" | "neutral" | "ok" | "warn" | undefined;
             readonly "image-snapshot"?: "bad" | "neutral" | "ok" | "warn" | undefined;
-            readonly "mail-html"?: "bad" | "neutral" | "ok" | "warn" | undefined;
+            readonly mail?: "bad" | "neutral" | "ok" | "warn" | undefined;
+            readonly "mail-layout"?: "bad" | "neutral" | "ok" | "warn" | undefined;
             readonly notification?: "bad" | "neutral" | "ok" | "warn" | undefined;
+            readonly "pdf-layout"?: "bad" | "neutral" | "ok" | "warn" | undefined;
+            readonly snippet?: "bad" | "neutral" | "ok" | "warn" | undefined;
             readonly "text-block"?: "bad" | "neutral" | "ok" | "warn" | undefined;
         } | undefined;
         readonly optionsQuery?: string;
         readonly optionsQueryPayload?: import("@cosmicdrift/kumiko-types/fields").OptionsQueryPayload;
         readonly optionsAvailabilityQuery?: string;
-        readonly conditionalOptions?: readonly import("@cosmicdrift/kumiko-types/fields").SelectConditionalOptions<"ai-prompt" | "document-pdf" | "image-snapshot" | "mail-html" | "notification" | "text-block">[] | undefined;
+        readonly conditionalOptions?: readonly import("@cosmicdrift/kumiko-types/fields").SelectConditionalOptions<"ai-prompt" | "document-pdf" | "image-snapshot" | "mail" | "mail-layout" | "notification" | "pdf-layout" | "snippet" | "text-block">[] | undefined;
     } & import("@cosmicdrift/kumiko-types/fields").ResolvedPiiFlags & {
         required: true;
     };
@@ -232,26 +235,29 @@ export declare const userContentEntriesTable: import("@cosmicdrift/kumiko-framew
     kind: {
         readonly type: "select";
         readonly description?: string;
-        readonly options: readonly ["notification", "mail-html", "document-pdf", "image-snapshot", "text-block", "ai-prompt"];
+        readonly options: readonly ["mail", "document-pdf", "image-snapshot", "notification", "text-block", "snippet", "ai-prompt", "mail-layout", "pdf-layout"];
         readonly required?: boolean;
         readonly sortable?: boolean;
         readonly filterable?: boolean;
         readonly sensitive?: boolean;
-        readonly default?: "ai-prompt" | "document-pdf" | "image-snapshot" | "mail-html" | "notification" | "text-block" | undefined;
+        readonly default?: "ai-prompt" | "document-pdf" | "image-snapshot" | "mail" | "mail-layout" | "notification" | "pdf-layout" | "snippet" | "text-block" | undefined;
         readonly access?: import("@cosmicdrift/kumiko-types/fields").FieldAccess;
         readonly display?: "radio" | "dropdown";
         readonly optionTones?: {
             readonly "ai-prompt"?: "bad" | "neutral" | "ok" | "warn" | undefined;
             readonly "document-pdf"?: "bad" | "neutral" | "ok" | "warn" | undefined;
             readonly "image-snapshot"?: "bad" | "neutral" | "ok" | "warn" | undefined;
-            readonly "mail-html"?: "bad" | "neutral" | "ok" | "warn" | undefined;
+            readonly mail?: "bad" | "neutral" | "ok" | "warn" | undefined;
+            readonly "mail-layout"?: "bad" | "neutral" | "ok" | "warn" | undefined;
             readonly notification?: "bad" | "neutral" | "ok" | "warn" | undefined;
+            readonly "pdf-layout"?: "bad" | "neutral" | "ok" | "warn" | undefined;
+            readonly snippet?: "bad" | "neutral" | "ok" | "warn" | undefined;
             readonly "text-block"?: "bad" | "neutral" | "ok" | "warn" | undefined;
         } | undefined;
         readonly optionsQuery?: string;
         readonly optionsQueryPayload?: import("@cosmicdrift/kumiko-types/fields").OptionsQueryPayload;
         readonly optionsAvailabilityQuery?: string;
-        readonly conditionalOptions?: readonly import("@cosmicdrift/kumiko-types/fields").SelectConditionalOptions<"ai-prompt" | "document-pdf" | "image-snapshot" | "mail-html" | "notification" | "text-block">[] | undefined;
+        readonly conditionalOptions?: readonly import("@cosmicdrift/kumiko-types/fields").SelectConditionalOptions<"ai-prompt" | "document-pdf" | "image-snapshot" | "mail" | "mail-layout" | "notification" | "pdf-layout" | "snippet" | "text-block">[] | undefined;
     } & import("@cosmicdrift/kumiko-types/fields").ResolvedPiiFlags & {
         required: true;
     };

package/dist/template-resolver/web/client-plugin.d.ts

@@ -9,6 +9,7 @@ export type BlockSummary = {
     readonly modifiedAt: string | null;
 };
 export declare function groupBlocksByFolder(blocks: readonly BlockSummary[], tenantIdOverride?: string, collectionId?: string): readonly TreeNode[];
+export declare function resolveWriteContentFormat(collectionContentFormat: string | undefined, loadedContentFormat: string | undefined): string | undefined;
 export declare function textBlocksClient(opts?: {
     readonly navId?: string;
     readonly tenantId?: string;

package/dist/template-resolver/web/client-plugin.js

@@ -16,6 +16,8 @@ import { ContentPreview, useAppFeatures, useContentEditor, useDispatcher, usePri
 import { PlainContentEditor, RichContentEditor, } from "@cosmicdrift/kumiko-renderer-web";
 import { useEffect, useId, useState } from "react";
 import { collectionHandlerName, collectionQueryName, TemplateResolverHandlers, TemplateResolverQueries, } from "../qualified-names.js";
+import { DocumentBlocksContext, DocumentContentEditor } from "./document-editor.js";
+import { documentBlocksForKind } from "./document-toolbar-blocks.js";
 import { defaultTranslations } from "./i18n.js";
 function newFolderNode() {
     return { leaves: [], subFolders: new Map() };
@@ -163,19 +165,20 @@ function findContentFormat(features, collectionId) {
 function findVariableExamples(features, collectionId) {
     return findCollection(features, collectionId)?.variableSchema ?? {};
 }
-// The collection's declared contentFormat ("plain" | "rich" | "markdown",
-// see ContentCollectionDefinition.contentFormat) uses a different vocabulary
+// The collection's declared contentFormat ("plain" | "rich" | "markdown" |
+// "document", see ContentCollectionDefinition.contentFormat) uses a different vocabulary
 // than the stored entry's contentFormat ("plain" | "html" | "markdown" |
-// "mjml", see CONTENT_FORMATS) — "rich" always stores HTML. Without this,
+// "mjml", see CONTENT_FORMATS) — "rich" and "document" always store HTML. Without this,
 // handleSave omitting contentFormat let the write schema's
 // contentFormatSchema.default("markdown") silently stamp every save as
 // markdown, clobbering e.g. a "plain" entry. Undefined (no collection, or
 // the collection didn't declare a format) keeps whatever was already saved
 // instead of guessing.
-function resolveWriteContentFormat(collectionContentFormat, loadedContentFormat) {
+// Exported for the unit test — resolveWriteContentFormat is a pure function.
+export function resolveWriteContentFormat(collectionContentFormat, loadedContentFormat) {
     if (collectionContentFormat === "plain")
         return "plain";
-    if (collectionContentFormat === "rich")
+    if (collectionContentFormat === "rich" || collectionContentFormat === "document")
         return "html";
     if (collectionContentFormat === "markdown")
         return "markdown";
@@ -203,6 +206,7 @@ function TextBlockEditor({ target, }) {
     const contentFormat = findContentFormat(features, collectionId);
     const variableExamples = findVariableExamples(features, collectionId);
     const variables = Object.keys(variableExamples);
+    const documentBlocks = documentBlocksForKind(findCollection(features, collectionId)?.kind);
     const ContentEditor = useContentEditor(contentFormat);
     const canWrite = user?.roles.includes("TenantAdmin") === true || user?.roles.includes("SystemAdmin") === true;
     // Same split as the tree provider: a node without a collection reads through
@@ -266,7 +270,7 @@ function TextBlockEditor({ target, }) {
         void handleSave();
     };
     const disabled = submitting || loading || !canWrite;
-    return (_jsxs(Form, { onSubmit: onSubmit, testId: "text-block-editor", title: title || slug || "—", subtitle: locale !== "" ? `${slug} · (${locale})` : slug, actions: canWrite ? (_jsx(Button, { type: "submit", loading: submitting, disabled: disabled, children: submitting ? t("template-resolver.editor.saving") : t("template-resolver.editor.save") })) : undefined, children: [loading && _jsx(Banner, { variant: "loading", children: t("template-resolver.editor.loading") }), loadError !== null && (_jsxs(Banner, { variant: "error", children: [t("template-resolver.editor.loadFailed"), ": ", loadError.code] })), !canWrite && !loading && (_jsx(Banner, { variant: "info", children: t("template-resolver.editor.readOnly") })), _jsx(Field, { id: "text-block-title", label: t("template-resolver.editor.titleLabel"), required: true, children: _jsx(Input, { kind: "text", id: "text-block-title", name: "text-block-title", value: title, onChange: setTitle, disabled: disabled, required: true }) }), _jsx(Field, { id: contentEditorId, label: t("template-resolver.editor.contentLabel"), labelAppendix: _jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: () => setPreviewing((p) => !p), children: previewing ? t("kumiko.contentEditor.editMode") : t("kumiko.contentEditor.preview") }), children: previewing ? (_jsx(ContentPreview, { content: content, variables: variableExamples, contentFormat: contentFormat })) : (_jsx(ContentEditor, { id: contentEditorId, value: content, onChange: setContent, variables: variables, readOnly: disabled })) }), saveError !== null && _jsx(Banner, { variant: "error", children: saveError }), savedMsg !== null && _jsx(Banner, { variant: "info", children: savedMsg })] }));
+    return (_jsxs(Form, { onSubmit: onSubmit, testId: "text-block-editor", title: title || slug || "—", subtitle: locale !== "" ? `${slug} · (${locale})` : slug, actions: canWrite ? (_jsx(Button, { type: "submit", loading: submitting, disabled: disabled, children: submitting ? t("template-resolver.editor.saving") : t("template-resolver.editor.save") })) : undefined, children: [loading && _jsx(Banner, { variant: "loading", children: t("template-resolver.editor.loading") }), loadError !== null && (_jsxs(Banner, { variant: "error", children: [t("template-resolver.editor.loadFailed"), ": ", loadError.code] })), !canWrite && !loading && (_jsx(Banner, { variant: "info", children: t("template-resolver.editor.readOnly") })), _jsx(Field, { id: "text-block-title", label: t("template-resolver.editor.titleLabel"), required: true, children: _jsx(Input, { kind: "text", id: "text-block-title", name: "text-block-title", value: title, onChange: setTitle, disabled: disabled, required: true }) }), _jsx(Field, { id: contentEditorId, label: t("template-resolver.editor.contentLabel"), labelAppendix: _jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: () => setPreviewing((p) => !p), children: previewing ? t("kumiko.contentEditor.editMode") : t("kumiko.contentEditor.preview") }), children: previewing ? (_jsx(ContentPreview, { content: content, variables: variableExamples, contentFormat: contentFormat })) : (_jsx(DocumentBlocksContext.Provider, { value: documentBlocks, children: _jsx(ContentEditor, { id: contentEditorId, value: content, onChange: setContent, variables: variables, readOnly: disabled }) })) }), saveError !== null && _jsx(Banner, { variant: "error", children: saveError }), savedMsg !== null && _jsx(Banner, { variant: "info", children: savedMsg })] }));
 }
 // `navId` = the QN of the r.nav({ provider: true }) node the app registers for
 // the content tree (e.g. "publicstatus:nav:content"). The app owns the node's
@@ -301,12 +305,13 @@ export function textBlocksClient(opts) {
         resolvers: {
             "template-resolver:edit": TextBlockEditor,
         },
-        // The default for every "plain" collection (ai-prompt, mail-html without
+        // The default for every "plain" collection (ai-prompt, mail without
         // an explicit rich override) — an app-registered "plain" editor on
         // another clientFeature still wins, last-wins same as columnRenderers.
         contentEditors: {
             plain: PlainContentEditor,
             rich: RichContentEditor,
+            document: DocumentContentEditor,
             // ponytail: same textarea+chips as "plain" — markdown is stored as
             // text either way. Shares PlainContentEditor's fixed-DOM-id ceiling
             // (see its own file comment); swap for a live-preview widget or a

package/dist/template-resolver/web/document-editor-extensions.d.ts

@@ -0,0 +1,18 @@
+import type { Extensions, NodeViewRenderer } from "@tiptap/core";
+import type { DocumentResourcePreview } from "./document-toolbar-blocks.js";
+export declare const DOCUMENT_BLOCK_ATTRIBUTE = "data-document-block";
+export type DocumentEditorLabels = {
+    readonly placeholder: string;
+    readonly image: string;
+    readonly pageBreak: string;
+    readonly button?: string;
+    /** Canvas block label of an image, e.g. "Image · inline". */
+    readonly imageBlock?: string;
+    readonly variableLabels?: Readonly<Record<string, string>>;
+    readonly systemVariables?: readonly string[];
+    readonly resourcePreviews?: Readonly<Record<string, DocumentResourcePreview>>;
+    /** Canvas chrome labels every block with its type. */
+    readonly blockLabels?: boolean;
+};
+export declare function createVariableView(variableLabels: Readonly<Record<string, string>>, systemVariables: readonly string[], labelOnly?: boolean): NodeViewRenderer;
+export declare function createDocumentEditorExtensions(labels: DocumentEditorLabels): Extensions;

package/dist/template-resolver/web/document-editor-extensions.js

@@ -0,0 +1,145 @@
+import { ListKeymap } from "@tiptap/extension-list";
+import { Dropcursor, Gapcursor, Placeholder, UndoRedo } from "@tiptap/extensions";
+import { DocumentButton, DocumentPageBreak, DocumentResource, DocumentVariable, documentExtensions, } from "../document-schema.js";
+const DOCUMENT_RESOURCE_SIZE_TOKEN = "{size}";
+export const DOCUMENT_BLOCK_ATTRIBUTE = "data-document-block";
+function createElementWithClass(tag, className, text) {
+    const element = document.createElement(tag);
+    element.className = className;
+    if (text !== undefined)
+        element.textContent = text;
+    return element;
+}
+const CHIP_CLASS = "mx-0.5 inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-xs";
+const USER_CHIP_CLASS = `${CHIP_CLASS} border-primary/30 bg-primary/10 text-primary`;
+const SYSTEM_CHIP_CLASS = `${CHIP_CLASS} border-input bg-muted text-muted-foreground`;
+// A chip inside a repeat row names an item field; its label is registered as `list.field`.
+function repeatRowListAt(doc, position) {
+    if (position === undefined)
+        return null;
+    const resolved = doc.resolve(position);
+    for (let depth = resolved.depth; depth > 0; depth--) {
+        const each = resolved.node(depth).attrs["each"];
+        if (typeof each === "string" && each !== "")
+            return each;
+    }
+    return null;
+}
+// The chip is display only: the stored node carries just the name, so a
+// label never reaches the document.
+export function createVariableView(variableLabels, systemVariables, labelOnly = false) {
+    return ({ node, editor, getPos }) => {
+        const name = String(node.attrs["name"]);
+        const listName = repeatRowListAt(editor.state.doc, getPos());
+        const labelKey = listName === null ? name : `${listName}.${name}`;
+        const label = Object.hasOwn(variableLabels, labelKey) ? variableLabels[labelKey] : undefined;
+        const dom = createElementWithClass("span", systemVariables.includes(name) ? SYSTEM_CHIP_CLASS : USER_CHIP_CLASS);
+        dom.contentEditable = "false";
+        dom.append(document.createTextNode(label !== undefined && label !== "" ? label : name));
+        if (!labelOnly && label !== undefined && label !== "" && label !== name) {
+            dom.append(createElementWithClass("small", "font-mono text-[10px] opacity-75", name));
+        }
+        return { dom };
+    };
+}
+// Same rule the sanitizer's image handling follows: previews never carry a
+// scriptable scheme.
+const PREVIEW_SRC = /^(data:image\/(png|jpeg|gif|webp);|blob:|https:\/\/|\/)/;
+function createBlockLabel(text) {
+    const label = createElementWithClass("span", "absolute -top-2 left-2 bg-card px-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", text);
+    label.contentEditable = "false";
+    return label;
+}
+function createResourceView(labels) {
+    return ({ node }) => {
+        const key = String(node.attrs["resource"]);
+        const previews = labels.resourcePreviews ?? {};
+        const preview = Object.hasOwn(previews, key) ? previews[key] : undefined;
+        const hasImage = preview !== undefined && PREVIEW_SRC.test(preview.src);
+        // A rendered image needs no frame until the node is selected (ProseMirror marks it).
+        const dom = createElementWithClass("div", hasImage
+            ? "relative my-1 flex items-center gap-2 rounded border border-transparent px-2 py-1 text-sm text-muted-foreground [.ProseMirror-focused_&.ProseMirror-selectednode]:border-dashed [.ProseMirror-focused_&.ProseMirror-selectednode]:border-input"
+            : "relative my-3 flex items-center gap-3 rounded border border-dashed border-input px-3 py-3 text-sm text-muted-foreground");
+        dom.setAttribute(DOCUMENT_BLOCK_ATTRIBUTE, "");
+        dom.contentEditable = "false";
+        if (labels.blockLabels) {
+            const label = createBlockLabel(labels.imageBlock ?? labels.image);
+            if (hasImage)
+                label.classList.add("hidden", "[.ProseMirror-focused_.ProseMirror-selectednode_&]:block");
+            dom.append(label);
+        }
+        if (hasImage) {
+            const image = createElementWithClass("img", "max-w-[180px] rounded");
+            image.src = preview.src;
+            image.alt = typeof node.attrs["alt"] === "string" ? node.attrs["alt"] : key;
+            dom.append(image);
+            // An empty caption means "no caption", not the key.
+            const caption = preview.caption ?? key;
+            if (caption !== "") {
+                const captionElement = createElementWithClass("span", "whitespace-nowrap text-[11px]", caption.replace(` · ${DOCUMENT_RESOURCE_SIZE_TOKEN}`, ""));
+                // The size is only known once the browser decoded the image (possibly already, from cache).
+                const showSize = () => {
+                    captionElement.textContent = caption.replace(DOCUMENT_RESOURCE_SIZE_TOKEN, `${image.naturalWidth} × ${image.naturalHeight} px`);
+                };
+                image.addEventListener("load", showSize);
+                if (image.complete && image.naturalWidth > 0)
+                    showSize();
+                dom.append(captionElement);
+            }
+        }
+        else {
+            dom.append(createElementWithClass("span", "font-medium", labels.image), createElementWithClass("code", "text-xs", key));
+        }
+        return { dom };
+    };
+}
+function createButtonView(buttonLabel) {
+    return () => {
+        const dom = createElementWithClass("div", "relative my-3 rounded border border-dashed border-input p-3");
+        dom.setAttribute(DOCUMENT_BLOCK_ATTRIBUTE, "");
+        const button = document.createElement("a");
+        button.setAttribute("data-button", "");
+        dom.append(createBlockLabel(buttonLabel), button);
+        return { dom, contentDOM: button };
+    };
+}
+function createPageBreakView(pageBreakLabel) {
+    return () => {
+        const dom = createElementWithClass("div", "my-3 border-t border-dashed border-input pt-1 text-center text-xs uppercase tracking-wide text-muted-foreground", pageBreakLabel);
+        dom.contentEditable = "false";
+        return { dom };
+    };
+}
+// Replaced by name, not appended: the schema must keep exactly one node per
+// name, and only the editor view differs from the shared document schema.
+export function createDocumentEditorExtensions(labels) {
+    const base = documentExtensions.map((extension) => {
+        switch (extension.name) {
+            case DocumentVariable.name:
+                return DocumentVariable.extend({
+                    addNodeView: () => createVariableView(labels.variableLabels ?? {}, labels.systemVariables ?? [], labels.blockLabels === true),
+                });
+            case DocumentResource.name:
+                return DocumentResource.extend({ addNodeView: () => createResourceView(labels) });
+            case DocumentButton.name:
+                return labels.blockLabels
+                    ? DocumentButton.extend({ addNodeView: () => createButtonView(labels.button ?? "") })
+                    : extension;
+            case DocumentPageBreak.name:
+                return DocumentPageBreak.extend({
+                    addNodeView: () => createPageBreakView(labels.pageBreak),
+                });
+            default:
+                return extension;
+        }
+    });
+    // No TrailingNode: it appends an empty paragraph that breaks the HTML roundtrip.
+    return [
+        ...base,
+        UndoRedo,
+        Gapcursor,
+        Dropcursor,
+        ListKeymap,
+        Placeholder.configure({ placeholder: labels.placeholder }),
+    ];
+}

package/dist/template-resolver/web/document-editor.d.ts

@@ -0,0 +1,4 @@
+import { type ReactNode } from "react";
+import type { DocumentEditorProps, DocumentToolbarBlock } from "./document-toolbar-blocks.js";
+export declare const DocumentBlocksContext: import("react").Context<readonly DocumentToolbarBlock[] | undefined>;
+export declare function DocumentContentEditor(props: DocumentEditorProps): ReactNode;

package/dist/template-resolver/web/document-editor.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @runtime client
+//
+// Lazy boundary: tiptap only loads when a "document" collection is rendered.
+// Never import document-tiptap-editor or document-editor-extensions statically here.
+import { TextareaContentEditor } from "@cosmicdrift/kumiko-renderer";
+import { createContext, lazy, Suspense, useContext } from "react";
+const LazyDocumentTiptapEditor = lazy(() => import("./document-tiptap-editor.js"));
+// The editor registry only hands ContentEditorProps to an editor, so the
+// collection's block set (mail vs. PDF) reaches it through this context. An
+// explicit `blocks` prop still wins.
+export const DocumentBlocksContext = createContext(undefined);
+export function DocumentContentEditor(props) {
+    const contextBlocks = useContext(DocumentBlocksContext);
+    const editorProps = props.blocks === undefined ? { ...props, blocks: contextBlocks } : props;
+    return (_jsx(Suspense, { fallback: _jsx(TextareaContentEditor, { id: props.id, value: props.value, onChange: props.onChange, variables: props.variables, readOnly: props.readOnly }), children: _jsx(LazyDocumentTiptapEditor, { ...editorProps }) }));
+}

package/dist/template-resolver/web/document-tiptap-editor.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from "react";
+import { type DocumentEditorProps } from "./document-toolbar-blocks.js";
+export default function DocumentTiptapEditor({ id, value, onChange, variables, readOnly, blocks, variableLabels, systemVariables, resourcePreviews, chrome, toolbar, renderPaper, toolbarHost, onEditorReady, }: DocumentEditorProps): ReactNode;