@bruno00o/graph 0.0.0-stage → 0.2.0

package/dist/mount-graph-DYOgD_ql.js

@@ -0,0 +1,4343 @@
+import { createStore } from "@tanstack/store";
+import TinySDF from "@mapbox/tiny-sdf";
+// src/core/state-names.ts
+const builtInStates = [
+	"selected",
+	"hovered",
+	"focused"
+];
+const maxFreeStates = 32 - builtInStates.length;
+function isBuiltInState(name) {
+	return builtInStates.includes(name);
+}
+function freeStateNames(states) {
+	return Object.keys(states).filter((name) => !isBuiltInState(name));
+}
+// src/core/accessor.ts
+function toAccessor(channel) {
+	if (typeof channel === "function") return channel;
+	return (datum) => datum === null || datum === void 0 ? void 0 : datum[channel];
+}
+function isKey(value) {
+	return typeof value === "string" || typeof value === "number" && Number.isFinite(value);
+}
+// src/core/index-pool.ts
+var IndexPool = class {
+	#next = 0;
+	#free = [];
+	get capacity() {
+		return this.#next;
+	}
+	acquire() {
+		return this.#free.pop() ?? this.#next++;
+	}
+	release(index) {
+		this.#free.push(index);
+	}
+};
+// src/core/live-source.ts
+function isLiveSource(data) {
+	return typeof data === "object" && data !== null && typeof data.subscribeChanges === "function";
+}
+// src/core/shallow-equal.ts
+function shallowEqual(a, b) {
+	if (a === b) return true;
+	const keys = Object.keys(a);
+	if (keys.length !== Object.keys(b).length) return false;
+	return keys.every((key) => Object.hasOwn(b, key) && Object.is(a[key], b[key]));
+}
+// src/core/source-table.ts
+var SourceTable = class {
+	dirty = /* @__PURE__ */ new Map();
+	remarked = [];
+	#kind;
+	#issues;
+	#notify;
+	#sources = [];
+	constructor(kind, issues, notify) {
+		this.#kind = kind;
+		this.#issues = issues;
+		this.#notify = notify;
+	}
+	setMarks(marks) {
+		const previous = this.#sources;
+		this.#sources = marks.map((mark, slot) => this.#reconcile(slot, mark, previous[slot]));
+		for (const old of previous.slice(marks.length)) this.#retire(old);
+	}
+	drain() {
+		for (const source of this.#sources) {
+			for (const change of source.queue) {
+				if (change.type === "delete") source.items.delete(change.key);
+				else source.items.set(change.key, change.value);
+				this.#markDirty(change.key);
+			}
+			source.queue.length = 0;
+		}
+	}
+	owner(key) {
+		let owner;
+		for (const source of this.#sources) {
+			if (!source.items.has(key)) continue;
+			if (owner) {
+				this.#issues.push({
+					type: "duplicate-key",
+					kind: this.#kind,
+					key
+				});
+				break;
+			}
+			owner = {
+				source,
+				datum: source.items.get(key)
+			};
+		}
+		return owner;
+	}
+	destroy() {
+		for (const source of this.#sources) {
+			source.retired = true;
+			source.subscription?.unsubscribe();
+			source.subscription = null;
+		}
+		this.#sources = [];
+		this.dirty.clear();
+		this.remarked.length = 0;
+	}
+	#reconcile(slot, mark, old) {
+		if (old?.mark === mark) return old;
+		const optionsChanged = old !== void 0 && !shallowEqual(old.mark.options, mark.options);
+		const data = mark.data;
+		if (isLiveSource(data)) {
+			if (old?.live === data) {
+				old.mark = mark;
+				this.#refresh(old, optionsChanged);
+				return old;
+			}
+			if (old) this.#retire(old);
+			const source = this.#create(slot, mark, data);
+			source.subscription = data.subscribeChanges((changes) => {
+				if (source.retired || changes.length === 0) return;
+				for (const change of changes) source.queue.push(change);
+				this.#notify();
+			}, { includeInitialState: true });
+			return source;
+		}
+		const source = this.#create(slot, mark, null);
+		this.#collect(source, data);
+		if (!old || old.live) {
+			if (old) this.#retire(old);
+			for (const key of source.items.keys()) this.#markDirty(key);
+			return source;
+		}
+		old.retired = true;
+		for (const key of old.items.keys()) if (!source.items.has(key)) this.#markDirty(key);
+		for (const [key, datum] of source.items) if (optionsChanged || !old.items.has(key) || old.items.get(key) !== datum) this.#markDirty(key, optionsChanged);
+		if (!optionsChanged) this.remarked.push(source);
+		return source;
+	}
+	#refresh(source, optionsChanged) {
+		if (!optionsChanged) {
+			this.remarked.push(source);
+			return;
+		}
+		for (const key of source.items.keys()) this.#markDirty(key, true);
+	}
+	#collect(source, data) {
+		const keyOf = toAccessor(source.mark.options.key ?? "id");
+		for (const datum of data) {
+			const key = keyOf(datum);
+			if (!isKey(key)) {
+				this.#issues.push({
+					type: "missing-key",
+					kind: this.#kind,
+					datum
+				});
+				continue;
+			}
+			if (source.items.has(key)) {
+				this.#issues.push({
+					type: "duplicate-key",
+					kind: this.#kind,
+					key
+				});
+				continue;
+			}
+			source.items.set(key, datum);
+		}
+	}
+	#create(slot, mark, live) {
+		return {
+			slot,
+			mark,
+			live,
+			items: /* @__PURE__ */ new Map(),
+			queue: [],
+			subscription: null,
+			retired: false
+		};
+	}
+	#retire(source) {
+		source.retired = true;
+		source.subscription?.unsubscribe();
+		source.subscription = null;
+		for (const key of source.items.keys()) this.#markDirty(key);
+	}
+	#markDirty(key, forced = false) {
+		this.dirty.set(key, forced || this.dirty.get(key) === true);
+	}
+};
+// src/core/graph-model.ts
+function isNodeMark(mark) {
+	return mark.type === "nodes";
+}
+function isEdgeMark(mark) {
+	return mark.type === "edges";
+}
+function isVisible(entry) {
+	return entry.index >= 0;
+}
+function endpoint(channel, datum) {
+	const value = toAccessor(channel)(datum);
+	return isKey(value) ? value : null;
+}
+function emptyChanges() {
+	return {
+		added: [],
+		updated: [],
+		removed: []
+	};
+}
+function remark(sources, entries) {
+	for (const source of sources) {
+		if (source.retired) continue;
+		for (const key of source.items.keys()) {
+			const entry = entries.get(key);
+			if (entry?.slot === source.slot) entry.mark = source.mark;
+		}
+	}
+	sources.length = 0;
+}
+function createGraphModel(options = {}) {
+	const schedule = options.schedule ?? (() => {});
+	const issues = [];
+	const nodeSources = new SourceTable("nodes", issues, schedule);
+	const edgeSources = new SourceTable("edges", issues, schedule);
+	const nodeEntries = /* @__PURE__ */ new Map();
+	const edgeEntries = /* @__PURE__ */ new Map();
+	const incident = /* @__PURE__ */ new Map();
+	const nodePool = new IndexPool();
+	const edgePool = new IndexPool();
+	function link(entry) {
+		for (const key of [entry.source, entry.target]) {
+			if (key === null) continue;
+			let edges = incident.get(key);
+			if (!edges) {
+				edges = /* @__PURE__ */ new Set();
+				incident.set(key, edges);
+			}
+			edges.add(entry.key);
+		}
+	}
+	function unlink(entry) {
+		for (const key of [entry.source, entry.target]) {
+			if (key === null) continue;
+			const edges = incident.get(key);
+			edges?.delete(entry.key);
+			if (edges?.size === 0) incident.delete(key);
+		}
+	}
+	function visibleIncident(key) {
+		const result = [];
+		for (const edgeKey of incident.get(key) ?? []) {
+			const entry = edgeEntries.get(edgeKey);
+			if (entry && isVisible(entry)) result.push(entry);
+		}
+		return result;
+	}
+	function flushNodes(changes, touched, freed) {
+		remark(nodeSources.remarked, nodeEntries);
+		const touch = (key) => {
+			for (const edgeKey of incident.get(key) ?? []) touched.add(edgeKey);
+		};
+		for (const [key, forced] of nodeSources.dirty) {
+			const owner = nodeSources.owner(key);
+			const entry = nodeEntries.get(key);
+			if (!owner) {
+				if (entry) {
+					nodeEntries.delete(key);
+					changes.removed.push({
+						key,
+						index: entry.index
+					});
+					freed.push(entry.index);
+					touch(key);
+				}
+				continue;
+			}
+			const { mark, slot } = owner.source;
+			if (!entry) {
+				const index = nodePool.acquire();
+				nodeEntries.set(key, {
+					key,
+					index,
+					datum: owner.datum,
+					mark,
+					slot
+				});
+				changes.added.push({
+					key,
+					index
+				});
+				touch(key);
+				continue;
+			}
+			if (forced || entry.datum !== owner.datum || entry.slot !== slot) changes.updated.push({
+				key,
+				index: entry.index
+			});
+			entry.datum = owner.datum;
+			entry.mark = mark;
+			entry.slot = slot;
+		}
+		nodeSources.dirty.clear();
+	}
+	function flushEdges(changes, touched, freed) {
+		remark(edgeSources.remarked, edgeEntries);
+		const dirty = edgeSources.dirty;
+		for (const key of /* @__PURE__ */ new Set([...dirty.keys(), ...touched])) {
+			let entry = edgeEntries.get(key);
+			const wasVisible = entry !== void 0 && isVisible(entry);
+			const wasPending = entry !== void 0 && !wasVisible;
+			let changed = false;
+			if (dirty.has(key)) {
+				const owner = edgeSources.owner(key);
+				if (!owner) {
+					if (entry) {
+						unlink(entry);
+						edgeEntries.delete(key);
+						if (wasVisible) {
+							changes.removed.push({
+								key,
+								index: entry.index
+							});
+							freed.push(entry.index);
+						}
+					}
+					continue;
+				}
+				const { mark, slot } = owner.source;
+				const source = endpoint(mark.options.source, owner.datum);
+				const target = endpoint(mark.options.target, owner.datum);
+				if (!entry) {
+					entry = {
+						key,
+						index: -1,
+						datum: owner.datum,
+						mark,
+						slot,
+						source,
+						target
+					};
+					edgeEntries.set(key, entry);
+					link(entry);
+				} else {
+					const moved = entry.source !== source || entry.target !== target;
+					changed = moved || dirty.get(key) === true || entry.datum !== owner.datum;
+					changed ||= entry.slot !== slot;
+					if (moved) {
+						unlink(entry);
+						entry.source = source;
+						entry.target = target;
+						link(entry);
+					}
+					entry.datum = owner.datum;
+					entry.mark = mark;
+					entry.slot = slot;
+				}
+			}
+			if (!entry) continue;
+			const visible = entry.source !== null && entry.target !== null && nodeEntries.has(entry.source) && nodeEntries.has(entry.target);
+			if (visible && !wasVisible) {
+				entry.index = edgePool.acquire();
+				changes.added.push({
+					key,
+					index: entry.index
+				});
+			} else if (!visible && wasVisible) {
+				changes.removed.push({
+					key,
+					index: entry.index
+				});
+				freed.push(entry.index);
+				entry.index = -1;
+				changes.pending.push(key);
+			} else if (visible && changed) changes.updated.push({
+				key,
+				index: entry.index
+			});
+			else if (!visible && !wasPending) changes.pending.push(key);
+		}
+		dirty.clear();
+	}
+	return {
+		setMarks(marks) {
+			nodeSources.setMarks(marks.filter(isNodeMark));
+			edgeSources.setMarks(marks.filter(isEdgeMark));
+			if (nodeSources.dirty.size > 0 || edgeSources.dirty.size > 0 || nodeSources.remarked.length > 0 || edgeSources.remarked.length > 0 || issues.length > 0) schedule();
+		},
+		flush() {
+			nodeSources.drain();
+			edgeSources.drain();
+			const nodes = emptyChanges();
+			const edges = {
+				...emptyChanges(),
+				pending: []
+			};
+			const touched = /* @__PURE__ */ new Set();
+			const freedNodes = [];
+			const freedEdges = [];
+			flushNodes(nodes, touched, freedNodes);
+			flushEdges(edges, touched, freedEdges);
+			for (const index of freedNodes) nodePool.release(index);
+			for (const index of freedEdges) edgePool.release(index);
+			return {
+				nodes,
+				edges,
+				issues: issues.splice(0)
+			};
+		},
+		node(key) {
+			return nodeEntries.get(key);
+		},
+		edge(key) {
+			const entry = edgeEntries.get(key);
+			return entry && isVisible(entry) ? entry : void 0;
+		},
+		nodes() {
+			return nodeEntries.values();
+		},
+		*edges() {
+			for (const entry of edgeEntries.values()) if (isVisible(entry)) yield entry;
+		},
+		neighbors(key) {
+			const result = /* @__PURE__ */ new Set();
+			for (const entry of visibleIncident(key)) result.add(entry.source === key ? entry.target : entry.source);
+			return [...result];
+		},
+		edgesOf(key) {
+			return visibleIncident(key).map((entry) => entry.key);
+		},
+		endpoints(key) {
+			const entry = edgeEntries.get(key);
+			return entry && isVisible(entry) ? {
+				source: entry.source,
+				target: entry.target
+			} : void 0;
+		},
+		pendingEdges() {
+			const result = [];
+			for (const entry of edgeEntries.values()) if (!isVisible(entry)) result.push(entry.key);
+			return result;
+		},
+		destroy() {
+			nodeSources.destroy();
+			edgeSources.destroy();
+			nodeEntries.clear();
+			edgeEntries.clear();
+			incident.clear();
+			issues.length = 0;
+		}
+	};
+}
+// src/core/edge-curve.ts
+const loopTurn = .6;
+const loopGrowth = .5;
+const maxBend = .12;
+const spreadBend = .4;
+function laneBend(position, count) {
+	if (count < 2) return 0;
+	const step = Math.min(maxBend, spreadBend / (count - 1));
+	return (position - (count - 1) / 2) * step;
+}
+function loopReach(radius, ordinal, minimum) {
+	return radius + Math.max(radius * 1.5, minimum) * (1 + loopGrowth * ordinal);
+}
+function parallelCurve(ax, ay, dx, dy, bend) {
+	const length = Math.hypot(dx - ax, dy - ay);
+	const nx = length > 0 ? -(dy - ay) / length : 0;
+	const ny = length > 0 ? (dx - ax) / length : 1;
+	const offset = 2 * bend * length;
+	const px = (ax + dx) / 2 + nx * offset;
+	const py = (ay + dy) / 2 + ny * offset;
+	return {
+		ax,
+		ay,
+		bx: ax + (px - ax) * 2 / 3,
+		by: ay + (py - ay) * 2 / 3,
+		cx: dx + (px - dx) * 2 / 3,
+		cy: dy + (py - dy) * 2 / 3,
+		dx,
+		dy
+	};
+}
+function loopCurve(x, y, reach) {
+	const arm = reach / (.75 * Math.cos(loopTurn));
+	const ux = Math.SQRT1_2;
+	const uy = -Math.SQRT1_2;
+	const cos = Math.cos(loopTurn);
+	const sin = Math.sin(loopTurn);
+	return {
+		ax: x,
+		ay: y,
+		bx: x + arm * (ux * cos - uy * sin),
+		by: y + arm * (ux * sin + uy * cos),
+		cx: x + arm * (ux * cos + uy * sin),
+		cy: y + arm * (-ux * sin + uy * cos),
+		dx: x,
+		dy: y
+	};
+}
+function pointOnCubic(curve, t) {
+	const u = 1 - t;
+	const a = u * u * u;
+	const b = 3 * u * u * t;
+	const c = 3 * u * t * t;
+	const d = t * t * t;
+	return {
+		x: a * curve.ax + b * curve.bx + c * curve.cx + d * curve.dx,
+		y: a * curve.ay + b * curve.by + c * curve.cy + d * curve.dy
+	};
+}
+function sampleCubic(curve, segments) {
+	const points = new Float64Array((segments + 1) * 2);
+	for (let step = 0; step <= segments; step++) {
+		const point = pointOnCubic(curve, step / segments);
+		points[step * 2] = point.x;
+		points[step * 2 + 1] = point.y;
+	}
+	return points;
+}
+function distanceToCubic(curve, x, y, segments) {
+	const points = sampleCubic(curve, segments);
+	let best = Number.POSITIVE_INFINITY;
+	for (let step = 0; step < segments; step++) {
+		const ax = points[step * 2] ?? 0;
+		const ay = points[step * 2 + 1] ?? 0;
+		const vx = (points[step * 2 + 2] ?? 0) - ax;
+		const vy = (points[step * 2 + 3] ?? 0) - ay;
+		const squared = vx * vx + vy * vy;
+		const t = squared > 0 ? Math.min(1, Math.max(0, ((x - ax) * vx + (y - ay) * vy) / squared)) : 0;
+		best = Math.min(best, Math.hypot(x - (ax + vx * t), y - (ay + vy * t)));
+	}
+	return best;
+}
+// src/core/pick-index.ts
+const minimumPickRadius = 2;
+const pickSegments = 16;
+const indexSegments = 8;
+function createGrid(frame, count, visit) {
+	const cells = frame.cols * frame.rows;
+	const offsets = new Uint32Array(cells + 1);
+	for (let index = 0; index < count; index++) visit(index, (cell) => {
+		offsets[cell + 1] = (offsets[cell + 1] ?? 0) + 1;
+	});
+	for (let cell = 0; cell < cells; cell++) offsets[cell + 1] = (offsets[cell + 1] ?? 0) + (offsets[cell] ?? 0);
+	const cursor = offsets.slice(0, cells);
+	const items = new Uint32Array(offsets[cells] ?? 0);
+	for (let index = 0; index < count; index++) visit(index, (cell) => {
+		const at = cursor[cell] ?? 0;
+		items[at] = index;
+		cursor[cell] = at + 1;
+	});
+	return {
+		...frame,
+		offsets,
+		items
+	};
+}
+function traverse(grid, ax, ay, bx, by, emit) {
+	const x0 = (ax - grid.minX) / grid.cell;
+	const y0 = (ay - grid.minY) / grid.cell;
+	const x1 = (bx - grid.minX) / grid.cell;
+	const y1 = (by - grid.minY) / grid.cell;
+	let col = Math.floor(x0);
+	let row = Math.floor(y0);
+	const lastCol = Math.floor(x1);
+	const lastRow = Math.floor(y1);
+	const stepX = Math.sign(x1 - x0);
+	const stepY = Math.sign(y1 - y0);
+	const deltaX = stepX === 0 ? Number.POSITIVE_INFINITY : Math.abs(1 / (x1 - x0));
+	const deltaY = stepY === 0 ? Number.POSITIVE_INFINITY : Math.abs(1 / (y1 - y0));
+	let maxX = stepX > 0 ? (col + 1 - x0) * deltaX : stepX < 0 ? (x0 - col) * deltaX : deltaX;
+	let maxY = stepY > 0 ? (row + 1 - y0) * deltaY : stepY < 0 ? (y0 - row) * deltaY : deltaY;
+	const limit = Math.abs(lastCol - col) + Math.abs(lastRow - row);
+	for (let step = 0; step <= limit; step++) {
+		if (col >= 0 && row >= 0 && col < grid.cols && row < grid.rows) emit(row * grid.cols + col);
+		if (col === lastCol && row === lastRow) return;
+		if (maxX < maxY) {
+			maxX += deltaX;
+			col += stepX;
+		} else {
+			maxY += deltaY;
+			row += stepY;
+		}
+	}
+}
+var PickIndex = class {
+	#nodes = null;
+	#edges = null;
+	#maxWorldRadius = 0;
+	#maxScreenRadius = 0;
+	#maxEdgeHalfWidth = 0;
+	#loops = [];
+	build(source) {
+		const { nodes, edges, positions } = source;
+		let count = 0;
+		let minX = Number.POSITIVE_INFINITY;
+		let minY = Number.POSITIVE_INFINITY;
+		let maxX = Number.NEGATIVE_INFINITY;
+		let maxY = Number.NEGATIVE_INFINITY;
+		this.#maxWorldRadius = 0;
+		this.#maxScreenRadius = 0;
+		for (let index = 0; index < nodes.capacity; index++) {
+			if (nodes.alive[index] !== 1) continue;
+			const x = positions.x(index);
+			const y = positions.y(index);
+			const radius = (nodes.size[index] ?? 0) / 2;
+			if (nodes.screenUnits[index] === 1) this.#maxScreenRadius = Math.max(this.#maxScreenRadius, radius);
+			else this.#maxWorldRadius = Math.max(this.#maxWorldRadius, radius);
+			minX = Math.min(minX, x);
+			minY = Math.min(minY, y);
+			maxX = Math.max(maxX, x);
+			maxY = Math.max(maxY, y);
+			count++;
+		}
+		if (count === 0) {
+			this.#nodes = null;
+			this.#edges = null;
+			this.#loops = [];
+			return;
+		}
+		this.#loops = [];
+		for (let index = 0; index < edges.capacity; index++) {
+			if (edges.alive[index] !== 1) continue;
+			if (edges.source[index] === edges.target[index]) {
+				this.#loops.push(index);
+				continue;
+			}
+			if ((edges.bend[index] ?? 0) === 0) continue;
+			const points = sampleCubic(this.#parallel(source, index), indexSegments);
+			for (let at = 0; at < points.length; at += 2) {
+				minX = Math.min(minX, points[at] ?? minX);
+				maxX = Math.max(maxX, points[at] ?? maxX);
+				minY = Math.min(minY, points[at + 1] ?? minY);
+				maxY = Math.max(maxY, points[at + 1] ?? maxY);
+			}
+		}
+		const spanX = Math.max(maxX - minX, 1);
+		const spanY = Math.max(maxY - minY, 1);
+		let cell = Math.max(this.#maxWorldRadius * 2, Math.sqrt(spanX * spanY / count) * 2, .001);
+		const budget = count * 4 + 1024;
+		const cells = (spanX / cell + 1) * (spanY / cell + 1);
+		if (cells > budget) cell *= Math.sqrt(cells / budget);
+		const frame = {
+			cell,
+			minX,
+			minY,
+			cols: Math.floor(spanX / cell) + 1,
+			rows: Math.floor(spanY / cell) + 1
+		};
+		this.#nodes = createGrid(frame, nodes.capacity, (index, emit) => {
+			if (nodes.alive[index] !== 1) return;
+			const col = Math.floor((positions.x(index) - minX) / cell);
+			emit(Math.floor((positions.y(index) - minY) / cell) * frame.cols + col);
+		});
+		this.#maxEdgeHalfWidth = 0;
+		this.#edges = createGrid(frame, edges.capacity, (index, emit) => {
+			if (edges.alive[index] !== 1) return;
+			this.#maxEdgeHalfWidth = Math.max(this.#maxEdgeHalfWidth, (edges.width[index] ?? 0) / 2);
+			const from = edges.source[index] ?? 0;
+			const to = edges.target[index] ?? 0;
+			if (from === to) return;
+			if ((edges.bend[index] ?? 0) === 0) {
+				traverse(frame, positions.x(from), positions.y(from), positions.x(to), positions.y(to), emit);
+				return;
+			}
+			const points = sampleCubic(this.#parallel(source, index), indexSegments);
+			for (let at = 0; at + 3 < points.length; at += 2) traverse(frame, points[at] ?? 0, points[at + 1] ?? 0, points[at + 2] ?? 0, points[at + 3] ?? 0, emit);
+		});
+	}
+	pick(source, x, y, zoom, tolerance) {
+		const node = this.#pickNode(source, x, y, zoom);
+		if (node >= 0) return {
+			kind: "node",
+			index: node
+		};
+		const edge = this.#pickEdge(source, x, y, zoom, tolerance);
+		return edge >= 0 ? {
+			kind: "edge",
+			index: edge
+		} : null;
+	}
+	#cells(grid, x, y, reach, visit) {
+		const c0 = Math.max(0, Math.floor((x - reach - grid.minX) / grid.cell));
+		const c1 = Math.min(grid.cols - 1, Math.floor((x + reach - grid.minX) / grid.cell));
+		const r0 = Math.max(0, Math.floor((y - reach - grid.minY) / grid.cell));
+		const r1 = Math.min(grid.rows - 1, Math.floor((y + reach - grid.minY) / grid.cell));
+		for (let row = r0; row <= r1; row++) for (let col = c0; col <= c1; col++) {
+			const cell = row * grid.cols + col;
+			const end = grid.offsets[cell + 1] ?? 0;
+			for (let at = grid.offsets[cell] ?? 0; at < end; at++) visit(grid.items[at] ?? 0);
+		}
+	}
+	#parallel(source, index) {
+		const { edges, positions } = source;
+		const from = edges.source[index] ?? 0;
+		const to = edges.target[index] ?? 0;
+		return parallelCurve(positions.x(from), positions.y(from), positions.x(to), positions.y(to), edges.bend[index] ?? 0);
+	}
+	#loop(source, index, zoom) {
+		const node = source.edges.source[index] ?? 0;
+		const size = (source.nodes.size[node] ?? 0) / 2;
+		const reach = loopReach(Math.max(source.nodes.screenUnits[node] === 1 ? size : size * zoom, 1.25), source.edges.bend[index] ?? 0, 12) / zoom;
+		return loopCurve(source.positions.x(node), source.positions.y(node), reach);
+	}
+	#radius(source, index, zoom) {
+		const size = (source.nodes.size[index] ?? 0) / 2;
+		const radius = source.nodes.screenUnits[index] === 1 ? size / zoom : size;
+		return Math.max(radius, minimumPickRadius / zoom);
+	}
+	#pickNode(source, x, y, zoom) {
+		const grid = this.#nodes;
+		if (!grid) return -1;
+		const reach = Math.max(this.#maxWorldRadius, (this.#maxScreenRadius + minimumPickRadius) / zoom);
+		let best = -1;
+		let bestOrder = Number.NEGATIVE_INFINITY;
+		this.#cells(grid, x, y, reach, (index) => {
+			if (source.nodes.alive[index] !== 1) return;
+			if (Math.hypot(x - source.positions.x(index), y - source.positions.y(index)) > this.#radius(source, index, zoom)) return;
+			const order = source.order("nodes", index);
+			if (order > bestOrder) {
+				best = index;
+				bestOrder = order;
+			}
+		});
+		return best;
+	}
+	#pickEdge(source, x, y, zoom, tolerance) {
+		const grid = this.#edges;
+		if (!grid) return -1;
+		const { edges, positions } = source;
+		const reach = (this.#maxEdgeHalfWidth + tolerance) / zoom;
+		let best = -1;
+		let bestDistance = Number.POSITIVE_INFINITY;
+		let bestOrder = Number.NEGATIVE_INFINITY;
+		const consider = (index, distance) => {
+			if (distance > ((edges.width[index] ?? 0) / 2 + tolerance) / zoom) return;
+			const order = source.order("edges", index);
+			if (distance < bestDistance || distance === bestDistance && order > bestOrder) {
+				best = index;
+				bestDistance = distance;
+				bestOrder = order;
+			}
+		};
+		const seen = /* @__PURE__ */ new Set();
+		this.#cells(grid, x, y, reach, (index) => {
+			if (edges.alive[index] !== 1) return;
+			const s = edges.source[index] ?? 0;
+			const t = edges.target[index] ?? 0;
+			if ((edges.bend[index] ?? 0) !== 0) {
+				if (seen.has(index)) return;
+				seen.add(index);
+				consider(index, distanceToCubic(this.#parallel(source, index), x, y, pickSegments));
+				return;
+			}
+			const ax = positions.x(s);
+			const ay = positions.y(s);
+			const dx = positions.x(t) - ax;
+			const dy = positions.y(t) - ay;
+			const length = Math.hypot(dx, dy);
+			if (length === 0) return;
+			const along = ((x - ax) * dx + (y - ay) * dy) / length;
+			if (along < this.#radius(source, s, zoom) || along > length - this.#radius(source, t, zoom)) return;
+			consider(index, Math.abs((x - ax) * dy - (y - ay) * dx) / length);
+		});
+		for (const index of this.#loops) {
+			if (edges.alive[index] !== 1) continue;
+			consider(index, distanceToCubic(this.#loop(source, index, zoom), x, y, pickSegments));
+		}
+		return best;
+	}
+};
+// src/core/compile-mark.ts
+function channel(value) {
+	return value === void 0 ? null : toAccessor(value);
+}
+function style(value) {
+	if (value === void 0) return null;
+	return typeof value === "function" ? value : () => value;
+}
+const badgeCorners = [
+	"topLeft",
+	"topRight",
+	"bottomLeft",
+	"bottomRight"
+];
+const nodeCache = /* @__PURE__ */ new WeakMap();
+const edgeCache = /* @__PURE__ */ new WeakMap();
+function compileNodeMark(mark) {
+	const cached = nodeCache.get(mark);
+	if (cached) return cached;
+	const options = mark.options;
+	const label = options.label;
+	const badges = [];
+	for (const corner of badgeCorners) {
+		const read = options.badges?.[corner];
+		if (read) badges.push([corner, read]);
+	}
+	const compiled = {
+		color: channel(options.color),
+		size: channel(options.size),
+		x: channel(options.x),
+		y: channel(options.y),
+		label: channel(typeof label === "object" ? label.text : label),
+		secondary: channel(typeof label === "object" ? label.secondary : void 0),
+		shape: style(options.shape),
+		fill: style(options.fill),
+		stroke: style(options.stroke),
+		strokeWidth: style(options.strokeWidth),
+		opacity: style(options.opacity),
+		image: style(options.image),
+		badges,
+		screenUnits: options.units === "screen"
+	};
+	nodeCache.set(mark, compiled);
+	return compiled;
+}
+function compileEdgeMark(mark) {
+	const cached = edgeCache.get(mark);
+	if (cached) return cached;
+	const options = mark.options;
+	const compiled = {
+		color: channel(options.color),
+		width: channel(options.width),
+		label: channel(options.label),
+		dash: style(options.dash),
+		arrow: style(options.arrow),
+		stroke: style(options.stroke),
+		opacity: style(options.opacity)
+	};
+	edgeCache.set(mark, compiled);
+	return compiled;
+}
+// src/core/positions.ts
+const goldenAngle = Math.PI * (3 - Math.sqrt(5));
+var Positions = class {
+	capacity = 0;
+	version = 0;
+	xy = /* @__PURE__ */ new Float32Array(0);
+	placed = /* @__PURE__ */ new Uint8Array(0);
+	source = /* @__PURE__ */ new Float64Array(0);
+	#spiral = 0;
+	#rings = /* @__PURE__ */ new Map();
+	reserve(index) {
+		if (index < this.capacity) return;
+		const capacity = Math.max(64, this.capacity * 2, index + 1);
+		const xy = new Float32Array(capacity * 2);
+		xy.set(this.xy);
+		const placed = new Uint8Array(capacity);
+		placed.set(this.placed);
+		const source = new Float64Array(capacity * 2).fill(NaN);
+		source.set(this.source);
+		this.xy = xy;
+		this.placed = placed;
+		this.source = source;
+		this.capacity = capacity;
+	}
+	x(index) {
+		return this.xy[index * 2] ?? 0;
+	}
+	y(index) {
+		return this.xy[index * 2 + 1] ?? 0;
+	}
+	set(index, x, y) {
+		this.reserve(index);
+		this.xy[index * 2] = x;
+		this.xy[index * 2 + 1] = y;
+		this.placed[index] = 1;
+		this.version++;
+	}
+	release(index) {
+		if (index < this.capacity) this.placed[index] = 0;
+		this.follow(index, null);
+		this.#rings.delete(index);
+	}
+	follow(index, point) {
+		this.reserve(index);
+		const x = point ? point[0] : NaN;
+		const y = point ? point[1] : NaN;
+		const changed = point !== null && (this.source[index * 2] !== x || this.source[index * 2 + 1] !== y);
+		this.source[index * 2] = x;
+		this.source[index * 2 + 1] = y;
+		return changed;
+	}
+	nextSpiral() {
+		const n = this.#spiral++;
+		const radius = 24 * Math.sqrt(n);
+		return [radius * Math.cos(n * goldenAngle), radius * Math.sin(n * goldenAngle)];
+	}
+	nextRing(anchor) {
+		const count = this.#rings.get(anchor) ?? 0;
+		this.#rings.set(anchor, count + 1);
+		return count;
+	}
+};
+function finite(value) {
+	return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+function channelPoint(mark, datum) {
+	const compiled = compileNodeMark(mark);
+	const x = finite(compiled.x?.(datum));
+	const y = finite(compiled.y?.(datum));
+	return x !== null && y !== null ? [x, y] : null;
+}
+function placeNodes(model, positions, changes) {
+	for (const { index } of changes.nodes.removed) positions.release(index);
+	const indices = [];
+	const to = [];
+	for (const { key, index } of changes.nodes.updated) {
+		const record = model.node(key);
+		if (!record) continue;
+		const point = channelPoint(record.mark, record.datum);
+		if (!point || !positions.follow(index, point)) continue;
+		if (positions.x(index) === Math.fround(point[0]) && positions.y(index) === Math.fround(point[1])) continue;
+		indices.push(index);
+		to.push(point[0], point[1]);
+	}
+	const batch = new Set(changes.nodes.added.map((ref) => ref.key));
+	for (const { key, index } of changes.nodes.added) {
+		const record = model.node(key);
+		if (!record) continue;
+		const point = channelPoint(record.mark, record.datum);
+		positions.follow(index, point);
+		if (point) {
+			positions.set(index, point[0], point[1]);
+			continue;
+		}
+		let sumX = 0;
+		let sumY = 0;
+		let count = 0;
+		let anchor = -1;
+		for (const neighbor of model.neighbors(key)) {
+			if (batch.has(neighbor)) continue;
+			const other = model.node(neighbor);
+			if (!other || positions.placed[other.index] !== 1) continue;
+			sumX += positions.x(other.index);
+			sumY += positions.y(other.index);
+			count++;
+			if (anchor < 0) anchor = other.index;
+		}
+		if (count === 0) {
+			const [sx, sy] = positions.nextSpiral();
+			positions.set(index, sx, sy);
+			continue;
+		}
+		const ring = positions.nextRing(anchor);
+		const angle = ring * goldenAngle;
+		const radius = 36 * Math.sqrt(ring + 1);
+		positions.set(index, sumX / count + radius * Math.cos(angle), sumY / count + radius * Math.sin(angle));
+	}
+	return {
+		indices,
+		to
+	};
+}
+// src/theme/tokens.ts
+const lightTheme = {
+	paper: "#f7f7f4",
+	"paper-raised": "#ffffff",
+	grid: "#c4e0dd",
+	ink: "#191d22",
+	"ink-muted": "#5b6167",
+	node: "#474e55",
+	edge: "#7f858c",
+	"group-fill": "#e7efee",
+	"group-line": "#6e8d8b",
+	accent: "#c93700",
+	"on-accent": "#ffffff",
+	"focus-ring": "#c93700",
+	halo: "#c9370047",
+	"label-halo": "#f7f7f4",
+	"node-ring": "#f7f7f4",
+	"badge-fill": "#191d22",
+	"badge-ink": "#f7f7f4",
+	"cat-1": "#2769b7",
+	"cat-2": "#a47c13",
+	"cat-3": "#12867c",
+	"cat-4": "#9b357f",
+	"cat-5": "#4189ad",
+	"cat-6": "#448335",
+	"cat-7": "#5d4099",
+	"cat-8": "#745338"
+};
+const defaultFont = "system-ui, sans-serif";
+function themeColor(name) {
+	return `var(--graph-${name})`;
+}
+const categoricalRange = Array.from({ length: 8 }, (_, index) => themeColor(`cat-${index + 1}`));
+const sequentialRange = [themeColor("cat-5"), themeColor("cat-1")];
+const defaults = {
+	nodeSize: 16,
+	nodeSizeRange: [8, 32],
+	nodeFill: themeColor("node"),
+	nodeStroke: themeColor("node-ring"),
+	nodeStrokeWidth: 1,
+	edgeWidth: 1.5,
+	edgeWidthRange: [1, 6],
+	edgeColor: themeColor("edge")
+};
+const builtInStyles = {
+	nodes: {
+		selected: {
+			stroke: themeColor("accent"),
+			strokeWidth: 2,
+			halo: true,
+			label: true
+		},
+		hovered: {
+			stroke: themeColor("ink"),
+			strokeWidth: 2,
+			label: true
+		},
+		focused: {
+			stroke: themeColor("focus-ring"),
+			strokeWidth: 2,
+			label: true
+		}
+	},
+	edges: {
+		selected: {
+			stroke: themeColor("accent"),
+			halo: true
+		},
+		hovered: { stroke: themeColor("ink") },
+		focused: { stroke: themeColor("focus-ring") }
+	}
+};
+// src/scales/color-scale.ts
+function interpolate(stops, t) {
+	const last = stops.length - 1;
+	if (last < 1) return stops[0] ?? null;
+	const position = t * last;
+	const segment = Math.min(Math.floor(position), last - 1);
+	const percent = Math.round((position - segment) * 100);
+	const from = stops[segment] ?? null;
+	const to = stops[segment + 1] ?? null;
+	if (percent === 0 || to === null) return from;
+	if (percent === 100) return to;
+	return `color-mix(in oklab, ${from}, ${to} ${percent}%)`;
+}
+function categorical(domain, range) {
+	const positions = /* @__PURE__ */ new Map();
+	for (const value of domain) if (!positions.has(value)) positions.set(value, positions.size);
+	return {
+		sequential: false,
+		needsExtent: false,
+		map(value) {
+			if (value === null || value === void 0 || range.length === 0) return null;
+			let position = positions.get(value);
+			if (position === void 0) {
+				position = positions.size;
+				positions.set(value, position);
+			}
+			return range[position % range.length] ?? null;
+		}
+	};
+}
+function sequential(domain, range) {
+	return {
+		sequential: true,
+		needsExtent: domain === null,
+		map(value, extent) {
+			if (typeof value !== "number" || !Number.isFinite(value)) return null;
+			const [d0, d1] = domain ?? extent ?? [value, value];
+			return interpolate(range, d0 === d1 ? .5 : Math.min(1, Math.max(0, (value - d0) / (d1 - d0))));
+		}
+	};
+}
+function resolveColorScale(options) {
+	if (typeof options === "function") return {
+		sequential: false,
+		needsExtent: false,
+		map: (value) => value === null || value === void 0 ? null : options(value)
+	};
+	if (options?.type === "sequential") return sequential(options.domain ?? null, options.range ?? sequentialRange);
+	return categorical(options?.domain ?? [], options?.range ?? categoricalRange);
+}
+// src/scales/extent.ts
+function sameExtent(a, b) {
+	return a === b || a !== null && b !== null && a[0] === b[0] && a[1] === b[1];
+}
+function combineExtents(a, b) {
+	if (a === null) return b;
+	if (b === null) return a;
+	return [Math.min(a[0], b[0]), Math.max(a[1], b[1])];
+}
+var ExtentTracker = class {
+	#values = /* @__PURE__ */ new Map();
+	#extent = null;
+	#stale = false;
+	get extent() {
+		if (this.#stale) {
+			this.#stale = false;
+			this.#extent = null;
+			for (const value of this.#values.values()) this.#include(value);
+		}
+		return this.#extent;
+	}
+	ids() {
+		return this.#values.keys();
+	}
+	set(id, value) {
+		const previous = this.#values.get(id);
+		this.#values.set(id, value);
+		if (previous !== void 0 && this.#isBound(previous)) this.#stale = true;
+		if (!this.#stale) this.#include(value);
+	}
+	delete(id) {
+		const previous = this.#values.get(id);
+		if (previous === void 0) return;
+		this.#values.delete(id);
+		if (this.#isBound(previous)) this.#stale = true;
+	}
+	clear() {
+		this.#values.clear();
+		this.#extent = null;
+		this.#stale = false;
+	}
+	#isBound(value) {
+		return this.#extent !== null && (value === this.#extent[0] || value === this.#extent[1]);
+	}
+	#include(value) {
+		this.#extent = this.#extent === null ? [value, value] : [Math.min(this.#extent[0], value), Math.max(this.#extent[1], value)];
+	}
+};
+// src/scales/number-scale.ts
+const transforms = {
+	linear: (value) => value,
+	sqrt: (value) => Math.sign(value) * Math.sqrt(Math.abs(value))
+};
+function resolveNumberScale(options, fallback) {
+	if (typeof options === "function") return {
+		needsExtent: false,
+		map: (value) => options(value)
+	};
+	const transform = transforms[options?.type ?? fallback.type];
+	const [r0, r1] = options?.range ?? fallback.range;
+	const domain = options?.domain ?? null;
+	return {
+		needsExtent: domain === null,
+		map(value, extent) {
+			const [d0, d1] = domain ?? extent ?? [value, value];
+			const t0 = transform(d0);
+			const t1 = transform(d1);
+			if (t0 === t1) return (r0 + r1) / 2;
+			const t = Math.min(1, Math.max(0, (transform(value) - t0) / (t1 - t0)));
+			return r0 + t * (r1 - r0);
+		}
+	};
+}
+// src/core/columns.ts
+const shapeCodes = {
+	circle: 0,
+	square: 1,
+	diamond: 2
+};
+const dashCodes = {
+	solid: 0,
+	dashed: 1,
+	dotted: 2
+};
+const arrowCodes = {
+	none: 0,
+	source: 1,
+	target: 2,
+	both: 3
+};
+function grow$1(array, length) {
+	const next = new array.constructor(length);
+	next.set(array);
+	return next;
+}
+function nextCapacity(capacity, index) {
+	return Math.max(64, capacity * 2, index + 1);
+}
+var NodeColumns = class {
+	capacity = 0;
+	keys = [];
+	alive = /* @__PURE__ */ new Uint8Array(0);
+	slot = /* @__PURE__ */ new Uint16Array(0);
+	size = /* @__PURE__ */ new Float32Array(0);
+	shape = /* @__PURE__ */ new Uint8Array(0);
+	fill = /* @__PURE__ */ new Uint32Array(0);
+	stroke = /* @__PURE__ */ new Uint32Array(0);
+	strokeWidth = /* @__PURE__ */ new Float32Array(0);
+	opacity = /* @__PURE__ */ new Float32Array(0);
+	screenUnits = /* @__PURE__ */ new Uint8Array(0);
+	label = [];
+	secondary = [];
+	image = [];
+	badges = [];
+	reserve(index) {
+		if (index < this.capacity) return;
+		const capacity = nextCapacity(this.capacity, index);
+		this.alive = grow$1(this.alive, capacity);
+		this.slot = grow$1(this.slot, capacity);
+		this.size = grow$1(this.size, capacity);
+		this.shape = grow$1(this.shape, capacity);
+		this.fill = grow$1(this.fill, capacity);
+		this.stroke = grow$1(this.stroke, capacity);
+		this.strokeWidth = grow$1(this.strokeWidth, capacity);
+		this.opacity = grow$1(this.opacity, capacity);
+		this.screenUnits = grow$1(this.screenUnits, capacity);
+		this.capacity = capacity;
+	}
+	clear(index) {
+		if (index >= this.capacity) return;
+		this.alive[index] = 0;
+		this.keys[index] = void 0;
+		this.label[index] = null;
+		this.secondary[index] = null;
+		this.image[index] = null;
+		this.badges[index] = null;
+	}
+};
+var EdgeColumns = class {
+	capacity = 0;
+	keys = [];
+	alive = /* @__PURE__ */ new Uint8Array(0);
+	slot = /* @__PURE__ */ new Uint16Array(0);
+	source = /* @__PURE__ */ new Uint32Array(0);
+	target = /* @__PURE__ */ new Uint32Array(0);
+	color = /* @__PURE__ */ new Uint32Array(0);
+	width = /* @__PURE__ */ new Float32Array(0);
+	dash = /* @__PURE__ */ new Uint8Array(0);
+	arrow = /* @__PURE__ */ new Uint8Array(0);
+	opacity = /* @__PURE__ */ new Float32Array(0);
+	bend = /* @__PURE__ */ new Float32Array(0);
+	label = [];
+	reserve(index) {
+		if (index < this.capacity) return;
+		const capacity = nextCapacity(this.capacity, index);
+		this.alive = grow$1(this.alive, capacity);
+		this.slot = grow$1(this.slot, capacity);
+		this.source = grow$1(this.source, capacity);
+		this.target = grow$1(this.target, capacity);
+		this.color = grow$1(this.color, capacity);
+		this.width = grow$1(this.width, capacity);
+		this.dash = grow$1(this.dash, capacity);
+		this.arrow = grow$1(this.arrow, capacity);
+		this.opacity = grow$1(this.opacity, capacity);
+		this.bend = grow$1(this.bend, capacity);
+		this.capacity = capacity;
+	}
+	clear(index) {
+		if (index >= this.capacity) return;
+		this.alive[index] = 0;
+		this.bend[index] = 0;
+		this.keys[index] = void 0;
+		this.label[index] = null;
+	}
+};
+// src/core/edge-lanes.ts
+const empty = -1;
+const removed = -2;
+function hash(low, high) {
+	let h = Math.imul(low, 2654435761) ^ Math.imul(high + 2135587861, 2246822519);
+	h ^= h >>> 15;
+	return Math.imul(h, 739982445) ^ h >>> 12;
+}
+function grown(array, length) {
+	const next = new Int32Array(length).fill(-1);
+	next.set(array);
+	return next;
+}
+function createEdgeLanes() {
+	let mask = -1;
+	let lows = /* @__PURE__ */ new Uint32Array(0);
+	let highs = /* @__PURE__ */ new Uint32Array(0);
+	let heads = /* @__PURE__ */ new Int32Array(0);
+	let tails = /* @__PURE__ */ new Int32Array(0);
+	let counts = /* @__PURE__ */ new Int32Array(0);
+	let stamps = /* @__PURE__ */ new Uint32Array(0);
+	let used = 0;
+	let live = 0;
+	let generation = 0;
+	let slots = /* @__PURE__ */ new Int32Array(0);
+	let nexts = /* @__PURE__ */ new Int32Array(0);
+	let prevs = /* @__PURE__ */ new Int32Array(0);
+	let touched = [];
+	function reserve(index) {
+		if (index < slots.length) return;
+		const length = Math.max(64, slots.length * 2, index + 1);
+		slots = grown(slots, length);
+		nexts = grown(nexts, length);
+		prevs = grown(prevs, length);
+	}
+	function locate(low, high) {
+		let slot = hash(low, high) & mask;
+		let free = -1;
+		for (;;) {
+			const head = heads[slot] ?? empty;
+			if (head === empty) return -(free >= 0 ? free : slot) - 1;
+			if (head === removed) {
+				if (free < 0) free = slot;
+			} else if (lows[slot] === low && highs[slot] === high) return slot;
+			slot = slot + 1 & mask;
+		}
+	}
+	function resize(minimum) {
+		let capacity = 16;
+		while (capacity < minimum) capacity *= 2;
+		const oldLows = lows;
+		const oldHighs = highs;
+		const oldHeads = heads;
+		const oldTails = tails;
+		const oldCounts = counts;
+		mask = capacity - 1;
+		lows = new Uint32Array(capacity);
+		highs = new Uint32Array(capacity);
+		heads = new Int32Array(capacity).fill(empty);
+		tails = new Int32Array(capacity).fill(-1);
+		counts = new Int32Array(capacity);
+		stamps = new Uint32Array(capacity);
+		generation = 0;
+		used = 0;
+		live = 0;
+		for (let old = 0; old < oldHeads.length; old++) {
+			const first = oldHeads[old] ?? empty;
+			if (first < 0) continue;
+			const low = oldLows[old] ?? 0;
+			const high = oldHighs[old] ?? 0;
+			const slot = -locate(low, high) - 1;
+			lows[slot] = low;
+			highs[slot] = high;
+			heads[slot] = first;
+			tails[slot] = oldTails[old] ?? -1;
+			counts[slot] = oldCounts[old] ?? 0;
+			used++;
+			live++;
+			for (let at = first; at >= 0; at = nexts[at] ?? -1) slots[at] = slot;
+		}
+	}
+	function unlink(index) {
+		const slot = slots[index] ?? -1;
+		if (slot < 0) return;
+		const prev = prevs[index] ?? -1;
+		const next = nexts[index] ?? -1;
+		if (prev >= 0) nexts[prev] = next;
+		else heads[slot] = next;
+		if (next >= 0) prevs[next] = prev;
+		else tails[slot] = prev;
+		slots[index] = -1;
+		const count = (counts[slot] ?? 1) - 1;
+		counts[slot] = count;
+		if (count === 0) {
+			heads[slot] = removed;
+			live--;
+		} else touched.push(heads[slot] ?? -1);
+	}
+	function link(index, source, target) {
+		reserve(index);
+		const low = source < target ? source : target;
+		const high = source < target ? target : source;
+		const current = slots[index] ?? -1;
+		if (current >= 0) {
+			if (lows[current] === low && highs[current] === high) return;
+			unlink(index);
+		}
+		if ((used + 1) * 2 > mask + 1) resize(Math.max(16, (live + 1) * 4));
+		const found = locate(low, high);
+		prevs[index] = -1;
+		nexts[index] = -1;
+		if (found >= 0) {
+			const tail = tails[found] ?? -1;
+			nexts[tail] = index;
+			prevs[index] = tail;
+			tails[found] = index;
+			counts[found] = (counts[found] ?? 0) + 1;
+			slots[index] = found;
+		} else {
+			const slot = -found - 1;
+			if (heads[slot] === empty) used++;
+			live++;
+			lows[slot] = low;
+			highs[slot] = high;
+			heads[slot] = index;
+			tails[slot] = index;
+			counts[slot] = 1;
+			slots[index] = slot;
+		}
+		touched.push(index);
+	}
+	function write(edges, dirty) {
+		if (touched.length === 0) return;
+		generation = generation + 1 >>> 0;
+		if (generation === 0) {
+			stamps.fill(0);
+			generation = 1;
+		}
+		const bends = edges.bend;
+		for (const edge of touched) {
+			const slot = edge >= 0 ? slots[edge] ?? -1 : -1;
+			if (slot < 0 || stamps[slot] === generation) continue;
+			stamps[slot] = generation;
+			const count = counts[slot] ?? 0;
+			const loop = lows[slot] === highs[slot];
+			if (count === 1 && !loop) {
+				const only = heads[slot] ?? 0;
+				if (bends[only] !== 0) {
+					bends[only] = 0;
+					dirty.add(only);
+				}
+				continue;
+			}
+			let position = 0;
+			for (let at = heads[slot] ?? -1; at >= 0; at = nexts[at] ?? -1) {
+				const source = edges.source[at] ?? 0;
+				const target = edges.target[at] ?? 0;
+				const bend = loop ? position : Math.fround(laneBend(position, count) * (source < target ? 1 : -1)) || 0;
+				if (bends[at] !== bend) {
+					bends[at] = bend;
+					dirty.add(at);
+				}
+				position++;
+			}
+		}
+		touched = [];
+	}
+	return {
+		link,
+		unlink,
+		write
+	};
+}
+// src/core/palette.ts
+var Palette = class {
+	#ids = /* @__PURE__ */ new Map();
+	#colors = [];
+	get colors() {
+		return this.#colors;
+	}
+	get version() {
+		return this.#colors.length;
+	}
+	id(color) {
+		let id = this.#ids.get(color);
+		if (id === void 0) {
+			id = this.#colors.length;
+			this.#ids.set(color, id);
+			this.#colors.push(color);
+		}
+		return id;
+	}
+};
+// src/core/scene.ts
+function sameList$1(a, b) {
+	if (a === b) return true;
+	if (!a || !b || a.length !== b.length) return false;
+	return a.every((value, index) => Object.is(value, b[index]));
+}
+function sameScale(a, b) {
+	if (a === b) return true;
+	if (!a || !b || typeof a === "function" || typeof b === "function") return false;
+	return a.type === b.type && sameList$1(a.domain, b.domain) && sameList$1(a.range, b.range);
+}
+function toNumber(value) {
+	return typeof value === "number" && Number.isFinite(value) ? value : NaN;
+}
+function toText(value) {
+	return typeof value === "string" ? value : null;
+}
+function toColor(value) {
+	return typeof value === "string" && value !== "" ? value : null;
+}
+function finiteOr(value, fallback) {
+	return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+function codeOf(codes, value) {
+	return typeof value === "string" && Object.hasOwn(codes, value) ? codes[value] : 0;
+}
+function readBadges(mark, datum) {
+	if (mark.badges.length === 0) return null;
+	const badges = {};
+	let count = 0;
+	for (const [corner, read] of mark.badges) {
+		const badge = read(datum);
+		if (typeof badge === "object" && badge !== null) {
+			badges[corner] = badge;
+			count++;
+		}
+	}
+	return count === 0 ? null : badges;
+}
+function layersOf(marks) {
+	const slots = {
+		nodes: 0,
+		edges: 0
+	};
+	return marks.map((mark) => ({
+		kind: mark.type,
+		slot: slots[mark.type]++
+	}));
+}
+function createScene() {
+	const nodes = new NodeColumns();
+	const edges = new EdgeColumns();
+	const palette = new Palette();
+	const lanes = createEdgeLanes();
+	const slots = /* @__PURE__ */ new Map();
+	let layers = [];
+	let layersDirty = false;
+	let paletteVersion = 0;
+	let dirtyNodes = /* @__PURE__ */ new Set();
+	let dirtyEdges = /* @__PURE__ */ new Set();
+	let scales = {};
+	let colorScale = resolveColorScale(void 0);
+	let sizeScale = resolveNumberScale(void 0, {
+		type: "sqrt",
+		range: defaults.nodeSizeRange
+	});
+	let widthScale = resolveNumberScale(void 0, {
+		type: "linear",
+		range: defaults.edgeWidthRange
+	});
+	let full = false;
+	const nodeColorValues = [];
+	const edgeColorValues = [];
+	const sizeValues = [];
+	const widthValues = [];
+	const nodeColorExtent = new ExtentTracker();
+	const edgeColorExtent = new ExtentTracker();
+	const sizeExtent = new ExtentTracker();
+	const widthExtent = new ExtentTracker();
+	let colorExtent = null;
+	let sizeDomain = null;
+	let widthDomain = null;
+	function track(tracker, index, value) {
+		if (typeof value === "number" && Number.isFinite(value)) tracker.set(index, value);
+		else tracker.delete(index);
+	}
+	function readNode(record) {
+		const index = record.index;
+		const mark = compileNodeMark(record.mark);
+		nodes.reserve(index);
+		nodes.keys[index] = record.key;
+		const size = mark.size ? toNumber(mark.size(record.datum)) : NaN;
+		const color = mark.color?.(record.datum);
+		sizeValues[index] = size;
+		nodeColorValues[index] = color;
+		track(sizeExtent, index, size);
+		track(nodeColorExtent, index, color);
+	}
+	function readEdge(record) {
+		const index = record.index;
+		const mark = compileEdgeMark(record.mark);
+		edges.reserve(index);
+		edges.keys[index] = record.key;
+		const width = mark.width ? toNumber(mark.width(record.datum)) : NaN;
+		const color = mark.color?.(record.datum);
+		widthValues[index] = width;
+		edgeColorValues[index] = color;
+		track(widthExtent, index, width);
+		track(edgeColorExtent, index, color);
+	}
+	function writeNode(record) {
+		const index = record.index;
+		const mark = compileNodeMark(record.mark);
+		const datum = record.datum;
+		const size = sizeValues[index] ?? NaN;
+		const fill = toColor(mark.fill?.(datum)) ?? colorScale.map(nodeColorValues[index], colorExtent) ?? defaults.nodeFill;
+		nodes.alive[index] = 1;
+		nodes.slot[index] = slots.get(record.mark) ?? 0;
+		nodes.size[index] = Number.isNaN(size) ? defaults.nodeSize : sizeScale.map(size, sizeDomain);
+		nodes.shape[index] = codeOf(shapeCodes, mark.shape?.(datum));
+		nodes.fill[index] = palette.id(fill);
+		nodes.stroke[index] = palette.id(toColor(mark.stroke?.(datum)) ?? defaults.nodeStroke);
+		nodes.strokeWidth[index] = finiteOr(mark.strokeWidth?.(datum), defaults.nodeStrokeWidth);
+		nodes.opacity[index] = Math.min(1, Math.max(0, finiteOr(mark.opacity?.(datum), 1)));
+		nodes.screenUnits[index] = mark.screenUnits ? 1 : 0;
+		nodes.label[index] = toText(mark.label?.(datum));
+		nodes.secondary[index] = toText(mark.secondary?.(datum));
+		nodes.image[index] = toText(mark.image?.(datum));
+		nodes.badges[index] = readBadges(mark, datum);
+		dirtyNodes.add(index);
+	}
+	function writeEdge(model, record) {
+		const index = record.index;
+		const mark = compileEdgeMark(record.mark);
+		const datum = record.datum;
+		const width = widthValues[index] ?? NaN;
+		const color = toColor(mark.stroke?.(datum)) ?? colorScale.map(edgeColorValues[index], colorExtent) ?? defaults.edgeColor;
+		edges.alive[index] = 1;
+		edges.slot[index] = slots.get(record.mark) ?? 0;
+		edges.source[index] = model.node(record.source)?.index ?? 0;
+		edges.target[index] = model.node(record.target)?.index ?? 0;
+		lanes.link(index, edges.source[index] ?? 0, edges.target[index] ?? 0);
+		edges.color[index] = palette.id(color);
+		edges.width[index] = Number.isNaN(width) ? defaults.edgeWidth : widthScale.map(width, widthDomain);
+		edges.dash[index] = codeOf(dashCodes, mark.dash?.(datum));
+		edges.arrow[index] = codeOf(arrowCodes, mark.arrow?.(datum));
+		edges.opacity[index] = Math.min(1, Math.max(0, finiteOr(mark.opacity?.(datum), 1)));
+		edges.label[index] = toText(mark.label?.(datum));
+		dirtyEdges.add(index);
+	}
+	function removeNode(index) {
+		nodes.clear(index);
+		sizeValues[index] = NaN;
+		nodeColorValues[index] = void 0;
+		sizeExtent.delete(index);
+		nodeColorExtent.delete(index);
+		dirtyNodes.add(index);
+	}
+	function removeEdge(index) {
+		lanes.unlink(index);
+		edges.clear(index);
+		widthValues[index] = NaN;
+		edgeColorValues[index] = void 0;
+		widthExtent.delete(index);
+		edgeColorExtent.delete(index);
+		dirtyEdges.add(index);
+	}
+	function include(target, ids, keys, lookup) {
+		for (const index of ids) {
+			const key = keys[index];
+			if (target.has(index) || key === void 0) continue;
+			const record = lookup(key);
+			if (record) target.set(index, record);
+		}
+	}
+	return {
+		nodes,
+		edges,
+		palette,
+		get layers() {
+			return layers;
+		},
+		setDefinition(definition) {
+			const next = definition.scales;
+			if (!sameScale(next.color, scales.color)) {
+				colorScale = resolveColorScale(next.color);
+				full = true;
+			}
+			if (!sameScale(next.size, scales.size)) {
+				sizeScale = resolveNumberScale(next.size, {
+					type: "sqrt",
+					range: defaults.nodeSizeRange
+				});
+				full = true;
+			}
+			if (!sameScale(next.width, scales.width)) {
+				widthScale = resolveNumberScale(next.width, {
+					type: "linear",
+					range: defaults.edgeWidthRange
+				});
+				full = true;
+			}
+			scales = next;
+			const nextLayers = layersOf(definition.marks);
+			slots.clear();
+			definition.marks.forEach((mark, position) => {
+				slots.set(mark, nextLayers[position]?.slot ?? 0);
+			});
+			if (nextLayers.length !== layers.length || nextLayers.some((layer, i) => layer.kind !== layers[i]?.kind || layer.slot !== layers[i]?.slot)) {
+				layers = nextLayers;
+				layersDirty = true;
+			}
+		},
+		apply(model, changes) {
+			for (const { index } of changes.nodes.removed) removeNode(index);
+			for (const { index } of changes.edges.removed) removeEdge(index);
+			const nodeRecords = /* @__PURE__ */ new Map();
+			const edgeRecords = /* @__PURE__ */ new Map();
+			if (full) {
+				for (const record of model.nodes()) nodeRecords.set(record.index, record);
+				for (const record of model.edges()) edgeRecords.set(record.index, record);
+				full = false;
+			}
+			for (const ref of [...changes.nodes.added, ...changes.nodes.updated]) {
+				const record = model.node(ref.key);
+				if (record) nodeRecords.set(record.index, record);
+			}
+			for (const ref of [...changes.edges.added, ...changes.edges.updated]) {
+				const record = model.edge(ref.key);
+				if (record) edgeRecords.set(record.index, record);
+			}
+			for (const record of nodeRecords.values()) readNode(record);
+			for (const record of edgeRecords.values()) readEdge(record);
+			const nextColor = colorScale.needsExtent ? combineExtents(nodeColorExtent.extent, edgeColorExtent.extent) : null;
+			if (!sameExtent(nextColor, colorExtent)) {
+				colorExtent = nextColor;
+				include(nodeRecords, nodeColorExtent.ids(), nodes.keys, (key) => model.node(key));
+				include(edgeRecords, edgeColorExtent.ids(), edges.keys, (key) => model.edge(key));
+			}
+			const nextSize = sizeScale.needsExtent ? sizeExtent.extent : null;
+			if (!sameExtent(nextSize, sizeDomain)) {
+				sizeDomain = nextSize;
+				include(nodeRecords, sizeExtent.ids(), nodes.keys, (key) => model.node(key));
+			}
+			const nextWidth = widthScale.needsExtent ? widthExtent.extent : null;
+			if (!sameExtent(nextWidth, widthDomain)) {
+				widthDomain = nextWidth;
+				include(edgeRecords, widthExtent.ids(), edges.keys, (key) => model.edge(key));
+			}
+			for (const record of nodeRecords.values()) writeNode(record);
+			for (const record of edgeRecords.values()) writeEdge(model, record);
+			lanes.write(edges, dirtyEdges);
+		},
+		takeDirty() {
+			const dirty = {
+				nodes: dirtyNodes,
+				edges: dirtyEdges,
+				palette: palette.version !== paletteVersion,
+				layers: layersDirty
+			};
+			dirtyNodes = /* @__PURE__ */ new Set();
+			dirtyEdges = /* @__PURE__ */ new Set();
+			paletteVersion = palette.version;
+			layersDirty = false;
+			return dirty;
+		}
+	};
+}
+const noPaint = 4294967295;
+const tableOffset = {
+	nodes: 0,
+	edges: 32
+};
+var DirtyRange = class {
+	from = Number.POSITIVE_INFINITY;
+	to = -1;
+	add(index) {
+		if (index < this.from) this.from = index;
+		if (index > this.to) this.to = index;
+	}
+	take() {
+		if (this.to < this.from) return null;
+		const range = [this.from, this.to];
+		this.from = Number.POSITIVE_INFINITY;
+		this.to = -1;
+		return range;
+	}
+};
+function grow(array, capacity) {
+	if (capacity <= array.length) return array;
+	const next = new Uint32Array(Math.max(capacity, array.length * 2));
+	next.set(array);
+	return next;
+}
+var StateBuffers = class {
+	numbers = (/* @__PURE__ */ new Float32Array(256)).fill(-1);
+	paint = (/* @__PURE__ */ new Uint32Array(256)).fill(noPaint);
+	labelFlags = (/* @__PURE__ */ new Int8Array(32)).fill(-1);
+	nodeDirty = new DirtyRange();
+	edgeDirty = new DirtyRange();
+	nodeMask = /* @__PURE__ */ new Uint32Array(0);
+	edgeMask = /* @__PURE__ */ new Uint32Array(0);
+	highlightedNodes = [];
+	highlightedEdges = [];
+	tableVersion = 0;
+	highlightVersion = 0;
+	reserve(nodeCapacity, edgeCapacity) {
+		this.nodeMask = grow(this.nodeMask, nodeCapacity);
+		this.edgeMask = grow(this.edgeMask, edgeCapacity);
+	}
+	setNode(index, mask) {
+		this.nodeMask = grow(this.nodeMask, index + 1);
+		if (this.nodeMask[index] === mask >>> 0) return;
+		this.nodeMask[index] = mask >>> 0;
+		this.nodeDirty.add(index);
+	}
+	setEdge(index, mask) {
+		this.edgeMask = grow(this.edgeMask, index + 1);
+		if (this.edgeMask[index] === mask >>> 0) return;
+		this.edgeMask[index] = mask >>> 0;
+		this.edgeDirty.add(index);
+	}
+	setStyle(kind, bit, style) {
+		const at = (tableOffset[kind] + bit) * 4;
+		this.numbers[at] = style?.opacity ?? -1;
+		this.numbers[at + 1] = style?.strokeWidth ?? -1;
+		this.numbers[at + 2] = style?.halo === void 0 ? -1 : style.halo ? 1 : 0;
+		this.numbers[at + 3] = style?.label === void 0 ? -1 : style.label ? 1 : 0;
+		this.paint[at] = style?.fill ?? 4294967295;
+		this.paint[at + 1] = style?.stroke ?? 4294967295;
+		if (kind === "nodes") this.labelFlags[bit] = this.numbers[at + 3] ?? -1;
+		this.tableVersion++;
+	}
+	setHighlighted(nodes, edges) {
+		this.highlightedNodes = nodes;
+		this.highlightedEdges = edges;
+		this.highlightVersion++;
+	}
+};
+// src/core/view.ts
+const defaultZoomLimits = {
+	min: .001,
+	max: 64
+};
+function clampZoom(zoom, limits = defaultZoomLimits) {
+	return Math.min(limits.max, Math.max(limits.min, zoom));
+}
+function toScreen(view, viewport, point) {
+	return {
+		x: (point.x - view.x) * view.zoom + viewport.width / 2,
+		y: (point.y - view.y) * view.zoom + viewport.height / 2
+	};
+}
+function toWorld(view, viewport, point) {
+	return {
+		x: (point.x - viewport.width / 2) / view.zoom + view.x,
+		y: (point.y - viewport.height / 2) / view.zoom + view.y
+	};
+}
+function panBy(view, dx, dy) {
+	return {
+		x: view.x - dx / view.zoom,
+		y: view.y - dy / view.zoom,
+		zoom: view.zoom
+	};
+}
+function zoomAround(view, viewport, anchor, factor, limits = defaultZoomLimits) {
+	const zoom = clampZoom(view.zoom * factor, limits);
+	const before = toWorld(view, viewport, anchor);
+	const after = toWorld({
+		x: view.x,
+		y: view.y,
+		zoom
+	}, viewport, anchor);
+	return {
+		x: view.x + before.x - after.x,
+		y: view.y + before.y - after.y,
+		zoom
+	};
+}
+function fitBounds(bounds, viewport, padding, limits = defaultZoomLimits) {
+	const width = Math.max(1, viewport.width - padding * 2);
+	const height = Math.max(1, viewport.height - padding * 2);
+	const spanX = Math.max(1e-9, bounds.maxX - bounds.minX);
+	const spanY = Math.max(1e-9, bounds.maxY - bounds.minY);
+	return {
+		x: (bounds.minX + bounds.maxX) / 2,
+		y: (bounds.minY + bounds.maxY) / 2,
+		zoom: clampZoom(Math.min(width / spanX, height / spanY), limits)
+	};
+}
+function wheelFactor(deltaY, deltaMode, viewportHeight, speed) {
+	const delta = Math.max(-120, Math.min(120, deltaY * (deltaMode === 1 ? 16 : deltaMode === 2 ? viewportHeight : 1)));
+	return Math.exp(-delta * .0025 * speed);
+}
+function easeInOut(t) {
+	return t < .5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+}
+function interpolateView(from, to, t) {
+	return {
+		x: from.x + (to.x - from.x) * t,
+		y: from.y + (to.y - from.y) * t,
+		zoom: Math.exp(Math.log(from.zoom) + (Math.log(to.zoom) - Math.log(from.zoom)) * t)
+	};
+}
+// src/dev.ts
+function detect() {
+	try {
+		return process.env.NODE_ENV !== "production";
+	} catch {
+		return false;
+	}
+}
+const dev = detect();
+// src/dom/theme.ts
+const tokenPattern = /var\(\s*--graph-([a-z0-9-]+)\s*\)/g;
+function withFallbacks(color) {
+	return color.replace(tokenPattern, (match, name) => {
+		const fallback = lightTheme[name];
+		return fallback === void 0 ? match : `var(--graph-${name}, ${fallback})`;
+	});
+}
+var ThemeResolver = class {
+	#host;
+	#probe;
+	#context;
+	constructor(host) {
+		this.#host = host;
+		this.#probe = document.createElement("span");
+		this.#probe.setAttribute("aria-hidden", "true");
+		this.#probe.style.cssText = "position:absolute;width:0;height:0;overflow:hidden;visibility:hidden";
+		host.append(this.#probe);
+		const canvas = document.createElement("canvas");
+		canvas.width = 1;
+		canvas.height = 1;
+		this.#context = canvas.getContext("2d", { willReadFrequently: true });
+	}
+	color(css) {
+		const probe = this.#probe;
+		probe.style.color = "";
+		probe.style.color = withFallbacks(css);
+		const computed = getComputedStyle(probe).color;
+		const context = this.#context;
+		if (!context) return [
+			0,
+			0,
+			0,
+			255
+		];
+		context.clearRect(0, 0, 1, 1);
+		context.fillStyle = "#000";
+		context.fillStyle = computed;
+		context.fillRect(0, 0, 1, 1);
+		const [r = 0, g = 0, b = 0, a = 0] = context.getImageData(0, 0, 1, 1).data;
+		return [
+			r,
+			g,
+			b,
+			a
+		];
+	}
+	palette(colors, target, from = 0) {
+		for (let id = from; id < colors.length; id++) target.set(this.color(colors[id] ?? ""), id * 4);
+	}
+	theme() {
+		const font = getComputedStyle(this.#host).getPropertyValue("--graph-font").trim();
+		return {
+			labelInk: this.color(themeColor("ink")),
+			labelMuted: this.color(themeColor("ink-muted")),
+			labelHalo: this.color(themeColor("label-halo")),
+			halo: this.color(themeColor("halo")),
+			font: font === "" ? defaultFont : font
+		};
+	}
+	destroy() {
+		this.#probe.remove();
+	}
+};
+function observeTheme(host, onChange) {
+	const observer = new MutationObserver(onChange);
+	const attributes = [
+		"class",
+		"style",
+		"data-theme"
+	];
+	for (const element of [
+		document.documentElement,
+		document.body,
+		host
+	]) if (element) observer.observe(element, {
+		attributes: true,
+		attributeFilter: attributes
+	});
+	const media = window.matchMedia("(prefers-color-scheme: dark)");
+	media.addEventListener("change", onChange);
+	return () => {
+		observer.disconnect();
+		media.removeEventListener("change", onChange);
+	};
+}
+// src/webgl/gl.ts
+const textureWidth = 1024;
+function createProgram(gl, vertex, fragment, blocks) {
+	const program = gl.createProgram();
+	const shaders = [];
+	for (const [type, source] of [[gl.VERTEX_SHADER, vertex], [gl.FRAGMENT_SHADER, fragment]]) {
+		const shader = gl.createShader(type);
+		if (!shader) throw new Error("graph: cannot create a WebGL shader");
+		gl.shaderSource(shader, source);
+		gl.compileShader(shader);
+		if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(`graph: shader compilation failed\n${gl.getShaderInfoLog(shader) ?? ""}`);
+		gl.attachShader(program, shader);
+		shaders.push(shader);
+	}
+	gl.linkProgram(program);
+	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error(`graph: program link failed\n${gl.getProgramInfoLog(program) ?? ""}`);
+	for (const shader of shaders) {
+		gl.detachShader(program, shader);
+		gl.deleteShader(shader);
+	}
+	for (const [name, binding] of Object.entries(blocks)) {
+		const index = gl.getUniformBlockIndex(program, name);
+		if (index !== gl.INVALID_INDEX) gl.uniformBlockBinding(program, index, binding);
+	}
+	return program;
+}
+function formats(gl) {
+	return {
+		rg32f: {
+			internal: gl.RG32F,
+			format: gl.RG,
+			type: gl.FLOAT,
+			components: 2
+		},
+		rgba32f: {
+			internal: gl.RGBA32F,
+			format: gl.RGBA,
+			type: gl.FLOAT,
+			components: 4
+		},
+		rgba32ui: {
+			internal: gl.RGBA32UI,
+			format: gl.RGBA_INTEGER,
+			type: gl.UNSIGNED_INT,
+			components: 4
+		},
+		r32ui: {
+			internal: gl.R32UI,
+			format: gl.RED_INTEGER,
+			type: gl.UNSIGNED_INT,
+			components: 1
+		}
+	};
+}
+var DataTexture = class {
+	texture;
+	#gl;
+	#format;
+	#create;
+	#rows = 0;
+	data;
+	constructor(gl, format, create) {
+		this.#gl = gl;
+		this.#format = format;
+		this.#create = create;
+		this.data = create(0);
+		this.texture = gl.createTexture();
+		gl.bindTexture(gl.TEXTURE_2D, this.texture);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+	}
+	get rows() {
+		return this.#rows;
+	}
+	reserve(capacity) {
+		const rows = Math.max(1, Math.ceil(capacity / textureWidth));
+		if (rows <= this.#rows) return false;
+		const data = this.#create(rows * textureWidth * this.#format.components);
+		data.set(this.data);
+		this.data = data;
+		this.#rows = rows;
+		const gl = this.#gl;
+		gl.bindTexture(gl.TEXTURE_2D, this.texture);
+		gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+		gl.texImage2D(gl.TEXTURE_2D, 0, this.#format.internal, textureWidth, rows, 0, this.#format.format, this.#format.type, data);
+		return true;
+	}
+	upload(first, last) {
+		if (last < first || this.#rows === 0) return;
+		const gl = this.#gl;
+		const startRow = Math.floor(first / textureWidth);
+		const endRow = Math.min(this.#rows - 1, Math.floor(last / textureWidth));
+		const stride = textureWidth * this.#format.components;
+		gl.bindTexture(gl.TEXTURE_2D, this.texture);
+		gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+		gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, startRow, textureWidth, endRow - startRow + 1, this.#format.format, this.#format.type, this.data.subarray(startRow * stride, (endRow + 1) * stride));
+	}
+	destroy() {
+		this.#gl.deleteTexture(this.texture);
+	}
+};
+function createBuffer(gl, data, usage) {
+	const buffer = gl.createBuffer();
+	gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+	gl.bufferData(gl.ARRAY_BUFFER, data, usage);
+	return buffer;
+}
+function createVertexArray(gl, program, attributes) {
+	const vao = gl.createVertexArray();
+	gl.bindVertexArray(vao);
+	for (const attribute of attributes) {
+		const location = gl.getAttribLocation(program, attribute.name);
+		if (location < 0) continue;
+		gl.bindBuffer(gl.ARRAY_BUFFER, attribute.buffer);
+		gl.enableVertexAttribArray(location);
+		const stride = attribute.stride ?? 0;
+		const offset = attribute.offset ?? 0;
+		if (attribute.integer) gl.vertexAttribIPointer(location, attribute.size, attribute.type, stride, offset);
+		else gl.vertexAttribPointer(location, attribute.size, attribute.type, attribute.normalized ?? false, stride, offset);
+		gl.vertexAttribDivisor(location, attribute.divisor);
+	}
+	gl.bindVertexArray(null);
+	return vao;
+}
+const atlasWidth = 1024;
+const glyphBuffer = 3;
+const maxHeight = 4096;
+var GlyphAtlas = class {
+	pixels = new Uint8Array(atlasWidth * 256);
+	height = 256;
+	generation = 0;
+	dirtyFrom = Number.POSITIVE_INFINITY;
+	dirtyTo = -1;
+	#glyphs = /* @__PURE__ */ new Map();
+	#lines = {
+		"400": /* @__PURE__ */ new Map(),
+		"500": /* @__PURE__ */ new Map()
+	};
+	#renderers = /* @__PURE__ */ new Map();
+	#font;
+	#penX = 0;
+	#penY = 0;
+	#rowHeight = 0;
+	constructor(font) {
+		this.#font = font;
+	}
+	setFont(font) {
+		if (font === this.#font) return false;
+		this.#font = font;
+		this.#glyphs.clear();
+		this.#lines["400"].clear();
+		this.#lines["500"].clear();
+		this.#renderers.clear();
+		this.#penX = 0;
+		this.#penY = 0;
+		this.#rowHeight = 0;
+		this.pixels.fill(0);
+		this.generation++;
+		return true;
+	}
+	line(text, weight) {
+		const lines = this.#lines[weight];
+		const cached = lines.get(text);
+		if (cached) return cached;
+		const glyphs = [];
+		let pen = 0;
+		for (const char of text) {
+			const glyph = this.#glyph(char, weight);
+			if (glyph.width > 0 && char.trim() !== "") glyphs.push({
+				glyph,
+				x: pen + glyph.left - glyphBuffer
+			});
+			pen += glyph.advance;
+		}
+		const layout = {
+			width: pen,
+			glyphs: glyphs.map((g) => ({
+				glyph: g.glyph,
+				x: g.x - pen / 2
+			}))
+		};
+		lines.set(text, layout);
+		return layout;
+	}
+	takeDirty() {
+		if (this.dirtyTo < this.dirtyFrom) return null;
+		const range = [this.dirtyFrom, this.dirtyTo];
+		this.dirtyFrom = Number.POSITIVE_INFINITY;
+		this.dirtyTo = -1;
+		return range;
+	}
+	#renderer(weight) {
+		let renderer = this.#renderers.get(weight);
+		if (!renderer) {
+			renderer = new TinySDF({
+				fontSize: 24,
+				buffer: glyphBuffer,
+				radius: 8,
+				cutoff: .25,
+				fontFamily: this.#font,
+				fontWeight: weight
+			});
+			this.#renderers.set(weight, renderer);
+		}
+		return renderer;
+	}
+	#glyph(char, weight) {
+		const key = `${weight}${char}`;
+		const cached = this.#glyphs.get(key);
+		if (cached) return cached;
+		const drawn = this.#renderer(weight).draw(char);
+		if (this.#penX + drawn.width > 1024) {
+			this.#penX = 0;
+			this.#penY += this.#rowHeight + 1;
+			this.#rowHeight = 0;
+		}
+		if (this.#penY + drawn.height > this.height) this.#grow(this.#penY + drawn.height);
+		const glyph = {
+			x: this.#penX,
+			y: this.#penY,
+			width: drawn.width,
+			height: drawn.height,
+			left: drawn.glyphLeft,
+			top: 24 - drawn.glyphTop - glyphBuffer,
+			advance: drawn.glyphAdvance
+		};
+		if (this.#penY + drawn.height <= this.height) {
+			for (let row = 0; row < drawn.height; row++) this.pixels.set(drawn.data.subarray(row * drawn.width, (row + 1) * drawn.width), (glyph.y + row) * atlasWidth + glyph.x);
+			this.dirtyFrom = Math.min(this.dirtyFrom, glyph.y);
+			this.dirtyTo = Math.max(this.dirtyTo, glyph.y + drawn.height - 1);
+		}
+		this.#penX += drawn.width + 1;
+		this.#rowHeight = Math.max(this.#rowHeight, drawn.height);
+		this.#glyphs.set(key, glyph);
+		return glyph;
+	}
+	#grow(required) {
+		let height = this.height;
+		while (height < required && height < maxHeight) height *= 2;
+		if (height === this.height) return;
+		const pixels = new Uint8Array(atlasWidth * height);
+		pixels.set(this.pixels);
+		this.pixels = pixels;
+		this.height = height;
+		this.generation++;
+	}
+};
+const primarySize = 12;
+const lineHeight = 1.25;
+const labelMin = 8;
+const cell = 8;
+const maxLabels = 4e3;
+const cullMargin = 400;
+var GlyphBuffer = class {
+	data = /* @__PURE__ */ new ArrayBuffer(8192);
+	count = 0;
+	#u32 = new Uint32Array(this.data);
+	#f32 = new Float32Array(this.data);
+	#u16 = new Uint16Array(this.data);
+	clear() {
+		this.count = 0;
+	}
+	push(node, kind, line, atlasHeight) {
+		for (const { glyph, x } of line.glyphs) {
+			if ((this.count + 1) * 32 > this.data.byteLength) this.#grow();
+			const at = this.count * 8;
+			this.#u32[at] = node;
+			this.#u32[at + 1] = kind;
+			this.#f32[at + 2] = x;
+			this.#f32[at + 3] = glyph.top;
+			this.#f32[at + 4] = glyph.width;
+			this.#f32[at + 5] = glyph.height;
+			const uv = at * 2 + 12;
+			this.#u16[uv] = Math.round(glyph.x / atlasWidth * 65535);
+			this.#u16[uv + 1] = Math.round(glyph.y / atlasHeight * 65535);
+			this.#u16[uv + 2] = Math.round((glyph.x + glyph.width) / atlasWidth * 65535);
+			this.#u16[uv + 3] = Math.round((glyph.y + glyph.height) / atlasHeight * 65535);
+			this.count++;
+		}
+	}
+	#grow() {
+		const data = /* @__PURE__ */ new ArrayBuffer(this.data.byteLength * 2);
+		new Uint8Array(data).set(new Uint8Array(this.data));
+		this.data = data;
+		this.#u32 = new Uint32Array(data);
+		this.#f32 = new Float32Array(data);
+		this.#u16 = new Uint16Array(data);
+	}
+};
+function labelVisible(mask, flags) {
+	let bits = mask >>> 0;
+	while (bits !== 0) {
+		const bit = 31 - Math.clz32(bits & -bits);
+		bits &= bits - 1;
+		const flag = flags[bit] ?? -1;
+		if (flag >= 0) return flag === 1;
+	}
+	return true;
+}
+var LabelLayer = class {
+	main = new GlyphBuffer();
+	highlight = new GlyphBuffer();
+	#occupancy = /* @__PURE__ */ new Uint8Array(0);
+	select(frame, atlas) {
+		this.main.clear();
+		this.highlight.clear();
+		const { nodes, positions, view, width, height } = frame;
+		const cols = Math.ceil(width / cell) + 1;
+		const rows = Math.ceil(height / cell) + 1;
+		if (this.#occupancy.length < cols * rows) this.#occupancy = new Uint8Array(cols * rows);
+		else this.#occupancy.fill(0, 0, cols * rows);
+		const occupancy = this.#occupancy;
+		const highlighted = new Set(frame.highlighted);
+		const worldPrimary = primarySize * Math.min(1, view.zoom);
+		let placed = 0;
+		const place = (index, force) => {
+			const label = nodes.label[index];
+			if (!label || nodes.alive[index] !== 1) return;
+			if (!labelVisible(frame.nodeMask[index] ?? 0, frame.labelFlags)) return;
+			const screenUnits = nodes.screenUnits[index] === 1;
+			const primary = screenUnits ? primarySize : worldPrimary;
+			if (primary < labelMin) return;
+			const diameter = screenUnits ? nodes.size[index] ?? 0 : (nodes.size[index] ?? 0) * view.zoom;
+			const radius = Math.max(diameter / 2, 1.25);
+			const x = (positions.x(index) - view.x) * view.zoom + width / 2;
+			const y = (positions.y(index) - view.y) * view.zoom + height / 2;
+			if (x < -400 || x > width + cullMargin) return;
+			if (y + radius > height || y + radius + primary * lineHeight * 2 < -3) return;
+			const line = atlas.line(label, "500");
+			const secondaryText = nodes.secondary[index];
+			const secondary = secondaryText ? atlas.line(secondaryText, "400") : null;
+			const scale = primary / 24;
+			const textWidth = Math.max(line.width * scale, secondary ? secondary.width * scale * 11 / 12 : 0);
+			const top = y + radius + 3;
+			const bottom = top + primary * lineHeight * (secondary ? 2 : 1);
+			const left = x - textWidth / 2;
+			const right = x + textWidth / 2;
+			if (right < 0 || left > width || bottom < 0 || top > height) return;
+			const c0 = Math.max(0, Math.floor(left / cell));
+			const c1 = Math.min(cols - 1, Math.floor(right / cell));
+			const r0 = Math.max(0, Math.floor(top / cell));
+			const r1 = Math.min(rows - 1, Math.floor(bottom / cell));
+			if (!force) {
+				for (let row = r0; row <= r1; row++) for (let col = c0; col <= c1; col++) if (occupancy[row * cols + col] === 1) return;
+			}
+			for (let row = r0; row <= r1; row++) occupancy.fill(1, row * cols + c0, row * cols + c1 + 1);
+			const target = force ? this.highlight : this.main;
+			target.push(index, 0, line, atlas.height);
+			if (secondary) target.push(index, 1, secondary, atlas.height);
+			placed++;
+		};
+		for (const index of highlighted) place(index, true);
+		if (worldPrimary < labelMin && !frame.screenLabels) return;
+		const xy = positions.xy;
+		const order = frame.order;
+		const left = view.x - (width / 2 + cullMargin) / view.zoom;
+		const right = view.x + (width / 2 + cullMargin) / view.zoom;
+		const largest = nodes.size[order[0] ?? 0] ?? 0;
+		const reach = cullMargin + (frame.screenLabels ? largest : largest * view.zoom) / 2;
+		const top = view.y - (height / 2 + reach) / view.zoom;
+		const bottom = view.y + height / 2 / view.zoom;
+		for (let at = 0; at < frame.orderLength && placed < maxLabels; at++) {
+			const index = order[at] ?? 0;
+			const x = xy[index * 2] ?? 0;
+			const y = xy[index * 2 + 1] ?? 0;
+			if (x < left || x > right || y < top || y > bottom) continue;
+			if (!highlighted.has(index)) place(index, false);
+		}
+	}
+};
+function sortBySize(nodes, order) {
+	let length = 0;
+	let screenLabels = false;
+	for (let index = 0; index < nodes.capacity; index++) if (nodes.alive[index] === 1 && nodes.label[index]) {
+		order[length++] = index;
+		if (nodes.screenUnits[index] === 1) screenLabels = true;
+	}
+	const sizes = nodes.size;
+	order.subarray(0, length).sort((a, b) => (sizes[b] ?? 0) - (sizes[a] ?? 0));
+	return {
+		length,
+		screenLabels
+	};
+}
+// src/webgl/shaders.ts
+const header = `#version 300 es
+precision highp float;
+precision highp int;
+precision highp sampler2D;
+precision highp usampler2D;
+layout(std140) uniform Frame {
+  vec2 center;
+  vec2 viewport;
+  float zoom;
+  float pixelRatio;
+  float haloWidth;
+  float labelMin;
+  vec4 haloColor;
+  vec4 labelInk;
+  vec4 labelMuted;
+  vec4 labelHalo;
+};
+layout(std140) uniform States {
+  vec4 stateNumbers[64];
+  uvec4 statePaint[64];
+};
+uniform int layerSlot;
+uniform int overlay;
+uniform sampler2D palette;
+const uint highlightMask = 3u;
+const uint none = 0xffffffffu;
+const vec4 hidden = vec4(2.0, 2.0, 2.0, 1.0);
+vec2 toScreen(vec2 world) { return (world - center) * zoom + viewport * 0.5; }
+vec4 toClip(vec2 screen) {
+  return vec4(screen.x / viewport.x * 2.0 - 1.0, 1.0 - screen.y / viewport.y * 2.0, 0.0, 1.0);
+}
+ivec2 texel(uint index) { return ivec2(int(index & 1023u), int(index >> 10u)); }
+vec4 paletteColor(uint id) { return texelFetch(palette, ivec2(int(id & 255u), int(id >> 8u)), 0); }
+struct Look { float opacity; float strokeWidth; float halo; float label; uint fill; uint stroke; };
+Look resolve(uint mask, Look look, int table) {
+  bool opacity = false;
+  bool strokeWidth = false;
+  bool halo = false;
+  bool label = false;
+  bool fill = false;
+  bool stroke = false;
+  float base = look.opacity;
+  for (int bit = 0; bit < 32; bit++) {
+    if (mask == 0u) break;
+    bool present = (mask & 1u) != 0u;
+    mask >>= 1u;
+    if (!present) continue;
+    vec4 numbers = stateNumbers[table + bit];
+    uvec4 paint = statePaint[table + bit];
+    if (!opacity && numbers.x >= 0.0) { look.opacity = base * numbers.x; opacity = true; }
+    if (!strokeWidth && numbers.y >= 0.0) { look.strokeWidth = numbers.y; strokeWidth = true; }
+    if (!halo && numbers.z >= 0.0) { look.halo = numbers.z; halo = true; }
+    if (!label && numbers.w >= 0.0) { look.label = numbers.w; label = true; }
+    if (!fill && paint.x != none) { look.fill = paint.x; fill = true; }
+    if (!stroke && paint.y != none) { look.stroke = paint.y; stroke = true; }
+  }
+  return look;
+}
+`;
+const nodeData = `
+uniform sampler2D nodePosition;
+uniform sampler2D nodeStyle;
+uniform usampler2D nodePaint;
+uniform usampler2D nodeState;
+float nodeDiameter(vec4 style) {
+  uint flags = uint(style.w + 0.5);
+  return (flags & 4u) != 0u ? style.x : style.x * zoom;
+}
+float nodeRadius(vec4 style) { return max(nodeDiameter(style) * 0.5, 1.25); }
+`;
+const edgeData = `
+uniform usampler2D edgeTopology;
+uniform sampler2D edgeStyle;
+uniform usampler2D edgeState;
+`;
+const nodeVertex = `${header}${nodeData}
+in vec2 corner;
+in uint instance;
+out vec2 vLocal;
+out float vRadius;
+out float vStrokeWidth;
+out float vHaloWidth;
+flat out uint vShape;
+flat out vec4 vFill;
+flat out vec4 vStroke;
+flat out float vOpacity;
+void main() {
+  ivec2 t = texel(instance);
+  vec4 style = texelFetch(nodeStyle, t, 0);
+  uvec4 paint = texelFetch(nodePaint, t, 0);
+  uint flags = uint(style.w + 0.5);
+  uint mask = texelFetch(nodeState, t, 0).r;
+  bool highlighted = (mask & highlightMask) != 0u;
+  if ((flags & 8u) == 0u || (overlay == 0 && (int(paint.z) != layerSlot || highlighted))) {
+    gl_Position = hidden;
+    return;
+  }
+  Look look = resolve(mask, Look(style.z, style.y, 0.0, 1.0, paint.x, paint.y), 0);
+  vec2 xy = texelFetch(nodePosition, t, 0).xy;
+  float radius = nodeRadius(style);
+  float halo = look.halo > 0.5 ? haloWidth : 0.0;
+  vLocal = corner * (radius + halo + 1.5);
+  vRadius = radius;
+  vStrokeWidth = min(look.strokeWidth, radius * 0.5);
+  vHaloWidth = halo;
+  vShape = flags & 3u;
+  vFill = paletteColor(look.fill);
+  vStroke = paletteColor(look.stroke);
+  vOpacity = look.opacity;
+  gl_Position = toClip(toScreen(xy) + vLocal);
+}
+`;
+const nodeFragment = `${header}
+in vec2 vLocal;
+in float vRadius;
+in float vStrokeWidth;
+in float vHaloWidth;
+flat in uint vShape;
+flat in vec4 vFill;
+flat in vec4 vStroke;
+flat in float vOpacity;
+out vec4 fragColor;
+float shapeDistance(vec2 p, float r) {
+  if (vShape == 0u) return length(p) - r;
+  if (vShape == 1u) {
+    vec2 q = abs(p) - vec2(r * 0.86);
+    return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0);
+  }
+  return (abs(p.x) + abs(p.y) - r * 1.2) * 0.70710678;
+}
+void main() {
+  float aa = 0.5 / pixelRatio + 0.25;
+  float d = shapeDistance(vLocal, vRadius);
+  float inside = 1.0 - smoothstep(-aa, aa, d);
+  float ring = vStrokeWidth > 0.0 ? smoothstep(-vStrokeWidth - aa, -vStrokeWidth + aa, d) : 0.0;
+  vec4 color = mix(vFill, vStroke, ring);
+  float alpha = color.a * inside * vOpacity;
+  vec4 result = vec4(color.rgb * alpha, alpha);
+  if (vHaloWidth > 0.0) {
+    float h = haloColor.a * (1.0 - smoothstep(0.0, vHaloWidth, d)) * vOpacity;
+    result += vec4(haloColor.rgb * h, h) * (1.0 - result.a);
+  }
+  if (result.a < 0.002) discard;
+  fragColor = result;
+}
+`;
+const edgeVertex = `${header}${nodeData}${edgeData}
+in vec3 corner;
+in uint instance;
+out vec2 vPos;
+out float vStart;
+out float vEnd;
+out float vHalfWidth;
+out float vArrowLength;
+out float vArrowHalf;
+out float vHaloWidth;
+flat out uint vDash;
+flat out uint vArrow;
+flat out vec4 vColor;
+flat out float vOpacity;
+void main() {
+  ivec2 t = texel(instance);
+  uvec4 topology = texelFetch(edgeTopology, t, 0);
+  vec4 style = texelFetch(edgeStyle, t, 0);
+  uint packed = topology.w;
+  uint mask = texelFetch(edgeState, t, 0).r;
+  bool highlighted = (mask & highlightMask) != 0u;
+  if ((packed & 16u) == 0u || (overlay == 0 && (int(packed >> 5u) != layerSlot || highlighted))) {
+    gl_Position = hidden;
+    return;
+  }
+  if (topology.x == topology.y || style.z != 0.0) {
+    gl_Position = hidden;
+    return;
+  }
+  Look look = resolve(mask, Look(style.y, style.x, 0.0, 1.0, none, topology.z), 32);
+  ivec2 s = texel(topology.x);
+  ivec2 e = texel(topology.y);
+  vec2 ps = toScreen(texelFetch(nodePosition, s, 0).xy);
+  vec2 pt = toScreen(texelFetch(nodePosition, e, 0).xy);
+  vec2 delta = pt - ps;
+  float len = length(delta);
+  vec2 dir = len > 0.0 ? delta / len : vec2(1.0, 0.0);
+  vec2 normal = vec2(-dir.y, dir.x);
+  float width = max(look.strokeWidth, 0.5);
+  float start = nodeRadius(texelFetch(nodeStyle, s, 0));
+  float end = len - nodeRadius(texelFetch(nodeStyle, e, 0));
+  float visible = end - start;
+  uint arrow = (packed >> 2u) & 3u;
+  float arrowLength = arrow != 0u && visible > width * 8.0 ? max(width * 4.0, 6.0) : 0.0;
+  float arrowHalf = max(width * 1.6, 3.0);
+  float halo = look.halo > 0.5 ? haloWidth : 0.0;
+  float margin = 0.5 / pixelRatio + 0.5;
+  float startHead = (arrow & 1u) != 0u ? arrowLength : 0.0;
+  float endHead = (arrow & 2u) != 0u ? arrowLength : 0.0;
+  float body = width * 0.5 + halo + margin;
+  float head = max(body, arrowHalf + halo + margin);
+  float along = corner.x < 0.5 ? start - margin
+    : corner.x < 1.5 ? start + startHead
+    : corner.x < 2.5 ? end - endHead
+    : end + margin;
+  float extent = corner.z < 0.5 ? body
+    : corner.z < 1.5 ? (startHead > 0.0 ? head : body)
+    : (endHead > 0.0 ? head : body);
+  float across = corner.y * extent;
+  vPos = vec2(along, across);
+  vStart = start;
+  vEnd = end;
+  vHalfWidth = width * 0.5;
+  vArrowLength = arrowLength;
+  vArrowHalf = arrowHalf;
+  vHaloWidth = halo;
+  vDash = packed & 3u;
+  vArrow = arrow;
+  vColor = paletteColor(look.stroke);
+  vOpacity = look.opacity;
+  gl_Position = visible > 0.5 ? toClip(ps + dir * along + normal * across) : hidden;
+}
+`;
+const segments = 24 .toFixed(1);
+const curveVertex = `${header}${nodeData}${edgeData}
+in vec3 corner;
+in uint instance;
+out vec2 vPos;
+out float vStart;
+out float vEnd;
+out float vHalfWidth;
+out float vArrowLength;
+out float vArrowHalf;
+out float vHaloWidth;
+flat out uint vDash;
+flat out uint vArrow;
+flat out vec4 vColor;
+flat out float vOpacity;
+vec2 cubicAt(vec2 a, vec2 b, vec2 c, vec2 d, float t) {
+  float u = 1.0 - t;
+  return u * u * u * a + 3.0 * u * u * t * b + 3.0 * u * t * t * c + t * t * t * d;
+}
+vec2 cubicTangent(vec2 a, vec2 b, vec2 c, vec2 d, float t) {
+  float u = 1.0 - t;
+  return 3.0 * u * u * (b - a) + 6.0 * u * t * (c - b) + 3.0 * t * t * (d - c);
+}
+float crossing(vec2 a, vec2 b, vec2 c, vec2 d, vec2 point, float radius, float lo, float hi, bool rising) {
+  for (int i = 0; i < 14; i++) {
+    float mid = (lo + hi) * 0.5;
+    bool inside = distance(cubicAt(a, b, c, d, mid), point) < radius;
+    if (inside == rising) lo = mid; else hi = mid;
+  }
+  return (lo + hi) * 0.5;
+}
+float arcLength(vec2 a, vec2 b, vec2 c, vec2 d, float from, float to) {
+  float total = 0.0;
+  vec2 previous = cubicAt(a, b, c, d, from);
+  for (int i = 1; i <= 8; i++) {
+    vec2 next = cubicAt(a, b, c, d, mix(from, to, float(i) / 8.0));
+    total += distance(previous, next);
+    previous = next;
+  }
+  return total;
+}
+vec2 turn(vec2 v, float angle) {
+  float c = cos(angle);
+  float s = sin(angle);
+  return vec2(v.x * c - v.y * s, v.x * s + v.y * c);
+}
+void main() {
+  ivec2 t = texel(instance);
+  uvec4 topology = texelFetch(edgeTopology, t, 0);
+  vec4 style = texelFetch(edgeStyle, t, 0);
+  uint packed = topology.w;
+  uint mask = texelFetch(edgeState, t, 0).r;
+  bool highlighted = (mask & highlightMask) != 0u;
+  bool loop = topology.x == topology.y;
+  if ((packed & 16u) == 0u || (!loop && style.z == 0.0) || (overlay == 0 && (int(packed >> 5u) != layerSlot || highlighted))) {
+    gl_Position = hidden;
+    return;
+  }
+  Look look = resolve(mask, Look(style.y, style.x, 0.0, 1.0, none, topology.z), 32);
+  ivec2 s = texel(topology.x);
+  ivec2 e = texel(topology.y);
+  vec2 a = toScreen(texelFetch(nodePosition, s, 0).xy);
+  vec2 d = toScreen(texelFetch(nodePosition, e, 0).xy);
+  float sourceRadius = nodeRadius(texelFetch(nodeStyle, s, 0));
+  float targetRadius = nodeRadius(texelFetch(nodeStyle, e, 0));
+  vec2 b;
+  vec2 c;
+  if (loop) {
+    float reach = sourceRadius + max(sourceRadius * 1.5, ${12 .toFixed(1)}) * (1.0 + ${loopGrowth.toFixed(2)} * style.z);
+    float arm = reach / (0.75 * cos(${loopTurn.toFixed(4)}));
+    vec2 u = vec2(0.70710678, -0.70710678);
+    b = a + arm * turn(u, ${loopTurn.toFixed(4)});
+    c = a + arm * turn(u, -${loopTurn.toFixed(4)});
+  } else {
+    vec2 delta = d - a;
+    float len = length(delta);
+    vec2 side = len > 0.0 ? vec2(-delta.y, delta.x) / len : vec2(0.0, 1.0);
+    vec2 control = (a + d) * 0.5 + side * (2.0 * style.z * len);
+    b = a + (control - a) * (2.0 / 3.0);
+    c = d + (control - d) * (2.0 / 3.0);
+  }
+  float t0 = crossing(a, b, c, d, a, sourceRadius, 0.0, 0.5, true);
+  float t1 = crossing(a, b, c, d, d, targetRadius, 0.5, 1.0, false);
+  float visible = arcLength(a, b, c, d, t0, t1);
+  float width = max(look.strokeWidth, 0.5);
+  uint arrow = (packed >> 2u) & 3u;
+  float arrowLength = arrow != 0u && visible > width * 8.0 ? max(width * 4.0, 6.0) : 0.0;
+  float arrowHalf = max(width * 1.6, 3.0);
+  float halo = look.halo > 0.5 ? haloWidth : 0.0;
+  float margin = 0.5 / pixelRatio + 0.5;
+  float startHead = (arrow & 1u) != 0u ? arrowLength : 0.0;
+  float endHead = (arrow & 2u) != 0u ? arrowLength : 0.0;
+  vec2 first = cubicAt(a, b, c, d, t0);
+  vec2 last = cubicAt(a, b, c, d, t1);
+  float ta = startHead > 0.0 ? crossing(a, b, c, d, first, startHead, t0, t1, true) : t0;
+  float tb = endHead > 0.0 ? crossing(a, b, c, d, last, endHead, t0, t1, false) : t1;
+  float body = width * 0.5 + halo + margin;
+  float head = max(body, arrowHalf + halo + margin);
+  int station = int(corner.x + 0.5);
+  float at;
+  float along;
+  float push = 0.0;
+  if (station == 0) {
+    at = t0;
+    along = -margin;
+    push = -margin;
+  } else if (station > int(${segments}) + 1) {
+    at = t1;
+    along = visible + margin;
+    push = margin;
+  } else {
+    float f = float(station - 1) / ${segments};
+    at = mix(ta, tb, f);
+    along = mix(startHead, visible - endHead, f);
+  }
+  vec2 tangent = cubicTangent(a, b, c, d, at);
+  float tangentLength = length(tangent);
+  vec2 dir = tangentLength > 0.0 ? tangent / tangentLength : vec2(1.0, 0.0);
+  vec2 normal = vec2(-dir.y, dir.x);
+  float extent = corner.z < 0.5 ? body
+    : corner.z < 1.5 ? (startHead > 0.0 ? head : body)
+    : (endHead > 0.0 ? head : body);
+  float across = corner.y * extent;
+  vPos = vec2(along, across);
+  vStart = 0.0;
+  vEnd = visible;
+  vHalfWidth = width * 0.5;
+  vArrowLength = arrowLength;
+  vArrowHalf = arrowHalf;
+  vHaloWidth = halo;
+  vDash = packed & 3u;
+  vArrow = arrow;
+  vColor = paletteColor(look.stroke);
+  vOpacity = look.opacity;
+  gl_Position = visible > 0.5 ? toClip(cubicAt(a, b, c, d, at) + dir * push + normal * across) : hidden;
+}
+`;
+const edgeFragment = `${header}
+in vec2 vPos;
+in float vStart;
+in float vEnd;
+in float vHalfWidth;
+in float vArrowLength;
+in float vArrowHalf;
+in float vHaloWidth;
+flat in uint vDash;
+flat in uint vArrow;
+flat in vec4 vColor;
+flat in float vOpacity;
+out vec4 fragColor;
+void main() {
+  float aa = 0.5 / pixelRatio + 0.25;
+  float along = vPos.x;
+  float halfWidth = vHalfWidth;
+  bool head = false;
+  if (vArrowLength > 0.0) {
+    if ((vArrow & 2u) != 0u && along > vEnd - vArrowLength) {
+      halfWidth = vArrowHalf * (vEnd - along) / vArrowLength;
+      head = true;
+    }
+    if ((vArrow & 1u) != 0u && along < vStart + vArrowLength) {
+      halfWidth = vArrowHalf * (along - vStart) / vArrowLength;
+      head = true;
+    }
+  }
+  float span = smoothstep(vStart - aa, vStart + aa, along) * (1.0 - smoothstep(vEnd - aa, vEnd + aa, along));
+  float coverage = (1.0 - smoothstep(halfWidth - aa, halfWidth + aa, abs(vPos.y))) * span;
+  if (!head && vDash != 0u) {
+    float width = vHalfWidth * 2.0;
+    float offset = along - vStart;
+    if (vDash == 1u) {
+      float period = max(width * 5.0, 8.0);
+      float m = mod(offset, period);
+      coverage *= smoothstep(0.0, aa, m) * (1.0 - smoothstep(period * 0.6 - aa, period * 0.6 + aa, m));
+    } else {
+      float period = max(width * 2.5, 4.0);
+      float m = mod(offset, period) - period * 0.5;
+      float radius = max(width * 0.6, 1.0);
+      coverage = (1.0 - smoothstep(radius - aa, radius + aa, length(vec2(m, vPos.y)))) * span;
+    }
+  }
+  float alpha = vColor.a * coverage * vOpacity;
+  vec4 result = vec4(vColor.rgb * alpha, alpha);
+  if (vHaloWidth > 0.0) {
+    float distance = max(abs(vPos.y) - halfWidth, 0.0);
+    float h = haloColor.a * (1.0 - smoothstep(0.0, vHaloWidth, distance)) * span * vOpacity;
+    result += vec4(haloColor.rgb * h, h) * (1.0 - result.a);
+  }
+  if (result.a < 0.002) discard;
+  fragColor = result;
+}
+`;
+const labelVertex = `${header}${nodeData}
+uniform float atlasFontSize;
+in vec2 corner;
+in uint glyphNode;
+in uint glyphKind;
+in vec4 glyphRect;
+in vec4 glyphUv;
+out vec2 vUv;
+out float vScale;
+flat out uint vKind;
+flat out float vOpacity;
+void main() {
+  ivec2 t = texel(glyphNode);
+  vec4 style = texelFetch(nodeStyle, t, 0);
+  uvec4 paint = texelFetch(nodePaint, t, 0);
+  uint flags = uint(style.w + 0.5);
+  uint mask = texelFetch(nodeState, t, 0).r;
+  Look look = resolve(mask, Look(style.z, style.y, 0.0, 1.0, paint.x, paint.y), 0);
+  float primary = (flags & 4u) != 0u ? 12.0 : 12.0 * min(1.0, zoom);
+  if ((flags & 8u) == 0u || look.label < 0.5 || primary < labelMin) {
+    gl_Position = hidden;
+    return;
+  }
+  float size = glyphKind == 0u ? primary : primary * 11.0 / 12.0;
+  float scale = size / atlasFontSize;
+  float below = nodeRadius(style) + 3.0 + (glyphKind == 1u ? primary * 1.25 : 0.0);
+  vec2 anchor = toScreen(texelFetch(nodePosition, t, 0).xy) + vec2(0.0, below);
+  vUv = mix(glyphUv.xy, glyphUv.zw, corner);
+  vScale = scale;
+  vKind = glyphKind;
+  vOpacity = look.opacity;
+  gl_Position = toClip(anchor + (glyphRect.xy + corner * glyphRect.zw) * scale);
+}
+`;
+const labelFragment = `${header}
+uniform sampler2D atlas;
+in vec2 vUv;
+in float vScale;
+flat in uint vKind;
+flat in float vOpacity;
+out vec4 fragColor;
+void main() {
+  float d = texture(atlas, vUv).r;
+  float gamma = 0.08 / max(vScale * pixelRatio, 0.05);
+  float ink = smoothstep(0.75 - gamma, 0.75 + gamma, d);
+  float halo = smoothstep(0.55 - gamma, 0.55 + gamma, d);
+  vec4 inkColor = vKind == 0u ? labelInk : labelMuted;
+  vec3 rgb = mix(labelHalo.rgb, inkColor.rgb, ink);
+  float alpha = max(halo * labelHalo.a, ink * inkColor.a) * vOpacity;
+  if (alpha < 0.002) discard;
+  fragColor = vec4(rgb * alpha, alpha);
+}
+`;
+const cornerNode = new Float32Array([
+	-1,
+	-1,
+	1,
+	-1,
+	-1,
+	1,
+	1,
+	1
+]);
+const cornerEdge = new Float32Array([
+	0,
+	-1,
+	1,
+	0,
+	1,
+	1,
+	1,
+	-1,
+	1,
+	1,
+	1,
+	1,
+	1,
+	-1,
+	0,
+	1,
+	1,
+	0,
+	2,
+	-1,
+	0,
+	2,
+	1,
+	0,
+	2,
+	-1,
+	2,
+	2,
+	1,
+	2,
+	3,
+	-1,
+	2,
+	3,
+	1,
+	2
+]);
+function curveCorners() {
+	const values = [
+		0,
+		-1,
+		1,
+		0,
+		1,
+		1,
+		1,
+		-1,
+		1,
+		1,
+		1,
+		1
+	];
+	for (let station = 1; station <= 25; station++) values.push(station, -1, 0, station, 1, 0);
+	const end = 25;
+	values.push(end, -1, 2, end, 1, 2, 26, -1, 2, 26, 1, 2);
+	return new Float32Array(values);
+}
+const cornerCurve = curveCorners();
+const cornerLabel = new Float32Array([
+	0,
+	0,
+	1,
+	0,
+	0,
+	1,
+	1,
+	1
+]);
+// src/webgl/renderer.ts
+const blocks = {
+	Frame: 0,
+	States: 1
+};
+const paletteWidth = 256;
+const labelInterval = 120;
+const units = {
+	palette: 0,
+	nodePosition: 1,
+	nodeStyle: 2,
+	nodePaint: 3,
+	nodeState: 4,
+	edgeTopology: 5,
+	edgeStyle: 6,
+	edgeState: 7,
+	atlas: 8
+};
+function iota(length) {
+	const values = new Uint32Array(length);
+	for (let index = 0; index < length; index++) values[index] = index;
+	return values;
+}
+function rgba(color) {
+	return color.map((channel) => channel / 255);
+}
+function createWebglRenderer(canvas) {
+	const context = canvas.getContext("webgl2", {
+		alpha: true,
+		antialias: false,
+		premultipliedAlpha: true,
+		preserveDrawingBuffer: false,
+		powerPreference: "high-performance"
+	});
+	if (!context) throw new Error("graph: WebGL2 is not available");
+	const gl = context;
+	const format = formats(gl);
+	const f32 = (length) => new Float32Array(length);
+	const u32 = (length) => new Uint32Array(length);
+	const nodePosition = new DataTexture(gl, format.rg32f, f32);
+	const nodeStyle = new DataTexture(gl, format.rgba32f, f32);
+	const nodePaint = new DataTexture(gl, format.rgba32ui, u32);
+	const nodeState = new DataTexture(gl, format.r32ui, u32);
+	const edgeTopology = new DataTexture(gl, format.rgba32ui, u32);
+	const edgeStyle = new DataTexture(gl, format.rgba32f, f32);
+	const edgeState = new DataTexture(gl, format.r32ui, u32);
+	const nodeTextures = [
+		nodePosition,
+		nodeStyle,
+		nodePaint,
+		nodeState
+	];
+	const edgeTextures = [
+		edgeTopology,
+		edgeStyle,
+		edgeState
+	];
+	const palette = gl.createTexture();
+	let paletteRows = 0;
+	const atlasTexture = gl.createTexture();
+	let atlasGeneration = -1;
+	let atlasRows = 0;
+	for (const texture of [palette, atlasTexture]) {
+		gl.bindTexture(gl.TEXTURE_2D, texture);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+		const filter = texture === atlasTexture ? gl.LINEAR : gl.NEAREST;
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
+	}
+	const frameBlock = /* @__PURE__ */ new Float32Array(24);
+	const frameBuffer = gl.createBuffer();
+	gl.bindBuffer(gl.UNIFORM_BUFFER, frameBuffer);
+	gl.bufferData(gl.UNIFORM_BUFFER, frameBlock.byteLength, gl.DYNAMIC_DRAW);
+	gl.bindBufferBase(gl.UNIFORM_BUFFER, blocks.Frame, frameBuffer);
+	const statesBlock = /* @__PURE__ */ new ArrayBuffer(2048);
+	const statesBuffer = gl.createBuffer();
+	gl.bindBuffer(gl.UNIFORM_BUFFER, statesBuffer);
+	gl.bufferData(gl.UNIFORM_BUFFER, statesBlock.byteLength, gl.DYNAMIC_DRAW);
+	gl.bindBufferBase(gl.UNIFORM_BUFFER, blocks.States, statesBuffer);
+	let tableVersion = -1;
+	let highlightVersion = -1;
+	const nodeProgram = createProgram(gl, nodeVertex, nodeFragment, blocks);
+	const edgeProgram = createProgram(gl, edgeVertex, edgeFragment, blocks);
+	const labelProgram = createProgram(gl, labelVertex, labelFragment, blocks);
+	const programs = [
+		nodeProgram,
+		edgeProgram,
+		labelProgram
+	];
+	const locations = /* @__PURE__ */ new Map();
+	function prepare(program) {
+		gl.useProgram(program);
+		for (const [name, unit] of Object.entries(units)) {
+			const location = gl.getUniformLocation(program, name);
+			if (location) gl.uniform1i(location, unit);
+		}
+		locations.set(program, {
+			layerSlot: gl.getUniformLocation(program, "layerSlot"),
+			overlay: gl.getUniformLocation(program, "overlay")
+		});
+	}
+	for (const program of programs) prepare(program);
+	gl.useProgram(labelProgram);
+	gl.uniform1f(gl.getUniformLocation(labelProgram, "atlasFontSize"), 24);
+	const nodeCorner = createBuffer(gl, cornerNode, gl.STATIC_DRAW);
+	const edgeCorner = createBuffer(gl, cornerEdge, gl.STATIC_DRAW);
+	const curveCorner = createBuffer(gl, cornerCurve, gl.STATIC_DRAW);
+	const labelCorner = createBuffer(gl, cornerLabel, gl.STATIC_DRAW);
+	const nodeIndices = createBuffer(gl, /* @__PURE__ */ new Uint32Array(0), gl.STATIC_DRAW);
+	const edgeIndices = createBuffer(gl, /* @__PURE__ */ new Uint32Array(0), gl.STATIC_DRAW);
+	const nodeOverlayIndices = createBuffer(gl, /* @__PURE__ */ new Uint32Array(0), gl.DYNAMIC_DRAW);
+	const edgeOverlayIndices = createBuffer(gl, /* @__PURE__ */ new Uint32Array(0), gl.DYNAMIC_DRAW);
+	const curveIndices = createBuffer(gl, /* @__PURE__ */ new Uint32Array(0), gl.DYNAMIC_DRAW);
+	const labelMainBuffer = createBuffer(gl, /* @__PURE__ */ new Uint8Array(0), gl.DYNAMIC_DRAW);
+	const labelHighlightBuffer = createBuffer(gl, /* @__PURE__ */ new Uint8Array(0), gl.DYNAMIC_DRAW);
+	const warmIndex = createBuffer(gl, /* @__PURE__ */ new Uint32Array(1), gl.STATIC_DRAW);
+	const warmGlyph = createBuffer(gl, /* @__PURE__ */ new Uint8Array(32), gl.STATIC_DRAW);
+	const buffers = [
+		nodeCorner,
+		edgeCorner,
+		curveCorner,
+		labelCorner,
+		nodeIndices,
+		edgeIndices,
+		nodeOverlayIndices,
+		edgeOverlayIndices,
+		curveIndices,
+		labelMainBuffer,
+		labelHighlightBuffer,
+		warmIndex,
+		warmGlyph
+	];
+	const corner = (buffer, size = 2) => ({
+		name: "corner",
+		buffer,
+		size,
+		type: gl.FLOAT,
+		divisor: 0
+	});
+	const instance = (buffer) => ({
+		name: "instance",
+		buffer,
+		size: 1,
+		type: gl.UNSIGNED_INT,
+		integer: true,
+		divisor: 1
+	});
+	const glyphs = (buffer) => [
+		corner(labelCorner),
+		{
+			name: "glyphNode",
+			buffer,
+			size: 1,
+			type: gl.UNSIGNED_INT,
+			integer: true,
+			divisor: 1,
+			stride: 32,
+			offset: 0
+		},
+		{
+			name: "glyphKind",
+			buffer,
+			size: 1,
+			type: gl.UNSIGNED_INT,
+			integer: true,
+			divisor: 1,
+			stride: 32,
+			offset: 4
+		},
+		{
+			name: "glyphRect",
+			buffer,
+			size: 4,
+			type: gl.FLOAT,
+			divisor: 1,
+			stride: 32,
+			offset: 8
+		},
+		{
+			name: "glyphUv",
+			buffer,
+			size: 4,
+			type: gl.UNSIGNED_SHORT,
+			normalized: true,
+			divisor: 1,
+			stride: 32,
+			offset: 24
+		}
+	];
+	const vertexArrays = {
+		nodes: createVertexArray(gl, nodeProgram, [corner(nodeCorner), instance(nodeIndices)]),
+		nodeOverlay: createVertexArray(gl, nodeProgram, [corner(nodeCorner), instance(nodeOverlayIndices)]),
+		edges: createVertexArray(gl, edgeProgram, [corner(edgeCorner, 3), instance(edgeIndices)]),
+		edgeOverlay: createVertexArray(gl, edgeProgram, [corner(edgeCorner, 3), instance(edgeOverlayIndices)]),
+		labels: createVertexArray(gl, labelProgram, glyphs(labelMainBuffer)),
+		labelHighlight: createVertexArray(gl, labelProgram, glyphs(labelHighlightBuffer))
+	};
+	const vertexCounts = /* @__PURE__ */ new Map([
+		[nodeProgram, cornerNode.length / 2],
+		[edgeProgram, cornerEdge.length / 3],
+		[labelProgram, cornerLabel.length / 2]
+	]);
+	let warmed = false;
+	let curvePass = null;
+	function curves() {
+		if (curvePass) return curvePass;
+		const program = createProgram(gl, curveVertex, edgeFragment, blocks);
+		prepare(program);
+		programs.push(program);
+		vertexCounts.set(program, cornerCurve.length / 3);
+		curvePass = {
+			program,
+			main: createVertexArray(gl, program, [corner(curveCorner, 3), instance(curveIndices)]),
+			overlay: createVertexArray(gl, program, [corner(curveCorner, 3), instance(edgeOverlayIndices)])
+		};
+		return curvePass;
+	}
+	let nodeCapacity = 0;
+	let edgeCapacity = 0;
+	let nodeOverlayCount = 0;
+	let edgeOverlayCount = 0;
+	const curved = /* @__PURE__ */ new Set();
+	let curvedChanged = false;
+	let input = null;
+	const atlas = new GlyphAtlas("system-ui, sans-serif");
+	const labels = new LabelLayer();
+	let labelOrder = /* @__PURE__ */ new Uint32Array(0);
+	let labelOrderLength = 0;
+	let screenLabels = false;
+	let labelsStale = true;
+	let labelsMoved = false;
+	let orderStale = true;
+	let lastLabelTime = Number.NEGATIVE_INFINITY;
+	let lastLabelView = "";
+	function packNode(nodes, index) {
+		const at = index * 4;
+		const flags = (nodes.shape[index] ?? 0) | (nodes.screenUnits[index] ?? 0) << 2 | (nodes.alive[index] ?? 0) << 3;
+		nodeStyle.data[at] = nodes.size[index] ?? 0;
+		nodeStyle.data[at + 1] = nodes.strokeWidth[index] ?? 0;
+		nodeStyle.data[at + 2] = nodes.opacity[index] ?? 1;
+		nodeStyle.data[at + 3] = flags;
+		nodePaint.data[at] = nodes.fill[index] ?? 0;
+		nodePaint.data[at + 1] = nodes.stroke[index] ?? 0;
+		nodePaint.data[at + 2] = nodes.slot[index] ?? 0;
+	}
+	function packEdge(edges, index) {
+		const at = index * 4;
+		edgeTopology.data[at] = edges.source[index] ?? 0;
+		edgeTopology.data[at + 1] = edges.target[index] ?? 0;
+		edgeTopology.data[at + 2] = edges.color[index] ?? 0;
+		edgeTopology.data[at + 3] = (edges.dash[index] ?? 0) | (edges.arrow[index] ?? 0) << 2 | (edges.alive[index] ?? 0) << 4 | (edges.slot[index] ?? 0) << 5;
+		edgeStyle.data[at] = edges.width[index] ?? 0;
+		edgeStyle.data[at + 1] = edges.opacity[index] ?? 1;
+		const bend = edges.bend[index] ?? 0;
+		edgeStyle.data[at + 2] = bend;
+		const isCurved = edges.alive[index] === 1 && (bend !== 0 || edges.source[index] === edges.target[index]);
+		if (isCurved !== curved.has(index)) {
+			if (isCurved) curved.add(index);
+			else curved.delete(index);
+			curvedChanged = true;
+		}
+	}
+	function syncNodes(next) {
+		const nodes = next.scene.nodes;
+		const grown = nodeTextures.map((texture) => texture.reserve(nodes.capacity)).some(Boolean);
+		if (nodes.capacity > nodeCapacity) {
+			nodeCapacity = nodes.capacity;
+			gl.bindBuffer(gl.ARRAY_BUFFER, nodeIndices);
+			gl.bufferData(gl.ARRAY_BUFFER, iota(nodeCapacity), gl.STATIC_DRAW);
+		}
+		let first = Number.POSITIVE_INFINITY;
+		let last = -1;
+		if (next.full || grown) {
+			for (let index = 0; index < nodes.capacity; index++) packNode(nodes, index);
+			first = 0;
+			last = nodes.capacity - 1;
+		} else for (const index of next.dirty.nodes) {
+			packNode(nodes, index);
+			first = Math.min(first, index);
+			last = Math.max(last, index);
+		}
+		nodeStyle.upload(first, last);
+		nodePaint.upload(first, last);
+		if (next.positionsChanged || next.full || grown) {
+			const xy = next.positions.xy;
+			nodePosition.data.set(xy.subarray(0, Math.min(xy.length, nodePosition.data.length)));
+			nodePosition.upload(0, nodeCapacity - 1);
+		}
+		const states = next.states;
+		const range = states.nodeDirty.take();
+		if (next.full || grown) {
+			nodeState.data.set(states.nodeMask.subarray(0, Math.min(states.nodeMask.length, nodeState.data.length)));
+			nodeState.upload(0, nodeCapacity - 1);
+		} else if (range) {
+			nodeState.data.set(states.nodeMask.subarray(range[0], range[1] + 1), range[0]);
+			nodeState.upload(range[0], range[1]);
+		}
+		if (next.dirty.nodes.size > 0 || next.full) orderStale = true;
+	}
+	function syncEdges(next) {
+		const edges = next.scene.edges;
+		const grown = edgeTextures.map((texture) => texture.reserve(edges.capacity)).some(Boolean);
+		if (edges.capacity > edgeCapacity) {
+			edgeCapacity = edges.capacity;
+			gl.bindBuffer(gl.ARRAY_BUFFER, edgeIndices);
+			gl.bufferData(gl.ARRAY_BUFFER, iota(edgeCapacity), gl.STATIC_DRAW);
+		}
+		let first = Number.POSITIVE_INFINITY;
+		let last = -1;
+		if (next.full || grown) {
+			for (let index = 0; index < edges.capacity; index++) packEdge(edges, index);
+			first = 0;
+			last = edges.capacity - 1;
+		} else for (const index of next.dirty.edges) {
+			packEdge(edges, index);
+			first = Math.min(first, index);
+			last = Math.max(last, index);
+		}
+		edgeTopology.upload(first, last);
+		edgeStyle.upload(first, last);
+		if (curvedChanged) {
+			curvedChanged = false;
+			gl.bindBuffer(gl.ARRAY_BUFFER, curveIndices);
+			gl.bufferData(gl.ARRAY_BUFFER, Uint32Array.from(curved), gl.DYNAMIC_DRAW);
+		}
+		const states = next.states;
+		const range = states.edgeDirty.take();
+		if (next.full || grown) {
+			edgeState.data.set(states.edgeMask.subarray(0, Math.min(states.edgeMask.length, edgeState.data.length)));
+			edgeState.upload(0, edgeCapacity - 1);
+		} else if (range) {
+			edgeState.data.set(states.edgeMask.subarray(range[0], range[1] + 1), range[0]);
+			edgeState.upload(range[0], range[1]);
+		}
+	}
+	function syncStates(next) {
+		const states = next.states;
+		if (states.tableVersion !== tableVersion || next.full) {
+			tableVersion = states.tableVersion;
+			new Float32Array(statesBlock, 0, 256).set(states.numbers);
+			new Uint32Array(statesBlock, 1024, 256).set(states.paint);
+			gl.bindBuffer(gl.UNIFORM_BUFFER, statesBuffer);
+			gl.bufferSubData(gl.UNIFORM_BUFFER, 0, statesBlock);
+			labelsStale = true;
+		}
+		if (states.highlightVersion !== highlightVersion || next.full) {
+			highlightVersion = states.highlightVersion;
+			nodeOverlayCount = states.highlightedNodes.length;
+			edgeOverlayCount = states.highlightedEdges.length;
+			gl.bindBuffer(gl.ARRAY_BUFFER, nodeOverlayIndices);
+			gl.bufferData(gl.ARRAY_BUFFER, Uint32Array.from(states.highlightedNodes), gl.DYNAMIC_DRAW);
+			gl.bindBuffer(gl.ARRAY_BUFFER, edgeOverlayIndices);
+			gl.bufferData(gl.ARRAY_BUFFER, Uint32Array.from(states.highlightedEdges), gl.DYNAMIC_DRAW);
+			labelsStale = true;
+		}
+	}
+	function syncAtlas() {
+		if (atlas.generation !== atlasGeneration || atlas.height !== atlasRows) {
+			atlasGeneration = atlas.generation;
+			atlasRows = atlas.height;
+			atlas.takeDirty();
+			gl.bindTexture(gl.TEXTURE_2D, atlasTexture);
+			gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+			gl.texImage2D(gl.TEXTURE_2D, 0, gl.R8, atlasWidth, atlas.height, 0, gl.RED, gl.UNSIGNED_BYTE, atlas.pixels);
+			return;
+		}
+		const range = atlas.takeDirty();
+		if (!range) return;
+		gl.bindTexture(gl.TEXTURE_2D, atlasTexture);
+		gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+		gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, range[0], atlasWidth, range[1] - range[0] + 1, gl.RED, gl.UNSIGNED_BYTE, atlas.pixels.subarray(range[0] * atlasWidth, (range[1] + 1) * atlasWidth));
+	}
+	function selectLabels(frame, now) {
+		if (!input) return -1;
+		const key = `${frame.view.x},${frame.view.y},${frame.view.zoom},${frame.width},${frame.height}`;
+		if (!labelsStale && !labelsMoved && key === lastLabelView) return -1;
+		const wait = labelInterval - (now - lastLabelTime);
+		if (!labelsStale && wait > 0) return wait;
+		const nodes = input.scene.nodes;
+		if (orderStale) {
+			if (labelOrder.length < nodes.capacity) labelOrder = new Uint32Array(nodes.capacity);
+			const sorted = sortBySize(nodes, labelOrder);
+			labelOrderLength = sorted.length;
+			screenLabels = sorted.screenLabels;
+			orderStale = false;
+		}
+		const generation = atlas.generation;
+		labels.select({
+			nodes,
+			positions: input.positions,
+			view: frame.view,
+			width: frame.width,
+			height: frame.height,
+			nodeMask: input.states.nodeMask,
+			labelFlags: input.states.labelFlags,
+			highlighted: input.states.highlightedNodes,
+			order: labelOrder,
+			orderLength: labelOrderLength,
+			screenLabels
+		}, atlas);
+		if (atlas.generation !== generation) return selectLabels(frame, now);
+		syncAtlas();
+		gl.bindBuffer(gl.ARRAY_BUFFER, labelMainBuffer);
+		gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(labels.main.data, 0, labels.main.count * 32), gl.DYNAMIC_DRAW);
+		gl.bindBuffer(gl.ARRAY_BUFFER, labelHighlightBuffer);
+		gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(labels.highlight.data, 0, labels.highlight.count * 32), gl.DYNAMIC_DRAW);
+		labelsStale = false;
+		labelsMoved = false;
+		lastLabelTime = now;
+		lastLabelView = key;
+		return -1;
+	}
+	function draw(program, vao, count, slot, overlay) {
+		if (count === 0) return;
+		const location = locations.get(program);
+		gl.useProgram(program);
+		gl.uniform1i(location?.layerSlot ?? null, slot);
+		gl.uniform1i(location?.overlay ?? null, overlay);
+		gl.bindVertexArray(vao);
+		gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, vertexCounts.get(program) ?? 4, count);
+	}
+	function warm() {
+		const passes = [
+			[nodeProgram, [corner(nodeCorner), instance(warmIndex)]],
+			[edgeProgram, [corner(edgeCorner, 3), instance(warmIndex)]],
+			[labelProgram, glyphs(warmGlyph)]
+		];
+		gl.enable(gl.SCISSOR_TEST);
+		gl.scissor(0, 0, 0, 0);
+		for (const [program, attributes] of passes) {
+			const vao = createVertexArray(gl, program, attributes);
+			draw(program, vao, 1, 0, 0);
+			gl.bindVertexArray(null);
+			gl.deleteVertexArray(vao);
+		}
+		gl.disable(gl.SCISSOR_TEST);
+		warmed = true;
+	}
+	return {
+		sync(next) {
+			input = next;
+			syncNodes(next);
+			syncEdges(next);
+			syncStates(next);
+			if (next.dirty.nodes.size > 0 || next.full) labelsStale = true;
+			if (next.positionsChanged) labelsMoved = true;
+		},
+		setPalette(colors, count) {
+			const rows = Math.max(1, Math.ceil(count / paletteWidth));
+			const data = new Uint8Array(rows * paletteWidth * 4);
+			data.set(colors.subarray(0, Math.min(colors.length, data.length)));
+			gl.bindTexture(gl.TEXTURE_2D, palette);
+			gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+			if (rows !== paletteRows) {
+				paletteRows = rows;
+				gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, paletteWidth, rows, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
+			} else gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, paletteWidth, rows, gl.RGBA, gl.UNSIGNED_BYTE, data);
+		},
+		setTheme(theme) {
+			frameBlock.set(rgba(theme.halo), 8);
+			frameBlock.set(rgba(theme.labelInk), 12);
+			frameBlock.set(rgba(theme.labelMuted), 16);
+			frameBlock.set(rgba(theme.labelHalo), 20);
+			if (atlas.setFont(theme.font)) labelsStale = true;
+		},
+		render(frame) {
+			const width = gl.drawingBufferWidth;
+			const height = gl.drawingBufferHeight;
+			frameBlock[0] = frame.view.x;
+			frameBlock[1] = frame.view.y;
+			frameBlock[2] = frame.width;
+			frameBlock[3] = frame.height;
+			frameBlock[4] = frame.view.zoom;
+			frameBlock[5] = frame.pixelRatio;
+			frameBlock[6] = 6;
+			frameBlock[7] = 8;
+			gl.bindBuffer(gl.UNIFORM_BUFFER, frameBuffer);
+			gl.bufferSubData(gl.UNIFORM_BUFFER, 0, frameBlock);
+			const wait = selectLabels(frame, performance.now());
+			gl.viewport(0, 0, width, height);
+			gl.clearColor(0, 0, 0, 0);
+			gl.clear(gl.COLOR_BUFFER_BIT);
+			gl.enable(gl.BLEND);
+			gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+			bind();
+			if (!warmed) warm();
+			for (const layer of input?.scene.layers ?? []) if (layer.kind === "edges") {
+				draw(edgeProgram, vertexArrays.edges, edgeCapacity, layer.slot, 0);
+				if (curved.size > 0) {
+					const pass = curves();
+					draw(pass.program, pass.main, curved.size, layer.slot, 0);
+				}
+			} else draw(nodeProgram, vertexArrays.nodes, nodeCapacity, layer.slot, 0);
+			draw(labelProgram, vertexArrays.labels, labels.main.count, 0, 0);
+			draw(edgeProgram, vertexArrays.edgeOverlay, edgeOverlayCount, 0, 1);
+			if (curvePass && curved.size > 0) draw(curvePass.program, curvePass.overlay, edgeOverlayCount, 0, 1);
+			draw(nodeProgram, vertexArrays.nodeOverlay, nodeOverlayCount, 0, 1);
+			draw(labelProgram, vertexArrays.labelHighlight, labels.highlight.count, 0, 1);
+			gl.bindVertexArray(null);
+			return wait;
+		},
+		destroy() {
+			for (const texture of [...nodeTextures, ...edgeTextures]) texture.destroy();
+			gl.deleteTexture(palette);
+			gl.deleteTexture(atlasTexture);
+			for (const buffer of [
+				...buffers,
+				frameBuffer,
+				statesBuffer
+			]) gl.deleteBuffer(buffer);
+			for (const vao of Object.values(vertexArrays)) gl.deleteVertexArray(vao);
+			if (curvePass) {
+				gl.deleteVertexArray(curvePass.main);
+				gl.deleteVertexArray(curvePass.overlay);
+			}
+			for (const program of programs) gl.deleteProgram(program);
+			gl.getExtension("WEBGL_lose_context")?.loseContext();
+		}
+	};
+	function bind() {
+		const textures = [
+			[units.palette, palette],
+			[units.nodePosition, nodePosition.texture],
+			[units.nodeStyle, nodeStyle.texture],
+			[units.nodePaint, nodePaint.texture],
+			[units.nodeState, nodeState.texture],
+			[units.edgeTopology, edgeTopology.texture],
+			[units.edgeStyle, edgeStyle.texture],
+			[units.edgeState, edgeState.texture],
+			[units.atlas, atlasTexture]
+		];
+		for (const [unit, texture] of textures) {
+			gl.activeTexture(gl.TEXTURE0 + unit);
+			gl.bindTexture(gl.TEXTURE_2D, texture);
+		}
+	}
+}
+// src/host/events.ts
+var Emitter = class {
+	#handlers = /* @__PURE__ */ new Map();
+	on(name, handler) {
+		let set = this.#handlers.get(name);
+		if (!set) {
+			set = /* @__PURE__ */ new Set();
+			this.#handlers.set(name, set);
+		}
+		const entry = handler;
+		set.add(entry);
+		return () => {
+			set.delete(entry);
+		};
+	}
+	has(name) {
+		return (this.#handlers.get(name)?.size ?? 0) > 0;
+	}
+	emit(name, event) {
+		const set = this.#handlers.get(name);
+		if (!set) return;
+		for (const handler of [...set]) handler(event);
+	}
+	clear() {
+		this.#handlers.clear();
+	}
+};
+// src/host/state-registry.ts
+const highlightBits = 3;
+const kinds = ["nodes", "edges"];
+function members() {
+	return {
+		nodes: /* @__PURE__ */ new Set(),
+		edges: /* @__PURE__ */ new Set()
+	};
+}
+var StateRegistry = class {
+	#model;
+	#buffers;
+	#members = /* @__PURE__ */ new Map();
+	#names = builtInStates;
+	#highlightDirty = true;
+	constructor(model, buffers) {
+		this.#model = model;
+		this.#buffers = buffers;
+		for (const name of builtInStates) this.#members.set(name, members());
+	}
+	get names() {
+		return this.#names;
+	}
+	define(free) {
+		const names = [...builtInStates, ...free];
+		if (names.length === this.#names.length && names.every((name, i) => name === this.#names[i])) return false;
+		for (const name of this.#members.keys()) if (!names.includes(name)) this.#members.delete(name);
+		for (const name of names) if (!this.#members.has(name)) this.#members.set(name, members());
+		this.#names = names;
+		this.#rebuild();
+		return true;
+	}
+	bit(name) {
+		return this.#names.indexOf(name);
+	}
+	members(name) {
+		const entry = this.#entry(name);
+		return {
+			nodes: [...entry.nodes],
+			edges: [...entry.edges]
+		};
+	}
+	has(name, kind, key) {
+		return this.#members.get(name)?.[kind].has(key) ?? false;
+	}
+	set(name, input) {
+		const entry = this.#entry(name);
+		let changed = false;
+		for (const kind of kinds) {
+			const next = new Set(input[kind] ?? []);
+			for (const key of [...entry[kind]]) if (!next.has(key)) changed = this.#toggle(name, kind, key, false) || changed;
+			for (const key of next) changed = this.#toggle(name, kind, key, true) || changed;
+		}
+		return changed;
+	}
+	add(name, input) {
+		this.#entry(name);
+		let changed = false;
+		for (const kind of kinds) for (const key of input[kind] ?? []) changed = this.#toggle(name, kind, key, true) || changed;
+		return changed;
+	}
+	remove(name, input) {
+		this.#entry(name);
+		let changed = false;
+		for (const kind of kinds) for (const key of input[kind] ?? []) changed = this.#toggle(name, kind, key, false) || changed;
+		return changed;
+	}
+	clear(name) {
+		return this.set(name, {});
+	}
+	apply(changes) {
+		let selection = false;
+		let hovered = false;
+		const forget = (kind, removed) => {
+			for (const { key, index } of removed) {
+				this.#setMask(kind, index, 0);
+				for (const name of builtInStates) {
+					if (!this.#members.get(name)?.[kind].delete(key)) continue;
+					if (name === "selected") selection = true;
+					if (name === "hovered") hovered = true;
+				}
+			}
+		};
+		const learn = (kind, added) => {
+			for (const { key, index } of added) this.#setMask(kind, index, this.#maskOf(kind, key));
+		};
+		forget("nodes", changes.nodes.removed);
+		forget("edges", changes.edges.removed);
+		learn("nodes", changes.nodes.added);
+		learn("edges", changes.edges.added);
+		return {
+			selection,
+			hovered
+		};
+	}
+	takeHighlighted() {
+		if (!this.#highlightDirty) return;
+		this.#highlightDirty = false;
+		const indices = (kind) => {
+			const found = /* @__PURE__ */ new Set();
+			for (const name of ["selected", "hovered"]) for (const key of this.#members.get(name)?.[kind] ?? []) {
+				const index = this.#index(kind, key);
+				if (index >= 0) found.add(index);
+			}
+			return [...found];
+		};
+		this.#buffers.setHighlighted(indices("nodes"), indices("edges"));
+	}
+	#entry(name) {
+		const entry = this.#members.get(name);
+		if (!entry) throw new Error(`graph: unknown state "${name}"`);
+		return entry;
+	}
+	#toggle(name, kind, key, on) {
+		const set = this.#entry(name)[kind];
+		if (set.has(key) === on) return false;
+		if (on) set.add(key);
+		else set.delete(key);
+		const index = this.#index(kind, key);
+		if (index >= 0) this.#setMask(kind, index, this.#maskOf(kind, key));
+		return true;
+	}
+	#index(kind, key) {
+		return (kind === "nodes" ? this.#model.node(key) : this.#model.edge(key))?.index ?? -1;
+	}
+	#maskOf(kind, key) {
+		let mask = 0;
+		this.#names.forEach((name, bit) => {
+			if (this.#members.get(name)?.[kind].has(key)) mask |= 1 << bit;
+		});
+		return mask >>> 0;
+	}
+	#setMask(kind, index, mask) {
+		if (((((kind === "nodes" ? this.#buffers.nodeMask : this.#buffers.edgeMask)[index] ?? 0) ^ mask) & highlightBits) !== 0) this.#highlightDirty = true;
+		if (kind === "nodes") this.#buffers.setNode(index, mask);
+		else this.#buffers.setEdge(index, mask);
+	}
+	#rebuild() {
+		for (const kind of kinds) {
+			const records = kind === "nodes" ? this.#model.nodes() : this.#model.edges();
+			for (const record of records) this.#setMask(kind, record.index, this.#maskOf(kind, record.key));
+		}
+	}
+};
+// src/host/mount-graph.ts
+const defaultPadding = 32;
+const clickSlop = 4;
+const pickTolerance = 4;
+const highlightOrder = 2 ** 40;
+const layerOrder = 2 ** 26;
+const kindOf = {
+	node: "nodes",
+	edge: "edges"
+};
+const noKeys = Object.freeze({
+	nodes: [],
+	edges: []
+});
+let reducedMotionQuery;
+function reducedMotion() {
+	reducedMotionQuery ??= window.matchMedia?.("(prefers-reduced-motion: reduce)");
+	return reducedMotionQuery?.matches ?? false;
+}
+function toKeys(input) {
+	return {
+		nodes: [...input.nodes ?? []],
+		edges: [...input.edges ?? []]
+	};
+}
+function sameList(a, b) {
+	if (a.length !== b.length) return false;
+	const set = new Set(a);
+	return b.every((key) => set.has(key));
+}
+function sameKeys(a, b) {
+	return sameList(a.nodes, b.nodes) && sameList(a.edges, b.edges);
+}
+function sameTarget(a, b) {
+	return a === b || a !== null && b !== null && a.kind === b.kind && a.key === b.key;
+}
+function resolveStyle(style, id) {
+	return {
+		...style.opacity !== void 0 ? { opacity: style.opacity } : {},
+		...style.strokeWidth !== void 0 ? { strokeWidth: style.strokeWidth } : {},
+		...style.halo !== void 0 ? { halo: style.halo } : {},
+		...style.label !== void 0 ? { label: style.label } : {},
+		...style.fill !== void 0 ? { fill: id(style.fill) } : {},
+		...style.stroke !== void 0 ? { stroke: id(style.stroke) } : {}
+	};
+}
+function createGraphHost(container, options, createRenderer) {
+	let definition = options.definition;
+	const controlled = options.selection !== void 0;
+	let onSelectionChange = options.onSelectionChange;
+	let warnedEmpty = false;
+	const element = document.createElement("div");
+	element.setAttribute("data-graph", "");
+	element.setAttribute("role", "img");
+	element.setAttribute("aria-label", options.ariaLabel);
+	element.style.cssText = "position:relative;width:100%;height:100%;overflow:hidden";
+	const canvas = document.createElement("canvas");
+	canvas.style.cssText = "position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none";
+	element.append(canvas);
+	container.append(element);
+	let frameRequest = 0;
+	let laterRequest;
+	let needsFlush = false;
+	let full = true;
+	let destroyed = false;
+	let contextLost = false;
+	let positionsVersion = -1;
+	let paletteCount = 0;
+	let paletteColors = /* @__PURE__ */ new Uint8Array(1024);
+	let viewAnimation = null;
+	let positionAnimations = [];
+	let animationOwner = /* @__PURE__ */ new Uint32Array(0);
+	let animationSerial = 0;
+	let pendingFit = options.initialView ? null : { padding: defaultPadding };
+	let pixelRatio = window.devicePixelRatio || 1;
+	let sceneVersion = 0;
+	let pickedScene = -1;
+	let pickedPositions = -1;
+	let gesture = null;
+	const model = createGraphModel({ schedule: () => request(true) });
+	const scene = createScene();
+	const positions = new Positions();
+	const buffers = new StateBuffers();
+	const registry = new StateRegistry(model, buffers);
+	const emitter = new Emitter();
+	const pickIndex = new PickIndex();
+	const themeResolver = new ThemeResolver(element);
+	let renderer = createRenderer(canvas);
+	registry.define(freeStateNames(definition.states));
+	if (options.selection !== void 0) registry.set("selected", options.selection);
+	const store = createStore({
+		view: options.initialView ?? {
+			x: 0,
+			y: 0,
+			zoom: 1
+		},
+		width: 0,
+		height: 0,
+		hovered: null,
+		selection: controlled ? registry.members("selected") : noKeys,
+		states: freeStates(),
+		positionsVersion: 0
+	});
+	const readonlyStore = createStore(() => store.state);
+	const layerPositions = {
+		nodes: /* @__PURE__ */ new Map(),
+		edges: /* @__PURE__ */ new Map()
+	};
+	const pickSource = {
+		nodes: scene.nodes,
+		edges: scene.edges,
+		positions,
+		order: (kind, index) => {
+			const slot = (kind === "nodes" ? scene.nodes.slot[index] : scene.edges.slot[index]) ?? 0;
+			const mask = (kind === "nodes" ? buffers.nodeMask[index] : buffers.edgeMask[index]) ?? 0;
+			const layer = layerPositions[kind].get(slot) ?? 0;
+			return ((mask & 3) !== 0 ? highlightOrder : 0) + layer * layerOrder + index;
+		}
+	};
+	function freeStates() {
+		return Object.fromEntries(freeStateNames(definition.states).map((name) => [name, registry.members(name)]));
+	}
+	function patch(next) {
+		store.setState((state) => ({
+			...state,
+			...next
+		}));
+	}
+	function request(flush = false) {
+		if (flush) needsFlush = true;
+		if (frameRequest !== 0 || destroyed) return;
+		frameRequest = requestAnimationFrame(frame);
+	}
+	function requestLater(delay) {
+		if (laterRequest !== void 0 || destroyed) return;
+		laterRequest = setTimeout(() => {
+			laterRequest = void 0;
+			request();
+		}, delay);
+	}
+	function commitView(view) {
+		patch({ view });
+		emitter.emit("viewchange", { view });
+		request();
+	}
+	function viewport() {
+		const { width, height } = store.get();
+		return {
+			width,
+			height
+		};
+	}
+	function resolvePalette(from) {
+		const colors = scene.palette.colors;
+		if (colors.length * 4 > paletteColors.length) {
+			const next = new Uint8Array(Math.max(colors.length * 4, paletteColors.length * 2));
+			next.set(paletteColors);
+			paletteColors = next;
+		}
+		themeResolver.palette(colors, paletteColors, from);
+		paletteCount = colors.length;
+		renderer.setPalette(paletteColors, paletteCount);
+	}
+	function refreshTheme() {
+		renderer.setTheme(themeResolver.theme());
+		resolvePalette(0);
+		request();
+	}
+	function applyStyles() {
+		const id = (color) => scene.palette.id(color);
+		for (const kind of ["nodes", "edges"]) {
+			registry.names.forEach((name, bit) => {
+				const own = definition.states[name];
+				const style = isBuiltInState(name) ? {
+					...builtInStyles[kind][name],
+					...own
+				} : own;
+				buffers.setStyle(kind, bit, style ? resolveStyle(style, id) : null);
+			});
+			for (let bit = registry.names.length; bit < 32; bit++) buffers.setStyle(kind, bit, null);
+		}
+	}
+	function applyLayers() {
+		layerPositions.nodes.clear();
+		layerPositions.edges.clear();
+		scene.layers.forEach((layer, position) => {
+			layerPositions[layer.kind].set(layer.slot, position);
+		});
+	}
+	function bounds(keys) {
+		const nodes = scene.nodes;
+		let minX = Number.POSITIVE_INFINITY;
+		let minY = Number.POSITIVE_INFINITY;
+		let maxX = Number.NEGATIVE_INFINITY;
+		let maxY = Number.NEGATIVE_INFINITY;
+		const include = (index) => {
+			if (nodes.alive[index] !== 1) return;
+			const radius = nodes.screenUnits[index] === 1 ? 0 : (nodes.size[index] ?? 0) / 2;
+			minX = Math.min(minX, positions.x(index) - radius);
+			minY = Math.min(minY, positions.y(index) - radius);
+			maxX = Math.max(maxX, positions.x(index) + radius);
+			maxY = Math.max(maxY, positions.y(index) + radius);
+		};
+		if (keys) for (const key of keys) {
+			const record = model.node(key);
+			if (record) include(record.index);
+		}
+		else for (let index = 0; index < nodes.capacity; index++) include(index);
+		return maxX < minX ? null : {
+			minX,
+			minY,
+			maxX,
+			maxY
+		};
+	}
+	function animateTo(target, duration = 0) {
+		const ms = reducedMotion() ? 0 : duration;
+		if (ms <= 0) {
+			viewAnimation = null;
+			commitView(target);
+			return;
+		}
+		viewAnimation = {
+			from: store.get().view,
+			to: target,
+			start: performance.now(),
+			duration: ms
+		};
+		request();
+	}
+	function fitTo(keys, fitOptions) {
+		const box = bounds(keys);
+		const size = viewport();
+		if (!box || size.width === 0 || size.height === 0) return false;
+		animateTo(fitBounds(box, size, fitOptions.padding ?? defaultPadding), fitOptions.duration);
+		return true;
+	}
+	function target(kind, key) {
+		const record = kind === "node" ? model.node(key) : model.edge(key);
+		return record ? {
+			kind,
+			key,
+			datum: record.datum
+		} : null;
+	}
+	function pickAt(point) {
+		if (!gesture?.drag && (pickedScene !== sceneVersion || pickedPositions !== positions.version)) {
+			pickIndex.build(pickSource);
+			pickedScene = sceneVersion;
+			pickedPositions = positions.version;
+		}
+		const world = toWorld(store.get().view, viewport(), point);
+		const hit = pickIndex.pick(pickSource, world.x, world.y, store.get().view.zoom, pickTolerance);
+		if (!hit) return null;
+		const key = hit.kind === "node" ? scene.nodes.keys[hit.index] : scene.edges.keys[hit.index];
+		return key === void 0 ? null : target(hit.kind, key);
+	}
+	function publishSelection() {
+		const selection = registry.members("selected");
+		patch({ selection });
+		emitter.emit("selectionchange", selection);
+		request();
+	}
+	function requestSelection(next) {
+		if (controlled) {
+			if (!sameKeys(registry.members("selected"), next)) onSelectionChange?.(next);
+		} else if (registry.set("selected", next)) publishSelection();
+	}
+	function publishState(name) {
+		patch({ states: {
+			...store.get().states,
+			[name]: registry.members(name)
+		} });
+		request();
+	}
+	function setHovered(next, event) {
+		const current = store.get().hovered;
+		if (sameTarget(current, next)) return;
+		registry.set("hovered", next ? { [kindOf[next.kind]]: [next.key] } : {});
+		patch({ hovered: next });
+		if (current && event) emitter.emit("pointerleave", {
+			target: current,
+			originalEvent: event
+		});
+		if (next && event) emitter.emit("pointerenter", {
+			target: next,
+			originalEvent: event
+		});
+		updateCursor();
+		request();
+	}
+	function updateCursor() {
+		const interactive = definition.interaction.select !== false || definition.interaction.drag;
+		if (gesture?.moved) canvas.style.cursor = "grabbing";
+		else if (store.get().hovered && interactive) canvas.style.cursor = "pointer";
+		else canvas.style.cursor = "";
+	}
+	function selectOnClick(clicked, event) {
+		const mode = definition.interaction.select;
+		if (mode === false) return;
+		const additive = mode === "multiple" && (event.shiftKey || event.metaKey || event.ctrlKey);
+		if (!clicked) {
+			if (!additive) requestSelection(noKeys);
+			return;
+		}
+		const kind = kindOf[clicked.kind];
+		const current = registry.members("selected");
+		if (!additive) requestSelection({
+			...noKeys,
+			[kind]: [clicked.key]
+		});
+		else if (registry.has("selected", kind, clicked.key)) requestSelection({
+			...current,
+			[kind]: current[kind].filter((key) => key !== clicked.key)
+		});
+		else requestSelection({
+			...current,
+			[kind]: [...current[kind], clicked.key]
+		});
+	}
+	function applyChanges(changes) {
+		scene.apply(model, changes);
+		followPositions(placeNodes(model, positions, changes));
+		buffers.reserve(scene.nodes.capacity, scene.edges.capacity);
+		const result = registry.apply(changes);
+		sceneVersion++;
+		applyLayers();
+		if (result.selection) {
+			publishSelection();
+			if (controlled) onSelectionChange?.(registry.members("selected"));
+		}
+		const hovered = store.get().hovered;
+		if (result.hovered) {
+			patch({ hovered: null });
+			updateCursor();
+		} else if (hovered) {
+			const fresh = target(hovered.kind, hovered.key);
+			if (fresh && fresh.datum !== hovered.datum) patch({ hovered: fresh });
+		}
+	}
+	function movePositions(indices, to, duration) {
+		if (indices.length === 0) return;
+		const ms = reducedMotion() ? 0 : duration;
+		if (ms <= 0) indices.forEach((index, i) => {
+			if (index < animationOwner.length) animationOwner[index] = 0;
+			positions.set(index, to[i * 2] ?? 0, to[i * 2 + 1] ?? 0);
+		});
+		else {
+			if (positions.capacity > animationOwner.length) {
+				const owner = new Uint32Array(positions.capacity);
+				owner.set(animationOwner);
+				animationOwner = owner;
+			}
+			const id = ++animationSerial;
+			const from = new Float32Array(indices.length * 2);
+			indices.forEach((index, i) => {
+				animationOwner[index] = id;
+				from[i * 2] = positions.x(index);
+				from[i * 2 + 1] = positions.y(index);
+			});
+			positionAnimations.push({
+				id,
+				indices,
+				from,
+				to: Float32Array.from(to),
+				start: performance.now(),
+				duration: ms
+			});
+		}
+		request();
+	}
+	function followPositions(moves) {
+		if (moves.indices.length === 0) return;
+		const dragged = new Set(gesture?.drag?.indices);
+		const indices = [];
+		const to = [];
+		moves.indices.forEach((index, i) => {
+			if (dragged.has(index)) return;
+			indices.push(index);
+			to.push(moves.to[i * 2] ?? 0, moves.to[i * 2 + 1] ?? 0);
+		});
+		movePositions(indices, to, definition.transitions.positions);
+	}
+	function stepPositions(now) {
+		positionAnimations = positionAnimations.filter((animation) => {
+			const t = Math.max(0, Math.min(1, (now - animation.start) / animation.duration));
+			const k = easeInOut(t);
+			animation.indices.forEach((index, i) => {
+				if (animationOwner[index] !== animation.id) return;
+				const fromX = animation.from[i * 2] ?? 0;
+				const fromY = animation.from[i * 2 + 1] ?? 0;
+				const toX = animation.to[i * 2] ?? 0;
+				const toY = animation.to[i * 2 + 1] ?? 0;
+				positions.set(index, fromX + (toX - fromX) * k, fromY + (toY - fromY) * k);
+			});
+			return t < 1;
+		});
+	}
+	function frame(now) {
+		frameRequest = 0;
+		if (destroyed || contextLost) return;
+		if (needsFlush) {
+			needsFlush = false;
+			applyChanges(model.flush());
+		}
+		if (pendingFit && fitTo(void 0, pendingFit)) pendingFit = null;
+		if (viewAnimation) {
+			const t = Math.min(1, (now - viewAnimation.start) / viewAnimation.duration);
+			const view = interpolateView(viewAnimation.from, viewAnimation.to, easeInOut(t));
+			if (t >= 1) viewAnimation = null;
+			patch({ view });
+			emitter.emit("viewchange", { view });
+		}
+		if (positionAnimations.length > 0) stepPositions(now);
+		registry.takeHighlighted();
+		const dirty = scene.takeDirty();
+		if (dirty.palette || scene.palette.colors.length !== paletteCount) resolvePalette(paletteCount);
+		buffers.reserve(scene.nodes.capacity, scene.edges.capacity);
+		const positionsChanged = positions.version !== positionsVersion;
+		renderer.sync({
+			scene,
+			dirty,
+			positions,
+			positionsChanged,
+			states: buffers,
+			full
+		});
+		full = false;
+		if (positionsChanged) {
+			positionsVersion = positions.version;
+			patch({ positionsVersion });
+		}
+		const { view, width, height } = store.get();
+		const wait = renderer.render({
+			view,
+			width,
+			height,
+			pixelRatio
+		});
+		if (viewAnimation || positionAnimations.length > 0) request();
+		else if (wait >= 0) requestLater(wait);
+	}
+	function resize(width, height) {
+		pixelRatio = window.devicePixelRatio || 1;
+		canvas.width = Math.max(1, Math.round(width * pixelRatio));
+		canvas.height = Math.max(1, Math.round(height * pixelRatio));
+		if (dev && !warnedEmpty && (width === 0 || height === 0)) {
+			warnedEmpty = true;
+			console.warn("graph: the container measures 0 px; give it a width and a height");
+		}
+		patch({
+			width,
+			height
+		});
+		request();
+	}
+	const resizeObserver = new ResizeObserver((entries) => {
+		const entry = entries[entries.length - 1];
+		if (entry) resize(entry.contentRect.width, entry.contentRect.height);
+	});
+	resizeObserver.observe(element);
+	const stopTheme = observeTheme(element, refreshTheme);
+	function local(event) {
+		const rect = canvas.getBoundingClientRect();
+		return {
+			x: event.clientX - rect.left,
+			y: event.clientY - rect.top
+		};
+	}
+	function pointerEvent(event, hit) {
+		const point = local(event);
+		return {
+			target: hit,
+			point,
+			world: toWorld(store.get().view, viewport(), point),
+			originalEvent: event
+		};
+	}
+	function startDrag(hit, point) {
+		if (hit.kind !== "node" || !definition.interaction.drag) return null;
+		const group = registry.has("selected", "nodes", hit.key) ? registry.members("selected").nodes : [hit.key];
+		const world = toWorld(store.get().view, viewport(), point);
+		const keys = [];
+		const indices = [];
+		for (const key of group) {
+			const record = model.node(key);
+			if (!record) continue;
+			keys.push(key);
+			indices.push(record.index);
+		}
+		const offsets = new Float32Array(indices.length * 2);
+		indices.forEach((index, i) => {
+			if (index < animationOwner.length) animationOwner[index] = 0;
+			offsets[i * 2] = positions.x(index) - world.x;
+			offsets[i * 2 + 1] = positions.y(index) - world.y;
+		});
+		return {
+			target: {
+				...hit,
+				kind: "node"
+			},
+			indices,
+			keys,
+			offsets,
+			started: false
+		};
+	}
+	function dragEvent(drag, event) {
+		const point = local(event);
+		return {
+			target: drag.target,
+			keys: drag.keys,
+			point,
+			world: toWorld(store.get().view, viewport(), point),
+			originalEvent: event
+		};
+	}
+	function onPointerDown(event) {
+		if (event.button !== 0 || gesture) return;
+		viewAnimation = null;
+		const point = local(event);
+		const hit = pickAt(point);
+		const drag = hit ? startDrag(hit, point) : null;
+		gesture = {
+			id: event.pointerId,
+			start: point,
+			last: point,
+			target: hit,
+			drag,
+			moved: false
+		};
+		canvas.setPointerCapture?.(event.pointerId);
+	}
+	function onPointerMove(event) {
+		const point = local(event);
+		if (!gesture) {
+			setHovered(pickAt(point), event);
+			return;
+		}
+		if (gesture.id !== event.pointerId) return;
+		if (!gesture.moved && Math.hypot(point.x - gesture.start.x, point.y - gesture.start.y) > clickSlop) {
+			gesture.moved = true;
+			updateCursor();
+		}
+		const drag = gesture.drag;
+		if (drag) {
+			if (!gesture.moved) return;
+			if (!drag.started) {
+				drag.started = true;
+				emitter.emit("dragstart", dragEvent(drag, event));
+			}
+			const world = toWorld(store.get().view, viewport(), point);
+			drag.indices.forEach((index, i) => {
+				positions.set(index, world.x + (drag.offsets[i * 2] ?? 0), world.y + (drag.offsets[i * 2 + 1] ?? 0));
+			});
+			emitter.emit("drag", dragEvent(drag, event));
+			if (emitter.has("positionchange")) {
+				const moved = /* @__PURE__ */ new Map();
+				drag.keys.forEach((key, i) => {
+					const index = drag.indices[i] ?? 0;
+					moved.set(key, {
+						x: positions.x(index),
+						y: positions.y(index)
+					});
+				});
+				emitter.emit("positionchange", {
+					origin: "drag",
+					positions: moved
+				});
+			}
+			request();
+		} else if (definition.interaction.pan) commitView(panBy(store.get().view, point.x - gesture.last.x, point.y - gesture.last.y));
+		gesture.last = point;
+	}
+	function endGesture(event, cancelled) {
+		if (!gesture || gesture.id !== event.pointerId) return;
+		const ended = gesture;
+		gesture = null;
+		if (canvas.hasPointerCapture?.(event.pointerId)) canvas.releasePointerCapture(event.pointerId);
+		if (ended.drag?.started) emitter.emit("dragend", dragEvent(ended.drag, event));
+		if (!cancelled && !ended.moved) {
+			emitter.emit("click", pointerEvent(event, ended.target));
+			selectOnClick(ended.target, event);
+		}
+		if (!cancelled) setHovered(pickAt(local(event)), event);
+		updateCursor();
+	}
+	function onPointerUp(event) {
+		endGesture(event, false);
+	}
+	function onPointerCancel(event) {
+		endGesture(event, true);
+	}
+	function onPointerLeave(event) {
+		if (!gesture) setHovered(null, event);
+	}
+	function onDoubleClick(event) {
+		emitter.emit("doubleclick", pointerEvent(event, pickAt(local(event))));
+	}
+	function onContextMenu(event) {
+		emitter.emit("contextmenu", pointerEvent(event, pickAt(local(event))));
+	}
+	function onWheel(event) {
+		const zoom = definition.interaction.zoom;
+		if (!zoom) return;
+		event.preventDefault();
+		viewAnimation = null;
+		const { view, height } = store.get();
+		const factor = wheelFactor(event.deltaY, event.deltaMode, height, zoom.speed);
+		commitView(zoomAround(view, viewport(), local(event), factor));
+	}
+	function onContextLost(event) {
+		event.preventDefault();
+		contextLost = true;
+	}
+	function onContextRestored() {
+		contextLost = false;
+		renderer = createRenderer(canvas);
+		full = true;
+		refreshTheme();
+	}
+	const listeners = [
+		["pointerdown", onPointerDown],
+		["pointermove", onPointerMove],
+		["pointerup", onPointerUp],
+		["pointercancel", onPointerCancel],
+		["pointerleave", onPointerLeave],
+		["dblclick", onDoubleClick],
+		["contextmenu", onContextMenu],
+		[
+			"wheel",
+			onWheel,
+			{ passive: false }
+		],
+		["webglcontextlost", onContextLost],
+		["webglcontextrestored", onContextRestored]
+	];
+	for (const [name, listener, listenerOptions] of listeners) canvas.addEventListener(name, listener, listenerOptions);
+	model.setMarks(definition.marks);
+	scene.setDefinition(definition);
+	applyLayers();
+	applyStyles();
+	refreshTheme();
+	request(true);
+	function declared(name) {
+		if (isBuiltInState(name) || !Object.hasOwn(definition.states, name)) throw new Error(`graph: unknown state "${name}"`);
+		return name;
+	}
+	return {
+		store: readonlyStore,
+		view: {
+			get: () => store.get().view,
+			set: (next, viewOptions = {}) => animateTo(next, viewOptions.duration),
+			fit: (keys, fitOptions = {}) => {
+				if (!fitTo(keys, fitOptions)) pendingFit = keys ? null : fitOptions;
+			},
+			zoomBy: (factor, viewOptions = {}) => {
+				const size = viewport();
+				const center = {
+					x: size.width / 2,
+					y: size.height / 2
+				};
+				animateTo(zoomAround(store.get().view, size, center, factor), viewOptions.duration);
+			},
+			toScreen: (point) => toScreen(store.get().view, viewport(), point),
+			toWorld: (point) => toWorld(store.get().view, viewport(), point)
+		},
+		selection: {
+			get: () => store.get().selection,
+			set: (keys) => requestSelection(toKeys(keys)),
+			clear: () => requestSelection(noKeys)
+		},
+		states: {
+			set: (name, keys) => {
+				if (registry.set(declared(name), keys)) publishState(name);
+			},
+			add: (name, keys) => {
+				if (registry.add(declared(name), keys)) publishState(name);
+			},
+			remove: (name, keys) => {
+				if (registry.remove(declared(name), keys)) publishState(name);
+			},
+			clear: (name) => {
+				const names = name === void 0 ? freeStateNames(definition.states) : [declared(name)];
+				for (const each of names) if (registry.clear(each)) publishState(each);
+			},
+			has: (name, element) => registry.has(declared(name), kindOf[element.kind], element.key)
+		},
+		positions: {
+			get: (key) => {
+				const record = model.node(key);
+				return record ? {
+					x: positions.x(record.index),
+					y: positions.y(record.index)
+				} : void 0;
+			},
+			set: (entries, positionOptions = {}) => {
+				const indices = [];
+				const to = [];
+				const moved = /* @__PURE__ */ new Map();
+				for (const [key, point] of entries) {
+					const record = model.node(key);
+					if (!record) continue;
+					indices.push(record.index);
+					to.push(point.x, point.y);
+					moved.set(key, {
+						x: point.x,
+						y: point.y
+					});
+				}
+				movePositions(indices, to, positionOptions.duration ?? 0);
+				if (moved.size > 0) emitter.emit("positionchange", {
+					origin: "api",
+					positions: moved
+				});
+			}
+		},
+		element,
+		pick: (point) => pickAt(point),
+		neighbors: (key) => model.neighbors(key),
+		edgesOf: (key) => model.edgesOf(key),
+		endpoints: (key) => model.endpoints(key),
+		on: (name, handler) => emitter.on(name, handler),
+		update(next) {
+			if (next.ariaLabel !== void 0) element.setAttribute("aria-label", next.ariaLabel);
+			if (next.onSelectionChange !== void 0) onSelectionChange = next.onSelectionChange;
+			if (controlled && next.selection !== void 0 && registry.set("selected", next.selection)) publishSelection();
+			if (next.definition && next.definition !== definition) {
+				definition = next.definition;
+				model.setMarks(definition.marks);
+				scene.setDefinition(definition);
+				applyLayers();
+				if (registry.define(freeStateNames(definition.states))) patch({ states: freeStates() });
+				applyStyles();
+				updateCursor();
+				request(true);
+			}
+		},
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			if (frameRequest !== 0) cancelAnimationFrame(frameRequest);
+			clearTimeout(laterRequest);
+			resizeObserver.disconnect();
+			stopTheme();
+			for (const [name, listener] of listeners) canvas.removeEventListener(name, listener);
+			emitter.clear();
+			model.destroy();
+			renderer.destroy();
+			themeResolver.destroy();
+			element.remove();
+		}
+	};
+}
+function mountGraph(container, options) {
+	return createGraphHost(container, options, createWebglRenderer);
+}
+export { freeStateNames as n, maxFreeStates as r, mountGraph as t };
+
+//# sourceMappingURL=mount-graph-DYOgD_ql.js.map