framefields 2.13.0 → 2.14.0

package/dist/{dist-D3BeAZ7X.mjs → dist--Uu5bQ_6.mjs}

@@ -1537,15 +1537,15 @@ var SignalRegistry = class {
 		res.lastProcessedFrame = cacheFrame;
 		res.lastFingerprint = fingerprint;
 		if (isSamplesArray(rawSamples) && rawSamples.length > 0) {
-			const flat = new Float32Array(numSamples);
+			const flat$1 = new Float32Array(numSamples);
 			const total = rawSamples.length;
 			const srcFps = Number(normalizedSd?.fps) || 24;
 			for (let i = 0; i < numSamples; i++) {
 				const t = elapsedTime + i / sampleRate;
 				const sIdx = Math.min(total - 1, Math.max(0, Math.round(t * srcFps)));
-				flat[i] = Number(rawSamples[sIdx]) || 0;
+				flat$1[i] = Number(rawSamples[sIdx]) || 0;
 			}
-			device.queue.writeBuffer(res.buffer, 0, flat);
+			device.queue.writeBuffer(res.buffer, 0, flat$1);
 		} else if (normalizedSd?.type === "generator" && (normalizedSd.customWGSL || normalizedSd.fnBody)) {
 			const signalEncoder = device.createCommandEncoder({ label: `signal_1d_encoder_${nodeId}` });
 			this.dispatch1DGenerator(device, signalEncoder, res, elapsedTime, duration$2, normalizedSd, numSamples, sampleRate, frame, fps);
@@ -1560,8 +1560,8 @@ var SignalRegistry = class {
 				device.queue.submit([signalEncoder.finish()]);
 			} else {
 				const val = Number(normalizedSd?.offset ?? 0);
-				const flat = new Float32Array(numSamples).fill(val);
-				device.queue.writeBuffer(res.buffer, 0, flat);
+				const flat$1 = new Float32Array(numSamples).fill(val);
+				device.queue.writeBuffer(res.buffer, 0, flat$1);
 			}
 		} else if (normalizedSd?.type === "signal_math") {
 			const sigAId = normalizedSd.signalA?.nodeId ?? `${nodeId}_a`;
@@ -1582,8 +1582,8 @@ var SignalRegistry = class {
 			device.queue.submit([signalEncoder.finish()]);
 		} else {
 			const val = Number(normalizedSd?.offset ?? 0);
-			const flat = new Float32Array(numSamples).fill(val);
-			device.queue.writeBuffer(res.buffer, 0, flat);
+			const flat$1 = new Float32Array(numSamples).fill(val);
+			device.queue.writeBuffer(res.buffer, 0, flat$1);
 		}
 		return res.buffer;
 	}
@@ -1649,7 +1649,7 @@ var SignalRegistry = class {
 			device.queue.submit([signalEncoder.finish()]);
 			return res.textureView;
 		} else if (isSamplesArray(rawSamples) && rawSamples.length > 0) {
-			const flat = new Float32Array(targetWidth * targetHeight * 4);
+			const flat$1 = new Float32Array(targetWidth * targetHeight * 4);
 			const total = rawSamples.length;
 			const baseTime = frame !== void 0 && fps !== void 0 && fps > 0 ? frame / fps : elapsedTime;
 			for (let i = 0; i < targetWidth; i++) {
@@ -1659,13 +1659,13 @@ var SignalRegistry = class {
 				const val = Number(rawSamples[sIdx]) || 0;
 				for (let row = 0; row < targetHeight; row++) {
 					const idx = (row * targetWidth + i) * 4;
-					flat[idx] = val;
-					flat[idx + 1] = val;
-					flat[idx + 2] = val;
-					flat[idx + 3] = val;
+					flat$1[idx] = val;
+					flat$1[idx + 1] = val;
+					flat$1[idx + 2] = val;
+					flat$1[idx + 3] = val;
 				}
 			}
-			const halfFlat = encodeFloat32ToFloat16(flat);
+			const halfFlat = encodeFloat32ToFloat16(flat$1);
 			device.queue.writeTexture({ texture: res.texture }, halfFlat, {
 				bytesPerRow: targetWidth * 8,
 				rowsPerImage: targetHeight
@@ -1691,14 +1691,14 @@ var SignalRegistry = class {
 			device.queue.submit([signalEncoder.finish()]);
 		} else {
 			const val = Number(normalizedSd?.offset ?? 0);
-			const flat = new Float32Array(targetWidth * targetHeight * 4);
+			const flat$1 = new Float32Array(targetWidth * targetHeight * 4);
 			for (let i = 0; i < targetWidth * targetHeight; i++) {
-				flat[i * 4] = val;
-				flat[i * 4 + 1] = val;
-				flat[i * 4 + 2] = val;
-				flat[i * 4 + 3] = 1;
+				flat$1[i * 4] = val;
+				flat$1[i * 4 + 1] = val;
+				flat$1[i * 4 + 2] = val;
+				flat$1[i * 4 + 3] = 1;
 			}
-			const halfFlat = encodeFloat32ToFloat16(flat);
+			const halfFlat = encodeFloat32ToFloat16(flat$1);
 			device.queue.writeTexture({ texture: res.texture }, halfFlat, {
 				bytesPerRow: targetWidth * 8,
 				rowsPerImage: targetHeight
@@ -16151,9 +16151,9 @@ var ShaderStore = class {
 	getCacheKey(nodeId, renderId) {
 		return `${renderId ?? "global"}:${nodeId}`;
 	}
-	register(nodeId, shader, renderId) {
-		this.store.set(this.getCacheKey(nodeId, renderId), shader);
-		if (renderId) this.store.set(this.getCacheKey(nodeId, void 0), shader);
+	register(nodeId, shader$1, renderId) {
+		this.store.set(this.getCacheKey(nodeId, renderId), shader$1);
+		if (renderId) this.store.set(this.getCacheKey(nodeId, void 0), shader$1);
 	}
 	get(nodeId, renderId) {
 		const res = this.store.get(this.getCacheKey(nodeId, renderId));
@@ -24530,9 +24530,11 @@ function drawParagraphNode(ctx, pass, props) {
 				scale = effect.scale;
 				if (blurOverride === void 0) blurAmount = effect.blurAmount;
 			}
+			const isHighlighted = props.highlightWordIndex !== void 0 && glyph.wordIndex === props.highlightWordIndex;
+			const spanColor = glyph.fill ? parseColor(glyph.fill) : void 0;
+			let fillColor = isHighlighted ? highlightColor : spanColor ?? baseColor;
 			let customScaleX = 1;
 			let customScaleY = 1;
-			let animatorColor;
 			let transZ = 0;
 			let chromaticShift = 0;
 			let dissolveProgress = 0;
@@ -24551,7 +24553,7 @@ function drawParagraphNode(ctx, pass, props) {
 					scaleY: customScaleY,
 					opacity,
 					blurAmount,
-					color: baseColor
+					color: fillColor
 				}, false, props.frame ?? 0, props.fps ?? 24, props.signals);
 				transX = kResult.transX;
 				transY = kResult.transY;
@@ -24561,7 +24563,7 @@ function drawParagraphNode(ctx, pass, props) {
 				customScaleY = kResult.scaleY;
 				opacity = kResult.opacity;
 				if (blurOverride === void 0) blurAmount = kResult.blurAmount;
-				if (kResult.color) animatorColor = kResult.color;
+				if (kResult.color) fillColor = kResult.color;
 				if (kResult.lineSpacing !== void 0) transY += computeLineLeadingDisplacement(glyph.lineIndex, layout.linesCount, kResult.lineSpacing, kResult.lineAnchor ?? 0);
 				transZ = kResult.transZ ?? 0;
 				chromaticShift = kResult.chromaticShift ?? 0;
@@ -24579,9 +24581,7 @@ function drawParagraphNode(ctx, pass, props) {
 				const contentWidth = layout.glyphs.length > 0 ? layout.glyphs[layout.glyphs.length - 1].x + fontSize : props.dstRect.width;
 				glyphX = evaluateMarqueeOffset(glyph.x, props.dstRect.width, contentWidth, props.marquee, elapsedSec);
 			}
-			const isHighlighted = props.highlightWordIndex !== void 0 && glyph.wordIndex === props.highlightWordIndex;
-			const spanColor = glyph.fill ? parseColor(glyph.fill) : void 0;
-			const col = animatorColor ?? colorOverride ?? (isHighlighted ? highlightColor : spanColor ?? baseColor);
+			const col = colorOverride ?? fillColor;
 			const writeInstance = (boldShift) => {
 				const offset = visibleCount * 24;
 				const fontScale = glyph.fontScale ?? fontSize / targetFont.unitsPerEm;
@@ -27990,6 +27990,118 @@ var ClipStack = class {
 	}
 };
 /**
+* Filling compound paths: every subpath is a contour, contours nest, and a
+* region is filled by SVG's nonzero rule (the windings of the contours
+* around it, summed, are not zero). Each filled contour is triangulated with
+* its direct children as holes, so a map's coastlines and islands, a
+* letter's counter or a ring fill as drawn instead of being bridged into
+* one polygon.
+*
+* Contours are taken not to cross each other (each pair is nested or
+* apart), which holds for maps, glyphs and icons; a contour that crosses
+* itself is still triangulated as well as earcut can.
+*/
+function signedArea(points) {
+	let area = 0;
+	for (let i = 0; i < points.length; i++) {
+		const a = points[i];
+		const b = points[(i + 1) % points.length];
+		area += a.x * b.y - b.x * a.y;
+	}
+	return area / 2;
+}
+function flat(points) {
+	const out = [];
+	for (const p of points) out.push(p.x, p.y);
+	return out;
+}
+function boxOf(points) {
+	const box = {
+		x0: Infinity,
+		y0: Infinity,
+		x1: -Infinity,
+		y1: -Infinity
+	};
+	for (const p of points) {
+		box.x0 = Math.min(box.x0, p.x);
+		box.y0 = Math.min(box.y0, p.y);
+		box.x1 = Math.max(box.x1, p.x);
+		box.y1 = Math.max(box.y1, p.y);
+	}
+	return box;
+}
+/** The centroid of the contour's largest triangle: inside it, away from its edges. */
+function insidePoint(points) {
+	const coords = flat(points);
+	const tris = earcut(coords);
+	const at = (k) => ({
+		x: coords[k * 2],
+		y: coords[k * 2 + 1]
+	});
+	let best = -1;
+	let inside = points[0];
+	for (let i = 0; i < tris.length; i += 3) {
+		const a = at(tris[i]);
+		const b = at(tris[i + 1]);
+		const c = at(tris[i + 2]);
+		const size = Math.abs((b.x - a.x) * (c.y - a.y) - (c.x - a.x) * (b.y - a.y));
+		if (size > best) {
+			best = size;
+			inside = {
+				x: (a.x + b.x + c.x) / 3,
+				y: (a.y + b.y + c.y) / 3
+			};
+		}
+	}
+	return inside;
+}
+function contains(points, p) {
+	let inside = false;
+	for (let i = 0, j = points.length - 1; i < points.length; j = i++) {
+		const a = points[i];
+		const b = points[j];
+		if (a.y > p.y !== b.y > p.y && p.x < (b.x - a.x) * (p.y - a.y) / (b.y - a.y) + a.x) inside = !inside;
+	}
+	return inside;
+}
+const encloses = (p, c) => p.box.x0 <= c.box.x0 && p.box.y0 <= c.box.y0 && p.box.x1 >= c.box.x1 && p.box.y1 >= c.box.y1 && contains(p.points, c.inside);
+/** Triangles filling closed `contours` by the nonzero rule, as flat [x, y, …] vertices. */
+function fillContours(contours) {
+	const all = contours.map((points) => ({
+		points,
+		area: signedArea(points),
+		box: boxOf(points),
+		inside: insidePoint(points),
+		parent: -1,
+		winding: 0
+	}));
+	const order = all.map((_, i) => i).sort((a, b) => Math.abs(all[b].area) - Math.abs(all[a].area));
+	order.forEach((ci, rank) => {
+		const c = all[ci];
+		for (let r = rank - 1; r >= 0; r--) {
+			const pi = order[r];
+			if (encloses(all[pi], c)) {
+				c.parent = pi;
+				break;
+			}
+		}
+		c.winding = (c.parent >= 0 ? all[c.parent].winding : 0) + Math.sign(c.area);
+	});
+	const out = [];
+	all.forEach((c, ci) => {
+		if (c.winding === 0) return;
+		const coords = flat(c.points);
+		const holeStarts = [];
+		for (const h of all) {
+			if (h.parent !== ci) continue;
+			holeStarts.push(coords.length / 2);
+			for (const p of h.points) coords.push(p.x, p.y);
+		}
+		for (const k of earcut(coords, holeStarts)) out.push(coords[k * 2], coords[k * 2 + 1]);
+	});
+	return new Float32Array(out);
+}
+/**
 * Sample a cubic bezier curve into linear segments.
 */
 function sampleCubicBezier(p0, p1, p2, p3, steps = 24) {
@@ -28097,8 +28209,26 @@ function sampleSvgArc(p0, rxIn, ryIn, rotationDeg, largeArc, sweep, p1) {
 * Parse an SVG path string (M, L, H, V, C, S, Q, T, A, Z) into line segments.
 */
 function parseSvgPathToSegments(d) {
+	return parseSvgPath(d).segments;
+}
+/**
+* The path's segments, and for each the subpath it belongs to (every M
+* starts one): fills need to know where each subpath begins.
+*/
+function parseSvgPath(d) {
 	const segments = [];
-	if (!d || typeof d !== "string") return segments;
+	const subpaths = [];
+	if (!d || typeof d !== "string") return {
+		segments,
+		subpaths
+	};
+	let subpath = -1;
+	const emit = (...added) => {
+		for (const seg of added) {
+			segments.push(seg);
+			subpaths.push(subpath);
+		}
+	};
 	const tokens = [];
 	const regex = /([a-df-z])|([-+]?(?:\d*\.\d+|\d+)(?:[eE][-+]?\d+)?)/gi;
 	let match;
@@ -28144,9 +28274,10 @@ function parseSvgPathToSegments(d) {
 							x,
 							y
 						};
+						subpath++;
 						first = false;
 					} else {
-						segments.push({
+						emit({
 							p0: current,
 							p1: {
 								x,
@@ -28171,7 +28302,7 @@ function parseSvgPathToSegments(d) {
 						x += current.x;
 						y += current.y;
 					}
-					segments.push({
+					emit({
 						p0: current,
 						p1: {
 							x,
@@ -28194,7 +28325,7 @@ function parseSvgPathToSegments(d) {
 						x,
 						y: current.y
 					};
-					segments.push({
+					emit({
 						p0: current,
 						p1: next
 					});
@@ -28211,7 +28342,7 @@ function parseSvgPathToSegments(d) {
 						x: current.x,
 						y
 					};
-					segments.push({
+					emit({
 						p0: current,
 						p1: next
 					});
@@ -28248,7 +28379,7 @@ function parseSvgPathToSegments(d) {
 						x,
 						y
 					};
-					segments.push(...sampleCubicBezier(current, p1, p2, end));
+					emit(...sampleCubicBezier(current, p1, p2, end));
 					current = end;
 					lastCubicControl = p2;
 				}
@@ -28283,7 +28414,7 @@ function parseSvgPathToSegments(d) {
 						x,
 						y
 					};
-					segments.push(...sampleCubicBezier(current, p1, p2, end));
+					emit(...sampleCubicBezier(current, p1, p2, end));
 					current = end;
 					lastCubicControl = p2;
 				}
@@ -28309,7 +28440,7 @@ function parseSvgPathToSegments(d) {
 						x,
 						y
 					};
-					segments.push(...sampleQuadraticBezier(current, p1, end));
+					emit(...sampleQuadraticBezier(current, p1, end));
 					current = end;
 					lastQuadControl = p1;
 				}
@@ -28336,7 +28467,7 @@ function parseSvgPathToSegments(d) {
 						x,
 						y
 					};
-					segments.push(...sampleQuadraticBezier(current, p1, end));
+					emit(...sampleQuadraticBezier(current, p1, end));
 					current = end;
 					lastQuadControl = p1;
 				}
@@ -28359,14 +28490,14 @@ function parseSvgPathToSegments(d) {
 						x,
 						y
 					};
-					segments.push(...sampleSvgArc(current, rx, ry, rotation, largeArc, sweep, end));
+					emit(...sampleSvgArc(current, rx, ry, rotation, largeArc, sweep, end));
 					current = end;
 				}
 				lastCubicControl = null;
 				lastQuadControl = null;
 				break;
 			case "Z":
-				if (Math.hypot(current.x - subpathStart.x, current.y - subpathStart.y) > 1e-5) segments.push({
+				if (Math.hypot(current.x - subpathStart.x, current.y - subpathStart.y) > 1e-5) emit({
 					p0: current,
 					p1: subpathStart
 				});
@@ -28377,7 +28508,10 @@ function parseSvgPathToSegments(d) {
 			default: break;
 		}
 	}
-	return segments;
+	return {
+		segments,
+		subpaths
+	};
 }
 /**
 * Trim linear path segments using arc-length parameterization.
@@ -28438,6 +28572,19 @@ function trimPathSegments(segments, trimStart, trimEnd, trimOffset = 0) {
 	}
 }
 /**
+* A dash pattern as SVG's `stroke-dasharray` writes it ("16 12", "4,8") or as
+* numbers, ready for {@link dashPathSegments}. Following SVG, an odd list is
+* repeated to make it even, and a negative or unreadable entry, or a pattern
+* of zero length, means a solid stroke (`undefined`).
+*/
+function parseDashArray(value) {
+	if (value === void 0) return void 0;
+	const parts = typeof value === "string" ? value.trim().split(/[\s,]+/).filter(Boolean).map(Number) : [...value];
+	if (parts.length === 0 || parts.some((n) => !Number.isFinite(n) || n < 0)) return void 0;
+	if (parts.reduce((sum, n) => sum + n, 0) <= 0) return void 0;
+	return parts.length % 2 === 1 ? [...parts, ...parts] : parts;
+}
+/**
 * Apply dash patterns along linear path segments.
 */
 function dashPathSegments(segments, dashArray, dashOffset = 0) {
@@ -28649,6 +28796,44 @@ function triangulatePolygon(contour) {
 	if (rem.length === 3) triangles.push(rem[0], rem[1], rem[2]);
 	return triangles;
 }
+/** A path's subpaths as closed point lists, degenerate ones dropped. */
+function pathContours(d) {
+	const bySubpath = /* @__PURE__ */ new Map();
+	const { segments, subpaths } = parseSvgPath(d);
+	segments.forEach((seg, i) => {
+		const id = subpaths[i] ?? 0;
+		let points = bySubpath.get(id);
+		if (!points) {
+			points = [seg.p0];
+			bySubpath.set(id, points);
+		}
+		points.push(seg.p1);
+	});
+	const contours = [];
+	for (const points of bySubpath.values()) {
+		const first = points[0];
+		const last = points[points.length - 1];
+		if (Math.hypot(last.x - first.x, last.y - first.y) < 1e-5) points.pop();
+		if (points.length >= 3 && Math.abs(signedArea(points)) > 1e-6) contours.push(points);
+	}
+	return contours;
+}
+/** Path fills are redrawn every frame from the same data: keep the last few. */
+const PATH_FILL_CACHE = 64;
+const pathFills = /* @__PURE__ */ new Map();
+/** Triangles filling path `d` by the nonzero rule (see {@link fillContours}). */
+function cachedPathFill(d) {
+	const hit = pathFills.get(d);
+	if (hit) {
+		pathFills.delete(d);
+		pathFills.set(d, hit);
+		return hit;
+	}
+	const tris = fillContours(pathContours(d));
+	pathFills.set(d, tris);
+	if (pathFills.size > PATH_FILL_CACHE) pathFills.delete(pathFills.keys().next().value);
+	return tris;
+}
 /**
 * Triangulate a shape geometry into a flat Float32Array of 2D vertex pairs [x, y, x, y, ...].
 */
@@ -28773,19 +28958,16 @@ function triangulateShape(config$1) {
 			yBotHead
 		]);
 	}
-	if (shapeType === "path" && config$1.path) {
-		const segments = parseSvgPathToSegments(config$1.path);
-		if (segments.length === 0) return new Float32Array(0);
-		const tris = triangulatePolygon(segments.map((s) => s.p0));
-		const out = new Float32Array(tris.length * 2);
-		for (let i = 0; i < tris.length; i++) {
-			out[i * 2] = tris[i].x;
-			out[i * 2 + 1] = tris[i].y;
-		}
-		return out;
-	}
+	if (shapeType === "path" && config$1.path) return cachedPathFill(config$1.path);
 	return new Float32Array(0);
 }
+/**
+* Strokes a path in one instanced draw: each instance is one straight
+* segment (p0, p1), expanded by the vertex shader into a quad that covers it
+* plus half the stroke width and 2 px of antialiasing; the fragment shader
+* shades the segment's capped distance field. Everything shared by the
+* path (transform, colour, width, cap) is in the uniforms.
+*/
 const pathWgsl = `
 struct Uniforms {
     transformCol0 : vec4<f32>,
@@ -28794,8 +28976,6 @@ struct Uniforms {
     params        : vec4<f32>, // x = opacity, y = surfaceWidth, z = surfaceHeight, w = strokeWidth
     color         : vec4<f32>,
     style         : vec4<f32>, // x = capType (0 = round, 1 = butt, 2 = square)
-    p0            : vec2<f32>,
-    p1            : vec2<f32>,
 };
 
 @group(0) @binding(0) var<uniform> u : Uniforms;
@@ -28803,17 +28983,30 @@ struct Uniforms {
 struct VSOut {
     @builtin(position) pos : vec4<f32>,
     @location(0) localPos  : vec2<f32>,
+    @location(1) @interpolate(flat) p0 : vec2<f32>,
+    @location(2) @interpolate(flat) p1 : vec2<f32>,
 };
 
-@vertex fn vs(@location(0) xy : vec2<f32>) -> VSOut {
+@vertex fn vs(@builtin(vertex_index) corner : u32, @location(0) seg : vec4<f32>) -> VSOut {
+    let p0 = seg.xy;
+    let p1 = seg.zw;
+    let d = p1 - p0;
+    let len = max(length(d), 1e-6);
+    let padding = u.params.w * 0.5 + 2.0;
+    let along = (d / len) * padding;
+    let across = vec2<f32>(-along.y, along.x);
+    // Triangle strip: p0 −along ∓across, then p1 +along ∓across.
+    let atEnd = corner >= 2u;
+    let side = select(-1.0, 1.0, (corner & 1u) == 1u);
+    let xy = select(p0 - along, p1 + along, atEnd) + across * side;
+
     let transform = mat3x3<f32>(u.transformCol0.xyz, u.transformCol1.xyz, u.transformCol2.xyz);
     let p = transform * vec3<f32>(xy, 1.0);
-    
     let surfaceSize = u.params.yz;
     let clipX = (p.x / surfaceSize.x) * 2.0 - 1.0;
     let clipY = 1.0 - (p.y / surfaceSize.y) * 2.0;
 
-    return VSOut(vec4<f32>(clipX, clipY, 0.0, 1.0), xy);
+    return VSOut(vec4<f32>(clipX, clipY, 0.0, 1.0), xy, p0, p1);
 }
 
 fn sdSegmentWithCap(p: vec2<f32>, a: vec2<f32>, b: vec2<f32>, radius: f32, capType: f32) -> f32 {
@@ -28825,10 +29018,10 @@ fn sdSegmentWithCap(p: vec2<f32>, a: vec2<f32>, b: vec2<f32>, radius: f32, capTy
     let dir = ba / len;
     let normal = vec2<f32>(-dir.y, dir.x);
     let pa = p - a;
-    
+
     let proj = dot(pa, dir);
     let perp = abs(dot(pa, normal));
-    
+
     if (capType > 0.5 && capType < 1.5) {
         // Butt cap: terminates strictly at endpoints a and b
         let dx = max(-proj, proj - len);
@@ -28852,15 +29045,15 @@ fn sdSegmentWithCap(p: vec2<f32>, a: vec2<f32>, b: vec2<f32>, radius: f32, capTy
 
 @fragment fn fs(in : VSOut) -> @location(0) vec4<f32> {
     let radius = u.params.w * 0.5;
-    let d = sdSegmentWithCap(in.localPos, u.p0, u.p1, radius, u.style.x);
-    
+    let d = sdSegmentWithCap(in.localPos, in.p0, in.p1, radius, u.style.x);
+
     let fw = max(fwidth(d), 1e-5);
     let edgeAlpha = clamp(0.5 - d / fw, 0.0, 1.0);
     let alpha = u.color.a * u.params.x * edgeAlpha;
     if (alpha <= 0.0) {
         discard;
     }
-    
+
     return vec4<f32>(u.color.rgb * alpha, alpha);
 }
 `;
@@ -28917,127 +29110,111 @@ function createVec2Pipeline(device, options) {
 		primitive: { topology: options.topology }
 	});
 }
+/** A straight segment's two ends, the instance the stroke shader expands into a quad. */
+const SEGMENT_FLOATS = 4;
 var PathPipeline = class {
 	device;
 	pipeline;
 	maxPipeline;
 	uniformLayout;
 	uniformPool;
-	vertexPool;
+	segmentPool;
 	uniformBindGroupCache = new UniformBindGroupCache();
-	scratchData = new Float32Array(28);
+	scratchData = new Float32Array(24);
 	constructor(device, format) {
 		this.device = device;
 		this.uniformPool = new BufferPool(4096, GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST);
-		this.vertexPool = new BufferPool(4096, GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST);
+		this.segmentPool = new BufferPool(4096, GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST);
 		const module$1 = device.createShaderModule({
 			label: "path.wgsl",
 			code: pathWgsl
 		});
 		this.uniformLayout = createUniformLayout(device);
-		this.pipeline = createVec2Pipeline(device, {
-			label: "PathPipeline",
-			module: module$1,
-			uniformLayout: this.uniformLayout,
-			format,
-			topology: "triangle-strip"
+		const create = (label, blend) => device.createRenderPipeline({
+			label,
+			layout: device.createPipelineLayout({ bindGroupLayouts: [this.uniformLayout] }),
+			vertex: {
+				module: module$1,
+				entryPoint: "vs",
+				buffers: [{
+					arrayStride: SEGMENT_FLOATS * 4,
+					stepMode: "instance",
+					attributes: [{
+						shaderLocation: 0,
+						offset: 0,
+						format: "float32x4"
+					}]
+				}]
+			},
+			fragment: {
+				module: module$1,
+				entryPoint: "fs",
+				targets: [{
+					format,
+					blend
+				}]
+			},
+			primitive: { topology: "triangle-strip" }
 		});
-		this.maxPipeline = createVec2Pipeline(device, {
-			label: "PathPipeline.max",
-			module: module$1,
-			uniformLayout: this.uniformLayout,
-			format,
-			topology: "triangle-strip",
-			blend: {
-				color: {
-					srcFactor: "one",
-					dstFactor: "one",
-					operation: "max"
-				},
-				alpha: {
-					srcFactor: "one",
-					dstFactor: "one",
-					operation: "max"
-				}
+		this.pipeline = create("PathPipeline", PREMULTIPLIED_OVER);
+		this.maxPipeline = create("PathPipeline.max", {
+			color: {
+				srcFactor: "one",
+				dstFactor: "one",
+				operation: "max"
+			},
+			alpha: {
+				srcFactor: "one",
+				dstFactor: "one",
+				operation: "max"
 			}
 		});
 	}
 	resetPools() {
 		this.uniformPool.reset();
-		this.vertexPool.reset();
+		this.segmentPool.reset();
 	}
 	drawPath(pass, transformStack, pathStr, color, strokeWidth, surfaceWidth, surfaceHeight, opts) {
-		let segments = parseSvgPathToSegments(pathStr);
-		if (segments.length === 0) return;
-		if (opts?.trimStart !== void 0 || opts?.trimEnd !== void 0 || opts?.trimOffset !== void 0) segments = trimPathSegments(segments, opts.trimStart ?? 0, opts.trimEnd ?? 1, opts.trimOffset ?? 0);
-		if (opts?.strokeDashArray && opts.strokeDashArray.length > 0) segments = dashPathSegments(segments, opts.strokeDashArray, opts.strokeDashOffset ?? 0);
-		if (segments.length === 0) return;
-		const c = parseColor(color);
-		const opacity = opts?.opacity ?? 1;
-		let capType = 0;
-		if (opts?.strokeLineCap === "butt") capType = 1;
-		else if (opts?.strokeLineCap === "square") capType = 2;
-		for (const segment of segments) this.drawSegment(pass, transformStack, segment.p0, segment.p1, c, strokeWidth, capType, surfaceWidth, surfaceHeight, opacity, opts);
+		this.drawSegments(pass, transformStack, parseSvgPathToSegments(pathStr), color, strokeWidth, surfaceWidth, surfaceHeight, opts);
 	}
 	drawSegments(pass, transformStack, segments, color, strokeWidth, surfaceWidth, surfaceHeight, opts) {
 		let activeSegments = segments;
 		if (opts?.trimStart !== void 0 || opts?.trimEnd !== void 0 || opts?.trimOffset !== void 0) activeSegments = trimPathSegments(activeSegments, opts.trimStart ?? 0, opts.trimEnd ?? 1, opts.trimOffset ?? 0);
 		if (opts?.strokeDashArray && opts.strokeDashArray.length > 0) activeSegments = dashPathSegments(activeSegments, opts.strokeDashArray, opts.strokeDashOffset ?? 0);
-		if (activeSegments.length === 0) return;
+		const ends = new Float32Array(activeSegments.length * SEGMENT_FLOATS);
+		let count = 0;
+		for (const { p0, p1 } of activeSegments) {
+			if (Math.hypot(p1.x - p0.x, p1.y - p0.y) < 1e-6) continue;
+			const at = count++ * SEGMENT_FLOATS;
+			ends[at] = p0.x;
+			ends[at + 1] = p0.y;
+			ends[at + 2] = p1.x;
+			ends[at + 3] = p1.y;
+		}
+		if (count === 0) return;
 		const c = parseColor(color);
-		const opacity = opts?.opacity ?? 1;
-		let capType = 0;
-		if (opts?.strokeLineCap === "butt") capType = 1;
-		else if (opts?.strokeLineCap === "square") capType = 2;
-		for (const segment of activeSegments) this.drawSegment(pass, transformStack, segment.p0, segment.p1, c, strokeWidth, capType, surfaceWidth, surfaceHeight, opacity, opts);
-	}
-	drawSegment(pass, transformStack, p0, p1, color, strokeWidth, capType, surfaceWidth, surfaceHeight, opacity, opts) {
 		const data = this.scratchData;
-		transformStack.packIntoBuffer(data, opacity, surfaceWidth, surfaceHeight, opts?.transform);
+		transformStack.packIntoBuffer(data, opts?.opacity ?? 1, surfaceWidth, surfaceHeight, opts?.transform);
 		data[15] = strokeWidth;
-		data[16] = color.r;
-		data[17] = color.g;
-		data[18] = color.b;
-		data[19] = color.a;
-		data[20] = capType;
+		data[16] = c.r;
+		data[17] = c.g;
+		data[18] = c.b;
+		data[19] = c.a;
+		data[20] = opts?.strokeLineCap === "butt" ? 1 : opts?.strokeLineCap === "square" ? 2 : 0;
 		data[21] = 0;
 		data[22] = 0;
 		data[23] = 0;
-		data[24] = p0.x;
-		data[25] = p0.y;
-		data[26] = p1.x;
-		data[27] = p1.y;
 		const uniformBuffer = this.uniformPool.getBuffer(this.device, data);
-		const dx = p1.x - p0.x;
-		const dy = p1.y - p0.y;
-		const len = Math.sqrt(dx * dx + dy * dy);
-		if (len < 1e-6) return;
-		const padding = strokeWidth * .5 + 2;
-		const nx = dx / len * padding;
-		const ny = dy / len * padding;
-		const px = -ny;
-		const py = nx;
-		const vertexData = new Float32Array([
-			p0.x - nx - px,
-			p0.y - ny - py,
-			p0.x - nx + px,
-			p0.y - ny + py,
-			p1.x + nx - px,
-			p1.y + ny - py,
-			p1.x + nx + px,
-			p1.y + ny + py
-		]);
-		const vertexBuffer = this.vertexPool.getBuffer(this.device, vertexData);
-		const pipeline = opts?.blendMode === "max" ? this.maxPipeline : this.pipeline;
-		pass.setPipeline(pipeline);
-		const uniformBindGroup = this.uniformBindGroupCache.getBindGroup(this.device, this.uniformLayout, uniformBuffer);
-		pass.setBindGroup(0, uniformBindGroup);
-		pass.setVertexBuffer(0, vertexBuffer);
-		pass.draw(4);
+		const segmentBuffer = this.segmentPool.getBuffer(this.device, ends.subarray(0, count * SEGMENT_FLOATS));
+		const useMax = opts?.blendMode === "max";
+		pass.setPipeline(useMax ? this.maxPipeline : this.pipeline);
+		pass.setBindGroup(0, this.uniformBindGroupCache.getBindGroup(this.device, this.uniformLayout, uniformBuffer));
+		pass.setVertexBuffer(0, segmentBuffer);
+		pass.draw(4, count);
 	}
 	destroy() {
 		this.uniformPool.destroy();
-		this.vertexPool.destroy();
+		this.segmentPool.destroy();
 		this.uniformBindGroupCache.destroy();
 	}
 };
@@ -30806,8 +30983,13 @@ var BloomPipeline = class {
 	module;
 	pipelineLayout;
 	sampler;
-	mips = [];
-	mipKey = "";
+	/**
+	* Mip chains by size and depth. Scenes with different bloom share a frame
+	* (one command buffer), so a chain stays alive until the frame is done:
+	* chains not used in a frame are destroyed at the next `resetPools`.
+	*/
+	chains = /* @__PURE__ */ new Map();
+	usedThisFrame = /* @__PURE__ */ new Set();
 	placeholder;
 	uniformPool = new BufferPool(48, GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST);
 	constructor(device) {
@@ -30910,17 +31092,18 @@ var BloomPipeline = class {
 		}
 		return pipe$1;
 	}
-	ensureMips(width, height, levels) {
+	mipChain(width, height, levels) {
 		const key = `${width}x${height}x${levels}`;
-		if (key === this.mipKey) return;
-		for (const t of this.mips) t.destroy();
-		this.mips = [];
+		this.usedThisFrame.add(key);
+		const cached$1 = this.chains.get(key);
+		if (cached$1) return cached$1;
+		const chain = [];
 		let w = width;
 		let h = height;
 		for (let i = 0; i < levels; i++) {
 			w = Math.max(1, Math.floor(w / 2));
 			h = Math.max(1, Math.floor(h / 2));
-			this.mips.push(this.device.createTexture({
+			chain.push(this.device.createTexture({
 				label: `BloomMip${i}`,
 				size: {
 					width: w,
@@ -30931,7 +31114,8 @@ var BloomPipeline = class {
 			}));
 			if (w === 1 && h === 1) break;
 		}
-		this.mipKey = key;
+		this.chains.set(key, chain);
+		return chain;
 	}
 	uniforms(texelW, texelH, opts) {
 		const data = new Float32Array([
@@ -31009,8 +31193,7 @@ var BloomPipeline = class {
 			mode: display ? 1 : 0
 		};
 		const levels = Math.max(1, Math.min(8, Math.round(options.radius ?? 6)));
-		this.ensureMips(source.width, source.height, levels);
-		const mips = this.mips;
+		const mips = this.mipChain(source.width, source.height, levels);
 		const u = (w, h) => this.uniforms(1 / w, 1 / h, opts);
 		const glowSource = hdrSource ?? source;
 		this.pass(encoder, this.prefilterPipe, mips[0].createView(), glowSource, this.placeholder, u(glowSource.width, glowSource.height), "clear");
@@ -31024,12 +31207,22 @@ var BloomPipeline = class {
 		}
 		this.pass(encoder, this.compositePipe(dest.format), dest.createView(), mips[0], source, u(mips[0].width, mips[0].height), "clear");
 	}
-	/** Call once per frame before `apply`: recycles the per-pass uniforms. */
+	/**
+	* Call once per frame before `apply`: recycles the per-pass uniforms and
+	* frees the mip chains the last frame did not use.
+	*/
 	resetPools() {
 		this.uniformPool.reset();
+		for (const [key, chain] of this.chains) {
+			if (this.usedThisFrame.has(key)) continue;
+			for (const t of chain) t.destroy();
+			this.chains.delete(key);
+		}
+		this.usedThisFrame.clear();
 	}
 	destroy() {
-		for (const t of this.mips) t.destroy();
+		for (const chain of this.chains.values()) for (const t of chain) t.destroy();
+		this.chains.clear();
 		this.placeholder.destroy();
 		this.uniformPool.destroy();
 	}
@@ -31418,15 +31611,56 @@ struct Shaded {
     hdr : vec3<f32>,
 };
 
+// Two-sided, art-directed diffuse lighting. Shares the full direct-light
+// storage, range/spot attenuation and PCF shadows with the physical renderer.
+fn shadeToon(worldPos: vec3<f32>, worldNormal: vec3<f32>, base: vec3<f32>, ambient: f32, shade: vec4<f32>, lightTint: vec4<f32>, params: vec4<f32>) -> vec3<f32> {
+    if (lights.params.y < 0.5) { return base; }
+    var N = normalize(worldNormal);
+    let V = normalize(cam.cameraPos.xyz - worldPos);
+    if (dot(N, V) < 0.0) { N = -N; }
+    var illumination = lights.ambientColor.rgb * ambient * lightTint.rgb;
+    var visibility = clamp(max(illumination.r, max(illumination.g, illumination.b)), 0.0, 1.0);
+    for (var i = 0; i < i32(lights.params.x); i++) {
+        let ls = sampleLight(i, worldPos);
+        if (!ls.valid) { continue; }
+        let cosine = dot(N, ls.L);
+        let softness = max(params.x, 0.0001);
+        let band = smoothstep(lightTint.w - softness * 0.5, lightTint.w + softness * 0.5, cosine);
+        let light = directLights[i];
+        let strength = band * ls.attenuation * light.colorIntensity.w * shadowFactor(worldPos, N, i);
+        let contribution = light.colorIntensity.rgb * lightTint.rgb * strength * mix(1.0, max(cosine, 0.0), shade.w);
+        // Remove the shadow floor only as actual modeled light arrives.
+        // Using the pre-diffuse band here creates a dark ring between the
+        // shadow floor and the lit region, which slides as a surface turns.
+        let energy = max(contribution.r, max(contribution.g, contribution.b));
+        visibility = max(visibility, clamp(energy, 0.0, 1.0));
+        illumination += contribution;
+    }
+    return base * (shade.rgb * (1.0 - visibility) + illumination);
+}
+
+// The existing linear-depth attachment doubles as a geometry buffer:
+// r = optical depth, gb = octahedral world normal, a = outline participation.
+// Geometric normals deliberately ignore normal maps and texture seams.
+fn geometryPixel(depth: f32, normal: vec3<f32>, outlined: f32) -> vec4<f32> {
+    let n = normalize(normal);
+    let p = n.xy / max(abs(n.x) + abs(n.y) + abs(n.z), 1e-6);
+    let signs = select(vec2<f32>(-1.0), vec2<f32>(1.0), p >= vec2<f32>(0.0));
+    let oct = select((1.0 - abs(p.yx)) * signs, p, n.z >= 0.0);
+    return vec4<f32>(depth, oct * 0.5 + 0.5, outlined);
+}
+
 /// Shades a surface for the scene's mode.
 /// material: x shininess, y specularIntensity, z ambientIntensity, w mode (0 unlit).
 /// pbr: x roughness (<0 = default), y metallic, z/w unused.
 /// emissive: rgb sRGB color, w strength.
-fn shadeSurfaceFull(worldPos: vec3<f32>, worldNormal: vec3<f32>, baseColor: vec3<f32>, material: vec4<f32>, pbr: vec4<f32>, emissive: vec4<f32>) -> Shaded {
+fn shadeSurfaceFull(worldPos: vec3<f32>, worldNormal: vec3<f32>, baseColor: vec3<f32>, material: vec4<f32>, pbr: vec4<f32>, emissive: vec4<f32>, toonShadow: vec4<f32>, toonLight: vec4<f32>, toonParams: vec4<f32>) -> Shaded {
     var out: Shaded;
     if (lights.params.z < 0.5) {
         var c = baseColor;
-        if (material.w >= 0.5) {
+        if (material.w > 1.5) {
+            c = shadeToon(worldPos, worldNormal, baseColor, material.z, toonShadow, toonLight, toonParams);
+        } else if (material.w >= 0.5) {
             c = applyLighting3D(worldPos, worldNormal, baseColor, material);
         }
         c += emissive.rgb * emissive.w;
@@ -31437,6 +31671,8 @@ fn shadeSurfaceFull(worldPos: vec3<f32>, worldNormal: vec3<f32>, baseColor: vec3
     var radiance: vec3<f32>;
     if (material.w < 0.5) {
         radiance = srgbToLinear(baseColor);
+    } else if (material.w > 1.5) {
+        radiance = srgbToLinear(shadeToon(worldPos, worldNormal, baseColor, material.z, toonShadow, toonLight, toonParams));
     } else {
         let rough = select(pbr.x, 0.5, pbr.x < 0.0);
         radiance = shadePhysical(worldPos, worldNormal, srgbToLinear(baseColor), rough, clamp(pbr.y, 0.0, 1.0), material.z);
@@ -31472,9 +31708,6 @@ fn shadeSurfaceFull(worldPos: vec3<f32>, worldNormal: vec3<f32>, baseColor: vec3
     return out;
 }
 
-fn shadeSurface(worldPos: vec3<f32>, worldNormal: vec3<f32>, baseColor: vec3<f32>, material: vec4<f32>, pbr: vec4<f32>, emissive: vec4<f32>) -> vec3<f32> {
-    return shadeSurfaceFull(worldPos, worldNormal, baseColor, material, pbr, emissive).display;
-}
 `;
 /** Group-3 bindings every lit 3D shader declares. */
 const lightsBindingsWgsl = `
@@ -31785,7 +32018,7 @@ fn fs_mrt(in: VsOut) -> FsOutputMrt {
     var out: FsOutputMrt;
     let s = shadeFloor(in);
     out.color = vec4<f32>(s.display * s.alpha, s.alpha);
-    out.linearDepth = vec4<f32>(s.linearDepth, 0.0, 0.0, 1.0);
+    out.linearDepth = geometryPixel(s.linearDepth, vec3<f32>(0.0, -1.0, 0.0), 1.0);
     out.depth = s.depth;
     return out;
 }
@@ -31805,7 +32038,7 @@ fn fs_mrt_bloom(in: VsOut) -> FsOutputMrtBloom {
     var out: FsOutputMrtBloom;
     let s = shadeFloor(in);
     out.color = vec4<f32>(s.display * s.alpha, s.alpha);
-    out.linearDepth = vec4<f32>(s.linearDepth, 0.0, 0.0, 1.0);
+    out.linearDepth = geometryPixel(s.linearDepth, vec3<f32>(0.0, -1.0, 0.0), 1.0);
     out.hdr = vec4<f32>(s.hdr * s.alpha, 1.0);
     out.depth = s.depth;
     return out;
@@ -32525,6 +32758,9 @@ struct ModelUniforms {
     shade          : vec4<f32>, // rgb = toon shadow-side color multiplier, a = alpha cutoff (0 = none)
     pbr            : vec4<f32>, // x = roughness (<0 = default), y = metallic
     emissive       : vec4<f32>, // rgb = sRGB emissive color, w = strength
+    toonShadow     : vec4<f32>, // rgb shadow-side multiplier, w diffuse modelling
+    toonLight      : vec4<f32>, // rgb lit-side multiplier, w terminator threshold
+    toonParams     : vec4<f32>, // x terminator softness, y outline participation
     maps           : vec4<f32>, // x = normal scale (0 = no map), y = occlusion strength, z = has metallic-roughness map, w = has emissive map
 };
 
@@ -32665,37 +32901,6 @@ fn vs_main(
     return out;
 }
 
-// Toon (MToon-style): the base color as authored where the light reaches,
-// the shade color past a soft terminator. Highlights stay out: the texture
-// already paints them.
-fn toonLighting(in: VertexOutput, baseColor: vec3<f32>) -> vec3<f32> {
-    var N = normalize(in.worldNormal);
-    let V = normalize(cam.cameraPos.xyz - in.worldPos);
-    if (dot(N, V) < 0.0) {
-        N = -N;
-    }
-    var lit = 0.0;
-    let numLights = i32(lights.params.x);
-    for (var i = 0; i < 8; i++) {
-        if (i >= numLights) {
-            break;
-        }
-        let light = lights.lights[i];
-        let lightType = light.posType.w;
-        var L = vec3<f32>(0.0, 0.0, 1.0);
-        if (lightType > 0.5 && lightType < 1.5) {
-            L = normalize(-light.dirRadius.xyz);
-        } else if (lightType >= 1.5) {
-            L = normalize(light.posType.xyz - in.worldPos);
-        } else {
-            continue;
-        }
-        let terminator = smoothstep(-0.05, 0.2, dot(N, L));
-        lit = max(lit, terminator * min(light.colorIntensity.w, 1.0));
-    }
-    return baseColor * mix(model.shade.rgb, vec3<f32>(1.0), lit);
-}
-
 struct MeshFragment {
     color : vec4<f32>, // premultiplied display color
     hdr   : vec4<f32>, // premultiplied scene radiance (bloom source)
@@ -32763,7 +32968,7 @@ fn shadeGlass(in: VertexOutput, Nin: vec3<f32>, tint: vec3<f32>, alpha: f32, rim
     let transmitted = col * depthTint * (1.0 - 0.45 * rim * rim);
     let f0 = pow((ior - 1.0) / (ior + 1.0), 2.0);
     let F = f0 + (1.0 - f0) * pow(rim, 5.0);
-    let lit = shadeSurfaceFull(in.worldPos, N, vec3<f32>(0.0), model.materialParams, vec4<f32>(model.pbr.x, 0.0, 0.0, 0.0), vec4<f32>(0.0));
+    let lit = shadeSurfaceFull(in.worldPos, N, vec3<f32>(0.0), model.materialParams, vec4<f32>(model.pbr.x, 0.0, 0.0, 0.0), vec4<f32>(0.0), model.toonShadow, model.toonLight, model.toonParams);
     // Grazing faces mirror the room; keep that faint so dark scenes stay dark
     // and the studio highlights below carry the shape.
     let sheen = vec3<f32>(0.9, 0.94, 1.0) * F * 0.22 + tint * 0.05 * (0.4 + rim);
@@ -32811,19 +33016,6 @@ fn shadeMesh(in: VertexOutput, isFront: bool) -> MeshFragment {
 
     let baseRgb = texColor.rgb * in.color.rgb * model.colorTint.rgb;
     var out: MeshFragment;
-    if (model.materialParams.w > 1.5) {
-        var toon = baseRgb;
-        if (lights.params.y >= 0.5) {
-            toon = toonLighting(in, baseRgb);
-        }
-        if (model.params.w > 0.5 && (in.emissive.w > 0.0 || dot(in.emissive.rgb, in.emissive.rgb) > 0.0)) {
-            toon += in.emissive.rgb * in.emissive.w;
-        }
-        out.color = vec4<f32>(toon * alpha, alpha);
-        out.hdr = vec4<f32>(srgbToLinear(toon) * alpha, alpha);
-        return out;
-    }
-
     var N = normalize(in.worldNormal);
     if (model.maps.x > 0.0) {
         var tn = normalSample * 2.0 - 1.0;
@@ -32853,7 +33045,7 @@ fn shadeMesh(in: VertexOutput, isFront: bool) -> MeshFragment {
     if (model.params.w > 0.5 && (in.emissive.w > 0.0 || dot(in.emissive.rgb, in.emissive.rgb) > 0.0)) {
         emissive = in.emissive;
     }
-    let shaded = shadeSurfaceFull(in.worldPos, N, baseRgb, material, pbr, emissive);
+    let shaded = shadeSurfaceFull(in.worldPos, N, baseRgb, material, pbr, emissive, model.toonShadow, model.toonLight, model.toonParams);
     out.color = vec4<f32>(shaded.display * alpha, alpha);
     out.hdr = vec4<f32>(shaded.hdr * alpha, alpha);
     return out;
@@ -32884,7 +33076,7 @@ fn fs_single(in: VertexOutput, @builtin(front_facing) isFront: bool) -> @locatio
 fn fs_mrt(in: VertexOutput, @builtin(front_facing) isFront: bool) -> MrtOutput {
     var out: MrtOutput;
     out.color = shadeMesh(in, isFront).color;
-    out.depth = vec4<f32>(in.linearDepth, 0.0, 0.0, 1.0);
+    out.depth = geometryPixel(in.linearDepth, in.worldNormal, model.toonParams.y);
     return out;
 }
 
@@ -32902,7 +33094,7 @@ fn fs_mrt_bloom(in: VertexOutput, @builtin(front_facing) isFront: bool) -> MrtBl
     let f = shadeMesh(in, isFront);
     var out: MrtBloomOutput;
     out.color = f.color;
-    out.depth = vec4<f32>(in.linearDepth, 0.0, 0.0, 1.0);
+    out.depth = geometryPixel(in.linearDepth, in.worldNormal, model.toonParams.y);
     out.hdr = f.hdr;
     return out;
 }
@@ -32927,6 +33119,9 @@ struct ModelUniforms {
     materialParams : vec4<f32>, // x = shininess, y = specularIntensity, z = ambientIntensity, w = materialMode (0=unlit, 1=lit)
     pbr            : vec4<f32>, // x = roughness (<0 = default), y = metallic
     emissive       : vec4<f32>, // rgb = sRGB emissive color, w = strength
+    toonShadow     : vec4<f32>, // rgb shadow-side multiplier, w diffuse modelling
+    toonLight      : vec4<f32>, // rgb lit-side multiplier, w terminator threshold
+    toonParams     : vec4<f32>, // x terminator softness, y outline participation
     relief         : vec4<f32>, // x = amount (px), y = on, w = grid cells per side
     reliefRect     : vec4<f32>, // xy = where the layer's box starts in reliefTex (0..1), zw = its size
     reliefEye      : vec4<f32>, // xyz = the eye the surface keeps its look from (the default camera)
@@ -33121,7 +33316,7 @@ fn shadeQuad(in: VertexOutput, isFront: bool) -> QuadFragment {
         discard;
     }
     
-    let shaded = shadeSurfaceFull(in.worldPos, in.worldNormal, baseRgb, model.materialParams, model.pbr, model.emissive);
+    let shaded = shadeSurfaceFull(in.worldPos, in.worldNormal, baseRgb, model.materialParams, model.pbr, model.emissive, model.toonShadow, model.toonLight, model.toonParams);
     var out: QuadFragment;
     out.color = vec4<f32>(shaded.display * alpha, alpha);
     out.hdr = vec4<f32>(shaded.hdr * alpha, alpha);
@@ -33153,7 +33348,7 @@ fn fs_single(in: VertexOutput, @builtin(front_facing) isFront: bool) -> @locatio
 fn fs_mrt(in: VertexOutput, @builtin(front_facing) isFront: bool) -> MrtOutput {
     var out: MrtOutput;
     out.color = shadeQuad(in, isFront).color;
-    out.depth = vec4<f32>(in.linearDepth, 0.0, 0.0, 1.0);
+    out.depth = geometryPixel(in.linearDepth, in.worldNormal, model.toonParams.y);
     return out;
 }
 
@@ -33171,7 +33366,7 @@ fn fs_mrt_bloom(in: VertexOutput, @builtin(front_facing) isFront: bool) -> MrtBl
     let f = shadeQuad(in, isFront);
     var out: MrtBloomOutput;
     out.color = f.color;
-    out.depth = vec4<f32>(in.linearDepth, 0.0, 0.0, 1.0);
+    out.depth = geometryPixel(in.linearDepth, in.worldNormal, model.toonParams.y);
     out.hdr = f.hdr;
     return out;
 }
@@ -33197,13 +33392,37 @@ const SHADOW_DEPTH_STENCIL = {
 	depthBiasSlopeScale: 2.5,
 	depthBiasClamp: .01
 };
-/** Floats appended to each 3D model uniform block: pbr vec4 + emissive vec4. */
-const SURFACE_PARAMS_FLOATS = 8;
-function packSurfaceParams(data, out, offset) {
+/** Shared model uniforms: PBR, emissive, and three art-direction vec4s. */
+const SURFACE_PARAMS_FLOATS = 20;
+function packSurfaceParams(data, out, offset, modelShade) {
 	out[offset] = data.roughness ?? -1;
 	out[offset + 1] = data.metallic ?? 0;
 	out[offset + 2] = 0;
 	out[offset + 3] = 0;
+	const shadow = data.toon?.shadowColor ? parseColor(data.toon.shadowColor) : null;
+	out.set(shadow ? [
+		shadow.r,
+		shadow.g,
+		shadow.b
+	] : modelShade ?? [
+		.5,
+		.5,
+		.55
+	], offset + 8);
+	out[offset + 11] = data.toon?.diffuse ?? 0;
+	const light = parseColor(data.toon?.lightColor ?? "#ffffff");
+	out.set([
+		light.r,
+		light.g,
+		light.b,
+		data.toon?.threshold ?? .075
+	], offset + 12);
+	out.set([
+		data.toon?.softness ?? .25,
+		data.outline === false ? 0 : 1,
+		0,
+		0
+	], offset + 16);
 	const e = data.emissive;
 	if (e === void 0 || e === null) {
 		out.fill(0, offset + 4, offset + 8);
@@ -33272,7 +33491,7 @@ function packMaterialParams(data) {
 		data.roughness !== void 0 ? Math.max(1, (1 - data.roughness) * 128) : data.shininess ?? 32,
 		data.metallic !== void 0 ? data.metallic : data.specularIntensity ?? .5,
 		data.ambientIntensity ?? 1,
-		data.material === "unlit" ? 0 : 1
+		data.material === "unlit" ? 0 : data.material === "toon" ? 2 : 1
 	];
 }
 var Quad3DPipeline = class {
@@ -34002,12 +34221,13 @@ var Mesh3DPipeline = class {
 		this.modelData[45] = shade[1];
 		this.modelData[46] = shade[2];
 		this.modelData[47] = data.alphaCutoff ?? 0;
-		packSurfaceParams(data, this.modelData, 48);
+		packSurfaceParams(data, this.modelData, 48, data.shadeColor);
 		const maps = data.maps;
-		this.modelData[56] = maps?.normal ? maps.normalScale ?? 1 : 0;
-		this.modelData[57] = maps?.occlusion ? maps.occlusionStrength ?? 1 : 0;
-		this.modelData[58] = maps?.metallicRoughness ? 1 : 0;
-		this.modelData[59] = maps?.emissive ? 1 : 0;
+		const mapsOffset = 48 + SURFACE_PARAMS_FLOATS;
+		this.modelData[mapsOffset] = maps?.normal ? maps.normalScale ?? 1 : 0;
+		this.modelData[mapsOffset + 1] = maps?.occlusion ? maps.occlusionStrength ?? 1 : 0;
+		this.modelData[mapsOffset + 2] = maps?.metallicRoughness ? 1 : 0;
+		this.modelData[mapsOffset + 3] = maps?.emissive ? 1 : 0;
 		const glass = data.glass;
 		if (glass) {
 			this.modelData[44] = glass.dispersion;
@@ -37786,6 +38006,309 @@ fn fs_dof(in: VSOut) -> @location(0) vec4<f32> {
     return accumColor / totalWeight;
 }
 `;
+function outlineShader(sampleCount) {
+	const multisampled = sampleCount > 1;
+	const textureType = multisampled ? "texture_multisampled_2d<f32>" : "texture_2d<f32>";
+	return `
+struct Uniforms {
+    params : vec4<f32>, // width, cosine(crease angle), relative depth threshold, opacity
+    ink : vec4<f32>,
+    fog : vec4<f32>,
+    fogRange : vec4<f32>,
+    projection : vec4<f32>, // inverse projection x/y scale, far depth
+};
+@group(0) @binding(0) var<uniform> u : Uniforms;
+@group(0) @binding(1) var colorTex : ${textureType};
+@group(0) @binding(2) var geometryTex : ${textureType};
+
+@vertex fn vs(@builtin(vertex_index) i : u32) -> @builtin(position) vec4<f32> {
+    let p = vec2<f32>(f32((i << 1u) & 2u), f32(i & 2u));
+    return vec4<f32>(p * 2.0 - 1.0, 0.0, 1.0);
+}
+
+fn geometry(p : vec2<i32>, sample : i32) -> vec4<f32> {
+    let size = vec2<i32>(textureDimensions(geometryTex));
+    // Beyond the viewport is the same surface: never ink the canvas border.
+    return textureLoad(geometryTex, clamp(p, vec2<i32>(0), size - 1), sample);
+}
+
+fn normal(oct : vec2<f32>) -> vec3<f32> {
+    let p = oct * 2.0 - 1.0;
+    var n = vec3<f32>(p, 1.0 - abs(p.x) - abs(p.y));
+    let t = max(-n.z, 0.0);
+    n = vec3<f32>(n.xy + select(vec2<f32>(t), vec2<f32>(-t), n.xy >= vec2<f32>(0.0)), n.z);
+    return normalize(n);
+}
+
+fn srgbToLinear(c : vec3<f32>) -> vec3<f32> {
+    return select(pow((max(c, vec3<f32>(0.0)) + 0.055) / 1.055, vec3<f32>(2.4)), c / 12.92, c <= vec3<f32>(0.04045));
+}
+fn linearToSrgb(c : vec3<f32>) -> vec3<f32> {
+    let x = max(c, vec3<f32>(0.0));
+    return select(1.055 * pow(x, vec3<f32>(1.0 / 2.4)) - 0.055, x * 12.92, x <= vec3<f32>(0.0031308));
+}
+
+fn edge(center : vec4<f32>, next : vec4<f32>, previous : vec4<f32>) -> f32 {
+    let z = 1.0 / max(center.r, 0.0001);
+    let a = 1.0 / max(next.r, 0.0001);
+    let b = 1.0 / max(previous.r, 0.0001);
+    // Inverse depth is affine on a perspective-projected plane. Its signed
+    // second difference suppresses grazing surfaces and inks only the near
+    // side of an occlusion, including thin geometry with background both sides.
+    let curvature = (2.0 * z - a - b) / z;
+    let depthEdge = smoothstep(u.params.z, u.params.z * 2.0, curvature);
+    let sameDepth = abs(center.r - next.r) / max(center.r, 0.0001) < 0.03;
+    let crease = select(0.0, 1.0, next.a > 0.5 && sameDepth && dot(normal(center.gb), normal(next.gb)) < u.params.y);
+    return max(depthEdge, crease);
+}
+
+@fragment fn fs(@builtin(position) pos : vec4<f32>${multisampled ? ", @builtin(sample_index) sampleIndex : u32" : ""}) -> @location(0) vec4<f32> {
+    let sample = ${multisampled ? "i32(sampleIndex)" : "0"};
+    let pixel = vec2<i32>(pos.xy);
+    let source = textureLoad(colorTex, pixel, sample);
+    let c = geometry(pixel, sample);
+    if (c.a <= 0.0 || u.params.x <= 0.0 || u.params.w <= 0.0) { return source; }
+    var coverage = 0.0;
+    let directions = array<vec2<f32>, 8>(
+        vec2<f32>(1.0, 0.0), vec2<f32>(-1.0, 0.0), vec2<f32>(0.0, 1.0), vec2<f32>(0.0, -1.0),
+        vec2<f32>(0.707107, 0.707107), vec2<f32>(-0.707107, 0.707107), vec2<f32>(0.707107, -0.707107), vec2<f32>(-0.707107, -0.707107));
+    for (var r = 1; r <= i32(ceil(u.params.x)); r++) {
+        let weight = clamp(u.params.x - f32(r) + 1.0, 0.0, 1.0);
+        for (var d = 0; d < 8; d++) {
+            let offset = vec2<i32>(round(directions[d] * f32(r)));
+            coverage = max(coverage, edge(c, geometry(pixel + offset, sample), geometry(pixel - offset, sample)) * weight);
+        }
+    }
+    var ink = u.ink.rgb;
+    if (u.fog.w > 0.5) {
+        let uv = pos.xy / vec2<f32>(textureDimensions(colorTex));
+        let ray = vec3<f32>((uv * 2.0 - 1.0) * u.projection.xy, 1.0);
+        let distance = c.r * length(ray);
+        let fog = smoothstep(u.fogRange.x, max(u.fogRange.y, u.fogRange.x + 1.0), distance) * u.fogRange.z;
+        // Match surface fog's linear-light blend; display-space interpolation
+        // would darken outlines halfway into a light-colored atmosphere.
+        ink = linearToSrgb(mix(srgbToLinear(ink), srgbToLinear(u.fog.rgb), fog));
+    }
+    let visibleCoverage = min(c.a / max(source.a, 0.0001), 1.0);
+    return vec4<f32>(mix(source.rgb, ink * source.a, coverage * visibleCoverage * u.params.w * u.ink.a), source.a);
+}
+`;
+}
+/** Ink shades original color/depth/normal samples, then resolves color with MSAA. */
+var GeometryOutlinePipeline = class {
+	layout;
+	pipeline;
+	multisampledOutput = null;
+	pool = new BufferPool(80, GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST);
+	constructor(device, format, sampleCount = 1) {
+		this.device = device;
+		this.format = format;
+		this.sampleCount = sampleCount;
+		this.layout = device.createBindGroupLayout({
+			label: "GeometryOutlineLayout",
+			entries: [{
+				binding: 0,
+				visibility: GPUShaderStage.FRAGMENT,
+				buffer: { type: "uniform" }
+			}, ...[1, 2].map((binding) => ({
+				binding,
+				visibility: GPUShaderStage.FRAGMENT,
+				texture: {
+					sampleType: "unfilterable-float",
+					multisampled: sampleCount > 1
+				}
+			}))]
+		});
+		const module$1 = device.createShaderModule({
+			label: "geometry-outlines.wgsl",
+			code: outlineShader(sampleCount)
+		});
+		this.pipeline = device.createRenderPipeline({
+			label: "GeometryOutlines",
+			layout: device.createPipelineLayout({ bindGroupLayouts: [this.layout] }),
+			vertex: {
+				module: module$1,
+				entryPoint: "vs"
+			},
+			fragment: {
+				module: module$1,
+				entryPoint: "fs",
+				targets: [{ format }]
+			},
+			primitive: { topology: "triangle-list" },
+			multisample: { count: sampleCount }
+		});
+	}
+	reset() {
+		this.pool.reset();
+	}
+	destroy() {
+		this.pool.destroy();
+		this.multisampledOutput?.destroy();
+	}
+	attachment(source, dest) {
+		if (this.sampleCount <= 1) return {
+			view: dest,
+			loadOp: "clear",
+			storeOp: "store"
+		};
+		if (!this.multisampledOutput || this.multisampledOutput.width !== source.width || this.multisampledOutput.height !== source.height) {
+			this.multisampledOutput?.destroy();
+			this.multisampledOutput = this.device.createTexture({
+				label: "GeometryOutlineMsaaOutput",
+				size: {
+					width: source.width,
+					height: source.height
+				},
+				format: this.format,
+				sampleCount: this.sampleCount,
+				usage: GPUTextureUsage.RENDER_ATTACHMENT
+			});
+		}
+		return {
+			view: this.multisampledOutput.createView(),
+			resolveTarget: dest,
+			loadOp: "clear",
+			storeOp: "discard"
+		};
+	}
+	render(encoder, source, geometry, dest, camera, options, fog) {
+		const data = new Float32Array(20);
+		data.set([
+			(options.width ?? 1.5) * source.height / (options.referenceHeight ?? 1080),
+			Math.cos((options.creaseAngle ?? 45) * Math.PI / 180),
+			options.depthThreshold ?? .01,
+			options.opacity ?? 1
+		]);
+		const color = parseColor(options.color ?? "#16131c");
+		data.set([
+			color.r,
+			color.g,
+			color.b,
+			color.a
+		], 4);
+		if (fog) {
+			const tint = parseColor(fog.color);
+			data.set([
+				tint.r,
+				tint.g,
+				tint.b,
+				1
+			], 8);
+			data.set([
+				fog.start,
+				fog.end,
+				fog.opacity ?? 1,
+				0
+			], 12);
+		}
+		const projection = Camera3D.computeProjectionMatrix(camera);
+		data.set([
+			1 / projection[0],
+			1 / projection[5],
+			camera.far,
+			0
+		], 16);
+		const bindGroup = this.device.createBindGroup({
+			layout: this.layout,
+			entries: [
+				{
+					binding: 0,
+					resource: { buffer: this.pool.getBuffer(this.device, data) }
+				},
+				{
+					binding: 1,
+					resource: source.createView()
+				},
+				{
+					binding: 2,
+					resource: geometry.createView()
+				}
+			]
+		});
+		const pass = encoder.beginRenderPass({ colorAttachments: [this.attachment(source, dest)] });
+		pass.setPipeline(this.pipeline);
+		pass.setBindGroup(0, bindGroup);
+		pass.draw(3);
+		pass.end();
+	}
+};
+/**
+* Color MSAA resolves average samples. Depth and octahedral normals cannot
+* be averaged across silhouettes: that invents a distant surface and a
+* normal that belongs to neither object. Keep the nearest visible sample
+* and carry outline coverage separately, without re-rendering geometry.
+*/
+const shader = `
+@group(0) @binding(0) var geometry : texture_multisampled_2d<f32>;
+@vertex fn vs(@builtin(vertex_index) i : u32) -> @builtin(position) vec4<f32> {
+    let p = vec2<f32>(f32((i << 1u) & 2u), f32(i & 2u));
+    return vec4<f32>(p * 2.0 - 1.0, 0.0, 1.0);
+}
+@fragment fn fs(@builtin(position) pos : vec4<f32>) -> @location(0) vec4<f32> {
+    let pixel = vec2<i32>(pos.xy);
+    let samples = i32(textureNumSamples(geometry));
+    var nearest = textureLoad(geometry, pixel, 0);
+    var coverage = 0.0;
+    for (var i = 0; i < samples; i++) {
+        let s = textureLoad(geometry, pixel, i);
+        if (s.r < nearest.r) { nearest = s; }
+        coverage += s.a;
+    }
+    return vec4<f32>(nearest.rgb, nearest.a * coverage / f32(samples));
+}
+`;
+var GeometryResolvePipeline = class {
+	layout;
+	pipeline;
+	constructor(device) {
+		this.device = device;
+		this.layout = device.createBindGroupLayout({ entries: [{
+			binding: 0,
+			visibility: GPUShaderStage.FRAGMENT,
+			texture: {
+				sampleType: "unfilterable-float",
+				multisampled: true
+			}
+		}] });
+		const module$1 = device.createShaderModule({
+			label: "geometry-resolve.wgsl",
+			code: shader
+		});
+		this.pipeline = device.createRenderPipeline({
+			label: "GeometryResolve",
+			layout: device.createPipelineLayout({ bindGroupLayouts: [this.layout] }),
+			vertex: {
+				module: module$1,
+				entryPoint: "vs"
+			},
+			fragment: {
+				module: module$1,
+				entryPoint: "fs",
+				targets: [{ format: "rgba16float" }]
+			},
+			primitive: { topology: "triangle-list" }
+		});
+	}
+	render(encoder, source, dest) {
+		const bindGroup = this.device.createBindGroup({
+			layout: this.layout,
+			entries: [{
+				binding: 0,
+				resource: source.createView()
+			}]
+		});
+		const pass = encoder.beginRenderPass({ colorAttachments: [{
+			view: dest,
+			loadOp: "clear",
+			storeOp: "store"
+		}] });
+		pass.setPipeline(this.pipeline);
+		pass.setBindGroup(0, bindGroup);
+		pass.draw(3);
+		pass.end();
+	}
+};
 function isKtx2(bytes) {
 	return bytes.length >= KTX2_IDENTIFIER.length && KTX2_IDENTIFIER.every((byte, i) => bytes[i] === byte);
 }
@@ -38150,6 +38673,9 @@ struct TextModelUniforms {
 	materialParams : vec4<f32>, // x = shininess, y = specularIntensity, z = ambientIntensity, w = materialMode (0=unlit, 1=lit)
 	pbr            : vec4<f32>, // x = roughness (<0 = default), y = metallic
 	emissive       : vec4<f32>, // rgb = sRGB emissive color, w = strength
+    toonShadow     : vec4<f32>, // rgb shadow-side multiplier, w diffuse modelling
+    toonLight      : vec4<f32>, // rgb lit-side multiplier, w terminator threshold
+    toonParams     : vec4<f32>, // x terminator softness, y outline participation
 };
 
 @group(0) @binding(0) var<uniform> cam    : CameraUniforms;
@@ -38282,7 +38808,7 @@ fn shadeText(in : VSOut, fw : vec2<f32>) -> TextFragment {
 	if (shaded.a < 0.0001) {
 		return out;
 	}
-	let lit = shadeSurfaceFull(in.worldPos, in.worldNormal, shaded.rgb / shaded.a, model.materialParams, model.pbr, model.emissive);
+	let lit = shadeSurfaceFull(in.worldPos, in.worldNormal, shaded.rgb / shaded.a, model.materialParams, model.pbr, model.emissive, model.toonShadow, model.toonLight, model.toonParams);
 	out.color = vec4<f32>(lit.display * shaded.a, shaded.a);
 	out.hdr = vec4<f32>(lit.hdr * shaded.a, shaded.a);
 	return out;
@@ -38323,7 +38849,7 @@ struct MrtBloomOutput {
 @fragment fn fs_mrt(in : VSOut) -> MrtOutput {
 	var out : MrtOutput;
 	out.color = textFragment(in).color;
-	out.depth = vec4<f32>(in.linearDepth, 0.0, 0.0, 1.0);
+	out.depth = geometryPixel(in.linearDepth, in.worldNormal, model.toonParams.y);
 	return out;
 }
 
@@ -38339,7 +38865,7 @@ struct MrtBloomOutput {
 	let f = textFragment(in);
 	var out : MrtBloomOutput;
 	out.color = f.color;
-	out.depth = vec4<f32>(in.linearDepth, 0.0, 0.0, 1.0);
+	out.depth = geometryPixel(in.linearDepth, in.worldNormal, model.toonParams.y);
 	out.hdr = f.hdr;
 	return out;
 }
@@ -39403,6 +39929,8 @@ var Renderer3D = class {
 	shadowSampler = null;
 	meshBounds = /* @__PURE__ */ new WeakMap();
 	bloomPipeline = null;
+	outlinePipeline = null;
+	geometryResolvePipeline = null;
 	lastCameraBuffer = null;
 	/**
 	* Samples per pixel in the 3D pass. Mesh silhouettes (extruded text,
@@ -39469,7 +39997,39 @@ var Renderer3D = class {
 			primitive: { topology: "triangle-list" }
 		});
 	}
+	/**
+	* Size-dependent render targets, by label, size, samples and usage. One
+	* frame (one command buffer) can render 3D scenes of different sizes, so
+	* a target is never destroyed while the frame may use it: targets the last
+	* frame did not use are destroyed at the next `resetPools`.
+	*/
+	attachments = /* @__PURE__ */ new Map();
+	attachmentsUsed = /* @__PURE__ */ new Set();
+	attachment(label, width, height, desc) {
+		const key = `${label}:${width}x${height}:${desc.sampleCount ?? 1}:${desc.usage}`;
+		this.attachmentsUsed.add(key);
+		let texture = this.attachments.get(key);
+		if (!texture) {
+			texture = this.device.createTexture({
+				label,
+				size: {
+					width,
+					height
+				},
+				...desc
+			});
+			this.attachments.set(key, texture);
+		}
+		return texture;
+	}
 	resetPools() {
+		for (const [key, texture] of this.attachments) {
+			if (this.attachmentsUsed.has(key)) continue;
+			texture.destroy();
+			this.attachments.delete(key);
+		}
+		this.attachmentsUsed.clear();
+		this.outlinePipeline?.reset();
 		this.bloomPipeline?.resetPools();
 		this.cameraPool.reset();
 		this.lastCameraPose = null;
@@ -39484,33 +40044,18 @@ var Renderer3D = class {
 		this.morphPipeline.resetPools();
 	}
 	getOrCreateDepthTexture(width, height) {
-		if (!this.depthTexture || this.depthTexture.width !== width || this.depthTexture.height !== height) {
-			this.depthTexture?.destroy();
-			this.depthTexture = this.device.createTexture({
-				label: "Renderer3DDepthTexture",
-				size: {
-					width,
-					height
-				},
-				format: "depth24plus",
-				sampleCount: this.sampleCount,
-				usage: GPUTextureUsage.RENDER_ATTACHMENT
-			});
-		}
+		this.depthTexture = this.attachment("Renderer3DDepthTexture", width, height, {
+			format: "depth24plus",
+			sampleCount: this.sampleCount,
+			usage: GPUTextureUsage.RENDER_ATTACHMENT
+		});
 		return this.depthTexture;
 	}
-	getOrCreateMsaaTexture(current, label, format, width, height) {
-		if (current && current.width === width && current.height === height) return current;
-		current?.destroy();
-		return this.device.createTexture({
-			label,
-			size: {
-				width,
-				height
-			},
+	getOrCreateMsaaTexture(_current, label, format, width, height, sampled = false) {
+		return this.attachment(label, width, height, {
 			format,
 			sampleCount: this.sampleCount,
-			usage: GPUTextureUsage.RENDER_ATTACHMENT
+			usage: GPUTextureUsage.RENDER_ATTACHMENT | (sampled ? GPUTextureUsage.TEXTURE_BINDING : 0)
 		});
 	}
 	/** The HDR radiance target the last `beginPass(…, writeHdr)` drew into. */
@@ -39518,110 +40063,54 @@ var Renderer3D = class {
 		return this.hdrTexture;
 	}
 	getOrCreateHdrTexture(width, height) {
-		if (!this.hdrTexture || this.hdrTexture.width !== width || this.hdrTexture.height !== height) {
-			this.hdrTexture?.destroy();
-			this.hdrTexture = this.device.createTexture({
-				label: "Renderer3DHdrRadiance",
-				size: {
-					width,
-					height
-				},
-				format: "rgba16float",
-				usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
-			});
-		}
+		this.hdrTexture = this.attachment("Renderer3DHdrRadiance", width, height, {
+			format: "rgba16float",
+			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+		});
 		return this.hdrTexture;
 	}
 	getOrCreateLinearDepthTexture(width, height) {
-		if (!this.linearDepthTexture || this.linearDepthTexture.width !== width || this.linearDepthTexture.height !== height) {
-			this.linearDepthTexture?.destroy();
-			this.linearDepthTexture = this.device.createTexture({
-				label: "Renderer3DLinearDepthTexture",
-				size: {
-					width,
-					height
-				},
-				format: "rgba16float",
-				usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
-			});
-		}
+		this.linearDepthTexture = this.attachment("Renderer3DLinearDepthTexture", width, height, {
+			format: "rgba16float",
+			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+		});
 		return this.linearDepthTexture;
 	}
 	getOrCreateReflectionTexture(width, height) {
-		if (!this.reflectionColorTexture || this.reflectionColorTexture.width !== width || this.reflectionColorTexture.height !== height) {
-			this.reflectionColorTexture?.destroy();
-			this.reflectionColorTexture = this.device.createTexture({
-				label: "Renderer3DReflectionColor",
-				size: {
-					width,
-					height
-				},
-				format: this.format,
-				usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
-			});
-		}
+		this.reflectionColorTexture = this.attachment("Renderer3DReflectionColor", width, height, {
+			format: this.format,
+			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+		});
 		return this.reflectionColorTexture;
 	}
 	getOrCreateReflectionMsaaTexture(width, height) {
-		if (!this.reflectionMsaaColorTexture || this.reflectionMsaaColorTexture.width !== width || this.reflectionMsaaColorTexture.height !== height) {
-			this.reflectionMsaaColorTexture?.destroy();
-			this.reflectionMsaaColorTexture = this.device.createTexture({
-				label: "Renderer3DReflectionMsaaColor",
-				size: {
-					width,
-					height
-				},
-				format: this.format,
-				sampleCount: this.sampleCount,
-				usage: GPUTextureUsage.RENDER_ATTACHMENT
-			});
-		}
+		this.reflectionMsaaColorTexture = this.attachment("Renderer3DReflectionMsaaColor", width, height, {
+			format: this.format,
+			sampleCount: this.sampleCount,
+			usage: GPUTextureUsage.RENDER_ATTACHMENT
+		});
 		return this.reflectionMsaaColorTexture;
 	}
 	getOrCreateReflectionDepthTexture(width, height) {
-		if (!this.reflectionDepthTexture || this.reflectionDepthTexture.width !== width || this.reflectionDepthTexture.height !== height) {
-			this.reflectionDepthTexture?.destroy();
-			this.reflectionDepthTexture = this.device.createTexture({
-				label: "Renderer3DReflectionDepth",
-				size: {
-					width,
-					height
-				},
-				format: "depth24plus",
-				sampleCount: this.sampleCount,
-				usage: GPUTextureUsage.RENDER_ATTACHMENT
-			});
-		}
+		this.reflectionDepthTexture = this.attachment("Renderer3DReflectionDepth", width, height, {
+			format: "depth24plus",
+			sampleCount: this.sampleCount,
+			usage: GPUTextureUsage.RENDER_ATTACHMENT
+		});
 		return this.reflectionDepthTexture;
 	}
 	getOrCreateReflectionTempTexture(width, height) {
-		if (!this.reflectionTempTexture || this.reflectionTempTexture.width !== width || this.reflectionTempTexture.height !== height) {
-			this.reflectionTempTexture?.destroy();
-			this.reflectionTempTexture = this.device.createTexture({
-				label: "Renderer3DReflectionTemp",
-				size: {
-					width,
-					height
-				},
-				format: this.format,
-				usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
-			});
-		}
+		this.reflectionTempTexture = this.attachment("Renderer3DReflectionTemp", width, height, {
+			format: this.format,
+			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+		});
 		return this.reflectionTempTexture;
 	}
 	getOrCreateReflectionBlurredTexture(width, height) {
-		if (!this.reflectionBlurredTexture || this.reflectionBlurredTexture.width !== width || this.reflectionBlurredTexture.height !== height) {
-			this.reflectionBlurredTexture?.destroy();
-			this.reflectionBlurredTexture = this.device.createTexture({
-				label: "Renderer3DReflectionBlurred",
-				size: {
-					width,
-					height
-				},
-				format: this.format,
-				usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
-			});
-		}
+		this.reflectionBlurredTexture = this.attachment("Renderer3DReflectionBlurred", width, height, {
+			format: this.format,
+			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+		});
 		return this.reflectionBlurredTexture;
 	}
 	packCameraUniforms(camera, surfaceWidth, surfaceHeight, time$2 = 0) {
@@ -39903,16 +40392,22 @@ var Renderer3D = class {
 			storeOp: "store",
 			clearValue
 		};
-		if (msaa) this.msaaColorTexture = this.getOrCreateMsaaTexture(this.msaaColorTexture, "Renderer3DMsaaColor", this.format, surfaceWidth, surfaceHeight);
+		if (msaa) this.msaaColorTexture = this.getOrCreateMsaaTexture(this.msaaColorTexture, "Renderer3DMsaaColor", this.format, surfaceWidth, surfaceHeight, Boolean(world?.environment?.outlines));
 		const colorAttachments = [attach(colorTargetView, msaa ? this.msaaColorTexture : null, clearColor, loadOp)];
+		if (msaa && world?.environment?.outlines) colorAttachments[0].storeOp = "store";
 		if (linearDepthTargetView) {
-			if (msaa) this.msaaLinearDepthTexture = this.getOrCreateMsaaTexture(this.msaaLinearDepthTexture, "Renderer3DMsaaLinearDepth", "rgba16float", surfaceWidth, surfaceHeight);
-			colorAttachments.push(attach(linearDepthTargetView, msaa ? this.msaaLinearDepthTexture : null, {
-				r: camera.far,
-				g: 0,
-				b: 0,
-				a: 1
-			}, "clear"));
+			if (msaa) this.msaaLinearDepthTexture = this.getOrCreateMsaaTexture(this.msaaLinearDepthTexture, "Renderer3DMsaaLinearDepth", "rgba16float", surfaceWidth, surfaceHeight, true);
+			const geometryAttachment = attach(linearDepthTargetView, msaa ? this.msaaLinearDepthTexture : null, {
+				r: Math.min(camera.far, 65504),
+				g: .5,
+				b: .5,
+				a: 0
+			}, "clear");
+			if (msaa && world?.environment?.outlines) {
+				geometryAttachment.resolveTarget = void 0;
+				geometryAttachment.storeOp = "store";
+			}
+			colorAttachments.push(geometryAttachment);
 		}
 		this.passWritesHdr = writeHdr;
 		if (writeHdr) {
@@ -40003,8 +40498,9 @@ var Renderer3D = class {
 		this.floorReflectionPipeline.draw(pass, cameraBindGroup, lightsBindGroup, reflectionTexture, floor, useMrt, useBloom);
 	}
 	/**
-	* A layer's unit quad ([-0.5, 0.5] square) in world space:
-	* T(pos) * Rz * Ry * Rx * S(w * sx, h * sy, sz) * T(0.5 - ax, 0.5 - ay, 0).
+	* A centered unit quad in world space. Translate to the authored pivot,
+	* rotate and scale, then offset the unit quad back from that pivot.
+	* Shared with children in preserve-3d containers.
 	*/
 	quadModelMatrix(opts) {
 		if (opts.modelMatrix) return opts.modelMatrix;
@@ -40018,7 +40514,7 @@ var Renderer3D = class {
 			1
 		], anchor = [.5, .5] } = opts;
 		let m = Matrix4Math.identity();
-		m = Matrix4Math.multiply(m, Matrix4Math.translate(position[0], position[1], position[2]));
+		m = Matrix4Math.multiply(m, Matrix4Math.translate(position[0] + (anchor[0] - .5) * width, position[1] + (anchor[1] - .5) * height, position[2]));
 		const rxRad = rotation[0] * Math.PI / 180;
 		const ryRad = rotation[1] * Math.PI / 180;
 		const rzRad = rotation[2] * Math.PI / 180;
@@ -40083,6 +40579,8 @@ var Renderer3D = class {
 				metallic: opts.metallic,
 				emissive: opts.emissive,
 				emissiveIntensity: opts.emissiveIntensity,
+				toon: opts.toon,
+				outline: opts.outline,
 				matte: opts.matte
 			}, useMrt, this.passWritesHdr);
 		}
@@ -40128,6 +40626,8 @@ var Renderer3D = class {
 			metallic,
 			emissive: opts.emissive,
 			emissiveIntensity: opts.emissiveIntensity,
+			toon: opts.toon,
+			outline: opts.outline,
 			matte: opts.matte,
 			relief: opts.relief
 		}, useMrt, this.passWritesHdr);
@@ -40371,6 +40871,8 @@ var Renderer3D = class {
 			metallic,
 			emissive: opts.emissive,
 			emissiveIntensity: opts.emissiveIntensity,
+			toon: opts.toon,
+			outline: opts.outline,
 			matte: opts.matte,
 			maps: opts.maps,
 			isInstanced: Boolean(opts.instanceBuffer || opts.instanceCount && opts.instanceCount > 1),
@@ -40525,6 +41027,23 @@ var Renderer3D = class {
 		this.bloomPipeline ??= new BloomPipeline(this.device);
 		this.bloomPipeline.apply(encoder, source, dest, options, hdrSource ?? void 0);
 	}
+	/** Geometry ink is applied before lens blur, independently of material shading. */
+	resolveGeometry(encoder, geometry) {
+		if (this.sampleCount <= 1 || !this.msaaLinearDepthTexture) return;
+		this.geometryResolvePipeline ??= new GeometryResolvePipeline(this.device);
+		this.geometryResolvePipeline.render(encoder, this.msaaLinearDepthTexture, geometry.createView());
+	}
+	applyOutlines(encoder, source, geometry, dest, camera, options, fog) {
+		let colorSource = source;
+		let geometrySource = geometry;
+		if (this.sampleCount > 1) {
+			if (!this.msaaColorTexture || !this.msaaLinearDepthTexture) throw new Error("Geometry outlines require the scene's retained MSAA color and geometry samples");
+			colorSource = this.msaaColorTexture;
+			geometrySource = this.msaaLinearDepthTexture;
+		}
+		this.outlinePipeline ??= new GeometryOutlinePipeline(this.device, this.format, this.sampleCount);
+		this.outlinePipeline.render(encoder, colorSource, geometrySource, dest, camera, options, fog);
+	}
 	applyDepthOfField(encoder, sourceColorTex, depthTex, destView, cameraBuffer) {
 		const sampler = this.samplerCache.getSampler(this.device);
 		const bindGroup = this.device.createBindGroup({
@@ -40577,7 +41096,10 @@ var Renderer3D = class {
 		}, useMrt);
 	}
 	destroy() {
+		for (const texture of this.attachments.values()) texture.destroy();
+		this.attachments.clear();
 		this.bloomPipeline?.destroy();
+		this.outlinePipeline?.destroy();
 		this.depthTexture?.destroy();
 		for (const texture of this.shadowTextures.values()) texture.destroy();
 		this.shadowTextures.clear();
@@ -41608,5 +42130,5 @@ var NodeSurfaceProvider = class {
 if (typeof globalThis !== "undefined") globalThis.__GATEWAI_DELAYS__ = globalThis.__GATEWAI_DELAYS__ || /* @__PURE__ */ new Set();
 
 //#endregion
-export { probeVideoSize as $, TextAnimatorBuilder as $t, emojiGraphemes as A, evaluateSpringProgress as An, AudioSignalComputePipeline as At, jointMatrices as B, samplePathChainGeometry as Bn, KineticMarqueeConfigSchema as Bt, drawGifNode as C, ellipseToCubicBeziers as Cn, resolveEnvironment as Ct, drawSignalNode as D, evaluateMarqueeOffset as Dn, AnchorGroupingSchema as Dt, drawParagraphNode as E, evaluateExpressionSelector as En, AdvancedTextAnimatorSchema as Et, getPrimitiveGeometry as F, getScramblePool as Fn, EnhancedTextNodeSchema as Ft, measureMaxCaptionHeight as G, SelectorModeSchema as Gt, loadModel3D as H, waveToCubicBeziers as Hn, LongShadowConfigSchema as Ht, getRegisteredFontSource as I, getShuffledOrder as In, ExpressionSelectorSchema as It, parseFBX as J, SignalRegistry as Jt, mediaDecoderCache as K, SelectorShapeSchema as Kt, getRenderer2D as L, parseSvgPathToCubicBeziers as Ln, ExtendedGlyphPropertiesSchema as Lt, fitSpansToText as M, evaluateVolumetricFormation as Mn, ChromaticGlitchConfigSchema as Mt, generateExtrudedTextGeometry as N, generateArcLengthLUT as Nn, CubicBezierSegmentSchema as Nt, drawSvgNode as O, evaluateSelectorCombination as On, AnchorPresetSchema as Ot, getHeadlessFontPath as P, generatePathSegments as Pn, DynamicStrokePropertiesSchema as Pt, poseNodes as Q, TextAnchorConfigSchema as Qt, initHeadlessWebGPU as R, sampleAudioSpectrumScale as Rn, GlyphAnchorGroupingSchema as Rt, drawCaptionNode as S, distanceToCurveParameter as Sn, parseColorToRgb as St, drawLottieNode as T, evaluateCubicBezierDerivative as Tn, AdvancedTextAnimatorBuilder as Tt, loadOBJ as U, ParticleDissolveConfigSchema as Ut, loadFBX as V, signalRegistry as Vn, LineSpacingDynamicsSchema as Vt, lutStore as W, SelectorBasedOnSchema as Wt, parseOBJ as X, Spatial3DPropertiesSchema as Xt, parseMTL as Y, SkewPropertiesSchema as Yt, parseSvgPathToSegments as Z, SpringPhysicsSchema as Zt, buildShapeSvgPath as _, buildWGSLSignalFn as _n, MAX_LIGHTS as _t, GlassPipeline as a, TextRangeSelectorSchema as an, shaderStore as at, colorMatrixWgsl as b, computeRangeSelectorWeight as bn, Vector3Math as bt, Renderer2D as c, TextSignalSelectorSchema as cn, textureCache as ct, ScreenSpaceRelightPipeline as d, TypingCadenceSchema as dn, GetFontAssetUrl as dt, TextCursorConfigSchema as en, registerHeadlessFont as et, ShadowPipeline as f, VariableFontAxesSchema as fn, resolveMediaSourceUrl as ft, WebGPUAudioProcessor as g, buildPathLUT as gn, Light3D as gt, SlugPipeline as h, VolumetricFormationModeSchema as hn, LIGHT_UNIFORM_SIZE_BYTES as ht, EffectPipeline as i, TextPathSourceSchema as in, setRegisteredFontSource as it, ensureDevice as j, evaluateTypewriterState as jn, AudioSpectrumTypographySchema as jt, drawVideoNode as k, evaluateSkewMatrix as kn, AnimatableGlyphPropsSchema as kt, Renderer3D as l, TextWigglySelectorSchema as ln, trackAudioPitch as lt, SlugGeometry as m, VolumetricFormationConfigSchema as mn, ENVIRONMENT_PRESETS as mt, AudioLatentTrackCache as n, TextPathBuilder as nn, resolveTextSpans as nt, MotionBlurPipeline as o, TextScrambleConfigSchema as on, spansText as ot, SlugFontCache as p, Vec2Schema as pn, Camera3D as pt, parseColor as q, SelectorUnitsSchema as qt, AudioMeshDeformPipeline as r, TextPathOptionsSchema as rn, sampleMorphWeights as rt, NodeSurfaceProvider as s, TextSelectorSchema as sn, srtLoader as st, AudioLatentEngine as t, TextCursorStyleSchema as tn, resolveInputUrl as tt, SSAOPipeline as u, TypewriterAnimatorSchema as un, transformScale as ut, clearAllVideoCache as v, computeAnchorPivotOffset as vn, Matrix4Math as vt, drawImageNode as w, evaluateCubicBezier as wn, AETextAnimatorSchema as wt, describeGpu as x, deterministicWigglyNoise as xn, linearRgb as xt, clearHeadlessFonts as y, computeLineLeadingDisplacement as yn, Path3D as yt, inputStore as z, sampleCurveGeometry as zn, GlyphAnchorPointSchema as zt };
-//# sourceMappingURL=dist-D3BeAZ7X.mjs.map
+export { poseNodes as $, TextAnchorConfigSchema as $t, emojiGraphemes as A, evaluateSkewMatrix as An, AnimatableGlyphPropsSchema as At, jointMatrices as B, sampleCurveGeometry as Bn, GlyphAnchorPointSchema as Bt, drawGifNode as C, distanceToCurveParameter as Cn, parseColorToRgb as Ct, drawSignalNode as D, evaluateExpressionSelector as Dn, AdvancedTextAnimatorSchema as Dt, drawParagraphNode as E, evaluateCubicBezierDerivative as En, AdvancedTextAnimatorBuilder as Et, getPrimitiveGeometry as F, generatePathSegments as Fn, DynamicStrokePropertiesSchema as Ft, measureMaxCaptionHeight as G, SelectorBasedOnSchema as Gt, loadModel3D as H, signalRegistry as Hn, LineSpacingDynamicsSchema as Ht, getRegisteredFontSource as I, getScramblePool as In, EnhancedTextNodeSchema as It, parseDashArray as J, SelectorUnitsSchema as Jt, mediaDecoderCache as K, SelectorModeSchema as Kt, getRenderer2D as L, getShuffledOrder as Ln, ExpressionSelectorSchema as Lt, fitSpansToText as M, evaluateTypewriterState as Mn, AudioSpectrumTypographySchema as Mt, generateExtrudedTextGeometry as N, evaluateVolumetricFormation as Nn, ChromaticGlitchConfigSchema as Nt, drawSvgNode as O, evaluateMarqueeOffset as On, AnchorGroupingSchema as Ot, getHeadlessFontPath as P, generateArcLengthLUT as Pn, CubicBezierSegmentSchema as Pt, parseSvgPathToSegments as Q, SpringPhysicsSchema as Qt, initHeadlessWebGPU as R, parseSvgPathToCubicBeziers as Rn, ExtendedGlyphPropertiesSchema as Rt, drawCaptionNode as S, deterministicWigglyNoise as Sn, linearRgb as St, drawLottieNode as T, evaluateCubicBezier as Tn, AETextAnimatorSchema as Tt, loadOBJ as U, waveToCubicBeziers as Un, LongShadowConfigSchema as Ut, loadFBX as V, samplePathChainGeometry as Vn, KineticMarqueeConfigSchema as Vt, lutStore as W, ParticleDissolveConfigSchema as Wt, parseMTL as X, SkewPropertiesSchema as Xt, parseFBX as Y, SignalRegistry as Yt, parseOBJ as Z, Spatial3DPropertiesSchema as Zt, buildShapeSvgPath as _, buildPathLUT as _n, Light3D as _t, GlassPipeline as a, TextPathSourceSchema as an, setRegisteredFontSource as at, colorMatrixWgsl as b, computeLineLeadingDisplacement as bn, Path3D as bt, Renderer2D as c, TextSelectorSchema as cn, srtLoader as ct, ScreenSpaceRelightPipeline as d, TypewriterAnimatorSchema as dn, transformScale as dt, TextAnimatorBuilder as en, probeVideoSize as et, ShadowPipeline as f, TypingCadenceSchema as fn, GetFontAssetUrl as ft, WebGPUAudioProcessor as g, VolumetricFormationModeSchema as gn, LIGHT_UNIFORM_SIZE_BYTES as gt, SlugPipeline as h, VolumetricFormationConfigSchema as hn, ENVIRONMENT_PRESETS as ht, EffectPipeline as i, TextPathOptionsSchema as in, sampleMorphWeights as it, ensureDevice as j, evaluateSpringProgress as jn, AudioSignalComputePipeline as jt, drawVideoNode as k, evaluateSelectorCombination as kn, AnchorPresetSchema as kt, Renderer3D as l, TextSignalSelectorSchema as ln, textureCache as lt, SlugGeometry as m, Vec2Schema as mn, Camera3D as mt, AudioLatentTrackCache as n, TextCursorStyleSchema as nn, resolveInputUrl as nt, MotionBlurPipeline as o, TextRangeSelectorSchema as on, shaderStore as ot, SlugFontCache as p, VariableFontAxesSchema as pn, resolveMediaSourceUrl as pt, parseColor as q, SelectorShapeSchema as qt, AudioMeshDeformPipeline as r, TextPathBuilder as rn, resolveTextSpans as rt, NodeSurfaceProvider as s, TextScrambleConfigSchema as sn, spansText as st, AudioLatentEngine as t, TextCursorConfigSchema as tn, registerHeadlessFont as tt, SSAOPipeline as u, TextWigglySelectorSchema as un, trackAudioPitch as ut, clearAllVideoCache as v, buildWGSLSignalFn as vn, MAX_LIGHTS as vt, drawImageNode as w, ellipseToCubicBeziers as wn, resolveEnvironment as wt, describeGpu as x, computeRangeSelectorWeight as xn, Vector3Math as xt, clearHeadlessFonts as y, computeAnchorPivotOffset as yn, Matrix4Math as yt, inputStore as z, sampleAudioSpectrumScale as zn, GlyphAnchorGroupingSchema as zt };
+//# sourceMappingURL=dist--Uu5bQ_6.mjs.map