@yggy-tech/graphraum 0.0.0-stage → 0.28.0

package/dist/index.js

@@ -0,0 +1,3178 @@
+import { Box3, CanvasTexture, Color, InstancedBufferAttribute, InstancedMesh, MOUSE, Matrix4, MeshBasicMaterial, OrthographicCamera, PerspectiveCamera, Plane, PlaneGeometry, Raycaster, RepeatWrapping, SRGBColorSpace, Scene, ShaderMaterial, SphereGeometry, Texture, Vector2, Vector3, WebGLRenderer } from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+//#region src/node-axes.ts
+function assertPositiveFinite(value, axis, nodeId) {
+	if (!Number.isFinite(value) || value <= 0) {
+		const preamble = nodeId === void 0 ? "" : `Node "${nodeId}" `;
+		throw new Error(`${preamble}${axis} must be a positive finite number`);
+	}
+}
+function resolveNodeAxes(input) {
+	const { defaultSize = 4, height, nodeId, size, width } = input;
+	const resolvedWidth = width ?? size ?? defaultSize;
+	const resolvedHeight = height ?? size ?? defaultSize;
+	assertPositiveFinite(resolvedWidth, "width", nodeId);
+	assertPositiveFinite(resolvedHeight, "height", nodeId);
+	return {
+		width: resolvedWidth,
+		height: resolvedHeight
+	};
+}
+//#endregion
+//#region src/node-shapes.ts
+const graphraumNodeShapes = [
+	"circle",
+	"square",
+	"diamond",
+	"hexagon",
+	"triangle",
+	"pill",
+	"rounded"
+];
+const shapeCodes = {
+	circle: 0,
+	square: 1,
+	diamond: 2,
+	hexagon: 3,
+	triangle: 4,
+	pill: 5,
+	rounded: 6
+};
+function assertNodeShape(nodeId, shape) {
+	if (typeof shape !== "string" || !graphraumNodeShapes.includes(shape)) throw new Error(`Node "${nodeId}" shape must be one of: ${graphraumNodeShapes.map((candidate) => `"${candidate}"`).join(", ")}`);
+}
+function encodeNodeShape(shape) {
+	return shapeCodes[shape ?? "circle"];
+}
+/** Half-height of the horizontal pill's rounded caps, in unit space. */
+const PILL_CAP_RADIUS = .5;
+/** Half-length of the pill's straight segment, in unit space (leaves room for the caps within [-1, 1]). */
+const PILL_HALF_LENGTH = 1 - PILL_CAP_RADIUS;
+/** Apothem of a regular hexagon whose pointy left/right vertices reach x = ±1. */
+const HEXAGON_APOTHEM = Math.sqrt(3) / 2;
+/** Y of the upward triangle's flat base, given an apex at (0, 1) and an equilateral shape spanning x = [-1, 1]. */
+const TRIANGLE_BASE_Y = 1 - Math.sqrt(3);
+/** Fraction of the rounded rectangle's half-extent used as the corner radius. */
+const ROUNDED_CORNER_RADIUS = .25;
+function containsHexagon(x, y) {
+	const absX = Math.abs(x);
+	const absY = Math.abs(y);
+	return Math.max(absY, absX * HEXAGON_APOTHEM + absY * .5) <= HEXAGON_APOTHEM;
+}
+function edgeCross(ax, ay, bx, by, px, py) {
+	return (bx - ax) * (py - ay) - (by - ay) * (px - ax);
+}
+function containsTriangle(x, y) {
+	const apexX = 0;
+	const apexY = 1;
+	const rightX = 1;
+	const leftX = -1;
+	const baseY = TRIANGLE_BASE_Y;
+	const d1 = edgeCross(apexX, apexY, rightX, baseY, x, y);
+	const d2 = edgeCross(rightX, baseY, leftX, baseY, x, y);
+	const d3 = edgeCross(leftX, baseY, apexX, apexY, x, y);
+	return !((d1 < 0 || d2 < 0 || d3 < 0) && (d1 > 0 || d2 > 0 || d3 > 0));
+}
+function containsPill(x, y) {
+	const dx = x - Math.max(-.5, Math.min(PILL_HALF_LENGTH, x));
+	return dx * dx + y * y <= PILL_CAP_RADIUS * PILL_CAP_RADIUS;
+}
+function containsRounded(x, y) {
+	const innerHalfExtent = 1 - ROUNDED_CORNER_RADIUS;
+	const qx = Math.abs(x) - innerHalfExtent;
+	const qy = Math.abs(y) - innerHalfExtent;
+	const outsideX = Math.max(qx, 0);
+	const outsideY = Math.max(qy, 0);
+	return Math.sqrt(outsideX * outsideX + outsideY * outsideY) + Math.min(Math.max(qx, qy), 0) - ROUNDED_CORNER_RADIUS <= 0;
+}
+function containsNodePoint(shape, x, y) {
+	switch (shape ?? "circle") {
+		case "square": return Math.max(Math.abs(x), Math.abs(y)) <= 1;
+		case "diamond": return Math.abs(x) + Math.abs(y) <= 1;
+		case "hexagon": return containsHexagon(x, y);
+		case "triangle": return containsTriangle(x, y);
+		case "pill": return containsPill(x, y);
+		case "rounded": return containsRounded(x, y);
+		default: return x ** 2 + y ** 2 <= 1;
+	}
+}
+//#endregion
+//#region src/edge-endpoint-attach.ts
+const DEFAULT_ENDPOINT_ATTACH = "boundary";
+const DEFAULT_ENDPOINT_CLEARANCE = .75;
+function isInsideOutline(outline, worldX, worldY, center) {
+	const { height, width } = resolveNodeAxes({
+		height: outline.height,
+		size: outline.size,
+		width: outline.width
+	});
+	const stroke = Math.max(0, outline.strokeWidth ?? 0);
+	const halfWidth = width + stroke;
+	const halfHeight = height + stroke;
+	if (halfWidth <= 0 || halfHeight <= 0) return false;
+	return containsNodePoint(outline.shape, (worldX - center.x) / halfWidth, (worldY - center.y) / halfHeight);
+}
+/**
+* Walk from the node center toward the far point and stop on the outline,
+* then pull back by `clearance` so the stroke is not stabbed.
+*/
+function attachPointOnOutline(center, far, outline, clearance = DEFAULT_ENDPOINT_CLEARANCE) {
+	const dx = far.x - center.x;
+	const dy = far.y - center.y;
+	const dz = (far.z ?? 0) - (center.z ?? 0);
+	const length = Math.hypot(dx, dy, dz);
+	if (length < 1e-6) return {
+		x: center.x,
+		y: center.y,
+		z: center.z ?? 0
+	};
+	let low = 0;
+	let high = 1;
+	for (let step = 0; step < 24; step += 1) {
+		const mid = (low + high) / 2;
+		if (isInsideOutline(outline, center.x + dx * mid, center.y + dy * mid, center)) low = mid;
+		else high = mid;
+	}
+	const clearanceT = Math.min(Math.max(clearance, 0) / length, .45);
+	const t = Math.max(0, low - clearanceT);
+	return {
+		x: center.x + dx * t,
+		y: center.y + dy * t,
+		z: (center.z ?? 0) + dz * t
+	};
+}
+/** Trim both ends of a center-to-center chord (or curve endpoints) to node boundaries. */
+function trimEdgeEndpoints(input) {
+	if ((input.attach ?? "boundary") === "center") return {
+		source: {
+			x: input.source.x,
+			y: input.source.y,
+			z: input.source.z ?? 0
+		},
+		target: {
+			x: input.target.x,
+			y: input.target.y,
+			z: input.target.z ?? 0
+		}
+	};
+	const clearance = input.clearance ?? .75;
+	const source = attachPointOnOutline(input.source, input.target, input.sourceOutline, clearance);
+	const target = attachPointOnOutline(input.target, input.source, input.targetOutline, clearance);
+	const ox = input.target.x - input.source.x;
+	const oy = input.target.y - input.source.y;
+	const oz = (input.target.z ?? 0) - (input.source.z ?? 0);
+	const dx = target.x - source.x;
+	const dy = target.y - source.y;
+	const dz = (target.z ?? 0) - (source.z ?? 0);
+	if (dx * ox + dy * oy + dz * oz <= 1e-8) return {
+		source: {
+			x: input.source.x,
+			y: input.source.y,
+			z: input.source.z ?? 0
+		},
+		target: {
+			x: input.target.x,
+			y: input.target.y,
+			z: input.target.z ?? 0
+		}
+	};
+	return {
+		source,
+		target
+	};
+}
+//#endregion
+//#region src/edge-styles.ts
+const graphraumEdgeStyles = [
+	"solid",
+	"dashed",
+	"dotted"
+];
+const graphraumEdgeMarkers = ["none", "triangle"];
+const graphraumEdgeMarkerEnds = [
+	"target",
+	"source",
+	"both"
+];
+const graphraumEdgePaths = [
+	"straight",
+	"quadratic",
+	"cubic"
+];
+const styleCodes = {
+	solid: 0,
+	dashed: 1,
+	dotted: 2
+};
+function assertEdgeStyle(edgeId, style) {
+	if (typeof style !== "string" || !graphraumEdgeStyles.includes(style)) throw new Error(`Edge "${edgeId}" style must be one of: ${graphraumEdgeStyles.map((s) => `"${s}"`).join(", ")}`);
+}
+function assertEdgeMarker(edgeId, marker) {
+	if (typeof marker !== "string" || !graphraumEdgeMarkers.includes(marker)) throw new Error(`Edge "${edgeId}" marker must be one of: ${graphraumEdgeMarkers.map((m) => `"${m}"`).join(", ")}`);
+}
+function assertEdgeMarkerEnd(edgeId, markerEnd) {
+	if (typeof markerEnd !== "string" || !graphraumEdgeMarkerEnds.includes(markerEnd)) throw new Error(`Edge "${edgeId}" markerEnd must be one of: ${graphraumEdgeMarkerEnds.map((m) => `"${m}"`).join(", ")}`);
+}
+function assertEdgePath(edgeId, path) {
+	if (typeof path !== "string" || !graphraumEdgePaths.includes(path)) throw new Error(`Edge "${edgeId}" path must be one of: ${graphraumEdgePaths.map((p) => `"${p}"`).join(", ")}`);
+}
+function assertControlPoint(edgeId, index, point) {
+	if (!Number.isFinite(point.x) || !Number.isFinite(point.y) || point.z !== void 0 && !Number.isFinite(point.z)) throw new Error(`Edge "${edgeId}" controlPoints[${index}] must have finite coordinates`);
+}
+function assertEdgeControlPoints(edgeId, path, controlPoints) {
+	if (controlPoints === void 0) return;
+	for (const [index, point] of controlPoints.entries()) assertControlPoint(edgeId, index, point);
+	const resolvedPath = path ?? "straight";
+	if (resolvedPath === "straight") return;
+	if (controlPoints.length === 0) return;
+	const expected = resolvedPath === "quadratic" ? 1 : 2;
+	if (controlPoints.length !== expected) throw new Error(`Edge "${edgeId}" path "${resolvedPath}" expects ${expected} control point${expected === 1 ? "" : "s"} or none for auto defaults (got ${controlPoints.length})`);
+}
+function assertEdgeVisual(edgeId, visual) {
+	if (visual.width !== void 0 && (!Number.isFinite(visual.width) || visual.width <= 0)) throw new Error(`Edge "${edgeId}" visual must have a positive finite width`);
+	if (visual.opacity !== void 0 && (!Number.isFinite(visual.opacity) || visual.opacity < 0 || visual.opacity > 1)) throw new Error(`Edge "${edgeId}" visual opacity must be a finite number between 0 and 1`);
+	if (visual.markerSize !== void 0 && (!Number.isFinite(visual.markerSize) || visual.markerSize <= 0)) throw new Error(`Edge "${edgeId}" visual must have a positive finite markerSize`);
+	if (visual.style !== void 0) assertEdgeStyle(edgeId, visual.style);
+	if (visual.marker !== void 0) assertEdgeMarker(edgeId, visual.marker);
+	if (visual.markerEnd !== void 0) assertEdgeMarkerEnd(edgeId, visual.markerEnd);
+	if (visual.path !== void 0) assertEdgePath(edgeId, visual.path);
+	assertEdgeControlPoints(edgeId, visual.path, visual.controlPoints);
+}
+function encodeEdgeStyle(style) {
+	return styleCodes[style ?? "solid"];
+}
+//#endregion
+//#region src/force-layout.ts
+const DEFAULT_FORCE_SETTINGS = {
+	centerAttraction: .002,
+	damping: .82,
+	linkDistance: 24,
+	repulsion: 400,
+	springStrength: .005
+};
+function normalizeForceSettings(settings = DEFAULT_FORCE_SETTINGS) {
+	return {
+		centerAttraction: Math.max(0, Math.min(.05, settings.centerAttraction)),
+		damping: Math.max(.1, Math.min(.99, settings.damping)),
+		linkDistance: Math.max(1, Math.min(500, settings.linkDistance)),
+		repulsion: Math.max(0, Math.min(5e3, settings.repulsion)),
+		springStrength: Math.max(1e-4, Math.min(.05, settings.springStrength))
+	};
+}
+function clampLinkDistance(value) {
+	return Math.max(1, Math.min(500, value));
+}
+function clampSpringStrength(value) {
+	return Math.max(1e-4, Math.min(.05, value));
+}
+function normalizePerEdgeArray(name, values, edgeCount, clamp) {
+	if (values === void 0) return null;
+	if (values.length !== edgeCount) throw new Error(`${name} length (${values.length}) must equal edge count (${edgeCount}).`);
+	const normalized = new Float32Array(edgeCount);
+	for (let index = 0; index < edgeCount; index += 1) normalized[index] = clamp(values[index] ?? 0);
+	return normalized;
+}
+function forceIterationCount(nodeCount) {
+	return Math.max(8, Math.min(32, Math.ceil(240 / Math.log2(nodeCount + 2))));
+}
+function resolveForceIterations(nodeCount, iterations) {
+	if (iterations === void 0) return forceIterationCount(nodeCount);
+	if (!Number.isSafeInteger(iterations) || iterations < 1) throw new Error("Force iterations must be a positive integer.");
+	return Math.min(64, iterations);
+}
+function initialPositions({ dimensions, nodeCount }) {
+	const positions = new Float32Array(nodeCount * 3);
+	const extent = Math.max(Math.sqrt(nodeCount) * 6, 24);
+	for (let index = 0; index < nodeCount; index += 1) {
+		const offset = index * 3;
+		const angle = random(index * 4 + 1) * Math.PI * 2;
+		if (dimensions === 2) {
+			const radius = Math.sqrt(random(index * 4 + 2)) * extent * .5;
+			positions.set([
+				Math.cos(angle) * radius,
+				Math.sin(angle) * radius,
+				0
+			], offset);
+			continue;
+		}
+		const zDirection = random(index * 4 + 2) * 2 - 1;
+		const planeRadius = Math.sqrt(1 - zDirection * zDirection);
+		const radius = Math.cbrt(random(index * 4 + 3)) * extent * .5;
+		positions.set([
+			Math.cos(angle) * planeRadius * radius,
+			Math.sin(angle) * planeRadius * radius,
+			zDirection * radius
+		], offset);
+	}
+	return positions;
+}
+function random(seed) {
+	let value = Math.imul(seed ^ 2654435769, 2246822507);
+	value = Math.imul(value ^ value >>> 13, 3266489909);
+	return ((value ^ value >>> 16) >>> 0) / 4294967296;
+}
+function createForceSimulation(request) {
+	const settings = normalizeForceSettings(request.settings);
+	let nodeCount = request.nodeCount;
+	let edges = new Uint32Array(request.edges);
+	if (edges.length % 2 !== 0) throw new Error("Force edges must contain source/target pairs.");
+	const edgeCount = edges.length / 2;
+	let linkDistances = normalizePerEdgeArray("linkDistances", request.linkDistances, edgeCount, clampLinkDistance);
+	let springStrengths = normalizePerEdgeArray("springStrengths", request.springStrengths, edgeCount, clampSpringStrength);
+	let positions = initialPositions(request);
+	let velocities = new Float32Array(positions.length);
+	let forces = new Float32Array(positions.length);
+	let iteration = 0;
+	return {
+		get nodeCount() {
+			return nodeCount;
+		},
+		get edges() {
+			return edges;
+		},
+		get positions() {
+			return positions;
+		},
+		/** Add nodes while preserving every existing position and velocity. */
+		addNodes(count, initial) {
+			if (!Number.isSafeInteger(count) || count < 1) throw new Error("Node count must be a positive integer.");
+			if (initial && initial.length !== count * 3) throw new Error("Initial positions must contain one XYZ triplet per added node.");
+			const start = nodeCount;
+			const nextPositions = new Float32Array((nodeCount + count) * 3);
+			nextPositions.set(positions);
+			const nextVelocities = new Float32Array(nextPositions.length);
+			nextVelocities.set(velocities);
+			const nextForces = new Float32Array(nextPositions.length);
+			nextForces.set(forces);
+			if (initial) nextPositions.set(initial, positions.length);
+			else {
+				const added = initialPositions({
+					dimensions: request.dimensions,
+					nodeCount: count
+				});
+				nextPositions.set(added, positions.length);
+			}
+			positions = nextPositions;
+			velocities = nextVelocities;
+			forces = nextForces;
+			nodeCount += count;
+			return start;
+		},
+		/** Append endpoint indices for new edges; existing edge indices remain stable. */
+		addEdges(nextEdges) {
+			if (nextEdges.length % 2 !== 0) throw new Error("Force edges must contain source/target pairs.");
+			for (const index of nextEdges) if (index >= nodeCount) throw new Error(`Force edge references missing node index: ${index}`);
+			const addedEdgeCount = nextEdges.length / 2;
+			const merged = new Uint32Array(edges.length + nextEdges.length);
+			merged.set(edges);
+			merged.set(nextEdges, edges.length);
+			edges = merged;
+			if (linkDistances) {
+				const next = new Float32Array(linkDistances.length + addedEdgeCount);
+				next.set(linkDistances);
+				next.fill(settings.linkDistance, linkDistances.length);
+				linkDistances = next;
+			}
+			if (springStrengths) {
+				const next = new Float32Array(springStrengths.length + addedEdgeCount);
+				next.set(springStrengths);
+				next.fill(settings.springStrength, springStrengths.length);
+				springStrengths = next;
+			}
+		},
+		step(alpha) {
+			if (nodeCount === 0) return;
+			forces.fill(0);
+			for (let index = 0; index < nodeCount; index += 1) {
+				const offset = index * 3;
+				forces[offset] = -(positions[offset] ?? 0) * settings.centerAttraction * alpha;
+				forces[offset + 1] = -(positions[offset + 1] ?? 0) * settings.centerAttraction * alpha;
+				forces[offset + 2] = request.dimensions === 3 ? -(positions[offset + 2] ?? 0) * settings.centerAttraction * alpha : 0;
+				for (let sample = 0; sample < 8; sample += 1) {
+					const targetIndex = Math.floor(random(index * 97 + sample * 17 + iteration * 13) * nodeCount);
+					if (targetIndex === index) continue;
+					const target = targetIndex * 3;
+					const dx = (positions[offset] ?? 0) - (positions[target] ?? 0);
+					const dy = (positions[offset + 1] ?? 0) - (positions[target + 1] ?? 0);
+					const dz = request.dimensions === 3 ? (positions[offset + 2] ?? 0) - (positions[target + 2] ?? 0) : 0;
+					const distanceSquared = dx * dx + dy * dy + dz * dz + 16;
+					const scale = Math.min(2, settings.repulsion / distanceSquared) * alpha / Math.sqrt(distanceSquared);
+					forces[offset] += dx * scale;
+					forces[offset + 1] += dy * scale;
+					if (request.dimensions === 3) forces[offset + 2] += dz * scale;
+				}
+			}
+			for (let index = 0; index < edges.length; index += 2) {
+				const edgeIndex = index / 2;
+				const source = (edges[index] ?? 0) * 3;
+				const target = (edges[index + 1] ?? 0) * 3;
+				const dx = (positions[target] ?? 0) - (positions[source] ?? 0);
+				const dy = (positions[target + 1] ?? 0) - (positions[source + 1] ?? 0);
+				const dz = request.dimensions === 3 ? (positions[target + 2] ?? 0) - (positions[source + 2] ?? 0) : 0;
+				const distance = Math.sqrt(Math.max(dx * dx + dy * dy + dz * dz, 1e-4));
+				const linkDistance = linkDistances?.[edgeIndex] ?? settings.linkDistance;
+				const springStrength = springStrengths?.[edgeIndex] ?? settings.springStrength;
+				const force = Math.max(-1, Math.min(1, (distance - linkDistance) * springStrength * alpha)) / distance;
+				forces[source] += dx * force;
+				forces[source + 1] += dy * force;
+				forces[target] -= dx * force;
+				forces[target + 1] -= dy * force;
+				if (request.dimensions === 3) {
+					forces[source + 2] += dz * force;
+					forces[target + 2] -= dz * force;
+				}
+			}
+			for (let index = 0; index < nodeCount; index += 1) {
+				const offset = index * 3;
+				let vx = ((velocities[offset] ?? 0) + (forces[offset] ?? 0)) * settings.damping;
+				let vy = ((velocities[offset + 1] ?? 0) + (forces[offset + 1] ?? 0)) * settings.damping;
+				let vz = request.dimensions === 3 ? ((velocities[offset + 2] ?? 0) + (forces[offset + 2] ?? 0)) * settings.damping : 0;
+				const speed = Math.hypot(vx, vy, vz);
+				const maxSpeed = .5 + alpha * 8;
+				if (speed > maxSpeed) {
+					const scale = maxSpeed / speed;
+					vx *= scale;
+					vy *= scale;
+					vz *= scale;
+				}
+				velocities[offset] = vx;
+				velocities[offset + 1] = vy;
+				velocities[offset + 2] = vz;
+				positions[offset] = (positions[offset] ?? 0) + vx;
+				positions[offset + 1] = (positions[offset + 1] ?? 0) + vy;
+				positions[offset + 2] = request.dimensions === 3 ? (positions[offset + 2] ?? 0) + vz : 0;
+			}
+			const center = [
+				0,
+				0,
+				0
+			];
+			for (let index = 0; index < nodeCount; index += 1) {
+				const offset = index * 3;
+				center[0] += positions[offset] ?? 0;
+				center[1] += positions[offset + 1] ?? 0;
+				if (request.dimensions === 3) center[2] += positions[offset + 2] ?? 0;
+			}
+			for (let axis = 0; axis < request.dimensions; axis += 1) center[axis] /= nodeCount;
+			for (let index = 0; index < nodeCount; index += 1) {
+				const offset = index * 3;
+				for (let axis = 0; axis < request.dimensions; axis += 1) positions[offset + axis] -= center[axis];
+			}
+			iteration += 1;
+		}
+	};
+}
+function computeForcePositions(request) {
+	const simulation = createForceSimulation(request);
+	const iterations = resolveForceIterations(request.nodeCount, request.iterations);
+	for (let iteration = 0; iteration < iterations; iteration += 1) simulation.step(1 - iteration / iterations);
+	return simulation.positions;
+}
+function computeClusteredForcePositions(request) {
+	if (request.clusters.length !== request.nodeCount) throw new Error("Cluster index count must match node count.");
+	let clusterCount = 0;
+	for (const cluster of request.clusters) clusterCount = Math.max(clusterCount, cluster + 1);
+	const clusterEdges = new Uint32Array(request.edges.length);
+	let edgeCursor = 0;
+	for (let index = 0; index < request.edges.length; index += 2) {
+		const source = request.clusters[request.edges[index] ?? 0];
+		const target = request.clusters[request.edges[index + 1] ?? 0];
+		if (source === void 0 || target === void 0 || source === target) continue;
+		clusterEdges[edgeCursor++] = source;
+		clusterEdges[edgeCursor++] = target;
+	}
+	const centers = computeForcePositions({
+		dimensions: request.dimensions,
+		edges: clusterEdges.subarray(0, edgeCursor),
+		nodeCount: clusterCount,
+		settings: request.settings
+	});
+	const clusterSizes = new Uint32Array(clusterCount);
+	for (const cluster of request.clusters) clusterSizes[cluster] += 1;
+	const positions = new Float32Array(request.nodeCount * 3);
+	for (let index = 0; index < request.nodeCount; index += 1) {
+		const offset = index * 3;
+		const cluster = request.clusters[index] ?? 0;
+		const center = cluster * 3;
+		const radius = Math.sqrt(clusterSizes[cluster] ?? 1) * Math.sqrt(random(index * 4 + 2)) * 2;
+		const angle = random(index * 4 + 1) * Math.PI * 2;
+		positions[offset] = (centers[center] ?? 0) * 12 + Math.cos(angle) * radius;
+		positions[offset + 1] = (centers[center + 1] ?? 0) * 12 + Math.sin(angle) * radius;
+		if (request.dimensions === 3) {
+			const zDirection = random(index * 4 + 3) * 2 - 1;
+			positions[offset + 2] = (centers[center + 2] ?? 0) * 12 + zDirection * radius;
+		}
+	}
+	return positions;
+}
+//#endregion
+//#region src/graphology.ts
+function projectGraphology(graph) {
+	const nodes = graph.mapNodes((id, attributes) => ({
+		attributes,
+		color: attributes.color,
+		id,
+		position: {
+			x: attributes.x ?? 0,
+			y: attributes.y ?? 0,
+			z: attributes.z
+		},
+		shape: attributes.shape,
+		size: attributes.size
+	}));
+	return {
+		edges: graph.mapEdges((id, attributes, source, target) => ({
+			attributes,
+			color: attributes.color,
+			id,
+			source,
+			target
+		})),
+		nodes
+	};
+}
+/** Projects a mutable Graphology graph into Graphraum and keeps the binding alive until disposed. */
+function bindGraphology(renderer, graph) {
+	renderer.setData(projectGraphology(graph));
+	let flushPending = false;
+	let disposed = false;
+	const flush = () => {
+		flushPending = false;
+		if (disposed) return;
+		renderer.setData(projectGraphology(graph));
+	};
+	const schedule = () => {
+		if (flushPending) return;
+		flushPending = true;
+		queueMicrotask(flush);
+	};
+	graph.on("nodeAttributesUpdated", schedule);
+	graph.on("eachNodeAttributesUpdated", schedule);
+	graph.on("nodeAdded", schedule);
+	graph.on("nodeDropped", schedule);
+	graph.on("edgeAdded", schedule);
+	graph.on("edgeDropped", schedule);
+	graph.on("edgeAttributesUpdated", schedule);
+	graph.on("eachEdgeAttributesUpdated", schedule);
+	graph.on("cleared", schedule);
+	graph.on("edgesCleared", schedule);
+	return () => {
+		disposed = true;
+		graph.off("nodeAttributesUpdated", schedule);
+		graph.off("eachNodeAttributesUpdated", schedule);
+		graph.off("nodeAdded", schedule);
+		graph.off("nodeDropped", schedule);
+		graph.off("edgeAdded", schedule);
+		graph.off("edgeDropped", schedule);
+		graph.off("edgeAttributesUpdated", schedule);
+		graph.off("eachEdgeAttributesUpdated", schedule);
+		graph.off("cleared", schedule);
+		graph.off("edgesCleared", schedule);
+	};
+}
+//#endregion
+//#region src/camera-aspect.ts
+/** Canvas aspect used by perspective cameras. Never 0. */
+function containerAspect(width, height) {
+	return Math.max(width, 1) / Math.max(height, 1);
+}
+/** Keep a perspective camera from stretching on a non-square canvas. */
+function applyPerspectiveContainerAspect(camera, width, height) {
+	camera.aspect = containerAspect(width, height);
+}
+//#endregion
+//#region src/compile-graph.ts
+function assertFinitePosition(nodeId, axis, value) {
+	if (!Number.isFinite(value)) throw new Error(`Node "${nodeId}" has a non-finite ${axis} position`);
+}
+function assertNotEmpty(value, message) {
+	if (value.trim().length === 0) throw new Error(message);
+}
+function compilePresentation(kind, id, presentation) {
+	const prefix = `${kind} "${id}" presentation`;
+	assertNotEmpty(presentation.title, `${prefix} title must not be empty`);
+	if (presentation.subtitle !== void 0) assertNotEmpty(presentation.subtitle, `${prefix} subtitle must not be empty`);
+	const propertyIds = /* @__PURE__ */ new Set();
+	const properties = (presentation.properties ?? []).map((property) => {
+		assertNotEmpty(property.id, `${prefix} property id must not be empty`);
+		assertNotEmpty(property.label, `${prefix} property "${property.id}" label must not be empty`);
+		if (propertyIds.has(property.id)) throw new Error(`${prefix} has duplicate property id "${property.id}"`);
+		propertyIds.add(property.id);
+		if (typeof property.value === "number" && !Number.isFinite(property.value)) throw new Error(`${prefix} property "${property.id}" must have a finite numeric value`);
+		if (property.value !== null && ![
+			"boolean",
+			"number",
+			"string"
+		].includes(typeof property.value)) throw new Error(`${prefix} property "${property.id}" must have a serializable scalar value`);
+		return Object.freeze({ ...property });
+	});
+	const actionIds = /* @__PURE__ */ new Set();
+	const actions = (presentation.actions ?? []).map((action) => {
+		assertNotEmpty(action.id, `${prefix} action id must not be empty`);
+		assertNotEmpty(action.label, `${prefix} action "${action.id}" label must not be empty`);
+		if (action.disabled !== void 0 && typeof action.disabled !== "boolean") throw new Error(`${prefix} action "${action.id}" disabled must be a boolean`);
+		if (actionIds.has(action.id)) throw new Error(`${prefix} has duplicate action id "${action.id}"`);
+		actionIds.add(action.id);
+		return Object.freeze({ ...action });
+	});
+	return Object.freeze({
+		...presentation,
+		actions: Object.freeze(actions),
+		properties: Object.freeze(properties)
+	});
+}
+function assertPositiveFiniteVisual(id, field, value) {
+	if (value !== void 0 && (!Number.isFinite(value) || value <= 0)) throw new Error(`Node "${id}" visual must have a positive finite ${field}`);
+}
+function assertNonNegativeFiniteVisual(id, field, value) {
+	if (value !== void 0 && (!Number.isFinite(value) || value < 0)) throw new Error(`Node "${id}" visual must have a finite non-negative ${field}`);
+}
+function compileNodeVisual(id, visual) {
+	assertPositiveFiniteVisual(id, "size", visual.size);
+	assertPositiveFiniteVisual(id, "width", visual.width);
+	assertPositiveFiniteVisual(id, "height", visual.height);
+	assertNonNegativeFiniteVisual(id, "strokeWidth", visual.strokeWidth);
+	if (visual.shape !== void 0) assertNodeShape(id, visual.shape);
+	return Object.freeze({ ...visual });
+}
+function compileEdgeVisual(id, visual) {
+	assertEdgeVisual(id, visual);
+	return Object.freeze({ ...visual });
+}
+/** Validates graph identity and compiles lookup-heavy objects into GPU-oriented position buffers. */
+function compileGraph(data, visuals) {
+	const nodeIndices = /* @__PURE__ */ new Map();
+	const nodePositions = new Float32Array(data.nodes.length * 3);
+	const nodePresentations = /* @__PURE__ */ new Map();
+	const nodeVisuals = [];
+	for (const [index, node] of data.nodes.entries()) {
+		if (nodeIndices.has(node.id)) throw new Error(`Duplicate node id: "${node.id}"`);
+		assertFinitePosition(node.id, "x", node.position.x);
+		assertFinitePosition(node.id, "y", node.position.y);
+		assertFinitePosition(node.id, "z", node.position.z ?? 0);
+		const encoding = visuals?.node?.(node);
+		const visual = compileNodeVisual(node.id, encoding?.visual ?? {
+			color: node.color,
+			height: node.height,
+			shape: node.shape,
+			size: node.size,
+			strokeColor: node.strokeColor,
+			strokeWidth: node.strokeWidth,
+			width: node.width
+		});
+		nodeVisuals.push(visual);
+		if (encoding?.presentation) nodePresentations.set(node.id, compilePresentation("Node", node.id, encoding.presentation));
+		nodeIndices.set(node.id, index);
+		nodePositions.set([
+			node.position.x,
+			node.position.y,
+			node.position.z ?? 0
+		], index * 3);
+	}
+	const edgeIds = /* @__PURE__ */ new Set();
+	const edgeNodeIndices = new Uint32Array(data.edges.length * 2);
+	const edgePositions = new Float32Array(data.edges.length * 6);
+	const edgePresentations = /* @__PURE__ */ new Map();
+	const edgeVisuals = [];
+	const incidentEdgeIndices = Array.from({ length: data.nodes.length }, () => []);
+	for (const [index, edge] of data.edges.entries()) {
+		if (edgeIds.has(edge.id)) throw new Error(`Duplicate edge id: "${edge.id}"`);
+		edgeIds.add(edge.id);
+		const encoding = visuals?.edge?.(edge);
+		const visual = compileEdgeVisual(edge.id, {
+			color: edge.color,
+			width: edge.width,
+			opacity: edge.opacity,
+			style: edge.style,
+			marker: edge.marker,
+			markerSize: edge.markerSize,
+			markerEnd: edge.markerEnd,
+			path: edge.path,
+			controlPoints: edge.controlPoints,
+			...encoding?.visual
+		});
+		edgeVisuals.push(visual);
+		if (encoding?.presentation) edgePresentations.set(edge.id, compilePresentation("Edge", edge.id, encoding.presentation));
+		const sourceIndex = nodeIndices.get(edge.source);
+		const targetIndex = nodeIndices.get(edge.target);
+		if (sourceIndex === void 0) throw new Error(`Edge "${edge.id}" references missing source "${edge.source}"`);
+		if (targetIndex === void 0) throw new Error(`Edge "${edge.id}" references missing target "${edge.target}"`);
+		edgeNodeIndices.set([sourceIndex, targetIndex], index * 2);
+		incidentEdgeIndices[sourceIndex]?.push(index);
+		if (targetIndex !== sourceIndex) incidentEdgeIndices[targetIndex]?.push(index);
+		edgePositions.set(nodePositions.subarray(sourceIndex * 3, sourceIndex * 3 + 3), index * 6);
+		edgePositions.set(nodePositions.subarray(targetIndex * 3, targetIndex * 3 + 3), index * 6 + 3);
+	}
+	return {
+		edgeNodeIndices,
+		edgePositions,
+		edgePresentations,
+		edgeVisuals,
+		incidentEdgeIndices,
+		nodeIds: data.nodes.map((node) => node.id),
+		nodeIndices,
+		nodePositions,
+		nodePresentations,
+		nodeVisuals
+	};
+}
+//#endregion
+//#region src/data-patch.ts
+/** Merge additions and removals into a dense graph snapshot. Cascades edges whose endpoints vanish. */
+function mergeDataPatch(currentNodes, currentEdges, patch) {
+	const removedNodes = new Set(patch.removedNodeIds ?? []);
+	const removedEdges = new Set(patch.removedEdgeIds ?? []);
+	const nodes = new Map(currentNodes.map((node) => [node.id, node]));
+	const edges = new Map(currentEdges.map((edge) => [edge.id, edge]));
+	for (const id of removedNodes) nodes.delete(id);
+	for (const id of removedEdges) edges.delete(id);
+	for (const node of patch.addedNodes ?? []) nodes.set(node.id, node);
+	for (const edge of patch.addedEdges ?? []) edges.set(edge.id, edge);
+	return {
+		nodes: [...nodes.values()],
+		edges: [...edges.values()].filter((edge) => nodes.has(edge.source) && nodes.has(edge.target))
+	};
+}
+/** True when the merged live graph fits the already-allocated mesh capacities. */
+function dataPatchFitsCapacity(merged, capacity) {
+	return merged.nodes.length <= capacity.nodes && merged.edges.length <= capacity.edges;
+}
+/** True when the patch is add-only and can grow dense arrays without rewriting survivors. */
+function isAppendOnlyDataPatch(patch) {
+	return (patch.removedNodeIds?.length ?? 0) === 0 && (patch.removedEdgeIds?.length ?? 0) === 0;
+}
+//#endregion
+//#region src/edge-paths.ts
+const AUTO_OFFSET_FRACTION = .18;
+function segmentCountForPath(path, tier) {
+	if (tier === "overview") return 1;
+	const resolved = path ?? "straight";
+	if (resolved === "quadratic") return 16;
+	if (resolved === "cubic") return 24;
+	return 1;
+}
+function autoControlPoints(path, x1, y1, z1, x2, y2, z2) {
+	const dx = x2 - x1;
+	const dy = y2 - y1;
+	const length = Math.hypot(dx, dy);
+	const offset = length * AUTO_OFFSET_FRACTION;
+	const nx = length > 0 ? -dy / length : 0;
+	const ny = length > 0 ? dx / length : 1;
+	if (path === "quadratic") return [{
+		x: (x1 + x2) / 2 + nx * offset,
+		y: (y1 + y2) / 2 + ny * offset,
+		z: (z1 + z2) / 2
+	}];
+	if (path === "cubic") return [{
+		x: x1 + dx / 3 + nx * offset,
+		y: y1 + dy / 3 + ny * offset,
+		z: z1 + (z2 - z1) / 3
+	}, {
+		x: x1 + dx * 2 / 3 - nx * offset,
+		y: y1 + dy * 2 / 3 - ny * offset,
+		z: z1 + (z2 - z1) * 2 / 3
+	}];
+	return [];
+}
+function lerp(a, b, t) {
+	return a + (b - a) * t;
+}
+function sampleQuadratic(x1, y1, z1, cx, cy, cz, x2, y2, z2, t) {
+	const u = 1 - t;
+	return {
+		x: u * u * x1 + 2 * u * t * cx + t * t * x2,
+		y: u * u * y1 + 2 * u * t * cy + t * t * y2,
+		z: u * u * z1 + 2 * u * t * cz + t * t * z2
+	};
+}
+function sampleCubic(x1, y1, z1, c1x, c1y, c1z, c2x, c2y, c2z, x2, y2, z2, t) {
+	const u = 1 - t;
+	return {
+		x: u * u * u * x1 + 3 * u * u * t * c1x + 3 * u * t * t * c2x + t * t * t * x2,
+		y: u * u * u * y1 + 3 * u * u * t * c1y + 3 * u * t * t * c2y + t * t * t * y2,
+		z: u * u * u * z1 + 3 * u * u * t * c1z + 3 * u * t * t * c2z + t * t * t * z2
+	};
+}
+function resolveControlPoints(path, controlPoints, x1, y1, z1, x2, y2, z2) {
+	if (path === "straight") return [];
+	if (controlPoints && controlPoints.length > 0) return controlPoints;
+	return autoControlPoints(path, x1, y1, z1, x2, y2, z2);
+}
+function sampleEdgePath(input) {
+	const path = input.tier === "overview" ? "straight" : input.path ?? "straight";
+	const segments = segmentCountForPath(path, input.tier);
+	if (path === "straight" || segments <= 1) return [{
+		x: input.x1,
+		y: input.y1,
+		z: input.z1
+	}, {
+		x: input.x2,
+		y: input.y2,
+		z: input.z2
+	}];
+	const controls = resolveControlPoints(path, input.controlPoints, input.x1, input.y1, input.z1, input.x2, input.y2, input.z2);
+	const points = [];
+	for (let index = 0; index <= segments; index += 1) {
+		const t = index / segments;
+		if (path === "quadratic") {
+			const control = controls[0] ?? {
+				x: lerp(input.x1, input.x2, .5),
+				y: lerp(input.y1, input.y2, .5),
+				z: lerp(input.z1, input.z2, .5)
+			};
+			points.push(sampleQuadratic(input.x1, input.y1, input.z1, control.x, control.y, control.z ?? 0, input.x2, input.y2, input.z2, t));
+		} else {
+			const c1 = controls[0] ?? {
+				x: lerp(input.x1, input.x2, 1 / 3),
+				y: lerp(input.y1, input.y2, 1 / 3),
+				z: lerp(input.z1, input.z2, 1 / 3)
+			};
+			const c2 = controls[1] ?? {
+				x: lerp(input.x1, input.x2, 2 / 3),
+				y: lerp(input.y1, input.y2, 2 / 3),
+				z: lerp(input.z1, input.z2, 2 / 3)
+			};
+			points.push(sampleCubic(input.x1, input.y1, input.z1, c1.x, c1.y, c1.z ?? 0, c2.x, c2.y, c2.z ?? 0, input.x2, input.y2, input.z2, t));
+		}
+	}
+	return points;
+}
+//#endregion
+//#region src/edge-materialize.ts
+function packEdgeInstances(input) {
+	const segments = [];
+	const markers = [];
+	let truncated = false;
+	const attach = input.endpointAttach ?? "boundary";
+	const clearance = input.endpointClearance ?? .75;
+	for (const edgeIndex of input.edgeIndices) {
+		const visual = input.edgeVisuals[edgeIndex] ?? {};
+		const base = edgeIndex * 6;
+		let x1 = input.endpointPositions[base] ?? 0;
+		let y1 = input.endpointPositions[base + 1] ?? 0;
+		let z1 = input.endpointPositions[base + 2] ?? 0;
+		let x2 = input.endpointPositions[base + 3] ?? 0;
+		let y2 = input.endpointPositions[base + 4] ?? 0;
+		let z2 = input.endpointPositions[base + 5] ?? 0;
+		if (attach === "boundary" && input.nodeOutlines && input.edgeNodeIndices) {
+			const sourceIndex = input.edgeNodeIndices[edgeIndex * 2] ?? 0;
+			const targetIndex = input.edgeNodeIndices[edgeIndex * 2 + 1] ?? 0;
+			const sourceOutline = input.nodeOutlines[sourceIndex] ?? {};
+			const targetOutline = input.nodeOutlines[targetIndex] ?? {};
+			const trimmed = trimEdgeEndpoints({
+				attach,
+				clearance,
+				source: {
+					x: x1,
+					y: y1,
+					z: z1
+				},
+				target: {
+					x: x2,
+					y: y2,
+					z: z2
+				},
+				sourceOutline,
+				targetOutline
+			});
+			x1 = trimmed.source.x;
+			y1 = trimmed.source.y;
+			z1 = trimmed.source.z ?? 0;
+			x2 = trimmed.target.x;
+			y2 = trimmed.target.y;
+			z2 = trimmed.target.z ?? 0;
+		}
+		const color = visual.color ?? input.defaults.color;
+		const width = input.tier === "overview" ? input.defaults.width : visual.width ?? input.defaults.width;
+		const opacity = input.tier === "overview" ? input.defaults.opacity : visual.opacity ?? input.defaults.opacity;
+		const style = input.tier === "overview" ? "solid" : visual.style ?? "solid";
+		const points = sampleEdgePath({
+			path: visual.path,
+			controlPoints: visual.controlPoints,
+			tier: input.tier,
+			x1,
+			y1,
+			z1,
+			x2,
+			y2,
+			z2
+		});
+		const segmentSpans = Math.max(0, points.length - 1);
+		if (input.maxSegments !== void 0 && segments.length + segmentSpans > input.maxSegments) {
+			truncated = true;
+			break;
+		}
+		for (let index = 0; index < segmentSpans; index += 1) {
+			const from = points[index];
+			const to = points[index + 1];
+			if (!from || !to) continue;
+			segments.push({
+				edgeIndex,
+				x1: from.x,
+				y1: from.y,
+				z1: from.z ?? 0,
+				x2: to.x,
+				y2: to.y,
+				z2: to.z ?? 0,
+				color,
+				width,
+				opacity,
+				style
+			});
+		}
+		if (input.tier === "overview") continue;
+		if ((visual.marker ?? "none") === "none") continue;
+		const markerSize = (visual.markerSize ?? 1) * width;
+		const ends = visual.markerEnd ?? "target";
+		const first = points[0];
+		const second = points[1] ?? points[0];
+		const last = points.at(-1);
+		const previous = points.at(-2) ?? last;
+		if (!first || !second || !last || !previous) continue;
+		const add = (end) => {
+			const fromSource = end === "source";
+			markers.push({
+				edgeIndex,
+				end,
+				x: fromSource ? first.x : last.x,
+				y: fromSource ? first.y : last.y,
+				z: fromSource ? first.z ?? 0 : last.z ?? 0,
+				dx: fromSource ? first.x - second.x : last.x - previous.x,
+				dy: fromSource ? first.y - second.y : last.y - previous.y,
+				dz: fromSource ? (first.z ?? 0) - (second.z ?? 0) : (last.z ?? 0) - (previous.z ?? 0),
+				color,
+				size: markerSize,
+				opacity
+			});
+		};
+		if (ends === "source" || ends === "both") add("source");
+		if (ends === "target" || ends === "both") add("target");
+	}
+	return {
+		segments,
+		markers,
+		truncated
+	};
+}
+/** Map existing diagnostics lodLevel into the edge visual tier. */
+function edgeTierFromDiagnosticsLod(lodLevel) {
+	return lodLevel === "detail" ? "detail" : "overview";
+}
+//#endregion
+//#region src/edge-picking.ts
+/** Squared distance from a point to the closest point on a finite segment. */
+function distanceSquaredToSegment2d(px, py, x1, y1, x2, y2) {
+	const dx = x2 - x1;
+	const dy = y2 - y1;
+	const lengthSquared = dx * dx + dy * dy;
+	if (lengthSquared === 0) {
+		const ox = px - x1;
+		const oy = py - y1;
+		return ox * ox + oy * oy;
+	}
+	const t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / lengthSquared));
+	const closestX = x1 + t * dx;
+	const closestY = y1 + t * dy;
+	const ox = px - closestX;
+	const oy = py - closestY;
+	return ox * ox + oy * oy;
+}
+/**
+* Returns the edge index of the closest segment within its hit slop, or null.
+* When several edges qualify, the nearest wins; ties keep the first encountered edge index.
+*/
+function pickClosestEdgeIndex(point, segments) {
+	let nearestEdgeIndex = null;
+	let nearestDistance = Number.POSITIVE_INFINITY;
+	for (const segment of segments) {
+		const distanceSquared = distanceSquaredToSegment2d(point.x, point.y, segment.x1, segment.y1, segment.x2, segment.y2);
+		const slop = segment.hitSlop;
+		if (distanceSquared > slop * slop) continue;
+		if (distanceSquared < nearestDistance) {
+			nearestDistance = distanceSquared;
+			nearestEdgeIndex = segment.edgeIndex;
+		}
+	}
+	return nearestEdgeIndex;
+}
+//#endregion
+//#region src/edge-rendering.ts
+const vertexShader$1 = `
+attribute float instanceKind;
+attribute vec3 instanceEndA;
+attribute vec3 instanceEndB;
+attribute vec4 instanceColor;
+attribute float instanceWidth;
+attribute float instanceStyle;
+
+varying vec4 edgeColor;
+varying float edgeKind;
+varying float edgeStyle;
+varying float edgeDashT;
+varying vec2 edgeUv;
+
+void main() {
+	edgeColor = instanceColor;
+	edgeKind = instanceKind;
+	edgeStyle = instanceStyle;
+	edgeUv = uv;
+	edgeDashT = 0.0;
+
+	vec4 viewA = modelViewMatrix * vec4(instanceEndA, 1.0);
+	vec4 viewB = modelViewMatrix * vec4(instanceEndB, 1.0);
+	vec4 viewPosition;
+
+	if (instanceKind < 0.5) {
+		// Segment: stretch the unit quad from EndA to EndB in view space.
+		vec2 delta = viewB.xy - viewA.xy;
+		float len = length(delta);
+		vec2 dir = len > 0.0001 ? delta / len : vec2(1.0, 0.0);
+		vec2 perp = vec2(-dir.y, dir.x);
+		vec2 mid = (viewA.xy + viewB.xy) * 0.5;
+		vec2 offset = dir * position.x * len + perp * position.y * instanceWidth;
+		float depth = mix(viewA.z, viewB.z, position.x + 0.5);
+		viewPosition = vec4(mid + offset, depth, 1.0);
+		edgeDashT = (position.x + 0.5) * len / max(instanceWidth * 4.0, 0.0001);
+	} else {
+		// Marker: oriented triangle with its apex pinned to EndA, pointing
+		// along EndA -> EndB (the direction of travel), base trailing behind.
+		vec2 dirVec = viewB.xy - viewA.xy;
+		float dirLen = length(dirVec);
+		vec2 dir = dirLen > 0.0001 ? dirVec / dirLen : vec2(1.0, 0.0);
+		vec2 perp = vec2(-dir.y, dir.x);
+		float t = position.x + 0.5;
+		vec2 offset = dir * instanceWidth * (t - 1.0) + perp * position.y * instanceWidth;
+		viewPosition = vec4(viewA.xy + offset, viewA.z, 1.0);
+	}
+
+	gl_Position = projectionMatrix * viewPosition;
+}
+`;
+const fragmentShader$1 = `
+varying vec4 edgeColor;
+varying float edgeKind;
+varying float edgeStyle;
+varying float edgeDashT;
+varying vec2 edgeUv;
+
+void main() {
+	if (edgeKind < 0.5) {
+		if (edgeStyle > 0.5) {
+			float cell = fract(edgeDashT);
+			if (edgeStyle < 1.5) {
+				if (cell > 0.6) discard; // dashed
+			} else {
+				if (abs(cell - 0.5) > 0.15) discard; // dotted
+			}
+		}
+	} else {
+		// Triangle SDF: apex at edgeUv.x == 1, full width base at edgeUv.x == 0.
+		float halfWidth = (1.0 - edgeUv.x) * 0.5;
+		if (abs(edgeUv.y - 0.5) > halfWidth) discard;
+	}
+	if (edgeColor.a <= 0.0) discard;
+	gl_FragColor = edgeColor;
+}
+`;
+function createEdgeGeometry(capacity) {
+	const geometry = new PlaneGeometry(1, 1);
+	geometry.setAttribute("instanceKind", new InstancedBufferAttribute(new Float32Array(capacity), 1));
+	geometry.setAttribute("instanceEndA", new InstancedBufferAttribute(new Float32Array(capacity * 3), 3));
+	geometry.setAttribute("instanceEndB", new InstancedBufferAttribute(new Float32Array(capacity * 3), 3));
+	geometry.setAttribute("instanceColor", new InstancedBufferAttribute(new Float32Array(capacity * 4), 4));
+	geometry.setAttribute("instanceWidth", new InstancedBufferAttribute(new Float32Array(capacity), 1));
+	geometry.setAttribute("instanceStyle", new InstancedBufferAttribute(new Float32Array(capacity), 1));
+	return geometry;
+}
+function createEdgeMaterial(depthTest) {
+	return new ShaderMaterial({
+		depthTest,
+		depthWrite: depthTest,
+		fragmentShader: fragmentShader$1,
+		transparent: true,
+		vertexShader: vertexShader$1
+	});
+}
+function getInstancedAttribute(geometry, name) {
+	const attribute = geometry.getAttribute(name);
+	if (!(attribute instanceof InstancedBufferAttribute)) throw new Error(`edge geometry is missing the "${name}" instanced attribute`);
+	return attribute;
+}
+function writeEdgeSegmentInstance(geometry, slot, segment) {
+	const kind = getInstancedAttribute(geometry, "instanceKind");
+	const endA = getInstancedAttribute(geometry, "instanceEndA");
+	const endB = getInstancedAttribute(geometry, "instanceEndB");
+	const color = getInstancedAttribute(geometry, "instanceColor");
+	const width = getInstancedAttribute(geometry, "instanceWidth");
+	const style = getInstancedAttribute(geometry, "instanceStyle");
+	kind.setX(slot, 0);
+	endA.setXYZ(slot, segment.x1, segment.y1, segment.z1);
+	endB.setXYZ(slot, segment.x2, segment.y2, segment.z2);
+	const rgb = new Color(segment.color);
+	color.setXYZW(slot, rgb.r, rgb.g, rgb.b, segment.opacity);
+	width.setX(slot, segment.width);
+	style.setX(slot, encodeEdgeStyle(segment.style));
+}
+function writeEdgeMarkerInstance(geometry, slot, marker) {
+	const kind = getInstancedAttribute(geometry, "instanceKind");
+	const endA = getInstancedAttribute(geometry, "instanceEndA");
+	const endB = getInstancedAttribute(geometry, "instanceEndB");
+	const color = getInstancedAttribute(geometry, "instanceColor");
+	const width = getInstancedAttribute(geometry, "instanceWidth");
+	const style = getInstancedAttribute(geometry, "instanceStyle");
+	kind.setX(slot, 1);
+	endA.setXYZ(slot, marker.x, marker.y, marker.z);
+	endB.setXYZ(slot, marker.x + marker.dx, marker.y + marker.dy, marker.z + marker.dz);
+	const rgb = new Color(marker.color);
+	color.setXYZW(slot, rgb.r, rgb.g, rgb.b, marker.opacity);
+	width.setX(slot, marker.size);
+	style.setX(slot, 0);
+}
+//#endregion
+//#region src/edge-viewport-patch.ts
+const EDGE_INSTANCE_ATTRIBUTES$1 = [
+	"instanceKind",
+	"instanceEndA",
+	"instanceEndB",
+	"instanceColor",
+	"instanceWidth",
+	"instanceStyle"
+];
+/** Records GPU slot ranges for each visible edge after a full viewport materialize. */
+function buildVisibleEdgeLayouts(segments, markers, segmentInstanceCount) {
+	const layouts = /* @__PURE__ */ new Map();
+	for (const [slot, segment] of segments.entries()) {
+		const layout = layouts.get(segment.edgeIndex) ?? {
+			markerCount: 0,
+			markerStart: segmentInstanceCount,
+			segmentCount: 0,
+			segmentStart: slot
+		};
+		if (layout.segmentCount === 0) layout.segmentStart = slot;
+		layout.segmentCount += 1;
+		layouts.set(segment.edgeIndex, layout);
+	}
+	for (const [offset, marker] of markers.entries()) {
+		const slot = segmentInstanceCount + offset;
+		const layout = layouts.get(marker.edgeIndex) ?? {
+			markerCount: 0,
+			markerStart: slot,
+			segmentCount: 0,
+			segmentStart: -1
+		};
+		if (layout.markerCount === 0) layout.markerStart = slot;
+		layout.markerCount += 1;
+		layouts.set(marker.edgeIndex, layout);
+	}
+	return layouts;
+}
+/**
+* Rewrites GPU edge instances for moved endpoints without repacking the whole viewport.
+* Returns ok=false when any visible edge would change segment or marker counts.
+*/
+function patchVisibleEdgeInstances(geometry, input, pickableSegments) {
+	const nextPickable = [...pickableSegments];
+	let dirtySlotStart = Number.POSITIVE_INFINITY;
+	let dirtySlotEnd = -1;
+	const seen = /* @__PURE__ */ new Set();
+	for (const edgeIndex of input.changedEdgeIndices) {
+		if (seen.has(edgeIndex)) continue;
+		seen.add(edgeIndex);
+		const layout = input.layouts.get(edgeIndex);
+		if (!layout || layout.segmentCount === 0 || layout.segmentStart < 0) continue;
+		const packed = packEdgeInstances({
+			edgeIndices: [edgeIndex],
+			edgeVisuals: input.edgeVisuals,
+			endpointPositions: input.endpointPositions,
+			defaults: input.defaults,
+			tier: input.tier,
+			endpointAttach: input.endpointAttach,
+			edgeNodeIndices: input.edgeNodeIndices,
+			nodeOutlines: input.nodeOutlines
+		});
+		if (packed.segments.length !== layout.segmentCount || packed.markers.length !== layout.markerCount) return {
+			dirtySlotCount: 0,
+			dirtySlotStart: 0,
+			ok: false,
+			pickableSegments: nextPickable
+		};
+		for (const [offset, segment] of packed.segments.entries()) {
+			const slot = layout.segmentStart + offset;
+			writeEdgeSegmentInstance(geometry, slot, segment);
+			nextPickable[slot] = {
+				edgeIndex,
+				hitSlop: Math.max(input.minHitSlop, segment.width * input.worldPerPixel / 2 + 2 * input.worldPerPixel),
+				x1: segment.x1,
+				x2: segment.x2,
+				y1: segment.y1,
+				y2: segment.y2
+			};
+			dirtySlotStart = Math.min(dirtySlotStart, slot);
+			dirtySlotEnd = Math.max(dirtySlotEnd, slot);
+		}
+		for (const [offset, marker] of packed.markers.entries()) {
+			const slot = layout.markerStart + offset;
+			writeEdgeMarkerInstance(geometry, slot, marker);
+			dirtySlotStart = Math.min(dirtySlotStart, slot);
+			dirtySlotEnd = Math.max(dirtySlotEnd, slot);
+		}
+	}
+	if (dirtySlotEnd < dirtySlotStart) return {
+		dirtySlotCount: 0,
+		dirtySlotStart: 0,
+		ok: true,
+		pickableSegments: nextPickable
+	};
+	for (const name of EDGE_INSTANCE_ATTRIBUTES$1) {
+		const attribute = geometry.getAttribute(name);
+		attribute.clearUpdateRanges();
+		attribute.addUpdateRange(dirtySlotStart * attribute.itemSize, (dirtySlotEnd - dirtySlotStart + 1) * attribute.itemSize);
+		attribute.needsUpdate = true;
+	}
+	return {
+		dirtySlotCount: dirtySlotEnd - dirtySlotStart + 1,
+		dirtySlotStart,
+		ok: true,
+		pickableSegments: nextPickable
+	};
+}
+//#endregion
+//#region src/instance-color-ranges.ts
+/**
+* Marks RGB update ranges for visible instance slots.
+* Returns how many slots were marked.
+*/
+function markInstanceColorSlots(attribute, slots) {
+	attribute.clearUpdateRanges();
+	let count = 0;
+	for (const slot of slots) {
+		if (!Number.isSafeInteger(slot) || slot < 0) continue;
+		attribute.addUpdateRange(slot * 3, 3);
+		count += 1;
+	}
+	if (count > 0) attribute.needsUpdate = true;
+	return count;
+}
+//#endregion
+//#region src/layout-positions.ts
+/** Validates worker-friendly XYZ layout buffers before positions reach the renderer. */
+function prepareLayoutPositions(nodes, nodeIndices, layout) {
+	if (layout.positions.length !== layout.nodeIds.length * 3) throw new Error("Layout positions must contain one XYZ triplet per node ID");
+	const seen = /* @__PURE__ */ new Set();
+	return layout.nodeIds.map((id, index) => {
+		if (seen.has(id)) throw new Error(`Duplicate layout node ID: "${id}"`);
+		seen.add(id);
+		const nodeIndex = nodeIndices.get(id);
+		if (nodeIndex === void 0) throw new Error(`Cannot position missing node: "${id}"`);
+		const current = nodes[nodeIndex];
+		if (!current) throw new Error(`Cannot position missing node: "${id}"`);
+		const offset = index * 3;
+		const position = {
+			x: layout.positions[offset] ?? NaN,
+			y: layout.positions[offset + 1] ?? NaN,
+			z: layout.positions[offset + 2] ?? NaN
+		};
+		for (const [axis, value] of Object.entries(position)) if (!Number.isFinite(value)) throw new Error(`Layout node "${id}" has a non-finite ${axis} position`);
+		return {
+			colorChanged: false,
+			index: nodeIndex,
+			next: {
+				...current,
+				position
+			},
+			positionChanged: true,
+			shapeChanged: false,
+			sizeChanged: false,
+			strokeChanged: false
+		};
+	});
+}
+//#endregion
+//#region src/node-rendering.ts
+const vertexShader = `
+attribute float instanceShape;
+attribute float instanceStrokeWidth;
+attribute vec3 instanceStrokeColor;
+varying vec3 nodeColor;
+varying vec2 nodePoint;
+varying float nodeShape;
+varying float nodeStrokeWidth;
+varying vec3 nodeStrokeColor;
+
+void main() {
+	nodeColor = instanceColor;
+	nodePoint = position.xy;
+	nodeShape = instanceShape;
+	nodeStrokeWidth = instanceStrokeWidth;
+	nodeStrokeColor = instanceStrokeColor;
+
+	vec4 center = modelViewMatrix * instanceMatrix * vec4(0.0, 0.0, 0.0, 1.0);
+	float scaleX = length(instanceMatrix[0].xyz);
+	float scaleY = length(instanceMatrix[1].xyz);
+	center.xy += position.xy * vec2(scaleX, scaleY);
+	gl_Position = projectionMatrix * center;
+}
+`;
+const fragmentShader = `
+varying vec3 nodeColor;
+varying vec2 nodePoint;
+varying float nodeShape;
+varying float nodeStrokeWidth;
+varying vec3 nodeStrokeColor;
+
+// Apothem of a regular hexagon whose pointy left/right vertices reach x = ±1 (matches node-shapes.ts).
+const float HEXAGON_APOTHEM = 0.8660254037844386;
+// Y of the upward triangle's flat base, apex at (0, 1) (matches node-shapes.ts).
+const float TRIANGLE_BASE_Y = -0.7320508075688772;
+// Half-height of the horizontal pill's rounded caps, in unit space (matches node-shapes.ts).
+const float PILL_CAP_RADIUS = 0.5;
+// Half-length of the pill's straight segment, in unit space (matches node-shapes.ts).
+const float PILL_HALF_LENGTH = 0.5;
+// Fraction of the rounded rectangle's half-extent used as the corner radius (matches node-shapes.ts).
+const float ROUNDED_CORNER_RADIUS = 0.25;
+
+float hexagonDistance(vec2 p) {
+	vec2 a = abs(p);
+	return HEXAGON_APOTHEM - max(a.y, a.x * HEXAGON_APOTHEM + a.y * 0.5);
+}
+
+// Signed distance to an upward-pointing equilateral triangle, positive inside.
+float triangleDistance(vec2 p) {
+	vec2 apex = vec2(0.0, 1.0);
+	vec2 right = vec2(1.0, TRIANGLE_BASE_Y);
+	vec2 left = vec2(-1.0, TRIANGLE_BASE_Y);
+	vec2 e0 = right - apex;
+	vec2 e1 = left - right;
+	vec2 e2 = apex - left;
+	vec2 v0 = p - apex;
+	vec2 v1 = p - right;
+	vec2 v2 = p - left;
+	vec2 pq0 = v0 - e0 * clamp(dot(v0, e0) / dot(e0, e0), 0.0, 1.0);
+	vec2 pq1 = v1 - e1 * clamp(dot(v1, e1) / dot(e1, e1), 0.0, 1.0);
+	vec2 pq2 = v2 - e2 * clamp(dot(v2, e2) / dot(e2, e2), 0.0, 1.0);
+	float s = sign(e0.x * e2.y - e0.y * e2.x);
+	vec2 d0 = vec2(dot(pq0, pq0), s * (v0.x * e0.y - v0.y * e0.x));
+	vec2 d1 = vec2(dot(pq1, pq1), s * (v1.x * e1.y - v1.y * e1.x));
+	vec2 d2 = vec2(dot(pq2, pq2), s * (v2.x * e2.y - v2.y * e2.x));
+	vec2 d = min(min(d0, d1), d2);
+	return sqrt(d.x) * sign(d.y);
+}
+
+float pillDistance(vec2 p) {
+	float clampedX = clamp(p.x, -PILL_HALF_LENGTH, PILL_HALF_LENGTH);
+	return PILL_CAP_RADIUS - length(vec2(p.x - clampedX, p.y));
+}
+
+float roundedDistance(vec2 p) {
+	vec2 outsideOffset = abs(p) - vec2(1.0 - ROUNDED_CORNER_RADIUS);
+	vec2 outside = max(outsideOffset, 0.0);
+	float outsideDistance = length(outside) + min(max(outsideOffset.x, outsideOffset.y), 0.0) - ROUNDED_CORNER_RADIUS;
+	return -outsideDistance;
+}
+
+void main() {
+	float distanceToEdge;
+	if (nodeShape < 0.5) {
+		distanceToEdge = 1.0 - length(nodePoint);
+	} else if (nodeShape < 1.5) {
+		distanceToEdge = 1.0 - max(abs(nodePoint.x), abs(nodePoint.y));
+	} else if (nodeShape < 2.5) {
+		distanceToEdge = 1.0 - abs(nodePoint.x) - abs(nodePoint.y);
+	} else if (nodeShape < 3.5) {
+		distanceToEdge = hexagonDistance(nodePoint);
+	} else if (nodeShape < 4.5) {
+		distanceToEdge = triangleDistance(nodePoint);
+	} else if (nodeShape < 5.5) {
+		distanceToEdge = pillDistance(nodePoint);
+	} else {
+		distanceToEdge = roundedDistance(nodePoint);
+	}
+
+	float outerAlpha = smoothstep(0.0, fwidth(distanceToEdge), distanceToEdge);
+	if (outerAlpha <= 0.0) discard;
+
+	vec3 fillColor = nodeColor;
+	if (nodeStrokeWidth > 0.0) {
+		// Stroke band occupies [outer edge, outer edge - nodeStrokeWidth]; below that, the fill takes over.
+		float innerEdge = distanceToEdge - nodeStrokeWidth;
+		float strokeToFill = smoothstep(0.0, fwidth(innerEdge), innerEdge);
+		fillColor = mix(nodeStrokeColor, nodeColor, strokeToFill);
+	}
+	gl_FragColor = vec4(fillColor, outerAlpha);
+}
+`;
+function createNodeGeometry(capacity) {
+	const geometry = new PlaneGeometry(2, 2);
+	geometry.setAttribute("instanceShape", new InstancedBufferAttribute(new Float32Array(capacity), 1));
+	geometry.setAttribute("instanceStrokeWidth", new InstancedBufferAttribute(new Float32Array(capacity), 1));
+	geometry.setAttribute("instanceStrokeColor", new InstancedBufferAttribute(new Float32Array(capacity * 3), 3));
+	return geometry;
+}
+/** Allocate InstancedMesh.instanceColor before first compile so Three injects the attribute. */
+function allocateNodeInstanceColors(mesh, capacity) {
+	mesh.instanceColor = new InstancedBufferAttribute(new Float32Array(capacity * 3).fill(1), 3);
+}
+function createNodeMaterial(depthTest) {
+	return new ShaderMaterial({
+		depthTest,
+		depthWrite: depthTest,
+		fragmentShader,
+		transparent: true,
+		vertexShader
+	});
+}
+function setNodeShapeAt(attribute, index, shape) {
+	attribute.setX(index, encodeNodeShape(shape));
+}
+function setNodeStrokeAt(strokeWidthAttribute, strokeColorAttribute, index, { strokeColor, strokeWidthUv }) {
+	strokeWidthAttribute.setX(index, strokeWidthUv);
+	const rgb = new Color(strokeColor);
+	strokeColorAttribute.setXYZ(index, rgb.r, rgb.g, rgb.b);
+}
+//#endregion
+//#region src/node-stroke.ts
+/**
+* Ceiling for the stroke ring as a fraction of the shape's half-extent, so a large
+* `strokeWidth` in world units cannot swallow the fill entirely.
+*/
+const MAX_STROKE_WIDTH_UV = .45;
+/**
+* Resolves a node's stroke into shader-ready values: `strokeColor` falls back to the theme
+* default, and `strokeWidthUv` converts the world-unit `strokeWidth` into a fraction of
+* `max(width, height)` — the same unit space `containsNodePoint` and the node fragment shader
+* use — so the ring reads consistently regardless of the node's rendered size.
+*/
+function resolveNodeStroke(node, theme) {
+	const strokeColor = node.strokeColor ?? theme.nodeStroke;
+	const strokeWidth = node.strokeWidth ?? 0;
+	if (strokeWidth <= 0) return {
+		strokeColor,
+		strokeWidthUv: 0
+	};
+	const { height, width } = resolveNodeAxes({
+		height: node.height,
+		nodeId: node.id,
+		size: node.size,
+		width: node.width
+	});
+	return {
+		strokeColor,
+		strokeWidthUv: Math.min(strokeWidth / Math.max(width, height), MAX_STROKE_WIDTH_UV)
+	};
+}
+//#endregion
+//#region src/node-updates.ts
+function assertValidNode(node) {
+	for (const [axis, value] of [
+		["x", node.position.x],
+		["y", node.position.y],
+		["z", node.position.z ?? 0]
+	]) if (!Number.isFinite(value)) throw new Error(`Node "${node.id}" has a non-finite ${axis} position`);
+	resolveNodeAxes({
+		height: node.height,
+		nodeId: node.id,
+		size: node.size,
+		width: node.width
+	});
+	if (node.strokeWidth !== void 0 && (!Number.isFinite(node.strokeWidth) || node.strokeWidth < 0)) throw new Error(`Node "${node.id}" must have a finite non-negative strokeWidth`);
+	if (node.shape !== void 0) assertNodeShape(node.id, node.shape);
+}
+/** Validates a complete update batch before the renderer mutates CPU or GPU state. */
+function prepareNodeUpdates(nodes, nodeIndices, updates) {
+	const seen = /* @__PURE__ */ new Set();
+	return updates.map((update) => {
+		if (seen.has(update.id)) throw new Error(`Duplicate node update: "${update.id}"`);
+		seen.add(update.id);
+		const index = nodeIndices.get(update.id);
+		if (index === void 0) throw new Error(`Cannot update missing node: "${update.id}"`);
+		const current = nodes[index];
+		if (!current) throw new Error(`Cannot update missing node: "${update.id}"`);
+		const next = {
+			...current,
+			...Object.hasOwn(update, "color") ? { color: update.color } : {},
+			...update.position ? { position: { ...update.position } } : {},
+			...Object.hasOwn(update, "shape") ? { shape: update.shape } : {},
+			...Object.hasOwn(update, "size") ? { size: update.size } : {},
+			...Object.hasOwn(update, "width") ? { width: update.width } : {},
+			...Object.hasOwn(update, "height") ? { height: update.height } : {},
+			...Object.hasOwn(update, "strokeWidth") ? { strokeWidth: update.strokeWidth } : {},
+			...Object.hasOwn(update, "strokeColor") ? { strokeColor: update.strokeColor } : {}
+		};
+		assertValidNode(next);
+		return {
+			colorChanged: Object.hasOwn(update, "color"),
+			index,
+			next,
+			positionChanged: update.position !== void 0,
+			shapeChanged: Object.hasOwn(update, "shape"),
+			sizeChanged: Object.hasOwn(update, "size") || Object.hasOwn(update, "width") || Object.hasOwn(update, "height"),
+			strokeChanged: Object.hasOwn(update, "strokeWidth") || Object.hasOwn(update, "strokeColor")
+		};
+	});
+}
+//#endregion
+//#region src/label-budget.ts
+/** Picks visible label ids by importance within a hard DOM budget. */
+function selectBudgetedLabelIds({ candidates, maxLabels }) {
+	if (!Number.isSafeInteger(maxLabels) || maxLabels < 0) throw new Error("maxLabels must be a non-negative integer.");
+	return candidates.filter((candidate) => candidate.visible).sort((left, right) => {
+		if (right.importance !== left.importance) return right.importance - left.importance;
+		return left.id < right.id ? -1 : left.id > right.id ? 1 : 0;
+	}).slice(0, maxLabels).map((candidate) => candidate.id);
+}
+/**
+* Labels for a sparse focus set: keep focus ids that are visible, then optionally fill
+* remaining budget from other visible candidates by importance. Focus order is preserved.
+*/
+function selectFocusLabelIds({ focusIds, candidates, maxLabels, fill = "importance" }) {
+	if (!Number.isSafeInteger(maxLabels) || maxLabels < 0) throw new Error("maxLabels must be a non-negative integer.");
+	const byId = new Map(candidates.map((candidate) => [candidate.id, candidate]));
+	const chosen = [];
+	const chosenSet = /* @__PURE__ */ new Set();
+	for (const id of focusIds) {
+		if (chosen.length >= maxLabels) break;
+		if (chosenSet.has(id)) continue;
+		if (!byId.get(id)?.visible) continue;
+		chosen.push(id);
+		chosenSet.add(id);
+	}
+	if (fill === "none" || chosen.length >= maxLabels) return chosen;
+	const fillers = selectBudgetedLabelIds({
+		candidates: candidates.filter((candidate) => !chosenSet.has(candidate.id)),
+		maxLabels: maxLabels - chosen.length
+	});
+	return [...chosen, ...fillers];
+}
+/** Builds an ordered focus id list: selected, then hovered, then unique neighbors. */
+function orderFocusNodeIds(input) {
+	const ordered = [];
+	const seen = /* @__PURE__ */ new Set();
+	for (const id of [
+		...input.selectedIds,
+		...input.hoveredIds,
+		...input.neighborIds
+	]) {
+		if (seen.has(id)) continue;
+		seen.add(id);
+		ordered.push(id);
+	}
+	return ordered;
+}
+//#endregion
+//#region src/overlay-budget.ts
+function uniqueIds(ids) {
+	const seen = /* @__PURE__ */ new Set();
+	const ordered = [];
+	for (const id of ids) {
+		if (seen.has(id)) continue;
+		seen.add(id);
+		ordered.push(id);
+	}
+	return ordered;
+}
+function boundOverlayIds(ids, max, kind) {
+	if (!Number.isSafeInteger(max) || max < 0) throw new Error(`Overlay ${kind} cap must be a non-negative integer.`);
+	const list = uniqueIds(ids);
+	if (list.length > max) throw new Error(`Overlay supports at most ${max} ${kind} (requested ${list.length}).`);
+	return list;
+}
+function selectRichNodeIds(input) {
+	if (!Number.isSafeInteger(input.maxRichNodes) || input.maxRichNodes < 0) throw new Error("maxRichNodes must be a non-negative integer.");
+	return (input.policy === "selected" ? uniqueIds(input.selectedIds) : input.policy === "hovered" ? uniqueIds([...input.hoveredIds, ...input.selectedIds]) : uniqueIds([...input.selectedIds, ...input.hoveredIds])).slice(0, input.maxRichNodes);
+}
+//#endregion
+//#region src/overlay.ts
+function assertElement(element, kind) {
+	if (element !== null && !(element instanceof HTMLElement)) throw new Error(`${kind} renderer must return an HTMLElement or null`);
+}
+function resolveLabelPolicy(options) {
+	if (options.labelPolicy) return options.labelPolicy;
+	return options.autoLabels === true ? "auto" : "manual";
+}
+/** A bounded DOM layer for labels, a focused-node toolbar, and optional rich HTML cards. */
+var GraphraumOverlay = class {
+	graph;
+	container;
+	options;
+	root = document.createElement("div");
+	labels = /* @__PURE__ */ new Map();
+	richNodes = /* @__PURE__ */ new Map();
+	toolbar = null;
+	toolbarNodeId = null;
+	stopObservingView;
+	stopObservingFocus;
+	previousContainerPosition;
+	labelPolicy;
+	focusLabelFill;
+	autoToolbar;
+	autoRichNodes;
+	maxLabels;
+	maxRichNodes;
+	constructor(graph, container, options) {
+		this.graph = graph;
+		this.container = container;
+		this.options = options;
+		const maxLabels = options.maxLabels ?? 50;
+		if (!Number.isSafeInteger(maxLabels) || maxLabels < 0) throw new Error("Overlay maxLabels must be a non-negative integer.");
+		this.maxLabels = maxLabels;
+		const maxRichNodes = options.maxRichNodes ?? 24;
+		if (!Number.isSafeInteger(maxRichNodes) || maxRichNodes < 0) throw new Error("Overlay maxRichNodes must be a non-negative integer.");
+		this.maxRichNodes = maxRichNodes;
+		this.labelPolicy = resolveLabelPolicy(options);
+		this.focusLabelFill = options.focusLabelFill ?? "importance";
+		this.autoToolbar = options.autoToolbar ?? false;
+		this.autoRichNodes = options.autoRichNodes ?? false;
+		this.root.className = `graphraum-overlay ${options.overlayClassName ?? ""}`.trim();
+		this.root.style.cssText = "inset:0;pointer-events:none;position:absolute;";
+		this.previousContainerPosition = getComputedStyle(this.container).position === "static" ? this.container.style.position : null;
+		if (this.previousContainerPosition !== null) this.container.style.position = "relative";
+		this.container.append(this.root);
+		this.stopObservingView = graph.onViewChange(() => this.update());
+		this.stopObservingFocus = graph.onFocusChange(() => this.update());
+	}
+	/**
+	* Replaces the labeled node set. When `labelPolicy` is `auto` or `focus`, the next view/focus
+	* change overwrites this list from the policy.
+	*/
+	setLabels(nodeIds) {
+		this.syncLabels(boundOverlayIds(nodeIds, this.maxLabels, "labels"));
+		this.updatePositions();
+	}
+	/**
+	* Replaces the rich HTML node set. When `autoRichNodes` is set, the next focus change
+	* overwrites this list from the policy.
+	*/
+	setRichNodes(nodeIds) {
+		if (this.autoRichNodes) return;
+		this.syncRichNodes(boundOverlayIds(nodeIds, this.maxRichNodes, "rich nodes"));
+		this.updatePositions();
+	}
+	setToolbar(nodeId) {
+		if (this.autoToolbar) return;
+		this.toolbar?.element.remove();
+		this.toolbar = null;
+		this.toolbarNodeId = nodeId;
+		if (nodeId !== null) this.toolbar = this.createEntry(nodeId, this.options.renderToolbar, "Toolbar", "auto");
+		this.updatePositions();
+	}
+	destroy() {
+		this.stopObservingView();
+		this.stopObservingFocus();
+		this.root.remove();
+		if (this.previousContainerPosition !== null && this.container.querySelector(".graphraum-overlay") === null) this.container.style.position = this.previousContainerPosition;
+		this.labels.clear();
+		this.richNodes.clear();
+		this.toolbar = null;
+	}
+	update() {
+		if (this.labelPolicy === "auto") this.syncLabels(selectBudgetedLabelIds({
+			candidates: this.graph.getLabelCandidates(),
+			maxLabels: this.maxLabels
+		}));
+		else if (this.labelPolicy === "focus") {
+			const selectedIds = this.graph.getSelectedNodeIds();
+			const hoveredIds = this.graph.getHoveredNodeIds();
+			const neighborIds = [...selectedIds, ...hoveredIds].flatMap((id) => this.graph.getNeighborIds(id));
+			this.syncLabels(selectFocusLabelIds({
+				focusIds: orderFocusNodeIds({
+					selectedIds,
+					hoveredIds,
+					neighborIds
+				}),
+				candidates: this.graph.getLabelCandidates(),
+				maxLabels: this.maxLabels,
+				fill: this.focusLabelFill
+			}));
+		}
+		if (this.autoToolbar) this.syncToolbar();
+		if (this.autoRichNodes) this.syncRichNodesFromFocus();
+		this.updatePositions();
+	}
+	syncRichNodesFromFocus() {
+		if (!this.autoRichNodes || !this.options.renderRichNode) return;
+		this.syncRichNodes(selectRichNodeIds({
+			hoveredIds: this.graph.getHoveredNodeIds(),
+			maxRichNodes: this.maxRichNodes,
+			policy: this.autoRichNodes,
+			selectedIds: this.graph.getSelectedNodeIds()
+		}));
+	}
+	syncToolbar() {
+		if (!this.options.renderToolbar) return;
+		const nextId = this.autoToolbar === "hovered" ? this.graph.getHoveredNodeIds()[0] ?? this.graph.getSelectedNodeIds()[0] ?? null : this.graph.getSelectedNodeIds()[0] ?? null;
+		if (nextId === this.toolbarNodeId && this.toolbar) return;
+		this.toolbar?.element.remove();
+		this.toolbar = null;
+		this.toolbarNodeId = nextId;
+		if (nextId !== null) this.toolbar = this.createEntry(nextId, this.options.renderToolbar, "Toolbar", "auto");
+	}
+	syncLabels(nodeIds) {
+		const nextIds = new Set(nodeIds);
+		for (const [nodeId, entry] of this.labels) {
+			if (nextIds.has(nodeId)) continue;
+			entry.element.remove();
+			this.labels.delete(nodeId);
+		}
+		for (const nodeId of nodeIds) {
+			if (this.labels.has(nodeId)) continue;
+			const entry = this.createEntry(nodeId, this.options.renderLabel, "Label", "none");
+			if (entry) this.labels.set(nodeId, entry);
+		}
+	}
+	syncRichNodes(nodeIds) {
+		const nextIds = new Set(nodeIds);
+		for (const [nodeId, entry] of this.richNodes) {
+			if (nextIds.has(nodeId)) continue;
+			entry.element.remove();
+			this.richNodes.delete(nodeId);
+		}
+		for (const nodeId of nodeIds) {
+			if (this.richNodes.has(nodeId)) continue;
+			const entry = this.createEntry(nodeId, this.options.renderRichNode, "Rich", "auto");
+			if (entry) this.richNodes.set(nodeId, entry);
+		}
+	}
+	updatePositions() {
+		for (const [nodeId, entry] of this.labels) this.updateEntry(nodeId, entry, this.options.renderLabel, "label", "none");
+		for (const [nodeId, entry] of this.richNodes) this.updateEntry(nodeId, entry, this.options.renderRichNode, "rich", "auto");
+		if (this.toolbar && this.toolbarNodeId) this.updateEntry(this.toolbarNodeId, this.toolbar, this.options.renderToolbar, "toolbar", "auto");
+	}
+	createEntry(nodeId, render, kind, pointerEvents) {
+		if (!render || !this.graph.getNodeScreenPosition(nodeId)) return null;
+		const presentation = this.graph.getNodePresentation(nodeId);
+		const element = render({
+			id: nodeId,
+			presentation
+		});
+		assertElement(element, kind);
+		if (!element) return null;
+		const className = `graphraum-overlay-${kind.toLowerCase()}`;
+		element.classList.add("graphraum-overlay-entry", className);
+		if (kind === "Label" && this.options.labelClassName) this.applyClassName(element, this.options.labelClassName);
+		if (kind === "Toolbar" && this.options.toolbarClassName) this.applyClassName(element, this.options.toolbarClassName);
+		if (kind === "Rich" && this.options.richNodeClassName) this.applyClassName(element, this.options.richNodeClassName);
+		element.dataset.graphraumNodeId = nodeId;
+		element.style.position = "absolute";
+		element.style.pointerEvents = pointerEvents;
+		this.root.append(element);
+		return {
+			element,
+			presentation
+		};
+	}
+	updateEntry(nodeId, entry, render, kind, pointerEvents) {
+		const position = this.graph.getNodeScreenPosition(nodeId);
+		entry.element.hidden = !position?.visible;
+		if (!position?.visible) return;
+		const anchor = kind === "rich" ? "translate(-50%, 12px)" : "translate(-50%, -100%)";
+		entry.element.style.transform = `translate(${position.x}px, ${position.y}px) ${anchor}`;
+		const presentation = this.graph.getNodePresentation(nodeId);
+		if (presentation === entry.presentation || !render) return;
+		const replacement = render({
+			id: nodeId,
+			presentation
+		});
+		assertElement(replacement, `${kind[0].toUpperCase()}${kind.slice(1)}`);
+		if (!replacement) {
+			entry.element.remove();
+			if (kind === "toolbar") this.toolbar = null;
+			else if (kind === "rich") this.richNodes.delete(nodeId);
+			else this.labels.delete(nodeId);
+			return;
+		}
+		const className = `graphraum-overlay-${kind}`;
+		replacement.classList.add("graphraum-overlay-entry", className);
+		if (kind === "label" && this.options.labelClassName) this.applyClassName(replacement, this.options.labelClassName);
+		if (kind === "toolbar" && this.options.toolbarClassName) this.applyClassName(replacement, this.options.toolbarClassName);
+		if (kind === "rich" && this.options.richNodeClassName) this.applyClassName(replacement, this.options.richNodeClassName);
+		replacement.dataset.graphraumNodeId = nodeId;
+		replacement.style.cssText = `${entry.element.style.cssText};position:absolute;pointer-events:${pointerEvents};`;
+		entry.element.replaceWith(replacement);
+		entry.element = replacement;
+		entry.presentation = presentation;
+	}
+	applyClassName(element, className) {
+		for (const token of className.split(/\s+/g)) if (token) element.classList.add(token);
+	}
+};
+//#endregion
+//#region src/spatial-grid-2d.ts
+function nodeAxes(node) {
+	return resolveNodeAxes({
+		height: node.height,
+		nodeId: node.id,
+		size: node.size,
+		width: node.width
+	});
+}
+/**
+* Coarse occupancy radius for cell bucketing and bounding-box checks: half of the node's
+* larger axis, padded by its world-unit `strokeWidth`. This is intentionally conservative
+* (a circle-equivalent bound around a possibly non-square shape) — exact hit testing in
+* `pick` uses the true `width`/`height` per axis via `containsNodePoint`.
+*/
+function nodeOccupancyRadius(node) {
+	const { height, width } = nodeAxes(node);
+	return Math.max(width, height) + (node.strokeWidth ?? 0);
+}
+/** A mutable uniform grid shared by 2D picking and viewport visibility queries. */
+var SpatialGrid2D = class {
+	cellSize;
+	cells = /* @__PURE__ */ new Map();
+	cellKeys = [];
+	nodes = [];
+	maxRadius = 0;
+	constructor(cellSize = 32) {
+		this.cellSize = cellSize;
+		if (!Number.isFinite(cellSize) || cellSize <= 0) throw new Error("Spatial grid cell size must be positive.");
+	}
+	set(index, node) {
+		const previousKey = this.cellKeys[index];
+		if (previousKey) {
+			const previousCell = this.cells.get(previousKey);
+			if (previousCell) {
+				const position = previousCell.indexOf(index);
+				if (position >= 0) previousCell.splice(position, 1);
+				if (previousCell.length === 0) this.cells.delete(previousKey);
+			}
+		}
+		const key = this.key(this.coordinate(node.position.x), this.coordinate(node.position.y));
+		const cell = this.cells.get(key) ?? [];
+		cell.push(index);
+		this.cells.set(key, cell);
+		this.cellKeys[index] = key;
+		this.nodes[index] = node;
+		this.maxRadius = Math.max(this.maxRadius, nodeOccupancyRadius(node));
+	}
+	pick(x, y) {
+		const cellRadius = Math.ceil(this.maxRadius / this.cellSize);
+		const centerX = this.coordinate(x);
+		const centerY = this.coordinate(y);
+		let nearestIndex = null;
+		let nearestDistance = Number.POSITIVE_INFINITY;
+		for (let cellY = centerY - cellRadius; cellY <= centerY + cellRadius; cellY += 1) for (let cellX = centerX - cellRadius; cellX <= centerX + cellRadius; cellX += 1) for (const index of this.cells.get(this.key(cellX, cellY)) ?? []) {
+			const node = this.nodes[index];
+			if (!node) continue;
+			const { height, width } = nodeAxes(node);
+			const offsetX = node.position.x - x;
+			const offsetY = node.position.y - y;
+			const distance = offsetX ** 2 + offsetY ** 2;
+			if (containsNodePoint(node.shape, offsetX / width, offsetY / height) && distance < nearestDistance) {
+				nearestDistance = distance;
+				nearestIndex = index;
+			}
+		}
+		return nearestIndex;
+	}
+	queryBounds(bounds, overscan = 0) {
+		const left = bounds.left - overscan;
+		const right = bounds.right + overscan;
+		const bottom = bounds.bottom - overscan;
+		const top = bounds.top + overscan;
+		const indices = [];
+		const minimumCellX = this.coordinate(left - this.maxRadius);
+		const maximumCellX = this.coordinate(right + this.maxRadius);
+		const minimumCellY = this.coordinate(bottom - this.maxRadius);
+		const maximumCellY = this.coordinate(top + this.maxRadius);
+		const queriedCellCount = (maximumCellX - minimumCellX + 1) * (maximumCellY - minimumCellY + 1);
+		const candidateCells = Number.isSafeInteger(queriedCellCount) && queriedCellCount <= this.cells.size ? this.cellsInBounds(minimumCellX, maximumCellX, minimumCellY, maximumCellY) : this.cells.values();
+		for (const cell of candidateCells) for (const index of cell) {
+			const node = this.nodes[index];
+			if (!node) continue;
+			const radius = nodeOccupancyRadius(node);
+			if (node.position.x + radius >= left && node.position.x - radius <= right && node.position.y + radius >= bottom && node.position.y - radius <= top) indices.push(index);
+		}
+		return indices;
+	}
+	*cellsInBounds(minimumX, maximumX, minimumY, maximumY) {
+		for (let y = minimumY; y <= maximumY; y += 1) for (let x = minimumX; x <= maximumX; x += 1) yield this.cells.get(this.key(x, y)) ?? [];
+	}
+	coordinate(value) {
+		return Math.floor(value / this.cellSize);
+	}
+	key(x, y) {
+		return `${x}:${y}`;
+	}
+};
+//#endregion
+//#region src/theme.ts
+/** Dark canvas: Ink Black, Turf Green, Porcelain. */
+const graphraumThemeDark = Object.freeze({
+	background: "#040f0f",
+	dimmedNode: "#315a51",
+	edge: "#226f54",
+	edgeOpacity: .55,
+	edgeWidth: 1.5,
+	endpointAttach: "boundary",
+	focusedNode: "#73c7a5",
+	hoveredNode: "#e4a853",
+	node: "#226f54",
+	nodeStroke: "#fcfffc",
+	selectedEdge: "#fcfffc",
+	selectedNode: "#fcfffc"
+});
+/** Light canvas: Porcelain field with Turf marks and Ink selection. */
+const graphraumThemeLight = Object.freeze({
+	background: "#fcfffc",
+	dimmedNode: "#9bb5ac",
+	edge: "#226f54",
+	edgeOpacity: .65,
+	edgeWidth: 1.5,
+	endpointAttach: "boundary",
+	focusedNode: "#1a5c45",
+	hoveredNode: "#c47a1a",
+	node: "#226f54",
+	nodeStroke: "#040f0f",
+	selectedEdge: "#040f0f",
+	selectedNode: "#040f0f"
+});
+const graphraumThemes = Object.freeze({
+	dark: graphraumThemeDark,
+	light: graphraumThemeLight
+});
+/** Alias of {@link graphraumThemeDark} for backward compatibility. */
+const graphraumTheme = graphraumThemeDark;
+function resolveGraphraumTheme(input, base = graphraumThemeDark) {
+	if (input === void 0) return { ...base };
+	if (typeof input === "string") {
+		const preset = graphraumThemes[input];
+		if (!preset) throw new Error(`Unknown graphraum theme "${input}". Use "dark" or "light".`);
+		return { ...preset };
+	}
+	return {
+		...base,
+		...input
+	};
+}
+/** Collapse `"transparent"` onto `null` so callers have one transparent sentinel. */
+function normalizeGraphraumBackground(background) {
+	return background === "transparent" ? null : background;
+}
+function isTransparentGraphraumBackground(background) {
+	return normalizeGraphraumBackground(background) === null;
+}
+//#endregion
+//#region src/viewport-lod.ts
+/** Single source of truth for the density/overview/detail tier reported in diagnostics and used to drive edge LOD packing. */
+function resolveLodLevel(densityLodActive, edgeCandidateCount, visibleEdgeSegmentCount) {
+	if (densityLodActive) return "density";
+	return edgeCandidateCount > visibleEdgeSegmentCount ? "overview" : "detail";
+}
+/** Collects unique edges touching visible nodes without scanning the complete edge list. */
+function collectIncidentEdges(visibleNodeIndices, incidentEdgeIndices) {
+	const edges = /* @__PURE__ */ new Set();
+	for (const nodeIndex of visibleNodeIndices) for (const edgeIndex of incidentEdgeIndices[nodeIndex] ?? []) edges.add(edgeIndex);
+	return [...edges];
+}
+/** Applies a deterministic, evenly distributed overview budget. */
+function applyEdgeBudget(edgeIndices, maximum) {
+	if (!Number.isSafeInteger(maximum) || maximum < 1) throw new Error("Maximum visible edges must be a positive integer.");
+	if (edgeIndices.length <= maximum) return edgeIndices;
+	const step = edgeIndices.length / maximum;
+	return Array.from({ length: maximum }, (_, index) => edgeIndices[Math.floor(index * step)]).filter((edgeIndex) => edgeIndex !== void 0);
+}
+/** Keeps density LOD stable while camera movement hovers around the visible-node budget. */
+function shouldUseDensityLod(candidateCount, maximum, active) {
+	if (!Number.isSafeInteger(candidateCount) || candidateCount < 0) throw new Error("Visible node candidate count must be a non-negative integer.");
+	if (!Number.isSafeInteger(maximum) || maximum < 1) throw new Error("Maximum visible nodes must be a positive integer.");
+	return candidateCount > maximum * (active ? .85 : 1.1);
+}
+//#endregion
+//#region src/graphraum.ts
+/** Importance boost so selected nodes stay labeled when autoLabels budgets the overlay. */
+const SELECTED_LABEL_IMPORTANCE_BOOST = 1e3;
+function disposeMaterial(material) {
+	for (const item of Array.isArray(material) ? material : [material]) item.dispose();
+}
+const EDGE_INSTANCE_ATTRIBUTES = [
+	"instanceKind",
+	"instanceEndA",
+	"instanceEndB",
+	"instanceColor",
+	"instanceWidth",
+	"instanceStyle"
+];
+/** A small, explicit WebGL graph renderer: one instanced node mesh and one batched edge geometry. */
+var Graphraum = class {
+	container;
+	renderer;
+	scene = new Scene();
+	raycaster = new Raycaster();
+	pointer = new Vector2();
+	pickCenter = new Vector3();
+	pickRight = new Vector3();
+	pickUp = new Vector3();
+	theme;
+	backgroundTexture = null;
+	resizeObserver;
+	maxVisibleEdges;
+	maxVisibleNodes;
+	viewportCulling;
+	viewportOverscan;
+	visuals;
+	camera;
+	controls;
+	data = {
+		nodes: [],
+		edges: []
+	};
+	nodeIds = [];
+	nodeIndices = /* @__PURE__ */ new Map();
+	edgeNodeIndices = /* @__PURE__ */ new Uint32Array();
+	canonicalEdgePositions = /* @__PURE__ */ new Float32Array();
+	incidentEdgeIndices = [];
+	nodePresentations = /* @__PURE__ */ new Map();
+	edgePresentations = /* @__PURE__ */ new Map();
+	spatialGrid2d = new SpatialGrid2D();
+	nodeMesh = null;
+	nodePickMesh = null;
+	edgeMesh = null;
+	nodeCapacity = 0;
+	edgeCapacity = 0;
+	markerCapacity = 0;
+	edgeInstanceCapacity = 0;
+	selectedNodeIds = /* @__PURE__ */ new Set();
+	selectedEdgeIds = /* @__PURE__ */ new Set();
+	hoveredNodeIds = /* @__PURE__ */ new Set();
+	focusedNodeIds = /* @__PURE__ */ new Set();
+	dimmedNodeIds = /* @__PURE__ */ new Set();
+	visibleNodeSlots = /* @__PURE__ */ new Map();
+	visibleEdgeSlots = /* @__PURE__ */ new Map();
+	visibleEdgeLayouts = /* @__PURE__ */ new Map();
+	lastEdgeLodTier = "detail";
+	visibleNodeIndices = [];
+	pickableEdgeSegments = [];
+	visibleEdgeSegmentEdgeIndices = [];
+	visibleNodeCount = 0;
+	visibleNodeCandidateCount = 0;
+	densityLodActive = false;
+	visibleEdgeSegmentCount = 0;
+	visibleEdgeCount = 0;
+	visibleEdgeMarkerCount = 0;
+	visibleEdgeCandidateCount = 0;
+	edgeSegmentCapacity = 0;
+	mode;
+	frameRequest = null;
+	cpuFrameMilliseconds = 0;
+	gpuFrameMilliseconds = null;
+	gpuTimer = null;
+	viewListeners = /* @__PURE__ */ new Set();
+	focusListeners = /* @__PURE__ */ new Set();
+	lastHoveredNodeId = null;
+	constructor(container, options = {}) {
+		this.container = container;
+		this.mode = options.mode ?? "2d";
+		this.maxVisibleEdges = options.maxVisibleEdges ?? 1e5;
+		this.maxVisibleNodes = options.maxVisibleNodes ?? 1e5;
+		this.viewportCulling = options.viewportCulling ?? true;
+		this.viewportOverscan = options.viewportOverscan ?? 16;
+		this.visuals = options.visuals;
+		if (!Number.isSafeInteger(this.maxVisibleEdges) || this.maxVisibleEdges < 1) throw new Error("Maximum visible edges must be a positive integer.");
+		if (!Number.isSafeInteger(this.maxVisibleNodes) || this.maxVisibleNodes < 1) throw new Error("Maximum visible nodes must be a positive integer.");
+		if (!Number.isFinite(this.viewportOverscan) || this.viewportOverscan < 0) throw new Error("Viewport overscan must be a non-negative finite number.");
+		this.theme = resolveGraphraumTheme(options.theme);
+		this.renderer = new WebGLRenderer({
+			antialias: options.antialias ?? false,
+			alpha: true
+		});
+		this.applyBackground();
+		const context = this.renderer.getContext();
+		if (typeof WebGL2RenderingContext !== "undefined" && context instanceof WebGL2RenderingContext) {
+			const extension = context.getExtension("EXT_disjoint_timer_query_webgl2");
+			if (extension) this.gpuTimer = {
+				context,
+				extension,
+				pending: []
+			};
+		}
+		this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, options.maxPixelRatio ?? 2));
+		this.renderer.domElement.style.display = "block";
+		this.renderer.domElement.style.height = "100%";
+		this.renderer.domElement.style.width = "100%";
+		this.container.append(this.renderer.domElement);
+		this.renderer.domElement.addEventListener("pointermove", this.handlePointerMove);
+		this.renderer.domElement.addEventListener("pointerleave", this.handlePointerLeave);
+		this.camera = this.createCamera();
+		this.controls = this.createControls();
+		this.resizeObserver = new ResizeObserver(() => this.resize());
+		this.resizeObserver.observe(container);
+		this.resize();
+	}
+	setData(data) {
+		this.replaceData(data, true);
+	}
+	/** Merge a topology patch without fitting or resetting the current camera. */
+	applyDataPatch(patch) {
+		const addedNodeIds = new Set((patch.addedNodes ?? []).map((node) => node.id));
+		const addedEdgeIds = new Set((patch.addedEdges ?? []).map((edge) => edge.id));
+		if (addedNodeIds.size !== (patch.addedNodes ?? []).length) throw new Error("Duplicate added node ID.");
+		if (addedEdgeIds.size !== (patch.addedEdges ?? []).length) throw new Error("Duplicate added edge ID.");
+		if (isAppendOnlyDataPatch(patch) && this.canAppendDataPatch(patch)) {
+			this.appendDataPatch(patch);
+			return;
+		}
+		const merged = mergeDataPatch(this.data.nodes, this.data.edges, patch);
+		if (this.canMutateDataInPlace(merged)) {
+			this.mutateDataInPlace(merged);
+			return;
+		}
+		this.replaceData(merged, false);
+	}
+	canAppendDataPatch(patch) {
+		if (!this.nodeMesh || !this.nodePickMesh || !this.edgeMesh) return false;
+		const nodeIds = new Set(this.data.nodes.map((node) => node.id));
+		if ((patch.addedNodes ?? []).some((node) => nodeIds.has(node.id))) return false;
+		const edgeIds = new Set(this.data.edges.map((edge) => edge.id));
+		if ((patch.addedEdges ?? []).some((edge) => edgeIds.has(edge.id))) return false;
+		const allNodeIds = /* @__PURE__ */ new Set([...nodeIds, ...(patch.addedNodes ?? []).map((node) => node.id)]);
+		return (patch.addedNodes?.length ?? 0) + this.data.nodes.length <= this.nodeCapacity && (patch.addedEdges?.length ?? 0) + this.data.edges.length <= this.edgeCapacity && (patch.addedEdges ?? []).every((edge) => allNodeIds.has(edge.source) && allNodeIds.has(edge.target));
+	}
+	canMutateDataInPlace(merged) {
+		if (!this.nodeMesh || !this.nodePickMesh || !this.edgeMesh) return false;
+		return dataPatchFitsCapacity(merged, {
+			edges: this.edgeCapacity,
+			nodes: this.nodeCapacity
+		});
+	}
+	mutateDataInPlace(merged) {
+		const compiled = compileGraph(merged, this.visuals);
+		this.data = {
+			edges: merged.edges.map((edge, index) => ({
+				...edge,
+				...compiled.edgeVisuals[index]
+			})),
+			nodes: merged.nodes.map((node, index) => ({
+				...node,
+				...compiled.nodeVisuals[index],
+				position: { ...node.position }
+			}))
+		};
+		this.nodeIds = compiled.nodeIds;
+		this.nodeIndices = new Map(compiled.nodeIndices);
+		this.edgeNodeIndices = compiled.edgeNodeIndices;
+		this.canonicalEdgePositions = compiled.edgePositions;
+		this.incidentEdgeIndices = compiled.incidentEdgeIndices;
+		this.nodePresentations = new Map(compiled.nodePresentations);
+		this.edgePresentations = new Map(compiled.edgePresentations);
+		this.spatialGrid2d = new SpatialGrid2D();
+		for (const [index, node] of this.data.nodes.entries()) this.spatialGrid2d.set(index, node);
+		const liveNodeIds = new Set(this.nodeIds);
+		const liveEdgeIds = new Set(this.data.edges.map((edge) => edge.id));
+		this.selectedNodeIds = new Set([...this.selectedNodeIds].filter((id) => liveNodeIds.has(id)));
+		this.hoveredNodeIds = new Set([...this.hoveredNodeIds].filter((id) => liveNodeIds.has(id)));
+		this.focusedNodeIds = new Set([...this.focusedNodeIds].filter((id) => liveNodeIds.has(id)));
+		this.dimmedNodeIds = new Set([...this.dimmedNodeIds].filter((id) => liveNodeIds.has(id)));
+		this.selectedEdgeIds = new Set([...this.selectedEdgeIds].filter((id) => liveEdgeIds.has(id)));
+		this.materializeViewport();
+		this.requestRender();
+	}
+	appendDataPatch(patch) {
+		const addedNodes = patch.addedNodes ?? [];
+		const addedEdges = patch.addedEdges ?? [];
+		if (addedNodes.length === 0 && addedEdges.length === 0) return;
+		const nodeById = new Map(this.data.nodes.map((node) => [node.id, node]));
+		for (const node of addedNodes) nodeById.set(node.id, node);
+		const edgeEndpointNodes = addedEdges.flatMap((edge) => {
+			const source = nodeById.get(edge.source);
+			const target = nodeById.get(edge.target);
+			return source && target ? [source, target] : [];
+		});
+		const patchNodes = [...addedNodes, ...edgeEndpointNodes].filter((node, index, all) => all.findIndex((candidate) => candidate.id === node.id) === index);
+		const compiled = compileGraph({
+			nodes: patchNodes,
+			edges: addedEdges
+		}, this.visuals);
+		const nodeVisuals = new Map(patchNodes.map((node, index) => [node.id, compiled.nodeVisuals[index]]));
+		const nextNodes = [...this.data.nodes, ...addedNodes.map((node) => ({
+			...node,
+			...nodeVisuals.get(node.id)
+		}))];
+		const nextNodeIndices = new Map(this.nodeIndices);
+		for (const [index, node] of nextNodes.entries()) nextNodeIndices.set(node.id, index);
+		const nextEdges = [...this.data.edges, ...addedEdges.map((edge, index) => ({
+			...edge,
+			...compiled.edgeVisuals[index]
+		}))];
+		const nextEdgeIndices = new Uint32Array(nextEdges.length * 2);
+		nextEdgeIndices.set(this.edgeNodeIndices);
+		const nextEdgePositions = new Float32Array(nextEdges.length * 6);
+		nextEdgePositions.set(this.canonicalEdgePositions);
+		const nextIncidentEdges = this.incidentEdgeIndices.map((indices) => [...indices]);
+		for (const [index, edge] of nextEdges.entries()) {
+			const source = nextNodeIndices.get(edge.source);
+			const target = nextNodeIndices.get(edge.target);
+			if (source === void 0 || target === void 0) continue;
+			nextEdgeIndices[index * 2] = source;
+			nextEdgeIndices[index * 2 + 1] = target;
+			if (!nextIncidentEdges[source]) nextIncidentEdges[source] = [];
+			if (!nextIncidentEdges[target]) nextIncidentEdges[target] = [];
+			if (index >= this.data.edges.length) {
+				nextIncidentEdges[source]?.push(index);
+				nextIncidentEdges[target]?.push(index);
+				const sourceNode = nextNodes[source];
+				const targetNode = nextNodes[target];
+				if (sourceNode && targetNode) nextEdgePositions.set([
+					sourceNode.position.x,
+					sourceNode.position.y,
+					sourceNode.position.z ?? 0,
+					targetNode.position.x,
+					targetNode.position.y,
+					targetNode.position.z ?? 0
+				], index * 6);
+			}
+		}
+		this.data = {
+			nodes: nextNodes,
+			edges: nextEdges
+		};
+		this.nodeIds = nextNodes.map((node) => node.id);
+		this.nodeIndices = nextNodeIndices;
+		this.edgeNodeIndices = nextEdgeIndices;
+		this.canonicalEdgePositions = nextEdgePositions;
+		this.incidentEdgeIndices = nextIncidentEdges;
+		for (const node of addedNodes) {
+			const index = nextNodeIndices.get(node.id);
+			const nextNode = index === void 0 ? void 0 : this.data.nodes[index];
+			if (index !== void 0 && nextNode) this.spatialGrid2d.set(index, nextNode);
+		}
+		for (const [id, presentation] of compiled.nodePresentations) this.nodePresentations.set(id, presentation);
+		for (const [id, presentation] of compiled.edgePresentations) this.edgePresentations.set(id, presentation);
+		this.materializeViewport();
+		this.requestRender();
+	}
+	replaceData(data, fitView) {
+		const compiled = compileGraph(data, this.visuals);
+		this.disposeGraphObjects();
+		this.data = {
+			edges: data.edges.map((edge, index) => ({
+				...edge,
+				...compiled.edgeVisuals[index]
+			})),
+			nodes: data.nodes.map((node, index) => ({
+				...node,
+				...compiled.nodeVisuals[index],
+				position: { ...node.position }
+			}))
+		};
+		this.nodeIds = compiled.nodeIds;
+		this.nodeIndices = new Map(compiled.nodeIndices);
+		this.edgeNodeIndices = compiled.edgeNodeIndices;
+		this.canonicalEdgePositions = compiled.edgePositions;
+		this.incidentEdgeIndices = compiled.incidentEdgeIndices;
+		this.nodePresentations = new Map(compiled.nodePresentations);
+		this.edgePresentations = new Map(compiled.edgePresentations);
+		this.spatialGrid2d = new SpatialGrid2D();
+		for (const [index, node] of this.data.nodes.entries()) this.spatialGrid2d.set(index, node);
+		this.nodeCapacity = Math.min(this.maxVisibleNodes, nextCapacity(data.nodes.length));
+		const nodeCapacity = this.nodeCapacity;
+		const nodeMesh = new InstancedMesh(createNodeGeometry(nodeCapacity), createNodeMaterial(this.mode === "3d"), nodeCapacity);
+		allocateNodeInstanceColors(nodeMesh, nodeCapacity);
+		nodeMesh.renderOrder = this.mode === "2d" ? 1 : 0;
+		this.nodeMesh = nodeMesh;
+		this.scene.add(nodeMesh);
+		const nodePickMesh = new InstancedMesh(new SphereGeometry(1, 8, 6), new MeshBasicMaterial(), nodeCapacity);
+		this.nodePickMesh = nodePickMesh;
+		const capacities = edgeInstanceCapacities(data.edges.length, this.maxVisibleEdges);
+		this.edgeCapacity = capacities.edgeCapacity;
+		this.edgeSegmentCapacity = capacities.segmentCapacity;
+		this.markerCapacity = capacities.markerCapacity;
+		this.edgeInstanceCapacity = capacities.edgeInstanceCapacity;
+		const edgeMesh = new InstancedMesh(createEdgeGeometry(this.edgeInstanceCapacity), createEdgeMaterial(this.mode === "3d"), this.edgeInstanceCapacity);
+		edgeMesh.frustumCulled = false;
+		edgeMesh.renderOrder = this.mode === "2d" ? -1 : 0;
+		this.edgeMesh = edgeMesh;
+		this.scene.add(edgeMesh);
+		if (fitView) this.fitView();
+		else {
+			this.materializeViewport();
+			this.requestRender();
+		}
+	}
+	updateNodes(updates) {
+		if (updates.length === 0) return;
+		const objects = this.getGraphObjects("update nodes");
+		const prepared = prepareNodeUpdates(this.data.nodes, this.nodeIndices, updates);
+		this.applyPreparedNodeUpdates(prepared, objects);
+	}
+	/** Applies a transferable XYZ layout batch. Call repeatedly as a worker produces progressive positions. */
+	applyLayout(layout) {
+		const prepared = prepareLayoutPositions(this.data.nodes, this.nodeIndices, layout);
+		if (prepared.length === 0) return;
+		const objects = this.getGraphObjects("apply a layout");
+		this.applyPreparedNodeUpdates(prepared, objects);
+	}
+	getGraphObjects(action) {
+		if (!this.nodeMesh || !this.nodePickMesh || !this.edgeMesh) throw new Error(`Cannot ${action} before graph data is set`);
+		return {
+			edgeMesh: this.edgeMesh,
+			nodeMesh: this.nodeMesh,
+			nodePickMesh: this.nodePickMesh
+		};
+	}
+	applyPreparedNodeUpdates(prepared, { nodeMesh, nodePickMesh }) {
+		const nodes = [...this.data.nodes];
+		const matrix = new Matrix4();
+		const nodeShape = nodeMesh.geometry.getAttribute("instanceShape");
+		const nodeStrokeWidth = nodeMesh.geometry.getAttribute("instanceStrokeWidth");
+		const nodeStrokeColor = nodeMesh.geometry.getAttribute("instanceStrokeColor");
+		const viewportBounds = this.getViewportBounds2d();
+		let visibilityChanged = false;
+		let edgeEndpointsChanged = false;
+		const changedEdgeIndices = /* @__PURE__ */ new Set();
+		for (const update of prepared) {
+			nodes[update.index] = update.next;
+			if (update.positionChanged || update.sizeChanged) {
+				const wasVisible = this.visibleNodeSlots.has(update.index);
+				this.spatialGrid2d.set(update.index, update.next);
+				visibilityChanged ||= wasVisible !== this.isNodeVisible2d(update.next, viewportBounds);
+			}
+			const nodeSlot = this.visibleNodeSlots.get(update.index);
+			if (update.positionChanged || update.sizeChanged) {
+				if (nodeSlot !== void 0) {
+					const { height, width } = resolveNodeAxes({
+						height: update.next.height,
+						nodeId: update.next.id,
+						size: update.next.size,
+						width: update.next.width
+					});
+					const maxAxis = Math.max(width, height);
+					matrix.makeScale(width, height, maxAxis);
+					matrix.setPosition(update.next.position.x, update.next.position.y, update.next.position.z ?? 0);
+					nodeMesh.setMatrixAt(nodeSlot, matrix);
+					nodeMesh.instanceMatrix.addUpdateRange(nodeSlot * 16, 16);
+					const pickScale = maxAxis * Math.SQRT2;
+					matrix.makeScale(pickScale, pickScale, pickScale);
+					matrix.setPosition(update.next.position.x, update.next.position.y, update.next.position.z ?? 0);
+					nodePickMesh.setMatrixAt(nodeSlot, matrix);
+					nodePickMesh.instanceMatrix.addUpdateRange(nodeSlot * 16, 16);
+				}
+			}
+			if (update.colorChanged && nodeSlot !== void 0) {
+				nodeMesh.setColorAt(nodeSlot, this.getNodeColor(update.next));
+				nodeMesh.instanceColor?.addUpdateRange(nodeSlot * 3, 3);
+			}
+			if (update.shapeChanged && nodeSlot !== void 0) {
+				setNodeShapeAt(nodeShape, nodeSlot, update.next.shape);
+				nodeShape.addUpdateRange(nodeSlot, 1);
+			}
+			if (update.strokeChanged && nodeSlot !== void 0) {
+				setNodeStrokeAt(nodeStrokeWidth, nodeStrokeColor, nodeSlot, resolveNodeStroke(update.next, this.theme));
+				nodeStrokeWidth.addUpdateRange(nodeSlot, 1);
+				nodeStrokeColor.addUpdateRange(nodeSlot * 3, 3);
+			}
+			if (update.positionChanged) {
+				const incidentEdges = this.incidentEdgeIndices[update.index] ?? [];
+				if (incidentEdges.length > 0) edgeEndpointsChanged = true;
+				for (const edgeIndex of incidentEdges) {
+					changedEdgeIndices.add(edgeIndex);
+					const sourceIndex = this.edgeNodeIndices[edgeIndex * 2];
+					const canonicalOffset = edgeIndex * 6 + (sourceIndex === update.index ? 0 : 3);
+					this.canonicalEdgePositions.set([
+						update.next.position.x,
+						update.next.position.y,
+						update.next.position.z ?? 0
+					], canonicalOffset);
+				}
+			}
+		}
+		if (this.densityLodActive && prepared.some((update) => update.positionChanged || update.sizeChanged)) visibilityChanged = true;
+		this.data = {
+			...this.data,
+			nodes
+		};
+		if (visibilityChanged) {
+			this.materializeViewport();
+			this.requestRender();
+			return;
+		}
+		if (edgeEndpointsChanged) {
+			if (!this.patchVisibleEdgeEndpoints([...changedEdgeIndices])) this.materializeViewport();
+		}
+		if (prepared.some((update) => update.positionChanged || update.sizeChanged)) {
+			nodeMesh.instanceMatrix.needsUpdate = true;
+			nodePickMesh.instanceMatrix.needsUpdate = true;
+		}
+		if (prepared.some((update) => update.colorChanged) && nodeMesh.instanceColor) nodeMesh.instanceColor.needsUpdate = true;
+		if (prepared.some((update) => update.shapeChanged)) nodeShape.needsUpdate = true;
+		if (prepared.some((update) => update.strokeChanged)) {
+			nodeStrokeWidth.needsUpdate = true;
+			nodeStrokeColor.needsUpdate = true;
+		}
+		this.requestRender();
+	}
+	/** Patches GPU edge instances for moved endpoints when the visible edge set is unchanged. */
+	patchVisibleEdgeEndpoints(changedEdgeIndices) {
+		if (!this.edgeMesh || changedEdgeIndices.length === 0) return true;
+		const worldPerPixel = this.worldUnitsPerPixel();
+		const minHitSlop = Math.max(4 * worldPerPixel, this.theme.edgeWidth * worldPerPixel);
+		const edgeVisuals = this.data.edges.map((edge) => this.selectedEdgeIds.has(edge.id) ? {
+			...edge,
+			color: this.theme.selectedEdge
+		} : edge);
+		const result = patchVisibleEdgeInstances(this.edgeMesh.geometry, {
+			changedEdgeIndices,
+			defaults: {
+				color: this.theme.edge,
+				opacity: this.theme.edgeOpacity,
+				width: this.theme.edgeWidth
+			},
+			edgeNodeIndices: this.edgeNodeIndices,
+			edgeVisuals,
+			endpointAttach: this.theme.endpointAttach,
+			endpointPositions: this.canonicalEdgePositions,
+			layouts: this.visibleEdgeLayouts,
+			minHitSlop,
+			nodeOutlines: this.data.nodes.map((node) => ({
+				height: node.height,
+				shape: node.shape,
+				size: node.size,
+				strokeWidth: node.strokeWidth,
+				width: node.width
+			})),
+			tier: this.lastEdgeLodTier,
+			worldPerPixel
+		}, this.pickableEdgeSegments);
+		if (!result.ok) return false;
+		this.pickableEdgeSegments = result.pickableSegments;
+		return true;
+	}
+	setSelection(nodeIds) {
+		this.setNodeState("selected", nodeIds);
+	}
+	/** Highlights edges without changing node selection or source graph data. */
+	setEdgeSelection(edgeIds) {
+		this.selectedEdgeIds = new Set(edgeIds);
+		this.materializeViewport();
+		this.requestRender();
+	}
+	/** Applies an application-owned visual state without changing source graph data. */
+	setNodeState(state, nodeIds) {
+		const nextSelection = new Set(nodeIds);
+		const currentSelection = this.getNodeStateIds(state);
+		const changedNodeIds = new Set([...currentSelection, ...nextSelection].filter((nodeId) => currentSelection.has(nodeId) !== nextSelection.has(nodeId)));
+		if (changedNodeIds.size === 0) return;
+		this.setNodeStateIds(state, nextSelection);
+		this.applySelectionColors(changedNodeIds);
+		this.requestRender();
+		if (state === "selected" || state === "hovered") this.notifyFocusChange();
+	}
+	/** One-hop neighbor node ids via incident edges (undirected adjacency). */
+	getNeighborIds(nodeId) {
+		const index = this.nodeIndices.get(nodeId);
+		if (index === void 0) return [];
+		const neighbors = /* @__PURE__ */ new Set();
+		for (const edgeIndex of this.incidentEdgeIndices[index] ?? []) {
+			const edge = this.data.edges[edgeIndex];
+			if (!edge) continue;
+			if (edge.source !== nodeId) neighbors.add(edge.source);
+			if (edge.target !== nodeId) neighbors.add(edge.target);
+		}
+		return [...neighbors];
+	}
+	getSelectedNodeIds() {
+		return [...this.selectedNodeIds];
+	}
+	getHoveredNodeIds() {
+		return [...this.hoveredNodeIds];
+	}
+	/** Schedules one render on the next animation frame. Repeated calls in one frame are coalesced. */
+	render() {
+		this.requestRender();
+	}
+	setMode(mode) {
+		if (mode === this.mode) return;
+		this.mode = mode;
+		this.controls.removeEventListener("change", this.handleViewChange);
+		this.controls.dispose();
+		this.camera = this.createCamera();
+		this.controls = this.createControls();
+		if (this.nodeMesh && !Array.isArray(this.nodeMesh.material)) {
+			this.nodeMesh.material.depthTest = mode === "3d";
+			this.nodeMesh.material.depthWrite = mode === "3d";
+			this.nodeMesh.material.needsUpdate = true;
+			this.nodeMesh.renderOrder = mode === "2d" ? 1 : 0;
+		}
+		if (this.edgeMesh && !Array.isArray(this.edgeMesh.material)) {
+			this.edgeMesh.material.depthTest = mode === "3d";
+			this.edgeMesh.material.depthWrite = mode === "3d";
+			this.edgeMesh.material.needsUpdate = true;
+			this.edgeMesh.renderOrder = mode === "2d" ? -1 : 0;
+		}
+		this.fitView();
+	}
+	getMode() {
+		return this.mode;
+	}
+	getNodePresentation(nodeId) {
+		return this.nodePresentations.get(nodeId) ?? null;
+	}
+	/** Returns canvas-relative screen coordinates for a node, or null when the node does not exist. */
+	getNodeScreenPosition(nodeId) {
+		const index = this.nodeIndices.get(nodeId);
+		const node = index === void 0 ? void 0 : this.data.nodes[index];
+		if (!node) return null;
+		const projected = new Vector3(node.position.x, node.position.y, node.position.z ?? 0).project(this.camera);
+		const width = this.renderer.domElement.clientWidth;
+		const height = this.renderer.domElement.clientHeight;
+		return {
+			visible: projected.x >= -1 && projected.x <= 1 && projected.y >= -1 && projected.y <= 1 && projected.z >= -1 && projected.z <= 1,
+			x: (projected.x + 1) * width / 2,
+			y: (1 - projected.y) * height / 2
+		};
+	}
+	/**
+	* Candidates for a budgeted DOM label layer. Importance is incident edge degree, with a boost
+	* for selected nodes so selection stays labeled. Visibility comes from screen projection.
+	*/
+	getLabelCandidates() {
+		return this.data.nodes.map((node, index) => {
+			const degree = this.incidentEdgeIndices[index]?.length ?? 0;
+			return {
+				id: node.id,
+				importance: degree + (this.selectedNodeIds.has(node.id) ? SELECTED_LABEL_IMPORTANCE_BOOST : 0),
+				visible: this.getNodeScreenPosition(node.id)?.visible ?? false
+			};
+		});
+	}
+	/** Converts client coordinates to graph world coordinates on the z=0 plane. */
+	screenToWorld(clientX, clientY) {
+		const bounds = this.renderer.domElement.getBoundingClientRect();
+		if (bounds.width === 0 || bounds.height === 0) return null;
+		const worldX = (clientX - bounds.left) / bounds.width * 2 - 1;
+		const worldY = -((clientY - bounds.top) / bounds.height) * 2 + 1;
+		this.pointer.set(worldX, worldY);
+		if (this.camera instanceof OrthographicCamera) {
+			const world = new Vector3(this.pointer.x, this.pointer.y, 0).unproject(this.camera);
+			return {
+				x: world.x,
+				y: world.y,
+				z: world.z
+			};
+		}
+		this.raycaster.setFromCamera(this.pointer, this.camera);
+		const plane = new Plane(new Vector3(0, 0, 1), 0);
+		const world = this.raycaster.ray.intersectPlane(plane, new Vector3());
+		if (!world) return null;
+		return {
+			x: world.x,
+			y: world.y,
+			z: world.z
+		};
+	}
+	/** Creates a bounded DOM layer for labels, a toolbar, and optional rich HTML focus cards. */
+	createOverlay(options = {}) {
+		return new GraphraumOverlay(this, this.container, options);
+	}
+	/** Subscribes to camera and viewport changes. Returns an unsubscribe function. */
+	onViewChange(listener) {
+		this.viewListeners.add(listener);
+		listener();
+		return () => this.viewListeners.delete(listener);
+	}
+	/** Subscribes to selection and hover changes that affect overlay focus chrome. */
+	onFocusChange(listener) {
+		this.focusListeners.add(listener);
+		listener();
+		return () => this.focusListeners.delete(listener);
+	}
+	notifyFocusChange() {
+		for (const listener of this.focusListeners) listener();
+	}
+	handlePointerMove = (event) => {
+		const nodeId = this.pickNode(event.clientX, event.clientY);
+		if (nodeId === this.lastHoveredNodeId) return;
+		this.lastHoveredNodeId = nodeId;
+		this.setNodeState("hovered", nodeId ? [nodeId] : []);
+	};
+	handlePointerLeave = () => {
+		if (this.lastHoveredNodeId === null && this.hoveredNodeIds.size === 0) return;
+		this.lastHoveredNodeId = null;
+		this.setNodeState("hovered", []);
+	};
+	getEdgePresentation(edgeId) {
+		return this.edgePresentations.get(edgeId) ?? null;
+	}
+	getDiagnostics() {
+		return {
+			aggregatedNodeClusters: this.densityLodActive ? this.visibleNodeCount : 0,
+			cpuFrameMilliseconds: this.cpuFrameMilliseconds,
+			gpuFrameMilliseconds: this.gpuFrameMilliseconds,
+			gpuDrawCalls: this.renderer.info.render.calls,
+			gpuGeometries: this.renderer.info.memory.geometries,
+			gpuTextures: this.renderer.info.memory.textures,
+			lodLevel: resolveLodLevel(this.densityLodActive, this.visibleEdgeCandidateCount, this.visibleEdgeCount),
+			pickingStrategy: this.mode === "2d" ? "spatial-grid-2d" : "raycaster-3d",
+			selectedEdges: this.selectedEdgeIds.size,
+			selectedNodes: this.selectedNodeIds.size,
+			totalEdges: this.data.edges.length,
+			totalNodes: this.data.nodes.length,
+			visibleEdgeCandidates: this.visibleEdgeCandidateCount,
+			visibleEdgeMarkers: this.visibleEdgeMarkerCount,
+			visibleEdgeSegments: this.visibleEdgeSegmentCount,
+			visibleEdges: this.visibleEdgeCount,
+			visibleNodes: this.visibleNodeCount,
+			visibleNodeCandidates: this.visibleNodeCandidateCount
+		};
+	}
+	/** Picks a node under the pointer. Prefer `pickHit` when edges must be selectable too. */
+	pick(clientX, clientY) {
+		const hit = this.pickHit(clientX, clientY);
+		return hit?.kind === "node" ? hit.id : null;
+	}
+	/**
+	* Picks the top-most graph element under the pointer. Nodes win over edges when both hit.
+	* 2D uses the spatial grid for nodes and world-space segment distance for edges; 3D uses
+	* the node pick mesh then the edge instance mesh.
+	*/
+	pickHit(clientX, clientY) {
+		const nodeId = this.pickNode(clientX, clientY);
+		if (nodeId) return {
+			kind: "node",
+			id: nodeId
+		};
+		const edgeId = this.pickEdge(clientX, clientY);
+		return edgeId ? {
+			kind: "edge",
+			id: edgeId
+		} : null;
+	}
+	fitView() {
+		if (!this.nodeMesh || this.data.nodes.length === 0) {
+			this.requestRender();
+			return;
+		}
+		const bounds = new Box3();
+		const minimum = new Vector3();
+		const maximum = new Vector3();
+		for (const node of this.data.nodes) {
+			const { height, width } = resolveNodeAxes({
+				height: node.height,
+				nodeId: node.id,
+				size: node.size,
+				width: node.width
+			});
+			const radius = Math.max(width, height);
+			const z = node.position.z ?? 0;
+			bounds.expandByPoint(minimum.set(node.position.x - radius, node.position.y - radius, z - radius));
+			bounds.expandByPoint(maximum.set(node.position.x + radius, node.position.y + radius, z + radius));
+		}
+		const center = bounds.getCenter(new Vector3());
+		const size = bounds.getSize(new Vector3());
+		const width = Math.max(this.container.clientWidth, 1);
+		const height = Math.max(this.container.clientHeight, 1);
+		const aspect = width / height;
+		if (this.camera instanceof OrthographicCamera) {
+			const visibleHeight = Math.max(size.y, size.x / aspect, 1) * 1.15;
+			this.camera.left = -visibleHeight * aspect / 2;
+			this.camera.right = visibleHeight * aspect / 2;
+			this.camera.top = visibleHeight / 2;
+			this.camera.bottom = -visibleHeight / 2;
+			this.camera.position.set(center.x, center.y, center.z + Math.max(size.z, 1e3));
+		} else {
+			applyPerspectiveContainerAspect(this.camera, width, height);
+			const distance = Math.max(size.length() / 2, 1) / Math.sin(this.camera.fov * Math.PI / 360);
+			this.camera.position.set(center.x, center.y, center.z + distance * 1.15);
+			this.camera.near = Math.max(distance / 1e4, .1);
+			this.camera.far = distance * 10;
+		}
+		this.camera.lookAt(center);
+		this.camera.updateProjectionMatrix();
+		this.controls.target.copy(center);
+		this.controls.update();
+		this.materializeViewport();
+		this.requestRender();
+	}
+	setTheme(theme) {
+		this.theme = typeof theme === "string" ? resolveGraphraumTheme(theme) : resolveGraphraumTheme(theme, this.theme);
+		this.applyBackground();
+		if (this.nodeMesh) this.materializeViewport();
+		this.requestRender();
+	}
+	setBackground(background) {
+		this.setTheme({ background });
+	}
+	resize() {
+		const width = Math.max(this.container.clientWidth, 1);
+		const height = Math.max(this.container.clientHeight, 1);
+		this.renderer.setSize(width, height, false);
+		if (this.camera instanceof PerspectiveCamera) {
+			applyPerspectiveContainerAspect(this.camera, width, height);
+			this.camera.updateProjectionMatrix();
+		} else if (this.camera instanceof OrthographicCamera) {
+			this.fitView();
+			return;
+		}
+		this.materializeViewport();
+		this.requestRender();
+	}
+	destroy() {
+		this.resizeObserver.disconnect();
+		this.renderer.domElement.removeEventListener("pointermove", this.handlePointerMove);
+		this.renderer.domElement.removeEventListener("pointerleave", this.handlePointerLeave);
+		this.controls.removeEventListener("change", this.handleViewChange);
+		this.controls.dispose();
+		if (this.frameRequest !== null) cancelAnimationFrame(this.frameRequest);
+		if (this.gpuTimer) for (const query of this.gpuTimer.pending) this.gpuTimer.context.deleteQuery(query);
+		this.disposeBackgroundTexture();
+		this.disposeGraphObjects();
+		this.renderer.dispose();
+		this.renderer.domElement.remove();
+	}
+	requestRender = () => {
+		if (this.frameRequest !== null) return;
+		this.frameRequest = requestAnimationFrame(() => {
+			this.frameRequest = null;
+			this.readGpuTimers();
+			const timer = this.gpuTimer;
+			const query = timer?.context.createQuery() ?? null;
+			if (timer && query) timer.context.beginQuery(timer.extension.TIME_ELAPSED_EXT, query);
+			const startedAt = performance.now();
+			this.renderer.render(this.scene, this.camera);
+			this.cpuFrameMilliseconds = performance.now() - startedAt;
+			if (timer && query) {
+				timer.context.endQuery(timer.extension.TIME_ELAPSED_EXT);
+				timer.pending.push(query);
+			}
+			for (const listener of this.viewListeners) listener();
+		});
+	};
+	readGpuTimers() {
+		const timer = this.gpuTimer;
+		if (!timer) return;
+		while (timer.pending.length > 0) {
+			const query = timer.pending[0];
+			if (!query || !timer.context.getQueryParameter(query, timer.context.QUERY_RESULT_AVAILABLE)) return;
+			timer.pending.shift();
+			if (!timer.context.getParameter(timer.extension.GPU_DISJOINT_EXT)) this.gpuFrameMilliseconds = timer.context.getQueryParameter(query, timer.context.QUERY_RESULT) / 1e6;
+			timer.context.deleteQuery(query);
+		}
+	}
+	handleViewChange = () => {
+		this.materializeViewport();
+		this.requestRender();
+	};
+	createCamera() {
+		const aspect = containerAspect(this.container.clientWidth, this.container.clientHeight);
+		return this.mode === "2d" ? new OrthographicCamera(-1, 1, 1, -1, -1e5, 1e5) : new PerspectiveCamera(45, aspect, .1, 1e5);
+	}
+	createControls() {
+		const controls = new OrbitControls(this.camera, this.renderer.domElement);
+		controls.enableDamping = false;
+		controls.enableRotate = this.mode === "3d";
+		controls.screenSpacePanning = true;
+		if (this.mode === "2d") {
+			controls.minZoom = .01;
+			controls.mouseButtons.LEFT = MOUSE.PAN;
+		}
+		controls.addEventListener("change", this.handleViewChange);
+		return controls;
+	}
+	pickNode(clientX, clientY) {
+		if (!this.nodeMesh || !this.nodePickMesh) return null;
+		const bounds = this.renderer.domElement.getBoundingClientRect();
+		if (bounds.width === 0 || bounds.height === 0) return null;
+		this.pointer.set((clientX - bounds.left) / bounds.width * 2 - 1, -((clientY - bounds.top) / bounds.height) * 2 + 1);
+		if (this.camera instanceof OrthographicCamera) {
+			const world = new Vector3(this.pointer.x, this.pointer.y, 0).unproject(this.camera);
+			const index = this.spatialGrid2d.pick(world.x, world.y);
+			return index === null ? null : this.nodeIds[index] ?? null;
+		}
+		this.raycaster.setFromCamera(this.pointer, this.camera);
+		const checkedInstances = /* @__PURE__ */ new Set();
+		for (const hit of this.raycaster.intersectObject(this.nodePickMesh, false)) {
+			if (hit.instanceId === void 0 || checkedInstances.has(hit.instanceId)) continue;
+			checkedInstances.add(hit.instanceId);
+			const nodeIndex = this.visibleNodeIndices[hit.instanceId];
+			if (nodeIndex === void 0) continue;
+			const node = this.data.nodes[nodeIndex];
+			if (!node) continue;
+			const { height, width } = resolveNodeAxes({
+				height: node.height,
+				nodeId: node.id,
+				size: node.size,
+				width: node.width
+			});
+			this.pickCenter.set(node.position.x, node.position.y, node.position.z ?? 0).project(this.camera);
+			this.pickRight.set(1, 0, 0).applyQuaternion(this.camera.quaternion).multiplyScalar(width);
+			this.pickRight.set(this.pickRight.x + node.position.x, this.pickRight.y + node.position.y, this.pickRight.z + (node.position.z ?? 0));
+			this.pickRight.project(this.camera);
+			this.pickUp.set(0, 1, 0).applyQuaternion(this.camera.quaternion).multiplyScalar(height);
+			this.pickUp.set(this.pickUp.x + node.position.x, this.pickUp.y + node.position.y, this.pickUp.z + (node.position.z ?? 0));
+			this.pickUp.project(this.camera);
+			const radiusNdcX = Math.abs(this.pickRight.x - this.pickCenter.x);
+			const radiusNdcY = Math.abs(this.pickUp.y - this.pickCenter.y);
+			if (radiusNdcX === 0 || radiusNdcY === 0) continue;
+			const offsetX = (this.pointer.x - this.pickCenter.x) / radiusNdcX;
+			const offsetY = (this.pointer.y - this.pickCenter.y) / radiusNdcY;
+			if (containsNodePoint(node.shape, offsetX, offsetY)) return this.nodeIds[nodeIndex] ?? null;
+		}
+		return null;
+	}
+	pickEdge(clientX, clientY) {
+		if (!this.edgeMesh || this.pickableEdgeSegments.length === 0) return null;
+		const bounds = this.renderer.domElement.getBoundingClientRect();
+		if (bounds.width === 0 || bounds.height === 0) return null;
+		this.pointer.set((clientX - bounds.left) / bounds.width * 2 - 1, -((clientY - bounds.top) / bounds.height) * 2 + 1);
+		if (this.camera instanceof OrthographicCamera) {
+			const world = new Vector3(this.pointer.x, this.pointer.y, 0).unproject(this.camera);
+			const edgeIndex = pickClosestEdgeIndex({
+				x: world.x,
+				y: world.y
+			}, this.pickableEdgeSegments);
+			return edgeIndex === null ? null : this.data.edges[edgeIndex]?.id ?? null;
+		}
+		this.raycaster.setFromCamera(this.pointer, this.camera);
+		for (const hit of this.raycaster.intersectObject(this.edgeMesh, false)) {
+			if (hit.instanceId === void 0) continue;
+			if (hit.instanceId >= this.visibleEdgeSegmentCount) continue;
+			const edgeIndex = this.visibleEdgeSegmentEdgeIndices[hit.instanceId];
+			if (edgeIndex === void 0) continue;
+			return this.data.edges[edgeIndex]?.id ?? null;
+		}
+		return null;
+	}
+	worldUnitsPerPixel() {
+		const width = Math.max(this.renderer.domElement.clientWidth, 1);
+		if (this.camera instanceof OrthographicCamera) return (this.camera.right - this.camera.left) / (width * this.camera.zoom);
+		const bounds = this.renderer.domElement.getBoundingClientRect();
+		const left = this.screenToWorld(bounds.left, bounds.top);
+		const right = this.screenToWorld(bounds.left + 1, bounds.top);
+		if (!left || !right) return 1;
+		return Math.hypot(right.x - left.x, right.y - left.y) || 1;
+	}
+	applySelectionColors(nodeIds) {
+		if (!this.nodeMesh?.instanceColor) return;
+		const slots = [];
+		for (const nodeId of nodeIds) {
+			const index = this.nodeIndices.get(nodeId);
+			if (index === void 0) continue;
+			const slot = this.visibleNodeSlots.get(index);
+			if (slot === void 0) continue;
+			const node = this.data.nodes[index];
+			if (!node) continue;
+			this.nodeMesh.setColorAt(slot, this.getNodeColor(node));
+			slots.push(slot);
+		}
+		markInstanceColorSlots(this.nodeMesh.instanceColor, slots);
+	}
+	getNodeStateIds(state) {
+		switch (state) {
+			case "dimmed": return this.dimmedNodeIds;
+			case "focused": return this.focusedNodeIds;
+			case "hovered": return this.hoveredNodeIds;
+			case "selected": return this.selectedNodeIds;
+		}
+	}
+	setNodeStateIds(state, nodeIds) {
+		switch (state) {
+			case "dimmed":
+				this.dimmedNodeIds = nodeIds;
+				return;
+			case "focused":
+				this.focusedNodeIds = nodeIds;
+				return;
+			case "hovered":
+				this.hoveredNodeIds = nodeIds;
+				return;
+			case "selected": this.selectedNodeIds = nodeIds;
+		}
+	}
+	getNodeColor(node) {
+		if (this.focusedNodeIds.has(node.id)) return new Color(this.theme.focusedNode);
+		if (this.selectedNodeIds.has(node.id)) return new Color(this.theme.selectedNode);
+		if (this.hoveredNodeIds.has(node.id)) return new Color(this.theme.hoveredNode);
+		if (this.dimmedNodeIds.has(node.id)) return new Color(this.theme.dimmedNode);
+		return new Color(node.color ?? this.theme.node);
+	}
+	getViewportBounds2d() {
+		if (!(this.camera instanceof OrthographicCamera) || !this.viewportCulling) return null;
+		const bottomLeft = new Vector3(-1, -1, 0).unproject(this.camera);
+		const topRight = new Vector3(1, 1, 0).unproject(this.camera);
+		return {
+			bottom: bottomLeft.y,
+			left: bottomLeft.x,
+			right: topRight.x,
+			top: topRight.y
+		};
+	}
+	isNodeVisible2d(node, bounds) {
+		if (!bounds) return true;
+		const { height, width } = resolveNodeAxes({
+			height: node.height,
+			nodeId: node.id,
+			size: node.size,
+			width: node.width
+		});
+		return node.position.x + width >= bounds.left - this.viewportOverscan && node.position.x - width <= bounds.right + this.viewportOverscan && node.position.y + height >= bounds.bottom - this.viewportOverscan && node.position.y - height <= bounds.top + this.viewportOverscan;
+	}
+	disposeBackgroundTexture() {
+		if (!this.backgroundTexture) return;
+		this.backgroundTexture.dispose();
+		this.backgroundTexture = null;
+	}
+	createBackgroundTexture(source, repeat) {
+		const texture = source instanceof HTMLCanvasElement || typeof OffscreenCanvas !== "undefined" && source instanceof OffscreenCanvas ? new CanvasTexture(source) : new Texture(source);
+		texture.colorSpace = SRGBColorSpace;
+		texture.needsUpdate = true;
+		const [repeatX, repeatY] = repeat ?? [1, 1];
+		if (repeatX !== 1 || repeatY !== 1) {
+			texture.wrapS = RepeatWrapping;
+			texture.wrapT = RepeatWrapping;
+			texture.repeat.set(repeatX, repeatY);
+		}
+		return texture;
+	}
+	applyBackground() {
+		this.disposeBackgroundTexture();
+		const background = normalizeGraphraumBackground(this.theme.background);
+		if (background === null) {
+			this.scene.background = null;
+			this.renderer.setClearColor(0, 0);
+			return;
+		}
+		if (typeof background === "object") {
+			this.backgroundTexture = this.createBackgroundTexture(background.source, background.repeat);
+			this.scene.background = this.backgroundTexture;
+			this.renderer.setClearColor(0, 1);
+			return;
+		}
+		const color = new Color(background);
+		this.scene.background = color;
+		this.renderer.setClearColor(color, 1);
+	}
+	materializeViewport() {
+		if (!this.nodeMesh || !this.nodePickMesh || !this.edgeMesh) return;
+		const bounds = this.getViewportBounds2d();
+		const visibleNodeCandidates = bounds ? this.spatialGrid2d.queryBounds(bounds, this.viewportOverscan) : this.data.nodes.map((_, index) => index);
+		this.densityLodActive = shouldUseDensityLod(visibleNodeCandidates.length, this.maxVisibleNodes, this.densityLodActive);
+		const materializedNodes = this.materializeNodes(visibleNodeCandidates, bounds);
+		const visibleNodeIndices = materializedNodes.map(({ index }) => index);
+		const edgeCandidates = bounds ? collectIncidentEdges(visibleNodeIndices, this.incidentEdgeIndices) : this.data.edges.map((_, index) => index);
+		const visibleEdgeIndices = applyEdgeBudget(edgeCandidates, this.maxVisibleEdges);
+		const matrix = new Matrix4();
+		this.visibleNodeSlots = /* @__PURE__ */ new Map();
+		this.visibleNodeIndices = visibleNodeIndices;
+		this.nodeMesh.instanceMatrix.clearUpdateRanges();
+		this.nodePickMesh.instanceMatrix.clearUpdateRanges();
+		this.nodeMesh.instanceColor?.clearUpdateRanges();
+		const nodeShape = this.nodeMesh.geometry.getAttribute("instanceShape");
+		const nodeStrokeWidth = this.nodeMesh.geometry.getAttribute("instanceStrokeWidth");
+		const nodeStrokeColor = this.nodeMesh.geometry.getAttribute("instanceStrokeColor");
+		nodeShape.clearUpdateRanges();
+		nodeStrokeWidth.clearUpdateRanges();
+		nodeStrokeColor.clearUpdateRanges();
+		for (const [slot, materialized] of materializedNodes.entries()) {
+			const nodeIndex = materialized.index;
+			const node = this.data.nodes[nodeIndex];
+			if (!node) continue;
+			this.visibleNodeSlots.set(nodeIndex, slot);
+			const { height, width } = materialized;
+			const maxAxis = Math.max(width, height);
+			matrix.makeScale(width, height, maxAxis);
+			matrix.setPosition(materialized.x, materialized.y, materialized.z);
+			this.nodeMesh.setMatrixAt(slot, matrix);
+			const pickScale = maxAxis * Math.SQRT2;
+			matrix.makeScale(pickScale, pickScale, pickScale);
+			matrix.setPosition(materialized.x, materialized.y, materialized.z);
+			this.nodePickMesh.setMatrixAt(slot, matrix);
+			this.nodeMesh.setColorAt(slot, this.getNodeColor(node));
+			setNodeShapeAt(nodeShape, slot, node.shape);
+			setNodeStrokeAt(nodeStrokeWidth, nodeStrokeColor, slot, resolveNodeStroke(node, this.theme));
+		}
+		this.nodeMesh.count = materializedNodes.length;
+		this.nodePickMesh.count = materializedNodes.length;
+		this.nodeMesh.instanceMatrix.addUpdateRange(0, materializedNodes.length * 16);
+		this.nodeMesh.instanceMatrix.needsUpdate = true;
+		this.nodePickMesh.instanceMatrix.addUpdateRange(0, materializedNodes.length * 16);
+		this.nodePickMesh.instanceMatrix.needsUpdate = true;
+		if (this.nodeMesh.instanceColor) {
+			this.nodeMesh.instanceColor.addUpdateRange(0, materializedNodes.length * 3);
+			this.nodeMesh.instanceColor.needsUpdate = true;
+		}
+		nodeShape.addUpdateRange(0, materializedNodes.length);
+		nodeShape.needsUpdate = true;
+		nodeStrokeWidth.addUpdateRange(0, materializedNodes.length);
+		nodeStrokeWidth.needsUpdate = true;
+		nodeStrokeColor.addUpdateRange(0, materializedNodes.length * 3);
+		nodeStrokeColor.needsUpdate = true;
+		const lodLevel = resolveLodLevel(this.densityLodActive, edgeCandidates.length, visibleEdgeIndices.length);
+		this.lastEdgeLodTier = edgeTierFromDiagnosticsLod(lodLevel);
+		const worldPerPixel = this.worldUnitsPerPixel();
+		const packed = packEdgeInstances({
+			edgeIndices: visibleEdgeIndices,
+			edgeVisuals: this.data.edges.map((edge) => this.selectedEdgeIds.has(edge.id) ? {
+				...edge,
+				color: this.theme.selectedEdge
+			} : edge),
+			endpointPositions: this.canonicalEdgePositions,
+			defaults: {
+				color: this.theme.edge,
+				opacity: this.theme.edgeOpacity,
+				width: this.theme.edgeWidth
+			},
+			tier: this.lastEdgeLodTier,
+			maxSegments: this.edgeSegmentCapacity,
+			endpointAttach: this.theme.endpointAttach,
+			edgeNodeIndices: this.edgeNodeIndices,
+			nodeOutlines: this.data.nodes.map((node) => ({
+				height: node.height,
+				shape: node.shape,
+				size: node.size,
+				strokeWidth: node.strokeWidth,
+				width: node.width
+			}))
+		});
+		const edgeGeometry = this.edgeMesh.geometry;
+		this.visibleEdgeSlots = /* @__PURE__ */ new Map();
+		this.visibleEdgeLayouts = buildVisibleEdgeLayouts(packed.segments, packed.markers, packed.segments.length);
+		this.pickableEdgeSegments = [];
+		this.visibleEdgeSegmentEdgeIndices = [];
+		let edgeSlot = 0;
+		const distinctEdges = /* @__PURE__ */ new Set();
+		const minHitSlop = Math.max(4 * worldPerPixel, this.theme.edgeWidth * worldPerPixel);
+		for (const segment of packed.segments) {
+			writeEdgeSegmentInstance(edgeGeometry, edgeSlot, segment);
+			if (!this.visibleEdgeSlots.has(segment.edgeIndex)) this.visibleEdgeSlots.set(segment.edgeIndex, edgeSlot);
+			distinctEdges.add(segment.edgeIndex);
+			this.visibleEdgeSegmentEdgeIndices.push(segment.edgeIndex);
+			this.pickableEdgeSegments.push({
+				edgeIndex: segment.edgeIndex,
+				hitSlop: Math.max(minHitSlop, segment.width * worldPerPixel / 2 + 2 * worldPerPixel),
+				x1: segment.x1,
+				y1: segment.y1,
+				x2: segment.x2,
+				y2: segment.y2
+			});
+			edgeSlot += 1;
+		}
+		const segmentCount = edgeSlot;
+		for (const marker of packed.markers) {
+			writeEdgeMarkerInstance(edgeGeometry, edgeSlot, marker);
+			edgeSlot += 1;
+		}
+		this.edgeMesh.count = edgeSlot;
+		for (const name of EDGE_INSTANCE_ATTRIBUTES) {
+			const attribute = edgeGeometry.getAttribute(name);
+			attribute.clearUpdateRanges();
+			attribute.addUpdateRange(0, edgeSlot * attribute.itemSize);
+			attribute.needsUpdate = true;
+		}
+		this.visibleNodeCandidateCount = visibleNodeCandidates.length;
+		this.visibleNodeCount = materializedNodes.length;
+		this.visibleEdgeCandidateCount = edgeCandidates.length;
+		this.visibleEdgeSegmentCount = segmentCount;
+		this.visibleEdgeCount = distinctEdges.size;
+		this.visibleEdgeMarkerCount = packed.markers.length;
+	}
+	materializeNodes(indices, bounds) {
+		if (!this.densityLodActive || !bounds) return indices.slice(0, this.maxVisibleNodes).flatMap((index) => {
+			const node = this.data.nodes[index];
+			if (!node) return [];
+			const { height, width } = resolveNodeAxes({
+				height: node.height,
+				nodeId: node.id,
+				size: node.size,
+				width: node.width
+			});
+			return [{
+				height,
+				index,
+				width,
+				x: node.position.x,
+				y: node.position.y,
+				z: node.position.z ?? 0
+			}];
+		});
+		const aspect = Math.max(this.container.clientWidth, 1) / Math.max(this.container.clientHeight, 1);
+		const columns = Math.max(1, Math.floor(Math.sqrt(this.maxVisibleNodes * aspect)));
+		const rows = Math.max(1, Math.floor(this.maxVisibleNodes / columns));
+		const cellWidth = Math.max((bounds.right - bounds.left) / columns, Number.EPSILON);
+		const cellHeight = Math.max((bounds.top - bounds.bottom) / rows, Number.EPSILON);
+		const clusters = /* @__PURE__ */ new Map();
+		for (const index of indices) {
+			const node = this.data.nodes[index];
+			if (!node) continue;
+			const axes = resolveNodeAxes({
+				height: node.height,
+				nodeId: node.id,
+				size: node.size,
+				width: node.width
+			});
+			const axisSize = Math.max(axes.width, axes.height);
+			const key = `${Math.min(columns - 1, Math.max(0, Math.floor((node.position.x - bounds.left) / cellWidth)))}:${Math.min(rows - 1, Math.max(0, Math.floor((node.position.y - bounds.bottom) / cellHeight)))}`;
+			const cluster = clusters.get(key);
+			if (!cluster) {
+				clusters.set(key, {
+					count: 1,
+					height: axisSize,
+					index,
+					width: axisSize,
+					x: node.position.x,
+					y: node.position.y,
+					z: node.position.z ?? 0
+				});
+				continue;
+			}
+			cluster.count += 1;
+			cluster.x += (node.position.x - cluster.x) / cluster.count;
+			cluster.y += (node.position.y - cluster.y) / cluster.count;
+			cluster.z += ((node.position.z ?? 0) - cluster.z) / cluster.count;
+			const grownAxis = Math.min(Math.max(cluster.width, axisSize) + .25, 16);
+			cluster.width = grownAxis;
+			cluster.height = grownAxis;
+		}
+		return [...clusters.values()].slice(0, this.maxVisibleNodes);
+	}
+	disposeGraphObjects() {
+		this.pickableEdgeSegments = [];
+		this.visibleEdgeSegmentEdgeIndices = [];
+		this.visibleEdgeLayouts = /* @__PURE__ */ new Map();
+		if (this.nodeMesh) {
+			this.scene.remove(this.nodeMesh);
+			this.nodeMesh.geometry.dispose();
+			disposeMaterial(this.nodeMesh.material);
+			this.nodeMesh = null;
+		}
+		if (this.nodePickMesh) {
+			this.nodePickMesh.geometry.dispose();
+			disposeMaterial(this.nodePickMesh.material);
+			this.nodePickMesh = null;
+		}
+		if (this.edgeMesh) {
+			this.scene.remove(this.edgeMesh);
+			this.edgeMesh.geometry.dispose();
+			disposeMaterial(this.edgeMesh.material);
+			this.edgeMesh = null;
+		}
+	}
+};
+function nextCapacity(length) {
+	let capacity = 1;
+	while (capacity < length) capacity *= 2;
+	return capacity;
+}
+/**
+* Segment capacity is edgeCapacity × DETAIL_MAX_SEGMENTS (cubic worst case).
+* Marker capacity is always exactly 2× edge capacity (both ends) — never derived from
+* `nextCapacity(edgeCount * 2)` independently, which can undershoot for small edge counts
+* and let a later append with `markerEnd: "both"` overrun the instanced buffer.
+*/
+function edgeInstanceCapacities(edgeCount, maxVisibleEdges) {
+	const edgeCapacity = Math.min(maxVisibleEdges, nextCapacity(edgeCount));
+	const segmentCapacity = edgeCapacity * 24;
+	const markerCapacity = edgeCapacity * 2;
+	return {
+		edgeCapacity,
+		segmentCapacity,
+		markerCapacity,
+		edgeInstanceCapacity: segmentCapacity + markerCapacity
+	};
+}
+//#endregion
+//#region src/visuals.ts
+/** Defines typed, serializable graph visuals without coupling application data to the render loop. */
+function defineVisuals(visuals) {
+	return visuals;
+}
+//#endregion
+export { DEFAULT_ENDPOINT_ATTACH, DEFAULT_ENDPOINT_CLEARANCE, DEFAULT_FORCE_SETTINGS, Graphraum, GraphraumOverlay, attachPointOnOutline, bindGraphology, boundOverlayIds, computeClusteredForcePositions, computeForcePositions, createForceSimulation, defineVisuals, forceIterationCount, graphraumEdgePaths, graphraumNodeShapes, graphraumTheme, graphraumThemeDark, graphraumThemeLight, graphraumThemes, isTransparentGraphraumBackground, normalizeGraphraumBackground, orderFocusNodeIds, resolveGraphraumTheme, selectBudgetedLabelIds, selectFocusLabelIds, selectRichNodeIds, trimEdgeEndpoints };