@jamesyong42/infinite-canvas 1.0.0 → 1.2.0

package/dist/WebGLWidgetLayer-BBMuwzHq.cjs

@@ -0,0 +1,3560 @@
+//#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_hooks = require("./hooks-DHShH86C.cjs");
+let _jamesyong42_reactive_ecs = require("@jamesyong42/reactive-ecs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _react_three_fiber = require("@react-three/fiber");
+let three = require("three");
+let three$1 = __toESM(three, 1);
+three = __toESM(three);
+//#region src/archetype.ts
+function createArchetypeRegistry(archetypes = []) {
+	const map = /* @__PURE__ */ new Map();
+	for (const a of archetypes) map.set(a.id, a);
+	return {
+		register(a) {
+			map.set(a.id, a);
+		},
+		get(id) {
+			return map.get(id) ?? null;
+		},
+		getAll() {
+			return [...map.values()];
+		}
+	};
+}
+//#endregion
+//#region src/commands.ts
+var CommandBuffer = class {
+	undoStack = [];
+	redoStack = [];
+	currentGroup = null;
+	/** Start grouping commands (e.g., on pointerdown). All commands until endGroup() are one undo step. */
+	beginGroup() {
+		if (this.currentGroup !== null) this.endGroup();
+		this.currentGroup = [];
+	}
+	/** Execute a command and record it for undo. */
+	execute(command, world) {
+		command.execute(world);
+		if (this.currentGroup) this.currentGroup.push(command);
+		else {
+			this.undoStack.push([command]);
+			this.redoStack.length = 0;
+		}
+	}
+	/** Close the current group — all commands since beginGroup() become one undo step. */
+	endGroup() {
+		if (this.currentGroup && this.currentGroup.length > 0) {
+			this.undoStack.push(this.currentGroup);
+			this.redoStack.length = 0;
+		}
+		this.currentGroup = null;
+	}
+	/** Undo the last command group. */
+	undo(world) {
+		if (this.currentGroup) this.endGroup();
+		const group = this.undoStack.pop();
+		if (!group) return false;
+		for (let i = group.length - 1; i >= 0; i--) group[i].undo(world);
+		this.redoStack.push(group);
+		return true;
+	}
+	/** Redo the last undone command group. */
+	redo(world) {
+		const group = this.redoStack.pop();
+		if (!group) return false;
+		for (const cmd of group) cmd.execute(world);
+		this.undoStack.push(group);
+		return true;
+	}
+	canUndo() {
+		return this.undoStack.length > 0 || this.currentGroup !== null && this.currentGroup.length > 0;
+	}
+	canRedo() {
+		return this.redoStack.length > 0;
+	}
+	clear() {
+		this.undoStack.length = 0;
+		this.redoStack.length = 0;
+		this.currentGroup = null;
+	}
+	get undoSize() {
+		return this.undoStack.length;
+	}
+	get redoSize() {
+		return this.redoStack.length;
+	}
+};
+var MoveCommand = class {
+	beforePositions = /* @__PURE__ */ new Map();
+	afterPositions = /* @__PURE__ */ new Map();
+	captured = false;
+	constructor(entityIds, dx, dy, transformType) {
+		this.entityIds = entityIds;
+		this.dx = dx;
+		this.dy = dy;
+		this.transformType = transformType;
+	}
+	execute(world) {
+		if (!this.captured) {
+			for (const id of this.entityIds) {
+				const t = world.getComponent(id, this.transformType);
+				if (t) {
+					this.beforePositions.set(id, {
+						x: t.x,
+						y: t.y
+					});
+					this.afterPositions.set(id, {
+						x: t.x + this.dx,
+						y: t.y + this.dy
+					});
+				}
+			}
+			this.captured = true;
+		}
+		for (const [id, pos] of this.afterPositions) world.setComponent(id, this.transformType, {
+			x: pos.x,
+			y: pos.y
+		});
+	}
+	undo(world) {
+		for (const [id, pos] of this.beforePositions) world.setComponent(id, this.transformType, {
+			x: pos.x,
+			y: pos.y
+		});
+	}
+};
+var ResizeCommand = class {
+	constructor(entityId, before, after, transformType) {
+		this.entityId = entityId;
+		this.before = before;
+		this.after = after;
+		this.transformType = transformType;
+		this.after = {
+			...after,
+			width: Math.max(20, after.width),
+			height: Math.max(20, after.height)
+		};
+	}
+	execute(world) {
+		world.setComponent(this.entityId, this.transformType, this.after);
+	}
+	undo(world) {
+		world.setComponent(this.entityId, this.transformType, this.before);
+	}
+};
+var SetComponentCommand = class {
+	constructor(entityId, type, before, after) {
+		this.entityId = entityId;
+		this.type = type;
+		this.before = before;
+		this.after = after;
+	}
+	execute(world) {
+		world.setComponent(this.entityId, this.type, this.after);
+	}
+	undo(world) {
+		world.setComponent(this.entityId, this.type, this.before);
+	}
+};
+//#endregion
+//#region src/math.ts
+/** Convert WorldBounds-shaped data to AABB */
+function worldBoundsToAABB(wb) {
+	return {
+		minX: wb.worldX,
+		minY: wb.worldY,
+		maxX: wb.worldX + wb.worldWidth,
+		maxY: wb.worldY + wb.worldHeight
+	};
+}
+/** Test if two AABBs overlap */
+function intersectsAABB(a, b) {
+	return a.maxX >= b.minX && a.minX <= b.maxX && a.maxY >= b.minY && a.minY <= b.maxY;
+}
+/** Test if a point is inside an AABB */
+function pointInAABB(px, py, a) {
+	return px >= a.minX && px <= a.maxX && py >= a.minY && py <= a.maxY;
+}
+/** Convert screen coordinates to world coordinates */
+function screenToWorld(screenX, screenY, camera) {
+	return {
+		x: screenX / camera.zoom + camera.x,
+		y: screenY / camera.zoom + camera.y
+	};
+}
+/** Convert world coordinates to screen coordinates */
+function worldToScreen(worldX, worldY, camera) {
+	return {
+		x: (worldX - camera.x) * camera.zoom,
+		y: (worldY - camera.y) * camera.zoom
+	};
+}
+/** Clamp a value between min and max */
+function clamp(value, min, max) {
+	return Math.max(min, Math.min(max, value));
+}
+//#endregion
+//#region src/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;
+	webglGridMs = 0;
+	webglSelectionMs = 0;
+	webglDrawCalls = 0;
+	webglTriangles = 0;
+	webglSelectionFrames = 0;
+	webglSnapGuides = 0;
+	webglSpacingIndicators = 0;
+	webglDomPositionsUpdated = 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.webglGridMs = 0;
+		this.webglSelectionMs = 0;
+		this.webglDrawCalls = 0;
+		this.webglTriangles = 0;
+		this.webglSelectionFrames = 0;
+		this.webglSnapGuides = 0;
+		this.webglSpacingIndicators = 0;
+		this.webglDomPositionsUpdated = 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. */
+	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`);
+			if (pass === "grid") this.webglGridMs = measure.duration;
+			else this.webglSelectionMs = 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.
+	*/
+	recordWebGLStats(stats) {
+		if (!this.enabled) return;
+		this.webglDrawCalls = stats.drawCalls;
+		this.webglTriangles = stats.triangles;
+		this.webglSelectionFrames = stats.selectionFrames;
+		this.webglSnapGuides = stats.snapGuides;
+		this.webglSpacingIndicators = stats.spacingIndicators;
+		this.webglDomPositionsUpdated = stats.domPositionsUpdated;
+	}
+	/** 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: this.webglGridMs,
+				selectionMs: this.webglSelectionMs,
+				drawCalls: this.webglDrawCalls,
+				triangles: this.webglTriangles,
+				selectionFrames: this.webglSelectionFrames,
+				snapGuides: this.webglSnapGuides,
+				spacingIndicators: this.webglSpacingIndicators,
+				domPositionsUpdated: this.webglDomPositionsUpdated
+			}
+		};
+		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).sort((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).sort((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).sort((a, b) => a - b);
+		const selTimes = samples.map((s) => s.webgl.selectionMs).sort((a, b) => a - b);
+		const combinedTimes = samples.map((s) => s.webgl.gridMs + s.webgl.selectionMs).sort((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,
+			sampleCount: 0
+		};
+		const dts = samples.map((s) => s.dtMs).sort((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];
+		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,
+			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 src/react/registry.ts
+function createWidgetRegistry(defs = []) {
+	const map = /* @__PURE__ */ new Map();
+	for (const def of defs) map.set(def.type, def);
+	return {
+		register(def) {
+			map.set(def.type, def);
+		},
+		get(type) {
+			return map.get(type) ?? null;
+		},
+		getAll() {
+			return [...map.values()];
+		}
+	};
+}
+/** Narrows to the R3F variant. */
+function isR3FWidget(widget) {
+	return widget.surface === "webgl";
+}
+//#endregion
+//#region src/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].sort((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 ../../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/spatial.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/systems.ts
+/**
+* Stamp Transform2D width/height from Card.preset.
+* Runs before transformPropagateSystem so WorldBounds reflect the preset
+* size in the same tick. Manual writes to Transform2D.width/height on a
+* card entity get overwritten — to change card size, update `Card.preset`.
+*/
+const cardSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "card",
+	before: "transformPropagate",
+	execute: (world) => {
+		const resource = world.getResource(require_hooks.CardPresetsResource);
+		if (!resource) return;
+		const { presets } = resource;
+		for (const entity of world.query(require_hooks.Card, require_hooks.Transform2D)) {
+			const card = world.getComponent(entity, require_hooks.Card);
+			const transform = world.getComponent(entity, require_hooks.Transform2D);
+			if (!card || !transform) continue;
+			const size = presets[card.preset];
+			if (!size) continue;
+			if (transform.width !== size.width || transform.height !== size.height) world.setComponent(entity, require_hooks.Transform2D, {
+				width: size.width,
+				height: size.height
+			});
+		}
+	}
+});
+/**
+* Propagate transforms down the parent-child hierarchy.
+* Computes WorldBounds for every entity with Transform2D.
+* Uses change detection — only processes dirty entities and their descendants.
+*/
+const transformPropagateSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "transformPropagate",
+	execute: (world) => {
+		const changed = world.queryChanged(require_hooks.Transform2D);
+		const processed = /* @__PURE__ */ new Set();
+		for (const entity of changed) propagateEntity(world, entity, processed);
+		for (const entity of world.queryAdded(require_hooks.Transform2D)) if (!processed.has(entity)) propagateEntity(world, entity, processed);
+	}
+});
+function propagateEntity(world, entity, processed) {
+	if (processed.has(entity)) return;
+	processed.add(entity);
+	const transform = world.getComponent(entity, require_hooks.Transform2D);
+	if (!transform) return;
+	let worldX = transform.x;
+	let worldY = transform.y;
+	const parentComp = world.getComponent(entity, require_hooks.Parent);
+	if (parentComp && world.entityExists(parentComp.id)) {
+		if (!processed.has(parentComp.id)) propagateEntity(world, parentComp.id, processed);
+		const parentBounds = world.getComponent(parentComp.id, require_hooks.WorldBounds);
+		if (parentBounds) {
+			worldX += parentBounds.worldX;
+			worldY += parentBounds.worldY;
+		}
+	}
+	if (!world.hasComponent(entity, require_hooks.WorldBounds)) world.addComponent(entity, require_hooks.WorldBounds, {
+		worldX,
+		worldY,
+		worldWidth: transform.width,
+		worldHeight: transform.height
+	});
+	else world.setComponent(entity, require_hooks.WorldBounds, {
+		worldX,
+		worldY,
+		worldWidth: transform.width,
+		worldHeight: transform.height
+	});
+	const children = world.getComponent(entity, require_hooks.Children);
+	if (children) for (const childId of children.ids) propagateEntity(world, childId, processed);
+}
+/**
+* Specification for the 8 resize handles spawned around a selected resizable.
+* anchorX/anchorY are in 0..1 parent-local coordinates.
+* Corners (layer 15) sit above edges (layer 10) so corners win overlapping hit tests.
+*/
+const HANDLE_SPECS = [
+	{
+		pos: "nw",
+		ax: 0,
+		ay: 0,
+		layer: 15,
+		cursor: "nw-resize"
+	},
+	{
+		pos: "ne",
+		ax: 1,
+		ay: 0,
+		layer: 15,
+		cursor: "ne-resize"
+	},
+	{
+		pos: "sw",
+		ax: 0,
+		ay: 1,
+		layer: 15,
+		cursor: "sw-resize"
+	},
+	{
+		pos: "se",
+		ax: 1,
+		ay: 1,
+		layer: 15,
+		cursor: "se-resize"
+	},
+	{
+		pos: "n",
+		ax: .5,
+		ay: 0,
+		layer: 10,
+		cursor: "n-resize"
+	},
+	{
+		pos: "s",
+		ax: .5,
+		ay: 1,
+		layer: 10,
+		cursor: "s-resize"
+	},
+	{
+		pos: "w",
+		ax: 0,
+		ay: .5,
+		layer: 10,
+		cursor: "w-resize"
+	},
+	{
+		pos: "e",
+		ax: 1,
+		ay: .5,
+		layer: 10,
+		cursor: "e-resize"
+	}
+];
+function spawnResizeHandles(world, parentId) {
+	const S = 16;
+	const parentActive = world.hasTag(parentId, require_hooks.Active);
+	const ids = [];
+	for (const spec of HANDLE_SPECS) {
+		const id = world.createEntity();
+		world.addComponent(id, require_hooks.Parent, { id: parentId });
+		world.addComponent(id, require_hooks.Hitbox, {
+			anchorX: spec.ax,
+			anchorY: spec.ay,
+			width: S,
+			height: S
+		});
+		world.addComponent(id, require_hooks.InteractionRole, {
+			layer: spec.layer,
+			role: {
+				type: "resize",
+				handle: spec.pos
+			}
+		});
+		world.addComponent(id, require_hooks.CursorHint, {
+			hover: spec.cursor,
+			active: spec.cursor
+		});
+		if (parentActive) world.addTag(id, require_hooks.Active);
+		ids.push(id);
+	}
+	world.addComponent(parentId, require_hooks.HandleSet, { ids });
+}
+function despawnHandles(world, parentId) {
+	const set = world.getComponent(parentId, require_hooks.HandleSet);
+	if (!set) return;
+	for (const id of set.ids) if (world.entityExists(id)) world.destroyEntity(id);
+	world.removeComponent(parentId, require_hooks.HandleSet);
+}
+/**
+* Spawn/despawn resize handle child entities based on selection state.
+* Handles appear only when exactly one Resizable entity is Selected.
+* Runs after transformPropagate (parent bounds fresh) and before hitboxWorldBounds
+* (so newly-spawned handles get their WorldBounds in the same tick).
+*
+* Phase 5: handles now drive interaction directly via the unified hit test —
+* InteractionRole + Hitbox on each handle entity replaces hitTestResizeHandle.
+*/
+const handleSyncSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "handleSync",
+	after: "transformPropagate",
+	before: "hitboxWorldBounds",
+	execute: (world) => {
+		const selectedResizable = [];
+		for (const entity of world.queryTagged(require_hooks.Resizable)) if (world.hasTag(entity, require_hooks.Selected)) selectedResizable.push(entity);
+		const shouldSpawn = selectedResizable.length === 1 ? selectedResizable[0] : null;
+		const owners = world.query(require_hooks.HandleSet).slice();
+		for (const parentId of owners) if (parentId !== shouldSpawn) despawnHandles(world, parentId);
+		if (shouldSpawn !== null && !world.hasComponent(shouldSpawn, require_hooks.HandleSet)) spawnResizeHandles(world, shouldSpawn);
+		for (const entity of world.query(require_hooks.Hitbox, require_hooks.Parent).slice()) {
+			const parent = world.getComponent(entity, require_hooks.Parent);
+			if (!parent || !world.entityExists(parent.id)) {
+				const role = world.getComponent(entity, require_hooks.InteractionRole);
+				if (role && (role.role.type === "resize" || role.role.type === "rotate")) world.destroyEntity(entity);
+			}
+		}
+	}
+});
+/**
+* Derive WorldBounds for every entity with Hitbox + Parent from the parent's
+* WorldBounds + anchor offset. Runs after transformPropagateSystem so parent
+* WorldBounds are up to date. No-op until Phase 4 spawns entities with Hitbox.
+*/
+const hitboxWorldBoundsSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "hitboxWorldBounds",
+	after: "transformPropagate",
+	execute: (world) => {
+		for (const entity of world.query(require_hooks.Hitbox, require_hooks.Parent)) {
+			const parentRef = world.getComponent(entity, require_hooks.Parent);
+			if (!parentRef) continue;
+			if (!world.entityExists(parentRef.id)) continue;
+			const parentWB = world.getComponent(parentRef.id, require_hooks.WorldBounds);
+			if (!parentWB) continue;
+			const hb = world.getComponent(entity, require_hooks.Hitbox);
+			if (!hb) continue;
+			const cx = parentWB.worldX + parentWB.worldWidth * hb.anchorX;
+			const cy = parentWB.worldY + parentWB.worldHeight * hb.anchorY;
+			const next = {
+				worldX: cx - hb.width / 2,
+				worldY: cy - hb.height / 2,
+				worldWidth: hb.width,
+				worldHeight: hb.height
+			};
+			if (world.hasComponent(entity, require_hooks.WorldBounds)) world.setComponent(entity, require_hooks.WorldBounds, next);
+			else world.addComponent(entity, require_hooks.WorldBounds, next);
+		}
+	}
+});
+/**
+* Filter entities to the active navigation layer.
+* Runs on nav-stack changes (full refilter) and incrementally whenever new
+* Transform2D entities are added (so runtime spawns land in the active layer).
+*/
+const navigationFilterSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "navigationFilter",
+	after: "transformPropagate",
+	execute: (world) => {
+		const navStack = world.getResource(require_hooks.NavigationStackResource);
+		const stackChanged = navStack.changed;
+		const newEntities = world.queryAdded(require_hooks.Transform2D);
+		if (!stackChanged && newEntities.length === 0) return;
+		const activeContainer = navStack.frames[navStack.frames.length - 1].containerId;
+		const belongsToCurrentFrame = (entity) => {
+			if (activeContainer === null) return !world.hasComponent(entity, require_hooks.Parent);
+			return world.getComponent(entity, require_hooks.Parent)?.id === activeContainer;
+		};
+		if (stackChanged) {
+			for (const entity of world.queryTagged(require_hooks.Active)) world.removeTag(entity, require_hooks.Active);
+			for (const entity of world.query(require_hooks.Transform2D)) if (belongsToCurrentFrame(entity)) world.addTag(entity, require_hooks.Active);
+			navStack.changed = false;
+		} else for (const entity of newEntities) if (belongsToCurrentFrame(entity) && !world.hasTag(entity, require_hooks.Active)) world.addTag(entity, require_hooks.Active);
+	}
+});
+/**
+* Viewport culling — mark Active entities that intersect the viewport as Visible.
+*/
+const cullSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "cull",
+	after: "navigationFilter",
+	execute: (world) => {
+		const camera = world.getResource(require_hooks.CameraResource);
+		const viewport = world.getResource(require_hooks.ViewportResource);
+		if (viewport.width === 0 || viewport.height === 0) return;
+		const spatialIndex = world.getResource(SpatialIndexResource).instance;
+		const overscan = 200 / camera.zoom;
+		const vpWorldAABB = {
+			minX: camera.x - overscan,
+			minY: camera.y - overscan,
+			maxX: camera.x + viewport.width / camera.zoom + overscan,
+			maxY: camera.y + viewport.height / camera.zoom + overscan
+		};
+		for (const entity of world.queryTagged(require_hooks.Visible)) world.removeTag(entity, require_hooks.Visible);
+		if (spatialIndex && spatialIndex.size > 0) {
+			const candidates = spatialIndex.search(vpWorldAABB);
+			for (const entry of candidates) if (world.hasTag(entry.entityId, require_hooks.Active)) world.addTag(entry.entityId, require_hooks.Visible);
+		} else for (const entity of world.queryTagged(require_hooks.Active)) {
+			const wb = world.getComponent(entity, require_hooks.WorldBounds);
+			if (wb && intersectsAABB(worldBoundsToAABB(wb), vpWorldAABB)) world.addTag(entity, require_hooks.Visible);
+		}
+	}
+});
+/**
+* Compute breakpoints for visible widgets based on screen size.
+* Fix #10: Always update screenWidth/screenHeight even if breakpoint tier doesn't change.
+*/
+const breakpointSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "breakpoint",
+	after: "cull",
+	execute: (world) => {
+		const camera = world.getResource(require_hooks.CameraResource);
+		const config = world.getResource(require_hooks.BreakpointConfigResource);
+		for (const entity of world.query(require_hooks.Widget, require_hooks.Visible)) {
+			const transform = world.getComponent(entity, require_hooks.Transform2D);
+			if (!transform) continue;
+			const screenWidth = transform.width * camera.zoom;
+			const screenHeight = transform.height * camera.zoom;
+			let bp;
+			if (screenWidth < config.micro) bp = "micro";
+			else if (screenWidth < config.compact) bp = "compact";
+			else if (screenWidth < config.normal) bp = "normal";
+			else if (screenWidth < config.expanded) bp = "expanded";
+			else bp = "detailed";
+			const existing = world.getComponent(entity, require_hooks.WidgetBreakpoint);
+			if (!existing) world.addComponent(entity, require_hooks.WidgetBreakpoint, {
+				current: bp,
+				screenWidth,
+				screenHeight
+			});
+			else {
+				const bpChanged = existing.current !== bp;
+				const sizeChanged = Math.round(existing.screenWidth) !== Math.round(screenWidth) || Math.round(existing.screenHeight) !== Math.round(screenHeight);
+				if (bpChanged || sizeChanged) world.setComponent(entity, require_hooks.WidgetBreakpoint, {
+					current: bp,
+					screenWidth,
+					screenHeight
+				});
+			}
+		}
+	}
+});
+/**
+* Sort visible entities by z-index (handled in engine.tick()).
+*/
+const sortSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "sort",
+	after: "breakpoint",
+	execute: (_world) => {}
+});
+//#endregion
+//#region src/engine.ts
+/** ECS resource holding the SpatialIndex instance for viewport culling and hit testing. */
+const SpatialIndexResource = (0, _jamesyong42_reactive_ecs.defineResource)("SpatialIndex", { instance: null });
+/**
+* Creates a new LayoutEngine instance with the given configuration.
+* This is the main entry point for the infinite canvas library.
+*/
+function createLayoutEngine(config) {
+	const world = (0, _jamesyong42_reactive_ecs.createWorld)();
+	const scheduler = new _jamesyong42_reactive_ecs.SystemScheduler();
+	const spatialIndex = new SpatialIndex();
+	const profiler = new Profiler();
+	scheduler.profiler = profiler;
+	world.setResource(SpatialIndexResource, { instance: spatialIndex });
+	const commandBuffer = new CommandBuffer();
+	const widgetRegistry = createWidgetRegistry();
+	const archetypeRegistry = createArchetypeRegistry();
+	if (config?.zoom) world.setResource(require_hooks.ZoomConfigResource, config.zoom);
+	if (config?.breakpoints) world.setResource(require_hooks.BreakpointConfigResource, config.breakpoints);
+	if (config?.cardPresets) {
+		const current = world.getResource(require_hooks.CardPresetsResource);
+		world.setResource(require_hooks.CardPresetsResource, {
+			presets: {
+				...current.presets,
+				...config.cardPresets.presets
+			},
+			gap: config.cardPresets.gap ?? current.gap
+		});
+	}
+	let snapEnabledInit = true;
+	let snapThresholdInit = 5;
+	if (config?.snap?.enabled !== void 0) snapEnabledInit = config.snap.enabled;
+	if (config?.snap?.threshold !== void 0) snapThresholdInit = config.snap.threshold;
+	scheduler.register(cardSystem);
+	scheduler.register(transformPropagateSystem);
+	scheduler.register(handleSyncSystem);
+	scheduler.register(hitboxWorldBoundsSystem);
+	scheduler.register(navigationFilterSystem);
+	scheduler.register(cullSystem);
+	scheduler.register(breakpointSystem);
+	scheduler.register(sortSystem);
+	const unsubscribers = [];
+	unsubscribers.push(world.onComponentChanged(require_hooks.WorldBounds, (entityId, _prev, wb) => {
+		if (wb) spatialIndex.upsert(entityId, worldBoundsToAABB(wb));
+	}));
+	unsubscribers.push(world.onEntityDestroyed((entity) => {
+		spatialIndex.remove(entity);
+	}));
+	function refreshInteractionRole(entity) {
+		const current = world.getComponent(entity, require_hooks.InteractionRole);
+		if (current && current.role.type !== "drag" && current.role.type !== "select" && current.role.type !== "canvas") return;
+		const hasDraggable = world.hasTag(entity, require_hooks.Draggable);
+		const hasSelectable = world.hasTag(entity, require_hooks.Selectable);
+		const desiredRole = hasDraggable ? { type: "drag" } : hasSelectable ? { type: "select" } : null;
+		if (desiredRole === null) {
+			if (current) world.removeComponent(entity, require_hooks.InteractionRole);
+			if (world.hasComponent(entity, require_hooks.CursorHint)) world.removeComponent(entity, require_hooks.CursorHint);
+			return;
+		}
+		if (!current) world.addComponent(entity, require_hooks.InteractionRole, {
+			layer: 5,
+			role: desiredRole
+		});
+		else if (current.role.type !== desiredRole.type) world.setComponent(entity, require_hooks.InteractionRole, { role: desiredRole });
+		if (desiredRole.type === "drag" && !world.hasComponent(entity, require_hooks.CursorHint)) world.addComponent(entity, require_hooks.CursorHint, {
+			hover: "grab",
+			active: "grabbing"
+		});
+	}
+	unsubscribers.push(world.onTagAdded(require_hooks.Draggable, refreshInteractionRole));
+	unsubscribers.push(world.onTagRemoved(require_hooks.Draggable, refreshInteractionRole));
+	unsubscribers.push(world.onTagAdded(require_hooks.Selectable, refreshInteractionRole));
+	unsubscribers.push(world.onTagRemoved(require_hooks.Selectable, refreshInteractionRole));
+	if (config?.widgets) for (const w of config.widgets) widgetRegistry.register(w);
+	if (config?.archetypes) for (const a of config.archetypes) archetypeRegistry.register(a);
+	world.setResource(require_hooks.NavigationStackResource, { changed: true });
+	let inputState = { mode: "idle" };
+	let hoveredEntity = null;
+	let snapEnabled = snapEnabledInit;
+	let snapThreshold = snapThresholdInit;
+	let currentSnap = {
+		snapDx: 0,
+		snapDy: 0,
+		guides: [],
+		spacings: []
+	};
+	let dirty = false;
+	let cameraChangedThisTick = false;
+	let selectionChangedThisTick = false;
+	let prevVisible = /* @__PURE__ */ new Set();
+	let currentVisible = [];
+	let frameChanges = {
+		positionsChanged: [],
+		breakpointsChanged: [],
+		entered: [],
+		exited: [],
+		cameraChanged: false,
+		navigationChanged: false,
+		selectionChanged: false
+	};
+	function markDirtyInternal() {
+		dirty = true;
+	}
+	function hitTest(screenX, screenY) {
+		const worldPos = screenToWorld(screenX, screenY, world.getResource(require_hooks.CameraResource));
+		const candidates = spatialIndex.searchPoint(worldPos.x, worldPos.y, 0);
+		const interactable = [];
+		for (const c of candidates) {
+			if (!world.hasTag(c.entityId, require_hooks.Active)) continue;
+			const role = world.getComponent(c.entityId, require_hooks.InteractionRole);
+			if (!role) continue;
+			interactable.push({
+				entityId: c.entityId,
+				role
+			});
+		}
+		if (interactable.length === 0) return null;
+		interactable.sort((a, b) => {
+			if (b.role.layer !== a.role.layer) return b.role.layer - a.role.layer;
+			const zA = world.getComponent(a.entityId, require_hooks.ZIndex)?.value ?? 0;
+			return (world.getComponent(b.entityId, require_hooks.ZIndex)?.value ?? 0) - zA;
+		});
+		return interactable[0];
+	}
+	/**
+	* RFC-001 Phase 7: derive the root-container cursor from input state +
+	* hover, write to CursorResource. Closes over `inputState`, `hoveredEntity`
+	* and `world`, which is why it's a plain function instead of a SystemDef.
+	* Called from engine.tick() after scheduler.execute(world).
+	*/
+	function cursorSystem() {
+		let cursor = "default";
+		switch (inputState.mode) {
+			case "idle":
+			case "marquee":
+				if (hoveredEntity !== null) cursor = world.getComponent(hoveredEntity, require_hooks.CursorHint)?.hover ?? "default";
+				break;
+			case "tracking":
+				cursor = world.getComponent(inputState.entityId, require_hooks.CursorHint)?.hover ?? "default";
+				break;
+			case "dragging":
+				cursor = world.getComponent(inputState.entityId, require_hooks.CursorHint)?.active ?? "grabbing";
+				break;
+			case "resizing":
+				cursor = world.getComponent(inputState.handleEntityId, require_hooks.CursorHint)?.active ?? "default";
+				break;
+		}
+		world.setResource(require_hooks.CursorResource, { cursor });
+	}
+	function selectEntity(entity, additive) {
+		if (!world.hasTag(entity, require_hooks.Selectable)) return;
+		if (additive) if (world.hasTag(entity, require_hooks.Selected)) world.removeTag(entity, require_hooks.Selected);
+		else world.addTag(entity, require_hooks.Selected);
+		else {
+			for (const e of world.queryTagged(require_hooks.Selected)) if (e !== entity) world.removeTag(e, require_hooks.Selected);
+			world.addTag(entity, require_hooks.Selected);
+		}
+		selectionChangedThisTick = true;
+	}
+	function clearSelection() {
+		const selected = world.queryTagged(require_hooks.Selected);
+		if (selected.length > 0) {
+			for (const e of selected) world.removeTag(e, require_hooks.Selected);
+			selectionChangedThisTick = true;
+		}
+	}
+	const engine = {
+		world,
+		createEntity(inits) {
+			const entity = world.createEntity();
+			if (inits) for (const init of inits) {
+				const type = init[0];
+				if (type.__kind === "tag") world.addTag(entity, type);
+				else world.addComponent(entity, type, init[1] ?? {});
+			}
+			markDirtyInternal();
+			return entity;
+		},
+		spawn(id, opts = {}) {
+			const archetype = archetypeRegistry.get(id);
+			const widgetTypeId = archetype?.widget ?? id;
+			const widget = widgetRegistry.get(widgetTypeId);
+			const surface = widget?.surface ?? "dom";
+			const defaultData = widget?.defaultData ?? {};
+			const defaultSize = archetype?.defaultSize ?? widget?.defaultSize ?? {
+				width: 100,
+				height: 100
+			};
+			const position = opts.at ?? {
+				x: 0,
+				y: 0
+			};
+			const size = opts.size ?? defaultSize;
+			const data = {
+				...defaultData,
+				...opts.data
+			};
+			const inits = [
+				[require_hooks.Transform2D, {
+					x: position.x,
+					y: position.y,
+					width: size.width,
+					height: size.height,
+					rotation: opts.rotation ?? 0
+				}],
+				[require_hooks.Widget, {
+					surface,
+					type: widgetTypeId
+				}],
+				[require_hooks.WidgetData, { data }],
+				[require_hooks.ZIndex, { value: opts.zIndex ?? 0 }]
+			];
+			if (archetype?.components) for (const init of archetype.components) inits.push(init);
+			if (opts.parent !== void 0) inits.push([require_hooks.Parent, { id: opts.parent }]);
+			const interactiveConfig = archetype?.interactive;
+			const caps = interactiveConfig === false ? {
+				selectable: false,
+				draggable: false,
+				resizable: false,
+				selectionFrame: false
+			} : interactiveConfig === void 0 || interactiveConfig === true ? {
+				selectable: true,
+				draggable: true,
+				resizable: true,
+				selectionFrame: true
+			} : (() => {
+				const selectable = interactiveConfig.selectable ?? false;
+				return {
+					selectable,
+					draggable: interactiveConfig.draggable ?? false,
+					resizable: interactiveConfig.resizable ?? false,
+					selectionFrame: interactiveConfig.selectionFrame ?? selectable
+				};
+			})();
+			if (caps.selectable) inits.push([require_hooks.Selectable]);
+			if (caps.draggable) inits.push([require_hooks.Draggable]);
+			if (caps.resizable) inits.push([require_hooks.Resizable]);
+			if (caps.selectionFrame) inits.push([require_hooks.SelectionFrame]);
+			if (archetype?.tags) for (const tag of archetype.tags) inits.push([tag]);
+			return engine.createEntity(inits);
+		},
+		spawnAtCameraCenter(id, opts = {}) {
+			const camera = world.getResource(require_hooks.CameraResource);
+			const viewport = world.getResource(require_hooks.ViewportResource);
+			const centerX = camera.x + viewport.width / (2 * camera.zoom);
+			const centerY = camera.y + viewport.height / (2 * camera.zoom);
+			const archetype = archetypeRegistry.get(id);
+			const widget = widgetRegistry.get(archetype?.widget ?? id);
+			const size = opts.size ?? archetype?.defaultSize ?? widget?.defaultSize ?? {
+				width: 100,
+				height: 100
+			};
+			return engine.spawn(id, {
+				...opts,
+				at: {
+					x: centerX - size.width / 2,
+					y: centerY - size.height / 2
+				}
+			});
+		},
+		registerWidget(widget) {
+			widgetRegistry.register(widget);
+		},
+		getWidget(type) {
+			return widgetRegistry.get(type);
+		},
+		getWidgets() {
+			return widgetRegistry.getAll();
+		},
+		registerArchetype(archetype) {
+			archetypeRegistry.register(archetype);
+		},
+		getArchetype(id) {
+			return archetypeRegistry.get(id);
+		},
+		destroyEntity(id) {
+			const set = world.getComponent(id, require_hooks.HandleSet);
+			if (set) {
+				for (const handleId of set.ids) if (world.entityExists(handleId)) {
+					spatialIndex.remove(handleId);
+					world.destroyEntity(handleId);
+				}
+			}
+			spatialIndex.remove(id);
+			world.destroyEntity(id);
+			markDirtyInternal();
+		},
+		get(entity, type) {
+			return world.getComponent(entity, type);
+		},
+		set(entity, type, data) {
+			world.setComponent(entity, type, data);
+			markDirtyInternal();
+		},
+		has(entity, type) {
+			if (type.__kind === "tag") return world.hasTag(entity, type);
+			return world.hasComponent(entity, type);
+		},
+		addComponent(entity, type, data) {
+			world.addComponent(entity, type, data ?? type.defaults);
+			markDirtyInternal();
+		},
+		removeComponent(entity, type) {
+			world.removeComponent(entity, type);
+			markDirtyInternal();
+		},
+		addTag(entity, type) {
+			world.addTag(entity, type);
+			markDirtyInternal();
+		},
+		removeTag(entity, type) {
+			world.removeTag(entity, type);
+			markDirtyInternal();
+		},
+		getSchemaFor(entity) {
+			const w = world.getComponent(entity, require_hooks.Widget);
+			if (!w) return void 0;
+			return widgetRegistry.get(w.type)?.schema;
+		},
+		registerSystem(system) {
+			scheduler.register(system);
+		},
+		removeSystem(name) {
+			scheduler.remove(name);
+		},
+		getCamera() {
+			return world.getResource(require_hooks.CameraResource);
+		},
+		panBy(dx, dy) {
+			const camera = world.getResource(require_hooks.CameraResource);
+			camera.x -= dx / camera.zoom;
+			camera.y -= dy / camera.zoom;
+			cameraChangedThisTick = true;
+			markDirtyInternal();
+		},
+		panTo(worldX, worldY) {
+			const camera = world.getResource(require_hooks.CameraResource);
+			const viewport = world.getResource(require_hooks.ViewportResource);
+			camera.x = worldX - viewport.width / (2 * camera.zoom);
+			camera.y = worldY - viewport.height / (2 * camera.zoom);
+			cameraChangedThisTick = true;
+			markDirtyInternal();
+		},
+		zoomAtPoint(screenX, screenY, delta) {
+			const camera = world.getResource(require_hooks.CameraResource);
+			const zoomConfig = world.getResource(require_hooks.ZoomConfigResource);
+			const worldBefore = screenToWorld(screenX, screenY, camera);
+			const newZoom = clamp(camera.zoom * (1 + delta), zoomConfig.min, zoomConfig.max);
+			camera.zoom = newZoom;
+			camera.x = worldBefore.x - screenX / newZoom;
+			camera.y = worldBefore.y - screenY / newZoom;
+			cameraChangedThisTick = true;
+			markDirtyInternal();
+		},
+		zoomTo(zoom) {
+			const camera = world.getResource(require_hooks.CameraResource);
+			const zoomConfig = world.getResource(require_hooks.ZoomConfigResource);
+			const viewport = world.getResource(require_hooks.ViewportResource);
+			const centerWorldX = camera.x + viewport.width / (2 * camera.zoom);
+			const centerWorldY = camera.y + viewport.height / (2 * camera.zoom);
+			camera.zoom = clamp(zoom, zoomConfig.min, zoomConfig.max);
+			camera.x = centerWorldX - viewport.width / (2 * camera.zoom);
+			camera.y = centerWorldY - viewport.height / (2 * camera.zoom);
+			cameraChangedThisTick = true;
+			markDirtyInternal();
+		},
+		zoomToFit(entityIds, padding = 50) {
+			const viewport = world.getResource(require_hooks.ViewportResource);
+			if (viewport.width === 0) return;
+			const entities = entityIds ?? world.queryTagged(require_hooks.Active);
+			if (entities.length === 0) return;
+			let minX = Number.POSITIVE_INFINITY;
+			let minY = Number.POSITIVE_INFINITY;
+			let maxX = Number.NEGATIVE_INFINITY;
+			let maxY = Number.NEGATIVE_INFINITY;
+			for (const e of entities) {
+				const wb = world.getComponent(e, require_hooks.WorldBounds);
+				if (!wb) continue;
+				minX = Math.min(minX, wb.worldX);
+				minY = Math.min(minY, wb.worldY);
+				maxX = Math.max(maxX, wb.worldX + wb.worldWidth);
+				maxY = Math.max(maxY, wb.worldY + wb.worldHeight);
+			}
+			if (!Number.isFinite(minX)) return;
+			const contentWidth = maxX - minX + padding * 2;
+			const contentHeight = maxY - minY + padding * 2;
+			const zoomConfig = world.getResource(require_hooks.ZoomConfigResource);
+			const zoom = clamp(Math.min(viewport.width / contentWidth, viewport.height / contentHeight), zoomConfig.min, zoomConfig.max);
+			const camera = world.getResource(require_hooks.CameraResource);
+			camera.zoom = zoom;
+			camera.x = minX - padding - (viewport.width / zoom - contentWidth) / 2;
+			camera.y = minY - padding - (viewport.height / zoom - contentHeight) / 2;
+			cameraChangedThisTick = true;
+			markDirtyInternal();
+		},
+		setViewport(width, height, dpr) {
+			world.setResource(require_hooks.ViewportResource, {
+				width,
+				height,
+				dpr: dpr ?? 1
+			});
+			markDirtyInternal();
+		},
+		execute(command) {
+			commandBuffer.execute(command, world);
+			markDirtyInternal();
+		},
+		beginCommandGroup() {
+			commandBuffer.beginGroup();
+		},
+		endCommandGroup() {
+			commandBuffer.endGroup();
+		},
+		undo() {
+			const did = commandBuffer.undo(world);
+			if (did) markDirtyInternal();
+			return did;
+		},
+		redo() {
+			const did = commandBuffer.redo(world);
+			if (did) markDirtyInternal();
+			return did;
+		},
+		canUndo() {
+			return commandBuffer.canUndo();
+		},
+		canRedo() {
+			return commandBuffer.canRedo();
+		},
+		handlePointerDown(screenX, screenY, _button, modifiers) {
+			const hit = hitTest(screenX, screenY);
+			if (!hit) {
+				clearSelection();
+				inputState = {
+					mode: "marquee",
+					startX: screenX,
+					startY: screenY
+				};
+				markDirtyInternal();
+				return { action: "capture-marquee" };
+			}
+			switch (hit.role.role.type) {
+				case "resize": {
+					const parentRef = world.getComponent(hit.entityId, require_hooks.Parent);
+					if (!parentRef) return { action: "passthrough" };
+					const parentId = parentRef.id;
+					const t = world.getComponent(parentId, require_hooks.Transform2D);
+					if (!t) return { action: "passthrough" };
+					commandBuffer.beginGroup();
+					inputState = {
+						mode: "resizing",
+						entityId: parentId,
+						handleEntityId: hit.entityId,
+						handle: hit.role.role.handle,
+						startX: screenX,
+						startY: screenY,
+						startBounds: {
+							x: t.x,
+							y: t.y,
+							width: t.width,
+							height: t.height
+						}
+					};
+					markDirtyInternal();
+					return {
+						action: "capture-resize",
+						handle: hit.role.role.handle
+					};
+				}
+				case "drag":
+					selectEntity(hit.entityId, modifiers.shift);
+					if (world.hasTag(hit.entityId, require_hooks.Draggable)) inputState = {
+						mode: "tracking",
+						entityId: hit.entityId,
+						startX: screenX,
+						startY: screenY
+					};
+					markDirtyInternal();
+					return { action: "passthrough-track-drag" };
+				case "select":
+					selectEntity(hit.entityId, modifiers.shift);
+					markDirtyInternal();
+					return { action: "passthrough" };
+				default: return { action: "passthrough" };
+			}
+		},
+		handlePointerMove(screenX, screenY, _modifiers) {
+			if (inputState.mode === "tracking") {
+				const dx = screenX - inputState.startX;
+				const dy = screenY - inputState.startY;
+				if (Math.abs(dx) > 4 || Math.abs(dy) > 4) {
+					const originalZIndices = /* @__PURE__ */ new Map();
+					let maxZ = 0;
+					for (const e of world.queryTagged(require_hooks.Active)) {
+						const z = world.getComponent(e, require_hooks.ZIndex);
+						if (z && z.value > maxZ) maxZ = z.value;
+					}
+					for (const e of world.queryTagged(require_hooks.Selected)) {
+						const z = world.getComponent(e, require_hooks.ZIndex);
+						originalZIndices.set(e, z?.value ?? 0);
+						world.setComponent(e, require_hooks.ZIndex, { value: maxZ + 1 });
+					}
+					const startPositions = /* @__PURE__ */ new Map();
+					for (const e of world.queryTagged(require_hooks.Selected)) {
+						const t = world.getComponent(e, require_hooks.Transform2D);
+						if (t) startPositions.set(e, {
+							x: t.x,
+							y: t.y
+						});
+					}
+					for (const e of startPositions.keys()) world.addTag(e, require_hooks.Dragging);
+					commandBuffer.beginGroup();
+					inputState = {
+						mode: "dragging",
+						entityId: inputState.entityId,
+						startScreenX: screenX,
+						startScreenY: screenY,
+						startPositions,
+						originalZIndices
+					};
+					markDirtyInternal();
+					return { action: "capture-drag" };
+				}
+				return { action: "passthrough" };
+			}
+			if (inputState.mode === "dragging") {
+				const camera = world.getResource(require_hooks.CameraResource);
+				const totalDx = (screenX - inputState.startScreenX) / camera.zoom;
+				const totalDy = (screenY - inputState.startScreenY) / camera.zoom;
+				if (snapEnabled && inputState.startPositions.size > 0) {
+					const draggedIds = new Set(inputState.startPositions.keys());
+					const firstId = inputState.startPositions.keys().next().value;
+					const firstStart = inputState.startPositions.get(firstId);
+					const firstT = world.getComponent(firstId, require_hooks.Transform2D);
+					if (firstT && firstStart) {
+						const draggedBounds = {
+							x: firstStart.x + totalDx,
+							y: firstStart.y + totalDy,
+							width: firstT.width,
+							height: firstT.height
+						};
+						const refs = [];
+						for (const entity of world.queryTagged(require_hooks.Active)) {
+							if (draggedIds.has(entity)) continue;
+							if (world.hasComponent(entity, require_hooks.Hitbox)) continue;
+							const wb = world.getComponent(entity, require_hooks.WorldBounds);
+							if (wb) refs.push({
+								x: wb.worldX,
+								y: wb.worldY,
+								width: wb.worldWidth,
+								height: wb.worldHeight
+							});
+						}
+						currentSnap = computeSnapGuides(draggedBounds, refs, snapThreshold / camera.zoom);
+					}
+				} else currentSnap = {
+					snapDx: 0,
+					snapDy: 0,
+					guides: [],
+					spacings: []
+				};
+				const finalDx = totalDx + currentSnap.snapDx;
+				const finalDy = totalDy + currentSnap.snapDy;
+				for (const [e, start] of inputState.startPositions) world.setComponent(e, require_hooks.Transform2D, {
+					x: start.x + finalDx,
+					y: start.y + finalDy
+				});
+				markDirtyInternal();
+				return { action: "capture-drag" };
+			}
+			if (inputState.mode === "resizing") {
+				const camera = world.getResource(require_hooks.CameraResource);
+				const dx = (screenX - inputState.startX) / camera.zoom;
+				const dy = (screenY - inputState.startY) / camera.zoom;
+				const { x, y, width: w, height: h } = inputState.startBounds;
+				const handle = inputState.handle;
+				let newX = x;
+				let newY = y;
+				let newW = w;
+				let newH = h;
+				if (handle.includes("e")) newW = Math.max(20, w + dx);
+				if (handle.includes("w")) {
+					const clampedW = Math.max(20, w - dx);
+					newX = x + w - clampedW;
+					newW = clampedW;
+				}
+				if (handle.includes("s")) newH = Math.max(20, h + dy);
+				if (handle.includes("n")) {
+					const clampedH = Math.max(20, h - dy);
+					newY = y + h - clampedH;
+					newH = clampedH;
+				}
+				world.setComponent(inputState.entityId, require_hooks.Transform2D, {
+					x: newX,
+					y: newY,
+					width: newW,
+					height: newH
+				});
+				markDirtyInternal();
+				return {
+					action: "capture-resize",
+					handle: inputState.handle
+				};
+			}
+			if (inputState.mode === "marquee") return { action: "capture-marquee" };
+			if (inputState.mode === "idle") {
+				const hit = hitTest(screenX, screenY);
+				const hoverTarget = hit ? hit.entityId : null;
+				if (hoverTarget !== hoveredEntity) {
+					hoveredEntity = hoverTarget;
+					markDirtyInternal();
+				}
+			}
+			return { action: "passthrough" };
+		},
+		handlePointerUp() {
+			const prevState = inputState;
+			if (prevState.mode === "dragging") {
+				for (const e of prevState.startPositions.keys()) if (world.hasTag(e, require_hooks.Dragging)) world.removeTag(e, require_hooks.Dragging);
+				for (const [entity, originalZ] of prevState.originalZIndices) world.setComponent(entity, require_hooks.ZIndex, { value: originalZ });
+				const entityIds = [...prevState.startPositions.keys()];
+				if (entityIds.length > 0) {
+					const firstId = entityIds[0];
+					const start = prevState.startPositions.get(firstId);
+					const current = world.getComponent(firstId, require_hooks.Transform2D);
+					if (current && start) {
+						const totalDx = current.x - start.x;
+						const totalDy = current.y - start.y;
+						if (totalDx !== 0 || totalDy !== 0) {
+							for (const [e, s] of prevState.startPositions) world.setComponent(e, require_hooks.Transform2D, {
+								x: s.x,
+								y: s.y
+							});
+							commandBuffer.execute(new MoveCommand(entityIds, totalDx, totalDy, require_hooks.Transform2D), world);
+						}
+					}
+				}
+				commandBuffer.endGroup();
+				currentSnap = {
+					snapDx: 0,
+					snapDy: 0,
+					guides: [],
+					spacings: []
+				};
+			}
+			if (prevState.mode === "resizing") {
+				const t = world.getComponent(prevState.entityId, require_hooks.Transform2D);
+				if (t) {
+					const finalBounds = {
+						x: t.x,
+						y: t.y,
+						width: t.width,
+						height: t.height
+					};
+					const sb = prevState.startBounds;
+					world.setComponent(prevState.entityId, require_hooks.Transform2D, sb);
+					commandBuffer.execute(new ResizeCommand(prevState.entityId, sb, finalBounds, require_hooks.Transform2D), world);
+				}
+				commandBuffer.endGroup();
+			}
+			inputState = { mode: "idle" };
+			if (prevState.mode === "dragging" || prevState.mode === "resizing") markDirtyInternal();
+			return { action: "passthrough" };
+		},
+		handlePointerCancel() {
+			if (inputState.mode === "dragging" || inputState.mode === "resizing") commandBuffer.endGroup();
+			if (inputState.mode === "dragging") {
+				for (const e of inputState.startPositions.keys()) if (world.hasTag(e, require_hooks.Dragging)) world.removeTag(e, require_hooks.Dragging);
+			}
+			currentSnap = {
+				snapDx: 0,
+				snapDy: 0,
+				guides: [],
+				spacings: []
+			};
+			inputState = { mode: "idle" };
+			markDirtyInternal();
+		},
+		getSelectedEntities() {
+			return world.queryTagged(require_hooks.Selected);
+		},
+		getHoveredEntity() {
+			return hoveredEntity;
+		},
+		getSnapGuides() {
+			return currentSnap.guides;
+		},
+		getEqualSpacing() {
+			return currentSnap.spacings;
+		},
+		setSnapEnabled(on) {
+			snapEnabled = on;
+		},
+		setSnapThreshold(worldPx) {
+			snapThreshold = worldPx;
+		},
+		enterContainer(entity) {
+			if (!world.hasComponent(entity, require_hooks.Container)) return;
+			if (!world.hasComponent(entity, require_hooks.Children)) return;
+			const navStack = world.getResource(require_hooks.NavigationStackResource);
+			const camera = world.getResource(require_hooks.CameraResource);
+			const currentFrame = navStack.frames[navStack.frames.length - 1];
+			currentFrame.camera = {
+				x: camera.x,
+				y: camera.y,
+				zoom: camera.zoom
+			};
+			navStack.frames.push({
+				containerId: entity,
+				camera: {
+					x: camera.x,
+					y: camera.y,
+					zoom: camera.zoom
+				}
+			});
+			navStack.changed = true;
+			clearSelection();
+			markDirtyInternal();
+		},
+		exitContainer() {
+			const navStack = world.getResource(require_hooks.NavigationStackResource);
+			if (navStack.frames.length <= 1) return;
+			navStack.frames.pop();
+			navStack.changed = true;
+			const parentFrame = navStack.frames[navStack.frames.length - 1];
+			const camera = world.getResource(require_hooks.CameraResource);
+			camera.x = parentFrame.camera.x;
+			camera.y = parentFrame.camera.y;
+			camera.zoom = parentFrame.camera.zoom;
+			clearSelection();
+			cameraChangedThisTick = true;
+			markDirtyInternal();
+		},
+		getActiveContainer() {
+			const navStack = world.getResource(require_hooks.NavigationStackResource);
+			return navStack.frames[navStack.frames.length - 1].containerId;
+		},
+		getNavigationDepth() {
+			return world.getResource(require_hooks.NavigationStackResource).frames.length - 1;
+		},
+		markDirty() {
+			markDirtyInternal();
+		},
+		profiler,
+		tick() {
+			profiler.beginFrame(world.currentTick);
+			const navigationChangedThisTick = world.getResource(require_hooks.NavigationStackResource)?.changed ?? false;
+			scheduler.execute(world);
+			cursorSystem();
+			profiler.beginVisibility();
+			const newVisible = [];
+			const newVisibleSet = /* @__PURE__ */ new Set();
+			for (const entity of world.query(require_hooks.Widget, require_hooks.Visible)) {
+				const wb = world.getComponent(entity, require_hooks.WorldBounds);
+				const widget = world.getComponent(entity, require_hooks.Widget);
+				const bp = world.getComponent(entity, require_hooks.WidgetBreakpoint);
+				const zIdx = world.getComponent(entity, require_hooks.ZIndex);
+				if (!wb || !widget) continue;
+				newVisibleSet.add(entity);
+				newVisible.push({
+					entityId: entity,
+					worldX: wb.worldX,
+					worldY: wb.worldY,
+					worldWidth: wb.worldWidth,
+					worldHeight: wb.worldHeight,
+					breakpoint: bp?.current ?? "normal",
+					zIndex: zIdx?.value ?? 0,
+					surface: widget.surface,
+					widgetType: widget.type
+				});
+			}
+			newVisible.sort((a, b) => a.zIndex - b.zIndex);
+			profiler.endVisibility();
+			const entered = [];
+			const exited = [];
+			for (const entity of newVisibleSet) if (!prevVisible.has(entity)) entered.push(entity);
+			for (const entity of prevVisible) if (!newVisibleSet.has(entity)) exited.push(entity);
+			frameChanges = {
+				positionsChanged: world.queryChanged(require_hooks.WorldBounds),
+				breakpointsChanged: world.queryChanged(require_hooks.WidgetBreakpoint),
+				entered,
+				exited,
+				cameraChanged: cameraChangedThisTick,
+				navigationChanged: navigationChangedThisTick,
+				selectionChanged: selectionChangedThisTick
+			};
+			currentVisible = newVisible;
+			prevVisible = newVisibleSet;
+			cameraChangedThisTick = false;
+			selectionChangedThisTick = false;
+			profiler.endFrame(world.entityCount, newVisible.length);
+			world.clearDirty();
+			world.incrementTick();
+			world.emitFrame();
+			dirty = false;
+		},
+		flushIfDirty() {
+			if (!dirty) return false;
+			engine.tick();
+			return true;
+		},
+		getVisibleEntities() {
+			return currentVisible;
+		},
+		getFrameChanges() {
+			return frameChanges;
+		},
+		getSpatialIndex() {
+			return spatialIndex;
+		},
+		onFrame(handler) {
+			return world.onFrame(handler);
+		},
+		destroy() {
+			for (const unsub of unsubscribers) unsub();
+			unsubscribers.length = 0;
+			commandBuffer.clear();
+			profiler.setEnabled(false);
+			profiler.clear();
+			spatialIndex.clear();
+		}
+	};
+	return engine;
+}
+//#endregion
+//#region src/react/SelectionOverlaySlot.tsx
+function getMods$1(e) {
+	return {
+		shift: e.shiftKey,
+		ctrl: e.ctrlKey,
+		alt: e.altKey,
+		meta: e.metaKey
+	};
+}
+/**
+* DOM overlay for WebGL widgets — provides selection frame and pointer
+* interaction (select, drag, resize) without rendering widget content.
+*/
+const SelectionOverlaySlot = (0, react.memo)(function SelectionOverlaySlot({ entityId, slotRef }) {
+	const wrapperRef = (0, react.useRef)(null);
+	const engine = require_hooks.useLayoutEngine();
+	const containerRefObj = require_hooks.useContainerRef();
+	(0, react.useEffect)(() => {
+		slotRef(entityId, wrapperRef.current);
+		return () => slotRef(entityId, null);
+	}, [entityId, slotRef]);
+	const toLocal = (0, react.useCallback)((e) => {
+		const rect = containerRefObj?.current?.getBoundingClientRect();
+		if (!rect) return {
+			x: e.clientX,
+			y: e.clientY
+		};
+		return {
+			x: e.clientX - rect.left,
+			y: e.clientY - rect.top
+		};
+	}, [containerRefObj]);
+	const capturedRef = (0, react.useRef)(false);
+	const onPointerDown = (0, react.useCallback)((e) => {
+		e.stopPropagation();
+		const { x, y } = toLocal(e);
+		const directive = engine.handlePointerDown(x, y, e.button, getMods$1(e));
+		if (directive.action === "capture-resize" || directive.action === "passthrough-track-drag") wrapperRef.current?.setPointerCapture(e.pointerId);
+		if (directive.action === "capture-resize") e.preventDefault();
+	}, [engine, toLocal]);
+	const onPointerMove = (0, react.useCallback)((e) => {
+		const { x, y } = toLocal(e);
+		if (engine.handlePointerMove(x, y, getMods$1(e)).action === "capture-drag" && !capturedRef.current) {
+			capturedRef.current = true;
+			e.stopPropagation();
+		}
+	}, [engine, toLocal]);
+	const onPointerUp = (0, react.useCallback)((e) => {
+		e.stopPropagation();
+		capturedRef.current = false;
+		if (wrapperRef.current?.hasPointerCapture(e.pointerId)) wrapperRef.current.releasePointerCapture(e.pointerId);
+		engine.handlePointerUp();
+	}, [engine]);
+	const onDoubleClick = (0, react.useCallback)((e) => {
+		e.stopPropagation();
+		engine.enterContainer(entityId);
+	}, [engine, entityId]);
+	const wb = engine.get(entityId, require_hooks.WorldBounds);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: wrapperRef,
+		className: "absolute left-0 top-0 origin-top-left will-change-transform",
+		"data-widget-slot": "",
+		style: wb ? {
+			transform: `translate(${wb.worldX}px, ${wb.worldY}px)`,
+			width: `${wb.worldWidth}px`,
+			height: `${wb.worldHeight}px`
+		} : {},
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onDoubleClick
+	});
+});
+//#endregion
+//#region src/react/WidgetSlot.tsx
+function getMods(e) {
+	return {
+		shift: e.shiftKey,
+		ctrl: e.ctrlKey,
+		alt: e.altKey,
+		meta: e.metaKey
+	};
+}
+const WidgetSlot = (0, react.memo)(function WidgetSlot({ entityId, slotRef }) {
+	const wrapperRef = (0, react.useRef)(null);
+	const engine = require_hooks.useLayoutEngine();
+	const containerRefObj = require_hooks.useContainerRef();
+	const resolve = require_hooks.useWidgetResolver();
+	const widgetComp = require_hooks.useComponent(entityId, require_hooks.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 toLocal = (0, react.useCallback)((e) => {
+		const rect = containerRefObj?.current?.getBoundingClientRect();
+		if (!rect) return {
+			x: e.clientX,
+			y: e.clientY
+		};
+		return {
+			x: e.clientX - rect.left,
+			y: e.clientY - rect.top
+		};
+	}, [containerRefObj]);
+	const onPointerDown = (0, react.useCallback)((e) => {
+		if (e.target.closest("button, input, textarea, select, [contenteditable]")) {
+			e.stopPropagation();
+			return;
+		}
+		const { x, y } = toLocal(e);
+		const directive = engine.handlePointerDown(x, y, e.button, getMods(e));
+		e.stopPropagation();
+		if (directive.action === "capture-resize" || directive.action === "passthrough-track-drag") wrapperRef.current?.setPointerCapture(e.pointerId);
+		if (directive.action === "capture-resize") e.preventDefault();
+	}, [engine, toLocal]);
+	const capturedRef = (0, react.useRef)(false);
+	const onPointerMove = (0, react.useCallback)((e) => {
+		const { x, y } = toLocal(e);
+		if (engine.handlePointerMove(x, y, getMods(e)).action === "capture-drag" && !capturedRef.current) {
+			capturedRef.current = true;
+			e.stopPropagation();
+		}
+	}, [engine, toLocal]);
+	const onPointerUp = (0, react.useCallback)((e) => {
+		e.stopPropagation();
+		capturedRef.current = false;
+		if (wrapperRef.current?.hasPointerCapture(e.pointerId)) wrapperRef.current.releasePointerCapture(e.pointerId);
+		engine.handlePointerUp();
+	}, [engine]);
+	const onDoubleClick = (0, react.useCallback)((e) => {
+		e.stopPropagation();
+		engine.enterContainer(entityId);
+	}, [engine, entityId]);
+	const wb = engine.get(entityId, require_hooks.WorldBounds);
+	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: wb ? {
+			transform: `translate(${wb.worldX}px, ${wb.worldY}px)`,
+			width: `${wb.worldWidth}px`,
+			height: `${wb.worldHeight}px`
+		} : {},
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onDoubleClick,
+		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/react/webgl/GridRenderer.ts
+const DEFAULT_GRID_CONFIG = {
+	spacings: [
+		8,
+		64,
+		512
+	],
+	dotColor: [
+		0,
+		0,
+		0
+	],
+	dotAlpha: .18,
+	fadeIn: [4, 12],
+	fadeOut: [250, 500],
+	dotRadius: [.5, 1.4],
+	levelWeight: [1, .4]
+};
+const vertexShader$1 = `
+void main() {
+	gl_Position = vec4(position.xy, 0.0, 1.0);
+}
+`;
+const fragmentShader$1 = `
+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 — grows as grid becomes sparser
+		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);
+
+		// Larger grid levels get progressively stronger dots
+		float weight = u_levelWeight.x + float(i) * u_levelWeight.y;
+		totalAlpha += dot * opacity * weight;
+	}
+
+	gl_FragColor = vec4(u_dotColor, clamp(totalAlpha * u_dotAlpha, 0.0, 1.0));
+}
+`;
+var GridRenderer = class {
+	renderer;
+	scene;
+	camera;
+	material;
+	mesh;
+	constructor(canvas) {
+		this.renderer = new three$1.WebGLRenderer({
+			canvas,
+			alpha: true,
+			antialias: false,
+			premultipliedAlpha: false
+		});
+		this.renderer.setClearColor(0, 0);
+		this.renderer.info.autoReset = false;
+		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$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_spacings: { value: new three$1.Vector3(8, 64, 512) },
+				u_dotColor: { value: new three$1.Vector3(0, 0, 0) },
+				u_dotAlpha: { value: .18 },
+				u_fadeIn: { value: new three$1.Vector2(4, 12) },
+				u_fadeOut: { value: new three$1.Vector2(250, 500) },
+				u_dotRadius: { value: new three$1.Vector2(.5, 1.4) },
+				u_levelWeight: { value: new three$1.Vector2(1, .4) }
+			},
+			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) {
+		this.renderer.setSize(width, height, false);
+		this.renderer.setPixelRatio(dpr);
+		const u = this.material.uniforms;
+		u.u_resolution.value.set(width * dpr, height * dpr);
+		u.u_dpr.value = dpr;
+	}
+	render(cameraX, cameraY, zoom) {
+		const u = this.material.uniforms;
+		u.u_camera.value.set(cameraX, cameraY);
+		u.u_zoom.value = zoom;
+		this.renderer.render(this.scene, this.camera);
+	}
+	dispose() {
+		this.mesh.geometry.dispose();
+		this.material.dispose();
+		this.renderer.dispose();
+	}
+	/** Expose for future WebGL widget rendering */
+	getWebGLRenderer() {
+		return this.renderer;
+	}
+};
+//#endregion
+//#region src/react/webgl/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 = `
+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;
+
+// Selection data
+uniform int u_count;
+uniform vec4 u_bounds[${MAX_ENTITIES}];   // (worldX, worldY, width, height)
+uniform int u_hoverIdx;                   // -1 = none
+uniform vec4 u_groupBounds;              // group bbox (0 if count <= 1)
+uniform int u_hasGroup;
+
+// Snap guides
+uniform int u_guideCount;
+uniform vec4 u_guides[16];               // (axis: 0=x/1=y, position, 0, 0)
+uniform int u_spacingCount;
+uniform vec4 u_spacings[8];              // equal-spacing segments: (axis, from, to, perpPos)
+uniform vec3 u_guideColor;
+
+// 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));
+	}
+
+	// --- Snap guide lines ---
+	for (int i = 0; i < 16; i++) {
+		if (i >= u_guideCount) break;
+		vec4 g = u_guides[i];
+		float guideWidth = 0.5 * pxToWorld;
+		float dist;
+		if (g.x < 0.5) {
+			// Vertical line (x-axis alignment)
+			dist = abs(worldPos.x - g.y);
+		} else {
+			// Horizontal line (y-axis alignment)
+			dist = abs(worldPos.y - g.y);
+		}
+		float guideAlpha = 1.0 - smoothstep(guideWidth - pxToWorld * 0.3, guideWidth + pxToWorld * 0.3, dist);
+		color = max(color, vec4(u_guideColor, guideAlpha * 0.8));
+	}
+
+	// --- Equal spacing indicators ---
+	for (int i = 0; i < 8; i++) {
+		if (i >= u_spacingCount) break;
+		vec4 s = u_spacings[i];
+		float lineWidth = 0.5 * pxToWorld;
+		float segAlpha = 0.0;
+		if (s.x < 0.5) {
+			// Horizontal segment (x-axis gap)
+			float yDist = abs(worldPos.y - s.w);
+			float xInRange = step(s.y, worldPos.x) * step(worldPos.x, s.z);
+			// Center line
+			segAlpha = (1.0 - smoothstep(lineWidth, lineWidth + pxToWorld, yDist)) * xInRange;
+			// End bars (perpendicular marks at from and to)
+			float barHeight = 4.0 * pxToWorld;
+			float barFromDist = abs(worldPos.x - s.y);
+			float barFromAlpha = (1.0 - smoothstep(lineWidth, lineWidth + pxToWorld, barFromDist))
+				* (1.0 - smoothstep(barHeight, barHeight + pxToWorld, abs(worldPos.y - s.w)));
+			float barToDist = abs(worldPos.x - s.z);
+			float barToAlpha = (1.0 - smoothstep(lineWidth, lineWidth + pxToWorld, barToDist))
+				* (1.0 - smoothstep(barHeight, barHeight + pxToWorld, abs(worldPos.y - s.w)));
+			segAlpha = max(segAlpha, max(barFromAlpha, barToAlpha));
+		} else {
+			// Vertical segment (y-axis gap)
+			float xDist = abs(worldPos.x - s.w);
+			float yInRange = step(s.y, worldPos.y) * step(worldPos.y, s.z);
+			segAlpha = (1.0 - smoothstep(lineWidth, lineWidth + pxToWorld, xDist)) * yInRange;
+			float barWidth = 4.0 * pxToWorld;
+			float barFromAlpha = (1.0 - smoothstep(lineWidth, lineWidth + pxToWorld, abs(worldPos.y - s.y)))
+				* (1.0 - smoothstep(barWidth, barWidth + pxToWorld, abs(worldPos.x - s.w)));
+			float barToAlpha = (1.0 - smoothstep(lineWidth, lineWidth + pxToWorld, abs(worldPos.y - s.z)))
+				* (1.0 - smoothstep(barWidth, barWidth + pxToWorld, abs(worldPos.x - s.w)));
+			segAlpha = max(segAlpha, max(barFromAlpha, barToAlpha));
+		}
+		color = max(color, vec4(u_guideColor, segAlpha * 0.7));
+	}
+
+	if (color.a < 0.01) discard;
+	gl_FragColor = color;
+}
+`;
+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,
+			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_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 },
+				u_guideCount: { value: 0 },
+				u_guides: { value: Array.from({ length: 16 }, () => new three$1.Vector4(0, 0, 0, 0)) },
+				u_spacingCount: { value: 0 },
+				u_spacings: { value: Array.from({ length: 8 }, () => new three$1.Vector4(0, 0, 0, 0)) },
+				u_guideColor: { value: new three$1.Vector3(1, 0, .55) }
+			},
+			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, guides = [], spacings = []) {
+		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 gCount = Math.min(guides.length, 16);
+		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 >= 8) 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/react/webgl/WebGLWidgetSlot.tsx
+/**
+* Positions a Three.js Group at the entity's world-space center.
+* The widget component renders in local space: origin at center,
+* X right, Y up, dimensions = (width, height) in world units.
+*/
+function WebGLWidgetSlot({ entityId, component: WidgetComponent }) {
+	const groupRef = (0, react.useRef)(null);
+	const engine = require_hooks.useLayoutEngine();
+	const wb = require_hooks.useComponent(entityId, require_hooks.WorldBounds);
+	(0, _react_three_fiber.useFrame)(() => {
+		if (!groupRef.current) return;
+		const bounds = engine.get(entityId, require_hooks.WorldBounds);
+		if (!bounds) return;
+		groupRef.current.position.set(bounds.worldX + bounds.worldWidth / 2, -(bounds.worldY + bounds.worldHeight / 2), 0);
+	});
+	if (!wb) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("group", {
+		ref: groupRef,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetComponent, {
+			entityId,
+			width: wb.worldWidth,
+			height: wb.worldHeight
+		})
+	});
+}
+//#endregion
+//#region src/react/webgl/WebGLWidgetLayer.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;
+		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
+		});
+	});
+	return null;
+}
+function syncCamera(camera, size, engine) {
+	const cam = engine.getCamera();
+	const ortho = camera;
+	ortho.left = 0;
+	ortho.right = size.width / cam.zoom;
+	ortho.top = 0;
+	ortho.bottom = -(size.height / cam.zoom);
+	ortho.near = .1;
+	ortho.far = 1e4;
+	ortho.position.set(cam.x, -cam.y, 1e3);
+	ortho.updateProjectionMatrix();
+}
+function CameraSync({ engine }) {
+	const { camera, size } = (0, _react_three_fiber.useThree)();
+	(0, react.useLayoutEffect)(() => {
+		syncCamera(camera, size, engine);
+	}, [
+		camera,
+		size,
+		engine
+	]);
+	(0, _react_three_fiber.useFrame)(() => {
+		syncCamera(camera, size, engine);
+	});
+	return null;
+}
+function WebGLWidgetLayer({ engine, entities, resolve }) {
+	const canvasRef = (0, react.useRef)(null);
+	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 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: "always",
+		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_hooks.EngineProvider, {
+			value: engine,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CameraSync, { engine }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfilerProbe, {
+					engine,
+					widgetCount: widgetEntries.length
+				}),
+				widgetEntries.map(({ entityId, component }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WebGLWidgetSlot, {
+					entityId,
+					component
+				}, entityId))
+			]
+		})
+	});
+}
+//#endregion
+Object.defineProperty(exports, "CommandBuffer", {
+	enumerable: true,
+	get: function() {
+		return CommandBuffer;
+	}
+});
+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, "GridRenderer", {
+	enumerable: true,
+	get: function() {
+		return GridRenderer;
+	}
+});
+Object.defineProperty(exports, "MoveCommand", {
+	enumerable: true,
+	get: function() {
+		return MoveCommand;
+	}
+});
+Object.defineProperty(exports, "Profiler", {
+	enumerable: true,
+	get: function() {
+		return Profiler;
+	}
+});
+Object.defineProperty(exports, "ResizeCommand", {
+	enumerable: true,
+	get: function() {
+		return ResizeCommand;
+	}
+});
+Object.defineProperty(exports, "SelectionOverlaySlot", {
+	enumerable: true,
+	get: function() {
+		return SelectionOverlaySlot;
+	}
+});
+Object.defineProperty(exports, "SelectionRenderer", {
+	enumerable: true,
+	get: function() {
+		return SelectionRenderer;
+	}
+});
+Object.defineProperty(exports, "SetComponentCommand", {
+	enumerable: true,
+	get: function() {
+		return SetComponentCommand;
+	}
+});
+Object.defineProperty(exports, "SpatialIndex", {
+	enumerable: true,
+	get: function() {
+		return SpatialIndex;
+	}
+});
+Object.defineProperty(exports, "SpatialIndexResource", {
+	enumerable: true,
+	get: function() {
+		return SpatialIndexResource;
+	}
+});
+Object.defineProperty(exports, "WebGLWidgetLayer", {
+	enumerable: true,
+	get: function() {
+		return WebGLWidgetLayer;
+	}
+});
+Object.defineProperty(exports, "WebGLWidgetSlot", {
+	enumerable: true,
+	get: function() {
+		return WebGLWidgetSlot;
+	}
+});
+Object.defineProperty(exports, "WidgetSlot", {
+	enumerable: true,
+	get: function() {
+		return WidgetSlot;
+	}
+});
+Object.defineProperty(exports, "__toESM", {
+	enumerable: true,
+	get: function() {
+		return __toESM;
+	}
+});
+Object.defineProperty(exports, "clamp", {
+	enumerable: true,
+	get: function() {
+		return clamp;
+	}
+});
+Object.defineProperty(exports, "computeSnapGuides", {
+	enumerable: true,
+	get: function() {
+		return computeSnapGuides;
+	}
+});
+Object.defineProperty(exports, "createArchetypeRegistry", {
+	enumerable: true,
+	get: function() {
+		return createArchetypeRegistry;
+	}
+});
+Object.defineProperty(exports, "createLayoutEngine", {
+	enumerable: true,
+	get: function() {
+		return createLayoutEngine;
+	}
+});
+Object.defineProperty(exports, "createWidgetRegistry", {
+	enumerable: true,
+	get: function() {
+		return createWidgetRegistry;
+	}
+});
+Object.defineProperty(exports, "intersectsAABB", {
+	enumerable: true,
+	get: function() {
+		return intersectsAABB;
+	}
+});
+Object.defineProperty(exports, "isR3FWidget", {
+	enumerable: true,
+	get: function() {
+		return isR3FWidget;
+	}
+});
+Object.defineProperty(exports, "pointInAABB", {
+	enumerable: true,
+	get: function() {
+		return pointInAABB;
+	}
+});
+Object.defineProperty(exports, "screenToWorld", {
+	enumerable: true,
+	get: function() {
+		return screenToWorld;
+	}
+});
+Object.defineProperty(exports, "worldBoundsToAABB", {
+	enumerable: true,
+	get: function() {
+		return worldBoundsToAABB;
+	}
+});
+Object.defineProperty(exports, "worldToScreen", {
+	enumerable: true,
+	get: function() {
+		return worldToScreen;
+	}
+});
+
+//# sourceMappingURL=WebGLWidgetLayer-BBMuwzHq.cjs.map