@cosmicdrift/kumiko-samples 0.369.0 → 0.371.0

package/packages/bundled-features/src/template-resolver/seeding.ts

@@ -31,15 +31,15 @@ import {
 import type { Dispatcher } from "@cosmicdrift/kumiko-framework/pipeline";
 import { runEventStoreSeed, type SeedIfExists } from "@cosmicdrift/kumiko-framework/seeding";
 import { isPlainObject } from "@cosmicdrift/kumiko-types/type-guards";
-import { type ContentFormat, TEXT_BLOCK_KIND, type UpsertKind } from "./constants.js";
-import { executor } from "./handlers/shared.js";
-import { evaluateTemplateWrite } from "./handlers/template-gates.js";
-import { TEMPLATE_RESOLVER_FEATURE, TemplateResolverHandlers } from "./qualified-names.js";
-import { type TemplateResourceRow, templateResourcesTable } from "./table.js";
-import type { TemplateBundle } from "./template-bundle.js";
-import { activeStampChanges, servedStampChanges } from "./template-draft.js";
-import { templateSlugSchema } from "./template-meta.js";
-import { variablesFromSchema } from "./template-validation.js";
+import { type ContentFormat, TEXT_BLOCK_KIND, type UpsertKind } from "./constants.ts";
+import { executor } from "./handlers/shared.ts";
+import { evaluateTemplateWrite } from "./handlers/template-gates.ts";
+import { TEMPLATE_RESOLVER_FEATURE, TemplateResolverHandlers } from "./qualified-names.ts";
+import { type TemplateResourceRow, templateResourcesTable } from "./table.ts";
+import type { TemplateBundle } from "./template-bundle.ts";
+import { activeStampChanges, servedStampChanges } from "./template-draft.ts";
+import { templateSlugSchema } from "./template-meta.ts";
+import { variablesFromSchema } from "./template-validation.ts";
 
 /** Drop projection orphans (no events anywhere) so boot seeds can recreate. */
 async function resolveExistingForEventStoreSeed(
@@ -334,7 +334,7 @@ export async function seedNotificationTemplates(
   }
   if (hasTemplates) {
     // Dynamic: renderer-foundation imports this feature's barrel, a static import would cycle.
-    const { collectRendererPlugins } = await import("../renderer-foundation/index.js");
+    const { collectRendererPlugins } = await import("../renderer-foundation/index.ts");
     if (!collectRendererPlugins(registry).some((plugin) => plugin.kinds.includes("mail"))) {
       throw new Error(
         'Notifications declare a mail template but no renderer plugin for kind "mail" is registered (mount renderer-foundation and @cosmicdrift/kumiko-renderer-mail-html)',

package/packages/bundled-features/src/template-resolver/store-template-resource.ts

@@ -19,25 +19,25 @@ import {
   type UploadedFileBytes,
   uploadFileBytesBeforeTransaction,
 } from "@cosmicdrift/kumiko-framework/files";
-import { fileContextForTenant } from "../file-foundation/index.js";
-import { extensionForResourceContentType, requireForTenant } from "../shared/index.js";
-import { ACTIVE_TEMPLATE_STATUS, SYSTEM_TENANT_ID } from "./constants.js";
+import { fileContextForTenant } from "../file-foundation/index.ts";
+import { extensionForResourceContentType, requireForTenant } from "../shared/index.ts";
+import { ACTIVE_TEMPLATE_STATUS, SYSTEM_TENANT_ID } from "./constants.ts";
 import {
   DEFAULT_RESOURCE_MAX_BYTES,
   MAX_FILE_ATTACHMENTS_PER_TEMPLATE,
   RESOURCE_MAX_BYTES_CONFIG_KEY,
-} from "./handlers/resource-shared.js";
-import { executor } from "./handlers/shared.js";
+} from "./handlers/resource-shared.ts";
+import { executor } from "./handlers/shared.ts";
 import {
   attachmentEntriesOf,
   type LinkedResourceEntry,
   parseLinkedResourceEntries,
   templatePdfAttachmentLinkSchema,
-} from "./linked-resources.js";
-import { TemplateResolverErrors } from "./qualified-names.js";
-import { normalizeResourceImage } from "./resource-image.js";
-import { type TemplateResourceRow, templateResourcesTable } from "./table.js";
-import { readTemplateResource } from "./template-resources.js";
+} from "./linked-resources.ts";
+import { TemplateResolverErrors } from "./qualified-names.ts";
+import { normalizeResourceImage } from "./resource-image.ts";
+import { type TemplateResourceRow, templateResourcesTable } from "./table.ts";
+import { readTemplateResource } from "./template-resources.ts";
 
 export async function readTemplateResourceMaxBytes(
   config: ConfigAccessor | undefined,

package/packages/bundled-features/src/template-resolver/table.ts

@@ -14,7 +14,7 @@ import {
   TEMPLATE_KINDS,
   TEMPLATE_SCOPES,
   TEMPLATE_STATUSES,
-} from "./constants.js";
+} from "./constants.ts";
 
 // Stored v1 events name the kind "mail-html", which is now "mail".
 const renameMailHtmlKind: EntityEventMigration = {

package/packages/bundled-features/src/template-resolver/template-bundle.ts

@@ -1,8 +1,8 @@
 import * as z from "zod";
-import { CONTENT_FORMATS, UPSERT_KINDS } from "./constants.js";
-import { isDocumentResourceKey } from "./document-schema.js";
-import { templatePdfAttachmentLinkSchema } from "./linked-resources.js";
-import { templateSlugSchema } from "./template-meta.js";
+import { CONTENT_FORMATS, UPSERT_KINDS } from "./constants.ts";
+import { isDocumentResourceKey } from "./document-schema.ts";
+import { templatePdfAttachmentLinkSchema } from "./linked-resources.ts";
+import { templateSlugSchema } from "./template-meta.ts";
 
 const MAX_RESOURCES = 20;
 const MAX_LOCALES = 50;

package/packages/bundled-features/src/template-resolver/template-diff.ts

@@ -1,4 +1,4 @@
-import { withParsedDocument } from "./document-sanitizer.js";
+import { withParsedDocument } from "./document-sanitizer.ts";
 
 export type TemplateDiffChange = "same" | "added" | "removed";
 

package/packages/bundled-features/src/template-resolver/template-draft.ts

@@ -1,7 +1,7 @@
 import { Temporal } from "@cosmicdrift/kumiko-types/temporal";
 import * as z from "zod";
-import { CONTENT_FORMATS, type ContentFormat } from "./constants.js";
-import type { TemplateResourceRow } from "./table.js";
+import { CONTENT_FORMATS, type ContentFormat } from "./constants.ts";
+import type { TemplateResourceRow } from "./table.ts";
 
 const templateDraftSchema = z.object({
   content: z.string().nullable(),

package/packages/bundled-features/src/template-resolver/template-meta.ts

@@ -4,8 +4,8 @@ import {
   PDF_ORIENTATIONS,
   PDF_PAGE_FORMATS,
   type TemplateKind,
-} from "./constants.js";
-import { MAIL_TONES, type MailTone } from "./mail-constants.js";
+} from "./constants.ts";
+import { MAIL_TONES, type MailTone } from "./mail-constants.ts";
 
 // One or more kebab segments joined by ":" — notification templates are seeded
 // under their qualified name `feature:notify:name`.

package/packages/bundled-features/src/template-resolver/template-preview.ts

@@ -13,56 +13,61 @@ import {
   ValidationError,
 } from "@cosmicdrift/kumiko-framework/errors";
 import { fileRefsTable } from "@cosmicdrift/kumiko-framework/files";
+import { createI18n } from "@cosmicdrift/kumiko-framework/i18n";
 import { escapeHtml } from "@cosmicdrift/kumiko-headless";
-import { createEmailAttachmentReader, createTemplateMailRenderer } from "../delivery/index.js";
-import { fileContextForTenant } from "../file-foundation/index.js";
+import { createEmailAttachmentReader, createTemplateMailRenderer } from "../delivery/index.ts";
+import { fileContextForTenant } from "../file-foundation/index.ts";
 import {
   collectRendererPlugins,
   createRendererFoundationApi,
   type MailAttachmentRef,
   RendererError,
   type RendererPlugin,
-} from "../renderer-foundation/index.js";
-import { createTemplateResolverApi, TemplateNotFoundError, type TemplateResource } from "./api.js";
-import { collectDocumentResourceKeys } from "./compile-document-body.js";
+} from "../renderer-foundation/index.ts";
+import { createTemplateResolverApi, TemplateNotFoundError, type TemplateResource } from "./api.ts";
+import { collectDocumentResourceKeys } from "./compile-document-body.ts";
 import {
   DEFAULT_MAIL_LAYOUT_SLUG,
   DEFAULT_PDF_LAYOUT_SLUG,
   MAIL_PREVIEW_MAX_BYTES,
   SYSTEM_TENANT_ID,
   type TemplateScope,
-} from "./constants.js";
-import { parseStoredJson } from "./handlers/template-gates.js";
-import { validateTemplateDraft } from "./handlers/validate.query.js";
+} from "./constants.ts";
+import { parseStoredJson } from "./handlers/template-gates.ts";
+import { validateTemplateDraft } from "./handlers/validate.query.ts";
 import {
   type LayoutRegions,
   readLayoutRegions,
   sanitizeLayoutHtml,
   type TemplateWriteScope,
-} from "./layout-regions.js";
-import { type LinkedResourceEntry, parseLinkedResourceEntries } from "./linked-resources.js";
-import { buildDisplayHtml } from "./preview-display-html.js";
-import { TemplateResolverErrors } from "./qualified-names.js";
-import { type TemplateResourceRow, templateResourcesTable } from "./table.js";
+} from "./layout-regions.ts";
+import { type LinkedResourceEntry, parseLinkedResourceEntries } from "./linked-resources.ts";
+import { buildDisplayHtml } from "./preview-display-html.ts";
+import { TemplateResolverErrors } from "./qualified-names.ts";
+import { type TemplateResourceRow, templateResourcesTable } from "./table.ts";
 import {
   isMailTemplateMeta,
   type MailTemplateMeta,
   type PdfTemplateMeta,
   parseTemplateMeta,
   readPdfTemplateMeta,
-} from "./template-meta.js";
+} from "./template-meta.ts";
 
 const SAMPLE_LINK = "https://example.com";
 const SAMPLE_DATE = "2026-01-15";
 const SAMPLE_LIST_ROWS = 3;
 
-function sampleScalar(name: string, def: TemplateScalarVariableDef): unknown {
+// A variable label is an i18n key or plain text; an unknown key reads as itself.
+type LabelText = (label: string) => string;
+
+function sampleScalar(name: string, def: TemplateScalarVariableDef, labelText: LabelText): unknown {
   if (def.example !== undefined) return def.example;
+  const label = def.label === undefined ? name : labelText(def.label);
   switch (def.type) {
     case "text":
-      return `[${def.label ?? name}]`;
+      return `[${label}]`;
     case "richText":
-      return `<p>[${escapeHtml(def.label ?? name)}]</p>`;
+      return `<p>[${escapeHtml(label)}]</p>`;
     case "link":
       return SAMPLE_LINK;
     case "money":
@@ -76,30 +81,40 @@ function sampleScalar(name: string, def: TemplateScalarVariableDef): unknown {
 
 function sampleRow(
   item: TemplateListVariableDef["item"],
+  labelText: LabelText,
   given: Readonly<Record<string, unknown>> = {},
 ): Record<string, unknown> {
   const row: Record<string, unknown> = {};
-  for (const [name, def] of Object.entries(item)) row[name] = sampleScalar(name, def);
+  for (const [name, def] of Object.entries(item)) row[name] = sampleScalar(name, def, labelText);
   return { ...row, ...given };
 }
 
-function sampleList(def: TemplateListVariableDef): Record<string, unknown>[] {
+function sampleList(def: TemplateListVariableDef, labelText: LabelText): Record<string, unknown>[] {
   const rows = (def.example ?? [])
     .slice(0, SAMPLE_LIST_ROWS)
-    .map((given) => sampleRow(def.item, given));
-  while (rows.length < SAMPLE_LIST_ROWS) rows.push(sampleRow(def.item));
+    .map((given) => sampleRow(def.item, labelText, given));
+  while (rows.length < SAMPLE_LIST_ROWS) rows.push(sampleRow(def.item, labelText));
   return rows;
 }
 
 // Declared examples win; the fallbacks are deterministic so a preview never differs between calls.
-export function sampleValuesFor(variables: TemplateVariables): Record<string, unknown> {
+export function sampleValuesFor(
+  variables: TemplateVariables,
+  labelText: LabelText = (label) => label,
+): Record<string, unknown> {
   const values: Record<string, unknown> = {};
   for (const [name, def] of Object.entries(variables)) {
-    values[name] = def.type === "list" ? sampleList(def) : sampleScalar(name, def);
+    values[name] =
+      def.type === "list" ? sampleList(def, labelText) : sampleScalar(name, def, labelText);
   }
   return values;
 }
 
+function labelTextFor(ctx: HandlerContext, locale: string): LabelText {
+  const i18n = createI18n(ctx.registry, { defaultLocale: "en" });
+  return (label) => i18n.t(label, locale);
+}
+
 export type PreviewCheckCode =
   | "resources_resolved"
   | "text_present"
@@ -494,7 +509,7 @@ export async function evaluateDocumentDraft(
     content: evaluation.content ?? "",
     meta: meta.ok ? readPdfTemplateMeta(meta.meta) : null,
     variableSchema: draft.variableSchema,
-    sampleValues: sampleValuesFor(response.variables),
+    sampleValues: sampleValuesFor(response.variables, labelTextFor(ctx, draft.locale)),
   };
 }
 
@@ -654,7 +669,7 @@ export async function renderTemplatePreview(
 
   const content = evaluation.content ?? "";
   const meta = parseTemplateMeta(input.kind, parseStoredJson(evaluation.metaJson));
-  const sampleValues = sampleValuesFor(validation.variables);
+  const sampleValues = sampleValuesFor(validation.variables, labelTextFor(ctx, input.locale));
 
   if (input.kind === "document-pdf") {
     return renderDocumentPreview(ctx, user, {

package/packages/bundled-features/src/template-resolver/template-resources.ts

@@ -7,10 +7,10 @@ import type {
 } from "@cosmicdrift/kumiko-framework/engine";
 import { NotFoundError, writeFailure } from "@cosmicdrift/kumiko-framework/errors";
 import { fileRefsTable } from "@cosmicdrift/kumiko-framework/files";
-import { requireForTenant } from "../shared/index.js";
-import { executor } from "./handlers/shared.js";
-import type { LinkedResourceEntry } from "./linked-resources.js";
-import { type TemplateResourceRow, templateResourcesTable } from "./table.js";
+import { requireForTenant } from "../shared/index.ts";
+import { executor } from "./handlers/shared.ts";
+import type { LinkedResourceEntry } from "./linked-resources.ts";
+import { type TemplateResourceRow, templateResourcesTable } from "./table.ts";
 
 export type TemplateResourceFile = {
   readonly fileName: string;

package/packages/bundled-features/src/template-resolver/template-system-only.ts

@@ -1,5 +1,5 @@
 import type { Registry } from "@cosmicdrift/kumiko-framework/engine";
-import { isSystemAdmin } from "./template-draft.js";
+import { isSystemAdmin } from "./template-draft.ts";
 
 const NOTIFICATION_TEMPLATE_KIND = "mail";
 

package/packages/bundled-features/src/template-resolver/template-usage.ts

@@ -3,7 +3,7 @@ import {
   parseQn,
   type Registry,
 } from "@cosmicdrift/kumiko-framework/engine";
-import { DEFAULT_MAIL_LAYOUT_SLUG, type TemplateKind } from "./constants.js";
+import { DEFAULT_MAIL_LAYOUT_SLUG, type TemplateKind } from "./constants.ts";
 
 type UsageRole = "template" | "layout";
 
@@ -13,6 +13,8 @@ export type TemplateUsageEntry = {
   readonly notification: string;
   readonly trigger: string | null;
   readonly role: UsageRole;
+  /** The mail goes through the tenant's own transport when it has a provider. */
+  readonly tenantTransport: boolean;
 };
 
 /** Layout slug of the effective stored mail template, by notification qualified
@@ -60,6 +62,7 @@ export function collectTemplateUsage(
         notification: parsed.name,
         trigger: notification.trigger?.on ?? null,
         role,
+        tenantTransport: notification.tenantTransport === true,
       });
     }
   }

package/packages/bundled-features/src/template-resolver/template-validation.ts

@@ -6,13 +6,13 @@ import type {
 } from "@cosmicdrift/kumiko-framework/engine";
 import type { Element as ScanElement } from "happy-dom";
 import * as z from "zod";
-import { conditionScopeElement, withParsedDocument } from "./document-sanitizer.js";
+import { conditionScopeElement, withParsedDocument } from "./document-sanitizer.ts";
 import {
   DOCUMENT_CONDITION_ATTRIBUTE,
   isDocumentPlaceholderHref,
   isDocumentReferenceName,
-} from "./document-schema.js";
-import type { TemplateMeta } from "./template-meta.js";
+} from "./document-schema.ts";
+import type { TemplateMeta } from "./template-meta.ts";
 
 export const SYSTEM_PLACEHOLDERS: ReadonlySet<string> = new Set([
   "tenantName",

package/packages/bundled-features/src/template-resolver/testing.ts

@@ -4,8 +4,8 @@
 
 import type { DbConnection } from "@cosmicdrift/kumiko-framework/db";
 import { seedRow } from "@cosmicdrift/kumiko-testing/helpers";
-import type { ResolveRequest, TemplateResource } from "./api.js";
-import { TemplateNotFoundError } from "./api.js";
+import type { ResolveRequest, TemplateResource } from "./api.ts";
+import { TemplateNotFoundError } from "./api.ts";
 import {
   type ContentFormat,
   FALLBACK_LOCALE,
@@ -13,8 +13,8 @@ import {
   SYSTEM_TENANT_ID,
   type TemplateScope,
   type TemplateStatus,
-} from "./constants.js";
-import { templateResourcesTable } from "./table.js";
+} from "./constants.ts";
+import { templateResourcesTable } from "./table.ts";
 
 export type TemplateConsumer = {
   readonly resolve: (args: ResolveRequest) => Promise<TemplateResource>;

package/packages/bundled-features/src/template-resolver/user-content-table.ts

@@ -5,8 +5,8 @@ import {
   createSelectField,
   createTextField,
 } from "@cosmicdrift/kumiko-framework/engine";
-import { CONTENT_FORMATS, TEMPLATE_KINDS } from "./constants.js";
-import type { EntityAuditColumns } from "./table.js";
+import { CONTENT_FORMATS, TEMPLATE_KINDS } from "./constants.ts";
+import type { EntityAuditColumns } from "./table.ts";
 
 // UserContentEntry — the per-user half of the content store: mail signatures
 // and personal reply snippets, one row per (tenantId, ownerId, slug, kind,

package/packages/bundled-features/src/template-resolver/web/client-plugin.tsx

@@ -39,10 +39,10 @@ import {
   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";
+} from "../qualified-names.ts";
+import { DocumentBlocksContext, DocumentContentEditor } from "./document-editor.tsx";
+import { documentBlocksForKind } from "./document-toolbar-blocks.ts";
+import { defaultTranslations } from "./i18n.ts";
 
 // Exported for the unit test — groupBlocksByFolder is a pure function.
 export type BlockSummary = {

package/packages/bundled-features/src/template-resolver/web/document-editor-extensions.ts

@@ -10,9 +10,9 @@ import {
   DocumentSteps,
   DocumentVariable,
   documentExtensions,
-} from "../document-schema.js";
-import { readDocumentStepsAttribute } from "../document-steps.js";
-import type { DocumentResourcePreview } from "./document-toolbar-blocks.js";
+} from "../document-schema.ts";
+import { readDocumentStepsAttribute } from "../document-steps.ts";
+import type { DocumentResourcePreview } from "./document-toolbar-blocks.ts";
 
 const DOCUMENT_RESOURCE_SIZE_TOKEN = "{size}";
 export const DOCUMENT_BLOCK_ATTRIBUTE = "data-document-block";
@@ -75,8 +75,11 @@ export function createVariableView(
       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.setAttribute("data-variable-chip", "");
+    const hasOwnLabel = label !== undefined && label !== "" && label !== name;
+    dom.append(document.createTextNode(hasOwnLabel ? label : name));
+    if (hasOwnLabel) dom.title = name;
+    if (!labelOnly && hasOwnLabel) {
       dom.append(createElementWithClass("small", "font-mono text-[10px] opacity-75", name));
     }
     return { dom };

package/packages/bundled-features/src/template-resolver/web/document-editor.tsx

@@ -5,9 +5,9 @@
 
 import { TextareaContentEditor } from "@cosmicdrift/kumiko-renderer";
 import { createContext, lazy, type ReactNode, Suspense, useContext } from "react";
-import type { DocumentEditorProps, DocumentToolbarBlock } from "./document-toolbar-blocks.js";
+import type { DocumentEditorProps, DocumentToolbarBlock } from "./document-toolbar-blocks.ts";
 
-const LazyDocumentTiptapEditor = lazy(() => import("./document-tiptap-editor.js"));
+const LazyDocumentTiptapEditor = lazy(() => import("./document-tiptap-editor.tsx"));
 
 // The editor registry only hands ContentEditorProps to an editor, so the
 // collection's block set (mail vs. PDF) reaches it through this context. An

package/packages/bundled-features/src/template-resolver/web/document-tiptap-editor.tsx

@@ -47,20 +47,20 @@ import {
   isDocumentPlaceholderHref,
   isDocumentReferenceName,
   isDocumentResourceKey,
-} from "../document-schema.js";
-import { parseDocumentStepsInput } from "../document-steps.js";
+} from "../document-schema.ts";
+import { parseDocumentStepsInput } from "../document-steps.ts";
 import {
   createDocumentEditorExtensions,
   DOCUMENT_BLOCK_ATTRIBUTE,
-} from "./document-editor-extensions.js";
+} from "./document-editor-extensions.ts";
 import {
   type DocumentEditorProps,
   type DocumentResourcePreview,
   type DocumentToolbarBlock,
   MAIL_DOCUMENT_BLOCKS,
-} from "./document-toolbar-blocks.js";
-import { createEditorHandle } from "./editor-handle.js";
-import { useStableByKey } from "./use-stable-by-key.js";
+} from "./document-toolbar-blocks.ts";
+import { createEditorHandle } from "./editor-handle.ts";
+import { useStableByKey } from "./use-stable-by-key.ts";
 
 const NO_LABELS: Readonly<Record<string, string>> = {};
 const NO_NAMES: readonly string[] = [];
@@ -152,10 +152,13 @@ const HEADING_LEVELS = { "1": 1, "2": 2, "3": 3 } as const;
 
 const PLACEHOLDER_HREF = /^\{\{([^{}]+)\}\}$/;
 
+function variableLabelOf(name: string, labels: Readonly<Record<string, string>>): string {
+  return Object.hasOwn(labels, name) ? (labels[name] ?? name) : name;
+}
+
 function buttonTargetLabel(href: string, labels: Readonly<Record<string, string>>): string {
   const name = PLACEHOLDER_HREF.exec(href)?.[1];
-  if (name === undefined) return href;
-  return Object.hasOwn(labels, name) ? (labels[name] ?? name) : name;
+  return name === undefined ? href : variableLabelOf(name, labels);
 }
 
 // The bubble menu registers its plugin once per mount, so a rebuilt editor needs a fresh mount.
@@ -277,11 +280,12 @@ type OptionSelectProps = {
   readonly id: string;
   readonly label: string;
   readonly names: readonly string[];
+  readonly labels: Readonly<Record<string, string>>;
   readonly value: string;
   readonly onChange: (name: string) => void;
 };
 
-function NameSelect({ id, label, names, value, onChange }: OptionSelectProps): ReactNode {
+function NameSelect({ id, label, names, labels, value, onChange }: OptionSelectProps): ReactNode {
   const { Field, Input } = usePrimitives();
   return (
     <Field id={id} label={label}>
@@ -292,7 +296,7 @@ function NameSelect({ id, label, names, value, onChange }: OptionSelectProps): R
         value={value}
         onChange={onChange}
         display="dropdown"
-        options={names.map((name) => ({ value: name, label: name }))}
+        options={names.map((name) => ({ value: name, label: variableLabelOf(name, labels) }))}
       />
     </Field>
   );
@@ -303,10 +307,18 @@ type PanelProps = {
   readonly editorId: string;
   readonly kind: PanelKind;
   readonly variables: readonly string[];
+  readonly variableLabels: Readonly<Record<string, string>>;
   readonly onClose: () => void;
 };
 
-function InsertPanel({ editor, editorId, kind, variables, onClose }: PanelProps): ReactNode {
+function InsertPanel({
+  editor,
+  editorId,
+  kind,
+  variables,
+  variableLabels,
+  onClose,
+}: PanelProps): ReactNode {
   const { Button, Field, Input } = usePrimitives();
   const t = useTranslation();
   const [href, setHref] = useState(() => {
@@ -407,6 +419,7 @@ function InsertPanel({ editor, editorId, kind, variables, onClose }: PanelProps)
         <div className="flex flex-wrap gap-1">
           <VariableChips
             variables={selectable}
+            labels={variableLabels}
             onInsert={(name) => insertAndClose({ type: "variable", attrs: { name } })}
           />
         </div>
@@ -460,6 +473,7 @@ function InsertPanel({ editor, editorId, kind, variables, onClose }: PanelProps)
             id={`${idPrefix}-target`}
             label={t("template-resolver.documentEditor.buttonTarget")}
             names={selectable}
+            labels={variableLabels}
             value={selectedName}
             onChange={setChosenName}
           />
@@ -479,6 +493,7 @@ function InsertPanel({ editor, editorId, kind, variables, onClose }: PanelProps)
           id={`${idPrefix}-list`}
           label={t("template-resolver.documentEditor.repeatList")}
           names={selectable}
+          labels={variableLabels}
           value={selectedName}
           onChange={setChosenName}
         />
@@ -489,6 +504,7 @@ function InsertPanel({ editor, editorId, kind, variables, onClose }: PanelProps)
             id={`${idPrefix}-steps-variable`}
             label={t("template-resolver.documentEditor.stepsVariable")}
             names={selectable}
+            labels={variableLabels}
             value={selectedName}
             onChange={setChosenName}
           />
@@ -832,6 +848,8 @@ export default function DocumentTiptapEditor({
         "[&_[data-align=left]]:text-left [&_[data-align=center]]:text-center [&_[data-align=right]]:text-right [&_[data-align=justify]]:text-justify",
         "[&_p[data-size=small]]:text-xs [&_p[data-size=small]]:text-muted-foreground",
         "[&_a[data-button]]:inline-block [&_a[data-button]]:rounded-full [&_a[data-button]]:bg-primary [&_a[data-button]]:px-4 [&_a[data-button]]:py-1.5 [&_a[data-button]]:text-primary-foreground [&_a[data-button]]:no-underline",
+        // A chip in the button would be primary on primary; it inverts to stay readable.
+        "[&_a[data-button]_[data-variable-chip]]:border-primary-foreground/40 [&_a[data-button]_[data-variable-chip]]:bg-primary-foreground/15 [&_a[data-button]_[data-variable-chip]]:text-primary-foreground",
         "[&_hr]:my-3 [&_hr]:border-input",
         "[&_.is-editor-empty]:before:pointer-events-none [&_.is-editor-empty]:before:float-left [&_.is-editor-empty]:before:h-0 [&_.is-editor-empty]:before:text-muted-foreground [&_.is-editor-empty]:before:content-[attr(data-placeholder)]",
       )}
@@ -1041,6 +1059,7 @@ export default function DocumentTiptapEditor({
       editorId={id}
       kind={openPanel}
       variables={variables}
+      variableLabels={stableLabels}
       onClose={() => setOpenPanel(null)}
     />
   );

package/packages/bundled-features/src/template-resolver/web/editor-handle.ts

@@ -1,7 +1,7 @@
 // @runtime client
 import type { Editor } from "@tiptap/core";
-import { isDocumentReferenceName, isDocumentResourceKey } from "../document-schema.js";
-import type { DocumentEditorHandle } from "./document-toolbar-blocks.js";
+import { isDocumentReferenceName, isDocumentResourceKey } from "../document-schema.ts";
+import type { DocumentEditorHandle } from "./document-toolbar-blocks.ts";
 
 export function createEditorHandle(editor: Editor): DocumentEditorHandle {
   return {

package/packages/bundled-features/src/template-resolver/web/index.ts

@@ -5,21 +5,21 @@
 // `@cosmicdrift/kumiko-bundled-features/template-resolver` and has no React or
 // DOM deps.
 
-export { MAIL_TONES, type MailTone } from "../mail-constants.js";
+export { MAIL_TONES, type MailTone } from "../mail-constants.ts";
 export {
   PDF_DEFAULT_MARGIN_MM,
   PDF_FOOTER_MARGIN_MM,
   PDF_HEADER_MARGIN_MM,
   PDF_ORIENTATIONS,
   PDF_PAGE_FORMATS,
-} from "../pdf-constants.js";
+} from "../pdf-constants.ts";
 export {
   TemplateResolverErrors,
   TemplateResolverHandlers,
   TemplateResolverQueries,
-} from "../qualified-names.js";
-export { textBlocksClient } from "./client-plugin.js";
-export { DocumentContentEditor } from "./document-editor.js";
+} from "../qualified-names.ts";
+export { textBlocksClient } from "./client-plugin.tsx";
+export { DocumentContentEditor } from "./document-editor.tsx";
 export {
   type DocumentEditorChrome,
   type DocumentEditorHandle,
@@ -28,8 +28,8 @@ export {
   type DocumentToolbarBlock,
   MAIL_DOCUMENT_BLOCKS,
   PDF_DOCUMENT_BLOCKS,
-} from "./document-toolbar-blocks.js";
+} from "./document-toolbar-blocks.ts";
 export {
   PlaceholderLineEditor,
   type PlaceholderLineEditorProps,
-} from "./placeholder-line-editor-lazy.js";
+} from "./placeholder-line-editor-lazy.tsx";

package/packages/bundled-features/src/template-resolver/web/placeholder-line-editor-lazy.tsx

@@ -6,11 +6,11 @@
 
 import { usePrimitives } from "@cosmicdrift/kumiko-renderer";
 import { lazy, type ReactNode, Suspense } from "react";
-import type { PlaceholderLineEditorProps } from "./placeholder-line-editor.js";
+import type { PlaceholderLineEditorProps } from "./placeholder-line-editor.tsx";
 
-export type { PlaceholderLineEditorProps } from "./placeholder-line-editor.js";
+export type { PlaceholderLineEditorProps } from "./placeholder-line-editor.tsx";
 
-const LazyPlaceholderLineEditor = lazy(() => import("./placeholder-line-editor.js"));
+const LazyPlaceholderLineEditor = lazy(() => import("./placeholder-line-editor.tsx"));
 
 function PlainLineFallback({
   id,