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

package/dist/index/index.jsx

@@ -1,4 +1,4 @@
-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 { Dynamic, Portal, isServer } from "@solidjs/web";
@@ -65,7 +65,9 @@ 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, EdgeLabelRenderer = (props) => {
+}, 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 <Show when={labelNode()}>{(root) => <Portal mount={root()}>{props.children}</Portal>}</Show>;
 }, EdgeLabel = (props) => {
@@ -75,7 +77,7 @@ const getEdgeId = (connection) => {
 		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 <EdgeLabelRenderer>
       <div role="button" tabindex={-1} class={[
 		"solid-flow__edge-label",
@@ -320,6 +322,30 @@ const armConnectionGestureLookup = (options) => {
 		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
+	};
 }, EdgeReconnectAnchor = (props) => {
 	let _props = propDefaults(props, {
 		size: 25,
@@ -348,25 +374,16 @@ const armConnectionGestureLookup = (options) => {
 			connectionRadius: store.connectionRadius
 		});
 		XYHandle.onPointerDown(event, {
-			lib: store.lib,
-			flowId: store.id,
-			domNode: store.domNode,
+			...buildConnectionGestureParams({
+				event,
+				store,
+				actions,
+				gestureLookup
+			}),
 			nodeId: opposite.nodeId,
 			handleId: opposite.handleId,
-			autoPanOnConnect: store.autoPanOnConnect,
-			connectionMode: store.connectionMode,
-			connectionRadius: store.connectionRadius,
-			nodeLookup: gestureLookup,
 			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(),
@@ -376,12 +393,7 @@ const armConnectionGestureLookup = (options) => {
 			},
 			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 <EdgeLabel x={_props.position?.x} y={_props.position?.y} style={_props.style} {...rest}>
@@ -450,14 +462,22 @@ const armConnectionGestureLookup = (options) => {
 		addSelectedEdges,
 		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({
+			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]));
+			}), requestAnimationFrame(() => nodeRef?.blur())) : addSelectedNodes([id]);
 		},
 		handleEdgeSelection: (id) => {
 			let edge = edgeLookup[id];
-			edge && isEdgeSelectable(edge, store) && (setSelectionRect(void 0), setSelectionRectMode(void 0), edge.selected ? edge.selected && store.multiselectionKeyPressed && unselectNodesAndEdges({
+			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]));
@@ -674,7 +694,20 @@ const createMeasurementIngest = ({ setMeasurementsStore, setNodesStore, nodes })
 	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";
 }
@@ -718,7 +751,7 @@ const EMPTY_AUTO_INDEX = /* @__PURE__ */ new Map(), createInternalNodes = (sourc
 						x,
 						y
 					}, row.internals.z = z;
-				} else source.nodes.length;
+				} 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 = {
@@ -731,19 +764,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({
@@ -791,18 +813,8 @@ const createLayoutedEdges = (source) => {
 			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 null;
@@ -890,6 +902,9 @@ 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(() => config().viewport, (next) => {
@@ -917,6 +932,10 @@ const createLayoutedEdges = (source) => {
 		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
@@ -948,6 +967,9 @@ const createLayoutedEdges = (source) => {
 		get connectionTargetByHandle() {
 			return connectionTargetByHandle;
 		},
+		get connectionOriginByHandle() {
+			return connectionOriginByHandle;
+		},
 		get domNode() {
 			return domNode();
 		},
@@ -1086,7 +1108,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,
@@ -1433,7 +1455,7 @@ const createLayoutedEdges = (source) => {
 		parentIds,
 		connections,
 		actions: {
-			getEdge,
+			getLayoutedEdge,
 			applyInitialFitView,
 			applyMeasurementWrites,
 			applyNodeChanges,
@@ -1485,7 +1507,14 @@ const createLayoutedEdges = (source) => {
 	let [store, setStore] = typeof nodes == "function" ? createStore(nodes, []) : createStore(nodes);
 	return [store, setStore];
 }, EdgeWrapper = (props) => {
-	let edgeRef, { store, actions } = useInternalSolidFlow(), edgeId = () => props.edgeId, edge = () => actions.getEdge(edgeId()), edgeType = () => edge().type ?? "default", selectable = () => isEdgeSelectable(edge(), store), 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
@@ -1642,10 +1671,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.connectionFromHandle, connectingFrom = () => {
-		let fromHandle = store.connectionFromHandle;
-		return fromHandle && fromHandle.nodeId === nodeId() && fromHandle.type === _props.type && fromHandle.id === handleId();
-	}, targetState = () => store.connectionTargetByHandle[connectionKey(nodeId(), _props.type, handleId())], connectingTo = () => targetState() !== void 0, isPossibleTargetHandle = () => store.connectionMode === "strict" ? store.connectionFromHandle?.type !== _props.type : nodeId() !== store.connectionFromHandle?.nodeId || handleId() !== store.connectionFromHandle?.id, valid = () => targetState() === "valid", 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();
@@ -1671,36 +1697,17 @@ const Handle = (props) => {
 			connectionRadius: store.connectionRadius
 		});
 		XYHandle.onPointerDown(event, {
+			...buildConnectionGestureParams({
+				event,
+				store,
+				actions,
+				gestureLookup
+			}),
 			handleId: handleId(),
 			nodeId: nodeId(),
 			isTarget: isTarget(),
-			connectionRadius: store.connectionRadius,
-			domNode: store.domNode,
-			nodeLookup: gestureLookup,
-			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;
@@ -1735,7 +1742,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);
+	};
 	return <div {...rest} role="button" aria-label={store.ariaLabelConfig["handle.ariaLabel"]} tabindex={-1} data-handleid={handleId()} data-nodeid={nodeId()} data-handlepos={_props.position} data-id={`${store.id}-${nodeId()}-${_props.id || null}-${_props.type}`} onClick={store.clickConnect ? onClick : void 0} onPointerDown={onPointerDown} style={_props.style} class={[
 		"solid-flow__handle",
 		`solid-flow__handle-${_props.position}`,
@@ -1751,7 +1758,7 @@ const Handle = (props) => {
 			connectablestart: _props.isConnectableStart,
 			connectableend: _props.isConnectableEnd,
 			connectable: !!connectable(),
-			connectionindicator: connectionIndicator()
+			excluded: !!originState()
 		}
 	]}>
       {_props.children}
@@ -1850,7 +1857,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 = () => {
@@ -1870,7 +1877,9 @@ const NodeWrapper = (props) => {
 	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(),
@@ -2146,29 +2155,31 @@ function useInternalSolidFlow() {
 //#region src/components/connection/ConnectionLine.tsx
 /** Internal component rendering the in-progress connection line. */
 const ConnectionLine = (props) => {
-	let { store } = useInternalSolidFlow(), connectionStatus = () => getConnectionStatus(store.connection.isValid);
-	return <Show when={store.connection.inProgress}>
-      <svg class="solid-flow__container solid-flow__connectionline" width={store.width} height={store.height} style={props.containerStyle}>
-        <g class={["solid-flow__connection", connectionStatus()]}>
-          <Show when={props.component} fallback={<InternalConnectionLine style={props.style} />}>
-            {(CustomComponent) => {
+	let { store } = useInternalSolidFlow(), connectionStatus = () => getConnectionStatus(store.connection.isValid), inProgress = createMemo(() => {
+		let state = store.connection;
+		return state.inProgress ? state : null;
+	});
+	return <Show when={inProgress()}>
+      {(connection) => <svg class="solid-flow__container solid-flow__connectionline" width={store.width} height={store.height} style={props.containerStyle}>
+          <g class={["solid-flow__connection", connectionStatus()]}>
+            <Show when={props.component} fallback={<InternalConnectionLine style={props.style} connection={connection()} />}>
+              {(CustomComponent) => {
 		let UserConnectionLine = CustomComponent();
-		return <UserConnectionLine connectionLineType={store.connectionLineType} connectionLineStyle={props.style} fromNode={store.connection.fromNode} fromHandle={store.connection.fromHandle} fromX={store.connection.from.x} fromY={store.connection.from.y} toX={store.connection.to.x} toY={store.connection.to.y} fromPosition={store.connection.fromPosition} toPosition={store.connection.toPosition} connectionStatus={connectionStatus()} toNode={store.connection.toNode} toHandle={store.connection.toHandle} />;
+		return <UserConnectionLine connectionLineType={store.connectionLineType} connectionLineStyle={props.style} fromNode={connection().fromNode} fromHandle={connection().fromHandle} fromX={connection().from.x} fromY={connection().from.y} toX={connection().to.x} toY={connection().to.y} fromPosition={connection().fromPosition} toPosition={connection().toPosition} connectionStatus={connectionStatus()} toNode={connection().toNode} toHandle={connection().toHandle} />;
 	}}
-          </Show>
-        </g>
-      </svg>
+            </Show>
+          </g>
+        </svg>}
     </Show>;
 }, 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": {
@@ -2217,19 +2228,26 @@ const ConnectionLine = (props) => {
         </defs>
       </svg>
     </Show>;
-}, 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);
+}, 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)
 	};
-	return <div class="solid-flow__edges" onFocusIn={onFocusIn} onFocusOut={() => setFocusedEdgeId(null)}>
+}, EdgeRenderer = (props) => {
+	let { store, actions } = useInternalSolidFlow(), { focusedId: focusedEdgeId, onFocusIn, onFocusOut } = createFocusedIdTracker();
+	return <div class="solid-flow__edges" onFocusIn={onFocusIn} onFocusOut={onFocusOut}>
       <MarkerDefinition />
 
       <For each={store.visibleEdgeIds}>
         {(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 <Show when={!unmounted()}>
@@ -2252,11 +2270,8 @@ const ConnectionLine = (props) => {
 	onCleanup(() => {
 		resizeObserver?.disconnect();
 	});
-	let [focusedNodeId, setFocusedNodeId] = createSignal(null), onFocusIn = (event) => {
-		let nodeElement = event.target.closest("[data-id]");
-		setFocusedNodeId(nodeElement?.getAttribute("data-id") ?? null);
-	};
-	return <div class="solid-flow__container solid-flow__nodes" onFocusIn={onFocusIn} onFocusOut={() => setFocusedNodeId(null)}>
+	let { focusedId: focusedNodeId, onFocusIn, onFocusOut } = createFocusedIdTracker();
+	return <div class="solid-flow__container solid-flow__nodes" onFocusIn={onFocusIn} onFocusOut={onFocusOut}>
       <For each={store.visibleNodeIds}>
         {(nodeId) => {
 		let unmounted = createMemo(() => {
@@ -2278,7 +2293,7 @@ const ConnectionLine = (props) => {
 	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;
@@ -2575,29 +2590,13 @@ const ConnectionLine = (props) => {
           Solid Flow
         </a>
       </Panel>
-    </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
+    </Show>, MODIFIER_FLAG = {
+	alt: "altKey",
+	control: "ctrlKey",
+	ctrl: "ctrlKey",
+	meta: "metaKey",
+	shift: "shiftKey"
+};
 function isKeyObject(key) {
 	return typeof key == "object" && !!key;
 }
@@ -2629,18 +2628,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()];
@@ -2657,6 +2651,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() {
@@ -2757,7 +2773,13 @@ const KeyHandler = (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"
+		}
 	]} style={rootStyle()} onScroll={(e) => {
 		e.currentTarget.scrollTo({
 			top: 0,
@@ -2830,8 +2852,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.
@@ -2840,8 +2862,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.
@@ -2899,6 +2921,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.
@@ -3084,7 +3152,7 @@ const DotPattern = (props) => {
 		{ selected: !!_props.selected },
 		_props.class
 	]} x={_props.x} y={_props.y} rx={_props.borderRadius} ry={_props.borderRadius} width={_props.width} height={_props.height} shape-rendering={_props.shapeRendering} style={style()} onClick={_props.onClick ? (event) => _props.onClick(event, _props.id) : void 0} />;
-}, getAttrFunction = (func) => func instanceof Function ? func : () => func, MiniMap = (props) => {
+}, getAttrFunction = (value) => value instanceof Function ? value : () => value, MiniMap = (props) => {
 	let { store, nodeLookup } = useInternalSolidFlow(), _props = propDefaults(props, {
 		position: "bottom-right",
 		nodeClass: "",
@@ -3094,19 +3162,41 @@ const DotPattern = (props) => {
 		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}`), viewBB = createMemo(() => ({
+	}), 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
-	})), boundingRect = createMemo(() => {
-		let view = viewBB();
-		if (nodeLookup.size === 0) return view;
+	})), 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) ? view : getBoundsOfRects(bounds, view);
-	}), viewScale = createMemo(() => Math.max(boundingRect().width / _props.width, boundingRect().height / _props.height)), getViewWidth = () => viewScale() * _props.width, getViewHeight = () => viewScale() * _props.height, getOffset = () => 5 * viewScale(), getX = () => {
+		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 = () => {
@@ -3167,9 +3257,15 @@ const DotPattern = (props) => {
               <title id={labelledBy()}>{store.ariaLabelConfig["minimap.ariaLabel"]}</title>
               <For keyed={!1} each={nodeIds()}>
                 {(nodeId) => {
-			let node = createMemo(() => nodeLookup.get(nodeId())), nodeVisible = () => !!(node() && nodeHasDimensions(node()) && !node().hidden);
-			return <Show when={nodeVisible() && getNodeDimensions(node())}>
-                      {(nodeDimensions) => <Dynamic component={_props.nodeComponent ?? MiniMapNode} id={nodeId()} x={node().internals.positionAbsolute.x} y={node().internals.positionAbsolute.y} borderRadius={_props.nodeBorderRadius} strokeWidth={_props.nodeStrokeWidth} shapeRendering={shapeRendering} width={nodeDimensions().width} height={nodeDimensions().height} selected={node().selected} color={nodeColorFunc()?.call(null, node())} strokeColor={nodeStrokeColorFunc().call(null, node())} class={nodeClassFunc().call(null, node())} style={node().style} onClick={_props.onNodeClick ? onSvgNodeClick : void 0} />}
+			let visibleNode = createMemo(() => {
+				let row = nodeLookup.get(nodeId());
+				return row && nodeHasDimensions(row) && !row.hidden ? row : null;
+			});
+			return <Show when={visibleNode()}>
+                      {(node) => {
+				let dimensions = () => getNodeDimensions(node()), userNode = () => node().internals.userNode;
+				return <Dynamic component={_props.nodeComponent ?? MiniMapNode} id={nodeId()} x={node().internals.positionAbsolute.x} y={node().internals.positionAbsolute.y} borderRadius={_props.nodeBorderRadius} strokeWidth={_props.nodeStrokeWidth} shapeRendering={shapeRendering} width={dimensions().width} height={dimensions().height} selected={node().selected} color={nodeColorFunc()?.call(null, userNode())} strokeColor={nodeStrokeColorFunc().call(null, userNode())} class={nodeClassFunc().call(null, userNode())} style={node().style} onClick={_props.onNodeClick ? onSvgNodeClick : void 0} />;
+			}}
                     </Show>;
 		}}
               </For>
@@ -3286,7 +3382,7 @@ const DotPattern = (props) => {
       </EdgeLabel>
     </Show>;
 }, 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",
@@ -3298,7 +3394,7 @@ const DotPattern = (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();
@@ -3321,4 +3417,4 @@ const DotPattern = (props) => {
     </Show>;
 }, 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 };