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

package/dist/index/index.jsx

@@ -1,10 +1,9 @@
-import { For, Show, createContext, createEffect, createMemo, createRenderEffect, createSignal, createStore, flush, mapArray, merge, omit, onCleanup, onSettled, snapshot, untrack, useContext } from "solid-js";
-import { ReactiveMap } from "@solid-primitives/map";
+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, getEdgeCenter, getEdgePosition, getEdgeToolbarTransform, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, 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, updateAbsolutePositions, updateNodeInternals } 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);
@@ -54,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) => {
@@ -143,7 +143,7 @@ const EdgeLabelRenderer = (props) => {
 		style: {}
 	}), rest = omit(_props, "type", "class", "style", "position", "size", "reconnecting", "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.get(edgeId()), onPointerDown = (event) => {
+	let edge = () => edgeLookup[edgeId()], onPointerDown = (event) => {
 		if (event.button !== 0) return;
 		setReconnecting(!0), store.onReconnectStart?.(event, edge(), _props.type);
 		let opposite = _props.type === "target" ? {
@@ -223,672 +223,364 @@ 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
-		};
+}, 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} />;
-}, 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
-		};
+}, { 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: [],
+	edges: [],
+	nodeOrigin: [0, 0],
+	nodeExtent: infiniteExtent,
+	defaultEdgeOptions: {},
+	colorMode: "system",
+	colorModeSSR: "light",
+	connectionMode: "strict",
+	connectionLineType: "default",
+	connectionRadius: 20,
+	nodeDragThreshold: 1,
+	minZoom: .5,
+	maxZoom: 2,
+	selectionMode: "partial",
+	fitView: !1,
+	noPanClass: "nopan",
+	noDragClass: "nodrag",
+	noWheelClass: "nowheel",
+	autoPanOnNodeDrag: !0,
+	autoPanOnConnect: !0,
+	autoPanOnNodeFocus: !0,
+	autoPanOnSelection: !0,
+	autoPanSpeed: 15,
+	elevateEdgesOnSelect: !0,
+	nodesDraggable: !0,
+	nodesConnectable: !0,
+	nodesFocusable: !0,
+	edgesFocusable: !0,
+	elementsSelectable: !0,
+	selectNodesOnDrag: !0,
+	elevateNodesOnSelect: !0,
+	zIndexMode: "basic",
+	onlyRenderVisibleElements: !0,
+	disableKeyboardA11y: !1,
+	defaultMarkerColor: "#b1b1b7",
+	ariaLiveMessage: "",
+	style: {},
+	isValidConnection: (() => !0),
+	onFlowError: createDevWarn("Solid Flow", "https://solidflow.dev/")
+});
+//#endregion
+//#region src/core/facades.ts
+/**
+* A read-only `Map` view over an id-keyed record projection, for
+* @xyflow/system interop: system helpers take `Map`s, our reactive lookups
+* are records. Every read passes through to the record, so reads inside
+* tracked scopes subscribe normally — `get`/`has` check with `in` first,
+* which also subscribes while the key is still absent (the projection
+* absent-key footgun), and `size`/iteration read the key set structurally.
+*
+* The mutating `Map` methods throw: writes belong to the roots the
+* projection derives from.
+*/
+var RecordMapFacade = class {
+	#record;
+	constructor(record) {
+		this.#record = record;
+	}
+	get(key) {
+		return key in this.#record ? this.#record[key] : void 0;
+	}
+	has(key) {
+		return key in this.#record;
+	}
+	get size() {
+		return Object.keys(this.#record).length;
+	}
+	*keys() {
+		yield* Object.keys(this.#record);
+	}
+	*values() {
+		for (let key of Object.keys(this.#record)) yield this.#record[key];
+	}
+	*entries() {
+		for (let key of Object.keys(this.#record)) yield [key, this.#record[key]];
+	}
+	[Symbol.iterator]() {
+		return this.entries();
+	}
+	forEach(callback, thisArg) {
+		for (let [key, value] of this.entries()) callback.call(thisArg, value, key, this);
+	}
+	[Symbol.toStringTag] = "RecordMapFacade";
+	set() {
+		throw Error("RecordMapFacade is read-only; write to the projection's source roots");
+	}
+	getOrInsert() {
+		throw Error("RecordMapFacade is read-only; write to the projection's source roots");
+	}
+	getOrInsertComputed() {
+		throw Error("RecordMapFacade is read-only; write to the projection's source roots");
+	}
+	delete() {
+		throw Error("RecordMapFacade is read-only; write to the projection's source roots");
+	}
+	clear() {
+		throw Error("RecordMapFacade is read-only; write to the projection's source roots");
+	}
+};
+//#endregion
+//#region src/core/projections/connections.ts
+/**
+* Lookup keys for the connection index. Each edge is registered under six
+* keys — for both of its endpoints: the node, the node+handle-type, and (when
+* a handle id is present) the node+type+handle:
+*   `${nodeId}` · `${nodeId}-${type}` · `${nodeId}-${type}-${handleId}`
+*/
+const connectionKey = (nodeId, type, handleId) => `${nodeId}${type ? handleId ? `-${type}-${handleId}` : `-${type}` : ""}`, pairKey = (aNode, aHandle, bNode, bHandle) => `${aNode}-${aHandle}--${bNode}-${bHandle}`, createConnections = (source) => createProjection(() => {
+	let out = {}, add = (key, entry, connection) => {
+		(out[key] ??= {})[entry] = connection;
 	};
-	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
+	for (let edge of source.edges) {
+		let sourceHandle = edge.sourceHandle ?? null, targetHandle = edge.targetHandle ?? null, connection = {
+			edgeId: edge.id,
+			source: edge.source,
+			target: edge.target,
+			sourceHandle,
+			targetHandle
+		}, sourceKey = pairKey(edge.source, sourceHandle, edge.target, targetHandle), targetKey = pairKey(edge.target, targetHandle, edge.source, sourceHandle);
+		add(edge.source, targetKey, connection), add(connectionKey(edge.source, "source"), targetKey, connection), sourceHandle && add(connectionKey(edge.source, "source", sourceHandle), targetKey, connection), add(edge.target, sourceKey, connection), add(connectionKey(edge.target, "target"), sourceKey, connection), targetHandle && add(connectionKey(edge.target, "target", targetHandle), sourceKey, connection);
+	}
+	return out;
+}, {}, { key: "id" }), createEdgeLookup = (source) => createProjection(() => {
+	let out = {};
+	for (let edge of source.edges) out[edge.id] = edge;
+	return out;
+}, {}, { key: "id" });
+function isManualZIndexMode(zIndexMode) {
+	return zIndexMode === "manual";
+}
+function calculateZ(node, selectedNodeZ, zIndexMode) {
+	let zIndex = isNumeric(node.zIndex) ? node.zIndex : 0;
+	return isManualZIndexMode(zIndexMode) ? zIndex : zIndex + (node.selected ? selectedNodeZ : 0);
+}
+const EMPTY_AUTO_INDEX = /* @__PURE__ */ new Map(), createInternalNodes = (source) => {
+	let autoIndex = createMemo(() => {
+		if (source.zIndexMode !== "auto") return EMPTY_AUTO_INDEX;
+		let index = /* @__PURE__ */ new Map(), rootIds = /* @__PURE__ */ new Set();
+		for (let node of source.nodes) node.parentId ? rootIds.has(node.parentId) && !index.has(node.parentId) && index.set(node.parentId, index.size + 1) : rootIds.add(node.id);
+		return index;
+	}), entryById = /* @__PURE__ */ new Map(), rowStores = mapArray(() => source.nodes, (userNodeAccessor, index) => {
+		let id = userNodeAccessor().id, store = createProjection(() => {
+			let userNode = userNodeAccessor(), { nodeOrigin, nodeExtent, zIndexMode } = source, selectedNodeZ = source.elevateNodesOnSelect && !isManualZIndexMode(zIndexMode) ? 1e3 : 0, measurement = userNode.id in source.measurements ? source.measurements[userNode.id] : void 0, measured = {
+				width: userNode.measured?.width ?? measurement?.measured.width,
+				height: userNode.measured?.height ?? measurement?.measured.height
+			}, dimensions = getNodeDimensions({
+				measured,
+				width: userNode.width,
+				height: userNode.height,
+				initialWidth: userNode.initialWidth,
+				initialHeight: userNode.initialHeight
+			}), rootParentIndex = autoIndex().get(userNode.id), row = {
+				...userNode,
+				measured,
+				internals: {
+					positionAbsolute: clampPosition(getNodePositionWithOrigin(userNode, nodeOrigin), isCoordinateExtent(userNode.extent) ? userNode.extent : nodeExtent, dimensions),
+					handleBounds: measurement?.handleBounds,
+					z: calculateZ(userNode, selectedNodeZ, zIndexMode) + (rootParentIndex === void 0 ? 0 : rootParentIndex * 10),
+					...rootParentIndex === void 0 ? {} : { rootParentIndex },
+					userNode
+				}
+			};
+			if (userNode.parentId) {
+				let parentEntry = entryById.get(userNode.parentId);
+				if (parentEntry && parentEntry.index() < index()) {
+					let { x, y, z } = calculateChildXYZ(row, parentEntry.store.row, nodeOrigin, nodeExtent, selectedNodeZ, zIndexMode);
+					row.internals.positionAbsolute = {
+						x,
+						y
+					}, row.internals.z = z;
+				} else source.nodes.length;
+			}
+			if (userNode.parentId) {
+				let parent = entryById.get(userNode.parentId);
+				parent?.store.row.internals.positionAbsolute.x, parent?.store.row.internals.z;
+			}
+			return { row };
+		}, {}, { key: "id" }), entry = {
+			store,
+			index
 		};
-	});
-	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 entryById.set(id, entry), onCleanup(() => {
+			entryById.get(id) === entry && entryById.delete(id);
+		}), {
+			id,
+			store
 		};
+	}, { keyed: (userNode) => userNode.id }), assigned = /* @__PURE__ */ new Map();
+	return createProjection((draft) => {
+		let seen = /* @__PURE__ */ new Set();
+		for (let { id, store } of rowStores()) {
+			seen.add(id);
+			let row = store.row;
+			assigned.get(id) !== row && (assigned.set(id, row), draft[id] = row);
+		}
+		for (let id of assigned.keys()) seen.has(id) || (assigned.delete(id), delete draft[id]);
+	}, {}, {
+		key: null,
+		shallow: !0
+	});
+};
+function calculateChildXYZ(childNode, parentNode, nodeOrigin, nodeExtent, selectedNodeZ, zIndexMode) {
+	let { x: parentX, y: parentY } = parentNode.internals.positionAbsolute, childDimensions = getNodeDimensions(childNode), positionWithOrigin = getNodePositionWithOrigin(childNode, nodeOrigin), clampedPosition = isCoordinateExtent(childNode.extent) ? clampPosition(positionWithOrigin, childNode.extent, childDimensions) : positionWithOrigin, absolutePosition = clampPosition({
+		x: parentX + clampedPosition.x,
+		y: parentY + clampedPosition.y
+	}, nodeExtent, childDimensions);
+	childNode.extent === "parent" && (absolutePosition = clampPositionToParent(absolutePosition, childDimensions, parentNode));
+	let childZ = calculateZ(childNode, selectedNodeZ, zIndexMode), parentZ = parentNode.internals.z ?? 0;
+	return {
+		x: absolutePosition.x,
+		y: absolutePosition.y,
+		z: parentZ >= childZ ? parentZ + 1 : childZ
 	};
-	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} />;
-}, 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, connectionLookup, 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 connectionKey = `${nodeId()}-${_props.type}${_props.id ? `-${_props.id}` : ""}`;
-		return { connections: connectionLookup.get(connectionKey) };
-	}, (current) => {
-		if (!current) return;
-		let { connections } = current;
-		if (prevConnections && !areConnectionMapsEqual(connections, prevConnections)) {
-			let _connections = connections ?? /* @__PURE__ */ new Map();
-			handleConnectionChange(prevConnections, _connections, props.onDisconnect), handleConnectionChange(_connections, prevConnections, props.onConnect);
-		}
-		prevConnections = connections ?? /* @__PURE__ */ new Map();
-	});
-	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
-			},
-			connectionMode: store.connectionMode,
-			fromNodeId: store.clickConnectStartHandle.nodeId,
-			fromHandleId: store.clickConnectStartHandle.id ?? null,
-			fromType: store.clickConnectStartHandle.type,
-			isValidConnection: isValidConnectionHandler,
-			flowId: store.id,
-			doc,
-			lib: store.lib,
-			nodeLookup
-		});
-		isValid && connection && onConnectExtended(connection);
-		let connectionClone = structuredClone(snapshot(store.connection));
-		delete connectionClone.inProgress, connectionClone.toPosition = connectionClone.toHandle ? connectionClone.toHandle.position : null, store.onClickConnectEnd?.(event, connectionClone), actions.setClickConnectStartHandle(void 0);
-	}, connectionIndicator = () => connectable() && (!connectionInProcess() || isPossibleTargetHandle()) && (connectionInProcess() || store.clickConnectStartHandle ? _props.isConnectableEnd : _props.isConnectableStart);
-	return <div {...rest} role="button" aria-label={store.ariaLabelConfig["handle.ariaLabel"]} tabindex={-1} data-handleid={handleId()} data-nodeid={nodeId()} data-handlepos={_props.position} data-id={`${store.id}-${nodeId()}-${_props.id || null}-${_props.type}`} onClick={store.clickConnect ? onClick : void 0} onPointerDown={onPointerDown} style={_props.style} class={[
-		"solid-flow__handle",
-		`solid-flow__handle-${_props.position}`,
-		store.noDragClass,
-		store.noPanClass,
-		_props.class,
-		{
-			valid: valid(),
-			connectingto: !!connectingTo(),
-			connectingfrom: !!connectingFrom(),
-			source: !isTarget(),
-			target: isTarget(),
-			connectablestart: _props.isConnectableStart,
-			connectableend: _props.isConnectableEnd,
-			connectable: !!connectable(),
-			connectionindicator: connectionIndicator()
+//#region src/core/projections/layoutedEdges.ts
+/**
+* Edge layout join: user edges × internal nodes → screen-space edge geometry,
+* decomposed into SUB-STORES (spike 13): each edge is its own keyed
+* projection holding `{ row }` — the layouted row, or null while the edge
+* produces none (missing/unready endpoints, culled) — and the public record
+* is a SHALLOW projection holding the PRESENT rows' proxies by reference.
+*
+* Reads chain: `record[id].sourceX` goes through the shallow slot into the
+* edge's own store, so every materialized leaf signal hangs off its EDGE's
+* computed (defeating rc.1's per-update companion walk — see
+* internalNodes.ts). The edge projection tracks exactly what the join reads —
+* the edge's props and its endpoints' geometry leaves through nodeLookup
+* (which chains into the node row stores) — so one node move re-runs only
+* the adjacent edges' projections; the record computed re-runs only when
+* membership or presence changes.
+*
+* 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.
+*/
+const createLayoutedEdges = (source) => {
+	let rowStores = mapArray(() => source.edges, (edgeAccessor) => ({
+		id: edgeAccessor().id,
+		store: createProjection(() => {
+			let edge = edgeAccessor(), row = buildRow(source, edge);
+			return source.nodeLookup.get(edge.source)?.internals.handleBounds, source.nodeLookup.get(edge.target)?.internals.handleBounds, { row };
+		}, { row: null }, { key: "id" })
+	}), { keyed: (edge) => edge.id }), assigned = /* @__PURE__ */ new Map();
+	return createProjection((draft) => {
+		let seen = /* @__PURE__ */ new Set();
+		for (let { id, store } of rowStores()) {
+			let row = store.row;
+			row && (seen.add(id), assigned.get(id) !== row && (assigned.set(id, row), draft[id] = row));
 		}
-	]}>
-      {_props.children}
-    </div>;
-}, DefaultNode = (props) => {
-	let _props = propDefaults(props, {
-		targetPosition: Position$1.Top,
-		sourcePosition: Position$1.Bottom
-	});
-	return <>
-      <Handle type="target" position={_props.targetPosition} isConnectable={_props.isConnectable} />
-      {props.data.label}
-      <Handle type="source" position={_props.sourcePosition} isConnectable={_props.isConnectable} />
-    </>;
-}, GroupNode = (props) => <div style={{
-	position: "absolute",
-	left: 0,
-	top: 0,
-	width: toPxString(props.width),
-	height: toPxString(props.height)
-}} />, InputNode = (props) => {
-	let _props = propDefaults(props, { sourcePosition: Position$1.Bottom });
-	return <>
-      {props.data?.label}
-      <Handle type="source" position={_props.sourcePosition} isConnectable={_props.isConnectable} />
-    </>;
-}, createDraggable = (elem, params) => {
-	let { store, nodeLookup, actions } = useInternalSolidFlow(), [dragging, setDragging] = createSignal(!1);
-	return createEffect(() => ({
-		el: elem(),
-		current: params()
-	}), ({ el, current }) => {
-		if (!el || current.disabled) return;
-		let { onDrag, onDragStart, onDragStop, onNodeMouseDown } = current, dragInstance = XYDrag({
-			onDrag,
-			onDragStart: (event, dragItems, node, nodes) => {
-				setDragging(!0), onDragStart?.(event, dragItems, node, nodes);
-			},
-			onDragStop: (event, dragItems, node, nodes) => {
-				setDragging(!1), onDragStop?.(event, dragItems, node, nodes);
-			},
-			onNodeMouseDown,
-			getStoreItems: () => ({
-				nodes: store.nodes,
-				nodeLookup,
-				edges: store.edges,
-				nodeExtent: store.nodeExtent,
-				snapGrid: store.snapGrid ?? [0, 0],
-				snapToGrid: !!store.snapGrid,
-				autoPanSpeed: store.autoPanSpeed,
-				nodeOrigin: store.nodeOrigin,
-				multiSelectionActive: store.multiselectionKeyPressed,
-				domNode: store.domNode,
-				transform: store.transform,
-				autoPanOnNodeDrag: store.autoPanOnNodeDrag,
-				nodesDraggable: store.nodesDraggable,
-				selectNodesOnDrag: store.selectNodesOnDrag,
-				nodeDragThreshold: store.nodeDragThreshold,
-				unselectNodesAndEdges: actions.unselectNodesAndEdges,
-				updateNodePositions: actions.updateNodePositions,
-				panBy: actions.panBy
-			})
-		});
-		return dragInstance.update({
-			domNode: el,
-			nodeId: current.nodeId,
-			noDragClassName: current.noDragClass,
-			handleSelector: current.handleSelector,
-			isSelectable: current.isSelectable,
-			nodeClickDistance: current.nodeClickDistance
-		}), () => {
-			dragInstance.destroy();
-		};
-	}), dragging;
-}, NodeIdContext = createContext(null);
-function useNodeId() {
-	let ctx = useContext(NodeIdContext);
-	if (!ctx) throw Error("solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useNodeId");
-	return ctx;
-}
-//#endregion
-//#region src/components/graph/node/NodeWrapper.tsx
-const NodeWrapper = (props) => {
-	let { store, nodeLookup, parentLookup, 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 = () => parentLookup.has(node().id), transform = () => {
-		let { x, y } = node().internals.positionAbsolute;
-		return `translate(${x}px, ${y}px)`;
-	}, sizeStyle = () => {
-		let w = node().width ?? node().initialWidth, h = node().height ?? node().initialHeight;
-		return {
-			...node().style,
-			...w ? { width: toPxString(w) } : {},
-			...h ? { height: toPxString(h) } : {}
-		};
-	}, style = () => ({
-		"z-index": node().internals.z,
-		transform: transform(),
-		visibility: nodeHasDimensions(node()) ? "visible" : "hidden",
-		...sizeStyle(),
-		...node().style ?? {}
+		for (let id of assigned.keys()) seen.has(id) || (assigned.delete(id), delete draft[id]);
+	}, {}, {
+		key: null,
+		shallow: !0
 	});
-	createEffect(() => ({
-		valid: nodeTypeValid(),
-		nodeType: nodeType()
-	}), ({ valid, nodeType }) => {}), createEffect(() => ({
-		id: node().id,
-		nodeElement: nodeRef(),
-		nodeType: nodeType(),
-		sourcePosition: node().sourcePosition,
-		targetPosition: node().targetPosition
-	}), (current, prev) => {
-		current.nodeElement && (prev && prev.nodeElement === current.nodeElement && prev.sourcePosition === current.sourcePosition && prev.targetPosition === current.targetPosition && prev.nodeType === current.nodeType || actions.requestUpdateNodeInternals([[current.id, {
-			id: current.id,
-			nodeElement: current.nodeElement,
-			force: !0
-		}]]));
-	}), createEffect(() => ({
-		nodeElement: nodeRef(),
-		hasDimensions: nodeHasDimensions(node()),
-		resizeObserver: props.resizeObserver
-	}), (current, prev) => {
-		current.nodeElement === prev?.nodeElement && current.resizeObserver === prev?.resizeObserver && current.hasDimensions || (prev?.nodeElement && prev.resizeObserver?.unobserve(prev.nodeElement), current.nodeElement && current.resizeObserver?.observe(current.nodeElement));
+}, buildRow = (source, edge) => {
+	let sourceNode = source.nodeLookup.get(edge.source), targetNode = source.nodeLookup.get(edge.target);
+	if (!sourceNode || !targetNode) return source.nodeLookup.size, null;
+	let edgePosition = getEdgePosition({
+		id: edge.id,
+		sourceNode,
+		targetNode,
+		sourceHandle: edge.sourceHandle || null,
+		targetHandle: edge.targetHandle || null,
+		connectionMode: source.connectionMode,
+		onError: source.onError
 	});
-	let onSelectNodeHandler = (event) => {
-		selectable() && (!store.selectNodesOnDrag || !draggable() || store.nodeDragThreshold > 0) && actions.handleNodeSelection(node().id), props.onNodeClick?.({
-			node: userNode(),
-			event
-		});
-	}, onKeyDown = (event) => {
-		if (isInputDOMNode(event) || store.disableKeyboardA11y) return;
-		if (elementSelectionKeys.includes(event.key) && selectable()) {
-			actions.handleNodeSelection(node().id, event.key === "Escape", nodeRef());
-			return;
+	return edgePosition ? {
+		...source.defaultEdgeOptions,
+		...edge,
+		...edgePosition,
+		zIndex: getElevatedEdgeZIndex({
+			selected: edge.selected,
+			zIndex: edge.zIndex ?? source.defaultEdgeOptions.zIndex,
+			sourceNode,
+			targetNode,
+			elevateOnSelect: source.elevateEdgesOnSelect,
+			zIndexMode: source.zIndexMode
+		}),
+		sourceNode,
+		targetNode,
+		edge
+	} : null;
+}, createParentIds = (source) => createProjection(() => {
+	let out = {};
+	for (let node of source.nodes) node.parentId && (out[node.parentId] = !0);
+	return out;
+}, {}, { key: "id" }), getInitialViewport = (fitView, initialViewport, width, height, nodeLookup) => {
+	if (fitView && !initialViewport && width && height) {
+		let bounds = getInternalNodesBounds(nodeLookup, { filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight)) });
+		return getViewportForBounds$1(bounds, width, height, .5, 2, .1);
+	}
+	return initialViewport ?? {
+		x: 0,
+		y: 0,
+		zoom: 1
+	};
+}, createFlowState = (props, injections = {}) => {
+	let _props = merge(getDefaultFlowStateProps(), props), initialNodeTypes = injections.initialNodeTypes ?? {}, initialEdgeTypes = injections.initialEdgeTypes ?? {}, prefersDark = injections.prefersDark ?? (() => _props.colorModeSSR === "dark"), [config, setConfig] = createSignal(_props), [ariaLabelConfig, setAriaLabelConfig] = createSignal(() => mergeAriaLabelConfig(config().ariaLabelConfig)), [ariaLiveMessage, setAriaLiveMessage] = createSignal(() => config().ariaLiveMessage), [clickConnectStartHandle, setClickConnectStartHandle] = createSignal(void 0), [connection, setConnection] = createSignal(initialConnection), [domNode, setDomNode] = createSignal(null), [dragging, setDragging] = createSignal(!1), [elementsSelectable, setElementsSelectable] = createSignal(() => config().elementsSelectable), [height, setHeight] = createSignal(() => config().height), [minZoom, _setMinZoom] = createSignal(() => config().minZoom), [maxZoom, _setMaxZoom] = createSignal(() => config().maxZoom), [nodesConnectable, setNodesConnectable] = createSignal(() => config().nodesDraggable), [nodesDraggable, setNodesDraggable] = createSignal(() => config().nodesDraggable), [panZoom, setPanZoom] = createSignal(null), [selectionRect, setSelectionRect] = createSignal(), [selectionRectMode, setSelectionRectMode] = createSignal(), [snapGrid, setSnapGrid] = createSignal(() => config().snapGrid), [translateExtent, _setTranslateExtent] = createSignal(() => config().translateExtent ?? infiniteExtent), [width, setWidth] = createSignal(() => config().width), [selectionKeyPressed, setSelectionKeyPressed] = createSignal(!1), [multiselectionKeyPressed, setMultiselectionKeyPressed] = createSignal(!1), [deleteKeyPressed, setDeleteKeyPressed] = createSignal(!1), [panActivationKeyPressed, setPanActivationKeyPressed] = createSignal(!1), [zoomActivationKeyPressed, setZoomActivationKeyPressed] = createSignal(!1), [nodesStore, setNodesStore] = createStore(_props.nodes), [edgesStore, setEdgesStore] = createStore(_props.edges), [measurementsStore, setMeasurementsStore] = createStore({}), internalNodes = createInternalNodes({
+		get nodes() {
+			return nodesStore;
+		},
+		get measurements() {
+			return measurementsStore;
+		},
+		get nodeOrigin() {
+			return config().nodeOrigin;
+		},
+		get nodeExtent() {
+			return config().nodeExtent;
+		},
+		get elevateNodesOnSelect() {
+			return config().elevateNodesOnSelect;
+		},
+		get zIndexMode() {
+			return config().zIndexMode;
 		}
-		let arrowKeyDiff = ARROW_KEY_DIFFS[event.key];
-		draggable() && node().selected && arrowKeyDiff && (event.preventDefault(), actions.setAriaLiveMessage(store.ariaLabelConfig["node.a11yDescription.ariaLiveMessage"]({
-			direction: event.key.replace("Arrow", "").toLowerCase(),
-			x: ~~node().internals.positionAbsolute.x,
-			y: ~~node().internals.positionAbsolute.y
-		})), actions.moveSelectedNodes(arrowKeyDiff, event.shiftKey ? 4 : 1));
-	}, onFocus = () => {
-		if (store.disableKeyboardA11y || !store.autoPanOnNodeFocus || !nodeRef()?.matches(":focus-visible")) return;
-		let { width, height, viewport } = store;
-		getNodesInside(/* @__PURE__ */ new Map([[node().id, node()]]), {
-			x: 0,
-			y: 0,
-			width,
-			height
-		}, [
-			viewport.x,
-			viewport.y,
-			viewport.zoom
-		], !0).length > 0 || actions.setCenter(node().position.x + (node().measured.width ?? 0) / 2, node().position.y + (node().measured.height ?? 0) / 2, { zoom: viewport.zoom });
-	}, dragging = createDraggable(nodeRef, () => ({
-		nodeId: node().id,
-		isSelectable: selectable(),
-		disabled: !draggable(),
-		handleSelector: node().dragHandle,
-		noDragClass: store.noDragClass,
-		nodeClickDistance: props.nodeClickDistance,
-		onNodeMouseDown: actions.handleNodeSelection,
-		onDrag: (event, _, targetNode, nodes) => {
-			props.onNodeDrag?.({
-				event,
-				targetNode,
-				nodes
-			});
-		},
-		onDragStart: (event, _, targetNode, nodes) => {
-			props.onNodeDragStart?.({
-				event,
-				targetNode,
-				nodes
-			});
-		},
-		onDragStop: (event, _, targetNode, nodes) => {
-			props.onNodeDragStop?.({
-				event,
-				targetNode,
-				nodes
-			});
-		}
-	}));
-	return <Show when={!node().hidden}>
-      <div ref={setNodeRef} data-id={node().id} class={[
-		"solid-flow__node",
-		`solid-flow__node-${nodeType()}`,
-		{
-			connectable: !!connectable(),
-			draggable: !!draggable(),
-			dragging: dragging(),
-			nopan: !!draggable(),
-			parent: isParentNode(),
-			selectable: !!selectable(),
-			selected: !!node().selected
-		},
-		node().class
-	]} style={style()} onClick={onSelectNodeHandler} onPointerEnter={(event) => props.onNodePointerEnter?.({
-		node: userNode(),
-		event
-	})} onPointerLeave={(event) => props.onNodePointerLeave?.({
-		node: userNode(),
-		event
-	})} onPointerMove={(event) => props.onNodePointerMove?.({
-		node: userNode(),
-		event
-	})} onContextMenu={(event) => props.onNodeContextMenu?.({
-		node: userNode(),
-		event
-	})} onKeyDown={(e) => focusable() && onKeyDown(e)} onFocus={() => focusable() && onFocus()} tabindex={focusable() ? 0 : void 0} role={node().ariaRole ?? (focusable() ? "group" : void 0)} aria-roledescription="node" aria-describedby={store.disableKeyboardA11y ? void 0 : `${ARIA_NODE_DESC_KEY}-${store.id}`} {...node().domAttributes}>
-        <NodeIdContext value={nodeId}>
-          <NodeConnectableContext value={connectable}>
-            <Dynamic component={nodeComponent()} data={node().data} id={node().id} selected={!!node().selected} selectable={selectable()} deletable={deletable()} sourcePosition={node().sourcePosition} targetPosition={node().targetPosition} zIndex={node().internals.z} dragging={dragging()} draggable={draggable()} dragHandle={node().dragHandle} parentId={node().parentId} type={nodeType()} isConnectable={connectable()} positionAbsoluteX={node().internals.positionAbsolute.x} positionAbsoluteY={node().internals.positionAbsolute.y} width={node().width} height={node().height} />
-          </NodeConnectableContext>
-        </NodeIdContext>
-      </div>
-    </Show>;
-}, OutputNode = (props) => {
-	let _props = propDefaults(props, { targetPosition: Position$1.Top });
-	return <>
-      <Handle type="target" position={_props.targetPosition} isConnectable={_props.isConnectable} />
-      {props.data?.label}
-    </>;
-}, getDefaultFlowStateProps = () => ({
-	id: "1",
-	nodes: [],
-	edges: [],
-	nodeOrigin: [0, 0],
-	nodeExtent: infiniteExtent,
-	defaultEdgeOptions: {},
-	colorMode: "system",
-	colorModeSSR: "light",
-	connectionMode: "strict",
-	connectionLineType: "default",
-	connectionRadius: 20,
-	nodeDragThreshold: 1,
-	minZoom: .5,
-	maxZoom: 2,
-	selectionMode: "partial",
-	fitView: !1,
-	noPanClass: "nopan",
-	noDragClass: "nodrag",
-	noWheelClass: "nowheel",
-	autoPanOnNodeDrag: !0,
-	autoPanOnConnect: !0,
-	autoPanOnNodeFocus: !0,
-	autoPanOnSelection: !0,
-	autoPanSpeed: 15,
-	elevateEdgesOnSelect: !0,
-	nodesDraggable: !0,
-	nodesConnectable: !0,
-	nodesFocusable: !0,
-	edgesFocusable: !0,
-	elementsSelectable: !0,
-	selectNodesOnDrag: !0,
-	elevateNodesOnSelect: !0,
-	zIndexMode: "basic",
-	onlyRenderVisibleElements: !1,
-	disableKeyboardA11y: !1,
-	defaultMarkerColor: "#b1b1b7",
-	ariaLiveMessage: "",
-	style: {},
-	isValidConnection: (() => !0),
-	onFlowError: createDevWarn("Solid Flow", "https://solidflow.dev/")
-}), SELECTED_NODE_Z = 1e3, defaultOptions = {
-	nodeOrigin: [0, 0],
-	nodeExtent: infiniteExtent,
-	elevateNodesOnSelect: !0,
-	defaults: {},
-	zIndexMode: "basic"
-};
-function isManualZIndexMode(zIndexMode) {
-	return zIndexMode === "manual";
-}
-const adoptUserNodesDefaultOptions = {
-	...defaultOptions,
-	checkEquality: !0
-};
-function mergeObjects(base, incoming) {
-	let result = { ...base };
-	for (let key in incoming) incoming[key] !== void 0 && (result[key] = incoming[key]);
-	return result;
-}
-function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
-	let _options = mergeObjects(adoptUserNodesDefaultOptions, options), nodesInitialized = nodes.length > 0, rootParentIndex = { i: 0 }, tmpLookup = new Map(nodeLookup), selectedNodeZ = _options?.elevateNodesOnSelect && !isManualZIndexMode(_options.zIndexMode) ? SELECTED_NODE_Z : 0;
-	nodeLookup.clear(), parentLookup.clear();
-	for (let userNode of nodes) {
-		let internalNode = tmpLookup.get(userNode.id);
-		if (_options.checkEquality && userNode === internalNode?.internals.userNode) nodeLookup.set(userNode.id, internalNode);
-		else {
-			let positionWithOrigin = getNodePositionWithOrigin(userNode, _options.nodeOrigin), extent = isCoordinateExtent(userNode.extent) ? userNode.extent : _options.nodeExtent, clampedPosition = clampPosition(positionWithOrigin, extent, getNodeDimensions(userNode));
-			internalNode = {
-				..._options.defaults,
-				...userNode,
-				measured: {
-					width: userNode.measured?.width,
-					height: userNode.measured?.height
-				},
-				internals: {
-					positionAbsolute: clampedPosition,
-					handleBounds: userNode.measured ? internalNode?.internals.handleBounds : void 0,
-					z: calculateZ(userNode, selectedNodeZ, _options.zIndexMode),
-					userNode
-				}
-			}, nodeLookup.set(userNode.id, internalNode);
-		}
-		(internalNode.measured === void 0 || internalNode.measured.width === void 0 || internalNode.measured.height === void 0) && !internalNode.hidden && (nodesInitialized = !1), userNode.parentId && updateChildNode(internalNode, nodeLookup, parentLookup, options, rootParentIndex);
-	}
-	return nodesInitialized;
-}
-function updateParentLookup(node, parentLookup) {
-	if (!node.parentId) return;
-	let childNodes = parentLookup.get(node.parentId);
-	childNodes ? childNodes.set(node.id, node) : parentLookup.set(node.parentId, /* @__PURE__ */ new Map([[node.id, node]]));
-}
-/**
-* Updates positionAbsolute and zIndex of a child node and the parentLookup.
-*/
-function updateChildNode(node, nodeLookup, parentLookup, options, rootParentIndex) {
-	let { elevateNodesOnSelect, nodeOrigin, nodeExtent, zIndexMode } = mergeObjects(defaultOptions, options), parentId = node.parentId, parentNode = nodeLookup.get(parentId);
-	if (!parentNode) return;
-	updateParentLookup(node, parentLookup), rootParentIndex && !parentNode.parentId && parentNode.internals.rootParentIndex === void 0 && zIndexMode === "auto" && (parentNode.internals.rootParentIndex = ++rootParentIndex.i, parentNode.internals.z = parentNode.internals.z + rootParentIndex.i * 10), rootParentIndex && parentNode.internals.rootParentIndex !== void 0 && (rootParentIndex.i = parentNode.internals.rootParentIndex);
-	let { x, y, z } = calculateChildXYZ(node, parentNode, nodeOrigin, nodeExtent, elevateNodesOnSelect && !isManualZIndexMode(zIndexMode) ? SELECTED_NODE_Z : 0, zIndexMode), { positionAbsolute } = node.internals, positionChanged = x !== positionAbsolute.x || y !== positionAbsolute.y;
-	(positionChanged || z !== node.internals.z) && nodeLookup.set(node.id, {
-		...node,
-		internals: {
-			...node.internals,
-			positionAbsolute: positionChanged ? {
-				x,
-				y
-			} : positionAbsolute,
-			z
-		}
-	});
-}
-function calculateZ(node, selectedNodeZ, zIndexMode) {
-	let zIndex = isNumeric(node.zIndex) ? node.zIndex : 0;
-	return isManualZIndexMode(zIndexMode) ? zIndex : zIndex + (node.selected ? selectedNodeZ : 0);
-}
-function calculateChildXYZ(childNode, parentNode, nodeOrigin, nodeExtent, selectedNodeZ, zIndexMode) {
-	let { x: parentX, y: parentY } = parentNode.internals.positionAbsolute, childDimensions = getNodeDimensions(childNode), positionWithOrigin = getNodePositionWithOrigin(childNode, nodeOrigin), clampedPosition = isCoordinateExtent(childNode.extent) ? clampPosition(positionWithOrigin, childNode.extent, childDimensions) : positionWithOrigin, absolutePosition = clampPosition({
-		x: parentX + clampedPosition.x,
-		y: parentY + clampedPosition.y
-	}, nodeExtent, childDimensions);
-	childNode.extent === "parent" && (absolutePosition = clampPositionToParent(absolutePosition, childDimensions, parentNode));
-	let childZ = calculateZ(childNode, selectedNodeZ, zIndexMode), parentZ = parentNode.internals.z ?? 0;
-	return {
-		x: absolutePosition.x,
-		y: absolutePosition.y,
-		z: parentZ >= childZ ? parentZ + 1 : childZ
-	};
-}
-/**
-* this function adds the connection to the connectionLookup
-* at the following keys: nodeId-type-handleId, nodeId-type and nodeId
-* @param type type of the connection
-* @param connection connection that should be added to the lookup
-* @param connectionKey at which key the connection should be added
-* @param connectionLookup reference to the connection lookup
-* @param nodeId nodeId of the connection
-* @param handleId handleId of the conneciton
-*/
-function addConnectionToLookup(type, connection, connectionKey, connectionLookup, nodeId, handleId) {
-	let add = (key) => {
-		let next = new Map(untrack(() => connectionLookup.get(key)));
-		next.set(connectionKey, connection), connectionLookup.set(key, next);
-	};
-	add(nodeId), add(`${nodeId}-${type}`), handleId && add(`${nodeId}-${type}-${handleId}`);
-}
-function removeConnectionFromLookup(type, connectionKey, connectionLookup, nodeId, handleId) {
-	let remove = (key) => {
-		let current = untrack(() => connectionLookup.get(key));
-		if (!current) return;
-		let next = new Map(current);
-		next.delete(connectionKey), next.size === 0 ? connectionLookup.delete(key) : connectionLookup.set(key, next);
-	};
-	remove(nodeId), remove(`${nodeId}-${type}`), handleId && remove(`${nodeId}-${type}-${handleId}`);
-}
-//#endregion
-//#region src/data/createSolidFlow.tsx
-const InitialNodeTypesMap = {
-	input: InputNode,
-	output: OutputNode,
-	default: DefaultNode,
-	group: GroupNode
-}, InitialEdgeTypesMap = {
-	straight: StraightEdgeInternal,
-	smoothstep: SmoothStepEdgeInternal,
-	default: BezierEdgeInternal,
-	step: StepEdgeInternal
-}, getInitialViewport = (_nodesInitialized, fitView, initialViewport, width, height, nodeLookup) => {
-	if (fitView && !initialViewport && width && height) {
-		let bounds = getInternalNodesBounds(nodeLookup, { filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight)) });
-		return getViewportForBounds$1(bounds, width, height, .5, 2, .1);
-	}
-	return initialViewport ?? {
-		x: 0,
-		y: 0,
-		zoom: 1
-	};
-}, createSolidFlow = (props) => {
-	let _props = merge(getDefaultFlowStateProps(), props), nodeLookup = new ReactiveMap(), parentLookup = new ReactiveMap(), edgeLookup = new ReactiveMap(), connectionLookup = new ReactiveMap(), layoutedEdgesMap = new ReactiveMap(), startNodesInitialized = untrack(() => adoptUserNodes(_props.nodes, nodeLookup, parentLookup, {
-		nodeExtent: _props.nodeExtent,
-		nodeOrigin: _props.nodeOrigin,
-		elevateNodesOnSelect: _props.elevateNodesOnSelect,
-		zIndexMode: _props.zIndexMode,
-		checkEquality: !0
-	})), initialViewport = getInitialViewport(startNodesInitialized, _props.fitView, _props.initialViewport, _props.width ?? 0, _props.height ?? 0, nodeLookup), mediaPrefersDark = createMediaQuery("(prefers-color-scheme: dark)", _props.colorModeSSR === "dark"), [config, setConfig] = createSignal(_props), [ariaLabelConfig, setAriaLabelConfig] = createSignal(() => mergeAriaLabelConfig(config().ariaLabelConfig)), [ariaLiveMessage, setAriaLiveMessage] = createSignal(() => config().ariaLiveMessage), [clickConnectStartHandle, setClickConnectStartHandle] = createSignal(void 0), [connection, setConnection] = createSignal(initialConnection), [domNode, setDomNode] = createSignal(null), [dragging, setDragging] = createSignal(!1), [elementsSelectable, setElementsSelectable] = createSignal(() => config().elementsSelectable), [height, setHeight] = createSignal(() => config().height), [minZoom, _setMinZoom] = createSignal(() => config().minZoom), [maxZoom, _setMaxZoom] = createSignal(() => config().maxZoom), [nodesConnectable, setNodesConnectable] = createSignal(() => config().nodesDraggable), [nodesDraggable, setNodesDraggable] = createSignal(() => config().nodesDraggable), [panZoom, setPanZoom] = createSignal(null), [selectionRect, setSelectionRect] = createSignal(), [selectionRectMode, setSelectionRectMode] = createSignal(), [snapGrid, setSnapGrid] = createSignal(() => config().snapGrid), [translateExtent, _setTranslateExtent] = createSignal(() => config().translateExtent ?? infiniteExtent), [width, setWidth] = createSignal(() => config().width), [selectionKeyPressed, setSelectionKeyPressed] = createSignal(!1), [multiselectionKeyPressed, setMultiselectionKeyPressed] = createSignal(!1), [deleteKeyPressed, setDeleteKeyPressed] = createSignal(!1), [panActivationKeyPressed, setPanActivationKeyPressed] = createSignal(!1), [zoomActivationKeyPressed, setZoomActivationKeyPressed] = createSignal(!1), [nodesStore, setNodesStore] = createStore(_props.nodes), [edgesStore, setEdgesStore] = createStore(_props.edges), [viewportStore, setViewportStore] = createStore(_props.viewport ?? initialViewport);
+	}), 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) => {
 		setNodesStore(() => next);
 	}, { defer: !0 }), createEffect(() => config().edges, (next) => {
@@ -934,7 +626,7 @@ const InitialNodeTypesMap = {
 			return clickConnectStartHandle();
 		},
 		get colorMode() {
-			return this._colorMode === "system" ? mediaPrefersDark() ? "dark" : "light" : this._colorMode;
+			return this._colorMode === "system" ? prefersDark() ? "dark" : "light" : this._colorMode;
 		},
 		get connection() {
 			let state = connection();
@@ -951,7 +643,7 @@ const InitialNodeTypesMap = {
 		},
 		get edgeTypes() {
 			return {
-				...InitialEdgeTypesMap,
+				...initialEdgeTypes,
 				...this._edgeTypes
 			};
 		},
@@ -987,7 +679,7 @@ const InitialNodeTypesMap = {
 		},
 		get nodeTypes() {
 			return {
-				...InitialNodeTypesMap,
+				...initialNodeTypes,
 				...this._nodeTypes
 			};
 		},
@@ -1024,8 +716,8 @@ const InitialNodeTypesMap = {
 		get visibleNodeIds() {
 			return visibleNodeIds();
 		},
-		get visibleNodesMap() {
-			return visibleNodesMap();
+		get cullingViewport() {
+			return cullingViewport();
 		},
 		get transform() {
 			return transform();
@@ -1051,318 +743,1183 @@ const InitialNodeTypesMap = {
 		get zoomActivationKeyPressed() {
 			return zoomActivationKeyPressed();
 		}
-	}), visibleNodesMap = createMemo(() => nodeLookup), visibleNodeIds = createMemo(() => Array.from(visibleNodesMap().values()).map((edge) => edge.id)), visibleEdgeIds = createMemo(() => Array.from(layoutedEdgesMap.values()).map((edge) => edge.id)), getEdge = (id) => layoutedEdgesMap.get(id), fitView = async (options) => store.panZoom ? await fitViewport({
-		nodes: nodeLookup,
-		width: store.width,
-		height: store.height,
-		panZoom: store.panZoom,
-		minZoom: store.minZoom,
-		maxZoom: store.maxZoom
-	}, options ?? config().fitViewOptions) : !1, resetStoreValues = () => {
-		setDragging(!1), setSelectionRect(void 0), setSelectionRectMode(void 0), setSelectionKeyPressed(!1), setMultiselectionKeyPressed(!1), setDeleteKeyPressed(!1), setPanActivationKeyPressed(!1), setZoomActivationKeyPressed(!1), setConnection({ ...initialConnection }), setClickConnectStartHandle(void 0), setViewportStore(() => config().initialViewport ?? {
-			x: 0,
-			y: 0,
-			zoom: 1
-		}), setAriaLiveMessage(""), setSnapGrid(void 0);
-	}, addEdge = (edgeParams) => {
-		setEdgesStore((edges) => {
-			let next = addEdge$1(edgeParams, edges);
-			next !== edges && edges.push(next[next.length - 1]);
+	}), 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;
+	} }), connections = createConnections({ get edges() {
+		return store.edges;
+	} }), layoutedEdges = createLayoutedEdges({
+		get edges() {
+			return store.edges;
+		},
+		get connectionMode() {
+			return store.connectionMode;
+		},
+		get defaultEdgeOptions() {
+			return store.defaultEdgeOptions;
+		},
+		get elevateEdgesOnSelect() {
+			return store.elevateEdgesOnSelect;
+		},
+		get zIndexMode() {
+			return store.zIndexMode;
+		},
+		get onError() {
+			return store.onError;
+		},
+		nodeLookup
+	}), visibleEdgeIds = createMemo(() => Object.keys(layoutedEdges)), getEdge = (id) => layoutedEdges[id], fitView = async (options) => store.panZoom ? await fitViewport({
+		nodes: nodeLookup,
+		width: store.width,
+		height: store.height,
+		panZoom: store.panZoom,
+		minZoom: store.minZoom,
+		maxZoom: store.maxZoom
+	}, options ?? config().fitViewOptions) : !1, resetStoreValues = () => {
+		setDragging(!1), setSelectionRect(void 0), setSelectionRectMode(void 0), setSelectionKeyPressed(!1), setMultiselectionKeyPressed(!1), setDeleteKeyPressed(!1), setPanActivationKeyPressed(!1), setZoomActivationKeyPressed(!1), setConnection({ ...initialConnection }), setClickConnectStartHandle(void 0), setViewportStore(() => config().initialViewport ?? {
+			x: 0,
+			y: 0,
+			zoom: 1
+		}), setAriaLiveMessage(""), setSnapGrid(void 0);
+	}, addEdge = (edgeParams) => {
+		setEdgesStore((edges) => {
+			let next = addEdge$1(edgeParams, edges);
+			next !== edges && edges.push(next[next.length - 1]);
+		});
+	}, initialFitViewApplied = !1, initialNodesMeasured = !1, applyInitialFitView = (initialFitView) => {
+		initialFitViewApplied = !initialFitView;
+	}, tryInitialFitView = () => {
+		initialFitViewApplied || !initialNodesMeasured || untrack(() => store.panZoom && store.width && store.height) && (initialFitViewApplied = !0, untrack(() => fitView()));
+	}, updateNodePositions = (nodeDragItems, dragging = !1) => {
+		setNodesStore((nodes) => {
+			for (let node of nodes) nodeDragItems.has(node.id) && (node.dragging = dragging, node.position = nodeDragItems.get(node.id).position);
+		});
+	}, applyMeasurementWrites = (writes) => {
+		setMeasurementsStore((draft) => {
+			for (let write of writes) if (write.hidden) {
+				let entry = draft[write.id];
+				entry && (entry.handleBounds = void 0);
+			} else draft[write.id] = {
+				measured: write.measured,
+				handleBounds: write.handleBounds
+			};
+		});
+	}, applyNodeChanges = (changes) => {
+		changes.length !== 0 && setNodesStore((nodes) => {
+			let nodeById = new Map(nodes.map((node) => [node.id, node]));
+			for (let change of changes) {
+				let node = nodeById.get(change.id);
+				if (node) switch (change.type) {
+					case "dimensions":
+						change.setAttributes && (node.width = change.dimensions?.width ?? node.width, node.height = change.dimensions?.height ?? node.height), node.measured = {
+							...node.measured,
+							...change.dimensions
+						};
+						break;
+					case "position": node.position = change.position ?? node.position;
+				}
+			}
+		});
+	}, markInitialNodesMeasured = () => {
+		initialNodesMeasured = !0, tryInitialFitView();
+	}, requestMeasure = () => {}, setMeasureRequester = (fn) => {
+		requestMeasure = fn;
+	}, zoomBy = async (factor, options) => store.panZoom ? store.panZoom.scaleBy(factor, options) : !1, zoomIn = (options) => zoomBy(1.2, options), zoomOut = (options) => zoomBy(1 / 1.2, options), setCenter = async (x, y, options) => {
+		let nextZoom = options?.zoom === void 0 ? store.maxZoom : options.zoom, currentPanZoom = store.panZoom;
+		return currentPanZoom ? (await currentPanZoom.setViewport({
+			x: store.width / 2 - x * nextZoom,
+			y: store.height / 2 - y * nextZoom,
+			zoom: nextZoom
+		}, {
+			duration: options?.duration,
+			ease: options?.ease,
+			interpolate: options?.interpolate
+		}), Promise.resolve(!0)) : Promise.resolve(!1);
+	}, setPaneClickDistance = (distance) => {
+		store.panZoom?.setClickDistance(distance);
+	}, unselectNodesAndEdges = ({ nodes: _nodes, edges } = {}) => {
+		let nodesToUnselect = new Set((_nodes || store.nodes).map(({ id }) => id));
+		nodesToUnselect.size && setNodesStore((nodes) => {
+			for (let node of nodes) nodesToUnselect.has(node.id) && (node.selected = !1);
+		});
+		let edgesToUnselect = new Set((edges ?? store.edges).map(({ id }) => id));
+		edgesToUnselect.size && setEdgesStore((edges) => {
+			for (let edge of edges) edgesToUnselect.has(edge.id) && (edge.selected = !1);
+		}), flush();
+	}, addSelectedNodes = (ids) => {
+		let isMultiSelection = store.multiselectionKeyPressed;
+		setNodesStore((nodes) => {
+			for (let node of nodes) {
+				let nodeWillBeSelected = ids.includes(node.id), selected = isMultiSelection && node.selected || nodeWillBeSelected;
+				node.selected !== selected && (node.selected = selected);
+			}
+		}), isMultiSelection || unselectNodesAndEdges({ nodes: [] }), flush();
+	}, addSelectedEdges = (ids) => {
+		let isMultiSelection = store.multiselectionKeyPressed;
+		setEdgesStore((edges) => {
+			for (let edge of edges) {
+				let edgeWillBeSelected = ids.includes(edge.id), selected = isMultiSelection && edge.selected || edgeWillBeSelected;
+				edge.selected !== selected && (edge.selected = selected);
+			}
+		}), isMultiSelection || unselectNodesAndEdges({ edges: [] }), flush();
+	}, handleNodeSelection = (id, unselect, nodeRef) => {
+		let node = store.nodes.find((n) => n.id === id);
+		node && (setSelectionRect(void 0), setSelectionRectMode(void 0), node.selected ? (unselect || node.selected && store.multiselectionKeyPressed) && (unselectNodesAndEdges({
+			nodes: [node],
+			edges: []
+		}), requestAnimationFrame(() => nodeRef?.blur())) : addSelectedNodes([id]));
+	}, handleEdgeSelection = (id) => {
+		let edge = edgeLookup[id];
+		edge && (edge.selectable || store.elementsSelectable && edge.selectable === void 0) && (setSelectionRect(void 0), setSelectionRectMode(void 0), edge.selected ? edge.selected && store.multiselectionKeyPressed && unselectNodesAndEdges({
+			nodes: [],
+			edges: [edge]
+		}) : addSelectedEdges([id]));
+	}, moveSelectedNodes = (direction, factor) => {
+		let nodeUpdates = /* @__PURE__ */ new Map(), xVelo = store.snapGrid?.[0] ?? 5, yVelo = store.snapGrid?.[1] ?? 5, xDiff = direction.x * xVelo * factor, yDiff = direction.y * yVelo * factor;
+		for (let node of nodeLookup.values()) {
+			if (!(node.selected && (node.draggable || store.nodesDraggable && node.draggable === void 0))) continue;
+			let nextPosition = {
+				x: node.internals.positionAbsolute.x + xDiff,
+				y: node.internals.positionAbsolute.y + yDiff
+			};
+			store.snapGrid && (nextPosition = snapPosition(nextPosition, store.snapGrid));
+			let { position } = calculateNodePosition({
+				nodeId: node.id,
+				nextPosition,
+				nodeLookup,
+				nodeExtent: store.nodeExtent,
+				nodeOrigin: store.nodeOrigin,
+				onError: store.onError
+			});
+			nodeUpdates.set(node.id, { position });
+		}
+		updateNodePositions(nodeUpdates);
+	}, panBy$1 = (delta) => panBy({
+		delta,
+		panZoom: store.panZoom,
+		transform: store.transform,
+		translateExtent: store.translateExtent,
+		width: store.width,
+		height: store.height
+	}), cancelConnection = () => {
+		setConnection({ ...initialConnection });
+	}, reset = () => {
+		resetStoreValues(), unselectNodesAndEdges();
+	}, flow = {
+		get nodes() {
+			return store.nodes;
+		},
+		get edges() {
+			return store.edges;
+		},
+		get internalNodes() {
+			return internalNodes;
+		},
+		get layoutedEdges() {
+			return layoutedEdges;
+		},
+		get connections() {
+			return connections;
+		},
+		selection: {
+			get nodes() {
+				return store.selectedNodes;
+			},
+			get edges() {
+				return store.selectedEdges;
+			}
+		},
+		get nodesInitialized() {
+			return store.nodesInitialized;
+		},
+		get viewportInitialized() {
+			return store.viewportInitialized;
+		},
+		get viewport() {
+			return store.viewport;
+		},
+		get width() {
+			return store.width;
+		},
+		get height() {
+			return store.height;
+		},
+		get colorMode() {
+			return store.colorMode;
+		},
+		get connection() {
+			return store.connection;
+		},
+		get dragging() {
+			return store.dragging;
+		},
+		get minZoom() {
+			return store.minZoom;
+		},
+		get maxZoom() {
+			return store.maxZoom;
+		},
+		get nodesDraggable() {
+			return store.nodesDraggable;
+		},
+		get nodesConnectable() {
+			return store.nodesConnectable;
+		},
+		get elementsSelectable() {
+			return store.elementsSelectable;
+		},
+		get snapGrid() {
+			return store.snapGrid;
+		}
+	}, getNodeRect = (node) => {
+		let nodeToUse = isNode(node) ? node : nodeLookup.get(node.id), position = nodeToUse.parentId ? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.measured, nodeToUse.parentId, nodeLookup, store.nodeOrigin) : nodeToUse.position, nodeWithPosition = {
+			...nodeToUse,
+			position,
+			width: nodeToUse.measured?.width ?? nodeToUse.width,
+			height: nodeToUse.measured?.height ?? nodeToUse.height
+		};
+		return nodeToRect(nodeWithPosition);
+	}, updateNode = (id, nodeUpdate, options = { replace: !1 }) => {
+		setNodesStore((nodes) => {
+			let index = nodes.findIndex((node) => node.id === id);
+			if (index === -1) return;
+			let node = nodes[index], nextNode = typeof nodeUpdate == "function" ? nodeUpdate(node) : nodeUpdate;
+			nodes[index] = options?.replace && isNode(nextNode) ? nextNode : {
+				...node,
+				...nextNode
+			};
+		});
+	}, commands = {
+		fitView,
+		fitBounds: async (bounds, options) => {
+			if (!store.panZoom) return !1;
+			let viewport = getViewportForBounds$1(bounds, store.width, store.height, store.minZoom, store.maxZoom, options?.padding ?? .1);
+			return await store.panZoom.setViewport(viewport, {
+				duration: options?.duration,
+				ease: options?.ease,
+				interpolate: options?.interpolate
+			}), !0;
+		},
+		zoomIn,
+		zoomOut,
+		setZoom: (zoomLevel, options) => {
+			let currentPanZoom = store.panZoom;
+			return currentPanZoom ? currentPanZoom.scaleTo(zoomLevel, { duration: options?.duration }) : Promise.resolve(!1);
+		},
+		setCenter,
+		setViewport: async (nextViewport, options) => {
+			let currentViewport = store.viewport;
+			return store.panZoom ? (await store.panZoom.setViewport({
+				x: nextViewport.x ?? currentViewport.x,
+				y: nextViewport.y ?? currentViewport.y,
+				zoom: nextViewport.zoom ?? currentViewport.zoom
+			}, options), !0) : !1;
+		},
+		panBy: panBy$1,
+		screenToFlowPosition: (position, options = { snapToGrid: !0 }) => {
+			if (!store.domNode) return position;
+			let _snapGrid = options.snapToGrid ? store.snapGrid : !1, { x, y, zoom } = store.viewport, { x: domX, y: domY } = store.domNode.getBoundingClientRect(), correctedPosition = {
+				x: position.x - domX,
+				y: position.y - domY
+			};
+			return pointToRendererPoint(correctedPosition, [
+				x,
+				y,
+				zoom
+			], _snapGrid !== null, _snapGrid || [1, 1]);
+		},
+		flowToScreenPosition: (position) => {
+			if (!store.domNode) return position;
+			let { x, y, zoom } = store.viewport, { x: domX, y: domY } = store.domNode.getBoundingClientRect(), rendererPosition = rendererPointToPoint(position, [
+				x,
+				y,
+				zoom
+			]);
+			return {
+				x: rendererPosition.x + domX,
+				y: rendererPosition.y + domY
+			};
+		},
+		addNodes: (payload) => {
+			let newNodes = Array.isArray(payload) ? payload : [payload];
+			setNodesStore((nodes) => [...nodes, ...newNodes]);
+		},
+		addEdges: (payload) => {
+			let newEdges = Array.isArray(payload) ? payload : [payload];
+			setEdgesStore((edges) => [...edges, ...newEdges]);
+		},
+		setNodes: setNodesStore,
+		setEdges: setEdgesStore,
+		updateNode,
+		updateNodeData: (id, dataUpdate, options) => {
+			let node = nodeLookup.get(id)?.internals.userNode;
+			if (!node) return;
+			let nextData = typeof dataUpdate == "function" ? dataUpdate(node) : dataUpdate;
+			updateNode(id, (current) => ({
+				...current,
+				data: options?.replace ? nextData : {
+					...current.data,
+					...nextData
+				}
+			}));
+		},
+		updateEdge: (id, edgeUpdate, options = { replace: !1 }) => {
+			setEdgesStore((edges) => {
+				let index = edges.findIndex((edge) => edge.id === id);
+				if (index === -1) return;
+				let edge = edges[index], nextEdge = typeof edgeUpdate == "function" ? edgeUpdate(edge) : edgeUpdate;
+				edges[index] = options.replace && isEdge(nextEdge) ? nextEdge : {
+					...edge,
+					...nextEdge
+				};
+			});
+		},
+		deleteElements: async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [] }) => {
+			let { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
+				nodesToRemove,
+				edgesToRemove,
+				nodes: store.nodes,
+				edges: store.edges,
+				onBeforeDelete: store.onBeforeDelete
+			});
+			if (matchingEdges) {
+				let remainingEdges = store.edges.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id));
+				store.onEdgesDelete?.(matchingEdges), setEdgesStore(() => remainingEdges);
+			}
+			if (matchingNodes) {
+				let remainingNodes = store.nodes.filter((node) => !matchingNodes.some(({ id }) => id === node.id));
+				store.onNodesDelete?.(matchingNodes), setNodesStore(() => remainingNodes);
+			}
+			return {
+				deletedNodes: matchingNodes,
+				deletedEdges: matchingEdges
+			};
+		},
+		getIntersectingNodes: (nodeOrRect, partially = !0, nodesToIntersect) => {
+			let isRect = isRectObject(nodeOrRect), nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
+			return nodeRect ? (nodesToIntersect || store.nodes).filter((n) => {
+				let internalNode = nodeLookup.get(n.id);
+				if (!internalNode || !isRect && n.id === nodeOrRect.id) return !1;
+				let currNodeRect = nodeToRect(internalNode), overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
+				return partially && overlappingArea > 0 || overlappingArea >= nodeRect.width * nodeRect.height;
+			}) : [];
+		},
+		isNodeIntersecting: (nodeOrRect, area, partially = !0) => {
+			let nodeRect = isRectObject(nodeOrRect) ? nodeOrRect : getNodeRect(nodeOrRect);
+			if (!nodeRect) return !1;
+			let overlappingArea = getOverlappingArea(nodeRect, area);
+			return partially && overlappingArea > 0 || overlappingArea >= nodeRect.width * nodeRect.height;
+		},
+		getNodesBounds: (nodesToMeasure) => getNodesBounds$1(nodesToMeasure, {
+			nodeLookup,
+			nodeOrigin: store.nodeOrigin
+		}),
+		updateNodeInternals: (id) => {
+			let updateIds = Array.isArray(id) ? id : [id], updates = [];
+			for (let updateId of updateIds) {
+				let nodeElement = store.domNode?.querySelector(`.solid-flow__node[data-id="${updateId}"]`);
+				nodeElement && updates.push([updateId, {
+					id: updateId,
+					nodeElement,
+					force: !0
+				}]);
+			}
+			requestMeasure(updates);
+		},
+		toObject: () => structuredClone({
+			nodes: [...snapshot(store.nodes)],
+			edges: [...snapshot(store.edges)],
+			viewport: { ...snapshot(store.viewport) }
+		})
+	};
+	return createEffect(() => !!(width() && height() && panZoom()), (ready) => {
+		ready && tryInitialFitView();
+	}), createEffect(() => ({
+		panZoom: store.panZoom,
+		viewport: {
+			x: store.viewport.x,
+			y: store.viewport.y,
+			zoom: store.viewport.zoom
+		}
+	}), ({ panZoom, viewport }) => {
+		panZoom?.syncViewport(viewport);
+	}), createEffect(() => ({
+		panZoom: panZoom(),
+		extent: [store.minZoom, store.maxZoom]
+	}), ({ panZoom, extent }) => {
+		panZoom?.setScaleExtent(extent);
+	}), createEffect(() => ({
+		panZoom: panZoom(),
+		extent: store.translateExtent
+	}), ({ panZoom, extent }) => {
+		panZoom?.setTranslateExtent(extent);
+	}), createEffect(() => new Set(store.nodes.map((n) => n.id)), (currentIds) => {
+		setMeasurementsStore((draft) => {
+			for (let id of Object.keys(draft)) currentIds.has(id) || delete draft[id];
+		});
+	}), {
+		store,
+		flow,
+		commands,
+		internalNodes,
+		layoutedEdges,
+		nodeLookup,
+		edgeLookup,
+		parentIds,
+		connections,
+		actions: {
+			getEdge,
+			applyInitialFitView,
+			applyMeasurementWrites,
+			applyNodeChanges,
+			markInitialNodesMeasured,
+			setMeasureRequester,
+			resetStoreValues,
+			setAriaLabelConfig,
+			setAriaLiveMessage,
+			setClickConnectStartHandle,
+			setConfig,
+			setConnection,
+			setDeleteKeyPressed,
+			setDomNode,
+			setDragging,
+			get setEdges() {
+				return setEdgesStore;
+			},
+			setElementsSelectable,
+			setHeight,
+			setMultiselectionKeyPressed,
+			get setNodes() {
+				return setNodesStore;
+			},
+			setNodesConnectable,
+			setNodesDraggable,
+			setPanActivationKeyPressed,
+			setPanZoom,
+			setSelectionKeyPressed,
+			setSelectionRect,
+			setSelectionRectMode,
+			get setViewport() {
+				return (viewport) => setViewportStore(() => viewport);
+			},
+			setWidth,
+			setZoomActivationKeyPressed,
+			addEdge,
+			updateNodePositions,
+			zoomIn,
+			zoomOut,
+			fitView,
+			setCenter,
+			setPaneClickDistance,
+			unselectNodesAndEdges,
+			addSelectedNodes,
+			addSelectedEdges,
+			handleNodeSelection,
+			handleEdgeSelection,
+			moveSelectedNodes,
+			panBy: panBy$1,
+			cancelConnection,
+			reset
+		}
+	};
+}, 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
+		});
+	}, 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
+			},
+			connectionMode: store.connectionMode,
+			fromNodeId: store.clickConnectStartHandle.nodeId,
+			fromHandleId: store.clickConnectStartHandle.id ?? null,
+			fromType: store.clickConnectStartHandle.type,
+			isValidConnection: isValidConnectionHandler,
+			flowId: store.id,
+			doc,
+			lib: store.lib,
+			nodeLookup
+		});
+		isValid && connection && onConnectExtended(connection);
+		let connectionClone = structuredClone(snapshot(store.connection));
+		delete connectionClone.inProgress, connectionClone.toPosition = connectionClone.toHandle ? connectionClone.toHandle.position : null, store.onClickConnectEnd?.(event, connectionClone), actions.setClickConnectStartHandle(void 0);
+	}, connectionIndicator = () => connectable() && (!connectionInProcess() || isPossibleTargetHandle()) && (connectionInProcess() || store.clickConnectStartHandle ? _props.isConnectableEnd : _props.isConnectableStart);
+	return <div {...rest} role="button" aria-label={store.ariaLabelConfig["handle.ariaLabel"]} tabindex={-1} data-handleid={handleId()} data-nodeid={nodeId()} data-handlepos={_props.position} data-id={`${store.id}-${nodeId()}-${_props.id || null}-${_props.type}`} onClick={store.clickConnect ? onClick : void 0} onPointerDown={onPointerDown} style={_props.style} class={[
+		"solid-flow__handle",
+		`solid-flow__handle-${_props.position}`,
+		store.noDragClass,
+		store.noPanClass,
+		_props.class,
+		{
+			valid: valid(),
+			connectingto: !!connectingTo(),
+			connectingfrom: !!connectingFrom(),
+			source: !isTarget(),
+			target: isTarget(),
+			connectablestart: _props.isConnectableStart,
+			connectableend: _props.isConnectableEnd,
+			connectable: !!connectable(),
+			connectionindicator: connectionIndicator()
+		}
+	]}>
+      {_props.children}
+    </div>;
+}, DefaultNode = (props) => {
+	let _props = propDefaults(props, {
+		targetPosition: Position$1.Top,
+		sourcePosition: Position$1.Bottom
+	});
+	return <>
+      <Handle type="target" position={_props.targetPosition} isConnectable={_props.isConnectable} />
+      {props.data.label}
+      <Handle type="source" position={_props.sourcePosition} isConnectable={_props.isConnectable} />
+    </>;
+}, GroupNode = (props) => <div style={{
+	position: "absolute",
+	left: 0,
+	top: 0,
+	width: toPxString(props.width),
+	height: toPxString(props.height)
+}} />, InputNode = (props) => {
+	let _props = propDefaults(props, { sourcePosition: Position$1.Bottom });
+	return <>
+      {props.data?.label}
+      <Handle type="source" position={_props.sourcePosition} isConnectable={_props.isConnectable} />
+    </>;
+}, createDraggable = (elem, params) => {
+	let { store, nodeLookup, actions } = useInternalSolidFlow(), [dragging, setDragging] = createSignal(!1);
+	return createEffect(() => ({
+		el: elem(),
+		current: params()
+	}), ({ el, current }) => {
+		if (!el || current.disabled) return;
+		let { onDrag, onDragStart, onDragStop, onNodeMouseDown } = current, dragInstance = XYDrag({
+			onDrag,
+			onDragStart: (event, dragItems, node, nodes) => {
+				setDragging(!0), onDragStart?.(event, dragItems, node, nodes);
+			},
+			onDragStop: (event, dragItems, node, nodes) => {
+				setDragging(!1), onDragStop?.(event, dragItems, node, nodes);
+			},
+			onNodeMouseDown,
+			getStoreItems: () => ({
+				nodes: store.nodes,
+				nodeLookup,
+				edges: store.edges,
+				nodeExtent: store.nodeExtent,
+				snapGrid: store.snapGrid ?? [0, 0],
+				snapToGrid: !!store.snapGrid,
+				autoPanSpeed: store.autoPanSpeed,
+				nodeOrigin: store.nodeOrigin,
+				multiSelectionActive: store.multiselectionKeyPressed,
+				domNode: store.domNode,
+				transform: store.transform,
+				autoPanOnNodeDrag: store.autoPanOnNodeDrag,
+				nodesDraggable: store.nodesDraggable,
+				selectNodesOnDrag: store.selectNodesOnDrag,
+				nodeDragThreshold: store.nodeDragThreshold,
+				unselectNodesAndEdges: actions.unselectNodesAndEdges,
+				updateNodePositions: actions.updateNodePositions,
+				panBy: actions.panBy
+			})
+		});
+		return dragInstance.update({
+			domNode: el,
+			nodeId: current.nodeId,
+			noDragClassName: current.noDragClass,
+			handleSelector: current.handleSelector,
+			isSelectable: current.isSelectable,
+			nodeClickDistance: current.nodeClickDistance
+		}), () => {
+			dragInstance.destroy();
+		};
+	}), dragging;
+}, NodeIdContext = createContext(null);
+function useNodeId() {
+	let ctx = useContext(NodeIdContext);
+	if (!ctx) throw Error("solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useNodeId");
+	return ctx;
+}
+//#endregion
+//#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;
+		return `translate(${x}px, ${y}px)`;
+	}, sizeStyle = () => {
+		let w = node().width ?? node().initialWidth, h = node().height ?? node().initialHeight;
+		return {
+			...node().style,
+			...w ? { width: toPxString(w) } : {},
+			...h ? { height: toPxString(h) } : {}
+		};
+	}, culled = createMemo(() => isNodeCulled(node(), store.cullingViewport)), style = () => ({
+		"z-index": node().internals.z,
+		transform: transform(),
+		visibility: culled() || !nodeHasDimensions(node()) ? "hidden" : "visible",
+		"pointer-events": culled() ? "none" : void 0,
+		...sizeStyle(),
+		...node().style ?? {}
+	});
+	createEffect(() => ({
+		valid: nodeTypeValid(),
+		nodeType: nodeType()
+	}), ({ valid, nodeType }) => {}), createEffect(() => ({
+		id: node().id,
+		nodeElement: nodeRef(),
+		nodeType: nodeType(),
+		sourcePosition: node().sourcePosition,
+		targetPosition: node().targetPosition
+	}), (current, prev) => {
+		current.nodeElement && (prev && prev.nodeElement === current.nodeElement && prev.sourcePosition === current.sourcePosition && prev.targetPosition === current.targetPosition && prev.nodeType === current.nodeType || actions.requestUpdateNodeInternals([[current.id, {
+			id: current.id,
+			nodeElement: current.nodeElement,
+			force: !0
+		}]]));
+	}), createEffect(() => ({
+		nodeElement: nodeRef(),
+		hasDimensions: nodeHasDimensions(node()),
+		resizeObserver: props.resizeObserver
+	}), (current, prev) => {
+		current.nodeElement === prev?.nodeElement && current.resizeObserver === prev?.resizeObserver && current.hasDimensions || (prev?.nodeElement && prev.resizeObserver?.unobserve(prev.nodeElement), current.nodeElement && current.resizeObserver?.observe(current.nodeElement));
+	});
+	let onSelectNodeHandler = (event) => {
+		selectable() && (!store.selectNodesOnDrag || !draggable() || store.nodeDragThreshold > 0) && actions.handleNodeSelection(node().id), props.onNodeClick?.({
+			node: userNode(),
+			event
+		});
+	}, onKeyDown = (event) => {
+		if (isInputDOMNode(event) || store.disableKeyboardA11y) return;
+		if (elementSelectionKeys.includes(event.key) && selectable()) {
+			actions.handleNodeSelection(node().id, event.key === "Escape", nodeRef());
+			return;
+		}
+		let arrowKeyDiff = ARROW_KEY_DIFFS[event.key];
+		draggable() && node().selected && arrowKeyDiff && (event.preventDefault(), actions.setAriaLiveMessage(store.ariaLabelConfig["node.a11yDescription.ariaLiveMessage"]({
+			direction: event.key.replace("Arrow", "").toLowerCase(),
+			x: ~~node().internals.positionAbsolute.x,
+			y: ~~node().internals.positionAbsolute.y
+		})), actions.moveSelectedNodes(arrowKeyDiff, event.shiftKey ? 4 : 1));
+	}, onFocus = () => {
+		if (store.disableKeyboardA11y || !store.autoPanOnNodeFocus || !nodeRef()?.matches(":focus-visible")) return;
+		let { width, height, viewport } = store;
+		getNodesInside(/* @__PURE__ */ new Map([[node().id, node()]]), {
+			x: 0,
+			y: 0,
+			width,
+			height
+		}, [
+			viewport.x,
+			viewport.y,
+			viewport.zoom
+		], !0).length > 0 || actions.setCenter(node().position.x + (node().measured.width ?? 0) / 2, node().position.y + (node().measured.height ?? 0) / 2, { zoom: viewport.zoom });
+	}, dragging = createDraggable(nodeRef, () => ({
+		nodeId: node().id,
+		isSelectable: selectable(),
+		disabled: !draggable(),
+		handleSelector: node().dragHandle,
+		noDragClass: store.noDragClass,
+		nodeClickDistance: props.nodeClickDistance,
+		onNodeMouseDown: actions.handleNodeSelection,
+		onDrag: (event, _, targetNode, nodes) => {
+			props.onNodeDrag?.({
+				event,
+				targetNode,
+				nodes
+			});
+		},
+		onDragStart: (event, _, targetNode, nodes) => {
+			props.onNodeDragStart?.({
+				event,
+				targetNode,
+				nodes
+			});
+		},
+		onDragStop: (event, _, targetNode, nodes) => {
+			props.onNodeDragStop?.({
+				event,
+				targetNode,
+				nodes
+			});
+		}
+	}));
+	return <Show when={!node().hidden}>
+      <div ref={setNodeRef} data-id={node().id} class={[
+		"solid-flow__node",
+		`solid-flow__node-${nodeType()}`,
+		{
+			connectable: !!connectable(),
+			draggable: !!draggable(),
+			dragging: dragging(),
+			nopan: !!draggable(),
+			parent: isParentNode(),
+			selectable: !!selectable(),
+			selected: !!node().selected
+		},
+		node().class
+	]} style={style()} onClick={onSelectNodeHandler} onPointerEnter={(event) => props.onNodePointerEnter?.({
+		node: userNode(),
+		event
+	})} onPointerLeave={(event) => props.onNodePointerLeave?.({
+		node: userNode(),
+		event
+	})} onPointerMove={(event) => props.onNodePointerMove?.({
+		node: userNode(),
+		event
+	})} onContextMenu={(event) => props.onNodeContextMenu?.({
+		node: userNode(),
+		event
+	})} onKeyDown={(e) => focusable() && onKeyDown(e)} onFocus={() => focusable() && onFocus()} tabindex={focusable() ? 0 : void 0} role={node().ariaRole ?? (focusable() ? "group" : void 0)} aria-roledescription="node" aria-describedby={store.disableKeyboardA11y ? void 0 : `${ARIA_NODE_DESC_KEY}-${store.id}`} {...node().domAttributes}>
+        <NodeIdContext value={nodeId}>
+          <NodeConnectableContext value={connectable}>
+            <Dynamic component={nodeComponent()} data={node().data} id={node().id} selected={!!node().selected} selectable={selectable()} deletable={deletable()} sourcePosition={node().sourcePosition} targetPosition={node().targetPosition} zIndex={node().internals.z} dragging={dragging()} draggable={draggable()} dragHandle={node().dragHandle} parentId={node().parentId} type={nodeType()} isConnectable={connectable()} positionAbsoluteX={node().internals.positionAbsolute.x} positionAbsoluteY={node().internals.positionAbsolute.y} width={node().width} height={node().height} />
+          </NodeConnectableContext>
+        </NodeIdContext>
+      </div>
+    </Show>;
+}, OutputNode = (props) => {
+	let _props = propDefaults(props, { targetPosition: Position$1.Top });
+	return <>
+      <Handle type="target" position={_props.targetPosition} isConnectable={_props.isConnectable} />
+      {props.data?.label}
+    </>;
+};
+//#endregion
+//#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
+* handle bounds from the DOM and reports them as data — measurement writes
+* for the measurements root plus user-facing dimension/position changes —
+* instead of writing into a node lookup. The internalNodes projection turns
+* the measurement writes back into internal-node state.
+*
+* `parentExpandChildren` must be turned into changes via
+* {@link handleExpandParent} only AFTER the measurement writes have been
+* flushed, so parent geometry reflects this measuring pass.
+*/
+function measureNodeInternals(updates, nodeLookup, domNode, nodeExtent) {
+	let measurementWrites = [], changes = [], parentExpandChildren = [], updatedInternals = !1, viewportNode = domNode?.querySelector(".xyflow__viewport");
+	if (!viewportNode) return {
+		updatedInternals,
+		measurementWrites,
+		changes,
+		parentExpandChildren
+	};
+	let style = window.getComputedStyle(viewportNode), { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
+	for (let update of updates.values()) {
+		let node = nodeLookup.get(update.id);
+		if (!node) continue;
+		if (node.hidden) {
+			measurementWrites.push({
+				id: node.id,
+				hidden: !0
+			}), updatedInternals = !0;
+			continue;
+		}
+		let dimensions = getDimensions(update.nodeElement), dimensionChanged = node.measured.width !== dimensions.width || node.measured.height !== dimensions.height;
+		if (dimensions.width && dimensions.height && (dimensionChanged || !node.internals.handleBounds || update.force)) {
+			let nodeBounds = update.nodeElement.getBoundingClientRect(), extent = isCoordinateExtent(node.extent) ? node.extent : nodeExtent, { positionAbsolute } = node.internals;
+			node.parentId && node.extent === "parent" ? positionAbsolute = clampPositionToParent(positionAbsolute, dimensions, nodeLookup.get(node.parentId)) : extent && (positionAbsolute = clampPosition(positionAbsolute, extent, dimensions)), measurementWrites.push({
+				id: node.id,
+				measured: dimensions,
+				handleBounds: {
+					source: getHandleBounds("source", update.nodeElement, nodeBounds, zoom, node.id),
+					target: getHandleBounds("target", update.nodeElement, nodeBounds, zoom, node.id)
+				}
+			}), updatedInternals = !0, dimensionChanged && (changes.push({
+				id: node.id,
+				type: "dimensions",
+				dimensions
+			}), node.expandParent && node.parentId && parentExpandChildren.push({
+				id: node.id,
+				parentId: node.parentId,
+				rect: nodeToRect({
+					...node,
+					measured: dimensions,
+					internals: {
+						...node.internals,
+						positionAbsolute
+					}
+				})
+			}));
+		}
+	}
+	return {
+		updatedInternals,
+		measurementWrites,
+		changes,
+		parentExpandChildren
+	};
+}
+function handleExpandParent(children, nodeLookup, getChildNodes, nodeOrigin = [0, 0]) {
+	let changes = [], parentExpansions = /* @__PURE__ */ new Map();
+	for (let child of children) {
+		let parent = nodeLookup.get(child.parentId);
+		if (!parent) continue;
+		let parentRect = parentExpansions.get(child.parentId)?.expandedRect ?? nodeToRect(parent), expandedRect = getBoundsOfRects(parentRect, child.rect);
+		parentExpansions.set(child.parentId, {
+			expandedRect,
+			parent
 		});
-	}, initialFitViewApplied = !1, initialNodesMeasured = !1, applyInitialFitView = (initialFitView) => {
-		initialFitViewApplied = !initialFitView;
-	}, tryInitialFitView = () => {
-		initialFitViewApplied || !initialNodesMeasured || untrack(() => store.panZoom && store.width && store.height) && (initialFitViewApplied = !0, untrack(() => fitView()));
-	}, updateNodePositions = (nodeDragItems, dragging = !1) => {
-		setNodesStore((nodes) => {
-			for (let node of nodes) nodeDragItems.has(node.id) && (node.dragging = dragging, node.position = nodeDragItems.get(node.id).position);
+	}
+	return parentExpansions.size > 0 && parentExpansions.forEach(({ expandedRect, parent }, parentId) => {
+		let positionAbsolute = parent.internals.positionAbsolute, dimensions = getNodeDimensions(parent), origin = parent.origin ?? nodeOrigin, xChange = expandedRect.x < positionAbsolute.x ? Math.round(Math.abs(positionAbsolute.x - expandedRect.x)) : 0, yChange = expandedRect.y < positionAbsolute.y ? Math.round(Math.abs(positionAbsolute.y - expandedRect.y)) : 0, newWidth = Math.max(dimensions.width, Math.round(expandedRect.width)), newHeight = Math.max(dimensions.height, Math.round(expandedRect.height)), widthChange = (newWidth - dimensions.width) * origin[0], heightChange = (newHeight - dimensions.height) * origin[1];
+		if (xChange > 0 || yChange > 0 || widthChange || heightChange) {
+			changes.push({
+				id: parentId,
+				type: "position",
+				position: {
+					x: parent.position.x - xChange + widthChange,
+					y: parent.position.y - yChange + heightChange
+				}
+			});
+			for (let childNode of getChildNodes(parentId)) children.some((child) => child.id === childNode.id) || changes.push({
+				id: childNode.id,
+				type: "position",
+				position: {
+					x: childNode.position.x + xChange,
+					y: childNode.position.y + yChange
+				}
+			});
+		}
+		(dimensions.width < expandedRect.width || dimensions.height < expandedRect.height || xChange || yChange) && changes.push({
+			id: parentId,
+			type: "dimensions",
+			setAttributes: !0,
+			dimensions: {
+				width: newWidth + (xChange ? origin[0] * xChange - widthChange : 0),
+				height: newHeight + (yChange ? origin[1] * yChange - heightChange : 0)
+			}
 		});
-	}, pendingEntries, requestUpdateNodeInternals = (updateEntries) => {
+	}), changes;
+}
+//#endregion
+//#region src/browser/createSolidFlow.ts
+const InitialNodeTypesMap = {
+	input: InputNode,
+	output: OutputNode,
+	default: DefaultNode,
+	group: GroupNode
+}, InitialEdgeTypesMap = {
+	straight: StraightEdgeInternal,
+	smoothstep: SmoothStepEdgeInternal,
+	default: BezierEdgeInternal,
+	step: StepEdgeInternal
+}, createSolidFlow = (props) => {
+	let state = createFlowState(props, {
+		prefersDark: createMediaQuery("(prefers-color-scheme: dark)", props.colorModeSSR === "dark"),
+		initialNodeTypes: InitialNodeTypesMap,
+		initialEdgeTypes: InitialEdgeTypesMap
+	}), { store, nodeLookup, actions } = state, pendingEntries, requestUpdateNodeInternals = (updateEntries) => {
 		if (pendingEntries) {
 			pendingEntries.push(...updateEntries);
 			return;
 		}
 		pendingEntries = updateEntries, scheduleIdleCallback(() => {
-			{
-				let updates = new Map(pendingEntries);
-				pendingEntries = void 0;
-				let { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, store.domNode, store.nodeOrigin);
-				if (!updatedInternals) return;
-				updateAbsolutePositions(nodeLookup, parentLookup, {
-					nodeOrigin: store.nodeOrigin,
-					nodeExtent: store.nodeExtent,
-					zIndexMode: store.zIndexMode
-				});
-				let nodeToChange = changes.reduce((acc, change) => {
-					let node = nodeLookup.get(change.id)?.internals.userNode;
-					return node && acc.set(node.id, change), acc;
-				}, /* @__PURE__ */ new Map());
-				setNodesStore((nodes) => {
-					for (let node of nodes) {
-						let change = nodeToChange.get(node.id);
-						if (change) switch (change.type) {
-							case "dimensions":
-								change.setAttributes && (node.width = change.dimensions?.width ?? node.width, node.height = change.dimensions?.height ?? node.height), node.measured = {
-									...node.measured,
-									...change.dimensions
-								};
-								break;
-							case "position": node.position = change.position ?? node.position;
-						}
-					}
-				}), flush(), initialNodesMeasured = !0, tryInitialFitView();
-			}
-		});
-	}, zoomBy = async (factor, options) => store.panZoom ? store.panZoom.scaleBy(factor, options) : !1, zoomIn = (options) => zoomBy(1.2, options), zoomOut = (options) => zoomBy(1 / 1.2, options), setCenter = async (x, y, options) => {
-		let nextZoom = options?.zoom === void 0 ? store.maxZoom : options.zoom, currentPanZoom = store.panZoom;
-		return currentPanZoom ? (await currentPanZoom.setViewport({
-			x: store.width / 2 - x * nextZoom,
-			y: store.height / 2 - y * nextZoom,
-			zoom: nextZoom
-		}, {
-			duration: options?.duration,
-			ease: options?.ease,
-			interpolate: options?.interpolate
-		}), Promise.resolve(!0)) : Promise.resolve(!1);
-	}, setPaneClickDistance = (distance) => {
-		store.panZoom?.setClickDistance(distance);
-	}, unselectNodesAndEdges = ({ nodes: _nodes, edges } = {}) => {
-		let nodesToUnselect = new Set((_nodes || store.nodes).map(({ id }) => id));
-		nodesToUnselect.size && setNodesStore((nodes) => {
-			for (let node of nodes) nodesToUnselect.has(node.id) && (node.selected = !1);
-		});
-		let edgesToUnselect = new Set((edges ?? store.edges).map(({ id }) => id));
-		edgesToUnselect.size && setEdgesStore((edges) => {
-			for (let edge of edges) edgesToUnselect.has(edge.id) && (edge.selected = !1);
+			let updates = new Map(pendingEntries);
+			pendingEntries = void 0;
+			let { updatedInternals, measurementWrites, changes, parentExpandChildren } = measureNodeInternals(updates, nodeLookup, store.domNode);
+			updatedInternals && (actions.applyMeasurementWrites(measurementWrites), flush(), parentExpandChildren.length > 0 && changes.push(...handleExpandParent(parentExpandChildren, nodeLookup, (parentId) => store.nodes.filter((node) => node.parentId === parentId), store.nodeOrigin)), actions.applyNodeChanges(changes), flush(), actions.markInitialNodesMeasured());
 		});
-	}, addSelectedNodes = (ids) => {
-		let isMultiSelection = store.multiselectionKeyPressed, selectState = /* @__PURE__ */ new Map();
-		setNodesStore((nodes) => {
-			for (let node of nodes) {
-				let nodeWillBeSelected = ids.includes(node.id), selected = isMultiSelection && node.selected || nodeWillBeSelected;
-				if (selectState.set(node.id, selected), node.selected === selected) continue;
-				let internalNode = nodeLookup.get(node.id);
-				internalNode && (internalNode.selected = selected), node.selected = selected;
-			}
-		}), isMultiSelection || unselectNodesAndEdges({ nodes: [] });
-	}, addSelectedEdges = (ids) => {
-		let isMultiSelection = store.multiselectionKeyPressed, edgeSelectState = /* @__PURE__ */ new Map();
-		setEdgesStore((edges) => {
-			for (let edge of edges) {
-				let edgeWillBeSelected = ids.includes(edge.id), selected = isMultiSelection && edge.selected || edgeWillBeSelected;
-				edgeSelectState.set(edge.id, selected), edge.selected !== selected && (edge.selected = selected);
-			}
-		}), isMultiSelection || unselectNodesAndEdges({ edges: [] });
 	};
-	return createEffect(() => !!(width() && height() && panZoom()), (ready) => {
-		ready && tryInitialFitView();
-	}), createEffect(() => ({
-		panZoom: store.panZoom,
-		viewport: {
-			x: store.viewport.x,
-			y: store.viewport.y,
-			zoom: store.viewport.zoom
+	return actions.setMeasureRequester(requestUpdateNodeInternals), {
+		...state,
+		actions: {
+			...actions,
+			requestUpdateNodeInternals
 		}
-	}), ({ panZoom, viewport }) => {
-		panZoom?.syncViewport(viewport);
-	}), createEffect(() => ({
-		panZoom: panZoom(),
-		extent: [store.minZoom, store.maxZoom]
-	}), ({ panZoom, extent }) => {
-		panZoom?.setScaleExtent(extent);
-	}), createEffect(() => ({
-		panZoom: panZoom(),
-		extent: store.translateExtent
-	}), ({ panZoom, extent }) => {
-		panZoom?.setTranslateExtent(extent);
-	}), createRenderEffect(mapArray(() => store.nodes, (userNode) => {
-		createRenderEffect(() => {
-			let internalNode = untrack(() => nodeLookup.get(userNode.id)), selectedNodeZ = store.elevateNodesOnSelect && store.zIndexMode !== "manual" ? 1e3 : 0, clampedPosition = clampPosition(getNodePositionWithOrigin(userNode, store.nodeOrigin), isCoordinateExtent(userNode.extent) ? userNode.extent : store.nodeExtent, getNodeDimensions(userNode)), preservedMeasured = {
-				width: userNode.measured?.width ?? internalNode?.measured?.width,
-				height: userNode.measured?.height ?? internalNode?.measured?.height
-			}, updatedNodeInternals = {
-				...userNode,
-				measured: preservedMeasured,
-				internals: {
-					positionAbsolute: clampedPosition,
-					handleBounds: !userNode.measured && !internalNode?.measured ? void 0 : internalNode?.internals.handleBounds,
-					z: calculateZ(userNode, selectedNodeZ, store.zIndexMode),
-					userNode
-				}
-			};
-			nodeLookup.set(userNode.id, updatedNodeInternals), userNode.parentId && updateChildNode(updatedNodeInternals, nodeLookup, parentLookup, {
-				nodeOrigin: store.nodeOrigin,
-				nodeExtent: store.nodeExtent,
-				elevateNodesOnSelect: store.elevateNodesOnSelect,
-				zIndexMode: store.zIndexMode,
-				checkEquality: !0
-			});
-		}, () => {}), onCleanup(() => {});
-	}), () => {}), createEffect(() => new Set(store.nodes.map((n) => n.id)), (currentIds) => {
-		for (let id of untrack(() => Array.from(nodeLookup.keys()))) currentIds.has(id) || nodeLookup.delete(id);
-	}), createRenderEffect(mapArray(() => store.edges, (edge) => {
-		let { source: sourceNodeId, target: targetNodeId, sourceHandle = null, targetHandle = null } = edge, connection = {
-			edgeId: edge.id,
-			source: sourceNodeId,
-			target: targetNodeId,
-			sourceHandle,
-			targetHandle
-		}, sourceKey = `${sourceNodeId}-${sourceHandle}--${targetNodeId}-${targetHandle}`, targetKey = `${targetNodeId}-${targetHandle}--${sourceNodeId}-${sourceHandle}`;
-		createRenderEffect(() => {
-			addConnectionToLookup("source", connection, targetKey, connectionLookup, sourceNodeId, sourceHandle), addConnectionToLookup("target", connection, sourceKey, connectionLookup, targetNodeId, targetHandle), edgeLookup.set(edge.id, edge);
-		}, () => {}), createRenderEffect(() => {
-			let sourceNode = nodeLookup.get(edge.source), targetNode = nodeLookup.get(edge.target);
-			if (!sourceNode || !targetNode) return;
-			if (store.onlyRenderVisibleElements) {
-				if (!isEdgeVisible({
-					sourceNode,
-					targetNode,
-					width: store.width ?? 0,
-					height: store.height ?? 0,
-					transform: store.transform
-				})) return;
-				store.visibleNodesMap.set(sourceNode.id, sourceNode), store.visibleNodesMap.set(targetNode.id, targetNode);
+	};
+}, SolidFlowContext = createContext(null);
+function useInternalSolidFlow() {
+	let ctx = useContext(SolidFlowContext);
+	if (!ctx) throw Error("solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useInternalSolidFlow within your components");
+	return ctx;
+}
+//#endregion
+//#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;
 			}
-			let edgePosition = getEdgePosition({
-				id: edge.id,
-				sourceNode,
-				targetNode,
-				sourceHandle: edge.sourceHandle || null,
-				targetHandle: edge.targetHandle || null,
-				connectionMode: store.connectionMode,
-				onError: store.onError
-			});
-			edgePosition && layoutedEdgesMap.set(edge.id, {
-				...store.defaultEdgeOptions,
-				...edge,
-				...edgePosition,
-				zIndex: getElevatedEdgeZIndex({
-					selected: edge.selected,
-					zIndex: edge.zIndex ?? store.defaultEdgeOptions.zIndex,
-					sourceNode,
-					targetNode,
-					elevateOnSelect: store.elevateEdgesOnSelect,
-					zIndexMode: store.zIndexMode
-				}),
-				sourceNode,
-				targetNode,
-				edge
-			});
-		}, () => {}), onCleanup(() => {
-			edgeLookup.delete(edge.id), layoutedEdgesMap.delete(edge.id), removeConnectionFromLookup("source", targetKey, connectionLookup, sourceNodeId, sourceHandle), removeConnectionFromLookup("target", sourceKey, connectionLookup, targetNodeId, targetHandle);
-		});
-	}), () => {}), createEffect(() => new Set(store.edges.map((e) => e.id)), (currentIds) => {
-		for (let id of untrack(() => Array.from(edgeLookup.keys()))) currentIds.has(id) || (edgeLookup.delete(id), connectionLookup.delete(id), layoutedEdgesMap.delete(id));
-	}), {
-		store,
-		nodeLookup,
-		edgeLookup,
-		parentLookup,
-		connectionLookup,
-		actions: {
-			getEdge,
-			applyInitialFitView,
-			resetStoreValues,
-			requestUpdateNodeInternals,
-			setAriaLabelConfig,
-			setAriaLiveMessage,
-			setClickConnectStartHandle,
-			setConfig,
-			setConnection,
-			setDeleteKeyPressed,
-			setDomNode,
-			setDragging,
-			get setEdges() {
-				return setEdgesStore;
-			},
-			setElementsSelectable,
-			setHeight,
-			setMultiselectionKeyPressed,
-			get setNodes() {
-				return setNodesStore;
-			},
-			setNodesConnectable,
-			setNodesDraggable,
-			setPanActivationKeyPressed,
-			setPanZoom,
-			setSelectionKeyPressed,
-			setSelectionRect,
-			setSelectionRectMode,
-			get setViewport() {
-				return (viewport) => setViewportStore(() => viewport);
-			},
-			setWidth,
-			setZoomActivationKeyPressed,
-			addEdge,
-			updateNodePositions,
-			zoomIn,
-			zoomOut,
-			fitView,
-			setCenter,
-			setPaneClickDistance,
-			unselectNodesAndEdges,
-			addSelectedNodes,
-			addSelectedEdges,
-			handleNodeSelection: (id, unselect, nodeRef) => {
-				let node = store.nodes.find((n) => n.id === id);
-				node && (setSelectionRect(void 0), setSelectionRectMode(void 0), node.selected ? (unselect || node.selected && store.multiselectionKeyPressed) && (unselectNodesAndEdges({
-					nodes: [node],
-					edges: []
-				}), requestAnimationFrame(() => nodeRef?.blur())) : addSelectedNodes([id]));
-			},
-			handleEdgeSelection: (id) => {
-				let edge = edgeLookup.get(id);
-				edge && (edge.selectable || store.elementsSelectable && edge.selectable === void 0) && (setSelectionRect(void 0), setSelectionRectMode(void 0), edge.selected ? edge.selected && store.multiselectionKeyPressed && unselectNodesAndEdges({
-					nodes: [],
-					edges: [edge]
-				}) : addSelectedEdges([id]));
-			},
-			moveSelectedNodes: (direction, factor) => {
-				let nodeUpdates = /* @__PURE__ */ new Map(), xVelo = store.snapGrid?.[0] ?? 5, yVelo = store.snapGrid?.[1] ?? 5, xDiff = direction.x * xVelo * factor, yDiff = direction.y * yVelo * factor;
-				for (let node of nodeLookup.values()) {
-					if (!(node.selected && (node.draggable || store.nodesDraggable && node.draggable === void 0))) continue;
-					let nextPosition = {
-						x: node.internals.positionAbsolute.x + xDiff,
-						y: node.internals.positionAbsolute.y + yDiff
-					};
-					store.snapGrid && (nextPosition = snapPosition(nextPosition, store.snapGrid));
-					let { position, positionAbsolute } = calculateNodePosition({
-						nodeId: node.id,
-						nextPosition,
-						nodeLookup,
-						nodeExtent: store.nodeExtent,
-						nodeOrigin: store.nodeOrigin,
-						onError: store.onError
-					});
-					node.position = position, node.internals.positionAbsolute = positionAbsolute, nodeUpdates.set(node.id, node);
-				}
-				updateNodePositions(nodeUpdates);
-			},
-			panBy: (delta) => panBy({
-				delta,
-				panZoom: store.panZoom,
-				transform: store.transform,
-				translateExtent: store.translateExtent,
-				width: store.width,
-				height: store.height
-			}),
-			cancelConnection: () => {
-				setConnection({ ...initialConnection });
-			},
-			reset: () => {
-				resetStoreValues(), unselectNodesAndEdges();
+			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;
 			}
 		}
 	};
-}, SolidFlowContext = createContext(null);
-function useInternalSolidFlow() {
-	let ctx = useContext(SolidFlowContext);
-	if (!ctx) throw Error("solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useInternalSolidFlow within your components");
-	return ctx;
-}
-//#endregion
-//#region src/components/graph/marker/Marker.tsx
-const Marker = (props) => {
+	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",
@@ -1421,7 +1978,7 @@ const Marker = (props) => {
 	for (let item of a) if (!b.has(item)) return !1;
 	return !0;
 }, Pane = (props) => {
-	let { store, nodeLookup, edgeLookup, connectionLookup, actions } = useInternalSolidFlow(), [containerRef, setContainerRef] = createSignal(), container, containerBounds = null, connectionEndedOnPane = !1, selectionInProgress = !1, selectedNodeIds = /* @__PURE__ */ new Set(), selectedEdgeIds = /* @__PURE__ */ new Set(), autoPanId = 0, position = {
+	let { store, nodeLookup, edgeLookup, connections, actions } = useInternalSolidFlow(), [containerRef, setContainerRef] = createSignal(), container, containerBounds = null, connectionEndedOnPane = !1, selectionInProgress = !1, selectedNodeIds = /* @__PURE__ */ new Set(), selectedEdgeIds = /* @__PURE__ */ new Set(), autoPanId = 0, position = {
 		x: 0,
 		y: 0
 	}, autoPanStarted = !1, autoPanOnSelection = () => props.autoPanOnSelection ?? !0, paneClickDistance = () => props.paneClickDistance ?? 1, _panOnDrag = () => store.panActivationKeyPressed || props.panOnDrag, isSelecting = () => store.selectionKeyPressed || !!store.selectionRect || props.selectionOnDrag && _panOnDrag() !== !0, isSelectionEnabled = () => store.elementsSelectable && (isSelecting() || store.selectionRectMode === "user"), onClick = (event) => {
@@ -1467,9 +2024,9 @@ const Marker = (props) => {
 		let edgesSelectable = store.defaultEdgeOptions.selectable ?? !0;
 		selectedEdgeIds = /* @__PURE__ */ new Set();
 		for (let nodeId of selectedNodeIds) {
-			let connections = connectionLookup.get(nodeId);
-			if (connections) for (let { edgeId } of connections.values()) {
-				let edge = edgeLookup.get(edgeId);
+			let nodeConnections = connections[nodeId];
+			if (nodeConnections) for (let { edgeId } of Object.values(nodeConnections)) {
+				let edge = edgeLookup[edgeId];
 				edge && (edge.selectable ?? edgesSelectable) && selectedEdgeIds.add(edgeId);
 			}
 		}
@@ -1526,484 +2083,393 @@ const Marker = (props) => {
 			return;
 		}
 		event.button === 0 && (event.target?.releasePointerCapture?.(event.pointerId), !selectionInProgress && event.target === container && onClick(event), actions.setSelectionRect(void 0), selectionInProgress && actions.setSelectionRectMode(selectedNodeIds.size > 0 ? "nodes" : void 0), flush(), selectionInProgress && props.onSelectionEnd?.(event), cleanupAutoPan());
-	}, onPointerCancel = (event) => {
-		event.target?.releasePointerCapture?.(event.pointerId), cleanupAutoPan();
-	}, onClickCapture = (event) => {
-		selectionInProgress &&= (event.stopPropagation(), !1);
-	};
-	createEventListener(containerRef, "pointerdown", (e) => {
-		isSelectionEnabled() && onPointerDownCapture(e);
-	}, { capture: !0 }), createEventListener(containerRef, "click", (e) => {
-		isSelectionEnabled() && onClickCapture(e);
-	}, { capture: !0 });
-	let onContextMenu = (event) => {
-		if (event.target !== container) return;
-		let result = _panOnDrag();
-		if (Array.isArray(result) && result.includes(2)) {
-			event.preventDefault();
-			return;
-		}
-		props.onPaneContextMenu?.({ event });
-	};
-	return <div ref={(el) => {
-		container = el, setContainerRef(el);
-	}} class={["solid-flow__container solid-flow__pane", {
-		selection: !!isSelecting(),
-		dragging: store.dragging,
-		draggable: props.panOnDrag === !0 || Array.isArray(props.panOnDrag) && props.panOnDrag.includes(0)
-	}]} onClick={(e) => isSelectionEnabled() ? void 0 : onClick(e)} onPointerMove={(e) => isSelectionEnabled() ? onPointerMove(e) : void 0} onPointerUp={onPointerUp} onPointerCancel={(e) => isSelectionEnabled() ? onPointerCancel(e) : void 0} onContextMenu={onContextMenu}>
-      {props.children}
-    </div>;
-}, Panel = (props) => {
-	let { store } = useInternalSolidFlow(), _props = propDefaults(props, {
-		position: "top-right",
-		style: {}
-	}), rest = omit(_props, "class", "position", "style", "children");
-	return <div class={[
-		"solid-flow__panel",
-		..._props.position.split("-"),
-		_props.class
-	]} style={{
-		"pointer-events": store.selectionRectMode ? "none" : void 0,
-		..._props.style
-	}} {...rest}>
-      {_props.children}
-    </div>;
-}, Viewport = (props) => {
-	let { store } = useInternalSolidFlow();
-	return <div class="solid-flow__container solid-flow__viewport xyflow__viewport" style={{ transform: `translate(${store.viewport.x}px, ${store.viewport.y}px) scale(${store.viewport.zoom})` }}>
-      {props.children}
-    </div>;
-}, ViewportPortal = (props) => {
-	let { store } = useInternalSolidFlow();
-	return <Show when={store.domNode}>
-      {(domNode) => <Portal mount={domNode().querySelector(".solid-flow__viewport-portal") ?? void 0}>
-          {props.children}
-        </Portal>}
-    </Show>;
-}, Zoom = (props) => {
-	let [ref, setRef] = createSignal(), { store, actions } = useInternalSolidFlow(), viewPort = () => props.initialViewport || {
-		x: 0,
-		y: 0,
-		zoom: 1
-	}, panOnDrag = () => store.panActivationKeyPressed || props.panOnDrag, panOnScroll = () => store.panActivationKeyPressed || props.panOnScroll, onTransformChange = (transform) => {
-		let [x, y, zoom] = transform;
-		actions.setViewport({
-			x,
-			y,
-			zoom
-		});
-	};
-	return createEffect(() => ref(), (el) => {
-		if (!el) return;
-		let panZoomInstance = untrack(() => XYPanZoom({
-			domNode: el,
-			minZoom: store.minZoom,
-			maxZoom: store.maxZoom,
-			translateExtent: store.translateExtent,
-			viewport: viewPort(),
-			onDraggingChange: actions.setDragging,
-			onPanZoomStart: props.onMoveStart,
-			onPanZoom: props.onMove,
-			onPanZoomEnd: props.onMoveEnd
-		})), vp = panZoomInstance.getViewport(), initial = untrack(() => viewPort());
-		(initial.x !== vp.x || initial.y !== vp.y || initial.zoom !== vp.zoom) && onTransformChange([
-			vp.x,
-			vp.y,
-			vp.zoom
-		]), actions.setViewport(vp), actions.setPanZoom(panZoomInstance), props.onViewportInitialized?.();
-	}), createEffect(() => ({
-		panZoom: store.panZoom,
-		options: {
-			lib: store.lib,
-			panActivationKeyPressed: store.panActivationKeyPressed,
-			zoomActivationKeyPressed: store.zoomActivationKeyPressed,
-			noPanClassName: store.noPanClass,
-			noWheelClassName: store.noWheelClass,
-			userSelectionActive: !!store.selectionRect,
-			panOnScrollSpeed: props.panOnScrollSpeed,
-			panOnDrag: panOnDrag(),
-			panOnScroll: panOnScroll(),
-			zoomOnScroll: props.zoomOnScroll,
-			zoomOnDoubleClick: props.zoomOnDoubleClick,
-			zoomOnPinch: props.zoomOnPinch,
-			panOnScrollMode: props.panOnScrollMode,
-			preventScrolling: typeof props.preventScrolling != "boolean" || props.preventScrolling,
-			paneClickDistance: props.paneClickDistance,
-			selectionOnDrag: props.selectionOnDrag,
-			connectionInProgress: store.connection.inProgress
-		}
-	}), ({ panZoom, options }) => {
-		panZoom?.update({
-			...options,
-			onTransformChange
-		});
-	}), <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>
-    </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()} />;
-}, DotPattern = (props) => {
-	let _props = propDefaults(props, { radius: 5 });
-	return <circle class={[
-		"solid-flow__background-pattern",
-		"dots",
-		_props.class
-	]} cx={_props.radius} cy={_props.radius} r={_props.radius} />;
-}, LinePattern = (props) => {
-	let _props = propDefaults(props, { lineWidth: 1 });
-	return <path stroke-width={_props.lineWidth} d={`M${_props.dimensions[0] / 2} 0 V${_props.dimensions[1]} M0 ${_props.dimensions[1] / 2} H${_props.dimensions[0]}`} class={[
-		"solid-flow__background-pattern",
-		_props.variant,
-		_props.class
-	]} />;
-}, DEFAULT_SIZE = {
-	dots: 1,
-	lines: 1,
-	cross: 6
-}, Background = (props) => {
-	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];
-	return <svg data-testid="solid-flow__background" class={["solid-flow__container solid-flow__background", _props.class]} style={{
-		"--xy-background-color-props": _props.bgColor,
-		"--xy-background-pattern-color-props": _props.patternColor,
-		..._props.style
-	}}>
-      <pattern id={patternId()} x={store.viewport.x % scaledGap()[0]} y={store.viewport.y % scaledGap()[1]} width={scaledGap()[0]} height={scaledGap()[1]} patternUnits="userSpaceOnUse" patternTransform={`translate(-${patternOffset()[0]},-${patternOffset()[1]})`}>
-        <Show when={!isDots()} fallback={<DotPattern radius={scaledSize() / 2} class={_props.patternClass} />}>
-          <LinePattern class={_props.patternClass} dimensions={patternDimensions()} variant={_props.variant} lineWidth={_props.lineWidth} />
-        </Show>
-      </pattern>
-      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId()})`} />
-    </svg>;
-}, 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,
-		"--xy-controls-button-background-color-hover-props": props.bgColorHover,
-		"--xy-controls-button-color-props": props.color,
-		"--xy-controls-button-color-hover-props": props.colorHover,
-		"--xy-controls-button-border-color-props": props.borderColor
-	}).filter(([_, value]) => value !== void 0).reduce((acc, [key, value]) => (acc[key] = value, acc), {});
-	return <button type="button" class={["solid-flow__controls-button", props.class]} onClick={(e) => props.onClick?.(e)} style={style()} {...rest}>
-      {props.children}
-    </button>;
-}, Fit = () => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30">
-    <path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" />
-  </svg>, Lock = () => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
-    <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" />
-  </svg>, Minus = () => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5">
-    <path d="M0 0h32v4.2H0z" />
-  </svg>, Plus = () => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-    <path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z" />
-  </svg>, Unlock = () => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
-    <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z" />
-  </svg>, Controls = (props) => {
-	let { store, actions } = useInternalSolidFlow(), _props = propDefaults(props, {
-		position: "bottom-left",
-		showZoom: !0,
-		showFitView: !0,
-		showLock: !0,
-		orientation: "vertical"
-	}), rest = omit(_props, "class", "position", "showZoom", "showFitView", "showLock", "orientation", "fitViewOptions", "beforeControls", "afterControls", "buttonBgColor", "buttonBgColorHover", "buttonColor", "buttonColorHover", "buttonBorderColor", "style", "children"), getMinZoomReached = () => store.viewport.zoom <= store.minZoom, getMaxZoomReached = () => store.viewport.zoom >= store.maxZoom, getIsInteractive = () => store.nodesDraggable || store.nodesConnectable || store.elementsSelectable, onZoomInHandler = () => {
-		actions.zoomIn();
-	}, onZoomOutHandler = () => {
-		actions.zoomOut();
-	}, onFitViewHandler = () => {
-		actions.fitView(_props.fitViewOptions);
-	}, onToggleInteractivity = () => {
-		let newValue = !getIsInteractive();
-		actions.setNodesDraggable(newValue), actions.setNodesConnectable(newValue), actions.setElementsSelectable(newValue);
-	}, buttonProps = () => ({
-		bgColor: _props.buttonBgColor,
-		bgColorHover: _props.buttonBgColorHover,
-		color: _props.buttonColor,
-		colorHover: _props.buttonColorHover,
-		borderColor: _props.buttonBorderColor
-	});
-	return <Panel class={[
-		"solid-flow__controls",
-		_props.orientation,
+	}, onPointerCancel = (event) => {
+		event.target?.releasePointerCapture?.(event.pointerId), cleanupAutoPan();
+	}, onClickCapture = (event) => {
+		selectionInProgress &&= (event.stopPropagation(), !1);
+	};
+	createEventListener(containerRef, "pointerdown", (e) => {
+		isSelectionEnabled() && onPointerDownCapture(e);
+	}, { capture: !0 }), createEventListener(containerRef, "click", (e) => {
+		isSelectionEnabled() && onClickCapture(e);
+	}, { capture: !0 });
+	let onContextMenu = (event) => {
+		if (event.target !== container) return;
+		let result = _panOnDrag();
+		if (Array.isArray(result) && result.includes(2)) {
+			event.preventDefault();
+			return;
+		}
+		props.onPaneContextMenu?.({ event });
+	};
+	return <div ref={(el) => {
+		container = el, setContainerRef(el);
+	}} class={["solid-flow__container solid-flow__pane", {
+		selection: !!isSelecting(),
+		dragging: store.dragging,
+		draggable: props.panOnDrag === !0 || Array.isArray(props.panOnDrag) && props.panOnDrag.includes(0)
+	}]} onClick={(e) => isSelectionEnabled() ? void 0 : onClick(e)} onPointerMove={(e) => isSelectionEnabled() ? onPointerMove(e) : void 0} onPointerUp={onPointerUp} onPointerCancel={(e) => isSelectionEnabled() ? onPointerCancel(e) : void 0} onContextMenu={onContextMenu}>
+      {props.children}
+    </div>;
+}, Panel = (props) => {
+	let { store } = useInternalSolidFlow(), _props = propDefaults(props, {
+		position: "top-right",
+		style: {}
+	}), rest = omit(_props, "class", "position", "style", "children");
+	return <div class={[
+		"solid-flow__panel",
+		..._props.position.split("-"),
 		_props.class
-	]} position={_props.position} data-testid="solid-flow__controls" aria-label={store.ariaLabelConfig["controls.ariaLabel"]} style={_props.style} {...rest}>
-      {_props.beforeControls}
-      <Show when={_props.showZoom}>
-        <>
-          <ControlButton onClick={onZoomInHandler} class="solid-flow__controls-zoomin" title={store.ariaLabelConfig["controls.zoomIn.ariaLabel"]} aria-label={store.ariaLabelConfig["controls.zoomIn.ariaLabel"]} disabled={getMaxZoomReached()} {...buttonProps()}>
-            <Plus />
-          </ControlButton>
-          <ControlButton onClick={onZoomOutHandler} class="solid-flow__controls-zoomout" title={store.ariaLabelConfig["controls.zoomOut.ariaLabel"]} aria-label={store.ariaLabelConfig["controls.zoomOut.ariaLabel"]} disabled={getMinZoomReached()} {...buttonProps()}>
-            <Minus />
-          </ControlButton>
-        </>
-      </Show>
-      <Show when={_props.showFitView}>
-        <ControlButton class="solid-flow__controls-fitview" onClick={onFitViewHandler} title={store.ariaLabelConfig["controls.fitView.ariaLabel"]} aria-label={store.ariaLabelConfig["controls.fitView.ariaLabel"]} {...buttonProps()}>
-          <Fit />
-        </ControlButton>
-      </Show>
-      <Show when={_props.showLock}>
-        <ControlButton class="solid-flow__controls-interactive" onClick={onToggleInteractivity} title={store.ariaLabelConfig["controls.interactive.ariaLabel"]} aria-label={store.ariaLabelConfig["controls.interactive.ariaLabel"]} {...buttonProps()}>
-          <Show when={getIsInteractive()} fallback={<Lock />}>
-            <Unlock />
-          </Show>
-        </ControlButton>
-      </Show>
+	]} style={{
+		"pointer-events": store.selectionRectMode ? "none" : void 0,
+		..._props.style
+	}} {...rest}>
       {_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.get(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}>
+    </div>;
+}, Viewport = (props) => {
+	let { store } = useInternalSolidFlow();
+	return <div class="solid-flow__container solid-flow__viewport xyflow__viewport" style={{ transform: `translate(${store.viewport.x}px, ${store.viewport.y}px) scale(${store.viewport.zoom})` }}>
+      {props.children}
+    </div>;
+}, ViewportPortal = (props) => {
+	let { store } = useInternalSolidFlow();
+	return <Show when={store.domNode}>
+      {(domNode) => <Portal mount={domNode().querySelector(".solid-flow__viewport-portal") ?? void 0}>
           {props.children}
-        </div>
-      </EdgeLabel>
+        </Portal>}
     </Show>;
-}, MiniMapNode = (props) => {
-	let _props = propDefaults(props, {
-		borderRadius: 5,
-		width: 0,
-		height: 0
-	}), style = () => Object.entries({
-		fill: _props.color,
-		stroke: _props.strokeColor,
-		"stroke-width": _props.strokeWidth
-	}).filter(([_, value]) => value !== void 0).reduce((acc, [key, value]) => (acc[key] = value, acc), {});
-	return <rect class={[
-		"solid-flow__minimap-node",
-		{ selected: !!_props.selected },
-		_props.class
-	]} x={_props.x} y={_props.y} rx={_props.borderRadius} ry={_props.borderRadius} width={_props.width} height={_props.height} shape-rendering={_props.shapeRendering} style={style()} />;
-}, getAttrFunction = (func) => func instanceof Function ? func : () => func, MiniMap = (props) => {
-	let { store, nodeLookup } = useInternalSolidFlow(), _props = propDefaults(props, {
-		position: "bottom-right",
-		nodeClass: "",
-		nodeStrokeColor: "transparent",
-		pannable: !0,
-		zoomable: !0,
-		width: 200,
-		height: 150,
-		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 = () => ({
-		x: -store.viewport.x / store.viewport.zoom,
-		y: -store.viewport.y / store.viewport.zoom,
-		width: store.width / store.viewport.zoom,
-		height: store.height / store.viewport.zoom
-	}), getBoundingRect = () => {
-		let viewBB = getViewBB();
-		return nodeLookup.size > 0 ? getBoundsOfRects(getInternalNodesBounds(nodeLookup), viewBB) : viewBB;
-	}, getScaledWidth = () => getBoundingRect().width / _props.width, getScaledHeight = () => getBoundingRect().height / _props.height, getViewScale = () => Math.max(getScaledWidth(), getScaledHeight()), getViewWidth = () => getViewScale() * _props.width, getViewHeight = () => getViewScale() * _props.height, getOffset = () => 5 * getViewScale(), getX = () => {
-		let boundingRect = getBoundingRect();
-		return boundingRect.x - (getViewWidth() - boundingRect.width) / 2 - getOffset();
-	}, getY = () => {
-		let boundingRect = getBoundingRect();
-		return boundingRect.y - (getViewHeight() - boundingRect.height) / 2 - getOffset();
-	}, getViewboxWidth = () => getViewWidth() + getOffset() * 2, getViewboxHeight = () => getViewHeight() + getOffset() * 2, strokeWidth = () => _props.maskStrokeWidth ? _props.maskStrokeWidth * getViewScale() : void 0, prevNodeIds = [], nodeIds = () => {
-		let currentNodeIds = store.nodes.map((node) => node.id), currentSet = new Set(currentNodeIds);
-		return (prevNodeIds.length !== currentNodeIds.length || !prevNodeIds.every((id) => currentSet.has(id))) && (prevNodeIds = currentNodeIds), prevNodeIds;
+}, Zoom = (props) => {
+	let [ref, setRef] = createSignal(), { store, actions } = useInternalSolidFlow(), viewPort = () => props.initialViewport || {
+		x: 0,
+		y: 0,
+		zoom: 1
+	}, panOnDrag = () => store.panActivationKeyPressed || props.panOnDrag, panOnScroll = () => store.panActivationKeyPressed || props.panOnScroll, onTransformChange = (transform) => {
+		let [x, y, zoom] = transform;
+		actions.setViewport({
+			x,
+			y,
+			zoom
+		});
 	};
-	return <Panel position={_props.position} data-testid="solid-flow__minimap" class={["solid-flow__minimap", _props.class]} style={{
-		"--xy-minimap-background-color-props": _props.bgColor,
-		..._props.style
-	}} {...paneProps}>
-      <Show when={store.panZoom}>
-        {(panZoom) => {
-		let [ref, setRef] = createSignal(), [minimap, setMinimap] = createSignal();
-		return createEffect(() => ({
-			el: ref(),
-			panZoom: panZoom()
-		}), ({ el, panZoom }) => {
-			if (!el) return;
-			let instance = XYMinimap({
-				domNode: el,
-				panZoom,
-				getTransform: () => store.transform,
-				getViewScale
+	return createEffect(() => ref(), (el) => {
+		if (!el) return;
+		let panZoomInstance = untrack(() => XYPanZoom({
+			domNode: el,
+			minZoom: store.minZoom,
+			maxZoom: store.maxZoom,
+			translateExtent: store.translateExtent,
+			viewport: viewPort(),
+			onDraggingChange: actions.setDragging,
+			onPanZoomStart: props.onMoveStart,
+			onPanZoom: props.onMove,
+			onPanZoomEnd: props.onMoveEnd
+		})), vp = panZoomInstance.getViewport(), initial = untrack(() => viewPort());
+		(initial.x !== vp.x || initial.y !== vp.y || initial.zoom !== vp.zoom) && onTransformChange([
+			vp.x,
+			vp.y,
+			vp.zoom
+		]), actions.setViewport(vp), actions.setPanZoom(panZoomInstance), props.onViewportInitialized?.();
+	}), createEffect(() => ({
+		panZoom: store.panZoom,
+		options: {
+			lib: store.lib,
+			panActivationKeyPressed: store.panActivationKeyPressed,
+			zoomActivationKeyPressed: store.zoomActivationKeyPressed,
+			noPanClassName: store.noPanClass,
+			noWheelClassName: store.noWheelClass,
+			userSelectionActive: !!store.selectionRect,
+			panOnScrollSpeed: props.panOnScrollSpeed,
+			panOnDrag: panOnDrag(),
+			panOnScroll: panOnScroll(),
+			zoomOnScroll: props.zoomOnScroll,
+			zoomOnDoubleClick: props.zoomOnDoubleClick,
+			zoomOnPinch: props.zoomOnPinch,
+			panOnScrollMode: props.panOnScrollMode,
+			preventScrolling: typeof props.preventScrolling != "boolean" || props.preventScrolling,
+			paneClickDistance: props.paneClickDistance,
+			selectionOnDrag: props.selectionOnDrag,
+			connectionInProgress: store.connection.inProgress
+		}
+	}), ({ panZoom, options }) => {
+		panZoom?.update({
+			...options,
+			onTransformChange
+		});
+	}), <div ref={setRef} class="solid-flow__container solid-flow__zoom">
+      {props.children}
+    </div>;
+}, 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
 			});
-			return setMinimap(instance), () => {
-				instance.destroy();
-			};
-		}), createEffect(() => ({
-			instance: minimap(),
-			options: {
-				translateExtent: store.translateExtent,
-				width: store.width,
-				height: store.height,
-				inversePan: _props.inversePan,
-				zoomStep: _props.zoomStep,
-				pannable: _props.pannable,
-				zoomable: _props.zoomable
+		}
+	}));
+	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;
 			}
-		}), ({ instance, options }) => {
-			instance?.update(options);
-		}), <svg ref={setRef} width={_props.width} height={_props.height} viewBox={`${getX()} ${getY()} ${getViewboxWidth()} ${getViewboxHeight()}`} class="solid-flow__minimap-svg" role="img" aria-labelledby={labelledBy()} style={{
-			"--xy-minimap-mask-background-color-props": _props.maskColor,
-			"--xy-minimap-mask-stroke-color-props": _props.maskStrokeColor,
-			"--xy-minimap-mask-stroke-width-props": strokeWidth()
-		}}>
-              <title id={labelledBy()}>{store.ariaLabelConfig["minimap.ariaLabel"]}</title>
-              <For keyed={!1} each={nodeIds()}>
-                {(nodeId) => {
-			let node = createMemo(() => nodeLookup.get(nodeId())), nodeVisible = () => !!(node() && nodeHasDimensions(node()) && !node().hidden);
-			return <Show when={nodeVisible() && getNodeDimensions(node())}>
-                      {(nodeDimensions) => <MiniMapNode x={node().internals.positionAbsolute.x} y={node().internals.positionAbsolute.y} borderRadius={_props.nodeBorderRadius} strokeWidth={_props.nodeStrokeWidth} shapeRendering={shapeRendering()} width={nodeDimensions().width} height={nodeDimensions().height} selected={node().selected} color={nodeColorFunc()?.call(null, node())} strokeColor={nodeStrokeColorFunc().call(null, node())} class={nodeClassFunc().call(null, node())} />}
-                    </Show>;
-		}}
-              </For>
-              <path class="solid-flow__minimap-mask" d={`M${getX() - getOffset()},${getY() - getOffset()}h${getViewboxWidth() + getOffset() * 2}v${getViewboxHeight() + getOffset() * 2}h${-getViewboxWidth() - getOffset() * 2}z
-            M${getViewBB().x},${getViewBB().y}h${getViewBB().width}v${getViewBB().height}h${-getViewBB().width}z`} fill-rule="evenodd" pointer-events="none" />
-            </svg>;
-	}}
-      </Show>
-    </Panel>;
-}, ResizeControl = (props) => {
-	let _props = propDefaults(props, {
-		variant: "handle",
-		minWidth: 10,
-		minHeight: 10,
-		maxWidth: Number.MAX_VALUE,
-		maxHeight: Number.MAX_VALUE,
-		keepAspectRatio: !1,
-		autoScale: !0,
-		style: {}
-	}), rest = omit(_props, "nodeId", "variant", "position", "minWidth", "minHeight", "maxWidth", "maxHeight", "keepAspectRatio", "autoScale", "onResizeStart", "onResize", "onResizeEnd", "shouldResize", "class", "children", "color", "style"), [resizeControlRef, setResizeControlRef] = createSignal(), { store, nodeLookup, actions } = useInternalSolidFlow(), ctxNodeId = useNodeId(), nodeId = () => _props.nodeId ?? ctxNodeId(), isLineVariant = () => _props.variant === "line", controlPosition = () => _props.position ?? (isLineVariant() ? "right" : "bottom-right"), positionClassNames = () => controlPosition().split("-"), [resizer, setResizer] = createSignal();
-	return createEffect(() => resizeControlRef(), (el) => {
+		});
+		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 instance = XYResizer({
-			domNode: el,
-			nodeId: nodeId(),
-			getStoreItems: () => ({
-				nodeLookup,
-				transform: store.transform,
-				snapGrid: store.snapGrid,
-				snapToGrid: !!store.snapGrid,
-				nodeOrigin: store.nodeOrigin,
-				paneDomNode: store.domNode
-			}),
-			onChange: (change, childChanges) => {
-				let changes = /* @__PURE__ */ new Map(), position = change.x && change.y ? {
-					x: change.x,
-					y: change.y
-				} : void 0;
-				changes.set(nodeId(), {
-					...change,
-					position
-				});
-				for (let childChange of childChanges) changes.set(childChange.id, { position: childChange.position });
-				actions.setNodes((nodes) => {
-					for (let node of nodes) {
-						let nodeChange = changes.get(node.id);
-						nodeChange && (node.width = nodeChange.width, node.height = nodeChange.height, node.position = {
-							x: nodeChange.position?.x ?? node.position.x,
-							y: nodeChange.position?.y ?? node.position.y
-						});
-					}
-				});
-			}
+		let observer = new ResizeObserver(() => {
+			actions.setWidth(el.clientWidth), actions.setHeight(el.clientHeight);
 		});
-		return setResizer(instance), () => {
-			instance.destroy();
-		};
+		return observer.observe(el), () => observer.disconnect();
 	}), createEffect(() => ({
-		instance: resizer(),
-		options: {
-			controlPosition: controlPosition(),
-			boundaries: {
-				minWidth: _props.minWidth,
-				minHeight: _props.minHeight,
-				maxWidth: _props.maxWidth,
-				maxHeight: _props.maxHeight
-			},
-			keepAspectRatio: !!_props.keepAspectRatio,
-			onResizeStart: _props.onResizeStart,
-			onResize: _props.onResize,
-			onResizeEnd: _props.onResizeEnd,
-			shouldResize: _props.shouldResize
-		}
-	}), ({ instance, options }) => {
-		instance?.update(options);
-	}), <div ref={setResizeControlRef} class={[
-		"solid-flow__resize-control",
-		_props.variant,
-		store.noDragClass,
-		...positionClassNames(),
-		_props.class
-	]} style={{
-		"border-color": isLineVariant() ? _props.color : void 0,
-		"background-color": isLineVariant() ? void 0 : _props.color,
-		scale: isLineVariant() || !_props.autoScale ? void 0 : Math.max(1 / store.viewport.zoom, 1),
+		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
-	}} {...rest}>
-      {_props.children}
+	});
+	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>;
-}, NodeResizer = (props) => {
-	let _props = propDefaults(props, {
-		autoScale: !0,
-		visible: !0
-	}), rest = omit(props, "handleClass", "handleStyle", "lineClass", "lineStyle");
-	return <Show when={_props.visible}>
-      <For each={XY_RESIZER_LINE_POSITIONS}>
-        {(position) => <ResizeControl variant="line" position={position} class={props.lineClass} style={props.lineStyle} {...rest} />}
-      </For>
-      <For each={XY_RESIZER_HANDLE_POSITIONS}>
-        {(position) => <ResizeControl position={position} class={props.handleClass} style={props.handleStyle} {...rest} />}
-      </For>
-    </Show>;
+}, 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
@@ -2017,11 +2483,11 @@ const Marker = (props) => {
 * @returns an accessor for the current color mode class
 */
 function useColorMode() {
-	let { store } = useInternalSolidFlow();
-	return () => store.colorMode;
+	let { flow } = useInternalSolidFlow();
+	return () => flow.colorMode;
 }
 //#endregion
-//#region src/hooks/useConnection.tsx
+//#region src/hooks/useConnection.ts
 /**
 * Hook for receiving the current connection.
 *
@@ -2029,8 +2495,8 @@ function useColorMode() {
 * @returns current connection as a readable store
 */
 function useConnection() {
-	let { store } = useInternalSolidFlow();
-	return () => store.connection;
+	let { flow } = useInternalSolidFlow();
+	return () => flow.connection;
 }
 //#endregion
 //#region src/hooks/useGraph.ts
@@ -2061,15 +2527,15 @@ function useEdges() {
 * @returns store with the viewport object
 */
 function useViewport() {
-	let { store } = useInternalSolidFlow();
-	return () => store.viewport;
+	let { flow } = useInternalSolidFlow();
+	return () => flow.viewport;
 }
 //#endregion
-//#region src/hooks/useHandleEdgeSelect.tsx
+//#region src/hooks/useHandleEdgeSelect.ts
 function useHandleEdgeSelect() {
 	let { store, edgeLookup, actions } = useInternalSolidFlow();
 	return (id) => {
-		let edge = edgeLookup.get(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]
@@ -2088,8 +2554,8 @@ function useHandleEdgeSelect() {
 * @returns an accessor that indicates whether the nodes are initialized
 */
 function useNodesInitialized() {
-	let { store } = useInternalSolidFlow();
-	return () => store.nodesInitialized;
+	let { flow } = useInternalSolidFlow();
+	return () => flow.nodesInitialized;
 }
 /**
 * Hook for seeing if the viewport is initialized.
@@ -2100,11 +2566,11 @@ function useNodesInitialized() {
 * @returns an accessor that indicates whether the viewport is initialized
 */
 function useViewportInitialized() {
-	let { store } = useInternalSolidFlow();
-	return () => store.viewportInitialized;
+	let { flow } = useInternalSolidFlow();
+	return () => flow.viewportInitialized;
 }
 //#endregion
-//#region src/hooks/useInternalNode.tsx
+//#region src/hooks/useInternalNode.ts
 /**
 * Hook to get an internal node by id.
 *
@@ -2113,8 +2579,8 @@ function useViewportInitialized() {
 * @returns an accessor with an internal node or undefined
 */
 function useInternalNode(id) {
-	let { nodeLookup } = useInternalSolidFlow();
-	return () => nodeLookup.get(id());
+	let { flow } = useInternalSolidFlow();
+	return () => flow.internalNodes[id()];
 }
 //#endregion
 //#region src/hooks/useNodeConnections.ts
@@ -2130,24 +2596,28 @@ function useInternalNode(id) {
 * @returns an array with connections
 */
 const useNodeConnections = (params) => {
-	let { connectionLookup } = useInternalSolidFlow(), ctxNodeId = () => {
+	let { flow } = useInternalSolidFlow(), ctxNodeId = () => {
 		let id = useContext(NodeIdContext);
 		return id ? id() : "";
-	}, id = () => params().handleId, type = () => params().handleType, nodeId = () => params().id ?? ctxNodeId(), [connections, setConnections] = createSignal([]), lookupKey = () => `${nodeId()}${type() ? id() ? `-${type()}-${id()}` : `-${type()}` : ""}`, prevConnections;
-	return createEffect(() => ({ connections: connectionLookup.get(lookupKey()) }), ({ connections: nextConnections }) => {
-		areConnectionMapsEqual(nextConnections, prevConnections) || (prevConnections = nextConnections, setConnections(Array.from(nextConnections?.values() ?? [])));
+	}, 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 { nodeLookup } = useInternalSolidFlow(), prevNodesData = [];
+	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 = nodeLookup.get(nodeId)?.internals.userNode;
+			let node = flow.internalNodes[nodeId]?.internals.userNode;
 			node && nodesData.push({
 				id: node.id,
 				type: node.type,
@@ -2158,212 +2628,338 @@ function useNodesData(nodeIds) {
 	});
 }
 //#endregion
-//#region src/hooks/useSolidFlow.tsx
+//#region src/hooks/useUpdateNodeInternals.ts
 /**
-* Hook for accessing the SvelteFlow instance.
+* Hook for updating node internals. Sugar for `commands.updateNodeInternals`.
 *
 * @public
-* @returns A set of helper functions
+* @returns function for updating node internals
 */
-function useSolidFlow() {
-	let { store, actions, nodeLookup, edgeLookup, connectionLookup } = useInternalSolidFlow(), getNodeRect = (node) => {
-		let nodeToUse = isNode(node) ? node : nodeLookup.get(node.id), position = nodeToUse.parentId ? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.measured, nodeToUse.parentId, nodeLookup, store.nodeOrigin) : nodeToUse.position, nodeWithPosition = {
-			...nodeToUse,
-			position,
-			width: nodeToUse.measured?.width ?? nodeToUse.width,
-			height: nodeToUse.measured?.height ?? nodeToUse.height
-		};
-		return nodeToRect(nodeWithPosition);
-	}, updateNode = (id, nodeUpdate, options = { replace: !1 }) => {
-		actions.setNodes((nodes) => {
-			let index = nodes.findIndex((node) => node.id === id);
-			if (index === -1) return;
-			let node = nodes[index], nextNode = typeof nodeUpdate == "function" ? nodeUpdate(node) : nodeUpdate;
-			nodes[index] = options?.replace && isNode(nextNode) ? nextNode : {
-				...node,
-				...nextNode
-			};
-		});
-	}, updateEdge = (id, edgeUpdate, options = { replace: !1 }) => {
-		actions.setEdges((edges) => {
-			let index = edges.findIndex((edge) => edge.id === id);
-			if (index === -1) return;
-			let edge = edges[index], nextEdge = typeof edgeUpdate == "function" ? edgeUpdate(edge) : edgeUpdate;
-			edges[index] = options.replace && isEdge(nextEdge) ? nextEdge : {
-				...edge,
-				...nextEdge
-			};
-		});
-	}, getInternalNode = (id) => nodeLookup.get(id);
-	return {
-		zoomIn: actions.zoomIn,
-		zoomOut: actions.zoomOut,
-		getInternalNode,
-		setCenter: actions.setCenter,
-		fitView: actions.fitView,
-		getNode: (id) => getInternalNode(id)?.internals.userNode,
-		getNodes: (ids) => ids ? getElements(nodeLookup, ids) : store.nodes,
-		getEdge: (id) => edgeLookup.get(id),
-		getEdges: (ids) => ids ? getElements(edgeLookup, ids) : store.edges,
-		addNodes: (payload) => {
-			let newNodes = Array.isArray(payload) ? payload : [payload];
-			actions.setNodes((nodes) => [...nodes, ...newNodes]);
-		},
-		addEdges: (payload) => {
-			let newEdges = Array.isArray(payload) ? payload : [payload];
-			actions.setEdges((edges) => [...edges, ...newEdges]);
-		},
-		getViewport: () => snapshot(store.viewport),
-		setViewport: async (nextViewport, options) => {
-			let currentViewport = store.viewport;
-			return store.panZoom ? (await store.panZoom.setViewport({
-				x: nextViewport.x ?? currentViewport.x,
-				y: nextViewport.y ?? currentViewport.y,
-				zoom: nextViewport.zoom ?? currentViewport.zoom
-			}, options), Promise.resolve(!0)) : Promise.resolve(!1);
-		},
-		getZoom: () => store.viewport.zoom,
-		setZoom: (zoomLevel, options) => {
-			let panZoom = store.panZoom;
-			return panZoom ? panZoom.scaleTo(zoomLevel, { duration: options?.duration }) : Promise.resolve(!1);
-		},
-		fitBounds: async (bounds, options) => {
-			if (!store.panZoom) return Promise.resolve(!1);
-			let viewport = getViewportForBounds$1(bounds, store.width, store.height, store.minZoom, store.maxZoom, options?.padding ?? .1);
-			return await store.panZoom.setViewport(viewport, {
-				duration: options?.duration,
-				ease: options?.ease,
-				interpolate: options?.interpolate
-			}), Promise.resolve(!0);
-		},
-		getIntersectingNodes: (nodeOrRect, partially = !0, nodesToIntersect) => {
-			let isRect = isRectObject(nodeOrRect), nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
-			return nodeRect ? (nodesToIntersect || store.nodes).filter((n) => {
-				let internalNode = nodeLookup.get(n.id);
-				if (!internalNode || !isRect && n.id === nodeOrRect.id) return !1;
-				let currNodeRect = nodeToRect(internalNode), overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
-				return partially && overlappingArea > 0 || overlappingArea >= nodeRect.width * nodeRect.height;
-			}) : [];
-		},
-		isNodeIntersecting: (nodeOrRect, area, partially = !0) => {
-			let nodeRect = isRectObject(nodeOrRect) ? nodeOrRect : getNodeRect(nodeOrRect);
-			if (!nodeRect) return !1;
-			let overlappingArea = getOverlappingArea(nodeRect, area);
-			return partially && overlappingArea > 0 || overlappingArea >= nodeRect.width * nodeRect.height;
-		},
-		deleteElements: async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [] }) => {
-			let { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
-				nodesToRemove,
-				edgesToRemove,
-				nodes: store.nodes,
-				edges: store.edges,
-				onBeforeDelete: store.onBeforeDelete
+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",
+		"dots",
+		_props.class
+	]} cx={_props.radius} cy={_props.radius} r={_props.radius} />;
+}, LinePattern = (props) => {
+	let _props = propDefaults(props, { lineWidth: 1 });
+	return <path stroke-width={_props.lineWidth} d={`M${_props.dimensions[0] / 2} 0 V${_props.dimensions[1]} M0 ${_props.dimensions[1] / 2} H${_props.dimensions[0]}`} class={[
+		"solid-flow__background-pattern",
+		_props.variant,
+		_props.class
+	]} />;
+}, DEFAULT_SIZE = {
+	dots: 1,
+	lines: 1,
+	cross: 6
+}, Background = (props) => {
+	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];
+	return <svg data-testid="solid-flow__background" class={["solid-flow__container solid-flow__background", _props.class]} style={{
+		"--xy-background-color-props": _props.bgColor,
+		"--xy-background-pattern-color-props": _props.patternColor,
+		..._props.style
+	}}>
+      <pattern id={patternId()} x={store.viewport.x % scaledGap()[0]} y={store.viewport.y % scaledGap()[1]} width={scaledGap()[0]} height={scaledGap()[1]} patternUnits="userSpaceOnUse" patternTransform={`translate(-${patternOffset()[0]},-${patternOffset()[1]})`}>
+        <Show when={!isDots()} fallback={<DotPattern radius={scaledSize() / 2} class={_props.patternClass} />}>
+          <LinePattern class={_props.patternClass} dimensions={patternDimensions()} variant={_props.variant} lineWidth={_props.lineWidth} />
+        </Show>
+      </pattern>
+      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId()})`} />
+    </svg>;
+}, 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,
+		"--xy-controls-button-background-color-hover-props": props.bgColorHover,
+		"--xy-controls-button-color-props": props.color,
+		"--xy-controls-button-color-hover-props": props.colorHover,
+		"--xy-controls-button-border-color-props": props.borderColor
+	}).filter(([_, value]) => value !== void 0).reduce((acc, [key, value]) => (acc[key] = value, acc), {});
+	return <button type="button" class={["solid-flow__controls-button", props.class]} onClick={(e) => props.onClick?.(e)} style={style()} {...rest}>
+      {props.children}
+    </button>;
+}, Fit = () => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30">
+    <path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" />
+  </svg>, Lock = () => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
+    <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" />
+  </svg>, Minus = () => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5">
+    <path d="M0 0h32v4.2H0z" />
+  </svg>, Plus = () => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z" />
+  </svg>, Unlock = () => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
+    <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z" />
+  </svg>, Controls = (props) => {
+	let { store, actions } = useInternalSolidFlow(), _props = propDefaults(props, {
+		position: "bottom-left",
+		showZoom: !0,
+		showFitView: !0,
+		showLock: !0,
+		orientation: "vertical"
+	}), rest = omit(_props, "class", "position", "showZoom", "showFitView", "showLock", "orientation", "fitViewOptions", "beforeControls", "afterControls", "buttonBgColor", "buttonBgColorHover", "buttonColor", "buttonColorHover", "buttonBorderColor", "style", "children"), getMinZoomReached = () => store.viewport.zoom <= store.minZoom, getMaxZoomReached = () => store.viewport.zoom >= store.maxZoom, getIsInteractive = () => store.nodesDraggable || store.nodesConnectable || store.elementsSelectable, onZoomInHandler = () => {
+		actions.zoomIn();
+	}, onZoomOutHandler = () => {
+		actions.zoomOut();
+	}, onFitViewHandler = () => {
+		actions.fitView(_props.fitViewOptions);
+	}, onToggleInteractivity = () => {
+		let newValue = !getIsInteractive();
+		actions.setNodesDraggable(newValue), actions.setNodesConnectable(newValue), actions.setElementsSelectable(newValue);
+	}, buttonProps = () => ({
+		bgColor: _props.buttonBgColor,
+		bgColorHover: _props.buttonBgColorHover,
+		color: _props.buttonColor,
+		colorHover: _props.buttonColorHover,
+		borderColor: _props.buttonBorderColor
+	});
+	return <Panel class={[
+		"solid-flow__controls",
+		_props.orientation,
+		_props.class
+	]} position={_props.position} data-testid="solid-flow__controls" aria-label={store.ariaLabelConfig["controls.ariaLabel"]} style={_props.style} {...rest}>
+      {_props.beforeControls}
+      <Show when={_props.showZoom}>
+        <>
+          <ControlButton onClick={onZoomInHandler} class="solid-flow__controls-zoomin" title={store.ariaLabelConfig["controls.zoomIn.ariaLabel"]} aria-label={store.ariaLabelConfig["controls.zoomIn.ariaLabel"]} disabled={getMaxZoomReached()} {...buttonProps()}>
+            <Plus />
+          </ControlButton>
+          <ControlButton onClick={onZoomOutHandler} class="solid-flow__controls-zoomout" title={store.ariaLabelConfig["controls.zoomOut.ariaLabel"]} aria-label={store.ariaLabelConfig["controls.zoomOut.ariaLabel"]} disabled={getMinZoomReached()} {...buttonProps()}>
+            <Minus />
+          </ControlButton>
+        </>
+      </Show>
+      <Show when={_props.showFitView}>
+        <ControlButton class="solid-flow__controls-fitview" onClick={onFitViewHandler} title={store.ariaLabelConfig["controls.fitView.ariaLabel"]} aria-label={store.ariaLabelConfig["controls.fitView.ariaLabel"]} {...buttonProps()}>
+          <Fit />
+        </ControlButton>
+      </Show>
+      <Show when={_props.showLock}>
+        <ControlButton class="solid-flow__controls-interactive" onClick={onToggleInteractivity} title={store.ariaLabelConfig["controls.interactive.ariaLabel"]} aria-label={store.ariaLabelConfig["controls.interactive.ariaLabel"]} {...buttonProps()}>
+          <Show when={getIsInteractive()} fallback={<Lock />}>
+            <Unlock />
+          </Show>
+        </ControlButton>
+      </Show>
+      {_props.children}
+      {_props.afterControls}
+    </Panel>;
+}, MiniMapNode = (props) => {
+	let _props = propDefaults(props, {
+		borderRadius: 5,
+		width: 0,
+		height: 0
+	}), style = () => Object.entries({
+		fill: _props.color,
+		stroke: _props.strokeColor,
+		"stroke-width": _props.strokeWidth
+	}).filter(([_, value]) => value !== void 0).reduce((acc, [key, value]) => (acc[key] = value, acc), {});
+	return <rect class={[
+		"solid-flow__minimap-node",
+		{ selected: !!_props.selected },
+		_props.class
+	]} x={_props.x} y={_props.y} rx={_props.borderRadius} ry={_props.borderRadius} width={_props.width} height={_props.height} shape-rendering={_props.shapeRendering} style={style()} />;
+}, getAttrFunction = (func) => func instanceof Function ? func : () => func, MiniMap = (props) => {
+	let { store, nodeLookup } = useInternalSolidFlow(), _props = propDefaults(props, {
+		position: "bottom-right",
+		nodeClass: "",
+		nodeStrokeColor: "transparent",
+		pannable: !0,
+		zoomable: !0,
+		width: 200,
+		height: 150,
+		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 = () => ({
+		x: -store.viewport.x / store.viewport.zoom,
+		y: -store.viewport.y / store.viewport.zoom,
+		width: store.width / store.viewport.zoom,
+		height: store.height / store.viewport.zoom
+	}), getBoundingRect = () => {
+		let viewBB = getViewBB();
+		return nodeLookup.size > 0 ? getBoundsOfRects(getInternalNodesBounds(nodeLookup), viewBB) : viewBB;
+	}, getScaledWidth = () => getBoundingRect().width / _props.width, getScaledHeight = () => getBoundingRect().height / _props.height, getViewScale = () => Math.max(getScaledWidth(), getScaledHeight()), getViewWidth = () => getViewScale() * _props.width, getViewHeight = () => getViewScale() * _props.height, getOffset = () => 5 * getViewScale(), getX = () => {
+		let boundingRect = getBoundingRect();
+		return boundingRect.x - (getViewWidth() - boundingRect.width) / 2 - getOffset();
+	}, getY = () => {
+		let boundingRect = getBoundingRect();
+		return boundingRect.y - (getViewHeight() - boundingRect.height) / 2 - getOffset();
+	}, getViewboxWidth = () => getViewWidth() + getOffset() * 2, getViewboxHeight = () => getViewHeight() + getOffset() * 2, strokeWidth = () => _props.maskStrokeWidth ? _props.maskStrokeWidth * getViewScale() : void 0, prevNodeIds = [], nodeIds = () => {
+		let currentNodeIds = store.nodes.map((node) => node.id), currentSet = new Set(currentNodeIds);
+		return (prevNodeIds.length !== currentNodeIds.length || !prevNodeIds.every((id) => currentSet.has(id))) && (prevNodeIds = currentNodeIds), prevNodeIds;
+	};
+	return <Panel position={_props.position} data-testid="solid-flow__minimap" class={["solid-flow__minimap", _props.class]} style={{
+		"--xy-minimap-background-color-props": _props.bgColor,
+		..._props.style
+	}} {...paneProps}>
+      <Show when={store.panZoom}>
+        {(panZoom) => {
+		let [ref, setRef] = createSignal(), [minimap, setMinimap] = createSignal();
+		return createEffect(() => ({
+			el: ref(),
+			panZoom: panZoom()
+		}), ({ el, panZoom }) => {
+			if (!el) return;
+			let instance = XYMinimap({
+				domNode: el,
+				panZoom,
+				getTransform: () => store.transform,
+				getViewScale
 			});
-			if (matchingEdges) {
-				let remmainingEdges = store.edges.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id));
-				store.onEdgesDelete?.(matchingEdges), actions.setEdges(() => remmainingEdges);
+			return setMinimap(instance), () => {
+				instance.destroy();
+			};
+		}), createEffect(() => ({
+			instance: minimap(),
+			options: {
+				translateExtent: store.translateExtent,
+				width: store.width,
+				height: store.height,
+				inversePan: _props.inversePan,
+				zoomStep: _props.zoomStep,
+				pannable: _props.pannable,
+				zoomable: _props.zoomable
 			}
-			if (matchingNodes) {
-				let remmainingNodes = store.nodes.filter((node) => !matchingNodes.some(({ id }) => id === node.id));
-				store.onNodesDelete?.(matchingNodes), actions.setNodes(() => remmainingNodes);
+		}), ({ instance, options }) => {
+			instance?.update(options);
+		}), <svg ref={setRef} width={_props.width} height={_props.height} viewBox={`${getX()} ${getY()} ${getViewboxWidth()} ${getViewboxHeight()}`} class="solid-flow__minimap-svg" role="img" aria-labelledby={labelledBy()} style={{
+			"--xy-minimap-mask-background-color-props": _props.maskColor,
+			"--xy-minimap-mask-stroke-color-props": _props.maskStrokeColor,
+			"--xy-minimap-mask-stroke-width-props": strokeWidth()
+		}}>
+              <title id={labelledBy()}>{store.ariaLabelConfig["minimap.ariaLabel"]}</title>
+              <For keyed={!1} each={nodeIds()}>
+                {(nodeId) => {
+			let node = createMemo(() => nodeLookup.get(nodeId())), nodeVisible = () => !!(node() && nodeHasDimensions(node()) && !node().hidden);
+			return <Show when={nodeVisible() && getNodeDimensions(node())}>
+                      {(nodeDimensions) => <MiniMapNode x={node().internals.positionAbsolute.x} y={node().internals.positionAbsolute.y} borderRadius={_props.nodeBorderRadius} strokeWidth={_props.nodeStrokeWidth} shapeRendering={shapeRendering()} width={nodeDimensions().width} height={nodeDimensions().height} selected={node().selected} color={nodeColorFunc()?.call(null, node())} strokeColor={nodeStrokeColorFunc().call(null, node())} class={nodeClassFunc().call(null, node())} />}
+                    </Show>;
+		}}
+              </For>
+              <path class="solid-flow__minimap-mask" d={`M${getX() - getOffset()},${getY() - getOffset()}h${getViewboxWidth() + getOffset() * 2}v${getViewboxHeight() + getOffset() * 2}h${-getViewboxWidth() - getOffset() * 2}z
+            M${getViewBB().x},${getViewBB().y}h${getViewBB().width}v${getViewBB().height}h${-getViewBB().width}z`} fill-rule="evenodd" pointer-events="none" />
+            </svg>;
+	}}
+      </Show>
+    </Panel>;
+}, ResizeControl = (props) => {
+	let _props = propDefaults(props, {
+		variant: "handle",
+		minWidth: 10,
+		minHeight: 10,
+		maxWidth: Number.MAX_VALUE,
+		maxHeight: Number.MAX_VALUE,
+		keepAspectRatio: !1,
+		autoScale: !0,
+		style: {}
+	}), rest = omit(_props, "nodeId", "variant", "position", "minWidth", "minHeight", "maxWidth", "maxHeight", "keepAspectRatio", "autoScale", "onResizeStart", "onResize", "onResizeEnd", "shouldResize", "class", "children", "color", "style"), [resizeControlRef, setResizeControlRef] = createSignal(), { store, nodeLookup, actions } = useInternalSolidFlow(), ctxNodeId = useNodeId(), nodeId = () => _props.nodeId ?? ctxNodeId(), isLineVariant = () => _props.variant === "line", controlPosition = () => _props.position ?? (isLineVariant() ? "right" : "bottom-right"), positionClassNames = () => controlPosition().split("-"), [resizer, setResizer] = createSignal();
+	return createEffect(() => resizeControlRef(), (el) => {
+		if (!el) return;
+		let instance = XYResizer({
+			domNode: el,
+			nodeId: nodeId(),
+			getStoreItems: () => ({
+				nodeLookup,
+				transform: store.transform,
+				snapGrid: store.snapGrid,
+				snapToGrid: !!store.snapGrid,
+				nodeOrigin: store.nodeOrigin,
+				paneDomNode: store.domNode
+			}),
+			onChange: (change, childChanges) => {
+				let changes = /* @__PURE__ */ new Map(), position = change.x && change.y ? {
+					x: change.x,
+					y: change.y
+				} : void 0;
+				changes.set(nodeId(), {
+					...change,
+					position
+				});
+				for (let childChange of childChanges) changes.set(childChange.id, { position: childChange.position });
+				actions.setNodes((nodes) => {
+					for (let node of nodes) {
+						let nodeChange = changes.get(node.id);
+						nodeChange && (node.width = nodeChange.width, node.height = nodeChange.height, node.position = {
+							x: nodeChange.position?.x ?? node.position.x,
+							y: nodeChange.position?.y ?? node.position.y
+						});
+					}
+				});
 			}
-			return {
-				deletedNodes: matchingNodes,
-				deletedEdges: matchingEdges
-			};
-		},
-		screenToFlowPosition: (position, options = { snapToGrid: !0 }) => {
-			if (!store.domNode) return position;
-			let _snapGrid = options.snapToGrid ? store.snapGrid : !1, { x, y, zoom } = store.viewport, { x: domX, y: domY } = store.domNode.getBoundingClientRect(), correctedPosition = {
-				x: position.x - domX,
-				y: position.y - domY
-			};
-			return pointToRendererPoint(correctedPosition, [
-				x,
-				y,
-				zoom
-			], _snapGrid !== null, _snapGrid || [1, 1]);
-		},
-		/**
-		*
-		* @param position
-		* @returns
-		*/
-		flowToScreenPosition: (position) => {
-			if (!store.domNode) return position;
-			let { x, y, zoom } = store.viewport, { x: domX, y: domY } = store.domNode.getBoundingClientRect(), rendererPosition = rendererPointToPoint(position, [
-				x,
-				y,
-				zoom
-			]);
-			return {
-				x: rendererPosition.x + domX,
-				y: rendererPosition.y + domY
-			};
-		},
-		toObject: () => structuredClone({
-			nodes: [...snapshot(store.nodes)],
-			edges: [...snapshot(store.edges)],
-			viewport: { ...snapshot(store.viewport) }
-		}),
-		updateNode,
-		updateNodeData: (id, dataUpdate, options) => {
-			let node = nodeLookup.get(id)?.internals.userNode;
-			if (!node) return;
-			let nextData = typeof dataUpdate == "function" ? dataUpdate(node) : dataUpdate;
-			updateNode(id, (node) => ({
-				...node,
-				data: options?.replace ? nextData : {
-					...node.data,
-					...nextData
-				}
-			}));
-		},
-		updateEdge,
-		getNodesBounds: (nodes) => getNodesBounds$1(nodes, {
-			nodeLookup,
-			nodeOrigin: store.nodeOrigin
-		}),
-		getHandleConnections: ({ type, id, nodeId }) => Array.from(connectionLookup.get(`${nodeId}-${type}-${id ?? null}`)?.values() ?? [])
-	};
-}
-function getElements(lookup, ids) {
-	let result = [];
-	for (let id of ids) {
-		let item = lookup.get(id);
-		if (item) {
-			let element = "internals" in item ? item.internals?.userNode : item;
-			result.push(element);
-		}
-	}
-	return result;
-}
-//#endregion
-//#region src/hooks/useUpdateNodeInternals.ts
-/**
-* Hook for updating node internals.
-*
-* @public
-* @returns function for updating node internals
-*/
-function useUpdateNodeInternals() {
-	let { store, actions } = useInternalSolidFlow();
-	return (id) => {
-		let updateIds = Array.isArray(id) ? id : [id], updates = [];
-		for (let updateId of updateIds) {
-			let nodeElement = store.domNode?.querySelector(`.solid-flow__node[data-id="${updateId}"]`);
-			nodeElement && updates.push([updateId, {
-				id: updateId,
-				nodeElement,
-				force: !0
-			}]);
+		});
+		return setResizer(instance), () => {
+			instance.destroy();
+		};
+	}), createEffect(() => ({
+		instance: resizer(),
+		options: {
+			controlPosition: controlPosition(),
+			boundaries: {
+				minWidth: _props.minWidth,
+				minHeight: _props.minHeight,
+				maxWidth: _props.maxWidth,
+				maxHeight: _props.maxHeight
+			},
+			keepAspectRatio: !!_props.keepAspectRatio,
+			onResizeStart: _props.onResizeStart,
+			onResize: _props.onResize,
+			onResizeEnd: _props.onResizeEnd,
+			shouldResize: _props.shouldResize
 		}
-		actions.requestUpdateNodeInternals(updates);
-	};
-}
-//#endregion
-//#region src/components/graph/plugins/NodeToolbar.tsx
-const NodeToolbar = (props) => {
+	}), ({ instance, options }) => {
+		instance?.update(options);
+	}), <div ref={setResizeControlRef} class={[
+		"solid-flow__resize-control",
+		_props.variant,
+		store.noDragClass,
+		...positionClassNames(),
+		_props.class
+	]} style={{
+		"border-color": isLineVariant() ? _props.color : void 0,
+		"background-color": isLineVariant() ? void 0 : _props.color,
+		scale: isLineVariant() || !_props.autoScale ? void 0 : Math.max(1 / store.viewport.zoom, 1),
+		..._props.style
+	}} {...rest}>
+      {_props.children}
+    </div>;
+}, NodeResizer = (props) => {
+	let _props = propDefaults(props, {
+		autoScale: !0,
+		visible: !0
+	}), rest = omit(props, "handleClass", "handleStyle", "lineClass", "lineStyle");
+	return <Show when={_props.visible}>
+      <For each={XY_RESIZER_LINE_POSITIONS}>
+        {(position) => <ResizeControl variant="line" position={position} class={props.lineClass} style={props.lineStyle} {...rest} />}
+      </For>
+      <For each={XY_RESIZER_HANDLE_POSITIONS}>
+        {(position) => <ResizeControl position={position} class={props.handleClass} style={props.handleStyle} {...rest} />}
+      </For>
+    </Show>;
+}, 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",
@@ -2397,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, 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, 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 };