@simpludify/web 0.1.2 → 0.1.4

package/dist/index.js

@@ -1,6 +1,6 @@
 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 { Application, CanvasTextMetrics, Container, Graphics, Rectangle, Sprite, Text, TextStyle, Texture } from "pixi.js";
+import { ActionController, Aspect, Camera, CanvasButton as CanvasButton$1, CanvasUI, Engine, EngineError, EventBus, FixedStepRunner, GeometryTilemapLayer, Lifetime, PointerRouting, Renderable, ReplayPlayer, Scene, ScenePointer, SceneState, Shape, TilemapLayer, Transform, 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
 /** Bridge owner cancellation to browser APIs such as fetch. */
@@ -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();
@@ -459,7 +868,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. */
@@ -527,6 +937,7 @@ var CanvasVisual = class {
 	dirty = true;
 	dead = false;
 	active = false;
+	cacheResolution;
 	mirroredFocus;
 	subscriptions = [];
 	syncs = 0;
@@ -581,6 +992,7 @@ var CanvasVisual = class {
 	get diagnostics() {
 		return {
 			nodes: this.entries.size,
+			visibleNodes: [...this.entries.values()].filter((e) => e.display.visible).length,
 			buttons: [...this.entries.values()].filter((e) => e.button).length,
 			syncs: this.syncs,
 			textMetrics: this.metrics.size
@@ -624,7 +1036,14 @@ var CanvasVisual = class {
 		cache.values.set(width, result);
 		return result;
 	};
+	clearCache() {
+		if (this.cacheResolution === void 0) return;
+		this.display.cacheAsTexture(false);
+		this.cacheResolution = void 0;
+	}
 	beforeResolutionChange() {
+		this.clearCache();
+		this.dirty = true;
 		for (const entry of this.entries.values()) if (entry.text && !entry.text.destroyed) this.resources.changedText(entry.text.styleKey);
 	}
 	focus(node) {
@@ -753,6 +1172,7 @@ var CanvasVisual = class {
 		const visited = /* @__PURE__ */ new Set(), buttons = [];
 		const paint = [];
 		let order = 0;
+		let scrollVisible = false;
 		let restoreNativeFocus;
 		this.ui.walk((node, parentClip) => {
 			const measuredText = node.kind === "panel" ? void 0 : this.measure(node, Math.max(0, node.bounds.width - node.style.padding * 2));
@@ -777,6 +1197,19 @@ var CanvasVisual = class {
 						entry.button = entry.native.element;
 					} else entry.button = this.button(node);
 					this.element.append(entry.button);
+				} else if (node.kind === "label") {
+					entry.label = document.createElement("span");
+					entry.label.className = "s-canvas-label";
+					const semantics = node.labelSemantics;
+					if (semantics?.role) {
+						entry.label.setAttribute("role", semantics.role);
+						if (semantics.role === "heading") entry.label.setAttribute("aria-level", String(semantics.level));
+						else {
+							entry.label.setAttribute("aria-live", semantics.role === "alert" ? "assertive" : "polite");
+							entry.label.setAttribute("aria-atomic", "true");
+						}
+					}
+					this.element.append(entry.label);
 				}
 				if (node.kind !== "panel") {
 					entry.text = new Text({ text: node.text });
@@ -802,7 +1235,14 @@ var CanvasVisual = class {
 				} : {}
 			});
 			if (entry.button) buttons.push(entry.button);
+			if (entry.label) {
+				buttons.push(entry.label);
+				if (entry.label.textContent !== node.text) entry.label.textContent = node.text;
+				entry.label.setAttribute("aria-hidden", String(canvasOpacity(node) === 0));
+			}
 			const b = node.bounds, s = node.style;
+			const scrollBox = intersectUI(b, clip);
+			if (node.style.scroll && scrollBox.width > 0 && scrollBox.height > 0 && canvasOpacity(node) > 0) scrollVisible = true;
 			let enabled = !node.busy;
 			for (let p = node; p; p = p.parent) enabled &&= p.enabled;
 			const signature = JSON.stringify([
@@ -823,9 +1263,12 @@ var CanvasVisual = class {
 			if (entry.signature === signature) return;
 			entry.signature = signature;
 			entry.display.position.set(b.x, b.y);
+			const paintBox = intersectUI(b, clip);
+			const visible = paintBox.width > 0 && paintBox.height > 0 && canvasOpacity(node) > 0;
+			entry.display.visible = visible;
 			const clipped = clip.x !== 0 || clip.y !== 0 || clip.width !== width / this.ui.scale || clip.height !== height / this.ui.scale;
 			entry.display.mask = clipped ? entry.mask : null;
-			entry.mask.renderable = clipped;
+			entry.mask.renderable = clipped && visible;
 			const maskSignature = JSON.stringify([
 				clipped,
 				clip.x,
@@ -927,7 +1370,8 @@ var CanvasVisual = class {
 			const display = entry.scrollbar;
 			if (!display) return;
 			this.display.setChildIndex(display, order++);
-			display.visible = bars.length > 0;
+			const viewport = intersectUI(node.bounds, clip);
+			display.visible = bars.length > 0 && viewport.width > 0 && viewport.height > 0 && canvasOpacity(node) > 0;
 			display.mask = entry.display.mask;
 			const signature = JSON.stringify([
 				node.style.color,
@@ -982,6 +1426,14 @@ var CanvasVisual = class {
 		const button = focused ? this.entries.get(focused)?.button : void 0;
 		if ((focused !== this.mirroredFocus || focused === restoreNativeFocus) && button && !button.disabled && document.activeElement !== button) button.focus({ preventScroll: true });
 		this.mirroredFocus = this.ui.focusedNode;
+		const ratio = this.resources.cacheResolution();
+		const cache = scrollVisible && ratio !== void 0 && Math.max(width, height) * ratio <= 4096 ? ratio * this.ui.scale : void 0;
+		if (cache !== this.cacheResolution) {
+			this.clearCache();
+			this.cacheResolution = cache;
+			if (cache !== void 0) this.display.cacheAsTexture({ resolution: cache });
+		}
+		if (cache !== void 0) this.display.updateCacheTexture();
 	}
 	releaseEntry(entry) {
 		const backgroundContext = entry.background.context?.uid, maskContext = entry.mask.context?.uid;
@@ -991,6 +1443,7 @@ var CanvasVisual = class {
 			() => entry.abort.abort(),
 			() => entry.native?.dispose(),
 			() => entry.button?.remove(),
+			() => entry.label?.remove(),
 			() => entry.background.destroy({ context: true }),
 			() => entry.scrollbar?.destroy({ context: true }),
 			() => entry.text?.destroy({ style: true }),
@@ -1015,6 +1468,7 @@ var CanvasVisual = class {
 		cleanupAll([
 			...this.subscriptions.splice(0),
 			...entries.map((e) => () => this.releaseEntry(e)),
+			() => this.clearCache(),
 			() => this.display.destroy({ children: true }),
 			() => this.element.remove()
 		], "Canvas visual cleanup failed");
@@ -1462,10 +1916,11 @@ var PixiRenderer = class {
 	pendingUITextKeys = /* @__PURE__ */ new Set();
 	canvasPresentations = /* @__PURE__ */ new Set();
 	get canvasDiagnostics() {
-		let nodes = 0, buttons = 0, syncs = 0, textMetrics = 0;
+		let nodes = 0, visibleNodes = 0, buttons = 0, syncs = 0, textMetrics = 0;
 		for (const p of this.canvasPresentations) {
 			const d = p.diagnostics;
 			nodes += d.nodes;
+			visibleNodes += d.visibleNodes;
 			buttons += d.buttons;
 			syncs += d.syncs;
 			textMetrics += d.textMetrics;
@@ -1473,6 +1928,7 @@ var PixiRenderer = class {
 		return {
 			presentations: this.canvasPresentations.size,
 			nodes,
+			visibleNodes,
 			buttons,
 			syncs,
 			textMetrics
@@ -1483,7 +1939,8 @@ var PixiRenderer = class {
 		const visual = new CanvasVisual(ui, this.host, routing, {
 			graphics: (graphics, context) => releaseUIGraphics(this.app.renderer, graphics, context),
 			text: (text, key) => releaseUIText(this.app.renderer, text, key),
-			changedText: (key) => this.pendingUITextKeys.add(key)
+			changedText: (key) => this.pendingUITextKeys.add(key),
+			cacheResolution: () => this.app.renderer.type === RendererType.WEBGL ? this.app.renderer.resolution : void 0
 		});
 		this.canvasPresentations.add(visual);
 		let disposed = false;
@@ -1637,7 +2094,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 }));
 		}
@@ -2295,6 +2760,7 @@ var Game = class {
 	engine;
 	element;
 	camera;
+	gamepads;
 	renderer;
 	keyboard;
 	pointers;
@@ -2378,8 +2844,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
@@ -2407,6 +2875,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");
@@ -2882,6 +3351,7 @@ var Game = class {
 			() => this.stopReplay(),
 			() => this.staging?.dispose(),
 			() => this.pointers.dispose(),
+			() => this.gamepads.dispose(),
 			() => this.keyboard.dispose(),
 			() => this.canvasPresentation?.dispose(),
 			() => this.canvas?.dispose(),
@@ -2907,6 +3377,10 @@ var Game = class {
 		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