@cosmicdrift/kumiko-samples 0.389.0 → 0.390.0

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

@@ -1,5 +1,6 @@
 import { fetchOne, selectMany } from "@cosmicdrift/kumiko-framework/db";
 import type {
+  BeforeTransactionContext,
   BeforeTransactionResult,
   ConfigAccessor,
   HandlerContext,
@@ -100,7 +101,7 @@ function isAttachmentKey(links: Readonly<Record<string, LinkedResourceEntry>>, k
 // so both receive the target tenant's db and identity.
 function uploadToTenant(
   args: {
-    readonly ctx: HandlerContext;
+    readonly ctx: PrepareContext;
     readonly user: SessionUser;
     readonly tenantId: TenantId;
   },
@@ -110,7 +111,7 @@ function uploadToTenant(
   return uploadFileBytesBeforeTransaction(
     {
       db: requireForTenant(ctx, tenantId).db,
-      files: fileContextForTenant(ctx, ctx.user.tenantId, tenantId),
+      services: { files: fileContextForTenant(ctx, ctx.user.tenantId, tenantId) },
       registry: ctx.registry,
       user: { ...user, tenantId },
     },
@@ -119,7 +120,7 @@ function uploadToTenant(
 }
 
 type TenantScope = {
-  readonly ctx: HandlerContext;
+  readonly ctx: PrepareContext;
   readonly user: SessionUser;
   readonly tenantId: TenantId;
 };
@@ -133,7 +134,7 @@ function createFileRefFromPrepared(scope: TenantScope, upload: UploadedFileBytes
 }
 
 async function linkImage(args: {
-  readonly ctx: HandlerContext;
+  readonly ctx: PrepareContext;
   readonly user: SessionUser;
   readonly tenantId: TenantId;
   readonly row: TemplateResourceRow;
@@ -197,7 +198,7 @@ type ImageTarget = {
 
 // Runs before the upload (reject early, store nothing) and again in the transaction on the fresh row.
 async function checkImageTarget(args: {
-  readonly ctx: HandlerContext;
+  readonly ctx: PrepareContext;
   readonly tenantId: TenantId;
   readonly templateId?: string | undefined;
   readonly key?: string | undefined;
@@ -220,7 +221,7 @@ async function checkImageTarget(args: {
 // beforeTransaction half: normalizes the image and uploads it to the target tenant's storage.
 // The caller is responsible for authorization; the function trusts tenantId.
 export async function prepareTemplateResourceBeforeTransaction(args: {
-  readonly ctx: HandlerContext;
+  readonly ctx: PrepareContext;
   readonly user: SessionUser;
   readonly tenantId: TenantId;
   readonly bytes: Uint8Array;
@@ -260,6 +261,10 @@ export async function prepareTemplateResourceBeforeTransaction(args: {
   };
 }
 
+// The prepare phase runs before the transaction, so it must not rely on anything the in-transaction
+// context adds (events, dispatch.write).
+export type PrepareContext = HandlerContext | BeforeTransactionContext;
+
 export type Release = () => Promise<void>;
 
 // Tries every release, so one failing delete does not strand the other uploads; the first rejection is rethrown.
@@ -271,13 +276,13 @@ export async function releaseAll(releases: readonly Release[]): Promise<void> {
 
 // Failure paths: a failing release must not replace the upload error the caller needs to see.
 export async function releaseAfterFailure(
-  ctx: HandlerContext,
+  ctx: PrepareContext,
   releases: readonly Release[],
 ): Promise<void> {
   try {
     await releaseAll(releases);
   } catch (releaseError) {
-    ctx.log?.warn("template upload rollback: releasing stored files failed", {
+    ctx.obs.log?.warn("template upload rollback: releasing stored files failed", {
       error: releaseError instanceof Error ? releaseError.message : String(releaseError),
     });
   }
@@ -308,7 +313,7 @@ function sourceUnreadable(): WriteResult<never> {
 // Undefined: the fileRef row exists but its bytes cannot be read, which must not look like a
 // deleted file. The provider is chosen by the tenant of the fileRef, not by the caller's.
 async function readCopySource(
-  ctx: HandlerContext,
+  ctx: PrepareContext,
   fileRefId: string,
 ): Promise<{ contentType: string; bytes: Uint8Array } | null | undefined> {
   try {
@@ -320,7 +325,7 @@ async function readCopySource(
     });
     return found === null ? null : { contentType: found.contentType, bytes: found.content };
   } catch (cause) {
-    ctx.log?.warn("template copy: source file could not be read", {
+    ctx.obs.log?.warn("template copy: source file could not be read", {
       fileRefId,
       errorClass: cause instanceof Error ? cause.name : typeof cause,
     });
@@ -333,7 +338,7 @@ async function readCopySource(
 // attachments. An entry whose source file is gone is left out: it could not be resolved at render
 // time either. A failed or throwing upload releases the ones before it.
 export async function prepareLinkedResourceCopiesBeforeTransaction(args: {
-  readonly ctx: HandlerContext;
+  readonly ctx: PrepareContext;
   readonly user: SessionUser;
   readonly tenantId: TenantId;
   readonly resources: Readonly<Record<string, LinkedResourceEntry>>;
@@ -525,7 +530,7 @@ type AttachmentTarget = {
 
 // Runs before the upload (reject early, store nothing) and again in the transaction on the fresh row.
 async function checkAttachmentTarget(args: {
-  readonly ctx: HandlerContext;
+  readonly ctx: PrepareContext;
   readonly tenantId: TenantId;
   readonly templateId: string;
   readonly key: string;
@@ -550,7 +555,7 @@ async function checkAttachmentTarget(args: {
 // beforeTransaction half: validates a PDF/PNG/JPEG and uploads it unchanged to the target tenant's
 // storage. With templateId the template is checked first; a bundle import has none yet.
 export async function prepareTemplateAttachmentBeforeTransaction(args: {
-  readonly ctx: HandlerContext;
+  readonly ctx: PrepareContext;
   readonly user: SessionUser;
   readonly tenantId: TenantId;
   readonly bytes: Uint8Array;

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

@@ -27,16 +27,16 @@ type FileRefRow = {
 // Reads the file behind a template resource. Null when the fileRef is unknown
 // to the caller's tenant or has no bytes.
 export async function readTemplateResource(
-  ctx: Pick<HandlerContext, "db" | "files" | "user">,
+  ctx: Pick<HandlerContext, "db" | "services" | "user">,
   fileRefId: string,
 ): Promise<TemplateResourceFile | null> {
-  if (!ctx.files) return null;
+  if (!ctx.services.files) return null;
   const row = await fetchOne<FileRefRow>(ctx.db, fileRefsTable, {
     id: fileRefId,
     isDeleted: false,
   });
   if (!row) return null;
-  const handle = ctx.files.refFromFileRef(row);
+  const handle = ctx.services.files.refFromFileRef(row);
   if (!(await handle.exists())) return null;
   return { fileName: row.fileName, contentType: row.mimeType, bytes: await handle.read() };
 }
@@ -44,7 +44,7 @@ export async function readTemplateResource(
 // Replaces the whole key map of one row with files that are already stored (bundle import,
 // copy-locale). Single keys go through storePreparedTemplateResource and resource-remove.
 export async function attachTemplateResources(
-  ctx: Pick<HandlerContext, "forTenant">,
+  ctx: Pick<HandlerContext, "tenants">,
   args: {
     readonly user: SessionUser;
     readonly tenantId: TenantId;

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

@@ -3,7 +3,7 @@
 // No bun:test here — callers register cases with their own test runner.
 
 import type { DbConnection } from "@cosmicdrift/kumiko-framework/db";
-import { seedRow } from "@cosmicdrift/kumiko-testing/helpers";
+import { seedRowViaEventStore } from "@cosmicdrift/kumiko-testing/helpers";
 import type { ResolveRequest, TemplateResource } from "./api.ts";
 import { TemplateNotFoundError } from "./api.ts";
 import { templateResourcesTable } from "./table.ts";
@@ -50,7 +50,7 @@ type SeedTemplateArgs = {
 };
 
 async function seedTemplate(db: DbConnection, args: SeedTemplateArgs): Promise<void> {
-  await seedRow(db, templateResourcesTable, {
+  await seedRowViaEventStore(db, templateResourcesTable, {
     tenantId: args.tenantId,
     slug: args.slug,
     kind: args.kind,

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

@@ -0,0 +1,222 @@
+import { usePrimitives, VariableChips } from "@cosmicdrift/kumiko-renderer";
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight } from "lucide-react";
+import type { ReactNode } from "react";
+import { insertAndCloseOf, type PanelModel } from "./document-insert-model.ts";
+import { DOCUMENT_TEXT_ALIGNMENTS, type DocumentTextAlignment } from "./document-schema.ts";
+import { type PanelKind, variableLabelOf } from "./document-tiptap-helpers.ts";
+
+const ALIGNMENT_ICONS: Record<DocumentTextAlignment, ReactNode> = {
+  left: <AlignLeft size={16} />,
+  center: <AlignCenter size={16} />,
+  right: <AlignRight size={16} />,
+  justify: <AlignJustify size={16} />,
+};
+
+const ALIGNMENT_LABEL_KEYS: Record<DocumentTextAlignment, string> = {
+  left: "template-resolver.documentEditor.alignLeft",
+  center: "template-resolver.documentEditor.alignCenter",
+  right: "template-resolver.documentEditor.alignRight",
+  justify: "template-resolver.documentEditor.alignJustify",
+};
+
+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, labels, value, onChange }: OptionSelectProps): ReactNode {
+  const { Field, Input } = usePrimitives();
+  return (
+    <Field id={id} label={label}>
+      <Input
+        kind="select"
+        id={id}
+        name={id}
+        value={value}
+        onChange={onChange}
+        display="dropdown"
+        options={names.map((name) => ({ value: name, label: variableLabelOf(name, labels) }))}
+      />
+    </Field>
+  );
+}
+
+function renderLinkFields(m: PanelModel): ReactNode {
+  const { t, Field, Input } = m;
+  return (
+    <Field id={`${m.idPrefix}-href`} label={t("template-resolver.documentEditor.linkHref")}>
+      <Input
+        kind="text"
+        id={`${m.idPrefix}-href`}
+        name="href"
+        value={m.href}
+        onChange={m.setHref}
+        placeholder={t("template-resolver.documentEditor.linkHrefPlaceholder")}
+      />
+    </Field>
+  );
+}
+
+function renderPlaceholderFields(m: PanelModel): ReactNode {
+  return (
+    !m.noVariables && (
+      <div className="flex flex-wrap gap-1">
+        <VariableChips
+          variables={m.selectable}
+          labels={m.variableLabels}
+          onInsert={(name) => insertAndCloseOf(m)({ type: "variable", attrs: { name } })}
+        />
+      </div>
+    )
+  );
+}
+
+function renderAlignFields(m: PanelModel): ReactNode {
+  const { t, Button, editor } = m;
+  return (
+    <div className="flex flex-wrap gap-1">
+      {DOCUMENT_TEXT_ALIGNMENTS.map((alignment) => (
+        <Button
+          key={alignment}
+          type="button"
+          variant="secondary"
+          size="sm"
+          onClick={() => {
+            editor
+              .chain()
+              .focus()
+              .updateAttributes("paragraph", { textAlign: alignment })
+              .updateAttributes("heading", { textAlign: alignment })
+              .run();
+            m.onClose();
+          }}
+        >
+          {ALIGNMENT_ICONS[alignment]}
+          {t(ALIGNMENT_LABEL_KEYS[alignment])}
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+function renderImageFields(m: PanelModel): ReactNode {
+  const { t, Field, Input, idPrefix } = m;
+  return (
+    <>
+      <Field id={`${idPrefix}-resource`} label={t("template-resolver.documentEditor.resourceKey")}>
+        <Input
+          kind="text"
+          id={`${idPrefix}-resource`}
+          name="resource"
+          value={m.resource}
+          onChange={m.setResource}
+        />
+      </Field>
+      <Field id={`${idPrefix}-alt`} label={t("template-resolver.documentEditor.imageAlt")}>
+        <Input kind="text" id={`${idPrefix}-alt`} name="alt" value={m.alt} onChange={m.setAlt} />
+      </Field>
+    </>
+  );
+}
+
+function renderButtonFields(m: PanelModel): ReactNode {
+  const { t, Field, Input, idPrefix } = m;
+  return (
+    !m.noVariables && (
+      <>
+        <NameSelect
+          id={`${idPrefix}-target`}
+          label={t("template-resolver.documentEditor.buttonTarget")}
+          names={m.selectable}
+          labels={m.variableLabels}
+          value={m.selectedName}
+          onChange={m.setChosenName}
+        />
+        <Field id={`${idPrefix}-text`} label={t("template-resolver.documentEditor.buttonText")}>
+          <Input
+            kind="text"
+            id={`${idPrefix}-text`}
+            name="text"
+            value={m.buttonText}
+            onChange={m.setButtonText}
+          />
+        </Field>
+      </>
+    )
+  );
+}
+
+function renderRepeatFields(m: PanelModel): ReactNode {
+  return (
+    !m.noVariables && (
+      <NameSelect
+        id={`${m.idPrefix}-list`}
+        label={m.t("template-resolver.documentEditor.repeatList")}
+        names={m.selectable}
+        labels={m.variableLabels}
+        value={m.selectedName}
+        onChange={m.setChosenName}
+      />
+    )
+  );
+}
+
+function renderImagesFields(m: PanelModel): ReactNode {
+  return (
+    !m.noVariables && (
+      <NameSelect
+        id={`${m.idPrefix}-images-variable`}
+        label={m.t("template-resolver.documentEditor.imagesVariable")}
+        names={m.selectable}
+        labels={m.variableLabels}
+        value={m.selectedName}
+        onChange={m.setChosenName}
+      />
+    )
+  );
+}
+
+function renderStepsFields(m: PanelModel): ReactNode {
+  const { t, Field, Input, idPrefix } = m;
+  return (
+    !m.noVariables && (
+      <>
+        <NameSelect
+          id={`${idPrefix}-steps-variable`}
+          label={t("template-resolver.documentEditor.stepsVariable")}
+          names={m.selectable}
+          labels={m.variableLabels}
+          value={m.selectedName}
+          onChange={m.setChosenName}
+        />
+        <Field
+          id={`${idPrefix}-steps-list`}
+          label={t("template-resolver.documentEditor.stepsList")}
+        >
+          <Input
+            kind="text"
+            id={`${idPrefix}-steps-list`}
+            name="steps"
+            value={m.stepsText}
+            onChange={m.setStepsText}
+          />
+        </Field>
+      </>
+    )
+  );
+}
+
+export const PANEL_FIELDS: Readonly<Record<PanelKind, (m: PanelModel) => ReactNode>> = {
+  link: renderLinkFields,
+  placeholder: renderPlaceholderFields,
+  align: renderAlignFields,
+  image: renderImageFields,
+  button: renderButtonFields,
+  repeat: renderRepeatFields,
+  images: renderImagesFields,
+  steps: renderStepsFields,
+};

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

@@ -0,0 +1,164 @@
+import type { usePrimitives } from "@cosmicdrift/kumiko-renderer";
+import type { Editor, JSONContent } from "@tiptap/core";
+import {
+  isAllowedDocumentLinkHref,
+  isDocumentPlaceholderHref,
+  isDocumentReferenceName,
+  isDocumentResourceKey,
+} from "./document-schema.ts";
+import { parseDocumentStepsInput } from "./document-steps.ts";
+import { type PanelKind, repeatTableContent } from "./document-tiptap-helpers.ts";
+
+type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
+type Primitives = ReturnType<typeof usePrimitives>;
+
+export type PanelModel = {
+  readonly t: Translate;
+  readonly Button: Primitives["Button"];
+  readonly Field: Primitives["Field"];
+  readonly Input: Primitives["Input"];
+  readonly editor: Editor;
+  readonly kind: PanelKind;
+  readonly idPrefix: string;
+  readonly variableLabels: Readonly<Record<string, string>>;
+  readonly onClose: () => void;
+  readonly href: string;
+  readonly setHref: (value: string) => void;
+  readonly resource: string;
+  readonly setResource: (value: string) => void;
+  readonly alt: string;
+  readonly setAlt: (value: string) => void;
+  readonly buttonText: string;
+  readonly setButtonText: (value: string) => void;
+  readonly stepsText: string;
+  readonly setStepsText: (value: string) => void;
+  readonly setChosenName: (value: string) => void;
+  readonly setError: (value: string | null) => void;
+  readonly selectable: readonly string[];
+  readonly selectedName: string;
+  readonly noVariables: boolean;
+};
+
+type ChosenNames = {
+  readonly selectable: readonly string[];
+  readonly selectedName: string;
+  readonly noVariables: boolean;
+};
+
+export function chosenNamesOf(
+  kind: PanelKind,
+  variables: readonly string[],
+  chosenName: string,
+): ChosenNames {
+  const referenceNames = variables.filter(isDocumentReferenceName);
+  const buttonTargets = referenceNames.filter((name) => isDocumentPlaceholderHref(`{{${name}}}`));
+  const selectable = kind === "button" ? buttonTargets : referenceNames;
+  const selectedName = selectable.includes(chosenName) ? chosenName : (selectable[0] ?? "");
+  const needsVariables =
+    kind === "button" ||
+    kind === "repeat" ||
+    kind === "placeholder" ||
+    kind === "steps" ||
+    kind === "images";
+  return { selectable, selectedName, noVariables: needsVariables && selectable.length === 0 };
+}
+
+export function insertAndCloseOf(m: PanelModel): (content: JSONContent) => void {
+  return (content) => {
+    m.editor.chain().focus().insertContent(content).run();
+    m.onClose();
+  };
+}
+
+function submitLinkOf(m: PanelModel): () => void {
+  const { editor, href, t } = m;
+  return () => {
+    if (!isAllowedDocumentLinkHref(href)) {
+      m.setError(t("template-resolver.documentEditor.invalidLink"));
+      // skip: invalid input is reported through the panel error
+      return;
+    }
+    const chain = editor.chain().focus();
+    if (!editor.state.selection.empty) chain.setLink({ href }).run();
+    else if (editor.isActive("link")) chain.extendMarkRange("link").setLink({ href }).run();
+    else if (isDocumentPlaceholderHref(href))
+      // Placeholders are never inserted as {{name}} text; the link shows the variable's value.
+      chain
+        .insertContent({
+          type: "variable",
+          attrs: { name: href.slice(2, -2) },
+          marks: [{ type: "link", attrs: { href } }],
+        })
+        .run();
+    else
+      chain
+        .insertContent({ type: "text", text: href, marks: [{ type: "link", attrs: { href } }] })
+        .run();
+    m.onClose();
+  };
+}
+
+function submitImageOf(m: PanelModel): () => void {
+  const { resource, alt, t } = m;
+  return () => {
+    if (!isDocumentResourceKey(resource)) {
+      m.setError(t("template-resolver.documentEditor.invalidResourceKey"));
+      // skip: invalid input is reported through the panel error
+      return;
+    }
+    if (/[<>]/.test(alt)) {
+      m.setError(t("template-resolver.documentEditor.invalidImageAlt"));
+      // skip: invalid input is reported through the panel error
+      return;
+    }
+    insertAndCloseOf(m)({ type: "resource", attrs: { resource, alt: alt || null } });
+  };
+}
+
+function submitStepsOf(m: PanelModel): () => void {
+  return () => {
+    const steps = parseDocumentStepsInput(m.stepsText);
+    if (steps === null) {
+      m.setError(m.t("template-resolver.documentEditor.invalidSteps"));
+      // skip: invalid input is reported through the panel error
+      return;
+    }
+    insertAndCloseOf(m)({ type: "steps", attrs: { variable: m.selectedName, steps } });
+  };
+}
+
+// Variable-bound kinds offer no insert while there is nothing to bind to.
+const INSERT_HANDLERS: Partial<Record<PanelKind, (m: PanelModel) => () => void>> = {
+  link: submitLinkOf,
+  image: submitImageOf,
+  button: (m) => () =>
+    insertAndCloseOf(m)({
+      type: "button",
+      attrs: { href: `{{${m.selectedName}}}` },
+      content: m.buttonText ? [{ type: "text", text: m.buttonText }] : [],
+    }),
+  repeat: (m) => () => insertAndCloseOf(m)(repeatTableContent(m.selectedName)),
+  steps: submitStepsOf,
+  images: (m) => () => insertAndCloseOf(m)({ type: "images", attrs: { variable: m.selectedName } }),
+};
+
+const KINDS_WITHOUT_VARIABLE_GUARD: readonly PanelKind[] = ["link", "image"];
+
+export function panelActionProps(m: PanelModel): {
+  onInsert?: () => void;
+  onRemoveLink?: () => void;
+} {
+  const { editor, kind } = m;
+  const build = INSERT_HANDLERS[kind];
+  const insertAllowed = KINDS_WITHOUT_VARIABLE_GUARD.includes(kind) || !m.noVariables;
+  return {
+    ...(build !== undefined && insertAllowed && { onInsert: build(m) }),
+    ...(kind === "link" &&
+      editor.isActive("link") && {
+        onRemoveLink: () => {
+          editor.chain().focus().extendMarkRange("link").unsetLink().run();
+          m.onClose();
+        },
+      }),
+  };
+}

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

@@ -0,0 +1,115 @@
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import type { Editor } from "@tiptap/core";
+import { type ReactNode, useState } from "react";
+import { PANEL_FIELDS } from "./document-insert-fields.tsx";
+import { chosenNamesOf, type PanelModel, panelActionProps } from "./document-insert-model.ts";
+import type { PanelKind } from "./document-tiptap-helpers.ts";
+
+function PanelActions({
+  onInsert,
+  onRemoveLink,
+  onCancel,
+}: {
+  readonly onInsert?: () => void;
+  readonly onRemoveLink?: () => void;
+  readonly onCancel: () => void;
+}): ReactNode {
+  const { Button } = usePrimitives();
+  const t = useTranslation();
+  return (
+    <div className="flex gap-2">
+      {onInsert && (
+        <Button type="button" size="sm" onClick={onInsert}>
+          {t("template-resolver.documentEditor.insert")}
+        </Button>
+      )}
+      {onRemoveLink && (
+        <Button type="button" size="sm" variant="danger-ghost" onClick={onRemoveLink}>
+          {t("template-resolver.documentEditor.removeLink")}
+        </Button>
+      )}
+      <Button type="button" size="sm" variant="secondary" onClick={onCancel}>
+        {t("template-resolver.documentEditor.cancel")}
+      </Button>
+    </div>
+  );
+}
+
+type PanelProps = {
+  readonly editor: Editor;
+  readonly editorId: string;
+  readonly kind: PanelKind;
+  readonly variables: readonly string[];
+  readonly variableLabels: Readonly<Record<string, string>>;
+  readonly onClose: () => void;
+};
+
+export function InsertPanel({
+  editor,
+  editorId,
+  kind,
+  variables,
+  variableLabels,
+  onClose,
+}: PanelProps): ReactNode {
+  const { Button, Field, Input } = usePrimitives();
+  const t = useTranslation();
+  const [href, setHref] = useState(() => {
+    const current = editor.getAttributes("link")["href"];
+    return typeof current === "string" ? current : "";
+  });
+  const [resource, setResource] = useState("");
+  const [alt, setAlt] = useState("");
+  const [buttonText, setButtonText] = useState(() =>
+    t("template-resolver.documentEditor.buttonDefaultText"),
+  );
+  const [stepsText, setStepsText] = useState(() =>
+    t("template-resolver.documentEditor.stepsDefault"),
+  );
+  const [chosenName, setChosenName] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const model: PanelModel = {
+    t,
+    Button,
+    Field,
+    Input,
+    editor,
+    kind,
+    idPrefix: `${editorId}-panel`,
+    variableLabels,
+    onClose,
+    href,
+    setHref,
+    resource,
+    setResource,
+    alt,
+    setAlt,
+    buttonText,
+    setButtonText,
+    stepsText,
+    setStepsText,
+    setChosenName,
+    setError,
+    ...chosenNamesOf(kind, variables, chosenName),
+  };
+
+  return (
+    <div className="flex flex-col gap-2 border-b border-input bg-muted/40 p-2">
+      {model.noVariables && (
+        <p className="text-sm text-muted-foreground">
+          {t("template-resolver.documentEditor.noVariables")}
+        </p>
+      )}
+      {PANEL_FIELDS[kind](model)}
+      {error !== null && (
+        <p role="alert" className="text-sm text-destructive">
+          {error}
+        </p>
+      )}
+      <div className="flex flex-wrap gap-2">
+        <PanelActions onCancel={onClose} {...panelActionProps(model)} />
+      </div>
+    </div>
+  );
+}