@bruno00o/graph 0.2.0 → 0.4.0

package/dist/{mount-graph-DYOgD_ql.js → mount-graph-mObhwJ3e.js}

@@ -449,6 +449,39 @@ 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;
@@ -802,10 +835,13 @@ function compileNodeMark(mark) {
 		y: channel(options.y),
 		label: channel(typeof label === "object" ? label.text : label),
 		secondary: channel(typeof label === "object" ? label.secondary : void 0),
+		labelBackground: style(typeof label === "object" ? label.background : void 0),
 		shape: style(options.shape),
 		fill: style(options.fill),
 		stroke: style(options.stroke),
 		strokeWidth: style(options.strokeWidth),
+		outline: style(options.outline),
+		outlineWidth: style(options.outlineWidth),
 		opacity: style(options.opacity),
 		image: style(options.image),
 		badges,
@@ -968,6 +1004,7 @@ const lightTheme = {
 	"focus-ring": "#c93700",
 	halo: "#c9370047",
 	"label-halo": "#f7f7f4",
+	"label-background": "#ffffff",
 	"node-ring": "#f7f7f4",
 	"badge-fill": "#191d22",
 	"badge-ink": "#f7f7f4",
@@ -992,9 +1029,15 @@ const defaults = {
 	nodeFill: themeColor("node"),
 	nodeStroke: themeColor("node-ring"),
 	nodeStrokeWidth: 1,
+	nodeOutline: themeColor("node-ring"),
+	nodeOutlineWidth: 2,
+	labelBackground: themeColor("label-background"),
 	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: {
@@ -1148,6 +1191,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,
@@ -1169,6 +1219,11 @@ function grow$1(array, length) {
 	next.set(array);
 	return next;
 }
+function growColor(array, length) {
+	const next = new Uint32Array(length).fill(noColor);
+	next.set(array);
+	return next;
+}
 function nextCapacity(capacity, index) {
 	return Math.max(64, capacity * 2, index + 1);
 }
@@ -1182,11 +1237,16 @@ var NodeColumns = class {
 	fill = /* @__PURE__ */ new Uint32Array(0);
 	stroke = /* @__PURE__ */ new Uint32Array(0);
 	strokeWidth = /* @__PURE__ */ new Float32Array(0);
+	outline = /* @__PURE__ */ new Uint32Array(0);
+	outlineWidth = /* @__PURE__ */ new Float32Array(0);
 	opacity = /* @__PURE__ */ new Float32Array(0);
 	screenUnits = /* @__PURE__ */ new Uint8Array(0);
 	label = [];
 	secondary = [];
+	labelBackground = /* @__PURE__ */ new Uint32Array(0);
 	image = [];
+	imageScale = /* @__PURE__ */ new Float32Array(0);
+	imageColor = /* @__PURE__ */ new Uint32Array(0);
 	badges = [];
 	reserve(index) {
 		if (index < this.capacity) return;
@@ -1198,8 +1258,13 @@ var NodeColumns = class {
 		this.fill = grow$1(this.fill, capacity);
 		this.stroke = grow$1(this.stroke, capacity);
 		this.strokeWidth = grow$1(this.strokeWidth, capacity);
+		this.outline = grow$1(this.outline, capacity);
+		this.outlineWidth = grow$1(this.outlineWidth, capacity);
 		this.opacity = grow$1(this.opacity, capacity);
 		this.screenUnits = grow$1(this.screenUnits, capacity);
+		this.labelBackground = growColor(this.labelBackground, capacity);
+		this.imageScale = grow$1(this.imageScale, capacity);
+		this.imageColor = growColor(this.imageColor, capacity);
 		this.capacity = capacity;
 	}
 	clear(index) {
@@ -1349,8 +1414,8 @@ function createEdgeLanes() {
 	}
 	function link(index, source, target) {
 		reserve(index);
-		const low = source < target ? source : target;
-		const high = source < target ? target : source;
+		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;
@@ -1468,18 +1533,42 @@ 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 readBackground(value, palette) {
+	if (value === true) return palette.id(defaults.labelBackground);
+	const color = toColor(value);
+	return color ? palette.id(color) : noColor;
+}
+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 = {
@@ -1565,12 +1654,19 @@ function createScene() {
 		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);
+		const outline = mark.outline ? toColor(mark.outline(datum)) : null;
+		nodes.outline[index] = palette.id(outline ?? defaults.nodeOutline);
+		nodes.outlineWidth[index] = mark.outline && !outline ? 0 : Math.max(0, finiteOr(mark.outlineWidth?.(datum), outline ? defaults.nodeOutlineWidth : 0));
 		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);
+		nodes.labelBackground[index] = readBackground(mark.labelBackground?.(datum), palette);
+		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) {
@@ -1710,6 +1806,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,
@@ -1730,6 +1867,12 @@ var DirtyRange = class {
 		return range;
 	}
 };
+const bits = /* @__PURE__ */ new Float32Array(1);
+const word = new Uint32Array(bits.buffer);
+function floatWord(value) {
+	bits[0] = value;
+	return word[0] ?? 0;
+}
 function grow(array, capacity) {
 	if (capacity <= array.length) return array;
 	const next = new Uint32Array(Math.max(capacity, array.length * 2));
@@ -1772,6 +1915,8 @@ var StateBuffers = class {
 		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;
+		this.paint[at + 2] = style?.outline ?? 4294967295;
+		this.paint[at + 3] = style?.outlineWidth === void 0 ? noPaint : floatWord(Math.max(0, style.outlineWidth));
 		if (kind === "nodes") this.labelFlags[bit] = this.numbers[at + 3] ?? -1;
 		this.tableVersion++;
 	}
@@ -2191,149 +2336,167 @@ var GlyphAtlas = class {
 		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;
+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);
 	}
-	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++;
-		}
+	get texture() {
+		return this.#texture ?? this.#placeholder;
 	}
-	#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);
+	layer(src) {
+		return this.#entries.get(src)?.layer ?? -1;
 	}
-};
-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;
+	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);
 	}
-	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;
+	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`);
 			}
-			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);
+			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;
 	}
-};
-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;
+	#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 sizes = nodes.size;
-	order.subarray(0, length).sort((a, b) => (sizes[b] ?? 0) - (sizes[a] ?? 0));
-	return {
-		length,
-		screenLabels
-	};
-}
-// src/webgl/shaders.ts
+};
+const badgeFont = .66;
+const badgeRing = 1.5;
+const platePadX = .45;
+const plateHalfOne = .75;
+const plateHalfTwo = 1.32;
+const plateRadius = .25;
 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;
@@ -2353,7 +2516,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; }
@@ -2362,7 +2525,7 @@ vec4 toClip(vec2 screen) {
 }
 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; };
+struct Look { float opacity; float strokeWidth; float halo; float label; uint fill; uint stroke; uint outline; float outlineWidth; };
 Look resolve(uint mask, Look look, int table) {
   bool opacity = false;
   bool strokeWidth = false;
@@ -2370,6 +2533,8 @@ Look resolve(uint mask, Look look, int table) {
   bool label = false;
   bool fill = false;
   bool stroke = false;
+  bool outline = false;
+  bool outlineWidth = false;
   float base = look.opacity;
   for (int bit = 0; bit < 32; bit++) {
     if (mask == 0u) break;
@@ -2384,6 +2549,8 @@ Look resolve(uint mask, Look look, int table) {
     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; }
+    if (!outline && paint.z != none) { look.outline = paint.z; outline = true; }
+    if (!outlineWidth && paint.w != none) { look.outlineWidth = uintBitsToFloat(paint.w); outlineWidth = true; }
   }
   return look;
 }
@@ -2393,11 +2560,23 @@ uniform sampler2D nodePosition;
 uniform sampler2D nodeStyle;
 uniform usampler2D nodePaint;
 uniform usampler2D nodeState;
+uniform usampler2D nodeDecor;
+Look nodeLook(ivec2 t, vec4 style, uvec4 paint, uint mask) {
+  float outlineWidth = uintBitsToFloat(texelFetch(nodeDecor, t, 0).w);
+  return resolve(mask, Look(style.z, style.y, 0.0, 1.0, paint.x, paint.y, paint.w, outlineWidth), 0);
+}
 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); }
+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;
@@ -2408,12 +2587,17 @@ const nodeVertex = `${header}${nodeData}
 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;
+out float vOutlineWidth;
 flat out uint vShape;
 flat out vec4 vFill;
 flat out vec4 vStroke;
+flat out vec4 vOutline;
 flat out float vOpacity;
 void main() {
   ivec2 t = texel(instance);
@@ -2426,29 +2610,42 @@ void main() {
     gl_Position = hidden;
     return;
   }
-  Look look = resolve(mask, Look(style.z, style.y, 0.0, 1.0, paint.x, paint.y), 0);
+  Look look = nodeLook(t, style, paint, mask);
   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);
+  float outline = max(look.outlineWidth, 0.0);
+  vLocal = corner * (radius + outline + halo + 1.5);
   vRadius = radius;
   vStrokeWidth = min(look.strokeWidth, radius * 0.5);
   vHaloWidth = halo;
+  vOutlineWidth = outline;
+  vOutline = paletteColor(look.outline);
   vShape = flags & 3u;
   vFill = paletteColor(look.fill);
   vStroke = paletteColor(look.stroke);
   vOpacity = look.opacity;
+  uvec4 image = texelFetch(nodeDecor, 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;
+in float vOutlineWidth;
 flat in uint vShape;
 flat in vec4 vFill;
 flat in vec4 vStroke;
+flat in vec4 vOutline;
 flat in float vOpacity;
 out vec4 fragColor;
 float shapeDistance(vec2 p, float r) {
@@ -2464,11 +2661,23 @@ 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 (vOutlineWidth > 0.0) {
+    float outer = 1.0 - smoothstep(vOutlineWidth - aa, vOutlineWidth + aa, d);
+    result = mix(vec4(vOutline.rgb * vOutline.a, vOutline.a), color, inside) * outer * vOpacity;
+  }
   if (vHaloWidth > 0.0) {
-    float h = haloColor.a * (1.0 - smoothstep(0.0, vHaloWidth, d)) * vOpacity;
+    float h = haloColor.a * (1.0 - smoothstep(0.0, vHaloWidth, d - vOutlineWidth)) * vOpacity;
     result += vec4(haloColor.rgb * h, h) * (1.0 - result.a);
   }
   if (result.a < 0.002) discard;
@@ -2504,7 +2713,7 @@ void main() {
     gl_Position = hidden;
     return;
   }
-  Look look = resolve(mask, Look(style.y, style.x, 0.0, 1.0, none, topology.z), 32);
+  Look look = resolve(mask, Look(style.y, style.x, 0.0, 1.0, none, topology.z, none, 0.0), 32);
   ivec2 s = texel(topology.x);
   ivec2 e = texel(topology.y);
   vec2 ps = toScreen(texelFetch(nodePosition, s, 0).xy);
@@ -2606,7 +2815,7 @@ void main() {
     gl_Position = hidden;
     return;
   }
-  Look look = resolve(mask, Look(style.y, style.x, 0.0, 1.0, none, topology.z), 32);
+  Look look = resolve(mask, Look(style.y, style.x, 0.0, 1.0, none, topology.z, none, 0.0), 32);
   ivec2 s = texel(topology.x);
   ivec2 e = texel(topology.y);
   vec2 a = toScreen(texelFetch(nodePosition, s, 0).xy);
@@ -2749,28 +2958,63 @@ 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 vec4 vPlate;
 flat out float vOpacity;
 void main() {
+  vPlate = vec4(0.0);
   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);
+  Look look = nodeLook(t, style, paint, mask);
+  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 below = nodeRadius(style) + max(look.outlineWidth, 0.0) + 3.0;
+  vec2 top = toScreen(texelFetch(nodePosition, t, 0).xy) + vec2(0.0, below);
+  if (kind == 3u) {
+    bool two = glyphRect.y > 1.5;
+    vec2 extent = vec2(
+      glyphRect.x * primary / atlasFontSize * 0.5 + primary * ${platePadX.toFixed(2)},
+      primary * (two ? ${plateHalfTwo.toFixed(2)} : ${plateHalfOne.toFixed(2)})
+    );
+    vUv = (corner * 2.0 - 1.0) * (extent + 1.0);
+    vPlate = vec4(extent, primary * ${plateRadius.toFixed(2)}, 1.0);
+    vScale = 1.0;
+    vInk = paletteColor(glyphKind >> 4u);
+    vHalo = 0.0;
+    gl_Position = toClip(top + vec2(0.0, primary * (two ? ${plateHalfTwo.toFixed(2)} : ${plateHalfOne.toFixed(2)})) + vUv);
+    return;
+  }
+  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);
-  vec2 anchor = toScreen(texelFetch(nodePosition, t, 0).xy) + vec2(0.0, below);
-  vUv = mix(glyphUv.xy, glyphUv.zw, corner);
+  vec2 anchor = top + vec2(0.0, kind == 1u ? primary * 1.25 : 0.0);
   vScale = scale;
-  vKind = glyphKind;
-  vOpacity = look.opacity;
+  vInk = kind == 0u ? labelInk : labelMuted;
+  vHalo = (glyphKind & 4u) != 0u ? 0.0 : 1.0;
   gl_Position = toClip(anchor + (glyphRect.xy + corner * glyphRect.zw) * scale);
 }
 `;
@@ -2778,21 +3022,88 @@ 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 vec4 vPlate;
 flat in float vOpacity;
 out vec4 fragColor;
 void main() {
+  if (vPlate.w > 0.5) {
+    vec2 q = abs(vUv) - vPlate.xy + vPlate.z;
+    float edge = length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - vPlate.z;
+    float aa = 0.5 / pixelRatio + 0.25;
+    float cover = vInk.a * (1.0 - smoothstep(-aa, aa, edge)) * vOpacity;
+    if (cover < 0.002) discard;
+    fragColor = vec4(vInk.rgb * cover, cover);
+    return;
+  }
   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 = nodeLook(t, style, paint, mask);
+  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,
@@ -2872,6 +3183,166 @@ const cornerLabel = new Float32Array([
 	1,
 	1
 ]);
+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;
+	#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++;
+		}
+	}
+	pushPlate(node, color, width, lines) {
+		if ((this.count + 1) * 32 > this.data.byteLength) this.#grow();
+		const at = this.count * 8;
+		this.#u32[at] = node;
+		this.#u32[at + 1] = 3 | color << 4;
+		this.#f32[at + 2] = width;
+		this.#f32[at + 3] = lines;
+		this.#f32[at + 4] = 0;
+		this.#f32[at + 5] = 0;
+		this.#u32[at + 6] = 0;
+		this.#u32[at + 7] = 0;
+		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 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;
+			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) + (nodes.outlineWidth[index] ?? 0);
+			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 * 3 < -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 textUnits = Math.max(line.width, secondary ? secondary.width * 11 / 12 : 0);
+			const background = nodes.labelBackground[index] ?? 4294967295;
+			const plated = background !== noColor;
+			const pad = plated ? primary * platePadX : 0;
+			const lines = secondary ? 2 : 1;
+			const top = y + radius + 3;
+			const bottom = top + (plated ? primary * 2 * (secondary ? plateHalfTwo : plateHalfOne) : primary * lineHeight * lines);
+			const left = x - textUnits * scale / 2 - pad;
+			const right = x + textUnits * scale / 2 + pad;
+			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 = highlight ? this.highlight : this.main;
+			const plate = plated ? 4 : 0;
+			if (plated) target.pushPlate(index, background, textUnits, lines);
+			target.push(index, plate, line, atlas.height);
+			if (secondary) target.push(index, 1 | plate, secondary, atlas.height);
+			placed++;
+		};
+		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;
+		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/renderer.ts
 const blocks = {
 	Frame: 0,
@@ -2879,6 +3350,7 @@ const blocks = {
 };
 const paletteWidth = 256;
 const labelInterval = 120;
+const badgeStride = 20;
 const units = {
 	palette: 0,
 	nodePosition: 1,
@@ -2888,7 +3360,9 @@ const units = {
 	edgeTopology: 5,
 	edgeStyle: 6,
 	edgeState: 7,
-	atlas: 8
+	atlas: 8,
+	images: 9,
+	nodeDecor: 10
 };
 function iota(length) {
 	const values = new Uint32Array(length);
@@ -2898,7 +3372,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,
@@ -2915,6 +3389,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 nodeDecor = 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);
@@ -2922,8 +3397,12 @@ function createWebglRenderer(canvas) {
 		nodePosition,
 		nodeStyle,
 		nodePaint,
-		nodeState
+		nodeState,
+		nodeDecor
 	];
+	const images = new ImageAtlas(gl, invalidate);
+	const floatBits = /* @__PURE__ */ new Float32Array(1);
+	const floatWord = new Uint32Array(floatBits.buffer);
 	const edgeTextures = [
 		edgeTopology,
 		edgeStyle,
@@ -2957,10 +3436,12 @@ 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
 	];
 	const locations = /* @__PURE__ */ new Map();
 	function prepare(program) {
@@ -2988,8 +3469,11 @@ function createWebglRenderer(canvas) {
 	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,
@@ -3002,8 +3486,11 @@ function createWebglRenderer(canvas) {
 		curveIndices,
 		labelMainBuffer,
 		labelHighlightBuffer,
+		badgeBuffer,
+		badgeGlyphBuffer,
 		warmIndex,
-		warmGlyph
+		warmGlyph,
+		warmBadge
 	];
 	const corner = (buffer, size = 2) => ({
 		name: "corner",
@@ -3062,18 +3549,39 @@ 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;
@@ -3107,6 +3615,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;
@@ -3117,6 +3632,76 @@ 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;
+		nodePaint.data[at + 3] = nodes.outline[index] ?? 4294967295;
+		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;
+		}
+		floatBits[0] = nodes.imageScale[index] ?? 1;
+		nodeDecor.data[at] = src ? images.layer(src) + 1 : 0;
+		nodeDecor.data[at + 1] = nodes.imageColor[index] ?? 4294967295;
+		nodeDecor.data[at + 2] = floatWord[0] ?? 0;
+		floatBits[0] = nodes.outlineWidth[index] ?? 0;
+		nodeDecor.data[at + 3] = floatWord[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;
+			nodeDecor.data[index * 4] = images.layer(src) + 1;
+			first = Math.min(first, index);
+			last = Math.max(last, index);
+		}
+		nodeDecor.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;
@@ -3156,6 +3741,7 @@ function createWebglRenderer(canvas) {
 		}
 		nodeStyle.upload(first, last);
 		nodePaint.upload(first, last);
+		nodeDecor.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)));
@@ -3298,7 +3884,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);
@@ -3315,6 +3902,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;
@@ -3351,7 +3939,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);
@@ -3366,10 +3959,16 @@ function createWebglRenderer(canvas) {
 					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;
@@ -3378,6 +3977,7 @@ 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,
@@ -3402,12 +4002,15 @@ function createWebglRenderer(canvas) {
 			[units.edgeTopology, edgeTopology.texture],
 			[units.edgeStyle, edgeStyle.texture],
 			[units.edgeState, edgeState.texture],
-			[units.atlas, atlasTexture]
+			[units.atlas, atlasTexture],
+			[units.nodeDecor, nodeDecor.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
@@ -3437,8 +4040,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 {
@@ -3510,6 +4176,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);
@@ -3517,6 +4184,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;
 				}
 			}
 		};
@@ -3529,7 +4197,8 @@ var StateRegistry = class {
 		learn("edges", changes.edges.added);
 		return {
 			selection,
-			hovered
+			hovered,
+			focused
 		};
 	}
 	takeHighlighted() {
@@ -3537,7 +4206,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);
 			}
@@ -3582,6 +4251,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;
@@ -3624,7 +4301,9 @@ function resolveStyle(style, id) {
 		...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) } : {}
+		...style.stroke !== void 0 ? { stroke: id(style.stroke) } : {},
+		...style.outline !== void 0 ? { outline: id(style.outline) } : {},
+		...style.outlineWidth !== void 0 || style.outline !== void 0 ? { outlineWidth: style.outlineWidth ?? defaults.nodeOutlineWidth } : {}
 	};
 }
 function createGraphHost(container, options, createRenderer) {
@@ -3636,11 +4315,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;
@@ -3668,7 +4351,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({
@@ -3680,6 +4363,7 @@ function createGraphHost(container, options, createRenderer) {
 		width: 0,
 		height: 0,
 		hovered: null,
+		focused: null,
 		selection: controlled ? registry.members("selected") : noKeys,
 		states: freeStates(),
 		positionsVersion: 0
@@ -3872,16 +4556,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;
@@ -3920,6 +4785,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;
@@ -4101,18 +4974,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);
@@ -4125,6 +5004,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;
@@ -4161,6 +5050,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);
@@ -4198,7 +5091,7 @@ function createGraphHost(container, options, createRenderer) {
 	}
 	function onContextRestored() {
 		contextLost = false;
-		renderer = createRenderer(canvas);
+		renderer = createRenderer(canvas, () => request());
 		full = true;
 		refreshTheme();
 	}
@@ -4219,6 +5112,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();
@@ -4253,6 +5153,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);
@@ -4315,6 +5224,7 @@ function createGraphHost(container, options, createRenderer) {
 				applyLayers();
 				if (registry.define(freeStateNames(definition.states))) patch({ states: freeStates() });
 				applyStyles();
+				applyKeyboard();
 				updateCursor();
 				request(true);
 			}
@@ -4327,6 +5237,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();
@@ -4340,4 +5251,4 @@ function mountGraph(container, options) {
 }
 export { freeStateNames as n, maxFreeStates as r, mountGraph as t };
 
-//# sourceMappingURL=mount-graph-DYOgD_ql.js.map
+//# sourceMappingURL=mount-graph-mObhwJ3e.js.map