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

package/dist/index/index.js

@@ -1,8 +1,7 @@
 import { Dynamic, Portal, addEvent, claimElement, className, createComponent, delegateEvents, effect, insert, isServer, memo, mergeProps, ref, setAttribute, setStyleProperty, spread, style, template } from "@solidjs/web";
-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 { 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 { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, Position as Position$1, ResizeControlVariant, SelectionMode, SelectionMode as SelectionMode$1, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdge, addEdge as addEdge$1, areConnectionMapsEqual, calcAutoPan, calculateNodePosition, clampPosition, clampPositionToParent, createDevWarn, createMarkerIds, elementSelectionKeys, evaluateAbsolutePosition, fitViewport, getBezierEdgeCenter, getBezierPath, getBezierPath as getBezierPath$1, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getDimensions, getEdgeCenter, getEdgePosition, getEdgeToolbarTransform, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHostForElement, getIncomers, getInternalNodesBounds, getMarkerId, getNodeDimensions, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesBounds as getNodesBounds$1, getNodesInside, getOutgoers, getOverlappingArea, getSmoothStepPath, getSmoothStepPath as getSmoothStepPath$1, getStraightPath, getStraightPath as getStraightPath$1, getViewportForBounds, getViewportForBounds as getViewportForBounds$1, handleConnectionChange, infiniteExtent, initialConnection, isCoordinateExtent, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isNodeBase, isNumeric, isRectObject, mergeAriaLabelConfig, nodeHasDimensions, nodeToRect, panBy, pointToRendererPoint, rendererPointToPoint, shallowNodeData, snapPosition } from "@xyflow/system";
 import { createEventListener, createEventListenerMap } from "@solid-primitives/event-listener";
 //#region src/components/contexts/edgeId.tsx
 const EdgeIdContext = createContext(null);
@@ -280,7 +279,7 @@ const EdgeReconnectAnchor = (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" ? {
@@ -825,689 +824,335 @@ const EdgeWrapper = (props) => {
 			return 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;
-}
+}, 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/")
+});
 //#endregion
-//#region src/components/graph/handle/Handle.tsx
-var _tmpl$$29 = /* @__PURE__ */ template("<div>");
-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);
+//#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;
+	};
+	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 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);
 		}
-		prevConnections = connections ?? /* @__PURE__ */ new Map();
+		for (let id of assigned.keys()) seen.has(id) || (assigned.delete(id), delete draft[id]);
+	}, {}, {
+		key: null,
+		shallow: !0
 	});
-	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;
+};
+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
+	};
+}
+//#endregion
+//#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 participates only while onlyRenderVisibleElements is active —
+* panning must not touch edge rows otherwise.
+*
+* 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));
 		}
-		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);
-	var _el$ = _tmpl$$29();
-	return spread(_el$, mergeProps(rest, {
-		role: "button",
-		get "aria-label"() {
-			return store.ariaLabelConfig["handle.ariaLabel"];
-		},
-		tabindex: -1,
-		get "data-handleid"() {
-			return handleId();
-		},
-		get "data-nodeid"() {
-			return nodeId();
+		for (let id of assigned.keys()) seen.has(id) || (assigned.delete(id), delete draft[id]);
+	}, {}, {
+		key: null,
+		shallow: !0
+	});
+}, buildRow = (source, edge) => {
+	let sourceNode = source.nodeLookup.get(edge.source), targetNode = source.nodeLookup.get(edge.target);
+	if (!sourceNode || !targetNode) return source.nodeLookup.size, null;
+	if (source.onlyRenderVisibleElements && !isEdgeVisible({
+		sourceNode,
+		targetNode,
+		width: source.width ?? 0,
+		height: source.height ?? 0,
+		transform: source.transform
+	})) return null;
+	let edgePosition = getEdgePosition({
+		id: edge.id,
+		sourceNode,
+		targetNode,
+		sourceHandle: edge.sourceHandle || null,
+		targetHandle: edge.targetHandle || null,
+		connectionMode: source.connectionMode,
+		onError: source.onError
+	});
+	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 "data-handlepos"() {
-			return _props.position;
+		get measurements() {
+			return measurementsStore;
 		},
-		get "data-id"() {
-			return `${store.id}-${nodeId()}-${_props.id || null}-${_props.type}`;
+		get nodeOrigin() {
+			return config().nodeOrigin;
 		},
-		get onClick() {
-			return store.clickConnect ? onClick : void 0;
+		get nodeExtent() {
+			return config().nodeExtent;
 		},
-		onPointerDown,
-		get style() {
-			return _props.style;
+		get elevateNodesOnSelect() {
+			return config().elevateNodesOnSelect;
 		},
-		get class() {
-			return [
-				"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()
-				}
-			];
+		get zIndexMode() {
+			return config().zIndexMode;
 		}
-	}), !0), insert(_el$, () => _props.children), _el$;
-}, DefaultNode = (props) => {
-	let _props = propDefaults(props, {
-		targetPosition: Position$1.Top,
-		sourcePosition: Position$1.Bottom
-	});
-	return [
-		createComponent(Handle, {
-			type: "target",
-			get position() {
-				return _props.targetPosition;
-			},
-			get isConnectable() {
-				return _props.isConnectable;
-			}
-		}),
-		memo(() => props.data.label),
-		createComponent(Handle, {
-			type: "source",
-			get position() {
-				return _props.sourcePosition;
-			},
-			get isConnectable() {
-				return _props.isConnectable;
-			}
-		})
-	];
-};
-//#endregion
-//#region src/components/graph/node/GroupNode.tsx
-var _tmpl$$28 = /* @__PURE__ */ template("<div style=position:absolute;left:0;top:0>");
-const GroupNode = (props) => (() => {
-	var _el$ = _tmpl$$28();
-	return effect(() => ({
-		e: toPxString(props.width),
-		t: toPxString(props.height)
-	}), ({ e, t }, _p$) => {
-		e !== _p$?.e && setStyleProperty(_el$, "width", e), t !== _p$?.t && setStyleProperty(_el$, "height", t);
-	}), _el$;
-})(), InputNode = (props) => {
-	let _props = propDefaults(props, { sourcePosition: Position$1.Bottom });
-	return [memo(() => props.data?.label), createComponent(Handle, {
-		type: "source",
-		get position() {
-			return _props.sourcePosition;
-		},
-		get isConnectable() {
-			return _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
-var _tmpl$$27 = /* @__PURE__ */ template("<div>");
-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 ?? {}
-	});
-	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 createComponent(Show, {
-		get when() {
-			return !node().hidden;
-		},
-		get children() {
-			var _el$ = _tmpl$$27();
-			return ref(() => setNodeRef, _el$), spread(_el$, mergeProps({
-				get "data-id"() {
-					return node().id;
-				},
-				get class() {
-					return [
-						"solid-flow__node",
-						`solid-flow__node-${nodeType()}`,
-						{
-							connectable: !!connectable(),
-							draggable: !!draggable(),
-							dragging: dragging(),
-							nopan: !!draggable(),
-							parent: isParentNode(),
-							selectable: !!selectable(),
-							selected: !!node().selected
-						},
-						node().class
-					];
-				},
-				get style() {
-					return 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(),
-				get tabindex() {
-					return focusable() ? 0 : void 0;
-				},
-				get role() {
-					return node().ariaRole ?? (focusable() ? "group" : void 0);
-				},
-				"aria-roledescription": "node",
-				get "aria-describedby"() {
-					return store.disableKeyboardA11y ? void 0 : `${ARIA_NODE_DESC_KEY}-${store.id}`;
-				}
-			}, () => node().domAttributes), !0), insert(_el$, createComponent(NodeIdContext, {
-				value: nodeId,
-				get children() {
-					return createComponent(NodeConnectableContext, {
-						value: connectable,
-						get children() {
-							return createComponent(Dynamic, {
-								get component() {
-									return nodeComponent();
-								},
-								get data() {
-									return node().data;
-								},
-								get id() {
-									return node().id;
-								},
-								get selected() {
-									return !!node().selected;
-								},
-								get selectable() {
-									return selectable();
-								},
-								get deletable() {
-									return deletable();
-								},
-								get sourcePosition() {
-									return node().sourcePosition;
-								},
-								get targetPosition() {
-									return node().targetPosition;
-								},
-								get zIndex() {
-									return node().internals.z;
-								},
-								get dragging() {
-									return dragging();
-								},
-								get draggable() {
-									return draggable();
-								},
-								get dragHandle() {
-									return node().dragHandle;
-								},
-								get parentId() {
-									return node().parentId;
-								},
-								get type() {
-									return nodeType();
-								},
-								get isConnectable() {
-									return connectable();
-								},
-								get positionAbsoluteX() {
-									return node().internals.positionAbsolute.x;
-								},
-								get positionAbsoluteY() {
-									return node().internals.positionAbsolute.y;
-								},
-								get width() {
-									return node().width;
-								},
-								get height() {
-									return node().height;
-								}
-							});
-						}
-					});
-				}
-			})), _el$;
-		}
-	});
-}, OutputNode = (props) => {
-	let _props = propDefaults(props, { targetPosition: Position$1.Top });
-	return [createComponent(Handle, {
-		type: "target",
-		get position() {
-			return _props.targetPosition;
-		},
-		get isConnectable() {
-			return _props.isConnectable;
-		}
-	}), memo(() => 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) => {
@@ -1553,7 +1198,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();
@@ -1570,7 +1215,7 @@ const InitialNodeTypesMap = {
 		},
 		get edgeTypes() {
 			return {
-				...InitialEdgeTypesMap,
+				...initialEdgeTypes,
 				...this._edgeTypes
 			};
 		},
@@ -1595,382 +1240,1213 @@ const InitialNodeTypesMap = {
 		get edges() {
 			return edgesStore;
 		},
-		get nodes() {
-			return nodesStore;
+		get nodes() {
+			return nodesStore;
+		},
+		get nodesConnectable() {
+			return nodesConnectable();
+		},
+		get nodesDraggable() {
+			return nodesDraggable();
+		},
+		get nodeTypes() {
+			return {
+				...initialNodeTypes,
+				...this._nodeTypes
+			};
+		},
+		get panZoom() {
+			return panZoom();
+		},
+		get selectedNodes() {
+			return nodesStore.filter((node) => node.selected);
+		},
+		get selectedEdges() {
+			return edgesStore.filter((edge) => edge.selected);
+		},
+		get selectionRect() {
+			return selectionRect();
+		},
+		get selectionRectMode() {
+			return selectionRectMode();
+		},
+		get snapGrid() {
+			return snapGrid();
+		},
+		get viewport() {
+			return viewportStore;
+		},
+		get viewportInitialized() {
+			return panZoom() !== null;
+		},
+		get nodesInitialized() {
+			return nodesInitialized();
+		},
+		get visibleEdgeIds() {
+			return visibleEdgeIds();
+		},
+		get visibleNodeIds() {
+			return visibleNodeIds();
+		},
+		get visibleNodesMap() {
+			return visibleNodesMap();
+		},
+		get transform() {
+			return transform();
+		},
+		get translateExtent() {
+			return translateExtent();
+		},
+		get width() {
+			return width();
+		},
+		get selectionKeyPressed() {
+			return selectionKeyPressed();
+		},
+		get multiselectionKeyPressed() {
+			return multiselectionKeyPressed();
+		},
+		get deleteKeyPressed() {
+			return deleteKeyPressed();
+		},
+		get panActivationKeyPressed() {
+			return panActivationKeyPressed();
+		},
+		get zoomActivationKeyPressed() {
+			return zoomActivationKeyPressed();
+		}
+	}), visibleNodesMap = createMemo(() => nodeLookup), 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 onlyRenderVisibleElements() {
+			return store.onlyRenderVisibleElements;
+		},
+		get width() {
+			return store.width;
+		},
+		get height() {
+			return store.height;
+		},
+		get transform() {
+			return store.transform;
+		},
+		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);
 		},
-		get nodesConnectable() {
-			return nodesConnectable();
+		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;
 		},
-		get nodesDraggable() {
-			return nodesDraggable();
+		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]);
 		},
-		get nodeTypes() {
+		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 {
-				...InitialNodeTypesMap,
-				...this._nodeTypes
+				x: rendererPosition.x + domX,
+				y: rendererPosition.y + domY
 			};
 		},
-		get panZoom() {
-			return panZoom();
+		addNodes: (payload) => {
+			let newNodes = Array.isArray(payload) ? payload : [payload];
+			setNodesStore((nodes) => [...nodes, ...newNodes]);
 		},
-		get selectedNodes() {
-			return nodesStore.filter((node) => node.selected);
+		addEdges: (payload) => {
+			let newEdges = Array.isArray(payload) ? payload : [payload];
+			setEdgesStore((edges) => [...edges, ...newEdges]);
 		},
-		get selectedEdges() {
-			return edgesStore.filter((edge) => edge.selected);
+		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
+				}
+			}));
 		},
-		get selectionRect() {
-			return selectionRect();
+		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
+				};
+			});
 		},
-		get selectionRectMode() {
-			return selectionRectMode();
+		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
+			};
 		},
-		get snapGrid() {
-			return snapGrid();
+		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;
+			}) : [];
 		},
-		get viewport() {
-			return viewportStore;
+		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;
 		},
-		get viewportInitialized() {
-			return panZoom() !== null;
+		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);
 		},
-		get nodesInitialized() {
-			return nodesInitialized();
+		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
+		}
+	};
+}, 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
+var _tmpl$$29 = /* @__PURE__ */ template("<div>");
+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);
+	var _el$ = _tmpl$$29();
+	return spread(_el$, mergeProps(rest, {
+		role: "button",
+		get "aria-label"() {
+			return store.ariaLabelConfig["handle.ariaLabel"];
 		},
-		get visibleEdgeIds() {
-			return visibleEdgeIds();
+		tabindex: -1,
+		get "data-handleid"() {
+			return handleId();
 		},
-		get visibleNodeIds() {
-			return visibleNodeIds();
+		get "data-nodeid"() {
+			return nodeId();
 		},
-		get visibleNodesMap() {
-			return visibleNodesMap();
+		get "data-handlepos"() {
+			return _props.position;
 		},
-		get transform() {
-			return transform();
+		get "data-id"() {
+			return `${store.id}-${nodeId()}-${_props.id || null}-${_props.type}`;
 		},
-		get translateExtent() {
-			return translateExtent();
+		get onClick() {
+			return store.clickConnect ? onClick : void 0;
 		},
-		get width() {
-			return width();
+		onPointerDown,
+		get style() {
+			return _props.style;
 		},
-		get selectionKeyPressed() {
-			return selectionKeyPressed();
+		get class() {
+			return [
+				"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()
+				}
+			];
+		}
+	}), !0), insert(_el$, () => _props.children), _el$;
+}, DefaultNode = (props) => {
+	let _props = propDefaults(props, {
+		targetPosition: Position$1.Top,
+		sourcePosition: Position$1.Bottom
+	});
+	return [
+		createComponent(Handle, {
+			type: "target",
+			get position() {
+				return _props.targetPosition;
+			},
+			get isConnectable() {
+				return _props.isConnectable;
+			}
+		}),
+		memo(() => props.data.label),
+		createComponent(Handle, {
+			type: "source",
+			get position() {
+				return _props.sourcePosition;
+			},
+			get isConnectable() {
+				return _props.isConnectable;
+			}
+		})
+	];
+};
+//#endregion
+//#region src/components/graph/node/GroupNode.tsx
+var _tmpl$$28 = /* @__PURE__ */ template("<div style=position:absolute;left:0;top:0>");
+const GroupNode = (props) => (() => {
+	var _el$ = _tmpl$$28();
+	return effect(() => ({
+		e: toPxString(props.width),
+		t: toPxString(props.height)
+	}), ({ e, t }, _p$) => {
+		e !== _p$?.e && setStyleProperty(_el$, "width", e), t !== _p$?.t && setStyleProperty(_el$, "height", t);
+	}), _el$;
+})(), InputNode = (props) => {
+	let _props = propDefaults(props, { sourcePosition: Position$1.Bottom });
+	return [memo(() => props.data?.label), createComponent(Handle, {
+		type: "source",
+		get position() {
+			return _props.sourcePosition;
 		},
-		get multiselectionKeyPressed() {
-			return multiselectionKeyPressed();
+		get isConnectable() {
+			return _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
+var _tmpl$$27 = /* @__PURE__ */ template("<div>");
+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) } : {}
+		};
+	}, style = () => ({
+		"z-index": node().internals.z,
+		transform: transform(),
+		visibility: nodeHasDimensions(node()) ? "visible" : "hidden",
+		...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
+			});
 		},
-		get deleteKeyPressed() {
-			return deleteKeyPressed();
+		onDragStart: (event, _, targetNode, nodes) => {
+			props.onNodeDragStart?.({
+				event,
+				targetNode,
+				nodes
+			});
 		},
-		get panActivationKeyPressed() {
-			return panActivationKeyPressed();
+		onDragStop: (event, _, targetNode, nodes) => {
+			props.onNodeDragStop?.({
+				event,
+				targetNode,
+				nodes
+			});
+		}
+	}));
+	return createComponent(Show, {
+		get when() {
+			return !node().hidden;
 		},
-		get zoomActivationKeyPressed() {
-			return zoomActivationKeyPressed();
+		get children() {
+			var _el$ = _tmpl$$27();
+			return ref(() => setNodeRef, _el$), spread(_el$, mergeProps({
+				get "data-id"() {
+					return node().id;
+				},
+				get class() {
+					return [
+						"solid-flow__node",
+						`solid-flow__node-${nodeType()}`,
+						{
+							connectable: !!connectable(),
+							draggable: !!draggable(),
+							dragging: dragging(),
+							nopan: !!draggable(),
+							parent: isParentNode(),
+							selectable: !!selectable(),
+							selected: !!node().selected
+						},
+						node().class
+					];
+				},
+				get style() {
+					return 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(),
+				get tabindex() {
+					return focusable() ? 0 : void 0;
+				},
+				get role() {
+					return node().ariaRole ?? (focusable() ? "group" : void 0);
+				},
+				"aria-roledescription": "node",
+				get "aria-describedby"() {
+					return store.disableKeyboardA11y ? void 0 : `${ARIA_NODE_DESC_KEY}-${store.id}`;
+				}
+			}, () => node().domAttributes), !0), insert(_el$, createComponent(NodeIdContext, {
+				value: nodeId,
+				get children() {
+					return createComponent(NodeConnectableContext, {
+						value: connectable,
+						get children() {
+							return createComponent(Dynamic, {
+								get component() {
+									return nodeComponent();
+								},
+								get data() {
+									return node().data;
+								},
+								get id() {
+									return node().id;
+								},
+								get selected() {
+									return !!node().selected;
+								},
+								get selectable() {
+									return selectable();
+								},
+								get deletable() {
+									return deletable();
+								},
+								get sourcePosition() {
+									return node().sourcePosition;
+								},
+								get targetPosition() {
+									return node().targetPosition;
+								},
+								get zIndex() {
+									return node().internals.z;
+								},
+								get dragging() {
+									return dragging();
+								},
+								get draggable() {
+									return draggable();
+								},
+								get dragHandle() {
+									return node().dragHandle;
+								},
+								get parentId() {
+									return node().parentId;
+								},
+								get type() {
+									return nodeType();
+								},
+								get isConnectable() {
+									return connectable();
+								},
+								get positionAbsoluteX() {
+									return node().internals.positionAbsolute.x;
+								},
+								get positionAbsoluteY() {
+									return node().internals.positionAbsolute.y;
+								},
+								get width() {
+									return node().width;
+								},
+								get height() {
+									return node().height;
+								}
+							});
+						}
+					});
+				}
+			})), _el$;
 		}
-	}), 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]);
-		});
-	}, 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);
-		});
-	}, pendingEntries, requestUpdateNodeInternals = (updateEntries) => {
-		if (pendingEntries) {
-			pendingEntries.push(...updateEntries);
-			return;
+	});
+}, OutputNode = (props) => {
+	let _props = propDefaults(props, { targetPosition: Position$1.Top });
+	return [createComponent(Handle, {
+		type: "target",
+		get position() {
+			return _props.targetPosition;
+		},
+		get isConnectable() {
+			return _props.isConnectable;
 		}
-		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);
-		});
-	}, 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
+	}), memo(() => props.data?.label)];
+};
+//#endregion
+//#region src/data/xyflow.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;
 		}
-	}), ({ 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
+		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
+		});
+	}
+	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
 				}
-			};
-			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);
-			}
-			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
+			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
+				}
 			});
-		}, () => {}), onCleanup(() => {
-			edgeLookup.delete(edge.id), layoutedEdgesMap.delete(edge.id), removeConnectionFromLookup("source", targetKey, connectionLookup, sourceNodeId, sourceHandle), removeConnectionFromLookup("target", sourceKey, connectionLookup, targetNodeId, targetHandle);
+		}
+		(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)
+			}
 		});
-	}), () => {}), 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,
+	}), changes;
+}
+//#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
+}, 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 { 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());
+		});
+	};
+	return actions.setMeasureRequester(requestUpdateNodeInternals), {
+		...state,
 		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();
-			}
+			...actions,
+			requestUpdateNodeInternals
 		}
 	};
 }, SolidFlowContext = createContext(null);
@@ -2139,7 +2615,7 @@ const isSetEqual = (a, b) => {
 	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) => {
@@ -2185,9 +2661,9 @@ const isSetEqual = (a, b) => {
 		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);
 			}
 		}
@@ -2793,7 +3269,7 @@ var _tmpl$$8 = /* @__PURE__ */ template("<div>");
 * The toolbar does not scale with the viewport so that its content is always legible.
 */
 const 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");
+	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 createComponent(Show, {
 		get when() {
 			return isActive();
@@ -3146,8 +3622,8 @@ const ResizeControl = (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
@@ -3158,8 +3634,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
@@ -3190,15 +3666,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
 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]
@@ -3217,8 +3693,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.
@@ -3229,8 +3705,8 @@ 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
@@ -3242,8 +3718,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
@@ -3259,24 +3735,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,
@@ -3289,206 +3769,45 @@ function useNodesData(nodeIds) {
 //#endregion
 //#region src/hooks/useSolidFlow.tsx
 /**
-* Hook for accessing the SvelteFlow instance.
+* 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 A set of helper functions
+* @returns the flow's read struct, write surface, and deprecated aliases
 */
 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);
+	let { flow, commands, store, edgeLookup } = useInternalSolidFlow(), getInternalNode = (id) => flow.internalNodes[id];
 	return {
-		zoomIn: actions.zoomIn,
-		zoomOut: actions.zoomOut,
+		...commands,
+		flow,
+		commands,
 		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]);
-		},
+		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),
-		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
-			});
-			if (matchingEdges) {
-				let remmainingEdges = store.edges.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id));
-				store.onEdgesDelete?.(matchingEdges), actions.setEdges(() => remmainingEdges);
-			}
-			if (matchingNodes) {
-				let remmainingNodes = store.nodes.filter((node) => !matchingNodes.some(({ id }) => id === node.id));
-				store.onNodesDelete?.(matchingNodes), actions.setNodes(() => remmainingNodes);
-			}
-			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() ?? [])
+		getZoom: () => flow.viewport.zoom,
+		getHandleConnections: ({ type, id, nodeId }) => Object.values(flow.connections[connectionKey(nodeId, type, id ?? null)] ?? {})
 	};
 }
-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.
+* Hook for updating node internals. Sugar for `commands.updateNodeInternals`.
 *
 * @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
-			}]);
-		}
-		actions.requestUpdateNodeInternals(updates);
-	};
+	let { commands } = useInternalSolidFlow();
+	return commands.updateNodeInternals;
 }
 //#endregion
 //#region src/components/graph/plugins/NodeToolbar.tsx
@@ -4053,4 +4372,4 @@ const SolidFlow = (props) => {
 	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 };