@simpludify/web 0.1.3 → 0.1.5

package/dist/index.js

@@ -1,5 +1,5 @@
 import "./style.css";
-import { ActionController, Aspect, Camera, CanvasButton as CanvasButton$1, CanvasUI, Engine, EngineError, FixedStepRunner, GeometryTilemapLayer, PointerRouting, Renderable, ReplayPlayer, Scene, ScenePointer, SceneState, Shape, TilemapLayer, Transform, canvasControlText, canvasHoverHighlight, canvasOpacity, canvasScrollbars, canvasSliderGeometry, cleanupAll, containsScreenPoint, createViewTransform, 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, 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 { Application, CanvasTextMetrics, Container, Graphics, Rectangle, RendererType, Sprite, Text, TextStyle, Texture } from "pixi.js";
 export * from "@simpludify/core";
 // packages/web/src/canvas-node.ts
@@ -17,6 +17,415 @@ 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({
+	generic: Object.freeze([
+		"South",
+		"East",
+		"West",
+		"North"
+	]),
+	xbox: Object.freeze([
+		"A",
+		"B",
+		"X",
+		"Y"
+	]),
+	playstation: Object.freeze([
+		"×",
+		"○",
+		"□",
+		"△"
+	]),
+	nintendo: Object.freeze([
+		"B",
+		"A",
+		"Y",
+		"X"
+	])
+});
+function gamepadButtonLabel(button, options = {}) {
+	gamepadIndex(button);
+	const layout = options.layout ?? "generic";
+	if (!Object.hasOwn(faces, layout)) throw new EngineError("INVALID_GAMEPAD_BINDING", "Unknown gamepad display layout");
+	if (options.overrides && Object.hasOwn(options.overrides, button)) {
+		const label = options.overrides[button];
+		if (typeof label !== "string") throw new EngineError("INVALID_GAMEPAD_BINDING", "Button label must be a string");
+		return label;
+	}
+	return faces[layout][button] ?? positions[button] ?? `Button ${button}`;
+}
+function inferredGamepadLayout(id) {
+	if (/dualsense|dualshock|playstation|054c/i.test(id)) return "playstation";
+	if (/nintendo|switch|057e/i.test(id)) return "nintendo";
+	if (/xbox|xinput|045e/i.test(id)) return "xbox";
+	return "generic";
+}
+// packages/web/src/gamepads.ts
+var finite = (v, min, max) => typeof v === "number" && Number.isFinite(v) ? Math.max(min, Math.min(max, v)) : 0;
+var buttonValue = (pad, index) => finite(pad.buttons[index]?.value, 0, 1);
+function scalar(pad, binding, deadZone) {
+	const group = (indices) => (indices ?? []).reduce((maximum, index) => Math.max(maximum, buttonValue(pad, index)), 0);
+	const raw = finite((binding.axis === void 0 ? 0 : finite(pad.axes[binding.axis], -1, 1)) + group(binding.positive) - group(binding.negative), -1, 1) * (binding.invert ? -1 : 1);
+	const zone = binding.deadZone ?? deadZone;
+	return Math.abs(raw) <= zone ? 0 : Math.sign(raw) * (Math.abs(raw) - zone) / (1 - zone);
+}
+function values(pad, bindings, zone) {
+	return bindings.map(([action, binding]) => {
+		if (action.kind === "button") return [action, binding.buttons?.some((b) => buttonValue(pad, typeof b === "number" ? b : b.button) >= (typeof b === "number" ? .5 : b.threshold ?? .5)) ?? false];
+		if (action.kind === "axis1d") return [action, scalar(pad, binding, zone)];
+		const b = binding, x = scalar(pad, b.x ?? {}, zone), y = scalar(pad, b.y ?? {}, zone);
+		return [action, action.kind === "axis2d" ? {
+			x,
+			y
+		} : {
+			x,
+			y,
+			z: scalar(pad, b.z ?? {}, zone)
+		}];
+	});
+}
+function neutral(value) {
+	return typeof value === "boolean" ? !value : typeof value === "number" ? value === 0 : value.x === 0 && value.y === 0 && (value.z ?? 0) === 0;
+}
+/** A controller-owned device contribution. Reassignment does not replace its readers/Actors. */
+var GamepadSource = class {
+	input;
+	controller;
+	life = new Lifetime();
+	source;
+	bindings;
+	assigned;
+	armed = false;
+	signature;
+	zone;
+	mapping;
+	constructor(input, controller, options) {
+		this.input = input;
+		this.controller = controller;
+		input.assertController(controller);
+		this.assigned = gamepadIndex(options.index);
+		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.source = controller.createSource();
+		this.life.onDispose(() => this.source.dispose());
+		this.life.onDispose(controller.onDispose(() => this.dispose()));
+	}
+	get disposed() {
+		return this.life.disposed;
+	}
+	get enabled() {
+		return this.source.enabled;
+	}
+	set enabled(value) {
+		this.alive();
+		if (value === this.source.enabled) return;
+		this.source.enabled = value;
+		this.clear();
+	}
+	get index() {
+		return this.assigned;
+	}
+	get info() {
+		return this.input.devices.find((d) => d.index === this.assigned);
+	}
+	get connected() {
+		return this.info?.connected ?? false;
+	}
+	get usable() {
+		return this.connected && (this.mapping === "raw" || this.info?.standardMapping === true);
+	}
+	assign(index) {
+		this.alive();
+		const checked = gamepadIndex(index);
+		if (checked === this.assigned) return;
+		this.clear();
+		this.signature = void 0;
+		this.assigned = checked;
+	}
+	rebind(bindings) {
+		this.alive();
+		const checked = checkedGamepadBindings(this.controller.actions, bindings);
+		this.clear();
+		this.bindings = checked;
+	}
+	clear() {
+		this.source.clear();
+		this.armed = false;
+	}
+	alive() {
+		if (this.disposed) throw new EngineError("OWNER_DISPOSED", "Gamepad source has been disposed");
+	}
+	/** @internal */ sample(pad, allowed) {
+		if (this.disposed) return;
+		if (!allowed || !this.enabled || !this.controller.active || !pad || this.mapping === "standard" && pad.mapping !== "standard") {
+			this.clear();
+			this.signature = void 0;
+			return;
+		}
+		const signature = JSON.stringify([
+			pad.id,
+			pad.mapping,
+			pad.buttons.length,
+			pad.axes.length
+		]);
+		if (signature !== this.signature) {
+			this.clear();
+			this.signature = signature;
+		}
+		const next = values(pad, this.bindings, this.zone);
+		if (!this.armed) {
+			if (next.every(([, value]) => neutral(value))) this.armed = true;
+			return;
+		}
+		for (const [action, value] of next) this.source.set(action, value);
+	}
+	/** @internal */ onDispose(callback) {
+		return this.life.onDispose(callback);
+	}
+	dispose() {
+		this.life.dispose();
+	}
+};
+var devicesChanged = defineEvent("GamepadsChanged");
+/** One Web host adapter; multiple sources share a single snapshot per Engine input boundary. */
+var GamepadInput = class {
+	input;
+	life = new Lifetime();
+	changes = new EventBus();
+	sources = /* @__PURE__ */ new Set();
+	disconnected = /* @__PURE__ */ new Set();
+	listed = Object.freeze([]);
+	readable = false;
+	poll;
+	active;
+	constructor(input, options = {}) {
+		this.input = input;
+		this.life.onDispose(() => this.changes.dispose());
+		this.poll = options.poll ?? (() => typeof navigator !== "undefined" && typeof navigator.getGamepads === "function" ? navigator.getGamepads() : (() => {
+			throw new Error("Gamepad API unavailable");
+		})());
+		this.active = options.active ?? (() => true);
+		this.life.onDispose(input.addAdapter(this));
+		const events = options.events ?? (typeof window === "undefined" ? void 0 : window), abort = new AbortController();
+		this.life.onDispose(() => abort.abort());
+		events?.addEventListener("gamepaddisconnected", (event) => {
+			const index = event.gamepad.index;
+			this.disconnected.add(index);
+			for (const source of this.sources) if (source.index === index) source.clear();
+			this.publish(this.listed.filter((d) => d.index !== index));
+		}, { signal: abort.signal });
+		events?.addEventListener("gamepadconnected", (event) => {
+			const index = event.gamepad.index;
+			this.disconnected.delete(index);
+			for (const source of this.sources) if (source.index === index) source.clear();
+		}, { signal: abort.signal });
+	}
+	get disposed() {
+		return this.life.disposed;
+	}
+	/** Whether the most recent polling attempt completed; an empty list may still need a user gesture. */
+	get available() {
+		return this.readable;
+	}
+	get devices() {
+		return this.listed;
+	}
+	onChange(handler, owner) {
+		return this.changes.on(devicesChanged, handler, owner);
+	}
+	publish(devices, force = false) {
+		const changed = JSON.stringify(this.listed) !== JSON.stringify(devices);
+		this.listed = Object.freeze(devices);
+		if (changed || force) this.changes.emit(devicesChanged, void 0);
+	}
+	/** @internal */ assertController(controller) {
+		if (!this.input.hasController(controller)) throw new EngineError("INVALID_ACTION", "Gamepad controller must belong to this InputSystem");
+	}
+	bind(controller, options) {
+		if (this.disposed) throw new EngineError("OWNER_DISPOSED", "Gamepad input has been disposed");
+		const source = new GamepadSource(this, controller, options);
+		const entry = source;
+		this.sources.add(entry);
+		const remove = this.life.onDispose(() => source.dispose());
+		source.onDispose(() => {
+			this.sources.delete(entry);
+			remove();
+		});
+		return source;
+	}
+	sample() {
+		if (this.disposed) return;
+		const wasReadable = this.readable;
+		let snapshots;
+		try {
+			snapshots = this.poll();
+			if (!Array.isArray(snapshots)) throw new Error("Invalid gamepad snapshot");
+			this.readable = true;
+		} catch {
+			snapshots = [];
+			this.readable = false;
+		}
+		const pads = /* @__PURE__ */ new Map();
+		for (const pad of snapshots) if (pad?.connected && typeof pad.id === "string" && typeof pad.mapping === "string" && Array.isArray(pad.axes) && Array.isArray(pad.buttons) && Number.isSafeInteger(pad.index) && pad.index >= 0) pads.set(pad.index, pad);
+		for (const index of this.disconnected) if (!pads.has(index)) this.disconnected.delete(index);
+		for (const index of this.disconnected) pads.delete(index);
+		const listed = Object.freeze([...pads.values()].sort((a, b) => a.index - b.index).map((p) => Object.freeze({
+			id: p.id,
+			index: p.index,
+			connected: p.connected,
+			mapping: p.mapping,
+			standardMapping: p.mapping === "standard",
+			buttonCount: p.buttons.length,
+			axisCount: p.axes.length,
+			inferredLayout: inferredGamepadLayout(p.id)
+		})));
+		const allowed = this.active();
+		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);
+	}
+	reset() {
+		for (const source of this.sources) source.clear();
+	}
+	dispose() {
+		this.life.dispose();
+		this.sources.clear();
+		this.listed = Object.freeze([]);
+	}
+};
 // packages/web/src/ui-keyboard.ts
 /** Host-only ownership metadata; native editing is never reconstructed from game keys. */
 var gameButtons = /* @__PURE__ */ new WeakSet();
@@ -180,6 +589,9 @@ var BrowserPointer = class {
 		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();
+		}), options);
 		document.addEventListener("visibilitychange", () => {
 			if (document.hidden) this.release();
 		}, options);
@@ -459,7 +871,8 @@ function nativeGeometry(el, node, ui, clip) {
 	el.disabled = !node.available || c.width <= 0 || c.height <= 0 || node.style.pointerEvents !== "auto";
 	const background = style.background ?? 2316622;
 	const color = `#${style.color.toString(16).padStart(6, "0")}`;
-	el.style.cssText = `left:${b.x * scale}px;top:${b.y * scale}px;width:${b.width * scale}px;height:${b.height * scale}px;padding:${style.padding * scale}px;font-family:${style.fontFamily};font-size:${style.fontSize * scale}px;--s-native-color:${color};--s-native-background:#${background.toString(16).padStart(6, "0")};color-scheme:${(background >> 16) * .2126 + (background >> 8 & 255) * .7152 + (background & 255) * .0722 > 128 ? "light" : "dark"};clip-path:inset(${Math.max(0, c.y - b.y) * scale}px ${Math.max(0, b.x + b.width - c.x - c.width) * scale}px ${Math.max(0, b.y + b.height - c.y - c.height) * scale}px ${Math.max(0, c.x - b.x) * scale}px);`;
+	el.style.cssText = `left:${b.x * scale}px;top:${b.y * scale}px;width:${b.width * scale}px;height:${b.height * scale}px;padding:${style.padding * scale}px;font-size:${style.fontSize * scale}px;--s-native-color:${color};--s-native-background:#${background.toString(16).padStart(6, "0")};color-scheme:${(background >> 16) * .2126 + (background >> 8 & 255) * .7152 + (background & 255) * .0722 > 128 ? "light" : "dark"};clip-path:inset(${Math.max(0, c.y - b.y) * scale}px ${Math.max(0, b.x + b.width - c.x - c.width) * scale}px ${Math.max(0, b.y + b.height - c.y - c.height) * scale}px ${Math.max(0, c.x - b.x) * scale}px);`;
+	el.style.fontFamily = style.fontFamily;
 	if (el.disabled && document.activeElement === el) el.blur();
 }
 /** Native editors must not cover later Canvas hit surfaces or overlay scrollbars. */
@@ -1497,6 +1910,108 @@ var TilemapVisual = class {
 		], "Tilemap presentation cleanup failed");
 	}
 };
+// packages/web/src/virtual-input-visual.ts
+/** Screen-space presentation only. The existing BrowserPointer is the sole event adapter. */
+var VirtualInputVisual = class {
+	input;
+	release;
+	display = new Container();
+	entries = /* @__PURE__ */ new Map();
+	dead = false;
+	off;
+	constructor(input, release) {
+		this.input = input;
+		this.release = release;
+		this.display.eventMode = "none";
+		this.display.sortableChildren = true;
+		this.display.zIndex = .5;
+		this.off = input.onDispose(() => this.dispose());
+	}
+	get diagnostics() {
+		return {
+			controls: this.entries.size,
+			visible: [...this.entries.values()].filter((e) => e.graphics.visible).length
+		};
+	}
+	update() {
+		if (this.dead) return;
+		const live = new Set(this.input.controls);
+		for (const [control, entry] of this.entries) if (!live.has(control)) {
+			this.entries.delete(control);
+			this.release(entry.graphics);
+		}
+		this.display.visible = this.input.visible;
+		for (const control of live) {
+			let entry = this.entries.get(control);
+			if (!entry) {
+				entry = {
+					graphics: new Graphics(),
+					signature: ""
+				};
+				entry.graphics.zIndex = control.kind === "button" ? 1 : 0;
+				this.entries.set(control, entry);
+				this.display.addChild(entry.graphics);
+			}
+			entry.graphics.visible = control.visible;
+			if (!control.visible || !this.input.visible) continue;
+			const center = control.center, knob = control.knob, radius = control.radius;
+			const signature = JSON.stringify([
+				center,
+				knob,
+				radius,
+				control.color,
+				control.enabled,
+				this.input.enabled,
+				control.pressed,
+				control.kind
+			]);
+			if (signature === entry.signature) continue;
+			entry.signature = signature;
+			const g = entry.graphics;
+			g.clear();
+			g.alpha = control.enabled && this.input.enabled ? 1 : .35;
+			g.circle(center.x, center.y, radius).fill({
+				color: control.color,
+				alpha: .12
+			}).stroke({
+				color: control.color,
+				alpha: .75,
+				width: 2
+			});
+			if (control.kind === "stick") {
+				g.moveTo(center.x, center.y).lineTo(knob.x, knob.y).stroke({
+					color: control.color,
+					alpha: .5,
+					width: 3
+				});
+				g.circle(knob.x, knob.y, radius * .36).fill({
+					color: control.color,
+					alpha: control.pressed ? .85 : .45
+				});
+			} else {
+				if (control.pressed) g.circle(center.x, center.y, radius * .7).fill({
+					color: control.color,
+					alpha: .65
+				});
+				if (control.directional && control.pressed) g.moveTo(center.x, center.y).lineTo(knob.x, knob.y).stroke({
+					color: control.color,
+					width: 4
+				});
+			}
+		}
+	}
+	dispose() {
+		if (this.dead) return;
+		this.dead = true;
+		const entries = [...this.entries.values()];
+		this.entries.clear();
+		cleanupAll([
+			this.off,
+			...entries.map((e) => () => this.release(e.graphics)),
+			() => this.display.destroy({ children: true })
+		], "Virtual input presentation cleanup failed");
+	}
+};
 // packages/web/src/renderer.ts
 var PixiRenderer = class {
 	host;
@@ -1505,6 +2020,46 @@ var PixiRenderer = class {
 	app = new Application();
 	pendingUITextKeys = /* @__PURE__ */ new Set();
 	canvasPresentations = /* @__PURE__ */ new Set();
+	virtualPresentations = /* @__PURE__ */ new Set();
+	get virtualInputDiagnostics() {
+		let controls = 0, visible = 0;
+		for (const visual of this.virtualPresentations) {
+			controls += visual.diagnostics.controls;
+			visible += visual.diagnostics.visible;
+		}
+		return {
+			presentations: this.virtualPresentations.size,
+			controls,
+			visible
+		};
+	}
+	prepareVirtualInput(input) {
+		if (!this.ready || this.dead) throw new EngineError("RENDERER_NOT_READY", "Renderer is not available");
+		const visual = new VirtualInputVisual(input, (graphics) => {
+			const context = graphics.context.uid;
+			graphics.destroy({ context: true });
+			releaseUIGraphics(this.app.renderer, graphics, context);
+		});
+		this.virtualPresentations.add(visual);
+		const off = input.onDispose(() => {
+			this.virtualPresentations.delete(visual);
+		});
+		let disposed = false;
+		return {
+			update: () => {
+				if (disposed || input.disposed) return;
+				if (!visual.display.parent) this.app.stage.addChild(visual.display);
+				visual.update();
+			},
+			dispose: () => {
+				if (disposed) return;
+				disposed = true;
+				off();
+				this.virtualPresentations.delete(visual);
+				visual.dispose();
+			}
+		};
+	}
 	get canvasDiagnostics() {
 		let nodes = 0, visibleNodes = 0, buttons = 0, syncs = 0, textMetrics = 0;
 		for (const p of this.canvasPresentations) {
@@ -1684,7 +2239,15 @@ var PixiRenderer = class {
 	}
 	acquireImage(url, signal) {
 		try {
-			return this.images.acquire(new URL(url, document.baseURI).href, signal);
+			const parsed = new URL(url, document.baseURI);
+			if (![
+				"http:",
+				"https:",
+				"data:",
+				"blob:",
+				"file:"
+			].includes(parsed.protocol)) throw new Error("Unsupported image URL protocol");
+			return this.images.acquire(parsed.href, signal);
 		} catch {
 			return Promise.reject(new EngineError("ASSET_LOAD_FAILED", "Invalid image URL", { path: url }));
 		}
@@ -2090,6 +2653,10 @@ var PixiRenderer = class {
 		this.scenes.clear();
 		cleanupAll([
 			...scenes.map((scene) => scene.dispose),
+			...[...this.virtualPresentations].map((p) => () => {
+				this.virtualPresentations.delete(p);
+				p.dispose();
+			}),
 			...[...this.canvasPresentations].map((p) => () => {
 				this.canvasPresentations.delete(p);
 				p.dispose();
@@ -2342,10 +2909,42 @@ var Game = class {
 	engine;
 	element;
 	camera;
+	gamepads;
 	renderer;
 	keyboard;
 	pointers;
 	pointerChannels = /* @__PURE__ */ new WeakMap();
+	virtualInputs = /* @__PURE__ */ new WeakMap();
+	virtualPresentation;
+	get virtualInput() {
+		this.assertAlive();
+		return this.virtualFor(this.engine.scene);
+	}
+	virtualFor(scene) {
+		let input = this.virtualInputs.get(scene);
+		if (!input) {
+			input = new VirtualInput(this.channelFor(scene), this.engine.input);
+			this.virtualInputs.set(scene, input);
+			const owned = input;
+			input.onDispose(() => {
+				if (this.virtualInputs.get(scene) === owned) this.virtualInputs.delete(scene);
+				if (this.engine.scene === scene) {
+					this.virtualPresentation?.dispose();
+					this.virtualPresentation = void 0;
+				}
+			});
+		}
+		return input;
+	}
+	prepareVirtual(scene) {
+		const input = this.virtualInputs.get(scene);
+		if (!input || input.controls.length === 0) return;
+		const renderer = this.renderer;
+		if (!renderer.prepareVirtualInput) throw new EngineError("RENDERER_CAPABILITY", "Renderer does not support virtual input presentation");
+		const presentation = renderer.prepareVirtualInput(input);
+		input.onDispose(() => presentation.dispose());
+		return presentation;
+	}
 	canvas;
 	canvasPresentation;
 	defaultCanvas;
@@ -2425,8 +3024,10 @@ var Game = class {
 			camera: this.camera
 		});
 		if (options.pixelRatio !== void 0) positive(options.pixelRatio, "pixelRatio");
-		const theme = Themes[options.theme ?? Theme.Dark];
-		if (!theme) throw new EngineError("INVALID_THEME", "Unknown theme");
+		const themeName = options.theme ?? Theme.Dark;
+		if (!Object.hasOwn(Themes, themeName)) throw new EngineError("INVALID_THEME", "Unknown theme");
+		const theme = Themes[themeName];
+		for (const [name, value] of Object.entries(options.tokens ?? {})) if (!Object.hasOwn(theme, name) || typeof value !== "string" || (name === "font" ? !validFontFamily(value) : !value.trim().length || /[;{}<>\r\n\0]|url\s*\(/i.test(value) || !CSS.supports("color", value))) throw new EngineError("INVALID_THEME_TOKEN", `Invalid token: ${name}`);
 		const tokens = {
 			...theme,
 			...options.tokens
@@ -2454,6 +3055,7 @@ var Game = class {
 			cancel: (handle) => cancelAnimationFrame(handle)
 		};
 		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.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");
@@ -2463,7 +3065,7 @@ var Game = class {
 				world: this.screenToWorld(screen),
 				view: this.view
 			};
-		}, this.report, () => this.canvasPresentation?.update(this.width, this.height));
+		}, this.report, () => this.updateProjection());
 		document.addEventListener("visibilitychange", () => {
 			this.previousTime = void 0;
 			this.fixed?.reset();
@@ -2618,6 +3220,7 @@ var Game = class {
 			const scene = new Scene(id), nodes = [], controller = new AbortController();
 			let canvas;
 			const pointer = this.channelFor(scene);
+			const virtualFor = () => this.virtualFor(scene);
 			this.staging = scene;
 			scene.onDispose(() => controller.abort());
 			try {
@@ -2633,6 +3236,9 @@ var Game = class {
 					add: (actor) => scene.add(actor),
 					ui: (...items) => nodes.push(...items),
 					pointer,
+					get virtualInput() {
+						return virtualFor();
+					},
 					canvasUI: (root, options) => {
 						if (canvas) throw new EngineError("UI_OWNERSHIP", "A Scene has one Canvas UI root");
 						canvas = new CanvasUI(scene, root, options);
@@ -2671,6 +3277,7 @@ var Game = class {
 	async present(scene, nodes, canvas) {
 		let prepared, ui, committed = false;
 		let canvasPresentation;
+		let virtualPresentation;
 		try {
 			const preparing = this.renderer.prepare(scene);
 			preparing.then((value) => {
@@ -2691,6 +3298,7 @@ var Game = class {
 				canvasPresentation = renderer.prepareCanvasUI(canvas, this.pointers.routing);
 				scene.onDispose(() => canvasPresentation?.dispose());
 			}
+			virtualPresentation = this.prepareVirtual(scene);
 			scene.markReady();
 			this.errorBox.hidden = true;
 			try {
@@ -2701,18 +3309,20 @@ var Game = class {
 				this.report(error);
 			}
 			this.assertAlive();
-			const oldPrepared = this.prepared, oldUI = this.ui, oldCanvas = this.canvasPresentation;
+			const oldPrepared = this.prepared, oldUI = this.ui, oldCanvas = this.canvasPresentation, oldVirtual = this.virtualPresentation;
 			this.prepared = prepared;
 			this.ui = ui;
 			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()
+				() => oldCanvas?.dispose(),
+				() => oldVirtual?.dispose()
 			]) try {
 				cleanup();
 			} catch (error) {
@@ -2728,7 +3338,8 @@ var Game = class {
 			if (!committed) for (const cleanup of [
 				() => prepared?.dispose(),
 				() => ui?.dispose(),
-				() => canvasPresentation?.dispose()
+				() => canvasPresentation?.dispose(),
+				() => virtualPresentation?.dispose()
 			]) try {
 				cleanup();
 			} catch (cleanupError) {
@@ -2840,6 +3451,7 @@ var Game = class {
 			width: this.width,
 			height: this.height
 		};
+		this.virtualInputs.get(this.engine.scene)?.refresh(viewport);
 		const previous = this.projection.viewport;
 		const c = this.camera;
 		if (!this.projectionDirty && previous.x === viewport.x && previous.y === viewport.y && previous.width === viewport.width && previous.height === viewport.height && this.cameraX === c.x && this.cameraY === c.y && this.cameraZoom === c.zoom) return;
@@ -2884,6 +3496,8 @@ var Game = class {
 	}
 	render() {
 		this.updateProjection();
+		this.virtualPresentation ??= this.prepareVirtual(this.engine.scene);
+		this.virtualPresentation?.update();
 		this.prepared?.render(this.projection);
 	}
 	tick = (time) => {
@@ -2897,12 +3511,14 @@ var Game = class {
 			} else {
 				const elapsed = this.previousTime === void 0 ? 0 : Math.max(0, (time - this.previousTime) / 1e3);
 				this.previousTime = time;
+				if (this.virtualInputs.has(this.engine.scene)) this.updateProjection();
 				if (this.playback) this.playback.advance(elapsed, this.options.fixedStep?.maxSteps ?? 8);
 				else if (this.fixed) this.fixed.advance(elapsed);
 				else this.engine.step(Math.min(this.maxDelta, elapsed));
 				if (!this.dead && !this.engine.scene.disposed) this.engine.scene.advancePresentation(Math.min(this.maxDelta, elapsed));
 				if (this.engine.paused) this.canvas?.stopMotion();
 				else this.canvas?.advance(elapsed);
+				this.virtualInputs.get(this.engine.scene)?.advance(Math.min(this.maxDelta, elapsed));
 				if (this.ratio !== (this.options.pixelRatio ?? Math.min(window.devicePixelRatio || 1, 2))) this.resize();
 				this.render();
 			}
@@ -2929,8 +3545,10 @@ var Game = class {
 			() => this.stopReplay(),
 			() => this.staging?.dispose(),
 			() => this.pointers.dispose(),
+			() => this.gamepads.dispose(),
 			() => this.keyboard.dispose(),
 			() => this.canvasPresentation?.dispose(),
+			() => this.virtualPresentation?.dispose(),
 			() => this.canvas?.dispose(),
 			() => this.observer.disconnect(),
 			() => this.ui?.dispose(),
@@ -2948,12 +3566,17 @@ var Game = class {
 		this.staging = void 0;
 		this.canvas = void 0;
 		this.canvasPresentation = void 0;
+		this.virtualPresentation = void 0;
 		this.defaultCanvas = void 0;
 		this.defaultUI.length = 0;
 		this.scenes.clear();
 		this.pendingScenes.clear();
 	}
 };
-export { BrowserInput, Button, CanvasButton, Game, HoldButton, Label, Layout, Panel, PixiRenderer, Placement, Theme, Themes, browserAbortSignal, mountUI };
+function validFontFamily(value) {
+	const syntax = value.replace(/"(?:\\[^\r\n]|[^"\\])*"|'(?:\\[^\r\n]|[^'\\])*'/g, "family").replace(/\\(?:[0-9a-f]{1,6}[ \t]?|[^\r\n])/gi, "x");
+	return value.trim().length > 0 && !/[\r\n\0]/.test(value) && !/[;{}<>\\"']|url\s*\(/i.test(syntax);
+}
+export { BrowserInput, Button, CanvasButton, Game, GamepadAxis, GamepadBindings, GamepadButton, GamepadInput, GamepadSource, HoldButton, Label, Layout, Panel, PixiRenderer, Placement, Theme, Themes, browserAbortSignal, gamepadButtonLabel, mountUI };
 
 //# sourceMappingURL=index.js.map