@loopstack/loopstack-studio 0.25.1 → 0.26.0

package/dist/node_modules/@xyflow/react/dist/esm/index.js

@@ -1,28 +1,27 @@
 "use client";
-import e from "../../../../classcat/index.js";
-import { ConnectionLineType as t, ConnectionMode as n, MarkerType as r, PanOnScrollMode as i, Position as a, ResizeControlVariant as o, SelectionMode as s, XYDrag as c, XYHandle as l, XYMinimap as u, XYPanZoom as d, XYResizer as f, addEdge as p, adoptUserNodes as m, areSetsEqual as h, calculateNodePosition as g, createMarkerIds as _, defaultAriaLabelConfig as v, devWarn as y, elementSelectionKeys as b, errorMessages as x, evaluateAbsolutePosition as S, fitViewport as C, getBezierEdgeCenter as w, getBezierPath as T, getBoundsOfRects as E, getConnectionStatus as D, getDimensions as O, getEdgePosition as k, getElementsToRemove as A, getElevatedEdgeZIndex as j, getEventPosition as M, getHandlePosition as N, getHostForElement as P, getInternalNodesBounds as F, getMarkerId as ee, getNodeDimensions as I, getNodesBounds as L, getNodesInside as R, getOverlappingArea as z, getSmoothStepPath as B, getStraightPath as V, getViewportForBounds as H, handleExpandParent as te, infiniteExtent as ne, initialConnection as re, isEdgeBase as ie, isEdgeVisible as ae, isInputDOMNode as oe, isMacOs as se, isMouseEvent as ce, isNodeBase as le, isNumeric as ue, isRectObject as de, mergeAriaLabelConfig as fe, nodeHasDimensions as pe, nodeToRect as me, panBy as he, pointToRendererPoint as ge, rendererPointToPoint as _e, snapPosition as ve, updateAbsolutePositions as ye, updateConnectionLookup as be, updateNodeInternals as xe, withResolvers as Se } from "../../../system/dist/esm/index.js";
-import { createContext as Ce, forwardRef as we, memo as U, useCallback as W, useContext as Te, useEffect as G, useLayoutEffect as Ee, useMemo as K, useRef as q, useState as J } from "react";
-import { Fragment as De, jsx as Y, jsxs as X } from "react/jsx-runtime";
-import { createPortal as Oe } from "react-dom";
-import { createWithEqualityFn as ke, useStoreWithEqualityFn as Ae } from "zustand/traditional";
-import { shallow as Z } from "zustand/shallow";
-//#region ../../node_modules/@xyflow/react/dist/esm/index.js
-var je = Ce(null), Me = je.Provider, Ne = x.error001();
-function Q(e, t) {
-	let n = Te(je);
-	if (n === null) throw Error(Ne);
-	return Ae(n, e, t);
-}
-function $() {
-	let e = Te(je);
-	if (e === null) throw Error(Ne);
-	return K(() => ({
+import cc from "../../../../classcat/index.js";
+import { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, addEdge, adoptUserNodes, areSetsEqual, calculateNodePosition, createMarkerIds, defaultAriaLabelConfig, devWarn, elementSelectionKeys, errorMessages, evaluateAbsolutePosition, fitViewport, getBezierEdgeCenter, getBezierPath, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandlePosition, getHostForElement, getInternalNodesBounds, getMarkerId, getNodeDimensions, getNodesBounds, getNodesInside, getOverlappingArea, getSmoothStepPath, getStraightPath, getViewportForBounds, handleExpandParent, infiniteExtent, initialConnection, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, mergeAriaLabelConfig, nodeHasDimensions, nodeToRect, panBy, pointToRendererPoint, rendererPointToPoint, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateNodeInternals, withResolvers } from "../../../system/dist/esm/index.js";
+import { createContext, forwardRef, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createWithEqualityFn, useStoreWithEqualityFn } from "zustand/traditional";
+import { shallow } from "zustand/shallow";
+import { createPortal } from "react-dom";
+var StoreContext = createContext(null), Provider$1 = StoreContext.Provider, zustandErrorMessage = errorMessages.error001();
+function useStore(e, t) {
+	let n = useContext(StoreContext);
+	if (n === null) throw Error(zustandErrorMessage);
+	return useStoreWithEqualityFn(n, e, t);
+}
+function useStoreApi() {
+	let e = useContext(StoreContext);
+	if (e === null) throw Error(zustandErrorMessage);
+	return useMemo(() => ({
 		getState: e.getState,
 		setState: e.setState,
 		subscribe: e.subscribe
 	}), [e]);
 }
-var Pe = { display: "none" }, Fe = {
+var style = { display: "none" }, ariaLiveStyle = {
 	position: "absolute",
 	width: 1,
 	height: 1,
@@ -32,35 +31,35 @@ var Pe = { display: "none" }, Fe = {
 	overflow: "hidden",
 	clip: "rect(0px, 0px, 0px, 0px)",
 	clipPath: "inset(100%)"
-}, Ie = "react-flow__node-desc", Le = "react-flow__edge-desc", Re = "react-flow__aria-live", ze = (e) => e.ariaLiveMessage, Be = (e) => e.ariaLabelConfig;
-function Ve({ rfId: e }) {
-	let t = Q(ze);
-	return Y("div", {
-		id: `${Re}-${e}`,
+}, ARIA_NODE_DESC_KEY = "react-flow__node-desc", ARIA_EDGE_DESC_KEY = "react-flow__edge-desc", ARIA_LIVE_MESSAGE = "react-flow__aria-live", ariaLiveSelector = (e) => e.ariaLiveMessage, ariaLabelConfigSelector = (e) => e.ariaLabelConfig;
+function AriaLiveMessage({ rfId: e }) {
+	let t = useStore(ariaLiveSelector);
+	return jsx("div", {
+		id: `${ARIA_LIVE_MESSAGE}-${e}`,
 		"aria-live": "assertive",
 		"aria-atomic": "true",
-		style: Fe,
+		style: ariaLiveStyle,
 		children: t
 	});
 }
-function He({ rfId: e, disableKeyboardA11y: t }) {
-	let n = Q(Be);
-	return X(De, { children: [
-		Y("div", {
-			id: `${Ie}-${e}`,
-			style: Pe,
+function A11yDescriptions({ rfId: e, disableKeyboardA11y: t }) {
+	let n = useStore(ariaLabelConfigSelector);
+	return jsxs(Fragment$1, { children: [
+		jsx("div", {
+			id: `${ARIA_NODE_DESC_KEY}-${e}`,
+			style,
 			children: t ? n["node.a11yDescription.default"] : n["node.a11yDescription.keyboardDisabled"]
 		}),
-		Y("div", {
-			id: `${Le}-${e}`,
-			style: Pe,
+		jsx("div", {
+			id: `${ARIA_EDGE_DESC_KEY}-${e}`,
+			style,
 			children: n["edge.a11yDescription.default"]
 		}),
-		!t && Y(Ve, { rfId: e })
+		!t && jsx(AriaLiveMessage, { rfId: e })
 	] });
 }
-var Ue = we(({ position: t = "top-left", children: n, className: r, style: i, ...a }, o) => Y("div", {
-	className: e([
+var Panel = forwardRef(({ position: t = "top-left", children: n, className: r, style: i, ...a }, o) => jsx("div", {
+	className: cc([
 		"react-flow__panel",
 		r,
 		...`${t}`.split("-")
@@ -70,13 +69,13 @@ var Ue = we(({ position: t = "top-left", children: n, className: r, style: i, ..
 	...a,
 	children: n
 }));
-Ue.displayName = "Panel";
-function We({ proOptions: e, position: t = "bottom-right" }) {
-	return e?.hideAttribution ? null : Y(Ue, {
+Panel.displayName = "Panel";
+function Attribution({ proOptions: e, position: t = "bottom-right" }) {
+	return e?.hideAttribution ? null : jsx(Panel, {
 		position: t,
 		className: "react-flow__attribution",
 		"data-message": "Please only hide this attribution when you are subscribed to React Flow Pro: https://pro.reactflow.dev",
-		children: Y("a", {
+		children: jsx("a", {
 			href: "https://reactflow.dev",
 			target: "_blank",
 			rel: "noopener noreferrer",
@@ -85,7 +84,7 @@ function We({ proOptions: e, position: t = "bottom-right" }) {
 		})
 	});
 }
-var Ge = (e) => {
+var selector$m = (e) => {
 	let t = [], n = [];
 	for (let [, n] of e.nodeLookup) n.selected && t.push(n.internals.userNode);
 	for (let [, t] of e.edgeLookup) t.selected && n.push(t);
@@ -93,13 +92,13 @@ var Ge = (e) => {
 		selectedNodes: t,
 		selectedEdges: n
 	};
-}, Ke = (e) => e.id;
-function qe(e, t) {
-	return Z(e.selectedNodes.map(Ke), t.selectedNodes.map(Ke)) && Z(e.selectedEdges.map(Ke), t.selectedEdges.map(Ke));
+}, selectId = (e) => e.id;
+function areEqual(e, t) {
+	return shallow(e.selectedNodes.map(selectId), t.selectedNodes.map(selectId)) && shallow(e.selectedEdges.map(selectId), t.selectedEdges.map(selectId));
 }
-function Je({ onSelectionChange: e }) {
-	let t = $(), { selectedNodes: n, selectedEdges: r } = Q(Ge, qe);
-	return G(() => {
+function SelectionListenerInner({ onSelectionChange: e }) {
+	let t = useStoreApi(), { selectedNodes: n, selectedEdges: r } = useStore(selector$m, areEqual);
+	return useEffect(() => {
 		let i = {
 			nodes: n,
 			edges: r
@@ -111,16 +110,16 @@ function Je({ onSelectionChange: e }) {
 		e
 	]), null;
 }
-var Ye = (e) => !!e.onSelectionChangeHandlers;
-function Xe({ onSelectionChange: e }) {
-	let t = Q(Ye);
-	return e || t ? Y(Je, { onSelectionChange: e }) : null;
+var changeSelector = (e) => !!e.onSelectionChangeHandlers;
+function SelectionListener({ onSelectionChange: e }) {
+	let t = useStore(changeSelector);
+	return e || t ? jsx(SelectionListenerInner, { onSelectionChange: e }) : null;
 }
-var Ze = typeof window < "u" ? Ee : G, Qe = [0, 0], $e = {
+var useIsomorphicLayoutEffect = typeof window < "u" ? useLayoutEffect : useEffect, defaultNodeOrigin = [0, 0], defaultViewport = {
 	x: 0,
 	y: 0,
 	zoom: 1
-}, et = [.../* @__PURE__ */ "nodes.edges.defaultNodes.defaultEdges.onConnect.onConnectStart.onConnectEnd.onClickConnectStart.onClickConnectEnd.nodesDraggable.autoPanOnNodeFocus.nodesConnectable.nodesFocusable.edgesFocusable.edgesReconnectable.elevateNodesOnSelect.elevateEdgesOnSelect.minZoom.maxZoom.nodeExtent.onNodesChange.onEdgesChange.elementsSelectable.connectionMode.snapGrid.snapToGrid.translateExtent.connectOnClick.defaultEdgeOptions.fitView.fitViewOptions.onNodesDelete.onEdgesDelete.onDelete.onNodeDrag.onNodeDragStart.onNodeDragStop.onSelectionDrag.onSelectionDragStart.onSelectionDragStop.onMoveStart.onMove.onMoveEnd.noPanClassName.nodeOrigin.autoPanOnConnect.autoPanOnNodeDrag.onError.connectionRadius.isValidConnection.selectNodesOnDrag.nodeDragThreshold.connectionDragThreshold.onBeforeDelete.debug.autoPanSpeed.ariaLabelConfig.zIndexMode".split("."), "rfId"], tt = (e) => ({
+}, fieldsToTrack = [.../* @__PURE__ */ "nodes.edges.defaultNodes.defaultEdges.onConnect.onConnectStart.onConnectEnd.onClickConnectStart.onClickConnectEnd.nodesDraggable.autoPanOnNodeFocus.nodesConnectable.nodesFocusable.edgesFocusable.edgesReconnectable.elevateNodesOnSelect.elevateEdgesOnSelect.minZoom.maxZoom.nodeExtent.onNodesChange.onEdgesChange.elementsSelectable.connectionMode.snapGrid.snapToGrid.translateExtent.connectOnClick.defaultEdgeOptions.fitView.fitViewOptions.onNodesDelete.onEdgesDelete.onDelete.onNodeDrag.onNodeDragStart.onNodeDragStop.onSelectionDrag.onSelectionDragStart.onSelectionDragStop.onMoveStart.onMove.onMoveEnd.noPanClassName.nodeOrigin.autoPanOnConnect.autoPanOnNodeDrag.onError.connectionRadius.isValidConnection.selectNodesOnDrag.nodeDragThreshold.connectionDragThreshold.onBeforeDelete.debug.autoPanSpeed.ariaLabelConfig.zIndexMode".split("."), "rfId"], selector$l = (e) => ({
 	setNodes: e.setNodes,
 	setEdges: e.setEdges,
 	setMinZoom: e.setMinZoom,
@@ -129,70 +128,70 @@ var Ze = typeof window < "u" ? Ee : G, Qe = [0, 0], $e = {
 	setNodeExtent: e.setNodeExtent,
 	reset: e.reset,
 	setDefaultNodesAndEdges: e.setDefaultNodesAndEdges
-}), nt = {
-	translateExtent: ne,
-	nodeOrigin: Qe,
+}), initPrevValues = {
+	translateExtent: infiniteExtent,
+	nodeOrigin: defaultNodeOrigin,
 	minZoom: .5,
 	maxZoom: 2,
 	elementsSelectable: !0,
 	noPanClassName: "nopan",
 	rfId: "1"
 };
-function rt(e) {
-	let { setNodes: t, setEdges: n, setMinZoom: r, setMaxZoom: i, setTranslateExtent: a, setNodeExtent: o, reset: s, setDefaultNodesAndEdges: c } = Q(tt, Z), l = $();
-	Ze(() => (c(e.defaultNodes, e.defaultEdges), () => {
-		u.current = nt, s();
+function StoreUpdater(e) {
+	let { setNodes: t, setEdges: n, setMinZoom: r, setMaxZoom: i, setTranslateExtent: a, setNodeExtent: o, reset: s, setDefaultNodesAndEdges: c } = useStore(selector$l, shallow), l = useStoreApi();
+	useIsomorphicLayoutEffect(() => (c(e.defaultNodes, e.defaultEdges), () => {
+		u.current = initPrevValues, s();
 	}), []);
-	let u = q(nt);
-	return Ze(() => {
-		for (let s of et) {
+	let u = useRef(initPrevValues);
+	return useIsomorphicLayoutEffect(() => {
+		for (let s of fieldsToTrack) {
 			let c = e[s];
-			c !== u.current[s] && e[s] !== void 0 && (s === "nodes" ? t(c) : s === "edges" ? n(c) : s === "minZoom" ? r(c) : s === "maxZoom" ? i(c) : s === "translateExtent" ? a(c) : s === "nodeExtent" ? o(c) : s === "ariaLabelConfig" ? l.setState({ ariaLabelConfig: fe(c) }) : s === "fitView" ? l.setState({ fitViewQueued: c }) : s === "fitViewOptions" ? l.setState({ fitViewOptions: c }) : l.setState({ [s]: c }));
+			c !== u.current[s] && e[s] !== void 0 && (s === "nodes" ? t(c) : s === "edges" ? n(c) : s === "minZoom" ? r(c) : s === "maxZoom" ? i(c) : s === "translateExtent" ? a(c) : s === "nodeExtent" ? o(c) : s === "ariaLabelConfig" ? l.setState({ ariaLabelConfig: mergeAriaLabelConfig(c) }) : s === "fitView" ? l.setState({ fitViewQueued: c }) : s === "fitViewOptions" ? l.setState({ fitViewOptions: c }) : l.setState({ [s]: c }));
 		}
 		u.current = e;
-	}, et.map((t) => e[t])), null;
+	}, fieldsToTrack.map((t) => e[t])), null;
 }
-function it() {
+function getMediaQuery() {
 	return typeof window > "u" || !window.matchMedia ? null : window.matchMedia("(prefers-color-scheme: dark)");
 }
-function at(e) {
-	let [t, n] = J(e === "system" ? null : e);
-	return G(() => {
+function useColorModeClass(e) {
+	let [t, n] = useState(e === "system" ? null : e);
+	return useEffect(() => {
 		if (e !== "system") {
 			n(e);
 			return;
 		}
-		let t = it(), r = () => n(t?.matches ? "dark" : "light");
+		let t = getMediaQuery(), r = () => n(t?.matches ? "dark" : "light");
 		return r(), t?.addEventListener("change", r), () => {
 			t?.removeEventListener("change", r);
 		};
-	}, [e]), t === null ? it()?.matches ? "dark" : "light" : t;
+	}, [e]), t === null ? getMediaQuery()?.matches ? "dark" : "light" : t;
 }
-var ot = typeof document < "u" ? document : null;
-function st(e = null, t = {
-	target: ot,
+var defaultDoc = typeof document < "u" ? document : null;
+function useKeyPress(e = null, t = {
+	target: defaultDoc,
 	actInsideInputWithModifier: !0
 }) {
-	let [n, r] = J(!1), i = q(!1), a = q(/* @__PURE__ */ new Set([])), [o, s] = K(() => {
+	let [n, r] = useState(!1), i = useRef(!1), a = useRef(/* @__PURE__ */ new Set([])), [o, s] = useMemo(() => {
 		if (e !== null) {
 			let t = (Array.isArray(e) ? e : [e]).filter((e) => typeof e == "string").map((e) => e.replace("+", "\n").replace("\n\n", "\n+").split("\n"));
 			return [t, t.reduce((e, t) => e.concat(...t), [])];
 		}
 		return [[], []];
 	}, [e]);
-	return G(() => {
-		let n = t?.target ?? ot, c = t?.actInsideInputWithModifier ?? !0;
+	return useEffect(() => {
+		let n = t?.target ?? defaultDoc, c = t?.actInsideInputWithModifier ?? !0;
 		if (e !== null) {
 			let e = (e) => {
-				if (i.current = e.ctrlKey || e.metaKey || e.shiftKey || e.altKey, (!i.current || i.current && !c) && oe(e)) return !1;
-				let n = lt(e.code, s);
-				if (a.current.add(e[n]), ct(o, a.current, !1)) {
+				if (i.current = e.ctrlKey || e.metaKey || e.shiftKey || e.altKey, (!i.current || i.current && !c) && isInputDOMNode(e)) return !1;
+				let n = useKeyOrCode(e.code, s);
+				if (a.current.add(e[n]), isMatchingKey(o, a.current, !1)) {
 					let n = e.composedPath?.()?.[0] || e.target, a = n?.nodeName === "BUTTON" || n?.nodeName === "A";
 					t.preventDefault !== !1 && (i.current || !a) && e.preventDefault(), r(!0);
 				}
 			}, l = (e) => {
-				let t = lt(e.code, s);
-				ct(o, a.current, !0) ? (r(!1), a.current.clear()) : a.current.delete(e[t]), e.key === "Meta" && a.current.clear(), i.current = !1;
+				let t = useKeyOrCode(e.code, s);
+				isMatchingKey(o, a.current, !0) ? (r(!1), a.current.clear()) : a.current.delete(e[t]), e.key === "Meta" && a.current.clear(), i.current = !1;
 			}, u = () => {
 				a.current.clear(), r(!1);
 			};
@@ -202,15 +201,15 @@ function st(e = null, t = {
 		}
 	}, [e, r]), n;
 }
-function ct(e, t, n) {
+function isMatchingKey(e, t, n) {
 	return e.filter((e) => n || e.length === t.size).some((e) => e.every((e) => t.has(e)));
 }
-function lt(e, t) {
+function useKeyOrCode(e, t) {
 	return t.includes(e) ? "code" : "key";
 }
-var ut = () => {
-	let e = $();
-	return K(() => ({
+var useViewportHelper = () => {
+	let e = useStoreApi();
+	return useMemo(() => ({
 		zoomIn: (t) => {
 			let { panZoom: n } = e.getState();
 			return n ? n.scaleBy(1.2, t) : Promise.resolve(!1);
@@ -242,7 +241,7 @@ var ut = () => {
 		},
 		setCenter: async (t, n, r) => e.getState().setCenter(t, n, r),
 		fitBounds: async (t, n) => {
-			let { width: r, height: i, minZoom: a, maxZoom: o, panZoom: s } = e.getState(), c = H(t, r, i, a, o, n?.padding ?? .1);
+			let { width: r, height: i, minZoom: a, maxZoom: o, panZoom: s } = e.getState(), c = getViewportForBounds(t, r, i, a, o, n?.padding ?? .1);
 			return s ? (await s.setViewport(c, {
 				duration: n?.duration,
 				ease: n?.ease,
@@ -256,12 +255,12 @@ var ut = () => {
 				x: t.x - s,
 				y: t.y - c
 			}, u = n.snapGrid ?? i;
-			return ge(l, r, n.snapToGrid ?? a, u);
+			return pointToRendererPoint(l, r, n.snapToGrid ?? a, u);
 		},
 		flowToScreenPosition: (t) => {
 			let { transform: n, domNode: r } = e.getState();
 			if (!r) return t;
-			let { x: i, y: a } = r.getBoundingClientRect(), o = _e(t, n);
+			let { x: i, y: a } = r.getBoundingClientRect(), o = rendererPointToPoint(t, n);
 			return {
 				x: o.x + i,
 				y: o.y + a
@@ -269,7 +268,7 @@ var ut = () => {
 		}
 	}), []);
 };
-function dt(e, t) {
+function applyChanges(e, t) {
 	let n = [], r = /* @__PURE__ */ new Map(), i = [];
 	for (let t of e) if (t.type === "add") {
 		i.push(t);
@@ -291,14 +290,14 @@ function dt(e, t) {
 			continue;
 		}
 		let i = { ...e };
-		for (let e of t) ft(e, i);
+		for (let e of t) applyChange(e, i);
 		n.push(i);
 	}
 	return i.length && i.forEach((e) => {
 		e.index === void 0 ? n.push({ ...e.item }) : n.splice(e.index, 0, { ...e.item });
 	}), n;
 }
-function ft(e, t) {
+function applyChange(e, t) {
 	switch (e.type) {
 		case "select":
 			t.selected = e.selected;
@@ -311,28 +310,28 @@ function ft(e, t) {
 			break;
 	}
 }
-function pt(e, t) {
-	return dt(e, t);
+function applyNodeChanges(e, t) {
+	return applyChanges(e, t);
 }
-function mt(e, t) {
-	return dt(e, t);
+function applyEdgeChanges(e, t) {
+	return applyChanges(e, t);
 }
-function ht(e, t) {
+function createSelectionChange(e, t) {
 	return {
 		id: e,
 		type: "select",
 		selected: t
 	};
 }
-function gt(e, t = /* @__PURE__ */ new Set(), n = !1) {
+function getSelectionChanges(e, t = /* @__PURE__ */ new Set(), n = !1) {
 	let r = [];
 	for (let [i, a] of e) {
 		let e = t.has(i);
-		!(a.selected === void 0 && !e) && a.selected !== e && (n && (a.selected = e), r.push(ht(a.id, e)));
+		!(a.selected === void 0 && !e) && a.selected !== e && (n && (a.selected = e), r.push(createSelectionChange(a.id, e)));
 	}
 	return r;
 }
-function _t({ items: e = [], lookup: t }) {
+function getElementsDiffChanges({ items: e = [], lookup: t }) {
 	let n = [], r = new Map(e.map((e) => [e.id, e]));
 	for (let [r, i] of e.entries()) {
 		let e = t.get(i.id), a = e?.internals?.userNode ?? e;
@@ -352,24 +351,24 @@ function _t({ items: e = [], lookup: t }) {
 	});
 	return n;
 }
-function vt(e) {
+function elementToRemoveChange(e) {
 	return {
 		id: e.id,
 		type: "remove"
 	};
 }
-var yt = (e) => le(e), bt = (e) => ie(e);
-function xt(e) {
-	return we(e);
+var isNode = (e) => isNodeBase(e), isEdge = (e) => isEdgeBase(e);
+function fixedForwardRef(e) {
+	return forwardRef(e);
 }
-function St(e) {
-	let [t, n] = J(BigInt(0)), [r] = J(() => Ct(() => n((e) => e + BigInt(1))));
-	return Ze(() => {
+function useQueue(e) {
+	let [t, n] = useState(BigInt(0)), [r] = useState(() => createQueue(() => n((e) => e + BigInt(1))));
+	return useIsomorphicLayoutEffect(() => {
 		let t = r.get();
 		t.length && (e(t), r.reset());
 	}, [t]), r;
 }
-function Ct(e) {
+function createQueue(e) {
 	let t = [];
 	return {
 		get: () => t,
@@ -381,12 +380,12 @@ function Ct(e) {
 		}
 	};
 }
-var wt = Ce(null);
-function Tt({ children: e }) {
-	let t = $(), n = St(W((e) => {
+var BatchContext = createContext(null);
+function BatchProvider({ children: e }) {
+	let t = useStoreApi(), n = useQueue(useCallback((e) => {
 		let { nodes: n = [], setNodes: r, hasDefaultNodes: i, onNodesChange: a, nodeLookup: o, fitViewQueued: s, onNodesChangeMiddlewareMap: c } = t.getState(), l = n;
 		for (let t of e) l = typeof t == "function" ? t(l) : t;
-		let u = _t({
+		let u = getElementsDiffChanges({
 			items: l,
 			lookup: o
 		});
@@ -395,37 +394,37 @@ function Tt({ children: e }) {
 			let { fitViewQueued: e, nodes: n, setNodes: r } = t.getState();
 			e && r(n);
 		});
-	}, [])), r = St(W((e) => {
+	}, [])), r = useQueue(useCallback((e) => {
 		let { edges: n = [], setEdges: r, hasDefaultEdges: i, onEdgesChange: a, edgeLookup: o } = t.getState(), s = n;
 		for (let t of e) s = typeof t == "function" ? t(s) : t;
-		i ? r(s) : a && a(_t({
+		i ? r(s) : a && a(getElementsDiffChanges({
 			items: s,
 			lookup: o
 		}));
-	}, [])), i = K(() => ({
+	}, [])), i = useMemo(() => ({
 		nodeQueue: n,
 		edgeQueue: r
 	}), []);
-	return Y(wt.Provider, {
+	return jsx(BatchContext.Provider, {
 		value: i,
 		children: e
 	});
 }
-function Et() {
-	let e = Te(wt);
+function useBatchContext() {
+	let e = useContext(BatchContext);
 	if (!e) throw Error("useBatchContext must be used within a BatchProvider");
 	return e;
 }
-var Dt = (e) => !!e.panZoom;
-function Ot() {
-	let e = ut(), t = $(), n = Et(), r = Q(Dt), i = K(() => {
+var selector$k = (e) => !!e.panZoom;
+function useReactFlow() {
+	let e = useViewportHelper(), t = useStoreApi(), n = useBatchContext(), r = useStore(selector$k), i = useMemo(() => {
 		let e = (e) => t.getState().nodeLookup.get(e), r = (e) => {
 			n.nodeQueue.push(e);
 		}, i = (e) => {
 			n.edgeQueue.push(e);
 		}, a = (e) => {
-			let { nodeLookup: n, nodeOrigin: r } = t.getState(), i = yt(e) ? e : n.get(e.id), a = i.parentId ? S(i.position, i.measured, i.parentId, n, r) : i.position;
-			return me({
+			let { nodeLookup: n, nodeOrigin: r } = t.getState(), i = isNode(e) ? e : n.get(e.id), a = i.parentId ? evaluateAbsolutePosition(i.position, i.measured, i.parentId, n, r) : i.position;
+			return nodeToRect({
 				...i,
 				position: a,
 				width: i.measured?.width ?? i.width,
@@ -435,7 +434,7 @@ function Ot() {
 			r((r) => r.map((r) => {
 				if (r.id === e) {
 					let e = typeof t == "function" ? t(r) : t;
-					return n.replace && yt(e) ? e : {
+					return n.replace && isNode(e) ? e : {
 						...r,
 						...e
 					};
@@ -446,7 +445,7 @@ function Ot() {
 			i((r) => r.map((r) => {
 				if (r.id === e) {
 					let e = typeof t == "function" ? t(r) : t;
-					return n.replace && bt(e) ? e : {
+					return n.replace && isEdge(e) ? e : {
 						...r,
 						...e
 					};
@@ -486,7 +485,7 @@ function Ot() {
 				};
 			},
 			deleteElements: async ({ nodes: e = [], edges: n = [] }) => {
-				let { nodes: r, edges: i, onNodesDelete: a, onEdgesDelete: o, triggerNodeChanges: s, triggerEdgeChanges: c, onDelete: l, onBeforeDelete: u } = t.getState(), { nodes: d, edges: f } = await A({
+				let { nodes: r, edges: i, onNodesDelete: a, onEdgesDelete: o, triggerNodeChanges: s, triggerEdgeChanges: c, onDelete: l, onBeforeDelete: u } = t.getState(), { nodes: d, edges: f } = await getElementsToRemove({
 					nodesToRemove: e,
 					edgesToRemove: n,
 					nodes: r,
@@ -494,11 +493,11 @@ function Ot() {
 					onBeforeDelete: u
 				}), p = f.length > 0, m = d.length > 0;
 				if (p) {
-					let e = f.map(vt);
+					let e = f.map(elementToRemoveChange);
 					o?.(f), c(e);
 				}
 				if (m) {
-					let e = d.map(vt);
+					let e = d.map(elementToRemoveChange);
 					a?.(d), s(e);
 				}
 				return (m || p) && l?.({
@@ -510,18 +509,18 @@ function Ot() {
 				};
 			},
 			getIntersectingNodes: (e, n = !0, r) => {
-				let i = de(e), o = i ? e : a(e), s = r !== void 0;
+				let i = isRectObject(e), o = i ? e : a(e), s = r !== void 0;
 				return o ? (r || t.getState().nodes).filter((r) => {
 					let a = t.getState().nodeLookup.get(r.id);
 					if (a && !i && (r.id === e.id || !a.internals.positionAbsolute)) return !1;
-					let c = me(s ? r : a), l = z(c, o);
+					let c = nodeToRect(s ? r : a), l = getOverlappingArea(c, o);
 					return n && l > 0 || l >= c.width * c.height || l >= o.width * o.height;
 				}) : [];
 			},
 			isNodeIntersecting: (e, t, n = !0) => {
-				let r = de(e) ? e : a(e);
+				let r = isRectObject(e) ? e : a(e);
 				if (!r) return !1;
-				let i = z(r, t);
+				let i = getOverlappingArea(r, t);
 				return n && i > 0 || i >= t.width * t.height || i >= r.width * r.height;
 			},
 			updateNode: o,
@@ -558,7 +557,7 @@ function Ot() {
 			},
 			getNodesBounds: (e) => {
 				let { nodeLookup: n, nodeOrigin: r } = t.getState();
-				return L(e, {
+				return getNodesBounds(e, {
 					nodeLookup: n,
 					nodeOrigin: r
 				});
@@ -566,7 +565,7 @@ function Ot() {
 			getHandleConnections: ({ type: e, id: n, nodeId: r }) => Array.from(t.getState().connectionLookup.get(`${r}-${e}${n ? `-${n}` : ""}`)?.values() ?? []),
 			getNodeConnections: ({ type: e, handleId: n, nodeId: r }) => Array.from(t.getState().connectionLookup.get(`${r}${e ? n ? `-${e}-${n}` : `-${e}` : ""}`)?.values() ?? []),
 			fitView: async (e) => {
-				let r = t.getState().fitViewResolver ?? Se();
+				let r = t.getState().fitViewResolver ?? withResolvers();
 				return t.setState({
 					fitViewQueued: !0,
 					fitViewOptions: e,
@@ -575,34 +574,34 @@ function Ot() {
 			}
 		};
 	}, []);
-	return K(() => ({
+	return useMemo(() => ({
 		...i,
 		...e,
 		viewportInitialized: r
 	}), [r]);
 }
-var kt = (e) => e.selected, At = typeof window < "u" ? window : void 0;
-function jt({ deleteKeyCode: e, multiSelectionKeyCode: t }) {
-	let n = $(), { deleteElements: r } = Ot(), i = st(e, { actInsideInputWithModifier: !1 }), a = st(t, { target: At });
-	G(() => {
+var selected = (e) => e.selected, win$1 = typeof window < "u" ? window : void 0;
+function useGlobalKeyHandler({ deleteKeyCode: e, multiSelectionKeyCode: t }) {
+	let n = useStoreApi(), { deleteElements: r } = useReactFlow(), i = useKeyPress(e, { actInsideInputWithModifier: !1 }), a = useKeyPress(t, { target: win$1 });
+	useEffect(() => {
 		if (i) {
 			let { edges: e, nodes: t } = n.getState();
 			r({
-				nodes: t.filter(kt),
-				edges: e.filter(kt)
+				nodes: t.filter(selected),
+				edges: e.filter(selected)
 			}), n.setState({ nodesSelectionActive: !1 });
 		}
-	}, [i]), G(() => {
+	}, [i]), useEffect(() => {
 		n.setState({ multiSelectionActive: a });
 	}, [a]);
 }
-function Mt(e) {
-	let t = $();
-	G(() => {
+function useResizeHandler(e) {
+	let t = useStoreApi();
+	useEffect(() => {
 		let n = () => {
 			if (!e.current || !(e.current.checkVisibility?.() ?? !0)) return !1;
-			let n = O(e.current);
-			(n.height === 0 || n.width === 0) && t.getState().onError?.("004", x.error004()), t.setState({
+			let n = getDimensions(e.current);
+			(n.height === 0 || n.width === 0) && t.getState().onError?.("004", errorMessages.error004()), t.setState({
 				width: n.width || 500,
 				height: n.height || 500
 			});
@@ -616,30 +615,30 @@ function Mt(e) {
 		}
 	}, []);
 }
-var Nt = {
+var containerStyle = {
 	position: "absolute",
 	width: "100%",
 	height: "100%",
 	top: 0,
 	left: 0
-}, Pt = (e) => ({
+}, selector$j = (e) => ({
 	userSelectionActive: e.userSelectionActive,
 	lib: e.lib,
 	connectionInProgress: e.connection.inProgress
 });
-function Ft({ onPaneContextMenu: e, zoomOnScroll: t = !0, zoomOnPinch: n = !0, panOnScroll: r = !1, panOnScrollSpeed: a = .5, panOnScrollMode: o = i.Free, zoomOnDoubleClick: s = !0, panOnDrag: c = !0, defaultViewport: l, translateExtent: u, minZoom: f, maxZoom: p, zoomActivationKeyCode: m, preventScrolling: h = !0, children: g, noWheelClassName: _, noPanClassName: v, onViewportChange: y, isControlledViewport: b, paneClickDistance: x, selectionOnDrag: S }) {
-	let C = $(), w = q(null), { userSelectionActive: T, lib: E, connectionInProgress: D } = Q(Pt, Z), O = st(m), k = q();
-	Mt(w);
-	let A = W((e) => {
+function ZoomPane({ onPaneContextMenu: e, zoomOnScroll: t = !0, zoomOnPinch: n = !0, panOnScroll: r = !1, panOnScrollSpeed: a = .5, panOnScrollMode: o = PanOnScrollMode.Free, zoomOnDoubleClick: s = !0, panOnDrag: c = !0, defaultViewport: l, translateExtent: u, minZoom: f, maxZoom: p, zoomActivationKeyCode: m, preventScrolling: h = !0, children: g, noWheelClassName: _, noPanClassName: v, onViewportChange: y, isControlledViewport: b, paneClickDistance: x, selectionOnDrag: S }) {
+	let C = useStoreApi(), w = useRef(null), { userSelectionActive: T, lib: E, connectionInProgress: D } = useStore(selector$j, shallow), O = useKeyPress(m), k = useRef();
+	useResizeHandler(w);
+	let A = useCallback((e) => {
 		y?.({
 			x: e[0],
 			y: e[1],
 			zoom: e[2]
 		}), b || C.setState({ transform: e });
 	}, [y, b]);
-	return G(() => {
+	return useEffect(() => {
 		if (w.current) {
-			k.current = d({
+			k.current = XYPanZoom({
 				domNode: w.current,
 				minZoom: f,
 				maxZoom: p,
@@ -672,7 +671,7 @@ function Ft({ onPaneContextMenu: e, zoomOnScroll: t = !0, zoomOnPinch: n = !0, p
 				k.current?.destroy();
 			};
 		}
-	}, []), G(() => {
+	}, []), useEffect(() => {
 		k.current?.update({
 			onPaneContextMenu: e,
 			zoomOnScroll: t,
@@ -712,20 +711,20 @@ function Ft({ onPaneContextMenu: e, zoomOnScroll: t = !0, zoomOnPinch: n = !0, p
 		D,
 		S,
 		x
-	]), Y("div", {
+	]), jsx("div", {
 		className: "react-flow__renderer",
 		ref: w,
-		style: Nt,
+		style: containerStyle,
 		children: g
 	});
 }
-var It = (e) => ({
+var selector$i = (e) => ({
 	userSelectionActive: e.userSelectionActive,
 	userSelectionRect: e.userSelectionRect
 });
-function Lt() {
-	let { userSelectionActive: e, userSelectionRect: t } = Q(It, Z);
-	return e && t ? Y("div", {
+function UserSelection() {
+	let { userSelectionActive: e, userSelectionRect: t } = useStore(selector$i, shallow);
+	return e && t ? jsx("div", {
 		className: "react-flow__selection react-flow__container",
 		style: {
 			width: t.width,
@@ -734,16 +733,16 @@ function Lt() {
 		}
 	}) : null;
 }
-var Rt = (e, t) => (n) => {
+var wrapHandler = (e, t) => (n) => {
 	n.target === t.current && e?.(n);
-}, zt = (e) => ({
+}, selector$h = (e) => ({
 	userSelectionActive: e.userSelectionActive,
 	elementsSelectable: e.elementsSelectable,
 	connectionInProgress: e.connection.inProgress,
 	dragging: e.paneDragging
 });
-function Bt({ isSelecting: t, selectionKeyPressed: n, selectionMode: r = s.Full, panOnDrag: i, paneClickDistance: a, selectionOnDrag: o, onSelectionStart: c, onSelectionEnd: l, onPaneClick: u, onPaneContextMenu: d, onPaneScroll: f, onPaneMouseEnter: p, onPaneMouseMove: m, onPaneMouseLeave: g, children: _ }) {
-	let v = $(), { userSelectionActive: y, elementsSelectable: b, dragging: x, connectionInProgress: S } = Q(zt, Z), C = b && (t || y), w = q(null), T = q(), E = q(/* @__PURE__ */ new Set()), D = q(/* @__PURE__ */ new Set()), O = q(!1), k = (e) => {
+function Pane({ isSelecting: t, selectionKeyPressed: n, selectionMode: r = SelectionMode.Full, panOnDrag: i, paneClickDistance: a, selectionOnDrag: o, onSelectionStart: c, onSelectionEnd: l, onPaneClick: u, onPaneContextMenu: d, onPaneScroll: f, onPaneMouseEnter: p, onPaneMouseMove: m, onPaneMouseLeave: g, children: _ }) {
+	let v = useStoreApi(), { userSelectionActive: y, elementsSelectable: b, dragging: x, connectionInProgress: S } = useStore(selector$h, shallow), C = b && (t || y), w = useRef(null), T = useRef(), E = useRef(/* @__PURE__ */ new Set()), D = useRef(/* @__PURE__ */ new Set()), O = useRef(!1), k = (e) => {
 		if (O.current || S) {
 			O.current = !1;
 			return;
@@ -756,20 +755,20 @@ function Bt({ isSelecting: t, selectionKeyPressed: n, selectionMode: r = s.Full,
 		}
 		d?.(e);
 	}, j = f ? (e) => f(e) : void 0;
-	return X("div", {
-		className: e(["react-flow__pane", {
+	return jsxs("div", {
+		className: cc(["react-flow__pane", {
 			draggable: i === !0 || Array.isArray(i) && i.includes(0),
 			dragging: x,
 			selection: t
 		}]),
-		onClick: C ? void 0 : Rt(k, w),
-		onContextMenu: Rt(A, w),
-		onWheel: Rt(j, w),
+		onClick: C ? void 0 : wrapHandler(k, w),
+		onContextMenu: wrapHandler(A, w),
+		onWheel: wrapHandler(j, w),
 		onPointerEnter: C ? void 0 : p,
 		onPointerMove: C ? (e) => {
 			let { userSelectionRect: t, transform: i, nodeLookup: o, edgeLookup: l, connectionLookup: u, triggerNodeChanges: d, triggerEdgeChanges: f, defaultEdgeOptions: p, resetSelectedElements: m } = v.getState();
 			if (!T.current || !t) return;
-			let { x: g, y: _ } = M(e.nativeEvent, T.current), { startX: y, startY: b } = t;
+			let { x: g, y: _ } = getEventPosition(e.nativeEvent, T.current), { startX: y, startY: b } = t;
 			if (!O.current) {
 				let t = n ? 0 : a;
 				if (Math.hypot(g - y, _ - b) <= t) return;
@@ -784,7 +783,7 @@ function Bt({ isSelecting: t, selectionKeyPressed: n, selectionMode: r = s.Full,
 				width: Math.abs(g - y),
 				height: Math.abs(_ - b)
 			}, S = E.current, C = D.current;
-			E.current = new Set(R(o, x, i, r === s.Partial, !0).map((e) => e.id)), D.current = /* @__PURE__ */ new Set();
+			E.current = new Set(getNodesInside(o, x, i, r === SelectionMode.Partial, !0).map((e) => e.id)), D.current = /* @__PURE__ */ new Set();
 			let w = p?.selectable ?? !0;
 			for (let e of E.current) {
 				let t = u.get(e);
@@ -793,7 +792,7 @@ function Bt({ isSelecting: t, selectionKeyPressed: n, selectionMode: r = s.Full,
 					t && (t.selectable ?? w) && D.current.add(e);
 				}
 			}
-			h(S, E.current) || d(gt(o, E.current, !0)), h(C, D.current) || f(gt(l, D.current)), v.setState({
+			areSetsEqual(S, E.current) || d(getSelectionChanges(o, E.current, !0)), areSetsEqual(C, D.current) || f(getSelectionChanges(l, D.current)), v.setState({
 				userSelectionRect: x,
 				userSelectionActive: !0,
 				nodesSelectionActive: !1
@@ -811,7 +810,7 @@ function Bt({ isSelecting: t, selectionKeyPressed: n, selectionMode: r = s.Full,
 			let i = e.target === w.current;
 			if (!i && e.target.closest(".nokey") || !t || !(o && i || n) || e.button !== 0 || !e.isPrimary) return;
 			e.target?.setPointerCapture?.(e.pointerId), O.current = !1;
-			let { x: a, y: s } = M(e.nativeEvent, T.current);
+			let { x: a, y: s } = getEventPosition(e.nativeEvent, T.current);
 			v.setState({ userSelectionRect: {
 				width: 0,
 				height: 0,
@@ -826,14 +825,14 @@ function Bt({ isSelecting: t, selectionKeyPressed: n, selectionMode: r = s.Full,
 		} : void 0,
 		onPointerLeave: g,
 		ref: w,
-		style: Nt,
-		children: [_, Y(Lt, {})]
+		style: containerStyle,
+		children: [_, jsx(UserSelection, {})]
 	});
 }
-function Vt({ id: e, store: t, unselect: n = !1, nodeRef: r }) {
+function handleNodeClick({ id: e, store: t, unselect: n = !1, nodeRef: r }) {
 	let { addSelectedNodes: i, unselectNodesAndEdges: a, multiSelectionActive: o, nodeLookup: s, onError: c } = t.getState(), l = s.get(e);
 	if (!l) {
-		c?.("012", x.error012(e));
+		c?.("012", errorMessages.error012(e));
 		return;
 	}
 	t.setState({ nodesSelectionActive: !1 }), l.selected ? (n || l.selected && o) && (a({
@@ -841,13 +840,13 @@ function Vt({ id: e, store: t, unselect: n = !1, nodeRef: r }) {
 		edges: []
 	}), requestAnimationFrame(() => r?.current?.blur())) : i([e]);
 }
-function Ht({ nodeRef: e, disabled: t = !1, noDragClassName: n, handleSelector: r, nodeId: i, isSelectable: a, nodeClickDistance: o }) {
-	let s = $(), [l, u] = J(!1), d = q();
-	return G(() => {
-		d.current = c({
+function useDrag({ nodeRef: e, disabled: t = !1, noDragClassName: n, handleSelector: r, nodeId: i, isSelectable: a, nodeClickDistance: o }) {
+	let s = useStoreApi(), [l, u] = useState(!1), d = useRef();
+	return useEffect(() => {
+		d.current = XYDrag({
 			getStoreItems: () => s.getState(),
 			onNodeMouseDown: (t) => {
-				Vt({
+				handleNodeClick({
 					id: t,
 					store: s,
 					nodeRef: e
@@ -860,7 +859,7 @@ function Ht({ nodeRef: e, disabled: t = !1, noDragClassName: n, handleSelector:
 				u(!1);
 			}
 		});
-	}, []), G(() => {
+	}, []), useEffect(() => {
 		if (!(t || !e.current || !d.current)) return d.current.update({
 			noDragClassName: n,
 			handleSelector: r,
@@ -881,19 +880,19 @@ function Ht({ nodeRef: e, disabled: t = !1, noDragClassName: n, handleSelector:
 		o
 	]), l;
 }
-var Ut = (e) => (t) => t.selected && (t.draggable || e && t.draggable === void 0);
-function Wt() {
-	let e = $();
-	return W((t) => {
-		let { nodeExtent: n, snapToGrid: r, snapGrid: i, nodesDraggable: a, onError: o, updateNodePositions: s, nodeLookup: c, nodeOrigin: l } = e.getState(), u = /* @__PURE__ */ new Map(), d = Ut(a), f = r ? i[0] : 5, p = r ? i[1] : 5, m = t.direction.x * f * t.factor, h = t.direction.y * p * t.factor;
+var selectedAndDraggable = (e) => (t) => t.selected && (t.draggable || e && t.draggable === void 0);
+function useMoveSelectedNodes() {
+	let e = useStoreApi();
+	return useCallback((t) => {
+		let { nodeExtent: n, snapToGrid: r, snapGrid: i, nodesDraggable: a, onError: o, updateNodePositions: s, nodeLookup: c, nodeOrigin: l } = e.getState(), u = /* @__PURE__ */ new Map(), d = selectedAndDraggable(a), f = r ? i[0] : 5, p = r ? i[1] : 5, m = t.direction.x * f * t.factor, h = t.direction.y * p * t.factor;
 		for (let [, e] of c) {
 			if (!d(e)) continue;
 			let t = {
 				x: e.internals.positionAbsolute.x + m,
 				y: e.internals.positionAbsolute.y + h
 			};
-			r && (t = ve(t, i));
-			let { position: a, positionAbsolute: s } = g({
+			r && (t = snapPosition(t, i));
+			let { position: a, positionAbsolute: s } = calculateNodePosition({
 				nodeId: e.id,
 				nextPosition: t,
 				nodeLookup: c,
@@ -906,27 +905,27 @@ function Wt() {
 		s(u);
 	}, []);
 }
-var Gt = Ce(null), Kt = Gt.Provider;
-Gt.Consumer;
-var qt = () => Te(Gt), Jt = (e) => ({
+var NodeIdContext = createContext(null), Provider = NodeIdContext.Provider;
+NodeIdContext.Consumer;
+var useNodeId = () => useContext(NodeIdContext), selector$g = (e) => ({
 	connectOnClick: e.connectOnClick,
 	noPanClassName: e.noPanClassName,
 	rfId: e.rfId
-}), Yt = (e, t, r) => (i) => {
+}), connectingSelector = (e, t, r) => (i) => {
 	let { connectionClickStartHandle: a, connectionMode: o, connection: s } = i, { fromHandle: c, toHandle: l, isValid: u } = s, d = l?.nodeId === e && l?.id === t && l?.type === r;
 	return {
 		connectingFrom: c?.nodeId === e && c?.id === t && c?.type === r,
 		connectingTo: d,
 		clickConnecting: a?.nodeId === e && a?.id === t && a?.type === r,
-		isPossibleEndHandle: o === n.Strict ? c?.type !== r : e !== c?.nodeId || t !== c?.id,
+		isPossibleEndHandle: o === ConnectionMode.Strict ? c?.type !== r : e !== c?.nodeId || t !== c?.id,
 		connectionInProcess: !!c,
 		clickConnectionInProcess: !!a,
 		valid: d && u
 	};
 };
-function Xt({ type: t = "source", position: n = a.Top, isValidConnection: r, isConnectable: i = !0, isConnectableStart: o = !0, isConnectableEnd: s = !0, id: c, onConnect: u, children: d, className: f, onMouseDown: m, onTouchStart: h, ...g }, _) {
-	let v = c || null, y = t === "target", b = $(), S = qt(), { connectOnClick: C, noPanClassName: w, rfId: T } = Q(Jt, Z), { connectingFrom: E, connectingTo: D, clickConnecting: O, isPossibleEndHandle: k, connectionInProcess: A, clickConnectionInProcess: j, valid: M } = Q(Yt(S, v, t), Z);
-	S || b.getState().onError?.("010", x.error010());
+function HandleComponent({ type: t = "source", position: n = Position.Top, isValidConnection: r, isConnectable: i = !0, isConnectableStart: o = !0, isConnectableEnd: s = !0, id: c, onConnect: u, children: d, className: f, onMouseDown: m, onTouchStart: h, ...g }, _) {
+	let v = c || null, y = t === "target", b = useStoreApi(), S = useNodeId(), { connectOnClick: C, noPanClassName: w, rfId: T } = useStore(selector$g, shallow), { connectingFrom: E, connectingTo: D, clickConnecting: O, isPossibleEndHandle: k, connectionInProcess: A, clickConnectionInProcess: j, valid: M } = useStore(connectingSelector(S, v, t), shallow);
+	S || b.getState().onError?.("010", errorMessages.error010());
 	let N = (e) => {
 		let { defaultEdgeOptions: t, onConnect: n, hasDefaultEdges: r } = b.getState(), i = {
 			...t,
@@ -934,15 +933,15 @@ function Xt({ type: t = "source", position: n = a.Top, isValidConnection: r, isC
 		};
 		if (r) {
 			let { edges: e, setEdges: t } = b.getState();
-			t(p(i, e));
+			t(addEdge(i, e));
 		}
 		n?.(i), u?.(i);
-	}, F = (e) => {
+	}, P = (e) => {
 		if (!S) return;
-		let t = ce(e.nativeEvent);
+		let t = isMouseEvent(e.nativeEvent);
 		if (o && (t && e.button === 0 || !t)) {
 			let t = b.getState();
-			l.onPointerDown(e.nativeEvent, {
+			XYHandle.onPointerDown(e.nativeEvent, {
 				handleDomNode: e.currentTarget,
 				autoPanOnConnect: t.autoPanOnConnect,
 				connectionMode: t.connectionMode,
@@ -968,13 +967,47 @@ function Xt({ type: t = "source", position: n = a.Top, isValidConnection: r, isC
 			});
 		}
 		t ? m?.(e) : h?.(e);
+	}, F = (e) => {
+		let { onClickConnectStart: n, onClickConnectEnd: i, connectionClickStartHandle: a, connectionMode: s, isValidConnection: c, lib: u, rfId: d, nodeLookup: f, connection: p } = b.getState();
+		if (!S || !a && !o) return;
+		if (!a) {
+			n?.(e.nativeEvent, {
+				nodeId: S,
+				handleId: v,
+				handleType: t
+			}), b.setState({ connectionClickStartHandle: {
+				nodeId: S,
+				type: t,
+				id: v
+			} });
+			return;
+		}
+		let m = getHostForElement(e.target), h = r || c, { connection: g, isValid: _ } = XYHandle.isValid(e.nativeEvent, {
+			handle: {
+				nodeId: S,
+				id: v,
+				type: t
+			},
+			connectionMode: s,
+			fromNodeId: a.nodeId,
+			fromHandleId: a.id || null,
+			fromType: a.type,
+			isValidConnection: h,
+			flowId: d,
+			doc: m,
+			lib: u,
+			nodeLookup: f
+		});
+		_ && g && N(g);
+		let y = structuredClone(p);
+		delete y.inProgress, y.toPosition = y.toHandle ? y.toHandle.position : null, i?.(e, y), b.setState({ connectionClickStartHandle: null });
 	};
-	return Y("div", {
+	return jsx("div", {
 		"data-handleid": v,
 		"data-nodeid": S,
 		"data-handlepos": n,
 		"data-id": `${T}-${S}-${v}-${t}`,
-		className: e([
+		className: cc([
 			"react-flow__handle",
 			`react-flow__handle-${n}`,
 			"nodrag",
@@ -993,82 +1026,48 @@ function Xt({ type: t = "source", position: n = a.Top, isValidConnection: r, isC
 				connectionindicator: i && (!A || k) && (A || j ? s : o)
 			}
 		]),
-		onMouseDown: F,
-		onTouchStart: F,
-		onClick: C ? (e) => {
-			let { onClickConnectStart: n, onClickConnectEnd: i, connectionClickStartHandle: a, connectionMode: s, isValidConnection: c, lib: u, rfId: d, nodeLookup: f, connection: p } = b.getState();
-			if (!S || !a && !o) return;
-			if (!a) {
-				n?.(e.nativeEvent, {
-					nodeId: S,
-					handleId: v,
-					handleType: t
-				}), b.setState({ connectionClickStartHandle: {
-					nodeId: S,
-					type: t,
-					id: v
-				} });
-				return;
-			}
-			let m = P(e.target), h = r || c, { connection: g, isValid: _ } = l.isValid(e.nativeEvent, {
-				handle: {
-					nodeId: S,
-					id: v,
-					type: t
-				},
-				connectionMode: s,
-				fromNodeId: a.nodeId,
-				fromHandleId: a.id || null,
-				fromType: a.type,
-				isValidConnection: h,
-				flowId: d,
-				doc: m,
-				lib: u,
-				nodeLookup: f
-			});
-			_ && g && N(g);
-			let y = structuredClone(p);
-			delete y.inProgress, y.toPosition = y.toHandle ? y.toHandle.position : null, i?.(e, y), b.setState({ connectionClickStartHandle: null });
-		} : void 0,
+		onMouseDown: P,
+		onTouchStart: P,
+		onClick: C ? F : void 0,
 		ref: _,
 		...g,
 		children: d
 	});
 }
-var Zt = U(xt(Xt));
-function Qt({ data: e, isConnectable: t, sourcePosition: n = a.Bottom }) {
-	return X(De, { children: [e?.label, Y(Zt, {
+var Handle = memo(fixedForwardRef(HandleComponent));
+function InputNode({ data: e, isConnectable: t, sourcePosition: n = Position.Bottom }) {
+	return jsxs(Fragment$1, { children: [e?.label, jsx(Handle, {
 		type: "source",
 		position: n,
 		isConnectable: t
 	})] });
 }
-function $t({ data: e, isConnectable: t, targetPosition: n = a.Top, sourcePosition: r = a.Bottom }) {
-	return X(De, { children: [
-		Y(Zt, {
+function DefaultNode({ data: e, isConnectable: t, targetPosition: n = Position.Top, sourcePosition: r = Position.Bottom }) {
+	return jsxs(Fragment$1, { children: [
+		jsx(Handle, {
 			type: "target",
 			position: n,
 			isConnectable: t
 		}),
 		e?.label,
-		Y(Zt, {
+		jsx(Handle, {
 			type: "source",
 			position: r,
 			isConnectable: t
 		})
 	] });
 }
-function en() {
+function GroupNode() {
 	return null;
 }
-function tn({ data: e, isConnectable: t, targetPosition: n = a.Top }) {
-	return X(De, { children: [Y(Zt, {
+function OutputNode({ data: e, isConnectable: t, targetPosition: n = Position.Top }) {
+	return jsxs(Fragment$1, { children: [jsx(Handle, {
 		type: "target",
 		position: n,
 		isConnectable: t
 	}), e?.label] });
 }
-var nn = {
+var arrowKeyDiffs = {
 	ArrowUp: {
 		x: 0,
 		y: -1
@@ -1085,13 +1084,13 @@ var nn = {
 		x: 1,
 		y: 0
 	}
-}, rn = {
-	input: Qt,
-	default: $t,
-	output: tn,
-	group: en
+}, builtinNodeTypes = {
+	input: InputNode,
+	default: DefaultNode,
+	output: OutputNode,
+	group: GroupNode
 };
-function an(e) {
+function getNodeInlineStyleDimensions(e) {
 	return e.internals.handleBounds === void 0 ? {
 		width: e.width ?? e.initialWidth ?? e.style?.width,
 		height: e.height ?? e.initialHeight ?? e.style?.height
@@ -1100,43 +1099,43 @@ function an(e) {
 		height: e.height ?? e.style?.height
 	};
 }
-var on = (e) => {
-	let { width: t, height: n, x: r, y: i } = F(e.nodeLookup, { filter: (e) => !!e.selected });
+var selector$f = (e) => {
+	let { width: t, height: n, x: r, y: i } = getInternalNodesBounds(e.nodeLookup, { filter: (e) => !!e.selected });
 	return {
-		width: ue(t) ? t : null,
-		height: ue(n) ? n : null,
+		width: isNumeric(t) ? t : null,
+		height: isNumeric(n) ? n : null,
 		userSelectionActive: e.userSelectionActive,
 		transformString: `translate(${e.transform[0]}px,${e.transform[1]}px) scale(${e.transform[2]}) translate(${r}px,${i}px)`
 	};
 };
-function sn({ onSelectionContextMenu: t, noPanClassName: n, disableKeyboardA11y: r }) {
-	let i = $(), { width: a, height: o, transformString: s, userSelectionActive: c } = Q(on, Z), l = Wt(), u = q(null);
-	G(() => {
+function NodesSelection({ onSelectionContextMenu: t, noPanClassName: n, disableKeyboardA11y: r }) {
+	let i = useStoreApi(), { width: a, height: o, transformString: s, userSelectionActive: c } = useStore(selector$f, shallow), l = useMoveSelectedNodes(), u = useRef(null);
+	useEffect(() => {
 		r || u.current?.focus({ preventScroll: !0 });
 	}, [r]);
 	let d = !c && a !== null && o !== null;
-	if (Ht({
+	if (useDrag({
 		nodeRef: u,
 		disabled: !d
 	}), !d) return null;
 	let f = t ? (e) => {
 		t(e, i.getState().nodes.filter((e) => e.selected));
 	} : void 0;
-	return Y("div", {
-		className: e([
+	return jsx("div", {
+		className: cc([
 			"react-flow__nodesselection",
 			"react-flow__container",
 			n
 		]),
 		style: { transform: s },
-		children: Y("div", {
+		children: jsx("div", {
 			ref: u,
 			className: "react-flow__nodesselection-rect",
 			onContextMenu: f,
 			tabIndex: r ? void 0 : -1,
 			onKeyDown: r ? void 0 : (e) => {
-				Object.prototype.hasOwnProperty.call(nn, e.key) && (e.preventDefault(), l({
-					direction: nn[e.key],
+				Object.prototype.hasOwnProperty.call(arrowKeyDiffs, e.key) && (e.preventDefault(), l({
+					direction: arrowKeyDiffs[e.key],
 					factor: e.shiftKey ? 4 : 1
 				}));
 			},
@@ -1147,25 +1146,25 @@ function sn({ onSelectionContextMenu: t, noPanClassName: n, disableKeyboardA11y:
 		})
 	});
 }
-var cn = typeof window < "u" ? window : void 0, ln = (e) => ({
+var win = typeof window < "u" ? window : void 0, selector$e = (e) => ({
 	nodesSelectionActive: e.nodesSelectionActive,
 	userSelectionActive: e.userSelectionActive
 });
-function un({ children: e, onPaneClick: t, onPaneMouseEnter: n, onPaneMouseMove: r, onPaneMouseLeave: i, onPaneContextMenu: a, onPaneScroll: o, paneClickDistance: s, deleteKeyCode: c, selectionKeyCode: l, selectionOnDrag: u, selectionMode: d, onSelectionStart: f, onSelectionEnd: p, multiSelectionKeyCode: m, panActivationKeyCode: h, zoomActivationKeyCode: g, elementsSelectable: _, zoomOnScroll: v, zoomOnPinch: y, panOnScroll: b, panOnScrollSpeed: x, panOnScrollMode: S, zoomOnDoubleClick: C, panOnDrag: w, defaultViewport: T, translateExtent: E, minZoom: D, maxZoom: O, preventScrolling: k, onSelectionContextMenu: A, noWheelClassName: j, noPanClassName: M, disableKeyboardA11y: N, onViewportChange: P, isControlledViewport: F }) {
-	let { nodesSelectionActive: ee, userSelectionActive: I } = Q(ln, Z), L = st(l, { target: cn }), R = st(h, { target: cn }), z = R || w, B = R || b, V = u && z !== !0, H = L || I || V;
-	return jt({
+function FlowRendererComponent({ children: e, onPaneClick: t, onPaneMouseEnter: n, onPaneMouseMove: r, onPaneMouseLeave: i, onPaneContextMenu: a, onPaneScroll: o, paneClickDistance: s, deleteKeyCode: c, selectionKeyCode: l, selectionOnDrag: u, selectionMode: d, onSelectionStart: f, onSelectionEnd: p, multiSelectionKeyCode: m, panActivationKeyCode: h, zoomActivationKeyCode: g, elementsSelectable: _, zoomOnScroll: v, zoomOnPinch: y, panOnScroll: b, panOnScrollSpeed: x, panOnScrollMode: S, zoomOnDoubleClick: C, panOnDrag: w, defaultViewport: T, translateExtent: E, minZoom: D, maxZoom: O, preventScrolling: k, onSelectionContextMenu: A, noWheelClassName: j, noPanClassName: M, disableKeyboardA11y: N, onViewportChange: P, isControlledViewport: F }) {
+	let { nodesSelectionActive: I, userSelectionActive: L } = useStore(selector$e, shallow), R = useKeyPress(l, { target: win }), z = useKeyPress(h, { target: win }), B = z || w, V = z || b, H = u && B !== !0, U = R || L || H;
+	return useGlobalKeyHandler({
 		deleteKeyCode: c,
 		multiSelectionKeyCode: m
-	}), Y(Ft, {
+	}), jsx(ZoomPane, {
 		onPaneContextMenu: a,
 		elementsSelectable: _,
 		zoomOnScroll: v,
 		zoomOnPinch: y,
-		panOnScroll: B,
+		panOnScroll: V,
 		panOnScrollSpeed: x,
 		panOnScrollMode: S,
 		zoomOnDoubleClick: C,
-		panOnDrag: !L && z,
+		panOnDrag: !R && B,
 		defaultViewport: T,
 		translateExtent: E,
 		minZoom: D,
@@ -1177,8 +1176,8 @@ function un({ children: e, onPaneClick: t, onPaneMouseEnter: n, onPaneMouseMove:
 		onViewportChange: P,
 		isControlledViewport: F,
 		paneClickDistance: s,
-		selectionOnDrag: V,
-		children: X(Bt, {
+		selectionOnDrag: H,
+		children: jsxs(Pane, {
 			onSelectionStart: f,
 			onSelectionEnd: p,
 			onPaneClick: t,
@@ -1187,13 +1186,13 @@ function un({ children: e, onPaneClick: t, onPaneMouseEnter: n, onPaneMouseMove:
 			onPaneMouseLeave: i,
 			onPaneContextMenu: a,
 			onPaneScroll: o,
-			panOnDrag: z,
-			isSelecting: !!H,
+			panOnDrag: B,
+			isSelecting: !!U,
 			selectionMode: d,
-			selectionKeyPressed: L,
+			selectionKeyPressed: R,
 			paneClickDistance: s,
-			selectionOnDrag: V,
-			children: [e, ee && Y(sn, {
+			selectionOnDrag: H,
+			children: [e, I && jsx(NodesSelection, {
 				onSelectionContextMenu: A,
 				noPanClassName: M,
 				disableKeyboardA11y: N
@@ -1201,19 +1200,19 @@ function un({ children: e, onPaneClick: t, onPaneMouseEnter: n, onPaneMouseMove:
 		})
 	});
 }
-un.displayName = "FlowRenderer";
-var dn = U(un), fn = (e) => (t) => e ? R(t.nodeLookup, {
+FlowRendererComponent.displayName = "FlowRenderer";
+var FlowRenderer = memo(FlowRendererComponent), selector$d = (e) => (t) => e ? getNodesInside(t.nodeLookup, {
 	x: 0,
 	y: 0,
 	width: t.width,
 	height: t.height
 }, t.transform, !0).map((e) => e.id) : Array.from(t.nodeLookup.keys());
-function pn(e) {
-	return Q(W(fn(e), [e]), Z);
+function useVisibleNodeIds(e) {
+	return useStore(useCallback(selector$d(e), [e]), shallow);
 }
-var mn = (e) => e.updateNodeInternals;
-function hn() {
-	let e = Q(mn), [t] = J(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((t) => {
+var selector$c = (e) => e.updateNodeInternals;
+function useResizeObserver() {
+	let e = useStore(selector$c), [t] = useState(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((t) => {
 		let n = /* @__PURE__ */ new Map();
 		t.forEach((e) => {
 			let t = e.target.getAttribute("data-id");
@@ -1224,17 +1223,17 @@ function hn() {
 			});
 		}), e(n);
 	}));
-	return G(() => () => {
+	return useEffect(() => () => {
 		t?.disconnect();
 	}, [t]), t;
 }
-function gn({ node: e, nodeType: t, hasDimensions: n, resizeObserver: r }) {
-	let i = $(), a = q(null), o = q(null), s = q(e.sourcePosition), c = q(e.targetPosition), l = q(t), u = n && !!e.internals.handleBounds;
-	return G(() => {
+function useNodeObserver({ node: e, nodeType: t, hasDimensions: n, resizeObserver: r }) {
+	let i = useStoreApi(), a = useRef(null), o = useRef(null), s = useRef(e.sourcePosition), c = useRef(e.targetPosition), l = useRef(t), u = n && !!e.internals.handleBounds;
+	return useEffect(() => {
 		a.current && !e.hidden && (!u || o.current !== a.current) && (o.current && r?.unobserve(o.current), r?.observe(a.current), o.current = a.current);
-	}, [u, e.hidden]), G(() => () => {
+	}, [u, e.hidden]), useEffect(() => () => {
 		o.current &&= (r?.unobserve(o.current), null);
-	}, []), G(() => {
+	}, []), useEffect(() => {
 		if (a.current) {
 			let n = l.current !== t, r = s.current !== e.sourcePosition, o = c.current !== e.targetPosition;
 			(n || r || o) && (l.current = t, s.current = e.sourcePosition, c.current = e.targetPosition, i.getState().updateNodeInternals(new Map([[e.id, {
@@ -1250,22 +1249,22 @@ function gn({ node: e, nodeType: t, hasDimensions: n, resizeObserver: r }) {
 		e.targetPosition
 	]), a;
 }
-function _n({ id: t, onClick: n, onMouseEnter: r, onMouseMove: i, onMouseLeave: a, onContextMenu: o, onDoubleClick: s, nodesDraggable: c, elementsSelectable: l, nodesConnectable: u, nodesFocusable: d, resizeObserver: f, noDragClassName: p, noPanClassName: m, disableKeyboardA11y: h, rfId: g, nodeTypes: _, nodeClickDistance: v, onError: y }) {
-	let { node: S, internals: C, isParent: w } = Q((e) => {
+function NodeWrapper({ id: t, onClick: n, onMouseEnter: r, onMouseMove: i, onMouseLeave: a, onContextMenu: o, onDoubleClick: s, nodesDraggable: c, elementsSelectable: l, nodesConnectable: u, nodesFocusable: d, resizeObserver: f, noDragClassName: p, noPanClassName: m, disableKeyboardA11y: h, rfId: g, nodeTypes: _, nodeClickDistance: v, onError: y }) {
+	let { node: S, internals: C, isParent: w } = useStore((e) => {
 		let n = e.nodeLookup.get(t), r = e.parentLookup.has(t);
 		return {
 			node: n,
 			internals: n.internals,
 			isParent: r
 		};
-	}, Z), T = S.type || "default", E = _?.[T] || rn[T];
-	E === void 0 && (y?.("003", x.error003(T)), T = "default", E = _?.default || rn.default);
-	let D = !!(S.draggable || c && S.draggable === void 0), O = !!(S.selectable || l && S.selectable === void 0), k = !!(S.connectable || u && S.connectable === void 0), A = !!(S.focusable || d && S.focusable === void 0), j = $(), M = pe(S), N = gn({
+	}, shallow), T = S.type || "default", E = _?.[T] || builtinNodeTypes[T];
+	E === void 0 && (y?.("003", errorMessages.error003(T)), T = "default", E = _?.default || builtinNodeTypes.default);
+	let D = !!(S.draggable || c && S.draggable === void 0), O = !!(S.selectable || l && S.selectable === void 0), k = !!(S.connectable || u && S.connectable === void 0), A = !!(S.focusable || d && S.focusable === void 0), j = useStoreApi(), M = nodeHasDimensions(S), N = useNodeObserver({
 		node: S,
 		nodeType: T,
 		hasDimensions: M,
 		resizeObserver: f
-	}), P = Ht({
+	}), P = useDrag({
 		nodeRef: N,
 		disabled: S.hidden || !D,
 		noDragClassName: p,
@@ -1273,24 +1272,24 @@ function _n({ id: t, onClick: n, onMouseEnter: r, onMouseMove: i, onMouseLeave:
 		nodeId: t,
 		isSelectable: O,
 		nodeClickDistance: v
-	}), F = Wt();
+	}), F = useMoveSelectedNodes();
 	if (S.hidden) return null;
-	let ee = I(S), L = an(S), z = O || D || n || r || i || a, B = r ? (e) => r(e, { ...C.userNode }) : void 0, V = i ? (e) => i(e, { ...C.userNode }) : void 0, H = a ? (e) => a(e, { ...C.userNode }) : void 0, te = o ? (e) => o(e, { ...C.userNode }) : void 0, ne = s ? (e) => s(e, { ...C.userNode }) : void 0, re = (e) => {
+	let I = getNodeDimensions(S), L = getNodeInlineStyleDimensions(S), R = O || D || n || r || i || a, B = r ? (e) => r(e, { ...C.userNode }) : void 0, H = i ? (e) => i(e, { ...C.userNode }) : void 0, U = a ? (e) => a(e, { ...C.userNode }) : void 0, W = o ? (e) => o(e, { ...C.userNode }) : void 0, G = s ? (e) => s(e, { ...C.userNode }) : void 0, K = (e) => {
 		let { selectNodesOnDrag: r, nodeDragThreshold: i } = j.getState();
-		O && (!r || !D || i > 0) && Vt({
+		O && (!r || !D || i > 0) && handleNodeClick({
 			id: t,
 			store: j,
 			nodeRef: N
 		}), n && n(e, { ...C.userNode });
-	}, ie = (e) => {
-		if (!(oe(e.nativeEvent) || h)) {
-			if (b.includes(e.key) && O) Vt({
+	}, q = (e) => {
+		if (!(isInputDOMNode(e.nativeEvent) || h)) {
+			if (elementSelectionKeys.includes(e.key) && O) handleNodeClick({
 				id: t,
 				store: j,
 				unselect: e.key === "Escape",
 				nodeRef: N
 			});
-			else if (D && S.selected && Object.prototype.hasOwnProperty.call(nn, e.key)) {
+			else if (D && S.selected && Object.prototype.hasOwnProperty.call(arrowKeyDiffs, e.key)) {
 				e.preventDefault();
 				let { ariaLabelConfig: t } = j.getState();
 				j.setState({ ariaLiveMessage: t["node.a11yDescription.ariaLiveMessage"]({
@@ -1298,23 +1297,23 @@ function _n({ id: t, onClick: n, onMouseEnter: r, onMouseMove: i, onMouseLeave:
 					x: ~~C.positionAbsolute.x,
 					y: ~~C.positionAbsolute.y
 				}) }), F({
-					direction: nn[e.key],
+					direction: arrowKeyDiffs[e.key],
 					factor: e.shiftKey ? 4 : 1
 				});
 			}
 		}
-	}, ae = () => {
+	}, J = () => {
 		if (h || !N.current?.matches(":focus-visible")) return;
 		let { transform: e, width: n, height: r, autoPanOnNodeFocus: i, setCenter: a } = j.getState();
-		i && (R(new Map([[t, S]]), {
+		i && (getNodesInside(new Map([[t, S]]), {
 			x: 0,
 			y: 0,
 			width: n,
 			height: r
-		}, e, !0).length > 0 || a(S.position.x + ee.width / 2, S.position.y + ee.height / 2, { zoom: e[2] }));
+		}, e, !0).length > 0 || a(S.position.x + I.width / 2, S.position.y + I.height / 2, { zoom: e[2] }));
 	};
-	return Y("div", {
-		className: e([
+	return jsx("div", {
+		className: cc([
 			"react-flow__node",
 			`react-flow__node-${T}`,
 			{ [m]: D },
@@ -1331,7 +1330,7 @@ function _n({ id: t, onClick: n, onMouseEnter: r, onMouseMove: i, onMouseLeave:
 		style: {
 			zIndex: C.z,
 			transform: `translate(${C.positionAbsolute.x}px,${C.positionAbsolute.y}px)`,
-			pointerEvents: z ? "all" : "none",
+			pointerEvents: R ? "all" : "none",
 			visibility: M ? "visible" : "hidden",
 			...S.style,
 			...L
@@ -1339,22 +1338,22 @@ function _n({ id: t, onClick: n, onMouseEnter: r, onMouseMove: i, onMouseLeave:
 		"data-id": t,
 		"data-testid": `rf__node-${t}`,
 		onMouseEnter: B,
-		onMouseMove: V,
-		onMouseLeave: H,
-		onContextMenu: te,
-		onClick: re,
-		onDoubleClick: ne,
-		onKeyDown: A ? ie : void 0,
+		onMouseMove: H,
+		onMouseLeave: U,
+		onContextMenu: W,
+		onClick: K,
+		onDoubleClick: G,
+		onKeyDown: A ? q : void 0,
 		tabIndex: A ? 0 : void 0,
-		onFocus: A ? ae : void 0,
+		onFocus: A ? J : void 0,
 		role: S.ariaRole ?? (A ? "group" : void 0),
 		"aria-roledescription": "node",
-		"aria-describedby": h ? void 0 : `${Ie}-${g}`,
+		"aria-describedby": h ? void 0 : `${ARIA_NODE_DESC_KEY}-${g}`,
 		"aria-label": S.ariaLabel,
 		...S.domAttributes,
-		children: Y(Kt, {
+		children: jsx(Provider, {
 			value: t,
-			children: Y(E, {
+			children: jsx(E, {
 				id: t,
 				data: S.data,
 				type: T,
@@ -1371,24 +1370,24 @@ function _n({ id: t, onClick: n, onMouseEnter: r, onMouseMove: i, onMouseLeave:
 				dragHandle: S.dragHandle,
 				zIndex: C.z,
 				parentId: S.parentId,
-				...ee
+				...I
 			})
 		})
 	});
 }
-var vn = U(_n), yn = (e) => ({
+var NodeWrapper$1 = memo(NodeWrapper), selector$b = (e) => ({
 	nodesDraggable: e.nodesDraggable,
 	nodesConnectable: e.nodesConnectable,
 	nodesFocusable: e.nodesFocusable,
 	elementsSelectable: e.elementsSelectable,
 	onError: e.onError
 });
-function bn(e) {
-	let { nodesDraggable: t, nodesConnectable: n, nodesFocusable: r, elementsSelectable: i, onError: a } = Q(yn, Z), o = pn(e.onlyRenderVisibleElements), s = hn();
-	return Y("div", {
+function NodeRendererComponent(e) {
+	let { nodesDraggable: t, nodesConnectable: n, nodesFocusable: r, elementsSelectable: i, onError: a } = useStore(selector$b, shallow), o = useVisibleNodeIds(e.onlyRenderVisibleElements), s = useResizeObserver();
+	return jsx("div", {
 		className: "react-flow__nodes",
-		style: Nt,
-		children: o.map((o) => Y(vn, {
+		style: containerStyle,
+		children: o.map((o) => jsx(NodeWrapper$1, {
 			id: o,
 			nodeTypes: e.nodeTypes,
 			nodeExtent: e.nodeExtent,
@@ -1412,15 +1411,15 @@ function bn(e) {
 		}, o))
 	});
 }
-bn.displayName = "NodeRenderer";
-var xn = U(bn);
-function Sn(e) {
-	return Q(W((t) => {
+NodeRendererComponent.displayName = "NodeRenderer";
+var NodeRenderer = memo(NodeRendererComponent);
+function useVisibleEdgeIds(e) {
+	return useStore(useCallback((t) => {
 		if (!e) return t.edges.map((e) => e.id);
 		let n = [];
 		if (t.width && t.height) for (let e of t.edges) {
 			let r = t.nodeLookup.get(e.source), i = t.nodeLookup.get(e.target);
-			r && i && ae({
+			r && i && isEdgeVisible({
 				sourceNode: r,
 				targetNode: i,
 				width: t.width,
@@ -1429,9 +1428,9 @@ function Sn(e) {
 			}) && n.push(e.id);
 		}
 		return n;
-	}, [e]), Z);
+	}, [e]), shallow);
 }
-var Cn = ({ color: e = "none", strokeWidth: t = 1 }) => Y("polyline", {
+var ArrowSymbol = ({ color: e = "none", strokeWidth: t = 1 }) => jsx("polyline", {
 	className: "arrow",
 	style: {
 		strokeWidth: t,
@@ -1441,7 +1440,7 @@ var Cn = ({ color: e = "none", strokeWidth: t = 1 }) => Y("polyline", {
 	fill: "none",
 	strokeLinejoin: "round",
 	points: "-5,-4 0,0 -5,4"
-}), wn = ({ color: e = "none", strokeWidth: t = 1 }) => Y("polyline", {
+}), ArrowClosedSymbol = ({ color: e = "none", strokeWidth: t = 1 }) => jsx("polyline", {
 	className: "arrowclosed",
 	style: {
 		strokeWidth: t,
@@ -1453,17 +1452,17 @@ var Cn = ({ color: e = "none", strokeWidth: t = 1 }) => Y("polyline", {
 	strokeLinecap: "round",
 	strokeLinejoin: "round",
 	points: "-5,-4 0,0 -5,4 -5,-4"
-}), Tn = {
-	[r.Arrow]: Cn,
-	[r.ArrowClosed]: wn
+}), MarkerSymbols = {
+	[MarkerType.Arrow]: ArrowSymbol,
+	[MarkerType.ArrowClosed]: ArrowClosedSymbol
 };
-function En(e) {
-	let t = $();
-	return K(() => Object.prototype.hasOwnProperty.call(Tn, e) ? Tn[e] : (t.getState().onError?.("009", x.error009(e)), null), [e]);
+function useMarkerSymbol(e) {
+	let t = useStoreApi();
+	return useMemo(() => Object.prototype.hasOwnProperty.call(MarkerSymbols, e) ? MarkerSymbols[e] : (t.getState().onError?.("009", errorMessages.error009(e)), null), [e]);
 }
-var Dn = ({ id: e, type: t, color: n, width: r = 12.5, height: i = 12.5, markerUnits: a = "strokeWidth", strokeWidth: o, orient: s = "auto-start-reverse" }) => {
-	let c = En(t);
-	return c ? Y("marker", {
+var Marker = ({ id: e, type: t, color: n, width: r = 12.5, height: i = 12.5, markerUnits: a = "strokeWidth", strokeWidth: o, orient: s = "auto-start-reverse" }) => {
+	let c = useMarkerSymbol(t);
+	return c ? jsx("marker", {
 		className: "react-flow__arrowhead",
 		id: e,
 		markerWidth: `${r}`,
@@ -1473,13 +1472,13 @@ var Dn = ({ id: e, type: t, color: n, width: r = 12.5, height: i = 12.5, markerU
 		orient: s,
 		refX: "0",
 		refY: "0",
-		children: Y(c, {
+		children: jsx(c, {
 			color: n,
 			strokeWidth: o
 		})
 	}) : null;
-}, On = ({ defaultColor: e, rfId: t }) => {
-	let n = Q((e) => e.edges), r = Q((e) => e.defaultEdgeOptions), i = K(() => _(n, {
+}, MarkerDefinitions = ({ defaultColor: e, rfId: t }) => {
+	let n = useStore((e) => e.edges), r = useStore((e) => e.defaultEdgeOptions), i = useMemo(() => createMarkerIds(n, {
 		id: t,
 		defaultColor: e,
 		defaultMarkerStart: r?.markerStart,
@@ -1490,10 +1489,10 @@ var Dn = ({ id: e, type: t, color: n, width: r = 12.5, height: i = 12.5, markerU
 		t,
 		e
 	]);
-	return i.length ? Y("svg", {
+	return i.length ? jsx("svg", {
 		className: "react-flow__marker",
 		"aria-hidden": "true",
-		children: Y("defs", { children: i.map((e) => Y(Dn, {
+		children: jsx("defs", { children: i.map((e) => jsx(Marker, {
 			id: e.id,
 			type: e.type,
 			color: e.color,
@@ -1505,16 +1504,16 @@ var Dn = ({ id: e, type: t, color: n, width: r = 12.5, height: i = 12.5, markerU
 		}, e.id)) })
 	}) : null;
 };
-On.displayName = "MarkerDefinitions";
-var kn = U(On);
-function An({ x: t, y: n, label: r, labelStyle: i, labelShowBg: a = !0, labelBgStyle: o, labelBgPadding: s = [2, 4], labelBgBorderRadius: c = 2, children: l, className: u, ...d }) {
-	let [f, p] = J({
+MarkerDefinitions.displayName = "MarkerDefinitions";
+var MarkerDefinitions$1 = memo(MarkerDefinitions);
+function EdgeTextComponent({ x: t, y: n, label: r, labelStyle: i, labelShowBg: a = !0, labelBgStyle: o, labelBgPadding: s = [2, 4], labelBgBorderRadius: c = 2, children: l, className: u, ...d }) {
+	let [f, p] = useState({
 		x: 1,
 		y: 0,
 		width: 0,
 		height: 0
-	}), m = e(["react-flow__edge-textwrapper", u]), h = q(null);
-	return G(() => {
+	}), m = cc(["react-flow__edge-textwrapper", u]), h = useRef(null);
+	return useEffect(() => {
 		if (h.current) {
 			let e = h.current.getBBox();
 			p({
@@ -1524,13 +1523,13 @@ function An({ x: t, y: n, label: r, labelStyle: i, labelShowBg: a = !0, labelBgS
 				height: e.height
 			});
 		}
-	}, [r]), r ? X("g", {
+	}, [r]), r ? jsxs("g", {
 		transform: `translate(${t - f.width / 2} ${n - f.height / 2})`,
 		className: m,
 		visibility: f.width ? "visible" : "hidden",
 		...d,
 		children: [
-			a && Y("rect", {
+			a && jsx("rect", {
 				width: f.width + 2 * s[0],
 				x: -s[0],
 				y: -s[1],
@@ -1540,7 +1539,7 @@ function An({ x: t, y: n, label: r, labelStyle: i, labelShowBg: a = !0, labelBgS
 				rx: c,
 				ry: c
 			}),
-			Y("text", {
+			jsx("text", {
 				className: "react-flow__edge-text",
 				y: f.height / 2,
 				dy: "0.3em",
@@ -1552,24 +1551,24 @@ function An({ x: t, y: n, label: r, labelStyle: i, labelShowBg: a = !0, labelBgS
 		]
 	}) : null;
 }
-An.displayName = "EdgeText";
-var jn = U(An);
-function Mn({ path: t, labelX: n, labelY: r, label: i, labelStyle: a, labelShowBg: o, labelBgStyle: s, labelBgPadding: c, labelBgBorderRadius: l, interactionWidth: u = 20, ...d }) {
-	return X(De, { children: [
-		Y("path", {
+EdgeTextComponent.displayName = "EdgeText";
+var EdgeText = memo(EdgeTextComponent);
+function BaseEdge({ path: t, labelX: n, labelY: r, label: i, labelStyle: a, labelShowBg: o, labelBgStyle: s, labelBgPadding: c, labelBgBorderRadius: l, interactionWidth: u = 20, ...d }) {
+	return jsxs(Fragment$1, { children: [
+		jsx("path", {
 			...d,
 			d: t,
 			fill: "none",
-			className: e(["react-flow__edge-path", d.className])
+			className: cc(["react-flow__edge-path", d.className])
 		}),
-		u ? Y("path", {
+		u ? jsx("path", {
 			d: t,
 			fill: "none",
 			strokeOpacity: 0,
 			strokeWidth: u,
 			className: "react-flow__edge-interaction"
 		}) : null,
-		i && ue(n) && ue(r) ? Y(jn, {
+		i && isNumeric(n) && isNumeric(r) ? jsx(EdgeText, {
 			x: n,
 			y: r,
 			label: i,
@@ -1581,23 +1580,23 @@ function Mn({ path: t, labelX: n, labelY: r, label: i, labelStyle: a, labelShowB
 		}) : null
 	] });
 }
-function Nn({ pos: e, x1: t, y1: n, x2: r, y2: i }) {
-	return e === a.Left || e === a.Right ? [.5 * (t + r), n] : [t, .5 * (n + i)];
+function getControl({ pos: e, x1: t, y1: n, x2: r, y2: i }) {
+	return e === Position.Left || e === Position.Right ? [.5 * (t + r), n] : [t, .5 * (n + i)];
 }
-function Pn({ sourceX: e, sourceY: t, sourcePosition: n = a.Bottom, targetX: r, targetY: i, targetPosition: o = a.Top }) {
-	let [s, c] = Nn({
+function getSimpleBezierPath({ sourceX: e, sourceY: t, sourcePosition: n = Position.Bottom, targetX: r, targetY: i, targetPosition: o = Position.Top }) {
+	let [s, c] = getControl({
 		pos: n,
 		x1: e,
 		y1: t,
 		x2: r,
 		y2: i
-	}), [l, u] = Nn({
+	}), [l, u] = getControl({
 		pos: o,
 		x1: r,
 		y1: i,
 		x2: e,
 		y2: t
-	}), [d, f, p, m] = w({
+	}), [d, f, p, m] = getBezierEdgeCenter({
 		sourceX: e,
 		sourceY: t,
 		targetX: r,
@@ -1615,9 +1614,9 @@ function Pn({ sourceX: e, sourceY: t, sourcePosition: n = a.Bottom, targetX: r,
 		m
 	];
 }
-function Fn(e) {
-	return U(({ id: t, sourceX: n, sourceY: r, targetX: i, targetY: a, sourcePosition: o, targetPosition: s, label: c, labelStyle: l, labelShowBg: u, labelBgStyle: d, labelBgPadding: f, labelBgBorderRadius: p, style: m, markerEnd: h, markerStart: g, interactionWidth: _ }) => {
-		let [v, y, b] = Pn({
+function createSimpleBezierEdge(e) {
+	return memo(({ id: t, sourceX: n, sourceY: r, targetX: i, targetY: a, sourcePosition: o, targetPosition: s, label: c, labelStyle: l, labelShowBg: u, labelBgStyle: d, labelBgPadding: f, labelBgBorderRadius: p, style: m, markerEnd: h, markerStart: g, interactionWidth: _ }) => {
+		let [v, y, b] = getSimpleBezierPath({
 			sourceX: n,
 			sourceY: r,
 			sourcePosition: o,
@@ -1625,7 +1624,7 @@ function Fn(e) {
 			targetY: a,
 			targetPosition: s
 		});
-		return Y(Mn, {
+		return jsx(BaseEdge, {
 			id: e.isInternal ? void 0 : t,
 			path: v,
 			labelX: y,
@@ -1643,11 +1642,11 @@ function Fn(e) {
 		});
 	});
 }
-var In = Fn({ isInternal: !1 }), Ln = Fn({ isInternal: !0 });
-In.displayName = "SimpleBezierEdge", Ln.displayName = "SimpleBezierEdgeInternal";
-function Rn(e) {
-	return U(({ id: t, sourceX: n, sourceY: r, targetX: i, targetY: o, label: s, labelStyle: c, labelShowBg: l, labelBgStyle: u, labelBgPadding: d, labelBgBorderRadius: f, style: p, sourcePosition: m = a.Bottom, targetPosition: h = a.Top, markerEnd: g, markerStart: _, pathOptions: v, interactionWidth: y }) => {
-		let [b, x, S] = B({
+var SimpleBezierEdge = createSimpleBezierEdge({ isInternal: !1 }), SimpleBezierEdgeInternal = createSimpleBezierEdge({ isInternal: !0 });
+SimpleBezierEdge.displayName = "SimpleBezierEdge", SimpleBezierEdgeInternal.displayName = "SimpleBezierEdgeInternal";
+function createSmoothStepEdge(e) {
+	return memo(({ id: t, sourceX: n, sourceY: r, targetX: i, targetY: o, label: s, labelStyle: c, labelShowBg: l, labelBgStyle: u, labelBgPadding: d, labelBgBorderRadius: f, style: p, sourcePosition: m = Position.Bottom, targetPosition: h = Position.Top, markerEnd: g, markerStart: _, pathOptions: v, interactionWidth: y }) => {
+		let [b, x, S] = getSmoothStepPath({
 			sourceX: n,
 			sourceY: r,
 			sourcePosition: m,
@@ -1658,7 +1657,7 @@ function Rn(e) {
 			offset: v?.offset,
 			stepPosition: v?.stepPosition
 		});
-		return Y(Mn, {
+		return jsx(BaseEdge, {
 			id: e.isInternal ? void 0 : t,
 			path: b,
 			labelX: x,
@@ -1676,32 +1675,32 @@ function Rn(e) {
 		});
 	});
 }
-var zn = Rn({ isInternal: !1 }), Bn = Rn({ isInternal: !0 });
-zn.displayName = "SmoothStepEdge", Bn.displayName = "SmoothStepEdgeInternal";
-function Vn(e) {
-	return U(({ id: t, ...n }) => {
+var SmoothStepEdge = createSmoothStepEdge({ isInternal: !1 }), SmoothStepEdgeInternal = createSmoothStepEdge({ isInternal: !0 });
+SmoothStepEdge.displayName = "SmoothStepEdge", SmoothStepEdgeInternal.displayName = "SmoothStepEdgeInternal";
+function createStepEdge(e) {
+	return memo(({ id: t, ...n }) => {
 		let r = e.isInternal ? void 0 : t;
-		return Y(zn, {
+		return jsx(SmoothStepEdge, {
 			...n,
 			id: r,
-			pathOptions: K(() => ({
+			pathOptions: useMemo(() => ({
 				borderRadius: 0,
 				offset: n.pathOptions?.offset
 			}), [n.pathOptions?.offset])
 		});
 	});
 }
-var Hn = Vn({ isInternal: !1 }), Un = Vn({ isInternal: !0 });
-Hn.displayName = "StepEdge", Un.displayName = "StepEdgeInternal";
-function Wn(e) {
-	return U(({ id: t, sourceX: n, sourceY: r, targetX: i, targetY: a, label: o, labelStyle: s, labelShowBg: c, labelBgStyle: l, labelBgPadding: u, labelBgBorderRadius: d, style: f, markerEnd: p, markerStart: m, interactionWidth: h }) => {
-		let [g, _, v] = V({
+var StepEdge = createStepEdge({ isInternal: !1 }), StepEdgeInternal = createStepEdge({ isInternal: !0 });
+StepEdge.displayName = "StepEdge", StepEdgeInternal.displayName = "StepEdgeInternal";
+function createStraightEdge(e) {
+	return memo(({ id: t, sourceX: n, sourceY: r, targetX: i, targetY: a, label: o, labelStyle: s, labelShowBg: c, labelBgStyle: l, labelBgPadding: u, labelBgBorderRadius: d, style: f, markerEnd: p, markerStart: m, interactionWidth: h }) => {
+		let [g, _, v] = getStraightPath({
 			sourceX: n,
 			sourceY: r,
 			targetX: i,
 			targetY: a
 		});
-		return Y(Mn, {
+		return jsx(BaseEdge, {
 			id: e.isInternal ? void 0 : t,
 			path: g,
 			labelX: _,
@@ -1719,11 +1718,11 @@ function Wn(e) {
 		});
 	});
 }
-var Gn = Wn({ isInternal: !1 }), Kn = Wn({ isInternal: !0 });
-Gn.displayName = "StraightEdge", Kn.displayName = "StraightEdgeInternal";
-function qn(e) {
-	return U(({ id: t, sourceX: n, sourceY: r, targetX: i, targetY: o, sourcePosition: s = a.Bottom, targetPosition: c = a.Top, label: l, labelStyle: u, labelShowBg: d, labelBgStyle: f, labelBgPadding: p, labelBgBorderRadius: m, style: h, markerEnd: g, markerStart: _, pathOptions: v, interactionWidth: y }) => {
-		let [b, x, S] = T({
+var StraightEdge = createStraightEdge({ isInternal: !1 }), StraightEdgeInternal = createStraightEdge({ isInternal: !0 });
+StraightEdge.displayName = "StraightEdge", StraightEdgeInternal.displayName = "StraightEdgeInternal";
+function createBezierEdge(e) {
+	return memo(({ id: t, sourceX: n, sourceY: r, targetX: i, targetY: o, sourcePosition: s = Position.Bottom, targetPosition: c = Position.Top, label: l, labelStyle: u, labelShowBg: d, labelBgStyle: f, labelBgPadding: p, labelBgBorderRadius: m, style: h, markerEnd: g, markerStart: _, pathOptions: v, interactionWidth: y }) => {
+		let [b, x, S] = getBezierPath({
 			sourceX: n,
 			sourceY: r,
 			sourcePosition: s,
@@ -1732,7 +1731,7 @@ function qn(e) {
 			targetPosition: c,
 			curvature: v?.curvature
 		});
-		return Y(Mn, {
+		return jsx(BaseEdge, {
 			id: e.isInternal ? void 0 : t,
 			path: b,
 			labelX: x,
@@ -1750,40 +1749,40 @@ function qn(e) {
 		});
 	});
 }
-var Jn = qn({ isInternal: !1 }), Yn = qn({ isInternal: !0 });
-Jn.displayName = "BezierEdge", Yn.displayName = "BezierEdgeInternal";
-var Xn = {
-	default: Yn,
-	straight: Kn,
-	step: Un,
-	smoothstep: Bn,
-	simplebezier: Ln
-}, Zn = {
+var BezierEdge = createBezierEdge({ isInternal: !1 }), BezierEdgeInternal = createBezierEdge({ isInternal: !0 });
+BezierEdge.displayName = "BezierEdge", BezierEdgeInternal.displayName = "BezierEdgeInternal";
+var builtinEdgeTypes = {
+	default: BezierEdgeInternal,
+	straight: StraightEdgeInternal,
+	step: StepEdgeInternal,
+	smoothstep: SmoothStepEdgeInternal,
+	simplebezier: SimpleBezierEdgeInternal
+}, nullPosition = {
 	sourceX: null,
 	sourceY: null,
 	targetX: null,
 	targetY: null,
 	sourcePosition: null,
 	targetPosition: null
-}, Qn = (e, t, n) => n === a.Left ? e - t : n === a.Right ? e + t : e, $n = (e, t, n) => n === a.Top ? e - t : n === a.Bottom ? e + t : e, er = "react-flow__edgeupdater";
-function tr({ position: t, centerX: n, centerY: r, radius: i = 10, onMouseDown: a, onMouseEnter: o, onMouseOut: s, type: c }) {
-	return Y("circle", {
+}, shiftX = (e, t, n) => n === Position.Left ? e - t : n === Position.Right ? e + t : e, shiftY = (e, t, n) => n === Position.Top ? e - t : n === Position.Bottom ? e + t : e, EdgeUpdaterClassName = "react-flow__edgeupdater";
+function EdgeAnchor({ position: t, centerX: n, centerY: r, radius: i = 10, onMouseDown: a, onMouseEnter: o, onMouseOut: s, type: c }) {
+	return jsx("circle", {
 		onMouseDown: a,
 		onMouseEnter: o,
 		onMouseOut: s,
-		className: e([er, `${er}-${c}`]),
-		cx: Qn(n, i, t),
-		cy: $n(r, i, t),
+		className: cc([EdgeUpdaterClassName, `${EdgeUpdaterClassName}-${c}`]),
+		cx: shiftX(n, i, t),
+		cy: shiftY(r, i, t),
 		r: i,
 		stroke: "transparent",
 		fill: "transparent"
 	});
 }
-function nr({ isReconnectable: e, reconnectRadius: t, edge: n, sourceX: r, sourceY: i, targetX: a, targetY: o, sourcePosition: s, targetPosition: c, onReconnect: u, onReconnectStart: d, onReconnectEnd: f, setReconnecting: p, setUpdateHover: m }) {
-	let h = $(), g = (e, t) => {
+function EdgeUpdateAnchors({ isReconnectable: e, reconnectRadius: t, edge: n, sourceX: r, sourceY: i, targetX: a, targetY: o, sourcePosition: s, targetPosition: c, onReconnect: u, onReconnectStart: d, onReconnectEnd: f, setReconnecting: p, setUpdateHover: m }) {
+	let h = useStoreApi(), g = (e, t) => {
 		if (e.button !== 0) return;
 		let { autoPanOnConnect: r, domNode: i, connectionMode: a, connectionRadius: o, lib: s, onConnectStart: c, cancelConnection: m, nodeLookup: g, rfId: _, panBy: v, updateConnection: y } = h.getState(), b = t.type === "target";
-		l.onPointerDown(e.nativeEvent, {
+		XYHandle.onPointerDown(e.nativeEvent, {
 			autoPanOnConnect: r,
 			connectionMode: a,
 			connectionRadius: o,
@@ -1821,7 +1820,7 @@ function nr({ isReconnectable: e, reconnectRadius: t, edge: n, sourceX: r, sourc
 		id: n.sourceHandle ?? null,
 		type: "source"
 	}), y = () => m(!0), b = () => m(!1);
-	return X(De, { children: [(e === !0 || e === "source") && Y(tr, {
+	return jsxs(Fragment$1, { children: [(e === !0 || e === "source") && jsx(EdgeAnchor, {
 		position: s,
 		centerX: r,
 		centerY: i,
@@ -1830,7 +1829,7 @@ function nr({ isReconnectable: e, reconnectRadius: t, edge: n, sourceX: r, sourc
 		onMouseEnter: y,
 		onMouseOut: b,
 		type: "source"
-	}), (e === !0 || e === "target") && Y(tr, {
+	}), (e === !0 || e === "target") && jsx(EdgeAnchor, {
 		position: c,
 		centerX: a,
 		centerY: o,
@@ -1841,21 +1840,21 @@ function nr({ isReconnectable: e, reconnectRadius: t, edge: n, sourceX: r, sourc
 		type: "target"
 	})] });
 }
-function rr({ id: t, edgesFocusable: n, edgesReconnectable: r, elementsSelectable: i, onClick: a, onDoubleClick: o, onContextMenu: s, onMouseEnter: c, onMouseMove: l, onMouseLeave: u, reconnectRadius: d, onReconnect: f, onReconnectStart: p, onReconnectEnd: m, rfId: h, edgeTypes: g, noPanClassName: _, onError: v, disableKeyboardA11y: y }) {
-	let S = Q((e) => e.edgeLookup.get(t)), C = Q((e) => e.defaultEdgeOptions);
+function EdgeWrapper({ id: t, edgesFocusable: n, edgesReconnectable: r, elementsSelectable: i, onClick: a, onDoubleClick: o, onContextMenu: s, onMouseEnter: c, onMouseMove: l, onMouseLeave: u, reconnectRadius: d, onReconnect: f, onReconnectStart: p, onReconnectEnd: m, rfId: h, edgeTypes: g, noPanClassName: _, onError: v, disableKeyboardA11y: y }) {
+	let S = useStore((e) => e.edgeLookup.get(t)), C = useStore((e) => e.defaultEdgeOptions);
 	S = C ? {
 		...C,
 		...S
 	} : S;
-	let w = S.type || "default", T = g?.[w] || Xn[w];
-	T === void 0 && (v?.("011", x.error011(w)), w = "default", T = g?.default || Xn.default);
-	let E = !!(S.focusable || n && S.focusable === void 0), D = f !== void 0 && (S.reconnectable || r && S.reconnectable === void 0), O = !!(S.selectable || i && S.selectable === void 0), A = q(null), [M, N] = J(!1), [P, F] = J(!1), I = $(), { zIndex: L, sourceX: R, sourceY: z, targetX: B, targetY: V, sourcePosition: H, targetPosition: te } = Q(W((e) => {
+	let w = S.type || "default", T = g?.[w] || builtinEdgeTypes[w];
+	T === void 0 && (v?.("011", errorMessages.error011(w)), w = "default", T = g?.default || builtinEdgeTypes.default);
+	let E = !!(S.focusable || n && S.focusable === void 0), D = f !== void 0 && (S.reconnectable || r && S.reconnectable === void 0), O = !!(S.selectable || i && S.selectable === void 0), k = useRef(null), [A, M] = useState(!1), [P, F] = useState(!1), I = useStoreApi(), { zIndex: L, sourceX: z, sourceY: B, targetX: V, targetY: H, sourcePosition: U, targetPosition: W } = useStore(useCallback((e) => {
 		let n = e.nodeLookup.get(S.source), r = e.nodeLookup.get(S.target);
 		if (!n || !r) return {
 			zIndex: S.zIndex,
-			...Zn
+			...nullPosition
 		};
-		let i = k({
+		let i = getEdgePosition({
 			id: t,
 			sourceNode: n,
 			targetNode: r,
@@ -1865,7 +1864,7 @@ function rr({ id: t, edgesFocusable: n, edgesReconnectable: r, elementsSelectabl
 			onError: v
 		});
 		return {
-			zIndex: j({
+			zIndex: getElevatedEdgeZIndex({
 				selected: S.selected,
 				zIndex: S.zIndex,
 				sourceNode: n,
@@ -1873,7 +1872,7 @@ function rr({ id: t, edgesFocusable: n, edgesReconnectable: r, elementsSelectabl
 				elevateOnSelect: e.elevateEdgesOnSelect,
 				zIndexMode: e.zIndexMode
 			}),
-			...i || Zn
+			...i || nullPosition
 		};
 	}, [
 		S.source,
@@ -1882,29 +1881,29 @@ function rr({ id: t, edgesFocusable: n, edgesReconnectable: r, elementsSelectabl
 		S.targetHandle,
 		S.selected,
 		S.zIndex
-	]), Z), ne = K(() => S.markerStart ? `url('#${ee(S.markerStart, h)}')` : void 0, [S.markerStart, h]), re = K(() => S.markerEnd ? `url('#${ee(S.markerEnd, h)}')` : void 0, [S.markerEnd, h]);
-	if (S.hidden || R === null || z === null || B === null || V === null) return null;
-	let ie = (e) => {
+	]), shallow), G = useMemo(() => S.markerStart ? `url('#${getMarkerId(S.markerStart, h)}')` : void 0, [S.markerStart, h]), K = useMemo(() => S.markerEnd ? `url('#${getMarkerId(S.markerEnd, h)}')` : void 0, [S.markerEnd, h]);
+	if (S.hidden || z === null || B === null || V === null || H === null) return null;
+	let q = (e) => {
 		let { addSelectedEdges: n, unselectNodesAndEdges: r, multiSelectionActive: i } = I.getState();
 		O && (I.setState({ nodesSelectionActive: !1 }), S.selected && i ? (r({
 			nodes: [],
 			edges: [S]
-		}), A.current?.blur()) : n([t])), a && a(e, S);
-	}, ae = o ? (e) => {
+		}), k.current?.blur()) : n([t])), a && a(e, S);
+	}, J = o ? (e) => {
 		o(e, { ...S });
-	} : void 0, oe = s ? (e) => {
+	} : void 0, Y = s ? (e) => {
 		s(e, { ...S });
-	} : void 0, se = c ? (e) => {
+	} : void 0, X = c ? (e) => {
 		c(e, { ...S });
-	} : void 0, ce = l ? (e) => {
+	} : void 0, Z = l ? (e) => {
 		l(e, { ...S });
-	} : void 0, le = u ? (e) => {
+	} : void 0, Vn = u ? (e) => {
 		u(e, { ...S });
 	} : void 0;
-	return Y("svg", {
+	return jsx("svg", {
 		style: { zIndex: L },
-		children: X("g", {
-			className: e([
+		children: jsxs("g", {
+			className: cc([
 				"react-flow__edge",
 				`react-flow__edge-${w}`,
 				S.className,
@@ -1913,20 +1912,20 @@ function rr({ id: t, edgesFocusable: n, edgesReconnectable: r, elementsSelectabl
 					selected: S.selected,
 					animated: S.animated,
 					inactive: !O && !a,
-					updating: M,
+					updating: A,
 					selectable: O
 				}
 			]),
-			onClick: ie,
-			onDoubleClick: ae,
-			onContextMenu: oe,
-			onMouseEnter: se,
-			onMouseMove: ce,
-			onMouseLeave: le,
+			onClick: q,
+			onDoubleClick: J,
+			onContextMenu: Y,
+			onMouseEnter: X,
+			onMouseMove: Z,
+			onMouseLeave: Vn,
 			onKeyDown: E ? (e) => {
-				if (!y && b.includes(e.key) && O) {
+				if (!y && elementSelectionKeys.includes(e.key) && O) {
 					let { unselectNodesAndEdges: n, addSelectedEdges: r } = I.getState();
-					e.key === "Escape" ? (A.current?.blur(), n({ edges: [S] })) : r([t]);
+					e.key === "Escape" ? (k.current?.blur(), n({ edges: [S] })) : r([t]);
 				}
 			} : void 0,
 			tabIndex: E ? 0 : void 0,
@@ -1935,10 +1934,10 @@ function rr({ id: t, edgesFocusable: n, edgesReconnectable: r, elementsSelectabl
 			"data-id": t,
 			"data-testid": `rf__edge-${t}`,
 			"aria-label": S.ariaLabel === null ? void 0 : S.ariaLabel || `Edge from ${S.source} to ${S.target}`,
-			"aria-describedby": E ? `${Le}-${h}` : void 0,
-			ref: A,
+			"aria-describedby": E ? `${ARIA_EDGE_DESC_KEY}-${h}` : void 0,
+			ref: k,
 			...S.domAttributes,
-			children: [!P && Y(T, {
+			children: [!P && jsx(T, {
 				id: t,
 				source: S.source,
 				target: S.target,
@@ -1953,54 +1952,54 @@ function rr({ id: t, edgesFocusable: n, edgesReconnectable: r, elementsSelectabl
 				labelBgStyle: S.labelBgStyle,
 				labelBgPadding: S.labelBgPadding,
 				labelBgBorderRadius: S.labelBgBorderRadius,
-				sourceX: R,
-				sourceY: z,
-				targetX: B,
-				targetY: V,
-				sourcePosition: H,
-				targetPosition: te,
+				sourceX: z,
+				sourceY: B,
+				targetX: V,
+				targetY: H,
+				sourcePosition: U,
+				targetPosition: W,
 				data: S.data,
 				style: S.style,
 				sourceHandleId: S.sourceHandle,
 				targetHandleId: S.targetHandle,
-				markerStart: ne,
-				markerEnd: re,
+				markerStart: G,
+				markerEnd: K,
 				pathOptions: "pathOptions" in S ? S.pathOptions : void 0,
 				interactionWidth: S.interactionWidth
-			}), D && Y(nr, {
+			}), D && jsx(EdgeUpdateAnchors, {
 				edge: S,
 				isReconnectable: D,
 				reconnectRadius: d,
 				onReconnect: f,
 				onReconnectStart: p,
 				onReconnectEnd: m,
-				sourceX: R,
-				sourceY: z,
-				targetX: B,
-				targetY: V,
-				sourcePosition: H,
-				targetPosition: te,
-				setUpdateHover: N,
+				sourceX: z,
+				sourceY: B,
+				targetX: V,
+				targetY: H,
+				sourcePosition: U,
+				targetPosition: W,
+				setUpdateHover: M,
 				setReconnecting: F
 			})]
 		})
 	});
 }
-var ir = U(rr), ar = (e) => ({
+var EdgeWrapper$1 = memo(EdgeWrapper), selector$a = (e) => ({
 	edgesFocusable: e.edgesFocusable,
 	edgesReconnectable: e.edgesReconnectable,
 	elementsSelectable: e.elementsSelectable,
 	connectionMode: e.connectionMode,
 	onError: e.onError
 });
-function or({ defaultMarkerColor: e, onlyRenderVisibleElements: t, rfId: n, edgeTypes: r, noPanClassName: i, onReconnect: a, onEdgeContextMenu: o, onEdgeMouseEnter: s, onEdgeMouseMove: c, onEdgeMouseLeave: l, onEdgeClick: u, reconnectRadius: d, onEdgeDoubleClick: f, onReconnectStart: p, onReconnectEnd: m, disableKeyboardA11y: h }) {
-	let { edgesFocusable: g, edgesReconnectable: _, elementsSelectable: v, onError: y } = Q(ar, Z), b = Sn(t);
-	return X("div", {
+function EdgeRendererComponent({ defaultMarkerColor: e, onlyRenderVisibleElements: t, rfId: n, edgeTypes: r, noPanClassName: i, onReconnect: a, onEdgeContextMenu: o, onEdgeMouseEnter: s, onEdgeMouseMove: c, onEdgeMouseLeave: l, onEdgeClick: u, reconnectRadius: d, onEdgeDoubleClick: f, onReconnectStart: p, onReconnectEnd: m, disableKeyboardA11y: h }) {
+	let { edgesFocusable: g, edgesReconnectable: _, elementsSelectable: v, onError: y } = useStore(selector$a, shallow), b = useVisibleEdgeIds(t);
+	return jsxs("div", {
 		className: "react-flow__edges",
-		children: [Y(kn, {
+		children: [jsx(MarkerDefinitions$1, {
 			defaultColor: e,
 			rfId: n
-		}), b.map((e) => Y(ir, {
+		}), b.map((e) => jsx(EdgeWrapper$1, {
 			id: e,
 			edgesFocusable: g,
 			edgesReconnectable: _,
@@ -2023,25 +2022,25 @@ function or({ defaultMarkerColor: e, onlyRenderVisibleElements: t, rfId: n, edge
 		}, e))]
 	});
 }
-or.displayName = "EdgeRenderer";
-var sr = U(or), cr = (e) => `translate(${e.transform[0]}px,${e.transform[1]}px) scale(${e.transform[2]})`;
-function lr({ children: e }) {
-	return Y("div", {
+EdgeRendererComponent.displayName = "EdgeRenderer";
+var EdgeRenderer = memo(EdgeRendererComponent), selector$9 = (e) => `translate(${e.transform[0]}px,${e.transform[1]}px) scale(${e.transform[2]})`;
+function Viewport({ children: e }) {
+	return jsx("div", {
 		className: "react-flow__viewport xyflow__viewport react-flow__container",
-		style: { transform: Q(cr) },
+		style: { transform: useStore(selector$9) },
 		children: e
 	});
 }
-function ur(e) {
-	let t = Ot(), n = q(!1);
-	G(() => {
+function useOnInitHandler(e) {
+	let t = useReactFlow(), n = useRef(!1);
+	useEffect(() => {
 		!n.current && t.viewportInitialized && e && (setTimeout(() => e(t), 1), n.current = !0);
 	}, [e, t.viewportInitialized]);
 }
-var dr = (e) => e.panZoom?.syncViewport;
-function fr(e) {
-	let t = Q(dr), n = $();
-	return G(() => {
+var selector$8 = (e) => e.panZoom?.syncViewport;
+function useViewportSync(e) {
+	let t = useStore(selector$8), n = useStoreApi();
+	return useEffect(() => {
 		e && (t?.(e), n.setState({ transform: [
 			e.x,
 			e.y,
@@ -2049,35 +2048,35 @@ function fr(e) {
 		] }));
 	}, [e, t]), null;
 }
-function pr(e) {
+function storeSelector$1(e) {
 	return e.connection.inProgress ? {
 		...e.connection,
-		to: ge(e.connection.to, e.transform)
+		to: pointToRendererPoint(e.connection.to, e.transform)
 	} : { ...e.connection };
 }
-function mr(e) {
-	return e ? (t) => e(pr(t)) : pr;
+function getSelector(e) {
+	return e ? (t) => e(storeSelector$1(t)) : storeSelector$1;
 }
-function hr(e) {
-	return Q(mr(e), Z);
+function useConnection(e) {
+	return useStore(getSelector(e), shallow);
 }
-var gr = (e) => ({
+var selector$7 = (e) => ({
 	nodesConnectable: e.nodesConnectable,
 	isValid: e.connection.isValid,
 	inProgress: e.connection.inProgress,
 	width: e.width,
 	height: e.height
 });
-function _r({ containerStyle: t, style: n, type: r, component: i }) {
-	let { nodesConnectable: a, width: o, height: s, isValid: c, inProgress: l } = Q(gr, Z);
-	return o && a && l ? Y("svg", {
+function ConnectionLineWrapper({ containerStyle: t, style: n, type: r, component: i }) {
+	let { nodesConnectable: a, width: o, height: s, isValid: c, inProgress: l } = useStore(selector$7, shallow);
+	return o && a && l ? jsx("svg", {
 		style: t,
 		width: o,
 		height: s,
 		className: "react-flow__connectionline react-flow__container",
-		children: Y("g", {
-			className: e(["react-flow__connection", D(c)]),
-			children: Y(vr, {
+		children: jsx("g", {
+			className: cc(["react-flow__connection", getConnectionStatus(c)]),
+			children: jsx(ConnectionLine, {
 				style: n,
 				type: r,
 				CustomComponent: i,
@@ -2086,10 +2085,10 @@ function _r({ containerStyle: t, style: n, type: r, component: i }) {
 		})
 	}) : null;
 }
-var vr = ({ style: e, type: n = t.Bezier, CustomComponent: r, isValid: i }) => {
-	let { inProgress: a, from: o, fromNode: s, fromHandle: c, fromPosition: l, to: u, toNode: d, toHandle: f, toPosition: p, pointer: m } = hr();
+var ConnectionLine = ({ style: e, type: n = ConnectionLineType.Bezier, CustomComponent: r, isValid: i }) => {
+	let { inProgress: a, from: o, fromNode: s, fromHandle: c, fromPosition: l, to: u, toNode: d, toHandle: f, toPosition: p, pointer: m } = useConnection();
 	if (!a) return;
-	if (r) return Y(r, {
+	if (r) return jsx(r, {
 		connectionLineType: n,
 		connectionLineStyle: e,
 		fromNode: s,
@@ -2100,7 +2099,7 @@ var vr = ({ style: e, type: n = t.Bezier, CustomComponent: r, isValid: i }) => {
 		toY: u.y,
 		fromPosition: l,
 		toPosition: p,
-		connectionStatus: D(i),
+		connectionStatus: getConnectionStatus(i),
 		toNode: d,
 		toHandle: f,
 		pointer: m
@@ -2114,63 +2113,63 @@ var vr = ({ style: e, type: n = t.Bezier, CustomComponent: r, isValid: i }) => {
 		targetPosition: p
 	};
 	switch (n) {
-		case t.Bezier:
-			[h] = T(g);
+		case ConnectionLineType.Bezier:
+			[h] = getBezierPath(g);
 			break;
-		case t.SimpleBezier:
-			[h] = Pn(g);
+		case ConnectionLineType.SimpleBezier:
+			[h] = getSimpleBezierPath(g);
 			break;
-		case t.Step:
-			[h] = B({
+		case ConnectionLineType.Step:
+			[h] = getSmoothStepPath({
 				...g,
 				borderRadius: 0
 			});
 			break;
-		case t.SmoothStep:
-			[h] = B(g);
+		case ConnectionLineType.SmoothStep:
+			[h] = getSmoothStepPath(g);
 			break;
-		default: [h] = V(g);
+		default: [h] = getStraightPath(g);
 	}
-	return Y("path", {
+	return jsx("path", {
 		d: h,
 		fill: "none",
 		className: "react-flow__connection-path",
 		style: e
 	});
 };
-vr.displayName = "ConnectionLine";
-var yr = {};
-function br(e = yr) {
-	let t = q(e), n = $();
-	G(() => {
+ConnectionLine.displayName = "ConnectionLine";
+var emptyTypes = {};
+function useNodeOrEdgeTypesWarning(e = emptyTypes) {
+	let t = useRef(e), n = useStoreApi();
+	useEffect(() => {
 		if (process.env.NODE_ENV === "development") {
 			let r = new Set([...Object.keys(t.current), ...Object.keys(e)]);
 			for (let i of r) if (t.current[i] !== e[i]) {
-				n.getState().onError?.("002", x.error002());
+				n.getState().onError?.("002", errorMessages.error002());
 				break;
 			}
 			t.current = e;
 		}
 	}, [e]);
 }
-function xr() {
-	let e = $(), t = q(!1);
-	G(() => {
+function useStylesLoadedWarning() {
+	let e = useStoreApi(), t = useRef(!1);
+	useEffect(() => {
 		if (process.env.NODE_ENV === "development" && !t.current) {
 			let n = document.querySelector(".react-flow__pane");
-			n && window.getComputedStyle(n).zIndex !== "1" && e.getState().onError?.("013", x.error013("react")), t.current = !0;
+			n && window.getComputedStyle(n).zIndex !== "1" && e.getState().onError?.("013", errorMessages.error013("react")), t.current = !0;
 		}
 	}, []);
 }
-function Sr({ nodeTypes: e, edgeTypes: t, onInit: n, onNodeClick: r, onEdgeClick: i, onNodeDoubleClick: a, onEdgeDoubleClick: o, onNodeMouseEnter: s, onNodeMouseMove: c, onNodeMouseLeave: l, onNodeContextMenu: u, onSelectionContextMenu: d, onSelectionStart: f, onSelectionEnd: p, connectionLineType: m, connectionLineStyle: h, connectionLineComponent: g, connectionLineContainerStyle: _, selectionKeyCode: v, selectionOnDrag: y, selectionMode: b, multiSelectionKeyCode: x, panActivationKeyCode: S, zoomActivationKeyCode: C, deleteKeyCode: w, onlyRenderVisibleElements: T, elementsSelectable: E, defaultViewport: D, translateExtent: O, minZoom: k, maxZoom: A, preventScrolling: j, defaultMarkerColor: M, zoomOnScroll: N, zoomOnPinch: P, panOnScroll: F, panOnScrollSpeed: ee, panOnScrollMode: I, zoomOnDoubleClick: L, panOnDrag: R, onPaneClick: z, onPaneMouseEnter: B, onPaneMouseMove: V, onPaneMouseLeave: H, onPaneScroll: te, onPaneContextMenu: ne, paneClickDistance: re, nodeClickDistance: ie, onEdgeContextMenu: ae, onEdgeMouseEnter: oe, onEdgeMouseMove: se, onEdgeMouseLeave: ce, reconnectRadius: le, onReconnect: ue, onReconnectStart: de, onReconnectEnd: fe, noDragClassName: pe, noWheelClassName: me, noPanClassName: he, disableKeyboardA11y: ge, nodeExtent: _e, rfId: ve, viewport: ye, onViewportChange: be }) {
-	return br(e), br(t), xr(), ur(n), fr(ye), Y(dn, {
-		onPaneClick: z,
-		onPaneMouseEnter: B,
-		onPaneMouseMove: V,
-		onPaneMouseLeave: H,
-		onPaneContextMenu: ne,
-		onPaneScroll: te,
-		paneClickDistance: re,
+function GraphViewComponent({ nodeTypes: e, edgeTypes: t, onInit: n, onNodeClick: r, onEdgeClick: i, onNodeDoubleClick: a, onEdgeDoubleClick: o, onNodeMouseEnter: s, onNodeMouseMove: c, onNodeMouseLeave: l, onNodeContextMenu: u, onSelectionContextMenu: d, onSelectionStart: f, onSelectionEnd: p, connectionLineType: m, connectionLineStyle: h, connectionLineComponent: g, connectionLineContainerStyle: _, selectionKeyCode: v, selectionOnDrag: y, selectionMode: b, multiSelectionKeyCode: x, panActivationKeyCode: S, zoomActivationKeyCode: C, deleteKeyCode: w, onlyRenderVisibleElements: T, elementsSelectable: E, defaultViewport: D, translateExtent: O, minZoom: k, maxZoom: A, preventScrolling: j, defaultMarkerColor: M, zoomOnScroll: N, zoomOnPinch: P, panOnScroll: F, panOnScrollSpeed: I, panOnScrollMode: L, zoomOnDoubleClick: R, panOnDrag: z, onPaneClick: B, onPaneMouseEnter: V, onPaneMouseMove: H, onPaneMouseLeave: U, onPaneScroll: W, onPaneContextMenu: G, paneClickDistance: K, nodeClickDistance: q, onEdgeContextMenu: J, onEdgeMouseEnter: Y, onEdgeMouseMove: X, onEdgeMouseLeave: Z, reconnectRadius: Vn, onReconnect: Hn, onReconnectStart: Un, onReconnectEnd: Wn, noDragClassName: Gn, noWheelClassName: Kn, noPanClassName: Q, disableKeyboardA11y: $, nodeExtent: qn, rfId: Jn, viewport: Yn, onViewportChange: Xn }) {
+	return useNodeOrEdgeTypesWarning(e), useNodeOrEdgeTypesWarning(t), useStylesLoadedWarning(), useOnInitHandler(n), useViewportSync(Yn), jsx(FlowRenderer, {
+		onPaneClick: B,
+		onPaneMouseEnter: V,
+		onPaneMouseMove: H,
+		onPaneMouseLeave: U,
+		onPaneContextMenu: G,
+		onPaneScroll: W,
+		paneClickDistance: K,
 		deleteKeyCode: w,
 		selectionKeyCode: v,
 		selectionOnDrag: y,
@@ -2183,50 +2182,50 @@ function Sr({ nodeTypes: e, edgeTypes: t, onInit: n, onNodeClick: r, onEdgeClick
 		elementsSelectable: E,
 		zoomOnScroll: N,
 		zoomOnPinch: P,
-		zoomOnDoubleClick: L,
+		zoomOnDoubleClick: R,
 		panOnScroll: F,
-		panOnScrollSpeed: ee,
-		panOnScrollMode: I,
-		panOnDrag: R,
+		panOnScrollSpeed: I,
+		panOnScrollMode: L,
+		panOnDrag: z,
 		defaultViewport: D,
 		translateExtent: O,
 		minZoom: k,
 		maxZoom: A,
 		onSelectionContextMenu: d,
 		preventScrolling: j,
-		noDragClassName: pe,
-		noWheelClassName: me,
-		noPanClassName: he,
-		disableKeyboardA11y: ge,
-		onViewportChange: be,
-		isControlledViewport: !!ye,
-		children: X(lr, { children: [
-			Y(sr, {
+		noDragClassName: Gn,
+		noWheelClassName: Kn,
+		noPanClassName: Q,
+		disableKeyboardA11y: $,
+		onViewportChange: Xn,
+		isControlledViewport: !!Yn,
+		children: jsxs(Viewport, { children: [
+			jsx(EdgeRenderer, {
 				edgeTypes: t,
 				onEdgeClick: i,
 				onEdgeDoubleClick: o,
-				onReconnect: ue,
-				onReconnectStart: de,
-				onReconnectEnd: fe,
+				onReconnect: Hn,
+				onReconnectStart: Un,
+				onReconnectEnd: Wn,
 				onlyRenderVisibleElements: T,
-				onEdgeContextMenu: ae,
-				onEdgeMouseEnter: oe,
-				onEdgeMouseMove: se,
-				onEdgeMouseLeave: ce,
-				reconnectRadius: le,
+				onEdgeContextMenu: J,
+				onEdgeMouseEnter: Y,
+				onEdgeMouseMove: X,
+				onEdgeMouseLeave: Z,
+				reconnectRadius: Vn,
 				defaultMarkerColor: M,
-				noPanClassName: he,
-				disableKeyboardA11y: ge,
-				rfId: ve
+				noPanClassName: Q,
+				disableKeyboardA11y: $,
+				rfId: Jn
 			}),
-			Y(_r, {
+			jsx(ConnectionLineWrapper, {
 				style: h,
 				type: m,
 				component: g,
 				containerStyle: _
 			}),
-			Y("div", { className: "react-flow__edgelabel-renderer" }),
-			Y(xn, {
+			jsx("div", { className: "react-flow__edgelabel-renderer" }),
+			jsx(NodeRenderer, {
 				nodeTypes: e,
 				onNodeClick: r,
 				onNodeDoubleClick: a,
@@ -2234,23 +2233,23 @@ function Sr({ nodeTypes: e, edgeTypes: t, onInit: n, onNodeClick: r, onEdgeClick
 				onNodeMouseMove: c,
 				onNodeMouseLeave: l,
 				onNodeContextMenu: u,
-				nodeClickDistance: ie,
+				nodeClickDistance: q,
 				onlyRenderVisibleElements: T,
-				noPanClassName: he,
-				noDragClassName: pe,
-				disableKeyboardA11y: ge,
-				nodeExtent: _e,
-				rfId: ve
+				noPanClassName: Q,
+				noDragClassName: Gn,
+				disableKeyboardA11y: $,
+				nodeExtent: qn,
+				rfId: Jn
 			}),
-			Y("div", { className: "react-flow__viewport-portal" })
+			jsx("div", { className: "react-flow__viewport-portal" })
 		] })
 	});
 }
-Sr.displayName = "GraphView";
-var Cr = U(Sr), wr = ({ nodes: e, edges: t, defaultNodes: r, defaultEdges: i, width: a, height: o, fitView: s, fitViewOptions: c, minZoom: l = .5, maxZoom: u = 2, nodeOrigin: d, nodeExtent: f, zIndexMode: p = "basic" } = {}) => {
-	let h = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map(), _ = /* @__PURE__ */ new Map(), b = /* @__PURE__ */ new Map(), x = i ?? t ?? [], S = r ?? e ?? [], C = d ?? [0, 0], w = f ?? ne;
-	be(_, b, x);
-	let { nodesInitialized: T } = m(S, h, g, {
+GraphViewComponent.displayName = "GraphView";
+var GraphView = memo(GraphViewComponent), getInitialState = ({ nodes: e, edges: t, defaultNodes: r, defaultEdges: i, width: a, height: o, fitView: s, fitViewOptions: c, minZoom: l = .5, maxZoom: u = 2, nodeOrigin: d, nodeExtent: f, zIndexMode: p = "basic" } = {}) => {
+	let h = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map(), _ = /* @__PURE__ */ new Map(), b = /* @__PURE__ */ new Map(), x = i ?? t ?? [], S = r ?? e ?? [], C = d ?? [0, 0], w = f ?? infiniteExtent;
+	updateConnectionLookup(_, b, x);
+	let { nodesInitialized: T } = adoptUserNodes(S, h, g, {
 		nodeOrigin: C,
 		nodeExtent: w,
 		zIndexMode: p
@@ -2260,7 +2259,7 @@ var Cr = U(Sr), wr = ({ nodes: e, edges: t, defaultNodes: r, defaultEdges: i, wi
 		1
 	];
 	if (s && a && o) {
-		let { x: e, y: t, zoom: n } = H(F(h, { filter: (e) => !!((e.width || e.initialWidth) && (e.height || e.initialHeight)) }), a, o, l, u, c?.padding ?? .1);
+		let { x: e, y: t, zoom: n } = getViewportForBounds(getInternalNodesBounds(h, { filter: (e) => !!((e.width || e.initialWidth) && (e.height || e.initialHeight)) }), a, o, l, u, c?.padding ?? .1);
 		E = [
 			e,
 			t,
@@ -2286,12 +2285,12 @@ var Cr = U(Sr), wr = ({ nodes: e, edges: t, defaultNodes: r, defaultEdges: i, wi
 		panZoom: null,
 		minZoom: l,
 		maxZoom: u,
-		translateExtent: ne,
+		translateExtent: infiniteExtent,
 		nodeExtent: w,
 		nodesSelectionActive: !1,
 		userSelectionActive: !1,
 		userSelectionRect: null,
-		connectionMode: n.Strict,
+		connectionMode: ConnectionMode.Strict,
 		domNode: null,
 		paneDragging: !1,
 		noPanClassName: "nopan",
@@ -2313,7 +2312,7 @@ var Cr = U(Sr), wr = ({ nodes: e, edges: t, defaultNodes: r, defaultEdges: i, wi
 		fitViewQueued: s ?? !1,
 		fitViewOptions: c,
 		fitViewResolver: null,
-		connection: { ...re },
+		connection: { ...initialConnection },
 		connectionClickStartHandle: null,
 		connectOnClick: !0,
 		ariaLiveMessage: "",
@@ -2322,20 +2321,20 @@ var Cr = U(Sr), wr = ({ nodes: e, edges: t, defaultNodes: r, defaultEdges: i, wi
 		autoPanOnNodeFocus: !0,
 		autoPanSpeed: 15,
 		connectionRadius: 20,
-		onError: y,
+		onError: devWarn,
 		isValidConnection: void 0,
 		onSelectionChangeHandlers: [],
 		lib: "react",
 		debug: !1,
-		ariaLabelConfig: v,
+		ariaLabelConfig: defaultAriaLabelConfig,
 		zIndexMode: p,
 		onNodesChangeMiddlewareMap: /* @__PURE__ */ new Map(),
 		onEdgesChangeMiddlewareMap: /* @__PURE__ */ new Map()
 	};
-}, Tr = ({ nodes: e, edges: t, defaultNodes: n, defaultEdges: r, width: i, height: o, fitView: s, fitViewOptions: c, minZoom: l, maxZoom: u, nodeOrigin: d, nodeExtent: f, zIndexMode: p }) => ke((h, g) => {
+}, createStore = ({ nodes: e, edges: t, defaultNodes: n, defaultEdges: r, width: i, height: o, fitView: s, fitViewOptions: c, minZoom: l, maxZoom: u, nodeOrigin: d, nodeExtent: f, zIndexMode: p }) => createWithEqualityFn((h, g) => {
 	async function _() {
 		let { nodeLookup: e, panZoom: t, fitViewOptions: n, fitViewResolver: r, width: i, height: a, minZoom: o, maxZoom: s } = g();
-		t && (await C({
+		t && (await fitViewport({
 			nodes: e,
 			width: i,
 			height: a,
@@ -2345,7 +2344,7 @@ var Cr = U(Sr), wr = ({ nodes: e, edges: t, defaultNodes: r, defaultEdges: i, wi
 		}, n), r?.resolve(!0), h({ fitViewResolver: null }));
 	}
 	return {
-		...wr({
+		...getInitialState({
 			nodes: e,
 			edges: t,
 			width: i,
@@ -2361,7 +2360,7 @@ var Cr = U(Sr), wr = ({ nodes: e, edges: t, defaultNodes: r, defaultEdges: i, wi
 			zIndexMode: p
 		}),
 		setNodes: (e) => {
-			let { nodeLookup: t, parentLookup: n, nodeOrigin: r, elevateNodesOnSelect: i, fitViewQueued: a, zIndexMode: o, nodesSelectionActive: s } = g(), { nodesInitialized: c, hasSelectedNodes: l } = m(e, t, n, {
+			let { nodeLookup: t, parentLookup: n, nodeOrigin: r, elevateNodesOnSelect: i, fitViewQueued: a, zIndexMode: o, nodesSelectionActive: s } = g(), { nodesInitialized: c, hasSelectedNodes: l } = adoptUserNodes(e, t, n, {
 				nodeOrigin: r,
 				nodeExtent: f,
 				elevateNodesOnSelect: i,
@@ -2382,7 +2381,7 @@ var Cr = U(Sr), wr = ({ nodes: e, edges: t, defaultNodes: r, defaultEdges: i, wi
 		},
 		setEdges: (e) => {
 			let { connectionLookup: t, edgeLookup: n } = g();
-			be(t, n, e), h({ edges: e });
+			updateConnectionLookup(t, n, e), h({ edges: e });
 		},
 		setDefaultNodesAndEdges: (e, t) => {
 			if (e) {
@@ -2395,8 +2394,8 @@ var Cr = U(Sr), wr = ({ nodes: e, edges: t, defaultNodes: r, defaultEdges: i, wi
 			}
 		},
 		updateNodeInternals: (e) => {
-			let { triggerNodeChanges: t, nodeLookup: n, parentLookup: r, domNode: i, nodeOrigin: a, nodeExtent: o, debug: s, fitViewQueued: c, zIndexMode: l } = g(), { changes: u, updatedInternals: d } = xe(e, n, r, i, a, o, l);
-			d && (ye(n, r, {
+			let { triggerNodeChanges: t, nodeLookup: n, parentLookup: r, domNode: i, nodeOrigin: a, nodeExtent: o, debug: s, fitViewQueued: c, zIndexMode: l } = g(), { changes: u, updatedInternals: d } = updateNodeInternals(e, n, r, i, a, o, l);
+			d && (updateAbsolutePositions(n, r, {
 				nodeOrigin: a,
 				nodeExtent: o,
 				zIndexMode: l
@@ -2418,7 +2417,7 @@ var Cr = U(Sr), wr = ({ nodes: e, edges: t, defaultNodes: r, defaultEdges: i, wi
 					dragging: t
 				};
 				if (e && s.inProgress && s.fromNode.id === e.id) {
-					let t = N(e, s.fromHandle, a.Left, !0);
+					let t = getHandlePosition(e, s.fromHandle, Position.Left, !0);
 					c({
 						...s,
 						from: t
@@ -2435,7 +2434,7 @@ var Cr = U(Sr), wr = ({ nodes: e, edges: t, defaultNodes: r, defaultEdges: i, wi
 				}), r.push(d);
 			}
 			if (n.length > 0) {
-				let { parentLookup: e, nodeOrigin: t } = g(), a = te(n, i, e, t);
+				let { parentLookup: e, nodeOrigin: t } = g(), a = handleExpandParent(n, i, e, t);
 				r.push(...a);
 			}
 			for (let e of l.values()) r = e(r);
@@ -2443,37 +2442,37 @@ var Cr = U(Sr), wr = ({ nodes: e, edges: t, defaultNodes: r, defaultEdges: i, wi
 		},
 		triggerNodeChanges: (e) => {
 			let { onNodesChange: t, setNodes: n, nodes: r, hasDefaultNodes: i, debug: a } = g();
-			e?.length && (i && n(pt(e, r)), a && console.log("React Flow: trigger node changes", e), t?.(e));
+			e?.length && (i && n(applyNodeChanges(e, r)), a && console.log("React Flow: trigger node changes", e), t?.(e));
 		},
 		triggerEdgeChanges: (e) => {
 			let { onEdgesChange: t, setEdges: n, edges: r, hasDefaultEdges: i, debug: a } = g();
-			e?.length && (i && n(mt(e, r)), a && console.log("React Flow: trigger edge changes", e), t?.(e));
+			e?.length && (i && n(applyEdgeChanges(e, r)), a && console.log("React Flow: trigger edge changes", e), t?.(e));
 		},
 		addSelectedNodes: (e) => {
 			let { multiSelectionActive: t, edgeLookup: n, nodeLookup: r, triggerNodeChanges: i, triggerEdgeChanges: a } = g();
 			if (t) {
-				i(e.map((e) => ht(e, !0)));
+				i(e.map((e) => createSelectionChange(e, !0)));
 				return;
 			}
-			i(gt(r, new Set([...e]), !0)), a(gt(n));
+			i(getSelectionChanges(r, new Set([...e]), !0)), a(getSelectionChanges(n));
 		},
 		addSelectedEdges: (e) => {
 			let { multiSelectionActive: t, edgeLookup: n, nodeLookup: r, triggerNodeChanges: i, triggerEdgeChanges: a } = g();
 			if (t) {
-				a(e.map((e) => ht(e, !0)));
+				a(e.map((e) => createSelectionChange(e, !0)));
 				return;
 			}
-			a(gt(n, new Set([...e]))), i(gt(r, /* @__PURE__ */ new Set(), !0));
+			a(getSelectionChanges(n, new Set([...e]))), i(getSelectionChanges(r, /* @__PURE__ */ new Set(), !0));
 		},
 		unselectNodesAndEdges: ({ nodes: e, edges: t } = {}) => {
 			let { edges: n, nodes: r, nodeLookup: i, triggerNodeChanges: a, triggerEdgeChanges: o } = g(), s = e || r, c = t || n, l = [];
 			for (let e of s) {
 				if (!e.selected) continue;
 				let t = i.get(e.id);
-				t && (t.selected = !1), l.push(ht(e.id, !1));
+				t && (t.selected = !1), l.push(createSelectionChange(e.id, !1));
 			}
 			let u = [];
-			for (let e of c) e.selected && u.push(ht(e.id, !1));
+			for (let e of c) e.selected && u.push(createSelectionChange(e.id, !1));
 			a(l), o(u);
 		},
 		setMinZoom: (e) => {
@@ -2490,12 +2489,12 @@ var Cr = U(Sr), wr = ({ nodes: e, edges: t, defaultNodes: r, defaultEdges: i, wi
 		resetSelectedElements: () => {
 			let { edges: e, nodes: t, triggerNodeChanges: n, triggerEdgeChanges: r, elementsSelectable: i } = g();
 			if (!i) return;
-			let a = t.reduce((e, t) => t.selected ? [...e, ht(t.id, !1)] : e, []), o = e.reduce((e, t) => t.selected ? [...e, ht(t.id, !1)] : e, []);
+			let a = t.reduce((e, t) => t.selected ? [...e, createSelectionChange(t.id, !1)] : e, []), o = e.reduce((e, t) => t.selected ? [...e, createSelectionChange(t.id, !1)] : e, []);
 			n(a), r(o);
 		},
 		setNodeExtent: (e) => {
 			let { nodes: t, nodeLookup: n, parentLookup: r, nodeOrigin: i, elevateNodesOnSelect: a, nodeExtent: o, zIndexMode: s } = g();
-			e[0][0] === o[0][0] && e[0][1] === o[0][1] && e[1][0] === o[1][0] && e[1][1] === o[1][1] || (m(t, n, r, {
+			e[0][0] === o[0][0] && e[0][1] === o[0][1] && e[1][0] === o[1][0] && e[1][1] === o[1][1] || (adoptUserNodes(t, n, r, {
 				nodeOrigin: i,
 				nodeExtent: e,
 				elevateNodesOnSelect: a,
@@ -2505,7 +2504,7 @@ var Cr = U(Sr), wr = ({ nodes: e, edges: t, defaultNodes: r, defaultEdges: i, wi
 		},
 		panBy: (e) => {
 			let { transform: t, width: n, height: r, panZoom: i, translateExtent: a } = g();
-			return he({
+			return panBy({
 				delta: e,
 				panZoom: i,
 				transform: t,
@@ -2529,16 +2528,16 @@ var Cr = U(Sr), wr = ({ nodes: e, edges: t, defaultNodes: r, defaultEdges: i, wi
 			}), Promise.resolve(!0);
 		},
 		cancelConnection: () => {
-			h({ connection: { ...re } });
+			h({ connection: { ...initialConnection } });
 		},
 		updateConnection: (e) => {
 			h({ connection: e });
 		},
-		reset: () => h({ ...wr() })
+		reset: () => h({ ...getInitialState() })
 	};
 }, Object.is);
-function Er({ initialNodes: e, initialEdges: t, defaultNodes: n, defaultEdges: r, initialWidth: i, initialHeight: a, initialMinZoom: o, initialMaxZoom: s, initialFitViewOptions: c, fitView: l, nodeOrigin: u, nodeExtent: d, zIndexMode: f, children: p }) {
-	let [m] = J(() => Tr({
+function ReactFlowProvider({ initialNodes: e, initialEdges: t, defaultNodes: n, defaultEdges: r, initialWidth: i, initialHeight: a, initialMinZoom: o, initialMaxZoom: s, initialFitViewOptions: c, fitView: l, nodeOrigin: u, nodeExtent: d, zIndexMode: f, children: p }) {
+	let [m] = useState(() => createStore({
 		nodes: e,
 		edges: t,
 		defaultNodes: n,
@@ -2553,13 +2552,13 @@ function Er({ initialNodes: e, initialEdges: t, defaultNodes: n, defaultEdges: r
 		nodeExtent: d,
 		zIndexMode: f
 	}));
-	return Y(Me, {
+	return jsx(Provider$1, {
 		value: m,
-		children: Y(Tt, { children: p })
+		children: jsx(BatchProvider, { children: p })
 	});
 }
-function Dr({ children: e, nodes: t, edges: n, defaultNodes: r, defaultEdges: i, width: a, height: o, fitView: s, fitViewOptions: c, minZoom: l, maxZoom: u, nodeOrigin: d, nodeExtent: f, zIndexMode: p }) {
-	return Te(je) ? Y(De, { children: e }) : Y(Er, {
+function Wrapper({ children: e, nodes: t, edges: n, defaultNodes: r, defaultEdges: i, width: a, height: o, fitView: s, fitViewOptions: c, minZoom: l, maxZoom: u, nodeOrigin: d, nodeExtent: f, zIndexMode: p }) {
+	return useContext(StoreContext) ? jsx(Fragment$1, { children: e }) : jsx(ReactFlowProvider, {
 		initialNodes: t,
 		initialEdges: n,
 		defaultNodes: r,
@@ -2576,51 +2575,51 @@ function Dr({ children: e, nodes: t, edges: n, defaultNodes: r, defaultEdges: i,
 		children: e
 	});
 }
-var Or = {
+var wrapperStyle = {
 	width: "100%",
 	height: "100%",
 	overflow: "hidden",
 	position: "relative",
 	zIndex: 0
 };
-function kr({ nodes: n, edges: r, defaultNodes: a, defaultEdges: o, className: c, nodeTypes: l, edgeTypes: u, onNodeClick: d, onEdgeClick: f, onInit: p, onMove: m, onMoveStart: h, onMoveEnd: g, onConnect: _, onConnectStart: v, onConnectEnd: y, onClickConnectStart: b, onClickConnectEnd: x, onNodeMouseEnter: S, onNodeMouseMove: C, onNodeMouseLeave: w, onNodeContextMenu: T, onNodeDoubleClick: E, onNodeDragStart: D, onNodeDrag: O, onNodeDragStop: k, onNodesDelete: A, onEdgesDelete: j, onDelete: M, onSelectionChange: N, onSelectionDragStart: P, onSelectionDrag: F, onSelectionDragStop: ee, onSelectionContextMenu: I, onSelectionStart: L, onSelectionEnd: R, onBeforeDelete: z, connectionMode: B, connectionLineType: V = t.Bezier, connectionLineStyle: H, connectionLineComponent: te, connectionLineContainerStyle: re, deleteKeyCode: ie = "Backspace", selectionKeyCode: ae = "Shift", selectionOnDrag: oe = !1, selectionMode: ce = s.Full, panActivationKeyCode: le = "Space", multiSelectionKeyCode: ue = se() ? "Meta" : "Control", zoomActivationKeyCode: de = se() ? "Meta" : "Control", snapToGrid: fe, snapGrid: pe, onlyRenderVisibleElements: me = !1, selectNodesOnDrag: he, nodesDraggable: ge, autoPanOnNodeFocus: _e, nodesConnectable: ve, nodesFocusable: ye, nodeOrigin: be = Qe, edgesFocusable: xe, edgesReconnectable: Se, elementsSelectable: Ce = !0, defaultViewport: we = $e, minZoom: U = .5, maxZoom: Te = 2, translateExtent: G = ne, preventScrolling: Ee = !0, nodeExtent: K, defaultMarkerColor: q = "#b1b1b7", zoomOnScroll: J = !0, zoomOnPinch: De = !0, panOnScroll: Oe = !1, panOnScrollSpeed: ke = .5, panOnScrollMode: Ae = i.Free, zoomOnDoubleClick: Z = !0, panOnDrag: je = !0, onPaneClick: Me, onPaneMouseEnter: Ne, onPaneMouseMove: Q, onPaneMouseLeave: $, onPaneScroll: Pe, onPaneContextMenu: Fe, paneClickDistance: Ie = 1, nodeClickDistance: Le = 0, children: Re, onReconnect: ze, onReconnectStart: Be, onReconnectEnd: Ve, onEdgeContextMenu: Ue, onEdgeDoubleClick: Ge, onEdgeMouseEnter: Ke, onEdgeMouseMove: qe, onEdgeMouseLeave: Je, reconnectRadius: Ye = 10, onNodesChange: Ze, onEdgesChange: et, noDragClassName: tt = "nodrag", noWheelClassName: nt = "nowheel", noPanClassName: it = "nopan", fitView: ot, fitViewOptions: st, connectOnClick: ct, attributionPosition: lt, proOptions: ut, defaultEdgeOptions: dt, elevateNodesOnSelect: ft = !0, elevateEdgesOnSelect: pt = !1, disableKeyboardA11y: mt = !1, autoPanOnConnect: ht, autoPanOnNodeDrag: gt, autoPanSpeed: _t, connectionRadius: vt, isValidConnection: yt, onError: bt, style: xt, id: St, nodeDragThreshold: Ct, connectionDragThreshold: wt, viewport: Tt, onViewportChange: Et, width: Dt, height: Ot, colorMode: kt = "light", debug: At, onScroll: jt, ariaLabelConfig: Mt, zIndexMode: Nt = "basic", ...Pt }, Ft) {
-	let It = St || "1", Lt = at(kt), Rt = W((e) => {
+function ReactFlow({ nodes: n, edges: r, defaultNodes: a, defaultEdges: o, className: c, nodeTypes: l, edgeTypes: u, onNodeClick: d, onEdgeClick: f, onInit: p, onMove: m, onMoveStart: h, onMoveEnd: g, onConnect: _, onConnectStart: v, onConnectEnd: y, onClickConnectStart: b, onClickConnectEnd: x, onNodeMouseEnter: S, onNodeMouseMove: C, onNodeMouseLeave: w, onNodeContextMenu: T, onNodeDoubleClick: E, onNodeDragStart: D, onNodeDrag: O, onNodeDragStop: k, onNodesDelete: A, onEdgesDelete: j, onDelete: M, onSelectionChange: N, onSelectionDragStart: P, onSelectionDrag: F, onSelectionDragStop: I, onSelectionContextMenu: L, onSelectionStart: R, onSelectionEnd: z, onBeforeDelete: B, connectionMode: V, connectionLineType: H = ConnectionLineType.Bezier, connectionLineStyle: U, connectionLineComponent: W, connectionLineContainerStyle: G, deleteKeyCode: K = "Backspace", selectionKeyCode: J = "Shift", selectionOnDrag: Y = !1, selectionMode: X = SelectionMode.Full, panActivationKeyCode: Z = "Space", multiSelectionKeyCode: Hn = isMacOs() ? "Meta" : "Control", zoomActivationKeyCode: Un = isMacOs() ? "Meta" : "Control", snapToGrid: Wn, snapGrid: Gn, onlyRenderVisibleElements: Kn = !1, selectNodesOnDrag: Q, nodesDraggable: $, autoPanOnNodeFocus: qn, nodesConnectable: Jn, nodesFocusable: Yn, nodeOrigin: Xn = defaultNodeOrigin, edgesFocusable: Zn, edgesReconnectable: Qn, elementsSelectable: $n = !0, defaultViewport: er = defaultViewport, minZoom: tr = .5, maxZoom: nr = 2, translateExtent: rr = infiniteExtent, preventScrolling: ir = !0, nodeExtent: ar, defaultMarkerColor: or = "#b1b1b7", zoomOnScroll: sr = !0, zoomOnPinch: cr = !0, panOnScroll: lr = !1, panOnScrollSpeed: ur = .5, panOnScrollMode: dr = PanOnScrollMode.Free, zoomOnDoubleClick: fr = !0, panOnDrag: pr = !0, onPaneClick: mr, onPaneMouseEnter: hr, onPaneMouseMove: gr, onPaneMouseLeave: _r, onPaneScroll: vr, onPaneContextMenu: yr, paneClickDistance: br = 1, nodeClickDistance: xr = 0, children: Sr, onReconnect: Cr, onReconnectStart: wr, onReconnectEnd: Tr, onEdgeContextMenu: Er, onEdgeDoubleClick: Dr, onEdgeMouseEnter: Or, onEdgeMouseMove: kr, onEdgeMouseLeave: Ar, reconnectRadius: jr = 10, onNodesChange: Mr, onEdgesChange: Nr, noDragClassName: Pr = "nodrag", noWheelClassName: Fr = "nowheel", noPanClassName: Ir = "nopan", fitView: Lr, fitViewOptions: Rr, connectOnClick: zr, attributionPosition: Br, proOptions: Vr, defaultEdgeOptions: Hr, elevateNodesOnSelect: Ur = !0, elevateEdgesOnSelect: Wr = !1, disableKeyboardA11y: Gr = !1, autoPanOnConnect: Kr, autoPanOnNodeDrag: qr, autoPanSpeed: Jr, connectionRadius: Yr, isValidConnection: Xr, onError: Zr, style: Qr, id: $r, nodeDragThreshold: ei, connectionDragThreshold: ti, viewport: ni, onViewportChange: ri, width: ii, height: ai, colorMode: oi = "light", debug: si, onScroll: ci, ariaLabelConfig: li, zIndexMode: ui = "basic", ...di }, fi) {
+	let pi = $r || "1", mi = useColorModeClass(oi), hi = useCallback((e) => {
 		e.currentTarget.scrollTo({
 			top: 0,
 			left: 0,
 			behavior: "instant"
-		}), jt?.(e);
-	}, [jt]);
-	return Y("div", {
+		}), ci?.(e);
+	}, [ci]);
+	return jsx("div", {
 		"data-testid": "rf__wrapper",
-		...Pt,
-		onScroll: Rt,
+		...di,
+		onScroll: hi,
 		style: {
-			...xt,
-			...Or
+			...Qr,
+			...wrapperStyle
 		},
-		ref: Ft,
-		className: e([
+		ref: fi,
+		className: cc([
 			"react-flow",
 			c,
-			Lt
+			mi
 		]),
-		id: St,
+		id: $r,
 		role: "application",
-		children: X(Dr, {
+		children: jsxs(Wrapper, {
 			nodes: n,
 			edges: r,
-			width: Dt,
-			height: Ot,
-			fitView: ot,
-			fitViewOptions: st,
-			minZoom: U,
-			maxZoom: Te,
-			nodeOrigin: be,
-			nodeExtent: K,
-			zIndexMode: Nt,
+			width: ii,
+			height: ai,
+			fitView: Lr,
+			fitViewOptions: Rr,
+			minZoom: tr,
+			maxZoom: nr,
+			nodeOrigin: Xn,
+			nodeExtent: ar,
+			zIndexMode: ui,
 			children: [
-				Y(rt, {
+				jsx(StoreUpdater, {
 					nodes: n,
 					edges: r,
 					defaultNodes: a,
@@ -2630,28 +2629,28 @@ function kr({ nodes: n, edges: r, defaultNodes: a, defaultEdges: o, className: c
 					onConnectEnd: y,
 					onClickConnectStart: b,
 					onClickConnectEnd: x,
-					nodesDraggable: ge,
-					autoPanOnNodeFocus: _e,
-					nodesConnectable: ve,
-					nodesFocusable: ye,
-					edgesFocusable: xe,
-					edgesReconnectable: Se,
-					elementsSelectable: Ce,
-					elevateNodesOnSelect: ft,
-					elevateEdgesOnSelect: pt,
-					minZoom: U,
-					maxZoom: Te,
-					nodeExtent: K,
-					onNodesChange: Ze,
-					onEdgesChange: et,
-					snapToGrid: fe,
-					snapGrid: pe,
-					connectionMode: B,
-					translateExtent: G,
-					connectOnClick: ct,
-					defaultEdgeOptions: dt,
-					fitView: ot,
-					fitViewOptions: st,
+					nodesDraggable: $,
+					autoPanOnNodeFocus: qn,
+					nodesConnectable: Jn,
+					nodesFocusable: Yn,
+					edgesFocusable: Zn,
+					edgesReconnectable: Qn,
+					elementsSelectable: $n,
+					elevateNodesOnSelect: Ur,
+					elevateEdgesOnSelect: Wr,
+					minZoom: tr,
+					maxZoom: nr,
+					nodeExtent: ar,
+					onNodesChange: Mr,
+					onEdgesChange: Nr,
+					snapToGrid: Wn,
+					snapGrid: Gn,
+					connectionMode: V,
+					translateExtent: rr,
+					connectOnClick: zr,
+					defaultEdgeOptions: Hr,
+					fitView: Lr,
+					fitViewOptions: Rr,
 					onNodesDelete: A,
 					onEdgesDelete: j,
 					onDelete: M,
@@ -2660,28 +2659,28 @@ function kr({ nodes: n, edges: r, defaultNodes: a, defaultEdges: o, className: c
 					onNodeDragStop: k,
 					onSelectionDrag: F,
 					onSelectionDragStart: P,
-					onSelectionDragStop: ee,
+					onSelectionDragStop: I,
 					onMove: m,
 					onMoveStart: h,
 					onMoveEnd: g,
-					noPanClassName: it,
-					nodeOrigin: be,
-					rfId: It,
-					autoPanOnConnect: ht,
-					autoPanOnNodeDrag: gt,
-					autoPanSpeed: _t,
-					onError: bt,
-					connectionRadius: vt,
-					isValidConnection: yt,
-					selectNodesOnDrag: he,
-					nodeDragThreshold: Ct,
-					connectionDragThreshold: wt,
-					onBeforeDelete: z,
-					debug: At,
-					ariaLabelConfig: Mt,
-					zIndexMode: Nt
+					noPanClassName: Ir,
+					nodeOrigin: Xn,
+					rfId: pi,
+					autoPanOnConnect: Kr,
+					autoPanOnNodeDrag: qr,
+					autoPanSpeed: Jr,
+					onError: Zr,
+					connectionRadius: Yr,
+					isValidConnection: Xr,
+					selectNodesOnDrag: Q,
+					nodeDragThreshold: ei,
+					connectionDragThreshold: ti,
+					onBeforeDelete: B,
+					debug: si,
+					ariaLabelConfig: li,
+					zIndexMode: ui
 				}),
-				Y(Cr, {
+				jsx(GraphView, {
 					onInit: p,
 					onNodeClick: d,
 					onEdgeClick: f,
@@ -2692,144 +2691,144 @@ function kr({ nodes: n, edges: r, defaultNodes: a, defaultEdges: o, className: c
 					onNodeDoubleClick: E,
 					nodeTypes: l,
 					edgeTypes: u,
-					connectionLineType: V,
-					connectionLineStyle: H,
-					connectionLineComponent: te,
-					connectionLineContainerStyle: re,
-					selectionKeyCode: ae,
-					selectionOnDrag: oe,
-					selectionMode: ce,
-					deleteKeyCode: ie,
-					multiSelectionKeyCode: ue,
-					panActivationKeyCode: le,
-					zoomActivationKeyCode: de,
-					onlyRenderVisibleElements: me,
-					defaultViewport: we,
-					translateExtent: G,
-					minZoom: U,
-					maxZoom: Te,
-					preventScrolling: Ee,
-					zoomOnScroll: J,
-					zoomOnPinch: De,
-					zoomOnDoubleClick: Z,
-					panOnScroll: Oe,
-					panOnScrollSpeed: ke,
-					panOnScrollMode: Ae,
-					panOnDrag: je,
-					onPaneClick: Me,
-					onPaneMouseEnter: Ne,
-					onPaneMouseMove: Q,
-					onPaneMouseLeave: $,
-					onPaneScroll: Pe,
-					onPaneContextMenu: Fe,
-					paneClickDistance: Ie,
-					nodeClickDistance: Le,
-					onSelectionContextMenu: I,
-					onSelectionStart: L,
-					onSelectionEnd: R,
-					onReconnect: ze,
-					onReconnectStart: Be,
-					onReconnectEnd: Ve,
-					onEdgeContextMenu: Ue,
-					onEdgeDoubleClick: Ge,
-					onEdgeMouseEnter: Ke,
-					onEdgeMouseMove: qe,
-					onEdgeMouseLeave: Je,
-					reconnectRadius: Ye,
-					defaultMarkerColor: q,
-					noDragClassName: tt,
-					noWheelClassName: nt,
-					noPanClassName: it,
-					rfId: It,
-					disableKeyboardA11y: mt,
-					nodeExtent: K,
-					viewport: Tt,
-					onViewportChange: Et
+					connectionLineType: H,
+					connectionLineStyle: U,
+					connectionLineComponent: W,
+					connectionLineContainerStyle: G,
+					selectionKeyCode: J,
+					selectionOnDrag: Y,
+					selectionMode: X,
+					deleteKeyCode: K,
+					multiSelectionKeyCode: Hn,
+					panActivationKeyCode: Z,
+					zoomActivationKeyCode: Un,
+					onlyRenderVisibleElements: Kn,
+					defaultViewport: er,
+					translateExtent: rr,
+					minZoom: tr,
+					maxZoom: nr,
+					preventScrolling: ir,
+					zoomOnScroll: sr,
+					zoomOnPinch: cr,
+					zoomOnDoubleClick: fr,
+					panOnScroll: lr,
+					panOnScrollSpeed: ur,
+					panOnScrollMode: dr,
+					panOnDrag: pr,
+					onPaneClick: mr,
+					onPaneMouseEnter: hr,
+					onPaneMouseMove: gr,
+					onPaneMouseLeave: _r,
+					onPaneScroll: vr,
+					onPaneContextMenu: yr,
+					paneClickDistance: br,
+					nodeClickDistance: xr,
+					onSelectionContextMenu: L,
+					onSelectionStart: R,
+					onSelectionEnd: z,
+					onReconnect: Cr,
+					onReconnectStart: wr,
+					onReconnectEnd: Tr,
+					onEdgeContextMenu: Er,
+					onEdgeDoubleClick: Dr,
+					onEdgeMouseEnter: Or,
+					onEdgeMouseMove: kr,
+					onEdgeMouseLeave: Ar,
+					reconnectRadius: jr,
+					defaultMarkerColor: or,
+					noDragClassName: Pr,
+					noWheelClassName: Fr,
+					noPanClassName: Ir,
+					rfId: pi,
+					disableKeyboardA11y: Gr,
+					nodeExtent: ar,
+					viewport: ni,
+					onViewportChange: ri
 				}),
-				Y(Xe, { onSelectionChange: N }),
-				Re,
-				Y(We, {
-					proOptions: ut,
-					position: lt
+				jsx(SelectionListener, { onSelectionChange: N }),
+				Sr,
+				jsx(Attribution, {
+					proOptions: Vr,
+					position: Br
 				}),
-				Y(He, {
-					rfId: It,
-					disableKeyboardA11y: mt
+				jsx(A11yDescriptions, {
+					rfId: pi,
+					disableKeyboardA11y: Gr
 				})
 			]
 		})
 	});
 }
-var Ar = xt(kr), jr = (e) => e.domNode?.querySelector(".react-flow__edgelabel-renderer");
-function Mr({ children: e }) {
-	let t = Q(jr);
-	return t ? Oe(e, t) : null;
+var index = fixedForwardRef(ReactFlow), selector$6 = (e) => e.domNode?.querySelector(".react-flow__edgelabel-renderer");
+function EdgeLabelRenderer({ children: e }) {
+	let t = useStore(selector$6);
+	return t ? createPortal(e, t) : null;
 }
-function Nr(e) {
-	let [t, n] = J(e);
+function useNodesState(e) {
+	let [t, n] = useState(e);
 	return [
 		t,
 		n,
-		W((e) => n((t) => pt(e, t)), [])
+		useCallback((e) => n((t) => applyNodeChanges(e, t)), [])
 	];
 }
-function Pr(e) {
-	let [t, n] = J(e);
+function useEdgesState(e) {
+	let [t, n] = useState(e);
 	return [
 		t,
 		n,
-		W((e) => n((t) => mt(e, t)), [])
+		useCallback((e) => n((t) => applyEdgeChanges(e, t)), [])
 	];
 }
-x.error014();
-function Fr({ dimensions: t, lineWidth: n, variant: r, className: i }) {
-	return Y("path", {
+errorMessages.error014();
+function LinePattern({ dimensions: t, lineWidth: n, variant: r, className: i }) {
+	return jsx("path", {
 		strokeWidth: n,
 		d: `M${t[0] / 2} 0 V${t[1]} M0 ${t[1] / 2} H${t[0]}`,
-		className: e([
+		className: cc([
 			"react-flow__background-pattern",
 			r,
 			i
 		])
 	});
 }
-function Ir({ radius: t, className: n }) {
-	return Y("circle", {
+function DotPattern({ radius: t, className: n }) {
+	return jsx("circle", {
 		cx: t,
 		cy: t,
 		r: t,
-		className: e([
+		className: cc([
 			"react-flow__background-pattern",
 			"dots",
 			n
 		])
 	});
 }
-var Lr;
+var BackgroundVariant;
 (function(e) {
 	e.Lines = "lines", e.Dots = "dots", e.Cross = "cross";
-})(Lr ||= {});
-var Rr = {
-	[Lr.Dots]: 1,
-	[Lr.Lines]: 1,
-	[Lr.Cross]: 6
-}, zr = (e) => ({
+})(BackgroundVariant ||= {});
+var defaultSize = {
+	[BackgroundVariant.Dots]: 1,
+	[BackgroundVariant.Lines]: 1,
+	[BackgroundVariant.Cross]: 6
+}, selector$3 = (e) => ({
 	transform: e.transform,
 	patternId: `pattern-${e.rfId}`
 });
-function Br({ id: t, variant: n = Lr.Dots, gap: r = 20, size: i, lineWidth: a = 1, offset: o = 0, color: s, bgColor: c, style: l, className: u, patternClassName: d }) {
-	let f = q(null), { transform: p, patternId: m } = Q(zr, Z), h = i || Rr[n], g = n === Lr.Dots, _ = n === Lr.Cross, v = Array.isArray(r) ? r : [r, r], y = [v[0] * p[2] || 1, v[1] * p[2] || 1], b = h * p[2], x = Array.isArray(o) ? o : [o, o], S = _ ? [b, b] : y, C = [x[0] * p[2] || 1 + S[0] / 2, x[1] * p[2] || 1 + S[1] / 2], w = `${m}${t || ""}`;
-	return X("svg", {
-		className: e(["react-flow__background", u]),
+function BackgroundComponent({ id: t, variant: n = BackgroundVariant.Dots, gap: r = 20, size: i, lineWidth: a = 1, offset: o = 0, color: s, bgColor: c, style: l, className: u, patternClassName: d }) {
+	let f = useRef(null), { transform: p, patternId: m } = useStore(selector$3, shallow), h = i || defaultSize[n], g = n === BackgroundVariant.Dots, _ = n === BackgroundVariant.Cross, v = Array.isArray(r) ? r : [r, r], y = [v[0] * p[2] || 1, v[1] * p[2] || 1], b = h * p[2], x = Array.isArray(o) ? o : [o, o], S = _ ? [b, b] : y, C = [x[0] * p[2] || 1 + S[0] / 2, x[1] * p[2] || 1 + S[1] / 2], w = `${m}${t || ""}`;
+	return jsxs("svg", {
+		className: cc(["react-flow__background", u]),
 		style: {
 			...l,
-			...Nt,
+			...containerStyle,
 			"--xy-background-color-props": c,
 			"--xy-background-pattern-color-props": s
 		},
 		ref: f,
 		"data-testid": "rf__background",
-		children: [Y("pattern", {
+		children: [jsx("pattern", {
 			id: w,
 			x: p[0] % y[0],
 			y: p[1] % y[1],
@@ -2837,16 +2836,16 @@ function Br({ id: t, variant: n = Lr.Dots, gap: r = 20, size: i, lineWidth: a =
 			height: y[1],
 			patternUnits: "userSpaceOnUse",
 			patternTransform: `translate(-${C[0]},-${C[1]})`,
-			children: g ? Y(Ir, {
+			children: g ? jsx(DotPattern, {
 				radius: b / 2,
 				className: d
-			}) : Y(Fr, {
+			}) : jsx(LinePattern, {
 				dimensions: S,
 				lineWidth: a,
 				variant: n,
 				className: d
 			})
-		}), Y("rect", {
+		}), jsx("rect", {
 			x: "0",
 			y: "0",
 			width: "100%",
@@ -2855,61 +2854,73 @@ function Br({ id: t, variant: n = Lr.Dots, gap: r = 20, size: i, lineWidth: a =
 		})]
 	});
 }
-Br.displayName = "Background";
-var Vr = U(Br);
-function Hr() {
-	return Y("svg", {
+BackgroundComponent.displayName = "Background";
+var Background = memo(BackgroundComponent);
+function PlusIcon() {
+	return jsx("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		viewBox: "0 0 32 32",
-		children: Y("path", { d: "M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z" })
+		children: jsx("path", { d: "M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z" })
 	});
 }
-function Ur() {
-	return Y("svg", {
+function MinusIcon() {
+	return jsx("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		viewBox: "0 0 32 5",
-		children: Y("path", { d: "M0 0h32v4.2H0z" })
+		children: jsx("path", { d: "M0 0h32v4.2H0z" })
 	});
 }
-function Wr() {
-	return Y("svg", {
+function FitViewIcon() {
+	return jsx("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		viewBox: "0 0 32 30",
-		children: Y("path", { d: "M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" })
+		children: jsx("path", { d: "M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" })
 	});
 }
-function Gr() {
-	return Y("svg", {
+function LockIcon() {
+	return jsx("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		viewBox: "0 0 25 32",
-		children: Y("path", { d: "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.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.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" })
+		children: jsx("path", { d: "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.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.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" })
 	});
 }
-function Kr() {
-	return Y("svg", {
+function UnlockIcon() {
+	return jsx("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		viewBox: "0 0 25 32",
-		children: Y("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" })
+		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" })
 	});
 }
-function qr({ children: t, className: n, ...r }) {
-	return Y("button", {
+function ControlButton({ children: t, className: n, ...r }) {
+	return jsx("button", {
 		type: "button",
-		className: e(["react-flow__controls-button", n]),
+		className: cc(["react-flow__controls-button", n]),
 		...r,
 		children: t
 	});
 }
-var Jr = (e) => ({
+var selector$2 = (e) => ({
 	isInteractive: e.nodesDraggable || e.nodesConnectable || e.elementsSelectable,
 	minZoomReached: e.transform[2] <= e.minZoom,
 	maxZoomReached: e.transform[2] >= e.maxZoom,
 	ariaLabelConfig: e.ariaLabelConfig
 });
-function Yr({ style: t, showZoom: n = !0, showFitView: r = !0, showInteractive: i = !0, fitViewOptions: a, onZoomIn: o, onZoomOut: s, onFitView: c, onInteractiveChange: l, className: u, children: d, position: f = "bottom-left", orientation: p = "vertical", "aria-label": m }) {
-	let h = $(), { isInteractive: g, minZoomReached: _, maxZoomReached: v, ariaLabelConfig: y } = Q(Jr, Z), { zoomIn: b, zoomOut: x, fitView: S } = Ot();
-	return X(Ue, {
-		className: e([
+function ControlsComponent({ style: t, showZoom: n = !0, showFitView: r = !0, showInteractive: i = !0, fitViewOptions: a, onZoomIn: o, onZoomOut: s, onFitView: c, onInteractiveChange: l, className: u, children: d, position: f = "bottom-left", orientation: p = "vertical", "aria-label": m }) {
+	let h = useStoreApi(), { isInteractive: g, minZoomReached: _, maxZoomReached: v, ariaLabelConfig: y } = useStore(selector$2, shallow), { zoomIn: b, zoomOut: x, fitView: S } = useReactFlow(), C = () => {
+		b(), o?.();
+	}, w = () => {
+		x(), s?.();
+	}, T = () => {
+		S(a), c?.();
+	}, E = () => {
+		h.setState({
+			nodesDraggable: !g,
+			nodesConnectable: !g,
+			elementsSelectable: !g
+		}), l?.(!g);
+	};
+	return jsxs(Panel, {
+		className: cc([
 			"react-flow__controls",
 			p === "horizontal" ? "horizontal" : "vertical",
 			u
@@ -2919,57 +2930,45 @@ function Yr({ style: t, showZoom: n = !0, showFitView: r = !0, showInteractive:
 		"data-testid": "rf__controls",
 		"aria-label": m ?? y["controls.ariaLabel"],
 		children: [
-			n && X(De, { children: [Y(qr, {
-				onClick: () => {
-					b(), o?.();
-				},
+			n && jsxs(Fragment$1, { children: [jsx(ControlButton, {
+				onClick: C,
 				className: "react-flow__controls-zoomin",
 				title: y["controls.zoomIn.ariaLabel"],
 				"aria-label": y["controls.zoomIn.ariaLabel"],
 				disabled: v,
-				children: Y(Hr, {})
-			}), Y(qr, {
-				onClick: () => {
-					x(), s?.();
-				},
+				children: jsx(PlusIcon, {})
+			}), jsx(ControlButton, {
+				onClick: w,
 				className: "react-flow__controls-zoomout",
 				title: y["controls.zoomOut.ariaLabel"],
 				"aria-label": y["controls.zoomOut.ariaLabel"],
 				disabled: _,
-				children: Y(Ur, {})
+				children: jsx(MinusIcon, {})
 			})] }),
-			r && Y(qr, {
+			r && jsx(ControlButton, {
 				className: "react-flow__controls-fitview",
-				onClick: () => {
-					S(a), c?.();
-				},
+				onClick: T,
 				title: y["controls.fitView.ariaLabel"],
 				"aria-label": y["controls.fitView.ariaLabel"],
-				children: Y(Wr, {})
+				children: jsx(FitViewIcon, {})
 			}),
-			i && Y(qr, {
+			i && jsx(ControlButton, {
 				className: "react-flow__controls-interactive",
-				onClick: () => {
-					h.setState({
-						nodesDraggable: !g,
-						nodesConnectable: !g,
-						elementsSelectable: !g
-					}), l?.(!g);
-				},
+				onClick: E,
 				title: y["controls.interactive.ariaLabel"],
 				"aria-label": y["controls.interactive.ariaLabel"],
-				children: Y(g ? Kr : Gr, {})
+				children: jsx(g ? UnlockIcon : LockIcon, {})
 			}),
 			d
 		]
 	});
 }
-Yr.displayName = "Controls";
-var Xr = U(Yr);
-function Zr({ id: t, x: n, y: r, width: i, height: a, style: o, color: s, strokeColor: c, strokeWidth: l, className: u, borderRadius: d, shapeRendering: f, selected: p, onClick: m }) {
+ControlsComponent.displayName = "Controls";
+var Controls = memo(ControlsComponent);
+function MiniMapNodeComponent({ id: t, x: n, y: r, width: i, height: a, style: o, color: s, strokeColor: c, strokeWidth: l, className: u, borderRadius: d, shapeRendering: f, selected: p, onClick: m }) {
 	let { background: h, backgroundColor: g } = o || {}, _ = s || h || g;
-	return Y("rect", {
-		className: e([
+	return jsx("rect", {
+		className: cc([
 			"react-flow__minimap-node",
 			{ selected: p },
 			u
@@ -2989,10 +2988,10 @@ function Zr({ id: t, x: n, y: r, width: i, height: a, style: o, color: s, stroke
 		onClick: m ? (e) => m(e, t) : void 0
 	});
 }
-var Qr = U(Zr), $r = (e) => e.nodes.map((e) => e.id), ei = (e) => e instanceof Function ? e : () => e;
-function ti({ nodeStrokeColor: e, nodeColor: t, nodeClassName: n = "", nodeBorderRadius: r = 5, nodeStrokeWidth: i, nodeComponent: a = Qr, onClick: o }) {
-	let s = Q($r, Z), c = ei(t), l = ei(e), u = ei(n), d = typeof window > "u" || window.chrome ? "crispEdges" : "geometricPrecision";
-	return Y(De, { children: s.map((e) => Y(ri, {
+var MiniMapNode = memo(MiniMapNodeComponent), selectorNodeIds = (e) => e.nodes.map((e) => e.id), getAttrFunction = (e) => e instanceof Function ? e : () => e;
+function MiniMapNodes({ nodeStrokeColor: e, nodeColor: t, nodeClassName: n = "", nodeBorderRadius: r = 5, nodeStrokeWidth: i, nodeComponent: a = MiniMapNode, onClick: o }) {
+	let s = useStore(selectorNodeIds, shallow), c = getAttrFunction(t), l = getAttrFunction(e), u = getAttrFunction(n), d = typeof window > "u" || window.chrome ? "crispEdges" : "geometricPrecision";
+	return jsx(Fragment$1, { children: s.map((e) => jsx(NodeComponentWrapper, {
 		id: e,
 		nodeColorFunc: c,
 		nodeStrokeColorFunc: l,
@@ -3004,8 +3003,8 @@ function ti({ nodeStrokeColor: e, nodeColor: t, nodeClassName: n = "", nodeBorde
 		shapeRendering: d
 	}, e)) });
 }
-function ni({ id: e, nodeColorFunc: t, nodeStrokeColorFunc: n, nodeClassNameFunc: r, nodeBorderRadius: i, nodeStrokeWidth: a, shapeRendering: o, NodeComponent: s, onClick: c }) {
-	let { node: l, x: u, y: d, width: f, height: p } = Q((t) => {
+function NodeComponentWrapperInner({ id: e, nodeColorFunc: t, nodeStrokeColorFunc: n, nodeClassNameFunc: r, nodeBorderRadius: i, nodeStrokeWidth: a, shapeRendering: o, NodeComponent: s, onClick: c }) {
+	let { node: l, x: u, y: d, width: f, height: p } = useStore((t) => {
 		let n = t.nodeLookup.get(e);
 		if (!n) return {
 			node: void 0,
@@ -3014,7 +3013,7 @@ function ni({ id: e, nodeColorFunc: t, nodeStrokeColorFunc: n, nodeClassNameFunc
 			width: 0,
 			height: 0
 		};
-		let r = n.internals.userNode, { x: i, y: a } = n.internals.positionAbsolute, { width: o, height: s } = I(r);
+		let r = n.internals.userNode, { x: i, y: a } = n.internals.positionAbsolute, { width: o, height: s } = getNodeDimensions(r);
 		return {
 			node: r,
 			x: i,
@@ -3022,8 +3021,8 @@ function ni({ id: e, nodeColorFunc: t, nodeStrokeColorFunc: n, nodeClassNameFunc
 			width: o,
 			height: s
 		};
-	}, Z);
-	return !l || l.hidden || !pe(l) ? null : Y(s, {
+	}, shallow);
+	return !l || l.hidden || !nodeHasDimensions(l) ? null : jsx(s, {
 		x: u,
 		y: d,
 		width: f,
@@ -3040,7 +3039,7 @@ function ni({ id: e, nodeColorFunc: t, nodeStrokeColorFunc: n, nodeClassNameFunc
 		id: l.id
 	});
 }
-var ri = U(ni), ii = U(ti), ai = 200, oi = 150, si = (e) => !e.hidden, ci = (e) => {
+var NodeComponentWrapper = memo(NodeComponentWrapperInner), MiniMapNodes$1 = memo(MiniMapNodes), defaultWidth = 200, defaultHeight = 150, filterHidden = (e) => !e.hidden, selector$1 = (e) => {
 	let t = {
 		x: -e.transform[0] / e.transform[2],
 		y: -e.transform[1] / e.transform[2],
@@ -3049,7 +3048,7 @@ var ri = U(ni), ii = U(ti), ai = 200, oi = 150, si = (e) => !e.hidden, ci = (e)
 	};
 	return {
 		viewBB: t,
-		boundingRect: e.nodeLookup.size > 0 ? E(F(e.nodeLookup, { filter: si }), t) : t,
+		boundingRect: e.nodeLookup.size > 0 ? getBoundsOfRects(getInternalNodesBounds(e.nodeLookup, { filter: filterHidden }), t) : t,
 		rfId: e.rfId,
 		panZoom: e.panZoom,
 		translateExtent: e.translateExtent,
@@ -3057,20 +3056,20 @@ var ri = U(ni), ii = U(ti), ai = 200, oi = 150, si = (e) => !e.hidden, ci = (e)
 		flowHeight: e.height,
 		ariaLabelConfig: e.ariaLabelConfig
 	};
-}, li = "react-flow__minimap-desc";
-function ui({ style: t, className: n, nodeStrokeColor: r, nodeColor: i, nodeClassName: a = "", nodeBorderRadius: o = 5, nodeStrokeWidth: s, nodeComponent: c, bgColor: l, maskColor: d, maskStrokeColor: f, maskStrokeWidth: p, position: m = "bottom-right", onClick: h, onNodeClick: g, pannable: _ = !1, zoomable: v = !1, ariaLabel: y, inversePan: b, zoomStep: x = 1, offsetScale: S = 5 }) {
-	let C = $(), w = q(null), { boundingRect: T, viewBB: E, rfId: D, panZoom: O, translateExtent: k, flowWidth: A, flowHeight: j, ariaLabelConfig: M } = Q(ci, Z), N = t?.width ?? ai, P = t?.height ?? oi, F = T.width / N, ee = T.height / P, I = Math.max(F, ee), L = I * N, R = I * P, z = S * I, B = T.x - (L - T.width) / 2 - z, V = T.y - (R - T.height) / 2 - z, H = L + z * 2, te = R + z * 2, ne = `${li}-${D}`, re = q(0), ie = q();
-	re.current = I, G(() => {
-		if (w.current && O) return ie.current = u({
+}, ARIA_LABEL_KEY = "react-flow__minimap-desc";
+function MiniMapComponent({ style: t, className: n, nodeStrokeColor: r, nodeColor: i, nodeClassName: a = "", nodeBorderRadius: o = 5, nodeStrokeWidth: s, nodeComponent: c, bgColor: l, maskColor: d, maskStrokeColor: f, maskStrokeWidth: p, position: m = "bottom-right", onClick: h, onNodeClick: g, pannable: _ = !1, zoomable: v = !1, ariaLabel: y, inversePan: b, zoomStep: x = 1, offsetScale: S = 5 }) {
+	let C = useStoreApi(), w = useRef(null), { boundingRect: T, viewBB: E, rfId: D, panZoom: O, translateExtent: k, flowWidth: A, flowHeight: j, ariaLabelConfig: M } = useStore(selector$1, shallow), N = t?.width ?? defaultWidth, P = t?.height ?? defaultHeight, F = T.width / N, I = T.height / P, L = Math.max(F, I), R = L * N, z = L * P, B = S * L, V = T.x - (R - T.width) / 2 - B, H = T.y - (z - T.height) / 2 - B, U = R + B * 2, W = z + B * 2, G = `${ARIA_LABEL_KEY}-${D}`, K = useRef(0), q = useRef();
+	K.current = L, useEffect(() => {
+		if (w.current && O) return q.current = XYMinimap({
 			domNode: w.current,
 			panZoom: O,
 			getTransform: () => C.getState().transform,
-			getViewScale: () => re.current
+			getViewScale: () => K.current
 		}), () => {
-			ie.current?.destroy();
+			q.current?.destroy();
 		};
-	}, [O]), G(() => {
-		ie.current?.update({
+	}, [O]), useEffect(() => {
+		q.current?.update({
 			translateExtent: k,
 			width: A,
 			height: j,
@@ -3088,46 +3087,46 @@ function ui({ style: t, className: n, nodeStrokeColor: r, nodeColor: i, nodeClas
 		A,
 		j
 	]);
-	let ae = h ? (e) => {
-		let [t, n] = ie.current?.pointer(e) || [0, 0];
+	let J = h ? (e) => {
+		let [t, n] = q.current?.pointer(e) || [0, 0];
 		h(e, {
 			x: t,
 			y: n
 		});
-	} : void 0, oe = g ? W((e, t) => {
+	} : void 0, Y = g ? useCallback((e, t) => {
 		let n = C.getState().nodeLookup.get(t).internals.userNode;
 		g(e, n);
-	}, []) : void 0, se = y ?? M["minimap.ariaLabel"];
-	return Y(Ue, {
+	}, []) : void 0, X = y ?? M["minimap.ariaLabel"];
+	return jsx(Panel, {
 		position: m,
 		style: {
 			...t,
 			"--xy-minimap-background-color-props": typeof l == "string" ? l : void 0,
 			"--xy-minimap-mask-background-color-props": typeof d == "string" ? d : void 0,
 			"--xy-minimap-mask-stroke-color-props": typeof f == "string" ? f : void 0,
-			"--xy-minimap-mask-stroke-width-props": typeof p == "number" ? p * I : void 0,
+			"--xy-minimap-mask-stroke-width-props": typeof p == "number" ? p * L : void 0,
 			"--xy-minimap-node-background-color-props": typeof i == "string" ? i : void 0,
 			"--xy-minimap-node-stroke-color-props": typeof r == "string" ? r : void 0,
 			"--xy-minimap-node-stroke-width-props": typeof s == "number" ? s : void 0
 		},
-		className: e(["react-flow__minimap", n]),
+		className: cc(["react-flow__minimap", n]),
 		"data-testid": "rf__minimap",
-		children: X("svg", {
+		children: jsxs("svg", {
 			width: N,
 			height: P,
-			viewBox: `${B} ${V} ${H} ${te}`,
+			viewBox: `${V} ${H} ${U} ${W}`,
 			className: "react-flow__minimap-svg",
 			role: "img",
-			"aria-labelledby": ne,
+			"aria-labelledby": G,
 			ref: w,
-			onClick: ae,
+			onClick: J,
 			children: [
-				se && Y("title", {
-					id: ne,
-					children: se
+				X && jsx("title", {
+					id: G,
+					children: X
 				}),
-				Y(ii, {
-					onClick: oe,
+				jsx(MiniMapNodes$1, {
+					onClick: Y,
 					nodeColor: i,
 					nodeStrokeColor: r,
 					nodeBorderRadius: o,
@@ -3135,9 +3134,9 @@ function ui({ style: t, className: n, nodeStrokeColor: r, nodeColor: i, nodeClas
 					nodeStrokeWidth: s,
 					nodeComponent: c
 				}),
-				Y("path", {
+				jsx("path", {
 					className: "react-flow__minimap-mask",
-					d: `M${B - z},${V - z}h${H + z * 2}v${te + z * 2}h${-H - z * 2}z
+					d: `M${V - B},${H - B}h${U + B * 2}v${W + B * 2}h${-U - B * 2}z
         M${E.x},${E.y}h${E.width}v${E.height}h${-E.width}z`,
 					fillRule: "evenodd",
 					pointerEvents: "none"
@@ -3146,15 +3145,15 @@ function ui({ style: t, className: n, nodeStrokeColor: r, nodeColor: i, nodeClas
 		})
 	});
 }
-ui.displayName = "MiniMap", U(ui);
-var di = (e) => (t) => e ? `${Math.max(1 / t.transform[2], 1)}` : void 0, fi = {
-	[o.Line]: "right",
-	[o.Handle]: "bottom-right"
+MiniMapComponent.displayName = "MiniMap", memo(MiniMapComponent);
+var scaleSelector = (e) => (t) => e ? `${Math.max(1 / t.transform[2], 1)}` : void 0, defaultPositions = {
+	[ResizeControlVariant.Line]: "right",
+	[ResizeControlVariant.Handle]: "bottom-right"
 };
-function pi({ nodeId: t, position: n, variant: r = o.Handle, className: i, style: a = void 0, children: s, color: c, minWidth: l = 10, minHeight: u = 10, maxWidth: d = Number.MAX_VALUE, maxHeight: p = Number.MAX_VALUE, keepAspectRatio: m = !1, resizeDirection: h, autoScale: g = !0, shouldResize: _, onResizeStart: v, onResize: y, onResizeEnd: b }) {
-	let x = qt(), C = typeof t == "string" ? t : x, w = $(), T = q(null), E = r === o.Handle, D = Q(W(di(E && g), [E, g]), Z), O = q(null), k = n ?? fi[r];
-	return G(() => {
-		if (!(!T.current || !C)) return O.current ||= f({
+function ResizeControl({ nodeId: t, position: n, variant: r = ResizeControlVariant.Handle, className: i, style: a = void 0, children: s, color: c, minWidth: l = 10, minHeight: u = 10, maxWidth: d = Number.MAX_VALUE, maxHeight: p = Number.MAX_VALUE, keepAspectRatio: m = !1, resizeDirection: h, autoScale: g = !0, shouldResize: _, onResizeStart: v, onResize: y, onResizeEnd: b }) {
+	let x = useNodeId(), C = typeof t == "string" ? t : x, w = useStoreApi(), T = useRef(null), E = r === ResizeControlVariant.Handle, D = useStore(useCallback(scaleSelector(E && g), [E, g]), shallow), O = useRef(null), k = n ?? defaultPositions[r];
+	return useEffect(() => {
+		if (!(!T.current || !C)) return O.current ||= XYResizer({
 			domNode: T.current,
 			nodeId: C,
 			getStoreItems: () => {
@@ -3174,13 +3173,13 @@ function pi({ nodeId: t, position: n, variant: r = o.Handle, className: i, style
 					y: e.y
 				}, c = r.get(C);
 				if (c && c.expandParent && c.parentId) {
-					let t = c.origin ?? a, n = e.width ?? c.measured.width ?? 0, l = e.height ?? c.measured.height ?? 0, u = te([{
+					let t = c.origin ?? a, n = e.width ?? c.measured.width ?? 0, l = e.height ?? c.measured.height ?? 0, u = handleExpandParent([{
 						id: c.id,
 						parentId: c.parentId,
 						rect: {
 							width: n,
 							height: l,
-							...S({
+							...evaluateAbsolutePosition({
 								x: e.x ?? c.position.x,
 								y: e.y ?? c.position.y
 							}, {
@@ -3261,8 +3260,8 @@ function pi({ nodeId: t, position: n, variant: r = o.Handle, className: i, style
 		y,
 		b,
 		_
-	]), Y("div", {
-		className: e([
+	]), jsx("div", {
+		className: cc([
 			"react-flow__resize-control",
 			"nodrag",
 			...k.split("-"),
@@ -3278,6 +3277,5 @@ function pi({ nodeId: t, position: n, variant: r = o.Handle, className: i, style
 		children: s
 	});
 }
-U(pi);
-//#endregion
-export { Vr as Background, Lr as BackgroundVariant, Mn as BaseEdge, Xr as Controls, Mr as EdgeLabelRenderer, Zt as Handle, Er as ReactFlowProvider, Ar as index, Pr as useEdgesState, Nr as useNodesState, Ot as useReactFlow };
+memo(ResizeControl);
+export { Background, BackgroundVariant, BaseEdge, Controls, EdgeLabelRenderer, Handle, ReactFlowProvider, index, useEdgesState, useNodesState, useReactFlow };