@uipath/apollo-react 3.44.0 → 3.44.2-pr255.af80ea0

package/dist/canvas/components/StageNode/StageNode.stories.js

@@ -1,1114 +1,1354 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ConnectionMode, Panel, ReactFlowProvider, addEdge, useEdgesState, useNodesState } from "../../xyflow/react.js";
+import { ConnectionMode, Panel, ReactFlowProvider, addEdge, applyNodeChanges, useEdgesState, useNodesState } from "../../xyflow/react.js";
 import { ApButton, ApMenu } from "../../../material/components/index.js";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { CrossStageDragProvider } from "../../hooks/CrossStageDragContext.js";
+import { useCrossStageTaskDrag } from "../../hooks/useCrossStageTaskDrag.js";
+import { useTaskCopyPaste } from "../../hooks/useTaskCopyPaste.js";
 import { DefaultCanvasTranslations } from "../../types.js";
-import { createGroupModificationHandlers, getHandlerForModificationType } from "../../utils/GroupModificationUtils.js";
+import { GroupModificationType, createGroupModificationHandlers, getHandlerForModificationType } from "../../utils/GroupModificationUtils.js";
 import { BaseCanvas } from "../BaseCanvas/index.js";
 import { CanvasPositionControls } from "../CanvasPositionControls.js";
 import { TaskIcon, TaskItemTypeValues } from "../TaskIcon/index.js";
+import { PlaceholderTaskNode } from "../TaskNode/PlaceholderTaskNode.js";
+import { TaskNode } from "../TaskNode/TaskNode.js";
+import { insertTaskAtPosition, moveTaskBetweenStages, moveTaskWithinStage } from "../TaskNode/taskReorderUtils.js";
+import { calculateTaskPositions } from "../TaskNode/useTaskPositions.js";
 import { StageConnectionEdge } from "./StageConnectionEdge.js";
 import { StageEdge } from "./StageEdge.js";
 import { StageNode } from "./StageNode.js";
+import { getContextMenuItems } from "./StageNodeTaskUtilities.js";
 const meta = {
     title: 'Canvas/StageNode',
     component: StageNode,
     parameters: {
         layout: 'fullscreen'
-    },
-    decorators: [
-        (Story, context)=>{
-            if (context.parameters?.useCustomRender) return /*#__PURE__*/ jsx(Story, {});
-            const StageNodeWrapper = (props)=>/*#__PURE__*/ jsx(StageNode, {
-                    ...props,
-                    ...props.data
-                });
-            const initialNodes = context.parameters?.nodes || [
-                {
-                    id: '1',
-                    type: 'stage',
-                    position: {
-                        x: 250,
-                        y: 100
-                    },
-                    data: {
-                        stageDetails: context.args.stageDetails,
-                        execution: context.args.execution,
-                        addTaskLabel: context.args.addTaskLabel,
-                        menuItems: context.args.menuItems,
-                        onTaskAdd: context.args.onTaskAdd,
-                        onTaskClick: context.args.onTaskClick
-                    }
-                }
-            ];
-            const initialEdges = context.parameters?.edges || [];
-            const [nodes, _setNodes, onNodesChange] = useNodesState(initialNodes);
-            const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-            const onConnect = useCallback((connection)=>{
-                setEdges((eds)=>addEdge(connection, eds));
-            }, [
-                setEdges
-            ]);
-            const nodeTypes = useMemo(()=>({
-                    stage: StageNodeWrapper
-                }), [
-                StageNodeWrapper
-            ]);
-            const edgeTypes = useMemo(()=>({
-                    stage: StageEdge
-                }), []);
-            const defaultEdgeOptions = useMemo(()=>({
-                    type: 'stage'
-                }), []);
-            return /*#__PURE__*/ jsx("div", {
-                style: {
-                    width: '100vw',
-                    height: '100vh'
-                },
-                children: /*#__PURE__*/ jsx(ReactFlowProvider, {
-                    children: /*#__PURE__*/ jsx(BaseCanvas, {
-                        nodes: nodes,
-                        edges: edges,
-                        onNodesChange: onNodesChange,
-                        onEdgesChange: onEdgesChange,
-                        onConnect: onConnect,
-                        nodeTypes: nodeTypes,
-                        edgeTypes: edgeTypes,
-                        mode: "design",
-                        connectionMode: ConnectionMode.Strict,
-                        defaultEdgeOptions: defaultEdgeOptions,
-                        connectionLineComponent: StageConnectionEdge,
-                        elevateEdgesOnSelect: true,
-                        children: /*#__PURE__*/ jsx(Panel, {
-                            position: "bottom-right",
-                            children: /*#__PURE__*/ jsx(CanvasPositionControls, {
-                                translations: DefaultCanvasTranslations
-                            })
-                        })
-                    })
-                })
-            });
-        }
-    ],
-    args: {
-        stageDetails: {
-            label: 'Default Stage',
-            tasks: []
-        }
-    },
-    argTypes: {
-        addTaskLabel: {
-            control: 'text',
-            description: 'Label for the add process button',
-            defaultValue: 'Add process'
-        }
     }
 };
 const StageNode_stories = meta;
-const ProcessIcon = ()=>/*#__PURE__*/ jsxs("svg", {
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "1.5",
-        children: [
-            /*#__PURE__*/ jsx("rect", {
-                x: "3",
-                y: "3",
-                width: "7",
-                height: "7",
-                rx: "1"
-            }),
-            /*#__PURE__*/ jsx("rect", {
-                x: "14",
-                y: "3",
-                width: "7",
-                height: "7",
-                rx: "1"
-            }),
-            /*#__PURE__*/ jsx("rect", {
-                x: "3",
-                y: "14",
-                width: "7",
-                height: "7",
-                rx: "1"
-            }),
-            /*#__PURE__*/ jsx("rect", {
-                x: "14",
-                y: "14",
-                width: "7",
-                height: "7",
-                rx: "1"
-            })
-        ]
+const StageNodeWrapper = (props)=>/*#__PURE__*/ jsx(StageNode, {
+        ...props,
+        ...props.data
     });
-const VerificationIcon = ()=>/*#__PURE__*/ jsxs("svg", {
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "1.5",
-        children: [
-            /*#__PURE__*/ jsx("path", {
-                d: "M9 11L12 14L20 6"
-            }),
-            /*#__PURE__*/ jsx("path", {
-                d: "M20 12V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4H13"
-            })
-        ]
+const TaskNodeWrapper = (props)=>/*#__PURE__*/ jsx(TaskNode, {
+        ...props
     });
-const DocumentIcon = ()=>/*#__PURE__*/ jsxs("svg", {
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "1.5",
-        children: [
-            /*#__PURE__*/ jsx("path", {
-                d: "M14 2H6C4.9 2 4 2.9 4 4V20C20 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2Z"
-            }),
-            /*#__PURE__*/ jsx("path", {
-                d: "M14 2V8H20"
-            }),
-            /*#__PURE__*/ jsx("path", {
-                d: "M8 12H16"
-            }),
-            /*#__PURE__*/ jsx("path", {
-                d: "M8 16H16"
-            })
-        ]
+function mergeNodes(prevNodes, computedNodes) {
+    const computedMap = new Map(computedNodes.map((n)=>[
+            n.id,
+            n
+        ]));
+    const prevIds = new Set(prevNodes.map((n)=>n.id));
+    const computedIds = new Set(computedNodes.map((n)=>n.id));
+    const merged = prevNodes.filter((n)=>computedIds.has(n.id)).map((n)=>{
+        const source = computedMap.get(n.id);
+        if (!source) return n;
+        return {
+            ...n,
+            data: source.data,
+            style: source.style,
+            position: source.position
+        };
     });
-const sampleTasks = [
-    [
-        {
-            id: 'liability_check',
-            label: 'Liability Check',
-            icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-        }
-    ],
-    [
-        {
-            id: 'credit_review',
-            label: 'Credit Review',
-            icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-        }
-    ],
-    [
-        {
-            id: 'address_verification',
-            label: 'Address Verification and a really long label that might wrap',
-            icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-        },
-        {
-            id: 'property_verification',
-            label: 'Property Verification',
-            icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-        }
-    ],
-    [
-        {
-            id: 'processing_review',
-            label: 'Processing Review',
-            icon: /*#__PURE__*/ jsx(ProcessIcon, {})
-        }
-    ]
-];
-const Default = {
-    name: 'Default',
-    parameters: {
-        nodes: [
-            {
-                id: '0',
-                type: 'stage',
+    for (const node of computedNodes)if (!prevIds.has(node.id)) merged.push(node);
+    return merged;
+}
+function createTaskNodes({ stageId, taskIds, tasks, stageWidth, onTaskClick, onTaskSelect, stageExecution, enableCrossStage, onGroupModification, onRequestReplaceTask }) {
+    const positions = calculateTaskPositions(taskIds, stageWidth, tasks, stageExecution);
+    const nodes = [];
+    taskIds.forEach((group, groupIndex)=>{
+        group.forEach((taskId, taskIndex)=>{
+            const taskInfo = tasks[taskId];
+            if (!taskInfo) return;
+            const position = positions.get(taskId);
+            if (!position) return;
+            const prevGroup = groupIndex > 0 ? taskIds[groupIndex - 1] : void 0;
+            const nextGroup = groupIndex < taskIds.length - 1 ? taskIds[groupIndex + 1] : void 0;
+            const contextMenuItems = onGroupModification ? getContextMenuItems(group.length > 1, groupIndex, taskIds.length, taskIndex, group.length, void 0 !== prevGroup && prevGroup.length > 1, void 0 !== nextGroup && nextGroup.length > 1, onGroupModification, onRequestReplaceTask) : taskInfo.contextMenuItems;
+            const node = {
+                id: taskId,
+                type: 'task',
+                parentId: stageId,
                 position: {
-                    x: 48,
-                    y: 96
+                    x: position.x,
+                    y: position.y
                 },
-                width: 304,
+                width: position.width,
                 data: {
-                    stageDetails: {
-                        label: 'Application',
-                        tasks: []
-                    },
-                    execution: {
-                        stageStatus: {
-                            duration: 'SLA: None'
-                        }
-                    },
-                    onTaskAdd: ()=>{
-                        window.alert('Add task functionality - this would open a dialog to add a new task');
-                    }
+                    taskType: taskInfo.taskType,
+                    label: taskInfo.label,
+                    iconElement: taskInfo.icon,
+                    groupIndex,
+                    taskIndex,
+                    execution: taskInfo.execution,
+                    onTaskClick,
+                    onTaskSelect,
+                    width: position.width,
+                    contextMenuItems
                 }
-            },
-            {
-                id: '1',
+            };
+            if (!enableCrossStage) node.extent = 'parent';
+            nodes.push(node);
+        });
+    });
+    return nodes;
+}
+const InteractiveStageCanvas = ({ stages: initialStages, tasks: initialTasks, edges: initialEdges = [], showInstructions = true, onTaskAdd, onAddTaskFromToolbox, taskOptions, enableTaskMenu = true, enableReplaceTask = true })=>{
+    const [stageTaskIds, setStageTaskIds] = useState(Object.fromEntries(initialStages.map((s)=>[
+            s.id,
+            s.taskIds
+        ])));
+    const [tasks, setTasks] = useState(initialTasks);
+    const [selectedTaskId, setSelectedTaskId] = useState(null);
+    const [actionLog, setActionLog] = useState('');
+    const [replaceTargets, setReplaceTargets] = useState({});
+    const handleTaskReplace = useCallback((stageId)=>(newTask, groupIndex, taskIndex)=>{
+            setActionLog(`Replace task at stage ${stageId}, group ${groupIndex}, task ${taskIndex} with "${newTask.name}"`);
+            const newTaskId = `replaced-${Date.now()}`;
+            const IconComp = newTask.icon?.Component;
+            setTasks((prev)=>({
+                    ...prev,
+                    [newTaskId]: {
+                        label: newTask.name,
+                        taskType: newTask.data?.taskType || 'uipath.case-management.process',
+                        icon: IconComp ? /*#__PURE__*/ jsx(IconComp, {}) : /*#__PURE__*/ jsx(TaskIcon, {
+                            type: TaskItemTypeValues.AgenticProcess,
+                            size: "sm"
+                        })
+                    }
+                }));
+            setStageTaskIds((prev)=>{
+                const currentTaskIds = [
+                    ...prev[stageId] || []
+                ].map((group)=>[
+                        ...group
+                    ]);
+                const targetGroup = currentTaskIds[groupIndex];
+                if (targetGroup && void 0 !== targetGroup[taskIndex]) targetGroup[taskIndex] = newTaskId;
+                return {
+                    ...prev,
+                    [stageId]: currentTaskIds
+                };
+            });
+        }, []);
+    const stageNodes = useMemo(()=>initialStages.map((stage)=>({
+                id: stage.id,
                 type: 'stage',
-                position: {
-                    x: 400,
-                    y: 96
+                position: stage.position,
+                style: {
+                    width: stage.width || 304
                 },
-                width: 304,
                 data: {
+                    nodeType: 'case-management:Stage',
                     stageDetails: {
-                        label: 'Processing with a really really really long label that might wrap',
-                        tasks: sampleTasks,
-                        sla: '1h',
-                        slaBreached: false,
-                        escalation: '1h',
-                        escalationsTriggered: false
+                        label: stage.label,
+                        taskIds: stageTaskIds[stage.id] || [],
+                        isException: stage.isException,
+                        isReadOnly: stage.isReadOnly
                     },
-                    execution: {
-                        stageStatus: {
-                            duration: 'SLA: None'
-                        }
-                    },
-                    onAddTaskFromToolbox: (taskItem)=>{
-                        window.alert(`Add task (${taskItem.data.type}) - this would open a panel to configure the new task`);
+                    execution: stage.execution,
+                    onTaskClick: (taskId)=>{
+                        setSelectedTaskId(taskId);
+                        setActionLog(`Selected: ${taskId}`);
                     },
-                    taskOptions: sampleTasks.flat().map((task)=>({
-                            id: task.id,
-                            name: task.label,
-                            icon: {
-                                Component: ()=>task.icon
-                            },
-                            data: {
-                                type: task.id
+                    onTaskAdd,
+                    onAddTaskFromToolbox,
+                    taskOptions,
+                    ...enableReplaceTask && !stage.isReadOnly ? {
+                        onReplaceTaskFromToolbox: handleTaskReplace(stage.id),
+                        replaceTaskTarget: replaceTargets[stage.id] ?? null,
+                        onReplaceTaskTargetChange: (target)=>setReplaceTargets((prev)=>({
+                                    ...prev,
+                                    [stage.id]: target
+                                }))
+                    } : {}
+                }
+            })), [
+        initialStages,
+        stageTaskIds,
+        onTaskAdd,
+        onAddTaskFromToolbox,
+        taskOptions,
+        enableReplaceTask,
+        handleTaskReplace,
+        replaceTargets
+    ]);
+    const handleGroupModification = useCallback((stageId)=>(type, groupIndex, taskIndex)=>{
+            setActionLog(`Group modification: ${type} at stage ${stageId}, group ${groupIndex}, task ${taskIndex}`);
+            setStageTaskIds((prev)=>{
+                const currentTaskIds = [
+                    ...prev[stageId] || []
+                ].map((group)=>[
+                        ...group
+                    ]);
+                const currentGroup = currentTaskIds[groupIndex];
+                if (!currentGroup) return prev;
+                switch(type){
+                    case GroupModificationType.TASK_GROUP_UP:
+                        if (groupIndex > 0) {
+                            const taskId = currentGroup[taskIndex];
+                            if (!taskId) break;
+                            currentGroup.splice(taskIndex, 1);
+                            if (0 === currentGroup.length) currentTaskIds.splice(groupIndex, 1);
+                            currentTaskIds.splice(groupIndex - 1, 0, [
+                                taskId
+                            ]);
+                        }
+                        break;
+                    case GroupModificationType.TASK_GROUP_DOWN:
+                        if (groupIndex < currentTaskIds.length - 1) {
+                            const taskId = currentGroup[taskIndex];
+                            if (!taskId) break;
+                            currentGroup.splice(taskIndex, 1);
+                            if (0 === currentGroup.length) {
+                                currentTaskIds.splice(groupIndex, 1);
+                                currentTaskIds.splice(groupIndex + 1, 0, [
+                                    taskId
+                                ]);
+                            } else currentTaskIds.splice(groupIndex + 2, 0, [
+                                taskId
+                            ]);
+                        }
+                        break;
+                    case GroupModificationType.MERGE_GROUP_UP:
+                        if (groupIndex > 0) {
+                            const taskId = currentGroup[taskIndex];
+                            if (!taskId) break;
+                            currentGroup.splice(taskIndex, 1);
+                            if (0 === currentGroup.length) currentTaskIds.splice(groupIndex, 1);
+                            currentTaskIds[groupIndex - 1]?.push(taskId);
+                        }
+                        break;
+                    case GroupModificationType.MERGE_GROUP_DOWN:
+                        if (groupIndex < currentTaskIds.length - 1) {
+                            const taskId = currentGroup[taskIndex];
+                            if (!taskId) break;
+                            currentGroup.splice(taskIndex, 1);
+                            const wasEmpty = 0 === currentGroup.length;
+                            if (wasEmpty) currentTaskIds.splice(groupIndex, 1);
+                            const nextGroupIndex = wasEmpty ? groupIndex : groupIndex + 1;
+                            currentTaskIds[nextGroupIndex]?.push(taskId);
+                        }
+                        break;
+                    case GroupModificationType.UNGROUP_ALL_TASKS:
+                        currentTaskIds.splice(groupIndex, 1, ...currentGroup.map((id)=>[
+                                id
+                            ]));
+                        break;
+                    case GroupModificationType.SPLIT_GROUP:
+                        {
+                            const taskId = currentGroup[taskIndex];
+                            if (!taskId) break;
+                            currentGroup.splice(taskIndex, 1);
+                            currentTaskIds.splice(groupIndex + 1, 0, [
+                                taskId
+                            ]);
+                            break;
+                        }
+                    case GroupModificationType.REMOVE_GROUP:
+                        currentTaskIds.splice(groupIndex, 1);
+                        break;
+                    case GroupModificationType.REMOVE_TASK:
+                        currentGroup.splice(taskIndex, 1);
+                        if (0 === currentGroup.length) currentTaskIds.splice(groupIndex, 1);
+                        break;
+                }
+                return {
+                    ...prev,
+                    [stageId]: currentTaskIds
+                };
+            });
+        }, []);
+    const taskNodes = useMemo(()=>{
+        const allTaskNodes = [];
+        initialStages.forEach((stage)=>{
+            const stageTaskIdsArr = stageTaskIds[stage.id] || [];
+            const nodes = createTaskNodes({
+                stageId: stage.id,
+                taskIds: stageTaskIdsArr,
+                tasks,
+                stageWidth: stage.width || 304,
+                onTaskClick: (taskId)=>{
+                    setSelectedTaskId(taskId);
+                    setActionLog(`Selected: ${taskId}`);
+                },
+                onTaskSelect: setSelectedTaskId,
+                stageExecution: stage.execution?.stageStatus,
+                enableCrossStage: true,
+                onGroupModification: enableTaskMenu && !stage.isReadOnly ? handleGroupModification(stage.id) : void 0,
+                onRequestReplaceTask: enableReplaceTask && !stage.isReadOnly ? (groupIndex, taskIndex)=>setReplaceTargets((prev)=>({
+                            ...prev,
+                            [stage.id]: {
+                                groupIndex,
+                                taskIndex
                             }
-                        }))
+                        })) : ()=>{}
+            });
+            allTaskNodes.push(...nodes);
+        });
+        return allTaskNodes;
+    }, [
+        initialStages,
+        stageTaskIds,
+        tasks,
+        enableTaskMenu,
+        enableReplaceTask,
+        handleGroupModification
+    ]);
+    const allNodes = useMemo(()=>[
+            ...stageNodes,
+            ...taskNodes
+        ], [
+        stageNodes,
+        taskNodes
+    ]);
+    const [nodes, setNodes, onNodesChange] = useNodesState(allNodes);
+    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+    useEffect(()=>{
+        setNodes((prev)=>mergeNodes(prev, allNodes));
+    }, [
+        allNodes,
+        setNodes
+    ]);
+    const onConnect = useCallback((connection)=>{
+        setEdges((eds)=>addEdge({
+                ...connection,
+                type: 'stage'
+            }, eds));
+    }, [
+        setEdges
+    ]);
+    const nodeTypes = useMemo(()=>({
+            stage: StageNodeWrapper,
+            task: TaskNodeWrapper,
+            placeholder: (props)=>/*#__PURE__*/ jsx(PlaceholderTaskNode, {
+                    ...props
+                })
+        }), []);
+    const edgeTypes = useMemo(()=>({
+            stage: StageEdge
+        }), []);
+    const handleTaskReorder = useCallback((params)=>{
+        const { taskId, stageId, position } = params;
+        const depthLabel = position.isParallel ? 'parallel' : 'sequential';
+        setActionLog(`Reordered ${taskId} to group ${position.groupIndex} (${depthLabel})`);
+        setStageTaskIds((prev)=>{
+            const currentTaskIds = prev[stageId || ''] || [];
+            const newTaskIds = moveTaskWithinStage(currentTaskIds, taskId, position);
+            return {
+                ...prev,
+                [stageId || '']: newTaskIds
+            };
+        });
+    }, []);
+    const handleTaskMove = useCallback((params)=>{
+        const { taskId, sourceStageId, targetStageId, position } = params;
+        setActionLog(`Moved ${taskId} from ${sourceStageId} to ${targetStageId} at group ${position.groupIndex}${position.isParallel ? ' (parallel)' : ''}`);
+        const taskInfo = tasks[taskId];
+        if (!taskInfo) return;
+        setStageTaskIds((prev)=>{
+            const sourceTaskIds = prev[sourceStageId] || [];
+            const targetTaskIds = prev[targetStageId] || [];
+            const { sourceTaskIds: newSourceTaskIds, targetTaskIds: newTargetTaskIds } = moveTaskBetweenStages(sourceTaskIds, targetTaskIds, taskId, position);
+            return {
+                ...prev,
+                [sourceStageId]: newSourceTaskIds,
+                [targetStageId]: newTargetTaskIds
+            };
+        });
+    }, [
+        tasks
+    ]);
+    const handleTaskCopy = useCallback((params)=>{
+        const { taskId, newTaskId, targetStageId, position } = params;
+        setActionLog(`Copied ${taskId} to ${newTaskId} in ${targetStageId} at group ${position.groupIndex}${position.isParallel ? ' (parallel)' : ''}`);
+        const taskInfo = tasks[taskId];
+        if (!taskInfo) return;
+        setTasks((prev)=>({
+                ...prev,
+                [newTaskId]: {
+                    ...taskInfo,
+                    label: `${taskInfo.label} (Copy)`
                 }
-            }
-        ]
-    },
-    args: {}
+            }));
+        setStageTaskIds((prev)=>{
+            const targetTaskIds = prev[targetStageId] || [];
+            const newTargetTaskIds = insertTaskAtPosition(targetTaskIds, newTaskId, position);
+            return {
+                ...prev,
+                [targetStageId]: newTargetTaskIds
+            };
+        });
+    }, [
+        tasks
+    ]);
+    const handleTaskPaste = useCallback((params)=>{
+        const { newTaskId, originalData, targetStageId } = params;
+        setActionLog(`Pasted as ${newTaskId}`);
+        setTasks((prev)=>({
+                ...prev,
+                [newTaskId]: {
+                    label: `${originalData.label} (Copy)`,
+                    taskType: originalData.taskType,
+                    icon: originalData.iconElement ?? /*#__PURE__*/ jsx(TaskIcon, {
+                        type: TaskItemTypeValues.AgenticProcess,
+                        size: "sm"
+                    }),
+                    execution: originalData.execution
+                }
+            }));
+        setStageTaskIds((prev)=>({
+                ...prev,
+                [targetStageId]: [
+                    ...prev[targetStageId] || [],
+                    [
+                        newTaskId
+                    ]
+                ]
+            }));
+    }, []);
+    return /*#__PURE__*/ jsx(ReactFlowProvider, {
+        children: /*#__PURE__*/ jsx(InteractiveCanvasInner, {
+            nodes: nodes,
+            edges: edges,
+            onNodesChange: onNodesChange,
+            onEdgesChange: onEdgesChange,
+            onConnect: onConnect,
+            nodeTypes: nodeTypes,
+            edgeTypes: edgeTypes,
+            onTaskReorder: handleTaskReorder,
+            onTaskMove: handleTaskMove,
+            onTaskCopy: handleTaskCopy,
+            onTaskPaste: handleTaskPaste,
+            selectedTaskId: selectedTaskId,
+            stageTaskIds: stageTaskIds,
+            actionLog: actionLog,
+            showInstructions: showInstructions
+        })
+    });
 };
-const WithTaskIcons = {
-    name: 'With Task Icons',
-    parameters: {
-        nodes: [
-            {
-                id: '1',
-                type: 'stage',
-                position: {
-                    x: 48,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Task Icons Demo',
-                        tasks: [
-                            [
-                                {
-                                    id: 'human-task',
-                                    label: 'Human in the Loop',
-                                    icon: /*#__PURE__*/ jsx(TaskIcon, {
-                                        type: TaskItemTypeValues.User,
-                                        size: "sm"
-                                    })
-                                }
-                            ],
-                            [
-                                {
-                                    id: 'agent-task',
-                                    label: 'Agent Task',
-                                    icon: /*#__PURE__*/ jsx(TaskIcon, {
-                                        type: TaskItemTypeValues.Agent,
-                                        size: "sm"
-                                    })
-                                },
-                                {
-                                    id: 'external-agent-task',
-                                    label: 'External Agent',
-                                    icon: /*#__PURE__*/ jsx(TaskIcon, {
-                                        type: TaskItemTypeValues.ExternalAgent,
-                                        size: "sm"
-                                    })
-                                }
-                            ],
-                            [
-                                {
-                                    id: 'rpa-task',
-                                    label: 'RPA Automation',
-                                    icon: /*#__PURE__*/ jsx(TaskIcon, {
-                                        type: TaskItemTypeValues.Automation,
-                                        size: "sm"
-                                    })
-                                },
-                                {
-                                    id: 'api-task',
-                                    label: 'API Automation',
-                                    icon: /*#__PURE__*/ jsx(TaskIcon, {
-                                        type: TaskItemTypeValues.ApiAutomation,
-                                        size: "sm"
-                                    })
-                                }
-                            ],
-                            [
-                                {
-                                    id: 'process-task',
-                                    label: 'Agentic Process',
-                                    icon: /*#__PURE__*/ jsx(TaskIcon, {
-                                        type: TaskItemTypeValues.AgenticProcess,
-                                        size: "sm"
-                                    })
+const InteractiveCanvasInner = ({ nodes, edges, onNodesChange, onEdgesChange, onConnect, nodeTypes, edgeTypes, onTaskReorder, onTaskMove, onTaskCopy, onTaskPaste, selectedTaskId, stageTaskIds, actionLog, showInstructions })=>{
+    const { dragState, handlers } = useCrossStageTaskDrag({
+        onTaskReorder,
+        onTaskMove,
+        onTaskCopy
+    });
+    const selectedTaskStageId = useMemo(()=>{
+        if (!selectedTaskId) return null;
+        for (const [stageId, taskIds] of Object.entries(stageTaskIds))if (taskIds.flat().includes(selectedTaskId)) return stageId;
+        return null;
+    }, [
+        selectedTaskId,
+        stageTaskIds
+    ]);
+    useTaskCopyPaste({
+        onTaskPaste
+    }, {
+        selectedTaskId,
+        targetStageId: selectedTaskStageId || '',
+        targetTaskIds: stageTaskIds[selectedTaskStageId || ''] || [],
+        enabled: !!selectedTaskId
+    });
+    return /*#__PURE__*/ jsx(CrossStageDragProvider, {
+        value: {
+            dragState
+        },
+        children: /*#__PURE__*/ jsxs(BaseCanvas, {
+            nodes: nodes,
+            edges: edges,
+            onNodesChange: onNodesChange,
+            onEdgesChange: onEdgesChange,
+            onConnect: onConnect,
+            nodeTypes: nodeTypes,
+            edgeTypes: edgeTypes,
+            mode: "design",
+            connectionMode: ConnectionMode.Strict,
+            defaultEdgeOptions: {
+                type: 'stage'
+            },
+            connectionLineComponent: StageConnectionEdge,
+            elevateEdgesOnSelect: true,
+            onNodeDragStart: handlers.onNodeDragStart,
+            onNodeDrag: handlers.onNodeDrag,
+            onNodeDragStop: handlers.onNodeDragStop,
+            fitView: true,
+            children: [
+                /*#__PURE__*/ jsx(Panel, {
+                    position: "bottom-right",
+                    children: /*#__PURE__*/ jsx(CanvasPositionControls, {
+                        translations: DefaultCanvasTranslations
+                    })
+                }),
+                showInstructions && /*#__PURE__*/ jsx(Panel, {
+                    position: "bottom-left",
+                    children: /*#__PURE__*/ jsxs("div", {
+                        style: {
+                            background: 'var(--uix-palette-surface-paper)',
+                            padding: '8px 16px',
+                            borderRadius: '4px',
+                            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                            maxWidth: '300px'
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx("strong", {
+                                children: "Instructions:"
+                            }),
+                            /*#__PURE__*/ jsxs("ul", {
+                                style: {
+                                    margin: '8px 0',
+                                    paddingLeft: '16px',
+                                    fontSize: '12px'
                                 },
-                                {
-                                    id: 'connector-task',
-                                    label: 'Connector',
-                                    icon: /*#__PURE__*/ jsx(TaskIcon, {
-                                        type: TaskItemTypeValues.Connector,
-                                        size: "sm"
+                                children: [
+                                    /*#__PURE__*/ jsx("li", {
+                                        children: "Click a task to select it"
+                                    }),
+                                    /*#__PURE__*/ jsx("li", {
+                                        children: "Drag tasks to reorder"
+                                    }),
+                                    /*#__PURE__*/ jsx("li", {
+                                        children: "Ctrl/Cmd+C to copy selected task"
+                                    }),
+                                    /*#__PURE__*/ jsx("li", {
+                                        children: "Ctrl/Cmd+V to paste task"
                                     })
-                                }
-                            ],
-                            [
-                                {
-                                    id: 'timer-task',
-                                    label: 'Timer',
-                                    icon: /*#__PURE__*/ jsx(TaskIcon, {
-                                        type: TaskItemTypeValues.Timer,
-                                        size: "sm"
-                                    })
-                                }
-                            ]
+                                ]
+                            })
                         ]
-                    }
-                }
-            }
-        ]
-    },
-    args: {}
+                    })
+                }),
+                actionLog && /*#__PURE__*/ jsx(Panel, {
+                    position: "top-left",
+                    children: /*#__PURE__*/ jsx("div", {
+                        style: {
+                            background: 'var(--uix-palette-surface-paper)',
+                            padding: '8px 16px',
+                            borderRadius: '4px',
+                            boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+                        },
+                        children: actionLog
+                    })
+                })
+            ]
+        })
+    });
 };
-const ExecutionStatus = {
-    name: 'Execution Status',
-    parameters: {
-        nodes: [
-            {
-                id: '0',
-                type: 'stage',
-                position: {
-                    x: 48,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        sla: '1h',
-                        slaBreached: false,
-                        escalation: '1h',
-                        escalationsTriggered: false,
+const Default = {
+    render: ()=>{
+        const tasks = {};
+        return /*#__PURE__*/ jsx("div", {
+            style: {
+                width: '100vw',
+                height: '100vh'
+            },
+            children: /*#__PURE__*/ jsx(InteractiveStageCanvas, {
+                stages: [
+                    {
+                        id: 'stage-1',
                         label: 'Application',
-                        isReadOnly: true,
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'KYC and AML Checks',
-                                    icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Document Verification is going to be very very really long',
-                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-                                }
-                            ]
-                        ]
+                        taskIds: [],
+                        position: {
+                            x: 48,
+                            y: 96
+                        },
+                        width: 304
                     },
-                    execution: {
-                        stageStatus: {
-                            status: 'Completed',
-                            duration: 'SLA: 4h'
+                    {
+                        id: 'stage-2',
+                        label: 'Processing with a really really really long label that might wrap',
+                        taskIds: [],
+                        position: {
+                            x: 400,
+                            y: 96
                         },
-                        taskStatus: {
-                            1: {
-                                status: 'Completed',
-                                label: 'KYC and AML Checks',
-                                duration: '2h 15m'
-                            },
-                            2: {
-                                status: 'Completed',
-                                label: 'Document Verification',
-                                duration: '1h 45m'
-                            }
-                        }
+                        width: 304
                     }
-                }
+                ],
+                tasks: tasks,
+                showInstructions: false,
+                onTaskAdd: ()=>window.alert('Add task functionality')
+            })
+        });
+    }
+};
+const WithTaskIcons = {
+    render: ()=>{
+        const tasks = {
+            'agent-task': {
+                label: 'Agent Task',
+                taskType: 'uipath.case-management.agent',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Agent,
+                    size: "sm"
+                })
             },
-            {
-                id: '1',
-                type: 'stage',
-                position: {
-                    x: 400,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        sla: '1h',
-                        slaBreached: true,
-                        escalation: '1h',
-                        escalationsTriggered: true,
-                        label: 'Processing',
-                        isReadOnly: true,
-                        tasks: [
+            'rpa-task': {
+                label: 'RPA Automation',
+                taskType: 'uipath.case-management.rpa',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Automation,
+                    size: "sm"
+                })
+            },
+            'api-task': {
+                label: 'API Automation',
+                taskType: 'uipath.case-management.api-workflow',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.ApiAutomation,
+                    size: "sm"
+                })
+            },
+            'human-task': {
+                label: 'Human in the Loop',
+                taskType: 'uipath.case-management.run-human-action',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.User,
+                    size: "sm"
+                })
+            },
+            'process-task': {
+                label: 'Agentic Process',
+                taskType: 'uipath.case-management.process',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.AgenticProcess,
+                    size: "sm"
+                })
+            }
+        };
+        return /*#__PURE__*/ jsx("div", {
+            style: {
+                width: '100vw',
+                height: '100vh'
+            },
+            children: /*#__PURE__*/ jsx(InteractiveStageCanvas, {
+                stages: [
+                    {
+                        id: 'stage-1',
+                        label: 'Task Icons Demo',
+                        taskIds: [
                             [
-                                {
-                                    id: '1',
-                                    label: 'Liability Check',
-                                    icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-                                }
+                                'agent-task'
                             ],
                             [
-                                {
-                                    id: '2',
-                                    label: 'Credit Review',
-                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-                                }
+                                'rpa-task'
                             ],
                             [
-                                {
-                                    id: '3',
-                                    label: 'Address Verification',
-                                    icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-                                },
-                                {
-                                    id: '4',
-                                    label: 'Property Verification',
-                                    icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-                                }
+                                'api-task'
+                            ],
+                            [
+                                'human-task'
                             ],
                             [
-                                {
-                                    id: '5',
-                                    label: 'Processing Review',
-                                    icon: /*#__PURE__*/ jsx(ProcessIcon, {})
-                                }
+                                'process-task'
                             ]
                         ],
-                        selectedTasks: [
-                            '2'
-                        ]
-                    },
-                    execution: {
-                        stageStatus: {
-                            status: 'Completed',
-                            duration: 'SLA: 6h 15m'
+                        position: {
+                            x: 48,
+                            y: 96
                         },
-                        taskStatus: {
-                            1: {
-                                status: 'Completed',
-                                label: 'Liability Check',
-                                duration: '1h 30m',
-                                retryDuration: '25m',
-                                badge: 'Reworked',
-                                badgeStatus: 'error',
-                                retryCount: 2
-                            },
-                            2: {
-                                status: 'Completed',
-                                label: 'Credit Review',
-                                duration: '1h 30m',
-                                retryDuration: '32m',
-                                badge: 'Reworked',
-                                retryCount: 1
-                            },
-                            3: {
-                                status: 'Completed',
-                                label: 'Address Verification',
-                                duration: '30m'
-                            },
-                            4: {
-                                status: 'Completed',
-                                label: 'Property Verification',
-                                duration: '1h 30m',
-                                retryDuration: '1h 5m',
-                                badge: 'Reworked',
-                                retryCount: 3
-                            },
-                            5: {
-                                status: 'Completed',
-                                label: 'Processing Review',
-                                duration: '1h 15m'
-                            }
-                        }
+                        width: 304
                     }
+                ],
+                tasks: tasks
+            })
+        });
+    }
+};
+const ExecutionStatus = {
+    render: ()=>{
+        const tasks = {
+            's1-task-1': {
+                label: 'KYC and AML Checks',
+                taskType: 'uipath.case-management.rpa',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Automation,
+                    size: "sm"
+                }),
+                execution: {
+                    status: 'Completed',
+                    duration: '2h 15m'
                 }
             },
-            {
-                id: '2',
-                type: 'stage',
-                position: {
-                    x: 752,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Underwriting',
-                        isReadOnly: true,
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Report Ordering',
-                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Underwriting Verification',
-                                    icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-                                }
-                            ]
-                        ]
-                    },
-                    onTaskClick: (id)=>window.alert(`Task clicked: ${id}`),
-                    execution: {
-                        stageStatus: {
-                            status: 'InProgress',
-                            label: 'In progress',
-                            duration: 'SLA: 2h 15m'
-                        },
-                        taskStatus: {
-                            1: {
-                                status: 'Completed',
-                                label: 'Report Ordering',
-                                duration: '2h 15m'
-                            },
-                            2: {
-                                status: 'InProgress',
-                                label: 'Underwriting Verification'
-                            }
-                        }
-                    }
+            's1-task-2': {
+                label: 'Document Verification is going to be very very really long',
+                taskType: 'uipath.case-management.process',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.AgenticProcess,
+                    size: "sm"
+                }),
+                execution: {
+                    status: 'Completed',
+                    duration: '1h 45m'
                 }
             },
-            {
-                id: '3',
-                type: 'stage',
-                position: {
-                    x: 1104,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Closing',
-                        isReadOnly: true,
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Loan Packet Creation',
-                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Customer Signing',
-                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '3',
-                                    label: 'Generate Audit Report',
-                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-                                }
-                            ]
-                        ]
-                    },
-                    execution: {
-                        stageStatus: {
-                            status: 'NotExecuted',
-                            label: 'Not started'
-                        },
-                        taskStatus: {}
-                    }
+            's2-task-1': {
+                label: 'Liability Check',
+                taskType: 'uipath.case-management.rpa',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Automation,
+                    size: "sm"
+                }),
+                execution: {
+                    status: 'Completed',
+                    duration: '1h 30m',
+                    retryDuration: '25m',
+                    badge: 'Reworked',
+                    badgeStatus: 'error',
+                    retryCount: 2
                 }
             },
-            {
-                id: '4',
-                type: 'stage',
-                position: {
-                    x: 1104,
-                    y: 400
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Rejected',
-                        isException: true,
-                        isReadOnly: true,
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Customer Notification',
-                                    icon: /*#__PURE__*/ jsx(ProcessIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Generate Audit Report',
-                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-                                }
-                            ]
-                        ]
-                    },
-                    execution: {
-                        stageStatus: {
-                            status: 'NotExecuted',
-                            label: 'Not started'
-                        },
-                        taskStatus: {}
-                    }
+            's2-task-2': {
+                label: 'Credit Review',
+                taskType: 'uipath.case-management.process',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.AgenticProcess,
+                    size: "sm"
+                }),
+                execution: {
+                    status: 'Completed',
+                    duration: '1h 30m',
+                    retryDuration: '32m',
+                    badge: 'Reworked',
+                    retryCount: 1
+                }
+            },
+            's2-task-3': {
+                label: 'Address Verification',
+                taskType: 'uipath.case-management.rpa',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Automation,
+                    size: "sm"
+                }),
+                execution: {
+                    status: 'Completed',
+                    duration: '30m'
+                }
+            },
+            's2-task-4': {
+                label: 'Property Verification',
+                taskType: 'uipath.case-management.rpa',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Automation,
+                    size: "sm"
+                }),
+                execution: {
+                    status: 'Completed',
+                    duration: '1h 30m',
+                    retryDuration: '1h 5m',
+                    badge: 'Reworked',
+                    retryCount: 3
+                }
+            },
+            's2-task-5': {
+                label: 'Processing Review',
+                taskType: 'uipath.case-management.agent',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Agent,
+                    size: "sm"
+                }),
+                execution: {
+                    status: 'Completed',
+                    duration: '1h 15m'
+                }
+            },
+            's3-task-1': {
+                label: 'Report Ordering',
+                taskType: 'uipath.case-management.process',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.AgenticProcess,
+                    size: "sm"
+                }),
+                execution: {
+                    status: 'Completed',
+                    duration: '2h 15m'
+                }
+            },
+            's3-task-2': {
+                label: 'Underwriting Verification',
+                taskType: 'uipath.case-management.rpa',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Automation,
+                    size: "sm"
+                }),
+                execution: {
+                    status: 'InProgress'
+                }
+            },
+            's4-task-1': {
+                label: 'Loan Packet Creation',
+                taskType: 'uipath.case-management.process',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.AgenticProcess,
+                    size: "sm"
+                }),
+                execution: {
+                    status: 'NotExecuted'
+                }
+            },
+            's4-task-2': {
+                label: 'Customer Signing',
+                taskType: 'uipath.case-management.run-human-action',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.User,
+                    size: "sm"
+                }),
+                execution: {
+                    status: 'NotExecuted'
+                }
+            },
+            's4-task-3': {
+                label: 'Generate Audit Report',
+                taskType: 'uipath.case-management.process',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.AgenticProcess,
+                    size: "sm"
+                }),
+                execution: {
+                    status: 'NotExecuted'
+                }
+            },
+            'rejected-task-1': {
+                label: 'Customer Notification',
+                taskType: 'uipath.case-management.agent',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Agent,
+                    size: "sm"
+                }),
+                execution: {
+                    status: 'NotExecuted'
+                }
+            },
+            'rejected-task-2': {
+                label: 'Generate Audit Report',
+                taskType: 'uipath.case-management.process',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.AgenticProcess,
+                    size: "sm"
+                }),
+                execution: {
+                    status: 'NotExecuted'
                 }
             }
-        ],
-        edges: [
+        };
+        const edges = [
             {
                 id: 'e1',
                 type: 'stage',
-                source: '0',
-                sourceHandle: '0____source____right',
-                target: '1',
-                targetHandle: '1____target____left'
+                source: 'stage-1',
+                sourceHandle: 'stage-1____source____right',
+                target: 'stage-2',
+                targetHandle: 'stage-2____target____left'
             },
             {
                 id: 'e2',
                 type: 'stage',
-                source: '1',
-                sourceHandle: '1____source____right',
-                target: '2',
-                targetHandle: '2____target____left'
+                source: 'stage-2',
+                sourceHandle: 'stage-2____source____right',
+                target: 'stage-3',
+                targetHandle: 'stage-3____target____left'
             },
             {
                 id: 'e3',
                 type: 'stage',
-                source: '2',
-                sourceHandle: '2____source____right',
-                target: '3',
-                targetHandle: '3____target____left'
+                source: 'stage-3',
+                sourceHandle: 'stage-3____source____right',
+                target: 'stage-4',
+                targetHandle: 'stage-4____target____left'
             }
-        ]
-    },
-    args: {}
-};
-const InteractiveTaskManagement = {
-    name: 'Interactive Task Management',
-    parameters: {
-        nodes: [
-            {
-                id: 'design-stage',
-                type: 'stage',
-                position: {
-                    x: 48,
-                    y: 96
-                },
-                width: 352,
-                data: {
-                    stageDetails: {
-                        label: 'Design Mode - Editable',
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Initial Task',
-                                    icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Credit Review with a very long label that will be truncated and show tooltip',
-                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-                                }
-                            ],
+        ];
+        return /*#__PURE__*/ jsx("div", {
+            style: {
+                width: '100vw',
+                height: '100vh'
+            },
+            children: /*#__PURE__*/ jsx(InteractiveStageCanvas, {
+                stages: [
+                    {
+                        id: 'stage-1',
+                        label: 'Application',
+                        taskIds: [
                             [
-                                {
-                                    id: '3',
-                                    label: 'Address Verification',
-                                    icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-                                },
-                                {
-                                    id: '4',
-                                    label: 'Property Verification with Long Name',
-                                    icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-                                },
-                                {
-                                    id: '5',
-                                    label: 'Background Check',
-                                    icon: /*#__PURE__*/ jsx(ProcessIcon, {})
-                                }
+                                's1-task-1'
                             ],
                             [
-                                {
-                                    id: '6',
-                                    label: "Final Review Task with Extended Description",
-                                    icon: /*#__PURE__*/ jsx(ProcessIcon, {})
-                                }
+                                's1-task-2'
                             ]
-                        ]
-                    },
-                    onTaskClick: (taskId)=>{
-                        window.alert(`Task clicked: ${taskId}`);
-                    },
-                    onTaskRemove: (groupIndex, taskIndex)=>{
-                        window.alert(`Task removal requested!\nGroup: ${groupIndex}\nTask: ${taskIndex}\n\nIn a real app, this would remove the task from the data.`);
-                    },
-                    onTaskAdd: ()=>{
-                        window.alert('Add task functionality - this would open a dialog to add a new task');
-                    }
-                }
-            },
-            {
-                id: 'execution-stage',
-                type: 'stage',
-                position: {
-                    x: 448,
-                    y: 96
-                },
-                width: 352,
-                data: {
-                    stageDetails: {
-                        label: 'Execution Mode - Read Only',
+                        ],
+                        position: {
+                            x: 48,
+                            y: 96
+                        },
+                        width: 304,
                         isReadOnly: true,
-                        tasks: [
+                        execution: {
+                            stageStatus: {
+                                status: 'Completed',
+                                duration: 'SLA: 4h'
+                            },
+                            taskStatus: {}
+                        }
+                    },
+                    {
+                        id: 'stage-2',
+                        label: 'Processing',
+                        taskIds: [
                             [
-                                {
-                                    id: '1',
-                                    label: 'Task with execution status and very long name that will be truncated',
-                                    icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-                                }
+                                's2-task-1'
                             ],
                             [
-                                {
-                                    id: '2',
-                                    label: 'Credit Review Processing',
-                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-                                }
+                                's2-task-2'
                             ],
                             [
-                                {
-                                    id: '3',
-                                    label: 'Parallel Address Verification Task',
-                                    icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-                                },
-                                {
-                                    id: '4',
-                                    label: 'Parallel Property Verification with Extended Name',
-                                    icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-                                }
+                                's2-task-3',
+                                's2-task-4'
                             ],
                             [
-                                {
-                                    id: '5',
-                                    label: 'Final Review and Approval Process',
-                                    icon: /*#__PURE__*/ jsx(ProcessIcon, {})
-                                }
+                                's2-task-5'
                             ]
-                        ]
-                    },
-                    execution: {
-                        stageStatus: {
-                            status: 'InProgress',
-                            label: 'In progress',
-                            duration: '2h 15m'
+                        ],
+                        position: {
+                            x: 400,
+                            y: 96
                         },
-                        taskStatus: {
-                            1: {
-                                status: 'Completed',
-                                duration: '30m',
-                                badge: 'Completed',
-                                badgeStatus: 'info'
-                            },
-                            2: {
-                                status: 'InProgress',
-                                duration: '1h 15m',
-                                retryDuration: '15m',
-                                badge: 'Retry',
-                                badgeStatus: 'warning',
-                                retryCount: 2
-                            },
-                            3: {
+                        width: 304,
+                        isReadOnly: true,
+                        execution: {
+                            stageStatus: {
                                 status: 'Completed',
-                                duration: '45m'
+                                duration: 'SLA: 6h 15m'
                             },
-                            4: {
-                                status: 'Failed',
-                                duration: '20m',
-                                retryDuration: '10m',
-                                badge: 'Error',
-                                badgeStatus: 'error',
-                                retryCount: 1
-                            },
-                            5: {
-                                status: 'NotExecuted'
-                            }
+                            taskStatus: {}
                         }
                     },
-                    onTaskClick: (taskId)=>{
-                        window.alert(`Task clicked: ${taskId} (execution mode - read only)`);
-                    }
-                }
-            }
-        ]
-    },
-    args: {}
-};
-const LoanProcessingWorkflow = {
-    name: 'Loan Processing Workflow',
-    parameters: {
-        nodes: [
-            {
-                id: 'application',
-                type: 'stage',
-                position: {
-                    x: 48,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Application',
-                        tasks: [
+                    {
+                        id: 'stage-3',
+                        label: 'Underwriting',
+                        taskIds: [
                             [
-                                {
-                                    id: '1',
-                                    label: 'KYC and AML Checks',
-                                    icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-                                }
+                                's3-task-1'
                             ],
                             [
-                                {
-                                    id: '2',
-                                    label: 'Document Verification',
-                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-                                }
+                                's3-task-2'
                             ]
                         ],
-                        selectedTasks: [
-                            '1'
-                        ]
-                    }
-                }
-            },
-            {
-                id: 'processing',
-                type: 'stage',
-                position: {
-                    x: 448,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Processing',
-                        tasks: [
+                        position: {
+                            x: 752,
+                            y: 96
+                        },
+                        width: 304,
+                        isReadOnly: true,
+                        execution: {
+                            stageStatus: {
+                                status: 'InProgress',
+                                label: 'In progress',
+                                duration: 'SLA: 2h 15m'
+                            },
+                            taskStatus: {}
+                        }
+                    },
+                    {
+                        id: 'stage-4',
+                        label: 'Closing',
+                        taskIds: [
                             [
-                                {
-                                    id: '1',
-                                    label: 'Liability Check',
-                                    icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-                                }
+                                's4-task-1'
                             ],
                             [
-                                {
-                                    id: '2',
-                                    label: 'Credit Review',
-                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-                                }
+                                's4-task-2'
                             ],
                             [
-                                {
-                                    id: '3',
-                                    label: 'Address Verification',
-                                    icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-                                },
-                                {
-                                    id: '4',
-                                    label: 'Property Verification',
-                                    icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-                                }
+                                's4-task-3'
+                            ]
+                        ],
+                        position: {
+                            x: 1104,
+                            y: 96
+                        },
+                        width: 304,
+                        isReadOnly: true,
+                        execution: {
+                            stageStatus: {
+                                status: 'NotExecuted',
+                                label: 'Not started'
+                            },
+                            taskStatus: {}
+                        }
+                    },
+                    {
+                        id: 'rejected',
+                        label: 'Rejected',
+                        taskIds: [
+                            [
+                                'rejected-task-1'
                             ],
                             [
-                                {
-                                    id: '5',
-                                    label: 'Processing Review',
-                                    icon: /*#__PURE__*/ jsx(ProcessIcon, {})
-                                }
+                                'rejected-task-2'
                             ]
                         ],
-                        selectedTasks: [
-                            '4'
-                        ]
+                        position: {
+                            x: 1104,
+                            y: 400
+                        },
+                        width: 304,
+                        isException: true,
+                        isReadOnly: true,
+                        execution: {
+                            stageStatus: {
+                                status: 'NotExecuted',
+                                label: 'Not started'
+                            },
+                            taskStatus: {}
+                        }
                     }
+                ],
+                tasks: tasks,
+                edges: edges,
+                showInstructions: false
+            })
+        });
+    }
+};
+const InteractiveTaskManagement = {
+    render: ()=>{
+        const tasks = {
+            'task-1': {
+                label: 'Initial Task',
+                taskType: 'uipath.case-management.rpa',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Automation,
+                    size: "sm"
+                })
+            },
+            'task-2': {
+                label: 'Credit Review with a very long label that will be truncated and show tooltip',
+                taskType: 'uipath.case-management.process',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.AgenticProcess,
+                    size: "sm"
+                })
+            },
+            'task-3': {
+                label: 'Address Verification',
+                taskType: 'uipath.case-management.rpa',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Automation,
+                    size: "sm"
+                })
+            },
+            'task-4': {
+                label: 'Property Verification with Long Name',
+                taskType: 'uipath.case-management.rpa',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Automation,
+                    size: "sm"
+                })
+            },
+            'task-5': {
+                label: 'Background Check',
+                taskType: 'uipath.case-management.agent',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Agent,
+                    size: "sm"
+                })
+            },
+            'task-6': {
+                label: "Final Review Task with Extended Description",
+                taskType: 'uipath.case-management.agent',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Agent,
+                    size: "sm"
+                })
+            },
+            'exec-task-1': {
+                label: 'Task with execution status and very long name that will be truncated',
+                taskType: 'uipath.case-management.rpa',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Automation,
+                    size: "sm"
+                }),
+                execution: {
+                    status: 'Completed',
+                    duration: '30m',
+                    badge: 'Completed',
+                    badgeStatus: 'info'
                 }
             },
-            {
-                id: 'underwriting',
-                type: 'stage',
-                position: {
-                    x: 848,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Underwriting',
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Report Ordering',
-                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Underwriting Verification',
-                                    icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-                                }
-                            ]
-                        ]
-                    }
+            'exec-task-2': {
+                label: 'Credit Review Processing',
+                taskType: 'uipath.case-management.process',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.AgenticProcess,
+                    size: "sm"
+                }),
+                execution: {
+                    status: 'InProgress',
+                    duration: '1h 15m',
+                    retryDuration: '15m',
+                    badge: 'Retry',
+                    badgeStatus: 'warning',
+                    retryCount: 2
                 }
             },
-            {
-                id: 'closing',
-                type: 'stage',
-                position: {
-                    x: 1248,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Closing',
-                        tasks: [
+            'exec-task-3': {
+                label: 'Parallel Address Verification Task',
+                taskType: 'uipath.case-management.rpa',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Automation,
+                    size: "sm"
+                }),
+                execution: {
+                    status: 'Completed',
+                    duration: '45m'
+                }
+            },
+            'exec-task-4': {
+                label: 'Parallel Property Verification with Extended Name',
+                taskType: 'uipath.case-management.rpa',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Automation,
+                    size: "sm"
+                }),
+                execution: {
+                    status: 'Failed',
+                    duration: '20m',
+                    retryDuration: '10m',
+                    badge: 'Error',
+                    badgeStatus: 'error',
+                    retryCount: 1
+                }
+            },
+            'exec-task-5': {
+                label: 'Final Review and Approval Process',
+                taskType: 'uipath.case-management.agent',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Agent,
+                    size: "sm"
+                }),
+                execution: {
+                    status: 'NotExecuted'
+                }
+            }
+        };
+        return /*#__PURE__*/ jsx("div", {
+            style: {
+                width: '100vw',
+                height: '100vh'
+            },
+            children: /*#__PURE__*/ jsx(InteractiveStageCanvas, {
+                stages: [
+                    {
+                        id: 'design-stage',
+                        label: 'Design Mode - Editable',
+                        taskIds: [
                             [
-                                {
-                                    id: '1',
-                                    label: 'Loan Packet Creation',
-                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-                                }
+                                'task-1'
                             ],
                             [
-                                {
-                                    id: '2',
-                                    label: 'Customer Signing',
-                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-                                }
+                                'task-2'
                             ],
                             [
-                                {
-                                    id: '3',
-                                    label: 'Generate Audit Report',
-                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-                                }
-                            ]
-                        ]
-                    }
-                }
-            },
-            {
-                id: 'funding',
-                type: 'stage',
-                position: {
-                    x: 1648,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Funding',
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Disperse Loan',
-                                    icon: /*#__PURE__*/ jsx(ProcessIcon, {})
-                                }
+                                'task-3',
+                                'task-4',
+                                'task-5'
                             ],
                             [
-                                {
-                                    id: '2',
-                                    label: 'Generate Audit Report',
-                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-                                }
+                                'task-6'
                             ]
-                        ]
-                    }
-                }
-            },
-            {
-                id: 'rejected',
-                type: 'stage',
-                position: {
-                    x: 1248,
-                    y: 400
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Rejected',
-                        isException: true,
-                        tasks: [
+                        ],
+                        position: {
+                            x: 48,
+                            y: 96
+                        },
+                        width: 352
+                    },
+                    {
+                        id: 'execution-stage',
+                        label: 'Execution Mode - Read Only',
+                        taskIds: [
                             [
-                                {
-                                    id: '1',
-                                    label: 'Customer Notification',
-                                    icon: /*#__PURE__*/ jsx(ProcessIcon, {})
-                                }
+                                'exec-task-1'
                             ],
                             [
-                                {
-                                    id: '2',
-                                    label: 'Generate Audit Report',
-                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-                                }
-                            ]
-                        ]
-                    }
-                }
-            },
-            {
-                id: 'withdrawn',
-                type: 'stage',
-                position: {
-                    x: 448,
-                    y: 608
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Withdrawn',
-                        isException: true,
-                        tasks: [
+                                'exec-task-2'
+                            ],
                             [
-                                {
-                                    id: '1',
-                                    label: 'Customer Notification',
-                                    icon: /*#__PURE__*/ jsx(ProcessIcon, {})
-                                }
+                                'exec-task-3',
+                                'exec-task-4'
                             ],
                             [
-                                {
-                                    id: '2',
-                                    label: 'Generate Audit Report',
-                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-                                }
+                                'exec-task-5'
                             ]
-                        ]
+                        ],
+                        position: {
+                            x: 448,
+                            y: 96
+                        },
+                        width: 352,
+                        isReadOnly: true,
+                        execution: {
+                            stageStatus: {
+                                status: 'InProgress',
+                                label: 'In progress',
+                                duration: '2h 15m'
+                            },
+                            taskStatus: {}
+                        }
                     }
-                }
+                ],
+                tasks: tasks
+            })
+        });
+    }
+};
+const LoanProcessingWorkflow = {
+    render: ()=>{
+        const tasks = {
+            'app-task-1': {
+                label: 'KYC and AML Checks',
+                taskType: 'uipath.case-management.rpa',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Automation,
+                    size: "sm"
+                })
+            },
+            'app-task-2': {
+                label: 'Document Verification',
+                taskType: 'uipath.case-management.process',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.AgenticProcess,
+                    size: "sm"
+                })
+            },
+            'proc-task-1': {
+                label: 'Liability Check',
+                taskType: 'uipath.case-management.rpa',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Automation,
+                    size: "sm"
+                })
+            },
+            'proc-task-2': {
+                label: 'Credit Review',
+                taskType: 'uipath.case-management.process',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.AgenticProcess,
+                    size: "sm"
+                })
+            },
+            'proc-task-3': {
+                label: 'Address Verification',
+                taskType: 'uipath.case-management.rpa',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Automation,
+                    size: "sm"
+                })
+            },
+            'proc-task-4': {
+                label: 'Property Verification',
+                taskType: 'uipath.case-management.rpa',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Automation,
+                    size: "sm"
+                })
+            },
+            'proc-task-5': {
+                label: 'Processing Review',
+                taskType: 'uipath.case-management.agent',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Agent,
+                    size: "sm"
+                })
+            },
+            'uw-task-1': {
+                label: 'Report Ordering',
+                taskType: 'uipath.case-management.process',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.AgenticProcess,
+                    size: "sm"
+                })
+            },
+            'uw-task-2': {
+                label: 'Underwriting Verification',
+                taskType: 'uipath.case-management.rpa',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Automation,
+                    size: "sm"
+                })
+            },
+            'close-task-1': {
+                label: 'Loan Packet Creation',
+                taskType: 'uipath.case-management.process',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.AgenticProcess,
+                    size: "sm"
+                })
+            },
+            'close-task-2': {
+                label: 'Customer Signing',
+                taskType: 'uipath.case-management.run-human-action',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.User,
+                    size: "sm"
+                })
+            },
+            'close-task-3': {
+                label: 'Generate Audit Report',
+                taskType: 'uipath.case-management.process',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.AgenticProcess,
+                    size: "sm"
+                })
+            },
+            'fund-task-1': {
+                label: 'Disperse Loan',
+                taskType: 'uipath.case-management.agent',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Agent,
+                    size: "sm"
+                })
+            },
+            'fund-task-2': {
+                label: 'Generate Audit Report',
+                taskType: 'uipath.case-management.process',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.AgenticProcess,
+                    size: "sm"
+                })
+            },
+            'reject-task-1': {
+                label: 'Customer Notification',
+                taskType: 'uipath.case-management.agent',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Agent,
+                    size: "sm"
+                })
+            },
+            'reject-task-2': {
+                label: 'Generate Audit Report',
+                taskType: 'uipath.case-management.process',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.AgenticProcess,
+                    size: "sm"
+                })
+            },
+            'withdraw-task-1': {
+                label: 'Customer Notification',
+                taskType: 'uipath.case-management.agent',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Agent,
+                    size: "sm"
+                })
+            },
+            'withdraw-task-2': {
+                label: 'Generate Audit Report',
+                taskType: 'uipath.case-management.process',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.AgenticProcess,
+                    size: "sm"
+                })
             }
-        ],
-        edges: [
+        };
+        const edges = [
             {
                 id: 'e1',
                 type: 'stage',
@@ -1141,394 +1381,580 @@ const LoanProcessingWorkflow = {
                 target: 'funding',
                 targetHandle: 'funding____target____left'
             }
-        ]
-    },
-    args: {}
-};
-const initialTasks = [
-    [
-        {
-            id: 'task-1',
-            label: 'KYC Verification',
-            icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-        }
-    ],
-    [
-        {
-            id: 'task-2',
-            label: 'Document Review',
-            icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-        },
-        {
-            id: 'task-6',
-            label: 'Credit Check',
-            icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-        }
-    ],
-    [
-        {
-            id: 'task-3',
-            label: 'Address Check',
-            icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-        },
-        {
-            id: 'task-4',
-            label: 'Property Check',
-            icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-        }
-    ],
-    [
-        {
-            id: 'task-5',
-            label: 'Final Approval',
-            icon: /*#__PURE__*/ jsx(ProcessIcon, {})
-        }
-    ]
-];
-const DraggableTaskReorderingStory = ()=>{
-    const StageNodeWrapper = useMemo(()=>function(props) {
-            return /*#__PURE__*/ jsx(StageNode, {
-                ...props,
-                ...props.data
-            });
-        }, []);
-    const nodeTypes = useMemo(()=>({
-            stage: StageNodeWrapper
-        }), [
-        StageNodeWrapper
-    ]);
-    const edgeTypes = useMemo(()=>({
-            stage: StageEdge
-        }), []);
-    const [nodes, setNodes, onNodesChange] = useNodesState([
-        {
-            id: 'reorder-stage',
-            type: 'stage',
-            position: {
-                x: 320,
-                y: 96
+        ];
+        return /*#__PURE__*/ jsx("div", {
+            style: {
+                width: '100vw',
+                height: '100vh'
             },
-            data: {
-                stageDetails: {
-                    label: 'Drag to Reorder Tasks',
-                    tasks: initialTasks
-                },
-                onTaskClick: (taskId)=>console.log('Task clicked:', taskId)
-            }
-        }
-    ]);
-    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-    const handleTaskReorder = useCallback((reorderedTasks)=>{
-        setNodes((nds)=>nds.map((node)=>'reorder-stage' === node.id ? {
-                    ...node,
-                    data: {
-                        ...node.data,
-                        stageDetails: {
-                            ...node.data.stageDetails,
-                            tasks: reorderedTasks
-                        }
-                    }
-                } : node));
-    }, [
-        setNodes
-    ]);
-    const nodesWithHandler = useMemo(()=>nodes.map((node)=>({
-                ...node,
-                data: {
-                    ...node.data,
-                    onTaskReorder: handleTaskReorder
-                }
-            })), [
-        nodes,
-        handleTaskReorder
-    ]);
-    const onConnect = useCallback((connection)=>setEdges((eds)=>addEdge(connection, eds)), [
-        setEdges
-    ]);
-    return /*#__PURE__*/ jsx("div", {
-        style: {
-            width: '100vw',
-            height: '100vh'
-        },
-        children: /*#__PURE__*/ jsx(ReactFlowProvider, {
-            children: /*#__PURE__*/ jsx(BaseCanvas, {
-                nodes: nodesWithHandler,
-                edges: edges,
-                onNodesChange: onNodesChange,
-                onEdgesChange: onEdgesChange,
-                onConnect: onConnect,
-                nodeTypes: nodeTypes,
-                edgeTypes: edgeTypes,
-                mode: "design",
-                connectionMode: ConnectionMode.Strict,
-                defaultEdgeOptions: {
-                    type: 'stage'
-                },
-                connectionLineComponent: StageConnectionEdge,
-                elevateEdgesOnSelect: true,
-                defaultViewport: {
-                    x: 0,
-                    y: 0,
-                    zoom: 1.5
-                },
-                children: /*#__PURE__*/ jsx(Panel, {
-                    position: "bottom-right",
-                    children: /*#__PURE__*/ jsx(CanvasPositionControls, {
-                        translations: DefaultCanvasTranslations
-                    })
+            children: /*#__PURE__*/ jsx(InteractiveStageCanvas, {
+                stages: [
+                    {
+                        id: 'application',
+                        label: 'Application',
+                        taskIds: [
+                            [
+                                'app-task-1'
+                            ],
+                            [
+                                'app-task-2'
+                            ]
+                        ],
+                        position: {
+                            x: 48,
+                            y: 96
+                        },
+                        width: 304
+                    },
+                    {
+                        id: 'processing',
+                        label: 'Processing',
+                        taskIds: [
+                            [
+                                'proc-task-1'
+                            ],
+                            [
+                                'proc-task-2'
+                            ],
+                            [
+                                'proc-task-3',
+                                'proc-task-4'
+                            ],
+                            [
+                                'proc-task-5'
+                            ]
+                        ],
+                        position: {
+                            x: 448,
+                            y: 96
+                        },
+                        width: 304
+                    },
+                    {
+                        id: 'underwriting',
+                        label: 'Underwriting',
+                        taskIds: [
+                            [
+                                'uw-task-1'
+                            ],
+                            [
+                                'uw-task-2'
+                            ]
+                        ],
+                        position: {
+                            x: 848,
+                            y: 96
+                        },
+                        width: 304
+                    },
+                    {
+                        id: 'closing',
+                        label: 'Closing',
+                        taskIds: [
+                            [
+                                'close-task-1'
+                            ],
+                            [
+                                'close-task-2'
+                            ],
+                            [
+                                'close-task-3'
+                            ]
+                        ],
+                        position: {
+                            x: 1248,
+                            y: 96
+                        },
+                        width: 304
+                    },
+                    {
+                        id: 'funding',
+                        label: 'Funding',
+                        taskIds: [
+                            [
+                                'fund-task-1'
+                            ],
+                            [
+                                'fund-task-2'
+                            ]
+                        ],
+                        position: {
+                            x: 1648,
+                            y: 96
+                        },
+                        width: 304
+                    },
+                    {
+                        id: 'rejected',
+                        label: 'Rejected',
+                        taskIds: [
+                            [
+                                'reject-task-1'
+                            ],
+                            [
+                                'reject-task-2'
+                            ]
+                        ],
+                        position: {
+                            x: 1248,
+                            y: 400
+                        },
+                        width: 304,
+                        isException: true
+                    },
+                    {
+                        id: 'withdrawn',
+                        label: 'Withdrawn',
+                        taskIds: [
+                            [
+                                'withdraw-task-1'
+                            ],
+                            [
+                                'withdraw-task-2'
+                            ]
+                        ],
+                        position: {
+                            x: 448,
+                            y: 608
+                        },
+                        width: 304,
+                        isException: true
+                    }
+                ],
+                tasks: tasks,
+                edges: edges
+            })
+        });
+    }
+};
+const WithTaskMenu = {
+    render: ()=>{
+        const tasks = {
+            'task-1': {
+                label: 'Initial Review',
+                taskType: 'uipath.case-management.process',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.AgenticProcess,
+                    size: "sm"
+                })
+            },
+            'task-2': {
+                label: 'Document Verification',
+                taskType: 'uipath.case-management.rpa',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Automation,
+                    size: "sm"
+                })
+            },
+            'task-3': {
+                label: 'Address Check',
+                taskType: 'uipath.case-management.rpa',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Automation,
+                    size: "sm"
+                })
+            },
+            'task-4': {
+                label: 'Background Check',
+                taskType: 'uipath.case-management.agent',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Agent,
+                    size: "sm"
+                })
+            },
+            'task-5': {
+                label: 'Credit Check',
+                taskType: 'uipath.case-management.rpa',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Automation,
+                    size: "sm"
                 })
+            },
+            'task-6': {
+                label: 'Final Approval',
+                taskType: 'uipath.case-management.run-human-action',
+                icon: /*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.User,
+                    size: "sm"
+                })
+            }
+        };
+        return /*#__PURE__*/ jsx("div", {
+            style: {
+                width: '100vw',
+                height: '100vh'
+            },
+            children: /*#__PURE__*/ jsx(InteractiveStageCanvas, {
+                stages: [
+                    {
+                        id: 'stage-1',
+                        label: 'Task Menu Demo',
+                        taskIds: [
+                            [
+                                'task-1'
+                            ],
+                            [
+                                'task-2'
+                            ],
+                            [
+                                'task-3',
+                                'task-4',
+                                'task-5'
+                            ],
+                            [
+                                'task-6'
+                            ]
+                        ],
+                        position: {
+                            x: 48,
+                            y: 96
+                        },
+                        width: 304
+                    }
+                ],
+                tasks: tasks
             })
-        })
-    });
+        });
+    }
 };
-const DraggableTaskReordering = {
-    name: 'Draggable Task Reordering',
-    parameters: {
-        useCustomRender: true
+const addReplaceInitialTasks = {
+    'task-1': {
+        label: 'Initial Review',
+        taskType: 'uipath.case-management.process',
+        icon: /*#__PURE__*/ jsx(TaskIcon, {
+            type: TaskItemTypeValues.AgenticProcess,
+            size: "sm"
+        })
+    },
+    'task-2': {
+        label: 'Document Verification',
+        taskType: 'uipath.case-management.rpa',
+        icon: /*#__PURE__*/ jsx(TaskIcon, {
+            type: TaskItemTypeValues.Automation,
+            size: "sm"
+        })
+    },
+    'task-3': {
+        label: 'Address Check',
+        taskType: 'uipath.case-management.rpa',
+        icon: /*#__PURE__*/ jsx(TaskIcon, {
+            type: TaskItemTypeValues.Automation,
+            size: "sm"
+        })
+    },
+    'task-4': {
+        label: 'Background Check',
+        taskType: 'uipath.case-management.agent',
+        icon: /*#__PURE__*/ jsx(TaskIcon, {
+            type: TaskItemTypeValues.Agent,
+            size: "sm"
+        })
     },
-    render: ()=>/*#__PURE__*/ jsx(DraggableTaskReorderingStory, {}),
-    args: {}
+    'task-5': {
+        label: 'Final Approval',
+        taskType: 'uipath.case-management.run-human-action',
+        icon: /*#__PURE__*/ jsx(TaskIcon, {
+            type: TaskItemTypeValues.User,
+            size: "sm"
+        })
+    }
 };
-const initialTasksForAddReplace = [
-    [
-        {
-            id: 'task-1',
-            label: 'Initial Verification',
-            icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-        }
-    ],
-    [
-        {
-            id: 'task-2',
-            label: 'Document Review',
-            icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-        }
-    ]
-];
-const availableTaskOptions = [
+const addReplaceTaskOptions = [
     {
-        id: 'verification-task',
-        name: 'Verification task',
-        icon: {
-            Component: ()=>/*#__PURE__*/ jsx(VerificationIcon, {})
-        },
+        id: 'opt-agent',
+        name: 'Agent Task',
         data: {
-            type: 'verification'
+            taskType: 'uipath.case-management.agent'
+        },
+        icon: {
+            Component: ()=>/*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Agent,
+                    size: "sm"
+                })
         }
     },
     {
-        id: 'document-task',
-        name: 'Document task',
-        icon: {
-            Component: ()=>/*#__PURE__*/ jsx(DocumentIcon, {})
-        },
+        id: 'opt-automation',
+        name: 'RPA Automation',
         data: {
-            type: 'document'
+            taskType: 'uipath.case-management.rpa'
+        },
+        icon: {
+            Component: ()=>/*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.Automation,
+                    size: "sm"
+                })
         }
     },
     {
-        id: 'process-task',
-        name: 'Process task',
-        icon: {
-            Component: ()=>/*#__PURE__*/ jsx(ProcessIcon, {})
-        },
+        id: 'opt-api',
+        name: 'API Automation',
         data: {
-            type: 'process'
+            taskType: 'uipath.case-management.api-workflow'
+        },
+        icon: {
+            Component: ()=>/*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.ApiAutomation,
+                    size: "sm"
+                })
         }
     },
     {
-        id: 'credit-check',
-        name: 'Credit check',
-        icon: {
-            Component: ()=>/*#__PURE__*/ jsx(VerificationIcon, {})
-        },
+        id: 'opt-human',
+        name: 'Human in the Loop',
         data: {
-            type: 'credit'
+            taskType: 'uipath.case-management.run-human-action'
+        },
+        icon: {
+            Component: ()=>/*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.User,
+                    size: "sm"
+                })
         }
     },
     {
-        id: 'address-verification',
-        name: 'Address verification',
-        icon: {
-            Component: ()=>/*#__PURE__*/ jsx(VerificationIcon, {})
-        },
+        id: 'opt-process',
+        name: 'Agentic Process',
         data: {
-            type: 'address'
+            taskType: 'uipath.case-management.process'
+        },
+        icon: {
+            Component: ()=>/*#__PURE__*/ jsx(TaskIcon, {
+                    type: TaskItemTypeValues.AgenticProcess,
+                    size: "sm"
+                })
         }
     }
 ];
 const AddAndReplaceTasksStory = ()=>{
-    const StageNodeWrapper = useMemo(()=>function(props) {
-            return /*#__PURE__*/ jsx(StageNode, {
-                ...props,
-                ...props.data
-            });
-        }, []);
-    const nodeTypes = useMemo(()=>({
-            stage: StageNodeWrapper
-        }), [
-        StageNodeWrapper
-    ]);
-    const edgeTypes = useMemo(()=>({
-            stage: StageEdge
-        }), []);
+    const stageId = 'stage-1';
+    const [stageTaskIds, setStageTaskIds] = useState({
+        [stageId]: [
+            [
+                'task-1'
+            ],
+            [
+                'task-2'
+            ],
+            [
+                'task-3',
+                'task-4'
+            ],
+            [
+                'task-5'
+            ]
+        ]
+    });
+    const [allTasks, setAllTasks] = useState(addReplaceInitialTasks);
+    const [selectedTaskId, setSelectedTaskId] = useState(null);
+    const [actionLog, setActionLog] = useState('');
     const [pendingReplaceTask, setPendingReplaceTask] = useState();
-    const [selectedTaskId, setSelectedTaskId] = useState();
     const [menuAnchorEl, setMenuAnchorEl] = useState(null);
-    const [nodesState, setNodes, onNodesChange] = useNodesState([
-        {
-            id: 'add-replace-stage',
-            type: 'stage',
-            position: {
-                x: 320,
-                y: 96
-            },
-            data: {
-                stageDetails: {
-                    label: 'Add, Replace, and Group Tasks',
-                    tasks: initialTasksForAddReplace
-                },
-                taskOptions: availableTaskOptions
-            }
-        }
-    ]);
-    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-    const handleAddTask = useCallback((taskItem)=>{
-        const newTask = {
-            id: `${taskItem.id}-${Date.now()}`,
-            label: taskItem.name,
-            icon: taskItem.icon?.Component ? /*#__PURE__*/ jsx(taskItem.icon.Component, {}) : void 0
-        };
-        setNodes((prevNodes)=>prevNodes.map((node)=>'add-replace-stage' === node.id ? {
-                    ...node,
-                    data: {
-                        ...node.data,
-                        stageDetails: {
-                            ...node.data.stageDetails,
-                            tasks: [
-                                ...node.data.stageDetails.tasks,
-                                [
-                                    newTask
-                                ]
-                            ]
-                        }
-                    }
-                } : node));
+    const handleAddTaskFromToolbox = useCallback((taskItem)=>{
+        const newTaskId = `added-${Date.now()}`;
+        const IconComp = taskItem.icon?.Component;
+        setAllTasks((prev)=>({
+                ...prev,
+                [newTaskId]: {
+                    label: taskItem.name,
+                    taskType: taskItem.data?.taskType || 'uipath.case-management.process',
+                    icon: IconComp ? /*#__PURE__*/ jsx(IconComp, {}) : /*#__PURE__*/ jsx(TaskIcon, {
+                        type: TaskItemTypeValues.AgenticProcess,
+                        size: "sm"
+                    })
+                }
+            }));
+        setStageTaskIds((prev)=>({
+                ...prev,
+                [stageId]: [
+                    ...prev[stageId] || [],
+                    [
+                        newTaskId
+                    ]
+                ]
+            }));
+        setActionLog(`Added task: ${taskItem.name}`);
     }, [
-        setNodes
+        stageId
     ]);
-    const handleReplaceTask = useCallback((taskItem, groupIndex, taskIndex)=>{
-        if (groupIndex < 0 || taskIndex < 0) return;
-        const listItem = taskItem;
-        const replacedTask = {
-            id: `${listItem.id}-replaced-${Date.now()}`,
-            label: listItem.name,
-            icon: listItem.icon?.Component ? /*#__PURE__*/ jsx(listItem.icon.Component, {}) : void 0
-        };
-        setNodes((prevNodes)=>prevNodes.map((node)=>{
-                if ('add-replace-stage' !== node.id) return node;
-                const prevTasks = node.data.stageDetails.tasks;
-                if (groupIndex >= prevTasks.length) return node;
-                const currentGroup = prevTasks[groupIndex];
-                if (!currentGroup || taskIndex >= currentGroup.length) return node;
-                const updatedTasks = prevTasks.map((group, gIdx)=>{
-                    if (gIdx === groupIndex) return group.map((task, tIdx)=>tIdx === taskIndex ? replacedTask : task);
-                    return group;
-                });
-                return {
-                    ...node,
-                    data: {
-                        ...node.data,
-                        stageDetails: {
-                            ...node.data.stageDetails,
-                            tasks: updatedTasks
-                        }
-                    }
-                };
+    const handleReplaceTask = useCallback((newTask, groupIndex, taskIndex)=>{
+        const newTaskId = `replaced-${Date.now()}`;
+        const IconComp = newTask.icon?.Component;
+        setAllTasks((prev)=>({
+                ...prev,
+                [newTaskId]: {
+                    label: newTask.name,
+                    taskType: newTask.data?.taskType || 'uipath.case-management.process',
+                    icon: IconComp ? /*#__PURE__*/ jsx(IconComp, {}) : /*#__PURE__*/ jsx(TaskIcon, {
+                        type: TaskItemTypeValues.AgenticProcess,
+                        size: "sm"
+                    })
+                }
             }));
+        setStageTaskIds((prev)=>{
+            const currentTaskIds = [
+                ...prev[stageId] || []
+            ].map((group)=>[
+                    ...group
+                ]);
+            const targetGroup = currentTaskIds[groupIndex];
+            if (targetGroup && void 0 !== targetGroup[taskIndex]) targetGroup[taskIndex] = newTaskId;
+            return {
+                ...prev,
+                [stageId]: currentTaskIds
+            };
+        });
         setPendingReplaceTask(void 0);
+        setActionLog(`Replaced task at group ${groupIndex}, task ${taskIndex} with "${newTask.name}"`);
     }, [
-        setNodes
+        stageId
     ]);
-    const groupModificationHandlers = useMemo(()=>createGroupModificationHandlers(), []);
-    const handleTaskGroupModification = useCallback((groupModificationType, groupIndex, taskIndex)=>{
-        const handler = getHandlerForModificationType(groupModificationHandlers, groupModificationType);
-        setNodes((prevNodes)=>prevNodes.map((node)=>{
-                if ('add-replace-stage' !== node.id) return node;
-                const prevTasks = node.data.stageDetails.tasks;
-                const updatedTasks = handler(prevTasks, groupIndex, taskIndex);
-                return {
-                    ...node,
-                    data: {
-                        ...node.data,
-                        stageDetails: {
-                            ...node.data.stageDetails,
-                            tasks: updatedTasks
-                        }
-                    }
-                };
-            }));
+    const handleGroupModification = useCallback((type, groupIndex, taskIndex)=>{
+        setActionLog(`Group modification: ${type} at group ${groupIndex}, task ${taskIndex}`);
+        setStageTaskIds((prev)=>{
+            const handler = getHandlerForModificationType(createGroupModificationHandlers(), type);
+            const currentTaskIds = (prev[stageId] || []).map((group)=>[
+                    ...group
+                ]);
+            const updatedTaskIds = handler(currentTaskIds, groupIndex, taskIndex);
+            return {
+                ...prev,
+                [stageId]: updatedTaskIds
+            };
+        });
     }, [
-        groupModificationHandlers,
-        setNodes
+        stageId
     ]);
-    const handleTaskClick = useCallback((taskId)=>{
-        setSelectedTaskId(taskId);
-    }, []);
-    const currentTasks = nodesState.find((n)=>'add-replace-stage' === n.id)?.data.stageDetails.tasks || [];
-    const taskMenuItems = useMemo(()=>currentTasks.flatMap((group, groupIndex)=>group.map((task, taskIndex)=>({
-                    title: task.label,
+    const currentTaskIds = stageTaskIds[stageId] || [];
+    const taskMenuItems = useMemo(()=>currentTaskIds.flatMap((group, groupIndex)=>group.map((taskId, taskIndex)=>{
+                const taskInfo = allTasks[taskId];
+                return {
+                    title: taskInfo?.label || taskId,
                     variant: 'item',
-                    startIcon: task.icon,
+                    startIcon: taskInfo?.icon,
                     onClick: ()=>{
-                        setSelectedTaskId(task.id);
+                        setSelectedTaskId(taskId);
                         setPendingReplaceTask({
                             groupIndex,
                             taskIndex
                         });
                         setMenuAnchorEl(null);
                     }
-                }))), [
-        currentTasks
+                };
+            })), [
+        currentTaskIds,
+        allTasks
     ]);
-    const nodesWithMetadata = useMemo(()=>nodesState.map((node)=>'add-replace-stage' === node.id ? {
-                ...node,
+    const replaceButtonLabel = useMemo(()=>{
+        if (pendingReplaceTask) {
+            const taskId = currentTaskIds[pendingReplaceTask.groupIndex]?.[pendingReplaceTask.taskIndex];
+            const taskInfo = taskId ? allTasks[taskId] : void 0;
+            if (taskInfo) return `Replacing: ${taskInfo.label}`;
+        }
+        return 'Replace Task';
+    }, [
+        pendingReplaceTask,
+        currentTaskIds,
+        allTasks
+    ]);
+    const stageNodes = useMemo(()=>[
+            {
+                id: stageId,
+                type: 'stage',
+                position: {
+                    x: 48,
+                    y: 96
+                },
+                style: {
+                    width: 304
+                },
                 data: {
-                    ...node.data,
-                    pendingReplaceTask: pendingReplaceTask,
+                    nodeType: 'case-management:Stage',
                     stageDetails: {
-                        ...node.data.stageDetails,
+                        label: 'Add, Replace & Group Tasks',
+                        taskIds: stageTaskIds[stageId] || [],
                         selectedTasks: selectedTaskId ? [
                             selectedTaskId
                         ] : void 0
                     },
-                    onAddTaskFromToolbox: handleAddTask,
+                    pendingReplaceTask,
+                    taskOptions: addReplaceTaskOptions,
+                    onAddTaskFromToolbox: handleAddTaskFromToolbox,
                     onReplaceTaskFromToolbox: handleReplaceTask,
-                    onTaskGroupModification: handleTaskGroupModification,
-                    onTaskClick: handleTaskClick
+                    onTaskClick: (taskId)=>{
+                        setSelectedTaskId(taskId);
+                        setActionLog(`Selected: ${taskId}`);
+                    }
                 }
-            } : node), [
-        nodesState,
-        pendingReplaceTask,
+            }
+        ], [
+        stageTaskIds,
         selectedTaskId,
-        handleAddTask,
-        handleReplaceTask,
-        handleTaskGroupModification,
-        handleTaskClick
+        pendingReplaceTask,
+        handleAddTaskFromToolbox,
+        handleReplaceTask
     ]);
-    const onConnect = useCallback((connection)=>setEdges((eds)=>addEdge(connection, eds)), [
-        setEdges
+    const taskNodes = useMemo(()=>createTaskNodes({
+            stageId,
+            taskIds: stageTaskIds[stageId] || [],
+            tasks: allTasks,
+            stageWidth: 304,
+            onTaskClick: (taskId)=>{
+                setSelectedTaskId(taskId);
+                setActionLog(`Selected: ${taskId}`);
+            },
+            onTaskSelect: setSelectedTaskId,
+            enableCrossStage: false,
+            onGroupModification: handleGroupModification,
+            onRequestReplaceTask: (groupIndex, taskIndex)=>{
+                setPendingReplaceTask({
+                    groupIndex,
+                    taskIndex
+                });
+            }
+        }), [
+        stageTaskIds,
+        allTasks,
+        handleGroupModification
     ]);
-    const replaceButtonLabel = useMemo(()=>{
-        if (pendingReplaceTask) {
-            const taskBeingReplaced = currentTasks[pendingReplaceTask.groupIndex]?.[pendingReplaceTask.taskIndex];
-            if (taskBeingReplaced) return `Replacing Task: ${taskBeingReplaced.label}`;
-        }
-        return 'Replace Task';
+    const allNodes = useMemo(()=>[
+            ...stageNodes,
+            ...taskNodes
+        ], [
+        stageNodes,
+        taskNodes
+    ]);
+    const allNodesRef = useRef(allNodes);
+    allNodesRef.current = allNodes;
+    const [nodes, setNodes] = useState(allNodes);
+    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+    useEffect(()=>{
+        setNodes((prev)=>mergeNodes(prev, allNodes));
     }, [
-        pendingReplaceTask,
-        currentTasks
+        allNodes
     ]);
+    const onNodesChange = useCallback((changes)=>{
+        setNodes((nds)=>{
+            const updated = applyNodeChanges(changes, nds);
+            return mergeNodes(updated, allNodesRef.current);
+        });
+    }, []);
+    const onConnect = useCallback((connection)=>setEdges((eds)=>addEdge({
+                ...connection,
+                type: 'stage'
+            }, eds)), [
+        setEdges
+    ]);
+    const nodeTypes = useMemo(()=>({
+            stage: StageNodeWrapper,
+            task: TaskNodeWrapper,
+            placeholder: (props)=>/*#__PURE__*/ jsx(PlaceholderTaskNode, {
+                    ...props
+                })
+        }), []);
+    const edgeTypes = useMemo(()=>({
+            stage: StageEdge
+        }), []);
     return /*#__PURE__*/ jsx("div", {
         style: {
             width: '100vw',
@@ -1536,7 +1962,7 @@ const AddAndReplaceTasksStory = ()=>{
         },
         children: /*#__PURE__*/ jsx(ReactFlowProvider, {
             children: /*#__PURE__*/ jsxs(BaseCanvas, {
-                nodes: nodesWithMetadata,
+                nodes: nodes,
                 edges: edges,
                 onNodesChange: onNodesChange,
                 onEdgesChange: onEdgesChange,
@@ -1562,9 +1988,7 @@ const AddAndReplaceTasksStory = ()=>{
                             /*#__PURE__*/ jsx(ApButton, {
                                 variant: "primary",
                                 label: replaceButtonLabel,
-                                onClick: (e)=>{
-                                    setMenuAnchorEl(e.currentTarget);
-                                }
+                                onClick: (e)=>setMenuAnchorEl(e.currentTarget)
                             }),
                             /*#__PURE__*/ jsx(ApMenu, {
                                 isOpen: Boolean(menuAnchorEl),
@@ -1580,6 +2004,18 @@ const AddAndReplaceTasksStory = ()=>{
                         children: /*#__PURE__*/ jsx(CanvasPositionControls, {
                             translations: DefaultCanvasTranslations
                         })
+                    }),
+                    actionLog && /*#__PURE__*/ jsx(Panel, {
+                        position: "top-left",
+                        children: /*#__PURE__*/ jsx("div", {
+                            style: {
+                                background: 'var(--uix-palette-surface-paper)',
+                                padding: '8px 16px',
+                                borderRadius: '4px',
+                                boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+                            },
+                            children: actionLog
+                        })
                     })
                 ]
             })
@@ -1588,110 +2024,172 @@ const AddAndReplaceTasksStory = ()=>{
 };
 const AddAndReplaceTasks = {
     name: 'Add, Replace, and Group Tasks',
-    parameters: {
-        useCustomRender: true
+    render: ()=>/*#__PURE__*/ jsx(AddAndReplaceTasksStory, {})
+};
+const loadingStoryStages = [
+    {
+        id: 'empty-stage',
+        label: 'Empty Stage (click +)',
+        position: {
+            x: 48,
+            y: 96
+        },
+        width: 304
+    },
+    {
+        id: 'tasks-stage',
+        label: 'With Tasks (click +)',
+        position: {
+            x: 400,
+            y: 96
+        },
+        width: 304
+    }
+];
+const loadingStoryInitialTaskIds = {
+    'empty-stage': [],
+    'tasks-stage': [
+        [
+            'task-1'
+        ],
+        [
+            'task-2'
+        ]
+    ]
+};
+const loadingStoryInitialTasks = {
+    'task-1': {
+        label: 'Existing Task',
+        taskType: 'uipath.case-management.rpa',
+        icon: /*#__PURE__*/ jsx(TaskIcon, {
+            type: TaskItemTypeValues.Automation,
+            size: "sm"
+        })
     },
-    render: ()=>/*#__PURE__*/ jsx(AddAndReplaceTasksStory, {}),
-    args: {}
+    'task-2': {
+        label: 'Another Task',
+        taskType: 'uipath.case-management.process',
+        icon: /*#__PURE__*/ jsx(TaskIcon, {
+            type: TaskItemTypeValues.AgenticProcess,
+            size: "sm"
+        })
+    }
 };
 const AddTaskLoadingStory = ()=>{
-    const StageNodeWrapper = useMemo(()=>function(props) {
-            return /*#__PURE__*/ jsx(StageNode, {
-                ...props,
-                ...props.data
-            });
-        }, []);
-    const nodeTypes = useMemo(()=>({
-            stage: StageNodeWrapper
-        }), [
-        StageNodeWrapper
-    ]);
-    const edgeTypes = useMemo(()=>({
-            stage: StageEdge
-        }), []);
-    const initialNodes = useMemo(()=>[
-            {
-                id: 'loading-stage-empty',
-                type: 'stage',
-                position: {
-                    x: 48,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Empty Stage (click +)',
-                        tasks: []
-                    },
-                    addTaskLoading: false
-                }
-            },
-            {
-                id: 'loading-stage-with-tasks',
+    const [loadingStages, setLoadingStages] = useState({});
+    const [stageTaskIds, setStageTaskIds] = useState(loadingStoryInitialTaskIds);
+    const [allTasks, setAllTasks] = useState(loadingStoryInitialTasks);
+    const handleTaskAdd = useCallback((stageIdToLoad)=>{
+        setLoadingStages((prev)=>({
+                ...prev,
+                [stageIdToLoad]: true
+            }));
+        setTimeout(()=>{
+            const newTaskId = `new-task-${Date.now()}`;
+            setAllTasks((prev)=>({
+                    ...prev,
+                    [newTaskId]: {
+                        label: 'New Task',
+                        taskType: 'uipath.case-management.agent',
+                        icon: /*#__PURE__*/ jsx(TaskIcon, {
+                            type: TaskItemTypeValues.Agent,
+                            size: "sm"
+                        })
+                    }
+                }));
+            setStageTaskIds((prev)=>({
+                    ...prev,
+                    [stageIdToLoad]: [
+                        ...prev[stageIdToLoad] || [],
+                        [
+                            newTaskId
+                        ]
+                    ]
+                }));
+            setLoadingStages((prev)=>({
+                    ...prev,
+                    [stageIdToLoad]: false
+                }));
+        }, 3000);
+    }, []);
+    const stageNodes = useMemo(()=>loadingStoryStages.map((stage)=>({
+                id: stage.id,
                 type: 'stage',
-                position: {
-                    x: 400,
-                    y: 96
+                position: stage.position,
+                style: {
+                    width: stage.width
                 },
-                width: 304,
                 data: {
+                    nodeType: 'case-management:Stage',
                     stageDetails: {
-                        label: 'With Tasks (click +)',
-                        tasks: [
-                            [
-                                {
-                                    id: 'task-1',
-                                    label: 'Existing Task',
-                                    icon: /*#__PURE__*/ jsx(VerificationIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: 'task-2',
-                                    label: 'Another Task',
-                                    icon: /*#__PURE__*/ jsx(DocumentIcon, {})
-                                }
-                            ]
-                        ]
+                        label: stage.label,
+                        taskIds: stageTaskIds[stage.id] || []
                     },
-                    addTaskLoading: false
+                    addTaskLoading: loadingStages[stage.id] || false,
+                    onTaskAdd: ()=>handleTaskAdd(stage.id)
                 }
-            }
-        ], []);
-    const [nodesState, setNodes, onNodesChange] = useNodesState(initialNodes);
-    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-    const setNodeLoading = useCallback((nodeId, loading)=>{
-        setNodes((nds)=>nds.map((node)=>node.id === nodeId ? {
-                    ...node,
-                    data: {
-                        ...node.data,
-                        addTaskLoading: loading
-                    }
-                } : node));
-    }, [
-        setNodes
+            })), [
+        stageTaskIds,
+        loadingStages,
+        handleTaskAdd
     ]);
-    const handleTaskAddForNode = useCallback((nodeId)=>{
-        setNodeLoading(nodeId, true);
-        setTimeout(()=>{
-            setNodeLoading(nodeId, false);
-        }, 3000);
+    const taskNodes = useMemo(()=>{
+        const allTaskNodes = [];
+        for (const stage of loadingStoryStages){
+            const ids = stageTaskIds[stage.id] || [];
+            const nodes = createTaskNodes({
+                stageId: stage.id,
+                taskIds: ids,
+                tasks: allTasks,
+                stageWidth: stage.width,
+                enableCrossStage: false,
+                onRequestReplaceTask: ()=>{}
+            });
+            allTaskNodes.push(...nodes);
+        }
+        return allTaskNodes;
     }, [
-        setNodeLoading
+        stageTaskIds,
+        allTasks
     ]);
-    const nodesWithHandler = useMemo(()=>nodesState.map((node)=>({
-                ...node,
-                data: {
-                    ...node.data,
-                    onTaskAdd: ()=>handleTaskAddForNode(node.id)
-                }
-            })), [
-        nodesState,
-        handleTaskAddForNode
+    const allNodes = useMemo(()=>[
+            ...stageNodes,
+            ...taskNodes
+        ], [
+        stageNodes,
+        taskNodes
     ]);
-    const onConnect = useCallback((connection)=>setEdges((eds)=>addEdge(connection, eds)), [
+    const allNodesRef = useRef(allNodes);
+    allNodesRef.current = allNodes;
+    const [nodes, setNodes] = useState(allNodes);
+    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+    useEffect(()=>{
+        setNodes((prev)=>mergeNodes(prev, allNodes));
+    }, [
+        allNodes
+    ]);
+    const onNodesChange = useCallback((changes)=>{
+        setNodes((nds)=>{
+            const updated = applyNodeChanges(changes, nds);
+            return mergeNodes(updated, allNodesRef.current);
+        });
+    }, []);
+    const onConnect = useCallback((connection)=>setEdges((eds)=>addEdge({
+                ...connection,
+                type: 'stage'
+            }, eds)), [
         setEdges
     ]);
+    const nodeTypes = useMemo(()=>({
+            stage: StageNodeWrapper,
+            task: TaskNodeWrapper,
+            placeholder: (props)=>/*#__PURE__*/ jsx(PlaceholderTaskNode, {
+                    ...props
+                })
+        }), []);
+    const edgeTypes = useMemo(()=>({
+            stage: StageEdge
+        }), []);
     return /*#__PURE__*/ jsx("div", {
         style: {
             width: '100vw',
@@ -1699,7 +2197,7 @@ const AddTaskLoadingStory = ()=>{
         },
         children: /*#__PURE__*/ jsx(ReactFlowProvider, {
             children: /*#__PURE__*/ jsx(BaseCanvas, {
-                nodes: nodesWithHandler,
+                nodes: nodes,
                 edges: edges,
                 onNodesChange: onNodesChange,
                 onEdgesChange: onEdgesChange,
@@ -1730,10 +2228,6 @@ const AddTaskLoadingStory = ()=>{
 };
 const AddTaskLoading = {
     name: 'Add Task Loading State',
-    parameters: {
-        useCustomRender: true
-    },
-    render: ()=>/*#__PURE__*/ jsx(AddTaskLoadingStory, {}),
-    args: {}
+    render: ()=>/*#__PURE__*/ jsx(AddTaskLoadingStory, {})
 };
-export { AddAndReplaceTasks, AddTaskLoading, Default, DraggableTaskReordering, ExecutionStatus, InteractiveTaskManagement, LoanProcessingWorkflow, WithTaskIcons, StageNode_stories as default };
+export { AddAndReplaceTasks, AddTaskLoading, Default, ExecutionStatus, InteractiveTaskManagement, LoanProcessingWorkflow, WithTaskIcons, WithTaskMenu, StageNode_stories as default };