@particle-academy/fancy-flow 0.40.4 → 0.42.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(text, caret) {
+  const before = text.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(text, caret, trigger, variable) {
+  const head = text.slice(0, trigger.open);
+  const tail = text.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];
@@ -195,18 +421,17 @@ function ConfigFieldRenderer({
         }
       );
     case "json":
-      return /* @__PURE__ */ jsx(JsonField, { value, onChange, rows: field.rows });
+      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":
@@ -227,16 +452,19 @@ function ConfigFieldRenderer({
       return /* @__PURE__ */ jsx(
         RepeaterField,
         {
+          id,
           field,
           value,
           onChange,
           renderCredentialField,
           renderDocumentField,
-          fieldRenderers
+          fieldRenderers,
+          graph,
+          nodeId
         }
       );
     case "keyvalue":
-      return /* @__PURE__ */ jsx(KeyValueField, { field, value, onChange });
+      return /* @__PURE__ */ jsx(KeyValueField, { id, field, value, onChange });
     case "document":
       if (renderDocumentField) {
         return /* @__PURE__ */ jsx(Fragment, { children: renderDocumentField({ documentType: field.documentType, value, onChange }) });
@@ -281,9 +509,12 @@ function ChoiceField({
   );
 }
 function RepeaterField({
+  id,
   field,
   value,
   onChange,
+  graph,
+  nodeId,
   renderCredentialField,
   renderDocumentField,
   fieldRenderers
@@ -315,7 +546,7 @@ function RepeaterField({
     if (typeof raw === "number" || typeof raw === "boolean") return String(raw);
     return `Item ${i + 1}`;
   };
-  return /* @__PURE__ */ jsxs("div", { className: "ff-repeater", "data-ff-repeater": field.key, children: [
+  return /* @__PURE__ */ jsxs("div", { id, role: "group", className: "ff-repeater", "data-ff-repeater": field.key, "data-ff-field": field.key, children: [
     rows.length === 0 && /* @__PURE__ */ jsx("p", { className: "ff-repeater__empty", children: "None yet." }),
     rows.map((row, i) => /* @__PURE__ */ jsxs("div", { className: "ff-repeater__row", "data-ff-repeater-row": i, children: [
       /* @__PURE__ */ jsxs("div", { className: "ff-repeater__row-head", children: [
@@ -364,6 +595,8 @@ function RepeaterField({
         /* @__PURE__ */ jsx(
           ConfigFieldRenderer,
           {
+            graph,
+            nodeId,
             field: sub,
             value: row[sub.key],
             onChange: (cell) => setCell(i, sub.key, cell),
@@ -390,6 +623,7 @@ function RepeaterField({
   ] });
 }
 function KeyValueField({
+  id,
   field,
   value,
   onChange
@@ -408,7 +642,7 @@ function KeyValueField({
   const setVal = (i, val) => commit(entries.map(([k, v], idx) => idx === i ? [k, val] : [k, v]));
   const remove = (i) => commit(entries.filter((_, idx) => idx !== i));
   const add = () => commit([...entries, ["", ""]]);
-  return /* @__PURE__ */ jsxs("div", { className: "ff-keyvalue", "data-ff-keyvalue": field.key, children: [
+  return /* @__PURE__ */ jsxs("div", { id, role: "group", className: "ff-keyvalue", "data-ff-keyvalue": field.key, "data-ff-field": field.key, children: [
     entries.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ff-keyvalue__head", children: [
       /* @__PURE__ */ jsx("span", { children: field.keyLabel ?? "Key" }),
       /* @__PURE__ */ jsx("span", { children: field.valueLabel ?? "Value" }),
@@ -464,34 +698,76 @@ function KeyValueField({
     ] })
   ] });
 }
-function JsonField({ value, onChange, rows }) {
-  const initial = useMemo(() => {
+function JsonField({
+  value,
+  onChange,
+  rows,
+  handle
+}) {
+  const serialized = useMemo(() => {
     try {
       return value === void 0 ? "" : JSON.stringify(value, null, 2);
     } catch {
       return "";
     }
   }, [value]);
-  return /* @__PURE__ */ jsx(
-    "textarea",
-    {
-      className: "ff-panel__input ff-panel__input--json",
-      rows: rows ?? 6,
-      defaultValue: initial,
-      spellCheck: false,
-      onBlur: (e) => {
-        const text = e.target.value.trim();
-        if (text === "") {
-          onChange(void 0);
-          return;
-        }
-        try {
-          onChange(JSON.parse(text));
-        } catch {
+  const [text, setText] = useState(serialized);
+  const [error, setError] = useState(null);
+  const [touched, setTouched] = useState(false);
+  const lastProps = useRef(serialized);
+  const committed = useRef(null);
+  if (serialized !== lastProps.current) {
+    lastProps.current = serialized;
+    if (serialized !== committed.current) {
+      setText(serialized);
+      setError(null);
+      setTouched(false);
+    }
+  }
+  const commit = (next) => {
+    const trimmed = next.trim();
+    if (trimmed === "") {
+      committed.current = "";
+      onChange(void 0);
+      return null;
+    }
+    try {
+      const parsed = JSON.parse(trimmed);
+      committed.current = JSON.stringify(parsed, null, 2);
+      onChange(parsed);
+      return null;
+    } catch (e) {
+      return e instanceof Error ? e.message : "Invalid JSON";
+    }
+  };
+  const errorId = handle.id ? `${handle.id}-error` : void 0;
+  const showError = touched && error !== null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ...handle,
+        className: "ff-panel__input ff-panel__input--json",
+        rows: rows ?? 6,
+        value: text,
+        spellCheck: false,
+        "aria-invalid": showError || void 0,
+        "aria-describedby": showError ? errorId : void 0,
+        onChange: (e) => {
+          setText(e.target.value);
+          setError(commit(e.target.value));
+        },
+        onBlur: (e) => {
+          setTouched(true);
+          setError(commit(e.target.value));
         }
       }
-    }
-  );
+    ),
+    showError && /* @__PURE__ */ jsxs("p", { className: "ff-panel__issue ff-panel__issue--field", id: errorId, role: "alert", children: [
+      "\u26A0 ",
+      error
+    ] })
+  ] });
 }
 function NodeConfigPanel({
   node,
@@ -502,6 +778,7 @@ function NodeConfigPanel({
   renderCredentialField,
   renderDocumentField,
   fieldRenderers,
+  graph,
   className,
   style
 }) {
@@ -607,7 +884,9 @@ function NodeConfigPanel({
             onChange: (v) => setConfigValue(field.key, v),
             renderCredentialField,
             renderDocumentField: documentField,
-            fieldRenderers
+            fieldRenderers,
+            graph,
+            nodeId: node.id
           }
         )
       ] }, field.key))
@@ -810,6 +1089,7 @@ function FlowEditorInner({
   metadata,
   showPalette = true,
   showPanel = true,
+  fieldRenderers,
   showFeed = true,
   extraToolbar,
   actions = [],
@@ -1369,6 +1649,8 @@ function FlowEditorInner({
           className: "ff-editor__panel",
           node: api.selected,
           onChange: api.updateNode,
+          fieldRenderers,
+          graph: flow,
           onDelete: builtins.delete === false ? void 0 : (n) => api.deleteNodes([n.id])
         }
       ),
@@ -1544,6 +1826,6 @@ var flowKeys = {
 // 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, flowKeys, flowLive, outputFieldsFor, paletteDropHandlers };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map