likec4 1.59.2 → 1.59.3

package/__app__/src/chunks/libs/@xyflow/react.mjs

@@ -13,9 +13,9 @@ function cc(e) {
 	return t;
 }
 //#endregion
-//#region ../../node_modules/.pnpm/@xyflow+system@0.0.77/node_modules/@xyflow/system/dist/esm/index.js
+//#region ../../node_modules/.pnpm/@xyflow+system@0.0.82/node_modules/@xyflow/system/dist/esm/index.js
 var T = {
-	error001: (e = "react") => `Seems like you have not used zustand provider as an ancestor. Help: https://${e}flow.dev/error#001`,
+	error001: (e = "react") => `Seems like you have not used ${e === "svelte" ? "SvelteFlowProvider" : "ReactFlowProvider"} as an ancestor. Help: https://${e}flow.dev/error#001`,
 	error002: () => "It looks like you've created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them.",
 	error003: (e) => `Node type "${e}" not found. Using fallback type "default".`,
 	error004: () => "The parent container needs a width and a height to render the graph.",
@@ -88,35 +88,35 @@ var I = {
 	[F.Right]: F.Left,
 	[F.Top]: F.Bottom,
 	[F.Bottom]: F.Top
-};
-function getConnectionStatus(e) {
-	return e === null ? null : e ? "valid" : "invalid";
-}
-var isEdgeBase = (e) => "id" in e && "source" in e && "target" in e, isNodeBase = (e) => "id" in e && "position" in e && !("source" in e) && !("target" in e), isInternalNodeBase = (e) => "id" in e && "internals" in e && !("source" in e) && !("target" in e), getNodePositionWithOrigin = (e, t = [0, 0]) => {
+}, isEdgeBase = (e) => !!e && typeof e == "object" && "id" in e && "source" in e && "target" in e, isNodeBase = (e) => !!e && typeof e == "object" && "id" in e && "position" in e && !("source" in e) && !("target" in e), isInternalNodeBase = (e) => !!e && typeof e == "object" && "id" in e && "internals" in e && !("source" in e) && !("target" in e), getNodePositionWithOrigin = (e, t = [0, 0]) => {
 	let { width: n, height: r } = getNodeDimensions(e), i = e.origin ?? t, a = n * i[0], o = r * i[1];
 	return {
 		x: e.position.x - a,
 		y: e.position.y - o
 	};
-}, getNodesBounds = (e, t = { nodeOrigin: [0, 0] }) => e.length === 0 ? {
-	x: 0,
-	y: 0,
-	width: 0,
-	height: 0
-} : boxToRect(e.reduce((e, n) => {
-	let r = typeof n == "string", i = !t.nodeLookup && !r ? n : void 0;
-	return t.nodeLookup && (i = r ? t.nodeLookup.get(n) : isInternalNodeBase(n) ? n : t.nodeLookup.get(n.id)), getBoundsOfBoxes(e, i ? nodeToBox(i, t.nodeOrigin) : {
+}, getNodesBounds = (e, t = { nodeOrigin: [0, 0] }) => {
+	if (e.length === 0) return {
 		x: 0,
 		y: 0,
-		x2: 0,
-		y2: 0
+		width: 0,
+		height: 0
+	};
+	let n = !1, r = e.reduce((e, r) => {
+		let i = typeof r == "string", a = !t.nodeLookup && !i ? r : void 0;
+		return t.nodeLookup && (a = i ? t.nodeLookup.get(r) : isInternalNodeBase(r) ? r : t.nodeLookup.get(r.id)), a ? (n = !0, getBoundsOfBoxes(e, nodeToBox(a, t.nodeOrigin))) : e;
+	}, {
+		x: Infinity,
+		y: Infinity,
+		x2: -Infinity,
+		y2: -Infinity
 	});
-}, {
-	x: Infinity,
-	y: Infinity,
-	x2: -Infinity,
-	y2: -Infinity
-})), getInternalNodesBounds = (e, t = {}) => {
+	return n ? boxToRect(r) : {
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	};
+}, getInternalNodesBounds = (e, t = {}) => {
 	let n = {
 		x: Infinity,
 		y: Infinity,
@@ -136,22 +136,14 @@ var isEdgeBase = (e) => "id" in e && "source" in e && "target" in e, isNodeBase
 	0,
 	1
 ], a = !1, o = !1) => {
-	let s = {
-		...pointToRendererPoint(t, [
-			n,
-			r,
-			i
-		]),
-		width: t.width / i,
-		height: t.height / i
-	}, c = [];
+	let s = (t.x - n) / i, c = (t.y - r) / i, l = t.width / i, u = t.height / i, d = [];
 	for (let t of e.values()) {
 		let { measured: e, selectable: n = !0, hidden: r = !1 } = t;
 		if (o && !n || r) continue;
-		let i = e.width ?? t.width ?? t.initialWidth ?? null, l = e.height ?? t.height ?? t.initialHeight ?? null, u = getOverlappingArea(s, nodeToRect(t)), d = (i ?? 0) * (l ?? 0), f = a && u > 0;
-		(!t.internals.handleBounds || f || u >= d || t.dragging) && c.push(t);
+		let i = e.width ?? t.width ?? t.initialWidth ?? 0, f = e.height ?? t.height ?? t.initialHeight ?? 0, { x: p, y: m } = t.internals.positionAbsolute, h = getRectsOverlappingArea(s, c, l, u, p, m, i, f), g = i * f, _ = a && h > 0;
+		(!t.internals.handleBounds || _ || h >= g || t.dragging) && d.push(t);
 	}
-	return c;
+	return d;
 }, getConnectedEdges = (e, t) => {
 	let n = /* @__PURE__ */ new Set();
 	return e.forEach((e) => {
@@ -161,7 +153,12 @@ var isEdgeBase = (e) => "id" in e && "source" in e && "target" in e, isNodeBase
 function getFitViewNodes(e, t) {
 	let n = /* @__PURE__ */ new Map(), r = t?.nodes ? new Set(t.nodes.map((e) => e.id)) : null;
 	return e.forEach((e) => {
-		e.measured.width && e.measured.height && (t?.includeHiddenNodes || !e.hidden) && (!r || r.has(e.id)) && n.set(e.id, e);
+		let i;
+		if (t?.includeHiddenNodes) {
+			let { width: t, height: n } = getNodeDimensions(e);
+			i = t > 0 && n > 0;
+		} else i = !!(e.measured.width && e.measured.height && !e.hidden);
+		i && (!r || r.has(e.id)) && n.set(e.id, e);
 	}), n;
 }
 async function fitViewport({ nodes: e, width: t, height: n, panZoom: r, minZoom: i, maxZoom: a }, o) {
@@ -178,12 +175,13 @@ function calculateNodePosition({ nodeId: e, nextPosition: t, nodeLookup: n, node
 		x: 0,
 		y: 0
 	}, u = o.origin ?? r, d = o.extent || i;
-	if (o.extent === "parent" && !o.expandParent) if (!s) a?.("005", T.error005());
-	else {
-		let e = s.measured.width, t = s.measured.height;
-		e && t && (d = [[c, l], [c + e, l + t]]);
-	}
-	else s && isCoordinateExtent(o.extent) && (d = [[o.extent[0][0] + c, o.extent[0][1] + l], [o.extent[1][0] + c, o.extent[1][1] + l]]);
+	if (o.extent === "parent" && !o.expandParent) {
+		if (!s) a?.("005", T.error005());
+		else {
+			let { width: e, height: t } = getNodeDimensions(s);
+			e && t && (d = [[c, l], [c + e, l + t]]);
+		}
+	} else s && isCoordinateExtent(o.extent) && (d = [[o.extent[0][0] + c, o.extent[0][1] + l], [o.extent[1][0] + c, o.extent[1][1] + l]]);
 	let f = isCoordinateExtent(d) ? clampPosition(t, d, o.measured) : t;
 	return (o.measured.width === void 0 || o.measured.height === void 0) && a?.("015", T.error015()), {
 		position: {
@@ -260,10 +258,10 @@ var calcAutoPanVelocity = (e, t, n) => e < t ? clamp(Math.abs(e - t), 1, t) / t
 		x2: n + (e.measured?.width ?? e.width ?? e.initialWidth ?? 0),
 		y2: r + (e.measured?.height ?? e.height ?? e.initialHeight ?? 0)
 	};
-}, getBoundsOfRects = (e, t) => boxToRect(getBoundsOfBoxes(rectToBox(e), rectToBox(t))), getOverlappingArea = (e, t) => {
-	let n = Math.max(0, Math.min(e.x + e.width, t.x + t.width) - Math.max(e.x, t.x)), r = Math.max(0, Math.min(e.y + e.height, t.y + t.height) - Math.max(e.y, t.y));
-	return Math.ceil(n * r);
-}, isRectObject = (e) => isNumeric(e.width) && isNumeric(e.height) && isNumeric(e.x) && isNumeric(e.y), isNumeric = (e) => !isNaN(e) && isFinite(e), createDevWarn = (e, t) => (e, t) => {}, snapPosition = (e, t = [1, 1]) => ({
+}, getBoundsOfRects = (e, t) => boxToRect(getBoundsOfBoxes(rectToBox(e), rectToBox(t))), getRectsOverlappingArea = (e, t, n, r, i, a, o, s) => {
+	let c = Math.max(0, Math.min(e + n, i + o) - Math.max(e, i)), l = Math.max(0, Math.min(t + r, a + s) - Math.max(t, a));
+	return Math.ceil(c * l);
+}, getOverlappingArea = (e, t) => getRectsOverlappingArea(e.x, e.y, e.width, e.height, t.x, t.y, t.width, t.height), isRectObject = (e) => isNumeric(e.width) && isNumeric(e.height) && isNumeric(e.x) && isNumeric(e.y), isNumeric = (e) => !isNaN(e) && isFinite(e), createDevWarn = (e, t) => (e, t) => {}, snapPosition = (e, t = [1, 1]) => ({
 	x: t[0] * Math.round(e.x / t[0]),
 	y: t[1] * Math.round(e.y / t[1])
 }), pointToRendererPoint = ({ x: e, y: t }, [n, r, i], a = !1, o = [1, 1]) => {
@@ -397,6 +395,9 @@ function mergeAriaLabelConfig(e) {
 		...e || {}
 	};
 }
+function getConnectionStatus(e) {
+	return e === null ? null : e ? "valid" : "invalid";
+}
 function getPointerPosition(e, { snapGrid: t = [0, 0], snapToGrid: n = !1, transform: r, containerBounds: i }) {
 	let { x: a, y: o } = getEventPosition(e), s = pointToRendererPoint({
 		x: a - (i?.left ?? 0),
@@ -780,9 +781,7 @@ function getNodeToolbarTransform(e, t, n, r, i) {
 		case F.Bottom:
 			o[1] = (e.y + e.height) * t.zoom + t.y + r, s[1] = 0;
 			break;
-		case F.Left:
-			o = [e.x * t.zoom + t.x - r, (e.y + e.height * a) * t.zoom + t.y], s = [-100, -100 * a];
-			break;
+		case F.Left: o = [e.x * t.zoom + t.x - r, (e.y + e.height * a) * t.zoom + t.y], s = [-100, -100 * a];
 	}
 	return `translate(${o[0]}px, ${o[1]}px) translate(${s[0]}%, ${s[1]}%)`;
 }
@@ -968,7 +967,10 @@ function updateNodeInternals(e, t, n, r, i, a, o) {
 		let s = getDimensions(r.nodeElement), u = e.measured.width !== s.width || e.measured.height !== s.height;
 		if (s.width && s.height && (u || !e.internals.handleBounds || r.force)) {
 			let p = r.nodeElement.getBoundingClientRect(), m = isCoordinateExtent(e.extent) ? e.extent : a, { positionAbsolute: h } = e.internals;
-			e.parentId && e.extent === "parent" ? h = clampPositionToParent(h, s, t.get(e.parentId)) : m && (h = clampPosition(h, m, s));
+			if (e.parentId && e.extent === "parent") {
+				let n = t.get(e.parentId);
+				n && (h = clampPositionToParent(h, s, n));
+			} else m && (h = clampPosition(h, m, s));
 			let g = {
 				...e,
 				measured: s,
@@ -1488,9 +1490,9 @@ function createPanOnScrollHandler({ zoomPanValues: e, noWheelClassName: t, d3Sel
 		let p = d.deltaMode === 1 ? 20 : 1, m = a === A.Vertical ? 0 : d.deltaX * p, h = a === A.Horizontal ? 0 : d.deltaY * p;
 		!isMacOs() && d.shiftKey && a !== A.Vertical && (m = d.deltaY * p, h = 0), r.translateBy(n, -(m / f) * o, -(h / f) * o, { internal: !0 });
 		let g = transformToViewport(n.property("__zoom"));
-		clearTimeout(e.panScrollTimeout), e.isPanScrolling ? (l?.(d, g), e.panScrollTimeout = setTimeout(() => {
+		clearTimeout(e.panScrollTimeout), e.isPanScrolling ? l?.(d, g) : (e.isPanScrolling = !0, c?.(d, g)), e.panScrollTimeout = setTimeout(() => {
 			u?.(d, g), e.isPanScrolling = !1;
-		}, 150)) : (e.isPanScrolling = !0, c?.(d, g));
+		}, 150);
 	};
 }
 function createZoomOnScrollHandler({ noWheelClassName: e, preventScrolling: t, d3ZoomHandler: n }) {
@@ -1526,15 +1528,15 @@ function createPanZoomEndHandler({ zoomPanValues: e, panOnDrag: t, panOnScroll:
 		}
 	};
 }
-function createFilter({ zoomActivationKeyPressed: e, zoomOnScroll: t, zoomOnPinch: n, panOnDrag: r, panOnScroll: i, zoomOnDoubleClick: a, userSelectionActive: o, noWheelClassName: s, noPanClassName: c, lib: l, connectionInProgress: u }) {
-	return (d) => {
-		let f = e || t, p = n && d.ctrlKey, m = d.type === "wheel";
-		if (d.button === 1 && d.type === "mousedown" && (isWrappedWithClass(d, `${l}-flow__node`) || isWrappedWithClass(d, `${l}-flow__edge`))) return !0;
-		if (!r && !f && !i && !a && !n || o || u && !m || isWrappedWithClass(d, s) && m || isWrappedWithClass(d, c) && (!m || i && m && !e) || !n && d.ctrlKey && m) return !1;
-		if (!n && d.type === "touchstart" && d.touches?.length > 1) return d.preventDefault(), !1;
-		if (!f && !i && !p && m || !r && (d.type === "mousedown" || d.type === "touchstart") || Array.isArray(r) && !r.includes(d.button) && d.type === "mousedown") return !1;
-		let h = Array.isArray(r) && r.includes(d.button) || !d.button || d.button <= 1;
-		return (!d.ctrlKey || m) && h;
+function createFilter({ panActivationKeyPressed: e, zoomActivationKeyPressed: t, zoomOnScroll: n, zoomOnPinch: r, panOnDrag: i, panOnScroll: a, zoomOnDoubleClick: o, userSelectionActive: s, noWheelClassName: c, noPanClassName: l, lib: u, connectionInProgress: d }) {
+	return (f) => {
+		let p = t || n, m = r && f.ctrlKey, h = f.type === "wheel";
+		if (f.button === 1 && f.type === "mousedown" && (isWrappedWithClass(f, `${u}-flow__node`) || isWrappedWithClass(f, `${u}-flow__edge`) || isWrappedWithClass(f, `${u}-flow__selection`) || isWrappedWithClass(f, `${u}-flow__nodesselection`))) return !0;
+		if (!i && !p && !a && !o && !r || s || d && !h || isWrappedWithClass(f, c) && h || isWrappedWithClass(f, l) && (!h || a && h && !t) || !r && f.ctrlKey && h) return !1;
+		if (!r && f.type === "touchstart" && f.touches?.length > 1) return f.preventDefault(), !1;
+		if (!p && !a && !m && h || !i && (f.type === "mousedown" || f.type === "touchstart") || Array.isArray(i) && !i.includes(f.button) && f.type === "mousedown") return !1;
+		let g = Array.isArray(i) && i.includes(f.button) || !f.button || f.button <= 1;
+		return (!f.ctrlKey || h || e) && g;
 	};
 }
 function XYPanZoom({ domNode: e, minZoom: n, maxZoom: r, translateExtent: i, viewport: l, onPanZoom: u, onPanZoomStart: d, onPanZoomEnd: f, onDraggingChange: p }) {
@@ -1546,28 +1548,33 @@ function XYPanZoom({ domNode: e, minZoom: n, maxZoom: r, translateExtent: i, vie
 		timerId: void 0,
 		panScrollTimeout: void 0,
 		isPanScrolling: !1
-	}, h = e.getBoundingClientRect(), g = o().scaleExtent([n, r]).translateExtent(i), _ = c(e).call(g);
+	}, h = e.getBoundingClientRect(), g = [[0, 0], [h.width, h.height]];
+	(typeof ResizeObserver < "u" ? new ResizeObserver((e) => {
+		let t = e[0];
+		t && (g = [[0, 0], [t.contentRect.width, t.contentRect.height]]);
+	}) : null)?.observe(e);
+	let _ = o().extent(() => g).scaleExtent([n, r]).translateExtent(i), v = c(e).call(_);
 	setViewportConstrained({
 		x: l.x,
 		y: l.y,
 		zoom: clamp(l.zoom, n, r)
 	}, [[0, 0], [h.width, h.height]], i);
-	let v = _.on("wheel.zoom"), y = _.on("dblclick.zoom");
-	g.wheelDelta(wheelDelta);
+	let y = v.on("wheel.zoom"), b = v.on("dblclick.zoom");
+	_.wheelDelta(wheelDelta);
 	async function setTransform(e, t) {
-		return _ ? new Promise((n) => {
-			g?.interpolate(t?.interpolate === "linear" ? s : a).transform(getD3Transition(_, t?.duration, t?.ease, () => n(!0)), e);
+		return v ? new Promise((n) => {
+			_?.interpolate(t?.interpolate === "linear" ? s : a).transform(getD3Transition(v, t?.duration, t?.ease, () => n(!0)), e);
 		}) : !1;
 	}
-	function update({ noWheelClassName: e, noPanClassName: t, onPaneContextMenu: n, userSelectionActive: r, panOnScroll: i, panOnDrag: a, panOnScrollMode: o, panOnScrollSpeed: s, preventScrolling: c, zoomOnPinch: l, zoomOnScroll: h, zoomOnDoubleClick: b, zoomActivationKeyPressed: x, lib: S, onTransformChange: C, connectionInProgress: w, paneClickDistance: T, selectionOnDrag: E }) {
+	function update({ noWheelClassName: e, noPanClassName: t, onPaneContextMenu: n, userSelectionActive: r, panOnScroll: i, panOnDrag: a, panOnScrollMode: o, panOnScrollSpeed: s, preventScrolling: c, zoomOnPinch: l, zoomOnScroll: h, zoomOnDoubleClick: g, panActivationKeyPressed: x = !1, zoomActivationKeyPressed: S, lib: C, onTransformChange: w, connectionInProgress: T, paneClickDistance: E, selectionOnDrag: D }) {
 		r && !m.isZoomingOrPanning && destroy();
-		let D = i && !x && !r;
-		g.clickDistance(E ? Infinity : !isNumeric(T) || T < 0 ? 0 : T);
-		let O = D ? createPanOnScrollHandler({
+		let O = i && !S && !r;
+		_.clickDistance(D ? Infinity : !isNumeric(E) || E < 0 ? 0 : E);
+		let k = O ? createPanOnScrollHandler({
 			zoomPanValues: m,
 			noWheelClassName: e,
-			d3Selection: _,
-			d3Zoom: g,
+			d3Selection: v,
+			d3Zoom: _,
 			panOnScrollMode: o,
 			panOnScrollSpeed: s,
 			zoomOnPinch: l,
@@ -1577,24 +1584,24 @@ function XYPanZoom({ domNode: e, minZoom: n, maxZoom: r, translateExtent: i, vie
 		}) : createZoomOnScrollHandler({
 			noWheelClassName: e,
 			preventScrolling: c,
-			d3ZoomHandler: v
+			d3ZoomHandler: y
 		});
-		_.on("wheel.zoom", O, { passive: !1 });
-		let k = createPanZoomStartHandler({
+		v.on("wheel.zoom", k, { passive: !1 });
+		let A = createPanZoomStartHandler({
 			zoomPanValues: m,
 			onDraggingChange: p,
 			onPanZoomStart: d
 		});
-		g.on("start", k);
-		let A = createPanZoomHandler({
+		_.on("start", A);
+		let j = createPanZoomHandler({
 			zoomPanValues: m,
 			panOnDrag: a,
 			onPaneContextMenu: !!n,
 			onPanZoom: u,
-			onTransformChange: C
+			onTransformChange: w
 		});
-		g.on("zoom", A);
-		let j = createPanZoomEndHandler({
+		_.on("zoom", j);
+		let M = createPanZoomEndHandler({
 			zoomPanValues: m,
 			panOnDrag: a,
 			panOnScroll: i,
@@ -1602,27 +1609,28 @@ function XYPanZoom({ domNode: e, minZoom: n, maxZoom: r, translateExtent: i, vie
 			onPanZoomEnd: f,
 			onDraggingChange: p
 		});
-		g.on("end", j);
-		let M = createFilter({
-			zoomActivationKeyPressed: x,
+		_.on("end", M);
+		let N = createFilter({
+			panActivationKeyPressed: x,
+			zoomActivationKeyPressed: S,
 			panOnDrag: a,
 			zoomOnScroll: h,
 			panOnScroll: i,
-			zoomOnDoubleClick: b,
+			zoomOnDoubleClick: g,
 			zoomOnPinch: l,
 			userSelectionActive: r,
 			noPanClassName: t,
 			noWheelClassName: e,
-			lib: S,
-			connectionInProgress: w
+			lib: C,
+			connectionInProgress: T
 		});
-		g.filter(M), b ? _.on("dblclick.zoom", y) : _.on("dblclick.zoom", null);
+		_.filter(N), g ? v.on("dblclick.zoom", b) : v.on("dblclick.zoom", null);
 	}
 	function destroy() {
-		g.on("zoom", null);
+		_.on("zoom", null);
 	}
 	async function setViewportConstrained(e, t, n) {
-		let r = viewportToTransform(e), i = g?.constrain()(r, t, n);
+		let r = viewportToTransform(e), i = _?.constrain()(r, t, n);
 		return i && await setTransform(i), i;
 	}
 	async function setViewport(e, t) {
@@ -1630,13 +1638,13 @@ function XYPanZoom({ domNode: e, minZoom: n, maxZoom: r, translateExtent: i, vie
 		return await setTransform(n, t), n;
 	}
 	function syncViewport(e) {
-		if (_) {
-			let t = viewportToTransform(e), n = _.property("__zoom");
-			(n.k !== e.zoom || n.x !== e.x || n.y !== e.y) && g?.transform(_, t, null, { sync: !0 });
+		if (v) {
+			let t = viewportToTransform(e), n = v.property("__zoom");
+			(n.k !== e.zoom || n.x !== e.x || n.y !== e.y) && _?.transform(v, t, null, { sync: !0 });
 		}
 	}
 	function getViewport() {
-		let e = _ ? t(_.node()) : {
+		let e = v ? t(v.node()) : {
 			x: 0,
 			y: 0,
 			k: 1
@@ -1648,24 +1656,24 @@ function XYPanZoom({ domNode: e, minZoom: n, maxZoom: r, translateExtent: i, vie
 		};
 	}
 	async function scaleTo(e, t) {
-		return _ ? new Promise((n) => {
-			g?.interpolate(t?.interpolate === "linear" ? s : a).scaleTo(getD3Transition(_, t?.duration, t?.ease, () => n(!0)), e);
+		return v ? new Promise((n) => {
+			_?.interpolate(t?.interpolate === "linear" ? s : a).scaleTo(getD3Transition(v, t?.duration, t?.ease, () => n(!0)), e);
 		}) : !1;
 	}
 	async function scaleBy(e, t) {
-		return _ ? new Promise((n) => {
-			g?.interpolate(t?.interpolate === "linear" ? s : a).scaleBy(getD3Transition(_, t?.duration, t?.ease, () => n(!0)), e);
+		return v ? new Promise((n) => {
+			_?.interpolate(t?.interpolate === "linear" ? s : a).scaleBy(getD3Transition(v, t?.duration, t?.ease, () => n(!0)), e);
 		}) : !1;
 	}
 	function setScaleExtent(e) {
-		g?.scaleExtent(e);
+		_?.scaleExtent(e);
 	}
 	function setTranslateExtent(e) {
-		g?.translateExtent(e);
+		_?.translateExtent(e);
 	}
 	function setClickDistance(e) {
 		let t = !isNumeric(e) || e < 0 ? 0 : e;
-		g?.clickDistance(t);
+		_?.clickDistance(t);
 	}
 	return {
 		update,
@@ -1866,7 +1874,7 @@ function XYResizer({ domNode: e, nodeId: t, getStoreItems: r, onChange: i, onEnd
 	};
 }
 //#endregion
-//#region ../../node_modules/.pnpm/zustand@4.5.7_@types+react@19.2.17_immer@11.1.9_react@19.2.7/node_modules/zustand/esm/vanilla.mjs
+//#region ../../node_modules/.pnpm/zustand@4.5.7_@types+react@19.2.18_immer@11.1.18_react@19.2.8/node_modules/zustand/esm/vanilla.mjs
 var createStoreImpl = (e) => {
 	let t, n = /* @__PURE__ */ new Set(), setState = (e, r) => {
 		let i = typeof e == "function" ? e(t) : e;
@@ -1894,7 +1902,7 @@ var createWithEqualityFnImpl = (e, t) => {
 	return Object.assign(useBoundStoreWithEqualityFn, n), useBoundStoreWithEqualityFn;
 }, createWithEqualityFn = (e, t) => e ? createWithEqualityFnImpl(e, t) : createWithEqualityFnImpl;
 //#endregion
-//#region ../../node_modules/.pnpm/zustand@4.5.7_@types+react@19.2.17_immer@11.1.9_react@19.2.7/node_modules/zustand/esm/shallow.mjs
+//#region ../../node_modules/.pnpm/zustand@4.5.7_@types+react@19.2.18_immer@11.1.18_react@19.2.8/node_modules/zustand/esm/shallow.mjs
 function shallow$1(e, t) {
 	if (Object.is(e, t)) return !0;
 	if (typeof e != "object" || !e || typeof t != "object" || !t) return !1;
@@ -1914,7 +1922,7 @@ function shallow$1(e, t) {
 	return !0;
 }
 //#endregion
-//#region ../../node_modules/.pnpm/@xyflow+react@12.11.0_@types+react-dom@19.2.3_@types+react@19.2.17__@types+react@19.2.1_3f98c81d1be2f678246222686ea3d156/node_modules/@xyflow/react/dist/esm/index.js
+//#region ../../node_modules/.pnpm/@xyflow+react@12.11.6_@types+react-dom@19.2.5_@types+react@19.2.18__@types+react@19.2.1_9d4149e5c73352343a0f166391aa9cf0/node_modules/@xyflow/react/dist/esm/index.js
 var X = u(null), ne = X.Provider, re = T.error001("react");
 function useStore(e, t) {
 	let n = m(X);
@@ -1967,25 +1975,29 @@ function A11yDescriptions({ rfId: e, disableKeyboardA11y: t }) {
 		!t && x(AriaLiveMessage, { rfId: e })
 	] });
 }
-var Z = d(({ position: e = "top-left", children: t, className: n, style: r, ...i }, a) => x("div", {
-	className: cc([
-		"react-flow__panel",
-		n,
-		...`${e}`.split("-")
-	]),
-	style: r,
-	ref: a,
-	...i,
-	children: t
-}));
+var Z = d(({ position: e = "top-left", children: t, className: n, style: r, ...i }, a) => {
+	let o = `${e}`.split("-");
+	return x("div", {
+		className: cc([
+			"react-flow__panel",
+			n,
+			...o
+		]),
+		style: r,
+		ref: a,
+		...i,
+		children: t
+	});
+});
 Z.displayName = "Panel";
+var le = "https://reactflow.dev?utm_source=attribution";
 function Attribution({ proOptions: e, position: t = "bottom-right" }) {
-	return e?.hideAttribution ? null : x(Z, {
+	return h(() => {}, []), e?.hideAttribution ? null : x(Z, {
 		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",
+		"data-message": `Please only hide this attribution when you are subscribed to React Flow Pro: ${le}`,
 		children: x("a", {
-			href: "https://reactflow.dev",
+			href: le,
 			target: "_blank",
 			rel: "noopener noreferrer",
 			"aria-label": "React Flow attribution",
@@ -1993,7 +2005,7 @@ function Attribution({ proOptions: e, position: t = "bottom-right" }) {
 		})
 	});
 }
-var selector$m = (e) => {
+var selector$l = (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);
@@ -2002,11 +2014,11 @@ var selector$m = (e) => {
 		selectedEdges: n
 	};
 }, selectId = (e) => e.id;
-function areEqual(e, t) {
+function areEqual$1(e, t) {
 	return shallow$1(e.selectedNodes.map(selectId), t.selectedNodes.map(selectId)) && shallow$1(e.selectedEdges.map(selectId), t.selectedEdges.map(selectId));
 }
 function SelectionListenerInner({ onSelectionChange: e }) {
-	let t = useStoreApi(), { selectedNodes: n, selectedEdges: r } = useStore(selector$m, areEqual);
+	let t = useStoreApi(), { selectedNodes: n, selectedEdges: r } = useStore(selector$l, areEqual$1);
 	return h(() => {
 		let i = {
 			nodes: n,
@@ -2024,11 +2036,11 @@ function SelectionListener({ onSelectionChange: e }) {
 	let t = useStore(changeSelector);
 	return e || t ? x(SelectionListenerInner, { onSelectionChange: e }) : null;
 }
-var le = [0, 0], ue = {
+var ue = [0, 0], de = {
 	x: 0,
 	y: 0,
 	zoom: 1
-}, de = [.../* @__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) => ({
+}, fe = [.../* @__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$k = (e) => ({
 	setNodes: e.setNodes,
 	setEdges: e.setEdges,
 	setMinZoom: e.setMinZoom,
@@ -2037,9 +2049,9 @@ var le = [0, 0], ue = {
 	setNodeExtent: e.setNodeExtent,
 	reset: e.reset,
 	setDefaultNodesAndEdges: e.setDefaultNodesAndEdges
-}), fe = {
+}), pe = {
 	translateExtent: E,
-	nodeOrigin: le,
+	nodeOrigin: ue,
 	minZoom: .5,
 	maxZoom: 2,
 	elementsSelectable: !0,
@@ -2047,18 +2059,18 @@ var le = [0, 0], ue = {
 	rfId: "1"
 };
 function StoreUpdater(e) {
-	let { setNodes: t, setEdges: n, setMinZoom: r, setMaxZoom: i, setTranslateExtent: a, setNodeExtent: o, reset: s, setDefaultNodesAndEdges: c } = useStore(selector$l, shallow$1), l = useStoreApi();
+	let { setNodes: t, setEdges: n, setMinZoom: r, setMaxZoom: i, setTranslateExtent: a, setNodeExtent: o, reset: s, setDefaultNodesAndEdges: c } = useStore(selector$k, shallow$1), l = useStoreApi();
 	h(() => (c(e.defaultNodes, e.defaultEdges), () => {
-		u.current = fe, s();
+		u.current = pe, s();
 	}), []);
-	let u = v(fe);
+	let u = v(pe);
 	return h(() => {
-		for (let s of de) {
+		for (let s of fe) {
 			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: mergeAriaLabelConfig(c) }) : s === "fitView" ? l.setState({ fitViewQueued: c }) : s === "fitViewOptions" ? l.setState({ fitViewOptions: c }) : l.setState({ [s]: c }));
 		}
 		u.current = e;
-	}, de.map((t) => e[t])), null;
+	}, fe.map((t) => e[t])), null;
 }
 function getMediaQuery() {
 	return typeof window > "u" || !window.matchMedia ? null : window.matchMedia("(prefers-color-scheme: dark)");
@@ -2076,20 +2088,20 @@ function useColorModeClass(e) {
 		};
 	}, [e]), t === null ? getMediaQuery()?.matches ? "dark" : "light" : t;
 }
-var pe = typeof document < "u" ? document : null;
+var me = typeof document < "u" ? document : null;
 function useKeyPress(e = null, t = {
-	target: pe,
+	target: me,
 	actInsideInputWithModifier: !0
 }) {
 	let [n, r] = y(!1), i = v(!1), a = v(/* @__PURE__ */ new Set([])), [o, s] = _(() => {
 		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"));
+			let t = (Array.isArray(e) ? e : [e]).filter((e) => typeof e == "string").map((e) => e.replace(/\+/g, "\n").replace("\n\n", "\n+").split("\n"));
 			return [t, t.reduce((e, t) => e.concat(...t), [])];
 		}
 		return [[], []];
 	}, [e]);
 	return h(() => {
-		let n = t?.target ?? pe, c = t?.actInsideInputWithModifier ?? !0;
+		let n = t?.target ?? me, c = t?.actInsideInputWithModifier ?? !0;
 		if (e !== null) {
 			let downHandler = (e) => {
 				if (i.current = e.ctrlKey || e.metaKey || e.shiftKey || e.altKey, (!i.current || i.current && !c) && isInputDOMNode(e)) return !1;
@@ -2214,9 +2226,7 @@ function applyChange(e, t) {
 		case "position":
 			e.position !== void 0 && (t.position = e.position), e.dragging !== void 0 && (t.dragging = e.dragging);
 			break;
-		case "dimensions":
-			e.dimensions !== void 0 && (t.measured = { ...e.dimensions }, e.setAttributes && ((e.setAttributes === !0 || e.setAttributes === "width") && (t.width = e.dimensions.width), (e.setAttributes === !0 || e.setAttributes === "height") && (t.height = e.dimensions.height))), typeof e.resizing == "boolean" && (t.resizing = e.resizing);
-			break;
+		case "dimensions": e.dimensions !== void 0 && (t.measured = { ...e.dimensions }, e.setAttributes && ((e.setAttributes === !0 || e.setAttributes === "width") && (t.width = e.dimensions.width), (e.setAttributes === !0 || e.setAttributes === "height") && (t.height = e.dimensions.height))), typeof e.resizing == "boolean" && (t.resizing = e.resizing);
 	}
 }
 function applyNodeChanges(e, t) {
@@ -2266,21 +2276,21 @@ function elementToRemoveChange(e) {
 		type: "remove"
 	};
 }
-var me = createDevWarn("React Flow", "https://reactflow.dev/");
+var he = createDevWarn("React Flow", "https://reactflow.dev/");
 function addEdge(e, t, n = {}) {
 	return R(e, t, {
 		...n,
-		onError: n.onError ?? me
+		onError: n.onError ?? he
 	});
 }
 var isNode = (e) => isNodeBase(e), isEdge = (e) => isEdgeBase(e);
 function fixedForwardRef(e) {
 	return d(e);
 }
-var he = typeof window < "u" ? g : h;
+var ge = typeof window < "u" ? g : h;
 function useQueue(e) {
 	let [t, n] = y(BigInt(0)), [r] = y(() => createQueue(() => n((e) => e + BigInt(1))));
-	return he(() => {
+	return ge(() => {
 		let t = r.get();
 		t.length && (e(t), r.reset());
 	}, [t]), r;
@@ -2297,7 +2307,7 @@ function createQueue(e) {
 		}
 	};
 }
-var ge = u(null);
+var _e = u(null);
 function BatchProvider({ children: e }) {
 	let t = useStoreApi(), n = useQueue(p((e) => {
 		let { nodes: n = [], setNodes: r, hasDefaultNodes: i, onNodesChange: a, nodeLookup: o, fitViewQueued: s, onNodesChangeMiddlewareMap: c } = t.getState(), l = n;
@@ -2322,19 +2332,19 @@ function BatchProvider({ children: e }) {
 		nodeQueue: n,
 		edgeQueue: r
 	}), []);
-	return x(ge.Provider, {
+	return x(_e.Provider, {
 		value: i,
 		children: e
 	});
 }
 function useBatchContext() {
-	let e = m(ge);
+	let e = m(_e);
 	if (!e) throw Error("useBatchContext must be used within a BatchProvider");
 	return e;
 }
-var selector$k = (e) => !!e.panZoom;
+var selector$j = (e) => !!e.panZoom;
 function useReactFlow() {
-	let e = useViewportHelper(), t = useStoreApi(), n = useBatchContext(), r = useStore(selector$k), i = _(() => {
+	let e = useViewportHelper(), t = useStoreApi(), n = useBatchContext(), r = useStore(selector$j), i = _(() => {
 		let getInternalNode = (e) => t.getState().nodeLookup.get(e), setNodes = (e) => {
 			n.nodeQueue.push(e);
 		}, setEdges = (e) => {
@@ -2497,9 +2507,9 @@ function useReactFlow() {
 		viewportInitialized: r
 	}), [r]);
 }
-var selected = (e) => e.selected, _e = typeof window < "u" ? window : void 0;
+var selected = (e) => e.selected, ve = 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: _e });
+	let n = useStoreApi(), { deleteElements: r } = useReactFlow(), i = useKeyPress(e, { actInsideInputWithModifier: !1 }), a = useKeyPress(t, { target: ve });
 	h(() => {
 		if (i) {
 			let { edges: e, nodes: t } = n.getState();
@@ -2532,82 +2542,83 @@ function useResizeHandler(e) {
 		}
 	}, []);
 }
-var ve = {
+var Q = {
 	position: "absolute",
 	width: "100%",
 	height: "100%",
 	top: 0,
 	left: 0
-}, selector$j = (e) => ({
+}, selector$i = (e) => ({
 	userSelectionActive: e.userSelectionActive,
 	lib: e.lib,
 	connectionInProgress: e.connection.inProgress
 });
-function ZoomPane({ onPaneContextMenu: e, zoomOnScroll: t = !0, zoomOnPinch: n = !0, panOnScroll: r = !1, panOnScrollSpeed: i = .5, panOnScrollMode: a = A.Free, zoomOnDoubleClick: o = !0, panOnDrag: s = !0, defaultViewport: c, translateExtent: l, minZoom: u, maxZoom: d, zoomActivationKeyCode: f, preventScrolling: m = !0, children: g, noWheelClassName: _, noPanClassName: y, onViewportChange: b, isControlledViewport: S, paneClickDistance: C, selectionOnDrag: w }) {
-	let T = useStoreApi(), E = v(null), { userSelectionActive: D, lib: O, connectionInProgress: k } = useStore(selector$j, shallow$1), j = useKeyPress(f), M = v();
-	useResizeHandler(E);
-	let N = p((e) => {
-		b?.({
+function ZoomPane({ onPaneContextMenu: e, zoomOnScroll: t = !0, zoomOnPinch: n = !0, panOnScroll: r = !1, panActivationKeyPressed: i, panOnScrollSpeed: a = .5, panOnScrollMode: o = A.Free, zoomOnDoubleClick: s = !0, panOnDrag: c = !0, defaultViewport: l, translateExtent: u, minZoom: d, maxZoom: f, zoomActivationKeyCode: m, preventScrolling: g = !0, children: _, noWheelClassName: y, noPanClassName: b, onViewportChange: S, isControlledViewport: C, paneClickDistance: w, selectionOnDrag: T }) {
+	let E = useStoreApi(), D = v(null), { userSelectionActive: O, lib: k, connectionInProgress: j } = useStore(selector$i, shallow$1), M = useKeyPress(m), N = v();
+	useResizeHandler(D);
+	let P = p((e) => {
+		S?.({
 			x: e[0],
 			y: e[1],
 			zoom: e[2]
-		}), S || T.setState({ transform: e });
-	}, [b, S]);
+		}), C || E.setState({ transform: e });
+	}, [S, C]);
 	return h(() => {
-		if (E.current) {
-			M.current = XYPanZoom({
-				domNode: E.current,
-				minZoom: u,
-				maxZoom: d,
-				translateExtent: l,
-				viewport: c,
-				onDraggingChange: (e) => T.setState((t) => t.paneDragging === e ? t : { paneDragging: e }),
+		if (D.current) {
+			N.current = XYPanZoom({
+				domNode: D.current,
+				minZoom: d,
+				maxZoom: f,
+				translateExtent: u,
+				viewport: l,
+				onDraggingChange: (e) => E.setState((t) => t.paneDragging === e ? t : { paneDragging: e }),
 				onPanZoomStart: (e, t) => {
-					let { onViewportChangeStart: n, onMoveStart: r } = T.getState();
+					let { onViewportChangeStart: n, onMoveStart: r } = E.getState();
 					r?.(e, t), n?.(t);
 				},
 				onPanZoom: (e, t) => {
-					let { onViewportChange: n, onMove: r } = T.getState();
+					let { onViewportChange: n, onMove: r } = E.getState();
 					r?.(e, t), n?.(t);
 				},
 				onPanZoomEnd: (e, t) => {
-					let { onViewportChangeEnd: n, onMoveEnd: r } = T.getState();
+					let { onViewportChangeEnd: n, onMoveEnd: r } = E.getState();
 					r?.(e, t), n?.(t);
 				}
 			});
-			let { x: e, y: t, zoom: n } = M.current.getViewport();
-			return T.setState({
-				panZoom: M.current,
+			let { x: e, y: t, zoom: n } = N.current.getViewport();
+			return E.setState({
+				panZoom: N.current,
 				transform: [
 					e,
 					t,
 					n
 				],
-				domNode: E.current.closest(".react-flow")
+				domNode: D.current.closest(".react-flow")
 			}), () => {
-				M.current?.destroy();
+				N.current?.destroy();
 			};
 		}
 	}, []), h(() => {
-		M.current?.update({
+		N.current?.update({
 			onPaneContextMenu: e,
 			zoomOnScroll: t,
 			zoomOnPinch: n,
 			panOnScroll: r,
-			panOnScrollSpeed: i,
-			panOnScrollMode: a,
-			zoomOnDoubleClick: o,
-			panOnDrag: s,
-			zoomActivationKeyPressed: j,
-			preventScrolling: m,
-			noPanClassName: y,
-			userSelectionActive: D,
-			noWheelClassName: _,
-			lib: O,
-			onTransformChange: N,
-			connectionInProgress: k,
-			selectionOnDrag: w,
-			paneClickDistance: C
+			panActivationKeyPressed: i,
+			panOnScrollSpeed: a,
+			panOnScrollMode: o,
+			zoomOnDoubleClick: s,
+			panOnDrag: c,
+			zoomActivationKeyPressed: M,
+			preventScrolling: g,
+			noPanClassName: b,
+			userSelectionActive: O,
+			noWheelClassName: y,
+			lib: k,
+			onTransformChange: P,
+			connectionInProgress: j,
+			selectionOnDrag: T,
+			paneClickDistance: w
 		});
 	}, [
 		e,
@@ -2618,29 +2629,30 @@ function ZoomPane({ onPaneContextMenu: e, zoomOnScroll: t = !0, zoomOnPinch: n =
 		a,
 		o,
 		s,
-		j,
-		m,
-		y,
-		D,
-		_,
+		c,
+		M,
+		g,
+		b,
 		O,
-		N,
+		y,
 		k,
-		w,
-		C
+		P,
+		j,
+		T,
+		w
 	]), x("div", {
 		className: "react-flow__renderer",
-		ref: E,
-		style: ve,
-		children: g
+		ref: D,
+		style: Q,
+		children: _
 	});
 }
-var selector$i = (e) => ({
+var selector$h = (e) => ({
 	userSelectionActive: e.userSelectionActive,
 	userSelectionRect: e.userSelectionRect
 });
 function UserSelection() {
-	let { userSelectionActive: e, userSelectionRect: t } = useStore(selector$i, shallow$1);
+	let { userSelectionActive: e, userSelectionRect: t } = useStore(selector$h, shallow$1);
 	return e && t ? x("div", {
 		className: "react-flow__selection react-flow__container",
 		style: {
@@ -2652,21 +2664,20 @@ function UserSelection() {
 }
 var wrapHandler = (e, t) => (n) => {
 	n.target === t.current && e?.(n);
-}, selector$h = (e) => ({
+}, selector$g = (e) => ({
 	userSelectionActive: e.userSelectionActive,
 	elementsSelectable: e.elementsSelectable,
-	connectionInProgress: e.connection.inProgress,
 	dragging: e.paneDragging,
 	panBy: e.panBy,
 	autoPanSpeed: e.autoPanSpeed
 });
 function Pane({ isSelecting: e, selectionKeyPressed: t, selectionMode: n = j.Full, panOnDrag: r, autoPanOnSelection: i, paneClickDistance: a, selectionOnDrag: o, onSelectionStart: s, onSelectionEnd: c, onPaneClick: l, onPaneContextMenu: u, onPaneScroll: d, onPaneMouseEnter: f, onPaneMouseMove: p, onPaneMouseLeave: m, children: g }) {
-	let _ = v(0), y = useStoreApi(), { userSelectionActive: b, elementsSelectable: C, dragging: w, connectionInProgress: T, panBy: E, autoPanSpeed: D } = useStore(selector$h, shallow$1), O = C && (e || b), k = v(null), A = v(), M = v(/* @__PURE__ */ new Set()), N = v(/* @__PURE__ */ new Set()), P = v(!1), F = v({
+	let _ = v(0), y = useStoreApi(), { userSelectionActive: b, elementsSelectable: C, dragging: w, panBy: T, autoPanSpeed: E } = useStore(selector$g, shallow$1), D = C && (e || b), O = v(null), k = v(), A = v(/* @__PURE__ */ new Set()), M = v(/* @__PURE__ */ new Set()), N = v(!1), P = v(!1), F = v({
 		x: 0,
 		y: 0
 	}), I = v(!1), onClick = (e) => {
-		if (P.current || T) {
-			P.current = !1;
+		if (P.current || N.current || y.getState().connection.inProgress) {
+			P.current = !1, N.current = !1;
 			return;
 		}
 		l?.(e), y.getState().resetSelectedElements(), y.setState({ nodesSelectionActive: !1 });
@@ -2679,23 +2690,24 @@ function Pane({ isSelecting: e, selectionKeyPressed: t, selectionMode: n = j.Ful
 	}, L = d ? (e) => d(e) : void 0, onClickCapture = (e) => {
 		P.current &&= (e.stopPropagation(), !1);
 	}, onPointerDownCapture = (n) => {
-		let { domNode: r, transform: i } = y.getState();
-		if (A.current = r?.getBoundingClientRect(), !A.current) return;
-		let a = n.target === k.current;
-		if (!a && n.target.closest(".nokey") || !e || !(o && a || t) || n.button !== 0 || !n.isPrimary) return;
+		if (n.pointerType === "touch" && r !== !1 && !t) return;
+		let { domNode: i, transform: a } = y.getState();
+		if (k.current = i?.getBoundingClientRect(), !k.current) return;
+		let s = n.target === O.current;
+		if (!s && n.target.closest(".nokey") || !e || !(o && s || t) || n.button !== 0 || !n.isPrimary) return;
 		n.target?.setPointerCapture?.(n.pointerId), P.current = !1;
-		let { x: s, y: c } = getEventPosition(n.nativeEvent, A.current), l = pointToRendererPoint({
-			x: s,
-			y: c
-		}, i);
+		let { x: c, y: l } = getEventPosition(n.nativeEvent, k.current), u = pointToRendererPoint({
+			x: c,
+			y: l
+		}, a);
 		y.setState({ userSelectionRect: {
 			width: 0,
 			height: 0,
-			startX: l.x,
-			startY: l.y,
-			x: s,
-			y: c
-		} }), a || (n.stopPropagation(), n.preventDefault());
+			startX: u.x,
+			startY: u.y,
+			x: c,
+			y: l
+		} }), s || (n.stopPropagation(), n.preventDefault());
 	};
 	function commitUserSelectionRect(e, t) {
 		let { userSelectionRect: r } = y.getState();
@@ -2710,26 +2722,26 @@ function Pane({ isSelecting: e, selectionKeyPressed: t, selectionMode: n = j.Ful
 			y: t < p ? t : p,
 			width: Math.abs(e - f),
 			height: Math.abs(t - p)
-		}, h = M.current, g = N.current;
-		M.current = new Set(getNodesInside(a, m, i, n === j.Partial, !0).map((e) => e.id)), N.current = /* @__PURE__ */ new Set();
+		}, h = A.current, g = M.current;
+		A.current = new Set(getNodesInside(a, m, i, n === j.Partial, !0).map((e) => e.id)), M.current = /* @__PURE__ */ new Set();
 		let _ = u?.selectable ?? !0;
-		for (let e of M.current) {
+		for (let e of A.current) {
 			let t = s.get(e);
 			if (t) for (let { edgeId: e } of t.values()) {
 				let t = o.get(e);
-				t && (t.selectable ?? _) && N.current.add(e);
+				t && (t.selectable ?? _) && M.current.add(e);
 			}
 		}
-		areSetsEqual(h, M.current) || c(getSelectionChanges(a, M.current, !0)), areSetsEqual(g, N.current) || l(getSelectionChanges(o, N.current)), y.setState({
+		areSetsEqual(h, A.current) || c(getSelectionChanges(a, A.current, !0)), areSetsEqual(g, M.current) || l(getSelectionChanges(o, M.current)), y.setState({
 			userSelectionRect: m,
 			userSelectionActive: !0,
 			nodesSelectionActive: !1
 		});
 	}
 	function autoPan() {
-		if (!i || !A.current) return;
-		let [e, t] = calcAutoPan(F.current, A.current, D);
-		E({
+		if (!i || !k.current) return;
+		let [e, t] = calcAutoPan(F.current, k.current, E);
+		T({
 			x: e,
 			y: t
 		}).then((e) => {
@@ -2747,8 +2759,8 @@ function Pane({ isSelecting: e, selectionKeyPressed: t, selectionMode: n = j.Ful
 	h(() => () => cleanupAutoPan(), []);
 	let onPointerMove = (e) => {
 		let { userSelectionRect: n, transform: r, resetSelectedElements: i } = y.getState();
-		if (!A.current || !n) return;
-		let { x: o, y: c } = getEventPosition(e.nativeEvent, A.current);
+		if (!k.current || !n) return;
+		let { x: o, y: c } = getEventPosition(e.nativeEvent, k.current);
 		F.current = {
 			x: o,
 			y: c
@@ -2764,31 +2776,35 @@ function Pane({ isSelecting: e, selectionKeyPressed: t, selectionMode: n = j.Ful
 		}
 		P.current = !0, I.current ||= (autoPan(), !0), commitUserSelectionRect(o, c);
 	}, onPointerUp = (e) => {
-		e.button === 0 && (e.target?.releasePointerCapture?.(e.pointerId), !b && e.target === k.current && y.getState().userSelectionRect && onClick?.(e), y.setState({
+		if (!D) {
+			e.target === O.current && y.getState().connection.inProgress && (N.current = !0);
+			return;
+		}
+		e.button === 0 && (e.target?.releasePointerCapture?.(e.pointerId), !b && e.target === O.current && y.getState().userSelectionRect && onClick?.(e), y.setState({
 			userSelectionActive: !1,
 			userSelectionRect: null
-		}), P.current && (c?.(e), y.setState({ nodesSelectionActive: M.current.size > 0 })), cleanupAutoPan());
+		}), P.current && (c?.(e), y.setState({ nodesSelectionActive: A.current.size > 0 })), cleanupAutoPan());
 	}, onPointerCancel = (e) => {
 		e.target?.releasePointerCapture?.(e.pointerId), cleanupAutoPan();
-	};
+	}, R = r === !0 || Array.isArray(r) && r.includes(0);
 	return S("div", {
 		className: cc(["react-flow__pane", {
-			draggable: r === !0 || Array.isArray(r) && r.includes(0),
+			draggable: R,
 			dragging: w,
 			selection: e
 		}]),
-		onClick: O ? void 0 : wrapHandler(onClick, k),
-		onContextMenu: wrapHandler(onContextMenu, k),
-		onWheel: wrapHandler(L, k),
-		onPointerEnter: O ? void 0 : f,
-		onPointerMove: O ? onPointerMove : p,
-		onPointerUp: O ? onPointerUp : void 0,
-		onPointerCancel: O ? onPointerCancel : void 0,
-		onPointerDownCapture: O ? onPointerDownCapture : void 0,
-		onClickCapture: O ? onClickCapture : void 0,
+		onClick: D ? void 0 : wrapHandler(onClick, O),
+		onContextMenu: wrapHandler(onContextMenu, O),
+		onWheel: wrapHandler(L, O),
+		onPointerEnter: D ? void 0 : f,
+		onPointerMove: D ? onPointerMove : p,
+		onPointerUp,
+		onPointerCancel: D ? onPointerCancel : void 0,
+		onPointerDownCapture: D ? onPointerDownCapture : void 0,
+		onClickCapture: D ? onClickCapture : void 0,
 		onPointerLeave: m,
-		ref: k,
-		style: ve,
+		ref: O,
+		style: Q,
 		children: [g, x(UserSelection, {})]
 	});
 }
@@ -2806,7 +2822,7 @@ function handleNodeClick({ id: e, store: t, unselect: n = !1, nodeRef: r }) {
 function useDrag({ nodeRef: e, disabled: t = !1, noDragClassName: n, handleSelector: r, nodeId: i, isSelectable: a, nodeClickDistance: o }) {
 	let s = useStoreApi(), [c, l] = y(!1), u = v();
 	return h(() => {
-		u.current = XYDrag({
+		if (!t) return u.current = XYDrag({
 			getStoreItems: () => s.getState(),
 			onNodeMouseDown: (t) => {
 				handleNodeClick({
@@ -2821,18 +2837,22 @@ function useDrag({ nodeRef: e, disabled: t = !1, noDragClassName: n, handleSelec
 			onDragStop: () => {
 				l(!1);
 			}
-		});
-	}, []), h(() => {
-		if (!(t || !e.current || !u.current)) return u.current.update({
+		}), () => {
+			u.current?.destroy(), u.current = void 0;
+		};
+	}, [
+		t,
+		s,
+		e
+	]), h(() => {
+		t || !e.current || !u.current || u.current.update({
 			noDragClassName: n,
 			handleSelector: r,
 			domNode: e.current,
 			isSelectable: a,
 			nodeId: i,
 			nodeClickDistance: o
-		}), () => {
-			u.current?.destroy();
-		};
+		});
 	}, [
 		n,
 		r,
@@ -2870,12 +2890,35 @@ function useMoveSelectedNodes() {
 }
 var ye = u(null), be = ye.Provider;
 ye.Consumer;
-var useNodeId = () => m(ye), selector$g = (e) => ({
+var useNodeId = () => m(ye), selector$f = (e) => ({
 	connectOnClick: e.connectOnClick,
 	noPanClassName: e.noPanClassName,
 	rfId: e.rfId
-}), connectingSelector = (e, t, n) => (r) => {
-	let { connectionClickStartHandle: i, connectionMode: a, connection: o } = r, { fromHandle: s, toHandle: c, isValid: l } = o, u = c?.nodeId === e && c?.id === t && c?.type === n;
+}), xe = u(null);
+function HandleConfigProvider({ children: e }) {
+	let t = useStore(selector$f, shallow$1);
+	return x(xe.Provider, {
+		value: t,
+		children: e
+	});
+}
+function useHandleConfig() {
+	let e = m(xe);
+	if (!e) throw Error("useHandleConfig must be used within a HandleConfigProvider");
+	return e;
+}
+var Se = {
+	connectingFrom: !1,
+	connectingTo: !1,
+	clickConnecting: !1,
+	isPossibleEndHandle: !0,
+	connectionInProcess: !1,
+	clickConnectionInProcess: !1,
+	valid: !1
+}, connectingSelector = (e, t, n) => (r) => {
+	let { connectionClickStartHandle: i, connectionMode: a, connection: o } = r, { fromHandle: s, toHandle: c, isValid: l } = o;
+	if (!s && !i) return Se;
+	let u = c?.nodeId === e && c?.id === t && c?.type === n;
 	return {
 		connectingFrom: s?.nodeId === e && s?.id === t && s?.type === n,
 		connectingTo: u,
@@ -2887,7 +2930,7 @@ var useNodeId = () => m(ye), selector$g = (e) => ({
 	};
 };
 function HandleComponent({ type: e = "source", position: t = F.Top, isValidConnection: n, isConnectable: r = !0, isConnectableStart: i = !0, isConnectableEnd: a = !0, id: o, onConnect: s, children: c, className: l, onMouseDown: u, onTouchStart: d, ...f }, p) {
-	let m = o || null, h = e === "target", g = useStoreApi(), _ = useNodeId(), { connectOnClick: v, noPanClassName: y, rfId: b } = useStore(selector$g, shallow$1), { connectingFrom: S, connectingTo: C, clickConnecting: w, isPossibleEndHandle: E, connectionInProcess: D, clickConnectionInProcess: O, valid: k } = useStore(connectingSelector(_, m, e), shallow$1);
+	let m = o || null, h = e === "target", g = useStoreApi(), _ = useNodeId(), { connectOnClick: v, noPanClassName: y, rfId: b } = useHandleConfig(), { connectingFrom: S, connectingTo: C, clickConnecting: w, isPossibleEndHandle: E, connectionInProcess: D, clickConnectionInProcess: O, valid: k } = useStore(connectingSelector(_, m, e), shallow$1);
 	_ || g.getState().onError?.("010", T.error010());
 	let onConnectExtended = (e) => {
 		let { defaultEdgeOptions: t, onConnect: n, hasDefaultEdges: r } = g.getState(), i = {
@@ -2997,9 +3040,9 @@ function HandleComponent({ type: e = "source", position: t = F.Top, isValidConne
 		children: c
 	});
 }
-var Q = f(fixedForwardRef(HandleComponent));
+var Ce = f(fixedForwardRef(HandleComponent));
 function InputNode({ data: e, isConnectable: t, sourcePosition: n = F.Bottom }) {
-	return S(b, { children: [e?.label, x(Q, {
+	return S(b, { children: [e?.label, x(Ce, {
 		type: "source",
 		position: n,
 		isConnectable: t
@@ -3007,13 +3050,13 @@ function InputNode({ data: e, isConnectable: t, sourcePosition: n = F.Bottom })
 }
 function DefaultNode({ data: e, isConnectable: t, targetPosition: n = F.Top, sourcePosition: r = F.Bottom }) {
 	return S(b, { children: [
-		x(Q, {
+		x(Ce, {
 			type: "target",
 			position: n,
 			isConnectable: t
 		}),
 		e?.label,
-		x(Q, {
+		x(Ce, {
 			type: "source",
 			position: r,
 			isConnectable: t
@@ -3024,13 +3067,13 @@ function GroupNode() {
 	return null;
 }
 function OutputNode({ data: e, isConnectable: t, targetPosition: n = F.Top }) {
-	return S(b, { children: [x(Q, {
+	return S(b, { children: [x(Ce, {
 		type: "target",
 		position: n,
 		isConnectable: t
 	}), e?.label] });
 }
-var xe = {
+var we = {
 	ArrowUp: {
 		x: 0,
 		y: -1
@@ -3047,7 +3090,7 @@ var xe = {
 		x: 1,
 		y: 0
 	}
-}, Se = {
+}, Te = {
 	input: InputNode,
 	default: DefaultNode,
 	output: OutputNode,
@@ -3062,7 +3105,7 @@ function getNodeInlineStyleDimensions(e) {
 		height: e.height ?? e.style?.height
 	};
 }
-var selector$f = (e) => {
+var selector$e = (e) => {
 	let { width: t, height: n, x: r, y: i } = getInternalNodesBounds(e.nodeLookup, { filter: (e) => !!e.selected });
 	return {
 		width: isNumeric(t) ? t : null,
@@ -3072,7 +3115,7 @@ var selector$f = (e) => {
 	};
 };
 function NodesSelection({ onSelectionContextMenu: e, noPanClassName: t, disableKeyboardA11y: n }) {
-	let r = useStoreApi(), { width: i, height: a, transformString: o, userSelectionActive: s } = useStore(selector$f, shallow$1), c = useMoveSelectedNodes(), l = v(null);
+	let r = useStoreApi(), { width: i, height: a, transformString: o, userSelectionActive: s } = useStore(selector$e, shallow$1), c = useMoveSelectedNodes(), l = v(null);
 	h(() => {
 		n || l.current?.focus({ preventScroll: !0 });
 	}, [n]);
@@ -3084,8 +3127,8 @@ function NodesSelection({ onSelectionContextMenu: e, noPanClassName: t, disableK
 	let d = e ? (t) => {
 		e(t, r.getState().nodes.filter((e) => e.selected));
 	} : void 0, onKeyDown = (e) => {
-		Object.prototype.hasOwnProperty.call(xe, e.key) && (e.preventDefault(), c({
-			direction: xe[e.key],
+		Object.prototype.hasOwnProperty.call(we, e.key) && (e.preventDefault(), c({
+			direction: we[e.key],
 			factor: e.shiftKey ? 4 : 1
 		}));
 	};
@@ -3109,12 +3152,12 @@ function NodesSelection({ onSelectionContextMenu: e, noPanClassName: t, disableK
 		})
 	});
 }
-var Ce = typeof window < "u" ? window : void 0, selector$e = (e) => ({
+var Ee = typeof window < "u" ? window : void 0, selector$d = (e) => ({
 	nodesSelectionActive: e.nodesSelectionActive,
 	userSelectionActive: e.userSelectionActive
 });
 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: C, panOnScrollMode: w, zoomOnDoubleClick: T, panOnDrag: E, autoPanOnSelection: D, defaultViewport: O, translateExtent: k, minZoom: A, maxZoom: j, preventScrolling: M, onSelectionContextMenu: N, noWheelClassName: P, noPanClassName: F, disableKeyboardA11y: I, onViewportChange: L, isControlledViewport: R }) {
-	let { nodesSelectionActive: z, userSelectionActive: B } = useStore(selector$e, shallow$1), V = useKeyPress(l, { target: Ce }), H = useKeyPress(h, { target: Ce }), U = H || E, W = H || b, G = u && U !== !0, K = V || B || G;
+	let { nodesSelectionActive: z, userSelectionActive: B } = useStore(selector$d, shallow$1), V = useKeyPress(l, { target: Ee }), H = useKeyPress(h, { target: Ee }), U = H || E, W = H || b, G = u && U !== !0, K = V || B || G;
 	return useGlobalKeyHandler({
 		deleteKeyCode: c,
 		multiSelectionKeyCode: m
@@ -3124,6 +3167,7 @@ function FlowRendererComponent({ children: e, onPaneClick: t, onPaneMouseEnter:
 		zoomOnScroll: v,
 		zoomOnPinch: y,
 		panOnScroll: W,
+		panActivationKeyPressed: H,
 		panOnScrollSpeed: C,
 		panOnScrollMode: w,
 		zoomOnDoubleClick: T,
@@ -3165,18 +3209,18 @@ function FlowRendererComponent({ children: e, onPaneClick: t, onPaneMouseEnter:
 	});
 }
 FlowRendererComponent.displayName = "FlowRenderer";
-var we = f(FlowRendererComponent), selector$d = (e) => (t) => e ? getNodesInside(t.nodeLookup, {
+var De = f(FlowRendererComponent), selector$c = (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 useVisibleNodeIds(e) {
-	return useStore(p(selector$d(e), [e]), shallow$1);
+	return useStore(p(selector$c(e), [e]), shallow$1);
 }
-var selector$c = (e) => e.updateNodeInternals;
+var selector$b = (e) => e.updateNodeInternals;
 function useResizeObserver() {
-	let e = useStore(selector$c), [t] = y(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((t) => {
+	let e = useStore(selector$b), [t] = y(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((t) => {
 		let n = /* @__PURE__ */ new Map();
 		t.forEach((e) => {
 			let t = e.target.getAttribute("data-id");
@@ -3221,8 +3265,8 @@ function NodeWrapper({ id: e, onClick: t, onMouseEnter: n, onMouseMove: r, onMou
 			internals: n.internals,
 			isParent: r
 		};
-	}, shallow$1), C = y.type || "default", w = g?.[C] || Se[C];
-	w === void 0 && (v?.("003", T.error003(C)), C = "default", w = g?.default || Se.default);
+	}, shallow$1), C = y.type || "default", w = g?.[C] || Te[C];
+	w === void 0 && (v?.("003", T.error003(C)), C = "default", w = g?.default || Te.default);
 	let E = !!(y.draggable || s && y.draggable === void 0), O = !!(y.selectable || c && y.selectable === void 0), k = !!(y.connectable || l && y.connectable === void 0), A = !!(y.focusable || u && y.focusable === void 0), j = useStoreApi(), M = nodeHasDimensions(y), N = useNodeObserver({
 		node: y,
 		nodeType: C,
@@ -3255,7 +3299,7 @@ function NodeWrapper({ id: e, onClick: t, onMouseEnter: n, onMouseMove: r, onMou
 					unselect: n,
 					nodeRef: N
 				});
-			} else if (E && y.selected && Object.prototype.hasOwnProperty.call(xe, t.key)) {
+			} else if (E && y.selected && Object.prototype.hasOwnProperty.call(we, t.key)) {
 				t.preventDefault();
 				let { ariaLabelConfig: e } = j.getState();
 				j.setState({ ariaLiveMessage: e["node.a11yDescription.ariaLiveMessage"]({
@@ -3263,7 +3307,7 @@ function NodeWrapper({ id: e, onClick: t, onMouseEnter: n, onMouseMove: r, onMou
 					x: ~~b.positionAbsolute.x,
 					y: ~~b.positionAbsolute.y
 				}) }), F({
-					direction: xe[t.key],
+					direction: we[t.key],
 					factor: t.shiftKey ? 4 : 1
 				});
 			}
@@ -3341,20 +3385,19 @@ function NodeWrapper({ id: e, onClick: t, onMouseEnter: n, onMouseMove: r, onMou
 		})
 	});
 }
-var Te = f(NodeWrapper), selector$b = (e) => ({
-	nodesDraggable: e.nodesDraggable,
+var Oe = f(NodeWrapper), selector$a = (e) => ({
 	nodesConnectable: e.nodesConnectable,
 	nodesFocusable: e.nodesFocusable,
 	elementsSelectable: e.elementsSelectable,
 	onError: e.onError
 });
 function NodeRendererComponent(e) {
-	let { nodesDraggable: t, nodesConnectable: n, nodesFocusable: r, elementsSelectable: i, onError: a } = useStore(selector$b, shallow$1), o = useVisibleNodeIds(e.onlyRenderVisibleElements), s = useResizeObserver();
+	let { nodesConnectable: t, nodesFocusable: n, elementsSelectable: r, onError: i } = useStore(selector$a, shallow$1), a = useVisibleNodeIds(e.onlyRenderVisibleElements), o = useResizeObserver();
 	return x("div", {
 		className: "react-flow__nodes",
-		style: ve,
-		children: o.map((o) => x(Te, {
-			id: o,
+		style: Q,
+		children: a.map((a) => x(Oe, {
+			id: a,
 			nodeTypes: e.nodeTypes,
 			nodeExtent: e.nodeExtent,
 			onClick: e.onNodeClick,
@@ -3367,18 +3410,18 @@ function NodeRendererComponent(e) {
 			noPanClassName: e.noPanClassName,
 			rfId: e.rfId,
 			disableKeyboardA11y: e.disableKeyboardA11y,
-			resizeObserver: s,
-			nodesDraggable: t,
-			nodesConnectable: n,
-			nodesFocusable: r,
-			elementsSelectable: i,
+			resizeObserver: o,
+			nodesDraggable: e.nodesDraggable ?? !0,
+			nodesConnectable: t,
+			nodesFocusable: n,
+			elementsSelectable: r,
 			nodeClickDistance: e.nodeClickDistance,
-			onError: a
-		}, o))
+			onError: i
+		}, a))
 	});
 }
 NodeRendererComponent.displayName = "NodeRenderer";
-var Ee = f(NodeRendererComponent);
+var ke = f(NodeRendererComponent);
 function useVisibleEdgeIds(e) {
 	return useStore(p((t) => {
 		if (!e) return t.edges.map((e) => e.id);
@@ -3396,35 +3439,41 @@ function useVisibleEdgeIds(e) {
 		return n;
 	}, [e]), shallow$1);
 }
-var ArrowSymbol = ({ color: e = "none", strokeWidth: t = 1 }) => x("polyline", {
-	className: "arrow",
-	style: {
+var ArrowSymbol = ({ color: e = "none", strokeWidth: t = 1 }) => {
+	let n = {
 		strokeWidth: t,
 		...e && { stroke: e }
-	},
-	strokeLinecap: "round",
-	fill: "none",
-	strokeLinejoin: "round",
-	points: "-5,-4 0,0 -5,4"
-}), ArrowClosedSymbol = ({ color: e = "none", strokeWidth: t = 1 }) => x("polyline", {
-	className: "arrowclosed",
-	style: {
+	};
+	return x("polyline", {
+		className: "arrow",
+		style: n,
+		strokeLinecap: "round",
+		fill: "none",
+		strokeLinejoin: "round",
+		points: "-5,-4 0,0 -5,4"
+	});
+}, ArrowClosedSymbol = ({ color: e = "none", strokeWidth: t = 1 }) => {
+	let n = {
 		strokeWidth: t,
 		...e && {
 			stroke: e,
 			fill: e
 		}
-	},
-	strokeLinecap: "round",
-	strokeLinejoin: "round",
-	points: "-5,-4 0,0 -5,4 -5,-4"
-}), De = {
+	};
+	return x("polyline", {
+		className: "arrowclosed",
+		style: n,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		points: "-5,-4 0,0 -5,4 -5,-4"
+	});
+}, Ae = {
 	[P.Arrow]: ArrowSymbol,
 	[P.ArrowClosed]: ArrowClosedSymbol
 };
 function useMarkerSymbol(e) {
 	let t = useStoreApi();
-	return _(() => Object.prototype.hasOwnProperty.call(De, e) ? De[e] : (t.getState().onError?.("009", T.error009(e)), null), [e]);
+	return _(() => Object.prototype.hasOwnProperty.call(Ae, e) ? Ae[e] : (t.getState().onError?.("009", T.error009(e)), null), [e]);
 }
 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);
@@ -3471,7 +3520,7 @@ var Marker = ({ id: e, type: t, color: n, width: r = 12.5, height: i = 12.5, mar
 	}) : null;
 };
 MarkerDefinitions.displayName = "MarkerDefinitions";
-var Oe = f(MarkerDefinitions);
+var je = f(MarkerDefinitions);
 function EdgeTextComponent({ x: e, y: t, label: n, labelStyle: r, labelShowBg: i = !0, labelBgStyle: a, labelBgPadding: o = [2, 4], labelBgBorderRadius: s = 2, children: c, className: l, ...u }) {
 	let [d, f] = y({
 		x: 1,
@@ -3518,7 +3567,7 @@ function EdgeTextComponent({ x: e, y: t, label: n, labelStyle: r, labelShowBg: i
 	}) : null;
 }
 EdgeTextComponent.displayName = "EdgeText";
-var ke = f(EdgeTextComponent);
+var Me = f(EdgeTextComponent);
 function BaseEdge({ path: e, labelX: t, labelY: n, label: r, labelStyle: i, labelShowBg: a, labelBgStyle: o, labelBgPadding: s, labelBgBorderRadius: c, interactionWidth: l = 20, ...u }) {
 	return S(b, { children: [
 		x("path", {
@@ -3534,7 +3583,7 @@ function BaseEdge({ path: e, labelX: t, labelY: n, label: r, labelStyle: i, labe
 			strokeWidth: l,
 			className: "react-flow__edge-interaction"
 		}) : null,
-		r && isNumeric(t) && isNumeric(n) ? x(ke, {
+		r && isNumeric(t) && isNumeric(n) ? x(Me, {
 			x: t,
 			y: n,
 			label: r,
@@ -3589,9 +3638,9 @@ function createSimpleBezierEdge(e) {
 			targetX: i,
 			targetY: a,
 			targetPosition: s
-		});
+		}), S = e.isInternal ? void 0 : t;
 		return x(BaseEdge, {
-			id: e.isInternal ? void 0 : t,
+			id: S,
 			path: v,
 			labelX: y,
 			labelY: b,
@@ -3608,8 +3657,8 @@ function createSimpleBezierEdge(e) {
 		});
 	});
 }
-var Ae = createSimpleBezierEdge({ isInternal: !1 }), je = createSimpleBezierEdge({ isInternal: !0 });
-Ae.displayName = "SimpleBezierEdge", je.displayName = "SimpleBezierEdgeInternal";
+var Ne = createSimpleBezierEdge({ isInternal: !1 }), Pe = createSimpleBezierEdge({ isInternal: !0 });
+Ne.displayName = "SimpleBezierEdge", Pe.displayName = "SimpleBezierEdgeInternal";
 function createSmoothStepEdge(e) {
 	return f(({ id: t, sourceX: n, sourceY: r, targetX: i, targetY: a, label: o, labelStyle: s, labelShowBg: c, labelBgStyle: l, labelBgPadding: u, labelBgBorderRadius: d, style: f, sourcePosition: p = F.Bottom, targetPosition: m = F.Top, markerEnd: h, markerStart: g, pathOptions: _, interactionWidth: v }) => {
 		let [y, b, S] = getSmoothStepPath({
@@ -3622,9 +3671,9 @@ function createSmoothStepEdge(e) {
 			borderRadius: _?.borderRadius,
 			offset: _?.offset,
 			stepPosition: _?.stepPosition
-		});
+		}), C = e.isInternal ? void 0 : t;
 		return x(BaseEdge, {
-			id: e.isInternal ? void 0 : t,
+			id: C,
 			path: y,
 			labelX: b,
 			labelY: S,
@@ -3641,12 +3690,12 @@ function createSmoothStepEdge(e) {
 		});
 	});
 }
-var Me = createSmoothStepEdge({ isInternal: !1 }), Ne = createSmoothStepEdge({ isInternal: !0 });
-Me.displayName = "SmoothStepEdge", Ne.displayName = "SmoothStepEdgeInternal";
+var Fe = createSmoothStepEdge({ isInternal: !1 }), Ie = createSmoothStepEdge({ isInternal: !0 });
+Fe.displayName = "SmoothStepEdge", Ie.displayName = "SmoothStepEdgeInternal";
 function createStepEdge(e) {
 	return f(({ id: t, ...n }) => {
 		let r = e.isInternal ? void 0 : t;
-		return x(Me, {
+		return x(Fe, {
 			...n,
 			id: r,
 			pathOptions: _(() => ({
@@ -3656,8 +3705,8 @@ function createStepEdge(e) {
 		});
 	});
 }
-var Pe = createStepEdge({ isInternal: !1 }), Fe = createStepEdge({ isInternal: !0 });
-Pe.displayName = "StepEdge", Fe.displayName = "StepEdgeInternal";
+var Le = createStepEdge({ isInternal: !1 }), Re = createStepEdge({ isInternal: !0 });
+Le.displayName = "StepEdge", Re.displayName = "StepEdgeInternal";
 function createStraightEdge(e) {
 	return f(({ 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({
@@ -3665,9 +3714,9 @@ function createStraightEdge(e) {
 			sourceY: r,
 			targetX: i,
 			targetY: a
-		});
+		}), y = e.isInternal ? void 0 : t;
 		return x(BaseEdge, {
-			id: e.isInternal ? void 0 : t,
+			id: y,
 			path: g,
 			labelX: _,
 			labelY: v,
@@ -3684,8 +3733,8 @@ function createStraightEdge(e) {
 		});
 	});
 }
-var Ie = createStraightEdge({ isInternal: !1 }), Le = createStraightEdge({ isInternal: !0 });
-Ie.displayName = "StraightEdge", Le.displayName = "StraightEdgeInternal";
+var ze = createStraightEdge({ isInternal: !1 }), Be = createStraightEdge({ isInternal: !0 });
+ze.displayName = "StraightEdge", Be.displayName = "StraightEdgeInternal";
 function createBezierEdge(e) {
 	return f(({ id: t, sourceX: n, sourceY: r, targetX: i, targetY: a, sourcePosition: o = F.Bottom, targetPosition: s = F.Top, label: c, labelStyle: l, labelShowBg: u, labelBgStyle: d, labelBgPadding: f, labelBgBorderRadius: p, style: m, markerEnd: h, markerStart: g, pathOptions: _, interactionWidth: v }) => {
 		let [y, b, S] = getBezierPath({
@@ -3696,9 +3745,9 @@ function createBezierEdge(e) {
 			targetY: a,
 			targetPosition: s,
 			curvature: _?.curvature
-		});
+		}), C = e.isInternal ? void 0 : t;
 		return x(BaseEdge, {
-			id: e.isInternal ? void 0 : t,
+			id: C,
 			path: y,
 			labelX: b,
 			labelY: S,
@@ -3715,28 +3764,29 @@ function createBezierEdge(e) {
 		});
 	});
 }
-var Re = createBezierEdge({ isInternal: !1 }), ze = createBezierEdge({ isInternal: !0 });
-Re.displayName = "BezierEdge", ze.displayName = "BezierEdgeInternal";
-var Be = {
-	default: ze,
-	straight: Le,
-	step: Fe,
-	smoothstep: Ne,
-	simplebezier: je
-}, Ve = {
+var Ve = createBezierEdge({ isInternal: !1 }), He = createBezierEdge({ isInternal: !0 });
+Ve.displayName = "BezierEdge", He.displayName = "BezierEdgeInternal";
+var Ue = {
+	default: He,
+	straight: Be,
+	step: Re,
+	smoothstep: Ie,
+	simplebezier: Pe
+}, We = {
 	sourceX: null,
 	sourceY: null,
 	targetX: null,
 	targetY: null,
 	sourcePosition: null,
-	targetPosition: null
-}, shiftX = (e, t, n) => n === F.Left ? e - t : n === F.Right ? e + t : e, shiftY = (e, t, n) => n === F.Top ? e - t : n === F.Bottom ? e + t : e, He = "react-flow__edgeupdater";
+	targetPosition: null,
+	zIndex: void 0
+}, shiftX = (e, t, n) => n === F.Left ? e - t : n === F.Right ? e + t : e, shiftY = (e, t, n) => n === F.Top ? e - t : n === F.Bottom ? e + t : e, Ge = "react-flow__edgeupdater";
 function EdgeAnchor({ position: e, centerX: t, centerY: n, radius: r = 10, onMouseDown: i, onMouseEnter: a, onMouseOut: o, type: s }) {
 	return x("circle", {
 		onMouseDown: i,
 		onMouseEnter: a,
 		onMouseOut: o,
-		className: cc([He, `${He}-${s}`]),
+		className: cc([Ge, `${Ge}-${s}`]),
 		cx: shiftX(t, r, e),
 		cy: shiftY(n, r, e),
 		r,
@@ -3812,14 +3862,11 @@ function EdgeWrapper({ id: e, edgesFocusable: t, edgesReconnectable: n, elements
 		...O,
 		...E
 	} : E;
-	let k = E.type || "default", A = g?.[k] || Be[k];
-	A === void 0 && (C?.("011", T.error011(k)), k = "default", A = g?.default || Be.default);
-	let j = !!(E.focusable || t && E.focusable === void 0), M = d !== void 0 && (E.reconnectable || n && E.reconnectable === void 0), N = !!(E.selectable || r && E.selectable === void 0), P = v(null), [F, I] = y(!1), [L, R] = y(!1), z = useStoreApi(), { zIndex: B, sourceX: V, sourceY: H, targetX: U, targetY: W, sourcePosition: G, targetPosition: K } = useStore(p((t) => {
+	let k = E.type || "default", A = g?.[k] || Ue[k];
+	A === void 0 && (C?.("011", T.error011(k)), k = "default", A = g?.default || Ue.default);
+	let j = !!(E.focusable || t && E.focusable === void 0), M = d !== void 0 && (E.reconnectable || n && E.reconnectable === void 0), N = !!(E.selectable || r && E.selectable === void 0), P = v(null), [F, I] = y(!1), [L, R] = y(!1), z = useStoreApi(), { zIndex: B = E.zIndex, sourceX: V, sourceY: H, targetX: U, targetY: W, sourcePosition: G, targetPosition: K } = useStore(p((t) => {
 		let n = t.nodeLookup.get(E.source), r = t.nodeLookup.get(E.target);
-		if (!n || !r) return {
-			zIndex: E.zIndex,
-			...Ve
-		};
+		if (!n || !r) return We;
 		let i = getEdgePosition({
 			id: e,
 			sourceNode: n,
@@ -3828,17 +3875,17 @@ function EdgeWrapper({ id: e, edgesFocusable: t, edgesReconnectable: n, elements
 			targetHandle: E.targetHandle || null,
 			connectionMode: t.connectionMode,
 			onError: C
+		}), a = getElevatedEdgeZIndex({
+			selected: E.selected,
+			zIndex: E.zIndex,
+			sourceNode: n,
+			targetNode: r,
+			elevateOnSelect: t.elevateEdgesOnSelect,
+			zIndexMode: t.zIndexMode
 		});
 		return {
-			zIndex: getElevatedEdgeZIndex({
-				selected: E.selected,
-				zIndex: E.zIndex,
-				sourceNode: n,
-				targetNode: r,
-				elevateOnSelect: t.elevateEdgesOnSelect,
-				zIndexMode: t.zIndexMode
-			}),
-			...i || Ve
+			...i || We,
+			zIndex: a
 		};
 	}, [
 		E.source,
@@ -3846,7 +3893,8 @@ function EdgeWrapper({ id: e, edgesFocusable: t, edgesReconnectable: n, elements
 		E.sourceHandle,
 		E.targetHandle,
 		E.selected,
-		E.zIndex
+		E.zIndex,
+		C
 	]), shallow$1), q = _(() => E.markerStart ? `url('#${getMarkerId(E.markerStart, h)}')` : void 0, [E.markerStart, h]), J = _(() => E.markerEnd ? `url('#${getMarkerId(E.markerEnd, h)}')` : void 0, [E.markerEnd, h]);
 	if (E.hidden || V === null || H === null || U === null || W === null) return null;
 	let onEdgeClick = (t) => {
@@ -3951,7 +3999,7 @@ function EdgeWrapper({ id: e, edgesFocusable: t, edgesReconnectable: n, elements
 		})
 	});
 }
-var Ue = f(EdgeWrapper), selector$a = (e) => ({
+var Ke = f(EdgeWrapper), selector$9 = (e) => ({
 	edgesFocusable: e.edgesFocusable,
 	edgesReconnectable: e.edgesReconnectable,
 	elementsSelectable: e.elementsSelectable,
@@ -3959,13 +4007,13 @@ var Ue = f(EdgeWrapper), selector$a = (e) => ({
 	onError: e.onError
 });
 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$1), b = useVisibleEdgeIds(t);
+	let { edgesFocusable: g, edgesReconnectable: _, elementsSelectable: v, onError: y } = useStore(selector$9, shallow$1), b = useVisibleEdgeIds(t);
 	return S("div", {
 		className: "react-flow__edges",
-		children: [x(Oe, {
+		children: [x(je, {
 			defaultColor: e,
 			rfId: n
-		}), b.map((e) => x(Ue, {
+		}), b.map((e) => x(Ke, {
 			id: e,
 			edgesFocusable: g,
 			edgesReconnectable: _,
@@ -3989,11 +4037,19 @@ function EdgeRendererComponent({ defaultMarkerColor: e, onlyRenderVisibleElement
 	});
 }
 EdgeRendererComponent.displayName = "EdgeRenderer";
-var We = f(EdgeRendererComponent), selector$9 = (e) => `translate(${e.transform[0]}px,${e.transform[1]}px) scale(${e.transform[2]})`;
+var qe = f(EdgeRendererComponent), toTransformString = (e) => `translate(${e[0]}px,${e[1]}px) scale(${e[2]})`;
 function Viewport({ children: e }) {
-	return x("div", {
+	let t = useStoreApi(), n = v(null), [r] = y(() => t.getState().transform);
+	return ge(() => {
+		let e = null, applyTransform = () => {
+			let r = t.getState().transform;
+			e && r[0] === e[0] && r[1] === e[1] && r[2] === e[2] || (e = r, n.current && (n.current.style.transform = toTransformString(r)));
+		};
+		return applyTransform(), t.subscribe(applyTransform);
+	}, [t]), x("div", {
+		ref: n,
 		className: "react-flow__viewport xyflow__viewport react-flow__container",
-		style: { transform: useStore(selector$9) },
+		style: { transform: toTransformString(r) },
 		children: e
 	});
 }
@@ -4108,15 +4164,15 @@ var ConnectionLine = ({ style: e, type: t = N.Bezier, CustomComponent: n, isVali
 	});
 };
 ConnectionLine.displayName = "ConnectionLine";
-var Ge = {};
-function useNodeOrEdgeTypesWarning(e = Ge) {
+var Je = {};
+function useNodeOrEdgeTypesWarning(e = Je) {
 	v(e), useStoreApi(), h(() => {}, [e]);
 }
 function useStylesLoadedWarning() {
 	useStoreApi(), v(!1), h(() => {}, []);
 }
-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: C, panActivationKeyCode: w, zoomActivationKeyCode: T, deleteKeyCode: E, onlyRenderVisibleElements: D, elementsSelectable: O, defaultViewport: k, translateExtent: A, minZoom: j, maxZoom: M, preventScrolling: N, defaultMarkerColor: P, zoomOnScroll: F, zoomOnPinch: I, panOnScroll: L, panOnScrollSpeed: R, panOnScrollMode: z, zoomOnDoubleClick: B, panOnDrag: V, autoPanOnSelection: H, onPaneClick: U, onPaneMouseEnter: W, onPaneMouseMove: G, onPaneMouseLeave: K, onPaneScroll: q, onPaneContextMenu: J, paneClickDistance: ee, nodeClickDistance: Y, onEdgeContextMenu: te, onEdgeMouseEnter: X, onEdgeMouseMove: ne, onEdgeMouseLeave: re, reconnectRadius: ie, onReconnect: ae, onReconnectStart: oe, onReconnectEnd: se, noDragClassName: ce, noWheelClassName: Z, noPanClassName: le, disableKeyboardA11y: ue, nodeExtent: de, rfId: fe, viewport: pe, onViewportChange: me }) {
-	return useNodeOrEdgeTypesWarning(e), useNodeOrEdgeTypesWarning(t), useStylesLoadedWarning(), useOnInitHandler(n), useViewportSync(pe), x(we, {
+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: C, panActivationKeyCode: w, zoomActivationKeyCode: T, deleteKeyCode: E, onlyRenderVisibleElements: D, elementsSelectable: O, defaultViewport: k, translateExtent: A, minZoom: j, maxZoom: M, preventScrolling: N, defaultMarkerColor: P, zoomOnScroll: F, zoomOnPinch: I, panOnScroll: L, panOnScrollSpeed: R, panOnScrollMode: z, zoomOnDoubleClick: B, panOnDrag: V, autoPanOnSelection: H, onPaneClick: U, onPaneMouseEnter: W, onPaneMouseMove: G, onPaneMouseLeave: K, onPaneScroll: q, onPaneContextMenu: J, paneClickDistance: ee, nodeClickDistance: Y, onEdgeContextMenu: te, onEdgeMouseEnter: X, onEdgeMouseMove: ne, onEdgeMouseLeave: re, reconnectRadius: ie, onReconnect: ae, onReconnectStart: oe, onReconnectEnd: se, noDragClassName: ce, noWheelClassName: Z, noPanClassName: le, disableKeyboardA11y: ue, nodeExtent: de, rfId: fe, viewport: pe, onViewportChange: me, nodesDraggable: he }) {
+	return useNodeOrEdgeTypesWarning(e), useNodeOrEdgeTypesWarning(t), useStylesLoadedWarning(), useOnInitHandler(n), useViewportSync(pe), x(De, {
 		onPaneClick: U,
 		onPaneMouseEnter: W,
 		onPaneMouseMove: G,
@@ -4155,7 +4211,7 @@ function GraphViewComponent({ nodeTypes: e, edgeTypes: t, onInit: n, onNodeClick
 		onViewportChange: me,
 		isControlledViewport: !!pe,
 		children: S(Viewport, { children: [
-			x(We, {
+			x(qe, {
 				edgeTypes: t,
 				onEdgeClick: i,
 				onEdgeDoubleClick: o,
@@ -4180,7 +4236,7 @@ function GraphViewComponent({ nodeTypes: e, edgeTypes: t, onInit: n, onNodeClick
 				containerStyle: _
 			}),
 			x("div", { className: "react-flow__edgelabel-renderer" }),
-			x(Ee, {
+			x(ke, {
 				nodeTypes: e,
 				onNodeClick: r,
 				onNodeDoubleClick: a,
@@ -4194,14 +4250,15 @@ function GraphViewComponent({ nodeTypes: e, edgeTypes: t, onInit: n, onNodeClick
 				noDragClassName: ce,
 				disableKeyboardA11y: ue,
 				nodeExtent: de,
-				rfId: fe
+				rfId: fe,
+				nodesDraggable: he
 			}),
 			x("div", { className: "react-flow__viewport-portal" })
 		] })
 	});
 }
 GraphViewComponent.displayName = "GraphView";
-var Ke = f(GraphViewComponent), qe = createDevWarn("React Flow", "https://reactflow.dev/"), getInitialState = ({ nodes: e, edges: t, defaultNodes: n, defaultEdges: r, width: i, height: a, fitView: o, fitViewOptions: s, minZoom: c = .5, maxZoom: l = 2, nodeOrigin: u, nodeExtent: d, zIndexMode: f = "basic" } = {}) => {
+var Ye = f(GraphViewComponent), Xe = createDevWarn("React Flow", "https://reactflow.dev/"), getInitialState = ({ nodes: e, edges: t, defaultNodes: n, defaultEdges: r, width: i, height: a, fitView: o, fitViewOptions: s, minZoom: c = .5, maxZoom: l = 2, nodeOrigin: u, nodeExtent: d, zIndexMode: f = "basic" } = {}) => {
 	let p = /* @__PURE__ */ new Map(), m = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map(), _ = r ?? t ?? [], v = n ?? e ?? [], y = u ?? [0, 0], b = d ?? E;
 	updateConnectionLookup(h, g, _);
 	let { nodesInitialized: x } = adoptUserNodes(v, p, m, {
@@ -4276,15 +4333,37 @@ var Ke = f(GraphViewComponent), qe = createDevWarn("React Flow", "https://reactf
 		autoPanOnNodeFocus: !0,
 		autoPanSpeed: 15,
 		connectionRadius: 20,
-		onError: qe,
+		onError: Xe,
 		isValidConnection: void 0,
 		onSelectionChangeHandlers: [],
 		lib: "react",
 		debug: !1,
 		ariaLabelConfig: O,
 		zIndexMode: f,
+		defaultEdgeOptions: void 0,
 		onNodesChangeMiddlewareMap: /* @__PURE__ */ new Map(),
-		onEdgesChangeMiddlewareMap: /* @__PURE__ */ new Map()
+		onEdgesChangeMiddlewareMap: /* @__PURE__ */ new Map(),
+		onNodesDelete: void 0,
+		onEdgesDelete: void 0,
+		onDelete: void 0,
+		onBeforeDelete: void 0,
+		onViewportChangeStart: void 0,
+		onViewportChange: void 0,
+		onViewportChangeEnd: void 0,
+		onNodeDragStart: void 0,
+		onNodeDrag: void 0,
+		onNodeDragStop: void 0,
+		onSelectionDragStart: void 0,
+		onSelectionDrag: void 0,
+		onSelectionDragStop: void 0,
+		onMoveStart: void 0,
+		onMove: void 0,
+		onMoveEnd: void 0,
+		onConnect: void 0,
+		onConnectStart: void 0,
+		onConnectEnd: void 0,
+		onClickConnectStart: void 0,
+		onClickConnectEnd: void 0
 	};
 }, createStore = ({ nodes: e, edges: t, defaultNodes: n, defaultEdges: r, width: i, height: a, fitView: o, fitViewOptions: s, minZoom: c, maxZoom: l, nodeOrigin: u, nodeExtent: d, zIndexMode: f }) => createWithEqualityFn((p, m) => {
 	async function resolveFitView() {
@@ -4315,23 +4394,23 @@ var Ke = f(GraphViewComponent), qe = createDevWarn("React Flow", "https://reactf
 			zIndexMode: f
 		}),
 		setNodes: (e) => {
-			let { nodeLookup: t, parentLookup: n, nodeOrigin: r, elevateNodesOnSelect: i, fitViewQueued: a, zIndexMode: o, nodesSelectionActive: s } = m(), { nodesInitialized: c, hasSelectedNodes: l } = adoptUserNodes(e, t, n, {
+			let { nodeLookup: t, parentLookup: n, nodeOrigin: r, nodeExtent: i, elevateNodesOnSelect: a, fitViewQueued: o, zIndexMode: s, nodesSelectionActive: c } = m(), { nodesInitialized: l, hasSelectedNodes: u } = adoptUserNodes(e, t, n, {
 				nodeOrigin: r,
-				nodeExtent: d,
-				elevateNodesOnSelect: i,
+				nodeExtent: i,
+				elevateNodesOnSelect: a,
 				checkEquality: !0,
-				zIndexMode: o
-			}), u = s && l;
-			a && c ? (resolveFitView(), p({
+				zIndexMode: s
+			}), d = c && u;
+			o && l ? (resolveFitView(), p({
 				nodes: e,
-				nodesInitialized: c,
+				nodesInitialized: l,
 				fitViewQueued: !1,
 				fitViewOptions: void 0,
-				nodesSelectionActive: u
+				nodesSelectionActive: d
 			})) : p({
 				nodes: e,
-				nodesInitialized: c,
-				nodesSelectionActive: u
+				nodesInitialized: l,
+				nodesSelectionActive: d
 			});
 		},
 		setEdges: (e) => {
@@ -4449,7 +4528,7 @@ var Ke = f(GraphViewComponent), qe = createDevWarn("React Flow", "https://reactf
 		},
 		setNodeExtent: (e) => {
 			let { nodes: t, nodeLookup: n, parentLookup: r, nodeOrigin: i, elevateNodesOnSelect: a, nodeExtent: o, zIndexMode: s } = m();
-			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, {
+			(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,
@@ -4509,7 +4588,7 @@ function ReactFlowProvider({ initialNodes: e, initialEdges: t, defaultNodes: n,
 	}));
 	return x(ne, {
 		value: m,
-		children: x(BatchProvider, { children: p })
+		children: x(BatchProvider, { children: x(HandleConfigProvider, { children: p }) })
 	});
 }
 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 }) {
@@ -4530,14 +4609,14 @@ function Wrapper({ children: e, nodes: t, edges: n, defaultNodes: r, defaultEdge
 		children: e
 	});
 }
-var Je = {
+var Ze = {
 	width: "100%",
 	height: "100%",
 	overflow: "hidden",
 	position: "relative",
 	zIndex: 0
 };
-function ReactFlow({ nodes: e, edges: t, defaultNodes: n, defaultEdges: r, className: i, nodeTypes: a, edgeTypes: o, onNodeClick: s, onEdgeClick: c, onInit: l, onMove: u, onMoveStart: d, onMoveEnd: f, onConnect: m, onConnectStart: h, onConnectEnd: g, onClickConnectStart: _, onClickConnectEnd: v, onNodeMouseEnter: y, onNodeMouseMove: b, onNodeMouseLeave: C, onNodeContextMenu: w, onNodeDoubleClick: T, onNodeDragStart: D, onNodeDrag: O, onNodeDragStop: k, onNodesDelete: M, onEdgesDelete: P, onDelete: F, onSelectionChange: I, onSelectionDragStart: L, onSelectionDrag: R, onSelectionDragStop: z, onSelectionContextMenu: B, onSelectionStart: V, onSelectionEnd: H, onBeforeDelete: U, connectionMode: W, connectionLineType: G = N.Bezier, connectionLineStyle: K, connectionLineComponent: q, connectionLineContainerStyle: J, deleteKeyCode: ee = "Backspace", selectionKeyCode: Y = "Shift", selectionOnDrag: te = !1, selectionMode: X = j.Full, panActivationKeyCode: ne = "Space", multiSelectionKeyCode: re = isMacOs() ? "Meta" : "Control", zoomActivationKeyCode: ie = isMacOs() ? "Meta" : "Control", snapToGrid: ae, snapGrid: oe, onlyRenderVisibleElements: se = !1, selectNodesOnDrag: ce, nodesDraggable: Z, autoPanOnNodeFocus: de, nodesConnectable: fe, nodesFocusable: pe, nodeOrigin: me = le, edgesFocusable: he, edgesReconnectable: ge, elementsSelectable: _e = !0, defaultViewport: ve = ue, minZoom: ye = .5, maxZoom: be = 2, translateExtent: Q = E, preventScrolling: xe = !0, nodeExtent: Se, defaultMarkerColor: Ce = "#b1b1b7", zoomOnScroll: we = !0, zoomOnPinch: Te = !0, panOnScroll: Ee = !1, panOnScrollSpeed: De = .5, panOnScrollMode: Oe = A.Free, zoomOnDoubleClick: ke = !0, panOnDrag: Ae = !0, onPaneClick: je, onPaneMouseEnter: Me, onPaneMouseMove: Ne, onPaneMouseLeave: Pe, onPaneScroll: Fe, onPaneContextMenu: Ie, paneClickDistance: Le = 1, nodeClickDistance: Re = 0, children: ze, onReconnect: Be, onReconnectStart: Ve, onReconnectEnd: He, onEdgeContextMenu: Ue, onEdgeDoubleClick: We, onEdgeMouseEnter: Ge, onEdgeMouseMove: qe, onEdgeMouseLeave: Ye, reconnectRadius: $ = 10, onNodesChange: Xe, onEdgesChange: Ze, noDragClassName: Qe = "nodrag", noWheelClassName: $e = "nowheel", noPanClassName: et = "nopan", fitView: tt, fitViewOptions: nt, connectOnClick: rt, attributionPosition: it, proOptions: at, defaultEdgeOptions: ot, elevateNodesOnSelect: st = !0, elevateEdgesOnSelect: ct = !1, disableKeyboardA11y: lt = !1, autoPanOnConnect: ut, autoPanOnNodeDrag: dt, autoPanOnSelection: ft = !0, autoPanSpeed: pt, connectionRadius: mt, isValidConnection: ht, onError: gt, style: _t, id: vt, nodeDragThreshold: yt, connectionDragThreshold: bt, viewport: xt, onViewportChange: St, width: Ct, height: wt, colorMode: Tt = "light", debug: Et, onScroll: Dt, ariaLabelConfig: Ot, zIndexMode: kt = "basic", ...At }, jt) {
+function ReactFlow({ nodes: e, edges: t, defaultNodes: n, defaultEdges: r, className: i, nodeTypes: a, edgeTypes: o, onNodeClick: s, onEdgeClick: c, onInit: l, onMove: u, onMoveStart: d, onMoveEnd: f, onConnect: m, onConnectStart: h, onConnectEnd: g, onClickConnectStart: _, onClickConnectEnd: v, onNodeMouseEnter: y, onNodeMouseMove: b, onNodeMouseLeave: C, onNodeContextMenu: w, onNodeDoubleClick: T, onNodeDragStart: D, onNodeDrag: O, onNodeDragStop: k, onNodesDelete: M, onEdgesDelete: P, onDelete: F, onSelectionChange: I, onSelectionDragStart: L, onSelectionDrag: R, onSelectionDragStop: z, onSelectionContextMenu: B, onSelectionStart: V, onSelectionEnd: H, onBeforeDelete: U, connectionMode: W, connectionLineType: G = N.Bezier, connectionLineStyle: K, connectionLineComponent: q, connectionLineContainerStyle: J, deleteKeyCode: ee = "Backspace", selectionKeyCode: Y = "Shift", selectionOnDrag: te = !1, selectionMode: X = j.Full, panActivationKeyCode: ne = "Space", multiSelectionKeyCode: re = isMacOs() ? "Meta" : "Control", zoomActivationKeyCode: ie = isMacOs() ? "Meta" : "Control", snapToGrid: ae, snapGrid: oe, onlyRenderVisibleElements: se = !1, selectNodesOnDrag: ce, nodesDraggable: Z, autoPanOnNodeFocus: le, nodesConnectable: fe, nodesFocusable: pe, nodeOrigin: me = ue, edgesFocusable: he, edgesReconnectable: ge, elementsSelectable: _e = !0, defaultViewport: ve = de, minZoom: Q = .5, maxZoom: ye = 2, translateExtent: be = E, preventScrolling: xe = !0, nodeExtent: Se, defaultMarkerColor: Ce = "#b1b1b7", zoomOnScroll: we = !0, zoomOnPinch: Te = !0, panOnScroll: Ee = !1, panOnScrollSpeed: De = .5, panOnScrollMode: Oe = A.Free, zoomOnDoubleClick: ke = !0, panOnDrag: Ae = !0, onPaneClick: je, onPaneMouseEnter: Me, onPaneMouseMove: Ne, onPaneMouseLeave: Pe, onPaneScroll: Fe, onPaneContextMenu: Ie, paneClickDistance: Le = 1, nodeClickDistance: Re = 0, children: ze, onReconnect: Be, onReconnectStart: Ve, onReconnectEnd: He, onEdgeContextMenu: Ue, onEdgeDoubleClick: We, onEdgeMouseEnter: Ge, onEdgeMouseMove: Ke, onEdgeMouseLeave: qe, reconnectRadius: Je = 10, onNodesChange: Xe, onEdgesChange: Qe, noDragClassName: $ = "nodrag", noWheelClassName: $e = "nowheel", noPanClassName: et = "nopan", fitView: tt, fitViewOptions: nt, connectOnClick: rt, attributionPosition: it, proOptions: at, defaultEdgeOptions: ot, elevateNodesOnSelect: st = !0, elevateEdgesOnSelect: ct = !1, disableKeyboardA11y: lt = !1, autoPanOnConnect: ut, autoPanOnNodeDrag: dt, autoPanOnSelection: ft = !0, autoPanSpeed: pt, connectionRadius: mt, isValidConnection: ht, onError: gt, style: _t, id: vt, nodeDragThreshold: yt, connectionDragThreshold: bt, viewport: xt, onViewportChange: St, width: Ct, height: wt, colorMode: Tt = "light", debug: Et, onScroll: Dt, ariaLabelConfig: Ot, zIndexMode: kt = "basic", ...At }, jt) {
 	let Mt = vt || "1", Nt = useColorModeClass(Tt), Pt = p((e) => {
 		e.currentTarget.scrollTo({
 			top: 0,
@@ -4551,7 +4630,7 @@ function ReactFlow({ nodes: e, edges: t, defaultNodes: n, defaultEdges: r, class
 		onScroll: Pt,
 		style: {
 			..._t,
-			...Je
+			...Ze
 		},
 		ref: jt,
 		className: cc([
@@ -4568,8 +4647,8 @@ function ReactFlow({ nodes: e, edges: t, defaultNodes: n, defaultEdges: r, class
 			height: wt,
 			fitView: tt,
 			fitViewOptions: nt,
-			minZoom: ye,
-			maxZoom: be,
+			minZoom: Q,
+			maxZoom: ye,
 			nodeOrigin: me,
 			nodeExtent: Se,
 			zIndexMode: kt,
@@ -4585,7 +4664,7 @@ function ReactFlow({ nodes: e, edges: t, defaultNodes: n, defaultEdges: r, class
 					onClickConnectStart: _,
 					onClickConnectEnd: v,
 					nodesDraggable: Z,
-					autoPanOnNodeFocus: de,
+					autoPanOnNodeFocus: le,
 					nodesConnectable: fe,
 					nodesFocusable: pe,
 					edgesFocusable: he,
@@ -4593,15 +4672,15 @@ function ReactFlow({ nodes: e, edges: t, defaultNodes: n, defaultEdges: r, class
 					elementsSelectable: _e,
 					elevateNodesOnSelect: st,
 					elevateEdgesOnSelect: ct,
-					minZoom: ye,
-					maxZoom: be,
+					minZoom: Q,
+					maxZoom: ye,
 					nodeExtent: Se,
 					onNodesChange: Xe,
-					onEdgesChange: Ze,
+					onEdgesChange: Qe,
 					snapToGrid: ae,
 					snapGrid: oe,
 					connectionMode: W,
-					translateExtent: Q,
+					translateExtent: be,
 					connectOnClick: rt,
 					defaultEdgeOptions: ot,
 					fitView: tt,
@@ -4635,7 +4714,7 @@ function ReactFlow({ nodes: e, edges: t, defaultNodes: n, defaultEdges: r, class
 					ariaLabelConfig: Ot,
 					zIndexMode: kt
 				}),
-				x(Ke, {
+				x(Ye, {
 					onInit: l,
 					onNodeClick: s,
 					onEdgeClick: c,
@@ -4659,9 +4738,9 @@ function ReactFlow({ nodes: e, edges: t, defaultNodes: n, defaultEdges: r, class
 					zoomActivationKeyCode: ie,
 					onlyRenderVisibleElements: se,
 					defaultViewport: ve,
-					translateExtent: Q,
-					minZoom: ye,
-					maxZoom: be,
+					translateExtent: be,
+					minZoom: Q,
+					maxZoom: ye,
 					preventScrolling: xe,
 					zoomOnScroll: we,
 					zoomOnPinch: Te,
@@ -4688,18 +4767,19 @@ function ReactFlow({ nodes: e, edges: t, defaultNodes: n, defaultEdges: r, class
 					onEdgeContextMenu: Ue,
 					onEdgeDoubleClick: We,
 					onEdgeMouseEnter: Ge,
-					onEdgeMouseMove: qe,
-					onEdgeMouseLeave: Ye,
-					reconnectRadius: $,
+					onEdgeMouseMove: Ke,
+					onEdgeMouseLeave: qe,
+					reconnectRadius: Je,
 					defaultMarkerColor: Ce,
-					noDragClassName: Qe,
+					noDragClassName: $,
 					noWheelClassName: $e,
 					noPanClassName: et,
 					rfId: Mt,
 					disableKeyboardA11y: lt,
 					nodeExtent: Se,
 					viewport: xt,
-					onViewportChange: St
+					onViewportChange: St,
+					nodesDraggable: Z
 				}),
 				x(SelectionListener, { onSelectionChange: I }),
 				ze,
@@ -4715,7 +4795,7 @@ function ReactFlow({ nodes: e, edges: t, defaultNodes: n, defaultEdges: r, class
 		})
 	});
 }
-var Ye = fixedForwardRef(ReactFlow), selector$6 = (e) => e.domNode?.querySelector(".react-flow__edgelabel-renderer");
+var Qe = fixedForwardRef(ReactFlow), selector$6 = (e) => e.domNode?.querySelector(".react-flow__edgelabel-renderer");
 function EdgeLabelRenderer({ children: e }) {
 	let t = useStore(selector$6);
 	return t ? w(e, t) : null;
@@ -4767,7 +4847,7 @@ var $;
 (function(e) {
 	e.Lines = "lines", e.Dots = "dots", e.Cross = "cross";
 })($ ||= {});
-var Xe = {
+var $e = {
 	[$.Dots]: 1,
 	[$.Lines]: 1,
 	[$.Cross]: 6
@@ -4776,12 +4856,12 @@ var Xe = {
 	patternId: `pattern-${e.rfId}`
 });
 function BackgroundComponent({ id: e, variant: t = $.Dots, gap: n = 20, size: r, lineWidth: i = 1, offset: a = 0, color: o, bgColor: s, style: c, className: l, patternClassName: u }) {
-	let d = v(null), { transform: f, patternId: p } = useStore(selector$3, shallow$1), m = r || Xe[t], h = t === $.Dots, g = t === $.Cross, _ = Array.isArray(n) ? n : [n, n], y = [_[0] * f[2] || 1, _[1] * f[2] || 1], b = m * f[2], C = Array.isArray(a) ? a : [a, a], w = g ? [b, b] : y, T = [C[0] * f[2] || 1 + w[0] / 2, C[1] * f[2] || 1 + w[1] / 2], E = `${p}${e || ""}`;
+	let d = v(null), { transform: f, patternId: p } = useStore(selector$3, shallow$1), m = r || $e[t], h = t === $.Dots, g = t === $.Cross, _ = Array.isArray(n) ? n : [n, n], y = [_[0] * f[2] || 1, _[1] * f[2] || 1], b = m * f[2], C = Array.isArray(a) ? a : [a, a], w = g ? [b, b] : y, T = [C[0] * f[2] + w[0] / 2, C[1] * f[2] + w[1] / 2], E = `${p}${e || ""}`;
 	return S("svg", {
 		className: cc(["react-flow__background", l]),
 		style: {
 			...c,
-			...ve,
+			...Q,
 			"--xy-background-color-props": s,
 			"--xy-background-pattern-color-props": o
 		},
@@ -4814,7 +4894,7 @@ function BackgroundComponent({ id: e, variant: t = $.Dots, gap: n = 20, size: r,
 	});
 }
 BackgroundComponent.displayName = "Background";
-var Ze = f(BackgroundComponent);
+var et = f(BackgroundComponent);
 function PlusIcon() {
 	return x("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
@@ -4923,7 +5003,7 @@ function ControlsComponent({ style: e, showZoom: t = !0, showFitView: n = !0, sh
 	});
 }
 ControlsComponent.displayName = "Controls";
-var Qe = f(ControlsComponent);
+var tt = f(ControlsComponent);
 function MiniMapNodeComponent({ id: e, x: t, y: n, width: r, height: i, style: a, color: o, strokeColor: s, strokeWidth: c, className: l, borderRadius: u, shapeRendering: d, selected: f, onClick: p }) {
 	let { background: m, backgroundColor: h } = a || {}, g = o || m || h;
 	return x("rect", {
@@ -4947,10 +5027,10 @@ function MiniMapNodeComponent({ id: e, x: t, y: n, width: r, height: i, style: a
 		onClick: p ? (t) => p(t, e) : void 0
 	});
 }
-var $e = f(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 = $e, onClick: o }) {
+var nt = f(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 = nt, onClick: o }) {
 	let s = useStore(selectorNodeIds, shallow$1), c = getAttrFunction(t), l = getAttrFunction(e), u = getAttrFunction(n), d = typeof window > "u" || window.chrome ? "crispEdges" : "geometricPrecision";
-	return x(b, { children: s.map((e) => x(et, {
+	return x(b, { children: s.map((e) => x(rt, {
 		id: e,
 		nodeColorFunc: c,
 		nodeStrokeColorFunc: l,
@@ -4998,16 +5078,20 @@ function NodeComponentWrapperInner({ id: e, nodeColorFunc: t, nodeStrokeColorFun
 		id: l.id
 	});
 }
-var et = f(NodeComponentWrapperInner), tt = f(MiniMapNodes), nt = 200, rt = 150, filterHidden = (e) => !e.hidden, selector$1 = (e) => {
+var rt = f(NodeComponentWrapperInner), it = f(MiniMapNodes), at = 200, ot = 150, filterHidden = (e) => !e.hidden, selector$1 = (e) => {
 	let t = {
 		x: -e.transform[0] / e.transform[2],
 		y: -e.transform[1] / e.transform[2],
 		width: e.width / e.transform[2],
 		height: e.height / e.transform[2]
-	};
+	}, n = !1;
+	for (let t of e.nodeLookup.values()) if (!t.hidden) {
+		n = !0;
+		break;
+	}
 	return {
 		viewBB: t,
-		boundingRect: e.nodeLookup.size > 0 ? getBoundsOfRects(getInternalNodesBounds(e.nodeLookup, { filter: filterHidden }), t) : t,
+		boundingRect: n ? getBoundsOfRects(getInternalNodesBounds(e.nodeLookup, { filter: filterHidden }), t) : t,
 		rfId: e.rfId,
 		panZoom: e.panZoom,
 		translateExtent: e.translateExtent,
@@ -5015,19 +5099,20 @@ var et = f(NodeComponentWrapperInner), tt = f(MiniMapNodes), nt = 200, rt = 150,
 		flowHeight: e.height,
 		ariaLabelConfig: e.ariaLabelConfig
 	};
-}, it = "react-flow__minimap-desc";
+}, rectEqual = (e, t) => e.x === t.x && e.y === t.y && e.width === t.width && e.height === t.height, areEqual = (e, t) => rectEqual(e.viewBB, t.viewBB) && rectEqual(e.boundingRect, t.boundingRect) && e.rfId === t.rfId && e.panZoom === t.panZoom && e.translateExtent === t.translateExtent && e.flowWidth === t.flowWidth && e.flowHeight === t.flowHeight && e.ariaLabelConfig === t.ariaLabelConfig, st = "react-flow__minimap-desc";
 function MiniMapComponent({ style: e, className: t, nodeStrokeColor: n, nodeColor: r, nodeClassName: i = "", nodeBorderRadius: a = 5, nodeStrokeWidth: o, nodeComponent: s, bgColor: c, maskColor: l, maskStrokeColor: u, maskStrokeWidth: d, position: f = "bottom-right", onClick: m, onNodeClick: g, pannable: _ = !1, zoomable: y = !1, ariaLabel: b, inversePan: C, zoomStep: w = 1, offsetScale: T = 5 }) {
-	let E = useStoreApi(), D = v(null), { boundingRect: O, viewBB: k, rfId: A, panZoom: j, translateExtent: M, flowWidth: N, flowHeight: P, ariaLabelConfig: F } = useStore(selector$1, shallow$1), I = e?.width ?? nt, L = e?.height ?? rt, R = O.width / I, z = O.height / L, B = Math.max(R, z), V = B * I, H = B * L, U = T * B, W = O.x - (V - O.width) / 2 - U, G = O.y - (H - O.height) / 2 - U, K = V + U * 2, q = H + U * 2, J = `${it}-${A}`, ee = v(0), Y = v();
+	let E = useStoreApi(), D = v(null), { boundingRect: O, panZoom: k, viewBB: A, rfId: j, translateExtent: M, flowWidth: N, flowHeight: P, ariaLabelConfig: F } = useStore(selector$1, areEqual), I = e?.width ?? at, L = e?.height ?? ot, R = O.width / I, z = O.height / L, B = Math.max(R, z), V = B * I, H = B * L, U = T * B, W = O.x - (V - O.width) / 2 - U, G = O.y - (H - O.height) / 2 - U, K = V + U * 2, q = H + U * 2, J = `${st}-${j}`, ee = v(0), Y = v();
 	ee.current = B, h(() => {
-		if (D.current && j) return Y.current = XYMinimap({
+		let e = E.getState().panZoom;
+		if (D.current && e) return Y.current = XYMinimap({
 			domNode: D.current,
-			panZoom: j,
+			panZoom: e,
 			getTransform: () => E.getState().transform,
 			getViewScale: () => ee.current
 		}), () => {
 			Y.current?.destroy();
 		};
-	}, [j]), h(() => {
+	}, [k]), h(() => {
 		Y.current?.update({
 			translateExtent: M,
 			width: N,
@@ -5052,10 +5137,10 @@ function MiniMapComponent({ style: e, className: t, nodeStrokeColor: n, nodeColo
 			x: t,
 			y: n
 		});
-	} : void 0, X = g ? p((e, t) => {
+	} : void 0, X = p((e, t) => {
 		let n = E.getState().nodeLookup.get(t).internals.userNode;
-		g(e, n);
-	}, []) : void 0, ne = b ?? F["minimap.ariaLabel"];
+		g?.(e, n);
+	}, [g]), ne = g ? X : void 0, re = b ?? F["minimap.ariaLabel"];
 	return x(Z, {
 		position: f,
 		style: {
@@ -5080,12 +5165,12 @@ function MiniMapComponent({ style: e, className: t, nodeStrokeColor: n, nodeColo
 			ref: D,
 			onClick: te,
 			children: [
-				ne && x("title", {
+				re && x("title", {
 					id: J,
-					children: ne
+					children: re
 				}),
-				x(tt, {
-					onClick: X,
+				x(it, {
+					onClick: ne,
 					nodeColor: r,
 					nodeStrokeColor: n,
 					nodeBorderRadius: a,
@@ -5096,7 +5181,7 @@ function MiniMapComponent({ style: e, className: t, nodeStrokeColor: n, nodeColo
 				x("path", {
 					className: "react-flow__minimap-mask",
 					d: `M${W - U},${G - U}h${K + U * 2}v${q + U * 2}h${-K - U * 2}z
-        M${k.x},${k.y}h${k.width}v${k.height}h${-k.width}z`,
+        M${A.x},${A.y}h${A.width}v${A.height}h${-A.width}z`,
 					fillRule: "evenodd",
 					pointerEvents: "none"
 				})
@@ -5105,13 +5190,13 @@ function MiniMapComponent({ style: e, className: t, nodeStrokeColor: n, nodeColo
 	});
 }
 MiniMapComponent.displayName = "MiniMap", f(MiniMapComponent);
-var scaleSelector = (e) => (t) => e ? `${Math.max(1 / t.transform[2], 1)}` : void 0, at = {
+var scaleSelector = (e) => (t) => e ? `${Math.max(1 / t.transform[2], 1)}` : void 0, ct = {
 	[K.Line]: "right",
 	[K.Handle]: "bottom-right"
 };
 function ResizeControl({ nodeId: e, position: t, variant: n = K.Handle, className: r, style: i = void 0, children: a, color: o, minWidth: s = 10, minHeight: c = 10, maxWidth: l = Number.MAX_VALUE, maxHeight: u = Number.MAX_VALUE, keepAspectRatio: d = !1, resizeDirection: f, autoScale: m = !0, shouldResize: g, onResizeStart: _, onResize: y, onResizeEnd: b }) {
-	let S = useNodeId(), C = typeof e == "string" ? e : S, w = useStoreApi(), T = v(null), E = n === K.Handle, D = useStore(p(scaleSelector(E && m), [E, m]), shallow$1), O = v(null), k = t ?? at[n];
-	return h(() => {
+	let S = useNodeId(), C = typeof e == "string" ? e : S, w = useStoreApi(), T = v(null), E = n === K.Handle, D = useStore(p(scaleSelector(E && m), [E, m]), shallow$1), O = v(null), k = t ?? ct[n];
+	h(() => {
 		if (!(!T.current || !C)) return O.current ||= XYResizer({
 			domNode: T.current,
 			nodeId: C,
@@ -5219,11 +5304,13 @@ function ResizeControl({ nodeId: e, position: t, variant: n = K.Handle, classNam
 		y,
 		b,
 		g
-	]), x("div", {
+	]);
+	let A = k.split("-");
+	return x("div", {
 		className: cc([
 			"react-flow__resize-control",
 			"nodrag",
-			...k.split("-"),
+			...A,
 			n,
 			r
 		]),
@@ -5258,18 +5345,18 @@ function NodeToolbar({ nodeId: e, children: t, className: n, style: r, isVisible
 		return r && e.set(r.id, r), e;
 	}, /* @__PURE__ */ new Map()), [e, l]), nodesEqualityFn), { x: d, y: f, zoom: m, selectedNodesCount: h } = useStore(storeSelector, shallow$1);
 	if (!(typeof i == "boolean" ? i : u.size === 1 && u.values().next().value?.selected && h === 1) || !u.size) return null;
-	let g = getInternalNodesBounds(u), _ = Array.from(u.values()), v = Math.max(..._.map((e) => e.internals.z + 1));
+	let g = getInternalNodesBounds(u), _ = Array.from(u.values()), v = Math.max(..._.map((e) => e.internals.z + 1)), y = {
+		position: "absolute",
+		transform: getNodeToolbarTransform(g, {
+			x: d,
+			y: f,
+			zoom: m
+		}, a, o, s),
+		zIndex: v,
+		...r
+	};
 	return x(NodeToolbarPortal, { children: x("div", {
-		style: {
-			position: "absolute",
-			transform: getNodeToolbarTransform(g, {
-				x: d,
-				y: f,
-				zoom: m
-			}, a, o, s),
-			zIndex: v,
-			...r
-		},
+		style: y,
 		className: cc(["react-flow__node-toolbar", n]),
 		...c,
 		"data-id": _.reduce((e, t) => `${e}${t.id} `, "").trim(),
@@ -5277,4 +5364,4 @@ function NodeToolbar({ nodeId: e, children: t, className: n, style: r, isVisible
 	}) });
 }
 //#endregion
-export { getViewportForBounds as C, getSmoothStepPath as S, nodeToRect as T, F as _, Q as a, getNodeDimensions as b, ReactFlowProvider as c, applyNodeChanges as d, Ye as f, useStoreApi as g, useStore as h, EdgeLabelRenderer as i, ViewportPortal as l, useReactFlow as m, $ as n, NodeToolbar as o, useNodesData as p, Qe as r, Z as s, Ze as t, applyEdgeChanges as u, getBezierPath as v, isMacOs as w, getNodesBounds as x, getEdgePosition as y };
+export { getViewportForBounds as C, getSmoothStepPath as S, nodeToRect as T, F as _, Ce as a, getNodeDimensions as b, ReactFlowProvider as c, applyNodeChanges as d, Qe as f, useStoreApi as g, useStore as h, EdgeLabelRenderer as i, ViewportPortal as l, useReactFlow as m, $ as n, NodeToolbar as o, useNodesData as p, tt as r, Z as s, et as t, applyEdgeChanges as u, getBezierPath as v, isMacOs as w, getNodesBounds as x, getEdgePosition as y };