@dschz/solid-flow 0.3.0-next.3 → 0.3.0-next.5

package/dist/index/index.js

@@ -5,9 +5,18 @@ import { createMediaQuery } from "@solid-primitives/media";
 import { createEventListener, createEventListenerMap } from "@solid-primitives/event-listener";
 //#region src/contexts/edgeId.ts
 const EdgeIdContext = createContext(null);
+/**
+* Returns the id of the edge this component is rendered inside. Available
+* anywhere in a custom edge's subtree (provided by the edge wrapper), so
+* nested components — like a custom edge label — can learn their host edge
+* without prop drilling.
+*
+* @public
+* @returns a reactive accessor for the surrounding edge's id
+*/
 function useEdgeId() {
 	let ctx = useContext(EdgeIdContext);
-	if (!ctx) throw Error("solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useEdgeId");
+	if (!ctx) throw Error("solid-flow: useEdgeId must be called inside an edge component (anywhere under a custom edge's subtree)");
 	return ctx;
 }
 //#endregion
@@ -281,11 +290,13 @@ const EdgeReconnectAnchor = (props) => {
 		size: 25,
 		reconnecting: !1,
 		style: {}
-	}), rest = omit(_props, "type", "class", "style", "position", "size", "reconnecting", "children"), { store, nodeLookup, edgeLookup, actions } = useInternalSolidFlow(), edgeId = useEdgeId(), [reconnecting, setReconnecting] = createSignal(!1);
+	}), rest = omit(_props, "type", "class", "style", "position", "size", "reconnecting", "onReconnectingChange", "children"), { store, nodeLookup, edgeLookup, actions } = useInternalSolidFlow(), edgeId = useEdgeId(), [reconnecting, setReconnecting] = createSignal(!1);
 	if (!edgeId()) throw Error("[solid-flow]: EdgeReconnectAnchor must be used within an Edge component");
-	let edge = () => edgeLookup[edgeId()], onPointerDown = (event) => {
+	let edge = () => edgeLookup[edgeId()], isReconnecting = () => _props.reconnecting || reconnecting(), setReconnectingState = (next) => {
+		setReconnecting(next), _props.onReconnectingChange?.(next);
+	}, onPointerDown = (event) => {
 		if (event.button !== 0) return;
-		setReconnecting(!0), store.onReconnectStart?.(event, edge(), _props.type);
+		setReconnectingState(!0), store.onReconnectStart?.(event, edge(), _props.type);
 		let opposite = _props.type === "target" ? {
 			nodeId: edge().source,
 			handleId: edge().sourceHandle ?? null,
@@ -309,7 +320,9 @@ const EdgeReconnectAnchor = (props) => {
 			edgeUpdaterType: opposite.type,
 			cancelConnection: actions.cancelConnection,
 			panBy: actions.panBy,
-			updateConnection: actions.setConnection,
+			updateConnection: (connection) => {
+				actions.setConnection(connection), flush();
+			},
 			isValidConnection: store.isValidConnection,
 			onConnectStart: store.onConnectStart,
 			onConnectEnd: store.onConnectEnd,
@@ -321,7 +334,7 @@ const EdgeReconnectAnchor = (props) => {
 				newEdge = store.onBeforeReconnect?.(newEdge, edge()) ?? newEdge, newEdge && actions.setEdges((edges) => edges.map((e) => e.id === edge().id ? newEdge : e)), store.onReconnect?.(edge(), connection);
 			},
 			onReconnectEnd: (event, connectionState) => {
-				setReconnecting(!1), store.onReconnectEnd?.(event, edge(), opposite.type, connectionState);
+				setReconnectingState(!1), store.onReconnectEnd?.(event, edge(), opposite.type, connectionState);
 			},
 			getTransform: () => store.transform,
 			getFromHandle: () => store.connection.fromHandle,
@@ -344,7 +357,7 @@ const EdgeReconnectAnchor = (props) => {
 		var _el$ = _tmpl$$32();
 		return _el$.$$pointerdown = onPointerDown, insert(_el$, createComponent(Show, {
 			get when() {
-				return !reconnecting();
+				return !isReconnecting();
 			},
 			get children() {
 				return _props.children;
@@ -407,7 +420,6 @@ const A11yDescriptions = () => {
 	let [store, setStore] = createStore(edges);
 	return [store, setStore];
 }, 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(() => {
-	if (!source.onlyRenderVisibleElements) return null;
 	let { width, height } = source;
 	if (!width || !height) return null;
 	let [tx, ty, zoom] = source.transform, zoomBucket = 2 ** Math.floor(Math.log2(zoom)), bucketWidth = width / zoomBucket, bucketHeight = height / zoomBucket, stepX = bucketWidth * STEP, stepY = bucketHeight * STEP, centerX = (width / 2 - tx) / zoom, centerY = (height / 2 - ty) / zoom, quantizedX = Math.round(centerX / stepX) * stepX, quantizedY = Math.round(centerY / stepY) * stepY, halfWidth = bucketWidth * 1, halfHeight = bucketHeight * 1;
@@ -418,9 +430,9 @@ const A11yDescriptions = () => {
 		height: 2 * halfHeight
 	};
 }, { equals: rectsEqual }), isNodeCulled = (node, cullingViewport) => {
-	if (!cullingViewport || node.selected) return !1;
+	if (!cullingViewport || node.selected || node.cullable === !1) return !1;
 	let { width, height } = node.measured;
-	if (!width || !height) return !1;
+	if (!width || !height || !node.internals.handleBounds) return !1;
 	let { x, y } = node.internals.positionAbsolute;
 	return !rectsOverlap({
 		x,
@@ -429,7 +441,7 @@ const A11yDescriptions = () => {
 		height
 	}, cullingViewport);
 }, isEdgeCulled = (row, cullingViewport) => {
-	if (!cullingViewport || row.selected) return !1;
+	if (!cullingViewport || row.selected || row.cullable === !1) return !1;
 	let x = Math.min(row.sourceX, row.targetX), y = Math.min(row.sourceY, row.targetY);
 	return !rectsOverlap({
 		x,
@@ -471,7 +483,7 @@ const A11yDescriptions = () => {
 	selectNodesOnDrag: !0,
 	elevateNodesOnSelect: !0,
 	zIndexMode: "basic",
-	onlyRenderVisibleElements: !0,
+	onlyRenderVisibleElements: !1,
 	disableKeyboardA11y: !1,
 	defaultMarkerColor: "#b1b1b7",
 	ariaLiveMessage: "",
@@ -761,9 +773,17 @@ const createLayoutedEdges = (source) => {
 			return config().zIndexMode;
 		}
 	}), nodeLookup = new RecordMapFacade(internalNodes), initialViewport = getInitialViewport(_props.fitView, _props.initialViewport, _props.width ?? 0, _props.height ?? 0, nodeLookup), [viewportStore, setViewportStore] = createStore(_props.viewport ?? initialViewport);
-	createEffect(() => config().nodes, (next) => {
+	createEffect(() => {
+		let next = config().nodes;
+		for (let node of next);
+		return { next };
+	}, ({ next }) => {
 		setNodesStore(() => next);
-	}, { defer: !0 }), createEffect(() => config().edges, (next) => {
+	}, { defer: !0 }), createEffect(() => {
+		let next = config().edges;
+		for (let edge of next);
+		return { next };
+	}, ({ next }) => {
 		setEdgesStore(() => next);
 	}, { defer: !0 }), createEffect(() => config().viewport, (next) => {
 		next && setViewportStore(() => next);
@@ -924,9 +944,6 @@ const createLayoutedEdges = (source) => {
 			return zoomActivationKeyPressed();
 		}
 	}), cullingViewport = createCullingViewport({
-		get onlyRenderVisibleElements() {
-			return store.onlyRenderVisibleElements;
-		},
 		get width() {
 			return store.width;
 		},
@@ -2095,9 +2112,18 @@ const GroupNode = (props) => (() => {
 		};
 	}), dragging;
 }, NodeIdContext = createContext(null);
+/**
+* Returns the id of the node this component is rendered inside. Available
+* anywhere in a custom node's subtree (provided by the node wrapper), so
+* nested components — like a custom `Handle` — can learn their host node
+* without prop drilling.
+*
+* @public
+* @returns a reactive accessor for the surrounding node's id
+*/
 function useNodeId() {
 	let ctx = useContext(NodeIdContext);
-	if (!ctx) throw Error("solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useNodeId");
+	if (!ctx) throw Error("solid-flow: useNodeId must be called inside a node component (anywhere under a custom node's subtree)");
 	return ctx;
 }
 //#endregion
@@ -2105,7 +2131,12 @@ function useNodeId() {
 var _tmpl$$27 = /* @__PURE__ */ template("<div>");
 /** Internal per-node wrapper: dragging, selection, a11y, measurement, viewport culling, and the dynamic node component. */
 const NodeWrapper = (props) => {
-	let { store, nodeLookup, parentIds, actions } = useInternalSolidFlow(), [nodeRef, setNodeRef] = createSignal(), node = () => nodeLookup.get(props.nodeId), nodeId = () => node().id, nodeType = () => node().type ?? "default", deletable = () => node().deletable ?? !0, selectable = () => node().selectable ?? store.elementsSelectable, focusable = () => node().focusable ?? store.nodesFocusable, draggable = () => node().draggable ?? store.nodesDraggable, connectable = () => node().connectable ?? store.nodesConnectable, userNode = () => node().internals.userNode, nodeTypeValid = () => nodeType() in store.nodeTypes, nodeComponent = () => store.nodeTypes[nodeType()], isParentNode = () => !!parentIds[node().id], transform = () => {
+	let { store, nodeLookup, parentIds, actions } = useInternalSolidFlow(), [nodeRef, setNodeRef] = createSignal(), node = () => nodeLookup.get(props.nodeId);
+	onCleanup(() => {
+		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 { x, y } = node().internals.positionAbsolute;
 		return `translate(${x}px, ${y}px)`;
 	}, sizeStyle = () => {
@@ -2688,35 +2719,53 @@ const MarkerDefinition = () => {
 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 } = useInternalSolidFlow();
+	let { store, actions } = useInternalSolidFlow(), [focusedEdgeId, setFocusedEdgeId] = createSignal(null), onFocusIn = (event) => {
+		let edgeElement = event.target.closest("[data-id]");
+		setFocusedEdgeId(edgeElement?.getAttribute("data-id") ?? null);
+	};
 	var _el$ = _tmpl$$23(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-	return insert(_el$, createComponent(MarkerDefinition, {}), _el$2), insert(_el$, createComponent(For, {
+	return _el$.$$focusout = () => setFocusedEdgeId(null), _el$.$$focusin = onFocusIn, insert(_el$, createComponent(MarkerDefinition, {}), _el$2), insert(_el$, createComponent(For, {
 		get each() {
 			return store.visibleEdgeIds;
 		},
-		children: (edgeId) => createComponent(EdgeWrapper, {
-			edgeId,
-			get onEdgeClick() {
-				return props.onEdgeClick;
-			},
-			get onEdgeContextMenu() {
-				return props.onEdgeContextMenu;
-			},
-			get onEdgePointerEnter() {
-				return props.onEdgePointerEnter;
-			},
-			get onEdgePointerLeave() {
-				return props.onEdgePointerLeave;
-			}
-		})
+		children: (edgeId) => {
+			let unmounted = createMemo(() => {
+				if (!store.onlyRenderVisibleElements || focusedEdgeId() === edgeId) return !1;
+				let edge = actions.getEdge(edgeId);
+				return !!edge && isEdgeCulled(edge, store.cullingViewport);
+			});
+			return createComponent(Show, {
+				get when() {
+					return !unmounted();
+				},
+				get children() {
+					return createComponent(EdgeWrapper, {
+						edgeId,
+						get onEdgeClick() {
+							return props.onEdgeClick;
+						},
+						get onEdgeContextMenu() {
+							return props.onEdgeContextMenu;
+						},
+						get onEdgePointerEnter() {
+							return props.onEdgePointerEnter;
+						},
+						get onEdgePointerLeave() {
+							return props.onEdgePointerLeave;
+						}
+					});
+				}
+			});
+		}
 	}), _el$3), _el$;
 };
+delegateEvents(["focusin", "focusout"]);
 //#endregion
 //#region src/components/container/NodeRenderer.tsx
 var _tmpl$$22 = /* @__PURE__ */ template("<div class=\"solid-flow__container solid-flow__nodes\">");
 /** Internal renderer iterating the node id list into `NodeWrapper`s; owns the shared measurement `ResizeObserver`. */
 const NodeRenderer = (props) => {
-	let { actions, store } = useInternalSolidFlow(), resizeObserver = isServer ? void 0 : new ResizeObserver((entries) => {
+	let { actions, store, nodeLookup } = useInternalSolidFlow(), resizeObserver = isServer ? void 0 : new ResizeObserver((entries) => {
 		actions.requestUpdateNodeInternals(entries.map((entry) => {
 			let id = entry.target.getAttribute("data-id");
 			return [id, {
@@ -2729,44 +2778,63 @@ 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);
+	};
 	var _el$ = _tmpl$$22();
-	return insert(_el$, createComponent(For, {
+	return _el$.$$focusout = () => setFocusedNodeId(null), _el$.$$focusin = onFocusIn, insert(_el$, createComponent(For, {
 		get each() {
 			return store.visibleNodeIds;
 		},
-		children: (nodeId) => createComponent(NodeWrapper, {
-			nodeId,
-			resizeObserver,
-			get nodeClickDistance() {
-				return props.nodeClickDistance;
-			},
-			get onNodeClick() {
-				return props.onNodeClick;
-			},
-			get onNodePointerEnter() {
-				return props.onNodePointerEnter;
-			},
-			get onNodePointerMove() {
-				return props.onNodePointerMove;
-			},
-			get onNodePointerLeave() {
-				return props.onNodePointerLeave;
-			},
-			get onNodeDrag() {
-				return props.onNodeDrag;
-			},
-			get onNodeDragStart() {
-				return props.onNodeDragStart;
-			},
-			get onNodeDragStop() {
-				return props.onNodeDragStop;
-			},
-			get onNodeContextMenu() {
-				return props.onNodeContextMenu;
-			}
-		})
+		children: (nodeId) => {
+			let unmounted = createMemo(() => {
+				if (!store.onlyRenderVisibleElements || focusedNodeId() === nodeId) return !1;
+				let node = nodeLookup.get(nodeId);
+				return !!node && isNodeCulled(node, store.cullingViewport);
+			});
+			return createComponent(Show, {
+				get when() {
+					return !unmounted();
+				},
+				get children() {
+					return createComponent(NodeWrapper, {
+						nodeId,
+						resizeObserver,
+						get nodeClickDistance() {
+							return props.nodeClickDistance;
+						},
+						get onNodeClick() {
+							return props.onNodeClick;
+						},
+						get onNodePointerEnter() {
+							return props.onNodePointerEnter;
+						},
+						get onNodePointerMove() {
+							return props.onNodePointerMove;
+						},
+						get onNodePointerLeave() {
+							return props.onNodePointerLeave;
+						},
+						get onNodeDrag() {
+							return props.onNodeDrag;
+						},
+						get onNodeDragStart() {
+							return props.onNodeDragStart;
+						},
+						get onNodeDragStop() {
+							return props.onNodeDragStop;
+						},
+						get onNodeContextMenu() {
+							return props.onNodeContextMenu;
+						}
+					});
+				}
+			});
+		}
 	})), _el$;
 };
+delegateEvents(["focusin", "focusout"]);
 //#endregion
 //#region src/components/container/Pane.tsx
 var _tmpl$$21 = /* @__PURE__ */ template("<div class=\"solid-flow__container solid-flow__pane\">");
@@ -3167,25 +3235,14 @@ const Attribution = (props) => createComponent(Show, {
 * `const { flow, commands } = useSolidFlow()`.
 *
 * @public
-* @returns the flow's read struct, write surface, and deprecated aliases
+* @returns the flow's read struct and write surface
 */
 function useSolidFlow() {
-	let { flow, commands, store, edgeLookup } = useInternalSolidFlow(), getInternalNode = (id) => flow.internalNodes[id];
+	let { flow, commands } = useInternalSolidFlow();
 	return {
 		...commands,
 		flow,
-		commands,
-		getInternalNode,
-		getNode: (id) => getInternalNode(id)?.internals.userNode,
-		getNodes: (ids) => ids ? ids.flatMap((id) => {
-			let userNode = flow.internalNodes[id]?.internals.userNode;
-			return userNode ? [userNode] : [];
-		}) : [...flow.nodes],
-		getEdge: (id) => edgeLookup[id],
-		getEdges: (ids) => ids ? ids.flatMap((id) => edgeLookup[id] ? [edgeLookup[id]] : []) : [...flow.edges],
-		getViewport: () => snapshot(store.viewport),
-		getZoom: () => flow.viewport.zoom,
-		getHandleConnections: ({ type, id, nodeId }) => Object.values(flow.connections[connectionKey(nodeId, type, id ?? null)] ?? {})
+		commands
 	};
 }
 //#endregion
@@ -3221,6 +3278,34 @@ 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).
+*/
+function isContradicted(flags, keyDef) {
+	let keyFlag = MODIFIER_FLAG[getKeyString(keyDef).toLowerCase()];
+	if (keyFlag && !flags[keyFlag]) return !0;
+	let modifiers = getModifier(keyDef);
+	return (Array.isArray(modifiers) ? modifiers.flatMap((mod) => mod) : [modifiers]).some((mod) => {
+		let modFlag = MODIFIER_FLAG[mod.toLowerCase()];
+		return !!modFlag && !flags[modFlag];
+	});
+}
+/** True only when EVERY definition for this key state is contradicted. */
+function allContradicted(flags, keyDefs) {
+	if (!keyDefs) return !1;
+	let keys = Array.isArray(keyDefs) ? keyDefs : [keyDefs];
+	return keys.length > 0 && keys.every((keyDef) => isContradicted(flags, keyDef));
+}
 const KeyHandler = (props) => {
 	let { store, actions } = useInternalSolidFlow(), { deleteElements } = useSolidFlow(), _props = {
 		get selectionKey() {
@@ -3240,6 +3325,20 @@ const KeyHandler = (props) => {
 		}
 	}, resetKeysAndSelection = () => {
 		actions.setSelectionRect(void 0), actions.setSelectionKeyPressed(!1), actions.setMultiselectionKeyPressed(!1), actions.setDeleteKeyPressed(!1), actions.setPanActivationKeyPressed(!1), actions.setZoomActivationKeyPressed(!1);
+	}, reconcileModifiers = (event) => {
+		let changed = !1;
+		store.selectionKeyPressed && allContradicted(event, _props.selectionKey) && (actions.setSelectionKeyPressed(!1), changed = !0), store.multiselectionKeyPressed && allContradicted(event, _props.multiSelectionKey) && (actions.setMultiselectionKeyPressed(!1), changed = !0), store.panActivationKeyPressed && allContradicted(event, _props.panActivationKey) && (actions.setPanActivationKeyPressed(!1), changed = !0), store.zoomActivationKeyPressed && allContradicted(event, _props.zoomActivationKey) && (actions.setZoomActivationKeyPressed(!1), changed = !0), changed && flush();
+	}, cancelPointerGestures = () => {
+		let release = (Ctor, type) => {
+			try {
+				window.dispatchEvent(new Ctor(type, { view: window }));
+			} catch {
+				window.dispatchEvent(new Ctor(type));
+			}
+		};
+		release(MouseEvent, "mouseup"), typeof PointerEvent < "u" && release(PointerEvent, "pointerup");
+	}, handleWindowBlur = () => {
+		resetKeysAndSelection(), cancelPointerGestures();
 	}, handleDelete = async () => {
 		let selectedNodes = store.nodes.filter((node) => node.selected), selectedEdges = store.edges.filter((edge) => edge.selected), { deletedNodes, deletedEdges } = await deleteElements({
 			nodes: selectedNodes,
@@ -3250,19 +3349,25 @@ const KeyHandler = (props) => {
 			edges: deletedEdges
 		});
 	};
-	return isServer || createEventListenerMap(window, {
+	return isServer || (createEventListenerMap(window, {
 		keydown: (event) => {
-			matchesKeyArray(event, _props.selectionKey) && actions.setSelectionKeyPressed(!0), matchesKeyArray(event, _props.multiSelectionKey) && actions.setMultiselectionKeyPressed(!0), matchesKeyArray(event, _props.deleteKey) && !isInputDOMNode(event) && (event.ctrlKey || event.metaKey || event.shiftKey || (actions.setDeleteKeyPressed(!0), handleDelete())), matchesKeyArray(event, _props.panActivationKey) && actions.setPanActivationKeyPressed(!0), matchesKeyArray(event, _props.zoomActivationKey) && actions.setZoomActivationKeyPressed(!0), flush();
+			reconcileModifiers(event), matchesKeyArray(event, _props.selectionKey) && actions.setSelectionKeyPressed(!0), matchesKeyArray(event, _props.multiSelectionKey) && actions.setMultiselectionKeyPressed(!0), matchesKeyArray(event, _props.deleteKey) && !isInputDOMNode(event) && (event.ctrlKey || event.metaKey || event.shiftKey || (actions.setDeleteKeyPressed(!0), handleDelete())), matchesKeyArray(event, _props.panActivationKey) && actions.setPanActivationKeyPressed(!0), matchesKeyArray(event, _props.zoomActivationKey) && actions.setZoomActivationKeyPressed(!0), flush();
 		},
 		keyup: (event) => {
-			matchesKeyArray(event, _props.selectionKey) && actions.setSelectionKeyPressed(!1), matchesKeyArray(event, _props.multiSelectionKey) && actions.setMultiselectionKeyPressed(!1), matchesKeyArray(event, _props.deleteKey) && actions.setDeleteKeyPressed(!1), matchesKeyArray(event, _props.panActivationKey) && actions.setPanActivationKeyPressed(!1), matchesKeyArray(event, _props.zoomActivationKey) && actions.setZoomActivationKeyPressed(!1), flush();
+			reconcileModifiers(event), matchesKeyArray(event, _props.selectionKey) && actions.setSelectionKeyPressed(!1), matchesKeyArray(event, _props.multiSelectionKey) && actions.setMultiselectionKeyPressed(!1), matchesKeyArray(event, _props.deleteKey) && actions.setDeleteKeyPressed(!1), matchesKeyArray(event, _props.panActivationKey) && actions.setPanActivationKeyPressed(!1), matchesKeyArray(event, _props.zoomActivationKey) && actions.setZoomActivationKeyPressed(!1), flush();
 		},
-		blur: resetKeysAndSelection,
+		blur: handleWindowBlur,
 		contextmenu: resetKeysAndSelection
-	}), null;
+	}), createEventListenerMap(window, {
+		pointerdown: reconcileModifiers,
+		wheel: reconcileModifiers
+	}, {
+		capture: !0,
+		passive: !0
+	})), null;
 };
 //#endregion
-//#region src/components/SolidFlow/component.tsx
+//#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>");
 /** The flow canvas component: renders nodes and edges and wires up viewport and interactions. */
 const SolidFlow = (props) => {
@@ -3627,19 +3732,6 @@ function useViewport() {
 	return () => flow.viewport;
 }
 //#endregion
-//#region src/hooks/useHandleEdgeSelect.ts
-/** Returns a callback applying edge-selection semantics for the given edge id. */
-function useHandleEdgeSelect() {
-	let { store, edgeLookup, actions } = useInternalSolidFlow();
-	return (id) => {
-		let edge = edgeLookup[id];
-		edge && (edge.selectable || store.elementsSelectable && edge.selectable === void 0) && (actions.setSelectionRect(void 0), actions.setSelectionRectMode(void 0), edge.selected ? edge.selected && store.multiselectionKeyPressed && actions.unselectNodesAndEdges({
-			nodes: [],
-			edges: [edge]
-		}) : actions.addSelectedEdges([id]));
-	};
-}
-//#endregion
 //#region src/hooks/useInitialized.ts
 /**
 * Hook for seeing if all nodes have been measured.
@@ -3669,11 +3761,16 @@ function useViewportInitialized() {
 //#endregion
 //#region src/hooks/useInternalNode.ts
 /**
-* Hook to get an internal node by id.
+* Hook to get an internal node (the node enriched with measured dimensions,
+* absolute position, and z-order) by id.
+*
+* The id is an accessor (not a plain string) on purpose: passing a raw
+* reactive read like `props.nodeId` would capture the value once and silently
+* lose reactivity — `useInternalNode(() => props.nodeId)` keeps it live.
 *
 * @public
-* @param id - the node id
-* @returns an accessor with an internal node or undefined
+* @param id - a reactive accessor for the node id
+* @returns an accessor with the internal node, or undefined while absent
 */
 function useInternalNode(id) {
 	let { flow } = useInternalSolidFlow();
@@ -3784,7 +3881,6 @@ const DEFAULT_SIZE = {
 	let _props = propDefaults(props, {
 		variant: "dots",
 		gap: 20,
-		size: 1,
 		lineWidth: 1,
 		style: {}
 	}), { store } = useInternalSolidFlow(), isDots = () => _props.variant === "dots", isCross = () => _props.variant === "cross", patternId = () => `background-pattern-${store.id}-${_props.id ?? ""}`, scaledSize = () => (_props.size ?? DEFAULT_SIZE[_props.variant]) * store.viewport.zoom, gapXY = () => Array.isArray(_props.gap) ? _props.gap : [_props.gap, _props.gap], scaledGap = () => [gapXY()[0] * store.viewport.zoom || 1, gapXY()[1] * store.viewport.zoom || 1], patternDimensions = () => isCross() ? [scaledSize(), scaledSize()] : scaledGap(), patternOffset = () => isDots() ? [scaledSize() / 2, scaledSize() / 2] : [patternDimensions()[0] / 2, patternDimensions()[1] / 2];
@@ -4016,18 +4112,19 @@ const Unlock = () => _tmpl$$5(), Controls = (props) => {
 //#endregion
 //#region src/plugins/minimap/MiniMapNode.tsx
 var _tmpl$$4 = /* @__PURE__ */ template("<svg><rect></svg>", 2);
+/** The default minimap node: a rounded rect. Custom `nodeComponent`s can wrap it. */
 const MiniMapNode = (props) => {
 	let _props = propDefaults(props, {
 		borderRadius: 5,
 		width: 0,
 		height: 0
-	}), style$1 = () => Object.entries({
-		fill: _props.color,
+	}), fill = () => _props.color ?? _props.style?.background ?? _props.style?.["background-color"], style$1 = () => Object.entries({
+		fill: fill(),
 		stroke: _props.strokeColor,
 		"stroke-width": _props.strokeWidth
 	}).filter(([_, value]) => value !== void 0).reduce((acc, [key, value]) => (acc[key] = value, acc), {});
 	var _el$ = _tmpl$$4();
-	return effect(() => ({
+	return addEvent(_el$, "click", _props.onClick ? (event) => _props.onClick(event, _props.id) : void 0, !0), effect(() => ({
 		e: [
 			"solid-flow__minimap-node",
 			{ selected: !!_props.selected },
@@ -4045,6 +4142,7 @@ const MiniMapNode = (props) => {
 		className(_el$, e, _p$?.e), t !== _p$?.t && setAttribute(_el$, "x", t), a !== _p$?.a && setAttribute(_el$, "y", a), o !== _p$?.o && setAttribute(_el$, "rx", o), i !== _p$?.i && setAttribute(_el$, "ry", i), n !== _p$?.n && setAttribute(_el$, "width", n), s !== _p$?.s && setAttribute(_el$, "height", s), h !== _p$?.h && setAttribute(_el$, "shape-rendering", h), style(_el$, r, _p$?.r);
 	}), _el$;
 };
+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>");
@@ -4060,7 +4158,7 @@ const getAttrFunction = (func) => func instanceof Function ? func : () => func,
 		nodeBorderRadius: 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"), 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", "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 = () => ({
 		x: -store.viewport.x / store.viewport.zoom,
 		y: -store.viewport.y / store.viewport.zoom,
 		width: store.width / store.viewport.zoom,
@@ -4127,8 +4225,19 @@ const getAttrFunction = (func) => func instanceof Function ? func : () => func,
 				}), ({ instance, options }) => {
 					instance?.update(options);
 				});
+				let onSvgClick = (event) => {
+					if (!_props.onClick) return;
+					let [x, y] = minimap()?.pointer(event) ?? [0, 0];
+					_props.onClick(event, {
+						x,
+						y
+					});
+				}, onSvgNodeClick = (event, nodeId) => {
+					let node = nodeLookup.get(nodeId)?.internals.userNode;
+					node && _props.onNodeClick?.(event, node);
+				};
 				var _el$ = _tmpl$$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-				return ref(() => setRef, _el$), insert(_el$2, () => store.ariaLabelConfig["minimap.ariaLabel"]), insert(_el$, createComponent(For, {
+				return addEvent(_el$, "click", _props.onClick ? onSvgClick : void 0, !0), ref(() => setRef, _el$), insert(_el$2, () => store.ariaLabelConfig["minimap.ariaLabel"]), insert(_el$, createComponent(For, {
 					keyed: !1,
 					get each() {
 						return nodeIds();
@@ -4139,7 +4248,13 @@ const getAttrFunction = (func) => func instanceof Function ? func : () => func,
 							get when() {
 								return memo(() => !!nodeVisible())() ? getNodeDimensions(node()) : nodeVisible();
 							},
-							children: (nodeDimensions) => createComponent(MiniMapNode, {
+							children: (nodeDimensions) => createComponent(Dynamic, {
+								get component() {
+									return _props.nodeComponent ?? MiniMapNode;
+								},
+								get id() {
+									return nodeId();
+								},
 								get x() {
 									return node().internals.positionAbsolute.x;
 								},
@@ -4172,6 +4287,12 @@ const getAttrFunction = (func) => func instanceof Function ? func : () => func,
 								},
 								get class() {
 									return nodeClassFunc().call(null, node());
+								},
+								get style() {
+									return node().style;
+								},
+								get onClick() {
+									return _props.onNodeClick ? onSvgNodeClick : void 0;
 								}
 							})
 						});
@@ -4194,6 +4315,7 @@ const getAttrFunction = (func) => func instanceof Function ? func : () => func,
 		});
 	} }));
 };
+delegateEvents(["click"]);
 //#endregion
 //#region src/plugins/nodeResizer/ResizeControl.tsx
 var _tmpl$$2 = /* @__PURE__ */ template("<div>");
@@ -4371,7 +4493,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(), { getNodes, getNodesBounds, getInternalNode } = useSolidFlow(), _props = propDefaults(props, {
+	let { store } = useInternalSolidFlow(), { flow, getNodesBounds } = useSolidFlow(), _props = propDefaults(props, {
 		offset: 10,
 		position: "top",
 		align: "center",
@@ -4380,7 +4502,7 @@ const NodeToolbar = (props) => {
 		let id = useContext(NodeIdContext);
 		return id ? id() : "";
 	}, toolbarNodes = () => (Array.isArray(_props.nodeId) ? _props.nodeId : [_props.nodeId ?? ctxNodeId()]).reduce((res, nodeId) => {
-		let node = getInternalNode(nodeId);
+		let node = flow.internalNodes[nodeId];
 		return node && res.push(node), res;
 	}, []), transform = () => {
 		let nodeRect = getNodesBounds(toolbarNodes());
@@ -4388,7 +4510,7 @@ const NodeToolbar = (props) => {
 	}, zIndex = () => {
 		let nodes = toolbarNodes();
 		return nodes.length === 0 ? 1 : Math.max(...nodes.map((node) => (node.internals.z || 5) + 1));
-	}, selectedNodesCount = () => getNodes().filter((node) => node.selected).length, isActive = () => {
+	}, selectedNodesCount = () => flow.selection.nodes.length, isActive = () => {
 		let nodes = toolbarNodes();
 		return typeof _props.isVisible == "boolean" ? _props.isVisible : nodes.length === 1 && !!nodes[0].selected && selectedNodesCount() === 1;
 	}, showPortal = () => !!(store.domNode && isActive() && toolbarNodes().length > 0);
@@ -4423,4 +4545,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, NodeRenderer, NodeResizer, NodeSelection, NodeToolbar, NodeWrapper, OutputNode, PanOnScrollMode, Pane, Panel, Position, ResizeControl, ResizeControlVariant, Selection, SelectionMode, SmoothStepEdge, SmoothStepEdgeInternal, SolidFlow, SolidFlowProvider, StepEdge, StepEdgeInternal, StraightEdge, StraightEdgeInternal, Viewport, ViewportPortal, Zoom, addEdge, connectionKey, createEdgeStore, createNodeStore, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, useColorMode, useConnection, useEdges, useHandleEdgeSelect, useInternalNode, useNodeConnections, useNodes, useNodesData, useNodesInitialized, useSolidFlow, useUpdateNodeInternals, useViewport, useViewportInitialized };
+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 };