@bruno00o/graph 0.1.0 → 0.3.0

package/dist/{mount-graph-BHwq3LOr.js → mount-graph-CzVfiIte.js}

@@ -449,8 +449,125 @@ function createGraphModel(options = {}) {
 		}
 	};
 }
+// src/core/lasso.ts
+function insidePolygon(x, y, polygon) {
+	let inside = false;
+	let previous = polygon[polygon.length - 1];
+	for (const point of polygon) {
+		if (previous && point.y > y !== previous.y > y && x < (previous.x - point.x) * (y - point.y) / (previous.y - point.y) + point.x) inside = !inside;
+		previous = point;
+	}
+	return inside;
+}
+function nodesInside(polygon, nodes, positions) {
+	if (polygon.length < 3) return [];
+	let left = Number.POSITIVE_INFINITY;
+	let right = Number.NEGATIVE_INFINITY;
+	let top = Number.POSITIVE_INFINITY;
+	let bottom = Number.NEGATIVE_INFINITY;
+	for (const point of polygon) {
+		left = Math.min(left, point.x);
+		right = Math.max(right, point.x);
+		top = Math.min(top, point.y);
+		bottom = Math.max(bottom, point.y);
+	}
+	const inside = [];
+	for (let index = 0; index < nodes.capacity; index++) {
+		if (nodes.alive[index] !== 1) continue;
+		const x = positions.x(index);
+		const y = positions.y(index);
+		if (x < left || x > right || y < top || y > bottom) continue;
+		const key = nodes.keys[index];
+		if (key !== void 0 && insidePolygon(x, y, polygon)) inside.push(key);
+	}
+	return inside;
+}
+// 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);
@@ -505,6 +622,7 @@ var PickIndex = class {
 	#maxWorldRadius = 0;
 	#maxScreenRadius = 0;
 	#maxEdgeHalfWidth = 0;
+	#loops = [];
 	build(source) {
 		const { nodes, edges, positions } = source;
 		let count = 0;
@@ -530,8 +648,25 @@ var PickIndex = class {
 		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);
@@ -554,9 +689,15 @@ var PickIndex = class {
 		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 source = edges.source[index] ?? 0;
-			const target = edges.target[index] ?? 0;
-			traverse(frame, positions.x(source), positions.y(source), positions.x(target), positions.y(target), emit);
+			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) {
@@ -582,6 +723,18 @@ var PickIndex = class {
 			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;
@@ -612,10 +765,26 @@ var PickIndex = class {
 		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;
@@ -624,15 +793,12 @@ var PickIndex = class {
 			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;
-			const distance = Math.abs((x - ax) * dy - (y - ay) * dx) / length;
-			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;
-			}
+			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;
 	}
 };
@@ -861,7 +1027,10 @@ const defaults = {
 	nodeStrokeWidth: 1,
 	edgeWidth: 1.5,
 	edgeWidthRange: [1, 6],
-	edgeColor: themeColor("edge")
+	edgeColor: themeColor("edge"),
+	badgeFill: themeColor("badge-fill"),
+	badgeInk: themeColor("badge-ink"),
+	badgeRing: themeColor("node-ring")
 };
 const builtInStyles = {
 	nodes: {
@@ -1015,6 +1184,13 @@ function resolveNumberScale(options, fallback) {
 	};
 }
 // src/core/columns.ts
+const noColor = 4294967295;
+const cornerCodes = {
+	topLeft: 0,
+	topRight: 1,
+	bottomLeft: 2,
+	bottomRight: 3
+};
 const shapeCodes = {
 	circle: 0,
 	square: 1,
@@ -1054,6 +1230,8 @@ var NodeColumns = class {
 	label = [];
 	secondary = [];
 	image = [];
+	imageScale = /* @__PURE__ */ new Float32Array(0);
+	imageColor = /* @__PURE__ */ new Uint32Array(0);
 	badges = [];
 	reserve(index) {
 		if (index < this.capacity) return;
@@ -1067,6 +1245,8 @@ var NodeColumns = class {
 		this.strokeWidth = grow$1(this.strokeWidth, capacity);
 		this.opacity = grow$1(this.opacity, capacity);
 		this.screenUnits = grow$1(this.screenUnits, capacity);
+		this.imageScale = grow$1(this.imageScale, capacity);
+		this.imageColor = grow$1(this.imageColor, capacity);
 		this.capacity = capacity;
 	}
 	clear(index) {
@@ -1091,6 +1271,7 @@ var EdgeColumns = class {
 	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;
@@ -1104,15 +1285,190 @@ var EdgeColumns = class {
 		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 = Math.min(source, target);
+		const high = Math.max(source, target);
+		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();
@@ -1159,18 +1515,37 @@ function finiteOr(value, fallback) {
 function codeOf(codes, value) {
 	return typeof value === "string" && Object.hasOwn(codes, value) ? codes[value] : 0;
 }
-function readBadges(mark, datum) {
+function readBadges(mark, datum, palette) {
 	if (mark.badges.length === 0) return null;
-	const badges = {};
-	let count = 0;
+	const badges = [];
 	for (const [corner, read] of mark.badges) {
 		const badge = read(datum);
-		if (typeof badge === "object" && badge !== null) {
-			badges[corner] = badge;
-			count++;
-		}
+		if (typeof badge !== "object" || badge === null) continue;
+		const { text, fill, color } = badge;
+		badges.push({
+			corner: cornerCodes[corner],
+			text: typeof text === "number" ? String(text) : toText(text) || null,
+			fill: palette.id(toColor(fill) ?? defaults.badgeFill),
+			color: palette.id(toColor(color) ?? defaults.badgeInk),
+			ring: palette.id(defaults.badgeRing)
+		});
 	}
-	return count === 0 ? null : badges;
+	return badges.length === 0 ? null : badges;
+}
+function readImage(value) {
+	if (typeof value === "string") return value === "" ? null : {
+		src: value,
+		scale: 1,
+		color: null
+	};
+	if (typeof value !== "object" || value === null) return null;
+	const { src, scale, color } = value;
+	if (typeof src !== "string" || src === "") return null;
+	return {
+		src,
+		scale: Math.max(0, finiteOr(scale, 1)),
+		color: toColor(color)
+	};
 }
 function layersOf(marks) {
 	const slots = {
@@ -1186,6 +1561,7 @@ 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;
@@ -1259,8 +1635,11 @@ function createScene() {
 		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);
+		const image = readImage(mark.image?.(datum));
+		nodes.image[index] = image?.src ?? null;
+		nodes.imageScale[index] = image?.scale ?? 1;
+		nodes.imageColor[index] = image?.color ? palette.id(image.color) : noColor;
+		nodes.badges[index] = readBadges(mark, datum, palette);
 		dirtyNodes.add(index);
 	}
 	function writeEdge(model, record) {
@@ -1273,6 +1652,7 @@ function createScene() {
 		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));
@@ -1290,6 +1670,7 @@ function createScene() {
 		dirtyNodes.add(index);
 	}
 	function removeEdge(index) {
+		lanes.unlink(index);
 		edges.clear(index);
 		widthValues[index] = NaN;
 		edgeColorValues[index] = void 0;
@@ -1381,6 +1762,7 @@ function createScene() {
 			}
 			for (const record of nodeRecords.values()) writeNode(record);
 			for (const record of edgeRecords.values()) writeEdge(model, record);
+			lanes.write(edges, dirtyEdges);
 		},
 		takeDirty() {
 			const dirty = {
@@ -1397,6 +1779,47 @@ function createScene() {
 		}
 	};
 }
+// src/core/spatial.ts
+const sideWeight = 2;
+const cone = 2;
+function nearestNode(point, nodes, positions) {
+	let best = -1;
+	let bestDistance = Number.POSITIVE_INFINITY;
+	for (let index = 0; index < nodes.capacity; index++) {
+		if (nodes.alive[index] !== 1) continue;
+		const distance = Math.hypot(positions.x(index) - point.x, positions.y(index) - point.y);
+		if (distance < bestDistance) {
+			best = index;
+			bestDistance = distance;
+		}
+	}
+	return best;
+}
+function nodeToward(from, direction, nodes, positions) {
+	const x = positions.x(from);
+	const y = positions.y(from);
+	const length = Math.hypot(direction.x, direction.y);
+	if (length === 0) return -1;
+	const dx = direction.x / length;
+	const dy = direction.y / length;
+	let best = -1;
+	let bestScore = Number.POSITIVE_INFINITY;
+	for (let index = 0; index < nodes.capacity; index++) {
+		if (index === from || nodes.alive[index] !== 1) continue;
+		const vx = positions.x(index) - x;
+		const vy = positions.y(index) - y;
+		const along = vx * dx + vy * dy;
+		if (along <= 0) continue;
+		const side = Math.abs(vx * dy - vy * dx);
+		if (side > along * cone) continue;
+		const score = along + side * sideWeight;
+		if (score < bestScore) {
+			best = index;
+			bestScore = score;
+		}
+	}
+	return best;
+}
 const noPaint = 4294967295;
 const tableOffset = {
 	nodes: 0,
@@ -1878,12 +2301,162 @@ var GlyphAtlas = class {
 		this.generation++;
 	}
 };
+const levels = Math.log2(256) + 1;
+const maxLayers = 256;
+var ImageAtlas = class {
+	#gl;
+	#invalidate;
+	#entries = /* @__PURE__ */ new Map();
+	#free = [];
+	#placeholder;
+	#texture = null;
+	#capacity = 0;
+	#next = 0;
+	#loaded = /* @__PURE__ */ new Set();
+	#mipsStale = false;
+	#canvas = null;
+	#warnedFull = false;
+	#destroyed = false;
+	constructor(gl, invalidate) {
+		this.#gl = gl;
+		this.#invalidate = invalidate;
+		this.#placeholder = gl.createTexture();
+		gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.#placeholder);
+		gl.texStorage3D(gl.TEXTURE_2D_ARRAY, 1, gl.RGBA8, 1, 1, 1);
+	}
+	get texture() {
+		return this.#texture ?? this.#placeholder;
+	}
+	layer(src) {
+		return this.#entries.get(src)?.layer ?? -1;
+	}
+	acquire(src) {
+		const entry = this.#entries.get(src);
+		if (entry) {
+			entry.count++;
+			return;
+		}
+		this.#entries.set(src, {
+			count: 1,
+			layer: -1
+		});
+		const image = new Image();
+		image.crossOrigin = "anonymous";
+		image.decoding = "async";
+		image.src = src;
+		image.decode().then(() => this.#store(src, image), () => this.#fail(src));
+	}
+	release(src) {
+		const entry = this.#entries.get(src);
+		if (!entry || --entry.count > 0) return;
+		this.#entries.delete(src);
+		if (entry.layer >= 0) this.#free.push(entry.layer);
+	}
+	takeLoaded() {
+		if (this.#loaded.size === 0) return null;
+		const loaded = this.#loaded;
+		this.#loaded = /* @__PURE__ */ new Set();
+		return loaded;
+	}
+	prepare() {
+		if (!this.#mipsStale || !this.#texture) return;
+		this.#mipsStale = false;
+		const gl = this.#gl;
+		gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.#texture);
+		gl.generateMipmap(gl.TEXTURE_2D_ARRAY);
+	}
+	destroy() {
+		this.#destroyed = true;
+		this.#gl.deleteTexture(this.#placeholder);
+		if (this.#texture) this.#gl.deleteTexture(this.#texture);
+	}
+	#fail(src) {
+		if (this.#destroyed) return;
+		if (dev && this.#entries.has(src)) console.warn(`graph: cannot load the image ${src}`);
+	}
+	#store(src, image) {
+		const entry = this.#entries.get(src);
+		if (this.#destroyed || !entry || entry.layer >= 0) return;
+		const layer = this.#free.pop() ?? this.#next;
+		if (layer >= this.#capacity && !this.#grow()) {
+			if (dev && !this.#warnedFull) {
+				this.#warnedFull = true;
+				console.warn(`graph: more than ${maxLayers} distinct images, the others are not drawn`);
+			}
+			return;
+		}
+		if (layer === this.#next) this.#next++;
+		const canvas = this.#draw(image);
+		const gl = this.#gl;
+		gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.#texture);
+		gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+		try {
+			gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, layer, 256, 256, 1, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
+		} catch {
+			this.#free.push(layer);
+			this.#fail(src);
+			return;
+		} finally {
+			gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+		}
+		entry.layer = layer;
+		this.#mipsStale = true;
+		this.#loaded.add(src);
+		this.#invalidate();
+	}
+	#draw(image) {
+		this.#canvas ??= Object.assign(document.createElement("canvas"), {
+			width: 256,
+			height: 256
+		});
+		const context = this.#canvas.getContext("2d");
+		if (context) {
+			context.clearRect(0, 0, 256, 256);
+			const width = image.naturalWidth;
+			const height = image.naturalHeight;
+			const scale = width > 0 && height > 0 ? 256 / Math.min(width, height) : 0;
+			const drawnWidth = scale > 0 ? width * scale : 256;
+			const drawnHeight = scale > 0 ? height * scale : 256;
+			context.drawImage(image, (256 - drawnWidth) / 2, (256 - drawnHeight) / 2, drawnWidth, drawnHeight);
+		}
+		return this.#canvas;
+	}
+	#grow() {
+		if (this.#capacity >= maxLayers) return false;
+		const gl = this.#gl;
+		const capacity = Math.min(maxLayers, Math.max(4, this.#capacity * 2));
+		const texture = gl.createTexture();
+		gl.bindTexture(gl.TEXTURE_2D_ARRAY, texture);
+		gl.texStorage3D(gl.TEXTURE_2D_ARRAY, levels, gl.RGBA8, 256, 256, capacity);
+		gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
+		gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+		gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+		gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+		const previous = this.#texture;
+		if (previous) {
+			const framebuffer = gl.createFramebuffer();
+			gl.bindFramebuffer(gl.READ_FRAMEBUFFER, framebuffer);
+			for (let layer = 0; layer < this.#capacity; layer++) {
+				gl.framebufferTextureLayer(gl.READ_FRAMEBUFFER, gl.COLOR_ATTACHMENT0, previous, 0, layer);
+				gl.copyTexSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, layer, 0, 0, 256, 256);
+			}
+			gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
+			gl.deleteFramebuffer(framebuffer);
+			gl.deleteTexture(previous);
+		}
+		this.#texture = texture;
+		this.#capacity = capacity;
+		this.#mipsStale = true;
+		return true;
+	}
+};
 const primarySize = 12;
 const lineHeight = 1.25;
 const labelMin = 8;
 const cell = 8;
 const maxLabels = 4e3;
 const cullMargin = 400;
+const forcedStates = 6;
 var GlyphBuffer = class {
 	data = /* @__PURE__ */ new ArrayBuffer(8192);
 	count = 0;
@@ -1946,7 +2519,9 @@ var LabelLayer = class {
 		const highlighted = new Set(frame.highlighted);
 		const worldPrimary = primarySize * Math.min(1, view.zoom);
 		let placed = 0;
-		const place = (index, force) => {
+		const forced = (index) => ((frame.nodeMask[index] ?? 0) & forcedStates) !== 0;
+		const place = (index, highlight) => {
+			const force = highlight && forced(index);
 			const label = nodes.label[index];
 			if (!label || nodes.alive[index] !== 1) return;
 			if (!labelVisible(frame.nodeMask[index] ?? 0, frame.labelFlags)) return;
@@ -1977,12 +2552,13 @@ var LabelLayer = class {
 				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;
+			const target = highlight ? 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);
+		for (const index of highlighted) if (forced(index)) place(index, true);
+		for (const index of highlighted) if (!forced(index)) place(index, true);
 		if (worldPrimary < labelMin && !frame.screenLabels) return;
 		const xy = positions.xy;
 		const order = frame.order;
@@ -2015,12 +2591,14 @@ function sortBySize(nodes, order) {
 		screenLabels
 	};
 }
-// src/webgl/shaders.ts
+const badgeFont = .66;
+const badgeRing = 1.5;
 const header = `#version 300 es
 precision highp float;
 precision highp int;
 precision highp sampler2D;
 precision highp usampler2D;
+precision highp sampler2DArray;
 layout(std140) uniform Frame {
   vec2 center;
   vec2 viewport;
@@ -2040,7 +2618,7 @@ layout(std140) uniform States {
 uniform int layerSlot;
 uniform int overlay;
 uniform sampler2D palette;
-const uint highlightMask = 3u;
+const uint highlightMask = 7u;
 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; }
@@ -2085,6 +2663,13 @@ float nodeDiameter(vec4 style) {
   return (flags & 4u) != 0u ? style.x : style.x * zoom;
 }
 float nodeRadius(vec4 style) { return max(nodeDiameter(style) * 0.5, 1.25); }
+float badgeHeight(vec4 style) { return min(nodeDiameter(style) * 0.55, ${18 .toFixed(1)}); }
+vec2 badgeCenter(vec2 xy, vec4 style, uint corner) {
+  uint shape = uint(style.w + 0.5) & 3u;
+  float reach = shape == 0u ? 0.70710678 : shape == 1u ? 0.86 : 0.6;
+  vec2 side = vec2((corner & 1u) != 0u ? 1.0 : -1.0, (corner & 2u) != 0u ? 1.0 : -1.0);
+  return toScreen(xy) + side * reach * nodeRadius(style);
+}
 `;
 const edgeData = `
 uniform usampler2D edgeTopology;
@@ -2092,9 +2677,13 @@ uniform sampler2D edgeStyle;
 uniform usampler2D edgeState;
 `;
 const nodeVertex = `${header}${nodeData}
+uniform usampler2D nodeImage;
 in vec2 corner;
 in uint instance;
 out vec2 vLocal;
+flat out float vImageLayer;
+flat out float vImageScale;
+flat out vec4 vImageColor;
 out float vRadius;
 out float vStrokeWidth;
 out float vHaloWidth;
@@ -2125,11 +2714,19 @@ void main() {
   vFill = paletteColor(look.fill);
   vStroke = paletteColor(look.stroke);
   vOpacity = look.opacity;
+  uvec4 image = texelFetch(nodeImage, t, 0);
+  vImageLayer = float(image.x) - 1.0;
+  vImageScale = max(uintBitsToFloat(image.z), 0.001);
+  vImageColor = image.y == none ? vec4(-1.0) : paletteColor(image.y);
   gl_Position = toClip(toScreen(xy) + vLocal);
 }
 `;
 const nodeFragment = `${header}
+uniform sampler2DArray images;
 in vec2 vLocal;
+flat in float vImageLayer;
+flat in float vImageScale;
+flat in vec4 vImageColor;
 in float vRadius;
 in float vStrokeWidth;
 in float vHaloWidth;
@@ -2151,9 +2748,17 @@ void main() {
   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);
+  vec4 fill = vec4(vFill.rgb * vFill.a, vFill.a);
+  if (vImageLayer >= 0.0) {
+    vec2 uv = vLocal / (vRadius * 2.0 * vImageScale) + 0.5;
+    vec4 picture = texture(images, vec3(uv, vImageLayer));
+    vec2 within = step(vec2(0.0), uv) * step(uv, vec2(1.0));
+    picture *= within.x * within.y;
+    if (vImageColor.a >= 0.0) picture = vec4(vImageColor.rgb * vImageColor.a, vImageColor.a) * picture.a;
+    fill = picture + fill * (1.0 - picture.a);
+  }
+  vec4 color = mix(fill, vec4(vStroke.rgb * vStroke.a, vStroke.a), ring);
+  vec4 result = color * inside * vOpacity;
   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);
@@ -2187,6 +2792,10 @@ void main() {
     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);
@@ -2231,6 +2840,143 @@ void main() {
   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;
@@ -2295,7 +3041,8 @@ in vec4 glyphRect;
 in vec4 glyphUv;
 out vec2 vUv;
 out float vScale;
-flat out uint vKind;
+flat out vec4 vInk;
+flat out float vHalo;
 flat out float vOpacity;
 void main() {
   ivec2 t = texel(glyphNode);
@@ -2304,19 +3051,36 @@ void main() {
   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);
+  vUv = mix(glyphUv.xy, glyphUv.zw, corner);
+  vOpacity = look.opacity;
+  uint kind = glyphKind & 3u;
+  if (kind == 2u) {
+    bool highlighted = (mask & highlightMask) != 0u;
+    float height = badgeHeight(style);
+    if ((flags & 8u) == 0u || highlighted != (overlay == 1) || height < ${12 .toFixed(1)}) {
+      gl_Position = hidden;
+      return;
+    }
+    float font = height * ${badgeFont.toFixed(2)};
+    vec2 center = badgeCenter(texelFetch(nodePosition, t, 0).xy, style, (glyphKind >> 2u) & 3u);
+    vScale = font / atlasFontSize;
+    vInk = paletteColor(glyphKind >> 4u);
+    vHalo = 0.0;
+    gl_Position = toClip(center - vec2(0.0, font * 0.65) + (glyphRect.xy + corner * glyphRect.zw) * vScale);
+    return;
+  }
   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 size = kind == 0u ? primary : primary * 11.0 / 12.0;
   float scale = size / atlasFontSize;
-  float below = nodeRadius(style) + 3.0 + (glyphKind == 1u ? primary * 1.25 : 0.0);
+  float below = nodeRadius(style) + 3.0 + (kind == 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;
+  vInk = kind == 0u ? labelInk : labelMuted;
+  vHalo = 1.0;
   gl_Position = toClip(anchor + (glyphRect.xy + corner * glyphRect.zw) * scale);
 }
 `;
@@ -2324,21 +3088,78 @@ const labelFragment = `${header}
 uniform sampler2D atlas;
 in vec2 vUv;
 in float vScale;
-flat in uint vKind;
+flat in vec4 vInk;
+flat in float vHalo;
 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;
+  float halo = smoothstep(0.55 - gamma, 0.55 + gamma, d) * vHalo;
+  vec3 rgb = vHalo > 0.5 ? mix(labelHalo.rgb, vInk.rgb, ink) : vInk.rgb;
+  float alpha = max(halo * labelHalo.a, ink * vInk.a) * vOpacity;
   if (alpha < 0.002) discard;
   fragColor = vec4(rgb * alpha, alpha);
 }
 `;
+const badgeVertex = `${header}${nodeData}
+in vec2 corner;
+in uint badgeNode;
+in uint badgeInfo;
+in uint badgeFill;
+in uint badgeRingColor;
+in float badgeText;
+out vec2 vLocal;
+flat out vec2 vHalf;
+flat out vec4 vFill;
+flat out vec4 vRing;
+flat out float vOpacity;
+void main() {
+  ivec2 t = texel(badgeNode);
+  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;
+  float height = badgeHeight(style);
+  if ((flags & 8u) == 0u || highlighted != (overlay == 1) || height < ${10 .toFixed(1)}) {
+    gl_Position = hidden;
+    return;
+  }
+  Look look = resolve(mask, Look(style.z, style.y, 0.0, 1.0, paint.x, paint.y), 0);
+  bool text = (badgeInfo & 4u) != 0u && height >= ${12 .toFixed(1)};
+  float font = height * ${badgeFont.toFixed(2)};
+  float width = text ? max(height, badgeText * font / ${24 .toFixed(1)} + height * 0.6) : height;
+  vec2 center = badgeCenter(texelFetch(nodePosition, t, 0).xy, style, badgeInfo & 3u);
+  vHalf = vec2(width, height) * 0.5;
+  vLocal = corner * (vHalf + ${badgeRing.toFixed(1)} + 1.0);
+  vFill = paletteColor(badgeFill);
+  vRing = paletteColor(badgeRingColor);
+  vOpacity = look.opacity;
+  gl_Position = toClip(center + vLocal);
+}
+`;
+const badgeFragment = `${header}
+in vec2 vLocal;
+flat in vec2 vHalf;
+flat in vec4 vFill;
+flat in vec4 vRing;
+flat in float vOpacity;
+out vec4 fragColor;
+void main() {
+  float aa = 0.5 / pixelRatio + 0.25;
+  vec2 q = vec2(max(abs(vLocal.x) - (vHalf.x - vHalf.y), 0.0), vLocal.y);
+  float d = length(q) - vHalf.y;
+  float inner = 1.0 - smoothstep(-aa, aa, d);
+  float outer = 1.0 - smoothstep(${badgeRing.toFixed(1)} - aa, ${badgeRing.toFixed(1)} + aa, d);
+  vec4 fill = vec4(vFill.rgb * vFill.a, vFill.a);
+  vec4 ring = vec4(vRing.rgb * vRing.a, vRing.a);
+  vec4 result = mix(ring, fill, inner) * outer * vOpacity;
+  if (result.a < 0.002) discard;
+  fragColor = result;
+}
+`;
 const cornerNode = new Float32Array([
 	-1,
 	-1,
@@ -2387,6 +3208,27 @@ const cornerEdge = new Float32Array([
 	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,
@@ -2404,6 +3246,7 @@ const blocks = {
 };
 const paletteWidth = 256;
 const labelInterval = 120;
+const badgeStride = 20;
 const units = {
 	palette: 0,
 	nodePosition: 1,
@@ -2413,7 +3256,9 @@ const units = {
 	edgeTopology: 5,
 	edgeStyle: 6,
 	edgeState: 7,
-	atlas: 8
+	atlas: 8,
+	images: 9,
+	nodeImage: 10
 };
 function iota(length) {
 	const values = new Uint32Array(length);
@@ -2423,7 +3268,7 @@ function iota(length) {
 function rgba(color) {
 	return color.map((channel) => channel / 255);
 }
-function createWebglRenderer(canvas) {
+function createWebglRenderer(canvas, invalidate = () => {}) {
 	const context = canvas.getContext("webgl2", {
 		alpha: true,
 		antialias: false,
@@ -2440,6 +3285,7 @@ function createWebglRenderer(canvas) {
 	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 nodeImage = new DataTexture(gl, format.rgba32ui, 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);
@@ -2447,8 +3293,12 @@ function createWebglRenderer(canvas) {
 		nodePosition,
 		nodeStyle,
 		nodePaint,
-		nodeState
+		nodeState,
+		nodeImage
 	];
+	const images = new ImageAtlas(gl, invalidate);
+	const scaleBits = /* @__PURE__ */ new Float32Array(1);
+	const scaleWord = new Uint32Array(scaleBits.buffer);
 	const edgeTextures = [
 		edgeTopology,
 		edgeStyle,
@@ -2482,47 +3332,61 @@ function createWebglRenderer(canvas) {
 	const nodeProgram = createProgram(gl, nodeVertex, nodeFragment, blocks);
 	const edgeProgram = createProgram(gl, edgeVertex, edgeFragment, blocks);
 	const labelProgram = createProgram(gl, labelVertex, labelFragment, blocks);
+	const badgeProgram = createProgram(gl, badgeVertex, badgeFragment, blocks);
 	const programs = [
 		nodeProgram,
 		edgeProgram,
-		labelProgram
+		labelProgram,
+		badgeProgram
 	];
-	for (const program of programs) {
+	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 locations = new Map(programs.map((program) => [program, {
-		layerSlot: gl.getUniformLocation(program, "layerSlot"),
-		overlay: gl.getUniformLocation(program, "overlay")
-	}]));
 	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 badgeBuffer = createBuffer(gl, /* @__PURE__ */ new Uint8Array(0), gl.DYNAMIC_DRAW);
+	const badgeGlyphBuffer = 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 warmBadge = createBuffer(gl, new Uint8Array(badgeStride), gl.STATIC_DRAW);
 	const buffers = [
 		nodeCorner,
 		edgeCorner,
+		curveCorner,
 		labelCorner,
 		nodeIndices,
 		edgeIndices,
 		nodeOverlayIndices,
 		edgeOverlayIndices,
+		curveIndices,
 		labelMainBuffer,
 		labelHighlightBuffer,
+		badgeBuffer,
+		badgeGlyphBuffer,
 		warmIndex,
-		warmGlyph
+		warmGlyph,
+		warmBadge
 	];
 	const corner = (buffer, size = 2) => ({
 		name: "corner",
@@ -2581,24 +3445,61 @@ function createWebglRenderer(canvas) {
 			offset: 24
 		}
 	];
+	const badgeField = (buffer, name, offset, type = gl.UNSIGNED_INT) => ({
+		name,
+		buffer,
+		size: 1,
+		type,
+		integer: type === gl.UNSIGNED_INT,
+		divisor: 1,
+		stride: badgeStride,
+		offset
+	});
+	const badgeAttributes = (buffer) => [
+		corner(nodeCorner),
+		badgeField(buffer, "badgeNode", 0),
+		badgeField(buffer, "badgeInfo", 4),
+		badgeField(buffer, "badgeFill", 8),
+		badgeField(buffer, "badgeRingColor", 12),
+		badgeField(buffer, "badgeText", 16, gl.FLOAT)
+	];
 	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))
+		labelHighlight: createVertexArray(gl, labelProgram, glyphs(labelHighlightBuffer)),
+		badges: createVertexArray(gl, badgeProgram, badgeAttributes(badgeBuffer)),
+		badgeGlyphs: createVertexArray(gl, labelProgram, glyphs(badgeGlyphBuffer))
 	};
 	const vertexCounts = /* @__PURE__ */ new Map([
 		[nodeProgram, cornerNode.length / 2],
 		[edgeProgram, cornerEdge.length / 3],
-		[labelProgram, cornerLabel.length / 2]
+		[labelProgram, cornerLabel.length / 2],
+		[badgeProgram, cornerNode.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();
@@ -2610,6 +3511,13 @@ function createWebglRenderer(canvas) {
 	let orderStale = true;
 	let lastLabelTime = Number.NEGATIVE_INFINITY;
 	let lastLabelView = "";
+	const imageOf = [];
+	const badged = /* @__PURE__ */ new Set();
+	const badgeGlyphs = new GlyphBuffer();
+	let badgeData = /* @__PURE__ */ new ArrayBuffer(1280);
+	let badgeCount = 0;
+	let badgesStale = false;
+	let badgeGeneration = -1;
 	function packNode(nodes, index) {
 		const at = index * 4;
 		const flags = (nodes.shape[index] ?? 0) | (nodes.screenUnits[index] ?? 0) << 2 | (nodes.alive[index] ?? 0) << 3;
@@ -2620,6 +3528,73 @@ function createWebglRenderer(canvas) {
 		nodePaint.data[at] = nodes.fill[index] ?? 0;
 		nodePaint.data[at + 1] = nodes.stroke[index] ?? 0;
 		nodePaint.data[at + 2] = nodes.slot[index] ?? 0;
+		const src = nodes.alive[index] === 1 ? nodes.image[index] ?? null : null;
+		const previous = imageOf[index] ?? null;
+		if (src !== previous) {
+			if (previous) images.release(previous);
+			if (src) images.acquire(src);
+			imageOf[index] = src;
+		}
+		scaleBits[0] = nodes.imageScale[index] ?? 1;
+		nodeImage.data[at] = src ? images.layer(src) + 1 : 0;
+		nodeImage.data[at + 1] = nodes.imageColor[index] ?? 4294967295;
+		nodeImage.data[at + 2] = scaleWord[0] ?? 0;
+		const badges = nodes.alive[index] === 1 ? nodes.badges[index] : null;
+		if (badges || badged.has(index)) badgesStale = true;
+		if (badges) badged.add(index);
+		else badged.delete(index);
+	}
+	function refreshImages(nodes) {
+		const loaded = images.takeLoaded();
+		if (!loaded) return;
+		let first = Number.POSITIVE_INFINITY;
+		let last = -1;
+		for (let index = 0; index < nodes.capacity; index++) {
+			const src = imageOf[index];
+			if (!src || !loaded.has(src)) continue;
+			nodeImage.data[index * 4] = images.layer(src) + 1;
+			first = Math.min(first, index);
+			last = Math.max(last, index);
+		}
+		nodeImage.upload(first, last);
+	}
+	function rebuildBadges() {
+		if (!input) return;
+		const nodes = input.scene.nodes;
+		const generation = atlas.generation;
+		badgeGlyphs.clear();
+		badgeCount = 0;
+		let words = new Uint32Array(badgeData);
+		let floats = new Float32Array(badgeData);
+		for (const index of badged) for (const badge of nodes.badges[index] ?? []) {
+			if ((badgeCount + 1) * badgeStride > badgeData.byteLength) {
+				const grown = /* @__PURE__ */ new ArrayBuffer(badgeData.byteLength * 2);
+				new Uint8Array(grown).set(new Uint8Array(badgeData));
+				badgeData = grown;
+				words = new Uint32Array(badgeData);
+				floats = new Float32Array(badgeData);
+			}
+			const line = badge.text ? atlas.line(badge.text, "500") : null;
+			const at = badgeCount * (badgeStride / 4);
+			words[at] = index;
+			words[at + 1] = badge.corner | (line ? 4 : 0);
+			words[at + 2] = badge.fill;
+			words[at + 3] = badge.ring;
+			floats[at + 4] = line?.width ?? 0;
+			if (line) badgeGlyphs.push(index, 2 | badge.corner << 2 | badge.color << 4, line, atlas.height);
+			badgeCount++;
+		}
+		if (atlas.generation !== generation) {
+			labelsStale = true;
+			rebuildBadges();
+			return;
+		}
+		badgesStale = false;
+		badgeGeneration = atlas.generation;
+		gl.bindBuffer(gl.ARRAY_BUFFER, badgeBuffer);
+		gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(badgeData, 0, badgeCount * badgeStride), gl.DYNAMIC_DRAW);
+		gl.bindBuffer(gl.ARRAY_BUFFER, badgeGlyphBuffer);
+		gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(badgeGlyphs.data, 0, badgeGlyphs.count * 32), gl.DYNAMIC_DRAW);
 	}
 	function packEdge(edges, index) {
 		const at = index * 4;
@@ -2629,6 +3604,14 @@ function createWebglRenderer(canvas) {
 		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;
@@ -2651,6 +3634,7 @@ function createWebglRenderer(canvas) {
 		}
 		nodeStyle.upload(first, last);
 		nodePaint.upload(first, last);
+		nodeImage.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)));
@@ -2688,6 +3672,11 @@ function createWebglRenderer(canvas) {
 		}
 		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) {
@@ -2788,7 +3777,8 @@ function createWebglRenderer(canvas) {
 		const passes = [
 			[nodeProgram, [corner(nodeCorner), instance(warmIndex)]],
 			[edgeProgram, [corner(edgeCorner, 3), instance(warmIndex)]],
-			[labelProgram, glyphs(warmGlyph)]
+			[labelProgram, glyphs(warmGlyph)],
+			[badgeProgram, badgeAttributes(warmBadge)]
 		];
 		gl.enable(gl.SCISSOR_TEST);
 		gl.scissor(0, 0, 0, 0);
@@ -2805,6 +3795,7 @@ function createWebglRenderer(canvas) {
 		sync(next) {
 			input = next;
 			syncNodes(next);
+			refreshImages(next.scene.nodes);
 			syncEdges(next);
 			syncStates(next);
 			if (next.dirty.nodes.size > 0 || next.full) labelsStale = true;
@@ -2841,7 +3832,12 @@ function createWebglRenderer(canvas) {
 			frameBlock[7] = 8;
 			gl.bindBuffer(gl.UNIFORM_BUFFER, frameBuffer);
 			gl.bufferSubData(gl.UNIFORM_BUFFER, 0, frameBlock);
+			if (badgesStale || badgeGeneration !== atlas.generation) rebuildBadges();
+			const generation = atlas.generation;
 			const wait = selectLabels(frame, performance.now());
+			if (atlas.generation !== generation) rebuildBadges();
+			syncAtlas();
+			images.prepare();
 			gl.viewport(0, 0, width, height);
 			gl.clearColor(0, 0, 0, 0);
 			gl.clear(gl.COLOR_BUFFER_BIT);
@@ -2849,11 +3845,23 @@ function createWebglRenderer(canvas) {
 			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);
-			else draw(nodeProgram, vertexArrays.nodes, nodeCapacity, layer.slot, 0);
+			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(badgeProgram, vertexArrays.badges, badgeCount, 0, 0);
+			draw(labelProgram, vertexArrays.badgeGlyphs, badgeGlyphs.count, 0, 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);
+			if (nodeOverlayCount > 0) {
+				draw(badgeProgram, vertexArrays.badges, badgeCount, 0, 1);
+				draw(labelProgram, vertexArrays.badgeGlyphs, badgeGlyphs.count, 0, 1);
+			}
 			draw(labelProgram, vertexArrays.labelHighlight, labels.highlight.count, 0, 1);
 			gl.bindVertexArray(null);
 			return wait;
@@ -2862,12 +3870,17 @@ function createWebglRenderer(canvas) {
 			for (const texture of [...nodeTextures, ...edgeTextures]) texture.destroy();
 			gl.deleteTexture(palette);
 			gl.deleteTexture(atlasTexture);
+			images.destroy();
 			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();
 		}
@@ -2882,12 +3895,15 @@ function createWebglRenderer(canvas) {
 			[units.edgeTopology, edgeTopology.texture],
 			[units.edgeStyle, edgeStyle.texture],
 			[units.edgeState, edgeState.texture],
-			[units.atlas, atlasTexture]
+			[units.atlas, atlasTexture],
+			[units.nodeImage, nodeImage.texture]
 		];
 		for (const [unit, texture] of textures) {
 			gl.activeTexture(gl.TEXTURE0 + unit);
 			gl.bindTexture(gl.TEXTURE_2D, texture);
 		}
+		gl.activeTexture(gl.TEXTURE0 + units.images);
+		gl.bindTexture(gl.TEXTURE_2D_ARRAY, images.texture);
 	}
 }
 // src/host/events.ts
@@ -2917,8 +3933,71 @@ var Emitter = class {
 		this.#handlers.clear();
 	}
 };
+// src/host/keyboard.ts
+const arrows = {
+	ArrowLeft: {
+		x: -1,
+		y: 0
+	},
+	ArrowRight: {
+		x: 1,
+		y: 0
+	},
+	ArrowUp: {
+		x: 0,
+		y: -1
+	},
+	ArrowDown: {
+		x: 0,
+		y: 1
+	}
+};
+const keyZoom = 1.5;
+function keyAction(event) {
+	if (event.altKey) return null;
+	const command = event.ctrlKey || event.metaKey;
+	const direction = arrows[event.key];
+	if (direction) {
+		if (command) return null;
+		return event.shiftKey ? {
+			type: "pan",
+			direction
+		} : {
+			type: "move",
+			direction
+		};
+	}
+	switch (event.key) {
+		case "Enter":
+		case " ": return {
+			type: "activate",
+			additive: event.shiftKey || command
+		};
+		case "Escape": return { type: "escape" };
+	}
+	if (command) return null;
+	switch (event.key) {
+		case "+":
+		case "=": return {
+			type: "zoom",
+			factor: keyZoom
+		};
+		case "-":
+		case "_": return {
+			type: "zoom",
+			factor: 1 / keyZoom
+		};
+		case "0": return { type: "fit" };
+	}
+	return null;
+}
 // src/host/state-registry.ts
-const highlightBits = 3;
+const highlightBits = 7;
+const highlightStates = [
+	"selected",
+	"hovered",
+	"focused"
+];
 const kinds = ["nodes", "edges"];
 function members() {
 	return {
@@ -2990,6 +4069,7 @@ var StateRegistry = class {
 	apply(changes) {
 		let selection = false;
 		let hovered = false;
+		let focused = false;
 		const forget = (kind, removed) => {
 			for (const { key, index } of removed) {
 				this.#setMask(kind, index, 0);
@@ -2997,6 +4077,7 @@ var StateRegistry = class {
 					if (!this.#members.get(name)?.[kind].delete(key)) continue;
 					if (name === "selected") selection = true;
 					if (name === "hovered") hovered = true;
+					if (name === "focused") focused = true;
 				}
 			}
 		};
@@ -3009,7 +4090,8 @@ var StateRegistry = class {
 		learn("edges", changes.edges.added);
 		return {
 			selection,
-			hovered
+			hovered,
+			focused
 		};
 	}
 	takeHighlighted() {
@@ -3017,7 +4099,7 @@ var StateRegistry = class {
 		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] ?? []) {
+			for (const name of highlightStates) for (const key of this.#members.get(name)?.[kind] ?? []) {
 				const index = this.#index(kind, key);
 				if (index >= 0) found.add(index);
 			}
@@ -3062,6 +4144,14 @@ var StateRegistry = class {
 	}
 };
 // src/host/mount-graph.ts
+const svgNamespace = "http://www.w3.org/2000/svg";
+const lassoStep = 3;
+const keyPan = .1;
+const followMargin = 48;
+const keyDuration = 200;
+const visuallyHidden = "position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap";
+const focusOutline = "2px solid var(--graph-focus-ring,#c93700)";
+const lassoStyle = "fill:color-mix(in srgb,var(--graph-accent,#c93700) 10%,transparent);stroke:var(--graph-accent,#c93700);stroke-width:1.5;stroke-dasharray:4 3;stroke-linejoin:round";
 const defaultPadding = 32;
 const clickSlop = 4;
 const pickTolerance = 4;
@@ -3116,11 +4206,15 @@ function createGraphHost(container, options, createRenderer) {
 	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";
+	element.style.cssText = "position:relative;width:100%;height:100%;overflow:hidden;outline:none;outline-offset:-2px";
 	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);
+	const announcer = document.createElement("div");
+	announcer.setAttribute("aria-live", "polite");
+	announcer.style.cssText = visuallyHidden;
+	element.append(canvas, announcer);
 	container.append(element);
+	let remembered = null;
 	let frameRequest = 0;
 	let laterRequest;
 	let needsFlush = false;
@@ -3148,7 +4242,7 @@ function createGraphHost(container, options, createRenderer) {
 	const emitter = new Emitter();
 	const pickIndex = new PickIndex();
 	const themeResolver = new ThemeResolver(element);
-	let renderer = createRenderer(canvas);
+	let renderer = createRenderer(canvas, () => request());
 	registry.define(freeStateNames(definition.states));
 	if (options.selection !== void 0) registry.set("selected", options.selection);
 	const store = createStore({
@@ -3160,6 +4254,7 @@ function createGraphHost(container, options, createRenderer) {
 		width: 0,
 		height: 0,
 		hovered: null,
+		focused: null,
 		selection: controlled ? registry.members("selected") : noKeys,
 		states: freeStates(),
 		positionsVersion: 0
@@ -3352,16 +4447,197 @@ function createGraphHost(container, options, createRenderer) {
 		updateCursor();
 		request();
 	}
+	function nodePoint(key) {
+		const record = model.node(key);
+		return record ? {
+			x: positions.x(record.index),
+			y: positions.y(record.index)
+		} : null;
+	}
+	function focusPoint(focus) {
+		if (focus.kind === "node") return nodePoint(focus.key);
+		const ends = model.endpoints(focus.key);
+		const a = ends ? nodePoint(ends.source) : null;
+		const b = ends ? nodePoint(ends.target) : null;
+		return a && b ? {
+			x: (a.x + b.x) / 2,
+			y: (a.y + b.y) / 2
+		} : null;
+	}
+	function labelOf(focus) {
+		const record = focus.kind === "node" ? model.node(focus.key) : model.edge(focus.key);
+		const labels = focus.kind === "node" ? scene.nodes.label : scene.edges.label;
+		return record && labels[record.index] || String(focus.key);
+	}
+	function announce(text) {
+		announcer.textContent = announcer.textContent === text ? `${text}\u00a0` : text;
+	}
+	function reveal(focus) {
+		const point = focusPoint(focus);
+		if (!point) return;
+		const { view } = store.get();
+		const size = viewport();
+		const screen = toScreen(view, size, point);
+		if (!(screen.x >= followMargin && screen.x <= size.width - followMargin && screen.y >= followMargin && screen.y <= size.height - followMargin)) animateTo({
+			...view,
+			x: point.x,
+			y: point.y
+		}, keyDuration);
+	}
+	function setFocused(next, follow = false) {
+		if (sameTarget(store.get().focused, next)) return;
+		registry.set("focused", next ? { [kindOf[next.kind]]: [next.key] } : {});
+		patch({ focused: next });
+		if (next) {
+			element.style.outline = "none";
+			announce(labelOf(next));
+			if (follow) reveal(next);
+		}
+		emitter.emit("focuschange", { target: next });
+		request();
+	}
+	function moveFocus(direction) {
+		const current = store.get().focused;
+		const from = current?.kind === "node" ? model.node(current.key)?.index ?? -1 : -1;
+		let index = from >= 0 ? nodeToward(from, direction, scene.nodes, positions) : -1;
+		if (from < 0) {
+			const selected = registry.members("selected").nodes;
+			const last = selected[selected.length - 1];
+			const center = store.get().view;
+			index = last !== void 0 ? model.node(last)?.index ?? -1 : nearestNode((current && focusPoint(current)) ?? center, scene.nodes, positions);
+		}
+		const key = index >= 0 ? scene.nodes.keys[index] : void 0;
+		const next = key !== void 0 ? target("node", key) : null;
+		if (next) setFocused(next, true);
+	}
+	function focusVisible() {
+		try {
+			return element.matches(":focus-visible");
+		} catch {
+			return true;
+		}
+	}
+	function onFocus() {
+		if (!definition.interaction.keyboard || !focusVisible()) return;
+		const restored = remembered ? target(remembered.kind, remembered.key) : null;
+		remembered = null;
+		if (restored) setFocused(restored, true);
+		else if (!store.get().focused) element.style.outline = focusOutline;
+	}
+	function onBlur() {
+		element.style.outline = "none";
+		const current = store.get().focused;
+		if (!current) return;
+		remembered = current;
+		setFocused(null);
+	}
+	function cancelLasso() {
+		if (!gesture?.lasso) return false;
+		if (canvas.hasPointerCapture?.(gesture.id)) canvas.releasePointerCapture(gesture.id);
+		gesture = null;
+		drawLasso(null);
+		updateCursor();
+		return true;
+	}
+	function runKey(event) {
+		const action = keyAction(event);
+		if (!action) return false;
+		const { interaction } = definition;
+		const { view, focused, selection } = store.get();
+		const size = viewport();
+		switch (action.type) {
+			case "move":
+				moveFocus(action.direction);
+				return true;
+			case "pan": {
+				if (!interaction.pan) return false;
+				const step = Math.min(size.width, size.height) * keyPan;
+				commitView(panBy(view, -action.direction.x * step, -action.direction.y * step));
+				return true;
+			}
+			case "zoom": {
+				if (!interaction.zoom) return false;
+				const point = focused ? focusPoint(focused) : null;
+				animateTo(zoomAround(view, size, point ? toScreen(view, size, point) : {
+					x: size.width / 2,
+					y: size.height / 2
+				}, action.factor), keyDuration);
+				return true;
+			}
+			case "fit": return fitTo(void 0, { duration: keyDuration });
+			case "activate":
+				if (!focused || interaction.select === false) return false;
+				selectTarget(focused, action.additive);
+				return true;
+			case "escape":
+				if (cancelLasso()) return true;
+				if (interaction.select !== false && selection.nodes.length + selection.edges.length > 0) {
+					requestSelection(noKeys);
+					return true;
+				}
+				if (!focused) return false;
+				setFocused(null);
+				return true;
+		}
+	}
+	function onKeyDown(event) {
+		if (!definition.interaction.keyboard || event.target !== element) return;
+		if (runKey(event)) event.preventDefault();
+	}
+	function applyKeyboard() {
+		if (definition.interaction.keyboard) {
+			element.tabIndex = 0;
+			element.setAttribute("role", "application");
+			return;
+		}
+		element.removeAttribute("tabindex");
+		element.setAttribute("role", "img");
+		element.style.outline = "none";
+		setFocused(null);
+	}
+	let lassoLayer = null;
+	function drawLasso(points) {
+		if (!points) {
+			lassoLayer?.remove();
+			lassoLayer = null;
+			return;
+		}
+		if (!lassoLayer) {
+			lassoLayer = document.createElementNS(svgNamespace, "svg");
+			lassoLayer.setAttribute("aria-hidden", "true");
+			lassoLayer.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible";
+			const path = document.createElementNS(svgNamespace, "path");
+			path.style.cssText = lassoStyle;
+			lassoLayer.append(path);
+			element.append(lassoLayer);
+		}
+		lassoLayer.firstElementChild?.setAttribute("d", `M${points.map((point) => `${point.x} ${point.y}`).join("L")}Z`);
+	}
+	function selectInside(points) {
+		const view = store.get().view;
+		const size = viewport();
+		const inside = nodesInside(points.map((point) => toWorld(view, size, point)), scene.nodes, positions).filter((key) => !registry.has("selected", "nodes", key));
+		if (inside.length === 0) return;
+		const current = registry.members("selected");
+		requestSelection({
+			...current,
+			nodes: [...current.nodes, ...inside]
+		});
+	}
 	function updateCursor() {
 		const interactive = definition.interaction.select !== false || definition.interaction.drag;
-		if (gesture?.moved) canvas.style.cursor = "grabbing";
+		if (gesture?.lasso) canvas.style.cursor = "crosshair";
+		else 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) {
+		selectTarget(clicked, event.shiftKey || event.metaKey || event.ctrlKey);
+	}
+	function selectTarget(clicked, modifier) {
 		const mode = definition.interaction.select;
 		if (mode === false) return;
-		const additive = mode === "multiple" && (event.shiftKey || event.metaKey || event.ctrlKey);
+		const additive = mode === "multiple" && modifier;
 		if (!clicked) {
 			if (!additive) requestSelection(noKeys);
 			return;
@@ -3400,6 +4676,14 @@ function createGraphHost(container, options, createRenderer) {
 			const fresh = target(hovered.kind, hovered.key);
 			if (fresh && fresh.datum !== hovered.datum) patch({ hovered: fresh });
 		}
+		const focused = store.get().focused;
+		if (result.focused) {
+			patch({ focused: null });
+			emitter.emit("focuschange", { target: null });
+		} else if (focused) {
+			const fresh = target(focused.kind, focused.key);
+			if (fresh && fresh.datum !== focused.datum) patch({ focused: fresh });
+		}
 	}
 	function movePositions(indices, to, duration) {
 		if (indices.length === 0) return;
@@ -3581,18 +4865,24 @@ function createGraphHost(container, options, createRenderer) {
 	function onPointerDown(event) {
 		if (event.button !== 0 || gesture) return;
 		viewAnimation = null;
+		remembered = null;
+		setFocused(null);
 		const point = local(event);
 		const hit = pickAt(point);
 		const drag = hit ? startDrag(hit, point) : null;
+		const { lasso, select } = definition.interaction;
+		const lassoing = !hit && event.shiftKey && lasso && select === "multiple";
 		gesture = {
 			id: event.pointerId,
 			start: point,
 			last: point,
 			target: hit,
 			drag,
+			lasso: lassoing ? [point] : null,
 			moved: false
 		};
 		canvas.setPointerCapture?.(event.pointerId);
+		if (lassoing) updateCursor();
 	}
 	function onPointerMove(event) {
 		const point = local(event);
@@ -3605,6 +4895,16 @@ function createGraphHost(container, options, createRenderer) {
 			gesture.moved = true;
 			updateCursor();
 		}
+		const lasso = gesture.lasso;
+		if (lasso) {
+			const last = lasso[lasso.length - 1] ?? gesture.start;
+			if (gesture.moved && Math.hypot(point.x - last.x, point.y - last.y) >= lassoStep) {
+				lasso.push(point);
+				drawLasso(lasso);
+			}
+			gesture.last = point;
+			return;
+		}
 		const drag = gesture.drag;
 		if (drag) {
 			if (!gesture.moved) return;
@@ -3641,6 +4941,10 @@ function createGraphHost(container, options, createRenderer) {
 		gesture = null;
 		if (canvas.hasPointerCapture?.(event.pointerId)) canvas.releasePointerCapture(event.pointerId);
 		if (ended.drag?.started) emitter.emit("dragend", dragEvent(ended.drag, event));
+		if (ended.lasso) {
+			drawLasso(null);
+			if (!cancelled && ended.moved) selectInside(ended.lasso);
+		}
 		if (!cancelled && !ended.moved) {
 			emitter.emit("click", pointerEvent(event, ended.target));
 			selectOnClick(ended.target, event);
@@ -3678,7 +4982,7 @@ function createGraphHost(container, options, createRenderer) {
 	}
 	function onContextRestored() {
 		contextLost = false;
-		renderer = createRenderer(canvas);
+		renderer = createRenderer(canvas, () => request());
 		full = true;
 		refreshTheme();
 	}
@@ -3699,6 +5003,13 @@ function createGraphHost(container, options, createRenderer) {
 		["webglcontextrestored", onContextRestored]
 	];
 	for (const [name, listener, listenerOptions] of listeners) canvas.addEventListener(name, listener, listenerOptions);
+	const elementListeners = [
+		["keydown", onKeyDown],
+		["focus", onFocus],
+		["blur", onBlur]
+	];
+	for (const [name, listener] of elementListeners) element.addEventListener(name, listener);
+	applyKeyboard();
 	model.setMarks(definition.marks);
 	scene.setDefinition(definition);
 	applyLayers();
@@ -3733,6 +5044,15 @@ function createGraphHost(container, options, createRenderer) {
 			set: (keys) => requestSelection(toKeys(keys)),
 			clear: () => requestSelection(noKeys)
 		},
+		focus: {
+			get: () => store.get().focused,
+			set: (next) => {
+				const resolved = next ? target(next.kind, next.key) : null;
+				if (next && !resolved) return;
+				if (resolved && definition.interaction.keyboard) element.focus({ preventScroll: true });
+				setFocused(resolved, true);
+			}
+		},
 		states: {
 			set: (name, keys) => {
 				if (registry.set(declared(name), keys)) publishState(name);
@@ -3795,6 +5115,7 @@ function createGraphHost(container, options, createRenderer) {
 				applyLayers();
 				if (registry.define(freeStateNames(definition.states))) patch({ states: freeStates() });
 				applyStyles();
+				applyKeyboard();
 				updateCursor();
 				request(true);
 			}
@@ -3807,6 +5128,7 @@ function createGraphHost(container, options, createRenderer) {
 			resizeObserver.disconnect();
 			stopTheme();
 			for (const [name, listener] of listeners) canvas.removeEventListener(name, listener);
+			for (const [name, listener] of elementListeners) element.removeEventListener(name, listener);
 			emitter.clear();
 			model.destroy();
 			renderer.destroy();
@@ -3820,4 +5142,4 @@ function mountGraph(container, options) {
 }
 export { freeStateNames as n, maxFreeStates as r, mountGraph as t };
 
-//# sourceMappingURL=mount-graph-BHwq3LOr.js.map
+//# sourceMappingURL=mount-graph-CzVfiIte.js.map