@diffenderfer-games/hub 0.0.0-stage → 2.0.0-next.1

package/dist/shared/input.js

@@ -0,0 +1,2718 @@
+import { a as isObject, i as hasMethods, n as claimSingleton, o as readField, r as _defineProperty, t as LEGACY_GLOBAL_NAMES } from "./globals.js";
+import { t as HUB_CLIENT_VERSION } from "./client-version.gen.js";
+import { a as requireElement, i as placeAt, n as findElements, r as pageBody, t as escapeHtml } from "./dom.js";
+//#region src/input/gamepad.ts
+/**
+* Reading standard gamepads: button indices, the stick deadzone and the
+* directions a pad is pointing.
+*/
+/** Standard-gamepad button indices. */
+const PAD_BUTTON = {
+	A: 0,
+	B: 1,
+	X: 2,
+	Y: 3,
+	LB: 4,
+	RB: 5,
+	LT: 6,
+	RT: 7,
+	SELECT: 8,
+	START: 9,
+	UP: 12,
+	DOWN: 13,
+	LEFT: 14,
+	RIGHT: 15
+};
+/** Stick deflection below this is ignored. */
+const AXIS_DEADZONE = .35;
+/** The connected gamepads (the browser's list has holes). */
+function readGamepads() {
+	if (typeof navigator === "undefined" || typeof navigator.getGamepads !== "function") return [];
+	return navigator.getGamepads().filter((pad) => pad !== null);
+}
+/** Whether `pad` holds button `index`. */
+function isPadButtonPressed(pad, index) {
+	return pad.buttons[index]?.pressed === true;
+}
+/** Whether any pad holds button `index`. */
+function isAnyPadButtonPressed(pads, index) {
+	return pads.some((pad) => isPadButtonPressed(pad, index));
+}
+/** The directions one pad points (left stick past `deadzone`, or the d-pad). */
+function padDirections(pad, deadzone) {
+	const horizontal = pad.axes[0] ?? 0;
+	const vertical = pad.axes[1] ?? 0;
+	return {
+		up: vertical < -deadzone || isPadButtonPressed(pad, PAD_BUTTON.UP),
+		down: vertical > deadzone || isPadButtonPressed(pad, PAD_BUTTON.DOWN),
+		left: horizontal < -deadzone || isPadButtonPressed(pad, PAD_BUTTON.LEFT),
+		right: horizontal > deadzone || isPadButtonPressed(pad, PAD_BUTTON.RIGHT)
+	};
+}
+/** The directions any pad points. */
+function anyPadDirections(pads, deadzone) {
+	const held = {
+		up: false,
+		down: false,
+		left: false,
+		right: false
+	};
+	for (const pad of pads) {
+		const directions = padDirections(pad, deadzone);
+		held.up || (held.up = directions.up);
+		held.down || (held.down = directions.down);
+		held.left || (held.left = directions.left);
+		held.right || (held.right = directions.right);
+	}
+	return held;
+}
+//#endregion
+//#region src/input/device-state.ts
+/**
+* The raw state of every input device, updated by DOM events and sampled once
+* per frame: held keys and mouse buttons, the pointer, movement and wheel
+* accumulators, one-frame pulses, on-screen sticks and buttons, and gamepads.
+*/
+/** Keys that scroll the page; cancelled during play (not while typing). */
+const SCROLL_KEYS = /* @__PURE__ */ new Set([
+	" ",
+	"arrowup",
+	"arrowdown",
+	"arrowleft",
+	"arrowright"
+]);
+/** Input types that don't take text (buttons, checkboxes, sliders…). */
+const NON_TEXT_INPUT_TYPES = /* @__PURE__ */ new Set([
+	"button",
+	"submit",
+	"reset",
+	"checkbox",
+	"radio",
+	"range",
+	"color",
+	"file",
+	"image"
+]);
+/** Whether typing in `target` owns Space and the arrow keys. */
+function isTypingTarget(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	if (target.isContentEditable || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) return true;
+	return target instanceof HTMLInputElement && !NON_TEXT_INPUT_TYPES.has(target.type);
+}
+/** Raw device state for one page. */
+var DeviceState = class {
+	constructor() {
+		_defineProperty(this, "heldKeys", /* @__PURE__ */ new Set());
+		_defineProperty(this, "heldMouseButtons", /* @__PURE__ */ new Set());
+		_defineProperty(this, "pressedVirtualButtons", /* @__PURE__ */ new Set());
+		_defineProperty(this, "sticks", /* @__PURE__ */ new Map());
+		_defineProperty(this, "pointerX", 0);
+		_defineProperty(this, "pointerY", 0);
+		_defineProperty(this, "movement", {
+			dx: 0,
+			dy: 0
+		});
+		_defineProperty(this, "wheel", {
+			dx: 0,
+			dy: 0
+		});
+		_defineProperty(this, "gamepads", []);
+		_defineProperty(this, "frame", 0);
+		_defineProperty(this, "pulseFrames", /* @__PURE__ */ new Map());
+	}
+	/** Fire a one-frame pulse (`tap`, `mouse:dbl`). */
+	pulse(name) {
+		this.pulseFrames.set(name, this.frame);
+	}
+	/** Whether a pulse fired this frame or the last. */
+	isPulseActive(name) {
+		const firedAt = this.pulseFrames.get(name);
+		return firedAt === this.frame || firedAt === this.frame - 1;
+	}
+	/** Poll the gamepads. Returns whether any are connected and whether any moved. */
+	pollGamepads() {
+		this.gamepads = readGamepads();
+		const hasActivity = this.gamepads.some((pad) => pad.buttons.some((button) => button.pressed || button.value > .5) || pad.axes.some((axis) => Math.abs(axis) > .35));
+		return {
+			isConnected: this.gamepads.length > 0,
+			hasActivity
+		};
+	}
+	/** End-of-frame decay of the relative accumulators. */
+	decay() {
+		this.movement.dx = 0;
+		this.movement.dy = 0;
+		this.wheel.dx *= .6;
+		this.wheel.dy *= .6;
+	}
+	/** Release everything held (focus loss, hidden tab), so nothing sticks. */
+	releaseAll() {
+		this.heldKeys.clear();
+		this.heldMouseButtons.clear();
+		this.pressedVirtualButtons.clear();
+		for (const stick of this.sticks.values()) {
+			stick.outX = 0;
+			stick.outY = 0;
+		}
+	}
+	/** Wire the DOM listeners that feed this state. */
+	listen(events) {
+		if (typeof window === "undefined") return;
+		window.addEventListener("keydown", (event) => {
+			const key = event.key.toLowerCase();
+			this.heldKeys.add(key);
+			if (events.shouldCancelScrollKeys() && SCROLL_KEYS.has(key) && !isTypingTarget(event.target)) event.preventDefault();
+		});
+		window.addEventListener("keyup", (event) => this.heldKeys.delete(event.key.toLowerCase()));
+		window.addEventListener("mousemove", (event) => {
+			this.movement.dx += event.movementX;
+			this.movement.dy += event.movementY;
+			this.pointerX = event.clientX;
+			this.pointerY = event.clientY;
+			events.onMouseActivity();
+		});
+		window.addEventListener("mousedown", (event) => {
+			this.heldMouseButtons.add(event.button);
+			events.onMouseActivity();
+		});
+		window.addEventListener("mouseup", (event) => this.heldMouseButtons.delete(event.button));
+		window.addEventListener("dblclick", () => {
+			this.pulse("mouse:dbl");
+		});
+		window.addEventListener("wheel", (event) => {
+			this.wheel.dx += Math.sign(event.deltaX);
+			this.wheel.dy += Math.sign(event.deltaY);
+		}, { passive: true });
+		window.addEventListener("blur", () => {
+			this.releaseAll();
+		});
+		document.addEventListener("visibilitychange", () => {
+			if (document.hidden) this.releaseAll();
+		});
+		window.addEventListener("gamepadconnected", () => {
+			events.onGamepadConnection(true);
+		});
+		window.addEventListener("gamepaddisconnected", () => {
+			events.onGamepadConnection(false);
+		});
+	}
+};
+//#endregion
+//#region src/input/edges.ts
+/**
+* Edge detection for polled buttons: a plain rising edge, and a rising edge
+* that repeats while held (menu navigation: a first step, a pause, then steady
+* steps).
+*/
+/** Delay before a held direction starts repeating. */
+const FIRST_REPEAT_DELAY_MS = 320;
+/** Interval between repeats while held. */
+const REPEAT_INTERVAL_MS = 130;
+/** A monotonic clock in ms. */
+function nowMs() {
+	return typeof performance === "undefined" ? Date.now() : performance.now();
+}
+/** Rising edges of named polled buttons. */
+var RisingEdges = class {
+	constructor() {
+		_defineProperty(this, "wasPressed", /* @__PURE__ */ new Map());
+	}
+	/** Whether `key` went from released to pressed since the last call for it. */
+	rose(key, isPressed) {
+		const wasPressedBefore = this.wasPressed.get(key) === true;
+		this.wasPressed.set(key, isPressed);
+		return isPressed && !wasPressedBefore;
+	}
+};
+/** Rising edges that repeat while held. */
+var RepeatingEdges = class {
+	constructor() {
+		_defineProperty(this, "timers", /* @__PURE__ */ new Map());
+	}
+	/** Whether `key` fires now: on the press, then after a delay, then steadily while held. */
+	fires(key, isPressed, at = nowMs()) {
+		let timer = this.timers.get(key);
+		if (timer === void 0) {
+			timer = {
+				isHeld: false,
+				nextAt: 0
+			};
+			this.timers.set(key, timer);
+		}
+		if (!isPressed) {
+			timer.isHeld = false;
+			return false;
+		}
+		if (!timer.isHeld) {
+			timer.isHeld = true;
+			timer.nextAt = at + FIRST_REPEAT_DELAY_MS;
+			return true;
+		}
+		if (at >= timer.nextAt) {
+			timer.nextAt = at + REPEAT_INTERVAL_MS;
+			return true;
+		}
+		return false;
+	}
+};
+//#endregion
+//#region src/input/input-events.ts
+/** Listeners by event name. */
+var InputEventHub = class {
+	constructor() {
+		_defineProperty(this, "listeners", {
+			focus: /* @__PURE__ */ new Set(),
+			blur: /* @__PURE__ */ new Set(),
+			act: /* @__PURE__ */ new Set(),
+			sourcechange: /* @__PURE__ */ new Set(),
+			navigate: /* @__PURE__ */ new Set()
+		});
+	}
+	/** Subscribe. Returns the unsubscribe function. */
+	on(event, listener) {
+		const registered = this.listeners[event];
+		registered.add(listener);
+		return () => {
+			registered.delete(listener);
+		};
+	}
+	/** Deliver an event to every listener. */
+	emit(event, payload) {
+		for (const listener of [...this.listeners[event]]) try {
+			listener(payload);
+		} catch {}
+	}
+};
+//#endregion
+//#region src/input/source-values.ts
+/** Clamp to 0..1. */
+function clampUnit(amount) {
+	return Math.min(1, Math.max(0, amount));
+}
+/** The pointer's position from screen centre on an axis, as 0..1 on one side. */
+function centreValue(state, axis, side) {
+	const signed = ((axis === "x" ? state.pointerX / window.innerWidth : state.pointerY / window.innerHeight) - .5) * 2;
+	return clampUnit(side === "-" ? -signed : signed);
+}
+/** A signed amount read on one side. */
+function onSide(amount, side) {
+	return side === "-" ? -amount : amount;
+}
+function mouseValue(state, mapping) {
+	let strongest = 0;
+	if (mapping.button !== void 0 && state.heldMouseButtons.has(mapping.button)) strongest = 1;
+	if (mapping.dblclick === true && state.isPulseActive("mouse:dbl")) strongest = 1;
+	if (mapping.centerAxis !== void 0) strongest = Math.max(strongest, centreValue(state, mapping.centerAxis, mapping.centerSide));
+	if (mapping.moveAxis !== void 0) {
+		const moved = mapping.moveAxis === "x" ? state.movement.dx : state.movement.dy;
+		strongest = Math.max(strongest, clampUnit(onSide(moved, mapping.moveSign) * (mapping.moveScale ?? .1)));
+	}
+	if (mapping.wheel !== void 0) strongest = Math.max(strongest, clampUnit(onSide(state.wheel.dy, mapping.wheel)));
+	return strongest;
+}
+function gamepadValue(state, mapping) {
+	let strongest = 0;
+	for (const pad of state.gamepads) {
+		if (mapping.button !== void 0) {
+			const button = pad.buttons[mapping.button];
+			if (button !== void 0) strongest = Math.max(strongest, button.value > 0 ? button.value : Number(button.pressed));
+		}
+		if (mapping.axis !== void 0) {
+			const [axisIndex, half] = mapping.axis;
+			const deflection = pad.axes[axisIndex] ?? 0;
+			const reading = half === "±" ? Math.abs(deflection) : Math.max(0, half === "+" ? deflection : -deflection);
+			if (Math.abs(deflection) > .35) strongest = Math.max(strongest, clampUnit(reading));
+		}
+	}
+	return strongest;
+}
+function stickValue(state, mapping) {
+	const stick = mapping.stick === void 0 ? void 0 : state.sticks.get(mapping.stick);
+	if (stick === void 0) return 0;
+	const readings = {
+		"x+": Math.max(0, stick.outX),
+		"x-": Math.max(0, -stick.outX),
+		"y+": Math.max(0, stick.outY),
+		"y-": Math.max(0, -stick.outY),
+		x: Math.abs(stick.outX),
+		y: Math.abs(stick.outY)
+	};
+	return mapping.axis === void 0 ? 0 : readings[mapping.axis];
+}
+function touchValue(state, mapping) {
+	let strongest = clampUnit(stickValue(state, mapping));
+	if (mapping.button !== void 0 && state.pressedVirtualButtons.has(mapping.button)) strongest = 1;
+	if (mapping.tap === true && state.isPulseActive("tap")) strongest = 1;
+	if (mapping.centerAxis !== void 0) strongest = Math.max(strongest, centreValue(state, mapping.centerAxis, mapping.centerSide));
+	return strongest;
+}
+/** An input's raw value now, given the active pointer. */
+function readRawValue(state, definition, activeSource) {
+	let strongest = 0;
+	if (definition.keys?.some((key) => state.heldKeys.has(key.toLowerCase())) === true) strongest = 1;
+	if (definition.mouse !== void 0 && activeSource === "mouse") strongest = Math.max(strongest, mouseValue(state, definition.mouse));
+	if (definition.gamepad !== void 0 && activeSource === "gamepad") strongest = Math.max(strongest, gamepadValue(state, definition.gamepad));
+	if (definition.touch !== void 0) strongest = Math.max(strongest, touchValue(state, definition.touch));
+	return clampUnit(strongest);
+}
+//#endregion
+//#region src/input/input-registry.ts
+/** Inputs cross this to count as pressed. */
+const PRESS_THRESHOLD = .5;
+/** One side of an axis definition as -1..1. */
+function readAxisSide(side, valueOf) {
+	if (side === void 0) return 0;
+	if (typeof side === "string") return valueOf(side);
+	return clampUnit(valueOf(side[1])) - clampUnit(valueOf(side[0]));
+}
+/** The declared inputs and their readings. */
+var InputRegistry = class {
+	constructor() {
+		_defineProperty(this, "inputs", /* @__PURE__ */ new Map());
+		_defineProperty(this, "enabledGroups", /* @__PURE__ */ new Map());
+		_defineProperty(this, "axes", /* @__PURE__ */ new Map());
+	}
+	/** Replace the declared inputs. Groups keep an enabled state set before; new ones start as declared. */
+	declare(config, bindingOf) {
+		this.inputs.clear();
+		this.axes.clear();
+		for (const [group, groupDefinition] of Object.entries(config.groups)) {
+			if (!this.enabledGroups.has(group)) this.enabledGroups.set(group, groupDefinition.enabled ?? false);
+			for (const [name, definition] of Object.entries(groupDefinition.inputs)) this.inputs.set(name, {
+				definition: bindingOf(name, definition),
+				group,
+				raw: 0,
+				previous: 0
+			});
+			for (const [name, axis] of Object.entries(groupDefinition.axes ?? {})) this.axes.set(name, axis);
+		}
+	}
+	/** The group an input belongs to. */
+	groupOf(name) {
+		return this.inputs.get(name)?.group;
+	}
+	/** Replace one input's sources (after a rebind). */
+	redefine(name, definition) {
+		const input = this.inputs.get(name);
+		if (input !== void 0) input.definition = definition;
+	}
+	/** Turn a group on or off. On: held sources don't fire a phantom `down`. Off: its inputs read 0. */
+	setGroupEnabled(group, isEnabled, devices, source) {
+		this.enabledGroups.set(group, isEnabled);
+		for (const input of this.inputs.values()) {
+			if (input.group !== group) continue;
+			input.raw = isEnabled ? readRawValue(devices, input.definition, source) : 0;
+			if (isEnabled) input.previous = input.raw;
+		}
+	}
+	/** Whether a group is on. */
+	isEnabled(group) {
+		return this.enabledGroups.get(group) === true;
+	}
+	/** The groups that are on. */
+	enabledGroupNames() {
+		return new Set([...this.enabledGroups].filter(([, isOn]) => isOn).map(([group]) => group));
+	}
+	/** Take this frame's readings (inputs of disabled groups read 0). */
+	sample(devices, source) {
+		for (const input of this.inputs.values()) {
+			input.previous = input.raw;
+			input.raw = this.isEnabled(input.group) ? readRawValue(devices, input.definition, source) : 0;
+		}
+	}
+	/** Every input reads 0 this frame (the hub menu is open). */
+	silence() {
+		for (const input of this.inputs.values()) {
+			input.previous = input.raw;
+			input.raw = 0;
+		}
+	}
+	/** An input's value, 0..1. */
+	value(name) {
+		return this.inputs.get(name)?.raw ?? 0;
+	}
+	/** Whether an input crossed the press threshold upward this frame. */
+	wentDown(name) {
+		const input = this.inputs.get(name);
+		return input !== void 0 && input.previous < PRESS_THRESHOLD && input.raw >= PRESS_THRESHOLD;
+	}
+	/** Whether an input crossed the press threshold downward this frame. */
+	wentUp(name) {
+		const input = this.inputs.get(name);
+		return input !== void 0 && input.previous >= PRESS_THRESHOLD && input.raw < PRESS_THRESHOLD;
+	}
+	/** Whether an input is held. */
+	isPressed(name) {
+		return this.value(name) >= PRESS_THRESHOLD;
+	}
+	/** An input's full reading. */
+	reading(name) {
+		const raw = this.value(name);
+		return {
+			value: raw,
+			raw,
+			isDown: this.wentDown(name),
+			isUp: this.wentUp(name)
+		};
+	}
+	/** A named axis (or an ad-hoc negative/positive pair) as -1..1. */
+	axis(name, positive) {
+		if (positive !== void 0) return clampUnit(this.value(positive)) - clampUnit(this.value(name));
+		const axis = this.axes.get(name);
+		return axis === void 0 ? this.value(name) : readAxisSide(axis.x, (input) => this.value(input));
+	}
+	/** A named axis pair as a vector clamped to the unit circle. */
+	vector(name) {
+		const axis = this.axes.get(name);
+		if (axis === void 0) return {
+			x: 0,
+			y: 0,
+			mag: 0
+		};
+		let horizontal = readAxisSide(axis.x, (input) => this.value(input));
+		let vertical = readAxisSide(axis.y, (input) => this.value(input));
+		const magnitude = Math.hypot(horizontal, vertical);
+		if (magnitude > 1) {
+			horizontal /= magnitude;
+			vertical /= magnitude;
+		}
+		return {
+			x: horizontal,
+			y: vertical,
+			mag: Math.min(magnitude, 1)
+		};
+	}
+	/** An input's current sources (for the binding label). */
+	definitionOf(name) {
+		return this.inputs.get(name)?.definition;
+	}
+};
+//#endregion
+//#region src/input/legacy-controls.ts
+/**
+* `game.controls` (`window.__HUB__.controls`): the gamepad-to-keyboard map a
+* zero-config game declares. It comes from the page, so it is read field by
+* field; anything malformed falls back to the defaults.
+*/
+/** The defaults: arrows, A=Space, B=Enter, X=Z, Y=X, Select=Escape, Start=Enter. */
+const DEFAULT_BUTTONS = [
+	[0, "Space"],
+	[1, "Enter"],
+	[2, "KeyZ"],
+	[3, "KeyX"],
+	[9, "Enter"],
+	[8, "Escape"]
+];
+/** A text field of the map, or the default. */
+function textOr(map, key, fallback) {
+	const field = readField(map, key);
+	return typeof field === "string" && field !== "" ? field : fallback;
+}
+/** One player's map over the defaults. */
+function resolveMap(map) {
+	const buttons = new Map(DEFAULT_BUTTONS);
+	const declared = readField(map, "buttons");
+	if (isObject(declared)) {
+		for (const [index, code] of Object.entries(declared)) if (typeof code === "string" && code !== "" && /^\d+$/.test(index)) buttons.set(Number(index), code);
+	}
+	return {
+		up: textOr(map, "up", "ArrowUp"),
+		down: textOr(map, "down", "ArrowDown"),
+		left: textOr(map, "left", "ArrowLeft"),
+		right: textOr(map, "right", "ArrowRight"),
+		buttons
+	};
+}
+/** Parse `game.controls` (a shared map, or per-player maps in `players`). */
+function parseLegacyControls(raw) {
+	const players = readField(raw, "players");
+	if (Array.isArray(players) && players.length > 0) return players.map(resolveMap);
+	return [resolveMap(raw)];
+}
+/** The map for the pad at `padIndex`. */
+function controlMapFor(controls, padIndex) {
+	return controls[padIndex] ?? controls[0] ?? resolveMap(null);
+}
+//#endregion
+//#region src/input/spatial.ts
+/** Centres closer than this on the travel axis don't count as "in that direction". */
+const MIN_TRAVEL_PX = 4;
+/** The rectangle of a DOM element. */
+function rectOf(element) {
+	const bounds = element.getBoundingClientRect();
+	return {
+		x: bounds.left,
+		y: bounds.top,
+		width: bounds.width,
+		height: bounds.height
+	};
+}
+/** Index of the rectangle nearest `rects[fromIndex]` strictly in `direction`, or -1. Off-axis distance counts double. */
+function findNearestInDirection(rects, fromIndex, direction) {
+	const from = rects[fromIndex];
+	if (from === void 0) return -1;
+	const fromCentreX = from.x + from.width / 2;
+	const fromCentreY = from.y + from.height / 2;
+	const isVertical = direction === "up" || direction === "down";
+	let bestIndex = -1;
+	let bestScore = Infinity;
+	rects.forEach((rect, index) => {
+		if (index === fromIndex) return;
+		const dx = rect.x + rect.width / 2 - fromCentreX;
+		const dy = rect.y + rect.height / 2 - fromCentreY;
+		const travel = {
+			up: -dy,
+			down: dy,
+			left: -dx,
+			right: dx
+		}[direction];
+		if (travel <= MIN_TRAVEL_PX) return;
+		const score = travel + (isVertical ? Math.abs(dx) : Math.abs(dy)) * 2;
+		if (score < bestScore) {
+			bestScore = score;
+			bestIndex = index;
+		}
+	});
+	return bestIndex;
+}
+//#endregion
+//#region src/input/nav-state.ts
+const TEXT_INPUT_TYPES = /* @__PURE__ */ new Set([
+	"text",
+	"search",
+	"email",
+	"password",
+	"number"
+]);
+/** What kind of element a DOM node is, for `act`. */
+function kindOf(element) {
+	if (element instanceof HTMLInputElement) {
+		if (element.type === "range") return "range";
+		if (TEXT_INPUT_TYPES.has(element.type)) return "text";
+	}
+	return element instanceof HTMLTextAreaElement ? "text" : "button";
+}
+/** A navigable element's bounds. */
+function boundsOf(element) {
+	if (element.getBounds !== void 0) return element.getBounds();
+	return element.el === void 0 ? {
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	} : rectOf(element.el);
+}
+/** The text field a navigable element edits, if it is one. */
+function textFieldOf(element) {
+	return element.el instanceof HTMLInputElement || element.el instanceof HTMLTextAreaElement ? element.el : null;
+}
+/** The highlight state of one navigable list. */
+var NavState = class {
+	constructor(queryElements, shouldWrap = true) {
+		_defineProperty(this, "elements", []);
+		_defineProperty(this, "index", -1);
+		_defineProperty(this, "queryElements", void 0);
+		_defineProperty(this, "shouldWrap", void 0);
+		this.queryElements = queryElements;
+		this.shouldWrap = shouldWrap;
+	}
+	/** Re-read the list, highlighting the first element if nothing is. */
+	requery(highlighter, listeners) {
+		this.elements = this.resolve();
+		if (this.index >= this.elements.length) this.index = this.elements.length - 1;
+		if (this.index < 0 && this.elements.length > 0) {
+			this.index = 0;
+			this.focusCurrent(listeners);
+		}
+		this.position(highlighter);
+	}
+	/** Drop the highlight. */
+	blur(highlighter) {
+		this.elements[this.index]?.onBlur?.();
+		this.index = -1;
+		highlighter?.hideHighlight();
+	}
+	/** Step to the next (+1) or previous (-1) element. */
+	step(delta, highlighter, listeners) {
+		this.elements = this.resolve();
+		const count = this.elements.length;
+		if (count === 0) return;
+		this.blurCurrent(listeners);
+		let next = this.index + delta;
+		if (next < 0) next = this.shouldWrap ? count - 1 : 0;
+		if (next >= count) next = this.shouldWrap ? 0 : count - 1;
+		this.moveTo(next, highlighter, listeners);
+	}
+	/** Move to the nearest element in `direction`; up and down spill over to the previous and next column. */
+	moveInDirection(direction, highlighter, listeners) {
+		this.elements = this.resolve();
+		if (this.elements.length === 0) return;
+		if (this.index < 0) {
+			this.moveTo(0, highlighter, listeners);
+			return;
+		}
+		const rects = this.elements.map(boundsOf);
+		let target = findNearestInDirection(rects, this.index, direction);
+		const fallback = {
+			up: "left",
+			down: "right",
+			left: null,
+			right: null
+		}[direction];
+		if (target < 0 && fallback !== null) target = findNearestInDirection(rects, this.index, fallback);
+		if (target >= 0) {
+			this.blurCurrent(listeners);
+			this.moveTo(target, highlighter, listeners);
+		}
+	}
+	/** Activate the highlighted element: open the keyboard for text, click anything else. */
+	act(highlighter, listeners) {
+		this.elements = this.resolve();
+		const current = this.elements[this.index];
+		if (current === void 0) return;
+		if (current.kind === "text") highlighter?.openKeyboard(textFieldOf(current));
+		else current.el?.click();
+		current.onAct?.();
+		listeners.onAct({
+			id: current.id,
+			el: current.el,
+			kind: current.kind,
+			index: this.index
+		});
+		this.elements = this.resolve();
+		this.position(highlighter);
+	}
+	/** Move the ring to the highlighted element (or hide it). */
+	position(highlighter) {
+		if (highlighter === null) return;
+		const current = this.elements[this.index];
+		if (current === void 0) highlighter.hideHighlight();
+		else highlighter.showHighlight(boundsOf(current));
+	}
+	resolve() {
+		return this.queryElements().map((target) => target instanceof HTMLElement ? {
+			el: target,
+			kind: kindOf(target)
+		} : target);
+	}
+	moveTo(index, highlighter, listeners) {
+		this.index = index;
+		this.focusCurrent(listeners);
+		this.position(highlighter);
+	}
+	focusCurrent(listeners) {
+		const current = this.elements[this.index];
+		if (current === void 0) return;
+		current.el?.focus({ preventScroll: false });
+		current.onFocus?.();
+		listeners.onFocus({
+			id: current.id,
+			el: current.el,
+			kind: current.kind,
+			index: this.index
+		});
+	}
+	blurCurrent(listeners) {
+		const current = this.elements[this.index];
+		if (current?.onBlur !== void 0) {
+			current.onBlur();
+			listeners.onBlur({
+				id: current.id,
+				index: this.index
+			});
+		}
+	}
+};
+//#endregion
+//#region src/input/navigator.ts
+const DIRECTIONS = [
+	"up",
+	"down",
+	"left",
+	"right"
+];
+/** The visible focusables of the hub menu. */
+function menuFocusables(root) {
+	if (root === null) return [];
+	return [...root.querySelectorAll("a[href], button:not([disabled]), input, [tabindex]")].filter((element) => element.getClientRects().length > 0);
+}
+/** Visible elements matching a CSS selector. */
+function visibleMatches(selector) {
+	return [...document.querySelectorAll(selector)].filter((element) => element.getClientRects().length > 0);
+}
+/** The menu, auto-navigate and group navigation of one input system. */
+var Navigator = class {
+	constructor() {
+		_defineProperty(this, "menuState", null);
+		_defineProperty(this, "autoNavigateQuery", null);
+		_defineProperty(this, "autoNavigateState", null);
+		_defineProperty(this, "autoNavigateBack", null);
+		_defineProperty(this, "groups", /* @__PURE__ */ new Map());
+	}
+	/** Forget the declared groups (a new `define`). */
+	clearGroups() {
+		this.groups.clear();
+	}
+	/** Declare a navigable group. */
+	addGroup(group, definition) {
+		this.groups.set(group, {
+			definition,
+			state: new NavState(definition.elements, definition.wrap !== false)
+		});
+	}
+	/** A group was enabled: highlight its first element. */
+	refreshGroup(group, context) {
+		this.groups.get(group)?.state.requery(context.highlighter(), context.listeners);
+	}
+	/** A group was disabled: drop its highlight. */
+	blurGroup(group, highlighter) {
+		this.groups.get(group)?.state.blur(highlighter);
+	}
+	/** Opt a game's own menus into gamepad navigation. */
+	setAutoNavigate(query, back) {
+		this.autoNavigateQuery = query;
+		this.autoNavigateBack = back;
+		this.autoNavigateState = null;
+	}
+	/** Make a CSS selector's visible matches the auto-navigate targets. */
+	static queryFor(selector) {
+		return typeof selector === "string" ? () => visibleMatches(selector) : selector;
+	}
+	/** Stop auto-navigating. */
+	clearAutoNavigate(highlighter) {
+		this.autoNavigateQuery = null;
+		this.autoNavigateState?.blur(highlighter);
+		this.autoNavigateState = null;
+	}
+	/** The hub menu is open: drive it with the highlight ring (gamepad only). */
+	driveMenu(menu, isGamepadActive, context, highlighter) {
+		if (!isGamepadActive) {
+			highlighter?.hideHighlight();
+			return;
+		}
+		this.menuState ?? (this.menuState = new NavState(() => menuFocusables(menu.root)));
+		this.driveList(this.menuState, "m", context, () => {
+			menu.close();
+		});
+	}
+	/** The hub menu closed: drop its highlight. */
+	leaveMenu(highlighter) {
+		this.menuState?.blur(highlighter);
+		this.menuState = null;
+	}
+	/** A game's own menus, when opted in, visible, and a gamepad is in use. */
+	driveAutoNavigate(isGamepadActive, context, highlighter) {
+		const query = this.autoNavigateQuery;
+		if (query === null || !isGamepadActive || query().length === 0) {
+			this.autoNavigateState?.blur(highlighter);
+			this.autoNavigateState = null;
+			return;
+		}
+		this.autoNavigateState ?? (this.autoNavigateState = new NavState(query));
+		this.driveList(this.autoNavigateState, "an", context, this.autoNavigateBack);
+	}
+	/** The declared navigable groups that are enabled. */
+	driveGroups(isGroupEnabled, context) {
+		for (const [group, { definition, state }] of this.groups) {
+			if (!isGroupEnabled(group)) continue;
+			const highlighter = context.highlighter();
+			const fires = (prefix, inputName) => inputName !== void 0 && context.repeats.fires(prefix + group, context.isPressed(inputName));
+			const shouldStepPrevious = fires("np:", definition.prev);
+			const shouldStepNext = fires("nn:", definition.next);
+			const shouldMoveUp = fires("nu:", definition.up);
+			const shouldMoveDown = fires("nd:", definition.down);
+			if (shouldStepNext) state.step(1, highlighter, context.listeners);
+			else if (shouldStepPrevious) state.step(-1, highlighter, context.listeners);
+			else if (shouldMoveUp) state.moveInDirection("up", highlighter, context.listeners);
+			else if (shouldMoveDown) state.moveInDirection("down", highlighter, context.listeners);
+			if (definition.act !== "" && context.wentDown(definition.act)) state.act(highlighter, context.listeners);
+			state.position(highlighter);
+		}
+	}
+	/** Move with the stick or d-pad, A acts, B goes back. */
+	driveList(state, keyPrefix, context, back) {
+		const highlighter = context.highlighter();
+		state.requery(highlighter, context.listeners);
+		const held = anyPadDirections(context.gamepads, AXIS_DEADZONE);
+		const direction = DIRECTIONS.find((candidate) => context.repeats.fires(`${keyPrefix}:${candidate[0] ?? ""}`, held[candidate]));
+		if (direction !== void 0) state.moveInDirection(direction, highlighter, context.listeners);
+		if (context.presses.rose("act", isAnyPadButtonPressed(context.gamepads, PAD_BUTTON.A))) state.act(highlighter, context.listeners);
+		if (context.presses.rose("back", isAnyPadButtonPressed(context.gamepads, PAD_BUTTON.B))) back?.();
+		state.position(highlighter);
+	}
+};
+//#endregion
+//#region src/overlay/controls-panel.ts
+/**
+* The Controls screen: rebind inputs, show or hide the on-screen controls,
+* edit the touch layout, reset to defaults.
+*/
+/** How long a rebind waits for a key or button. */
+const REBIND_TIMEOUT_MS = 8e3;
+/** The Controls screen markup for `config`. */
+function panelHtml(config, host) {
+	let rows = "";
+	for (const [group, groupDefinition] of Object.entries(config.groups)) {
+		rows += `<h4>${escapeHtml(group)}</h4>`;
+		for (const name of Object.keys(groupDefinition.inputs)) {
+			const escapedName = escapeHtml(name);
+			rows += `<div class="cr"><span>${escapedName}</span><b class="bind" data-i="${escapedName}">${escapeHtml(host.bindingLabel(name))}</b><button class="rb" data-i="${escapedName}">Rebind</button></div>`;
+		}
+	}
+	return `
+      <div class="panel-card">
+        <h3>Controls</h3>
+        <label class="chk"><input type="checkbox" class="showv"> Show on-screen controls</label>
+        <button class="btn editlayout">Edit touch layout</button>
+        <div class="crs">${rows}</div>
+        <div class="panel-actions">
+          <button class="btn reset">Reset to defaults</button>
+          <button class="btn done">Done</button>
+        </div>
+        <p class="hint"></p>
+        <div class="edit-bar"><span>Drag a control to move it</span><button class="btn editdone">Done</button></div>
+      </div>`;
+}
+/** The Controls screen (one at a time). */
+var ControlsPanel = class {
+	constructor(root, shadowHost) {
+		_defineProperty(this, "root", void 0);
+		_defineProperty(this, "shadowHost", void 0);
+		_defineProperty(this, "panel", null);
+		_defineProperty(this, "isEditingLayout", false);
+		this.root = root;
+		this.shadowHost = shadowHost;
+	}
+	/** Whether the player is dragging controls around. */
+	get isEditing() {
+		return this.isEditingLayout;
+	}
+	/** Open the screen (or close it when already open). */
+	toggle(config, host) {
+		if (config === null) return;
+		if (this.panel !== null) {
+			this.close();
+			return;
+		}
+		const panel = document.createElement("div");
+		panel.className = "panel";
+		panel.innerHTML = panelHtml(config, host);
+		this.root.appendChild(panel);
+		this.panel = panel;
+		const showToggle = requireElement(panel, ".showv", HTMLInputElement);
+		showToggle.checked = host.showingVirtual;
+		showToggle.addEventListener("change", () => {
+			host.showVirtual(showToggle.checked);
+		});
+		requireElement(panel, ".editlayout", HTMLButtonElement).addEventListener("click", () => {
+			this.setEditing(!this.isEditingLayout, host);
+		});
+		requireElement(panel, ".reset", HTMLButtonElement).addEventListener("click", () => {
+			host.resetControls();
+			this.close();
+		});
+		requireElement(panel, ".done", HTMLButtonElement).addEventListener("click", () => {
+			this.setEditing(false, host);
+			this.close();
+		});
+		requireElement(panel, ".editdone", HTMLButtonElement).addEventListener("click", () => {
+			this.setEditing(false, host);
+		});
+		for (const button of findElements(panel, ".rb", HTMLButtonElement)) button.addEventListener("click", () => {
+			this.captureRebind(button.dataset["i"] ?? "", host, panel);
+		});
+	}
+	close() {
+		this.panel?.remove();
+		this.panel = null;
+	}
+	setEditing(isEditing, host) {
+		this.isEditingLayout = isEditing;
+		this.shadowHost.classList.toggle("editing", isEditing);
+		host.setVirtualEditing(isEditing);
+	}
+	/** Wait for the next key or gamepad button and bind `inputName` to it. */
+	captureRebind(inputName, host, panel) {
+		const hint = requireElement(panel, ".hint", HTMLElement);
+		hint.textContent = `Press a key or gamepad button for "${inputName}"…`;
+		let frameRequest = 0;
+		const startedAt = performance.now();
+		const cleanUp = () => {
+			window.removeEventListener("keydown", onKey, true);
+			cancelAnimationFrame(frameRequest);
+		};
+		const finish = (patch, label) => {
+			host.rebind(inputName, patch);
+			const binding = findElements(panel, ".bind", HTMLElement).find((element) => element.dataset["i"] === inputName);
+			if (binding !== void 0) binding.textContent = label;
+			hint.textContent = "";
+			cleanUp();
+		};
+		function onKey(event) {
+			event.preventDefault();
+			finish({ keys: [event.key] }, event.key);
+		}
+		const pollPads = () => {
+			for (const pad of readGamepads()) {
+				const pressed = pad.buttons.findIndex((button) => button.pressed);
+				if (pressed >= 0) {
+					finish({ gamepad: { button: pressed } }, `Pad ${String(pressed)}`);
+					return;
+				}
+			}
+			if (performance.now() - startedAt > REBIND_TIMEOUT_MS) {
+				hint.textContent = "";
+				cleanUp();
+				return;
+			}
+			frameRequest = requestAnimationFrame(pollPads);
+		};
+		window.addEventListener("keydown", onKey, true);
+		frameRequest = requestAnimationFrame(pollPads);
+	}
+};
+//#endregion
+//#region src/overlay/layout-clusters.ts
+/** A new column starts after this many buttons. */
+const MAX_COLUMN_LENGTH = 3;
+/** Wrap `items` into rows no wider than `maxWidth`. */
+function wrapIntoRows(items, maxWidth, gap) {
+	const rows = [];
+	let row = [];
+	let rowWidth = 0;
+	for (const item of items) {
+		const widened = row.length > 0 ? rowWidth + gap + item.w : item.w;
+		if (row.length > 0 && widened > maxWidth) {
+			rows.push(row);
+			row = [item];
+			rowWidth = item.w;
+		} else {
+			row.push(item);
+			rowWidth = widened;
+		}
+	}
+	if (row.length > 0) rows.push(row);
+	return rows;
+}
+/** A row's total width and its tallest item. */
+function measureRow(row, gap) {
+	return {
+		width: row.reduce((total, item) => total + item.w, 0) + gap * (row.length - 1),
+		height: Math.max(...row.map((item) => item.h))
+	};
+}
+/** Centred rows along the top or bottom edge (past a stick sharing the anchor). */
+function centredRows(buttons, sides, sticks, context, into) {
+	const { area, gap, viewportWidth, viewportHeight } = context;
+	const rows = wrapIntoRows(buttons, area.right - area.left, gap);
+	const sizes = rows.map((row) => measureRow(row, gap));
+	const totalHeight = sizes.reduce((total, size) => total + size.height, 0) + gap * (rows.length - 1);
+	let along = sticks.span === null ? 0 : sticks.span.h + gap;
+	rows.forEach((row, rowIndex) => {
+		const size = sizes[rowIndex] ?? {
+			width: 0,
+			height: 0
+		};
+		let left = (viewportWidth - size.width) / 2;
+		for (const item of row) {
+			const nudgeX = item.offset?.x ?? 0;
+			const nudgeY = item.offset?.y ?? 0;
+			const centreY = sides.vertical === "top" ? area.top + along + size.height / 2 + nudgeY : sides.vertical === "bottom" ? area.bottom - along - size.height / 2 - nudgeY : (viewportHeight - totalHeight) / 2 + along + size.height / 2 + nudgeY;
+			into.set(item.id, {
+				x: left + nudgeX,
+				y: centreY - item.h / 2,
+				w: item.w,
+				h: item.h
+			});
+			left += item.w + gap;
+		}
+		along += size.height + gap;
+	});
+}
+/**
+* The classic layout: columns inset past any stick, stacked along the
+* vertical edge (a new inward column after three, or when too tall), or
+* centred rows for top and bottom anchors.
+*/
+function clusterBesideSticks(buttons, sides, sticks, context, into) {
+	if (sides.horizontal === "mid") {
+		centredRows(buttons, sides, sticks, context, into);
+		return;
+	}
+	const { area, gap, viewportHeight } = context;
+	const availableHeight = area.bottom - area.top;
+	let inset = sticks.span === null ? 0 : sticks.reserve;
+	let along = 0;
+	let columnWidth = 0;
+	let countInColumn = 0;
+	let column = 0;
+	const cells = [];
+	const columnHeights = [];
+	for (const item of buttons) {
+		if (countInColumn > 0 && (countInColumn >= MAX_COLUMN_LENGTH || along + item.h > availableHeight)) {
+			inset += columnWidth + gap;
+			along = 0;
+			columnWidth = 0;
+			countInColumn = 0;
+			column += 1;
+		}
+		cells.push({
+			item,
+			inset,
+			along,
+			column
+		});
+		columnHeights[column] = along + item.h;
+		along += item.h + gap;
+		columnWidth = Math.max(columnWidth, item.w);
+		countInColumn += 1;
+	}
+	for (const cell of cells) {
+		const { item } = cell;
+		const nudgeX = item.offset?.x ?? 0;
+		const nudgeY = item.offset?.y ?? 0;
+		const left = sides.horizontal === "left" ? area.left + cell.inset + nudgeX : area.right - cell.inset - item.w - nudgeX;
+		const top = sides.vertical === "top" ? area.top + cell.along + nudgeY : sides.vertical === "bottom" ? area.bottom - cell.along - item.h - nudgeY : (viewportHeight - (columnHeights[cell.column] ?? 0)) / 2 + cell.along + nudgeY;
+		into.set(item.id, {
+			x: left,
+			y: top,
+			w: item.w,
+			h: item.h
+		});
+	}
+}
+/**
+* The compact layout: rows just past the corner's sticks (above them for
+* bottom corners), first-declared button innermost, each row at most half
+* the screen wide.
+*/
+function rowsBeyondSticks(buttons, sides, span, context) {
+	const { area, gap, viewportWidth } = context;
+	const placed = /* @__PURE__ */ new Map();
+	const isLeft = sides.horizontal === "left";
+	const maxWidth = isLeft ? viewportWidth / 2 - gap / 2 - area.left : area.right - (viewportWidth / 2 + gap / 2);
+	let along = 0;
+	for (const row of wrapIntoRows(buttons, maxWidth, gap)) {
+		const size = measureRow(row, gap);
+		const doesRowFitOverSticks = size.width <= span.w;
+		let left = isLeft ? doesRowFitOverSticks ? span.x + span.w - size.width : area.left : doesRowFitOverSticks ? span.x : area.right - size.width;
+		const innermostFirst = isLeft ? [...row].reverse() : row;
+		for (const item of innermostFirst) {
+			const nudgeX = item.offset?.x ?? 0;
+			const nudgeY = item.offset?.y ?? 0;
+			const centreY = sides.vertical === "bottom" ? span.y - gap - along - size.height / 2 - nudgeY : span.y + span.h + gap + along + size.height / 2 + nudgeY;
+			placed.set(item.id, {
+				x: left + (isLeft ? nudgeX : -nudgeX),
+				y: centreY - item.h / 2,
+				w: item.w,
+				h: item.h
+			});
+			left += item.w + gap;
+		}
+		along += size.height + gap;
+	}
+	return placed;
+}
+//#endregion
+//#region src/overlay/layout-geometry.ts
+/** Buttons are this size by default; sticks and dpads are bigger. */
+const DEFAULT_BUTTON_SIZE = 72;
+const DEFAULT_STICK_SIZE = 130;
+/** Whether a control is a stick (joystick or dpad). */
+function isStickType(type) {
+	return type === "joystick" || type === "dpad";
+}
+/** A control's declared size (before borders). */
+function declaredSize(definition) {
+	const base = definition.size ?? (definition.type === "button" ? DEFAULT_BUTTON_SIZE : DEFAULT_STICK_SIZE);
+	return {
+		w: definition.width ?? base,
+		h: definition.height ?? base
+	};
+}
+/** The rendered size of a control: buttons and taps draw a 2px border outside their declared size; sticks draw theirs inside. */
+function controlSize(definition) {
+	const declared = declaredSize(definition);
+	const border = isStickType(definition.type) ? 0 : 4;
+	return {
+		w: declared.w + border,
+		h: declared.h + border
+	};
+}
+/** Which edges an anchor hugs. */
+function anchorSides(anchor) {
+	return {
+		horizontal: anchor.endsWith("left") ? "left" : anchor.endsWith("right") ? "right" : "mid",
+		vertical: anchor.startsWith("top") ? "top" : anchor.startsWith("bottom") ? "bottom" : "mid"
+	};
+}
+/** Do two boxes overlap (or come closer than `padding` px)? */
+function boxesTouch(first, second, padding = 0) {
+	return first.x < second.x + second.w + padding && second.x < first.x + first.w + padding && first.y < second.y + second.h + padding && second.y < first.y + first.h + padding;
+}
+/** Clamp `amount` into `[low, high]`. */
+function clampBetween(amount, low, high) {
+	return Math.max(low, Math.min(high, amount));
+}
+/** The smallest box covering both. */
+function unionBox(first, second) {
+	const left = Math.min(first.x, second.x);
+	const top = Math.min(first.y, second.y);
+	return {
+		x: left,
+		y: top,
+		w: Math.max(first.x + first.w, second.x + second.w) - left,
+		h: Math.max(first.y + first.h, second.y + second.h) - top
+	};
+}
+/** The box moved inside `area`. */
+function clampBox(box, area) {
+	return {
+		...box,
+		x: clampBetween(box.x, area.left, area.right - box.w),
+		y: clampBetween(box.y, area.top, area.bottom - box.h)
+	};
+}
+/** Whether a box lies inside `area` (half a px of slack). */
+function isInside(box, area) {
+	return box.x >= area.left - .5 && box.y >= area.top - .5 && box.x + box.w <= area.right + .5 && box.y + box.h <= area.bottom + .5;
+}
+/** Grid step of the free-spot search. */
+const SEARCH_STEP = 4;
+/** The free spot inside `area` closest to `wanted`, on a 4px grid, or `null`. */
+function nearestFreeBox(wanted, area, isFree) {
+	let best = null;
+	let bestDistance = Infinity;
+	for (let top = area.top; top <= area.bottom - wanted.h + .01; top += SEARCH_STEP) for (let left = area.left; left <= area.right - wanted.w + .01; left += SEARCH_STEP) {
+		const distance = (left - wanted.x) ** 2 + (top - wanted.y) ** 2;
+		if (distance >= bestDistance) continue;
+		const candidate = {
+			x: left,
+			y: top,
+			w: wanted.w,
+			h: wanted.h
+		};
+		if (isFree(candidate)) {
+			best = candidate;
+			bestDistance = distance;
+		}
+	}
+	return best;
+}
+//#endregion
+//#region src/overlay/layout.ts
+/** Controls that aren't sticks must not touch each other (px). */
+const TOUCH_PADDING = 6;
+const NO_INSETS = {
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0
+};
+/** The placement state of one layout run. */
+var LayoutPass = class {
+	constructor(gap) {
+		_defineProperty(this, "boxes", {});
+		_defineProperty(this, "placed", []);
+		_defineProperty(this, "stickBoxes", /* @__PURE__ */ new Set());
+		_defineProperty(this, "gap", void 0);
+		this.gap = gap;
+	}
+	commit(item, box) {
+		this.boxes[item.id] = box;
+		if (item.type === "tap") return;
+		this.placed.push(box);
+		if (isStickType(item.type)) this.stickBoxes.add(box);
+	}
+	/**
+	* Whether `box` is clear of `others`. A stick's whole box is its touch
+	* area, so everything keeps a full gap from it (a thumb on the rim must not
+	* catch a button); other controls just must not touch.
+	*/
+	isFree(box, others = this.placed) {
+		return !others.some((other) => boxesTouch(box, other, this.stickBoxes.has(other) ? this.gap : TOUCH_PADDING));
+	}
+};
+/**
+* Place every control for a `viewportWidth` × `viewportHeight` viewport and
+* return each control's box.
+*
+* 1. A game `pos` is honoured as given. A player-dragged control keeps its
+*    spot (as % of the viewport, re-clamped inside the safe area), nudged to
+*    the nearest free spot if it would land on (or within `gap` of) a stick.
+* 2. Sticks sit in their anchor's corner, side by side inward.
+* 3. Buttons cluster beside their corner's sticks, stacked in columns. If any
+*    cluster doesn't fit, every corner cluster that has sticks moves into rows
+*    above (below, for top corners) its sticks, first-declared button
+*    innermost. Any button that still collides moves to the nearest free spot.
+*/
+function layoutControls(items, viewportWidth, viewportHeight, options = {}) {
+	const margin = options.margin ?? 22;
+	const gap = options.gap ?? 14;
+	const safe = {
+		...NO_INSETS,
+		...options.safe
+	};
+	const insets = {
+		...NO_INSETS,
+		...options.insets
+	};
+	const area = {
+		left: safe.left + insets.left + margin,
+		top: safe.top + insets.top + margin,
+		right: viewportWidth - safe.right - insets.right - margin,
+		bottom: viewportHeight - safe.bottom - insets.bottom - margin
+	};
+	const safeArea = {
+		left: safe.left,
+		top: safe.top,
+		right: viewportWidth - safe.right,
+		bottom: viewportHeight - safe.bottom
+	};
+	const context = {
+		area,
+		gap,
+		viewportWidth,
+		viewportHeight
+	};
+	const pass = new LayoutPass(gap);
+	const autoItems = [];
+	const dragged = [];
+	for (const item of items) if (item.override !== void 0) dragged.push({
+		item,
+		wanted: {
+			x: clampBetween(item.override.x / 100 * viewportWidth, safe.left, viewportWidth - safe.right - item.w),
+			y: clampBetween(item.override.y / 100 * viewportHeight, safe.top, viewportHeight - safe.bottom - item.h),
+			w: item.w,
+			h: item.h
+		}
+	});
+	else if (item.pos !== void 0) pass.commit(item, pinnedBox(item, item.pos, context));
+	else autoItems.push(item);
+	const byAnchor = /* @__PURE__ */ new Map();
+	for (const item of autoItems) {
+		const list = byAnchor.get(item.place) ?? [];
+		list.push(item);
+		byAnchor.set(item.place, list);
+	}
+	const sticksByAnchor = /* @__PURE__ */ new Map();
+	for (const [anchor, list] of byAnchor) sticksByAnchor.set(anchor, placeSticks(list, anchor, context, pass));
+	for (const { item, wanted } of dragged) {
+		const isClear = item.type === "tap" || pass.isFree(wanted);
+		pass.commit(item, isClear ? wanted : nearestFreeBox(wanted, safeArea, (box) => pass.isFree(box)) ?? wanted);
+	}
+	const classic = /* @__PURE__ */ new Map();
+	for (const [anchor, list] of byAnchor) {
+		const buttons = list.filter((item) => !isStickType(item.type));
+		if (buttons.length > 0) clusterBesideSticks(buttons, anchorSides(anchor), sticksByAnchor.get(anchor) ?? EMPTY_SPAN, context, classic);
+	}
+	const classicBoxes = autoItems.filter((item) => !isStickType(item.type) && item.type !== "tap").flatMap((item) => classic.get(item.id) ?? []);
+	const isCompact = classicBoxes.some((box) => !isInside(box, area) || !pass.isFree(box) || !pass.isFree(box, classicBoxes.filter((other) => other !== box)));
+	const lost = [];
+	for (const [anchor, list] of byAnchor) {
+		const buttons = list.filter((item) => !isStickType(item.type));
+		const sides = anchorSides(anchor);
+		const span = sticksByAnchor.get(anchor)?.span ?? null;
+		const rows = isCompact && span !== null && sides.horizontal !== "mid" && sides.vertical !== "mid" ? rowsBeyondSticks(buttons.filter((item) => item.type !== "tap"), sides, span, context) : null;
+		for (const item of buttons) {
+			const wanted = rows?.get(item.id) ?? classic.get(item.id);
+			if (wanted === void 0) continue;
+			if (item.type === "tap" || isInside(wanted, area) && pass.isFree(wanted)) pass.commit(item, wanted);
+			else lost.push({
+				item,
+				wanted
+			});
+		}
+	}
+	for (const { item, wanted } of lost) pass.commit(item, nearestFreeBox(wanted, area, (box) => pass.isFree(box)) ?? clampBox(wanted, area));
+	return pass.boxes;
+}
+const EMPTY_SPAN = {
+	span: null,
+	reserve: 0
+};
+/** A control pinned by `pos` (anchor sides fill in a missing axis). */
+function pinnedBox(item, pos, context) {
+	const { area, viewportWidth, viewportHeight } = context;
+	const sides = anchorSides(item.place);
+	const anchoredLeft = sides.horizontal === "left" ? area.left : sides.horizontal === "right" ? area.right - item.w : (viewportWidth - item.w) / 2;
+	const anchoredTop = sides.vertical === "top" ? area.top : sides.vertical === "bottom" ? area.bottom - item.h : (viewportHeight - item.h) / 2;
+	const left = pos.left ?? (pos.right === void 0 ? anchoredLeft : viewportWidth - pos.right - item.w);
+	const top = pos.top ?? (pos.bottom === void 0 ? anchoredTop : viewportHeight - pos.bottom - item.h);
+	return {
+		x: clampBetween(left, 0, viewportWidth - item.w),
+		y: clampBetween(top, 0, viewportHeight - item.h),
+		w: item.w,
+		h: item.h
+	};
+}
+/** Place an anchor's sticks side by side from its corner; returns their span and the width they reserve. */
+function placeSticks(list, anchor, context, pass) {
+	const { area, gap, viewportWidth, viewportHeight } = context;
+	const sides = anchorSides(anchor);
+	let reserve = 0;
+	let span = null;
+	for (const item of list) {
+		if (!isStickType(item.type)) continue;
+		const nudgeX = item.offset?.x ?? 0;
+		const nudgeY = item.offset?.y ?? 0;
+		const box = {
+			x: sides.horizontal === "left" ? area.left + reserve + nudgeX : sides.horizontal === "right" ? area.right - reserve - item.w - nudgeX : (viewportWidth - item.w) / 2 + nudgeX,
+			y: sides.vertical === "top" ? area.top + nudgeY : sides.vertical === "bottom" ? area.bottom - item.h - nudgeY : (viewportHeight - item.h) / 2 + nudgeY,
+			w: item.w,
+			h: item.h
+		};
+		pass.commit(item, box);
+		span = span === null ? { ...box } : unionBox(span, box);
+		reserve += item.w + gap;
+	}
+	return {
+		span,
+		reserve
+	};
+}
+//#endregion
+//#region src/overlay/listener-scope.ts
+/**
+* A group of window listeners removed together, so rebuilding the on-screen
+* controls doesn't leave window listeners behind for removed elements.
+* (Listeners on the controls themselves go away with the elements.)
+*/
+var ListenerScope = class {
+	constructor() {
+		_defineProperty(this, "removers", []);
+	}
+	/** Listen on `window` until {@link ListenerScope.dispose}. */
+	listenWindow(type, listener, options) {
+		window.addEventListener(type, listener, options);
+		this.removers.push(() => {
+			window.removeEventListener(type, listener);
+		});
+	}
+	/** Remove every listener added through this scope. */
+	dispose() {
+		for (const remove of this.removers.splice(0)) remove();
+	}
+};
+//#endregion
+//#region src/overlay/on-screen-keyboard.ts
+/**
+* The on-screen keyboard for text fields, usable by touch, mouse or gamepad
+* (the stick or d-pad moves between keys, A presses, B or Start closes).
+*/
+const LETTER_ROWS = [
+	"1234567890",
+	"qwertyuiop",
+	"asdfghjkl",
+	"zxcvbnm"
+];
+const STICK_THRESHOLD = .5;
+/** One key's markup. */
+function keyHtml(label, key, extraClass = "") {
+	return `<button class="k ${extraClass}" data-k="${key}">${label}</button>`;
+}
+const KEYBOARD_HTML = `<div class="kb-rows">${LETTER_ROWS.map((row) => `<div class="kb-row">${Array.from(row).map((character) => keyHtml(character, character)).join("")}</div>`).join("")}<div class="kb-row">${keyHtml("⇧", "shift", "wide")}${keyHtml("space", " ", "space")}${keyHtml("⌫", "back", "wide")}${keyHtml("↵", "enter", "wide")}${keyHtml("✕", "close", "wide")}</div></div>`;
+/** The direction the pads point, from the summed stick and d-pad. */
+function heldDirection(pads) {
+	let horizontal = 0;
+	let vertical = 0;
+	for (const pad of pads) {
+		horizontal += (pad.axes[0] ?? 0) - Number(pad.buttons[PAD_BUTTON.LEFT]?.pressed === true) + Number(pad.buttons[PAD_BUTTON.RIGHT]?.pressed === true);
+		vertical += (pad.axes[1] ?? 0) - Number(pad.buttons[PAD_BUTTON.UP]?.pressed === true) + Number(pad.buttons[PAD_BUTTON.DOWN]?.pressed === true);
+	}
+	if (Math.abs(horizontal) <= STICK_THRESHOLD && Math.abs(vertical) <= STICK_THRESHOLD) return null;
+	if (Math.abs(horizontal) > Math.abs(vertical)) return horizontal > 0 ? "right" : "left";
+	return vertical > 0 ? "down" : "up";
+}
+/** The on-screen keyboard (one at a time, inside the overlay's shadow root). */
+var OnScreenKeyboard = class {
+	constructor(root) {
+		_defineProperty(this, "root", void 0);
+		_defineProperty(this, "panel", null);
+		_defineProperty(this, "target", null);
+		_defineProperty(this, "keys", []);
+		_defineProperty(this, "focusedIndex", 0);
+		_defineProperty(this, "isShifted", false);
+		_defineProperty(this, "repeats", new RepeatingEdges());
+		_defineProperty(this, "presses", new RisingEdges());
+		this.root = root;
+	}
+	/** Whether the keyboard is showing. */
+	get isOpen() {
+		return this.panel !== null;
+	}
+	/** Open it for `target` (replacing any open keyboard). */
+	open(target) {
+		this.close();
+		this.target = target;
+		this.isShifted = false;
+		this.focusedIndex = 0;
+		const panel = document.createElement("div");
+		panel.className = "kb";
+		panel.innerHTML = KEYBOARD_HTML;
+		this.root.appendChild(panel);
+		this.panel = panel;
+		this.keys = findElements(panel, ".k", HTMLElement);
+		for (const key of this.keys) {
+			const press = (event) => {
+				event.preventDefault();
+				this.press(key.dataset["k"] ?? "");
+			};
+			key.addEventListener("mousedown", press);
+			key.addEventListener("touchstart", press, { passive: false });
+		}
+		this.highlightFocusedKey();
+	}
+	/** Close it. */
+	close() {
+		this.panel?.remove();
+		this.panel = null;
+		this.target = null;
+		this.keys = [];
+	}
+	/** Called every frame while open: gamepad navigation. */
+	pollGamepads() {
+		if (this.panel === null) return;
+		const pads = readGamepads();
+		const direction = heldDirection(pads);
+		if (this.repeats.fires("move", direction !== null) && direction !== null) this.moveFocus(direction);
+		if (this.presses.rose("act", isAnyPadButtonPressed(pads, PAD_BUTTON.A))) this.press(this.keys[this.focusedIndex]?.dataset["k"] ?? "");
+		const isClosing = isAnyPadButtonPressed(pads, PAD_BUTTON.B) || isAnyPadButtonPressed(pads, PAD_BUTTON.START);
+		if (this.presses.rose("close", isClosing)) this.close();
+	}
+	press(key) {
+		if (key === "close" || key === "enter") {
+			this.close();
+			return;
+		}
+		if (key === "shift") {
+			this.isShifted = !this.isShifted;
+			return;
+		}
+		const target = this.target;
+		if (target === null || key === "") return;
+		target.value = key === "back" ? target.value.slice(0, -1) : target.value + (this.isShifted ? key.toUpperCase() : key);
+		target.dispatchEvent(new Event("input", { bubbles: true }));
+	}
+	moveFocus(direction) {
+		const next = findNearestInDirection(this.keys.map(rectOf), this.focusedIndex, direction);
+		if (next >= 0) {
+			this.focusedIndex = next;
+			this.highlightFocusedKey();
+		}
+	}
+	highlightFocusedKey() {
+		this.keys.forEach((key, index) => key.classList.toggle("kfocus", index === this.focusedIndex));
+	}
+};
+//#endregion
+//#region src/overlay/styles.ts
+/**
+* The overlay's styles (inside its shadow root, so games can't restyle it).
+*/
+/** The hub accent colour. */
+const ACCENT_COLOR = "#ff5f3b";
+/** The overlay stylesheet. */
+const OVERLAY_CSS = `
+:host { all: initial; }
+.layer { position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; font-family: 'Space Mono', ui-monospace, monospace; }
+.vc { position: fixed; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none;
+      display: grid; place-items: center; color: #fff; }
+.vc-button, .vc-tap { background: var(--vc-bg, rgba(20,22,30,.55)); border: 2px solid var(--vc-color);
+      font: 700 15px/1 monospace; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
+.vc-button.pressed, .vc-tap.pressed { background: var(--vc-color); color: #0d0f14; }
+.vc-transparent { background: transparent; border-color: transparent; }
+.vc-joystick .base, .vc-dpad .base { position: absolute; inset: 0; background: var(--vc-bg, rgba(20,22,30,.4)); border: 2px solid var(--vc-color); }
+.vc-joystick .knob, .vc-dpad .knob { position: absolute; width: 44%; height: 44%; border-radius: 50%; background: var(--vc-color); opacity: .9; }
+:host(.editing) .vc { outline: 2px dashed #38d6ff; cursor: move; }
+/* While editing the layout the panel shrinks to a small bar at the top so the
+   controls underneath can be dragged. */
+.edit-bar { display: none; }
+:host(.editing) .panel { background: transparent; pointer-events: none; place-items: start center; }
+:host(.editing) .panel-card { pointer-events: auto; width: auto; margin-top: max(10px, env(safe-area-inset-top, 0px)); padding: 8px 10px; }
+:host(.editing) .panel-card > :not(.edit-bar) { display: none; }
+:host(.editing) .edit-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; }
+:host(.editing) .edit-bar .btn { margin: 0; }
+.safe-probe { position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
+  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
+.ring { position: fixed; pointer-events: none; z-index: 2147483200; border: 3px solid ${ACCENT_COLOR}; border-radius: 8px;
+        box-shadow: 0 0 0 2px rgba(0,0,0,.4); transition: left .08s, top .08s, width .08s, height .08s; }
+.ring[hidden] { display: none; }
+.kb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483400; background: #0d0f14ee; padding: 10px;
+      pointer-events: auto; border-top: 1px solid #2a3142; }
+.kb-rows { display: flex; flex-direction: column; gap: 6px; max-width: 760px; margin: 0 auto; }
+.kb-row { display: flex; gap: 6px; justify-content: center; }
+.kb .k { flex: 1; min-width: 0; max-width: 64px; height: 46px; border-radius: 8px; border: 1px solid #2a3142;
+         background: #11141c; color: #e8e6df; font: 16px monospace; cursor: pointer; }
+.kb .k.space { max-width: 280px; } .kb .k.wide { max-width: 90px; }
+.kb .k.kfocus { border-color: ${ACCENT_COLOR}; box-shadow: 0 0 0 2px ${ACCENT_COLOR}; }
+.panel { position: fixed; inset: 0; z-index: 2147483500; display: grid; place-items: center; background: rgba(0,0,0,.6); pointer-events: auto;
+         font-family: 'Space Mono', ui-monospace, monospace; }
+.panel-card { background: #0d0f14; color: #e8e6df; border: 1px solid #2a3142; border-radius: 12px; padding: 18px;
+         width: min(420px, 92vw); max-height: 86vh; overflow: auto; box-shadow: 0 12px 44px rgba(0,0,0,.6); }
+.panel-card h3 { margin: 0 0 12px; } .panel-card h4 { margin: 14px 0 6px; color: #6f7787; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; }
+.cr { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid #1a1f2b; }
+.cr span { flex: 1; } .cr .bind { color: #4ade80; } .cr .rb { background: transparent; color: ${ACCENT_COLOR}; border: 1px solid #2a3142; border-radius: 6px; padding: 3px 8px; cursor: pointer; font: 11px monospace; }
+.chk { display: flex; gap: 8px; align-items: center; font-size: 13px; margin-bottom: 10px; }
+.btn { background: ${ACCENT_COLOR}; color: #0d0f14; border: 0; border-radius: 8px; padding: 8px 12px; font: 13px monospace; cursor: pointer; margin: 4px 4px 0 0; }
+.btn.editlayout, .btn.reset { background: transparent; color: #e8e6df; border: 1px solid #2a3142; }
+.panel-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
+.hint { color: #38d6ff; font-size: 12px; min-height: 1em; }
+`;
+//#endregion
+//#region src/overlay/virtual-controls.ts
+/** A dpad snaps past this deflection. */
+const DPAD_THRESHOLD = .4;
+const RADIUS_BY_SHAPE = {
+	circle: "50%",
+	pill: "999px",
+	square: "0",
+	round: "16px"
+};
+/** The first touch of a touch event. */
+function firstTouch(event) {
+	return event.changedTouches[0];
+}
+function bindButton(id, element, environment) {
+	const { callbacks } = environment;
+	const isTapRegion = element.classList.contains("vc-transparent");
+	const press = (event) => {
+		if (environment.isEditing()) return;
+		event.preventDefault();
+		element.classList.add("pressed");
+		callbacks.onButtonDown(id);
+		if (isTapRegion) callbacks.onTap();
+	};
+	const release = (event) => {
+		event.preventDefault();
+		element.classList.remove("pressed");
+		callbacks.onButtonUp(id);
+	};
+	element.addEventListener("touchstart", press, { passive: false });
+	element.addEventListener("touchend", release, { passive: false });
+	element.addEventListener("touchcancel", release, { passive: false });
+	element.addEventListener("mousedown", press);
+	environment.scope.listenWindow("mouseup", release);
+}
+function bindStick(id, wrapper, knob, definition, environment) {
+	const isDpad = definition.type === "dpad";
+	const axisMode = definition.axis ?? "both";
+	const { callbacks } = environment;
+	let activeTouchId = -1;
+	let centreX = 0;
+	let centreY = 0;
+	let travelX = 1;
+	let travelY = 1;
+	const measure = () => {
+		const bounds = wrapper.getBoundingClientRect();
+		centreX = bounds.left + bounds.width / 2;
+		centreY = bounds.top + bounds.height / 2;
+		const knobRadius = knob.getBoundingClientRect().width / 2 || Math.min(bounds.width, bounds.height) * .25;
+		travelX = Math.max(1, bounds.width / 2 - knobRadius);
+		travelY = Math.max(1, bounds.height / 2 - knobRadius);
+	};
+	const moveTo = (pointerX, pointerY) => {
+		let dx = axisMode === "y" ? 0 : pointerX - centreX;
+		let dy = axisMode === "x" ? 0 : pointerY - centreY;
+		if (axisMode === "both") {
+			const limit = Math.min(travelX, travelY);
+			const distance = Math.hypot(dx, dy);
+			if (distance > limit) {
+				dx = dx * limit / distance;
+				dy = dy * limit / distance;
+			}
+		} else {
+			dx = Math.max(-travelX, Math.min(travelX, dx));
+			dy = Math.max(-travelY, Math.min(travelY, dy));
+		}
+		let outX = dx / travelX;
+		let outY = dy / travelY;
+		if (isDpad) {
+			outX = Math.abs(outX) > DPAD_THRESHOLD ? Math.sign(outX) : 0;
+			outY = Math.abs(outY) > DPAD_THRESHOLD ? Math.sign(outY) : 0;
+		}
+		knob.style.transform = `translate(${String(dx)}px, ${String(dy)}px)`;
+		callbacks.onStick(id, outX, outY);
+	};
+	const release = () => {
+		activeTouchId = -1;
+		knob.style.transform = "translate(0,0)";
+		callbacks.onStick(id, 0, 0);
+	};
+	wrapper.addEventListener("touchstart", (event) => {
+		const touch = firstTouch(event);
+		if (environment.isEditing() || touch === void 0) return;
+		event.preventDefault();
+		measure();
+		activeTouchId = touch.identifier;
+		moveTo(touch.clientX, touch.clientY);
+	}, { passive: false });
+	wrapper.addEventListener("touchmove", (event) => {
+		event.preventDefault();
+		for (const touch of event.changedTouches) if (touch.identifier === activeTouchId) moveTo(touch.clientX, touch.clientY);
+	}, { passive: false });
+	wrapper.addEventListener("touchend", release, { passive: false });
+	wrapper.addEventListener("touchcancel", release, { passive: false });
+	let isMouseHeld = false;
+	wrapper.addEventListener("mousedown", (event) => {
+		if (environment.isEditing()) return;
+		measure();
+		isMouseHeld = true;
+		moveTo(event.clientX, event.clientY);
+	});
+	environment.scope.listenWindow("mousemove", (event) => {
+		if (isMouseHeld) moveTo(event.clientX, event.clientY);
+	});
+	environment.scope.listenWindow("mouseup", () => {
+		if (isMouseHeld) {
+			isMouseHeld = false;
+			release();
+		}
+	});
+}
+/** Drag-to-move while editing: the control keeps its grab point under the finger and stays fully on-screen. */
+function bindEditDrag(id, element, environment) {
+	let isDragging = false;
+	let grabX = 0;
+	let grabY = 0;
+	let droppedSpot = null;
+	const start = (pointerX, pointerY) => {
+		if (!environment.isEditing()) return;
+		isDragging = true;
+		const bounds = element.getBoundingClientRect();
+		grabX = pointerX - bounds.left;
+		grabY = pointerY - bounds.top;
+		droppedSpot = null;
+	};
+	const move = (pointerX, pointerY) => {
+		if (!isDragging) return;
+		const viewportWidth = window.innerWidth;
+		const viewportHeight = window.innerHeight;
+		const left = Math.max(0, Math.min(viewportWidth - element.offsetWidth, pointerX - grabX));
+		const top = Math.max(0, Math.min(viewportHeight - element.offsetHeight, pointerY - grabY));
+		placeAt(element, left, top);
+		droppedSpot = {
+			x: left / viewportWidth * 100,
+			y: top / viewportHeight * 100
+		};
+	};
+	const end = () => {
+		if (!isDragging) return;
+		isDragging = false;
+		if (droppedSpot !== null) environment.callbacks.onDragged(id, droppedSpot);
+	};
+	element.addEventListener("mousedown", (event) => {
+		start(event.clientX, event.clientY);
+	});
+	element.addEventListener("touchstart", (event) => {
+		const touch = firstTouch(event);
+		if (touch !== void 0) start(touch.clientX, touch.clientY);
+	}, { passive: true });
+	environment.scope.listenWindow("mousemove", (event) => {
+		move(event.clientX, event.clientY);
+	});
+	environment.scope.listenWindow("touchmove", (event) => {
+		const touch = firstTouch(event);
+		if (isDragging && touch !== void 0) move(touch.clientX, touch.clientY);
+	});
+	environment.scope.listenWindow("mouseup", end);
+	environment.scope.listenWindow("touchend", end);
+}
+/** Build one on-screen control element, wired up. */
+function createVirtualControl(definition, environment) {
+	const isStick = isStickType(definition.type);
+	const { w: width, h: height } = declaredSize(definition);
+	const wrapper = document.createElement("div");
+	wrapper.className = `vc vc-${definition.type}`;
+	wrapper.dataset["controlId"] = definition.id;
+	Reflect.set(wrapper, "__id", definition.id);
+	wrapper.style.width = `${String(width)}px`;
+	wrapper.style.height = `${String(height)}px`;
+	if (definition.opacity !== void 0) wrapper.style.opacity = String(definition.opacity);
+	wrapper.style.setProperty("--vc-color", definition.color ?? "#ff5f3b");
+	if (definition.bg !== void 0) wrapper.style.setProperty("--vc-bg", definition.bg);
+	if (definition.text !== void 0) wrapper.style.color = definition.text;
+	const radius = RADIUS_BY_SHAPE[definition.shape ?? (isStick ? "circle" : "round")];
+	wrapper.style.borderRadius = radius;
+	if (isStick) {
+		wrapper.innerHTML = "<div class=\"base\"></div><div class=\"knob\"></div>";
+		requireElement(wrapper, ".base", HTMLElement).style.borderRadius = radius;
+		const knob = requireElement(wrapper, ".knob", HTMLElement);
+		const isSingleAxis = definition.axis === "x" || definition.axis === "y";
+		const knobDiameter = Math.round(Math.min(width, height) * (isSingleAxis ? .92 : .5));
+		knob.style.width = `${String(knobDiameter)}px`;
+		knob.style.height = `${String(knobDiameter)}px`;
+		bindStick(definition.id, wrapper, knob, definition, environment);
+	} else {
+		wrapper.innerHTML = definition.html ?? `<span>${definition.label ?? ""}</span>`;
+		if (definition.type === "tap") wrapper.classList.add("vc-transparent");
+		bindButton(definition.id, wrapper, environment);
+	}
+	bindEditDrag(definition.id, wrapper, environment);
+	return wrapper;
+}
+//#endregion
+//#region src/overlay/overlay.ts
+/** The window event the race HUD fires with the bands it covers. */
+const RACE_HUD_EVENT = "hub:race-hud";
+/** Wait for the browser to settle after a rotation before re-laying out. */
+const ORIENTATION_SETTLE_MS = 200;
+/** A number field of an event detail, or 0. */
+function numberField(detail, key) {
+	const field = Number(readField(detail, key));
+	return Number.isFinite(field) ? field : 0;
+}
+/** The overlay (one per input system). */
+var Overlay = class {
+	constructor() {
+		_defineProperty(this, "shadowHost", void 0);
+		_defineProperty(this, "root", void 0);
+		_defineProperty(this, "controlsLayer", void 0);
+		_defineProperty(this, "ring", void 0);
+		_defineProperty(this, "keyboard", void 0);
+		_defineProperty(this, "controlsPanel", void 0);
+		_defineProperty(this, "controls", []);
+		_defineProperty(this, "controlScope", new ListenerScope());
+		_defineProperty(this, "overrides", {});
+		_defineProperty(this, "gameInsets", {});
+		_defineProperty(this, "raceHudBands", {
+			top: 0,
+			bottom: 0
+		});
+		_defineProperty(this, "safeAreaProbe", null);
+		this.shadowHost = document.createElement("div");
+		this.shadowHost.id = "hub-input-root";
+		this.root = this.shadowHost.attachShadow({ mode: "open" });
+		this.root.innerHTML = `<style>${OVERLAY_CSS}</style>
+      <div class="layer controls"></div>
+      <div class="ring" hidden></div>`;
+		this.controlsLayer = requireElement(this.root, ".controls", HTMLDivElement);
+		this.ring = requireElement(this.root, ".ring", HTMLDivElement);
+		this.keyboard = new OnScreenKeyboard(this.root);
+		this.controlsPanel = new ControlsPanel(this.root, this.shadowHost);
+		(pageBody() ?? document.documentElement).appendChild(this.shadowHost);
+		window.addEventListener("resize", () => {
+			this.layout();
+		});
+		window.addEventListener("orientationchange", () => {
+			setTimeout(() => {
+				this.layout();
+			}, ORIENTATION_SETTLE_MS);
+		});
+		window.addEventListener(RACE_HUD_EVENT, (event) => {
+			const detail = event instanceof CustomEvent ? event.detail : null;
+			const isVisible = readField(detail, "visible") === true;
+			const bands = {
+				top: isVisible ? numberField(detail, "top") : 0,
+				bottom: isVisible ? numberField(detail, "bottom") : 0
+			};
+			if (bands.top !== this.raceHudBands.top || bands.bottom !== this.raceHudBands.bottom) {
+				this.raceHudBands = bands;
+				this.layout();
+			}
+		});
+	}
+	/** (Re)build every on-screen control from the config and the player's overrides. */
+	build(config, overrides, callbacks) {
+		this.overrides = overrides;
+		this.controlScope.dispose();
+		this.controlScope = new ListenerScope();
+		this.controlsLayer.innerHTML = "";
+		this.controls = [];
+		const environment = {
+			callbacks,
+			scope: this.controlScope,
+			isEditing: () => this.controlsPanel.isEditing
+		};
+		for (const [group, groupDefinition] of Object.entries(config.groups)) for (const declared of groupDefinition.virtual ?? []) {
+			const definition = {
+				...declared,
+				...overrides.virtual?.[declared.id]
+			};
+			const element = createVirtualControl(definition, environment);
+			Reflect.set(element, "__group", group);
+			this.controlsLayer.appendChild(element);
+			this.controls.push({
+				definition,
+				group,
+				element
+			});
+		}
+		this.layout();
+	}
+	/** Replace a button or tap control's content at runtime. Listeners live on the wrapper, so they survive. */
+	setControlHtml(id, html) {
+		const control = this.controls.find((candidate) => candidate.definition.id === id);
+		if (control !== void 0 && (control.definition.type === "button" || control.definition.type === "tap")) control.element.innerHTML = html;
+	}
+	/** Show controls of the enabled groups (or of every group, with `null`, while editing). */
+	setVirtualVisible(isVisible, enabledGroups) {
+		for (const control of this.controls) {
+			const isShown = isVisible && (enabledGroups === null || enabledGroups.has(control.group));
+			control.element.style.display = isShown ? "" : "none";
+		}
+	}
+	/** Game insets (px) auto-placed controls keep clear of, e.g. a top HUD bar. Merged with earlier calls. */
+	setInsets(insets) {
+		this.gameInsets = {
+			...this.gameInsets,
+			...insets
+		};
+		this.layout();
+	}
+	/** Re-place every control for the current viewport, keeping the player's dragged spots. */
+	layout() {
+		if (this.controls.length === 0) return;
+		const insets = {
+			top: (this.gameInsets.top ?? 0) + this.raceHudBands.top,
+			right: this.gameInsets.right ?? 0,
+			bottom: (this.gameInsets.bottom ?? 0) + this.raceHudBands.bottom,
+			left: this.gameInsets.left ?? 0
+		};
+		const boxes = layoutControls(this.controls.map(({ definition }) => {
+			const dragged = this.overrides.virtual?.[definition.id];
+			return {
+				id: definition.id,
+				type: definition.type,
+				place: definition.place,
+				...controlSize(definition),
+				pos: definition.pos,
+				offset: definition.offset,
+				override: dragged?.x !== void 0 && dragged.y !== void 0 ? {
+					x: dragged.x,
+					y: dragged.y
+				} : void 0
+			};
+		}), window.innerWidth, window.innerHeight, {
+			insets,
+			safe: this.readSafeArea()
+		});
+		for (const control of this.controls) {
+			const box = boxes[control.definition.id];
+			if (box !== void 0) placeAt(control.element, box.x, box.y);
+		}
+	}
+	/** Ring the highlighted element. */
+	showHighlight(bounds) {
+		this.ring.hidden = false;
+		this.ring.style.left = `${String(bounds.x)}px`;
+		this.ring.style.top = `${String(bounds.y)}px`;
+		this.ring.style.width = `${String(bounds.width)}px`;
+		this.ring.style.height = `${String(bounds.height)}px`;
+	}
+	/** Remove the ring. */
+	hideHighlight() {
+		this.ring.hidden = true;
+	}
+	/** Open the on-screen keyboard for a text field. */
+	openKeyboard(target) {
+		this.keyboard.open(target);
+	}
+	/** Whether the on-screen keyboard is showing. */
+	get isKeyboardOpen() {
+		return this.keyboard.isOpen;
+	}
+	/** Open (or close) the Controls screen. */
+	toggleControls(config, host) {
+		this.controlsPanel.toggle(config, host);
+	}
+	/** Per-frame work: gamepad navigation of the keyboard. */
+	afterFrame() {
+		this.keyboard.pollGamepads();
+	}
+	/** The device safe-area insets (notch, home bar), via a probe element. */
+	readSafeArea() {
+		if (this.safeAreaProbe === null) {
+			this.safeAreaProbe = document.createElement("div");
+			this.safeAreaProbe.className = "safe-probe";
+			this.root.appendChild(this.safeAreaProbe);
+		}
+		const style = getComputedStyle(this.safeAreaProbe);
+		const pixels = (value) => parseFloat(value) || 0;
+		return {
+			top: pixels(style.paddingTop),
+			right: pixels(style.paddingRight),
+			bottom: pixels(style.paddingBottom),
+			left: pixels(style.paddingLeft)
+		};
+	}
+};
+//#endregion
+//#region src/input/on-screen-controls.ts
+/**
+* The input system's side of the overlay: creating it on demand, building
+* the on-screen controls, and deciding when they show (the player's choice,
+* else the game's default, else on touch devices without a gamepad; editing
+* the layout shows them all).
+*/
+/** Whether this page counts as a touch device. */
+function detectTouchDevice() {
+	return typeof navigator !== "undefined" && (navigator.maxTouchPoints > 0 || "ontouchstart" in window);
+}
+/** On-screen controls write into the device state; touching one makes touch the active source. */
+function feedDeviceState(devices, reactions) {
+	return {
+		onButtonDown: (id) => {
+			devices.pressedVirtualButtons.add(id);
+			reactions.onTouch();
+		},
+		onButtonUp: (id) => {
+			devices.pressedVirtualButtons.delete(id);
+		},
+		onStick: (id, outX, outY) => {
+			devices.sticks.set(id, {
+				outX,
+				outY
+			});
+			reactions.onTouch();
+		},
+		onTap: () => {
+			devices.pulse("tap");
+			reactions.onTouch();
+		},
+		onDragged: reactions.onDragged
+	};
+}
+/** The overlay and the on-screen controls' visibility. */
+var OnScreenControls = class {
+	constructor(enabledGroups) {
+		_defineProperty(this, "isTouchDevice", detectTouchDevice());
+		_defineProperty(
+			this,
+			/** Whether a gamepad is connected (controls hide by default then). */
+			"isGamepadConnected",
+			false
+		);
+		_defineProperty(
+			this,
+			/** The player's explicit show/hide choice, or `null`. */
+			"playerChoice",
+			null
+		);
+		_defineProperty(this, "overlayInstance", null);
+		_defineProperty(this, "gameDefault", null);
+		_defineProperty(this, "isEditing", false);
+		_defineProperty(this, "enabledGroups", void 0);
+		this.enabledGroups = enabledGroups;
+	}
+	/** The overlay if it exists yet. */
+	get existingOverlay() {
+		return this.overlayInstance;
+	}
+	/** The overlay, created on first use. */
+	overlay() {
+		this.overlayInstance ?? (this.overlayInstance = new Overlay());
+		return this.overlayInstance;
+	}
+	/** What the "Show on-screen controls" toggle reflects (excludes the editing force). */
+	get isShowing() {
+		return this.playerChoice ?? this.gameDefault ?? (this.isTouchDevice && !this.isGamepadConnected);
+	}
+	/** Set the game's default visibility (`null` = automatic). */
+	setGameDefault(isVisible) {
+		this.gameDefault = isVisible;
+		this.sync();
+	}
+	/** Force every control visible while the player edits the layout. */
+	setEditing(isEditing) {
+		this.isEditing = isEditing;
+		this.sync();
+	}
+	/** (Re)build the controls from the config and overrides. */
+	build(config, overrides, callbacks) {
+		this.overlay().build(config, overrides, callbacks);
+		this.sync();
+	}
+	/** Apply the visibility rules to the built controls. */
+	sync() {
+		if (this.overlayInstance === null) return;
+		if (this.isEditing) this.overlayInstance.setVirtualVisible(true, null);
+		else this.overlayInstance.setVirtualVisible(this.isShowing, this.enabledGroups());
+	}
+};
+//#endregion
+//#region src/input/player-remaps.ts
+/** A readable label of an input's binding (`w/ArrowUp · Pad 0`). */
+function describeBinding(definition) {
+	const parts = [];
+	if (definition?.keys !== void 0 && definition.keys.length > 0) parts.push(definition.keys.join("/"));
+	if (definition?.gamepad?.button !== void 0) parts.push(`Pad ${String(definition.gamepad.button)}`);
+	if (definition?.gamepad?.axis !== void 0) parts.push(`Axis ${String(definition.gamepad.axis[0])}${definition.gamepad.axis[1]}`);
+	return parts.length > 0 ? parts.join(" · ") : "—";
+}
+/** The player's overrides, saved on every change. */
+var PlayerRemaps = class {
+	constructor(host) {
+		_defineProperty(this, "host", void 0);
+		_defineProperty(this, "saved", void 0);
+		this.host = host;
+		this.saved = host.loadOverrides() ?? {};
+	}
+	/** The overrides as they stand. */
+	get overrides() {
+		return this.saved;
+	}
+	/** A declared input with the player's rebind applied. */
+	withBinding(name, declared) {
+		return {
+			...declared,
+			...this.saved.bindings?.[name]
+		};
+	}
+	/** Rebind an input. */
+	rebind(inputName, patch) {
+		const bindings = this.saved.bindings ?? {};
+		bindings[inputName] = {
+			...bindings[inputName],
+			...patch
+		};
+		this.saved.bindings = bindings;
+		this.persist();
+	}
+	/** Move or restyle an on-screen control. */
+	customiseControl(id, patch) {
+		const virtual = this.saved.virtual ?? {};
+		virtual[id] = {
+			...virtual[id],
+			...patch
+		};
+		this.saved.virtual = virtual;
+		this.persist();
+	}
+	/** Record the player's show/hide choice. */
+	setShowVirtual(isVisible) {
+		this.saved.showVirtual = isVisible;
+		this.persist();
+	}
+	/** Forget everything. */
+	reset() {
+		this.saved = {};
+		this.persist();
+	}
+	persist() {
+		try {
+			this.host.saveOverrides(this.saved);
+		} catch {}
+	}
+};
+//#endregion
+//#region src/input/zero-config.ts
+/** Synthetic keys stay pressed past half deflection. */
+const SYNTH_DEADZONE = .5;
+const FOCUS_CLASS = "gp-focus";
+const FOCUS_STYLE_ID = "gp-focus-style";
+const FOCUS_CSS = ".gp-focus{outline:3px solid #ff5f3b !important;outline-offset:2px;border-radius:4px;}";
+/** `KeyboardEvent.code` → its `key` and legacy `keyCode`. */
+const KEY_FOR_CODE = /* @__PURE__ */ new Map([
+	["ArrowUp", ["ArrowUp", 38]],
+	["ArrowDown", ["ArrowDown", 40]],
+	["ArrowLeft", ["ArrowLeft", 37]],
+	["ArrowRight", ["ArrowRight", 39]],
+	["Space", [" ", 32]],
+	["Enter", ["Enter", 13]],
+	["Escape", ["Escape", 27]],
+	["Tab", ["Tab", 9]],
+	["Backspace", ["Backspace", 8]],
+	["ShiftLeft", ["Shift", 16]],
+	["ControlLeft", ["Control", 17]],
+	["AltLeft", ["Alt", 18]]
+]);
+for (let code = 65; code <= 90; code += 1) {
+	const letter = String.fromCharCode(code);
+	KEY_FOR_CODE.set(`Key${letter}`, [letter.toLowerCase(), code]);
+}
+for (let digit = 0; digit <= 9; digit += 1) KEY_FOR_CODE.set(`Digit${String(digit)}`, [String(digit), 48 + digit]);
+/** Dispatch a synthetic key event (with the legacy `keyCode`/`which` old games read) on the focused element. */
+function dispatchKey(type, code) {
+	const [key, keyCode] = KEY_FOR_CODE.get(code) ?? [code, 0];
+	const active = document.activeElement;
+	const target = active !== null && active !== document.body ? active : document.body;
+	const event = new KeyboardEvent(type, {
+		key,
+		code,
+		bubbles: true,
+		cancelable: true
+	});
+	Object.defineProperty(event, "keyCode", { get: () => keyCode });
+	Object.defineProperty(event, "which", { get: () => keyCode });
+	target.dispatchEvent(event);
+}
+/** Add the highlight style to the page once. */
+function ensureFocusStyle() {
+	if (document.getElementById(FOCUS_STYLE_ID) !== null) return;
+	const style = document.createElement("style");
+	style.id = FOCUS_STYLE_ID;
+	style.textContent = FOCUS_CSS;
+	document.head.appendChild(style);
+}
+/** The keys each pad holds down, by pad index. */
+const heldCodes = /* @__PURE__ */ new Map();
+function releaseAllKeys() {
+	for (const [padIndex, codes] of heldCodes) {
+		for (const code of codes) dispatchKey("keyup", code);
+		heldCodes.set(padIndex, /* @__PURE__ */ new Set());
+	}
+}
+/** In a game: press and release the mapped keys to match each pad. */
+function synthesizeKeys(frame) {
+	if (isTypingTarget(document.activeElement)) {
+		releaseAllKeys();
+		return;
+	}
+	frame.gamepads.forEach((pad, padIndex) => {
+		const map = controlMapFor(frame.controls, padIndex);
+		const directions = padDirections(pad, SYNTH_DEADZONE);
+		const wanted = /* @__PURE__ */ new Set();
+		for (const direction of [
+			"up",
+			"down",
+			"left",
+			"right"
+		]) if (directions[direction]) wanted.add(map[direction]);
+		for (const [buttonIndex, code] of map.buttons) if (isPadButtonPressed(pad, buttonIndex)) wanted.add(code);
+		const held = heldCodes.get(padIndex) ?? /* @__PURE__ */ new Set();
+		wanted.forEach((code) => {
+			if (!held.has(code)) dispatchKey("keydown", code);
+		});
+		held.forEach((code) => {
+			if (!wanted.has(code)) dispatchKey("keyup", code);
+		});
+		heldCodes.set(padIndex, wanted);
+	});
+}
+/** The visible game tiles on the catalog page. */
+function visibleTiles() {
+	return [...document.querySelectorAll(".grid .card")].filter((card) => card.offsetParent !== null);
+}
+function highlightTile(tiles, index) {
+	tiles.forEach((tile) => {
+		tile.classList.remove(FOCUS_CLASS);
+	});
+	const tile = tiles[index];
+	tile?.classList.add(FOCUS_CLASS);
+	tile?.scrollIntoView({
+		block: "nearest",
+		inline: "nearest"
+	});
+}
+/** On the catalog page: move the highlight across the tiles; A or Start opens one. */
+function navigateCatalog(frame) {
+	const held = anyPadDirections(frame.gamepads, SYNTH_DEADZONE);
+	const isAccepting = isAnyPadButtonPressed(frame.gamepads, PAD_BUTTON.A) || isAnyPadButtonPressed(frame.gamepads, PAD_BUTTON.START);
+	const fired = {
+		up: frame.navEdges.fires("lu", held.up),
+		down: frame.navEdges.fires("ld", held.down),
+		left: frame.navEdges.fires("ll", held.left),
+		right: frame.navEdges.fires("lr", held.right)
+	};
+	const shouldAccept = frame.navEdges.fires("la", isAccepting) && isAccepting;
+	const tiles = visibleTiles();
+	if (tiles.length === 0) return;
+	const focused = tiles.findIndex((tile) => tile.classList.contains(FOCUS_CLASS));
+	const focusedTile = tiles[focused];
+	if (focusedTile === void 0) {
+		highlightTile(tiles, 0);
+		return;
+	}
+	if (shouldAccept) {
+		const href = focusedTile.getAttribute("href");
+		if (href === null) focusedTile.click();
+		else location.href = href;
+		return;
+	}
+	const direction = [
+		"up",
+		"down",
+		"left",
+		"right"
+	].find((candidate) => fired[candidate]);
+	if (direction === void 0) return;
+	const next = findNearestInDirection(tiles.map(rectOf), focused, direction);
+	if (next >= 0) highlightTile(tiles, next);
+}
+/** One frame of the zero-config fallback. */
+function runZeroConfigFrame(frame) {
+	if (frame.gamepads.length === 0) return;
+	ensureFocusStyle();
+	if (frame.slug === null) navigateCatalog(frame);
+	else synthesizeKeys(frame);
+}
+//#endregion
+//#region src/input/input-system.ts
+/** The window flag that tells every copy's zero-config fallback to stand down. */
+const INPUT_ACTIVE_FLAG = "__HUB_INPUT_ACTIVE__";
+/** The page's input system. */
+var InputSystem = class {
+	constructor(host, options = {}) {
+		_defineProperty(this, "host", void 0);
+		_defineProperty(this, "options", void 0);
+		_defineProperty(this, "config", null);
+		_defineProperty(this, "remaps", void 0);
+		_defineProperty(this, "registry", new InputRegistry());
+		_defineProperty(this, "devices", new DeviceState());
+		_defineProperty(this, "controls", new OnScreenControls(() => this.registry.enabledGroupNames()));
+		_defineProperty(this, "navigator", new Navigator());
+		_defineProperty(this, "repeats", new RepeatingEdges());
+		_defineProperty(this, "presses", new RisingEdges());
+		_defineProperty(this, "events", new InputEventHub());
+		_defineProperty(this, "menu", null);
+		_defineProperty(this, "legacyControls", parseLegacyControls(null));
+		_defineProperty(this, "legacyControlsSource", null);
+		_defineProperty(this, "activeSource", "keyboard");
+		_defineProperty(this, "isPageOwner", void 0);
+		_defineProperty(this, "pageOwner", null);
+		this.host = host;
+		this.options = options;
+		this.isPageOwner = options.isPageOwner ?? true;
+		this.remaps = new PlayerRemaps(host);
+		this.controls.playerChoice = this.remaps.overrides.showVirtual ?? null;
+		this.devices.listen({
+			onMouseActivity: () => {
+				this.setSource("mouse");
+			},
+			onGamepadConnection: (isConnected) => {
+				var _this$controls;
+				(_this$controls = this.controls).isGamepadConnected || (_this$controls.isGamepadConnected = isConnected);
+				this.controls.sync();
+			},
+			shouldCancelScrollKeys: () => this.config !== null
+		});
+		if (typeof requestAnimationFrame === "function") requestAnimationFrame(() => {
+			this.tick();
+		});
+	}
+	/** Whether this page counts as a touch device. */
+	get touchDevice() {
+		return this.controls.isTouchDevice;
+	}
+	/** Declare the game's inputs (replacing any earlier declaration). The game owns input from now on. */
+	define(config) {
+		if (!this.isPageOwner) {
+			const previous = this.options.claimPage?.(this) ?? null;
+			this.isPageOwner = true;
+			previous?.yieldPageTo?.(this);
+		}
+		this.config = config;
+		this.registry.declare(config, (name, declared) => this.remaps.withBinding(name, declared));
+		this.navigator.clearGroups();
+		for (const [group, groupDefinition] of Object.entries(config.groups)) if (groupDefinition.navigable !== void 0) this.navigator.addGroup(group, groupDefinition.navigable);
+		this.buildControls();
+		Reflect.set(window, INPUT_ACTIVE_FLAG, true);
+	}
+	/** True once the game has declared its inputs. */
+	get isDefined() {
+		return this.pageOwner?.isDefined ?? this.config !== null;
+	}
+	/** Turn a group on. Held keys don't fire a phantom `down` (the pause key held as play resumes). */
+	enable(group) {
+		this.registry.setGroupEnabled(group, true, this.devices, this.activeSource);
+		this.controls.sync();
+		this.navigator.refreshGroup(group, this.navigatorContext());
+	}
+	/** Turn a group off (its inputs read 0). */
+	disable(group) {
+		this.registry.setGroupEnabled(group, false, this.devices, this.activeSource);
+		this.controls.sync();
+		this.navigator.blurGroup(group, this.controls.existingOverlay);
+	}
+	/** Whether a group is on. */
+	isEnabled(group) {
+		return this.registry.isEnabled(group);
+	}
+	/** An input's value, 0..1. */
+	value(name) {
+		return this.registry.value(name);
+	}
+	/** An input's full reading this frame. */
+	get(name) {
+		return this.registry.reading(name);
+	}
+	/** Whether an input went down this frame. */
+	down(name) {
+		return this.registry.wentDown(name);
+	}
+	/** Whether an input came up this frame. */
+	up(name) {
+		return this.registry.wentUp(name);
+	}
+	/** Whether an input is held (≥ 0.5). */
+	pressed(name) {
+		return this.registry.isPressed(name);
+	}
+	/** A named axis, or an ad-hoc `axis(negative, positive)` pair, as -1..1. */
+	axis(name, positive) {
+		return this.registry.axis(name, positive);
+	}
+	/** A named axis pair as a vector clamped to the unit circle. */
+	vector(name) {
+		return this.registry.vector(name);
+	}
+	/** The device the player is using right now. */
+	get source() {
+		return this.activeSource;
+	}
+	/** Subscribe to an input event. Returns the unsubscribe function. */
+	on(event, listener) {
+		return this.events.on(event, listener);
+	}
+	/** Update a button's content at runtime (e.g. an SVG reflecting game state). */
+	setVirtualHtml(id, html) {
+		this.controls.existingOverlay?.setControlHtml(id, html);
+	}
+	/** The player's show/hide choice for the on-screen controls (persisted). */
+	showVirtual(isVisible) {
+		this.controls.playerChoice = isVisible;
+		this.remaps.setShowVirtual(isVisible);
+		this.controls.sync();
+	}
+	/** Flip the player's show/hide choice. */
+	toggleVirtual() {
+		this.showVirtual(!this.showingVirtual);
+	}
+	/** Force the controls visible for layout editing, without changing the player's choice. */
+	setVirtualEditing(isEditing) {
+		this.controls.setEditing(isEditing);
+	}
+	/** This game's default visibility (the player's choice still wins); `null` = shown on touch devices without a pad. */
+	setVirtualDefault(isVisible) {
+		this.controls.setGameDefault(isVisible);
+	}
+	/**
+	* Keep auto-placed controls clear of a band along a screen edge, e.g. your
+	* top HUD: `setInsets({ top: hud.getBoundingClientRect().bottom })`. Px from
+	* each edge, merged with earlier calls (0 clears one edge). Dragged controls
+	* and explicit `pos` ignore it.
+	*/
+	setInsets(insets) {
+		this.controls.overlay().setInsets(insets);
+	}
+	/** What the "Show on-screen controls" toggle reflects. */
+	get showingVirtual() {
+		return this.controls.isShowing;
+	}
+	/** Rebind an input (persisted). */
+	rebind(inputName, patch) {
+		this.remaps.rebind(inputName, patch);
+		const declared = this.config?.groups[this.registry.groupOf(inputName) ?? ""]?.inputs[inputName];
+		if (declared !== void 0) this.registry.redefine(inputName, this.remaps.withBinding(inputName, declared));
+	}
+	/** Move or restyle an on-screen control (persisted). */
+	setVirtual(id, patch) {
+		this.remaps.customiseControl(id, patch);
+		this.buildControls();
+	}
+	/** Open (or close) the Controls screen. */
+	openControls() {
+		if (this.pageOwner === null) this.controls.overlay().toggleControls(this.config, this);
+		else this.pageOwner.openControls();
+	}
+	/** Forget every remap and customisation. */
+	resetControls() {
+		this.remaps.reset();
+		this.controls.playerChoice = null;
+		if (this.config !== null) this.define(this.config);
+	}
+	/** A readable label of an input's current binding. */
+	bindingLabel(inputName) {
+		return describeBinding(this.registry.definitionOf(inputName));
+	}
+	/** Called by the injected menu: Select toggles it and a gamepad navigates it. */
+	attachMenu(bridge) {
+		if (this.pageOwner === null) this.menu = bridge;
+		else this.pageOwner.attachMenu(bridge);
+	}
+	/** Called by the injected menu with `game.controls`, for the zero-config fallback. */
+	setLegacyControls(controls) {
+		if (this.pageOwner === null) {
+			this.legacyControlsSource = controls;
+			this.legacyControls = parseLegacyControls(controls);
+		} else this.pageOwner.setLegacyControls(controls);
+	}
+	/**
+	* Make a game's own on-screen menu gamepad-navigable: a CSS selector (or a
+	* function returning elements). While any match is visible and a gamepad is
+	* in use, the stick moves a highlight, A clicks, B calls `options.back`.
+	* Re-queried every frame, so call it once.
+	*/
+	autoNavigate(selector, options) {
+		this.navigator.setAutoNavigate(Navigator.queryFor(selector), options?.back ?? null);
+	}
+	/** Stop navigating the game's own menu. */
+	clearAutoNavigate() {
+		this.navigator.clearAutoNavigate(this.controls.existingOverlay);
+	}
+	/**
+	* Stop driving the page because another copy's game owns it (plan §4.4):
+	* hand the menu and `game.controls` to `owner`, and forward the menu's calls to it.
+	*/
+	yieldPageTo(owner) {
+		this.isPageOwner = false;
+		this.pageOwner = owner;
+		owner.attachMenu(this.menu);
+		owner.setLegacyControls(this.legacyControlsSource);
+		this.menu = null;
+	}
+	buildControls() {
+		if (this.config === null) return;
+		const callbacks = feedDeviceState(this.devices, {
+			onTouch: () => {
+				this.setSource("touch");
+			},
+			onDragged: (id, spot) => {
+				this.setVirtual(id, spot);
+			}
+		});
+		this.controls.build(this.config, this.remaps.overrides, callbacks);
+	}
+	setSource(source) {
+		if (source === this.activeSource) return;
+		this.activeSource = source;
+		this.events.emit("sourcechange", source);
+		this.controls.sync();
+	}
+	navigatorContext() {
+		return {
+			gamepads: this.devices.gamepads,
+			repeats: this.repeats,
+			presses: this.presses,
+			listeners: {
+				onFocus: (event) => {
+					this.events.emit("focus", event);
+				},
+				onBlur: (event) => {
+					this.events.emit("blur", event);
+				},
+				onAct: (event) => {
+					this.events.emit("act", event);
+				}
+			},
+			highlighter: () => this.controls.overlay(),
+			isPressed: (name) => this.registry.isPressed(name),
+			wentDown: (name) => this.registry.wentDown(name)
+		};
+	}
+	tick() {
+		this.devices.frame += 1;
+		const { isConnected, hasActivity } = this.devices.pollGamepads();
+		this.controls.isGamepadConnected = isConnected;
+		if (hasActivity) this.setSource("gamepad");
+		if (this.isPageOwner) this.driveFrame();
+		else this.registry.sample(this.devices, this.activeSource);
+		this.devices.decay();
+		this.controls.existingOverlay?.afterFrame();
+		requestAnimationFrame(() => {
+			this.tick();
+		});
+	}
+	/** One frame as the page owner: the menu toggle and navigation, inputs, the zero-config fallback. */
+	driveFrame() {
+		const context = this.navigatorContext();
+		const overlay = this.controls.existingOverlay;
+		const isGamepadActive = this.activeSource === "gamepad";
+		const menu = this.menu;
+		if (menu !== null && this.presses.rose("select", isAnyPadButtonPressed(this.devices.gamepads, PAD_BUTTON.SELECT))) menu.toggle();
+		if (menu?.isOpen() === true) {
+			this.registry.silence();
+			this.navigator.driveMenu(menu, isGamepadActive, context, overlay);
+			return;
+		}
+		this.navigator.leaveMenu(overlay);
+		if (this.config !== null) {
+			this.registry.sample(this.devices, this.activeSource);
+			this.navigator.driveGroups((group) => this.registry.isEnabled(group), context);
+		} else if (Reflect.get(window, INPUT_ACTIVE_FLAG) !== true) runZeroConfigFrame({
+			gamepads: this.devices.gamepads,
+			slug: this.host.slug,
+			controls: this.legacyControls,
+			navEdges: this.repeats
+		});
+		this.navigator.driveAutoNavigate(isGamepadActive, context, overlay);
+	}
+};
+//#endregion
+//#region src/input/page-control.ts
+/**
+* The small, stable slice of the input system that other bundles on the page
+* use (plan §4.4): the host menu (attach itself, `game.controls`, the
+* Controls button), the social runtime's dialogs (navigate them), the
+* overlay stack (suspend `play`), and a handover between two client copies.
+* Every client version keeps these methods.
+*/
+/** The methods every input system on the page has, v1 copies included. */
+const PAGE_INPUT_METHODS = [
+	"attachMenu",
+	"setLegacyControls",
+	"openControls",
+	"isEnabled",
+	"enable",
+	"disable",
+	"autoNavigate",
+	"clearAutoNavigate",
+	"define",
+	"value"
+];
+/** Whether `candidate` is some bundle's input system. */
+function isPageInputControl(candidate) {
+	return hasMethods(candidate, PAGE_INPUT_METHODS);
+}
+//#endregion
+//#region src/input/page-input.ts
+/**
+* The page's one input system (plan §4.4). The game's copy of the client owns
+* the page because the game defines the controls; the host menu reaches it
+* through the stable {@link PageInputControl} slice. Remaps persist to
+* localStorage (offline-safe) and, through the core client, to a reserved
+* cloud save slot.
+*/
+/** The cross-bundle shape number of the `input` singleton. Bump only on an incompatible change. */
+const INPUT_SINGLETON_API = 1;
+/** The public methods of every input system, v1 copies included. */
+const INPUT_SYSTEM_METHODS = [
+	"define",
+	"enable",
+	"disable",
+	"isEnabled",
+	"value",
+	"get",
+	"down",
+	"up",
+	"pressed",
+	"axis",
+	"vector",
+	"on",
+	"setVirtualHtml",
+	"showVirtual",
+	"setInsets",
+	"autoNavigate",
+	"clearAutoNavigate",
+	"attachMenu",
+	"setLegacyControls",
+	"openControls",
+	"rebind",
+	"setVirtual"
+];
+/** Whether `candidate` is some bundle's input system (v1 copies included). */
+function isInputSystem(candidate) {
+	return hasMethods(candidate, INPUT_SYSTEM_METHODS);
+}
+/** A finite number, or `undefined`. */
+function finiteNumber(candidate) {
+	return typeof candidate === "number" && Number.isFinite(candidate) ? candidate : void 0;
+}
+/** A saved rebind: the keys or gamepad button the player chose. */
+function parseBinding(saved) {
+	const binding = {};
+	const keys = readField(saved, "keys");
+	if (Array.isArray(keys) && keys.every((key) => typeof key === "string")) binding.keys = keys.filter((key) => typeof key === "string");
+	const button = finiteNumber(readField(readField(saved, "gamepad"), "button"));
+	if (button !== void 0) binding.gamepad = { button };
+	return binding;
+}
+/** A saved dragged spot. */
+function parseVirtualOverride(saved) {
+	const spot = {};
+	const left = finiteNumber(readField(saved, "x"));
+	const top = finiteNumber(readField(saved, "y"));
+	if (left !== void 0) spot.x = left;
+	if (top !== void 0) spot.y = top;
+	return spot;
+}
+/** Entries of a saved record, parsed. */
+function parseRecord(saved, parseEntry) {
+	if (!isObject(saved)) return;
+	return Object.fromEntries(Object.entries(saved).map(([key, entry]) => [key, parseEntry(entry)]));
+}
+/** Saved overrides from JSON, keeping only well-formed fields. */
+function parseInputOverrides(saved) {
+	const overrides = {};
+	const bindings = parseRecord(readField(saved, "bindings"), parseBinding);
+	const virtual = parseRecord(readField(saved, "virtual"), parseVirtualOverride);
+	const showVirtual = readField(saved, "showVirtual");
+	if (bindings !== void 0) overrides.bindings = bindings;
+	if (virtual !== void 0) overrides.virtual = virtual;
+	if (typeof showVirtual === "boolean") overrides.showVirtual = showVirtual;
+	return overrides;
+}
+/** A field of the host's injected `window.__HUB__`. */
+function injectedField(key) {
+	return typeof window === "undefined" ? void 0 : readField(readField(window, "__HUB__"), key);
+}
+/** The slug the host injected, or `null`. */
+function injectedSlug() {
+	const slug = injectedField("slug");
+	return typeof slug === "string" ? slug : null;
+}
+/** A new input system, starting from the host's injected `game.controls` (the menu may pass them again later). */
+function createInputSystem(options, isPageOwner) {
+	const system = new InputSystem(createInputHost(options), {
+		isPageOwner,
+		claimPage: registerAsPageInput
+	});
+	system.setLegacyControls(injectedField("controls") ?? null);
+	return system;
+}
+/** Persistence for remaps: localStorage under `hub:<slug>:input`, mirrored to the cloud when given. */
+function createInputHost(options) {
+	const slug = options.slug === void 0 ? injectedSlug() : options.slug;
+	const storageKey = `hub:${slug ?? "null"}:input`;
+	return {
+		slug,
+		loadOverrides() {
+			try {
+				const saved = localStorage.getItem(storageKey);
+				if (saved === null) return null;
+				return parseInputOverrides(JSON.parse(saved));
+			} catch {
+				return null;
+			}
+		},
+		saveOverrides(overrides) {
+			try {
+				localStorage.setItem(storageKey, JSON.stringify(overrides));
+			} catch {}
+			if (slug !== null) options.saveToCloud?.(overrides);
+		}
+	};
+}
+/** Make `system` the page's registered input system; returns the one it replaces. */
+function registerAsPageInput(system) {
+	const registry = window.__DG__ ?? {};
+	window.__DG__ = registry;
+	const previous = registry.input?.instance ?? window[LEGACY_GLOBAL_NAMES.input];
+	registry.input = {
+		version: HUB_CLIENT_VERSION,
+		api: 1,
+		instance: system
+	};
+	window[LEGACY_GLOBAL_NAMES.input] = system;
+	return previous !== system && isPageInputControl(previous) ? previous : null;
+}
+/** Whether another bundle registered an input system with a different shape number. */
+function hasMismatchedPageInput() {
+	const registered = typeof window === "undefined" ? void 0 : window.__DG__?.input;
+	return registered !== void 0 && registered.api !== 1 && isInputSystem(registered.instance);
+}
+let claimedInput = null;
+/**
+* The page-wide input system, created on first use. `options` connect it to
+* the core client (its slug, the cloud save); the first call's options win.
+* When another client copy with a different shape owns the page, this copy
+* gets a private instance that takes the page over once its game defines
+* inputs.
+*/
+function getInput(options = {}) {
+	if (claimedInput !== null) return claimedInput;
+	const isPrivate = hasMismatchedPageInput();
+	claimedInput = claimSingleton({
+		name: "input",
+		version: HUB_CLIENT_VERSION,
+		api: 1,
+		create: () => createInputSystem(options, !isPrivate),
+		isInstance: isInputSystem
+	});
+	return claimedInput;
+}
+//#endregion
+export { isPageInputControl as a, layoutControls as c, parseInputOverrides as i, boxesTouch as l, getInput as n, InputSystem as o, isInputSystem as r, Overlay as s, INPUT_SINGLETON_API as t, controlSize as u };
+
+//# sourceMappingURL=input.js.map