@jxsuite/studio 4.1.0 → 5.1.0

package/src/ui/expression-editor.ts

@@ -2,30 +2,58 @@
 /**
  * The expression editor — one operator row plus an operand editor per slot, nested to any depth.
  *
- * **The layout is CSS, in `styles/inspector.css` (§ "The expression editor").** Every row here used
- * to be an inline `display:flex;…` attribute with a hard `min-width` on the pickers, and no rung of
- * that chain could set `min-width: 0` — so at Inspector width the operand controls refused to
- * shrink and Operator, Target and Value were clipped by the edge of the window. The editor is drawn
- * in the Inspector (~280px), in the Navigator, and in the Bottom dock's Logic tab (very wide), so
- * every row wraps to a stack rather than sizing itself in pixels.
+ * **This is the flow; `surfaces/expression-editor.json` is the surface.** This module decides what
+ * an operator needs, which rung of the value ladder an operand occupies, what a literal's type is,
+ * which refs a position may bind, what the live preview says at each node, and what every gesture
+ * commits. It draws nothing: {@link flattenExpression} walks the tree once and hands the document a
+ * FLAT list of rows that already carry their own indent, and {@link mountExpressionEditor} is the
+ * seam between the two.
+ *
+ * **There is no Monaco here, and never was.** The editor that hosts Monaco is the Logic dock's code
+ * surface (`panels/formula-workspace.ts`); this one is a form, and every part of it — the chip
+ * strip, the operator picker, the operand ladder, the positional args, the `switch` cases, the live
+ * badges — is markup a document can own. So nothing in this conversion is an island, and the four
+ * hosts that used to `litRender` into an empty node now mount a document into it instead.
+ *
+ * **Recursion is a property of the WALK.** An operand may be another expression, an aggregate's
+ * per-item body is one, and either may hold more of both — while a document's one repeater is
+ * `$prototype: "Array"` over a list. So the walk emits rows in reading order and each says how far
+ * in it sits, exactly as `panels/statement-editor.ts` does for the statement tree. A row's key is
+ * its node's own path plus the slot it fills, which is unique by construction: two rows of one
+ * expression cannot occupy one position in it.
+ *
+ * **A layout that could not shrink is what sent this editor to a stylesheet, and then to a
+ * document.** Every row here used to be an inline `display:flex;…` attribute with a hard
+ * `min-width` on the pickers, and no rung of that chain could set `min-width: 0` — so at Inspector
+ * width the operand controls refused to shrink and Operator, Target and Value were clipped by the
+ * edge of the window. The editor is drawn in the Inspector (~280px), in the Navigator, and in the
+ * Bottom dock's Logic tab (very wide), so every row wraps to a stack rather than sizing itself in
+ * pixels. The document's `style` block owns that now, and it emits no class at all.
+ *
+ * @docs studio/logic/formulas
  */
-import { html, nothing } from "lit-html";
-import { live } from "lit-html/directives/live.js";
 import { PURE_METHOD_OPS } from "@jxsuite/runtime/expression";
 import { isJsonObject, isRef } from "@jxsuite/schema/guards";
-import { renderFieldRow } from "./field-row";
-import { renderFormulaChips } from "./formula-chips";
+import { formulaChipStrip } from "./formula-chips";
 import { applyCatalogPick, calleeEntry, formulaCatalog } from "./formula-catalog";
-import { openFormulaPalette } from "./formula-palette";
+import { openFormulaPalette } from "../surfaces/formula-palette";
 import { VALUE_SOURCE_LABELS } from "./value-source";
-import { renderEmptyState } from "../panels/empty-state";
+import {
+  disposeDetachedExpressionEditors,
+  renderExpressionEditorSurface,
+} from "../surfaces/expression-editor";
 
+import type {
+  ExprOption,
+  ExprRowView,
+  ExprSelectGroup,
+  ExpressionActions,
+} from "../surfaces/expression-editor";
 import type {
   JxExpressionNode,
   JxExpressionOperand,
   JxStateDefinition,
 } from "@jxsuite/schema/types";
-import type { TemplateResult } from "lit-html";
 
 // ─── Operator Categories ────────────────────────────────────────────────────
 
@@ -129,6 +157,70 @@ const OPERATOR_GROUPS = [
   { label: "Function", ops: ["call"] },
 ];
 
+/**
+ * The operator picker's rows, in the kit's own `optgroup` shape.
+ *
+ * Built once: the list is closed, and a delimited run is what the kit draws for it — the label
+ * names the group in the accessibility tree and the legend inside it is what a reader sees, which
+ * is the pair `<sp-menu-divider>` plus a header span was standing in for.
+ */
+const OPERATOR_SELECT_GROUPS: ExprSelectGroup[] = OPERATOR_GROUPS.map((group) => ({
+  id: group.label,
+  label: group.label,
+  rows: group.ops.map((op) => ({ label: op, value: op })),
+}));
+
+/**
+ * The same rows, narrowed to the operators a position's grammar admits, with empty groups dropped.
+ *
+ * The full table is what it filters, rather than a second list written out per position: an
+ * operator that gains a group, or moves between two, keeps its label and its neighbours here
+ * without anybody remembering to say so twice.
+ */
+function restrictGroups(operators: readonly string[]): ExprSelectGroup[] {
+  const allowed = new Set(operators);
+  return OPERATOR_SELECT_GROUPS.map((group) => ({
+    ...group,
+    rows: group.rows.filter((row) => allowed.has(row.value)),
+  })).filter((group) => group.rows.length > 0);
+}
+
+/** The three rungs of the value ladder, spelled the way `ui/value-source.ts` spells them (§6.3). */
+const SOURCE_OPTIONS: ExprOption[] = [
+  { label: VALUE_SOURCE_LABELS.literal, value: "literal" },
+  { label: VALUE_SOURCE_LABELS.ref, value: "ref" },
+  { label: VALUE_SOURCE_LABELS.expression, value: "expression" },
+];
+
+/** What a literal may be. Abbreviated because the picker sits beside the value it types. */
+const TYPE_OPTIONS: ExprOption[] = [
+  { label: "str", value: "string" },
+  { label: "num", value: "number" },
+  { label: "bool", value: "boolean" },
+  { label: "null", value: "null" },
+];
+
+/**
+ * Which control types a literal of each type.
+ *
+ * A map rather than a chain of ternaries because the two vocabularies are genuinely different: the
+ * type is what the value IS, and the control is what edits it — `null` is a type with no control at
+ * all, drawn as an inert word.
+ */
+const LITERAL_CONTROLS: Record<string, string> = {
+  boolean: "bool",
+  null: "null",
+  number: "number",
+  string: "text",
+};
+
+/** Where an event handler's operand may bind besides the document's own signals. */
+const EVENT_REFS = ["event#/detail", "event#/target/value"];
+
+/** What a slot with nothing to bind to says, in the shell's one empty-state voice. */
+const NO_BINDINGS_MESSAGE = "A binding points at a value this page holds.";
+const NO_BINDINGS_DETAIL = "Add one in the State panel and it shows up here.";
+
 interface OperatorInfo {
   needsValue: boolean;
   needsInitial: boolean;
@@ -329,7 +421,7 @@ export function expressionHint(node: unknown) {
   return `${targetLabel} ${op} …`;
 }
 
-// ─── Live Value Badge (spec §19.9) ──────────────────────────────────────────
+// ─── What the editor is handed ──────────────────────────────────────────────
 
 /** Preview data computed by services/preview-eval.ts — display strings keyed by node path. */
 export interface EditorPreview {
@@ -338,615 +430,744 @@ export interface EditorPreview {
   mutating: boolean;
 }
 
-function renderValueBadge(preview: EditorPreview | null | undefined, pathKey: string) {
-  const text = preview?.values.get(pathKey);
-  if (text === undefined) {
-    return nothing;
-  }
-  return html`<span class="expr-live-badge" title=${text}>${text}</span>`;
+export interface ExpressionEditorOpts {
+  stateDefs: string[];
+  allowEventRef: boolean;
+  depth?: number;
+  preview?: EditorPreview | null;
+  path?: (string | number)[];
+  /** Full state defs map — resolves named-formula catalog entries (call labels, palette). */
+  stateEntries?: Record<string, JxStateDefinition> | null;
+  /** Chip-strip click hook (depth 0). No-op when absent. */
+  onChipSelect?: (path: (string | number)[]) => void;
+  /** Vendors a packaged formula's state entry into the document on catalog pick. */
+  onInsertDef?: (name: string, def: JxStateDefinition) => void;
+  /**
+   * The operators the POSITION's own grammar admits, when it admits fewer than all of them.
+   *
+   * Most positions take an `ExpressionEntry`, whose grammar is the whole operator table, and leave
+   * this absent. An element's `tagName` does not: `defs/tag-expression.schema.ts` admits `?:` and
+   * `switch` and nothing else, because every branch there must resolve to a literal tag the
+   * pipeline can enumerate without evaluating. The panel used to seed that shape correctly and then
+   * hand it to this editor unrestricted — so the next click could reoperate it to `capitalize`, or
+   * pick `toUpperCase` out of the formula catalog, and write a document its own validator rejects.
+   * A whole-document projection then read `cases` off a node that had none.
+   *
+   * **Depth 0 only.** The restriction is the position's, and a tag choice's `target` is an ordinary
+   * `ExpressionOperand` — the discriminant may be any expression at all. Restricting the nested
+   * walk too would have taken that away.
+   */
+  operators?: readonly string[];
 }
 
-// ─── Ref Picker ─────────────────────────────────────────────────────────────
+/** Everything one gesture on one row may ask for. Each row registers only what it offers. */
+interface RowPlan {
+  setOperator?: (value: string) => void;
+  browse?: (anchor: HTMLElement) => void;
+  setSource?: (value: string) => void;
+  setLiteralType?: (value: string) => void;
+  setText?: (value: string) => void;
+  setNumber?: (value: string) => void;
+  setBool?: (checked: boolean) => void;
+  setRef?: (value: string) => void;
+  renameCase?: (value: string) => void;
+  remove?: () => void;
+  act?: () => void;
+}
 
 /**
- * @param {string} refVal
- * @param {(newRef: string) => void} onRefChange
- * @param {{ stateDefs: string[]; allowEventRef: boolean }} opts
- * @returns {import("lit-html").TemplateResult}
+ * The whole projection: what the document draws, and what each key in it commits.
+ *
+ * Exported for its own test — the projection IS the editor now, so what it contains and what a key
+ * addresses are the contract rather than an implementation detail of a template.
  */
-function renderRefPicker(
-  refVal: string,
-  onRefChange: (newRef: string) => void,
-  opts: { stateDefs: string[]; allowEventRef: boolean },
-) {
-  const stateRefs = (opts.stateDefs || []).map((k) => `#/state/${k}`);
-  const eventRefs = opts.allowEventRef ? ["event#/detail", "event#/target/value"] : [];
-  const allRefs = [...stateRefs, ...eventRefs];
-  const isCustom = refVal && !allRefs.includes(refVal);
-
-  // Nothing to pick and nothing already picked: a picker whose only entry is a disabled "No state
-  // Defined" is a dead end. Say what a binding is instead, in the shell's one empty-state voice.
-  if (allRefs.length === 0 && !refVal) {
-    return renderEmptyState({
-      compact: true,
-      detail: "Add one in the State panel and it shows up here.",
-      message: "A binding points at a value this page holds.",
-    });
-  }
+export interface ExpressionProjection {
+  rows: ExprRowView[];
+  plans: Map<string, RowPlan>;
+  /** A chip's joined path back to the path it stands for. */
+  chipPaths: Map<string, (string | number)[]>;
+}
 
-  return html`
-    <sp-picker
-      size="s"
-      class="expr-ref"
-      placeholder="Select…"
-      .value=${live(isCustom ? "__custom__" : refVal || "")}
-      @change=${(e: Event) => {
-        const val = (e.target as HTMLInputElement).value;
-        if (val === "__custom__") {
-          return;
-        }
-        onRefChange(val);
-      }}
-    >
-      ${stateRefs.map(
-        (r) => html`<sp-menu-item value=${r}>${r.replace("#/state/", "")}</sp-menu-item>`,
-      )}
-      ${
-        eventRefs.length > 0
-          ? html`
-              <sp-menu-divider></sp-menu-divider>
-              ${eventRefs.map((r) => html`<sp-menu-item value=${r}>${r}</sp-menu-item>`)}
-            `
-          : nothing
-      }
-    </sp-picker>
-  `;
+/** The walk's own state: the options it was given, plus what it has emitted so far. */
+interface Walk {
+  opts: ExpressionEditorOpts;
+  preview: EditorPreview | null;
+  rows: ExprRowView[];
+  plans: Map<string, RowPlan>;
+  chipPaths: Map<string, (string | number)[]>;
 }
 
-// ─── Literal Editor ─────────────────────────────────────────────────────────
+/**
+ * A row under construction: every field optional, and an explicit `undefined` allowed.
+ *
+ * `Partial<ExprRowView>` cannot be it. `exactOptionalPropertyTypes` is on, so a spread of one is
+ * typed `string | undefined` at a key the target declares as `string` — which is a real distinction
+ * everywhere a key means "absent", and a false one here, where every default is supplied below.
+ */
+type RowPatch = { [K in keyof ExprRowView]?: ExprRowView[K] | undefined };
 
 /**
- * @param {unknown} operand
- * @param {(newVal: JxExpressionOperand) => void} onChange
- * @returns {import("lit-html").TemplateResult}
+ * A row with every field answered.
+ *
+ * The document asks no question an answer is missing for: a `$switch` on an absent field resolves
+ * to no case at all, so a partial row is a row that silently draws nothing.
  */
-function renderLiteralEditor(operand: unknown, onChange: (newVal: JxExpressionOperand) => void) {
-  const type = literalType(operand);
-  return html`
-    <div class="expr-literal">
-      <sp-picker
-        size="s"
-        class="expr-literal-type"
-        .value=${live(type)}
-        @change=${(e: Event) => {
-          const newType = (e.target as HTMLInputElement).value;
-          onChange(defaultForLiteralType(newType));
-        }}
-      >
-        <sp-menu-item value="string">str</sp-menu-item>
-        <sp-menu-item value="number">num</sp-menu-item>
-        <sp-menu-item value="boolean">bool</sp-menu-item>
-        <sp-menu-item value="null">null</sp-menu-item>
-      </sp-picker>
-      ${
-        type === "string"
-          ? html`<sp-textfield
-              size="s"
-              class="expr-literal-value"
-              .value=${live(String(operand ?? ""))}
-              @input=${(e: Event) => onChange((e.target as HTMLInputElement).value)}
-            ></sp-textfield>`
-          : type === "number"
-            ? html`<sp-number-field
-                size="s"
-                class="expr-literal-value"
-                .value=${live(Number(operand ?? 0))}
-                @change=${(e: Event) => onChange(Number((e.target as HTMLInputElement).value))}
-              ></sp-number-field>`
-            : type === "boolean"
-              ? html`<sp-checkbox
-                  size="s"
-                  class="expr-literal-bool"
-                  ?checked=${Boolean(operand)}
-                  @change=${(e: Event) => onChange((e.target as HTMLInputElement).checked)}
-                  >true</sp-checkbox
-                >`
-              : html`<span class="expr-literal-null">null</span>`
-      }
-    </div>
-  `;
+function blankRow(row: RowPatch & { key: string; kind: ExprRowView["kind"] }) {
+  return {
+    badge: "",
+    catalog: false,
+    checked: false,
+    chips: [],
+    chooser: false,
+    emptyDetail: "",
+    emptyMessage: "",
+    groups: [],
+    hasBadge: false,
+    indent: "0",
+    label: "",
+    lead: "none",
+    leadLabel: "",
+    leadValue: "",
+    literal: "",
+    literalType: "",
+    nested: "false",
+    prop: "",
+    refGroups: [],
+    refOptions: [],
+    removable: false,
+    source: "literal",
+    sourceOptions: [],
+    title: "",
+    typeOptions: [],
+    value: "",
+    ...row,
+  } as ExprRowView;
+}
+
+/** The indent one depth reads as. `.expression-editor--nested`'s 4px margin, said per row. */
+function indentAt(depth: number): string {
+  return `${depth * 4}px`;
+}
+
+/** The live value at a node path, and whether the preview holds one at all. */
+function badgeAt(walk: Walk, key: string): { badge: string; hasBadge: boolean } {
+  const text = walk.preview?.values.get(key);
+  return { badge: text ?? "", hasBadge: text !== undefined };
 }
 
-// ─── Operand Editor ─────────────────────────────────────────────────────────
+// ─── The walk ───────────────────────────────────────────────────────────────
+
+/** Everything one operand slot needs to know about itself before its rung is decided. */
+interface OperandSlot {
+  /** The row's own key, unique within the editor. */
+  key: string;
+  /** The row's visible label, and what `inspector/field:<prop>` addresses. */
+  label: string;
+  prop: string;
+  depth: number;
+  path: (string | number)[];
+  /** The position admits a pointer and nothing else — an assignment target, a callee. */
+  mustBeRef: boolean;
+  /** The node path whose live value annotates this row. Empty asks for no badge. */
+  badgeKey: string;
+  lead?: ExprRowView["lead"];
+  leadLabel?: string;
+  leadValue?: string;
+  removable?: boolean;
+  title?: string;
+  /** Renaming a `switch` case: the key IS the matched value. */
+  renameCase?: (value: string) => void;
+  remove?: () => void;
+}
 
 /**
- * Single-operand editor (mode picker + literal/ref/nested-expression widget). Exported for
- * statement-position operand slots (spec §20: `if` tests, `$switch` discriminants, `dispatchEvent`
- * detail).
+ * Emit one operand row, and — when it holds an expression — the rows of that expression under it.
  *
- * @param {unknown} operand
- * @param {(newOperand: unknown) => void} onChange
- * @param {{
- *   stateDefs: string[];
- *   allowEventRef: boolean;
- *   depth: number;
- *   mustBeRef?: boolean;
- * }} opts
- * @returns {import("lit-html").TemplateResult}
+ * @param walk The walk in progress.
+ * @param operand What the slot currently holds.
+ * @param commit What replacing it means.
+ * @param slot Everything about the slot itself.
  */
-export function renderOperandEditor(
+function walkOperand(
+  walk: Walk,
   operand: unknown,
-  onChange: (newOperand: unknown) => void,
-  opts: {
-    stateDefs: string[];
-    allowEventRef: boolean;
-    depth: number;
-    mustBeRef?: boolean;
-    preview?: EditorPreview | null;
-    path?: (string | number)[];
-    stateEntries?: Record<string, JxStateDefinition> | null;
-  },
-): TemplateResult {
-  if (opts.mustBeRef) {
-    const refVal = ((operand as Record<string, unknown> | null)?.$ref as string) ?? "";
-    return html`
-      <div class="expr-operand">${renderRefPicker(refVal, (r) => onChange({ $ref: r }), opts)}</div>
-    `;
+  commit: (next: unknown) => void,
+  slot: OperandSlot,
+): void {
+  const { allowEventRef, stateDefs } = walk.opts;
+  const stateRefs = (stateDefs || []).map((k) => `#/state/${k}`);
+  const refValue = ((operand as Record<string, unknown> | null)?.$ref as string) ?? "";
+  const plan: RowPlan = {
+    setRef: (value) => commit({ $ref: value }),
+  };
+  if (slot.renameCase) {
+    plan.renameCase = slot.renameCase;
+  }
+  if (slot.remove) {
+    plan.remove = slot.remove;
+  }
+
+  const base = {
+    ...badgeAt(walk, slot.badgeKey),
+    indent: indentAt(slot.depth),
+    label: slot.label,
+    lead: slot.lead ?? "none",
+    leadLabel: slot.leadLabel ?? "",
+    leadValue: slot.leadValue ?? "",
+    nested: slot.depth > 0 ? "true" : "false",
+    prop: slot.prop,
+    refGroups: allowEventRef
+      ? [{ id: "event", label: "Event", rows: EVENT_REFS.map((r) => ({ label: r, value: r })) }]
+      : [],
+    refOptions: stateRefs.map((r) => ({ label: r.replace("#/state/", ""), value: r })),
+    removable: Boolean(slot.removable),
+    title: slot.title ?? "",
+    value: refValue,
+  };
+
+  /* Nothing to pick and nothing already picked: a picker whose only entry is a disabled "No state
+     defined" is a dead end. Say what a binding IS instead, in the shell's one empty-state voice. */
+  const nothingToBind = stateRefs.length === 0 && !allowEventRef && !refValue;
+
+  if (slot.mustBeRef) {
+    walk.plans.set(slot.key, plan);
+    walk.rows.push(
+      blankRow({
+        ...base,
+        emptyDetail: nothingToBind ? NO_BINDINGS_DETAIL : "",
+        emptyMessage: nothingToBind ? NO_BINDINGS_MESSAGE : "",
+        key: slot.key,
+        kind: "operand",
+        source: nothingToBind ? "empty" : "ref",
+      }),
+    );
+    return;
   }
 
   const mode = operandMode(operand);
-  return html`
-    <div class="expr-operand">
-      <sp-picker
-        size="s"
-        class="expr-operand-mode"
-        label="Value source"
-        .value=${live(mode)}
-        @change=${(e: Event) => {
-          const newMode = (e.target as HTMLInputElement).value;
-          onChange(defaultForMode(newMode));
-        }}
-      >
-        <sp-menu-item value="literal">${VALUE_SOURCE_LABELS.literal}</sp-menu-item>
-        <sp-menu-item value="ref">${VALUE_SOURCE_LABELS.ref}</sp-menu-item>
-        <sp-menu-item value="expression">${VALUE_SOURCE_LABELS.expression}</sp-menu-item>
-      </sp-picker>
-      ${
-        mode === "literal"
-          ? renderLiteralEditor(operand, onChange)
-          : mode === "ref"
-            ? renderRefPicker(
-                ((operand as Record<string, unknown> | null)?.$ref as string) ?? "",
-                (r) => onChange({ $ref: r }),
-                opts,
-              )
-            : renderExpressionEditor(operand, onChange, {
-                ...opts,
-                depth: opts.depth + 1,
-              })
-      }
-    </div>
-  `;
+  plan.setSource = (value) => commit(defaultForMode(value));
+  if (mode === "literal") {
+    const type = literalType(operand);
+    const asNumber = Number(operand ?? 0);
+    plan.setLiteralType = (value) => commit(defaultForLiteralType(value));
+    plan.setText = (value) => commit(value);
+    plan.setNumber = (value) => commit(Number(value));
+    plan.setBool = (checked) => commit(checked);
+    walk.plans.set(slot.key, plan);
+    walk.rows.push(
+      blankRow({
+        ...base,
+        checked: Boolean(operand),
+        chooser: true,
+        key: slot.key,
+        kind: "operand",
+        literal: LITERAL_CONTROLS[type],
+        literalType: type,
+        source: "literal",
+        sourceOptions: SOURCE_OPTIONS,
+        typeOptions: TYPE_OPTIONS,
+        value: type === "number" ? String(asNumber) : String(operand ?? ""),
+      }),
+    );
+    return;
+  }
+
+  walk.plans.set(slot.key, plan);
+  walk.rows.push(
+    blankRow({
+      ...base,
+      chooser: true,
+      emptyDetail: mode === "ref" && nothingToBind ? NO_BINDINGS_DETAIL : "",
+      emptyMessage: mode === "ref" && nothingToBind ? NO_BINDINGS_MESSAGE : "",
+      key: slot.key,
+      kind: "operand",
+      source: mode === "ref" && nothingToBind ? "empty" : mode,
+      sourceOptions: SOURCE_OPTIONS,
+    }),
+  );
+  if (mode === "expression") {
+    walkExpression(walk, operand, commit, slot.depth + 1, slot.path);
+  }
 }
 
-// ─── Positional Args Editor (splice / call) ─────────────────────────────────
+/** The rows of a positional-args list (`splice`, `call`), plus the row that grows it. */
+function walkArgs(
+  walk: Walk,
+  args: unknown,
+  commit: (next: unknown[]) => void,
+  depth: number,
+  path: (string | number)[],
+  naming: { labels: string[]; fallbackLabel: string },
+): void {
+  /* `Array.isArray` narrows an `unknown` to `any[]`, so every spread of it reads as unsafe to
+     the type-aware lint. The elements ARE unknown — each is an operand this walk discriminates
+     — so saying so restores the check rather than silencing it. */
+  const safeArgs: unknown[] = Array.isArray(args) ? args : [];
+  for (const [idx, arg] of safeArgs.entries()) {
+    const argPath = [...path, "value", idx];
+    const label = naming.labels[idx] ?? naming.fallbackLabel;
+    walkOperand(
+      walk,
+      arg,
+      (next) => {
+        const updated = [...safeArgs];
+        updated[idx] = next;
+        commit(updated);
+      },
+      {
+        badgeKey: "",
+        depth,
+        key: argPath.join("/"),
+        label,
+        leadLabel: label,
+        lead: "arg",
+        mustBeRef: false,
+        path: argPath,
+        prop: "value",
+        remove: () => {
+          const updated = safeArgs.filter((_, i) => i !== idx);
+          commit(updated.length > 0 ? updated : [null]);
+        },
+        removable: true,
+        title: `Remove ${label}`,
+      },
+    );
+  }
+  const addKey = `${path.join("/")}::add-arg`;
+  walk.plans.set(addKey, { act: () => commit([...safeArgs, null]) });
+  walk.rows.push(
+    blankRow({
+      indent: indentAt(depth),
+      key: addKey,
+      kind: "action",
+      label: "+ Add arg",
+      nested: depth > 0 ? "true" : "false",
+    }),
+  );
+}
 
-/**
- * @param {unknown[]} args
- * @param {(newArgs: unknown[]) => void} onChange
- * @param {{ stateDefs: string[]; allowEventRef: boolean; depth: number }} opts
- * @param {{ labels?: string[]; fallbackLabel?: string }} [naming]
- * @returns {import("lit-html").TemplateResult}
- */
-function renderSpliceArgsEditor(
-  args: unknown[],
-  onChange: (newArgs: unknown[]) => void,
-  opts: { stateDefs: string[]; allowEventRef: boolean; depth: number },
-  naming: { labels?: string[]; fallbackLabel?: string } = {},
-): TemplateResult {
-  const safeArgs = Array.isArray(args) ? args : [];
-  const labels = naming.labels ?? ["start", "del", "item"];
-  const fallbackLabel = naming.fallbackLabel ?? "item";
-
-  return html`
-    <div class="array-object-field">
-      ${safeArgs.map(
-        (arg, idx) => html`
-          <div class="array-object-row">
-            <span class="array-object-label">${labels[idx] ?? fallbackLabel}</span>
-            ${renderOperandEditor(
-              arg,
-              (newArg) => {
-                const updated = [...safeArgs];
-                updated[idx] = newArg;
-                onChange(updated);
-              },
-              { ...opts, mustBeRef: false },
-            )}
-            <sp-action-button
-              quiet
-              size="xs"
-              @click=${() => {
-                const updated = safeArgs.filter((_, i) => i !== idx);
-                onChange(updated.length > 0 ? updated : [null]);
-              }}
-            >
-              <sp-icon-delete slot="icon"></sp-icon-delete>
-            </sp-action-button>
-          </div>
-        `,
-      )}
-      <sp-action-button quiet size="s" @click=${() => onChange([...safeArgs, null])}>
-        + Add arg
-      </sp-action-button>
-    </div>
-  `;
-}
-
-// ─── Operator Picker Menu ───────────────────────────────────────────────────
-
-const _operatorMenuCache = OPERATOR_GROUPS.map(
-  (group, i) => html`
-    ${i > 0 ? html`<sp-menu-divider></sp-menu-divider>` : nothing}
-    <sp-menu-group>
-      <span slot="header">${group.label}</span>
-      ${group.ops.map((op) => html`<sp-menu-item value=${op}>${op}</sp-menu-item>`)}
-    </sp-menu-group>
-  `,
-);
-
-// ─── Main Expression Editor ─────────────────────────────────────────────────
+/** The case rows of a `switch` node: matched value → result operand, the default, and `+ Add case`. */
+function walkSwitchCases(
+  walk: Walk,
+  safeNode: Record<string, unknown>,
+  onChange: (node: unknown) => void,
+  depth: number,
+  path: (string | number)[],
+): void {
+  const cases = isJsonObject(safeNode.cases)
+    ? (safeNode.cases as Record<string, unknown>)
+    : ({} as Record<string, unknown>);
+  const entries = Object.entries(cases);
+  const setCases = (next: Record<string, unknown>) => onChange({ ...safeNode, cases: next });
 
-export interface ExpressionEditorOpts {
-  stateDefs: string[];
-  allowEventRef: boolean;
-  depth?: number;
-  preview?: EditorPreview | null;
-  path?: (string | number)[];
-  /** Full state defs map — resolves named-formula catalog entries (call labels, palette). */
-  stateEntries?: Record<string, JxStateDefinition> | null;
-  /** Chip-strip click hook (depth 0). No-op when absent. */
-  onChipSelect?: (path: (string | number)[]) => void;
-  /** Vendors a packaged formula's state entry into the document on catalog pick. */
-  onInsertDef?: (name: string, def: JxStateDefinition) => void;
+  for (const [caseKey, operand] of entries) {
+    const casePath = [...path, "cases", caseKey];
+    walkOperand(walk, operand, (v) => setCases({ ...cases, [caseKey]: v }), {
+      badgeKey: casePath.join("/"),
+      depth,
+      key: casePath.join("/"),
+      label: `Case ${caseKey}`,
+      lead: "case",
+      leadValue: caseKey,
+      mustBeRef: false,
+      path: casePath,
+      prop: "cases",
+      remove: () => {
+        const next = { ...cases };
+        delete next[caseKey];
+        setCases(next);
+      },
+      removable: true,
+      renameCase: (newKey) => {
+        if (newKey === caseKey) {
+          return;
+        }
+        const next: Record<string, unknown> = {};
+        for (const [k, v] of entries) {
+          next[k === caseKey ? newKey : k] = v;
+        }
+        setCases(next);
+      },
+      title: `Remove case ${caseKey}`,
+    });
+  }
+
+  const defaultPath = [...path, "default"];
+  walkOperand(walk, safeNode.default, (v) => onChange({ ...safeNode, default: v }), {
+    badgeKey: defaultPath.join("/"),
+    depth,
+    key: defaultPath.join("/"),
+    label: "Default",
+    lead: "default",
+    leadLabel: "default",
+    mustBeRef: false,
+    path: defaultPath,
+    prop: "default",
+  });
+
+  const addKey = `${path.join("/")}::add-case`;
+  walk.plans.set(addKey, {
+    act: () => {
+      let n = entries.length + 1;
+      let key = `case ${n}`;
+      while (Object.hasOwn(cases, key)) {
+        n += 1;
+        key = `case ${n}`;
+      }
+      setCases({ ...cases, [key]: null });
+    },
+  });
+  walk.rows.push(
+    blankRow({
+      indent: indentAt(depth),
+      key: addKey,
+      kind: "action",
+      label: "+ Add case",
+      nested: depth > 0 ? "true" : "false",
+    }),
+  );
 }
 
-/**
- * @param {unknown} node
- * @param {(node: unknown) => void} onChange
- * @param {ExpressionEditorOpts} opts
- * @returns {import("lit-html").TemplateResult}
- */
-export function renderExpressionEditor(
+/** What replacing the operator means for the rest of the node. */
+function reoperate(safeNode: Record<string, unknown>, newOp: string): Record<string, unknown> {
+  const newInfo = operatorInfo(newOp);
+  const updated: Record<string, unknown> = { operator: newOp, target: safeNode.target };
+  if (newInfo.targetMustBeRef && operandMode(safeNode.target) !== "ref") {
+    updated.target = { $ref: "" };
+  }
+  if (newInfo.needsValue) {
+    if (newInfo.valueIsNode) {
+      const val = safeNode.value as Record<string, unknown> | null;
+      updated.value = val?.operator ? safeNode.value : { operator: "!", target: null };
+    } else if (newInfo.spliceArray) {
+      updated.value = Array.isArray(safeNode.value) ? safeNode.value : [null];
+    } else {
+      updated.value = safeNode.value ?? null;
+    }
+  }
+  if (newInfo.needsInitial) {
+    updated.initial = safeNode.initial ?? (newOp === "?:" ? null : 0);
+  }
+  if (newInfo.switchCases) {
+    updated.cases = isJsonObject(safeNode.cases) ? safeNode.cases : {};
+    if ("default" in safeNode) {
+      updated.default = safeNode.default;
+    }
+  }
+  if (newInfo.callArgs) {
+    updated.value = Array.isArray(safeNode.value) ? safeNode.value : [];
+  }
+  return updated;
+}
+
+/** Emit every row one expression node reads as, deepest last. */
+function walkExpression(
+  walk: Walk,
   node: unknown,
   onChange: (node: unknown) => void,
-  opts: ExpressionEditorOpts,
-): TemplateResult {
-  const depth = opts.depth ?? 0;
+  depth: number,
+  path: (string | number)[],
+): void {
   const safeNode: Record<string, unknown> =
     node && typeof node === "object"
       ? (node as Record<string, unknown>)
       : { operator: "=", target: null };
   const op = (safeNode.operator as string) || "=";
   const info = operatorInfo(op);
-  const preview = opts.preview ?? null;
-  const path = opts.path ?? [];
   const pathKey = path.join("/");
   const sub = (...segs: (string | number)[]) => [...path, ...segs].join("/");
-  /** Wrap an operand widget with its live value badge. */
-  const withBadge = (widget: unknown, key: string) =>
-    html`<div class="expr-widget">${widget}${renderValueBadge(preview, key)}</div>`;
+  const { opts, preview } = walk;
+
+  if (depth === 0) {
+    const chips = formulaChipStrip(safeNode, { path, preview });
+    if (chips.length > 0) {
+      for (const chip of chips) {
+        walk.chipPaths.set(chip.key, chip.path);
+      }
+      walk.rows.push(
+        blankRow({
+          chips: chips.map((chip) => ({
+            badge: chip.badge,
+            group: chip.group ? "true" : "false",
+            hasBadge: chip.hasBadge,
+            key: chip.key,
+            label: chip.label,
+          })),
+          key: "::chips",
+          kind: "chips",
+        }),
+      );
+    }
+    if (preview?.error) {
+      walk.rows.push(blankRow({ key: "::error", kind: "error", label: preview.error }));
+    }
+  }
 
   // The root badge: pure roots show their result; mutating roots' effect shows on target/value.
   const rootBadge =
-    depth === 0 && preview && !preview.mutating ? renderValueBadge(preview, pathKey) : nothing;
-
-  return html`
-    <div class=${depth > 0 ? "expression-editor expression-editor--nested" : "expression-editor"}>
-      ${
-        depth === 0
-          ? renderFormulaChips(safeNode, opts.onChipSelect ?? (() => {}), { path, preview })
-          : nothing
-      }
-      ${
-        depth === 0 && preview?.error
-          ? html`<div class="expr-error">${preview.error}</div>`
-          : nothing
-      }
-      ${renderFieldRow({
-        hasValue: false,
-        label: "Operator",
-        prop: "operator",
-        widget: html`
-          <div class="expr-widget">
-            <sp-picker
-              size="s"
-              class="expr-operator"
-              .value=${live(op)}
-              @change=${(e: Event) => {
-                const newOp = (e.target as HTMLInputElement).value;
-                const newInfo = operatorInfo(newOp);
-                const updated: Record<string, unknown> = {
-                  operator: newOp,
-                  target: safeNode.target,
-                };
-                if (newInfo.targetMustBeRef && operandMode(safeNode.target) !== "ref") {
-                  updated.target = { $ref: "" };
-                }
-                if (newInfo.needsValue) {
-                  if (newInfo.valueIsNode) {
-                    const val = safeNode.value as Record<string, unknown> | null;
-                    updated.value = val?.operator
-                      ? safeNode.value
-                      : { operator: "!", target: null };
-                  } else if (newInfo.spliceArray) {
-                    updated.value = Array.isArray(safeNode.value) ? safeNode.value : [null];
-                  } else {
-                    updated.value = safeNode.value ?? null;
-                  }
-                }
-                if (newInfo.needsInitial) {
-                  updated.initial = safeNode.initial ?? (newOp === "?:" ? null : 0);
-                }
-                if (newInfo.switchCases) {
-                  updated.cases = isJsonObject(safeNode.cases) ? safeNode.cases : {};
-                  if ("default" in safeNode) {
-                    updated.default = safeNode.default;
-                  }
-                }
-                if (newInfo.callArgs) {
-                  updated.value = Array.isArray(safeNode.value) ? safeNode.value : [];
-                }
-                onChange(updated);
-              }}
-            >
-              ${_operatorMenuCache}
-            </sp-picker>
-            <sp-action-button
-              quiet
-              size="s"
-              class="expr-browse-catalog"
-              title="Browse catalog"
-              @click=${(e: Event) =>
-                openFormulaPalette({
-                  anchor: e.currentTarget as HTMLElement,
-                  entries: formulaCatalog(opts.stateEntries),
-                  onPick: (entry) =>
-                    applyCatalogPick(entry, onChange, {
-                      onInsertDef: opts.onInsertDef,
-                      stateEntries: opts.stateEntries,
-                    }),
-                })}
-            >
-              <sp-icon-brackets slot="icon"></sp-icon-brackets>
-            </sp-action-button>
-            ${rootBadge}
-          </div>
-        `,
-      })}
-      ${renderFieldRow({
-        hasValue: false,
-        label: op === "?:" ? "If" : op === "switch" ? "On" : op === "call" ? "Callee" : "Target",
-        prop: "target",
-        widget: withBadge(
-          renderOperandEditor(safeNode.target, (t) => onChange({ ...safeNode, target: t }), {
-            ...opts,
-            depth,
-            mustBeRef: info.targetMustBeRef,
-            path: [...path, "target"],
-          }),
-          sub("target"),
-        ),
-      })}
-      ${
-        info.needsValue && !info.valueIsNode && !info.spliceArray
-          ? renderFieldRow({
-              hasValue: false,
-              label: op === "?:" ? "Then" : "Value",
-              prop: "value",
-              widget: withBadge(
-                renderOperandEditor(safeNode.value, (v) => onChange({ ...safeNode, value: v }), {
-                  ...opts,
-                  depth,
-                  mustBeRef: false,
-                  path: [...path, "value"],
+    depth === 0 && preview && !preview.mutating
+      ? badgeAt(walk, pathKey)
+      : { badge: "", hasBadge: false };
+
+  /* The position's own grammar, and only at its own root — see `ExpressionEditorOpts.operators`.
+     The catalog goes with it: every entry in it inserts a whole node, so a palette offered here
+     would be a second door onto the operators the select has just stopped offering. */
+  const grammar = depth === 0 ? opts.operators : undefined;
+  const operatorKey = `${pathKey}::operator`;
+  walk.plans.set(operatorKey, {
+    ...(grammar
+      ? {}
+      : {
+          browse: (anchor: HTMLElement) =>
+            openFormulaPalette({
+              anchor,
+              entries: formulaCatalog(opts.stateEntries),
+              onPick: (entry) =>
+                applyCatalogPick(entry, onChange, {
+                  onInsertDef: opts.onInsertDef,
+                  stateEntries: opts.stateEntries,
                 }),
-                sub("value"),
-              ),
-            })
-          : nothing
-      }
-      ${
-        info.needsValue && info.valueIsNode
-          ? html`
-              <div class="expr-subsection">
-                ${renderFieldRow({
-                  hasValue: false,
-                  label: "Per-item",
-                  prop: "value",
-                  widget: nothing,
-                })}
-                ${renderExpressionEditor(
-                  (safeNode.value as Record<string, unknown> | null)?.operator
-                    ? safeNode.value
-                    : { operator: "!", target: null },
-                  (v) => onChange({ ...safeNode, value: v }),
-                  { ...opts, depth: depth + 1, path: [...path, "value"] },
-                )}
-              </div>
-            `
-          : nothing
-      }
-      ${
-        info.spliceArray
-          ? html`
-              <div class="expr-subsection">
-                ${renderFieldRow({
-                  hasValue: false,
-                  label: "Args",
-                  prop: "value",
-                  widget: nothing,
-                })}
-                ${renderSpliceArgsEditor(
-                  safeNode.value as unknown[],
-                  (v) => onChange({ ...safeNode, value: v }),
-                  {
-                    ...opts,
-                    depth,
-                  },
-                )}
-              </div>
-            `
-          : nothing
-      }
-      ${
-        info.callArgs
-          ? html`
-              <div class="expr-subsection">
-                ${renderFieldRow({
-                  hasValue: false,
-                  label: "Args",
-                  prop: "value",
-                  widget: nothing,
-                })}
-                ${renderSpliceArgsEditor(
-                  safeNode.value as unknown[],
-                  (v) => onChange({ ...safeNode, value: v }),
-                  { ...opts, depth },
-                  {
-                    fallbackLabel: "arg",
-                    labels: calleeParamLabels(safeNode.target, opts.stateEntries),
-                  },
-                )}
-              </div>
-            `
-          : nothing
-      }
-      ${
-        info.switchCases
-          ? renderSwitchCasesEditor(safeNode, onChange, { ...opts, depth, path }, withBadge)
-          : nothing
-      }
-      ${
-        info.needsInitial
-          ? renderFieldRow({
-              hasValue: false,
-              label: op === "?:" ? "Else" : "Initial",
-              prop: "initial",
-              widget: withBadge(
-                renderOperandEditor(
-                  safeNode.initial,
-                  (v) => onChange({ ...safeNode, initial: v }),
-                  {
-                    ...opts,
-                    depth,
-                    mustBeRef: false,
-                    path: [...path, "initial"],
-                  },
-                ),
-                sub("initial"),
-              ),
-            })
-          : nothing
+            }),
+        }),
+    setOperator: (newOp) => onChange(reoperate(safeNode, newOp)),
+  });
+  walk.rows.push(
+    blankRow({
+      ...rootBadge,
+      catalog: grammar === undefined,
+      groups: grammar ? restrictGroups(grammar) : OPERATOR_SELECT_GROUPS,
+      indent: indentAt(depth),
+      key: operatorKey,
+      kind: "operator",
+      label: "Operator",
+      nested: depth > 0 ? "true" : "false",
+      prop: "operator",
+      title: "Browse catalog",
+      value: op,
+    }),
+  );
+
+  walkOperand(walk, safeNode.target, (t) => onChange({ ...safeNode, target: t }), {
+    badgeKey: sub("target"),
+    depth,
+    key: `${pathKey}::target`,
+    label: op === "?:" ? "If" : op === "switch" ? "On" : op === "call" ? "Callee" : "Target",
+    mustBeRef: info.targetMustBeRef,
+    path: [...path, "target"],
+    prop: "target",
+  });
+
+  if (info.needsValue && !info.valueIsNode && !info.spliceArray) {
+    walkOperand(walk, safeNode.value, (v) => onChange({ ...safeNode, value: v }), {
+      badgeKey: sub("value"),
+      depth,
+      key: `${pathKey}::value`,
+      label: op === "?:" ? "Then" : "Value",
+      mustBeRef: false,
+      path: [...path, "value"],
+      prop: "value",
+    });
+  }
+
+  if (info.needsValue && info.valueIsNode) {
+    walk.rows.push(
+      blankRow({
+        indent: indentAt(depth),
+        key: `${pathKey}::per-item`,
+        kind: "label",
+        label: "Per-item",
+        nested: depth > 0 ? "true" : "false",
+        prop: "value",
+      }),
+    );
+    walkExpression(
+      walk,
+      (safeNode.value as Record<string, unknown> | null)?.operator
+        ? safeNode.value
+        : { operator: "!", target: null },
+      (v) => onChange({ ...safeNode, value: v }),
+      depth + 1,
+      [...path, "value"],
+    );
+  }
+
+  if (info.spliceArray || info.callArgs) {
+    walk.rows.push(
+      blankRow({
+        indent: indentAt(depth),
+        key: `${pathKey}::args`,
+        kind: "label",
+        label: "Args",
+        nested: depth > 0 ? "true" : "false",
+        prop: "value",
+      }),
+    );
+    walkArgs(
+      walk,
+      safeNode.value,
+      (v) => onChange({ ...safeNode, value: v }),
+      depth,
+      path,
+      info.callArgs
+        ? {
+            fallbackLabel: "arg",
+            labels: calleeParamLabels(safeNode.target, opts.stateEntries),
+          }
+        : { fallbackLabel: "item", labels: ["start", "del", "item"] },
+    );
+  }
+
+  if (info.switchCases) {
+    walkSwitchCases(walk, safeNode, onChange, depth, path);
+  }
+
+  if (info.needsInitial) {
+    walkOperand(walk, safeNode.initial, (v) => onChange({ ...safeNode, initial: v }), {
+      badgeKey: sub("initial"),
+      depth,
+      key: `${pathKey}::initial`,
+      label: op === "?:" ? "Else" : "Initial",
+      mustBeRef: false,
+      path: [...path, "initial"],
+      prop: "initial",
+    });
+  }
+}
+
+/** Start a walk with nothing emitted yet. */
+function newWalk(opts: ExpressionEditorOpts): Walk {
+  return {
+    chipPaths: new Map(),
+    opts,
+    plans: new Map(),
+    preview: opts.preview ?? null,
+    rows: [],
+  };
+}
+
+/** The projection one expression reads as: the rows, and what each key commits. */
+export function flattenExpression(
+  node: unknown,
+  onChange: (node: unknown) => void,
+  opts: ExpressionEditorOpts,
+): ExpressionProjection {
+  const walk = newWalk(opts);
+  walkExpression(walk, node, onChange, opts.depth ?? 0, opts.path ?? []);
+  return { chipPaths: walk.chipPaths, plans: walk.plans, rows: walk.rows };
+}
+
+/**
+ * The projection ONE operand slot reads as — a statement's `if` test, a `$switch` discriminant, a
+ * `dispatchEvent` detail (spec §20). The same rows, with no operator row above them.
+ */
+export function flattenOperand(
+  operand: unknown,
+  onChange: (next: unknown) => void,
+  opts: ExpressionEditorOpts & { label?: string; prop?: string },
+): ExpressionProjection {
+  const walk = newWalk(opts);
+  const path = opts.path ?? [];
+  walkOperand(walk, operand, onChange, {
+    badgeKey: path.join("/"),
+    depth: opts.depth ?? 0,
+    key: `${path.join("/")}::operand`,
+    label: opts.label ?? "Value",
+    mustBeRef: false,
+    path,
+    prop: opts.prop ?? "operand",
+  });
+  return { chipPaths: walk.chipPaths, plans: walk.plans, rows: walk.rows };
+}
+
+// ─── The mount seam ─────────────────────────────────────────────────────────
+
+/** What one standing editor is currently showing, and what its keys currently commit. */
+interface Held {
+  projection: ExpressionProjection;
+  opts: ExpressionEditorOpts;
+}
+
+/**
+ * The latest projection per host — the indirection that keeps a gesture honest.
+ *
+ * A mount reads its actions ONCE (`surfaces/expression-editor.ts` assigns rows on a repaint and
+ * never rebuilds the scope, which is what keeps a reader's caret in a field). So an action that
+ * closed over the projection it was built beside would go on committing the tree that projection
+ * was walked from, and every edit after the first would be written against a stale node: the Logic
+ * dock selects a sub-node, re-projects, and the operator picker then rewrites the node that used to
+ * be selected. Closing over the HOST instead and reading this map at call time is what makes "which
+ * node does this row address" a question answered when the row is used.
+ */
+const held = new Map<HTMLElement, Held>();
+
+/** The actions for a host, resolved through whatever that host is showing right now. */
+function actionsFor(host: HTMLElement): ExpressionActions {
+  const plan = (key: string) => held.get(host)?.projection.plans.get(key);
+  return {
+    act: (key) => plan(key)?.act?.(),
+    browse: (key, anchor) => plan(key)?.browse?.(anchor),
+    pickChip: (key) => {
+      const current = held.get(host);
+      const path = current?.projection.chipPaths.get(key);
+      if (path) {
+        current?.opts.onChipSelect?.(path);
       }
-    </div>
-  `;
+    },
+    remove: (key) => plan(key)?.remove?.(),
+    renameCase: (key, value) => plan(key)?.renameCase?.(value),
+    setBool: (key, checked) => plan(key)?.setBool?.(checked),
+    setLiteralType: (key, value) => plan(key)?.setLiteralType?.(value),
+    setNumber: (key, value) => plan(key)?.setNumber?.(value),
+    setOperator: (key, value) => plan(key)?.setOperator?.(value),
+    setRef: (key, value) => plan(key)?.setRef?.(value),
+    setSource: (key, value) => plan(key)?.setSource?.(value),
+    setText: (key, value) => plan(key)?.setText?.(value),
+  };
 }
 
-// ─── Switch Cases Editor ────────────────────────────────────────────────────
+/**
+ * Hand a fresh projection to `host` — mounting the document the first time, assigning after that.
+ *
+ * A slot the reader unbound takes its host out of the page and nothing else in the chain hears
+ * about it, because the panel around it simply renders something else. Sweeping here is the one
+ * moment this module is guaranteed to run.
+ */
+function paint(host: HTMLElement, projection: ExpressionProjection, opts: ExpressionEditorOpts) {
+  for (const other of held.keys()) {
+    if (!other.isConnected) {
+      held.delete(other);
+    }
+  }
+  disposeDetachedExpressionEditors();
+  held.set(host, { opts, projection });
+  renderExpressionEditorSurface(host, projection.rows, actionsFor(host));
+}
 
 /**
- * Case rows for the `switch` operator: matched value → result operand, plus the default operand.
- * Mirrors the element-level `$switch`/`cases` model (spec §19.4b).
+ * Draw one expression editor into `host`, or bring the one already there up to date.
+ *
+ * This is the seam every caller uses. The document CLEARS its host, so the host must be one the
+ * caller left empty — which is what all five of them already drew for the lit version.
  */
-function renderSwitchCasesEditor(
-  safeNode: Record<string, unknown>,
+export function mountExpressionEditor(
+  host: HTMLElement,
+  node: unknown,
   onChange: (node: unknown) => void,
-  opts: {
-    stateDefs: string[];
-    allowEventRef: boolean;
-    depth: number;
-    preview?: EditorPreview | null;
-    path: (string | number)[];
-  },
-  withBadge: (widget: unknown, key: string) => TemplateResult,
-): TemplateResult {
-  const cases = isJsonObject(safeNode.cases)
-    ? (safeNode.cases as Record<string, unknown>)
-    : ({} as Record<string, unknown>);
-  const entries = Object.entries(cases);
-  const setCases = (next: Record<string, unknown>) => onChange({ ...safeNode, cases: next });
+  opts: ExpressionEditorOpts,
+): void {
+  paint(host, flattenExpression(node, onChange, opts), opts);
+}
 
-  return html`
-    <div class="switch-cases">
-      ${entries.map(
-        ([key, operand]) => html`
-          <div class="switch-case-row">
-            <sp-textfield
-              size="s"
-              class="switch-case-key"
-              placeholder="value"
-              .value=${live(key)}
-              @change=${(e: Event) => {
-                const newKey = (e.target as HTMLInputElement).value;
-                if (newKey === key) {
-                  return;
-                }
-                const next: Record<string, unknown> = {};
-                for (const [k, v] of entries) {
-                  next[k === key ? newKey : k] = v;
-                }
-                setCases(next);
-              }}
-            ></sp-textfield>
-            ${withBadge(
-              renderOperandEditor(operand, (v) => setCases({ ...cases, [key]: v }), {
-                ...opts,
-                mustBeRef: false,
-                path: [...opts.path, "cases", key],
-              }),
-              [...opts.path, "cases", key].join("/"),
-            )}
-            <sp-action-button
-              quiet
-              size="xs"
-              @click=${() => {
-                const next = { ...cases };
-                delete next[key];
-                setCases(next);
-              }}
-            >
-              <sp-icon-delete slot="icon"></sp-icon-delete>
-            </sp-action-button>
-          </div>
-        `,
-      )}
-      <div class="switch-case-row">
-        <span class="switch-case-key switch-case-default">default</span>
-        ${withBadge(
-          renderOperandEditor(safeNode.default, (v) => onChange({ ...safeNode, default: v }), {
-            ...opts,
-            mustBeRef: false,
-            path: [...opts.path, "default"],
-          }),
-          [...opts.path, "default"].join("/"),
-        )}
-      </div>
-      <sp-action-button
-        quiet
-        size="s"
-        @click=${() => {
-          let n = entries.length + 1;
-          let key = `case ${n}`;
-          while (Object.hasOwn(cases, key)) {
-            n += 1;
-            key = `case ${n}`;
-          }
-          setCases({ ...cases, [key]: null });
-        }}
-      >
-        + Add case
-      </sp-action-button>
-    </div>
-  `;
+/**
+ * Draw ONE operand slot into `host` — statement position, where there is no operator to pick.
+ *
+ * @param opts The editor's options, plus what to call the slot in its own label.
+ */
+export function mountOperandEditor(
+  host: HTMLElement,
+  operand: unknown,
+  onChange: (next: unknown) => void,
+  opts: ExpressionEditorOpts & { label?: string; prop?: string },
+): void {
+  paint(host, flattenOperand(operand, onChange, opts), opts);
 }