@cosmicdrift/kumiko-bundled-features 0.182.0 → 0.183.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-bundled-features",
-  "version": "0.182.0",
+  "version": "0.183.0",
   "description": "Built-in features — tenant, user, auth, delivery. The stuff you'd rewrite anyway, already typed.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -121,12 +121,12 @@
     "./step-dispatcher": "./src/step-dispatcher/index.ts"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.182.0",
-    "@cosmicdrift/kumiko-framework": "0.182.0",
-    "@cosmicdrift/kumiko-headless": "0.182.0",
-    "@cosmicdrift/kumiko-renderer": "0.182.0",
-    "@cosmicdrift/kumiko-renderer-web": "0.182.0",
-    "@cosmicdrift/kumiko-types": "0.182.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.183.0",
+    "@cosmicdrift/kumiko-framework": "0.183.0",
+    "@cosmicdrift/kumiko-headless": "0.183.0",
+    "@cosmicdrift/kumiko-renderer": "0.183.0",
+    "@cosmicdrift/kumiko-renderer-web": "0.183.0",
+    "@cosmicdrift/kumiko-types": "0.183.0",
     "@mollie/api-client": "^4.5.0",
     "imapflow": "^1.3.3",
     "mailparser": "^3.9.8",

package/src/template-resolver/feature.ts

@@ -42,7 +42,14 @@ export function createTemplateResolverFeature(opts: TemplateResolverOptions = {}
   const hasUserOwned = collections.some((c) => c.ownership === "user");
   return defineFeature("template-resolver", (r) => {
     r.describe(
-      "The one content store: notification and mail templates, PDF document templates, AI prompts and plain editable text blocks all live here as one entity, distinguished by `kind` (`notification`, `mail-html`, `document-pdf`, `ai-prompt`, `text-block`, `image-snapshot`). Resolution uses a 4-level fallback: tenant+locale \u2192 system+locale \u2192 tenant+fallback-locale \u2192 system+fallback-locale, so tenants can override system defaults without touching application code. Call `ctx.templateResolver.resolveTemplate({ tenantId, slug, kind, locale })` at render time; manage templates via the `upsertSystem`, `upsertTenant`, `publish` and `archive` write handlers. Apps that want an editable collection in their navigation declare it at mount: `createTemplateResolverFeature({ collections: [{ id, kind, access: { roles }, nav }] })` \u2014 `access` belongs to the mount because a bundled feature does not know the host's role vocabulary. Each collection gets its own `<id>-list` / `<id>-item` / `<id>-set` handlers carrying that collection's access rule, so the dispatcher enforces the separation. A collection is either tenant-wide (default) or `ownership: \"user\"`, where every user keeps their own entries (mail signatures) in the separate `user-content-entry` entity — that one carries `userOwned` content, so mounting it also requires the `template-resolver-user-data` feature and an app-side migration. Replaces the former `text-content` feature, whose blocks now live here as kind `text-block`.",
+      [
+        "Every piece of editable text lives here, in one entity: mail bodies, notification texts, PDF document templates, AI prompts and plain text blocks. What a record is used for is the `kind` (`notification`, `mail-html`, `document-pdf`, `ai-prompt`, `text-block`, `image-snapshot`).",
+        "Reading is one call — `ctx.templateResolver.resolveTemplate({ tenantId, slug, kind, locale })`. It walks four levels: tenant+locale, system+locale, tenant+fallback-locale, system+fallback-locale. A tenant overrides a system default by simply having its own record; no application code changes.",
+        "Text an editor should be able to change belongs in a collection, declared at mount: `createTemplateResolverFeature({ collections: [{ id, kind, access: { roles }, nav }] })`. It appears in the navigation, and `access` is part of the mount because a bundled feature cannot know the host's roles. Each collection gets its own `<id>-list` / `<id>-item` / `<id>-set` handlers, so the dispatcher enforces the separation.",
+        "How a collection is edited follows from `contentFormat`: `plain` gives a text area, `rich` a small WYSIWYG (bold, italic, headings, lists, links). Both offer the collection's `variableSchema` as insertable chips and a preview rendered with sample data — an editor sees what `{{firstName}}` becomes without sending a mail. An app can register its own editor for a format and wins over the built-in one.",
+        'A collection is tenant-wide by default. With `ownership: "user"` every user keeps their own entries — mail signatures being the obvious case. Those rows live in the separate `user-content-entry` entity and count as user data, so mounting one also requires the `template-resolver-user-data` feature and a migration on the app side.',
+        "Replaces the former `text-content` feature; its blocks now live here as kind `text-block`.",
+      ].join("\n\n"),
     );
     r.uiHints({
       displayLabel: "Template Resolver",

package/src/template-resolver/web/client-plugin.tsx

@@ -19,6 +19,7 @@ import type {
 } from "@cosmicdrift/kumiko-framework/engine";
 import {
   CONTENT_EDITOR_ELEMENT_ID,
+  ContentPreview,
   type FeatureSchema,
   useAppFeatures,
   useContentEditor,
@@ -27,7 +28,11 @@ import {
   useQuery,
   useTranslation,
 } from "@cosmicdrift/kumiko-renderer";
-import { type ClientFeatureDefinition, PlainContentEditor } from "@cosmicdrift/kumiko-renderer-web";
+import {
+  type ClientFeatureDefinition,
+  PlainContentEditor,
+  RichContentEditor,
+} from "@cosmicdrift/kumiko-renderer-web";
 import { type FormEvent, type ReactNode, useEffect, useState } from "react";
 import {
   collectionHandlerName,
@@ -224,12 +229,21 @@ function findVariableSchema(
   features: readonly FeatureSchema[],
   collectionId?: string,
 ): readonly string[] {
-  if (collectionId === undefined) return [];
+  return Object.keys(findVariableExamples(features, collectionId));
+}
+
+// Same lookup, for the example values the Preview substitutes in for
+// `{{name}}` — the values half of the same variableSchema map.
+function findVariableExamples(
+  features: readonly FeatureSchema[],
+  collectionId?: string,
+): Readonly<Record<string, string>> {
+  if (collectionId === undefined) return {};
   for (const feature of features) {
     const match = feature.contentCollections?.find((c) => c.id === collectionId);
-    if (match !== undefined) return Object.keys(match.variableSchema ?? {});
+    if (match !== undefined) return match.variableSchema ?? {};
   }
-  return [];
+  return {};
 }
 
 // Edit form: loads the current values via by-slug, lets TenantAdmin and
@@ -278,6 +292,7 @@ function TextBlockEditor({
   const features = useAppFeatures();
   const contentFormat = findContentFormat(features, collectionId);
   const variables = findVariableSchema(features, collectionId);
+  const variableExamples = findVariableExamples(features, collectionId);
   const ContentEditor = useContentEditor(contentFormat);
   const canWrite =
     user?.roles.includes("TenantAdmin") === true || user?.roles.includes("SystemAdmin") === true;
@@ -302,6 +317,7 @@ function TextBlockEditor({
 
   const [title, setTitle] = useState("");
   const [content, setContent] = useState("");
+  const [previewing, setPreviewing] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [saveError, setSaveError] = useState<string | null>(null);
   const [savedMsg, setSavedMsg] = useState<string | null>(null);
@@ -390,13 +406,34 @@ function TextBlockEditor({
           required
         />
       </Field>
-      <Field id={CONTENT_EDITOR_ELEMENT_ID} label={t("template-resolver.editor.contentLabel")}>
-        <ContentEditor
-          value={content}
-          onChange={setContent}
-          variables={variables}
-          readOnly={disabled}
-        />
+      <Field
+        id={CONTENT_EDITOR_ELEMENT_ID}
+        label={t("template-resolver.editor.contentLabel")}
+        labelAppendix={
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            onClick={() => setPreviewing((p) => !p)}
+          >
+            {previewing ? t("kumiko.contentEditor.editMode") : t("kumiko.contentEditor.preview")}
+          </Button>
+        }
+      >
+        {previewing ? (
+          <ContentPreview
+            content={content}
+            variables={variableExamples}
+            contentFormat={contentFormat}
+          />
+        ) : (
+          <ContentEditor
+            value={content}
+            onChange={setContent}
+            variables={variables}
+            readOnly={disabled}
+          />
+        )}
       </Field>
       {saveError !== null && <Banner variant="error">{saveError}</Banner>}
       {savedMsg !== null && <Banner variant="info">{savedMsg}</Banner>}
@@ -447,6 +484,7 @@ export function textBlocksClient(opts?: {
     // another clientFeature still wins, last-wins same as columnRenderers.
     contentEditors: {
       plain: PlainContentEditor,
+      rich: RichContentEditor,
       // 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