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

package/dist/index.js

@@ -34425,13 +34425,176 @@ import {
   useCallback as useCallback50,
   useEffect as useEffect56,
   useId as useId61,
-  useRef as useRef50
+  useRef as useRef50,
+  useState as useState71
 } from "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
 import { jsx as jsx147, jsxs as jsxs141 } from "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);
@@ -34453,7 +34616,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";
@@ -34484,6 +34647,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,
@@ -34496,6 +34672,7 @@ function ExpressionField({
   className,
   style,
   resolveLabel,
+  resolveCall,
   pillEveryToken = false,
   "aria-label": ariaLabel
 }) {
@@ -34504,28 +34681,42 @@ function ExpressionField({
   const generatedId = useId61();
   const fieldId = id ?? generatedId;
   const helperId = `${fieldId}-helper`;
-  const splitPattern = pillEveryToken ? ANY_TOKEN : REF_TOKEN;
-  const isPillToken = useCallback50(
-    (part) => {
-      if (CALL_TOKEN.test(part)) return false;
-      return pillEveryToken ? /^(\{\{[^}]+\}\}|\$\{[^}]+\})$/.test(part) : /^(\{\{ods:\/\/[^}]+\}\}|\$\{[^}]+\})$/.test(part);
-    },
-    [pillEveryToken]
-  );
+  const [editing, setEditing] = useState71(null);
   const labelFor = useCallback50(
     (token) => resolveLabel?.(token) ?? shortReferenceLabel(token),
     [resolveLabel]
   );
-  const makePill = useCallback50(
-    (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 = useCallback50(
+    (name) => resolveCall?.(name)?.label ?? (name.startsWith("user.") ? name.slice(5) : name),
+    [resolveCall]
+  );
+  const chipText = useCallback50(
+    (name, args) => {
+      const summary = args.map((a) => argSummary(a, callLabel)).filter(Boolean).join(", ");
+      return `${callLabel(name)}(${summary})`;
     },
-    [labelFor]
+    [callLabel]
+  );
+  const makeToken = useCallback50(
+    (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 = useCallback50(
     (raw) => {
@@ -34533,17 +34724,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]
   );
   useEffect56(() => {
     if (fromSelf.current) {
@@ -34564,9 +34757,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 = useCallback50(
@@ -34576,9 +34768,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);
@@ -34590,27 +34792,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 = useRef50(null);
+  const selectToken = useCallback50((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 = useCallback50((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 = useCallback50(
+    (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 = useCallback50(
+    (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 = useCallback50(
+    (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 = useCallback50(
+    (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);
+    },
+    [onChange]
+  );
+  const handleKeyDown = useCallback50(
+    (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);
+      }
     },
-    [commit, disabled, makePill, textBeforeCaret]
+    [openEditor]
   );
   const handleDragOver = useCallback50(
     (e) => {
@@ -34637,42 +34925,244 @@ function ExpressionField({
     },
     [disabled, insert]
   );
-  const handlePaste = useCallback50((e) => {
-    e.preventDefault();
-    const text = e.clipboardData.getData("text/plain");
-    document.execCommand("insertText", false, text);
-  }, []);
+  const handleBlur = useCallback50(() => {
+    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__ */ jsxs141("div", { className: cn("ods-expression-field", className), style, children: [
     label && /* @__PURE__ */ jsx147("label", { className: "ods-expression-field__label", htmlFor: fieldId, children: label }),
-    /* @__PURE__ */ jsx147(
-      "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__ */ jsxs141("div", { className: "ods-expression-field__body", children: [
+      /* @__PURE__ */ jsx147(
+        "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__ */ jsx147(
+        CallEditor,
+        {
+          raw: editing.raw,
+          rect: editing.rect,
+          nameOf: callLabel,
+          labelFor,
+          resolveCall,
+          onCancel: () => setEditing(null),
+          onApply: applyEditor
+        }
+      )
+    ] }),
     helperText && /* @__PURE__ */ jsx147("span", { id: helperId, className: "ods-expression-field__helper", children: helperText })
   ] });
 }
+function CallEditor({
+  raw,
+  rect,
+  nameOf,
+  labelFor,
+  resolveCall,
+  onApply,
+  onCancel
+}) {
+  const [draft, setDraft] = useState71(raw);
+  const [path, setPath] = useState71([]);
+  const [rawMode, setRawMode] = useState71(false);
+  const panelRef = useRef50(null);
+  useEffect56(() => {
+    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__ */ jsxs141(
+    "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__ */ jsxs141("div", { className: "ods-expression-field__editor-head", children: [
+          /* @__PURE__ */ jsx147("nav", { className: "ods-expression-field__editor-crumbs", "aria-label": "Nested functions", children: crumbs.map((crumb, i) => /* @__PURE__ */ jsxs141("span", { children: [
+            i > 0 && /* @__PURE__ */ jsx147("span", { "aria-hidden": "true", children: " \u203A " }),
+            /* @__PURE__ */ jsx147(
+              "button",
+              {
+                type: "button",
+                disabled: i === crumbs.length - 1,
+                onClick: () => setPath(crumb.path),
+                children: crumb.label
+              }
+            )
+          ] }, crumb.path.join(".") || "root")) }),
+          /* @__PURE__ */ jsx147(
+            "button",
+            {
+              type: "button",
+              className: "ods-expression-field__editor-link",
+              onClick: () => setRawMode((r) => !r),
+              children: rawMode ? "Back to fields" : "Edit as text"
+            }
+          )
+        ] }),
+        rawMode ? /* @__PURE__ */ jsx147(
+          "textarea",
+          {
+            className: "ods-expression-field__editor-raw",
+            value: draft,
+            rows: 3,
+            "aria-label": "Expression",
+            onChange: (e) => setDraft(e.target.value)
+          }
+        ) : /* @__PURE__ */ jsxs141("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__ */ jsxs141("div", { className: "ods-expression-field__editor-row", children: [
+                /* @__PURE__ */ jsx147("span", { id: `arg-${index}-label`, children: rowLabel }),
+                nested ? /* @__PURE__ */ jsxs141(
+                  "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__ */ jsx147("code", { children: argSummary(arg, nameOf) }),
+                      /* @__PURE__ */ jsxs141("span", { children: [
+                        /* @__PURE__ */ jsx147("button", { type: "button", onClick: () => setPath([...path, index]), children: "Open" }),
+                        /* @__PURE__ */ jsx147("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__ */ jsxs141(
+                    "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__ */ jsx147(
+                          "span",
+                          {
+                            className: "ods-expression-field__pill",
+                            title: arg,
+                            "aria-labelledby": `arg-${index}-label`,
+                            children: labelFor(arg.startsWith("ods://") ? `{{${arg}}}` : arg)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx147("button", { type: "button", onClick: () => setArg(index, ""), "aria-label": `Clear ${rowLabel}`, children: "Clear" })
+                      ]
+                    }
+                  )
+                ) : /* @__PURE__ */ jsx147(
+                  "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__ */ jsx147(
+            "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__ */ jsxs141("div", { className: "ods-expression-field__editor-foot", children: [
+          /* @__PURE__ */ jsx147("button", { type: "button", onClick: onCancel, children: "Cancel" }),
+          /* @__PURE__ */ jsx147(
+            "button",
+            {
+              type: "button",
+              className: "ods-expression-field__editor-primary",
+              onClick: () => onApply(draft),
+              children: "Apply"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 
 // src/components/TopBar/TopBar.tsx
 import { jsx as jsx148, jsxs as jsxs142 } from "react/jsx-runtime";
@@ -34761,7 +35251,7 @@ import {
   forwardRef as forwardRef97,
   useCallback as useCallback51,
   useId as useId62,
-  useState as useState71
+  useState as useState72
 } from "react";
 import {
   BuildToolIcon,
@@ -34807,7 +35297,7 @@ var TraceStep = forwardRef97(
     const baseId = providedId ?? `ods-trace-step-${reactId}`;
     const headId = `${baseId}-head`;
     const contentId = `${baseId}-content`;
-    const [uncontrolledOpen, setUncontrolledOpen] = useState71(defaultOpen);
+    const [uncontrolledOpen, setUncontrolledOpen] = useState72(defaultOpen);
     const isControlled = controlledOpen !== void 0;
     const open = isControlled ? controlledOpen : uncontrolledOpen;
     const canExpand = !!children;
@@ -35166,7 +35656,7 @@ var UserCard = forwardRef99(function UserCard2({
 UserCard.displayName = "UserCard";
 
 // src/components/WorkflowEditor/WorkflowEditor.tsx
-import { useCallback as useCallback53, useMemo as useMemo39, useState as useState72 } from "react";
+import { useCallback as useCallback53, useMemo as useMemo39, useState as useState73 } from "react";
 
 // src/hooks/useWorkflow.ts
 import { useCallback as useCallback52, useMemo as useMemo38, useReducer } from "react";
@@ -35934,10 +36424,10 @@ function WorkflowEditor({
 }) {
   const wf = useWorkflow(options2);
   const { workflow, dispatch, canUndo, canRedo, undo, redo } = wf;
-  const [uncontrolledLock, setUncontrolledLock] = useState72(false);
-  const [uncontrolledDrawer, setUncontrolledDrawer] = useState72(!!drawer);
-  const [uncontrolledHistory, setUncontrolledHistory] = useState72(false);
-  const [uncontrolledDebug, setUncontrolledDebug] = useState72(false);
+  const [uncontrolledLock, setUncontrolledLock] = useState73(false);
+  const [uncontrolledDrawer, setUncontrolledDrawer] = useState73(!!drawer);
+  const [uncontrolledHistory, setUncontrolledHistory] = useState73(false);
+  const [uncontrolledDebug, setUncontrolledDebug] = useState73(false);
   const isLockMode = controlledLockMode ?? uncontrolledLock;
   const isDrawerOpen = controlledDrawerOpen ?? uncontrolledDrawer;
   const isHistoryOpen = controlledHistoryOpen ?? uncontrolledHistory;
@@ -36028,7 +36518,7 @@ function WorkflowEditor({
     },
     [wf]
   );
-  const [canvasSize, setCanvasSize] = useState72({ w: 0, h: 0 });
+  const [canvasSize, setCanvasSize] = useState73({ w: 0, h: 0 });
   const handleCanvasRef = useCallback53((node) => {
     if (!node) return;
     setCanvasSize({ w: node.clientWidth, h: node.clientHeight });
@@ -36278,7 +36768,7 @@ import {
 } from "@octaviaflow/icons";
 
 // src/hooks/useWorkflowRuntime.ts
-import { useEffect as useEffect57, useState as useState73 } from "react";
+import { useEffect as useEffect57, useState as useState74 } from "react";
 function toMs2(t) {
   if (t == null) return null;
   return typeof t === "number" ? t : t.getTime();
@@ -36292,7 +36782,7 @@ function formatWorkflowRuntime(ms) {
   return h > 0 ? `${h}:${pad2(m)}:${pad2(sec)}` : `${pad2(m)}:${pad2(sec)}`;
 }
 function useWorkflowRuntime(startedAt, active) {
-  const [, force] = useState73(0);
+  const [, force] = useState74(0);
   useEffect57(() => {
     if (!active || startedAt == null) return;
     if (typeof window === "undefined") return;
@@ -36673,10 +37163,10 @@ function WorkflowHeaderExpanded({
 }
 
 // src/hooks/useBanner.ts
-import { useCallback as useCallback54, useEffect as useEffect58, useRef as useRef51, useState as useState74 } from "react";
+import { useCallback as useCallback54, useEffect as useEffect58, useRef as useRef51, useState as useState75 } from "react";
 function useBanner(options2 = {}) {
   const { defaultOpen = false, autoDismissAfter, onDismiss } = options2;
-  const [open, setOpen] = useState74(defaultOpen);
+  const [open, setOpen] = useState75(defaultOpen);
   const timerRef = useRef51(null);
   const onDismissRef = useRef51(onDismiss);
   useEffect58(() => {
@@ -36721,7 +37211,7 @@ function useBanner(options2 = {}) {
 }
 
 // src/hooks/useCallout.ts
-import { useCallback as useCallback55, useEffect as useEffect59, useState as useState75 } from "react";
+import { useCallback as useCallback55, useEffect as useEffect59, useState as useState76 } from "react";
 var STORAGE_PREFIX = "ods:callout:dismissed:";
 function readPersisted(key) {
   if (!key || typeof window === "undefined") return false;
@@ -36744,7 +37234,7 @@ function writePersisted(key, value) {
 }
 function useCallout(options2 = {}) {
   const { defaultOpen = true, persistKey, onDismiss } = options2;
-  const [open, setOpen] = useState75(defaultOpen);
+  const [open, setOpen] = useState76(defaultOpen);
   useEffect59(() => {
     if (persistKey && readPersisted(persistKey)) {
       setOpen(false);
@@ -36845,7 +37335,7 @@ function breakpointMinWidth(name) {
 }
 
 // src/hooks/useRating.ts
-import { useCallback as useCallback56, useState as useState76 } from "react";
+import { useCallback as useCallback56, useState as useState77 } from "react";
 function useRating({
   value: controlled,
   defaultValue = 0,
@@ -36853,7 +37343,7 @@ function useRating({
   step = 1,
   onChange
 } = {}) {
-  const [internal, setInternal] = useState76(defaultValue);
+  const [internal, setInternal] = useState77(defaultValue);
   const value = controlled ?? internal;
   const isControlled = controlled !== void 0;
   const clamp2 = useCallback56(
@@ -36882,7 +37372,7 @@ function useBinaryRating({
   defaultValue = null,
   onChange
 } = {}) {
-  const [internal, setInternal] = useState76(defaultValue);
+  const [internal, setInternal] = useState77(defaultValue);
   const value = controlled ?? internal;
   const isControlled = controlled !== void 0;
   const set = useCallback56(
@@ -36904,13 +37394,13 @@ function useBinaryRating({
 }
 
 // src/hooks/useTimeline.ts
-import { useCallback as useCallback57, useState as useState77 } from "react";
+import { useCallback as useCallback57, useState as useState78 } from "react";
 function useTimeline({
   items: controlled,
   defaultItems = [],
   onChange
 } = {}) {
-  const [internal, setInternal] = useState77(defaultItems);
+  const [internal, setInternal] = useState78(defaultItems);
   const items = controlled ?? internal;
   const isControlled = controlled !== void 0;
   const commit = useCallback57(
@@ -36970,7 +37460,7 @@ function useTimeline({
 }
 
 // src/hooks/useTraceTimeline.ts
-import { useCallback as useCallback58, useRef as useRef52, useState as useState78 } from "react";
+import { useCallback as useCallback58, useRef as useRef52, useState as useState79 } from "react";
 var GLOBAL_SEQ = 0;
 var generateId = () => `ods-trace-${Date.now().toString(36)}-${(GLOBAL_SEQ++).toString(36)}`;
 function useTraceTimeline({
@@ -36978,7 +37468,7 @@ function useTraceTimeline({
   defaultSteps = [],
   onChange
 } = {}) {
-  const [internal, setInternal] = useState78(defaultSteps);
+  const [internal, setInternal] = useState79(defaultSteps);
   const steps = controlled ?? internal;
   const isControlled = controlled !== void 0;
   const stepsRef = useRef52(steps);
@@ -38141,7 +38631,7 @@ DeliveryFrequencyControl.displayName = "DeliveryFrequencyControl";
 
 // src/notifications/components/EventCatalogPicker/EventCatalogPicker.tsx
 import { SearchIcon as SearchIcon16 } from "@octaviaflow/icons";
-import { useId as useId67, useMemo as useMemo41, useState as useState79 } from "react";
+import { useId as useId67, useMemo as useMemo41, useState as useState80 } from "react";
 
 // src/notifications/components/meta.tsx
 import {
@@ -38247,8 +38737,8 @@ function EventCatalogPicker({
 }) {
   const reactId = useId67();
   const baseId = id ?? `${reactId}-events`;
-  const [query, setQuery] = useState79("");
-  const [collapsed, setCollapsed] = useState79({});
+  const [query, setQuery] = useState80("");
+  const [collapsed, setCollapsed] = useState80({});
   const selected = useMemo41(() => new Set(value), [value]);
   const filtered = useMemo41(() => {
     const q2 = query.trim().toLowerCase();
@@ -38394,7 +38884,7 @@ EventCatalogPicker.displayName = "EventCatalogPicker";
 
 // src/notifications/components/NotificationBell/NotificationBell.tsx
 import { NotificationIcon as NotificationIcon2 } from "@octaviaflow/icons";
-import { useCallback as useCallback59, useState as useState81 } from "react";
+import { useCallback as useCallback59, useState as useState82 } from "react";
 
 // src/notifications/engine/inbox.ts
 function resolveInboxAction(item, catalog) {
@@ -38549,7 +39039,7 @@ NotificationDetailDialog.displayName = "NotificationDetailDialog";
 
 // src/notifications/components/NotificationInbox/NotificationInbox.tsx
 import { ArchiveIcon as ArchiveIcon3, CheckmarkIcon as CheckmarkIcon16, NotificationOffIcon } from "@octaviaflow/icons";
-import { useMemo as useMemo42, useState as useState80 } from "react";
+import { useMemo as useMemo42, useState as useState81 } from "react";
 import { Fragment as Fragment66, jsx as jsx161, jsxs as jsxs153 } from "react/jsx-runtime";
 var FILTER_OPTIONS = [
   { value: "all", label: "All" },
@@ -38576,13 +39066,13 @@ function NotificationInbox({
   now: now2,
   className
 }) {
-  const [internalFilter, setInternalFilter] = useState80(defaultFilter2);
+  const [internalFilter, setInternalFilter] = useState81(defaultFilter2);
   const activeFilter = filter ?? internalFilter;
   const setFilter = (f) => {
     if (filter === void 0) setInternalFilter(f);
     onFilterChange?.(f);
   };
-  const [detailItem, setDetailItem] = useState80(null);
+  const [detailItem, setDetailItem] = useState81(null);
   const unread = countUnread(items);
   const visible = useMemo42(() => {
     const list = filterInbox(items, activeFilter);
@@ -38749,7 +39239,7 @@ function NotificationBell({
   const unread = unreadCount ?? countUnread(items);
   const hasUnread = unread > 0;
   const countLabel = unread > 99 ? "99+" : String(unread);
-  const [internalOpen, setInternalOpen] = useState81(false);
+  const [internalOpen, setInternalOpen] = useState82(false);
   const isOpen = open ?? internalOpen;
   const setOpen = useCallback59(
     (next) => {
@@ -38758,7 +39248,7 @@ function NotificationBell({
     },
     [open, onOpenChange]
   );
-  const [detailItem, setDetailItem] = useState81(null);
+  const [detailItem, setDetailItem] = useState82(null);
   const handleOpenItem = (item, action) => {
     setOpen(false);
     if (action.kind === "modal") setDetailItem(item);
@@ -38958,7 +39448,7 @@ NotificationChannelCard.displayName = "NotificationChannelCard";
 
 // src/notifications/components/NotificationChannelDialog/NotificationChannelDialog.tsx
 import { SendIcon as SendIcon2 } from "@octaviaflow/icons";
-import { useEffect as useEffect61, useMemo as useMemo43, useState as useState83 } from "react";
+import { useEffect as useEffect61, useMemo as useMemo43, useState as useState84 } from "react";
 
 // src/notifications/engine/channels.ts
 var CONNECTED_CHANNEL_TYPES = [
@@ -39064,7 +39554,7 @@ function draftFromChannel(channel, fallbackType = "slack") {
 
 // src/notifications/components/NotificationChannelForm/NotificationChannelForm.tsx
 import { AddIcon as AddIcon6, CheckmarkFilledIcon as CheckmarkFilledIcon3, LaunchIcon as LaunchIcon2 } from "@octaviaflow/icons";
-import { useId as useId68, useState as useState82 } from "react";
+import { useId as useId68, useState as useState83 } from "react";
 import { jsx as jsx164, jsxs as jsxs156 } from "react/jsx-runtime";
 var DEFAULT_TYPES = [
   "slack",
@@ -39108,7 +39598,7 @@ function NotificationChannelForm({
   const baseId = id ?? `${reactId}-channel`;
   const typeMeta = CHANNEL_TYPE_META[value.type];
   const patch = (next) => onChange({ ...value, ...next });
-  const [touched, setTouched] = useState82({});
+  const [touched, setTouched] = useState83({});
   const touch = (field) => setTouched((t) => t[field] ? t : { ...t, [field]: true });
   const errorFor = (field) => errors?.[field] && (showAllErrors || touched[field]) ? errors[field] : void 0;
   const errorText = (field) => {
@@ -39124,7 +39614,7 @@ function NotificationChannelForm({
   const targetLabel = targetOptions?.find((o) => o.value === value.target)?.label;
   const summary = describeChannelDraft(value, instances, targetLabel);
   const suggestedLabel = suggestChannelLabel(value, instances, targetLabel);
-  const [recipientDraft, setRecipientDraft] = useState82("");
+  const [recipientDraft, setRecipientDraft] = useState83("");
   const recipients = value.recipients ?? [];
   const commitRecipient = () => {
     const parts = recipientDraft.split(/[,\s;]+/).map((s) => s.trim()).filter(Boolean);
@@ -39409,13 +39899,13 @@ function NotificationChannelDialog({
   className
 }) {
   const editing = Boolean(channel?.id);
-  const [draft, setDraft] = useState83(
+  const [draft, setDraft] = useState84(
     () => draftFromChannel(channel, initialType)
   );
-  const [submitted, setSubmitted] = useState83(false);
-  const [testing, setTesting] = useState83(false);
-  const [testResult, setTestResult] = useState83(null);
-  const [submitError, setSubmitError] = useState83(null);
+  const [submitted, setSubmitted] = useState84(false);
+  const [testing, setTesting] = useState84(false);
+  const [testResult, setTestResult] = useState84(null);
+  const [submitError, setSubmitError] = useState84(null);
   useEffect61(() => {
     if (!open) return;
     setDraft(draftFromChannel(channel, initialType));
@@ -39598,7 +40088,7 @@ NotificationChannelList.displayName = "NotificationChannelList";
 
 // src/notifications/components/NotificationPreferenceMatrix/NotificationPreferenceMatrix.tsx
 import { LockedIcon as LockedIcon2 } from "@octaviaflow/icons";
-import { useId as useId69, useMemo as useMemo44, useState as useState84 } from "react";
+import { useId as useId69, useMemo as useMemo44, useState as useState85 } from "react";
 
 // src/notifications/engine/preferences.ts
 var CRITICAL_CHANNELS = ["in_app", "email"];
@@ -39692,7 +40182,7 @@ function NotificationPreferenceMatrix({
     () => filterCatalog(catalog, personalAudiences(isAdmin)),
     [catalog, isAdmin]
   );
-  const [notice, setNotice] = useState84(null);
+  const [notice, setNotice] = useState85(null);
   const toggle = (eventKey, channel, on) => {
     const r = setPreference(value, catalog, eventKey, channel, on);
     if (r.blocked) {