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

package/dist/index.cjs

@@ -14439,10 +14439,26 @@ var import_react71 = require("react");
 // src/workflow/hooks/useFlow.ts
 var import_react69 = require("react");
 var FlowInstanceContext = (0, import_react69.createContext)(null);
+function useFlow() {
+  const instance = (0, import_react69.useContext)(FlowInstanceContext);
+  if (!instance) {
+    throw new Error("[@octaviaflow/core/workflow] useFlow() must be called inside <FlowCanvas>.");
+  }
+  return instance;
+}
 
 // src/workflow/store/context.ts
 var import_react70 = require("react");
 var FlowStoreContext = (0, import_react70.createContext)(null);
+function useFlowStore() {
+  const store = (0, import_react70.useContext)(FlowStoreContext);
+  if (!store) {
+    throw new Error(
+      "[@octaviaflow/core/workflow] useFlowStore must be called inside a <FlowCanvas>."
+    );
+  }
+  return store;
+}
 
 // src/components/FlowMinimap/FlowMinimap.tsx
 var import_jsx_runtime52 = require("react/jsx-runtime");
@@ -14806,6 +14822,18 @@ var import_react74 = require("react");
 
 // src/workflow/store/selectors.ts
 var import_react72 = require("react");
+function useFlowSelector(selector, isEqual = Object.is) {
+  void isEqual;
+  const store = useFlowStore();
+  return (0, import_react72.useSyncExternalStore)(
+    store.subscribe,
+    () => selector(store.getSnapshot()),
+    () => selector(store.getSnapshot())
+  );
+}
+function useViewport() {
+  return useFlowSelector((s) => s.viewport);
+}
 var VIEWPORT_OR_NULL_NO_STORE_SUBSCRIBE = (_cb) => () => {
 };
 var VIEWPORT_OR_NULL_NO_STORE_SNAPSHOT = () => null;
@@ -28657,7 +28685,7 @@ var UserCard = (0, import_react144.forwardRef)(
 UserCard.displayName = "UserCard";
 
 // src/components/WorkflowEditor/WorkflowEditor.tsx
-var import_react154 = require("react");
+var import_react155 = require("react");
 
 // src/hooks/useWorkflow.ts
 var import_react145 = require("react");
@@ -29352,7 +29380,7 @@ function useWorkflow(options = {}) {
 }
 
 // src/workflow/components/FlowCanvas/FlowCanvas.tsx
-var import_react153 = require("react");
+var import_react154 = require("react");
 
 // src/workflow/store/changes.ts
 function applyNodeChanges(nodes, changes) {
@@ -30224,10 +30252,155 @@ function handleSideStyle(side, index, total) {
   }
 }
 
-// src/workflow/components/kinds/BaseNode.tsx
-var import_icons49 = require("@octaviaflow/icons");
+// src/workflow/components/NodeResizer/NodeResizer.tsx
 var import_react152 = require("react");
 var import_jsx_runtime131 = 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_react152.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_WIDTH3;
+    const h = node.height ?? DEFAULT_NODE_HEIGHT3;
+    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_WIDTH3,
+          height: cur.height ?? DEFAULT_NODE_HEIGHT3
+        });
+      }
+      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_runtime131.jsx)("div", { className: cn("ods-node-resizer"), "data-flow-no-drag": "true", children: ["nw", "ne", "sw", "se"].map((corner) => /* @__PURE__ */ (0, import_jsx_runtime131.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_icons49 = require("@octaviaflow/icons");
+var import_react153 = require("react");
+var import_jsx_runtime132 = require("react/jsx-runtime");
 function BaseNode({
   kind,
   kindIcon,
@@ -30243,10 +30416,10 @@ function BaseNode({
   className,
   children
 }) {
-  const ctx = (0, import_react152.useContext)(FlowNodeContext);
-  const bridge = (0, import_react152.useContext)(FlowNodeBridgeContext);
+  const ctx = (0, import_react153.useContext)(FlowNodeContext);
+  const bridge = (0, import_react153.useContext)(FlowNodeBridgeContext);
   const deleteHandler = onDelete === false ? void 0 : onDelete ?? (ctx && bridge ? () => bridge.deleteNode(ctx.id) : void 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
     "div",
     {
       className: cn(
@@ -30256,31 +30429,31 @@ function BaseNode({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "ods-flow-base-node__pill", children: [
-          kindIcon && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "ods-flow-base-node__pill-icon", "aria-hidden": "true", children: kindIcon }),
-          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "ods-flow-base-node__pill-label", children: kind })
+        /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "ods-flow-base-node__pill", children: [
+          kindIcon && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "ods-flow-base-node__pill-icon", "aria-hidden": "true", children: kindIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "ods-flow-base-node__pill-label", children: kind })
         ] }),
-        status && status !== "idle" && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+        status && status !== "idle" && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
           "span",
           {
             className: cn("ods-flow-base-node__status", `ods-flow-base-node__status--${status}`),
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "ods-flow-base-node__body", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "ods-flow-base-node__content", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "ods-flow-base-node__bubble", "aria-hidden": "true", children: icon }),
-            /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "ods-flow-base-node__content-text", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "ods-flow-base-node__content-title", children: title }),
-              (chip !== void 0 || description !== void 0 || valueChip !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "ods-flow-base-node__content-info", children: [
-                chip !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "ods-flow-base-node__chip", children: chip }),
-                description !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "ods-flow-base-node__description", children: description }),
-                valueChip !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "ods-flow-base-node__value-chip", children: valueChip })
+        /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "ods-flow-base-node__body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "ods-flow-base-node__content", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "ods-flow-base-node__bubble", "aria-hidden": "true", children: icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "ods-flow-base-node__content-text", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "ods-flow-base-node__content-title", children: title }),
+              (chip !== void 0 || description !== void 0 || valueChip !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "ods-flow-base-node__content-info", children: [
+                chip !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "ods-flow-base-node__chip", children: chip }),
+                description !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "ods-flow-base-node__description", children: description }),
+                valueChip !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "ods-flow-base-node__value-chip", children: valueChip })
               ] })
             ] })
           ] }),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "ods-flow-base-node__footer", children: footer }),
-          deleteHandler && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+          footer && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "ods-flow-base-node__footer", children: footer }),
+          deleteHandler && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
             "button",
             {
               type: "button",
@@ -30292,7 +30465,7 @@ function BaseNode({
               "aria-label": "Delete node",
               "data-flow-no-drag": "true",
               title: "Delete node",
-              children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons49.TrashCanIcon, { size: 16, "aria-hidden": true })
+              children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons49.TrashCanIcon, { size: 16, "aria-hidden": true })
             }
           )
         ] }),
@@ -30303,12 +30476,12 @@ function BaseNode({
 }
 
 // src/workflow/components/kinds/index.tsx
-var import_jsx_runtime132 = require("react/jsx-runtime");
+var import_jsx_runtime133 = require("react/jsx-runtime");
 var ActionNode = ({
   node
 }) => {
   const d = node.data ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
     BaseNode,
     {
       kind: d.kind ?? "ACTION",
@@ -30320,8 +30493,8 @@ var ActionNode = ({
       status: d.status,
       accent: "green",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Handle, { type: "target", position: "top" }),
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Handle, { type: "source", position: "bottom" })
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Handle, { type: "target", position: "top" }),
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Handle, { type: "source", position: "bottom" })
       ]
     }
   );
@@ -30330,7 +30503,7 @@ var TriggerNode = ({
   node
 }) => {
   const d = node.data ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     BaseNode,
     {
       kind: d.kind ?? "TRIGGER",
@@ -30341,7 +30514,7 @@ var TriggerNode = ({
       valueChip: d.valueChip,
       status: d.status,
       accent: "green",
-      children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Handle, { type: "source", position: "bottom" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Handle, { type: "source", position: "bottom" })
     }
   );
 };
@@ -30353,7 +30526,7 @@ var ConditionNode = ({
     { id: "true", label: "true" },
     { id: "false", label: "false" }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
     BaseNode,
     {
       kind: d.kind ?? "CONDITION",
@@ -30365,8 +30538,8 @@ var ConditionNode = ({
       status: d.status,
       accent: "amber",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Handle, { type: "target", position: "top" }),
-        branches.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Handle, { type: "target", position: "top" }),
+        branches.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
           Handle,
           {
             type: "source",
@@ -30387,24 +30560,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_runtime132.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.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_runtime132.jsxs)("div", { className: "ods-flow-group__header", "data-flow-no-drag": "false", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(NodeResizer, { minWidth: 240, minHeight: 120 }),
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "ods-flow-group__header", "data-flow-no-drag": "false", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
             "button",
             {
               type: "button",
@@ -30417,15 +30593,16 @@ var GroupNode = ({
               children: collapsed ? "\u25B8" : "\u25BE"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "ods-flow-group__title", children: d.title ?? "Group" }),
-          d.subtitle && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "ods-flow-group__subtitle", children: d.subtitle }),
-          collapsed && hiddenCount !== void 0 && hiddenCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("span", { className: "ods-flow-group__count", "aria-label": `${hiddenCount} hidden steps`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", { className: "ods-flow-group__title", children: d.title ?? "Group" }),
+          d.subtitle && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", { className: "ods-flow-group__subtitle", children: d.subtitle }),
+          disabled && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", { className: "ods-flow-group__disabled-badge", "aria-label": "Disabled subflow", children: "Disabled" }),
+          collapsed && hiddenCount !== void 0 && hiddenCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("span", { className: "ods-flow-group__count", "aria-label": `${hiddenCount} hidden steps`, children: [
             hiddenCount,
             " steps"
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Handle, { type: "target", position: "top", id: "__group_in" }),
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Handle, { type: "source", position: "bottom", id: "__group_out" })
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Handle, { type: "target", position: "top", id: "__group_in" }),
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Handle, { type: "source", position: "bottom", id: "__group_out" })
       ]
     }
   );
@@ -30436,24 +30613,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_runtime132.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.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_runtime132.jsxs)("div", { className: "ods-flow-foreach__header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(NodeResizer, { minWidth: 240, minHeight: 120 }),
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "ods-flow-foreach__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
             "button",
             {
               type: "button",
@@ -30466,24 +30646,57 @@ var ForEachNode = ({
               children: collapsed ? "\u25B8" : "\u25BE"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "ods-flow-foreach__icon", "aria-hidden": "true", children: "\u21BB" }),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "ods-flow-foreach__title", children: d.title ?? "For each" }),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("code", { className: "ods-flow-foreach__iterator", children: iteratorExpr }),
-          collapsed && hiddenCount !== void 0 && hiddenCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("span", { className: "ods-flow-foreach__count", "aria-label": `${hiddenCount} hidden steps`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", { className: "ods-flow-foreach__icon", "aria-hidden": "true", children: "\u21BB" }),
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", { className: "ods-flow-foreach__title", children: d.title ?? "For each" }),
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("code", { className: "ods-flow-foreach__iterator", children: iteratorExpr }),
+          disabled && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+            "span",
+            {
+              className: "ods-flow-foreach__disabled-badge",
+              "aria-label": "Disabled subflow",
+              children: "Disabled"
+            }
+          ),
+          collapsed && hiddenCount !== void 0 && hiddenCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("span", { className: "ods-flow-foreach__count", "aria-label": `${hiddenCount} hidden steps`, children: [
             hiddenCount,
             " steps"
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Handle, { type: "target", position: "top", id: "__group_in" }),
-        /* @__PURE__ */ (0, import_jsx_runtime132.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_runtime132.jsxs)(import_jsx_runtime132.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Handle, { type: "target", position: "top", id: "in", label: "in" }),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Handle, { type: "source", position: "right", id: "item", label: "item" }),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Handle, { type: "source", position: "bottom", id: "done", label: "done" })
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime133.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_runtime133.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_runtime133.jsxs)(import_jsx_runtime133.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+              Handle,
+              {
+                type: "source",
+                position: "bottom",
+                id: "each",
+                label: "each",
+                index: 0,
+                total: 2
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+              Handle,
+              {
+                type: "source",
+                position: "bottom",
+                id: "__group_out",
+                label: "done",
+                index: 1,
+                total: 2
+              }
+            )
+          ] })
+        )
       ]
     }
   );
@@ -30492,7 +30705,7 @@ var OutputNode = ({
   node
 }) => {
   const d = node.data ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     BaseNode,
     {
       kind: d.kind ?? "OUTPUT",
@@ -30502,7 +30715,7 @@ var OutputNode = ({
       description: d.description ?? d.subtitle,
       status: d.status,
       accent: "green",
-      children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Handle, { type: "target", position: "top" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Handle, { type: "target", position: "top" })
     }
   );
 };
@@ -30510,7 +30723,7 @@ var ErrorNode = ({
   node
 }) => {
   const d = node.data ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
     BaseNode,
     {
       kind: d.kind ?? "ERROR",
@@ -30521,8 +30734,8 @@ var ErrorNode = ({
       status: d.status ?? "error",
       accent: "red",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Handle, { type: "target", position: "top" }),
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Handle, { type: "source", position: "bottom" })
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Handle, { type: "target", position: "top" }),
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Handle, { type: "source", position: "bottom" })
       ]
     }
   );
@@ -30533,7 +30746,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_runtime132.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
     BaseNode,
     {
       kind: d.kind ?? "WAIT",
@@ -30544,8 +30757,8 @@ var WaitNode = ({
       status: d.status,
       accent: "violet",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Handle, { type: "target", position: "top" }),
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Handle, { type: "source", position: "bottom" })
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Handle, { type: "target", position: "top" }),
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Handle, { type: "source", position: "bottom" })
       ]
     }
   );
@@ -30558,7 +30771,7 @@ var ParallelNode = ({
     { id: "a", label: "a" },
     { id: "b", label: "b" }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
     BaseNode,
     {
       kind: d.kind ?? "PARALLEL",
@@ -30569,8 +30782,8 @@ var ParallelNode = ({
       status: d.status,
       accent: "blue",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Handle, { type: "target", position: "top" }),
-        branches.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Handle, { type: "target", position: "top" }),
+        branches.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
           Handle,
           {
             type: "source",
@@ -30590,7 +30803,7 @@ var StickyNode = ({
   node
 }) => {
   const d = node.data ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
     "div",
     {
       className: "ods-flow-sticky",
@@ -30599,8 +30812,8 @@ var StickyNode = ({
         minHeight: node.height ?? 120
       },
       children: [
-        d.title && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "ods-flow-sticky__title", children: d.title }),
-        d.description && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "ods-flow-sticky__body", children: d.description })
+        d.title && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "ods-flow-sticky__title", children: d.title }),
+        d.description && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "ods-flow-sticky__body", children: d.description })
       ]
     }
   );
@@ -30609,7 +30822,7 @@ var WebhookNode = ({
   node
 }) => {
   const d = node.data ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     BaseNode,
     {
       kind: d.kind ?? "WEBHOOK",
@@ -30620,7 +30833,7 @@ var WebhookNode = ({
       valueChip: d.valueChip,
       status: d.status,
       accent: "blue",
-      children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Handle, { type: "source", position: "bottom" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Handle, { type: "source", position: "bottom" })
     }
   );
 };
@@ -30628,7 +30841,7 @@ var HttpRequestNode = ({
   node
 }) => {
   const d = node.data ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
     BaseNode,
     {
       kind: d.kind ?? "HTTP",
@@ -30640,8 +30853,8 @@ var HttpRequestNode = ({
       status: d.status,
       accent: "blue",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Handle, { type: "target", position: "top" }),
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Handle, { type: "source", position: "bottom" })
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Handle, { type: "target", position: "top" }),
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Handle, { type: "source", position: "bottom" })
       ]
     }
   );
@@ -30662,7 +30875,7 @@ var DEFAULT_NODE_KINDS = {
 };
 
 // src/workflow/components/FlowCanvas/FlowCanvas.tsx
-var import_jsx_runtime133 = require("react/jsx-runtime");
+var import_jsx_runtime134 = require("react/jsx-runtime");
 var DEFAULT_VIEWPORT2 = { x: 0, y: 0, zoom: 1 };
 function FlowCanvas2(props) {
   const viewportPropProvided = props.viewport !== void 0 || props.defaultViewport !== void 0;
@@ -30704,6 +30917,9 @@ function FlowCanvas2(props) {
     snapToGrid = false,
     nodeCollisionGap = -1,
     subflowCollisionGap,
+    reparentOnDrag = false,
+    autoResizeContainers = false,
+    containerAutoResizePadding = 32,
     height = "100%",
     width = "100%",
     className,
@@ -30718,46 +30934,46 @@ function FlowCanvas2(props) {
   };
   const panOnDrag = panOnDragProp ?? presetDefaults[preset].panOnDrag;
   const zoomOnScroll = zoomOnScrollProp ?? presetDefaults[preset].zoomOnScroll;
-  const store = (0, import_react153.useState)(
+  const store = (0, import_react154.useState)(
     () => createFlowStore({
       initialNodes: nodes,
       initialEdges: edges,
       initialViewport: controlledViewport ?? defaultViewport
     })
   )[0];
-  const handleRegistry = (0, import_react153.useState)(() => createHandleRegistry())[0];
-  const [handleVersion, setHandleVersion] = (0, import_react153.useState)(0);
-  (0, import_react153.useEffect)(() => {
+  const handleRegistry = (0, import_react154.useState)(() => createHandleRegistry())[0];
+  const [handleVersion, setHandleVersion] = (0, import_react154.useState)(0);
+  (0, import_react154.useEffect)(() => {
     const unsub = handleRegistry.subscribe(() => {
       setHandleVersion((v) => v + 1);
     });
     return unsub;
   }, [handleRegistry]);
-  const kinds = (0, import_react153.useMemo)(() => buildNodeKindRegistry(DEFAULT_NODE_KINDS, nodeKinds), [nodeKinds]);
-  const containerRef = (0, import_react153.useRef)(null);
-  (0, import_react153.useEffect)(() => store.setNodes(nodes), [store, nodes]);
-  (0, import_react153.useEffect)(() => store.setEdges(edges), [store, edges]);
-  const [uncontrolledVp, setUncontrolledVp] = (0, import_react153.useState)(controlledViewport ?? defaultViewport);
+  const kinds = (0, import_react154.useMemo)(() => buildNodeKindRegistry(DEFAULT_NODE_KINDS, nodeKinds), [nodeKinds]);
+  const containerRef = (0, import_react154.useRef)(null);
+  (0, import_react154.useEffect)(() => store.setNodes(nodes), [store, nodes]);
+  (0, import_react154.useEffect)(() => store.setEdges(edges), [store, edges]);
+  const [uncontrolledVp, setUncontrolledVp] = (0, import_react154.useState)(controlledViewport ?? defaultViewport);
   const viewport = controlledViewport ?? uncontrolledVp;
-  (0, import_react153.useEffect)(() => store.setViewport(viewport), [store, viewport]);
-  const setViewport = (0, import_react153.useCallback)(
+  (0, import_react154.useEffect)(() => store.setViewport(viewport), [store, viewport]);
+  const setViewport = (0, import_react154.useCallback)(
     (next) => {
       if (controlledViewport === void 0) setUncontrolledVp(next);
       onViewportChange?.(next);
     },
     [controlledViewport, onViewportChange]
   );
-  const selectedNodeIds = (0, import_react153.useMemo)(() => {
+  const selectedNodeIds = (0, import_react154.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_react153.useMemo)(() => {
+  const selectedEdgeIds = (0, import_react154.useMemo)(() => {
     const s = /* @__PURE__ */ new Set();
     for (const e of edges) if (e.selected) s.add(e.id);
     return s;
   }, [edges]);
-  (0, import_react153.useEffect)(() => {
+  (0, import_react154.useEffect)(() => {
     store.setSelection(selectedNodeIds, selectedEdgeIds);
     if (onSelectionChange) {
       onSelectionChange({
@@ -30766,7 +30982,7 @@ function FlowCanvas2(props) {
       });
     }
   }, [store, selectedNodeIds, selectedEdgeIds, nodes, edges, onSelectionChange]);
-  const selectNode = (0, import_react153.useCallback)(
+  const selectNode = (0, import_react154.useCallback)(
     (id, additive) => {
       const next = [];
       const nextEdges = [];
@@ -30789,14 +31005,14 @@ function FlowCanvas2(props) {
     },
     [nodes, edges, selectedNodeIds, onNodesChange, onEdgesChange]
   );
-  const notifyNodeClick = (0, import_react153.useCallback)(
+  const notifyNodeClick = (0, import_react154.useCallback)(
     (id) => {
       const node = nodes.find((n) => n.id === id);
       if (node) onNodeClick?.(node);
     },
     [nodes, onNodeClick]
   );
-  const selectEdge = (0, import_react153.useCallback)(
+  const selectEdge = (0, import_react154.useCallback)(
     (id, additive) => {
       const next = [];
       const nextNodes = [];
@@ -30821,7 +31037,7 @@ function FlowCanvas2(props) {
     },
     [nodes, edges, selectedEdgeIds, onEdgesChange, onNodesChange, onEdgeClick]
   );
-  const clearSelection = (0, import_react153.useCallback)(() => {
+  const clearSelection = (0, import_react154.useCallback)(() => {
     const ns = [];
     const es = [];
     for (const n of nodes) if (n.selected) ns.push(change.node.select(n.id, false));
@@ -30829,9 +31045,9 @@ function FlowCanvas2(props) {
     if (ns.length) onNodesChange?.(ns);
     if (es.length) onEdgesChange?.(es);
   }, [nodes, edges, onNodesChange, onEdgesChange]);
-  const dragRef = (0, import_react153.useRef)(null);
-  const [draggingId, setDraggingId] = (0, import_react153.useState)(null);
-  const beginNodeDrag = (0, import_react153.useCallback)(
+  const dragRef = (0, import_react154.useRef)(null);
+  const [draggingId, setDraggingId] = (0, import_react154.useState)(null);
+  const beginNodeDrag = (0, import_react154.useCallback)(
     (nodeId, pointerId, clientX, clientY, altKey = false) => {
       if (!nodesDraggable) return;
       const node = nodes.find((n) => n.id === nodeId);
@@ -30840,6 +31056,7 @@ function FlowCanvas2(props) {
         id: d.id,
         startPosition: d.position
       }));
+      const wantsReparent = altKey || reparentOnDragRef.current;
       dragRef.current = {
         pointerId,
         nodeId,
@@ -30847,7 +31064,7 @@ function FlowCanvas2(props) {
         startClientY: clientY,
         startPosition: node.position,
         descendants: kids,
-        altDetach: altKey && !!node.parentId,
+        altDetach: wantsReparent,
         rafScheduled: false,
         nextDelta: null
       };
@@ -30856,12 +31073,12 @@ function FlowCanvas2(props) {
     },
     [nodes, nodesDraggable, selectNode]
   );
-  const [conn, setConn] = (0, import_react153.useState)(null);
-  const connRef = (0, import_react153.useRef)(null);
-  (0, import_react153.useEffect)(() => {
+  const [conn, setConn] = (0, import_react154.useState)(null);
+  const connRef = (0, import_react154.useRef)(null);
+  (0, import_react154.useEffect)(() => {
     connRef.current = conn;
   }, [conn]);
-  const beginConnection = (0, import_react153.useCallback)(
+  const beginConnection = (0, import_react154.useCallback)(
     (nodeId, handleId, handleType, pointerId, clientX, clientY) => {
       if (!nodesConnectable) return;
       const node = nodes.find((n) => n.id === nodeId);
@@ -30894,63 +31111,75 @@ function FlowCanvas2(props) {
     },
     [nodes, nodesConnectable, handleRegistry, viewport, store, onConnectStart]
   );
-  const viewportRef = (0, import_react153.useRef)(viewport);
-  const nodesRef = (0, import_react153.useRef)(nodes);
-  const edgesRef = (0, import_react153.useRef)(edges);
-  const onNodesChangeRefForInstance = (0, import_react153.useRef)(onNodesChange);
-  const onEdgesChangeRefForInstance = (0, import_react153.useRef)(onEdgesChange);
-  const onBeforeDeleteRef = (0, import_react153.useRef)(onBeforeDelete);
-  const snapToGridRef = (0, import_react153.useRef)(snapToGrid);
-  const gridSizeRef = (0, import_react153.useRef)(gridSize);
-  const nodeCollisionGapRef = (0, import_react153.useRef)(nodeCollisionGap);
-  const subflowCollisionGapRef = (0, import_react153.useRef)(subflowCollisionGap ?? nodeCollisionGap);
-  (0, import_react153.useEffect)(() => {
+  const viewportRef = (0, import_react154.useRef)(viewport);
+  const nodesRef = (0, import_react154.useRef)(nodes);
+  const edgesRef = (0, import_react154.useRef)(edges);
+  const onNodesChangeRefForInstance = (0, import_react154.useRef)(onNodesChange);
+  const onEdgesChangeRefForInstance = (0, import_react154.useRef)(onEdgesChange);
+  const onBeforeDeleteRef = (0, import_react154.useRef)(onBeforeDelete);
+  const snapToGridRef = (0, import_react154.useRef)(snapToGrid);
+  const gridSizeRef = (0, import_react154.useRef)(gridSize);
+  const nodeCollisionGapRef = (0, import_react154.useRef)(nodeCollisionGap);
+  const subflowCollisionGapRef = (0, import_react154.useRef)(subflowCollisionGap ?? nodeCollisionGap);
+  const reparentOnDragRef = (0, import_react154.useRef)(reparentOnDrag);
+  const autoResizeContainersRef = (0, import_react154.useRef)(autoResizeContainers);
+  const containerAutoResizePaddingRef = (0, import_react154.useRef)(containerAutoResizePadding);
+  (0, import_react154.useEffect)(() => {
     edgesRef.current = edges;
   }, [edges]);
-  (0, import_react153.useEffect)(() => {
+  (0, import_react154.useEffect)(() => {
     onNodesChangeRefForInstance.current = onNodesChange;
   }, [onNodesChange]);
-  (0, import_react153.useEffect)(() => {
+  (0, import_react154.useEffect)(() => {
     onEdgesChangeRefForInstance.current = onEdgesChange;
   }, [onEdgesChange]);
-  (0, import_react153.useEffect)(() => {
+  (0, import_react154.useEffect)(() => {
     onBeforeDeleteRef.current = onBeforeDelete;
   }, [onBeforeDelete]);
-  (0, import_react153.useEffect)(() => {
+  (0, import_react154.useEffect)(() => {
     snapToGridRef.current = snapToGrid;
   }, [snapToGrid]);
-  (0, import_react153.useEffect)(() => {
+  (0, import_react154.useEffect)(() => {
     gridSizeRef.current = gridSize;
   }, [gridSize]);
-  (0, import_react153.useEffect)(() => {
+  (0, import_react154.useEffect)(() => {
     nodeCollisionGapRef.current = nodeCollisionGap;
   }, [nodeCollisionGap]);
-  (0, import_react153.useEffect)(() => {
+  (0, import_react154.useEffect)(() => {
     subflowCollisionGapRef.current = subflowCollisionGap ?? nodeCollisionGap;
   }, [subflowCollisionGap, nodeCollisionGap]);
-  const onNodesChangeRef = (0, import_react153.useRef)(onNodesChange);
-  const onConnectRef = (0, import_react153.useRef)(onConnect);
-  const onConnectEndRef = (0, import_react153.useRef)(onConnectEnd);
-  const isValidConnectionRef = (0, import_react153.useRef)(isValidConnection);
-  (0, import_react153.useEffect)(() => {
+  (0, import_react154.useEffect)(() => {
+    reparentOnDragRef.current = reparentOnDrag;
+  }, [reparentOnDrag]);
+  (0, import_react154.useEffect)(() => {
+    autoResizeContainersRef.current = autoResizeContainers;
+  }, [autoResizeContainers]);
+  (0, import_react154.useEffect)(() => {
+    containerAutoResizePaddingRef.current = containerAutoResizePadding;
+  }, [containerAutoResizePadding]);
+  const onNodesChangeRef = (0, import_react154.useRef)(onNodesChange);
+  const onConnectRef = (0, import_react154.useRef)(onConnect);
+  const onConnectEndRef = (0, import_react154.useRef)(onConnectEnd);
+  const isValidConnectionRef = (0, import_react154.useRef)(isValidConnection);
+  (0, import_react154.useEffect)(() => {
     viewportRef.current = viewport;
   }, [viewport]);
-  (0, import_react153.useEffect)(() => {
+  (0, import_react154.useEffect)(() => {
     nodesRef.current = nodes;
   }, [nodes]);
-  (0, import_react153.useEffect)(() => {
+  (0, import_react154.useEffect)(() => {
     onNodesChangeRef.current = onNodesChange;
   }, [onNodesChange]);
-  (0, import_react153.useEffect)(() => {
+  (0, import_react154.useEffect)(() => {
     onConnectRef.current = onConnect;
   }, [onConnect]);
-  (0, import_react153.useEffect)(() => {
+  (0, import_react154.useEffect)(() => {
     onConnectEndRef.current = onConnectEnd;
   }, [onConnectEnd]);
-  (0, import_react153.useEffect)(() => {
+  (0, import_react154.useEffect)(() => {
     isValidConnectionRef.current = isValidConnection;
   }, [isValidConnection]);
-  (0, import_react153.useEffect)(() => {
+  (0, import_react154.useEffect)(() => {
     const onPointerMove = (e) => {
       const vp = viewportRef.current;
       const drag = dragRef.current;
@@ -31047,7 +31276,7 @@ function FlowCanvas2(props) {
               )
             );
           }
-          if (drag.altDetach && dragNode.parentId) {
+          if (drag.altDetach) {
             const targetGroup = findContainingGroup(
               {
                 x: finalPos.x + (dragNode.width ?? 0) / 2,
@@ -31057,14 +31286,26 @@ function FlowCanvas2(props) {
               [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);
         }
@@ -31137,7 +31378,7 @@ function FlowCanvas2(props) {
       window.removeEventListener("pointercancel", onPointerCancel);
     };
   }, [store]);
-  const panRef = (0, import_react153.useRef)(null);
+  const panRef = (0, import_react154.useRef)(null);
   const onCanvasPointerDown = (e) => {
     if (e.button !== 0) return;
     const t = e.target;
@@ -31162,7 +31403,7 @@ function FlowCanvas2(props) {
       moved: false
     };
   };
-  (0, import_react153.useEffect)(() => {
+  (0, import_react154.useEffect)(() => {
     const onMove = (e) => {
       const pan = panRef.current;
       if (!pan || pan.pointerId !== e.pointerId) return;
@@ -31218,7 +31459,7 @@ function FlowCanvas2(props) {
       y: py - (py - viewport.y) * k
     });
   };
-  const dispatch = (0, import_react153.useCallback)(
+  const dispatch = (0, import_react154.useCallback)(
     (a) => {
       if (a.type === "connection/start") {
         beginConnection(a.nodeId, a.handleId, a.handleType, a.pointerId, a.clientX, a.clientY);
@@ -31226,7 +31467,7 @@ function FlowCanvas2(props) {
     },
     [beginConnection]
   );
-  const reportDimensions = (0, import_react153.useCallback)(
+  const reportDimensions = (0, import_react154.useCallback)(
     (nodeId, width2, height2) => {
       const node = nodes.find((n) => n.id === nodeId);
       if (!node) return;
@@ -31235,7 +31476,7 @@ function FlowCanvas2(props) {
     },
     [nodes, onNodesChange]
   );
-  const toggleNodeCollapseImpl = (0, import_react153.useCallback)(
+  const toggleNodeCollapseImpl = (0, import_react154.useCallback)(
     (nodeId) => {
       const node = nodes.find((n) => n.id === nodeId);
       if (!node) return;
@@ -31248,7 +31489,7 @@ function FlowCanvas2(props) {
     },
     [nodes, onNodesChange]
   );
-  const deleteNodeImpl = (0, import_react153.useCallback)(
+  const deleteNodeImpl = (0, import_react154.useCallback)(
     (nodeId) => {
       const incidentEdgeIds = edgesRef.current.filter((e) => e.source === nodeId || e.target === nodeId).map((e) => e.id);
       if (incidentEdgeIds.length > 0) {
@@ -31258,7 +31499,7 @@ function FlowCanvas2(props) {
     },
     [onNodesChange, onEdgesChange]
   );
-  const instance = (0, import_react153.useMemo)(
+  const instance = (0, import_react154.useMemo)(
     () => ({
       // viewport
       getViewport: () => viewportRef.current,
@@ -31399,14 +31640,14 @@ function FlowCanvas2(props) {
     }),
     [setViewport, minZoom, maxZoom]
   );
-  const initFiredRef = (0, import_react153.useRef)(false);
-  (0, import_react153.useEffect)(() => {
+  const initFiredRef = (0, import_react154.useRef)(false);
+  (0, import_react154.useEffect)(() => {
     if (initFiredRef.current) return;
     initFiredRef.current = true;
     onInit?.(instance);
   }, [instance, onInit]);
-  const fitOnInitFiredRef = (0, import_react153.useRef)(false);
-  (0, import_react153.useEffect)(() => {
+  const fitOnInitFiredRef = (0, import_react154.useRef)(false);
+  (0, import_react154.useEffect)(() => {
     if (fitOnInitFiredRef.current) return;
     const opt = fitViewOnInit;
     const shouldFit = opt === false ? false : opt !== void 0 ? true : !viewportPropProvided;
@@ -31421,7 +31662,7 @@ function FlowCanvas2(props) {
     });
     return () => cancelAnimationFrame(raf);
   }, [fitViewOnInit, viewportPropProvided, nodes.length, instance]);
-  (0, import_react153.useEffect)(() => {
+  (0, import_react154.useEffect)(() => {
     const onKey = (e) => {
       if (e.key !== "Backspace" && e.key !== "Delete") return;
       const target = e.target;
@@ -31442,7 +31683,7 @@ function FlowCanvas2(props) {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [instance, store]);
-  const bridge = (0, import_react153.useMemo)(
+  const bridge = (0, import_react154.useMemo)(
     () => ({
       beginNodeDrag,
       selectNode,
@@ -31462,16 +31703,16 @@ function FlowCanvas2(props) {
       toggleNodeCollapseImpl
     ]
   );
-  const [panGesture, setPanGesture] = (0, import_react153.useState)(false);
+  const [panGesture, setPanGesture] = (0, import_react154.useState)(false);
   const isEmpty = nodes.length === 0 && edges.length === 0;
   const isConnecting = conn !== null;
-  const visibleNodes = (0, import_react153.useMemo)(() => nodes.filter((n) => !n.hidden), [nodes]);
-  const visibleEdges = (0, import_react153.useMemo)(() => {
+  const visibleNodes = (0, import_react154.useMemo)(() => nodes.filter((n) => !n.hidden), [nodes]);
+  const visibleEdges = (0, import_react154.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_react153.useMemo)(() => {
+  const orderedNodes = (0, import_react154.useMemo)(() => {
     const isContainer = (n) => n.type === "group" || n.type === "forEach";
     const depth = (n) => {
       let d = 0;
@@ -31490,7 +31731,7 @@ function FlowCanvas2(props) {
     containers.sort((a, b) => depth(a) - depth(b));
     return [...containers, ...others];
   }, [visibleNodes]);
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(FlowStoreContext.Provider, { value: store, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(FlowInstanceContext.Provider, { value: instance, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(HandleRegistryContext.Provider, { value: handleRegistry, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(FlowDispatchContext.Provider, { value: dispatch, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(FlowNodeBridgeContext.Provider, { value: bridge, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(FlowStoreContext.Provider, { value: store, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(FlowInstanceContext.Provider, { value: instance, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(HandleRegistryContext.Provider, { value: handleRegistry, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(FlowDispatchContext.Provider, { value: dispatch, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(FlowNodeBridgeContext.Provider, { value: bridge, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -31535,7 +31776,7 @@ function FlowCanvas2(props) {
       },
       "data-empty": isEmpty ? "true" : void 0,
       children: [
-        background !== "none" && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+        background !== "none" && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
           "div",
           {
             className: cn(
@@ -31549,7 +31790,7 @@ function FlowCanvas2(props) {
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
           "div",
           {
             className: "ods-flow-canvas-v2__viewport",
@@ -31560,7 +31801,7 @@ function FlowCanvas2(props) {
               transformOrigin: "0 0"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
                 EdgesLayer,
                 {
                   edges: visibleEdges,
@@ -31575,7 +31816,7 @@ function FlowCanvas2(props) {
               orderedNodes.map((node) => {
                 const Kind = kinds[node.type] ?? kinds.action;
                 if (!Kind) return null;
-                return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
                   FlowNode3,
                   {
                     node,
@@ -31590,7 +31831,7 @@ function FlowCanvas2(props) {
             ]
           }
         ),
-        isEmpty && emptyState && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "ods-flow-canvas-v2__empty", children: emptyState }),
+        isEmpty && emptyState && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "ods-flow-canvas-v2__empty", children: emptyState }),
         children
       ]
     }
@@ -31599,7 +31840,60 @@ function FlowCanvas2(props) {
 function onEdgesChangeRef(id, cb) {
   cb?.([change.edge.remove(id)]);
 }
-var EdgesLayer = (0, import_react153.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_react154.memo)(function EdgesLayer2({
   edges,
   nodes,
   onSelect,
@@ -31608,7 +31902,7 @@ var EdgesLayer = (0, import_react153.memo)(function EdgesLayer2({
   ghost,
   handleVersion: _handleVersion
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
     "svg",
     {
       className: "ods-flow-canvas-v2__edges",
@@ -31616,7 +31910,7 @@ var EdgesLayer = (0, import_react153.memo)(function EdgesLayer2({
       width: "100%",
       height: "100%",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("g", { style: { pointerEvents: "auto" }, children: edges.map((edge) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("g", { style: { pointerEvents: "auto" }, children: edges.map((edge) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
           FlowEdge2,
           {
             edge,
@@ -31628,7 +31922,7 @@ var EdgesLayer = (0, import_react153.memo)(function EdgesLayer2({
           },
           edge.id
         )) }),
-        ghost && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+        ghost && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
           "path",
           {
             d: `M ${ghost.start.x} ${ghost.start.y} L ${ghost.end.x} ${ghost.end.y}`,
@@ -31644,7 +31938,7 @@ var EdgesLayer = (0, import_react153.memo)(function EdgesLayer2({
 });
 
 // src/components/WorkflowEditor/WorkflowEditor.tsx
-var import_jsx_runtime134 = require("react/jsx-runtime");
+var import_jsx_runtime135 = require("react/jsx-runtime");
 var NODE_KIND_MAP = {
   trigger: "trigger",
   action: "action",
@@ -31689,7 +31983,7 @@ function WorkflowEditor({
   drawer,
   console: consoleSlot,
   minimap,
-  emptyState = /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DefaultEmptyState, {}),
+  emptyState = /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DefaultEmptyState, {}),
   children,
   background = "dots",
   snapToGrid = true,
@@ -31717,44 +32011,44 @@ function WorkflowEditor({
 }) {
   const wf = useWorkflow(options);
   const { workflow, dispatch, canUndo, canRedo, undo, redo } = wf;
-  const [uncontrolledLock, setUncontrolledLock] = (0, import_react154.useState)(false);
-  const [uncontrolledDrawer, setUncontrolledDrawer] = (0, import_react154.useState)(!!drawer);
-  const [uncontrolledHistory, setUncontrolledHistory] = (0, import_react154.useState)(false);
-  const [uncontrolledDebug, setUncontrolledDebug] = (0, import_react154.useState)(false);
+  const [uncontrolledLock, setUncontrolledLock] = (0, import_react155.useState)(false);
+  const [uncontrolledDrawer, setUncontrolledDrawer] = (0, import_react155.useState)(!!drawer);
+  const [uncontrolledHistory, setUncontrolledHistory] = (0, import_react155.useState)(false);
+  const [uncontrolledDebug, setUncontrolledDebug] = (0, import_react155.useState)(false);
   const isLockMode = controlledLockMode ?? uncontrolledLock;
   const isDrawerOpen = controlledDrawerOpen ?? uncontrolledDrawer;
   const isHistoryOpen = controlledHistoryOpen ?? uncontrolledHistory;
   const isDebugOpen = controlledDebugOpen ?? uncontrolledDebug;
-  const toggleLock = (0, import_react154.useCallback)(() => {
+  const toggleLock = (0, import_react155.useCallback)(() => {
     const next = !isLockMode;
     if (controlledLockMode === void 0) setUncontrolledLock(next);
     onToggleLockMode?.(next);
   }, [isLockMode, controlledLockMode, onToggleLockMode]);
-  const toggleDrawer = (0, import_react154.useCallback)(() => {
+  const toggleDrawer = (0, import_react155.useCallback)(() => {
     const next = !isDrawerOpen;
     if (controlledDrawerOpen === void 0) setUncontrolledDrawer(next);
     onToggleDrawer?.(next);
   }, [isDrawerOpen, controlledDrawerOpen, onToggleDrawer]);
-  const toggleHistory = (0, import_react154.useCallback)(() => {
+  const toggleHistory = (0, import_react155.useCallback)(() => {
     const next = !isHistoryOpen;
     if (controlledHistoryOpen === void 0) setUncontrolledHistory(next);
     onToggleHistory?.(next);
   }, [isHistoryOpen, controlledHistoryOpen, onToggleHistory]);
-  const toggleDebug = (0, import_react154.useCallback)(() => {
+  const toggleDebug = (0, import_react155.useCallback)(() => {
     const next = !isDebugOpen;
     if (controlledDebugOpen === void 0) setUncontrolledDebug(next);
     onToggleDebug?.(next);
   }, [isDebugOpen, controlledDebugOpen, onToggleDebug]);
-  const handleReset = (0, import_react154.useCallback)(() => {
+  const handleReset = (0, import_react155.useCallback)(() => {
     if (onReset) onReset();
     else dispatch({ type: "RESET" });
   }, [onReset, dispatch]);
-  const nextNodes = (0, import_react154.useMemo)(
+  const nextNodes = (0, import_react155.useMemo)(
     () => workflow.canvas.nodes.map(toNextNode),
     [workflow.canvas.nodes]
   );
-  const nextEdges = (0, import_react154.useMemo)(() => workflow.canvas.edges.map(toNextEdge), [workflow.canvas.edges]);
-  const onNodesChange = (0, import_react154.useCallback)(
+  const nextEdges = (0, import_react155.useMemo)(() => workflow.canvas.edges.map(toNextEdge), [workflow.canvas.edges]);
+  const onNodesChange = (0, import_react155.useCallback)(
     (changes) => {
       const reduced = applyNodeChanges(
         nextNodes,
@@ -31795,7 +32089,7 @@ function WorkflowEditor({
     },
     [nextNodes, workflow.canvas.nodes, wf, onNodeSelect]
   );
-  const onEdgesChange = (0, import_react154.useCallback)(
+  const onEdgesChange = (0, import_react155.useCallback)(
     (changes) => {
       const reduced = applyEdgeChanges(nextEdges, changes);
       const byId = new Map(reduced.map((e) => [e.id, e]));
@@ -31805,18 +32099,18 @@ function WorkflowEditor({
     },
     [nextEdges, workflow.canvas.edges, wf]
   );
-  const onConnect = (0, import_react154.useCallback)(
+  const onConnect = (0, import_react155.useCallback)(
     (c) => {
       wf.createEdge(c.source, c.sourceHandle ?? "default", c.target, c.targetHandle ?? "default");
     },
     [wf]
   );
-  const [canvasSize, setCanvasSize] = (0, import_react154.useState)({ w: 0, h: 0 });
-  const handleCanvasRef = (0, import_react154.useCallback)((node) => {
+  const [canvasSize, setCanvasSize] = (0, import_react155.useState)({ w: 0, h: 0 });
+  const handleCanvasRef = (0, import_react155.useCallback)((node) => {
     if (!node) return;
     setCanvasSize({ w: node.clientWidth, h: node.clientHeight });
   }, []);
-  const fitToView = (0, import_react154.useCallback)(() => {
+  const fitToView = (0, import_react155.useCallback)(() => {
     const nodes = workflow.canvas.nodes;
     if (nodes.length === 0) return;
     let minX = Infinity;
@@ -31844,9 +32138,9 @@ function WorkflowEditor({
     const cy = (minY + maxY) / 2;
     wf.setViewport({ x: cw / 2 - cx * zoom, y: ch / 2 - cy * zoom, zoom });
   }, [workflow.canvas.nodes, canvasSize, wf]);
-  const defaultToolbar = (0, import_react154.useMemo)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(FlowToolbar, { placement: "left", children: [
-      onSave && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+  const defaultToolbar = (0, import_react155.useMemo)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(FlowToolbar, { placement: "left", children: [
+      onSave && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
         FlowToolbarButton,
         {
           icon: FlowToolbarIcons.save,
@@ -31855,7 +32149,7 @@ function WorkflowEditor({
           onClick: () => onSave(workflow)
         }
       ),
-      onRun && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+      onRun && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
         FlowToolbarButton,
         {
           icon: isExecuting ? FlowToolbarIcons.stop : FlowToolbarIcons.run,
@@ -31866,7 +32160,7 @@ function WorkflowEditor({
           onClick: isExecuting ? onStop : onRun
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
         FlowToolbarButton,
         {
           icon: isLockMode ? FlowToolbarIcons.lock : FlowToolbarIcons.unlock,
@@ -31876,7 +32170,7 @@ function WorkflowEditor({
           onClick: toggleLock
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
         FlowToolbarButton,
         {
           icon: FlowToolbarIcons.reset,
@@ -31884,7 +32178,7 @@ function WorkflowEditor({
           onClick: handleReset
         }
       ),
-      drawer && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+      drawer && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
         FlowToolbarButton,
         {
           icon: isDrawerOpen ? FlowToolbarIcons.drawerClose : FlowToolbarIcons.drawerOpen,
@@ -31893,8 +32187,8 @@ function WorkflowEditor({
           onClick: toggleDrawer
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(FlowToolbarDivider, {}),
-      onSettings && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(FlowToolbarDivider, {}),
+      onSettings && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
         FlowToolbarButton,
         {
           icon: FlowToolbarIcons.settings,
@@ -31902,7 +32196,7 @@ function WorkflowEditor({
           onClick: onSettings
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
         FlowToolbarButton,
         {
           icon: FlowToolbarIcons.history,
@@ -31911,7 +32205,7 @@ function WorkflowEditor({
           onClick: toggleHistory
         }
       ),
-      isDebugModeEnabled && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+      isDebugModeEnabled && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
         FlowToolbarButton,
         {
           icon: FlowToolbarIcons.debug,
@@ -31920,8 +32214,8 @@ function WorkflowEditor({
           onClick: toggleDebug
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(FlowToolbarDivider, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(FlowToolbarDivider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
         FlowToolbarButton,
         {
           icon: FlowToolbarIcons.undo,
@@ -31931,7 +32225,7 @@ function WorkflowEditor({
           onClick: undo
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
         FlowToolbarButton,
         {
           icon: FlowToolbarIcons.redo,
@@ -31941,8 +32235,8 @@ function WorkflowEditor({
           onClick: redo
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(FlowToolbarDivider, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(FlowToolbarDivider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
         FlowToolbarZoom,
         {
           zoom: workflow.canvas.viewport.zoom,
@@ -31981,21 +32275,21 @@ function WorkflowEditor({
   );
   const resolvedToolbar = toolbar === "default" ? defaultToolbar : toolbar === null ? null : toolbar;
   const isEmpty = workflow.canvas.nodes.length === 0 && workflow.canvas.edges.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
     "div",
     {
       className: cn("ods-workflow-editor", className),
       style: { width, height, position: "relative", display: "flex", overflow: "hidden" },
       children: [
-        drawer && isDrawerOpen && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "ods-workflow-editor__drawer", children: drawer }),
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
+        drawer && isDrawerOpen && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "ods-workflow-editor__drawer", children: drawer }),
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
           "div",
           {
             ref: handleCanvasRef,
             className: "ods-workflow-editor__canvas-wrapper",
             style: { position: "relative", flex: 1, minWidth: 0 },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
                 FlowCanvas2,
                 {
                   nodes: nextNodes,
@@ -32009,9 +32303,9 @@ function WorkflowEditor({
                   children: resolvedToolbar
                 }
               ),
-              minimap && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "ods-workflow-editor__minimap", children: minimap }),
-              consoleSlot && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "ods-workflow-editor__console", children: consoleSlot }),
-              isEmpty && emptyState && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "ods-workflow-editor__empty", children: emptyState }),
+              minimap && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "ods-workflow-editor__minimap", children: minimap }),
+              consoleSlot && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "ods-workflow-editor__console", children: consoleSlot }),
+              isEmpty && emptyState && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "ods-workflow-editor__empty", children: emptyState }),
               children
             ]
           }
@@ -32021,7 +32315,7 @@ function WorkflowEditor({
   );
 }
 function DefaultEmptyState() {
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
     "div",
     {
       style: {
@@ -32036,14 +32330,14 @@ function DefaultEmptyState() {
         pointerEvents: "none"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
           "div",
           {
             style: { fontSize: 14, fontWeight: 600, color: "var(--ods-text-primary)", marginBottom: 4 },
             children: "Start with a trigger"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { style: { fontSize: 12 }, children: "Drop an action here, or use the drawer to add your first node." })
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { style: { fontSize: 12 }, children: "Drop an action here, or use the drawer to add your first node." })
       ]
     }
   );
@@ -32053,7 +32347,7 @@ function DefaultEmptyState() {
 var import_icons50 = require("@octaviaflow/icons");
 
 // src/hooks/useRelativeTime.ts
-var import_react155 = require("react");
+var import_react156 = require("react");
 function toMs(t) {
   if (t == null) return null;
   return typeof t === "number" ? t : t.getTime();
@@ -32072,8 +32366,8 @@ function formatRelativeTime(when, now2 = Date.now()) {
 }
 function useRelativeTime(date, options = {}) {
   const { intervalMs = 3e4 } = options;
-  const [now2, setNow] = (0, import_react155.useState)(() => Date.now());
-  (0, import_react155.useEffect)(() => {
+  const [now2, setNow] = (0, import_react156.useState)(() => Date.now());
+  (0, import_react156.useEffect)(() => {
     if (typeof window === "undefined") return;
     const id = window.setInterval(() => setNow(Date.now()), intervalMs);
     return () => window.clearInterval(id);
@@ -32082,7 +32376,7 @@ function useRelativeTime(date, options = {}) {
 }
 
 // src/hooks/useWorkflowRuntime.ts
-var import_react156 = require("react");
+var import_react157 = require("react");
 function toMs2(t) {
   if (t == null) return null;
   return typeof t === "number" ? t : t.getTime();
@@ -32096,8 +32390,8 @@ function formatWorkflowRuntime(ms) {
   return h > 0 ? `${h}:${pad2(m)}:${pad2(sec)}` : `${pad2(m)}:${pad2(sec)}`;
 }
 function useWorkflowRuntime(startedAt, active) {
-  const [, force] = (0, import_react156.useState)(0);
-  (0, import_react156.useEffect)(() => {
+  const [, force] = (0, import_react157.useState)(0);
+  (0, import_react157.useEffect)(() => {
     if (!active || startedAt == null) return;
     if (typeof window === "undefined") return;
     const id = window.setInterval(() => force((n) => n + 1), 1e3);
@@ -32109,7 +32403,7 @@ function useWorkflowRuntime(startedAt, active) {
 }
 
 // src/components/WorkflowHeader/WorkflowHeader.tsx
-var import_jsx_runtime135 = require("react/jsx-runtime");
+var import_jsx_runtime136 = require("react/jsx-runtime");
 function WorkflowHeader({
   name,
   statusTone,
@@ -32152,21 +32446,21 @@ function WorkflowHeader({
     className
   );
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("header", { className: rootCls, "data-loading": "true", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "ods-workflow-header__left", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Skeleton, { variant: "text", width: "120px" }),
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Skeleton, { variant: "text", width: "180px" })
+    return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("header", { className: rootCls, "data-loading": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "ods-workflow-header__left", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Skeleton, { variant: "text", width: "120px" }),
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Skeleton, { variant: "text", width: "180px" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "ods-workflow-header__right", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Skeleton, { variant: "circular", width: "28px", height: "28px" }),
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Skeleton, { variant: "circular", width: "28px", height: "28px" })
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "ods-workflow-header__right", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Skeleton, { variant: "circular", width: "28px", height: "28px" }),
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Skeleton, { variant: "circular", width: "28px", height: "28px" })
       ] })
     ] });
   }
   const envAccentStyle = environment?.accent ? { borderLeftColor: environment.accent } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("header", { className: rootCls, "data-running": isRunning ? "true" : void 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "ods-workflow-header__left", children: [
-      onBack && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("header", { className: rootCls, "data-running": isRunning ? "true" : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "ods-workflow-header__left", children: [
+      onBack && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
         "button",
         {
           type: "button",
@@ -32174,13 +32468,13 @@ function WorkflowHeader({
           onClick: onBack,
           "aria-label": `Back to ${typeof parentLabel === "string" ? parentLabel : "previous"}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_icons50.ChevronLeftIcon, { size: "sm" }),
-            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "ods-workflow-header__back-label", children: parentLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "ods-workflow-header__back-separator", "aria-hidden": "true", children: "/" })
+            /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_icons50.ChevronLeftIcon, { size: "sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "ods-workflow-header__back-label", children: parentLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "ods-workflow-header__back-separator", "aria-hidden": "true", children: "/" })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
         "span",
         {
           className: cn(
@@ -32191,10 +32485,10 @@ function WorkflowHeader({
           role: "img"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("h1", { className: "ods-workflow-header__title", title: typeof name === "string" ? name : void 0, children: name }),
-      saveIndicator && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "ods-workflow-header__sep", "aria-hidden": "true" }),
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("h1", { className: "ods-workflow-header__title", title: typeof name === "string" ? name : void 0, children: name }),
+      saveIndicator && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_jsx_runtime136.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "ods-workflow-header__sep", "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
           "span",
           {
             className: cn(
@@ -32210,11 +32504,11 @@ function WorkflowHeader({
       ] }),
       leftSlot
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "ods-workflow-header__right", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "ods-workflow-header__right", children: [
       rightSlot,
       environment && // Consumer-driven env chip. Accent (left border colour) comes
       // from the consumer — we don't bake in environment names.
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
         Chip,
         {
           size: "sm",
@@ -32230,71 +32524,72 @@ function WorkflowHeader({
           children: environment.label
         }
       ),
-      onToggleConsole && (isRunning || consoleHasLogs) && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+      onToggleConsole && (isRunning || consoleHasLogs) && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
         Button,
         {
           variant: "ghost",
           size: "sm",
           pressed: !!isConsoleOpen,
           "aria-label": isConsoleOpen ? "Hide execution console" : "Show execution console",
-          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_icons50.TerminalIcon, { size: "sm" }),
+          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_icons50.TerminalIcon, { size: "sm" }),
           onClick: onToggleConsole,
           children: "Console"
         }
       ),
-      (environment || onToggleConsole && (isRunning || consoleHasLogs)) && (isRunning || onRun || menuItems && menuItems.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "ods-workflow-header__micro-divider", "aria-hidden": "true" }),
-      isRunning ? onStop && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+      (environment || onToggleConsole && (isRunning || consoleHasLogs)) && (isRunning || onRun || menuItems && menuItems.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "ods-workflow-header__micro-divider", "aria-hidden": "true" }),
+      isRunning ? onStop && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
         Button,
         {
           variant: "ghost",
           size: "sm",
           "aria-label": runtime ? `Stop execution (running ${runtime})` : "Stop execution",
-          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_icons50.StopFilledAltIcon, { size: "sm", className: "ods-workflow-header__stop-glyph" }),
+          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_icons50.StopFilledAltIcon, { size: "sm", className: "ods-workflow-header__stop-glyph" }),
           onClick: onStop,
-          children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("span", { className: "ods-workflow-header__stop-label", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { children: "Stop" }),
-            runtime && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "ods-workflow-header__stop-dot", "aria-hidden": "true", children: "\xB7" }),
-              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "ods-workflow-header__runtime", children: runtime })
+          children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("span", { className: "ods-workflow-header__stop-label", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { children: "Stop" }),
+            runtime && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_jsx_runtime136.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "ods-workflow-header__stop-dot", "aria-hidden": "true", children: "\xB7" }),
+              /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "ods-workflow-header__runtime", children: runtime })
             ] })
           ] })
         }
-      ) : onRun && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+      ) : onRun && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
         Button,
         {
           variant: "primary",
           size: "sm",
           "aria-label": "Run workflow",
-          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_icons50.PlayFilledAltIcon, { size: "sm" }),
+          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_icons50.PlayFilledAltIcon, { size: "sm" }),
           onClick: onRun,
           children: "Run"
         }
       ),
-      menu ?? (menuItems && menuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+      menu ?? (menuItems && menuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
         DropdownMenu,
         {
           "aria-label": menuLabel,
           align: "end",
+          triggerClassName: "ods-workflow-header__menu-trigger",
           ...menuProps,
-          trigger: menuTrigger ?? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-            Button,
+          trigger: menuTrigger ?? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+            "span",
             {
-              variant: "ghost",
-              size: "sm",
-              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_icons50.OverflowMenuVerticalIcon, { size: "sm" })
+              "aria-hidden": "true",
+              className: "ods-workflow-header__menu-icon",
+              children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_icons50.OverflowMenuVerticalIcon, { size: "sm" })
             }
           ),
           items: menuItems
         }
       ))
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "ods-workflow-header__progress", "aria-hidden": "true" })
+    /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "ods-workflow-header__progress", "aria-hidden": "true" })
   ] });
 }
 
 // src/components/WorkflowHeader/WorkflowHeaderExpanded.tsx
 var import_icons51 = require("@octaviaflow/icons");
-var import_jsx_runtime136 = require("react/jsx-runtime");
+var import_jsx_runtime137 = require("react/jsx-runtime");
 function WorkflowHeaderExpanded({
   name,
   statusTone = "draft",
@@ -32322,15 +32617,15 @@ function WorkflowHeaderExpanded({
   const tickedRuntime = useWorkflowRuntime(runStartedAt, !!isRunning);
   const runtime = runtimeOverride ?? tickedRuntime ?? void 0;
   const effectiveTone = statusTone === "draft" && isRunning ? "running" : statusTone;
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
     "header",
     {
       className: cn("ods-workflow-header-expanded", className),
       "data-running": isRunning ? "true" : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "ods-workflow-header-expanded__row ods-workflow-header-expanded__row--top", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "ods-workflow-header-expanded__left", children: [
-            onBack && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "ods-workflow-header-expanded__row ods-workflow-header-expanded__row--top", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "ods-workflow-header-expanded__left", children: [
+            onBack && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
               "button",
               {
                 type: "button",
@@ -32338,13 +32633,13 @@ function WorkflowHeaderExpanded({
                 onClick: onBack,
                 "aria-label": `Back to ${typeof parentLabel === "string" ? parentLabel : "previous"}`,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_icons51.ChevronLeftIcon, { size: "sm" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { children: parentLabel }),
-                  /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { "aria-hidden": "true", className: "ods-workflow-header-expanded__back-sep", children: "/" })
+                  /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons51.ChevronLeftIcon, { size: "sm" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { children: parentLabel }),
+                  /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { "aria-hidden": "true", className: "ods-workflow-header-expanded__back-sep", children: "/" })
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
               "span",
               {
                 className: cn(
@@ -32355,10 +32650,10 @@ function WorkflowHeaderExpanded({
                 role: "img"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("h1", { className: "ods-workflow-header-expanded__title", children: name })
+            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("h1", { className: "ods-workflow-header-expanded__title", children: name })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "ods-workflow-header-expanded__right", children: [
-            environment && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "ods-workflow-header-expanded__right", children: [
+            environment && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
               Chip,
               {
                 size: "sm",
@@ -32370,58 +32665,58 @@ function WorkflowHeaderExpanded({
                 children: environment.label
               }
             ),
-            onToggleConsole && (isRunning || consoleHasLogs) && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+            onToggleConsole && (isRunning || consoleHasLogs) && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
               Button,
               {
                 variant: "ghost",
                 size: "sm",
                 pressed: !!isConsoleOpen,
                 "aria-label": isConsoleOpen ? "Hide execution console" : "Show execution console",
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_icons51.TerminalIcon, { size: "sm" }),
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons51.TerminalIcon, { size: "sm" }),
                 onClick: onToggleConsole,
                 children: "Console"
               }
             ),
-            (environment || onToggleConsole && (isRunning || consoleHasLogs)) && (isRunning || onRun || menuItems && menuItems.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "ods-workflow-header-expanded__micro-divider", "aria-hidden": "true" }),
-            isRunning ? onStop && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+            (environment || onToggleConsole && (isRunning || consoleHasLogs)) && (isRunning || onRun || menuItems && menuItems.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-workflow-header-expanded__micro-divider", "aria-hidden": "true" }),
+            isRunning ? onStop && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
               Button,
               {
                 variant: "ghost",
                 size: "sm",
                 "aria-label": runtime ? `Stop execution (running ${runtime})` : "Stop execution",
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_icons51.StopFilledAltIcon, { size: "sm", className: "ods-workflow-header-expanded__stop-glyph" }),
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons51.StopFilledAltIcon, { size: "sm", className: "ods-workflow-header-expanded__stop-glyph" }),
                 onClick: onStop,
-                children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("span", { style: { display: "inline-flex", gap: 4, alignItems: "center" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { children: "Stop" }),
-                  runtime && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_jsx_runtime136.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { "aria-hidden": "true", style: { opacity: 0.6 }, children: "\xB7" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "ods-workflow-header-expanded__runtime", children: runtime })
+                children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("span", { style: { display: "inline-flex", gap: 4, alignItems: "center" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { children: "Stop" }),
+                  runtime && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_jsx_runtime137.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { "aria-hidden": "true", style: { opacity: 0.6 }, children: "\xB7" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-workflow-header-expanded__runtime", children: runtime })
                   ] })
                 ] })
               }
-            ) : onRun && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+            ) : onRun && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
               Button,
               {
                 variant: "primary",
                 size: "sm",
                 "aria-label": "Run workflow",
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_icons51.PlayFilledAltIcon, { size: "sm" }),
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons51.PlayFilledAltIcon, { size: "sm" }),
                 onClick: onRun,
                 children: "Run"
               }
             ),
-            menu ?? (menuItems && menuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+            menu ?? (menuItems && menuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
               DropdownMenu,
               {
                 "aria-label": menuLabel,
                 align: "end",
                 ...menuProps,
-                trigger: menuTrigger ?? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+                trigger: menuTrigger ?? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
                   Button,
                   {
                     variant: "ghost",
                     size: "sm",
-                    leftIcon: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_icons51.OverflowMenuVerticalIcon, { size: "sm" })
+                    leftIcon: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons51.OverflowMenuVerticalIcon, { size: "sm" })
                   }
                 ),
                 items: menuItems
@@ -32429,10 +32724,10 @@ function WorkflowHeaderExpanded({
             ))
           ] })
         ] }),
-        (meta || saveLabel) && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { className: "ods-workflow-header-expanded__row ods-workflow-header-expanded__row--bottom", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("span", { className: "ods-workflow-header-expanded__meta", children: [
+        (meta || saveLabel) && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "ods-workflow-header-expanded__row ods-workflow-header-expanded__row--bottom", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("span", { className: "ods-workflow-header-expanded__meta", children: [
           meta,
-          meta && saveLabel && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { "aria-hidden": "true", style: { margin: "0 6px", opacity: 0.4 }, children: "\xB7" }),
-          saveLabel && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+          meta && saveLabel && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { "aria-hidden": "true", style: { margin: "0 6px", opacity: 0.4 }, children: "\xB7" }),
+          saveLabel && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
             "span",
             {
               className: cn(
@@ -32444,7 +32739,7 @@ function WorkflowHeaderExpanded({
             }
           )
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "ods-workflow-header-expanded__progress", "aria-hidden": "true" })
+        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-workflow-header-expanded__progress", "aria-hidden": "true" })
       ]
     }
   );
@@ -32453,8 +32748,8 @@ function WorkflowHeaderExpanded({
 // src/components/XmlViewer/XmlViewer.tsx
 var import_icons52 = require("@octaviaflow/icons");
 var import_fast_xml_parser = require("fast-xml-parser");
-var import_react157 = require("react");
-var import_jsx_runtime137 = require("react/jsx-runtime");
+var import_react158 = require("react");
+var import_jsx_runtime138 = require("react/jsx-runtime");
 function parseXml(src) {
   if (typeof window !== "undefined" && typeof window.DOMParser !== "undefined") {
     try {
@@ -32521,7 +32816,7 @@ ${pad2}</${node.name}>`;
     }
   }
 }
-var XmlViewer = (0, import_react157.forwardRef)(
+var XmlViewer = (0, import_react158.forwardRef)(
   function XmlViewer2({
     data,
     mode = "view",
@@ -32539,13 +32834,13 @@ var XmlViewer = (0, import_react157.forwardRef)(
     className,
     ...rest
   }, ref) {
-    const reactId = (0, import_react157.useId)();
+    const reactId = (0, import_react158.useId)();
     const baseId = providedId ?? `ods-xml-viewer-${reactId}`;
-    const parsed = (0, import_react157.useMemo)(() => parseXml(data), [data]);
+    const parsed = (0, import_react158.useMemo)(() => parseXml(data), [data]);
     const bodyStyle = height !== void 0 ? { height: typeof height === "number" ? `${height}px` : height } : maxHeight !== void 0 ? {
       maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
     } : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
       "div",
       {
         ...rest,
@@ -32553,9 +32848,9 @@ var XmlViewer = (0, import_react157.forwardRef)(
         id: baseId,
         className: cn("ods-xml-viewer", className),
         children: [
-          (title || status || parsed.error) && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "ods-xml-viewer__head", children: [
-            title && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__title", children: title }),
-            parsed.error && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+          (title || status || parsed.error) && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "ods-xml-viewer__head", children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__title", children: title }),
+            parsed.error && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
               "span",
               {
                 className: "ods-xml-viewer__status ods-xml-viewer__status--error",
@@ -32563,9 +32858,9 @@ var XmlViewer = (0, import_react157.forwardRef)(
                 children: "Invalid XML"
               }
             ),
-            status && !parsed.error && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__status", children: status })
+            status && !parsed.error && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__status", children: status })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "ods-xml-viewer__body", style: bodyStyle, "data-mode": mode, children: mode === "edit" ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(XmlEditBody, { text: data, onChange, onValidate }) : parsed.error ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("pre", { className: "ods-xml-viewer__raw", children: data }) : parsed.root ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "ods-xml-viewer__body", style: bodyStyle, "data-mode": mode, children: mode === "edit" ? /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(XmlEditBody, { text: data, onChange, onValidate }) : parsed.error ? /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("pre", { className: "ods-xml-viewer__raw", children: data }) : parsed.root ? /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
             XmlNodeRow,
             {
               node: parsed.root,
@@ -32583,8 +32878,8 @@ var XmlViewer = (0, import_react157.forwardRef)(
 );
 XmlViewer.displayName = "XmlViewer";
 function XmlEditBody({ text: initial, onChange, onValidate }) {
-  const [text, setText] = (0, import_react157.useState)(initial);
-  const [parseError, setParseError] = (0, import_react157.useState)(null);
+  const [text, setText] = (0, import_react158.useState)(initial);
+  const [parseError, setParseError] = (0, import_react158.useState)(null);
   const validate = (next) => {
     const result = import_fast_xml_parser.XMLValidator.validate(next);
     if (result === true) {
@@ -32606,11 +32901,11 @@ function XmlEditBody({ text: initial, onChange, onValidate }) {
     onChange?.(next);
     validate(next);
   };
-  (0, import_react157.useEffect)(() => {
+  (0, import_react158.useEffect)(() => {
     validate(initial);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "ods-xml-viewer__edit", children: [
-    parseError && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "ods-xml-viewer__edit", children: [
+    parseError && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
       InlineMessage,
       {
         tone: "danger",
@@ -32627,7 +32922,7 @@ function XmlEditBody({ text: initial, onChange, onValidate }) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
       CodeEditor,
       {
         value: text,
@@ -32647,10 +32942,10 @@ function XmlNodeRow({
   truncateAt,
   copyable
 }) {
-  const [open, setOpen] = (0, import_react157.useState)(depth < defaultExpandDepth);
-  const [copied, setCopied] = (0, import_react157.useState)(false);
+  const [open, setOpen] = (0, import_react158.useState)(depth < defaultExpandDepth);
+  const [copied, setCopied] = (0, import_react158.useState)(false);
   const pad2 = depth * 14;
-  const onCopy = (0, import_react157.useCallback)(
+  const onCopy = (0, import_react158.useCallback)(
     (e) => {
       e.stopPropagation();
       const text = serializeNode(node);
@@ -32670,41 +32965,41 @@ function XmlNodeRow({
   if (node.type === "text") {
     const t = (node.text ?? "").trim();
     const truncated = t.length > truncateAt ? `${t.slice(0, truncateAt)}\u2026` : t;
-    return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "ods-xml-viewer__row", style: { paddingLeft: pad2 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__caret-spacer" }),
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__text", children: truncated })
+    return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "ods-xml-viewer__row", style: { paddingLeft: pad2 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__caret-spacer" }),
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__text", children: truncated })
     ] });
   }
   if (node.type === "comment") {
-    return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "ods-xml-viewer__row", style: { paddingLeft: pad2 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__caret-spacer" }),
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__comment", children: `<!-- ${node.text} -->` })
+    return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "ods-xml-viewer__row", style: { paddingLeft: pad2 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__caret-spacer" }),
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__comment", children: `<!-- ${node.text} -->` })
     ] });
   }
   if (node.type === "cdata") {
-    return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "ods-xml-viewer__row", style: { paddingLeft: pad2 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__caret-spacer" }),
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__cdata", children: `<![CDATA[${node.text}]]>` })
+    return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "ods-xml-viewer__row", style: { paddingLeft: pad2 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__caret-spacer" }),
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__cdata", children: `<![CDATA[${node.text}]]>` })
     ] });
   }
   if (node.type === "pi") {
-    return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "ods-xml-viewer__row", style: { paddingLeft: pad2 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__caret-spacer" }),
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__pi", children: `<?${node.text}?>` })
+    return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "ods-xml-viewer__row", style: { paddingLeft: pad2 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__caret-spacer" }),
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__pi", children: `<?${node.text}?>` })
     ] });
   }
   const children = node.children ?? [];
   const isSelfClosing = children.length === 0;
   const attrs = Object.entries(node.attributes ?? {});
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
       "div",
       {
         className: "ods-xml-viewer__row ods-xml-viewer__row--element",
         style: { paddingLeft: pad2 },
         onClick: () => !isSelfClosing && setOpen((o) => !o),
         children: [
-          isSelfClosing ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__caret-spacer" }) : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+          isSelfClosing ? /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__caret-spacer" }) : /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
             "button",
             {
               type: "button",
@@ -32718,30 +33013,30 @@ function XmlNodeRow({
                 e.stopPropagation();
                 setOpen((o) => !o);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons52.ChevronRightIcon, { size: "xs" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_icons52.ChevronRightIcon, { size: "xs" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__bracket", children: "<" }),
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__tag", children: node.name }),
-          showAttributes && attrs.map(([k, v]) => /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("span", { className: "ods-xml-viewer__attr", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__attr-name", children: k }),
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__attr-eq", children: "=" }),
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__attr-value", children: `"${v}"` })
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__bracket", children: "<" }),
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__tag", children: node.name }),
+          showAttributes && attrs.map(([k, v]) => /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("span", { className: "ods-xml-viewer__attr", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__attr-name", children: k }),
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__attr-eq", children: "=" }),
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__attr-value", children: `"${v}"` })
           ] }, k)),
-          isSelfClosing ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__bracket", children: " />" }) : /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_jsx_runtime137.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__bracket", children: ">" }),
-            !open && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_jsx_runtime137.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("span", { className: "ods-xml-viewer__preview", children: [
+          isSelfClosing ? /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__bracket", children: " />" }) : /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_jsx_runtime138.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__bracket", children: ">" }),
+            !open && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_jsx_runtime138.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("span", { className: "ods-xml-viewer__preview", children: [
                 children.length,
                 " child",
                 children.length === 1 ? "" : "ren"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__bracket", children: "</" }),
-              /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__tag", children: node.name }),
-              /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__bracket", children: ">" })
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__bracket", children: "</" }),
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__tag", children: node.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__bracket", children: ">" })
             ] })
           ] }),
-          copyable && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+          copyable && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
             "button",
             {
               type: "button",
@@ -32751,14 +33046,14 @@ function XmlNodeRow({
               ),
               "aria-label": copied ? "Copied" : `Copy ${node.name} subtree`,
               onClick: onCopy,
-              children: copied ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons52.CheckmarkIcon, { size: "xs" }) : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons52.CopyIcon, { size: "xs" })
+              children: copied ? /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_icons52.CheckmarkIcon, { size: "xs" }) : /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_icons52.CopyIcon, { size: "xs" })
             }
           )
         ]
       }
     ),
-    !isSelfClosing && open && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_jsx_runtime137.Fragment, { children: [
-      children.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+    !isSelfClosing && open && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_jsx_runtime138.Fragment, { children: [
+      children.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
         XmlNodeRow,
         {
           node: c,
@@ -32770,11 +33065,11 @@ function XmlNodeRow({
         },
         i
       )),
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "ods-xml-viewer__row", style: { paddingLeft: pad2 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__caret-spacer" }),
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__bracket", children: "</" }),
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__tag", children: node.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "ods-xml-viewer__bracket", children: ">" })
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "ods-xml-viewer__row", style: { paddingLeft: pad2 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__caret-spacer" }),
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__bracket", children: "</" }),
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__tag", children: node.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-xml-viewer__bracket", children: ">" })
       ] })
     ] })
   ] });
@@ -32782,9 +33077,9 @@ function XmlNodeRow({
 
 // src/components/YamlViewer/YamlViewer.tsx
 var import_icons53 = require("@octaviaflow/icons");
-var import_react158 = require("react");
+var import_react159 = require("react");
 var import_yaml = __toESM(require("yaml"), 1);
-var import_jsx_runtime138 = require("react/jsx-runtime");
+var import_jsx_runtime139 = require("react/jsx-runtime");
 function toYaml(value, indent = 0) {
   const pad2 = "  ".repeat(indent);
   if (value === null) return "null";
@@ -32909,7 +33204,7 @@ function valueClass(v) {
   if (/^['"].*['"]$/.test(v)) return "string";
   return "string";
 }
-var YamlViewer = (0, import_react158.forwardRef)(
+var YamlViewer = (0, import_react159.forwardRef)(
   function YamlViewer2({
     data,
     mode = "view",
@@ -32927,9 +33222,9 @@ var YamlViewer = (0, import_react158.forwardRef)(
     className,
     ...rest
   }, ref) {
-    const reactId = (0, import_react158.useId)();
+    const reactId = (0, import_react159.useId)();
     const baseId = providedId ?? `ods-yaml-viewer-${reactId}`;
-    const text = (0, import_react158.useMemo)(() => {
+    const text = (0, import_react159.useMemo)(() => {
       if (typeof data === "string") return data;
       try {
         return toYaml(data);
@@ -32937,15 +33232,15 @@ var YamlViewer = (0, import_react158.forwardRef)(
         return JSON.stringify(data, null, 2);
       }
     }, [data]);
-    const tokens = (0, import_react158.useMemo)(() => tokenizeYaml(text), [text]);
-    const [collapsed, setCollapsed] = (0, import_react158.useState)(() => {
+    const tokens = (0, import_react159.useMemo)(() => tokenizeYaml(text), [text]);
+    const [collapsed, setCollapsed] = (0, import_react159.useState)(() => {
       const s = /* @__PURE__ */ new Set();
       tokens.forEach((t) => {
         if (t.hasChildren && t.depth >= defaultExpandDepth) s.add(t.index);
       });
       return s;
     });
-    const toggle = (0, import_react158.useCallback)((idx) => {
+    const toggle = (0, import_react159.useCallback)((idx) => {
       setCollapsed((prev) => {
         const next = new Set(prev);
         if (next.has(idx)) next.delete(idx);
@@ -32953,7 +33248,7 @@ var YamlViewer = (0, import_react158.forwardRef)(
         return next;
       });
     }, []);
-    const hidden = (0, import_react158.useMemo)(() => {
+    const hidden = (0, import_react159.useMemo)(() => {
       const hide = /* @__PURE__ */ new Set();
       for (let i = 0; i < tokens.length; i++) {
         const t = tokens[i];
@@ -32968,8 +33263,8 @@ var YamlViewer = (0, import_react158.forwardRef)(
       }
       return hide;
     }, [tokens, collapsed]);
-    const [copied, setCopied] = (0, import_react158.useState)(false);
-    const onCopy = (0, import_react158.useCallback)(() => {
+    const [copied, setCopied] = (0, import_react159.useState)(false);
+    const onCopy = (0, import_react159.useCallback)(() => {
       if (!navigator?.clipboard?.writeText) return;
       navigator.clipboard.writeText(text).then(
         () => {
@@ -32983,7 +33278,7 @@ var YamlViewer = (0, import_react158.forwardRef)(
     const bodyStyle = height !== void 0 ? { height: typeof height === "number" ? `${height}px` : height } : maxHeight !== void 0 ? {
       maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
     } : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
       "div",
       {
         ...rest,
@@ -32995,11 +33290,11 @@ var YamlViewer = (0, import_react158.forwardRef)(
           className
         ),
         children: [
-          (title || status || copyable) && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "ods-yaml-viewer__head", children: [
-            title && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-yaml-viewer__title", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("span", { className: "ods-yaml-viewer__head-right", children: [
-              status && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-yaml-viewer__status", children: status }),
-              copyable && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+          (title || status || copyable) && /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "ods-yaml-viewer__head", children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { className: "ods-yaml-viewer__title", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("span", { className: "ods-yaml-viewer__head-right", children: [
+              status && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { className: "ods-yaml-viewer__status", children: status }),
+              copyable && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
                 "button",
                 {
                   type: "button",
@@ -33009,16 +33304,16 @@ var YamlViewer = (0, import_react158.forwardRef)(
                   ),
                   "aria-label": copied ? "Copied" : "Copy YAML",
                   onClick: onCopy,
-                  children: copied ? /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_icons53.CheckmarkIcon, { size: "xs" }) : /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_icons53.CopyIcon, { size: "xs" })
+                  children: copied ? /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_icons53.CheckmarkIcon, { size: "xs" }) : /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_icons53.CopyIcon, { size: "xs" })
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "ods-yaml-viewer__body", style: bodyStyle, "data-mode": mode, children: mode === "edit" ? /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(YamlEditBody, { text, onChange, onValidate }) : tokens.map((t) => {
+          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "ods-yaml-viewer__body", style: bodyStyle, "data-mode": mode, children: mode === "edit" ? /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(YamlEditBody, { text, onChange, onValidate }) : tokens.map((t) => {
             if (hidden.has(t.index)) return null;
             const lineNo = t.index + 1;
             const isCollapsed = collapsed.has(t.index);
-            return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
               "div",
               {
                 className: cn(
@@ -33027,7 +33322,7 @@ var YamlViewer = (0, import_react158.forwardRef)(
                   isCollapsed && "ods-yaml-viewer__line--collapsed"
                 ),
                 children: [
-                  showLineNumbers && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+                  showLineNumbers && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
                     "span",
                     {
                       className: "ods-yaml-viewer__line-no",
@@ -33035,7 +33330,7 @@ var YamlViewer = (0, import_react158.forwardRef)(
                       children: lineNo
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
                     "span",
                     {
                       className: "ods-yaml-viewer__indent",
@@ -33043,7 +33338,7 @@ var YamlViewer = (0, import_react158.forwardRef)(
                       "aria-hidden": "true"
                     }
                   ),
-                  t.hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+                  t.hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
                     "button",
                     {
                       type: "button",
@@ -33054,15 +33349,15 @@ var YamlViewer = (0, import_react158.forwardRef)(
                       onClick: () => toggle(t.index),
                       "aria-expanded": !isCollapsed,
                       "aria-label": isCollapsed ? "Expand" : "Collapse",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_icons53.ChevronRightIcon, { size: "xs" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_icons53.ChevronRightIcon, { size: "xs" })
                     }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-yaml-viewer__caret-spacer" }),
-                  t.kind === "comment" && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-yaml-viewer__comment", children: t.raw.trim() }),
-                  t.kind === "key" && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_jsx_runtime138.Fragment, { children: [
-                    t.raw.trim().startsWith("-") && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-yaml-viewer__dash", children: "- " }),
-                    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-yaml-viewer__key", children: t.key }),
-                    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-yaml-viewer__colon", children: ":" }),
-                    t.inlineValue && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { className: "ods-yaml-viewer__caret-spacer" }),
+                  t.kind === "comment" && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { className: "ods-yaml-viewer__comment", children: t.raw.trim() }),
+                  t.kind === "key" && /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(import_jsx_runtime139.Fragment, { children: [
+                    t.raw.trim().startsWith("-") && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { className: "ods-yaml-viewer__dash", children: "- " }),
+                    /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { className: "ods-yaml-viewer__key", children: t.key }),
+                    /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { className: "ods-yaml-viewer__colon", children: ":" }),
+                    t.inlineValue && /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
                       "span",
                       {
                         className: cn(
@@ -33075,11 +33370,11 @@ var YamlViewer = (0, import_react158.forwardRef)(
                         ]
                       }
                     ),
-                    isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-yaml-viewer__preview", children: " \u2026" })
+                    isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { className: "ods-yaml-viewer__preview", children: " \u2026" })
                   ] }),
-                  t.kind === "sequence" && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_jsx_runtime138.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "ods-yaml-viewer__dash", children: "- " }),
-                    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+                  t.kind === "sequence" && /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(import_jsx_runtime139.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { className: "ods-yaml-viewer__dash", children: "- " }),
+                    /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
                       "span",
                       {
                         className: cn(
@@ -33090,7 +33385,7 @@ var YamlViewer = (0, import_react158.forwardRef)(
                       }
                     )
                   ] }),
-                  t.kind === "scalar" && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+                  t.kind === "scalar" && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
                     "span",
                     {
                       className: cn(
@@ -33100,7 +33395,7 @@ var YamlViewer = (0, import_react158.forwardRef)(
                       children: t.raw.trim()
                     }
                   ),
-                  t.kind === "blank" && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { children: "\xA0" })
+                  t.kind === "blank" && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { children: "\xA0" })
                 ]
               },
               t.index
@@ -33135,8 +33430,8 @@ function extractYamlErrorPosition(err, text) {
   return { line: 1, col: 1, message };
 }
 function YamlEditBody({ text: initial, onChange, onValidate }) {
-  const [text, setText] = (0, import_react158.useState)(initial);
-  const [parseError, setParseError] = (0, import_react158.useState)(null);
+  const [text, setText] = (0, import_react159.useState)(initial);
+  const [parseError, setParseError] = (0, import_react159.useState)(null);
   const validate = (next) => {
     try {
       import_yaml.default.parse(next);
@@ -33153,11 +33448,11 @@ function YamlEditBody({ text: initial, onChange, onValidate }) {
     onChange?.(next);
     validate(next);
   };
-  (0, import_react158.useEffect)(() => {
+  (0, import_react159.useEffect)(() => {
     validate(initial);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "ods-yaml-viewer__edit", children: [
-    parseError && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "ods-yaml-viewer__edit", children: [
+    parseError && /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
       InlineMessage,
       {
         tone: "danger",
@@ -33174,7 +33469,7 @@ function YamlEditBody({ text: initial, onChange, onValidate }) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
       CodeEditor,
       {
         value: text,
@@ -33188,29 +33483,29 @@ function YamlEditBody({ text: initial, onChange, onValidate }) {
 }
 
 // src/hooks/useBanner.ts
-var import_react159 = require("react");
+var import_react160 = require("react");
 function useBanner(options = {}) {
   const { defaultOpen = false, autoDismissAfter, onDismiss } = options;
-  const [open, setOpen] = (0, import_react159.useState)(defaultOpen);
-  const timerRef = (0, import_react159.useRef)(null);
-  const onDismissRef = (0, import_react159.useRef)(onDismiss);
-  (0, import_react159.useEffect)(() => {
+  const [open, setOpen] = (0, import_react160.useState)(defaultOpen);
+  const timerRef = (0, import_react160.useRef)(null);
+  const onDismissRef = (0, import_react160.useRef)(onDismiss);
+  (0, import_react160.useEffect)(() => {
     onDismissRef.current = onDismiss;
   }, [onDismiss]);
-  const clearTimer = (0, import_react159.useCallback)(() => {
+  const clearTimer = (0, import_react160.useCallback)(() => {
     if (timerRef.current !== null) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
   }, []);
-  const hide = (0, import_react159.useCallback)(() => {
+  const hide = (0, import_react160.useCallback)(() => {
     clearTimer();
     setOpen((wasOpen) => {
       if (wasOpen) onDismissRef.current?.();
       return false;
     });
   }, [clearTimer]);
-  const show = (0, import_react159.useCallback)(() => {
+  const show = (0, import_react160.useCallback)(() => {
     clearTimer();
     setOpen(true);
     if (typeof autoDismissAfter === "number" && Number.isFinite(autoDismissAfter) && autoDismissAfter > 0) {
@@ -33221,11 +33516,11 @@ function useBanner(options = {}) {
       }, autoDismissAfter);
     }
   }, [autoDismissAfter, clearTimer]);
-  const toggle = (0, import_react159.useCallback)(() => {
+  const toggle = (0, import_react160.useCallback)(() => {
     if (open) hide();
     else show();
   }, [open, show, hide]);
-  (0, import_react159.useEffect)(() => () => clearTimer(), [clearTimer]);
+  (0, import_react160.useEffect)(() => () => clearTimer(), [clearTimer]);
   return {
     open,
     show,
@@ -33236,7 +33531,7 @@ function useBanner(options = {}) {
 }
 
 // src/hooks/useCallout.ts
-var import_react160 = require("react");
+var import_react161 = require("react");
 var STORAGE_PREFIX = "ods:callout:dismissed:";
 function readPersisted(key) {
   if (!key || typeof window === "undefined") return false;
@@ -33259,13 +33554,13 @@ function writePersisted(key, value) {
 }
 function useCallout(options = {}) {
   const { defaultOpen = true, persistKey, onDismiss } = options;
-  const [open, setOpen] = (0, import_react160.useState)(defaultOpen);
-  (0, import_react160.useEffect)(() => {
+  const [open, setOpen] = (0, import_react161.useState)(defaultOpen);
+  (0, import_react161.useEffect)(() => {
     if (persistKey && readPersisted(persistKey)) {
       setOpen(false);
     }
   }, []);
-  const dismiss = (0, import_react160.useCallback)(() => {
+  const dismiss = (0, import_react161.useCallback)(() => {
     setOpen((wasOpen) => {
       if (wasOpen) {
         writePersisted(persistKey, true);
@@ -33274,10 +33569,10 @@ function useCallout(options = {}) {
       return false;
     });
   }, [persistKey, onDismiss]);
-  const show = (0, import_react160.useCallback)(() => {
+  const show = (0, import_react161.useCallback)(() => {
     setOpen(true);
   }, []);
-  const toggle = (0, import_react160.useCallback)(() => {
+  const toggle = (0, import_react161.useCallback)(() => {
     setOpen((prev) => {
       const next = !prev;
       if (!next) {
@@ -33287,7 +33582,7 @@ function useCallout(options = {}) {
       return next;
     });
   }, [persistKey, onDismiss]);
-  const reset = (0, import_react160.useCallback)(() => {
+  const reset = (0, import_react161.useCallback)(() => {
     writePersisted(persistKey, false);
     setOpen(true);
   }, [persistKey]);
@@ -33303,9 +33598,9 @@ function useCallout(options = {}) {
 }
 
 // src/hooks/useMediaQuery.ts
-var import_react161 = require("react");
+var import_react162 = require("react");
 function useMediaQuery(query) {
-  return (0, import_react161.useSyncExternalStore)(
+  return (0, import_react162.useSyncExternalStore)(
     (notify) => subscribe(query, notify),
     () => getSnapshot(query),
     () => false
@@ -33360,7 +33655,7 @@ function breakpointMinWidth(name) {
 }
 
 // src/hooks/useRating.ts
-var import_react162 = require("react");
+var import_react163 = require("react");
 function useRating({
   value: controlled,
   defaultValue = 0,
@@ -33368,14 +33663,14 @@ function useRating({
   step = 1,
   onChange
 } = {}) {
-  const [internal, setInternal] = (0, import_react162.useState)(defaultValue);
+  const [internal, setInternal] = (0, import_react163.useState)(defaultValue);
   const value = controlled ?? internal;
   const isControlled = controlled !== void 0;
-  const clamp = (0, import_react162.useCallback)(
+  const clamp = (0, import_react163.useCallback)(
     (v) => Math.max(0, Math.min(max, v)),
     [max]
   );
-  const set = (0, import_react162.useCallback)(
+  const set = (0, import_react163.useCallback)(
     (next) => {
       const clamped = clamp(next);
       if (!isControlled) setInternal(clamped);
@@ -33397,10 +33692,10 @@ function useBinaryRating({
   defaultValue = null,
   onChange
 } = {}) {
-  const [internal, setInternal] = (0, import_react162.useState)(defaultValue);
+  const [internal, setInternal] = (0, import_react163.useState)(defaultValue);
   const value = controlled ?? internal;
   const isControlled = controlled !== void 0;
-  const set = (0, import_react162.useCallback)(
+  const set = (0, import_react163.useCallback)(
     (next) => {
       if (!isControlled) setInternal(next);
       onChange?.(next);
@@ -33419,30 +33714,30 @@ function useBinaryRating({
 }
 
 // src/hooks/useTimeline.ts
-var import_react163 = require("react");
+var import_react164 = require("react");
 function useTimeline({
   items: controlled,
   defaultItems = [],
   onChange
 } = {}) {
-  const [internal, setInternal] = (0, import_react163.useState)(defaultItems);
+  const [internal, setInternal] = (0, import_react164.useState)(defaultItems);
   const items = controlled ?? internal;
   const isControlled = controlled !== void 0;
-  const commit = (0, import_react163.useCallback)(
+  const commit = (0, import_react164.useCallback)(
     (next) => {
       if (!isControlled) setInternal(next);
       onChange?.(next);
     },
     [isControlled, onChange]
   );
-  const add = (0, import_react163.useCallback)(
+  const add = (0, import_react164.useCallback)(
     (item) => {
       if (items.some((i) => i.id === item.id)) return;
       commit([...items, item]);
     },
     [items, commit]
   );
-  const insert = (0, import_react163.useCallback)(
+  const insert = (0, import_react164.useCallback)(
     (index, item) => {
       if (items.some((i) => i.id === item.id)) return;
       const at = Math.max(0, Math.min(items.length, index));
@@ -33452,7 +33747,7 @@ function useTimeline({
     },
     [items, commit]
   );
-  const remove = (0, import_react163.useCallback)(
+  const remove = (0, import_react164.useCallback)(
     (id) => {
       const next = items.filter((i) => i.id !== id);
       if (next.length === items.length) return;
@@ -33460,7 +33755,7 @@ function useTimeline({
     },
     [items, commit]
   );
-  const update = (0, import_react163.useCallback)(
+  const update = (0, import_react164.useCallback)(
     (id, patch) => {
       let changed = false;
       const next = items.map((i) => {
@@ -33485,7 +33780,7 @@ function useTimeline({
 }
 
 // src/hooks/useTraceTimeline.ts
-var import_react164 = require("react");
+var import_react165 = require("react");
 var GLOBAL_SEQ = 0;
 var generateId = () => `ods-trace-${Date.now().toString(36)}-${(GLOBAL_SEQ++).toString(36)}`;
 function useTraceTimeline({
@@ -33493,12 +33788,12 @@ function useTraceTimeline({
   defaultSteps = [],
   onChange
 } = {}) {
-  const [internal, setInternal] = (0, import_react164.useState)(defaultSteps);
+  const [internal, setInternal] = (0, import_react165.useState)(defaultSteps);
   const steps = controlled ?? internal;
   const isControlled = controlled !== void 0;
-  const stepsRef = (0, import_react164.useRef)(steps);
+  const stepsRef = (0, import_react165.useRef)(steps);
   stepsRef.current = steps;
-  const commit = (0, import_react164.useCallback)(
+  const commit = (0, import_react165.useCallback)(
     (next) => {
       stepsRef.current = next;
       if (!isControlled) setInternal(next);
@@ -33506,7 +33801,7 @@ function useTraceTimeline({
     },
     [isControlled, onChange]
   );
-  const start = (0, import_react164.useCallback)(
+  const start = (0, import_react165.useCallback)(
     (input) => {
       const id = input.id ?? generateId();
       const record = {
@@ -33526,7 +33821,7 @@ function useTraceTimeline({
     },
     [commit]
   );
-  const update = (0, import_react164.useCallback)(
+  const update = (0, import_react165.useCallback)(
     (id, patch) => {
       let changed = false;
       const next = stepsRef.current.map((s) => {
@@ -33538,19 +33833,19 @@ function useTraceTimeline({
     },
     [commit]
   );
-  const complete = (0, import_react164.useCallback)(
+  const complete = (0, import_react165.useCallback)(
     (id, patch = {}) => {
       update(id, { ...patch, status: "success" });
     },
     [update]
   );
-  const fail = (0, import_react164.useCallback)(
+  const fail = (0, import_react165.useCallback)(
     (id, patch = {}) => {
       update(id, { ...patch, status: "failed" });
     },
     [update]
   );
-  const remove = (0, import_react164.useCallback)(
+  const remove = (0, import_react165.useCallback)(
     (id) => {
       const next = stepsRef.current.filter((s) => s.id !== id);
       if (next.length === stepsRef.current.length) return;
@@ -33576,13 +33871,13 @@ function useTraceTimeline({
 
 // src/provider/OdsProvider.tsx
 var import_config = require("@octaviaflow/config");
-var import_react165 = require("react");
+var import_react166 = require("react");
 var import_react_aria15 = require("react-aria");
-var import_jsx_runtime139 = require("react/jsx-runtime");
-var OdsContext = (0, import_react165.createContext)(null);
+var import_jsx_runtime140 = require("react/jsx-runtime");
+var OdsContext = (0, import_react166.createContext)(null);
 function OdsProvider({ config: userConfig, children }) {
-  const resolved = (0, import_react165.useMemo)(() => (0, import_config.resolveConfig)(userConfig), [userConfig]);
-  (0, import_react165.useEffect)(() => {
+  const resolved = (0, import_react166.useMemo)(() => (0, import_config.resolveConfig)(userConfig), [userConfig]);
+  (0, import_react166.useEffect)(() => {
     const cssVarsBlock = (0, import_config.generateCssVars)(resolved);
     const match = cssVarsBlock.match(/:root\s*\{([\s\S]*)\}/);
     if (match) {
@@ -33598,11 +33893,11 @@ function OdsProvider({ config: userConfig, children }) {
       }
     }
   }, [resolved]);
-  const contextValue = (0, import_react165.useMemo)(() => ({ config: resolved }), [resolved]);
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(OdsContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_react_aria15.OverlayProvider, { children }) });
+  const contextValue = (0, import_react166.useMemo)(() => ({ config: resolved }), [resolved]);
+  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(OdsContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_react_aria15.OverlayProvider, { children }) });
 }
 function useOds() {
-  const ctx = (0, import_react165.useContext)(OdsContext);
+  const ctx = (0, import_react166.useContext)(OdsContext);
   if (!ctx) {
     throw new Error("useOds must be used within an OdsProvider");
   }
@@ -33618,7 +33913,7 @@ var emptyMotion = {
 };
 function useOdsMotion() {
   const config = useOds();
-  return (0, import_react165.useMemo)(() => {
+  return (0, import_react166.useMemo)(() => {
     if (!config.motion.enabled) {
       return emptyMotion;
     }