@cosmicdrift/kumiko-samples 0.394.0 → 0.396.0

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

@@ -1,571 +1,9 @@
-import { EMPTY_VALUE_PLACEHOLDER } from "@cosmicdrift/kumiko-renderer/headless";
-// Client feature factory for the text-block content tree. Apps mount it via
-// createKumikoApp({ clientFeatures: [textBlocksClient()] }); it loads the
-// blocks from the by-tenant query, groups them by their `folder` field and
-// emits them as TreeNode[], plus the editor behind the edit action.
-//
-// **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 { useShellUser } from "@cosmicdrift/kumiko-bundled-features/auth-email-password/web";
-import type {
-  TargetRef,
-  TreeChildrenSubscribe,
-  TreeNode,
-} from "@cosmicdrift/kumiko-framework/engine";
-import { isUiAccessGranted } from "@cosmicdrift/kumiko-framework/ui-types";
-import {
-  ContentPreview,
-  type FeatureSchema,
-  useAppFeatures,
-  useContentEditor,
-  useDispatcher,
-  usePrimitives,
-  useQuery,
-  useTranslation,
-} from "@cosmicdrift/kumiko-renderer";
-import { CSRF_HEADER_NAME, readCsrfToken } from "@cosmicdrift/kumiko-renderer/live";
-import {
-  type ClientFeatureDefinition,
-  PlainContentEditor,
-  RichContentEditor,
-} from "@cosmicdrift/kumiko-renderer/web";
-import type { ContentEditorFormat } from "@cosmicdrift/kumiko-types/nav";
-import { type FormEvent, type ReactNode, useEffect, useId, useState } from "react";
-import { DEFAULT_COLLECTION_ACCESS } from "./constants.ts";
-import { DocumentBlocksContext, DocumentContentEditor } from "./document-editor.tsx";
-import { documentBlocksForKind } from "./document-toolbar-blocks.ts";
+import { type ClientFeatureDefinition, PlainContentEditor } from "@cosmicdrift/kumiko-renderer/web";
+import { createCollectionEntryCreateForm } from "./collection-entry-create-form.tsx";
+import { makeTreeProvider } from "./content-tree-provider.ts";
+import { DocumentContentEditor } from "./document-editor.tsx";
 import { defaultTranslations } from "./i18n.ts";
-import {
-  collectionHandlerName,
-  collectionQueryName,
-  TemplateResolverHandlers,
-  TemplateResolverQueries,
-} from "./qualified-names.ts";
-
-// Exported for the unit test — groupBlocksByFolder is a pure function.
-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",
-  };
-  if (block.folder === null) {
-    root.leaves.push(leaf);
-    return;
-  }
-  let cur = root;
-  for (const segment of 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.
-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);
-}
-
-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 };
-}
-
-const TENANT_OVERRIDE_DENIED_REASON = "tenant_override_requires_system_admin";
-
-// 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.
-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 }) => {
-          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) => {
-          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();
-    };
-  };
-}
-
-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.
-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;
-}
-
-function findContentFormat(
-  features: readonly FeatureSchema[],
-  collectionId?: string,
-): ContentEditorFormat | undefined {
-  return findCollection(features, collectionId)?.contentFormat;
-}
-
-// The collection's fixed variable names (ContentCollectionDefinition.
-// variableSchema) — the chip bar's data source and, keyed, the example
-// values the Preview substitutes in for `{{name}}`.
-function findVariableExamples(
-  features: readonly FeatureSchema[],
-  collectionId?: string,
-): Readonly<Record<string, string>> {
-  return findCollection(features, collectionId)?.variableSchema ?? {};
-}
-
-// Edit form: loads the current values, dispatches set on submit. 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;
-}
-
-type TextBlock = {
-  readonly slug: string;
-  readonly locale: string;
-  readonly title: string | null;
-  readonly content: string | null;
-  readonly contentFormat: string;
-  readonly folder: string | null;
-  readonly modifiedAt: string | null;
-};
-
-// 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" 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.
-// Exported for the unit test — resolveWriteContentFormat is a pure function.
-export function resolveWriteContentFormat(
-  collectionContentFormat: string | undefined,
-  loadedContentFormat: string | undefined,
-): string | undefined {
-  if (collectionContentFormat === "plain") return "plain";
-  if (collectionContentFormat === "rich" || collectionContentFormat === "document") return "html";
-  if (collectionContentFormat === "markdown") return "markdown";
-  return loadedContentFormat;
-}
-
-type SetResponse = { readonly slug: string; readonly locale: string; readonly isNew: boolean };
-
-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 {
-  // @cast-boundary visual-tree-args — TargetRef.args is erased to
-  // Record<string, unknown>; the resolver knows the action shape (see the
-  // treeActions.edit definition in feature.ts) and de-erases per action, the
-  // same way event payloads do. Optional chaining absorbs missing fields so a
-  // hand-edited URL cannot crash the editor.
-  const args = target.args as
-    | { slug?: string; locale?: string; collectionId?: string; tenantIdOverride?: string }
-    | undefined;
-  const slug = args?.slug ?? "";
-  const locale = args?.locale ?? "";
-  const tenantIdOverride = args?.tenantIdOverride;
-  // Which collection the node came from. Absent → the public text-block pair,
-  // which is what the hand-wired content tree uses.
-  const collectionId = args?.collectionId;
-
-  const { Form, Field, Input, Button, Banner, PageHeader } = usePrimitives();
-  const dispatcher = useDispatcher();
-  const user = useShellUser();
-  const t = useTranslation();
-  const contentEditorId = useId();
-  const features = useAppFeatures();
-  const contentFormat = findContentFormat(features, collectionId);
-  const variableExamples = findVariableExamples(features, collectionId);
-  const variables = Object.keys(variableExamples);
-  const collection = findCollection(features, collectionId);
-  const documentBlocks = documentBlocksForKind(collection?.kind);
-  const ContentEditor = useContentEditor(contentFormat);
-  const canWrite = canWriteContent(collection, user?.roles);
-
-  // Same split as the tree provider: a node without a collection reads through
-  // the public by-slug, a collection node through that collection's handlers.
-  const readQuery =
-    collectionId === undefined
-      ? TemplateResolverQueries.bySlug
-      : collectionQueryName(collectionId, "item");
-  const writeHandler =
-    collectionId === undefined ? TemplateResolverHandlers.set : collectionHandlerName(collectionId);
-  const {
-    data: loaded,
-    loading,
-    error: loadError,
-  } = useQuery<TextBlock | null>(
-    readQuery,
-    { slug, locale, ...(tenantIdOverride !== undefined && { tenantIdOverride }) },
-    { enabled: slug !== "" && locale !== "" },
-  );
-
-  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);
-
-  // Sync loaded data into the form state. loaded === null means the block does
-  // not exist yet — empty form for the create flow.
-  // kumiko-lint-ignore no-raw-hooks not yet converted to the framework hook set
-  useEffect(() => {
-    if (loading) return;
-    setTitle(loaded?.title ?? "");
-    setContent(loaded?.content ?? "");
-    setSaveError(null);
-    setSavedMsg(null);
-  }, [loading, loaded]);
-
-  const handleSave = async (): Promise<void> => {
-    setSubmitting(true);
-    setSaveError(null);
-    setSavedMsg(null);
-    try {
-      const resolvedContentFormat = resolveWriteContentFormat(contentFormat, loaded?.contentFormat);
-      const result = await dispatcher.write<SetResponse>(writeHandler, {
-        slug,
-        locale,
-        title,
-        content: content.length > 0 ? content : null,
-        folder: loaded?.folder ?? null,
-        ...(resolvedContentFormat !== undefined && { contentFormat: resolvedContentFormat }),
-        ...(tenantIdOverride !== undefined && { tenantIdOverride }),
-      });
-      if (result.isSuccess) {
-        refreshTree(collectionId ?? TEXT_BLOCK_TREE_KEY);
-        setSavedMsg(
-          result.data.isNew
-            ? t("template-resolver.editor.created")
-            : t("template-resolver.editor.saved"),
-        );
-        return;
-      }
-      setSaveError(
-        result.error.message ?? result.error.code ?? t("template-resolver.editor.saveFailed"),
-      );
-    } catch (e) {
-      // Network blip / dispatcher throw — otherwise submitting stays true and
-      // the save button is locked forever with no feedback.
-      setSaveError(e instanceof Error ? e.message : t("template-resolver.editor.networkError"));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const onSubmit = (e?: FormEvent): void => {
-    e?.preventDefault();
-    void handleSave();
-  };
-
-  const disabled = submitting || loading || !canWrite;
-  const headerTitle = title || 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} />}
-      <Form
-        onSubmit={onSubmit}
-        testId="text-block-editor"
-        title={title || slug || EMPTY_VALUE_PLACEHOLDER}
-        subtitle={locale !== "" ? `${slug} · (${locale})` : slug}
-        actions={
-          canWrite ? (
-            <Button type="submit" loading={submitting} disabled={disabled}>
-              {submitting
-                ? t("template-resolver.editor.saving")
-                : t("template-resolver.editor.save")}
-            </Button>
-          ) : undefined
-        }
-      >
-        {loading && <Banner variant="loading">{t("template-resolver.editor.loading")}</Banner>}
-        {loadError !== null && (
-          <Banner variant="error">
-            {t("template-resolver.editor.loadFailed")}: {loadError.code}
-          </Banner>
-        )}
-        {!canWrite && !loading && (
-          <Banner variant="info">{t("template-resolver.editor.readOnly")}</Banner>
-        )}
-        <Field id="text-block-title" label={t("template-resolver.editor.titleLabel")} required>
-          <Input
-            kind="text"
-            id="text-block-title"
-            name="text-block-title"
-            value={title}
-            onChange={setTitle}
-            disabled={disabled}
-            required
-          />
-        </Field>
-        <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={content}
-              variables={variableExamples}
-              contentFormat={contentFormat}
-            />
-          ) : (
-            <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>}
-        {savedMsg !== null && <Banner variant="info">{savedMsg}</Banner>}
-      </Form>
-    </>
-  );
-}
+import { TextBlockEditor } from "./text-block-editor.tsx";
 
 // `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
@@ -605,19 +43,13 @@ export function textBlocksClient(opts?: {
     }),
     resolvers: {
       "template-resolver:edit": TextBlockEditor,
+      "template-resolver:create": createCollectionEntryCreateForm(tenantId),
     },
-    // 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.
+    // An app-registered editor for a format 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
-      // forwarded-ref variant if a collection actually needs one.
-      markdown: PlainContentEditor,
     },
     translations: defaultTranslations,
   };