npm - @dschz/solid-flow - Versions diffs - 0.2.4 → 0.3.0-next.1 - Mend

@dschz/solid-flow 0.2.4 → 0.3.0-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/index/index.d.ts +207 -250
package/dist/index/index.js +2490 -2288
package/dist/index/index.jsx +1682 -1448
package/package.json +14 -20

package/dist/index/index.jsx CHANGED Viewed

@@ -1,13 +1,10 @@
-import { For, Index, Show, batch, createComputed, createContext, createEffect, createMemo, createSignal, mapArray, mergeProps, onCleanup, onMount, splitProps, untrack, useContext } from "solid-js";
-import { ReactiveMap } from "@solid-primitives/map";
+import { For, Show, createContext, createEffect, createMemo, createProjection, createSignal, createStore, flush, mapArray, merge, omit, onCleanup, onSettled, snapshot, untrack, useContext } from "solid-js";
 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 { Dynamic, Portal, isServer } from "solid-js/web";
-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, getDimensions, getEdgeCenter, getEdgePosition, getEdgeToolbarTransform, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, 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 } from "@xyflow/system";
+import { Dynamic, Portal, isServer } from "@solidjs/web";
+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,104 +36,67 @@ 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 <Show when={labelNode()}>{(root) => <Portal mount={root()}>{props.children}</Portal>}</Show>;
 }, EdgeLabel = (props) => {
-	let _props = mergeProps({
+	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 <EdgeLabelRenderer>
-      <div role="button" tabIndex={-1} class={clsx$1("solid-flow__edge-label", { transparent: local.transparent }, local.class)} style={{
+      <div role="button" tabindex={-1} class={[
+		"solid-flow__edge-label",
+		{ transparent: _props.transparent },
+		_props.class
+	]} style={{
 		"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={() => {
-		local.selectEdgeOnClick && actions.handleEdgeSelection(id());
+		_props.selectEdgeOnClick && actions.handleEdgeSelection(id());
 	}} {...rest}>
-        {local.children}
+        {_props.children}
       </div>
     </EdgeLabelRenderer>;
 }, BaseEdge = (props) => {
-	let _props = mergeProps({ 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 <>
-      <path d={local.path} class={clsx$1(["solid-flow__edge-path", local.class])} marker-start={local.markerStart} marker-end={local.markerEnd} fill="none" style={local.style} {...rest} />
+      <path d={_props.path} class={["solid-flow__edge-path", _props.class]} marker-start={_props.markerStart} marker-end={_props.markerEnd} fill="none" style={_props.style} {...rest} />
-      <Show when={local.interactionWidth > 0}>
-        <path d={local.path} stroke-opacity={0} stroke-width={local.interactionWidth} fill="none" class="solid-flow__edge-interaction" />
+      <Show when={_props.interactionWidth > 0}>
+        <path d={_props.path} stroke-opacity={0} stroke-width={_props.interactionWidth} fill="none" class="solid-flow__edge-interaction" />
       </Show>
-      <Show when={local.label}>
-        <EdgeLabel x={local.labelX} y={local.labelY} style={local.labelStyle}>
-          {local.label}
+      <Show when={_props.label}>
+        <EdgeLabel x={_props.labelX} y={_props.labelY} style={_props.labelStyle}>
+          {_props.label}
         </EdgeLabel>
       </Show>
     </>;
@@ -176,24 +136,16 @@ const scheduleIdleCallback = typeof requestIdleCallback == "function" ? requestI
 	};
 	return <BaseEdge path={pathData().path} labelX={pathData().labelX} labelY={pathData().labelY} label={props.label} labelStyle={props.labelStyle} markerStart={props.markerStart} markerEnd={props.markerEnd} interactionWidth={props.interactionWidth} style={props.style} />;
 }, EdgeReconnectAnchor = (props) => {
-	let _props = mergeProps({
+	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) => {
+	let edge = () => edgeLookup[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"
@@ -237,16 +189,21 @@ const scheduleIdleCallback = typeof requestIdleCallback == "function" ? requestI
 			handleDomNode: event.currentTarget
 		});
 	};
-	return <EdgeLabel x={local.position?.x} y={local.position?.y} style={local.style} {...rest}>
-      <div onPointerDown={onPointerDown} class={clsx$1("solid-flow__edgeupdater", `solid-flow__edgeupdater-${local.type}`, store.noPanClass, local.class)} style={{
-		width: toPxString(local.size),
-		height: toPxString(local.size),
+	return <EdgeLabel x={_props.position?.x} y={_props.position?.y} style={_props.style} {...rest}>
+      <div onPointerDown={onPointerDown} class={[
+		"solid-flow__edgeupdater",
+		`solid-flow__edgeupdater-${_props.type}`,
+		store.noPanClass,
+		_props.class
+	]} style={{
+		width: toPxString(_props.size),
+		height: toPxString(_props.size),
 		background: "transparent",
 		border: "none",
 		cursor: "move",
-		...local.style
+		..._props.style
 	}}>
-        <Show when={!reconnecting()}>{local.children}</Show>
+        <Show when={!reconnecting()}>{_props.children}</Show>
       </div>
     </EdgeLabel>;
 }, ARIA_NODE_DESC_KEY = "solid-flow__node-desc", ARIA_EDGE_DESC_KEY = "solid-flow__edge-desc", A11yDescriptions = () => {
@@ -283,19 +240,24 @@ const scheduleIdleCallback = typeof requestIdleCallback == "function" ? requestI
 	}, onKeyDown = (event) => {
 		store.disableKeyboardA11y || !elementSelectionKeys.includes(event.key) || !selectable() || (event.key === "Escape" ? actions.unselectNodesAndEdges({ edges: [edge()] }) : actions.addSelectedEdges([edge().id]));
 	}, ariaLabel = () => edge().ariaLabel ?? `Edge from ${edge().source} to ${edge().target}`;
-	return <EdgeIdContext.Provider value={edgeId}>
+	return <EdgeIdContext value={edgeId}>
       <Show when={!edge().hidden}>
         <svg class="solid-flow__edge-wrapper" style={{ "z-index": edge().zIndex }}>
-          <g ref={edgeRef} data-id={edge().id} tabIndex={focusable() ? 0 : void 0} role={edge().ariaRole ?? (focusable() ? "group" : "img")} aria-label={ariaLabel()} aria-roledescription="edge" aria-describedby={focusable() ? `${ARIA_EDGE_DESC_KEY}-${store.id}` : void 0} class={clsx$1("solid-flow__edge", `solid-flow__edge-${edgeType()}`, {
-		animated: edge().animated,
-		selected: edge().selected,
-		selectable: selectable()
-	}, edge().class)} onClick={onClick} onKeyDown={(e) => focusable() && onKeyDown(e)} onContextMenu={(e) => onPointerEvent(e, "contextmenu")} onPointerEnter={(e) => onPointerEvent(e, "pointerenter")} onPointerLeave={(e) => onPointerEvent(e, "pointerleave")} {...edge().domAttributes}>
+          <g ref={edgeRef} data-id={edge().id} tabindex={focusable() ? 0 : void 0} role={edge().ariaRole ?? (focusable() ? "group" : "img")} aria-label={ariaLabel()} aria-roledescription="edge" aria-describedby={focusable() ? `${ARIA_EDGE_DESC_KEY}-${store.id}` : void 0} class={[
+		"solid-flow__edge",
+		`solid-flow__edge-${edgeType()}`,
+		{
+			animated: !!edge().animated,
+			selected: !!edge().selected,
+			selectable: !!selectable()
+		},
+		edge().class
+	]} onClick={onClick} onKeyDown={(e) => focusable() && onKeyDown(e)} onContextMenu={(e) => onPointerEvent(e, "contextmenu")} onPointerEnter={(e) => onPointerEvent(e, "pointerenter")} onPointerLeave={(e) => onPointerEvent(e, "pointerleave")} {...edge().domAttributes}>
             <Dynamic component={edgeComponent()} id={edge().id} source={edge().source} target={edge().target} sourceX={edge().sourceX} sourceY={edge().sourceY} targetX={edge().targetX} targetY={edge().targetY} sourcePosition={edge().sourcePosition} targetPosition={edge().targetPosition} animated={edge().animated} selected={edge().selected} label={edge().label} labelStyle={edge().labelStyle} data={edge().data} style={edge().style} interactionWidth={edge().interactionWidth} selectable={selectable()} deletable={edge().deletable ?? !0} type={edgeType()} sourceHandleId={edge().sourceHandle} targetHandleId={edge().targetHandle} markerStart={markerStartUrl()} markerEnd={markerEndUrl()} />
           </g>
         </svg>
       </Show>
-    </EdgeIdContext.Provider>;
+    </EdgeIdContext>;
 }, SmoothStepEdge = (props) => {
 	let pathData = createMemo(() => {
 		let [path, labelX, labelY] = getSmoothStepPath$1({
@@ -399,515 +361,305 @@ const scheduleIdleCallback = typeof requestIdleCallback == "function" ? requestI
 		};
 	};
 	return <BaseEdge path={pathData().path} labelX={pathData().labelX} labelY={pathData().labelY} label={props.label} labelStyle={props.labelStyle} markerStart={props.markerStart} markerEnd={props.markerEnd} interactionWidth={props.interactionWidth} style={props.style} />;
-}, getEdgeId = (connection) => {
-	let { source, sourceHandle, target, targetHandle } = connection;
-	return `xy-edge__${source}${sourceHandle || ""}-${target}${targetHandle || ""}`;
-}, NodeConnectableContext = createContext();
-function useNodeConnectable() {
-	let ctx = useContext(NodeConnectableContext);
-	if (!ctx) throw Error("solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useNodeConnectable");
-	return ctx;
-}
+}, getDefaultFlowStateProps = () => ({
+	id: "1",
+	nodes: [],
+	edges: [],
+	nodeOrigin: [0, 0],
+	nodeExtent: infiniteExtent,
+	defaultEdgeOptions: {},
+	colorMode: "system",
+	colorModeSSR: "light",
+	connectionMode: "strict",
+	connectionLineType: "default",
+	connectionRadius: 20,
+	nodeDragThreshold: 1,
+	minZoom: .5,
+	maxZoom: 2,
+	selectionMode: "partial",
+	fitView: !1,
+	noPanClass: "nopan",
+	noDragClass: "nodrag",
+	noWheelClass: "nowheel",
+	autoPanOnNodeDrag: !0,
+	autoPanOnConnect: !0,
+	autoPanOnNodeFocus: !0,
+	autoPanOnSelection: !0,
+	autoPanSpeed: 15,
+	elevateEdgesOnSelect: !0,
+	nodesDraggable: !0,
+	nodesConnectable: !0,
+	nodesFocusable: !0,
+	edgesFocusable: !0,
+	elementsSelectable: !0,
+	selectNodesOnDrag: !0,
+	elevateNodesOnSelect: !0,
+	zIndexMode: "basic",
+	onlyRenderVisibleElements: !1,
+	disableKeyboardA11y: !1,
+	defaultMarkerColor: "#b1b1b7",
+	ariaLiveMessage: "",
+	style: {},
+	isValidConnection: (() => !0),
+	onFlowError: createDevWarn("Solid Flow", "https://solidflow.dev/")
+});
 //#endregion
-//#region src/components/graph/handle/Handle.tsx
-const Handle = (props) => {
-	let _props = mergeProps({
-		id: null,
-		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;
-	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)) {
-			let _connections = connections ?? /* @__PURE__ */ new Map();
-			handleConnectionChange(prevConnections, _connections, props.onDisconnect), handleConnectionChange(_connections, prevConnections, props.onConnect);
-		}
-		prevConnections = connections ?? /* @__PURE__ */ new Map();
-	});
-	let onConnectExtended = (connection) => {
-		let handleConnection = {
-			...connection,
-			id: getEdgeId(connection)
-		}, edge = store.onBeforeConnect?.(handleConnection) ?? handleConnection;
-		actions.addEdge(edge), store.onConnect?.(handleConnection);
-	}, onPointerDown = (event) => {
-		XYHandle.onPointerDown(event, {
-			handleId: handleId(),
-			nodeId: nodeId(),
-			isTarget: isTarget(),
-			connectionRadius: store.connectionRadius,
-			domNode: store.domNode,
-			nodeLookup,
-			connectionMode: store.connectionMode,
-			lib: store.lib,
-			autoPanOnConnect: store.autoPanOnConnect,
-			flowId: store.id,
-			isValidConnection: local.isValidConnection ?? store.isValidConnection,
-			updateConnection: actions.setConnection,
-			cancelConnection: actions.cancelConnection,
-			panBy: actions.panBy,
-			onConnect: onConnectExtended,
-			onConnectStart: (event, startParams) => {
-				store.onConnectStart?.(event, {
-					nodeId: startParams.nodeId,
-					handleId: startParams.handleId,
-					handleType: startParams.handleType
-				});
-			},
-			onConnectEnd: store.onConnectEnd,
-			getTransform: () => store.transform,
-			getFromHandle: () => store.connection.fromHandle,
-			autoPanSpeed: store.autoPanSpeed,
-			dragThreshold: store.connectionDragThreshold,
-			handleDomNode: event.currentTarget
-		});
-	}, onClick = (event) => {
-		if (!nodeId() || !store.clickConnectStartHandle && !local.isConnectableStart) return;
-		if (!store.clickConnectStartHandle) {
-			store.onClickConnectStart?.(event, {
-				nodeId: nodeId(),
-				handleId: handleId(),
-				handleType: local.type
-			}), actions.setClickConnectStartHandle({
-				nodeId: nodeId(),
-				type: local.type,
-				id: handleId()
-			});
-			return;
-		}
-		let doc = getHostForElement(event.target), isValidConnectionHandler = local.isValidConnection ?? store.isValidConnection, { connection, isValid } = XYHandle.isValid(event, {
-			handle: {
-				nodeId: nodeId(),
-				id: handleId(),
-				type: local.type
-			},
-			connectionMode: store.connectionMode,
-			fromNodeId: store.clickConnectStartHandle.nodeId,
-			fromHandleId: store.clickConnectStartHandle.id ?? null,
-			fromType: store.clickConnectStartHandle.type,
-			isValidConnection: isValidConnectionHandler,
-			flowId: store.id,
-			doc,
-			lib: store.lib,
-			nodeLookup
-		});
-		isValid && connection && onConnectExtended(connection);
-		let connectionClone = structuredClone(unwrap(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 <div role="button" aria-label={store.ariaLabelConfig["handle.ariaLabel"]} tabIndex={-1} data-handleid={handleId()} data-nodeid={nodeId()} data-handlepos={local.position} data-id={`${store.id}-${nodeId()}-${local.id || null}-${local.type}`} onClick={store.clickConnect ? onClick : void 0} onPointerDown={onPointerDown} style={local.style} class={clsx$1("solid-flow__handle", `solid-flow__handle-${local.position}`, store.noDragClass, store.noPanClass, local.class, {
-		valid: valid(),
-		connectingto: connectingTo(),
-		connectingfrom: connectingFrom(),
-		source: !isTarget(),
-		target: isTarget(),
-		connectablestart: _props.isConnectableStart,
-		connectableend: _props.isConnectableEnd,
-		connectable: connectable(),
-		connectionindicator: connectionIndicator()
-	})} {...rest}>
-      {local.children}
-    </div>;
-}, DefaultNode = (props) => {
-	let _props = mergeProps({
-		targetPosition: "top",
-		sourcePosition: "bottom"
-	}, props);
-	return <>
-      <Handle type="target" position={_props.targetPosition} isConnectable={_props.isConnectable} />
-      {props.data.label}
-      <Handle type="source" position={_props.sourcePosition} isConnectable={_props.isConnectable} />
-    </>;
-}, GroupNode = (props) => <div style={{
-	position: "absolute",
-	left: 0,
-	top: 0,
-	width: toPxString(props.width),
-	height: toPxString(props.height)
-}} />, InputNode = (props) => {
-	let _props = mergeProps({ sourcePosition: "bottom" }, props);
-	return <>
-      {props.data?.label}
-      <Handle type="source" position={_props.sourcePosition} isConnectable={_props.isConnectable} />
-    </>;
-}, createDraggable = (elem, params) => {
-	let { store, nodeLookup, actions } = useInternalSolidFlow(), [dragging, setDragging] = createSignal(!1);
-	return onMount(() => {
-		let { onDrag, onDragStart, onDragStop, onNodeMouseDown } = params(), dragInstance = XYDrag({
-			onDrag,
-			onDragStart: (event, dragItems, node, nodes) => {
-				setDragging(!0), onDragStart?.(event, dragItems, node, nodes);
-			},
-			onDragStop: (event, dragItems, node, nodes) => {
-				setDragging(!1), onDragStop?.(event, dragItems, node, nodes);
-			},
-			onNodeMouseDown,
-			getStoreItems: () => ({
-				nodes: store.nodes,
-				nodeLookup,
-				edges: store.edges,
-				nodeExtent: store.nodeExtent,
-				snapGrid: store.snapGrid ?? [0, 0],
-				snapToGrid: !!store.snapGrid,
-				autoPanSpeed: store.autoPanSpeed,
-				nodeOrigin: store.nodeOrigin,
-				multiSelectionActive: store.multiselectionKeyPressed,
-				domNode: store.domNode,
-				transform: store.transform,
-				autoPanOnNodeDrag: store.autoPanOnNodeDrag,
-				nodesDraggable: store.nodesDraggable,
-				selectNodesOnDrag: store.selectNodesOnDrag,
-				nodeDragThreshold: store.nodeDragThreshold,
-				unselectNodesAndEdges: actions.unselectNodesAndEdges,
-				updateNodePositions: actions.updateNodePositions,
-				panBy: actions.panBy
-			})
-		});
-		function updateDrag(elem, params) {
-			if (params.disabled) {
-				dragInstance.destroy();
-				return;
+//#region src/core/facades.ts
+/**
+* A read-only `Map` view over an id-keyed record projection, for
+* @xyflow/system interop: system helpers take `Map`s, our reactive lookups
+* are records. Every read passes through to the record, so reads inside
+* tracked scopes subscribe normally — `get`/`has` check with `in` first,
+* which also subscribes while the key is still absent (the projection
+* absent-key footgun), and `size`/iteration read the key set structurally.
+*
+* The mutating `Map` methods throw: writes belong to the roots the
+* projection derives from.
+*/
+var RecordMapFacade = class {
+	#record;
+	constructor(record) {
+		this.#record = record;
+	}
+	get(key) {
+		return key in this.#record ? this.#record[key] : void 0;
+	}
+	has(key) {
+		return key in this.#record;
+	}
+	get size() {
+		return Object.keys(this.#record).length;
+	}
+	*keys() {
+		yield* Object.keys(this.#record);
+	}
+	*values() {
+		for (let key of Object.keys(this.#record)) yield this.#record[key];
+	}
+	*entries() {
+		for (let key of Object.keys(this.#record)) yield [key, this.#record[key]];
+	}
+	[Symbol.iterator]() {
+		return this.entries();
+	}
+	forEach(callback, thisArg) {
+		for (let [key, value] of this.entries()) callback.call(thisArg, value, key, this);
+	}
+	[Symbol.toStringTag] = "RecordMapFacade";
+	set() {
+		throw Error("RecordMapFacade is read-only; write to the projection's source roots");
+	}
+	getOrInsert() {
+		throw Error("RecordMapFacade is read-only; write to the projection's source roots");
+	}
+	getOrInsertComputed() {
+		throw Error("RecordMapFacade is read-only; write to the projection's source roots");
+	}
+	delete() {
+		throw Error("RecordMapFacade is read-only; write to the projection's source roots");
+	}
+	clear() {
+		throw Error("RecordMapFacade is read-only; write to the projection's source roots");
+	}
+};
+//#endregion
+//#region src/core/projections/connections.ts
+/**
+* Lookup keys for the connection index. Each edge is registered under six
+* keys — for both of its endpoints: the node, the node+handle-type, and (when
+* a handle id is present) the node+type+handle:
+*   `${nodeId}` · `${nodeId}-${type}` · `${nodeId}-${type}-${handleId}`
+*/
+const connectionKey = (nodeId, type, handleId) => `${nodeId}${type ? handleId ? `-${type}-${handleId}` : `-${type}` : ""}`, pairKey = (aNode, aHandle, bNode, bHandle) => `${aNode}-${aHandle}--${bNode}-${bHandle}`, createConnections = (source) => createProjection(() => {
+	let out = {}, add = (key, entry, connection) => {
+		(out[key] ??= {})[entry] = connection;
+	};
+	for (let edge of source.edges) {
+		let sourceHandle = edge.sourceHandle ?? null, targetHandle = edge.targetHandle ?? null, connection = {
+			edgeId: edge.id,
+			source: edge.source,
+			target: edge.target,
+			sourceHandle,
+			targetHandle
+		}, sourceKey = pairKey(edge.source, sourceHandle, edge.target, targetHandle), targetKey = pairKey(edge.target, targetHandle, edge.source, sourceHandle);
+		add(edge.source, targetKey, connection), add(connectionKey(edge.source, "source"), targetKey, connection), sourceHandle && add(connectionKey(edge.source, "source", sourceHandle), targetKey, connection), add(edge.target, sourceKey, connection), add(connectionKey(edge.target, "target"), sourceKey, connection), targetHandle && add(connectionKey(edge.target, "target", targetHandle), sourceKey, connection);
+	}
+	return out;
+}, {}, { key: "id" }), createEdgeLookup = (source) => createProjection(() => {
+	let out = {};
+	for (let edge of source.edges) out[edge.id] = edge;
+	return out;
+}, {}, { key: "id" });
+function isManualZIndexMode(zIndexMode) {
+	return zIndexMode === "manual";
+}
+function calculateZ(node, selectedNodeZ, zIndexMode) {
+	let zIndex = isNumeric(node.zIndex) ? node.zIndex : 0;
+	return isManualZIndexMode(zIndexMode) ? zIndex : zIndex + (node.selected ? selectedNodeZ : 0);
+}
+const EMPTY_AUTO_INDEX = /* @__PURE__ */ new Map(), createInternalNodes = (source) => {
+	let autoIndex = createMemo(() => {
+		if (source.zIndexMode !== "auto") return EMPTY_AUTO_INDEX;
+		let index = /* @__PURE__ */ new Map(), rootIds = /* @__PURE__ */ new Set();
+		for (let node of source.nodes) node.parentId ? rootIds.has(node.parentId) && !index.has(node.parentId) && index.set(node.parentId, index.size + 1) : rootIds.add(node.id);
+		return index;
+	}), entryById = /* @__PURE__ */ new Map(), rowStores = mapArray(() => source.nodes, (userNodeAccessor, index) => {
+		let id = userNodeAccessor().id, store = createProjection(() => {
+			let userNode = userNodeAccessor(), { nodeOrigin, nodeExtent, zIndexMode } = source, selectedNodeZ = source.elevateNodesOnSelect && !isManualZIndexMode(zIndexMode) ? 1e3 : 0, measurement = userNode.id in source.measurements ? source.measurements[userNode.id] : void 0, measured = {
+				width: userNode.measured?.width ?? measurement?.measured.width,
+				height: userNode.measured?.height ?? measurement?.measured.height
+			}, dimensions = getNodeDimensions({
+				measured,
+				width: userNode.width,
+				height: userNode.height,
+				initialWidth: userNode.initialWidth,
+				initialHeight: userNode.initialHeight
+			}), rootParentIndex = autoIndex().get(userNode.id), row = {
+				...userNode,
+				measured,
+				internals: {
+					positionAbsolute: clampPosition(getNodePositionWithOrigin(userNode, nodeOrigin), isCoordinateExtent(userNode.extent) ? userNode.extent : nodeExtent, dimensions),
+					handleBounds: measurement?.handleBounds,
+					z: calculateZ(userNode, selectedNodeZ, zIndexMode) + (rootParentIndex === void 0 ? 0 : rootParentIndex * 10),
+					...rootParentIndex === void 0 ? {} : { rootParentIndex },
+					userNode
+				}
+			};
+			if (userNode.parentId) {
+				let parentEntry = entryById.get(userNode.parentId);
+				if (parentEntry && parentEntry.index() < index()) {
+					let { x, y, z } = calculateChildXYZ(row, parentEntry.store.row, nodeOrigin, nodeExtent, selectedNodeZ, zIndexMode);
+					row.internals.positionAbsolute = {
+						x,
+						y
+					}, row.internals.z = z;
+				} else source.nodes.length;
 			}
-			dragInstance.update({
-				domNode: elem,
-				nodeId: params.nodeId,
-				noDragClassName: params.noDragClass,
-				handleSelector: params.handleSelector,
-				isSelectable: params.isSelectable,
-				nodeClickDistance: params.nodeClickDistance
-			});
+			if (userNode.parentId) {
+				let parent = entryById.get(userNode.parentId);
+				parent?.store.row.internals.positionAbsolute.x, parent?.store.row.internals.z;
+			}
+			return { row };
+		}, {}, { key: "id" }), entry = {
+			store,
+			index
+		};
+		return entryById.set(id, entry), onCleanup(() => {
+			entryById.get(id) === entry && entryById.delete(id);
+		}), {
+			id,
+			store
+		};
+	}, { keyed: (userNode) => userNode.id }), assigned = /* @__PURE__ */ new Map();
+	return createProjection((draft) => {
+		let seen = /* @__PURE__ */ new Set();
+		for (let { id, store } of rowStores()) {
+			seen.add(id);
+			let row = store.row;
+			assigned.get(id) !== row && (assigned.set(id, row), draft[id] = row);
 		}
-		createEffect(() => {
-			updateDrag(elem(), params());
-		}), onCleanup(() => {
-			dragInstance.destroy();
-		});
-	}), dragging;
-}, NodeIdContext = createContext();
-function useNodeId() {
-	let ctx = useContext(NodeIdContext);
-	if (!ctx) throw Error("solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useNodeId");
-	return ctx;
+		for (let id of assigned.keys()) seen.has(id) || (assigned.delete(id), delete draft[id]);
+	}, {}, {
+		key: null,
+		shallow: !0
+	});
+};
+function calculateChildXYZ(childNode, parentNode, nodeOrigin, nodeExtent, selectedNodeZ, zIndexMode) {
+	let { x: parentX, y: parentY } = parentNode.internals.positionAbsolute, childDimensions = getNodeDimensions(childNode), positionWithOrigin = getNodePositionWithOrigin(childNode, nodeOrigin), clampedPosition = isCoordinateExtent(childNode.extent) ? clampPosition(positionWithOrigin, childNode.extent, childDimensions) : positionWithOrigin, absolutePosition = clampPosition({
+		x: parentX + clampedPosition.x,
+		y: parentY + clampedPosition.y
+	}, nodeExtent, childDimensions);
+	childNode.extent === "parent" && (absolutePosition = clampPositionToParent(absolutePosition, childDimensions, parentNode));
+	let childZ = calculateZ(childNode, selectedNodeZ, zIndexMode), parentZ = parentNode.internals.z ?? 0;
+	return {
+		x: absolutePosition.x,
+		y: absolutePosition.y,
+		z: parentZ >= childZ ? parentZ + 1 : childZ
+	};
 }
 //#endregion
-//#region src/components/graph/node/NodeWrapper.tsx
-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;
-		return `translate(${x}px, ${y}px)`;
-	}, sizeStyle = () => {
-		let w = node().width ?? node().initialWidth, h = node().height ?? node().initialHeight;
-		return {
-			...node().style,
-			...w ? { width: toPxString(w) } : {},
-			...h ? { height: toPxString(h) } : {}
-		};
-	}, style = () => ({
-		"z-index": node().internals.z,
-		transform: transform(),
-		visibility: nodeHasDimensions(node()) ? "visible" : "hidden",
-		...sizeStyle(),
-		...node().style ?? {}
-	});
-	createEffect(() => {
-		nodeTypeValid();
-	}), createEffect((prev) => prev && prev.sourcePosition === node().sourcePosition && prev.targetPosition === node().targetPosition && prev.nodeType === nodeType() ? prev : (actions.requestUpdateNodeInternals([[node().id, {
-		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);
-	});
-	let onSelectNodeHandler = (event) => {
-		selectable() && (!store.selectNodesOnDrag || !draggable() || store.nodeDragThreshold > 0) && actions.handleNodeSelection(node().id), props.onNodeClick?.({
-			node: userNode(),
-			event
-		});
-	}, onKeyDown = (event) => {
-		if (isInputDOMNode(event) || store.disableKeyboardA11y) return;
-		if (elementSelectionKeys.includes(event.key) && selectable()) {
-			actions.handleNodeSelection(node().id, event.key === "Escape", nodeRef());
-			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);
-		});
-	}, onFocus = () => {
-		if (store.disableKeyboardA11y || !store.autoPanOnNodeFocus || !nodeRef()?.matches(":focus-visible")) return;
-		let { width, height, viewport } = store;
-		getNodesInside(/* @__PURE__ */ new Map([[node().id, node()]]), {
-			x: 0,
-			y: 0,
-			width,
-			height
-		}, [
-			viewport.x,
-			viewport.y,
-			viewport.zoom
-		], !0).length > 0 || actions.setCenter(node().position.x + (node().measured.width ?? 0) / 2, node().position.y + (node().measured.height ?? 0) / 2, { zoom: viewport.zoom });
-	}, dragging = createDraggable(nodeRef, () => ({
-		nodeId: node().id,
-		isSelectable: selectable(),
-		disabled: !draggable(),
-		handleSelector: node().dragHandle,
-		noDragClass: store.noDragClass,
-		nodeClickDistance: props.nodeClickDistance,
-		onNodeMouseDown: actions.handleNodeSelection,
-		onDrag: (event, _, targetNode, nodes) => {
-			props.onNodeDrag?.({
-				event,
-				targetNode,
-				nodes
-			});
-		},
-		onDragStart: (event, _, targetNode, nodes) => {
-			props.onNodeDragStart?.({
-				event,
-				targetNode,
-				nodes
-			});
-		},
-		onDragStop: (event, _, targetNode, nodes) => {
-			props.onNodeDragStop?.({
-				event,
-				targetNode,
-				nodes
-			});
-		}
-	}));
-	return <Show when={!node().hidden}>
-      <div ref={setNodeRef} data-id={node().id} class={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)} style={style()} 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()} tabIndex={focusable() ? 0 : void 0} role={node().ariaRole ?? (focusable() ? "group" : void 0)} aria-roledescription="node" aria-describedby={store.disableKeyboardA11y ? void 0 : `${ARIA_NODE_DESC_KEY}-${store.id}`} {...node().domAttributes}>
-        <NodeIdContext.Provider value={nodeId}>
-          <NodeConnectableContext.Provider value={connectable}>
-            <Dynamic component={nodeComponent()} data={node().data} id={node().id} selected={!!node().selected} selectable={selectable()} deletable={deletable()} sourcePosition={node().sourcePosition} targetPosition={node().targetPosition} zIndex={node().internals.z} dragging={dragging()} draggable={draggable()} dragHandle={node().dragHandle} parentId={node().parentId} type={nodeType()} isConnectable={connectable()} positionAbsoluteX={node().internals.positionAbsolute.x} positionAbsoluteY={node().internals.positionAbsolute.y} width={node().width} height={node().height} />
-          </NodeConnectableContext.Provider>
-        </NodeIdContext.Provider>
-      </div>
-    </Show>;
-}, OutputNode = (props) => {
-	let _props = mergeProps({ targetPosition: "top" }, props);
-	return <>
-      <Handle type="target" position={_props.targetPosition} isConnectable={_props.isConnectable} />
-      {props.data?.label}
-    </>;
-}, getDefaultFlowStateProps = () => ({
-	id: "1",
-	nodes: [],
-	edges: [],
-	nodeOrigin: [0, 0],
-	nodeExtent: infiniteExtent,
-	defaultEdgeOptions: {},
-	colorMode: "system",
-	colorModeSSR: "light",
-	connectionMode: "strict",
-	connectionLineType: "default",
-	connectionRadius: 20,
-	nodeDragThreshold: 1,
-	minZoom: .5,
-	maxZoom: 2,
-	selectionMode: "partial",
-	fitView: !1,
-	noPanClass: "nopan",
-	noDragClass: "nodrag",
-	noWheelClass: "nowheel",
-	autoPanOnNodeDrag: !0,
-	autoPanOnConnect: !0,
-	autoPanOnNodeFocus: !0,
-	autoPanOnSelection: !0,
-	autoPanSpeed: 15,
-	elevateEdgesOnSelect: !0,
-	nodesDraggable: !0,
-	nodesConnectable: !0,
-	nodesFocusable: !0,
-	edgesFocusable: !0,
-	elementsSelectable: !0,
-	selectNodesOnDrag: !0,
-	elevateNodesOnSelect: !0,
-	zIndexMode: "basic",
-	onlyRenderVisibleElements: !1,
-	disableKeyboardA11y: !1,
-	defaultMarkerColor: "#b1b1b7",
-	ariaLiveMessage: "",
-	style: {},
-	isValidConnection: (() => !0),
-	onFlowError: createDevWarn("Solid Flow", "https://solidflow.dev/")
-}), SELECTED_NODE_Z = 1e3, defaultOptions = {
-	nodeOrigin: [0, 0],
-	nodeExtent: infiniteExtent,
-	elevateNodesOnSelect: !0,
-	defaults: {},
-	zIndexMode: "basic"
-};
-function isManualZIndexMode(zIndexMode) {
-	return zIndexMode === "manual";
-}
-const adoptUserNodesDefaultOptions = {
-	...defaultOptions,
-	checkEquality: !0
-};
-function mergeObjects(base, incoming) {
-	let result = { ...base };
-	for (let key in incoming) incoming[key] !== void 0 && (result[key] = incoming[key]);
-	return result;
-}
-function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
-	let _options = mergeObjects(adoptUserNodesDefaultOptions, options), nodesInitialized = nodes.length > 0, rootParentIndex = { i: 0 }, tmpLookup = new Map(nodeLookup), selectedNodeZ = _options?.elevateNodesOnSelect && !isManualZIndexMode(_options.zIndexMode) ? SELECTED_NODE_Z : 0;
-	nodeLookup.clear(), parentLookup.clear();
-	for (let userNode of nodes) {
-		let internalNode = tmpLookup.get(userNode.id);
-		if (_options.checkEquality && userNode === internalNode?.internals.userNode) nodeLookup.set(userNode.id, internalNode);
-		else {
-			let positionWithOrigin = getNodePositionWithOrigin(userNode, _options.nodeOrigin), extent = isCoordinateExtent(userNode.extent) ? userNode.extent : _options.nodeExtent, clampedPosition = clampPosition(positionWithOrigin, extent, getNodeDimensions(userNode));
-			internalNode = {
-				..._options.defaults,
-				...userNode,
-				measured: {
-					width: userNode.measured?.width,
-					height: userNode.measured?.height
-				},
-				internals: {
-					positionAbsolute: clampedPosition,
-					handleBounds: userNode.measured ? internalNode?.internals.handleBounds : void 0,
-					z: calculateZ(userNode, selectedNodeZ, _options.zIndexMode),
-					userNode
-				}
-			}, nodeLookup.set(userNode.id, internalNode);
-		}
-		(internalNode.measured === void 0 || internalNode.measured.width === void 0 || internalNode.measured.height === void 0) && !internalNode.hidden && (nodesInitialized = !1), userNode.parentId && updateChildNode(internalNode, nodeLookup, parentLookup, options, rootParentIndex);
-	}
-	return nodesInitialized;
-}
-function updateParentLookup(node, parentLookup) {
-	if (!node.parentId) return;
-	let childNodes = parentLookup.get(node.parentId);
-	childNodes ? childNodes.set(node.id, node) : parentLookup.set(node.parentId, /* @__PURE__ */ new Map([[node.id, node]]));
-}
+//#region src/core/projections/layoutedEdges.ts
 /**
-* Updates positionAbsolute and zIndex of a child node and the parentLookup.
+* Edge layout join: user edges × internal nodes → screen-space edge geometry,
+* decomposed into SUB-STORES (spike 13): each edge is its own keyed
+* projection holding `{ row }` — the layouted row, or null while the edge
+* produces none (missing/unready endpoints, culled) — and the public record
+* is a SHALLOW projection holding the PRESENT rows' proxies by reference.
+*
+* Reads chain: `record[id].sourceX` goes through the shallow slot into the
+* edge's own store, so every materialized leaf signal hangs off its EDGE's
+* computed (defeating rc.1's per-update companion walk — see
+* internalNodes.ts). The edge projection tracks exactly what the join reads —
+* the edge's props and its endpoints' geometry leaves through nodeLookup
+* (which chains into the node row stores) — so one node move re-runs only
+* the adjacent edges' projections; the record computed re-runs only when
+* membership or presence changes.
+*
+* The viewport participates only while onlyRenderVisibleElements is active —
+* panning must not touch edge rows otherwise.
+*
+* Rows whose endpoints are missing or unmeasured simply drop out of the
+* record — the same "no entry" contract the ReactiveMap pipeline had.
 */
-function updateChildNode(node, nodeLookup, parentLookup, options, rootParentIndex) {
-	let { elevateNodesOnSelect, nodeOrigin, nodeExtent, zIndexMode } = mergeObjects(defaultOptions, options), parentId = node.parentId, parentNode = nodeLookup.get(parentId);
-	if (!parentNode) return;
-	updateParentLookup(node, parentLookup), rootParentIndex && !parentNode.parentId && parentNode.internals.rootParentIndex === void 0 && zIndexMode === "auto" && (parentNode.internals.rootParentIndex = ++rootParentIndex.i, parentNode.internals.z = parentNode.internals.z + rootParentIndex.i * 10), rootParentIndex && parentNode.internals.rootParentIndex !== void 0 && (rootParentIndex.i = parentNode.internals.rootParentIndex);
-	let { x, y, z } = calculateChildXYZ(node, parentNode, nodeOrigin, nodeExtent, elevateNodesOnSelect && !isManualZIndexMode(zIndexMode) ? SELECTED_NODE_Z : 0, zIndexMode), { positionAbsolute } = node.internals, positionChanged = x !== positionAbsolute.x || y !== positionAbsolute.y;
-	(positionChanged || z !== node.internals.z) && nodeLookup.set(node.id, {
-		...node,
-		internals: {
-			...node.internals,
-			positionAbsolute: positionChanged ? {
-				x,
-				y
-			} : positionAbsolute,
-			z
+const createLayoutedEdges = (source) => {
+	let rowStores = mapArray(() => source.edges, (edgeAccessor) => ({
+		id: edgeAccessor().id,
+		store: createProjection(() => {
+			let edge = edgeAccessor(), row = buildRow(source, edge);
+			return source.nodeLookup.get(edge.source)?.internals.handleBounds, source.nodeLookup.get(edge.target)?.internals.handleBounds, { row };
+		}, { row: null }, { key: "id" })
+	}), { keyed: (edge) => edge.id }), assigned = /* @__PURE__ */ new Map();
+	return createProjection((draft) => {
+		let seen = /* @__PURE__ */ new Set();
+		for (let { id, store } of rowStores()) {
+			let row = store.row;
+			row && (seen.add(id), assigned.get(id) !== row && (assigned.set(id, row), draft[id] = row));
 		}
+		for (let id of assigned.keys()) seen.has(id) || (assigned.delete(id), delete draft[id]);
+	}, {}, {
+		key: null,
+		shallow: !0
 	});
-}
-function calculateZ(node, selectedNodeZ, zIndexMode) {
-	let zIndex = isNumeric(node.zIndex) ? node.zIndex : 0;
-	return isManualZIndexMode(zIndexMode) ? zIndex : zIndex + (node.selected ? selectedNodeZ : 0);
-}
-function calculateChildXYZ(childNode, parentNode, nodeOrigin, nodeExtent, selectedNodeZ, zIndexMode) {
-	let { x: parentX, y: parentY } = parentNode.internals.positionAbsolute, childDimensions = getNodeDimensions(childNode), positionWithOrigin = getNodePositionWithOrigin(childNode, nodeOrigin), clampedPosition = isCoordinateExtent(childNode.extent) ? clampPosition(positionWithOrigin, childNode.extent, childDimensions) : positionWithOrigin, absolutePosition = clampPosition({
-		x: parentX + clampedPosition.x,
-		y: parentY + clampedPosition.y
-	}, nodeExtent, childDimensions);
-	childNode.extent === "parent" && (absolutePosition = clampPositionToParent(absolutePosition, childDimensions, parentNode));
-	let childZ = calculateZ(childNode, selectedNodeZ, zIndexMode), parentZ = parentNode.internals.z ?? 0;
-	return {
-		x: absolutePosition.x,
-		y: absolutePosition.y,
-		z: parentZ >= childZ ? parentZ + 1 : childZ
-	};
-}
-/**
-* this function adds the connection to the connectionLookup
-* at the following keys: nodeId-type-handleId, nodeId-type and nodeId
-* @param type type of the connection
-* @param connection connection that should be added to the lookup
-* @param connectionKey at which key the connection should be added
-* @param connectionLookup reference to the connection lookup
-* @param nodeId nodeId of the connection
-* @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));
-	}
-}
-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));
-	}
-}
-//#endregion
-//#region src/data/createSolidFlow.tsx
-const InitialNodeTypesMap = {
-	input: InputNode,
-	output: OutputNode,
-	default: DefaultNode,
-	group: GroupNode
-}, InitialEdgeTypesMap = {
-	straight: StraightEdgeInternal,
-	smoothstep: SmoothStepEdgeInternal,
-	default: BezierEdgeInternal,
-	step: StepEdgeInternal
-}, getInitialViewport = (_nodesInitialized, fitView, initialViewport, width, height, nodeLookup) => {
+}, buildRow = (source, edge) => {
+	let sourceNode = source.nodeLookup.get(edge.source), targetNode = source.nodeLookup.get(edge.target);
+	if (!sourceNode || !targetNode) return source.nodeLookup.size, null;
+	if (source.onlyRenderVisibleElements && !isEdgeVisible({
+		sourceNode,
+		targetNode,
+		width: source.width ?? 0,
+		height: source.height ?? 0,
+		transform: source.transform
+	})) return null;
+	let edgePosition = getEdgePosition({
+		id: edge.id,
+		sourceNode,
+		targetNode,
+		sourceHandle: edge.sourceHandle || null,
+		targetHandle: edge.targetHandle || null,
+		connectionMode: source.connectionMode,
+		onError: source.onError
+	});
+	return edgePosition ? {
+		...source.defaultEdgeOptions,
+		...edge,
+		...edgePosition,
+		zIndex: getElevatedEdgeZIndex({
+			selected: edge.selected,
+			zIndex: edge.zIndex ?? source.defaultEdgeOptions.zIndex,
+			sourceNode,
+			targetNode,
+			elevateOnSelect: source.elevateEdgesOnSelect,
+			zIndexMode: source.zIndexMode
+		}),
+		sourceNode,
+		targetNode,
+		edge
+	} : null;
+}, createParentIds = (source) => createProjection(() => {
+	let out = {};
+	for (let node of source.nodes) node.parentId && (out[node.parentId] = !0);
+	return out;
+}, {}, { key: "id" }), getInitialViewport = (fitView, initialViewport, width, height, nodeLookup) => {
 	if (fitView && !initialViewport && width && height) {
 		let bounds = getInternalNodesBounds(nodeLookup, { filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight)) });
 		return getViewportForBounds$1(bounds, width, height, .5, 2, .1);
@@ -917,23 +669,44 @@ const InitialNodeTypesMap = {
 		y: 0,
 		zoom: 1
 	};
-}, createSolidFlow = (props) => {
-	let _props = mergeProps(getDefaultFlowStateProps(), props), nodeLookup = new ReactiveMap(), parentLookup = new ReactiveMap(), edgeLookup = new ReactiveMap(), connectionLookup = new ReactiveMap(), layoutedEdgesMap = new ReactiveMap(), startNodesInitialized = batch(() => 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
+}, createFlowState = (props, injections = {}) => {
+	let _props = merge(getDefaultFlowStateProps(), props), initialNodeTypes = injections.initialNodeTypes ?? {}, initialEdgeTypes = injections.initialEdgeTypes ?? {}, prefersDark = injections.prefersDark ?? (() => _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), [measurementsStore, setMeasurementsStore] = createStore({}), internalNodes = createInternalNodes({
+		get nodes() {
+			return nodesStore;
+		},
+		get measurements() {
+			return measurementsStore;
+		},
+		get nodeOrigin() {
+			return config().nodeOrigin;
+		},
+		get nodeExtent() {
+			return config().nodeExtent;
+		},
+		get elevateNodesOnSelect() {
+			return config().elevateNodesOnSelect;
+		},
+		get zIndexMode() {
+			return config().zIndexMode;
+		}
+	}), nodeLookup = new RecordMapFacade(internalNodes), initialViewport = getInitialViewport(_props.fitView, _props.initialViewport, _props.width ?? 0, _props.height ?? 0, nodeLookup), [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({
+	}), store = merge({
 		width: 0,
 		height: 0
 	}, config, {
@@ -962,7 +735,7 @@ const InitialNodeTypesMap = {
 			return clickConnectStartHandle();
 		},
 		get colorMode() {
-			return this._colorMode === "system" ? mediaPrefersDark() ? "dark" : "light" : this._colorMode;
+			return this._colorMode === "system" ? prefersDark() ? "dark" : "light" : this._colorMode;
 		},
 		get connection() {
 			let state = connection();
@@ -979,7 +752,7 @@ const InitialNodeTypesMap = {
 		},
 		get edgeTypes() {
 			return {
-				...InitialEdgeTypesMap,
+				...initialEdgeTypes,
 				...this._edgeTypes
 			};
 		},
@@ -1001,8 +774,11 @@ const InitialNodeTypesMap = {
 		get minZoom() {
 			return minZoom();
 		},
+		get edges() {
+			return edgesStore;
+		},
 		get nodes() {
-			return nodesMemo.get();
+			return nodesStore;
 		},
 		get nodesConnectable() {
 			return nodesConnectable();
@@ -1012,7 +788,7 @@ const InitialNodeTypesMap = {
 		},
 		get nodeTypes() {
 			return {
-				...InitialNodeTypesMap,
+				...initialNodeTypes,
 				...this._nodeTypes
 			};
 		},
@@ -1020,10 +796,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();
@@ -1035,7 +811,7 @@ const InitialNodeTypesMap = {
 			return snapGrid();
 		},
 		get viewport() {
-			return viewportMemo.get();
+			return viewportStore;
 		},
 		get viewportInitialized() {
 			return panZoom() !== null;
@@ -1076,7 +852,45 @@ const InitialNodeTypesMap = {
 		get zoomActivationKeyPressed() {
 			return zoomActivationKeyPressed();
 		}
-	}), visibleNodesMap = createMemo(() => nodeLookup), visibleNodeIds = createMemo(() => Array.from(visibleNodesMap().values()).map((edge) => edge.id)), visibleEdgeIds = createMemo(() => Array.from(layoutedEdgesMap.values()).map((edge) => edge.id)), getEdge = (id) => layoutedEdgesMap.get(id), fitView = async (options) => store.panZoom ? await fitViewport({
+	}), visibleNodesMap = createMemo(() => nodeLookup), visibleNodeIds = createMemo(() => Object.keys(internalNodes)), parentIds = createParentIds({ get nodes() {
+		return store.nodes;
+	} }), edgeLookup = createEdgeLookup({ get edges() {
+		return store.edges;
+	} }), connections = createConnections({ get edges() {
+		return store.edges;
+	} }), layoutedEdges = createLayoutedEdges({
+		get edges() {
+			return store.edges;
+		},
+		get connectionMode() {
+			return store.connectionMode;
+		},
+		get defaultEdgeOptions() {
+			return store.defaultEdgeOptions;
+		},
+		get elevateEdgesOnSelect() {
+			return store.elevateEdgesOnSelect;
+		},
+		get zIndexMode() {
+			return store.zIndexMode;
+		},
+		get onlyRenderVisibleElements() {
+			return store.onlyRenderVisibleElements;
+		},
+		get width() {
+			return store.width;
+		},
+		get height() {
+			return store.height;
+		},
+		get transform() {
+			return store.transform;
+		},
+		get onError() {
+			return store.onError;
+		},
+		nodeLookup
+	}), visibleEdgeIds = createMemo(() => Object.keys(layoutedEdges)), getEdge = (id) => layoutedEdges[id], fitView = async (options) => store.panZoom ? await fitViewport({
 		nodes: nodeLookup,
 		width: store.width,
 		height: store.height,
@@ -1084,55 +898,54 @@ 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;
-		}));
-	}, 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);
-				if (!updatedInternals) return;
-				updateAbsolutePositions(nodeLookup, parentLookup, {
-					nodeOrigin: store.nodeOrigin,
-					nodeExtent: store.nodeExtent,
-					zIndexMode: store.zIndexMode
-				});
-				let nodeToChange = changes.reduce((acc, change) => {
-					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;
-					}
-				})), initialNodesMeasured = !0, tryInitialFitView();
-			});
+		setNodesStore((nodes) => {
+			for (let node of nodes) nodeDragItems.has(node.id) && (node.dragging = dragging, node.position = nodeDragItems.get(node.id).position);
+		});
+	}, applyMeasurementWrites = (writes) => {
+		setMeasurementsStore((draft) => {
+			for (let write of writes) if (write.hidden) {
+				let entry = draft[write.id];
+				entry && (entry.handleBounds = void 0);
+			} else draft[write.id] = {
+				measured: write.measured,
+				handleBounds: write.handleBounds
+			};
 		});
+	}, applyNodeChanges = (changes) => {
+		changes.length !== 0 && setNodesStore((nodes) => {
+			let nodeById = new Map(nodes.map((node) => [node.id, node]));
+			for (let change of changes) {
+				let node = nodeById.get(change.id);
+				if (node) 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;
+				}
+			}
+		});
+	}, markInitialNodesMeasured = () => {
+		initialNodesMeasured = !0, tryInitialFitView();
+	}, requestMeasure = () => {}, setMeasureRequester = (fn) => {
+		requestMeasure = fn;
 	}, 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;
 		return currentPanZoom ? (await currentPanZoom.setViewport({
@@ -1148,232 +961,876 @@ 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);
+		}), flush();
 	}, 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: [] });
+		let isMultiSelection = store.multiselectionKeyPressed;
+		setNodesStore((nodes) => {
+			for (let node of nodes) {
+				let nodeWillBeSelected = ids.includes(node.id), selected = isMultiSelection && node.selected || nodeWillBeSelected;
+				node.selected !== selected && (node.selected = selected);
+			}
+		}), isMultiSelection || unselectNodesAndEdges({ nodes: [] }), flush();
 	}, 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: [] });
-	};
-	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(() => {
-			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
-			}, updatedNodeInternals = {
-				...userNode,
-				measured: preservedMeasured,
-				internals: {
-					positionAbsolute: clampedPosition,
-					handleBounds: !userNode.measured && !internalNode?.measured ? void 0 : internalNode?.internals.handleBounds,
-					z: calculateZ(userNode, selectedNodeZ, store.zIndexMode),
-					userNode
+		let isMultiSelection = store.multiselectionKeyPressed;
+		setEdgesStore((edges) => {
+			for (let edge of edges) {
+				let edgeWillBeSelected = ids.includes(edge.id), selected = isMultiSelection && edge.selected || edgeWillBeSelected;
+				edge.selected !== selected && (edge.selected = selected);
+			}
+		}), isMultiSelection || unselectNodesAndEdges({ edges: [] }), flush();
+	}, handleNodeSelection = (id, unselect, nodeRef) => {
+		let node = store.nodes.find((n) => n.id === id);
+		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[id];
+		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]));
+	}, moveSelectedNodes = (direction, factor) => {
+		let nodeUpdates = /* @__PURE__ */ new Map(), xVelo = store.snapGrid?.[0] ?? 5, yVelo = store.snapGrid?.[1] ?? 5, xDiff = direction.x * xVelo * factor, yDiff = direction.y * yVelo * factor;
+		for (let node of nodeLookup.values()) {
+			if (!(node.selected && (node.draggable || store.nodesDraggable && node.draggable === void 0))) continue;
+			let nextPosition = {
+				x: node.internals.positionAbsolute.x + xDiff,
+				y: node.internals.positionAbsolute.y + yDiff
+			};
+			store.snapGrid && (nextPosition = snapPosition(nextPosition, store.snapGrid));
+			let { position } = calculateNodePosition({
+				nodeId: node.id,
+				nextPosition,
+				nodeLookup,
+				nodeExtent: store.nodeExtent,
+				nodeOrigin: store.nodeOrigin,
+				onError: store.onError
+			});
+			nodeUpdates.set(node.id, { position });
+		}
+		updateNodePositions(nodeUpdates);
+	}, panBy$1 = (delta) => panBy({
+		delta,
+		panZoom: store.panZoom,
+		transform: store.transform,
+		translateExtent: store.translateExtent,
+		width: store.width,
+		height: store.height
+	}), cancelConnection = () => {
+		setConnection({ ...initialConnection });
+	}, reset = () => {
+		resetStoreValues(), unselectNodesAndEdges();
+	}, flow = {
+		get nodes() {
+			return store.nodes;
+		},
+		get edges() {
+			return store.edges;
+		},
+		get internalNodes() {
+			return internalNodes;
+		},
+		get layoutedEdges() {
+			return layoutedEdges;
+		},
+		get connections() {
+			return connections;
+		},
+		selection: {
+			get nodes() {
+				return store.selectedNodes;
+			},
+			get edges() {
+				return store.selectedEdges;
+			}
+		},
+		get nodesInitialized() {
+			return store.nodesInitialized;
+		},
+		get viewportInitialized() {
+			return store.viewportInitialized;
+		},
+		get viewport() {
+			return store.viewport;
+		},
+		get width() {
+			return store.width;
+		},
+		get height() {
+			return store.height;
+		},
+		get colorMode() {
+			return store.colorMode;
+		},
+		get connection() {
+			return store.connection;
+		},
+		get dragging() {
+			return store.dragging;
+		},
+		get minZoom() {
+			return store.minZoom;
+		},
+		get maxZoom() {
+			return store.maxZoom;
+		},
+		get nodesDraggable() {
+			return store.nodesDraggable;
+		},
+		get nodesConnectable() {
+			return store.nodesConnectable;
+		},
+		get elementsSelectable() {
+			return store.elementsSelectable;
+		},
+		get snapGrid() {
+			return store.snapGrid;
+		}
+	}, getNodeRect = (node) => {
+		let nodeToUse = isNode(node) ? node : nodeLookup.get(node.id), position = nodeToUse.parentId ? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.measured, nodeToUse.parentId, nodeLookup, store.nodeOrigin) : nodeToUse.position, nodeWithPosition = {
+			...nodeToUse,
+			position,
+			width: nodeToUse.measured?.width ?? nodeToUse.width,
+			height: nodeToUse.measured?.height ?? nodeToUse.height
+		};
+		return nodeToRect(nodeWithPosition);
+	}, updateNode = (id, nodeUpdate, options = { replace: !1 }) => {
+		setNodesStore((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
+			};
+		});
+	}, commands = {
+		fitView,
+		fitBounds: async (bounds, options) => {
+			if (!store.panZoom) return !1;
+			let viewport = getViewportForBounds$1(bounds, store.width, store.height, store.minZoom, store.maxZoom, options?.padding ?? .1);
+			return await store.panZoom.setViewport(viewport, {
+				duration: options?.duration,
+				ease: options?.ease,
+				interpolate: options?.interpolate
+			}), !0;
+		},
+		zoomIn,
+		zoomOut,
+		setZoom: (zoomLevel, options) => {
+			let currentPanZoom = store.panZoom;
+			return currentPanZoom ? currentPanZoom.scaleTo(zoomLevel, { duration: options?.duration }) : Promise.resolve(!1);
+		},
+		setCenter,
+		setViewport: async (nextViewport, options) => {
+			let currentViewport = store.viewport;
+			return store.panZoom ? (await store.panZoom.setViewport({
+				x: nextViewport.x ?? currentViewport.x,
+				y: nextViewport.y ?? currentViewport.y,
+				zoom: nextViewport.zoom ?? currentViewport.zoom
+			}, options), !0) : !1;
+		},
+		panBy: panBy$1,
+		screenToFlowPosition: (position, options = { snapToGrid: !0 }) => {
+			if (!store.domNode) return position;
+			let _snapGrid = options.snapToGrid ? store.snapGrid : !1, { x, y, zoom } = store.viewport, { x: domX, y: domY } = store.domNode.getBoundingClientRect(), correctedPosition = {
+				x: position.x - domX,
+				y: position.y - domY
+			};
+			return pointToRendererPoint(correctedPosition, [
+				x,
+				y,
+				zoom
+			], _snapGrid !== null, _snapGrid || [1, 1]);
+		},
+		flowToScreenPosition: (position) => {
+			if (!store.domNode) return position;
+			let { x, y, zoom } = store.viewport, { x: domX, y: domY } = store.domNode.getBoundingClientRect(), rendererPosition = rendererPointToPoint(position, [
+				x,
+				y,
+				zoom
+			]);
+			return {
+				x: rendererPosition.x + domX,
+				y: rendererPosition.y + domY
+			};
+		},
+		addNodes: (payload) => {
+			let newNodes = Array.isArray(payload) ? payload : [payload];
+			setNodesStore((nodes) => [...nodes, ...newNodes]);
+		},
+		addEdges: (payload) => {
+			let newEdges = Array.isArray(payload) ? payload : [payload];
+			setEdgesStore((edges) => [...edges, ...newEdges]);
+		},
+		setNodes: setNodesStore,
+		setEdges: setEdgesStore,
+		updateNode,
+		updateNodeData: (id, dataUpdate, options) => {
+			let node = nodeLookup.get(id)?.internals.userNode;
+			if (!node) return;
+			let nextData = typeof dataUpdate == "function" ? dataUpdate(node) : dataUpdate;
+			updateNode(id, (current) => ({
+				...current,
+				data: options?.replace ? nextData : {
+					...current.data,
+					...nextData
+				}
+			}));
+		},
+		updateEdge: (id, edgeUpdate, options = { replace: !1 }) => {
+			setEdgesStore((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
+				};
+			});
+		},
+		deleteElements: async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [] }) => {
+			let { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
+				nodesToRemove,
+				edgesToRemove,
+				nodes: store.nodes,
+				edges: store.edges,
+				onBeforeDelete: store.onBeforeDelete
+			});
+			if (matchingEdges) {
+				let remainingEdges = store.edges.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id));
+				store.onEdgesDelete?.(matchingEdges), setEdgesStore(() => remainingEdges);
+			}
+			if (matchingNodes) {
+				let remainingNodes = store.nodes.filter((node) => !matchingNodes.some(({ id }) => id === node.id));
+				store.onNodesDelete?.(matchingNodes), setNodesStore(() => remainingNodes);
+			}
+			return {
+				deletedNodes: matchingNodes,
+				deletedEdges: matchingEdges
+			};
+		},
+		getIntersectingNodes: (nodeOrRect, partially = !0, nodesToIntersect) => {
+			let isRect = isRectObject(nodeOrRect), nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
+			return nodeRect ? (nodesToIntersect || store.nodes).filter((n) => {
+				let internalNode = nodeLookup.get(n.id);
+				if (!internalNode || !isRect && n.id === nodeOrRect.id) return !1;
+				let currNodeRect = nodeToRect(internalNode), overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
+				return partially && overlappingArea > 0 || overlappingArea >= nodeRect.width * nodeRect.height;
+			}) : [];
+		},
+		isNodeIntersecting: (nodeOrRect, area, partially = !0) => {
+			let nodeRect = isRectObject(nodeOrRect) ? nodeOrRect : getNodeRect(nodeOrRect);
+			if (!nodeRect) return !1;
+			let overlappingArea = getOverlappingArea(nodeRect, area);
+			return partially && overlappingArea > 0 || overlappingArea >= nodeRect.width * nodeRect.height;
+		},
+		getNodesBounds: (nodesToMeasure) => getNodesBounds$1(nodesToMeasure, {
+			nodeLookup,
+			nodeOrigin: store.nodeOrigin
+		}),
+		updateNodeInternals: (id) => {
+			let updateIds = Array.isArray(id) ? id : [id], updates = [];
+			for (let updateId of updateIds) {
+				let nodeElement = store.domNode?.querySelector(`.solid-flow__node[data-id="${updateId}"]`);
+				nodeElement && updates.push([updateId, {
+					id: updateId,
+					nodeElement,
+					force: !0
+				}]);
+			}
+			requestMeasure(updates);
+		},
+		toObject: () => structuredClone({
+			nodes: [...snapshot(store.nodes)],
+			edges: [...snapshot(store.edges)],
+			viewport: { ...snapshot(store.viewport) }
+		})
+	};
+	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);
+	}), createEffect(() => new Set(store.nodes.map((n) => n.id)), (currentIds) => {
+		setMeasurementsStore((draft) => {
+			for (let id of Object.keys(draft)) currentIds.has(id) || delete draft[id];
+		});
+	}), {
+		store,
+		flow,
+		commands,
+		internalNodes,
+		layoutedEdges,
+		nodeLookup,
+		edgeLookup,
+		parentIds,
+		connections,
+		actions: {
+			getEdge,
+			applyInitialFitView,
+			applyMeasurementWrites,
+			applyNodeChanges,
+			markInitialNodesMeasured,
+			setMeasureRequester,
+			resetStoreValues,
+			setAriaLabelConfig,
+			setAriaLiveMessage,
+			setClickConnectStartHandle,
+			setConfig,
+			setConnection,
+			setDeleteKeyPressed,
+			setDomNode,
+			setDragging,
+			get setEdges() {
+				return setEdgesStore;
+			},
+			setElementsSelectable,
+			setHeight,
+			setMultiselectionKeyPressed,
+			get setNodes() {
+				return setNodesStore;
+			},
+			setNodesConnectable,
+			setNodesDraggable,
+			setPanActivationKeyPressed,
+			setPanZoom,
+			setSelectionKeyPressed,
+			setSelectionRect,
+			setSelectionRectMode,
+			get setViewport() {
+				return (viewport) => setViewportStore(() => viewport);
+			},
+			setWidth,
+			setZoomActivationKeyPressed,
+			addEdge,
+			updateNodePositions,
+			zoomIn,
+			zoomOut,
+			fitView,
+			setCenter,
+			setPaneClickDistance,
+			unselectNodesAndEdges,
+			addSelectedNodes,
+			addSelectedEdges,
+			handleNodeSelection,
+			handleEdgeSelection,
+			moveSelectedNodes,
+			panBy: panBy$1,
+			cancelConnection,
+			reset
+		}
+	};
+}, getEdgeId = (connection) => {
+	let { source, sourceHandle, target, targetHandle } = connection;
+	return `xy-edge__${source}${sourceHandle || ""}-${target}${targetHandle || ""}`;
+}, 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");
+	return ctx;
+}
+//#endregion
+//#region src/components/graph/handle/Handle.tsx
+const Handle = (props) => {
+	let _props = propDefaults(props, {
+		type: "source",
+		position: "top",
+		isConnectableStart: !0,
+		isConnectableEnd: !0
+	}), { store, nodeLookup, connections, 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 (!_props.onConnect && !_props.onDisconnect) return null;
+		let rec = connections[connectionKey(nodeId(), _props.type, _props.id)], map = /* @__PURE__ */ new Map();
+		for (let key of Object.keys(rec ?? {})) map.set(key, { ...rec[key] });
+		return { connections: map };
+	}, (current) => {
+		if (!current) return;
+		let { connections: next } = current;
+		prevConnections && !areConnectionMapsEqual(next, prevConnections) && (handleConnectionChange(prevConnections, next, props.onDisconnect), handleConnectionChange(next, prevConnections, props.onConnect)), prevConnections = next;
+	});
+	let onConnectExtended = (connection) => {
+		let handleConnection = {
+			...connection,
+			id: getEdgeId(connection)
+		}, edge = store.onBeforeConnect?.(handleConnection) ?? handleConnection;
+		actions.addEdge(edge), store.onConnect?.(handleConnection);
+	}, onPointerDown = (event) => {
+		XYHandle.onPointerDown(event, {
+			handleId: handleId(),
+			nodeId: nodeId(),
+			isTarget: isTarget(),
+			connectionRadius: store.connectionRadius,
+			domNode: store.domNode,
+			nodeLookup,
+			connectionMode: store.connectionMode,
+			lib: store.lib,
+			autoPanOnConnect: store.autoPanOnConnect,
+			flowId: store.id,
+			isValidConnection: _props.isValidConnection ?? store.isValidConnection,
+			updateConnection: ((connection) => {
+				actions.setConnection(connection), flush();
+			}),
+			cancelConnection: actions.cancelConnection,
+			panBy: actions.panBy,
+			onConnect: onConnectExtended,
+			onConnectStart: (event, startParams) => {
+				store.onConnectStart?.(event, {
+					nodeId: startParams.nodeId,
+					handleId: startParams.handleId,
+					handleType: startParams.handleType
+				});
+			},
+			onConnectEnd: store.onConnectEnd,
+			getTransform: () => store.transform,
+			getFromHandle: () => store.connection.fromHandle,
+			autoPanSpeed: store.autoPanSpeed,
+			dragThreshold: store.connectionDragThreshold,
+			handleDomNode: event.currentTarget
+		});
+	}, onClick = (event) => {
+		if (!nodeId() || !store.clickConnectStartHandle && !_props.isConnectableStart) return;
+		if (!store.clickConnectStartHandle) {
+			store.onClickConnectStart?.(event, {
+				nodeId: nodeId(),
+				handleId: handleId(),
+				handleType: _props.type
+			}), actions.setClickConnectStartHandle({
+				nodeId: nodeId(),
+				type: _props.type,
+				id: handleId()
+			});
+			return;
+		}
+		let doc = getHostForElement(event.target), isValidConnectionHandler = _props.isValidConnection ?? store.isValidConnection, { connection, isValid } = XYHandle.isValid(event, {
+			handle: {
+				nodeId: nodeId(),
+				id: handleId(),
+				type: _props.type
+			},
+			connectionMode: store.connectionMode,
+			fromNodeId: store.clickConnectStartHandle.nodeId,
+			fromHandleId: store.clickConnectStartHandle.id ?? null,
+			fromType: store.clickConnectStartHandle.type,
+			isValidConnection: isValidConnectionHandler,
+			flowId: store.id,
+			doc,
+			lib: store.lib,
+			nodeLookup
+		});
+		isValid && connection && onConnectExtended(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 ? _props.isConnectableEnd : _props.isConnectableStart);
+	return <div {...rest} role="button" aria-label={store.ariaLabelConfig["handle.ariaLabel"]} tabindex={-1} data-handleid={handleId()} data-nodeid={nodeId()} data-handlepos={_props.position} data-id={`${store.id}-${nodeId()}-${_props.id || null}-${_props.type}`} onClick={store.clickConnect ? onClick : void 0} onPointerDown={onPointerDown} style={_props.style} class={[
+		"solid-flow__handle",
+		`solid-flow__handle-${_props.position}`,
+		store.noDragClass,
+		store.noPanClass,
+		_props.class,
+		{
+			valid: valid(),
+			connectingto: !!connectingTo(),
+			connectingfrom: !!connectingFrom(),
+			source: !isTarget(),
+			target: isTarget(),
+			connectablestart: _props.isConnectableStart,
+			connectableend: _props.isConnectableEnd,
+			connectable: !!connectable(),
+			connectionindicator: connectionIndicator()
+		}
+	]}>
+      {_props.children}
+    </div>;
+}, DefaultNode = (props) => {
+	let _props = propDefaults(props, {
+		targetPosition: Position$1.Top,
+		sourcePosition: Position$1.Bottom
+	});
+	return <>
+      <Handle type="target" position={_props.targetPosition} isConnectable={_props.isConnectable} />
+      {props.data.label}
+      <Handle type="source" position={_props.sourcePosition} isConnectable={_props.isConnectable} />
+    </>;
+}, GroupNode = (props) => <div style={{
+	position: "absolute",
+	left: 0,
+	top: 0,
+	width: toPxString(props.width),
+	height: toPxString(props.height)
+}} />, InputNode = (props) => {
+	let _props = propDefaults(props, { sourcePosition: Position$1.Bottom });
+	return <>
+      {props.data?.label}
+      <Handle type="source" position={_props.sourcePosition} isConnectable={_props.isConnectable} />
+    </>;
+}, createDraggable = (elem, params) => {
+	let { store, nodeLookup, actions } = useInternalSolidFlow(), [dragging, setDragging] = createSignal(!1);
+	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);
+			},
+			onDragStop: (event, dragItems, node, nodes) => {
+				setDragging(!1), onDragStop?.(event, dragItems, node, nodes);
+			},
+			onNodeMouseDown,
+			getStoreItems: () => ({
+				nodes: store.nodes,
+				nodeLookup,
+				edges: store.edges,
+				nodeExtent: store.nodeExtent,
+				snapGrid: store.snapGrid ?? [0, 0],
+				snapToGrid: !!store.snapGrid,
+				autoPanSpeed: store.autoPanSpeed,
+				nodeOrigin: store.nodeOrigin,
+				multiSelectionActive: store.multiselectionKeyPressed,
+				domNode: store.domNode,
+				transform: store.transform,
+				autoPanOnNodeDrag: store.autoPanOnNodeDrag,
+				nodesDraggable: store.nodesDraggable,
+				selectNodesOnDrag: store.selectNodesOnDrag,
+				nodeDragThreshold: store.nodeDragThreshold,
+				unselectNodesAndEdges: actions.unselectNodesAndEdges,
+				updateNodePositions: actions.updateNodePositions,
+				panBy: actions.panBy
+			})
+		});
+		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(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");
+	return ctx;
+}
+//#endregion
+//#region src/components/graph/node/NodeWrapper.tsx
+const NodeWrapper = (props) => {
+	let { store, nodeLookup, parentIds, 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 = () => !!parentIds[node().id], transform = () => {
+		let { x, y } = node().internals.positionAbsolute;
+		return `translate(${x}px, ${y}px)`;
+	}, sizeStyle = () => {
+		let w = node().width ?? node().initialWidth, h = node().height ?? node().initialHeight;
+		return {
+			...node().style,
+			...w ? { width: toPxString(w) } : {},
+			...h ? { height: toPxString(h) } : {}
+		};
+	}, style = () => ({
+		"z-index": node().internals.z,
+		transform: transform(),
+		visibility: nodeHasDimensions(node()) ? "visible" : "hidden",
+		...sizeStyle(),
+		...node().style ?? {}
+	});
+	createEffect(() => ({
+		valid: nodeTypeValid(),
+		nodeType: nodeType()
+	}), ({ valid, nodeType }) => {}), createEffect(() => ({
+		id: node().id,
+		nodeElement: nodeRef(),
+		nodeType: nodeType(),
+		sourcePosition: node().sourcePosition,
+		targetPosition: node().targetPosition
+	}), (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?.({
+			node: userNode(),
+			event
+		});
+	}, onKeyDown = (event) => {
+		if (isInputDOMNode(event) || store.disableKeyboardA11y) return;
+		if (elementSelectionKeys.includes(event.key) && selectable()) {
+			actions.handleNodeSelection(node().id, event.key === "Escape", nodeRef());
+			return;
+		}
+		let arrowKeyDiff = ARROW_KEY_DIFFS[event.key];
+		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;
+		getNodesInside(/* @__PURE__ */ new Map([[node().id, node()]]), {
+			x: 0,
+			y: 0,
+			width,
+			height
+		}, [
+			viewport.x,
+			viewport.y,
+			viewport.zoom
+		], !0).length > 0 || actions.setCenter(node().position.x + (node().measured.width ?? 0) / 2, node().position.y + (node().measured.height ?? 0) / 2, { zoom: viewport.zoom });
+	}, dragging = createDraggable(nodeRef, () => ({
+		nodeId: node().id,
+		isSelectable: selectable(),
+		disabled: !draggable(),
+		handleSelector: node().dragHandle,
+		noDragClass: store.noDragClass,
+		nodeClickDistance: props.nodeClickDistance,
+		onNodeMouseDown: actions.handleNodeSelection,
+		onDrag: (event, _, targetNode, nodes) => {
+			props.onNodeDrag?.({
+				event,
+				targetNode,
+				nodes
+			});
+		},
+		onDragStart: (event, _, targetNode, nodes) => {
+			props.onNodeDragStart?.({
+				event,
+				targetNode,
+				nodes
+			});
+		},
+		onDragStop: (event, _, targetNode, nodes) => {
+			props.onNodeDragStop?.({
+				event,
+				targetNode,
+				nodes
+			});
+		}
+	}));
+	return <Show when={!node().hidden}>
+      <div ref={setNodeRef} data-id={node().id} class={[
+		"solid-flow__node",
+		`solid-flow__node-${nodeType()}`,
+		{
+			connectable: !!connectable(),
+			draggable: !!draggable(),
+			dragging: dragging(),
+			nopan: !!draggable(),
+			parent: isParentNode(),
+			selectable: !!selectable(),
+			selected: !!node().selected
+		},
+		node().class
+	]} style={style()} 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()} tabindex={focusable() ? 0 : void 0} role={node().ariaRole ?? (focusable() ? "group" : void 0)} aria-roledescription="node" aria-describedby={store.disableKeyboardA11y ? void 0 : `${ARIA_NODE_DESC_KEY}-${store.id}`} {...node().domAttributes}>
+        <NodeIdContext value={nodeId}>
+          <NodeConnectableContext value={connectable}>
+            <Dynamic component={nodeComponent()} data={node().data} id={node().id} selected={!!node().selected} selectable={selectable()} deletable={deletable()} sourcePosition={node().sourcePosition} targetPosition={node().targetPosition} zIndex={node().internals.z} dragging={dragging()} draggable={draggable()} dragHandle={node().dragHandle} parentId={node().parentId} type={nodeType()} isConnectable={connectable()} positionAbsoluteX={node().internals.positionAbsolute.x} positionAbsoluteY={node().internals.positionAbsolute.y} width={node().width} height={node().height} />
+          </NodeConnectableContext>
+        </NodeIdContext>
+      </div>
+    </Show>;
+}, OutputNode = (props) => {
+	let _props = propDefaults(props, { targetPosition: Position$1.Top });
+	return <>
+      <Handle type="target" position={_props.targetPosition} isConnectable={_props.isConnectable} />
+      {props.data?.label}
+    </>;
+};
+//#endregion
+//#region src/data/xyflow.ts
+/**
+* The DOM side of the measurement pipeline (fork of @xyflow/system's
+* updateNodeInternals): reads each updated node element's dimensions and
+* handle bounds from the DOM and reports them as data — measurement writes
+* for the measurements root plus user-facing dimension/position changes —
+* instead of writing into a node lookup. The internalNodes projection turns
+* the measurement writes back into internal-node state.
+*
+* `parentExpandChildren` must be turned into changes via
+* {@link handleExpandParent} only AFTER the measurement writes have been
+* flushed, so parent geometry reflects this measuring pass.
+*/
+function measureNodeInternals(updates, nodeLookup, domNode, nodeExtent) {
+	let measurementWrites = [], changes = [], parentExpandChildren = [], updatedInternals = !1, viewportNode = domNode?.querySelector(".xyflow__viewport");
+	if (!viewportNode) return {
+		updatedInternals,
+		measurementWrites,
+		changes,
+		parentExpandChildren
+	};
+	let style = window.getComputedStyle(viewportNode), { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
+	for (let update of updates.values()) {
+		let node = nodeLookup.get(update.id);
+		if (!node) continue;
+		if (node.hidden) {
+			measurementWrites.push({
+				id: node.id,
+				hidden: !0
+			}), updatedInternals = !0;
+			continue;
+		}
+		let dimensions = getDimensions(update.nodeElement), dimensionChanged = node.measured.width !== dimensions.width || node.measured.height !== dimensions.height;
+		if (dimensions.width && dimensions.height && (dimensionChanged || !node.internals.handleBounds || update.force)) {
+			let nodeBounds = update.nodeElement.getBoundingClientRect(), extent = isCoordinateExtent(node.extent) ? node.extent : nodeExtent, { positionAbsolute } = node.internals;
+			node.parentId && node.extent === "parent" ? positionAbsolute = clampPositionToParent(positionAbsolute, dimensions, nodeLookup.get(node.parentId)) : extent && (positionAbsolute = clampPosition(positionAbsolute, extent, dimensions)), measurementWrites.push({
+				id: node.id,
+				measured: dimensions,
+				handleBounds: {
+					source: getHandleBounds("source", update.nodeElement, nodeBounds, zoom, node.id),
+					target: getHandleBounds("target", update.nodeElement, nodeBounds, zoom, node.id)
+				}
+			}), updatedInternals = !0, dimensionChanged && (changes.push({
+				id: node.id,
+				type: "dimensions",
+				dimensions
+			}), node.expandParent && node.parentId && parentExpandChildren.push({
+				id: node.id,
+				parentId: node.parentId,
+				rect: nodeToRect({
+					...node,
+					measured: dimensions,
+					internals: {
+						...node.internals,
+						positionAbsolute
+					}
+				})
+			}));
+		}
+	}
+	return {
+		updatedInternals,
+		measurementWrites,
+		changes,
+		parentExpandChildren
+	};
+}
+function handleExpandParent(children, nodeLookup, getChildNodes, nodeOrigin = [0, 0]) {
+	let changes = [], parentExpansions = /* @__PURE__ */ new Map();
+	for (let child of children) {
+		let parent = nodeLookup.get(child.parentId);
+		if (!parent) continue;
+		let parentRect = parentExpansions.get(child.parentId)?.expandedRect ?? nodeToRect(parent), expandedRect = getBoundsOfRects(parentRect, child.rect);
+		parentExpansions.set(child.parentId, {
+			expandedRect,
+			parent
+		});
+	}
+	return parentExpansions.size > 0 && parentExpansions.forEach(({ expandedRect, parent }, parentId) => {
+		let positionAbsolute = parent.internals.positionAbsolute, dimensions = getNodeDimensions(parent), origin = parent.origin ?? nodeOrigin, xChange = expandedRect.x < positionAbsolute.x ? Math.round(Math.abs(positionAbsolute.x - expandedRect.x)) : 0, yChange = expandedRect.y < positionAbsolute.y ? Math.round(Math.abs(positionAbsolute.y - expandedRect.y)) : 0, newWidth = Math.max(dimensions.width, Math.round(expandedRect.width)), newHeight = Math.max(dimensions.height, Math.round(expandedRect.height)), widthChange = (newWidth - dimensions.width) * origin[0], heightChange = (newHeight - dimensions.height) * origin[1];
+		if (xChange > 0 || yChange > 0 || widthChange || heightChange) {
+			changes.push({
+				id: parentId,
+				type: "position",
+				position: {
+					x: parent.position.x - xChange + widthChange,
+					y: parent.position.y - yChange + heightChange
 				}
-			};
-			nodeLookup.set(userNode.id, updatedNodeInternals), userNode.parentId && updateChildNode(updatedNodeInternals, nodeLookup, parentLookup, {
-				nodeOrigin: store.nodeOrigin,
-				nodeExtent: store.nodeExtent,
-				elevateNodesOnSelect: store.elevateNodesOnSelect,
-				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) => {
-		let { source: sourceNodeId, target: targetNodeId, sourceHandle = null, targetHandle = null } = edge, connection = {
-			edgeId: edge.id,
-			source: sourceNodeId,
-			target: targetNodeId,
-			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);
+			for (let childNode of getChildNodes(parentId)) children.some((child) => child.id === childNode.id) || changes.push({
+				id: childNode.id,
+				type: "position",
+				position: {
+					x: childNode.position.x + xChange,
+					y: childNode.position.y + yChange
+				}
 			});
-		}), createComputed(() => {
-			let sourceNode = nodeLookup.get(edge.source), targetNode = nodeLookup.get(edge.target);
-			if (!sourceNode || !targetNode) return;
-			if (store.onlyRenderVisibleElements) {
-				if (!isEdgeVisible({
-					sourceNode,
-					targetNode,
-					width: store.width ?? 0,
-					height: store.height ?? 0,
-					transform: store.transform
-				})) return;
-				store.visibleNodesMap.set(sourceNode.id, sourceNode), store.visibleNodesMap.set(targetNode.id, targetNode);
+		}
+		(dimensions.width < expandedRect.width || dimensions.height < expandedRect.height || xChange || yChange) && changes.push({
+			id: parentId,
+			type: "dimensions",
+			setAttributes: !0,
+			dimensions: {
+				width: newWidth + (xChange ? origin[0] * xChange - widthChange : 0),
+				height: newHeight + (yChange ? origin[1] * yChange - heightChange : 0)
 			}
-			let edgePosition = getEdgePosition({
-				id: edge.id,
-				sourceNode,
-				targetNode,
-				sourceHandle: edge.sourceHandle || null,
-				targetHandle: edge.targetHandle || null,
-				connectionMode: store.connectionMode,
-				onError: store.onError
-			});
-			edgePosition && layoutedEdgesMap.set(edge.id, {
-				...store.defaultEdgeOptions,
-				...edge,
-				...edgePosition,
-				zIndex: getElevatedEdgeZIndex({
-					selected: edge.selected,
-					zIndex: edge.zIndex ?? store.defaultEdgeOptions.zIndex,
-					sourceNode,
-					targetNode,
-					elevateOnSelect: store.elevateEdgesOnSelect,
-					zIndexMode: store.zIndexMode
-				}),
-				sourceNode,
-				targetNode,
-				edge
-			});
-		}), onCleanup(() => {
-			batch(() => {
-				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));
-	}), {
-		store,
-		nodeLookup,
-		edgeLookup,
-		parentLookup,
-		connectionLookup,
+	}), changes;
+}
+//#endregion
+//#region src/data/createSolidFlow.tsx
+const InitialNodeTypesMap = {
+	input: InputNode,
+	output: OutputNode,
+	default: DefaultNode,
+	group: GroupNode
+}, InitialEdgeTypesMap = {
+	straight: StraightEdgeInternal,
+	smoothstep: SmoothStepEdgeInternal,
+	default: BezierEdgeInternal,
+	step: StepEdgeInternal
+}, createSolidFlow = (props) => {
+	let state = createFlowState(props, {
+		prefersDark: createMediaQuery("(prefers-color-scheme: dark)", props.colorModeSSR === "dark"),
+		initialNodeTypes: InitialNodeTypesMap,
+		initialEdgeTypes: InitialEdgeTypesMap
+	}), { store, nodeLookup, actions } = state, pendingEntries, requestUpdateNodeInternals = (updateEntries) => {
+		if (pendingEntries) {
+			pendingEntries.push(...updateEntries);
+			return;
+		}
+		pendingEntries = updateEntries, scheduleIdleCallback(() => {
+			let updates = new Map(pendingEntries);
+			pendingEntries = void 0;
+			let { updatedInternals, measurementWrites, changes, parentExpandChildren } = measureNodeInternals(updates, nodeLookup, store.domNode);
+			updatedInternals && (actions.applyMeasurementWrites(measurementWrites), flush(), parentExpandChildren.length > 0 && changes.push(...handleExpandParent(parentExpandChildren, nodeLookup, (parentId) => store.nodes.filter((node) => node.parentId === parentId), store.nodeOrigin)), actions.applyNodeChanges(changes), flush(), actions.markInitialNodesMeasured());
+		});
+	};
+	return actions.setMeasureRequester(requestUpdateNodeInternals), {
+		...state,
 		actions: {
-			getEdge,
-			applyInitialFitView,
-			resetStoreValues,
-			requestUpdateNodeInternals,
-			setAriaLabelConfig,
-			setAriaLiveMessage,
-			setClickConnectStartHandle,
-			setConfig,
-			setConnection,
-			setDeleteKeyPressed,
-			setDomNode,
-			setDragging,
-			get setEdges() {
-				return edgesMemo.set;
-			},
-			setElementsSelectable,
-			setHeight,
-			setMultiselectionKeyPressed,
-			get setNodes() {
-				return nodesMemo.set;
-			},
-			setNodesConnectable,
-			setNodesDraggable,
-			setPanActivationKeyPressed,
-			setPanZoom,
-			setSelectionKeyPressed,
-			setSelectionRect,
-			setSelectionRectMode,
-			get setViewport() {
-				return viewportMemo.set;
-			},
-			setWidth,
-			setZoomActivationKeyPressed,
-			addEdge,
-			updateNodePositions,
-			zoomIn,
-			zoomOut,
-			fitView,
-			setCenter,
-			setPaneClickDistance,
-			unselectNodesAndEdges,
-			addSelectedNodes,
-			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({
-					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({
-					nodes: [],
-					edges: [edge]
-				}) : addSelectedEdges([id]));
-			},
-			moveSelectedNodes: (direction, factor) => {
-				let nodeUpdates = /* @__PURE__ */ new Map(), xVelo = store.snapGrid?.[0] ?? 5, yVelo = store.snapGrid?.[1] ?? 5, xDiff = direction.x * xVelo * factor, yDiff = direction.y * yVelo * factor;
-				for (let node of nodeLookup.values()) {
-					if (!(node.selected && (node.draggable || store.nodesDraggable && node.draggable === void 0))) continue;
-					let nextPosition = {
-						x: node.internals.positionAbsolute.x + xDiff,
-						y: node.internals.positionAbsolute.y + yDiff
-					};
-					store.snapGrid && (nextPosition = snapPosition(nextPosition, store.snapGrid));
-					let { position, positionAbsolute } = calculateNodePosition({
-						nodeId: node.id,
-						nextPosition,
-						nodeLookup,
-						nodeExtent: store.nodeExtent,
-						nodeOrigin: store.nodeOrigin,
-						onError: store.onError
-					});
-					node.position = position, node.internals.positionAbsolute = positionAbsolute, nodeUpdates.set(node.id, node);
-				}
-				updateNodePositions(nodeUpdates);
-			},
-			panBy: (delta) => panBy({
-				delta,
-				panZoom: store.panZoom,
-				transform: store.transform,
-				translateExtent: store.translateExtent,
-				width: store.width,
-				height: store.height
-			}),
-			cancelConnection: () => {
-				setConnection({ ...initialConnection });
-			},
-			reset: () => {
-				resetStoreValues(), unselectNodesAndEdges();
-			}
+			...actions,
+			requestUpdateNodeInternals
 		}
 	};
-}, 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");
@@ -1382,13 +1839,13 @@ function useInternalSolidFlow() {
 //#endregion
 //#region src/components/graph/marker/Marker.tsx
 const Marker = (props) => {
-	let _props = mergeProps({
+	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)";
+	}), color = () => _props.color ?? "var(--xy-edge-stroke)";
 	return <marker class="solid-flow__arrowhead" id={_props.id} markerWidth={_props.width} markerHeight={_props.height} viewBox="-10 -10 20 20" markerUnits={_props.markerUnits} orient={_props.orient} refX="0" refY="0">
       <Show when={_props.type === "arrow"} fallback={<polyline class="arrowclosed" stroke={color()} fill={color()} stroke-linecap="round" stroke-linejoin="round" stroke-width={_props.strokeWidth} points="-5,-4 0,0 -5,4 -5,-4" />}>
         <polyline class="arrow" stroke={color()} fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width={_props.strokeWidth} points="-5,-4 0,0 -5,4" />
@@ -1440,7 +1897,7 @@ const Marker = (props) => {
 	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, connections, 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) => {
@@ -1449,9 +1906,7 @@ const Marker = (props) => {
 				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;
@@ -1469,7 +1924,7 @@ const Marker = (props) => {
 			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;
@@ -1488,33 +1943,23 @@ const Marker = (props) => {
 		let edgesSelectable = store.defaultEdgeOptions.selectable ?? !0;
 		selectedEdgeIds = /* @__PURE__ */ new Set();
 		for (let nodeId of selectedNodeIds) {
-			let connections = connectionLookup.get(nodeId);
-			if (connections) for (let { edgeId } of connections.values()) {
-				let edge = edgeLookup.get(edgeId);
+			let nodeConnections = connections[nodeId];
+			if (nodeConnections) for (let { edgeId } of Object.values(nodeConnections)) {
+				let edge = edgeLookup[edgeId];
 				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);
@@ -1556,14 +2001,18 @@ const Marker = (props) => {
 			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)) {
@@ -1573,40 +2022,28 @@ const Marker = (props) => {
 		props.onPaneContextMenu?.({ event });
 	};
 	return <div ref={(el) => {
-		container = el, el.addEventListener("click", (e) => {
-			isSelectionEnabled() && onClickCapture(e);
-		}, { capture: !0 });
-	}} class={clsx$1("solid-flow__container solid-flow__pane", {
-		selection: isSelecting(),
+		container = el, setContainerRef(el);
+	}} class={["solid-flow__container solid-flow__pane", {
+		selection: !!isSelecting(),
 		dragging: store.dragging,
 		draggable: props.panOnDrag === !0 || Array.isArray(props.panOnDrag) && props.panOnDrag.includes(0)
-	})} onClick={(e) => isSelectionEnabled() ? void 0 : onClick(e)} on:pointerdown={{
-		capture: !0,
-		handleEvent: (e) => {
-			isSelectionEnabled() && onPointerDownCapture(e);
-		}
-	}} onPointerMove={(e) => isSelectionEnabled() ? onPointerMove(e) : void 0} onPointerUp={onPointerUp} onPointerCancel={(e) => isSelectionEnabled() ? onPointerCancel(e) : void 0} onContextMenu={onContextMenu}>
+	}]} onClick={(e) => isSelectionEnabled() ? void 0 : onClick(e)} onPointerMove={(e) => isSelectionEnabled() ? onPointerMove(e) : void 0} onPointerUp={onPointerUp} onPointerCancel={(e) => isSelectionEnabled() ? onPointerCancel(e) : void 0} onContextMenu={onContextMenu}>
       {props.children}
     </div>;
 }, Panel = (props) => {
-	let { store } = useInternalSolidFlow(), _props = mergeProps({
+	let { store } = useInternalSolidFlow(), _props = propDefaults(props, {
 		position: "top-right",
 		style: {}
-	}, props), [local, rest] = splitProps(_props, [
-		"class",
-		"position",
-		"style",
-		"children"
-	]);
-	return <div class={clsx$1([
+	}), rest = omit(_props, "class", "position", "style", "children");
+	return <div class={[
 		"solid-flow__panel",
-		...local.position.split("-"),
-		local.class
-	])} style={{
+		..._props.position.split("-"),
+		_props.class
+	]} style={{
 		"pointer-events": store.selectionRectMode ? "none" : void 0,
-		...local.style
+		..._props.style
 	}} {...rest}>
-      {local.children}
+      {_props.children}
     </div>;
 }, Viewport = (props) => {
 	let { store } = useInternalSolidFlow();
@@ -1621,7 +2058,7 @@ const Marker = (props) => {
         </Portal>}
     </Show>;
 }, Zoom = (props) => {
-	let ref, { store, actions } = useInternalSolidFlow(), viewPort = () => props.initialViewport || {
+	let [ref, setRef] = createSignal(), { store, actions } = useInternalSolidFlow(), viewPort = () => props.initialViewport || {
 		x: 0,
 		y: 0,
 		zoom: 1
@@ -1633,9 +2070,10 @@ const Marker = (props) => {
 			zoom
 		});
 	};
-	return onMount(() => {
-		let panZoomInstance = XYPanZoom({
-			domNode: ref,
+	return createEffect(() => ref(), (el) => {
+		if (!el) return;
+		let panZoomInstance = untrack(() => XYPanZoom({
+			domNode: el,
 			minZoom: store.minZoom,
 			maxZoom: store.maxZoom,
 			translateExtent: store.translateExtent,
@@ -1644,43 +2082,46 @@ const Marker = (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
 		});
-	}), <div ref={ref} class="solid-flow__container solid-flow__zoom">
+	}), <div ref={setRef} class="solid-flow__container solid-flow__zoom">
       {props.children}
     </div>;
 }, ConnectionLine = (props) => {
 	let { store } = useInternalSolidFlow(), connectionStatus = () => getConnectionStatus(store.connection.isValid);
 	return <Show when={store.connection.inProgress}>
       <svg class="solid-flow__container solid-flow__connectionline" width={store.width} height={store.height} style={props.containerStyle}>
-        <g class={clsx$1(["solid-flow__connection", connectionStatus()])}>
+        <g class={["solid-flow__connection", connectionStatus()]}>
           <Show when={props.component} fallback={<InternalConnectionLine style={props.style} />}>
             {(CustomComponent) => {
 		let UserConnectionLine = CustomComponent();
@@ -1722,24 +2163,32 @@ const Marker = (props) => {
 	};
 	return <path class="solid-flow__connection-path" fill="none" style={props.style} d={path()} />;
 }, DotPattern = (props) => {
-	let _props = mergeProps({ radius: 5 }, props);
-	return <circle class={clsx$1("solid-flow__background-pattern", "dots", _props.class)} cx={_props.radius} cy={_props.radius} r={_props.radius} />;
+	let _props = propDefaults(props, { radius: 5 });
+	return <circle class={[
+		"solid-flow__background-pattern",
+		"dots",
+		_props.class
+	]} cx={_props.radius} cy={_props.radius} r={_props.radius} />;
 }, LinePattern = (props) => {
-	let _props = mergeProps({ lineWidth: 1 }, props);
-	return <path stroke-width={_props.lineWidth} d={`M${_props.dimensions[0] / 2} 0 V${_props.dimensions[1]} M0 ${_props.dimensions[1] / 2} H${_props.dimensions[0]}`} class={clsx("solid-flow__background-pattern", _props.variant, _props.class)} />;
+	let _props = propDefaults(props, { lineWidth: 1 });
+	return <path stroke-width={_props.lineWidth} d={`M${_props.dimensions[0] / 2} 0 V${_props.dimensions[1]} M0 ${_props.dimensions[1] / 2} H${_props.dimensions[0]}`} class={[
+		"solid-flow__background-pattern",
+		_props.variant,
+		_props.class
+	]} />;
 }, DEFAULT_SIZE = {
 	dots: 1,
 	lines: 1,
 	cross: 6
 }, Background = (props) => {
-	let _props = mergeProps({
+	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 <svg data-testid="solid-flow__background" class={clsx$1("solid-flow__container solid-flow__background", _props.class)} style={{
+	}), { 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 <svg data-testid="solid-flow__background" class={["solid-flow__container solid-flow__background", _props.class]} style={{
 		"--xy-background-color-props": _props.bgColor,
 		"--xy-background-pattern-color-props": _props.patternColor,
 		..._props.style
@@ -1752,24 +2201,15 @@ const Marker = (props) => {
       <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId()})`} />
     </svg>;
 }, 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 <button type="button" class={clsx$1("solid-flow__controls-button", local.class)} onClick={(e) => local.onClick?.(e)} style={style()} {...rest}>
-      {local.children}
+	return <button type="button" class={["solid-flow__controls-button", props.class]} onClick={(e) => props.onClick?.(e)} style={style()} {...rest}>
+      {props.children}
     </button>;
 }, Fit = () => <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" />
@@ -1782,54 +2222,35 @@ const Marker = (props) => {
   </svg>, Unlock = () => <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" />
   </svg>, Controls = (props) => {
-	let { store, actions } = useInternalSolidFlow(), _props = mergeProps({
+	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 <Panel class={clsx$1([
+	return <Panel class={[
 		"solid-flow__controls",
-		local.orientation,
-		local.class
-	])} position={local.position} data-testid="solid-flow__controls" aria-label={store.ariaLabelConfig["controls.ariaLabel"]} style={local.style} {...rest}>
-      {local.beforeControls}
-      <Show when={local.showZoom}>
+		_props.orientation,
+		_props.class
+	]} position={_props.position} data-testid="solid-flow__controls" aria-label={store.ariaLabelConfig["controls.ariaLabel"]} style={_props.style} {...rest}>
+      {_props.beforeControls}
+      <Show when={_props.showZoom}>
         <>
           <ControlButton onClick={onZoomInHandler} class="solid-flow__controls-zoomin" title={store.ariaLabelConfig["controls.zoomIn.ariaLabel"]} aria-label={store.ariaLabelConfig["controls.zoomIn.ariaLabel"]} disabled={getMaxZoomReached()} {...buttonProps()}>
             <Plus />
@@ -1839,56 +2260,51 @@ const Marker = (props) => {
           </ControlButton>
         </>
       </Show>
-      <Show when={local.showFitView}>
+      <Show when={_props.showFitView}>
         <ControlButton class="solid-flow__controls-fitview" onClick={onFitViewHandler} title={store.ariaLabelConfig["controls.fitView.ariaLabel"]} aria-label={store.ariaLabelConfig["controls.fitView.ariaLabel"]} {...buttonProps()}>
           <Fit />
         </ControlButton>
       </Show>
-      <Show when={local.showLock}>
+      <Show when={_props.showLock}>
         <ControlButton class="solid-flow__controls-interactive" onClick={onToggleInteractivity} title={store.ariaLabelConfig["controls.interactive.ariaLabel"]} aria-label={store.ariaLabelConfig["controls.interactive.ariaLabel"]} {...buttonProps()}>
           <Show when={getIsInteractive()} fallback={<Lock />}>
             <Unlock />
           </Show>
         </ControlButton>
       </Show>
-      {local.children}
-      {local.afterControls}
+      {_props.children}
+      {_props.afterControls}
     </Panel>;
 }, 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[edgeId()]?.selected, transform = () => getEdgeToolbarTransform(props.x, props.y, store.viewport.zoom, props.alignX ?? "center", props.alignY ?? "center");
 	return <Show when={isActive()}>
-      <EdgeLabel selectEdgeOnClick={local.selectEdgeOnClick} transparent>
-        <div class={clsx$1("solid-flow__edge-toolbar", local.class)} style={{
+      <EdgeLabel selectEdgeOnClick={props.selectEdgeOnClick} transparent>
+        <div class={["solid-flow__edge-toolbar", props.class]} style={{
 		position: "absolute",
 		transform: transform(),
 		"transform-origin": "0 0"
 	}} data-id={edgeId()} {...rest}>
-          {local.children}
+          {props.children}
         </div>
       </EdgeLabel>
     </Show>;
 }, MiniMapNode = (props) => {
-	let _props = mergeProps({
+	let _props = propDefaults(props, {
 		borderRadius: 5,
 		width: 0,
 		height: 0
-	}, props), style = () => Object.entries({
+	}), style = () => 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 <rect class={clsx$1("solid-flow__minimap-node", { selected: _props.selected }, _props.class)} x={_props.x} y={_props.y} rx={_props.borderRadius} ry={_props.borderRadius} width={_props.width} height={_props.height} shape-rendering={_props.shapeRendering} style={style()} />;
+	return <rect class={[
+		"solid-flow__minimap-node",
+		{ selected: !!_props.selected },
+		_props.class
+	]} x={_props.x} y={_props.y} rx={_props.borderRadius} ry={_props.borderRadius} width={_props.width} height={_props.height} shape-rendering={_props.shapeRendering} style={style()} />;
 }, getAttrFunction = (func) => func instanceof Function ? func : () => func, MiniMap = (props) => {
-	let { store, nodeLookup } = useInternalSolidFlow(), _props = mergeProps({
+	let { store, nodeLookup } = useInternalSolidFlow(), _props = propDefaults(props, {
 		position: "bottom-right",
 		nodeClass: "",
 		nodeStrokeColor: "transparent",
@@ -1899,26 +2315,7 @@ const Marker = (props) => {
 		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,
@@ -1926,57 +2323,64 @@ const Marker = (props) => {
 	}), 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 <Panel position={local.position} data-testid="solid-flow__minimap" class={clsx$1(["solid-flow__minimap", local.class])} style={{
-		"--xy-minimap-background-color-props": local.bgColor,
-		...local.style
+	return <Panel position={_props.position} data-testid="solid-flow__minimap" class={["solid-flow__minimap", _props.class]} style={{
+		"--xy-minimap-background-color-props": _props.bgColor,
+		..._props.style
 	}} {...paneProps}>
       <Show when={store.panZoom}>
         {(panZoom) => {
-		let [ref, setRef] = createSignal();
-		return onMount(() => {
-			let minimap = XYMinimap({
-				domNode: ref(),
-				panZoom: panZoom(),
+		let [ref, setRef] = createSignal(), [minimap, setMinimap] = createSignal();
+		return createEffect(() => ({
+			el: ref(),
+			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();
-			});
-		}), <svg ref={setRef} width={local.width} height={local.height} viewBox={`${getX()} ${getY()} ${getViewboxWidth()} ${getViewboxHeight()}`} class="solid-flow__minimap-svg" role="img" aria-labelledby={labelledBy()} style={{
-			"--xy-minimap-mask-background-color-props": local.maskColor,
-			"--xy-minimap-mask-stroke-color-props": local.maskStrokeColor,
+			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);
+		}), <svg ref={setRef} width={_props.width} height={_props.height} viewBox={`${getX()} ${getY()} ${getViewboxWidth()} ${getViewboxHeight()}`} class="solid-flow__minimap-svg" role="img" aria-labelledby={labelledBy()} style={{
+			"--xy-minimap-mask-background-color-props": _props.maskColor,
+			"--xy-minimap-mask-stroke-color-props": _props.maskStrokeColor,
 			"--xy-minimap-mask-stroke-width-props": strokeWidth()
 		}}>
               <title id={labelledBy()}>{store.ariaLabelConfig["minimap.ariaLabel"]}</title>
-              <Index each={nodeIds()}>
+              <For keyed={!1} each={nodeIds()}>
                 {(nodeId) => {
 			let node = createMemo(() => nodeLookup.get(nodeId())), nodeVisible = () => !!(node() && nodeHasDimensions(node()) && !node().hidden);
 			return <Show when={nodeVisible() && getNodeDimensions(node())}>
-                      {(nodeDimensions) => <MiniMapNode x={node().internals.positionAbsolute.x} y={node().internals.positionAbsolute.y} borderRadius={local.nodeBorderRadius} strokeWidth={local.nodeStrokeWidth} shapeRendering={shapeRendering()} width={nodeDimensions().width} height={nodeDimensions().height} selected={node().selected} color={nodeColorFunc()?.call(null, node())} strokeColor={nodeStrokeColorFunc().call(null, node())} class={nodeClassFunc().call(null, node())} />}
+                      {(nodeDimensions) => <MiniMapNode x={node().internals.positionAbsolute.x} y={node().internals.positionAbsolute.y} borderRadius={_props.nodeBorderRadius} strokeWidth={_props.nodeStrokeWidth} shapeRendering={shapeRendering()} width={nodeDimensions().width} height={nodeDimensions().height} selected={node().selected} color={nodeColorFunc()?.call(null, node())} strokeColor={nodeStrokeColorFunc().call(null, node())} class={nodeClassFunc().call(null, node())} />}
                     </Show>;
 		}}
-              </Index>
+              </For>
               <path class="solid-flow__minimap-mask" d={`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`} fill-rule="evenodd" pointer-events="none" />
             </svg>;
@@ -1984,7 +2388,7 @@ const Marker = (props) => {
       </Show>
     </Panel>;
 }, ResizeControl = (props) => {
-	let _props = mergeProps({
+	let _props = propDefaults(props, {
 		variant: "handle",
 		minWidth: 10,
 		minHeight: 10,
@@ -1993,28 +2397,11 @@ const Marker = (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();
+	return createEffect(() => resizeControlRef(), (el) => {
+		if (!el) return;
+		let instance = XYResizer({
+			domNode: el,
 			nodeId: nodeId(),
 			getStoreItems: () => ({
 				nodeLookup,
@@ -2034,63 +2421,63 @@ const Marker = (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();
-		});
-	}), <div ref={resizeControlRef} class={clsx$1([
+		return setResizer(instance), () => {
+			instance.destroy();
+		};
+	}), createEffect(() => ({
+		instance: resizer(),
+		options: {
+			controlPosition: controlPosition(),
+			boundaries: {
+				minWidth: _props.minWidth,
+				minHeight: _props.minHeight,
+				maxWidth: _props.maxWidth,
+				maxHeight: _props.maxHeight
+			},
+			keepAspectRatio: !!_props.keepAspectRatio,
+			onResizeStart: _props.onResizeStart,
+			onResize: _props.onResize,
+			onResizeEnd: _props.onResizeEnd,
+			shouldResize: _props.shouldResize
+		}
+	}), ({ instance, options }) => {
+		instance?.update(options);
+	}), <div ref={setResizeControlRef} class={[
 		"solid-flow__resize-control",
-		local.variant,
+		_props.variant,
 		store.noDragClass,
 		...positionClassNames(),
-		local.class
-	])} style={{
-		"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
+		_props.class
+	]} style={{
+		"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}>
-      {local.children}
+      {_props.children}
     </div>;
 }, NodeResizer = (props) => {
-	let _props = mergeProps({
+	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 <Show when={_props.visible}>
       <For each={XY_RESIZER_LINE_POSITIONS}>
-        {(position) => <ResizeControl variant="line" position={position} class={local.lineClass} style={local.lineStyle} {...rest} />}
+        {(position) => <ResizeControl variant="line" position={position} class={props.lineClass} style={props.lineStyle} {...rest} />}
       </For>
       <For each={XY_RESIZER_HANDLE_POSITIONS}>
-        {(position) => <ResizeControl position={position} class={local.handleClass} style={local.handleStyle} {...rest} />}
+        {(position) => <ResizeControl position={position} class={props.handleClass} style={props.handleStyle} {...rest} />}
       </For>
     </Show>;
 };
@@ -2106,8 +2493,8 @@ const Marker = (props) => {
 * @returns an accessor for the current color mode class
 */
 function useColorMode() {
-	let { store } = useInternalSolidFlow();
-	return () => store.colorMode;
+	let { flow } = useInternalSolidFlow();
+	return () => flow.colorMode;
 }
 //#endregion
 //#region src/hooks/useConnection.tsx
@@ -2118,8 +2505,8 @@ function useColorMode() {
 * @returns current connection as a readable store
 */
 function useConnection() {
-	let { store } = useInternalSolidFlow();
-	return () => store.connection;
+	let { flow } = useInternalSolidFlow();
+	return () => flow.connection;
 }
 //#endregion
 //#region src/hooks/useGraph.ts
@@ -2150,21 +2537,19 @@ function useEdges() {
 * @returns store with the viewport object
 */
 function useViewport() {
-	let { store } = useInternalSolidFlow();
-	return () => store.viewport;
+	let { flow } = useInternalSolidFlow();
+	return () => flow.viewport;
 }
 //#endregion
 //#region src/hooks/useHandleEdgeSelect.tsx
 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]);
-		});
+		let edge = edgeLookup[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
@@ -2179,8 +2564,8 @@ function useHandleEdgeSelect() {
 * @returns an accessor that indicates whether the nodes are initialized
 */
 function useNodesInitialized() {
-	let { store } = useInternalSolidFlow();
-	return () => store.nodesInitialized;
+	let { flow } = useInternalSolidFlow();
+	return () => flow.nodesInitialized;
 }
 /**
 * Hook for seeing if the viewport is initialized.
@@ -2191,8 +2576,8 @@ function useNodesInitialized() {
 * @returns an accessor that indicates whether the viewport is initialized
 */
 function useViewportInitialized() {
-	let { store } = useInternalSolidFlow();
-	return () => store.viewportInitialized;
+	let { flow } = useInternalSolidFlow();
+	return () => flow.viewportInitialized;
 }
 //#endregion
 //#region src/hooks/useInternalNode.tsx
@@ -2204,8 +2589,8 @@ function useViewportInitialized() {
 * @returns an accessor with an internal node or undefined
 */
 function useInternalNode(id) {
-	let { nodeLookup } = useInternalSolidFlow();
-	return () => nodeLookup.get(id());
+	let { flow } = useInternalSolidFlow();
+	return () => flow.internalNodes[id()];
 }
 //#endregion
 //#region src/hooks/useNodeConnections.ts
@@ -2221,25 +2606,28 @@ function useInternalNode(id) {
 * @returns an array with connections
 */
 const useNodeConnections = (params) => {
-	let { connectionLookup } = useInternalSolidFlow(), ctxNodeId = () => {
+	let { flow } = 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([]), prevConnections;
+	return createEffect(() => {
+		let rec = flow.connections[connectionKey(nodeId(), type(), id())], map = /* @__PURE__ */ new Map();
+		for (let key of Object.keys(rec ?? {})) map.set(key, { ...rec[key] });
+		return { connections: map };
+	}, ({ connections: nextConnections }) => {
+		areConnectionMapsEqual(nextConnections, prevConnections) || (prevConnections = nextConnections, setConnections(Array.from(nextConnections.values())));
 	}), connections;
 };
 //#endregion
 //#region src/hooks/useNodesData.ts
 function useNodesData(nodeIds) {
-	let { nodeLookup } = useInternalSolidFlow(), prevNodesData = [];
+	let { flow } = useInternalSolidFlow(), prevNodesData = [];
 	return createMemo(() => {
 		let nodesData = [], idValues = nodeIds();
 		if (!idValues) return;
 		let ids = Array.isArray(idValues) ? idValues : [idValues];
 		for (let nodeId of ids) {
-			let node = nodeLookup.get(nodeId)?.internals.userNode;
+			let node = flow.internalNodes[nodeId]?.internals.userNode;
 			node && nodesData.push({
 				id: node.id,
 				type: node.type,
@@ -2252,235 +2640,69 @@ function useNodesData(nodeIds) {
 //#endregion
 //#region src/hooks/useSolidFlow.tsx
 /**
-* Hook for accessing the SvelteFlow instance.
+* Hook for accessing the flow instance: `{ flow, commands }` plus the
+* commands spread at the top level for upstream familiarity.
+*
+* `flow` and `commands` are stable identities, so destructuring them is safe:
+* `const { flow, commands } = useSolidFlow()`.
 *
 * @public
-* @returns A set of helper functions
+* @returns the flow's read struct, write surface, and deprecated aliases
 */
 function useSolidFlow() {
-	let { store, actions, nodeLookup, edgeLookup, connectionLookup } = useInternalSolidFlow(), getNodeRect = (node) => {
-		let nodeToUse = isNode(node) ? node : nodeLookup.get(node.id), position = nodeToUse.parentId ? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.measured, nodeToUse.parentId, nodeLookup, store.nodeOrigin) : nodeToUse.position, nodeWithPosition = {
-			...nodeToUse,
-			position,
-			width: nodeToUse.measured?.width ?? nodeToUse.width,
-			height: nodeToUse.measured?.height ?? nodeToUse.height
-		};
-		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 : {
-				...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 : {
-				...edge,
-				...nextEdge
-			};
-		});
-	}, getInternalNode = (id) => nodeLookup.get(id);
+	let { flow, commands, store, edgeLookup } = useInternalSolidFlow(), getInternalNode = (id) => flow.internalNodes[id];
 	return {
-		zoomIn: actions.zoomIn,
-		zoomOut: actions.zoomOut,
+		...commands,
+		flow,
+		commands,
 		getInternalNode,
-		setCenter: actions.setCenter,
-		fitView: actions.fitView,
 		getNode: (id) => getInternalNode(id)?.internals.userNode,
-		getNodes: (ids) => ids ? getElements(nodeLookup, ids) : store.nodes,
-		getEdge: (id) => edgeLookup.get(id),
-		getEdges: (ids) => ids ? getElements(edgeLookup, ids) : store.edges,
-		addNodes: (payload) => {
-			let newNodes = Array.isArray(payload) ? payload : [payload];
-			actions.setNodes((nodes) => [...nodes, ...newNodes]);
-		},
-		addEdges: (payload) => {
-			let newEdges = Array.isArray(payload) ? payload : [payload];
-			actions.setEdges((edges) => [...edges, ...newEdges]);
-		},
-		getViewport: () => unwrap(store.viewport),
-		setViewport: async (nextViewport, options) => {
-			let currentViewport = store.viewport;
-			return store.panZoom ? (await store.panZoom.setViewport({
-				x: nextViewport.x ?? currentViewport.x,
-				y: nextViewport.y ?? currentViewport.y,
-				zoom: nextViewport.zoom ?? currentViewport.zoom
-			}, options), Promise.resolve(!0)) : Promise.resolve(!1);
-		},
-		getZoom: () => store.viewport.zoom,
-		setZoom: (zoomLevel, options) => {
-			let panZoom = store.panZoom;
-			return panZoom ? panZoom.scaleTo(zoomLevel, { duration: options?.duration }) : Promise.resolve(!1);
-		},
-		fitBounds: async (bounds, options) => {
-			if (!store.panZoom) return Promise.resolve(!1);
-			let viewport = getViewportForBounds$1(bounds, store.width, store.height, store.minZoom, store.maxZoom, options?.padding ?? .1);
-			return await store.panZoom.setViewport(viewport, {
-				duration: options?.duration,
-				ease: options?.ease,
-				interpolate: options?.interpolate
-			}), Promise.resolve(!0);
-		},
-		getIntersectingNodes: (nodeOrRect, partially = !0, nodesToIntersect) => {
-			let isRect = isRectObject(nodeOrRect), nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
-			return nodeRect ? (nodesToIntersect || store.nodes).filter((n) => {
-				let internalNode = nodeLookup.get(n.id);
-				if (!internalNode || !isRect && n.id === nodeOrRect.id) return !1;
-				let currNodeRect = nodeToRect(internalNode), overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
-				return partially && overlappingArea > 0 || overlappingArea >= nodeRect.width * nodeRect.height;
-			}) : [];
-		},
-		isNodeIntersecting: (nodeOrRect, area, partially = !0) => {
-			let nodeRect = isRectObject(nodeOrRect) ? nodeOrRect : getNodeRect(nodeOrRect);
-			if (!nodeRect) return !1;
-			let overlappingArea = getOverlappingArea(nodeRect, area);
-			return partially && overlappingArea > 0 || overlappingArea >= nodeRect.width * nodeRect.height;
-		},
-		deleteElements: async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [] }) => {
-			let { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
-				nodesToRemove,
-				edgesToRemove,
-				nodes: store.nodes,
-				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);
-				}
-			}), {
-				deletedNodes: matchingNodes,
-				deletedEdges: matchingEdges
-			};
-		},
-		screenToFlowPosition: (position, options = { snapToGrid: !0 }) => {
-			if (!store.domNode) return position;
-			let _snapGrid = options.snapToGrid ? store.snapGrid : !1, { x, y, zoom } = store.viewport, { x: domX, y: domY } = store.domNode.getBoundingClientRect(), correctedPosition = {
-				x: position.x - domX,
-				y: position.y - domY
-			};
-			return pointToRendererPoint(correctedPosition, [
-				x,
-				y,
-				zoom
-			], _snapGrid !== null, _snapGrid || [1, 1]);
-		},
-		/**
-		*
-		* @param position
-		* @returns
-		*/
-		flowToScreenPosition: (position) => {
-			if (!store.domNode) return position;
-			let { x, y, zoom } = store.viewport, { x: domX, y: domY } = store.domNode.getBoundingClientRect(), rendererPosition = rendererPointToPoint(position, [
-				x,
-				y,
-				zoom
-			]);
-			return {
-				x: rendererPosition.x + domX,
-				y: rendererPosition.y + domY
-			};
-		},
-		toObject: () => structuredClone({
-			nodes: [...unwrap(store.nodes)],
-			edges: [...unwrap(store.edges)],
-			viewport: { ...unwrap(store.viewport) }
-		}),
-		updateNode,
-		updateNodeData: (id, dataUpdate, options) => {
-			let node = nodeLookup.get(id)?.internals.userNode;
-			if (!node) return;
-			let nextData = typeof dataUpdate == "function" ? dataUpdate(node) : dataUpdate;
-			updateNode(id, (node) => ({
-				...node,
-				data: options?.replace ? nextData : {
-					...node.data,
-					...nextData
-				}
-			}));
-		},
-		updateEdge,
-		getNodesBounds: (nodes) => getNodesBounds$1(nodes, {
-			nodeLookup,
-			nodeOrigin: store.nodeOrigin
-		}),
-		getHandleConnections: ({ type, id, nodeId }) => Array.from(connectionLookup.get(`${nodeId}-${type}-${id ?? null}`)?.values() ?? [])
+		getNodes: (ids) => ids ? ids.flatMap((id) => {
+			let userNode = flow.internalNodes[id]?.internals.userNode;
+			return userNode ? [userNode] : [];
+		}) : [...flow.nodes],
+		getEdge: (id) => edgeLookup[id],
+		getEdges: (ids) => ids ? ids.flatMap((id) => edgeLookup[id] ? [edgeLookup[id]] : []) : [...flow.edges],
+		getViewport: () => snapshot(store.viewport),
+		getZoom: () => flow.viewport.zoom,
+		getHandleConnections: ({ type, id, nodeId }) => Object.values(flow.connections[connectionKey(nodeId, type, id ?? null)] ?? {})
 	};
 }
-function getElements(lookup, ids) {
-	let result = [];
-	for (let id of ids) {
-		let item = lookup.get(id);
-		if (item) {
-			let element = "internals" in item ? item.internals?.userNode : item;
-			result.push(element);
-		}
-	}
-	return result;
-}
 //#endregion
 //#region src/hooks/useUpdateNodeInternals.ts
 /**
-* Hook for updating node internals.
+* Hook for updating node internals. Sugar for `commands.updateNodeInternals`.
 *
 * @public
 * @returns function for updating node internals
 */
 function useUpdateNodeInternals() {
-	let { store, actions } = useInternalSolidFlow();
-	return (id) => {
-		let updateIds = Array.isArray(id) ? id : [id], updates = [];
-		for (let updateId of updateIds) {
-			let nodeElement = store.domNode?.querySelector(`.solid-flow__node[data-id="${updateId}"]`);
-			nodeElement && updates.push([updateId, {
-				id: updateId,
-				nodeElement,
-				force: !0
-			}]);
-		}
-		actions.requestUpdateNodeInternals(updates);
-	};
+	let { commands } = useInternalSolidFlow();
+	return commands.updateNodeInternals;
 }
 //#endregion
 //#region src/components/graph/plugins/NodeToolbar.tsx
 const NodeToolbar = (props) => {
-	let { store } = useInternalSolidFlow(), { getNodes, getNodesBounds, getInternalNode } = useSolidFlow(), _props = mergeProps({
+	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 <Show when={showPortal()}>
       <Portal mount={store.domNode}>
@@ -2488,14 +2710,14 @@ const NodeToolbar = (props) => {
 		position: "absolute",
 		transform: transform(),
 		"z-index": zIndex(),
-		...local.style
+		..._props.style
 	}} {...divProps}>
-          {local.children}
+          {_props.children}
         </div>
       </Portal>
     </Show>;
 }, Selection = (props) => {
-	let _props = mergeProps({ 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)` }
@@ -2505,8 +2727,11 @@ const NodeToolbar = (props) => {
     </Show>;
 }, 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 });
+	createEffect(() => ({
+		el: ref(),
+		focusable: !store.disableKeyboardA11y
+	}), ({ el, focusable }) => {
+		focusable && el?.focus({ preventScroll: !0 });
 	});
 	let onContextMenu = (event) => {
 		let selectedNodes = store.nodes.filter((n) => n.selected);
@@ -2550,11 +2775,11 @@ const NodeToolbar = (props) => {
 		diff && (event.preventDefault(), actions.moveSelectedNodes(diff, event.shiftKey ? 4 : 1));
 	};
 	return <Show when={store.selectionRectMode === "nodes" && bounds() && isNumeric(bounds()?.x) && isNumeric(bounds()?.y)}>
-      <div ref={setRef} class={clsx$1("solid-flow__selection-wrapper", store.noPanClass)} style={{
+      <div ref={setRef} class={["solid-flow__selection-wrapper", store.noPanClass]} style={{
 		width: toPxString(bounds()?.width),
 		height: toPxString(bounds()?.height),
 		transform: `translate(${bounds()?.x}px, ${bounds()?.y}px)`
-	}} onClick={onClick} onContextMenu={onContextMenu} role={store.disableKeyboardA11y ? void 0 : "button"} tabIndex={store.disableKeyboardA11y ? void 0 : -1} onKeyDown={store.disableKeyboardA11y ? void 0 : onKeyDown}>
+	}} onClick={onClick} onContextMenu={onContextMenu} role={store.disableKeyboardA11y ? void 0 : "button"} tabindex={store.disableKeyboardA11y ? void 0 : -1} onKeyDown={store.disableKeyboardA11y ? void 0 : onKeyDown}>
         <Selection width="100%" height="100%" x={0} y={0} />
       </div>
     </Show>;
@@ -2599,16 +2824,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({
-		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,
@@ -2618,22 +2851,19 @@ 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;
 }, SolidFlow = (props) => {
-	let domNode, _props = mergeProps({
+	let [domNodeRef, setDomNodeRef] = createSignal(), domNode, _props = merge({
 		...getDefaultFlowStateProps(),
 		colorMode: "light",
 		deleteKeyCode: "Backspace",
@@ -2659,69 +2889,73 @@ const KeyHandler = (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 <div role="application" data-testid="solid-flow__wrapper" ref={domNode} class={clsx$1([
+	return <div role="application" data-testid="solid-flow__wrapper" ref={(el) => {
+		domNode = el, setDomNodeRef(el);
+	}} class={[
 		"solid-flow",
 		"solid-flow__container",
-		flowProps.class,
+		_props.class,
 		store.colorMode
-	])} style={rootStyle()} onScroll={(e) => {
+	]} style={rootStyle()} onScroll={(e) => {
 		e.currentTarget.scrollTo({
 			top: 0,
 			left: 0,
 			behavior: "auto"
 		});
 	}} {...htmlProps}>
-      <TypedSolidFlowContext.Provider value={solidFlow}>
-        <KeyHandler selectionKey={flowProps.selectionKey} deleteKey={flowProps.deleteKey} panActivationKey={flowProps.panActivationKey} multiSelectionKey={flowProps.multiSelectionKey} zoomActivationKey={flowProps.zoomActivationKey} />
-        <Zoom panOnScrollMode={flowProps.panOnScrollMode} preventScrolling={flowProps.preventScrolling} zoomOnScroll={flowProps.zoomOnScroll} zoomOnDoubleClick={flowProps.zoomOnDoubleClick} zoomOnPinch={flowProps.zoomOnPinch} panOnScroll={flowProps.panOnScroll} panOnScrollSpeed={flowProps.panOnScrollSpeed} panOnDrag={flowProps.panOnDrag} paneClickDistance={flowProps.paneClickDistance} selectionOnDrag={flowProps.selectionOnDrag} onMoveStart={flowProps.onMoveStart} onMove={flowProps.onMove} onMoveEnd={flowProps.onMoveEnd} onViewportInitialized={flowProps.onInit} initialViewport={flowProps.viewport || flowProps.initialViewport}>
-          <Pane onPaneClick={flowProps.onPaneClick} onPaneContextMenu={flowProps.onPaneContextMenu} onSelectionStart={flowProps.onSelectionStart} onSelectionEnd={flowProps.onSelectionEnd} panOnDrag={flowProps.panOnDrag} selectionOnDrag={flowProps.selectionOnDrag} paneClickDistance={flowProps.paneClickDistance} autoPanOnSelection={flowProps.autoPanOnSelection}>
+      <TypedSolidFlowContext value={solidFlow}>
+        <KeyHandler selectionKey={_props.selectionKey} deleteKey={_props.deleteKey} panActivationKey={_props.panActivationKey} multiSelectionKey={_props.multiSelectionKey} zoomActivationKey={_props.zoomActivationKey} />
+        <Zoom panOnScrollMode={_props.panOnScrollMode} preventScrolling={_props.preventScrolling} zoomOnScroll={_props.zoomOnScroll} zoomOnDoubleClick={_props.zoomOnDoubleClick} zoomOnPinch={_props.zoomOnPinch} panOnScroll={_props.panOnScroll} panOnScrollSpeed={_props.panOnScrollSpeed} panOnDrag={_props.panOnDrag} paneClickDistance={_props.paneClickDistance} selectionOnDrag={_props.selectionOnDrag} onMoveStart={_props.onMoveStart} onMove={_props.onMove} onMoveEnd={_props.onMoveEnd} onViewportInitialized={_props.onInit} initialViewport={_props.viewport || _props.initialViewport}>
+          <Pane onPaneClick={_props.onPaneClick} onPaneContextMenu={_props.onPaneContextMenu} onSelectionStart={_props.onSelectionStart} onSelectionEnd={_props.onSelectionEnd} panOnDrag={_props.panOnDrag} selectionOnDrag={_props.selectionOnDrag} paneClickDistance={_props.paneClickDistance} autoPanOnSelection={_props.autoPanOnSelection}>
             <Viewport>
               <div class="solid-flow__container solid-flow__viewport-back" />
-              <EdgeRenderer reconnectRadius={flowProps.reconnectRadius} onEdgeClick={flowProps.onEdgeClick} onEdgeContextMenu={flowProps.onEdgeContextMenu} onEdgePointerEnter={flowProps.onEdgePointerEnter} onEdgePointerLeave={flowProps.onEdgePointerLeave} defaultEdgeOptions={flowProps.defaultEdgeOptions} />
+              <EdgeRenderer reconnectRadius={_props.reconnectRadius} onEdgeClick={_props.onEdgeClick} onEdgeContextMenu={_props.onEdgeContextMenu} onEdgePointerEnter={_props.onEdgePointerEnter} onEdgePointerLeave={_props.onEdgePointerLeave} defaultEdgeOptions={_props.defaultEdgeOptions} />
               <div class="solid-flow__container solid-flow__edge-labels" />
-              <ConnectionLine type={flowProps.connectionLineType} component={flowProps.connectionLineComponent} containerStyle={flowProps.connectionLineContainerStyle} style={flowProps.connectionLineStyle} />
-              <NodeRenderer nodeClickDistance={flowProps.nodeClickDistance} onNodeClick={flowProps.onNodeClick} onNodeContextMenu={flowProps.onNodeContextMenu} onNodePointerEnter={flowProps.onNodePointerEnter} onNodePointerMove={flowProps.onNodePointerMove} onNodePointerLeave={flowProps.onNodePointerLeave} onNodeDrag={flowProps.onNodeDrag} onNodeDragStart={flowProps.onNodeDragStart} onNodeDragStop={flowProps.onNodeDragStop} />
-              <NodeSelection onSelectionClick={flowProps.onSelectionClick} onSelectionContextMenu={flowProps.onSelectionContextMenu} onNodeDrag={flowProps.onNodeDrag} onNodeDragStart={flowProps.onNodeDragStart} onNodeDragStop={flowProps.onNodeDragStop} />
+              <ConnectionLine type={_props.connectionLineType} component={_props.connectionLineComponent} containerStyle={_props.connectionLineContainerStyle} style={_props.connectionLineStyle} />
+              <NodeRenderer nodeClickDistance={_props.nodeClickDistance} onNodeClick={_props.onNodeClick} onNodeContextMenu={_props.onNodeContextMenu} onNodePointerEnter={_props.onNodePointerEnter} onNodePointerMove={_props.onNodePointerMove} onNodePointerLeave={_props.onNodePointerLeave} onNodeDrag={_props.onNodeDrag} onNodeDragStart={_props.onNodeDragStart} onNodeDragStop={_props.onNodeDragStop} />
+              <NodeSelection onSelectionClick={_props.onSelectionClick} onSelectionContextMenu={_props.onSelectionContextMenu} onNodeDrag={_props.onNodeDrag} onNodeDragStart={_props.onNodeDragStart} onNodeDragStop={_props.onNodeDragStop} />
             </Viewport>
             <Selection isVisible={!!store.selectionRect && store.selectionRectMode === "user"} width={store.selectionRect?.width} height={store.selectionRect?.height} x={store.selectionRect?.x} y={store.selectionRect?.y} />
           </Pane>
         </Zoom>
-        <Attribution proOptions={flowProps.proOptions} position={flowProps.attributionPosition} />
+        <Attribution proOptions={_props.proOptions} position={_props.attributionPosition} />
         <A11yDescriptions />
-        {flowProps.children}
-      </TypedSolidFlowContext.Provider>
+        {_props.children}
+      </TypedSolidFlowContext>
     </div>;
 }, SolidFlowProvider = (props) => {
-	let _props = mergeProps(getDefaultFlowStateProps(), props), solidFlow = createSolidFlow(_props);
+	let _props = merge(getDefaultFlowStateProps(), props), solidFlow = createSolidFlow(_props);
 	onCleanup(() => {
 		solidFlow.actions.reset();
 	});
-	let ContextProvider = SolidFlowContext.Provider;
+	let ContextProvider = SolidFlowContext;
 	return <ContextProvider value={solidFlow}>{props.children}</ContextProvider>;
 }, createEdgeStore = (edges) => {
 	let [store, setStore] = createStore(edges);
@@ -2731,4 +2965,4 @@ const KeyHandler = (props) => {
 	return [store, setStore];
 };
 //#endregion
-export { Background, BaseEdge, BezierEdge, BezierEdgeInternal, ConnectionLine, ConnectionLineType, ConnectionMode, ControlButton, Controls, DefaultNode, EdgeLabel, EdgeLabelRenderer, EdgeReconnectAnchor, EdgeRenderer, EdgeToolbar, EdgeWrapper, GroupNode, Handle, InputNode, Marker, MarkerDefinition, MarkerType, MiniMap, NodeRenderer, NodeResizer, NodeSelection, NodeToolbar, NodeWrapper, OutputNode, PanOnScrollMode, Pane, Panel, Position, ResizeControl, ResizeControlVariant, Selection, SelectionMode, SmoothStepEdge, SmoothStepEdgeInternal, SolidFlow, SolidFlowProvider, StepEdge, StepEdgeInternal, StraightEdge, StraightEdgeInternal, Viewport, ViewportPortal, Zoom, addEdge, createEdgeStore, createNodeStore, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, useColorMode, useConnection, useEdges, useHandleEdgeSelect, useInternalNode, useNodeConnections, useNodes, useNodesData, useNodesInitialized, useSolidFlow, useUpdateNodeInternals, useViewport, useViewportInitialized };
+export { Background, BaseEdge, BezierEdge, BezierEdgeInternal, ConnectionLine, ConnectionLineType, ConnectionMode, ControlButton, Controls, DefaultNode, EdgeLabel, EdgeLabelRenderer, EdgeReconnectAnchor, EdgeRenderer, EdgeToolbar, EdgeWrapper, GroupNode, Handle, InputNode, Marker, MarkerDefinition, MarkerType, MiniMap, NodeRenderer, NodeResizer, NodeSelection, NodeToolbar, NodeWrapper, OutputNode, PanOnScrollMode, Pane, Panel, Position, ResizeControl, ResizeControlVariant, Selection, SelectionMode, SmoothStepEdge, SmoothStepEdgeInternal, SolidFlow, SolidFlowProvider, StepEdge, StepEdgeInternal, StraightEdge, StraightEdgeInternal, Viewport, ViewportPortal, Zoom, addEdge, connectionKey, createEdgeStore, createNodeStore, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, useColorMode, useConnection, useEdges, useHandleEdgeSelect, useInternalNode, useNodeConnections, useNodes, useNodesData, useNodesInitialized, useSolidFlow, useUpdateNodeInternals, useViewport, useViewportInitialized };