@dschz/solid-flow 0.2.3 → 0.3.0-next.0

package/dist/index/index.js

@@ -1,13 +1,11 @@
-import { Dynamic, Portal, addEventListener, className, createComponent, delegateEvents, effect, insert, isServer, memo, mergeProps, setAttribute, spread, style, template, use } from "solid-js/web";
-import { For, Index, Show, batch, createComputed, createContext, createEffect, createMemo, createSignal, mapArray, mergeProps as mergeProps$1, onCleanup, onMount, splitProps, untrack, useContext } from "solid-js";
+import { Dynamic, Portal, addEvent, claimElement, className, createComponent, delegateEvents, effect, insert, isServer, memo, mergeProps, ref, setAttribute, setStyleProperty, spread, style, template } from "@solidjs/web";
+import { For, Show, createContext, createEffect, createMemo, createRenderEffect, createSignal, createStore, flush, mapArray, merge, omit, onCleanup, onSettled, snapshot, untrack, useContext } from "solid-js";
 import { ReactiveMap } from "@solid-primitives/map";
 import { createMediaQuery } from "@solid-primitives/media";
-import { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, SelectionMode as SelectionMode$1, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdge, addEdge as addEdge$1, areConnectionMapsEqual, calcAutoPan, calculateNodePosition, clampPosition, clampPositionToParent, createDevWarn, createMarkerIds, elementSelectionKeys, evaluateAbsolutePosition, fitViewport, getBezierEdgeCenter, getBezierPath, getBezierPath as getBezierPath$1, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getEdgeCenter, getEdgePosition, getEdgeToolbarTransform, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHostForElement, getIncomers, getInternalNodesBounds, getMarkerId, getNodeDimensions, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesBounds as getNodesBounds$1, getNodesInside, getOutgoers, getOverlappingArea, getSmoothStepPath, getSmoothStepPath as getSmoothStepPath$1, getStraightPath, getStraightPath as getStraightPath$1, getViewportForBounds, getViewportForBounds as getViewportForBounds$1, handleConnectionChange, infiniteExtent, initialConnection, isCoordinateExtent, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isNodeBase, isNumeric, isRectObject, mergeAriaLabelConfig, nodeHasDimensions, nodeToRect, panBy, pointToRendererPoint, rendererPointToPoint, shallowNodeData, snapPosition, updateAbsolutePositions, updateNodeInternals } from "@xyflow/system";
-import { createStore, produce, unwrap } from "solid-js/store";
-import clsx$1, { clsx } from "clsx";
-import { createResizeObserver } from "@solid-primitives/resize-observer";
+import { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, Position as Position$1, ResizeControlVariant, SelectionMode, SelectionMode as SelectionMode$1, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdge, addEdge as addEdge$1, areConnectionMapsEqual, calcAutoPan, calculateNodePosition, clampPosition, clampPositionToParent, createDevWarn, createMarkerIds, elementSelectionKeys, evaluateAbsolutePosition, fitViewport, getBezierEdgeCenter, getBezierPath, getBezierPath as getBezierPath$1, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getEdgeCenter, getEdgePosition, getEdgeToolbarTransform, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHostForElement, getIncomers, getInternalNodesBounds, getMarkerId, getNodeDimensions, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesBounds as getNodesBounds$1, getNodesInside, getOutgoers, getOverlappingArea, getSmoothStepPath, getSmoothStepPath as getSmoothStepPath$1, getStraightPath, getStraightPath as getStraightPath$1, getViewportForBounds, getViewportForBounds as getViewportForBounds$1, handleConnectionChange, infiniteExtent, initialConnection, isCoordinateExtent, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isNodeBase, isNumeric, isRectObject, mergeAriaLabelConfig, nodeHasDimensions, nodeToRect, panBy, pointToRendererPoint, rendererPointToPoint, shallowNodeData, snapPosition, updateAbsolutePositions, updateNodeInternals } from "@xyflow/system";
+import { createEventListener, createEventListenerMap } from "@solid-primitives/event-listener";
 //#region src/components/contexts/edgeId.tsx
-const EdgeIdContext = createContext();
+const EdgeIdContext = createContext(null);
 function useEdgeId() {
 	let ctx = useContext(EdgeIdContext);
 	if (!ctx) throw Error("solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useEdgeId");
@@ -39,46 +37,26 @@ const isNode = (element) => isNodeBase(element), isEdge = (element) => isEdgeBas
 		x: 1,
 		y: 0
 	}
-};
+}, scheduleIdleCallback = typeof requestIdleCallback == "function" ? requestIdleCallback : (callback) => setTimeout(callback, 0);
 /**
-* Creates a signal that can also be updated if the accessor updates.
-* @param accessor - A function that returns the initial value for the signal
-* @returns A tuple of [getter, setter] similar to createSignal, but the signal is recreated when the accessor's value changes
-* @remarks This is useful when you need a signal that can be manually set but also updates when its source value changes
-* @example
-* ```ts
-* const [width, setWidth] = createWritable(() => config().width);
-* // width() will return config().width initially
-* // setWidth(100) will update the signal to 100
-* // If config().width changes, a new signal width() is updated to the new value
-* ```
+* Reactive prop defaulting with skip-undefined semantics: a prop counts as
+* "absent" when it reads `undefined`, so parents forwarding optional props
+* (e.g. `<Handle position={props.targetPosition} />`) do not clobber defaults.
+* This is deliberate policy on top of Solid 2.0's `merge`, where `undefined`
+* is a real value that overrides.
 */
-function createWritable(accessor) {
-	let signal = createMemo(() => createSignal(accessor()));
-	return [() => signal()[0](), (v) => signal()[1](v)];
-}
-function createWritableStore(accessor) {
-	let storeMemo = createMemo(() => {
-		let [get, set] = createStore(accessor());
-		return {
-			get,
-			set
-		};
+function propDefaults(props, defaults) {
+	let out = {}, keys = /* @__PURE__ */ new Set([...Object.keys(defaults), ...Object.keys(props)]);
+	for (let key of keys) Object.defineProperty(out, key, {
+		get: () => props[key] === void 0 ? defaults[key] : props[key],
+		enumerable: !0,
+		configurable: !0
 	});
-	return {
-		get() {
-			return storeMemo().get;
-		},
-		get set() {
-			return storeMemo().set;
-		}
-	};
+	return out;
 }
-/**
-* Schedules a callback during idle time, falling back to a macrotask where
-* `requestIdleCallback` is unavailable (Safari, jsdom).
-*/
-const scheduleIdleCallback = typeof requestIdleCallback == "function" ? requestIdleCallback : (callback) => setTimeout(callback, 0), EdgeLabelRenderer = (props) => {
+//#endregion
+//#region src/components/graph/edge/EdgeLabelRenderer.tsx
+const EdgeLabelRenderer = (props) => {
 	let { store } = useInternalSolidFlow(), labelNode = () => store.domNode?.querySelector(".solid-flow__edge-labels");
 	return createComponent(Show, {
 		get when() {
@@ -96,117 +74,102 @@ const scheduleIdleCallback = typeof requestIdleCallback == "function" ? requestI
 };
 //#endregion
 //#region src/components/graph/edge/EdgeLabel.tsx
-var _tmpl$$34 = /*#__PURE__*/ template("<div role=button tabindex=-1>");
+var _tmpl$$34 = /* @__PURE__ */ template("<div>");
 const EdgeLabel = (props) => {
-	let _props = mergeProps$1({
+	let _props = propDefaults(props, {
 		x: 0,
 		y: 0,
 		selectEdgeOnClick: !1,
 		transparent: !1,
 		style: {}
-	}, props), [local, rest] = splitProps(_props, [
-		"x",
-		"y",
-		"width",
-		"height",
-		"selectEdgeOnClick",
-		"transparent",
-		"children",
-		"class",
-		"style"
-	]), { actions } = useInternalSolidFlow(), id = useEdgeId(), zIndex = () => actions.getEdge(id())?.zIndex;
+	}), rest = omit(_props, "x", "y", "width", "height", "selectEdgeOnClick", "transparent", "children", "class", "style"), { actions } = useInternalSolidFlow(), id = useEdgeId(), zIndex = () => actions.getEdge(id())?.zIndex;
 	return createComponent(EdgeLabelRenderer, { get children() {
 		var _el$ = _tmpl$$34();
-		return _el$.$$click = () => {
-			local.selectEdgeOnClick && actions.handleEdgeSelection(id());
-		}, spread(_el$, mergeProps({
+		return spread(_el$, mergeProps({
+			role: "button",
+			tabindex: -1,
 			get class() {
-				return clsx$1("solid-flow__edge-label", { transparent: local.transparent }, local.class);
+				return [
+					"solid-flow__edge-label",
+					{ transparent: _props.transparent },
+					_props.class
+				];
 			},
 			get style() {
 				return {
 					"pointer-events": "all",
-					width: toPxString(local.width),
-					height: toPxString(local.height),
-					transform: `translate(-50%, -50%) translate(${local.x}px,${local.y}px)`,
-					cursor: local.selectEdgeOnClick ? "pointer" : void 0,
+					width: toPxString(_props.width),
+					height: toPxString(_props.height),
+					transform: `translate(-50%, -50%) translate(${_props.x}px,${_props.y}px)`,
+					cursor: _props.selectEdgeOnClick ? "pointer" : void 0,
 					"z-index": zIndex(),
-					...local.style
+					..._props.style
 				};
+			},
+			onClick: () => {
+				_props.selectEdgeOnClick && actions.handleEdgeSelection(id());
 			}
-		}, rest), !1, !0), insert(_el$, () => local.children), _el$;
+		}, rest), !0), insert(_el$, () => _props.children), _el$;
 	} });
 };
-delegateEvents(["click"]);
 //#endregion
 //#region src/components/graph/edge/BaseEdge.tsx
-var _tmpl$$33 = /*#__PURE__*/ template("<svg><path fill=none></svg>", !1, !0, !1), _tmpl$2$4 = /*#__PURE__*/ template("<svg><path stroke-opacity=0 fill=none class=solid-flow__edge-interaction></svg>", !1, !0, !1);
+var _tmpl$$33 = /* @__PURE__ */ template("<svg><path></svg>", 2), _tmpl$2$4 = /* @__PURE__ */ template("<svg><path stroke-opacity=0 fill=none class=solid-flow__edge-interaction></svg>", 2);
 const BaseEdge = (props) => {
-	let _props = mergeProps$1({ interactionWidth: 20 }, props), [local, rest] = splitProps(_props, [
-		"class",
-		"style",
-		"path",
-		"interactionWidth",
-		"label",
-		"labelStyle",
-		"labelX",
-		"labelY",
-		"markerStart",
-		"markerEnd"
-	]);
+	let _props = propDefaults(props, { interactionWidth: 20 }), rest = omit(_props, "class", "style", "path", "interactionWidth", "label", "labelStyle", "labelX", "labelY", "markerStart", "markerEnd");
 	return [
 		(() => {
 			var _el$ = _tmpl$$33();
 			return spread(_el$, mergeProps({
 				get d() {
-					return local.path;
+					return _props.path;
 				},
 				get class() {
-					return clsx$1(["solid-flow__edge-path", local.class]);
+					return ["solid-flow__edge-path", _props.class];
 				},
 				get "marker-start"() {
-					return local.markerStart;
+					return _props.markerStart;
 				},
 				get "marker-end"() {
-					return local.markerEnd;
+					return _props.markerEnd;
 				},
+				fill: "none",
 				get style() {
-					return local.style;
+					return _props.style;
 				}
-			}, rest), !0, !1), _el$;
+			}, rest), !1), _el$;
 		})(),
 		createComponent(Show, {
 			get when() {
-				return local.interactionWidth > 0;
+				return _props.interactionWidth > 0;
 			},
 			get children() {
 				var _el$2 = _tmpl$2$4();
-				return effect((_p$) => {
-					var _v$ = local.path, _v$2 = local.interactionWidth;
-					return _v$ !== _p$.e && setAttribute(_el$2, "d", _p$.e = _v$), _v$2 !== _p$.t && setAttribute(_el$2, "stroke-width", _p$.t = _v$2), _p$;
-				}, {
-					e: void 0,
-					t: void 0
+				return effect(() => ({
+					e: _props.path,
+					t: _props.interactionWidth
+				}), ({ e, t }, _p$) => {
+					e !== _p$?.e && setAttribute(_el$2, "d", e), t !== _p$?.t && setAttribute(_el$2, "stroke-width", t);
 				}), _el$2;
 			}
 		}),
 		createComponent(Show, {
 			get when() {
-				return local.label;
+				return _props.label;
 			},
 			get children() {
 				return createComponent(EdgeLabel, {
 					get x() {
-						return local.labelX;
+						return _props.labelX;
 					},
 					get y() {
-						return local.labelY;
+						return _props.labelY;
 					},
 					get style() {
-						return local.labelStyle;
+						return _props.labelStyle;
 					},
 					get children() {
-						return local.label;
+						return _props.label;
 					}
 				});
 			}
@@ -309,26 +272,18 @@ const BaseEdge = (props) => {
 };
 //#endregion
 //#region src/components/graph/edge/EdgeReconnectAnchor.tsx
-var _tmpl$$32 = /*#__PURE__*/ template("<div>");
+var _tmpl$$32 = /* @__PURE__ */ template("<div style=background:transparent;border:none;cursor:move>");
 const EdgeReconnectAnchor = (props) => {
-	let _props = mergeProps$1({
+	let _props = propDefaults(props, {
 		size: 25,
 		reconnecting: !1,
 		style: {}
-	}, props), [local, rest] = splitProps(_props, [
-		"type",
-		"class",
-		"style",
-		"position",
-		"size",
-		"reconnecting",
-		"children"
-	]), { store, nodeLookup, edgeLookup, actions } = useInternalSolidFlow(), edgeId = useEdgeId(), [reconnecting, setReconnecting] = createSignal(!1);
+	}), rest = omit(_props, "type", "class", "style", "position", "size", "reconnecting", "children"), { store, nodeLookup, edgeLookup, actions } = useInternalSolidFlow(), edgeId = useEdgeId(), [reconnecting, setReconnecting] = createSignal(!1);
 	if (!edgeId()) throw Error("[solid-flow]: EdgeReconnectAnchor must be used within an Edge component");
 	let edge = () => edgeLookup.get(edgeId()), onPointerDown = (event) => {
 		if (event.button !== 0) return;
-		setReconnecting(!0), store.onReconnectStart?.(event, edge(), local.type);
-		let opposite = local.type === "target" ? {
+		setReconnecting(!0), store.onReconnectStart?.(event, edge(), _props.type);
+		let opposite = _props.type === "target" ? {
 			nodeId: edge().source,
 			handleId: edge().sourceHandle ?? null,
 			type: "source"
@@ -374,13 +329,13 @@ const EdgeReconnectAnchor = (props) => {
 	};
 	return createComponent(EdgeLabel, mergeProps({
 		get x() {
-			return local.position?.x;
+			return _props.position?.x;
 		},
 		get y() {
-			return local.position?.y;
+			return _props.position?.y;
 		},
 		get style() {
-			return local.style;
+			return _props.style;
 		}
 	}, rest, { get children() {
 		var _el$ = _tmpl$$32();
@@ -389,21 +344,22 @@ const EdgeReconnectAnchor = (props) => {
 				return !reconnecting();
 			},
 			get children() {
-				return local.children;
+				return _props.children;
 			}
-		})), effect((_p$) => {
-			var _v$ = clsx$1("solid-flow__edgeupdater", `solid-flow__edgeupdater-${local.type}`, store.noPanClass, local.class), _v$2 = {
-				width: toPxString(local.size),
-				height: toPxString(local.size),
-				background: "transparent",
-				border: "none",
-				cursor: "move",
-				...local.style
-			};
-			return _v$ !== _p$.e && className(_el$, _p$.e = _v$), _p$.t = style(_el$, _v$2, _p$.t), _p$;
-		}, {
-			e: void 0,
-			t: void 0
+		})), effect(() => ({
+			e: [
+				"solid-flow__edgeupdater",
+				`solid-flow__edgeupdater-${_props.type}`,
+				store.noPanClass,
+				_props.class
+			],
+			t: {
+				width: toPxString(_props.size),
+				height: toPxString(_props.size),
+				..._props.style
+			}
+		}), ({ e, t }, _p$) => {
+			className(_el$, e, _p$?.e), style(_el$, t, _p$?.t);
 		}), _el$;
 	} }));
 };
@@ -413,17 +369,24 @@ delegateEvents(["pointerdown"]);
 const ARIA_NODE_DESC_KEY = "solid-flow__node-desc", ARIA_EDGE_DESC_KEY = "solid-flow__edge-desc";
 //#endregion
 //#region src/components/accessibility/A11yDescriptions.tsx
-var _tmpl$$31 = /*#__PURE__*/ template("<div class=a11y-hidden>"), _tmpl$2$3 = /*#__PURE__*/ template("<div aria-live=assertive aria-atomic=true class=a11y-live-msg>");
+var _tmpl$$31 = /* @__PURE__ */ template("<div class=a11y-hidden>"), _tmpl$2$3 = /* @__PURE__ */ template("<div aria-live=assertive aria-atomic=true class=a11y-live-msg>");
 const A11yDescriptions = () => {
 	let { store } = useInternalSolidFlow();
 	return [
 		(() => {
 			var _el$ = _tmpl$$31();
-			return insert(_el$, () => store.disableKeyboardA11y ? store.ariaLabelConfig["node.a11yDescription.default"] : store.ariaLabelConfig["node.a11yDescription.keyboardDisabled"]), effect(() => setAttribute(_el$, "id", `${ARIA_NODE_DESC_KEY}-${store.id}`)), _el$;
+			return insert(_el$, (() => {
+				var _c$ = memo(() => !!store.disableKeyboardA11y);
+				return () => _c$() ? store.ariaLabelConfig["node.a11yDescription.default"] : store.ariaLabelConfig["node.a11yDescription.keyboardDisabled"];
+			})()), effect(() => `${ARIA_NODE_DESC_KEY}-${store.id}`, (_v$) => {
+				setAttribute(_el$, "id", _v$);
+			}), _el$;
 		})(),
 		(() => {
 			var _el$2 = _tmpl$$31();
-			return insert(_el$2, () => store.ariaLabelConfig["edge.a11yDescription.default"]), effect(() => setAttribute(_el$2, "id", `${ARIA_EDGE_DESC_KEY}-${store.id}`)), _el$2;
+			return insert(_el$2, () => store.ariaLabelConfig["edge.a11yDescription.default"]), effect(() => `${ARIA_EDGE_DESC_KEY}-${store.id}`, (_v$) => {
+				setAttribute(_el$2, "id", _v$);
+			}), _el$2;
 		})(),
 		createComponent(Show, {
 			get when() {
@@ -431,14 +394,16 @@ const A11yDescriptions = () => {
 			},
 			get children() {
 				var _el$3 = _tmpl$2$3();
-				return insert(_el$3, () => store.ariaLiveMessage), effect(() => setAttribute(_el$3, "id", `solid-flow__aria-live-${store.id}`)), _el$3;
+				return insert(_el$3, () => store.ariaLiveMessage), effect(() => `solid-flow__aria-live-${store.id}`, (_v$) => {
+					setAttribute(_el$3, "id", _v$);
+				}), _el$3;
 			}
 		})
 	];
 };
 //#endregion
 //#region src/components/graph/edge/EdgeWrapper.tsx
-var _tmpl$$30 = /*#__PURE__*/ template("<svg class=solid-flow__edge-wrapper><g aria-roledescription=edge>");
+var _tmpl$$30 = /* @__PURE__ */ template("<svg class=solid-flow__edge-wrapper><g>");
 const EdgeWrapper = (props) => {
 	let edgeRef, { store, actions } = useInternalSolidFlow(), edgeId = () => props.edgeId, edge = () => actions.getEdge(edgeId()), edgeType = () => edge().type ?? "default", selectable = () => edge().selectable ?? store.elementsSelectable, focusable = () => edge().focusable ?? store.edgesFocusable, edgeComponent = () => store.edgeTypes[edgeType()], markerStartUrl = () => edge().markerStart ? `url('#${getMarkerId(edge().markerStart, store.id)}')` : void 0, markerEndUrl = () => edge().markerEnd ? `url('#${getMarkerId(edge().markerEnd, store.id)}')` : void 0, onClick = (event) => {
 		selectable() && actions.handleEdgeSelection(edgeId()), props.onEdgeClick?.({
@@ -457,7 +422,7 @@ const EdgeWrapper = (props) => {
 	}, onKeyDown = (event) => {
 		store.disableKeyboardA11y || !elementSelectionKeys.includes(event.key) || !selectable() || (event.key === "Escape" ? (edgeRef?.blur(), actions.unselectNodesAndEdges({ edges: [edge()] })) : actions.addSelectedEdges([edge().id]));
 	}, ariaLabel = () => edge().ariaLabel ?? `Edge from ${edge().source} to ${edge().target}`;
-	return createComponent(EdgeIdContext.Provider, {
+	return createComponent(EdgeIdContext, {
 		value: edgeId,
 		get children() {
 			return createComponent(Show, {
@@ -465,14 +430,12 @@ const EdgeWrapper = (props) => {
 					return !edge().hidden;
 				},
 				get children() {
-					var _el$ = _tmpl$$30(), _el$2 = _el$.firstChild;
-					_el$2.addEventListener("pointerleave", (e) => onPointerEvent(e, "pointerleave")), _el$2.addEventListener("pointerenter", (e) => onPointerEvent(e, "pointerenter")), _el$2.$$contextmenu = (e) => onPointerEvent(e, "contextmenu"), _el$2.$$keydown = (e) => focusable() && onKeyDown(e), _el$2.$$click = onClick;
-					var _ref$ = edgeRef;
-					return typeof _ref$ == "function" ? use(_ref$, _el$2) : edgeRef = _el$2, spread(_el$2, mergeProps({
+					var _el$ = _tmpl$$30(), _el$2 = _el$.firstChild, _ref$ = edgeRef;
+					return typeof _ref$ == "function" || Array.isArray(_ref$) ? ref(() => _ref$, _el$2) : edgeRef = _el$2, spread(_el$2, mergeProps({
 						get "data-id"() {
 							return edge().id;
 						},
-						get tabIndex() {
+						get tabindex() {
 							return focusable() ? 0 : void 0;
 						},
 						get role() {
@@ -481,17 +444,28 @@ const EdgeWrapper = (props) => {
 						get "aria-label"() {
 							return ariaLabel();
 						},
+						"aria-roledescription": "edge",
 						get "aria-describedby"() {
 							return focusable() ? `${ARIA_EDGE_DESC_KEY}-${store.id}` : void 0;
 						},
 						get class() {
-							return clsx$1("solid-flow__edge", `solid-flow__edge-${edgeType()}`, {
-								animated: edge().animated,
-								selected: edge().selected,
-								selectable: selectable()
-							}, edge().class);
-						}
-					}, () => edge().domAttributes), !0, !0), insert(_el$2, createComponent(Dynamic, {
+							return [
+								"solid-flow__edge",
+								`solid-flow__edge-${edgeType()}`,
+								{
+									animated: !!edge().animated,
+									selected: !!edge().selected,
+									selectable: !!selectable()
+								},
+								edge().class
+							];
+						},
+						onClick,
+						onKeyDown: (e) => focusable() && onKeyDown(e),
+						onContextMenu: (e) => onPointerEvent(e, "contextmenu"),
+						onPointerEnter: (e) => onPointerEvent(e, "pointerenter"),
+						onPointerLeave: (e) => onPointerEvent(e, "pointerleave")
+					}, () => edge().domAttributes), !0), insert(_el$2, createComponent(Dynamic, {
 						get component() {
 							return edgeComponent();
 						},
@@ -564,20 +538,14 @@ const EdgeWrapper = (props) => {
 						get markerEnd() {
 							return markerEndUrl();
 						}
-					})), effect((_$p) => (_$p = edge().zIndex) == null ? _el$.style.removeProperty("z-index") : _el$.style.setProperty("z-index", _$p)), _el$;
+					})), effect(() => edge().zIndex, (_v$) => {
+						setStyleProperty(_el$, "z-index", _v$);
+					}), _el$;
 				}
 			});
 		}
 	});
-};
-delegateEvents([
-	"click",
-	"keydown",
-	"contextmenu"
-]);
-//#endregion
-//#region src/components/graph/edge/SmoothStepEdge.tsx
-const SmoothStepEdge = (props) => {
+}, SmoothStepEdge = (props) => {
 	let pathData = createMemo(() => {
 		let [path, labelX, labelY] = getSmoothStepPath$1({
 			sourceX: props.sourceX,
@@ -860,7 +828,7 @@ const SmoothStepEdge = (props) => {
 }, getEdgeId = (connection) => {
 	let { source, sourceHandle, target, targetHandle } = connection;
 	return `xy-edge__${source}${sourceHandle || ""}-${target}${targetHandle || ""}`;
-}, NodeConnectableContext = createContext();
+}, NodeConnectableContext = createContext(null);
 function useNodeConnectable() {
 	let ctx = useContext(NodeConnectableContext);
 	if (!ctx) throw Error("solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useNodeConnectable");
@@ -868,32 +836,22 @@ function useNodeConnectable() {
 }
 //#endregion
 //#region src/components/graph/handle/Handle.tsx
-var _tmpl$$29 = /*#__PURE__*/ template("<div role=button tabindex=-1>");
+var _tmpl$$29 = /* @__PURE__ */ template("<div>");
 const Handle = (props) => {
-	let _props = mergeProps$1({
-		id: null,
+	let _props = propDefaults(props, {
 		type: "source",
 		position: "top",
 		isConnectableStart: !0,
 		isConnectableEnd: !0
-	}, props), { store, nodeLookup, connectionLookup, actions } = useInternalSolidFlow(), [local, rest] = splitProps(_props, [
-		"id",
-		"type",
-		"position",
-		"isConnectable",
-		"isConnectableStart",
-		"isConnectableEnd",
-		"isValidConnection",
-		"onConnect",
-		"onDisconnect",
-		"children",
-		"class",
-		"style"
-	]), nodeId = useNodeId(), nodeConnectable = useNodeConnectable(), connectable = () => local.isConnectable ?? nodeConnectable(), isTarget = () => local.type === "target", handleId = () => local.id ?? null, connectionInProcess = () => !!store.connection.fromHandle, connectingFrom = () => store.connection.fromHandle && store.connection.fromHandle.nodeId === nodeId() && store.connection.fromHandle.type === local.type && store.connection.fromHandle.id === handleId(), connectingTo = () => store.connection.toHandle && store.connection.toHandle.nodeId === nodeId() && store.connection.toHandle.type === local.type && store.connection.toHandle.id === handleId(), isPossibleTargetHandle = () => store.connectionMode === "strict" ? store.connection.fromHandle?.type !== local.type : nodeId() !== store.connection.fromHandle?.nodeId || handleId() !== store.connection.fromHandle?.id, valid = () => !!(connectingTo() && store.connection.isValid), prevConnections = null, connections;
+	}), { store, nodeLookup, connectionLookup, actions } = useInternalSolidFlow(), rest = omit(_props, "id", "type", "position", "isConnectable", "isConnectableStart", "isConnectableEnd", "isValidConnection", "onConnect", "onDisconnect", "children", "class", "style"), nodeId = useNodeId(), nodeConnectable = useNodeConnectable(), connectable = () => _props.isConnectable ?? nodeConnectable(), isTarget = () => _props.type === "target", handleId = () => _props.id ?? null, connectionInProcess = () => !!store.connection.fromHandle, connectingFrom = () => store.connection.fromHandle && store.connection.fromHandle.nodeId === nodeId() && store.connection.fromHandle.type === _props.type && store.connection.fromHandle.id === handleId(), connectingTo = () => store.connection.toHandle && store.connection.toHandle.nodeId === nodeId() && store.connection.toHandle.type === _props.type && store.connection.toHandle.id === handleId(), isPossibleTargetHandle = () => store.connectionMode === "strict" ? store.connection.fromHandle?.type !== _props.type : nodeId() !== store.connection.fromHandle?.nodeId || handleId() !== store.connection.fromHandle?.id, valid = () => !!(connectingTo() && store.connection.isValid), prevConnections = null;
 	createEffect(() => {
-		if (!local.onConnect && !local.onDisconnect) return;
-		let conectionKey = `${nodeId()}-${local.type}${local.id ? `-${local.id}` : ""}`;
-		if (connections = connectionLookup.get(conectionKey), prevConnections && !areConnectionMapsEqual(connections, prevConnections)) {
+		if (!_props.onConnect && !_props.onDisconnect) return null;
+		let connectionKey = `${nodeId()}-${_props.type}${_props.id ? `-${_props.id}` : ""}`;
+		return { connections: connectionLookup.get(connectionKey) };
+	}, (current) => {
+		if (!current) return;
+		let { connections } = current;
+		if (prevConnections && !areConnectionMapsEqual(connections, prevConnections)) {
 			let _connections = connections ?? /* @__PURE__ */ new Map();
 			handleConnectionChange(prevConnections, _connections, props.onDisconnect), handleConnectionChange(_connections, prevConnections, props.onConnect);
 		}
@@ -917,8 +875,10 @@ const Handle = (props) => {
 			lib: store.lib,
 			autoPanOnConnect: store.autoPanOnConnect,
 			flowId: store.id,
-			isValidConnection: local.isValidConnection ?? store.isValidConnection,
-			updateConnection: actions.setConnection,
+			isValidConnection: _props.isValidConnection ?? store.isValidConnection,
+			updateConnection: ((connection) => {
+				actions.setConnection(connection), flush();
+			}),
 			cancelConnection: actions.cancelConnection,
 			panBy: actions.panBy,
 			onConnect: onConnectExtended,
@@ -937,24 +897,24 @@ const Handle = (props) => {
 			handleDomNode: event.currentTarget
 		});
 	}, onClick = (event) => {
-		if (!nodeId() || !store.clickConnectStartHandle && !local.isConnectableStart) return;
+		if (!nodeId() || !store.clickConnectStartHandle && !_props.isConnectableStart) return;
 		if (!store.clickConnectStartHandle) {
 			store.onClickConnectStart?.(event, {
 				nodeId: nodeId(),
 				handleId: handleId(),
-				handleType: local.type
+				handleType: _props.type
 			}), actions.setClickConnectStartHandle({
 				nodeId: nodeId(),
-				type: local.type,
+				type: _props.type,
 				id: handleId()
 			});
 			return;
 		}
-		let doc = getHostForElement(event.target), isValidConnectionHandler = local.isValidConnection ?? store.isValidConnection, { connection, isValid } = XYHandle.isValid(event, {
+		let doc = getHostForElement(event.target), isValidConnectionHandler = _props.isValidConnection ?? store.isValidConnection, { connection, isValid } = XYHandle.isValid(event, {
 			handle: {
 				nodeId: nodeId(),
 				id: handleId(),
-				type: local.type
+				type: _props.type
 			},
 			connectionMode: store.connectionMode,
 			fromNodeId: store.clickConnectStartHandle.nodeId,
@@ -967,57 +927,61 @@ const Handle = (props) => {
 			nodeLookup
 		});
 		isValid && connection && onConnectExtended(connection);
-		let connectionClone = structuredClone(unwrap(store.connection));
+		let connectionClone = structuredClone(snapshot(store.connection));
 		delete connectionClone.inProgress, connectionClone.toPosition = connectionClone.toHandle ? connectionClone.toHandle.position : null, store.onClickConnectEnd?.(event, connectionClone), actions.setClickConnectStartHandle(void 0);
-	}, connectionIndicator = () => connectable() && (!connectionInProcess() || isPossibleTargetHandle()) && (connectionInProcess() || store.clickConnectStartHandle ? local.isConnectableEnd : local.isConnectableStart);
-	return (() => {
-		var _el$ = _tmpl$$29();
-		return _el$.$$pointerdown = onPointerDown, spread(_el$, mergeProps({
-			get "aria-label"() {
-				return store.ariaLabelConfig["handle.ariaLabel"];
-			},
-			get "data-handleid"() {
-				return handleId();
-			},
-			get "data-nodeid"() {
-				return nodeId();
-			},
-			get "data-handlepos"() {
-				return local.position;
-			},
-			get "data-id"() {
-				return `${store.id}-${nodeId()}-${local.id || null}-${local.type}`;
-			},
-			get onClick() {
-				return store.clickConnect ? onClick : void 0;
-			},
-			get style() {
-				return local.style;
-			},
-			get class() {
-				return clsx$1("solid-flow__handle", `solid-flow__handle-${local.position}`, store.noDragClass, store.noPanClass, local.class, {
+	}, connectionIndicator = () => connectable() && (!connectionInProcess() || isPossibleTargetHandle()) && (connectionInProcess() || store.clickConnectStartHandle ? _props.isConnectableEnd : _props.isConnectableStart);
+	var _el$ = _tmpl$$29();
+	return spread(_el$, mergeProps(rest, {
+		role: "button",
+		get "aria-label"() {
+			return store.ariaLabelConfig["handle.ariaLabel"];
+		},
+		tabindex: -1,
+		get "data-handleid"() {
+			return handleId();
+		},
+		get "data-nodeid"() {
+			return nodeId();
+		},
+		get "data-handlepos"() {
+			return _props.position;
+		},
+		get "data-id"() {
+			return `${store.id}-${nodeId()}-${_props.id || null}-${_props.type}`;
+		},
+		get onClick() {
+			return store.clickConnect ? onClick : void 0;
+		},
+		onPointerDown,
+		get style() {
+			return _props.style;
+		},
+		get class() {
+			return [
+				"solid-flow__handle",
+				`solid-flow__handle-${_props.position}`,
+				store.noDragClass,
+				store.noPanClass,
+				_props.class,
+				{
 					valid: valid(),
-					connectingto: connectingTo(),
-					connectingfrom: connectingFrom(),
+					connectingto: !!connectingTo(),
+					connectingfrom: !!connectingFrom(),
 					source: !isTarget(),
 					target: isTarget(),
 					connectablestart: _props.isConnectableStart,
 					connectableend: _props.isConnectableEnd,
-					connectable: connectable(),
+					connectable: !!connectable(),
 					connectionindicator: connectionIndicator()
-				});
-			}
-		}, rest), !1, !0), insert(_el$, () => local.children), _el$;
-	})();
-};
-delegateEvents(["pointerdown"]);
-//#endregion
-//#region src/components/graph/node/DefaultNode.tsx
-const DefaultNode = (props) => {
-	let _props = mergeProps$1({
-		targetPosition: "top",
-		sourcePosition: "bottom"
-	}, props);
+				}
+			];
+		}
+	}), !0), insert(_el$, () => _props.children), _el$;
+}, DefaultNode = (props) => {
+	let _props = propDefaults(props, {
+		targetPosition: Position$1.Top,
+		sourcePosition: Position$1.Bottom
+	});
 	return [
 		createComponent(Handle, {
 			type: "target",
@@ -1042,18 +1006,17 @@ const DefaultNode = (props) => {
 };
 //#endregion
 //#region src/components/graph/node/GroupNode.tsx
-var _tmpl$$28 = /*#__PURE__*/ template("<div>");
+var _tmpl$$28 = /* @__PURE__ */ template("<div style=position:absolute;left:0;top:0>");
 const GroupNode = (props) => (() => {
 	var _el$ = _tmpl$$28();
-	return _el$.style.setProperty("position", "absolute"), _el$.style.setProperty("left", "0"), _el$.style.setProperty("top", "0"), effect((_p$) => {
-		var _v$ = toPxString(props.width), _v$2 = toPxString(props.height);
-		return _v$ !== _p$.e && ((_p$.e = _v$) == null ? _el$.style.removeProperty("width") : _el$.style.setProperty("width", _v$)), _v$2 !== _p$.t && ((_p$.t = _v$2) == null ? _el$.style.removeProperty("height") : _el$.style.setProperty("height", _v$2)), _p$;
-	}, {
-		e: void 0,
-		t: void 0
+	return effect(() => ({
+		e: toPxString(props.width),
+		t: toPxString(props.height)
+	}), ({ e, t }, _p$) => {
+		e !== _p$?.e && setStyleProperty(_el$, "width", e), t !== _p$?.t && setStyleProperty(_el$, "height", t);
 	}), _el$;
 })(), InputNode = (props) => {
-	let _props = mergeProps$1({ sourcePosition: "bottom" }, props);
+	let _props = propDefaults(props, { sourcePosition: Position$1.Bottom });
 	return [memo(() => props.data?.label), createComponent(Handle, {
 		type: "source",
 		get position() {
@@ -1065,8 +1028,12 @@ const GroupNode = (props) => (() => {
 	})];
 }, createDraggable = (elem, params) => {
 	let { store, nodeLookup, actions } = useInternalSolidFlow(), [dragging, setDragging] = createSignal(!1);
-	return onMount(() => {
-		let { onDrag, onDragStart, onDragStop, onNodeMouseDown } = params(), dragInstance = XYDrag({
+	return createEffect(() => ({
+		el: elem(),
+		current: params()
+	}), ({ el, current }) => {
+		if (!el || current.disabled) return;
+		let { onDrag, onDragStart, onDragStop, onNodeMouseDown } = current, dragInstance = XYDrag({
 			onDrag,
 			onDragStart: (event, dragItems, node, nodes) => {
 				setDragging(!0), onDragStart?.(event, dragItems, node, nodes);
@@ -1096,27 +1063,18 @@ const GroupNode = (props) => (() => {
 				panBy: actions.panBy
 			})
 		});
-		function updateDrag(elem, params) {
-			if (params.disabled) {
-				dragInstance.destroy();
-				return;
-			}
-			dragInstance.update({
-				domNode: elem,
-				nodeId: params.nodeId,
-				noDragClassName: params.noDragClass,
-				handleSelector: params.handleSelector,
-				isSelectable: params.isSelectable,
-				nodeClickDistance: params.nodeClickDistance
-			});
-		}
-		createEffect(() => {
-			updateDrag(elem(), params());
-		}), onCleanup(() => {
+		return dragInstance.update({
+			domNode: el,
+			nodeId: current.nodeId,
+			noDragClassName: current.noDragClass,
+			handleSelector: current.handleSelector,
+			isSelectable: current.isSelectable,
+			nodeClickDistance: current.nodeClickDistance
+		}), () => {
 			dragInstance.destroy();
-		});
+		};
 	}), dragging;
-}, NodeIdContext = createContext();
+}, NodeIdContext = createContext(null);
 function useNodeId() {
 	let ctx = useContext(NodeIdContext);
 	if (!ctx) throw Error("solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useNodeId");
@@ -1124,7 +1082,7 @@ function useNodeId() {
 }
 //#endregion
 //#region src/components/graph/node/NodeWrapper.tsx
-var _tmpl$$27 = /*#__PURE__*/ template("<div aria-roledescription=node>");
+var _tmpl$$27 = /* @__PURE__ */ template("<div>");
 const NodeWrapper = (props) => {
 	let { store, nodeLookup, parentLookup, actions } = useInternalSolidFlow(), [nodeRef, setNodeRef] = createSignal(), node = () => nodeLookup.get(props.nodeId), nodeId = () => node().id, nodeType = () => node().type ?? "default", deletable = () => node().deletable ?? !0, selectable = () => node().selectable ?? store.elementsSelectable, focusable = () => node().focusable ?? store.nodesFocusable, draggable = () => node().draggable ?? store.nodesDraggable, connectable = () => node().connectable ?? store.nodesConnectable, userNode = () => node().internals.userNode, nodeTypeValid = () => nodeType() in store.nodeTypes, nodeComponent = () => store.nodeTypes[nodeType()], isParentNode = () => parentLookup.has(node().id), transform = () => {
 		let { x, y } = node().internals.positionAbsolute;
@@ -1143,19 +1101,27 @@ const NodeWrapper = (props) => {
 		...sizeStyle(),
 		...node().style ?? {}
 	});
-	createEffect(() => {
-		nodeTypeValid();
-	}), createEffect((prev) => prev && prev.sourcePosition === node().sourcePosition && prev.targetPosition === node().targetPosition && prev.nodeType === nodeType() ? prev : (actions.requestUpdateNodeInternals([[node().id, {
+	createEffect(() => ({
+		valid: nodeTypeValid(),
+		nodeType: nodeType()
+	}), ({ valid, nodeType }) => {}), createEffect(() => ({
 		id: node().id,
 		nodeElement: nodeRef(),
-		force: !0
-	}]]), {
 		nodeType: nodeType(),
 		sourcePosition: node().sourcePosition,
 		targetPosition: node().targetPosition
-	})), createEffect((prevNodeRef) => {
-		let currentNodeRef = nodeRef();
-		return currentNodeRef === prevNodeRef && nodeHasDimensions(node()) ? prevNodeRef : (prevNodeRef && props.resizeObserver?.unobserve(prevNodeRef), currentNodeRef && props.resizeObserver?.observe(currentNodeRef), currentNodeRef);
+	}), (current, prev) => {
+		current.nodeElement && (prev && prev.nodeElement === current.nodeElement && prev.sourcePosition === current.sourcePosition && prev.targetPosition === current.targetPosition && prev.nodeType === current.nodeType || actions.requestUpdateNodeInternals([[current.id, {
+			id: current.id,
+			nodeElement: current.nodeElement,
+			force: !0
+		}]]));
+	}), createEffect(() => ({
+		nodeElement: nodeRef(),
+		hasDimensions: nodeHasDimensions(node()),
+		resizeObserver: props.resizeObserver
+	}), (current, prev) => {
+		current.nodeElement === prev?.nodeElement && current.resizeObserver === prev?.resizeObserver && current.hasDimensions || (prev?.nodeElement && prev.resizeObserver?.unobserve(prev.nodeElement), current.nodeElement && current.resizeObserver?.observe(current.nodeElement));
 	});
 	let onSelectNodeHandler = (event) => {
 		selectable() && (!store.selectNodesOnDrag || !draggable() || store.nodeDragThreshold > 0) && actions.handleNodeSelection(node().id), props.onNodeClick?.({
@@ -1169,13 +1135,11 @@ const NodeWrapper = (props) => {
 			return;
 		}
 		let arrowKeyDiff = ARROW_KEY_DIFFS[event.key];
-		draggable() && node().selected && arrowKeyDiff && batch(() => {
-			event.preventDefault(), actions.setAriaLiveMessage(store.ariaLabelConfig["node.a11yDescription.ariaLiveMessage"]({
-				direction: event.key.replace("Arrow", "").toLowerCase(),
-				x: ~~node().internals.positionAbsolute.x,
-				y: ~~node().internals.positionAbsolute.y
-			})), actions.moveSelectedNodes(arrowKeyDiff, event.shiftKey ? 4 : 1);
-		});
+		draggable() && node().selected && arrowKeyDiff && (event.preventDefault(), actions.setAriaLiveMessage(store.ariaLabelConfig["node.a11yDescription.ariaLiveMessage"]({
+			direction: event.key.replace("Arrow", "").toLowerCase(),
+			x: ~~node().internals.positionAbsolute.x,
+			y: ~~node().internals.positionAbsolute.y
+		})), actions.moveSelectedNodes(arrowKeyDiff, event.shiftKey ? 4 : 1));
 	}, onFocus = () => {
 		if (store.disableKeyboardA11y || !store.autoPanOnNodeFocus || !nodeRef()?.matches(":focus-visible")) return;
 		let { width, height, viewport } = store;
@@ -1225,49 +1189,62 @@ const NodeWrapper = (props) => {
 		},
 		get children() {
 			var _el$ = _tmpl$$27();
-			return _el$.addEventListener("focus", () => focusable() && onFocus()), _el$.$$keydown = (e) => focusable() && onKeyDown(e), _el$.$$contextmenu = (event) => props.onNodeContextMenu?.({
-				node: userNode(),
-				event
-			}), _el$.$$pointermove = (event) => props.onNodePointerMove?.({
-				node: userNode(),
-				event
-			}), _el$.addEventListener("pointerleave", (event) => props.onNodePointerLeave?.({
-				node: userNode(),
-				event
-			})), _el$.addEventListener("pointerenter", (event) => props.onNodePointerEnter?.({
-				node: userNode(),
-				event
-			})), _el$.$$click = onSelectNodeHandler, use(setNodeRef, _el$), spread(_el$, mergeProps({
+			return ref(() => setNodeRef, _el$), spread(_el$, mergeProps({
 				get "data-id"() {
 					return node().id;
 				},
 				get class() {
-					return clsx$1("solid-flow__node", `solid-flow__node-${nodeType()}`, {
-						connectable: connectable(),
-						draggable: draggable(),
-						dragging: dragging(),
-						nopan: draggable(),
-						parent: isParentNode(),
-						selectable: selectable(),
-						selected: node().selected
-					}, node().class);
+					return [
+						"solid-flow__node",
+						`solid-flow__node-${nodeType()}`,
+						{
+							connectable: !!connectable(),
+							draggable: !!draggable(),
+							dragging: dragging(),
+							nopan: !!draggable(),
+							parent: isParentNode(),
+							selectable: !!selectable(),
+							selected: !!node().selected
+						},
+						node().class
+					];
 				},
 				get style() {
 					return style();
 				},
-				get tabIndex() {
+				onClick: onSelectNodeHandler,
+				onPointerEnter: (event) => props.onNodePointerEnter?.({
+					node: userNode(),
+					event
+				}),
+				onPointerLeave: (event) => props.onNodePointerLeave?.({
+					node: userNode(),
+					event
+				}),
+				onPointerMove: (event) => props.onNodePointerMove?.({
+					node: userNode(),
+					event
+				}),
+				onContextMenu: (event) => props.onNodeContextMenu?.({
+					node: userNode(),
+					event
+				}),
+				onKeyDown: (e) => focusable() && onKeyDown(e),
+				onFocus: () => focusable() && onFocus(),
+				get tabindex() {
 					return focusable() ? 0 : void 0;
 				},
 				get role() {
 					return node().ariaRole ?? (focusable() ? "group" : void 0);
 				},
+				"aria-roledescription": "node",
 				get "aria-describedby"() {
 					return store.disableKeyboardA11y ? void 0 : `${ARIA_NODE_DESC_KEY}-${store.id}`;
 				}
-			}, () => node().domAttributes), !1, !0), insert(_el$, createComponent(NodeIdContext.Provider, {
+			}, () => node().domAttributes), !0), insert(_el$, createComponent(NodeIdContext, {
 				value: nodeId,
 				get children() {
-					return createComponent(NodeConnectableContext.Provider, {
+					return createComponent(NodeConnectableContext, {
 						value: connectable,
 						get children() {
 							return createComponent(Dynamic, {
@@ -1335,17 +1312,8 @@ const NodeWrapper = (props) => {
 			})), _el$;
 		}
 	});
-};
-delegateEvents([
-	"click",
-	"pointermove",
-	"contextmenu",
-	"keydown"
-]);
-//#endregion
-//#region src/components/graph/node/OutputNode.tsx
-const OutputNode = (props) => {
-	let _props = mergeProps$1({ targetPosition: "top" }, props);
+}, OutputNode = (props) => {
+	let _props = propDefaults(props, { targetPosition: Position$1.Top });
 	return [createComponent(Handle, {
 		type: "target",
 		get position() {
@@ -1495,24 +1463,20 @@ function calculateChildXYZ(childNode, parentNode, nodeOrigin, nodeExtent, select
 * @param handleId handleId of the conneciton
 */
 function addConnectionToLookup(type, connection, connectionKey, connectionLookup, nodeId, handleId) {
-	let key = nodeId, nodeMap = connectionLookup.get(key) || /* @__PURE__ */ new Map();
-	connectionLookup.set(key, nodeMap.set(connectionKey, connection)), key = `${nodeId}-${type}`;
-	let typeMap = connectionLookup.get(key) || /* @__PURE__ */ new Map();
-	if (connectionLookup.set(key, typeMap.set(connectionKey, connection)), handleId) {
-		key = `${nodeId}-${type}-${handleId}`;
-		let handleMap = connectionLookup.get(key) || /* @__PURE__ */ new Map();
-		connectionLookup.set(key, handleMap.set(connectionKey, connection));
-	}
+	let add = (key) => {
+		let next = new Map(untrack(() => connectionLookup.get(key)));
+		next.set(connectionKey, connection), connectionLookup.set(key, next);
+	};
+	add(nodeId), add(`${nodeId}-${type}`), handleId && add(`${nodeId}-${type}-${handleId}`);
 }
 function removeConnectionFromLookup(type, connectionKey, connectionLookup, nodeId, handleId) {
-	let key = nodeId, nodeMap = connectionLookup.get(key);
-	nodeMap && (nodeMap.delete(connectionKey), nodeMap.size === 0 && connectionLookup.delete(key)), key = `${nodeId}-${type}`;
-	let typeMap = connectionLookup.get(key);
-	if (typeMap && (typeMap.delete(connectionKey), typeMap.size === 0 && connectionLookup.delete(key)), handleId) {
-		key = `${nodeId}-${type}-${handleId}`;
-		let handleMap = connectionLookup.get(key);
-		handleMap && (handleMap.delete(connectionKey), handleMap.size === 0 && connectionLookup.delete(key));
-	}
+	let remove = (key) => {
+		let current = untrack(() => connectionLookup.get(key));
+		if (!current) return;
+		let next = new Map(current);
+		next.delete(connectionKey), next.size === 0 ? connectionLookup.delete(key) : connectionLookup.set(key, next);
+	};
+	remove(nodeId), remove(`${nodeId}-${type}`), handleId && remove(`${nodeId}-${type}-${handleId}`);
 }
 //#endregion
 //#region src/data/createSolidFlow.tsx
@@ -1537,22 +1501,30 @@ const InitialNodeTypesMap = {
 		zoom: 1
 	};
 }, createSolidFlow = (props) => {
-	let _props = mergeProps$1(getDefaultFlowStateProps(), props), nodeLookup = new ReactiveMap(), parentLookup = new ReactiveMap(), edgeLookup = new ReactiveMap(), connectionLookup = new ReactiveMap(), layoutedEdgesMap = new ReactiveMap(), startNodesInitialized = batch(() => adoptUserNodes(_props.nodes, nodeLookup, parentLookup, {
+	let _props = merge(getDefaultFlowStateProps(), props), nodeLookup = new ReactiveMap(), parentLookup = new ReactiveMap(), edgeLookup = new ReactiveMap(), connectionLookup = new ReactiveMap(), layoutedEdgesMap = new ReactiveMap(), startNodesInitialized = untrack(() => adoptUserNodes(_props.nodes, nodeLookup, parentLookup, {
 		nodeExtent: _props.nodeExtent,
 		nodeOrigin: _props.nodeOrigin,
 		elevateNodesOnSelect: _props.elevateNodesOnSelect,
 		zIndexMode: _props.zIndexMode,
 		checkEquality: !0
-	})), initialViewport = getInitialViewport(startNodesInitialized, _props.fitView, _props.initialViewport, _props.width ?? 0, _props.height ?? 0, nodeLookup), mediaPrefersDark = createMediaQuery("(prefers-color-scheme: dark)", _props.colorModeSSR === "dark"), [config, setConfig] = createSignal(_props), [ariaLabelConfig, setAriaLabelConfig] = createWritable(() => mergeAriaLabelConfig(config().ariaLabelConfig)), [ariaLiveMessage, setAriaLiveMessage] = createWritable(() => config().ariaLiveMessage), [clickConnectStartHandle, setClickConnectStartHandle] = createSignal(void 0), [connection, setConnection] = createSignal(initialConnection), [domNode, setDomNode] = createSignal(null), [dragging, setDragging] = createSignal(!1), [elementsSelectable, setElementsSelectable] = createWritable(() => config().elementsSelectable), [height, setHeight] = createWritable(() => config().height), [minZoom, _setMinZoom] = createWritable(() => config().minZoom), [maxZoom, _setMaxZoom] = createWritable(() => config().maxZoom), [nodesConnectable, setNodesConnectable] = createWritable(() => config().nodesDraggable), [nodesDraggable, setNodesDraggable] = createWritable(() => config().nodesDraggable), [panZoom, setPanZoom] = createSignal(null), [selectionRect, setSelectionRect] = createSignal(), [selectionRectMode, setSelectionRectMode] = createSignal(), [snapGrid, setSnapGrid] = createWritable(() => config().snapGrid), [translateExtent, _setTranslateExtent] = createWritable(() => config().translateExtent ?? infiniteExtent), [width, setWidth] = createWritable(() => config().width), [selectionKeyPressed, setSelectionKeyPressed] = createSignal(!1), [multiselectionKeyPressed, setMultiselectionKeyPressed] = createSignal(!1), [deleteKeyPressed, setDeleteKeyPressed] = createSignal(!1), [panActivationKeyPressed, setPanActivationKeyPressed] = createSignal(!1), [zoomActivationKeyPressed, setZoomActivationKeyPressed] = createSignal(!1), nodesMemo = createWritableStore(() => config().nodes), edgesMemo = createWritableStore(() => config().edges), viewportMemo = createWritableStore(() => config().viewport ?? initialViewport), transform = createMemo(() => [
-		viewportMemo.get().x,
-		viewportMemo.get().y,
-		viewportMemo.get().zoom
+	})), initialViewport = getInitialViewport(startNodesInitialized, _props.fitView, _props.initialViewport, _props.width ?? 0, _props.height ?? 0, nodeLookup), mediaPrefersDark = createMediaQuery("(prefers-color-scheme: dark)", _props.colorModeSSR === "dark"), [config, setConfig] = createSignal(_props), [ariaLabelConfig, setAriaLabelConfig] = createSignal(() => mergeAriaLabelConfig(config().ariaLabelConfig)), [ariaLiveMessage, setAriaLiveMessage] = createSignal(() => config().ariaLiveMessage), [clickConnectStartHandle, setClickConnectStartHandle] = createSignal(void 0), [connection, setConnection] = createSignal(initialConnection), [domNode, setDomNode] = createSignal(null), [dragging, setDragging] = createSignal(!1), [elementsSelectable, setElementsSelectable] = createSignal(() => config().elementsSelectable), [height, setHeight] = createSignal(() => config().height), [minZoom, _setMinZoom] = createSignal(() => config().minZoom), [maxZoom, _setMaxZoom] = createSignal(() => config().maxZoom), [nodesConnectable, setNodesConnectable] = createSignal(() => config().nodesDraggable), [nodesDraggable, setNodesDraggable] = createSignal(() => config().nodesDraggable), [panZoom, setPanZoom] = createSignal(null), [selectionRect, setSelectionRect] = createSignal(), [selectionRectMode, setSelectionRectMode] = createSignal(), [snapGrid, setSnapGrid] = createSignal(() => config().snapGrid), [translateExtent, _setTranslateExtent] = createSignal(() => config().translateExtent ?? infiniteExtent), [width, setWidth] = createSignal(() => config().width), [selectionKeyPressed, setSelectionKeyPressed] = createSignal(!1), [multiselectionKeyPressed, setMultiselectionKeyPressed] = createSignal(!1), [deleteKeyPressed, setDeleteKeyPressed] = createSignal(!1), [panActivationKeyPressed, setPanActivationKeyPressed] = createSignal(!1), [zoomActivationKeyPressed, setZoomActivationKeyPressed] = createSignal(!1), [nodesStore, setNodesStore] = createStore(_props.nodes), [edgesStore, setEdgesStore] = createStore(_props.edges), [viewportStore, setViewportStore] = createStore(_props.viewport ?? initialViewport);
+	createEffect(() => config().nodes, (next) => {
+		setNodesStore(() => next);
+	}, { defer: !0 }), createEffect(() => config().edges, (next) => {
+		setEdgesStore(() => next);
+	}, { defer: !0 }), createEffect(() => config().viewport, (next) => {
+		next && setViewportStore(() => next);
+	}, { defer: !0 });
+	let transform = createMemo(() => [
+		viewportStore.x,
+		viewportStore.y,
+		viewportStore.zoom
 	]), nodesInitialized = createMemo(() => {
-		let nodes = nodesMemo.get();
+		let nodes = nodesStore;
 		if (nodes.length === 0) return !1;
 		for (let node of nodes) if (!node.hidden && (node.measured?.width === void 0 || node.measured?.height === void 0)) return !1;
 		return !0;
-	}), store = mergeProps$1({
+	}), store = merge({
 		width: 0,
 		height: 0
 	}, config, {
@@ -1620,8 +1592,11 @@ const InitialNodeTypesMap = {
 		get minZoom() {
 			return minZoom();
 		},
+		get edges() {
+			return edgesStore;
+		},
 		get nodes() {
-			return nodesMemo.get();
+			return nodesStore;
 		},
 		get nodesConnectable() {
 			return nodesConnectable();
@@ -1639,10 +1614,10 @@ const InitialNodeTypesMap = {
 			return panZoom();
 		},
 		get selectedNodes() {
-			return nodesMemo.get().filter((node) => node.selected);
+			return nodesStore.filter((node) => node.selected);
 		},
 		get selectedEdges() {
-			return edgesMemo.get().filter((edge) => edge.selected);
+			return edgesStore.filter((edge) => edge.selected);
 		},
 		get selectionRect() {
 			return selectionRect();
@@ -1654,7 +1629,7 @@ const InitialNodeTypesMap = {
 			return snapGrid();
 		},
 		get viewport() {
-			return viewportMemo.get();
+			return viewportStore;
 		},
 		get viewportInitialized() {
 			return panZoom() !== null;
@@ -1703,28 +1678,31 @@ const InitialNodeTypesMap = {
 		minZoom: store.minZoom,
 		maxZoom: store.maxZoom
 	}, options ?? config().fitViewOptions) : !1, resetStoreValues = () => {
-		setDragging(!1), setSelectionRect(void 0), setSelectionRectMode(void 0), setSelectionKeyPressed(!1), setMultiselectionKeyPressed(!1), setDeleteKeyPressed(!1), setPanActivationKeyPressed(!1), setZoomActivationKeyPressed(!1), setConnection({ ...initialConnection }), setClickConnectStartHandle(void 0), viewportMemo.set(config().initialViewport ?? {
+		setDragging(!1), setSelectionRect(void 0), setSelectionRectMode(void 0), setSelectionKeyPressed(!1), setMultiselectionKeyPressed(!1), setDeleteKeyPressed(!1), setPanActivationKeyPressed(!1), setZoomActivationKeyPressed(!1), setConnection({ ...initialConnection }), setClickConnectStartHandle(void 0), setViewportStore(() => config().initialViewport ?? {
 			x: 0,
 			y: 0,
 			zoom: 1
 		}), setAriaLiveMessage(""), setSnapGrid(void 0);
 	}, addEdge = (edgeParams) => {
-		edgesMemo.set((edges) => addEdge$1(edgeParams, edges));
+		setEdgesStore((edges) => {
+			let next = addEdge$1(edgeParams, edges);
+			next !== edges && edges.push(next[next.length - 1]);
+		});
 	}, initialFitViewApplied = !1, initialNodesMeasured = !1, applyInitialFitView = (initialFitView) => {
 		initialFitViewApplied = !initialFitView;
 	}, tryInitialFitView = () => {
 		initialFitViewApplied || !initialNodesMeasured || untrack(() => store.panZoom && store.width && store.height) && (initialFitViewApplied = !0, untrack(() => fitView()));
 	}, updateNodePositions = (nodeDragItems, dragging = !1) => {
-		nodesMemo.set((node) => nodeDragItems.has(node.id), produce((node) => {
-			node.dragging = dragging, node.position = nodeDragItems.get(node.id).position;
-		}));
+		setNodesStore((nodes) => {
+			for (let node of nodes) nodeDragItems.has(node.id) && (node.dragging = dragging, node.position = nodeDragItems.get(node.id).position);
+		});
 	}, pendingEntries, requestUpdateNodeInternals = (updateEntries) => {
 		if (pendingEntries) {
 			pendingEntries.push(...updateEntries);
 			return;
 		}
 		pendingEntries = updateEntries, scheduleIdleCallback(() => {
-			batch(() => {
+			{
 				let updates = new Map(pendingEntries);
 				pendingEntries = void 0;
 				let { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, store.domNode, store.nodeOrigin);
@@ -1738,19 +1716,21 @@ const InitialNodeTypesMap = {
 					let node = nodeLookup.get(change.id)?.internals.userNode;
 					return node && acc.set(node.id, change), acc;
 				}, /* @__PURE__ */ new Map());
-				nodesMemo.set((node) => nodeToChange.has(node.id), produce((node) => {
-					let change = nodeToChange.get(node.id);
-					switch (change.type) {
-						case "dimensions":
-							change.setAttributes && (node.width = change.dimensions?.width ?? node.width, node.height = change.dimensions?.height ?? node.height), node.measured = {
-								...node.measured,
-								...change.dimensions
-							};
-							break;
-						case "position": node.position = change.position ?? node.position;
+				setNodesStore((nodes) => {
+					for (let node of nodes) {
+						let change = nodeToChange.get(node.id);
+						if (change) switch (change.type) {
+							case "dimensions":
+								change.setAttributes && (node.width = change.dimensions?.width ?? node.width, node.height = change.dimensions?.height ?? node.height), node.measured = {
+									...node.measured,
+									...change.dimensions
+								};
+								break;
+							case "position": node.position = change.position ?? node.position;
+						}
 					}
-				})), initialNodesMeasured = !0, tryInitialFitView();
-			});
+				}), flush(), initialNodesMeasured = !0, tryInitialFitView();
+			}
 		});
 	}, zoomBy = async (factor, options) => store.panZoom ? store.panZoom.scaleBy(factor, options) : !1, zoomIn = (options) => zoomBy(1.2, options), zoomOut = (options) => zoomBy(1 / 1.2, options), setCenter = async (x, y, options) => {
 		let nextZoom = options?.zoom === void 0 ? store.maxZoom : options.zoom, currentPanZoom = store.panZoom;
@@ -1767,44 +1747,55 @@ const InitialNodeTypesMap = {
 		store.panZoom?.setClickDistance(distance);
 	}, unselectNodesAndEdges = ({ nodes: _nodes, edges } = {}) => {
 		let nodesToUnselect = new Set((_nodes || store.nodes).map(({ id }) => id));
-		nodesToUnselect.size && nodesMemo.set((node) => nodesToUnselect.has(node.id), produce((node) => {
-			node.selected = !1;
-		}));
-		let edgesToUnselect = new Set((edges || store.edges).map(({ id }) => id));
-		edgesToUnselect.size && edgesMemo.set((edge) => edgesToUnselect.has(edge.id), produce((edge) => {
-			edge.selected = !1;
-		}));
+		nodesToUnselect.size && setNodesStore((nodes) => {
+			for (let node of nodes) nodesToUnselect.has(node.id) && (node.selected = !1);
+		});
+		let edgesToUnselect = new Set((edges ?? store.edges).map(({ id }) => id));
+		edgesToUnselect.size && setEdgesStore((edges) => {
+			for (let edge of edges) edgesToUnselect.has(edge.id) && (edge.selected = !1);
+		});
 	}, addSelectedNodes = (ids) => {
 		let isMultiSelection = store.multiselectionKeyPressed, selectState = /* @__PURE__ */ new Map();
-		nodesMemo.set((node) => {
-			let nodeWillBeSelected = ids.includes(node.id), selected = isMultiSelection && node.selected || nodeWillBeSelected;
-			return selectState.set(node.id, selected), node.selected !== selected;
-		}, produce((node) => {
-			let internalNode = nodeLookup.get(node.id);
-			internalNode && (internalNode.selected = selectState.get(node.id)), node.selected = selectState.get(node.id);
-		})), isMultiSelection || unselectNodesAndEdges({ nodes: [] });
+		setNodesStore((nodes) => {
+			for (let node of nodes) {
+				let nodeWillBeSelected = ids.includes(node.id), selected = isMultiSelection && node.selected || nodeWillBeSelected;
+				if (selectState.set(node.id, selected), node.selected === selected) continue;
+				let internalNode = nodeLookup.get(node.id);
+				internalNode && (internalNode.selected = selected), node.selected = selected;
+			}
+		}), isMultiSelection || unselectNodesAndEdges({ nodes: [] });
 	}, addSelectedEdges = (ids) => {
 		let isMultiSelection = store.multiselectionKeyPressed, edgeSelectState = /* @__PURE__ */ new Map();
-		edgesMemo.set((edge) => {
-			let edgeWillBeSelected = ids.includes(edge.id), selected = isMultiSelection && edge.selected || edgeWillBeSelected;
-			return edgeSelectState.set(edge.id, selected), edge.selected !== selected;
-		}, produce((edge) => {
-			edge.selected = edgeSelectState.get(edge.id);
-		})), isMultiSelection || unselectNodesAndEdges({ edges: [] });
+		setEdgesStore((edges) => {
+			for (let edge of edges) {
+				let edgeWillBeSelected = ids.includes(edge.id), selected = isMultiSelection && edge.selected || edgeWillBeSelected;
+				edgeSelectState.set(edge.id, selected), edge.selected !== selected && (edge.selected = selected);
+			}
+		}), isMultiSelection || unselectNodesAndEdges({ edges: [] });
 	};
-	return createEffect(() => {
-		width() && height() && panZoom() && tryInitialFitView();
-	}), createEffect(() => {
-		store.panZoom?.syncViewport(store.viewport);
-	}), createEffect(() => {
-		let _panZoom = panZoom();
-		_panZoom && (createEffect(() => {
-			_panZoom.setScaleExtent([store.minZoom, store.maxZoom]);
-		}), createEffect(() => {
-			_panZoom.setTranslateExtent(store.translateExtent);
-		}));
-	}), createComputed(mapArray(() => store.nodes, (userNode) => {
-		createComputed(() => {
+	return createEffect(() => !!(width() && height() && panZoom()), (ready) => {
+		ready && tryInitialFitView();
+	}), createEffect(() => ({
+		panZoom: store.panZoom,
+		viewport: {
+			x: store.viewport.x,
+			y: store.viewport.y,
+			zoom: store.viewport.zoom
+		}
+	}), ({ panZoom, viewport }) => {
+		panZoom?.syncViewport(viewport);
+	}), createEffect(() => ({
+		panZoom: panZoom(),
+		extent: [store.minZoom, store.maxZoom]
+	}), ({ panZoom, extent }) => {
+		panZoom?.setScaleExtent(extent);
+	}), createEffect(() => ({
+		panZoom: panZoom(),
+		extent: store.translateExtent
+	}), ({ panZoom, extent }) => {
+		panZoom?.setTranslateExtent(extent);
+	}), createRenderEffect(mapArray(() => store.nodes, (userNode) => {
+		createRenderEffect(() => {
 			let internalNode = untrack(() => nodeLookup.get(userNode.id)), selectedNodeZ = store.elevateNodesOnSelect && store.zIndexMode !== "manual" ? 1e3 : 0, clampedPosition = clampPosition(getNodePositionWithOrigin(userNode, store.nodeOrigin), isCoordinateExtent(userNode.extent) ? userNode.extent : store.nodeExtent, getNodeDimensions(userNode)), preservedMeasured = {
 				width: userNode.measured?.width ?? internalNode?.measured?.width,
 				height: userNode.measured?.height ?? internalNode?.measured?.height
@@ -1825,11 +1816,10 @@ const InitialNodeTypesMap = {
 				zIndexMode: store.zIndexMode,
 				checkEquality: !0
 			});
-		}), onCleanup(() => {});
-	})), createEffect(() => {
-		let currentIds = new Set(store.nodes.map((n) => n.id));
-		for (let id of Array.from(nodeLookup.keys())) currentIds.has(id) || nodeLookup.delete(id);
-	}), createComputed(mapArray(() => store.edges, (edge) => {
+		}, () => {}), onCleanup(() => {});
+	}), () => {}), createEffect(() => new Set(store.nodes.map((n) => n.id)), (currentIds) => {
+		for (let id of untrack(() => Array.from(nodeLookup.keys()))) currentIds.has(id) || nodeLookup.delete(id);
+	}), createRenderEffect(mapArray(() => store.edges, (edge) => {
 		let { source: sourceNodeId, target: targetNodeId, sourceHandle = null, targetHandle = null } = edge, connection = {
 			edgeId: edge.id,
 			source: sourceNodeId,
@@ -1837,11 +1827,9 @@ const InitialNodeTypesMap = {
 			sourceHandle,
 			targetHandle
 		}, sourceKey = `${sourceNodeId}-${sourceHandle}--${targetNodeId}-${targetHandle}`, targetKey = `${targetNodeId}-${targetHandle}--${sourceNodeId}-${sourceHandle}`;
-		createComputed(() => {
-			batch(() => {
-				addConnectionToLookup("source", connection, targetKey, connectionLookup, sourceNodeId, sourceHandle), addConnectionToLookup("target", connection, sourceKey, connectionLookup, targetNodeId, targetHandle), edgeLookup.set(edge.id, edge);
-			});
-		}), createComputed(() => {
+		createRenderEffect(() => {
+			addConnectionToLookup("source", connection, targetKey, connectionLookup, sourceNodeId, sourceHandle), addConnectionToLookup("target", connection, sourceKey, connectionLookup, targetNodeId, targetHandle), edgeLookup.set(edge.id, edge);
+		}, () => {}), createRenderEffect(() => {
 			let sourceNode = nodeLookup.get(edge.source), targetNode = nodeLookup.get(edge.target);
 			if (!sourceNode || !targetNode) return;
 			if (store.onlyRenderVisibleElements) {
@@ -1879,14 +1867,11 @@ const InitialNodeTypesMap = {
 				targetNode,
 				edge
 			});
-		}), onCleanup(() => {
-			batch(() => {
-				edgeLookup.delete(edge.id), layoutedEdgesMap.delete(edge.id), removeConnectionFromLookup("source", targetKey, connectionLookup, sourceNodeId, sourceHandle), removeConnectionFromLookup("target", sourceKey, connectionLookup, targetNodeId, targetHandle);
-			});
+		}, () => {}), onCleanup(() => {
+			edgeLookup.delete(edge.id), layoutedEdgesMap.delete(edge.id), removeConnectionFromLookup("source", targetKey, connectionLookup, sourceNodeId, sourceHandle), removeConnectionFromLookup("target", sourceKey, connectionLookup, targetNodeId, targetHandle);
 		});
-	})), createEffect(() => {
-		let currentIds = new Set(store.edges.map((e) => e.id));
-		for (let id of Array.from(edgeLookup.keys())) currentIds.has(id) || (edgeLookup.delete(id), connectionLookup.delete(id), layoutedEdgesMap.delete(id));
+	}), () => {}), createEffect(() => new Set(store.edges.map((e) => e.id)), (currentIds) => {
+		for (let id of untrack(() => Array.from(edgeLookup.keys()))) currentIds.has(id) || (edgeLookup.delete(id), connectionLookup.delete(id), layoutedEdgesMap.delete(id));
 	}), {
 		store,
 		nodeLookup,
@@ -1907,13 +1892,13 @@ const InitialNodeTypesMap = {
 			setDomNode,
 			setDragging,
 			get setEdges() {
-				return edgesMemo.set;
+				return setEdgesStore;
 			},
 			setElementsSelectable,
 			setHeight,
 			setMultiselectionKeyPressed,
 			get setNodes() {
-				return nodesMemo.set;
+				return setNodesStore;
 			},
 			setNodesConnectable,
 			setNodesDraggable,
@@ -1923,7 +1908,7 @@ const InitialNodeTypesMap = {
 			setSelectionRect,
 			setSelectionRectMode,
 			get setViewport() {
-				return viewportMemo.set;
+				return (viewport) => setViewportStore(() => viewport);
 			},
 			setWidth,
 			setZoomActivationKeyPressed,
@@ -1939,18 +1924,14 @@ const InitialNodeTypesMap = {
 			addSelectedEdges,
 			handleNodeSelection: (id, unselect, nodeRef) => {
 				let node = store.nodes.find((n) => n.id === id);
-				node && (batch(() => {
-					setSelectionRect(void 0), setSelectionRectMode(void 0);
-				}), node.selected ? (unselect || node.selected && store.multiselectionKeyPressed) && (unselectNodesAndEdges({
+				node && (setSelectionRect(void 0), setSelectionRectMode(void 0), node.selected ? (unselect || node.selected && store.multiselectionKeyPressed) && (unselectNodesAndEdges({
 					nodes: [node],
 					edges: []
 				}), requestAnimationFrame(() => nodeRef?.blur())) : addSelectedNodes([id]));
 			},
 			handleEdgeSelection: (id) => {
 				let edge = edgeLookup.get(id);
-				edge && (edge.selectable || store.elementsSelectable && edge.selectable === void 0) && (batch(() => {
-					setSelectionRect(void 0), setSelectionRectMode(void 0);
-				}), edge.selected ? edge.selected && store.multiselectionKeyPressed && unselectNodesAndEdges({
+				edge && (edge.selectable || store.elementsSelectable && edge.selectable === void 0) && (setSelectionRect(void 0), setSelectionRectMode(void 0), edge.selected ? edge.selected && store.multiselectionKeyPressed && unselectNodesAndEdges({
 					nodes: [],
 					edges: [edge]
 				}) : addSelectedEdges([id]));
@@ -1992,7 +1973,7 @@ const InitialNodeTypesMap = {
 			}
 		}
 	};
-}, SolidFlowContext = createContext();
+}, SolidFlowContext = createContext(null);
 function useInternalSolidFlow() {
 	let ctx = useContext(SolidFlowContext);
 	if (!ctx) throw Error("solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useInternalSolidFlow within your components");
@@ -2000,59 +1981,52 @@ function useInternalSolidFlow() {
 }
 //#endregion
 //#region src/components/graph/marker/Marker.tsx
-var _tmpl$$26 = /*#__PURE__*/ template("<svg><polyline class=arrow fill=none stroke-linecap=round stroke-linejoin=round points=\"-5,-4 0,0 -5,4\"></svg>", !1, !0, !1), _tmpl$2$2 = /*#__PURE__*/ template("<svg><marker class=solid-flow__arrowhead viewBox=\"-10 -10 20 20\"refX=0 refY=0></svg>", !1, !0, !1), _tmpl$3$1 = /*#__PURE__*/ template("<svg><polyline class=arrowclosed stroke-linecap=round stroke-linejoin=round points=\"-5,-4 0,0 -5,4 -5,-4\"></svg>", !1, !0, !1);
+var _tmpl$$26 = /* @__PURE__ */ template("<svg><polyline class=arrow fill=none stroke-linecap=round stroke-linejoin=round points=\"-5,-4 0,0 -5,4\"></svg>", 2), _tmpl$2$2 = /* @__PURE__ */ template("<svg><marker class=solid-flow__arrowhead viewBox=\"-10 -10 20 20\"refX=0 refY=0></svg>", 2), _tmpl$3$1 = /* @__PURE__ */ template("<svg><polyline class=arrowclosed stroke-linecap=round stroke-linejoin=round points=\"-5,-4 0,0 -5,4 -5,-4\"></svg>", 2);
 const Marker = (props) => {
-	let _props = mergeProps$1({
+	let _props = propDefaults(props, {
 		markerUnits: "strokeWidth",
 		orient: "auto-start-reverse",
 		width: 12.5,
 		height: 12.5,
 		color: "none"
-	}, props), color = () => _props.color ?? "var(--xy-edge-stroke)";
-	return (() => {
-		var _el$ = _tmpl$2$2();
-		return insert(_el$, createComponent(Show, {
-			get when() {
-				return _props.type === "arrow";
-			},
-			get fallback() {
-				return (() => {
-					var _el$3 = _tmpl$3$1();
-					return effect((_p$) => {
-						var _v$8 = color(), _v$9 = color(), _v$0 = _props.strokeWidth;
-						return _v$8 !== _p$.e && setAttribute(_el$3, "stroke", _p$.e = _v$8), _v$9 !== _p$.t && setAttribute(_el$3, "fill", _p$.t = _v$9), _v$0 !== _p$.a && setAttribute(_el$3, "stroke-width", _p$.a = _v$0), _p$;
-					}, {
-						e: void 0,
-						t: void 0,
-						a: void 0
-					}), _el$3;
-				})();
-			},
-			get children() {
-				var _el$2 = _tmpl$$26();
-				return effect((_p$) => {
-					var _v$ = color(), _v$2 = _props.strokeWidth;
-					return _v$ !== _p$.e && setAttribute(_el$2, "stroke", _p$.e = _v$), _v$2 !== _p$.t && setAttribute(_el$2, "stroke-width", _p$.t = _v$2), _p$;
-				}, {
-					e: void 0,
-					t: void 0
-				}), _el$2;
-			}
-		})), effect((_p$) => {
-			var _v$3 = _props.id, _v$4 = _props.width, _v$5 = _props.height, _v$6 = _props.markerUnits, _v$7 = _props.orient;
-			return _v$3 !== _p$.e && setAttribute(_el$, "id", _p$.e = _v$3), _v$4 !== _p$.t && setAttribute(_el$, "markerWidth", _p$.t = _v$4), _v$5 !== _p$.a && setAttribute(_el$, "markerHeight", _p$.a = _v$5), _v$6 !== _p$.o && setAttribute(_el$, "markerUnits", _p$.o = _v$6), _v$7 !== _p$.i && setAttribute(_el$, "orient", _p$.i = _v$7), _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0,
-			o: void 0,
-			i: void 0
-		}), _el$;
-	})();
+	}), color = () => _props.color ?? "var(--xy-edge-stroke)";
+	var _el$ = _tmpl$2$2();
+	return insert(_el$, createComponent(Show, {
+		get when() {
+			return _props.type === "arrow";
+		},
+		get fallback() {
+			var _el$3 = _tmpl$3$1();
+			return effect(() => ({
+				e: color(),
+				t: color(),
+				a: _props.strokeWidth
+			}), ({ e, t, a }, _p$) => {
+				e !== _p$?.e && setAttribute(_el$3, "stroke", e), t !== _p$?.t && setAttribute(_el$3, "fill", t), a !== _p$?.a && setAttribute(_el$3, "stroke-width", a);
+			}), _el$3;
+		},
+		get children() {
+			var _el$2 = _tmpl$$26();
+			return effect(() => ({
+				e: color(),
+				t: _props.strokeWidth
+			}), ({ e, t }, _p$) => {
+				e !== _p$?.e && setAttribute(_el$2, "stroke", e), t !== _p$?.t && setAttribute(_el$2, "stroke-width", t);
+			}), _el$2;
+		}
+	})), effect(() => ({
+		e: _props.id,
+		t: _props.width,
+		a: _props.height,
+		o: _props.markerUnits,
+		i: _props.orient
+	}), ({ e, t, a, o, i }, _p$) => {
+		e !== _p$?.e && setAttribute(_el$, "id", e), t !== _p$?.t && setAttribute(_el$, "markerWidth", t), a !== _p$?.a && setAttribute(_el$, "markerHeight", a), o !== _p$?.o && setAttribute(_el$, "markerUnits", o), i !== _p$?.i && setAttribute(_el$, "orient", i);
+	}), _el$;
 };
 //#endregion
 //#region src/components/graph/marker/MarkerDefinition.tsx
-var _tmpl$$25 = /*#__PURE__*/ template("<svg class=solid-flow__marker><defs>");
+var _tmpl$$25 = /* @__PURE__ */ template("<svg class=solid-flow__marker><defs>");
 const MarkerDefinition = () => {
 	let { store } = useInternalSolidFlow(), markers = createMemo(() => createMarkerIds(store.edges, {
 		id: store.id,
@@ -2077,36 +2051,34 @@ const MarkerDefinition = () => {
 };
 //#endregion
 //#region src/components/container/EdgeRenderer.tsx
-var _tmpl$$24 = /*#__PURE__*/ template("<div class=solid-flow__edges>");
+var _tmpl$$24 = /* @__PURE__ */ template("<div class=solid-flow__edges><!><!>");
 const EdgeRenderer = (props) => {
 	let { store } = useInternalSolidFlow();
-	return (() => {
-		var _el$ = _tmpl$$24();
-		return insert(_el$, createComponent(MarkerDefinition, {}), null), insert(_el$, createComponent(For, {
-			get each() {
-				return store.visibleEdgeIds;
+	var _el$ = _tmpl$$24(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+	return insert(_el$, createComponent(MarkerDefinition, {}), _el$2), insert(_el$, createComponent(For, {
+		get each() {
+			return store.visibleEdgeIds;
+		},
+		children: (edgeId) => createComponent(EdgeWrapper, {
+			edgeId,
+			get onEdgeClick() {
+				return props.onEdgeClick;
 			},
-			children: (edgeId) => createComponent(EdgeWrapper, {
-				edgeId,
-				get onEdgeClick() {
-					return props.onEdgeClick;
-				},
-				get onEdgeContextMenu() {
-					return props.onEdgeContextMenu;
-				},
-				get onEdgePointerEnter() {
-					return props.onEdgePointerEnter;
-				},
-				get onEdgePointerLeave() {
-					return props.onEdgePointerLeave;
-				}
-			})
-		}), null), _el$;
-	})();
+			get onEdgeContextMenu() {
+				return props.onEdgeContextMenu;
+			},
+			get onEdgePointerEnter() {
+				return props.onEdgePointerEnter;
+			},
+			get onEdgePointerLeave() {
+				return props.onEdgePointerLeave;
+			}
+		})
+	}), _el$3), _el$;
 };
 //#endregion
 //#region src/components/container/NodeRenderer.tsx
-var _tmpl$$23 = /*#__PURE__*/ template("<div class=\"solid-flow__container solid-flow__nodes\">");
+var _tmpl$$23 = /* @__PURE__ */ template("<div class=\"solid-flow__container solid-flow__nodes\">");
 const NodeRenderer = (props) => {
 	let { actions, store } = useInternalSolidFlow(), resizeObserver = isServer ? void 0 : new ResizeObserver((entries) => {
 		actions.requestUpdateNodeInternals(entries.map((entry) => {
@@ -2118,57 +2090,56 @@ const NodeRenderer = (props) => {
 			}];
 		}));
 	});
-	return onCleanup(() => {
+	onCleanup(() => {
 		resizeObserver?.disconnect();
-	}), (() => {
-		var _el$ = _tmpl$$23();
-		return insert(_el$, createComponent(For, {
-			get each() {
-				return store.visibleNodeIds;
+	});
+	var _el$ = _tmpl$$23();
+	return insert(_el$, createComponent(For, {
+		get each() {
+			return store.visibleNodeIds;
+		},
+		children: (nodeId) => createComponent(NodeWrapper, {
+			nodeId,
+			resizeObserver,
+			get nodeClickDistance() {
+				return props.nodeClickDistance;
 			},
-			children: (nodeId) => createComponent(NodeWrapper, {
-				nodeId,
-				resizeObserver,
-				get nodeClickDistance() {
-					return props.nodeClickDistance;
-				},
-				get onNodeClick() {
-					return props.onNodeClick;
-				},
-				get onNodePointerEnter() {
-					return props.onNodePointerEnter;
-				},
-				get onNodePointerMove() {
-					return props.onNodePointerMove;
-				},
-				get onNodePointerLeave() {
-					return props.onNodePointerLeave;
-				},
-				get onNodeDrag() {
-					return props.onNodeDrag;
-				},
-				get onNodeDragStart() {
-					return props.onNodeDragStart;
-				},
-				get onNodeDragStop() {
-					return props.onNodeDragStop;
-				},
-				get onNodeContextMenu() {
-					return props.onNodeContextMenu;
-				}
-			})
-		})), _el$;
-	})();
+			get onNodeClick() {
+				return props.onNodeClick;
+			},
+			get onNodePointerEnter() {
+				return props.onNodePointerEnter;
+			},
+			get onNodePointerMove() {
+				return props.onNodePointerMove;
+			},
+			get onNodePointerLeave() {
+				return props.onNodePointerLeave;
+			},
+			get onNodeDrag() {
+				return props.onNodeDrag;
+			},
+			get onNodeDragStart() {
+				return props.onNodeDragStart;
+			},
+			get onNodeDragStop() {
+				return props.onNodeDragStop;
+			},
+			get onNodeContextMenu() {
+				return props.onNodeContextMenu;
+			}
+		})
+	})), _el$;
 };
 //#endregion
 //#region src/components/container/Pane.tsx
-var _tmpl$$22 = /*#__PURE__*/ template("<div>");
+var _tmpl$$22 = /* @__PURE__ */ template("<div class=\"solid-flow__container solid-flow__pane\">");
 const isSetEqual = (a, b) => {
 	if (a.size !== b.size) return !1;
 	for (let item of a) if (!b.has(item)) return !1;
 	return !0;
 }, Pane = (props) => {
-	let { store, nodeLookup, edgeLookup, connectionLookup, actions } = useInternalSolidFlow(), container, containerBounds = null, connectionEndedOnPane = !1, selectionInProgress = !1, selectedNodeIds = /* @__PURE__ */ new Set(), selectedEdgeIds = /* @__PURE__ */ new Set(), autoPanId = 0, position = {
+	let { store, nodeLookup, edgeLookup, connectionLookup, actions } = useInternalSolidFlow(), [containerRef, setContainerRef] = createSignal(), container, containerBounds = null, connectionEndedOnPane = !1, selectionInProgress = !1, selectedNodeIds = /* @__PURE__ */ new Set(), selectedEdgeIds = /* @__PURE__ */ new Set(), autoPanId = 0, position = {
 		x: 0,
 		y: 0
 	}, autoPanStarted = !1, autoPanOnSelection = () => props.autoPanOnSelection ?? !0, paneClickDistance = () => props.paneClickDistance ?? 1, _panOnDrag = () => store.panActivationKeyPressed || props.panOnDrag, isSelecting = () => store.selectionKeyPressed || !!store.selectionRect || props.selectionOnDrag && _panOnDrag() !== !0, isSelectionEnabled = () => store.elementsSelectable && (isSelecting() || store.selectionRectMode === "user"), onClick = (event) => {
@@ -2177,9 +2148,7 @@ const isSetEqual = (a, b) => {
 				selectionInProgress = !1, connectionEndedOnPane = !1;
 				return;
 			}
-			props.onPaneClick?.({ event }), batch(() => {
-				actions.unselectNodesAndEdges(), actions.setSelectionRectMode(void 0), actions.setSelectionRect(void 0);
-			});
+			props.onPaneClick?.({ event }), actions.unselectNodesAndEdges(), actions.setSelectionRectMode(void 0), actions.setSelectionRect(void 0);
 		}
 	}, onPointerDownCapture = (event) => {
 		if (event.pointerType === "touch" && _panOnDrag() !== !1 && !store.selectionKeyPressed || (containerBounds = container?.getBoundingClientRect() ?? null, !containerBounds)) return;
@@ -2197,7 +2166,7 @@ const isSetEqual = (a, b) => {
 			startY: userSelectionFlowOrigin.y,
 			x,
 			y
-		}), eventTargetIsContainer || (event.stopPropagation(), event.preventDefault());
+		}), flush(), eventTargetIsContainer || (event.stopPropagation(), event.preventDefault());
 	}, commitUserSelectionRect = (mouseX, mouseY) => {
 		let selectionRect = store.selectionRect;
 		if (selectionRect?.startX === void 0 || selectionRect.startY === void 0) return;
@@ -2222,27 +2191,17 @@ const isSetEqual = (a, b) => {
 				edge && (edge.selectable ?? edgesSelectable) && selectedEdgeIds.add(edgeId);
 			}
 		}
-		batch(() => {
-			if (!isSetEqual(prevSelectedNodeIds, selectedNodeIds)) {
-				let selectionMap = /* @__PURE__ */ new Map();
-				actions.setNodes((node) => {
-					let isSelected = selectedNodeIds.has(node.id);
-					return selectionMap.set(node.id, isSelected), !!node.selected !== isSelected;
-				}, produce((node) => {
-					node.selected = selectionMap.get(node.id);
-				}));
+		isSetEqual(prevSelectedNodeIds, selectedNodeIds) || actions.setNodes((nodes) => {
+			for (let node of nodes) {
+				let isSelected = selectedNodeIds.has(node.id);
+				!!node.selected !== isSelected && (node.selected = isSelected);
 			}
-			if (!isSetEqual(prevSelectedEdgeIds, selectedEdgeIds)) {
-				let selectionMap = /* @__PURE__ */ new Map();
-				actions.setEdges((edge) => {
-					let isSelected = selectedEdgeIds.has(edge.id);
-					return selectionMap.set(edge.id, isSelected), !!edge.selected !== isSelected;
-				}, produce((edge) => {
-					edge.selected = selectionMap.get(edge.id);
-				}));
+		}), isSetEqual(prevSelectedEdgeIds, selectedEdgeIds) || actions.setEdges((edges) => {
+			for (let edge of edges) {
+				let isSelected = selectedEdgeIds.has(edge.id);
+				!!edge.selected !== isSelected && (edge.selected = isSelected);
 			}
-			actions.setSelectionRectMode("user"), actions.setSelectionRect(nextUserSelectRect);
-		});
+		}), actions.setSelectionRectMode("user"), actions.setSelectionRect(nextUserSelectRect), flush();
 	}, autoPan = () => {
 		if (!autoPanOnSelection() || !containerBounds) return;
 		let [x = 0, y = 0] = calcAutoPan(position, containerBounds, store.autoPanSpeed);
@@ -2284,14 +2243,18 @@ const isSetEqual = (a, b) => {
 			event.target === container && store.connection.inProgress && (connectionEndedOnPane = !0);
 			return;
 		}
-		event.button === 0 && (event.target?.releasePointerCapture?.(event.pointerId), !selectionInProgress && event.target === container && onClick(event), batch(() => {
-			actions.setSelectionRect(void 0), selectionInProgress && actions.setSelectionRectMode(selectedNodeIds.size > 0 ? "nodes" : void 0);
-		}), selectionInProgress && props.onSelectionEnd?.(event), cleanupAutoPan());
+		event.button === 0 && (event.target?.releasePointerCapture?.(event.pointerId), !selectionInProgress && event.target === container && onClick(event), actions.setSelectionRect(void 0), selectionInProgress && actions.setSelectionRectMode(selectedNodeIds.size > 0 ? "nodes" : void 0), flush(), selectionInProgress && props.onSelectionEnd?.(event), cleanupAutoPan());
 	}, onPointerCancel = (event) => {
 		event.target?.releasePointerCapture?.(event.pointerId), cleanupAutoPan();
 	}, onClickCapture = (event) => {
 		selectionInProgress &&= (event.stopPropagation(), !1);
-	}, onContextMenu = (event) => {
+	};
+	createEventListener(containerRef, "pointerdown", (e) => {
+		isSelectionEnabled() && onPointerDownCapture(e);
+	}, { capture: !0 }), createEventListener(containerRef, "click", (e) => {
+		isSelectionEnabled() && onClickCapture(e);
+	}, { capture: !0 });
+	let onContextMenu = (event) => {
 		if (event.target !== container) return;
 		let result = _panOnDrag();
 		if (Array.isArray(result) && result.includes(2)) {
@@ -2300,23 +2263,16 @@ const isSetEqual = (a, b) => {
 		}
 		props.onPaneContextMenu?.({ event });
 	};
-	return (() => {
-		var _el$ = _tmpl$$22();
-		return _el$.$$contextmenu = onContextMenu, _el$.addEventListener("pointercancel", (e) => isSelectionEnabled() ? onPointerCancel(e) : void 0), _el$.$$pointerup = onPointerUp, _el$.$$pointermove = (e) => isSelectionEnabled() ? onPointerMove(e) : void 0, addEventListener(_el$, "pointerdown", {
-			capture: !0,
-			handleEvent: (e) => {
-				isSelectionEnabled() && onPointerDownCapture(e);
-			}
-		}), _el$.$$click = (e) => isSelectionEnabled() ? void 0 : onClick(e), use((el) => {
-			container = el, el.addEventListener("click", (e) => {
-				isSelectionEnabled() && onClickCapture(e);
-			}, { capture: !0 });
-		}, _el$), insert(_el$, () => props.children), effect(() => className(_el$, clsx$1("solid-flow__container solid-flow__pane", {
-			selection: isSelecting(),
-			dragging: store.dragging,
-			draggable: props.panOnDrag === !0 || Array.isArray(props.panOnDrag) && props.panOnDrag.includes(0)
-		}))), _el$;
-	})();
+	var _el$ = _tmpl$$22();
+	return _el$.$$contextmenu = onContextMenu, _el$.addEventListener("pointercancel", (e) => isSelectionEnabled() ? onPointerCancel(e) : void 0), _el$.$$pointerup = onPointerUp, _el$.$$pointermove = (e) => isSelectionEnabled() ? onPointerMove(e) : void 0, _el$.$$click = (e) => isSelectionEnabled() ? void 0 : onClick(e), ref(() => (el) => {
+		container = el, setContainerRef(el);
+	}, _el$), insert(_el$, () => props.children), effect(() => ({
+		e: !!isSelecting(),
+		t: !!store.dragging,
+		a: !!(props.panOnDrag === !0 || Array.isArray(props.panOnDrag) && props.panOnDrag.includes(0))
+	}), ({ e, t, a }, _p$) => {
+		e !== _p$?.e && _el$.classList.toggle("selection", e), t !== _p$?.t && _el$.classList.toggle("dragging", t), a !== _p$?.a && _el$.classList.toggle("draggable", a);
+	}), _el$;
 };
 delegateEvents([
 	"click",
@@ -2326,45 +2282,38 @@ delegateEvents([
 ]);
 //#endregion
 //#region src/components/container/Panel.tsx
-var _tmpl$$21 = /*#__PURE__*/ template("<div>");
+var _tmpl$$21 = /* @__PURE__ */ template("<div>");
 const Panel = (props) => {
-	let { store } = useInternalSolidFlow(), _props = mergeProps$1({
+	let { store } = useInternalSolidFlow(), _props = propDefaults(props, {
 		position: "top-right",
 		style: {}
-	}, props), [local, rest] = splitProps(_props, [
-		"class",
-		"position",
-		"style",
-		"children"
-	]);
-	return (() => {
-		var _el$ = _tmpl$$21();
-		return spread(_el$, mergeProps({
-			get class() {
-				return clsx$1([
-					"solid-flow__panel",
-					...local.position.split("-"),
-					local.class
-				]);
-			},
-			get style() {
-				return {
-					"pointer-events": store.selectionRectMode ? "none" : void 0,
-					...local.style
-				};
-			}
-		}, rest), !1, !0), insert(_el$, () => local.children), _el$;
-	})();
+	}), rest = omit(_props, "class", "position", "style", "children");
+	var _el$ = _tmpl$$21();
+	return spread(_el$, mergeProps({
+		get class() {
+			return [
+				"solid-flow__panel",
+				..._props.position.split("-"),
+				_props.class
+			];
+		},
+		get style() {
+			return {
+				"pointer-events": store.selectionRectMode ? "none" : void 0,
+				..._props.style
+			};
+		}
+	}, rest), !0), insert(_el$, () => _props.children), _el$;
 };
 //#endregion
 //#region src/components/container/Viewport.tsx
-var _tmpl$$20 = /*#__PURE__*/ template("<div class=\"solid-flow__container solid-flow__viewport xyflow__viewport\">");
+var _tmpl$$20 = /* @__PURE__ */ template("<div class=\"solid-flow__container solid-flow__viewport xyflow__viewport\">");
 const Viewport = (props) => {
 	let { store } = useInternalSolidFlow();
-	return (() => {
-		var _el$ = _tmpl$$20();
-		return insert(_el$, () => props.children), effect((_$p) => (_$p = `translate(${store.viewport.x}px, ${store.viewport.y}px) scale(${store.viewport.zoom})`) == null ? _el$.style.removeProperty("transform") : _el$.style.setProperty("transform", _$p)), _el$;
-	})();
+	var _el$ = _tmpl$$20();
+	return insert(_el$, () => props.children), effect(() => `translate(${store.viewport.x}px, ${store.viewport.y}px) scale(${store.viewport.zoom})`, (_v$) => {
+		setStyleProperty(_el$, "transform", _v$);
+	}), _el$;
 }, ViewportPortal = (props) => {
 	let { store } = useInternalSolidFlow();
 	return createComponent(Show, {
@@ -2383,9 +2332,9 @@ const Viewport = (props) => {
 };
 //#endregion
 //#region src/components/container/Zoom.tsx
-var _tmpl$$19 = /*#__PURE__*/ template("<div class=\"solid-flow__container solid-flow__zoom\">");
+var _tmpl$$19 = /* @__PURE__ */ template("<div class=\"solid-flow__container solid-flow__zoom\">");
 const Zoom = (props) => {
-	let ref, { store, actions } = useInternalSolidFlow(), viewPort = () => props.initialViewport || {
+	let [ref$3, setRef] = createSignal(), { store, actions } = useInternalSolidFlow(), viewPort = () => props.initialViewport || {
 		x: 0,
 		y: 0,
 		zoom: 1
@@ -2397,9 +2346,10 @@ const Zoom = (props) => {
 			zoom
 		});
 	};
-	return onMount(() => {
-		let panZoomInstance = XYPanZoom({
-			domNode: ref,
+	createEffect(() => ref$3(), (el) => {
+		if (!el) return;
+		let panZoomInstance = untrack(() => XYPanZoom({
+			domNode: el,
 			minZoom: store.minZoom,
 			maxZoom: store.maxZoom,
 			translateExtent: store.translateExtent,
@@ -2408,43 +2358,45 @@ const Zoom = (props) => {
 			onPanZoomStart: props.onMoveStart,
 			onPanZoom: props.onMove,
 			onPanZoomEnd: props.onMoveEnd
-		}), vp = panZoomInstance.getViewport();
-		(viewPort().x !== vp.x || viewPort().y !== vp.y || viewPort().zoom !== vp.zoom) && onTransformChange([
+		})), vp = panZoomInstance.getViewport(), initial = untrack(() => viewPort());
+		(initial.x !== vp.x || initial.y !== vp.y || initial.zoom !== vp.zoom) && onTransformChange([
 			vp.x,
 			vp.y,
 			vp.zoom
-		]), batch(() => {
-			actions.setViewport(vp), actions.setPanZoom(panZoomInstance);
-		}), props.onViewportInitialized?.(), createEffect(() => {
-			panZoomInstance.update({
-				lib: store.lib,
-				panActivationKeyPressed: store.panActivationKeyPressed,
-				zoomActivationKeyPressed: store.zoomActivationKeyPressed,
-				noPanClassName: store.noPanClass,
-				noWheelClassName: store.noWheelClass,
-				userSelectionActive: !!store.selectionRect,
-				panOnScrollSpeed: props.panOnScrollSpeed,
-				panOnDrag: panOnDrag(),
-				panOnScroll: panOnScroll(),
-				zoomOnScroll: props.zoomOnScroll,
-				zoomOnDoubleClick: props.zoomOnDoubleClick,
-				zoomOnPinch: props.zoomOnPinch,
-				panOnScrollMode: props.panOnScrollMode,
-				preventScrolling: typeof props.preventScrolling != "boolean" || props.preventScrolling,
-				paneClickDistance: props.paneClickDistance,
-				selectionOnDrag: props.selectionOnDrag,
-				connectionInProgress: store.connection.inProgress,
-				onTransformChange
-			});
+		]), actions.setViewport(vp), actions.setPanZoom(panZoomInstance), props.onViewportInitialized?.();
+	}), createEffect(() => ({
+		panZoom: store.panZoom,
+		options: {
+			lib: store.lib,
+			panActivationKeyPressed: store.panActivationKeyPressed,
+			zoomActivationKeyPressed: store.zoomActivationKeyPressed,
+			noPanClassName: store.noPanClass,
+			noWheelClassName: store.noWheelClass,
+			userSelectionActive: !!store.selectionRect,
+			panOnScrollSpeed: props.panOnScrollSpeed,
+			panOnDrag: panOnDrag(),
+			panOnScroll: panOnScroll(),
+			zoomOnScroll: props.zoomOnScroll,
+			zoomOnDoubleClick: props.zoomOnDoubleClick,
+			zoomOnPinch: props.zoomOnPinch,
+			panOnScrollMode: props.panOnScrollMode,
+			preventScrolling: typeof props.preventScrolling != "boolean" || props.preventScrolling,
+			paneClickDistance: props.paneClickDistance,
+			selectionOnDrag: props.selectionOnDrag,
+			connectionInProgress: store.connection.inProgress
+		}
+	}), ({ panZoom, options }) => {
+		panZoom?.update({
+			...options,
+			onTransformChange
 		});
-	}), (() => {
-		var _el$ = _tmpl$$19(), _ref$ = ref;
-		return typeof _ref$ == "function" ? use(_ref$, _el$) : ref = _el$, insert(_el$, () => props.children), _el$;
-	})();
+	});
+	var _el$ = _tmpl$$19();
+	return ref(() => setRef, _el$), insert(_el$, () => props.children), _el$;
 };
 //#endregion
 //#region src/components/graph/connection/ConnectionLine.tsx
-var _tmpl$$18 = /*#__PURE__*/ template("<svg class=\"solid-flow__container solid-flow__connectionline\"><g>"), _tmpl$2$1 = /*#__PURE__*/ template("<svg><path class=solid-flow__connection-path fill=none></svg>", !1, !0, !1);
+var _tmpl$$18 = /* @__PURE__ */ template("<svg class=\"solid-flow__container solid-flow__connectionline\"><g>"), _tmpl$2$1 = /* @__PURE__ */ template("<svg><path class=solid-flow__connection-path fill=none></svg>", 2);
 const ConnectionLine = (props) => {
 	let { store } = useInternalSolidFlow(), connectionStatus = () => getConnectionStatus(store.connection.isValid);
 	return createComponent(Show, {
@@ -2506,14 +2458,13 @@ const ConnectionLine = (props) => {
 						}
 					});
 				}
-			})), effect((_p$) => {
-				var _v$ = store.width, _v$2 = store.height, _v$3 = props.containerStyle, _v$4 = clsx$1(["solid-flow__connection", connectionStatus()]);
-				return _v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$), _v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2), _p$.a = style(_el$, _v$3, _p$.a), _v$4 !== _p$.o && setAttribute(_el$2, "class", _p$.o = _v$4), _p$;
-			}, {
-				e: void 0,
-				t: void 0,
-				a: void 0,
-				o: void 0
+			})), effect(() => ({
+				e: store.width,
+				t: store.height,
+				a: props.containerStyle,
+				o: ["solid-flow__connection", connectionStatus()]
+			}), ({ e, t, a, o }, _p$) => {
+				e !== _p$?.e && setAttribute(_el$, "width", e), t !== _p$?.t && setAttribute(_el$, "height", t), style(_el$, a, _p$?.a), className(_el$2, o, _p$?.o);
 			}), _el$;
 		}
 	});
@@ -2547,237 +2498,204 @@ const ConnectionLine = (props) => {
 			}
 		}
 	};
-	return (() => {
-		var _el$3 = _tmpl$2$1();
-		return effect((_p$) => {
-			var _v$5 = props.style, _v$6 = path();
-			return _p$.e = style(_el$3, _v$5, _p$.e), _v$6 !== _p$.t && setAttribute(_el$3, "d", _p$.t = _v$6), _p$;
-		}, {
-			e: void 0,
-			t: void 0
-		}), _el$3;
-	})();
+	var _el$3 = _tmpl$2$1();
+	return effect(() => ({
+		e: props.style,
+		t: path()
+	}), ({ e, t }, _p$) => {
+		style(_el$3, e, _p$?.e), t !== _p$?.t && setAttribute(_el$3, "d", t);
+	}), _el$3;
 };
 //#endregion
 //#region src/components/graph/plugins/background/DotPattern.tsx
-var _tmpl$$17 = /*#__PURE__*/ template("<svg><circle></svg>", !1, !0, !1);
+var _tmpl$$17 = /* @__PURE__ */ template("<svg><circle></svg>", 2);
 const DotPattern = (props) => {
-	let _props = mergeProps$1({ radius: 5 }, props);
-	return (() => {
-		var _el$ = _tmpl$$17();
-		return effect((_p$) => {
-			var _v$ = clsx$1("solid-flow__background-pattern", "dots", _props.class), _v$2 = _props.radius, _v$3 = _props.radius, _v$4 = _props.radius;
-			return _v$ !== _p$.e && setAttribute(_el$, "class", _p$.e = _v$), _v$2 !== _p$.t && setAttribute(_el$, "cx", _p$.t = _v$2), _v$3 !== _p$.a && setAttribute(_el$, "cy", _p$.a = _v$3), _v$4 !== _p$.o && setAttribute(_el$, "r", _p$.o = _v$4), _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0,
-			o: void 0
-		}), _el$;
-	})();
+	let _props = propDefaults(props, { radius: 5 });
+	var _el$ = _tmpl$$17();
+	return effect(() => ({
+		e: [
+			"solid-flow__background-pattern",
+			"dots",
+			_props.class
+		],
+		t: _props.radius,
+		a: _props.radius,
+		o: _props.radius
+	}), ({ e, t, a, o }, _p$) => {
+		className(_el$, e, _p$?.e), t !== _p$?.t && setAttribute(_el$, "cx", t), a !== _p$?.a && setAttribute(_el$, "cy", a), o !== _p$?.o && setAttribute(_el$, "r", o);
+	}), _el$;
 };
 //#endregion
 //#region src/components/graph/plugins/background/LinePattern.tsx
-var _tmpl$$16 = /*#__PURE__*/ template("<svg><path></svg>", !1, !0, !1);
+var _tmpl$$16 = /* @__PURE__ */ template("<svg><path></svg>", 2);
 const LinePattern = (props) => {
-	let _props = mergeProps$1({ lineWidth: 1 }, props);
-	return (() => {
-		var _el$ = _tmpl$$16();
-		return effect((_p$) => {
-			var _v$ = _props.lineWidth, _v$2 = `M${_props.dimensions[0] / 2} 0 V${_props.dimensions[1]} M0 ${_props.dimensions[1] / 2} H${_props.dimensions[0]}`, _v$3 = clsx("solid-flow__background-pattern", _props.variant, _props.class);
-			return _v$ !== _p$.e && setAttribute(_el$, "stroke-width", _p$.e = _v$), _v$2 !== _p$.t && setAttribute(_el$, "d", _p$.t = _v$2), _v$3 !== _p$.a && setAttribute(_el$, "class", _p$.a = _v$3), _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0
-		}), _el$;
-	})();
+	let _props = propDefaults(props, { lineWidth: 1 });
+	var _el$ = _tmpl$$16();
+	return effect(() => ({
+		e: _props.lineWidth,
+		t: `M${_props.dimensions[0] / 2} 0 V${_props.dimensions[1]} M0 ${_props.dimensions[1] / 2} H${_props.dimensions[0]}`,
+		a: [
+			"solid-flow__background-pattern",
+			_props.variant,
+			_props.class
+		]
+	}), ({ e, t, a }, _p$) => {
+		e !== _p$?.e && setAttribute(_el$, "stroke-width", e), t !== _p$?.t && setAttribute(_el$, "d", t), className(_el$, a, _p$?.a);
+	}), _el$;
 };
 //#endregion
 //#region src/components/graph/plugins/background/Background.tsx
-var _tmpl$$15 = /*#__PURE__*/ template("<svg data-testid=solid-flow__background><pattern patternUnits=userSpaceOnUse></pattern><rect x=0 y=0 width=100% height=100%>");
+var _tmpl$$15 = /* @__PURE__ */ template("<svg data-testid=solid-flow__background><pattern patternUnits=userSpaceOnUse></pattern><rect x=0 y=0 width=100% height=100%>");
 const DEFAULT_SIZE = {
 	dots: 1,
 	lines: 1,
 	cross: 6
 }, Background = (props) => {
-	let _props = mergeProps$1({
+	let _props = propDefaults(props, {
 		variant: "dots",
 		gap: 20,
 		size: 1,
 		lineWidth: 1,
 		style: {}
-	}, props), { store } = useInternalSolidFlow(), isDots = () => _props.variant === "dots", isCross = () => _props.variant === "cross", patternId = () => `background-pattern-${store.id}-${_props.id ?? ""}`, scaledSize = () => (_props.size ?? DEFAULT_SIZE[_props.variant]) * store.viewport.zoom, gapXY = () => Array.isArray(_props.gap) ? _props.gap : [_props.gap, _props.gap], scaledGap = () => [gapXY()[0] * store.viewport.zoom || 1, gapXY()[1] * store.viewport.zoom || 1], patternDimensions = () => isCross() ? [scaledSize(), scaledSize()] : scaledGap(), patternOffset = () => isDots() ? [scaledSize() / 2, scaledSize() / 2] : [patternDimensions()[0] / 2, patternDimensions()[1] / 2];
-	return (() => {
-		var _el$ = _tmpl$$15(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-		return insert(_el$2, createComponent(Show, {
-			get when() {
-				return !isDots();
-			},
-			get fallback() {
-				return createComponent(DotPattern, {
-					get radius() {
-						return scaledSize() / 2;
-					},
-					get class() {
-						return _props.patternClass;
-					}
-				});
-			},
-			get children() {
-				return createComponent(LinePattern, {
-					get class() {
-						return _props.patternClass;
-					},
-					get dimensions() {
-						return patternDimensions();
-					},
-					get variant() {
-						return _props.variant;
-					},
-					get lineWidth() {
-						return _props.lineWidth;
-					}
-				});
-			}
-		})), effect((_p$) => {
-			var _v$ = clsx$1("solid-flow__container solid-flow__background", _props.class), _v$2 = {
-				"--xy-background-color-props": _props.bgColor,
-				"--xy-background-pattern-color-props": _props.patternColor,
-				..._props.style
-			}, _v$3 = patternId(), _v$4 = store.viewport.x % scaledGap()[0], _v$5 = store.viewport.y % scaledGap()[1], _v$6 = scaledGap()[0], _v$7 = scaledGap()[1], _v$8 = `translate(-${patternOffset()[0]},-${patternOffset()[1]})`, _v$9 = `url(#${patternId()})`;
-			return _v$ !== _p$.e && setAttribute(_el$, "class", _p$.e = _v$), _p$.t = style(_el$, _v$2, _p$.t), _v$3 !== _p$.a && setAttribute(_el$2, "id", _p$.a = _v$3), _v$4 !== _p$.o && setAttribute(_el$2, "x", _p$.o = _v$4), _v$5 !== _p$.i && setAttribute(_el$2, "y", _p$.i = _v$5), _v$6 !== _p$.n && setAttribute(_el$2, "width", _p$.n = _v$6), _v$7 !== _p$.s && setAttribute(_el$2, "height", _p$.s = _v$7), _v$8 !== _p$.h && setAttribute(_el$2, "patternTransform", _p$.h = _v$8), _v$9 !== _p$.r && setAttribute(_el$3, "fill", _p$.r = _v$9), _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0,
-			o: void 0,
-			i: void 0,
-			n: void 0,
-			s: void 0,
-			h: void 0,
-			r: void 0
-		}), _el$;
-	})();
+	}), { store } = useInternalSolidFlow(), isDots = () => _props.variant === "dots", isCross = () => _props.variant === "cross", patternId = () => `background-pattern-${store.id}-${_props.id ?? ""}`, scaledSize = () => (_props.size ?? DEFAULT_SIZE[_props.variant]) * store.viewport.zoom, gapXY = () => Array.isArray(_props.gap) ? _props.gap : [_props.gap, _props.gap], scaledGap = () => [gapXY()[0] * store.viewport.zoom || 1, gapXY()[1] * store.viewport.zoom || 1], patternDimensions = () => isCross() ? [scaledSize(), scaledSize()] : scaledGap(), patternOffset = () => isDots() ? [scaledSize() / 2, scaledSize() / 2] : [patternDimensions()[0] / 2, patternDimensions()[1] / 2];
+	var _el$ = _tmpl$$15(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+	return insert(_el$2, createComponent(Show, {
+		get when() {
+			return !isDots();
+		},
+		get fallback() {
+			return createComponent(DotPattern, {
+				get radius() {
+					return scaledSize() / 2;
+				},
+				get class() {
+					return _props.patternClass;
+				}
+			});
+		},
+		get children() {
+			return createComponent(LinePattern, {
+				get class() {
+					return _props.patternClass;
+				},
+				get dimensions() {
+					return patternDimensions();
+				},
+				get variant() {
+					return _props.variant;
+				},
+				get lineWidth() {
+					return _props.lineWidth;
+				}
+			});
+		}
+	})), effect(() => ({
+		e: ["solid-flow__container solid-flow__background", _props.class],
+		t: {
+			"--xy-background-color-props": _props.bgColor,
+			"--xy-background-pattern-color-props": _props.patternColor,
+			..._props.style
+		},
+		a: patternId(),
+		o: store.viewport.x % scaledGap()[0],
+		i: store.viewport.y % scaledGap()[1],
+		n: scaledGap()[0],
+		s: scaledGap()[1],
+		h: `translate(-${patternOffset()[0]},-${patternOffset()[1]})`,
+		r: `url(#${patternId()})`
+	}), ({ e, t, a, o, i, n, s, h, r }, _p$) => {
+		className(_el$, e, _p$?.e), style(_el$, t, _p$?.t), a !== _p$?.a && setAttribute(_el$2, "id", a), o !== _p$?.o && setAttribute(_el$2, "x", o), i !== _p$?.i && setAttribute(_el$2, "y", i), n !== _p$?.n && setAttribute(_el$2, "width", n), s !== _p$?.s && setAttribute(_el$2, "height", s), h !== _p$?.h && setAttribute(_el$2, "patternTransform", h), r !== _p$?.r && setAttribute(_el$3, "fill", r);
+	}), _el$;
 };
 //#endregion
 //#region src/components/graph/plugins/controls/ControlButton.tsx
-var _tmpl$$14 = /*#__PURE__*/ template("<button type=button>");
+var _tmpl$$14 = /* @__PURE__ */ template("<button>");
 const ControlButton = (props) => {
-	let [local, rest] = splitProps(props, [
-		"class",
-		"bgColor",
-		"bgColorHover",
-		"color",
-		"colorHover",
-		"borderColor",
-		"onClick",
-		"children"
-	]), style = () => Object.entries({
-		"--xy-controls-button-background-color-props": local.bgColor,
-		"--xy-controls-button-background-color-hover-props": local.bgColorHover,
-		"--xy-controls-button-color-props": local.color,
-		"--xy-controls-button-color-hover-props": local.colorHover,
-		"--xy-controls-button-border-color-props": local.borderColor
+	let rest = omit(props, "class", "bgColor", "bgColorHover", "color", "colorHover", "borderColor", "onClick", "children"), style = () => Object.entries({
+		"--xy-controls-button-background-color-props": props.bgColor,
+		"--xy-controls-button-background-color-hover-props": props.bgColorHover,
+		"--xy-controls-button-color-props": props.color,
+		"--xy-controls-button-color-hover-props": props.colorHover,
+		"--xy-controls-button-border-color-props": props.borderColor
 	}).filter(([_, value]) => value !== void 0).reduce((acc, [key, value]) => (acc[key] = value, acc), {});
-	return (() => {
-		var _el$ = _tmpl$$14();
-		return _el$.$$click = (e) => local.onClick?.(e), spread(_el$, mergeProps({
-			get class() {
-				return clsx$1("solid-flow__controls-button", local.class);
-			},
-			get style() {
-				return style();
-			}
-		}, rest), !1, !0), insert(_el$, () => local.children), _el$;
-	})();
+	var _el$ = _tmpl$$14();
+	return spread(_el$, mergeProps({
+		type: "button",
+		get class() {
+			return ["solid-flow__controls-button", props.class];
+		},
+		onClick: (e) => props.onClick?.(e),
+		get style() {
+			return style();
+		}
+	}, rest), !0), insert(_el$, () => props.children), _el$;
 };
-delegateEvents(["click"]);
 //#endregion
 //#region src/components/graph/plugins/controls/icons/Fit.tsx
-var _tmpl$$13 = /*#__PURE__*/ template("<svg xmlns=http://www.w3.org/2000/svg viewBox=\"0 0 32 30\"><path d=\"M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z\">");
+var _tmpl$$13 = /* @__PURE__ */ template("<svg viewBox=\"0 0 32 30\"><path d=\"M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z\">");
 const Fit = () => _tmpl$$13();
 //#endregion
 //#region src/components/graph/plugins/controls/icons/Lock.tsx
-var _tmpl$$12 = /*#__PURE__*/ template("<svg xmlns=http://www.w3.org/2000/svg viewBox=\"0 0 25 32\"><path d=\"M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z\">");
+var _tmpl$$12 = /* @__PURE__ */ template("<svg viewBox=\"0 0 25 32\"><path d=\"M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z\">");
 const Lock = () => _tmpl$$12();
 //#endregion
 //#region src/components/graph/plugins/controls/icons/Minus.tsx
-var _tmpl$$11 = /*#__PURE__*/ template("<svg xmlns=http://www.w3.org/2000/svg viewBox=\"0 0 32 5\"><path d=\"M0 0h32v4.2H0z\">");
+var _tmpl$$11 = /* @__PURE__ */ template("<svg viewBox=\"0 0 32 5\"><path d=\"M0 0h32v4.2H0z\">");
 const Minus = () => _tmpl$$11();
 //#endregion
 //#region src/components/graph/plugins/controls/icons/Plus.tsx
-var _tmpl$$10 = /*#__PURE__*/ template("<svg xmlns=http://www.w3.org/2000/svg viewBox=\"0 0 32 32\"><path d=\"M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z\">");
+var _tmpl$$10 = /* @__PURE__ */ template("<svg viewBox=\"0 0 32 32\"><path d=\"M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z\">");
 const Plus = () => _tmpl$$10();
 //#endregion
 //#region src/components/graph/plugins/controls/icons/Unlock.tsx
-var _tmpl$$9 = /*#__PURE__*/ template("<svg xmlns=http://www.w3.org/2000/svg viewBox=\"0 0 25 32\"><path d=\"M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z\">");
+var _tmpl$$9 = /* @__PURE__ */ template("<svg viewBox=\"0 0 25 32\"><path d=\"M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z\">");
 const Unlock = () => _tmpl$$9(), Controls = (props) => {
-	let { store, actions } = useInternalSolidFlow(), _props = mergeProps$1({
+	let { store, actions } = useInternalSolidFlow(), _props = propDefaults(props, {
 		position: "bottom-left",
 		showZoom: !0,
 		showFitView: !0,
 		showLock: !0,
 		orientation: "vertical"
-	}, props), [local, rest] = splitProps(_props, [
-		"class",
-		"position",
-		"showZoom",
-		"showFitView",
-		"showLock",
-		"orientation",
-		"fitViewOptions",
-		"beforeControls",
-		"afterControls",
-		"buttonBgColor",
-		"buttonBgColorHover",
-		"buttonColor",
-		"buttonColorHover",
-		"buttonBorderColor",
-		"style",
-		"children"
-	]), getMinZoomReached = () => store.viewport.zoom <= store.minZoom, getMaxZoomReached = () => store.viewport.zoom >= store.maxZoom, getIsInteractive = () => store.nodesDraggable || store.nodesConnectable || store.elementsSelectable, onZoomInHandler = () => {
+	}), rest = omit(_props, "class", "position", "showZoom", "showFitView", "showLock", "orientation", "fitViewOptions", "beforeControls", "afterControls", "buttonBgColor", "buttonBgColorHover", "buttonColor", "buttonColorHover", "buttonBorderColor", "style", "children"), getMinZoomReached = () => store.viewport.zoom <= store.minZoom, getMaxZoomReached = () => store.viewport.zoom >= store.maxZoom, getIsInteractive = () => store.nodesDraggable || store.nodesConnectable || store.elementsSelectable, onZoomInHandler = () => {
 		actions.zoomIn();
 	}, onZoomOutHandler = () => {
 		actions.zoomOut();
 	}, onFitViewHandler = () => {
-		actions.fitView(local.fitViewOptions);
+		actions.fitView(_props.fitViewOptions);
 	}, onToggleInteractivity = () => {
 		let newValue = !getIsInteractive();
-		batch(() => {
-			actions.setNodesDraggable(newValue), actions.setNodesConnectable(newValue), actions.setElementsSelectable(newValue);
-		});
+		actions.setNodesDraggable(newValue), actions.setNodesConnectable(newValue), actions.setElementsSelectable(newValue);
 	}, buttonProps = () => ({
-		bgColor: local.buttonBgColor,
-		bgColorHover: local.buttonBgColorHover,
-		color: local.buttonColor,
-		colorHover: local.buttonColorHover,
-		borderColor: local.buttonBorderColor
+		bgColor: _props.buttonBgColor,
+		bgColorHover: _props.buttonBgColorHover,
+		color: _props.buttonColor,
+		colorHover: _props.buttonColorHover,
+		borderColor: _props.buttonBorderColor
 	});
 	return createComponent(Panel, mergeProps({
 		get class() {
-			return clsx$1([
+			return [
 				"solid-flow__controls",
-				local.orientation,
-				local.class
-			]);
+				_props.orientation,
+				_props.class
+			];
 		},
 		get position() {
-			return local.position;
+			return _props.position;
 		},
 		"data-testid": "solid-flow__controls",
 		get "aria-label"() {
 			return store.ariaLabelConfig["controls.ariaLabel"];
 		},
 		get style() {
-			return local.style;
+			return _props.style;
 		}
 	}, rest, { get children() {
 		return [
-			memo(() => local.beforeControls),
+			memo(() => _props.beforeControls),
 			createComponent(Show, {
 				get when() {
-					return local.showZoom;
+					return _props.showZoom;
 				},
 				get children() {
 					return [createComponent(ControlButton, mergeProps({
@@ -2813,7 +2731,7 @@ const Unlock = () => _tmpl$$9(), Controls = (props) => {
 			}),
 			createComponent(Show, {
 				get when() {
-					return local.showFitView;
+					return _props.showFitView;
 				},
 				get children() {
 					return createComponent(ControlButton, mergeProps({
@@ -2832,7 +2750,7 @@ const Unlock = () => _tmpl$$9(), Controls = (props) => {
 			}),
 			createComponent(Show, {
 				get when() {
-					return local.showLock;
+					return _props.showLock;
 				},
 				get children() {
 					return createComponent(ControlButton, mergeProps({
@@ -2859,14 +2777,14 @@ const Unlock = () => _tmpl$$9(), Controls = (props) => {
 					} }));
 				}
 			}),
-			memo(() => local.children),
-			memo(() => local.afterControls)
+			memo(() => _props.children),
+			memo(() => _props.afterControls)
 		];
 	} }));
 };
 //#endregion
 //#region src/components/graph/plugins/EdgeToolbar.tsx
-var _tmpl$$8 = /*#__PURE__*/ template("<div>");
+var _tmpl$$8 = /* @__PURE__ */ template("<div>");
 /**
 * The `<EdgeToolbar />` component renders a toolbar or tooltip for an edge.
 * It must be used inside a custom edge component. By default it is only
@@ -2875,16 +2793,7 @@ var _tmpl$$8 = /*#__PURE__*/ template("<div>");
 * The toolbar does not scale with the viewport so that its content is always legible.
 */
 const EdgeToolbar = (props) => {
-	let [local, rest] = splitProps(props, [
-		"x",
-		"y",
-		"alignX",
-		"alignY",
-		"isVisible",
-		"selectEdgeOnClick",
-		"class",
-		"children"
-	]), { store, edgeLookup } = useInternalSolidFlow(), edgeId = useEdgeId(), isActive = () => typeof local.isVisible == "boolean" ? local.isVisible : !!edgeLookup.get(edgeId())?.selected, transform = () => getEdgeToolbarTransform(local.x, local.y, store.viewport.zoom, local.alignX ?? "center", local.alignY ?? "center");
+	let rest = omit(props, "x", "y", "alignX", "alignY", "isVisible", "selectEdgeOnClick", "class", "children"), { store, edgeLookup } = useInternalSolidFlow(), edgeId = useEdgeId(), isActive = () => typeof props.isVisible == "boolean" ? props.isVisible : !!edgeLookup.get(edgeId())?.selected, transform = () => getEdgeToolbarTransform(props.x, props.y, store.viewport.zoom, props.alignX ?? "center", props.alignY ?? "center");
 	return createComponent(Show, {
 		get when() {
 			return isActive();
@@ -2892,14 +2801,14 @@ const EdgeToolbar = (props) => {
 		get children() {
 			return createComponent(EdgeLabel, {
 				get selectEdgeOnClick() {
-					return local.selectEdgeOnClick;
+					return props.selectEdgeOnClick;
 				},
 				transparent: !0,
 				get children() {
 					var _el$ = _tmpl$$8();
 					return spread(_el$, mergeProps({
 						get class() {
-							return clsx$1("solid-flow__edge-toolbar", local.class);
+							return ["solid-flow__edge-toolbar", props.class];
 						},
 						get style() {
 							return {
@@ -2911,7 +2820,7 @@ const EdgeToolbar = (props) => {
 						get "data-id"() {
 							return edgeId();
 						}
-					}, rest), !1, !0), insert(_el$, () => local.children), _el$;
+					}, rest), !0), insert(_el$, () => props.children), _el$;
 				}
 			});
 		}
@@ -2919,40 +2828,41 @@ const EdgeToolbar = (props) => {
 };
 //#endregion
 //#region src/components/graph/plugins/minimap/MiniMapNode.tsx
-var _tmpl$$7 = /*#__PURE__*/ template("<svg><rect></svg>", !1, !0, !1);
+var _tmpl$$7 = /* @__PURE__ */ template("<svg><rect></svg>", 2);
 const MiniMapNode = (props) => {
-	let _props = mergeProps$1({
+	let _props = propDefaults(props, {
 		borderRadius: 5,
 		width: 0,
 		height: 0
-	}, props), style$1 = () => Object.entries({
+	}), style$1 = () => Object.entries({
 		fill: _props.color,
 		stroke: _props.strokeColor,
 		"stroke-width": _props.strokeWidth
 	}).filter(([_, value]) => value !== void 0).reduce((acc, [key, value]) => (acc[key] = value, acc), {});
-	return (() => {
-		var _el$ = _tmpl$$7();
-		return effect((_p$) => {
-			var _v$ = clsx$1("solid-flow__minimap-node", { selected: _props.selected }, _props.class), _v$2 = _props.x, _v$3 = _props.y, _v$4 = _props.borderRadius, _v$5 = _props.borderRadius, _v$6 = _props.width, _v$7 = _props.height, _v$8 = _props.shapeRendering, _v$9 = style$1();
-			return _v$ !== _p$.e && setAttribute(_el$, "class", _p$.e = _v$), _v$2 !== _p$.t && setAttribute(_el$, "x", _p$.t = _v$2), _v$3 !== _p$.a && setAttribute(_el$, "y", _p$.a = _v$3), _v$4 !== _p$.o && setAttribute(_el$, "rx", _p$.o = _v$4), _v$5 !== _p$.i && setAttribute(_el$, "ry", _p$.i = _v$5), _v$6 !== _p$.n && setAttribute(_el$, "width", _p$.n = _v$6), _v$7 !== _p$.s && setAttribute(_el$, "height", _p$.s = _v$7), _v$8 !== _p$.h && setAttribute(_el$, "shape-rendering", _p$.h = _v$8), _p$.r = style(_el$, _v$9, _p$.r), _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0,
-			o: void 0,
-			i: void 0,
-			n: void 0,
-			s: void 0,
-			h: void 0,
-			r: void 0
-		}), _el$;
-	})();
+	var _el$ = _tmpl$$7();
+	return effect(() => ({
+		e: [
+			"solid-flow__minimap-node",
+			{ selected: !!_props.selected },
+			_props.class
+		],
+		t: _props.x,
+		a: _props.y,
+		o: _props.borderRadius,
+		i: _props.borderRadius,
+		n: _props.width,
+		s: _props.height,
+		h: _props.shapeRendering,
+		r: style$1()
+	}), ({ e, t, a, o, i, n, s, h, r }, _p$) => {
+		className(_el$, e, _p$?.e), t !== _p$?.t && setAttribute(_el$, "x", t), a !== _p$?.a && setAttribute(_el$, "y", a), o !== _p$?.o && setAttribute(_el$, "rx", o), i !== _p$?.i && setAttribute(_el$, "ry", i), n !== _p$?.n && setAttribute(_el$, "width", n), s !== _p$?.s && setAttribute(_el$, "height", s), h !== _p$?.h && setAttribute(_el$, "shape-rendering", h), style(_el$, r, _p$?.r);
+	}), _el$;
 };
 //#endregion
 //#region src/components/graph/plugins/minimap/MiniMap.tsx
-var _tmpl$$6 = /*#__PURE__*/ template("<svg class=solid-flow__minimap-svg role=img><title></title><path class=solid-flow__minimap-mask fill-rule=evenodd pointer-events=none>");
+var _tmpl$$6 = /* @__PURE__ */ template("<svg class=solid-flow__minimap-svg role=img><title></title><path class=solid-flow__minimap-mask fill-rule=evenodd pointer-events=none>");
 const getAttrFunction = (func) => func instanceof Function ? func : () => func, MiniMap = (props) => {
-	let { store, nodeLookup } = useInternalSolidFlow(), _props = mergeProps$1({
+	let { store, nodeLookup } = useInternalSolidFlow(), _props = propDefaults(props, {
 		position: "bottom-right",
 		nodeClass: "",
 		nodeStrokeColor: "transparent",
@@ -2963,26 +2873,7 @@ const getAttrFunction = (func) => func instanceof Function ? func : () => func,
 		nodeBorderRadius: 5,
 		nodeStrokeWidth: 2,
 		style: {}
-	}, props), [local, paneProps] = splitProps(_props, [
-		"class",
-		"style",
-		"position",
-		"nodeClass",
-		"nodeStrokeColor",
-		"nodeColor",
-		"pannable",
-		"zoomable",
-		"inversePan",
-		"zoomStep",
-		"bgColor",
-		"width",
-		"height",
-		"maskColor",
-		"maskStrokeColor",
-		"maskStrokeWidth",
-		"nodeBorderRadius",
-		"nodeStrokeWidth"
-	]), nodeColorFunc = () => local.nodeColor === void 0 ? void 0 : getAttrFunction(local.nodeColor), nodeStrokeColorFunc = () => getAttrFunction(local.nodeStrokeColor), nodeClassFunc = () => getAttrFunction(local.nodeClass), shapeRendering = () => typeof window > "u" || window.chrome ? "crispEdges" : "geometricPrecision", labelledBy = createMemo(() => `solid-flow__minimap-desc-${store.id}`), getViewBB = () => ({
+	}), paneProps = omit(_props, "class", "style", "position", "nodeClass", "nodeStrokeColor", "nodeColor", "pannable", "zoomable", "inversePan", "zoomStep", "bgColor", "width", "height", "maskColor", "maskStrokeColor", "maskStrokeWidth", "nodeBorderRadius", "nodeStrokeWidth"), nodeColorFunc = () => _props.nodeColor === void 0 ? void 0 : getAttrFunction(_props.nodeColor), nodeStrokeColorFunc = () => getAttrFunction(_props.nodeStrokeColor), nodeClassFunc = () => getAttrFunction(_props.nodeClass), shapeRendering = () => typeof window > "u" || window.chrome ? "crispEdges" : "geometricPrecision", labelledBy = createMemo(() => `solid-flow__minimap-desc-${store.id}`), getViewBB = () => ({
 		x: -store.viewport.x / store.viewport.zoom,
 		y: -store.viewport.y / store.viewport.zoom,
 		width: store.width / store.viewport.zoom,
@@ -2990,28 +2881,28 @@ const getAttrFunction = (func) => func instanceof Function ? func : () => func,
 	}), getBoundingRect = () => {
 		let viewBB = getViewBB();
 		return nodeLookup.size > 0 ? getBoundsOfRects(getInternalNodesBounds(nodeLookup), viewBB) : viewBB;
-	}, getScaledWidth = () => getBoundingRect().width / local.width, getScaledHeight = () => getBoundingRect().height / local.height, getViewScale = () => Math.max(getScaledWidth(), getScaledHeight()), getViewWidth = () => getViewScale() * local.width, getViewHeight = () => getViewScale() * local.height, getOffset = () => 5 * getViewScale(), getX = () => {
+	}, getScaledWidth = () => getBoundingRect().width / _props.width, getScaledHeight = () => getBoundingRect().height / _props.height, getViewScale = () => Math.max(getScaledWidth(), getScaledHeight()), getViewWidth = () => getViewScale() * _props.width, getViewHeight = () => getViewScale() * _props.height, getOffset = () => 5 * getViewScale(), getX = () => {
 		let boundingRect = getBoundingRect();
 		return boundingRect.x - (getViewWidth() - boundingRect.width) / 2 - getOffset();
 	}, getY = () => {
 		let boundingRect = getBoundingRect();
 		return boundingRect.y - (getViewHeight() - boundingRect.height) / 2 - getOffset();
-	}, getViewboxWidth = () => getViewWidth() + getOffset() * 2, getViewboxHeight = () => getViewHeight() + getOffset() * 2, strokeWidth = () => local.maskStrokeWidth ? local.maskStrokeWidth * getViewScale() : void 0, prevNodeIds = [], nodeIds = () => {
+	}, getViewboxWidth = () => getViewWidth() + getOffset() * 2, getViewboxHeight = () => getViewHeight() + getOffset() * 2, strokeWidth = () => _props.maskStrokeWidth ? _props.maskStrokeWidth * getViewScale() : void 0, prevNodeIds = [], nodeIds = () => {
 		let currentNodeIds = store.nodes.map((node) => node.id), currentSet = new Set(currentNodeIds);
 		return (prevNodeIds.length !== currentNodeIds.length || !prevNodeIds.every((id) => currentSet.has(id))) && (prevNodeIds = currentNodeIds), prevNodeIds;
 	};
 	return createComponent(Panel, mergeProps({
 		get position() {
-			return local.position;
+			return _props.position;
 		},
 		"data-testid": "solid-flow__minimap",
 		get class() {
-			return clsx$1(["solid-flow__minimap", local.class]);
+			return ["solid-flow__minimap", _props.class];
 		},
 		get style() {
 			return {
-				"--xy-minimap-background-color-props": local.bgColor,
-				...local.style
+				"--xy-minimap-background-color-props": _props.bgColor,
+				..._props.style
 			};
 		}
 	}, paneProps, { get children() {
@@ -3020,101 +2911,107 @@ const getAttrFunction = (func) => func instanceof Function ? func : () => func,
 				return store.panZoom;
 			},
 			children: (panZoom) => {
-				let [ref, setRef] = createSignal();
-				return onMount(() => {
-					let minimap = XYMinimap({
-						domNode: ref(),
-						panZoom: panZoom(),
+				let [ref$2, setRef] = createSignal(), [minimap, setMinimap] = createSignal();
+				createEffect(() => ({
+					el: ref$2(),
+					panZoom: panZoom()
+				}), ({ el, panZoom }) => {
+					if (!el) return;
+					let instance = XYMinimap({
+						domNode: el,
+						panZoom,
 						getTransform: () => store.transform,
 						getViewScale
 					});
-					createEffect(() => {
-						minimap.update({
-							translateExtent: store.translateExtent,
-							width: store.width,
-							height: store.height,
-							inversePan: local.inversePan,
-							zoomStep: local.zoomStep,
-							pannable: local.pannable,
-							zoomable: local.zoomable
-						});
-					}), onCleanup(() => {
-						minimap.destroy();
-					});
-				}), (() => {
-					var _el$ = _tmpl$$6(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-					return use(setRef, _el$), insert(_el$2, () => store.ariaLabelConfig["minimap.ariaLabel"]), insert(_el$, createComponent(Index, {
-						get each() {
-							return nodeIds();
-						},
-						children: (nodeId) => {
-							let node = createMemo(() => nodeLookup.get(nodeId())), nodeVisible = () => !!(node() && nodeHasDimensions(node()) && !node().hidden);
-							return createComponent(Show, {
-								get when() {
-									return memo(() => !!nodeVisible())() && getNodeDimensions(node());
+					return setMinimap(instance), () => {
+						instance.destroy();
+					};
+				}), createEffect(() => ({
+					instance: minimap(),
+					options: {
+						translateExtent: store.translateExtent,
+						width: store.width,
+						height: store.height,
+						inversePan: _props.inversePan,
+						zoomStep: _props.zoomStep,
+						pannable: _props.pannable,
+						zoomable: _props.zoomable
+					}
+				}), ({ instance, options }) => {
+					instance?.update(options);
+				});
+				var _el$ = _tmpl$$6(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+				return ref(() => setRef, _el$), insert(_el$2, () => store.ariaLabelConfig["minimap.ariaLabel"]), insert(_el$, createComponent(For, {
+					keyed: !1,
+					get each() {
+						return nodeIds();
+					},
+					children: (nodeId) => {
+						let node = createMemo(() => nodeLookup.get(nodeId())), nodeVisible = () => !!(node() && nodeHasDimensions(node()) && !node().hidden);
+						return createComponent(Show, {
+							get when() {
+								return memo(() => !!nodeVisible())() ? getNodeDimensions(node()) : nodeVisible();
+							},
+							children: (nodeDimensions) => createComponent(MiniMapNode, {
+								get x() {
+									return node().internals.positionAbsolute.x;
 								},
-								children: (nodeDimensions) => createComponent(MiniMapNode, {
-									get x() {
-										return node().internals.positionAbsolute.x;
-									},
-									get y() {
-										return node().internals.positionAbsolute.y;
-									},
-									get borderRadius() {
-										return local.nodeBorderRadius;
-									},
-									get strokeWidth() {
-										return local.nodeStrokeWidth;
-									},
-									get shapeRendering() {
-										return shapeRendering();
-									},
-									get width() {
-										return nodeDimensions().width;
-									},
-									get height() {
-										return nodeDimensions().height;
-									},
-									get selected() {
-										return node().selected;
-									},
-									get color() {
-										return nodeColorFunc()?.call(null, node());
-									},
-									get strokeColor() {
-										return nodeStrokeColorFunc().call(null, node());
-									},
-									get class() {
-										return nodeClassFunc().call(null, node());
-									}
-								})
-							});
-						}
-					}), _el$3), effect((_p$) => {
-						var _v$ = local.width, _v$2 = local.height, _v$3 = `${getX()} ${getY()} ${getViewboxWidth()} ${getViewboxHeight()}`, _v$4 = labelledBy(), _v$5 = local.maskColor, _v$6 = local.maskStrokeColor, _v$7 = strokeWidth(), _v$8 = labelledBy(), _v$9 = `M${getX() - getOffset()},${getY() - getOffset()}h${getViewboxWidth() + getOffset() * 2}v${getViewboxHeight() + getOffset() * 2}h${-getViewboxWidth() - getOffset() * 2}z
-            M${getViewBB().x},${getViewBB().y}h${getViewBB().width}v${getViewBB().height}h${-getViewBB().width}z`;
-						return _v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$), _v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2), _v$3 !== _p$.a && setAttribute(_el$, "viewBox", _p$.a = _v$3), _v$4 !== _p$.o && setAttribute(_el$, "aria-labelledby", _p$.o = _v$4), _v$5 !== _p$.i && ((_p$.i = _v$5) == null ? _el$.style.removeProperty("--xy-minimap-mask-background-color-props") : _el$.style.setProperty("--xy-minimap-mask-background-color-props", _v$5)), _v$6 !== _p$.n && ((_p$.n = _v$6) == null ? _el$.style.removeProperty("--xy-minimap-mask-stroke-color-props") : _el$.style.setProperty("--xy-minimap-mask-stroke-color-props", _v$6)), _v$7 !== _p$.s && ((_p$.s = _v$7) == null ? _el$.style.removeProperty("--xy-minimap-mask-stroke-width-props") : _el$.style.setProperty("--xy-minimap-mask-stroke-width-props", _v$7)), _v$8 !== _p$.h && setAttribute(_el$2, "id", _p$.h = _v$8), _v$9 !== _p$.r && setAttribute(_el$3, "d", _p$.r = _v$9), _p$;
-					}, {
-						e: void 0,
-						t: void 0,
-						a: void 0,
-						o: void 0,
-						i: void 0,
-						n: void 0,
-						s: void 0,
-						h: void 0,
-						r: void 0
-					}), _el$;
-				})();
+								get y() {
+									return node().internals.positionAbsolute.y;
+								},
+								get borderRadius() {
+									return _props.nodeBorderRadius;
+								},
+								get strokeWidth() {
+									return _props.nodeStrokeWidth;
+								},
+								get shapeRendering() {
+									return shapeRendering();
+								},
+								get width() {
+									return nodeDimensions().width;
+								},
+								get height() {
+									return nodeDimensions().height;
+								},
+								get selected() {
+									return node().selected;
+								},
+								get color() {
+									return nodeColorFunc()?.call(null, node());
+								},
+								get strokeColor() {
+									return nodeStrokeColorFunc().call(null, node());
+								},
+								get class() {
+									return nodeClassFunc().call(null, node());
+								}
+							})
+						});
+					}
+				}), _el$2.nextSibling), effect(() => ({
+					e: _props.width,
+					t: _props.height,
+					a: `${getX()} ${getY()} ${getViewboxWidth()} ${getViewboxHeight()}`,
+					o: labelledBy(),
+					i: _props.maskColor,
+					n: _props.maskStrokeColor,
+					s: strokeWidth(),
+					h: labelledBy(),
+					r: `M${getX() - getOffset()},${getY() - getOffset()}h${getViewboxWidth() + getOffset() * 2}v${getViewboxHeight() + getOffset() * 2}h${-getViewboxWidth() - getOffset() * 2}z
+            M${getViewBB().x},${getViewBB().y}h${getViewBB().width}v${getViewBB().height}h${-getViewBB().width}z`
+				}), ({ e, t, a, o, i, n, s, h, r }, _p$) => {
+					e !== _p$?.e && setAttribute(_el$, "width", e), t !== _p$?.t && setAttribute(_el$, "height", t), a !== _p$?.a && setAttribute(_el$, "viewBox", a), o !== _p$?.o && setAttribute(_el$, "aria-labelledby", o), i !== _p$?.i && setStyleProperty(_el$, "--xy-minimap-mask-background-color-props", i), n !== _p$?.n && setStyleProperty(_el$, "--xy-minimap-mask-stroke-color-props", n), s !== _p$?.s && setStyleProperty(_el$, "--xy-minimap-mask-stroke-width-props", s), h !== _p$?.h && setAttribute(_el$2, "id", h), r !== _p$?.r && setAttribute(_el$3, "d", r);
+				}), _el$;
 			}
 		});
 	} }));
 };
 //#endregion
 //#region src/components/graph/plugins/nodeResizer/ResizeControl.tsx
-var _tmpl$$5 = /*#__PURE__*/ template("<div>");
+var _tmpl$$5 = /* @__PURE__ */ template("<div>");
 const ResizeControl = (props) => {
-	let _props = mergeProps$1({
+	let _props = propDefaults(props, {
 		variant: "handle",
 		minWidth: 10,
 		minHeight: 10,
@@ -3123,28 +3020,11 @@ const ResizeControl = (props) => {
 		keepAspectRatio: !1,
 		autoScale: !0,
 		style: {}
-	}, props), [local, rest] = splitProps(_props, [
-		"nodeId",
-		"variant",
-		"position",
-		"minWidth",
-		"minHeight",
-		"maxWidth",
-		"maxHeight",
-		"keepAspectRatio",
-		"autoScale",
-		"onResizeStart",
-		"onResize",
-		"onResizeEnd",
-		"shouldResize",
-		"class",
-		"children",
-		"color",
-		"style"
-	]), resizeControlRef, { store, nodeLookup, actions } = useInternalSolidFlow(), ctxNodeId = useNodeId(), nodeId = () => local.nodeId ?? ctxNodeId(), isLineVariant = () => local.variant === "line", controlPosition = () => local.position ?? (isLineVariant() ? "right" : "bottom-right"), positionClassNames = () => controlPosition().split("-");
-	return onMount(() => {
-		let resizer = XYResizer({
-			domNode: resizeControlRef,
+	}), rest = omit(_props, "nodeId", "variant", "position", "minWidth", "minHeight", "maxWidth", "maxHeight", "keepAspectRatio", "autoScale", "onResizeStart", "onResize", "onResizeEnd", "shouldResize", "class", "children", "color", "style"), [resizeControlRef, setResizeControlRef] = createSignal(), { store, nodeLookup, actions } = useInternalSolidFlow(), ctxNodeId = useNodeId(), nodeId = () => _props.nodeId ?? ctxNodeId(), isLineVariant = () => _props.variant === "line", controlPosition = () => _props.position ?? (isLineVariant() ? "right" : "bottom-right"), positionClassNames = () => controlPosition().split("-"), [resizer, setResizer] = createSignal();
+	createEffect(() => resizeControlRef(), (el) => {
+		if (!el) return;
+		let instance = XYResizer({
+			domNode: el,
 			nodeId: nodeId(),
 			getStoreItems: () => ({
 				nodeLookup,
@@ -3164,65 +3044,64 @@ const ResizeControl = (props) => {
 					position
 				});
 				for (let childChange of childChanges) changes.set(childChange.id, { position: childChange.position });
-				actions.setNodes((node) => changes.has(node.id), produce((node) => {
-					let nodeChange = changes.get(node.id);
-					node.width = nodeChange.width, node.height = nodeChange.height, node.position = {
-						x: nodeChange.position?.x ?? node.position.x,
-						y: nodeChange.position?.y ?? node.position.y
-					};
-				}));
+				actions.setNodes((nodes) => {
+					for (let node of nodes) {
+						let nodeChange = changes.get(node.id);
+						nodeChange && (node.width = nodeChange.width, node.height = nodeChange.height, node.position = {
+							x: nodeChange.position?.x ?? node.position.x,
+							y: nodeChange.position?.y ?? node.position.y
+						});
+					}
+				});
 			}
 		});
-		createEffect(() => {
-			resizer.update({
-				controlPosition: controlPosition(),
-				boundaries: {
-					minWidth: local.minWidth,
-					minHeight: local.minHeight,
-					maxWidth: local.maxWidth,
-					maxHeight: local.maxHeight
-				},
-				keepAspectRatio: !!local.keepAspectRatio,
-				onResizeStart: local.onResizeStart,
-				onResize: local.onResize,
-				onResizeEnd: local.onResizeEnd,
-				shouldResize: local.shouldResize
-			});
-		}), onCleanup(() => {
-			resizer.destroy();
-		});
-	}), (() => {
-		var _el$ = _tmpl$$5(), _ref$ = resizeControlRef;
-		return typeof _ref$ == "function" ? use(_ref$, _el$) : resizeControlRef = _el$, spread(_el$, mergeProps({
-			get class() {
-				return clsx$1([
-					"solid-flow__resize-control",
-					local.variant,
-					store.noDragClass,
-					...positionClassNames(),
-					local.class
-				]);
+		return setResizer(instance), () => {
+			instance.destroy();
+		};
+	}), createEffect(() => ({
+		instance: resizer(),
+		options: {
+			controlPosition: controlPosition(),
+			boundaries: {
+				minWidth: _props.minWidth,
+				minHeight: _props.minHeight,
+				maxWidth: _props.maxWidth,
+				maxHeight: _props.maxHeight
 			},
-			get style() {
-				return {
-					"border-color": isLineVariant() ? local.color : void 0,
-					"background-color": isLineVariant() ? void 0 : local.color,
-					scale: isLineVariant() || !local.autoScale ? void 0 : Math.max(1 / store.viewport.zoom, 1),
-					...local.style
-				};
-			}
-		}, rest), !1, !0), insert(_el$, () => local.children), _el$;
-	})();
+			keepAspectRatio: !!_props.keepAspectRatio,
+			onResizeStart: _props.onResizeStart,
+			onResize: _props.onResize,
+			onResizeEnd: _props.onResizeEnd,
+			shouldResize: _props.shouldResize
+		}
+	}), ({ instance, options }) => {
+		instance?.update(options);
+	});
+	var _el$ = _tmpl$$5();
+	return ref(() => setResizeControlRef, _el$), spread(_el$, mergeProps({
+		get class() {
+			return [
+				"solid-flow__resize-control",
+				_props.variant,
+				store.noDragClass,
+				...positionClassNames(),
+				_props.class
+			];
+		},
+		get style() {
+			return {
+				"border-color": isLineVariant() ? _props.color : void 0,
+				"background-color": isLineVariant() ? void 0 : _props.color,
+				scale: isLineVariant() || !_props.autoScale ? void 0 : Math.max(1 / store.viewport.zoom, 1),
+				..._props.style
+			};
+		}
+	}, rest), !0), insert(_el$, () => _props.children), _el$;
 }, NodeResizer = (props) => {
-	let _props = mergeProps$1({
+	let _props = propDefaults(props, {
 		autoScale: !0,
 		visible: !0
-	}, props), [local, rest] = splitProps(props, [
-		"handleClass",
-		"handleStyle",
-		"lineClass",
-		"lineStyle"
-	]);
+	}), rest = omit(props, "handleClass", "handleStyle", "lineClass", "lineStyle");
 	return createComponent(Show, {
 		get when() {
 			return _props.visible;
@@ -3234,10 +3113,10 @@ const ResizeControl = (props) => {
 					variant: "line",
 					position,
 					get class() {
-						return local.lineClass;
+						return props.lineClass;
 					},
 					get style() {
-						return local.lineStyle;
+						return props.lineStyle;
 					}
 				}, rest))
 			}), createComponent(For, {
@@ -3245,10 +3124,10 @@ const ResizeControl = (props) => {
 				children: (position) => createComponent(ResizeControl, mergeProps({
 					position,
 					get class() {
-						return local.handleClass;
+						return props.handleClass;
 					},
 					get style() {
-						return local.handleStyle;
+						return props.handleStyle;
 					}
 				}, rest))
 			})];
@@ -3320,12 +3199,10 @@ function useHandleEdgeSelect() {
 	let { store, edgeLookup, actions } = useInternalSolidFlow();
 	return (id) => {
 		let edge = edgeLookup.get(id);
-		edge && (edge.selectable || store.elementsSelectable && edge.selectable === void 0) && batch(() => {
-			actions.setSelectionRect(void 0), actions.setSelectionRectMode(void 0), edge.selected ? edge.selected && store.multiselectionKeyPressed && actions.unselectNodesAndEdges({
-				nodes: [],
-				edges: [edge]
-			}) : actions.addSelectedEdges([id]);
-		});
+		edge && (edge.selectable || store.elementsSelectable && edge.selectable === void 0) && (actions.setSelectionRect(void 0), actions.setSelectionRectMode(void 0), edge.selected ? edge.selected && store.multiselectionKeyPressed && actions.unselectNodesAndEdges({
+			nodes: [],
+			edges: [edge]
+		}) : actions.addSelectedEdges([id]));
 	};
 }
 //#endregion
@@ -3385,10 +3262,9 @@ const useNodeConnections = (params) => {
 	let { connectionLookup } = useInternalSolidFlow(), ctxNodeId = () => {
 		let id = useContext(NodeIdContext);
 		return id ? id() : "";
-	}, id = () => params().handleId, type = () => params().handleType, nodeId = () => params().id ?? ctxNodeId(), [connections, setConnections] = createSignal([]), lookupKey = () => `${nodeId()}${type() ? id() ? `-${type()}-${id()}` : `-${type()}` : ""}`;
-	return createEffect((prevConnections) => {
-		let nextConnections = connectionLookup.get(lookupKey());
-		return areConnectionMapsEqual(nextConnections, prevConnections) || (prevConnections = nextConnections, setConnections(Array.from(prevConnections?.values() ?? []))), nextConnections;
+	}, id = () => params().handleId, type = () => params().handleType, nodeId = () => params().id ?? ctxNodeId(), [connections, setConnections] = createSignal([]), lookupKey = () => `${nodeId()}${type() ? id() ? `-${type()}-${id()}` : `-${type()}` : ""}`, prevConnections;
+	return createEffect(() => ({ connections: connectionLookup.get(lookupKey()) }), ({ connections: nextConnections }) => {
+		areConnectionMapsEqual(nextConnections, prevConnections) || (prevConnections = nextConnections, setConnections(Array.from(nextConnections?.values() ?? [])));
 	}), connections;
 };
 //#endregion
@@ -3428,17 +3304,21 @@ function useSolidFlow() {
 		};
 		return nodeToRect(nodeWithPosition);
 	}, updateNode = (id, nodeUpdate, options = { replace: !1 }) => {
-		actions.setNodes((node) => node.id === id, (node) => {
-			let nextNode = typeof nodeUpdate == "function" ? nodeUpdate(node) : nodeUpdate;
-			return options?.replace && isNode(nextNode) ? nextNode : {
+		actions.setNodes((nodes) => {
+			let index = nodes.findIndex((node) => node.id === id);
+			if (index === -1) return;
+			let node = nodes[index], nextNode = typeof nodeUpdate == "function" ? nodeUpdate(node) : nodeUpdate;
+			nodes[index] = options?.replace && isNode(nextNode) ? nextNode : {
 				...node,
 				...nextNode
 			};
 		});
 	}, updateEdge = (id, edgeUpdate, options = { replace: !1 }) => {
-		actions.setEdges((edge) => edge.id === id, (edge) => {
-			let nextEdge = typeof edgeUpdate == "function" ? edgeUpdate(edge) : edgeUpdate;
-			return options.replace && isEdge(nextEdge) ? nextEdge : {
+		actions.setEdges((edges) => {
+			let index = edges.findIndex((edge) => edge.id === id);
+			if (index === -1) return;
+			let edge = edges[index], nextEdge = typeof edgeUpdate == "function" ? edgeUpdate(edge) : edgeUpdate;
+			edges[index] = options.replace && isEdge(nextEdge) ? nextEdge : {
 				...edge,
 				...nextEdge
 			};
@@ -3462,7 +3342,7 @@ function useSolidFlow() {
 			let newEdges = Array.isArray(payload) ? payload : [payload];
 			actions.setEdges((edges) => [...edges, ...newEdges]);
 		},
-		getViewport: () => unwrap(store.viewport),
+		getViewport: () => snapshot(store.viewport),
 		setViewport: async (nextViewport, options) => {
 			let currentViewport = store.viewport;
 			return store.panZoom ? (await store.panZoom.setViewport({
@@ -3508,16 +3388,15 @@ function useSolidFlow() {
 				edges: store.edges,
 				onBeforeDelete: store.onBeforeDelete
 			});
-			return batch(() => {
-				if (matchingEdges) {
-					let remmainingEdges = store.edges.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id));
-					store.onEdgesDelete?.(matchingEdges), actions.setEdges(remmainingEdges);
-				}
-				if (matchingNodes) {
-					let remmainingNodes = store.nodes.filter((node) => !matchingNodes.some(({ id }) => id === node.id));
-					store.onNodesDelete?.(matchingNodes), actions.setNodes(remmainingNodes);
-				}
-			}), {
+			if (matchingEdges) {
+				let remmainingEdges = store.edges.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id));
+				store.onEdgesDelete?.(matchingEdges), actions.setEdges(() => remmainingEdges);
+			}
+			if (matchingNodes) {
+				let remmainingNodes = store.nodes.filter((node) => !matchingNodes.some(({ id }) => id === node.id));
+				store.onNodesDelete?.(matchingNodes), actions.setNodes(() => remmainingNodes);
+			}
+			return {
 				deletedNodes: matchingNodes,
 				deletedEdges: matchingEdges
 			};
@@ -3552,9 +3431,9 @@ function useSolidFlow() {
 			};
 		},
 		toObject: () => structuredClone({
-			nodes: [...unwrap(store.nodes)],
-			edges: [...unwrap(store.edges)],
-			viewport: { ...unwrap(store.viewport) }
+			nodes: [...snapshot(store.nodes)],
+			edges: [...snapshot(store.edges)],
+			viewport: { ...snapshot(store.viewport) }
 		}),
 		updateNode,
 		updateNodeData: (id, dataUpdate, options) => {
@@ -3613,36 +3492,28 @@ function useUpdateNodeInternals() {
 }
 //#endregion
 //#region src/components/graph/plugins/NodeToolbar.tsx
-var _tmpl$$4 = /*#__PURE__*/ template("<div class=solid-flow__node-toolbar>");
+var _tmpl$$4 = /* @__PURE__ */ template("<div>");
 const NodeToolbar = (props) => {
-	let { store } = useInternalSolidFlow(), { getNodes, getNodesBounds, getInternalNode } = useSolidFlow(), _props = mergeProps$1({
+	let { store } = useInternalSolidFlow(), { getNodes, getNodesBounds, getInternalNode } = useSolidFlow(), _props = propDefaults(props, {
 		offset: 10,
 		position: "top",
 		align: "center",
 		style: {}
-	}, props), [local, divProps] = splitProps(_props, [
-		"nodeId",
-		"position",
-		"align",
-		"offset",
-		"isVisible",
-		"style",
-		"children"
-	]), ctxNodeId = () => {
+	}), divProps = omit(_props, "nodeId", "position", "align", "offset", "isVisible", "style", "children"), ctxNodeId = () => {
 		let id = useContext(NodeIdContext);
 		return id ? id() : "";
-	}, toolbarNodes = () => (Array.isArray(local.nodeId) ? local.nodeId : [local.nodeId ?? ctxNodeId()]).reduce((res, nodeId) => {
+	}, toolbarNodes = () => (Array.isArray(_props.nodeId) ? _props.nodeId : [_props.nodeId ?? ctxNodeId()]).reduce((res, nodeId) => {
 		let node = getInternalNode(nodeId);
 		return node && res.push(node), res;
 	}, []), transform = () => {
 		let nodeRect = getNodesBounds(toolbarNodes());
-		return nodeRect ? getNodeToolbarTransform(nodeRect, store.viewport, local.position, local.offset, local.align) : "";
+		return nodeRect ? getNodeToolbarTransform(nodeRect, store.viewport, _props.position, _props.offset, _props.align) : "";
 	}, zIndex = () => {
 		let nodes = toolbarNodes();
 		return nodes.length === 0 ? 1 : Math.max(...nodes.map((node) => (node.internals.z || 5) + 1));
 	}, selectedNodesCount = () => getNodes().filter((node) => node.selected).length, isActive = () => {
 		let nodes = toolbarNodes();
-		return typeof local.isVisible == "boolean" ? local.isVisible : nodes.length === 1 && !!nodes[0].selected && selectedNodesCount() === 1;
+		return typeof _props.isVisible == "boolean" ? _props.isVisible : nodes.length === 1 && !!nodes[0].selected && selectedNodesCount() === 1;
 	}, showPortal = () => !!(store.domNode && isActive() && toolbarNodes().length > 0);
 	return createComponent(Show, {
 		get when() {
@@ -3656,6 +3527,7 @@ const NodeToolbar = (props) => {
 				get children() {
 					var _el$ = _tmpl$$4();
 					return spread(_el$, mergeProps({
+						class: "solid-flow__node-toolbar",
 						get "data-id"() {
 							return toolbarNodes().reduce((acc, node) => `${acc}${node.id} `, "").trim();
 						},
@@ -3664,10 +3536,10 @@ const NodeToolbar = (props) => {
 								position: "absolute",
 								transform: transform(),
 								"z-index": zIndex(),
-								...local.style
+								..._props.style
 							};
 						}
-					}, divProps), !1, !0), insert(_el$, () => local.children), _el$;
+					}, divProps), !0), insert(_el$, () => _props.children), _el$;
 				}
 			});
 		}
@@ -3675,9 +3547,9 @@ const NodeToolbar = (props) => {
 };
 //#endregion
 //#region src/components/graph/selection/Selection.tsx
-var _tmpl$$3 = /*#__PURE__*/ template("<div class=solid-flow__selection>");
+var _tmpl$$3 = /* @__PURE__ */ template("<div class=solid-flow__selection>");
 const Selection = (props) => {
-	let _props = mergeProps$1({ isVisible: !0 }, props), styles = () => ({
+	let _props = propDefaults(props, { isVisible: !0 }), styles = () => ({
 		..._props.width != null && { width: typeof _props.width == "string" ? _props.width : toPxString(_props.width) },
 		..._props.height != null && { height: typeof _props.height == "string" ? _props.height : toPxString(_props.height) },
 		..._props.x != null && _props.y != null && { transform: `translate(${props.x}px, ${props.y}px)` }
@@ -3688,17 +3560,22 @@ const Selection = (props) => {
 		},
 		get children() {
 			var _el$ = _tmpl$$3();
-			return effect((_$p) => style(_el$, styles(), _$p)), _el$;
+			return effect(() => styles(), (_v$, _$p) => {
+				style(_el$, _v$, _$p);
+			}), _el$;
 		}
 	});
 };
 //#endregion
 //#region src/components/graph/selection/NodeSelection.tsx
-var _tmpl$$2 = /*#__PURE__*/ template("<div>");
+var _tmpl$$2 = /* @__PURE__ */ template("<div>");
 const NodeSelection = (props) => {
-	let { store, nodeLookup, actions } = useInternalSolidFlow(), [ref, setRef] = createSignal(), bounds = () => store.selectionRectMode === "nodes" ? getInternalNodesBounds(nodeLookup, { filter: (node) => !!node.selected }) : null;
-	createEffect(() => {
-		store.disableKeyboardA11y || ref()?.focus({ preventScroll: !0 });
+	let { store, nodeLookup, actions } = useInternalSolidFlow(), [ref$1, setRef] = createSignal(), bounds = () => store.selectionRectMode === "nodes" ? getInternalNodesBounds(nodeLookup, { filter: (node) => !!node.selected }) : null;
+	createEffect(() => ({
+		el: ref$1(),
+		focusable: !store.disableKeyboardA11y
+	}), ({ el, focusable }) => {
+		focusable && el?.focus({ preventScroll: !0 });
 	});
 	let onContextMenu = (event) => {
 		let selectedNodes = store.nodes.filter((n) => n.selected);
@@ -3713,7 +3590,7 @@ const NodeSelection = (props) => {
 			event
 		});
 	};
-	createDraggable(ref, () => ({
+	createDraggable(ref$1, () => ({
 		disabled: !1,
 		onDrag: (event, _, __, nodes) => {
 			props.onNodeDrag?.({
@@ -3743,25 +3620,24 @@ const NodeSelection = (props) => {
 	};
 	return createComponent(Show, {
 		get when() {
-			return memo(() => !!(store.selectionRectMode === "nodes" && bounds() && isNumeric(bounds()?.x)))() && isNumeric(bounds()?.y);
+			return memo(() => !!(store.selectionRectMode === "nodes" && bounds() && isNumeric(bounds()?.x)))() ? isNumeric(bounds()?.y) : store.selectionRectMode === "nodes" && bounds() && isNumeric(bounds()?.x);
 		},
 		get children() {
 			var _el$ = _tmpl$$2();
-			return addEventListener(_el$, "keydown", store.disableKeyboardA11y ? void 0 : onKeyDown, !0), _el$.$$contextmenu = onContextMenu, _el$.$$click = onClick, use(setRef, _el$), insert(_el$, createComponent(Selection, {
+			return addEvent(_el$, "keydown", store.disableKeyboardA11y ? void 0 : onKeyDown, !0), _el$.$$contextmenu = onContextMenu, _el$.$$click = onClick, ref(() => setRef, _el$), insert(_el$, createComponent(Selection, {
 				width: "100%",
 				height: "100%",
 				x: 0,
 				y: 0
-			})), effect((_p$) => {
-				var _v$ = clsx$1("solid-flow__selection-wrapper", store.noPanClass), _v$2 = toPxString(bounds()?.width), _v$3 = toPxString(bounds()?.height), _v$4 = `translate(${bounds()?.x}px, ${bounds()?.y}px)`, _v$5 = store.disableKeyboardA11y ? void 0 : "button", _v$6 = store.disableKeyboardA11y ? void 0 : -1;
-				return _v$ !== _p$.e && className(_el$, _p$.e = _v$), _v$2 !== _p$.t && ((_p$.t = _v$2) == null ? _el$.style.removeProperty("width") : _el$.style.setProperty("width", _v$2)), _v$3 !== _p$.a && ((_p$.a = _v$3) == null ? _el$.style.removeProperty("height") : _el$.style.setProperty("height", _v$3)), _v$4 !== _p$.o && ((_p$.o = _v$4) == null ? _el$.style.removeProperty("transform") : _el$.style.setProperty("transform", _v$4)), _v$5 !== _p$.i && setAttribute(_el$, "role", _p$.i = _v$5), _v$6 !== _p$.n && setAttribute(_el$, "tabindex", _p$.n = _v$6), _p$;
-			}, {
-				e: void 0,
-				t: void 0,
-				a: void 0,
-				o: void 0,
-				i: void 0,
-				n: void 0
+			})), effect(() => ({
+				e: ["solid-flow__selection-wrapper", store.noPanClass],
+				t: toPxString(bounds()?.width),
+				a: toPxString(bounds()?.height),
+				o: `translate(${bounds()?.x}px, ${bounds()?.y}px)`,
+				i: store.disableKeyboardA11y ? void 0 : "button",
+				n: store.disableKeyboardA11y ? void 0 : -1
+			}), ({ e, t, a, o, i, n }, _p$) => {
+				className(_el$, e, _p$?.e), t !== _p$?.t && setStyleProperty(_el$, "width", t), a !== _p$?.a && setStyleProperty(_el$, "height", a), o !== _p$?.o && setStyleProperty(_el$, "transform", o), i !== _p$?.i && setAttribute(_el$, "role", i), n !== _p$?.n && setAttribute(_el$, "tabindex", n);
 			}), _el$;
 		}
 	});
@@ -3773,7 +3649,7 @@ delegateEvents([
 ]);
 //#endregion
 //#region src/components/utility/Attribution.tsx
-var _tmpl$$1 = /*#__PURE__*/ template("<a href=https://solidflow.dev target=_blank rel=\"noopener noreferrer\"aria-label=\"Solid Flow attribution\">Solid Flow");
+var _tmpl$$1 = /* @__PURE__ */ template("<a href=https://solidflow.dev target=_blank rel=\"noopener noreferrer\"aria-label=\"Solid Flow attribution\">Solid Flow");
 const Attribution = (props) => createComponent(Show, {
 	get when() {
 		return !props.proOptions?.hideAttribution;
@@ -3786,7 +3662,8 @@ const Attribution = (props) => createComponent(Show, {
 			class: "solid-flow__attribution",
 			"data-message": "Feel free to remove the attribution or check out how you could support us: https://solidflow.dev/support-us",
 			get children() {
-				return _tmpl$$1();
+				var _el$ = _tmpl$$1();
+				return claimElement(_el$), _el$;
 			}
 		});
 	}
@@ -3825,16 +3702,24 @@ function matchesKeyArray(event, keyDefs) {
 	return keyDefs ? (Array.isArray(keyDefs) ? keyDefs : [keyDefs]).some((keyDef) => matchesKey(event, keyDef)) : !1;
 }
 const KeyHandler = (props) => {
-	let { store, actions } = useInternalSolidFlow(), { deleteElements } = useSolidFlow(), _props = mergeProps$1({
-		selectionKey: "Shift",
-		multiSelectionKey: isMacOs() ? "Meta" : "Control",
-		deleteKey: "Backspace",
-		panActivationKey: " ",
-		zoomActivationKey: isMacOs() ? "Meta" : "Control"
-	}, props), resetKeysAndSelection = () => {
-		batch(() => {
-			actions.setSelectionRect(void 0), actions.setSelectionKeyPressed(!1), actions.setMultiselectionKeyPressed(!1), actions.setDeleteKeyPressed(!1), actions.setPanActivationKeyPressed(!1), actions.setZoomActivationKeyPressed(!1);
-		});
+	let { store, actions } = useInternalSolidFlow(), { deleteElements } = useSolidFlow(), _props = {
+		get selectionKey() {
+			return props.selectionKey ?? "Shift";
+		},
+		get multiSelectionKey() {
+			return props.multiSelectionKey ?? (isMacOs() ? "Meta" : "Control");
+		},
+		get deleteKey() {
+			return props.deleteKey ?? "Backspace";
+		},
+		get panActivationKey() {
+			return props.panActivationKey ?? " ";
+		},
+		get zoomActivationKey() {
+			return props.zoomActivationKey ?? (isMacOs() ? "Meta" : "Control");
+		}
+	}, resetKeysAndSelection = () => {
+		actions.setSelectionRect(void 0), actions.setSelectionKeyPressed(!1), actions.setMultiselectionKeyPressed(!1), actions.setDeleteKeyPressed(!1), actions.setPanActivationKeyPressed(!1), actions.setZoomActivationKeyPressed(!1);
 	}, handleDelete = async () => {
 		let selectedNodes = store.nodes.filter((node) => node.selected), selectedEdges = store.edges.filter((edge) => edge.selected), { deletedNodes, deletedEdges } = await deleteElements({
 			nodes: selectedNodes,
@@ -3844,26 +3729,23 @@ const KeyHandler = (props) => {
 			nodes: deletedNodes,
 			edges: deletedEdges
 		});
-	}, handleKeyDown = (event) => {
-		batch(() => {
-			matchesKeyArray(event, _props.selectionKey) && actions.setSelectionKeyPressed(!0), matchesKeyArray(event, _props.multiSelectionKey) && actions.setMultiselectionKeyPressed(!0), matchesKeyArray(event, _props.deleteKey) && !isInputDOMNode(event) && (event.ctrlKey || event.metaKey || event.shiftKey || (actions.setDeleteKeyPressed(!0), handleDelete())), matchesKeyArray(event, _props.panActivationKey) && actions.setPanActivationKeyPressed(!0), matchesKeyArray(event, _props.zoomActivationKey) && actions.setZoomActivationKeyPressed(!0);
-		});
-	}, handleKeyUp = (event) => {
-		batch(() => {
-			matchesKeyArray(event, _props.selectionKey) && actions.setSelectionKeyPressed(!1), matchesKeyArray(event, _props.multiSelectionKey) && actions.setMultiselectionKeyPressed(!1), matchesKeyArray(event, _props.deleteKey) && actions.setDeleteKeyPressed(!1), matchesKeyArray(event, _props.panActivationKey) && actions.setPanActivationKeyPressed(!1), matchesKeyArray(event, _props.zoomActivationKey) && actions.setZoomActivationKeyPressed(!1);
-		});
 	};
-	return onMount(() => {
-		window.addEventListener("keydown", handleKeyDown), window.addEventListener("keyup", handleKeyUp), window.addEventListener("blur", resetKeysAndSelection), window.addEventListener("contextmenu", resetKeysAndSelection), onCleanup(() => {
-			window.removeEventListener("keydown", handleKeyDown), window.removeEventListener("keyup", handleKeyUp), window.removeEventListener("blur", resetKeysAndSelection), window.removeEventListener("contextmenu", resetKeysAndSelection);
-		});
+	return isServer || createEventListenerMap(window, {
+		keydown: (event) => {
+			matchesKeyArray(event, _props.selectionKey) && actions.setSelectionKeyPressed(!0), matchesKeyArray(event, _props.multiSelectionKey) && actions.setMultiselectionKeyPressed(!0), matchesKeyArray(event, _props.deleteKey) && !isInputDOMNode(event) && (event.ctrlKey || event.metaKey || event.shiftKey || (actions.setDeleteKeyPressed(!0), handleDelete())), matchesKeyArray(event, _props.panActivationKey) && actions.setPanActivationKeyPressed(!0), matchesKeyArray(event, _props.zoomActivationKey) && actions.setZoomActivationKeyPressed(!0), flush();
+		},
+		keyup: (event) => {
+			matchesKeyArray(event, _props.selectionKey) && actions.setSelectionKeyPressed(!1), matchesKeyArray(event, _props.multiSelectionKey) && actions.setMultiselectionKeyPressed(!1), matchesKeyArray(event, _props.deleteKey) && actions.setDeleteKeyPressed(!1), matchesKeyArray(event, _props.panActivationKey) && actions.setPanActivationKeyPressed(!1), matchesKeyArray(event, _props.zoomActivationKey) && actions.setZoomActivationKeyPressed(!1), flush();
+		},
+		blur: resetKeysAndSelection,
+		contextmenu: resetKeysAndSelection
 	}), null;
 };
 //#endregion
 //#region src/components/SolidFlow/component.tsx
-var _tmpl$ = /*#__PURE__*/ template("<div class=\"solid-flow__container solid-flow__viewport-back\">"), _tmpl$2 = /*#__PURE__*/ template("<div class=\"solid-flow__container solid-flow__edge-labels\">"), _tmpl$3 = /*#__PURE__*/ template("<div role=application data-testid=solid-flow__wrapper>");
+var _tmpl$ = /* @__PURE__ */ template("<div class=\"solid-flow__container solid-flow__viewport-back\">"), _tmpl$2 = /* @__PURE__ */ template("<div class=\"solid-flow__container solid-flow__edge-labels\">"), _tmpl$3 = /* @__PURE__ */ template("<div>");
 const SolidFlow = (props) => {
-	let domNode, _props = mergeProps$1({
+	let [domNodeRef, setDomNodeRef] = createSignal(), domNode, _props = merge({
 		...getDefaultFlowStateProps(),
 		colorMode: "light",
 		deleteKeyCode: "Backspace",
@@ -3889,274 +3771,275 @@ const SolidFlow = (props) => {
 		zoomOnPinch: !0,
 		zoomOnDoubleClick: !0,
 		zoomOnScroll: !0
-	}, props), [flowProps, htmlProps] = splitProps(_props, /* @__PURE__ */ "nodes.edges.nodeTypes.edgeTypes.width.height.fitView.fitViewOptions.nodeOrigin.nodeDragThreshold.paneClickDistance.nodeClickDistance.minZoom.maxZoom.zIndexMode.initialViewport.viewport.translateExtent.nodeExtent.selectionKey.panActivationKey.deleteKey.multiSelectionKey.zoomActivationKey.panOnDrag.panOnScroll.panOnScrollMode.panOnScrollSpeed.selectionOnDrag.selectNodesOnDrag.preventScrolling.zoomOnScroll.zoomOnDoubleClick.zoomOnPinch.onlyRenderVisibleElements.autoPanOnConnect.autoPanOnNodeDrag.autoPanOnNodeFocus.autoPanOnSelection.autoPanSpeed.connectionRadius.connectionMode.connectionLineType.connectionLineComponent.connectionLineStyle.connectionLineContainerStyle.connectionDragThreshold.isValidConnection.clickConnect.reconnectRadius.selectionMode.elementsSelectable.nodesDraggable.nodesConnectable.nodesFocusable.edgesFocusable.disableKeyboardA11y.ariaLabelConfig.ariaLiveMessage.colorMode.colorModeSSR.class.style.snapGrid.defaultMarkerColor.defaultEdgeOptions.elevateNodesOnSelect.elevateEdgesOnSelect.noDragClass.noPanClass.noWheelClass.attributionPosition.proOptions.onInit.onMoveStart.onMove.onMoveEnd.onFlowError.onNodeClick.onNodeContextMenu.onNodeDrag.onNodeDragStart.onNodeDragStop.onNodePointerEnter.onNodePointerMove.onNodePointerLeave.onEdgeClick.onEdgeContextMenu.onEdgePointerEnter.onEdgePointerLeave.onPaneClick.onPaneContextMenu.onSelectionChange.onSelectionClick.onSelectionContextMenu.onSelectionDrag.onSelectionDragStart.onSelectionDragStop.onSelectionStart.onSelectionEnd.onConnect.onConnectStart.onConnectEnd.onReconnect.onReconnectStart.onReconnectEnd.onClickConnectStart.onClickConnectEnd.onBeforeConnect.onBeforeReconnect.onDelete.onBeforeDelete.deleteKeyCode.selectionKeyCode.panActivationKeyCode.multiSelectionKeyCode.zoomActivationKeyCode.children".split(".")), TypedSolidFlowContext = SolidFlowContext, solidFlow = useContext(TypedSolidFlowContext) ?? createSolidFlow(_props), { store, actions } = solidFlow;
-	onMount(() => {
-		actions.applyInitialFitView(flowProps.fitView), batch(() => {
-			actions.setConfig(_props), actions.setDomNode(domNode);
-		}), createResizeObserver(domNode, () => {
-			actions.setWidth(domNode.clientWidth), actions.setHeight(domNode.clientHeight);
-		}), createEffect(() => {
-			actions.setPaneClickDistance(flowProps.paneClickDistance);
-		}), onCleanup(() => {
-			actions.reset();
+	}, props), htmlProps = omit(_props, "nodes", "edges", "nodeTypes", "edgeTypes", "width", "height", "fitView", "fitViewOptions", "nodeOrigin", "nodeDragThreshold", "paneClickDistance", "nodeClickDistance", "minZoom", "maxZoom", "zIndexMode", "initialViewport", "viewport", "translateExtent", "nodeExtent", "selectionKey", "panActivationKey", "deleteKey", "multiSelectionKey", "zoomActivationKey", "panOnDrag", "panOnScroll", "panOnScrollMode", "panOnScrollSpeed", "selectionOnDrag", "selectNodesOnDrag", "preventScrolling", "zoomOnScroll", "zoomOnDoubleClick", "zoomOnPinch", "onlyRenderVisibleElements", "autoPanOnConnect", "autoPanOnNodeDrag", "autoPanOnNodeFocus", "autoPanOnSelection", "autoPanSpeed", "connectionRadius", "connectionMode", "connectionLineType", "connectionLineComponent", "connectionLineStyle", "connectionLineContainerStyle", "connectionDragThreshold", "isValidConnection", "clickConnect", "reconnectRadius", "selectionMode", "elementsSelectable", "nodesDraggable", "nodesConnectable", "nodesFocusable", "edgesFocusable", "disableKeyboardA11y", "ariaLabelConfig", "ariaLiveMessage", "colorMode", "colorModeSSR", "class", "style", "snapGrid", "defaultMarkerColor", "defaultEdgeOptions", "elevateNodesOnSelect", "elevateEdgesOnSelect", "noDragClass", "noPanClass", "noWheelClass", "attributionPosition", "proOptions", "onInit", "onMoveStart", "onMove", "onMoveEnd", "onFlowError", "onNodeClick", "onNodeContextMenu", "onNodeDrag", "onNodeDragStart", "onNodeDragStop", "onNodePointerEnter", "onNodePointerMove", "onNodePointerLeave", "onEdgeClick", "onEdgeContextMenu", "onEdgePointerEnter", "onEdgePointerLeave", "onPaneClick", "onPaneContextMenu", "onSelectionChange", "onSelectionClick", "onSelectionContextMenu", "onSelectionDrag", "onSelectionDragStart", "onSelectionDragStop", "onSelectionStart", "onSelectionEnd", "onConnect", "onConnectStart", "onConnectEnd", "onReconnect", "onReconnectStart", "onReconnectEnd", "onClickConnectStart", "onClickConnectEnd", "onBeforeConnect", "onBeforeReconnect", "onDelete", "onBeforeDelete", "deleteKeyCode", "selectionKeyCode", "panActivationKeyCode", "multiSelectionKeyCode", "zoomActivationKeyCode", "children"), TypedSolidFlowContext = SolidFlowContext, solidFlow = useContext(TypedSolidFlowContext) ?? createSolidFlow(_props), { store, actions } = solidFlow;
+	onSettled(() => (actions.applyInitialFitView(_props.fitView), actions.setConfig(_props), actions.setDomNode(domNode), () => {
+		actions.reset();
+	})), createEffect(() => domNodeRef(), (el) => {
+		if (!el) return;
+		let observer = new ResizeObserver(() => {
+			actions.setWidth(el.clientWidth), actions.setHeight(el.clientHeight);
 		});
+		return observer.observe(el), () => observer.disconnect();
+	}), createEffect(() => ({
+		panZoom: store.panZoom,
+		distance: _props.paneClickDistance
+	}), ({ panZoom, distance }) => {
+		panZoom?.setClickDistance(distance);
 	});
 	let selectedElements = createMemo(() => ({
 		nodes: store.selectedNodes,
 		edges: store.selectedEdges
-	}), void 0, { equals: (a, b) => a.nodes.length === b.nodes.length && a.edges.length === b.edges.length && a.nodes.every((node, i) => node.id === b.nodes[i].id) && a.edges.every((edge, i) => edge.id === b.edges[i].id) });
-	createEffect(() => {
-		let params = selectedElements();
-		untrack(() => flowProps.onSelectionChange)?.(params);
+	}), { equals: (a, b) => a.nodes.length === b.nodes.length && a.edges.length === b.edges.length && a.nodes.every((node, i) => node.id === b.nodes[i].id) && a.edges.every((edge, i) => edge.id === b.edges[i].id) });
+	createEffect(() => selectedElements(), (params) => {
+		untrack(() => _props.onSelectionChange)?.(params);
 	});
 	let rootStyle = () => ({
-		width: toPxString(flowProps.width),
-		height: toPxString(flowProps.height),
-		...flowProps.style
+		width: toPxString(_props.width),
+		height: toPxString(_props.height),
+		..._props.style
 	});
-	return (() => {
-		var _el$ = _tmpl$3();
-		_el$.addEventListener("scroll", (e) => {
+	var _el$ = _tmpl$3();
+	return ref(() => (el) => {
+		domNode = el, setDomNodeRef(el);
+	}, _el$), spread(_el$, mergeProps({
+		role: "application",
+		"data-testid": "solid-flow__wrapper",
+		get class() {
+			return [
+				"solid-flow",
+				"solid-flow__container",
+				_props.class,
+				store.colorMode
+			];
+		},
+		get style() {
+			return rootStyle();
+		},
+		onScroll: (e) => {
 			e.currentTarget.scrollTo({
 				top: 0,
 				left: 0,
 				behavior: "auto"
 			});
-		});
-		var _ref$ = domNode;
-		return typeof _ref$ == "function" ? use(_ref$, _el$) : domNode = _el$, spread(_el$, mergeProps({
-			get class() {
-				return clsx$1([
-					"solid-flow",
-					"solid-flow__container",
-					flowProps.class,
-					store.colorMode
-				]);
-			},
-			get style() {
-				return rootStyle();
-			}
-		}, htmlProps), !1, !0), insert(_el$, createComponent(TypedSolidFlowContext.Provider, {
-			value: solidFlow,
-			get children() {
-				return [
-					createComponent(KeyHandler, {
-						get selectionKey() {
-							return flowProps.selectionKey;
-						},
-						get deleteKey() {
-							return flowProps.deleteKey;
-						},
-						get panActivationKey() {
-							return flowProps.panActivationKey;
-						},
-						get multiSelectionKey() {
-							return flowProps.multiSelectionKey;
-						},
-						get zoomActivationKey() {
-							return flowProps.zoomActivationKey;
-						}
-					}),
-					createComponent(Zoom, {
-						get panOnScrollMode() {
-							return flowProps.panOnScrollMode;
-						},
-						get preventScrolling() {
-							return flowProps.preventScrolling;
-						},
-						get zoomOnScroll() {
-							return flowProps.zoomOnScroll;
-						},
-						get zoomOnDoubleClick() {
-							return flowProps.zoomOnDoubleClick;
-						},
-						get zoomOnPinch() {
-							return flowProps.zoomOnPinch;
-						},
-						get panOnScroll() {
-							return flowProps.panOnScroll;
-						},
-						get panOnScrollSpeed() {
-							return flowProps.panOnScrollSpeed;
-						},
-						get panOnDrag() {
-							return flowProps.panOnDrag;
-						},
-						get paneClickDistance() {
-							return flowProps.paneClickDistance;
-						},
-						get selectionOnDrag() {
-							return flowProps.selectionOnDrag;
-						},
-						get onMoveStart() {
-							return flowProps.onMoveStart;
-						},
-						get onMove() {
-							return flowProps.onMove;
-						},
-						get onMoveEnd() {
-							return flowProps.onMoveEnd;
-						},
-						get onViewportInitialized() {
-							return flowProps.onInit;
-						},
-						get initialViewport() {
-							return flowProps.viewport || flowProps.initialViewport;
-						},
-						get children() {
-							return createComponent(Pane, {
-								get onPaneClick() {
-									return flowProps.onPaneClick;
-								},
-								get onPaneContextMenu() {
-									return flowProps.onPaneContextMenu;
-								},
-								get onSelectionStart() {
-									return flowProps.onSelectionStart;
-								},
-								get onSelectionEnd() {
-									return flowProps.onSelectionEnd;
-								},
-								get panOnDrag() {
-									return flowProps.panOnDrag;
-								},
-								get selectionOnDrag() {
-									return flowProps.selectionOnDrag;
-								},
-								get paneClickDistance() {
-									return flowProps.paneClickDistance;
-								},
-								get autoPanOnSelection() {
-									return flowProps.autoPanOnSelection;
-								},
-								get children() {
-									return [createComponent(Viewport, { get children() {
-										return [
-											_tmpl$(),
-											createComponent(EdgeRenderer, {
-												get reconnectRadius() {
-													return flowProps.reconnectRadius;
-												},
-												get onEdgeClick() {
-													return flowProps.onEdgeClick;
-												},
-												get onEdgeContextMenu() {
-													return flowProps.onEdgeContextMenu;
-												},
-												get onEdgePointerEnter() {
-													return flowProps.onEdgePointerEnter;
-												},
-												get onEdgePointerLeave() {
-													return flowProps.onEdgePointerLeave;
-												},
-												get defaultEdgeOptions() {
-													return flowProps.defaultEdgeOptions;
-												}
-											}),
-											_tmpl$2(),
-											createComponent(ConnectionLine, {
-												get type() {
-													return flowProps.connectionLineType;
-												},
-												get component() {
-													return flowProps.connectionLineComponent;
-												},
-												get containerStyle() {
-													return flowProps.connectionLineContainerStyle;
-												},
-												get style() {
-													return flowProps.connectionLineStyle;
-												}
-											}),
-											createComponent(NodeRenderer, {
-												get nodeClickDistance() {
-													return flowProps.nodeClickDistance;
-												},
-												get onNodeClick() {
-													return flowProps.onNodeClick;
-												},
-												get onNodeContextMenu() {
-													return flowProps.onNodeContextMenu;
-												},
-												get onNodePointerEnter() {
-													return flowProps.onNodePointerEnter;
-												},
-												get onNodePointerMove() {
-													return flowProps.onNodePointerMove;
-												},
-												get onNodePointerLeave() {
-													return flowProps.onNodePointerLeave;
-												},
-												get onNodeDrag() {
-													return flowProps.onNodeDrag;
-												},
-												get onNodeDragStart() {
-													return flowProps.onNodeDragStart;
-												},
-												get onNodeDragStop() {
-													return flowProps.onNodeDragStop;
-												}
-											}),
-											createComponent(NodeSelection, {
-												get onSelectionClick() {
-													return flowProps.onSelectionClick;
-												},
-												get onSelectionContextMenu() {
-													return flowProps.onSelectionContextMenu;
-												},
-												get onNodeDrag() {
-													return flowProps.onNodeDrag;
-												},
-												get onNodeDragStart() {
-													return flowProps.onNodeDragStart;
-												},
-												get onNodeDragStop() {
-													return flowProps.onNodeDragStop;
-												}
-											})
-										];
-									} }), createComponent(Selection, {
-										get isVisible() {
-											return !!store.selectionRect && store.selectionRectMode === "user";
-										},
-										get width() {
-											return store.selectionRect?.width;
-										},
-										get height() {
-											return store.selectionRect?.height;
-										},
-										get x() {
-											return store.selectionRect?.x;
-										},
-										get y() {
-											return store.selectionRect?.y;
-										}
-									})];
-								}
-							});
-						}
-					}),
-					createComponent(Attribution, {
-						get proOptions() {
-							return flowProps.proOptions;
-						},
-						get position() {
-							return flowProps.attributionPosition;
-						}
-					}),
-					createComponent(A11yDescriptions, {}),
-					memo(() => flowProps.children)
-				];
-			}
-		})), _el$;
-	})();
+		}
+	}, htmlProps), !0), insert(_el$, createComponent(TypedSolidFlowContext, {
+		value: solidFlow,
+		get children() {
+			return [
+				createComponent(KeyHandler, {
+					get selectionKey() {
+						return _props.selectionKey;
+					},
+					get deleteKey() {
+						return _props.deleteKey;
+					},
+					get panActivationKey() {
+						return _props.panActivationKey;
+					},
+					get multiSelectionKey() {
+						return _props.multiSelectionKey;
+					},
+					get zoomActivationKey() {
+						return _props.zoomActivationKey;
+					}
+				}),
+				createComponent(Zoom, {
+					get panOnScrollMode() {
+						return _props.panOnScrollMode;
+					},
+					get preventScrolling() {
+						return _props.preventScrolling;
+					},
+					get zoomOnScroll() {
+						return _props.zoomOnScroll;
+					},
+					get zoomOnDoubleClick() {
+						return _props.zoomOnDoubleClick;
+					},
+					get zoomOnPinch() {
+						return _props.zoomOnPinch;
+					},
+					get panOnScroll() {
+						return _props.panOnScroll;
+					},
+					get panOnScrollSpeed() {
+						return _props.panOnScrollSpeed;
+					},
+					get panOnDrag() {
+						return _props.panOnDrag;
+					},
+					get paneClickDistance() {
+						return _props.paneClickDistance;
+					},
+					get selectionOnDrag() {
+						return _props.selectionOnDrag;
+					},
+					get onMoveStart() {
+						return _props.onMoveStart;
+					},
+					get onMove() {
+						return _props.onMove;
+					},
+					get onMoveEnd() {
+						return _props.onMoveEnd;
+					},
+					get onViewportInitialized() {
+						return _props.onInit;
+					},
+					get initialViewport() {
+						return _props.viewport || _props.initialViewport;
+					},
+					get children() {
+						return createComponent(Pane, {
+							get onPaneClick() {
+								return _props.onPaneClick;
+							},
+							get onPaneContextMenu() {
+								return _props.onPaneContextMenu;
+							},
+							get onSelectionStart() {
+								return _props.onSelectionStart;
+							},
+							get onSelectionEnd() {
+								return _props.onSelectionEnd;
+							},
+							get panOnDrag() {
+								return _props.panOnDrag;
+							},
+							get selectionOnDrag() {
+								return _props.selectionOnDrag;
+							},
+							get paneClickDistance() {
+								return _props.paneClickDistance;
+							},
+							get autoPanOnSelection() {
+								return _props.autoPanOnSelection;
+							},
+							get children() {
+								return [createComponent(Viewport, { get children() {
+									return [
+										_tmpl$(),
+										createComponent(EdgeRenderer, {
+											get reconnectRadius() {
+												return _props.reconnectRadius;
+											},
+											get onEdgeClick() {
+												return _props.onEdgeClick;
+											},
+											get onEdgeContextMenu() {
+												return _props.onEdgeContextMenu;
+											},
+											get onEdgePointerEnter() {
+												return _props.onEdgePointerEnter;
+											},
+											get onEdgePointerLeave() {
+												return _props.onEdgePointerLeave;
+											},
+											get defaultEdgeOptions() {
+												return _props.defaultEdgeOptions;
+											}
+										}),
+										_tmpl$2(),
+										createComponent(ConnectionLine, {
+											get type() {
+												return _props.connectionLineType;
+											},
+											get component() {
+												return _props.connectionLineComponent;
+											},
+											get containerStyle() {
+												return _props.connectionLineContainerStyle;
+											},
+											get style() {
+												return _props.connectionLineStyle;
+											}
+										}),
+										createComponent(NodeRenderer, {
+											get nodeClickDistance() {
+												return _props.nodeClickDistance;
+											},
+											get onNodeClick() {
+												return _props.onNodeClick;
+											},
+											get onNodeContextMenu() {
+												return _props.onNodeContextMenu;
+											},
+											get onNodePointerEnter() {
+												return _props.onNodePointerEnter;
+											},
+											get onNodePointerMove() {
+												return _props.onNodePointerMove;
+											},
+											get onNodePointerLeave() {
+												return _props.onNodePointerLeave;
+											},
+											get onNodeDrag() {
+												return _props.onNodeDrag;
+											},
+											get onNodeDragStart() {
+												return _props.onNodeDragStart;
+											},
+											get onNodeDragStop() {
+												return _props.onNodeDragStop;
+											}
+										}),
+										createComponent(NodeSelection, {
+											get onSelectionClick() {
+												return _props.onSelectionClick;
+											},
+											get onSelectionContextMenu() {
+												return _props.onSelectionContextMenu;
+											},
+											get onNodeDrag() {
+												return _props.onNodeDrag;
+											},
+											get onNodeDragStart() {
+												return _props.onNodeDragStart;
+											},
+											get onNodeDragStop() {
+												return _props.onNodeDragStop;
+											}
+										})
+									];
+								} }), createComponent(Selection, {
+									get isVisible() {
+										return memo(() => !!store.selectionRect)() && store.selectionRectMode === "user";
+									},
+									get width() {
+										return store.selectionRect?.width;
+									},
+									get height() {
+										return store.selectionRect?.height;
+									},
+									get x() {
+										return store.selectionRect?.x;
+									},
+									get y() {
+										return store.selectionRect?.y;
+									}
+								})];
+							}
+						});
+					}
+				}),
+				createComponent(Attribution, {
+					get proOptions() {
+						return _props.proOptions;
+					},
+					get position() {
+						return _props.attributionPosition;
+					}
+				}),
+				createComponent(A11yDescriptions, {}),
+				memo(() => _props.children)
+			];
+		}
+	})), _el$;
 }, SolidFlowProvider = (props) => {
-	let _props = mergeProps$1(getDefaultFlowStateProps(), props), solidFlow = createSolidFlow(_props);
-	onCleanup(() => {
+	let _props = merge(getDefaultFlowStateProps(), props), solidFlow = createSolidFlow(_props);
+	return onCleanup(() => {
 		solidFlow.actions.reset();
-	});
-	let ContextProvider = SolidFlowContext.Provider;
-	return createComponent(ContextProvider, {
+	}), createComponent(SolidFlowContext, {
 		value: solidFlow,
 		get children() {
 			return props.children;