@octaviaflow/core 3.1.0-beta.103 → 3.1.0-beta.105

package/dist/components/ExpressionField/ExpressionField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpressionField.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionField/ExpressionField.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAML,KAAK,aAAa,EAIlB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAUf,6EAA6E;AAC7E,MAAM,WAAW,gBAAgB;IAC/B,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;CAChC;AAED,uEAAuE;AACvE,MAAM,WAAW,aAAa;IAC5B,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;CACjB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACrD;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,aAAa,GAAG,SAAS,CAAC;IAC1D;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAMD,mEAAmE;AACnE,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAWzD;AAyBD;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,eAAe,EAAE,MAAM,GAAG,OAAO,CAiBpE;AAWD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAAW,EACX,UAAU,EACV,QAAgB,EAChB,IAAQ,EACR,EAAE,EACF,SAAS,EACT,KAAK,EACL,YAAY,EACZ,WAAW,EACX,cAAsB,EACtB,YAAY,EAAE,SAAS,GACxB,EAAE,oBAAoB,2CA+XtB;AA0HD,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ExpressionField.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionField/ExpressionField.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAML,KAAK,aAAa,EAIlB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAaf,6EAA6E;AAC7E,MAAM,WAAW,gBAAgB;IAC/B,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;CAChC;AAED,uEAAuE;AACvE,MAAM,WAAW,aAAa;IAC5B,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;CACjB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACrD;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,aAAa,GAAG,SAAS,CAAC;IAC1D;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAMD,mEAAmE;AACnE,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAWzD;AAyBD;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,eAAe,EAAE,MAAM,GAAG,OAAO,CAiBpE;AAuBD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAAW,EACX,UAAU,EACV,QAAgB,EAChB,IAAQ,EACR,EAAE,EACF,SAAS,EACT,KAAK,EACL,YAAY,EACZ,WAAW,EACX,cAAsB,EACtB,YAAY,EAAE,SAAS,GACxB,EAAE,oBAAoB,2CAiZtB;AAuND,eAAe,eAAe,CAAC"}

package/dist/components/ExpressionField/parseExpression.d.ts

@@ -32,4 +32,21 @@ export declare function formatCall(name: string, args: string[]): string;
  * not a call, for hosts whose tokens are their own short form.
  */
 export declare function parseExpression(value: string, pillEveryToken?: boolean): Segment[];
+/** The call at `path`, or the top-level call for an empty path. */
+export declare function callAt(raw: string, path: number[]): {
+    name: string;
+    args: string[];
+} | undefined;
+/** The argument text at `path`, e.g. `[0]` → the first argument. */
+export declare function argumentAt(raw: string, path: number[]): string | undefined;
+/** A nested call is written bare; only the outermost one wears braces. */
+export declare function formatNestedCall(name: string, args: string[]): string;
+/**
+ * Replace the argument at `path`, rebuilding every call on the way back up.
+ * An empty path replaces the whole expression.
+ */
+export declare function replaceArgument(raw: string, path: number[], next: string): string;
+/** What kind of thing an argument is — the editor shows each differently. */
+export type ArgumentKind = "reference" | "call" | "literal";
+export declare function argumentKind(arg: string): ArgumentKind;
 //# sourceMappingURL=parseExpression.d.ts.map

package/dist/components/ExpressionField/parseExpression.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"parseExpression.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionField/parseExpression.ts"],"names":[],"mappings":"AASA,4EAA4E;AAC5E,eAAO,MAAM,gBAAgB,uDAAuD,CAAC;AAGrF,MAAM,MAAM,OAAO,GACf;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAC7B;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAC5B;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AA2ChE;;;GAGG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CA2CzD;AAED,gFAAgF;AAChF,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,EAAE,CAAA;CAAE,GAAG,SAAS,CAQnF;AAED,yEAAyE;AACzE,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,CAE/D;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,cAAc,UAAQ,GAAG,OAAO,EAAE,CA8BhF"}
+{"version":3,"file":"parseExpression.d.ts","sourceRoot":"","sources":["../../../src/components/ExpressionField/parseExpression.ts"],"names":[],"mappings":"AASA,4EAA4E;AAC5E,eAAO,MAAM,gBAAgB,uDAAuD,CAAC;AAGrF,MAAM,MAAM,OAAO,GACf;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAC7B;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAC5B;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AA2ChE;;;GAGG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CA2CzD;AAED,gFAAgF;AAChF,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,EAAE,CAAA;CAAE,GAAG,SAAS,CAQnF;AAED,yEAAyE;AACzE,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,CAE/D;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,cAAc,UAAQ,GAAG,OAAO,EAAE,CA8BhF;AAQD,mEAAmE;AACnE,wBAAgB,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,EAAE,CAAA;CAAE,GAAG,SAAS,CAShG;AAED,oEAAoE;AACpE,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAI1E;AAED,0EAA0E;AAC1E,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,CAErE;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAYjF;AAED,6EAA6E;AAC7E,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC;AAE5D,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,YAAY,CAQtD"}

package/dist/index.cjs

@@ -41467,6 +41467,39 @@ function parseExpression(value, pillEveryToken = false) {
   pushText(tail.slice(last));
   return segments;
 }
+function callAt(raw, path) {
+  let current = parseCall(raw);
+  for (const index of path) {
+    if (!current) return void 0;
+    const arg = current.args[index];
+    if (arg === void 0) return void 0;
+    current = parseCall(arg);
+  }
+  return current;
+}
+function formatNestedCall(name, args) {
+  return `${name}(${args.filter((a) => a.trim() !== "").join(", ")})`;
+}
+function replaceArgument(raw, path, next) {
+  if (path.length === 0) return next;
+  const [index, ...rest] = path;
+  const call = parseCall(raw);
+  if (!call || index === void 0 || index > call.args.length) return raw;
+  const args = [...call.args];
+  if (args[index] === void 0) args[index] = "";
+  args[index] = rest.length === 0 ? next : replaceArgument(args[index], rest, next);
+  const wrapped = raw.trim().startsWith("{{");
+  return wrapped ? formatCall(call.name, args) : formatNestedCall(call.name, args);
+}
+function argumentKind(arg) {
+  const trimmed = arg.trim();
+  if (!trimmed) return "literal";
+  if (parseCall(trimmed)) return "call";
+  if (trimmed.startsWith("{{") || trimmed.startsWith("ods://") || trimmed.startsWith("${")) {
+    return "reference";
+  }
+  return "literal";
+}
 
 // src/components/ExpressionField/ExpressionField.tsx
 var import_jsx_runtime174 = require("react/jsx-runtime");
@@ -41525,8 +41558,14 @@ function insideCallArguments(textBeforeCaret) {
   }
   return depth > 0;
 }
-function argSummary(arg) {
+function argSummary(arg, nameOf, depth = 2) {
   const trimmed = arg.trim();
+  const call = parseCall(trimmed);
+  if (call) {
+    if (depth <= 0) return `${nameOf(call.name)}(\u2026)`;
+    const inner = call.args.map((a) => argSummary(a, nameOf, depth - 1)).filter(Boolean).join(", ");
+    return `${nameOf(call.name)}(${inner})`;
+  }
   if (trimmed.startsWith("{{") || trimmed.startsWith("ods://") || trimmed.startsWith("${")) {
     return shortReferenceLabel(trimmed.startsWith("ods://") ? `{{${trimmed}}}` : trimmed);
   }
@@ -41564,7 +41603,7 @@ function ExpressionField({
   );
   const chipText = (0, import_react188.useCallback)(
     (name, args) => {
-      const summary = args.map(argSummary).filter(Boolean).join(", ");
+      const summary = args.map((a) => argSummary(a, callLabel)).filter(Boolean).join(", ");
       return `${callLabel(name)}(${summary})`;
     },
     [callLabel]
@@ -41583,8 +41622,18 @@ function ExpressionField({
       } else {
         el.className = CHIP;
         el.setAttribute("data-call", segment.name);
-        el.textContent = chipText(segment.name, segment.args);
         el.title = segment.raw;
+        const text = document.createElement("span");
+        text.className = "ods-expression-field__chip-text";
+        text.textContent = chipText(segment.name, segment.args);
+        el.appendChild(text);
+        const open = document.createElement("span");
+        open.className = "ods-expression-field__chip-open";
+        open.setAttribute("data-open", "true");
+        open.setAttribute("role", "button");
+        open.setAttribute("aria-label", "Edit arguments");
+        open.textContent = "\u2304";
+        el.appendChild(open);
       }
       return el;
     },
@@ -41690,27 +41739,28 @@ function ExpressionField({
   }, []);
   const openEditor = (0, import_react188.useCallback)((chip) => {
     const raw = chip.getAttribute("data-value") ?? "";
-    const parsed = parseCall(raw);
-    if (!parsed) return;
+    if (!parseCall(raw)) return;
     const box = chip.getBoundingClientRect();
     const host = fieldRef.current?.getBoundingClientRect();
     setEditing({
       el: chip,
-      name: parsed.name,
-      args: parsed.args.length ? parsed.args : [""],
+      raw,
       rect: {
         top: box.bottom - (host?.top ?? 0) + 4,
         left: Math.max(0, box.left - (host?.left ?? 0)),
-        width: Math.max(260, box.width)
+        width: Math.max(300, box.width)
       }
     });
   }, []);
   const applyEditor = (0, import_react188.useCallback)(
-    (args) => {
+    (raw) => {
       if (!editing) return;
-      const raw = formatCall(editing.name, args);
+      const call = parseCall(raw);
+      if (!call) return;
       editing.el.setAttribute("data-value", raw);
-      editing.el.textContent = chipText(editing.name, args);
+      const text = editing.el.querySelector(".ods-expression-field__chip-text");
+      if (text) text.textContent = chipText(call.name, call.args);
+      else editing.el.textContent = chipText(call.name, call.args);
       editing.el.title = raw;
       setEditing(null);
       commit();
@@ -41720,12 +41770,13 @@ function ExpressionField({
   );
   const handleClick = (0, import_react188.useCallback)(
     (e) => {
-      const target = e.target.closest(`.${PILL}, .${CHIP}`);
+      const node = e.target;
+      const target = node.closest(`.${PILL}, .${CHIP}`);
       if (!target) return;
-      selectToken(target);
-      if (!disabled && target.classList.contains(CHIP) && e.detail >= 2) {
-        openEditor(target);
-      }
+      const chipEl = target;
+      const wantsEditor = chipEl.classList.contains(CHIP) && (!!node.closest("[data-open]") || e.detail >= 2);
+      selectToken(chipEl);
+      if (!disabled && wantsEditor) openEditor(chipEl);
     },
     [disabled, openEditor, selectToken]
   );
@@ -41844,11 +41895,11 @@ function ExpressionField({
       editing && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
         CallEditor,
         {
-          name: editing.name,
-          label: callLabel(editing.name),
-          initialArgs: editing.args,
-          signature: resolveCall?.(editing.name),
+          raw: editing.raw,
           rect: editing.rect,
+          nameOf: callLabel,
+          labelFor,
+          resolveCall,
           onCancel: () => setEditing(null),
           onApply: applyEditor
         }
@@ -41858,36 +41909,44 @@ function ExpressionField({
   ] });
 }
 function CallEditor({
-  name,
-  label,
-  initialArgs,
-  signature,
+  raw,
   rect,
+  nameOf,
+  labelFor,
+  resolveCall,
   onApply,
   onCancel
 }) {
-  const names = signature?.args ?? [];
-  const [args, setArgs] = (0, import_react188.useState)(() => {
-    const seeded = [...initialArgs];
-    while (seeded.length < names.length) seeded.push("");
-    return seeded.length ? seeded : [""];
-  });
-  const [raw, setRaw] = (0, import_react188.useState)(null);
+  const [draft, setDraft] = (0, import_react188.useState)(raw);
+  const [path, setPath] = (0, import_react188.useState)([]);
+  const [rawMode, setRawMode] = (0, import_react188.useState)(false);
   const panelRef = (0, import_react188.useRef)(null);
   (0, import_react188.useEffect)(() => {
-    panelRef.current?.querySelector("input")?.focus();
     const onKey = (e) => {
       if (e.key === "Escape") onCancel();
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [onCancel]);
-  const setArg = (idx, next) => setArgs((prev) => prev.map((a, i) => i === idx ? next : a));
-  const dropInto = (idx) => (e) => {
-    const ref = e.dataTransfer.getData("application/x-fx-insert");
-    if (!ref) return;
+  const current = callAt(draft, path);
+  const signature = current ? resolveCall?.(current.name) : void 0;
+  const names = signature?.args ?? [];
+  const args = current ? current.args.length ? current.args : [""] : [];
+  const crumbs = [];
+  for (let i = 0; i <= path.length; i++) {
+    const at = callAt(draft, path.slice(0, i));
+    if (at) crumbs.push({ label: nameOf(at.name), path: path.slice(0, i) });
+  }
+  const setArg = (index, next) => setDraft((d) => replaceArgument(d, [...path, index], next));
+  const dropInto = (index) => (e) => {
+    const dropped = e.dataTransfer.getData("application/x-fx-insert");
+    if (!dropped) return;
     e.preventDefault();
-    setArg(idx, ref);
+    e.stopPropagation();
+    const kind = e.dataTransfer.getData("application/x-fx-type");
+    const bare = dropped.startsWith("{{") && dropped.endsWith("}}") ? dropped.slice(2, -2).trim() : dropped;
+    setDraft((d) => replaceArgument(d, [...path, index], bare));
+    if (kind === "function" || parseCall(bare)) setPath((pth) => [...pth, index]);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)(
     "div",
@@ -41896,49 +41955,122 @@ function CallEditor({
       className: "ods-expression-field__editor",
       style: { top: rect.top, left: rect.left, width: rect.width },
       role: "dialog",
-      "aria-label": `Edit ${label}`,
+      "aria-label": `Edit ${crumbs[0]?.label ?? "function"}`,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { className: "ods-expression-field__editor-head", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("code", { children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("button", { type: "button", className: "ods-expression-field__editor-link", onClick: () => setRaw(raw === null ? formatCall(name, args) : null), children: raw === null ? "Edit as text" : "Back to fields" })
-        ] }),
-        raw === null ? /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { className: "ods-expression-field__editor-rows", children: [
-          args.map((arg, idx) => (
-            // eslint-disable-next-line react/no-array-index-key
-            /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("label", { className: "ods-expression-field__editor-row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("span", { children: names[idx] ?? `argument ${idx + 1}` }),
-              /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
-                "input",
-                {
-                  value: arg,
-                  placeholder: "value, or drag one in",
-                  onChange: (e) => setArg(idx, e.target.value),
-                  onDragOver: (e) => {
-                    if (e.dataTransfer.types.includes("application/x-fx-insert")) e.preventDefault();
-                  },
-                  onDrop: dropInto(idx)
-                }
-              )
-            ] }, idx)
-          )),
+          /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("nav", { className: "ods-expression-field__editor-crumbs", "aria-label": "Nested functions", children: crumbs.map((crumb, i) => /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("span", { children: [
+            i > 0 && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("span", { "aria-hidden": "true", children: " \u203A " }),
+            /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+              "button",
+              {
+                type: "button",
+                disabled: i === crumbs.length - 1,
+                onClick: () => setPath(crumb.path),
+                children: crumb.label
+              }
+            )
+          ] }, crumb.path.join(".") || "root")) }),
           /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
             "button",
             {
               type: "button",
               className: "ods-expression-field__editor-link",
-              onClick: () => setArgs((prev) => [...prev, ""]),
-              children: "+ argument"
+              onClick: () => setRawMode((r) => !r),
+              children: rawMode ? "Back to fields" : "Edit as text"
             }
           )
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+        ] }),
+        rawMode ? /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
           "textarea",
           {
             className: "ods-expression-field__editor-raw",
-            value: raw,
+            value: draft,
             rows: 3,
-            onChange: (e) => setRaw(e.target.value)
+            "aria-label": "Expression",
+            onChange: (e) => setDraft(e.target.value)
           }
-        ),
+        ) : /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { className: "ods-expression-field__editor-rows", children: [
+          args.map((arg, index) => {
+            const kind = argumentKind(arg);
+            const rowLabel = names[index] ?? `argument ${index + 1}`;
+            const nested = kind === "call" ? parseCall(arg) : void 0;
+            return (
+              // eslint-disable-next-line react/no-array-index-key
+              /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { className: "ods-expression-field__editor-row", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("span", { id: `arg-${index}-label`, children: rowLabel }),
+                nested ? /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)(
+                  "div",
+                  {
+                    className: "ods-expression-field__editor-nested",
+                    onDragOver: (e) => {
+                      if (e.dataTransfer.types.includes("application/x-fx-insert")) e.preventDefault();
+                    },
+                    onDrop: dropInto(index),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("code", { children: argSummary(arg, nameOf) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("span", { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("button", { type: "button", onClick: () => setPath([...path, index]), children: "Open" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("button", { type: "button", onClick: () => setArg(index, ""), "aria-label": `Clear ${rowLabel}`, children: "Clear" })
+                      ] })
+                    ]
+                  }
+                ) : kind === "reference" ? (
+                  // A reference is a value from somewhere else — named, never
+                  // its raw `ods://…` path, here as much as in the field.
+                  /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)(
+                    "div",
+                    {
+                      className: "ods-expression-field__editor-ref",
+                      onDragOver: (e) => {
+                        if (e.dataTransfer.types.includes("application/x-fx-insert")) e.preventDefault();
+                      },
+                      onDrop: dropInto(index),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+                          "span",
+                          {
+                            className: "ods-expression-field__pill",
+                            title: arg,
+                            "aria-labelledby": `arg-${index}-label`,
+                            children: labelFor(arg.startsWith("ods://") ? `{{${arg}}}` : arg)
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("button", { type: "button", onClick: () => setArg(index, ""), "aria-label": `Clear ${rowLabel}`, children: "Clear" })
+                      ]
+                    }
+                  )
+                ) : /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+                  "input",
+                  {
+                    "aria-labelledby": `arg-${index}-label`,
+                    value: arg,
+                    placeholder: 'a value, "text", or drag one in',
+                    "data-kind": kind,
+                    onChange: (e) => setArg(index, e.target.value),
+                    onDragOver: (e) => {
+                      if (e.dataTransfer.types.includes("application/x-fx-insert")) e.preventDefault();
+                    },
+                    onDrop: dropInto(index)
+                  }
+                )
+              ] }, index)
+            );
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ods-expression-field__editor-link",
+              onClick: () => setDraft((d) => {
+                const at = callAt(d, path);
+                if (!at) return d;
+                const next = [...at.args, '""'];
+                return path.length === 0 ? formatCall(at.name, next) : replaceArgument(d, path, `${at.name}(${next.join(", ")})`);
+              }),
+              children: "+ argument"
+            }
+          )
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { className: "ods-expression-field__editor-foot", children: [
           /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("button", { type: "button", onClick: onCancel, children: "Cancel" }),
           /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
@@ -41946,11 +42078,7 @@ function CallEditor({
             {
               type: "button",
               className: "ods-expression-field__editor-primary",
-              onClick: () => {
-                if (raw === null) return onApply(args);
-                const parsed = parseCall(raw);
-                onApply(parsed ? parsed.args : splitArguments(raw));
-              },
+              onClick: () => onApply(draft),
               children: "Apply"
             }
           )