@xyflow/react 12.0.0-next.2 → 12.0.0-next.21

package/dist/esm/index.mjs

@@ -1,14 +1,12 @@
 "use client"
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, useContext, useMemo, memo, useEffect, useRef, useState, useCallback, forwardRef } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import cc from 'classcat';
-import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getOutgoersBase, getIncomersBase, addEdgeBase, updateEdgeBase, getConnectedEdgesBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calcNextPosition, Position, isMouseEvent, XYHandle, getHostForElement, getNodesBounds, clampPosition, internalsSymbol, getPositionWithOrigin, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, isNumeric, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, ConnectionMode, ConnectionLineType, updateConnectionLookup, adoptUserProvidedNodes, updateNodeDimensions, updateAbsolutePositions, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, getNodePositionWithOrigin, XYMinimap, getBoundsOfRects, getPointerPosition, clamp, getNodeToolbarTransform } from '@xyflow/system';
-export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, getBezierEdgeCenter, getBezierPath, getEdgeCenter, getNodesBounds, getSmoothStepPath, getStraightPath, getViewportForBounds, internalsSymbol } from '@xyflow/system';
+import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, evaluateAbsolutePosition, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getInternalNodesBounds, isNumeric, nodeHasDimensions, getNodeDimensions, clampPosition, getPositionWithOrigin, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, ConnectionLineType, updateConnectionLookup, adoptUserNodes, devWarn, updateNodeInternals, updateAbsolutePositions, handleExpandParent, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, getNodePositionWithOrigin, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodesBounds, getNodeToolbarTransform } from '@xyflow/system';
+export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, updateEdge } from '@xyflow/system';
+import { createContext, useContext, useMemo, useEffect, useRef, useState, forwardRef, useLayoutEffect, useCallback, memo } from 'react';
 import { useStoreWithEqualityFn, createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
 import { createPortal } from 'react-dom';
-import { drag } from 'd3-drag';
-import { select } from 'd3-selection';
 
 const StoreContext = createContext(null);
 const Provider$1 = StoreContext.Provider;
@@ -21,6 +19,10 @@ const zustandErrorMessage = errorMessages['error001']();
  * @param selector
  * @param equalityFn
  * @returns The selected state slice
+ *
+ * @example
+ * const nodes = useStore((state: ReactFlowState<MyNodeType>) => state.nodes);
+ *
  */
 function useStore(selector, equalityFn) {
     const store = useContext(StoreContext);
@@ -29,7 +31,7 @@ function useStore(selector, equalityFn) {
     }
     return useStoreWithEqualityFn(store, selector, equalityFn);
 }
-const useStoreApi = () => {
+function useStoreApi() {
     const store = useContext(StoreContext);
     if (store === null) {
         throw new Error(zustandErrorMessage);
@@ -38,13 +40,36 @@ const useStoreApi = () => {
         getState: store.getState,
         setState: store.setState,
         subscribe: store.subscribe,
-        destroy: store.destroy,
     }), [store]);
+}
+
+const style = { display: 'none' };
+const ariaLiveStyle = {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    margin: -1,
+    border: 0,
+    padding: 0,
+    overflow: 'hidden',
+    clip: 'rect(0px, 0px, 0px, 0px)',
+    clipPath: 'inset(100%)',
 };
+const ARIA_NODE_DESC_KEY = 'react-flow__node-desc';
+const ARIA_EDGE_DESC_KEY = 'react-flow__edge-desc';
+const ARIA_LIVE_MESSAGE = 'react-flow__aria-live';
+const selector$q = (s) => s.ariaLiveMessage;
+function AriaLiveMessage({ rfId }) {
+    const ariaLiveMessage = useStore(selector$q);
+    return (jsx("div", { id: `${ARIA_LIVE_MESSAGE}-${rfId}`, "aria-live": "assertive", "aria-atomic": "true", style: ariaLiveStyle, children: ariaLiveMessage }));
+}
+function A11yDescriptions({ rfId, disableKeyboardA11y }) {
+    return (jsxs(Fragment, { children: [jsxs("div", { id: `${ARIA_NODE_DESC_KEY}-${rfId}`, style: style, children: ["Press enter or space to select a node.", !disableKeyboardA11y && 'You can then use the arrow keys to move the node around.', " Press delete to remove it and escape to cancel.", ' '] }), jsx("div", { id: `${ARIA_EDGE_DESC_KEY}-${rfId}`, style: style, children: "Press enter or space to select an edge. You can then press delete to remove it or escape to cancel." }), !disableKeyboardA11y && jsx(AriaLiveMessage, { rfId: rfId })] }));
+}
 
-const selector$q = (s) => (s.userSelectionActive ? 'none' : 'all');
-function Panel({ position, children, className, style, ...rest }) {
-    const pointerEvents = useStore(selector$q);
+const selector$p = (s) => (s.userSelectionActive ? 'none' : 'all');
+function Panel({ position = 'top-left', children, className, style, ...rest }) {
+    const pointerEvents = useStore(selector$p);
     const positionClasses = `${position}`.split('-');
     return (jsx("div", { className: cc(['react-flow__panel', className, ...positionClasses]), style: { ...style, pointerEvents }, ...rest, children: children }));
 }
@@ -56,35 +81,48 @@ function Attribution({ proOptions, position = 'bottom-right' }) {
     return (jsx(Panel, { position: position, className: "react-flow__attribution", "data-message": "Please only hide this attribution when you are subscribed to React Flow Pro: https://pro.reactflow.dev", children: jsx("a", { href: "https://reactflow.dev", target: "_blank", rel: "noopener noreferrer", "aria-label": "React Flow attribution", children: "React Flow" }) }));
 }
 
-const selector$p = (s) => ({
-    selectedNodes: s.nodes.filter((n) => n.selected),
-    selectedEdges: s.edges.filter((e) => e.selected),
-});
+const selector$o = (s) => {
+    const selectedNodes = [];
+    const selectedEdges = [];
+    for (const [, node] of s.nodeLookup) {
+        if (node.selected) {
+            selectedNodes.push(node.internals.userNode);
+        }
+    }
+    for (const [, edge] of s.edgeLookup) {
+        if (edge.selected) {
+            selectedEdges.push(edge);
+        }
+    }
+    return { selectedNodes, selectedEdges };
+};
 const selectId = (obj) => obj.id;
 function areEqual(a, b) {
     return (shallow(a.selectedNodes.map(selectId), b.selectedNodes.map(selectId)) &&
         shallow(a.selectedEdges.map(selectId), b.selectedEdges.map(selectId)));
 }
-const SelectionListener = memo(({ onSelectionChange }) => {
+function SelectionListenerInner({ onSelectionChange }) {
     const store = useStoreApi();
-    const { selectedNodes, selectedEdges } = useStore(selector$p, areEqual);
+    const { selectedNodes, selectedEdges } = useStore(selector$o, areEqual);
     useEffect(() => {
         const params = { nodes: selectedNodes, edges: selectedEdges };
         onSelectionChange?.(params);
         store.getState().onSelectionChangeHandlers.forEach((fn) => fn(params));
     }, [selectedNodes, selectedEdges, onSelectionChange]);
     return null;
-});
-SelectionListener.displayName = 'SelectionListener';
+}
 const changeSelector = (s) => !!s.onSelectionChangeHandlers;
-function Wrapper$1({ onSelectionChange }) {
+function SelectionListener({ onSelectionChange }) {
     const storeHasSelectionChangeHandlers = useStore(changeSelector);
     if (onSelectionChange || storeHasSelectionChangeHandlers) {
-        return jsx(SelectionListener, { onSelectionChange: onSelectionChange });
+        return jsx(SelectionListenerInner, { onSelectionChange: onSelectionChange });
     }
     return null;
 }
 
+const defaultNodeOrigin = [0, 0];
+const defaultViewport = { x: 0, y: 0, zoom: 1 };
+
 /*
  * This component helps us to update the store with the vlues coming from the user.
  * We distinguish between values we can update directly with `useDirectStoreUpdater` (like `snapGrid`)
@@ -144,41 +182,44 @@ const reactFlowFieldsToTrack = [
     'selectNodesOnDrag',
     'nodeDragThreshold',
     'onBeforeDelete',
+    'debug',
 ];
 // rfId doesn't exist in ReactFlowProps, but it's one of the fields we want to update
 const fieldsToTrack = [...reactFlowFieldsToTrack, 'rfId'];
-const selector$o = (s) => ({
+const selector$n = (s) => ({
     setNodes: s.setNodes,
     setEdges: s.setEdges,
-    setDefaultNodesAndEdges: s.setDefaultNodesAndEdges,
     setMinZoom: s.setMinZoom,
     setMaxZoom: s.setMaxZoom,
     setTranslateExtent: s.setTranslateExtent,
     setNodeExtent: s.setNodeExtent,
     reset: s.reset,
+    setDefaultNodesAndEdges: s.setDefaultNodesAndEdges,
 });
-const StoreUpdater = (props) => {
-    const { setNodes, setEdges, setDefaultNodesAndEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, } = useStore(selector$o, shallow);
+const initPrevValues = {
+    // these are values that are also passed directly to other components
+    // than the StoreUpdater. We can reduce the number of setStore calls
+    // by setting the same values here as prev fields.
+    translateExtent: infiniteExtent,
+    nodeOrigin: defaultNodeOrigin,
+    minZoom: 0.5,
+    maxZoom: 2,
+    elementsSelectable: true,
+    noPanClassName: 'nopan',
+    rfId: '1',
+};
+function StoreUpdater(props) {
+    const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, } = useStore(selector$n, shallow);
     const store = useStoreApi();
     useEffect(() => {
-        const edgesWithDefaults = props.defaultEdges?.map((e) => ({ ...e, ...props.defaultEdgeOptions }));
-        setDefaultNodesAndEdges(props.defaultNodes, edgesWithDefaults);
+        setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges);
         return () => {
+            // when we reset the store we also need to reset the previous fields
+            previousFields.current = initPrevValues;
             reset();
         };
     }, []);
-    const previousFields = useRef({
-        // these are values that are also passed directly to other components
-        // than the StoreUpdater. We can reduce the number of setStore calls
-        // by setting the same values here as prev fields.
-        translateExtent: infiniteExtent,
-        nodeOrigin: initNodeOrigin,
-        minZoom: 0.5,
-        maxZoom: 2,
-        elementsSelectable: true,
-        noPanClassName: 'nopan',
-        rfId: '1',
-    });
+    const previousFields = useRef(initPrevValues);
     useEffect(() => {
         for (const fieldName of fieldsToTrack) {
             const fieldValue = props[fieldName];
@@ -214,30 +255,36 @@ const StoreUpdater = (props) => {
     // Only re-run the effect if one of the fields we track changes
     fieldsToTrack.map((fieldName) => props[fieldName]));
     return null;
-};
+}
 
-const style = { display: 'none' };
-const ariaLiveStyle = {
-    position: 'absolute',
-    width: 1,
-    height: 1,
-    margin: -1,
-    border: 0,
-    padding: 0,
-    overflow: 'hidden',
-    clip: 'rect(0px, 0px, 0px, 0px)',
-    clipPath: 'inset(100%)',
-};
-const ARIA_NODE_DESC_KEY = 'react-flow__node-desc';
-const ARIA_EDGE_DESC_KEY = 'react-flow__edge-desc';
-const ARIA_LIVE_MESSAGE = 'react-flow__aria-live';
-const selector$n = (s) => s.ariaLiveMessage;
-function AriaLiveMessage({ rfId }) {
-    const ariaLiveMessage = useStore(selector$n);
-    return (jsx("div", { id: `${ARIA_LIVE_MESSAGE}-${rfId}`, "aria-live": "assertive", "aria-atomic": "true", style: ariaLiveStyle, children: ariaLiveMessage }));
+function getMediaQuery() {
+    if (typeof window === 'undefined' || !window.matchMedia) {
+        return null;
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)');
 }
-function A11yDescriptions({ rfId, disableKeyboardA11y }) {
-    return (jsxs(Fragment, { children: [jsxs("div", { id: `${ARIA_NODE_DESC_KEY}-${rfId}`, style: style, children: ["Press enter or space to select a node.", !disableKeyboardA11y && 'You can then use the arrow keys to move the node around.', " Press delete to remove it and escape to cancel.", ' '] }), jsx("div", { id: `${ARIA_EDGE_DESC_KEY}-${rfId}`, style: style, children: "Press enter or space to select an edge. You can then press delete to remove it or escape to cancel." }), !disableKeyboardA11y && jsx(AriaLiveMessage, { rfId: rfId })] }));
+/**
+ * Hook for receiving the current color mode class 'dark' or 'light'.
+ *
+ * @internal
+ * @param colorMode - The color mode to use ('dark', 'light' or 'system')
+ */
+function useColorModeClass(colorMode) {
+    const [colorModeClass, setColorModeClass] = useState(colorMode === 'system' ? null : colorMode);
+    useEffect(() => {
+        if (colorMode !== 'system') {
+            setColorModeClass(colorMode);
+            return;
+        }
+        const mediaQuery = getMediaQuery();
+        const updateColorModeClass = () => setColorModeClass(mediaQuery?.matches ? 'dark' : 'light');
+        updateColorModeClass();
+        mediaQuery?.addEventListener('change', updateColorModeClass);
+        return () => {
+            mediaQuery?.removeEventListener('change', updateColorModeClass);
+        };
+    }, [colorMode]);
+    return colorModeClass !== null ? colorModeClass : getMediaQuery()?.matches ? 'dark' : 'light';
 }
 
 const defaultDoc = typeof document !== 'undefined' ? document : null;
@@ -249,12 +296,12 @@ const defaultDoc = typeof document !== 'undefined' ? document : null;
  * @param param.options - Options
  * @returns boolean
  */
-var useKeyPress = (
+function useKeyPress(
 // the keycode can be a string 'a' or an array of strings ['a', 'a+d']
 // a string means a single key 'a' or a combination when '+' is used 'a+d'
 // an array means different possibilites. Explainer: ['a', 'd+s'] here the
 // user can use the single key 'a' or the combination 'd' + 's'
-keyCode = null, options = { target: defaultDoc, actInsideInputWithModifier: true }) => {
+keyCode = null, options = { target: defaultDoc, actInsideInputWithModifier: true }) {
     const [keyPressed, setKeyPressed] = useState(false);
     // we need to remember if a modifier key is pressed in order to track it
     const modifierPressed = useRef(false);
@@ -306,6 +353,10 @@ keyCode = null, options = { target: defaultDoc, actInsideInputWithModifier: true
                 else {
                     pressedKeys.current.delete(event[keyOrCode]);
                 }
+                // fix for Mac: when cmd key is pressed, keyup is not triggered for any other key, see: https://stackoverflow.com/questions/27380018/when-cmd-key-is-kept-pressed-keyup-is-not-triggered-for-any-other-key
+                if (event.key === 'Meta') {
+                    pressedKeys.current.clear();
+                }
                 modifierPressed.current = false;
             };
             const resetHandler = () => {
@@ -315,15 +366,17 @@ keyCode = null, options = { target: defaultDoc, actInsideInputWithModifier: true
             target?.addEventListener('keydown', downHandler);
             target?.addEventListener('keyup', upHandler);
             window.addEventListener('blur', resetHandler);
+            window.addEventListener('contextmenu', resetHandler);
             return () => {
                 target?.removeEventListener('keydown', downHandler);
                 target?.removeEventListener('keyup', upHandler);
                 window.removeEventListener('blur', resetHandler);
+                window.removeEventListener('contextmenu', resetHandler);
             };
         }
     }, [keyCode, setKeyPressed]);
     return keyPressed;
-};
+}
 // utils
 function isMatchingKey(keyCodes, pressedKeys, isUp) {
     return (keyCodes
@@ -339,7 +392,6 @@ function useKeyOrCode(eventCode, keysToWatch) {
     return keysToWatch.includes(eventCode) ? 'code' : 'key';
 }
 
-const selector$m = (s) => !!s.panZoom;
 /**
  * Hook for getting viewport helper functions.
  *
@@ -348,8 +400,7 @@ const selector$m = (s) => !!s.panZoom;
  */
 const useViewportHelper = () => {
     const store = useStoreApi();
-    const panZoomInitialized = useStore(selector$m);
-    const viewportHelperFunctions = useMemo(() => {
+    return useMemo(() => {
         return {
             zoomIn: (options) => store.getState().panZoom?.scaleBy(1.2, { duration: options?.duration }),
             zoomOut: (options) => store.getState().panZoom?.scaleBy(1 / 1.2, { duration: options?.duration }),
@@ -368,10 +419,10 @@ const useViewportHelper = () => {
                 return { x, y, zoom };
             },
             fitView: (options) => {
-                const { nodes, width, height, nodeOrigin, minZoom, maxZoom, panZoom } = store.getState();
+                const { nodeLookup, width, height, nodeOrigin, minZoom, maxZoom, panZoom } = store.getState();
                 return panZoom
                     ? fitView({
-                        nodes,
+                        nodeLookup,
                         width,
                         height,
                         nodeOrigin,
@@ -397,154 +448,123 @@ const useViewportHelper = () => {
                 const viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
                 panZoom?.setViewport(viewport, { duration: options?.duration });
             },
-            screenToFlowPosition: (position) => {
-                const { transform, snapToGrid, snapGrid, domNode } = store.getState();
+            screenToFlowPosition: (clientPosition, options = { snapToGrid: true }) => {
+                const { transform, snapGrid, domNode } = store.getState();
                 if (!domNode) {
-                    return position;
+                    return clientPosition;
                 }
                 const { x: domX, y: domY } = domNode.getBoundingClientRect();
                 const correctedPosition = {
-                    x: position.x - domX,
-                    y: position.y - domY,
+                    x: clientPosition.x - domX,
+                    y: clientPosition.y - domY,
                 };
-                return pointToRendererPoint(correctedPosition, transform, snapToGrid, snapGrid || [1, 1]);
+                return pointToRendererPoint(correctedPosition, transform, options.snapToGrid, snapGrid);
             },
-            flowToScreenPosition: (position) => {
+            flowToScreenPosition: (flowPosition) => {
                 const { transform, domNode } = store.getState();
                 if (!domNode) {
-                    return position;
+                    return flowPosition;
                 }
                 const { x: domX, y: domY } = domNode.getBoundingClientRect();
-                const rendererPosition = rendererPointToPoint(position, transform);
+                const rendererPosition = rendererPointToPoint(flowPosition, transform);
                 return {
                     x: rendererPosition.x + domX,
                     y: rendererPosition.y + domY,
                 };
             },
-            viewportInitialized: panZoomInitialized,
         };
-    }, [panZoomInitialized]);
-    return viewportHelperFunctions;
+    }, []);
 };
 
-function handleParentExpand(res, updateItem) {
-    const parent = res.find((e) => e.id === updateItem.parentNode);
-    if (parent) {
-        if (!parent.computed) {
-            parent.computed = {};
-        }
-        const extendWidth = updateItem.position.x + updateItem.computed.width - parent.computed.width;
-        const extendHeight = updateItem.position.y + updateItem.computed.height - parent.computed.height;
-        if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
-            parent.style = { ...parent.style } || {};
-            parent.style.width = parent.style.width ?? parent.computed.width;
-            parent.style.height = parent.style.height ?? parent.computed.height;
-            if (extendWidth > 0) {
-                parent.style.width += extendWidth;
-            }
-            if (extendHeight > 0) {
-                parent.style.height += extendHeight;
-            }
-            if (updateItem.position.x < 0) {
-                const xDiff = Math.abs(updateItem.position.x);
-                parent.position.x = parent.position.x - xDiff;
-                parent.style.width += xDiff;
-                updateItem.position.x = 0;
-            }
-            if (updateItem.position.y < 0) {
-                const yDiff = Math.abs(updateItem.position.y);
-                parent.position.y = parent.position.y - yDiff;
-                parent.style.height += yDiff;
-                updateItem.position.y = 0;
-            }
-            parent.computed.width = parent.style.width;
-            parent.computed.height = parent.style.height;
-        }
-    }
-}
 // This function applies changes to nodes or edges that are triggered by React Flow internally.
 // When you drag a node for example, React Flow will send a position change update.
 // This function then applies the changes and returns the updated elements.
 function applyChanges(changes, elements) {
-    // we need this hack to handle the setNodes and setEdges function of the useReactFlow hook for controlled flows
-    if (changes.some((c) => c.type === 'reset')) {
-        return changes.filter((c) => c.type === 'reset').map((c) => c.item);
-    }
-    let remainingChanges = changes;
     const updatedElements = [];
-    for (const item of elements) {
-        const nextChanges = [];
-        const _remainingChanges = [];
-        for (const c of remainingChanges) {
-            if (c.type === 'add') {
-                updatedElements.push(c.item);
-            }
-            else if (c.id === item.id) {
-                nextChanges.push(c);
+    // By storing a map of changes for each element, we can a quick lookup as we
+    // iterate over the elements array!
+    const changesMap = new Map();
+    for (const change of changes) {
+        if (change.type === 'add') {
+            updatedElements.push(change.item);
+            continue;
+        }
+        else if (change.type === 'remove' || change.type === 'replace') {
+            // For a 'remove' change we can safely ignore any other changes queued for
+            // the same element, it's going to be removed anyway!
+            changesMap.set(change.id, [change]);
+        }
+        else {
+            const elementChanges = changesMap.get(change.id);
+            if (elementChanges) {
+                // If we have some changes queued already, we can do a mutable update of
+                // that array and save ourselves some copying.
+                elementChanges.push(change);
             }
             else {
-                _remainingChanges.push(c);
+                changesMap.set(change.id, [change]);
             }
         }
-        remainingChanges = _remainingChanges;
-        if (nextChanges.length === 0) {
-            updatedElements.push(item);
+    }
+    for (const element of elements) {
+        const changes = changesMap.get(element.id);
+        // When there are no changes for an element we can just push it unmodified,
+        // no need to copy it.
+        if (!changes) {
+            updatedElements.push(element);
             continue;
         }
-        const updateItem = { ...item };
-        for (const currentChange of nextChanges) {
-            if (currentChange) {
-                switch (currentChange.type) {
-                    case 'select': {
-                        updateItem.selected = currentChange.selected;
-                        break;
-                    }
-                    case 'position': {
-                        if (typeof currentChange.position !== 'undefined') {
-                            updateItem.position = currentChange.position;
-                        }
-                        if (typeof currentChange.positionAbsolute !== 'undefined') {
-                            if (!updateItem.computed) {
-                                updateItem.computed = {};
-                            }
-                            updateItem.computed.positionAbsolute = currentChange.positionAbsolute;
-                        }
-                        if (typeof currentChange.dragging !== 'undefined') {
-                            updateItem.dragging = currentChange.dragging;
-                        }
-                        if (updateItem.expandParent) {
-                            handleParentExpand(updatedElements, updateItem);
-                        }
-                        break;
-                    }
-                    case 'dimensions': {
-                        if (typeof currentChange.dimensions !== 'undefined') {
-                            if (!updateItem.computed) {
-                                updateItem.computed = {};
-                            }
-                            updateItem.computed.width = currentChange.dimensions.width;
-                            updateItem.computed.height = currentChange.dimensions.height;
-                        }
-                        if (typeof currentChange.updateStyle !== 'undefined') {
-                            updateItem.style = { ...(updateItem.style || {}), ...currentChange.dimensions };
-                        }
-                        if (typeof currentChange.resizing === 'boolean') {
-                            updateItem.resizing = currentChange.resizing;
-                        }
-                        if (updateItem.expandParent) {
-                            handleParentExpand(updatedElements, updateItem);
-                        }
-                        break;
-                    }
-                    case 'remove': {
-                        continue;
-                    }
+        // If we have a 'remove' change queued, it'll be the only change in the array
+        if (changes[0].type === 'remove') {
+            continue;
+        }
+        if (changes[0].type === 'replace') {
+            updatedElements.push({ ...changes[0].item });
+            continue;
+        }
+        // For other types of changes, we want to start with a shallow copy of the
+        // object so React knows this element has changed. Sequential changes will
+        /// each _mutate_ this object, so there's only ever one copy.
+        const updatedElement = { ...element };
+        for (const change of changes) {
+            applyChange(change, updatedElement);
+        }
+        updatedElements.push(updatedElement);
+    }
+    return updatedElements;
+}
+// Applies a single change to an element. This is a *mutable* update.
+function applyChange(change, element) {
+    switch (change.type) {
+        case 'select': {
+            element.selected = change.selected;
+            break;
+        }
+        case 'position': {
+            if (typeof change.position !== 'undefined') {
+                element.position = change.position;
+            }
+            if (typeof change.dragging !== 'undefined') {
+                element.dragging = change.dragging;
+            }
+            break;
+        }
+        case 'dimensions': {
+            if (typeof change.dimensions !== 'undefined') {
+                element.measured ??= {};
+                element.measured.width = change.dimensions.width;
+                element.measured.height = change.dimensions.height;
+                if (change.setAttributes) {
+                    element.width = change.dimensions.width;
+                    element.height = change.dimensions.height;
                 }
             }
-            updatedElements.push(updateItem);
+            if (typeof change.resizing === 'boolean') {
+                element.resizing = change.resizing;
+            }
+            break;
         }
     }
-    return updatedElements;
 }
 /**
  * Drop in function that applies node changes to an array of nodes.
@@ -586,21 +606,23 @@ function applyNodeChanges(changes, nodes) {
     );
   
     return (
-      <ReactFLow nodes={nodes} edges={edges} onEdgesChange={onEdgesChange} />
+      <ReactFlow nodes={nodes} edges={edges} onEdgesChange={onEdgesChange} />
     );
  */
 function applyEdgeChanges(changes, edges) {
     return applyChanges(changes, edges);
 }
-const createSelectionChange = (id, selected) => ({
-    id,
-    type: 'select',
-    selected,
-});
+function createSelectionChange(id, selected) {
+    return {
+        id,
+        type: 'select',
+        selected,
+    };
+}
 function getSelectionChanges(items, selectedIds = new Set(), mutateItem = false) {
     const changes = [];
-    for (const item of items) {
-        const willBeSelected = selectedIds.has(item.id);
+    for (const [id, item] of items) {
+        const willBeSelected = selectedIds.has(id);
         // we don't want to set all items to selected=false on the first selection
         if (!(item.selected === undefined && !willBeSelected) && item.selected !== willBeSelected) {
             if (mutateItem) {
@@ -614,6 +636,33 @@ function getSelectionChanges(items, selectedIds = new Set(), mutateItem = false)
     }
     return changes;
 }
+function getElementsDiffChanges({ items = [], lookup, }) {
+    const changes = [];
+    const itemsLookup = new Map(items.map((item) => [item.id, item]));
+    for (const item of items) {
+        const lookupItem = lookup.get(item.id);
+        const storeItem = lookupItem?.internals?.userNode ?? lookupItem;
+        if (storeItem !== undefined && storeItem !== item) {
+            changes.push({ id: item.id, item: item, type: 'replace' });
+        }
+        if (storeItem === undefined) {
+            changes.push({ item: item, type: 'add' });
+        }
+    }
+    for (const [id] of lookup) {
+        const nextNode = itemsLookup.get(id);
+        if (nextNode === undefined) {
+            changes.push({ id, type: 'remove' });
+        }
+    }
+    return changes;
+}
+function elementToRemoveChange(item) {
+    return {
+        id: item.id,
+        type: 'remove',
+    };
+}
 
 /**
  * Test whether an object is useable as a Node
@@ -622,7 +671,7 @@ function getSelectionChanges(items, selectedIds = new Set(), mutateItem = false)
  * @param element - The element to test
  * @returns A boolean indicating whether the element is an Node
  */
-const isNode = (isNodeBase);
+const isNode = (element) => isNodeBase(element);
 /**
  * Test whether an object is useable as an Edge
  * @public
@@ -630,253 +679,289 @@ const isNode = (isNodeBase);
  * @param element - The element to test
  * @returns A boolean indicating whether the element is an Edge
  */
-const isEdge = (isEdgeBase);
-/**
- * Pass in a node, and get connected nodes where edge.source === node.id
- * @public
- * @param node - The node to get the connected nodes from
- * @param nodes - The array of all nodes
- * @param edges - The array of all edges
- * @returns An array of nodes that are connected over eges where the source is the given node
- */
-const getOutgoers = (getOutgoersBase);
-/**
- * Pass in a node, and get connected nodes where edge.target === node.id
- * @public
- * @param node - The node to get the connected nodes from
- * @param nodes - The array of all nodes
- * @param edges - The array of all edges
- * @returns An array of nodes that are connected over eges where the target is the given node
- */
-const getIncomers = (getIncomersBase);
-/**
- * This util is a convenience function to add a new Edge to an array of edges
- * @remarks It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.
- * @public
- * @param edgeParams - Either an Edge or a Connection you want to add
- * @param edges -  The array of all current edges
- * @returns A new array of edges with the new edge added
- */
-const addEdge = (addEdgeBase);
-/**
- * A handy utility to update an existing Edge with new properties
- * @param oldEdge - The edge you want to update
- * @param newConnection - The new connection you want to update the edge with
- * @param edges - The array of all current edges
- * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
- * @returns the updated edges array
- */
-const updateEdge = (updateEdgeBase);
+const isEdge = (element) => isEdgeBase(element);
+// eslint-disable-next-line @typescript-eslint/ban-types
+function fixedForwardRef(render) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return forwardRef(render);
+}
+
+// we need this hook to prevent a warning when using react-flow in SSR
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
 /**
- * Get all connecting edges for a given set of nodes
- * @param nodes - Nodes you want to get the connected edges for
- * @param edges - All edges
- * @returns Array of edges that connect any of the given nodes with each other
+ * This hook returns a queue that can be used to batch updates.
+ *
+ * @param runQueue - a function that gets called when the queue is flushed
+ * @internal
+ *
+ * @returns a Queue object
  */
-const getConnectedEdges = (getConnectedEdgesBase);
+function useQueue(runQueue) {
+    // Because we're using a ref above, we need some way to let React know when to
+    // actually process the queue. We flip this bit of state to `true` any time we
+    // mutate the queue and then flip it back to `false` after flushing the queue.
+    const [shouldFlush, setShouldFlush] = useState(false);
+    // A reference of all the batched updates to process before the next render. We
+    // want a reference here so multiple synchronous calls to `setNodes` etc can be
+    // batched together.
+    const [queue] = useState(() => createQueue(() => setShouldFlush(true)));
+    // Layout effects are guaranteed to run before the next render which means we
+    // shouldn't run into any issues with stale state or weird issues that come from
+    // rendering things one frame later than expected (we used to use `setTimeout`).
+    useIsomorphicLayoutEffect(() => {
+        // Because we need to flip the state back to false after flushing, this should
+        // trigger the hook again (!). If the hook is being run again we know that any
+        // updates should have been processed by now and we can safely clear the queue
+        // and bail early.
+        if (!shouldFlush) {
+            queue.reset();
+            return;
+        }
+        const queueItems = queue.get();
+        if (queueItems.length) {
+            runQueue(queueItems);
+            queue.reset();
+        }
+        // Beacuse we're using reactive state to trigger this effect, we need to flip
+        // it back to false.
+        setShouldFlush(false);
+    }, [shouldFlush]);
+    return queue;
+}
+function createQueue(cb) {
+    let queue = [];
+    return {
+        get: () => queue,
+        reset: () => {
+            queue = [];
+        },
+        push: (item) => {
+            queue.push(item);
+            cb();
+        },
+    };
+}
 
+const BatchContext = createContext(null);
 /**
- * Hook for accessing the ReactFlow instance.
+ * This is a context provider that holds and processes the node and edge update queues
+ * that are needed to handle setNodes, addNodes, setEdges and addEdges.
  *
- * @public
- * @returns ReactFlowInstance
+ * @internal
  */
-function useReactFlow() {
-    const viewportHelper = useViewportHelper();
+function BatchProvider({ children, }) {
     const store = useStoreApi();
-    const getNodes = useCallback(() => {
-        return store.getState().nodes.map((n) => ({ ...n }));
-    }, []);
-    const getNode = useCallback((id) => {
-        return store.getState().nodeLookup.get(id);
-    }, []);
-    const getEdges = useCallback(() => {
-        const { edges = [] } = store.getState();
-        return edges.map((e) => ({ ...e }));
-    }, []);
-    const getEdge = useCallback((id) => {
-        const { edges = [] } = store.getState();
-        return edges.find((e) => e.id === id);
-    }, []);
-    const setNodes = useCallback((payload) => {
-        const { nodes, setNodes, hasDefaultNodes, onNodesChange } = store.getState();
-        const nextNodes = typeof payload === 'function' ? payload(nodes) : payload;
-        if (hasDefaultNodes) {
-            setNodes(nextNodes);
-        }
-        else if (onNodesChange) {
-            const changes = nextNodes.length === 0
-                ? nodes.map((node) => ({ type: 'remove', id: node.id }))
-                : nextNodes.map((node) => ({ item: node, type: 'reset' }));
-            onNodesChange(changes);
+    const nodeQueueHandler = useCallback((queueItems) => {
+        const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup } = store.getState();
+        // This is essentially an `Array.reduce` in imperative clothing. Processing
+        // this queue is a relatively hot path so we'd like to avoid the overhead of
+        // array methods where we can.
+        let next = nodes;
+        for (const payload of queueItems) {
+            next = typeof payload === 'function' ? payload(next) : payload;
         }
-    }, []);
-    const setEdges = useCallback((payload) => {
-        const { edges = [], setEdges, hasDefaultEdges, onEdgesChange } = store.getState();
-        const nextEdges = typeof payload === 'function' ? payload(edges) : payload;
-        if (hasDefaultEdges) {
-            setEdges(nextEdges);
-        }
-        else if (onEdgesChange) {
-            const changes = nextEdges.length === 0
-                ? edges.map((edge) => ({ type: 'remove', id: edge.id }))
-                : nextEdges.map((edge) => ({ item: edge, type: 'reset' }));
-            onEdgesChange(changes);
-        }
-    }, []);
-    const addNodes = useCallback((payload) => {
-        const nodes = Array.isArray(payload) ? payload : [payload];
-        const { nodes: currentNodes, hasDefaultNodes, onNodesChange, setNodes } = store.getState();
         if (hasDefaultNodes) {
-            const nextNodes = [...currentNodes, ...nodes];
-            setNodes(nextNodes);
+            setNodes(next);
         }
         else if (onNodesChange) {
-            const changes = nodes.map((node) => ({ item: node, type: 'add' }));
-            onNodesChange(changes);
+            onNodesChange(getElementsDiffChanges({
+                items: next,
+                lookup: nodeLookup,
+            }));
         }
     }, []);
-    const addEdges = useCallback((payload) => {
-        const nextEdges = Array.isArray(payload) ? payload : [payload];
-        const { edges = [], setEdges, hasDefaultEdges, onEdgesChange } = store.getState();
+    const nodeQueue = useQueue(nodeQueueHandler);
+    const edgeQueueHandler = useCallback((queueItems) => {
+        const { edges = [], setEdges, hasDefaultEdges, onEdgesChange, edgeLookup } = store.getState();
+        let next = edges;
+        for (const payload of queueItems) {
+            next = typeof payload === 'function' ? payload(next) : payload;
+        }
         if (hasDefaultEdges) {
-            setEdges([...edges, ...nextEdges]);
+            setEdges(next);
         }
         else if (onEdgesChange) {
-            const changes = nextEdges.map((edge) => ({ item: edge, type: 'add' }));
-            onEdgesChange(changes);
+            onEdgesChange(getElementsDiffChanges({
+                items: next,
+                lookup: edgeLookup,
+            }));
         }
     }, []);
-    const toObject = useCallback(() => {
-        const { nodes = [], edges = [], transform } = store.getState();
-        const [x, y, zoom] = transform;
+    const edgeQueue = useQueue(edgeQueueHandler);
+    const value = useMemo(() => ({ nodeQueue, edgeQueue }), []);
+    return jsx(BatchContext.Provider, { value: value, children: children });
+}
+function useBatchContext() {
+    const batchContext = useContext(BatchContext);
+    if (!batchContext) {
+        throw new Error('useBatchContext must be used within a BatchProvider');
+    }
+    return batchContext;
+}
+
+const selector$m = (s) => !!s.panZoom;
+/**
+ * Hook for accessing the ReactFlow instance.
+ *
+ * @public
+ * @returns ReactFlowInstance
+ */
+function useReactFlow() {
+    const viewportHelper = useViewportHelper();
+    const store = useStoreApi();
+    const batchContext = useBatchContext();
+    const viewportInitialized = useStore(selector$m);
+    const generalHelper = useMemo(() => {
+        const getInternalNode = (id) => store.getState().nodeLookup.get(id);
+        const setNodes = (payload) => {
+            batchContext.nodeQueue.push(payload);
+        };
+        const setEdges = (payload) => {
+            batchContext.edgeQueue.push(payload);
+        };
+        const getNodeRect = (node) => {
+            const { nodeLookup, nodeOrigin } = store.getState();
+            const nodeToUse = isNode(node) ? node : nodeLookup.get(node.id);
+            const position = nodeToUse.parentId
+                ? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.parentId, nodeLookup, nodeOrigin)
+                : nodeToUse.position;
+            const nodeWithPosition = {
+                id: nodeToUse.id,
+                position,
+                width: nodeToUse.measured?.width ?? nodeToUse.width,
+                height: nodeToUse.measured?.height ?? nodeToUse.height,
+                data: nodeToUse.data,
+            };
+            return nodeToRect(nodeWithPosition);
+        };
+        const updateNode = (id, nodeUpdate, options = { replace: false }) => {
+            setNodes((prevNodes) => prevNodes.map((node) => {
+                if (node.id === id) {
+                    const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node) : nodeUpdate;
+                    return options.replace && isNode(nextNode) ? nextNode : { ...node, ...nextNode };
+                }
+                return node;
+            }));
+        };
+        const updateEdge = (id, edgeUpdate, options = { replace: false }) => {
+            setEdges((prevEdges) => prevEdges.map((edge) => {
+                if (edge.id === id) {
+                    const nextEdge = typeof edgeUpdate === 'function' ? edgeUpdate(edge) : edgeUpdate;
+                    return options.replace && isEdge(nextEdge) ? nextEdge : { ...edge, ...nextEdge };
+                }
+                return edge;
+            }));
+        };
         return {
-            nodes: nodes.map((n) => ({ ...n })),
-            edges: edges.map((e) => ({ ...e })),
-            viewport: {
-                x,
-                y,
-                zoom,
+            getNodes: () => store.getState().nodes.map((n) => ({ ...n })),
+            getNode: (id) => getInternalNode(id)?.internals.userNode,
+            getInternalNode,
+            getEdges: () => {
+                const { edges = [] } = store.getState();
+                return edges.map((e) => ({ ...e }));
             },
-        };
-    }, []);
-    const deleteElements = useCallback(async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [], onBeforeDelete }) => {
-        const { nodes, edges, hasDefaultNodes, hasDefaultEdges, onNodesDelete, onEdgesDelete, onNodesChange, onEdgesChange, onDelete, } = store.getState();
-        const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
-            nodesToRemove,
-            edgesToRemove,
-            nodes,
-            edges,
-            onBeforeDelete,
-        });
-        const hasMatchingEdges = matchingEdges.length > 0;
-        const hasMatchingNodes = matchingNodes.length > 0;
-        if (hasMatchingEdges) {
-            if (hasDefaultEdges) {
-                store.setState({
-                    edges: edges.filter((e) => !matchingEdges.some((mE) => mE.id === e.id)),
+            getEdge: (id) => store.getState().edgeLookup.get(id),
+            setNodes,
+            setEdges,
+            addNodes: (payload) => {
+                const newNodes = Array.isArray(payload) ? payload : [payload];
+                batchContext.nodeQueue.push((nodes) => [...nodes, ...newNodes]);
+            },
+            addEdges: (payload) => {
+                const newEdges = Array.isArray(payload) ? payload : [payload];
+                batchContext.edgeQueue.push((edges) => [...edges, ...newEdges]);
+            },
+            toObject: () => {
+                const { nodes = [], edges = [], transform } = store.getState();
+                const [x, y, zoom] = transform;
+                return {
+                    nodes: nodes.map((n) => ({ ...n })),
+                    edges: edges.map((e) => ({ ...e })),
+                    viewport: {
+                        x,
+                        y,
+                        zoom,
+                    },
+                };
+            },
+            deleteElements: async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [] }) => {
+                const { nodes, edges, onNodesDelete, onEdgesDelete, triggerNodeChanges, triggerEdgeChanges, onDelete, onBeforeDelete, } = store.getState();
+                const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
+                    nodesToRemove,
+                    edgesToRemove,
+                    nodes,
+                    edges,
+                    onBeforeDelete,
                 });
-            }
-            onEdgesDelete?.(matchingEdges);
-            onEdgesChange?.(matchingEdges.map((edge) => ({
-                id: edge.id,
-                type: 'remove',
-            })));
-        }
-        if (hasMatchingNodes) {
-            if (hasDefaultNodes) {
-                store.setState({
-                    nodes: nodes.filter((n) => !matchingNodes.some((mN) => mN.id === n.id)),
+                const hasMatchingEdges = matchingEdges.length > 0;
+                const hasMatchingNodes = matchingNodes.length > 0;
+                if (hasMatchingEdges) {
+                    const edgeChanges = matchingEdges.map(elementToRemoveChange);
+                    onEdgesDelete?.(matchingEdges);
+                    triggerEdgeChanges(edgeChanges);
+                }
+                if (hasMatchingNodes) {
+                    const nodeChanges = matchingNodes.map(elementToRemoveChange);
+                    onNodesDelete?.(matchingNodes);
+                    triggerNodeChanges(nodeChanges);
+                }
+                if (hasMatchingNodes || hasMatchingEdges) {
+                    onDelete?.({ nodes: matchingNodes, edges: matchingEdges });
+                }
+                return { deletedNodes: matchingNodes, deletedEdges: matchingEdges };
+            },
+            getIntersectingNodes: (nodeOrRect, partially = true, nodes) => {
+                const isRect = isRectObject(nodeOrRect);
+                const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
+                const hasNodesOption = nodes !== undefined;
+                if (!nodeRect) {
+                    return [];
+                }
+                return (nodes || store.getState().nodes).filter((n) => {
+                    const internalNode = store.getState().nodeLookup.get(n.id);
+                    if (internalNode && !isRect && (n.id === nodeOrRect.id || !internalNode.internals.positionAbsolute)) {
+                        return false;
+                    }
+                    const currNodeRect = nodeToRect(hasNodesOption ? n : internalNode);
+                    const overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
+                    const partiallyVisible = partially && overlappingArea > 0;
+                    return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
                 });
-            }
-            onNodesDelete?.(matchingNodes);
-            onNodesChange?.(matchingNodes.map((node) => ({ id: node.id, type: 'remove' })));
-        }
-        if (hasMatchingNodes || hasMatchingEdges) {
-            onDelete?.({ nodes: matchingNodes, edges: matchingEdges });
-        }
-        return { deletedNodes: matchingNodes, deletedEdges: matchingEdges };
-    }, []);
-    const getNodeRect = useCallback((nodeOrRect) => {
-        const isRect = isRectObject(nodeOrRect);
-        const node = isRect ? null : store.getState().nodeLookup.get(nodeOrRect.id);
-        const nodeRect = isRect ? nodeOrRect : nodeToRect(node);
-        return [nodeRect, node, isRect];
-    }, []);
-    const getIntersectingNodes = useCallback((nodeOrRect, partially = true, nodes) => {
-        const [nodeRect, node, isRect] = getNodeRect(nodeOrRect);
-        if (!nodeRect) {
-            return [];
-        }
-        return (nodes || store.getState().nodes).filter((n) => {
-            if (!isRect && (n.id === node.id || !n.computed?.positionAbsolute)) {
-                return false;
-            }
-            const currNodeRect = nodeToRect(n);
-            const overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
-            const partiallyVisible = partially && overlappingArea > 0;
-            return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
-        });
-    }, []);
-    const isNodeIntersecting = useCallback((nodeOrRect, area, partially = true) => {
-        const [nodeRect] = getNodeRect(nodeOrRect);
-        if (!nodeRect) {
-            return false;
-        }
-        const overlappingArea = getOverlappingArea(nodeRect, area);
-        const partiallyVisible = partially && overlappingArea > 0;
-        return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
+            },
+            isNodeIntersecting: (nodeOrRect, area, partially = true) => {
+                const isRect = isRectObject(nodeOrRect);
+                const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
+                if (!nodeRect) {
+                    return false;
+                }
+                const overlappingArea = getOverlappingArea(nodeRect, area);
+                const partiallyVisible = partially && overlappingArea > 0;
+                return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
+            },
+            updateNode,
+            updateNodeData: (id, dataUpdate, options = { replace: false }) => {
+                updateNode(id, (node) => {
+                    const nextData = typeof dataUpdate === 'function' ? dataUpdate(node) : dataUpdate;
+                    return options.replace ? { ...node, data: nextData } : { ...node, data: { ...node.data, ...nextData } };
+                }, options);
+            },
+            updateEdge,
+            updateEdgeData: (id, dataUpdate, options = { replace: false }) => {
+                updateEdge(id, (edge) => {
+                    const nextData = typeof dataUpdate === 'function' ? dataUpdate(edge) : dataUpdate;
+                    return options.replace ? { ...edge, data: nextData } : { ...edge, data: { ...edge.data, ...nextData } };
+                }, options);
+            },
+        };
     }, []);
-    const updateNode = useCallback((id, nodeUpdate, options = { replace: true }) => {
-        setNodes((prevNodes) => prevNodes.map((node) => {
-            if (node.id === id) {
-                const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node) : nodeUpdate;
-                return options.replace && isNode(nextNode) ? nextNode : { ...node, ...nextNode };
-            }
-            return node;
-        }));
-    }, [setNodes]);
-    const updateNodeData = useCallback((id, dataUpdate, options = { replace: false }) => {
-        updateNode(id, (node) => {
-            const nextData = typeof dataUpdate === 'function' ? dataUpdate(node) : dataUpdate;
-            return options.replace ? { ...node, data: nextData } : { ...node, data: { ...node.data, ...nextData } };
-        }, options);
-    }, [updateNode]);
     return useMemo(() => {
         return {
+            ...generalHelper,
             ...viewportHelper,
-            getNodes,
-            getNode,
-            getEdges,
-            getEdge,
-            setNodes,
-            setEdges,
-            addNodes,
-            addEdges,
-            toObject,
-            deleteElements,
-            getIntersectingNodes,
-            isNodeIntersecting,
-            updateNode,
-            updateNodeData,
+            viewportInitialized,
         };
-    }, [
-        viewportHelper,
-        getNodes,
-        getNode,
-        getEdges,
-        getEdge,
-        setNodes,
-        setEdges,
-        addNodes,
-        addEdges,
-        toObject,
-        deleteElements,
-        getIntersectingNodes,
-        isNodeIntersecting,
-        updateNode,
-        updateNodeData,
-    ]);
+    }, [viewportInitialized]);
 }
 
 const selected = (item) => item.selected;
@@ -886,22 +971,22 @@ const deleteKeyOptions = { actInsideInputWithModifier: false };
  *
  * @internal
  */
-var useGlobalKeyHandler = ({ deleteKeyCode, multiSelectionKeyCode, }) => {
+function useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode, }) {
     const store = useStoreApi();
     const { deleteElements } = useReactFlow();
     const deleteKeyPressed = useKeyPress(deleteKeyCode, deleteKeyOptions);
     const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
     useEffect(() => {
         if (deleteKeyPressed) {
-            const { edges, nodes, onBeforeDelete } = store.getState();
-            deleteElements({ nodes: nodes.filter(selected), edges: edges.filter(selected), onBeforeDelete });
+            const { edges, nodes } = store.getState();
+            deleteElements({ nodes: nodes.filter(selected), edges: edges.filter(selected) });
             store.setState({ nodesSelectionActive: false });
         }
     }, [deleteKeyPressed]);
     useEffect(() => {
         store.setState({ multiSelectionActive: multiSelectionKeyPressed });
     }, [multiSelectionKeyPressed]);
-};
+}
 
 /**
  * Hook for handling resize events.
@@ -948,7 +1033,7 @@ const selector$l = (s) => ({
     userSelectionActive: s.userSelectionActive,
     lib: s.lib,
 });
-const ZoomPane = ({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = true, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, }) => {
+function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = true, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, }) {
     const store = useStoreApi();
     const zoomPane = useRef(null);
     const { userSelectionActive, lib } = useStore(selector$l, shallow);
@@ -1031,7 +1116,7 @@ const ZoomPane = ({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
         lib,
     ]);
     return (jsx("div", { className: "react-flow__renderer", ref: zoomPane, style: containerStyle, children: children }));
-};
+}
 
 const selector$k = (s) => ({
     userSelectionActive: s.userSelectionActive,
@@ -1063,12 +1148,13 @@ const selector$j = (s) => ({
     elementsSelectable: s.elementsSelectable,
     dragging: s.paneDragging,
 });
-const Pane = memo(({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children, }) => {
+function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children, }) {
     const container = useRef(null);
     const store = useStoreApi();
     const prevSelectedNodesCount = useRef(0);
     const prevSelectedEdgesCount = useRef(0);
     const containerBounds = useRef();
+    const edgeIdLookup = useRef(new Map());
     const { userSelectionActive, elementsSelectable, dragging } = useStore(selector$j, shallow);
     const resetUserSelection = () => {
         store.setState({ userSelectionActive: false, userSelectionRect: null });
@@ -1089,7 +1175,7 @@ const Pane = memo(({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag,
     };
     const onWheel = onPaneScroll ? (event) => onPaneScroll(event) : undefined;
     const onMouseDown = (event) => {
-        const { resetSelectedElements, domNode } = store.getState();
+        const { resetSelectedElements, domNode, edgeLookup } = store.getState();
         containerBounds.current = domNode?.getBoundingClientRect();
         if (!elementsSelectable ||
             !isSelecting ||
@@ -1098,6 +1184,11 @@ const Pane = memo(({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag,
             !containerBounds.current) {
             return;
         }
+        edgeIdLookup.current = new Map();
+        for (const [id, edge] of edgeLookup) {
+            edgeIdLookup.current.set(edge.source, edgeIdLookup.current.get(edge.source)?.add(id) || new Set([id]));
+            edgeIdLookup.current.set(edge.target, edgeIdLookup.current.get(edge.target)?.add(id) || new Set([id]));
+        }
         const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
         resetSelectedElements();
         store.setState({
@@ -1113,48 +1204,46 @@ const Pane = memo(({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag,
         onSelectionStart?.(event);
     };
     const onMouseMove = (event) => {
-        const { userSelectionRect, edges, transform, nodeOrigin, nodes, onNodesChange, onEdgesChange } = store.getState();
+        const { userSelectionRect, edgeLookup, transform, nodeOrigin, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = store.getState();
         if (!isSelecting || !containerBounds.current || !userSelectionRect) {
             return;
         }
-        store.setState({ userSelectionActive: true, nodesSelectionActive: false });
-        const mousePos = getEventPosition(event.nativeEvent, containerBounds.current);
-        const startX = userSelectionRect.startX ?? 0;
-        const startY = userSelectionRect.startY ?? 0;
+        const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current);
+        const { startX, startY } = userSelectionRect;
         const nextUserSelectRect = {
-            ...userSelectionRect,
-            x: mousePos.x < startX ? mousePos.x : startX,
-            y: mousePos.y < startY ? mousePos.y : startY,
-            width: Math.abs(mousePos.x - startX),
-            height: Math.abs(mousePos.y - startY),
+            startX,
+            startY,
+            x: mouseX < startX ? mouseX : startX,
+            y: mouseY < startY ? mouseY : startY,
+            width: Math.abs(mouseX - startX),
+            height: Math.abs(mouseY - startY),
         };
-        const selectedNodes = getNodesInside(nodes, nextUserSelectRect, transform, selectionMode === SelectionMode.Partial, true, nodeOrigin);
+        const selectedNodes = getNodesInside(nodeLookup, nextUserSelectRect, transform, selectionMode === SelectionMode.Partial, true, nodeOrigin);
         const selectedEdgeIds = new Set();
         const selectedNodeIds = new Set();
         for (const selectedNode of selectedNodes) {
             selectedNodeIds.add(selectedNode.id);
-            for (const edge of edges) {
-                if (edge.source === selectedNode.id || edge.target === selectedNode.id) {
-                    selectedEdgeIds.add(edge.id);
+            const edgeIds = edgeIdLookup.current.get(selectedNode.id);
+            if (edgeIds) {
+                for (const edgeId of edgeIds) {
+                    selectedEdgeIds.add(edgeId);
                 }
             }
         }
         if (prevSelectedNodesCount.current !== selectedNodeIds.size) {
             prevSelectedNodesCount.current = selectedNodeIds.size;
-            const changes = getSelectionChanges(nodes, selectedNodeIds, true);
-            if (changes.length) {
-                onNodesChange?.(changes);
-            }
+            const changes = getSelectionChanges(nodeLookup, selectedNodeIds, true);
+            triggerNodeChanges(changes);
         }
         if (prevSelectedEdgesCount.current !== selectedEdgeIds.size) {
             prevSelectedEdgesCount.current = selectedEdgeIds.size;
-            const changes = getSelectionChanges(edges, selectedEdgeIds);
-            if (changes.length) {
-                onEdgesChange?.(changes);
-            }
+            const changes = getSelectionChanges(edgeLookup, selectedEdgeIds);
+            triggerEdgeChanges(changes);
         }
         store.setState({
             userSelectionRect: nextUserSelectRect,
+            userSelectionActive: true,
+            nodesSelectionActive: false,
         });
     };
     const onMouseUp = (event) => {
@@ -1179,9 +1268,8 @@ const Pane = memo(({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag,
         resetUserSelection();
     };
     const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
-    return (jsxs("div", { className: cc(['react-flow__pane', { dragging, selection: isSelecting }]), onClick: hasActiveSelection ? undefined : wrapHandler(onClick, container), onContextMenu: wrapHandler(onContextMenu, container), onWheel: wrapHandler(onWheel, container), onMouseEnter: hasActiveSelection ? undefined : onPaneMouseEnter, onMouseDown: hasActiveSelection ? onMouseDown : undefined, onMouseMove: hasActiveSelection ? onMouseMove : onPaneMouseMove, onMouseUp: hasActiveSelection ? onMouseUp : undefined, onMouseLeave: hasActiveSelection ? onMouseLeave : onPaneMouseLeave, ref: container, style: containerStyle, children: [children, jsx(UserSelection, {})] }));
-});
-Pane.displayName = 'Pane';
+    return (jsxs("div", { className: cc(['react-flow__pane', { draggable: panOnDrag, dragging, selection: isSelecting }]), onClick: hasActiveSelection ? undefined : wrapHandler(onClick, container), onContextMenu: wrapHandler(onContextMenu, container), onWheel: wrapHandler(onWheel, container), onMouseEnter: hasActiveSelection ? undefined : onPaneMouseEnter, onMouseDown: hasActiveSelection ? onMouseDown : undefined, onMouseMove: hasActiveSelection ? onMouseMove : onPaneMouseMove, onMouseUp: hasActiveSelection ? onMouseUp : undefined, onMouseLeave: hasActiveSelection ? onMouseLeave : onPaneMouseLeave, ref: container, style: containerStyle, children: [children, jsx(UserSelection, {})] }));
+}
 
 // this handler is called by
 // 1. the click handler when node is not draggable or selectNodesOnDrag = false
@@ -1209,36 +1297,33 @@ function handleNodeClick({ id, store, unselect = false, nodeRef, }) {
  *
  * @internal
  */
-function useDrag({ nodeRef, disabled = false, noDragClassName, handleSelector, nodeId, isSelectable }) {
+function useDrag({ nodeRef, disabled = false, noDragClassName, handleSelector, nodeId, isSelectable, }) {
     const store = useStoreApi();
     const [dragging, setDragging] = useState(false);
     const xyDrag = useRef();
     useEffect(() => {
-        if (nodeRef?.current) {
-            xyDrag.current = XYDrag({
-                domNode: nodeRef.current,
-                getStoreItems: () => store.getState(),
-                onNodeMouseDown: (id) => {
-                    handleNodeClick({
-                        id,
-                        store,
-                        nodeRef: nodeRef,
-                    });
-                },
-                onDragStart: () => {
-                    setDragging(true);
-                },
-                onDragStop: () => {
-                    setDragging(false);
-                },
-            });
-        }
+        xyDrag.current = XYDrag({
+            getStoreItems: () => store.getState(),
+            onNodeMouseDown: (id) => {
+                handleNodeClick({
+                    id,
+                    store,
+                    nodeRef,
+                });
+            },
+            onDragStart: () => {
+                setDragging(true);
+            },
+            onDragStop: () => {
+                setDragging(false);
+            },
+        });
     }, []);
     useEffect(() => {
         if (disabled) {
             xyDrag.current?.destroy();
         }
-        else {
+        else if (nodeRef.current) {
             xyDrag.current?.update({
                 noDragClassName,
                 handleSelector,
@@ -1256,44 +1341,49 @@ function useDrag({ nodeRef, disabled = false, noDragClassName, handleSelector, n
 
 const selectedAndDraggable = (nodesDraggable) => (n) => n.selected && (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined'));
 /**
- * Hook for updating node positions.
+ * Hook for updating node positions by passing a direction and factor
  *
  * @internal
  * @returns function for updating node positions
  */
-function useUpdateNodePositions() {
+function useMoveSelectedNodes() {
     const store = useStoreApi();
-    const updatePositions = useCallback((params) => {
-        const { nodeExtent, nodes, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions } = store.getState();
-        const selectedNodes = nodes.filter(selectedAndDraggable(nodesDraggable));
-        // by default a node moves 5px on each key press, or 20px if shift is pressed
-        // if snap grid is enabled, we use that for the velocity.
+    const moveSelectedNodes = useCallback((params) => {
+        const { nodeExtent, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions, nodeLookup, nodeOrigin } = store.getState();
+        const nodeUpdates = new Map();
+        const isSelected = selectedAndDraggable(nodesDraggable);
+        // by default a node moves 5px on each key press
+        // if snap grid is enabled, we use that for the velocity
         const xVelo = snapToGrid ? snapGrid[0] : 5;
         const yVelo = snapToGrid ? snapGrid[1] : 5;
-        const factor = params.isShiftPressed ? 4 : 1;
-        const xDiff = params.x * xVelo * factor;
-        const yDiff = params.y * yVelo * factor;
-        const nodeUpdates = selectedNodes.map((node) => {
-            if (node.computed?.positionAbsolute) {
-                let nextPosition = {
-                    x: node.computed?.positionAbsolute.x + xDiff,
-                    y: node.computed?.positionAbsolute.y + yDiff,
-                };
-                if (snapToGrid) {
-                    nextPosition = snapPosition(nextPosition, snapGrid);
-                }
-                const { positionAbsolute, position } = calcNextPosition(node, nextPosition, nodes, nodeExtent, undefined, onError);
-                node.position = position;
-                if (!node.computed) {
-                    node.computed = {};
-                }
-                node.computed.positionAbsolute = positionAbsolute;
+        const xDiff = params.direction.x * xVelo * params.factor;
+        const yDiff = params.direction.y * yVelo * params.factor;
+        for (const [, node] of nodeLookup) {
+            if (!isSelected(node)) {
+                continue;
             }
-            return node;
-        });
-        updateNodePositions(nodeUpdates, true, false);
+            let nextPosition = {
+                x: node.internals.positionAbsolute.x + xDiff,
+                y: node.internals.positionAbsolute.y + yDiff,
+            };
+            if (snapToGrid) {
+                nextPosition = snapPosition(nextPosition, snapGrid);
+            }
+            const { position, positionAbsolute } = calculateNodePosition({
+                nodeId: node.id,
+                nextPosition,
+                nodeLookup,
+                nodeExtent,
+                nodeOrigin,
+                onError,
+            });
+            node.position = position;
+            node.internals.positionAbsolute = positionAbsolute;
+            nodeUpdates.set(node.id, node);
+        }
+        updateNodePositions(nodeUpdates);
     }, []);
-    return updatePositions;
+    return moveSelectedNodes;
 }
 
 const NodeIdContext = createContext(null);
@@ -1305,25 +1395,31 @@ const useNodeId = () => {
 };
 
 const selector$i = (s) => ({
-    connectionStartHandle: s.connectionStartHandle,
     connectOnClick: s.connectOnClick,
     noPanClassName: s.noPanClassName,
+    rfId: s.rfId,
 });
 const connectingSelector = (nodeId, handleId, type) => (state) => {
-    const { connectionStartHandle: startHandle, connectionEndHandle: endHandle, connectionClickStartHandle: clickHandle, } = state;
+    const { connectionStartHandle: startHandle, connectionEndHandle: endHandle, connectionClickStartHandle: clickHandle, connectionMode, connectionStatus, } = state;
+    const connectingTo = endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type;
     return {
-        connecting: (startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type) ||
-            (endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type),
+        connectingFrom: startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type,
+        connectingTo,
         clickConnecting: clickHandle?.nodeId === nodeId && clickHandle?.handleId === handleId && clickHandle?.type === type,
+        isPossibleEndHandle: connectionMode === ConnectionMode.Strict
+            ? startHandle?.type !== type
+            : nodeId !== startHandle?.nodeId || handleId !== startHandle?.handleId,
+        connectionInProcess: !!startHandle,
+        valid: connectingTo && connectionStatus === 'valid',
     };
 };
-const Handle = forwardRef(({ type = 'source', position = Position.Top, isValidConnection, isConnectable = true, isConnectableStart = true, isConnectableEnd = true, id, onConnect, children, className, onMouseDown, onTouchStart, ...rest }, ref) => {
+function HandleComponent({ type = 'source', position = Position.Top, isValidConnection, isConnectable = true, isConnectableStart = true, isConnectableEnd = true, id, onConnect, children, className, onMouseDown, onTouchStart, ...rest }, ref) {
     const handleId = id || null;
     const isTarget = type === 'target';
     const store = useStoreApi();
     const nodeId = useNodeId();
-    const { connectOnClick, noPanClassName } = useStore(selector$i, shallow);
-    const { connecting, clickConnecting } = useStore(connectingSelector(nodeId, handleId, type), shallow);
+    const { connectOnClick, noPanClassName, rfId } = useStore(selector$i, shallow);
+    const { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess, valid } = useStore(connectingSelector(nodeId, handleId, type), shallow);
     if (!nodeId) {
         store.getState().onError?.('010', errorMessages['error010']());
     }
@@ -1353,11 +1449,12 @@ const Handle = forwardRef(({ type = 'source', position = Position.Top, isValidCo
                 connectionMode: currentStore.connectionMode,
                 connectionRadius: currentStore.connectionRadius,
                 domNode: currentStore.domNode,
-                nodes: currentStore.nodes,
+                nodeLookup: currentStore.nodeLookup,
                 lib: currentStore.lib,
                 isTarget,
                 handleId,
                 nodeId,
+                flowId: currentStore.rfId,
                 panBy: currentStore.panBy,
                 cancelConnection: currentStore.cancelConnection,
                 onConnectStart: currentStore.onConnectStart,
@@ -1366,6 +1463,7 @@ const Handle = forwardRef(({ type = 'source', position = Position.Top, isValidCo
                 onConnect: onConnectExtended,
                 isValidConnection: isValidConnection || currentStore.isValidConnection,
                 getTransform: () => store.getState().transform,
+                getConnectionStartHandle: () => store.getState().connectionStartHandle,
             });
         }
         if (isMouseTriggered) {
@@ -1376,7 +1474,7 @@ const Handle = forwardRef(({ type = 'source', position = Position.Top, isValidCo
         }
     };
     const onClick = (event) => {
-        const { onClickConnectStart, onClickConnectEnd, connectionClickStartHandle, connectionMode, isValidConnection: isValidConnectionStore, lib, } = store.getState();
+        const { onClickConnectStart, onClickConnectEnd, connectionClickStartHandle, connectionMode, isValidConnection: isValidConnectionStore, lib, rfId: flowId, } = store.getState();
         if (!nodeId || (!connectionClickStartHandle && !isConnectableStart)) {
             return;
         }
@@ -1398,6 +1496,7 @@ const Handle = forwardRef(({ type = 'source', position = Position.Top, isValidCo
             fromHandleId: connectionClickStartHandle.handleId || null,
             fromType: connectionClickStartHandle.type,
             isValidConnection: isValidConnectionHandler,
+            flowId,
             doc,
             lib,
         });
@@ -1407,7 +1506,7 @@ const Handle = forwardRef(({ type = 'source', position = Position.Top, isValidCo
         onClickConnectEnd?.(event);
         store.setState({ connectionClickStartHandle: null });
     };
-    return (jsx("div", { "data-handleid": handleId, "data-nodeid": nodeId, "data-handlepos": position, "data-id": `${nodeId}-${handleId}-${type}`, className: cc([
+    return (jsx("div", { "data-handleid": handleId, "data-nodeid": nodeId, "data-handlepos": position, "data-id": `${rfId}-${nodeId}-${handleId}-${type}`, className: cc([
             'react-flow__handle',
             `react-flow__handle-${position}`,
             'nodrag',
@@ -1419,31 +1518,38 @@ const Handle = forwardRef(({ type = 'source', position = Position.Top, isValidCo
                 connectable: isConnectable,
                 connectablestart: isConnectableStart,
                 connectableend: isConnectableEnd,
-                connecting: clickConnecting,
-                // this class is used to style the handle when the user is connecting
-                connectionindicator: isConnectable && ((isConnectableStart && !connecting) || (isConnectableEnd && connecting)),
+                clickconnecting: clickConnecting,
+                connectingfrom: connectingFrom,
+                connectingto: connectingTo,
+                valid,
+                // shows where you can start a connection from
+                // and where you can end it while connecting
+                connectionindicator: isConnectable &&
+                    (!connectionInProcess || isPossibleEndHandle) &&
+                    (connectionInProcess ? isConnectableEnd : isConnectableStart),
             },
         ]), onMouseDown: onPointerDown, onTouchStart: onPointerDown, onClick: connectOnClick ? onClick : undefined, ref: ref, ...rest, children: children }));
-});
-Handle.displayName = 'Handle';
-var Handle$1 = memo(Handle);
+}
+/**
+ * The Handle component is a UI element that is used to connect nodes.
+ */
+const Handle = memo(fixedForwardRef(HandleComponent));
 
-const InputNode = ({ data, isConnectable, sourcePosition = Position.Bottom }) => (jsxs(Fragment, { children: [data?.label, jsx(Handle$1, { type: "source", position: sourcePosition, isConnectable: isConnectable })] }));
-InputNode.displayName = 'InputNode';
-var InputNode$1 = memo(InputNode);
+function InputNode({ data, isConnectable, sourcePosition = Position.Bottom }) {
+    return (jsxs(Fragment, { children: [data?.label, jsx(Handle, { type: "source", position: sourcePosition, isConnectable: isConnectable })] }));
+}
 
-const DefaultNode = ({ data, isConnectable, targetPosition = Position.Top, sourcePosition = Position.Bottom, }) => {
-    return (jsxs(Fragment, { children: [jsx(Handle$1, { type: "target", position: targetPosition, isConnectable: isConnectable }), data?.label, jsx(Handle$1, { type: "source", position: sourcePosition, isConnectable: isConnectable })] }));
-};
-DefaultNode.displayName = 'DefaultNode';
-var DefaultNode$1 = memo(DefaultNode);
+function DefaultNode({ data, isConnectable, targetPosition = Position.Top, sourcePosition = Position.Bottom, }) {
+    return (jsxs(Fragment, { children: [jsx(Handle, { type: "target", position: targetPosition, isConnectable: isConnectable }), data?.label, jsx(Handle, { type: "source", position: sourcePosition, isConnectable: isConnectable })] }));
+}
 
-const GroupNode = () => null;
-GroupNode.displayName = 'GroupNode';
+function GroupNode() {
+    return null;
+}
 
-const OutputNode = ({ data, isConnectable, targetPosition = Position.Top }) => (jsxs(Fragment, { children: [jsx(Handle$1, { type: "target", position: targetPosition, isConnectable: isConnectable }), data?.label] }));
-OutputNode.displayName = 'OutputNode';
-var OutputNode$1 = memo(OutputNode);
+function OutputNode({ data, isConnectable, targetPosition = Position.Top }) {
+    return (jsxs(Fragment, { children: [jsx(Handle, { type: "target", position: targetPosition, isConnectable: isConnectable }), data?.label] }));
+}
 
 const arrowKeyDiffs = {
     ArrowUp: { x: 0, y: -1 },
@@ -1452,26 +1558,40 @@ const arrowKeyDiffs = {
     ArrowRight: { x: 1, y: 0 },
 };
 const builtinNodeTypes = {
-    input: InputNode$1,
-    default: DefaultNode$1,
-    output: OutputNode$1,
+    input: InputNode,
+    default: DefaultNode,
+    output: OutputNode,
     group: GroupNode,
 };
+function getNodeInlineStyleDimensions(node) {
+    if (node.internals.handleBounds === undefined) {
+        return {
+            width: node.width ?? node.initialWidth ?? node.style?.width,
+            height: node.height ?? node.initialHeight ?? node.style?.height,
+        };
+    }
+    return {
+        width: node.width ?? node.style?.width,
+        height: node.height ?? node.style?.height,
+    };
+}
 
 const selector$h = (s) => {
-    const selectedNodes = s.nodes.filter((n) => n.selected);
-    const { width, height, x, y } = getNodesBounds(selectedNodes, s.nodeOrigin);
+    const { width, height, x, y } = getInternalNodesBounds(s.nodeLookup, {
+        nodeOrigin: s.nodeOrigin,
+        filter: (node) => !!node.selected,
+    });
     return {
-        width,
-        height,
+        width: isNumeric(width) ? width : null,
+        height: isNumeric(height) ? height : null,
         userSelectionActive: s.userSelectionActive,
         transformString: `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]}) translate(${x}px,${y}px)`,
     };
 };
-function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }) {
+function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y, }) {
     const store = useStoreApi();
     const { width, height, transformString, userSelectionActive } = useStore(selector$h, shallow);
-    const updatePositions = useUpdateNodePositions();
+    const moveSelectedNodes = useMoveSelectedNodes();
     const nodeRef = useRef(null);
     useEffect(() => {
         if (!disableKeyboardA11y) {
@@ -1494,10 +1614,9 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
         : undefined;
     const onKeyDown = (event) => {
         if (Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
-            updatePositions({
-                x: arrowKeyDiffs[event.key].x,
-                y: arrowKeyDiffs[event.key].y,
-                isShiftPressed: event.shiftKey,
+            moveSelectedNodes({
+                direction: arrowKeyDiffs[event.key],
+                factor: event.shiftKey ? 4 : 1,
             });
         }
     };
@@ -1508,25 +1627,26 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
                 height,
             } }) }));
 }
-var NodesSelection$1 = memo(NodesSelection);
 
-const selector$g = (s) => s.nodesSelectionActive;
-const FlowRenderer = ({ children, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport, }) => {
-    const nodesSelectionActive = useStore(selector$g);
+const selector$g = (s) => {
+    return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive };
+};
+function FlowRendererComponent({ children, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport, }) {
+    const { nodesSelectionActive, userSelectionActive } = useStore(selector$g);
     const selectionKeyPressed = useKeyPress(selectionKeyCode);
     const panActivationKeyPressed = useKeyPress(panActivationKeyCode);
     const panOnDrag = panActivationKeyPressed || _panOnDrag;
     const panOnScroll = panActivationKeyPressed || _panOnScroll;
-    const isSelecting = selectionKeyPressed || (selectionOnDrag && panOnDrag !== true);
+    const isSelecting = selectionKeyPressed || userSelectionActive || (selectionOnDrag && panOnDrag !== true);
     useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode });
-    return (jsx(ZoomPane, { onPaneContextMenu: onPaneContextMenu, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, zoomOnDoubleClick: zoomOnDoubleClick, panOnDrag: !selectionKeyPressed && panOnDrag, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, zoomActivationKeyCode: zoomActivationKeyCode, preventScrolling: preventScrolling, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, onViewportChange: onViewportChange, isControlledViewport: isControlledViewport, children: jsxs(Pane, { onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, panOnDrag: panOnDrag, isSelecting: !!isSelecting, selectionMode: selectionMode, children: [children, nodesSelectionActive && (jsx(NodesSelection$1, { onSelectionContextMenu: onSelectionContextMenu, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y }))] }) }));
-};
-FlowRenderer.displayName = 'FlowRenderer';
-var FlowRenderer$1 = memo(FlowRenderer);
+    return (jsx(ZoomPane, { onPaneContextMenu: onPaneContextMenu, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, zoomOnDoubleClick: zoomOnDoubleClick, panOnDrag: !selectionKeyPressed && panOnDrag, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, zoomActivationKeyCode: zoomActivationKeyCode, preventScrolling: preventScrolling, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, onViewportChange: onViewportChange, isControlledViewport: isControlledViewport, children: jsxs(Pane, { onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, panOnDrag: panOnDrag, isSelecting: !!isSelecting, selectionMode: selectionMode, children: [children, nodesSelectionActive && (jsx(NodesSelection, { onSelectionContextMenu: onSelectionContextMenu, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y }))] }) }));
+}
+FlowRendererComponent.displayName = 'FlowRenderer';
+const FlowRenderer = memo(FlowRendererComponent);
 
 const selector$f = (onlyRenderVisible) => (s) => {
     return onlyRenderVisible
-        ? getNodesInside(s.nodes, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true).map((node) => node.id)
+        ? getNodesInside(s.nodeLookup, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true).map((node) => node.id)
         : Array.from(s.nodeLookup.keys());
 };
 /**
@@ -1541,51 +1661,93 @@ function useVisibleNodeIds(onlyRenderVisible) {
     return nodeIds;
 }
 
-const selector$e = (s) => s.updateNodeDimensions;
+const selector$e = (s) => s.updateNodeInternals;
 function useResizeObserver() {
-    const updateNodeDimensions = useStore(selector$e);
-    const resizeObserverRef = useRef();
-    const resizeObserver = useMemo(() => {
+    const updateNodeInternals = useStore(selector$e);
+    const [resizeObserver] = useState(() => {
         if (typeof ResizeObserver === 'undefined') {
             return null;
         }
-        const observer = new ResizeObserver((entries) => {
+        return new ResizeObserver((entries) => {
             const updates = new Map();
             entries.forEach((entry) => {
                 const id = entry.target.getAttribute('data-id');
                 updates.set(id, {
                     id,
                     nodeElement: entry.target,
-                    forceUpdate: true,
+                    force: true,
                 });
             });
-            updateNodeDimensions(updates);
+            updateNodeInternals(updates);
         });
-        resizeObserverRef.current = observer;
-        return observer;
-    }, []);
+    });
     useEffect(() => {
         return () => {
-            resizeObserverRef?.current?.disconnect();
+            resizeObserver?.disconnect();
         };
-    }, []);
+    }, [resizeObserver]);
     return resizeObserver;
 }
 
-const NodeWrapper = ({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, nodesDraggable, elementsSelectable, nodesConnectable, nodesFocusable, resizeObserver, noDragClassName, noPanClassName, disableKeyboardA11y, rfId, nodeTypes, nodeExtent, nodeOrigin, onError, }) => {
-    const { node, positionAbsoluteX, positionAbsoluteY, zIndex, isParent } = useStore((s) => {
+/**
+ * Hook to handle the resize observation + internal updates for the passed node.
+ *
+ * @internal
+ * @returns nodeRef - reference to the node element
+ */
+function useNodeObserver({ node, nodeType, hasDimensions, resizeObserver, }) {
+    const store = useStoreApi();
+    const nodeRef = useRef(null);
+    const observedNode = useRef(null);
+    const prevSourcePosition = useRef(node.sourcePosition);
+    const prevTargetPosition = useRef(node.targetPosition);
+    const prevType = useRef(nodeType);
+    const isInitialized = hasDimensions && !!node.internals.handleBounds;
+    useEffect(() => {
+        if (nodeRef.current && !node.hidden && (!isInitialized || observedNode.current !== nodeRef.current)) {
+            if (observedNode.current) {
+                resizeObserver?.unobserve(observedNode.current);
+            }
+            resizeObserver?.observe(nodeRef.current);
+            observedNode.current = nodeRef.current;
+        }
+    }, [isInitialized, node.hidden]);
+    useEffect(() => {
+        return () => {
+            if (observedNode.current) {
+                resizeObserver?.unobserve(observedNode.current);
+                observedNode.current = null;
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (nodeRef.current) {
+            // when the user programmatically changes the source or handle position, we need to update the internals
+            // to make sure the edges are updated correctly
+            const typeChanged = prevType.current !== nodeType;
+            const sourcePosChanged = prevSourcePosition.current !== node.sourcePosition;
+            const targetPosChanged = prevTargetPosition.current !== node.targetPosition;
+            if (typeChanged || sourcePosChanged || targetPosChanged) {
+                prevType.current = nodeType;
+                prevSourcePosition.current = node.sourcePosition;
+                prevTargetPosition.current = node.targetPosition;
+                store
+                    .getState()
+                    .updateNodeInternals(new Map([[node.id, { id: node.id, nodeElement: nodeRef.current, force: true }]]));
+            }
+        }
+    }, [node.id, nodeType, node.sourcePosition, node.targetPosition]);
+    return nodeRef;
+}
+
+function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, nodesDraggable, elementsSelectable, nodesConnectable, nodesFocusable, resizeObserver, noDragClassName, noPanClassName, disableKeyboardA11y, rfId, nodeTypes, nodeExtent, nodeOrigin, onError, }) {
+    const { node, internals, isParent } = useStore((s) => {
         const node = s.nodeLookup.get(id);
-        const positionAbsolute = nodeExtent
-            ? clampPosition(node.computed?.positionAbsolute, nodeExtent)
-            : node.computed?.positionAbsolute || { x: 0, y: 0 };
+        const isParent = s.parentLookup.has(id);
         return {
             node,
-            // we are mutating positionAbsolute, z and isParent attributes for sub flows
-            // so we we need to force a re-render when some change
-            positionAbsoluteX: positionAbsolute.x,
-            positionAbsoluteY: positionAbsolute.y,
-            zIndex: node[internalsSymbol]?.z ?? 0,
-            isParent: !!node[internalsSymbol]?.isParent,
+            internals: node.internals,
+            isParent,
         };
     }, shallow);
     let nodeType = node.type || 'default';
@@ -1600,36 +1762,8 @@ const NodeWrapper = ({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
     const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined'));
     const isFocusable = !!(node.focusable || (nodesFocusable && typeof node.focusable === 'undefined'));
     const store = useStoreApi();
-    const nodeRef = useRef(null);
-    const prevSourcePosition = useRef(node.sourcePosition);
-    const prevTargetPosition = useRef(node.targetPosition);
-    const prevType = useRef(nodeType);
-    const updatePositions = useUpdateNodePositions();
-    useEffect(() => {
-        if (nodeRef.current && !node.hidden) {
-            const currNode = nodeRef.current;
-            resizeObserver?.observe(currNode);
-            return () => resizeObserver?.unobserve(currNode);
-        }
-    }, [node.hidden]);
-    useEffect(() => {
-        // when the user programmatically changes the source or handle position, we re-initialize the node
-        const typeChanged = prevType.current !== nodeType;
-        const sourcePosChanged = prevSourcePosition.current !== node.sourcePosition;
-        const targetPosChanged = prevTargetPosition.current !== node.targetPosition;
-        if (nodeRef.current && (typeChanged || sourcePosChanged || targetPosChanged)) {
-            if (typeChanged) {
-                prevType.current = nodeType;
-            }
-            if (sourcePosChanged) {
-                prevSourcePosition.current = node.sourcePosition;
-            }
-            if (targetPosChanged) {
-                prevTargetPosition.current = node.targetPosition;
-            }
-            store.getState().updateNodeDimensions(new Map([[id, { id, nodeElement: nodeRef.current, forceUpdate: true }]]));
-        }
-    }, [id, nodeType, node.sourcePosition, node.targetPosition]);
+    const hasDimensions = nodeHasDimensions(node);
+    const nodeRef = useNodeObserver({ node, nodeType, hasDimensions, resizeObserver });
     const dragging = useDrag({
         nodeRef,
         disabled: node.hidden || !isDraggable,
@@ -1638,27 +1772,36 @@ const NodeWrapper = ({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
         nodeId: id,
         isSelectable,
     });
+    const moveSelectedNodes = useMoveSelectedNodes();
     if (node.hidden) {
         return null;
     }
-    const width = node.width ?? undefined;
-    const height = node.height ?? undefined;
-    const computedWidth = node.computed?.width;
-    const computedHeight = node.computed?.height;
-    const positionAbsoluteOrigin = getPositionWithOrigin({
-        x: positionAbsoluteX,
-        y: positionAbsoluteY,
-        width: computedWidth ?? width ?? 0,
-        height: computedHeight ?? height ?? 0,
+    const nodeDimensions = getNodeDimensions(node);
+    const inlineDimensions = getNodeInlineStyleDimensions(node);
+    const clampedPosition = nodeExtent
+        ? clampPosition(internals.positionAbsolute, nodeExtent)
+        : internals.positionAbsolute;
+    const positionWithOrigin = getPositionWithOrigin({
+        ...clampedPosition,
+        ...nodeDimensions,
         origin: node.origin || nodeOrigin,
     });
-    const initialized = (!!computedWidth && !!computedHeight) || (!!width && !!height);
     const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
-    const onMouseEnterHandler = onMouseEnter ? (event) => onMouseEnter(event, { ...node }) : undefined;
-    const onMouseMoveHandler = onMouseMove ? (event) => onMouseMove(event, { ...node }) : undefined;
-    const onMouseLeaveHandler = onMouseLeave ? (event) => onMouseLeave(event, { ...node }) : undefined;
-    const onContextMenuHandler = onContextMenu ? (event) => onContextMenu(event, { ...node }) : undefined;
-    const onDoubleClickHandler = onDoubleClick ? (event) => onDoubleClick(event, { ...node }) : undefined;
+    const onMouseEnterHandler = onMouseEnter
+        ? (event) => onMouseEnter(event, { ...internals.userNode })
+        : undefined;
+    const onMouseMoveHandler = onMouseMove
+        ? (event) => onMouseMove(event, { ...internals.userNode })
+        : undefined;
+    const onMouseLeaveHandler = onMouseLeave
+        ? (event) => onMouseLeave(event, { ...internals.userNode })
+        : undefined;
+    const onContextMenuHandler = onContextMenu
+        ? (event) => onContextMenu(event, { ...internals.userNode })
+        : undefined;
+    const onDoubleClickHandler = onDoubleClick
+        ? (event) => onDoubleClick(event, { ...internals.userNode })
+        : undefined;
     const onSelectNodeHandler = (event) => {
         const { selectNodesOnDrag, nodeDragThreshold } = store.getState();
         if (isSelectable && (!selectNodesOnDrag || !isDraggable || nodeDragThreshold > 0)) {
@@ -1671,11 +1814,11 @@ const NodeWrapper = ({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
             });
         }
         if (onClick) {
-            onClick(event, { ...node });
+            onClick(event, { ...internals.userNode });
         }
     };
     const onKeyDown = (event) => {
-        if (isInputDOMNode(event.nativeEvent)) {
+        if (isInputDOMNode(event.nativeEvent) || disableKeyboardA11y) {
             return;
         }
         if (elementSelectionKeys.includes(event.key) && isSelectable) {
@@ -1687,19 +1830,15 @@ const NodeWrapper = ({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
                 nodeRef,
             });
         }
-        else if (!disableKeyboardA11y &&
-            isDraggable &&
-            node.selected &&
-            Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
+        else if (isDraggable && node.selected && Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
             store.setState({
                 ariaLiveMessage: `Moved selected node ${event.key
                     .replace('Arrow', '')
-                    .toLowerCase()}. New position, x: ${~~positionAbsoluteX}, y: ${~~positionAbsoluteY}`,
+                    .toLowerCase()}. New position, x: ${~~clampedPosition.x}, y: ${~~clampedPosition.y}`,
             });
-            updatePositions({
-                x: arrowKeyDiffs[event.key].x,
-                y: arrowKeyDiffs[event.key].y,
-                isShiftPressed: event.shiftKey,
+            moveSelectedNodes({
+                direction: arrowKeyDiffs[event.key],
+                factor: event.shiftKey ? 4 : 1,
             });
         }
     };
@@ -1715,20 +1854,18 @@ const NodeWrapper = ({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
                 selected: node.selected,
                 selectable: isSelectable,
                 parent: isParent,
+                draggable: isDraggable,
                 dragging,
             },
         ]), ref: nodeRef, style: {
-            zIndex,
-            transform: `translate(${positionAbsoluteOrigin.x}px,${positionAbsoluteOrigin.y}px)`,
+            zIndex: internals.z,
+            transform: `translate(${positionWithOrigin.x}px,${positionWithOrigin.y}px)`,
             pointerEvents: hasPointerEvents ? 'all' : 'none',
-            visibility: initialized ? 'visible' : 'hidden',
-            width,
-            height,
+            visibility: hasDimensions ? 'visible' : 'hidden',
             ...node.style,
-        }, "data-id": id, "data-testid": `rf__node-${id}`, onMouseEnter: onMouseEnterHandler, onMouseMove: onMouseMoveHandler, onMouseLeave: onMouseLeaveHandler, onContextMenu: onContextMenuHandler, onClick: onSelectNodeHandler, onDoubleClick: onDoubleClickHandler, onKeyDown: isFocusable ? onKeyDown : undefined, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : undefined, "aria-describedby": disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`, "aria-label": node.ariaLabel, children: jsx(Provider, { value: id, children: jsx(NodeComponent, { id: id, data: node.data, type: nodeType, width: computedWidth, height: computedHeight, positionAbsoluteX: positionAbsoluteX, positionAbsoluteY: positionAbsoluteY, selected: node.selected, isConnectable: isConnectable, sourcePosition: node.sourcePosition, targetPosition: node.targetPosition, dragging: dragging, dragHandle: node.dragHandle, zIndex: zIndex }) }) }));
-};
-NodeWrapper.displayName = 'NodeWrapper';
-var NodeWrapper$1 = memo(NodeWrapper);
+            ...inlineDimensions,
+        }, "data-id": id, "data-testid": `rf__node-${id}`, onMouseEnter: onMouseEnterHandler, onMouseMove: onMouseMoveHandler, onMouseLeave: onMouseLeaveHandler, onContextMenu: onContextMenuHandler, onClick: onSelectNodeHandler, onDoubleClick: onDoubleClickHandler, onKeyDown: isFocusable ? onKeyDown : undefined, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : undefined, "aria-describedby": disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`, "aria-label": node.ariaLabel, children: jsx(Provider, { value: id, children: jsx(NodeComponent, { id: id, data: node.data, type: nodeType, positionAbsoluteX: clampedPosition.x, positionAbsoluteY: clampedPosition.y, selected: node.selected, selectable: isSelectable, draggable: isDraggable, deletable: node.deletable ?? true, isConnectable: isConnectable, sourcePosition: node.sourcePosition, targetPosition: node.targetPosition, dragging: dragging, dragHandle: node.dragHandle, zIndex: internals.z, parentId: node.parentId, ...nodeDimensions }) }) }));
+}
 
 const selector$d = (s) => ({
     nodesDraggable: s.nodesDraggable,
@@ -1737,7 +1874,7 @@ const selector$d = (s) => ({
     elementsSelectable: s.elementsSelectable,
     onError: s.onError,
 });
-const NodeRenderer = (props) => {
+function NodeRendererComponent(props) {
     const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector$d, shallow);
     const nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements);
     const resizeObserver = useResizeObserver();
@@ -1766,11 +1903,11 @@ const NodeRenderer = (props) => {
             //   moved into `NodeComponentWrapper`. This ensures they are
             //   memorized – so if `NodeRenderer` *has* to rerender, it only
             //   needs to regenerate the list of nodes, nothing else.
-            jsx(NodeWrapper$1, { id: nodeId, nodeTypes: props.nodeTypes, nodeExtent: props.nodeExtent, nodeOrigin: props.nodeOrigin, onClick: props.onNodeClick, onMouseEnter: props.onNodeMouseEnter, onMouseMove: props.onNodeMouseMove, onMouseLeave: props.onNodeMouseLeave, onContextMenu: props.onNodeContextMenu, onDoubleClick: props.onNodeDoubleClick, noDragClassName: props.noDragClassName, noPanClassName: props.noPanClassName, rfId: props.rfId, disableKeyboardA11y: props.disableKeyboardA11y, resizeObserver: resizeObserver, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, elementsSelectable: elementsSelectable, onError: onError }, nodeId));
+            jsx(NodeWrapper, { id: nodeId, nodeTypes: props.nodeTypes, nodeExtent: props.nodeExtent, nodeOrigin: props.nodeOrigin, onClick: props.onNodeClick, onMouseEnter: props.onNodeMouseEnter, onMouseMove: props.onNodeMouseMove, onMouseLeave: props.onNodeMouseLeave, onContextMenu: props.onNodeContextMenu, onDoubleClick: props.onNodeDoubleClick, noDragClassName: props.noDragClassName, noPanClassName: props.noPanClassName, rfId: props.rfId, disableKeyboardA11y: props.disableKeyboardA11y, resizeObserver: resizeObserver, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, elementsSelectable: elementsSelectable, onError: onError }, nodeId));
         }) }));
-};
-NodeRenderer.displayName = 'NodeRenderer';
-var NodeRenderer$1 = memo(NodeRenderer);
+}
+NodeRendererComponent.displayName = 'NodeRenderer';
+const NodeRenderer = memo(NodeRendererComponent);
 
 /**
  * Hook for getting the visible edge ids from the store.
@@ -1844,18 +1981,21 @@ const Marker = ({ id, type, color, width = 12.5, height = 12.5, markerUnits = 's
     }
     return (jsx("marker", { className: "react-flow__arrowhead", id: id, markerWidth: `${width}`, markerHeight: `${height}`, viewBox: "-10 -10 20 20", markerUnits: markerUnits, orient: orient, refX: "0", refY: "0", children: jsx(Symbol, { color: color, strokeWidth: strokeWidth }) }));
 };
-const markerSelector = ({ defaultColor, rfId }) => (s) => {
-    const markers = createMarkerIds(s.edges, { id: rfId, defaultColor });
-    return markers;
-};
-const markersEqual = (a, b) => 
-// the id includes all marker options, so we just need to look at that part of the marker
-!(a.length !== b.length || a.some((m, i) => m.id !== b[i].id));
 // when you have multiple flows on a page and you hide the first one, the other ones have no markers anymore
 // when they do have markers with the same ids. To prevent this the user can pass a unique id to the react flow wrapper
 // that we can then use for creating our unique marker ids
 const MarkerDefinitions = ({ defaultColor, rfId }) => {
-    const markers = useStore(useCallback(markerSelector({ defaultColor, rfId }), [defaultColor, rfId]), markersEqual);
+    const edges = useStore((s) => s.edges);
+    const defaultEdgeOptions = useStore((s) => s.defaultEdgeOptions);
+    const markers = useMemo(() => {
+        const markers = createMarkerIds(edges, {
+            id: rfId,
+            defaultColor,
+            defaultMarkerStart: defaultEdgeOptions?.markerStart,
+            defaultMarkerEnd: defaultEdgeOptions?.markerEnd,
+        });
+        return markers;
+    }, [edges, defaultEdgeOptions, rfId, defaultColor]);
     if (!markers.length) {
         return null;
     }
@@ -1864,31 +2004,32 @@ const MarkerDefinitions = ({ defaultColor, rfId }) => {
 MarkerDefinitions.displayName = 'MarkerDefinitions';
 var MarkerDefinitions$1 = memo(MarkerDefinitions);
 
-const EdgeText = ({ x, y, label, labelStyle = {}, labelShowBg = true, labelBgStyle = {}, labelBgPadding = [2, 4], labelBgBorderRadius = 2, children, className, ...rest }) => {
+function EdgeTextComponent({ x, y, label, labelStyle = {}, labelShowBg = true, labelBgStyle = {}, labelBgPadding = [2, 4], labelBgBorderRadius = 2, children, className, ...rest }) {
     const [edgeTextBbox, setEdgeTextBbox] = useState({ x: 1, y: 0, width: 0, height: 0 });
     const edgeTextClasses = cc(['react-flow__edge-textwrapper', className]);
-    const onEdgeTextRefChange = useCallback((edgeRef) => {
-        if (edgeRef === null)
-            return;
-        const textBbox = edgeRef.getBBox();
-        setEdgeTextBbox({
-            x: textBbox.x,
-            y: textBbox.y,
-            width: textBbox.width,
-            height: textBbox.height,
-        });
-    }, []);
+    const edgeTextRef = useRef(null);
+    useEffect(() => {
+        if (edgeTextRef.current) {
+            const textBbox = edgeTextRef.current.getBBox();
+            setEdgeTextBbox({
+                x: textBbox.x,
+                y: textBbox.y,
+                width: textBbox.width,
+                height: textBbox.height,
+            });
+        }
+    }, [label]);
     if (typeof label === 'undefined' || !label) {
         return null;
     }
-    return (jsxs("g", { transform: `translate(${x - edgeTextBbox.width / 2} ${y - edgeTextBbox.height / 2})`, className: edgeTextClasses, visibility: edgeTextBbox.width ? 'visible' : 'hidden', ...rest, children: [labelShowBg && (jsx("rect", { width: edgeTextBbox.width + 2 * labelBgPadding[0], x: -labelBgPadding[0], y: -labelBgPadding[1], height: edgeTextBbox.height + 2 * labelBgPadding[1], className: "react-flow__edge-textbg", style: labelBgStyle, rx: labelBgBorderRadius, ry: labelBgBorderRadius })), jsx("text", { className: "react-flow__edge-text", y: edgeTextBbox.height / 2, dy: "0.3em", ref: onEdgeTextRefChange, style: labelStyle, children: label }), children] }));
-};
-var EdgeText$1 = memo(EdgeText);
+    return (jsxs("g", { transform: `translate(${x - edgeTextBbox.width / 2} ${y - edgeTextBbox.height / 2})`, className: edgeTextClasses, visibility: edgeTextBbox.width ? 'visible' : 'hidden', ...rest, children: [labelShowBg && (jsx("rect", { width: edgeTextBbox.width + 2 * labelBgPadding[0], x: -labelBgPadding[0], y: -labelBgPadding[1], height: edgeTextBbox.height + 2 * labelBgPadding[1], className: "react-flow__edge-textbg", style: labelBgStyle, rx: labelBgBorderRadius, ry: labelBgBorderRadius })), jsx("text", { className: "react-flow__edge-text", y: edgeTextBbox.height / 2, dy: "0.3em", ref: edgeTextRef, style: labelStyle, children: label }), children] }));
+}
+EdgeTextComponent.displayName = 'EdgeText';
+const EdgeText = memo(EdgeTextComponent);
 
-const BaseEdge = ({ id, path, labelX, labelY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, className, interactionWidth = 20, }) => {
-    return (jsxs(Fragment, { children: [jsx("path", { id: id, style: style, d: path, fill: "none", className: cc(['react-flow__edge-path', className]), markerEnd: markerEnd, markerStart: markerStart }), interactionWidth && (jsx("path", { d: path, fill: "none", strokeOpacity: 0, strokeWidth: interactionWidth, className: "react-flow__edge-interaction" })), label && isNumeric(labelX) && isNumeric(labelY) ? (jsx(EdgeText$1, { x: labelX, y: labelY, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius })) : null] }));
-};
-BaseEdge.displayName = 'BaseEdge';
+function BaseEdge({ id, path, labelX, labelY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, className, interactionWidth = 20, }) {
+    return (jsxs(Fragment, { children: [jsx("path", { id: id, style: style, d: path, fill: "none", className: cc(['react-flow__edge-path', className]), markerEnd: markerEnd, markerStart: markerStart }), interactionWidth && (jsx("path", { d: path, fill: "none", strokeOpacity: 0, strokeWidth: interactionWidth, className: "react-flow__edge-interaction" })), label && isNumeric(labelX) && isNumeric(labelY) ? (jsx(EdgeText, { x: labelX, y: labelY, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius })) : null] }));
+}
 
 function getControl({ pos, x1, y1, x2, y2 }) {
     if (pos === Position.Left || pos === Position.Right) {
@@ -2048,7 +2189,9 @@ const shiftY = (y, shift, position) => {
     return y;
 };
 const EdgeUpdaterClassName = 'react-flow__edgeupdater';
-const EdgeAnchor = ({ position, centerX, centerY, radius = 10, onMouseDown, onMouseEnter, onMouseOut, type, }) => (jsx("circle", { onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseOut: onMouseOut, className: cc([EdgeUpdaterClassName, `${EdgeUpdaterClassName}-${type}`]), cx: shiftX(centerX, radius, position), cy: shiftY(centerY, radius, position), r: radius, stroke: "transparent", fill: "transparent" }));
+function EdgeAnchor({ position, centerX, centerY, radius = 10, onMouseDown, onMouseEnter, onMouseOut, type, }) {
+    return (jsx("circle", { onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseOut: onMouseOut, className: cc([EdgeUpdaterClassName, `${EdgeUpdaterClassName}-${type}`]), cx: shiftX(centerX, radius, position), cy: shiftY(centerY, radius, position), r: radius, stroke: "transparent", fill: "transparent" }));
+}
 
 function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleId, sourceHandleId, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, setUpdating, setUpdateHover, }) {
     const store = useStoreApi();
@@ -2057,7 +2200,7 @@ function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleI
         if (event.button !== 0) {
             return;
         }
-        const { autoPanOnConnect, domNode, isValidConnection, connectionMode, connectionRadius, lib, onConnectStart, onConnectEnd, cancelConnection, nodes, panBy, updateConnection, } = store.getState();
+        const { autoPanOnConnect, domNode, isValidConnection, connectionMode, connectionRadius, lib, onConnectStart, onConnectEnd, cancelConnection, nodeLookup, rfId: flowId, panBy, updateConnection, } = store.getState();
         const nodeId = isSourceHandle ? edge.target : edge.source;
         const handleId = (isSourceHandle ? targetHandleId : sourceHandleId) || null;
         const handleType = isSourceHandle ? 'target' : 'source';
@@ -2076,10 +2219,11 @@ function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleI
             domNode,
             handleId,
             nodeId,
-            nodes,
+            nodeLookup,
             isTarget,
             edgeUpdaterType: handleType,
             lib,
+            flowId,
             cancelConnection,
             panBy,
             isValidConnection,
@@ -2089,6 +2233,7 @@ function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleI
             onEdgeUpdateEnd: _onEdgeUpdateEnd,
             updateConnection,
             getTransform: () => store.getState().transform,
+            getConnectionStartHandle: () => store.getState().connectionStartHandle,
         });
     };
     const onEdgeUpdaterSourceMouseDown = (event) => handleEdgeUpdater(event, true);
@@ -2098,7 +2243,7 @@ function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleI
     return (jsxs(Fragment, { children: [(isUpdatable === 'source' || isUpdatable === true) && (jsx(EdgeAnchor, { position: sourcePosition, centerX: sourceX, centerY: sourceY, radius: edgeUpdaterRadius, onMouseDown: onEdgeUpdaterSourceMouseDown, onMouseEnter: onEdgeUpdaterMouseEnter, onMouseOut: onEdgeUpdaterMouseOut, type: "source" })), (isUpdatable === 'target' || isUpdatable === true) && (jsx(EdgeAnchor, { position: targetPosition, centerX: targetX, centerY: targetY, radius: edgeUpdaterRadius, onMouseDown: onEdgeUpdaterTargetMouseDown, onMouseEnter: onEdgeUpdaterMouseEnter, onMouseOut: onEdgeUpdaterMouseOut, type: "target" }))] }));
 }
 
-function EdgeWrapper({ id, edgesFocusable, edgesUpdatable, elementsSelectable, onClick, onDoubleClick, onContextMenu, onMouseEnter, onMouseMove, onMouseLeave, edgeUpdaterRadius, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, rfId, edgeTypes, noPanClassName, onError, }) {
+function EdgeWrapper({ id, edgesFocusable, edgesUpdatable, elementsSelectable, onClick, onDoubleClick, onContextMenu, onMouseEnter, onMouseMove, onMouseLeave, edgeUpdaterRadius, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, rfId, edgeTypes, noPanClassName, onError, disableKeyboardA11y, }) {
     let edge = useStore((s) => s.edgeLookup.get(id));
     const defaultEdgeOptions = useStore((s) => s.defaultEdgeOptions);
     edge = defaultEdgeOptions ? { ...defaultEdgeOptions, ...edge } : edge;
@@ -2147,9 +2292,9 @@ function EdgeWrapper({ id, edgesFocusable, edgesUpdatable, elementsSelectable, o
             ...(edgePosition || nullPosition),
         };
     }, [edge.source, edge.target, edge.sourceHandle, edge.targetHandle, edge.selected, edge.zIndex]), shallow);
-    const markerStartUrl = useMemo(() => (edge.markerStart ? `url(#${getMarkerId(edge.markerStart, rfId)})` : undefined), [edge.markerStart, rfId]);
-    const markerEndUrl = useMemo(() => (edge.markerEnd ? `url(#${getMarkerId(edge.markerEnd, rfId)})` : undefined), [edge.markerEnd, rfId]);
-    if (edge.hidden || !sourceX || !sourceY || !targetX || !targetY) {
+    const markerStartUrl = useMemo(() => (edge.markerStart ? `url('#${getMarkerId(edge.markerStart, rfId)}')` : undefined), [edge.markerStart, rfId]);
+    const markerEndUrl = useMemo(() => (edge.markerEnd ? `url('#${getMarkerId(edge.markerEnd, rfId)}')` : undefined), [edge.markerEnd, rfId]);
+    if (edge.hidden || sourceX === null || sourceY === null || targetX === null || targetY === null) {
         return null;
     }
     const onEdgeClick = (event) => {
@@ -2194,7 +2339,7 @@ function EdgeWrapper({ id, edgesFocusable, edgesUpdatable, elementsSelectable, o
         }
         : undefined;
     const onKeyDown = (event) => {
-        if (elementSelectionKeys.includes(event.key) && isSelectable) {
+        if (!disableKeyboardA11y && elementSelectionKeys.includes(event.key) && isSelectable) {
             const { unselectNodesAndEdges, addSelectedEdges } = store.getState();
             const unselect = event.key === 'Escape';
             if (unselect) {
@@ -2216,11 +2361,10 @@ function EdgeWrapper({ id, edgesFocusable, edgesUpdatable, elementsSelectable, o
                     animated: edge.animated,
                     inactive: !isSelectable && !onClick,
                     updating: updateHover,
+                    selectable: isSelectable,
                 },
-            ]), onClick: onEdgeClick, onDoubleClick: onEdgeDoubleClick, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onKeyDown: isFocusable ? onKeyDown : undefined, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : 'img', "data-id": id, "data-testid": `rf__edge-${id}`, "aria-label": edge.ariaLabel === null ? undefined : edge.ariaLabel || `Edge from ${edge.source} to ${edge.target}`, "aria-describedby": isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined, ref: edgeRef, children: [!updating && (jsx(EdgeComponent, { id: id, source: edge.source, target: edge.target, selected: edge.selected, animated: edge.animated, label: edge.label, labelStyle: edge.labelStyle, labelShowBg: edge.labelShowBg, labelBgStyle: edge.labelBgStyle, labelBgPadding: edge.labelBgPadding, labelBgBorderRadius: edge.labelBgBorderRadius, sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY, sourcePosition: sourcePosition, targetPosition: targetPosition, data: edge.data, style: edge.style, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle, markerStart: markerStartUrl, markerEnd: markerEndUrl, pathOptions: 'pathOptions' in edge ? edge.pathOptions : undefined, interactionWidth: edge.interactionWidth })), isUpdatable && (jsx(EdgeUpdateAnchors, { edge: edge, isUpdatable: isUpdatable, edgeUpdaterRadius: edgeUpdaterRadius, onEdgeUpdate: onEdgeUpdate, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY, sourcePosition: sourcePosition, targetPosition: targetPosition, setUpdateHover: setUpdateHover, setUpdating: setUpdating, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle }))] }) }));
+            ]), onClick: onEdgeClick, onDoubleClick: onEdgeDoubleClick, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onKeyDown: isFocusable ? onKeyDown : undefined, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : 'img', "data-id": id, "data-testid": `rf__edge-${id}`, "aria-label": edge.ariaLabel === null ? undefined : edge.ariaLabel || `Edge from ${edge.source} to ${edge.target}`, "aria-describedby": isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined, ref: edgeRef, children: [!updating && (jsx(EdgeComponent, { id: id, source: edge.source, target: edge.target, type: edge.type, selected: edge.selected, animated: edge.animated, selectable: isSelectable, deletable: edge.deletable ?? true, label: edge.label, labelStyle: edge.labelStyle, labelShowBg: edge.labelShowBg, labelBgStyle: edge.labelBgStyle, labelBgPadding: edge.labelBgPadding, labelBgBorderRadius: edge.labelBgBorderRadius, sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY, sourcePosition: sourcePosition, targetPosition: targetPosition, data: edge.data, style: edge.style, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle, markerStart: markerStartUrl, markerEnd: markerEndUrl, pathOptions: 'pathOptions' in edge ? edge.pathOptions : undefined, interactionWidth: edge.interactionWidth })), isUpdatable && (jsx(EdgeUpdateAnchors, { edge: edge, isUpdatable: isUpdatable, edgeUpdaterRadius: edgeUpdaterRadius, onEdgeUpdate: onEdgeUpdate, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY, sourcePosition: sourcePosition, targetPosition: targetPosition, setUpdateHover: setUpdateHover, setUpdating: setUpdating, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle }))] }) }));
 }
-EdgeWrapper.displayName = 'EdgeWrapper';
-var EdgeWrapper$1 = memo(EdgeWrapper);
 
 const selector$c = (s) => ({
     width: s.width,
@@ -2231,15 +2375,15 @@ const selector$c = (s) => ({
     connectionMode: s.connectionMode,
     onError: s.onError,
 });
-const EdgeRenderer = ({ defaultMarkerColor, onlyRenderVisibleElements, rfId, edgeTypes, noPanClassName, onEdgeUpdate, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeClick, edgeUpdaterRadius, onEdgeDoubleClick, onEdgeUpdateStart, onEdgeUpdateEnd, children, }) => {
+function EdgeRendererComponent({ defaultMarkerColor, onlyRenderVisibleElements, rfId, edgeTypes, noPanClassName, onEdgeUpdate, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeClick, edgeUpdaterRadius, onEdgeDoubleClick, onEdgeUpdateStart, onEdgeUpdateEnd, disableKeyboardA11y, }) {
     const { edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector$c, shallow);
     const edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
     return (jsxs("div", { className: "react-flow__edges", children: [jsx(MarkerDefinitions$1, { defaultColor: defaultMarkerColor, rfId: rfId }), edgeIds.map((id) => {
-                return (jsx(EdgeWrapper$1, { id: id, edgesFocusable: edgesFocusable, edgesUpdatable: edgesUpdatable, elementsSelectable: elementsSelectable, noPanClassName: noPanClassName, onEdgeUpdate: onEdgeUpdate, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onClick: onEdgeClick, edgeUpdaterRadius: edgeUpdaterRadius, onDoubleClick: onEdgeDoubleClick, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, rfId: rfId, onError: onError, edgeTypes: edgeTypes }, id));
-            }), children] }));
-};
-EdgeRenderer.displayName = 'EdgeRenderer';
-var EdgeRenderer$1 = memo(EdgeRenderer);
+                return (jsx(EdgeWrapper, { id: id, edgesFocusable: edgesFocusable, edgesUpdatable: edgesUpdatable, elementsSelectable: elementsSelectable, noPanClassName: noPanClassName, onEdgeUpdate: onEdgeUpdate, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onClick: onEdgeClick, edgeUpdaterRadius: edgeUpdaterRadius, onDoubleClick: onEdgeDoubleClick, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, rfId: rfId, onError: onError, edgeTypes: edgeTypes, disableKeyboardA11y: disableKeyboardA11y }, id));
+            })] }));
+}
+EdgeRendererComponent.displayName = 'EdgeRenderer';
+const EdgeRenderer = memo(EdgeRendererComponent);
 
 const selector$b = (s) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
 function Viewport({ children }) {
@@ -2296,7 +2440,7 @@ const ConnectionLine = ({ nodeId, handleType, style, type = ConnectionLineType.B
         toY: (s.connectionPosition.y - s.transform[1]) / s.transform[2],
         connectionMode: s.connectionMode,
     }), [nodeId]), shallow);
-    const fromHandleBounds = fromNode?.[internalsSymbol]?.handleBounds;
+    const fromHandleBounds = fromNode?.internals.handleBounds;
     let handleBounds = fromHandleBounds?.[handleType];
     if (connectionMode === ConnectionMode.Loose) {
         handleBounds = handleBounds ? handleBounds : fromHandleBounds?.[handleType === 'source' ? 'target' : 'source'];
@@ -2305,10 +2449,10 @@ const ConnectionLine = ({ nodeId, handleType, style, type = ConnectionLineType.B
         return null;
     }
     const fromHandle = handleId ? handleBounds.find((d) => d.id === handleId) : handleBounds[0];
-    const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.computed?.width ?? 0) / 2;
-    const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.computed?.height ?? 0;
-    const fromX = (fromNode.computed?.positionAbsolute?.x ?? 0) + fromHandleX;
-    const fromY = (fromNode.computed?.positionAbsolute?.y ?? 0) + fromHandleY;
+    const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.measured.width ?? 0) / 2;
+    const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.measured.height ?? 0;
+    const fromX = fromNode.internals.positionAbsolute.x + fromHandleX;
+    const fromY = fromNode.internals.positionAbsolute.y + fromHandleY;
     const fromPosition = fromHandle?.position;
     const toPosition = fromPosition ? oppositePosition[fromPosition] : null;
     if (!fromPosition || !toPosition) {
@@ -2368,66 +2512,68 @@ function ConnectionLineWrapper({ containerStyle, style, type, component }) {
 const emptyTypes = {};
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function useNodeOrEdgeTypesWarning(nodeOrEdgeTypes = emptyTypes) {
-    const updateCount = useRef(0);
+    const typesRef = useRef(nodeOrEdgeTypes);
     const store = useStoreApi();
     useEffect(() => {
         if (process.env.NODE_ENV === 'development') {
-            if (updateCount.current > 1) {
-                store.getState().onError?.('002', errorMessages['error002']());
+            const usedKeys = new Set([...Object.keys(typesRef.current), ...Object.keys(nodeOrEdgeTypes)]);
+            for (const key of usedKeys) {
+                if (typesRef.current[key] !== nodeOrEdgeTypes[key]) {
+                    store.getState().onError?.('002', errorMessages['error002']());
+                    break;
+                }
             }
-            updateCount.current += 1;
+            typesRef.current = nodeOrEdgeTypes;
         }
     }, [nodeOrEdgeTypes]);
 }
 
-const GraphView = ({ 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, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, onEdgeUpdate, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, edgeUpdaterRadius, onEdgeUpdateStart, onEdgeUpdateEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeOrigin, nodeExtent, rfId, viewport, onViewportChange, }) => {
+function useStylesLoadedWarning() {
+    const store = useStoreApi();
+    const checked = useRef(false);
+    useEffect(() => {
+        if (process.env.NODE_ENV === 'development') {
+            if (!checked.current) {
+                const pane = document.querySelector('.react-flow__pane');
+                if (pane && !(window.getComputedStyle(pane).zIndex === '1')) {
+                    store.getState().onError?.('013', errorMessages['error013']('react'));
+                }
+                checked.current = true;
+            }
+        }
+    }, []);
+}
+
+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, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, onEdgeUpdate, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, edgeUpdaterRadius, onEdgeUpdateStart, onEdgeUpdateEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeOrigin, nodeExtent, rfId, viewport, onViewportChange, }) {
     useNodeOrEdgeTypesWarning(nodeTypes);
     useNodeOrEdgeTypesWarning(edgeTypes);
+    useStylesLoadedWarning();
     useOnInitHandler(onInit);
     useViewportSync(viewport);
-    return (jsx(FlowRenderer$1, { onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, deleteKeyCode: deleteKeyCode, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, onSelectionContextMenu: onSelectionContextMenu, preventScrolling: preventScrolling, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, onViewportChange: onViewportChange, isControlledViewport: !!viewport, children: jsxs(Viewport, { children: [jsx(EdgeRenderer$1, { edgeTypes: edgeTypes, onEdgeClick: onEdgeClick, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeUpdate: onEdgeUpdate, onlyRenderVisibleElements: onlyRenderVisibleElements, onEdgeContextMenu: onEdgeContextMenu, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, edgeUpdaterRadius: edgeUpdaterRadius, defaultMarkerColor: defaultMarkerColor, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, rfId: rfId }), jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsx("div", { className: "react-flow__edgelabel-renderer" }), jsx("div", { className: "react-flow__viewport-portal" }), jsx(NodeRenderer$1, { nodeTypes: nodeTypes, onNodeClick: onNodeClick, onNodeDoubleClick: onNodeDoubleClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onlyRenderVisibleElements: onlyRenderVisibleElements, noPanClassName: noPanClassName, noDragClassName: noDragClassName, disableKeyboardA11y: disableKeyboardA11y, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, rfId: rfId })] }) }));
-};
-GraphView.displayName = 'GraphView';
-var GraphView$1 = memo(GraphView);
-
-function handleControlledSelectionChange(changes, items) {
-    return items.map((item) => {
-        const change = changes.find((change) => change.id === item.id);
-        if (change) {
-            item.selected = change.selected;
-        }
-        return item;
-    });
-}
-function updateNodesAndEdgesSelections({ changedNodes, changedEdges, get, set }) {
-    const { nodes, edges, onNodesChange, onEdgesChange, hasDefaultNodes, hasDefaultEdges } = get();
-    if (changedNodes?.length) {
-        if (hasDefaultNodes) {
-            set({ nodes: handleControlledSelectionChange(changedNodes, nodes) });
-        }
-        onNodesChange?.(changedNodes);
-    }
-    if (changedEdges?.length) {
-        if (hasDefaultEdges) {
-            set({ edges: handleControlledSelectionChange(changedEdges, edges) });
-        }
-        onEdgesChange?.(changedEdges);
-    }
+    return (jsx(FlowRenderer, { onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, deleteKeyCode: deleteKeyCode, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, onSelectionContextMenu: onSelectionContextMenu, preventScrolling: preventScrolling, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, onViewportChange: onViewportChange, isControlledViewport: !!viewport, children: jsxs(Viewport, { children: [jsx(EdgeRenderer, { edgeTypes: edgeTypes, onEdgeClick: onEdgeClick, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeUpdate: onEdgeUpdate, onlyRenderVisibleElements: onlyRenderVisibleElements, onEdgeContextMenu: onEdgeContextMenu, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, edgeUpdaterRadius: edgeUpdaterRadius, defaultMarkerColor: defaultMarkerColor, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, rfId: rfId }), jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsx("div", { className: "react-flow__edgelabel-renderer" }), jsx(NodeRenderer, { nodeTypes: nodeTypes, onNodeClick: onNodeClick, onNodeDoubleClick: onNodeDoubleClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onlyRenderVisibleElements: onlyRenderVisibleElements, noPanClassName: noPanClassName, noDragClassName: noDragClassName, disableKeyboardA11y: disableKeyboardA11y, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, rfId: rfId }), jsx("div", { className: "react-flow__viewport-portal" })] }) }));
 }
+GraphViewComponent.displayName = 'GraphView';
+const GraphView = memo(GraphViewComponent);
 
-const getInitialState = ({ nodes = [], edges = [], width, height, fitView, } = {}) => {
+const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, } = {}) => {
     const nodeLookup = new Map();
+    const parentLookup = new Map();
     const connectionLookup = new Map();
     const edgeLookup = new Map();
-    updateConnectionLookup(connectionLookup, edgeLookup, edges);
-    const nextNodes = adoptUserProvidedNodes(nodes, nodeLookup, {
+    const storeEdges = defaultEdges ?? edges ?? [];
+    const storeNodes = defaultNodes ?? nodes ?? [];
+    updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
+    adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
         nodeOrigin: [0, 0],
         elevateNodesOnSelect: false,
     });
     let transform = [0, 0, 1];
     if (fitView && width && height) {
-        const nodesWithDimensions = nextNodes.filter((node) => node.width && node.height);
-        const bounds = getNodesBounds(nodesWithDimensions, [0, 0]);
+        // @todo users nodeOrigin should be used here
+        const bounds = getInternalNodesBounds(nodeLookup, {
+            nodeOrigin: [0, 0],
+            filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight)),
+        });
         const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
         transform = [x, y, zoom];
     }
@@ -2436,15 +2582,16 @@ const getInitialState = ({ nodes = [], edges = [], width, height, fitView, } = {
         width: 0,
         height: 0,
         transform,
-        nodes: nextNodes,
+        nodes: storeNodes,
         nodeLookup,
-        edges,
+        parentLookup,
+        edges: storeEdges,
         edgeLookup,
         connectionLookup,
         onNodesChange: null,
         onEdgesChange: null,
-        hasDefaultNodes: false,
-        hasDefaultEdges: false,
+        hasDefaultNodes: defaultNodes !== undefined,
+        hasDefaultEdges: defaultEdges !== undefined,
         panZoom: null,
         minZoom: 0.5,
         maxZoom: 2,
@@ -2484,78 +2631,60 @@ const getInitialState = ({ nodes = [], edges = [], width, height, fitView, } = {
         autoPanOnConnect: true,
         autoPanOnNodeDrag: true,
         connectionRadius: 20,
-        onError: () => null,
+        onError: devWarn,
         isValidConnection: undefined,
         onSelectionChangeHandlers: [],
         lib: 'react',
+        debug: false,
     };
 };
 
-const createRFStore = ({ nodes, edges, width, height, fitView: fitView$1, }) => createWithEqualityFn((set, get) => ({
-    ...getInitialState({ nodes, edges, width, height, fitView: fitView$1 }),
+const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView$1, }) => createWithEqualityFn((set, get) => ({
+    ...getInitialState({ nodes, edges, width, height, fitView: fitView$1, defaultNodes, defaultEdges }),
     setNodes: (nodes) => {
-        const { nodeLookup, nodeOrigin, elevateNodesOnSelect } = get();
+        const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect } = get();
         // setNodes() is called exclusively in response to user actions:
         // - either when the `<ReactFlow nodes>` prop is updated in the controlled ReactFlow setup,
         // - or when the user calls something like `reactFlowInstance.setNodes()` in an uncontrolled ReactFlow setup.
         //
         // When this happens, we take the note objects passed by the user and extend them with fields
         // relevant for internal React Flow operations.
-        // TODO: consider updating the types to reflect the distinction between user-provided nodes and internal nodes.
-        const nodesWithInternalData = adoptUserProvidedNodes(nodes, nodeLookup, { nodeOrigin, elevateNodesOnSelect });
-        set({ nodes: nodesWithInternalData });
+        adoptUserNodes(nodes, nodeLookup, parentLookup, { nodeOrigin, elevateNodesOnSelect, checkEquality: true });
+        set({ nodes });
     },
     setEdges: (edges) => {
         const { connectionLookup, edgeLookup } = get();
         updateConnectionLookup(connectionLookup, edgeLookup, edges);
         set({ edges });
     },
-    // when the user works with an uncontrolled flow,
-    // we set a flag `hasDefaultNodes` / `hasDefaultEdges`
     setDefaultNodesAndEdges: (nodes, edges) => {
-        const hasDefaultNodes = typeof nodes !== 'undefined';
-        const hasDefaultEdges = typeof edges !== 'undefined';
-        const nextState = {
-            hasDefaultNodes,
-            hasDefaultEdges,
-        };
-        if (hasDefaultNodes) {
-            const { nodeLookup, nodeOrigin, elevateNodesOnSelect } = get();
-            nextState.nodes = adoptUserProvidedNodes(nodes, nodeLookup, {
-                nodeOrigin,
-                elevateNodesOnSelect,
-            });
+        if (nodes) {
+            const { setNodes } = get();
+            setNodes(nodes);
+            set({ hasDefaultNodes: true });
         }
-        if (hasDefaultEdges) {
-            const { connectionLookup, edgeLookup } = get();
-            updateConnectionLookup(connectionLookup, edgeLookup, edges);
-            nextState.edges = edges;
+        if (edges) {
+            const { setEdges } = get();
+            setEdges(edges);
+            set({ hasDefaultEdges: true });
         }
-        set(nextState);
     },
     // Every node gets registerd at a ResizeObserver. Whenever a node
     // changes its dimensions, this function is called to measure the
     // new dimensions and update the nodes.
-    updateNodeDimensions: (updates) => {
-        const { onNodesChange, fitView, nodes, nodeLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin, } = get();
-        const changes = [];
-        const updatedNodes = updateNodeDimensions(updates, nodes, nodeLookup, domNode, nodeOrigin, (id, dimensions) => {
-            changes.push({
-                id: id,
-                type: 'dimensions',
-                dimensions,
-            });
-        });
-        if (!updatedNodes) {
+    updateNodeInternals: (updates) => {
+        const { triggerNodeChanges, fitView, nodeLookup, parentLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin, debug, } = get();
+        const { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin);
+        if (!updatedInternals) {
             return;
         }
-        const nextNodes = updateAbsolutePositions(updatedNodes, nodeLookup, nodeOrigin);
+        updateAbsolutePositions(nodeLookup, { nodeOrigin });
         // we call fitView once initially after all dimensions are set
         let nextFitViewDone = fitViewDone;
         if (!fitViewDone && fitViewOnInit) {
-            nextFitViewDone = fitView(nextNodes, {
+            nextFitViewDone = fitView({
                 ...fitViewOnInitOptions,
-                nodes: fitViewOnInitOptions?.nodes || nextNodes,
+                nodes: fitViewOnInitOptions?.nodes,
             });
         }
         // here we are cirmumventing the onNodesChange handler
@@ -2563,91 +2692,104 @@ const createRFStore = ({ nodes, edges, width, height, fitView: fitView$1, }) =>
         // has not provided an onNodesChange handler.
         // Nodes are only rendered if they have a width and height
         // attribute which they get from this handler.
-        set({ nodes: nextNodes, fitViewDone: nextFitViewDone });
+        set({ fitViewDone: nextFitViewDone });
         if (changes?.length > 0) {
-            onNodesChange?.(changes);
+            if (debug) {
+                console.log('React Flow: trigger node changes', changes);
+            }
+            triggerNodeChanges?.(changes);
         }
     },
-    updateNodePositions: (nodeDragItems, positionChanged = true, dragging = false) => {
-        const changes = nodeDragItems.map((node) => {
+    updateNodePositions: (nodeDragItems, dragging = false) => {
+        const parentExpandChildren = [];
+        const changes = [];
+        for (const [id, dragItem] of nodeDragItems) {
+            // @todo add expandParent to drag item so that we can get rid of the look up here
             const change = {
-                id: node.id,
+                id,
                 type: 'position',
+                position: dragItem.position,
                 dragging,
             };
-            if (positionChanged) {
-                change.positionAbsolute = node.computed?.positionAbsolute;
-                change.position = node.position;
+            if (dragItem?.expandParent && dragItem?.parentId && change.position) {
+                parentExpandChildren.push({
+                    id,
+                    parentId: dragItem.parentId,
+                    rect: {
+                        ...dragItem.internals.positionAbsolute,
+                        width: dragItem.measured.width,
+                        height: dragItem.measured.height,
+                    },
+                });
+                change.position.x = Math.max(0, change.position.x);
+                change.position.y = Math.max(0, change.position.y);
             }
-            return change;
-        });
+            changes.push(change);
+        }
+        if (parentExpandChildren.length > 0) {
+            const { nodeLookup, parentLookup } = get();
+            const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup);
+            changes.push(...parentExpandChanges);
+        }
         get().triggerNodeChanges(changes);
     },
     triggerNodeChanges: (changes) => {
-        const { onNodesChange, nodeLookup, nodes, hasDefaultNodes, nodeOrigin, elevateNodesOnSelect } = get();
+        const { onNodesChange, setNodes, nodes, hasDefaultNodes, debug } = get();
         if (changes?.length) {
             if (hasDefaultNodes) {
                 const updatedNodes = applyNodeChanges(changes, nodes);
-                const nextNodes = adoptUserProvidedNodes(updatedNodes, nodeLookup, {
-                    nodeOrigin,
-                    elevateNodesOnSelect,
-                });
-                set({ nodes: nextNodes });
+                setNodes(updatedNodes);
+            }
+            if (debug) {
+                console.log('React Flow: trigger node changes', changes);
             }
             onNodesChange?.(changes);
         }
     },
+    triggerEdgeChanges: (changes) => {
+        const { onEdgesChange, setEdges, edges, hasDefaultEdges, debug } = get();
+        if (changes?.length) {
+            if (hasDefaultEdges) {
+                const updatedEdges = applyEdgeChanges(changes, edges);
+                setEdges(updatedEdges);
+            }
+            if (debug) {
+                console.log('React Flow: trigger edge changes', changes);
+            }
+            onEdgesChange?.(changes);
+        }
+    },
     addSelectedNodes: (selectedNodeIds) => {
-        const { multiSelectionActive, edges, nodes } = get();
-        let changedNodes;
-        let changedEdges = null;
+        const { multiSelectionActive, edgeLookup, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();
         if (multiSelectionActive) {
-            changedNodes = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true));
+            const nodeChanges = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true));
+            triggerNodeChanges(nodeChanges);
+            return;
         }
-        else {
-            changedNodes = getSelectionChanges(nodes, new Set([...selectedNodeIds]), true);
-            changedEdges = getSelectionChanges(edges);
-        }
-        updateNodesAndEdgesSelections({
-            changedNodes,
-            changedEdges,
-            get,
-            set,
-        });
+        triggerNodeChanges(getSelectionChanges(nodeLookup, new Set([...selectedNodeIds]), true));
+        triggerEdgeChanges(getSelectionChanges(edgeLookup));
     },
     addSelectedEdges: (selectedEdgeIds) => {
-        const { multiSelectionActive, edges, nodes } = get();
-        let changedEdges;
-        let changedNodes = null;
+        const { multiSelectionActive, edgeLookup, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();
         if (multiSelectionActive) {
-            changedEdges = selectedEdgeIds.map((edgeId) => createSelectionChange(edgeId, true));
+            const changedEdges = selectedEdgeIds.map((edgeId) => createSelectionChange(edgeId, true));
+            triggerEdgeChanges(changedEdges);
+            return;
         }
-        else {
-            changedEdges = getSelectionChanges(edges, new Set([...selectedEdgeIds]));
-            changedNodes = getSelectionChanges(nodes, new Set(), true);
-        }
-        updateNodesAndEdgesSelections({
-            changedNodes,
-            changedEdges,
-            get,
-            set,
-        });
+        triggerEdgeChanges(getSelectionChanges(edgeLookup, new Set([...selectedEdgeIds])));
+        triggerNodeChanges(getSelectionChanges(nodeLookup, new Set(), true));
     },
     unselectNodesAndEdges: ({ nodes, edges } = {}) => {
-        const { edges: storeEdges, nodes: storeNodes } = get();
+        const { edges: storeEdges, nodes: storeNodes, triggerNodeChanges, triggerEdgeChanges } = get();
         const nodesToUnselect = nodes ? nodes : storeNodes;
         const edgesToUnselect = edges ? edges : storeEdges;
-        const changedNodes = nodesToUnselect.map((n) => {
+        const nodeChanges = nodesToUnselect.map((n) => {
             n.selected = false;
             return createSelectionChange(n.id, false);
         });
-        const changedEdges = edgesToUnselect.map((edge) => createSelectionChange(edge.id, false));
-        updateNodesAndEdgesSelections({
-            changedNodes,
-            changedEdges,
-            get,
-            set,
-        });
+        const edgeChanges = edgesToUnselect.map((edge) => createSelectionChange(edge.id, false));
+        triggerNodeChanges(nodeChanges);
+        triggerEdgeChanges(edgeChanges);
     },
     setMinZoom: (minZoom) => {
         const { panZoom, maxZoom } = get();
@@ -2664,47 +2806,39 @@ const createRFStore = ({ nodes, edges, width, height, fitView: fitView$1, }) =>
         set({ translateExtent });
     },
     resetSelectedElements: () => {
-        const { edges, nodes } = get();
-        const nodesToUnselect = nodes
-            .filter((e) => e.selected)
-            .map((n) => createSelectionChange(n.id, false));
-        const edgesToUnselect = edges
-            .filter((e) => e.selected)
-            .map((e) => createSelectionChange(e.id, false));
-        updateNodesAndEdgesSelections({
-            changedNodes: nodesToUnselect,
-            changedEdges: edgesToUnselect,
-            get,
-            set,
-        });
+        const { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
+        const nodeChanges = nodes.reduce((res, node) => (node.selected ? [...res, createSelectionChange(node.id, false)] : res), []);
+        const edgeChanges = edges.reduce((res, edge) => (edge.selected ? [...res, createSelectionChange(edge.id, false)] : res), []);
+        triggerNodeChanges(nodeChanges);
+        triggerEdgeChanges(edgeChanges);
     },
     setNodeExtent: (nodeExtent) => {
-        const { nodes } = get();
+        const { nodeLookup } = get();
+        for (const [, node] of nodeLookup) {
+            const positionAbsolute = clampPosition(node.position, nodeExtent);
+            nodeLookup.set(node.id, {
+                ...node,
+                internals: {
+                    ...node.internals,
+                    positionAbsolute,
+                },
+            });
+        }
         set({
             nodeExtent,
-            nodes: nodes.map((node) => {
-                const positionAbsolute = clampPosition(node.position, nodeExtent);
-                return {
-                    ...node,
-                    computed: {
-                        ...node.computed,
-                        positionAbsolute,
-                    },
-                };
-            }),
         });
     },
     panBy: (delta) => {
         const { transform, width, height, panZoom, translateExtent } = get();
         return panBy({ delta, panZoom, transform, translateExtent, width, height });
     },
-    fitView: (nodes, options) => {
-        const { panZoom, width, height, minZoom, maxZoom, nodeOrigin } = get();
+    fitView: (options) => {
+        const { panZoom, width, height, minZoom, maxZoom, nodeOrigin, nodeLookup } = get();
         if (!panZoom) {
             return false;
         }
         return fitView({
-            nodes,
+            nodeLookup,
             width,
             height,
             panZoom,
@@ -2719,82 +2853,39 @@ const createRFStore = ({ nodes, edges, width, height, fitView: fitView$1, }) =>
         connectionEndHandle: null,
     }),
     updateConnection: (params) => {
-        const { connectionStatus, connectionStartHandle, connectionEndHandle, connectionPosition } = get();
+        const { connectionPosition } = get();
         const currentConnection = {
+            ...params,
             connectionPosition: params.connectionPosition ?? connectionPosition,
-            connectionStatus: params.connectionStatus ?? connectionStatus,
-            connectionStartHandle: params.connectionStartHandle ?? connectionStartHandle,
-            connectionEndHandle: params.connectionEndHandle ?? connectionEndHandle,
         };
         set(currentConnection);
     },
-    reset: () => {
-        // @todo: what should we do about this? Do we still need it?
-        // if you are on a SPA with multiple flows, we want to make sure that the store gets resetted
-        // when you switch pages. Does this reset solves this? Currently it always gets called. This
-        // leads to an emtpy nodes array at the beginning.
-        // set({ ...getInitialState() });
-    },
+    reset: () => set({ ...getInitialState() }),
 }), Object.is);
 
-function ReactFlowProvider({ children, initialNodes, initialEdges, initialWidth, initialHeight, fitView, }) {
-    const storeRef = useRef(null);
-    if (!storeRef.current) {
-        storeRef.current = createRFStore({
-            nodes: initialNodes,
-            edges: initialEdges,
-            width: initialWidth,
-            height: initialHeight,
-            fitView,
-        });
-    }
-    return jsx(Provider$1, { value: storeRef.current, children: children });
+function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, fitView, children, }) {
+    const [store] = useState(() => createStore({
+        nodes,
+        edges,
+        defaultNodes,
+        defaultEdges,
+        width,
+        height,
+        fitView,
+    }));
+    return (jsx(Provider$1, { value: store, children: jsx(BatchProvider, { children: children }) }));
 }
-ReactFlowProvider.displayName = 'ReactFlowProvider';
 
-function Wrapper({ children, nodes, edges, width, height, fitView, }) {
+function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, }) {
     const isWrapped = useContext(StoreContext);
     if (isWrapped) {
         // we need to wrap it with a fragment because it's not allowed for children to be a ReactNode
         // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
         return jsx(Fragment, { children: children });
     }
-    return (jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, initialWidth: width, initialHeight: height, fitView: fitView, children: children }));
-}
-Wrapper.displayName = 'ReactFlowWrapper';
-
-function getMediaQuery() {
-    if (typeof window === 'undefined' || !window.matchMedia) {
-        return null;
-    }
-    return window.matchMedia('(prefers-color-scheme: dark)');
-}
-/**
- * Hook for receiving the current color mode class 'dark' or 'light'.
- *
- * @internal
- * @param colorMode - The color mode to use ('dark', 'light' or 'system')
- */
-function useColorModeClass(colorMode) {
-    const [colorModeClass, setColorModeClass] = useState(colorMode === 'system' ? null : colorMode);
-    useEffect(() => {
-        if (colorMode !== 'system') {
-            setColorModeClass(colorMode);
-            return;
-        }
-        const mediaQuery = getMediaQuery();
-        const updateColorModeClass = () => setColorModeClass(mediaQuery?.matches ? 'dark' : 'light');
-        updateColorModeClass();
-        mediaQuery?.addEventListener('change', updateColorModeClass);
-        return () => {
-            mediaQuery?.removeEventListener('change', updateColorModeClass);
-        };
-    }, [colorMode]);
-    return colorModeClass !== null ? colorModeClass : getMediaQuery()?.matches ? 'dark' : 'light';
+    return (jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView, children: children }));
 }
 
-const initNodeOrigin = [0, 0];
-const initDefaultViewport = { x: 0, y: 0, zoom: 1 };
 const wrapperStyle = {
     width: '100%',
     height: '100%',
@@ -2802,12 +2893,12 @@ const wrapperStyle = {
     position: 'relative',
     zIndex: 0,
 };
-const ReactFlow = forwardRef(({ 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, nodesConnectable, nodesFocusable, nodeOrigin = initNodeOrigin, edgesFocusable, edgesUpdatable, elementsSelectable = true, defaultViewport = initDefaultViewport, 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, children, onEdgeUpdate, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdateStart, onEdgeUpdateEnd, edgeUpdaterRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', ...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, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesUpdatable, 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, children, onEdgeUpdate, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdateStart, onEdgeUpdateEnd, edgeUpdaterRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', debug, ...rest }, ref) {
     const rfId = id || '1';
     const colorModeClassName = useColorModeClass(colorMode);
-    return (jsx("div", { ...rest, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), "data-testid": "rf__wrapper", id: id, children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, children: [jsx(GraphView$1, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onEdgeUpdate: onEdgeUpdate, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, edgeUpdaterRadius: edgeUpdaterRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesUpdatable: edgesUpdatable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete }), jsx(Wrapper$1, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
-});
-ReactFlow.displayName = 'ReactFlow';
+    return (jsx("div", { ...rest, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), "data-testid": "rf__wrapper", id: id, children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, children: [jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onEdgeUpdate: onEdgeUpdate, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, edgeUpdaterRadius: edgeUpdaterRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesUpdatable: edgesUpdatable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete, debug: debug }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
+}
+var index = fixedForwardRef(ReactFlow);
 
 const selector$8 = (s) => s.domNode?.querySelector('.react-flow__edgelabel-renderer');
 function EdgeLabelRenderer({ children }) {
@@ -2836,16 +2927,16 @@ function ViewportPortal({ children }) {
 function useUpdateNodeInternals() {
     const store = useStoreApi();
     return useCallback((id) => {
-        const { domNode, updateNodeDimensions } = store.getState();
+        const { domNode, updateNodeInternals } = store.getState();
         const updateIds = Array.isArray(id) ? id : [id];
         const updates = new Map();
         updateIds.forEach((updateId) => {
             const nodeElement = domNode?.querySelector(`.react-flow__node[data-id="${updateId}"]`);
             if (nodeElement) {
-                updates.set(updateId, { id: updateId, nodeElement, forceUpdate: true });
+                updates.set(updateId, { id: updateId, nodeElement, force: true });
             }
         });
-        requestAnimationFrame(() => updateNodeDimensions(updates));
+        requestAnimationFrame(() => updateNodeInternals(updates));
     }, []);
 }
 
@@ -2939,7 +3030,7 @@ function useOnViewportChange({ onStart, onChange, onEnd }) {
  * Hook for registering an onSelectionChange handler.
  *
  * @public
- * @params params.onChange - The handler to register
+ * @param params.onChange - The handler to register
  */
 function useOnSelectionChange({ onChange }) {
     const store = useStoreApi();
@@ -2954,12 +3045,17 @@ function useOnSelectionChange({ onChange }) {
 }
 
 const selector$6 = (options) => (s) => {
-    if (s.nodes.length === 0) {
+    if (s.nodeLookup.size === 0) {
         return false;
     }
-    return s.nodes
-        .filter((n) => (options.includeHiddenNodes ? true : !n.hidden))
-        .every((n) => n[internalsSymbol]?.handleBounds !== undefined);
+    for (const [, { hidden, internals }] of s.nodeLookup) {
+        if (options.includeHiddenNodes || !hidden) {
+            if (internals.handleBounds === undefined || !nodeHasDimensions(internals.userNode)) {
+                return false;
+            }
+        }
+    }
+    return true;
 };
 const defaultOptions = {
     includeHiddenNodes: false,
@@ -2977,7 +3073,7 @@ function useNodesInitialized(options = defaultOptions) {
 }
 
 /**
- *  Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
+ * Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
  *
  * @public
  * @param param.type - handle type 'source' or 'target'
@@ -2985,12 +3081,12 @@ function useNodesInitialized(options = defaultOptions) {
  * @param param.id - the handle id (this is only needed if the node has multiple handles of the same type)
  * @param param.onConnect - gets called when a connection is established
  * @param param.onDisconnect - gets called when a connection is removed
- * @returns an array with connections
+ * @returns an array with handle connections
  */
 function useHandleConnections({ type, id = null, nodeId, onConnect, onDisconnect, }) {
     const _nodeId = useNodeId();
+    const currentNodeId = nodeId ?? _nodeId;
     const prevConnections = useRef(null);
-    const currentNodeId = nodeId || _nodeId;
     const connections = useStore((state) => state.connectionLookup.get(`${currentNodeId}-${type}-${id}`), areConnectionMapsEqual);
     useEffect(() => {
         // @todo dicuss if onConnect/onDisconnect should be called when the component mounts/unmounts
@@ -3007,18 +3103,21 @@ function useHandleConnections({ type, id = null, nodeId, onConnect, onDisconnect
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function useNodesData(nodeIds) {
     const nodesData = useStore(useCallback((s) => {
-        if (!Array.isArray(nodeIds)) {
-            return s.nodeLookup.get(nodeIds)?.data || null;
-        }
         const data = [];
-        for (const nodeId of nodeIds) {
-            const nodeData = s.nodeLookup.get(nodeId)?.data;
-            if (nodeData) {
-                data.push(nodeData);
+        const isArrayOfIds = Array.isArray(nodeIds);
+        const _nodeIds = isArrayOfIds ? nodeIds : [nodeIds];
+        for (const nodeId of _nodeIds) {
+            const node = s.nodeLookup.get(nodeId);
+            if (node) {
+                data.push({
+                    id: node.id,
+                    type: node.type,
+                    data: node.data,
+                });
             }
         }
-        return data;
-    }, [nodeIds]), shallow);
+        return isArrayOfIds ? data : data[0] ?? null;
+    }, [nodeIds]), shallowNodeData);
     return nodesData;
 }
 
@@ -3032,19 +3131,24 @@ const selector$5 = (s) => ({
  * Hook for accessing the ongoing connection.
  *
  * @public
- * @returns ongoing connection: startHandle, endHandle, status, position
+ * @returns ongoing connection
  */
 function useConnection() {
     const ongoingConnection = useStore(selector$5, shallow);
     return ongoingConnection;
 }
 
-var BackgroundVariant;
-(function (BackgroundVariant) {
-    BackgroundVariant["Lines"] = "lines";
-    BackgroundVariant["Dots"] = "dots";
-    BackgroundVariant["Cross"] = "cross";
-})(BackgroundVariant || (BackgroundVariant = {}));
+/**
+ * Hook for getting an internal node by id
+ *
+ * @public
+ * @param id - id of the node
+ * @returns array with visible node ids
+ */
+function useInternalNode(id) {
+    const node = useStore(useCallback((s) => s.nodeLookup.get(id), [id]), shallow);
+    return node;
+}
 
 function LinePattern({ dimensions, lineWidth, variant, className }) {
     return (jsx("path", { strokeWidth: lineWidth, d: `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`, className: cc(['react-flow__background-pattern', variant, className]) }));
@@ -3053,13 +3157,20 @@ function DotPattern({ radius, className }) {
     return (jsx("circle", { cx: radius, cy: radius, r: radius, className: cc(['react-flow__background-pattern', 'dots', className]) }));
 }
 
+var BackgroundVariant;
+(function (BackgroundVariant) {
+    BackgroundVariant["Lines"] = "lines";
+    BackgroundVariant["Dots"] = "dots";
+    BackgroundVariant["Cross"] = "cross";
+})(BackgroundVariant || (BackgroundVariant = {}));
+
 const defaultSize = {
     [BackgroundVariant.Dots]: 1,
     [BackgroundVariant.Lines]: 1,
     [BackgroundVariant.Cross]: 6,
 };
 const selector$4 = (s) => ({ transform: s.transform, patternId: `pattern-${s.rfId}` });
-function Background({ id, variant = BackgroundVariant.Dots, 
+function BackgroundComponent({ id, variant = BackgroundVariant.Dots, 
 // only used for dots and cross
 gap = 20, 
 // only used for lines and cross
@@ -3084,8 +3195,8 @@ size, lineWidth = 1, offset = 2, color, bgColor, style, className, patternClassN
             '--xy-background-pattern-color-props': color,
         }, ref: ref, "data-testid": "rf__background", children: [jsx("pattern", { id: _patternId, x: transform[0] % scaledGap[0], y: transform[1] % scaledGap[1], width: scaledGap[0], height: scaledGap[1], patternUnits: "userSpaceOnUse", patternTransform: `translate(-${patternOffset[0]},-${patternOffset[1]})`, children: isDots ? (jsx(DotPattern, { radius: scaledSize / offset, className: patternClassName })) : (jsx(LinePattern, { dimensions: patternDimensions, lineWidth: lineWidth, variant: variant, className: patternClassName })) }), jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: `url(#${_patternId})` })] }));
 }
-Background.displayName = 'Background';
-var Background$1 = memo(Background);
+BackgroundComponent.displayName = 'Background';
+const Background = memo(BackgroundComponent);
 
 function PlusIcon() {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", children: jsx("path", { d: "M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z" }) }));
@@ -3107,15 +3218,16 @@ function UnlockIcon() {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 25 32", children: jsx("path", { d: "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z" }) }));
 }
 
-const ControlButton = ({ children, className, ...rest }) => (jsx("button", { type: "button", className: cc(['react-flow__controls-button', className]), ...rest, children: children }));
-ControlButton.displayName = 'ControlButton';
+function ControlButton({ children, className, ...rest }) {
+    return (jsx("button", { type: "button", className: cc(['react-flow__controls-button', className]), ...rest, children: children }));
+}
 
 const selector$3 = (s) => ({
     isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
     minZoomReached: s.transform[2] <= s.minZoom,
     maxZoomReached: s.transform[2] >= s.maxZoom,
 });
-const Controls = ({ style, showZoom = true, showFitView = true, showInteractive = true, fitViewOptions, onZoomIn, onZoomOut, onFitView, onInteractiveChange, className, children, position = 'bottom-left', }) => {
+function ControlsComponent({ style, showZoom = true, showFitView = true, showInteractive = true, fitViewOptions, onZoomIn, onZoomOut, onFitView, onInteractiveChange, className, children, position = 'bottom-left', orientation = 'vertical', 'aria-label': ariaLabel = 'React Flow controls', }) {
     const store = useStoreApi();
     const { isInteractive, minZoomReached, maxZoomReached } = useStore(selector$3, shallow);
     const { zoomIn, zoomOut, fitView } = useReactFlow();
@@ -3139,12 +3251,13 @@ const Controls = ({ style, showZoom = true, showFitView = true, showInteractive
         });
         onInteractiveChange?.(!isInteractive);
     };
-    return (jsxs(Panel, { className: cc(['react-flow__controls', className]), position: position, style: style, "data-testid": "rf__controls", children: [showZoom && (jsxs(Fragment, { children: [jsx(ControlButton, { onClick: onZoomInHandler, className: "react-flow__controls-zoomin", title: "zoom in", "aria-label": "zoom in", disabled: maxZoomReached, children: jsx(PlusIcon, {}) }), jsx(ControlButton, { onClick: onZoomOutHandler, className: "react-flow__controls-zoomout", title: "zoom out", "aria-label": "zoom out", disabled: minZoomReached, children: jsx(MinusIcon, {}) })] })), showFitView && (jsx(ControlButton, { className: "react-flow__controls-fitview", onClick: onFitViewHandler, title: "fit view", "aria-label": "fit view", children: jsx(FitViewIcon, {}) })), showInteractive && (jsx(ControlButton, { className: "react-flow__controls-interactive", onClick: onToggleInteractivity, title: "toggle interactivity", "aria-label": "toggle interactivity", children: isInteractive ? jsx(UnlockIcon, {}) : jsx(LockIcon, {}) })), children] }));
-};
-Controls.displayName = 'Controls';
-var Controls$1 = memo(Controls);
+    const orientationClass = orientation === 'horizontal' ? 'horizontal' : 'vertical';
+    return (jsxs(Panel, { className: cc(['react-flow__controls', orientationClass, className]), position: position, style: style, "data-testid": "rf__controls", "aria-label": ariaLabel, children: [showZoom && (jsxs(Fragment, { children: [jsx(ControlButton, { onClick: onZoomInHandler, className: "react-flow__controls-zoomin", title: "zoom in", "aria-label": "zoom in", disabled: maxZoomReached, children: jsx(PlusIcon, {}) }), jsx(ControlButton, { onClick: onZoomOutHandler, className: "react-flow__controls-zoomout", title: "zoom out", "aria-label": "zoom out", disabled: minZoomReached, children: jsx(MinusIcon, {}) })] })), showFitView && (jsx(ControlButton, { className: "react-flow__controls-fitview", onClick: onFitViewHandler, title: "fit view", "aria-label": "fit view", children: jsx(FitViewIcon, {}) })), showInteractive && (jsx(ControlButton, { className: "react-flow__controls-interactive", onClick: onToggleInteractivity, title: "toggle interactivity", "aria-label": "toggle interactivity", children: isInteractive ? jsx(UnlockIcon, {}) : jsx(LockIcon, {}) })), children] }));
+}
+ControlsComponent.displayName = 'Controls';
+const Controls = memo(ControlsComponent);
 
-function MiniMapNode({ id, x, y, width, height, style, color, strokeColor, strokeWidth, className, borderRadius, shapeRendering, selected, onClick, }) {
+function MiniMapNodeComponent({ id, x, y, width, height, style, color, strokeColor, strokeWidth, className, borderRadius, shapeRendering, selected, onClick, }) {
     const { background, backgroundColor } = style || {};
     const fill = (color || background || backgroundColor);
     return (jsx("rect", { className: cc(['react-flow__minimap-node', { selected }, className]), x: x, y: y, rx: borderRadius, ry: borderRadius, width: width, height: height, style: {
@@ -3153,15 +3266,15 @@ function MiniMapNode({ id, x, y, width, height, style, color, strokeColor, strok
             strokeWidth,
         }, shapeRendering: shapeRendering, onClick: onClick ? (event) => onClick(event, id) : undefined }));
 }
-var MiniMapNode$1 = memo(MiniMapNode);
+const MiniMapNode = memo(MiniMapNodeComponent);
 
 const selector$2 = (s) => s.nodeOrigin;
 const selectorNodeIds = (s) => s.nodes.map((node) => node.id);
-const getAttrFunction = (func) => (func instanceof Function ? func : () => func);
+const getAttrFunction = (func) => func instanceof Function ? func : () => func;
 function MiniMapNodes({ nodeStrokeColor, nodeColor, nodeClassName = '', nodeBorderRadius = 5, nodeStrokeWidth, 
 // We need to rename the prop to be `CapitalCase` so that JSX will render it as
 // a component properly.
-nodeComponent: NodeComponent = MiniMapNode$1, onClick, }) {
+nodeComponent: NodeComponent = MiniMapNode, onClick, }) {
     const nodeIds = useStore(selectorNodeIds, shallow);
     const nodeOrigin = useStore(selector$2);
     const nodeColorFunc = getAttrFunction(nodeColor);
@@ -3176,21 +3289,23 @@ nodeComponent: NodeComponent = MiniMapNode$1, onClick, }) {
         // For more details, see a similar commit in `NodeRenderer/index.tsx`.
         jsx(NodeComponentWrapper, { id: nodeId, nodeOrigin: nodeOrigin, nodeColorFunc: nodeColorFunc, nodeStrokeColorFunc: nodeStrokeColorFunc, nodeClassNameFunc: nodeClassNameFunc, nodeBorderRadius: nodeBorderRadius, nodeStrokeWidth: nodeStrokeWidth, NodeComponent: NodeComponent, onClick: onClick, shapeRendering: shapeRendering }, nodeId))) }));
 }
-const NodeComponentWrapper = memo(function NodeComponentWrapper({ id, nodeOrigin, nodeColorFunc, nodeStrokeColorFunc, nodeClassNameFunc, nodeBorderRadius, nodeStrokeWidth, shapeRendering, NodeComponent, onClick, }) {
+function NodeComponentWrapperInner({ id, nodeOrigin, nodeColorFunc, nodeStrokeColorFunc, nodeClassNameFunc, nodeBorderRadius, nodeStrokeWidth, shapeRendering, NodeComponent, onClick, }) {
     const { node, x, y } = useStore((s) => {
         const node = s.nodeLookup.get(id);
-        const { x, y } = getNodePositionWithOrigin(node, node?.origin || nodeOrigin).positionAbsolute;
+        const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
         return {
             node,
             x,
             y,
         };
     }, shallow);
-    if (!node || node.hidden || !(node.computed?.width || node.width) || !(node.computed?.height || node.height)) {
+    if (!node || node.hidden || !nodeHasDimensions(node)) {
         return null;
     }
-    return (jsx(NodeComponent, { x: x, y: y, width: node.computed?.width ?? node.width ?? 0, height: node.computed?.height ?? node.height ?? 0, style: node.style, selected: !!node.selected, className: nodeClassNameFunc(node), color: nodeColorFunc(node), borderRadius: nodeBorderRadius, strokeColor: nodeStrokeColorFunc(node), strokeWidth: nodeStrokeWidth, shapeRendering: shapeRendering, onClick: onClick, id: node.id }));
-});
+    const { width, height } = getNodeDimensions(node);
+    return (jsx(NodeComponent, { x: x, y: y, width: width, height: height, style: node.style, selected: !!node.selected, className: nodeClassNameFunc(node), color: nodeColorFunc(node), borderRadius: nodeBorderRadius, strokeColor: nodeStrokeColorFunc(node), strokeWidth: nodeStrokeWidth, shapeRendering: shapeRendering, onClick: onClick, id: node.id }));
+}
+const NodeComponentWrapper = memo(NodeComponentWrapperInner);
 var MiniMapNodes$1 = memo(MiniMapNodes);
 
 const defaultWidth = 200;
@@ -3204,7 +3319,9 @@ const selector$1 = (s) => {
     };
     return {
         viewBB,
-        boundingRect: s.nodes.length > 0 ? getBoundsOfRects(getNodesBounds(s.nodes, s.nodeOrigin), viewBB) : viewBB,
+        boundingRect: s.nodeLookup.size > 0
+            ? getBoundsOfRects(getInternalNodesBounds(s.nodeLookup, { nodeOrigin: s.nodeOrigin }), viewBB)
+            : viewBB,
         rfId: s.rfId,
         nodeOrigin: s.nodeOrigin,
         panZoom: s.panZoom,
@@ -3214,10 +3331,10 @@ const selector$1 = (s) => {
     };
 };
 const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
-function MiniMap({ style, className, nodeStrokeColor, nodeColor, nodeClassName = '', nodeBorderRadius = 5, nodeStrokeWidth, 
+function MiniMapComponent({ style, className, nodeStrokeColor, nodeColor, nodeClassName = '', nodeBorderRadius = 5, nodeStrokeWidth, 
 // We need to rename the prop to be `CapitalCase` so that JSX will render it as
 // a component properly.
-nodeComponent, maskColor, maskStrokeColor = 'none', maskStrokeWidth = 1, position = 'bottom-right', onClick, onNodeClick, pannable = false, zoomable = false, ariaLabel = 'React Flow mini map', inversePan, zoomStep = 10, offsetScale = 5, }) {
+nodeComponent, bgColor, maskColor, maskStrokeColor, maskStrokeWidth, position = 'bottom-right', onClick, onNodeClick, pannable = false, zoomable = false, ariaLabel = 'React Flow mini map', inversePan, zoomStep = 10, offsetScale = 5, }) {
     const store = useStoreApi();
     const svg = useRef(null);
     const { boundingRect, viewBB, rfId, panZoom, translateExtent, flowWidth, flowHeight } = useStore(selector$1, shallow);
@@ -3275,189 +3392,127 @@ nodeComponent, maskColor, maskStrokeColor = 'none', maskStrokeWidth = 1, positio
         : undefined;
     return (jsx(Panel, { position: position, style: {
             ...style,
-            '--xy-minimap-mask-color-props': typeof maskColor === 'string' ? maskColor : undefined,
+            '--xy-minimap-background-color-props': typeof bgColor === 'string' ? bgColor : undefined,
+            '--xy-minimap-mask-background-color-props': typeof maskColor === 'string' ? maskColor : undefined,
+            '--xy-minimap-mask-stroke-color-props': typeof maskStrokeColor === 'string' ? maskStrokeColor : undefined,
+            '--xy-minimap-mask-stroke-width-props': typeof maskStrokeWidth === 'number' ? maskStrokeWidth * viewScale : undefined,
             '--xy-minimap-node-background-color-props': typeof nodeColor === 'string' ? nodeColor : undefined,
             '--xy-minimap-node-stroke-color-props': typeof nodeStrokeColor === 'string' ? nodeStrokeColor : undefined,
             '--xy-minimap-node-stroke-width-props': typeof nodeStrokeWidth === 'string' ? nodeStrokeWidth : undefined,
-        }, className: cc(['react-flow__minimap', className]), "data-testid": "rf__minimap", children: jsxs("svg", { width: elementWidth, height: elementHeight, viewBox: `${x} ${y} ${width} ${height}`, role: "img", "aria-labelledby": labelledBy, ref: svg, onClick: onSvgClick, children: [ariaLabel && jsx("title", { id: labelledBy, children: ariaLabel }), jsx(MiniMapNodes$1, { onClick: onSvgNodeClick, nodeColor: nodeColor, nodeStrokeColor: nodeStrokeColor, nodeBorderRadius: nodeBorderRadius, nodeClassName: nodeClassName, nodeStrokeWidth: nodeStrokeWidth, nodeComponent: nodeComponent }), jsx("path", { className: "react-flow__minimap-mask", d: `M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
-        M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`, fillRule: "evenodd", stroke: maskStrokeColor, strokeWidth: maskStrokeWidth, pointerEvents: "none" })] }) }));
-}
-MiniMap.displayName = 'MiniMap';
-var MiniMap$1 = memo(MiniMap);
-
-var ResizeControlVariant;
-(function (ResizeControlVariant) {
-    ResizeControlVariant["Line"] = "line";
-    ResizeControlVariant["Handle"] = "handle";
-})(ResizeControlVariant || (ResizeControlVariant = {}));
-
-// returns an array of two numbers (0, 1 or -1) representing the direction of the resize
-// 0 = no change, 1 = increase, -1 = decrease
-function getDirection({ width, prevWidth, height, prevHeight, invertX, invertY }) {
-    const deltaWidth = width - prevWidth;
-    const deltaHeight = height - prevHeight;
-    const direction = [deltaWidth > 0 ? 1 : deltaWidth < 0 ? -1 : 0, deltaHeight > 0 ? 1 : deltaHeight < 0 ? -1 : 0];
-    if (deltaWidth && invertX) {
-        direction[0] = direction[0] * -1;
-    }
-    if (deltaHeight && invertY) {
-        direction[1] = direction[1] * -1;
-    }
-    return direction;
+        }, className: cc(['react-flow__minimap', className]), "data-testid": "rf__minimap", children: jsxs("svg", { width: elementWidth, height: elementHeight, viewBox: `${x} ${y} ${width} ${height}`, className: "react-flow__minimap-svg", role: "img", "aria-labelledby": labelledBy, ref: svg, onClick: onSvgClick, children: [ariaLabel && jsx("title", { id: labelledBy, children: ariaLabel }), jsx(MiniMapNodes$1, { onClick: onSvgNodeClick, nodeColor: nodeColor, nodeStrokeColor: nodeStrokeColor, nodeBorderRadius: nodeBorderRadius, nodeClassName: nodeClassName, nodeStrokeWidth: nodeStrokeWidth, nodeComponent: nodeComponent }), jsx("path", { className: "react-flow__minimap-mask", d: `M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
+        M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`, fillRule: "evenodd", pointerEvents: "none" })] }) }));
 }
+MiniMapComponent.displayName = 'MiniMap';
+const MiniMap = memo(MiniMapComponent);
 
-const initPrevValues = { width: 0, height: 0, x: 0, y: 0 };
-const initStartValues = {
-    ...initPrevValues,
-    pointerX: 0,
-    pointerY: 0,
-    aspectRatio: 1,
-};
 function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle, className, style = {}, children, color, minWidth = 10, minHeight = 10, maxWidth = Number.MAX_VALUE, maxHeight = Number.MAX_VALUE, keepAspectRatio = false, shouldResize, onResizeStart, onResize, onResizeEnd, }) {
     const contextNodeId = useNodeId();
     const id = typeof nodeId === 'string' ? nodeId : contextNodeId;
     const store = useStoreApi();
     const resizeControlRef = useRef(null);
-    const startValues = useRef(initStartValues);
-    const prevValues = useRef(initPrevValues);
     const defaultPosition = variant === ResizeControlVariant.Line ? 'right' : 'bottom-right';
     const controlPosition = position ?? defaultPosition;
+    const resizer = useRef(null);
     useEffect(() => {
         if (!resizeControlRef.current || !id) {
             return;
         }
-        const selection = select(resizeControlRef.current);
-        const enableX = controlPosition.includes('right') || controlPosition.includes('left');
-        const enableY = controlPosition.includes('bottom') || controlPosition.includes('top');
-        const invertX = controlPosition.includes('left');
-        const invertY = controlPosition.includes('top');
-        const dragHandler = drag()
-            .on('start', (event) => {
-            const { nodeLookup, transform, snapGrid, snapToGrid } = store.getState();
-            const node = nodeLookup.get(id);
-            const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
-            prevValues.current = {
-                width: node?.computed?.width ?? 0,
-                height: node?.computed?.height ?? 0,
-                x: node?.position.x ?? 0,
-                y: node?.position.y ?? 0,
-            };
-            startValues.current = {
-                ...prevValues.current,
-                pointerX: xSnapped,
-                pointerY: ySnapped,
-                aspectRatio: prevValues.current.width / prevValues.current.height,
-            };
-            onResizeStart?.(event, { ...prevValues.current });
-        })
-            .on('drag', (event) => {
-            const { nodeLookup, transform, snapGrid, snapToGrid, triggerNodeChanges } = store.getState();
-            const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
-            const node = nodeLookup.get(id);
-            if (node) {
-                const changes = [];
-                const { pointerX: startX, pointerY: startY, width: startWidth, height: startHeight, x: startNodeX, y: startNodeY, aspectRatio, } = startValues.current;
-                const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues.current;
-                const distX = Math.floor(enableX ? xSnapped - startX : 0);
-                const distY = Math.floor(enableY ? ySnapped - startY : 0);
-                let width = clamp(startWidth + (invertX ? -distX : distX), minWidth, maxWidth);
-                let height = clamp(startHeight + (invertY ? -distY : distY), minHeight, maxHeight);
-                if (keepAspectRatio) {
-                    const nextAspectRatio = width / height;
-                    const isDiagonal = enableX && enableY;
-                    const isHorizontal = enableX && !enableY;
-                    const isVertical = enableY && !enableX;
-                    width = (nextAspectRatio <= aspectRatio && isDiagonal) || isVertical ? height * aspectRatio : width;
-                    height = (nextAspectRatio > aspectRatio && isDiagonal) || isHorizontal ? width / aspectRatio : height;
-                    if (width >= maxWidth) {
-                        width = maxWidth;
-                        height = maxWidth / aspectRatio;
-                    }
-                    else if (width <= minWidth) {
-                        width = minWidth;
-                        height = minWidth / aspectRatio;
+        if (!resizer.current) {
+            resizer.current = XYResizer({
+                domNode: resizeControlRef.current,
+                nodeId: id,
+                getStoreItems: () => {
+                    const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin } = store.getState();
+                    return {
+                        nodeLookup,
+                        transform,
+                        snapGrid,
+                        snapToGrid,
+                        nodeOrigin,
+                    };
+                },
+                onChange: (change, childChanges) => {
+                    const { triggerNodeChanges, nodeLookup, parentLookup, nodeOrigin } = store.getState();
+                    const changes = [];
+                    const nextPosition = { x: change.x, y: change.y };
+                    const node = nodeLookup.get(id);
+                    if (node && node.expandParent && node.parentId) {
+                        const child = {
+                            id: node.id,
+                            parentId: node.parentId,
+                            rect: {
+                                width: change.width ?? node.measured.width,
+                                height: change.height ?? node.measured.height,
+                                ...evaluateAbsolutePosition({
+                                    x: change.x ?? node.position.x,
+                                    y: change.y ?? node.position.y,
+                                }, node.parentId, nodeLookup, node.origin ?? nodeOrigin),
+                            },
+                        };
+                        const parentExpandChanges = handleExpandParent([child], nodeLookup, parentLookup, nodeOrigin);
+                        changes.push(...parentExpandChanges);
+                        // when the parent was expanded by the child node, its position will be clamped at 0,0
+                        nextPosition.x = change.x ? Math.max(0, change.x) : undefined;
+                        nextPosition.y = change.y ? Math.max(0, change.y) : undefined;
                     }
-                    if (height >= maxHeight) {
-                        height = maxHeight;
-                        width = maxHeight * aspectRatio;
+                    if (nextPosition.x !== undefined && nextPosition.y !== undefined) {
+                        const positionChange = {
+                            id,
+                            type: 'position',
+                            position: { ...nextPosition },
+                        };
+                        changes.push(positionChange);
                     }
-                    else if (height <= minHeight) {
-                        height = minHeight;
-                        width = minHeight * aspectRatio;
+                    if (change.width !== undefined && change.height !== undefined) {
+                        const dimensionChange = {
+                            id,
+                            type: 'dimensions',
+                            resizing: true,
+                            setAttributes: true,
+                            dimensions: {
+                                width: change.width,
+                                height: change.height,
+                            },
+                        };
+                        changes.push(dimensionChange);
                     }
-                }
-                const isWidthChange = width !== prevWidth;
-                const isHeightChange = height !== prevHeight;
-                if (invertX || invertY) {
-                    const x = invertX ? startNodeX - (width - startWidth) : startNodeX;
-                    const y = invertY ? startNodeY - (height - startHeight) : startNodeY;
-                    // only transform the node if the width or height changes
-                    const isXPosChange = x !== prevX && isWidthChange;
-                    const isYPosChange = y !== prevY && isHeightChange;
-                    if (isXPosChange || isYPosChange) {
+                    for (const childChange of childChanges) {
                         const positionChange = {
-                            id: node.id,
+                            ...childChange,
                             type: 'position',
-                            position: {
-                                x: isXPosChange ? x : prevX,
-                                y: isYPosChange ? y : prevY,
-                            },
                         };
                         changes.push(positionChange);
-                        prevValues.current.x = positionChange.position.x;
-                        prevValues.current.y = positionChange.position.y;
                     }
-                }
-                if (isWidthChange || isHeightChange) {
+                    triggerNodeChanges(changes);
+                },
+                onEnd: () => {
                     const dimensionChange = {
                         id: id,
                         type: 'dimensions',
-                        updateStyle: true,
-                        resizing: true,
-                        dimensions: {
-                            width: width,
-                            height: height,
-                        },
+                        resizing: false,
                     };
-                    changes.push(dimensionChange);
-                    prevValues.current.width = width;
-                    prevValues.current.height = height;
-                }
-                if (changes.length === 0) {
-                    return;
-                }
-                const direction = getDirection({
-                    width: prevValues.current.width,
-                    prevWidth,
-                    height: prevValues.current.height,
-                    prevHeight,
-                    invertX,
-                    invertY,
-                });
-                const nextValues = { ...prevValues.current, direction };
-                const callResize = shouldResize?.(event, nextValues);
-                if (callResize === false) {
-                    return;
-                }
-                onResize?.(event, nextValues);
-                triggerNodeChanges(changes);
-            }
-        })
-            .on('end', (event) => {
-            const dimensionChange = {
-                id: id,
-                type: 'dimensions',
-                resizing: false,
-            };
-            onResizeEnd?.(event, { ...prevValues.current });
-            store.getState().triggerNodeChanges([dimensionChange]);
+                    store.getState().triggerNodeChanges([dimensionChange]);
+                },
+            });
+        }
+        resizer.current.update({
+            controlPosition,
+            boundaries: {
+                minWidth,
+                minHeight,
+                maxWidth,
+                maxHeight,
+            },
+            keepAspectRatio,
+            onResizeStart,
+            onResize,
+            onResizeEnd,
+            shouldResize,
         });
-        selection.call(dragHandler);
         return () => {
-            selection.on('.drag', null);
+            resizer.current?.destroy();
         };
     }, [
-        id,
         controlPosition,
         minWidth,
         minHeight,
@@ -3467,21 +3522,20 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
         onResizeStart,
         onResize,
         onResizeEnd,
+        shouldResize,
     ]);
     const positionClassNames = controlPosition.split('-');
     const colorStyleProp = variant === ResizeControlVariant.Line ? 'borderColor' : 'backgroundColor';
     const controlStyle = color ? { ...style, [colorStyleProp]: color } : style;
     return (jsx("div", { className: cc(['react-flow__resize-control', 'nodrag', ...positionClassNames, variant, className]), ref: resizeControlRef, style: controlStyle, children: children }));
 }
-var ResizeControl$1 = memo(ResizeControl);
+const NodeResizeControl = memo(ResizeControl);
 
-const handleControls = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
-const lineControls = ['top', 'right', 'bottom', 'left'];
 function NodeResizer({ nodeId, isVisible = true, handleClassName, handleStyle, lineClassName, lineStyle, color, minWidth = 10, minHeight = 10, maxWidth = Number.MAX_VALUE, maxHeight = Number.MAX_VALUE, keepAspectRatio = false, shouldResize, onResizeStart, onResize, onResizeEnd, }) {
     if (!isVisible) {
         return null;
     }
-    return (jsxs(Fragment, { children: [lineControls.map((c) => (jsx(ResizeControl$1, { className: lineClassName, style: lineStyle, nodeId: nodeId, position: c, variant: ResizeControlVariant.Line, color: color, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, onResizeStart: onResizeStart, keepAspectRatio: keepAspectRatio, shouldResize: shouldResize, onResize: onResize, onResizeEnd: onResizeEnd }, c))), handleControls.map((c) => (jsx(ResizeControl$1, { className: handleClassName, style: handleStyle, nodeId: nodeId, position: c, color: color, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, onResizeStart: onResizeStart, keepAspectRatio: keepAspectRatio, shouldResize: shouldResize, onResize: onResize, onResizeEnd: onResizeEnd }, c)))] }));
+    return (jsxs(Fragment, { children: [XY_RESIZER_LINE_POSITIONS.map((position) => (jsx(NodeResizeControl, { className: lineClassName, style: lineStyle, nodeId: nodeId, position: position, variant: ResizeControlVariant.Line, color: color, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, onResizeStart: onResizeStart, keepAspectRatio: keepAspectRatio, shouldResize: shouldResize, onResize: onResize, onResizeEnd: onResizeEnd }, position))), XY_RESIZER_HANDLE_POSITIONS.map((position) => (jsx(NodeResizeControl, { className: handleClassName, style: handleStyle, nodeId: nodeId, position: position, color: color, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, onResizeStart: onResizeStart, keepAspectRatio: keepAspectRatio, shouldResize: shouldResize, onResize: onResize, onResizeEnd: onResizeEnd }, position)))] }));
 }
 
 const selector = (state) => state.domNode?.querySelector('.react-flow__renderer');
@@ -3493,12 +3547,12 @@ function NodeToolbarPortal({ children }) {
     return createPortal(children, wrapperRef);
 }
 
-const nodeEqualityFn = (a, b) => a?.computed?.positionAbsolute?.x !== b?.computed?.positionAbsolute?.x ||
-    a?.computed?.positionAbsolute?.y !== b?.computed?.positionAbsolute?.y ||
-    a?.computed?.width !== b?.computed?.width ||
-    a?.computed?.height !== b?.computed?.height ||
+const nodeEqualityFn = (a, b) => a?.internals.positionAbsolute.x !== b?.internals.positionAbsolute.x ||
+    a?.internals.positionAbsolute.y !== b?.internals.positionAbsolute.y ||
+    a?.measured.width !== b?.measured.width ||
+    a?.measured.height !== b?.measured.height ||
     a?.selected !== b?.selected ||
-    a?.[internalsSymbol]?.z !== b?.[internalsSymbol]?.z;
+    a?.internals.z !== b?.internals.z;
 const nodesEqualityFn = (a, b) => {
     if (a.length !== b.length) {
         return false;
@@ -3533,8 +3587,8 @@ function NodeToolbar({ nodeId, children, className, style, isVisible, position =
     if (!isActive || !nodes.length) {
         return null;
     }
-    const nodeRect = getNodesBounds(nodes, nodeOrigin);
-    const zIndex = Math.max(...nodes.map((node) => (node[internalsSymbol]?.z || 1) + 1));
+    const nodeRect = getNodesBounds(nodes, { nodeOrigin });
+    const zIndex = Math.max(...nodes.map((node) => node.internals.z + 1));
     const wrapperStyle = {
         position: 'absolute',
         transform: getNodeToolbarTransform(nodeRect, viewport, position, offset, align),
@@ -3544,4 +3598,4 @@ function NodeToolbar({ nodeId, children, className, style, isVisible, position =
     return (jsx(NodeToolbarPortal, { children: jsx("div", { style: wrapperStyle, className: cc(['react-flow__node-toolbar', className]), ...rest, "data-id": nodes.reduce((acc, node) => `${acc}${node.id} `, '').trim(), children: children }) }));
 }
 
-export { Background$1 as Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls$1 as Controls, EdgeLabelRenderer, EdgeText$1 as EdgeText, Handle$1 as Handle, MiniMap$1 as MiniMap, ResizeControl$1 as NodeResizeControl, NodeResizer, NodeToolbar, Panel, ReactFlow, ReactFlowProvider, ResizeControlVariant, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, addEdge, applyEdgeChanges, applyNodeChanges, getConnectedEdges, getIncomers, getOutgoers, getSimpleBezierPath, handleParentExpand, isEdge, isNode, updateEdge, useConnection, useEdges, useEdgesState, useHandleConnections, useKeyPress, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };
+export { Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, Handle, MiniMap, NodeResizeControl, NodeResizer, NodeToolbar, Panel, index as ReactFlow, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, applyEdgeChanges, applyNodeChanges, getSimpleBezierPath, isEdge, isNode, useConnection, useEdges, useEdgesState, useHandleConnections, useInternalNode, useKeyPress, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };