@dschz/solid-flow 1.0.0-next.6 → 1.0.0-next.8

package/dist/index/index.js

@@ -1,5 +1,5 @@
 import { Dynamic, Portal, addEvent, claimElement, className, createComponent, delegateEvents, effect, insert, isServer, memo, mergeProps, ref, setAttribute, setStyleProperty, spread, style, template } from "@solidjs/web";
-import { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, Position as Position$1, ResizeControlVariant, 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 as getBezierEdgeCenter$1, getBezierPath, getBezierPath as getBezierPath$1, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getDimensions, getEdgeCenter as getEdgeCenter$1, 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, isInputDOMNode, isMacOs, isNodeBase, isNumeric, isRectObject, mergeAriaLabelConfig, nodeHasDimensions, nodeToRect, panBy, pointToRendererPoint, rendererPointToPoint, shallowNodeData, snapPosition } from "@xyflow/system";
+import { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, Position as Position$1, ResizeControlVariant, 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, errorMessages, evaluateAbsolutePosition, fitViewport, getBezierEdgeCenter as getBezierEdgeCenter$1, getBezierPath, getBezierPath as getBezierPath$1, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getDimensions, getEdgeCenter as getEdgeCenter$1, 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, isInputDOMNode, isMacOs, isNodeBase, isNumeric, isRectObject, mergeAriaLabelConfig, nodeHasDimensions, nodeToRect, panBy, pointToRendererPoint, rendererPointToPoint, shallowNodeData, snapPosition } from "@xyflow/system";
 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 { createEventListener, createEventListenerMap } from "@solid-primitives/event-listener";
@@ -65,6 +65,8 @@ function propDefaults(props, defaults) {
 const getEdgeId = (connection) => {
 	let { source, sourceHandle, target, targetHandle } = connection;
 	return `xy-edge__${source}${sourceHandle || ""}-${target}${targetHandle || ""}`;
+}, isEdgeSelectable = (edge, store) => edge.selectable ?? store.defaultEdgeOptions.selectable ?? store.elementsSelectable, emitFlowError = (onError, id, message) => {
+	onError && onError(id, message);
 }, EdgeLabelRenderer = (props) => {
 	let { store } = useInternalSolidFlow(), labelNode = () => store.domNode?.querySelector(".solid-flow__edge-labels");
 	return createComponent(Show, {
@@ -92,7 +94,7 @@ const EdgeLabel = (props) => {
 		selectEdgeOnClick: !1,
 		transparent: !1,
 		style: {}
-	}), rest = omit(_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.getLayoutedEdge(id())?.zIndex;
 	return createComponent(EdgeLabelRenderer, { get children() {
 		var _el$ = _tmpl$$34();
 		return spread(_el$, mergeProps({
@@ -282,6 +284,205 @@ const BaseEdge = (props) => {
 	});
 };
 //#endregion
+//#region src/core/spatial/grid.ts
+/**
+* A uniform spatial hash over axis-aligned rects — the plain, NON-reactive
+* building block behind the flow's spatial queries (RFC-4239 dossier:
+* gesture-scoped snapshots and epoch-rebuilt indexes; deliberately never a
+* live-maintained reactive structure, which would re-create the round-6
+* central-collection anti-pattern).
+*
+* Every operation is O(cells touched); with cellSize on the order of the
+* query radius or median node size, inserts and queries touch O(1) cells.
+* No balancing, no extent-known-up-front requirement, no dependency —
+* upstream's own bake-off (quadtree vs BVH vs rbush) is why: fixed-radius
+* neighborhood and rect-vs-box queries are the textbook grid case.
+*/
+var SpatialGrid = class {
+	cellSize;
+	cells = /* @__PURE__ */ new Map();
+	rects = /* @__PURE__ */ new Map();
+	constructor(cellSize) {
+		this.cellSize = cellSize;
+	}
+	cellRange(rect) {
+		let size = this.cellSize;
+		return {
+			minX: Math.floor(rect.x / size),
+			maxX: Math.floor((rect.x + rect.width) / size),
+			minY: Math.floor(rect.y / size),
+			maxY: Math.floor((rect.y + rect.height) / size)
+		};
+	}
+	insert(id, rect) {
+		this.rects.set(id, rect);
+		let { minX, maxX, minY, maxY } = this.cellRange(rect);
+		for (let cx = minX; cx <= maxX; cx++) for (let cy = minY; cy <= maxY; cy++) {
+			let key = `${cx}:${cy}`, bucket = this.cells.get(key);
+			bucket ? bucket.push(id) : this.cells.set(key, [id]);
+		}
+	}
+	/** Ids of entries whose rect overlaps the query rect (touching counts). */
+	queryRect(query) {
+		let { minX, maxX, minY, maxY } = this.cellRange(query), seen = /* @__PURE__ */ new Set(), result = [];
+		for (let cx = minX; cx <= maxX; cx++) for (let cy = minY; cy <= maxY; cy++) {
+			let bucket = this.cells.get(`${cx}:${cy}`);
+			if (bucket) for (let id of bucket) {
+				if (seen.has(id)) continue;
+				seen.add(id);
+				let rect = this.rects.get(id);
+				rect.x <= query.x + query.width && rect.x + rect.width >= query.x && rect.y <= query.y + query.height && rect.y + rect.height >= query.y && result.push(id);
+			}
+		}
+		return result;
+	}
+	get size() {
+		return this.rects.size;
+	}
+}, GestureSpatialLookup = class {
+	#real;
+	#cellSize;
+	#grid = null;
+	#queryRect = null;
+	constructor(real, cellSize) {
+		this.#real = real, this.#cellSize = cellSize;
+	}
+	/** Snapshot the current geometry into the grid (gesture start). */
+	arm(rectOf) {
+		let grid = new SpatialGrid(this.#cellSize);
+		for (let [id, value] of this.#real.entries()) grid.insert(id, rectOf(value));
+		this.#grid = grid, this.#queryRect = null;
+	}
+	/** Focus iteration on the neighborhood of the pointer (per move). */
+	setQueryCenter(center, radius) {
+		this.#queryRect = {
+			x: center.x - radius,
+			y: center.y - radius,
+			width: radius * 2,
+			height: radius * 2
+		};
+	}
+	/** Focus iteration on an explicit rect (box-selection gestures). */
+	setQueryRect(rect) {
+		this.#queryRect = rect;
+	}
+	/** Back to plain pass-through (gesture end). */
+	disarm() {
+		this.#grid = null, this.#queryRect = null;
+	}
+	#candidateIds() {
+		return !this.#grid || !this.#queryRect ? null : this.#grid.queryRect(this.#queryRect);
+	}
+	get(key) {
+		return this.#real.get(key);
+	}
+	has(key) {
+		return this.#real.has(key);
+	}
+	get size() {
+		return this.#real.size;
+	}
+	*keys() {
+		let candidates = this.#candidateIds();
+		if (!candidates) {
+			yield* this.#real.keys();
+			return;
+		}
+		for (let id of candidates) this.#real.has(id) && (yield id);
+	}
+	*values() {
+		let candidates = this.#candidateIds();
+		if (!candidates) {
+			yield* this.#real.values();
+			return;
+		}
+		for (let id of candidates) {
+			let value = this.#real.get(id);
+			value !== void 0 && (yield value);
+		}
+	}
+	*entries() {
+		let candidates = this.#candidateIds();
+		if (!candidates) {
+			yield* this.#real.entries();
+			return;
+		}
+		for (let id of candidates) {
+			let value = this.#real.get(id);
+			value !== void 0 && (yield [id, value]);
+		}
+	}
+	[Symbol.iterator]() {
+		return this.entries();
+	}
+	forEach(callback, thisArg) {
+		for (let [key, value] of this.entries()) callback.call(thisArg, value, key, this);
+	}
+	[Symbol.toStringTag] = "GestureSpatialLookup";
+	set() {
+		throw Error("GestureSpatialLookup is read-only");
+	}
+	getOrInsert() {
+		throw Error("GestureSpatialLookup is read-only");
+	}
+	getOrInsertComputed() {
+		throw Error("GestureSpatialLookup is read-only");
+	}
+	delete() {
+		throw Error("GestureSpatialLookup is read-only");
+	}
+	clear() {
+		throw Error("GestureSpatialLookup is read-only");
+	}
+};
+//#endregion
+//#region src/components/handle/connectionGestureLookup.ts
+/**
+* Upstream `getClosestHandle` prefilters nodes within
+* `connectionRadius + ADDITIONAL_DISTANCE` of the pointer; ADDITIONAL_DISTANCE
+* is hardcoded to 250 in @xyflow/system (xyhandle/utils.ts). Tracked here with
+* a safety pad: a superset of candidates is always correct (their exact
+* distance filter runs after), so the pad only costs a few extra candidates.
+*/
+const armConnectionGestureLookup = (options) => {
+	let { event, real, domNode, getTransform, connectionRadius } = options, containerBounds = domNode?.getBoundingClientRect();
+	if (!containerBounds) return real;
+	let radius = connectionRadius + 250 + 50, lookup = new GestureSpatialLookup(real, radius);
+	lookup.arm((node) => nodeToRect(node));
+	let update = (moveEvent) => {
+		lookup.setQueryCenter(pointToRendererPoint(getEventPosition(moveEvent, containerBounds), getTransform(), !1, [1, 1]), radius);
+	};
+	update(event);
+	let doc = getHostForElement(event.target), dispose = () => {
+		doc.removeEventListener("mousemove", update, !0), doc.removeEventListener("touchmove", update, !0), doc.removeEventListener("mouseup", dispose, !0), doc.removeEventListener("touchend", dispose, !0), lookup.disarm();
+	};
+	return doc.addEventListener("mousemove", update, !0), doc.addEventListener("touchmove", update, !0), doc.addEventListener("mouseup", dispose, !0), doc.addEventListener("touchend", dispose, !0), lookup;
+}, buildConnectionGestureParams = (options) => {
+	let { event, store, actions, gestureLookup } = options;
+	return {
+		lib: store.lib,
+		flowId: store.id,
+		domNode: store.domNode,
+		autoPanOnConnect: store.autoPanOnConnect,
+		autoPanSpeed: store.autoPanSpeed,
+		connectionMode: store.connectionMode,
+		connectionRadius: store.connectionRadius,
+		nodeLookup: gestureLookup,
+		cancelConnection: actions.cancelConnection,
+		panBy: actions.panBy,
+		updateConnection: ((connection) => {
+			actions.setConnection(connection), flush();
+		}),
+		isValidConnection: store.isValidConnection,
+		onConnectStart: store.onConnectStart,
+		onConnectEnd: store.onConnectEnd,
+		getTransform: () => store.transform,
+		getFromHandle: () => store.connection.fromHandle,
+		dragThreshold: store.connectionDragThreshold,
+		handleDomNode: event.currentTarget
+	};
+};
+//#endregion
 //#region src/components/edge/EdgeReconnectAnchor.tsx
 var _tmpl$$32 = /* @__PURE__ */ template("<div style=background:transparent;border:none;cursor:move>");
 /** Grab area that lets an edge end be dragged off its handle and reconnected. */
@@ -305,27 +506,24 @@ const EdgeReconnectAnchor = (props) => {
 			nodeId: edge().target,
 			handleId: edge().targetHandle ?? null,
 			type: "target"
-		};
-		XYHandle.onPointerDown(event, {
-			lib: store.lib,
-			flowId: store.id,
+		}, gestureLookup = armConnectionGestureLookup({
+			event,
+			real: nodeLookup,
 			domNode: store.domNode,
+			getTransform: () => store.transform,
+			connectionRadius: store.connectionRadius
+		});
+		XYHandle.onPointerDown(event, {
+			...buildConnectionGestureParams({
+				event,
+				store,
+				actions,
+				gestureLookup
+			}),
 			nodeId: opposite.nodeId,
 			handleId: opposite.handleId,
-			autoPanOnConnect: store.autoPanOnConnect,
-			connectionMode: store.connectionMode,
-			connectionRadius: store.connectionRadius,
-			nodeLookup,
 			isTarget: opposite.type === "target",
 			edgeUpdaterType: opposite.type,
-			cancelConnection: actions.cancelConnection,
-			panBy: actions.panBy,
-			updateConnection: (connection) => {
-				actions.setConnection(connection), flush();
-			},
-			isValidConnection: store.isValidConnection,
-			onConnectStart: store.onConnectStart,
-			onConnectEnd: store.onConnectEnd,
 			onConnect: (connection) => {
 				let newEdge = {
 					...edge(),
@@ -335,12 +533,7 @@ const EdgeReconnectAnchor = (props) => {
 			},
 			onReconnectEnd: (event, connectionState) => {
 				setReconnectingState(!1), store.onReconnectEnd?.(event, edge(), opposite.type, connectionState);
-			},
-			getTransform: () => store.transform,
-			getFromHandle: () => store.connection.fromHandle,
-			autoPanSpeed: store.autoPanSpeed,
-			dragThreshold: store.connectionDragThreshold,
-			handleDomNode: event.currentTarget
+			}
 		});
 	};
 	return createComponent(EdgeLabel, mergeProps({
@@ -416,9 +609,81 @@ const A11yDescriptions = () => {
 			}
 		})
 	];
-}, createEdgeStore = (edges) => {
-	let [store, setStore] = createStore(edges);
-	return [store, setStore];
+}, createSelectionCommands = ({ store, setNodesStore, setEdgesStore, setSelectionRect, setSelectionRectMode, nodeLookup, edgeLookup, updateNodePositions }) => {
+	let unselectNodesAndEdges = ({ nodes: _nodes, edges } = {}) => {
+		let nodesToUnselect = new Set((_nodes || store.nodes).map(({ id }) => id));
+		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, idSet = new Set(ids);
+		setNodesStore((nodes) => {
+			for (let node of nodes) {
+				let nodeWillBeSelected = idSet.has(node.id), selected = isMultiSelection && node.selected || nodeWillBeSelected;
+				node.selected !== selected && (node.selected = selected);
+			}
+		}), isMultiSelection || unselectNodesAndEdges({ nodes: [] }), flush();
+	}, addSelectedEdges = (ids) => {
+		let isMultiSelection = store.multiselectionKeyPressed, idSet = new Set(ids);
+		setEdgesStore((edges) => {
+			for (let edge of edges) {
+				let edgeWillBeSelected = idSet.has(edge.id), selected = isMultiSelection && edge.selected || edgeWillBeSelected;
+				edge.selected !== selected && (edge.selected = selected);
+			}
+		}), isMultiSelection || unselectNodesAndEdges({ edges: [] }), flush();
+	};
+	return {
+		unselectNodesAndEdges,
+		addSelectedNodes,
+		addSelectedEdges,
+		handleNodeSelection: (id, unselect, nodeRef) => {
+			let node = store.nodes.find((n) => n.id === id);
+			if (!node) {
+				emitFlowError(store.onError, "012", errorMessages.error012(id));
+				return;
+			}
+			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];
+			if (!edge) {
+				emitFlowError(store.onError, "012", errorMessages.error012(id));
+				return;
+			}
+			isEdgeSelectable(edge, store) && (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);
+		}
+	};
 }, STEP = .5 / 2, rectsEqual = (a, b) => a === b || !!a && !!b && a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height, rectsOverlap = (a, b) => a.x <= b.x + b.width && a.x + a.width >= b.x && a.y <= b.y + b.height && a.y + a.height >= b.y, createCullingViewport = (source) => createMemo(() => {
 	let { width, height } = source;
 	if (!width || !height) return null;
@@ -549,14 +814,48 @@ var RecordMapFacade = class {
 	}
 };
 //#endregion
-//#region src/core/projections/connections.ts
+//#region src/core/measurementIngest.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}`
+* The measurement ingest lifecycle (WP3): everything that flows FROM the DOM
+* measuring pass INTO the data graph, plus the garbage collection that keeps
+* the measurements root aligned with graph membership. The DOM side (resize
+* observers, the idle-scheduled measuring pass) lives in createSolidFlow;
+* headless usage never calls these.
 */
-const connectionKey = (nodeId, type, handleId) => `${nodeId}${type ? handleId ? `-${type}-${handleId}` : `-${type}` : ""}`, pairKey = (aNode, aHandle, bNode, bHandle) => `${aNode}-${aHandle}--${bNode}-${bHandle}`, createConnections = (source) => createProjection(() => {
+const createMeasurementIngest = ({ setMeasurementsStore, setNodesStore, nodes }) => (createEffect(() => new Set(nodes().map((n) => n.id)), (currentIds) => {
+	setMeasurementsStore((draft) => {
+		for (let id of Object.keys(draft)) currentIds.has(id) || delete draft[id];
+	});
+}), {
+	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;
+				}
+			}
+		});
+	}
+}), 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;
 	};
@@ -575,7 +874,20 @@ const connectionKey = (nodeId, type, handleId) => `${nodeId}${type ? handleId ?
 	let out = {};
 	for (let edge of source.edges) out[edge.id] = edge;
 	return out;
-}, {}, { key: "id" });
+}, {}, { key: "id" }), createRowRecordProjection = (rowStores) => {
+	let 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 isManualZIndexMode(zIndexMode) {
 	return zIndexMode === "manual";
 }
@@ -619,11 +931,7 @@ const EMPTY_AUTO_INDEX = /* @__PURE__ */ new Map(), createInternalNodes = (sourc
 						x,
 						y
 					}, row.internals.z = z;
-				} else source.nodes.length;
-			}
-			if (userNode.parentId) {
-				let parent = entryById.get(userNode.parentId);
-				parent?.store.row.internals.positionAbsolute.x, parent?.store.row.internals.z;
+				} else source.nodes.length, emitFlowError(source.onError, "parent-missing", `Parent node ${userNode.parentId} not found. Please make sure that parent nodes are in front of their child nodes in the nodes array.`);
 			}
 			return { row };
 		}, {}, { key: "id" }), entry = {
@@ -636,19 +944,8 @@ const EMPTY_AUTO_INDEX = /* @__PURE__ */ new Map(), createInternalNodes = (sourc
 			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);
-		}
-		for (let id of assigned.keys()) seen.has(id) || (assigned.delete(id), delete draft[id]);
-	}, {}, {
-		key: null,
-		shallow: !0
-	});
+	}, { keyed: (userNode) => userNode.id });
+	return createRowRecordProjection(rowStores);
 };
 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({
@@ -693,24 +990,14 @@ 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 };
+			let edge = edgeAccessor();
+			return { row: buildRow(source, edge) };
 		}, { 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
-	});
+	}), { keyed: (edge) => edge.id });
+	return createRowRecordProjection(rowStores);
 }, 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 (!sourceNode || !targetNode) return null;
 	let edgePosition = getEdgePosition({
 		id: edge.id,
 		sourceNode,
@@ -740,7 +1027,33 @@ const createLayoutedEdges = (source) => {
 	let out = {};
 	for (let node of source.nodes) node.parentId && (out[node.parentId] = !0);
 	return out;
-}, {}, { key: "id" }), getInitialViewport = (fitView, initialViewport, width, height, nodeLookup) => {
+}, {}, { key: "id" }), createSeededGraphStores = (props, config) => {
+	props.nodes !== void 0 && props.defaultNodes, props.edges !== void 0 && props.defaultEdges;
+	let [nodesStore, setNodesStore] = createStore(props.nodes ?? [...props.defaultNodes ?? []]), [edgesStore, setEdgesStore] = createStore(props.edges ?? [...props.defaultEdges ?? []]), nodeSeedAdopted = props.nodes !== void 0 || props.defaultNodes !== void 0, edgeSeedAdopted = props.edges !== void 0 || props.defaultEdges !== void 0;
+	return createEffect(() => {
+		let next = config().nodes;
+		if (next) for (let node of next);
+		return { next };
+	}, ({ next }) => {
+		next && (nodeSeedAdopted = !0, setNodesStore(() => next));
+	}, { defer: !0 }), createEffect(() => {
+		let next = config().edges;
+		if (next) for (let edge of next);
+		return { next };
+	}, ({ next }) => {
+		next && (edgeSeedAdopted = !0, setEdgesStore(() => next));
+	}, { defer: !0 }), createEffect(() => ({
+		nodes: config().defaultNodes,
+		edges: config().defaultEdges
+	}), ({ nodes: defaultNodes, edges: defaultEdges }) => {
+		defaultNodes && !nodeSeedAdopted && config().nodes === void 0 && (nodeSeedAdopted = !0, setNodesStore(() => [...defaultNodes])), defaultEdges && !edgeSeedAdopted && config().edges === void 0 && (edgeSeedAdopted = !0, setEdgesStore(() => [...defaultEdges]));
+	}, { defer: !0 }), {
+		nodesStore,
+		setNodesStore,
+		edgesStore,
+		setEdgesStore
+	};
+}, 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);
@@ -751,9 +1064,7 @@ const createLayoutedEdges = (source) => {
 		zoom: 1
 	};
 }, 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);
-	props.nodes !== void 0 && props.defaultNodes, props.edges !== void 0 && props.defaultEdges;
-	let [nodesStore, setNodesStore] = createStore(props.nodes ?? [...props.defaultNodes ?? []]), [edgesStore, setEdgesStore] = createStore(props.edges ?? [...props.defaultEdges ?? []]), nodeSeedAdopted = props.nodes !== void 0 || props.defaultNodes !== void 0, edgeSeedAdopted = props.edges !== void 0 || props.defaultEdges !== void 0, [measurementsStore, setMeasurementsStore] = createStore({}), internalNodes = createInternalNodes({
+	let _props = merge(getDefaultFlowStateProps(), props), initialNodeTypes = injections.initialNodeTypes ?? {}, initialEdgeTypes = injections.initialEdgeTypes ?? {}, prefersDark = injections.prefersDark ?? (() => _props.colorModeSSR === "dark"), [config, setConfig] = createSignal(_props), ariaLabelConfig = createMemo(() => 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 = createMemo(() => config().minZoom), maxZoom = createMemo(() => config().maxZoom), [nodesConnectable, setNodesConnectable] = createSignal(() => config().nodesConnectable), [nodesDraggable, setNodesDraggable] = createSignal(() => config().nodesDraggable), [panZoom, setPanZoom] = createSignal(null), [selectionRect, setSelectionRect] = createSignal(), [selectionRectMode, setSelectionRectMode] = createSignal(), [snapGrid, setSnapGrid] = createSignal(() => config().snapGrid), translateExtent = createMemo(() => 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, edgesStore, setEdgesStore } = createSeededGraphStores(props, config), [measurementsStore, setMeasurementsStore] = createStore({}), internalNodes = createInternalNodes({
 		get nodes() {
 			return nodesStore;
 		},
@@ -771,26 +1082,12 @@ const createLayoutedEdges = (source) => {
 		},
 		get zIndexMode() {
 			return config().zIndexMode;
+		},
+		get onError() {
+			return config().onFlowError;
 		}
 	}), nodeLookup = new RecordMapFacade(internalNodes), initialViewport = getInitialViewport(_props.fitView, _props.initialViewport, _props.width ?? 0, _props.height ?? 0, nodeLookup), [viewportStore, setViewportStore] = createStore(_props.viewport ?? initialViewport);
-	createEffect(() => {
-		let next = config().nodes;
-		if (next) for (let node of next);
-		return { next };
-	}, ({ next }) => {
-		next && (nodeSeedAdopted = !0, setNodesStore(() => next));
-	}, { defer: !0 }), createEffect(() => {
-		let next = config().edges;
-		if (next) for (let edge of next);
-		return { next };
-	}, ({ next }) => {
-		next && (edgeSeedAdopted = !0, setEdgesStore(() => next));
-	}, { defer: !0 }), createEffect(() => ({
-		nodes: config().defaultNodes,
-		edges: config().defaultEdges
-	}), ({ nodes: defaultNodes, edges: defaultEdges }) => {
-		defaultNodes && !nodeSeedAdopted && config().nodes === void 0 && (nodeSeedAdopted = !0, setNodesStore(() => [...defaultNodes])), defaultEdges && !edgeSeedAdopted && config().edges === void 0 && (edgeSeedAdopted = !0, setEdgesStore(() => [...defaultEdges]));
-	}, { defer: !0 }), createEffect(() => config().viewport, (next) => {
+	createEffect(() => config().viewport, (next) => {
 		next && setViewportStore(() => next);
 	}, { defer: !0 });
 	let transform = createMemo(() => [
@@ -802,25 +1099,33 @@ const createLayoutedEdges = (source) => {
 		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 = merge({
+	}), resolvedColorMode = createMemo(() => {
+		let mode = config().colorMode;
+		return mode === "system" ? prefersDark() ? "dark" : "light" : mode;
+	}), projectedConnection = createMemo(() => {
+		let state = connection();
+		return state.inProgress ? {
+			...state,
+			to: pointToRendererPoint(state.to, transform())
+		} : state;
+	}), connectionFromHandle = createMemo(() => connection().fromHandle ?? null, { equals: (a, b) => a === b || !!a && !!b && a.nodeId === b.nodeId && a.type === b.type && a.id === b.id }), connectionTargetByHandle = createProjection((draft) => {
+		let state = connection(), toHandle = state.inProgress ? state.toHandle : null, key = toHandle ? connectionKey(toHandle.nodeId, toHandle.type, toHandle.id ?? null) : null;
+		for (let existing of Object.keys(draft)) existing !== key && delete draft[existing];
+		key && (draft[key] = state.isValid ? "valid" : "invalid");
+	}, {}, { key: null }), connectionOriginByHandle = createProjection((draft) => {
+		let fromHandle = connection().fromHandle ?? clickConnectStartHandle(), fromKey = fromHandle ? connectionKey(fromHandle.nodeId, fromHandle.type, fromHandle.id ?? null) : null, siblingKey = fromHandle ? connectionKey(fromHandle.nodeId, fromHandle.type === "source" ? "target" : "source", fromHandle.id ?? null) : null;
+		for (let existing of Object.keys(draft)) existing !== fromKey && existing !== siblingKey && delete draft[existing];
+		fromKey && (draft[fromKey] = "from"), siblingKey && (draft[siblingKey] = "excluded");
+	}, {}, { key: null }), mergedNodeTypes = createMemo(() => ({
+		...initialNodeTypes,
+		...config().nodeTypes
+	})), mergedEdgeTypes = createMemo(() => ({
+		...initialEdgeTypes,
+		...config().edgeTypes
+	})), selectedNodesView = createMemo(() => nodesStore.filter((node) => node.selected)), selectedEdgesView = createMemo(() => edgesStore.filter((edge) => edge.selected)), store = merge({
 		width: 0,
 		height: 0
 	}, config, {
-		get _colorMode() {
-			return config().colorMode;
-		},
-		get _colorModeSSR() {
-			return config().colorModeSSR;
-		},
-		get _connection() {
-			return connection();
-		},
-		get _nodeTypes() {
-			return config().nodeTypes;
-		},
-		get _edgeTypes() {
-			return config().edgeTypes;
-		},
 		get ariaLabelConfig() {
 			return ariaLabelConfig();
 		},
@@ -831,14 +1136,19 @@ const createLayoutedEdges = (source) => {
 			return clickConnectStartHandle();
 		},
 		get colorMode() {
-			return this._colorMode === "system" ? prefersDark() ? "dark" : "light" : this._colorMode;
+			return resolvedColorMode();
 		},
 		get connection() {
-			let state = connection();
-			return {
-				...state,
-				to: state.inProgress ? pointToRendererPoint(state.to, this.transform) : state.to
-			};
+			return projectedConnection();
+		},
+		get connectionFromHandle() {
+			return connectionFromHandle();
+		},
+		get connectionTargetByHandle() {
+			return connectionTargetByHandle;
+		},
+		get connectionOriginByHandle() {
+			return connectionOriginByHandle;
 		},
 		get domNode() {
 			return domNode();
@@ -847,10 +1157,7 @@ const createLayoutedEdges = (source) => {
 			return dragging();
 		},
 		get edgeTypes() {
-			return {
-				...initialEdgeTypes,
-				...this._edgeTypes
-			};
+			return mergedEdgeTypes();
 		},
 		get elementsSelectable() {
 			return elementsSelectable();
@@ -883,19 +1190,16 @@ const createLayoutedEdges = (source) => {
 			return nodesDraggable();
 		},
 		get nodeTypes() {
-			return {
-				...initialNodeTypes,
-				...this._nodeTypes
-			};
+			return mergedNodeTypes();
 		},
 		get panZoom() {
 			return panZoom();
 		},
 		get selectedNodes() {
-			return nodesStore.filter((node) => node.selected);
+			return selectedNodesView();
 		},
 		get selectedEdges() {
-			return edgesStore.filter((edge) => edge.selected);
+			return selectedEdgesView();
 		},
 		get selectionRect() {
 			return selectionRect();
@@ -984,7 +1288,7 @@ const createLayoutedEdges = (source) => {
 			return store.onError;
 		},
 		nodeLookup
-	}), visibleEdgeIds = createMemo(() => Object.keys(layoutedEdges)), getEdge = (id) => layoutedEdges[id], fitView = async (options) => store.panZoom ? await fitViewport({
+	}), visibleEdgeIds = createMemo(() => Object.keys(layoutedEdges)), getLayoutedEdge = (id) => layoutedEdges[id], fitView = async (options) => store.panZoom ? await fitViewport({
 		nodes: nodeLookup,
 		width: store.width,
 		height: store.height,
@@ -1010,33 +1314,11 @@ const createLayoutedEdges = (source) => {
 		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 = () => {
+	}, { applyMeasurementWrites, applyNodeChanges } = createMeasurementIngest({
+		setMeasurementsStore,
+		setNodesStore,
+		nodes: () => nodesStore
+	}), markInitialNodesMeasured = () => {
 		initialNodesMeasured = !0, tryInitialFitView();
 	}, requestMeasure = () => {}, setMeasureRequester = (fn) => {
 		requestMeasure = fn;
@@ -1051,66 +1333,16 @@ const createLayoutedEdges = (source) => {
 			ease: options?.ease,
 			interpolate: options?.interpolate
 		}), Promise.resolve(!0)) : Promise.resolve(!1);
-	}, setPaneClickDistance = (distance) => {
-		store.panZoom?.setClickDistance(distance);
-	}, unselectNodesAndEdges = ({ nodes: _nodes, edges } = {}) => {
-		let nodesToUnselect = new Set((_nodes || store.nodes).map(({ id }) => id));
-		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;
-		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;
-		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({
+	}, stableSetViewport = (viewport) => setViewportStore(() => viewport), { unselectNodesAndEdges, addSelectedNodes, addSelectedEdges, handleNodeSelection, handleEdgeSelection, moveSelectedNodes } = createSelectionCommands({
+		store,
+		setNodesStore,
+		setEdgesStore,
+		setSelectionRect,
+		setSelectionRectMode,
+		nodeLookup,
+		edgeLookup,
+		updateNodePositions
+	}), panBy$1 = (delta) => panBy({
 		delta,
 		panZoom: store.panZoom,
 		transform: store.transform,
@@ -1187,8 +1419,27 @@ const createLayoutedEdges = (source) => {
 		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 = {
+	}, intersectionGrid = null, intersectionRows = null, queryIntersectionCandidates = (rect) => untrack(() => {
+		if (!intersectionGrid) {
+			let grid = new SpatialGrid(300), rows = /* @__PURE__ */ new Map();
+			for (let node of store.nodes) {
+				let internalNode = nodeLookup.get(node.id);
+				internalNode && (grid.insert(node.id, nodeToRect(internalNode)), rows.set(node.id, node));
+			}
+			intersectionGrid = grid, intersectionRows = rows, queueMicrotask(() => {
+				intersectionGrid = null, intersectionRows = null;
+			});
+		}
+		let rows = intersectionRows, result = [];
+		for (let id of intersectionGrid.queryRect(rect)) {
+			let row = rows.get(id);
+			row && result.push(row);
+		}
+		return result;
+	}), getNodeRect = (node) => {
+		let nodeToUse = isNode(node) ? node : nodeLookup.get(node.id);
+		if (!nodeToUse) return null;
+		let position = nodeToUse.parentId ? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.measured, nodeToUse.parentId, nodeLookup, store.nodeOrigin) : nodeToUse.position, nodeWithPosition = {
 			...nodeToUse,
 			position,
 			width: nodeToUse.measured?.width ?? nodeToUse.width,
@@ -1242,7 +1493,7 @@ const createLayoutedEdges = (source) => {
 				x,
 				y,
 				zoom
-			], _snapGrid !== null, _snapGrid || [1, 1]);
+			], !!_snapGrid, _snapGrid || [1, 1]);
 		},
 		flowToScreenPosition: (position) => {
 			if (!store.domNode) return position;
@@ -1306,14 +1557,18 @@ const createLayoutedEdges = (source) => {
 				let remainingNodes = store.nodes.filter((node) => !matchingNodes.some(({ id }) => id === node.id));
 				store.onNodesDelete?.(matchingNodes), setNodesStore(() => remainingNodes);
 			}
-			return {
+			let deletedNodes = matchingNodes ?? [], deletedEdges = matchingEdges ?? [];
+			return (deletedNodes.length > 0 || deletedEdges.length > 0) && store.onDelete?.({
+				nodes: deletedNodes,
+				edges: deletedEdges
+			}), {
 				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) => {
+			return nodeRect ? (nodesToIntersect ?? queryIntersectionCandidates(nodeRect)).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);
@@ -1369,10 +1624,6 @@ const createLayoutedEdges = (source) => {
 		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,
@@ -1384,14 +1635,12 @@ const createLayoutedEdges = (source) => {
 		parentIds,
 		connections,
 		actions: {
-			getEdge,
+			getLayoutedEdge,
 			applyInitialFitView,
 			applyMeasurementWrites,
 			applyNodeChanges,
 			markInitialNodesMeasured,
 			setMeasureRequester,
-			resetStoreValues,
-			setAriaLabelConfig,
 			setAriaLiveMessage,
 			setClickConnectStartHandle,
 			setConfig,
@@ -1399,15 +1648,11 @@ const createLayoutedEdges = (source) => {
 			setDeleteKeyPressed,
 			setDomNode,
 			setDragging,
-			get setEdges() {
-				return setEdgesStore;
-			},
+			setEdges: setEdgesStore,
 			setElementsSelectable,
 			setHeight,
 			setMultiselectionKeyPressed,
-			get setNodes() {
-				return setNodesStore;
-			},
+			setNodes: setNodesStore,
 			setNodesConnectable,
 			setNodesDraggable,
 			setPanActivationKeyPressed,
@@ -1415,9 +1660,7 @@ const createLayoutedEdges = (source) => {
 			setSelectionKeyPressed,
 			setSelectionRect,
 			setSelectionRectMode,
-			get setViewport() {
-				return (viewport) => setViewportStore(() => viewport);
-			},
+			setViewport: stableSetViewport,
 			setWidth,
 			setZoomActivationKeyPressed,
 			addEdge,
@@ -1426,7 +1669,6 @@ const createLayoutedEdges = (source) => {
 			zoomOut,
 			fitView,
 			setCenter,
-			setPaneClickDistance,
 			unselectNodesAndEdges,
 			addSelectedNodes,
 			addSelectedEdges,
@@ -1438,8 +1680,11 @@ const createLayoutedEdges = (source) => {
 			reset
 		}
 	};
+}, createEdgeStore = (edges) => {
+	let [store, setStore] = typeof edges == "function" ? createStore(edges, []) : createStore(edges);
+	return [store, setStore];
 }, createNodeStore = (nodes) => {
-	let [store, setStore] = createStore(nodes);
+	let [store, setStore] = typeof nodes == "function" ? createStore(nodes, []) : createStore(nodes);
 	return [store, setStore];
 };
 //#endregion
@@ -1447,21 +1692,28 @@ const createLayoutedEdges = (source) => {
 var _tmpl$$30 = /* @__PURE__ */ template("<svg class=solid-flow__edge-wrapper><g>");
 /** Internal per-edge wrapper: interaction, a11y, viewport culling, and the dynamic edge component. */
 const EdgeWrapper = (props) => {
-	let edgeRef, { store, actions } = useInternalSolidFlow(), edgeId = () => props.edgeId, edge = () => actions.getEdge(edgeId()), edgeType = () => edge().type ?? "default", selectable = () => edge().selectable ?? store.elementsSelectable, focusable = () => edge().focusable ?? store.edgesFocusable, edgeComponent = () => store.edgeTypes[edgeType()], markerStartUrl = () => edge().markerStart ? `url('#${getMarkerId(edge().markerStart, store.id)}')` : void 0, markerEndUrl = () => edge().markerEnd ? `url('#${getMarkerId(edge().markerEnd, store.id)}')` : void 0, onClick = (event) => {
+	let edgeRef, { store, actions } = useInternalSolidFlow(), edgeId = () => props.edgeId, edge = () => actions.getLayoutedEdge(edgeId()), edgeType = () => edge().type ?? "default", selectable = () => isEdgeSelectable(edge(), store), focusable = () => edge().focusable ?? store.edgesFocusable, edgeTypeValid = () => edgeType() in store.edgeTypes, edgeComponent = () => store.edgeTypes[edgeTypeValid() ? edgeType() : "default"];
+	createEffect(() => ({
+		valid: edgeTypeValid(),
+		edgeType: edgeType()
+	}), ({ valid, edgeType }) => {
+		valid || emitFlowError(store.onError, "011", errorMessages.error011(edgeType));
+	});
+	let markerStartUrl = () => edge().markerStart ? `url('#${getMarkerId(edge().markerStart, store.id)}')` : void 0, markerEndUrl = () => edge().markerEnd ? `url('#${getMarkerId(edge().markerEnd, store.id)}')` : void 0, onClick = (event) => {
 		selectable() && actions.handleEdgeSelection(edgeId()), props.onEdgeClick?.({
 			edge: edge(),
 			event
 		});
-	}, onPointerEvent = (event, type) => {
-		({
-			contextmenu: props.onEdgeContextMenu,
-			pointerenter: props.onEdgePointerEnter,
-			pointerleave: props.onEdgePointerLeave
-		})[type]?.({
-			edge: edge(),
-			event
-		});
-	}, onKeyDown = (event) => {
+	}, onContextMenu = (event) => props.onEdgeContextMenu?.({
+		edge: edge(),
+		event
+	}), onPointerEnter = (event) => props.onEdgePointerEnter?.({
+		edge: edge(),
+		event
+	}), onPointerLeave = (event) => props.onEdgePointerLeave?.({
+		edge: edge(),
+		event
+	}), onKeyDown = (event) => {
 		store.disableKeyboardA11y || !elementSelectionKeys.includes(event.key) || !selectable() || (event.key === "Escape" ? (edgeRef?.blur(), actions.unselectNodesAndEdges({ edges: [edge()] })) : actions.addSelectedEdges([edge().id]));
 	}, ariaLabel = () => edge().ariaLabel ?? `Edge from ${edge().source} to ${edge().target}`, culled = createMemo(() => isEdgeCulled(edge(), store.cullingViewport));
 	return createComponent(EdgeIdContext, {
@@ -1504,9 +1756,9 @@ const EdgeWrapper = (props) => {
 						},
 						onClick,
 						onKeyDown: (e) => focusable() && onKeyDown(e),
-						onContextMenu: (e) => onPointerEvent(e, "contextmenu"),
-						onPointerEnter: (e) => onPointerEvent(e, "pointerenter"),
-						onPointerLeave: (e) => onPointerEvent(e, "pointerleave")
+						onContextMenu,
+						onPointerEnter,
+						onPointerLeave
 					}, () => edge().domAttributes), !0), insert(_el$2, createComponent(Dynamic, {
 						get component() {
 							return edgeComponent();
@@ -1887,7 +2139,7 @@ const Handle = (props) => {
 		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;
+	}), { 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, originState = () => store.connectionOriginByHandle[connectionKey(nodeId(), _props.type, handleId())], connectingFrom = () => originState() === "from", targetState = () => store.connectionTargetByHandle[connectionKey(nodeId(), _props.type, handleId())], connectingTo = () => targetState() !== void 0, valid = () => targetState() === "valid", prevConnections = null;
 	createEffect(() => {
 		if (!_props.onConnect && !_props.onDisconnect) return null;
 		let rec = connections[connectionKey(nodeId(), _props.type, _props.id)], map = /* @__PURE__ */ new Map();
@@ -1905,37 +2157,25 @@ const Handle = (props) => {
 		}, edge = store.onBeforeConnect?.(handleConnection) ?? handleConnection;
 		actions.addEdge(edge), store.onConnect?.(handleConnection);
 	}, onPointerDown = (event) => {
+		let gestureLookup = armConnectionGestureLookup({
+			event,
+			real: nodeLookup,
+			domNode: store.domNode,
+			getTransform: () => store.transform,
+			connectionRadius: store.connectionRadius
+		});
 		XYHandle.onPointerDown(event, {
+			...buildConnectionGestureParams({
+				event,
+				store,
+				actions,
+				gestureLookup
+			}),
 			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
+			onConnect: onConnectExtended
 		});
 	}, onClick = (event) => {
 		if (!nodeId() || !store.clickConnectStartHandle && !_props.isConnectableStart) return;
@@ -1970,7 +2210,7 @@ const Handle = (props) => {
 		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);
+	};
 	var _el$ = _tmpl$$29();
 	return spread(_el$, mergeProps(rest, {
 		role: "button",
@@ -2013,7 +2253,7 @@ const Handle = (props) => {
 					connectablestart: _props.isConnectableStart,
 					connectableend: _props.isConnectableEnd,
 					connectable: !!connectable(),
-					connectionindicator: connectionIndicator()
+					excluded: !!originState()
 				}
 			];
 		}
@@ -2141,7 +2381,7 @@ const NodeWrapper = (props) => {
 		let el = nodeRef();
 		el && props.resizeObserver?.unobserve(el);
 	});
-	let 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 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[nodeTypeValid() ? nodeType() : "default"], isParentNode = () => !!parentIds[node().id], transform = () => {
 		let { x, y } = node().internals.positionAbsolute;
 		return `translate(${x}px, ${y}px)`;
 	}, sizeStyle = () => {
@@ -2152,17 +2392,18 @@ const NodeWrapper = (props) => {
 			...h ? { height: toPxString(h) } : {}
 		};
 	}, culled = createMemo(() => isNodeCulled(node(), store.cullingViewport)), style = () => ({
+		...sizeStyle(),
 		"z-index": node().internals.z,
 		transform: transform(),
 		visibility: culled() || !nodeHasDimensions(node()) ? "hidden" : "visible",
-		"pointer-events": culled() ? "none" : void 0,
-		...sizeStyle(),
-		...node().style ?? {}
+		"pointer-events": culled() ? "none" : void 0
 	});
 	createEffect(() => ({
 		valid: nodeTypeValid(),
 		nodeType: nodeType()
-	}), ({ valid, nodeType }) => {}), createEffect(() => ({
+	}), ({ valid, nodeType }) => {
+		valid || emitFlowError(store.onError, "003", errorMessages.error003(nodeType));
+	}), createEffect(() => ({
 		id: node().id,
 		nodeElement: nodeRef(),
 		nodeType: nodeType(),
@@ -2517,7 +2758,7 @@ const InitialNodeTypesMap = {
 		pendingEntries = updateEntries, scheduleIdleCallback(() => {
 			let updates = new Map(pendingEntries);
 			pendingEntries = void 0;
-			let { updatedInternals, measurementWrites, changes, parentExpandChildren } = measureNodeInternals(updates, nodeLookup, store.domNode);
+			let { updatedInternals, measurementWrites, changes, parentExpandChildren } = measureNodeInternals(updates, nodeLookup, store.domNode, store.nodeExtent);
 			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());
 		});
 	};
@@ -2539,21 +2780,29 @@ function useInternalSolidFlow() {
 var _tmpl$$26 = /* @__PURE__ */ template("<svg class=\"solid-flow__container solid-flow__connectionline\"><g>"), _tmpl$2$2 = /* @__PURE__ */ template("<svg><path class=solid-flow__connection-path fill=none></svg>", 2);
 /** Internal component rendering the in-progress connection line. */
 const ConnectionLine = (props) => {
-	let { store } = useInternalSolidFlow(), connectionStatus = () => getConnectionStatus(store.connection.isValid);
+	let { store } = useInternalSolidFlow(), connectionStatus = () => getConnectionStatus(store.connection.isValid), inProgress = createMemo(() => {
+		let state = store.connection;
+		return state.inProgress ? state : null;
+	});
 	return createComponent(Show, {
 		get when() {
-			return store.connection.inProgress;
+			return inProgress();
 		},
-		get children() {
+		children: (connection) => (() => {
 			var _el$ = _tmpl$$26(), _el$2 = _el$.firstChild;
 			return insert(_el$2, createComponent(Show, {
 				get when() {
 					return props.component;
 				},
 				get fallback() {
-					return createComponent(InternalConnectionLine, { get style() {
-						return props.style;
-					} });
+					return createComponent(InternalConnectionLine, {
+						get style() {
+							return props.style;
+						},
+						get connection() {
+							return connection();
+						}
+					});
 				},
 				children: (CustomComponent) => {
 					let UserConnectionLine = CustomComponent();
@@ -2565,37 +2814,37 @@ const ConnectionLine = (props) => {
 							return props.style;
 						},
 						get fromNode() {
-							return store.connection.fromNode;
+							return connection().fromNode;
 						},
 						get fromHandle() {
-							return store.connection.fromHandle;
+							return connection().fromHandle;
 						},
 						get fromX() {
-							return store.connection.from.x;
+							return connection().from.x;
 						},
 						get fromY() {
-							return store.connection.from.y;
+							return connection().from.y;
 						},
 						get toX() {
-							return store.connection.to.x;
+							return connection().to.x;
 						},
 						get toY() {
-							return store.connection.to.y;
+							return connection().to.y;
 						},
 						get fromPosition() {
-							return store.connection.fromPosition;
+							return connection().fromPosition;
 						},
 						get toPosition() {
-							return store.connection.toPosition;
+							return connection().toPosition;
 						},
 						get connectionStatus() {
 							return connectionStatus();
 						},
 						get toNode() {
-							return store.connection.toNode;
+							return connection().toNode;
 						},
 						get toHandle() {
-							return store.connection.toHandle;
+							return connection().toHandle;
 						}
 					});
 				}
@@ -2607,18 +2856,17 @@ const ConnectionLine = (props) => {
 			}), ({ e, t, a, o }, _p$) => {
 				e !== _p$?.e && setAttribute(_el$, "width", e), t !== _p$?.t && setAttribute(_el$, "height", t), style(_el$, a, _p$?.a), className(_el$2, o, _p$?.o);
 			}), _el$;
-		}
+		})()
 	});
 }, InternalConnectionLine = (props) => {
 	let { store } = useInternalSolidFlow(), path = () => {
-		if (!store.connection.inProgress) return;
 		let pathParams = {
-			sourceX: store.connection.from.x,
-			sourceY: store.connection.from.y,
-			sourcePosition: store.connection.fromPosition,
-			targetX: store.connection.to.x,
-			targetY: store.connection.to.y,
-			targetPosition: store.connection.toPosition
+			sourceX: props.connection.from.x,
+			sourceY: props.connection.from.y,
+			sourcePosition: props.connection.fromPosition,
+			targetX: props.connection.to.x,
+			targetY: props.connection.to.y,
+			targetPosition: props.connection.toPosition
 		};
 		switch (store.connectionLineType) {
 			case "default": {
@@ -2718,25 +2966,32 @@ const MarkerDefinition = () => {
 			})), _el$;
 		}
 	});
+}, createFocusedIdTracker = () => {
+	let [focusedId, setFocusedId] = createSignal(null);
+	return {
+		focusedId,
+		onFocusIn: (event) => {
+			let element = event.target.closest("[data-id]");
+			setFocusedId(element?.getAttribute("data-id") ?? null);
+		},
+		onFocusOut: () => setFocusedId(null)
+	};
 };
 //#endregion
 //#region src/components/container/EdgeRenderer.tsx
 var _tmpl$$23 = /* @__PURE__ */ template("<div class=solid-flow__edges><!><!>");
 /** Internal renderer iterating the edge id list into `EdgeWrapper`s. */
 const EdgeRenderer = (props) => {
-	let { store, actions } = useInternalSolidFlow(), [focusedEdgeId, setFocusedEdgeId] = createSignal(null), onFocusIn = (event) => {
-		let edgeElement = event.target.closest("[data-id]");
-		setFocusedEdgeId(edgeElement?.getAttribute("data-id") ?? null);
-	};
+	let { store, actions } = useInternalSolidFlow(), { focusedId: focusedEdgeId, onFocusIn, onFocusOut } = createFocusedIdTracker();
 	var _el$ = _tmpl$$23(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-	return _el$.$$focusout = () => setFocusedEdgeId(null), _el$.$$focusin = onFocusIn, insert(_el$, createComponent(MarkerDefinition, {}), _el$2), insert(_el$, createComponent(For, {
+	return addEvent(_el$, "focusout", onFocusOut, !0), addEvent(_el$, "focusin", onFocusIn, !0), insert(_el$, createComponent(MarkerDefinition, {}), _el$2), insert(_el$, createComponent(For, {
 		get each() {
 			return store.visibleEdgeIds;
 		},
 		children: (edgeId) => {
 			let unmounted = createMemo(() => {
 				if (!store.onlyRenderVisibleElements || focusedEdgeId() === edgeId) return !1;
-				let edge = actions.getEdge(edgeId);
+				let edge = actions.getLayoutedEdge(edgeId);
 				return !!edge && isEdgeCulled(edge, store.cullingViewport);
 			});
 			return createComponent(Show, {
@@ -2783,12 +3038,9 @@ const NodeRenderer = (props) => {
 	onCleanup(() => {
 		resizeObserver?.disconnect();
 	});
-	let [focusedNodeId, setFocusedNodeId] = createSignal(null), onFocusIn = (event) => {
-		let nodeElement = event.target.closest("[data-id]");
-		setFocusedNodeId(nodeElement?.getAttribute("data-id") ?? null);
-	};
+	let { focusedId: focusedNodeId, onFocusIn, onFocusOut } = createFocusedIdTracker();
 	var _el$ = _tmpl$$22();
-	return _el$.$$focusout = () => setFocusedNodeId(null), _el$.$$focusin = onFocusIn, insert(_el$, createComponent(For, {
+	return addEvent(_el$, "focusout", onFocusOut, !0), addEvent(_el$, "focusin", onFocusIn, !0), insert(_el$, createComponent(For, {
 		get each() {
 			return store.visibleNodeIds;
 		},
@@ -2848,10 +3100,10 @@ const isSetEqual = (a, b) => {
 	for (let item of a) if (!b.has(item)) return !1;
 	return !0;
 }, Pane = (props) => {
-	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 = {
+	let { store, nodeLookup, edgeLookup, connections, actions } = useInternalSolidFlow(), [containerRef, setContainerRef] = createSignal(), container, containerBounds = null, connectionEndedOnPane = !1, selectionInProgress = !1, selectionSpatialLookup = new GestureSpatialLookup(nodeLookup, 400), 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) => {
+	}, autoPanStarted = !1, autoPanOnSelection = () => props.autoPanOnSelection ?? !0, paneClickDistance = () => props.paneClickDistance ?? 0, _panOnDrag = () => store.panActivationKeyPressed || props.panOnDrag, isSelecting = () => store.selectionKeyPressed || !!store.selectionRect || props.selectionOnDrag && _panOnDrag() !== !0, isSelectionEnabled = () => store.elementsSelectable && (isSelecting() || store.selectionRectMode === "user"), onClick = (event) => {
 		if (event.target === container) {
 			if (selectionInProgress || store.connection.inProgress || connectionEndedOnPane) {
 				selectionInProgress = !1, connectionEndedOnPane = !1;
@@ -2863,7 +3115,7 @@ const isSetEqual = (a, b) => {
 		if (event.pointerType === "touch" && _panOnDrag() !== !1 && !store.selectionKeyPressed || (containerBounds = container?.getBoundingClientRect() ?? null, !containerBounds)) return;
 		let eventTargetIsContainer = event.target === container, isNoKeyEvent = !eventTargetIsContainer && !!event.target.closest(".nokey"), isSelectionActive = props.selectionOnDrag && eventTargetIsContainer || store.selectionKeyPressed;
 		if (isNoKeyEvent || !isSelecting() || !isSelectionActive || event.button !== 0 || !event.isPrimary) return;
-		event.target?.setPointerCapture?.(event.pointerId), selectionInProgress = !1, autoPanStarted = !1;
+		event.target?.setPointerCapture?.(event.pointerId), selectionSpatialLookup.arm((node) => nodeToRect(node)), selectionInProgress = !1, autoPanStarted = !1;
 		let { x, y } = getEventPosition(event, containerBounds), userSelectionFlowOrigin = pointToRendererPoint({
 			x,
 			y
@@ -2890,14 +3142,21 @@ const isSetEqual = (a, b) => {
 			width: Math.abs(mouseX - screenStart.x),
 			height: Math.abs(mouseY - screenStart.y)
 		}, prevSelectedNodeIds = selectedNodeIds, prevSelectedEdgeIds = selectedEdgeIds;
-		selectedNodeIds = new Set(getNodesInside(nodeLookup, nextUserSelectRect, store.transform, store.selectionMode === SelectionMode$1.Partial, !0).map((n) => n.id));
-		let edgesSelectable = store.defaultEdgeOptions.selectable ?? !0;
-		selectedEdgeIds = /* @__PURE__ */ new Set();
+		{
+			let [tx, ty, zoom] = store.transform;
+			selectionSpatialLookup.setQueryRect({
+				x: (nextUserSelectRect.x - tx) / zoom,
+				y: (nextUserSelectRect.y - ty) / zoom,
+				width: nextUserSelectRect.width / zoom,
+				height: nextUserSelectRect.height / zoom
+			});
+		}
+		selectedNodeIds = new Set(getNodesInside(selectionSpatialLookup, nextUserSelectRect, store.transform, store.selectionMode === SelectionMode$1.Partial, !0).map((n) => n.id)), selectedEdgeIds = /* @__PURE__ */ new Set();
 		for (let nodeId of selectedNodeIds) {
 			let nodeConnections = connections[nodeId];
 			if (nodeConnections) for (let { edgeId } of Object.values(nodeConnections)) {
 				let edge = edgeLookup[edgeId];
-				edge && (edge.selectable ?? edgesSelectable) && selectedEdgeIds.add(edgeId);
+				edge && isEdgeSelectable(edge, store) && selectedEdgeIds.add(edgeId);
 			}
 		}
 		isSetEqual(prevSelectedNodeIds, selectedNodeIds) || actions.setNodes((nodes) => {
@@ -3132,7 +3391,7 @@ const Selection = (props) => {
 var _tmpl$$16 = /* @__PURE__ */ template("<div>");
 /** Internal draggable bounding box rendered around multi-selected nodes. */
 const NodeSelection = (props) => {
-	let { store, nodeLookup, actions } = useInternalSolidFlow(), [ref$2, setRef] = createSignal(), bounds = () => store.selectionRectMode === "nodes" ? getInternalNodesBounds(nodeLookup, { filter: (node) => !!node.selected }) : null;
+	let { store, nodeLookup, actions } = useInternalSolidFlow(), [ref$2, setRef] = createSignal(), bounds = createMemo(() => store.selectionRectMode === "nodes" ? getInternalNodesBounds(nodeLookup, { filter: (node) => !!node.selected }) : null);
 	createEffect(() => ({
 		el: ref$2(),
 		focusable: !store.disableKeyboardA11y
@@ -3140,13 +3399,13 @@ const NodeSelection = (props) => {
 		focusable && el?.focus({ preventScroll: !0 });
 	});
 	let onContextMenu = (event) => {
-		let selectedNodes = store.nodes.filter((n) => n.selected);
+		let selectedNodes = store.selectedNodes;
 		props.onSelectionContextMenu?.({
 			nodes: selectedNodes,
 			event
 		});
 	}, onClick = (event) => {
-		let selectedNodes = store.nodes.filter((n) => n.selected);
+		let selectedNodes = store.selectedNodes;
 		props.onSelectionClick?.({
 			nodes: selectedNodes,
 			event
@@ -3229,29 +3488,13 @@ const Attribution = (props) => createComponent(Show, {
 			}
 		});
 	}
-});
-//#endregion
-//#region src/hooks/useSolidFlow.ts
-/**
-* 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 the flow's read struct and write surface
-*/
-function useSolidFlow() {
-	let { flow, commands } = useInternalSolidFlow();
-	return {
-		...commands,
-		flow,
-		commands
-	};
-}
-//#endregion
-//#region src/components/utility/KeyHandler.ts
+}), MODIFIER_FLAG = {
+	alt: "altKey",
+	control: "ctrlKey",
+	ctrl: "ctrlKey",
+	meta: "metaKey",
+	shift: "shiftKey"
+};
 function isKeyObject(key) {
 	return typeof key == "object" && !!key;
 }
@@ -3283,18 +3526,13 @@ function matchesKey(event, keyDef) {
 function matchesKeyArray(event, keyDefs) {
 	return keyDefs ? (Array.isArray(keyDefs) ? keyDefs : [keyDefs]).some((keyDef) => matchesKey(event, keyDef)) : !1;
 }
-const MODIFIER_FLAG = {
-	alt: "altKey",
-	control: "ctrlKey",
-	ctrl: "ctrlKey",
-	meta: "metaKey",
-	shift: "shiftKey"
-};
 /**
 * Whether an event's modifier flags PROVE this key definition cannot be held
 * right now: the key itself is a modifier whose flag is off, or one of its
 * required modifiers is off. Definitions built on non-modifier keys are never
-* contradicted (their state isn't derivable from flags).
+* contradicted (their state isn't derivable from flags). This is the
+* self-heal for OS overlays that swallow keyups without blurring the window
+* (upstream xyflow#5679).
 */
 function isContradicted(flags, keyDef) {
 	let keyFlag = MODIFIER_FLAG[getKeyString(keyDef).toLowerCase()];
@@ -3311,6 +3549,28 @@ function allContradicted(flags, keyDefs) {
 	let keys = Array.isArray(keyDefs) ? keyDefs : [keyDefs];
 	return keys.length > 0 && keys.every((keyDef) => isContradicted(flags, keyDef));
 }
+//#endregion
+//#region src/hooks/useSolidFlow.ts
+/**
+* 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 the flow's read struct and write surface
+*/
+function useSolidFlow() {
+	let { flow, commands } = useInternalSolidFlow();
+	return {
+		...commands,
+		flow,
+		commands
+	};
+}
+//#endregion
+//#region src/components/utility/KeyHandler.ts
 const KeyHandler = (props) => {
 	let { store, actions } = useInternalSolidFlow(), { deleteElements } = useSolidFlow(), _props = {
 		get selectionKey() {
@@ -3345,14 +3605,11 @@ const KeyHandler = (props) => {
 	}, handleWindowBlur = () => {
 		resetKeysAndSelection(), cancelPointerGestures();
 	}, handleDelete = async () => {
-		let selectedNodes = store.nodes.filter((node) => node.selected), selectedEdges = store.edges.filter((edge) => edge.selected), { deletedNodes, deletedEdges } = await deleteElements({
+		let selectedNodes = store.selectedNodes, selectedEdges = store.selectedEdges;
+		await deleteElements({
 			nodes: selectedNodes,
 			edges: selectedEdges
 		});
-		(deletedNodes.length > 0 || deletedEdges.length > 0) && store.onDelete?.({
-			nodes: deletedNodes,
-			edges: deletedEdges
-		});
 	};
 	return isServer || (createEventListenerMap(window, {
 		keydown: (event) => {
@@ -3370,7 +3627,7 @@ const KeyHandler = (props) => {
 		capture: !0,
 		passive: !0
 	})), null;
-};
+}, FLOW_PROP_KEYS = /* @__PURE__ */ "ariaLabelConfig.ariaLiveMessage.attributionPosition.autoPanOnConnect.autoPanOnNodeDrag.autoPanOnNodeFocus.autoPanOnSelection.autoPanSpeed.class.clickConnect.colorMode.colorModeSSR.connectionDragThreshold.connectionLineComponent.connectionLineContainerStyle.connectionLineStyle.connectionLineType.connectionMode.connectionRadius.defaultEdgeOptions.defaultEdges.defaultMarkerColor.defaultNodes.deleteKey.disableKeyboardA11y.edgeTypes.edges.edgesFocusable.elementsSelectable.elevateEdgesOnSelect.elevateNodesOnSelect.fitView.fitViewOptions.height.id.initialViewport.isValidConnection.maxZoom.minZoom.multiSelectionKey.noDragClass.noPanClass.noWheelClass.nodeClickDistance.nodeDragThreshold.nodeExtent.nodeOrigin.nodeTypes.nodes.nodesConnectable.nodesDraggable.nodesFocusable.onBeforeConnect.onBeforeDelete.onBeforeReconnect.onClickConnectEnd.onClickConnectStart.onConnect.onConnectEnd.onConnectStart.onDelete.onEdgeClick.onEdgeContextMenu.onEdgePointerEnter.onEdgePointerLeave.onEdgesDelete.onFlowError.onInit.onMove.onMoveEnd.onMoveStart.onNodeClick.onNodeContextMenu.onNodeDrag.onNodeDragStart.onNodeDragStop.onNodePointerEnter.onNodePointerLeave.onNodePointerMove.onNodesDelete.onPaneClick.onPaneContextMenu.onReconnect.onReconnectEnd.onReconnectStart.onSelectionChange.onSelectionClick.onSelectionContextMenu.onSelectionDrag.onSelectionDragStart.onSelectionDragStop.onSelectionEnd.onSelectionStart.onlyRenderVisibleElements.panActivationKey.panOnDrag.panOnScroll.panOnScrollMode.panOnScrollSpeed.paneClickDistance.preventScrolling.proOptions.selectNodesOnDrag.selectionKey.selectionMode.selectionOnDrag.snapGrid.style.translateExtent.viewport.width.zIndexMode.zoomActivationKey.zoomOnDoubleClick.zoomOnPinch.zoomOnScroll".split(".");
 //#endregion
 //#region src/components/SolidFlow.tsx
 var _tmpl$$14 = /* @__PURE__ */ template("<div class=\"solid-flow__container solid-flow__viewport-back\">"), _tmpl$2 = /* @__PURE__ */ template("<div class=\"solid-flow__container solid-flow__edge-labels\">"), _tmpl$3 = /* @__PURE__ */ template("<div>");
@@ -3379,30 +3636,19 @@ const SolidFlow = (props) => {
 	let [domNodeRef, setDomNodeRef] = createSignal(), domNode, _props = merge({
 		...getDefaultFlowStateProps(),
 		colorMode: "light",
-		deleteKeyCode: "Backspace",
-		defaultViewport: {
-			x: 0,
-			y: 0,
-			zoom: 1
-		},
-		multiSelectionKeyCode: isMacOs() ? "Meta" : "Control",
 		nodeClickDistance: 0,
 		panOnScroll: !1,
-		panActivationKeyCode: "Space",
 		preventScrolling: !0,
 		panOnDrag: !0,
 		panOnScrollSpeed: .5,
 		panOnScrollMode: "free",
 		paneClickDistance: 0,
-		reconnectRadius: 10,
-		selectionKeyCode: "Shift",
 		selectionOnDrag: !1,
 		translateExtent: infiniteExtent,
-		zoomActivationKeyCode: isMacOs() ? "Meta" : "Control",
 		zoomOnPinch: !0,
 		zoomOnDoubleClick: !0,
 		zoomOnScroll: !0
-	}, props), htmlProps = omit(_props, "nodes", "edges", "defaultNodes", "defaultEdges", "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;
+	}, props), htmlProps = omit(_props, ...FLOW_PROP_KEYS, "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) => {
@@ -3411,11 +3657,6 @@ const SolidFlow = (props) => {
 			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,
@@ -3424,7 +3665,7 @@ const SolidFlow = (props) => {
 	createEffect(() => selectedElements(), (params) => {
 		untrack(() => _props.onSelectionChange)?.(params);
 	});
-	let rootStyle = () => ({
+	let asyncSeedGuard = () => (_props.nodes?.length, _props.edges?.length, null), rootStyle = () => ({
 		width: toPxString(_props.width),
 		height: toPxString(_props.height),
 		..._props.style
@@ -3440,7 +3681,13 @@ const SolidFlow = (props) => {
 				"solid-flow",
 				"solid-flow__container",
 				_props.class,
-				store.colorMode
+				store.colorMode,
+				{
+					connecting: !!store.connectionFromHandle || !!store.clickConnectStartHandle,
+					"connecting-from-source": (store.connectionFromHandle ?? store.clickConnectStartHandle)?.type === "source",
+					"connecting-from-target": (store.connectionFromHandle ?? store.clickConnectStartHandle)?.type === "target",
+					"connection-strict": store.connectionMode === "strict"
+				}
 			];
 		},
 		get style() {
@@ -3457,6 +3704,7 @@ const SolidFlow = (props) => {
 		value: solidFlow,
 		get children() {
 			return [
+				memo(() => asyncSeedGuard()),
 				createComponent(KeyHandler, {
 					get selectionKey() {
 						return _props.selectionKey;
@@ -3551,9 +3799,6 @@ const SolidFlow = (props) => {
 									return [
 										_tmpl$$14(),
 										createComponent(EdgeRenderer, {
-											get reconnectRadius() {
-												return _props.reconnectRadius;
-											},
 											get onEdgeClick() {
 												return _props.onEdgeClick;
 											},
@@ -3565,9 +3810,6 @@ const SolidFlow = (props) => {
 											},
 											get onEdgePointerLeave() {
 												return _props.onEdgePointerLeave;
-											},
-											get defaultEdgeOptions() {
-												return _props.defaultEdgeOptions;
 											}
 										}),
 										_tmpl$2(),
@@ -3713,8 +3955,8 @@ function useConnection() {
 * @returns store with an array of nodes
 */
 function useNodes() {
-	let { store } = useInternalSolidFlow();
-	return () => store.nodes;
+	let { flow } = useInternalSolidFlow();
+	return () => flow.nodes;
 }
 /**
 * Hook for getting the current edges from the store.
@@ -3723,8 +3965,8 @@ function useNodes() {
 * @returns store with an array of edges
 */
 function useEdges() {
-	let { store } = useInternalSolidFlow();
-	return () => store.edges;
+	let { flow } = useInternalSolidFlow();
+	return () => flow.edges;
 }
 /**
 * Hook for getting the current viewport from the store.
@@ -3782,6 +4024,52 @@ function useInternalNode(id) {
 	return () => flow.internalNodes[id()];
 }
 //#endregion
+//#region src/hooks/useKeyPress.ts
+/**
+* Reactive "is this key (combo) held right now?" — the Solid Flow
+* counterpart of React Flow's `useKeyPress`, usable anywhere (no flow
+* context required).
+*
+* The definition is an Accessor per house convention — `useKeyPress(() =>
+* "a")`, `useKeyPress(() => ["a", "d"])`, or `useKeyPress(() => ({ key:
+* "s", modifier: ["meta"] }))`; swapping the definition resets the state.
+*
+* Hardened beyond upstream:
+* - Combos re-activate when the base key is re-pressed while the modifier
+*   stays held (upstream's oldest open key bug, xyflow#2248).
+* - Stuck modifiers self-heal from the flags later keyboard/pointer/wheel
+*   events carry (OS overlays swallow keyups without blurring — the macOS
+*   screenshot HUD; xyflow#5679), and window blur resets.
+*/
+function useKeyPress(keys) {
+	let [pressed, setPressed] = createSignal(!1);
+	if (createEffect(() => keys(), () => {
+		setPressed(!1);
+	}, { defer: !0 }), !isServer) {
+		let reconcile = (event) => {
+			pressed() && allContradicted(event, keys()) && (setPressed(!1), flush());
+		};
+		createEventListenerMap(window, {
+			keydown: (event) => {
+				reconcile(event), matchesKeyArray(event, keys()) && (setPressed(!0), flush());
+			},
+			keyup: (event) => {
+				reconcile(event), matchesKeyArray(event, keys()) && (setPressed(!1), flush());
+			},
+			blur: () => {
+				setPressed(!1), flush();
+			}
+		}), createEventListenerMap(window, {
+			pointerdown: reconcile,
+			wheel: reconcile
+		}, {
+			capture: !0,
+			passive: !0
+		});
+	}
+	return pressed;
+}
+//#endregion
 //#region src/hooks/useNodeConnections.ts
 /**
 * Hook to retrieve all edges connected to a node. Can be filtered by handle type and id.
@@ -4151,7 +4439,7 @@ delegateEvents(["click"]);
 //#endregion
 //#region src/plugins/minimap/MiniMap.tsx
 var _tmpl$$3 = /* @__PURE__ */ template("<svg class=solid-flow__minimap-svg role=img><title></title><path class=solid-flow__minimap-mask fill-rule=evenodd pointer-events=none>");
-const getAttrFunction = (func) => func instanceof Function ? func : () => func, MiniMap = (props) => {
+const getAttrFunction = (value) => value instanceof Function ? value : () => value, MiniMap = (props) => {
 	let { store, nodeLookup } = useInternalSolidFlow(), _props = propDefaults(props, {
 		position: "bottom-right",
 		nodeClass: "",
@@ -4161,26 +4449,47 @@ const getAttrFunction = (func) => func instanceof Function ? func : () => func,
 		width: 200,
 		height: 150,
 		nodeBorderRadius: 5,
+		offsetScale: 5,
 		nodeStrokeWidth: 2,
 		style: {}
-	}), paneProps = omit(_props, "class", "style", "position", "nodeClass", "nodeStrokeColor", "nodeColor", "pannable", "zoomable", "inversePan", "zoomStep", "bgColor", "width", "height", "maskColor", "maskStrokeColor", "maskStrokeWidth", "nodeBorderRadius", "nodeStrokeWidth", "nodeComponent", "onClick", "onNodeClick"), 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 = () => ({
+	}), paneProps = omit(_props, "class", "style", "position", "nodeClass", "nodeStrokeColor", "nodeColor", "pannable", "zoomable", "inversePan", "zoomStep", "offsetScale", "bgColor", "width", "height", "maskColor", "maskStrokeColor", "maskStrokeWidth", "nodeBorderRadius", "nodeStrokeWidth", "nodeComponent", "onClick", "onNodeClick"), 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}`), viewBB = createMemo(() => ({
 		x: -store.viewport.x / store.viewport.zoom,
 		y: -store.viewport.y / store.viewport.zoom,
 		width: store.width / store.viewport.zoom,
 		height: store.height / store.viewport.zoom
-	}), getBoundingRect = () => {
-		let viewBB = getViewBB();
-		return nodeLookup.size > 0 ? getBoundsOfRects(getInternalNodesBounds(nodeLookup), viewBB) : viewBB;
-	}, 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();
+	})), rectsEqual = (a, b) => a === b || !!a && !!b && a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height, sampleBounds = () => untrack(() => {
+		if (nodeLookup.size === 0) return null;
+		let bounds = getInternalNodesBounds(nodeLookup);
+		return Number.isFinite(bounds.x) && Number.isFinite(bounds.width) ? bounds : null;
+	}), [graphBounds, setGraphBounds] = createSignal(sampleBounds(), { equals: rectsEqual });
+	createEffect(() => store.dragging, (dragging) => {
+		if (!dragging) {
+			setGraphBounds(sampleBounds());
+			return;
+		}
+		let raf = requestAnimationFrame(function tick() {
+			setGraphBounds(sampleBounds()), raf = requestAnimationFrame(tick);
+		});
+		return () => cancelAnimationFrame(raf);
+	}), createEffect(() => ({
+		count: store.nodes.length,
+		initialized: store.nodesInitialized
+	}), () => {
+		setGraphBounds(sampleBounds());
+	}), createEffect(() => null, () => {
+		let interval = setInterval(() => setGraphBounds(sampleBounds()), 500);
+		return () => clearInterval(interval);
+	});
+	let boundingRect = createMemo(() => {
+		let view = viewBB(), bounds = graphBounds();
+		return bounds ? getBoundsOfRects(bounds, view) : view;
+	}), viewScale = createMemo(() => Math.max(boundingRect().width / _props.width, boundingRect().height / _props.height)), getViewWidth = () => viewScale() * _props.width, getViewHeight = () => viewScale() * _props.height, getOffset = () => _props.offsetScale * viewScale(), getX = () => {
+		let rect = boundingRect();
+		return rect.x - (getViewWidth() - rect.width) / 2 - getOffset();
 	}, getY = () => {
-		let boundingRect = getBoundingRect();
-		return boundingRect.y - (getViewHeight() - boundingRect.height) / 2 - getOffset();
-	}, 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;
-	};
+		let rect = boundingRect();
+		return rect.y - (getViewHeight() - rect.height) / 2 - getOffset();
+	}, getViewboxWidth = () => getViewWidth() + getOffset() * 2, getViewboxHeight = () => getViewHeight() + getOffset() * 2, strokeWidth = () => _props.maskStrokeWidth ? _props.maskStrokeWidth * viewScale() : void 0, nodeIds = createMemo(() => store.nodes.map((node) => node.id), { equals: (a, b) => a.length === b.length && a.every((id, i) => id === b[i]) });
 	return createComponent(Panel, mergeProps({
 		get position() {
 			return _props.position;
@@ -4211,7 +4520,7 @@ const getAttrFunction = (func) => func instanceof Function ? func : () => func,
 						domNode: el,
 						panZoom,
 						getTransform: () => store.transform,
-						getViewScale
+						getViewScale: viewScale
 					});
 					return setMinimap(instance), () => {
 						instance.destroy();
@@ -4248,58 +4557,62 @@ const getAttrFunction = (func) => func instanceof Function ? func : () => func,
 						return nodeIds();
 					},
 					children: (nodeId) => {
-						let node = createMemo(() => nodeLookup.get(nodeId())), nodeVisible = () => !!(node() && nodeHasDimensions(node()) && !node().hidden);
+						let visibleNode = createMemo(() => {
+							let row = nodeLookup.get(nodeId());
+							return row && nodeHasDimensions(row) && !row.hidden ? row : null;
+						});
 						return createComponent(Show, {
 							get when() {
-								return memo(() => !!nodeVisible())() ? getNodeDimensions(node()) : nodeVisible();
+								return visibleNode();
 							},
-							children: (nodeDimensions) => createComponent(Dynamic, {
-								get component() {
-									return _props.nodeComponent ?? MiniMapNode;
-								},
-								get id() {
-									return nodeId();
-								},
-								get x() {
-									return node().internals.positionAbsolute.x;
-								},
-								get y() {
-									return node().internals.positionAbsolute.y;
-								},
-								get borderRadius() {
-									return _props.nodeBorderRadius;
-								},
-								get strokeWidth() {
-									return _props.nodeStrokeWidth;
-								},
-								get shapeRendering() {
-									return shapeRendering();
-								},
-								get width() {
-									return nodeDimensions().width;
-								},
-								get height() {
-									return nodeDimensions().height;
-								},
-								get selected() {
-									return node().selected;
-								},
-								get color() {
-									return nodeColorFunc()?.call(null, node());
-								},
-								get strokeColor() {
-									return nodeStrokeColorFunc().call(null, node());
-								},
-								get class() {
-									return nodeClassFunc().call(null, node());
-								},
-								get style() {
-									return node().style;
-								},
-								get onClick() {
-									return _props.onNodeClick ? onSvgNodeClick : void 0;
-								}
-							})
+							children: (node) => {
+								let dimensions = () => getNodeDimensions(node()), userNode = () => node().internals.userNode;
+								return createComponent(Dynamic, {
+									get component() {
+										return _props.nodeComponent ?? MiniMapNode;
+									},
+									get id() {
+										return nodeId();
+									},
+									get x() {
+										return node().internals.positionAbsolute.x;
+									},
+									get y() {
+										return node().internals.positionAbsolute.y;
+									},
+									get borderRadius() {
+										return _props.nodeBorderRadius;
+									},
+									get strokeWidth() {
+										return _props.nodeStrokeWidth;
+									},
+									shapeRendering,
+									get width() {
+										return dimensions().width;
+									},
+									get height() {
+										return dimensions().height;
+									},
+									get selected() {
+										return node().selected;
+									},
+									get color() {
+										return nodeColorFunc()?.call(null, userNode());
+									},
+									get strokeColor() {
+										return nodeStrokeColorFunc().call(null, userNode());
+									},
+									get class() {
+										return nodeClassFunc().call(null, userNode());
+									},
+									get style() {
+										return node().style;
+									},
+									get onClick() {
+										return _props.onNodeClick ? onSvgNodeClick : void 0;
+									}
+								});
+							}
 						});
 					}
 				}), _el$2.nextSibling), effect(() => ({
@@ -4312,7 +4625,7 @@ const getAttrFunction = (func) => func instanceof Function ? func : () => func,
 					s: strokeWidth(),
 					h: labelledBy(),
 					r: `M${getX() - getOffset()},${getY() - getOffset()}h${getViewboxWidth() + getOffset() * 2}v${getViewboxHeight() + getOffset() * 2}h${-getViewboxWidth() - getOffset() * 2}z
-            M${getViewBB().x},${getViewBB().y}h${getViewBB().width}v${getViewBB().height}h${-getViewBB().width}z`
+            M${viewBB().x},${viewBB().y}h${viewBB().width}v${viewBB().height}h${-viewBB().width}z`
 				}), ({ e, t, a, o, i, n, s, h, r }, _p$) => {
 					e !== _p$?.e && setAttribute(_el$, "width", e), t !== _p$?.t && setAttribute(_el$, "height", t), a !== _p$?.a && setAttribute(_el$, "viewBox", a), o !== _p$?.o && setAttribute(_el$, "aria-labelledby", o), i !== _p$?.i && setStyleProperty(_el$, "--xy-minimap-mask-background-color-props", i), n !== _p$?.n && setStyleProperty(_el$, "--xy-minimap-mask-stroke-color-props", n), s !== _p$?.s && setStyleProperty(_el$, "--xy-minimap-mask-stroke-width-props", s), h !== _p$?.h && setAttribute(_el$2, "id", h), r !== _p$?.r && setAttribute(_el$3, "d", r);
 				}), _el$;
@@ -4498,7 +4811,7 @@ const EdgeToolbar = (props) => {
 var _tmpl$ = /* @__PURE__ */ template("<div>");
 /** Toolbar attached to a node, rendered above the graph so it does not scale with zoom. */
 const NodeToolbar = (props) => {
-	let { store } = useInternalSolidFlow(), { flow, getNodesBounds } = useSolidFlow(), _props = propDefaults(props, {
+	let { store, flow, commands } = useInternalSolidFlow(), _props = propDefaults(props, {
 		offset: 10,
 		position: "top",
 		align: "center",
@@ -4510,7 +4823,7 @@ const NodeToolbar = (props) => {
 		let node = flow.internalNodes[nodeId];
 		return node && res.push(node), res;
 	}, []), transform = () => {
-		let nodeRect = getNodesBounds(toolbarNodes());
+		let nodeRect = commands.getNodesBounds(toolbarNodes());
 		return nodeRect ? getNodeToolbarTransform(nodeRect, store.viewport, _props.position, _props.offset, _props.align) : "";
 	}, zIndex = () => {
 		let nodes = toolbarNodes();
@@ -4550,4 +4863,4 @@ const NodeToolbar = (props) => {
 	});
 }, SelectionMode = SelectionMode$1, getEdgeCenter = getEdgeCenter$1, getBezierEdgeCenter = getBezierEdgeCenter$1;
 //#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, MiniMapNode, 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, useEdgeId, useEdges, useInternalNode, useNodeConnections, useNodeId, 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, MiniMapNode, 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, useEdgeId, useEdges, useInternalNode, useKeyPress, useNodeConnections, useNodeId, useNodes, useNodesData, useNodesInitialized, useSolidFlow, useUpdateNodeInternals, useViewport, useViewportInitialized };