@cosmicdrift/kumiko-samples 0.394.0 → 0.396.0

package/packages/bundled-features/src/template-resolver/web/collection-entry-create-form.tsx

@@ -0,0 +1,105 @@
+import type { TargetRef } from "@cosmicdrift/kumiko-framework/engine";
+import type { FieldIssue } from "@cosmicdrift/kumiko-framework/errors";
+import { FormScreenLayout, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import { ContentField } from "./content-field.tsx";
+import { useCollectionEntryCreate } from "./use-collection-entry-create.ts";
+
+const SLUG_INVALID_ISSUE: FieldIssue = {
+  path: "slug",
+  code: "slug_invalid",
+  i18nKey: "template-resolver.editor.slugInvalid",
+};
+
+// A new entry in the app's own locale; the tree then lists it under that locale like any other.
+// `tenantId` is the plugin's SystemAdmin tenant, the one the collection tree lists, so a new entry
+// lands where the tree looks. Same rule as the tree: per-user collections stay on the session tenant.
+export function createCollectionEntryCreateForm(
+  tenantId: string | undefined,
+): (props: { readonly target: TargetRef; readonly onClose: () => void }) => ReactNode {
+  return function BoundCollectionEntryCreateForm(props) {
+    return <CollectionEntryCreateForm {...props} tenantId={tenantId} />;
+  };
+}
+
+type CreateState = ReturnType<typeof useCollectionEntryCreate>;
+
+function CreateFields({ state }: { readonly state: CreateState }): ReactNode {
+  const { Field, Input, Banner } = usePrimitives();
+  const t = useTranslation();
+  const { canWrite } = state.editorContext;
+  return (
+    <>
+      {!canWrite && <Banner variant="info">{t("template-resolver.editor.readOnly")}</Banner>}
+      <Field
+        id="create-entry-slug"
+        label={t("template-resolver.editor.slugLabel")}
+        required
+        {...(state.slugInvalid && { issues: [SLUG_INVALID_ISSUE] })}
+      >
+        <Input
+          kind="text"
+          id="create-entry-slug"
+          name="create-entry-slug"
+          value={state.slug}
+          onChange={state.setSlug}
+          disabled={state.disabled}
+          required
+        />
+      </Field>
+      <Field id="create-entry-title" label={t("template-resolver.editor.titleLabel")} required>
+        <Input
+          kind="text"
+          id="create-entry-title"
+          name="create-entry-title"
+          value={state.title}
+          onChange={state.setTitle}
+          disabled={state.disabled}
+          required
+        />
+      </Field>
+      <ContentField
+        editorContext={state.editorContext}
+        value={state.content}
+        onChange={state.setContent}
+        disabled={state.disabled}
+      />
+      {state.error !== null && <Banner variant="error">{state.error}</Banner>}
+    </>
+  );
+}
+
+export function CollectionEntryCreateForm({
+  target,
+  tenantId,
+}: {
+  readonly target: TargetRef;
+  readonly onClose: () => void;
+  readonly tenantId?: string | undefined;
+}): ReactNode {
+  const { Button, PageHeader, Section } = usePrimitives();
+  const t = useTranslation();
+  const state = useCollectionEntryCreate(target, tenantId);
+  return (
+    <>
+      {PageHeader !== undefined && <PageHeader title={state.headerTitle} />}
+      <FormScreenLayout
+        onSubmit={() => {
+          void state.create();
+        }}
+        testId="collection-entry-create"
+        actions={
+          state.editorContext.canWrite ? (
+            <Button type="submit" loading={state.submitting} disabled={state.createDisabled}>
+              {t("template-resolver.editor.create")}
+            </Button>
+          ) : undefined
+        }
+      >
+        <Section>
+          <CreateFields state={state} />
+        </Section>
+      </FormScreenLayout>
+    </>
+  );
+}

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

@@ -0,0 +1,33 @@
+import { isUiAccessGranted } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { FeatureSchema } from "@cosmicdrift/kumiko-renderer";
+import { DEFAULT_COLLECTION_ACCESS } from "./constants.ts";
+
+export type ContentCollectionSchema = NonNullable<FeatureSchema["contentCollections"]>[number];
+
+// A node without a collectionId (the hand-wired text-block tree) has no
+// collection to look up — contentFormat/variableSchema then fall back to
+// their own callers' defaults.
+export function findCollection(
+  features: readonly FeatureSchema[],
+  collectionId?: string,
+): ContentCollectionSchema | undefined {
+  if (collectionId === undefined) return undefined;
+  for (const feature of features) {
+    const match = feature.contentCollections?.find((c) => c.id === collectionId);
+    if (match !== undefined) return match;
+  }
+  return undefined;
+}
+
+// Who may save follows the server: a collection's set handler carries the
+// collection's own access rule (one rule for list, item and set), the public
+// text-block pair stays TenantAdmin/SystemAdmin. Other users see the form read-only.
+export function canWriteContent(
+  collection: Pick<ContentCollectionSchema, "access"> | undefined,
+  roles: readonly string[] | undefined,
+): boolean {
+  if (collection !== undefined) {
+    return isUiAccessGranted(collection.access ?? DEFAULT_COLLECTION_ACCESS, roles);
+  }
+  return roles?.includes("TenantAdmin") === true || roles?.includes("SystemAdmin") === true;
+}

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

@@ -63,6 +63,9 @@ export function isCollectionRefusedKind(
   return isOneOf(COLLECTION_REFUSED_KINDS, kind);
 }
 
+export const SLUG_PATTERN = /^[a-z0-9][a-z0-9-]*$/;
+export const SLUG_MAX_LENGTH = 80;
+
 export const CONTENT_FORMATS = ["markdown", "mjml", "html", "plain"] as const;
 export type ContentFormat = (typeof CONTENT_FORMATS)[number];
 

package/packages/bundled-features/src/template-resolver/web/content-field.tsx

@@ -0,0 +1,61 @@
+import { ContentPreview, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { type ReactNode, useId, useState } from "react";
+import { DocumentBlocksContext } from "./document-editor.tsx";
+import type { CollectionEditorContext } from "./use-collection-editor-context.ts";
+
+export type ContentFieldProps = {
+  readonly editorContext: CollectionEditorContext;
+  readonly value: string;
+  readonly onChange: (value: string) => void;
+  readonly disabled: boolean;
+};
+
+// The content input shared by the edit and create forms: the collection's editor
+// plus a toggle to its preview with the example variables substituted.
+export function ContentField({
+  editorContext,
+  value,
+  onChange,
+  disabled,
+}: ContentFieldProps): ReactNode {
+  const { Field, Button } = usePrimitives();
+  const t = useTranslation();
+  const contentEditorId = useId();
+  const [previewing, setPreviewing] = useState(false);
+  const { ContentEditor, contentFormat, documentBlocks, variableExamples, variables } =
+    editorContext;
+  return (
+    <Field
+      id={contentEditorId}
+      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={value}
+          variables={variableExamples}
+          contentFormat={contentFormat}
+        />
+      ) : (
+        <DocumentBlocksContext.Provider value={documentBlocks}>
+          <ContentEditor
+            id={contentEditorId}
+            value={value}
+            onChange={onChange}
+            variables={variables}
+            readOnly={disabled}
+          />
+        </DocumentBlocksContext.Provider>
+      )}
+    </Field>
+  );
+}

package/packages/bundled-features/src/template-resolver/web/content-tree-provider.ts

@@ -0,0 +1,256 @@
+// Content tree behind the text-block and collection navs: loads the blocks from the
+// by-tenant (or a collection's list) query, groups them by their `folder` field and
+// emits them as TreeNode[].
+//
+// **Folder grouping**: block.folder !== null puts the node under a container
+// node labelled with the folder; folder === null keeps it at the root.
+//
+// **State**: TreeNode.state = "filled" when content is set, otherwise "stub"
+// (a hint that the slug exists but is empty).
+
+import type { TreeChildrenSubscribe, TreeNode } from "@cosmicdrift/kumiko-framework/engine";
+import { CSRF_HEADER_NAME, readCsrfToken } from "@cosmicdrift/kumiko-renderer/live";
+import type { ContentCollectionSchema } from "./collection-lookup.ts";
+import { collectionQueryName, TemplateResolverQueries } from "./qualified-names.ts";
+import { TENANT_OVERRIDE_DENIED_REASON } from "./tenant-override.ts";
+
+export type BlockSummary = {
+  readonly slug: string;
+  readonly locale: string;
+  readonly title: string | null;
+  readonly content: string | null;
+  readonly folder: string | null;
+  readonly modifiedAt: string | null;
+};
+
+type ByTenantResponse = {
+  readonly data: { readonly blocks: readonly BlockSummary[] };
+};
+
+// Multi-level folder splitting: `folder` is a `/`-separated path, the tree
+// splits per segment and creates nested folder nodes:
+//   block.folder = null              → root leaf
+//   block.folder = "page"            → folder page > leaf
+//   block.folder = "page/marketing"  → folder page > folder marketing > leaf
+//
+// **Folder/leaf collision**: a block with `folder=null, slug="page"` and
+// another with `folder="page"` both live on the same level — the folder with
+// children plus a clickable leaf. Visually distinct (chevron + folder icon),
+// no crash, no surprise.
+
+type FolderNode = {
+  readonly leaves: TreeNode[];
+  readonly subFolders: Map<string, FolderNode>;
+};
+
+function newFolderNode(): FolderNode {
+  return { leaves: [], subFolders: new Map() };
+}
+
+function attachBlock(
+  root: FolderNode,
+  block: BlockSummary,
+  tenantIdOverride?: string,
+  collectionId?: string,
+): void {
+  const leaf: TreeNode = {
+    label: block.title || block.slug,
+    icon: "file",
+    target: {
+      featureId: "template-resolver",
+      action: "edit",
+      // tenantIdOverride and collectionId travel with the node → the editor
+      // reads and writes through the same tenant and the same collection the
+      // tree was loaded from. Omitted → session tenant, public text-blocks.
+      args: {
+        slug: block.slug,
+        locale: block.locale,
+        ...(tenantIdOverride !== undefined && { tenantIdOverride }),
+        ...(collectionId !== undefined && { collectionId }),
+      },
+    },
+    state: block.content ? "filled" : "stub",
+  };
+  let cur = root;
+  for (const segment of block.folder === null ? [] : block.folder.split("/")) {
+    let next = cur.subFolders.get(segment);
+    if (next === undefined) {
+      next = newFolderNode();
+      cur.subFolders.set(segment, next);
+    }
+    cur = next;
+  }
+  cur.leaves.push(leaf);
+}
+
+function renderFolderNode(node: FolderNode): TreeNode[] {
+  // Leaves first (root items), then folders alphabetically.
+  const result: TreeNode[] = [...node.leaves];
+  for (const folderName of [...node.subFolders.keys()].sort()) {
+    const subNode = node.subFolders.get(folderName);
+    if (subNode === undefined) continue;
+    result.push({
+      label: folderName,
+      icon: "folder",
+      state: "filled",
+      children: renderFolderNode(subNode),
+    });
+  }
+  return result;
+}
+
+export function groupBlocksByFolder(
+  blocks: readonly BlockSummary[],
+  tenantIdOverride?: string,
+  collectionId?: string,
+): readonly TreeNode[] {
+  const root = newFolderNode();
+  for (const block of blocks) {
+    attachBlock(root, block, tenantIdOverride, collectionId);
+  }
+  const rendered = renderFolderNode(root);
+  if (rendered.length === 0) return [];
+  return [
+    {
+      label: "Content",
+      icon: "folder",
+      state: "filled",
+      children: rendered,
+    },
+  ];
+}
+
+// A save in the editor re-fires the tree of the collection it wrote to. The
+// SSE refresh does not cover every collection: per-user entries carry no
+// entity signal, because naming their ids to every collection reader would
+// reveal when colleagues change their own entries.
+export const TEXT_BLOCK_TREE_KEY = "";
+const treeRefreshListeners = new Map<string, Set<() => void>>();
+
+function onTreeRefresh(treeKey: string, listener: () => void): () => void {
+  const listeners = treeRefreshListeners.get(treeKey) ?? new Set();
+  listeners.add(listener);
+  treeRefreshListeners.set(treeKey, listeners);
+  return () => listeners.delete(listener);
+}
+
+export function refreshTree(treeKey: string): void {
+  for (const listener of treeRefreshListeners.get(treeKey) ?? []) listener();
+}
+
+type BlockListResult =
+  | { readonly ok: true; readonly blocks: readonly BlockSummary[] }
+  | { readonly ok: false; readonly status: number; readonly body: string };
+
+async function postBlockList(
+  queryType: string,
+  tenantIdOverride: string | undefined,
+): Promise<BlockListResult> {
+  // CSRF header is mandatory on authenticated requests (auth-middleware
+  // double-submit pattern). Anonymous/pre-login has no token → header
+  // omitted → the server takes the anonymous path.
+  const headers: Record<string, string> = { "content-type": "application/json" };
+  const csrf = readCsrfToken();
+  if (csrf !== undefined) headers[CSRF_HEADER_NAME] = csrf;
+  // kumiko-lint-ignore no-raw-hooks not yet converted to the framework hook set
+  const response = await fetch("/api/query", {
+    method: "POST",
+    headers,
+    body: JSON.stringify({
+      type: queryType,
+      payload: tenantIdOverride !== undefined ? { tenantIdOverride } : {},
+    }),
+  });
+  if (!response.ok) {
+    return {
+      ok: false,
+      status: response.status,
+      body: await response.text().catch(() => response.statusText),
+    };
+  }
+  const data: ByTenantResponse = await response.json();
+  return { ok: true, blocks: data.data.blocks };
+}
+
+// The dispatcher accepts tenantIdOverride from a SystemAdmin only, and the
+// provider cannot see the session roles. Everyone else gets this exact denial
+// and reads their session tenant instead, which is the only tenant they may
+// edit anyway.
+function isTenantOverrideDenied(result: BlockListResult): boolean {
+  return !result.ok && result.status === 403 && result.body.includes(TENANT_OVERRIDE_DENIED_REASON);
+}
+
+async function loadBlocks(
+  queryType: string,
+  tenantIdOverride: string | undefined,
+): Promise<{ readonly blocks: readonly BlockSummary[]; readonly tenantIdOverride?: string }> {
+  let result = await postBlockList(queryType, tenantIdOverride);
+  let effectiveOverride = tenantIdOverride;
+  if (tenantIdOverride !== undefined && isTenantOverrideDenied(result)) {
+    result = await postBlockList(queryType, undefined);
+    effectiveOverride = undefined;
+  }
+  if (!result.ok) {
+    // 403 (CSRF/auth) or 5xx — explicit error instead of silent empty.
+    throw new Error(`text-block load failed: ${result.status} ${result.body}`);
+  }
+  return {
+    blocks: result.blocks,
+    ...(effectiveOverride !== undefined && { tenantIdOverride: effectiveOverride }),
+  };
+}
+
+// tenantIdOverride (SystemAdmin-only) lets an app point the content tree at a
+// tenant other than the session's — publicstatus seeds marketing/legal blocks
+// on SYSTEM_TENANT_ID, so its SystemAdmin must read that tenant, not their own.
+// Without a collection: the anonymous-capable by-tenant query, so a public
+// page keeps its content sidebar without a session. With one: that
+// collection's own list handler, which carries the collection's access rule.
+export function makeTreeProvider(
+  tenantIdOverride?: string,
+  collection?: Pick<ContentCollectionSchema, "id" | "ownership">,
+): TreeChildrenSubscribe {
+  const collectionId = collection?.id;
+  const queryType =
+    collectionId === undefined
+      ? TemplateResolverQueries.byTenant
+      : collectionQueryName(collectionId, "list");
+  // A per-user entry belongs to its author in the session tenant; pointing the
+  // tree at another tenant would only hide the author's own entries.
+  const requestedOverride = collection?.ownership === "user" ? undefined : tenantIdOverride;
+  return () => (emit, emitError) => {
+    let active = true;
+    // Each denial logs a client-fault warning on the server, so a reload after a
+    // save does not ask again once this subscription learned the answer.
+    let override = requestedOverride;
+    const load = (): void => {
+      loadBlocks(queryType, override)
+        .then(({ blocks, tenantIdOverride: effectiveOverride }) => {
+          // skip: subscription was cancelled while the request was in flight
+          if (!active) return;
+          override = effectiveOverride;
+          // The app-side r.nav node IS the "Content" container → the provider's
+          // children are the folders/leaves below it, not the wrapper.
+          const content = groupBlocksByFolder(blocks, effectiveOverride, collectionId)[0];
+          emit(content !== undefined && Array.isArray(content.children) ? content.children : []);
+        })
+        .catch((e) => {
+          // skip: subscription was cancelled while the request was in flight
+          if (!active) return;
+          // Explicit error signal via emitError; ProviderBranch shows a banner
+          // plus retry. Falls back to emit([]) for consumers without emitError.
+          if (emitError) {
+            emitError(e instanceof Error ? e : new Error(String(e)));
+          } else {
+            emit([]);
+          }
+        });
+    };
+    load();
+    const unsubscribe = onTreeRefresh(collectionId ?? TEXT_BLOCK_TREE_KEY, load);
+    return () => {
+      active = false;
+      unsubscribe();
+    };
+  };
+}

package/packages/bundled-features/src/template-resolver/web/document-reference-name.ts

@@ -0,0 +1,12 @@
+const REFERENCE_NAME = /^[A-Za-z_][A-Za-z0-9_]*(\.[A-Za-z_][A-Za-z0-9_]*)*$/;
+const FORBIDDEN_REFERENCE_SEGMENTS = new Set(["__proto__", "prototype", "constructor"]);
+
+// Segments that hit the prototype chain are refused: the renderer later walks
+// the dotted path into a data object. Kept apart from document-schema so client code
+// can validate a name without loading tiptap.
+export function isDocumentReferenceName(value: string): boolean {
+  return (
+    REFERENCE_NAME.test(value) &&
+    !value.split(".").some((segment) => FORBIDDEN_REFERENCE_SEGMENTS.has(segment))
+  );
+}

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

@@ -8,20 +8,21 @@ import { Link } from "@tiptap/extension-link";
 import { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table";
 import StarterKit from "@tiptap/starter-kit";
 import { createDocumentImagesNode } from "./document-images.ts";
+import { isDocumentReferenceName } from "./document-reference-name.ts";
 import { createDocumentStepsNode } from "./document-steps.ts";
 
 const PLACEHOLDER_HREF = /^\{\{(.+)\}\}$/;
-const REFERENCE_NAME = /^[A-Za-z_][A-Za-z0-9_]*(\.[A-Za-z_][A-Za-z0-9_]*)*$/;
 const RESOURCE_KEY = /^[A-Za-z0-9][A-Za-z0-9_.-]*$/;
 const ALLOWED_LINK_SCHEMES = ["https://", "http://", "mailto:", "tel:"] as const;
 
+export { isDocumentReferenceName };
+
 export function isDocumentPlaceholderHref(href: string): boolean {
   const name = PLACEHOLDER_HREF.exec(href)?.[1];
   return name !== undefined && isDocumentReferenceName(name);
 }
 
 const UNSAFE_URL_CHARACTERS = new Set(["<", ">", '"']);
-const FORBIDDEN_REFERENCE_SEGMENTS = new Set(["__proto__", "prototype", "constructor"]);
 
 function hasUnsafeUrlCharacter(value: string): boolean {
   return Array.from(value).some((character) => {
@@ -53,15 +54,6 @@ export function isAllowedDocumentLinkHref(href: string): boolean {
   return hasAllowedLinkScheme(href) || isDocumentPlaceholderHref(href);
 }
 
-// Segments that hit the prototype chain are refused: the renderer later walks
-// the dotted path into a data object.
-export function isDocumentReferenceName(value: string): boolean {
-  return (
-    REFERENCE_NAME.test(value) &&
-    !value.split(".").some((segment) => FORBIDDEN_REFERENCE_SEGMENTS.has(segment))
-  );
-}
-
 export function isDocumentResourceKey(value: string): boolean {
   return RESOURCE_KEY.test(value);
 }

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

@@ -186,6 +186,14 @@ export const defaultTranslations: TranslationsByLocale = {
     "template-resolver.editor.networkError": "Network error while saving.",
     "template-resolver.editor.loading": "Loading current version…",
     "template-resolver.editor.loadFailed": "Could not load block",
+    "template-resolver.editor.create": "Create",
+    "template-resolver.editor.newEntry": "New entry",
+    "template-resolver.editor.newEntryTitle": "New {label}",
+    "template-resolver.editor.slugLabel": "Slug",
+    "template-resolver.editor.slugInvalid":
+      "Use lowercase letters, digits and dashes only; start with a letter or digit.",
+    "templateResolver.errors.collection.slugExists":
+      "An entry with the slug “{detail}” already exists. Pick another one.",
     "template-resolver.editor.readOnly": "Read-only. Your role does not allow changes here.",
   },
 };

package/packages/bundled-features/src/template-resolver/web/legacy-variable-text.ts

@@ -0,0 +1,30 @@
+import { escapeHtmlAttr } from "@cosmicdrift/kumiko-renderer/headless";
+import { isDocumentReferenceName } from "./document-reference-name.ts";
+
+// Matches tags with quoted attribute values, so a `>` inside an attribute does not end the tag.
+// The unquoted branch excludes `<` so a scan stops at the next tag start (no quadratic backtracking).
+const HTML_TAG = /(<(?:"[^"]*"|'[^']*'|[^"'<>])*>)/;
+// Triple braces are raw output and `{{else}}`/`{{this}}` belong to blocks; neither is a variable.
+const TEXT_VARIABLE = /(?<!\{)\{\{\s*([^{}\s]+)\s*\}\}(?!\})/g;
+const BLOCK_KEYWORDS: ReadonlySet<string> = new Set(["else", "this"]);
+
+function isLegacyVariableName(name: string): boolean {
+  return isDocumentReferenceName(name) && !BLOCK_KEYWORDS.has(name);
+}
+
+// Content saved by the old editors holds `{{name}}` as plain text; the document editor
+// keeps variables as data-variable nodes and would show it as literal text.
+export function convertLegacyVariableText(html: string): string {
+  return html
+    .split(HTML_TAG)
+    .map((part, index) =>
+      index % 2 === 1
+        ? part
+        : part.replace(TEXT_VARIABLE, (match, name: string) =>
+            isLegacyVariableName(name)
+              ? `<span data-variable="${escapeHtmlAttr(name)}"></span>`
+              : match,
+          ),
+    )
+    .join("");
+}

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

@@ -0,0 +1,7 @@
+import type { DispatcherError } from "@cosmicdrift/kumiko-renderer/headless";
+
+export const TENANT_OVERRIDE_DENIED_REASON = "tenant_override_requires_system_admin";
+
+export function isTenantOverrideDeniedError(error: DispatcherError): boolean {
+  return error.details?.["reason"] === TENANT_OVERRIDE_DENIED_REASON;
+}

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

@@ -0,0 +1,92 @@
+import type { TargetRef } from "@cosmicdrift/kumiko-framework/engine";
+import { FormScreenLayout, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import { ContentField } from "./content-field.tsx";
+import { useTextBlockEditor } from "./use-text-block-editor.ts";
+
+type EditorState = ReturnType<typeof useTextBlockEditor>;
+
+function LoadBanners({ state }: { readonly state: EditorState }): ReactNode {
+  const { Banner } = usePrimitives();
+  const t = useTranslation();
+  return (
+    <>
+      {state.loading && <Banner variant="loading">{t("template-resolver.editor.loading")}</Banner>}
+      {state.loadError !== null && (
+        <Banner variant="error">
+          {t("template-resolver.editor.loadFailed")}: {state.loadError.code}
+        </Banner>
+      )}
+      {!state.canWrite && !state.loading && (
+        <Banner variant="info">{t("template-resolver.editor.readOnly")}</Banner>
+      )}
+    </>
+  );
+}
+
+function SaveBanners({ state }: { readonly state: EditorState }): ReactNode {
+  const { Banner } = usePrimitives();
+  return (
+    <>
+      {state.saveError !== null && <Banner variant="error">{state.saveError}</Banner>}
+      {state.savedMsg !== null && <Banner variant="info">{state.savedMsg}</Banner>}
+    </>
+  );
+}
+
+export function TextBlockEditor({
+  target,
+}: {
+  readonly target: TargetRef;
+  // onClose stays part of the resolver contract (the visual panel passes it)
+  // but is unused: tree selection navigates, there is no close button.
+  readonly onClose: () => void;
+}): ReactNode {
+  const { Button, Field, Input, PageHeader, Section } = usePrimitives();
+  const t = useTranslation();
+  const state = useTextBlockEditor(target);
+  const headerTitle = state.title || state.slug || undefined;
+
+  return (
+    <>
+      {/* The editor opens beside the routed screen, so without this the shell header keeps that screen's title. */}
+      {PageHeader !== undefined && headerTitle !== undefined && <PageHeader title={headerTitle} />}
+      <FormScreenLayout
+        onSubmit={() => {
+          void state.save();
+        }}
+        testId="text-block-editor"
+        description={state.locale !== "" ? `${state.slug} · (${state.locale})` : state.slug}
+        actions={
+          state.canWrite ? (
+            <Button type="submit" loading={state.submitting} disabled={state.disabled}>
+              {t(state.saveLabelKey)}
+            </Button>
+          ) : undefined
+        }
+      >
+        <Section>
+          <LoadBanners state={state} />
+          <Field id="text-block-title" label={t("template-resolver.editor.titleLabel")} required>
+            <Input
+              kind="text"
+              id="text-block-title"
+              name="text-block-title"
+              value={state.title}
+              onChange={state.setTitle}
+              disabled={state.disabled}
+              required
+            />
+          </Field>
+          <ContentField
+            editorContext={state.editorContext}
+            value={state.content}
+            onChange={state.setContent}
+            disabled={state.disabled}
+          />
+          <SaveBanners state={state} />
+        </Section>
+      </FormScreenLayout>
+    </>
+  );
+}