@jamesyong42/infinite-canvas 1.2.0 → 1.3.0

package/dist/hooks-gsQDDE56.mjs

@@ -0,0 +1,3494 @@
+import { B as OverlapTarget, D as CardOverlapHotPoint, E as Card, F as Dragging, M as Culled, Q as Widget, T as Active, Y as Transform2D, Z as Visible, f as EngineProvider, p as useLayoutEngine, r as useComponent, u as useTag, z as OverlapCandidate } from "./ecs-3kimUV5Z.mjs";
+import { defineComponent, defineResource, defineTag } from "@jamesyong42/reactive-ecs";
+import { createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { Canvas, createPortal, events, useFrame, useThree } from "@react-three/fiber";
+import * as THREE from "three";
+import { Mesh, OrthographicCamera, PlaneGeometry, SRGBColorSpace, Scene, ShaderMaterial, Vector2, Vector3, Vector4, WebGLRenderTarget } from "three";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/profiler/Profiler.ts
+const TICK_RING_SIZE = 300;
+const R3F_RING_SIZE = 300;
+var Profiler = class {
+	enabled = false;
+	tickRing = [];
+	tickWrite = 0;
+	tickFilled = false;
+	r3fRing = [];
+	r3fWrite = 0;
+	r3fFilled = false;
+	frameStart = 0;
+	currentSystems = {};
+	visibilityMs = 0;
+	currentTick = 0;
+	/** Enable/disable profiling. When disabled, all methods are no-ops. */
+	setEnabled(on) {
+		this.enabled = on;
+		if (!on) this.clear();
+	}
+	isEnabled() {
+		return this.enabled;
+	}
+	/** Call at the start of engine.tick(). */
+	beginFrame(tick) {
+		if (!this.enabled) return;
+		this.currentTick = tick;
+		this.currentSystems = {};
+		this.visibilityMs = 0;
+		this.frameStart = performance.now();
+		performance.mark("ic-frame-start");
+	}
+	/** Call around each ECS system execution. */
+	beginSystem(name) {
+		if (!this.enabled) return;
+		performance.mark(`ic-sys-${name}-start`);
+	}
+	endSystem(name) {
+		if (!this.enabled) return;
+		performance.mark(`ic-sys-${name}-end`);
+		try {
+			const measure = performance.measure(`ic:sys:${name}`, `ic-sys-${name}-start`, `ic-sys-${name}-end`);
+			this.currentSystems[name] = measure.duration;
+		} catch {}
+		performance.clearMarks(`ic-sys-${name}-start`);
+		performance.clearMarks(`ic-sys-${name}-end`);
+	}
+	beginVisibility() {
+		if (!this.enabled) return;
+		performance.mark("ic-vis-start");
+	}
+	endVisibility() {
+		if (!this.enabled) return;
+		performance.mark("ic-vis-end");
+		try {
+			const measure = performance.measure("ic:visibility", "ic-vis-start", "ic-vis-end");
+			this.visibilityMs = measure.duration;
+		} catch {}
+		performance.clearMarks("ic-vis-start");
+		performance.clearMarks("ic-vis-end");
+	}
+	/** Call right before the named engine WebGL pass renders. */
+	beginWebGL(pass) {
+		if (!this.enabled) return;
+		performance.mark(`ic-gl-${pass}-start`);
+	}
+	/**
+	* Call right after the named engine WebGL pass renders.
+	*
+	* The WebGL pass runs AFTER endFrame has flushed the tick sample to the
+	* ring, so we mutate the most-recent ring entry in place instead of
+	* writing to scratch state (which would be wiped by the next beginFrame
+	* before ever being read).
+	*/
+	endWebGL(pass) {
+		if (!this.enabled) return;
+		performance.mark(`ic-gl-${pass}-end`);
+		try {
+			const measure = performance.measure(`ic:gl:${pass}`, `ic-gl-${pass}-start`, `ic-gl-${pass}-end`);
+			const sample = this.getMostRecentTickSample();
+			if (sample) if (pass === "grid") sample.webgl.gridMs = measure.duration;
+			else sample.webgl.selectionMs = measure.duration;
+		} catch {}
+		performance.clearMarks(`ic-gl-${pass}-start`);
+		performance.clearMarks(`ic-gl-${pass}-end`);
+	}
+	/**
+	* Record WebGL engine pass counters for the current tick. `drawCalls` and
+	* `triangles` should be the totals from `renderer.info.render` accumulated
+	* across all engine passes in this tick (grid + selection). Callers must
+	* reset `renderer.info` at the start of the tick (with `autoReset=false`)
+	* so these values cover both passes.
+	*
+	* Called from the rAF loop AFTER engine.tick() / endFrame, so it targets
+	* the most-recent ring sample directly (see {@link endWebGL}).
+	*/
+	recordWebGLStats(stats) {
+		if (!this.enabled) return;
+		const sample = this.getMostRecentTickSample();
+		if (!sample) return;
+		sample.webgl.drawCalls = stats.drawCalls;
+		sample.webgl.triangles = stats.triangles;
+		sample.webgl.selectionFrames = stats.selectionFrames;
+		sample.webgl.snapGuides = stats.snapGuides;
+		sample.webgl.spacingIndicators = stats.spacingIndicators;
+		sample.webgl.domPositionsUpdated = stats.domPositionsUpdated;
+	}
+	/** Returns the most recently pushed tick sample, or null if the ring is empty. */
+	getMostRecentTickSample() {
+		const n = this.tickRing.length;
+		if (n === 0) return null;
+		const idx = (this.tickWrite - 1 + TICK_RING_SIZE) % TICK_RING_SIZE;
+		return this.tickRing[idx % n] ?? null;
+	}
+	/** Call at the end of engine.tick() — flushes a TickSample to the ring. */
+	endFrame(entityCount, visibleCount) {
+		if (!this.enabled) return;
+		performance.mark("ic-frame-end");
+		let totalMs;
+		try {
+			totalMs = performance.measure("ic:frame", "ic-frame-start", "ic-frame-end").duration;
+		} catch {
+			totalMs = performance.now() - this.frameStart;
+		}
+		performance.clearMarks("ic-frame-start");
+		performance.clearMarks("ic-frame-end");
+		const sample = {
+			tick: this.currentTick,
+			timestamp: performance.now(),
+			totalMs,
+			ecs: {
+				systems: { ...this.currentSystems },
+				visibilityMs: this.visibilityMs,
+				entityCount,
+				visibleCount
+			},
+			webgl: {
+				gridMs: 0,
+				selectionMs: 0,
+				drawCalls: 0,
+				triangles: 0,
+				selectionFrames: 0,
+				snapGuides: 0,
+				spacingIndicators: 0,
+				domPositionsUpdated: 0
+			}
+		};
+		if (this.tickRing.length < TICK_RING_SIZE) this.tickRing.push(sample);
+		else this.tickRing[this.tickWrite] = sample;
+		this.tickWrite = (this.tickWrite + 1) % TICK_RING_SIZE;
+		if (this.tickRing.length >= TICK_RING_SIZE) this.tickFilled = true;
+	}
+	/**
+	* Push one R3F frame sample. Called from the R3F canvas via a probe
+	* component that has access to `useThree`.
+	*/
+	recordR3FFrame(sample) {
+		if (!this.enabled) return;
+		const full = {
+			...sample,
+			timestamp: performance.now()
+		};
+		if (this.r3fRing.length < R3F_RING_SIZE) this.r3fRing.push(full);
+		else this.r3fRing[this.r3fWrite] = full;
+		this.r3fWrite = (this.r3fWrite + 1) % R3F_RING_SIZE;
+		if (this.r3fRing.length >= R3F_RING_SIZE) this.r3fFilled = true;
+	}
+	/** Get the last N tick samples (newest first). */
+	getSamples(count) {
+		return readRing(this.tickRing, this.tickWrite, this.tickFilled, count);
+	}
+	/** Get the last N R3F samples (newest first). */
+	getR3FSamples(count) {
+		return readRing(this.r3fRing, this.r3fWrite, this.r3fFilled, count);
+	}
+	/** Compute rolling statistics across all three layers. */
+	getStats() {
+		return {
+			ecs: this.getEcsStats(),
+			webgl: this.getWebGLStats(),
+			r3f: this.getR3FStats()
+		};
+	}
+	getEcsStats() {
+		const samples = this.tickRing;
+		const n = samples.length;
+		if (n === 0) return {
+			fps: 0,
+			frameTime: {
+				avg: 0,
+				p50: 0,
+				p95: 0,
+				p99: 0,
+				max: 0
+			},
+			systemAvg: {},
+			systemP95: {},
+			budgetUsed: 0,
+			sampleCount: 0
+		};
+		const frameTimes = samples.map((s) => s.totalMs).toSorted((a, b) => a - b);
+		const avg = mean(frameTimes);
+		const fps = ringFps(samples, this.tickWrite, this.tickFilled, TICK_RING_SIZE);
+		const systemNames = /* @__PURE__ */ new Set();
+		for (const s of samples) for (const k of Object.keys(s.ecs.systems)) systemNames.add(k);
+		const systemAvg = {};
+		const systemP95 = {};
+		for (const name of systemNames) {
+			const times = samples.map((s) => s.ecs.systems[name] ?? 0).toSorted((a, b) => a - b);
+			systemAvg[name] = mean(times);
+			systemP95[name] = percentile(times, 95);
+		}
+		return {
+			fps,
+			frameTime: {
+				avg,
+				p50: percentile(frameTimes, 50),
+				p95: percentile(frameTimes, 95),
+				p99: percentile(frameTimes, 99),
+				max: frameTimes[frameTimes.length - 1]
+			},
+			systemAvg,
+			systemP95,
+			budgetUsed: avg / 16.67 * 100,
+			sampleCount: n
+		};
+	}
+	getWebGLStats() {
+		const samples = this.tickRing;
+		const n = samples.length;
+		if (n === 0) return {
+			fps: 0,
+			frameTime: {
+				avg: 0,
+				p50: 0,
+				p95: 0,
+				p99: 0,
+				max: 0
+			},
+			budgetUsed: 0,
+			gridAvg: 0,
+			gridP95: 0,
+			selectionAvg: 0,
+			selectionP95: 0,
+			avgDrawCalls: 0,
+			avgTriangles: 0,
+			avgSelectionFrames: 0,
+			avgSnapGuides: 0,
+			avgDomUpdates: 0,
+			sampleCount: 0
+		};
+		const gridTimes = samples.map((s) => s.webgl.gridMs).toSorted((a, b) => a - b);
+		const selTimes = samples.map((s) => s.webgl.selectionMs).toSorted((a, b) => a - b);
+		const combinedTimes = samples.map((s) => s.webgl.gridMs + s.webgl.selectionMs).toSorted((a, b) => a - b);
+		const combinedAvg = mean(combinedTimes);
+		return {
+			fps: ringFps(samples, this.tickWrite, this.tickFilled, TICK_RING_SIZE),
+			frameTime: {
+				avg: combinedAvg,
+				p50: percentile(combinedTimes, 50),
+				p95: percentile(combinedTimes, 95),
+				p99: percentile(combinedTimes, 99),
+				max: combinedTimes[combinedTimes.length - 1]
+			},
+			budgetUsed: combinedAvg / 16.67 * 100,
+			gridAvg: mean(gridTimes),
+			gridP95: percentile(gridTimes, 95),
+			selectionAvg: mean(selTimes),
+			selectionP95: percentile(selTimes, 95),
+			avgDrawCalls: mean(samples.map((s) => s.webgl.drawCalls)),
+			avgTriangles: mean(samples.map((s) => s.webgl.triangles)),
+			avgSelectionFrames: mean(samples.map((s) => s.webgl.selectionFrames)),
+			avgSnapGuides: mean(samples.map((s) => s.webgl.snapGuides)),
+			avgDomUpdates: mean(samples.map((s) => s.webgl.domPositionsUpdated)),
+			sampleCount: n
+		};
+	}
+	getR3FStats() {
+		const samples = this.r3fRing;
+		const n = samples.length;
+		if (n === 0) return {
+			fps: 0,
+			frameTime: {
+				avg: 0,
+				p50: 0,
+				p95: 0,
+				p99: 0,
+				max: 0
+			},
+			avgDrawCalls: 0,
+			avgTriangles: 0,
+			programs: 0,
+			geometries: 0,
+			textures: 0,
+			activeWidgets: 0,
+			avgWidgetsRepainted: 0,
+			fboBytes: 0,
+			phases: {
+				hot: 0,
+				warm: 0,
+				cold: 0,
+				waking: 0,
+				dormant: 0
+			},
+			sampleCount: 0
+		};
+		const dts = samples.map((s) => s.dtMs).toSorted((a, b) => a - b);
+		const fps = ringFps(samples, this.r3fWrite, this.r3fFilled, R3F_RING_SIZE);
+		const latest = samples[this.r3fFilled ? (this.r3fWrite - 1 + R3F_RING_SIZE) % R3F_RING_SIZE : n - 1];
+		const gpuPaintSamples = samples.filter((s) => s.gpuPaintMs !== void 0);
+		const gpuCompositeSamples = samples.filter((s) => s.gpuCompositeMs !== void 0);
+		return {
+			fps,
+			frameTime: {
+				avg: mean(dts),
+				p50: percentile(dts, 50),
+				p95: percentile(dts, 95),
+				p99: percentile(dts, 99),
+				max: dts[dts.length - 1]
+			},
+			avgDrawCalls: mean(samples.map((s) => s.drawCalls)),
+			avgTriangles: mean(samples.map((s) => s.triangles)),
+			programs: latest.programs,
+			geometries: latest.geometries,
+			textures: latest.textures,
+			activeWidgets: latest.activeWidgets,
+			avgWidgetsRepainted: mean(samples.map((s) => s.widgetsRepainted)),
+			fboBytes: latest.fboBytes,
+			phases: latest.phases,
+			avgGpuPaintMs: gpuPaintSamples.length > 0 ? mean(gpuPaintSamples.map((s) => s.gpuPaintMs)) : void 0,
+			avgGpuCompositeMs: gpuCompositeSamples.length > 0 ? mean(gpuCompositeSamples.map((s) => s.gpuCompositeMs)) : void 0,
+			sampleCount: n
+		};
+	}
+	/** Clear all collected data. */
+	clear() {
+		this.tickRing = [];
+		this.tickWrite = 0;
+		this.tickFilled = false;
+		this.r3fRing = [];
+		this.r3fWrite = 0;
+		this.r3fFilled = false;
+	}
+};
+function mean(xs) {
+	if (xs.length === 0) return 0;
+	let sum = 0;
+	for (const x of xs) sum += x;
+	return sum / xs.length;
+}
+function percentile(sorted, p) {
+	if (sorted.length === 0) return 0;
+	return sorted[Math.floor(p / 100 * (sorted.length - 1))] ?? 0;
+}
+function readRing(ring, write, filled, count) {
+	const n = ring.length;
+	if (n === 0) return [];
+	const take = Math.min(count ?? n, n);
+	const out = [];
+	for (let i = 0; i < take; i++) {
+		const idx = (write - 1 - i + n) % n;
+		out.push(ring[idx]);
+	}
+	return out;
+}
+function ringFps(ring, write, filled, size) {
+	const n = ring.length;
+	if (n < 2) return 0;
+	const newest = ring[filled ? (write - 1 + size) % size : n - 1];
+	const oldest = ring[filled ? write : 0];
+	const spanMs = newest.timestamp - oldest.timestamp;
+	return spanMs > 0 ? Math.round((n - 1) / spanMs * 1e3) : 0;
+}
+//#endregion
+//#region ../../node_modules/.pnpm/quickselect@3.0.0/node_modules/quickselect/index.js
+/**
+* Rearranges items so that all items in the [left, k] are the smallest.
+* The k-th element will have the (k - left + 1)-th smallest value in [left, right].
+*
+* @template T
+* @param {T[]} arr the array to partially sort (in place)
+* @param {number} k middle index for partial sorting (as defined above)
+* @param {number} [left=0] left index of the range to sort
+* @param {number} [right=arr.length-1] right index
+* @param {(a: T, b: T) => number} [compare = (a, b) => a - b] compare function
+*/
+function quickselect(arr, k, left = 0, right = arr.length - 1, compare = defaultCompare) {
+	while (right > left) {
+		if (right - left > 600) {
+			const n = right - left + 1;
+			const m = k - left + 1;
+			const z = Math.log(n);
+			const s = .5 * Math.exp(2 * z / 3);
+			const sd = .5 * Math.sqrt(z * s * (n - s) / n) * (m - n / 2 < 0 ? -1 : 1);
+			quickselect(arr, k, Math.max(left, Math.floor(k - m * s / n + sd)), Math.min(right, Math.floor(k + (n - m) * s / n + sd)), compare);
+		}
+		const t = arr[k];
+		let i = left;
+		/** @type {number} */
+		let j = right;
+		swap(arr, left, k);
+		if (compare(arr[right], t) > 0) swap(arr, left, right);
+		while (i < j) {
+			swap(arr, i, j);
+			i++;
+			j--;
+			while (compare(arr[i], t) < 0) i++;
+			while (compare(arr[j], t) > 0) j--;
+		}
+		if (compare(arr[left], t) === 0) swap(arr, left, j);
+		else {
+			j++;
+			swap(arr, j, right);
+		}
+		if (j <= k) left = j + 1;
+		if (k <= j) right = j - 1;
+	}
+}
+/**
+* @template T
+* @param {T[]} arr
+* @param {number} i
+* @param {number} j
+*/
+function swap(arr, i, j) {
+	const tmp = arr[i];
+	arr[i] = arr[j];
+	arr[j] = tmp;
+}
+/**
+* @template T
+* @param {T} a
+* @param {T} b
+* @returns {number}
+*/
+function defaultCompare(a, b) {
+	return a < b ? -1 : a > b ? 1 : 0;
+}
+//#endregion
+//#region ../../node_modules/.pnpm/rbush@4.0.1/node_modules/rbush/index.js
+var RBush$1 = class {
+	constructor(maxEntries = 9) {
+		this._maxEntries = Math.max(4, maxEntries);
+		this._minEntries = Math.max(2, Math.ceil(this._maxEntries * .4));
+		this.clear();
+	}
+	all() {
+		return this._all(this.data, []);
+	}
+	search(bbox) {
+		let node = this.data;
+		const result = [];
+		if (!intersects(bbox, node)) return result;
+		const toBBox = this.toBBox;
+		const nodesToSearch = [];
+		while (node) {
+			for (let i = 0; i < node.children.length; i++) {
+				const child = node.children[i];
+				const childBBox = node.leaf ? toBBox(child) : child;
+				if (intersects(bbox, childBBox)) if (node.leaf) result.push(child);
+				else if (contains(bbox, childBBox)) this._all(child, result);
+				else nodesToSearch.push(child);
+			}
+			node = nodesToSearch.pop();
+		}
+		return result;
+	}
+	collides(bbox) {
+		let node = this.data;
+		if (!intersects(bbox, node)) return false;
+		const nodesToSearch = [];
+		while (node) {
+			for (let i = 0; i < node.children.length; i++) {
+				const child = node.children[i];
+				const childBBox = node.leaf ? this.toBBox(child) : child;
+				if (intersects(bbox, childBBox)) {
+					if (node.leaf || contains(bbox, childBBox)) return true;
+					nodesToSearch.push(child);
+				}
+			}
+			node = nodesToSearch.pop();
+		}
+		return false;
+	}
+	load(data) {
+		if (!(data && data.length)) return this;
+		if (data.length < this._minEntries) {
+			for (let i = 0; i < data.length; i++) this.insert(data[i]);
+			return this;
+		}
+		let node = this._build(data.slice(), 0, data.length - 1, 0);
+		if (!this.data.children.length) this.data = node;
+		else if (this.data.height === node.height) this._splitRoot(this.data, node);
+		else {
+			if (this.data.height < node.height) {
+				const tmpNode = this.data;
+				this.data = node;
+				node = tmpNode;
+			}
+			this._insert(node, this.data.height - node.height - 1, true);
+		}
+		return this;
+	}
+	insert(item) {
+		if (item) this._insert(item, this.data.height - 1);
+		return this;
+	}
+	clear() {
+		this.data = createNode([]);
+		return this;
+	}
+	remove(item, equalsFn) {
+		if (!item) return this;
+		let node = this.data;
+		const bbox = this.toBBox(item);
+		const path = [];
+		const indexes = [];
+		let i, parent, goingUp;
+		while (node || path.length) {
+			if (!node) {
+				node = path.pop();
+				parent = path[path.length - 1];
+				i = indexes.pop();
+				goingUp = true;
+			}
+			if (node.leaf) {
+				const index = findItem(item, node.children, equalsFn);
+				if (index !== -1) {
+					node.children.splice(index, 1);
+					path.push(node);
+					this._condense(path);
+					return this;
+				}
+			}
+			if (!goingUp && !node.leaf && contains(node, bbox)) {
+				path.push(node);
+				indexes.push(i);
+				i = 0;
+				parent = node;
+				node = node.children[0];
+			} else if (parent) {
+				i++;
+				node = parent.children[i];
+				goingUp = false;
+			} else node = null;
+		}
+		return this;
+	}
+	toBBox(item) {
+		return item;
+	}
+	compareMinX(a, b) {
+		return a.minX - b.minX;
+	}
+	compareMinY(a, b) {
+		return a.minY - b.minY;
+	}
+	toJSON() {
+		return this.data;
+	}
+	fromJSON(data) {
+		this.data = data;
+		return this;
+	}
+	_all(node, result) {
+		const nodesToSearch = [];
+		while (node) {
+			if (node.leaf) result.push(...node.children);
+			else nodesToSearch.push(...node.children);
+			node = nodesToSearch.pop();
+		}
+		return result;
+	}
+	_build(items, left, right, height) {
+		const N = right - left + 1;
+		let M = this._maxEntries;
+		let node;
+		if (N <= M) {
+			node = createNode(items.slice(left, right + 1));
+			calcBBox(node, this.toBBox);
+			return node;
+		}
+		if (!height) {
+			height = Math.ceil(Math.log(N) / Math.log(M));
+			M = Math.ceil(N / Math.pow(M, height - 1));
+		}
+		node = createNode([]);
+		node.leaf = false;
+		node.height = height;
+		const N2 = Math.ceil(N / M);
+		const N1 = N2 * Math.ceil(Math.sqrt(M));
+		multiSelect(items, left, right, N1, this.compareMinX);
+		for (let i = left; i <= right; i += N1) {
+			const right2 = Math.min(i + N1 - 1, right);
+			multiSelect(items, i, right2, N2, this.compareMinY);
+			for (let j = i; j <= right2; j += N2) {
+				const right3 = Math.min(j + N2 - 1, right2);
+				node.children.push(this._build(items, j, right3, height - 1));
+			}
+		}
+		calcBBox(node, this.toBBox);
+		return node;
+	}
+	_chooseSubtree(bbox, node, level, path) {
+		while (true) {
+			path.push(node);
+			if (node.leaf || path.length - 1 === level) break;
+			let minArea = Infinity;
+			let minEnlargement = Infinity;
+			let targetNode;
+			for (let i = 0; i < node.children.length; i++) {
+				const child = node.children[i];
+				const area = bboxArea(child);
+				const enlargement = enlargedArea(bbox, child) - area;
+				if (enlargement < minEnlargement) {
+					minEnlargement = enlargement;
+					minArea = area < minArea ? area : minArea;
+					targetNode = child;
+				} else if (enlargement === minEnlargement) {
+					if (area < minArea) {
+						minArea = area;
+						targetNode = child;
+					}
+				}
+			}
+			node = targetNode || node.children[0];
+		}
+		return node;
+	}
+	_insert(item, level, isNode) {
+		const bbox = isNode ? item : this.toBBox(item);
+		const insertPath = [];
+		const node = this._chooseSubtree(bbox, this.data, level, insertPath);
+		node.children.push(item);
+		extend(node, bbox);
+		while (level >= 0) if (insertPath[level].children.length > this._maxEntries) {
+			this._split(insertPath, level);
+			level--;
+		} else break;
+		this._adjustParentBBoxes(bbox, insertPath, level);
+	}
+	_split(insertPath, level) {
+		const node = insertPath[level];
+		const M = node.children.length;
+		const m = this._minEntries;
+		this._chooseSplitAxis(node, m, M);
+		const splitIndex = this._chooseSplitIndex(node, m, M);
+		const newNode = createNode(node.children.splice(splitIndex, node.children.length - splitIndex));
+		newNode.height = node.height;
+		newNode.leaf = node.leaf;
+		calcBBox(node, this.toBBox);
+		calcBBox(newNode, this.toBBox);
+		if (level) insertPath[level - 1].children.push(newNode);
+		else this._splitRoot(node, newNode);
+	}
+	_splitRoot(node, newNode) {
+		this.data = createNode([node, newNode]);
+		this.data.height = node.height + 1;
+		this.data.leaf = false;
+		calcBBox(this.data, this.toBBox);
+	}
+	_chooseSplitIndex(node, m, M) {
+		let index;
+		let minOverlap = Infinity;
+		let minArea = Infinity;
+		for (let i = m; i <= M - m; i++) {
+			const bbox1 = distBBox(node, 0, i, this.toBBox);
+			const bbox2 = distBBox(node, i, M, this.toBBox);
+			const overlap = intersectionArea(bbox1, bbox2);
+			const area = bboxArea(bbox1) + bboxArea(bbox2);
+			if (overlap < minOverlap) {
+				minOverlap = overlap;
+				index = i;
+				minArea = area < minArea ? area : minArea;
+			} else if (overlap === minOverlap) {
+				if (area < minArea) {
+					minArea = area;
+					index = i;
+				}
+			}
+		}
+		return index || M - m;
+	}
+	_chooseSplitAxis(node, m, M) {
+		const compareMinX = node.leaf ? this.compareMinX : compareNodeMinX;
+		const compareMinY = node.leaf ? this.compareMinY : compareNodeMinY;
+		if (this._allDistMargin(node, m, M, compareMinX) < this._allDistMargin(node, m, M, compareMinY)) node.children.sort(compareMinX);
+	}
+	_allDistMargin(node, m, M, compare) {
+		node.children.sort(compare);
+		const toBBox = this.toBBox;
+		const leftBBox = distBBox(node, 0, m, toBBox);
+		const rightBBox = distBBox(node, M - m, M, toBBox);
+		let margin = bboxMargin(leftBBox) + bboxMargin(rightBBox);
+		for (let i = m; i < M - m; i++) {
+			const child = node.children[i];
+			extend(leftBBox, node.leaf ? toBBox(child) : child);
+			margin += bboxMargin(leftBBox);
+		}
+		for (let i = M - m - 1; i >= m; i--) {
+			const child = node.children[i];
+			extend(rightBBox, node.leaf ? toBBox(child) : child);
+			margin += bboxMargin(rightBBox);
+		}
+		return margin;
+	}
+	_adjustParentBBoxes(bbox, path, level) {
+		for (let i = level; i >= 0; i--) extend(path[i], bbox);
+	}
+	_condense(path) {
+		for (let i = path.length - 1, siblings; i >= 0; i--) if (path[i].children.length === 0) if (i > 0) {
+			siblings = path[i - 1].children;
+			siblings.splice(siblings.indexOf(path[i]), 1);
+		} else this.clear();
+		else calcBBox(path[i], this.toBBox);
+	}
+};
+function findItem(item, items, equalsFn) {
+	if (!equalsFn) return items.indexOf(item);
+	for (let i = 0; i < items.length; i++) if (equalsFn(item, items[i])) return i;
+	return -1;
+}
+function calcBBox(node, toBBox) {
+	distBBox(node, 0, node.children.length, toBBox, node);
+}
+function distBBox(node, k, p, toBBox, destNode) {
+	if (!destNode) destNode = createNode(null);
+	destNode.minX = Infinity;
+	destNode.minY = Infinity;
+	destNode.maxX = -Infinity;
+	destNode.maxY = -Infinity;
+	for (let i = k; i < p; i++) {
+		const child = node.children[i];
+		extend(destNode, node.leaf ? toBBox(child) : child);
+	}
+	return destNode;
+}
+function extend(a, b) {
+	a.minX = Math.min(a.minX, b.minX);
+	a.minY = Math.min(a.minY, b.minY);
+	a.maxX = Math.max(a.maxX, b.maxX);
+	a.maxY = Math.max(a.maxY, b.maxY);
+	return a;
+}
+function compareNodeMinX(a, b) {
+	return a.minX - b.minX;
+}
+function compareNodeMinY(a, b) {
+	return a.minY - b.minY;
+}
+function bboxArea(a) {
+	return (a.maxX - a.minX) * (a.maxY - a.minY);
+}
+function bboxMargin(a) {
+	return a.maxX - a.minX + (a.maxY - a.minY);
+}
+function enlargedArea(a, b) {
+	return (Math.max(b.maxX, a.maxX) - Math.min(b.minX, a.minX)) * (Math.max(b.maxY, a.maxY) - Math.min(b.minY, a.minY));
+}
+function intersectionArea(a, b) {
+	const minX = Math.max(a.minX, b.minX);
+	const minY = Math.max(a.minY, b.minY);
+	const maxX = Math.min(a.maxX, b.maxX);
+	const maxY = Math.min(a.maxY, b.maxY);
+	return Math.max(0, maxX - minX) * Math.max(0, maxY - minY);
+}
+function contains(a, b) {
+	return a.minX <= b.minX && a.minY <= b.minY && b.maxX <= a.maxX && b.maxY <= a.maxY;
+}
+function intersects(a, b) {
+	return b.minX <= a.maxX && b.minY <= a.maxY && b.maxX >= a.minX && b.maxY >= a.minY;
+}
+function createNode(children) {
+	return {
+		children,
+		height: 1,
+		leaf: true,
+		minX: Infinity,
+		minY: Infinity,
+		maxX: -Infinity,
+		maxY: -Infinity
+	};
+}
+function multiSelect(arr, left, right, n, compare) {
+	const stack = [left, right];
+	while (stack.length) {
+		right = stack.pop();
+		left = stack.pop();
+		if (right - left <= n) continue;
+		const mid = left + Math.ceil((right - left) / n / 2) * n;
+		quickselect(arr, mid, left, right, compare);
+		stack.push(left, mid, mid, right);
+	}
+}
+//#endregion
+//#region src/ecs/spatial/SpatialIndex.ts
+const rbushModule = RBush$1;
+const RBush = typeof rbushModule.default === "function" ? rbushModule.default : RBush$1;
+/**
+* Spatial index backed by an R-tree (rbush).
+* Stores world-space AABBs for fast viewport culling and hit testing.
+*/
+var SpatialIndex = class {
+	tree = new RBush();
+	entries = /* @__PURE__ */ new Map();
+	upsert(entityId, bounds) {
+		const existing = this.entries.get(entityId);
+		if (existing) this.tree.remove(existing);
+		const entry = {
+			...bounds,
+			entityId
+		};
+		this.entries.set(entityId, entry);
+		this.tree.insert(entry);
+	}
+	remove(entityId) {
+		const existing = this.entries.get(entityId);
+		if (existing) {
+			this.tree.remove(existing);
+			this.entries.delete(entityId);
+		}
+	}
+	/** Query all entries intersecting the given AABB */
+	search(bounds) {
+		return this.tree.search(bounds);
+	}
+	/** Find the topmost entity at a point (by z-order — caller sorts) */
+	searchPoint(x, y, tolerance = 0) {
+		return this.tree.search({
+			minX: x - tolerance,
+			minY: y - tolerance,
+			maxX: x + tolerance,
+			maxY: y + tolerance
+		});
+	}
+	clear() {
+		this.tree.clear();
+		this.entries.clear();
+	}
+	get size() {
+		return this.entries.size;
+	}
+};
+//#endregion
+//#region src/ecs/spatial/snap.ts
+/**
+* Compute snap guides for a dragged entity against reference entities.
+*/
+function computeSnapGuides(dragged, references, threshold) {
+	const guides = [];
+	const spacings = [];
+	let snapDx = 0;
+	let snapDy = 0;
+	const dLeft = dragged.x;
+	const dRight = dragged.x + dragged.width;
+	const dCenterX = dragged.x + dragged.width / 2;
+	const dTop = dragged.y;
+	const dBottom = dragged.y + dragged.height;
+	const dCenterY = dragged.y + dragged.height / 2;
+	let bestSnapX = Number.POSITIVE_INFINITY;
+	let bestSnapY = Number.POSITIVE_INFINITY;
+	let bestDx = 0;
+	let bestDy = 0;
+	const xGuides = [];
+	const yGuides = [];
+	for (const ref of references) {
+		const rLeft = ref.x;
+		const rRight = ref.x + ref.width;
+		const rCenterX = ref.x + ref.width / 2;
+		const rTop = ref.y;
+		const rBottom = ref.y + ref.height;
+		const rCenterY = ref.y + ref.height / 2;
+		const xPairs = [
+			[
+				dLeft,
+				rLeft,
+				"edge"
+			],
+			[
+				dLeft,
+				rRight,
+				"edge"
+			],
+			[
+				dRight,
+				rLeft,
+				"edge"
+			],
+			[
+				dRight,
+				rRight,
+				"edge"
+			],
+			[
+				dCenterX,
+				rCenterX,
+				"center"
+			],
+			[
+				dLeft,
+				rCenterX,
+				"edge"
+			],
+			[
+				dRight,
+				rCenterX,
+				"edge"
+			]
+		];
+		for (const [dVal, rVal, type] of xPairs) {
+			const dist = Math.abs(dVal - rVal);
+			if (dist <= threshold) {
+				const dx = rVal - dVal;
+				if (dist < bestSnapX) {
+					bestSnapX = dist;
+					bestDx = dx;
+					xGuides.length = 0;
+				}
+				if (dist <= bestSnapX + .01) xGuides.push({
+					axis: "x",
+					position: rVal,
+					type
+				});
+			}
+		}
+		const yPairs = [
+			[
+				dTop,
+				rTop,
+				"edge"
+			],
+			[
+				dTop,
+				rBottom,
+				"edge"
+			],
+			[
+				dBottom,
+				rTop,
+				"edge"
+			],
+			[
+				dBottom,
+				rBottom,
+				"edge"
+			],
+			[
+				dCenterY,
+				rCenterY,
+				"center"
+			],
+			[
+				dTop,
+				rCenterY,
+				"edge"
+			],
+			[
+				dBottom,
+				rCenterY,
+				"edge"
+			]
+		];
+		for (const [dVal, rVal, type] of yPairs) {
+			const dist = Math.abs(dVal - rVal);
+			if (dist <= threshold) {
+				const dy = rVal - dVal;
+				if (dist < bestSnapY) {
+					bestSnapY = dist;
+					bestDy = dy;
+					yGuides.length = 0;
+				}
+				if (dist <= bestSnapY + .01) yGuides.push({
+					axis: "y",
+					position: rVal,
+					type
+				});
+			}
+		}
+	}
+	const eqResult = computeEqualSpacing(dragged, references, threshold);
+	if (bestSnapX <= threshold) snapDx = bestDx;
+	else if (eqResult.snapDx !== void 0) snapDx = eqResult.snapDx;
+	if (bestSnapY <= threshold) snapDy = bestDy;
+	else if (eqResult.snapDy !== void 0) snapDy = eqResult.snapDy;
+	if (bestSnapX <= threshold) {
+		const seen = /* @__PURE__ */ new Set();
+		for (const g of xGuides) if (!seen.has(g.position)) {
+			seen.add(g.position);
+			guides.push(g);
+		}
+	}
+	if (bestSnapY <= threshold) {
+		const seen = /* @__PURE__ */ new Set();
+		for (const g of yGuides) if (!seen.has(g.position)) {
+			seen.add(g.position);
+			guides.push(g);
+		}
+	}
+	const eqFinal = computeEqualSpacing({
+		x: dragged.x + snapDx,
+		y: dragged.y + snapDy,
+		width: dragged.width,
+		height: dragged.height
+	}, references, threshold * .5);
+	spacings.push(...eqFinal.indicators);
+	return {
+		snapDx,
+		snapDy,
+		guides,
+		spacings
+	};
+}
+function computeEqualSpacing(dragged, references, threshold) {
+	const indicators = [];
+	let snapDx;
+	let snapDy;
+	const xResult = checkAxisSpacing(dragged, references, threshold, "x");
+	if (xResult) {
+		snapDx = xResult.snap;
+		indicators.push(...xResult.indicators);
+	}
+	const yResult = checkAxisSpacing(dragged, references, threshold, "y");
+	if (yResult) {
+		snapDy = yResult.snap;
+		indicators.push(...yResult.indicators);
+	}
+	return {
+		snapDx,
+		snapDy,
+		indicators
+	};
+}
+function checkAxisSpacing(dragged, references, threshold, axis) {
+	const isX = axis === "x";
+	const pos = (b) => isX ? b.x : b.y;
+	const size = (b) => isX ? b.width : b.height;
+	const perpPos = (b) => isX ? b.y : b.x;
+	const perpSize = (b) => isX ? b.height : b.width;
+	const end = (b) => pos(b) + size(b);
+	const neighbors = references.filter((ref) => perpPos(ref) < perpPos(dragged) + perpSize(dragged) && perpPos(ref) + perpSize(ref) > perpPos(dragged));
+	if (neighbors.length < 1) return null;
+	const sorted = [...neighbors].toSorted((a, b) => pos(a) - pos(b));
+	const refGaps = [];
+	for (let i = 0; i < sorted.length - 1; i++) {
+		const gap = pos(sorted[i + 1]) - end(sorted[i]);
+		if (gap > .1) refGaps.push({
+			from: sorted[i],
+			to: sorted[i + 1],
+			gap
+		});
+	}
+	let bestSnap = null;
+	let bestIndicators = [];
+	let bestDiff = Number.POSITIVE_INFINITY;
+	let leftN = null;
+	let rightN = null;
+	for (const ref of sorted) {
+		if (end(ref) <= pos(dragged) + threshold) {
+			if (!leftN || end(ref) > end(leftN)) leftN = ref;
+		}
+		if (pos(ref) >= end(dragged) - threshold) {
+			if (!rightN || pos(ref) < pos(rightN)) rightN = ref;
+		}
+	}
+	if (leftN && rightN) {
+		const lGap = pos(dragged) - end(leftN);
+		const rGap = pos(rightN) - end(dragged);
+		const diff = Math.abs(lGap - rGap);
+		if (diff <= threshold && diff < bestDiff) {
+			const idealPos = (end(leftN) + pos(rightN) - size(dragged)) / 2;
+			const snap = idealPos - pos(dragged);
+			const equalGap = (pos(rightN) - end(leftN) - size(dragged)) / 2;
+			if (equalGap > .1) {
+				const perpY = computePerpCenter(dragged, [leftN, rightN], isX);
+				bestSnap = snap;
+				bestDiff = diff;
+				bestIndicators = [{
+					axis,
+					gap: equalGap,
+					segments: [{
+						from: end(leftN),
+						to: idealPos
+					}, {
+						from: idealPos + size(dragged),
+						to: pos(rightN)
+					}],
+					perpPosition: perpY
+				}];
+			}
+		}
+	}
+	for (const refGap of refGaps) {
+		const patternGap = refGap.gap;
+		if (rightN === null || pos(refGap.to) >= end(dragged) - threshold * 2) {
+			const chainEnd = refGap.to;
+			const dragGap = pos(dragged) - end(chainEnd);
+			const diff = Math.abs(dragGap - patternGap);
+			if (diff <= threshold && diff < bestDiff) {
+				const idealPos = end(chainEnd) + patternGap;
+				const snap = idealPos - pos(dragged);
+				const perpY = computePerpCenter(dragged, [refGap.from, refGap.to], isX);
+				bestSnap = snap;
+				bestDiff = diff;
+				bestIndicators = [{
+					axis,
+					gap: patternGap,
+					segments: [{
+						from: end(refGap.from),
+						to: pos(refGap.to)
+					}, {
+						from: end(chainEnd),
+						to: idealPos
+					}],
+					perpPosition: perpY
+				}];
+			}
+		}
+		if (leftN === null || end(refGap.from) <= pos(dragged) + threshold * 2) {
+			const chainStart = refGap.from;
+			const dragGap = pos(chainStart) - end(dragged);
+			const diff = Math.abs(dragGap - patternGap);
+			if (diff <= threshold && diff < bestDiff) {
+				const idealPos = pos(chainStart) - patternGap - size(dragged);
+				const snap = idealPos - pos(dragged);
+				const perpY = computePerpCenter(dragged, [refGap.from, refGap.to], isX);
+				bestSnap = snap;
+				bestDiff = diff;
+				bestIndicators = [{
+					axis,
+					gap: patternGap,
+					segments: [{
+						from: idealPos + size(dragged),
+						to: pos(chainStart)
+					}, {
+						from: end(refGap.from),
+						to: pos(refGap.to)
+					}],
+					perpPosition: perpY
+				}];
+			}
+		}
+	}
+	if (bestSnap !== null) return {
+		snap: bestSnap,
+		indicators: bestIndicators
+	};
+	return null;
+}
+function computePerpCenter(dragged, refs, isX) {
+	const perpPos = (b) => isX ? b.y : b.x;
+	const perpSize = (b) => isX ? b.height : b.width;
+	const allBounds = [dragged, ...refs];
+	const maxStart = Math.max(...allBounds.map(perpPos));
+	const minEnd = Math.min(...allBounds.map((b) => perpPos(b) + perpSize(b)));
+	if (minEnd < maxStart) return perpPos(allBounds[0]) + perpSize(allBounds[0]) / 2;
+	return maxStart + (minEnd - maxStart) / 2;
+}
+//#endregion
+//#region src/react/context/container-ref-context.ts
+const ContainerRefContext = createContext(null);
+const ContainerRefProvider = ContainerRefContext.Provider;
+function useContainerRef() {
+	return useContext(ContainerRefContext);
+}
+//#endregion
+//#region src/react/context/widget-resolver-context.ts
+const WidgetResolverContext = createContext(null);
+const WidgetResolverProvider = WidgetResolverContext.Provider;
+function useWidgetResolver() {
+	return useContext(WidgetResolverContext);
+}
+//#endregion
+//#region src/react/input/debug.ts
+/**
+* RFC-008 input pipeline — diagnostic logger.
+*
+* Single toggle (`INPUT_DEBUG`) wires every layer's "what just happened"
+* decision into the browser console with colour-coded tags so the dispatch
+* flow is legible in real time:
+*
+*   [Adapter] [InputManager] [Router] [R3F] [Recognizer] [Engine]
+*
+* `INPUT_DEBUG_VERBOSE` extends this to per-frame `move` events, which
+* fire at 60+ Hz and quickly drown the console — leave it `false` unless
+* you're chasing a hover or pan-update issue.
+*
+* Toggle either by editing the constants below or, more conveniently, by
+* setting `window.__INPUT_DEBUG__` / `window.__INPUT_DEBUG_VERBOSE__` from
+* the devtools console at runtime.
+*/
+const DEFAULT_DEBUG = true;
+const DEFAULT_VERBOSE = false;
+function isDebug() {
+	if (typeof window === "undefined") return DEFAULT_DEBUG;
+	return window.__INPUT_DEBUG__ ?? DEFAULT_DEBUG;
+}
+function isVerbose() {
+	if (typeof window === "undefined") return DEFAULT_VERBOSE;
+	return window.__INPUT_DEBUG_VERBOSE__ ?? DEFAULT_VERBOSE;
+}
+const STYLES = {
+	Adapter: "background:#0288d1; color:#fff; padding:1px 4px; border-radius:2px; font-weight:bold",
+	InputManager: "background:#f9a825; color:#222; padding:1px 4px; border-radius:2px; font-weight:bold",
+	Router: "background:#7b1fa2; color:#fff; padding:1px 4px; border-radius:2px; font-weight:bold",
+	R3F: "background:#00838f; color:#fff; padding:1px 4px; border-radius:2px; font-weight:bold",
+	Recognizer: "background:#558b2f; color:#fff; padding:1px 4px; border-radius:2px",
+	Engine: "background:#d84315; color:#fff; padding:1px 4px; border-radius:2px; font-weight:bold"
+};
+/**
+* Log a single line tagged with a layer. `data` is appended as a single
+* object so devtools can expand it inline.
+*
+* `move`-typed events are gated on `INPUT_DEBUG_VERBOSE` so the default
+* trace stays readable.
+*/
+function inputLog(layer, message, data) {
+	if (!isDebug()) return;
+	if (typeof data?.type === "string" && (data.type === "move" || data.type.endsWith("-update")) && !isVerbose()) return;
+	if (data !== void 0) console.log(`%c${layer}%c ${message}`, STYLES[layer], "color:inherit", data);
+	else console.log(`%c${layer}%c ${message}`, STYLES[layer], "color:inherit");
+}
+/**
+* Group all logs for a single InputManager.dispatch under one collapsible
+* heading. Pass the returned closer to console.groupEnd at the end of
+* dispatch. No-op when debug is off.
+*/
+function inputGroupStart(label) {
+	if (!isDebug()) return () => {};
+	console.groupCollapsed(`%cInput · ${label}`, "color:#555; font-weight:bold");
+	return () => console.groupEnd();
+}
+//#endregion
+//#region src/react/input/r3f/createR3FEventManager.ts
+function createR3FEventManager(engine, registry, onCreate) {
+	let activeScene = null;
+	function skipEvent(state) {
+		activeScene = null;
+		state.raycaster.camera = null;
+		state.pointer.set(0, 0);
+	}
+	return (store) => {
+		const base = events(store);
+		const compute = (event, state) => {
+			const rect = state.gl.domElement.getBoundingClientRect();
+			const screenX = event.clientX - rect.left;
+			const screenY = event.clientY - rect.top;
+			const entityId = engine.pickAt(screenX, screenY);
+			if (entityId === null) {
+				skipEvent(state);
+				return;
+			}
+			if (engine.get(entityId, Widget)?.surface !== "webgl") {
+				skipEvent(state);
+				return;
+			}
+			const widget = registry.get(entityId);
+			const t = engine.get(entityId, Transform2D);
+			if (!widget || !t) {
+				skipEvent(state);
+				return;
+			}
+			const cam = engine.getCamera();
+			const worldX = screenX / cam.zoom + cam.x;
+			const worldY = screenY / cam.zoom + cam.y;
+			const widgetCenterX = t.x + t.width / 2;
+			const widgetCenterY = t.y + t.height / 2;
+			const localX = worldX - widgetCenterX;
+			const localY = -(worldY - widgetCenterY);
+			const ndcX = 2 * localX / t.width;
+			const ndcY = 2 * localY / t.height;
+			activeScene = widget.scene;
+			state.pointer.set(ndcX, ndcY);
+			state.raycaster.setFromCamera(state.pointer, widget.camera);
+			state.raycaster.camera = widget.camera;
+			inputLog("R3F", `compute: ready raycaster for entity ${entityId}`, {
+				type: event.type,
+				entityId,
+				ndc: {
+					x: ndcX,
+					y: ndcY
+				},
+				sceneChildren: widget.scene.children.length
+			});
+		};
+		const filter = (items) => {
+			const scene = activeScene;
+			if (!scene) return [];
+			return items.filter((hit) => isDescendantOf(hit.object, scene));
+		};
+		const isPointerCaptured = (pointerId) => {
+			return store.getState().internal?.capturedMap?.has?.(pointerId) ?? false;
+		};
+		const manager = {
+			...base,
+			compute,
+			filter,
+			isPointerCaptured,
+			connect: (_target) => {
+				inputLog("R3F", "createR3FEventManager.connect: no-op (driven by InputManager)");
+			},
+			disconnect: () => {
+				inputLog("R3F", "createR3FEventManager.disconnect: no-op");
+			}
+		};
+		onCreate?.(manager);
+		return manager;
+	};
+}
+function isDescendantOf(obj, ancestor) {
+	let n = obj;
+	while (n) {
+		if (n === ancestor) return true;
+		n = n.parent;
+	}
+	return false;
+}
+//#endregion
+//#region src/r3f/compositor/CompositionMaterial.ts
+/**
+* Module-level shared uniforms for the overlap glow.
+*
+* Every {@link CompositionMaterial} instance references THESE EXACT
+* Vector2 / Vector3 objects. Mutating any `.value` here propagates to
+* every R3F card simultaneously (Three.js sees them as the same uniform
+* binding). One call to `applyOverlapGlowShaderUniforms(config)` retunes
+* every card without iterating materials.
+*/
+const sharedGlowUniforms = {
+	uGlowColor: { value: new Vector3(.5, .5, .5) },
+	uGlowAlpha: { value: new Vector2(.25, .45) },
+	uGlowFalloff: { value: new Vector2(.3, .4) },
+	uRimColor: { value: new Vector3(.5, .5, .5) },
+	uRimAlpha: { value: new Vector2(.55, .85) },
+	uRimRadius: { value: 3 }
+};
+/**
+* Shader pair for the composition pass — sample an sRGB-encoded widget
+* FBO and write it to the sRGB backbuffer unchanged. No tone mapping,
+* no output encoding (the FBO already holds display-ready values, see
+* RFC-002 § sRGB FBO fix).
+*
+* `uDraggedRect` + `uIsDragged` implement the RFC-003 drag-promote
+* clip: when an R3F widget is being dragged, every other widget's
+* fragments inside that widget's screen rect are discarded so the
+* promoted DOM CardChrome (now above the R3F canvas) shows through.
+*
+* `uHotPoint` + `uHotStrength` + `uIsOverlapTarget` drive the
+* single-layer overlap glow — a soft radial gradient at the
+* intersection centroid that fades out via `uGlowFalloff`. Color and
+* alpha are tunable via {@link sharedGlowUniforms}.
+*/
+const VERTEX_SHADER = `
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;
+const FRAGMENT_SHADER = `
+uniform sampler2D map;
+uniform vec4 uDraggedRect;
+uniform float uIsDragged;
+uniform vec2 uHotPoint;
+uniform float uHotStrength;
+uniform float uIsOverlapTarget;
+
+uniform vec3 uGlowColor;
+uniform vec2 uGlowAlpha;
+uniform vec2 uGlowFalloff;
+uniform vec3 uRimColor;
+uniform vec2 uRimAlpha;
+uniform float uRimRadius;
+
+varying vec2 vUv;
+
+void main() {
+  if (uIsDragged < 0.5) {
+    vec2 sp = gl_FragCoord.xy;
+    if (sp.x >= uDraggedRect.x && sp.x <= uDraggedRect.z &&
+        sp.y >= uDraggedRect.y && sp.y <= uDraggedRect.w) {
+      discard;
+    }
+  }
+  vec4 c = texture2D(map, vUv);
+  if (c.a < 0.001) discard;
+
+  // Two-part overlap highlight, both tinted with uGlowColor:
+  //   1. Inner glow — soft radial at the hot point, falling off to
+  //      transparent at uGlowFalloff.
+  //   2. Rim — a thin band along the card edge that pools toward the
+  //      hot point (rimBand AND rimFocus must both be high).
+  if (uHotStrength > 0.001) {
+    float d = length(vUv - uHotPoint);
+
+    // Inner glow.
+    float falloff = mix(uGlowFalloff.x, uGlowFalloff.y, uIsOverlapTarget);
+    float alpha = mix(uGlowAlpha.x, uGlowAlpha.y, uIsOverlapTarget);
+    float glow = smoothstep(falloff, 0.0, d) * uHotStrength * alpha;
+    c.rgb = mix(c.rgb, uGlowColor, glow);
+
+    // Rim — band thickness fixed at 0.028 in uv (~3% of card on each
+    // axis); brightness pools toward the hot point via rimFocus, with
+    // falloff distance derived from uRimRadius (matches the DOM
+    // radial-gradient(uRimRadius circle ..., transparent 40%)).
+    float edge = min(min(vUv.x, 1.0 - vUv.x), min(vUv.y, 1.0 - vUv.y));
+    float rimBand = smoothstep(0.028, 0.0, edge);
+    float rimFocus = smoothstep(uRimRadius * 0.4, 0.0, d);
+    float rimA = mix(uRimAlpha.x, uRimAlpha.y, uIsOverlapTarget);
+    float rim = rimBand * rimFocus * uHotStrength * rimA;
+    c.rgb = mix(c.rgb, uRimColor, rim);
+  }
+
+  gl_FragColor = c;
+  #include <colorspace_fragment>
+}
+`;
+/**
+* Per-instance composition material. Each widget's quad gets its own
+* instance so the per-quad uniforms (`map`, `uIsDragged`,
+* `uDraggedRect`) are independent. Three.js compiles the shader once
+* and reuses the program across instances since they share
+* vertex/fragment source — verify in dev via
+* `renderer.info.programs.length === 1` for the composition shader.
+*/
+var CompositionMaterial = class extends ShaderMaterial {
+	constructor() {
+		super({
+			vertexShader: VERTEX_SHADER,
+			fragmentShader: FRAGMENT_SHADER,
+			uniforms: {
+				map: { value: null },
+				uDraggedRect: { value: new Vector4(0, 0, 0, 0) },
+				uIsDragged: { value: 0 },
+				uHotPoint: { value: new Vector2(.5, .5) },
+				uHotStrength: { value: 0 },
+				uIsOverlapTarget: { value: 0 },
+				uGlowColor: sharedGlowUniforms.uGlowColor,
+				uGlowAlpha: sharedGlowUniforms.uGlowAlpha,
+				uGlowFalloff: sharedGlowUniforms.uGlowFalloff,
+				uRimColor: sharedGlowUniforms.uRimColor,
+				uRimAlpha: sharedGlowUniforms.uRimAlpha,
+				uRimRadius: sharedGlowUniforms.uRimRadius
+			},
+			transparent: true,
+			depthWrite: false
+		});
+	}
+	setMap(map) {
+		this.uniforms.map.value = map;
+	}
+	setDraggedRect(minX, minY, maxX, maxY) {
+		this.uniforms.uDraggedRect.value.set(minX, minY, maxX, maxY);
+	}
+	setIsDragged(isDragged) {
+		this.uniforms.uIsDragged.value = isDragged ? 1 : 0;
+	}
+	/** Set the radial-glow centre in uv space (0..1). */
+	setHotPoint(x, y) {
+		this.uniforms.uHotPoint.value.set(x, y);
+	}
+	/** 0..1 — glow opacity; set to 0 to disable. */
+	setHotStrength(strength) {
+		this.uniforms.uHotStrength.value = strength;
+	}
+	/** Toggle target state (mixes toward the target alpha / falloff). */
+	setIsOverlapTarget(on) {
+		this.uniforms.uIsOverlapTarget.value = on ? 1 : 0;
+	}
+};
+//#endregion
+//#region src/r3f/compositor/CompositorContext.tsx
+const CompositorContext = createContext(null);
+function useCompositor() {
+	const ctx = useContext(CompositorContext);
+	if (!ctx) throw new Error("useCompositor must be used inside <Compositor>");
+	return ctx;
+}
+//#endregion
+//#region src/r3f/compositor/eviction.ts
+/**
+* Eviction priority — lower numbers evict first. Hot and Waking are never
+* evicted because they are about to be (or are actively) painted.
+*
+*   Cold     0  off-screen, eviction-eligible immediately
+*   Warm     1  visible + idle, retained while budget allows
+*   Dormant  2  inactive but eviction-protected — only released as a
+*               last resort because losing the FBO costs the
+*               "instant re-activation" guarantee
+*   Waking   ∞  scheduled to repaint imminently — never evict
+*   Hot      ∞  actively painted every frame — never evict
+*/
+const PHASE_PRIORITY = {
+	Cold: 0,
+	Warm: 1,
+	Dormant: 2,
+	Waking: Number.POSITIVE_INFINITY,
+	Hot: Number.POSITIVE_INFINITY
+};
+/**
+* Returns the ordered list of entity ids to release so total bytes ≤ budget.
+* Sort key: `(phasePriority, lastUsedMs)` — within a phase, oldest goes
+* first (LRU). Hot / Waking widgets are never returned even if the budget
+* is impossible to satisfy without them.
+*
+* Pure function — Compositor calls this in its useFrame and forwards each
+* id to `pool.release()`.
+*/
+function selectEvictions(candidates, totalBytes, maxBytes) {
+	if (totalBytes <= maxBytes) return [];
+	const eligible = candidates.filter((c) => Number.isFinite(PHASE_PRIORITY[c.phase]));
+	eligible.sort((a, b) => {
+		const p = PHASE_PRIORITY[a.phase] - PHASE_PRIORITY[b.phase];
+		if (p !== 0) return p;
+		return a.lastUsedMs - b.lastUsedMs;
+	});
+	const toEvict = [];
+	let remaining = totalBytes;
+	for (const c of eligible) {
+		if (remaining <= maxBytes) break;
+		toEvict.push(c.entityId);
+		remaining -= c.bytes;
+	}
+	return toEvict;
+}
+//#endregion
+//#region src/r3f/compositor/ResourceRegistry.ts
+/**
+* Archetype-keyed cache of GPU resources shared across per-widget scenes
+* (RFC-002 § Three.js resource sharing).
+*
+* Geometries, materials, and textures returned by `acquire*` are reference
+* counted. The registry disposes the underlying resource only after every
+* holder has called the matching `release*` — so 100 widgets of the same
+* card archetype share one geometry instance and one set of material
+* uniforms, rather than allocating 100 copies.
+*/
+var ResourceRegistry = class {
+	geometries = /* @__PURE__ */ new Map();
+	materials = /* @__PURE__ */ new Map();
+	textures = /* @__PURE__ */ new Map();
+	disposed = false;
+	acquireGeometry(key, factory) {
+		const existing = this.geometries.get(key);
+		if (existing) {
+			existing.refCount++;
+			return existing.resource;
+		}
+		const resource = factory();
+		this.geometries.set(key, {
+			resource,
+			refCount: 1
+		});
+		return resource;
+	}
+	releaseGeometry(key) {
+		this.release(this.geometries, key);
+	}
+	acquireMaterial(key, factory) {
+		const existing = this.materials.get(key);
+		if (existing) {
+			existing.refCount++;
+			return existing.resource;
+		}
+		const resource = factory();
+		this.materials.set(key, {
+			resource,
+			refCount: 1
+		});
+		return resource;
+	}
+	releaseMaterial(key) {
+		this.release(this.materials, key);
+	}
+	acquireTexture(key, factory) {
+		const existing = this.textures.get(key);
+		if (existing) {
+			existing.refCount++;
+			return existing.resource;
+		}
+		const resource = factory();
+		this.textures.set(key, {
+			resource,
+			refCount: 1
+		});
+		return resource;
+	}
+	releaseTexture(key) {
+		this.release(this.textures, key);
+	}
+	/** Number of distinct shared geometries currently held. */
+	geometryCount() {
+		return this.geometries.size;
+	}
+	/** Number of distinct shared materials currently held. */
+	materialCount() {
+		return this.materials.size;
+	}
+	/** Number of distinct shared textures currently held. */
+	textureCount() {
+		return this.textures.size;
+	}
+	/**
+	* Estimated GPU bytes for shared geometry attribute buffers. Best-effort —
+	* actual GPU footprint depends on driver alignment, but this is a useful
+	* relative metric for the profiler.
+	*/
+	geometryBytes() {
+		let total = 0;
+		for (const { resource } of this.geometries.values()) {
+			for (const attr of Object.values(resource.attributes)) if ("array" in attr && attr.array.byteLength) total += attr.array.byteLength;
+			if (resource.index) total += resource.index.array.byteLength;
+		}
+		return total;
+	}
+	/** Dispose every resource and clear the registry. */
+	dispose() {
+		if (this.disposed) return;
+		for (const { resource } of this.geometries.values()) resource.dispose();
+		for (const { resource } of this.materials.values()) resource.dispose();
+		for (const { resource } of this.textures.values()) resource.dispose();
+		this.geometries.clear();
+		this.materials.clear();
+		this.textures.clear();
+		this.disposed = true;
+	}
+	/** True after `dispose()` — callers should re-create the registry instead of using it. */
+	isDisposed() {
+		return this.disposed;
+	}
+	release(map, key) {
+		const entry = map.get(key);
+		if (!entry) return;
+		entry.refCount--;
+		if (entry.refCount <= 0) queueMicrotask(() => {
+			const current = map.get(key);
+			if (current && current.refCount <= 0) {
+				current.resource.dispose();
+				map.delete(key);
+			}
+		});
+	}
+};
+const R3FRenderState = defineComponent("R3FRenderState", {
+	phase: "Cold",
+	paintedAt: {
+		width: 0,
+		height: 0,
+		dpr: 1,
+		zoom: 1
+	},
+	animating: false,
+	paintGeneration: 0,
+	fboGeneration: -1
+});
+/**
+* Opt-in tag — a widget that wants per-frame ticking sets this. The state
+* machine treats `Visible + R3FAnimationSignal` as the trigger for `Hot`.
+* Removing the tag transitions back to `Warm` when the widget settles.
+*/
+const R3FAnimationSignal = defineTag("R3FAnimationSignal");
+const R3FRenderBudget = defineResource("R3FRenderBudget", {
+	maxBytes: 256 * 1024 * 1024,
+	currentBytes: 0,
+	maxRepaintsPerFrame: 4
+});
+//#endregion
+//#region src/r3f/compositor/WidgetRenderTargetPool.ts
+/**
+* Bytes per pixel for the default render target format (RGBA8 colour +
+* 24-bit depth + 8-bit stencil packed into 32 bits = 8 bytes/pixel).
+*/
+const BYTES_PER_PIXEL = 8;
+/**
+* Allocates one persistent `WebGLRenderTarget` per R3F widget entity. Used
+* by the compositor (RFC-002 Phase 4) so each widget paints into its own
+* texture instead of into the main canvas backbuffer.
+*
+* Acquire returns an existing FBO if its pixel resolution matches the
+* request; otherwise the old FBO is disposed and a new one created (sized
+* to the new resolution). Eviction under memory pressure is Phase 6 — this
+* pool grows monotonically until widgets are released.
+*/
+var WidgetRenderTargetPool = class {
+	entries = /* @__PURE__ */ new Map();
+	totalBytes = 0;
+	disposed = false;
+	/**
+	* Get or create an FBO for `entityId` at the requested logical size and
+	* device pixel ratio. If an FBO already exists at the same pixel
+	* dimensions, returns it unchanged.
+	*/
+	acquire(entityId, width, height, dpr) {
+		if (this.disposed) throw new Error("WidgetRenderTargetPool: cannot acquire after dispose");
+		const pixelWidth = Math.max(1, Math.round(width * dpr));
+		const pixelHeight = Math.max(1, Math.round(height * dpr));
+		const now = typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : 0;
+		const existing = this.entries.get(entityId);
+		if (existing && existing.pixelWidth === pixelWidth && existing.pixelHeight === pixelHeight) {
+			existing.lastUsedMs = now;
+			return existing.rt;
+		}
+		if (existing) {
+			existing.rt.dispose();
+			this.totalBytes -= existing.bytes;
+		}
+		const rt = new WebGLRenderTarget(pixelWidth, pixelHeight, { samples: 4 });
+		rt.texture.colorSpace = SRGBColorSpace;
+		const bytes = pixelWidth * pixelHeight * BYTES_PER_PIXEL;
+		this.entries.set(entityId, {
+			rt,
+			pixelWidth,
+			pixelHeight,
+			dpr,
+			bytes,
+			lastUsedMs: now
+		});
+		this.totalBytes += bytes;
+		return rt;
+	}
+	/** Look up an FBO without creating one. */
+	get(entityId) {
+		return this.entries.get(entityId)?.rt ?? null;
+	}
+	/**
+	* Refresh `lastUsedMs` without re-acquiring. The Compositor calls this
+	* for every widget it samples in the composition pass — without it,
+	* Warm widgets that never repaint would freeze their `lastUsedMs` at
+	* the time of their last paint, and eviction LRU would treat
+	* still-visible widgets as stale.
+	*/
+	touch(entityId) {
+		const entry = this.entries.get(entityId);
+		if (!entry) return;
+		entry.lastUsedMs = typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : 0;
+	}
+	/**
+	* Release `entityId`'s FBO. Returns true if something was released.
+	* Safe to call after dispose — returns false rather than corrupting the
+	* byte counter or double-disposing the target.
+	*/
+	release(entityId) {
+		if (this.disposed) return false;
+		const entry = this.entries.get(entityId);
+		if (!entry) return false;
+		entry.rt.dispose();
+		this.totalBytes = Math.max(0, this.totalBytes - entry.bytes);
+		this.entries.delete(entityId);
+		return true;
+	}
+	/** Total GPU bytes consumed by the pool. */
+	bytesUsed() {
+		return this.totalBytes;
+	}
+	/** Number of FBOs currently held. */
+	size() {
+		return this.entries.size;
+	}
+	/** True after `dispose()` — callers should re-create the pool instead of using it. */
+	isDisposed() {
+		return this.disposed;
+	}
+	/** Iterate live entries. */
+	forEach(cb) {
+		for (const [id, entry] of this.entries) cb(id, entry.rt);
+	}
+	/**
+	* Snapshot of every live entry's `bytes` + `lastUsedMs` — input for the
+	* eviction algorithm in {@link selectEvictions}.
+	*/
+	entryInfos() {
+		const out = [];
+		for (const [id, entry] of this.entries) out.push({
+			entityId: id,
+			bytes: entry.bytes,
+			lastUsedMs: entry.lastUsedMs
+		});
+		return out;
+	}
+	/** Dispose every FBO. After this, acquire throws and release returns false. */
+	dispose() {
+		if (this.disposed) return;
+		for (const entry of this.entries.values()) entry.rt.dispose();
+		this.entries.clear();
+		this.totalBytes = 0;
+		this.disposed = true;
+	}
+};
+//#endregion
+//#region src/r3f/compositor/ZoomBands.ts
+/**
+* Hysteresis-banded zoom-resolution policy (RFC-002 § Zoom handling).
+*
+* A widget's FBO is allocated at `widget bounds × dpr × band(zoom)` pixels.
+* As long as the camera zoom stays within `[band × 0.5, band × 2]` of the
+* band the widget was painted at, no repaint is needed — the composition
+* shader does a small up/down sample. Crossing that gap triggers a repaint
+* at the new band, snapping back to a 1:1 (or near-1:1) sample ratio.
+*
+* Bands are powers of 2 so each band covers a 4× display range. With the
+* default ladder (0.0625 ↔ 16) we span camera zooms 0.03125 ↔ 32 — covering
+* essentially every realistic infinite-canvas zoom level.
+*/
+const ZOOM_BANDS = [
+	.0625,
+	.125,
+	.25,
+	.5,
+	1,
+	2,
+	4,
+	8,
+	16
+];
+/**
+* Pick the band whose `[band × 0.5, band × 2]` range contains the current
+* zoom. The smallest band ≥ zoom (after rounding to a band edge) is the
+* canonical choice — keeps the texture resolution at or above what the
+* display needs.
+*/
+function selectBand(zoom) {
+	if (zoom <= ZOOM_BANDS[0]) return ZOOM_BANDS[0];
+	if (zoom >= ZOOM_BANDS[ZOOM_BANDS.length - 1]) return ZOOM_BANDS[ZOOM_BANDS.length - 1];
+	for (const b of ZOOM_BANDS) if (zoom <= b) return b;
+	return ZOOM_BANDS[ZOOM_BANDS.length - 1];
+}
+/**
+* Returns true if the widget needs to be repainted because the camera
+* zoom has wandered outside the tolerance window of the band it was
+* painted at.
+*
+* `paintedBand` of 0 (or negative) means the widget has never been
+* painted yet — caller should treat that as "needs paint" through other
+* channels (Waking phase / paintGeneration > fboGeneration).
+*/
+function isOutOfBand(currentZoom, paintedBand) {
+	if (paintedBand <= 0) return false;
+	const ratio = currentZoom / paintedBand;
+	return ratio > 2 || ratio < .5;
+}
+//#endregion
+//#region src/r3f/compositor/Compositor.tsx
+/**
+* Drives the per-widget paint + composition render loop (RFC-002 Phase 4).
+*
+* Lifecycle each invalidation:
+*   1. For every registered widget whose phase is Hot or Waking (or whose
+*      paintGeneration > fboGeneration), bind its FBO and render its scene
+*      with its widget-local camera.
+*   2. Update each widget's composition quad (position, scale, texture).
+*   3. Render the composition scene to the canvas backbuffer with a
+*      world-space orthographic camera matching the engine camera.
+*
+* Owns the `WidgetRenderTargetPool`. Children mount `<VirtualWidget />`
+* instances which register their scene+camera via context.
+*
+* Replaces the old `R3FWidgetSlot` + `CameraSync` pair.
+*/
+function Compositor({ engine, widgetRegistry, children }) {
+	const { gl, size, scene: defaultScene, set } = useThree();
+	const invalidate = useThree((s) => s.invalidate);
+	const poolRef = useRef(null);
+	if (!poolRef.current || poolRef.current.isDisposed()) poolRef.current = new WidgetRenderTargetPool();
+	const pool = poolRef.current;
+	const registryRef = useRef(null);
+	if (!registryRef.current || registryRef.current.isDisposed()) registryRef.current = new ResourceRegistry();
+	const registry = registryRef.current;
+	const quadGeometry = useMemo(() => new PlaneGeometry(1, 1), []);
+	const quadsRef = useRef(/* @__PURE__ */ new Map());
+	const liftScaleRef = useRef(/* @__PURE__ */ new Map());
+	const lastDprRef = useRef(-1);
+	const idleDpr = typeof window !== "undefined" ? window.devicePixelRatio : 1;
+	const gestureDpr = Math.min(idleDpr, 1);
+	const compCamera = useMemo(() => new OrthographicCamera(0, 1, 0, -1, .1, 1e4), []);
+	useEffect(() => {
+		set({ camera: compCamera });
+	}, [set, compCamera]);
+	const register = useCallback((entityId, entry) => {
+		const unregisterFromRegistry = widgetRegistry.register(entityId, entry);
+		const mesh = new Mesh(quadGeometry, new CompositionMaterial());
+		mesh.frustumCulled = false;
+		mesh.visible = false;
+		defaultScene.add(mesh);
+		quadsRef.current.set(entityId, mesh);
+		entry.requestRepaint();
+		return () => {
+			unregisterFromRegistry();
+			const m = quadsRef.current.get(entityId);
+			if (m) {
+				defaultScene.remove(m);
+				m.material.dispose();
+				quadsRef.current.delete(entityId);
+			}
+			liftScaleRef.current.delete(entityId);
+			pool.release(entityId);
+		};
+	}, [
+		defaultScene,
+		pool,
+		quadGeometry,
+		widgetRegistry
+	]);
+	const ctxValue = useMemo(() => ({
+		pool,
+		registry,
+		register
+	}), [
+		pool,
+		registry,
+		register
+	]);
+	useEffect(() => {
+		return () => {
+			pool.dispose();
+			registry.dispose();
+		};
+	}, [pool, registry]);
+	useFrame(() => {
+		const cam = engine.getCamera();
+		compCamera.left = 0;
+		compCamera.right = size.width / cam.zoom;
+		compCamera.top = 0;
+		compCamera.bottom = -(size.height / cam.zoom);
+		compCamera.position.set(cam.x, -cam.y, 1e3);
+		compCamera.updateProjectionMatrix();
+		const targetDpr = cam.gesturing ? gestureDpr : idleDpr;
+		if (lastDprRef.current !== targetDpr) {
+			gl.setPixelRatio(targetDpr);
+			lastDprRef.current = targetDpr;
+		}
+		const dpr = gl.getPixelRatio();
+		const world = engine.world;
+		let sharedEnv = null;
+		if (defaultScene.environment) sharedEnv = defaultScene.environment;
+		else for (const [, entry] of widgetRegistry.all()) if (entry.scene.environment) {
+			sharedEnv = entry.scene.environment;
+			break;
+		}
+		if (sharedEnv) for (const [eid, entry] of widgetRegistry.all()) {
+			if (entry.scene.environment === sharedEnv) continue;
+			entry.scene.environment = sharedEnv;
+			const s = world.getComponent(eid, R3FRenderState);
+			if (s) world.setComponent(eid, R3FRenderState, {
+				...s,
+				paintGeneration: s.paintGeneration + 1
+			});
+		}
+		const band = selectBand(cam.zoom);
+		const effectiveDpr = dpr * band;
+		let widgetsRepainted = 0;
+		for (const [entityId, entry] of widgetRegistry.all()) {
+			const wt = world.getComponent(entityId, Transform2D);
+			if (!wt) continue;
+			const state = world.getComponent(entityId, R3FRenderState);
+			if (!state) continue;
+			const phaseWantsPaint = state.phase === "Hot" || state.phase === "Waking";
+			const generationDirty = state.paintGeneration > state.fboGeneration;
+			const bandChanged = !cam.gesturing && isOutOfBand(cam.zoom, state.paintedAt.zoom);
+			if (!phaseWantsPaint && !generationDirty && !bandChanged && pool.get(entityId) !== null) continue;
+			const fbo = pool.acquire(entityId, wt.width, wt.height, effectiveDpr);
+			gl.setRenderTarget(fbo);
+			try {
+				gl.setClearColor(0, 0);
+				gl.clear(true, true, false);
+				gl.render(entry.scene, entry.camera);
+			} finally {
+				gl.setRenderTarget(null);
+			}
+			world.setComponent(entityId, R3FRenderState, {
+				...state,
+				fboGeneration: state.paintGeneration,
+				paintedAt: {
+					width: wt.width,
+					height: wt.height,
+					dpr: effectiveDpr,
+					zoom: band
+				}
+			});
+			widgetsRepainted++;
+		}
+		const budget = world.getResource(R3FRenderBudget);
+		if (pool.bytesUsed() > budget.maxBytes) {
+			const candidates = [];
+			for (const info of pool.entryInfos()) {
+				const s = world.getComponent(info.entityId, R3FRenderState);
+				if (!s) continue;
+				candidates.push({
+					entityId: info.entityId,
+					phase: s.phase,
+					bytes: info.bytes,
+					lastUsedMs: info.lastUsedMs
+				});
+			}
+			const toEvict = selectEvictions(candidates, pool.bytesUsed(), budget.maxBytes);
+			for (const eid of toEvict) {
+				const s = world.getComponent(eid, R3FRenderState);
+				if (s?.phase === "Dormant") console.debug("[r3f-compositor] evicting Dormant widget", eid, "— consider raising R3FRenderBudget.maxBytes");
+				pool.release(eid);
+				if (s) world.setComponent(eid, R3FRenderState, {
+					...s,
+					fboGeneration: -1
+				});
+			}
+		}
+		let draggedEntityId = null;
+		let draggedRectMinX = 0;
+		let draggedRectMinY = 0;
+		let draggedRectMaxX = 0;
+		let draggedRectMaxY = 0;
+		const canvasHeightPx = size.height * dpr;
+		for (const entityId of widgetRegistry.keys()) {
+			if (!world.hasTag(entityId, Dragging)) continue;
+			if (world.getComponent(entityId, Widget)?.surface !== "webgl") continue;
+			draggedEntityId = entityId;
+			if (!world.hasComponent(entityId, Card)) break;
+			const dt = world.getComponent(entityId, Transform2D);
+			if (!dt) break;
+			const lift = liftScaleRef.current.get(entityId) ?? 1;
+			const cx = dt.x + dt.width / 2;
+			const cy = dt.y + dt.height / 2;
+			const halfW = dt.width * lift / 2;
+			const halfH = dt.height * lift / 2;
+			const minWx = cx - halfW;
+			const maxWx = cx + halfW;
+			const minWy = cy - halfH;
+			const maxWy = cy + halfH;
+			const sxMin = (minWx - cam.x) * cam.zoom * dpr;
+			const sxMax = (maxWx - cam.x) * cam.zoom * dpr;
+			const syTop = (minWy - cam.y) * cam.zoom * dpr;
+			const syBot = (maxWy - cam.y) * cam.zoom * dpr;
+			draggedRectMinX = sxMin;
+			draggedRectMinY = canvasHeightPx - syBot;
+			draggedRectMaxX = sxMax;
+			draggedRectMaxY = canvasHeightPx - syTop;
+			break;
+		}
+		let liftSettling = false;
+		for (const [entityId, mesh] of quadsRef.current) {
+			const qt = world.getComponent(entityId, Transform2D);
+			const state = world.getComponent(entityId, R3FRenderState);
+			const fbo = pool.get(entityId);
+			if (!qt || !fbo || !state || state.fboGeneration < 0) {
+				mesh.visible = false;
+				continue;
+			}
+			pool.touch(entityId);
+			const targetScale = world.hasTag(entityId, Dragging) ? 1.05 : 1;
+			let scale = liftScaleRef.current.get(entityId) ?? 1;
+			scale += (targetScale - scale) * .2;
+			if (Math.abs(targetScale - scale) > .001) liftSettling = true;
+			else scale = targetScale;
+			liftScaleRef.current.set(entityId, scale);
+			mesh.visible = true;
+			mesh.position.set(qt.x + qt.width / 2, -(qt.y + qt.height / 2), 0);
+			mesh.scale.set(qt.width * scale, qt.height * scale, 1);
+			mesh.renderOrder = entityId === draggedEntityId ? 99 : 1;
+			const material = mesh.material;
+			material.setMap(fbo.texture);
+			material.setIsDragged(entityId === draggedEntityId);
+			material.setDraggedRect(draggedRectMinX, draggedRectMinY, draggedRectMaxX, draggedRectMaxY);
+			const hot = world.getComponent(entityId, CardOverlapHotPoint);
+			if (hot && world.hasTag(entityId, OverlapCandidate)) {
+				material.setHotPoint(hot.x, 1 - hot.y);
+				material.setHotStrength(hot.strength);
+			} else material.setHotStrength(0);
+			material.setIsOverlapTarget(world.hasTag(entityId, OverlapTarget));
+		}
+		gl.setRenderTarget(null);
+		gl.setClearColor(0, 0);
+		gl.clear(true, true, false);
+		gl.render(defaultScene, compCamera);
+		COMPOSITOR_TELEMETRY.widgetsRepainted = widgetsRepainted;
+		COMPOSITOR_TELEMETRY.fboBytes = pool.bytesUsed();
+		let anyHot = false;
+		for (const eid of widgetRegistry.keys()) if (world.getComponent(eid, R3FRenderState)?.phase === "Hot") {
+			anyHot = true;
+			break;
+		}
+		if (anyHot || liftSettling) invalidate();
+	}, 1);
+	return /* @__PURE__ */ jsx(CompositorContext.Provider, {
+		value: ctxValue,
+		children
+	});
+}
+/**
+* Shared between Compositor and ProfilerProbe so the probe can record FBO
+* bytes and per-frame repaint counts without an extra subscription path.
+* Module-scoped because both components live in the same canvas.
+*/
+const COMPOSITOR_TELEMETRY = {
+	widgetsRepainted: 0,
+	fboBytes: 0
+};
+//#endregion
+//#region src/r3f/compositor/VirtualWidget.tsx
+/**
+* Mounts one R3F widget into its own Three.js scene + ortho camera so it
+* can be painted into a private `WebGLRenderTarget` instead of the main
+* canvas backbuffer.
+*
+* The user component is rendered in widget-local space — origin at centre,
+* X right, Y up, dimensions = (Transform2D.width, Transform2D.height) in
+* frame-local world units.
+* That matches the contract the previous `R3FWidgetSlot` exposed, so user
+* widget code (e.g. `geometry-card`) needs no changes.
+*
+* VirtualWidget itself does not paint or composite — that's the
+* Compositor's job. We just create the scene/camera and register them so
+* the Compositor can iterate widgets in its render loop.
+*/
+function VirtualWidget({ entityId, component: Component }) {
+	const { register } = useCompositor();
+	const invalidate = useThree((s) => s.invalidate);
+	const engine = useLayoutEngine();
+	const scene = useMemo(() => new Scene(), []);
+	const camera = useMemo(() => new OrthographicCamera(-1, 1, 1, -1, .1, 1e3), []);
+	useEffect(() => {
+		camera.position.set(0, 0, 100);
+		camera.lookAt(0, 0, 0);
+	}, [camera]);
+	const t = useComponent(entityId, Transform2D);
+	const w = t?.width ?? 0;
+	const h = t?.height ?? 0;
+	useLayoutEffect(() => {
+		if (!w || !h) return;
+		camera.left = -w / 2;
+		camera.right = w / 2;
+		camera.top = h / 2;
+		camera.bottom = -h / 2;
+		camera.updateProjectionMatrix();
+		const current = engine.world.getComponent(entityId, R3FRenderState);
+		if (current) engine.world.setComponent(entityId, R3FRenderState, {
+			...current,
+			paintGeneration: current.paintGeneration + 1
+		});
+		invalidate();
+	}, [
+		camera,
+		w,
+		h,
+		engine,
+		entityId,
+		invalidate
+	]);
+	useEffect(() => {
+		return register(entityId, {
+			scene,
+			camera,
+			requestRepaint: invalidate
+		});
+	}, [
+		entityId,
+		register,
+		scene,
+		camera,
+		invalidate
+	]);
+	if (!t) return null;
+	return createPortal(/* @__PURE__ */ jsx(Component, {
+		entityId,
+		width: t.width,
+		height: t.height
+	}), scene);
+}
+//#endregion
+//#region src/r3f/compositor/WidgetRegistry.ts
+/**
+* Stable per-canvas registry of R3F widget scenes + cameras (RFC-006).
+*
+* Created in `R3FManager` so it's reachable both by the `Compositor`
+* (which adds/removes widgets as `VirtualWidget` mounts) and by the
+* R3F event factory (which resolves the active widget by entityId
+* returned from `engine.pickAt`, then looks up its scene + camera here).
+*
+* Plain Map under the hood — the wrapping class exists to give the
+* registry a stable identity across React renders and to keep the read
+* surface (`get`, `keys`, `all`) discoverable from both consumers.
+*/
+var WidgetRegistry = class {
+	entries = /* @__PURE__ */ new Map();
+	register(entityId, entry) {
+		this.entries.set(entityId, entry);
+		return () => this.entries.delete(entityId);
+	}
+	get(entityId) {
+		return this.entries.get(entityId);
+	}
+	all() {
+		return this.entries.entries();
+	}
+	keys() {
+		return this.entries.keys();
+	}
+	values() {
+		return this.entries.values();
+	}
+	clear() {
+		this.entries.clear();
+	}
+};
+//#endregion
+//#region src/r3f/compositor/WidgetStateMachine.tsx
+/**
+* Updates `R3FRenderState` phases for every R3F (`surface === 'webgl'`)
+* widget after each engine tick.
+*
+* At this phase the state machine is bookkeeping only — it does not
+* allocate or paint render targets (that arrives in Phase 4). Consumers
+* such as widget `useFrame` callbacks read the phase to decide whether
+* to do work this frame.
+*
+* Transition rules match RFC-002 § State machine:
+*
+*   Active + Visible + R3FAnimationSignal → Hot
+*   Active + Visible (idle)               → Warm (or Waking if texture invalid — irrelevant pre-Phase-4)
+*   Active + Culled                       → Cold
+*   !Active                               → Dormant
+*/
+function WidgetStateMachine({ engine }) {
+	useEffect(() => {
+		const world = engine.world;
+		function updatePhases() {
+			for (const entity of world.query(Widget)) {
+				const widget = world.getComponent(entity, Widget);
+				if (!widget || widget.surface !== "webgl") continue;
+				const current = world.getComponent(entity, R3FRenderState);
+				const animating = world.hasTag(entity, R3FAnimationSignal);
+				const hasFbo = (current?.fboGeneration ?? -1) >= 0;
+				const nextPhase = computePhase(world.hasTag(entity, Active), world.hasTag(entity, Visible), world.hasTag(entity, Culled), animating, hasFbo);
+				if (!current) world.addComponent(entity, R3FRenderState, {
+					phase: nextPhase,
+					paintedAt: {
+						width: 0,
+						height: 0,
+						dpr: 1,
+						zoom: 1
+					},
+					animating,
+					paintGeneration: 0,
+					fboGeneration: -1
+				});
+				else if (current.phase !== nextPhase || current.animating !== animating) world.setComponent(entity, R3FRenderState, {
+					...current,
+					phase: nextPhase,
+					animating
+				});
+			}
+		}
+		updatePhases();
+		return engine.onFrame(updatePhases);
+	}, [engine]);
+	return null;
+}
+/**
+* Pure function version of the state-machine transition rule. Exported so
+* tests can pin the truth table without mounting React.
+*
+* `hasFbo` distinguishes Warm (texture present, can be sampled) from Waking
+* (Visible but no valid texture yet — the compositor must paint before the
+* widget is composited). After eviction (Phase 6) a Cold widget can lose
+* its texture and re-enter as Waking.
+*/
+function computePhase(active, visible, culled, animationSignal, hasFbo) {
+	if (!active) return "Dormant";
+	if (visible) {
+		if (animationSignal) return "Hot";
+		return hasFbo ? "Warm" : "Waking";
+	}
+	if (culled) return "Cold";
+	return "Cold";
+}
+//#endregion
+//#region src/r3f/EngineInvalidator.tsx
+/**
+* Subscribes to engine frame events and invalidates the R3F canvas only when
+* something has changed that affects R3F output. With `frameloop="demand"` on
+* the parent `<Canvas>`, the canvas only renders in response to these
+* invalidations — idle scenes produce zero R3F frames.
+*
+* Triggers invalidation on: camera change, position change (drag/resize),
+* widgets entering or exiting the visible set.
+*/
+function EngineInvalidator({ engine }) {
+	const invalidate = useThree((s) => s.invalidate);
+	useEffect(() => {
+		return engine.onFrame(() => {
+			const c = engine.getFrameChanges();
+			if (c.cameraChanged || c.positionsChanged.length > 0 || c.entered.length > 0 || c.exited.length > 0) invalidate();
+		});
+	}, [engine, invalidate]);
+	return null;
+}
+//#endregion
+//#region src/r3f/ProfilerProbe.tsx
+/**
+* Reports one R3F frame sample per animation frame to the engine profiler.
+* Reads `renderer.info` from three.js — draw calls / triangles / memory /
+* programs — which is maintained by R3F's default render loop regardless
+* of whether we opt in. Only samples when the profiler is enabled.
+*/
+function ProfilerProbe({ engine, widgetCount }) {
+	const { gl } = useThree();
+	const prevTimeRef = useRef(null);
+	const prevCallsRef = useRef(0);
+	const prevTrianglesRef = useRef(0);
+	const prevPointsRef = useRef(0);
+	const prevLinesRef = useRef(0);
+	useFrame(() => {
+		const profiler = engine.profiler;
+		if (!profiler.isEnabled()) {
+			prevTimeRef.current = null;
+			return;
+		}
+		const now = performance.now();
+		const dtMs = prevTimeRef.current === null ? 0 : now - prevTimeRef.current;
+		prevTimeRef.current = now;
+		const info = gl.info;
+		const calls = info.render.calls;
+		const triangles = info.render.triangles;
+		const points = info.render.points;
+		const lines = info.render.lines;
+		const frameCalls = info.autoReset ? calls : Math.max(0, calls - prevCallsRef.current);
+		const frameTris = info.autoReset ? triangles : Math.max(0, triangles - prevTrianglesRef.current);
+		const framePoints = info.autoReset ? points : Math.max(0, points - prevPointsRef.current);
+		const frameLines = info.autoReset ? lines : Math.max(0, lines - prevLinesRef.current);
+		prevCallsRef.current = calls;
+		prevTrianglesRef.current = triangles;
+		prevPointsRef.current = points;
+		prevLinesRef.current = lines;
+		const phases = {
+			hot: 0,
+			warm: 0,
+			cold: 0,
+			waking: 0,
+			dormant: 0
+		};
+		const world = engine.world;
+		for (const entity of world.query(Widget, R3FRenderState)) {
+			const widget = world.getComponent(entity, Widget);
+			if (!widget || widget.surface !== "webgl") continue;
+			const state = world.getComponent(entity, R3FRenderState);
+			if (!state) continue;
+			switch (state.phase) {
+				case "Hot":
+					phases.hot++;
+					break;
+				case "Warm":
+					phases.warm++;
+					break;
+				case "Cold":
+					phases.cold++;
+					break;
+				case "Waking":
+					phases.waking++;
+					break;
+				case "Dormant":
+					phases.dormant++;
+					break;
+			}
+		}
+		profiler.recordR3FFrame({
+			dtMs,
+			drawCalls: frameCalls,
+			triangles: frameTris,
+			points: framePoints,
+			lines: frameLines,
+			programs: info.programs?.length ?? 0,
+			geometries: info.memory.geometries,
+			textures: info.memory.textures,
+			activeWidgets: widgetCount,
+			widgetsRepainted: COMPOSITOR_TELEMETRY.widgetsRepainted,
+			fboBytes: COMPOSITOR_TELEMETRY.fboBytes,
+			phases
+		});
+	}, 2);
+	return null;
+}
+//#endregion
+//#region src/r3f/R3FManager.tsx
+/**
+* Top-level coordinator for the R3F (React Three Fiber) rendering layer.
+*
+* Mounts a single `<Canvas>` and lets the {@link Compositor} drive the
+* render loop — each R3F widget paints into its own `WebGLRenderTarget`
+* via {@link VirtualWidget} and a final composition pass samples those
+* textures into the visible canvas (RFC-002 Phase 4).
+*/
+function R3FManager({ engine, entities, resolve, r3fRoot, eventManagerRef }) {
+	const canvasRef = useRef(null);
+	const containerRef = useContainerRef();
+	const initialCamera = useMemo(() => {
+		const cam = new THREE.OrthographicCamera(0, 1, 0, -1, .1, 1e4);
+		cam.position.set(0, 0, 1e3);
+		return cam;
+	}, []);
+	const widgetRegistry = useMemo(() => new WidgetRegistry(), []);
+	const eventManager = useMemo(() => createR3FEventManager(engine, widgetRegistry, (manager) => {
+		if (eventManagerRef) eventManagerRef.current = manager;
+	}), [
+		engine,
+		widgetRegistry,
+		eventManagerRef
+	]);
+	const widgetEntries = useMemo(() => {
+		const result = [];
+		for (const id of entities) {
+			const resolved = resolve(id);
+			if (resolved && resolved.surface === "webgl") result.push({
+				entityId: id,
+				component: resolved.component
+			});
+		}
+		return result;
+	}, [entities, resolve]);
+	return /* @__PURE__ */ jsx(Canvas, {
+		ref: canvasRef,
+		camera: initialCamera,
+		frameloop: "demand",
+		events: eventManager,
+		eventSource: containerRef ?? void 0,
+		gl: {
+			alpha: true,
+			antialias: true
+		},
+		style: {
+			position: "absolute",
+			inset: 0,
+			pointerEvents: "none",
+			zIndex: 1,
+			display: widgetEntries.length === 0 ? "none" : "block"
+		},
+		children: /* @__PURE__ */ jsxs(EngineProvider, {
+			value: engine,
+			children: [
+				/* @__PURE__ */ jsx(EngineInvalidator, { engine }),
+				/* @__PURE__ */ jsx(WidgetStateMachine, { engine }),
+				/* @__PURE__ */ jsx(ProfilerProbe, {
+					engine,
+					widgetCount: widgetEntries.length
+				}),
+				r3fRoot,
+				/* @__PURE__ */ jsx(Compositor, {
+					engine,
+					widgetRegistry,
+					children: widgetEntries.map(({ entityId, component }) => /* @__PURE__ */ jsx(VirtualWidget, {
+						entityId,
+						component
+					}, entityId))
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/webgl/renderers/GridRenderer.ts
+const DEFAULT_GRID_CONFIG = {
+	spacings: [
+		20,
+		100,
+		500
+	],
+	dotColor: [
+		.75,
+		.77,
+		.8
+	],
+	dotAlpha: 1,
+	fadeIn: [8, 16],
+	fadeOut: [120, 200],
+	dotRadius: [.75, .75],
+	levelWeight: [1, 0]
+};
+const vertexShader$2 = `
+void main() {
+	gl_Position = vec4(position.xy, 0.0, 1.0);
+}
+`;
+const fragmentShader$2 = `
+precision highp float;
+
+uniform vec2 u_resolution;    // device pixels
+uniform vec2 u_camera;        // world-space top-left
+uniform float u_zoom;         // CSS zoom
+uniform float u_dpr;          // device pixel ratio
+uniform vec3 u_spacings;      // world-unit grid spacings
+uniform vec3 u_dotColor;      // dot RGB
+uniform float u_dotAlpha;     // dot base alpha
+uniform vec2 u_fadeIn;        // CSS-px [start, end]
+uniform vec2 u_fadeOut;       // CSS-px [start, end]
+uniform vec2 u_dotRadius;     // CSS-px [min, max]
+uniform vec2 u_levelWeight;   // [base, step]
+
+void main() {
+	vec2 devicePos = gl_FragCoord.xy;
+	devicePos.y = u_resolution.y - devicePos.y;
+
+	float effectiveZoom = u_zoom * u_dpr;
+	vec2 worldPos = devicePos / effectiveZoom + u_camera;
+
+	float totalAlpha = 0.0;
+
+	for (int i = 0; i < 3; i++) {
+		float spacing;
+		if (i == 0) spacing = u_spacings.x;
+		else if (i == 1) spacing = u_spacings.y;
+		else spacing = u_spacings.z;
+
+		// Screen spacing in CSS pixels (DPR-independent for consistent fading)
+		float cssSpacing = spacing * u_zoom;
+
+		// Fade curve
+		float opacity = 0.0;
+		if (cssSpacing >= u_fadeIn.x && cssSpacing < u_fadeIn.y) {
+			opacity = (cssSpacing - u_fadeIn.x) / (u_fadeIn.y - u_fadeIn.x);
+		} else if (cssSpacing >= u_fadeIn.y && cssSpacing < u_fadeOut.x) {
+			opacity = 1.0;
+		} else if (cssSpacing >= u_fadeOut.x && cssSpacing < u_fadeOut.y) {
+			opacity = 1.0 - (cssSpacing - u_fadeOut.x) / (u_fadeOut.y - u_fadeOut.x);
+		}
+		if (opacity <= 0.001) continue;
+
+		// Distance to nearest grid intersection in device pixels
+		vec2 f = fract(worldPos / spacing + 0.5) - 0.5;
+		float dist = length(f) * spacing * effectiveZoom;
+
+		// Dot radius in device pixels — optionally grows for sparser levels
+		// (set u_dotRadius.x == u_dotRadius.y for Freeform/FigJam-style
+		// constant-size dots)
+		float t = clamp((cssSpacing - u_fadeIn.x) / 40.0, 0.0, 1.0);
+		float radius = mix(u_dotRadius.x, u_dotRadius.y, t) * u_dpr;
+
+		// Anti-aliased dot (0.5 device pixel smoothstep)
+		float dot = 1.0 - smoothstep(radius - 0.5, radius + 0.5, dist);
+
+		// Per-level weight: base + i * step. Step=0 keeps all levels at equal
+		// intensity; positive step emphasizes coarser levels (CAD feel).
+		float weight = u_levelWeight.x + float(i) * u_levelWeight.y;
+
+		// Composite with max, not sum. Additive compositing causes anti-
+		// aliased dot rims to stack at joint intersections (every N-th dot
+		// visibly fatter — a CAD tell). max() guarantees a joint intersection
+		// looks identical to a single-level dot, matching Freeform / FigJam.
+		totalAlpha = max(totalAlpha, dot * opacity * weight);
+	}
+
+	gl_FragColor = vec4(u_dotColor, clamp(totalAlpha * u_dotAlpha, 0.0, 1.0));
+}
+`;
+/**
+* Draws the infinite dot-grid background into a THREE.WebGLRenderer.
+* The renderer is owned by the parent (see {@link WebGLManager}) — this class
+* only contributes a scene, camera, and shader material.
+*/
+var GridRenderer = class {
+	scene;
+	camera;
+	material;
+	mesh;
+	constructor() {
+		this.scene = new THREE.Scene();
+		this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+		this.material = new THREE.ShaderMaterial({
+			vertexShader: vertexShader$2,
+			fragmentShader: fragmentShader$2,
+			uniforms: {
+				u_resolution: { value: new THREE.Vector2(1, 1) },
+				u_camera: { value: new THREE.Vector2(0, 0) },
+				u_zoom: { value: 1 },
+				u_dpr: { value: 1 },
+				u_spacings: { value: new THREE.Vector3(...DEFAULT_GRID_CONFIG.spacings) },
+				u_dotColor: { value: new THREE.Vector3(...DEFAULT_GRID_CONFIG.dotColor) },
+				u_dotAlpha: { value: DEFAULT_GRID_CONFIG.dotAlpha },
+				u_fadeIn: { value: new THREE.Vector2(...DEFAULT_GRID_CONFIG.fadeIn) },
+				u_fadeOut: { value: new THREE.Vector2(...DEFAULT_GRID_CONFIG.fadeOut) },
+				u_dotRadius: { value: new THREE.Vector2(...DEFAULT_GRID_CONFIG.dotRadius) },
+				u_levelWeight: { value: new THREE.Vector2(...DEFAULT_GRID_CONFIG.levelWeight) }
+			},
+			transparent: true,
+			depthTest: false,
+			depthWrite: false
+		});
+		const geometry = new THREE.BufferGeometry();
+		const vertices = new Float32Array([
+			-1,
+			-1,
+			0,
+			3,
+			-1,
+			0,
+			-1,
+			3,
+			0
+		]);
+		geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
+		this.mesh = new THREE.Mesh(geometry, this.material);
+		this.scene.add(this.mesh);
+	}
+	/** Apply a (partial) grid config. Only provided fields are updated. */
+	setConfig(config) {
+		const u = this.material.uniforms;
+		if (config.spacings) u.u_spacings.value.set(...config.spacings);
+		if (config.dotColor) u.u_dotColor.value.set(...config.dotColor);
+		if (config.dotAlpha !== void 0) u.u_dotAlpha.value = config.dotAlpha;
+		if (config.fadeIn) u.u_fadeIn.value.set(...config.fadeIn);
+		if (config.fadeOut) u.u_fadeOut.value.set(...config.fadeOut);
+		if (config.dotRadius) u.u_dotRadius.value.set(...config.dotRadius);
+		if (config.levelWeight) u.u_levelWeight.value.set(...config.levelWeight);
+	}
+	setSize(width, height, dpr = 1) {
+		const u = this.material.uniforms;
+		u.u_resolution.value.set(width * dpr, height * dpr);
+		u.u_dpr.value = dpr;
+	}
+	render(renderer, cameraX, cameraY, zoom) {
+		const u = this.material.uniforms;
+		u.u_camera.value.set(cameraX, cameraY);
+		u.u_zoom.value = zoom;
+		renderer.render(this.scene, this.camera);
+	}
+	dispose() {
+		this.mesh.geometry.dispose();
+		this.material.dispose();
+	}
+};
+//#endregion
+//#region src/webgl/renderers/SelectionRenderer.ts
+const DEFAULT_SELECTION_CONFIG = {
+	outlineColor: [
+		.051,
+		.6,
+		1
+	],
+	outlineWidth: 1.5,
+	hoverColor: [
+		.051,
+		.6,
+		1
+	],
+	hoverWidth: 1,
+	handleSize: 8,
+	handleFill: [
+		1,
+		1,
+		1
+	],
+	handleBorder: [
+		.051,
+		.6,
+		1
+	],
+	handleBorderWidth: 1.5,
+	groupDash: 4
+};
+const MAX_ENTITIES = 32;
+const vertexShader$1 = `
+void main() {
+	gl_Position = vec4(position.xy, 0.0, 1.0);
+}
+`;
+const fragmentShader$1 = `
+precision highp float;
+
+uniform vec2 u_resolution;
+uniform vec2 u_camera;
+uniform float u_zoom;
+uniform float u_dpr;
+
+// Selection data
+uniform int u_count;
+uniform vec4 u_bounds[${MAX_ENTITIES}];   // (x, y, width, height) — frame-local Transform2D
+uniform int u_hoverIdx;                   // -1 = none
+uniform vec4 u_groupBounds;              // group bbox (0 if count <= 1)
+uniform int u_hasGroup;
+
+// Style
+uniform vec3 u_outlineColor;
+uniform float u_outlineWidth;
+uniform vec3 u_hoverColor;
+uniform float u_hoverWidth;
+uniform float u_handleSize;
+uniform vec3 u_handleFill;
+uniform vec3 u_handleBorder;
+uniform float u_handleBorderWidth;
+uniform float u_groupDash;
+
+// SDF for axis-aligned rectangle outline (returns distance to edge)
+float sdRectOutline(vec2 p, vec2 center, vec2 halfSize) {
+	vec2 d = abs(p - center) - halfSize;
+	float outside = length(max(d, 0.0));
+	float inside = min(max(d.x, d.y), 0.0);
+	return abs(outside + inside);
+}
+
+// SDF for filled square
+float sdSquare(vec2 p, vec2 center, float halfSize) {
+	vec2 d = abs(p - center) - vec2(halfSize);
+	return max(d.x, d.y);
+}
+
+void main() {
+	if (u_count == 0 && u_hoverIdx < 0) discard;
+
+	vec2 devicePos = gl_FragCoord.xy;
+	devicePos.y = u_resolution.y - devicePos.y;
+
+	float effectiveZoom = u_zoom * u_dpr;
+	vec2 worldPos = devicePos / effectiveZoom + u_camera;
+
+	// Screen-space conversion factor
+	float pxToWorld = 1.0 / effectiveZoom;
+
+	vec4 color = vec4(0.0);
+
+	// --- Hover outline ---
+	if (u_hoverIdx >= 0 && u_hoverIdx < ${MAX_ENTITIES}) {
+		vec4 b = u_bounds[u_hoverIdx];
+		vec2 center = vec2(b.x + b.z * 0.5, b.y + b.w * 0.5);
+		vec2 halfSize = vec2(b.z, b.w) * 0.5;
+		float dist = sdRectOutline(worldPos, center, halfSize);
+		float width = u_hoverWidth * pxToWorld;
+		float alpha = 1.0 - smoothstep(width - pxToWorld * 0.5, width + pxToWorld * 0.5, dist);
+		color = max(color, vec4(u_hoverColor, alpha * 0.6));
+	}
+
+	// --- Selection outlines ---
+	for (int i = 0; i < ${MAX_ENTITIES}; i++) {
+		if (i >= u_count) break;
+		vec4 b = u_bounds[i];
+		vec2 center = vec2(b.x + b.z * 0.5, b.y + b.w * 0.5);
+		vec2 halfSize = vec2(b.z, b.w) * 0.5;
+
+		// Outline
+		float dist = sdRectOutline(worldPos, center, halfSize);
+		float width = u_outlineWidth * pxToWorld;
+		float outlineAlpha = 1.0 - smoothstep(width - pxToWorld * 0.5, width + pxToWorld * 0.5, dist);
+		color = max(color, vec4(u_outlineColor, outlineAlpha));
+
+		// 8 resize handles
+		float hs = u_handleSize * 0.5 * pxToWorld;
+		float bw = u_handleBorderWidth * pxToWorld;
+		vec2 corners[8];
+		corners[0] = vec2(b.x, b.y);                          // nw
+		corners[1] = vec2(b.x + b.z * 0.5, b.y);              // n
+		corners[2] = vec2(b.x + b.z, b.y);                    // ne
+		corners[3] = vec2(b.x + b.z, b.y + b.w * 0.5);        // e
+		corners[4] = vec2(b.x + b.z, b.y + b.w);              // se
+		corners[5] = vec2(b.x + b.z * 0.5, b.y + b.w);        // s
+		corners[6] = vec2(b.x, b.y + b.w);                    // sw
+		corners[7] = vec2(b.x, b.y + b.w * 0.5);              // w
+
+		for (int h = 0; h < 8; h++) {
+			float d = sdSquare(worldPos, corners[h], hs);
+			// Fill (white)
+			float fillAlpha = 1.0 - smoothstep(-pxToWorld * 0.5, pxToWorld * 0.5, d);
+			// Border
+			float borderDist = abs(d + bw * 0.5) - bw * 0.5;
+			float borderAlpha = 1.0 - smoothstep(-pxToWorld * 0.5, pxToWorld * 0.5, borderDist);
+
+			if (fillAlpha > 0.01) {
+				// Composite: border color on top of fill
+				vec3 handleColor = mix(u_handleFill, u_handleBorder, borderAlpha);
+				color = vec4(handleColor, max(fillAlpha, color.a));
+			}
+		}
+	}
+
+	// --- Group bounding box (dashed) ---
+	if (u_hasGroup == 1 && u_count > 1) {
+		vec4 gb = u_groupBounds;
+		vec2 center = vec2(gb.x + gb.z * 0.5, gb.y + gb.w * 0.5);
+		vec2 halfSize = vec2(gb.z, gb.w) * 0.5;
+		float dist = sdRectOutline(worldPos, center, halfSize);
+		float width = u_outlineWidth * 0.75 * pxToWorld;
+		float lineAlpha = 1.0 - smoothstep(width - pxToWorld * 0.5, width + pxToWorld * 0.5, dist);
+
+		// Dash pattern along the rectangle perimeter
+		if (u_groupDash > 0.0 && lineAlpha > 0.01) {
+			// Proper perimeter arc-length from top-left corner going clockwise
+			float perim;
+			vec2 rel = worldPos - vec2(gb.x, gb.y);
+			float w = gb.z;
+			float h = gb.w;
+
+			// Determine which edge is nearest and compute cumulative arc length
+			float dTop = abs(rel.y);
+			float dRight = abs(rel.x - w);
+			float dBottom = abs(rel.y - h);
+			float dLeft = abs(rel.x);
+
+			if (dTop <= dBottom && dTop <= dLeft && dTop <= dRight) {
+				perim = rel.x; // top edge: 0 to w
+			} else if (dRight <= dLeft) {
+				perim = w + rel.y; // right edge: w to w+h
+			} else if (dBottom <= dTop) {
+				perim = w + h + (w - rel.x); // bottom edge: w+h to 2w+h
+			} else {
+				perim = 2.0 * w + h + (h - rel.y); // left edge: 2w+h to 2w+2h
+			}
+
+			float dashWorld = u_groupDash * pxToWorld;
+			float dashPattern = step(0.5, fract(perim / (dashWorld * 2.0)));
+			lineAlpha *= dashPattern;
+		}
+
+		color = max(color, vec4(u_outlineColor, lineAlpha * 0.5));
+	}
+
+	if (color.a < 0.01) discard;
+	gl_FragColor = color;
+}
+`;
+/**
+* Draws selection outlines, 8 resize handles, group-bbox, and the hover
+* outline in a single SDF-based shader pass. Snap guides and equal-
+* spacing indicators are a separate concern — see {@link SnapGuideRenderer}.
+*
+* The `THREE.WebGLRenderer` is owned by the parent ({@link WebGLManager})
+* and passed to each render call so grid + selection can share a single
+* GL context and accumulate `renderer.info` counters for the same tick.
+*/
+var SelectionRenderer = class {
+	material;
+	mesh;
+	scene;
+	camera;
+	constructor() {
+		this.scene = new THREE.Scene();
+		this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+		const boundsDefault = [];
+		for (let i = 0; i < MAX_ENTITIES; i++) boundsDefault.push(new THREE.Vector4(0, 0, 0, 0));
+		this.material = new THREE.ShaderMaterial({
+			vertexShader: vertexShader$1,
+			fragmentShader: fragmentShader$1,
+			uniforms: {
+				u_resolution: { value: new THREE.Vector2(1, 1) },
+				u_camera: { value: new THREE.Vector2(0, 0) },
+				u_zoom: { value: 1 },
+				u_dpr: { value: 1 },
+				u_count: { value: 0 },
+				u_bounds: { value: boundsDefault },
+				u_hoverIdx: { value: -1 },
+				u_groupBounds: { value: new THREE.Vector4(0, 0, 0, 0) },
+				u_hasGroup: { value: 0 },
+				u_outlineColor: { value: new THREE.Vector3(...DEFAULT_SELECTION_CONFIG.outlineColor) },
+				u_outlineWidth: { value: DEFAULT_SELECTION_CONFIG.outlineWidth },
+				u_hoverColor: { value: new THREE.Vector3(...DEFAULT_SELECTION_CONFIG.hoverColor) },
+				u_hoverWidth: { value: DEFAULT_SELECTION_CONFIG.hoverWidth },
+				u_handleSize: { value: DEFAULT_SELECTION_CONFIG.handleSize },
+				u_handleFill: { value: new THREE.Vector3(...DEFAULT_SELECTION_CONFIG.handleFill) },
+				u_handleBorder: { value: new THREE.Vector3(...DEFAULT_SELECTION_CONFIG.handleBorder) },
+				u_handleBorderWidth: { value: DEFAULT_SELECTION_CONFIG.handleBorderWidth },
+				u_groupDash: { value: DEFAULT_SELECTION_CONFIG.groupDash }
+			},
+			transparent: true,
+			depthTest: false,
+			depthWrite: false
+		});
+		const geometry = new THREE.BufferGeometry();
+		const vertices = new Float32Array([
+			-1,
+			-1,
+			0,
+			3,
+			-1,
+			0,
+			-1,
+			3,
+			0
+		]);
+		geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
+		this.mesh = new THREE.Mesh(geometry, this.material);
+		this.scene.add(this.mesh);
+	}
+	setConfig(config) {
+		const u = this.material.uniforms;
+		if (config.outlineColor) u.u_outlineColor.value.set(...config.outlineColor);
+		if (config.outlineWidth !== void 0) u.u_outlineWidth.value = config.outlineWidth;
+		if (config.hoverColor) u.u_hoverColor.value.set(...config.hoverColor);
+		if (config.hoverWidth !== void 0) u.u_hoverWidth.value = config.hoverWidth;
+		if (config.handleSize !== void 0) u.u_handleSize.value = config.handleSize;
+		if (config.handleFill) u.u_handleFill.value.set(...config.handleFill);
+		if (config.handleBorder) u.u_handleBorder.value.set(...config.handleBorder);
+		if (config.handleBorderWidth !== void 0) u.u_handleBorderWidth.value = config.handleBorderWidth;
+		if (config.groupDash !== void 0) u.u_groupDash.value = config.groupDash;
+	}
+	setSize(resolution, dpr) {
+		this.material.uniforms.u_resolution.value.copy(resolution);
+		this.material.uniforms.u_dpr.value = dpr;
+	}
+	render(renderer, cameraX, cameraY, zoom, selected, hovered) {
+		const u = this.material.uniforms;
+		u.u_camera.value.set(cameraX, cameraY);
+		u.u_zoom.value = zoom;
+		const count = Math.min(selected.length, MAX_ENTITIES);
+		u.u_count.value = count;
+		for (let i = 0; i < count; i++) {
+			const b = selected[i];
+			u.u_bounds.value[i].set(b.x, b.y, b.width, b.height);
+		}
+		if (hovered && count < MAX_ENTITIES) {
+			let hoverIdx = -1;
+			for (let i = 0; i < count; i++) {
+				const b = selected[i];
+				if (b.x === hovered.x && b.y === hovered.y) {
+					hoverIdx = i;
+					break;
+				}
+			}
+			if (hoverIdx < 0) {
+				u.u_bounds.value[count].set(hovered.x, hovered.y, hovered.width, hovered.height);
+				u.u_hoverIdx.value = count;
+			} else u.u_hoverIdx.value = -1;
+		} else u.u_hoverIdx.value = -1;
+		if (count > 1) {
+			let minX = Number.POSITIVE_INFINITY;
+			let minY = Number.POSITIVE_INFINITY;
+			let maxX = Number.NEGATIVE_INFINITY;
+			let maxY = Number.NEGATIVE_INFINITY;
+			for (let i = 0; i < count; i++) {
+				const b = selected[i];
+				minX = Math.min(minX, b.x);
+				minY = Math.min(minY, b.y);
+				maxX = Math.max(maxX, b.x + b.width);
+				maxY = Math.max(maxY, b.y + b.height);
+			}
+			u.u_groupBounds.value.set(minX, minY, maxX - minX, maxY - minY);
+			u.u_hasGroup.value = 1;
+		} else u.u_hasGroup.value = 0;
+		const prevAutoClear = renderer.autoClear;
+		renderer.autoClear = false;
+		renderer.render(this.scene, this.camera);
+		renderer.autoClear = prevAutoClear;
+	}
+	dispose() {
+		this.mesh.geometry.dispose();
+		this.material.dispose();
+	}
+};
+//#endregion
+//#region src/webgl/renderers/SnapGuideRenderer.ts
+const DEFAULT_SNAP_GUIDE_CONFIG = {
+	color: [
+		1,
+		0,
+		.55
+	],
+	lineWidth: .5,
+	guideAlpha: .8,
+	spacingAlpha: .7
+};
+const MAX_GUIDES = 16;
+const MAX_SPACINGS = 8;
+const vertexShader = `
+void main() {
+	gl_Position = vec4(position.xy, 0.0, 1.0);
+}
+`;
+const fragmentShader = `
+precision highp float;
+
+uniform vec2 u_resolution;
+uniform vec2 u_camera;
+uniform float u_zoom;
+uniform float u_dpr;
+
+uniform int u_guideCount;
+uniform vec4 u_guides[${MAX_GUIDES}];      // (axis: 0=x/1=y, position, 0, 0)
+uniform int u_spacingCount;
+uniform vec4 u_spacings[${MAX_SPACINGS}];  // (axis, from, to, perpPos)
+
+uniform vec3 u_color;
+uniform float u_lineWidth;
+uniform float u_guideAlpha;
+uniform float u_spacingAlpha;
+
+void main() {
+	if (u_guideCount == 0 && u_spacingCount == 0) discard;
+
+	vec2 devicePos = gl_FragCoord.xy;
+	devicePos.y = u_resolution.y - devicePos.y;
+
+	float effectiveZoom = u_zoom * u_dpr;
+	vec2 worldPos = devicePos / effectiveZoom + u_camera;
+	float pxToWorld = 1.0 / effectiveZoom;
+	float lineHalf = u_lineWidth * pxToWorld;
+
+	vec4 color = vec4(0.0);
+
+	// --- Snap guide lines (full-canvas axis alignment) ---
+	for (int i = 0; i < ${MAX_GUIDES}; i++) {
+		if (i >= u_guideCount) break;
+		vec4 g = u_guides[i];
+		float dist = g.x < 0.5 ? abs(worldPos.x - g.y) : abs(worldPos.y - g.y);
+		float a = 1.0 - smoothstep(lineHalf - pxToWorld * 0.3, lineHalf + pxToWorld * 0.3, dist);
+		color = max(color, vec4(u_color, a * u_guideAlpha));
+	}
+
+	// --- Equal spacing indicators (segment + end-bars) ---
+	for (int i = 0; i < ${MAX_SPACINGS}; i++) {
+		if (i >= u_spacingCount) break;
+		vec4 s = u_spacings[i];
+		float segAlpha = 0.0;
+		if (s.x < 0.5) {
+			// Horizontal gap segment
+			float yDist = abs(worldPos.y - s.w);
+			float xInRange = step(s.y, worldPos.x) * step(worldPos.x, s.z);
+			segAlpha = (1.0 - smoothstep(lineHalf, lineHalf + pxToWorld, yDist)) * xInRange;
+			float barHeight = 4.0 * pxToWorld;
+			float barFrom = (1.0 - smoothstep(lineHalf, lineHalf + pxToWorld, abs(worldPos.x - s.y)))
+				* (1.0 - smoothstep(barHeight, barHeight + pxToWorld, abs(worldPos.y - s.w)));
+			float barTo = (1.0 - smoothstep(lineHalf, lineHalf + pxToWorld, abs(worldPos.x - s.z)))
+				* (1.0 - smoothstep(barHeight, barHeight + pxToWorld, abs(worldPos.y - s.w)));
+			segAlpha = max(segAlpha, max(barFrom, barTo));
+		} else {
+			// Vertical gap segment
+			float xDist = abs(worldPos.x - s.w);
+			float yInRange = step(s.y, worldPos.y) * step(worldPos.y, s.z);
+			segAlpha = (1.0 - smoothstep(lineHalf, lineHalf + pxToWorld, xDist)) * yInRange;
+			float barWidth = 4.0 * pxToWorld;
+			float barFrom = (1.0 - smoothstep(lineHalf, lineHalf + pxToWorld, abs(worldPos.y - s.y)))
+				* (1.0 - smoothstep(barWidth, barWidth + pxToWorld, abs(worldPos.x - s.w)));
+			float barTo = (1.0 - smoothstep(lineHalf, lineHalf + pxToWorld, abs(worldPos.y - s.z)))
+				* (1.0 - smoothstep(barWidth, barWidth + pxToWorld, abs(worldPos.x - s.w)));
+			segAlpha = max(segAlpha, max(barFrom, barTo));
+		}
+		color = max(color, vec4(u_color, segAlpha * u_spacingAlpha));
+	}
+
+	if (color.a < 0.01) discard;
+	gl_FragColor = color;
+}
+`;
+/**
+* Renders alignment guide lines and equal-spacing indicators in a single
+* SDF pass. Independent of {@link SelectionRenderer} — guides participate
+* regardless of whether anything is selected, and the dragged entity may
+* have its own chrome that opts out of the engine-drawn selection frame.
+*/
+var SnapGuideRenderer = class {
+	material;
+	mesh;
+	scene;
+	camera;
+	constructor() {
+		this.scene = new THREE.Scene();
+		this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+		this.material = new THREE.ShaderMaterial({
+			vertexShader,
+			fragmentShader,
+			uniforms: {
+				u_resolution: { value: new THREE.Vector2(1, 1) },
+				u_camera: { value: new THREE.Vector2(0, 0) },
+				u_zoom: { value: 1 },
+				u_dpr: { value: 1 },
+				u_guideCount: { value: 0 },
+				u_guides: { value: Array.from({ length: MAX_GUIDES }, () => new THREE.Vector4(0, 0, 0, 0)) },
+				u_spacingCount: { value: 0 },
+				u_spacings: { value: Array.from({ length: MAX_SPACINGS }, () => new THREE.Vector4(0, 0, 0, 0)) },
+				u_color: { value: new THREE.Vector3(...DEFAULT_SNAP_GUIDE_CONFIG.color) },
+				u_lineWidth: { value: DEFAULT_SNAP_GUIDE_CONFIG.lineWidth },
+				u_guideAlpha: { value: DEFAULT_SNAP_GUIDE_CONFIG.guideAlpha },
+				u_spacingAlpha: { value: DEFAULT_SNAP_GUIDE_CONFIG.spacingAlpha }
+			},
+			transparent: true,
+			depthTest: false,
+			depthWrite: false
+		});
+		const geometry = new THREE.BufferGeometry();
+		const vertices = new Float32Array([
+			-1,
+			-1,
+			0,
+			3,
+			-1,
+			0,
+			-1,
+			3,
+			0
+		]);
+		geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
+		this.mesh = new THREE.Mesh(geometry, this.material);
+		this.scene.add(this.mesh);
+	}
+	setConfig(config) {
+		const u = this.material.uniforms;
+		if (config.color) u.u_color.value.set(...config.color);
+		if (config.lineWidth !== void 0) u.u_lineWidth.value = config.lineWidth;
+		if (config.guideAlpha !== void 0) u.u_guideAlpha.value = config.guideAlpha;
+		if (config.spacingAlpha !== void 0) u.u_spacingAlpha.value = config.spacingAlpha;
+	}
+	setSize(resolution, dpr) {
+		this.material.uniforms.u_resolution.value.copy(resolution);
+		this.material.uniforms.u_dpr.value = dpr;
+	}
+	render(renderer, cameraX, cameraY, zoom, guides, spacings) {
+		const u = this.material.uniforms;
+		u.u_camera.value.set(cameraX, cameraY);
+		u.u_zoom.value = zoom;
+		const gCount = Math.min(guides.length, MAX_GUIDES);
+		u.u_guideCount.value = gCount;
+		for (let i = 0; i < gCount; i++) {
+			const g = guides[i];
+			u.u_guides.value[i].set(g.axis === "x" ? 0 : 1, g.position, 0, 0);
+		}
+		let sIdx = 0;
+		for (const sp of spacings) for (const seg of sp.segments) {
+			if (sIdx >= MAX_SPACINGS) break;
+			u.u_spacings.value[sIdx].set(sp.axis === "x" ? 0 : 1, seg.from, seg.to, sp.perpPosition);
+			sIdx++;
+		}
+		u.u_spacingCount.value = sIdx;
+		const prevAutoClear = renderer.autoClear;
+		renderer.autoClear = false;
+		renderer.render(this.scene, this.camera);
+		renderer.autoClear = prevAutoClear;
+	}
+	dispose() {
+		this.mesh.geometry.dispose();
+		this.material.dispose();
+	}
+};
+//#endregion
+//#region src/webgl/WebGLManager.ts
+/**
+* Top-level coordinator for the library's vanilla-WebGL layer.
+*
+* Owns a single `THREE.WebGLRenderer` and drives the built-in renderers
+* (dot grid, selection overlay, snap guides) through it. This replaces
+* the previous pattern where `GridRenderer` owned the renderer and
+* `SelectionRenderer` piggy-backed on it via an implicit side-effect —
+* a manager makes the sharing explicit and gives {@link InfiniteCanvas}
+* a single surface to talk to instead of three.
+*/
+var WebGLManager = class {
+	renderer;
+	grid = null;
+	selection;
+	snapGuides;
+	constructor(canvas, opts = {}) {
+		this.renderer = new THREE.WebGLRenderer({
+			canvas,
+			alpha: true,
+			antialias: false,
+			premultipliedAlpha: false
+		});
+		this.renderer.setClearColor(0, 0);
+		this.renderer.info.autoReset = false;
+		if (opts.grid !== false) {
+			this.grid = new GridRenderer();
+			if (opts.grid) this.grid.setConfig(opts.grid);
+		}
+		this.selection = new SelectionRenderer();
+		if (opts.selection) this.selection.setConfig(opts.selection);
+		this.snapGuides = new SnapGuideRenderer();
+		if (opts.snapGuides) this.snapGuides.setConfig(opts.snapGuides);
+	}
+	/** Resize the drawing buffer. Call on mount and ResizeObserver events. */
+	setSize(width, height, dpr = 1) {
+		this.renderer.setSize(width, height, false);
+		this.renderer.setPixelRatio(dpr);
+		const resolution = new THREE.Vector2(width * dpr, height * dpr);
+		this.grid?.setSize(width, height, dpr);
+		this.selection.setSize(resolution, dpr);
+		this.snapGuides.setSize(resolution, dpr);
+	}
+	/** Update grid visuals (colors, spacings, fade ranges, etc.). */
+	setGridConfig(config) {
+		this.grid?.setConfig(config);
+	}
+	/** Update selection overlay visuals (outline color, handle size, etc.). */
+	setSelectionConfig(config) {
+		this.selection.setConfig(config);
+	}
+	/** Update snap-guide visuals (color, line width, alpha). */
+	setSnapGuideConfig(config) {
+		this.snapGuides.setConfig(config);
+	}
+	/** Render one frame: grid → selection → snap guides, in stacking order. */
+	render(input) {
+		const { camera, selection, snap, profiler } = input;
+		this.renderer.info.reset();
+		if (this.grid) {
+			profiler?.beginWebGL("grid");
+			this.grid.render(this.renderer, camera.x, camera.y, camera.zoom);
+			profiler?.endWebGL("grid");
+		}
+		profiler?.beginWebGL("selection");
+		this.selection.render(this.renderer, camera.x, camera.y, camera.zoom, selection.bounds, selection.hovered);
+		profiler?.endWebGL("selection");
+		if (snap.visible) {
+			profiler?.beginWebGL("snap-guides");
+			this.snapGuides.render(this.renderer, camera.x, camera.y, camera.zoom, snap.guides, snap.spacings);
+			profiler?.endWebGL("snap-guides");
+		}
+		if (profiler?.isEnabled()) {
+			const info = this.renderer.info;
+			profiler.recordWebGLStats({
+				drawCalls: info.render.calls,
+				triangles: info.render.triangles,
+				selectionFrames: selection.bounds.length + (selection.hovered ? 1 : 0),
+				snapGuides: snap.guides.length,
+				spacingIndicators: snap.spacings.length,
+				domPositionsUpdated: input.domPositionsUpdated ?? 0
+			});
+		}
+	}
+	/** Release GL resources — call on unmount. */
+	dispose() {
+		this.grid?.dispose();
+		this.selection.dispose();
+		this.snapGuides.dispose();
+		this.renderer.dispose();
+	}
+	/** Escape hatch if an advanced consumer needs the underlying three renderer. */
+	getWebGLRenderer() {
+		return this.renderer;
+	}
+};
+//#endregion
+//#region src/react/widgets/CardChrome.tsx
+/**
+* iOS-style card chrome — rounded background, hairline ring, soft drop
+* shadow, and a smooth lift (scale + stronger shadow) when `lifted` is
+* true. A single soft radial-gradient glow renders at the hot point
+* during overlap (no rim, no bloom, no backdrop-filter). Glow color,
+* alpha, and falloff are tunable via the `--ic-glow-*` CSS vars set by
+* `<InfiniteCanvas overlapGlow={…}>`.
+*
+* Pure presentational component with no ECS or compositor coupling. Used
+* by both the DOM `createCardWidget` (wrapping inner content) and the R3F
+* `createGeometryCardWidget` (rendered via a DOM slot beneath the WebGL
+* canvas, with the 3D content floating on top).
+*/
+function CardChrome({ lifted = false, radius = 21.67, background, className, style, overlapCandidate = false, overlapTarget = false, hotX = .5, hotY = .5, hotStrength = 0, children }) {
+	const baseShadow = lifted ? "0 30px 60px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06)" : "0 20px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05)";
+	const baseStyle = {
+		position: "relative",
+		width: "100%",
+		height: "100%",
+		borderRadius: `${radius}px`,
+		overflow: "hidden",
+		background,
+		boxShadow: baseShadow,
+		transform: lifted ? "scale(1.05)" : "scale(1)",
+		transformOrigin: "center center",
+		transition: "transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 220ms ease",
+		willChange: lifted ? "transform, box-shadow" : void 0,
+		...style
+	};
+	const hotXPct = hotX * 100;
+	const hotYPct = hotY * 100;
+	const glowStyle = {
+		position: "absolute",
+		inset: 0,
+		pointerEvents: "none",
+		borderRadius: "inherit",
+		boxShadow: `inset ${-(hotX - .5) * 16}px ${-(hotY - .5) * 16}px ${overlapTarget ? "var(--ic-glow-size-t, 80px)" : "var(--ic-glow-size-c, 60px)"} rgba(var(--ic-glow-color, 128, 128, 128), ${overlapTarget ? "var(--ic-glow-alpha-t, 0.45)" : "var(--ic-glow-alpha-c, 0.25)"})`,
+		opacity: overlapCandidate ? hotStrength : 0,
+		transition: "opacity 220ms ease, box-shadow 220ms ease"
+	};
+	const rimStyle = {
+		position: "absolute",
+		inset: 0,
+		pointerEvents: "none",
+		borderRadius: "inherit",
+		padding: "var(--ic-rim-width, 1.5px)",
+		background: `radial-gradient(var(--ic-rim-radius, 600px) circle at ${hotXPct}% ${hotYPct}%, ${`rgba(var(--ic-rim-color, 128, 128, 128), ${overlapTarget ? "var(--ic-rim-alpha-t, 0.85)" : "var(--ic-rim-alpha-c, 0.55)"})`}, transparent 40%)`,
+		WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+		WebkitMaskComposite: "xor",
+		mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+		maskComposite: "exclude",
+		opacity: overlapCandidate ? hotStrength : 0,
+		transition: "opacity 220ms ease, background 220ms ease"
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		style: baseStyle,
+		"data-overlap-candidate": overlapCandidate || void 0,
+		"data-overlap-target": overlapTarget || void 0,
+		children: [
+			children,
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				style: glowStyle
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				style: rimStyle
+			})
+		]
+	});
+}
+//#endregion
+//#region src/react/overlays/SelectionOverlaySlot.tsx
+/**
+* DOM chrome overlay for R3F widgets — renders the selection frame /
+* card decoration and positions itself at the widget's world AABB.
+*
+* Decoration only. Pointer events bypass this wrapper
+* (`pointer-events: none`) so they reach the R3F canvas underneath,
+* where the `EventRouter` raycasts the widget's local scene (RFC-006).
+* Engine semantics — drag, select, resize, double-click — are dispatched
+* by the canvas-level `PointerEventBus` after the widget's R3F handlers
+* have had a chance to call `event.stopPropagation()`.
+*/
+const SelectionOverlaySlot = memo(function SelectionOverlaySlot({ entityId, slotRef }) {
+	const wrapperRef = useRef(null);
+	const engine = useLayoutEngine();
+	const dragging = useTag(entityId, Dragging);
+	const card = useComponent(entityId, Card);
+	const overlapCandidate = useTag(entityId, OverlapCandidate);
+	const overlapTarget = useTag(entityId, OverlapTarget);
+	const hot = useComponent(entityId, CardOverlapHotPoint);
+	useEffect(() => {
+		slotRef(entityId, wrapperRef.current);
+		return () => slotRef(entityId, null);
+	}, [entityId, slotRef]);
+	const t = engine.get(entityId, Transform2D);
+	return /* @__PURE__ */ jsx("div", {
+		ref: wrapperRef,
+		className: "pointer-events-none absolute left-0 top-0 origin-top-left will-change-transform",
+		"data-widget-slot": "",
+		style: t ? {
+			transform: `translate(${t.x}px, ${t.y}px)`,
+			width: `${t.width}px`,
+			height: `${t.height}px`
+		} : {},
+		children: card && /* @__PURE__ */ jsx(CardChrome, {
+			lifted: dragging,
+			background: card.background,
+			overlapCandidate,
+			overlapTarget,
+			hotX: hot?.x,
+			hotY: hot?.y,
+			hotStrength: hot?.strength
+		})
+	});
+});
+//#endregion
+//#region src/react/widgets/WidgetSlot.tsx
+/**
+* Wrapper for a DOM widget — owns the slot's positioning, registers its
+* ref with the rAF batcher, and renders the user's widget component.
+*
+* Pointer routing lives in the canvas-level `PointerEventBus` (RFC-006).
+* The slot does not call the engine; user widget React handlers run on
+* the natural DOM event path and bubble to the bus, which decides
+* whether to invoke engine semantics. Authors call `e.stopPropagation()`
+* from inside their widget to opt out of engine drag/select.
+*/
+const WidgetSlot = memo(function WidgetSlot({ entityId, slotRef }) {
+	const wrapperRef = useRef(null);
+	const engine = useLayoutEngine();
+	const resolve = useWidgetResolver();
+	const widgetComp = useComponent(entityId, Widget);
+	const resolved = resolve?.(entityId, widgetComp?.type ?? "");
+	const WidgetComponent = resolved && resolved.surface === "dom" ? resolved.component : null;
+	useEffect(() => {
+		slotRef(entityId, wrapperRef.current);
+		return () => slotRef(entityId, null);
+	}, [entityId, slotRef]);
+	const t = engine.get(entityId, Transform2D);
+	return /* @__PURE__ */ jsx("div", {
+		ref: wrapperRef,
+		"data-widget-slot": "",
+		className: "absolute left-0 top-0 origin-top-left will-change-transform",
+		style: t ? {
+			transform: `translate(${t.x}px, ${t.y}px)`,
+			width: `${t.width}px`,
+			height: `${t.height}px`
+		} : {},
+		children: WidgetComponent ? /* @__PURE__ */ jsx(WidgetComponent, { entityId }) : /* @__PURE__ */ jsx("div", { className: "h-full w-full rounded border border-dashed border-gray-300 bg-gray-50" })
+	});
+});
+//#endregion
+//#region src/r3f/compositor/hooks.ts
+/**
+* Marks the current R3F widget as actively animating. While `active` is true,
+* the state machine places the widget in `Hot`; when false, it returns to
+* `Warm` on the next frame.
+*
+* Widgets should call this whenever they want per-frame ticking (e.g. during
+* a spring settle, hover lerp, or an external animation). Without this
+* signal, `useFrame` bodies may still fire when the canvas re-renders for
+* other reasons — check `useWidgetPhase() === 'Hot'` to early-exit work
+* that's only meaningful during the animation.
+*/
+function useWidgetAnimation(entityId, active) {
+	const engine = useLayoutEngine();
+	useEffect(() => {
+		if (active) {
+			engine.world.addTag(entityId, R3FAnimationSignal);
+			engine.markDirty();
+			return () => {
+				engine.world.removeTag(entityId, R3FAnimationSignal);
+				engine.markDirty();
+			};
+		}
+		engine.world.removeTag(entityId, R3FAnimationSignal);
+		engine.markDirty();
+	}, [
+		engine,
+		entityId,
+		active
+	]);
+}
+/**
+* Returns the current compositor phase for the widget. Re-renders when the
+* phase changes.
+*/
+function useWidgetPhase(entityId) {
+	return useComponent(entityId, R3FRenderState)?.phase ?? null;
+}
+/**
+* Returns a function that schedules a one-shot repaint of the widget. Use
+* when widget content changes outside of React's render cycle (e.g., a
+* subscription to an external store, an imperative WebSocket message).
+*
+* Internally bumps `paintGeneration` so the compositor's dirty check picks
+* the widget up on the next frame, and invalidates the canvas so that
+* frame is actually scheduled.
+*/
+function useWidgetInvalidate(entityId) {
+	const engine = useLayoutEngine();
+	const invalidate = useThree((s) => s.invalidate);
+	return useCallback(() => {
+		const current = engine.world.getComponent(entityId, R3FRenderState);
+		if (!current) {
+			invalidate();
+			return;
+		}
+		engine.world.setComponent(entityId, R3FRenderState, {
+			...current,
+			paintGeneration: current.paintGeneration + 1
+		});
+		invalidate();
+	}, [
+		engine,
+		entityId,
+		invalidate
+	]);
+}
+/**
+* Acquires a shared geometry from the Compositor's `ResourceRegistry`,
+* keyed by `cacheKey`. The factory runs only on first acquisition; later
+* callers with the same key get the same instance. Released automatically
+* on unmount; the registry disposes when the last holder releases.
+*
+* Use for geometries that are expensive to build and frequently identical
+* across widget instances — e.g. preset card backs.
+*/
+function useSharedGeometry(cacheKey, factory) {
+	const { registry } = useCompositor();
+	const factoryRef = useRef(factory);
+	factoryRef.current = factory;
+	const geometry = useMemo(() => registry.acquireGeometry(cacheKey, factoryRef.current), [registry, cacheKey]);
+	useEffect(() => {
+		return () => registry.releaseGeometry(cacheKey);
+	}, [registry, cacheKey]);
+	return geometry;
+}
+/** Same contract as {@link useSharedGeometry}, for materials. */
+function useSharedMaterial(cacheKey, factory) {
+	const { registry } = useCompositor();
+	const factoryRef = useRef(factory);
+	factoryRef.current = factory;
+	const material = useMemo(() => registry.acquireMaterial(cacheKey, factoryRef.current), [registry, cacheKey]);
+	useEffect(() => {
+		return () => registry.releaseMaterial(cacheKey);
+	}, [registry, cacheKey]);
+	return material;
+}
+/** Same contract as {@link useSharedGeometry}, for textures. */
+function useSharedTexture(cacheKey, factory) {
+	const { registry } = useCompositor();
+	const factoryRef = useRef(factory);
+	factoryRef.current = factory;
+	const texture = useMemo(() => registry.acquireTexture(cacheKey, factoryRef.current), [registry, cacheKey]);
+	useEffect(() => {
+		return () => registry.releaseTexture(cacheKey);
+	}, [registry, cacheKey]);
+	return texture;
+}
+//#endregion
+export { useCompositor as A, Profiler as B, selectBand as C, R3FRenderState as D, R3FRenderBudget as E, useWidgetResolver as F, ContainerRefProvider as I, useContainerRef as L, inputGroupStart as M, inputLog as N, ResourceRegistry as O, WidgetResolverProvider as P, computeSnapGuides as R, isOutOfBand as S, R3FAnimationSignal as T, ProfilerProbe as _, useWidgetInvalidate as a, Compositor as b, SelectionOverlaySlot as c, DEFAULT_SNAP_GUIDE_CONFIG as d, DEFAULT_SELECTION_CONFIG as f, R3FManager as g, GridRenderer as h, useWidgetAnimation as i, sharedGlowUniforms as j, CompositorContext as k, CardChrome as l, DEFAULT_GRID_CONFIG as m, useSharedMaterial as n, useWidgetPhase as o, SelectionRenderer as p, useSharedTexture as r, WidgetSlot as s, useSharedGeometry as t, WebGLManager as u, WidgetStateMachine as v, WidgetRenderTargetPool as w, ZOOM_BANDS as x, VirtualWidget as y, SpatialIndex as z };
+
+//# sourceMappingURL=hooks-gsQDDE56.mjs.map