@jxsuite/studio 4.1.0 → 5.0.0

package/dist/chunks/{studio-x4qkdat5.js → studio-57mf66w2.js}

@@ -1,1399 +1,28 @@
 import {
-  BLESSED_GLOBALS,
-  BLESSED_OPERATORS,
-  PURE_METHOD_OPS,
-  intlHelpersClause,
-  rectOf,
-  renderEmptyState
-} from "./studio-2b946z26.js";
+  intlHelpersClause
+} from "./studio-5jy81t3s.js";
 import {
   LANGUAGE_TAG_PATTERN,
-  activeTab
-} from "./studio-trxrabqf.js";
+  activeTab2
+} from "./studio-az3zd49t.js";
 import {
-  classMap,
-  ifDefined,
-  styleMap
-} from "./studio-m3hwn7y1.js";
-import {
-  cloneValue
-} from "./studio-5ehhackm.js";
-import {
-  getLayerSlot
-} from "./studio-t7qb9db8.js";
-import {
-  live,
-  ref
-} from "./studio-4rzyrtjz.js";
-import {
-  html,
-  nothing,
-  render
-} from "./studio-kryvsw6j.js";
-import {
-  isFunctionDef,
-  isJsonObject,
-  isNamedFormulaDef,
-  isRef,
-  isTemplateString
-} from "./studio-q7v10cg2.js";
-
-// src/panels/provenance.ts
-var PROVENANCE_TITLES = {
-  bound: "Bound",
-  default: "Not set",
-  inherited: "Inherited",
-  mixed: "Mixed",
-  set: "Set here"
-};
-function provenanceText(p) {
-  if (p.state === "inherited") {
-    return p.donor ? `from ${p.donor}` : "inherited";
-  }
-  if (p.state === "bound") {
-    return p.donor ?? "bound";
-  }
-  if (p.state === "mixed") {
-    return p.donor ? `mixed (${p.donor})` : "mixed";
-  }
-  return "";
-}
-function provenanceTitle(prop, p) {
-  if (p.title) {
-    return p.title;
-  }
-  const lead = PROVENANCE_TITLES[p.state];
-  if (p.state === "inherited") {
-    return `${lead} from ${p.donor ?? "the cascade"} — click to go there`;
-  }
-  if (p.state === "bound") {
-    return p.donor ? `${lead} to ${p.donor} — click to open it` : lead;
-  }
-  if (p.state === "set") {
-    return `${lead} — click to clear ${prop}`;
-  }
-  if (p.state === "mixed") {
-    const count = p.donor ? `${p.donor} selected elements` : "the selected elements";
-    return `${lead} — ${count} have different values for ${prop}; typing sets them all`;
-  }
-  return `${lead} — ${prop} falls back to the browser default`;
-}
-function renderProvenanceChip(prop, p) {
-  if (p.state === "default") {
-    return nothing;
-  }
-  const text = provenanceText(p);
-  const title = provenanceTitle(prop, p);
-  const isDot = p.state === "set";
-  const classes = classMap({
-    "provenance-chip": true,
-    [`provenance-chip--${p.state}`]: true,
-    "set-dot": isDot
-  });
-  const { onClick } = p;
-  if (!onClick) {
-    return html`<span class=${classes} title=${title}>${text}</span>`;
-  }
-  const activate = (e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    onClick();
-  };
-  return isDot ? html`<span class=${classes} title=${title} @click=${activate}>${text}</span>` : html`<button type="button" class=${classes} title=${title} @click=${activate}>
-        ${text}
-      </button>`;
-}
-function countProvenance(states) {
-  const counts = { bound: 0, inherited: 0, mixed: 0, set: 0 };
-  for (const state of states) {
-    if (state !== "default") {
-      counts[state] += 1;
-    }
-  }
-  return counts;
-}
-function hasProvenance(counts) {
-  return counts.set > 0 || counts.inherited > 0 || counts.bound > 0 || counts.mixed > 0;
-}
-function provenanceSummaryText(counts) {
-  const parts = [];
-  if (counts.set > 0) {
-    parts.push(`${counts.set} set here`);
-  }
-  if (counts.inherited > 0) {
-    parts.push(`${counts.inherited} inherited`);
-  }
-  if (counts.bound > 0) {
-    parts.push(`${counts.bound} bound`);
-  }
-  if (counts.mixed > 0) {
-    parts.push(`${counts.mixed} mixed`);
-  }
-  return parts.length > 0 ? parts.join(" · ") : "nothing set";
-}
-function renderProvenanceDots(counts, opts = {}) {
-  if (!hasProvenance(counts)) {
-    return nothing;
-  }
-  const summary = provenanceSummaryText(counts);
-  return html`
-    <span class="provenance-dots" title=${summary} aria-label=${summary}>
-      ${counts.set > 0 ? renderProvenanceChip("section", {
-    state: "set",
-    title: opts.clearTitle ?? summary,
-    ...opts.onClearSet ? { onClick: opts.onClearSet } : {}
-  }) : nothing}
-      ${counts.inherited > 0 ? html`<span
-              class="provenance-chip provenance-chip--inherited set-dot"
-              title=${summary}
-            ></span>` : nothing}
-      ${counts.bound > 0 ? html`<span
-              class="provenance-chip provenance-chip--bound set-dot"
-              title=${summary}
-            ></span>` : nothing}
-      ${counts.mixed > 0 ? html`<span
-              class="provenance-chip provenance-chip--mixed set-dot"
-              title=${summary}
-            ></span>` : nothing}
-    </span>
-  `;
-}
-
-// src/ui/field-row.ts
-function renderFieldRow({
-  prop,
-  label,
-  hasValue,
-  onClear,
-  widget,
-  labelExtra,
-  span,
-  warning,
-  provenance,
-  error,
-  errorCount
-}) {
-  const invalid = Boolean(error);
-  const chip = provenance ?? (hasValue && onClear ? { onClick: onClear, state: "set", title: `Clear ${prop}` } : undefined);
-  return html`
-    <div
-      class=${classMap({
-    "style-row": true,
-    "style-row--invalid": invalid,
-    "style-row--warning": Boolean(warning) && !invalid
-  })}
-      data-prop=${prop}
-      style=${span === 2 ? "grid-column: 1 / -1" : ""}
-    >
-      <div class="style-row-label">
-        ${chip ? renderProvenanceChip(prop, chip) : nothing}
-        <sp-field-label size="s" title=${prop}>${label}</sp-field-label>
-        ${labelExtra ?? nothing}
-      </div>
-      ${widget}
-      ${invalid ? html`<p class="style-row-error" role="alert">
-              ${error}${errorCount !== undefined && errorCount > 1 ? html`<span class="style-row-error-count">×${errorCount}</span>` : nothing}
-            </p>` : nothing}
-    </div>
-  `;
-}
-function renderKvRow({
-  name,
-  value,
-  onCommit,
-  onDelete,
-  placeholderFor,
-  debounceMs = 400
-}) {
-  let debounce;
-  let currentName = name;
-  let currentValue = value;
-  const commit = () => {
-    clearTimeout(debounce);
-    debounce = setTimeout(() => onCommit(currentName, currentValue), debounceMs);
-  };
-  return html`
-    <div class="kv-row" data-prop=${name}>
-      <sp-textfield
-        size="s"
-        class="kv-key"
-        .value=${name}
-        @input=${(e) => {
-    currentName = e.target.value;
-    commit();
-  }}
-        @change=${placeholderFor ? (e) => {
-    const cell = e.target.closest(".kv-row")?.querySelector(".kv-val");
-    cell?.setAttribute("placeholder", placeholderFor(e.target.value));
-  } : nothing}
-      ></sp-textfield>
-      <sp-textfield
-        size="s"
-        class="kv-val"
-        .value=${value}
-        placeholder=${placeholderFor ? placeholderFor(name) : ""}
-        @input=${(e) => {
-    currentValue = e.target.value;
-    commit();
-  }}
-      ></sp-textfield>
-      <sp-action-button size="xs" quiet title="Remove ${name}" @click=${onDelete}>
-        <sp-icon-close slot="icon"></sp-icon-close>
-      </sp-action-button>
-    </div>
-  `;
-}
-function renderStaticKvRow({ name, detail, value, tags }) {
-  return html`
-    <div class="kv-static-row" data-prop=${name}>
-      <code class="kv-static-name">${name}</code>
-      ${detail ? html`<span class="kv-static-detail">${detail}</span>` : nothing}
-      ${value ? html`<span class="kv-static-value">${value}</span>` : nothing}
-      ${(tags ?? []).map((tag) => html`<span class="kv-static-tag">${tag}</span>`)}
-    </div>
-  `;
-}
-
-// src/ui/formula-chips.ts
-function isExprNode(value) {
-  return isJsonObject(value) && typeof value.operator === "string";
-}
-function refLabel(ref2) {
-  if (ref2.startsWith("#/state/")) {
-    return ref2.slice("#/state/".length);
-  }
-  if (ref2.startsWith("window#/")) {
-    return ref2.slice("window#/".length).replaceAll("/", ".");
-  }
-  return ref2 || "?";
-}
-function operandLabel(value) {
-  if (isRef(value)) {
-    return refLabel(value.$ref);
-  }
-  if (isExprNode(value)) {
-    return `(${chipSummary(value)})`;
-  }
-  if (typeof value === "string") {
-    return JSON.stringify(value);
-  }
-  return String(value);
-}
-function targetPath(basePath, hops) {
-  return [...basePath, ...Array.from({ length: hops }, () => "target")];
-}
-function unrollChain(node, basePath) {
-  const nodes = [];
-  let current = node;
-  for (;; ) {
-    nodes.push(current);
-    const next = current.target;
-    if (isExprNode(next)) {
-      current = next;
-    } else {
-      break;
-    }
-  }
-  const deepest = nodes.at(-1);
-  const head = "target" in deepest || deepest.target !== undefined ? { path: targetPath(basePath, nodes.length), value: deepest.target } : null;
-  const rootFirst = nodes.map((n, i) => ({ node: n, path: targetPath(basePath, i) }));
-  return { head, links: rootFirst.toReversed() };
-}
-function chipSummary(node) {
-  if (!isExprNode(node)) {
-    return operandLabel(node);
-  }
-  const { head, links } = unrollChain(node, []);
-  const parts = [];
-  if (head) {
-    parts.push(operandLabel(head.value));
-  }
-  for (const link of links) {
-    parts.push(String(link.node.operator));
-  }
-  return parts.join(" › ");
-}
-var CHIP_STYLE = "display:inline-flex;align-items:center;gap:4px;max-width:180px;padding:1px 7px;" + "border:1px solid var(--spectrum-gray-300, #3c3c3c);border-radius:10px;cursor:pointer;" + "background:var(--spectrum-gray-100, #232323);color:var(--spectrum-gray-800, #d0d0d0);" + "font-size:11px;font-family:var(--spectrum-code-font-family, monospace);line-height:18px";
-function renderChipBadge(preview, pathKey) {
-  const text = preview?.values.get(pathKey);
-  if (text === undefined) {
-    return nothing;
-  }
-  return html`
-    <span
-      class="expr-live-badge"
-      title=${text}
-      style="font-family:var(--spectrum-code-font-family, monospace);font-size:10px;line-height:16px;padding:0 5px;border-radius:4px;background:var(--spectrum-gray-200, #323232);color:var(--spectrum-seafoam-900, #35a690);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;flex-shrink:1"
-      >${text}</span
-    >
-  `;
-}
-function renderChip(label, path, onSelect, preview, group = false) {
-  return html`
-    <button
-      type="button"
-      class=${group ? "formula-chip formula-chip--group" : "formula-chip"}
-      data-path=${path.join("/")}
-      style=${CHIP_STYLE}
-      title=${label}
-      @click=${() => onSelect(path)}
-    >
-      <span style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px"
-        >${label}</span
-      >
-      ${renderChipBadge(preview, path.join("/"))}
-    </button>
-  `;
-}
-function groupChips(link, onSelect, preview) {
-  const chips = [];
-  const add = (operand, path) => {
-    if (isExprNode(operand)) {
-      chips.push(renderChip(`(${chipSummary(operand)})`, path, onSelect, preview, true));
-    }
-  };
-  const { value, initial, cases } = link.node;
-  if (Array.isArray(value)) {
-    for (const [i, item] of value.entries()) {
-      add(item, [...link.path, "value", i]);
-    }
-  } else {
-    add(value, [...link.path, "value"]);
-  }
-  add(initial, [...link.path, "initial"]);
-  if (isJsonObject(cases)) {
-    for (const [key, operand] of Object.entries(cases)) {
-      add(operand, [...link.path, "cases", key]);
-    }
-  }
-  add(link.node.default, [...link.path, "default"]);
-  return chips;
-}
-function renderFormulaChips(node, onSelect, opts = {}) {
-  if (!isExprNode(node)) {
-    return html`${nothing}`;
-  }
-  const preview = opts.preview ?? null;
-  const basePath = opts.path ?? [];
-  const { head, links } = unrollChain(node, basePath);
-  const chips = [];
-  if (head) {
-    chips.push(renderChip(operandLabel(head.value), head.path, onSelect, preview));
-  }
-  for (const link of links) {
-    chips.push(renderChip(String(link.node.operator), link.path, onSelect, preview), ...groupChips(link, onSelect, preview));
-  }
-  return html`
-    <div
-      class="formula-chips"
-      style="display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:2px 0 6px"
-    >
-      ${chips}
-    </div>
-  `;
-}
-
-// ../formulas/src/catalog.ts
-var catalog = [
-  {
-    description: "Arithmetic mean of an array of numbers; 0 for an empty array.",
-    expression: {
-      operator: "?:",
-      target: {
-        $ref: "$args/values/length"
-      },
-      value: {
-        operator: "/",
-        target: {
-          operator: "reduce",
-          target: {
-            $ref: "$args/values"
-          },
-          initial: 0,
-          value: {
-            operator: "+",
-            target: {
-              $ref: "$reduce/acc"
-            },
-            value: {
-              $ref: "$map/item"
-            }
-          }
-        },
-        value: {
-          $ref: "$args/values/length"
-        }
-      },
-      initial: 0
-    },
-    name: "average",
-    parameters: [
-      {
-        name: "values",
-        type: {
-          text: "number[]"
-        }
-      }
-    ]
-  },
-  {
-    description: "Uppercase the first character of a string, leaving the rest unchanged (the CSS text-transform: capitalize shape for a single word).",
-    expression: {
-      operator: "+",
-      target: {
-        operator: "toUpperCase",
-        target: {
-          operator: "charAt",
-          target: {
-            $ref: "$args/text"
-          },
-          value: 0
-        }
-      },
-      value: {
-        operator: "slice",
-        target: {
-          $ref: "$args/text"
-        },
-        value: 1
-      }
-    },
-    name: "capitalize",
-    parameters: [
-      {
-        name: "text",
-        type: {
-          text: "string"
-        }
-      }
-    ]
-  },
-  {
-    description: "Bound a number to the [min, max] range (the TC39 Math.clamp shape): returns min when below, max when above, the value itself otherwise.",
-    expression: {
-      operator: "call",
-      target: {
-        $ref: "window#/Math/min"
-      },
-      value: [
-        {
-          operator: "call",
-          target: {
-            $ref: "window#/Math/max"
-          },
-          value: [
-            {
-              $ref: "$args/value"
-            },
-            {
-              $ref: "$args/min"
-            }
-          ]
-        },
-        {
-          $ref: "$args/max"
-        }
-      ]
-    },
-    name: "clamp",
-    parameters: [
-      {
-        name: "value",
-        type: {
-          text: "number"
-        }
-      },
-      {
-        name: "min",
-        type: {
-          text: "number"
-        }
-      },
-      {
-        name: "max",
-        type: {
-          text: "number"
-        }
-      }
-    ]
-  },
-  {
-    description: "A copy of an array with the falsy elements removed (Array.prototype.filter on truthiness).",
-    expression: {
-      operator: "filter",
-      target: {
-        $ref: "$args/values"
-      },
-      value: {
-        operator: "!",
-        target: {
-          operator: "!",
-          target: {
-            $ref: "$map/item"
-          }
-        }
-      }
-    },
-    name: "compact",
-    parameters: [
-      {
-        name: "values",
-        type: {
-          text: "unknown[]"
-        }
-      }
-    ]
-  },
-  {
-    description: "The length of an array or string, or 0 when the value is missing.",
-    expression: {
-      operator: "??",
-      target: {
-        $ref: "$args/values/length"
-      },
-      value: 0
-    },
-    name: "count",
-    parameters: [
-      {
-        name: "values",
-        type: {
-          text: "unknown[] | string"
-        }
-      }
-    ]
-  },
-  {
-    description: "The first element of an array (index 0), or null when empty.",
-    expression: {
-      operator: "??",
-      target: {
-        $ref: "$args/values/0"
-      },
-      value: null
-    },
-    name: "first",
-    parameters: [
-      {
-        name: "values",
-        type: {
-          text: "unknown[]"
-        }
-      }
-    ]
-  },
-  {
-    description: 'The uppercase first letters of each whitespace-separated word, joined (e.g. "ada lovelace" → "AL").',
-    expression: {
-      operator: "join",
-      target: {
-        operator: "map",
-        target: {
-          operator: "split",
-          target: {
-            $ref: "$args/name"
-          },
-          value: " "
-        },
-        value: {
-          operator: "toUpperCase",
-          target: {
-            operator: "charAt",
-            target: {
-              $ref: "$map/item"
-            },
-            value: 0
-          }
-        }
-      },
-      value: ""
-    },
-    name: "initials",
-    parameters: [
-      {
-        name: "name",
-        type: {
-          text: "string"
-        }
-      }
-    ]
-  },
-  {
-    description: "True when an array or string has no elements (length 0 — a missing value counts as empty).",
-    expression: {
-      operator: "===",
-      target: {
-        operator: "??",
-        target: {
-          $ref: "$args/value/length"
-        },
-        value: 0
-      },
-      value: 0
-    },
-    name: "isEmpty",
-    parameters: [
-      {
-        name: "value",
-        type: {
-          text: "unknown[] | string"
-        }
-      }
-    ]
-  },
-  {
-    description: "The last element of an array (Array.prototype.at(-1)), or undefined when empty.",
-    expression: {
-      operator: "at",
-      target: {
-        $ref: "$args/values"
-      },
-      value: -1
-    },
-    name: "last",
-    parameters: [
-      {
-        name: "values",
-        type: {
-          text: "unknown[]"
-        }
-      }
-    ]
-  },
-  {
-    description: "The largest number in an array (Math.max folded over the values); undefined for an empty array.",
-    expression: {
-      operator: "reduce",
-      target: {
-        $ref: "$args/values"
-      },
-      initial: {
-        $ref: "$args/values/0"
-      },
-      value: {
-        operator: "call",
-        target: {
-          $ref: "window#/Math/max"
-        },
-        value: [
-          {
-            $ref: "$reduce/acc"
-          },
-          {
-            $ref: "$map/item"
-          }
-        ]
-      }
-    },
-    name: "max",
-    parameters: [
-      {
-        name: "values",
-        type: {
-          text: "number[]"
-        }
-      }
-    ]
-  },
-  {
-    description: "The smallest number in an array (Math.min folded over the values); undefined for an empty array.",
-    expression: {
-      operator: "reduce",
-      target: {
-        $ref: "$args/values"
-      },
-      initial: {
-        $ref: "$args/values/0"
-      },
-      value: {
-        operator: "call",
-        target: {
-          $ref: "window#/Math/min"
-        },
-        value: [
-          {
-            $ref: "$reduce/acc"
-          },
-          {
-            $ref: "$map/item"
-          }
-        ]
-      }
-    },
-    name: "min",
-    parameters: [
-      {
-        name: "values",
-        type: {
-          text: "number[]"
-        }
-      }
-    ]
-  },
-  {
-    description: "part / whole as a percentage (0 when the whole is 0 or missing).",
-    expression: {
-      operator: "?:",
-      target: {
-        $ref: "$args/whole"
-      },
-      value: {
-        operator: "*",
-        target: {
-          operator: "/",
-          target: {
-            $ref: "$args/part"
-          },
-          value: {
-            $ref: "$args/whole"
-          }
-        },
-        value: 100
-      },
-      initial: 0
-    },
-    name: "percent",
-    parameters: [
-      {
-        name: "part",
-        type: {
-          text: "number"
-        }
-      },
-      {
-        name: "whole",
-        type: {
-          text: "number"
-        }
-      }
-    ]
-  },
-  {
-    description: "Round a number to the given decimal places (Math.round against a Math.pow(10, digits) scale).",
-    expression: {
-      operator: "/",
-      target: {
-        operator: "call",
-        target: {
-          $ref: "window#/Math/round"
-        },
-        value: [
-          {
-            operator: "*",
-            target: {
-              $ref: "$args/value"
-            },
-            value: {
-              operator: "call",
-              target: {
-                $ref: "window#/Math/pow"
-              },
-              value: [
-                10,
-                {
-                  $ref: "$args/digits"
-                }
-              ]
-            }
-          }
-        ]
-      },
-      value: {
-        operator: "call",
-        target: {
-          $ref: "window#/Math/pow"
-        },
-        value: [
-          10,
-          {
-            $ref: "$args/digits"
-          }
-        ]
-      }
-    },
-    name: "roundTo",
-    parameters: [
-      {
-        name: "value",
-        type: {
-          text: "number"
-        }
-      },
-      {
-        name: "digits",
-        type: {
-          text: "number"
-        },
-        default: 0
-      }
-    ]
-  },
-  {
-    description: "Add every number in an array (Array.prototype.reduce with +, seeded at 0).",
-    expression: {
-      operator: "reduce",
-      target: {
-        $ref: "$args/values"
-      },
-      initial: 0,
-      value: {
-        operator: "+",
-        target: {
-          $ref: "$reduce/acc"
-        },
-        value: {
-          $ref: "$map/item"
-        }
-      }
-    },
-    name: "sum",
-    parameters: [
-      {
-        name: "values",
-        type: {
-          text: "number[]"
-        }
-      }
-    ]
-  },
-  {
-    description: "Shorten a string to at most the given length, appending a horizontal ellipsis when cut.",
-    expression: {
-      operator: "?:",
-      target: {
-        operator: ">",
-        target: {
-          $ref: "$args/text/length"
-        },
-        value: {
-          $ref: "$args/length"
-        }
-      },
-      value: {
-        operator: "+",
-        target: {
-          operator: "slice",
-          target: {
-            $ref: "$args/text"
-          },
-          value: [
-            0,
-            {
-              $ref: "$args/length"
-            }
-          ]
-        },
-        value: "…"
-      },
-      initial: {
-        $ref: "$args/text"
-      }
-    },
-    name: "truncate",
-    parameters: [
-      {
-        name: "text",
-        type: {
-          text: "string"
-        }
-      },
-      {
-        name: "length",
-        type: {
-          text: "number"
-        }
-      }
-    ]
-  }
-];
-// src/ui/formula-catalog.ts
-function applyCatalogPick(entry, onChange, opts) {
-  if (entry.ensure && !opts?.stateEntries?.[entry.ensure.name]) {
-    opts?.onInsertDef?.(entry.ensure.name, entry.ensure.def);
-  }
-  onChange(entry.insert());
-}
-var REF_TARGET = { description: "Writable pointer the operation applies to", name: "target" };
-var LEFT = { description: "Left operand", name: "target" };
-var RIGHT = { description: "Right operand", name: "value" };
-function assignMeta(op, verb) {
-  return {
-    description: `${verb} assignment operator (ECMA \`${op}\`): stores the result at the target pointer.`,
-    group: "Assignment",
-    insert: () => ({ operator: op, target: { $ref: "" }, value: null }),
-    parameters: [REF_TARGET, { description: "Value assigned to the target", name: "value" }]
-  };
-}
-function binaryMeta(group, op, description) {
-  return {
-    description,
-    group,
-    insert: () => ({ operator: op, target: null, value: null }),
-    parameters: [LEFT, RIGHT]
-  };
-}
-function arrayMeta(op, description, withValue) {
-  return {
-    description,
-    group: "Array methods",
-    insert: () => withValue ? { operator: op, target: { $ref: "" }, value: null } : { operator: op, target: { $ref: "" } },
-    parameters: withValue ? [REF_TARGET, { description: "Element to add", name: "value" }] : [REF_TARGET]
-  };
-}
-function aggregateMeta(op, description, withInitial) {
-  const node = {
-    operator: op,
-    target: { $ref: "" },
-    value: { operator: "!", target: null }
-  };
-  return {
-    description,
-    group: "Aggregate",
-    insert: () => withInitial ? { ...node, initial: 0 } : { ...node },
-    parameters: [
-      { description: "Array pointer to iterate", name: "target" },
-      { description: "Per-item expression ($map/item, $map/index)", name: "value" },
-      ...withInitial ? [{ description: "Initial accumulator ($reduce/acc)", name: "initial" }] : []
-    ]
-  };
-}
-var OPERATOR_META = {
-  "!": {
-    description: "Logical NOT operator (ECMA `!`): coerces the operand to boolean and negates it.",
-    group: "Unary",
-    insert: () => ({ operator: "!", target: null }),
-    parameters: [{ description: "Operand to negate", name: "target" }]
-  },
-  "!==": binaryMeta("Comparison", "!==", "Strict inequality operator (ECMA `!==`): true when the operands differ without coercion."),
-  "%": binaryMeta("Arithmetic", "%", "Remainder operator (ECMA `%`): remainder of dividing the left operand by the right."),
-  "&&": binaryMeta("Logical", "&&", "Logical AND operator (ECMA `&&`): yields the right operand when the left is truthy."),
-  "*": binaryMeta("Arithmetic", "*", "Multiplication operator (ECMA `*`): numeric product of the operands."),
-  "*=": assignMeta("*=", "Multiplication"),
-  "+": binaryMeta("Arithmetic", "+", "Addition operator (ECMA `+`): numeric addition, or string concatenation."),
-  "+=": assignMeta("+=", "Addition"),
-  "-": binaryMeta("Arithmetic", "-", "Subtraction operator (ECMA `-`); with no value operand it is unary negation."),
-  "-=": assignMeta("-=", "Subtraction"),
-  "/": binaryMeta("Arithmetic", "/", "Division operator (ECMA `/`): quotient of the operands."),
-  "/=": assignMeta("/=", "Division"),
-  "<": binaryMeta("Comparison", "<", "Less-than operator (ECMA `<`): relational comparison of the operands."),
-  "<=": binaryMeta("Comparison", "<=", "Less-than-or-equal operator (ECMA `<=`): relational comparison of the operands."),
-  "=": assignMeta("=", "Simple"),
-  "===": binaryMeta("Comparison", "===", "Strict equality operator (ECMA `===`): true when the operands are equal without coercion."),
-  ">": binaryMeta("Comparison", ">", "Greater-than operator (ECMA `>`): relational comparison of the operands."),
-  ">=": binaryMeta("Comparison", ">=", "Greater-than-or-equal operator (ECMA `>=`): relational comparison of the operands."),
-  "??": binaryMeta("Logical", "??", "Nullish coalescing operator (ECMA `??`): yields the right operand when the left is null or undefined."),
-  "?:": {
-    description: "Conditional operator (ECMA `?:`): evaluates the test in target, yielding value when truthy, initial otherwise.",
-    group: "Conditional",
-    insert: () => ({ initial: null, operator: "?:", target: null, value: null }),
-    parameters: [
-      { description: "Test condition", name: "target" },
-      { description: "Result when the test is truthy", name: "value" },
-      { description: "Result when the test is falsy", name: "initial" }
-    ]
-  },
-  "||": binaryMeta("Logical", "||", "Logical OR operator (ECMA `||`): yields the right operand when the left is falsy."),
-  call: {
-    description: "Function.prototype.call (ECMA): invokes a named formula (#/state/…) or blessed pure global (window#/…) with positional arguments.",
-    group: "Function",
-    insert: () => ({ operator: "call", target: { $ref: "" }, value: [] }),
-    parameters: [
-      { description: "Callee pointer: #/state/<formula> or window#/<global>", name: "target" },
-      { description: "Positional argument list", name: "value" }
-    ]
-  },
-  filter: aggregateMeta("filter", "Array.prototype.filter (ECMA): keeps elements whose per-item expression is truthy.", false),
-  map: aggregateMeta("map", "Array.prototype.map (ECMA): transforms each element via the per-item expression.", false),
-  pop: arrayMeta("pop", "Array.prototype.pop (ECMA): removes and returns the last element of the target array.", false),
-  push: arrayMeta("push", "Array.prototype.push (ECMA): appends the value to the target array.", true),
-  reduce: aggregateMeta("reduce", "Array.prototype.reduce (ECMA): folds the array into an accumulator via the per-item expression.", true),
-  shift: arrayMeta("shift", "Array.prototype.shift (ECMA): removes and returns the first element of the target array.", false),
-  splice: {
-    description: "Array.prototype.splice (ECMA): removes and/or inserts elements at an index of the target array.",
-    group: "Array methods",
-    insert: () => ({ operator: "splice", target: { $ref: "" }, value: [null] }),
-    parameters: [
-      REF_TARGET,
-      { description: "Arguments: start, deleteCount, items…", name: "value" }
-    ]
-  },
-  switch: {
-    description: "Switch selection (ECMA `switch` semantics): matches the target's string form against case keys, falling back to default.",
-    group: "Conditional",
-    insert: () => ({ cases: {}, default: null, operator: "switch", target: null }),
-    parameters: [
-      { description: "Discriminant value", name: "target" },
-      { description: "Matched value → result operand map", name: "cases" },
-      { description: "Result when no case matches", name: "default" }
-    ]
-  },
-  unshift: arrayMeta("unshift", "Array.prototype.unshift (ECMA): prepends the value to the target array.", true)
-};
-function operatorEntries() {
-  const out = [];
-  for (const op of BLESSED_OPERATORS) {
-    const meta = Object.hasOwn(OPERATOR_META, op) ? OPERATOR_META[op] : undefined;
-    if (meta) {
-      out.push({
-        description: meta.description,
-        group: meta.group,
-        insert: meta.insert,
-        kind: "operator",
-        label: op,
-        name: op,
-        parameters: meta.parameters
-      });
-    } else if (PURE_METHOD_OPS.has(op)) {
-      out.push(pureMethodEntry(op));
-    }
-  }
-  return out;
-}
-var PURE_METHOD_PROTO = {
-  at: "Array/String",
-  charAt: "String",
-  concat: "Array/String",
-  endsWith: "String",
-  flat: "Array",
-  includes: "Array/String",
-  indexOf: "Array/String",
-  join: "Array",
-  lastIndexOf: "Array/String",
-  normalize: "String",
-  padEnd: "String",
-  padStart: "String",
-  repeat: "String",
-  replaceAll: "String",
-  slice: "Array/String",
-  split: "String",
-  startsWith: "String",
-  toFixed: "Number",
-  toLocaleLowerCase: "String",
-  toLocaleString: "Number",
-  toLocaleUpperCase: "String",
-  toLowerCase: "String",
-  toPrecision: "Number",
-  toReversed: "Array",
-  toSorted: "Array",
-  toSpliced: "Array",
-  toUpperCase: "String",
-  trim: "String",
-  trimEnd: "String",
-  trimStart: "String",
-  with: "Array"
-};
-var ZERO_ARG_METHODS = new Set([
-  "flat",
-  "normalize",
-  "toLocaleLowerCase",
-  "toLocaleString",
-  "toLocaleUpperCase",
-  "toLowerCase",
-  "toReversed",
-  "toSorted",
-  "toUpperCase",
-  "trim",
-  "trimEnd",
-  "trimStart"
-]);
-function pureMethodEntry(op) {
-  const proto = PURE_METHOD_PROTO[op] ?? "Standard library";
-  return {
-    description: `${proto}.prototype.${op} (ECMA) — pure: never mutates the receiver. Receiver in target; argument (or argument list) in value.`,
-    group: `${proto} methods`,
-    insert: () => ZERO_ARG_METHODS.has(op) ? { operator: op, target: { $ref: "" } } : { operator: op, target: { $ref: "" }, value: null },
-    kind: "operator",
-    label: op,
-    name: op,
-    parameters: []
-  };
-}
-var HELPER_DESCRIPTIONS = {
-  "Intl/formatDate": "Intl.formatDate(value, locale?, options?) — blessed helper wrapping new Intl.DateTimeFormat(locale, options).format(new Date(value)).",
-  "Intl/formatNumber": "Intl.formatNumber(value, locale?, options?) — blessed helper wrapping new Intl.NumberFormat(locale, options).format(value).",
-  "Intl/formatRelativeTime": "Intl.formatRelativeTime(value, unit, locale?, options?) — blessed helper wrapping new Intl.RelativeTimeFormat(locale, options).format(value, unit)."
-};
-function globalEntries() {
-  const out = [];
-  for (const name of BLESSED_GLOBALS) {
-    const slash = name.indexOf("/");
-    const group = slash === -1 ? "globalThis" : name.slice(0, slash);
-    const label = name.replaceAll("/", ".");
-    out.push({
-      description: HELPER_DESCRIPTIONS[name] ?? `${label} — blessed pure global from the ECMAScript standard library, invoked via the call operator (window#/${name}).`,
-      group,
-      insert: () => ({ operator: "call", target: { $ref: `window#/${name}` }, value: [] }),
-      kind: "global",
-      label,
-      name,
-      parameters: []
-    });
-  }
-  return out;
-}
-function toParameterInfo(p) {
-  if (typeof p === "string") {
-    return p ? { name: p } : null;
-  }
-  if (!isJsonObject(p) || typeof p.name !== "string" || !p.name) {
-    return null;
-  }
-  const info = { name: p.name };
-  const { type } = p;
-  if (typeof type === "string") {
-    info.type = type;
-  } else if (isJsonObject(type)) {
-    if (typeof type.text === "string") {
-      info.type = type.text;
-    } else if (typeof type.type === "string") {
-      info.type = type.type;
-    }
-  }
-  if (typeof p.description === "string") {
-    info.description = p.description;
-  }
-  if ("default" in p && p.default !== undefined) {
-    info.default = p.default;
-  }
-  return info;
-}
-function namedFormulaEntries(state) {
-  const out = [];
-  for (const [key, def] of Object.entries(state ?? {})) {
-    if (!isNamedFormulaDef(def)) {
-      continue;
-    }
-    const parameters = def.parameters.map((p) => toParameterInfo(p)).filter((p) => p !== null);
-    const description = typeof def.description === "string" && def.description ? def.description : typeof def.$title === "string" && def.$title ? def.$title : `Named formula "${key}" from document state.`;
-    out.push({
-      description,
-      group: "Formulas",
-      insert: () => ({
-        operator: "call",
-        target: { $ref: `#/state/${key}` },
-        value: parameters.map((p) => p.default ?? null)
-      }),
-      kind: "formula",
-      label: key,
-      name: key,
-      parameters
-    });
-  }
-  return out;
-}
-function packagedFormulaEntries(state) {
-  const out = [];
-  for (const formula of catalog) {
-    if (state?.[formula.name]) {
-      continue;
-    }
-    const parameters = formula.parameters.map((p) => toParameterInfo(p)).filter((p) => p !== null);
-    out.push({
-      description: formula.description,
-      ensure: {
-        def: {
-          $description: formula.description,
-          $expression: formula.expression,
-          parameters: formula.parameters
-        },
-        name: formula.name
-      },
-      group: "Formulas library",
-      insert: () => ({
-        operator: "call",
-        target: { $ref: `#/state/${formula.name}` },
-        value: parameters.map((p) => p.default ?? null)
-      }),
-      kind: "formula",
-      label: formula.name,
-      name: formula.name,
-      parameters
-    });
-  }
-  return out;
-}
-function formulaCatalog(state) {
-  return [
-    ...namedFormulaEntries(state),
-    ...packagedFormulaEntries(state),
-    ...operatorEntries(),
-    ...globalEntries()
-  ];
-}
-function calleeEntry(ref2, state) {
-  if (ref2.startsWith("window#/")) {
-    const name = ref2.slice("window#/".length);
-    return globalEntries().find((e) => e.name === name);
-  }
-  if (ref2.startsWith("#/state/")) {
-    const key = ref2.slice("#/state/".length);
-    return namedFormulaEntries(state).find((e) => e.name === key);
-  }
-  return;
-}
-
-// src/ui/formula-palette.ts
-var _open = false;
-var _opts = null;
-var _query = "";
-var _selectedIndex = 0;
-function getContainer() {
-  return getLayerSlot("popover", "formula-palette");
-}
-function openFormulaPalette(opts) {
-  _open = true;
-  _opts = opts;
-  _query = "";
-  _selectedIndex = 0;
-  renderOverlay();
-}
-function closeFormulaPalette() {
-  _open = false;
-  _opts = null;
-  renderOverlay();
-}
-function filteredEntries() {
-  const entries = _opts?.entries ?? [];
-  const needle = _query.trim().toLowerCase();
-  if (!needle) {
-    return entries;
-  }
-  return entries.filter((e) => e.label.toLowerCase().includes(needle) || e.name.toLowerCase().includes(needle) || e.group.toLowerCase().includes(needle) || e.description.toLowerCase().includes(needle));
-}
-function groupedEntries(entries) {
-  const groups = new Map;
-  for (const entry of entries) {
-    const bucket = groups.get(entry.group);
-    if (bucket) {
-      bucket.push(entry);
-    } else {
-      groups.set(entry.group, [entry]);
-    }
-  }
-  return [...groups.entries()];
-}
-function pickEntry(entry) {
-  const opts = _opts;
-  closeFormulaPalette();
-  opts?.onPick(entry);
-}
-function onInput(e) {
-  _query = e.target.value;
-  _selectedIndex = 0;
-  renderOverlay();
-}
-function onKeydown(e) {
-  const entries = filteredEntries();
-  switch (e.key) {
-    case "ArrowDown": {
-      e.preventDefault();
-      _selectedIndex = Math.min(_selectedIndex + 1, entries.length - 1);
-      renderOverlay();
-      break;
-    }
-    case "ArrowUp": {
-      e.preventDefault();
-      _selectedIndex = Math.max(_selectedIndex - 1, 0);
-      renderOverlay();
-      break;
-    }
-    case "Enter": {
-      e.preventDefault();
-      if (entries[_selectedIndex]) {
-        pickEntry(entries[_selectedIndex]);
-      }
-      break;
-    }
-    case "Escape": {
-      e.preventDefault();
-      closeFormulaPalette();
-      break;
-    }
-    default: {
-      break;
-    }
-  }
-}
-function panelStyle() {
-  const anchor = _opts?.anchor;
-  if (!anchor) {
-    return "";
-  }
-  const rect = rectOf(anchor);
-  if (!rect || rect.top === 0 && rect.left === 0 && rect.width === 0) {
-    return "";
-  }
-  const left = Math.max(8, Math.min(rect.left, (globalThis.innerWidth || 1200) - 568));
-  return `position:fixed;left:${left}px;top:${rect.bottom + 4}px;margin:0`;
-}
-function renderOverlay() {
-  const container = getContainer();
-  if (!_open) {
-    render(nothing, container);
-    return;
-  }
-  const entries = filteredEntries();
-  const groups = groupedEntries(entries);
-  const hasQuery = _query.trim().length > 0;
-  const tpl = html`
-    <div class="quick-search-overlay formula-palette-overlay" @click=${closeFormulaPalette}>
-      <div
-        class="quick-search-panel formula-palette"
-        style=${panelStyle()}
-        @click=${(e) => e.stopPropagation()}
-      >
-        <input
-          class="quick-search-input formula-palette-input"
-          type="text"
-          placeholder="Search formulas, operators, globals…"
-          .value=${live(_query)}
-          @input=${onInput}
-          @keydown=${onKeydown}
-          ${ref((el) => {
-    if (el) {
-      requestAnimationFrame(() => el.focus());
-    }
-  })}
-        />
-        <div class="quick-search-results">
-          ${entries.length === 0 ? html`<div class="quick-search-empty">
-                  ${hasQuery ? "No results" : "No entries available"}
-                </div>` : nothing}
-          ${groups.map(([group, groupEntries]) => html`
-              <div class="quick-search-section-label">${group}</div>
-              ${groupEntries.map((entry) => {
-    const index = entries.indexOf(entry);
-    return html`
-                  <div
-                    class=${classMap({
-      "quick-search-item": true,
-      selected: index === _selectedIndex
-    })}
-                    @click=${() => pickEntry(entry)}
-                    @mouseenter=${() => {
-      _selectedIndex = index;
-      renderOverlay();
-    }}
-                  >
-                    <span
-                      class="quick-search-name"
-                      style="font-family:var(--spectrum-code-font-family, monospace)"
-                      >${entry.label}</span
-                    >
-                    <span class="quick-search-path" title=${entry.description}
-                      >${entry.description}</span
-                    >
-                    <span class="quick-search-badge">${entry.kind}</span>
-                  </div>
-                `;
-  })}
-            `)}
-        </div>
-      </div>
-    </div>
-  `;
-  render(tpl, container);
-}
+  isRef2,
+  isFunctionDef,
+  isTemplateString
+} from "./studio-7r42c6ca.js";
+import {
+  reactive
+} from "./studio-p1dw8wfw.js";
+import {
+  registerSurface,
+  mountSurface
+} from "./studio-erdatzvp.js";
+import {
+  openMenu2
+} from "./studio-3gxv60tn.js";
+import {
+  cloneValue2
+} from "./studio-727xh0e3.js";
 
 // ../schema/defs/tag-expression.schema.ts
 var tagExpressionSchema = {
@@ -1530,10 +159,28 @@ var refObjectSchema = {
 // ../schema/defs/style-object.schema.ts
 var styleObjectSchema = {
   additionalProperties: {
-    oneOf: [{ type: "string" }, { type: "number" }, { $ref: "#/$defs/StyleObject" }]
+    anyOf: [
+      { type: "string" },
+      { type: "number" },
+      { $ref: "#/$defs/RefObject" },
+      { $ref: "#/$defs/StyleObject" }
+    ]
+  },
+  description: "CSS style definition. camelCase property names follow CSSOM convention. " + "Keys starting with :, ., &, or [ are treated as nested CSS selectors. " + "Keys matching $media breakpoint names (or other @-prefixed at-rules) group nested rules. " + "Nesting is recursive: selector and at-rule groups may nest to arbitrary depth " + "(e.g. breakpoint → selector → pseudo-class), mirroring the compiler's recursive emission. " + "An object carrying $ref is a reactive VALUE, and the runtime reads it as one. It also " + "matches the nested-block branch vacuously, since a block admits a string under any key, " + "which is why these branches are anyOf rather than oneOf. " + "A DECLARATION at-rule (@font-face, @property, @position-try, @counter-style) may hold an " + "ARRAY of blocks, which is that key written more than once, in order: an object's keys are " + "unique, so @font-face — the at-rule whose identity is not in its key — could not otherwise " + "state a family's second weight at all.",
+  patternProperties: {
+    "^@(font-face|property|position-try|counter-style)": {
+      anyOf: [
+        { $ref: "#/$defs/StyleObject" },
+        { items: { $ref: "#/$defs/StyleObject" }, minItems: 1, type: "array" }
+      ]
+    }
+  },
+  properties: {
+    $description: {
+      description: "Why this rule exists. Emitted as a comment by static builds, ignored at runtime.",
+      type: "string"
+    }
   },
-  description: "CSS style definition. camelCase property names follow CSSOM convention. " + "Keys starting with :, ., &, or [ are treated as nested CSS selectors. " + "Keys matching $media breakpoint names (or other @-prefixed at-rules) group nested rules. " + "Nesting is recursive: selector and at-rule groups may nest to arbitrary depth " + "(e.g. breakpoint → selector → pseudo-class), mirroring the compiler's recursive emission.",
-  properties: {},
   type: "object"
 };
 // ../schema/defs/children-value.schema.ts
@@ -1546,6 +193,15 @@ var arrayNamespaceSchema = {
     items: {
       oneOf: [{ $ref: "#/$defs/RefObject" }, { type: "array" }]
     },
+    key: {
+      additionalProperties: false,
+      description: "The identity of each rendered row: a $map/item pointer read per item. A row whose key " + "survives a change keeps its DOM node and its effects across reorders, insertions and " + "removals; without a key, rows are keyed by index. $map/index is not a key — an index " + "names a position, not a row.",
+      properties: {
+        $ref: { pattern: "^\\$map/item(/.+)?$", type: "string" }
+      },
+      required: ["$ref"],
+      type: "object"
+    },
     map: { $ref: "#/$defs/ElementDef" },
     sort: { $ref: "#/$defs/RefObject" }
   },
@@ -1613,8 +269,10 @@ var elementPropertyValueSchema = {
 };
 var switchDefSchema = {
   additionalProperties: false,
-  description: "Reactive $ref that drives which case to render.",
-  properties: { $ref: { $ref: "#/$defs/StateRef" } },
+  description: "Reactive $ref that drives which case to render: a state entry, or inside a mapped array's template the row's $map/item or $map/index (spec §14.1).",
+  properties: {
+    $ref: { oneOf: [{ $ref: "#/$defs/StateRef" }, { $ref: "#/$defs/MapRef" }], type: "string" }
+  },
   required: ["$ref"],
   type: "object"
 };
@@ -2862,7 +1520,7 @@ var VALUE_SOURCE_HINTS = {
   template: "Text with ${…} placeholders that fill in from signals."
 };
 function slotMode(value) {
-  if (isRef(value)) {
+  if (isRef2(value)) {
     return "ref";
   }
   if (isFunctionDef(value)) {
@@ -2977,6 +1635,7 @@ function deriveSlotCaps(schema) {
 var ELEMENT_TAG_SCHEMA = {
   anyOf: [tagNameSchema, ...elementTagNameSchema.anyOf.slice(1)]
 };
+var TAG_EXPRESSION_OPERATORS = tagExpressionSchema.anyOf.map((branch) => branch.properties.operator.const);
 var SLOT_POSITION_SCHEMAS = {
   attribute: attributesObjectSchema.additionalProperties,
   componentProp: propsObjectSchema.additionalProperties,
@@ -3008,666 +1667,23 @@ function configFieldSchema(field) {
   return { anyOf: [declared, { $ref: "#/$defs/RefObject" }] };
 }
 
-// src/services/context-resolver.ts
-var PARAM_SEGMENT = /^\{@(\w+)\}$/;
-function resolveContextPointer(pointer, opts) {
-  if (!pointer.startsWith("#/$context/")) {
-    return;
-  }
-  const segments = [];
-  for (const raw of pointer.slice("#/$context/".length).split("/")) {
-    const match = raw.match(PARAM_SEGMENT);
-    if (match) {
-      const value = opts.scope?.[match[1]];
-      if (typeof value !== "string" && typeof value !== "number") {
-        return;
-      }
-      const substituted = String(value);
-      if (!substituted) {
-        return;
-      }
-      segments.push(substituted);
-    } else {
-      segments.push(raw);
-    }
-  }
-  if (segments[0] === "$formats") {
-    if (segments.length !== 1) {
-      return;
-    }
-    return (opts.formats ?? []).map((format) => format.name);
-  }
-  let node = opts.projectConfig;
-  for (const segment of segments) {
-    if (node === null || typeof node !== "object") {
-      return;
-    }
-    node = node[segment];
-  }
-  return node;
-}
-
-// src/ui/expression-editor.ts
-var UNARY_OPS = new Set(["!", "-"]);
-var BINARY_OPS = new Set([
-  "+",
-  "-",
-  "*",
-  "/",
-  "%",
-  "===",
-  "!==",
-  "<",
-  "<=",
-  ">",
-  ">=",
-  "&&",
-  "||",
-  "??"
-]);
-var ASSIGN_OPS = new Set(["=", "+=", "-=", "*=", "/="]);
-function isActionExpression(node) {
-  const op = node?.operator;
-  return typeof op === "string" && ASSIGN_OPS.has(op);
-}
-var NO_ARG_OPS = new Set(["pop", "shift"]);
-var ONE_ARG_OPS = new Set(["push", "unshift"]);
-var ZERO_ARG_METHOD_OPS = new Set([
-  "flat",
-  "normalize",
-  "toLocaleLowerCase",
-  "toLocaleString",
-  "toLocaleUpperCase",
-  "toLowerCase",
-  "toReversed",
-  "toSorted",
-  "toUpperCase",
-  "trim",
-  "trimEnd",
-  "trimStart"
-]);
-var OPERATOR_GROUPS = [
-  { label: "Assignment", ops: ["=", "+=", "-=", "*=", "/="] },
-  { label: "Unary", ops: ["!", "-"] },
-  { label: "Arithmetic", ops: ["+", "-", "*", "/", "%"] },
-  { label: "Comparison", ops: ["===", "!==", "<", "<=", ">", ">="] },
-  { label: "Logical", ops: ["&&", "||", "??"] },
-  { label: "Conditional", ops: ["?:", "switch"] },
-  {
-    label: "Array methods",
-    ops: ["push", "pop", "shift", "unshift", "splice"]
-  },
-  {
-    label: "Pure methods (String)",
-    ops: [
-      "toUpperCase",
-      "toLowerCase",
-      "trim",
-      "trimStart",
-      "trimEnd",
-      "split",
-      "startsWith",
-      "endsWith",
-      "padStart",
-      "padEnd",
-      "replaceAll",
-      "repeat",
-      "charAt",
-      "normalize"
-    ]
-  },
-  {
-    label: "Pure methods (Array)",
-    ops: [
-      "includes",
-      "indexOf",
-      "lastIndexOf",
-      "join",
-      "slice",
-      "concat",
-      "at",
-      "flat",
-      "toSorted",
-      "toReversed",
-      "toSpliced",
-      "with"
-    ]
-  },
-  { label: "Pure methods (Number)", ops: ["toFixed", "toPrecision", "toLocaleString"] },
-  { label: "Aggregate", ops: ["reduce", "map", "filter"] },
-  { label: "Function", ops: ["call"] }
-];
-var INFO_DEFAULTS = {
-  callArgs: false,
-  needsInitial: false,
-  needsValue: false,
-  spliceArray: false,
-  switchCases: false,
-  targetMustBeRef: false,
-  valueIsNode: false
-};
-function operatorInfo(op) {
-  if (UNARY_OPS.has(op)) {
-    return { ...INFO_DEFAULTS };
-  }
-  if (op === "?:") {
-    return { ...INFO_DEFAULTS, needsInitial: true, needsValue: true };
-  }
-  if (op === "switch") {
-    return { ...INFO_DEFAULTS, switchCases: true };
-  }
-  if (op === "call") {
-    return { ...INFO_DEFAULTS, callArgs: true, targetMustBeRef: true };
-  }
-  if (PURE_METHOD_OPS.has(op)) {
-    return { ...INFO_DEFAULTS, needsValue: !ZERO_ARG_METHOD_OPS.has(op) };
-  }
-  if (BINARY_OPS.has(op)) {
-    return { ...INFO_DEFAULTS, needsValue: true };
-  }
-  if (ASSIGN_OPS.has(op)) {
-    return { ...INFO_DEFAULTS, needsValue: true, targetMustBeRef: true };
-  }
-  if (NO_ARG_OPS.has(op)) {
-    return { ...INFO_DEFAULTS, targetMustBeRef: true };
-  }
-  if (ONE_ARG_OPS.has(op)) {
-    return { ...INFO_DEFAULTS, needsValue: true, targetMustBeRef: true };
-  }
-  if (op === "splice") {
-    return { ...INFO_DEFAULTS, needsValue: true, spliceArray: true, targetMustBeRef: true };
-  }
-  if (op === "reduce") {
-    return {
-      ...INFO_DEFAULTS,
-      needsInitial: true,
-      needsValue: true,
-      targetMustBeRef: true,
-      valueIsNode: true
-    };
-  }
-  if (op === "map" || op === "filter") {
-    return { ...INFO_DEFAULTS, needsValue: true, targetMustBeRef: true, valueIsNode: true };
-  }
-  return { ...INFO_DEFAULTS };
-}
-function operandMode(operand) {
-  if (operand && typeof operand === "object") {
-    if ("$ref" in operand) {
-      return "ref";
-    }
-    if ("operator" in operand) {
-      return "expression";
-    }
-  }
-  return "literal";
-}
-function calleeParamLabels(target, state) {
-  const ref2 = isRef(target) ? target.$ref : "";
-  const entry = ref2 ? calleeEntry(ref2, state) : undefined;
-  return entry?.kind === "formula" ? entry.parameters.map((p) => p.name) : [];
-}
-function defaultForMode(mode) {
-  if (mode === "ref") {
-    return { $ref: "" };
-  }
-  if (mode === "expression") {
-    return { operator: "!", target: null };
-  }
-  return null;
-}
-function literalType(val) {
-  if (val === null || val === undefined) {
-    return "null";
-  }
-  if (typeof val === "boolean") {
-    return "boolean";
-  }
-  if (typeof val === "number") {
-    return "number";
-  }
-  return "string";
-}
-function defaultForLiteralType(type) {
-  if (type === "number") {
-    return 0;
-  }
-  if (type === "boolean") {
-    return false;
-  }
-  if (type === "null") {
-    return null;
-  }
-  return "";
-}
-function expressionHint(node) {
-  if (!isJsonObject(node) || typeof node.operator !== "string") {
-    return "$expression";
-  }
-  const expr = node;
-  const op = expr.operator;
-  const { target } = expr;
-  const targetLabel = isRef(target) ? target.$ref.replace("#/state/", "") : isJsonObject(target) && typeof target.operator === "string" ? `(${target.operator}…)` : String(target ?? "?");
-  if (ASSIGN_OPS.has(op) || ONE_ARG_OPS.has(op)) {
-    return `${op} ${targetLabel}`;
-  }
-  if (NO_ARG_OPS.has(op)) {
-    return `${op}(${targetLabel})`;
-  }
-  if (op === "splice") {
-    return `splice(${targetLabel})`;
-  }
-  if (op === "call") {
-    return `${targetLabel.replace("window#/", "").replaceAll("/", ".")}(…)`;
-  }
-  if (op === "reduce" || op === "map" || op === "filter" || PURE_METHOD_OPS.has(op)) {
-    return `${op}(${targetLabel})`;
-  }
-  if (op === "?:") {
-    return `${targetLabel} ? … : …`;
-  }
-  if (op === "switch") {
-    return `switch(${targetLabel})`;
-  }
-  if (UNARY_OPS.has(op)) {
-    return `${op}${targetLabel}`;
-  }
-  return `${targetLabel} ${op} …`;
-}
-function renderValueBadge(preview, pathKey) {
-  const text = preview?.values.get(pathKey);
-  if (text === undefined) {
-    return nothing;
-  }
-  return html`<span class="expr-live-badge" title=${text}>${text}</span>`;
-}
-function renderRefPicker(refVal, onRefChange, opts) {
-  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);
-  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."
-    });
-  }
-  return html`
-    <sp-picker
-      size="s"
-      class="expr-ref"
-      placeholder="Select…"
-      .value=${live(isCustom ? "__custom__" : refVal || "")}
-      @change=${(e) => {
-    const val = e.target.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>
-  `;
-}
-function renderLiteralEditor(operand, onChange) {
-  const type = literalType(operand);
-  return html`
-    <div class="expr-literal">
-      <sp-picker
-        size="s"
-        class="expr-literal-type"
-        .value=${live(type)}
-        @change=${(e) => {
-    const newType = e.target.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) => onChange(e.target.value)}
-            ></sp-textfield>` : type === "number" ? html`<sp-number-field
-                size="s"
-                class="expr-literal-value"
-                .value=${live(Number(operand ?? 0))}
-                @change=${(e) => onChange(Number(e.target.value))}
-              ></sp-number-field>` : type === "boolean" ? html`<sp-checkbox
-                  size="s"
-                  class="expr-literal-bool"
-                  ?checked=${Boolean(operand)}
-                  @change=${(e) => onChange(e.target.checked)}
-                  >true</sp-checkbox
-                >` : html`<span class="expr-literal-null">null</span>`}
-    </div>
-  `;
-}
-function renderOperandEditor(operand, onChange, opts) {
-  if (opts.mustBeRef) {
-    const refVal = operand?.$ref ?? "";
-    return html`
-      <div class="expr-operand">${renderRefPicker(refVal, (r) => onChange({ $ref: r }), opts)}</div>
-    `;
-  }
-  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) => {
-    const newMode = e.target.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?.$ref ?? "", (r) => onChange({ $ref: r }), opts) : renderExpressionEditor(operand, onChange, {
-    ...opts,
-    depth: opts.depth + 1
-  })}
-    </div>
-  `;
-}
-function renderSpliceArgsEditor(args, onChange, opts, naming = {}) {
-  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>
-  `;
-}
-var _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>
-  `);
-function renderExpressionEditor(node, onChange, opts) {
-  const depth = opts.depth ?? 0;
-  const safeNode = node && typeof node === "object" ? node : { operator: "=", target: null };
-  const op = safeNode.operator || "=";
-  const info = operatorInfo(op);
-  const preview = opts.preview ?? null;
-  const path = opts.path ?? [];
-  const pathKey = path.join("/");
-  const sub = (...segs) => [...path, ...segs].join("/");
-  const withBadge = (widget, key) => html`<div class="expr-widget">${widget}${renderValueBadge(preview, key)}</div>`;
-  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) => {
-      const newOp = e.target.value;
-      const newInfo = operatorInfo(newOp);
-      const updated = {
-        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;
-          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) => openFormulaPalette({
-      anchor: e.currentTarget,
-      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"]
-    }), 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?.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, (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, (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}
-    </div>
-  `;
-}
-function renderSwitchCasesEditor(safeNode, onChange, opts, withBadge) {
-  const cases = isJsonObject(safeNode.cases) ? safeNode.cases : {};
-  const entries = Object.entries(cases);
-  const setCases = (next) => onChange({ ...safeNode, cases: next });
-  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) => {
-    const newKey = e.target.value;
-    if (newKey === key) {
-      return;
-    }
-    const next = {};
-    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>
-  `;
-}
-
 // src/ui/dynamic-slot.ts
 var slotModeMemory = new Map;
 var slotModeRendered = new Map;
 function memoryKey(fieldKey, mode) {
-  return `${activeTab.value?.id ?? "-"}|${fieldKey}|${mode}`;
+  return `${activeTab2.value?.id ?? "-"}|${fieldKey}|${mode}`;
 }
 function fieldScopeKey(fieldKey) {
-  return `${activeTab.value?.id ?? "-"}|${fieldKey}`;
+  return `${activeTab2.value?.id ?? "-"}|${fieldKey}`;
 }
 function stashSlotValue(fieldKey, mode, value) {
-  slotModeMemory.set(memoryKey(fieldKey, mode), cloneValue(value));
+  slotModeMemory.set(memoryKey(fieldKey, mode), cloneValue2(value));
 }
 function hasStashedSlotValue(fieldKey, mode) {
   return slotModeMemory.has(memoryKey(fieldKey, mode));
 }
 function recallSlotValue(fieldKey, mode) {
-  return cloneValue(slotModeMemory.get(memoryKey(fieldKey, mode)));
+  return cloneValue2(slotModeMemory.get(memoryKey(fieldKey, mode)));
 }
 function setSlotMode(fieldKey, mode) {
   slotModeRendered.set(fieldScopeKey(fieldKey), mode);
@@ -3683,17 +1699,14 @@ function effectiveSlotMode(fieldKey, value) {
   slotModeRendered.set(key, mode);
   return mode;
 }
-function hasRefOptions(opts) {
-  return opts.stateDefs.length > 0 || Boolean(opts.extraSignals?.length);
-}
-function defaultForSlotMode(mode, opts) {
+function slotModeSeed(mode, sources) {
   switch (mode) {
     case "ref": {
-      const [first] = opts.stateDefs;
-      return first ? { $ref: `#/state/${first}` } : { $ref: opts.extraSignals?.[0]?.value ?? "" };
+      const [first] = sources.stateDefs;
+      return first ? { $ref: `#/state/${first}` } : { $ref: sources.extraSignals?.[0]?.value ?? "" };
     }
     case "template": {
-      const [first] = opts.stateDefs;
+      const [first] = sources.stateDefs;
       return first ? `\${state.${first}}` : "${}";
     }
     case "expression": {
@@ -3703,153 +1716,1092 @@ function defaultForSlotMode(mode, opts) {
       return { $prototype: "Function", body: "", parameters: [] };
     }
     default: {
-      return opts.literalDefault;
+      return sources.literalDefault;
     }
   }
 }
-function refOptions(opts) {
-  return [
-    ...opts.stateDefs.map((name) => ({ label: name, value: `#/state/${name}` })),
-    ...opts.extraSignals ?? []
-  ];
+function switchSlotMode(fieldKey, from, to, current, seed) {
+  stashSlotValue(fieldKey, from, current);
+  setSlotMode(fieldKey, to);
+  return hasStashedSlotValue(fieldKey, to) ? recallSlotValue(fieldKey, to) : seed;
 }
-function renderCustomRefWidget(refVal, opts) {
-  return html`
-    <jx-value-selector
-      size="s"
-      style="flex:1"
-      placeholder="#/state/…"
-      .value=${refVal}
-      .options=${refOptions(opts)}
-      @change=${(e) => {
-    const v = (e.detail?.value ?? e.target.value ?? "").trim();
-    if (v) {
-      opts.onChange({ $ref: v });
-    } else {
-      opts.onChange();
+// src/surfaces/schema-form.json
+var schema_form_default = {
+  $schema: "https://jxsuite.com/schema/v1",
+  $id: "StudioSchemaForm",
+  $description: "The shared schema→form engine as a document: one row per property of a JSON Schema, drawn from a projection `ui/schema-form.ts` computes. Nothing here reads a schema. The flow decides which of nine controls a property gets, what its options are, which rungs of the value ladder the position permits, what a commit is worth and whether the value is refused; this document draws the answer. That split is what lets the Entry editor, Project Settings and the Signals panel all embed the same form and get the same row — and it is why the engine hands back a HOST ELEMENT rather than a template: a document clears the host it is given, so a caller that is still lit renders an empty element for it and puts it in its own tree (studio-ui-guidelines.md §9.3, §9.4).",
+  tagName: "div",
+  attributes: {
+    part: "form"
+  },
+  style: {
+    $description: "What `.style-row`, `.style-row-label`, `.style-row--invalid`, `.style-row-error`, `.style-row-error-count`, `.array-object-field`, `.array-object-row` and `.schema-param-editor` said in `styles/inspector.css`, keyed on `part` and re-pointed at the studio token layer. Those rules are DEAD in the stylesheet now rather than shared: `ui/field-row.ts` drew the same row for the inspector panels and `ui/expression-editor.ts` the same array rows, and both converted, so this document's copy is the only emitter left. Every `--spectrum-font-size-*` reference is gone rather than renamed — those names resolve only inside `<sp-theme>`, and a document mounted in a settings pane or an entry editor is outside it, so each would silently have taken its hard-coded fallback.",
+    display: "contents",
+    '& [part="field"]': {
+      padding: "var(--jx-space-1) 0"
+    },
+    '& [part="value"]': {
+      $description: "The control line: the source chip, then whatever the rung draws. `min-width: 0` is load-bearing — without it a monospaced pointer or a long JSON line pushes the row past the pane's right edge instead of scrolling inside its own control.",
+      display: "flex",
+      alignItems: "flex-start",
+      gap: "var(--jx-space-2)",
+      minWidth: "0"
+    },
+    '& [part="value"] > *': {
+      minWidth: "0"
+    },
+    '& [part="widget"] > *': {
+      $description: "The switch wrapper is `display: contents`, so whatever rung it drew is the flex item of the line above rather than a box inside a box — which is what keeps `min-width: 0` reaching the control that actually needs it.",
+      flex: "1",
+      minWidth: "0"
+    },
+    '& [part="source"]': {
+      $description: "Quiet while the value is fixed, accent-tinted the moment it is produced from something else — the one place in the row that says a value is not what it looks like.",
+      flex: "none",
+      color: "var(--fg-dim)",
+      fontSize: "var(--jx-text-sm)"
+    },
+    '& [part="source"][data-source="bound"]': {
+      color: "var(--accent)"
+    },
+    '& [part="pointer-group"]': {
+      display: "flex",
+      flex: "1",
+      gap: "var(--jx-space-2)",
+      minWidth: "0"
+    },
+    '& [part="pointer-group"] > *': {
+      flex: "1",
+      minWidth: "0"
+    },
+    '& [part="json"]': {
+      display: "flex",
+      flexDirection: "column",
+      flex: "1",
+      gap: "var(--jx-space-1)",
+      minWidth: "0"
+    },
+    '& [part="chips"]': {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "var(--jx-space-1)"
+    },
+    '& [part="chip"]': {
+      padding: "1px var(--jx-space-2)",
+      borderRadius: "var(--radius)",
+      background: "var(--bg)",
+      fontSize: "var(--jx-text-sm)",
+      color: "var(--fg-dim)"
+    },
+    '& [part="rows"]': {
+      display: "flex",
+      flexDirection: "column",
+      flex: "1",
+      gap: "var(--jx-space-1)",
+      minWidth: "0"
+    },
+    '& [part="row"]': {
+      $description: "Wraps rather than scrolls: an item with five declared properties in a 260px inspector is a column of controls, not a horizontal scroller nobody finds the end of.",
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "center",
+      gap: "var(--jx-space-1)",
+      minWidth: "0"
+    },
+    '& [part="row-add"]': {
+      alignSelf: "flex-start"
+    },
+    '& [part="field-error"]': {
+      $description: "The left rule is what makes the line read as belonging to the control above it rather than to the row below.",
+      margin: "var(--jx-space-1) 0 0",
+      paddingLeft: "var(--jx-space-2)",
+      borderLeft: "2px solid var(--danger)",
+      fontSize: "var(--jx-text-sm)",
+      lineHeight: "1.35",
+      color: "var(--danger)"
+    },
+    '& [part="field-error-count"]': {
+      marginLeft: "var(--jx-space-1)",
+      fontFamily: "var(--font-mono)",
+      opacity: "0.75"
     }
-  }}
-    ></jx-value-selector>
-  `;
-}
-function renderRefWidget(refVal, opts) {
-  if (opts.allowCustomRef) {
-    return renderCustomRefWidget(refVal, opts);
-  }
-  return html`
-    <sp-picker
-      size="s"
-      quiet
-      style="flex:1"
-      placeholder="— select signal —"
-      value=${refVal || nothing}
-      @change=${(e) => {
-    const v = e.target.value;
-    if (v) {
-      opts.onChange({ $ref: v });
-    } else {
-      opts.onChange();
+  },
+  children: [
+    {
+      $prototype: "Array",
+      items: {
+        $ref: "#/state/fields"
+      },
+      key: {
+        $ref: "$map/item/key"
+      },
+      map: {
+        $description: "One property of the schema. `jx-field` owns the label, the required mark, the invalid shade and the association between the label and whatever control ends up in the slot, so none of that is written here — which is the whole of what the four hand-rolled `.style-row` variants used to carry.",
+        tagName: "jx-field",
+        attributes: {
+          part: "field",
+          "data-prop": "${$map.item.prop}"
+        },
+        $props: {
+          label: {
+            $ref: "$map/item/label"
+          },
+          description: {
+            $ref: "$map/item/description"
+          },
+          required: {
+            $ref: "$map/item/required"
+          },
+          invalid: {
+            $ref: "$map/item/invalid"
+          },
+          span: true
+        },
+        children: [
+          {
+            tagName: "div",
+            attributes: {
+              part: "value",
+              role: "none"
+            },
+            children: [
+              {
+                tagName: "span",
+                attributes: {
+                  part: "source-slot",
+                  role: "none"
+                },
+                style: {
+                  display: "contents"
+                },
+                $switch: {
+                  $ref: "$map/item/hasChip"
+                },
+                cases: {
+                  true: {
+                    $description: "The Value Source chip (§6.3): what produces this value, in the same four words every other bindable position in Studio uses. It opens the rung picker rather than cycling, so any rung the position permits is one action away. Drawn only where the host named somewhere a value could come from — a settings form that names none edits fixed values and shows no chip.",
+                    tagName: "jx-action-button",
+                    attributes: {
+                      part: "source",
+                      "data-source": "${$map.item.source}"
+                    },
+                    $props: {
+                      label: {
+                        $ref: "$map/item/sourceName"
+                      },
+                      hint: {
+                        $ref: "$map/item/sourceHint"
+                      },
+                      size: "sm",
+                      haspopup: "menu",
+                      disabled: {
+                        $ref: "$map/item/sourceLocked"
+                      }
+                    },
+                    onclick: {
+                      $prototype: "Function",
+                      body: [
+                        {
+                          operator: "call",
+                          target: {
+                            $ref: "#/state/pickSource"
+                          },
+                          value: [
+                            {
+                              $ref: "$map/item/key"
+                            },
+                            {
+                              $ref: "event#/currentTarget"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    children: [
+                      {
+                        tagName: "span",
+                        textContent: "${$map.item.sourceLabel}"
+                      }
+                    ]
+                  }
+                }
+              },
+              {
+                tagName: "span",
+                attributes: {
+                  part: "widget",
+                  role: "none"
+                },
+                style: {
+                  display: "contents"
+                },
+                $switch: {
+                  $ref: "$map/item/kind"
+                },
+                cases: {
+                  text: {
+                    $description: "The default control, and the one every scalar without a narrower answer lands on. Commits on input, debounced by the flow, which is what makes the canvas and the preview follow a value being typed rather than waiting for a blur.",
+                    tagName: "jx-textfield",
+                    attributes: {
+                      part: "text"
+                    },
+                    $props: {
+                      label: {
+                        $ref: "$map/item/label"
+                      },
+                      value: {
+                        $ref: "$map/item/value"
+                      },
+                      placeholder: {
+                        $ref: "$map/item/placeholder"
+                      },
+                      size: "sm",
+                      invalid: {
+                        $ref: "$map/item/invalid"
+                      },
+                      mono: {
+                        $ref: "$map/item/mono"
+                      },
+                      multiline: {
+                        $ref: "$map/item/multiline"
+                      }
+                    },
+                    oninput: {
+                      $prototype: "Function",
+                      body: [
+                        {
+                          operator: "call",
+                          target: {
+                            $ref: "#/state/edit"
+                          },
+                          value: [
+                            {
+                              $ref: "$map/item/key"
+                            },
+                            {
+                              $ref: "event#/target/value"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    onchange: {
+                      $prototype: "Function",
+                      body: [
+                        {
+                          operator: "call",
+                          target: {
+                            $ref: "#/state/commit"
+                          },
+                          value: [
+                            {
+                              $ref: "$map/item/key"
+                            },
+                            {
+                              $ref: "event#/target/value"
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  template: {
+                    $description: "The Mixed text rung: a string with `${…}` holes in it. Monospaced because what is being written is half text and half pointer, and committed on change rather than on input — a half-typed placeholder is not a template anybody meant.",
+                    tagName: "jx-textfield",
+                    attributes: {
+                      part: "template"
+                    },
+                    $props: {
+                      label: {
+                        $ref: "$map/item/label"
+                      },
+                      value: {
+                        $ref: "$map/item/value"
+                      },
+                      placeholder: "${state.templatePlaceholder}",
+                      size: "sm",
+                      mono: true
+                    },
+                    onchange: {
+                      $prototype: "Function",
+                      body: [
+                        {
+                          operator: "call",
+                          target: {
+                            $ref: "#/state/commit"
+                          },
+                          value: [
+                            {
+                              $ref: "$map/item/key"
+                            },
+                            {
+                              $ref: "event#/target/value"
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  pointer: {
+                    $description: "The From data… rung. It is TWO controls over one value because the kit has no combobox and this rung needs one: the list is a set of suggestions rather than a whitelist (a value may point at a route param, a signal, or a pointer neither the form nor its host enumerates), so the select offers what the host named and the field accepts anything. Picking a row writes the field; typing a pointer the host never named leaves the select showing it, because a select whose value matches no option synthesises the row rather than lying about what it holds.",
+                    tagName: "span",
+                    attributes: {
+                      part: "pointer-group",
+                      role: "none"
+                    },
+                    children: [
+                      {
+                        tagName: "jx-textfield",
+                        attributes: {
+                          part: "pointer"
+                        },
+                        $props: {
+                          label: "${$map.item.label} pointer",
+                          value: {
+                            $ref: "$map/item/value"
+                          },
+                          placeholder: "#/state/…",
+                          size: "sm",
+                          mono: true
+                        },
+                        onchange: {
+                          $prototype: "Function",
+                          body: [
+                            {
+                              operator: "call",
+                              target: {
+                                $ref: "#/state/commit"
+                              },
+                              value: [
+                                {
+                                  $ref: "$map/item/key"
+                                },
+                                {
+                                  $ref: "event#/target/value"
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      },
+                      {
+                        tagName: "span",
+                        attributes: {
+                          part: "pointer-pick-slot",
+                          role: "none"
+                        },
+                        style: {
+                          display: "contents"
+                        },
+                        $switch: {
+                          $ref: "$map/item/hasOptions"
+                        },
+                        cases: {
+                          true: {
+                            tagName: "jx-select",
+                            attributes: {
+                              part: "pointer-pick"
+                            },
+                            $props: {
+                              label: "${$map.item.label} source",
+                              options: {
+                                $ref: "$map/item/options"
+                              },
+                              value: {
+                                $ref: "$map/item/value"
+                              },
+                              size: "sm"
+                            },
+                            onchange: {
+                              $prototype: "Function",
+                              body: [
+                                {
+                                  operator: "call",
+                                  target: {
+                                    $ref: "#/state/commit"
+                                  },
+                                  value: [
+                                    {
+                                      $ref: "$map/item/key"
+                                    },
+                                    {
+                                      $ref: "event#/target/value"
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          }
+                        }
+                      }
+                    ]
+                  },
+                  select: {
+                    $description: "A closed set the schema itself declares, or one the host resolved through a `#/$context/…` pointer. The empty row is offered only where the property is optional — a required field has no “none” to choose.",
+                    tagName: "jx-select",
+                    attributes: {
+                      part: "select"
+                    },
+                    $props: {
+                      label: {
+                        $ref: "$map/item/label"
+                      },
+                      options: {
+                        $ref: "$map/item/options"
+                      },
+                      value: {
+                        $ref: "$map/item/value"
+                      },
+                      size: "sm",
+                      invalid: {
+                        $ref: "$map/item/invalid"
+                      }
+                    },
+                    onchange: {
+                      $prototype: "Function",
+                      body: [
+                        {
+                          operator: "call",
+                          target: {
+                            $ref: "#/state/commit"
+                          },
+                          value: [
+                            {
+                              $ref: "$map/item/key"
+                            },
+                            {
+                              $ref: "event#/target/value"
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  checkbox: {
+                    tagName: "jx-checkbox",
+                    attributes: {
+                      part: "checkbox"
+                    },
+                    $props: {
+                      label: {
+                        $ref: "$map/item/label"
+                      },
+                      checked: {
+                        $ref: "$map/item/checked"
+                      },
+                      size: "sm"
+                    },
+                    onchange: {
+                      $prototype: "Function",
+                      body: [
+                        {
+                          operator: "call",
+                          target: {
+                            $ref: "#/state/commitChecked"
+                          },
+                          value: [
+                            {
+                              $ref: "$map/item/key"
+                            },
+                            {
+                              $ref: "event#/target/checked"
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  number: {
+                    $description: "`min`, `max` and `step` come straight off the property schema, so the control refuses out-of-range input before the flow has to say why. The stepper is off: these are configuration values that get typed, not nudged.",
+                    tagName: "jx-number-field",
+                    attributes: {
+                      part: "number"
+                    },
+                    $props: {
+                      label: {
+                        $ref: "$map/item/label"
+                      },
+                      value: {
+                        $ref: "$map/item/value"
+                      },
+                      placeholder: {
+                        $ref: "$map/item/placeholder"
+                      },
+                      min: {
+                        $ref: "$map/item/min"
+                      },
+                      max: {
+                        $ref: "$map/item/max"
+                      },
+                      step: {
+                        $ref: "$map/item/step"
+                      },
+                      size: "sm"
+                    },
+                    onchange: {
+                      $prototype: "Function",
+                      body: [
+                        {
+                          operator: "call",
+                          target: {
+                            $ref: "#/state/commit"
+                          },
+                          value: [
+                            {
+                              $ref: "$map/item/key"
+                            },
+                            {
+                              $ref: "event#/target/value"
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  json: {
+                    $description: "A value with structure, edited as the JSON it is. The chips above it are a read of the shape currently held — property name and declared type — so the common case (“what is in here?”) is answered without reading the text. The flow parses on a debounce and keeps the last parsable value; a mid-keystroke `{` is not a refusal.",
+                    tagName: "span",
+                    attributes: {
+                      part: "json",
+                      role: "none"
+                    },
+                    children: [
+                      {
+                        tagName: "span",
+                        attributes: {
+                          part: "chips-slot",
+                          role: "none"
+                        },
+                        style: {
+                          display: "contents"
+                        },
+                        $switch: {
+                          $ref: "$map/item/hasChips"
+                        },
+                        cases: {
+                          true: {
+                            tagName: "span",
+                            attributes: {
+                              part: "chips",
+                              role: "none"
+                            },
+                            children: [
+                              {
+                                $prototype: "Array",
+                                items: {
+                                  $ref: "$map/item/chips"
+                                },
+                                key: {
+                                  $ref: "$map/item/key"
+                                },
+                                map: {
+                                  tagName: "span",
+                                  attributes: {
+                                    part: "chip"
+                                  },
+                                  textContent: "${$map.item.label}"
+                                }
+                              }
+                            ]
+                          }
+                        }
+                      },
+                      {
+                        tagName: "jx-textfield",
+                        attributes: {
+                          part: "json-text"
+                        },
+                        $props: {
+                          label: {
+                            $ref: "$map/item/label"
+                          },
+                          value: {
+                            $ref: "$map/item/value"
+                          },
+                          placeholder: {
+                            $ref: "$map/item/placeholder"
+                          },
+                          size: "sm",
+                          mono: true,
+                          multiline: true,
+                          grows: true
+                        },
+                        oninput: {
+                          $prototype: "Function",
+                          body: [
+                            {
+                              operator: "call",
+                              target: {
+                                $ref: "#/state/editJson"
+                              },
+                              value: [
+                                {
+                                  $ref: "$map/item/key"
+                                },
+                                {
+                                  $ref: "event#/target/value"
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      }
+                    ]
+                  },
+                  rows: {
+                    $description: "An array whose items are objects with a declared shape: one row per item, one cell per declared property, a remove beside each and one add below. The alternative was the raw-JSON editor, which is what an array of anything else still gets — a shape the schema states is a shape the form can draw.",
+                    tagName: "span",
+                    attributes: {
+                      part: "rows",
+                      role: "none"
+                    },
+                    children: [
+                      {
+                        $prototype: "Array",
+                        items: {
+                          $ref: "$map/item/rows"
+                        },
+                        key: {
+                          $ref: "$map/item/key"
+                        },
+                        map: {
+                          tagName: "span",
+                          attributes: {
+                            part: "row",
+                            role: "none",
+                            "data-row": "${$map.item.key}"
+                          },
+                          children: [
+                            {
+                              $prototype: "Array",
+                              items: {
+                                $ref: "$map/item/cells"
+                              },
+                              key: {
+                                $ref: "$map/item/id"
+                              },
+                              map: {
+                                tagName: "span",
+                                attributes: {
+                                  part: "cell",
+                                  role: "none"
+                                },
+                                style: {
+                                  display: "contents"
+                                },
+                                $switch: {
+                                  $ref: "$map/item/kind"
+                                },
+                                cases: {
+                                  text: {
+                                    tagName: "jx-textfield",
+                                    attributes: {
+                                      part: "cell-text"
+                                    },
+                                    $description: "Committed on input AND on change: a cell showing a pointer is committed when it is left, exactly as the pointer field above is, and a cell showing text follows the canvas while it is typed. The two never disagree — a change after an input carries the same string.",
+                                    $props: {
+                                      label: {
+                                        $ref: "$map/item/label"
+                                      },
+                                      value: {
+                                        $ref: "$map/item/value"
+                                      },
+                                      placeholder: {
+                                        $ref: "$map/item/label"
+                                      },
+                                      size: "sm"
+                                    },
+                                    oninput: {
+                                      $prototype: "Function",
+                                      body: [
+                                        {
+                                          operator: "call",
+                                          target: {
+                                            $ref: "#/state/editCell"
+                                          },
+                                          value: [
+                                            {
+                                              $ref: "$map/item/field"
+                                            },
+                                            {
+                                              $ref: "$map/item/row"
+                                            },
+                                            {
+                                              $ref: "$map/item/key"
+                                            },
+                                            {
+                                              $ref: "event#/target/value"
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    },
+                                    onchange: {
+                                      $prototype: "Function",
+                                      body: [
+                                        {
+                                          operator: "call",
+                                          target: {
+                                            $ref: "#/state/editCell"
+                                          },
+                                          value: [
+                                            {
+                                              $ref: "$map/item/field"
+                                            },
+                                            {
+                                              $ref: "$map/item/row"
+                                            },
+                                            {
+                                              $ref: "$map/item/key"
+                                            },
+                                            {
+                                              $ref: "event#/target/value"
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  select: {
+                                    tagName: "jx-select",
+                                    attributes: {
+                                      part: "cell-select"
+                                    },
+                                    $props: {
+                                      label: {
+                                        $ref: "$map/item/label"
+                                      },
+                                      options: {
+                                        $ref: "$map/item/options"
+                                      },
+                                      value: {
+                                        $ref: "$map/item/value"
+                                      },
+                                      size: "sm"
+                                    },
+                                    onchange: {
+                                      $prototype: "Function",
+                                      body: [
+                                        {
+                                          operator: "call",
+                                          target: {
+                                            $ref: "#/state/editCell"
+                                          },
+                                          value: [
+                                            {
+                                              $ref: "$map/item/field"
+                                            },
+                                            {
+                                              $ref: "$map/item/row"
+                                            },
+                                            {
+                                              $ref: "$map/item/key"
+                                            },
+                                            {
+                                              $ref: "event#/target/value"
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  checkbox: {
+                                    tagName: "jx-checkbox",
+                                    attributes: {
+                                      part: "cell-checkbox"
+                                    },
+                                    $props: {
+                                      label: {
+                                        $ref: "$map/item/label"
+                                      },
+                                      checked: {
+                                        $ref: "$map/item/checked"
+                                      },
+                                      size: "sm"
+                                    },
+                                    onchange: {
+                                      $prototype: "Function",
+                                      body: [
+                                        {
+                                          operator: "call",
+                                          target: {
+                                            $ref: "#/state/editCellChecked"
+                                          },
+                                          value: [
+                                            {
+                                              $ref: "$map/item/field"
+                                            },
+                                            {
+                                              $ref: "$map/item/row"
+                                            },
+                                            {
+                                              $ref: "$map/item/key"
+                                            },
+                                            {
+                                              $ref: "event#/target/checked"
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  number: {
+                                    tagName: "jx-number-field",
+                                    attributes: {
+                                      part: "cell-number"
+                                    },
+                                    $props: {
+                                      label: {
+                                        $ref: "$map/item/label"
+                                      },
+                                      value: {
+                                        $ref: "$map/item/value"
+                                      },
+                                      size: "sm"
+                                    },
+                                    onchange: {
+                                      $prototype: "Function",
+                                      body: [
+                                        {
+                                          operator: "call",
+                                          target: {
+                                            $ref: "#/state/editCell"
+                                          },
+                                          value: [
+                                            {
+                                              $ref: "$map/item/field"
+                                            },
+                                            {
+                                              $ref: "$map/item/row"
+                                            },
+                                            {
+                                              $ref: "$map/item/key"
+                                            },
+                                            {
+                                              $ref: "event#/target/value"
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  control: {
+                                    $description: "A cell a registered control owns — a relationship to another collection is the one that reaches here. The document draws the empty host and nothing inside it; `ui/schema-form.ts` mounts the control into it, by the same dispatch a FIELD host gets. An extension's control is its own surface rather than part of this one, and the seam between them is this empty node.",
+                                    tagName: "span",
+                                    attributes: {
+                                      part: "cell-control-host",
+                                      "data-control": "${$map.item.id}",
+                                      role: "none"
+                                    }
+                                  }
+                                }
+                              }
+                            },
+                            {
+                              tagName: "jx-action-button",
+                              attributes: {
+                                part: "row-remove"
+                              },
+                              $props: {
+                                icon: "trash",
+                                label: "${$map.item.removeLabel}",
+                                size: "sm"
+                              },
+                              onclick: {
+                                $prototype: "Function",
+                                body: [
+                                  {
+                                    operator: "call",
+                                    target: {
+                                      $ref: "#/state/removeRow"
+                                    },
+                                    value: [
+                                      {
+                                        $ref: "$map/item/field"
+                                      },
+                                      {
+                                        $ref: "$map/item/key"
+                                      }
+                                    ]
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        }
+                      },
+                      {
+                        tagName: "jx-action-button",
+                        attributes: {
+                          part: "row-add"
+                        },
+                        $props: {
+                          icon: "plus",
+                          label: "${$map.item.addLabel}",
+                          size: "sm"
+                        },
+                        onclick: {
+                          $prototype: "Function",
+                          body: [
+                            {
+                              operator: "call",
+                              target: {
+                                $ref: "#/state/addRow"
+                              },
+                              value: [
+                                {
+                                  $ref: "$map/item/key"
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        children: [
+                          {
+                            tagName: "span",
+                            textContent: "Add"
+                          }
+                        ]
+                      }
+                    ]
+                  },
+                  control: {
+                    $description: "A field a registered control owns outright — `schema-builder`, `secret`, or the `reference` picker. The document draws the empty host and the flow MOUNTS the control into it: the registry's contract (specs/extensions.md §9.1) is a control that owns a host, all three built-ins are documents of their own, and a document clears the host it is given — which is why this node is drawn empty and never written to twice.",
+                    tagName: "div",
+                    attributes: {
+                      part: "control-host",
+                      "data-control": {
+                        $ref: "$map/item/key"
+                      },
+                      role: "none"
+                    }
+                  }
+                }
+              }
+            ]
+          },
+          {
+            tagName: "span",
+            attributes: {
+              part: "error-slot",
+              role: "none"
+            },
+            style: {
+              display: "contents"
+            },
+            $switch: {
+              $ref: "$map/item/hasError"
+            },
+            cases: {
+              true: {
+                $description: '§7.1\'s inline tier: why this value is refused, said AT the control that refuses it and for exactly as long as the value stays bad. `role="alert"` so it is announced when it appears, and a repeat counter from two up — “it refused me again” is otherwise indistinguishable from “the field is still red from last time”.',
+                tagName: "p",
+                attributes: {
+                  part: "field-error",
+                  role: "alert"
+                },
+                children: [
+                  {
+                    tagName: "span",
+                    attributes: {
+                      part: "field-error-text"
+                    },
+                    textContent: "${$map.item.error}"
+                  },
+                  {
+                    tagName: "span",
+                    attributes: {
+                      part: "error-count-slot",
+                      role: "none"
+                    },
+                    style: {
+                      display: "contents"
+                    },
+                    $switch: {
+                      $ref: "$map/item/hasCount"
+                    },
+                    cases: {
+                      true: {
+                        tagName: "span",
+                        attributes: {
+                          part: "field-error-count"
+                        },
+                        textContent: "${$map.item.errorCount}"
+                      }
+                    }
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      }
     }
-  }}
-    >
-      ${opts.stateDefs.map((name) => html`<sp-menu-item value=${`#/state/${name}`}>${name}</sp-menu-item>`)}
-      ${opts.extraSignals?.length ? html`
-              <sp-menu-divider></sp-menu-divider>
-              ${opts.extraSignals.map((sig) => html`<sp-menu-item value=${sig.value}>${sig.label}</sp-menu-item>`)}
-            ` : nothing}
-    </sp-picker>
-  `;
-}
-function renderTemplateWidget(value, opts) {
-  return html`
-    <sp-textfield
-      size="s"
-      style="flex:1;font-family:var(--spectrum-code-font-family, monospace)"
-      placeholder="\${state.…}"
-      .value=${live(String(value ?? ""))}
-      @change=${(e) => opts.onChange(e.target.value)}
-    ></sp-textfield>
-  `;
-}
-function switchSlotMode(fieldKey, from, to, current, seed) {
-  stashSlotValue(fieldKey, from, current);
-  setSlotMode(fieldKey, to);
-  return hasStashedSlotValue(fieldKey, to) ? recallSlotValue(fieldKey, to) : seed;
-}
-function chipId(fieldKey) {
-  return `value-source-${fieldKey.replaceAll(/[^\dA-Za-z]+/g, "-")}`;
-}
-function renderModeChip(mode, caps, opts) {
-  const color = mode === "literal" ? "color:var(--spectrum-gray-600, #808080)" : "color:var(--spectrum-accent-content-color-default, #5c9dff)";
-  const offered = caps.filter((m) => m !== "ref" || hasRefOptions(opts));
-  const label = VALUE_SOURCE_LABELS[mode];
-  if (!offered.some((m) => m !== mode)) {
-    const hint2 = `Value source: ${label} (no other source available here)`;
-    return html`
-      <sp-action-button
-        size="xs"
-        quiet
-        disabled
-        class="dynamic-slot-mode"
-        style=${color}
-        title=${hint2}
-        aria-label=${hint2}
-        >${label}</sp-action-button
-      >
-    `;
+  ]
+};
+
+// src/surfaces/schema-form.ts
+registerSurface("schema-form", schema_form_default);
+function controlIdOf(part, state) {
+  const item = state?.["$map"]?.item;
+  const id = part === "control-host" ? item?.["key"] : part === "cell-control-host" ? item?.["id"] : undefined;
+  return typeof id === "string" ? id : "";
+}
+function partOf(def) {
+  const part = typeof def === "string" ? undefined : def.attributes?.["part"];
+  return typeof part === "string" ? part : "";
+}
+function createSchemaFormSurface(view, actions, onControlHost) {
+  const host = document.createElement("div");
+  host.style.display = "contents";
+  const scope = reactive({
+    ...view,
+    ...actions,
+    templatePlaceholder: "${state.…}"
+  });
+  let handle = null;
+  let mounting = false;
+  let disposed = false;
+  function mount() {
+    mounting = true;
+    mountSurface("schema-form", scope, host, {
+      onNodeCreated: (element, _path, def, state) => {
+        if (!(element instanceof HTMLElement)) {
+          return;
+        }
+        const id = controlIdOf(partOf(def), state);
+        if (id !== "") {
+          onControlHost(id, element);
+        }
+      }
+    }).then((mounted) => {
+      mounting = false;
+      if (disposed) {
+        mounted.dispose();
+        return;
+      }
+      handle = mounted;
+    });
   }
-  const id = chipId(opts.fieldKey);
-  const hint = `Value source: ${label} — click to change`;
-  const choose = (next) => {
-    if (next === mode) {
-      return;
-    }
-    if (mode === "ref" && opts.literalDefault !== undefined && !hasStashedSlotValue(opts.fieldKey, "literal")) {
-      stashSlotValue(opts.fieldKey, "literal", opts.literalDefault);
-    }
-    opts.onChange(switchSlotMode(opts.fieldKey, mode, next, cloneValue(opts.value), opts.seedFor?.(next) ?? defaultForSlotMode(next, opts)));
-  };
-  return html`
-    <sp-action-button
-      id=${id}
-      size="xs"
-      quiet
-      class="dynamic-slot-mode"
-      style=${color}
-      title=${hint}
-      aria-label=${hint}
-      >${label}</sp-action-button
-    >
-    <sp-overlay trigger="${id}@click" placement="bottom-start" type="auto">
-      <sp-popover>
-        <sp-menu size="s" label="Value source">
-          ${offered.map((m) => html`
-              <sp-menu-item data-mode=${m} ?selected=${m === mode} @click=${() => choose(m)}
-                >${VALUE_SOURCE_LABELS[m]}
-                <span slot="description">${VALUE_SOURCE_HINTS[m]}</span></sp-menu-item
-              >
-            `)}
-        </sp-menu>
-      </sp-popover>
-    </sp-overlay>
-  `;
-}
-function renderDynamicSlot(opts) {
-  const caps = slotCaps(opts.caps);
-  const mode = effectiveSlotMode(opts.fieldKey, opts.value);
-  const widget = mode === "ref" ? renderRefWidget(isRef(opts.value) ? opts.value.$ref : "", opts) : mode === "template" ? renderTemplateWidget(opts.value, opts) : mode === "expression" ? renderExpressionEditor(opts.value.$expression, (node) => opts.onChange({ $expression: node }), {
-    allowEventRef: opts.allowEventRef ?? false,
-    preview: opts.preview ?? null,
-    stateDefs: opts.stateDefs,
-    stateEntries: opts.stateEntries ?? null
-  }) : opts.staticWidget;
+  mount();
   return {
-    modeButton: renderModeChip(mode, caps, opts),
-    widget: html`
-      <div class="dynamic-slot" style="display:flex;flex:1;min-width:0">
-        <div style="flex:1;min-width:0">${widget}</div>
-      </div>
-    `
+    dispose() {
+      disposed = true;
+      handle?.dispose();
+      handle = null;
+      host.textContent = "";
+    },
+    host,
+    update(next) {
+      scope.fields = next.fields;
+      if (disposed || mounting || handle !== null && host.contains(handle.root)) {
+        return;
+      }
+      handle?.dispose();
+      handle = null;
+      host.textContent = "";
+      mount();
+    }
   };
 }
 
@@ -3858,9 +2810,6 @@ var controlRegistry = new Map;
 function registerFormControl(name, control) {
   controlRegistry.set(name, control);
 }
-function getFormControl(name) {
-  return controlRegistry.get(name);
-}
 var CONTENT_REF = /^#\/content\/([^/]+)$/;
 function referenceTarget(schema) {
   const match = typeof schema?.$ref === "string" ? CONTENT_REF.exec(schema.$ref) : null;
@@ -3875,9 +2824,9 @@ function resolveFormEnum(enumDef, ctx, scope) {
   }
   let pointer;
   if (enumDef && typeof enumDef === "object") {
-    const ref2 = enumDef.$ref;
-    if (typeof ref2 === "string") {
-      pointer = ref2;
+    const ref = enumDef.$ref;
+    if (typeof ref === "string") {
+      pointer = ref;
     }
   } else if (typeof enumDef === "string") {
     pointer = enumDef;
@@ -3900,258 +2849,6 @@ function parseNumericField(raw, integer) {
   }
   return integer ? Math.trunc(Number(raw)) : Number(raw);
 }
-function refTextField(key, refVal, onChange) {
-  return html`<sp-textfield
-    size="s"
-    label=${key}
-    placeholder=${key}
-    .value=${live(refVal)}
-    @change=${(e) => {
-    const v = e.target.value.trim();
-    onChange(v ? { $ref: v } : undefined);
-  }}
-  ></sp-textfield>`;
-}
-function renderInlineField(key, schema, value, onChange, ctx, scope, rerender) {
-  if (isRef(value)) {
-    return refTextField(key, value.$ref, onChange);
-  }
-  const referenceControl = referenceTarget(schema) === null ? undefined : controlRegistry.get("reference");
-  if (referenceControl) {
-    return referenceControl({
-      ctx: ctx ?? NULL_FORM_CONTEXT,
-      key,
-      onChange,
-      rerender,
-      schema,
-      value
-    });
-  }
-  const enumValues = resolveFormEnum(schema.enum, ctx, scope);
-  if (enumValues) {
-    return html`<sp-picker
-      size="s"
-      label=${key}
-      value=${value !== undefined ? String(value) : "__none__"}
-      @change=${(e) => onChange(e.target.value === "__none__" ? undefined : e.target.value)}
-    >
-      <sp-menu-item value="__none__">—</sp-menu-item>
-      ${enumValues.map((v) => html`<sp-menu-item value=${v}>${v}</sp-menu-item>`)}
-    </sp-picker>`;
-  }
-  if (schema.type === "boolean") {
-    return html`<sp-switch
-      size="s"
-      ?checked=${Boolean(value)}
-      @change=${(e) => onChange(e.target.checked)}
-      >${key}</sp-switch
-    >`;
-  }
-  if (schema.type === "integer" || schema.type === "number") {
-    return html`<sp-number-field
-      size="s"
-      label=${key}
-      .value=${value !== undefined ? value : nothing}
-      step=${schema.type === "integer" ? "1" : nothing}
-      @change=${(e) => {
-      const parsed = parseNumericField(e.target.value, schema.type === "integer");
-      onChange(Number.isNaN(parsed) ? undefined : parsed);
-    }}
-    ></sp-number-field>`;
-  }
-  return html`<sp-textfield
-    size="s"
-    label=${key}
-    placeholder=${key}
-    .value=${value ?? ""}
-    @input=${(e) => onChange(e.target.value || undefined)}
-  ></sp-textfield>`;
-}
-function renderJsonTextField(currentValue, ps, commit) {
-  let debounce;
-  return html`<sp-textfield
-    multiline
-    size="s"
-    style="min-height:40px"
-    .value=${currentValue !== undefined ? JSON.stringify(currentValue, null, 2) : ""}
-    placeholder=${ps.default !== undefined ? JSON.stringify(ps.default) : nothing}
-    @input=${(e) => {
-    clearTimeout(debounce);
-    debounce = setTimeout(() => {
-      try {
-        commit(JSON.parse(e.target.value));
-      } catch {}
-    }, 500);
-  }}
-  ></sp-textfield>`;
-}
-function renderPropertyControl(prop, ps, value, required, opts, ctx) {
-  const currentValue = value[prop];
-  const commit = (next) => opts.onChange({ [prop]: next });
-  const controlArgs = {
-    ctx,
-    key: prop,
-    onChange: commit,
-    rerender: opts.rerender,
-    schema: ps,
-    value: currentValue
-  };
-  const overrideName = opts.ui?.[prop]?.control;
-  if (overrideName) {
-    const custom = controlRegistry.get(overrideName);
-    if (custom) {
-      return custom(controlArgs);
-    }
-  }
-  if (isRef(currentValue) && isBindableField(ps)) {
-    return refTextField(prop, currentValue.$ref, commit);
-  }
-  if (referenceTarget(ps) !== null) {
-    const referenceControl = controlRegistry.get("reference");
-    if (referenceControl) {
-      return referenceControl(controlArgs);
-    }
-  }
-  const enumValues = resolveFormEnum(opts.ui?.[prop]?.enum ?? ps.enum, ctx, value);
-  if (enumValues) {
-    return html`
-      <sp-picker
-        size="s"
-        value=${currentValue !== undefined ? String(currentValue) : ps.default !== undefined ? String(ps.default) : "__none__"}
-        @change=${(e) => commit(e.target.value === "__none__" ? undefined : e.target.value)}
-      >
-        ${!required.has(prop) ? html`<sp-menu-item value="__none__">—</sp-menu-item>` : nothing}
-        ${enumValues.map((val) => html`<sp-menu-item value=${val}>${val}</sp-menu-item>`)}
-      </sp-picker>
-    `;
-  }
-  if (ps.type === "boolean") {
-    return html`<sp-checkbox
-      ?checked=${currentValue ?? ps.default ?? false}
-      @change=${(e) => commit(e.target.checked)}
-    ></sp-checkbox>`;
-  }
-  if (ps.type === "integer" || ps.type === "number") {
-    let debounce2;
-    return html`<sp-number-field
-      size="s"
-      min=${ifDefined(ps.minimum)}
-      max=${ifDefined(ps.maximum)}
-      step=${ps.type === "integer" ? "1" : nothing}
-      .value=${currentValue !== undefined ? currentValue : nothing}
-      placeholder=${ps.default != null ? String(ps.default) : nothing}
-      @change=${(e) => {
-      clearTimeout(debounce2);
-      debounce2 = setTimeout(() => {
-        const parsed = parseNumericField(e.target.value, ps.type === "integer");
-        commit(Number.isNaN(parsed) ? undefined : parsed);
-      }, 400);
-    }}
-    ></sp-number-field>`;
-  }
-  if (ps.format === "json-schema") {
-    const hasValue = currentValue && typeof currentValue === "object" && Object.keys(currentValue).length > 0;
-    const cv = currentValue;
-    const isSchemaRef = hasValue && cv.$ref;
-    let debounce2;
-    return html`
-      <div class="schema-param-editor">
-        ${hasValue && !isSchemaRef && cv.properties ? html`
-                <div style="display:flex;flex-wrap:wrap;gap:3px;margin-bottom:4px">
-                  ${Object.entries(cv.properties).map(([k, v]) => html`
-                      <span
-                        style="background:var(--bg);padding:1px 6px;border-radius:var(--radius);font-size:10px;color:var(--fg-dim)"
-                        >${k}: ${v.type ?? "any"}</span
-                      >
-                    `)}
-                </div>
-              ` : nothing}
-        <sp-textfield
-          multiline
-          size="s"
-          style=${styleMap({
-      fontFamily: "monospace",
-      fontSize: "11px",
-      minHeight: hasValue ? "80px" : "40px"
-    })}
-          .value=${currentValue !== undefined ? JSON.stringify(currentValue, null, 2) : ""}
-          placeholder=${ps.description ?? "JSON Schema defining the data shape…"}
-          @input=${(e) => {
-      clearTimeout(debounce2);
-      debounce2 = setTimeout(() => {
-        try {
-          commit(JSON.parse(e.target.value));
-        } catch {}
-      }, 500);
-    }}
-        ></sp-textfield>
-      </div>
-    `;
-  }
-  if (ps.type === "array" && ps.items?.type === "object" && ps.items?.properties) {
-    const rows = Array.isArray(currentValue) ? currentValue : [];
-    const itemProps = ps.items.properties;
-    return html`
-      <div class="array-object-field">
-        ${rows.map((row, idx) => html`
-            <div
-              class="array-object-row"
-              style="display:flex;gap:4px;align-items:center;margin-bottom:4px"
-            >
-              ${Object.entries(itemProps).map(([propKey, propSchema]) => renderInlineField(propKey, propSchema, row[propKey], (val) => {
-      const updated = [...rows];
-      updated[idx] = { ...updated[idx], [propKey]: val };
-      commit(updated);
-    }, ctx, value, opts.rerender))}
-              <sp-action-button
-                quiet
-                size="s"
-                @click=${() => {
-      const updated = rows.filter((_, i) => i !== idx);
-      commit(updated.length > 0 ? updated : undefined);
-      opts.rerender?.();
-    }}
-              >
-                <sp-icon-delete slot="icon"></sp-icon-delete>
-              </sp-action-button>
-            </div>
-          `)}
-        <sp-action-button
-          quiet
-          size="s"
-          @click=${(e) => {
-      e.stopPropagation();
-      const newRow = {};
-      for (const [k, v] of Object.entries(itemProps)) {
-        if (v.default !== undefined) {
-          newRow[k] = v.default;
-        }
-      }
-      commit([...rows, newRow]);
-      opts.rerender?.();
-    }}
-          >+ Add</sp-action-button
-        >
-      </div>
-    `;
-  }
-  if (ps.type === "array" || ps.type === "object") {
-    return renderJsonTextField(currentValue, ps, commit);
-  }
-  let debounce;
-  const ph = ps.default !== undefined ? String(ps.default) : ps.examples?.[0] ?? "";
-  return html`<sp-textfield
-    size="s"
-    style="flex:1"
-    .value=${currentValue ?? ""}
-    placeholder=${ph || nothing}
-    title=${ps.description || nothing}
-    @input=${(e) => {
-    clearTimeout(debounce);
-    debounce = setTimeout(() => commit(e.target.value || undefined), 400);
-  }}
-  ></sp-textfield>`;
-}
 function isBindableField(ps) {
   return ps.format !== "json-schema" && ps.type !== "object" && ps.type !== "array";
 }
@@ -4161,8 +2858,15 @@ function refSourcesFor(ctx) {
     ...(ctx.params ?? []).map((name) => ({ label: `$params/${name}`, value: `#/$params/${name}` }))
   ];
 }
+var NONE = "__none__";
+function asText(value) {
+  if (value === undefined || value === null) {
+    return "";
+  }
+  return typeof value === "object" ? JSON.stringify(value, null, 2) : String(value);
+}
 function validateFieldValue(schema, value, isRequired) {
-  if (isRef(value)) {
+  if (isRef2(value)) {
     return "";
   }
   const empty = value === undefined || value === null || value === "";
@@ -4199,39 +2903,603 @@ function validateFieldValue(schema, value, isRequired) {
   }
   return "";
 }
-function renderForm(schema, value, opts) {
-  const required = new Set(schema.required);
-  const ctx = opts.context ?? NULL_FORM_CONTEXT;
-  const refSources = refSourcesFor(ctx);
-  const propertyFields = Object.entries(schema.properties ?? {}).map(([prop, ps]) => {
-    const labelText = prop + (required.has(prop) ? " *" : "");
-    const error = opts.errors?.[prop] || validateFieldValue(ps, value[prop], Boolean(opts.showRequired) && required.has(prop));
-    const count = opts.errorCounts?.[prop];
-    const staticWidget = renderPropertyControl(prop, ps, value, required, opts, ctx);
-    const laddered = refSources.length > 0 && isBindableField(ps) && !opts.ui?.[prop]?.control ? renderDynamicSlot({
-      allowCustomRef: true,
-      caps: { schema: configFieldSchema(ps) },
-      extraSignals: refSources,
-      fieldKey: `${ctx.fieldKeyPrefix ?? ""}.${prop}`,
-      onChange: (v) => opts.onChange({ [prop]: v }),
-      staticWidget,
-      stateDefs: [],
-      value: value[prop]
-    }) : null;
-    return renderFieldRow({
-      hasValue: false,
-      label: labelText,
-      prop: ps.name || prop,
-      widget: laddered ? laddered.widget : staticWidget,
-      ...laddered ? { labelExtra: laddered.modeButton } : {},
-      ...error ? { error } : {},
-      ...count === undefined ? {} : { errorCount: count }
+var JSON_COMMIT_MS = 500;
+var TEXT_COMMIT_MS = 400;
+var forms = new Map;
+function mountSchemaForm(formKey, schema, value, opts) {
+  sweep(formKey);
+  let controller = forms.get(formKey);
+  if (!controller) {
+    controller = createController();
+    forms.set(formKey, controller);
+  }
+  controller.update(schema, value, opts);
+  return controller.host;
+}
+function sweep(exceptKey) {
+  for (const [key, controller] of forms) {
+    if (key !== exceptKey && !controller.host.isConnected) {
+      controller.dispose();
+      forms.delete(key);
+    }
+  }
+}
+function createController() {
+  let schema = {};
+  let value = {};
+  let opts = { onChange: () => {} };
+  let ctx = NULL_FORM_CONTEXT;
+  const plans = new Map;
+  const timers = new Map;
+  const controlHosts = new Map;
+  const mountedControls = new Map;
+  let sourceMenu = null;
+  const later = (key, ms, run) => {
+    clearTimeout(timers.get(key));
+    if (ms <= 0) {
+      run();
+      return;
+    }
+    timers.set(key, setTimeout(run, ms));
+  };
+  const now = (key, run) => {
+    clearTimeout(timers.get(key));
+    timers.delete(key);
+    run();
+  };
+  const patch = (prop, next) => {
+    opts.onChange({ [prop]: next });
+  };
+  const write = (plan, raw) => {
+    if (plan.commit === "none") {
+      return;
+    }
+    switch (plan.commit) {
+      case "ref": {
+        const trimmed = raw.trim();
+        patch(plan.prop, trimmed ? { $ref: trimmed } : undefined);
+        return;
+      }
+      case "template": {
+        patch(plan.prop, raw);
+        return;
+      }
+      case "select": {
+        patch(plan.prop, raw === NONE ? undefined : raw);
+        return;
+      }
+      case "number": {
+        const parsed = parseNumericField(raw, plan.schema.type === "integer");
+        patch(plan.prop, Number.isNaN(parsed) ? undefined : parsed);
+        return;
+      }
+      case "json": {
+        try {
+          patch(plan.prop, JSON.parse(raw));
+        } catch {}
+        return;
+      }
+      default: {
+        patch(plan.prop, raw || undefined);
+      }
+    }
+  };
+  const cellRows = (plan) => {
+    const copies = [];
+    for (const item of plan.rows ?? []) {
+      copies.push({ ...item });
+    }
+    return copies;
+  };
+  const actions = {
+    addRow: (field) => {
+      const plan = plans.get(field);
+      if (!plan?.itemProps) {
+        return;
+      }
+      const seed = {};
+      for (const [k, v] of Object.entries(plan.itemProps)) {
+        if (v.default !== undefined) {
+          seed[k] = v.default;
+        }
+      }
+      patch(field, [...cellRows(plan), seed]);
+      opts.rerender?.();
+    },
+    commit: (key, raw) => {
+      const plan = plans.get(key);
+      if (plan) {
+        now(key, () => write(plan, raw));
+      }
+    },
+    commitChecked: (key, checked) => {
+      const plan = plans.get(key);
+      if (plan) {
+        patch(plan.prop, checked);
+      }
+    },
+    edit: (key, raw) => {
+      const plan = plans.get(key);
+      if (plan && plan.debounceMs > 0) {
+        later(key, plan.debounceMs, () => write(plan, raw));
+      }
+    },
+    editCell: (field, row, cell, raw) => {
+      writeCell(field, row, cell, raw);
+    },
+    editCellChecked: (field, row, cell, checked) => {
+      writeCell(field, row, cell, checked);
+    },
+    editJson: (key, raw) => {
+      const plan = plans.get(key);
+      if (plan) {
+        later(key, JSON_COMMIT_MS, () => write(plan, raw));
+      }
+    },
+    pickSource: (key, anchor) => {
+      openSourceMenu(key, anchor);
+    },
+    removeRow: (field, row) => {
+      const plan = plans.get(field);
+      if (!plan) {
+        return;
+      }
+      const idx = Number(row);
+      const kept = cellRows(plan).filter((_, i) => i !== idx);
+      patch(field, kept.length > 0 ? kept : undefined);
+      opts.rerender?.();
+    }
+  };
+  function writeCell(field, row, cell, next) {
+    const plan = plans.get(field);
+    if (!plan?.itemProps) {
+      return;
+    }
+    const idx = Number(row);
+    const rows = cellRows(plan);
+    const target = rows[idx];
+    if (!target) {
+      return;
+    }
+    const cellSchema = plan.itemProps[cell];
+    rows[idx] = {
+      ...target,
+      [cell]: coerceCell(cellSchema, next, plan.refCells?.has(`${field}/${row}/${cell}`) ?? false)
+    };
+    patch(field, rows);
+  }
+  function coerceCell(cellSchema, next, isPointer) {
+    if (typeof next === "boolean") {
+      return next;
+    }
+    const raw = String(next);
+    if (isPointer) {
+      const trimmed = raw.trim();
+      return trimmed ? { $ref: trimmed } : undefined;
+    }
+    if (cellSchema?.type === "integer" || cellSchema?.type === "number") {
+      const parsed = parseNumericField(raw, cellSchema.type === "integer");
+      return Number.isNaN(parsed) ? undefined : parsed;
+    }
+    if (raw === NONE || raw === "") {
+      return;
+    }
+    return raw;
+  }
+  function openSourceMenu(key, anchor) {
+    const plan = plans.get(key);
+    if (!plan?.ladder) {
+      return;
+    }
+    const { fieldKey, mode, offered, sources } = plan.ladder;
+    sourceMenu?.close();
+    sourceMenu = openMenu2({
+      label: "Value source",
+      onClosed: () => {
+        sourceMenu = null;
+      },
+      opener: anchor,
+      region: "value-source",
+      rows: offered.map((rung) => ({
+        checked: rung === mode ? "true" : "false",
+        destructive: false,
+        disabled: false,
+        dividerAbove: false,
+        id: rung,
+        title: VALUE_SOURCE_LABELS[rung]
+      })),
+      run: (id) => {
+        const next = id;
+        if (next === mode) {
+          return;
+        }
+        const literalDefault = plan.schema.default;
+        if (mode === "ref" && literalDefault !== undefined && !hasStashedSlotValue(fieldKey, "literal")) {
+          stashSlotValue(fieldKey, "literal", literalDefault);
+        }
+        patch(plan.prop, switchSlotMode(fieldKey, mode, next, cloneValue2(value[plan.prop]), slotModeSeed(next, { extraSignals: sources, literalDefault, stateDefs: [] })));
+      }
     });
+  }
+  function controlFor(id) {
+    const plan = plans.get(id);
+    if (plan?.control) {
+      return {
+        args: {
+          ctx,
+          key: plan.prop,
+          onChange: (next) => patch(plan.prop, next),
+          rerender: opts.rerender,
+          schema: plan.schema,
+          value: value[plan.prop]
+        },
+        control: plan.control
+      };
+    }
+    for (const owner of plans.values()) {
+      const entry = owner.cellControls?.get(id);
+      if (!entry) {
+        continue;
+      }
+      const row = (owner.rows ?? [])[Number(entry.row)] ?? {};
+      return {
+        args: {
+          ctx,
+          key: entry.key,
+          onChange: (next) => writeCell(owner.prop, entry.row, entry.key, next),
+          rerender: opts.rerender,
+          schema: entry.schema,
+          value: row[entry.key]
+        },
+        control: entry.control
+      };
+    }
+    return;
+  }
+  function paintControl(id, host) {
+    const found = controlFor(id);
+    if (!found) {
+      return;
+    }
+    const standing = mountedControls.get(id);
+    if (standing?.host === host) {
+      standing.handle.update(found.args);
+      return;
+    }
+    standing?.handle.dispose();
+    mountedControls.set(id, { handle: found.control.mount(host, found.args), host });
+  }
+  function sweepMountedControls() {
+    for (const [id, standing] of mountedControls) {
+      if (!controlFor(id)) {
+        standing.handle.dispose();
+        mountedControls.delete(id);
+      }
+    }
+  }
+  function paintControls() {
+    sweepMountedControls();
+    for (const [id, host] of controlHosts) {
+      paintControl(id, host);
+    }
+  }
+  const surface = createSchemaFormSurface({ fields: [] }, actions, (id, host) => {
+    controlHosts.set(id, host);
+    paintControl(id, host);
   });
-  return html`${propertyFields}`;
+  return {
+    dispose() {
+      for (const timer of timers.values()) {
+        clearTimeout(timer);
+      }
+      timers.clear();
+      sourceMenu?.close();
+      sourceMenu = null;
+      for (const standing of mountedControls.values()) {
+        standing.handle.dispose();
+      }
+      mountedControls.clear();
+      controlHosts.clear();
+      plans.clear();
+      surface.dispose();
+    },
+    host: surface.host,
+    update(nextSchema, nextValue, nextOpts) {
+      schema = nextSchema;
+      value = nextValue;
+      opts = nextOpts;
+      ctx = nextOpts.context ?? NULL_FORM_CONTEXT;
+      plans.clear();
+      surface.update({ fields: deriveFields(schema, value, opts, ctx, plans) });
+      paintControls();
+    }
+  };
+}
+function deriveFields(schema, value, opts, ctx, plans) {
+  const required = new Set(schema.required);
+  const sources = refSourcesFor(ctx);
+  return Object.entries(schema.properties ?? {}).map(([prop, ps]) => deriveField(prop, ps, {
+    ctx,
+    opts,
+    plans,
+    required: required.has(prop),
+    sources,
+    value
+  }));
+}
+function deriveField(prop, ps, args) {
+  const { ctx, opts, plans, required, sources, value } = args;
+  const current = value[prop];
+  const plan = { commit: "text", debounceMs: TEXT_COMMIT_MS, prop, schema: ps };
+  plans.set(prop, plan);
+  const error = opts.errors?.[prop] || validateFieldValue(ps, current, Boolean(opts.showRequired) && required);
+  const count = opts.errorCounts?.[prop];
+  const overrideName = opts.ui?.[prop]?.control;
+  const override = overrideName ? controlRegistry.get(overrideName) : undefined;
+  const laddered = sources.length > 0 && isBindableField(ps) && !overrideName;
+  const row = {
+    addLabel: `Add ${prop}`,
+    checked: false,
+    chips: [],
+    description: ps.description ?? "",
+    error,
+    errorCount: count !== undefined && count > 1 ? `×${count}` : "",
+    hasChip: false,
+    hasChips: false,
+    hasCount: count !== undefined && count > 1,
+    hasError: error !== "",
+    hasOptions: false,
+    invalid: error !== "",
+    key: prop,
+    kind: "text",
+    label: prop,
+    max: "",
+    min: "",
+    mono: false,
+    multiline: false,
+    options: [],
+    placeholder: "",
+    prop: ps.name || prop,
+    required,
+    rows: [],
+    source: "fixed",
+    sourceHint: "",
+    sourceLabel: "",
+    sourceLocked: false,
+    sourceName: "",
+    step: "",
+    value: ""
+  };
+  if (laddered) {
+    const fieldKey = `${ctx.fieldKeyPrefix ?? ""}.${prop}`;
+    const mode = effectiveSlotMode(fieldKey, current);
+    const offered = slotCaps({ schema: configFieldSchema(ps) });
+    plan.ladder = { fieldKey, mode, offered, sources };
+    row.hasChip = true;
+    row.sourceLabel = VALUE_SOURCE_LABELS[mode];
+    row.sourceHint = VALUE_SOURCE_HINTS[mode];
+    row.source = mode === "literal" ? "fixed" : "bound";
+    row.sourceLocked = !offered.some((m) => m !== mode);
+    row.sourceName = row.sourceLocked ? `Value source: ${row.sourceLabel} (no other source available here)` : `Value source: ${row.sourceLabel} — click to change`;
+    if (mode === "ref") {
+      plan.commit = "ref";
+      plan.debounceMs = 0;
+      row.kind = "pointer";
+      row.value = isRef2(current) ? current.$ref : "";
+      row.options = sources.map((s) => ({ label: s.label, value: s.value }));
+      row.hasOptions = row.options.length > 0;
+      return row;
+    }
+    if (mode === "template") {
+      plan.commit = "template";
+      plan.debounceMs = 0;
+      row.kind = "template";
+      row.value = String(current ?? "");
+      return row;
+    }
+  }
+  if (override) {
+    plan.commit = "none";
+    plan.control = override;
+    row.kind = "control";
+    return row;
+  }
+  if (isRef2(current) && isBindableField(ps)) {
+    plan.commit = "ref";
+    plan.debounceMs = 0;
+    row.kind = "text";
+    row.mono = true;
+    row.value = current.$ref;
+    row.placeholder = prop;
+    return row;
+  }
+  if (referenceTarget(ps) !== null) {
+    const reference = controlRegistry.get("reference");
+    if (reference) {
+      plan.commit = "none";
+      plan.control = reference;
+      row.kind = "control";
+      return row;
+    }
+  }
+  const enumValues = resolveFormEnum(opts.ui?.[prop]?.enum ?? ps.enum, ctx, value);
+  if (enumValues) {
+    plan.commit = "select";
+    plan.debounceMs = 0;
+    row.kind = "select";
+    row.value = current !== undefined ? String(current) : ps.default !== undefined ? String(ps.default) : NONE;
+    row.options = [
+      ...required ? [] : [{ label: "—", value: NONE }],
+      ...enumValues.map((v) => ({ label: v, value: v }))
+    ];
+    return row;
+  }
+  if (ps.type === "boolean") {
+    plan.commit = "none";
+    row.kind = "checkbox";
+    row.checked = Boolean(current ?? ps.default ?? false);
+    return row;
+  }
+  if (ps.type === "integer" || ps.type === "number") {
+    plan.commit = "number";
+    plan.debounceMs = 0;
+    row.kind = "number";
+    row.value = current !== undefined ? String(current) : "";
+    row.placeholder = ps.default != null ? String(ps.default) : "";
+    row.min = ps.minimum !== undefined ? String(ps.minimum) : "";
+    row.max = ps.maximum !== undefined ? String(ps.maximum) : "";
+    row.step = ps.type === "integer" ? "1" : "";
+    return row;
+  }
+  if (ps.format === "json-schema") {
+    plan.commit = "json";
+    row.kind = "json";
+    row.value = current !== undefined ? JSON.stringify(current, null, 2) : "";
+    row.placeholder = ps.description ?? "JSON Schema defining the data shape…";
+    row.chips = shapeChips(current);
+    row.hasChips = row.chips.length > 0;
+    return row;
+  }
+  if (ps.type === "array" && ps.items?.type === "object" && ps.items.properties) {
+    return arrayOfObjects(prop, ps.items.properties, args, plan, row);
+  }
+  if (ps.type === "array" || ps.type === "object") {
+    plan.commit = "json";
+    row.kind = "json";
+    row.value = current !== undefined ? JSON.stringify(current, null, 2) : "";
+    row.placeholder = ps.default !== undefined ? JSON.stringify(ps.default) : "";
+    return row;
+  }
+  row.kind = "text";
+  row.value = asText(current);
+  row.placeholder = ps.default !== undefined ? String(ps.default) : ps.examples?.[0] ?? "";
+  return row;
+}
+function shapeChips(current) {
+  if (!current || typeof current !== "object") {
+    return [];
+  }
+  const held = current;
+  if (held.$ref || typeof held.properties !== "object" || held.properties === null) {
+    return [];
+  }
+  return Object.entries(held.properties).map(([key, spec]) => ({ key, label: `${key}: ${String(spec.type ?? "any")}` }));
+}
+function arrayOfObjects(prop, itemProps, args, plan, row) {
+  const held = args.value[prop];
+  const rows = Array.isArray(held) ? held : [];
+  plan.commit = "none";
+  plan.itemProps = itemProps;
+  plan.rows = rows;
+  plan.cellControls = new Map;
+  plan.refCells = new Set;
+  row.kind = "rows";
+  row.rows = rows.map((item, idx) => deriveRow(prop, String(idx), item, itemProps, args, plan));
+  return row;
+}
+function deriveRow(prop, key, item, itemProps, args, plan) {
+  return {
+    cells: Object.entries(itemProps).map(([cellKey, cellSchema]) => deriveCell(prop, key, cellKey, cellSchema, item[cellKey], args, plan)),
+    field: prop,
+    key,
+    removeLabel: `Remove ${prop} ${Number(key) + 1}`
+  };
+}
+function deriveCell(prop, rowKey, cellKey, cellSchema, held, args, plan) {
+  const id = `${prop}/${rowKey}/${cellKey}`;
+  const cell = {
+    checked: false,
+    field: prop,
+    id,
+    key: cellKey,
+    kind: "text",
+    label: cellKey,
+    options: [],
+    row: rowKey,
+    value: ""
+  };
+  if (isRef2(held)) {
+    cell.value = held.$ref;
+    plan.refCells?.add(id);
+    return cell;
+  }
+  if (referenceTarget(cellSchema) !== null) {
+    const reference = controlRegistry.get("reference");
+    if (reference) {
+      cell.kind = "control";
+      plan.cellControls?.set(id, {
+        control: reference,
+        key: cellKey,
+        row: rowKey,
+        schema: cellSchema
+      });
+      return cell;
+    }
+  }
+  const enumValues = resolveFormEnum(cellSchema.enum, args.ctx, args.value);
+  if (enumValues) {
+    cell.kind = "select";
+    cell.value = held !== undefined ? String(held) : NONE;
+    cell.options = [
+      { label: "—", value: NONE },
+      ...enumValues.map((v) => ({ label: v, value: v }))
+    ];
+    return cell;
+  }
+  if (cellSchema.type === "boolean") {
+    cell.kind = "checkbox";
+    cell.checked = Boolean(held);
+    return cell;
+  }
+  if (cellSchema.type === "integer" || cellSchema.type === "number") {
+    cell.kind = "number";
+    cell.value = held !== undefined ? String(held) : "";
+    return cell;
+  }
+  cell.value = asText(held);
+  return cell;
+}
+
+// src/services/context-resolver.ts
+var PARAM_SEGMENT = /^\{@(\w+)\}$/;
+function resolveContextPointer(pointer, opts) {
+  if (!pointer.startsWith("#/$context/")) {
+    return;
+  }
+  const segments = [];
+  for (const raw of pointer.slice("#/$context/".length).split("/")) {
+    const match = raw.match(PARAM_SEGMENT);
+    if (match) {
+      const value = opts.scope?.[match[1]];
+      if (typeof value !== "string" && typeof value !== "number") {
+        return;
+      }
+      const substituted = String(value);
+      if (!substituted) {
+        return;
+      }
+      segments.push(substituted);
+    } else {
+      segments.push(raw);
+    }
+  }
+  if (segments[0] === "$formats") {
+    if (segments.length !== 1) {
+      return;
+    }
+    return (opts.formats ?? []).map((format) => format.name);
+  }
+  let node = opts.projectConfig;
+  for (const segment of segments) {
+    if (node === null || typeof node !== "object") {
+      return;
+    }
+    node = node[segment];
+  }
+  return node;
 }
 
-export { renderProvenanceChip, countProvenance, renderProvenanceDots, renderFieldRow, renderKvRow, renderStaticKvRow, chipSummary, renderFormulaChips, applyCatalogPick, globalEntries, namedFormulaEntries, formulaCatalog, openFormulaPalette, REDIRECT_STATUSES, VALUE_SOURCE_LABELS, slotMode, capsForPosition, resolveContextPointer, isActionExpression, expressionHint, renderOperandEditor, renderExpressionEditor, switchSlotMode, renderDynamicSlot, registerFormControl, getFormControl, referenceTarget, NULL_FORM_CONTEXT, renderForm };
+export { REDIRECT_STATUSES, VALUE_SOURCE_LABELS, VALUE_SOURCE_HINTS, slotMode, TAG_EXPRESSION_OPERATORS, capsForPosition, slotCaps, stashSlotValue, hasStashedSlotValue, effectiveSlotMode, slotModeSeed, switchSlotMode, registerFormControl, referenceTarget, mountSchemaForm, resolveContextPointer };
 
-//# debugId=DDC68693A8D15CAC64756E2164756E21
-//# sourceMappingURL=studio-x4qkdat5.js.map
+//# debugId=427B709FE510BC3D64756E2164756E21
+//# sourceMappingURL=studio-57mf66w2.js.map