@bavuchoko/edge-node 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,1639 @@
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/dependencies.ts
+function collect(edges, startId, direction) {
+	const next = /* @__PURE__ */ new Map();
+	for (const edge of edges) {
+		const from = direction === "upstream" ? edge.target : edge.source;
+		const to = direction === "upstream" ? edge.source : edge.target;
+		const list = next.get(from);
+		if (list) list.push(to);
+		else next.set(from, [to]);
+	}
+	const visited = /* @__PURE__ */ new Set();
+	const stack = [startId];
+	while (stack.length > 0) {
+		const id = stack.pop();
+		for (const neighbor of next.get(id) ?? []) {
+			if (neighbor === startId || visited.has(neighbor)) continue;
+			visited.add(neighbor);
+			stack.push(neighbor);
+		}
+	}
+	return visited;
+}
+/** Nodes that `nodeId` transitively depends on. */
+function getUpstream(edges, nodeId) {
+	return collect(edges, nodeId, "upstream");
+}
+/** Nodes that transitively depend on `nodeId`. */
+function getDownstream(edges, nodeId) {
+	return collect(edges, nodeId, "downstream");
+}
+/** True when adding `source → target` would close a dependency cycle. */
+function wouldCreateCycle(edges, source, target) {
+	if (source === target) return true;
+	return getDownstream(edges, target).has(source);
+}
+/** Roles of every node/edge on a dependency chain through `focusId`. */
+function getDependencyHighlight(edges, focusId) {
+	const upstream = getUpstream(edges, focusId);
+	const downstream = getDownstream(edges, focusId);
+	const nodes = /* @__PURE__ */ new Map();
+	for (const id of upstream) nodes.set(id, "upstream");
+	for (const id of downstream) nodes.set(id, "downstream");
+	nodes.set(focusId, "focus");
+	const edgeRoles = /* @__PURE__ */ new Map();
+	const relations = /* @__PURE__ */ new Map();
+	const addRelation = (id, entry) => {
+		const list = relations.get(id);
+		if (list) list.push(entry);
+		else relations.set(id, [entry]);
+	};
+	for (const edge of edges) if (upstream.has(edge.source) && (edge.target === focusId || upstream.has(edge.target))) {
+		edgeRoles.set(edge.id, "upstream");
+		if (edge.inverseRelation) addRelation(edge.source, {
+			relation: edge.inverseRelation,
+			otherId: edge.target
+		});
+	} else if (downstream.has(edge.target) && (edge.source === focusId || downstream.has(edge.source))) {
+		edgeRoles.set(edge.id, "downstream");
+		if (edge.relation) addRelation(edge.target, {
+			relation: edge.relation,
+			otherId: edge.source
+		});
+	}
+	return {
+		focusId,
+		nodes,
+		edges: edgeRoles,
+		relations
+	};
+}
+//#endregion
+//#region src/graph/geometry.ts
+/** Screen (client) → world coordinates given viewport transform. */
+function screenToWorld(screen, viewportOrigin, viewport) {
+	return {
+		x: (screen.x - viewportOrigin.x - viewport.x) / viewport.zoom,
+		y: (screen.y - viewportOrigin.y - viewport.y) / viewport.zoom
+	};
+}
+function getHandlePosition(node, side) {
+	const y = node.position.y + node.height / 2;
+	if (side === "left") return {
+		x: node.position.x,
+		y
+	};
+	return {
+		x: node.position.x + node.width,
+		y
+	};
+}
+function getBezierControls(source, target) {
+	const dx = Math.abs(target.x - source.x);
+	const curvature = Math.max(dx * .5, 40);
+	return [{
+		x: source.x + curvature,
+		y: source.y
+	}, {
+		x: target.x - curvature,
+		y: target.y
+	}];
+}
+/** Cubic bezier path from source (right) to target (left). */
+function getBezierPath(source, target) {
+	const [c1, c2] = getBezierControls(source, target);
+	return `M ${source.x} ${source.y} C ${c1.x} ${c1.y}, ${c2.x} ${c2.y}, ${target.x} ${target.y}`;
+}
+/** Point halfway along the curve drawn by `getBezierPath`. */
+function getBezierMidpoint(source, target) {
+	const [c1, c2] = getBezierControls(source, target);
+	return {
+		x: (source.x + 3 * c1.x + 3 * c2.x + target.x) / 8,
+		y: (source.y + 3 * c1.y + 3 * c2.y + target.y) / 8
+	};
+}
+/**
+* Edge geometry ending in an arrowhead at `target`. The curve stops at the
+* arrow's notch so the stroke doesn't poke through the tip. Bezier tangents
+* at the target are always horizontal, so the arrow points in +x.
+*/
+function getArrowEdge(source, target, arrowLength) {
+	if (arrowLength <= 0) return {
+		path: getBezierPath(source, target),
+		arrow: null
+	};
+	const tip = {
+		x: target.x - 7,
+		y: target.y
+	};
+	const half = arrowLength * .55;
+	const notchX = tip.x - arrowLength * .75;
+	const back = tip.x - arrowLength;
+	return {
+		path: getBezierPath(source, {
+			x: notchX,
+			y: tip.y
+		}),
+		arrow: `M ${tip.x} ${tip.y} L ${back} ${tip.y - half} L ${notchX} ${tip.y} L ${back} ${tip.y + half} Z`
+	};
+}
+//#endregion
+//#region src/graph/hooks/useColorMode.ts
+var LIGHT_QUERY = "(prefers-color-scheme: light)";
+function subscribeSystemColorMode(onChange) {
+	const media = window.matchMedia(LIGHT_QUERY);
+	media.addEventListener("change", onChange);
+	return () => media.removeEventListener("change", onChange);
+}
+function getSystemColorMode() {
+	return window.matchMedia(LIGHT_QUERY).matches ? "light" : "dark";
+}
+function getServerColorMode() {
+	return "dark";
+}
+/** Current OS color scheme, updated live. Returns `'dark'` during SSR. */
+function useSystemColorMode() {
+	return useSyncExternalStore(subscribeSystemColorMode, getSystemColorMode, getServerColorMode);
+}
+function isColorModePreference(value) {
+	return value === "dark" || value === "light" || value === "system";
+}
+function readStoredMode(storageKey) {
+	if (!storageKey || typeof window === "undefined") return null;
+	try {
+		const stored = window.localStorage.getItem(storageKey);
+		return isColorModePreference(stored) ? stored : null;
+	} catch {
+		return null;
+	}
+}
+function writeStoredMode(storageKey, mode) {
+	if (!storageKey || typeof window === "undefined") return;
+	try {
+		window.localStorage.setItem(storageKey, mode);
+	} catch {}
+}
+/**
+* Color mode state for a `GraphCanvas` host: tracks the user's preference,
+* resolves `'system'` against the OS setting and optionally persists it.
+*/
+function useColorMode({ defaultMode = "system", storageKey } = {}) {
+	const [mode, setModeState] = useState(() => readStoredMode(storageKey) ?? defaultMode);
+	const systemMode = useSystemColorMode();
+	const resolvedMode = mode === "system" ? systemMode : mode;
+	const setMode = useCallback((next) => {
+		setModeState(next);
+		writeStoredMode(storageKey, next);
+	}, [storageKey]);
+	return {
+		mode,
+		resolvedMode,
+		setMode,
+		toggle: useCallback(() => {
+			setMode(resolvedMode === "dark" ? "light" : "dark");
+		}, [resolvedMode, setMode])
+	};
+}
+//#endregion
+//#region src/graph/hooks/useConnectionDrag.ts
+function useConnectionDrag({ clientToWorld, onStart, onMove, onComplete, onCancel }) {
+	const clientToWorldRef = useRef(clientToWorld);
+	const onMoveRef = useRef(onMove);
+	const onCompleteRef = useRef(onComplete);
+	const onCancelRef = useRef(onCancel);
+	useEffect(() => {
+		clientToWorldRef.current = clientToWorld;
+		onMoveRef.current = onMove;
+		onCompleteRef.current = onComplete;
+		onCancelRef.current = onCancel;
+	});
+	return { startFromHandle: useCallback((sourceId, event) => {
+		event.stopPropagation();
+		event.preventDefault();
+		onStart(sourceId, clientToWorldRef.current(event.clientX, event.clientY));
+		const onWindowMove = (e) => {
+			onMoveRef.current(clientToWorldRef.current(e.clientX, e.clientY));
+		};
+		const onWindowUp = (e) => {
+			window.removeEventListener("pointermove", onWindowMove);
+			window.removeEventListener("pointerup", onWindowUp);
+			window.removeEventListener("pointercancel", onWindowUp);
+			const targetId = (document.elementFromPoint(e.clientX, e.clientY)?.closest("[data-handle=\"target\"]"))?.dataset.nodeId;
+			if (targetId) onCompleteRef.current(targetId);
+			else onCancelRef.current();
+		};
+		window.addEventListener("pointermove", onWindowMove);
+		window.addEventListener("pointerup", onWindowUp);
+		window.addEventListener("pointercancel", onWindowUp);
+	}, [onStart]) };
+}
+//#endregion
+//#region src/graph/hooks/useGraphPersistence.ts
+function hasEdgeChanged(before, after) {
+	return (before.kind ?? "required") !== (after.kind ?? "required") || (before.label ?? "") !== (after.label ?? "") || (before.relation ?? "") !== (after.relation ?? "") || (before.inverseRelation ?? "") !== (after.inverseRelation ?? "");
+}
+/**
+* Reports graph changes to the host (e.g. to save them through an API) and
+* rolls the local change back when the host rejects it.
+*/
+function useGraphPersistence({ state, dispatch, onConnect, onEdgeUpdate, onEdgeDelete, onNodeMove }) {
+	const callbacks = useRef({
+		onConnect,
+		onEdgeUpdate,
+		onEdgeDelete,
+		onNodeMove
+	});
+	callbacks.current = {
+		onConnect,
+		onEdgeUpdate,
+		onEdgeDelete,
+		onNodeMove
+	};
+	const stateRef = useRef(state);
+	stateRef.current = state;
+	const [savingEdgeIds, setSavingEdgeIds] = useState(/* @__PURE__ */ new Set());
+	const persist = useCallback(async (name, edgeId, call, rollback) => {
+		const setSaving = (saving) => edgeId && setSavingEdgeIds((current) => {
+			const next = new Set(current);
+			if (saving) next.add(edgeId);
+			else next.delete(edgeId);
+			return next;
+		});
+		setSaving(true);
+		try {
+			if (await call() === false) rollback();
+		} catch (error) {
+			console.error(`[edge-node] ${name} failed; change rolled back`, error);
+			rollback();
+		} finally {
+			setSaving(false);
+		}
+	}, []);
+	/** The edge whose editor is open, with its value when the editor opened. */
+	const openEdge = useRef(null);
+	useEffect(() => {
+		const sel = state.selection;
+		const open = openEdge.current;
+		if (open && !(sel?.type === "edge" && sel.id === open.id)) {
+			openEdge.current = null;
+			const edge = stateRef.current.edges[open.id];
+			if (edge && open.created) {
+				const handler = callbacks.current.onConnect;
+				if (handler) persist("onConnect", edge.id, () => handler(edge), () => dispatch({
+					type: "removeEdge",
+					id: edge.id
+				}));
+			} else if (edge && hasEdgeChanged(open.snapshot, edge)) {
+				const handler = callbacks.current.onEdgeUpdate;
+				const previous = open.snapshot;
+				if (handler) persist("onEdgeUpdate", edge.id, () => handler(edge, previous), () => dispatch({
+					type: "updateEdge",
+					id: edge.id,
+					patch: {
+						kind: previous.kind,
+						label: previous.label,
+						relation: previous.relation,
+						inverseRelation: previous.inverseRelation
+					}
+				}));
+			}
+		}
+		if (sel?.type === "edge" && openEdge.current?.id !== sel.id) {
+			const edge = stateRef.current.edges[sel.id];
+			if (edge) openEdge.current = {
+				id: sel.id,
+				created: Boolean(sel.created),
+				snapshot: edge
+			};
+		}
+	}, [
+		state.selection,
+		dispatch,
+		persist
+	]);
+	return {
+		savingEdgeIds,
+		deleteSelection: useCallback(() => {
+			const { selection, edges } = stateRef.current;
+			if (!selection) return;
+			const removed = selection.type === "edge" ? [edges[selection.id]].filter(Boolean) : Object.values(edges).filter((edge) => edge.source === selection.id || edge.target === selection.id);
+			const unconfirmedId = openEdge.current?.created ? openEdge.current.id : null;
+			if (selection.type === "edge" && openEdge.current?.id === selection.id) openEdge.current = null;
+			dispatch({ type: "deleteSelection" });
+			const handler = callbacks.current.onEdgeDelete;
+			if (!handler) return;
+			for (const edge of removed) {
+				if (edge.id === unconfirmedId) continue;
+				persist("onEdgeDelete", edge.id, () => handler(edge), () => dispatch({
+					type: "addEdge",
+					edge
+				}));
+			}
+		}, [dispatch, persist]),
+		reportNodeMove: useCallback((id, from) => {
+			const handler = callbacks.current.onNodeMove;
+			const node = stateRef.current.nodes[id];
+			if (!handler || !node) return;
+			if (node.position.x === from.x && node.position.y === from.y) return;
+			persist("onNodeMove", null, () => handler(node, from), () => dispatch({
+				type: "moveNode",
+				id,
+				position: from
+			}));
+		}, [dispatch, persist])
+	};
+}
+//#endregion
+//#region src/graph/hooks/useViewport.ts
+var MIN_ZOOM = .25;
+var MAX_ZOOM = 2.5;
+function useViewport({ viewport, onViewportChange }) {
+	const containerRef = useRef(null);
+	const [isPanning, setIsPanning] = useState(false);
+	const viewportRef = useRef(viewport);
+	viewportRef.current = viewport;
+	const onViewportChangeRef = useRef(onViewportChange);
+	onViewportChangeRef.current = onViewportChange;
+	const panStart = useRef(null);
+	const getOrigin = useCallback(() => {
+		const el = containerRef.current;
+		if (!el) return {
+			x: 0,
+			y: 0
+		};
+		const rect = el.getBoundingClientRect();
+		return {
+			x: rect.left,
+			y: rect.top
+		};
+	}, []);
+	const clientToWorld = useCallback((clientX, clientY) => {
+		return screenToWorld({
+			x: clientX,
+			y: clientY
+		}, getOrigin(), viewportRef.current);
+	}, [getOrigin]);
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const onWheel = (event) => {
+			event.preventDefault();
+			const current = viewportRef.current;
+			const origin = getOrigin();
+			const mouseX = event.clientX - origin.x;
+			const mouseY = event.clientY - origin.y;
+			const zoomFactor = event.deltaY < 0 ? 1.08 : 1 / 1.08;
+			const nextZoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, current.zoom * zoomFactor));
+			if (nextZoom === current.zoom) return;
+			const worldX = (mouseX - current.x) / current.zoom;
+			const worldY = (mouseY - current.y) / current.zoom;
+			onViewportChangeRef.current({
+				zoom: nextZoom,
+				x: mouseX - worldX * nextZoom,
+				y: mouseY - worldY * nextZoom
+			});
+		};
+		el.addEventListener("wheel", onWheel, { passive: false });
+		return () => el.removeEventListener("wheel", onWheel);
+	}, [getOrigin]);
+	return {
+		containerRef,
+		isPanning,
+		clientToWorld,
+		getOrigin,
+		startPan: useCallback((event) => {
+			if (event.button !== 0) return;
+			event.currentTarget.setPointerCapture(event.pointerId);
+			panStart.current = {
+				pointerId: event.pointerId,
+				screen: {
+					x: event.clientX,
+					y: event.clientY
+				},
+				viewport: { ...viewportRef.current }
+			};
+			setIsPanning(true);
+		}, []),
+		movePan: useCallback((event) => {
+			const start = panStart.current;
+			if (!start || start.pointerId !== event.pointerId) return;
+			const dx = event.clientX - start.screen.x;
+			const dy = event.clientY - start.screen.y;
+			onViewportChangeRef.current({
+				...start.viewport,
+				x: start.viewport.x + dx,
+				y: start.viewport.y + dy
+			});
+		}, []),
+		endPan: useCallback((event) => {
+			const start = panStart.current;
+			if (!start || start.pointerId !== event.pointerId) return;
+			panStart.current = null;
+			setIsPanning(false);
+			try {
+				event.currentTarget.releasePointerCapture(event.pointerId);
+			} catch {}
+		}, [])
+	};
+}
+//#endregion
+//#region src/graph/store.ts
+function createEdgeId(source, target) {
+	return `${source}->${target}`;
+}
+function createInitialState(nodes, edges, viewport = {
+	x: 40,
+	y: 40,
+	zoom: 1
+}) {
+	const nodeMap = {};
+	for (const node of nodes) nodeMap[node.id] = node;
+	const edgeMap = {};
+	for (const edge of edges) {
+		const id = createEdgeId(edge.source, edge.target);
+		edgeMap[id] = {
+			...edge,
+			id
+		};
+	}
+	return {
+		nodes: nodeMap,
+		edges: edgeMap,
+		viewport,
+		selection: null,
+		connectionDraft: null
+	};
+}
+function graphReducer(state, action) {
+	switch (action.type) {
+		case "setViewport": return {
+			...state,
+			viewport: action.viewport
+		};
+		case "moveNode": {
+			const node = state.nodes[action.id];
+			if (!node) return state;
+			return {
+				...state,
+				nodes: {
+					...state.nodes,
+					[action.id]: {
+						...node,
+						position: action.position
+					}
+				}
+			};
+		}
+		case "resizeNode": {
+			const node = state.nodes[action.id];
+			if (!node) return state;
+			if (node.width === action.width && node.height === action.height) return state;
+			return {
+				...state,
+				nodes: {
+					...state.nodes,
+					[action.id]: {
+						...node,
+						width: action.width,
+						height: action.height
+					}
+				}
+			};
+		}
+		case "setSelection": return {
+			...state,
+			selection: action.selection
+		};
+		case "startConnection": return {
+			...state,
+			connectionDraft: {
+				sourceId: action.sourceId,
+				pointer: action.pointer
+			},
+			selection: null
+		};
+		case "updateConnection":
+			if (!state.connectionDraft) return state;
+			return {
+				...state,
+				connectionDraft: {
+					...state.connectionDraft,
+					pointer: action.pointer
+				}
+			};
+		case "cancelConnection": return {
+			...state,
+			connectionDraft: null
+		};
+		case "completeConnection": {
+			const draft = state.connectionDraft;
+			if (!draft) return state;
+			const { sourceId } = draft;
+			const targetId = action.targetId;
+			if (sourceId === targetId) return {
+				...state,
+				connectionDraft: null
+			};
+			if (!state.nodes[sourceId] || !state.nodes[targetId]) return {
+				...state,
+				connectionDraft: null
+			};
+			const id = createEdgeId(sourceId, targetId);
+			if (state.edges[id]) return {
+				...state,
+				connectionDraft: null
+			};
+			if (!action.allowCycles && wouldCreateCycle(Object.values(state.edges), sourceId, targetId)) return {
+				...state,
+				connectionDraft: null
+			};
+			return {
+				...state,
+				connectionDraft: null,
+				edges: {
+					...state.edges,
+					[id]: {
+						id,
+						source: sourceId,
+						target: targetId
+					}
+				},
+				selection: {
+					type: "edge",
+					id,
+					created: true
+				}
+			};
+		}
+		case "updateEdge": {
+			const edge = state.edges[action.id];
+			if (!edge) return state;
+			const next = {
+				...edge,
+				...action.patch
+			};
+			if (!next.label) delete next.label;
+			if (!next.relation) delete next.relation;
+			if (!next.inverseRelation) delete next.inverseRelation;
+			return {
+				...state,
+				edges: {
+					...state.edges,
+					[action.id]: next
+				}
+			};
+		}
+		case "addEdge": {
+			const { edge } = action;
+			if (state.edges[edge.id]) return state;
+			if (!state.nodes[edge.source] || !state.nodes[edge.target]) return state;
+			return {
+				...state,
+				edges: {
+					...state.edges,
+					[edge.id]: edge
+				}
+			};
+		}
+		case "removeEdge": {
+			if (!state.edges[action.id]) return state;
+			const { [action.id]: _, ...rest } = state.edges;
+			const selection = state.selection?.type === "edge" && state.selection.id === action.id ? null : state.selection;
+			return {
+				...state,
+				edges: rest,
+				selection
+			};
+		}
+		case "deleteSelection": {
+			const sel = state.selection;
+			if (!sel) return state;
+			if (sel.type === "edge") {
+				const { [sel.id]: _, ...rest } = state.edges;
+				return {
+					...state,
+					edges: rest,
+					selection: null
+				};
+			}
+			const nodeId = sel.id;
+			const { [nodeId]: __, ...restNodes } = state.nodes;
+			const restEdges = {};
+			for (const edge of Object.values(state.edges)) if (edge.source !== nodeId && edge.target !== nodeId) restEdges[edge.id] = edge;
+			return {
+				...state,
+				nodes: restNodes,
+				edges: restEdges,
+				selection: null,
+				connectionDraft: null
+			};
+		}
+		default: return state;
+	}
+}
+function getNodes(state) {
+	return Object.values(state.nodes);
+}
+function getEdges(state) {
+	return Object.values(state.edges);
+}
+//#endregion
+//#region src/graph/theme.ts
+var darkGraphTheme = {
+	background: "#141414",
+	gridColor: "rgba(255, 255, 255, 0.04)",
+	gridSize: 24,
+	node: {
+		background: "#1e1e1e",
+		border: "#2e2e2e",
+		borderHover: "#3f3f46",
+		borderSelected: "#60a5fa",
+		title: "#f9fafb",
+		subtitle: "#6b7280",
+		shadow: "0 8px 24px rgba(0, 0, 0, 0.35)",
+		radius: 6,
+		handle: "#9ca3af",
+		handleActive: "#2563eb",
+		badgeBackground: "#2563eb",
+		badgeText: "#eff6ff",
+		statusSuccess: "#22c55e",
+		statusError: "#ef4444",
+		statusIdle: "#9ca3af"
+	},
+	edge: {
+		color: "#6b7280",
+		hoverColor: "#9ca3af",
+		selectedColor: "#93c5fd",
+		width: 2,
+		hoverWidth: 2.75,
+		selectedWidth: 3,
+		hitWidth: 32,
+		draftColor: "#60a5fa",
+		draftWidth: 2,
+		draftDash: "6 4",
+		arrowSize: 9,
+		optionalDash: "5 5",
+		labelColor: "#9ca3af"
+	},
+	hud: { color: "#6b7280" },
+	dependency: {
+		upstreamColor: "#a78bfa",
+		downstreamColor: "#f59e0b",
+		dimOpacity: .25
+	}
+};
+var lightGraphTheme = {
+	background: "#f5f5f5",
+	gridColor: "rgba(0, 0, 0, 0.08)",
+	gridSize: 24,
+	node: {
+		background: "#ffffff",
+		border: "#e5e7eb",
+		borderHover: "#d1d5db",
+		borderSelected: "#3b82f6",
+		title: "#111827",
+		subtitle: "#6b7280",
+		shadow: "0 4px 16px rgba(15, 23, 42, 0.08)",
+		radius: 6,
+		handle: "#9ca3af",
+		handleActive: "#2563eb",
+		badgeBackground: "#2563eb",
+		badgeText: "#eff6ff",
+		statusSuccess: "#16a34a",
+		statusError: "#dc2626",
+		statusIdle: "#9ca3af"
+	},
+	edge: {
+		color: "#9ca3af",
+		hoverColor: "#6b7280",
+		selectedColor: "#3b82f6",
+		width: 2,
+		hoverWidth: 2.75,
+		selectedWidth: 3,
+		hitWidth: 32,
+		draftColor: "#3b82f6",
+		draftWidth: 2,
+		draftDash: "6 4",
+		arrowSize: 9,
+		optionalDash: "5 5",
+		labelColor: "#6b7280"
+	},
+	hud: { color: "#6b7280" },
+	dependency: {
+		upstreamColor: "#7c3aed",
+		downstreamColor: "#d97706",
+		dimOpacity: .3
+	}
+};
+/** Alias of `darkGraphTheme`, the theme used when no color mode is given. */
+var defaultGraphTheme = darkGraphTheme;
+var graphThemes = {
+	dark: darkGraphTheme,
+	light: lightGraphTheme
+};
+/** Fills a partial theme from the preset for `mode`. */
+function resolveGraphTheme(partial, mode = "dark") {
+	const base = graphThemes[mode];
+	return {
+		background: partial?.background ?? base.background,
+		gridColor: partial?.gridColor ?? base.gridColor,
+		gridSize: partial?.gridSize ?? base.gridSize,
+		node: {
+			...base.node,
+			...partial?.node
+		},
+		edge: {
+			...base.edge,
+			...partial?.edge
+		},
+		hud: {
+			...base.hud,
+			...partial?.hud
+		},
+		dependency: {
+			...base.dependency,
+			...partial?.dependency
+		}
+	};
+}
+function themeToCssVars(theme) {
+	return {
+		["--graph-bg"]: theme.background,
+		["--graph-grid-color"]: theme.gridColor,
+		["--graph-grid-size"]: `${theme.gridSize}px`,
+		["--graph-node-bg"]: theme.node.background,
+		["--graph-node-border"]: theme.node.border,
+		["--graph-node-border-hover"]: theme.node.borderHover,
+		["--graph-node-border-selected"]: theme.node.borderSelected,
+		["--graph-node-title"]: theme.node.title,
+		["--graph-node-subtitle"]: theme.node.subtitle,
+		["--graph-node-shadow"]: theme.node.shadow,
+		["--graph-node-radius"]: `${theme.node.radius}px`,
+		["--graph-node-handle"]: theme.node.handle,
+		["--graph-node-handle-active"]: theme.node.handleActive,
+		["--graph-node-badge-bg"]: theme.node.badgeBackground,
+		["--graph-node-badge-text"]: theme.node.badgeText,
+		["--graph-status-success"]: theme.node.statusSuccess,
+		["--graph-status-error"]: theme.node.statusError,
+		["--graph-status-idle"]: theme.node.statusIdle,
+		["--graph-edge-color"]: theme.edge.color,
+		["--graph-edge-hover-color"]: theme.edge.hoverColor,
+		["--graph-edge-selected-color"]: theme.edge.selectedColor,
+		["--graph-edge-width"]: String(theme.edge.width),
+		["--graph-edge-hover-width"]: String(theme.edge.hoverWidth),
+		["--graph-edge-selected-width"]: String(theme.edge.selectedWidth),
+		["--graph-edge-draft-color"]: theme.edge.draftColor,
+		["--graph-edge-draft-width"]: String(theme.edge.draftWidth),
+		["--graph-edge-draft-dash"]: theme.edge.draftDash,
+		["--graph-hud-color"]: theme.hud.color,
+		["--graph-edge-optional-dash"]: theme.edge.optionalDash,
+		["--graph-edge-label-color"]: theme.edge.labelColor,
+		["--graph-dep-upstream"]: theme.dependency.upstreamColor,
+		["--graph-dep-downstream"]: theme.dependency.downstreamColor,
+		["--graph-dep-dim-opacity"]: String(theme.dependency.dimOpacity)
+	};
+}
+//#endregion
+//#region src/graph/components/ConnectionLine.tsx
+function ConnectionLine({ source, target, arrowLength }) {
+	const { path, arrow } = getArrowEdge(source, target, arrowLength);
+	return /* @__PURE__ */ jsxs("g", {
+		className: "graph-connection-line",
+		children: [/* @__PURE__ */ jsx("path", {
+			d: path,
+			className: "graph-connection-line__path"
+		}), arrow ? /* @__PURE__ */ jsx("path", {
+			d: arrow,
+			className: "graph-connection-line__arrow"
+		}) : null]
+	});
+}
+//#endregion
+//#region src/graph/components/EdgeEditor.tsx
+var KINDS = [{
+	kind: "required",
+	title: "Required"
+}, {
+	kind: "optional",
+	title: "Optional",
+	dash: "3 3"
+}];
+function EdgeEditor({ edge, sourceName, targetName, position, autoFocus = false, onChange, onDelete, onClose }) {
+	const kind = edge.kind ?? "required";
+	const closeOnEnterOrEscape = (event) => {
+		if (event.key === "Enter" || event.key === "Escape") {
+			event.preventDefault();
+			onClose();
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "graph-edge-editor",
+		style: {
+			left: position.x,
+			top: position.y
+		},
+		onPointerDown: (event) => event.stopPropagation(),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "graph-edge-editor__row",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "graph-edge-editor__kinds",
+					role: "radiogroup",
+					"aria-label": "Line style",
+					children: KINDS.map((option) => /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						role: "radio",
+						"aria-checked": kind === option.kind,
+						className: `graph-edge-editor__kind${kind === option.kind ? " is-active" : ""}`,
+						onClick: () => onChange({ kind: option.kind }),
+						children: [/* @__PURE__ */ jsx("svg", {
+							width: "18",
+							height: "6",
+							viewBox: "0 0 18 6",
+							"aria-hidden": true,
+							children: /* @__PURE__ */ jsx("line", {
+								x1: "1",
+								y1: "3",
+								x2: "17",
+								y2: "3",
+								stroke: "currentColor",
+								strokeWidth: "2",
+								strokeDasharray: option.dash
+							})
+						}), option.title]
+					}, option.kind))
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "graph-edge-editor__delete",
+					"aria-label": "Delete connection",
+					title: "Delete connection",
+					onClick: onDelete,
+					children: /* @__PURE__ */ jsx("svg", {
+						width: "14",
+						height: "14",
+						viewBox: "0 0 16 16",
+						"aria-hidden": true,
+						children: /* @__PURE__ */ jsx("path", {
+							d: "M3 4.5h10M6.5 4.5V3h3v1.5M5 4.5l.6 8.5h4.8l.6-8.5",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "1.4",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "graph-edge-editor__field",
+				children: [/* @__PURE__ */ jsx("span", { children: "Label" }), /* @__PURE__ */ jsx("input", {
+					type: "text",
+					placeholder: "Text on the line",
+					maxLength: 40,
+					value: edge.label ?? "",
+					autoFocus,
+					onChange: (event) => onChange({ label: event.target.value }),
+					onKeyDown: closeOnEnterOrEscape
+				})]
+			}),
+			/* @__PURE__ */ jsxs("fieldset", {
+				className: "graph-edge-editor__relations",
+				children: [
+					/* @__PURE__ */ jsx("legend", { children: "Relation" }),
+					/* @__PURE__ */ jsxs("label", {
+						className: "graph-edge-editor__relation",
+						title: `${sourceName}'s relation — shown on it while ${targetName} is hovered`,
+						children: [/* @__PURE__ */ jsx("span", { children: sourceName }), /* @__PURE__ */ jsx("input", {
+							type: "text",
+							placeholder: "e.g. hosts",
+							maxLength: 40,
+							value: edge.inverseRelation ?? "",
+							onChange: (event) => onChange({ inverseRelation: event.target.value }),
+							onKeyDown: closeOnEnterOrEscape
+						})]
+					}),
+					/* @__PURE__ */ jsx("svg", {
+						className: "graph-edge-editor__arrow",
+						width: "16",
+						height: "10",
+						viewBox: "0 0 16 10",
+						"aria-hidden": true,
+						children: /* @__PURE__ */ jsx("path", {
+							d: "M1 5h13M10 1l4 4-4 4",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "1.5",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					}),
+					/* @__PURE__ */ jsxs("label", {
+						className: "graph-edge-editor__relation",
+						title: `${targetName}'s relation — shown on it while ${sourceName} is hovered`,
+						children: [/* @__PURE__ */ jsx("span", { children: targetName }), /* @__PURE__ */ jsx("input", {
+							type: "text",
+							placeholder: "e.g. runs on",
+							maxLength: 40,
+							value: edge.relation ?? "",
+							onChange: (event) => onChange({ relation: event.target.value }),
+							onKeyDown: closeOnEnterOrEscape
+						})]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/graph/components/GraphEdge.tsx
+function GraphEdge({ id, source, target, kind = "required", label, selected, editable = true, role, dimmed = false, pending = false, zoom, hitWidthPx = 32, arrowSizePx = 9, onSelect }) {
+	const scale = 1 / Math.max(zoom, .01);
+	const { path, arrow } = getArrowEdge(source, target, arrowSizePx * scale);
+	const hitWidth = hitWidthPx * scale;
+	const mid = label ? getBezierMidpoint(source, target) : null;
+	return /* @__PURE__ */ jsxs("g", {
+		className: [
+			"graph-edge",
+			`graph-edge--${kind}`,
+			selected && "is-selected",
+			role && `is-${role}`,
+			dimmed && "is-dimmed",
+			pending && "is-pending"
+		].filter(Boolean).join(" "),
+		"data-edge-id": id,
+		onPointerDown: editable ? (event) => {
+			event.stopPropagation();
+			onSelect(id);
+		} : void 0,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: path,
+				className: "graph-edge__hit",
+				strokeWidth: hitWidth
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: path,
+				className: "graph-edge__path"
+			}),
+			arrow ? /* @__PURE__ */ jsx("path", {
+				d: arrow,
+				className: "graph-edge__arrow"
+			}) : null,
+			mid ? /* @__PURE__ */ jsx("text", {
+				x: mid.x,
+				y: mid.y,
+				dy: -8,
+				className: "graph-edge__label",
+				children: label
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/graph/components/GraphNode.tsx
+/** Pointer travel (screen px) beyond which a press counts as a drag, not a click. */
+var CLICK_SLOP = 4;
+/** Clicks on these never toggle the details panel. */
+var NO_TOGGLE_SELECTOR = "[data-handle], .graph-node__details, button, a, input, select, textarea, label, [data-no-toggle]";
+/** The built-in card reads `NodeData`; with custom data any field may be missing. */
+function asNodeData(data) {
+	return data && typeof data === "object" ? data : {};
+}
+function DefaultDetails({ data }) {
+	return /* @__PURE__ */ jsx("dl", {
+		className: "graph-node__detail-list",
+		children: (data.details ?? []).map((row) => /* @__PURE__ */ jsxs("div", {
+			className: "graph-node__detail-row",
+			children: [/* @__PURE__ */ jsx("dt", { children: row.label }), /* @__PURE__ */ jsx("dd", { children: row.value })]
+		}, row.label))
+	});
+}
+function DefaultCard({ title, data, ctx, expandable, detailsId }) {
+	const { role, relation, expanded } = ctx;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "graph-node__header",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "graph-node__header-row",
+				children: [/* @__PURE__ */ jsx(StatusIcon, { status: data.status ?? "idle" }), /* @__PURE__ */ jsxs("div", {
+					className: "graph-node__header-end",
+					children: [relation && (role === "upstream" || role === "downstream") ? /* @__PURE__ */ jsx("span", {
+						className: `graph-node__role graph-node__role--${role}`,
+						title: relation,
+						children: relation
+					}) : null, expandable ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "graph-node__toggle",
+						"aria-expanded": expanded,
+						"aria-controls": detailsId,
+						"aria-label": expanded ? `Hide ${title} details` : `Show ${title} details`,
+						onClick: ctx.toggleExpanded,
+						children: /* @__PURE__ */ jsx("svg", {
+							viewBox: "0 0 16 16",
+							width: "14",
+							height: "14",
+							"aria-hidden": true,
+							children: /* @__PURE__ */ jsx("path", {
+								d: "M4 6l4 4 4-4",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "1.6",
+								strokeLinecap: "round",
+								strokeLinejoin: "round"
+							})
+						})
+					}) : null]
+				})]
+			}), data.stats ? /* @__PURE__ */ jsx("p", {
+				className: "graph-node__stats",
+				children: data.stats
+			}) : null]
+		}),
+		/* @__PURE__ */ jsx("h3", {
+			className: "graph-node__title",
+			children: title
+		}),
+		data.subtitle ? /* @__PURE__ */ jsx("p", {
+			className: "graph-node__subtitle",
+			children: data.subtitle
+		}) : null,
+		data.badge ? /* @__PURE__ */ jsx("div", {
+			className: "graph-node__footer",
+			children: /* @__PURE__ */ jsx("span", {
+				className: "graph-node__badge",
+				children: data.badge
+			})
+		}) : null
+	] });
+}
+function StatusIcon({ status }) {
+	if (status === "success") return /* @__PURE__ */ jsx("span", {
+		className: "graph-node__status graph-node__status--success",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 16 16",
+			width: "14",
+			height: "14",
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: "8",
+				cy: "8",
+				r: "7",
+				fill: "currentColor"
+			}), /* @__PURE__ */ jsx("path", {
+				d: "M4.8 8.2l2.1 2.1 4.3-4.4",
+				fill: "none",
+				stroke: "#0d1a12",
+				strokeWidth: "1.6",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})]
+		})
+	});
+	if (status === "error") return /* @__PURE__ */ jsx("span", {
+		className: "graph-node__status graph-node__status--error",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 16 16",
+			width: "14",
+			height: "14",
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: "8",
+				cy: "8",
+				r: "7",
+				fill: "currentColor"
+			}), /* @__PURE__ */ jsx("path", {
+				d: "M8 4.5v4.2M8 11.2h.01",
+				fill: "none",
+				stroke: "#1a0d0d",
+				strokeWidth: "1.8",
+				strokeLinecap: "round"
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "graph-node__status graph-node__status--idle",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 16 16",
+			width: "14",
+			height: "14",
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: "8",
+				cy: "8",
+				r: "6.5",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.5"
+			}), /* @__PURE__ */ jsx("circle", {
+				cx: "8",
+				cy: "8",
+				r: "2",
+				fill: "currentColor"
+			})]
+		})
+	});
+}
+function GraphNode({ node, selected, editable, role, relation, dimmed = false, onSelect, onHoverChange, onDragStart, onSourceHandleDown, onSizeChange, expanded, onToggleExpanded, renderNode, renderDetails }) {
+	const data = asNodeData(node.data);
+	const title = data.title ?? node.id;
+	const ref = useRef(null);
+	const pressStart = useRef(null);
+	const hasDetails = Boolean(renderDetails) || (data.details?.length ?? 0) > 0;
+	const detailsId = `graph-node-details-${node.id}`;
+	const ctx = {
+		editable,
+		selected,
+		role,
+		relation,
+		dimmed,
+		expanded: !editable && expanded,
+		toggleExpanded: () => onToggleExpanded(node.id)
+	};
+	const customContent = renderNode?.(node, ctx);
+	const isCustom = customContent !== void 0;
+	const expandable = !editable && (isCustom || hasDetails);
+	const statusClass = data.status === "success" ? "is-success" : data.status === "error" ? "is-error" : "is-idle";
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const report = () => {
+			const width = Math.ceil(el.offsetWidth);
+			const height = Math.ceil(el.offsetHeight);
+			if (width > 0 && height > 0) onSizeChange(node.id, {
+				width,
+				height
+			});
+		};
+		report();
+		const observer = new ResizeObserver(report);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [node.id, onSizeChange]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: [
+			"graph-node",
+			isCustom ? "graph-node--custom" : statusClass,
+			selected && "is-selected",
+			role && role !== "focus" && `is-${role}`,
+			dimmed && "is-dimmed",
+			ctx.expanded && "is-expanded",
+			expandable && "is-expandable"
+		].filter(Boolean).join(" "),
+		style: {
+			left: node.position.x,
+			top: node.position.y,
+			width: node.width
+		},
+		"data-node-id": node.id,
+		onPointerEnter: () => onHoverChange(node.id, true),
+		onPointerLeave: () => onHoverChange(node.id, false),
+		onPointerDown: (event) => {
+			if (event.target.closest("[data-handle]")) return;
+			event.stopPropagation();
+			pressStart.current = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			if (!editable) return;
+			onSelect(node.id);
+			onDragStart(node.id, event);
+		},
+		onClick: (event) => {
+			const start = pressStart.current;
+			pressStart.current = null;
+			if (!expandable || !start) return;
+			if (event.target.closest(NO_TOGGLE_SELECTOR)) return;
+			if (Math.hypot(event.clientX - start.x, event.clientY - start.y) > CLICK_SLOP) return;
+			onToggleExpanded(node.id);
+		},
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "graph-node__handle graph-node__handle--target",
+				"data-handle": "target",
+				"data-node-id": node.id,
+				"aria-label": `Connect to ${title}`,
+				"aria-hidden": !editable || void 0,
+				tabIndex: editable ? void 0 : -1,
+				onPointerDown: (event) => event.stopPropagation()
+			}),
+			isCustom ? customContent : /* @__PURE__ */ jsx(DefaultCard, {
+				title,
+				data,
+				ctx,
+				expandable,
+				detailsId
+			}),
+			ctx.expanded && hasDetails ? /* @__PURE__ */ jsx("div", {
+				id: detailsId,
+				className: "graph-node__details",
+				children: renderDetails ? renderDetails(node) : /* @__PURE__ */ jsx(DefaultDetails, { data })
+			}) : null,
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "graph-node__handle graph-node__handle--source",
+				"data-handle": "source",
+				"data-node-id": node.id,
+				"aria-label": `Connect from ${title}`,
+				"aria-hidden": !editable || void 0,
+				tabIndex: editable ? void 0 : -1,
+				onPointerDown: (event) => {
+					if (editable) onSourceHandleDown(node.id, event);
+				}
+			})
+		]
+	});
+}
+//#endregion
+//#region src/graph/components/GraphCanvas.tsx
+function GraphCanvas({ initialState, editable = false, theme, colorMode = "dark", allowCycles = false, onConnect, onEdgeUpdate, onEdgeDelete, onNodeMove, renderNodeDetails, renderNode }) {
+	const [state, dispatch] = useReducer(graphReducer, initialState);
+	const { savingEdgeIds, deleteSelection, reportNodeMove } = useGraphPersistence({
+		state,
+		dispatch,
+		onConnect,
+		onEdgeUpdate,
+		onEdgeDelete,
+		onNodeMove
+	});
+	const systemColorMode = useSystemColorMode();
+	const resolvedColorMode = colorMode === "system" ? systemColorMode : colorMode;
+	const resolvedTheme = useMemo(() => resolveGraphTheme(theme, resolvedColorMode), [theme, resolvedColorMode]);
+	const themeStyle = useMemo(() => themeToCssVars(resolvedTheme), [resolvedTheme]);
+	const nodes = useMemo(() => getNodes(state), [state]);
+	const edges = useMemo(() => getEdges(state), [state]);
+	const nodesRef = useRef(state.nodes);
+	nodesRef.current = state.nodes;
+	const onViewportChange = useCallback((viewport) => {
+		dispatch({
+			type: "setViewport",
+			viewport
+		});
+	}, []);
+	const { containerRef, isPanning, clientToWorld, startPan, movePan, endPan } = useViewport({
+		viewport: state.viewport,
+		onViewportChange
+	});
+	const clientToWorldRef = useRef(clientToWorld);
+	clientToWorldRef.current = clientToWorld;
+	const connection = useConnectionDrag({
+		clientToWorld,
+		onStart: (sourceId, pointer) => {
+			dispatch({
+				type: "startConnection",
+				sourceId,
+				pointer
+			});
+		},
+		onMove: (pointer) => {
+			dispatch({
+				type: "updateConnection",
+				pointer
+			});
+		},
+		onComplete: (targetId) => {
+			dispatch({
+				type: "completeConnection",
+				targetId,
+				allowCycles
+			});
+		},
+		onCancel: () => {
+			dispatch({ type: "cancelConnection" });
+		}
+	});
+	const nodeDrag = useRef(null);
+	const [hoveredNodeId, setHoveredNodeId] = useState(null);
+	const [expandedNodeIds, setExpandedNodeIds] = useState(/* @__PURE__ */ new Set());
+	const onToggleNodeExpanded = useCallback((id) => {
+		setExpandedNodeIds((current) => {
+			const next = new Set(current);
+			if (!next.delete(id)) next.add(id);
+			return next;
+		});
+	}, []);
+	const onNodeDragStart = useCallback((id, event) => {
+		if (event.button !== 0) return;
+		const node = nodesRef.current[id];
+		if (!node) return;
+		const startPosition = node.position;
+		const world = clientToWorldRef.current(event.clientX, event.clientY);
+		nodeDrag.current = {
+			id,
+			pointerId: event.pointerId,
+			offset: {
+				x: world.x - node.position.x,
+				y: world.y - node.position.y
+			}
+		};
+		const onWindowMove = (e) => {
+			const drag = nodeDrag.current;
+			if (!drag || drag.pointerId !== e.pointerId) return;
+			const next = clientToWorldRef.current(e.clientX, e.clientY);
+			dispatch({
+				type: "moveNode",
+				id: drag.id,
+				position: {
+					x: next.x - drag.offset.x,
+					y: next.y - drag.offset.y
+				}
+			});
+		};
+		const onWindowUp = (e) => {
+			const drag = nodeDrag.current;
+			if (!drag || drag.pointerId !== e.pointerId) return;
+			nodeDrag.current = null;
+			reportNodeMove(drag.id, startPosition);
+			const hoverEl = document.elementFromPoint(e.clientX, e.clientY)?.closest(".graph-node");
+			setHoveredNodeId(hoverEl?.dataset.nodeId ?? null);
+			window.removeEventListener("pointermove", onWindowMove);
+			window.removeEventListener("pointerup", onWindowUp);
+			window.removeEventListener("pointercancel", onWindowUp);
+		};
+		window.addEventListener("pointermove", onWindowMove);
+		window.addEventListener("pointerup", onWindowUp);
+		window.addEventListener("pointercancel", onWindowUp);
+	}, [reportNodeMove]);
+	const onNodeSizeChange = useCallback((id, size) => {
+		dispatch({
+			type: "resizeNode",
+			id,
+			width: size.width,
+			height: size.height
+		});
+	}, []);
+	useEffect(() => {
+		const onKeyDown = (event) => {
+			const target = event.target;
+			if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)) return;
+			if (event.key === "Escape") {
+				dispatch({ type: "cancelConnection" });
+				dispatch({
+					type: "setSelection",
+					selection: null
+				});
+				return;
+			}
+			if (event.key === "Delete" || event.key === "Backspace") {
+				if (editable && state.selection) {
+					event.preventDefault();
+					deleteSelection();
+				}
+			}
+		};
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [
+		editable,
+		state.selection,
+		deleteSelection
+	]);
+	useEffect(() => {
+		if (editable) {
+			setExpandedNodeIds(/* @__PURE__ */ new Set());
+			return;
+		}
+		dispatch({ type: "cancelConnection" });
+		dispatch({
+			type: "setSelection",
+			selection: null
+		});
+	}, [editable]);
+	const draftSourcePoint = useMemo(() => {
+		if (!state.connectionDraft) return null;
+		const node = state.nodes[state.connectionDraft.sourceId];
+		if (!node) return null;
+		return getHandlePosition(node, "right");
+	}, [state.connectionDraft, state.nodes]);
+	const onNodeHoverChange = useCallback((id, hovered) => {
+		if (nodeDrag.current) return;
+		setHoveredNodeId((current) => hovered ? id : current === id ? null : current);
+	}, []);
+	/** Dependency chain through the hovered node. Suppressed while panning or connecting. */
+	const highlight = useMemo(() => {
+		if (!hoveredNodeId || !state.nodes[hoveredNodeId]) return null;
+		if (isPanning || state.connectionDraft) return null;
+		return getDependencyHighlight(edges, hoveredNodeId);
+	}, [
+		edges,
+		hoveredNodeId,
+		state.nodes,
+		isPanning,
+		state.connectionDraft
+	]);
+	/** While connecting: nodes the draft cannot end on (self, duplicate, or a cycle). */
+	const invalidTargets = useMemo(() => {
+		const draft = state.connectionDraft;
+		if (!draft) return null;
+		const invalid = /* @__PURE__ */ new Set([draft.sourceId]);
+		for (const edge of edges) if (edge.source === draft.sourceId) invalid.add(edge.target);
+		if (!allowCycles) for (const id of getUpstream(edges, draft.sourceId)) invalid.add(id);
+		return invalid;
+	}, [
+		state.connectionDraft,
+		edges,
+		allowCycles
+	]);
+	const { x, y, zoom } = state.viewport;
+	const editingEdge = state.selection?.type === "edge" && !state.connectionDraft ? state.edges[state.selection.id] : void 0;
+	/** Below the edge midpoint, in canvas-relative screen px. */
+	const editorPosition = useMemo(() => {
+		if (!editingEdge) return null;
+		const sourceNode = state.nodes[editingEdge.source];
+		const targetNode = state.nodes[editingEdge.target];
+		if (!sourceNode || !targetNode) return null;
+		const mid = getBezierMidpoint(getHandlePosition(sourceNode, "right"), getHandlePosition(targetNode, "left"));
+		return {
+			x: x + mid.x * zoom,
+			y: y + mid.y * zoom + 14
+		};
+	}, [
+		editingEdge,
+		state.nodes,
+		x,
+		y,
+		zoom
+	]);
+	const transform = `translate(${x}px, ${y}px) scale(${zoom})`;
+	const onCanvasPointerDown = (event) => {
+		if (event.button !== 0) return;
+		const t = event.target;
+		if (t.closest(".graph-node") || t.closest(".graph-edge") || t.closest("[data-handle]")) return;
+		dispatch({
+			type: "setSelection",
+			selection: null
+		});
+		startPan(event);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: `graph-canvas${editable ? "" : " is-readonly"}${isPanning ? " is-panning" : ""}${state.connectionDraft ? " is-connecting" : ""}`,
+		style: themeStyle,
+		"data-color-mode": resolvedColorMode,
+		onPointerDown: onCanvasPointerDown,
+		onPointerMove: movePan,
+		onPointerUp: endPan,
+		onPointerCancel: endPan,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "graph-world",
+				style: { transform },
+				children: [/* @__PURE__ */ jsxs("svg", {
+					className: "graph-edges",
+					"aria-hidden": true,
+					children: [edges.map((edge) => {
+						const sourceNode = state.nodes[edge.source];
+						const targetNode = state.nodes[edge.target];
+						if (!sourceNode || !targetNode) return null;
+						const source = getHandlePosition(sourceNode, "right");
+						const target = getHandlePosition(targetNode, "left");
+						return /* @__PURE__ */ jsx(GraphEdge, {
+							editable,
+							id: edge.id,
+							source,
+							target,
+							kind: edge.kind,
+							label: edge.label,
+							role: highlight?.edges.get(edge.id),
+							dimmed: highlight ? !highlight.edges.has(edge.id) : false,
+							pending: savingEdgeIds.has(edge.id),
+							zoom,
+							hitWidthPx: resolvedTheme.edge.hitWidth,
+							arrowSizePx: resolvedTheme.edge.arrowSize,
+							selected: state.selection?.type === "edge" && state.selection.id === edge.id,
+							onSelect: (id) => dispatch({
+								type: "setSelection",
+								selection: {
+									type: "edge",
+									id
+								}
+							})
+						}, edge.id);
+					}), draftSourcePoint && state.connectionDraft ? /* @__PURE__ */ jsx(ConnectionLine, {
+						source: draftSourcePoint,
+						target: state.connectionDraft.pointer,
+						arrowLength: resolvedTheme.edge.arrowSize / Math.max(zoom, .01)
+					}) : null]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "graph-nodes",
+					children: nodes.map((node) => /* @__PURE__ */ jsx(GraphNode, {
+						editable,
+						node,
+						selected: state.selection?.type === "node" && state.selection.id === node.id,
+						role: highlight?.nodes.get(node.id),
+						relation: formatRelations(highlight?.relations.get(node.id)),
+						dimmed: invalidTargets ? invalidTargets.has(node.id) : highlight ? !highlight.nodes.has(node.id) : false,
+						onSelect: (id) => dispatch({
+							type: "setSelection",
+							selection: {
+								type: "node",
+								id
+							}
+						}),
+						onHoverChange: onNodeHoverChange,
+						onDragStart: onNodeDragStart,
+						onSourceHandleDown: connection.startFromHandle,
+						onSizeChange: onNodeSizeChange,
+						expanded: expandedNodeIds.has(node.id),
+						onToggleExpanded: onToggleNodeExpanded,
+						renderDetails: renderNodeDetails,
+						renderNode
+					}, node.id))
+				})]
+			}),
+			editable && editingEdge && editorPosition ? /* @__PURE__ */ jsx(EdgeEditor, {
+				edge: editingEdge,
+				sourceName: nodeName(state.nodes[editingEdge.source]),
+				targetName: nodeName(state.nodes[editingEdge.target]),
+				position: editorPosition,
+				autoFocus: state.selection?.type === "edge" && state.selection.created,
+				onChange: (patch) => dispatch({
+					type: "updateEdge",
+					id: editingEdge.id,
+					patch
+				}),
+				onDelete: deleteSelection,
+				onClose: () => dispatch({
+					type: "setSelection",
+					selection: null
+				})
+			}, editingEdge.id) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "graph-hud",
+				"aria-hidden": true,
+				children: [highlight ? /* @__PURE__ */ jsxs("span", {
+					className: "graph-hud__legend",
+					children: [
+						/* @__PURE__ */ jsx("span", { className: "graph-hud__swatch graph-hud__swatch--upstream" }),
+						"Depends on (",
+						countRole(highlight.nodes, "upstream"),
+						")",
+						/* @__PURE__ */ jsx("span", { className: "graph-hud__swatch graph-hud__swatch--downstream" }),
+						"Depended on by (",
+						countRole(highlight.nodes, "downstream"),
+						")"
+					]
+				}) : null, /* @__PURE__ */ jsx("span", { children: editable ? "Scroll to zoom · Drag empty space to pan · Drag right handle to connect · Click a line to edit · Del to remove" : "Scroll to zoom · Drag empty space to pan · Click a node for details · Hover a node to see its dependencies" })]
+			})
+		]
+	});
+}
+/**
+* Chip text for a chain node: its relation to the previous node on the chain.
+* Several routes with different relations are comma-joined, each once.
+*/
+function formatRelations(list) {
+	if (!list?.length) return void 0;
+	return [...new Set(list.map((entry) => entry.relation))].join(", ");
+}
+/** `data.title` when the node has one (built-in card data), else its id. */
+function nodeName(node) {
+	if (!node) return "";
+	const title = node.data?.title;
+	return typeof title === "string" && title ? title : node.id;
+}
+function countRole(nodes, role) {
+	let count = 0;
+	for (const value of nodes.values()) if (value === role) count++;
+	return count;
+}
+//#endregion
+//#region src/graph/layout.ts
+var COLUMN_GAP = 120;
+var ROW_GAP = 48;
+var ORIGIN_X = 0;
+var ORIGIN_Y = 0;
+function layoutColumns(inputs) {
+	const widths = /* @__PURE__ */ new Map();
+	for (const input of inputs) {
+		const w = input.width ?? 300;
+		widths.set(input.column, Math.max(widths.get(input.column) ?? 0, w));
+	}
+	const columnX = /* @__PURE__ */ new Map();
+	let x = ORIGIN_X;
+	const sortedColumns = [...new Set(inputs.map((i) => i.column))].sort((a, b) => a - b);
+	for (const col of sortedColumns) {
+		columnX.set(col, x);
+		x += (widths.get(col) ?? 300) + COLUMN_GAP;
+	}
+	return inputs.map((input) => {
+		const width = input.width ?? 300;
+		const height = input.height ?? 150;
+		const position = input.position ?? {
+			x: columnX.get(input.column) ?? 0,
+			y: ORIGIN_Y + input.row * (height + ROW_GAP)
+		};
+		return {
+			id: input.id,
+			position,
+			width,
+			height,
+			data: input.data
+		};
+	});
+}
+//#endregion
+export { GraphCanvas, createInitialState, darkGraphTheme, defaultGraphTheme, getDependencyHighlight, getDownstream, getUpstream, graphThemes, layoutColumns, lightGraphTheme, resolveGraphTheme, useColorMode, useSystemColorMode, wouldCreateCycle };