@simpludify/web 0.1.5 → 0.1.7

package/dist/index.js

@@ -1,5 +1,5 @@
 import "./style.css";
-import { ActionController, Aspect, Camera, CanvasButton as CanvasButton$1, CanvasUI, Engine, EngineError, EventBus, FixedStepRunner, GeometryTilemapLayer, Lifetime, PointerRouting, Renderable, ReplayPlayer, Scene, ScenePointer, SceneState, Shape, TilemapLayer, Transform, VirtualInput, canvasControlText, canvasHoverHighlight, canvasOpacity, canvasScrollbars, canvasSliderGeometry, cleanupAll, containsScreenPoint, createViewTransform, defineEvent, imageSize, intersectUI, isKeyCode, positive, screenPoint, screenToWorld, spriteFrameBounds, worldToScreen, wrapCanvasText } from "@simpludify/core";
+import { ActionController, Aspect, Camera, CanvasButton as CanvasButton$1, CanvasUI, Engine, EngineError, EventBus, FixedStepRunner, GamepadAxis, GamepadBindings, GamepadButton, GeometryTilemapLayer, InputCapture, InputCaptureState, InputDevice, Lifetime, MouseButton, PointerRouting, Renderable, ReplayPlayer, Scene, ScenePointer, SceneState, Shape, TilemapLayer, Transform, VirtualInput, canvasControlText, canvasHoverHighlight, canvasOpacity, canvasScrollbars, canvasSliderGeometry, checkedGamepadBindings, cleanupAll, containsScreenPoint, createViewTransform, defineEvent, gamepadDeadZone, gamepadIndex, imageSize, intersectUI, isKeyCode, isMouseButton, positive, screenPoint, screenToWorld, spriteFrameBounds, worldToScreen, wrapCanvasText } from "@simpludify/core";
 import { Application, CanvasTextMetrics, Container, Graphics, Rectangle, RendererType, Sprite, Text, TextStyle, Texture } from "pixi.js";
 export * from "@simpludify/core";
 // packages/web/src/canvas-node.ts
@@ -17,135 +17,6 @@ function CanvasButton(text, click, style = {}) {
 		return click(signal);
 	}, style);
 }
-// packages/web/src/gamepad-bindings.ts
-/** Standard mapping physical positions, not product-specific printed labels. */
-var GamepadButton = Object.freeze({
-	South: 0,
-	East: 1,
-	West: 2,
-	North: 3,
-	LeftShoulder: 4,
-	RightShoulder: 5,
-	LeftTrigger: 6,
-	RightTrigger: 7,
-	Select: 8,
-	Start: 9,
-	LeftStick: 10,
-	RightStick: 11,
-	DPadUp: 12,
-	DPadDown: 13,
-	DPadLeft: 14,
-	DPadRight: 15,
-	Home: 16
-});
-var GamepadAxis = Object.freeze({
-	LeftX: 0,
-	LeftY: 1,
-	RightX: 2,
-	RightY: 3
-});
-var axis = (index) => Object.freeze({ axis: index });
-/** Ready-to-use data; game Actions retain application-defined names. */
-var GamepadBindings = Object.freeze({
-	LeftStick: Object.freeze({
-		x: axis(0),
-		y: axis(1)
-	}),
-	RightStick: Object.freeze({
-		x: axis(2),
-		y: axis(3)
-	}),
-	DPad: Object.freeze({
-		x: Object.freeze({
-			negative: Object.freeze([14]),
-			positive: Object.freeze([15])
-		}),
-		y: Object.freeze({
-			negative: Object.freeze([12]),
-			positive: Object.freeze([13])
-		})
-	}),
-	Move: Object.freeze({
-		x: Object.freeze({
-			axis: 0,
-			negative: Object.freeze([14]),
-			positive: Object.freeze([15])
-		}),
-		y: Object.freeze({
-			axis: 1,
-			negative: Object.freeze([12]),
-			positive: Object.freeze([13])
-		})
-	})
-});
-var fail = () => {
-	throw new EngineError("INVALID_GAMEPAD_BINDING", "Invalid gamepad binding");
-};
-function gamepadIndex(value) {
-	if (typeof value !== "number" || !Number.isSafeInteger(value) || value < 0) return fail();
-	return value;
-}
-function gamepadDeadZone(value) {
-	if (typeof value !== "number" || !Number.isFinite(value) || value < 0 || value >= 1) return fail();
-	return value;
-}
-function record(value, keys) {
-	if (!value || typeof value !== "object" || Array.isArray(value) || Object.keys(value).some((k) => !keys.includes(k))) return fail();
-	return Object.fromEntries(Object.entries(value));
-}
-function axisBinding(value) {
-	const v = record(value, [
-		"axis",
-		"invert",
-		"negative",
-		"positive",
-		"deadZone"
-	]);
-	const indices = (value) => {
-		if (value === void 0) return Object.freeze([]);
-		if (!Array.isArray(value)) return fail();
-		return Object.freeze([...new Set(value.map(gamepadIndex))]);
-	};
-	if (v.invert !== void 0 && typeof v.invert !== "boolean") return fail();
-	return Object.freeze({
-		...v.axis === void 0 ? {} : { axis: gamepadIndex(v.axis) },
-		invert: v.invert ?? false,
-		negative: indices(v.negative),
-		positive: indices(v.positive),
-		...v.deadZone === void 0 ? {} : { deadZone: gamepadDeadZone(v.deadZone) }
-	});
-}
-function checkedGamepadBindings(actions, value) {
-	const v = record(value, Object.keys(actions));
-	return Object.freeze(Object.entries(v).map(([name, binding]) => {
-		if (!Object.hasOwn(actions, name)) return fail();
-		const action = actions[name];
-		if (!action) return fail();
-		let result;
-		if (action.kind === "button") {
-			const b = record(binding, ["buttons"]);
-			if (b.buttons !== void 0 && !Array.isArray(b.buttons)) return fail();
-			result = Object.freeze({ buttons: Object.freeze((b.buttons ?? []).map((item) => {
-				if (typeof item === "number") return gamepadIndex(item);
-				const b = record(item, ["button", "threshold"]), threshold = b.threshold ?? .5;
-				if (typeof threshold !== "number" || !Number.isFinite(threshold) || threshold <= 0 || threshold > 1) return fail();
-				return Object.freeze({
-					button: gamepadIndex(b.button),
-					threshold
-				});
-			})) });
-		} else if (action.kind === "axis1d") result = axisBinding(binding);
-		else {
-			const keys = action.kind === "axis2d" ? ["x", "y"] : [
-				"x",
-				"y",
-				"z"
-			], b = record(binding, keys);
-			result = Object.freeze(Object.fromEntries(keys.map((k) => [k, axisBinding(b[k] ?? {})])));
-		}
-		return Object.freeze([action, result]);
-	}));
-}
 // packages/web/src/gamepad-layout.ts
 var positions = Object.fromEntries(Object.entries(GamepadButton).map(([name, index]) => [index, name]));
 var faces = Object.freeze({
@@ -230,6 +101,9 @@ var GamepadSource = class {
 	signature;
 	zone;
 	mapping;
+	following;
+	bindingRevision;
+	waiting = /* @__PURE__ */ new Set();
 	constructor(input, controller, options) {
 		this.input = input;
 		this.controller = controller;
@@ -238,7 +112,9 @@ var GamepadSource = class {
 		this.zone = gamepadDeadZone(options.deadZone ?? .15);
 		this.mapping = options.mapping ?? "standard";
 		if (this.mapping !== "standard" && this.mapping !== "raw") throw new EngineError("INVALID_GAMEPAD_BINDING", "Unknown gamepad mapping policy");
-		this.bindings = checkedGamepadBindings(controller.actions, options.bindings);
+		this.following = options.bindings === void 0;
+		this.bindingRevision = controller.bindingRevision;
+		this.bindings = this.following ? this.commonBindings() : checkedGamepadBindings(controller.actions, options.bindings);
 		this.source = controller.createSource();
 		this.life.onDispose(() => this.source.dispose());
 		this.life.onDispose(controller.onDispose(() => this.dispose()));
@@ -277,19 +153,42 @@ var GamepadSource = class {
 	}
 	rebind(bindings) {
 		this.alive();
-		const checked = checkedGamepadBindings(this.controller.actions, bindings);
+		const checked = bindings === void 0 ? this.commonBindings() : checkedGamepadBindings(this.controller.actions, bindings);
 		this.clear();
 		this.bindings = checked;
+		this.following = bindings === void 0;
+		this.bindingRevision = this.controller.bindingRevision;
+	}
+	commonBindings() {
+		return Object.freeze(Object.values(this.controller.actions).flatMap((action) => {
+			const binding = this.controller.getBinding(action).gamepad;
+			return binding ? [Object.freeze([action, binding])] : [];
+		}));
+	}
+	syncBindings() {
+		if (!this.following || this.bindingRevision === this.controller.bindingRevision) return;
+		const next = this.commonBindings();
+		const before = new Map(this.bindings), after = new Map(next);
+		for (const action of /* @__PURE__ */ new Set([...before.keys(), ...after.keys()])) {
+			if (JSON.stringify(before.get(action)) === JSON.stringify(after.get(action))) continue;
+			this.source.resetBinding(action);
+			if (after.has(action)) this.waiting.add(action);
+			else this.waiting.delete(action);
+		}
+		this.bindings = next;
+		this.bindingRevision = this.controller.bindingRevision;
 	}
 	clear() {
 		this.source.clear();
 		this.armed = false;
+		this.waiting.clear();
 	}
 	alive() {
 		if (this.disposed) throw new EngineError("OWNER_DISPOSED", "Gamepad source has been disposed");
 	}
 	/** @internal */ sample(pad, allowed) {
 		if (this.disposed) return;
+		this.syncBindings();
 		if (!allowed || !this.enabled || !this.controller.active || !pad || this.mapping === "standard" && pad.mapping !== "standard") {
 			this.clear();
 			this.signature = void 0;
@@ -310,7 +209,13 @@ var GamepadSource = class {
 			if (next.every(([, value]) => neutral(value))) this.armed = true;
 			return;
 		}
-		for (const [action, value] of next) this.source.set(action, value);
+		for (const [action, value] of next) {
+			if (this.waiting.has(action)) {
+				if (!neutral(value)) continue;
+				this.waiting.delete(action);
+			}
+			this.source.set(action, value);
+		}
 	}
 	/** @internal */ onDispose(callback) {
 		return this.life.onDispose(callback);
@@ -331,6 +236,7 @@ var GamepadInput = class {
 	readable = false;
 	poll;
 	active;
+	observe;
 	constructor(input, options = {}) {
 		this.input = input;
 		this.life.onDispose(() => this.changes.dispose());
@@ -338,6 +244,7 @@ var GamepadInput = class {
 			throw new Error("Gamepad API unavailable");
 		})());
 		this.active = options.active ?? (() => true);
+		this.observe = options.observe;
 		this.life.onDispose(input.addAdapter(this));
 		const events = options.events ?? (typeof window === "undefined" ? void 0 : window), abort = new AbortController();
 		this.life.onDispose(() => abort.abort());
@@ -412,7 +319,8 @@ var GamepadInput = class {
 			axisCount: p.axes.length,
 			inferredLayout: inferredGamepadLayout(p.id)
 		})));
-		const allowed = this.active();
+		this.observe?.(pads);
+		const allowed = this.active() && this.input.liveInput;
 		for (const source of this.sources) if (source.disposed) this.sources.delete(source);
 		else source.sample(pads.get(source.index), allowed);
 		this.publish(listed, wasReadable !== this.readable);
@@ -520,35 +428,287 @@ var BrowserInput = class {
 		this.clear();
 	}
 };
+// packages/web/src/input-capture.ts
+var mouseMasks$1 = [
+	[0, 1],
+	[1, 4],
+	[2, 2],
+	[3, 8],
+	[4, 16]
+];
+/** @internal One Game-owned observer; existing adapters retain gameplay ownership. */
+var InputCaptureManager = class {
+	host;
+	input;
+	scene;
+	releasePointers;
+	report;
+	abort = new AbortController();
+	current;
+	keys = /* @__PURE__ */ new Set();
+	blockedKeys = /* @__PURE__ */ new Set();
+	blockedPointers = /* @__PURE__ */ new Set();
+	blockedAuxiliary = /* @__PURE__ */ new Set();
+	mouseButtons = 0;
+	needsPadSample = false;
+	pads = /* @__PURE__ */ new Map();
+	readyPads = /* @__PURE__ */ new Set();
+	dead = false;
+	constructor(host, input, scene, releasePointers, report) {
+		this.host = host;
+		this.input = input;
+		this.scene = scene;
+		this.releasePointers = releasePointers;
+		this.report = report;
+		const options = {
+			capture: true,
+			signal: this.abort.signal
+		};
+		window.addEventListener("keydown", (event) => this.guard(() => this.keyDown(event)), options);
+		window.addEventListener("keyup", (event) => this.guard(() => {
+			if (isKeyCode(event.code)) {
+				this.keys.delete(event.code);
+				this.blockedKeys.delete(event.code);
+			}
+			this.arm();
+		}), options);
+		for (const kind of [
+			"pointerdown",
+			"pointermove",
+			"pointerup",
+			"pointercancel"
+		]) window.addEventListener(kind, (event) => this.guard(() => this.pointer(event)), options);
+		for (const kind of ["auxclick", "contextmenu"]) window.addEventListener(kind, (event) => {
+			if (this.surface(event.target) && isMouseButton(event.button) && this.blockedAuxiliary.has(event.button)) {
+				this.consume(event);
+				if (kind === "auxclick") this.blockedAuxiliary.delete(event.button);
+			}
+		}, options);
+		window.addEventListener("blur", (event) => {
+			if (event.target === window) this.interrupt();
+		}, options);
+		document.addEventListener("visibilitychange", () => {
+			if (document.hidden) this.interrupt();
+		}, options);
+		host.addEventListener("focusout", (event) => {
+			if (!(event.relatedTarget instanceof Node) || !host.contains(event.relatedTarget) || blocksGameKeyboard(event.relatedTarget)) this.interrupt();
+		}, options);
+		host.addEventListener("focusin", (event) => {
+			if (blocksGameKeyboard(event.target)) this.interrupt();
+		}, options);
+	}
+	start(options = {}) {
+		if (this.dead) throw new EngineError("GAME_DISPOSED", "Capture host has been disposed");
+		if (this.current) throw new EngineError("INPUT_CAPTURE_ACTIVE", "Cancel the active capture before starting another");
+		const scene = this.scene();
+		if (scene.state !== SceneState.Active || document.hidden || !document.hasFocus()) throw new EngineError("INPUT_CAPTURE_UNAVAILABLE", "Capture requires an active Scene and focused visible document");
+		const capture = new InputCapture(options);
+		let release;
+		try {
+			capture.onDispose(scene.onDispose(() => capture.cancel()));
+			capture.onDispose(() => {
+				if (this.current === capture) this.current = void 0;
+				this.pads.clear();
+				this.readyPads.clear();
+				this.needsPadSample = false;
+				release?.();
+			});
+			this.current = capture;
+			this.needsPadSample = capture.devices.includes(InputDevice.Gamepad);
+			for (const key of this.keys) this.blockedKeys.add(key);
+			for (const [button, mask] of mouseMasks$1) if (this.mouseButtons & mask) this.blockedAuxiliary.add(button);
+			this.releasePointers();
+			if (capture.disposed) return capture;
+			release = this.input.suspendLiveInput(() => capture.cancel());
+			if (capture.disposed) {
+				release();
+				return capture;
+			}
+			this.host.focus({ preventScroll: true });
+			this.arm();
+			return capture;
+		} catch (error) {
+			capture.cancel();
+			throw error;
+		}
+	}
+	arm() {
+		const capture = this.current;
+		if (!capture || capture.state !== InputCaptureState.Arming || this.needsPadSample) return;
+		if (capture.devices.includes(InputDevice.Keyboard) && this.keys.size) return;
+		if (capture.devices.includes(InputDevice.Mouse) && this.mouseButtons) return;
+		if (capture.devices.includes(InputDevice.Gamepad) && [...this.pads.values()].some((pad) => (capture.gamepadIndex === void 0 || capture.gamepadIndex === pad.index) && pad.buttons.size)) return;
+		capture.arm();
+	}
+	keyDown(event) {
+		if (event.isComposing || event.keyCode === 229 || !isKeyCode(event.code)) return;
+		const previous = this.keys.has(event.code);
+		this.keys.add(event.code);
+		if (!(event.target instanceof Node) || !this.host.contains(event.target)) return;
+		if (blocksGameKeyboard(event.target)) return;
+		if (event.target instanceof HTMLElement && event.target.closest("button")) return;
+		const capture = this.current;
+		if (!capture && !this.blockedKeys.has(event.code)) return;
+		this.blockedKeys.add(event.code);
+		this.consume(event);
+		if (capture && !previous && !event.repeat) capture.accept({
+			device: InputDevice.Keyboard,
+			code: event.code
+		});
+	}
+	surface(target) {
+		return target === this.host || target instanceof HTMLCanvasElement && target.parentElement === this.host;
+	}
+	pointer(event) {
+		const capture = this.current, mouse = event.pointerType === "mouse", old = this.mouseButtons;
+		if (mouse) this.mouseButtons = event.type === "pointercancel" ? 0 : event.buttons;
+		if (event.type === "pointerdown" && !capture) {
+			this.blockedPointers.delete(event.pointerId);
+			if (isMouseButton(event.button)) this.blockedAuxiliary.delete(event.button);
+		}
+		const blocked = this.blockedPointers.has(event.pointerId);
+		if (capture && this.surface(event.target)) {
+			if (event.type === "pointerdown") this.host.focus({ preventScroll: true });
+			this.blockedPointers.add(event.pointerId);
+			this.consume(event);
+			if (mouse && isMouseButton(event.button)) {
+				const mask = mouseMasks$1.find(([button]) => button === event.button)?.[1] ?? 0;
+				if (event.buttons & mask && !(old & mask)) {
+					this.blockedAuxiliary.add(event.button);
+					capture.accept({
+						device: InputDevice.Mouse,
+						button: event.button
+					});
+				}
+			}
+		} else if (blocked) this.consume(event);
+		if (event.type === "pointerup" || event.type === "pointercancel" || mouse && event.buttons === 0) this.blockedPointers.delete(event.pointerId);
+		this.arm();
+	}
+	/** Same validated gamepad poll as gameplay; no navigator polling in this manager. */
+	sample(pads) {
+		const capture = this.current;
+		if (!capture?.devices.includes(InputDevice.Gamepad)) return;
+		const before = this.pads, first = this.needsPadSample, next = /* @__PURE__ */ new Map();
+		for (const pad of pads.values()) {
+			const buttons = /* @__PURE__ */ new Set();
+			pad.buttons.forEach((button, index) => {
+				if (Number.isFinite(button?.value) && button.value >= .5) buttons.add(index);
+			});
+			const signature = JSON.stringify([
+				pad.id,
+				pad.mapping,
+				pad.buttons.length
+			]);
+			const entry = {
+				index: pad.index,
+				id: pad.id,
+				mapping: pad.mapping,
+				signature,
+				buttons
+			};
+			next.set(pad.index, entry);
+			if (first || before.get(pad.index)?.signature !== signature) this.readyPads.delete(pad.index);
+			if (!buttons.size) this.readyPads.add(pad.index);
+		}
+		for (const index of this.readyPads) if (!next.has(index)) this.readyPads.delete(index);
+		this.pads = next;
+		this.needsPadSample = false;
+		this.arm();
+		if (first || capture.state !== InputCaptureState.Listening) return;
+		for (const pad of [...next.values()].sort((a, b) => a.index - b.index)) {
+			if (!this.readyPads.has(pad.index) || before.get(pad.index)?.signature !== pad.signature) continue;
+			for (const button of pad.buttons) if (!before.get(pad.index)?.buttons.has(button) && capture.accept({
+				device: InputDevice.Gamepad,
+				index: pad.index,
+				id: pad.id,
+				mapping: pad.mapping,
+				button
+			})) return;
+		}
+	}
+	consume(event) {
+		event.preventDefault();
+		event.stopImmediatePropagation();
+	}
+	guard(action) {
+		try {
+			action();
+		} catch (error) {
+			this.report(error);
+		}
+	}
+	interrupt() {
+		this.guard(() => this.current?.cancel());
+		this.keys.clear();
+		this.blockedKeys.clear();
+		this.blockedPointers.clear();
+		this.blockedAuxiliary.clear();
+		this.mouseButtons = 0;
+	}
+	dispose() {
+		if (this.dead) return;
+		this.dead = true;
+		this.abort.abort();
+		this.interrupt();
+	}
+};
 // packages/web/src/pointer.ts
+var mouseMasks = [
+	[MouseButton.Left, 1],
+	[MouseButton.Middle, 4],
+	[MouseButton.Right, 2],
+	[MouseButton.Back, 8],
+	[MouseButton.Forward, 16]
+];
 /** One DOM capture-phase adapter per Game; Pixi federated events never route these widgets. */
 var BrowserPointer = class {
 	host;
 	project;
 	report;
 	flush;
+	input;
 	routing;
 	abort = new AbortController();
-	constructor(host, project, report, flush) {
+	mouse;
+	mouseStates = /* @__PURE__ */ new Map();
+	blockedMouse = /* @__PURE__ */ new Set();
+	auxiliary = /* @__PURE__ */ new Set();
+	offInput;
+	constructor(host, project, report, flush, input) {
 		this.host = host;
 		this.project = project;
 		this.report = report;
 		this.flush = flush;
+		this.input = input;
 		this.routing = new PointerRouting((id) => {
 			if (host.hasPointerCapture(id)) host.releasePointerCapture(id);
 		});
+		this.mouse = input?.createMouseSource();
+		this.offInput = input?.addAdapter({
+			sample: () => {},
+			reset: () => this.resetMouse(),
+			dispose: () => this.dispose()
+		});
 		const options = {
 			signal: this.abort.signal,
 			capture: true
 		};
 		host.addEventListener("pointerdown", (e) => this.guard(() => {
 			if (!this.surface(e.target)) return;
+			if (e.pointerType === "mouse") {
+				this.releaseMouse(e.pointerId);
+				this.blockedMouse.delete(e.pointerId);
+				if (isMouseButton(e.button)) this.auxiliary.delete(e.button);
+			}
 			this.flush();
 			const data = this.data(e);
+			if (!data) return this.release();
 			try {
 				host.setPointerCapture(e.pointerId);
 			} catch {}
 			const target = this.routing.down(data);
+			this.updateMouse(e);
 			if (this.routing.has(e.pointerId)) {
 				e.preventDefault();
 				if (target) focusGameSurface(host);
@@ -561,7 +721,9 @@ var BrowserPointer = class {
 		host.addEventListener("wheel", (e) => this.guard(() => {
 			if (!this.surface(e.target)) return;
 			this.flush();
-			const { screen } = this.project(e);
+			const projected = this.project(e);
+			if (!projected) return;
+			const { screen } = projected;
 			const unit = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? host.clientHeight : 1;
 			if (this.routing.scroll(screen.x, screen.y, e.deltaX * unit, e.deltaY * unit)) e.preventDefault();
 		}), {
@@ -570,37 +732,98 @@ var BrowserPointer = class {
 		});
 		window.addEventListener("pointermove", (e) => this.guard(() => {
 			if (!this.routing.owns(e.pointerId) && !this.surface(e.target)) {
-				if (this.routing.hasHover(e.pointerId)) this.routing.leave(this.data(e));
+				if (e.pointerType === "mouse") this.releaseMouse(e.pointerId);
+				if (this.routing.hasHover(e.pointerId)) {
+					const data = this.data(e);
+					if (data) this.routing.leave(data);
+					else this.release();
+				}
 				return;
 			}
 			this.flush();
-			this.routing.move(this.data(e));
+			const data = this.data(e);
+			if (!data) return this.release();
+			this.updateMouse(e);
+			this.routing.move(data);
 		}), options);
 		window.addEventListener("pointerup", (e) => this.guard(() => {
+			if (e.pointerType === "mouse") this.releaseMouse(e.pointerId);
 			if (this.routing.owns(e.pointerId)) {
 				e.preventDefault();
 				this.flush();
-				this.routing.up(this.data(e));
+				const data = this.data(e);
+				if (data) this.routing.up(data);
+				else this.release();
 			}
 		}), options);
-		window.addEventListener("pointercancel", (e) => this.guard(() => this.routing.cancel(e.pointerId, false)), options);
-		host.addEventListener("lostpointercapture", (e) => this.guard(() => this.routing.cancel(e.pointerId)), options);
-		host.addEventListener("pointerleave", (e) => this.guard(() => this.routing.leave(this.data(e))), options);
+		window.addEventListener("pointercancel", (e) => this.guard(() => {
+			this.releaseMouse(e.pointerId);
+			this.blockedMouse.delete(e.pointerId);
+			this.routing.cancel(e.pointerId, false);
+		}), options);
+		host.addEventListener("lostpointercapture", (e) => this.guard(() => {
+			this.releaseMouse(e.pointerId);
+			if (e.pointerType === "mouse" && e.buttons !== 0) this.blockedMouse.add(e.pointerId);
+			else this.blockedMouse.delete(e.pointerId);
+			this.routing.cancel(e.pointerId);
+		}), options);
+		host.addEventListener("pointerleave", (e) => this.guard(() => {
+			const data = this.data(e);
+			if (data) this.routing.leave(data);
+			else this.release();
+		}), options);
 		window.addEventListener("blur", (event) => {
 			if (event.target === window) this.release();
 		}, options);
 		host.addEventListener("focusout", (event) => this.guard(() => {
-			if (!(event.relatedTarget instanceof Node) || !host.contains(event.relatedTarget) || blocksGameKeyboard(event.relatedTarget)) this.routing.releaseVirtual();
+			if (!(event.relatedTarget instanceof Node) || !host.contains(event.relatedTarget) || blocksGameKeyboard(event.relatedTarget)) {
+				this.resetMouse();
+				this.routing.releaseVirtual();
+			}
 		}), options);
 		document.addEventListener("visibilitychange", () => {
 			if (document.hidden) this.release();
 		}, options);
+		for (const kind of ["auxclick", "contextmenu"]) host.addEventListener(kind, (event) => {
+			if (this.surface(event.target) && isMouseButton(event.button) && this.auxiliary.has(event.button) && input?.acceptsMouse(event.button)) {
+				event.preventDefault();
+				if (kind === "auxclick") this.auxiliary.delete(event.button);
+			}
+		}, options);
+	}
+	applyMouse() {
+		let buttons = 0;
+		for (const state of this.mouseStates.values()) buttons |= state;
+		for (const [button, mask] of mouseMasks) this.mouse?.set(button, (buttons & mask) !== 0);
+	}
+	releaseMouse(id) {
+		if (this.mouseStates.delete(id)) this.applyMouse();
+	}
+	updateMouse(event) {
+		if (event.pointerType !== "mouse" || !this.mouse) return;
+		if (event.buttons === 0) this.blockedMouse.delete(event.pointerId);
+		const world = this.routing.worldOwns(event.pointerId) && !this.blockedMouse.has(event.pointerId) && this.input?.liveInput;
+		if (world) this.mouseStates.set(event.pointerId, event.buttons);
+		else this.mouseStates.delete(event.pointerId);
+		if (isMouseButton(event.button)) {
+			if (world && this.input?.acceptsMouse(event.button)) this.auxiliary.add(event.button);
+			else this.auxiliary.delete(event.button);
+		}
+		this.applyMouse();
+	}
+	resetMouse() {
+		for (const id of this.mouseStates.keys()) this.blockedMouse.add(id);
+		this.mouseStates.clear();
+		this.auxiliary.clear();
+		this.mouse?.clear();
 	}
 	surface(target) {
 		return target === this.host || target instanceof HTMLCanvasElement && target.parentElement === this.host;
 	}
 	data(e) {
-		const { screen, world, view } = this.project(e);
+		const projected = this.project(e);
+		if (!projected) return void 0;
+		const { screen, world, view } = projected;
 		return Object.freeze({
 			pointerId: e.pointerId,
 			pointerType: e.pointerType,
@@ -620,10 +843,15 @@ var BrowserPointer = class {
 		}
 	}
 	release() {
+		this.resetMouse();
 		this.guard(() => this.routing.release());
 	}
 	dispose() {
 		this.abort.abort();
+		this.offInput?.();
+		this.resetMouse();
+		this.mouse?.dispose();
+		this.blockedMouse.clear();
 		this.guard(() => this.routing.dispose());
 	}
 };
@@ -1063,6 +1291,7 @@ var CanvasVisual = class {
 			},
 			wheel: (event) => {
 				const rect = this.host.getBoundingClientRect();
+				if (rect.width <= 0 || rect.height <= 0) return;
 				const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? this.host.clientHeight : 1;
 				if (this.routing.scroll((event.clientX - rect.x) * this.host.clientWidth / rect.width, (event.clientY - rect.y) * this.host.clientHeight / rect.height, event.deltaX * unit, event.deltaY * unit)) event.preventDefault();
 			}
@@ -1536,11 +1765,11 @@ var GeometryTilemapVisual = class {
 		g.clear().poly(this.map.geometry.vertices(x, y).flatMap((p) => [p.x, p.y]), true).fill(color);
 		this.stats.updatedTiles++;
 	}
-	render(view) {
+	render(view, enabled = true) {
 		if (this.disposed) return;
 		const m = this.map;
 		this.display.position.set(m.x, m.y);
-		this.display.visible = m.visible && m.enabled;
+		this.display.visible = enabled && m.visible && m.enabled;
 		if (!this.display.visible) {
 			this.invalid = true;
 			this.bulk = true;
@@ -1775,7 +2004,7 @@ var TilemapVisual = class {
 	invalid = true;
 	off;
 	offDispose;
-	constructor(map, scene, acquire, changed, onError, released) {
+	constructor(map, isCurrent, acquire, changed, onError, released) {
 		this.map = map;
 		this.changed = changed;
 		this.onError = onError;
@@ -1793,7 +2022,7 @@ var TilemapVisual = class {
 		const controller = this.controller;
 		if (!controller) throw Error("Missing tilemap request controller");
 		acquire(map.sheet.url, controller.signal).then((lease) => {
-			if (this.disposed || map.disposed || map.scene !== scene) {
+			if (this.disposed || map.disposed || !isCurrent()) {
 				lease.release();
 				return;
 			}
@@ -1855,12 +2084,12 @@ var TilemapVisual = class {
 		sprite.height = this.map.tileHeight;
 		this.stats.updatedTiles++;
 	}
-	render(view) {
+	render(view, enabled = true) {
 		if (this.disposed) return;
 		this.sync();
 		const m = this.map;
 		this.display.position.set(m.x, m.y);
-		this.display.visible = m.visible && m.enabled;
+		this.display.visible = enabled && m.visible && m.enabled;
 		if (!this.display.visible) {
 			this.invalid = true;
 			return;
@@ -2260,6 +2489,7 @@ var PixiRenderer = class {
 		root.mask = mask;
 		const visuals = /* @__PURE__ */ new Map();
 		const tilemaps = /* @__PURE__ */ new Map();
+		const geometryTilemaps = /* @__PURE__ */ new Map();
 		const drawOrder = [];
 		let depthDirty = true;
 		let revision = -1, disposed = false, clipX = NaN, clipY = NaN, clipWidth = NaN, clipHeight = NaN, removeSceneCleanup;
@@ -2459,20 +2689,30 @@ var PixiRenderer = class {
 				entry.dispose();
 				visuals.delete(actor);
 			}
-			for (const [actor, entry] of tilemaps) if (actor.disposed || actor.scene !== scene || !(entry instanceof TilemapVisual ? actor.get(TilemapLayer.type) : actor.get(GeometryTilemapLayer.type)) || entry.disposed) {
-				entry.dispose();
-				if (entry instanceof TilemapVisual) this.tilemaps.delete(entry);
-				else this.geometryTilemaps.delete(entry);
-				tilemaps.delete(actor);
+			for (const [actor, entry] of tilemaps) {
+				const layer = actor.get(TilemapLayer.type);
+				if (actor.disposed || actor.scene !== scene || !layer || layer.disposed || layer.map !== entry.map || entry.disposed) {
+					entry.dispose();
+					this.tilemaps.delete(entry);
+					tilemaps.delete(actor);
+				}
+			}
+			for (const [actor, entry] of geometryTilemaps) {
+				const layer = actor.get(GeometryTilemapLayer.type);
+				if (actor.disposed || actor.scene !== scene || !layer || layer.disposed || layer.map !== entry.map || entry.disposed) {
+					entry.dispose();
+					this.geometryTilemaps.delete(entry);
+					geometryTilemaps.delete(actor);
+				}
 			}
 			let order = 0;
 			for (const actor of scene.actors) {
 				const layer = actor.get(TilemapLayer.type);
-				if (layer) {
+				if (layer && !layer.disposed && !layer.map.disposed) {
 					let tile = tilemaps.get(actor);
 					if (!tile) {
-						tile = new TilemapVisual(layer.map, scene, (url, signal) => this.acquireImage(url, signal), changed, this.onError, () => {
-							if (tile instanceof TilemapVisual) this.tilemaps.delete(tile);
+						tile = new TilemapVisual(layer.map, () => actor.scene === scene && actor.get(TilemapLayer.type)?.map === layer.map, (url, signal) => this.acquireImage(url, signal), changed, this.onError, () => {
+							if (tile) this.tilemaps.delete(tile);
 							depthDirty = true;
 						});
 						world.addChild(tile.display);
@@ -2482,8 +2722,8 @@ var PixiRenderer = class {
 					tile.order = order;
 				}
 				const geometryLayer = actor.get(GeometryTilemapLayer.type);
-				if (geometryLayer) {
-					let tile = tilemaps.get(actor);
+				if (geometryLayer && !geometryLayer.disposed && !geometryLayer.map.disposed) {
+					let tile = geometryTilemaps.get(actor);
 					if (!tile) {
 						const created = new GeometryTilemapVisual(geometryLayer.map, () => {
 							this.geometryTilemaps.delete(created);
@@ -2491,7 +2731,7 @@ var PixiRenderer = class {
 						});
 						tile = created;
 						world.addChild(tile.display);
-						tilemaps.set(actor, tile);
+						geometryTilemaps.set(actor, tile);
 						this.geometryTilemaps.add(created);
 					}
 					tile.order = order;
@@ -2511,7 +2751,7 @@ var PixiRenderer = class {
 		const sync = () => {
 			reconcile();
 			for (const entry of visuals.values()) update(entry);
-			for (const entry of tilemaps.values()) if (entry instanceof TilemapVisual) entry.sync();
+			for (const entry of tilemaps.values()) entry.sync();
 		};
 		const prepared = {
 			ready: async () => {
@@ -2524,7 +2764,6 @@ var PixiRenderer = class {
 						if (entry.controller) pending = true;
 					}
 					for (const entry of tilemaps.values()) {
-						if (!(entry instanceof TilemapVisual)) continue;
 						if (entry.error) throw entry.error;
 						if (entry.controller) pending = true;
 					}
@@ -2566,8 +2805,15 @@ var PixiRenderer = class {
 						entry.display.scale.set(scaleX, scaleY);
 					}
 				}
-				for (const entry of tilemaps.values()) {
-					entry.render(view);
+				for (const [actor, entry] of tilemaps) {
+					entry.render(view, actor.enabled && actor.get(TilemapLayer.type)?.enabled === true);
+					if (entry.depth !== entry.map.zIndex) {
+						entry.depth = entry.map.zIndex;
+						depthDirty = true;
+					}
+				}
+				for (const [actor, entry] of geometryTilemaps) {
+					entry.render(view, actor.enabled && actor.get(GeometryTilemapLayer.type)?.enabled === true);
 					if (entry.depth !== entry.map.zIndex) {
 						entry.depth = entry.map.zIndex;
 						depthDirty = true;
@@ -2585,6 +2831,11 @@ var PixiRenderer = class {
 						order: entry.order,
 						zIndex: entry.map.zIndex
 					});
+					for (const entry of geometryTilemaps.values()) drawOrder.push({
+						display: entry.display,
+						order: entry.order,
+						zIndex: entry.map.zIndex
+					});
 					drawOrder.sort((a, b) => a.zIndex - b.zIndex || a.order - b.order);
 					for (let i = 0; i < drawOrder.length; i++) {
 						const entry = drawOrder[i];
@@ -2609,10 +2860,14 @@ var PixiRenderer = class {
 					() => {
 						for (const entry of tilemaps.values()) {
 							entry.dispose();
-							if (entry instanceof TilemapVisual) this.tilemaps.delete(entry);
-							else this.geometryTilemaps.delete(entry);
+							this.tilemaps.delete(entry);
 						}
 						tilemaps.clear();
+						for (const entry of geometryTilemaps.values()) {
+							entry.dispose();
+							this.geometryTilemaps.delete(entry);
+						}
+						geometryTilemaps.clear();
 					},
 					() => root.destroy({
 						children: true,
@@ -2912,6 +3167,11 @@ var Game = class {
 	gamepads;
 	renderer;
 	keyboard;
+	captures;
+	captureInput(options = {}) {
+		this.assertAlive();
+		return this.captures.start(options);
+	}
 	pointers;
 	pointerChannels = /* @__PURE__ */ new WeakMap();
 	virtualInputs = /* @__PURE__ */ new WeakMap();
@@ -2985,7 +3245,7 @@ var Game = class {
 	height = 450;
 	ratio = 1;
 	scenes = /* @__PURE__ */ new Map();
-	pendingScenes = /* @__PURE__ */ new Map();
+	pendingScene;
 	defaultUI = [];
 	ui;
 	prepared;
@@ -3054,18 +3314,22 @@ var Game = class {
 			request: (callback) => requestAnimationFrame(callback),
 			cancel: (handle) => cancelAnimationFrame(handle)
 		};
+		this.captures = new InputCaptureManager(this.element, this.engine.input, () => this.engine.scene, () => this.pointers.release(), this.report);
 		this.keyboard = new BrowserInput(this.element, this.engine.input);
-		this.gamepads = new GamepadInput(this.engine.input, { active: () => !document.hidden && document.hasFocus() && this.element.contains(document.activeElement) && !blocksGameKeyboard(document.activeElement) });
+		this.gamepads = new GamepadInput(this.engine.input, {
+			observe: (pads) => this.captures.sample(pads),
+			active: () => !document.hidden && document.hasFocus() && this.element.contains(document.activeElement) && !blocksGameKeyboard(document.activeElement)
+		});
 		this.pointers = new BrowserPointer(this.element, (event) => {
 			const rect = this.element.getBoundingClientRect();
-			if (rect.width <= 0 || rect.height <= 0) throw new EngineError("VIEWPORT_UNAVAILABLE", "Game has no visible bounds");
+			if (rect.width <= 0 || rect.height <= 0) return;
 			const screen = screenPoint((event.clientX - rect.left) * this.width / rect.width, (event.clientY - rect.top) * this.height / rect.height);
 			return {
 				screen,
 				world: this.screenToWorld(screen),
 				view: this.view
 			};
-		}, this.report, () => this.updateProjection());
+		}, this.report, () => this.updateProjection(), this.engine.input);
 		document.addEventListener("visibilitychange", () => {
 			this.previousTime = void 0;
 			this.fixed?.reset();
@@ -3164,12 +3428,17 @@ var Game = class {
 	}
 	scene(id, setup) {
 		this.assertAlive();
+		if (typeof id !== "string" || !id.length) throw new EngineError("INVALID_VALUE", "Scene id must not be empty");
+		if (typeof setup !== "function") throw new EngineError("INVALID_VALUE", "Scene setup must be a function");
 		if (this.scenes.has(id)) throw new EngineError("DUPLICATE_SCENE", "Scene id is already registered", { sceneId: id });
 		this.scenes.set(id, setup);
 		return this;
 	}
 	wait(promise) {
-		if (this.dead) return Promise.reject(new EngineError("GAME_DISPOSED", "Game has been disposed"));
+		if (this.dead) {
+			promise.catch(() => {});
+			return Promise.reject(new EngineError("GAME_DISPOSED", "Game has been disposed"));
+		}
 		const signal = this.shutdown.signal;
 		return new Promise((resolve, reject) => {
 			const abort = () => {
@@ -3205,7 +3474,7 @@ var Game = class {
 		})();
 		return this.startPromise;
 	}
-	goTo(id) {
+	changeScene(id) {
 		if (this.dead) return Promise.reject(new EngineError("GAME_DISPOSED", "Game has been disposed"));
 		if (!this.ready) return Promise.reject(new EngineError("GAME_NOT_READY", "Await run before navigating"));
 		return this.navigate(id);
@@ -3213,8 +3482,7 @@ var Game = class {
 	navigate(id) {
 		const setup = this.scenes.get(id);
 		if (!setup) return Promise.reject(new EngineError("SCENE_NOT_FOUND", "Unknown scene", { sceneId: id }));
-		const existing = this.pendingScenes.get(id);
-		if (existing) return existing;
+		if (this.pendingScene?.id === id) return this.pendingScene.task;
 		const task = this.queue.then(async () => {
 			this.assertAlive();
 			const scene = new Scene(id), nodes = [], controller = new AbortController();
@@ -3256,7 +3524,9 @@ var Game = class {
 					onDispose: (callback) => scene.onDispose(callback)
 				})));
 				this.assertAlive();
-				await this.present(scene, nodes, canvas);
+				await this.present(scene, nodes, canvas, () => {
+					if (this.pendingScene?.task === task) this.pendingScene = void 0;
+				});
 			} catch (error) {
 				try {
 					scene.dispose();
@@ -3268,13 +3538,16 @@ var Game = class {
 				if (this.staging === scene) this.staging = void 0;
 			}
 		}).finally(() => {
-			if (this.pendingScenes.get(id) === task) this.pendingScenes.delete(id);
+			if (this.pendingScene?.task === task) this.pendingScene = void 0;
 		});
-		this.pendingScenes.set(id, task);
+		this.pendingScene = {
+			id,
+			task
+		};
 		this.queue = task.catch(() => {});
 		return task;
 	}
-	async present(scene, nodes, canvas) {
+	async present(scene, nodes, canvas, beforeActivate) {
 		let prepared, ui, committed = false;
 		let canvasPresentation;
 		let virtualPresentation;
@@ -3300,6 +3573,7 @@ var Game = class {
 			}
 			virtualPresentation = this.prepareVirtual(scene);
 			scene.markReady();
+			beforeActivate?.();
 			this.errorBox.hidden = true;
 			try {
 				if (this.playback && this.playbackScene !== scene) this.stopReplay();
@@ -3315,18 +3589,21 @@ var Game = class {
 			this.canvas = canvas;
 			this.canvasPresentation = canvasPresentation;
 			this.virtualPresentation = virtualPresentation;
-			this.pointers.routing.setScene(this.channelFor(scene), canvas);
 			committed = true;
-			this.element.append(ui.element);
-			for (const cleanup of [
-				() => oldPrepared?.dispose(),
-				() => oldUI?.dispose(),
-				() => oldCanvas?.dispose(),
-				() => oldVirtual?.dispose()
-			]) try {
-				cleanup();
-			} catch (error) {
-				this.report(error);
+			try {
+				this.pointers.routing.setScene(this.channelFor(scene), canvas);
+				this.element.append(ui.element);
+			} finally {
+				for (const cleanup of [
+					() => oldPrepared?.dispose(),
+					() => oldUI?.dispose(),
+					() => oldCanvas?.dispose(),
+					() => oldVirtual?.dispose()
+				]) try {
+					cleanup();
+				} catch (error) {
+					this.report(error);
+				}
 			}
 			this.assertAlive();
 			this.previousTime = void 0;
@@ -3544,6 +3821,7 @@ var Game = class {
 		for (const cleanup of [
 			() => this.stopReplay(),
 			() => this.staging?.dispose(),
+			() => this.captures.dispose(),
 			() => this.pointers.dispose(),
 			() => this.gamepads.dispose(),
 			() => this.keyboard.dispose(),
@@ -3570,7 +3848,7 @@ var Game = class {
 		this.defaultCanvas = void 0;
 		this.defaultUI.length = 0;
 		this.scenes.clear();
-		this.pendingScenes.clear();
+		this.pendingScene = void 0;
 	}
 };
 function validFontFamily(value) {