@octaviaflow/core 3.0.18 → 3.1.0-beta.53

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,
@@ -77,7 +79,8 @@ __export(workflow_exports, {
   useNodeData: () => useNodeData,
   useNodes: () => useNodes,
   useSelection: () => useSelection,
-  useViewport: () => useViewport
+  useViewport: () => useViewport,
+  useViewportOrNull: () => useViewportOrNull
 });
 module.exports = __toCommonJS(workflow_exports);
 
@@ -559,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) => ({
@@ -570,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
         }));
       };
@@ -646,6 +653,23 @@ function useEdges() {
 function useViewport() {
   return useFlowSelector((s) => s.viewport);
 }
+var VIEWPORT_OR_NULL_NO_STORE_SUBSCRIBE = (_cb) => () => {
+};
+var VIEWPORT_OR_NULL_NO_STORE_SNAPSHOT = () => null;
+function useViewportOrNull() {
+  const store = (0, import_react5.useContext)(FlowStoreContext);
+  const { sub, snap } = (0, import_react5.useMemo)(
+    () => store ? {
+      sub: store.subscribe,
+      snap: () => store.getSnapshot().viewport
+    } : {
+      sub: VIEWPORT_OR_NULL_NO_STORE_SUBSCRIBE,
+      snap: VIEWPORT_OR_NULL_NO_STORE_SNAPSHOT
+    },
+    [store]
+  );
+  return (0, import_react5.useSyncExternalStore)(sub, snap, snap);
+}
 function useNodeById(id) {
   return useFlowSelector((s) => s.nodes.find((n) => n.id === id));
 }
@@ -708,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
 }) {
@@ -824,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",
           {
@@ -893,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(
@@ -915,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",
               {
@@ -931,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"
               }
             )
-          ] })
+          ] }) })
         ] })
       ]
     }
@@ -943,7 +974,7 @@ function ConfigPanel({
 }
 
 // src/workflow/components/FlowCanvas/FlowCanvas.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/workflow/store/createFlowStore.ts
 var DEFAULT_VIEWPORT = { x: 0, y: 0, zoom: 1 };
@@ -1126,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;
     }
@@ -1336,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 () => {
@@ -1376,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
   });
@@ -1437,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",
@@ -1708,6 +1750,7 @@ var DEFAULT_HANDLE_ID = "default";
 function Handle({
   type,
   position,
+  routeSide,
   id = DEFAULT_HANDLE_ID,
   isConnectable = true,
   isConnectableStart,
@@ -1730,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();
@@ -1791,10 +1837,155 @@ function handleSideStyle(side, index, total) {
   }
 }
 
-// src/workflow/components/kinds/BaseNode.tsx
-var import_icons = require("@octaviaflow/icons");
+// src/workflow/components/NodeResizer/NodeResizer.tsx
 var import_react13 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function NodeResizer({
+  isVisible,
+  minWidth = 80,
+  minHeight = 60,
+  maxWidth,
+  maxHeight,
+  keepAspectRatio = false,
+  onResize,
+  onResizeEnd,
+  color
+}) {
+  const { node, selected } = useFlowNodeContext();
+  const viewport = useViewport();
+  const flow = useFlow();
+  const dragRef = (0, import_react13.useRef)(null);
+  const show = isVisible ?? selected;
+  if (!show) return null;
+  const beginResize = (e, corner) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.target.setPointerCapture(e.pointerId);
+    const w = node.width ?? DEFAULT_NODE_WIDTH;
+    const h = node.height ?? DEFAULT_NODE_HEIGHT;
+    dragRef.current = {
+      pointerId: e.pointerId,
+      corner,
+      startClientX: e.clientX,
+      startClientY: e.clientY,
+      startWidth: w,
+      startHeight: h,
+      startX: node.position.x,
+      startY: node.position.y,
+      aspect: w / Math.max(1, h)
+    };
+  };
+  const onMove = (e) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== e.pointerId) return;
+    const dx = (e.clientX - drag.startClientX) / viewport.zoom;
+    const dy = (e.clientY - drag.startClientY) / viewport.zoom;
+    let nextW = drag.startWidth;
+    let nextH = drag.startHeight;
+    let nextX = drag.startX;
+    let nextY = drag.startY;
+    switch (drag.corner) {
+      case "se":
+        nextW = drag.startWidth + dx;
+        nextH = drag.startHeight + dy;
+        break;
+      case "sw":
+        nextW = drag.startWidth - dx;
+        nextH = drag.startHeight + dy;
+        nextX = drag.startX + dx;
+        break;
+      case "ne":
+        nextW = drag.startWidth + dx;
+        nextH = drag.startHeight - dy;
+        nextY = drag.startY + dy;
+        break;
+      case "nw":
+        nextW = drag.startWidth - dx;
+        nextH = drag.startHeight - dy;
+        nextX = drag.startX + dx;
+        nextY = drag.startY + dy;
+        break;
+    }
+    if (keepAspectRatio) {
+      nextH = nextW / drag.aspect;
+      if (drag.corner === "nw" || drag.corner === "ne") {
+        nextY = drag.startY + (drag.startHeight - nextH);
+      }
+    }
+    nextW = Math.max(minWidth, maxWidth ? Math.min(maxWidth, nextW) : nextW);
+    nextH = Math.max(minHeight, maxHeight ? Math.min(maxHeight, nextH) : nextH);
+    flow.updateNode(node.id, {
+      width: nextW,
+      height: nextH,
+      position: { x: nextX, y: nextY }
+    });
+    onResize?.({ width: nextW, height: nextH });
+  };
+  const onUp = (e) => {
+    if (dragRef.current?.pointerId === e.pointerId) {
+      const cur = flow.getNode(node.id);
+      if (cur) {
+        onResizeEnd?.({
+          width: cur.width ?? DEFAULT_NODE_WIDTH,
+          height: cur.height ?? DEFAULT_NODE_HEIGHT
+        });
+      }
+      dragRef.current = null;
+    }
+  };
+  const handleColor = color ?? "var(--ods-accent)";
+  const handleStyle = (corner) => {
+    const base = {
+      position: "absolute",
+      width: 12,
+      height: 12,
+      background: "var(--ods-surface-canvas)",
+      border: `2px solid ${handleColor}`,
+      borderRadius: 2,
+      cursor: cursorFor(corner),
+      touchAction: "none",
+      // Place each handle so its CENTRE sits on the corresponding corner.
+      transform: "translate(-50%, -50%)"
+    };
+    switch (corner) {
+      case "nw":
+        return { ...base, top: 0, left: 0 };
+      case "ne":
+        return { ...base, top: 0, left: "100%" };
+      case "sw":
+        return { ...base, top: "100%", left: 0 };
+      case "se":
+        return { ...base, top: "100%", left: "100%" };
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn("ods-node-resizer"), "data-flow-no-drag": "true", children: ["nw", "ne", "sw", "se"].map((corner) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      style: handleStyle(corner),
+      onPointerDown: (e) => beginResize(e, corner),
+      onPointerMove: onMove,
+      onPointerUp: onUp,
+      onPointerCancel: onUp,
+      "aria-label": `Resize ${corner}`
+    },
+    corner
+  )) });
+}
+function cursorFor(corner) {
+  switch (corner) {
+    case "nw":
+    case "se":
+      return "nwse-resize";
+    case "ne":
+    case "sw":
+      return "nesw-resize";
+  }
+}
+
+// src/workflow/components/kinds/BaseNode.tsx
+var import_icons = require("@octaviaflow/icons");
+var import_react14 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function BaseNode({
   kind,
   kindIcon,
@@ -1810,10 +2001,10 @@ function BaseNode({
   className,
   children
 }) {
-  const ctx = (0, import_react13.useContext)(FlowNodeContext);
-  const bridge = (0, import_react13.useContext)(FlowNodeBridgeContext);
+  const ctx = (0, import_react14.useContext)(FlowNodeContext);
+  const bridge = (0, import_react14.useContext)(FlowNodeBridgeContext);
   const deleteHandler = onDelete === false ? void 0 : onDelete ?? (ctx && bridge ? () => bridge.deleteNode(ctx.id) : void 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className: cn(
@@ -1823,31 +2014,31 @@ function BaseNode({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "ods-flow-base-node__pill", children: [
-          kindIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ods-flow-base-node__pill-icon", "aria-hidden": "true", children: kindIcon }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ods-flow-base-node__pill-label", children: kind })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ods-flow-base-node__pill", children: [
+          kindIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ods-flow-base-node__pill-icon", "aria-hidden": "true", children: kindIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ods-flow-base-node__pill-label", children: kind })
         ] }),
-        status && status !== "idle" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        status && status !== "idle" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "span",
           {
             className: cn("ods-flow-base-node__status", `ods-flow-base-node__status--${status}`),
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "ods-flow-base-node__body", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "ods-flow-base-node__content", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "ods-flow-base-node__bubble", "aria-hidden": "true", children: icon }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "ods-flow-base-node__content-text", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "ods-flow-base-node__content-title", children: title }),
-              (chip !== void 0 || description !== void 0 || valueChip !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "ods-flow-base-node__content-info", children: [
-                chip !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ods-flow-base-node__chip", children: chip }),
-                description !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ods-flow-base-node__description", children: description }),
-                valueChip !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ods-flow-base-node__value-chip", children: valueChip })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ods-flow-base-node__body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ods-flow-base-node__content", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ods-flow-base-node__bubble", "aria-hidden": "true", children: icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ods-flow-base-node__content-text", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ods-flow-base-node__content-title", children: title }),
+              (chip !== void 0 || description !== void 0 || valueChip !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ods-flow-base-node__content-info", children: [
+                chip !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ods-flow-base-node__chip", children: chip }),
+                description !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ods-flow-base-node__description", children: description }),
+                valueChip !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ods-flow-base-node__value-chip", children: valueChip })
               ] })
             ] })
           ] }),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "ods-flow-base-node__footer", children: footer }),
-          deleteHandler && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          footer && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ods-flow-base-node__footer", children: footer }),
+          deleteHandler && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "button",
             {
               type: "button",
@@ -1859,7 +2050,7 @@ function BaseNode({
               "aria-label": "Delete node",
               "data-flow-no-drag": "true",
               title: "Delete node",
-              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons.TrashCanIcon, { size: 16, "aria-hidden": true })
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons.TrashCanIcon, { size: 16, "aria-hidden": true })
             }
           )
         ] }),
@@ -1870,12 +2061,12 @@ function BaseNode({
 }
 
 // src/workflow/components/kinds/index.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var ActionNode = ({
   node
 }) => {
   const d = node.data ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     BaseNode,
     {
       kind: d.kind ?? "ACTION",
@@ -1887,8 +2078,8 @@ var ActionNode = ({
       status: d.status,
       accent: "green",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Handle, { type: "target", position: "top" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Handle, { type: "source", position: "bottom" })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Handle, { type: "target", position: "top" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Handle, { type: "source", position: "bottom" })
       ]
     }
   );
@@ -1897,7 +2088,7 @@ var TriggerNode = ({
   node
 }) => {
   const d = node.data ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     BaseNode,
     {
       kind: d.kind ?? "TRIGGER",
@@ -1908,7 +2099,7 @@ var TriggerNode = ({
       valueChip: d.valueChip,
       status: d.status,
       accent: "green",
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Handle, { type: "source", position: "bottom" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Handle, { type: "source", position: "bottom" })
     }
   );
 };
@@ -1920,7 +2111,7 @@ var ConditionNode = ({
     { id: "true", label: "true" },
     { id: "false", label: "false" }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     BaseNode,
     {
       kind: d.kind ?? "CONDITION",
@@ -1932,8 +2123,8 @@ var ConditionNode = ({
       status: d.status,
       accent: "amber",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Handle, { type: "target", position: "top" }),
-        branches.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Handle, { type: "target", position: "top" }),
+        branches.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Handle,
           {
             type: "source",
@@ -1954,24 +2145,27 @@ var GroupNode = ({
 }) => {
   const d = node.data ?? {};
   const collapsed = !!d.collapsed;
+  const disabled = !!d.disabled;
   const hiddenCount = d.hiddenCount;
   const bridge = useFlowNodeBridge();
   const onChevronClick = (e) => {
     e.stopPropagation();
     bridge.toggleNodeCollapse(node.id);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       className: "ods-flow-group",
       "data-collapsed": collapsed ? "true" : "false",
+      "data-disabled": disabled ? "true" : void 0,
       style: {
         width: node.width ?? 360,
         height: collapsed ? 36 : node.height ?? 200
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ods-flow-group__header", "data-flow-no-drag": "false", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NodeResizer, { minWidth: 240, minHeight: 120 }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ods-flow-group__header", "data-flow-no-drag": "false", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
               type: "button",
@@ -1984,15 +2178,16 @@ var GroupNode = ({
               children: collapsed ? "\u25B8" : "\u25BE"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ods-flow-group__title", children: d.title ?? "Group" }),
-          d.subtitle && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ods-flow-group__subtitle", children: d.subtitle }),
-          collapsed && hiddenCount !== void 0 && hiddenCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ods-flow-group__count", "aria-label": `${hiddenCount} hidden steps`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ods-flow-group__title", children: d.title ?? "Group" }),
+          d.subtitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ods-flow-group__subtitle", children: d.subtitle }),
+          disabled && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ods-flow-group__disabled-badge", "aria-label": "Disabled subflow", children: "Disabled" }),
+          collapsed && hiddenCount !== void 0 && hiddenCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "ods-flow-group__count", "aria-label": `${hiddenCount} hidden steps`, children: [
             hiddenCount,
             " steps"
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Handle, { type: "target", position: "top", id: "__group_in" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Handle, { type: "source", position: "bottom", id: "__group_out" })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Handle, { type: "target", position: "top", id: "__group_in" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Handle, { type: "source", position: "bottom", id: "__group_out" })
       ]
     }
   );
@@ -2001,56 +2196,35 @@ var ForEachNode = ({
   node
 }) => {
   const d = node.data ?? {};
-  const iteratorExpr = d.iterator ?? d.description ?? "items[]";
-  const collapsed = !!d.collapsed;
-  const hiddenCount = d.hiddenCount;
-  const bridge = useFlowNodeBridge();
-  const onChevronClick = (e) => {
-    e.stopPropagation();
-    bridge.toggleNodeCollapse(node.id);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    "div",
+  const branches = d.branches ?? [
+    { id: "each", label: "Each" },
+    { id: "done", label: "Done" }
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    BaseNode,
     {
-      className: "ods-flow-foreach",
-      "data-collapsed": collapsed ? "true" : "false",
-      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: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ods-flow-foreach__header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.jsx)("span", { className: "ods-flow-foreach__icon", "aria-hidden": "true", children: "\u21BB" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ods-flow-foreach__title", children: d.title ?? "For each" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("code", { className: "ods-flow-foreach__iterator", children: iteratorExpr }),
-          collapsed && hiddenCount !== void 0 && hiddenCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ods-flow-foreach__count", "aria-label": `${hiddenCount} hidden steps`, children: [
-            hiddenCount,
-            " steps"
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Handle, { type: "target", position: "top", id: "__group_in" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Handle, { type: "source", position: "bottom", id: "__group_out" }),
-        !collapsed && // Expanded mode — full 3-handle iterator surface (in / item / done).
-        // `in` shares the top edge with `__group_in`; consumers wiring an
-        // explicit `targetHandle: "in"` get the labelled, visible variant.
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Handle, { type: "target", position: "top", id: "in", label: "in" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Handle, { type: "source", position: "right", id: "item", label: "item" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Handle, { type: "source", position: "bottom", id: "done", label: "done" })
-        ] })
+        /* @__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
+        ))
       ]
     }
   );
@@ -2059,7 +2233,7 @@ var OutputNode = ({
   node
 }) => {
   const d = node.data ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     BaseNode,
     {
       kind: d.kind ?? "OUTPUT",
@@ -2069,7 +2243,7 @@ var OutputNode = ({
       description: d.description ?? d.subtitle,
       status: d.status,
       accent: "green",
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Handle, { type: "target", position: "top" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Handle, { type: "target", position: "top" })
     }
   );
 };
@@ -2077,7 +2251,7 @@ var ErrorNode = ({
   node
 }) => {
   const d = node.data ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     BaseNode,
     {
       kind: d.kind ?? "ERROR",
@@ -2088,8 +2262,8 @@ var ErrorNode = ({
       status: d.status ?? "error",
       accent: "red",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Handle, { type: "target", position: "top" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Handle, { type: "source", position: "bottom" })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Handle, { type: "target", position: "top" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Handle, { type: "source", position: "bottom" })
       ]
     }
   );
@@ -2100,7 +2274,7 @@ var WaitNode = ({
   const d = node.data ?? {};
   const waitMs = d.waitMs;
   const durationChip = waitMs ? `${Math.round(waitMs / 100) / 10}s` : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     BaseNode,
     {
       kind: d.kind ?? "WAIT",
@@ -2111,8 +2285,8 @@ var WaitNode = ({
       status: d.status,
       accent: "violet",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Handle, { type: "target", position: "top" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Handle, { type: "source", position: "bottom" })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Handle, { type: "target", position: "top" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Handle, { type: "source", position: "bottom" })
       ]
     }
   );
@@ -2125,7 +2299,7 @@ var ParallelNode = ({
     { id: "a", label: "a" },
     { id: "b", label: "b" }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     BaseNode,
     {
       kind: d.kind ?? "PARALLEL",
@@ -2136,8 +2310,8 @@ var ParallelNode = ({
       status: d.status,
       accent: "blue",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Handle, { type: "target", position: "top" }),
-        branches.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Handle, { type: "target", position: "top" }),
+        branches.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Handle,
           {
             type: "source",
@@ -2157,7 +2331,7 @@ var StickyNode = ({
   node
 }) => {
   const d = node.data ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       className: "ods-flow-sticky",
@@ -2166,8 +2340,8 @@ var StickyNode = ({
         minHeight: node.height ?? 120
       },
       children: [
-        d.title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ods-flow-sticky__title", children: d.title }),
-        d.description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ods-flow-sticky__body", children: d.description })
+        d.title && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ods-flow-sticky__title", children: d.title }),
+        d.description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ods-flow-sticky__body", children: d.description })
       ]
     }
   );
@@ -2176,7 +2350,7 @@ var WebhookNode = ({
   node
 }) => {
   const d = node.data ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     BaseNode,
     {
       kind: d.kind ?? "WEBHOOK",
@@ -2187,7 +2361,7 @@ var WebhookNode = ({
       valueChip: d.valueChip,
       status: d.status,
       accent: "blue",
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Handle, { type: "source", position: "bottom" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Handle, { type: "source", position: "bottom" })
     }
   );
 };
@@ -2195,7 +2369,7 @@ var HttpRequestNode = ({
   node
 }) => {
   const d = node.data ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     BaseNode,
     {
       kind: d.kind ?? "HTTP",
@@ -2207,8 +2381,8 @@ var HttpRequestNode = ({
       status: d.status,
       accent: "blue",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Handle, { type: "target", position: "top" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Handle, { type: "source", position: "bottom" })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Handle, { type: "target", position: "top" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Handle, { type: "source", position: "bottom" })
       ]
     }
   );
@@ -2229,52 +2403,60 @@ var DEFAULT_NODE_KINDS = {
 };
 
 // src/workflow/components/FlowCanvas/FlowCanvas.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var DEFAULT_VIEWPORT2 = { x: 0, y: 0, zoom: 1 };
-function FlowCanvas({
-  nodes,
-  edges,
-  onNodesChange,
-  onEdgesChange,
-  viewport: controlledViewport,
-  defaultViewport = DEFAULT_VIEWPORT2,
-  onViewportChange,
-  minZoom = 0.25,
-  maxZoom = 2,
-  nodeKinds,
-  onConnect,
-  onConnectStart,
-  onConnectEnd,
-  isValidConnection,
-  onSelectionChange,
-  onPaneClick,
-  onNodeClick,
-  onEdgeClick,
-  onEdgeLabelChange,
-  onInit,
-  onBeforeDelete,
-  onNodeContextMenu,
-  onEdgeContextMenu,
-  onPaneContextMenu,
-  nodesDraggable = true,
-  nodesConnectable = true,
-  panOnDrag: panOnDragProp,
-  zoomOnScroll: zoomOnScrollProp,
-  preset = "mouse",
-  paneClickDistance = 4,
-  paneClickClearsSelection = true,
-  background = "dots",
-  gridSize = 20,
-  snapToGrid = false,
-  nodeCollisionGap = -1,
-  subflowCollisionGap,
-  height = "100%",
-  width = "100%",
-  className,
-  style,
-  children,
-  emptyState
-}) {
+function FlowCanvas(props) {
+  const viewportPropProvided = props.viewport !== void 0 || props.defaultViewport !== void 0;
+  const {
+    nodes,
+    edges,
+    onNodesChange,
+    onEdgesChange,
+    viewport: controlledViewport,
+    defaultViewport = DEFAULT_VIEWPORT2,
+    onViewportChange,
+    minZoom = 0.25,
+    maxZoom = 2,
+    fitViewOnInit,
+    nodeKinds,
+    onConnect,
+    onConnectStart,
+    onConnectEnd,
+    isValidConnection,
+    onSelectionChange,
+    onPaneClick,
+    onNodeClick,
+    onEdgeClick,
+    onEdgeLabelChange,
+    onInit,
+    onBeforeDelete,
+    onNodeContextMenu,
+    onEdgeContextMenu,
+    onPaneContextMenu,
+    nodesDraggable = true,
+    nodesConnectable = true,
+    panOnDrag: panOnDragProp,
+    zoomOnScroll: zoomOnScrollProp,
+    preset = "mouse",
+    paneClickDistance = 4,
+    paneClickClearsSelection = true,
+    background = "dots",
+    gridSize = 20,
+    snapToGrid = false,
+    nodeCollisionGap = -1,
+    subflowCollisionGap,
+    reparentOnDrag = false,
+    autoResizeContainers = false,
+    containerAutoResizePadding = 32,
+    containerMinWidth = 320,
+    containerMinHeight = 200,
+    height = "100%",
+    width = "100%",
+    className,
+    style,
+    children,
+    emptyState
+  } = props;
   const presetDefaults = {
     mouse: { panOnDrag: true, zoomOnScroll: true },
     trackpad: { panOnDrag: true, zoomOnScroll: true },
@@ -2282,46 +2464,46 @@ function FlowCanvas({
   };
   const panOnDrag = panOnDragProp ?? presetDefaults[preset].panOnDrag;
   const zoomOnScroll = zoomOnScrollProp ?? presetDefaults[preset].zoomOnScroll;
-  const store = (0, import_react14.useState)(
+  const store = (0, import_react15.useState)(
     () => createFlowStore({
       initialNodes: nodes,
       initialEdges: edges,
       initialViewport: controlledViewport ?? defaultViewport
     })
   )[0];
-  const handleRegistry = (0, import_react14.useState)(() => createHandleRegistry())[0];
-  const [handleVersion, setHandleVersion] = (0, import_react14.useState)(0);
-  (0, import_react14.useEffect)(() => {
+  const handleRegistry = (0, import_react15.useState)(() => createHandleRegistry())[0];
+  const [handleVersion, setHandleVersion] = (0, import_react15.useState)(0);
+  (0, import_react15.useEffect)(() => {
     const unsub = handleRegistry.subscribe(() => {
       setHandleVersion((v) => v + 1);
     });
     return unsub;
   }, [handleRegistry]);
-  const kinds = (0, import_react14.useMemo)(() => buildNodeKindRegistry(DEFAULT_NODE_KINDS, nodeKinds), [nodeKinds]);
-  const containerRef = (0, import_react14.useRef)(null);
-  (0, import_react14.useEffect)(() => store.setNodes(nodes), [store, nodes]);
-  (0, import_react14.useEffect)(() => store.setEdges(edges), [store, edges]);
-  const [uncontrolledVp, setUncontrolledVp] = (0, import_react14.useState)(controlledViewport ?? defaultViewport);
+  const kinds = (0, import_react15.useMemo)(() => buildNodeKindRegistry(DEFAULT_NODE_KINDS, nodeKinds), [nodeKinds]);
+  const containerRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useEffect)(() => store.setNodes(nodes), [store, nodes]);
+  (0, import_react15.useEffect)(() => store.setEdges(edges), [store, edges]);
+  const [uncontrolledVp, setUncontrolledVp] = (0, import_react15.useState)(controlledViewport ?? defaultViewport);
   const viewport = controlledViewport ?? uncontrolledVp;
-  (0, import_react14.useEffect)(() => store.setViewport(viewport), [store, viewport]);
-  const setViewport = (0, import_react14.useCallback)(
+  (0, import_react15.useEffect)(() => store.setViewport(viewport), [store, viewport]);
+  const setViewport = (0, import_react15.useCallback)(
     (next) => {
       if (controlledViewport === void 0) setUncontrolledVp(next);
       onViewportChange?.(next);
     },
     [controlledViewport, onViewportChange]
   );
-  const selectedNodeIds = (0, import_react14.useMemo)(() => {
+  const selectedNodeIds = (0, import_react15.useMemo)(() => {
     const s = /* @__PURE__ */ new Set();
     for (const n of nodes) if (n.selected) s.add(n.id);
     return s;
   }, [nodes]);
-  const selectedEdgeIds = (0, import_react14.useMemo)(() => {
+  const selectedEdgeIds = (0, import_react15.useMemo)(() => {
     const s = /* @__PURE__ */ new Set();
     for (const e of edges) if (e.selected) s.add(e.id);
     return s;
   }, [edges]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     store.setSelection(selectedNodeIds, selectedEdgeIds);
     if (onSelectionChange) {
       onSelectionChange({
@@ -2330,7 +2512,7 @@ function FlowCanvas({
       });
     }
   }, [store, selectedNodeIds, selectedEdgeIds, nodes, edges, onSelectionChange]);
-  const selectNode = (0, import_react14.useCallback)(
+  const selectNode = (0, import_react15.useCallback)(
     (id, additive) => {
       const next = [];
       const nextEdges = [];
@@ -2353,14 +2535,14 @@ function FlowCanvas({
     },
     [nodes, edges, selectedNodeIds, onNodesChange, onEdgesChange]
   );
-  const notifyNodeClick = (0, import_react14.useCallback)(
+  const notifyNodeClick = (0, import_react15.useCallback)(
     (id) => {
       const node = nodes.find((n) => n.id === id);
       if (node) onNodeClick?.(node);
     },
     [nodes, onNodeClick]
   );
-  const selectEdge = (0, import_react14.useCallback)(
+  const selectEdge = (0, import_react15.useCallback)(
     (id, additive) => {
       const next = [];
       const nextNodes = [];
@@ -2385,7 +2567,7 @@ function FlowCanvas({
     },
     [nodes, edges, selectedEdgeIds, onEdgesChange, onNodesChange, onEdgeClick]
   );
-  const clearSelection = (0, import_react14.useCallback)(() => {
+  const clearSelection = (0, import_react15.useCallback)(() => {
     const ns = [];
     const es = [];
     for (const n of nodes) if (n.selected) ns.push(change.node.select(n.id, false));
@@ -2393,9 +2575,9 @@ function FlowCanvas({
     if (ns.length) onNodesChange?.(ns);
     if (es.length) onEdgesChange?.(es);
   }, [nodes, edges, onNodesChange, onEdgesChange]);
-  const dragRef = (0, import_react14.useRef)(null);
-  const [draggingId, setDraggingId] = (0, import_react14.useState)(null);
-  const beginNodeDrag = (0, import_react14.useCallback)(
+  const dragRef = (0, import_react15.useRef)(null);
+  const [draggingId, setDraggingId] = (0, import_react15.useState)(null);
+  const beginNodeDrag = (0, import_react15.useCallback)(
     (nodeId, pointerId, clientX, clientY, altKey = false) => {
       if (!nodesDraggable) return;
       const node = nodes.find((n) => n.id === nodeId);
@@ -2404,6 +2586,9 @@ function FlowCanvas({
         id: d.id,
         startPosition: d.position
       }));
+      const evaluateReparent = altKey || reparentOnDragRef.current;
+      const hasParent = !!node.parentId;
+      const skipClamp = altKey || reparentOnDragRef.current && !hasParent;
       dragRef.current = {
         pointerId,
         nodeId,
@@ -2411,7 +2596,8 @@ function FlowCanvas({
         startClientY: clientY,
         startPosition: node.position,
         descendants: kids,
-        altDetach: altKey && !!node.parentId,
+        skipClamp,
+        evaluateReparent,
         rafScheduled: false,
         nextDelta: null
       };
@@ -2420,12 +2606,12 @@ function FlowCanvas({
     },
     [nodes, nodesDraggable, selectNode]
   );
-  const [conn, setConn] = (0, import_react14.useState)(null);
-  const connRef = (0, import_react14.useRef)(null);
-  (0, import_react14.useEffect)(() => {
+  const [conn, setConn] = (0, import_react15.useState)(null);
+  const connRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useEffect)(() => {
     connRef.current = conn;
   }, [conn]);
-  const beginConnection = (0, import_react14.useCallback)(
+  const beginConnection = (0, import_react15.useCallback)(
     (nodeId, handleId, handleType, pointerId, clientX, clientY) => {
       if (!nodesConnectable) return;
       const node = nodes.find((n) => n.id === nodeId);
@@ -2458,63 +2644,83 @@ function FlowCanvas({
     },
     [nodes, nodesConnectable, handleRegistry, viewport, store, onConnectStart]
   );
-  const viewportRef = (0, import_react14.useRef)(viewport);
-  const nodesRef = (0, import_react14.useRef)(nodes);
-  const edgesRef = (0, import_react14.useRef)(edges);
-  const onNodesChangeRefForInstance = (0, import_react14.useRef)(onNodesChange);
-  const onEdgesChangeRefForInstance = (0, import_react14.useRef)(onEdgesChange);
-  const onBeforeDeleteRef = (0, import_react14.useRef)(onBeforeDelete);
-  const snapToGridRef = (0, import_react14.useRef)(snapToGrid);
-  const gridSizeRef = (0, import_react14.useRef)(gridSize);
-  const nodeCollisionGapRef = (0, import_react14.useRef)(nodeCollisionGap);
-  const subflowCollisionGapRef = (0, import_react14.useRef)(subflowCollisionGap ?? nodeCollisionGap);
-  (0, import_react14.useEffect)(() => {
+  const viewportRef = (0, import_react15.useRef)(viewport);
+  const nodesRef = (0, import_react15.useRef)(nodes);
+  const edgesRef = (0, import_react15.useRef)(edges);
+  const onNodesChangeRefForInstance = (0, import_react15.useRef)(onNodesChange);
+  const onEdgesChangeRefForInstance = (0, import_react15.useRef)(onEdgesChange);
+  const onBeforeDeleteRef = (0, import_react15.useRef)(onBeforeDelete);
+  const snapToGridRef = (0, import_react15.useRef)(snapToGrid);
+  const gridSizeRef = (0, import_react15.useRef)(gridSize);
+  const nodeCollisionGapRef = (0, import_react15.useRef)(nodeCollisionGap);
+  const subflowCollisionGapRef = (0, import_react15.useRef)(subflowCollisionGap ?? nodeCollisionGap);
+  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]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     onNodesChangeRefForInstance.current = onNodesChange;
   }, [onNodesChange]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     onEdgesChangeRefForInstance.current = onEdgesChange;
   }, [onEdgesChange]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     onBeforeDeleteRef.current = onBeforeDelete;
   }, [onBeforeDelete]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     snapToGridRef.current = snapToGrid;
   }, [snapToGrid]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     gridSizeRef.current = gridSize;
   }, [gridSize]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     nodeCollisionGapRef.current = nodeCollisionGap;
   }, [nodeCollisionGap]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     subflowCollisionGapRef.current = subflowCollisionGap ?? nodeCollisionGap;
   }, [subflowCollisionGap, nodeCollisionGap]);
-  const onNodesChangeRef = (0, import_react14.useRef)(onNodesChange);
-  const onConnectRef = (0, import_react14.useRef)(onConnect);
-  const onConnectEndRef = (0, import_react14.useRef)(onConnectEnd);
-  const isValidConnectionRef = (0, import_react14.useRef)(isValidConnection);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
+    reparentOnDragRef.current = reparentOnDrag;
+  }, [reparentOnDrag]);
+  (0, import_react15.useEffect)(() => {
+    autoResizeContainersRef.current = autoResizeContainers;
+  }, [autoResizeContainers]);
+  (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);
+  const isValidConnectionRef = (0, import_react15.useRef)(isValidConnection);
+  (0, import_react15.useEffect)(() => {
     viewportRef.current = viewport;
   }, [viewport]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     nodesRef.current = nodes;
   }, [nodes]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     onNodesChangeRef.current = onNodesChange;
   }, [onNodesChange]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     onConnectRef.current = onConnect;
   }, [onConnect]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     onConnectEndRef.current = onConnectEnd;
   }, [onConnectEnd]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     isValidConnectionRef.current = isValidConnection;
   }, [isValidConnection]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const onPointerMove = (e) => {
       const vp = viewportRef.current;
       const drag = dragRef.current;
@@ -2536,7 +2742,7 @@ function FlowCanvas({
               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)]);
@@ -2588,7 +2794,7 @@ function FlowCanvas({
               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([
@@ -2611,7 +2817,7 @@ function FlowCanvas({
               )
             );
           }
-          if (drag.altDetach && dragNode.parentId) {
+          if (drag.evaluateReparent) {
             const targetGroup = findContainingGroup(
               {
                 x: finalPos.x + (dragNode.width ?? 0) / 2,
@@ -2621,14 +2827,30 @@ function FlowCanvas({
               [drag.nodeId, ...drag.descendants.map((d) => d.id)]
             );
             const nextParentId = targetGroup?.id;
-            const updated = {
-              ...dragNode,
-              position: finalPos,
-              parentId: nextParentId,
-              // Preserve extent only when staying in a group.
-              extent: nextParentId ? dragNode.extent : void 0
-            };
-            changes.push(change.node.replace(drag.nodeId, updated));
+            if (nextParentId !== dragNode.parentId) {
+              const updated = {
+                ...dragNode,
+                position: finalPos,
+                parentId: nextParentId,
+                // 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));
+            }
+          }
+          if (autoResizeContainersRef.current) {
+            const containerChanges = computeContainerAutoResize(
+              nodesRef.current,
+              // Projected children: apply the position + reparent
+              // changes we just built before measuring bboxes.
+              changes,
+              containerAutoResizePaddingRef.current,
+              containerMinWidthRef.current,
+              containerMinHeightRef.current
+            );
+            for (const c2 of containerChanges) changes.push(c2);
           }
           onNodesChangeRef.current?.(changes);
         }
@@ -2637,38 +2859,54 @@ function FlowCanvas({
       }
       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 },
@@ -2701,7 +2939,26 @@ function FlowCanvas({
       window.removeEventListener("pointercancel", onPointerCancel);
     };
   }, [store]);
-  const panRef = (0, import_react14.useRef)(null);
+  (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;
     const t = e.target;
@@ -2726,7 +2983,7 @@ function FlowCanvas({
       moved: false
     };
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const onMove = (e) => {
       const pan = panRef.current;
       if (!pan || pan.pointerId !== e.pointerId) return;
@@ -2782,7 +3039,7 @@ function FlowCanvas({
       y: py - (py - viewport.y) * k
     });
   };
-  const dispatch = (0, import_react14.useCallback)(
+  const dispatch = (0, import_react15.useCallback)(
     (a) => {
       if (a.type === "connection/start") {
         beginConnection(a.nodeId, a.handleId, a.handleType, a.pointerId, a.clientX, a.clientY);
@@ -2790,7 +3047,7 @@ function FlowCanvas({
     },
     [beginConnection]
   );
-  const reportDimensions = (0, import_react14.useCallback)(
+  const reportDimensions = (0, import_react15.useCallback)(
     (nodeId, width2, height2) => {
       const node = nodes.find((n) => n.id === nodeId);
       if (!node) return;
@@ -2799,7 +3056,7 @@ function FlowCanvas({
     },
     [nodes, onNodesChange]
   );
-  const toggleNodeCollapseImpl = (0, import_react14.useCallback)(
+  const toggleNodeCollapseImpl = (0, import_react15.useCallback)(
     (nodeId) => {
       const node = nodes.find((n) => n.id === nodeId);
       if (!node) return;
@@ -2812,7 +3069,7 @@ function FlowCanvas({
     },
     [nodes, onNodesChange]
   );
-  const deleteNodeImpl = (0, import_react14.useCallback)(
+  const deleteNodeImpl = (0, import_react15.useCallback)(
     (nodeId) => {
       const incidentEdgeIds = edgesRef.current.filter((e) => e.source === nodeId || e.target === nodeId).map((e) => e.id);
       if (incidentEdgeIds.length > 0) {
@@ -2822,7 +3079,7 @@ function FlowCanvas({
     },
     [onNodesChange, onEdgesChange]
   );
-  const instance = (0, import_react14.useMemo)(
+  const instance = (0, import_react15.useMemo)(
     () => ({
       // viewport
       getViewport: () => viewportRef.current,
@@ -2963,13 +3220,29 @@ function FlowCanvas({
     }),
     [setViewport, minZoom, maxZoom]
   );
-  const initFiredRef = (0, import_react14.useRef)(false);
-  (0, import_react14.useEffect)(() => {
+  const initFiredRef = (0, import_react15.useRef)(false);
+  (0, import_react15.useEffect)(() => {
     if (initFiredRef.current) return;
     initFiredRef.current = true;
     onInit?.(instance);
   }, [instance, onInit]);
-  (0, import_react14.useEffect)(() => {
+  const fitOnInitFiredRef = (0, import_react15.useRef)(false);
+  (0, import_react15.useEffect)(() => {
+    if (fitOnInitFiredRef.current) return;
+    const opt = fitViewOnInit;
+    const shouldFit = opt === false ? false : opt !== void 0 ? true : !viewportPropProvided;
+    if (!shouldFit) return;
+    if (nodes.length === 0) return;
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!rect || rect.width === 0 || rect.height === 0) return;
+    fitOnInitFiredRef.current = true;
+    const fitOpts = typeof opt === "object" && opt !== null ? opt : void 0;
+    const raf = requestAnimationFrame(() => {
+      void instance.fitView(fitOpts);
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [fitViewOnInit, viewportPropProvided, nodes.length, instance]);
+  (0, import_react15.useEffect)(() => {
     const onKey = (e) => {
       if (e.key !== "Backspace" && e.key !== "Delete") return;
       const target = e.target;
@@ -2990,7 +3263,7 @@ function FlowCanvas({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [instance, store]);
-  const bridge = (0, import_react14.useMemo)(
+  const bridge = (0, import_react15.useMemo)(
     () => ({
       beginNodeDrag,
       selectNode,
@@ -3010,16 +3283,16 @@ function FlowCanvas({
       toggleNodeCollapseImpl
     ]
   );
-  const [panGesture, setPanGesture] = (0, import_react14.useState)(false);
+  const [panGesture, setPanGesture] = (0, import_react15.useState)(false);
   const isEmpty = nodes.length === 0 && edges.length === 0;
   const isConnecting = conn !== null;
-  const visibleNodes = (0, import_react14.useMemo)(() => nodes.filter((n) => !n.hidden), [nodes]);
-  const visibleEdges = (0, import_react14.useMemo)(() => {
+  const visibleNodes = (0, import_react15.useMemo)(() => nodes.filter((n) => !n.hidden), [nodes]);
+  const visibleEdges = (0, import_react15.useMemo)(() => {
     if (visibleNodes.length === nodes.length) return edges;
     const visibleIds = new Set(visibleNodes.map((n) => n.id));
     return edges.filter((e) => visibleIds.has(e.source) && visibleIds.has(e.target));
   }, [edges, nodes, visibleNodes]);
-  const orderedNodes = (0, import_react14.useMemo)(() => {
+  const orderedNodes = (0, import_react15.useMemo)(() => {
     const isContainer = (n) => n.type === "group" || n.type === "forEach";
     const depth = (n) => {
       let d = 0;
@@ -3038,7 +3311,7 @@ function FlowCanvas({
     containers.sort((a, b) => depth(a) - depth(b));
     return [...containers, ...others];
   }, [visibleNodes]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FlowStoreContext.Provider, { value: store, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FlowInstanceContext.Provider, { value: instance, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HandleRegistryContext.Provider, { value: handleRegistry, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FlowDispatchContext.Provider, { value: dispatch, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FlowNodeBridgeContext.Provider, { value: bridge, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FlowStoreContext.Provider, { value: store, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FlowInstanceContext.Provider, { value: instance, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(HandleRegistryContext.Provider, { value: handleRegistry, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FlowDispatchContext.Provider, { value: dispatch, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FlowNodeBridgeContext.Provider, { value: bridge, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -3083,7 +3356,7 @@ function FlowCanvas({
       },
       "data-empty": isEmpty ? "true" : void 0,
       children: [
-        background !== "none" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        background !== "none" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "div",
           {
             className: cn(
@@ -3097,7 +3370,7 @@ function FlowCanvas({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             className: "ods-flow-canvas-v2__viewport",
@@ -3108,7 +3381,7 @@ function FlowCanvas({
               transformOrigin: "0 0"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 EdgesLayer,
                 {
                   edges: visibleEdges,
@@ -3123,7 +3396,7 @@ function FlowCanvas({
               orderedNodes.map((node) => {
                 const Kind = kinds[node.type] ?? kinds.action;
                 if (!Kind) return null;
-                return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   FlowNode,
                   {
                     node,
@@ -3138,7 +3411,7 @@ function FlowCanvas({
             ]
           }
         ),
-        isEmpty && emptyState && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ods-flow-canvas-v2__empty", children: emptyState }),
+        isEmpty && emptyState && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "ods-flow-canvas-v2__empty", children: emptyState }),
         children
       ]
     }
@@ -3147,7 +3420,69 @@ function FlowCanvas({
 function onEdgesChangeRef(id, cb) {
   cb?.([change.edge.remove(id)]);
 }
-var EdgesLayer = (0, import_react14.memo)(function EdgesLayer2({
+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) {
+    if (c.type === "position" && c.position) {
+      const cur = projected.get(c.id);
+      if (cur) projected.set(c.id, { ...cur, position: c.position });
+    } else if (c.type === "replace" && c.item) {
+      projected.set(c.id, { ...projected.get(c.id), ...c.item });
+    } else if (c.type === "add" && c.item) {
+      projected.set(c.item.id, c.item);
+    }
+  }
+  const HEADER = 56;
+  const out = [];
+  for (const parent of projected.values()) {
+    if (parent.type !== "group" && parent.type !== "forEach") continue;
+    const children = [];
+    for (const n of projected.values()) {
+      if (n.parentId === parent.id) children.push(n);
+    }
+    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;
+    let maxY = Number.NEGATIVE_INFINITY;
+    for (const c of children) {
+      const cw = c.width ?? 240;
+      const ch = c.height ?? 96;
+      if (c.position.x < minX) minX = c.position.x;
+      if (c.position.y < minY) minY = c.position.y;
+      if (c.position.x + cw > maxX) maxX = c.position.x + cw;
+      if (c.position.y + ch > maxY) maxY = c.position.y + ch;
+    }
+    const targetX = minX - padding;
+    const targetY = minY - padding - HEADER;
+    const curW = parent.width ?? 480;
+    const curH = parent.height ?? 240;
+    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) {
+      out.push(change.node.position(parent.id, { x: targetX, y: targetY }, false));
+    }
+    if (sizeDirty) {
+      out.push(change.node.dimensions(parent.id, { width: nextW, height: nextH }));
+    }
+  }
+  return out;
+}
+var EdgesLayer = (0, import_react15.memo)(function EdgesLayer2({
   edges,
   nodes,
   onSelect,
@@ -3156,7 +3491,7 @@ var EdgesLayer = (0, import_react14.memo)(function EdgesLayer2({
   ghost,
   handleVersion: _handleVersion
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "svg",
     {
       className: "ods-flow-canvas-v2__edges",
@@ -3164,7 +3499,7 @@ var EdgesLayer = (0, import_react14.memo)(function EdgesLayer2({
       width: "100%",
       height: "100%",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("g", { style: { pointerEvents: "auto" }, children: edges.map((edge) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("g", { style: { pointerEvents: "auto" }, children: edges.map((edge) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           FlowEdge,
           {
             edge,
@@ -3176,7 +3511,7 @@ var EdgesLayer = (0, import_react14.memo)(function EdgesLayer2({
           },
           edge.id
         )) }),
-        ghost && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        ghost && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "path",
           {
             d: `M ${ghost.start.x} ${ghost.start.y} L ${ghost.end.x} ${ghost.end.y}`,
@@ -3191,153 +3526,456 @@ var EdgesLayer = (0, import_react14.memo)(function EdgesLayer2({
   );
 });
 
-// src/workflow/components/NodeResizer/NodeResizer.tsx
-var import_react15 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-function NodeResizer({
-  isVisible,
-  minWidth = 80,
-  minHeight = 60,
-  maxWidth,
-  maxHeight,
-  keepAspectRatio = false,
-  onResize,
-  onResizeEnd,
-  color
+// 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 { node, selected } = useFlowNodeContext();
-  const viewport = useViewport();
-  const flow = useFlow();
-  const dragRef = (0, import_react15.useRef)(null);
-  const show = isVisible ?? selected;
-  if (!show) return null;
-  const beginResize = (e, corner) => {
-    e.preventDefault();
-    e.stopPropagation();
-    e.target.setPointerCapture(e.pointerId);
-    const w = node.width ?? DEFAULT_NODE_WIDTH;
-    const h = node.height ?? DEFAULT_NODE_HEIGHT;
-    dragRef.current = {
-      pointerId: e.pointerId,
-      corner,
-      startClientX: e.clientX,
-      startClientY: e.clientY,
-      startWidth: w,
-      startHeight: h,
-      startX: node.position.x,
-      startY: node.position.y,
-      aspect: w / Math.max(1, h)
-    };
+  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 onMove = (e) => {
-    const drag = dragRef.current;
-    if (!drag || drag.pointerId !== e.pointerId) return;
-    const dx = (e.clientX - drag.startClientX) / viewport.zoom;
-    const dy = (e.clientY - drag.startClientY) / viewport.zoom;
-    let nextW = drag.startWidth;
-    let nextH = drag.startHeight;
-    let nextX = drag.startX;
-    let nextY = drag.startY;
-    switch (drag.corner) {
-      case "se":
-        nextW = drag.startWidth + dx;
-        nextH = drag.startHeight + dy;
-        break;
-      case "sw":
-        nextW = drag.startWidth - dx;
-        nextH = drag.startHeight + dy;
-        nextX = drag.startX + dx;
-        break;
-      case "ne":
-        nextW = drag.startWidth + dx;
-        nextH = drag.startHeight - dy;
-        nextY = drag.startY + dy;
-        break;
-      case "nw":
-        nextW = drag.startWidth - dx;
-        nextH = drag.startHeight - dy;
-        nextX = drag.startX + dx;
-        nextY = drag.startY + dy;
-        break;
-    }
-    if (keepAspectRatio) {
-      nextH = nextW / drag.aspect;
-      if (drag.corner === "nw" || drag.corner === "ne") {
-        nextY = drag.startY + (drag.startHeight - nextH);
+  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);
       }
     }
-    nextW = Math.max(minWidth, maxWidth ? Math.min(maxWidth, nextW) : nextW);
-    nextH = Math.max(minHeight, maxHeight ? Math.min(maxHeight, nextH) : nextH);
-    flow.updateNode(node.id, {
-      width: nextW,
-      height: nextH,
-      position: { x: nextX, y: nextY }
+    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;
     });
-    onResize?.({ width: nextW, height: nextH });
   };
-  const onUp = (e) => {
-    if (dragRef.current?.pointerId === e.pointerId) {
-      const cur = flow.getNode(node.id);
-      if (cur) {
-        onResizeEnd?.({
-          width: cur.width ?? DEFAULT_NODE_WIDTH,
-          height: cur.height ?? DEFAULT_NODE_HEIGHT
-        });
+  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);
       }
-      dragRef.current = null;
+      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 handleColor = color ?? "var(--ods-accent)";
-  const handleStyle = (corner) => {
-    const base = {
-      position: "absolute",
-      width: 12,
-      height: 12,
-      background: "var(--ods-surface-canvas)",
-      border: `2px solid ${handleColor}`,
-      borderRadius: 2,
-      cursor: cursorFor(corner),
-      touchAction: "none",
-      // Place each handle so its CENTRE sits on the corresponding corner.
-      transform: "translate(-50%, -50%)"
-    };
-    switch (corner) {
-      case "nw":
-        return { ...base, top: 0, left: 0 };
-      case "ne":
-        return { ...base, top: 0, left: "100%" };
-      case "sw":
-        return { ...base, top: "100%", left: 0 };
-      case "se":
-        return { ...base, top: "100%", left: "100%" };
+  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;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn("ods-node-resizer"), "data-flow-no-drag": "true", children: ["nw", "ne", "sw", "se"].map((corner) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    "div",
+  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",
     {
-      style: handleStyle(corner),
-      onPointerDown: (e) => beginResize(e, corner),
-      onPointerMove: onMove,
-      onPointerUp: onUp,
-      onPointerCancel: onUp,
-      "aria-label": `Resize ${corner}`
-    },
-    corner
-  )) });
+      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);
+          })
+        ] })
+      ]
+    }
+  );
 }
-function cursorFor(corner) {
-  switch (corner) {
-    case "nw":
-    case "se":
-      return "nwse-resize";
-    case "ne":
-    case "sw":
-      return "nesw-resize";
-  }
+
+// 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_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function NodeToolbar({
   isVisible,
   position = "top",
@@ -3352,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),
@@ -3364,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",
@@ -3513,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,
@@ -3564,6 +4204,7 @@ function toggleGroupCollapse(groupId, nodes) {
   useNodeData,
   useNodes,
   useSelection,
-  useViewport
+  useViewport,
+  useViewportOrNull
 });
 //# sourceMappingURL=workflow.cjs.map