@octaviaflow/core 3.0.18-beta.2 → 3.0.18-beta.21

package/dist/workflow.cjs

@@ -31,6 +31,8 @@ __export(workflow_exports, {
   FlowEdge: () => FlowEdge,
   FlowNode: () => FlowNode,
   ForEachNode: () => ForEachNode,
+  FxPanel: () => FxPanel,
+  FxToggleButton: () => FxToggleButton,
   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);
 
@@ -646,6 +649,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 +728,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 +845,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 +912,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 +942,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 +958,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 +970,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 +1153,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 +1363,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,6 +1406,8 @@ 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;
@@ -1383,14 +1415,14 @@ function FlowEdgeImpl({
   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 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 +1469,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 +1746,7 @@ var DEFAULT_HANDLE_ID = "default";
 function Handle({
   type,
   position,
+  routeSide,
   id = DEFAULT_HANDLE_ID,
   isConnectable = true,
   isConnectableStart,
@@ -1730,11 +1769,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 +1833,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 +1997,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 +2010,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 +2046,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 +2057,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 +2074,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 +2084,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 +2095,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 +2107,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 +2119,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 +2141,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 +2174,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" })
       ]
     }
   );
@@ -2003,24 +2194,27 @@ var ForEachNode = ({
   const d = node.data ?? {};
   const iteratorExpr = d.iterator ?? d.description ?? "items[]";
   const collapsed = !!d.collapsed;
+  const disabled = !!d.disabled;
   const hiddenCount = d.hiddenCount;
   const bridge = useFlowNodeBridge();
   const onChevronClick = (e) => {
     e.stopPropagation();
     bridge.toggleNodeCollapse(node.id);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       className: "ods-flow-foreach",
       "data-collapsed": collapsed ? "true" : "false",
+      "data-disabled": disabled ? "true" : void 0,
       style: {
         width: node.width ?? 420,
         height: collapsed ? 40 : node.height ?? 260
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ods-flow-foreach__header", 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-foreach__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
               type: "button",
@@ -2033,24 +2227,57 @@ var ForEachNode = ({
               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: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ods-flow-foreach__icon", "aria-hidden": "true", children: "\u21BB" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ods-flow-foreach__title", children: d.title ?? "For each" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className: "ods-flow-foreach__iterator", children: iteratorExpr }),
+          disabled && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "span",
+            {
+              className: "ods-flow-foreach__disabled-badge",
+              "aria-label": "Disabled subflow",
+              children: "Disabled"
+            }
+          ),
+          collapsed && hiddenCount !== void 0 && hiddenCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "ods-flow-foreach__count", "aria-label": `${hiddenCount} hidden steps`, children: [
             hiddenCount,
             " steps"
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_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", id: "__group_in", label: !collapsed ? "in" : void 0 }),
+        collapsed ? (
+          // Collapsed: single bottom exit so the container behaves like a
+          // regular action in the chain.
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Handle, { type: "source", position: "bottom", id: "__group_out" })
+        ) : (
+          // Expanded: two bottom outputs spread across the bottom edge.
+          // Index/total tell the Handle to position them at 33% and 66%
+          // along the edge (per `handleSideStyle`). `each` is left of
+          // centre, `__group_out` (labelled "done") is right of centre.
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              Handle,
+              {
+                type: "source",
+                position: "bottom",
+                id: "each",
+                label: "each",
+                index: 0,
+                total: 2
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              Handle,
+              {
+                type: "source",
+                position: "bottom",
+                id: "__group_out",
+                label: "done",
+                index: 1,
+                total: 2
+              }
+            )
+          ] })
+        )
       ]
     }
   );
@@ -2059,7 +2286,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 +2296,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 +2304,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 +2315,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 +2327,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 +2338,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 +2352,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 +2363,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 +2384,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 +2393,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 +2403,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 +2414,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 +2422,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 +2434,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 +2456,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 +2517,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 +2565,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 +2588,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 +2620,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 +2628,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 +2639,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 +2649,8 @@ function FlowCanvas({
         startClientY: clientY,
         startPosition: node.position,
         descendants: kids,
-        altDetach: altKey && !!node.parentId,
+        skipClamp,
+        evaluateReparent,
         rafScheduled: false,
         nextDelta: null
       };
@@ -2420,12 +2659,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 +2697,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 +2795,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 +2847,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 +2870,7 @@ function FlowCanvas({
               )
             );
           }
-          if (drag.altDetach && dragNode.parentId) {
+          if (drag.evaluateReparent) {
             const targetGroup = findContainingGroup(
               {
                 x: finalPos.x + (dragNode.width ?? 0) / 2,
@@ -2621,14 +2880,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 +2912,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 +2992,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 +3036,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 +3092,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 +3100,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 +3109,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 +3122,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 +3132,7 @@ function FlowCanvas({
     },
     [onNodesChange, onEdgesChange]
   );
-  const instance = (0, import_react14.useMemo)(
+  const instance = (0, import_react15.useMemo)(
     () => ({
       // viewport
       getViewport: () => viewportRef.current,
@@ -2963,13 +3273,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 +3316,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 +3336,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 +3364,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 +3409,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 +3423,7 @@ function FlowCanvas({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             className: "ods-flow-canvas-v2__viewport",
@@ -3108,7 +3434,7 @@ function FlowCanvas({
               transformOrigin: "0 0"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 EdgesLayer,
                 {
                   edges: visibleEdges,
@@ -3123,7 +3449,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 +3464,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 +3473,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 +3544,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 +3552,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 +3564,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 +3579,231 @@ 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_GLYPH = {
+  function: "\u0192",
+  variable: "\u2B21"
+};
+function FxPanel({
+  categories,
+  title = "FX / IO",
+  hint = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    "Drag items into any input field with the ",
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: "FX" }),
+    " indicator"
+  ] }),
+  search: controlledSearch,
+  defaultSearch = "",
+  onSearchChange,
+  expandedCategory: controlledExpanded,
+  defaultExpandedCategory,
+  onExpandedCategoryChange,
+  onClose,
+  onItemDragStart,
+  onItemSelect,
+  width = 292,
+  emptyLabel = "No matches",
+  searchPlaceholder = "Search 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 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);
-      }
-    }
-    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 [internalExpanded, setInternalExpanded] = (0, import_react16.useState)(
+    defaultExpandedCategory !== void 0 ? defaultExpandedCategory : categories.find((c) => c.items.length > 0)?.id ?? null
+  );
+  const expanded = controlledExpanded ?? internalExpanded;
+  const setExpanded = (id) => {
+    if (controlledExpanded === void 0) setInternalExpanded(id);
+    onExpandedCategoryChange?.(id);
   };
-  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 [draggingId, setDraggingId] = (0, import_react16.useState)(null);
+  const filtered = (0, import_react16.useMemo)(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return categories;
+    return categories.map((cat) => {
+      if (cat.label.toLowerCase().includes(q)) return cat;
+      const items = cat.items.filter(
+        (it) => it.label.toLowerCase().includes(q) || (it.description?.toLowerCase().includes(q) ?? false)
+      );
+      return { ...cat, items };
+    }).filter((cat) => cat.items.length > 0);
+  }, [categories, search]);
+  const hasResults = filtered.length > 0;
+  const handleDragStart = (item, category) => (e) => {
+    setDraggingId(item.id);
+    if (onItemDragStart) {
+      onItemDragStart(item, category, e);
+    } else {
+      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";
     }
   };
-  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",
+  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 : "FX / IO",
+      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 FX panel",
+              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 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 && /* @__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", children: [
+          filtered.map((cat) => {
+            const isOpen = expanded === cat.id;
+            const kind = cat.kind ?? "function";
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-flow-fx-panel__category", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  className: "ods-flow-fx-panel__category-header",
+                  "aria-expanded": isOpen,
+                  onClick: () => setExpanded(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)(
+                            "span",
+                            {
+                              className: "ods-flow-fx-panel__badge-glyph",
+                              "aria-hidden": "true",
+                              children: KIND_GLYPH[kind]
+                            }
+                          ),
+                          cat.label
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-flow-fx-panel__count", children: cat.items.length })
+                  ]
+                }
+              ),
+              isOpen && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ods-flow-fx-panel__items", children: cat.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                "div",
+                {
+                  className: cn(
+                    "ods-flow-fx-panel__item",
+                    draggingId === item.id && "ods-flow-fx-panel__item--dragging"
+                  ),
+                  draggable: true,
+                  title: item.insertValue,
+                  onDragStart: handleDragStart(item, cat),
+                  onDragEnd: () => setDraggingId(null),
+                  onClick: onItemSelect ? () => onItemSelect(item, cat) : void 0,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { className: "ods-flow-fx-panel__item-label", children: item.label }),
+                    item.description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-flow-fx-panel__item-desc", children: item.description })
+                  ]
+                },
+                item.id
+              )) })
+            ] }, cat.id);
+          }),
+          !hasResults && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ods-flow-fx-panel__empty", children: emptyLabel })
+        ] })
+      ]
+    }
+  );
 }
-function cursorFor(corner) {
-  switch (corner) {
-    case "nw":
-    case "se":
-      return "nwse-resize";
-    case "ne":
-    case "sw":
-      return "nesw-resize";
-  }
+
+// src/workflow/components/FxPanel/FxToggleButton.tsx
+var import_icons3 = require("@octaviaflow/icons");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function FxToggleButton({
+  active = false,
+  label = "FX",
+  className,
+  type = "button",
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "button",
+    {
+      ...rest,
+      type,
+      className: cn(
+        "ods-flow-fx-toggle",
+        active && "ods-flow-fx-toggle--active",
+        label == null && "ods-flow-fx-toggle--icon-only",
+        className
+      ),
+      "aria-pressed": active,
+      title: active ? "Hide FX / IO" : "Show FX / IO",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons3.FunctionIcon, { size: "sm", className: "ods-flow-fx-toggle__icon" }),
+        label != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ods-flow-fx-toggle__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 +3818,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 +3830,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",
@@ -3518,6 +3984,8 @@ function toggleGroupCollapse(groupId, nodes) {
   FlowEdge,
   FlowNode,
   ForEachNode,
+  FxPanel,
+  FxToggleButton,
   GroupNode,
   Handle,
   HttpRequestNode,
@@ -3564,6 +4032,7 @@ function toggleGroupCollapse(groupId, nodes) {
   useNodeData,
   useNodes,
   useSelection,
-  useViewport
+  useViewport,
+  useViewportOrNull
 });
 //# sourceMappingURL=workflow.cjs.map