@octaviaflow/core 3.1.0-beta.102 → 3.1.0-beta.104

package/dist/index.cjs

@@ -41339,11 +41339,173 @@ ToolCard.displayName = "ToolCard";
 
 // src/components/ExpressionField/ExpressionField.tsx
 var import_react188 = require("react");
+
+// src/components/ExpressionField/parseExpression.ts
+var CALL_NAME_SOURCE = "(?:[A-Z_][A-Z0-9_]*|user\\.[A-Za-z_][A-Za-z0-9_]*)";
+var CALL_HEAD = new RegExp(`^(${CALL_NAME_SOURCE})\\s*\\(`);
+function wrappedRegions(value) {
+  const out = [];
+  let i = 0;
+  while (i < value.length) {
+    const open = value.indexOf("{{", i);
+    if (open === -1) break;
+    let depth = 0;
+    let quote = null;
+    let close = -1;
+    for (let j = open; j < value.length; j++) {
+      const ch = value[j];
+      if (quote) {
+        if (ch === quote) quote = null;
+        continue;
+      }
+      if (ch === '"' || ch === "'") {
+        quote = ch;
+        continue;
+      }
+      if (ch === "{" && value[j + 1] === "{") {
+        depth++;
+        j++;
+        continue;
+      }
+      if (ch === "}" && value[j + 1] === "}") {
+        depth--;
+        j++;
+        if (depth === 0) {
+          close = j;
+          break;
+        }
+      }
+    }
+    if (close === -1) break;
+    out.push({ start: open, end: close });
+    i = close + 1;
+  }
+  return out;
+}
+function splitArguments(argsText) {
+  const trimmed = argsText.trim();
+  if (!trimmed) return [];
+  const args = [];
+  let current = "";
+  let depth = 0;
+  let braces = 0;
+  let quote = null;
+  for (let i = 0; i < trimmed.length; i++) {
+    const ch = trimmed[i];
+    if (quote) {
+      current += ch;
+      if (ch === quote) quote = null;
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      quote = ch;
+      current += ch;
+      continue;
+    }
+    if (ch === "{" && trimmed[i + 1] === "{") {
+      braces++;
+      current += "{{";
+      i++;
+      continue;
+    }
+    if (ch === "}" && trimmed[i + 1] === "}") {
+      braces--;
+      current += "}}";
+      i++;
+      continue;
+    }
+    if (ch === "(") depth++;
+    if (ch === ")") depth--;
+    if (ch === "," && depth === 0 && braces === 0) {
+      args.push(current.trim());
+      current = "";
+      continue;
+    }
+    current += ch;
+  }
+  if (current.trim()) args.push(current.trim());
+  return args;
+}
+function parseCall(raw) {
+  const inner = raw.startsWith("{{") && raw.endsWith("}}") ? raw.slice(2, -2).trim() : raw.trim();
+  const head = CALL_HEAD.exec(inner);
+  if (!head) return void 0;
+  const open = inner.indexOf("(");
+  const close = inner.lastIndexOf(")");
+  if (open === -1 || close < open) return void 0;
+  return { name: head[1], args: splitArguments(inner.slice(open + 1, close)) };
+}
+function formatCall(name, args) {
+  return `{{${name}(${args.filter((a) => a.trim() !== "").join(", ")})}}`;
+}
+function parseExpression(value, pillEveryToken = false) {
+  const segments = [];
+  let cursor = 0;
+  const pushText = (raw) => {
+    if (raw) segments.push({ kind: "text", raw });
+  };
+  for (const { start, end } of wrappedRegions(value)) {
+    pushText(value.slice(cursor, start));
+    const raw = value.slice(start, end + 1);
+    const call = parseCall(raw);
+    if (call) {
+      segments.push({ kind: "call", raw, name: call.name, args: call.args });
+    } else if (raw.startsWith("{{ods://") || pillEveryToken) {
+      segments.push({ kind: "ref", raw });
+    } else {
+      pushText(raw);
+    }
+    cursor = end + 1;
+  }
+  const tail = value.slice(cursor);
+  let last = 0;
+  for (const m of tail.matchAll(/\$\{[^}]+\}/g)) {
+    pushText(tail.slice(last, m.index));
+    segments.push({ kind: "ref", raw: m[0] });
+    last = (m.index ?? 0) + m[0].length;
+  }
+  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");
-var REF_TOKEN = /(\{\{ods:\/\/[^}]+\}\}|\$\{[^}]+\})/g;
-var ANY_TOKEN = /(\{\{[^}]+\}\}|\$\{[^}]+\})/g;
-var CALL_TOKEN = /^\{\{\s*(?:[A-Z_][A-Z0-9_]*|user\.[A-Za-z_][A-Za-z0-9_]*)\s*\(/;
 var ZERO_WIDTH = "\u200B";
+var PILL = "ods-expression-field__pill";
+var CHIP = "ods-expression-field__chip";
 function shortReferenceLabel(token) {
   if (token.startsWith("{{ods://")) {
     const path = token.slice(8, -2);
@@ -41365,7 +41527,7 @@ function serialize(el) {
     }
     if (node.nodeType !== Node.ELEMENT_NODE) return;
     const elem = node;
-    if (elem.classList.contains("ods-expression-field__pill")) {
+    if (elem.classList.contains(PILL) || elem.classList.contains(CHIP)) {
       out += elem.getAttribute("data-value") || "";
     } else if (elem.tagName === "BR") {
       out += "\n";
@@ -41396,6 +41558,19 @@ function insideCallArguments(textBeforeCaret) {
   }
   return depth > 0;
 }
+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);
+  }
+  return trimmed;
+}
 function ExpressionField({
   value,
   onChange,
@@ -41408,6 +41583,7 @@ function ExpressionField({
   className,
   style,
   resolveLabel,
+  resolveCall,
   pillEveryToken = false,
   "aria-label": ariaLabel
 }) {
@@ -41416,28 +41592,42 @@ function ExpressionField({
   const generatedId = (0, import_react188.useId)();
   const fieldId = id ?? generatedId;
   const helperId = `${fieldId}-helper`;
-  const splitPattern = pillEveryToken ? ANY_TOKEN : REF_TOKEN;
-  const isPillToken = (0, import_react188.useCallback)(
-    (part) => {
-      if (CALL_TOKEN.test(part)) return false;
-      return pillEveryToken ? /^(\{\{[^}]+\}\}|\$\{[^}]+\})$/.test(part) : /^(\{\{ods:\/\/[^}]+\}\}|\$\{[^}]+\})$/.test(part);
-    },
-    [pillEveryToken]
-  );
+  const [editing, setEditing] = (0, import_react188.useState)(null);
   const labelFor = (0, import_react188.useCallback)(
     (token) => resolveLabel?.(token) ?? shortReferenceLabel(token),
     [resolveLabel]
   );
-  const makePill = (0, import_react188.useCallback)(
-    (token) => {
-      const pill = document.createElement("span");
-      pill.className = "ods-expression-field__pill";
-      pill.contentEditable = "false";
-      pill.setAttribute("data-value", token);
-      pill.textContent = labelFor(token);
-      return pill;
+  const callLabel = (0, import_react188.useCallback)(
+    (name) => resolveCall?.(name)?.label ?? (name.startsWith("user.") ? name.slice(5) : name),
+    [resolveCall]
+  );
+  const chipText = (0, import_react188.useCallback)(
+    (name, args) => {
+      const summary = args.map((a) => argSummary(a, callLabel)).filter(Boolean).join(", ");
+      return `${callLabel(name)}(${summary})`;
     },
-    [labelFor]
+    [callLabel]
+  );
+  const makeToken = (0, import_react188.useCallback)(
+    (segment) => {
+      if (segment.kind === "text") return null;
+      const el = document.createElement("span");
+      el.contentEditable = "false";
+      el.setAttribute("data-value", segment.raw);
+      el.tabIndex = -1;
+      if (segment.kind === "ref") {
+        el.className = PILL;
+        el.textContent = labelFor(segment.raw);
+        el.title = segment.raw;
+      } else {
+        el.className = CHIP;
+        el.setAttribute("data-call", segment.name);
+        el.textContent = chipText(segment.name, segment.args);
+        el.title = segment.raw;
+      }
+      return el;
+    },
+    [labelFor, chipText]
   );
   const render = (0, import_react188.useCallback)(
     (raw) => {
@@ -41445,17 +41635,19 @@ function ExpressionField({
       if (!el) return;
       el.innerHTML = "";
       if (!raw) return;
-      raw.split(new RegExp(splitPattern.source, "g")).forEach((part) => {
-        if (!part) return;
-        if (isPillToken(part)) {
-          el.appendChild(makePill(part));
+      for (const segment of parseExpression(raw, pillEveryToken)) {
+        if (segment.kind === "text") {
+          el.appendChild(document.createTextNode(segment.raw));
+          continue;
+        }
+        const token = makeToken(segment);
+        if (token) {
+          el.appendChild(token);
           el.appendChild(document.createTextNode(ZERO_WIDTH));
-        } else {
-          el.appendChild(document.createTextNode(part));
         }
-      });
+      }
     },
-    [splitPattern, isPillToken, makePill]
+    [pillEveryToken, makeToken]
   );
   (0, import_react188.useEffect)(() => {
     if (fromSelf.current) {
@@ -41476,9 +41668,8 @@ function ExpressionField({
     if (!el || !sel || sel.rangeCount === 0 || !el.contains(sel.anchorNode)) return "";
     const range = sel.getRangeAt(0).cloneRange();
     range.setStart(el, 0);
-    const fragment = range.cloneContents();
     const holder = document.createElement("div");
-    holder.appendChild(fragment);
+    holder.appendChild(range.cloneContents());
     return serialize(holder);
   }, []);
   const insert = (0, import_react188.useCallback)(
@@ -41488,9 +41679,19 @@ function ExpressionField({
       const sel = window.getSelection();
       const hasCaret = !!sel && sel.rangeCount > 0 && el.contains(sel.anchorNode);
       const asArgument = hasCaret && insideCallArguments(textBeforeCaret());
-      const isCall = kind === "function" || /\(\s*\)?\s*$/.test(raw.trim());
-      const text = isCall ? raw : asArgument ? raw : raw.startsWith("ods://") ? `{{${raw}}}` : raw;
-      const node = !isCall && !asArgument && (text.startsWith("{{") || text.startsWith("${")) ? makePill(text) : document.createTextNode(text);
+      const call = parseCall(raw);
+      const isCall = kind === "function" || !!call;
+      const text = isCall || asArgument ? raw : raw.startsWith("ods://") ? `{{${raw}}}` : raw;
+      let node;
+      if (asArgument) {
+        node = document.createTextNode(text);
+      } else if (isCall && call) {
+        node = makeToken({ kind: "call", raw: text, name: call.name, args: call.args });
+      } else if (text.startsWith("{{") || text.startsWith("${")) {
+        node = makeToken({ kind: "ref", raw: text });
+      } else {
+        node = document.createTextNode(text);
+      }
       const range = hasCaret && sel ? sel.getRangeAt(0) : (() => {
         const r = document.createRange();
         r.selectNodeContents(el);
@@ -41502,27 +41703,113 @@ function ExpressionField({
       const after = document.createTextNode(ZERO_WIDTH);
       range.setStartAfter(node);
       range.insertNode(after);
-      if (node.nodeType === Node.TEXT_NODE && isCall) {
-        const open = text.lastIndexOf("(");
-        const close = text.lastIndexOf(")");
-        if (open !== -1 && close === open + 1) {
-          range.setStart(node, open + 1);
-          range.collapse(true);
-        } else {
-          range.setStartAfter(after);
-          range.collapse(true);
-        }
-      } else {
-        range.setStartAfter(after);
-        range.collapse(true);
-      }
+      range.setStartAfter(after);
+      range.collapse(true);
       el.focus();
       const selection = window.getSelection();
       selection?.removeAllRanges();
       selection?.addRange(range);
       commit();
+      if (isCall && call && node instanceof HTMLElement && call.args.length === 0) {
+        openEditor(node);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [commit, disabled, makeToken, textBeforeCaret]
+  );
+  const selected = (0, import_react188.useRef)(null);
+  const selectToken = (0, import_react188.useCallback)((token) => {
+    selected.current = token;
+    const range = document.createRange();
+    range.selectNode(token);
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+    fieldRef.current?.focus();
+  }, []);
+  const openEditor = (0, import_react188.useCallback)((chip) => {
+    const raw = chip.getAttribute("data-value") ?? "";
+    if (!parseCall(raw)) return;
+    const box = chip.getBoundingClientRect();
+    const host = fieldRef.current?.getBoundingClientRect();
+    setEditing({
+      el: chip,
+      raw,
+      rect: {
+        top: box.bottom - (host?.top ?? 0) + 4,
+        left: Math.max(0, box.left - (host?.left ?? 0)),
+        width: Math.max(300, box.width)
+      }
+    });
+  }, []);
+  const applyEditor = (0, import_react188.useCallback)(
+    (raw) => {
+      if (!editing) return;
+      const call = parseCall(raw);
+      if (!call) return;
+      editing.el.setAttribute("data-value", raw);
+      editing.el.textContent = chipText(call.name, call.args);
+      editing.el.title = raw;
+      setEditing(null);
+      commit();
+      fieldRef.current?.focus();
+    },
+    [editing, chipText, commit]
+  );
+  const handleClick = (0, import_react188.useCallback)(
+    (e) => {
+      const target = e.target.closest(`.${PILL}, .${CHIP}`);
+      if (!target) return;
+      selectToken(target);
+      if (!disabled && target.classList.contains(CHIP) && e.detail >= 2) {
+        openEditor(target);
+      }
+    },
+    [disabled, openEditor, selectToken]
+  );
+  const handleCopy = (0, import_react188.useCallback)(
+    (e, cut = false) => {
+      const sel = window.getSelection();
+      if (!sel || sel.rangeCount === 0) return;
+      const holder = document.createElement("div");
+      holder.appendChild(sel.getRangeAt(0).cloneContents());
+      const token = selected.current;
+      const text = serialize(holder) || (token && fieldRef.current?.contains(token) && sel.containsNode(token, true) ? token.getAttribute("data-value") ?? "" : "");
+      if (!text) return;
+      e.preventDefault();
+      e.clipboardData.setData("text/plain", text);
+      if (cut && !disabled) {
+        if (serialize(holder)) sel.getRangeAt(0).deleteContents();
+        else token?.remove();
+        commit();
+      }
+    },
+    [commit, disabled]
+  );
+  const handlePaste = (0, import_react188.useCallback)(
+    (e) => {
+      e.preventDefault();
+      const text = e.clipboardData.getData("text/plain");
+      if (!text) return;
+      document.execCommand("insertText", false, text);
+      const next = serialize(fieldRef.current);
+      fromSelf.current = false;
+      onChange(next);
     },
-    [commit, disabled, makePill, textBeforeCaret]
+    [onChange]
+  );
+  const handleKeyDown = (0, import_react188.useCallback)(
+    (e) => {
+      if (e.key !== "Enter" || !e.metaKey) return;
+      const sel = window.getSelection();
+      const node = sel?.anchorNode;
+      const chip = node instanceof HTMLElement ? node.closest(`.${CHIP}`) : node?.parentElement?.closest(`.${CHIP}`) ?? null;
+      if (chip) {
+        e.preventDefault();
+        openEditor(chip);
+      }
+    },
+    [openEditor]
   );
   const handleDragOver = (0, import_react188.useCallback)(
     (e) => {
@@ -41549,42 +41836,244 @@ function ExpressionField({
     },
     [disabled, insert]
   );
-  const handlePaste = (0, import_react188.useCallback)((e) => {
-    e.preventDefault();
-    const text = e.clipboardData.getData("text/plain");
-    document.execCommand("insertText", false, text);
-  }, []);
+  const handleBlur = (0, import_react188.useCallback)(() => {
+    const el = fieldRef.current;
+    if (!el) return;
+    const next = serialize(el);
+    if (next !== value) {
+      fromSelf.current = true;
+      onChange(next);
+    }
+    if (!editing) render(next);
+  }, [editing, onChange, render, value]);
   return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { className: cn("ods-expression-field", className), style, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("label", { className: "ods-expression-field__label", htmlFor: fieldId, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
-      "div",
-      {
-        id: fieldId,
-        ref: fieldRef,
-        role: "textbox",
-        "aria-multiline": "true",
-        "aria-label": ariaLabel ?? (typeof label === "string" ? label : void 0),
-        "aria-describedby": helperText ? helperId : void 0,
-        "aria-disabled": disabled || void 0,
-        contentEditable: !disabled,
-        suppressContentEditableWarning: true,
-        "data-placeholder": placeholder,
-        className: cn(
-          "ods-expression-field__input",
-          disabled && "ods-expression-field__input--disabled"
-        ),
-        style: { minHeight: `${Math.max(1, rows) * 1.5 + 1}rem` },
-        onInput: commit,
-        onBlur: commit,
-        onDragOver: handleDragOver,
-        onDragLeave: handleDragLeave,
-        onDrop: handleDrop,
-        onPaste: handlePaste
-      }
-    ),
+    /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { className: "ods-expression-field__body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+        "div",
+        {
+          id: fieldId,
+          ref: fieldRef,
+          role: "textbox",
+          "aria-multiline": "true",
+          "aria-label": ariaLabel ?? (typeof label === "string" ? label : void 0),
+          "aria-describedby": helperText ? helperId : void 0,
+          "aria-disabled": disabled || void 0,
+          contentEditable: !disabled,
+          suppressContentEditableWarning: true,
+          "data-placeholder": placeholder,
+          className: cn(
+            "ods-expression-field__input",
+            disabled && "ods-expression-field__input--disabled"
+          ),
+          style: { minHeight: `${Math.max(1, rows) * 1.5 + 1}rem` },
+          onInput: commit,
+          onBlur: handleBlur,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          onCopy: handleCopy,
+          onCut: (e) => handleCopy(e, true),
+          onPaste: handlePaste,
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          onDrop: handleDrop
+        }
+      ),
+      editing && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+        CallEditor,
+        {
+          raw: editing.raw,
+          rect: editing.rect,
+          nameOf: callLabel,
+          labelFor,
+          resolveCall,
+          onCancel: () => setEditing(null),
+          onApply: applyEditor
+        }
+      )
+    ] }),
     helperText && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("span", { id: helperId, className: "ods-expression-field__helper", children: helperText })
   ] });
 }
+function CallEditor({
+  raw,
+  rect,
+  nameOf,
+  labelFor,
+  resolveCall,
+  onApply,
+  onCancel
+}) {
+  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)(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") onCancel();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onCancel]);
+  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();
+    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",
+    {
+      ref: panelRef,
+      className: "ods-expression-field__editor",
+      style: { top: rect.top, left: rect.left, width: rect.width },
+      role: "dialog",
+      "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)("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: () => setRawMode((r) => !r),
+              children: rawMode ? "Back to fields" : "Edit as text"
+            }
+          )
+        ] }),
+        rawMode ? /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+          "textarea",
+          {
+            className: "ods-expression-field__editor-raw",
+            value: draft,
+            rows: 3,
+            "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)(
+            "button",
+            {
+              type: "button",
+              className: "ods-expression-field__editor-primary",
+              onClick: () => onApply(draft),
+              children: "Apply"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 
 // src/components/TopBar/TopBar.tsx
 var import_jsx_runtime175 = require("react/jsx-runtime");