@particle-academy/fancy-flow 0.41.0 → 0.43.0

package/dist/index.js

@@ -1,10 +1,10 @@
-import { removeNodes, removeEdges, cloneSubgraph, alignNodes, distributeNodes, reconnectEdge, assignToLane, removeFromLane, duplicateNode, setEdgeLabel, FlowCanvas } from './chunk-WOO4B7M5.js';
-export { ActionNode, DecisionNode, FlowCanvas, FlowViewer, NodeShell, OutputNode, SubgraphNode, TriggerNode, alignNodes, cloneSubgraph, defaultNodeTypes, distributeNodes, reconnectEdge } from './chunk-WOO4B7M5.js';
+import { removeNodes, removeEdges, cloneSubgraph, alignNodes, distributeNodes, reconnectEdge, assignToLane, removeFromLane, duplicateNode, setEdgeLabel, FlowCanvas } from './chunk-T3VQX3XB.js';
+export { ActionNode, DecisionNode, FlowCanvas, FlowViewer, NodeShell, OutputNode, SubgraphNode, TriggerNode, alignNodes, cloneSubgraph, defaultNodeTypes, distributeNodes, reconnectEdge } from './chunk-T3VQX3XB.js';
 import { useFlowState, useFlowRun, useFlowHistory, applyOutputsToNodes, applyStatusesToNodes } from './chunk-A6RFLGWV.js';
 export { applyOutputsToNodes, applyStatusesToNodes, createHistory, useFlowHistory, useFlowRun, useFlowState } from './chunk-A6RFLGWV.js';
 export { runCohort } from './chunk-QZTGV3ZL.js';
-import { buildNodeTypes, FlowEditorProvider, registerBuiltinKinds } from './chunk-UX65ML3J.js';
-export { ANY_PORT_TYPE, BUILTIN_KINDS, LaneNode, NoteNode, RegistryNode, buildNodeTypes, createConnectionValidator, defaultPortCompatibility, registerBuiltinKinds, useFlowEditor, useFlowEditorOptional } from './chunk-UX65ML3J.js';
+import { buildNodeTypes, FlowEditorProvider, registerBuiltinKinds } from './chunk-55KQS3LK.js';
+export { ANY_PORT_TYPE, BUILTIN_KINDS, LaneNode, NoteNode, RegistryNode, buildNodeTypes, createConnectionValidator, defaultPortCompatibility, registerBuiltinKinds, useFlowEditor, useFlowEditorOptional } from './chunk-55KQS3LK.js';
 import { ReactFlowProvider, useReactFlow, addEdge, applyEdgeChanges, applyNodeChanges, Position, Handle } from './chunk-OWENS2H5.js';
 export { LEGACY_PAUSE_PREFIXES, PAUSE_PREFIX, decodePause, encodePause, isPause, pauseForHuman } from './chunk-UEOE6B52.js';
 import './chunk-USL4FMFU.js';
@@ -109,6 +109,230 @@ function paletteDropHandlers(onDrop) {
     }
   };
 }
+
+// src/expressions/variables.ts
+var ROOT = "$json";
+function expr(path) {
+  return `{{ ${path} }}`;
+}
+function outputFieldsFor(node) {
+  const kindName = node.data?.kind ?? node.type;
+  if (!kindName) return [];
+  const kind = getNodeKind(kindName);
+  const shape = kind?.outputShape;
+  if (!shape) return [];
+  if (typeof shape === "function") {
+    try {
+      const config = node.data?.config ?? {};
+      return shape(config) ?? [];
+    } catch {
+      return [];
+    }
+  }
+  return shape;
+}
+function baseVariables() {
+  return [
+    { expression: expr(ROOT), path: ROOT, type: "unknown", description: "The whole incoming value." }
+  ];
+}
+function availableVariables(graph, nodeId) {
+  const out = baseVariables();
+  const seen = /* @__PURE__ */ new Set([ROOT]);
+  const byId = new Map(graph.nodes.map((n) => [n.id, n]));
+  const upstreamIds = graph.edges.filter((e) => e.target === nodeId).map((e) => e.source);
+  for (const id of upstreamIds) {
+    if (id === nodeId) continue;
+    const upstream = byId.get(id);
+    if (!upstream) continue;
+    const kindName = upstream.data?.kind ?? upstream.type;
+    const label = upstream.data?.label ?? (kindName ? getNodeKind(kindName)?.label : void 0);
+    for (const field of outputFieldsFor(upstream)) {
+      const path = `${ROOT}.${field.path}`;
+      if (seen.has(path)) continue;
+      seen.add(path);
+      out.push({
+        expression: expr(path),
+        path,
+        type: field.type,
+        description: field.description,
+        source: label
+      });
+    }
+  }
+  return out;
+}
+function describeExpressionGrammar() {
+  return {
+    forms: [
+      { syntax: "{{ $json }}", meaning: "The whole value arriving on this node's input." },
+      { syntax: "{{ $json.field }}", meaning: "One key of that value. Dot-paths nest: $json.user.email." },
+      { syntax: "{{ $input.field }}", meaning: "An alias for $json \u2014 the same value, either spelling." },
+      { syntax: "{{ in }}", meaning: "The input by its context key, rather than through the alias." }
+    ],
+    note: "Dot-paths only \u2014 no arithmetic, comparisons or function calls; anything else resolves to nothing. A field that is exactly one expression keeps the resolved value's type; mixed text interpolates as a string. fancy-flow's own runFlow does not interpolate: it hands config to your executor verbatim, and the fancy-flow-php runtime is what resolves these."
+  };
+}
+function findTrigger(text2, caret) {
+  const before = text2.slice(0, caret);
+  const open = before.lastIndexOf("{{");
+  if (open === -1) return null;
+  if (before.indexOf("}}", open) !== -1) return null;
+  return { open, query: before.slice(open + 2).trim() };
+}
+function filterVariables(vars, query) {
+  const q = query.trim().toLowerCase();
+  if (q === "") return vars;
+  return vars.filter((v) => v.path.toLowerCase().includes(q));
+}
+function applyCompletion(text2, caret, trigger, variable) {
+  const head = text2.slice(0, trigger.open);
+  const tail = text2.slice(caret);
+  return { value: `${head}${variable.expression}${tail}`, caret: head.length + variable.expression.length };
+}
+function ExpressionField({
+  value,
+  onChange,
+  placeholder,
+  rows = 2,
+  handle,
+  graph,
+  nodeId
+}) {
+  const ref = useRef(null);
+  const [trigger, setTrigger] = useState(null);
+  const [active, setActive] = useState(0);
+  const [showHelp, setShowHelp] = useState(false);
+  const variables = useMemo(
+    () => graph && nodeId ? availableVariables(graph, nodeId) : baseVariables(),
+    [graph, nodeId]
+  );
+  const matches = useMemo(
+    () => trigger ? filterVariables(variables, trigger.query) : [],
+    [trigger, variables]
+  );
+  const help = useMemo(() => describeExpressionGrammar(), []);
+  const open = trigger !== null && matches.length > 0;
+  const sync = (el) => {
+    const next = findTrigger(el.value, el.selectionStart ?? el.value.length);
+    setTrigger(next);
+    setActive(0);
+  };
+  const choose = (variable) => {
+    const el = ref.current;
+    if (!el || !trigger) return;
+    const { value: next, caret } = applyCompletion(
+      el.value,
+      el.selectionStart ?? el.value.length,
+      trigger,
+      variable
+    );
+    onChange(next);
+    setTrigger(null);
+    requestAnimationFrame(() => {
+      el.focus();
+      el.setSelectionRange(caret, caret);
+    });
+  };
+  const onKeyDown = (e) => {
+    if (!open) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActive((i) => (i + 1) % matches.length);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((i) => (i - 1 + matches.length) % matches.length);
+    } else if (e.key === "Enter" || e.key === "Tab") {
+      e.preventDefault();
+      choose(matches[active] ?? matches[0]);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setTrigger(null);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "ff-expression", "data-ff-expression": handle["data-ff-field"], children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ...handle,
+        ref,
+        className: "ff-panel__input ff-panel__input--expression",
+        rows,
+        value: value ?? "",
+        placeholder: placeholder ?? "{{ $json.field }}",
+        spellCheck: false,
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-autocomplete": "list",
+        "aria-controls": open ? `${handle.id ?? handle["data-ff-field"]}-vars` : void 0,
+        onChange: (e) => {
+          onChange(e.target.value);
+          sync(e.target);
+        },
+        onKeyDown,
+        onClick: (e) => sync(e.currentTarget),
+        onBlur: () => {
+          window.setTimeout(() => setTrigger(null), 120);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "ff-expression__bar", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "ff-expression__helpbtn",
+          "aria-expanded": showHelp,
+          onClick: () => setShowHelp((s) => !s),
+          children: [
+            "{{ }}",
+            " reference"
+          ]
+        }
+      ),
+      variables.length > 1 && /* @__PURE__ */ jsxs("span", { className: "ff-expression__hint", children: [
+        "type ",
+        /* @__PURE__ */ jsx("code", { children: "{{" }),
+        " for ",
+        variables.length,
+        " variables"
+      ] })
+    ] }),
+    open && /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: "ff-expression__menu",
+        id: `${handle.id ?? handle["data-ff-field"]}-vars`,
+        role: "listbox",
+        "data-ff-expression-menu": handle["data-ff-field"],
+        children: matches.map((v, i) => /* @__PURE__ */ jsx("li", { role: "option", "aria-selected": i === active, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: `ff-expression__option${i === active ? " is-active" : ""}`,
+            "data-ff-expression-option": v.path,
+            onMouseDown: (e) => {
+              e.preventDefault();
+              choose(v);
+            },
+            children: [
+              /* @__PURE__ */ jsx("code", { className: "ff-expression__path", children: v.path }),
+              v.source && /* @__PURE__ */ jsx("span", { className: "ff-expression__source", children: v.source }),
+              v.description && /* @__PURE__ */ jsx("span", { className: "ff-expression__desc", children: v.description })
+            ]
+          }
+        ) }, v.expression))
+      }
+    ),
+    showHelp && /* @__PURE__ */ jsxs("div", { className: "ff-expression__help", role: "note", "data-ff-expression-help": true, children: [
+      /* @__PURE__ */ jsx("dl", { children: help.forms.map((f) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx("code", { children: f.syntax }) }),
+        /* @__PURE__ */ jsx("dd", { children: f.meaning })
+      ] }, f.syntax)) }),
+      /* @__PURE__ */ jsx("p", { className: "ff-expression__note", children: help.note })
+    ] })
+  ] });
+}
 function ConfigFieldRenderer({
   field,
   value,
@@ -116,7 +340,9 @@ function ConfigFieldRenderer({
   id,
   renderCredentialField,
   renderDocumentField,
-  fieldRenderers
+  fieldRenderers,
+  graph,
+  nodeId
 }) {
   const handle = { id, "data-ff-field": field.key };
   const custom = fieldRenderers?.[field.type];
@@ -198,15 +424,14 @@ function ConfigFieldRenderer({
       return /* @__PURE__ */ jsx(JsonField, { value, onChange, rows: field.rows, handle });
     case "expression":
       return /* @__PURE__ */ jsx(
-        "textarea",
+        ExpressionField,
         {
-          ...handle,
-          className: "ff-panel__input ff-panel__input--expression",
-          rows: 2,
+          handle,
           value: value ?? "",
+          onChange,
           placeholder: field.example ?? "{{ $json.field }}",
-          spellCheck: false,
-          onChange: (e) => onChange(e.target.value)
+          graph,
+          nodeId
         }
       );
     case "credential":
@@ -233,7 +458,9 @@ function ConfigFieldRenderer({
           onChange,
           renderCredentialField,
           renderDocumentField,
-          fieldRenderers
+          fieldRenderers,
+          graph,
+          nodeId
         }
       );
     case "keyvalue":
@@ -286,6 +513,8 @@ function RepeaterField({
   field,
   value,
   onChange,
+  graph,
+  nodeId,
   renderCredentialField,
   renderDocumentField,
   fieldRenderers
@@ -366,6 +595,8 @@ function RepeaterField({
         /* @__PURE__ */ jsx(
           ConfigFieldRenderer,
           {
+            graph,
+            nodeId,
             field: sub,
             value: row[sub.key],
             onChange: (cell) => setCell(i, sub.key, cell),
@@ -480,7 +711,7 @@ function JsonField({
       return "";
     }
   }, [value]);
-  const [text, setText] = useState(serialized);
+  const [text2, setText] = useState(serialized);
   const [error, setError] = useState(null);
   const [touched, setTouched] = useState(false);
   const lastProps = useRef(serialized);
@@ -518,7 +749,7 @@ function JsonField({
         ...handle,
         className: "ff-panel__input ff-panel__input--json",
         rows: rows ?? 6,
-        value: text,
+        value: text2,
         spellCheck: false,
         "aria-invalid": showError || void 0,
         "aria-describedby": showError ? errorId : void 0,
@@ -547,6 +778,7 @@ function NodeConfigPanel({
   renderCredentialField,
   renderDocumentField,
   fieldRenderers,
+  graph,
   className,
   style
 }) {
@@ -652,7 +884,9 @@ function NodeConfigPanel({
             onChange: (v) => setConfigValue(field.key, v),
             renderCredentialField,
             renderDocumentField: documentField,
-            fieldRenderers
+            fieldRenderers,
+            graph,
+            nodeId: node.id
           }
         )
       ] }, field.key))
@@ -1395,8 +1629,8 @@ function FlowEditorInner({
           x: labelEdit.x,
           y: labelEdit.y,
           initial: flow.edges.find((e) => e.id === labelEdit.edgeId)?.label ?? "",
-          onCommit: (text) => {
-            api.setEdgeLabel(labelEdit.edgeId, text);
+          onCommit: (text2) => {
+            api.setEdgeLabel(labelEdit.edgeId, text2);
             setLabelEdit(null);
           },
           onCancel: () => setLabelEdit(null)
@@ -1416,6 +1650,7 @@ function FlowEditorInner({
           node: api.selected,
           onChange: api.updateNode,
           fieldRenderers,
+          graph: flow,
           onDelete: builtins.delete === false ? void 0 : (n) => api.deleteNodes([n.id])
         }
       ),
@@ -1500,7 +1735,7 @@ function EdgeLabelEditor({
   onCommit,
   onCancel
 }) {
-  const [text, setText] = useState(initial);
+  const [text2, setText] = useState(initial);
   const ref = useRef(null);
   useEffect(() => {
     ref.current?.focus();
@@ -1517,17 +1752,17 @@ function EdgeLabelEditor({
         {
           ref,
           className: "ff-panel__input",
-          value: text,
+          value: text2,
           placeholder: "Label this connection",
           "aria-label": "Connection label",
           "data-action": "edge-label-input",
           onChange: (e) => setText(e.target.value),
           onKeyDown: (e) => {
             e.stopPropagation();
-            if (e.key === "Enter") onCommit(text);
+            if (e.key === "Enter") onCommit(text2);
             if (e.key === "Escape") onCancel();
           },
-          onBlur: () => onCommit(text)
+          onBlur: () => onCommit(text2)
         }
       )
     }
@@ -1588,9 +1823,70 @@ var flowKeys = {
   run: (runId) => ["flow", "runs", runId]
 };
 
+// src/expressions/expr.ts
+var WHOLE = /^\{\{\s*([\s\S]*?)\s*\}\}$/;
+var EACH = /\{\{\s*([\s\S]*?)\s*\}\}/g;
+var FALSY_STRINGS = /* @__PURE__ */ new Set(["", "0", "false", "no", "off", "null"]);
+function resolvePath(path, context) {
+  const trimmed = path.trim();
+  if (trimmed === "") return null;
+  const segments = trimmed.split(".");
+  let cursor;
+  const head = segments[0];
+  if (head === "$json" || head === "$input") {
+    cursor = context !== null && typeof context === "object" && "in" in context ? context.in : context;
+    segments.shift();
+  } else {
+    cursor = context;
+  }
+  for (const segment of segments) {
+    if (cursor === null || cursor === void 0) return null;
+    if (typeof cursor !== "object") return null;
+    const next = cursor[segment];
+    if (next === void 0) return null;
+    cursor = next;
+  }
+  return cursor === void 0 ? null : cursor;
+}
+function evaluateExpression(template, context) {
+  if (typeof template !== "string") return template;
+  const whole = WHOLE.exec(template.trim());
+  if (whole) return resolvePath(whole[1] ?? "", context);
+  return template.replace(EACH, (_m, path) => stringify(resolvePath(path, context)));
+}
+function truthy(value) {
+  if (typeof value === "boolean") return value;
+  if (value === null || value === void 0) return false;
+  if (typeof value === "string") return !FALSY_STRINGS.has(value.trim().toLowerCase());
+  if (Array.isArray(value)) return value.length > 0;
+  if (typeof value === "number") return value !== 0;
+  return Boolean(value);
+}
+function text(value) {
+  return stringify(value);
+}
+function stringify(value) {
+  if (typeof value === "string") return value;
+  if (typeof value === "boolean") return value ? "true" : "false";
+  if (value === null || value === void 0) return "";
+  if (typeof value === "number" || typeof value === "bigint") return String(value);
+  try {
+    return JSON.stringify(value) ?? "";
+  } catch {
+    return "";
+  }
+}
+function evaluateConfig(config, context) {
+  const out = {};
+  for (const [key, value] of Object.entries(config)) {
+    out[key] = Array.isArray(value) ? value.map((v) => evaluateExpression(v, context)) : value !== null && typeof value === "object" ? evaluateConfig(value, context) : evaluateExpression(value, context);
+  }
+  return out;
+}
+
 // src/index.ts
 registerBuiltinKinds();
 
-export { ConfigFieldRenderer, FlowEditor, FlowRunControls, FlowRunFeed, NodeConfigPanel, NodePalette, NodePort, defineNode, flowKeys, flowLive, paletteDropHandlers };
+export { ConfigFieldRenderer, ExpressionField, FlowEditor, FlowRunControls, FlowRunFeed, NodeConfigPanel, NodePalette, NodePort, availableVariables, baseVariables, defineNode, describeExpressionGrammar, evaluateConfig, evaluateExpression, flowKeys, flowLive, outputFieldsFor, paletteDropHandlers, resolvePath, text, truthy };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map