@jamesyong42/infinite-canvas 1.2.0 → 1.3.0

package/dist/hooks-CtP02JNt.cjs

@@ -0,0 +1,3762 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+const require_ecs = require("./ecs-B4QrqfvQ.cjs");
+let _jamesyong42_reactive_ecs = require("@jamesyong42/reactive-ecs");
+let react = require("react");
+let _react_three_fiber = require("@react-three/fiber");
+let three = require("three");
+let three$1 = __toESM(three, 1);
+three = __toESM(three);
+let react_jsx_runtime = require("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 = (0, react.createContext)(null);
+const ContainerRefProvider = ContainerRefContext.Provider;
+function useContainerRef() {
+	return (0, react.useContext)(ContainerRefContext);
+}
+//#endregion
+//#region src/react/context/widget-resolver-context.ts
+const WidgetResolverContext = (0, react.createContext)(null);
+const WidgetResolverProvider = WidgetResolverContext.Provider;
+function useWidgetResolver() {
+	return (0, react.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 = (0, _react_three_fiber.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, require_ecs.Widget)?.surface !== "webgl") {
+				skipEvent(state);
+				return;
+			}
+			const widget = registry.get(entityId);
+			const t = engine.get(entityId, require_ecs.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 three$1.Vector3(.5, .5, .5) },
+	uGlowAlpha: { value: new three$1.Vector2(.25, .45) },
+	uGlowFalloff: { value: new three$1.Vector2(.3, .4) },
+	uRimColor: { value: new three$1.Vector3(.5, .5, .5) },
+	uRimAlpha: { value: new three$1.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 three$1.ShaderMaterial {
+	constructor() {
+		super({
+			vertexShader: VERTEX_SHADER,
+			fragmentShader: FRAGMENT_SHADER,
+			uniforms: {
+				map: { value: null },
+				uDraggedRect: { value: new three$1.Vector4(0, 0, 0, 0) },
+				uIsDragged: { value: 0 },
+				uHotPoint: { value: new three$1.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 = (0, react.createContext)(null);
+function useCompositor() {
+	const ctx = (0, react.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 = (0, _jamesyong42_reactive_ecs.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 = (0, _jamesyong42_reactive_ecs.defineTag)("R3FAnimationSignal");
+const R3FRenderBudget = (0, _jamesyong42_reactive_ecs.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 three$1.WebGLRenderTarget(pixelWidth, pixelHeight, { samples: 4 });
+		rt.texture.colorSpace = three$1.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 } = (0, _react_three_fiber.useThree)();
+	const invalidate = (0, _react_three_fiber.useThree)((s) => s.invalidate);
+	const poolRef = (0, react.useRef)(null);
+	if (!poolRef.current || poolRef.current.isDisposed()) poolRef.current = new WidgetRenderTargetPool();
+	const pool = poolRef.current;
+	const registryRef = (0, react.useRef)(null);
+	if (!registryRef.current || registryRef.current.isDisposed()) registryRef.current = new ResourceRegistry();
+	const registry = registryRef.current;
+	const quadGeometry = (0, react.useMemo)(() => new three.PlaneGeometry(1, 1), []);
+	const quadsRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const liftScaleRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const lastDprRef = (0, react.useRef)(-1);
+	const idleDpr = typeof window !== "undefined" ? window.devicePixelRatio : 1;
+	const gestureDpr = Math.min(idleDpr, 1);
+	const compCamera = (0, react.useMemo)(() => new three.OrthographicCamera(0, 1, 0, -1, .1, 1e4), []);
+	(0, react.useEffect)(() => {
+		set({ camera: compCamera });
+	}, [set, compCamera]);
+	const register = (0, react.useCallback)((entityId, entry) => {
+		const unregisterFromRegistry = widgetRegistry.register(entityId, entry);
+		const mesh = new three.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 = (0, react.useMemo)(() => ({
+		pool,
+		registry,
+		register
+	}), [
+		pool,
+		registry,
+		register
+	]);
+	(0, react.useEffect)(() => {
+		return () => {
+			pool.dispose();
+			registry.dispose();
+		};
+	}, [pool, registry]);
+	(0, _react_three_fiber.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, require_ecs.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, require_ecs.Dragging)) continue;
+			if (world.getComponent(entityId, require_ecs.Widget)?.surface !== "webgl") continue;
+			draggedEntityId = entityId;
+			if (!world.hasComponent(entityId, require_ecs.Card)) break;
+			const dt = world.getComponent(entityId, require_ecs.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, require_ecs.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, require_ecs.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, require_ecs.CardOverlapHotPoint);
+			if (hot && world.hasTag(entityId, require_ecs.OverlapCandidate)) {
+				material.setHotPoint(hot.x, 1 - hot.y);
+				material.setHotStrength(hot.strength);
+			} else material.setHotStrength(0);
+			material.setIsOverlapTarget(world.hasTag(entityId, require_ecs.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__ */ (0, react_jsx_runtime.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 = (0, _react_three_fiber.useThree)((s) => s.invalidate);
+	const engine = require_ecs.useLayoutEngine();
+	const scene = (0, react.useMemo)(() => new three.Scene(), []);
+	const camera = (0, react.useMemo)(() => new three.OrthographicCamera(-1, 1, 1, -1, .1, 1e3), []);
+	(0, react.useEffect)(() => {
+		camera.position.set(0, 0, 100);
+		camera.lookAt(0, 0, 0);
+	}, [camera]);
+	const t = require_ecs.useComponent(entityId, require_ecs.Transform2D);
+	const w = t?.width ?? 0;
+	const h = t?.height ?? 0;
+	(0, react.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
+	]);
+	(0, react.useEffect)(() => {
+		return register(entityId, {
+			scene,
+			camera,
+			requestRepaint: invalidate
+		});
+	}, [
+		entityId,
+		register,
+		scene,
+		camera,
+		invalidate
+	]);
+	if (!t) return null;
+	return (0, _react_three_fiber.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.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 }) {
+	(0, react.useEffect)(() => {
+		const world = engine.world;
+		function updatePhases() {
+			for (const entity of world.query(require_ecs.Widget)) {
+				const widget = world.getComponent(entity, require_ecs.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, require_ecs.Active), world.hasTag(entity, require_ecs.Visible), world.hasTag(entity, require_ecs.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 = (0, _react_three_fiber.useThree)((s) => s.invalidate);
+	(0, react.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 } = (0, _react_three_fiber.useThree)();
+	const prevTimeRef = (0, react.useRef)(null);
+	const prevCallsRef = (0, react.useRef)(0);
+	const prevTrianglesRef = (0, react.useRef)(0);
+	const prevPointsRef = (0, react.useRef)(0);
+	const prevLinesRef = (0, react.useRef)(0);
+	(0, _react_three_fiber.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(require_ecs.Widget, R3FRenderState)) {
+			const widget = world.getComponent(entity, require_ecs.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 = (0, react.useRef)(null);
+	const containerRef = useContainerRef();
+	const initialCamera = (0, react.useMemo)(() => {
+		const cam = new three.OrthographicCamera(0, 1, 0, -1, .1, 1e4);
+		cam.position.set(0, 0, 1e3);
+		return cam;
+	}, []);
+	const widgetRegistry = (0, react.useMemo)(() => new WidgetRegistry(), []);
+	const eventManager = (0, react.useMemo)(() => createR3FEventManager(engine, widgetRegistry, (manager) => {
+		if (eventManagerRef) eventManagerRef.current = manager;
+	}), [
+		engine,
+		widgetRegistry,
+		eventManagerRef
+	]);
+	const widgetEntries = (0, react.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__ */ (0, react_jsx_runtime.jsx)(_react_three_fiber.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__ */ (0, react_jsx_runtime.jsxs)(require_ecs.EngineProvider, {
+			value: engine,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EngineInvalidator, { engine }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetStateMachine, { engine }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfilerProbe, {
+					engine,
+					widgetCount: widgetEntries.length
+				}),
+				r3fRoot,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Compositor, {
+					engine,
+					widgetRegistry,
+					children: widgetEntries.map(({ entityId, component }) => /* @__PURE__ */ (0, react_jsx_runtime.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$1.Scene();
+		this.camera = new three$1.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+		this.material = new three$1.ShaderMaterial({
+			vertexShader: vertexShader$2,
+			fragmentShader: fragmentShader$2,
+			uniforms: {
+				u_resolution: { value: new three$1.Vector2(1, 1) },
+				u_camera: { value: new three$1.Vector2(0, 0) },
+				u_zoom: { value: 1 },
+				u_dpr: { value: 1 },
+				u_spacings: { value: new three$1.Vector3(...DEFAULT_GRID_CONFIG.spacings) },
+				u_dotColor: { value: new three$1.Vector3(...DEFAULT_GRID_CONFIG.dotColor) },
+				u_dotAlpha: { value: DEFAULT_GRID_CONFIG.dotAlpha },
+				u_fadeIn: { value: new three$1.Vector2(...DEFAULT_GRID_CONFIG.fadeIn) },
+				u_fadeOut: { value: new three$1.Vector2(...DEFAULT_GRID_CONFIG.fadeOut) },
+				u_dotRadius: { value: new three$1.Vector2(...DEFAULT_GRID_CONFIG.dotRadius) },
+				u_levelWeight: { value: new three$1.Vector2(...DEFAULT_GRID_CONFIG.levelWeight) }
+			},
+			transparent: true,
+			depthTest: false,
+			depthWrite: false
+		});
+		const geometry = new three$1.BufferGeometry();
+		const vertices = new Float32Array([
+			-1,
+			-1,
+			0,
+			3,
+			-1,
+			0,
+			-1,
+			3,
+			0
+		]);
+		geometry.setAttribute("position", new three$1.BufferAttribute(vertices, 3));
+		this.mesh = new three$1.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$1.Scene();
+		this.camera = new three$1.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+		const boundsDefault = [];
+		for (let i = 0; i < MAX_ENTITIES; i++) boundsDefault.push(new three$1.Vector4(0, 0, 0, 0));
+		this.material = new three$1.ShaderMaterial({
+			vertexShader: vertexShader$1,
+			fragmentShader: fragmentShader$1,
+			uniforms: {
+				u_resolution: { value: new three$1.Vector2(1, 1) },
+				u_camera: { value: new three$1.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$1.Vector4(0, 0, 0, 0) },
+				u_hasGroup: { value: 0 },
+				u_outlineColor: { value: new three$1.Vector3(...DEFAULT_SELECTION_CONFIG.outlineColor) },
+				u_outlineWidth: { value: DEFAULT_SELECTION_CONFIG.outlineWidth },
+				u_hoverColor: { value: new three$1.Vector3(...DEFAULT_SELECTION_CONFIG.hoverColor) },
+				u_hoverWidth: { value: DEFAULT_SELECTION_CONFIG.hoverWidth },
+				u_handleSize: { value: DEFAULT_SELECTION_CONFIG.handleSize },
+				u_handleFill: { value: new three$1.Vector3(...DEFAULT_SELECTION_CONFIG.handleFill) },
+				u_handleBorder: { value: new three$1.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$1.BufferGeometry();
+		const vertices = new Float32Array([
+			-1,
+			-1,
+			0,
+			3,
+			-1,
+			0,
+			-1,
+			3,
+			0
+		]);
+		geometry.setAttribute("position", new three$1.BufferAttribute(vertices, 3));
+		this.mesh = new three$1.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$1.Scene();
+		this.camera = new three$1.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+		this.material = new three$1.ShaderMaterial({
+			vertexShader,
+			fragmentShader,
+			uniforms: {
+				u_resolution: { value: new three$1.Vector2(1, 1) },
+				u_camera: { value: new three$1.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$1.Vector4(0, 0, 0, 0)) },
+				u_spacingCount: { value: 0 },
+				u_spacings: { value: Array.from({ length: MAX_SPACINGS }, () => new three$1.Vector4(0, 0, 0, 0)) },
+				u_color: { value: new three$1.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$1.BufferGeometry();
+		const vertices = new Float32Array([
+			-1,
+			-1,
+			0,
+			3,
+			-1,
+			0,
+			-1,
+			3,
+			0
+		]);
+		geometry.setAttribute("position", new three$1.BufferAttribute(vertices, 3));
+		this.mesh = new three$1.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$1.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$1.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className,
+		style: baseStyle,
+		"data-overlap-candidate": overlapCandidate || void 0,
+		"data-overlap-target": overlapTarget || void 0,
+		children: [
+			children,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"aria-hidden": true,
+				style: glowStyle
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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 = (0, react.memo)(function SelectionOverlaySlot({ entityId, slotRef }) {
+	const wrapperRef = (0, react.useRef)(null);
+	const engine = require_ecs.useLayoutEngine();
+	const dragging = require_ecs.useTag(entityId, require_ecs.Dragging);
+	const card = require_ecs.useComponent(entityId, require_ecs.Card);
+	const overlapCandidate = require_ecs.useTag(entityId, require_ecs.OverlapCandidate);
+	const overlapTarget = require_ecs.useTag(entityId, require_ecs.OverlapTarget);
+	const hot = require_ecs.useComponent(entityId, require_ecs.CardOverlapHotPoint);
+	(0, react.useEffect)(() => {
+		slotRef(entityId, wrapperRef.current);
+		return () => slotRef(entityId, null);
+	}, [entityId, slotRef]);
+	const t = engine.get(entityId, require_ecs.Transform2D);
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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 = (0, react.memo)(function WidgetSlot({ entityId, slotRef }) {
+	const wrapperRef = (0, react.useRef)(null);
+	const engine = require_ecs.useLayoutEngine();
+	const resolve = useWidgetResolver();
+	const widgetComp = require_ecs.useComponent(entityId, require_ecs.Widget);
+	const resolved = resolve?.(entityId, widgetComp?.type ?? "");
+	const WidgetComponent = resolved && resolved.surface === "dom" ? resolved.component : null;
+	(0, react.useEffect)(() => {
+		slotRef(entityId, wrapperRef.current);
+		return () => slotRef(entityId, null);
+	}, [entityId, slotRef]);
+	const t = engine.get(entityId, require_ecs.Transform2D);
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(WidgetComponent, { entityId }) : /* @__PURE__ */ (0, react_jsx_runtime.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 = require_ecs.useLayoutEngine();
+	(0, react.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 require_ecs.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 = require_ecs.useLayoutEngine();
+	const invalidate = (0, _react_three_fiber.useThree)((s) => s.invalidate);
+	return (0, react.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 = (0, react.useRef)(factory);
+	factoryRef.current = factory;
+	const geometry = (0, react.useMemo)(() => registry.acquireGeometry(cacheKey, factoryRef.current), [registry, cacheKey]);
+	(0, react.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 = (0, react.useRef)(factory);
+	factoryRef.current = factory;
+	const material = (0, react.useMemo)(() => registry.acquireMaterial(cacheKey, factoryRef.current), [registry, cacheKey]);
+	(0, react.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 = (0, react.useRef)(factory);
+	factoryRef.current = factory;
+	const texture = (0, react.useMemo)(() => registry.acquireTexture(cacheKey, factoryRef.current), [registry, cacheKey]);
+	(0, react.useEffect)(() => {
+		return () => registry.releaseTexture(cacheKey);
+	}, [registry, cacheKey]);
+	return texture;
+}
+//#endregion
+Object.defineProperty(exports, "CardChrome", {
+	enumerable: true,
+	get: function() {
+		return CardChrome;
+	}
+});
+Object.defineProperty(exports, "Compositor", {
+	enumerable: true,
+	get: function() {
+		return Compositor;
+	}
+});
+Object.defineProperty(exports, "CompositorContext", {
+	enumerable: true,
+	get: function() {
+		return CompositorContext;
+	}
+});
+Object.defineProperty(exports, "ContainerRefProvider", {
+	enumerable: true,
+	get: function() {
+		return ContainerRefProvider;
+	}
+});
+Object.defineProperty(exports, "DEFAULT_GRID_CONFIG", {
+	enumerable: true,
+	get: function() {
+		return DEFAULT_GRID_CONFIG;
+	}
+});
+Object.defineProperty(exports, "DEFAULT_SELECTION_CONFIG", {
+	enumerable: true,
+	get: function() {
+		return DEFAULT_SELECTION_CONFIG;
+	}
+});
+Object.defineProperty(exports, "DEFAULT_SNAP_GUIDE_CONFIG", {
+	enumerable: true,
+	get: function() {
+		return DEFAULT_SNAP_GUIDE_CONFIG;
+	}
+});
+Object.defineProperty(exports, "GridRenderer", {
+	enumerable: true,
+	get: function() {
+		return GridRenderer;
+	}
+});
+Object.defineProperty(exports, "Profiler", {
+	enumerable: true,
+	get: function() {
+		return Profiler;
+	}
+});
+Object.defineProperty(exports, "ProfilerProbe", {
+	enumerable: true,
+	get: function() {
+		return ProfilerProbe;
+	}
+});
+Object.defineProperty(exports, "R3FAnimationSignal", {
+	enumerable: true,
+	get: function() {
+		return R3FAnimationSignal;
+	}
+});
+Object.defineProperty(exports, "R3FManager", {
+	enumerable: true,
+	get: function() {
+		return R3FManager;
+	}
+});
+Object.defineProperty(exports, "R3FRenderBudget", {
+	enumerable: true,
+	get: function() {
+		return R3FRenderBudget;
+	}
+});
+Object.defineProperty(exports, "R3FRenderState", {
+	enumerable: true,
+	get: function() {
+		return R3FRenderState;
+	}
+});
+Object.defineProperty(exports, "ResourceRegistry", {
+	enumerable: true,
+	get: function() {
+		return ResourceRegistry;
+	}
+});
+Object.defineProperty(exports, "SelectionOverlaySlot", {
+	enumerable: true,
+	get: function() {
+		return SelectionOverlaySlot;
+	}
+});
+Object.defineProperty(exports, "SelectionRenderer", {
+	enumerable: true,
+	get: function() {
+		return SelectionRenderer;
+	}
+});
+Object.defineProperty(exports, "SpatialIndex", {
+	enumerable: true,
+	get: function() {
+		return SpatialIndex;
+	}
+});
+Object.defineProperty(exports, "VirtualWidget", {
+	enumerable: true,
+	get: function() {
+		return VirtualWidget;
+	}
+});
+Object.defineProperty(exports, "WebGLManager", {
+	enumerable: true,
+	get: function() {
+		return WebGLManager;
+	}
+});
+Object.defineProperty(exports, "WidgetRenderTargetPool", {
+	enumerable: true,
+	get: function() {
+		return WidgetRenderTargetPool;
+	}
+});
+Object.defineProperty(exports, "WidgetResolverProvider", {
+	enumerable: true,
+	get: function() {
+		return WidgetResolverProvider;
+	}
+});
+Object.defineProperty(exports, "WidgetSlot", {
+	enumerable: true,
+	get: function() {
+		return WidgetSlot;
+	}
+});
+Object.defineProperty(exports, "WidgetStateMachine", {
+	enumerable: true,
+	get: function() {
+		return WidgetStateMachine;
+	}
+});
+Object.defineProperty(exports, "ZOOM_BANDS", {
+	enumerable: true,
+	get: function() {
+		return ZOOM_BANDS;
+	}
+});
+Object.defineProperty(exports, "__toESM", {
+	enumerable: true,
+	get: function() {
+		return __toESM;
+	}
+});
+Object.defineProperty(exports, "computeSnapGuides", {
+	enumerable: true,
+	get: function() {
+		return computeSnapGuides;
+	}
+});
+Object.defineProperty(exports, "inputGroupStart", {
+	enumerable: true,
+	get: function() {
+		return inputGroupStart;
+	}
+});
+Object.defineProperty(exports, "inputLog", {
+	enumerable: true,
+	get: function() {
+		return inputLog;
+	}
+});
+Object.defineProperty(exports, "isOutOfBand", {
+	enumerable: true,
+	get: function() {
+		return isOutOfBand;
+	}
+});
+Object.defineProperty(exports, "selectBand", {
+	enumerable: true,
+	get: function() {
+		return selectBand;
+	}
+});
+Object.defineProperty(exports, "sharedGlowUniforms", {
+	enumerable: true,
+	get: function() {
+		return sharedGlowUniforms;
+	}
+});
+Object.defineProperty(exports, "useCompositor", {
+	enumerable: true,
+	get: function() {
+		return useCompositor;
+	}
+});
+Object.defineProperty(exports, "useContainerRef", {
+	enumerable: true,
+	get: function() {
+		return useContainerRef;
+	}
+});
+Object.defineProperty(exports, "useSharedGeometry", {
+	enumerable: true,
+	get: function() {
+		return useSharedGeometry;
+	}
+});
+Object.defineProperty(exports, "useSharedMaterial", {
+	enumerable: true,
+	get: function() {
+		return useSharedMaterial;
+	}
+});
+Object.defineProperty(exports, "useSharedTexture", {
+	enumerable: true,
+	get: function() {
+		return useSharedTexture;
+	}
+});
+Object.defineProperty(exports, "useWidgetAnimation", {
+	enumerable: true,
+	get: function() {
+		return useWidgetAnimation;
+	}
+});
+Object.defineProperty(exports, "useWidgetInvalidate", {
+	enumerable: true,
+	get: function() {
+		return useWidgetInvalidate;
+	}
+});
+Object.defineProperty(exports, "useWidgetPhase", {
+	enumerable: true,
+	get: function() {
+		return useWidgetPhase;
+	}
+});
+Object.defineProperty(exports, "useWidgetResolver", {
+	enumerable: true,
+	get: function() {
+		return useWidgetResolver;
+	}
+});
+
+//# sourceMappingURL=hooks-CtP02JNt.cjs.map