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

package/dist/index/index.jsx

@@ -1,9 +1,9 @@
+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 { For, Show, createContext, createEffect, createMemo, createProjection, createSignal, createStore, flush, mapArray, merge, omit, onCleanup, onSettled, snapshot, untrack, useContext } from "solid-js";
 import { createMediaQuery } from "@solid-primitives/media";
-import { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, Position as Position$1, ResizeControlVariant, SelectionMode, SelectionMode as SelectionMode$1, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdge, addEdge as addEdge$1, areConnectionMapsEqual, calcAutoPan, calculateNodePosition, clampPosition, clampPositionToParent, createDevWarn, createMarkerIds, elementSelectionKeys, evaluateAbsolutePosition, fitViewport, getBezierEdgeCenter, getBezierPath, getBezierPath as getBezierPath$1, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getDimensions, getEdgeCenter, getEdgePosition, getEdgeToolbarTransform, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHostForElement, getIncomers, getInternalNodesBounds, getMarkerId, getNodeDimensions, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesBounds as getNodesBounds$1, getNodesInside, getOutgoers, getOverlappingArea, getSmoothStepPath, getSmoothStepPath as getSmoothStepPath$1, getStraightPath, getStraightPath as getStraightPath$1, getViewportForBounds, getViewportForBounds as getViewportForBounds$1, handleConnectionChange, infiniteExtent, initialConnection, isCoordinateExtent, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isNodeBase, isNumeric, isRectObject, mergeAriaLabelConfig, nodeHasDimensions, nodeToRect, panBy, pointToRendererPoint, rendererPointToPoint, shallowNodeData, snapPosition } from "@xyflow/system";
 import { Dynamic, Portal, isServer } from "@solidjs/web";
 import { createEventListener, createEventListenerMap } from "@solid-primitives/event-listener";
-//#region src/components/contexts/edgeId.tsx
+//#region src/contexts/edgeId.ts
 const EdgeIdContext = createContext(null);
 function useEdgeId() {
 	let ctx = useContext(EdgeIdContext);
@@ -53,9 +53,10 @@ function propDefaults(props, defaults) {
 	});
 	return out;
 }
-//#endregion
-//#region src/components/graph/edge/EdgeLabelRenderer.tsx
-const EdgeLabelRenderer = (props) => {
+const getEdgeId = (connection) => {
+	let { source, sourceHandle, target, targetHandle } = connection;
+	return `xy-edge__${source}${sourceHandle || ""}-${target}${targetHandle || ""}`;
+}, 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) => {
@@ -222,145 +223,40 @@ const EdgeLabelRenderer = (props) => {
         </div>
       </Show>
     </>;
-}, 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?.({
-			edge: edge(),
-			event
-		});
-	}, onPointerEvent = (event, type) => {
-		({
-			contextmenu: props.onEdgeContextMenu,
-			pointerenter: props.onEdgePointerEnter,
-			pointerleave: props.onEdgePointerLeave
-		})[type]?.({
-			edge: edge(),
-			event
-		});
-	}, onKeyDown = (event) => {
-		store.disableKeyboardA11y || !elementSelectionKeys.includes(event.key) || !selectable() || (event.key === "Escape" ? actions.unselectNodesAndEdges({ edges: [edge()] }) : actions.addSelectedEdges([edge().id]));
-	}, ariaLabel = () => edge().ariaLabel ?? `Edge from ${edge().source} to ${edge().target}`;
-	return <EdgeIdContext value={edgeId}>
-      <Show when={!edge().hidden}>
-        <svg class="solid-flow__edge-wrapper" style={{ "z-index": edge().zIndex }}>
-          <g ref={edgeRef} data-id={edge().id} tabindex={focusable() ? 0 : void 0} role={edge().ariaRole ?? (focusable() ? "group" : "img")} aria-label={ariaLabel()} aria-roledescription="edge" aria-describedby={focusable() ? `${ARIA_EDGE_DESC_KEY}-${store.id}` : void 0} class={[
-		"solid-flow__edge",
-		`solid-flow__edge-${edgeType()}`,
-		{
-			animated: !!edge().animated,
-			selected: !!edge().selected,
-			selectable: !!selectable()
-		},
-		edge().class
-	]} onClick={onClick} onKeyDown={(e) => focusable() && onKeyDown(e)} onContextMenu={(e) => onPointerEvent(e, "contextmenu")} onPointerEnter={(e) => onPointerEvent(e, "pointerenter")} onPointerLeave={(e) => onPointerEvent(e, "pointerleave")} {...edge().domAttributes}>
-            <Dynamic component={edgeComponent()} id={edge().id} source={edge().source} target={edge().target} sourceX={edge().sourceX} sourceY={edge().sourceY} targetX={edge().targetX} targetY={edge().targetY} sourcePosition={edge().sourcePosition} targetPosition={edge().targetPosition} animated={edge().animated} selected={edge().selected} label={edge().label} labelStyle={edge().labelStyle} data={edge().data} style={edge().style} interactionWidth={edge().interactionWidth} selectable={selectable()} deletable={edge().deletable ?? !0} type={edgeType()} sourceHandleId={edge().sourceHandle} targetHandleId={edge().targetHandle} markerStart={markerStartUrl()} markerEnd={markerEndUrl()} />
-          </g>
-        </svg>
-      </Show>
-    </EdgeIdContext>;
-}, SmoothStepEdge = (props) => {
-	let pathData = createMemo(() => {
-		let [path, labelX, labelY] = getSmoothStepPath$1({
-			sourceX: props.sourceX,
-			sourceY: props.sourceY,
-			targetX: props.targetX,
-			targetY: props.targetY,
-			sourcePosition: props.sourcePosition,
-			targetPosition: props.targetPosition,
-			borderRadius: props.pathOptions?.borderRadius,
-			offset: props.pathOptions?.offset
-		});
-		return {
-			path,
-			labelX,
-			labelY
-		};
-	});
-	return <BaseEdge id={props.id} path={pathData().path} labelX={pathData().labelX} labelY={pathData().labelY} label={props.label} labelStyle={props.labelStyle} markerStart={props.markerStart} markerEnd={props.markerEnd} interactionWidth={props.interactionWidth} style={props.style} />;
-}, SmoothStepEdgeInternal = (props) => {
-	let pathData = () => {
-		let [path, labelX, labelY] = getSmoothStepPath$1({
-			sourceX: props.sourceX,
-			sourceY: props.sourceY,
-			targetX: props.targetX,
-			targetY: props.targetY,
-			sourcePosition: props.sourcePosition,
-			targetPosition: props.targetPosition
-		});
-		return {
-			path,
-			labelX,
-			labelY
-		};
-	};
-	return <BaseEdge path={pathData().path} labelX={pathData().labelX} labelY={pathData().labelY} label={props.label} labelStyle={props.labelStyle} markerStart={props.markerStart} markerEnd={props.markerEnd} interactionWidth={props.interactionWidth} style={props.style} />;
-}, StepEdge = (props) => {
-	let pathData = createMemo(() => {
-		let [path, labelX, labelY] = getSmoothStepPath$1({
-			sourceX: props.sourceX,
-			sourceY: props.sourceY,
-			targetX: props.targetX,
-			targetY: props.targetY,
-			sourcePosition: props.sourcePosition,
-			targetPosition: props.targetPosition,
-			borderRadius: 0,
-			offset: props.pathOptions?.offset
-		});
-		return {
-			path,
-			labelX,
-			labelY
-		};
-	});
-	return <BaseEdge id={props.id} path={pathData().path} labelX={pathData().labelX} labelY={pathData().labelY} label={props.label} labelStyle={props.labelStyle} markerStart={props.markerStart} markerEnd={props.markerEnd} interactionWidth={props.interactionWidth} style={props.style} />;
-}, StepEdgeInternal = (props) => {
-	let pathData = () => {
-		let [path, labelX, labelY] = getSmoothStepPath$1({
-			sourceX: props.sourceX,
-			sourceY: props.sourceY,
-			targetX: props.targetX,
-			targetY: props.targetY,
-			sourcePosition: props.sourcePosition,
-			targetPosition: props.targetPosition,
-			borderRadius: 0
-		});
-		return {
-			path,
-			labelX,
-			labelY
-		};
-	};
-	return <BaseEdge path={pathData().path} labelX={pathData().labelX} labelY={pathData().labelY} label={props.label} labelStyle={props.labelStyle} markerStart={props.markerStart} markerEnd={props.markerEnd} interactionWidth={props.interactionWidth} style={props.style} />;
-}, StraightEdge = (props) => {
-	let pathData = createMemo(() => {
-		let [path, labelX, labelY] = getStraightPath$1({
-			sourceX: props.sourceX,
-			sourceY: props.sourceY,
-			targetX: props.targetX,
-			targetY: props.targetY
-		});
-		return {
-			path,
-			labelX,
-			labelY
-		};
-	});
-	return <BaseEdge id={props.id} path={pathData().path} labelX={pathData().labelX} labelY={pathData().labelY} label={props.label} labelStyle={props.labelStyle} markerStart={props.markerStart} markerEnd={props.markerEnd} interactionWidth={props.interactionWidth} style={props.style} />;
-}, StraightEdgeInternal = (props) => {
-	let pathData = () => {
-		let [path, labelX, labelY] = getStraightPath$1({
-			sourceX: props.sourceX,
-			sourceY: props.sourceY,
-			targetX: props.targetX,
-			targetY: props.targetY
-		});
-		return {
-			path,
-			labelX,
-			labelY
-		};
+}, createEdgeStore = (edges) => {
+	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;
+	return {
+		x: quantizedX - halfWidth,
+		y: quantizedY - halfHeight,
+		width: 2 * halfWidth,
+		height: 2 * halfHeight
 	};
-	return <BaseEdge path={pathData().path} labelX={pathData().labelX} labelY={pathData().labelY} label={props.label} labelStyle={props.labelStyle} markerStart={props.markerStart} markerEnd={props.markerEnd} interactionWidth={props.interactionWidth} style={props.style} />;
+}, { equals: rectsEqual }), isNodeCulled = (node, cullingViewport) => {
+	if (!cullingViewport || node.selected) return !1;
+	let { width, height } = node.measured;
+	if (!width || !height) return !1;
+	let { x, y } = node.internals.positionAbsolute;
+	return !rectsOverlap({
+		x,
+		y,
+		width,
+		height
+	}, cullingViewport);
+}, isEdgeCulled = (row, cullingViewport) => {
+	if (!cullingViewport || row.selected) return !1;
+	let x = Math.min(row.sourceX, row.targetX), y = Math.min(row.sourceY, row.targetY);
+	return !rectsOverlap({
+		x,
+		y,
+		width: Math.abs(row.sourceX - row.targetX),
+		height: Math.abs(row.sourceY - row.targetY)
+	}, cullingViewport);
 }, getDefaultFlowStateProps = () => ({
 	id: "1",
 	nodes: [],
@@ -395,7 +291,7 @@ const EdgeLabelRenderer = (props) => {
 	selectNodesOnDrag: !0,
 	elevateNodesOnSelect: !0,
 	zIndexMode: "basic",
-	onlyRenderVisibleElements: !1,
+	onlyRenderVisibleElements: !0,
 	disableKeyboardA11y: !1,
 	defaultMarkerColor: "#b1b1b7",
 	ariaLiveMessage: "",
@@ -595,8 +491,10 @@ function calculateChildXYZ(childNode, parentNode, nodeOrigin, nodeExtent, select
 * the adjacent edges' projections; the record computed re-runs only when
 * membership or presence changes.
 *
-* The viewport participates only while onlyRenderVisibleElements is active —
-* panning must not touch edge rows otherwise.
+* The viewport never participates here: #15 culling is CSS-only, applied by
+* EdgeWrapper from the quantized culling viewport — panning must not touch
+* edge rows, and the record's membership must not change as edges cross the
+* viewport (no mount/unmount churn).
 *
 * Rows whose endpoints are missing or unmeasured simply drop out of the
 * record — the same "no entry" contract the ReactiveMap pipeline had.
@@ -623,13 +521,6 @@ const createLayoutedEdges = (source) => {
 }, buildRow = (source, edge) => {
 	let sourceNode = source.nodeLookup.get(edge.source), targetNode = source.nodeLookup.get(edge.target);
 	if (!sourceNode || !targetNode) return source.nodeLookup.size, null;
-	if (source.onlyRenderVisibleElements && !isEdgeVisible({
-		sourceNode,
-		targetNode,
-		width: source.width ?? 0,
-		height: source.height ?? 0,
-		transform: source.transform
-	})) return null;
 	let edgePosition = getEdgePosition({
 		id: edge.id,
 		sourceNode,
@@ -825,8 +716,8 @@ const createLayoutedEdges = (source) => {
 		get visibleNodeIds() {
 			return visibleNodeIds();
 		},
-		get visibleNodesMap() {
-			return visibleNodesMap();
+		get cullingViewport() {
+			return cullingViewport();
 		},
 		get transform() {
 			return transform();
@@ -852,7 +743,20 @@ const createLayoutedEdges = (source) => {
 		get zoomActivationKeyPressed() {
 			return zoomActivationKeyPressed();
 		}
-	}), visibleNodesMap = createMemo(() => nodeLookup), visibleNodeIds = createMemo(() => Object.keys(internalNodes)), parentIds = createParentIds({ get nodes() {
+	}), cullingViewport = createCullingViewport({
+		get onlyRenderVisibleElements() {
+			return store.onlyRenderVisibleElements;
+		},
+		get width() {
+			return store.width;
+		},
+		get height() {
+			return store.height;
+		},
+		get transform() {
+			return transform();
+		}
+	}), visibleNodeIds = createMemo(() => Object.keys(internalNodes)), parentIds = createParentIds({ get nodes() {
 		return store.nodes;
 	} }), edgeLookup = createEdgeLookup({ get edges() {
 		return store.edges;
@@ -874,18 +778,6 @@ const createLayoutedEdges = (source) => {
 		get zIndexMode() {
 			return store.zIndexMode;
 		},
-		get onlyRenderVisibleElements() {
-			return store.onlyRenderVisibleElements;
-		},
-		get width() {
-			return store.width;
-		},
-		get height() {
-			return store.height;
-		},
-		get transform() {
-			return store.transform;
-		},
 		get onError() {
 			return store.onError;
 		},
@@ -1344,89 +1236,232 @@ const createLayoutedEdges = (source) => {
 			reset
 		}
 	};
-}, getEdgeId = (connection) => {
-	let { source, sourceHandle, target, targetHandle } = connection;
-	return `xy-edge__${source}${sourceHandle || ""}-${target}${targetHandle || ""}`;
-}, NodeConnectableContext = createContext(null);
-function useNodeConnectable() {
-	let ctx = useContext(NodeConnectableContext);
-	if (!ctx) throw Error("solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useNodeConnectable");
-	return ctx;
-}
-//#endregion
-//#region src/components/graph/handle/Handle.tsx
-const Handle = (props) => {
-	let _props = propDefaults(props, {
-		type: "source",
-		position: "top",
-		isConnectableStart: !0,
-		isConnectableEnd: !0
-	}), { store, nodeLookup, connections, actions } = useInternalSolidFlow(), rest = omit(_props, "id", "type", "position", "isConnectable", "isConnectableStart", "isConnectableEnd", "isValidConnection", "onConnect", "onDisconnect", "children", "class", "style"), nodeId = useNodeId(), nodeConnectable = useNodeConnectable(), connectable = () => _props.isConnectable ?? nodeConnectable(), isTarget = () => _props.type === "target", handleId = () => _props.id ?? null, connectionInProcess = () => !!store.connection.fromHandle, connectingFrom = () => store.connection.fromHandle && store.connection.fromHandle.nodeId === nodeId() && store.connection.fromHandle.type === _props.type && store.connection.fromHandle.id === handleId(), connectingTo = () => store.connection.toHandle && store.connection.toHandle.nodeId === nodeId() && store.connection.toHandle.type === _props.type && store.connection.toHandle.id === handleId(), isPossibleTargetHandle = () => store.connectionMode === "strict" ? store.connection.fromHandle?.type !== _props.type : nodeId() !== store.connection.fromHandle?.nodeId || handleId() !== store.connection.fromHandle?.id, valid = () => !!(connectingTo() && store.connection.isValid), prevConnections = null;
-	createEffect(() => {
-		if (!_props.onConnect && !_props.onDisconnect) return null;
-		let rec = connections[connectionKey(nodeId(), _props.type, _props.id)], map = /* @__PURE__ */ new Map();
-		for (let key of Object.keys(rec ?? {})) map.set(key, { ...rec[key] });
-		return { connections: map };
-	}, (current) => {
-		if (!current) return;
-		let { connections: next } = current;
-		prevConnections && !areConnectionMapsEqual(next, prevConnections) && (handleConnectionChange(prevConnections, next, props.onDisconnect), handleConnectionChange(next, prevConnections, props.onConnect)), prevConnections = next;
-	});
-	let onConnectExtended = (connection) => {
-		let handleConnection = {
-			...connection,
-			id: getEdgeId(connection)
-		}, edge = store.onBeforeConnect?.(handleConnection) ?? handleConnection;
-		actions.addEdge(edge), store.onConnect?.(handleConnection);
-	}, onPointerDown = (event) => {
-		XYHandle.onPointerDown(event, {
-			handleId: handleId(),
-			nodeId: nodeId(),
-			isTarget: isTarget(),
-			connectionRadius: store.connectionRadius,
-			domNode: store.domNode,
-			nodeLookup,
-			connectionMode: store.connectionMode,
-			lib: store.lib,
-			autoPanOnConnect: store.autoPanOnConnect,
-			flowId: store.id,
-			isValidConnection: _props.isValidConnection ?? store.isValidConnection,
-			updateConnection: ((connection) => {
-				actions.setConnection(connection), flush();
-			}),
-			cancelConnection: actions.cancelConnection,
-			panBy: actions.panBy,
-			onConnect: onConnectExtended,
-			onConnectStart: (event, startParams) => {
-				store.onConnectStart?.(event, {
-					nodeId: startParams.nodeId,
-					handleId: startParams.handleId,
-					handleType: startParams.handleType
-				});
-			},
-			onConnectEnd: store.onConnectEnd,
-			getTransform: () => store.transform,
-			getFromHandle: () => store.connection.fromHandle,
-			autoPanSpeed: store.autoPanSpeed,
-			dragThreshold: store.connectionDragThreshold,
-			handleDomNode: event.currentTarget
+}, createNodeStore = (nodes) => {
+	let [store, setStore] = createStore(nodes);
+	return [store, setStore];
+}, 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?.({
+			edge: edge(),
+			event
 		});
-	}, onClick = (event) => {
-		if (!nodeId() || !store.clickConnectStartHandle && !_props.isConnectableStart) return;
-		if (!store.clickConnectStartHandle) {
-			store.onClickConnectStart?.(event, {
-				nodeId: nodeId(),
-				handleId: handleId(),
-				handleType: _props.type
-			}), actions.setClickConnectStartHandle({
-				nodeId: nodeId(),
-				type: _props.type,
-				id: handleId()
-			});
-			return;
-		}
-		let doc = getHostForElement(event.target), isValidConnectionHandler = _props.isValidConnection ?? store.isValidConnection, { connection, isValid } = XYHandle.isValid(event, {
-			handle: {
+	}, onPointerEvent = (event, type) => {
+		({
+			contextmenu: props.onEdgeContextMenu,
+			pointerenter: props.onEdgePointerEnter,
+			pointerleave: props.onEdgePointerLeave
+		})[type]?.({
+			edge: edge(),
+			event
+		});
+	}, onKeyDown = (event) => {
+		store.disableKeyboardA11y || !elementSelectionKeys.includes(event.key) || !selectable() || (event.key === "Escape" ? actions.unselectNodesAndEdges({ edges: [edge()] }) : actions.addSelectedEdges([edge().id]));
+	}, ariaLabel = () => edge().ariaLabel ?? `Edge from ${edge().source} to ${edge().target}`, culled = createMemo(() => isEdgeCulled(edge(), store.cullingViewport));
+	return <EdgeIdContext value={edgeId}>
+      <Show when={!edge().hidden}>
+        <svg class="solid-flow__edge-wrapper" style={{
+		"z-index": edge().zIndex,
+		visibility: culled() ? "hidden" : void 0,
+		"pointer-events": culled() ? "none" : void 0
+	}}>
+          <g ref={edgeRef} data-id={edge().id} tabindex={focusable() ? 0 : void 0} role={edge().ariaRole ?? (focusable() ? "group" : "img")} aria-label={ariaLabel()} aria-roledescription="edge" aria-describedby={focusable() ? `${ARIA_EDGE_DESC_KEY}-${store.id}` : void 0} class={[
+		"solid-flow__edge",
+		`solid-flow__edge-${edgeType()}`,
+		{
+			animated: !!edge().animated,
+			selected: !!edge().selected,
+			selectable: !!selectable()
+		},
+		edge().class
+	]} onClick={onClick} onKeyDown={(e) => focusable() && onKeyDown(e)} onContextMenu={(e) => onPointerEvent(e, "contextmenu")} onPointerEnter={(e) => onPointerEvent(e, "pointerenter")} onPointerLeave={(e) => onPointerEvent(e, "pointerleave")} {...edge().domAttributes}>
+            <Dynamic component={edgeComponent()} id={edge().id} source={edge().source} target={edge().target} sourceX={edge().sourceX} sourceY={edge().sourceY} targetX={edge().targetX} targetY={edge().targetY} sourcePosition={edge().sourcePosition} targetPosition={edge().targetPosition} animated={edge().animated} selected={edge().selected} label={edge().label} labelStyle={edge().labelStyle} data={edge().data} style={edge().style} interactionWidth={edge().interactionWidth} selectable={selectable()} deletable={edge().deletable ?? !0} type={edgeType()} sourceHandleId={edge().sourceHandle} targetHandleId={edge().targetHandle} markerStart={markerStartUrl()} markerEnd={markerEndUrl()} />
+          </g>
+        </svg>
+      </Show>
+    </EdgeIdContext>;
+}, SmoothStepEdge = (props) => {
+	let pathData = createMemo(() => {
+		let [path, labelX, labelY] = getSmoothStepPath$1({
+			sourceX: props.sourceX,
+			sourceY: props.sourceY,
+			targetX: props.targetX,
+			targetY: props.targetY,
+			sourcePosition: props.sourcePosition,
+			targetPosition: props.targetPosition,
+			borderRadius: props.pathOptions?.borderRadius,
+			offset: props.pathOptions?.offset
+		});
+		return {
+			path,
+			labelX,
+			labelY
+		};
+	});
+	return <BaseEdge id={props.id} path={pathData().path} labelX={pathData().labelX} labelY={pathData().labelY} label={props.label} labelStyle={props.labelStyle} markerStart={props.markerStart} markerEnd={props.markerEnd} interactionWidth={props.interactionWidth} style={props.style} />;
+}, SmoothStepEdgeInternal = (props) => {
+	let pathData = () => {
+		let [path, labelX, labelY] = getSmoothStepPath$1({
+			sourceX: props.sourceX,
+			sourceY: props.sourceY,
+			targetX: props.targetX,
+			targetY: props.targetY,
+			sourcePosition: props.sourcePosition,
+			targetPosition: props.targetPosition
+		});
+		return {
+			path,
+			labelX,
+			labelY
+		};
+	};
+	return <BaseEdge path={pathData().path} labelX={pathData().labelX} labelY={pathData().labelY} label={props.label} labelStyle={props.labelStyle} markerStart={props.markerStart} markerEnd={props.markerEnd} interactionWidth={props.interactionWidth} style={props.style} />;
+}, StepEdge = (props) => {
+	let pathData = createMemo(() => {
+		let [path, labelX, labelY] = getSmoothStepPath$1({
+			sourceX: props.sourceX,
+			sourceY: props.sourceY,
+			targetX: props.targetX,
+			targetY: props.targetY,
+			sourcePosition: props.sourcePosition,
+			targetPosition: props.targetPosition,
+			borderRadius: 0,
+			offset: props.pathOptions?.offset
+		});
+		return {
+			path,
+			labelX,
+			labelY
+		};
+	});
+	return <BaseEdge id={props.id} path={pathData().path} labelX={pathData().labelX} labelY={pathData().labelY} label={props.label} labelStyle={props.labelStyle} markerStart={props.markerStart} markerEnd={props.markerEnd} interactionWidth={props.interactionWidth} style={props.style} />;
+}, StepEdgeInternal = (props) => {
+	let pathData = () => {
+		let [path, labelX, labelY] = getSmoothStepPath$1({
+			sourceX: props.sourceX,
+			sourceY: props.sourceY,
+			targetX: props.targetX,
+			targetY: props.targetY,
+			sourcePosition: props.sourcePosition,
+			targetPosition: props.targetPosition,
+			borderRadius: 0
+		});
+		return {
+			path,
+			labelX,
+			labelY
+		};
+	};
+	return <BaseEdge path={pathData().path} labelX={pathData().labelX} labelY={pathData().labelY} label={props.label} labelStyle={props.labelStyle} markerStart={props.markerStart} markerEnd={props.markerEnd} interactionWidth={props.interactionWidth} style={props.style} />;
+}, StraightEdge = (props) => {
+	let pathData = createMemo(() => {
+		let [path, labelX, labelY] = getStraightPath$1({
+			sourceX: props.sourceX,
+			sourceY: props.sourceY,
+			targetX: props.targetX,
+			targetY: props.targetY
+		});
+		return {
+			path,
+			labelX,
+			labelY
+		};
+	});
+	return <BaseEdge id={props.id} path={pathData().path} labelX={pathData().labelX} labelY={pathData().labelY} label={props.label} labelStyle={props.labelStyle} markerStart={props.markerStart} markerEnd={props.markerEnd} interactionWidth={props.interactionWidth} style={props.style} />;
+}, StraightEdgeInternal = (props) => {
+	let pathData = () => {
+		let [path, labelX, labelY] = getStraightPath$1({
+			sourceX: props.sourceX,
+			sourceY: props.sourceY,
+			targetX: props.targetX,
+			targetY: props.targetY
+		});
+		return {
+			path,
+			labelX,
+			labelY
+		};
+	};
+	return <BaseEdge path={pathData().path} labelX={pathData().labelX} labelY={pathData().labelY} label={props.label} labelStyle={props.labelStyle} markerStart={props.markerStart} markerEnd={props.markerEnd} interactionWidth={props.interactionWidth} style={props.style} />;
+}, NodeConnectableContext = createContext(null);
+function useNodeConnectable() {
+	let ctx = useContext(NodeConnectableContext);
+	if (!ctx) throw Error("solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useNodeConnectable");
+	return ctx;
+}
+//#endregion
+//#region src/components/handle/Handle.tsx
+const Handle = (props) => {
+	let _props = propDefaults(props, {
+		type: "source",
+		position: "top",
+		isConnectableStart: !0,
+		isConnectableEnd: !0
+	}), { store, nodeLookup, connections, actions } = useInternalSolidFlow(), rest = omit(_props, "id", "type", "position", "isConnectable", "isConnectableStart", "isConnectableEnd", "isValidConnection", "onConnect", "onDisconnect", "children", "class", "style"), nodeId = useNodeId(), nodeConnectable = useNodeConnectable(), connectable = () => _props.isConnectable ?? nodeConnectable(), isTarget = () => _props.type === "target", handleId = () => _props.id ?? null, connectionInProcess = () => !!store.connection.fromHandle, connectingFrom = () => store.connection.fromHandle && store.connection.fromHandle.nodeId === nodeId() && store.connection.fromHandle.type === _props.type && store.connection.fromHandle.id === handleId(), connectingTo = () => store.connection.toHandle && store.connection.toHandle.nodeId === nodeId() && store.connection.toHandle.type === _props.type && store.connection.toHandle.id === handleId(), isPossibleTargetHandle = () => store.connectionMode === "strict" ? store.connection.fromHandle?.type !== _props.type : nodeId() !== store.connection.fromHandle?.nodeId || handleId() !== store.connection.fromHandle?.id, valid = () => !!(connectingTo() && store.connection.isValid), prevConnections = null;
+	createEffect(() => {
+		if (!_props.onConnect && !_props.onDisconnect) return null;
+		let rec = connections[connectionKey(nodeId(), _props.type, _props.id)], map = /* @__PURE__ */ new Map();
+		for (let key of Object.keys(rec ?? {})) map.set(key, { ...rec[key] });
+		return { connections: map };
+	}, (current) => {
+		if (!current) return;
+		let { connections: next } = current;
+		prevConnections && !areConnectionMapsEqual(next, prevConnections) && (handleConnectionChange(prevConnections, next, props.onDisconnect), handleConnectionChange(next, prevConnections, props.onConnect)), prevConnections = next;
+	});
+	let onConnectExtended = (connection) => {
+		let handleConnection = {
+			...connection,
+			id: getEdgeId(connection)
+		}, edge = store.onBeforeConnect?.(handleConnection) ?? handleConnection;
+		actions.addEdge(edge), store.onConnect?.(handleConnection);
+	}, onPointerDown = (event) => {
+		XYHandle.onPointerDown(event, {
+			handleId: handleId(),
+			nodeId: nodeId(),
+			isTarget: isTarget(),
+			connectionRadius: store.connectionRadius,
+			domNode: store.domNode,
+			nodeLookup,
+			connectionMode: store.connectionMode,
+			lib: store.lib,
+			autoPanOnConnect: store.autoPanOnConnect,
+			flowId: store.id,
+			isValidConnection: _props.isValidConnection ?? store.isValidConnection,
+			updateConnection: ((connection) => {
+				actions.setConnection(connection), flush();
+			}),
+			cancelConnection: actions.cancelConnection,
+			panBy: actions.panBy,
+			onConnect: onConnectExtended,
+			onConnectStart: (event, startParams) => {
+				store.onConnectStart?.(event, {
+					nodeId: startParams.nodeId,
+					handleId: startParams.handleId,
+					handleType: startParams.handleType
+				});
+			},
+			onConnectEnd: store.onConnectEnd,
+			getTransform: () => store.transform,
+			getFromHandle: () => store.connection.fromHandle,
+			autoPanSpeed: store.autoPanSpeed,
+			dragThreshold: store.connectionDragThreshold,
+			handleDomNode: event.currentTarget
+		});
+	}, onClick = (event) => {
+		if (!nodeId() || !store.clickConnectStartHandle && !_props.isConnectableStart) return;
+		if (!store.clickConnectStartHandle) {
+			store.onClickConnectStart?.(event, {
+				nodeId: nodeId(),
+				handleId: handleId(),
+				handleType: _props.type
+			}), actions.setClickConnectStartHandle({
+				nodeId: nodeId(),
+				type: _props.type,
+				id: handleId()
+			});
+			return;
+		}
+		let doc = getHostForElement(event.target), isValidConnectionHandler = _props.isValidConnection ?? store.isValidConnection, { connection, isValid } = XYHandle.isValid(event, {
+			handle: {
 				nodeId: nodeId(),
 				id: handleId(),
 				type: _props.type
@@ -1542,7 +1577,7 @@ function useNodeId() {
 	return ctx;
 }
 //#endregion
-//#region src/components/graph/node/NodeWrapper.tsx
+//#region src/components/node/NodeWrapper.tsx
 const NodeWrapper = (props) => {
 	let { store, nodeLookup, parentIds, actions } = useInternalSolidFlow(), [nodeRef, setNodeRef] = createSignal(), node = () => nodeLookup.get(props.nodeId), nodeId = () => node().id, nodeType = () => node().type ?? "default", deletable = () => node().deletable ?? !0, selectable = () => node().selectable ?? store.elementsSelectable, focusable = () => node().focusable ?? store.nodesFocusable, draggable = () => node().draggable ?? store.nodesDraggable, connectable = () => node().connectable ?? store.nodesConnectable, userNode = () => node().internals.userNode, nodeTypeValid = () => nodeType() in store.nodeTypes, nodeComponent = () => store.nodeTypes[nodeType()], isParentNode = () => !!parentIds[node().id], transform = () => {
 		let { x, y } = node().internals.positionAbsolute;
@@ -1554,10 +1589,11 @@ const NodeWrapper = (props) => {
 			...w ? { width: toPxString(w) } : {},
 			...h ? { height: toPxString(h) } : {}
 		};
-	}, style = () => ({
+	}, culled = createMemo(() => isNodeCulled(node(), store.cullingViewport)), style = () => ({
 		"z-index": node().internals.z,
 		transform: transform(),
-		visibility: nodeHasDimensions(node()) ? "visible" : "hidden",
+		visibility: culled() || !nodeHasDimensions(node()) ? "hidden" : "visible",
+		"pointer-events": culled() ? "none" : void 0,
 		...sizeStyle(),
 		...node().style ?? {}
 	});
@@ -1685,7 +1721,7 @@ const NodeWrapper = (props) => {
     </>;
 };
 //#endregion
-//#region src/data/xyflow.ts
+//#region src/browser/measure.ts
 /**
 * The DOM side of the measurement pipeline (fork of @xyflow/system's
 * updateNodeInternals): reads each updated node element's dimensions and
@@ -1795,7 +1831,7 @@ function handleExpandParent(children, nodeLookup, getChildNodes, nodeOrigin = [0
 	}), changes;
 }
 //#endregion
-//#region src/data/createSolidFlow.tsx
+//#region src/browser/createSolidFlow.ts
 const InitialNodeTypesMap = {
 	input: InputNode,
 	output: OutputNode,
@@ -1837,8 +1873,53 @@ function useInternalSolidFlow() {
 	return ctx;
 }
 //#endregion
-//#region src/components/graph/marker/Marker.tsx
-const Marker = (props) => {
+//#region src/components/connection/ConnectionLine.tsx
+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 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} />;
+	}}
+          </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
+		};
+		switch (store.connectionLineType) {
+			case "default": {
+				let [path] = getBezierPath$1(pathParams);
+				return path;
+			}
+			case "straight": {
+				let [path] = getStraightPath$1(pathParams);
+				return path;
+			}
+			case "step":
+			case "smoothstep": {
+				let [path] = getSmoothStepPath$1({
+					...pathParams,
+					borderRadius: store.connectionLineType === "step" ? 0 : void 0
+				});
+				return path;
+			}
+		}
+	};
+	return <path class="solid-flow__connection-path" fill="none" style={props.style} d={path()} />;
+}, Marker = (props) => {
 	let _props = propDefaults(props, {
 		markerUnits: "strokeWidth",
 		orient: "auto-start-reverse",
@@ -2117,52 +2198,450 @@ const Marker = (props) => {
 	}), <div ref={setRef} class="solid-flow__container solid-flow__zoom">
       {props.children}
     </div>;
-}, ConnectionLine = (props) => {
-	let { store } = useInternalSolidFlow(), connectionStatus = () => getConnectionStatus(store.connection.isValid);
-	return <Show when={store.connection.inProgress}>
-      <svg class="solid-flow__container solid-flow__connectionline" width={store.width} height={store.height} style={props.containerStyle}>
-        <g class={["solid-flow__connection", connectionStatus()]}>
-          <Show when={props.component} fallback={<InternalConnectionLine style={props.style} />}>
-            {(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} />;
-	}}
-          </Show>
-        </g>
-      </svg>
+}, Selection = (props) => {
+	let _props = propDefaults(props, { isVisible: !0 }), styles = () => ({
+		..._props.width != null && { width: typeof _props.width == "string" ? _props.width : toPxString(_props.width) },
+		..._props.height != null && { height: typeof _props.height == "string" ? _props.height : toPxString(_props.height) },
+		..._props.x != null && _props.y != null && { transform: `translate(${props.x}px, ${props.y}px)` }
+	});
+	return <Show when={_props.isVisible}>
+      <div class="solid-flow__selection" style={styles()} />
     </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
-		};
-		switch (store.connectionLineType) {
-			case "default": {
-				let [path] = getBezierPath$1(pathParams);
-				return path;
-			}
-			case "straight": {
-				let [path] = getStraightPath$1(pathParams);
-				return path;
-			}
-			case "step":
-			case "smoothstep": {
-				let [path] = getSmoothStepPath$1({
-					...pathParams,
-					borderRadius: store.connectionLineType === "step" ? 0 : void 0
-				});
-				return path;
+}, NodeSelection = (props) => {
+	let { store, nodeLookup, actions } = useInternalSolidFlow(), [ref, setRef] = createSignal(), bounds = () => store.selectionRectMode === "nodes" ? getInternalNodesBounds(nodeLookup, { filter: (node) => !!node.selected }) : null;
+	createEffect(() => ({
+		el: ref(),
+		focusable: !store.disableKeyboardA11y
+	}), ({ el, focusable }) => {
+		focusable && el?.focus({ preventScroll: !0 });
+	});
+	let onContextMenu = (event) => {
+		let selectedNodes = store.nodes.filter((n) => n.selected);
+		props.onSelectionContextMenu?.({
+			nodes: selectedNodes,
+			event
+		});
+	}, onClick = (event) => {
+		let selectedNodes = store.nodes.filter((n) => n.selected);
+		props.onSelectionClick?.({
+			nodes: selectedNodes,
+			event
+		});
+	};
+	createDraggable(ref, () => ({
+		disabled: !1,
+		onDrag: (event, _, __, nodes) => {
+			props.onNodeDrag?.({
+				event,
+				targetNode: null,
+				nodes
+			});
+		},
+		onDragStart: (event, _, __, nodes) => {
+			props.onNodeDragStart?.({
+				event,
+				targetNode: null,
+				nodes
+			});
+		},
+		onDragStop: (event, _, __, nodes) => {
+			props.onNodeDragStop?.({
+				event,
+				targetNode: null,
+				nodes
+			});
+		}
+	}));
+	let onKeyDown = (event) => {
+		let diff = ARROW_KEY_DIFFS[event.key];
+		diff && (event.preventDefault(), actions.moveSelectedNodes(diff, event.shiftKey ? 4 : 1));
+	};
+	return <Show when={store.selectionRectMode === "nodes" && bounds() && isNumeric(bounds()?.x) && isNumeric(bounds()?.y)}>
+      <div ref={setRef} class={["solid-flow__selection-wrapper", store.noPanClass]} style={{
+		width: toPxString(bounds()?.width),
+		height: toPxString(bounds()?.height),
+		transform: `translate(${bounds()?.x}px, ${bounds()?.y}px)`
+	}} onClick={onClick} onContextMenu={onContextMenu} role={store.disableKeyboardA11y ? void 0 : "button"} tabindex={store.disableKeyboardA11y ? void 0 : -1} onKeyDown={store.disableKeyboardA11y ? void 0 : onKeyDown}>
+        <Selection width="100%" height="100%" x={0} y={0} />
+      </div>
+    </Show>;
+}, Attribution = (props) => <Show when={!props.proOptions?.hideAttribution}>
+      <Panel position={props.position ?? "bottom-right"} class="solid-flow__attribution" data-message="Feel free to remove the attribution or check out how you could support us: https://solidflow.dev/support-us">
+        <a href="https://solidflow.dev" target="_blank" rel="noopener noreferrer" aria-label="Solid Flow attribution">
+          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, write surface, and deprecated aliases
+*/
+function useSolidFlow() {
+	let { flow, commands, store, edgeLookup } = useInternalSolidFlow(), getInternalNode = (id) => flow.internalNodes[id];
+	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)] ?? {})
+	};
+}
+//#endregion
+//#region src/components/utility/KeyHandler.ts
+function isKeyObject(key) {
+	return typeof key == "object" && !!key;
+}
+function getModifier(key) {
+	return isKeyObject(key) && key.modifier || [];
+}
+function getKeyString(key) {
+	return key == null ? "" : isKeyObject(key) ? key.key : key;
+}
+function matchesKey(event, keyDef) {
+	if (!keyDef) return !1;
+	let keyString = getKeyString(keyDef);
+	if (!keyString) return !1;
+	let modifiers = getModifier(keyDef);
+	if (Array.isArray(modifiers)) {
+		let modifierMatch = modifiers.flatMap((mod) => mod).every((mod) => {
+			switch (mod.toLowerCase()) {
+				case "meta": return event.metaKey;
+				case "ctrl": return event.ctrlKey;
+				case "alt": return event.altKey;
+				case "shift": return event.shiftKey;
+				default: return !1;
 			}
+		});
+		return event.key === keyString && modifierMatch;
+	}
+	return event.key === keyString;
+}
+function matchesKeyArray(event, keyDefs) {
+	return keyDefs ? (Array.isArray(keyDefs) ? keyDefs : [keyDefs]).some((keyDef) => matchesKey(event, keyDef)) : !1;
+}
+const KeyHandler = (props) => {
+	let { store, actions } = useInternalSolidFlow(), { deleteElements } = useSolidFlow(), _props = {
+		get selectionKey() {
+			return props.selectionKey ?? "Shift";
+		},
+		get multiSelectionKey() {
+			return props.multiSelectionKey ?? (isMacOs() ? "Meta" : "Control");
+		},
+		get deleteKey() {
+			return props.deleteKey ?? "Backspace";
+		},
+		get panActivationKey() {
+			return props.panActivationKey ?? " ";
+		},
+		get zoomActivationKey() {
+			return props.zoomActivationKey ?? (isMacOs() ? "Meta" : "Control");
+		}
+	}, resetKeysAndSelection = () => {
+		actions.setSelectionRect(void 0), actions.setSelectionKeyPressed(!1), actions.setMultiselectionKeyPressed(!1), actions.setDeleteKeyPressed(!1), actions.setPanActivationKeyPressed(!1), actions.setZoomActivationKeyPressed(!1);
+	}, handleDelete = async () => {
+		let selectedNodes = store.nodes.filter((node) => node.selected), selectedEdges = store.edges.filter((edge) => edge.selected), { deletedNodes, deletedEdges } = await deleteElements({
+			nodes: selectedNodes,
+			edges: selectedEdges
+		});
+		(deletedNodes.length > 0 || deletedEdges.length > 0) && store.onDelete?.({
+			nodes: deletedNodes,
+			edges: deletedEdges
+		});
+	};
+	return isServer || createEventListenerMap(window, {
+		keydown: (event) => {
+			matchesKeyArray(event, _props.selectionKey) && actions.setSelectionKeyPressed(!0), matchesKeyArray(event, _props.multiSelectionKey) && actions.setMultiselectionKeyPressed(!0), matchesKeyArray(event, _props.deleteKey) && !isInputDOMNode(event) && (event.ctrlKey || event.metaKey || event.shiftKey || (actions.setDeleteKeyPressed(!0), handleDelete())), matchesKeyArray(event, _props.panActivationKey) && actions.setPanActivationKeyPressed(!0), matchesKeyArray(event, _props.zoomActivationKey) && actions.setZoomActivationKeyPressed(!0), flush();
+		},
+		keyup: (event) => {
+			matchesKeyArray(event, _props.selectionKey) && actions.setSelectionKeyPressed(!1), matchesKeyArray(event, _props.multiSelectionKey) && actions.setMultiselectionKeyPressed(!1), matchesKeyArray(event, _props.deleteKey) && actions.setDeleteKeyPressed(!1), matchesKeyArray(event, _props.panActivationKey) && actions.setPanActivationKeyPressed(!1), matchesKeyArray(event, _props.zoomActivationKey) && actions.setZoomActivationKeyPressed(!1), flush();
+		},
+		blur: resetKeysAndSelection,
+		contextmenu: resetKeysAndSelection
+	}), null;
+}, SolidFlow = (props) => {
+	let [domNodeRef, setDomNodeRef] = createSignal(), domNode, _props = merge({
+		...getDefaultFlowStateProps(),
+		colorMode: "light",
+		deleteKeyCode: "Backspace",
+		defaultViewport: {
+			x: 0,
+			y: 0,
+			zoom: 1
+		},
+		multiSelectionKeyCode: isMacOs() ? "Meta" : "Control",
+		nodeClickDistance: 0,
+		panOnScroll: !1,
+		panActivationKeyCode: "Space",
+		preventScrolling: !0,
+		panOnDrag: !0,
+		panOnScrollSpeed: .5,
+		panOnScrollMode: "free",
+		paneClickDistance: 0,
+		reconnectRadius: 10,
+		selectionKeyCode: "Shift",
+		selectionOnDrag: !1,
+		translateExtent: infiniteExtent,
+		zoomActivationKeyCode: isMacOs() ? "Meta" : "Control",
+		zoomOnPinch: !0,
+		zoomOnDoubleClick: !0,
+		zoomOnScroll: !0
+	}, props), htmlProps = omit(_props, "nodes", "edges", "nodeTypes", "edgeTypes", "width", "height", "fitView", "fitViewOptions", "nodeOrigin", "nodeDragThreshold", "paneClickDistance", "nodeClickDistance", "minZoom", "maxZoom", "zIndexMode", "initialViewport", "viewport", "translateExtent", "nodeExtent", "selectionKey", "panActivationKey", "deleteKey", "multiSelectionKey", "zoomActivationKey", "panOnDrag", "panOnScroll", "panOnScrollMode", "panOnScrollSpeed", "selectionOnDrag", "selectNodesOnDrag", "preventScrolling", "zoomOnScroll", "zoomOnDoubleClick", "zoomOnPinch", "onlyRenderVisibleElements", "autoPanOnConnect", "autoPanOnNodeDrag", "autoPanOnNodeFocus", "autoPanOnSelection", "autoPanSpeed", "connectionRadius", "connectionMode", "connectionLineType", "connectionLineComponent", "connectionLineStyle", "connectionLineContainerStyle", "connectionDragThreshold", "isValidConnection", "clickConnect", "reconnectRadius", "selectionMode", "elementsSelectable", "nodesDraggable", "nodesConnectable", "nodesFocusable", "edgesFocusable", "disableKeyboardA11y", "ariaLabelConfig", "ariaLiveMessage", "colorMode", "colorModeSSR", "class", "style", "snapGrid", "defaultMarkerColor", "defaultEdgeOptions", "elevateNodesOnSelect", "elevateEdgesOnSelect", "noDragClass", "noPanClass", "noWheelClass", "attributionPosition", "proOptions", "onInit", "onMoveStart", "onMove", "onMoveEnd", "onFlowError", "onNodeClick", "onNodeContextMenu", "onNodeDrag", "onNodeDragStart", "onNodeDragStop", "onNodePointerEnter", "onNodePointerMove", "onNodePointerLeave", "onEdgeClick", "onEdgeContextMenu", "onEdgePointerEnter", "onEdgePointerLeave", "onPaneClick", "onPaneContextMenu", "onSelectionChange", "onSelectionClick", "onSelectionContextMenu", "onSelectionDrag", "onSelectionDragStart", "onSelectionDragStop", "onSelectionStart", "onSelectionEnd", "onConnect", "onConnectStart", "onConnectEnd", "onReconnect", "onReconnectStart", "onReconnectEnd", "onClickConnectStart", "onClickConnectEnd", "onBeforeConnect", "onBeforeReconnect", "onDelete", "onBeforeDelete", "deleteKeyCode", "selectionKeyCode", "panActivationKeyCode", "multiSelectionKeyCode", "zoomActivationKeyCode", "children"), TypedSolidFlowContext = SolidFlowContext, solidFlow = useContext(TypedSolidFlowContext) ?? createSolidFlow(_props), { store, actions } = solidFlow;
+	onSettled(() => (actions.applyInitialFitView(_props.fitView), actions.setConfig(_props), actions.setDomNode(domNode), () => {
+		actions.reset();
+	})), createEffect(() => domNodeRef(), (el) => {
+		if (!el) return;
+		let observer = new ResizeObserver(() => {
+			actions.setWidth(el.clientWidth), actions.setHeight(el.clientHeight);
+		});
+		return observer.observe(el), () => observer.disconnect();
+	}), createEffect(() => ({
+		panZoom: store.panZoom,
+		distance: _props.paneClickDistance
+	}), ({ panZoom, distance }) => {
+		panZoom?.setClickDistance(distance);
+	});
+	let selectedElements = createMemo(() => ({
+		nodes: store.selectedNodes,
+		edges: store.selectedEdges
+	}), { equals: (a, b) => a.nodes.length === b.nodes.length && a.edges.length === b.edges.length && a.nodes.every((node, i) => node.id === b.nodes[i].id) && a.edges.every((edge, i) => edge.id === b.edges[i].id) });
+	createEffect(() => selectedElements(), (params) => {
+		untrack(() => _props.onSelectionChange)?.(params);
+	});
+	let rootStyle = () => ({
+		width: toPxString(_props.width),
+		height: toPxString(_props.height),
+		..._props.style
+	});
+	return <div role="application" data-testid="solid-flow__wrapper" ref={(el) => {
+		domNode = el, setDomNodeRef(el);
+	}} class={[
+		"solid-flow",
+		"solid-flow__container",
+		_props.class,
+		store.colorMode
+	]} style={rootStyle()} onScroll={(e) => {
+		e.currentTarget.scrollTo({
+			top: 0,
+			left: 0,
+			behavior: "auto"
+		});
+	}} {...htmlProps}>
+      <TypedSolidFlowContext value={solidFlow}>
+        <KeyHandler selectionKey={_props.selectionKey} deleteKey={_props.deleteKey} panActivationKey={_props.panActivationKey} multiSelectionKey={_props.multiSelectionKey} zoomActivationKey={_props.zoomActivationKey} />
+        <Zoom panOnScrollMode={_props.panOnScrollMode} preventScrolling={_props.preventScrolling} zoomOnScroll={_props.zoomOnScroll} zoomOnDoubleClick={_props.zoomOnDoubleClick} zoomOnPinch={_props.zoomOnPinch} panOnScroll={_props.panOnScroll} panOnScrollSpeed={_props.panOnScrollSpeed} panOnDrag={_props.panOnDrag} paneClickDistance={_props.paneClickDistance} selectionOnDrag={_props.selectionOnDrag} onMoveStart={_props.onMoveStart} onMove={_props.onMove} onMoveEnd={_props.onMoveEnd} onViewportInitialized={_props.onInit} initialViewport={_props.viewport || _props.initialViewport}>
+          <Pane onPaneClick={_props.onPaneClick} onPaneContextMenu={_props.onPaneContextMenu} onSelectionStart={_props.onSelectionStart} onSelectionEnd={_props.onSelectionEnd} panOnDrag={_props.panOnDrag} selectionOnDrag={_props.selectionOnDrag} paneClickDistance={_props.paneClickDistance} autoPanOnSelection={_props.autoPanOnSelection}>
+            <Viewport>
+              <div class="solid-flow__container solid-flow__viewport-back" />
+              <EdgeRenderer reconnectRadius={_props.reconnectRadius} onEdgeClick={_props.onEdgeClick} onEdgeContextMenu={_props.onEdgeContextMenu} onEdgePointerEnter={_props.onEdgePointerEnter} onEdgePointerLeave={_props.onEdgePointerLeave} defaultEdgeOptions={_props.defaultEdgeOptions} />
+              <div class="solid-flow__container solid-flow__edge-labels" />
+              <ConnectionLine type={_props.connectionLineType} component={_props.connectionLineComponent} containerStyle={_props.connectionLineContainerStyle} style={_props.connectionLineStyle} />
+              <NodeRenderer nodeClickDistance={_props.nodeClickDistance} onNodeClick={_props.onNodeClick} onNodeContextMenu={_props.onNodeContextMenu} onNodePointerEnter={_props.onNodePointerEnter} onNodePointerMove={_props.onNodePointerMove} onNodePointerLeave={_props.onNodePointerLeave} onNodeDrag={_props.onNodeDrag} onNodeDragStart={_props.onNodeDragStart} onNodeDragStop={_props.onNodeDragStop} />
+              <NodeSelection onSelectionClick={_props.onSelectionClick} onSelectionContextMenu={_props.onSelectionContextMenu} onNodeDrag={_props.onNodeDrag} onNodeDragStart={_props.onNodeDragStart} onNodeDragStop={_props.onNodeDragStop} />
+            </Viewport>
+            <Selection isVisible={!!store.selectionRect && store.selectionRectMode === "user"} width={store.selectionRect?.width} height={store.selectionRect?.height} x={store.selectionRect?.x} y={store.selectionRect?.y} />
+          </Pane>
+        </Zoom>
+        <Attribution proOptions={_props.proOptions} position={_props.attributionPosition} />
+        <A11yDescriptions />
+        {_props.children}
+      </TypedSolidFlowContext>
+    </div>;
+}, SolidFlowProvider = (props) => {
+	let _props = merge(getDefaultFlowStateProps(), props), solidFlow = createSolidFlow(_props);
+	onCleanup(() => {
+		solidFlow.actions.reset();
+	});
+	let ContextProvider = SolidFlowContext;
+	return <ContextProvider value={solidFlow}>{props.children}</ContextProvider>;
+};
+//#endregion
+//#region src/hooks/useColorMode.ts
+/**
+* Hook for receiving the current color mode class ('dark' or 'light').
+*
+* When the flow's `colorMode` prop is set to `"system"`, this resolves to the
+* user's current system preference.
+*
+* @public
+* @returns an accessor for the current color mode class
+*/
+function useColorMode() {
+	let { flow } = useInternalSolidFlow();
+	return () => flow.colorMode;
+}
+//#endregion
+//#region src/hooks/useConnection.ts
+/**
+* Hook for receiving the current connection.
+*
+* @public
+* @returns current connection as a readable store
+*/
+function useConnection() {
+	let { flow } = useInternalSolidFlow();
+	return () => flow.connection;
+}
+//#endregion
+//#region src/hooks/useGraph.ts
+/**
+* Hook for getting the current nodes from the store.
+*
+* @public
+* @returns store with an array of nodes
+*/
+function useNodes() {
+	let { store } = useInternalSolidFlow();
+	return () => store.nodes;
+}
+/**
+* Hook for getting the current edges from the store.
+*
+* @public
+* @returns store with an array of edges
+*/
+function useEdges() {
+	let { store } = useInternalSolidFlow();
+	return () => store.edges;
+}
+/**
+* Hook for getting the current viewport from the store.
+*
+* @public
+* @returns store with the viewport object
+*/
+function useViewport() {
+	let { flow } = useInternalSolidFlow();
+	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.
+*
+* Returns `false` until every non-hidden node has been rendered and measured.
+* Useful for running layouting or fitView logic that depends on node dimensions.
+*
+* @public
+* @returns an accessor that indicates whether the nodes are initialized
+*/
+function useNodesInitialized() {
+	let { flow } = useInternalSolidFlow();
+	return () => flow.nodesInitialized;
+}
+/**
+* Hook for seeing if the viewport is initialized.
+*
+* Returns `true` once the pan/zoom instance has been created for the flow.
+*
+* @public
+* @returns an accessor that indicates whether the viewport is initialized
+*/
+function useViewportInitialized() {
+	let { flow } = useInternalSolidFlow();
+	return () => flow.viewportInitialized;
+}
+//#endregion
+//#region src/hooks/useInternalNode.ts
+/**
+* Hook to get an internal node by id.
+*
+* @public
+* @param id - the node id
+* @returns an accessor with an internal node or undefined
+*/
+function useInternalNode(id) {
+	let { flow } = useInternalSolidFlow();
+	return () => flow.internalNodes[id()];
+}
+//#endregion
+//#region src/hooks/useNodeConnections.ts
+/**
+* Hook to retrieve all edges connected to a node. Can be filtered by handle type and id.
+*
+* @public
+* @param param.id - node id - optional if called inside a custom node
+* @param param.handleType - filter by handle type 'source' or 'target'
+* @param param.handleId - filter by handle id (this is only needed if the node has multiple handles of the same type)
+* @todo @param param.onConnect - gets called when a connection is established
+* @todo @param param.onDisconnect - gets called when a connection is removed
+* @returns an array with connections
+*/
+const useNodeConnections = (params) => {
+	let { flow } = useInternalSolidFlow(), ctxNodeId = () => {
+		let id = useContext(NodeIdContext);
+		return id ? id() : "";
+	}, id = () => params().handleId, type = () => params().handleType, nodeId = () => params().id ?? ctxNodeId(), [connections, setConnections] = createSignal([]), prevConnections;
+	return createEffect(() => {
+		let rec = flow.connections[connectionKey(nodeId(), type(), id())], map = /* @__PURE__ */ new Map();
+		for (let key of Object.keys(rec ?? {})) map.set(key, { ...rec[key] });
+		return { connections: map };
+	}, ({ connections: nextConnections }) => {
+		areConnectionMapsEqual(nextConnections, prevConnections) || (prevConnections = nextConnections, setConnections(Array.from(nextConnections.values())));
+	}), connections;
+};
+//#endregion
+//#region src/hooks/useNodesData.ts
+function useNodesData(nodeIds) {
+	let { flow } = useInternalSolidFlow(), prevNodesData = [];
+	return createMemo(() => {
+		let nodesData = [], idValues = nodeIds();
+		if (!idValues) return;
+		let ids = Array.isArray(idValues) ? idValues : [idValues];
+		for (let nodeId of ids) {
+			let node = flow.internalNodes[nodeId]?.internals.userNode;
+			node && nodesData.push({
+				id: node.id,
+				type: node.type,
+				data: node.data
+			});
 		}
-	};
-	return <path class="solid-flow__connection-path" fill="none" style={props.style} d={path()} />;
-}, DotPattern = (props) => {
+		return shallowNodeData(nodesData, prevNodesData) || (prevNodesData = nodesData), Array.isArray(idValues) ? nodesData : nodesData[0];
+	});
+}
+//#endregion
+//#region src/hooks/useUpdateNodeInternals.ts
+/**
+* Hook for updating node internals. Sugar for `commands.updateNodeInternals`.
+*
+* @public
+* @returns function for updating node internals
+*/
+function useUpdateNodeInternals() {
+	let { commands } = useInternalSolidFlow();
+	return commands.updateNodeInternals;
+}
+//#endregion
+//#region src/plugins/background/DotPattern.tsx
+const DotPattern = (props) => {
 	let _props = propDefaults(props, { radius: 5 });
 	return <circle class={[
 		"solid-flow__background-pattern",
@@ -2275,19 +2754,6 @@ const Marker = (props) => {
       {_props.children}
       {_props.afterControls}
     </Panel>;
-}, EdgeToolbar = (props) => {
-	let rest = omit(props, "x", "y", "alignX", "alignY", "isVisible", "selectEdgeOnClick", "class", "children"), { store, edgeLookup } = useInternalSolidFlow(), edgeId = useEdgeId(), isActive = () => typeof props.isVisible == "boolean" ? props.isVisible : !!edgeLookup[edgeId()]?.selected, transform = () => getEdgeToolbarTransform(props.x, props.y, store.viewport.zoom, props.alignX ?? "center", props.alignY ?? "center");
-	return <Show when={isActive()}>
-      <EdgeLabel selectEdgeOnClick={props.selectEdgeOnClick} transparent>
-        <div class={["solid-flow__edge-toolbar", props.class]} style={{
-		position: "absolute",
-		transform: transform(),
-		"transform-origin": "0 0"
-	}} data-id={edgeId()} {...rest}>
-          {props.children}
-        </div>
-      </EdgeLabel>
-    </Show>;
 }, MiniMapNode = (props) => {
 	let _props = propDefaults(props, {
 		borderRadius: 5,
@@ -2480,209 +2946,20 @@ const Marker = (props) => {
         {(position) => <ResizeControl position={position} class={props.handleClass} style={props.handleStyle} {...rest} />}
       </For>
     </Show>;
-};
-//#endregion
-//#region src/hooks/useColorMode.ts
-/**
-* Hook for receiving the current color mode class ('dark' or 'light').
-*
-* When the flow's `colorMode` prop is set to `"system"`, this resolves to the
-* user's current system preference.
-*
-* @public
-* @returns an accessor for the current color mode class
-*/
-function useColorMode() {
-	let { flow } = useInternalSolidFlow();
-	return () => flow.colorMode;
-}
-//#endregion
-//#region src/hooks/useConnection.tsx
-/**
-* Hook for receiving the current connection.
-*
-* @public
-* @returns current connection as a readable store
-*/
-function useConnection() {
-	let { flow } = useInternalSolidFlow();
-	return () => flow.connection;
-}
-//#endregion
-//#region src/hooks/useGraph.ts
-/**
-* Hook for getting the current nodes from the store.
-*
-* @public
-* @returns store with an array of nodes
-*/
-function useNodes() {
-	let { store } = useInternalSolidFlow();
-	return () => store.nodes;
-}
-/**
-* Hook for getting the current edges from the store.
-*
-* @public
-* @returns store with an array of edges
-*/
-function useEdges() {
-	let { store } = useInternalSolidFlow();
-	return () => store.edges;
-}
-/**
-* Hook for getting the current viewport from the store.
-*
-* @public
-* @returns store with the viewport object
-*/
-function useViewport() {
-	let { flow } = useInternalSolidFlow();
-	return () => flow.viewport;
-}
-//#endregion
-//#region src/hooks/useHandleEdgeSelect.tsx
-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.
-*
-* Returns `false` until every non-hidden node has been rendered and measured.
-* Useful for running layouting or fitView logic that depends on node dimensions.
-*
-* @public
-* @returns an accessor that indicates whether the nodes are initialized
-*/
-function useNodesInitialized() {
-	let { flow } = useInternalSolidFlow();
-	return () => flow.nodesInitialized;
-}
-/**
-* Hook for seeing if the viewport is initialized.
-*
-* Returns `true` once the pan/zoom instance has been created for the flow.
-*
-* @public
-* @returns an accessor that indicates whether the viewport is initialized
-*/
-function useViewportInitialized() {
-	let { flow } = useInternalSolidFlow();
-	return () => flow.viewportInitialized;
-}
-//#endregion
-//#region src/hooks/useInternalNode.tsx
-/**
-* Hook to get an internal node by id.
-*
-* @public
-* @param id - the node id
-* @returns an accessor with an internal node or undefined
-*/
-function useInternalNode(id) {
-	let { flow } = useInternalSolidFlow();
-	return () => flow.internalNodes[id()];
-}
-//#endregion
-//#region src/hooks/useNodeConnections.ts
-/**
-* Hook to retrieve all edges connected to a node. Can be filtered by handle type and id.
-*
-* @public
-* @param param.id - node id - optional if called inside a custom node
-* @param param.handleType - filter by handle type 'source' or 'target'
-* @param param.handleId - filter by handle id (this is only needed if the node has multiple handles of the same type)
-* @todo @param param.onConnect - gets called when a connection is established
-* @todo @param param.onDisconnect - gets called when a connection is removed
-* @returns an array with connections
-*/
-const useNodeConnections = (params) => {
-	let { flow } = useInternalSolidFlow(), ctxNodeId = () => {
-		let id = useContext(NodeIdContext);
-		return id ? id() : "";
-	}, id = () => params().handleId, type = () => params().handleType, nodeId = () => params().id ?? ctxNodeId(), [connections, setConnections] = createSignal([]), prevConnections;
-	return createEffect(() => {
-		let rec = flow.connections[connectionKey(nodeId(), type(), id())], map = /* @__PURE__ */ new Map();
-		for (let key of Object.keys(rec ?? {})) map.set(key, { ...rec[key] });
-		return { connections: map };
-	}, ({ connections: nextConnections }) => {
-		areConnectionMapsEqual(nextConnections, prevConnections) || (prevConnections = nextConnections, setConnections(Array.from(nextConnections.values())));
-	}), connections;
-};
-//#endregion
-//#region src/hooks/useNodesData.ts
-function useNodesData(nodeIds) {
-	let { flow } = useInternalSolidFlow(), prevNodesData = [];
-	return createMemo(() => {
-		let nodesData = [], idValues = nodeIds();
-		if (!idValues) return;
-		let ids = Array.isArray(idValues) ? idValues : [idValues];
-		for (let nodeId of ids) {
-			let node = flow.internalNodes[nodeId]?.internals.userNode;
-			node && nodesData.push({
-				id: node.id,
-				type: node.type,
-				data: node.data
-			});
-		}
-		return shallowNodeData(nodesData, prevNodesData) || (prevNodesData = nodesData), Array.isArray(idValues) ? nodesData : nodesData[0];
-	});
-}
-//#endregion
-//#region src/hooks/useSolidFlow.tsx
-/**
-* 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, write surface, and deprecated aliases
-*/
-function useSolidFlow() {
-	let { flow, commands, store, edgeLookup } = useInternalSolidFlow(), getInternalNode = (id) => flow.internalNodes[id];
-	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)] ?? {})
-	};
-}
-//#endregion
-//#region src/hooks/useUpdateNodeInternals.ts
-/**
-* Hook for updating node internals. Sugar for `commands.updateNodeInternals`.
-*
-* @public
-* @returns function for updating node internals
-*/
-function useUpdateNodeInternals() {
-	let { commands } = useInternalSolidFlow();
-	return commands.updateNodeInternals;
-}
-//#endregion
-//#region src/components/graph/plugins/NodeToolbar.tsx
-const NodeToolbar = (props) => {
+}, EdgeToolbar = (props) => {
+	let rest = omit(props, "x", "y", "alignX", "alignY", "isVisible", "selectEdgeOnClick", "class", "children"), { store, edgeLookup } = useInternalSolidFlow(), edgeId = useEdgeId(), isActive = () => typeof props.isVisible == "boolean" ? props.isVisible : !!edgeLookup[edgeId()]?.selected, transform = () => getEdgeToolbarTransform(props.x, props.y, store.viewport.zoom, props.alignX ?? "center", props.alignY ?? "center");
+	return <Show when={isActive()}>
+      <EdgeLabel selectEdgeOnClick={props.selectEdgeOnClick} transparent>
+        <div class={["solid-flow__edge-toolbar", props.class]} style={{
+		position: "absolute",
+		transform: transform(),
+		"transform-origin": "0 0"
+	}} data-id={edgeId()} {...rest}>
+          {props.children}
+        </div>
+      </EdgeLabel>
+    </Show>;
+}, NodeToolbar = (props) => {
 	let { store } = useInternalSolidFlow(), { getNodes, getNodesBounds, getInternalNode } = useSolidFlow(), _props = propDefaults(props, {
 		offset: 10,
 		position: "top",
@@ -2716,253 +2993,6 @@ const NodeToolbar = (props) => {
         </div>
       </Portal>
     </Show>;
-}, Selection = (props) => {
-	let _props = propDefaults(props, { isVisible: !0 }), styles = () => ({
-		..._props.width != null && { width: typeof _props.width == "string" ? _props.width : toPxString(_props.width) },
-		..._props.height != null && { height: typeof _props.height == "string" ? _props.height : toPxString(_props.height) },
-		..._props.x != null && _props.y != null && { transform: `translate(${props.x}px, ${props.y}px)` }
-	});
-	return <Show when={_props.isVisible}>
-      <div class="solid-flow__selection" style={styles()} />
-    </Show>;
-}, NodeSelection = (props) => {
-	let { store, nodeLookup, actions } = useInternalSolidFlow(), [ref, setRef] = createSignal(), bounds = () => store.selectionRectMode === "nodes" ? getInternalNodesBounds(nodeLookup, { filter: (node) => !!node.selected }) : null;
-	createEffect(() => ({
-		el: ref(),
-		focusable: !store.disableKeyboardA11y
-	}), ({ el, focusable }) => {
-		focusable && el?.focus({ preventScroll: !0 });
-	});
-	let onContextMenu = (event) => {
-		let selectedNodes = store.nodes.filter((n) => n.selected);
-		props.onSelectionContextMenu?.({
-			nodes: selectedNodes,
-			event
-		});
-	}, onClick = (event) => {
-		let selectedNodes = store.nodes.filter((n) => n.selected);
-		props.onSelectionClick?.({
-			nodes: selectedNodes,
-			event
-		});
-	};
-	createDraggable(ref, () => ({
-		disabled: !1,
-		onDrag: (event, _, __, nodes) => {
-			props.onNodeDrag?.({
-				event,
-				targetNode: null,
-				nodes
-			});
-		},
-		onDragStart: (event, _, __, nodes) => {
-			props.onNodeDragStart?.({
-				event,
-				targetNode: null,
-				nodes
-			});
-		},
-		onDragStop: (event, _, __, nodes) => {
-			props.onNodeDragStop?.({
-				event,
-				targetNode: null,
-				nodes
-			});
-		}
-	}));
-	let onKeyDown = (event) => {
-		let diff = ARROW_KEY_DIFFS[event.key];
-		diff && (event.preventDefault(), actions.moveSelectedNodes(diff, event.shiftKey ? 4 : 1));
-	};
-	return <Show when={store.selectionRectMode === "nodes" && bounds() && isNumeric(bounds()?.x) && isNumeric(bounds()?.y)}>
-      <div ref={setRef} class={["solid-flow__selection-wrapper", store.noPanClass]} style={{
-		width: toPxString(bounds()?.width),
-		height: toPxString(bounds()?.height),
-		transform: `translate(${bounds()?.x}px, ${bounds()?.y}px)`
-	}} onClick={onClick} onContextMenu={onContextMenu} role={store.disableKeyboardA11y ? void 0 : "button"} tabindex={store.disableKeyboardA11y ? void 0 : -1} onKeyDown={store.disableKeyboardA11y ? void 0 : onKeyDown}>
-        <Selection width="100%" height="100%" x={0} y={0} />
-      </div>
-    </Show>;
-}, Attribution = (props) => <Show when={!props.proOptions?.hideAttribution}>
-      <Panel position={props.position ?? "bottom-right"} class="solid-flow__attribution" data-message="Feel free to remove the attribution or check out how you could support us: https://solidflow.dev/support-us">
-        <a href="https://solidflow.dev" target="_blank" rel="noopener noreferrer" aria-label="Solid Flow attribution">
-          Solid Flow
-        </a>
-      </Panel>
-    </Show>;
-//#endregion
-//#region src/components/utility/KeyHandler.tsx
-function isKeyObject(key) {
-	return typeof key == "object" && !!key;
-}
-function getModifier(key) {
-	return isKeyObject(key) && key.modifier || [];
-}
-function getKeyString(key) {
-	return key == null ? "" : isKeyObject(key) ? key.key : key;
-}
-function matchesKey(event, keyDef) {
-	if (!keyDef) return !1;
-	let keyString = getKeyString(keyDef);
-	if (!keyString) return !1;
-	let modifiers = getModifier(keyDef);
-	if (Array.isArray(modifiers)) {
-		let modifierMatch = modifiers.flatMap((mod) => mod).every((mod) => {
-			switch (mod.toLowerCase()) {
-				case "meta": return event.metaKey;
-				case "ctrl": return event.ctrlKey;
-				case "alt": return event.altKey;
-				case "shift": return event.shiftKey;
-				default: return !1;
-			}
-		});
-		return event.key === keyString && modifierMatch;
-	}
-	return event.key === keyString;
-}
-function matchesKeyArray(event, keyDefs) {
-	return keyDefs ? (Array.isArray(keyDefs) ? keyDefs : [keyDefs]).some((keyDef) => matchesKey(event, keyDef)) : !1;
-}
-const KeyHandler = (props) => {
-	let { store, actions } = useInternalSolidFlow(), { deleteElements } = useSolidFlow(), _props = {
-		get selectionKey() {
-			return props.selectionKey ?? "Shift";
-		},
-		get multiSelectionKey() {
-			return props.multiSelectionKey ?? (isMacOs() ? "Meta" : "Control");
-		},
-		get deleteKey() {
-			return props.deleteKey ?? "Backspace";
-		},
-		get panActivationKey() {
-			return props.panActivationKey ?? " ";
-		},
-		get zoomActivationKey() {
-			return props.zoomActivationKey ?? (isMacOs() ? "Meta" : "Control");
-		}
-	}, resetKeysAndSelection = () => {
-		actions.setSelectionRect(void 0), actions.setSelectionKeyPressed(!1), actions.setMultiselectionKeyPressed(!1), actions.setDeleteKeyPressed(!1), actions.setPanActivationKeyPressed(!1), actions.setZoomActivationKeyPressed(!1);
-	}, handleDelete = async () => {
-		let selectedNodes = store.nodes.filter((node) => node.selected), selectedEdges = store.edges.filter((edge) => edge.selected), { deletedNodes, deletedEdges } = await deleteElements({
-			nodes: selectedNodes,
-			edges: selectedEdges
-		});
-		(deletedNodes.length > 0 || deletedEdges.length > 0) && store.onDelete?.({
-			nodes: deletedNodes,
-			edges: deletedEdges
-		});
-	};
-	return isServer || createEventListenerMap(window, {
-		keydown: (event) => {
-			matchesKeyArray(event, _props.selectionKey) && actions.setSelectionKeyPressed(!0), matchesKeyArray(event, _props.multiSelectionKey) && actions.setMultiselectionKeyPressed(!0), matchesKeyArray(event, _props.deleteKey) && !isInputDOMNode(event) && (event.ctrlKey || event.metaKey || event.shiftKey || (actions.setDeleteKeyPressed(!0), handleDelete())), matchesKeyArray(event, _props.panActivationKey) && actions.setPanActivationKeyPressed(!0), matchesKeyArray(event, _props.zoomActivationKey) && actions.setZoomActivationKeyPressed(!0), flush();
-		},
-		keyup: (event) => {
-			matchesKeyArray(event, _props.selectionKey) && actions.setSelectionKeyPressed(!1), matchesKeyArray(event, _props.multiSelectionKey) && actions.setMultiselectionKeyPressed(!1), matchesKeyArray(event, _props.deleteKey) && actions.setDeleteKeyPressed(!1), matchesKeyArray(event, _props.panActivationKey) && actions.setPanActivationKeyPressed(!1), matchesKeyArray(event, _props.zoomActivationKey) && actions.setZoomActivationKeyPressed(!1), flush();
-		},
-		blur: resetKeysAndSelection,
-		contextmenu: resetKeysAndSelection
-	}), null;
-}, SolidFlow = (props) => {
-	let [domNodeRef, setDomNodeRef] = createSignal(), domNode, _props = merge({
-		...getDefaultFlowStateProps(),
-		colorMode: "light",
-		deleteKeyCode: "Backspace",
-		defaultViewport: {
-			x: 0,
-			y: 0,
-			zoom: 1
-		},
-		multiSelectionKeyCode: isMacOs() ? "Meta" : "Control",
-		nodeClickDistance: 0,
-		panOnScroll: !1,
-		panActivationKeyCode: "Space",
-		preventScrolling: !0,
-		panOnDrag: !0,
-		panOnScrollSpeed: .5,
-		panOnScrollMode: "free",
-		paneClickDistance: 0,
-		reconnectRadius: 10,
-		selectionKeyCode: "Shift",
-		selectionOnDrag: !1,
-		translateExtent: infiniteExtent,
-		zoomActivationKeyCode: isMacOs() ? "Meta" : "Control",
-		zoomOnPinch: !0,
-		zoomOnDoubleClick: !0,
-		zoomOnScroll: !0
-	}, props), htmlProps = omit(_props, "nodes", "edges", "nodeTypes", "edgeTypes", "width", "height", "fitView", "fitViewOptions", "nodeOrigin", "nodeDragThreshold", "paneClickDistance", "nodeClickDistance", "minZoom", "maxZoom", "zIndexMode", "initialViewport", "viewport", "translateExtent", "nodeExtent", "selectionKey", "panActivationKey", "deleteKey", "multiSelectionKey", "zoomActivationKey", "panOnDrag", "panOnScroll", "panOnScrollMode", "panOnScrollSpeed", "selectionOnDrag", "selectNodesOnDrag", "preventScrolling", "zoomOnScroll", "zoomOnDoubleClick", "zoomOnPinch", "onlyRenderVisibleElements", "autoPanOnConnect", "autoPanOnNodeDrag", "autoPanOnNodeFocus", "autoPanOnSelection", "autoPanSpeed", "connectionRadius", "connectionMode", "connectionLineType", "connectionLineComponent", "connectionLineStyle", "connectionLineContainerStyle", "connectionDragThreshold", "isValidConnection", "clickConnect", "reconnectRadius", "selectionMode", "elementsSelectable", "nodesDraggable", "nodesConnectable", "nodesFocusable", "edgesFocusable", "disableKeyboardA11y", "ariaLabelConfig", "ariaLiveMessage", "colorMode", "colorModeSSR", "class", "style", "snapGrid", "defaultMarkerColor", "defaultEdgeOptions", "elevateNodesOnSelect", "elevateEdgesOnSelect", "noDragClass", "noPanClass", "noWheelClass", "attributionPosition", "proOptions", "onInit", "onMoveStart", "onMove", "onMoveEnd", "onFlowError", "onNodeClick", "onNodeContextMenu", "onNodeDrag", "onNodeDragStart", "onNodeDragStop", "onNodePointerEnter", "onNodePointerMove", "onNodePointerLeave", "onEdgeClick", "onEdgeContextMenu", "onEdgePointerEnter", "onEdgePointerLeave", "onPaneClick", "onPaneContextMenu", "onSelectionChange", "onSelectionClick", "onSelectionContextMenu", "onSelectionDrag", "onSelectionDragStart", "onSelectionDragStop", "onSelectionStart", "onSelectionEnd", "onConnect", "onConnectStart", "onConnectEnd", "onReconnect", "onReconnectStart", "onReconnectEnd", "onClickConnectStart", "onClickConnectEnd", "onBeforeConnect", "onBeforeReconnect", "onDelete", "onBeforeDelete", "deleteKeyCode", "selectionKeyCode", "panActivationKeyCode", "multiSelectionKeyCode", "zoomActivationKeyCode", "children"), TypedSolidFlowContext = SolidFlowContext, solidFlow = useContext(TypedSolidFlowContext) ?? createSolidFlow(_props), { store, actions } = solidFlow;
-	onSettled(() => (actions.applyInitialFitView(_props.fitView), actions.setConfig(_props), actions.setDomNode(domNode), () => {
-		actions.reset();
-	})), createEffect(() => domNodeRef(), (el) => {
-		if (!el) return;
-		let observer = new ResizeObserver(() => {
-			actions.setWidth(el.clientWidth), actions.setHeight(el.clientHeight);
-		});
-		return observer.observe(el), () => observer.disconnect();
-	}), createEffect(() => ({
-		panZoom: store.panZoom,
-		distance: _props.paneClickDistance
-	}), ({ panZoom, distance }) => {
-		panZoom?.setClickDistance(distance);
-	});
-	let selectedElements = createMemo(() => ({
-		nodes: store.selectedNodes,
-		edges: store.selectedEdges
-	}), { equals: (a, b) => a.nodes.length === b.nodes.length && a.edges.length === b.edges.length && a.nodes.every((node, i) => node.id === b.nodes[i].id) && a.edges.every((edge, i) => edge.id === b.edges[i].id) });
-	createEffect(() => selectedElements(), (params) => {
-		untrack(() => _props.onSelectionChange)?.(params);
-	});
-	let rootStyle = () => ({
-		width: toPxString(_props.width),
-		height: toPxString(_props.height),
-		..._props.style
-	});
-	return <div role="application" data-testid="solid-flow__wrapper" ref={(el) => {
-		domNode = el, setDomNodeRef(el);
-	}} class={[
-		"solid-flow",
-		"solid-flow__container",
-		_props.class,
-		store.colorMode
-	]} style={rootStyle()} onScroll={(e) => {
-		e.currentTarget.scrollTo({
-			top: 0,
-			left: 0,
-			behavior: "auto"
-		});
-	}} {...htmlProps}>
-      <TypedSolidFlowContext value={solidFlow}>
-        <KeyHandler selectionKey={_props.selectionKey} deleteKey={_props.deleteKey} panActivationKey={_props.panActivationKey} multiSelectionKey={_props.multiSelectionKey} zoomActivationKey={_props.zoomActivationKey} />
-        <Zoom panOnScrollMode={_props.panOnScrollMode} preventScrolling={_props.preventScrolling} zoomOnScroll={_props.zoomOnScroll} zoomOnDoubleClick={_props.zoomOnDoubleClick} zoomOnPinch={_props.zoomOnPinch} panOnScroll={_props.panOnScroll} panOnScrollSpeed={_props.panOnScrollSpeed} panOnDrag={_props.panOnDrag} paneClickDistance={_props.paneClickDistance} selectionOnDrag={_props.selectionOnDrag} onMoveStart={_props.onMoveStart} onMove={_props.onMove} onMoveEnd={_props.onMoveEnd} onViewportInitialized={_props.onInit} initialViewport={_props.viewport || _props.initialViewport}>
-          <Pane onPaneClick={_props.onPaneClick} onPaneContextMenu={_props.onPaneContextMenu} onSelectionStart={_props.onSelectionStart} onSelectionEnd={_props.onSelectionEnd} panOnDrag={_props.panOnDrag} selectionOnDrag={_props.selectionOnDrag} paneClickDistance={_props.paneClickDistance} autoPanOnSelection={_props.autoPanOnSelection}>
-            <Viewport>
-              <div class="solid-flow__container solid-flow__viewport-back" />
-              <EdgeRenderer reconnectRadius={_props.reconnectRadius} onEdgeClick={_props.onEdgeClick} onEdgeContextMenu={_props.onEdgeContextMenu} onEdgePointerEnter={_props.onEdgePointerEnter} onEdgePointerLeave={_props.onEdgePointerLeave} defaultEdgeOptions={_props.defaultEdgeOptions} />
-              <div class="solid-flow__container solid-flow__edge-labels" />
-              <ConnectionLine type={_props.connectionLineType} component={_props.connectionLineComponent} containerStyle={_props.connectionLineContainerStyle} style={_props.connectionLineStyle} />
-              <NodeRenderer nodeClickDistance={_props.nodeClickDistance} onNodeClick={_props.onNodeClick} onNodeContextMenu={_props.onNodeContextMenu} onNodePointerEnter={_props.onNodePointerEnter} onNodePointerMove={_props.onNodePointerMove} onNodePointerLeave={_props.onNodePointerLeave} onNodeDrag={_props.onNodeDrag} onNodeDragStart={_props.onNodeDragStart} onNodeDragStop={_props.onNodeDragStop} />
-              <NodeSelection onSelectionClick={_props.onSelectionClick} onSelectionContextMenu={_props.onSelectionContextMenu} onNodeDrag={_props.onNodeDrag} onNodeDragStart={_props.onNodeDragStart} onNodeDragStop={_props.onNodeDragStop} />
-            </Viewport>
-            <Selection isVisible={!!store.selectionRect && store.selectionRectMode === "user"} width={store.selectionRect?.width} height={store.selectionRect?.height} x={store.selectionRect?.x} y={store.selectionRect?.y} />
-          </Pane>
-        </Zoom>
-        <Attribution proOptions={_props.proOptions} position={_props.attributionPosition} />
-        <A11yDescriptions />
-        {_props.children}
-      </TypedSolidFlowContext>
-    </div>;
-}, SolidFlowProvider = (props) => {
-	let _props = merge(getDefaultFlowStateProps(), props), solidFlow = createSolidFlow(_props);
-	onCleanup(() => {
-		solidFlow.actions.reset();
-	});
-	let ContextProvider = SolidFlowContext;
-	return <ContextProvider value={solidFlow}>{props.children}</ContextProvider>;
-}, createEdgeStore = (edges) => {
-	let [store, setStore] = createStore(edges);
-	return [store, setStore];
-}, createNodeStore = (nodes) => {
-	let [store, setStore] = createStore(nodes);
-	return [store, setStore];
 };
 //#endregion
 export { Background, BaseEdge, BezierEdge, BezierEdgeInternal, ConnectionLine, ConnectionLineType, ConnectionMode, ControlButton, Controls, DefaultNode, EdgeLabel, EdgeLabelRenderer, EdgeReconnectAnchor, EdgeRenderer, EdgeToolbar, EdgeWrapper, GroupNode, Handle, InputNode, Marker, MarkerDefinition, MarkerType, MiniMap, NodeRenderer, NodeResizer, NodeSelection, NodeToolbar, NodeWrapper, OutputNode, PanOnScrollMode, Pane, Panel, Position, ResizeControl, ResizeControlVariant, Selection, SelectionMode, SmoothStepEdge, SmoothStepEdgeInternal, SolidFlow, SolidFlowProvider, StepEdge, StepEdgeInternal, StraightEdge, StraightEdgeInternal, Viewport, ViewportPortal, Zoom, addEdge, 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 };