@uipath/apollo-react 4.10.0 → 4.12.0

package/dist/canvas/components/StageNode/StageNode.cjs

@@ -27,104 +27,33 @@ __webpack_require__.d(__webpack_exports__, {
     StageNode: ()=>StageNode
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const core_namespaceObject = require("@dnd-kit/core");
-const sortable_namespaceObject = require("@dnd-kit/sortable");
-const apollo_core_namespaceObject = require("@uipath/apollo-core");
-const index_cjs_namespaceObject = require("../../layouts/index.cjs");
-const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
-const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
-const external_icons_index_cjs_namespaceObject = require("../../icons/index.cjs");
-const GroupModificationUtils_cjs_namespaceObject = require("../../utils/GroupModificationUtils.cjs");
-const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
-const ConnectedHandlesContext_cjs_namespaceObject = require("../BaseCanvas/ConnectedHandlesContext.cjs");
-const useButtonHandles_cjs_namespaceObject = require("../ButtonHandle/useButtonHandles.cjs");
-const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
-const external_ExecutionStatusIcon_index_cjs_namespaceObject = require("../ExecutionStatusIcon/index.cjs");
-const external_FloatingCanvasPanel_index_cjs_namespaceObject = require("../FloatingCanvasPanel/index.cjs");
+const index_cjs_namespaceObject = require("../FloatingCanvasPanel/index.cjs");
 const external_NodeContextMenu_index_cjs_namespaceObject = require("../NodeContextMenu/index.cjs");
 const hooks_index_cjs_namespaceObject = require("../NodePropertiesPanel/hooks/index.cjs");
 const external_Toolbox_index_cjs_namespaceObject = require("../Toolbox/index.cjs");
-const external_AdhocTask_cjs_namespaceObject = require("./AdhocTask.cjs");
-const external_DraggableTask_cjs_namespaceObject = require("./DraggableTask.cjs");
 const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.styles.cjs");
-const external_StageNode_types_cjs_namespaceObject = require("./StageNode.types.cjs");
-const external_StageNode_utils_cjs_namespaceObject = require("./StageNode.utils.cjs");
-const external_StageNodeTaskUtilities_cjs_namespaceObject = require("./StageNodeTaskUtilities.cjs");
-const external_StageTaskDragOverlay_cjs_namespaceObject = require("./StageTaskDragOverlay.cjs");
-const CHIP_ICONS = {
-    [external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Entry]: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_icons_index_cjs_namespaceObject.EntryConditionIcon, {
-        w: apollo_core_namespaceObject.Icon.IconXs,
-        h: apollo_core_namespaceObject.Icon.IconXs
-    }),
-    [external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Exit]: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_icons_index_cjs_namespaceObject.ExitConditionIcon, {
-        w: apollo_core_namespaceObject.Icon.IconXs,
-        h: apollo_core_namespaceObject.Icon.IconXs
-    }),
-    [external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.ReturnToOrigin]: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_icons_index_cjs_namespaceObject.ReturnToOriginIcon, {
-        w: apollo_core_namespaceObject.Icon.IconXs,
-        h: apollo_core_namespaceObject.Icon.IconXs
-    }),
-    [external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.CaseExit]: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
-        icon: "x",
-        size: 16
-    }),
-    [external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.CaseCompletion]: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
-        icon: "check",
-        size: 16
-    })
-};
+const external_StageNodeAllTaskGroups_cjs_namespaceObject = require("./StageNodeAllTaskGroups.cjs");
+const external_StageNodeHandles_cjs_namespaceObject = require("./StageNodeHandles.cjs");
+const external_StageNodeHeader_cjs_namespaceObject = require("./StageNodeHeader.cjs");
 const StageNodeInner = (props)=>{
-    const { dragging, selected, id, width, execution, stageDetails, addTaskLabel = 'Add task', replaceTaskLabel = 'Replace task', taskOptions = [], menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onReplaceTaskFromToolbox, onTaskPlay, hideParallelOptions, loadingTaskIds } = props;
+    const { dragging, selected, id, width, execution, stageDetails, addTaskLabel = 'Add task', replaceTaskLabel = 'Replace task', taskOptions = [], menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onReplaceTaskFromToolbox } = props;
     const taskWidth = width ? width - external_StageNode_styles_cjs_namespaceObject.STAGE_CONTENT_INSET : void 0;
     const allTasks = (0, external_react_namespaceObject.useMemo)(()=>stageDetails?.tasks || [], [
         stageDetails?.tasks
     ]);
-    const tasks = (0, external_react_namespaceObject.useMemo)(()=>allTasks.filter((group)=>group.some((t)=>!t.isAdhoc)), [
-        allTasks
-    ]);
-    const adhocGroups = (0, external_react_namespaceObject.useMemo)(()=>allTasks.filter((group)=>group.every((t)=>t.isAdhoc)), [
-        allTasks
-    ]);
-    const adhocTasks = (0, external_react_namespaceObject.useMemo)(()=>allTasks.flatMap((group, groupIndex)=>group.map((task, taskIndex)=>({
-                    task,
-                    groupIndex,
-                    taskIndex
-                })).filter(({ task })=>task.isAdhoc)), [
-        allTasks
-    ]);
-    const flatTasks = (0, external_react_namespaceObject.useMemo)(()=>tasks.flat(), [
-        tasks
-    ]);
-    const taskIds = (0, external_react_namespaceObject.useMemo)(()=>flatTasks.map((task)=>task.id), [
-        flatTasks
-    ]);
     const isException = stageDetails?.isException;
     const isReadOnly = !!stageDetails?.isReadOnly;
-    const icon = stageDetails?.icon;
     const selectedTaskId = stageDetails?.selectedTaskId;
-    const defaultContent = stageDetails?.defaultContent || (isReadOnly ? 'No tasks' : 'Add first task');
     const status = execution?.stageStatus?.status;
-    const statusLabel = execution?.stageStatus?.label;
-    const stageDuration = execution?.stageStatus?.duration;
-    const isStageTitleEditable = !!onStageTitleChange && !isReadOnly;
     const [isHovered, setIsHovered] = (0, external_react_namespaceObject.useState)(false);
-    const [label, setLabel] = (0, external_react_namespaceObject.useState)(props.stageDetails.label);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        setLabel(props.stageDetails.label);
-    }, [
-        props.stageDetails.label
-    ]);
-    const [isStageTitleEditing, setIsStageTitleEditing] = (0, external_react_namespaceObject.useState)(false);
-    const stageTitleRef = (0, external_react_namespaceObject.useRef)(null);
+    const handleMouseEnter = (0, external_react_namespaceObject.useCallback)(()=>setIsHovered(true), []);
+    const handleMouseLeave = (0, external_react_namespaceObject.useCallback)(()=>setIsHovered(false), []);
     const taskStateReference = (0, external_react_namespaceObject.useRef)({
         isParallel: false,
         groupIndex: -1,
         taskIndex: -1
     });
-    const isConnecting = (0, react_cjs_namespaceObject.useStore)((state)=>!!state.connectionClickStartHandle);
-    const storeApi = (0, react_cjs_namespaceObject.useStoreApi)();
-    const connectedHandleIds = (0, ConnectedHandlesContext_cjs_namespaceObject.useConnectedHandles)(id);
     const [isAddingTask, setIsAddingTask] = (0, external_react_namespaceObject.useState)(false);
     const [isReplacingTask, setIsReplacingTask] = (0, external_react_namespaceObject.useState)(false);
     (0, external_react_namespaceObject.useEffect)(()=>{
@@ -148,30 +77,6 @@ const StageNodeInner = (props)=>{
         selectedTaskId,
         allTasks
     ]);
-    const [activeDragId, setActiveDragId] = (0, external_react_namespaceObject.useState)(null);
-    const [offsetLeft, setOffsetLeft] = (0, external_react_namespaceObject.useState)(0);
-    const [overId, setOverId] = (0, external_react_namespaceObject.useState)(null);
-    const activeTask = (0, external_react_namespaceObject.useMemo)(()=>flatTasks.find((t)=>t.id === activeDragId), [
-        flatTasks,
-        activeDragId
-    ]);
-    const isActiveTaskParallel = (0, external_react_namespaceObject.useMemo)(()=>{
-        if (!activeDragId) return false;
-        const group = tasks.find((g)=>g.some((t)=>t.id === activeDragId));
-        return group ? group.length > 1 : false;
-    }, [
-        tasks,
-        activeDragId
-    ]);
-    const projected = (0, external_react_namespaceObject.useMemo)(()=>{
-        if (!activeDragId || !overId) return null;
-        return (0, external_StageNode_utils_cjs_namespaceObject.getProjection)(tasks, activeDragId, overId, offsetLeft);
-    }, [
-        tasks,
-        activeDragId,
-        overId,
-        offsetLeft
-    ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (false === selected) {
             setIsAddingTask(false);
@@ -180,158 +85,18 @@ const StageNodeInner = (props)=>{
     }, [
         selected
     ]);
-    const hasConnections = connectedHandleIds.size > 0;
-    const shouldShowHandles = (0, external_react_namespaceObject.useMemo)(()=>!isReadOnly && (selected || isHovered || isConnecting || hasConnections), [
-        hasConnections,
-        isConnecting,
-        selected,
-        isHovered,
-        isReadOnly
-    ]);
-    const handleMouseEnter = (0, external_react_namespaceObject.useCallback)(()=>setIsHovered(true), []);
-    const handleMouseLeave = (0, external_react_namespaceObject.useCallback)(()=>setIsHovered(false), []);
     const shouldShowMenu = (0, external_react_namespaceObject.useMemo)(()=>menuItems && menuItems.length > 0 && (selected || isHovered) && !isReadOnly, [
         menuItems,
         selected,
         isHovered,
         isReadOnly
     ]);
-    const handleStageTitleChange = (0, external_react_namespaceObject.useCallback)((e)=>{
-        setIsStageTitleEditing(true);
-        setLabel(e.target.value);
-    }, []);
-    const handleStageTitleClickToSave = (0, external_react_namespaceObject.useCallback)((e)=>{
-        if (isStageTitleEditing && !stageTitleRef.current?.contains(e.target)) {
-            setIsStageTitleEditing(false);
-            if (onStageTitleChange) {
-                if ('' === label.trim()) setLabel('Untitled Stage');
-                onStageTitleChange(label);
-            }
-        }
-    }, [
-        isStageTitleEditing,
-        onStageTitleChange,
-        label
-    ]);
-    const handleStageTitleBlurToSave = (0, external_react_namespaceObject.useCallback)(()=>{
-        if (isStageTitleEditing) {
-            setIsStageTitleEditing(false);
-            if (onStageTitleChange) {
-                if ('' === label.trim()) setLabel('Untitled Stage');
-                onStageTitleChange(label);
-            }
-        }
-    }, [
-        isStageTitleEditing,
-        onStageTitleChange,
-        label
-    ]);
-    const handleStageTitleKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
-        if ('Enter' === e.key) {
-            setIsStageTitleEditing(false);
-            if (onStageTitleChange) onStageTitleChange(label);
-        }
-        if ('Escape' !== e.key) e.stopPropagation();
-    }, [
-        onStageTitleChange,
-        label
-    ]);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        if (isStageTitleEditing) document.addEventListener('click', handleStageTitleClickToSave);
-        return ()=>{
-            document.removeEventListener('click', handleStageTitleClickToSave);
-        };
-    }, [
-        handleStageTitleClickToSave,
-        isStageTitleEditing
-    ]);
-    const hasContextMenu = !!(onReplaceTaskFromToolbox || onTaskGroupModification);
-    const handleTaskRegroup = (0, external_react_namespaceObject.useCallback)((groupModificationType, groupIndex, taskIndex)=>{
-        if (onTaskReorder && (groupModificationType === GroupModificationUtils_cjs_namespaceObject.GroupModificationType.TASK_GROUP_UP || groupModificationType === GroupModificationUtils_cjs_namespaceObject.GroupModificationType.TASK_GROUP_DOWN)) {
-            const mover = groupModificationType === GroupModificationUtils_cjs_namespaceObject.GroupModificationType.TASK_GROUP_UP ? GroupModificationUtils_cjs_namespaceObject.moveGroupUp : GroupModificationUtils_cjs_namespaceObject.moveGroupDown;
-            const reordered = mover(tasks, groupIndex, taskIndex);
-            onTaskReorder([
-                ...reordered,
-                ...adhocGroups
-            ]);
-            return;
-        }
-        onTaskGroupModification?.(groupModificationType, groupIndex, taskIndex);
-    }, [
-        onTaskReorder,
-        onTaskGroupModification,
-        tasks,
-        adhocGroups
-    ]);
-    const buildContextMenuItems = (0, external_react_namespaceObject.useCallback)((groupIndex, taskIndex)=>{
-        const taskGroup = tasks[groupIndex] ?? [];
-        const isParallel = taskGroup.length > 1;
-        const items = [];
-        if (onReplaceTaskFromToolbox) {
-            items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('replace-task', 'Replace task', ()=>{
-                taskStateReference.current = {
-                    isParallel,
-                    groupIndex,
-                    taskIndex
-                };
-                const taskId = taskGroup[taskIndex]?.id;
-                if (taskId) onTaskClick?.(taskId);
-                setIsReplacingTask(true);
-            }));
-            items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getDivider)());
-        }
-        if (onTaskGroupModification) {
-            const reGroupOptions = (0, external_StageNodeTaskUtilities_cjs_namespaceObject.getContextMenuItems)(isParallel, groupIndex, tasks.length, taskIndex, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1, handleTaskRegroup, hideParallelOptions);
-            return [
-                ...items,
-                ...reGroupOptions
-            ];
-        }
-        return items;
-    }, [
-        onReplaceTaskFromToolbox,
-        onTaskClick,
-        onTaskGroupModification,
-        tasks,
-        hideParallelOptions,
-        handleTaskRegroup
-    ]);
-    const getAdhocContextMenuItems = (0, external_react_namespaceObject.useCallback)((groupIndex, taskIndex, taskId)=>{
-        const items = [];
-        if (onReplaceTaskFromToolbox) items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('replace-task', 'Replace task', ()=>{
-            taskStateReference.current = {
-                isParallel: false,
-                groupIndex,
-                taskIndex
-            };
-            onTaskClick?.(taskId);
-            setIsReplacingTask(true);
-        }));
-        if (onTaskGroupModification) {
-            if (items.length > 0) items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getDivider)());
-            items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('remove-task', 'Delete task', ()=>onTaskGroupModification(GroupModificationUtils_cjs_namespaceObject.GroupModificationType.REMOVE_TASK, groupIndex, taskIndex)));
-        }
-        return items;
-    }, [
-        onReplaceTaskFromToolbox,
-        onTaskClick,
-        onTaskGroupModification
-    ]);
     const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useSetNodeSelection)();
     const handleStageClick = (0, external_react_namespaceObject.useCallback)(()=>{
         onStageClick?.();
     }, [
         onStageClick
     ]);
-    const handleTaskClick = (0, external_react_namespaceObject.useCallback)((e, taskElementId)=>{
-        e.stopPropagation();
-        onTaskClick?.(taskElementId);
-        setSelectedNodeId(id);
-    }, [
-        onTaskClick,
-        setSelectedNodeId,
-        id
-    ]);
     const handleTaskAddClick = (0, external_react_namespaceObject.useCallback)((event)=>{
         event.stopPropagation();
         if (onTaskAdd) onTaskAdd();
@@ -358,124 +123,6 @@ const StageNodeInner = (props)=>{
     }, [
         onReplaceTaskFromToolbox
     ]);
-    const handleConfigurations = (0, external_react_namespaceObject.useMemo)(()=>isException ? [] : [
-            {
-                position: react_cjs_namespaceObject.Position.Left,
-                handles: [
-                    {
-                        id: `${id}____target____left`,
-                        type: 'target',
-                        handleType: 'input'
-                    }
-                ],
-                visible: selected || isHovered || isConnecting,
-                customPositionAndOffsets: {
-                    top: 0,
-                    height: 64
-                }
-            },
-            {
-                position: react_cjs_namespaceObject.Position.Right,
-                handles: [
-                    {
-                        id: `${id}____source____right`,
-                        type: 'source',
-                        handleType: 'output'
-                    }
-                ],
-                visible: selected || isHovered || isConnecting,
-                customPositionAndOffsets: {
-                    top: 0,
-                    height: 64
-                }
-            },
-            {
-                position: react_cjs_namespaceObject.Position.Bottom,
-                handles: [
-                    {
-                        id: `${id}____target____bottom`,
-                        type: 'target',
-                        handleType: 'input'
-                    }
-                ],
-                visible: selected || isHovered || isConnecting
-            },
-            {
-                position: react_cjs_namespaceObject.Position.Bottom,
-                handles: [
-                    {
-                        id: `${id}____source____bottom`,
-                        type: 'source',
-                        handleType: 'output'
-                    }
-                ],
-                visible: selected || isHovered || isConnecting
-            }
-        ], [
-        isException,
-        id,
-        selected,
-        isHovered,
-        isConnecting
-    ]);
-    const handleElements = (0, useButtonHandles_cjs_namespaceObject.useButtonHandles)({
-        handleConfigurations,
-        shouldShowHandles,
-        nodeId: id,
-        selected
-    });
-    const sensors = (0, core_namespaceObject.useSensors)((0, core_namespaceObject.useSensor)(core_namespaceObject.PointerSensor, {
-        activationConstraint: {
-            distance: 3
-        }
-    }), (0, core_namespaceObject.useSensor)(core_namespaceObject.KeyboardSensor, {
-        coordinateGetter: sortable_namespaceObject.sortableKeyboardCoordinates
-    }));
-    const resetState = (0, external_react_namespaceObject.useCallback)(()=>{
-        setActiveDragId(null);
-        setOffsetLeft(0);
-        setOverId(null);
-    }, []);
-    const handleDragStart = (0, external_react_namespaceObject.useCallback)((event)=>{
-        setActiveDragId(event.active.id);
-    }, []);
-    const handleDragMove = (0, external_react_namespaceObject.useCallback)((event)=>{
-        setOffsetLeft(event.delta.x / storeApi.getState().transform[2]);
-    }, [
-        storeApi
-    ]);
-    const handleDragOver = (0, external_react_namespaceObject.useCallback)((event)=>{
-        setOverId(event.over?.id ?? null);
-    }, []);
-    const handleDragEnd = (0, external_react_namespaceObject.useCallback)((event)=>{
-        const { active, over } = event;
-        const currentOffsetLeft = offsetLeft;
-        resetState();
-        if (!over || !onTaskReorder) return;
-        const projection = (0, external_StageNode_utils_cjs_namespaceObject.getProjection)(tasks, active.id, over.id, currentOffsetLeft);
-        if (!projection) return;
-        if (active.id === over.id) {
-            const flattened = (0, external_StageNode_utils_cjs_namespaceObject.flattenTasks)(tasks);
-            const activeTask = flattened.find((t)=>t.id === active.id);
-            if (activeTask && activeTask.depth === projection.depth) return;
-        }
-        const newTasks = (0, external_StageNode_utils_cjs_namespaceObject.reorderTasks)(tasks, active.id, over.id, projection.depth);
-        onTaskReorder([
-            ...newTasks,
-            ...adhocGroups
-        ]);
-    }, [
-        tasks,
-        onTaskReorder,
-        offsetLeft,
-        resetState,
-        adhocGroups
-    ]);
-    const handleDragCancel = (0, external_react_namespaceObject.useCallback)(()=>{
-        resetState();
-    }, [
-        resetState
-    ]);
     const taskWidthStyle = (0, external_react_namespaceObject.useMemo)(()=>taskWidth ? {
             '--stage-task-width': `${taskWidth}px`,
             '--stage-task-width-parallel': `${taskWidth - external_StageNode_styles_cjs_namespaceObject.INDENTATION_WIDTH}px`
@@ -497,230 +144,25 @@ const StageNodeInner = (props)=>{
                 width: width,
                 style: taskWidthStyle,
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageHeader, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNodeHeader_cjs_namespaceObject.StageNodeHeader, {
+                        props: props,
+                        isReadOnly: isReadOnly,
                         isException: isException,
-                        "data-testid": `stage-header-${id}`,
-                        children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
-                                gap: apollo_core_namespaceObject.Spacing.SpacingMicro,
-                                align: "center",
-                                flex: 1,
-                                minW: 0,
-                                children: [
-                                    icon,
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
-                                        py: 2,
-                                        flex: 1,
-                                        minW: 0,
-                                        children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                className: (0, apollo_wind_namespaceObject.cn)('text-sm', !isStageTitleEditing && 'font-bold'),
-                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
-                                                    content: label,
-                                                    placement: "top",
-                                                    delay: true,
-                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTitleContainer, {
-                                                        isEditing: isStageTitleEditing,
-                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTitleInput, {
-                                                            name: "Stage Title",
-                                                            isStageTitleEditable: isStageTitleEditable,
-                                                            value: label,
-                                                            ref: stageTitleRef,
-                                                            isEditing: isStageTitleEditing,
-                                                            ...onStageTitleChange && {
-                                                                onFocus: ()=>setIsStageTitleEditing(true),
-                                                                onInput: handleStageTitleChange,
-                                                                onKeyDown: handleStageTitleKeyDown,
-                                                                onBlur: handleStageTitleBlurToSave
-                                                            },
-                                                            readOnly: !isStageTitleEditable
-                                                        })
-                                                    })
-                                                })
-                                            }),
-                                            stageDuration && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                className: "text-xs text-foreground-muted",
-                                                children: stageDuration
-                                            }),
-                                            stageDetails.headerChips && stageDetails.headerChips.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageHeaderChipsRow, {
-                                                children: stageDetails.headerChips.map((chip)=>{
-                                                    const button = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageChip, {
-                                                        type: "button",
-                                                        "aria-label": 'string' == typeof chip.tooltip ? chip.tooltip : chip.type,
-                                                        onClick: (e)=>{
-                                                            e.stopPropagation();
-                                                            chip.onClick?.();
-                                                        },
-                                                        children: [
-                                                            CHIP_ICONS[chip.type],
-                                                            void 0 !== chip.count && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                                className: "text-xs",
-                                                                children: chip.count
-                                                            })
-                                                        ]
-                                                    }, chip.type);
-                                                    if (chip.tooltip) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
-                                                        placement: "bottom",
-                                                        content: chip.tooltip,
-                                                        children: button
-                                                    }, chip.type);
-                                                    return button;
-                                                })
-                                            })
-                                        ]
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
-                                gap: apollo_core_namespaceObject.Spacing.SpacingMicro,
-                                align: "start",
-                                py: apollo_core_namespaceObject.Padding.PadS,
-                                children: [
-                                    status && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
-                                        content: statusLabel,
-                                        placement: "top",
-                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
-                                            variant: "ghost",
-                                            size: "icon",
-                                            className: "h-6 w-6",
-                                            "aria-label": statusLabel,
-                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ExecutionStatusIcon_index_cjs_namespaceObject.ExecutionStatusIcon, {
-                                                status: status,
-                                                size: 20
-                                            })
-                                        })
-                                    }),
-                                    (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
-                                        content: addTaskLabel,
-                                        placement: "top",
-                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
-                                            variant: "ghost",
-                                            size: "icon",
-                                            className: "h-6 w-6",
-                                            onClick: handleTaskAddClick,
-                                            "aria-label": addTaskLabel,
-                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
-                                                icon: "plus",
-                                                size: 20
-                                            })
-                                        })
-                                    })
-                                ]
-                            })
-                        ]
+                        status: status,
+                        handleTaskAddClick: handleTaskAddClick
                     }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageContent, {
-                        children: 0 === tasks.length && 0 === adhocTasks.length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Column, {
-                            py: 2,
-                            children: (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
-                                variant: "link",
-                                onClick: handleTaskAddClick,
-                                style: {
-                                    maxWidth: 'fit-content'
-                                },
-                                children: defaultContent
-                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                className: "text-xs text-foreground-muted",
-                                children: defaultContent
-                            })
-                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
-                            children: [
-                                tasks.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.DndContext, {
-                                    collisionDetection: core_namespaceObject.closestCenter,
-                                    sensors: sensors,
-                                    onDragStart: handleDragStart,
-                                    onDragMove: handleDragMove,
-                                    onDragOver: handleDragOver,
-                                    onDragEnd: handleDragEnd,
-                                    onDragCancel: handleDragCancel,
-                                    children: [
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(sortable_namespaceObject.SortableContext, {
-                                            items: taskIds,
-                                            strategy: sortable_namespaceObject.verticalListSortingStrategy,
-                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTaskList, {
-                                                className: "nodrag nopan",
-                                                children: tasks.map((taskGroup, groupIndex)=>{
-                                                    const isParallel = taskGroup.length > 1;
-                                                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
-                                                        gap: apollo_core_namespaceObject.Spacing.SpacingS,
-                                                        children: [
-                                                            isParallel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageParallelBracket, {}),
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageTaskGroup, {
-                                                                isParallel: isParallel,
-                                                                children: [
-                                                                    isParallel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageParallelLabel, {
-                                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                                            className: "text-xs",
-                                                                            children: "Parallel"
-                                                                        })
-                                                                    }),
-                                                                    taskGroup.map((task, taskIndex)=>{
-                                                                        const taskExecution = execution?.taskStatus?.[task.id];
-                                                                        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DraggableTask_cjs_namespaceObject.DraggableTask, {
-                                                                            task: task,
-                                                                            taskExecution: taskExecution,
-                                                                            isSelected: selectedTaskId === task.id,
-                                                                            isParallel: isParallel,
-                                                                            groupIndex: groupIndex,
-                                                                            taskIndex: taskIndex,
-                                                                            onTaskClick: handleTaskClick,
-                                                                            projectedDepth: task.id === activeDragId && projected ? projected.depth : void 0,
-                                                                            isDragDisabled: !onTaskReorder || isReadOnly,
-                                                                            isTaskLoading: loadingTaskIds?.has(task.id),
-                                                                            ...hasContextMenu && !isReadOnly && {
-                                                                                getContextMenuItems: buildContextMenuItems
-                                                                            }
-                                                                        }, task.id);
-                                                                    })
-                                                                ]
-                                                            })
-                                                        ]
-                                                    }, `group-${groupIndex}`);
-                                                })
-                                            })
-                                        }),
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageTaskDragOverlay_cjs_namespaceObject.StageTaskDragOverlay, {
-                                            activeTask: activeTask,
-                                            isActiveTaskParallel: isActiveTaskParallel,
-                                            taskWidthStyle: taskWidthStyle
-                                        })
-                                    ]
-                                }),
-                                adhocTasks.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageAdhocSection, {
-                                    style: {
-                                        marginTop: tasks.length > 0 ? apollo_core_namespaceObject.Spacing.SpacingS : '0px'
-                                    },
-                                    children: [
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageAdhocHeaderSection, {
-                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                className: "text-xs font-bold text-foreground-muted",
-                                                children: "Ad hoc tasks"
-                                            })
-                                        }),
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTaskList, {
-                                            children: adhocTasks.map(({ task, groupIndex, taskIndex })=>{
-                                                const taskExecution = execution?.taskStatus?.[task.id];
-                                                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_AdhocTask_cjs_namespaceObject.AdhocTaskItem, {
-                                                    task: task,
-                                                    taskExecution: taskExecution,
-                                                    isSelected: selectedTaskId === task.id,
-                                                    onTaskClick: handleTaskClick,
-                                                    onTaskPlay: onTaskPlay,
-                                                    isTaskLoading: loadingTaskIds?.has(task.id),
-                                                    ...(onTaskGroupModification || onReplaceTaskFromToolbox) && !isReadOnly && {
-                                                        getContextMenuItems: ()=>getAdhocContextMenuItems(groupIndex, taskIndex, task.id)
-                                                    }
-                                                }, task.id);
-                                            })
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNodeAllTaskGroups_cjs_namespaceObject.StageNodeAllTaskGroups, {
+                        props: props,
+                        isReadOnly: isReadOnly,
+                        taskWidthStyle: taskWidthStyle,
+                        taskStateReference: taskStateReference,
+                        setSelectedNodeId: setSelectedNodeId,
+                        handleTaskAddClick: handleTaskAddClick,
+                        setIsReplacingTask: setIsReplacingTask
                     })
                 ]
             }),
-            onAddTaskFromToolbox && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FloatingCanvasPanel_index_cjs_namespaceObject.FloatingCanvasPanel, {
+            onAddTaskFromToolbox && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.FloatingCanvasPanel, {
                 open: isAddingTask,
                 nodeId: id,
                 offset: 15,
@@ -732,7 +174,7 @@ const StageNodeInner = (props)=>{
                     onSearch: onTaskToolboxSearch
                 })
             }),
-            onReplaceTaskFromToolbox && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FloatingCanvasPanel_index_cjs_namespaceObject.FloatingCanvasPanel, {
+            onReplaceTaskFromToolbox && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.FloatingCanvasPanel, {
                 open: isReplacingTask,
                 nodeId: id,
                 offset: 15,
@@ -748,7 +190,13 @@ const StageNodeInner = (props)=>{
                 menuItems: menuItems,
                 isVisible: shouldShowMenu
             }),
-            handleElements
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNodeHandles_cjs_namespaceObject.StageNodeHandles, {
+                id: id,
+                isReadOnly: isReadOnly,
+                selected: selected,
+                isHovered: isHovered,
+                isException: isException
+            })
         ]
     });
 };