@bruno00o/graph 0.2.0 → 0.3.0

package/dist/{mount-graph-DYOgD_ql.js → mount-graph-CzVfiIte.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;
@@ -994,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: {
@@ -1148,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,
@@ -1187,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;
@@ -1200,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) {
@@ -1349,8 +1396,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 +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 = {
@@ -1569,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) {
@@ -1710,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,
@@ -2191,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;
@@ -2259,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;
@@ -2290,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;
@@ -2328,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;
@@ -2353,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; }
@@ -2398,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;
@@ -2405,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;
@@ -2438,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;
@@ -2464,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);
@@ -2749,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);
@@ -2758,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);
 }
 `;
@@ -2778,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,
@@ -2879,6 +3246,7 @@ const blocks = {
 };
 const paletteWidth = 256;
 const labelInterval = 120;
+const badgeStride = 20;
 const units = {
 	palette: 0,
 	nodePosition: 1,
@@ -2888,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);
@@ -2898,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,
@@ -2915,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);
@@ -2922,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,
@@ -2957,10 +3332,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 +3365,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 +3382,11 @@ function createWebglRenderer(canvas) {
 		curveIndices,
 		labelMainBuffer,
 		labelHighlightBuffer,
+		badgeBuffer,
+		badgeGlyphBuffer,
 		warmIndex,
-		warmGlyph
+		warmGlyph,
+		warmBadge
 	];
 	const corner = (buffer, size = 2) => ({
 		name: "corner",
@@ -3062,18 +3445,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 +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;
@@ -3117,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;
@@ -3156,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)));
@@ -3298,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);
@@ -3315,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;
@@ -3351,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);
@@ -3366,10 +3852,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 +3870,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 +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
@@ -3437,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 {
@@ -3510,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);
@@ -3517,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;
 				}
 			}
 		};
@@ -3529,7 +4090,8 @@ var StateRegistry = class {
 		learn("edges", changes.edges.added);
 		return {
 			selection,
-			hovered
+			hovered,
+			focused
 		};
 	}
 	takeHighlighted() {
@@ -3537,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);
 			}
@@ -3582,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;
@@ -3636,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;
@@ -3668,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({
@@ -3680,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
@@ -3872,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;
@@ -3920,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;
@@ -4101,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);
@@ -4125,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;
@@ -4161,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);
@@ -4198,7 +4982,7 @@ function createGraphHost(container, options, createRenderer) {
 	}
 	function onContextRestored() {
 		contextLost = false;
-		renderer = createRenderer(canvas);
+		renderer = createRenderer(canvas, () => request());
 		full = true;
 		refreshTheme();
 	}
@@ -4219,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();
@@ -4253,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);
@@ -4315,6 +5115,7 @@ function createGraphHost(container, options, createRenderer) {
 				applyLayers();
 				if (registry.define(freeStateNames(definition.states))) patch({ states: freeStates() });
 				applyStyles();
+				applyKeyboard();
 				updateCursor();
 				request(true);
 			}
@@ -4327,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();
@@ -4340,4 +5142,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-CzVfiIte.js.map