@uipath/apollo-react 4.14.1-pr556.aa710a0 → 4.15.0-pr605.6ea14a7

package/dist/canvas/components/AddNodePanel/AddNodeManager.cjs

@@ -33,8 +33,87 @@ const external_constants_cjs_namespaceObject = require("../../constants.cjs");
 const index_cjs_namespaceObject = require("../../core/index.cjs");
 const usePreviewNode_cjs_namespaceObject = require("../../hooks/usePreviewNode.cjs");
 const external_utils_index_cjs_namespaceObject = require("../../utils/index.cjs");
+const collapse_cjs_namespaceObject = require("../../utils/collapse.cjs");
+const container_sizing_cjs_namespaceObject = require("../../utils/container-sizing.cjs");
+const manifest_resolver_cjs_namespaceObject = require("../../utils/manifest-resolver.cjs");
 const external_FloatingCanvasPanel_index_cjs_namespaceObject = require("../FloatingCanvasPanel/index.cjs");
+const LoopNode_helpers_cjs_namespaceObject = require("../LoopNode/LoopNode.helpers.cjs");
+const LoopNode_sequence_cjs_namespaceObject = require("../LoopNode/LoopNode.sequence.cjs");
 const external_AddNodePanel_cjs_namespaceObject = require("./AddNodePanel.cjs");
+function getManifestForNode(registry, node) {
+    return node.type ? registry?.getManifest(node.type, (0, manifest_resolver_cjs_namespaceObject.getNodeTypeVersion)(node.data)) : void 0;
+}
+function getManifestAwareNodeDimensions(registry, node) {
+    const manifest = getManifestForNode(registry, node);
+    const expandedShape = (0, collapse_cjs_namespaceObject.getExpandedShape)(manifest?.display.shape);
+    const fallbackDimensions = (0, collapse_cjs_namespaceObject.getExpandedSize)(expandedShape, manifest);
+    return (0, container_sizing_cjs_namespaceObject.getNodeDimensions)(node, fallbackDimensions);
+}
+function getContainerFitGeometry(registry, node) {
+    const manifest = getManifestForNode(registry, node);
+    return (0, LoopNode_helpers_cjs_namespaceObject.isLoopContainerManifest)(manifest) ? (0, LoopNode_helpers_cjs_namespaceObject.getLoopContainerFitGeometry)() : null;
+}
+function centerNodeOnPreview(previewNode, nodeDimensions) {
+    const previewDimensions = (0, container_sizing_cjs_namespaceObject.getNodeDimensions)(previewNode);
+    return {
+        x: previewNode.position.x + (previewDimensions.width - nodeDimensions.width) / 2,
+        y: previewNode.position.y + (previewDimensions.height - nodeDimensions.height) / 2
+    };
+}
+function centerNodeVerticallyOnPreview(previewNode, nodeDimensions) {
+    const previewDimensions = (0, container_sizing_cjs_namespaceObject.getNodeDimensions)(previewNode);
+    return {
+        x: previewNode.position.x,
+        y: previewNode.position.y + (previewDimensions.height - nodeDimensions.height) / 2
+    };
+}
+function resolveSiblingCollisions(nodes, insertedNode, options) {
+    const siblingNodes = nodes.filter((node)=>node.parentId === insertedNode.parentId);
+    const resolvedSiblings = (0, external_utils_index_cjs_namespaceObject.resolveCollisions)(siblingNodes, options);
+    const resolvedSiblingsById = new Map(resolvedSiblings.map((node)=>[
+            node.id,
+            node
+        ]));
+    return nodes.map((node)=>resolvedSiblingsById.get(node.id) ?? node);
+}
+function resolveNodePlacement(nodes, insertedNode, registry, ignoredNodeTypes, edges, loopSequencePlacement) {
+    const getNodeSize = (node)=>getManifestAwareNodeDimensions(registry, node);
+    if (!insertedNode.parentId) {
+        const resolvedNodes = (0, external_utils_index_cjs_namespaceObject.resolveCollisions)(nodes, {
+            ignoredNodeTypes,
+            getNodeSize
+        });
+        return {
+            nodes: resolvedNodes,
+            insertedNode: resolvedNodes.find((node)=>node.id === insertedNode.id) ?? insertedNode
+        };
+    }
+    const loopSequenceNodes = loopSequencePlacement ? (0, LoopNode_sequence_cjs_namespaceObject.resolveLoopSequenceMaterializedNodes)({
+        nodes,
+        edges,
+        insertedNode,
+        placement: loopSequencePlacement,
+        getNodeSize
+    }) : null;
+    let resolvedNodes = loopSequenceNodes;
+    if (!resolvedNodes) resolvedNodes = resolveSiblingCollisions(nodes, insertedNode, {
+        ignoredNodeTypes,
+        getNodeSize
+    });
+    const fittedNodes = (0, container_sizing_cjs_namespaceObject.ensureContainersFitChildren)(resolvedNodes, {
+        containerIds: [
+            insertedNode.parentId
+        ],
+        getContainerFitGeometry: (node)=>getContainerFitGeometry(registry, node),
+        getNodeDimensions: getNodeSize,
+        ignoredNodeTypes,
+        includeAncestors: true
+    });
+    return {
+        nodes: fittedNodes,
+        insertedNode: fittedNodes.find((node)=>node.id === insertedNode.id) ?? insertedNode
+    };
+}
 const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData, onBeforeNodeAdded, onNodeAdded, ignoredNodeTypes })=>{
     const reactFlowInstance = (0, react_cjs_namespaceObject.useReactFlow)();
     const registry = (0, index_cjs_namespaceObject.useOptionalNodeTypeRegistry)();
@@ -70,28 +149,39 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
     const handleNodeSelect = (0, external_react_namespaceObject.useCallback)((nodeItem)=>{
         const currentPreviewNode = reactFlowInstance.getNode(external_constants_cjs_namespaceObject.PREVIEW_NODE_ID);
         if (!currentPreviewNode || !previewNodeConnectionInfo || 0 === previewNodeConnectionInfo.length) return;
+        const loopSequencePlacement = (0, LoopNode_sequence_cjs_namespaceObject.getLoopSequencePlacementFromPreviewGraph)(currentPreviewNode, previewNodeConnectionInfo);
         const newNodeId = `${nodeItem.data.type}-${Date.now()}`;
         const baseNodeData = createNodeData ? createNodeData(nodeItem) : {
             label: nodeItem.name,
             subLabel: nodeItem.description
         };
-        const nodeData = currentPreviewNode.data?.useSmartHandles ? {
+        const nodeData = {
             ...baseNodeData,
-            useSmartHandles: true
-        } : baseNodeData;
+            ...nodeItem.data.version ? {
+                typeVersion: nodeItem.data.version
+            } : {},
+            ...currentPreviewNode.data?.useSmartHandles ? {
+                useSmartHandles: true
+            } : {}
+        };
         const newNode = {
             id: newNodeId,
             type: nodeItem.data.type,
             position: currentPreviewNode.position,
+            parentId: currentPreviewNode.parentId,
+            extent: currentPreviewNode.extent,
             selected: true,
             data: nodeData
         };
-        const newNodeManifest = registry?.getManifest(nodeItem.data.type);
+        const newNodeManifest = registry?.getManifest(nodeItem.data.type, nodeItem.data.version);
+        const newNodeDimensions = getManifestAwareNodeDimensions(registry, newNode);
+        if (currentPreviewNode.parentId) newNode.position = centerNodeOnPreview(currentPreviewNode, newNodeDimensions);
+        else if ((0, LoopNode_helpers_cjs_namespaceObject.isLoopContainerManifest)(newNodeManifest)) newNode.position = centerNodeVerticallyOnPreview(currentPreviewNode, newNodeDimensions);
         const newEdges = [];
         const previewEdgeIds = [];
         for (const connectionInfoItem of previewNodeConnectionInfo){
             const newNodeHandleType = connectionInfoItem.addNewNodeAsSource ? 'source' : 'target';
-            const newNodeDefaultHandle = newNodeManifest ? registry?.getDefaultHandle(newNodeManifest.nodeType, newNodeHandleType) : void 0;
+            const newNodeDefaultHandle = newNodeManifest ? registry?.getDefaultHandle(newNodeManifest.nodeType, newNodeHandleType, nodeItem.data.version) : void 0;
             const newNodeHandleId = newNodeDefaultHandle?.id;
             const edgeSourceTargetData = connectionInfoItem.addNewNodeAsSource ? {
                 source: newNode.id,
@@ -116,6 +206,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
             newNode,
             newEdges
         };
+        let resolvedFinalNode = finalNode;
         reactFlowInstance.setNodes((nodes)=>{
             const newNodes = [
                 ...nodes.filter((n)=>n.id !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID).map((n)=>({
@@ -124,9 +215,9 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
                     })),
                 finalNode
             ];
-            return (0, external_utils_index_cjs_namespaceObject.resolveCollisions)(newNodes, {
-                ignoredNodeTypes
-            });
+            const placement = resolveNodePlacement(newNodes, finalNode, registry, ignoredNodeTypes, reactFlowInstance.getEdges(), loopSequencePlacement);
+            resolvedFinalNode = placement.insertedNode;
+            return placement.nodes;
         });
         reactFlowInstance.setEdges((edges)=>[
                 ...edges.filter((e)=>!previewEdgeIds.includes(e.id)),
@@ -134,7 +225,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
             ]);
         const [firstConnection] = previewNodeConnectionInfo;
         if (firstConnection) {
-            const firstEdgeSourceHandle = firstConnection.addNewNodeAsSource ? newNodeManifest && registry?.getDefaultHandle(newNodeManifest.nodeType, 'source')?.id : firstConnection.existingHandleId;
+            const firstEdgeSourceHandle = firstConnection.addNewNodeAsSource ? newNodeManifest && registry?.getDefaultHandle(newNodeManifest.nodeType, 'source', nodeItem.data.version)?.id : firstConnection.existingHandleId;
             const firstEdgeData = firstConnection.addNewNodeAsSource ? {
                 source: finalNode.id,
                 sourceHandle: firstEdgeSourceHandle ?? 'output'
@@ -142,7 +233,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
                 source: firstConnection.existingNodeId,
                 sourceHandle: firstConnection.existingHandleId
             };
-            onNodeAdded?.(firstEdgeData.source, firstEdgeData.sourceHandle, finalNode);
+            onNodeAdded?.(firstEdgeData.source, firstEdgeData.sourceHandle, resolvedFinalNode);
         }
         restoreEdgesRef.current = null;
         handleClose();

package/dist/canvas/components/AddNodePanel/AddNodeManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddNodeManager.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodeManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AAE3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAKlC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC;IAI7E,YAAY,CAAC,EAAE,OAAO,CAAC;IAIvB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAK7F,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,YAAY,CAAC,KAAK,YAAY,CAAC;IAOtE,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK;QAAE,OAAO,EAAE,IAAI,CAAC;QAAC,QAAQ,EAAE,IAAI,EAAE,CAAA;KAAE,CAAC;IAK7F,WAAW,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;IAMpF,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AASD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqMxD,CAAC"}
+{"version":3,"file":"AddNodeManager.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodeManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AAE3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAQhD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAKlC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC;IAI7E,YAAY,CAAC,EAAE,OAAO,CAAC;IAIvB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAK7F,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,YAAY,CAAC,KAAK,YAAY,CAAC;IAOtE,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK;QAAE,OAAO,EAAE,IAAI,CAAC;QAAC,QAAQ,EAAE,IAAI,EAAE,CAAA;KAAE,CAAC;IAK7F,WAAW,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;IAMpF,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AAuHD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiOxD,CAAC"}

package/dist/canvas/components/AddNodePanel/AddNodeManager.js

@@ -5,8 +5,87 @@ import { FLOATING_CANVAS_PANEL_OFFSET, PREVIEW_NODE_ID } from "../../constants.j
 import { useOptionalNodeTypeRegistry } from "../../core/index.js";
 import { usePreviewNode } from "../../hooks/usePreviewNode.js";
 import { resolveCollisions } from "../../utils/index.js";
+import { getExpandedShape, getExpandedSize } from "../../utils/collapse.js";
+import { ensureContainersFitChildren, getNodeDimensions } from "../../utils/container-sizing.js";
+import { getNodeTypeVersion } from "../../utils/manifest-resolver.js";
 import { FloatingCanvasPanel } from "../FloatingCanvasPanel/index.js";
+import { getLoopContainerFitGeometry, isLoopContainerManifest } from "../LoopNode/LoopNode.helpers.js";
+import { getLoopSequencePlacementFromPreviewGraph, resolveLoopSequenceMaterializedNodes } from "../LoopNode/LoopNode.sequence.js";
 import { AddNodePanel } from "./AddNodePanel.js";
+function getManifestForNode(registry, node) {
+    return node.type ? registry?.getManifest(node.type, getNodeTypeVersion(node.data)) : void 0;
+}
+function getManifestAwareNodeDimensions(registry, node) {
+    const manifest = getManifestForNode(registry, node);
+    const expandedShape = getExpandedShape(manifest?.display.shape);
+    const fallbackDimensions = getExpandedSize(expandedShape, manifest);
+    return getNodeDimensions(node, fallbackDimensions);
+}
+function getContainerFitGeometry(registry, node) {
+    const manifest = getManifestForNode(registry, node);
+    return isLoopContainerManifest(manifest) ? getLoopContainerFitGeometry() : null;
+}
+function centerNodeOnPreview(previewNode, nodeDimensions) {
+    const previewDimensions = getNodeDimensions(previewNode);
+    return {
+        x: previewNode.position.x + (previewDimensions.width - nodeDimensions.width) / 2,
+        y: previewNode.position.y + (previewDimensions.height - nodeDimensions.height) / 2
+    };
+}
+function centerNodeVerticallyOnPreview(previewNode, nodeDimensions) {
+    const previewDimensions = getNodeDimensions(previewNode);
+    return {
+        x: previewNode.position.x,
+        y: previewNode.position.y + (previewDimensions.height - nodeDimensions.height) / 2
+    };
+}
+function resolveSiblingCollisions(nodes, insertedNode, options) {
+    const siblingNodes = nodes.filter((node)=>node.parentId === insertedNode.parentId);
+    const resolvedSiblings = resolveCollisions(siblingNodes, options);
+    const resolvedSiblingsById = new Map(resolvedSiblings.map((node)=>[
+            node.id,
+            node
+        ]));
+    return nodes.map((node)=>resolvedSiblingsById.get(node.id) ?? node);
+}
+function resolveNodePlacement(nodes, insertedNode, registry, ignoredNodeTypes, edges, loopSequencePlacement) {
+    const getNodeSize = (node)=>getManifestAwareNodeDimensions(registry, node);
+    if (!insertedNode.parentId) {
+        const resolvedNodes = resolveCollisions(nodes, {
+            ignoredNodeTypes,
+            getNodeSize
+        });
+        return {
+            nodes: resolvedNodes,
+            insertedNode: resolvedNodes.find((node)=>node.id === insertedNode.id) ?? insertedNode
+        };
+    }
+    const loopSequenceNodes = loopSequencePlacement ? resolveLoopSequenceMaterializedNodes({
+        nodes,
+        edges,
+        insertedNode,
+        placement: loopSequencePlacement,
+        getNodeSize
+    }) : null;
+    let resolvedNodes = loopSequenceNodes;
+    if (!resolvedNodes) resolvedNodes = resolveSiblingCollisions(nodes, insertedNode, {
+        ignoredNodeTypes,
+        getNodeSize
+    });
+    const fittedNodes = ensureContainersFitChildren(resolvedNodes, {
+        containerIds: [
+            insertedNode.parentId
+        ],
+        getContainerFitGeometry: (node)=>getContainerFitGeometry(registry, node),
+        getNodeDimensions: getNodeSize,
+        ignoredNodeTypes,
+        includeAncestors: true
+    });
+    return {
+        nodes: fittedNodes,
+        insertedNode: fittedNodes.find((node)=>node.id === insertedNode.id) ?? insertedNode
+    };
+}
 const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData, onBeforeNodeAdded, onNodeAdded, ignoredNodeTypes })=>{
     const reactFlowInstance = useReactFlow();
     const registry = useOptionalNodeTypeRegistry();
@@ -42,28 +121,39 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
     const handleNodeSelect = useCallback((nodeItem)=>{
         const currentPreviewNode = reactFlowInstance.getNode(PREVIEW_NODE_ID);
         if (!currentPreviewNode || !previewNodeConnectionInfo || 0 === previewNodeConnectionInfo.length) return;
+        const loopSequencePlacement = getLoopSequencePlacementFromPreviewGraph(currentPreviewNode, previewNodeConnectionInfo);
         const newNodeId = `${nodeItem.data.type}-${Date.now()}`;
         const baseNodeData = createNodeData ? createNodeData(nodeItem) : {
             label: nodeItem.name,
             subLabel: nodeItem.description
         };
-        const nodeData = currentPreviewNode.data?.useSmartHandles ? {
+        const nodeData = {
             ...baseNodeData,
-            useSmartHandles: true
-        } : baseNodeData;
+            ...nodeItem.data.version ? {
+                typeVersion: nodeItem.data.version
+            } : {},
+            ...currentPreviewNode.data?.useSmartHandles ? {
+                useSmartHandles: true
+            } : {}
+        };
         const newNode = {
             id: newNodeId,
             type: nodeItem.data.type,
             position: currentPreviewNode.position,
+            parentId: currentPreviewNode.parentId,
+            extent: currentPreviewNode.extent,
             selected: true,
             data: nodeData
         };
-        const newNodeManifest = registry?.getManifest(nodeItem.data.type);
+        const newNodeManifest = registry?.getManifest(nodeItem.data.type, nodeItem.data.version);
+        const newNodeDimensions = getManifestAwareNodeDimensions(registry, newNode);
+        if (currentPreviewNode.parentId) newNode.position = centerNodeOnPreview(currentPreviewNode, newNodeDimensions);
+        else if (isLoopContainerManifest(newNodeManifest)) newNode.position = centerNodeVerticallyOnPreview(currentPreviewNode, newNodeDimensions);
         const newEdges = [];
         const previewEdgeIds = [];
         for (const connectionInfoItem of previewNodeConnectionInfo){
             const newNodeHandleType = connectionInfoItem.addNewNodeAsSource ? 'source' : 'target';
-            const newNodeDefaultHandle = newNodeManifest ? registry?.getDefaultHandle(newNodeManifest.nodeType, newNodeHandleType) : void 0;
+            const newNodeDefaultHandle = newNodeManifest ? registry?.getDefaultHandle(newNodeManifest.nodeType, newNodeHandleType, nodeItem.data.version) : void 0;
             const newNodeHandleId = newNodeDefaultHandle?.id;
             const edgeSourceTargetData = connectionInfoItem.addNewNodeAsSource ? {
                 source: newNode.id,
@@ -88,6 +178,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
             newNode,
             newEdges
         };
+        let resolvedFinalNode = finalNode;
         reactFlowInstance.setNodes((nodes)=>{
             const newNodes = [
                 ...nodes.filter((n)=>n.id !== PREVIEW_NODE_ID).map((n)=>({
@@ -96,9 +187,9 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
                     })),
                 finalNode
             ];
-            return resolveCollisions(newNodes, {
-                ignoredNodeTypes
-            });
+            const placement = resolveNodePlacement(newNodes, finalNode, registry, ignoredNodeTypes, reactFlowInstance.getEdges(), loopSequencePlacement);
+            resolvedFinalNode = placement.insertedNode;
+            return placement.nodes;
         });
         reactFlowInstance.setEdges((edges)=>[
                 ...edges.filter((e)=>!previewEdgeIds.includes(e.id)),
@@ -106,7 +197,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
             ]);
         const [firstConnection] = previewNodeConnectionInfo;
         if (firstConnection) {
-            const firstEdgeSourceHandle = firstConnection.addNewNodeAsSource ? newNodeManifest && registry?.getDefaultHandle(newNodeManifest.nodeType, 'source')?.id : firstConnection.existingHandleId;
+            const firstEdgeSourceHandle = firstConnection.addNewNodeAsSource ? newNodeManifest && registry?.getDefaultHandle(newNodeManifest.nodeType, 'source', nodeItem.data.version)?.id : firstConnection.existingHandleId;
             const firstEdgeData = firstConnection.addNewNodeAsSource ? {
                 source: finalNode.id,
                 sourceHandle: firstEdgeSourceHandle ?? 'output'
@@ -114,7 +205,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
                 source: firstConnection.existingNodeId,
                 sourceHandle: firstConnection.existingHandleId
             };
-            onNodeAdded?.(firstEdgeData.source, firstEdgeData.sourceHandle, finalNode);
+            onNodeAdded?.(firstEdgeData.source, firstEdgeData.sourceHandle, resolvedFinalNode);
         }
         restoreEdgesRef.current = null;
         handleClose();

package/dist/canvas/components/AddNodePanel/createAddNodePreview.cjs

@@ -28,7 +28,25 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
 const createPreviewGraph_cjs_namespaceObject = require("../../utils/createPreviewGraph.cjs");
+const LoopNode_sequence_cjs_namespaceObject = require("../LoopNode/LoopNode.sequence.cjs");
 function createAddNodePreview(sourceNodeId, sourceHandleId, reactFlowInstance, handlePosition = react_cjs_namespaceObject.Position.Right, sourceHandleType = 'source', ignoredNodeTypes = []) {
+    if ('source' === sourceHandleType) {
+        const loopPreview = (0, LoopNode_sequence_cjs_namespaceObject.resolveLoopAddNodePreview)({
+            sourceNodeId,
+            sourceHandleId,
+            reactFlowInstance
+        });
+        if ('skip' === loopPreview.action) return;
+        if ('create-preview' === loopPreview.action) return void (0, createPreviewGraph_cjs_namespaceObject.showPreviewGraph)({
+            sourceNodeId,
+            sourceHandleId,
+            reactFlowInstance,
+            sourceHandleType,
+            handlePosition,
+            ignoredNodeTypes,
+            ...loopPreview.previewGraphOptions
+        });
+    }
     (0, createPreviewGraph_cjs_namespaceObject.showPreviewGraph)({
         sourceNodeId,
         sourceHandleId,

package/dist/canvas/components/AddNodePanel/createAddNodePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createAddNodePreview.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/createAddNodePreview.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAa5F,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,GAAE,QAAyB,EACzC,gBAAgB,GAAE,QAAQ,GAAG,QAAmB,EAChD,gBAAgB,GAAE,MAAM,EAAO,GAC9B,IAAI,CASN"}
+{"version":3,"file":"createAddNodePreview.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/createAddNodePreview.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAc5F,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,GAAE,QAAyB,EACzC,gBAAgB,GAAE,QAAQ,GAAG,QAAmB,EAChD,gBAAgB,GAAE,MAAM,EAAO,GAC9B,IAAI,CAkCN"}

package/dist/canvas/components/AddNodePanel/createAddNodePreview.js

@@ -1,6 +1,24 @@
 import { Position } from "../../xyflow/react.js";
 import { showPreviewGraph } from "../../utils/createPreviewGraph.js";
+import { resolveLoopAddNodePreview } from "../LoopNode/LoopNode.sequence.js";
 function createAddNodePreview(sourceNodeId, sourceHandleId, reactFlowInstance, handlePosition = Position.Right, sourceHandleType = 'source', ignoredNodeTypes = []) {
+    if ('source' === sourceHandleType) {
+        const loopPreview = resolveLoopAddNodePreview({
+            sourceNodeId,
+            sourceHandleId,
+            reactFlowInstance
+        });
+        if ('skip' === loopPreview.action) return;
+        if ('create-preview' === loopPreview.action) return void showPreviewGraph({
+            sourceNodeId,
+            sourceHandleId,
+            reactFlowInstance,
+            sourceHandleType,
+            handlePosition,
+            ignoredNodeTypes,
+            ...loopPreview.previewGraphOptions
+        });
+    }
     showPreviewGraph({
         sourceNodeId,
         sourceHandleId,

package/dist/canvas/components/Edges/SequenceEdge.cjs

@@ -92,6 +92,8 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObje
     const status = executionStatus ? executionStatus?.status ?? executionStatus : validationStatus;
     const isDiffAdded = data?.isDiffAdded === true;
     const isDiffRemoved = data?.isDiffRemoved === true;
+    const hideArrowHead = data?.hideArrowHead === true;
+    const hideToolbar = data?.hideToolbar === true;
     const angle = ANGLE_MAP[targetPosition];
     const { x: offsetX, y: offsetY } = ARROW_OFFSETS[targetPosition];
     const { edgePath, labelX, labelY } = (0, index_cjs_namespaceObject.useEdgePath)({
@@ -102,8 +104,8 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObje
         sourceX,
         sourceY,
         sourcePosition,
-        targetX,
-        targetY,
+        targetX: hideArrowHead ? targetX + offsetX : targetX,
+        targetY: hideArrowHead ? targetY + offsetY : targetY,
         targetPosition
     });
     const { showToolbar, toolbarPositioning, config: toolbarConfig, handleMouseMoveOnPath } = (0, external_Toolbar_index_cjs_namespaceObject.useEdgeToolbarState)({
@@ -170,12 +172,12 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObje
                         },
                         ref: pathElementRef
                     }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("polygon", {
+                    !hideArrowHead && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("polygon", {
                         points: `
-            ${targetX},${targetY}
-            ${targetX - ARROW_SIZE * Math.cos(angle - Math.PI / 6)},${targetY - ARROW_SIZE * Math.sin(angle - Math.PI / 6)}
-            ${targetX - ARROW_SIZE * Math.cos(angle + Math.PI / 6)},${targetY - ARROW_SIZE * Math.sin(angle + Math.PI / 6)}
-          `,
+              ${targetX},${targetY}
+              ${targetX - ARROW_SIZE * Math.cos(angle - Math.PI / 6)},${targetY - ARROW_SIZE * Math.sin(angle - Math.PI / 6)}
+              ${targetX - ARROW_SIZE * Math.cos(angle + Math.PI / 6)},${targetY - ARROW_SIZE * Math.sin(angle + Math.PI / 6)}
+            `,
                         fill: edgeColor,
                         style: {
                             pointerEvents: 'none',
@@ -215,7 +217,7 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObje
                     })
                 ]
             }),
-            showToolbar && toolbarPositioning && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbar_index_cjs_namespaceObject.EdgeToolbar, {
+            !hideToolbar && showToolbar && toolbarPositioning && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbar_index_cjs_namespaceObject.EdgeToolbar, {
                 edgeId: id,
                 visible: showToolbar,
                 positioning: toolbarPositioning,

package/dist/canvas/components/Edges/SequenceEdge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SequenceEdge.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Edges/SequenceEdge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,0CAA0C,CAAC;AAoDpF,eAAO,MAAM,YAAY,iDAuMJ,CAAC"}
+{"version":3,"file":"SequenceEdge.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Edges/SequenceEdge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,0CAA0C,CAAC;AAoDpF,eAAO,MAAM,YAAY,iDA+MJ,CAAC"}

package/dist/canvas/components/Edges/SequenceEdge.js

@@ -64,6 +64,8 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, so
     const status = executionStatus ? executionStatus?.status ?? executionStatus : validationStatus;
     const isDiffAdded = data?.isDiffAdded === true;
     const isDiffRemoved = data?.isDiffRemoved === true;
+    const hideArrowHead = data?.hideArrowHead === true;
+    const hideToolbar = data?.hideToolbar === true;
     const angle = ANGLE_MAP[targetPosition];
     const { x: offsetX, y: offsetY } = ARROW_OFFSETS[targetPosition];
     const { edgePath, labelX, labelY } = useEdgePath({
@@ -74,8 +76,8 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, so
         sourceX,
         sourceY,
         sourcePosition,
-        targetX,
-        targetY,
+        targetX: hideArrowHead ? targetX + offsetX : targetX,
+        targetY: hideArrowHead ? targetY + offsetY : targetY,
         targetPosition
     });
     const { showToolbar, toolbarPositioning, config: toolbarConfig, handleMouseMoveOnPath } = useEdgeToolbarState({
@@ -142,12 +144,12 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, so
                         },
                         ref: pathElementRef
                     }),
-                    /*#__PURE__*/ jsx("polygon", {
+                    !hideArrowHead && /*#__PURE__*/ jsx("polygon", {
                         points: `
-            ${targetX},${targetY}
-            ${targetX - ARROW_SIZE * Math.cos(angle - Math.PI / 6)},${targetY - ARROW_SIZE * Math.sin(angle - Math.PI / 6)}
-            ${targetX - ARROW_SIZE * Math.cos(angle + Math.PI / 6)},${targetY - ARROW_SIZE * Math.sin(angle + Math.PI / 6)}
-          `,
+              ${targetX},${targetY}
+              ${targetX - ARROW_SIZE * Math.cos(angle - Math.PI / 6)},${targetY - ARROW_SIZE * Math.sin(angle - Math.PI / 6)}
+              ${targetX - ARROW_SIZE * Math.cos(angle + Math.PI / 6)},${targetY - ARROW_SIZE * Math.sin(angle + Math.PI / 6)}
+            `,
                         fill: edgeColor,
                         style: {
                             pointerEvents: 'none',
@@ -187,7 +189,7 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, so
                     })
                 ]
             }),
-            showToolbar && toolbarPositioning && /*#__PURE__*/ jsx(EdgeToolbar, {
+            !hideToolbar && showToolbar && toolbarPositioning && /*#__PURE__*/ jsx(EdgeToolbar, {
                 edgeId: id,
                 visible: showToolbar,
                 positioning: toolbarPositioning,

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.cjs

@@ -333,7 +333,10 @@ const CanvasWithControlsContent = ({ initialCanvases, initialPath, onCanvasesCha
     const updateNodes = (0, canvasStore_cjs_namespaceObject.useCanvasStore)(canvasStore_cjs_namespaceObject.selectUpdateNodes);
     (0, external_react_namespaceObject.useEffect)(()=>{
         const handleAction = (event)=>{
-            if (reactFlowInstance) (0, createAddNodePreview_cjs_namespaceObject.createAddNodePreview)(event.nodeId, event.handleId, reactFlowInstance);
+            if (reactFlowInstance) {
+                const sourceHandleType = 'input' === event.handleType ? 'target' : 'source';
+                (0, createAddNodePreview_cjs_namespaceObject.createAddNodePreview)(event.nodeId, event.handleId, reactFlowInstance, event.position, sourceHandleType);
+            }
         };
         CanvasEventBus_cjs_namespaceObject.canvasEventBus.on('handle:action', handleAction);
         return ()=>{

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HierarchicalCanvasWithControls.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA6d/B,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EA8BlD,CAAC"}
+{"version":3,"file":"HierarchicalCanvasWithControls.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqe/B,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EA8BlD,CAAC"}

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.js

@@ -305,7 +305,10 @@ const CanvasWithControlsContent = ({ initialCanvases, initialPath, onCanvasesCha
     const updateNodes = useCanvasStore(selectUpdateNodes);
     useEffect(()=>{
         const handleAction = (event)=>{
-            if (reactFlowInstance) createAddNodePreview(event.nodeId, event.handleId, reactFlowInstance);
+            if (reactFlowInstance) {
+                const sourceHandleType = 'input' === event.handleType ? 'target' : 'source';
+                createAddNodePreview(event.nodeId, event.handleId, reactFlowInstance, event.position, sourceHandleType);
+            }
         };
         canvasEventBus.on('handle:action', handleAction);
         return ()=>{

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

@@ -24,17 +24,20 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    DEFAULT_LOOP_FRAME_BACKGROUND: ()=>DEFAULT_LOOP_FRAME_BACKGROUND,
-    DEFAULT_LOOP_ICON: ()=>DEFAULT_LOOP_ICON,
-    DEFAULT_LOOP_HEIGHT: ()=>DEFAULT_LOOP_HEIGHT,
     DEFAULT_LOOP_MIN_HEIGHT: ()=>DEFAULT_LOOP_MIN_HEIGHT,
-    DEFAULT_LOOP_WIDTH: ()=>DEFAULT_LOOP_WIDTH,
     LOOP_SHELL_RADIUS_PX: ()=>LOOP_SHELL_RADIUS_PX,
     DEFAULT_LOOP_TITLE: ()=>DEFAULT_LOOP_TITLE,
     LOOP_FRAME_INSET_PX: ()=>LOOP_FRAME_INSET_PX,
+    LOOP_BODY_PADDING_PX: ()=>LOOP_BODY_PADDING_PX,
+    DEFAULT_LOOP_HEADER_HEIGHT_PX: ()=>DEFAULT_LOOP_HEADER_HEIGHT_PX,
+    LOOP_INNER_HANDLE_RAIL_WIDTH_PX: ()=>LOOP_INNER_HANDLE_RAIL_WIDTH_PX,
+    DEFAULT_LOOP_FRAME_BACKGROUND: ()=>DEFAULT_LOOP_FRAME_BACKGROUND,
+    DEFAULT_LOOP_ICON: ()=>DEFAULT_LOOP_ICON,
+    DEFAULT_LOOP_HEIGHT: ()=>DEFAULT_LOOP_HEIGHT,
+    DEFAULT_LOOP_WIDTH: ()=>DEFAULT_LOOP_WIDTH,
     DEFAULT_LOOP_FRAME_BORDER: ()=>DEFAULT_LOOP_FRAME_BORDER,
+    LOOP_CHILD_SAFE_GAP_PX: ()=>LOOP_CHILD_SAFE_GAP_PX,
     DEFAULT_LOOP_MIN_WIDTH: ()=>DEFAULT_LOOP_MIN_WIDTH,
-    DEFAULT_LOOP_HEADER_HEIGHT_PX: ()=>DEFAULT_LOOP_HEADER_HEIGHT_PX,
     DEFAULT_LOOP_SHELL_BACKGROUND: ()=>DEFAULT_LOOP_SHELL_BACKGROUND
 });
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
@@ -47,6 +50,9 @@ const DEFAULT_LOOP_MIN_WIDTH = 12 * external_constants_cjs_namespaceObject.GRID_
 const DEFAULT_LOOP_MIN_HEIGHT = 12 * external_constants_cjs_namespaceObject.GRID_SPACING;
 const LOOP_SHELL_RADIUS_PX = 20;
 const LOOP_FRAME_INSET_PX = 12;
+const LOOP_BODY_PADDING_PX = 2 * external_constants_cjs_namespaceObject.GRID_SPACING;
+const LOOP_INNER_HANDLE_RAIL_WIDTH_PX = 5 * external_constants_cjs_namespaceObject.GRID_SPACING;
+const LOOP_CHILD_SAFE_GAP_PX = external_constants_cjs_namespaceObject.GRID_SPACING;
 const DEFAULT_LOOP_SHELL_BACKGROUND = 'var(--canvas-background)';
 const DEFAULT_LOOP_FRAME_BACKGROUND = 'var(--canvas-background)';
 const DEFAULT_LOOP_FRAME_BORDER = 'var(--canvas-border)';
@@ -60,7 +66,10 @@ exports.DEFAULT_LOOP_MIN_WIDTH = __webpack_exports__.DEFAULT_LOOP_MIN_WIDTH;
 exports.DEFAULT_LOOP_SHELL_BACKGROUND = __webpack_exports__.DEFAULT_LOOP_SHELL_BACKGROUND;
 exports.DEFAULT_LOOP_TITLE = __webpack_exports__.DEFAULT_LOOP_TITLE;
 exports.DEFAULT_LOOP_WIDTH = __webpack_exports__.DEFAULT_LOOP_WIDTH;
+exports.LOOP_BODY_PADDING_PX = __webpack_exports__.LOOP_BODY_PADDING_PX;
+exports.LOOP_CHILD_SAFE_GAP_PX = __webpack_exports__.LOOP_CHILD_SAFE_GAP_PX;
 exports.LOOP_FRAME_INSET_PX = __webpack_exports__.LOOP_FRAME_INSET_PX;
+exports.LOOP_INNER_HANDLE_RAIL_WIDTH_PX = __webpack_exports__.LOOP_INNER_HANDLE_RAIL_WIDTH_PX;
 exports.LOOP_SHELL_RADIUS_PX = __webpack_exports__.LOOP_SHELL_RADIUS_PX;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "DEFAULT_LOOP_FRAME_BACKGROUND",
@@ -73,7 +82,10 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "DEFAULT_LOOP_SHELL_BACKGROUND",
     "DEFAULT_LOOP_TITLE",
     "DEFAULT_LOOP_WIDTH",
+    "LOOP_BODY_PADDING_PX",
+    "LOOP_CHILD_SAFE_GAP_PX",
     "LOOP_FRAME_INSET_PX",
+    "LOOP_INNER_HANDLE_RAIL_WIDTH_PX",
     "LOOP_SHELL_RADIUS_PX"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {

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

@@ -7,6 +7,9 @@ export declare const DEFAULT_LOOP_MIN_WIDTH: number;
 export declare const DEFAULT_LOOP_MIN_HEIGHT: number;
 export declare const LOOP_SHELL_RADIUS_PX = 20;
 export declare const LOOP_FRAME_INSET_PX = 12;
+export declare const LOOP_BODY_PADDING_PX: number;
+export declare const LOOP_INNER_HANDLE_RAIL_WIDTH_PX: number;
+export declare const LOOP_CHILD_SAFE_GAP_PX = 16;
 export declare const DEFAULT_LOOP_SHELL_BACKGROUND = "var(--canvas-background)";
 export declare const DEFAULT_LOOP_FRAME_BACKGROUND = "var(--canvas-background)";
 export declare const DEFAULT_LOOP_FRAME_BORDER = "var(--canvas-border)";

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

@@ -1 +1 @@
-{"version":3,"file":"LoopNode.constants.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNode.constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,WAAW,CAAC;AAC1C,eAAO,MAAM,kBAAkB,SAAS,CAAC;AACzC,eAAO,MAAM,6BAA6B,KAAK,CAAC;AAGhD,eAAO,MAAM,kBAAkB,QAAoB,CAAC;AACpD,eAAO,MAAM,mBAAmB,QAAoB,CAAC;AAErD,eAAO,MAAM,sBAAsB,QAAoB,CAAC;AACxD,eAAO,MAAM,uBAAuB,QAAoB,CAAC;AACzD,eAAO,MAAM,oBAAoB,KAAK,CAAC;AACvC,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC,eAAO,MAAM,6BAA6B,6BAA6B,CAAC;AACxE,eAAO,MAAM,6BAA6B,6BAA6B,CAAC;AACxE,eAAO,MAAM,yBAAyB,yBAAyB,CAAC"}
+{"version":3,"file":"LoopNode.constants.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNode.constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,WAAW,CAAC;AAC1C,eAAO,MAAM,kBAAkB,SAAS,CAAC;AACzC,eAAO,MAAM,6BAA6B,KAAK,CAAC;AAGhD,eAAO,MAAM,kBAAkB,QAAoB,CAAC;AACpD,eAAO,MAAM,mBAAmB,QAAoB,CAAC;AAErD,eAAO,MAAM,sBAAsB,QAAoB,CAAC;AACxD,eAAO,MAAM,uBAAuB,QAAoB,CAAC;AACzD,eAAO,MAAM,oBAAoB,KAAK,CAAC;AACvC,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,oBAAoB,QAAmB,CAAC;AACrD,eAAO,MAAM,+BAA+B,QAAmB,CAAC;AAChE,eAAO,MAAM,sBAAsB,KAAe,CAAC;AAEnD,eAAO,MAAM,6BAA6B,6BAA6B,CAAC;AACxE,eAAO,MAAM,6BAA6B,6BAA6B,CAAC;AACxE,eAAO,MAAM,yBAAyB,yBAAyB,CAAC"}

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

@@ -8,7 +8,10 @@ const DEFAULT_LOOP_MIN_WIDTH = 12 * GRID_SPACING;
 const DEFAULT_LOOP_MIN_HEIGHT = 12 * GRID_SPACING;
 const LOOP_SHELL_RADIUS_PX = 20;
 const LOOP_FRAME_INSET_PX = 12;
+const LOOP_BODY_PADDING_PX = 2 * GRID_SPACING;
+const LOOP_INNER_HANDLE_RAIL_WIDTH_PX = 5 * GRID_SPACING;
+const LOOP_CHILD_SAFE_GAP_PX = GRID_SPACING;
 const DEFAULT_LOOP_SHELL_BACKGROUND = 'var(--canvas-background)';
 const DEFAULT_LOOP_FRAME_BACKGROUND = 'var(--canvas-background)';
 const DEFAULT_LOOP_FRAME_BORDER = 'var(--canvas-border)';
-export { DEFAULT_LOOP_FRAME_BACKGROUND, DEFAULT_LOOP_FRAME_BORDER, DEFAULT_LOOP_HEADER_HEIGHT_PX, DEFAULT_LOOP_HEIGHT, DEFAULT_LOOP_ICON, DEFAULT_LOOP_MIN_HEIGHT, DEFAULT_LOOP_MIN_WIDTH, DEFAULT_LOOP_SHELL_BACKGROUND, DEFAULT_LOOP_TITLE, DEFAULT_LOOP_WIDTH, LOOP_FRAME_INSET_PX, LOOP_SHELL_RADIUS_PX };
+export { DEFAULT_LOOP_FRAME_BACKGROUND, DEFAULT_LOOP_FRAME_BORDER, DEFAULT_LOOP_HEADER_HEIGHT_PX, DEFAULT_LOOP_HEIGHT, DEFAULT_LOOP_ICON, DEFAULT_LOOP_MIN_HEIGHT, DEFAULT_LOOP_MIN_WIDTH, DEFAULT_LOOP_SHELL_BACKGROUND, DEFAULT_LOOP_TITLE, DEFAULT_LOOP_WIDTH, LOOP_BODY_PADDING_PX, LOOP_CHILD_SAFE_GAP_PX, LOOP_FRAME_INSET_PX, LOOP_INNER_HANDLE_RAIL_WIDTH_PX, LOOP_SHELL_RADIUS_PX };