@cosmicdrift/kumiko-samples 0.363.0 → 0.364.0

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

@@ -1,4 +1,8 @@
-import { parseQn, type Registry } from "@cosmicdrift/kumiko-framework/engine";
+import {
+  type NotificationDefinition,
+  parseQn,
+  type Registry,
+} from "@cosmicdrift/kumiko-framework/engine";
 import { DEFAULT_MAIL_LAYOUT_SLUG, type TemplateKind } from "./constants.js";
 
 type UsageRole = "template" | "layout";
@@ -11,27 +15,43 @@ export type TemplateUsageEntry = {
   readonly role: UsageRole;
 };
 
+/** Layout slug of the effective stored mail template, by notification qualified
+ *  name and locale. The renderer reads the layout from the stored row's meta,
+ *  so it wins over the code-registered notification meta. */
+export type EffectiveMailLayoutSlugs = ReadonlyMap<string, ReadonlyMap<string, string>>;
+
+function layoutSlugsOf(
+  qualifiedName: string,
+  notification: NotificationDefinition,
+  effectiveLayouts: EffectiveMailLayoutSlugs,
+): string[] {
+  const stored = effectiveLayouts.get(qualifiedName);
+  const locales = new Set([
+    ...Object.keys(notification.template ?? {}),
+    ...Object.keys(notification.meta ?? {}),
+    ...(stored?.keys() ?? []),
+  ]);
+  return [...locales].map(
+    (locale) =>
+      stored?.get(locale) ?? notification.meta?.[locale]?.layoutSlug ?? DEFAULT_MAIL_LAYOUT_SLUG,
+  );
+}
+
 export function collectTemplateUsage(
   registry: Registry,
   slug: string,
   kind: TemplateKind,
+  effectiveLayouts: EffectiveMailLayoutSlugs = new Map(),
 ): TemplateUsageEntry[] {
   const usedBy: TemplateUsageEntry[] = [];
   if (kind === "mail" || kind === "mail-layout") {
     for (const [qualifiedName, notification] of registry.getAllNotifications()) {
       const role: UsageRole = kind === "mail" ? "template" : "layout";
+      // Notifications without a code template are not rendered through the resolver.
       const isUsed =
         kind === "mail"
-          ? qualifiedName === slug
-          : [
-              ...new Set([
-                ...Object.keys(notification.template ?? {}),
-                ...Object.keys(notification.meta ?? {}),
-              ]),
-            ].some(
-              (locale) =>
-                (notification.meta?.[locale]?.layoutSlug ?? DEFAULT_MAIL_LAYOUT_SLUG) === slug,
-            );
+          ? qualifiedName === slug && notification.template !== undefined
+          : layoutSlugsOf(qualifiedName, notification, effectiveLayouts).includes(slug);
       if (!isUsed) continue;
       const parsed = parseQn(qualifiedName);
       usedBy.push({

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

@@ -47,6 +47,7 @@ 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"),

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

@@ -40,7 +40,8 @@ import {
   TemplateResolverHandlers,
   TemplateResolverQueries,
 } from "../qualified-names.js";
-import { DocumentContentEditor } from "./document-editor.js";
+import { DocumentBlocksContext, DocumentContentEditor } from "./document-editor.js";
+import { documentBlocksForKind } from "./document-toolbar-blocks.js";
 import { defaultTranslations } from "./i18n.js";
 
 // Exported for the unit test — groupBlocksByFolder is a pure function.
@@ -311,6 +312,7 @@ function TextBlockEditor({
   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;
@@ -448,13 +450,15 @@ function TextBlockEditor({
             contentFormat={contentFormat}
           />
         ) : (
-          <ContentEditor
-            id={contentEditorId}
-            value={content}
-            onChange={setContent}
-            variables={variables}
-            readOnly={disabled}
-          />
+          <DocumentBlocksContext.Provider value={documentBlocks}>
+            <ContentEditor
+              id={contentEditorId}
+              value={content}
+              onChange={setContent}
+              variables={variables}
+              readOnly={disabled}
+            />
+          </DocumentBlocksContext.Provider>
         )}
       </Field>
       {saveError !== null && <Banner variant="error">{saveError}</Banner>}

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

@@ -2,6 +2,7 @@
 import type { Extensions, NodeViewRenderer } from "@tiptap/core";
 import { ListKeymap } from "@tiptap/extension-list";
 import { Dropcursor, Gapcursor, Placeholder, UndoRedo } from "@tiptap/extensions";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import {
   DocumentButton,
   DocumentPageBreak,
@@ -11,11 +12,16 @@ import {
 } from "../document-schema.js";
 import type { DocumentResourcePreview } from "./document-toolbar-blocks.js";
 
+const DOCUMENT_RESOURCE_SIZE_TOKEN = "{size}";
+export 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>>;
@@ -38,22 +44,36 @@ const CHIP_CLASS = "mx-0.5 inline-flex items-center gap-1 rounded border px-1.5
 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: ProseMirrorNode, position: number | undefined): string | null {
+  if (position === undefined) return null;
+  const resolved = doc.resolve(position);
+  for (let depth = resolved.depth; depth > 0; depth--) {
+    const each: unknown = 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: Readonly<Record<string, string>>,
   systemVariables: readonly string[],
+  labelOnly = false,
 ): NodeViewRenderer {
-  return ({ node }) => {
+  return ({ node, editor, getPos }) => {
     const name = String(node.attrs["name"]);
-    const label = Object.hasOwn(variableLabels, name) ? variableLabels[name] : undefined;
+    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 (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 };
@@ -79,18 +99,46 @@ function createResourceView(labels: DocumentEditorLabels): NodeViewRenderer {
     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",
-      "relative my-3 flex items-center gap-3 rounded border border-dashed border-input px-3 py-3 text-sm text-muted-foreground",
+      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) dom.append(createBlockLabel(labels.image));
-    if (preview !== undefined && PREVIEW_SRC.test(preview.src)) {
-      const image = createElementWithClass("img", "max-h-16 max-w-48 rounded");
+    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);
-      dom.append(createElementWithClass("span", "text-xs", preview.caption ?? key));
+      // 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 = (): void => {
+          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),
@@ -107,6 +155,7 @@ function createButtonView(buttonLabel: string): NodeViewRenderer {
       "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);
@@ -118,7 +167,7 @@ function createPageBreakView(pageBreakLabel: string): NodeViewRenderer {
   return () => {
     const dom = createElementWithClass(
       "div",
-      "my-3 border-t border-dashed border-input pt-1 text-center text-xs text-muted-foreground",
+      "my-3 border-t border-dashed border-input pt-1 text-center text-xs uppercase tracking-wide text-muted-foreground",
       pageBreakLabel,
     );
     dom.contentEditable = "false";
@@ -134,7 +183,11 @@ export function createDocumentEditorExtensions(labels: DocumentEditorLabels): Ex
       case DocumentVariable.name:
         return DocumentVariable.extend({
           addNodeView: () =>
-            createVariableView(labels.variableLabels ?? {}, labels.systemVariables ?? []),
+            createVariableView(
+              labels.variableLabels ?? {},
+              labels.systemVariables ?? [],
+              labels.blockLabels === true,
+            ),
         });
       case DocumentResource.name:
         return DocumentResource.extend({ addNodeView: () => createResourceView(labels) });

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

@@ -4,12 +4,21 @@
 // Never import document-tiptap-editor or document-editor-extensions statically here.
 
 import { TextareaContentEditor } from "@cosmicdrift/kumiko-renderer";
-import { lazy, type ReactNode, Suspense } from "react";
-import type { DocumentEditorProps } from "./document-toolbar-blocks.js";
+import { createContext, lazy, type ReactNode, Suspense, useContext } from "react";
+import type { DocumentEditorProps, DocumentToolbarBlock } from "./document-toolbar-blocks.js";
 
 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<readonly DocumentToolbarBlock[] | undefined>(
+  undefined,
+);
+
 export function DocumentContentEditor(props: DocumentEditorProps): ReactNode {
+  const contextBlocks = useContext(DocumentBlocksContext);
+  const editorProps = props.blocks === undefined ? { ...props, blocks: contextBlocks } : props;
   return (
     <Suspense
       fallback={
@@ -22,7 +31,7 @@ export function DocumentContentEditor(props: DocumentEditorProps): ReactNode {
         />
       }
     >
-      <LazyDocumentTiptapEditor {...props} />
+      <LazyDocumentTiptapEditor {...editorProps} />
     </Suspense>
   );
 }