@dschz/solid-flow 0.3.0-next.2 → 0.3.0-next.4

package/dist/index/index.js

@@ -1,13 +1,22 @@
 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, SelectionMode as SelectionMode$1, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdge, addEdge as addEdge$1, areConnectionMapsEqual, calcAutoPan, calculateNodePosition, clampPosition, clampPositionToParent, createDevWarn, createMarkerIds, elementSelectionKeys, evaluateAbsolutePosition, fitViewport, getBezierEdgeCenter, getBezierPath, getBezierPath as getBezierPath$1, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getDimensions, getEdgeCenter, getEdgePosition, getEdgeToolbarTransform, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHostForElement, getIncomers, getInternalNodesBounds, getMarkerId, getNodeDimensions, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesBounds as getNodesBounds$1, getNodesInside, getOutgoers, getOverlappingArea, getSmoothStepPath, getSmoothStepPath as getSmoothStepPath$1, getStraightPath, getStraightPath as getStraightPath$1, getViewportForBounds, getViewportForBounds as getViewportForBounds$1, handleConnectionChange, infiniteExtent, initialConnection, isCoordinateExtent, isEdgeBase, 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, 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";
 //#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
@@ -75,6 +84,7 @@ const getEdgeId = (connection) => {
 //#endregion
 //#region src/components/edge/EdgeLabel.tsx
 var _tmpl$$34 = /* @__PURE__ */ template("<div>");
+/** Renders an edge label positioned in graph coordinates. */
 const EdgeLabel = (props) => {
 	let _props = propDefaults(props, {
 		x: 0,
@@ -115,6 +125,7 @@ const EdgeLabel = (props) => {
 //#endregion
 //#region src/components/edge/BaseEdge.tsx
 var _tmpl$$33 = /* @__PURE__ */ template("<svg><path></svg>", 2), _tmpl$2$4 = /* @__PURE__ */ template("<svg><path stroke-opacity=0 fill=none class=solid-flow__edge-interaction></svg>", 2);
+/** Lowest-level edge primitive: renders the SVG path, label, and interaction width. */
 const BaseEdge = (props) => {
 	let _props = propDefaults(props, { interactionWidth: 20 }), rest = omit(_props, "class", "style", "path", "interactionWidth", "label", "labelStyle", "labelX", "labelY", "markerStart", "markerEnd");
 	return [
@@ -273,16 +284,19 @@ const BaseEdge = (props) => {
 //#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. */
 const EdgeReconnectAnchor = (props) => {
 	let _props = propDefaults(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,
@@ -306,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,
@@ -318,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,
@@ -341,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;
@@ -404,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;
@@ -468,7 +483,7 @@ const A11yDescriptions = () => {
 	selectNodesOnDrag: !0,
 	elevateNodesOnSelect: !0,
 	zIndexMode: "basic",
-	onlyRenderVisibleElements: !0,
+	onlyRenderVisibleElements: !1,
 	disableKeyboardA11y: !1,
 	defaultMarkerColor: "#b1b1b7",
 	ariaLiveMessage: "",
@@ -758,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);
@@ -921,9 +944,6 @@ const createLayoutedEdges = (source) => {
 			return zoomActivationKeyPressed();
 		}
 	}), cullingViewport = createCullingViewport({
-		get onlyRenderVisibleElements() {
-			return store.onlyRenderVisibleElements;
-		},
 		get width() {
 			return store.width;
 		},
@@ -1420,6 +1440,7 @@ const createLayoutedEdges = (source) => {
 //#endregion
 //#region src/components/edge/EdgeWrapper.tsx
 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) => {
 		selectable() && actions.handleEdgeSelection(edgeId()), props.onEdgeClick?.({
@@ -1854,6 +1875,7 @@ function useNodeConnectable() {
 //#endregion
 //#region src/components/handle/Handle.tsx
 var _tmpl$$29 = /* @__PURE__ */ template("<div>");
+/** Connection point on a node; place inside custom nodes to make them connectable. */
 const Handle = (props) => {
 	let _props = propDefaults(props, {
 		type: "source",
@@ -2021,6 +2043,7 @@ const Handle = (props) => {
 //#endregion
 //#region src/components/node/GroupNode.tsx
 var _tmpl$$28 = /* @__PURE__ */ template("<div style=position:absolute;left:0;top:0>");
+/** Built-in group node: a plain container for child nodes. */
 const GroupNode = (props) => (() => {
 	var _el$ = _tmpl$$28();
 	return effect(() => ({
@@ -2089,16 +2112,31 @@ 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
 //#region src/components/node/NodeWrapper.tsx
 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 = () => {
@@ -2494,6 +2532,7 @@ function useInternalSolidFlow() {
 //#endregion
 //#region src/components/connection/ConnectionLine.tsx
 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);
 	return createComponent(Show, {
@@ -2606,6 +2645,7 @@ const ConnectionLine = (props) => {
 //#endregion
 //#region src/components/marker/Marker.tsx
 var _tmpl$$25 = /* @__PURE__ */ template("<svg><polyline class=arrow fill=none stroke-linecap=round stroke-linejoin=round points=\"-5,-4 0,0 -5,4\"></svg>", 2), _tmpl$2$1 = /* @__PURE__ */ template("<svg><marker class=solid-flow__arrowhead viewBox=\"-10 -10 20 20\"refX=0 refY=0></svg>", 2), _tmpl$3$1 = /* @__PURE__ */ template("<svg><polyline class=arrowclosed stroke-linecap=round stroke-linejoin=round points=\"-5,-4 0,0 -5,4 -5,-4\"></svg>", 2);
+/** Internal SVG `<marker>` definition for one edge marker configuration. */
 const Marker = (props) => {
 	let _props = propDefaults(props, {
 		markerUnits: "strokeWidth",
@@ -2651,6 +2691,7 @@ const Marker = (props) => {
 //#endregion
 //#region src/components/marker/MarkerDefinition.tsx
 var _tmpl$$24 = /* @__PURE__ */ template("<svg class=solid-flow__marker><defs>");
+/** Internal collector rendering every unique edge marker into one SVG defs block. */
 const MarkerDefinition = () => {
 	let { store } = useInternalSolidFlow(), markers = createMemo(() => createMarkerIds(store.edges, {
 		id: store.id,
@@ -2676,35 +2717,55 @@ const MarkerDefinition = () => {
 //#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 } = 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, {
@@ -2717,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\">");
@@ -2907,6 +2987,7 @@ delegateEvents([
 //#endregion
 //#region src/components/container/Panel.tsx
 var _tmpl$$20 = /* @__PURE__ */ template("<div>");
+/** Positioned overlay container for UI placed above the flow (used by `Controls`, `MiniMap`, attribution). */
 const Panel = (props) => {
 	let { store } = useInternalSolidFlow(), _props = propDefaults(props, {
 		position: "top-right",
@@ -2957,6 +3038,7 @@ const Viewport = (props) => {
 //#endregion
 //#region src/components/container/Zoom.tsx
 var _tmpl$$18 = /* @__PURE__ */ template("<div class=\"solid-flow__container solid-flow__zoom\">");
+/** Internal viewport controller wiring pan/zoom gestures (XYPanZoom) to the flow. */
 const Zoom = (props) => {
 	let [ref$3, setRef] = createSignal(), { store, actions } = useInternalSolidFlow(), viewPort = () => props.initialViewport || {
 		x: 0,
@@ -3021,6 +3103,7 @@ const Zoom = (props) => {
 //#endregion
 //#region src/components/selection/Selection.tsx
 var _tmpl$$17 = /* @__PURE__ */ template("<div class=solid-flow__selection>");
+/** Internal selection-rectangle visual. */
 const Selection = (props) => {
 	let _props = propDefaults(props, { isVisible: !0 }), styles = () => ({
 		..._props.width != null && { width: typeof _props.width == "string" ? _props.width : toPxString(_props.width) },
@@ -3042,6 +3125,7 @@ const Selection = (props) => {
 //#endregion
 //#region src/components/selection/NodeSelection.tsx
 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;
 	createEffect(() => ({
@@ -3151,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
@@ -3246,8 +3319,9 @@ const KeyHandler = (props) => {
 	}), 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) => {
 	let [domNodeRef, setDomNodeRef] = createSignal(), domNode, _props = merge({
 		...getDefaultFlowStateProps(),
@@ -3610,18 +3684,6 @@ function useViewport() {
 	return () => flow.viewport;
 }
 //#endregion
-//#region src/hooks/useHandleEdgeSelect.ts
-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.
@@ -3651,11 +3713,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();
@@ -3766,7 +3833,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];
@@ -3822,6 +3888,7 @@ const DEFAULT_SIZE = {
 //#endregion
 //#region src/plugins/controls/ControlButton.tsx
 var _tmpl$$10 = /* @__PURE__ */ template("<button>");
+/** A styled button for use inside `Controls`. */
 const ControlButton = (props) => {
 	let rest = omit(props, "class", "bgColor", "bgColorHover", "color", "colorHover", "borderColor", "onClick", "children"), style = () => Object.entries({
 		"--xy-controls-button-background-color-props": props.bgColor,
@@ -3997,18 +4064,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 },
@@ -4026,6 +4094,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>");
@@ -4041,7 +4110,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,
@@ -4108,8 +4177,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();
@@ -4120,7 +4200,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;
 								},
@@ -4153,6 +4239,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;
 								}
 							})
 						});
@@ -4175,9 +4267,11 @@ const getAttrFunction = (func) => func instanceof Function ? func : () => func,
 		});
 	} }));
 };
+delegateEvents(["click"]);
 //#endregion
 //#region src/plugins/nodeResizer/ResizeControl.tsx
 var _tmpl$$2 = /* @__PURE__ */ template("<div>");
+/** A single resize handle or line — the building block of `NodeResizer`. */
 const ResizeControl = (props) => {
 	let _props = propDefaults(props, {
 		variant: "handle",
@@ -4349,8 +4443,9 @@ const EdgeToolbar = (props) => {
 //#endregion
 //#region src/plugins/toolbar/NodeToolbar.tsx
 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",
@@ -4359,7 +4454,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());
@@ -4367,7 +4462,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);
@@ -4400,6 +4495,6 @@ 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 };