@bruno00o/graph 0.3.0 → 0.4.0

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

@@ -835,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,
@@ -1001,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",
@@ -1025,6 +1029,9 @@ 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"),
@@ -1212,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);
 }
@@ -1225,10 +1237,13 @@ 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);
@@ -1243,10 +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 = grow$1(this.imageColor, capacity);
+		this.imageColor = growColor(this.imageColor, capacity);
 		this.capacity = capacity;
 	}
 	clear(index) {
@@ -1532,6 +1550,11 @@ function readBadges(mark, datum, palette) {
 	}
 	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,
@@ -1631,10 +1654,14 @@ 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.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;
@@ -1840,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));
@@ -1882,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++;
 	}
@@ -2450,149 +2485,12 @@ var ImageAtlas = class {
 		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;
-	#u32 = new Uint32Array(this.data);
-	#f32 = new Float32Array(this.data);
-	#u16 = new Uint16Array(this.data);
-	clear() {
-		this.count = 0;
-	}
-	push(node, kind, line, atlasHeight) {
-		for (const { glyph, x } of line.glyphs) {
-			if ((this.count + 1) * 32 > this.data.byteLength) this.#grow();
-			const at = this.count * 8;
-			this.#u32[at] = node;
-			this.#u32[at + 1] = kind;
-			this.#f32[at + 2] = x;
-			this.#f32[at + 3] = glyph.top;
-			this.#f32[at + 4] = glyph.width;
-			this.#f32[at + 5] = glyph.height;
-			const uv = at * 2 + 12;
-			this.#u16[uv] = Math.round(glyph.x / atlasWidth * 65535);
-			this.#u16[uv + 1] = Math.round(glyph.y / atlasHeight * 65535);
-			this.#u16[uv + 2] = Math.round((glyph.x + glyph.width) / atlasWidth * 65535);
-			this.#u16[uv + 3] = Math.round((glyph.y + glyph.height) / atlasHeight * 65535);
-			this.count++;
-		}
-	}
-	#grow() {
-		const data = /* @__PURE__ */ new ArrayBuffer(this.data.byteLength * 2);
-		new Uint8Array(data).set(new Uint8Array(this.data));
-		this.data = data;
-		this.#u32 = new Uint32Array(data);
-		this.#f32 = new Float32Array(data);
-		this.#u16 = new Uint16Array(data);
-	}
-};
-function labelVisible(mask, flags) {
-	let bits = mask >>> 0;
-	while (bits !== 0) {
-		const bit = 31 - Math.clz32(bits & -bits);
-		bits &= bits - 1;
-		const flag = flags[bit] ?? -1;
-		if (flag >= 0) return flag === 1;
-	}
-	return true;
-}
-var LabelLayer = class {
-	main = new GlyphBuffer();
-	highlight = new GlyphBuffer();
-	#occupancy = /* @__PURE__ */ new Uint8Array(0);
-	select(frame, atlas) {
-		this.main.clear();
-		this.highlight.clear();
-		const { nodes, positions, view, width, height } = frame;
-		const cols = Math.ceil(width / cell) + 1;
-		const rows = Math.ceil(height / cell) + 1;
-		if (this.#occupancy.length < cols * rows) this.#occupancy = new Uint8Array(cols * rows);
-		else this.#occupancy.fill(0, 0, cols * rows);
-		const occupancy = this.#occupancy;
-		const highlighted = new Set(frame.highlighted);
-		const worldPrimary = primarySize * Math.min(1, view.zoom);
-		let placed = 0;
-		const 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);
-			const x = (positions.x(index) - view.x) * view.zoom + width / 2;
-			const y = (positions.y(index) - view.y) * view.zoom + height / 2;
-			if (x < -400 || x > width + cullMargin) return;
-			if (y + radius > height || y + radius + primary * lineHeight * 2 < -3) return;
-			const line = atlas.line(label, "500");
-			const secondaryText = nodes.secondary[index];
-			const secondary = secondaryText ? atlas.line(secondaryText, "400") : null;
-			const scale = primary / 24;
-			const textWidth = Math.max(line.width * scale, secondary ? secondary.width * scale * 11 / 12 : 0);
-			const top = y + radius + 3;
-			const bottom = top + primary * lineHeight * (secondary ? 2 : 1);
-			const left = x - textWidth / 2;
-			const right = x + textWidth / 2;
-			if (right < 0 || left > width || bottom < 0 || top > height) return;
-			const c0 = Math.max(0, Math.floor(left / cell));
-			const c1 = Math.min(cols - 1, Math.floor(right / cell));
-			const r0 = Math.max(0, Math.floor(top / cell));
-			const r1 = Math.min(rows - 1, Math.floor(bottom / cell));
-			if (!force) {
-				for (let row = r0; row <= r1; row++) for (let col = c0; col <= c1; col++) if (occupancy[row * cols + col] === 1) return;
-			}
-			for (let row = r0; row <= r1; row++) occupancy.fill(1, row * cols + c0, row * cols + c1 + 1);
-			const target = 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) 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
-	};
-}
 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;
@@ -2627,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;
@@ -2635,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;
@@ -2649,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;
 }
@@ -2658,6 +2560,11 @@ 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;
@@ -2677,7 +2584,6 @@ uniform sampler2D edgeStyle;
 uniform usampler2D edgeState;
 `;
 const nodeVertex = `${header}${nodeData}
-uniform usampler2D nodeImage;
 in vec2 corner;
 in uint instance;
 out vec2 vLocal;
@@ -2687,9 +2593,11 @@ 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);
@@ -2702,19 +2610,22 @@ 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(nodeImage, t, 0);
+  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);
@@ -2730,9 +2641,11 @@ 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) {
@@ -2759,8 +2672,12 @@ void main() {
   }
   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;
@@ -2796,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);
@@ -2898,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);
@@ -3043,14 +2960,16 @@ out vec2 vUv;
 out float vScale;
 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;
@@ -3074,13 +2993,28 @@ void main() {
     gl_Position = hidden;
     return;
   }
+  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 + (kind == 1u ? primary * 1.25 : 0.0);
-  vec2 anchor = toScreen(texelFetch(nodePosition, t, 0).xy) + vec2(0.0, below);
+  vec2 anchor = top + vec2(0.0, kind == 1u ? primary * 1.25 : 0.0);
   vScale = scale;
   vInk = kind == 0u ? labelInk : labelMuted;
-  vHalo = 1.0;
+  vHalo = (glyphKind & 4u) != 0u ? 0.0 : 1.0;
   gl_Position = toClip(anchor + (glyphRect.xy + corner * glyphRect.zw) * scale);
 }
 `;
@@ -3090,9 +3024,19 @@ in vec2 vUv;
 in float vScale;
 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);
@@ -3127,7 +3071,7 @@ 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);
   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;
@@ -3239,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,
@@ -3258,7 +3362,7 @@ const units = {
 	edgeState: 7,
 	atlas: 8,
 	images: 9,
-	nodeImage: 10
+	nodeDecor: 10
 };
 function iota(length) {
 	const values = new Uint32Array(length);
@@ -3285,7 +3389,7 @@ function createWebglRenderer(canvas, invalidate = () => {}) {
 	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 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);
@@ -3294,11 +3398,11 @@ function createWebglRenderer(canvas, invalidate = () => {}) {
 		nodeStyle,
 		nodePaint,
 		nodeState,
-		nodeImage
+		nodeDecor
 	];
 	const images = new ImageAtlas(gl, invalidate);
-	const scaleBits = /* @__PURE__ */ new Float32Array(1);
-	const scaleWord = new Uint32Array(scaleBits.buffer);
+	const floatBits = /* @__PURE__ */ new Float32Array(1);
+	const floatWord = new Uint32Array(floatBits.buffer);
 	const edgeTextures = [
 		edgeTopology,
 		edgeStyle,
@@ -3528,6 +3632,7 @@ function createWebglRenderer(canvas, invalidate = () => {}) {
 		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) {
@@ -3535,10 +3640,12 @@ function createWebglRenderer(canvas, invalidate = () => {}) {
 			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;
+		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);
@@ -3552,11 +3659,11 @@ function createWebglRenderer(canvas, invalidate = () => {}) {
 		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;
+			nodeDecor.data[index * 4] = images.layer(src) + 1;
 			first = Math.min(first, index);
 			last = Math.max(last, index);
 		}
-		nodeImage.upload(first, last);
+		nodeDecor.upload(first, last);
 	}
 	function rebuildBadges() {
 		if (!input) return;
@@ -3634,7 +3741,7 @@ function createWebglRenderer(canvas, invalidate = () => {}) {
 		}
 		nodeStyle.upload(first, last);
 		nodePaint.upload(first, last);
-		nodeImage.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)));
@@ -3896,7 +4003,7 @@ function createWebglRenderer(canvas, invalidate = () => {}) {
 			[units.edgeStyle, edgeStyle.texture],
 			[units.edgeState, edgeState.texture],
 			[units.atlas, atlasTexture],
-			[units.nodeImage, nodeImage.texture]
+			[units.nodeDecor, nodeDecor.texture]
 		];
 		for (const [unit, texture] of textures) {
 			gl.activeTexture(gl.TEXTURE0 + unit);
@@ -4194,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) {
@@ -5142,4 +5251,4 @@ function mountGraph(container, options) {
 }
 export { freeStateNames as n, maxFreeStates as r, mountGraph as t };
 
-//# sourceMappingURL=mount-graph-CzVfiIte.js.map
+//# sourceMappingURL=mount-graph-mObhwJ3e.js.map