@jamesyong42/infinite-canvas 1.2.0 → 1.3.0

package/dist/index.cjs

@@ -1,298 +1,3494 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_WebGLWidgetLayer = require("./WebGLWidgetLayer-BBMuwzHq.cjs");
-const require_hooks = require("./hooks-DHShH86C.cjs");
+const require_hooks = require("./hooks-CtP02JNt.cjs");
+const require_ecs = require("./ecs-B4QrqfvQ.cjs");
+let _jamesyong42_reactive_ecs = require("@jamesyong42/reactive-ecs");
 let react = require("react");
-react = require_WebGLWidgetLayer.__toESM(react, 1);
+react = require_hooks.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
-let _react_three_fiber = require("@react-three/fiber");
-let three = require("three");
-//#region src/react/widget-hooks.ts
+//#region src/ecs/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/ecs/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);
+	}
+};
+/**
+* Capture an entity's complete current state. Used by `ConsumeCommand`
+* so `undo` can fully reconstitute a destroyed child. Relies on
+* `world.getComponentsOf(entity)` / `world.getTagsOf(entity)` so no
+* external type registries need to be threaded through.
+*/
+function snapshotEntity(world, entity) {
+	const components = [];
+	for (const type of world.getComponentsOf(entity)) {
+		const data = world.getComponent(entity, type);
+		if (data !== void 0) components.push({
+			type,
+			data: structuredClone(data)
+		});
+	}
+	return {
+		entityId: entity,
+		components,
+		tags: [...world.getTagsOf(entity)]
+	};
+}
+/**
+* Recreate an entity's state from a snapshot. Uses the same
+* `EntityId` captured in the snapshot if the world allows
+* reassignment; otherwise creates a fresh id and returns it.
+*/
+function rehydrateEntity(world, snapshot) {
+	const id = world.createEntity();
+	for (const entry of snapshot.components) world.addComponent(id, entry.type, entry.data);
+	for (const tag of snapshot.tags) world.addTag(id, tag);
+	return id;
+}
+/**
+* Drop-to-consume command (RFC-004 § Phase 4). Undo / redo are
+* fully supported by:
+*  - capturing a full entity snapshot of the child at construction time,
+*  - delegating the forward mutation to the parent widget's
+*    `applyMutation` handler,
+*  - delegating the reverse mutation to `revertMutation`.
+*
+* Handlers are supplied at construction time (captured from the widget
+* registry in the interaction runtime's pointerup path), so the
+* command doesn't need to know about the registry shape itself.
+*/
+var ConsumeCommand = class {
+	/**
+	* The entity id we currently target for destroy. Starts as the
+	* initial `childId` captured at construction; updated to the fresh
+	* id returned by `rehydrateEntity` on undo so that a subsequent
+	* `redo()` destroys the rehydrated entity (not a stale id from a
+	* previous execute cycle).
+	*/
+	currentChildId;
+	constructor(parentId, childId, childSnapshot, mutation, applyMutation, revertMutation) {
+		this.parentId = parentId;
+		this.childId = childId;
+		this.childSnapshot = childSnapshot;
+		this.mutation = mutation;
+		this.applyMutation = applyMutation;
+		this.revertMutation = revertMutation;
+		this.currentChildId = childId;
+	}
+	execute(world) {
+		this.applyMutation?.(world, this.mutation);
+		if (this.applyMutation === void 0 && world.entityExists(this.currentChildId)) world.destroyEntity(this.currentChildId);
+	}
+	undo(world) {
+		this.revertMutation?.(world, this.mutation);
+		if (!world.entityExists(this.currentChildId)) this.currentChildId = rehydrateEntity(world, this.childSnapshot);
+	}
+};
+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/ecs/math.ts
+/** Convert a Rect to AABB */
+function rectToAABB(r) {
+	return {
+		minX: r.x,
+		minY: r.y,
+		maxX: r.x + r.width,
+		maxY: r.y + r.height
+	};
+}
+/** Convert AABB to Rect */
+function aabbToRect(a) {
+	return {
+		x: a.minX,
+		y: a.minY,
+		width: a.maxX - a.minX,
+		height: a.maxY - a.minY
+	};
+}
+/** 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/ecs/systems/breakpoint.ts
+/**
+* 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_ecs.CameraResource);
+		const config = world.getResource(require_ecs.BreakpointConfigResource);
+		for (const entity of world.query(require_ecs.Widget, require_ecs.Visible)) {
+			const transform = world.getComponent(entity, require_ecs.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_ecs.WidgetBreakpoint);
+			if (!existing) world.addComponent(entity, require_ecs.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_ecs.WidgetBreakpoint, {
+					current: bp,
+					screenWidth,
+					screenHeight
+				});
+			}
+		}
+	}
+});
+//#endregion
+//#region src/ecs/systems/card.ts
+/**
+* Stamp Transform2D width/height from Card.preset every tick. Manual
+* writes to Transform2D.width/height on a card entity get overwritten
+* — to change card size, update `Card.preset`. The spatial-index
+* observer fires reactively on the Transform2D write, so no ordering
+* constraint against other systems is needed.
+*/
+const cardSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "card",
+	execute: (world) => {
+		const resource = world.getResource(require_ecs.CardPresetsResource);
+		if (!resource) return;
+		const { presets } = resource;
+		for (const entity of world.query(require_ecs.Card, require_ecs.Transform2D)) {
+			const card = world.getComponent(entity, require_ecs.Card);
+			const transform = world.getComponent(entity, require_ecs.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_ecs.Transform2D, {
+				width: size.width,
+				height: size.height
+			});
+		}
+	}
+});
+//#endregion
+//#region src/ecs/systems/cull.ts
+/**
+* Viewport culling — for every `Active` entity, sets exactly one of `Visible`
+* (intersects viewport+overscan) or `Culled` (outside it). Non-Active entities
+* carry neither tag.
+*
+* The `Culled` tag is consumed by render layers that want to keep cached state
+* without rendering — the R3F compositor (RFC-002) holds Culled widgets in its
+* Cold pool and skips ticks/paints for them.
+*/
+const cullSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "cull",
+	after: "navigationFilter",
+	execute: (world) => {
+		const camera = world.getResource(require_ecs.CameraResource);
+		const viewport = world.getResource(require_ecs.ViewportResource);
+		if (viewport.width === 0 || viewport.height === 0) return;
+		const spatialIndex = world.getResource(require_ecs.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_ecs.Visible)) world.removeTag(entity, require_ecs.Visible);
+		for (const entity of world.queryTagged(require_ecs.Culled)) world.removeTag(entity, require_ecs.Culled);
+		const visibleIds = /* @__PURE__ */ new Set();
+		if (spatialIndex && spatialIndex.size > 0) {
+			const candidates = spatialIndex.search(vpWorldAABB);
+			for (const entry of candidates) if (world.hasTag(entry.entityId, require_ecs.Active)) {
+				world.addTag(entry.entityId, require_ecs.Visible);
+				visibleIds.add(entry.entityId);
+			}
+		} else for (const entity of world.queryTagged(require_ecs.Active)) {
+			const t = world.getComponent(entity, require_ecs.Transform2D);
+			if (t && intersectsAABB(rectToAABB(t), vpWorldAABB)) {
+				world.addTag(entity, require_ecs.Visible);
+				visibleIds.add(entity);
+			}
+		}
+		for (const entity of world.queryTagged(require_ecs.Active)) if (!visibleIds.has(entity)) world.addTag(entity, require_ecs.Culled);
+	}
+});
+//#endregion
+//#region src/ecs/systems/drag-promote.ts
+/**
+* Promotes a dragged DOM card to the 'overlay' layer so it visually pops above
+* its siblings; reverses on drag end. R3F cards opt out — the compositor
+* handles their stacking via `uDraggedRect` clip + renderOrder bump
+* (RFC-002), and a bare DOM widget without `Card` is a debug-style surface
+* that shouldn't acquire card-shaped affordances.
+*
+* Diff signal: presence of `PreDragLayer` is the "currently promoted" flag.
+*   Dragging present, no PreDragLayer  → promote (stash old layer, set overlay)
+*   PreDragLayer present, no Dragging  → restore (write back stashed layer)
+*
+* RFC-010 Phase 1 — migrates the two `onTagAdded(Dragging)` /
+* `onTagRemoved(Dragging)` observers out of `LayoutEngine.ts` into a
+* `SystemScheduler` system. The `before: 'cull'` constraint is conservative
+* and becomes implicit once RFC-010 Phase 2 stamps `phase: 'react'`.
+*/
+const dragPromoteSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "dragPromote",
+	before: "cull",
+	execute: (world) => {
+		for (const entity of world.queryTagged(require_ecs.Dragging)) {
+			if (world.hasComponent(entity, require_ecs.PreDragLayer)) continue;
+			if (!world.hasComponent(entity, require_ecs.Card)) continue;
+			if (world.getComponent(entity, require_ecs.Widget)?.surface === "webgl") continue;
+			const prev = world.getComponent(entity, require_ecs.Layer)?.name ?? "base";
+			world.addComponent(entity, require_ecs.PreDragLayer, { name: prev });
+			if (world.hasComponent(entity, require_ecs.Layer)) world.setComponent(entity, require_ecs.Layer, { name: "overlay" });
+			else world.addComponent(entity, require_ecs.Layer, { name: "overlay" });
+		}
+		for (const entity of world.query(require_ecs.PreDragLayer)) {
+			if (world.hasTag(entity, require_ecs.Dragging)) continue;
+			const stash = world.getComponent(entity, require_ecs.PreDragLayer);
+			if (!stash) continue;
+			world.setComponent(entity, require_ecs.Layer, { name: stash.name });
+			world.removeComponent(entity, require_ecs.PreDragLayer);
+		}
+	}
+});
+//#endregion
+//#region src/ecs/systems/navigation-filter.ts
+/**
+* Reconcile `Active` for a single entity against the given nav frame.
+* Exported so the engine can wire a reactive `ParentFrame` observer
+* that keeps the consume / re-parent / undo paths in sync without
+* waiting for a nav-stack change (RFC-004 § Phase 5).
+*/
+function reconcileEntityActive(world, entity) {
+	const navStack = world.getResource(require_ecs.NavigationStackResource);
+	const activeContainer = navStack.frames[navStack.frames.length - 1].containerId;
+	const pf = world.getComponent(entity, require_ecs.ParentFrame);
+	const belongs = activeContainer === null ? pf === void 0 : pf?.id === activeContainer;
+	const isActive = world.hasTag(entity, require_ecs.Active);
+	if (belongs && !isActive) world.addTag(entity, require_ecs.Active);
+	else if (!belongs && isActive) world.removeTag(entity, require_ecs.Active);
+}
+/**
+* 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).
+*
+* Mid-session `ParentFrame` mutations (consume / undo) are handled out of
+* band by a reactive observer in the engine — see
+* {@link reconcileEntityActive}.
+*/
+const navigationFilterSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "navigationFilter",
+	execute: (world) => {
+		const navStack = world.getResource(require_ecs.NavigationStackResource);
+		const stackChanged = navStack.changed;
+		const newEntities = world.queryAdded(require_ecs.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_ecs.ParentFrame);
+			return world.getComponent(entity, require_ecs.ParentFrame)?.id === activeContainer;
+		};
+		if (stackChanged) {
+			for (const entity of world.queryTagged(require_ecs.Active)) world.removeTag(entity, require_ecs.Active);
+			for (const entity of world.query(require_ecs.Transform2D)) if (belongsToCurrentFrame(entity)) world.addTag(entity, require_ecs.Active);
+			navStack.changed = false;
+		} else for (const entity of newEntities) if (belongsToCurrentFrame(entity) && !world.hasTag(entity, require_ecs.Active)) world.addTag(entity, require_ecs.Active);
+	}
+});
+//#endregion
+//#region src/ecs/systems/sort.ts
+/**
+* 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/ecs/systems/transform-tween.ts
+/**
+* Apply an easing curve to a linear progress value in `[0, 1]`.
+*
+* - `linear` — no curve (`p`).
+* - `ease-out` — cubic ease-out (`1 - (1-p)^3`), default for fly-back.
+* - `ease-in-out` — cubic ease-in-out; symmetric accelerate/decelerate.
+* - `spring` — not yet implemented; falls back to `ease-out` for now.
+*
+* Input is clamped to `[0, 1]`; callers are expected to pass the tween's
+* `elapsed / durationMs` before clamping themselves.
+*/
+function applyEasing(p, easing) {
+	const t = p < 0 ? 0 : p > 1 ? 1 : p;
+	switch (easing) {
+		case "linear": return t;
+		case "ease-in-out": return t < .5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+		case "ease-out":
+		case "spring": return 1 - (1 - t) ** 3;
+	}
+}
+/**
+* Advance every active `TransformTween`, write the interpolated
+* position back to the entity's `Transform2D`, and remove the tween
+* component on completion (RFC-004 § Phase 2).
+*
+* No scheduler ordering constraint — the spatial-index observer fires
+* reactively on every `Transform2D` change, so downstream consumers
+* see the animated values within the same tick regardless of system
+* order.
+*/
+const transformTweenSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "transformTween",
+	execute: (world) => {
+		const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
+		for (const entity of world.query(require_ecs.TransformTween)) {
+			const t = world.getComponent(entity, require_ecs.TransformTween);
+			const x2d = world.getComponent(entity, require_ecs.Transform2D);
+			if (!t) continue;
+			if (!x2d) {
+				world.removeComponent(entity, require_ecs.TransformTween);
+				continue;
+			}
+			const elapsed = nowMs - t.startMs;
+			if (elapsed >= t.durationMs) {
+				world.setComponent(entity, require_ecs.Transform2D, {
+					x: t.toX,
+					y: t.toY
+				});
+				world.removeComponent(entity, require_ecs.TransformTween);
+				continue;
+			}
+			const p = applyEasing(elapsed / t.durationMs, t.easing);
+			world.setComponent(entity, require_ecs.Transform2D, {
+				x: t.fromX + (t.toX - t.fromX) * p,
+				y: t.fromY + (t.toY - t.fromY) * p
+			});
+		}
+	}
+});
+//#endregion
+//#region src/ecs/engine/interaction.ts
+/**
+* Hit-zone size for resize hotspots (full width, screen px). Deliberately
+* larger than the visual handle size to give a generous clickable area.
+* Do not reduce without a UX test.
+*
+* Private to `interaction.ts` post-RFC-005 — handle hotspots are not
+* separate ECS entities, so this constant has no other consumer.
+*/
+const HANDLE_HIT_SIZE_PX = 16;
+/**
+* Return the resize-handle hotspot a world-space point falls inside,
+* if any. Corners are tested before edges so they win when hit zones
+* overlap — this replicates today's `layer: 15` (corner) vs
+* `layer: 10` (edge) priority encoded on handle entities.
+*
+* `zoom` converts the screen-pixel hit size to world units so the
+* hotspot stays visually constant across zoom levels.
+*/
+function detectResizeHandle(worldX, worldY, rect, zoom) {
+	const half = HANDLE_HIT_SIZE_PX / zoom / 2;
+	const xL = rect.x;
+	const xR = rect.x + rect.width;
+	const yT = rect.y;
+	const yB = rect.y + rect.height;
+	const corners = [
+		{
+			pos: "nw",
+			cx: xL,
+			cy: yT
+		},
+		{
+			pos: "ne",
+			cx: xR,
+			cy: yT
+		},
+		{
+			pos: "sw",
+			cx: xL,
+			cy: yB
+		},
+		{
+			pos: "se",
+			cx: xR,
+			cy: yB
+		}
+	];
+	for (const c of corners) if (worldX >= c.cx - half && worldX <= c.cx + half && worldY >= c.cy - half && worldY <= c.cy + half) return c.pos;
+	const edges = [
+		{
+			pos: "n",
+			cx: (xL + xR) / 2,
+			cy: yT
+		},
+		{
+			pos: "s",
+			cx: (xL + xR) / 2,
+			cy: yB
+		},
+		{
+			pos: "w",
+			cx: xL,
+			cy: (yT + yB) / 2
+		},
+		{
+			pos: "e",
+			cx: xR,
+			cy: (yT + yB) / 2
+		}
+	];
+	for (const e of edges) if (worldX >= e.cx - half && worldX <= e.cx + half && worldY >= e.cy - half && worldY <= e.cy + half) return e.pos;
+	return null;
+}
+/**
+* Inline resize-handle hit test (RFC-005).
+*
+* Returns a `{ entityId: widgetId, role: resize-with-handle-pos }`
+* result when the pointer falls inside one of the 8 hotspots around
+* the single selected `Resizable` widget. Gated on exactly-one
+* selected Resizable so that multi-select drag doesn't accidentally
+* latch onto a resize hotspot — matches the historical
+* handle-spawning rule.
+*/
+function findInlineResizeHit(world, worldX, worldY, zoom) {
+	let selected = null;
+	let count = 0;
+	for (const e of world.queryTagged(require_ecs.Resizable)) if (world.hasTag(e, require_ecs.Selected)) {
+		selected = e;
+		if (++count > 1) return null;
+	}
+	if (!selected) return null;
+	const t = world.getComponent(selected, require_ecs.Transform2D);
+	if (!t) return null;
+	const handle = detectResizeHandle(worldX, worldY, t, zoom);
+	if (!handle) return null;
+	return {
+		entityId: selected,
+		role: {
+			layer: 15,
+			role: {
+				type: "resize",
+				handle
+			}
+		}
+	};
+}
+/**
+* Map a resize-handle position to the CSS cursor value. Used by the
+* cursor system in place of the per-handle-entity `CursorHint` reads
+* the old model used.
+*/
+function cursorForHandle(handle) {
+	return `${handle}-resize`;
+}
+/**
+* The pointer state machine, hit testing, selection logic, and the
+* root-container cursor resolution.
+*
+* Kept as one cohesive unit because every branch of the state machine needs
+* access to the same closed-over state (inputState, hoveredEntity, snap
+* result). Splitting further would require threading state refs through
+* every callee, which hurts readability more than it helps.
+*/
+function createInteractionRuntime(ctx) {
+	const { world, spatialIndex, commandBuffer, markDirty, notifySelectionChanged } = ctx;
+	let inputState = { mode: "idle" };
+	let hoveredEntity = null;
+	/**
+	* Cached handle position the pointer is currently over, iff the
+	* hovered entity is the selected `Resizable` widget. Updated by the
+	* idle-branch hover path in `handlePointerMove`; read by
+	* `runCursorSystem` to pick the right directional cursor without
+	* consulting a handle entity's `CursorHint` (RFC-005).
+	*/
+	let hoveredHandle = null;
+	let currentSnap = {
+		snapDx: 0,
+		snapDy: 0,
+		guides: [],
+		spacings: []
+	};
+	let overlapCandidates = /* @__PURE__ */ new Set();
+	let overlapTarget = null;
+	function hitTest(screenX, screenY) {
+		const camera = world.getResource(require_ecs.CameraResource);
+		const worldPos = screenToWorld(screenX, screenY, camera);
+		const inlineHit = findInlineResizeHit(world, worldPos.x, worldPos.y, camera.zoom);
+		if (inlineHit) return inlineHit;
+		const candidates = spatialIndex.searchPoint(worldPos.x, worldPos.y, 0);
+		const interactable = [];
+		for (const c of candidates) {
+			if (!world.hasTag(c.entityId, require_ecs.Active)) continue;
+			const role = world.getComponent(c.entityId, require_ecs.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_ecs.ZIndex)?.value ?? 0;
+			return (world.getComponent(b.entityId, require_ecs.ZIndex)?.value ?? 0) - zA;
+		});
+		return interactable[0];
+	}
+	function selectEntity(entity, additive) {
+		if (!world.hasTag(entity, require_ecs.Selectable)) return;
+		if (additive) if (world.hasTag(entity, require_ecs.Selected)) world.removeTag(entity, require_ecs.Selected);
+		else world.addTag(entity, require_ecs.Selected);
+		else {
+			for (const e of world.queryTagged(require_ecs.Selected)) if (e !== entity) world.removeTag(e, require_ecs.Selected);
+			world.addTag(entity, require_ecs.Selected);
+		}
+		notifySelectionChanged();
+	}
+	function clearSelection() {
+		const selected = world.queryTagged(require_ecs.Selected);
+		if (selected.length > 0) {
+			for (const e of selected) world.removeTag(e, require_ecs.Selected);
+			notifySelectionChanged();
+		}
+	}
+	/**
+	* RFC-004 § Phase 3 — contract match between a dragged card (child)
+	* and a candidate parent. Returns true iff their `provides` /
+	* `accepts` arrays intersect AND the optional `canAccept` gate on
+	* the parent's widget type returns truthy.
+	*/
+	function contractsMatch(childId, parentId) {
+		const childCard = world.getComponent(childId, require_ecs.Card);
+		const parentCard = world.getComponent(parentId, require_ecs.Card);
+		if (!childCard || !parentCard) return false;
+		if (childCard.provides.length === 0 || parentCard.accepts.length === 0) return false;
+		let intersects = false;
+		for (const p of childCard.provides) if (parentCard.accepts.includes(p)) {
+			intersects = true;
+			break;
+		}
+		if (!intersects) return false;
+		const gate = ctx.getWidgetInteraction?.(world.getComponent(parentId, require_ecs.Widget)?.type ?? "")?.canAccept;
+		if (!gate) return true;
+		return gate({
+			parent: parentId,
+			child: childId,
+			world
+		});
+	}
+	/**
+	* RFC-004 § Phase 3 — the overlap detection pass.
+	*
+	* Called from `handlePointerMove` whenever a Card-tagged entity is
+	* being dragged. Produces three pieces of visible state:
+	*
+	* - `OverlapCandidate` tag + `CardOverlapHotPoint` component on every
+	*   other card whose AABB intersects the dragged card's AABB.
+	*   `CardOverlapHotPoint.{x,y}` are the intersection centroid in the
+	*   overlapped card's local (0..1) frame. Layer 1 of the visual state.
+	*
+	* - `OverlapTarget` tag on at most one card — the closest by centre
+	*   distance — iff contracts match and any `canAccept` gate passes.
+	*   Layer 2.
+	*
+	* `strength` is set to 1 on entry and 0 on exit; CSS / shader
+	* consumers own the actual fade transition (opacity transition at
+	* the rendering layer). Keeps the ECS pass cheap and stateless.
+	*/
+	function updateCardOverlap(draggedId) {
+		if (!world.hasComponent(draggedId, require_ecs.Card)) {
+			clearOverlapState();
+			return;
+		}
+		const draggedT = world.getComponent(draggedId, require_ecs.Transform2D);
+		if (!draggedT) {
+			clearOverlapState();
+			return;
+		}
+		const dxMin = draggedT.x;
+		const dyMin = draggedT.y;
+		const dxMax = draggedT.x + draggedT.width;
+		const dyMax = draggedT.y + draggedT.height;
+		const dCenterX = draggedT.x + draggedT.width / 2;
+		const dCenterY = draggedT.y + draggedT.height / 2;
+		const next = /* @__PURE__ */ new Set();
+		const hits = spatialIndex.search({
+			minX: dxMin,
+			minY: dyMin,
+			maxX: dxMax,
+			maxY: dyMax
+		});
+		for (const entry of hits) {
+			if (entry.entityId === draggedId) continue;
+			if (!world.hasComponent(entry.entityId, require_ecs.Card)) continue;
+			if (!world.hasTag(entry.entityId, require_ecs.Active)) continue;
+			next.add(entry.entityId);
+		}
+		for (const prev of overlapCandidates) if (!next.has(prev)) {
+			world.removeTag(prev, require_ecs.OverlapCandidate);
+			world.removeComponent(prev, require_ecs.CardOverlapHotPoint);
+		}
+		for (const c of next) if (!overlapCandidates.has(c)) {
+			world.addTag(c, require_ecs.OverlapCandidate);
+			world.addComponent(c, require_ecs.CardOverlapHotPoint, {
+				x: .5,
+				y: .5,
+				strength: 0
+			});
+		}
+		let primary = null;
+		let bestDist = Number.POSITIVE_INFINITY;
+		let bestZ = Number.NEGATIVE_INFINITY;
+		let bestId = Number.POSITIVE_INFINITY;
+		for (const c of next) {
+			const ct = world.getComponent(c, require_ecs.Transform2D);
+			if (!ct) continue;
+			const cxMin = ct.x;
+			const cyMin = ct.y;
+			const cxMax = ct.x + ct.width;
+			const cyMax = ct.y + ct.height;
+			const ix = (Math.max(dxMin, cxMin) + Math.min(dxMax, cxMax)) / 2;
+			const iy = (Math.max(dyMin, cyMin) + Math.min(dyMax, cyMax)) / 2;
+			const hotX = ct.width > 0 ? (ix - ct.x) / ct.width : .5;
+			const hotY = ct.height > 0 ? (iy - ct.y) / ct.height : .5;
+			world.setComponent(c, require_ecs.CardOverlapHotPoint, {
+				x: hotX < 0 ? 0 : hotX > 1 ? 1 : hotX,
+				y: hotY < 0 ? 0 : hotY > 1 ? 1 : hotY,
+				strength: 1
+			});
+			const ccx = ct.x + ct.width / 2;
+			const ccy = ct.y + ct.height / 2;
+			const d = Math.hypot(ccx - dCenterX, ccy - dCenterY);
+			const z = world.getComponent(c, require_ecs.ZIndex)?.value ?? 0;
+			if (d < bestDist || d === bestDist && z > bestZ || d === bestDist && z === bestZ && c < bestId) {
+				bestDist = d;
+				bestZ = z;
+				bestId = c;
+				primary = c;
+			}
+		}
+		overlapCandidates = next;
+		const nextTarget = primary !== null && contractsMatch(draggedId, primary) ? primary : null;
+		if (nextTarget !== overlapTarget) {
+			if (overlapTarget !== null) world.removeTag(overlapTarget, require_ecs.OverlapTarget);
+			if (nextTarget !== null) world.addTag(nextTarget, require_ecs.OverlapTarget);
+			overlapTarget = nextTarget;
+		}
+	}
+	/**
+	* RFC-004 § Phase 3 — tear down all overlap state. Called on drag
+	* end (commit / cancel) and when the dragged entity stops being a
+	* Card (e.g. a non-card entity enters the drag state machine).
+	*/
+	function clearOverlapState() {
+		for (const c of overlapCandidates) {
+			world.removeTag(c, require_ecs.OverlapCandidate);
+			world.removeComponent(c, require_ecs.CardOverlapHotPoint);
+		}
+		if (overlapTarget !== null) world.removeTag(overlapTarget, require_ecs.OverlapTarget);
+		overlapCandidates = /* @__PURE__ */ new Set();
+		overlapTarget = null;
+	}
+	/**
+	* RFC-004 § Phase 4 — fly-back completion poll. Called by the engine's
+	* frame runner after `scheduler.execute(world)` each tick. The tween
+	* system runs first, interpolates `Transform2D` toward the starting
+	* position, and auto-removes its `TransformTween` component on
+	* completion. When we see the tween component gone from the primary
+	* flying-back entity, the animation is done: remove `Dragging`,
+	* restore `ZIndex`, transition to idle.
+	*/
+	function runFlyBackSystem() {
+		if (inputState.mode !== "flyingBack") return;
+		if (world.entityExists(inputState.entityId) && world.hasComponent(inputState.entityId, require_ecs.TransformTween)) return;
+		for (const e of inputState.startPositions.keys()) {
+			if (!world.entityExists(e)) continue;
+			if (world.hasTag(e, require_ecs.Dragging)) world.removeTag(e, require_ecs.Dragging);
+		}
+		for (const [entity, originalZ] of inputState.originalZIndices) {
+			if (!world.entityExists(entity)) continue;
+			world.setComponent(entity, require_ecs.ZIndex, { value: originalZ });
+		}
+		inputState = { mode: "idle" };
+		markDirty();
+	}
+	/**
+	* Derive the root-container cursor from input state + hover.
+	* Writes to CursorResource. Called from the frame runner after systems.
+	*/
+	function runCursorSystem() {
+		let cursor = "default";
+		switch (inputState.mode) {
+			case "idle":
+			case "marquee":
+				if (hoveredHandle !== null) cursor = cursorForHandle(hoveredHandle);
+				else if (hoveredEntity !== null) cursor = world.getComponent(hoveredEntity, require_ecs.CursorHint)?.hover ?? "default";
+				break;
+			case "tracking":
+				cursor = world.getComponent(inputState.entityId, require_ecs.CursorHint)?.hover ?? "default";
+				break;
+			case "dragging":
+				cursor = world.getComponent(inputState.entityId, require_ecs.CursorHint)?.active ?? "grabbing";
+				break;
+			case "resizing":
+				cursor = cursorForHandle(inputState.handle);
+				break;
+		}
+		world.setResource(require_ecs.CursorResource, { cursor });
+	}
+	/**
+	* Transition to `dragging` mode. Snapshots ZIndex + Transform2D for every
+	* `Selected` entity, elevates them to `maxZ + 1`, tags `Dragging`, opens a
+	* command group. Caller is responsible for `Selected` set being correct.
+	*/
+	function _beginDrag(entity, startWorldX, startWorldY) {
+		const originalZIndices = /* @__PURE__ */ new Map();
+		let maxZ = 0;
+		for (const e of world.queryTagged(require_ecs.Active)) {
+			const z = world.getComponent(e, require_ecs.ZIndex);
+			if (z && z.value > maxZ) maxZ = z.value;
+		}
+		for (const e of world.queryTagged(require_ecs.Selected)) {
+			const z = world.getComponent(e, require_ecs.ZIndex);
+			originalZIndices.set(e, z?.value ?? 0);
+			world.setComponent(e, require_ecs.ZIndex, { value: maxZ + 1 });
+		}
+		const startPositions = /* @__PURE__ */ new Map();
+		for (const e of world.queryTagged(require_ecs.Selected)) {
+			const t = world.getComponent(e, require_ecs.Transform2D);
+			if (t) startPositions.set(e, {
+				x: t.x,
+				y: t.y
+			});
+		}
+		for (const e of startPositions.keys()) world.addTag(e, require_ecs.Dragging);
+		commandBuffer.beginGroup();
+		inputState = {
+			mode: "dragging",
+			entityId: entity,
+			startWorldX,
+			startWorldY,
+			startPositions,
+			originalZIndices
+		};
+		markDirty();
+	}
+	/** Apply drag math + snap + overlap update for the current cursor world position. */
+	function _updateDrag(worldX, worldY) {
+		if (inputState.mode !== "dragging") return;
+		const camera = world.getResource(require_ecs.CameraResource);
+		const totalDx = worldX - inputState.startWorldX;
+		const totalDy = worldY - inputState.startWorldY;
+		const firstId = inputState.startPositions.keys().next().value;
+		if (ctx.getSnapEnabled() && firstId !== void 0 && world.hasTag(firstId, require_ecs.SnapSource)) {
+			const draggedIds = new Set(inputState.startPositions.keys());
+			const firstStart = inputState.startPositions.get(firstId);
+			const firstT = world.getComponent(firstId, require_ecs.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_ecs.SnapTarget)) {
+					if (draggedIds.has(entity)) continue;
+					if (!world.hasTag(entity, require_ecs.Active)) continue;
+					const rt = world.getComponent(entity, require_ecs.Transform2D);
+					if (rt) refs.push({
+						x: rt.x,
+						y: rt.y,
+						width: rt.width,
+						height: rt.height
+					});
+				}
+				currentSnap = require_hooks.computeSnapGuides(draggedBounds, refs, ctx.getSnapThreshold() / 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_ecs.Transform2D, {
+			x: start.x + finalDx,
+			y: start.y + finalDy
+		});
+		updateCardOverlap(inputState.entityId);
+		markDirty();
+	}
+	/**
+	* End an active drag. `cancelled: false` runs the commit/fly-back/consume
+	* decision tree (RFC-004 § Phase 4); `cancelled: true` rolls back state
+	* and discards the open command group.
+	*/
+	function _endDrag(cancelled) {
+		const prevState = inputState;
+		if (prevState.mode !== "dragging") return;
+		if (cancelled) {
+			for (const [e, start] of prevState.startPositions) if (world.entityExists(e)) world.setComponent(e, require_ecs.Transform2D, {
+				x: start.x,
+				y: start.y
+			});
+			commandBuffer.endGroup();
+			for (const e of prevState.startPositions.keys()) if (world.hasTag(e, require_ecs.Dragging)) world.removeTag(e, require_ecs.Dragging);
+			for (const [entity, originalZ] of prevState.originalZIndices) if (world.entityExists(entity)) world.setComponent(entity, require_ecs.ZIndex, { value: originalZ });
+			clearOverlapState();
+			currentSnap = {
+				snapDx: 0,
+				snapDy: 0,
+				guides: [],
+				spacings: []
+			};
+			inputState = { mode: "idle" };
+			markDirty();
+			return;
+		}
+		const draggedId = prevState.entityId;
+		const draggedHasCard = world.hasComponent(draggedId, require_ecs.Card);
+		const hadOverlap = overlapCandidates.size > 0;
+		const target = overlapTarget;
+		const shouldConsume = draggedHasCard && target !== null;
+		if (draggedHasCard && hadOverlap && target === null) {
+			const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
+			for (const [e, start] of prevState.startPositions) {
+				const cur = world.getComponent(e, require_ecs.Transform2D);
+				if (!cur) continue;
+				world.addComponent(e, require_ecs.TransformTween, {
+					fromX: cur.x,
+					fromY: cur.y,
+					toX: start.x,
+					toY: start.y,
+					startMs: nowMs,
+					durationMs: 250,
+					easing: "ease-out",
+					kind: "flyback"
+				});
+			}
+			commandBuffer.endGroup();
+			currentSnap = {
+				snapDx: 0,
+				snapDy: 0,
+				guides: [],
+				spacings: []
+			};
+			clearOverlapState();
+			inputState = {
+				mode: "flyingBack",
+				entityId: draggedId,
+				startPositions: prevState.startPositions,
+				originalZIndices: prevState.originalZIndices
+			};
+			markDirty();
+			return;
+		}
+		for (const e of prevState.startPositions.keys()) if (world.hasTag(e, require_ecs.Dragging)) world.removeTag(e, require_ecs.Dragging);
+		for (const [entity, originalZ] of prevState.originalZIndices) world.setComponent(entity, require_ecs.ZIndex, { value: originalZ });
+		const entityIds = [...prevState.startPositions.keys()];
+		let totalDx = 0;
+		let totalDy = 0;
+		let movedSomething = false;
+		if (entityIds.length > 0) {
+			const firstId = entityIds[0];
+			const start = prevState.startPositions.get(firstId);
+			const current = world.getComponent(firstId, require_ecs.Transform2D);
+			if (current && start) {
+				totalDx = current.x - start.x;
+				totalDy = current.y - start.y;
+				if (totalDx !== 0 || totalDy !== 0) {
+					for (const [e, s] of prevState.startPositions) world.setComponent(e, require_ecs.Transform2D, {
+						x: s.x,
+						y: s.y
+					});
+					movedSomething = true;
+				}
+			}
+		}
+		let consumeSnapshot;
+		let consumeHandlers;
+		let consumeMutation;
+		let shouldEmitConsume = false;
+		if (shouldConsume && target !== null) {
+			const parentType = world.getComponent(target, require_ecs.Widget)?.type ?? "";
+			consumeHandlers = ctx.getWidgetInteraction?.(parentType);
+			const result = consumeHandlers?.onReceiveChild?.({
+				parent: target,
+				child: draggedId,
+				world
+			}) ?? { consume: true };
+			if (result.consume) {
+				consumeSnapshot = snapshotEntity(world, draggedId);
+				consumeMutation = result.mutation;
+				shouldEmitConsume = true;
+			}
+		}
+		if (movedSomething) commandBuffer.execute(new MoveCommand(entityIds, totalDx, totalDy, require_ecs.Transform2D), world);
+		if (shouldEmitConsume && target !== null && consumeSnapshot) {
+			commandBuffer.execute(new ConsumeCommand(target, draggedId, consumeSnapshot, consumeMutation, consumeHandlers?.applyMutation, consumeHandlers?.revertMutation), world);
+			if (world.hasTag(draggedId, require_ecs.Selected)) {
+				world.removeTag(draggedId, require_ecs.Selected);
+				notifySelectionChanged();
+			}
+		}
+		commandBuffer.endGroup();
+		currentSnap = {
+			snapDx: 0,
+			snapDy: 0,
+			guides: [],
+			spacings: []
+		};
+		clearOverlapState();
+		inputState = { mode: "idle" };
+		markDirty();
+	}
+	function _beginResize(entity, handle, startWorldX, startWorldY) {
+		const t = world.getComponent(entity, require_ecs.Transform2D);
+		if (!t) return false;
+		commandBuffer.beginGroup();
+		inputState = {
+			mode: "resizing",
+			entityId: entity,
+			handle,
+			startWorldX,
+			startWorldY,
+			startBounds: {
+				x: t.x,
+				y: t.y,
+				width: t.width,
+				height: t.height
+			}
+		};
+		markDirty();
+		return true;
+	}
+	function _updateResize(worldX, worldY) {
+		if (inputState.mode !== "resizing") return;
+		const dx = worldX - inputState.startWorldX;
+		const dy = worldY - inputState.startWorldY;
+		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_ecs.Transform2D, {
+			x: newX,
+			y: newY,
+			width: newW,
+			height: newH
+		});
+		markDirty();
+	}
+	function _endResize(cancelled) {
+		const prevState = inputState;
+		if (prevState.mode !== "resizing") return;
+		if (cancelled) {
+			world.setComponent(prevState.entityId, require_ecs.Transform2D, prevState.startBounds);
+			commandBuffer.endGroup();
+			inputState = { mode: "idle" };
+			markDirty();
+			return;
+		}
+		const t = world.getComponent(prevState.entityId, require_ecs.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_ecs.Transform2D, sb);
+			commandBuffer.execute(new ResizeCommand(prevState.entityId, sb, finalBounds, require_ecs.Transform2D), world);
+		}
+		commandBuffer.endGroup();
+		inputState = { mode: "idle" };
+		markDirty();
+	}
+	function _beginMarquee(startWorldX, startWorldY) {
+		inputState = {
+			mode: "marquee",
+			startWorldX,
+			startWorldY
+		};
+		markDirty();
+	}
+	function _updateMarquee(_worldX, _worldY) {}
+	function _endMarquee() {
+		if (inputState.mode !== "marquee") return;
+		inputState = { mode: "idle" };
+		markDirty();
+	}
+	/**
+	* Cancel any active drag/resize/flyingBack state. Used by both the
+	* legacy `handlePointerCancel` and as the implementation of the
+	* new public `endDrag(_, { cancelled: true })` / `endResize(_, …)`.
+	*/
+	function _cancelAll() {
+		if (inputState.mode === "dragging") _endDrag(true);
+		else if (inputState.mode === "resizing") _endResize(true);
+		else if (inputState.mode === "flyingBack") {
+			for (const [e, start] of inputState.startPositions) {
+				if (!world.entityExists(e)) continue;
+				if (world.hasComponent(e, require_ecs.TransformTween)) world.removeComponent(e, require_ecs.TransformTween);
+				if (world.hasTag(e, require_ecs.Dragging)) world.removeTag(e, require_ecs.Dragging);
+				world.setComponent(e, require_ecs.Transform2D, {
+					x: start.x,
+					y: start.y
+				});
+			}
+			for (const [entity, originalZ] of inputState.originalZIndices) {
+				if (!world.entityExists(entity)) continue;
+				world.setComponent(entity, require_ecs.ZIndex, { value: originalZ });
+			}
+			currentSnap = {
+				snapDx: 0,
+				snapDy: 0,
+				guides: [],
+				spacings: []
+			};
+			inputState = { mode: "idle" };
+			markDirty();
+		} else if (inputState.mode === "marquee") _endMarquee();
+		else if (inputState.mode === "tracking") {
+			inputState = { mode: "idle" };
+			markDirty();
+		}
+	}
+	function handlePointerDown(screenX, screenY, _button, modifiers) {
+		const startWorld = screenToWorld(screenX, screenY, world.getResource(require_ecs.CameraResource));
+		if (inputState.mode === "flyingBack") {
+			const hit = hitTest(screenX, screenY);
+			const target = hit?.entityId === inputState.entityId ? hit.entityId : null;
+			if (target !== null) {
+				world.removeComponent(target, require_ecs.TransformTween);
+				const newStartPositions = /* @__PURE__ */ new Map();
+				for (const e of inputState.startPositions.keys()) {
+					const cur = world.getComponent(e, require_ecs.Transform2D);
+					if (cur) newStartPositions.set(e, {
+						x: cur.x,
+						y: cur.y
+					});
+					if (world.hasComponent(e, require_ecs.TransformTween)) world.removeComponent(e, require_ecs.TransformTween);
+				}
+				commandBuffer.beginGroup();
+				inputState = {
+					mode: "dragging",
+					entityId: target,
+					startWorldX: startWorld.x,
+					startWorldY: startWorld.y,
+					startPositions: newStartPositions,
+					originalZIndices: inputState.originalZIndices
+				};
+				markDirty();
+				return { action: "capture-drag" };
+			}
+		}
+		const hit = hitTest(screenX, screenY);
+		if (!hit) {
+			clearSelection();
+			_beginMarquee(startWorld.x, startWorld.y);
+			return { action: "capture-marquee" };
+		}
+		switch (hit.role.role.type) {
+			case "resize":
+				if (!_beginResize(hit.entityId, hit.role.role.handle, startWorld.x, startWorld.y)) return { action: "passthrough" };
+				return {
+					action: "capture-resize",
+					handle: hit.role.role.handle
+				};
+			case "drag":
+				selectEntity(hit.entityId, modifiers.shift);
+				if (world.hasTag(hit.entityId, require_ecs.Draggable)) inputState = {
+					mode: "tracking",
+					entityId: hit.entityId,
+					startScreenX: screenX,
+					startScreenY: screenY
+				};
+				markDirty();
+				return { action: "passthrough-track-drag" };
+			case "select":
+				selectEntity(hit.entityId, modifiers.shift);
+				markDirty();
+				return { action: "passthrough" };
+			default: return { action: "passthrough" };
+		}
+	}
+	function handlePointerMove(screenX, screenY, _modifiers) {
+		const w = screenToWorld(screenX, screenY, world.getResource(require_ecs.CameraResource));
+		if (inputState.mode === "tracking") {
+			const dx = screenX - inputState.startScreenX;
+			const dy = screenY - inputState.startScreenY;
+			if (Math.abs(dx) > 4 || Math.abs(dy) > 4) {
+				_beginDrag(inputState.entityId, w.x, w.y);
+				return { action: "capture-drag" };
+			}
+			return { action: "passthrough" };
+		}
+		if (inputState.mode === "dragging") {
+			_updateDrag(w.x, w.y);
+			return { action: "capture-drag" };
+		}
+		if (inputState.mode === "resizing") {
+			const handle = inputState.handle;
+			_updateResize(w.x, w.y);
+			return {
+				action: "capture-resize",
+				handle
+			};
+		}
+		if (inputState.mode === "marquee") {
+			_updateMarquee(w.x, w.y);
+			return { action: "capture-marquee" };
+		}
+		if (inputState.mode === "idle") {
+			const hit = hitTest(screenX, screenY);
+			const hoverTarget = hit ? hit.entityId : null;
+			const hoverHandle = hit?.role.role.type === "resize" ? hit.role.role.handle : null;
+			if (hoverTarget !== hoveredEntity || hoverHandle !== hoveredHandle) {
+				hoveredEntity = hoverTarget;
+				hoveredHandle = hoverHandle;
+				markDirty();
+			}
+		}
+		return { action: "passthrough" };
+	}
+	function handlePointerUp() {
+		const mode = inputState.mode;
+		if (mode === "dragging") _endDrag(false);
+		else if (mode === "resizing") _endResize(false);
+		else if (mode === "marquee") _endMarquee();
+		else if (mode === "tracking") inputState = { mode: "idle" };
+		return { action: "passthrough" };
+	}
+	function handlePointerCancel() {
+		_cancelAll();
+	}
+	function beginDrag(_entity, worldX, worldY) {
+		_beginDrag(_entity, worldX, worldY);
+	}
+	function updateDrag(_entity, worldX, worldY) {
+		_updateDrag(worldX, worldY);
+	}
+	function endDrag(_entity, opts) {
+		_endDrag(opts.cancelled);
+	}
+	function beginResize(entity, handle, worldX, worldY) {
+		return _beginResize(entity, handle, worldX, worldY);
+	}
+	function updateResize(_entity, worldX, worldY) {
+		_updateResize(worldX, worldY);
+	}
+	function endResize(_entity, opts) {
+		_endResize(opts.cancelled);
+	}
+	function beginMarquee(worldX, worldY) {
+		_beginMarquee(worldX, worldY);
+	}
+	function updateMarquee(worldX, worldY) {
+		_updateMarquee(worldX, worldY);
+	}
+	function endMarquee() {
+		_endMarquee();
+	}
+	function isMarqueeActive() {
+		return inputState.mode === "marquee";
+	}
+	function getDraggingEntity() {
+		return inputState.mode === "dragging" ? inputState.entityId : null;
+	}
+	function isResizing() {
+		return inputState.mode === "resizing";
+	}
+	function getResizingEntity() {
+		return inputState.mode === "resizing" ? inputState.entityId : null;
+	}
+	function setHoveredEntity(entity) {
+		if (entity === hoveredEntity) return;
+		hoveredEntity = entity;
+		hoveredHandle = null;
+		markDirty();
+	}
+	/**
+	* Update hover state from a screen-space pointer position. Runs the
+	* full hit-test so both `hoveredEntity` and `hoveredHandle` (RFC-005
+	* resize hotspot under the cursor, if any) reflect the current pixel.
+	*
+	* Gated on `idle` mode — hover doesn't refresh during drag / resize /
+	* marquee / fly-back (matches the v1 `handlePointerMove` idle branch).
+	*
+	* Called from the InputManager pipeline's `move` engine handler on
+	* every pointermove: HoverRecognizer's `hover-enter` / `hover-leave`
+	* events only fire on entity transitions, but the cursor needs to
+	* change between resize handles within the same entity, so this path
+	* runs the hit-test per move.
+	*/
+	function updateHover(screenX, screenY) {
+		if (inputState.mode !== "idle") return;
+		const hit = hitTest(screenX, screenY);
+		const target = hit ? hit.entityId : null;
+		const handle = hit?.role.role.type === "resize" ? hit.role.role.handle : null;
+		if (target === hoveredEntity && handle === hoveredHandle) return;
+		hoveredEntity = target;
+		hoveredHandle = handle;
+		markDirty();
+	}
+	/**
+	* Cancel any active interaction state (drag / resize / marquee /
+	* fly-back / tracking). Public surface for the InputManager pipeline's
+	* `cancel` engine handler — `endDrag(.., {cancelled:true})` only handles
+	* `dragging`, but a native `pointercancel` can land in any of the other
+	* mid-gesture modes. `_cancelAll` covers them all.
+	*/
+	function cancelInteraction() {
+		_cancelAll();
+	}
+	return {
+		handlePointerDown,
+		handlePointerMove,
+		handlePointerUp,
+		handlePointerCancel,
+		runCursorSystem,
+		runFlyBackSystem,
+		selectEntity,
+		clearSelection,
+		getHoveredEntity: () => hoveredEntity,
+		setHoveredEntity,
+		updateHover,
+		getSnapGuides: () => currentSnap.guides,
+		getEqualSpacing: () => currentSnap.spacings,
+		/**
+		* Topmost interactable entity under a screen-space point, or null
+		* if nothing's there. Same hit-test the pointer state machine
+		* uses, exposed for callers that need to resolve coords to an
+		* entity without entering the state machine — used by
+		* `installEngineHandlers` (tap, drag-start, double-tap routing) and
+		* the InputManager dispatch loop (surface routing for R3F widgets).
+		*/
+		pickAt: (screenX, screenY) => hitTest(screenX, screenY)?.entityId ?? null,
+		beginDrag,
+		updateDrag,
+		endDrag,
+		cancelInteraction,
+		beginResize,
+		updateResize,
+		endResize,
+		isResizing,
+		getResizingEntity,
+		/**
+		* Rich variant of `pickAt` — returns the entity AND its
+		* `InteractionRoleData` (role + layer) at a screen-space point.
+		* Used by `installEngineHandlers` to role-branch on `drag-start`
+		* (resize → `beginResize`, drag → `beginDrag`, etc.). External
+		* callers that only need the entity id should use `pickAt`.
+		*/
+		hitTest,
+		beginMarquee,
+		updateMarquee,
+		endMarquee,
+		isMarqueeActive,
+		getDraggingEntity
+	};
+}
+//#endregion
+//#region src/ecs/engine/widget-binding.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()];
+		}
+	};
+}
+//#endregion
+//#region src/ecs/engine/LayoutEngine.ts
+/**
+* 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 require_hooks.SpatialIndex();
+	const profiler = new require_hooks.Profiler();
+	scheduler.profiler = profiler;
+	world.setResource(require_ecs.SpatialIndexResource, { instance: spatialIndex });
+	const commandBuffer = new CommandBuffer();
+	const widgetRegistry = createWidgetRegistry();
+	const archetypeRegistry = createArchetypeRegistry();
+	if (config?.zoom) world.setResource(require_ecs.ZoomConfigResource, config.zoom);
+	if (config?.breakpoints) world.setResource(require_ecs.BreakpointConfigResource, config.breakpoints);
+	if (config?.cardPresets) {
+		const current = world.getResource(require_ecs.CardPresetsResource);
+		world.setResource(require_ecs.CardPresetsResource, {
+			presets: {
+				...current.presets,
+				...config.cardPresets.presets
+			},
+			gap: config.cardPresets.gap ?? current.gap
+		});
+	}
+	let snapEnabled = config?.snap?.enabled ?? true;
+	let snapThreshold = config?.snap?.threshold ?? 5;
+	let snapGuidesVisible = config?.snap?.guidesVisible ?? true;
+	scheduler.register(cardSystem);
+	scheduler.register(transformTweenSystem);
+	scheduler.register(navigationFilterSystem);
+	scheduler.register(cullSystem);
+	scheduler.register(breakpointSystem);
+	scheduler.register(sortSystem);
+	scheduler.register(dragPromoteSystem);
+	const unsubscribers = [];
+	unsubscribers.push(world.onComponentChanged(require_ecs.Transform2D, (entityId, _prev, t) => {
+		if (t) spatialIndex.upsert(entityId, rectToAABB(t));
+	}));
+	unsubscribers.push(world.onEntityDestroyed((entity) => {
+		spatialIndex.remove(entity);
+	}));
+	unsubscribers.push(world.onComponentChanged(require_ecs.Container, (entityId, prev, next) => {
+		if (prev === void 0 && next !== void 0) {
+			if (!world.hasComponent(entityId, require_ecs.ContainerCamera)) world.addComponent(entityId, require_ecs.ContainerCamera, {
+				x: 0,
+				y: 0,
+				zoom: 1
+			});
+		}
+	}));
+	unsubscribers.push(world.onComponentChanged(require_ecs.ParentFrame, (entityId) => {
+		reconcileEntityActive(world, entityId);
+		markDirtyInternal();
+	}));
+	function refreshInteractionRole(entity) {
+		const current = world.getComponent(entity, require_ecs.InteractionRole);
+		if (current && current.role.type !== "drag" && current.role.type !== "select" && current.role.type !== "canvas") return;
+		const hasDraggable = world.hasTag(entity, require_ecs.Draggable);
+		const hasSelectable = world.hasTag(entity, require_ecs.Selectable);
+		const desiredRole = hasDraggable ? { type: "drag" } : hasSelectable ? { type: "select" } : null;
+		if (desiredRole === null) {
+			if (current) world.removeComponent(entity, require_ecs.InteractionRole);
+			if (world.hasComponent(entity, require_ecs.CursorHint)) world.removeComponent(entity, require_ecs.CursorHint);
+			return;
+		}
+		if (!current) world.addComponent(entity, require_ecs.InteractionRole, {
+			layer: 5,
+			role: desiredRole
+		});
+		else if (current.role.type !== desiredRole.type) world.setComponent(entity, require_ecs.InteractionRole, { role: desiredRole });
+		if (desiredRole.type === "drag" && !world.hasComponent(entity, require_ecs.CursorHint)) world.addComponent(entity, require_ecs.CursorHint, {
+			hover: "grab",
+			active: "grabbing"
+		});
+	}
+	unsubscribers.push(world.onTagAdded(require_ecs.Draggable, refreshInteractionRole));
+	unsubscribers.push(world.onTagRemoved(require_ecs.Draggable, refreshInteractionRole));
+	unsubscribers.push(world.onTagAdded(require_ecs.Selectable, refreshInteractionRole));
+	unsubscribers.push(world.onTagRemoved(require_ecs.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_ecs.NavigationStackResource, { changed: true });
+	let dirty = false;
+	let cameraChangedThisTick = false;
+	let selectionChangedThisTick = false;
+	let prevVisible = /* @__PURE__ */ new Set();
+	let currentVisible = [];
+	let frameChanges = {
+		positionsChanged: [],
+		breakpointsChanged: [],
+		zIndicesChanged: [],
+		entered: [],
+		exited: [],
+		cameraChanged: false,
+		navigationChanged: false,
+		selectionChanged: false,
+		layersChanged: false
+	};
+	function markDirtyInternal() {
+		dirty = true;
+	}
+	const interaction = createInteractionRuntime({
+		world,
+		spatialIndex,
+		commandBuffer,
+		markDirty: markDirtyInternal,
+		notifySelectionChanged: () => {
+			selectionChangedThisTick = true;
+		},
+		getSnapEnabled: () => snapEnabled,
+		getSnapThreshold: () => snapThreshold,
+		getWidgetInteraction: (type) => widgetRegistry.get(type)?.interaction
+	});
+	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_ecs.Transform2D, {
+					x: position.x,
+					y: position.y,
+					width: size.width,
+					height: size.height,
+					rotation: opts.rotation ?? 0
+				}],
+				[require_ecs.Widget, {
+					surface,
+					type: widgetTypeId
+				}],
+				[require_ecs.WidgetData, { data }],
+				[require_ecs.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_ecs.ParentFrame, { id: opts.parent }]);
+			const interactiveConfig = archetype?.interactive;
+			const caps = interactiveConfig === false ? {
+				selectable: false,
+				draggable: false,
+				resizable: false,
+				selectionFrame: false,
+				snapSource: false,
+				snapTarget: false
+			} : interactiveConfig === void 0 || interactiveConfig === true ? {
+				selectable: true,
+				draggable: true,
+				resizable: true,
+				selectionFrame: true,
+				snapSource: true,
+				snapTarget: true
+			} : (() => {
+				const selectable = interactiveConfig.selectable ?? false;
+				return {
+					selectable,
+					draggable: interactiveConfig.draggable ?? false,
+					resizable: interactiveConfig.resizable ?? false,
+					selectionFrame: interactiveConfig.selectionFrame ?? selectable,
+					snapSource: interactiveConfig.snapSource ?? false,
+					snapTarget: interactiveConfig.snapTarget ?? false
+				};
+			})();
+			if (caps.selectable) inits.push([require_ecs.Selectable]);
+			if (caps.draggable) inits.push([require_ecs.Draggable]);
+			if (caps.resizable) inits.push([require_ecs.Resizable]);
+			if (caps.selectionFrame) inits.push([require_ecs.SelectionFrame]);
+			if (caps.snapSource) inits.push([require_ecs.SnapSource]);
+			if (caps.snapTarget) inits.push([require_ecs.SnapTarget]);
+			if (archetype?.tags) for (const tag of archetype.tags) inits.push([tag]);
+			const entity = engine.createEntity(inits);
+			if (opts.parent !== void 0 && world.hasComponent(opts.parent, require_ecs.ContainerChildren)) {
+				const current = world.getComponent(opts.parent, require_ecs.ContainerChildren);
+				if (current && !current.ids.includes(entity)) world.setComponent(opts.parent, require_ecs.ContainerChildren, { ids: [...current.ids, entity] });
+			}
+			return entity;
+		},
+		spawnAtCameraCenter(id, opts = {}) {
+			const camera = world.getResource(require_ecs.CameraResource);
+			const viewport = world.getResource(require_ecs.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) {
+			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_ecs.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_ecs.CameraResource);
+		},
+		panBy(dx, dy) {
+			const camera = world.getResource(require_ecs.CameraResource);
+			camera.x -= dx / camera.zoom;
+			camera.y -= dy / camera.zoom;
+			cameraChangedThisTick = true;
+			markDirtyInternal();
+		},
+		panTo(worldX, worldY) {
+			const camera = world.getResource(require_ecs.CameraResource);
+			const viewport = world.getResource(require_ecs.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_ecs.CameraResource);
+			const zoomConfig = world.getResource(require_ecs.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_ecs.CameraResource);
+			const zoomConfig = world.getResource(require_ecs.ZoomConfigResource);
+			const viewport = world.getResource(require_ecs.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();
+		},
+		/**
+		* Toggle the camera's `gesturing` flag. Called by gesture handlers
+		* (wheel debounced, touch pinch / pan start+end) so render layers
+		* can defer expensive work — e.g. the R3F compositor skips zoom-band
+		* repaints while gesturing is true so a continuous pinch doesn't
+		* trigger a repaint storm across every visible widget.
+		*/
+		setGesturing(active) {
+			const camera = world.getResource(require_ecs.CameraResource);
+			if (camera.gesturing === active) return;
+			camera.gesturing = active;
+			cameraChangedThisTick = true;
+			markDirtyInternal();
+		},
+		zoomToFit(entityIds, padding = 50) {
+			const viewport = world.getResource(require_ecs.ViewportResource);
+			if (viewport.width === 0) return;
+			const entities = entityIds ?? world.queryTagged(require_ecs.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 t = world.getComponent(e, require_ecs.Transform2D);
+				if (!t) continue;
+				minX = Math.min(minX, t.x);
+				minY = Math.min(minY, t.y);
+				maxX = Math.max(maxX, t.x + t.width);
+				maxY = Math.max(maxY, t.y + t.height);
+			}
+			if (!Number.isFinite(minX)) return;
+			const contentWidth = maxX - minX + padding * 2;
+			const contentHeight = maxY - minY + padding * 2;
+			const zoomConfig = world.getResource(require_ecs.ZoomConfigResource);
+			const zoom = clamp(Math.min(viewport.width / contentWidth, viewport.height / contentHeight), zoomConfig.min, zoomConfig.max);
+			const camera = world.getResource(require_ecs.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_ecs.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) {
+			return interaction.handlePointerDown(screenX, screenY, button, modifiers);
+		},
+		handlePointerMove(screenX, screenY, modifiers) {
+			return interaction.handlePointerMove(screenX, screenY, modifiers);
+		},
+		handlePointerUp() {
+			return interaction.handlePointerUp();
+		},
+		handlePointerCancel() {
+			interaction.handlePointerCancel();
+		},
+		pickAt(screenX, screenY) {
+			return interaction.pickAt(screenX, screenY);
+		},
+		hitTest(screenX, screenY) {
+			return interaction.hitTest(screenX, screenY);
+		},
+		beginDrag(entity, worldX, worldY) {
+			interaction.beginDrag(entity, worldX, worldY);
+		},
+		updateDrag(entity, worldX, worldY) {
+			interaction.updateDrag(entity, worldX, worldY);
+		},
+		endDrag(entity, opts) {
+			interaction.endDrag(entity, opts);
+		},
+		getDraggingEntity() {
+			return interaction.getDraggingEntity();
+		},
+		cancelInteraction() {
+			interaction.cancelInteraction();
+		},
+		beginResize(entity, handle, worldX, worldY) {
+			return interaction.beginResize(entity, handle, worldX, worldY);
+		},
+		updateResize(entity, worldX, worldY) {
+			interaction.updateResize(entity, worldX, worldY);
+		},
+		endResize(entity, opts) {
+			interaction.endResize(entity, opts);
+		},
+		isResizing() {
+			return interaction.isResizing();
+		},
+		getResizingEntity() {
+			return interaction.getResizingEntity();
+		},
+		beginMarquee(worldX, worldY) {
+			interaction.beginMarquee(worldX, worldY);
+		},
+		updateMarquee(worldX, worldY) {
+			interaction.updateMarquee(worldX, worldY);
+		},
+		endMarquee() {
+			interaction.endMarquee();
+		},
+		isMarqueeActive() {
+			return interaction.isMarqueeActive();
+		},
+		getSelectedEntities() {
+			return world.queryTagged(require_ecs.Selected);
+		},
+		selectEntity(entity, additive) {
+			interaction.selectEntity(entity, additive);
+		},
+		clearSelection() {
+			interaction.clearSelection();
+		},
+		getHoveredEntity() {
+			return interaction.getHoveredEntity();
+		},
+		setHoveredEntity(entity) {
+			interaction.setHoveredEntity(entity);
+		},
+		updateHover(screenX, screenY) {
+			interaction.updateHover(screenX, screenY);
+		},
+		getSnapGuides() {
+			return interaction.getSnapGuides();
+		},
+		getEqualSpacing() {
+			return interaction.getEqualSpacing();
+		},
+		setSnapEnabled(on) {
+			snapEnabled = on;
+			markDirtyInternal();
+		},
+		setSnapThreshold(worldPx) {
+			snapThreshold = worldPx;
+			markDirtyInternal();
+		},
+		getSnapGuidesVisible() {
+			return snapGuidesVisible;
+		},
+		setSnapGuidesVisible(on) {
+			snapGuidesVisible = on;
+			markDirtyInternal();
+		},
+		enterContainer(entity) {
+			if (!world.hasComponent(entity, require_ecs.Container)) return;
+			const navStack = world.getResource(require_ecs.NavigationStackResource);
+			const camera = world.getResource(require_ecs.CameraResource);
+			const outgoing = navStack.frames[navStack.frames.length - 1].containerId;
+			if (outgoing === null) world.setResource(require_ecs.RootCameraResource, {
+				x: camera.x,
+				y: camera.y,
+				zoom: camera.zoom
+			});
+			else world.setComponent(outgoing, require_ecs.ContainerCamera, {
+				x: camera.x,
+				y: camera.y,
+				zoom: camera.zoom
+			});
+			navStack.frames.push({ containerId: entity });
+			navStack.changed = true;
+			const incoming = world.getComponent(entity, require_ecs.ContainerCamera) ?? {
+				x: 0,
+				y: 0,
+				zoom: 1
+			};
+			camera.x = incoming.x;
+			camera.y = incoming.y;
+			camera.zoom = incoming.zoom;
+			interaction.clearSelection();
+			cameraChangedThisTick = true;
+			markDirtyInternal();
+		},
+		exitContainer() {
+			const navStack = world.getResource(require_ecs.NavigationStackResource);
+			if (navStack.frames.length <= 1) return;
+			const camera = world.getResource(require_ecs.CameraResource);
+			const outgoing = navStack.frames[navStack.frames.length - 1].containerId;
+			if (outgoing !== null) world.setComponent(outgoing, require_ecs.ContainerCamera, {
+				x: camera.x,
+				y: camera.y,
+				zoom: camera.zoom
+			});
+			navStack.frames.pop();
+			navStack.changed = true;
+			const parent = navStack.frames[navStack.frames.length - 1].containerId;
+			const incoming = parent === null ? world.getResource(require_ecs.RootCameraResource) : world.getComponent(parent, require_ecs.ContainerCamera) ?? {
+				x: 0,
+				y: 0,
+				zoom: 1
+			};
+			camera.x = incoming.x;
+			camera.y = incoming.y;
+			camera.zoom = incoming.zoom;
+			interaction.clearSelection();
+			cameraChangedThisTick = true;
+			markDirtyInternal();
+		},
+		getActiveContainer() {
+			const navStack = world.getResource(require_ecs.NavigationStackResource);
+			return navStack.frames[navStack.frames.length - 1].containerId;
+		},
+		getNavigationDepth() {
+			return world.getResource(require_ecs.NavigationStackResource).frames.length - 1;
+		},
+		markDirty() {
+			markDirtyInternal();
+		},
+		profiler,
+		tick() {
+			profiler.beginFrame(world.currentTick);
+			const navigationChangedThisTick = world.getResource(require_ecs.NavigationStackResource)?.changed ?? false;
+			scheduler.execute(world);
+			interaction.runFlyBackSystem();
+			interaction.runCursorSystem();
+			profiler.beginVisibility();
+			const newVisible = [];
+			const newVisibleSet = /* @__PURE__ */ new Set();
+			for (const entity of world.query(require_ecs.Widget, require_ecs.Visible)) {
+				const t = world.getComponent(entity, require_ecs.Transform2D);
+				const widget = world.getComponent(entity, require_ecs.Widget);
+				const bp = world.getComponent(entity, require_ecs.WidgetBreakpoint);
+				const zIdx = world.getComponent(entity, require_ecs.ZIndex);
+				if (!t || !widget) continue;
+				newVisibleSet.add(entity);
+				newVisible.push({
+					entityId: entity,
+					x: t.x,
+					y: t.y,
+					width: t.width,
+					height: t.height,
+					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_ecs.Transform2D),
+				breakpointsChanged: world.queryChanged(require_ecs.WidgetBreakpoint),
+				zIndicesChanged: world.queryChanged(require_ecs.ZIndex),
+				entered,
+				exited,
+				cameraChanged: cameraChangedThisTick,
+				navigationChanged: navigationChangedThisTick,
+				selectionChanged: selectionChangedThisTick,
+				layersChanged: world.queryChanged(require_ecs.Layer).length > 0
+			};
+			currentVisible = newVisible;
+			prevVisible = newVisibleSet;
+			cameraChangedThisTick = false;
+			selectionChangedThisTick = false;
+			profiler.endFrame(world.entityCount, newVisible.length);
+			world.clearDirty();
+			world.incrementTick();
+			world.emitFrame();
+			dirty = false;
+			for (const _ of world.query(require_ecs.TransformTween)) {
+				dirty = true;
+				break;
+			}
+		},
+		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/ecs/hierarchy.ts
+/**
+* Walks the `ParentFrame` chain from `descendant` upward and returns
+* true iff `candidate` appears on that chain (inclusive check excluded:
+* an entity is not considered its own ancestor).
+*
+* Used by `CardContainer`'s default `canAccept` as a cycle-guard so
+* dragging a container onto one of its own descendants is rejected
+* before any mutation fires (RFC-004 § Phase 5). Cheap — the chain is
+* typically 0–3 deep. Capped at a sane depth to defend against
+* pathological / malformed worlds.
+*/
+function isFrameAncestorOf(world, candidate, descendant) {
+	if (candidate === descendant) return false;
+	let current = descendant;
+	for (let i = 0; i < 64; i++) {
+		const pf = world.getComponent(current, require_ecs.ParentFrame);
+		if (!pf) return false;
+		if (pf.id === candidate) return true;
+		current = pf.id;
+	}
+	return false;
+}
+//#endregion
+//#region src/react/hooks/widget.ts
 /**
 * Returns the custom data attached to a widget entity.
 * Use the generic parameter for type safety: `useWidgetData<MyData>(entityId)`. Re-renders when data changes.
 */
 function useWidgetData(entityId) {
-	return require_hooks.useComponent(entityId, require_hooks.WidgetData)?.data ?? {};
+	return require_ecs.useComponent(entityId, require_ecs.WidgetData)?.data ?? {};
 }
 /**
 * Returns the current responsive breakpoint for a widget based on its screen-space size.
 * Re-renders when the breakpoint changes.
 */
 function useBreakpoint(entityId) {
-	return require_hooks.useComponent(entityId, require_hooks.WidgetBreakpoint)?.current ?? "normal";
+	return require_ecs.useComponent(entityId, require_ecs.WidgetBreakpoint)?.current ?? "normal";
 }
 /**
 * Returns child entity IDs of a container entity.
 * Re-renders when children are added or removed.
 */
 function useChildren(entityId) {
-	return require_hooks.useComponent(entityId, require_hooks.Children)?.ids ?? [];
+	return require_ecs.useComponent(entityId, require_ecs.Children)?.ids ?? [];
 }
 /**
 * Returns whether the entity is currently selected.
 * Re-renders when the entity's selection state changes.
 */
 function useIsSelected(entityId) {
-	return require_hooks.useTag(entityId, require_hooks.Selected);
+	return require_ecs.useTag(entityId, require_ecs.Selected);
 }
 /**
 * Returns a function to update the widget's custom data.
 * Merges the patch into existing data via shallow spread.
 */
 function useUpdateWidget(entityId) {
-	const engine = require_hooks.useLayoutEngine();
+	const engine = require_ecs.useLayoutEngine();
 	return (0, react.useCallback)((patch) => {
-		const existing = engine.get(entityId, require_hooks.WidgetData);
-		if (existing) engine.set(entityId, require_hooks.WidgetData, { data: {
+		const existing = engine.get(entityId, require_ecs.WidgetData);
+		if (existing) engine.set(entityId, require_ecs.WidgetData, { data: {
 			...existing.data,
 			...patch
 		} });
 	}, [engine, entityId]);
 }
 //#endregion
-//#region src/react/card.tsx
-/**
-* Built-in preset sizes, matching `CardPresetsResource` defaults.
-* Used by `createCardWidget` to set `defaultSize` at widget-registration
-* time (before the engine is constructed).
-*/
-const DEFAULT_CARD_PRESET_SIZES$1 = {
-	small: {
-		width: 155,
-		height: 155
-	},
-	medium: {
-		width: 329,
-		height: 155
-	},
-	large: {
-		width: 329,
-		height: 345
-	},
-	xl: {
-		width: 329,
-		height: 535
+//#region src/react/input/adapters/ClickAdapter.ts
+/**
+* Click / dblclick / contextmenu adapter (RFC-008 v6).
+*
+* The browser fires click / dblclick / contextmenu through a native event
+* channel that's distinct from `pointerdown` / `pointerup` — they're
+* synthesised after the pointer cycle completes (down → up with little
+* movement, double-click within a short window, right-click). Pre-v6 the
+* canvas had no adapter for these: R3F registered its own listeners on
+* the container via `EventManager.connect`, and the InputManager pipeline
+* never saw them. Two side effects:
+*
+*   1. A click on a mesh that called `setPointerCapture` skipped the
+*      `tap` recognizer (capture-claim) so the engine's selection logic
+*      didn't run — the widget didn't select.
+*   2. Clicks couldn't be observed by recognizers / handlers / external
+*      listeners through the manager, only via direct R3F mesh handlers.
+*
+* v6 makes click / dblclick / contextmenu first-class `InputEvent`s. The
+* adapter dispatches them through `InputManager.dispatch`, which routes
+* to the surface router (R3FRouter for webgl widgets — invokes the
+* mesh's `onClick` etc.) and fires engine handlers (which run
+* `selectEntity` for click, `enterContainer` for dblclick).
+*
+* `preventDefault` discipline:
+*   - `click` / `dblclick`: never. Browser focus / activation must run.
+*   - `contextmenu`: always. Canvas isn't a place for the browser context
+*     menu.
+*
+* Native-interactive skip mirrors `PointerAdapter`: a click landing on a
+* `<button>` / `<input>` / etc. inside a DOM widget is suppressed at the
+* adapter so the widget body doesn't get re-selected over the user's
+* intent (typing, button activation, etc.). Authors who want canvas-level
+* coexistence with their own native interactive call
+* `e.stopPropagation()` so the click never reaches the container.
+*/
+var ClickAdapter = class {
+	attach(container, manager) {
+		const make = (type, e) => {
+			const rect = container.getBoundingClientRect();
+			const screen = {
+				x: e.clientX - rect.left,
+				y: e.clientY - rect.top
+			};
+			const camera = manager.engine.getCamera();
+			const world = screenToWorld(screen.x, screen.y, camera);
+			const button = e.button ?? null;
+			return {
+				type,
+				source: clickSource(e),
+				pointerId: pointerIdOf(e),
+				primary: true,
+				screen,
+				world,
+				button,
+				modifiers: {
+					shift: e.shiftKey,
+					ctrl: e.ctrlKey,
+					alt: e.altKey,
+					meta: e.metaKey
+				},
+				timestamp: e.timeStamp,
+				native: e
+			};
+		};
+		const onClick = (e) => {
+			const target = e.target;
+			const targetTag = target ? `${target.tagName}${target.id ? `#${target.id}` : ""}` : "null";
+			if (target?.closest("button, input, textarea, select, [contenteditable]")) {
+				require_hooks.inputLog("Adapter", `click → SKIPPED (native interactive)`, { target: targetTag });
+				return;
+			}
+			require_hooks.inputLog("Adapter", `click → InputManager`, {
+				screen: {
+					x: e.clientX - container.getBoundingClientRect().left,
+					y: e.clientY - container.getBoundingClientRect().top
+				},
+				target: targetTag
+			});
+			manager.dispatch(make("click", e));
+		};
+		const onDblClick = (e) => {
+			if (e.target?.closest("button, input, textarea, select, [contenteditable]")) return;
+			require_hooks.inputLog("Adapter", `dblclick → InputManager`);
+			manager.dispatch(make("dblclick", e));
+		};
+		const onContextMenu = (e) => {
+			e.preventDefault();
+			if (e.target?.closest("button, input, textarea, select, [contenteditable]")) return;
+			require_hooks.inputLog("Adapter", `contextmenu → InputManager`);
+			manager.dispatch(make("contextmenu", e));
+		};
+		container.addEventListener("click", onClick);
+		container.addEventListener("dblclick", onDblClick);
+		container.addEventListener("contextmenu", onContextMenu);
+		return () => {
+			container.removeEventListener("click", onClick);
+			container.removeEventListener("dblclick", onDblClick);
+			container.removeEventListener("contextmenu", onContextMenu);
+		};
 	}
 };
+function pointerIdOf(e) {
+	const pe = e;
+	return typeof pe.pointerId === "number" ? pe.pointerId : 0;
+}
+function clickSource(e) {
+	switch (e.pointerType) {
+		case "mouse": return "mouse";
+		case "pen": return "pen";
+		case "touch": return "touch";
+		default: return "mouse";
+	}
+}
+//#endregion
+//#region src/react/input/adapters/PointerAdapter.ts
 /**
-* Visual chrome for an iOS-style card: rounded corners, hairline ring,
-* soft drop shadow, and a subtle lift (scale + stronger shadow) while
-* the entity carries the `Dragging` tag.
+* Native pointer-event adapter (RFC-008). Listens for pointerdown / move /
+* up / cancel / pointerleave on the canvas container, normalises into
+* `InputEvent`s, and dispatches via `manager.dispatch(...)`.
+*
+* Single-finger and multi-finger touch flow through this adapter via the
+* browser's touch-to-pointer synthesis (`touch-action: none` on the
+* container is what makes synthesis reliable). PinchRecognizer counts
+* simultaneous active touch-source pointer IDs from these events.
+*
+* `preventDefault` discipline:
+*   - Pointer events: never. Bubble must continue so widget React handlers
+*     fire and so widgets can call `setPointerCapture` to claim drags.
+*   - `contextmenu`: handled by `ClickAdapter`, not here.
+*
+* `pointerdown` on a native interactive target (button, input, etc.) is
+* suppressed at the adapter so a button click inside a DOM widget can't
+* spawn a marquee or drag. Move / up / cancel still flow so hover chrome
+* stays accurate.
 *
-* Uses CSS transitions — no animation library dependency.
+* `pointerleave` is dispatched as its own InputEvent type so engine hover
+* chrome can clear when the cursor exits the canvas — without an inline
+* listener outside the InputManager pipeline (RFC-008 v6 unification).
 */
-function CardFrame({ entityId, children, className, style }) {
-	const dragging = require_hooks.useTag(entityId, require_hooks.Dragging);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className,
-		style: {
-			width: "100%",
-			height: "100%",
-			borderRadius: "21.67px",
-			overflow: "hidden",
-			boxShadow: dragging ? "0 30px 60px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06)" : "0 20px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05)",
-			transform: dragging ? "scale(1.05)" : "scale(1)",
-			transformOrigin: "center center",
-			transition: "transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 180ms cubic-bezier(0.2, 0.9, 0.3, 1.2)",
-			willChange: dragging ? "transform, box-shadow" : void 0,
-			...style
-		},
-		children
-	});
+var PointerAdapter = class {
+	attach(container, manager) {
+		const lastByPointerId = /* @__PURE__ */ new Map();
+		const make = (type, e) => {
+			const rect = container.getBoundingClientRect();
+			const screen = {
+				x: e.clientX - rect.left,
+				y: e.clientY - rect.top
+			};
+			const camera = manager.engine.getCamera();
+			const world = screenToWorld(screen.x, screen.y, camera);
+			const last = lastByPointerId.get(e.pointerId);
+			const delta = last ? {
+				x: screen.x - last.x,
+				y: screen.y - last.y
+			} : void 0;
+			const button = type === "down" || type === "up" ? e.button ?? null : null;
+			return {
+				type,
+				source: pointerSource(e),
+				pointerId: e.pointerId,
+				primary: e.isPrimary,
+				screen,
+				world,
+				delta,
+				button,
+				modifiers: {
+					shift: e.shiftKey,
+					ctrl: e.ctrlKey,
+					alt: e.altKey,
+					meta: e.metaKey
+				},
+				timestamp: e.timeStamp,
+				native: e
+			};
+		};
+		const onDown = (e) => {
+			const rect = container.getBoundingClientRect();
+			const screen = {
+				x: e.clientX - rect.left,
+				y: e.clientY - rect.top
+			};
+			lastByPointerId.set(e.pointerId, screen);
+			const target = e.target;
+			const targetTag = target ? `${target.tagName}${target.id ? `#${target.id}` : ""}` : "null";
+			if (target?.closest("button, input, textarea, select, [contenteditable]")) {
+				require_hooks.inputLog("Adapter", `pointerdown → SKIPPED (native interactive)`, {
+					pointerId: e.pointerId,
+					target: targetTag,
+					source: e.pointerType
+				});
+				return;
+			}
+			require_hooks.inputLog("Adapter", `pointerdown id=${e.pointerId} → InputManager`, {
+				pointerId: e.pointerId,
+				screen,
+				button: e.button,
+				source: e.pointerType,
+				target: targetTag
+			});
+			const event = make("down", e);
+			manager.dispatch({
+				...event,
+				delta: void 0
+			});
+		};
+		const onMove = (e) => {
+			const event = make("move", e);
+			lastByPointerId.set(e.pointerId, {
+				x: event.screen.x,
+				y: event.screen.y
+			});
+			require_hooks.inputLog("Adapter", `pointermove id=${e.pointerId} → InputManager`, {
+				type: "move",
+				pointerId: e.pointerId,
+				screen: event.screen
+			});
+			manager.dispatch(event);
+		};
+		const onUp = (e) => {
+			require_hooks.inputLog("Adapter", `pointerup id=${e.pointerId} → InputManager`, {
+				pointerId: e.pointerId,
+				source: e.pointerType
+			});
+			manager.dispatch(make("up", e));
+			lastByPointerId.delete(e.pointerId);
+		};
+		const onCancel = (e) => {
+			require_hooks.inputLog("Adapter", `pointercancel id=${e.pointerId} → InputManager`, { pointerId: e.pointerId });
+			manager.dispatch(make("cancel", e));
+			lastByPointerId.delete(e.pointerId);
+		};
+		const onLeave = (e) => {
+			require_hooks.inputLog("Adapter", `pointerleave id=${e.pointerId} → InputManager`, {
+				pointerId: e.pointerId,
+				source: e.pointerType
+			});
+			manager.dispatch(make("pointerleave", e));
+			lastByPointerId.delete(e.pointerId);
+		};
+		container.addEventListener("pointerdown", onDown);
+		container.addEventListener("pointermove", onMove);
+		container.addEventListener("pointerup", onUp);
+		container.addEventListener("pointercancel", onCancel);
+		container.addEventListener("pointerleave", onLeave);
+		return () => {
+			container.removeEventListener("pointerdown", onDown);
+			container.removeEventListener("pointermove", onMove);
+			container.removeEventListener("pointerup", onUp);
+			container.removeEventListener("pointercancel", onCancel);
+			container.removeEventListener("pointerleave", onLeave);
+			lastByPointerId.clear();
+		};
+	}
+};
+function pointerSource(e) {
+	switch (e.pointerType) {
+		case "mouse": return "mouse";
+		case "pen": return "pen";
+		case "touch": return "touch";
+		default: return "mouse";
+	}
 }
+//#endregion
+//#region src/react/input/adapters/WheelAdapter.ts
 /**
-* Returns a paired widget + archetype for an iOS-style card. Register both
-* with `createLayoutEngine({ widgets: [card.widget], archetypes: [card.archetype] })`
-* (or via `engine.registerWidget` / `engine.registerArchetype`) and spawn with
-* `engine.spawn('your-card-type', { at, data })`.
+* Wheel adapter (RFC-008). Listens for native wheel events on the canvas
+* container, normalises into `InputEvent`s with a `wheelDelta` payload,
+* and dispatches via `manager.dispatch(...)`.
 *
-* The produced widget is non-resizable (Selectable + Draggable only), wrapped
-* in `<CardFrame>`, and spawns with a `Card` component so `cardSystem` enforces
-* the preset size each tick.
+* Always calls `preventDefault()` — we always own canvas pan/zoom from
+* wheel input. Widgets that want internal scroll content call
+* `e.stopPropagation()` on `wheel` from inside their React tree, which
+* halts the bubble before it reaches this listener.
+*
+* `wheelDelta.pinch` is true when ctrl or meta is held — browsers
+* translate trackpad pinch into ctrl+wheel events; the engine wheel
+* handler interprets pinch as zoom and plain wheel as pan.
 */
-function createCardWidget(opts) {
-	const defaultSize = DEFAULT_CARD_PRESET_SIZES$1[opts.size];
-	const Render = opts.render;
-	const Component = ({ entityId }) => {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardFrame, {
-			entityId,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Render, {
-				entityId,
-				data: useWidgetData(entityId)
-			})
+var WheelAdapter = class {
+	attach(container, manager) {
+		const onWheel = (e) => {
+			e.preventDefault();
+			const rect = container.getBoundingClientRect();
+			const screen = {
+				x: e.clientX - rect.left,
+				y: e.clientY - rect.top
+			};
+			const camera = manager.engine.getCamera();
+			const event = {
+				type: "wheel",
+				source: "wheel",
+				pointerId: 0,
+				primary: true,
+				screen,
+				world: screenToWorld(screen.x, screen.y, camera),
+				wheelDelta: {
+					dx: e.deltaX,
+					dy: e.deltaY,
+					pinch: e.ctrlKey || e.metaKey
+				},
+				modifiers: {
+					shift: e.shiftKey,
+					ctrl: e.ctrlKey,
+					alt: e.altKey,
+					meta: e.metaKey
+				},
+				timestamp: e.timeStamp,
+				native: e
+			};
+			require_hooks.inputLog("Adapter", `wheel → InputManager`, {
+				type: "wheel",
+				screen,
+				dx: e.deltaX,
+				dy: e.deltaY,
+				pinch: e.ctrlKey || e.metaKey
+			});
+			manager.dispatch(event);
+		};
+		container.addEventListener("wheel", onWheel, { passive: false });
+		return () => {
+			container.removeEventListener("wheel", onWheel);
+		};
+	}
+};
+//#endregion
+//#region src/react/input/constants.ts
+/** Double-tap zoom level cycle. */
+const ZOOM_TARGETS = [1, 2];
+/** Wheel deltaY → zoom delta multiplier. Matches today's wheel `useEffect`. */
+const WHEEL_ZOOM_FACTOR = .01;
+//#endregion
+//#region src/react/input/InputManager.ts
+/**
+* RFC-008 input pipeline core. Adapters dispatch normalised InputEvents;
+* routers deliver to widget surfaces; engine handlers and recognizers
+* react.
+*
+* Lifecycle:
+*   1. Construct: `new InputManager(engine, container, [adapter, ...])`.
+*   2. Register handlers / recognizers / routers as needed.
+*   3. `attach()` — mounts adapters; returns detacher.
+*   4. Dispatch flows through automatically as native events arrive.
+*   5. Detacher tears down adapters and clears the gesturing debounce.
+*/
+var InputManager = class {
+	handlers = /* @__PURE__ */ new Map();
+	recognizers = [];
+	routers = /* @__PURE__ */ new Map();
+	gesturingClearTimer = null;
+	constructor(engine, container, adapters) {
+		this.engine = engine;
+		this.container = container;
+		this.adapters = adapters;
+	}
+	attach() {
+		const detachers = this.adapters.map((a) => a.attach(this.container, this));
+		return () => {
+			for (const d of detachers) try {
+				d();
+			} catch (err) {
+				console.error("[InputManager] adapter detach threw", err);
+			}
+			if (this.gesturingClearTimer !== null) {
+				clearTimeout(this.gesturingClearTimer);
+				this.gesturingClearTimer = null;
+			}
+			for (const r of this.recognizers) try {
+				r.reset?.();
+			} catch (err) {
+				console.error("[InputManager] recognizer reset threw", err);
+			}
+		};
+	}
+	on(type, handler) {
+		let set = this.handlers.get(type);
+		if (!set) {
+			set = /* @__PURE__ */ new Set();
+			this.handlers.set(type, set);
+		}
+		set.add(handler);
+		return () => {
+			const s = this.handlers.get(type);
+			if (s) {
+				s.delete(handler);
+				if (s.size === 0) this.handlers.delete(type);
+			}
+		};
+	}
+	addRecognizer(r) {
+		this.recognizers.push(r);
+		return () => {
+			const i = this.recognizers.indexOf(r);
+			if (i !== -1) this.recognizers.splice(i, 1);
+		};
+	}
+	setRouter(router) {
+		this.routers.set(router.surface, router);
+		return () => {
+			if (this.routers.get(router.surface) === router) this.routers.delete(router.surface);
+		};
+	}
+	dispatch(event) {
+		const closeGroup = require_hooks.inputGroupStart(`dispatch ${event.type} id=${event.pointerId}`);
+		require_hooks.inputLog("InputManager", `dispatch ${event.type}`, {
+			type: event.type,
+			source: event.source,
+			pointerId: event.pointerId,
+			screen: event.screen,
+			world: event.world
+		});
+		if ((event.type === "down" || event.type === "move" || event.type === "up" || event.type === "cancel" || event.type === "click" || event.type === "dblclick" || event.type === "contextmenu") && event.source !== "synthetic" && this.routers.size > 0) {
+			const entityId = this.engine.pickAt(event.screen.x, event.screen.y);
+			if (entityId !== null) {
+				const surface = this.surfaceOf(entityId);
+				const router = surface !== null ? this.routers.get(surface) : void 0;
+				require_hooks.inputLog("InputManager", `routing → ${surface ?? "none"} entity=${entityId}`, {
+					type: event.type,
+					entityId,
+					surface,
+					hasRouter: !!router
+				});
+				if (router) try {
+					router.route(event, entityId);
+				} catch (err) {
+					console.error("[InputManager] router threw", err);
+				}
+			} else require_hooks.inputLog("InputManager", `routing → empty space (pickAt null)`, {
+				type: event.type,
+				screen: event.screen
+			});
+		}
+		let claimed = false;
+		if (event.source !== "synthetic") {
+			for (const router of this.routers.values()) if (router.isPointerClaimed?.(event.pointerId)) {
+				claimed = true;
+				require_hooks.inputLog("InputManager", `claim check → CLAIMED by ${router.surface} router (recognizers will skip)`, {
+					type: event.type,
+					pointerId: event.pointerId
+				});
+				break;
+			}
+		}
+		const handlers = this.handlers.get(event.type);
+		if (handlers && handlers.size > 0) {
+			require_hooks.inputLog("InputManager", `handlers for ${event.type}: ${handlers.size} → firing`, {
+				type: event.type,
+				count: handlers.size
+			});
+			for (const h of handlers) try {
+				h(event);
+			} catch (err) {
+				console.error("[InputManager] handler threw", err);
+			}
+		}
+		if (!claimed) for (const r of this.recognizers) try {
+			r.observe(event, this);
+		} catch (err) {
+			console.error("[InputManager] recognizer threw", err);
+		}
+		else require_hooks.inputLog("InputManager", `recognizers skipped (pointer claimed)`, {
+			type: event.type,
+			pointerId: event.pointerId
+		});
+		closeGroup();
+	}
+	pickAt(screen) {
+		return this.engine.pickAt(screen.x, screen.y);
+	}
+	notifyGesturing() {
+		this.engine.setGesturing(true);
+		if (this.gesturingClearTimer !== null) clearTimeout(this.gesturingClearTimer);
+		this.gesturingClearTimer = setTimeout(() => {
+			this.engine.setGesturing(false);
+			this.gesturingClearTimer = null;
+		}, 200);
+	}
+	/** Resolve an entity's rendering surface via the `Widget` component. */
+	surfaceOf(entityId) {
+		const w = this.engine.get(entityId, require_ecs.Widget);
+		if (!w) return null;
+		if (w.surface === "dom" || w.surface === "webgl" || w.surface === "webview") return w.surface;
+		return null;
+	}
+};
+//#endregion
+//#region src/react/input/installEngineHandlers.ts
+/**
+* RFC-008 § Engine handler registration. Wires the engine's input
+* primitives (`beginDrag`, `selectEntity`, camera ops, hover state, etc.)
+* to the synthetic events emitted by recognizers and the raw events
+* emitted by adapters. Returns a teardown that removes every handler.
+*
+* The `container` is the canvas-container DOM element. Pointer-capture
+* for drags is anchored on it so the gesture survives the cursor leaving
+* the container's bounds.
+*/
+function installEngineHandlers(manager, engine, container) {
+	let lastPinchCenter = null;
+	const offs = [];
+	offs.push(manager.on("wheel", (e) => {
+		const w = e.wheelDelta;
+		if (!w) return;
+		if (w.pinch) engine.zoomAtPoint(e.screen.x, e.screen.y, -w.dy * WHEEL_ZOOM_FACTOR);
+		else engine.panBy(-w.dx, -w.dy);
+		manager.notifyGesturing();
+	}));
+	offs.push(manager.on("pinch-start", (e) => {
+		const g = e.gesture;
+		lastPinchCenter = {
+			x: g.center.x,
+			y: g.center.y
+		};
+		manager.notifyGesturing();
+	}));
+	offs.push(manager.on("pinch-update", (e) => {
+		const g = e.gesture;
+		engine.zoomAtPoint(g.center.x, g.center.y, g.scale - 1);
+		if (lastPinchCenter) engine.panBy(g.center.x - lastPinchCenter.x, g.center.y - lastPinchCenter.y);
+		lastPinchCenter = {
+			x: g.center.x,
+			y: g.center.y
+		};
+		manager.notifyGesturing();
+	}));
+	offs.push(manager.on("pinch-end", () => {
+		lastPinchCenter = null;
+	}));
+	offs.push(manager.on("pan-update", (e) => {
+		const g = e.gesture;
+		engine.panBy(g.delta.x, g.delta.y);
+		manager.notifyGesturing();
+	}));
+	offs.push(manager.on("click", (e) => {
+		if (e.button !== 0 && e.button !== null) return;
+		const entity = engine.pickAt(e.screen.x, e.screen.y);
+		if (entity !== null) {
+			require_hooks.inputLog("Engine", `click on entity ${entity} → selectEntity (shift=${e.modifiers.shift})`);
+			engine.selectEntity(entity, e.modifiers.shift);
+		} else {
+			require_hooks.inputLog("Engine", `click on empty space → clearSelection`);
+			engine.clearSelection();
+		}
+	}));
+	offs.push(manager.on("dblclick", (e) => {
+		const entity = engine.pickAt(e.screen.x, e.screen.y);
+		if (entity !== null) {
+			require_hooks.inputLog("Engine", `dblclick on entity ${entity} → enterContainer`);
+			engine.enterContainer(entity);
+			return;
+		}
+		const camera = engine.getCamera();
+		const target = camera.zoom < .9 ? ZOOM_TARGETS[0] : camera.zoom < 1.8 ? ZOOM_TARGETS[1] : ZOOM_TARGETS[0];
+		require_hooks.inputLog("Engine", `dblclick on empty → zoomAtPoint target=${target}x`);
+		engine.zoomAtPoint(e.screen.x, e.screen.y, (target - camera.zoom) / camera.zoom);
+	}));
+	offs.push(manager.on("drag-start", (e) => {
+		const hit = engine.hitTest(e.screen.x, e.screen.y);
+		container.setPointerCapture(e.pointerId);
+		if (!hit) {
+			if (e.source === "touch") {
+				require_hooks.inputLog("Engine", `drag-start on empty (touch) → defer to PanRecognizer`, { pointerId: e.pointerId });
+				return;
+			}
+			require_hooks.inputLog("Engine", `drag-start on empty (mouse/pen) → beginMarquee`, { pointerId: e.pointerId });
+			engine.clearSelection();
+			engine.beginMarquee(e.world.x, e.world.y);
+			return;
+		}
+		if (hit.role.role.type === "resize") {
+			require_hooks.inputLog("Engine", `drag-start on resize handle → beginResize ${hit.role.role.handle}`, {
+				entityId: hit.entityId,
+				handle: hit.role.role.handle
+			});
+			engine.beginResize(hit.entityId, hit.role.role.handle, e.world.x, e.world.y);
+			return;
+		}
+		if (!engine.getSelectedEntities().includes(hit.entityId)) engine.selectEntity(hit.entityId, e.modifiers.shift);
+		require_hooks.inputLog("Engine", `drag-start on entity → beginDrag ${hit.entityId}`, {
+			entityId: hit.entityId,
+			role: hit.role.role.type,
+			shift: e.modifiers.shift
 		});
+		engine.beginDrag(hit.entityId, e.world.x, e.world.y);
+	}));
+	offs.push(manager.on("drag-update", (e) => {
+		if (engine.isMarqueeActive()) {
+			engine.updateMarquee(e.world.x, e.world.y);
+			return;
+		}
+		const resizing = engine.getResizingEntity();
+		if (resizing !== null) {
+			engine.updateResize(resizing, e.world.x, e.world.y);
+			return;
+		}
+		const dragging = engine.getDraggingEntity();
+		if (dragging !== null) engine.updateDrag(dragging, e.world.x, e.world.y);
+	}));
+	offs.push(manager.on("drag-end", (e) => {
+		if (engine.isMarqueeActive()) {
+			require_hooks.inputLog("Engine", `drag-end → endMarquee`);
+			engine.endMarquee();
+		} else {
+			const resizing = engine.getResizingEntity();
+			if (resizing !== null) {
+				require_hooks.inputLog("Engine", `drag-end → endResize ${resizing} (commit)`);
+				engine.endResize(resizing, { cancelled: false });
+			} else {
+				const dragging = engine.getDraggingEntity();
+				if (dragging !== null) {
+					require_hooks.inputLog("Engine", `drag-end → endDrag ${dragging} (commit)`);
+					engine.endDrag(dragging, { cancelled: false });
+				}
+			}
+		}
+		if (container.hasPointerCapture(e.pointerId)) container.releasePointerCapture(e.pointerId);
+	}));
+	offs.push(manager.on("cancel", (e) => {
+		require_hooks.inputLog("Engine", `cancel → cancelInteraction (covers all mid-gesture modes)`, { pointerId: e.pointerId });
+		engine.cancelInteraction();
+		if (container.hasPointerCapture(e.pointerId)) container.releasePointerCapture(e.pointerId);
+	}));
+	offs.push(manager.on("move", (e) => {
+		engine.updateHover(e.screen.x, e.screen.y);
+	}));
+	offs.push(manager.on("pointerleave", () => {
+		require_hooks.inputLog("Engine", `pointerleave → setHoveredEntity(null)`);
+		engine.setHoveredEntity(null);
+	}));
+	return () => {
+		for (const off of offs) off();
+		lastPinchCenter = null;
 	};
+}
+//#endregion
+//#region src/react/input/synthetic.ts
+/**
+* Helper for constructing recognizer-emitted synthetic events. The
+* recognizer copies pointerId / modifiers / coords from the base raw
+* event, sets `source: 'synthetic'`, and attaches a `gesture` payload.
+*/
+function makeSynthetic(type, base, gesture, overrides) {
 	return {
-		widget: {
-			type: opts.type,
-			schema: opts.schema,
-			defaultData: opts.defaultData,
-			defaultSize,
-			component: Component
-		},
-		archetype: {
-			id: opts.type,
-			widget: opts.type,
-			components: [[require_hooks.Card, { preset: opts.size }]],
-			interactive: {
-				selectable: true,
-				draggable: true,
-				resizable: false,
-				selectionFrame: false
-			},
-			defaultSize
+		type,
+		source: "synthetic",
+		pointerId: base.pointerId,
+		primary: base.primary,
+		screen: overrides?.screen ?? base.screen,
+		world: overrides?.world ?? base.world,
+		delta: overrides?.delta,
+		modifiers: base.modifiers,
+		timestamp: base.timestamp,
+		gesture
+	};
+}
+/** Squared distance — avoids a sqrt for threshold comparisons. */
+function distSq(a, b) {
+	const dx = a.x - b.x;
+	const dy = a.y - b.y;
+	return dx * dx + dy * dy;
+}
+/** Returns true if the linear distance between two points exceeds `threshold` px. */
+function exceedsThreshold(a, b, threshold) {
+	return distSq(a, b) > threshold * threshold;
+}
+//#endregion
+//#region src/react/input/recognizers/DoubleTapRecognizer.ts
+/**
+* Double-tap recognizer (RFC-008). Observes the `tap` events emitted by
+* `TapRecognizer`. When two consecutive taps land within
+* `DOUBLE_TAP_WINDOW_MS` and `DOUBLE_TAP_DIST_PX`, emits a synthetic
+* `'double-tap'`.
+*
+* The first tap continues to fire normally — handlers that listen to
+* `'tap'` (e.g., engine selection) react to it. The second tap fires
+* both a `'tap'` AND a `'double-tap'`. Engine handlers can decide which
+* to respond to based on what they care about.
+*/
+var DoubleTapRecognizer = class {
+	last = null;
+	observe(event, manager) {
+		if (event.type !== "tap" || event.gesture?.kind !== "tap" || event.gesture.count !== 1) return;
+		const now = event.timestamp;
+		const here = event.screen;
+		if (this.last !== null && now - this.last.time <= 300 && !exceedsThreshold(here, this.last.at, 30)) {
+			require_hooks.inputLog("Recognizer", `DoubleTapRecognizer: 2nd tap within window → double-tap`, {
+				pointerId: event.pointerId,
+				dtMs: now - this.last.time
+			});
+			manager.dispatch(makeSynthetic("double-tap", event, {
+				kind: "tap",
+				count: 2
+			}));
+			this.last = null;
+			return;
+		}
+		this.last = {
+			at: here,
+			time: now
+		};
+	}
+	reset() {
+		this.last = null;
+	}
+};
+//#endregion
+//#region src/react/input/recognizers/DragRecognizer.ts
+/**
+* Drag recognizer (RFC-008). Per-pointerId state on `down`. On `move`
+* past the source-appropriate dead zone, emits a synthetic `drag-start`
+* and transitions to `dragging`. Subsequent moves emit `drag-update`s
+* with screen + world deltas. `up` or `cancel` after dragging emits
+* `drag-end`.
+*
+* Single-finger only: PinchRecognizer dispatches a synthetic `cancel`
+* when a 2nd touch lands, which DragRecognizer observes and uses to
+* abort tracking for the first finger.
+*
+* Note: synthetic `drag-update` events carry the SCREEN delta in
+* `gesture.delta` (not world delta) — the engine handler needs world
+* coords to update entity positions, but it gets those from the raw
+* `move` event's `world`. The gesture's `delta` is informational, not
+* used by the engine drag handler.
+*/
+var DragRecognizer = class {
+	tracking = /* @__PURE__ */ new Map();
+	observe(event, manager) {
+		switch (event.type) {
+			case "down":
+				if (event.button !== 0 && event.button !== null) return;
+				if (this.tracking.size > 0) return;
+				this.tracking.set(event.pointerId, {
+					downAt: {
+						screen: event.screen,
+						world: event.world
+					},
+					last: {
+						screen: event.screen,
+						world: event.world
+					},
+					status: "tracking"
+				});
+				return;
+			case "move": {
+				const t = this.tracking.get(event.pointerId);
+				if (!t) return;
+				if (t.status === "tracking") {
+					const dz = event.source === "touch" ? 8 : 4;
+					if (!exceedsThreshold(event.screen, t.downAt.screen, dz)) return;
+					t.status = "dragging";
+					require_hooks.inputLog("Recognizer", `DragRecognizer: dead-zone crossed → drag-start`, {
+						pointerId: event.pointerId,
+						source: event.source,
+						deadZone: dz
+					});
+					manager.dispatch(makeSynthetic("drag-start", event, {
+						kind: "drag",
+						phase: "start",
+						total: {
+							x: event.screen.x - t.downAt.screen.x,
+							y: event.screen.y - t.downAt.screen.y
+						},
+						delta: {
+							x: event.screen.x - t.last.screen.x,
+							y: event.screen.y - t.last.screen.y
+						}
+					}));
+					t.last = {
+						screen: event.screen,
+						world: event.world
+					};
+					return;
+				}
+				manager.dispatch(makeSynthetic("drag-update", event, {
+					kind: "drag",
+					phase: "update",
+					total: {
+						x: event.screen.x - t.downAt.screen.x,
+						y: event.screen.y - t.downAt.screen.y
+					},
+					delta: {
+						x: event.screen.x - t.last.screen.x,
+						y: event.screen.y - t.last.screen.y
+					}
+				}));
+				t.last = {
+					screen: event.screen,
+					world: event.world
+				};
+				return;
+			}
+			case "up": {
+				const t = this.tracking.get(event.pointerId);
+				if (!t) return;
+				this.tracking.delete(event.pointerId);
+				if (t.status !== "dragging") return;
+				require_hooks.inputLog("Recognizer", `DragRecognizer: up after dragging → drag-end`, { pointerId: event.pointerId });
+				manager.dispatch(makeSynthetic("drag-end", event, {
+					kind: "drag",
+					phase: "end",
+					total: {
+						x: event.screen.x - t.downAt.screen.x,
+						y: event.screen.y - t.downAt.screen.y
+					},
+					delta: {
+						x: event.screen.x - t.last.screen.x,
+						y: event.screen.y - t.last.screen.y
+					}
+				}));
+				return;
+			}
+			case "cancel":
+				this.tracking.delete(event.pointerId);
+				return;
+		}
+	}
+	reset() {
+		this.tracking.clear();
+	}
+};
+//#endregion
+//#region src/react/input/recognizers/HoverRecognizer.ts
+/**
+* Hover recognizer (RFC-008). Observes `move` events; tracks the last
+* leaf entity under each pointer via `manager.pickAt`. On change, emits
+* `hover-leave` (with the previous entity in `gesture.entityId`) and
+* `hover-enter` (with the new entity).
+*
+* Hover is informational — recognizers and handlers downstream cannot
+* "consume" it. Engine hover chrome (selection ring, cursor hint) is
+* driven entirely by these events.
+*
+* Pen + mouse hover normally; touch fires hover only while a finger is
+* pressed, so touch-source hover events fire as a side-effect of drag
+* tracking. Authors who want touch hover-on-hover should listen for
+* `move` events themselves.
+*/
+var HoverRecognizer = class {
+	lastByPointer = /* @__PURE__ */ new Map();
+	observe(event, manager) {
+		switch (event.type) {
+			case "move": {
+				const current = manager.pickAt(event.screen);
+				const prev = this.lastByPointer.get(event.pointerId) ?? null;
+				if (current === prev) return;
+				require_hooks.inputLog("Recognizer", `HoverRecognizer: entity changed ${prev} → ${current}`, {
+					pointerId: event.pointerId,
+					prev,
+					current
+				});
+				if (prev !== null) manager.dispatch(makeSynthetic("hover-leave", event, {
+					kind: "hover",
+					entityId: prev
+				}));
+				this.lastByPointer.set(event.pointerId, current);
+				if (current !== null) manager.dispatch(makeSynthetic("hover-enter", event, {
+					kind: "hover",
+					entityId: current
+				}));
+				return;
+			}
+			case "up":
+			case "cancel": {
+				const prev = this.lastByPointer.get(event.pointerId);
+				this.lastByPointer.delete(event.pointerId);
+				if (prev != null) manager.dispatch(makeSynthetic("hover-leave", event, {
+					kind: "hover",
+					entityId: prev
+				}));
+				return;
+			}
+		}
+	}
+	reset() {
+		this.lastByPointer.clear();
+	}
+};
+//#endregion
+//#region src/react/input/recognizers/PanRecognizer.ts
+/**
+* Pan recognizer (RFC-008). Single-finger touch on empty space only —
+* `engine.pickAt(world) === null` at down-time. Emits `pan-update` with
+* screen deltas. The engine pan handler translates them into camera
+* `panBy` calls.
+*
+* Pinch + pan run simultaneously when two fingers are down on empty
+* space (matches iOS Maps): PinchRecognizer cancels this recognizer's
+* tracking via synthetic `cancel`, then a fresh PanRecognizer state
+* doesn't restart until both fingers release and a new single-finger
+* touch begins on empty space.
+*
+* Mouse / pen drags on empty space are NOT pans here — they're marquee
+* selection, handled by the engine drag handler responding to
+* DragRecognizer's `drag-start` for empty-space hits.
+*/
+var PanRecognizer = class {
+	tracking = /* @__PURE__ */ new Map();
+	observe(event, manager) {
+		switch (event.type) {
+			case "down":
+				if (event.source !== "touch") return;
+				if (event.button !== 0 && event.button !== null) return;
+				if (manager.pickAt(event.screen) !== null) return;
+				this.tracking.set(event.pointerId, {
+					downAt: event.screen,
+					last: event.screen,
+					status: "tracking"
+				});
+				return;
+			case "move": {
+				const t = this.tracking.get(event.pointerId);
+				if (!t) return;
+				if (t.status === "tracking") {
+					if (!exceedsThreshold(event.screen, t.downAt, 8)) return;
+					t.status = "panning";
+					t.last = event.screen;
+					require_hooks.inputLog("Recognizer", `PanRecognizer: dead-zone crossed → panning (touch empty-space)`, { pointerId: event.pointerId });
+					return;
+				}
+				const delta = {
+					x: event.screen.x - t.last.x,
+					y: event.screen.y - t.last.y
+				};
+				t.last = event.screen;
+				manager.dispatch(makeSynthetic("pan-update", event, {
+					kind: "pan",
+					delta
+				}));
+				return;
+			}
+			case "up":
+			case "cancel":
+				this.tracking.delete(event.pointerId);
+				return;
+		}
+	}
+	reset() {
+		this.tracking.clear();
+	}
+};
+//#endregion
+//#region src/react/input/recognizers/PinchRecognizer.ts
+/**
+* Pinch recognizer (RFC-008). Counts simultaneous active touch-source
+* pointers; emits `pinch-start` when count reaches 2, `pinch-update` on
+* either finger move, `pinch-end` when count drops below 2.
+*
+* On `pinch-start`, dispatches a synthetic `cancel` for any tracked
+* single-finger gesture so DragRecognizer / TapRecognizer / PanRecognizer
+* can abort cleanly. This is the cancel-then-pinch ordering — engine
+* drag (if active) runs `endDrag(entity, { cancelled: true })` before
+* pinch math takes over.
+*
+* Coexists with PanRecognizer: empty-space pan (single finger that
+* already crossed dead zone before the 2nd finger arrives) gets
+* cancelled by the synthetic `cancel`. After `pinch-end`, the user must
+* lift and re-place to start a new gesture (matches iOS).
+*/
+var PinchRecognizer = class {
+	/** Active touch-source pointers and their latest positions (screen). */
+	active = /* @__PURE__ */ new Map();
+	state = null;
+	observe(event, manager) {
+		if (event.source !== "touch") return;
+		switch (event.type) {
+			case "down":
+				this.active.set(event.pointerId, event.screen);
+				if (this.state === null && this.active.size === 2) {
+					const ids = [...this.active.keys()];
+					const camera = manager.engine.getCamera();
+					for (const id of ids) {
+						const screen = this.active.get(id);
+						manager.dispatch({
+							type: "cancel",
+							source: "synthetic",
+							pointerId: id,
+							primary: false,
+							screen,
+							world: screenToWorld(screen.x, screen.y, camera),
+							modifiers: event.modifiers,
+							timestamp: event.timestamp
+						});
+					}
+					const positions = [...this.active.values()];
+					const dist = pointDistance(positions[0], positions[1]);
+					const center = midpoint(positions[0], positions[1]);
+					this.state = {
+						pointerIds: ids,
+						last: {
+							dist,
+							center
+						}
+					};
+					require_hooks.inputLog("Recognizer", `PinchRecognizer: 2nd touch → pinch-start (cancel sent for both)`, { pointerIds: ids });
+					manager.dispatch(makeSynthetic("pinch-start", event, {
+						kind: "pinch",
+						phase: "start",
+						scale: 1,
+						center
+					}));
+				}
+				return;
+			case "move": {
+				if (this.state === null || !this.active.has(event.pointerId)) return;
+				this.active.set(event.pointerId, event.screen);
+				const a = this.active.get(this.state.pointerIds[0]);
+				const b = this.active.get(this.state.pointerIds[1]);
+				if (!a || !b) return;
+				const dist = pointDistance(a, b);
+				const center = midpoint(a, b);
+				const scale = this.state.last.dist > 0 ? dist / this.state.last.dist : 1;
+				this.state.last = {
+					dist,
+					center
+				};
+				manager.dispatch(makeSynthetic("pinch-update", event, {
+					kind: "pinch",
+					phase: "update",
+					scale,
+					center
+				}, { screen: center }));
+				return;
+			}
+			case "up":
+			case "cancel":
+				this.active.delete(event.pointerId);
+				if (this.state !== null && this.active.size < 2) {
+					require_hooks.inputLog("Recognizer", `PinchRecognizer: finger lifted → pinch-end`, { remainingActive: this.active.size });
+					manager.dispatch(makeSynthetic("pinch-end", event, {
+						kind: "pinch",
+						phase: "end",
+						scale: 1,
+						center: this.state.last.center
+					}));
+					this.state = null;
+				}
+				return;
 		}
+	}
+	reset() {
+		this.active.clear();
+		this.state = null;
+	}
+};
+function pointDistance(a, b) {
+	const dx = a.x - b.x;
+	const dy = a.y - b.y;
+	return Math.sqrt(dx * dx + dy * dy);
+}
+function midpoint(a, b) {
+	return {
+		x: (a.x + b.x) / 2,
+		y: (a.y + b.y) / 2
 	};
 }
 //#endregion
-//#region src/react/geometry-card.tsx
-/** Must match {@link CardPresetsResource} defaults. */
-const DEFAULT_CARD_PRESET_SIZES = {
-	small: {
-		width: 155,
-		height: 155
-	},
-	medium: {
-		width: 329,
-		height: 155
-	},
-	large: {
-		width: 329,
-		height: 345
-	},
-	xl: {
-		width: 329,
-		height: 535
+//#region src/react/input/recognizers/TapRecognizer.ts
+/**
+* Tap recognizer (RFC-008). Per-pointerId state on `down`; emits a
+* synthetic `'tap'` (count 1) on `up` within `TAP_WINDOW_MS` and the
+* source-appropriate dead zone.
+*
+* Pairwise relationships:
+*   - Cancels its pending tap on observed `drag-start` or `pinch-start`
+*     for the same pointerId.
+*   - Cancels its pending tap on observed `cancel`.
+*/
+var TapRecognizer = class {
+	pending = /* @__PURE__ */ new Map();
+	observe(event, manager) {
+		switch (event.type) {
+			case "down":
+				if (event.button !== 0 && event.button !== null) return;
+				this.pending.set(event.pointerId, {
+					downAt: event.screen,
+					time: event.timestamp
+				});
+				return;
+			case "up": {
+				const p = this.pending.get(event.pointerId);
+				if (!p) return;
+				this.pending.delete(event.pointerId);
+				const elapsed = event.timestamp - p.time;
+				const dz = event.source === "touch" ? 8 : 4;
+				if (elapsed <= 250 && !exceedsThreshold(event.screen, p.downAt, dz)) {
+					require_hooks.inputLog("Recognizer", `TapRecognizer: up within tap window → tap`, {
+						pointerId: event.pointerId,
+						elapsedMs: elapsed
+					});
+					manager.dispatch(makeSynthetic("tap", event, {
+						kind: "tap",
+						count: 1
+					}));
+				}
+				return;
+			}
+			case "cancel":
+			case "drag-start":
+			case "pinch-start":
+				this.pending.delete(event.pointerId);
+				return;
+		}
+	}
+	reset() {
+		this.pending.clear();
 	}
 };
+//#endregion
+//#region src/react/input/routers/R3FRouter.ts
 /**
-* Pure-three rounded-rect extrude geometry — avoids a drei dependency.
-* Rounded corners match the DOM CardFrame radius (21.67 px).
-*/
-function makeRoundedCardGeometry(width, height, radius, depth) {
-	const shape = new three.Shape();
-	const r = Math.min(radius, Math.min(width, height) / 2);
-	const x = -width / 2;
-	const y = -height / 2;
-	shape.moveTo(x, y + r);
-	shape.lineTo(x, y + height - r);
-	shape.quadraticCurveTo(x, y + height, x + r, y + height);
-	shape.lineTo(x + width - r, y + height);
-	shape.quadraticCurveTo(x + width, y + height, x + width, y + height - r);
-	shape.lineTo(x + width, y + r);
-	shape.quadraticCurveTo(x + width, y, x + width - r, y);
-	shape.lineTo(x + r, y);
-	shape.quadraticCurveTo(x, y, x, y + r);
-	return new three.ExtrudeGeometry(shape, {
-		depth,
-		bevelEnabled: true,
-		bevelSegments: 3,
-		bevelSize: .6,
-		bevelThickness: .6
-	});
-}
-function CardBack({ width, height, color, roughness, metalness }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("mesh", {
-		geometry: (0, react.useMemo)(() => makeRoundedCardGeometry(width, height, 21.67, 3), [width, height]),
-		position: [
-			0,
-			0,
-			-6
-		],
-		receiveShadow: true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("meshStandardMaterial", {
-			color,
-			roughness,
-			metalness
-		})
-	});
-}
+* Map `InputEventType`s to the R3F handler name that drives R3F's
+* mesh-dispatch machinery. Pointer types feed R3F's hover-diff + capture
+* pipeline; click family feeds R3F's click synthesis (`onClick`,
+* `onDoubleClick`, `onContextMenu`). v6 routes clicks through this table
+* so the InputManager pipeline is the single source for both engine and
+* widget — no parallel `connect` listener registration on the container.
+*/
+const HANDLER_BY_TYPE = {
+	down: "onPointerDown",
+	move: "onPointerMove",
+	up: "onPointerUp",
+	cancel: "onPointerCancel",
+	click: "onClick",
+	dblclick: "onDoubleClick",
+	contextmenu: "onContextMenu"
+};
 /**
-* Returns a paired R3F widget + archetype for a card-shaped 3D widget.
-* Behaves like {@link createCardWidget} — fixed preset size, non-resizable,
-* no engine-drawn selection frame, and lifts on drag (scale + z) — but
-* renders a three.js scene instead of DOM content.
+* RFC-008 v5 — `WidgetSurfaceRouter` for the WebGL surface.
 *
-* Lighting: this helper adds no lights. Declare your own in the `geometry`
-* component (typically a local `pointLight` scoped with `distance`).
+* Invoked by `InputManager.dispatch` whenever a raw pointer event falls
+* over an entity whose `Widget.surface === 'webgl'`. Looks up the matching
+* R3F mesh-dispatch handler and invokes it with the underlying native
+* event, letting R3F run its raycast → bubble → handler pipeline (with
+* `compute` + `filter` from `createR3FEventManager` targeting the right
+* per-widget scene).
+*
+* The InputManager dispatches the router BEFORE engine handlers, so widget
+* mesh handlers that call `setPointerCapture` (claiming exclusive ownership
+* of the gesture) take effect before the engine's drag/marquee logic could
+* react. Mesh handlers that call `e.stopPropagation()` halt R3F's bubble
+* but NOT the engine's handlers — those listen on the InputManager, not on
+* R3F's bubble. This is the coexistence model: R3F handles widget-internal
+* logic, engine handles canvas-level logic, both react to the same event
+* unless a widget explicitly claims it (RFC-008 § Default coexistence).
 */
-function createGeometryCardWidget(opts) {
-	const defaultSize = DEFAULT_CARD_PRESET_SIZES[opts.size];
-	const Render = opts.geometry;
-	const backgroundConfig = opts.background ?? "card";
-	const resolvedBack = backgroundConfig === "transparent" ? null : backgroundConfig === "card" ? {
-		color: "#1C1C1E",
-		roughness: .55,
-		metalness: 0
-	} : {
-		color: backgroundConfig.color,
-		roughness: backgroundConfig.roughness ?? .55,
-		metalness: backgroundConfig.metalness ?? 0
-	};
-	const Component = ({ entityId, width, height }) => {
-		const data = useWidgetData(entityId);
-		const dragging = require_hooks.useTag(entityId, require_hooks.Dragging);
-		const groupRef = (0, react.useRef)(null);
-		(0, _react_three_fiber.useFrame)(() => {
-			const g = groupRef.current;
-			if (!g) return;
-			const targetScale = dragging ? 1.05 : 1;
-			const targetZ = dragging ? 8 : 0;
-			const s = g.scale.x;
-			g.scale.setScalar(s + (targetScale - s) * .2);
-			g.position.z += (targetZ - g.position.z) * .2;
-		});
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("group", {
-			ref: groupRef,
-			children: [resolvedBack && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardBack, {
-				width,
-				height,
-				color: resolvedBack.color,
-				roughness: resolvedBack.roughness,
-				metalness: resolvedBack.metalness
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Render, {
-				entityId,
-				data,
-				width,
-				height
-			})]
+var R3FRouter = class {
+	surface = "webgl";
+	/**
+	* @param getEventManager Returns the R3F event manager whose `handlers`
+	*   we invoke. Wrapped in a getter because R3F creates the manager
+	*   inside the React component tree, so the router (typically constructed
+	*   alongside the InputManager) needs late-bound access.
+	*/
+	constructor(getEventManager) {
+		this.getEventManager = getEventManager;
+	}
+	route(event, entityId) {
+		if (!event.native) return;
+		const handlerName = HANDLER_BY_TYPE[event.type];
+		if (!handlerName) return;
+		const handler = this.getEventManager()?.handlers?.[handlerName];
+		if (!handler) {
+			require_hooks.inputLog("Router", `R3FRouter: no R3F manager / handler for ${handlerName}`, {
+				type: event.type,
+				entityId
+			});
+			return;
+		}
+		require_hooks.inputLog("Router", `R3FRouter → R3F.${handlerName} for entity ${entityId}`, {
+			type: event.type,
+			entityId,
+			handlerName
 		});
-	};
+		handler(event.native);
+	}
+	isPointerClaimed(pointerId) {
+		const claimed = this.getEventManager()?.isPointerCaptured?.(pointerId) ?? false;
+		if (claimed) require_hooks.inputLog("Router", `R3FRouter: pointer ${pointerId} CLAIMED via setPointerCapture`, { pointerId });
+		return claimed;
+	}
+};
+//#endregion
+//#region src/react/widgets/overlap-glow.ts
+/**
+* Overlap glow — visual config for the drag-over highlight applied to
+* cards (DOM `CardChrome` + R3F `CompositionMaterial`).
+*
+* Single-layer design: a soft radial gradient at the hot point in a
+* neutral color, blended normally over the card content. Deliberately
+* simple — no backdrop-filter, no saturation/contrast tricks, no rim,
+* no bloom. Three tunables: color, alpha (per state), falloff radius.
+*
+* Flows two ways from `<InfiniteCanvas overlapGlow={...} />`:
+*   1. CSS custom properties on the canvas container — read by
+*      `CardChrome` via `var(--ic-glow-…, fallback)` for DOM widgets.
+*   2. Shared shader uniforms — every `CompositionMaterial` instance
+*      references the same uniform objects, so mutating
+*      {@link sharedGlowUniforms} updates all R3F cards at once.
+*
+* Each `[candidate, target]` pair holds the value used while the card
+* is just an overlap candidate vs. when the drop will actually consume.
+*/
+const DEFAULT_OVERLAP_GLOW_CONFIG = {
+	glowColor: [
+		.5,
+		.5,
+		.5
+	],
+	glowAlpha: [.25, .45],
+	glowSize: [60, 80],
+	rimColor: [
+		.5,
+		.5,
+		.5
+	],
+	rimWidth: 1.5,
+	rimAlpha: [.55, .85],
+	rimRadius: 600
+};
+function rgbTriplet(color) {
+	const [r, g, b] = color;
+	return `${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}`;
+}
+/** Write the config as CSS custom properties on `target`. CardChrome reads them. */
+function applyOverlapGlowVars(target, c) {
+	const s = target.style;
+	s.setProperty("--ic-glow-color", rgbTriplet(c.glowColor));
+	s.setProperty("--ic-glow-alpha-c", String(c.glowAlpha[0]));
+	s.setProperty("--ic-glow-alpha-t", String(c.glowAlpha[1]));
+	s.setProperty("--ic-glow-size-c", `${c.glowSize[0]}px`);
+	s.setProperty("--ic-glow-size-t", `${c.glowSize[1]}px`);
+	s.setProperty("--ic-rim-color", rgbTriplet(c.rimColor));
+	s.setProperty("--ic-rim-width", `${c.rimWidth}px`);
+	s.setProperty("--ic-rim-alpha-c", String(c.rimAlpha[0]));
+	s.setProperty("--ic-rim-alpha-t", String(c.rimAlpha[1]));
+	s.setProperty("--ic-rim-radius", `${c.rimRadius}px`);
+}
+/** Push the same config into the shared shader uniforms (mutates in place). */
+function applyOverlapGlowShaderUniforms(c) {
+	require_hooks.sharedGlowUniforms.uGlowColor.value.set(c.glowColor[0], c.glowColor[1], c.glowColor[2]);
+	require_hooks.sharedGlowUniforms.uGlowAlpha.value.set(c.glowAlpha[0], c.glowAlpha[1]);
+	require_hooks.sharedGlowUniforms.uGlowFalloff.value.set(c.glowSize[0] / 200, c.glowSize[1] / 200);
+	require_hooks.sharedGlowUniforms.uRimColor.value.set(c.rimColor[0], c.rimColor[1], c.rimColor[2]);
+	require_hooks.sharedGlowUniforms.uRimAlpha.value.set(c.rimAlpha[0], c.rimAlpha[1]);
+	require_hooks.sharedGlowUniforms.uRimRadius.value = c.rimRadius / 200;
+}
+function mergeOverlapGlow(override) {
 	return {
-		widget: {
-			type: opts.type,
-			surface: "webgl",
-			schema: opts.schema,
-			defaultData: opts.defaultData,
-			defaultSize,
-			component: Component
-		},
-		archetype: {
-			id: opts.type,
-			widget: opts.type,
-			components: [[require_hooks.Card, { preset: opts.size }]],
-			interactive: {
-				selectable: true,
-				draggable: true,
-				resizable: false,
-				selectionFrame: false
-			},
-			defaultSize
-		}
+		...DEFAULT_OVERLAP_GLOW_CONFIG,
+		...override
 	};
 }
 //#endregion
-//#region src/react/WidgetProvider.tsx
+//#region src/react/widgets/registry.ts
+/** Narrows to the R3F variant. */
+function isR3FWidget(widget) {
+	return widget.surface === "webgl";
+}
+//#endregion
+//#region src/react/widgets/WidgetProvider.tsx
 /**
 * Bridges the engine's widget registry to React context so WidgetSlot /
-* WebGLWidgetLayer can resolve components by type.
+* R3FManager can resolve components by type.
 */
 function WidgetProvider({ engine, children }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hooks.WidgetResolverProvider, {
 		value: (0, react.useCallback)((_entityId, widgetType) => {
 			const def = engine.getWidget(widgetType);
 			if (!def) return null;
-			if (require_WebGLWidgetLayer.isR3FWidget(def)) return {
+			if (isR3FWidget(def)) return {
 				surface: "webgl",
 				component: def.component
 			};
@@ -306,8 +3502,12 @@ function WidgetProvider({ engine, children }) {
 }
 //#endregion
 //#region src/react/InfiniteCanvas.tsx
-const InfiniteCanvas = react.default.forwardRef(function InfiniteCanvas({ engine, grid, selection, onSelectionChange, onCameraChange, onNavigationChange, className, style, children }, ref) {
+const InfiniteCanvas = react.default.forwardRef(function InfiniteCanvas({ engine, grid, overlapGlow, selection, snapGuides, onSelectionChange, onCameraChange, onNavigationChange, className, style, children, r3fRoot }, ref) {
 	const containerRef = (0, react.useRef)(null);
+	const [containerMounted, setContainerMounted] = (0, react.useState)(false);
+	(0, react.useLayoutEffect)(() => {
+		setContainerMounted(true);
+	}, []);
 	const onSelectionChangeRef = (0, react.useRef)(onSelectionChange);
 	const onCameraChangeRef = (0, react.useRef)(onCameraChange);
 	const onNavigationChangeRef = (0, react.useRef)(onNavigationChange);
@@ -320,6 +3520,14 @@ const InfiniteCanvas = react.default.forwardRef(function InfiniteCanvas({ engine
 	(0, react.useEffect)(() => {
 		onNavigationChangeRef.current = onNavigationChange;
 	}, [onNavigationChange]);
+	const selectionRef = (0, react.useRef)(selection);
+	const snapGuidesRef = (0, react.useRef)(snapGuides);
+	(0, react.useEffect)(() => {
+		selectionRef.current = selection;
+	}, [selection]);
+	(0, react.useEffect)(() => {
+		snapGuidesRef.current = snapGuides;
+	}, [snapGuides]);
 	(0, react.useImperativeHandle)(ref, () => ({
 		panTo: (x, y) => {
 			engine.panTo(x, y);
@@ -344,9 +3552,10 @@ const InfiniteCanvas = react.default.forwardRef(function InfiniteCanvas({ engine
 		getEngine: () => engine
 	}), [engine]);
 	const webglCanvasRef = (0, react.useRef)(null);
-	const gridRendererRef = (0, react.useRef)(null);
-	const selectionRendererRef = (0, react.useRef)(null);
-	const cameraLayerRef = (0, react.useRef)(null);
+	const webglManagerRef = (0, react.useRef)(null);
+	const backgroundLayerRef = (0, react.useRef)(null);
+	const baseLayerRef = (0, react.useRef)(null);
+	const overlayLayerRef = (0, react.useRef)(null);
 	const slotRefs = (0, react.useRef)(/* @__PURE__ */ new Map());
 	const [visibleEntities, setVisibleEntities] = (0, react.useState)([]);
 	const registerSlotRef = (0, react.useCallback)((entityId, el) => {
@@ -357,310 +3566,88 @@ const InfiniteCanvas = react.default.forwardRef(function InfiniteCanvas({ engine
 		const container = containerRef.current;
 		const canvas = webglCanvasRef.current;
 		if (!container || !canvas) return;
-		const gridEnabled = grid !== false;
-		let gridInst = null;
-		if (gridEnabled) {
-			gridInst = new require_WebGLWidgetLayer.GridRenderer(canvas);
-			gridRendererRef.current = gridInst;
-		}
-		const selInst = new require_WebGLWidgetLayer.SelectionRenderer();
-		selectionRendererRef.current = selInst;
+		const manager = new require_hooks.WebGLManager(canvas, {
+			grid,
+			selection: selectionRef.current,
+			snapGuides: snapGuidesRef.current
+		});
+		webglManagerRef.current = manager;
 		const updateSize = () => {
 			const rect = container.getBoundingClientRect();
 			const dpr = window.devicePixelRatio;
 			engine.setViewport(rect.width, rect.height, dpr);
 			canvas.style.width = `${rect.width}px`;
 			canvas.style.height = `${rect.height}px`;
-			if (gridInst) gridInst.setSize(rect.width, rect.height, dpr);
-			selInst.setSize(new three.Vector2(rect.width * dpr, rect.height * dpr), dpr);
+			manager.setSize(rect.width, rect.height, dpr);
 		};
 		updateSize();
 		const observer = new ResizeObserver(updateSize);
 		observer.observe(container);
 		return () => {
 			observer.disconnect();
-			if (gridInst) {
-				gridInst.dispose();
-				gridRendererRef.current = null;
-			}
-			selInst.dispose();
-			selectionRendererRef.current = null;
+			manager.dispose();
+			webglManagerRef.current = null;
 		};
 	}, [engine, grid]);
 	(0, react.useEffect)(() => {
-		const gridR = gridRendererRef.current;
-		if (gridR && grid !== false) {
+		const manager = webglManagerRef.current;
+		if (!manager) return;
+		if (grid !== false) {
 			const isDark = document.documentElement.classList.contains("dark");
-			gridR.setConfig({
+			manager.setGridConfig({
 				dotColor: isDark ? [
-					1,
-					1,
-					1
+					.35,
+					.37,
+					.4
 				] : [
-					0,
-					0,
-					0
+					.75,
+					.77,
+					.8
 				],
-				dotAlpha: isDark ? .12 : .18,
+				dotAlpha: 1,
 				...grid
 			});
 		}
-		const selR = selectionRendererRef.current;
-		if (selR && selection) selR.setConfig(selection);
+		if (selection) manager.setSelectionConfig(selection);
+		if (snapGuides) manager.setSnapGuideConfig(snapGuides);
 		engine.markDirty();
 	}, [
 		engine,
 		grid,
-		selection
+		selection,
+		snapGuides
 	]);
 	(0, react.useEffect)(() => {
+		const merged = mergeOverlapGlow(overlapGlow);
 		const container = containerRef.current;
-		if (!container) return;
-		const onWheel = (e) => {
-			e.preventDefault();
-			if (e.ctrlKey || e.metaKey) {
-				const rect = container.getBoundingClientRect();
-				engine.zoomAtPoint(e.clientX - rect.left, e.clientY - rect.top, -e.deltaY * .01);
-			} else engine.panBy(-e.deltaX, -e.deltaY);
-		};
-		container.addEventListener("wheel", onWheel, { passive: false });
-		return () => container.removeEventListener("wheel", onWheel);
-	}, [engine]);
+		if (container) applyOverlapGlowVars(container, merged);
+		applyOverlapGlowShaderUniforms(merged);
+		engine.markDirty();
+	}, [engine, overlapGlow]);
+	const r3fEventManagerRef = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
 		const container = containerRef.current;
 		if (!container) return;
-		let gesture = { type: "idle" };
-		let lastTapTime = 0;
-		let lastTapX = 0;
-		let lastTapY = 0;
-		const DOUBLE_TAP_MS = 300;
-		const DOUBLE_TAP_DIST = 30;
-		function isOnWidget(target) {
-			let el = target;
-			while (el && el !== container) {
-				if (el.hasAttribute("data-widget-slot")) return true;
-				el = el.parentElement;
-			}
-			return false;
-		}
-		function isInteractive(target) {
-			const el = target;
-			if (!el) return false;
-			const tag = el.tagName;
-			return tag === "INPUT" || tag === "TEXTAREA" || tag === "BUTTON" || tag === "SELECT" || el.isContentEditable || el.closest("button") !== null;
-		}
-		function getRect() {
-			return container?.getBoundingClientRect() ?? new DOMRect();
-		}
-		function touchDist(t1, t2) {
-			const dx = t1.clientX - t2.clientX;
-			const dy = t1.clientY - t2.clientY;
-			return Math.sqrt(dx * dx + dy * dy);
-		}
-		function touchCenter(t1, t2, rect) {
-			return {
-				x: (t1.clientX + t2.clientX) / 2 - rect.left,
-				y: (t1.clientY + t2.clientY) / 2 - rect.top
-			};
-		}
-		function cancelEngineGesture() {
-			if (gesture.type === "pending-entity" || gesture.type === "entity-dragging") engine.handlePointerUp();
-		}
-		const noMods = {
-			shift: false,
-			ctrl: false,
-			alt: false,
-			meta: false
-		};
-		function onTouchStart(e) {
-			const rect = getRect();
-			const touches = e.touches;
-			if (touches.length >= 2) {
-				e.preventDefault();
-				cancelEngineGesture();
-				const dist = touchDist(touches[0], touches[1]);
-				const center = touchCenter(touches[0], touches[1], rect);
-				gesture = {
-					type: "pinching",
-					lastDist: dist,
-					lastCx: center.x,
-					lastCy: center.y
-				};
-				return;
-			}
-			const touch = touches[0];
-			const x = touch.clientX - rect.left;
-			const y = touch.clientY - rect.top;
-			if (isInteractive(e.target)) return;
-			e.preventDefault();
-			const now = Date.now();
-			if (now - lastTapTime < DOUBLE_TAP_MS && Math.abs(x - lastTapX) < DOUBLE_TAP_DIST && Math.abs(y - lastTapY) < DOUBLE_TAP_DIST) {
-				lastTapTime = 0;
-				const directive = engine.handlePointerDown(x, y, 0, noMods);
-				try {
-					if (directive.action === "passthrough-track-drag") {
-						const selected = engine.getSelectedEntities();
-						if (selected.length === 1) engine.enterContainer(selected[0]);
-					} else {
-						const camera = engine.getCamera();
-						const target = camera.zoom < .9 ? 1 : camera.zoom < 1.8 ? 2 : 1;
-						engine.zoomAtPoint(x, y, (target - camera.zoom) / camera.zoom);
-					}
-				} finally {
-					engine.handlePointerUp();
-					engine.markDirty();
-				}
-				gesture = { type: "idle" };
-				return;
-			}
-			if (isOnWidget(e.target)) {
-				engine.handlePointerDown(x, y, 0, noMods);
-				gesture = {
-					type: "pending-entity",
-					x,
-					y,
-					time: now
-				};
-			} else gesture = {
-				type: "pending-pan",
-				x,
-				y,
-				time: now
-			};
-		}
-		function onTouchMove(e) {
-			e.preventDefault();
-			const rect = getRect();
-			const touches = e.touches;
-			if (gesture.type === "pinching" && touches.length >= 2) {
-				const dist = touchDist(touches[0], touches[1]);
-				const center = touchCenter(touches[0], touches[1], rect);
-				const scale = dist / gesture.lastDist;
-				engine.zoomAtPoint(center.x, center.y, scale - 1);
-				engine.panBy(center.x - gesture.lastCx, center.y - gesture.lastCy);
-				gesture.lastDist = dist;
-				gesture.lastCx = center.x;
-				gesture.lastCy = center.y;
-				return;
-			}
-			if (touches.length >= 2) {
-				cancelEngineGesture();
-				const dist = touchDist(touches[0], touches[1]);
-				const center = touchCenter(touches[0], touches[1], rect);
-				gesture = {
-					type: "pinching",
-					lastDist: dist,
-					lastCx: center.x,
-					lastCy: center.y
-				};
-				return;
-			}
-			if (touches.length < 1) return;
-			const touch = touches[0];
-			const x = touch.clientX - rect.left;
-			const y = touch.clientY - rect.top;
-			if (gesture.type === "pending-pan") {
-				if (Math.abs(x - gesture.x) > 8 || Math.abs(y - gesture.y) > 8) gesture = {
-					type: "panning",
-					lastX: x,
-					lastY: y
-				};
-				return;
-			}
-			if (gesture.type === "panning") {
-				engine.panBy(x - gesture.lastX, y - gesture.lastY);
-				gesture.lastX = x;
-				gesture.lastY = y;
-				return;
-			}
-			if (gesture.type === "pending-entity" || gesture.type === "entity-dragging") {
-				engine.handlePointerMove(x, y, noMods);
-				if (gesture.type === "pending-entity") {
-					if (Math.abs(x - gesture.x) > 8 || Math.abs(y - gesture.y) > 8) gesture = { type: "entity-dragging" };
-				}
-			}
-		}
-		function onTouchEnd(e) {
-			e.preventDefault();
-			const remaining = e.touches.length;
-			const rect = getRect();
-			if (gesture.type === "pinching") {
-				if (remaining === 1) {
-					const t = e.touches[0];
-					gesture = {
-						type: "panning",
-						lastX: t.clientX - rect.left,
-						lastY: t.clientY - rect.top
-					};
-				} else if (remaining === 0) gesture = { type: "idle" };
-				return;
-			}
-			if (remaining > 0) return;
-			if (gesture.type === "pending-pan") {
-				engine.handlePointerDown(gesture.x, gesture.y, 0, noMods);
-				engine.handlePointerUp();
-				engine.markDirty();
-				lastTapTime = Date.now();
-				lastTapX = gesture.x;
-				lastTapY = gesture.y;
-			}
-			if (gesture.type === "pending-entity") {
-				engine.handlePointerUp();
-				engine.markDirty();
-				lastTapTime = Date.now();
-				lastTapX = gesture.x;
-				lastTapY = gesture.y;
-			}
-			if (gesture.type === "entity-dragging") {
-				engine.handlePointerUp();
-				engine.markDirty();
-			}
-			gesture = { type: "idle" };
-		}
-		function onTouchCancel(_e) {
-			gesture = { type: "idle" };
-			engine.handlePointerCancel();
-		}
-		container.addEventListener("touchstart", onTouchStart, { passive: false });
-		container.addEventListener("touchmove", onTouchMove, { passive: false });
-		container.addEventListener("touchend", onTouchEnd, { passive: false });
-		container.addEventListener("touchcancel", onTouchCancel, { passive: true });
+		const manager = new InputManager(engine, container, [
+			new PointerAdapter(),
+			new WheelAdapter(),
+			new ClickAdapter()
+		]);
+		manager.addRecognizer(new HoverRecognizer());
+		manager.addRecognizer(new TapRecognizer());
+		manager.addRecognizer(new DoubleTapRecognizer());
+		manager.addRecognizer(new DragRecognizer());
+		manager.addRecognizer(new PinchRecognizer());
+		manager.addRecognizer(new PanRecognizer());
+		manager.setRouter(new R3FRouter(() => r3fEventManagerRef.current));
+		const offHandlers = installEngineHandlers(manager, engine, container);
+		const detach = manager.attach();
 		return () => {
-			container.removeEventListener("touchstart", onTouchStart);
-			container.removeEventListener("touchmove", onTouchMove);
-			container.removeEventListener("touchend", onTouchEnd);
-			container.removeEventListener("touchcancel", onTouchCancel);
+			offHandlers();
+			detach();
+			r3fEventManagerRef.current = null;
 		};
 	}, [engine]);
-	const onCanvasPointerDown = (0, react.useCallback)((e) => {
-		if (e.target?.closest("button, input, textarea, select, [contenteditable]")) return;
-		const rect = containerRef.current?.getBoundingClientRect();
-		if (!rect) return;
-		const directive = engine.handlePointerDown(e.clientX - rect.left, e.clientY - rect.top, e.button, {
-			shift: e.shiftKey,
-			ctrl: e.ctrlKey,
-			alt: e.altKey,
-			meta: e.metaKey
-		});
-		if (directive.action === "capture-resize" || directive.action === "passthrough-track-drag") containerRef.current?.setPointerCapture(e.pointerId);
-		if (directive.action === "capture-resize") e.preventDefault();
-	}, [engine]);
-	const onCanvasPointerMove = (0, react.useCallback)((e) => {
-		const target = e.target;
-		if (target.closest?.("[data-widget-slot]") && target !== containerRef.current) return;
-		const rect = containerRef.current?.getBoundingClientRect();
-		if (!rect) return;
-		engine.handlePointerMove(e.clientX - rect.left, e.clientY - rect.top, {
-			shift: e.shiftKey,
-			ctrl: e.ctrlKey,
-			alt: e.altKey,
-			meta: e.metaKey
-		});
-	}, [engine]);
-	const onCanvasPointerUp = (0, react.useCallback)((e) => {
-		if (containerRef.current?.hasPointerCapture(e.pointerId)) containerRef.current.releasePointerCapture(e.pointerId);
-		engine.handlePointerUp();
-	}, [engine]);
 	(0, react.useEffect)(() => {
 		let rafId;
 		let running = true;
@@ -669,74 +3656,72 @@ const InfiniteCanvas = react.default.forwardRef(function InfiniteCanvas({ engine
 			if (engine.flushIfDirty()) {
 				const camera = engine.getCamera();
 				const changes = engine.getFrameChanges();
-				if (cameraLayerRef.current) cameraLayerRef.current.style.transform = `scale(${camera.zoom}) translate(${-camera.x}px, ${-camera.y}px)`;
-				const cursor = engine.world.getResource(require_hooks.CursorResource).cursor;
+				const transform = `scale(${camera.zoom}) translate(${-camera.x}px, ${-camera.y}px)`;
+				if (backgroundLayerRef.current) backgroundLayerRef.current.style.transform = transform;
+				if (baseLayerRef.current) baseLayerRef.current.style.transform = transform;
+				if (overlayLayerRef.current) overlayLayerRef.current.style.transform = transform;
+				const cursor = engine.world.getResource(require_ecs.CursorResource).cursor;
 				if (containerRef.current && containerRef.current.style.cursor !== cursor) containerRef.current.style.cursor = cursor;
-				const profiler = engine.profiler;
-				const profilerOn = profiler.isEnabled();
-				let selectionFramesDrawn = 0;
-				let snapGuidesDrawn = 0;
-				let spacingIndicatorsDrawn = 0;
-				if (gridRendererRef.current) gridRendererRef.current.getWebGLRenderer().info.reset();
-				if (gridRendererRef.current) {
-					profiler.beginWebGL("grid");
-					gridRendererRef.current.render(camera.x, camera.y, camera.zoom);
-					profiler.endWebGL("grid");
-				}
-				if (selectionRendererRef.current && gridRendererRef.current) {
-					const selected = engine.getSelectedEntities();
+				const manager = webglManagerRef.current;
+				if (manager) {
+					const selectedIds = engine.getSelectedEntities();
 					const selBounds = [];
-					for (const id of selected) {
-						if (!engine.has(id, require_hooks.SelectionFrame)) continue;
-						const wb = engine.get(id, require_hooks.WorldBounds);
-						if (wb) selBounds.push({
-							x: wb.worldX,
-							y: wb.worldY,
-							width: wb.worldWidth,
-							height: wb.worldHeight
+					for (const id of selectedIds) {
+						if (!engine.has(id, require_ecs.SelectionFrame)) continue;
+						const t = engine.get(id, require_ecs.Transform2D);
+						if (t) selBounds.push({
+							x: t.x,
+							y: t.y,
+							width: t.width,
+							height: t.height
 						});
 					}
 					const hovId = engine.getHoveredEntity();
 					let hovBounds = null;
-					if (hovId !== null && engine.has(hovId, require_hooks.SelectionFrame)) {
-						const wb = engine.get(hovId, require_hooks.WorldBounds);
-						if (wb) hovBounds = {
-							x: wb.worldX,
-							y: wb.worldY,
-							width: wb.worldWidth,
-							height: wb.worldHeight
+					if (hovId !== null && engine.has(hovId, require_ecs.SelectionFrame)) {
+						const t = engine.get(hovId, require_ecs.Transform2D);
+						if (t) hovBounds = {
+							x: t.x,
+							y: t.y,
+							width: t.width,
+							height: t.height
 						};
 					}
-					const snapGuides = engine.getSnapGuides();
-					const equalSpacing = engine.getEqualSpacing();
-					selectionFramesDrawn = selBounds.length + (hovBounds ? 1 : 0);
-					snapGuidesDrawn = snapGuides.length;
-					spacingIndicatorsDrawn = equalSpacing.length;
-					profiler.beginWebGL("selection");
-					selectionRendererRef.current.render(gridRendererRef.current.getWebGLRenderer(), camera.x, camera.y, camera.zoom, selBounds, hovBounds, snapGuides, equalSpacing);
-					profiler.endWebGL("selection");
-				}
-				if (profilerOn && gridRendererRef.current) {
-					const info = gridRendererRef.current.getWebGLRenderer().info;
-					profiler.recordWebGLStats({
-						drawCalls: info.render.calls,
-						triangles: info.render.triangles,
-						selectionFrames: selectionFramesDrawn,
-						snapGuides: snapGuidesDrawn,
-						spacingIndicators: spacingIndicatorsDrawn,
+					manager.render({
+						camera: {
+							x: camera.x,
+							y: camera.y,
+							zoom: camera.zoom
+						},
+						selection: {
+							bounds: selBounds,
+							hovered: hovBounds
+						},
+						snap: {
+							guides: engine.getSnapGuides(),
+							spacings: engine.getEqualSpacing(),
+							visible: engine.getSnapGuidesVisible()
+						},
+						profiler: engine.profiler,
 						domPositionsUpdated: changes.positionsChanged.length
 					});
 				}
 				for (const entityId of changes.positionsChanged) {
 					const el = slotRefs.current.get(entityId);
 					if (!el) continue;
-					const wb = engine.get(entityId, require_hooks.WorldBounds);
-					if (!wb) continue;
-					el.style.transform = `translate(${wb.worldX}px, ${wb.worldY}px)`;
-					el.style.width = `${wb.worldWidth}px`;
-					el.style.height = `${wb.worldHeight}px`;
+					const t = engine.get(entityId, require_ecs.Transform2D);
+					if (!t) continue;
+					el.style.transform = `translate(${t.x}px, ${t.y}px)`;
+					el.style.width = `${t.width}px`;
+					el.style.height = `${t.height}px`;
 				}
-				if (changes.entered.length > 0 || changes.exited.length > 0) setVisibleEntities(engine.getVisibleEntities().map((v) => v.entityId));
+				for (const entityId of changes.zIndicesChanged) {
+					const el = slotRefs.current.get(entityId);
+					if (!el) continue;
+					const z = engine.get(entityId, require_ecs.ZIndex);
+					el.style.zIndex = z ? String(z.value) : "";
+				}
+				if (changes.entered.length > 0 || changes.exited.length > 0 || changes.layersChanged) setVisibleEntities(engine.getVisibleEntities().map((v) => v.entityId));
 				if (changes.selectionChanged && onSelectionChangeRef.current) onSelectionChangeRef.current(engine.getSelectedEntities());
 				if (changes.cameraChanged && onCameraChangeRef.current) onCameraChangeRef.current({
 					x: camera.x,
@@ -744,7 +3729,7 @@ const InfiniteCanvas = react.default.forwardRef(function InfiniteCanvas({ engine
 					zoom: camera.zoom
 				});
 				if (changes.navigationChanged && onNavigationChangeRef.current) {
-					const navStack = engine.world.getResource(require_hooks.NavigationStackResource);
+					const navStack = engine.world.getResource(require_ecs.NavigationStackResource);
 					const depth = navStack.frames.length - 1;
 					const containerId = navStack.frames[navStack.frames.length - 1].containerId;
 					onNavigationChangeRef.current(depth, containerId);
@@ -756,14 +3741,34 @@ const InfiniteCanvas = react.default.forwardRef(function InfiniteCanvas({ engine
 		const visible = engine.getVisibleEntities();
 		setVisibleEntities(visible.map((v) => v.entityId));
 		const camera = engine.getCamera();
-		if (cameraLayerRef.current) cameraLayerRef.current.style.transform = `scale(${camera.zoom}) translate(${-camera.x}px, ${-camera.y}px)`;
-		if (gridRendererRef.current) gridRendererRef.current.render(camera.x, camera.y, camera.zoom);
+		const initTransform = `scale(${camera.zoom}) translate(${-camera.x}px, ${-camera.y}px)`;
+		if (backgroundLayerRef.current) backgroundLayerRef.current.style.transform = initTransform;
+		if (baseLayerRef.current) baseLayerRef.current.style.transform = initTransform;
+		if (overlayLayerRef.current) overlayLayerRef.current.style.transform = initTransform;
+		const manager = webglManagerRef.current;
+		if (manager) manager.render({
+			camera: {
+				x: camera.x,
+				y: camera.y,
+				zoom: camera.zoom
+			},
+			selection: {
+				bounds: [],
+				hovered: null
+			},
+			snap: {
+				guides: [],
+				spacings: [],
+				visible: false
+			}
+		});
 		for (const v of visible) {
 			const el = slotRefs.current.get(v.entityId);
 			if (!el) continue;
-			el.style.transform = `translate(${v.worldX}px, ${v.worldY}px)`;
-			el.style.width = `${v.worldWidth}px`;
-			el.style.height = `${v.worldHeight}px`;
+			el.style.transform = `translate(${v.x}px, ${v.y}px)`;
+			el.style.width = `${v.width}px`;
+			el.style.height = `${v.height}px`;
+			el.style.zIndex = String(v.zIndex);
 		}
 		rafId = requestAnimationFrame(loop);
 		return () => {
@@ -775,24 +3780,33 @@ const InfiniteCanvas = react.default.forwardRef(function InfiniteCanvas({ engine
 		for (const entityId of visibleEntities) {
 			const el = slotRefs.current.get(entityId);
 			if (!el) continue;
-			const wb = engine.get(entityId, require_hooks.WorldBounds);
-			if (!wb) continue;
-			el.style.transform = `translate(${wb.worldX}px, ${wb.worldY}px)`;
-			el.style.width = `${wb.worldWidth}px`;
-			el.style.height = `${wb.worldHeight}px`;
+			const t = engine.get(entityId, require_ecs.Transform2D);
+			if (!t) continue;
+			el.style.transform = `translate(${t.x}px, ${t.y}px)`;
+			el.style.width = `${t.width}px`;
+			el.style.height = `${t.height}px`;
+			const z = engine.get(entityId, require_ecs.ZIndex);
+			if (z) el.style.zIndex = String(z.value);
 		}
 	}, [visibleEntities, engine]);
-	const { domEntities, webglEntities } = (0, react.useMemo)(() => {
-		const dom = [];
+	const { backgroundDom, baseDom, overlayDom, webglEntities } = (0, react.useMemo)(() => {
+		const background = [];
+		const base = [];
+		const overlay = [];
 		const webgl = [];
-		for (const id of visibleEntities) if (engine.get(id, require_hooks.Widget)?.surface === "webgl") webgl.push(id);
-		else dom.push(id);
+		for (const id of visibleEntities) {
+			if (engine.get(id, require_ecs.Widget)?.surface === "webgl") webgl.push(id);
+			const layerName = engine.get(id, require_ecs.Layer)?.name ?? "base";
+			(layerName === "background" ? background : layerName === "overlay" ? overlay : base).push(id);
+		}
 		return {
-			domEntities: dom,
+			backgroundDom: background,
+			baseDom: base,
+			overlayDom: overlay,
 			webglEntities: webgl
 		};
 	}, [visibleEntities, engine]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hooks.EngineProvider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ecs.EngineProvider, {
 		value: engine,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hooks.ContainerRefProvider, {
 			value: containerRef,
@@ -806,29 +3820,30 @@ const InfiniteCanvas = react.default.forwardRef(function InfiniteCanvas({ engine
 						touchAction: "none",
 						backgroundColor: "var(--canvas-bg, #fafafa)"
 					},
-					onPointerDown: onCanvasPointerDown,
-					onPointerMove: onCanvasPointerMove,
-					onPointerUp: onCanvasPointerUp,
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
 							ref: webglCanvasRef,
 							className: "absolute inset-0 pointer-events-none"
 						}),
-						webglEntities.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WebGLWidgetBridge, {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "absolute inset-0 pointer-events-none" }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LayerContainer, {
+							layerRef: backgroundLayerRef,
+							children: bucketSlots(backgroundDom, engine, registerSlotRef)
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LayerContainer, {
+							layerRef: baseLayerRef,
+							children: bucketSlots(baseDom, engine, registerSlotRef)
+						}),
+						containerMounted && webglEntities.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(R3FBridge, {
 							engine,
-							entities: webglEntities
+							entities: webglEntities,
+							r3fRoot,
+							eventManagerRef: r3fEventManagerRef
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "absolute inset-0 pointer-events-none" }),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							ref: cameraLayerRef,
-							className: "absolute left-0 top-0 origin-top-left will-change-transform",
-							children: [domEntities.map((entityId) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WebGLWidgetLayer.WidgetSlot, {
-								entityId,
-								slotRef: registerSlotRef
-							}, entityId)), webglEntities.map((entityId) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WebGLWidgetLayer.SelectionOverlaySlot, {
-								entityId,
-								slotRef: registerSlotRef
-							}, entityId))]
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LayerContainer, {
+							layerRef: overlayLayerRef,
+							zIndex: 2,
+							children: bucketSlots(overlayDom, engine, registerSlotRef)
 						}),
 						children
 					]
@@ -837,91 +3852,298 @@ const InfiniteCanvas = react.default.forwardRef(function InfiniteCanvas({ engine
 		})
 	});
 });
-/** Bridge component — reads widget resolver from context and passes to WebGLWidgetLayer */
-function WebGLWidgetBridge({ engine, entities }) {
+/** Bridge component — reads widget resolver from context and passes to R3FManager. */
+function R3FBridge({ engine, entities, r3fRoot, eventManagerRef }) {
 	const resolver = require_hooks.useWidgetResolver();
 	const resolve = (0, react.useCallback)((entityId) => {
 		if (!resolver) return null;
-		return resolver(entityId, engine.get(entityId, require_hooks.Widget)?.type ?? "");
+		return resolver(entityId, engine.get(entityId, require_ecs.Widget)?.type ?? "");
 	}, [resolver, engine]);
 	if (!resolver) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WebGLWidgetLayer.WebGLWidgetLayer, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hooks.R3FManager, {
 		engine,
 		entities,
-		resolve
+		resolve,
+		r3fRoot,
+		eventManagerRef
+	});
+}
+/**
+* One DOM container for a render layer (RFC-003). Each container holds
+* the WidgetSlot / SelectionOverlaySlot elements for the entities
+* bucketed into its layer; the container's CSS transform is driven by
+* the rAF loop so all layers pan / zoom in lockstep.
+*
+* `zIndex` is applied via a one-shot effect (not via React's `style`
+* prop) so it doesn't fight the rAF loop's direct `style.transform`
+* writes — and so it doesn't depend on Tailwind's content scanner
+* picking up the class from inside the library bundle (which it
+* doesn't, since the library lives in node_modules of the consumer).
+*/
+function LayerContainer({ layerRef, zIndex, children }) {
+	(0, react.useEffect)(() => {
+		if (zIndex !== void 0 && layerRef.current) layerRef.current.style.zIndex = String(zIndex);
+	}, [layerRef, zIndex]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: layerRef,
+		className: "absolute left-0 top-0 origin-top-left will-change-transform",
+		children
+	});
+}
+/**
+* Renders the right slot per entity in a layer container — DOM widgets
+* get a `WidgetSlot`, R3F widgets get a `SelectionOverlaySlot` (chrome
+* + interaction surface; the actual 3D content renders through the R3F
+* canvas). Pure helper so the JSX in the main component stays compact.
+*/
+function bucketSlots(entities, engine, registerSlotRef) {
+	return entities.map((entityId) => {
+		return engine.get(entityId, require_ecs.Widget)?.surface === "webgl" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hooks.SelectionOverlaySlot, {
+			entityId,
+			slotRef: registerSlotRef
+		}, entityId) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hooks.WidgetSlot, {
+			entityId,
+			slotRef: registerSlotRef
+		}, entityId);
+	});
+}
+//#endregion
+//#region src/react/widgets/card.tsx
+/**
+* Visual chrome for an iOS-style card. Reads the entity's `Dragging` tag
+* and forwards `lifted` to {@link CardChrome}, which owns the actual
+* appearance (rounded corners, hairline ring, soft drop shadow, lift
+* transition). Same chrome is used by R3F geometry cards via a DOM slot
+* beneath the WebGL canvas, so DOM and 3D cards stay visually identical.
+*/
+function CardFrame({ entityId, children, className, style }) {
+	const dragging = require_ecs.useTag(entityId, require_ecs.Dragging);
+	const overlapCandidate = require_ecs.useTag(entityId, require_ecs.OverlapCandidate);
+	const overlapTarget = require_ecs.useTag(entityId, require_ecs.OverlapTarget);
+	const hot = require_ecs.useComponent(entityId, require_ecs.CardOverlapHotPoint);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hooks.CardChrome, {
+		lifted: dragging,
+		className,
+		style,
+		overlapCandidate,
+		overlapTarget,
+		hotX: hot?.x,
+		hotY: hot?.y,
+		hotStrength: hot?.strength,
+		children
 	});
 }
+/**
+* Returns a paired widget + archetype for an iOS-style card. Register both
+* with `createLayoutEngine({ widgets: [card.widget], archetypes: [card.archetype] })`
+* (or via `engine.registerWidget` / `engine.registerArchetype`) and spawn with
+* `engine.spawn('your-card-type', { at, data })`.
+*
+* The produced widget is non-resizable (Selectable + Draggable only), wrapped
+* in `<CardFrame>`, and spawns with a `Card` component so `cardSystem` enforces
+* the preset size each tick.
+*/
+function createCardWidget(opts) {
+	const defaultSize = require_ecs.DEFAULT_CARD_PRESET_SIZES[opts.size];
+	const Render = opts.render;
+	const Component = ({ entityId }) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardFrame, {
+			entityId,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Render, {
+				entityId,
+				data: useWidgetData(entityId)
+			})
+		});
+	};
+	return {
+		widget: {
+			type: opts.type,
+			schema: opts.schema,
+			defaultData: opts.defaultData,
+			defaultSize,
+			component: Component,
+			interaction: opts.interaction
+		},
+		archetype: {
+			id: opts.type,
+			widget: opts.type,
+			components: [[require_ecs.Card, {
+				preset: opts.size,
+				accepts: opts.accepts ?? [],
+				provides: opts.provides ?? []
+			}]],
+			interactive: {
+				selectable: true,
+				draggable: true,
+				resizable: false,
+				selectionFrame: false,
+				snapSource: false,
+				snapTarget: true
+			},
+			defaultSize
+		}
+	};
+}
+//#endregion
+//#region src/r3f/widgets/geometry-card.tsx
+/**
+* Returns a paired R3F widget + archetype for a card-shaped 3D widget.
+* Behaves like {@link createCardWidget} — fixed preset size, non-resizable,
+* no engine-drawn selection frame, and lifts on drag (scale + z) — but
+* renders a three.js scene instead of DOM content.
+*
+* The card body and drop shadow are rendered as DOM `<CardChrome>`
+* beneath the WebGL canvas, not inside the FBO. The user's `geometry`
+* component renders ONLY the 3D content; chrome is provided by the
+* `Card` ECS component (the source of truth for all card-shaped
+* behavior — chrome, lift, drag-promote, compositor discard).
+*
+* Pass `withCard: false` to skip card behavior entirely (bare 3D
+* widget — no chrome, no lift, no discard).
+*
+* Lighting: this helper adds no lights. Declare your own in the `geometry`
+* component (typically a local `pointLight` scoped with `distance`).
+*/
+function createGeometryCardWidget(opts) {
+	const defaultSize = require_ecs.DEFAULT_CARD_PRESET_SIZES[opts.size];
+	const Render = opts.geometry;
+	const withCard = opts.withCard ?? true;
+	const Component = ({ entityId, width, height }) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Render, {
+			entityId,
+			data: useWidgetData(entityId),
+			width,
+			height
+		});
+	};
+	return {
+		widget: {
+			type: opts.type,
+			surface: "webgl",
+			schema: opts.schema,
+			defaultData: opts.defaultData,
+			defaultSize,
+			component: Component,
+			interaction: opts.interaction
+		},
+		archetype: {
+			id: opts.type,
+			widget: opts.type,
+			components: withCard ? [[require_ecs.Card, {
+				preset: opts.size,
+				background: opts.background ?? "#1C1C1E",
+				accepts: opts.accepts ?? [],
+				provides: opts.provides ?? []
+			}]] : [],
+			interactive: {
+				selectable: true,
+				draggable: true,
+				resizable: false,
+				selectionFrame: false,
+				snapSource: false,
+				snapTarget: true
+			},
+			defaultSize
+		}
+	};
+}
 //#endregion
-exports.Active = require_hooks.Active;
-exports.BreakpointConfigResource = require_hooks.BreakpointConfigResource;
-exports.CameraResource = require_hooks.CameraResource;
-exports.Card = require_hooks.Card;
+exports.Active = require_ecs.Active;
+exports.BreakpointConfigResource = require_ecs.BreakpointConfigResource;
+exports.CameraResource = require_ecs.CameraResource;
+exports.Card = require_ecs.Card;
+exports.CardChrome = require_hooks.CardChrome;
 exports.CardFrame = CardFrame;
-exports.CardPresetsResource = require_hooks.CardPresetsResource;
-exports.Children = require_hooks.Children;
-exports.CommandBuffer = require_WebGLWidgetLayer.CommandBuffer;
-exports.Container = require_hooks.Container;
-exports.CursorHint = require_hooks.CursorHint;
-exports.CursorResource = require_hooks.CursorResource;
-exports.DEFAULT_GRID_CONFIG = require_WebGLWidgetLayer.DEFAULT_GRID_CONFIG;
-exports.DEFAULT_SELECTION_CONFIG = require_WebGLWidgetLayer.DEFAULT_SELECTION_CONFIG;
-exports.Draggable = require_hooks.Draggable;
-exports.Dragging = require_hooks.Dragging;
-exports.HandleSet = require_hooks.HandleSet;
-exports.Hitbox = require_hooks.Hitbox;
+exports.CardOverlapHotPoint = require_ecs.CardOverlapHotPoint;
+exports.CardPresetsResource = require_ecs.CardPresetsResource;
+exports.Children = require_ecs.Children;
+exports.CommandBuffer = CommandBuffer;
+exports.ConsumeCommand = ConsumeCommand;
+exports.Container = require_ecs.Container;
+exports.ContainerCamera = require_ecs.ContainerCamera;
+exports.ContainerChildren = require_ecs.ContainerChildren;
+exports.Culled = require_ecs.Culled;
+exports.CursorHint = require_ecs.CursorHint;
+exports.CursorResource = require_ecs.CursorResource;
+exports.DEFAULT_GRID_CONFIG = require_hooks.DEFAULT_GRID_CONFIG;
+exports.DEFAULT_OVERLAP_GLOW_CONFIG = DEFAULT_OVERLAP_GLOW_CONFIG;
+exports.DEFAULT_SELECTION_CONFIG = require_hooks.DEFAULT_SELECTION_CONFIG;
+exports.DEFAULT_SNAP_GUIDE_CONFIG = require_hooks.DEFAULT_SNAP_GUIDE_CONFIG;
+exports.Draggable = require_ecs.Draggable;
+exports.Dragging = require_ecs.Dragging;
 exports.InfiniteCanvas = InfiniteCanvas;
-exports.InteractionRole = require_hooks.InteractionRole;
-exports.Locked = require_hooks.Locked;
-exports.MoveCommand = require_WebGLWidgetLayer.MoveCommand;
-exports.NavigationStackResource = require_hooks.NavigationStackResource;
-exports.Parent = require_hooks.Parent;
-exports.Resizable = require_hooks.Resizable;
-exports.ResizeCommand = require_WebGLWidgetLayer.ResizeCommand;
-exports.Selectable = require_hooks.Selectable;
-exports.Selected = require_hooks.Selected;
-exports.SelectionFrame = require_hooks.SelectionFrame;
-exports.SetComponentCommand = require_WebGLWidgetLayer.SetComponentCommand;
-exports.Transform2D = require_hooks.Transform2D;
-exports.ViewportResource = require_hooks.ViewportResource;
-exports.Visible = require_hooks.Visible;
-exports.Widget = require_hooks.Widget;
-exports.WidgetBreakpoint = require_hooks.WidgetBreakpoint;
-exports.WidgetData = require_hooks.WidgetData;
+exports.InteractionRole = require_ecs.InteractionRole;
+exports.Layer = require_ecs.Layer;
+exports.LayerOrderResource = require_ecs.LayerOrderResource;
+exports.Locked = require_ecs.Locked;
+exports.MoveCommand = MoveCommand;
+exports.NavigationStackResource = require_ecs.NavigationStackResource;
+exports.OverlapCandidate = require_ecs.OverlapCandidate;
+exports.OverlapTarget = require_ecs.OverlapTarget;
+exports.ParentFrame = require_ecs.ParentFrame;
+exports.Resizable = require_ecs.Resizable;
+exports.ResizeCommand = ResizeCommand;
+exports.RootCameraResource = require_ecs.RootCameraResource;
+exports.Selectable = require_ecs.Selectable;
+exports.Selected = require_ecs.Selected;
+exports.SelectionFrame = require_ecs.SelectionFrame;
+exports.SetComponentCommand = SetComponentCommand;
+exports.SnapSource = require_ecs.SnapSource;
+exports.SnapTarget = require_ecs.SnapTarget;
+exports.Transform2D = require_ecs.Transform2D;
+exports.TransformTween = require_ecs.TransformTween;
+exports.ViewportResource = require_ecs.ViewportResource;
+exports.Visible = require_ecs.Visible;
+exports.Widget = require_ecs.Widget;
+exports.WidgetBreakpoint = require_ecs.WidgetBreakpoint;
+exports.WidgetData = require_ecs.WidgetData;
 exports.WidgetProvider = WidgetProvider;
 exports.WidgetResolverProvider = require_hooks.WidgetResolverProvider;
-exports.WorldBounds = require_hooks.WorldBounds;
-exports.ZIndex = require_hooks.ZIndex;
-exports.ZoomConfigResource = require_hooks.ZoomConfigResource;
-exports.clamp = require_WebGLWidgetLayer.clamp;
-exports.createArchetypeRegistry = require_WebGLWidgetLayer.createArchetypeRegistry;
+exports.ZIndex = require_ecs.ZIndex;
+exports.ZOOM_BANDS = require_hooks.ZOOM_BANDS;
+exports.ZoomConfigResource = require_ecs.ZoomConfigResource;
+exports.aabbToRect = aabbToRect;
+exports.clamp = clamp;
+exports.createArchetypeRegistry = createArchetypeRegistry;
 exports.createCardWidget = createCardWidget;
 exports.createGeometryCardWidget = createGeometryCardWidget;
-exports.createLayoutEngine = require_WebGLWidgetLayer.createLayoutEngine;
-exports.createWidgetRegistry = require_WebGLWidgetLayer.createWidgetRegistry;
-exports.intersectsAABB = require_WebGLWidgetLayer.intersectsAABB;
-exports.isR3FWidget = require_WebGLWidgetLayer.isR3FWidget;
-exports.pointInAABB = require_WebGLWidgetLayer.pointInAABB;
-exports.screenToWorld = require_WebGLWidgetLayer.screenToWorld;
-exports.useAllEntities = require_hooks.useAllEntities;
+exports.createLayoutEngine = createLayoutEngine;
+exports.createWidgetRegistry = createWidgetRegistry;
+exports.intersectsAABB = intersectsAABB;
+exports.isFrameAncestorOf = isFrameAncestorOf;
+exports.isOutOfBand = require_hooks.isOutOfBand;
+exports.isR3FWidget = isR3FWidget;
+exports.pointInAABB = pointInAABB;
+exports.rectToAABB = rectToAABB;
+exports.rehydrateEntity = rehydrateEntity;
+exports.screenToWorld = screenToWorld;
+exports.selectBand = require_hooks.selectBand;
+exports.snapshotEntity = snapshotEntity;
+exports.useAllEntities = require_ecs.useAllEntities;
 exports.useBreakpoint = useBreakpoint;
-exports.useCamera = require_hooks.useCamera;
+exports.useCamera = require_ecs.useCamera;
 exports.useChildren = useChildren;
-exports.useComponent = require_hooks.useComponent;
+exports.useComponent = require_ecs.useComponent;
 exports.useContainerRef = require_hooks.useContainerRef;
-exports.useEntityComponents = require_hooks.useEntityComponents;
-exports.useEntityTags = require_hooks.useEntityTags;
+exports.useEntityComponents = require_ecs.useEntityComponents;
+exports.useEntityTags = require_ecs.useEntityTags;
 exports.useIsSelected = useIsSelected;
-exports.useLayoutEngine = require_hooks.useLayoutEngine;
-exports.useQuery = require_hooks.useQuery;
-exports.useRegisteredComponents = require_hooks.useRegisteredComponents;
-exports.useRegisteredTags = require_hooks.useRegisteredTags;
-exports.useResource = require_hooks.useResource;
-exports.useTag = require_hooks.useTag;
-exports.useTaggedEntities = require_hooks.useTaggedEntities;
+exports.useLayoutEngine = require_ecs.useLayoutEngine;
+exports.useQuery = require_ecs.useQuery;
+exports.useRegisteredComponents = require_ecs.useRegisteredComponents;
+exports.useRegisteredTags = require_ecs.useRegisteredTags;
+exports.useResource = require_ecs.useResource;
+exports.useSharedGeometry = require_hooks.useSharedGeometry;
+exports.useSharedMaterial = require_hooks.useSharedMaterial;
+exports.useSharedTexture = require_hooks.useSharedTexture;
+exports.useTag = require_ecs.useTag;
+exports.useTaggedEntities = require_ecs.useTaggedEntities;
 exports.useUpdateWidget = useUpdateWidget;
+exports.useWidgetAnimation = require_hooks.useWidgetAnimation;
 exports.useWidgetData = useWidgetData;
+exports.useWidgetInvalidate = require_hooks.useWidgetInvalidate;
+exports.useWidgetPhase = require_hooks.useWidgetPhase;
 exports.useWidgetResolver = require_hooks.useWidgetResolver;
-exports.worldBoundsToAABB = require_WebGLWidgetLayer.worldBoundsToAABB;
-exports.worldToScreen = require_WebGLWidgetLayer.worldToScreen;
+exports.worldToScreen = worldToScreen;
 
 //# sourceMappingURL=index.cjs.map