@particle-academy/fancy-flow 0.3.1 → 0.4.0

package/dist/runtime.cjs

@@ -3183,10 +3183,10 @@ function zoom_default2() {
 
 // node_modules/@xyflow/system/dist/esm/index.js
 var errorMessages = {
-  error001: () => "[React Flow]: Seems like you have not used zustand provider as an ancestor. Help: https://reactflow.dev/error#001",
+  error001: (lib = "react") => `Seems like you have not used zustand provider as an ancestor. Help: https://${lib}flow.dev/error#001`,
   error002: () => "It looks like you've created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them.",
   error003: (nodeType) => `Node type "${nodeType}" not found. Using fallback type "default".`,
-  error004: () => "The React Flow parent container needs a width and a height to render the graph.",
+  error004: () => "The parent container needs a width and a height to render the graph.",
   error005: () => "Only child nodes can use a parent extent.",
   error006: () => "Can't create edge. An edge needs a source and a target.",
   error007: (id2) => `The old edge with id=${id2} does not exist.`,
@@ -3197,7 +3197,8 @@ var errorMessages = {
   error012: (id2) => `Node with id "${id2}" does not exist, it may have been removed. This can happen when a node is deleted before the "onNodeClick" handler is called.`,
   error013: (lib = "react") => `It seems that you haven't loaded the styles. Please import '@xyflow/${lib}/dist/style.css' or base.css to make sure everything is working properly.`,
   error014: () => "useNodeConnections: No node ID found. Call useNodeConnections inside a custom Node or provide a node ID.",
-  error015: () => "It seems that you are trying to drag a node that is not initialized. Please use onNodesChange as explained in the docs."
+  error015: () => "It seems that you are trying to drag a node that is not initialized. Please use onNodesChange as explained in the docs.",
+  error016: (id2) => `Edge with id "${id2}" does not exist, it may have been removed. This can happen when an edge is deleted before the "onEdgeClick" handler is called.`
 };
 var infiniteExtent = [
   [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
@@ -3365,7 +3366,7 @@ function getFitViewNodes(nodeLookup, options) {
 }
 async function fitViewport({ nodes, width, height, panZoom, minZoom, maxZoom }, options) {
   if (nodes.size === 0) {
-    return Promise.resolve(true);
+    return true;
   }
   const nodesToFit = getFitViewNodes(nodes, options);
   const bounds = getInternalNodesBounds(nodesToFit);
@@ -3375,7 +3376,7 @@ async function fitViewport({ nodes, width, height, panZoom, minZoom, maxZoom },
     ease: options?.ease,
     interpolate: options?.interpolate
   });
-  return Promise.resolve(true);
+  return true;
 }
 function calculateNodePosition({ nodeId, nextPosition, nodeLookup, nodeOrigin = [0, 0], nodeExtent, onError }) {
   const node = nodeLookup.get(nodeId);
@@ -3522,9 +3523,9 @@ var getOverlappingArea = (rectA, rectB) => {
 };
 var isRectObject = (obj) => isNumeric(obj.width) && isNumeric(obj.height) && isNumeric(obj.x) && isNumeric(obj.y);
 var isNumeric = (n) => !isNaN(n) && isFinite(n);
-var devWarn = (id2, message) => {
+var createDevWarn = (lib, helpUrl) => (id2, message) => {
   if (process.env.NODE_ENV === "development") {
-    console.warn(`[React Flow]: ${message} Help: https://reactflow.dev/error#${id2}`);
+    console.warn(`[${lib}]: ${message} Help: ${helpUrl}error#${id2}`);
   }
 };
 var snapPosition = (position, snapGrid = [1, 1]) => {
@@ -3562,7 +3563,7 @@ function parsePadding(padding, viewport) {
       return Math.floor(viewport * paddingValue * 0.01);
     }
   }
-  console.error(`[React Flow] The padding value "${padding}" is invalid. Please provide a number or a string with a valid unit (px or %).`);
+  console.error(`The padding value "${padding}" is invalid. Please provide a number or a string with a valid unit (px or %).`);
   return 0;
 }
 function parsePaddings(padding, width, height) {
@@ -3816,7 +3817,7 @@ var connectionExists = (edge, edges) => {
 };
 var addEdge = (edgeParams, edges, options = {}) => {
   if (!edgeParams.source || !edgeParams.target) {
-    devWarn("006", errorMessages["error006"]());
+    options.onError?.("006", errorMessages["error006"]());
     return edges;
   }
   const edgeIdGenerator = options.getEdgeId || getEdgeId;
@@ -4412,7 +4413,7 @@ function updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOri
 }
 async function panBy({ delta, panZoom, transform: transform2, translateExtent, width, height }) {
   if (!panZoom || !delta.x && !delta.y) {
-    return Promise.resolve(false);
+    return false;
   }
   const nextViewport = await panZoom.setViewportConstrained({
     x: transform2[0] + delta.x,
@@ -4423,7 +4424,7 @@ async function panBy({ delta, panZoom, transform: transform2, translateExtent, w
     [width, height]
   ], translateExtent);
   const transformChanged = !!nextViewport && (nextViewport.x !== transform2[0] || nextViewport.y !== transform2[1] || nextViewport.k !== transform2[2]);
-  return Promise.resolve(transformChanged);
+  return transformChanged;
 }
 function addConnectionToLookup(type, connection, connectionKey, connectionLookup, nodeId, handleId) {
   let key = nodeId;
@@ -4713,6 +4714,9 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
       }
     }).on("end", (event) => {
       if (!dragStarted || abortDrag) {
+        if (abortDrag && dragItems.size > 0) {
+          getStoreItems().updateNodePositions(dragItems, false);
+        }
         return;
       }
       autoPanStarted = false;
@@ -5254,7 +5258,7 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
   const zoomPanValues = {
     isZoomingOrPanning: false,
     usedRightMouseButton: false,
-    prevViewport: { },
+    prevViewport: {},
     mouseButton: 0,
     timerId: void 0,
     panScrollTimeout: void 0,
@@ -5274,13 +5278,13 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
   const d3ZoomHandler = d3Selection.on("wheel.zoom");
   const d3DblClickZoomHandler = d3Selection.on("dblclick.zoom");
   d3ZoomInstance.wheelDelta(wheelDelta);
-  function setTransform(transform2, options) {
+  async function setTransform(transform2, options) {
     if (d3Selection) {
       return new Promise((resolve) => {
         d3ZoomInstance?.interpolate(options?.interpolate === "linear" ? value_default : zoom_default).transform(getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)), transform2);
       });
     }
-    return Promise.resolve(false);
+    return false;
   }
   function update({ noWheelClassName, noPanClassName, onPaneContextMenu, userSelectionActive, panOnScroll, panOnDrag, panOnScrollMode, panOnScrollSpeed, preventScrolling, zoomOnPinch, zoomOnScroll, zoomOnDoubleClick, zoomActivationKeyPressed, lib, onTransformChange, connectionInProgress, paneClickDistance, selectionOnDrag }) {
     if (userSelectionActive && !zoomPanValues.isZoomingOrPanning) {
@@ -5305,31 +5309,29 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
       d3ZoomHandler
     });
     d3Selection.on("wheel.zoom", wheelHandler, { passive: false });
-    if (!userSelectionActive) {
-      const startHandler = createPanZoomStartHandler({
-        zoomPanValues,
-        onDraggingChange,
-        onPanZoomStart
-      });
-      d3ZoomInstance.on("start", startHandler);
-      const panZoomHandler = createPanZoomHandler({
-        zoomPanValues,
-        panOnDrag,
-        onPaneContextMenu: !!onPaneContextMenu,
-        onPanZoom,
-        onTransformChange
-      });
-      d3ZoomInstance.on("zoom", panZoomHandler);
-      const panZoomEndHandler = createPanZoomEndHandler({
-        zoomPanValues,
-        panOnDrag,
-        panOnScroll,
-        onPaneContextMenu,
-        onPanZoomEnd,
-        onDraggingChange
-      });
-      d3ZoomInstance.on("end", panZoomEndHandler);
-    }
+    const startHandler = createPanZoomStartHandler({
+      zoomPanValues,
+      onDraggingChange,
+      onPanZoomStart
+    });
+    d3ZoomInstance.on("start", startHandler);
+    const panZoomHandler = createPanZoomHandler({
+      zoomPanValues,
+      panOnDrag,
+      onPaneContextMenu: !!onPaneContextMenu,
+      onPanZoom,
+      onTransformChange
+    });
+    d3ZoomInstance.on("zoom", panZoomHandler);
+    const panZoomEndHandler = createPanZoomEndHandler({
+      zoomPanValues,
+      panOnDrag,
+      panOnScroll,
+      onPaneContextMenu,
+      onPanZoomEnd,
+      onDraggingChange
+    });
+    d3ZoomInstance.on("end", panZoomEndHandler);
     const filter2 = createFilter({
       zoomActivationKeyPressed,
       panOnDrag,
@@ -5359,12 +5361,12 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
     if (contrainedTransform) {
       await setTransform(contrainedTransform);
     }
-    return new Promise((resolve) => resolve(contrainedTransform));
+    return contrainedTransform;
   }
   async function setViewport(viewport2, options) {
     const nextTransform = viewportToTransform(viewport2);
     await setTransform(nextTransform, options);
-    return new Promise((resolve) => resolve(nextTransform));
+    return nextTransform;
   }
   function syncViewport(viewport2) {
     if (d3Selection) {
@@ -5379,21 +5381,21 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
     const transform2 = d3Selection ? transform(d3Selection.node()) : { x: 0, y: 0, k: 1 };
     return { x: transform2.x, y: transform2.y, zoom: transform2.k };
   }
-  function scaleTo(zoom, options) {
+  async function scaleTo(zoom, options) {
     if (d3Selection) {
       return new Promise((resolve) => {
         d3ZoomInstance?.interpolate(options?.interpolate === "linear" ? value_default : zoom_default).scaleTo(getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)), zoom);
       });
     }
-    return Promise.resolve(false);
+    return false;
   }
-  function scaleBy(factor, options) {
+  async function scaleBy(factor, options) {
     if (d3Selection) {
       return new Promise((resolve) => {
         d3ZoomInstance?.interpolate(options?.interpolate === "linear" ? value_default : zoom_default).scaleBy(getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)), factor);
       });
     }
-    return Promise.resolve(false);
+    return false;
   }
   function setScaleExtent(scaleExtent) {
     d3ZoomInstance?.scaleExtent(scaleExtent);
@@ -5588,12 +5590,6 @@ var initStartValues = {
   pointerY: 0,
   aspectRatio: 1
 };
-function nodeToParentExtent(node) {
-  return [
-    [0, 0],
-    [node.measured.width, node.measured.height]
-  ];
-}
 function nodeToChildExtent(child, parent, nodeOrigin) {
   const x = parent.position.x + child.position.x;
   const y = parent.position.y + child.position.y;
@@ -5632,7 +5628,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
     let containerBounds = null;
     let childNodes = [];
     let parentNode = void 0;
-    let parentExtent = void 0;
+    let nodeExtent = void 0;
     let childExtent = void 0;
     let resizeDetected = false;
     const dragHandler = drag_default().on("start", (event) => {
@@ -5661,9 +5657,15 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
         aspectRatio: prevValues.width / prevValues.height
       };
       parentNode = void 0;
+      nodeExtent = isCoordinateExtent(node.extent) ? node.extent : void 0;
       if (node.parentId && (node.extent === "parent" || node.expandParent)) {
         parentNode = nodeLookup.get(node.parentId);
-        parentExtent = parentNode && node.extent === "parent" ? nodeToParentExtent(parentNode) : void 0;
+      }
+      if (parentNode && node.extent === "parent") {
+        nodeExtent = [
+          [0, 0],
+          [parentNode.measured.width, parentNode.measured.height]
+        ];
       }
       childNodes = [];
       childExtent = void 0;
@@ -5703,7 +5705,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
       const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
       const change = {};
       const nodeOrigin = node.origin ?? storeNodeOrigin;
-      const { width, height, x, y } = getDimensionsAfterResize(startValues, params.controlDirection, pointerPosition, params.boundaries, params.keepAspectRatio, nodeOrigin, parentExtent, childExtent);
+      const { width, height, x, y } = getDimensionsAfterResize(startValues, params.controlDirection, pointerPosition, params.boundaries, params.keepAspectRatio, nodeOrigin, nodeExtent, childExtent);
       const isWidthChange = width !== prevWidth;
       const isHeightChange = height !== prevHeight;
       const isXPosChange = x !== prevX && isWidthChange;
@@ -5931,7 +5933,7 @@ function shallow$1(objA, objB) {
 }
 var StoreContext = ReactExports.createContext(null);
 var Provider$1 = StoreContext.Provider;
-var zustandErrorMessage = errorMessages["error001"]();
+var zustandErrorMessage = errorMessages["error001"]("react");
 function useStore(selector, equalityFn) {
   const store = ReactExports.useContext(StoreContext);
   if (store === null) {
@@ -6023,7 +6025,6 @@ function SelectionListener({ onSelectionChange }) {
   }
   return null;
 }
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? ReactExports.useLayoutEffect : ReactExports.useEffect;
 var defaultNodeOrigin = [0, 0];
 var defaultViewport = { x: 0, y: 0, zoom: 1 };
 var reactFlowFieldsToTrack = [
@@ -6114,7 +6115,7 @@ var initPrevValues2 = {
 function StoreUpdater(props) {
   const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges } = useStore(selector$l, shallow$1);
   const store = useStoreApi();
-  useIsomorphicLayoutEffect(() => {
+  ReactExports.useEffect(() => {
     setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges);
     return () => {
       previousFields.current = initPrevValues2;
@@ -6122,7 +6123,7 @@ function StoreUpdater(props) {
     };
   }, []);
   const previousFields = ReactExports.useRef(initPrevValues2);
-  useIsomorphicLayoutEffect(
+  ReactExports.useEffect(
     () => {
       for (const fieldName of fieldsToTrack) {
         const fieldValue = props[fieldName];
@@ -6258,30 +6259,30 @@ var useViewportHelper = () => {
   const store = useStoreApi();
   return ReactExports.useMemo(() => {
     return {
-      zoomIn: (options) => {
+      zoomIn: async (options) => {
         const { panZoom } = store.getState();
-        return panZoom ? panZoom.scaleBy(1.2, options) : Promise.resolve(false);
+        return panZoom ? panZoom.scaleBy(1.2, options) : false;
       },
-      zoomOut: (options) => {
+      zoomOut: async (options) => {
         const { panZoom } = store.getState();
-        return panZoom ? panZoom.scaleBy(1 / 1.2, options) : Promise.resolve(false);
+        return panZoom ? panZoom.scaleBy(1 / 1.2, options) : false;
       },
-      zoomTo: (zoomLevel, options) => {
+      zoomTo: async (zoomLevel, options) => {
         const { panZoom } = store.getState();
-        return panZoom ? panZoom.scaleTo(zoomLevel, options) : Promise.resolve(false);
+        return panZoom ? panZoom.scaleTo(zoomLevel, options) : false;
       },
       getZoom: () => store.getState().transform[2],
       setViewport: async (viewport, options) => {
         const { transform: [tX, tY, tZoom], panZoom } = store.getState();
         if (!panZoom) {
-          return Promise.resolve(false);
+          return false;
         }
         await panZoom.setViewport({
           x: viewport.x ?? tX,
           y: viewport.y ?? tY,
           zoom: viewport.zoom ?? tZoom
         }, options);
-        return Promise.resolve(true);
+        return true;
       },
       getViewport: () => {
         const [x, y, zoom] = store.getState().transform;
@@ -6294,14 +6295,14 @@ var useViewportHelper = () => {
         const { width, height, minZoom, maxZoom, panZoom } = store.getState();
         const viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
         if (!panZoom) {
-          return Promise.resolve(false);
+          return false;
         }
         await panZoom.setViewport(viewport, {
           duration: options?.duration,
           ease: options?.ease,
           interpolate: options?.interpolate
         });
-        return Promise.resolve(true);
+        return true;
       },
       screenToFlowPosition: (clientPosition, options = {}) => {
         const { transform: transform2, snapGrid, snapToGrid, domNode } = store.getState();
@@ -6470,11 +6471,19 @@ function elementToRemoveChange(item) {
     type: "remove"
   };
 }
+var defaultOnError = createDevWarn("React Flow", "https://reactflow.dev/");
+function addEdge2(edgeParams, edges, options = {}) {
+  return addEdge(edgeParams, edges, {
+    ...options,
+    onError: options.onError ?? defaultOnError
+  });
+}
 var isNode = (element) => isNodeBase(element);
 var isEdge = (element) => isEdgeBase(element);
 function fixedForwardRef(render) {
   return ReactExports.forwardRef(render);
 }
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? ReactExports.useLayoutEffect : ReactExports.useEffect;
 function useQueue(runQueue) {
   const [serial, setSerial] = ReactExports.useState(BigInt(0));
   const [queue] = ReactExports.useState(() => createQueue(() => setSerial((n) => n + BigInt(1))));
@@ -6905,17 +6914,22 @@ var selector$h = (s) => ({
   userSelectionActive: s.userSelectionActive,
   elementsSelectable: s.elementsSelectable,
   connectionInProgress: s.connection.inProgress,
-  dragging: s.paneDragging
+  dragging: s.paneDragging,
+  panBy: s.panBy,
+  autoPanSpeed: s.autoPanSpeed
 });
-function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, paneClickDistance, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children: children2 }) {
+function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, autoPanOnSelection, paneClickDistance, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children: children2 }) {
+  const autoPanId = ReactExports.useRef(0);
   const store = useStoreApi();
-  const { userSelectionActive, elementsSelectable, dragging, connectionInProgress } = useStore(selector$h, shallow$1);
+  const { userSelectionActive, elementsSelectable, dragging, connectionInProgress, panBy: panBy2, autoPanSpeed } = useStore(selector$h, shallow$1);
   const isSelectionEnabled = elementsSelectable && (isSelecting || userSelectionActive);
   const container = ReactExports.useRef(null);
   const containerBounds = ReactExports.useRef();
   const selectedNodeIds = ReactExports.useRef(/* @__PURE__ */ new Set());
   const selectedEdgeIds = ReactExports.useRef(/* @__PURE__ */ new Set());
   const selectionInProgress = ReactExports.useRef(false);
+  const position = ReactExports.useRef({ x: 0, y: 0 });
+  const autoPanStarted = ReactExports.useRef(false);
   const onClick = (event) => {
     if (selectionInProgress.current || connectionInProgress) {
       selectionInProgress.current = false;
@@ -6940,7 +6954,7 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
     }
   };
   const onPointerDownCapture = (event) => {
-    const { domNode } = store.getState();
+    const { domNode, transform: transform2 } = store.getState();
     containerBounds.current = domNode?.getBoundingClientRect();
     if (!containerBounds.current)
       return;
@@ -6953,12 +6967,13 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
     event.target?.setPointerCapture?.(event.pointerId);
     selectionInProgress.current = false;
     const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
+    const userSelectionStartPosition = pointToRendererPoint({ x, y }, transform2);
     store.setState({
       userSelectionRect: {
         width: 0,
         height: 0,
-        startX: x,
-        startY: y,
+        startX: userSelectionStartPosition.x,
+        startY: userSelectionStartPosition.y,
         x,
         y
       }
@@ -6968,30 +6983,21 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
       event.preventDefault();
     }
   };
-  const onPointerMove = (event) => {
-    const { userSelectionRect, transform: transform2, nodeLookup, edgeLookup, connectionLookup, triggerNodeChanges, triggerEdgeChanges, defaultEdgeOptions, resetSelectedElements } = store.getState();
-    if (!containerBounds.current || !userSelectionRect) {
+  function commitUserSelectionRect(mouseX, mouseY) {
+    const { userSelectionRect } = store.getState();
+    if (!userSelectionRect) {
       return;
     }
-    const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current);
-    const { startX, startY } = userSelectionRect;
-    if (!selectionInProgress.current) {
-      const requiredDistance = selectionKeyPressed ? 0 : paneClickDistance;
-      const distance2 = Math.hypot(mouseX - startX, mouseY - startY);
-      if (distance2 <= requiredDistance) {
-        return;
-      }
-      resetSelectedElements();
-      onSelectionStart?.(event);
-    }
-    selectionInProgress.current = true;
+    const { transform: transform2, nodeLookup, edgeLookup, connectionLookup, triggerNodeChanges, triggerEdgeChanges, defaultEdgeOptions } = store.getState();
+    const userStartPosition = { x: userSelectionRect.startX, y: userSelectionRect.startY };
+    const { x: screenStartX, y: screenStartY } = rendererPointToPoint(userStartPosition, transform2);
     const nextUserSelectRect = {
-      startX,
-      startY,
-      x: mouseX < startX ? mouseX : startX,
-      y: mouseY < startY ? mouseY : startY,
-      width: Math.abs(mouseX - startX),
-      height: Math.abs(mouseY - startY)
+      startX: userStartPosition.x,
+      startY: userStartPosition.y,
+      x: mouseX < screenStartX ? mouseX : screenStartX,
+      y: mouseY < screenStartY ? mouseY : screenStartY,
+      width: Math.abs(mouseX - screenStartX),
+      height: Math.abs(mouseY - screenStartY)
     };
     const prevSelectedNodeIds = selectedNodeIds.current;
     const prevSelectedEdgeIds = selectedEdgeIds.current;
@@ -7022,6 +7028,53 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
       userSelectionActive: true,
       nodesSelectionActive: false
     });
+  }
+  function autoPan() {
+    if (!autoPanOnSelection || !containerBounds.current) {
+      return;
+    }
+    const [x, y] = calcAutoPan(position.current, containerBounds.current, autoPanSpeed);
+    panBy2({ x, y }).then((panned) => {
+      if (!selectionInProgress.current || !panned) {
+        autoPanId.current = requestAnimationFrame(autoPan);
+        return;
+      }
+      const { x: mx, y: my } = position.current;
+      commitUserSelectionRect(mx, my);
+      autoPanId.current = requestAnimationFrame(autoPan);
+    });
+  }
+  const cleanupAutoPan = () => {
+    cancelAnimationFrame(autoPanId.current);
+    autoPanId.current = 0;
+    autoPanStarted.current = false;
+  };
+  ReactExports.useEffect(() => {
+    return () => cleanupAutoPan();
+  }, []);
+  const onPointerMove = (event) => {
+    const { userSelectionRect, transform: transform2, resetSelectedElements } = store.getState();
+    if (!containerBounds.current || !userSelectionRect) {
+      return;
+    }
+    const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current);
+    position.current = { x: mouseX, y: mouseY };
+    const screenStart = rendererPointToPoint({ x: userSelectionRect.startX, y: userSelectionRect.startY }, transform2);
+    if (!selectionInProgress.current) {
+      const requiredDistance = selectionKeyPressed ? 0 : paneClickDistance;
+      const distance2 = Math.hypot(mouseX - screenStart.x, mouseY - screenStart.y);
+      if (distance2 <= requiredDistance) {
+        return;
+      }
+      resetSelectedElements();
+      onSelectionStart?.(event);
+    }
+    selectionInProgress.current = true;
+    if (!autoPanStarted.current) {
+      autoPan();
+      autoPanStarted.current = true;
+    }
+    commitUserSelectionRect(mouseX, mouseY);
   };
   const onPointerUp = (event) => {
     if (event.button !== 0) {
@@ -7041,9 +7094,14 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
         nodesSelectionActive: selectedNodeIds.current.size > 0
       });
     }
+    cleanupAutoPan();
+  };
+  const onPointerCancel = (event) => {
+    event.target?.releasePointerCapture?.(event.pointerId);
+    cleanupAutoPan();
   };
   const draggable = panOnDrag === true || Array.isArray(panOnDrag) && panOnDrag.includes(0);
-  return jsxRuntime.jsxs("div", { className: cc(["react-flow__pane", { draggable, dragging, selection: isSelecting }]), onClick: isSelectionEnabled ? void 0 : wrapHandler(onClick, container), onContextMenu: wrapHandler(onContextMenu, container), onWheel: wrapHandler(onWheel, container), onPointerEnter: isSelectionEnabled ? void 0 : onPaneMouseEnter, onPointerMove: isSelectionEnabled ? onPointerMove : onPaneMouseMove, onPointerUp: isSelectionEnabled ? onPointerUp : void 0, onPointerDownCapture: isSelectionEnabled ? onPointerDownCapture : void 0, onClickCapture: isSelectionEnabled ? onClickCapture : void 0, onPointerLeave: onPaneMouseLeave, ref: container, style: containerStyle, children: [children2, jsxRuntime.jsx(UserSelection, {})] });
+  return jsxRuntime.jsxs("div", { className: cc(["react-flow__pane", { draggable, dragging, selection: isSelecting }]), onClick: isSelectionEnabled ? void 0 : wrapHandler(onClick, container), onContextMenu: wrapHandler(onContextMenu, container), onWheel: wrapHandler(onWheel, container), onPointerEnter: isSelectionEnabled ? void 0 : onPaneMouseEnter, onPointerMove: isSelectionEnabled ? onPointerMove : onPaneMouseMove, onPointerUp: isSelectionEnabled ? onPointerUp : void 0, onPointerCancel: isSelectionEnabled ? onPointerCancel : void 0, onPointerDownCapture: isSelectionEnabled ? onPointerDownCapture : void 0, onClickCapture: isSelectionEnabled ? onClickCapture : void 0, onPointerLeave: onPaneMouseLeave, ref: container, style: containerStyle, children: [children2, jsxRuntime.jsx(UserSelection, {})] });
 }
 function handleNodeClick({ id: id2, store, unselect = false, nodeRef }) {
   const { addSelectedNodes, unselectNodesAndEdges, multiSelectionActive, nodeLookup, onError } = store.getState();
@@ -7181,8 +7239,8 @@ function HandleComponent({ type = "source", position = Position.Top, isValidConn
       ...params
     };
     if (hasDefaultEdges) {
-      const { edges, setEdges } = store.getState();
-      setEdges(addEdge(edgeParams, edges));
+      const { edges, setEdges, onError } = store.getState();
+      setEdges(addEdge2(edgeParams, edges, { onError }));
     }
     onConnectAction?.(edgeParams);
     onConnect?.(edgeParams);
@@ -7378,7 +7436,7 @@ var win = typeof window !== "undefined" ? window : void 0;
 var selector$e = (s) => {
   return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive };
 };
-function FlowRendererComponent({ children: children2, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, paneClickDistance, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport }) {
+function FlowRendererComponent({ children: children2, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, paneClickDistance, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, autoPanOnSelection, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport }) {
   const { nodesSelectionActive, userSelectionActive } = useStore(selector$e, shallow$1);
   const selectionKeyPressed = useKeyPress(selectionKeyCode, { target: win });
   const panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: win });
@@ -7387,7 +7445,7 @@ function FlowRendererComponent({ children: children2, onPaneClick, onPaneMouseEn
   const _selectionOnDrag = selectionOnDrag && panOnDrag !== true;
   const isSelecting = selectionKeyPressed || userSelectionActive || _selectionOnDrag;
   useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode });
-  return jsxRuntime.jsx(ZoomPane, { onPaneContextMenu, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: !selectionKeyPressed && panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance, selectionOnDrag: _selectionOnDrag, children: jsxRuntime.jsxs(Pane, { onSelectionStart, onSelectionEnd, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, panOnDrag, isSelecting: !!isSelecting, selectionMode, selectionKeyPressed, paneClickDistance, selectionOnDrag: _selectionOnDrag, children: [children2, nodesSelectionActive && jsxRuntime.jsx(NodesSelection, { onSelectionContextMenu, noPanClassName, disableKeyboardA11y })] }) });
+  return jsxRuntime.jsx(ZoomPane, { onPaneContextMenu, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: !selectionKeyPressed && panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance, selectionOnDrag: _selectionOnDrag, children: jsxRuntime.jsxs(Pane, { onSelectionStart, onSelectionEnd, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, panOnDrag, autoPanOnSelection, isSelecting: !!isSelecting, selectionMode, selectionKeyPressed, paneClickDistance, selectionOnDrag: _selectionOnDrag, children: [children2, nodesSelectionActive && jsxRuntime.jsx(NodesSelection, { onSelectionContextMenu, noPanClassName, disableKeyboardA11y })] }) });
 }
 FlowRendererComponent.displayName = "FlowRenderer";
 var FlowRenderer = ReactExports.memo(FlowRendererComponent);
@@ -8192,16 +8250,17 @@ function useStylesLoadedWarning() {
     }
   }, []);
 }
-function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, nodeClickDistance, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeExtent, rfId, viewport, onViewportChange }) {
+function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, autoPanOnSelection, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, nodeClickDistance, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeExtent, rfId, viewport, onViewportChange }) {
   useNodeOrEdgeTypesWarning(nodeTypes);
   useNodeOrEdgeTypesWarning(edgeTypes);
   useStylesLoadedWarning();
   useOnInitHandler(onInit);
   useViewportSync(viewport);
-  return jsxRuntime.jsx(FlowRenderer, { onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, paneClickDistance, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, onSelectionContextMenu, preventScrolling, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport: !!viewport, children: jsxRuntime.jsxs(Viewport, { children: [jsxRuntime.jsx(EdgeRenderer, { edgeTypes, onEdgeClick, onEdgeDoubleClick, onReconnect, onReconnectStart, onReconnectEnd, onlyRenderVisibleElements, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noPanClassName, disableKeyboardA11y, rfId }), jsxRuntime.jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsxRuntime.jsx("div", { className: "react-flow__edgelabel-renderer" }), jsxRuntime.jsx(NodeRenderer, { nodeTypes, onNodeClick, onNodeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, nodeClickDistance, onlyRenderVisibleElements, noPanClassName, noDragClassName, disableKeyboardA11y, nodeExtent, rfId }), jsxRuntime.jsx("div", { className: "react-flow__viewport-portal" })] }) });
+  return jsxRuntime.jsx(FlowRenderer, { onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, paneClickDistance, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, autoPanOnSelection, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, onSelectionContextMenu, preventScrolling, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport: !!viewport, children: jsxRuntime.jsxs(Viewport, { children: [jsxRuntime.jsx(EdgeRenderer, { edgeTypes, onEdgeClick, onEdgeDoubleClick, onReconnect, onReconnectStart, onReconnectEnd, onlyRenderVisibleElements, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noPanClassName, disableKeyboardA11y, rfId }), jsxRuntime.jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsxRuntime.jsx("div", { className: "react-flow__edgelabel-renderer" }), jsxRuntime.jsx(NodeRenderer, { nodeTypes, onNodeClick, onNodeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, nodeClickDistance, onlyRenderVisibleElements, noPanClassName, noDragClassName, disableKeyboardA11y, nodeExtent, rfId }), jsxRuntime.jsx("div", { className: "react-flow__viewport-portal" })] }) });
 }
 GraphViewComponent.displayName = "GraphView";
 var GraphView = ReactExports.memo(GraphViewComponent);
+var devWarn = createDevWarn("React Flow", "https://reactflow.dev/");
 var getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom = 0.5, maxZoom = 2, nodeOrigin, nodeExtent, zIndexMode = "basic" } = {}) => {
   const nodeLookup = /* @__PURE__ */ new Map();
   const parentLookup = /* @__PURE__ */ new Map();
@@ -8548,7 +8607,7 @@ var createStore2 = ({ nodes, edges, defaultNodes, defaultEdges, width, height, f
     setCenter: async (x, y, options) => {
       const { width: width2, height: height2, maxZoom: maxZoom2, panZoom } = get3();
       if (!panZoom) {
-        return Promise.resolve(false);
+        return false;
       }
       const nextZoom = typeof options?.zoom !== "undefined" ? options.zoom : maxZoom2;
       await panZoom.setViewport({
@@ -8556,7 +8615,7 @@ var createStore2 = ({ nodes, edges, defaultNodes, defaultEdges, width, height, f
         y: height2 / 2 - y * nextZoom,
         zoom: nextZoom
       }, { duration: options?.duration, ease: options?.ease, interpolate: options?.interpolate });
-      return Promise.resolve(true);
+      return true;
     },
     cancelConnection: () => {
       set3({
@@ -8601,14 +8660,14 @@ var wrapperStyle = {
   position: "relative",
   zIndex: 0
 };
-function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = "Backspace", selectionKeyCode = "Shift", selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = "Space", multiSelectionKeyCode = isMacOs() ? "Meta" : "Control", zoomActivationKeyCode = isMacOs() ? "Meta" : "Control", snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = true, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = "#b1b1b7", zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance = 1, nodeClickDistance = 0, children: children2, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = "nodrag", noWheelClassName = "nowheel", noPanClassName = "nopan", fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect = true, elevateEdgesOnSelect = false, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, connectionRadius, isValidConnection, onError, style: style2, id: id2, nodeDragThreshold, connectionDragThreshold, viewport, onViewportChange, width, height, colorMode = "light", debug, onScroll, ariaLabelConfig, zIndexMode = "basic", ...rest }, ref) {
+function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = "Backspace", selectionKeyCode = "Shift", selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = "Space", multiSelectionKeyCode = isMacOs() ? "Meta" : "Control", zoomActivationKeyCode = isMacOs() ? "Meta" : "Control", snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = true, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = "#b1b1b7", zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance = 1, nodeClickDistance = 0, children: children2, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = "nodrag", noWheelClassName = "nowheel", noPanClassName = "nopan", fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect = true, elevateEdgesOnSelect = false, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, autoPanOnSelection = true, autoPanSpeed, connectionRadius, isValidConnection, onError, style: style2, id: id2, nodeDragThreshold, connectionDragThreshold, viewport, onViewportChange, width, height, colorMode = "light", debug, onScroll, ariaLabelConfig, zIndexMode = "basic", ...rest }, ref) {
   const rfId = id2 || "1";
   const colorModeClassName = useColorModeClass(colorMode);
   const wrapperOnScroll = ReactExports.useCallback((e) => {
     e.currentTarget.scrollTo({ top: 0, left: 0, behavior: "instant" });
     onScroll?.(e);
   }, [onScroll]);
-  return jsxRuntime.jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), id: id2, role: "application", children: jsxRuntime.jsxs(Wrapper, { nodes, edges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, zIndexMode, children: [jsxRuntime.jsx(StoreUpdater, { nodes, edges, defaultNodes, defaultEdges, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, edgesFocusable, edgesReconnectable, elementsSelectable, elevateNodesOnSelect, elevateEdgesOnSelect, minZoom, maxZoom, nodeExtent, onNodesChange, onEdgesChange, snapToGrid, snapGrid, connectionMode, translateExtent, connectOnClick, defaultEdgeOptions, fitView, fitViewOptions, onNodesDelete, onEdgesDelete, onDelete, onNodeDragStart, onNodeDrag, onNodeDragStop, onSelectionDrag, onSelectionDragStart, onSelectionDragStop, onMove, onMoveStart, onMoveEnd, noPanClassName, nodeOrigin, rfId, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, onError, connectionRadius, isValidConnection, selectNodesOnDrag, nodeDragThreshold, connectionDragThreshold, onBeforeDelete, debug, ariaLabelConfig, zIndexMode }), jsxRuntime.jsx(GraphView, { onInit, onNodeClick, onEdgeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, nodeTypes, edgeTypes, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, deleteKeyCode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent, minZoom, maxZoom, preventScrolling, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, nodeClickDistance, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noDragClassName, noWheelClassName, noPanClassName, rfId, disableKeyboardA11y, nodeExtent, viewport, onViewportChange }), jsxRuntime.jsx(SelectionListener, { onSelectionChange }), children2, jsxRuntime.jsx(Attribution, { proOptions, position: attributionPosition }), jsxRuntime.jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
+  return jsxRuntime.jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), id: id2, role: "application", children: jsxRuntime.jsxs(Wrapper, { nodes, edges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, zIndexMode, children: [jsxRuntime.jsx(StoreUpdater, { nodes, edges, defaultNodes, defaultEdges, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, edgesFocusable, edgesReconnectable, elementsSelectable, elevateNodesOnSelect, elevateEdgesOnSelect, minZoom, maxZoom, nodeExtent, onNodesChange, onEdgesChange, snapToGrid, snapGrid, connectionMode, translateExtent, connectOnClick, defaultEdgeOptions, fitView, fitViewOptions, onNodesDelete, onEdgesDelete, onDelete, onNodeDragStart, onNodeDrag, onNodeDragStop, onSelectionDrag, onSelectionDragStart, onSelectionDragStop, onMove, onMoveStart, onMoveEnd, noPanClassName, nodeOrigin, rfId, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, onError, connectionRadius, isValidConnection, selectNodesOnDrag, nodeDragThreshold, connectionDragThreshold, onBeforeDelete, debug, ariaLabelConfig, zIndexMode }), jsxRuntime.jsx(GraphView, { onInit, onNodeClick, onEdgeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, nodeTypes, edgeTypes, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, deleteKeyCode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent, minZoom, maxZoom, preventScrolling, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, autoPanOnSelection, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, nodeClickDistance, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noDragClassName, noWheelClassName, noPanClassName, rfId, disableKeyboardA11y, nodeExtent, viewport, onViewportChange }), jsxRuntime.jsx(SelectionListener, { onSelectionChange }), children2, jsxRuntime.jsx(Attribution, { proOptions, position: attributionPosition }), jsxRuntime.jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
 }
 fixedForwardRef(ReactFlow);
 function LinePattern({ dimensions, lineWidth, variant, className }) {
@@ -9055,7 +9114,7 @@ function useFlowState(initial) {
     setEdges((es) => applyEdgeChanges(changes, es));
   }, []);
   const onConnect = ReactExports.useCallback((connection) => {
-    setEdges((es) => addEdge(connection, es));
+    setEdges((es) => addEdge2(connection, es));
   }, []);
   const toGraph = ReactExports.useCallback(() => ({ nodes, edges }), [nodes, edges]);
   return { nodes, edges, setNodes, setEdges, onNodesChange, onEdgesChange, onConnect, toGraph };