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

package/dist/index.cjs

@@ -41339,11 +41339,140 @@ 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;
+}
+
+// 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 +41494,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 +41525,13 @@ function insideCallArguments(textBeforeCaret) {
   }
   return depth > 0;
 }
+function argSummary(arg) {
+  const trimmed = arg.trim();
+  if (trimmed.startsWith("{{") || trimmed.startsWith("ods://") || trimmed.startsWith("${")) {
+    return shortReferenceLabel(trimmed.startsWith("ods://") ? `{{${trimmed}}}` : trimmed);
+  }
+  return trimmed;
+}
 function ExpressionField({
   value,
   onChange,
@@ -41408,6 +41544,7 @@ function ExpressionField({
   className,
   style,
   resolveLabel,
+  resolveCall,
   pillEveryToken = false,
   "aria-label": ariaLabel
 }) {
@@ -41416,28 +41553,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(argSummary).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 +41596,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 +41629,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 +41640,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 +41664,114 @@ 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") ?? "";
+    const parsed = parseCall(raw);
+    if (!parsed) return;
+    const box = chip.getBoundingClientRect();
+    const host = fieldRef.current?.getBoundingClientRect();
+    setEditing({
+      el: chip,
+      name: parsed.name,
+      args: parsed.args.length ? parsed.args : [""],
+      rect: {
+        top: box.bottom - (host?.top ?? 0) + 4,
+        left: Math.max(0, box.left - (host?.left ?? 0)),
+        width: Math.max(260, box.width)
+      }
+    });
+  }, []);
+  const applyEditor = (0, import_react188.useCallback)(
+    (args) => {
+      if (!editing) return;
+      const raw = formatCall(editing.name, args);
+      editing.el.setAttribute("data-value", raw);
+      editing.el.textContent = chipText(editing.name, 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);
+      }
     },
-    [commit, disabled, makePill, textBeforeCaret]
+    [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);
+    },
+    [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 +41798,167 @@ 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,
+        {
+          name: editing.name,
+          label: callLabel(editing.name),
+          initialArgs: editing.args,
+          signature: resolveCall?.(editing.name),
+          rect: editing.rect,
+          onCancel: () => setEditing(null),
+          onApply: applyEditor
+        }
+      )
+    ] }),
     helperText && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("span", { id: helperId, className: "ods-expression-field__helper", children: helperText })
   ] });
 }
+function CallEditor({
+  name,
+  label,
+  initialArgs,
+  signature,
+  rect,
+  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 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;
+    e.preventDefault();
+    setArg(idx, ref);
+  };
+  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 ${label}`,
+      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)(
+            "button",
+            {
+              type: "button",
+              className: "ods-expression-field__editor-link",
+              onClick: () => setArgs((prev) => [...prev, ""]),
+              children: "+ argument"
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+          "textarea",
+          {
+            className: "ods-expression-field__editor-raw",
+            value: raw,
+            rows: 3,
+            onChange: (e) => setRaw(e.target.value)
+          }
+        ),
+        /* @__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: () => {
+                if (raw === null) return onApply(args);
+                const parsed = parseCall(raw);
+                onApply(parsed ? parsed.args : splitArguments(raw));
+              },
+              children: "Apply"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 
 // src/components/TopBar/TopBar.tsx
 var import_jsx_runtime175 = require("react/jsx-runtime");