@octaviaflow/core 3.0.18-beta.6 → 3.0.18-beta.9

package/dist/workflow.cjs

@@ -77,7 +77,8 @@ __export(workflow_exports, {
   useNodeData: () => useNodeData,
   useNodes: () => useNodes,
   useSelection: () => useSelection,
-  useViewport: () => useViewport
+  useViewport: () => useViewport,
+  useViewportOrNull: () => useViewportOrNull
 });
 module.exports = __toCommonJS(workflow_exports);
 
@@ -646,6 +647,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));
 }
@@ -943,7 +961,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 };
@@ -1791,10 +1809,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 +1973,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 +1986,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 +2022,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 +2033,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 +2050,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 +2060,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 +2071,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 +2083,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 +2095,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 +2117,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 +2150,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 +2170,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 +2203,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 +2262,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 +2272,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 +2280,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 +2291,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 +2303,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 +2314,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 +2328,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 +2339,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 +2360,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 +2369,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 +2379,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 +2390,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 +2398,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 +2410,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 +2432,58 @@ 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,
+    height = "100%",
+    width = "100%",
+    className,
+    style,
+    children,
+    emptyState
+  } = props;
   const presetDefaults = {
     mouse: { panOnDrag: true, zoomOnScroll: true },
     trackpad: { panOnDrag: true, zoomOnScroll: true },
@@ -2282,46 +2491,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 +2539,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 +2562,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 +2594,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 +2602,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 +2613,7 @@ function FlowCanvas({
         id: d.id,
         startPosition: d.position
       }));
+      const wantsReparent = altKey || reparentOnDragRef.current;
       dragRef.current = {
         pointerId,
         nodeId,
@@ -2411,7 +2621,7 @@ function FlowCanvas({
         startClientY: clientY,
         startPosition: node.position,
         descendants: kids,
-        altDetach: altKey && !!node.parentId,
+        altDetach: wantsReparent,
         rafScheduled: false,
         nextDelta: null
       };
@@ -2420,12 +2630,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 +2668,75 @@ 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);
+  (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]);
+  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;
@@ -2611,7 +2833,7 @@ function FlowCanvas({
               )
             );
           }
-          if (drag.altDetach && dragNode.parentId) {
+          if (drag.altDetach) {
             const targetGroup = findContainingGroup(
               {
                 x: finalPos.x + (dragNode.width ?? 0) / 2,
@@ -2621,14 +2843,26 @@ 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,
+                // Preserve extent only when staying in a group.
+                extent: nextParentId ? dragNode.extent : 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
+            );
+            for (const c2 of containerChanges) changes.push(c2);
           }
           onNodesChangeRef.current?.(changes);
         }
@@ -2701,7 +2935,7 @@ function FlowCanvas({
       window.removeEventListener("pointercancel", onPointerCancel);
     };
   }, [store]);
-  const panRef = (0, import_react14.useRef)(null);
+  const panRef = (0, import_react15.useRef)(null);
   const onCanvasPointerDown = (e) => {
     if (e.button !== 0) return;
     const t = e.target;
@@ -2726,7 +2960,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 +3016,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 +3024,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 +3033,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 +3046,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 +3056,7 @@ function FlowCanvas({
     },
     [onNodesChange, onEdgesChange]
   );
-  const instance = (0, import_react14.useMemo)(
+  const instance = (0, import_react15.useMemo)(
     () => ({
       // viewport
       getViewport: () => viewportRef.current,
@@ -2963,13 +3197,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 +3240,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 +3260,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 +3288,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 +3333,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 +3347,7 @@ function FlowCanvas({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             className: "ods-flow-canvas-v2__viewport",
@@ -3108,7 +3358,7 @@ function FlowCanvas({
               transformOrigin: "0 0"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 EdgesLayer,
                 {
                   edges: visibleEdges,
@@ -3123,7 +3373,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 +3388,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 +3397,60 @@ function FlowCanvas({
 function onEdgesChangeRef(id, cb) {
   cb?.([change.edge.remove(id)]);
 }
-var EdgesLayer = (0, import_react14.memo)(function EdgesLayer2({
+function computeContainerAutoResize(nodes, pending, padding) {
+  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) 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 targetW = maxX - minX + padding * 2;
+    const targetH = maxY - minY + padding * 2 + HEADER;
+    const curW = parent.width ?? 480;
+    const curH = parent.height ?? 240;
+    const nextW = Math.max(curW, targetW);
+    const nextH = Math.max(curH, targetH);
+    const 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 +3459,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 +3467,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 +3479,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,151 +3494,6 @@ 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
-}) {
-  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 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_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",
-    {
-      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/NodeToolbar/NodeToolbar.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function NodeToolbar({
@@ -3564,6 +3722,7 @@ function toggleGroupCollapse(groupId, nodes) {
   useNodeData,
   useNodes,
   useSelection,
-  useViewport
+  useViewport,
+  useViewportOrNull
 });
 //# sourceMappingURL=workflow.cjs.map