@uipath/apollo-react 4.13.0 → 4.13.1-pr556.57ef73e

package/dist/canvas/components/LoopNode/LoopNode.types.d.ts

@@ -0,0 +1,11 @@
+import type { Node, NodeProps } from '../../xyflow/react.ts';
+import type { BaseNodeData } from '../BaseNode';
+export type LoopNodeData = BaseNodeData;
+export interface LoopNodeProps extends NodeProps<Node<LoopNodeData>> {
+    onAddFirstChild?: () => void;
+    onResize?: (size: {
+        width: number;
+        height: number;
+    }) => void;
+}
+//# sourceMappingURL=LoopNode.types.d.ts.map

package/dist/canvas/components/LoopNode/LoopNode.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoopNode.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNode.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAChF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC;AAExC,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAClE,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC9D"}

package/dist/canvas/components/LoopNode/LoopNodePreview.cjs

@@ -0,0 +1,61 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    showCenteredContainerPreview: ()=>showCenteredContainerPreview
+});
+const createPreviewGraph_cjs_namespaceObject = require("../../utils/createPreviewGraph.cjs");
+const NodeUtils_cjs_namespaceObject = require("../../utils/NodeUtils.cjs");
+const external_LoopNode_helpers_cjs_namespaceObject = require("./LoopNode.helpers.cjs");
+function showCenteredContainerPreview({ containerId, reactFlowInstance, previewHandles, trailingEdgeId }) {
+    const containerNode = reactFlowInstance.getNode(containerId);
+    if (!containerNode) return;
+    const allNodes = reactFlowInstance.getNodes();
+    const containerAbsolutePosition = (0, NodeUtils_cjs_namespaceObject.getAbsolutePosition)(containerNode, allNodes);
+    const relativeCenter = (0, external_LoopNode_helpers_cjs_namespaceObject.getLoopRelativeBodyCenter)(containerNode);
+    const previewCenter = {
+        x: (0, NodeUtils_cjs_namespaceObject.snapToGrid)(containerAbsolutePosition.x + relativeCenter.x),
+        y: (0, NodeUtils_cjs_namespaceObject.snapToGrid)(containerAbsolutePosition.y + relativeCenter.y)
+    };
+    (0, createPreviewGraph_cjs_namespaceObject.showPreviewGraph)({
+        sourceNodeId: containerId,
+        sourceHandleId: previewHandles.sourceHandleId,
+        reactFlowInstance,
+        position: previewCenter,
+        positionMode: 'center',
+        handlePosition: previewHandles.sourceHandlePosition,
+        targetNodeId: containerId,
+        targetHandleId: previewHandles.targetHandleId,
+        containerId,
+        trailingEdgeId
+    });
+}
+exports.showCenteredContainerPreview = __webpack_exports__.showCenteredContainerPreview;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "showCenteredContainerPreview"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/LoopNode/LoopNodePreview.d.ts

@@ -0,0 +1,9 @@
+import type { ReactFlowInstance } from '../../xyflow/react.ts';
+import { type LoopPreviewConnectionHandles } from './LoopNode.helpers';
+export declare function showCenteredContainerPreview({ containerId, reactFlowInstance, previewHandles, trailingEdgeId, }: {
+    containerId: string;
+    reactFlowInstance: ReactFlowInstance;
+    previewHandles: LoopPreviewConnectionHandles;
+    trailingEdgeId?: string;
+}): void;
+//# sourceMappingURL=LoopNodePreview.d.ts.map

package/dist/canvas/components/LoopNode/LoopNodePreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoopNodePreview.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNodePreview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAGlF,OAAO,EAA6B,KAAK,4BAA4B,EAAE,MAAM,oBAAoB,CAAC;AAElG,wBAAgB,4BAA4B,CAAC,EAC3C,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,cAAc,GACf,EAAE;IACD,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,cAAc,EAAE,4BAA4B,CAAC;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,QAwBA"}

package/dist/canvas/components/LoopNode/LoopNodePreview.js

@@ -0,0 +1,27 @@
+import { showPreviewGraph } from "../../utils/createPreviewGraph.js";
+import { getAbsolutePosition, snapToGrid } from "../../utils/NodeUtils.js";
+import { getLoopRelativeBodyCenter } from "./LoopNode.helpers.js";
+function showCenteredContainerPreview({ containerId, reactFlowInstance, previewHandles, trailingEdgeId }) {
+    const containerNode = reactFlowInstance.getNode(containerId);
+    if (!containerNode) return;
+    const allNodes = reactFlowInstance.getNodes();
+    const containerAbsolutePosition = getAbsolutePosition(containerNode, allNodes);
+    const relativeCenter = getLoopRelativeBodyCenter(containerNode);
+    const previewCenter = {
+        x: snapToGrid(containerAbsolutePosition.x + relativeCenter.x),
+        y: snapToGrid(containerAbsolutePosition.y + relativeCenter.y)
+    };
+    showPreviewGraph({
+        sourceNodeId: containerId,
+        sourceHandleId: previewHandles.sourceHandleId,
+        reactFlowInstance,
+        position: previewCenter,
+        positionMode: 'center',
+        handlePosition: previewHandles.sourceHandlePosition,
+        targetNodeId: containerId,
+        targetHandleId: previewHandles.targetHandleId,
+        containerId,
+        trailingEdgeId
+    });
+}
+export { showCenteredContainerPreview };

package/dist/canvas/components/LoopNode/index.cjs

@@ -0,0 +1,72 @@
+"use strict";
+var __webpack_modules__ = {
+    "./LoopCanvasNode" (module) {
+        module.exports = require("./LoopCanvasNode.cjs");
+    },
+    "./LoopNode?d3ac" (module) {
+        module.exports = require("./LoopNode.cjs");
+    },
+    "./LoopNode.types" (module) {
+        module.exports = require("./LoopNode.types.cjs");
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+(()=>{
+    __webpack_require__.r(__webpack_exports__);
+    var _LoopCanvasNode__rspack_import_0 = __webpack_require__("./LoopCanvasNode");
+    var __rspack_reexport = {};
+    for(const __rspack_import_key in _LoopCanvasNode__rspack_import_0)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_LoopCanvasNode__rspack_import_0[__rspack_import_key];
+    __webpack_require__.d(__webpack_exports__, __rspack_reexport);
+    var _LoopNode__rspack_import_1 = __webpack_require__("./LoopNode?d3ac");
+    var __rspack_reexport = {};
+    for(const __rspack_import_key in _LoopNode__rspack_import_1)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_LoopNode__rspack_import_1[__rspack_import_key];
+    __webpack_require__.d(__webpack_exports__, __rspack_reexport);
+    var _LoopNode_types__rspack_import_2 = __webpack_require__("./LoopNode.types");
+    var __rspack_reexport = {};
+    for(const __rspack_import_key in _LoopNode_types__rspack_import_2)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_LoopNode_types__rspack_import_2[__rspack_import_key];
+    __webpack_require__.d(__webpack_exports__, __rspack_reexport);
+})();
+for(var __rspack_i in __webpack_exports__)exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/LoopNode/index.d.ts

@@ -0,0 +1,4 @@
+export * from './LoopCanvasNode';
+export * from './LoopNode';
+export * from './LoopNode.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/canvas/components/LoopNode/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}

package/dist/canvas/components/LoopNode/index.js

@@ -0,0 +1,3 @@
+export * from "./LoopCanvasNode.js";
+export * from "./LoopNode.js";
+export * from "./LoopNode.types.js";

package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.cjs

@@ -29,10 +29,10 @@ __webpack_require__.d(__webpack_exports__, {
 const react_cjs_namespaceObject = require("../../../xyflow/react.cjs");
 const external_react_namespaceObject = require("react");
 const external_constants_cjs_namespaceObject = require("../../../constants.cjs");
-const createPreviewNode_cjs_namespaceObject = require("../../../utils/createPreviewNode.cjs");
+const createPreviewGraph_cjs_namespaceObject = require("../../../utils/createPreviewGraph.cjs");
 const BaseCanvasModeProvider_cjs_namespaceObject = require("../../BaseCanvas/BaseCanvasModeProvider.cjs");
 const external_useEdgeToolbarPositioning_cjs_namespaceObject = require("./useEdgeToolbarPositioning.cjs");
-function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes }) {
+function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes, parentId }) {
     const reactFlow = (0, react_cjs_namespaceObject.useReactFlow)();
     const { mode } = (0, BaseCanvasModeProvider_cjs_namespaceObject.useBaseCanvasMode)();
     const isDesignMode = 'design' === mode;
@@ -43,34 +43,42 @@ function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target
         targetPosition
     });
     const handleAddNodeOnEdge = (0, external_react_namespaceObject.useCallback)((position)=>{
-        const originalEdge = {
+        const existingEdge = reactFlow.getEdges().find((edge)=>edge.id === edgeId);
+        const originalEdge = existingEdge ? {
+            ...existingEdge,
+            data: parentId ? {
+                ...existingEdge.data ?? {},
+                parentId
+            } : existingEdge.data
+        } : {
             id: edgeId,
             source,
             sourceHandle: sourceHandleId,
             target,
             targetHandle: targetHandleId,
-            type: 'default'
+            type: 'default',
+            data: parentId ? {
+                parentId
+            } : void 0
         };
-        const preview = (0, createPreviewNode_cjs_namespaceObject.createPreviewNode)(source, sourceHandleId || 'output', reactFlow, position, {
-            originalEdge
-        }, 'source', void 0, sourcePosition, ignoredNodeTypes);
-        if (!preview) return;
-        const secondEdge = {
-            id: `${external_constants_cjs_namespaceObject.PREVIEW_NODE_ID}-${target}`,
-            source: external_constants_cjs_namespaceObject.PREVIEW_NODE_ID,
-            sourceHandle: 'output',
-            target,
-            targetHandle: targetHandleId,
-            type: 'default'
-        };
-        (0, createPreviewNode_cjs_namespaceObject.applyPreviewToReactFlow)(preview, reactFlow);
-        reactFlow.setEdges((edges)=>[
-                ...edges.filter((e)=>e.id !== edgeId).map((e)=>({
-                        ...e,
-                        selected: false
-                    })),
-                secondEdge
-            ]);
+        (0, createPreviewGraph_cjs_namespaceObject.showPreviewGraph)({
+            sourceNodeId: source,
+            sourceHandleId: sourceHandleId ?? external_constants_cjs_namespaceObject.DEFAULT_SOURCE_HANDLE_ID,
+            reactFlowInstance: reactFlow,
+            position,
+            data: {
+                originalEdge
+            },
+            sourceHandleType: 'source',
+            handlePosition: sourcePosition,
+            ignoredNodeTypes: ignoredNodeTypes ?? [],
+            targetNodeId: target,
+            targetHandleId,
+            containerId: parentId,
+            removedEdgeIds: [
+                edgeId
+            ]
+        });
     }, [
         sourcePosition,
         source,
@@ -79,7 +87,8 @@ function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target
         target,
         targetHandleId,
         edgeId,
-        ignoredNodeTypes
+        ignoredNodeTypes,
+        parentId
     ]);
     const config = (0, external_react_namespaceObject.useMemo)(()=>({
             actions: [

package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.d.ts

@@ -11,6 +11,7 @@ export interface UseEdgeToolbarStateProps {
     sourcePosition: Position;
     targetPosition: Position;
     ignoredNodeTypes?: string[];
+    parentId?: string;
 }
 export interface EdgeToolbarState {
     showToolbar: boolean;
@@ -18,5 +19,5 @@ export interface EdgeToolbarState {
     config: EdgeToolbarConfig;
     handleMouseMoveOnPath?: (event: React.MouseEvent) => void;
 }
-export declare function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes, }: UseEdgeToolbarStateProps): EdgeToolbarState;
+export declare function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes, parentId, }: UseEdgeToolbarStateProps): EdgeToolbarState;
 //# sourceMappingURL=useEdgeToolbarState.d.ts.map

package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEdgeToolbarState.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,QAAQ,EAAgB,MAAM,0CAA0C,CAAC;AAKlG,OAAO,KAAK,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAGtF,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC9D,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,EAAE,QAAQ,CAAC;IACzB,cAAc,EAAE,QAAQ,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,uBAAuB,GAAG,IAAI,CAAC;IACnD,MAAM,EAAE,iBAAiB,CAAC;IAC1B,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC3D;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,cAAc,EACd,SAAS,EACT,MAAM,EACN,MAAM,EACN,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,gBAAgB,GACjB,EAAE,wBAAwB,GAAG,gBAAgB,CAoG7C"}
+{"version":3,"file":"useEdgeToolbarState.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,QAAQ,EAAgB,MAAM,0CAA0C,CAAC;AAKlG,OAAO,KAAK,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAGtF,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC9D,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,EAAE,QAAQ,CAAC;IACzB,cAAc,EAAE,QAAQ,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,uBAAuB,GAAG,IAAI,CAAC;IACnD,MAAM,EAAE,iBAAiB,CAAC;IAC1B,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC3D;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,cAAc,EACd,SAAS,EACT,MAAM,EACN,MAAM,EACN,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,QAAQ,GACT,EAAE,wBAAwB,GAAG,gBAAgB,CA+F7C"}

package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.js

@@ -1,10 +1,10 @@
 import { useReactFlow } from "../../../xyflow/react.js";
 import { useCallback, useMemo } from "react";
-import { PREVIEW_NODE_ID } from "../../../constants.js";
-import { applyPreviewToReactFlow, createPreviewNode } from "../../../utils/createPreviewNode.js";
+import { DEFAULT_SOURCE_HANDLE_ID, PREVIEW_NODE_ID } from "../../../constants.js";
+import { showPreviewGraph } from "../../../utils/createPreviewGraph.js";
 import { useBaseCanvasMode } from "../../BaseCanvas/BaseCanvasModeProvider.js";
 import { useEdgeToolbarPositioning } from "./useEdgeToolbarPositioning.js";
-function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes }) {
+function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes, parentId }) {
     const reactFlow = useReactFlow();
     const { mode } = useBaseCanvasMode();
     const isDesignMode = 'design' === mode;
@@ -15,34 +15,42 @@ function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target
         targetPosition
     });
     const handleAddNodeOnEdge = useCallback((position)=>{
-        const originalEdge = {
+        const existingEdge = reactFlow.getEdges().find((edge)=>edge.id === edgeId);
+        const originalEdge = existingEdge ? {
+            ...existingEdge,
+            data: parentId ? {
+                ...existingEdge.data ?? {},
+                parentId
+            } : existingEdge.data
+        } : {
             id: edgeId,
             source,
             sourceHandle: sourceHandleId,
             target,
             targetHandle: targetHandleId,
-            type: 'default'
+            type: 'default',
+            data: parentId ? {
+                parentId
+            } : void 0
         };
-        const preview = createPreviewNode(source, sourceHandleId || 'output', reactFlow, position, {
-            originalEdge
-        }, 'source', void 0, sourcePosition, ignoredNodeTypes);
-        if (!preview) return;
-        const secondEdge = {
-            id: `${PREVIEW_NODE_ID}-${target}`,
-            source: PREVIEW_NODE_ID,
-            sourceHandle: 'output',
-            target,
-            targetHandle: targetHandleId,
-            type: 'default'
-        };
-        applyPreviewToReactFlow(preview, reactFlow);
-        reactFlow.setEdges((edges)=>[
-                ...edges.filter((e)=>e.id !== edgeId).map((e)=>({
-                        ...e,
-                        selected: false
-                    })),
-                secondEdge
-            ]);
+        showPreviewGraph({
+            sourceNodeId: source,
+            sourceHandleId: sourceHandleId ?? DEFAULT_SOURCE_HANDLE_ID,
+            reactFlowInstance: reactFlow,
+            position,
+            data: {
+                originalEdge
+            },
+            sourceHandleType: 'source',
+            handlePosition: sourcePosition,
+            ignoredNodeTypes: ignoredNodeTypes ?? [],
+            targetNodeId: target,
+            targetHandleId,
+            containerId: parentId,
+            removedEdgeIds: [
+                edgeId
+            ]
+        });
     }, [
         sourcePosition,
         source,
@@ -51,7 +59,8 @@ function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target
         target,
         targetHandleId,
         edgeId,
-        ignoredNodeTypes
+        ignoredNodeTypes,
+        parentId
     ]);
     const config = useMemo(()=>({
             actions: [

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.cjs

@@ -37,11 +37,12 @@ const external_NodeToolbar_utils_cjs_namespaceObject = require("./NodeToolbar.ut
 const external_useToolbarState_cjs_namespaceObject = require("./useToolbarState.cjs");
 const POSITIONER_BASE_CLASS = 'absolute flex pointer-events-none z-10';
 const POSITIONER_POSITION_CLASS = {
-    top: 'top-[-52px] left-0 right-0 flex-row',
-    bottom: 'bottom-[-52px] left-0 right-0 flex-row',
-    left: 'left-[-52px] top-0 bottom-0 flex-col',
-    right: 'right-[-52px] top-0 bottom-0 flex-col'
+    top: 'top-[calc(-52px-var(--toolbar-offset,0px))] left-0 right-0 flex-row',
+    bottom: 'bottom-[calc(-52px-var(--toolbar-offset,0px))] left-0 right-0 flex-row',
+    left: 'left-[calc(-52px-var(--toolbar-offset,0px))] top-0 bottom-0 flex-col',
+    right: 'right-[calc(-52px-var(--toolbar-offset,0px))] top-0 bottom-0 flex-col'
 };
+const TOOLBAR_OFFSET = 48;
 const POSITIONER_ALIGN_CLASS = {
     start: 'justify-start',
     center: 'justify-center',
@@ -61,7 +62,7 @@ const DROPDOWN_MENU_CLASS = "absolute top-[-2px] left-[calc(100%+4px)] min-w-[18
 const DROPDOWN_ITEM_BASE_CLASS = "flex items-center gap-3 w-full py-2 px-3 bg-transparent border-none rounded-[4px] text-sm text-(--canvas-foreground) text-left [transition:background_0.15s_ease] enabled:hover:bg-(--canvas-background-hover) future:enabled:hover:bg-(--canvas-background-overlay) [&>svg]:shrink-0 [&>svg]:text-(--canvas-foreground)";
 const DROPDOWN_ITEM_DISABLED_CLASS = 'cursor-not-allowed opacity-40 pointer-events-none';
 const DROPDOWN_ITEM_ENABLED_CLASS = 'cursor-pointer opacity-100';
-const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
+const NodeToolbarComponent = ({ nodeId, config, expanded, hidden, offsetToolbar })=>{
     const { isDropdownOpen, setIsDropdownOpen, dropdownRef, buttonRef, actionsToDisplay, displayState, shouldShowOverflow, overflowActionsToDisplay, separatorOrientation, toggleDropdown } = (0, external_useToolbarState_cjs_namespaceObject.useToolbarState)({
         config,
         expanded,
@@ -80,6 +81,14 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
     const separatorClassName = (0, external_react_namespaceObject.useMemo)(()=>(0, apollo_wind_namespaceObject.cn)(SEPARATOR_BASE_CLASS, 'horizontal' === separatorOrientation ? SEPARATOR_HORIZONTAL_CLASS : SEPARATOR_VERTICAL_CLASS), [
         separatorOrientation
     ]);
+    const offsetStyle = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (!offsetToolbar) return;
+        return {
+            '--toolbar-offset': `${TOOLBAR_OFFSET}px`
+        };
+    }, [
+        offsetToolbar
+    ]);
     const toolbarAnimationVariants = (0, external_react_namespaceObject.useMemo)(()=>{
         const offsetAxis = 'top' === position || 'bottom' === position ? 'y' : 'x';
         const offsetAmount = 'top' === position || 'left' === position ? -10 : 10;
@@ -111,6 +120,7 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.AnimatePresence, {
         children: 'hidden' !== displayState && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
             className: positionerClassName,
+            style: offsetStyle,
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_namespaceObject.motion.div, {
                 layout: "position",
                 className: containerClassName,

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.d.ts

@@ -1,3 +1,3 @@
 import type { NodeToolbarProps } from './NodeToolbar.types';
-export declare const NodeToolbar: import("react").MemoExoticComponent<({ nodeId, config, expanded, hidden }: NodeToolbarProps) => import("react/jsx-runtime").JSX.Element | null>;
+export declare const NodeToolbar: import("react").MemoExoticComponent<({ nodeId, config, expanded, hidden, offsetToolbar, }: NodeToolbarProps) => import("react/jsx-runtime").JSX.Element | null>;
 //# sourceMappingURL=NodeToolbar.d.ts.map

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AA+N5D,eAAO,MAAM,WAAW,6EA3K4C,gBAAgB,oDA2K/B,CAAC"}
+{"version":3,"file":"NodeToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AA8O5D,eAAO,MAAM,WAAW,6FAhLrB,gBAAgB,oDAgLkC,CAAC"}

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.js

@@ -9,11 +9,12 @@ import { isSeparator } from "./NodeToolbar.utils.js";
 import { useToolbarState } from "./useToolbarState.js";
 const POSITIONER_BASE_CLASS = 'absolute flex pointer-events-none z-10';
 const POSITIONER_POSITION_CLASS = {
-    top: 'top-[-52px] left-0 right-0 flex-row',
-    bottom: 'bottom-[-52px] left-0 right-0 flex-row',
-    left: 'left-[-52px] top-0 bottom-0 flex-col',
-    right: 'right-[-52px] top-0 bottom-0 flex-col'
+    top: 'top-[calc(-52px-var(--toolbar-offset,0px))] left-0 right-0 flex-row',
+    bottom: 'bottom-[calc(-52px-var(--toolbar-offset,0px))] left-0 right-0 flex-row',
+    left: 'left-[calc(-52px-var(--toolbar-offset,0px))] top-0 bottom-0 flex-col',
+    right: 'right-[calc(-52px-var(--toolbar-offset,0px))] top-0 bottom-0 flex-col'
 };
+const TOOLBAR_OFFSET = 48;
 const POSITIONER_ALIGN_CLASS = {
     start: 'justify-start',
     center: 'justify-center',
@@ -33,7 +34,7 @@ const DROPDOWN_MENU_CLASS = "absolute top-[-2px] left-[calc(100%+4px)] min-w-[18
 const DROPDOWN_ITEM_BASE_CLASS = "flex items-center gap-3 w-full py-2 px-3 bg-transparent border-none rounded-[4px] text-sm text-(--canvas-foreground) text-left [transition:background_0.15s_ease] enabled:hover:bg-(--canvas-background-hover) future:enabled:hover:bg-(--canvas-background-overlay) [&>svg]:shrink-0 [&>svg]:text-(--canvas-foreground)";
 const DROPDOWN_ITEM_DISABLED_CLASS = 'cursor-not-allowed opacity-40 pointer-events-none';
 const DROPDOWN_ITEM_ENABLED_CLASS = 'cursor-pointer opacity-100';
-const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
+const NodeToolbarComponent = ({ nodeId, config, expanded, hidden, offsetToolbar })=>{
     const { isDropdownOpen, setIsDropdownOpen, dropdownRef, buttonRef, actionsToDisplay, displayState, shouldShowOverflow, overflowActionsToDisplay, separatorOrientation, toggleDropdown } = useToolbarState({
         config,
         expanded,
@@ -52,6 +53,14 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
     const separatorClassName = useMemo(()=>cn(SEPARATOR_BASE_CLASS, 'horizontal' === separatorOrientation ? SEPARATOR_HORIZONTAL_CLASS : SEPARATOR_VERTICAL_CLASS), [
         separatorOrientation
     ]);
+    const offsetStyle = useMemo(()=>{
+        if (!offsetToolbar) return;
+        return {
+            '--toolbar-offset': `${TOOLBAR_OFFSET}px`
+        };
+    }, [
+        offsetToolbar
+    ]);
     const toolbarAnimationVariants = useMemo(()=>{
         const offsetAxis = 'top' === position || 'bottom' === position ? 'y' : 'x';
         const offsetAmount = 'top' === position || 'left' === position ? -10 : 10;
@@ -83,6 +92,7 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
     return /*#__PURE__*/ jsx(AnimatePresence, {
         children: 'hidden' !== displayState && /*#__PURE__*/ jsx("div", {
             className: positionerClassName,
+            style: offsetStyle,
             children: /*#__PURE__*/ jsxs(motion.div, {
                 layout: "position",
                 className: containerClassName,

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.types.d.ts

@@ -11,5 +11,6 @@ export interface NodeToolbarProps {
     config: NodeToolbarConfig;
     expanded: boolean;
     hidden?: boolean;
+    offsetToolbar?: boolean;
 }
 //# sourceMappingURL=NodeToolbar.types.d.ts.map

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeToolbar.types.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,eAAe,CAAC,EAAE,aAAa,EAAE,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAElB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB"}
+{"version":3,"file":"NodeToolbar.types.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,eAAe,CAAC,EAAE,aAAa,EAAE,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAElB,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB"}

package/dist/canvas/components/index.cjs

@@ -36,6 +36,9 @@ var __webpack_modules__ = {
     "./HierarchicalCanvas" (module) {
         module.exports = require("./HierarchicalCanvas/index.cjs");
     },
+    "./LoopNode?4ffc" (module) {
+        module.exports = require("./LoopNode/index.cjs");
+    },
     "./MiniCanvasNavigator?564d" (module) {
         module.exports = require("./MiniCanvasNavigator/index.cjs");
     },
@@ -158,45 +161,49 @@ var __webpack_exports__ = {};
     var __rspack_reexport = {};
     for(const __rspack_import_key in _HierarchicalCanvas__rspack_import_11)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_HierarchicalCanvas__rspack_import_11[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _MiniCanvasNavigator__rspack_import_12 = __webpack_require__("./MiniCanvasNavigator?564d");
+    var _LoopNode__rspack_import_12 = __webpack_require__("./LoopNode?4ffc");
+    var __rspack_reexport = {};
+    for(const __rspack_import_key in _LoopNode__rspack_import_12)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_LoopNode__rspack_import_12[__rspack_import_key];
+    __webpack_require__.d(__webpack_exports__, __rspack_reexport);
+    var _MiniCanvasNavigator__rspack_import_13 = __webpack_require__("./MiniCanvasNavigator?564d");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _MiniCanvasNavigator__rspack_import_12)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_MiniCanvasNavigator__rspack_import_12[__rspack_import_key];
+    for(const __rspack_import_key in _MiniCanvasNavigator__rspack_import_13)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_MiniCanvasNavigator__rspack_import_13[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _NodeContextMenu__rspack_import_13 = __webpack_require__("./NodeContextMenu");
+    var _NodeContextMenu__rspack_import_14 = __webpack_require__("./NodeContextMenu");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _NodeContextMenu__rspack_import_13)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_NodeContextMenu__rspack_import_13[__rspack_import_key];
+    for(const __rspack_import_key in _NodeContextMenu__rspack_import_14)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_NodeContextMenu__rspack_import_14[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _NodeInspector__rspack_import_14 = __webpack_require__("./NodeInspector");
+    var _NodeInspector__rspack_import_15 = __webpack_require__("./NodeInspector");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _NodeInspector__rspack_import_14)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_NodeInspector__rspack_import_14[__rspack_import_key];
+    for(const __rspack_import_key in _NodeInspector__rspack_import_15)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_NodeInspector__rspack_import_15[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _NodePropertiesPanel__rspack_import_15 = __webpack_require__("./NodePropertiesPanel?a3e8");
+    var _NodePropertiesPanel__rspack_import_16 = __webpack_require__("./NodePropertiesPanel?a3e8");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _NodePropertiesPanel__rspack_import_15)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_NodePropertiesPanel__rspack_import_15[__rspack_import_key];
+    for(const __rspack_import_key in _NodePropertiesPanel__rspack_import_16)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_NodePropertiesPanel__rspack_import_16[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _StageNode__rspack_import_16 = __webpack_require__("./StageNode");
+    var _StageNode__rspack_import_17 = __webpack_require__("./StageNode");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _StageNode__rspack_import_16)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_StageNode__rspack_import_16[__rspack_import_key];
+    for(const __rspack_import_key in _StageNode__rspack_import_17)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_StageNode__rspack_import_17[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _StickyNoteNode__rspack_import_17 = __webpack_require__("./StickyNoteNode?d2a3");
+    var _StickyNoteNode__rspack_import_18 = __webpack_require__("./StickyNoteNode?d2a3");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _StickyNoteNode__rspack_import_17)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_StickyNoteNode__rspack_import_17[__rspack_import_key];
+    for(const __rspack_import_key in _StickyNoteNode__rspack_import_18)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_StickyNoteNode__rspack_import_18[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _TaskIcon__rspack_import_18 = __webpack_require__("./TaskIcon");
+    var _TaskIcon__rspack_import_19 = __webpack_require__("./TaskIcon");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _TaskIcon__rspack_import_18)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_TaskIcon__rspack_import_18[__rspack_import_key];
+    for(const __rspack_import_key in _TaskIcon__rspack_import_19)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_TaskIcon__rspack_import_19[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _Toolbar__rspack_import_19 = __webpack_require__("./Toolbar");
+    var _Toolbar__rspack_import_20 = __webpack_require__("./Toolbar");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _Toolbar__rspack_import_19)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_Toolbar__rspack_import_19[__rspack_import_key];
+    for(const __rspack_import_key in _Toolbar__rspack_import_20)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_Toolbar__rspack_import_20[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _Toolbox__rspack_import_20 = __webpack_require__("./Toolbox?2740");
+    var _Toolbox__rspack_import_21 = __webpack_require__("./Toolbox?2740");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _Toolbox__rspack_import_20)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_Toolbox__rspack_import_20[__rspack_import_key];
+    for(const __rspack_import_key in _Toolbox__rspack_import_21)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_Toolbox__rspack_import_21[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _TriggerNode__rspack_import_21 = __webpack_require__("./TriggerNode");
+    var _TriggerNode__rspack_import_22 = __webpack_require__("./TriggerNode");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _TriggerNode__rspack_import_21)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_TriggerNode__rspack_import_21[__rspack_import_key];
+    for(const __rspack_import_key in _TriggerNode__rspack_import_22)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_TriggerNode__rspack_import_22[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
 })();
 for(var __rspack_i in __webpack_exports__)exports[__rspack_i] = __webpack_exports__[__rspack_i];

package/dist/canvas/components/index.d.ts

@@ -10,6 +10,7 @@ export * from './ExecutionStatusIcon';
 export * from './FloatingCanvasPanel';
 export * from './GroupNode';
 export * from './HierarchicalCanvas';
+export * from './LoopNode';
 export * from './MiniCanvasNavigator';
 export * from './NodeContextMenu';
 export * from './NodeInspector';