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

package/dist/index.js

@@ -34556,6 +34556,39 @@ function parseExpression(value, pillEveryToken = false) {
   pushText(tail.slice(last));
   return segments;
 }
+function callAt(raw, path) {
+  let current = parseCall(raw);
+  for (const index of path) {
+    if (!current) return void 0;
+    const arg = current.args[index];
+    if (arg === void 0) return void 0;
+    current = parseCall(arg);
+  }
+  return current;
+}
+function formatNestedCall(name, args) {
+  return `${name}(${args.filter((a) => a.trim() !== "").join(", ")})`;
+}
+function replaceArgument(raw, path, next) {
+  if (path.length === 0) return next;
+  const [index, ...rest] = path;
+  const call = parseCall(raw);
+  if (!call || index === void 0 || index > call.args.length) return raw;
+  const args = [...call.args];
+  if (args[index] === void 0) args[index] = "";
+  args[index] = rest.length === 0 ? next : replaceArgument(args[index], rest, next);
+  const wrapped = raw.trim().startsWith("{{");
+  return wrapped ? formatCall(call.name, args) : formatNestedCall(call.name, args);
+}
+function argumentKind(arg) {
+  const trimmed = arg.trim();
+  if (!trimmed) return "literal";
+  if (parseCall(trimmed)) return "call";
+  if (trimmed.startsWith("{{") || trimmed.startsWith("ods://") || trimmed.startsWith("${")) {
+    return "reference";
+  }
+  return "literal";
+}
 
 // src/components/ExpressionField/ExpressionField.tsx
 import { jsx as jsx147, jsxs as jsxs141 } from "react/jsx-runtime";
@@ -34614,8 +34647,14 @@ function insideCallArguments(textBeforeCaret) {
   }
   return depth > 0;
 }
-function argSummary(arg) {
+function argSummary(arg, nameOf, depth = 2) {
   const trimmed = arg.trim();
+  const call = parseCall(trimmed);
+  if (call) {
+    if (depth <= 0) return `${nameOf(call.name)}(\u2026)`;
+    const inner = call.args.map((a) => argSummary(a, nameOf, depth - 1)).filter(Boolean).join(", ");
+    return `${nameOf(call.name)}(${inner})`;
+  }
   if (trimmed.startsWith("{{") || trimmed.startsWith("ods://") || trimmed.startsWith("${")) {
     return shortReferenceLabel(trimmed.startsWith("ods://") ? `{{${trimmed}}}` : trimmed);
   }
@@ -34653,7 +34692,7 @@ function ExpressionField({
   );
   const chipText = useCallback50(
     (name, args) => {
-      const summary = args.map(argSummary).filter(Boolean).join(", ");
+      const summary = args.map((a) => argSummary(a, callLabel)).filter(Boolean).join(", ");
       return `${callLabel(name)}(${summary})`;
     },
     [callLabel]
@@ -34672,8 +34711,18 @@ function ExpressionField({
       } else {
         el.className = CHIP;
         el.setAttribute("data-call", segment.name);
-        el.textContent = chipText(segment.name, segment.args);
         el.title = segment.raw;
+        const text = document.createElement("span");
+        text.className = "ods-expression-field__chip-text";
+        text.textContent = chipText(segment.name, segment.args);
+        el.appendChild(text);
+        const open = document.createElement("span");
+        open.className = "ods-expression-field__chip-open";
+        open.setAttribute("data-open", "true");
+        open.setAttribute("role", "button");
+        open.setAttribute("aria-label", "Edit arguments");
+        open.textContent = "\u2304";
+        el.appendChild(open);
       }
       return el;
     },
@@ -34779,27 +34828,28 @@ function ExpressionField({
   }, []);
   const openEditor = useCallback50((chip) => {
     const raw = chip.getAttribute("data-value") ?? "";
-    const parsed = parseCall(raw);
-    if (!parsed) return;
+    if (!parseCall(raw)) return;
     const box = chip.getBoundingClientRect();
     const host = fieldRef.current?.getBoundingClientRect();
     setEditing({
       el: chip,
-      name: parsed.name,
-      args: parsed.args.length ? parsed.args : [""],
+      raw,
       rect: {
         top: box.bottom - (host?.top ?? 0) + 4,
         left: Math.max(0, box.left - (host?.left ?? 0)),
-        width: Math.max(260, box.width)
+        width: Math.max(300, box.width)
       }
     });
   }, []);
   const applyEditor = useCallback50(
-    (args) => {
+    (raw) => {
       if (!editing) return;
-      const raw = formatCall(editing.name, args);
+      const call = parseCall(raw);
+      if (!call) return;
       editing.el.setAttribute("data-value", raw);
-      editing.el.textContent = chipText(editing.name, args);
+      const text = editing.el.querySelector(".ods-expression-field__chip-text");
+      if (text) text.textContent = chipText(call.name, call.args);
+      else editing.el.textContent = chipText(call.name, call.args);
       editing.el.title = raw;
       setEditing(null);
       commit();
@@ -34809,12 +34859,13 @@ function ExpressionField({
   );
   const handleClick = useCallback50(
     (e) => {
-      const target = e.target.closest(`.${PILL}, .${CHIP}`);
+      const node = e.target;
+      const target = node.closest(`.${PILL}, .${CHIP}`);
       if (!target) return;
-      selectToken(target);
-      if (!disabled && target.classList.contains(CHIP) && e.detail >= 2) {
-        openEditor(target);
-      }
+      const chipEl = target;
+      const wantsEditor = chipEl.classList.contains(CHIP) && (!!node.closest("[data-open]") || e.detail >= 2);
+      selectToken(chipEl);
+      if (!disabled && wantsEditor) openEditor(chipEl);
     },
     [disabled, openEditor, selectToken]
   );
@@ -34933,11 +34984,11 @@ function ExpressionField({
       editing && /* @__PURE__ */ jsx147(
         CallEditor,
         {
-          name: editing.name,
-          label: callLabel(editing.name),
-          initialArgs: editing.args,
-          signature: resolveCall?.(editing.name),
+          raw: editing.raw,
           rect: editing.rect,
+          nameOf: callLabel,
+          labelFor,
+          resolveCall,
           onCancel: () => setEditing(null),
           onApply: applyEditor
         }
@@ -34947,36 +34998,44 @@ function ExpressionField({
   ] });
 }
 function CallEditor({
-  name,
-  label,
-  initialArgs,
-  signature,
+  raw,
   rect,
+  nameOf,
+  labelFor,
+  resolveCall,
   onApply,
   onCancel
 }) {
-  const names = signature?.args ?? [];
-  const [args, setArgs] = useState71(() => {
-    const seeded = [...initialArgs];
-    while (seeded.length < names.length) seeded.push("");
-    return seeded.length ? seeded : [""];
-  });
-  const [raw, setRaw] = useState71(null);
+  const [draft, setDraft] = useState71(raw);
+  const [path, setPath] = useState71([]);
+  const [rawMode, setRawMode] = useState71(false);
   const panelRef = useRef50(null);
   useEffect56(() => {
-    panelRef.current?.querySelector("input")?.focus();
     const onKey = (e) => {
       if (e.key === "Escape") onCancel();
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [onCancel]);
-  const setArg = (idx, next) => setArgs((prev) => prev.map((a, i) => i === idx ? next : a));
-  const dropInto = (idx) => (e) => {
-    const ref = e.dataTransfer.getData("application/x-fx-insert");
-    if (!ref) return;
+  const current = callAt(draft, path);
+  const signature = current ? resolveCall?.(current.name) : void 0;
+  const names = signature?.args ?? [];
+  const args = current ? current.args.length ? current.args : [""] : [];
+  const crumbs = [];
+  for (let i = 0; i <= path.length; i++) {
+    const at = callAt(draft, path.slice(0, i));
+    if (at) crumbs.push({ label: nameOf(at.name), path: path.slice(0, i) });
+  }
+  const setArg = (index, next) => setDraft((d) => replaceArgument(d, [...path, index], next));
+  const dropInto = (index) => (e) => {
+    const dropped = e.dataTransfer.getData("application/x-fx-insert");
+    if (!dropped) return;
     e.preventDefault();
-    setArg(idx, ref);
+    e.stopPropagation();
+    const kind = e.dataTransfer.getData("application/x-fx-type");
+    const bare = dropped.startsWith("{{") && dropped.endsWith("}}") ? dropped.slice(2, -2).trim() : dropped;
+    setDraft((d) => replaceArgument(d, [...path, index], bare));
+    if (kind === "function" || parseCall(bare)) setPath((pth) => [...pth, index]);
   };
   return /* @__PURE__ */ jsxs141(
     "div",
@@ -34985,49 +35044,122 @@ function CallEditor({
       className: "ods-expression-field__editor",
       style: { top: rect.top, left: rect.left, width: rect.width },
       role: "dialog",
-      "aria-label": `Edit ${label}`,
+      "aria-label": `Edit ${crumbs[0]?.label ?? "function"}`,
       children: [
         /* @__PURE__ */ jsxs141("div", { className: "ods-expression-field__editor-head", children: [
-          /* @__PURE__ */ jsx147("code", { children: label }),
-          /* @__PURE__ */ jsx147("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__ */ jsxs141("div", { className: "ods-expression-field__editor-rows", children: [
-          args.map((arg, idx) => (
-            // eslint-disable-next-line react/no-array-index-key
-            /* @__PURE__ */ jsxs141("label", { className: "ods-expression-field__editor-row", children: [
-              /* @__PURE__ */ jsx147("span", { children: names[idx] ?? `argument ${idx + 1}` }),
-              /* @__PURE__ */ jsx147(
-                "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__ */ 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: () => setArgs((prev) => [...prev, ""]),
-              children: "+ argument"
+              onClick: () => setRawMode((r) => !r),
+              children: rawMode ? "Back to fields" : "Edit as text"
             }
           )
-        ] }) : /* @__PURE__ */ jsx147(
+        ] }),
+        rawMode ? /* @__PURE__ */ jsx147(
           "textarea",
           {
             className: "ods-expression-field__editor-raw",
-            value: raw,
+            value: draft,
             rows: 3,
-            onChange: (e) => setRaw(e.target.value)
+            "aria-label": "Expression",
+            onChange: (e) => setDraft(e.target.value)
           }
-        ),
+        ) : /* @__PURE__ */ 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(
@@ -35035,11 +35167,7 @@ function CallEditor({
             {
               type: "button",
               className: "ods-expression-field__editor-primary",
-              onClick: () => {
-                if (raw === null) return onApply(args);
-                const parsed = parseCall(raw);
-                onApply(parsed ? parsed.args : splitArguments(raw));
-              },
+              onClick: () => onApply(draft),
               children: "Apply"
             }
           )