@octaviaflow/core 3.0.18-beta.9 → 3.1.0-beta.52

package/dist/workflow.cjs

@@ -26,11 +26,13 @@ __export(workflow_exports, {
   DEFAULT_NODE_HEIGHT: () => DEFAULT_NODE_HEIGHT,
   DEFAULT_NODE_KINDS: () => DEFAULT_NODE_KINDS,
   DEFAULT_NODE_WIDTH: () => DEFAULT_NODE_WIDTH,
+  DataRefButton: () => DataRefButton,
   ErrorNode: () => ErrorNode,
   FlowCanvas: () => FlowCanvas,
   FlowEdge: () => FlowEdge,
   FlowNode: () => FlowNode,
   ForEachNode: () => ForEachNode,
+  FxPanel: () => FxPanel,
   GroupNode: () => GroupNode,
   Handle: () => Handle,
   HttpRequestNode: () => HttpRequestNode,
@@ -560,6 +562,9 @@ function createElkEngine(elk, defaults = {}) {
         if (list) list.push(n);
         else childrenByParent.set(key, [n]);
       }
+      const engineOptions = Object.fromEntries(
+        Object.entries(options?.engine ?? {}).map(([k, v]) => [k, String(v)])
+      );
       const buildChildren = (parentId) => {
         const list = childrenByParent.get(parentId) ?? [];
         return list.map((n) => ({
@@ -571,7 +576,8 @@ function createElkEngine(elk, defaults = {}) {
             "elk.algorithm": algorithm,
             "elk.direction": ELK_DIRECTION[direction],
             "elk.spacing.nodeNode": String(nodeSpacing),
-            "elk.layered.spacing.nodeNodeBetweenLayers": String(rankSpacing)
+            "elk.layered.spacing.nodeNodeBetweenLayers": String(rankSpacing),
+            ...engineOptions
           } : void 0
         }));
       };
@@ -726,26 +732,27 @@ var SAVE_STATE_DOT = {
 function ConfigPanel({
   open = true,
   title,
-  kindLabel,
   icon,
+  headerActions,
   banner,
   tabs,
   activeTab: controlledActive,
   defaultActiveTab,
   onTabChange,
-  saveState = "clean",
+  saveState,
   onTitleChange,
   onClose,
   onSave,
   onCancel,
+  padding = 12,
   resizable = true,
-  defaultWidth = 360,
-  minWidth = 280,
+  defaultWidth = 400,
+  minWidth = 400,
   maxWidth = 720,
   maxWidthContainerInset = 80,
   variant = "pinned",
   children,
-  footer,
+  footerActions,
   className,
   style
 }) {
@@ -842,55 +849,53 @@ function ConfigPanel({
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "ods-flow-config-panel__header", children: [
-          kindLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ods-flow-config-panel__breadcrumb", children: kindLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ods-flow-config-panel__title-row", children: [
-            icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ods-flow-config-panel__icon", children: icon }),
-            editingTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "input",
-              {
-                className: "ods-flow-config-panel__title-input",
-                value: draftTitle,
-                autoFocus: true,
-                onChange: (e) => setDraftTitle(e.target.value),
-                onBlur: () => commitTitle(draftTitle),
-                onKeyDown: titleKeyDown,
-                "aria-label": "Edit title"
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "button",
-              {
-                type: "button",
-                className: "ods-flow-config-panel__title",
-                onDoubleClick: () => {
-                  if (!onTitleChange) return;
-                  setDraftTitle(title ?? "");
-                  setEditingTitle(true);
-                },
-                title: onTitleChange ? "Double-click to rename" : void 0,
-                children: title ?? "Untitled"
-              }
-            ),
-            onClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "button",
-              {
-                type: "button",
-                className: "ods-flow-config-panel__close",
-                onClick: onClose,
-                "aria-label": "Close panel",
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "path",
-                  {
-                    d: "M3 3l8 8M11 3l-8 8",
-                    stroke: "currentColor",
-                    strokeWidth: "1.5",
-                    strokeLinecap: "round"
-                  }
-                ) })
-              }
-            )
-          ] })
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("header", { className: "ods-flow-config-panel__header", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ods-flow-config-panel__title-row", children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ods-flow-config-panel__icon", children: icon }),
+          editingTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              className: "ods-flow-config-panel__title-input",
+              value: draftTitle,
+              autoFocus: true,
+              onChange: (e) => setDraftTitle(e.target.value),
+              onBlur: () => commitTitle(draftTitle),
+              onKeyDown: titleKeyDown,
+              "aria-label": "Edit title"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ods-flow-config-panel__title",
+              onDoubleClick: () => {
+                if (!onTitleChange) return;
+                setDraftTitle(title ?? "");
+                setEditingTitle(true);
+              },
+              title: onTitleChange ? "Double-click to rename" : void 0,
+              children: title ?? "Untitled"
+            }
+          ),
+          headerActions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ods-flow-config-panel__header-actions", children: headerActions }),
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ods-flow-config-panel__close",
+              onClick: onClose,
+              "aria-label": "Close panel",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "path",
+                {
+                  d: "M3 3l8 8M11 3l-8 8",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round"
+                }
+              ) })
+            }
+          )
+        ] }) }),
         tabs && tabs.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "ods-flow-config-panel__tabs", role: "tablist", children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "button",
           {
@@ -911,9 +916,17 @@ function ConfigPanel({
           t.id
         )) }),
         banner && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ods-flow-config-panel__banner", children: banner }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ods-flow-config-panel__body", role: "tabpanel", children: tabs ? activeTab?.content : children }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "ods-flow-config-panel__body",
+            role: "tabpanel",
+            style: { padding },
+            children: tabs ? activeTab?.content : children
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("footer", { className: "ods-flow-config-panel__footer", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          saveState && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
             "span",
             {
               className: cn(
@@ -933,7 +946,7 @@ function ConfigPanel({
               ]
             }
           ),
-          footer ?? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ods-flow-config-panel__footer-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ods-flow-config-panel__footer-actions", children: footerActions ?? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
             onCancel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "button",
               {
@@ -949,11 +962,11 @@ function ConfigPanel({
                 type: "button",
                 className: "ods-flow-config-panel__btn ods-flow-config-panel__btn--primary",
                 onClick: onSave,
-                disabled: saveState === "saving" || saveState === "clean",
+                disabled: saveState === "saving",
                 children: saveState === "saving" ? "Saving\u2026" : "Save"
               }
             )
-          ] })
+          ] }) })
         ] })
       ]
     }
@@ -1144,7 +1157,7 @@ function findContainingGroup(point, nodes, exclude = []) {
   for (let i = nodes.length - 1; i >= 0; i--) {
     const n = nodes[i];
     if (exclude.includes(n.id)) continue;
-    if (n.type !== "group") continue;
+    if (n.type !== "group" && n.type !== "forEach") continue;
     if (n.data && typeof n.data === "object" && n.data.collapsed) {
       continue;
     }
@@ -1354,6 +1367,9 @@ function createHandleRegistry() {
     resolve(nodeId, type, handleId) {
       return map.get(key(nodeId, type, handleId));
     },
+    all() {
+      return Array.from(map.values());
+    },
     subscribe(listener) {
       listeners.add(listener);
       return () => {
@@ -1394,21 +1410,23 @@ function FlowEdgeImpl({
   const targetDesc = registry.resolve(targetNode.id, "target", targetHandleId);
   const sourceSide = sourceDesc?.side ?? sourceNode.sourcePosition ?? "bottom";
   const targetSide = targetDesc?.side ?? targetNode.targetPosition ?? "top";
+  const sourceRoute = sourceDesc?.routeSide ?? sourceSide;
+  const targetRoute = targetDesc?.routeSide ?? targetSide;
   const sourceIndex = sourceDesc?.index ?? 0;
   const sourceTotal = sourceDesc?.total ?? 1;
   const targetIndex = targetDesc?.index ?? 0;
   const targetTotal = targetDesc?.total ?? 1;
   const rawStart = handleCentre(sourceNode, sourceSide, sourceIndex, sourceTotal);
   const rawEnd = handleCentre(targetNode, targetSide, targetIndex, targetTotal);
-  const HANDLE_GAP = 8;
-  const start = offsetAlongSide2(rawStart, sourceSide, HANDLE_GAP);
-  const end = offsetAlongSide2(rawEnd, targetSide, HANDLE_GAP);
+  const HANDLE_GAP = 2;
+  const start = offsetAlongSide2(rawStart, sourceRoute, HANDLE_GAP);
+  const end = offsetAlongSide2(rawEnd, targetRoute, HANDLE_GAP);
   const routing = edge.routing ?? "bezier";
-  const { d, midX, midY } = buildEdgePath(routing, start, sourceSide, end, targetSide, {
+  const { d, midX, midY } = buildEdgePath(routing, start, sourceRoute, end, targetRoute, {
     curvature,
     borderRadius
   });
-  const { d: hitD } = buildEdgePath(routing, rawStart, sourceSide, rawEnd, targetSide, {
+  const { d: hitD } = buildEdgePath(routing, rawStart, sourceRoute, rawEnd, targetRoute, {
     curvature,
     borderRadius
   });
@@ -1455,6 +1473,12 @@ function FlowEdgeImpl({
         e.stopPropagation();
         onSelect?.(edge.id);
       },
+      onDoubleClick: (e) => {
+        if (!onLabelChange) return;
+        e.stopPropagation();
+        setDraftLabel(edge.label ?? "");
+        setEditing(true);
+      },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "marker",
@@ -1726,6 +1750,7 @@ var DEFAULT_HANDLE_ID = "default";
 function Handle({
   type,
   position,
+  routeSide,
   id = DEFAULT_HANDLE_ID,
   isConnectable = true,
   isConnectableStart,
@@ -1748,11 +1773,14 @@ function Handle({
       handleId: id,
       type,
       side: position,
+      routeSide: routeSide ?? position,
       index,
-      total
+      total,
+      canStart,
+      canEnd
     });
     return dispose;
-  }, [registry, node.id, id, type, position, index, total]);
+  }, [registry, node.id, id, type, position, routeSide, index, total, canStart, canEnd]);
   const handlePointerDown = (e) => {
     if (!canStart) return;
     e.stopPropagation();
@@ -2168,92 +2196,35 @@ var ForEachNode = ({
   node
 }) => {
   const d = node.data ?? {};
-  const iteratorExpr = d.iterator ?? d.description ?? "items[]";
-  const collapsed = !!d.collapsed;
-  const disabled = !!d.disabled;
-  const hiddenCount = d.hiddenCount;
-  const bridge = useFlowNodeBridge();
-  const onChevronClick = (e) => {
-    e.stopPropagation();
-    bridge.toggleNodeCollapse(node.id);
-  };
+  const branches = d.branches ?? [
+    { id: "each", label: "Each" },
+    { id: "done", label: "Done" }
+  ];
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    "div",
+    BaseNode,
     {
-      className: "ods-flow-foreach",
-      "data-collapsed": collapsed ? "true" : "false",
-      "data-disabled": disabled ? "true" : void 0,
-      style: {
-        width: node.width ?? 420,
-        height: collapsed ? 40 : node.height ?? 260
-      },
+      kind: d.kind ?? "FOR EACH",
+      icon: d.icon,
+      title: d.title ?? "For each",
+      chip: d.chip ?? d.badge,
+      description: d.description ?? d.subtitle ?? d.iterator,
+      valueChip: d.valueChip,
+      status: d.status,
+      accent: "amber",
       children: [
-        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NodeResizer, { minWidth: 240, minHeight: 120 }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ods-flow-foreach__header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "button",
-            {
-              type: "button",
-              className: "ods-flow-foreach__chevron",
-              "data-flow-no-drag": "true",
-              "aria-label": collapsed ? "Expand iterator" : "Collapse iterator",
-              "aria-expanded": !collapsed,
-              onClick: onChevronClick,
-              onPointerDown: (e) => e.stopPropagation(),
-              children: collapsed ? "\u25B8" : "\u25BE"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ods-flow-foreach__icon", "aria-hidden": "true", children: "\u21BB" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ods-flow-foreach__title", children: d.title ?? "For each" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className: "ods-flow-foreach__iterator", children: iteratorExpr }),
-          disabled && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "span",
-            {
-              className: "ods-flow-foreach__disabled-badge",
-              "aria-label": "Disabled subflow",
-              children: "Disabled"
-            }
-          ),
-          collapsed && hiddenCount !== void 0 && hiddenCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "ods-flow-foreach__count", "aria-label": `${hiddenCount} hidden steps`, children: [
-            hiddenCount,
-            " steps"
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Handle, { type: "target", position: "top", id: "__group_in", label: !collapsed ? "in" : void 0 }),
-        collapsed ? (
-          // Collapsed: single bottom exit so the container behaves like a
-          // regular action in the chain.
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Handle, { type: "source", position: "bottom", id: "__group_out" })
-        ) : (
-          // Expanded: two bottom outputs spread across the bottom edge.
-          // Index/total tell the Handle to position them at 33% and 66%
-          // along the edge (per `handleSideStyle`). `each` is left of
-          // centre, `__group_out` (labelled "done") is right of centre.
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              Handle,
-              {
-                type: "source",
-                position: "bottom",
-                id: "each",
-                label: "each",
-                index: 0,
-                total: 2
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              Handle,
-              {
-                type: "source",
-                position: "bottom",
-                id: "__group_out",
-                label: "done",
-                index: 1,
-                total: 2
-              }
-            )
-          ] })
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Handle, { type: "target", position: "top" }),
+        branches.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          Handle,
+          {
+            type: "source",
+            position: "bottom",
+            id: b.id,
+            index: i,
+            total: branches.length,
+            label: b.label
+          },
+          b.id
+        ))
       ]
     }
   );
@@ -2477,6 +2448,8 @@ function FlowCanvas(props) {
     reparentOnDrag = false,
     autoResizeContainers = false,
     containerAutoResizePadding = 32,
+    containerMinWidth = 320,
+    containerMinHeight = 200,
     height = "100%",
     width = "100%",
     className,
@@ -2613,7 +2586,9 @@ function FlowCanvas(props) {
         id: d.id,
         startPosition: d.position
       }));
-      const wantsReparent = altKey || reparentOnDragRef.current;
+      const evaluateReparent = altKey || reparentOnDragRef.current;
+      const hasParent = !!node.parentId;
+      const skipClamp = altKey || reparentOnDragRef.current && !hasParent;
       dragRef.current = {
         pointerId,
         nodeId,
@@ -2621,7 +2596,8 @@ function FlowCanvas(props) {
         startClientY: clientY,
         startPosition: node.position,
         descendants: kids,
-        altDetach: wantsReparent,
+        skipClamp,
+        evaluateReparent,
         rafScheduled: false,
         nextDelta: null
       };
@@ -2681,6 +2657,8 @@ function FlowCanvas(props) {
   const reparentOnDragRef = (0, import_react15.useRef)(reparentOnDrag);
   const autoResizeContainersRef = (0, import_react15.useRef)(autoResizeContainers);
   const containerAutoResizePaddingRef = (0, import_react15.useRef)(containerAutoResizePadding);
+  const containerMinWidthRef = (0, import_react15.useRef)(containerMinWidth);
+  const containerMinHeightRef = (0, import_react15.useRef)(containerMinHeight);
   (0, import_react15.useEffect)(() => {
     edgesRef.current = edges;
   }, [edges]);
@@ -2714,6 +2692,12 @@ function FlowCanvas(props) {
   (0, import_react15.useEffect)(() => {
     containerAutoResizePaddingRef.current = containerAutoResizePadding;
   }, [containerAutoResizePadding]);
+  (0, import_react15.useEffect)(() => {
+    containerMinWidthRef.current = containerMinWidth;
+  }, [containerMinWidth]);
+  (0, import_react15.useEffect)(() => {
+    containerMinHeightRef.current = containerMinHeight;
+  }, [containerMinHeight]);
   const onNodesChangeRef = (0, import_react15.useRef)(onNodesChange);
   const onConnectRef = (0, import_react15.useRef)(onConnect);
   const onConnectEndRef = (0, import_react15.useRef)(onConnectEnd);
@@ -2758,7 +2742,7 @@ function FlowCanvas(props) {
               x: d.startPosition.x + delta.dx,
               y: d.startPosition.y + delta.dy
             };
-            const clamped = d.altDetach ? proposed : clampToParentExtent(dragNode, proposed, nodesRef.current);
+            const clamped = d.skipClamp ? proposed : clampToParentExtent(dragNode, proposed, nodesRef.current);
             const isContainer = dragNode.type === "group" || dragNode.type === "forEach";
             const gap = isContainer ? subflowCollisionGapRef.current : nodeCollisionGapRef.current;
             const excludeIds = /* @__PURE__ */ new Set([d.nodeId, ...d.descendants.map((kid) => kid.id)]);
@@ -2810,7 +2794,7 @@ function FlowCanvas(props) {
               y: Math.round(proposed.y / g) * g
             };
           }
-          const clamped = drag.altDetach ? proposed : clampToParentExtent(dragNode, proposed, nodesRef.current);
+          const clamped = drag.skipClamp ? proposed : clampToParentExtent(dragNode, proposed, nodesRef.current);
           const isContainer = dragNode.type === "group" || dragNode.type === "forEach";
           const gap = isContainer ? subflowCollisionGapRef.current : nodeCollisionGapRef.current;
           const excludeIds = /* @__PURE__ */ new Set([
@@ -2833,7 +2817,7 @@ function FlowCanvas(props) {
               )
             );
           }
-          if (drag.altDetach) {
+          if (drag.evaluateReparent) {
             const targetGroup = findContainingGroup(
               {
                 x: finalPos.x + (dragNode.width ?? 0) / 2,
@@ -2848,8 +2832,10 @@ function FlowCanvas(props) {
                 ...dragNode,
                 position: finalPos,
                 parentId: nextParentId,
-                // Preserve extent only when staying in a group.
-                extent: nextParentId ? dragNode.extent : void 0
+                // Adopting into a container always pins the child with
+                // `extent: 'parent'` so it's clamped from the next drag
+                // on. Detaching clears it.
+                extent: nextParentId ? "parent" : void 0
               };
               changes.push(change.node.replace(drag.nodeId, updated));
             }
@@ -2860,7 +2846,9 @@ function FlowCanvas(props) {
               // Projected children: apply the position + reparent
               // changes we just built before measuring bboxes.
               changes,
-              containerAutoResizePaddingRef.current
+              containerAutoResizePaddingRef.current,
+              containerMinWidthRef.current,
+              containerMinHeightRef.current
             );
             for (const c2 of containerChanges) changes.push(c2);
           }
@@ -2871,38 +2859,54 @@ function FlowCanvas(props) {
       }
       const c = connRef.current;
       if (c && c.pointerId === e.pointerId) {
-        const target = e.target;
-        const handleEl = target?.closest("[data-handle-id]");
+        const rect = containerRef.current?.getBoundingClientRect();
+        const flowPos = rect ? screenToFlow({ x: e.clientX - rect.left, y: e.clientY - rect.top }, vp) : { x: 0, y: 0 };
+        const snapRadius = 26 / Math.max(0.1, vp.zoom);
+        let bestDesc = null;
+        let bestDist = snapRadius;
+        for (const desc of handleRegistry.all()) {
+          if (desc.nodeId === c.from.nodeId) continue;
+          if (desc.type === c.from.handleType) continue;
+          if (!desc.canEnd) continue;
+          const targetNode = nodesRef.current.find((n) => n.id === desc.nodeId);
+          if (!targetNode || targetNode.hidden) continue;
+          const centre = handleCentre(targetNode, desc.side, desc.index, desc.total);
+          const dist = Math.hypot(centre.x - flowPos.x, centre.y - flowPos.y);
+          if (dist < bestDist) {
+            bestDist = dist;
+            bestDesc = desc;
+          }
+        }
         let connection = null;
         let connectedTo;
-        if (handleEl) {
-          const targetNodeId = handleEl.dataset.handleNodeId;
-          const targetHandleId = handleEl.dataset.handleId;
-          const targetType = handleEl.dataset.handleType;
-          const connectableEnd = handleEl.dataset.handleConnectableEnd === "true";
-          if (connectableEnd && (targetNodeId !== c.from.nodeId || targetHandleId !== c.from.handleId) && targetType !== c.from.handleType) {
-            const source = c.from.handleType === "source" ? c.from : { nodeId: targetNodeId, handleId: targetHandleId, handleType: "source" };
-            const target2 = c.from.handleType === "target" ? c.from : { nodeId: targetNodeId, handleId: targetHandleId, handleType: "target" };
-            connection = {
-              source: source.nodeId,
-              sourceHandle: source.handleId,
-              target: target2.nodeId,
-              targetHandle: target2.handleId
-            };
-            connectedTo = {
-              nodeId: targetNodeId,
-              handleId: targetHandleId,
-              handleType: targetType
-            };
-            const validator = isValidConnectionRef.current;
-            if (validator && !validator(connection)) {
-              connection = null;
-              connectedTo = void 0;
-            }
+        if (bestDesc) {
+          const source = c.from.handleType === "source" ? c.from : {
+            nodeId: bestDesc.nodeId,
+            handleId: bestDesc.handleId,
+            handleType: "source"
+          };
+          const target2 = c.from.handleType === "target" ? c.from : {
+            nodeId: bestDesc.nodeId,
+            handleId: bestDesc.handleId,
+            handleType: "target"
+          };
+          connection = {
+            source: source.nodeId,
+            sourceHandle: source.handleId,
+            target: target2.nodeId,
+            targetHandle: target2.handleId
+          };
+          connectedTo = {
+            nodeId: bestDesc.nodeId,
+            handleId: bestDesc.handleId,
+            handleType: bestDesc.type
+          };
+          const validator = isValidConnectionRef.current;
+          if (validator && !validator(connection)) {
+            connection = null;
+            connectedTo = void 0;
           }
         }
-        const rect = containerRef.current?.getBoundingClientRect();
-        const flowPos = rect ? screenToFlow({ x: e.clientX - rect.left, y: e.clientY - rect.top }, vp) : { x: 0, y: 0 };
         const endState = {
           cancelled: !connection,
           position: { x: e.clientX, y: e.clientY },
@@ -2935,6 +2939,25 @@ function FlowCanvas(props) {
       window.removeEventListener("pointercancel", onPointerCancel);
     };
   }, [store]);
+  (0, import_react15.useEffect)(() => {
+    if (!autoResizeContainers || draggingId) return;
+    const resizeChanges = computeContainerAutoResize(
+      nodes,
+      [],
+      containerAutoResizePadding,
+      containerMinWidth,
+      containerMinHeight
+    );
+    if (resizeChanges.length > 0) onNodesChange?.(resizeChanges);
+  }, [
+    nodes,
+    draggingId,
+    autoResizeContainers,
+    containerAutoResizePadding,
+    containerMinWidth,
+    containerMinHeight,
+    onNodesChange
+  ]);
   const panRef = (0, import_react15.useRef)(null);
   const onCanvasPointerDown = (e) => {
     if (e.button !== 0) return;
@@ -3397,7 +3420,9 @@ function FlowCanvas(props) {
 function onEdgesChangeRef(id, cb) {
   cb?.([change.edge.remove(id)]);
 }
-function computeContainerAutoResize(nodes, pending, padding) {
+var CONTAINER_DROP_HEADROOM_W = 220;
+var CONTAINER_DROP_HEADROOM_H = 2 * 128;
+function computeContainerAutoResize(nodes, pending, padding, minWidth, minHeight) {
   const projected = /* @__PURE__ */ new Map();
   for (const n of nodes) projected.set(n.id, n);
   for (const c of pending) {
@@ -3418,7 +3443,14 @@ function computeContainerAutoResize(nodes, pending, padding) {
     for (const n of projected.values()) {
       if (n.parentId === parent.id) children.push(n);
     }
-    if (children.length === 0) continue;
+    if (children.length === 0) {
+      const curW2 = parent.width ?? 480;
+      const curH2 = parent.height ?? 240;
+      if (curW2 !== minWidth || curH2 !== minHeight) {
+        out.push(change.node.dimensions(parent.id, { width: minWidth, height: minHeight }));
+      }
+      continue;
+    }
     let minX = Number.POSITIVE_INFINITY;
     let minY = Number.POSITIVE_INFINITY;
     let maxX = Number.NEGATIVE_INFINITY;
@@ -3433,12 +3465,12 @@ function computeContainerAutoResize(nodes, pending, padding) {
     }
     const targetX = minX - padding;
     const targetY = minY - padding - HEADER;
-    const targetW = maxX - minX + padding * 2;
-    const targetH = maxY - minY + padding * 2 + HEADER;
     const curW = parent.width ?? 480;
     const curH = parent.height ?? 240;
-    const nextW = Math.max(curW, targetW);
-    const nextH = Math.max(curH, targetH);
+    const fitW = maxX - minX + padding * 2 + CONTAINER_DROP_HEADROOM_W;
+    const fitH = maxY - minY + padding * 2 + HEADER + CONTAINER_DROP_HEADROOM_H;
+    const nextW = Math.max(minWidth, fitW);
+    const nextH = Math.max(minHeight, fitH);
     const positionDirty = parent.position.x !== targetX || parent.position.y !== targetY;
     const sizeDirty = curW !== nextW || curH !== nextH;
     if (positionDirty) {
@@ -3494,8 +3526,456 @@ var EdgesLayer = (0, import_react15.memo)(function EdgesLayer2({
   );
 });
 
-// src/workflow/components/NodeToolbar/NodeToolbar.tsx
+// src/workflow/components/FxPanel/FxPanel.tsx
+var import_react16 = require("react");
+var import_icons2 = require("@octaviaflow/icons");
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var KIND_ICON = {
+  function: import_icons2.FunctionMathIcon,
+  variable: import_icons2.ValueVariableIcon
+};
+function countLeaves(items) {
+  let n = 0;
+  for (const it of items) {
+    if (it.children && it.children.length > 0) n += countLeaves(it.children);
+    else n += 1;
+  }
+  return n;
+}
+function collectBranchIds(items, out) {
+  for (const it of items) {
+    if (it.children && it.children.length > 0) {
+      out.add(it.id);
+      collectBranchIds(it.children, out);
+    }
+  }
+}
+function flattenTree(items, depth, expandedItems, out) {
+  for (const it of items) {
+    const hasChildren = !!it.children && it.children.length > 0;
+    const expanded = hasChildren && expandedItems.has(it.id);
+    out.push({ item: it, depth, hasChildren, expanded });
+    if (expanded) flattenTree(it.children, depth + 1, expandedItems, out);
+  }
+}
+function collectHits(items, ancestors, q, out) {
+  for (const it of items) {
+    if (it.children && it.children.length > 0) {
+      collectHits(it.children, [...ancestors, it.label], q, out);
+    } else {
+      const path = [...ancestors, it.label].join(" / ");
+      const hay = `${it.label} ${it.description ?? ""} ${path} ${it.insertValue ?? ""}`.toLowerCase();
+      if (hay.includes(q)) out.push({ item: it, ancestors });
+    }
+  }
+}
+function FxPanel({
+  categories,
+  title = "Data References",
+  hint = "Drag onto a field, or click an item to insert it.",
+  search: controlledSearch,
+  defaultSearch = "",
+  onSearchChange,
+  expandedCategory: controlledExpanded,
+  defaultExpandedCategory,
+  onExpandedCategoryChange,
+  onClose,
+  onItemDragStart,
+  onItemSelect,
+  width = 300,
+  emptyLabel = "No matches",
+  searchPlaceholder = "Search fields, functions & variables\u2026",
+  className,
+  style
+}) {
+  const [internalSearch, setInternalSearch] = (0, import_react16.useState)(defaultSearch);
+  const search = controlledSearch ?? internalSearch;
+  const query = search.trim().toLowerCase();
+  const setSearch = (next) => {
+    if (controlledSearch === void 0) setInternalSearch(next);
+    onSearchChange?.(next);
+  };
+  const visibleCategories = (0, import_react16.useMemo)(
+    () => categories.filter((c) => c.items.length > 0),
+    [categories]
+  );
+  const [internalCat, setInternalCat] = (0, import_react16.useState)(
+    defaultExpandedCategory !== void 0 ? defaultExpandedCategory : visibleCategories[0]?.id ?? null
+  );
+  const openCategoryId = controlledExpanded ?? internalCat;
+  const setOpenCategory = (id) => {
+    if (controlledExpanded === void 0) setInternalCat(id);
+    onExpandedCategoryChange?.(id);
+  };
+  const [expandedItems, setExpandedItems] = (0, import_react16.useState)(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const cat of categories) {
+      for (const item of cat.items) {
+        if (item.children && item.children.length > 0) ids.add(item.id);
+      }
+    }
+    return ids;
+  });
+  const toggleItem = (id) => {
+    setExpandedItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  const setCategoryExpansion = (cat, expand) => {
+    const branchIds = /* @__PURE__ */ new Set();
+    collectBranchIds(cat.items, branchIds);
+    setExpandedItems((prev) => {
+      const next = new Set(prev);
+      for (const id of branchIds) {
+        if (expand) next.add(id);
+        else next.delete(id);
+      }
+      return next;
+    });
+  };
+  const [draggingId, setDraggingId] = (0, import_react16.useState)(null);
+  const [focusedId, setFocusedId] = (0, import_react16.useState)(null);
+  const hits = (0, import_react16.useMemo)(() => {
+    if (!query) return null;
+    const all = [];
+    for (const cat of visibleCategories) {
+      const out = [];
+      collectHits(cat.items, [], query, out);
+      for (const hit of out) all.push({ category: cat, hit });
+    }
+    return all;
+  }, [query, visibleCategories]);
+  const handleDragStart = (item, category) => (e) => {
+    setDraggingId(item.id);
+    if (onItemDragStart) {
+      onItemDragStart(item, category, e);
+    } else if (item.insertValue) {
+      e.dataTransfer.setData("text/plain", item.insertValue);
+      e.dataTransfer.setData("application/x-fx-insert", item.insertValue);
+      e.dataTransfer.setData(
+        "application/x-fx-type",
+        category.kind ?? "function"
+      );
+      e.dataTransfer.effectAllowed = "copy";
+    }
+  };
+  const listRef = (0, import_react16.useRef)(null);
+  const focusRow = (id) => {
+    setFocusedId(id);
+    requestAnimationFrame(() => {
+      listRef.current?.querySelector(`[data-fx-row="${CSS.escape(id)}"]`)?.focus();
+    });
+  };
+  const onRowKeyDown = (e, rows, row, category) => {
+    const idx = rows.findIndex((r) => r.item.id === row.item.id);
+    if (idx < 0) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (idx < rows.length - 1) focusRow(rows[idx + 1].item.id);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (idx > 0) focusRow(rows[idx - 1].item.id);
+        break;
+      case "ArrowRight":
+        if (row.hasChildren) {
+          e.preventDefault();
+          if (!row.expanded) toggleItem(row.item.id);
+          else if (idx < rows.length - 1) focusRow(rows[idx + 1].item.id);
+        }
+        break;
+      case "ArrowLeft":
+        if (row.hasChildren && row.expanded) {
+          e.preventDefault();
+          toggleItem(row.item.id);
+        } else {
+          for (let i = idx - 1; i >= 0; i--) {
+            if (rows[i].depth < row.depth) {
+              e.preventDefault();
+              focusRow(rows[i].item.id);
+              break;
+            }
+          }
+        }
+        break;
+      case "Home":
+        e.preventDefault();
+        if (rows.length) focusRow(rows[0].item.id);
+        break;
+      case "End":
+        e.preventDefault();
+        if (rows.length) focusRow(rows[rows.length - 1].item.id);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (row.hasChildren) toggleItem(row.item.id);
+        else onItemSelect?.(row.item, category);
+        break;
+      default:
+        break;
+    }
+  };
+  const searchRows = (0, import_react16.useMemo)(
+    () => hits ? hits.map(({ hit }) => ({
+      item: hit.item,
+      depth: 0,
+      hasChildren: false,
+      expanded: false
+    })) : [],
+    [hits]
+  );
+  const renderRow = (row, category, rows, crumb) => {
+    const { item, depth, hasChildren, expanded } = row;
+    const mono = category.kind === "function";
+    const draggable = !!item.insertValue;
+    const isFocused = focusedId === item.id;
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "div",
+      {
+        "data-fx-row": item.id,
+        className: cn(
+          "ods-flow-fx-panel__row",
+          hasChildren ? "ods-flow-fx-panel__row--branch" : "ods-flow-fx-panel__row--leaf",
+          draggingId === item.id && "ods-flow-fx-panel__row--dragging",
+          isFocused && "ods-flow-fx-panel__row--focused"
+        ),
+        role: "treeitem",
+        "aria-expanded": hasChildren ? expanded : void 0,
+        "aria-level": depth + 1,
+        tabIndex: isFocused || focusedId === null && rows[0]?.item.id === item.id ? 0 : -1,
+        draggable,
+        onDragStart: draggable ? handleDragStart(item, category) : void 0,
+        onDragEnd: () => setDraggingId(null),
+        onFocus: () => setFocusedId(item.id),
+        onKeyDown: (e) => onRowKeyDown(e, rows, row, category),
+        onClick: () => {
+          if (hasChildren) toggleItem(item.id);
+          else onItemSelect?.(item, category);
+        },
+        title: item.insertValue,
+        children: [
+          Array.from({ length: depth }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-flow-fx-panel__indent", "aria-hidden": "true" }, i)),
+          hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-flow-fx-panel__twisty", "aria-hidden": "true", children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.ChevronDownIcon, { size: "sm" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.ChevronRightIcon, { size: "sm" }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-flow-fx-panel__grip", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.DraggableIcon, { size: "sm" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ods-flow-fx-panel__row-main", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ods-flow-fx-panel__row-line", children: [
+              mono ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { className: "ods-flow-fx-panel__row-label ods-flow-fx-panel__row-label--mono", children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-flow-fx-panel__row-label", children: item.label }),
+              item.valueType && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "ods-flow-fx-panel__type",
+                    `ods-flow-fx-panel__type--${item.valueType}`
+                  ),
+                  children: item.valueType
+                }
+              )
+            ] }),
+            (item.description || crumb) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ods-flow-fx-panel__row-sub", children: [
+              crumb && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-flow-fx-panel__crumb", children: crumb }),
+              item.description
+            ] })
+          ] })
+        ]
+      },
+      item.id
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "aside",
+    {
+      className: cn("ods-flow-fx-panel", className),
+      style: { width, ...style },
+      "aria-label": typeof title === "string" ? title : "Data References",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("header", { className: "ods-flow-fx-panel__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "ods-flow-fx-panel__title", children: title }),
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ods-flow-fx-panel__close",
+              onClick: onClose,
+              "aria-label": "Close data references",
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.CloseIcon, { size: "sm" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-flow-fx-panel__search", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-flow-fx-panel__search-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.SearchIcon, { size: "sm" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "input",
+            {
+              type: "text",
+              className: "ods-flow-fx-panel__search-input",
+              placeholder: searchPlaceholder,
+              "aria-label": "Search fields, functions and variables",
+              value: search,
+              onChange: (e) => setSearch(e.target.value)
+            }
+          ),
+          search && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ods-flow-fx-panel__search-clear",
+              onClick: () => setSearch(""),
+              "aria-label": "Clear search",
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.CloseIcon, { size: "sm" })
+            }
+          )
+        ] }),
+        hint && !query && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "ods-flow-fx-panel__hint", children: hint }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-flow-fx-panel__list", ref: listRef, role: "tree", children: [
+          query && hits && (hits.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-flow-fx-panel__results", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-flow-fx-panel__results-count", children: [
+              hits.length,
+              " ",
+              hits.length === 1 ? "match" : "matches"
+            ] }),
+            hits.map(
+              ({ category, hit }, i) => renderRow(
+                searchRows[i],
+                category,
+                searchRows,
+                hit.ancestors.length ? hit.ancestors.join(" / ") : category.label
+              )
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ods-flow-fx-panel__empty", children: emptyLabel })),
+          !query && visibleCategories.map((cat) => {
+            const isOpen = openCategoryId === cat.id;
+            const kind = cat.kind ?? "function";
+            const KindIcon = KIND_ICON[kind];
+            const branchIds = /* @__PURE__ */ new Set();
+            collectBranchIds(cat.items, branchIds);
+            const hasTree = branchIds.size > 0;
+            const rows = [];
+            if (isOpen) flattenTree(cat.items, 0, expandedItems, rows);
+            const allExpanded = hasTree && [...branchIds].every((id) => expandedItems.has(id));
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-flow-fx-panel__category", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                "div",
+                {
+                  className: cn(
+                    "ods-flow-fx-panel__cat-header",
+                    isOpen && "ods-flow-fx-panel__cat-header--open"
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                      "button",
+                      {
+                        type: "button",
+                        className: "ods-flow-fx-panel__cat-toggle",
+                        "aria-expanded": isOpen,
+                        onClick: () => setOpenCategory(isOpen ? null : cat.id),
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                            import_icons2.ChevronRightIcon,
+                            {
+                              size: "sm",
+                              className: cn(
+                                "ods-flow-fx-panel__chevron",
+                                isOpen && "ods-flow-fx-panel__chevron--open"
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                            "span",
+                            {
+                              className: cn(
+                                "ods-flow-fx-panel__badge",
+                                `ods-flow-fx-panel__badge--${kind}`
+                              ),
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                  KindIcon,
+                                  {
+                                    size: "sm",
+                                    className: "ods-flow-fx-panel__badge-icon"
+                                  }
+                                ),
+                                cat.label
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-flow-fx-panel__count", children: countLeaves(cat.items) })
+                        ]
+                      }
+                    ),
+                    isOpen && hasTree && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        className: "ods-flow-fx-panel__cat-action",
+                        "aria-label": allExpanded ? "Collapse all" : "Expand all",
+                        title: allExpanded ? "Collapse all" : "Expand all",
+                        onClick: () => setCategoryExpansion(cat, !allExpanded),
+                        children: allExpanded ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.CollapseAllIcon, { size: "sm" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.ExpandAllIcon, { size: "sm" })
+                      }
+                    )
+                  ]
+                }
+              ),
+              isOpen && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "div",
+                {
+                  className: "ods-flow-fx-panel__rows",
+                  role: "group",
+                  "aria-label": cat.label,
+                  children: rows.map((row) => renderRow(row, cat, rows))
+                }
+              )
+            ] }, cat.id);
+          })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/workflow/components/FxPanel/DataRefButton.tsx
+var import_icons3 = require("@octaviaflow/icons");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function DataRefButton({
+  active = false,
+  label = "Data ref",
+  className,
+  type = "button",
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "button",
+    {
+      ...rest,
+      type,
+      className: cn(
+        "ods-flow-dataref-button",
+        active && "ods-flow-dataref-button--active",
+        label == null && "ods-flow-dataref-button--icon-only",
+        className
+      ),
+      "aria-pressed": active,
+      title: active ? "Hide data references" : "Show data references",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_icons3.DataReferenceIcon,
+          {
+            size: "sm",
+            className: "ods-flow-dataref-button__icon"
+          }
+        ),
+        label != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ods-flow-dataref-button__label", children: label })
+      ]
+    }
+  );
+}
+
+// src/workflow/components/NodeToolbar/NodeToolbar.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function NodeToolbar({
   isVisible,
   position = "top",
@@ -3510,7 +3990,7 @@ function NodeToolbar({
   const show = isVisible ?? node.selected;
   if (!show) return null;
   const inverseScale = 1 / viewport.zoom;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "div",
     {
       className: cn("ods-node-toolbar", `ods-node-toolbar--${position}`, className),
@@ -3522,7 +4002,7 @@ function NodeToolbar({
       onPointerDown: (e) => e.stopPropagation(),
       onMouseDown: (e) => e.stopPropagation(),
       onClick: (e) => e.stopPropagation(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "div",
         {
           className: "ods-node-toolbar__inner",
@@ -3671,11 +4151,13 @@ function toggleGroupCollapse(groupId, nodes) {
   DEFAULT_NODE_HEIGHT,
   DEFAULT_NODE_KINDS,
   DEFAULT_NODE_WIDTH,
+  DataRefButton,
   ErrorNode,
   FlowCanvas,
   FlowEdge,
   FlowNode,
   ForEachNode,
+  FxPanel,
   GroupNode,
   Handle,
   HttpRequestNode,