@simpludify/web 0.0.0-stage → 0.1.1

package/dist/index.js

@@ -0,0 +1,2843 @@
+import "./style.css";
+import { ActionController, Aspect, Camera, CanvasButton as CanvasButton$1, CanvasUI, Engine, EngineError, FixedStepRunner, GeometryTilemapLayer, PointerRouting, Renderable, ReplayPlayer, Scene, ScenePointer, SceneState, Shape, TilemapLayer, Transform, canvasControlText, canvasHoverHighlight, canvasOpacity, canvasScrollbars, canvasSliderGeometry, cleanupAll, containsScreenPoint, createViewTransform, imageSize, intersectUI, isKeyCode, positive, screenPoint, screenToWorld, spriteFrameBounds, worldToScreen, wrapCanvasText } from "@simpludify/core";
+import { Application, CanvasTextMetrics, Container, Graphics, Rectangle, Sprite, Text, TextStyle, Texture } from "pixi.js";
+export * from "@simpludify/core";
+// packages/web/src/canvas-node.ts
+/** Bridge owner cancellation to browser APIs such as fetch. */
+function browserAbortSignal(signal) {
+	const controller = new AbortController();
+	signal.onCancel(() => controller.abort());
+	return controller.signal;
+}
+/** Preserve Web callbacks' native AbortSignal; portable definitions import Core's factory. */
+function CanvasButton(text, click, style = {}) {
+	let signal;
+	return CanvasButton$1(text, (owner) => {
+		signal ??= browserAbortSignal(owner);
+		return click(signal);
+	}, style);
+}
+// packages/web/src/ui-keyboard.ts
+/** Host-only ownership metadata; native editing is never reconstructed from game keys. */
+var gameButtons = /* @__PURE__ */ new WeakSet();
+var consumed = /* @__PURE__ */ new WeakSet();
+function registerGameButton(button, signal) {
+	gameButtons.add(button);
+	button.addEventListener("keydown", (event) => {
+		if (event.code === "Enter" || event.code === "Space") consumed.add(event);
+	}, { signal });
+}
+function uiConsumesKey(event) {
+	return consumed.has(event) || event.defaultPrevented;
+}
+/** Unmanaged native buttons retain the previous isolated keyboard behavior. */
+function blocksGameKeyboard(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	if (target.isContentEditable || target.closest("input,textarea,select")) return true;
+	const button = target.closest("button");
+	return !!button && !gameButtons.has(button);
+}
+/** Grant surface focus from outside/editing; do not evict a compatible UI button. */
+function focusGameSurface(host) {
+	const active = document.activeElement;
+	if (active === host || active instanceof HTMLElement && host.contains(active) && !blocksGameKeyboard(active)) return;
+	host.focus({ preventScroll: true });
+}
+// packages/web/src/input.ts
+/** Scoped keyboard adapter: editors own text; engine buttons consume only their UI keys. */
+var BrowserInput = class {
+	controller = new AbortController();
+	constructor(host, input) {
+		const source = input.createKeyboardSource();
+		let compositionOwner = null;
+		const down = (event) => {
+			if (compositionOwner && (!(compositionOwner instanceof Node) || !compositionOwner.isConnected || !host.contains(compositionOwner) || document.activeElement !== compositionOwner)) compositionOwner = null;
+			if (compositionOwner || event.isComposing || event.keyCode === 229 || blocksGameKeyboard(event.target)) {
+				source.clear();
+				return;
+			}
+			if (uiConsumesKey(event) || event.code === "Tab") {
+				if (isKeyCode(event.code)) source.set(event.code, false);
+				return;
+			}
+			if (!isKeyCode(event.code) || !input.acceptsKey(event.code)) return;
+			event.preventDefault();
+			if (!event.repeat) source.set(event.code, true);
+		};
+		const up = (event) => {
+			if (isKeyCode(event.code)) source.set(event.code, false);
+		};
+		const options = { signal: this.controller.signal };
+		host.addEventListener("keydown", down, options);
+		window.addEventListener("keyup", up, {
+			...options,
+			capture: true
+		});
+		host.addEventListener("compositionstart", (event) => {
+			compositionOwner = event.target;
+			source.clear();
+		}, options);
+		host.addEventListener("compositionend", (event) => {
+			if (compositionOwner === event.target) compositionOwner = null;
+		}, options);
+		window.addEventListener("blur", () => {
+			compositionOwner = null;
+			source.clear();
+		}, options);
+		document.addEventListener("visibilitychange", () => {
+			if (document.hidden) {
+				compositionOwner = null;
+				source.clear();
+			}
+		}, options);
+		host.addEventListener("focusin", (event) => {
+			if (event.target !== compositionOwner) compositionOwner = null;
+			if (blocksGameKeyboard(event.target)) source.clear();
+		}, options);
+		host.addEventListener("focusout", (event) => {
+			if (!(event.relatedTarget instanceof Node) || !host.contains(event.relatedTarget) || blocksGameKeyboard(event.relatedTarget)) {
+				compositionOwner = null;
+				source.clear();
+			}
+		}, options);
+		host.addEventListener("pointerdown", (event) => {
+			if (!event.defaultPrevented && (event.target === host || event.target instanceof HTMLCanvasElement && event.target.parentElement === host)) focusGameSurface(host);
+		}, options);
+		this.clear = () => source.dispose();
+	}
+	clear;
+	dispose() {
+		this.controller.abort();
+		this.clear();
+	}
+};
+// packages/web/src/pointer.ts
+/** One DOM capture-phase adapter per Game; Pixi federated events never route these widgets. */
+var BrowserPointer = class {
+	host;
+	project;
+	report;
+	flush;
+	routing;
+	abort = new AbortController();
+	constructor(host, project, report, flush) {
+		this.host = host;
+		this.project = project;
+		this.report = report;
+		this.flush = flush;
+		this.routing = new PointerRouting((id) => {
+			if (host.hasPointerCapture(id)) host.releasePointerCapture(id);
+		});
+		const options = {
+			signal: this.abort.signal,
+			capture: true
+		};
+		host.addEventListener("pointerdown", (e) => this.guard(() => {
+			if (!this.surface(e.target)) return;
+			this.flush();
+			const data = this.data(e);
+			try {
+				host.setPointerCapture(e.pointerId);
+			} catch {}
+			const target = this.routing.down(data);
+			if (this.routing.has(e.pointerId)) {
+				e.preventDefault();
+				if (target) focusGameSurface(host);
+				else host.focus({ preventScroll: true });
+			} else {
+				if (this.routing.owns(e.pointerId)) e.preventDefault();
+				if (host.hasPointerCapture(e.pointerId)) host.releasePointerCapture(e.pointerId);
+			}
+		}), options);
+		host.addEventListener("wheel", (e) => this.guard(() => {
+			if (!this.surface(e.target)) return;
+			this.flush();
+			const { screen } = this.project(e);
+			const unit = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? host.clientHeight : 1;
+			if (this.routing.scroll(screen.x, screen.y, e.deltaX * unit, e.deltaY * unit)) e.preventDefault();
+		}), {
+			...options,
+			passive: false
+		});
+		window.addEventListener("pointermove", (e) => this.guard(() => {
+			if (!this.routing.owns(e.pointerId) && !this.surface(e.target)) {
+				if (this.routing.hasHover(e.pointerId)) this.routing.leave(this.data(e));
+				return;
+			}
+			this.flush();
+			this.routing.move(this.data(e));
+		}), options);
+		window.addEventListener("pointerup", (e) => this.guard(() => {
+			if (this.routing.owns(e.pointerId)) {
+				e.preventDefault();
+				this.flush();
+				this.routing.up(this.data(e));
+			}
+		}), options);
+		window.addEventListener("pointercancel", (e) => this.guard(() => this.routing.cancel(e.pointerId, false)), options);
+		host.addEventListener("lostpointercapture", (e) => this.guard(() => this.routing.cancel(e.pointerId)), options);
+		host.addEventListener("pointerleave", (e) => this.guard(() => this.routing.leave(this.data(e))), options);
+		window.addEventListener("blur", (event) => {
+			if (event.target === window) this.release();
+		}, options);
+		document.addEventListener("visibilitychange", () => {
+			if (document.hidden) this.release();
+		}, options);
+	}
+	surface(target) {
+		return target === this.host || target instanceof HTMLCanvasElement && target.parentElement === this.host;
+	}
+	data(e) {
+		const { screen, world, view } = this.project(e);
+		return Object.freeze({
+			pointerId: e.pointerId,
+			pointerType: e.pointerType,
+			button: e.button,
+			buttons: e.buttons,
+			time: e.timeStamp / 1e3,
+			screen: Object.freeze(screenPoint(screen.x, screen.y)),
+			world: Object.freeze(world),
+			inside: containsScreenPoint(view, screen)
+		});
+	}
+	guard(action) {
+		try {
+			action();
+		} catch (error) {
+			this.report(error);
+		}
+	}
+	release() {
+		this.guard(() => this.routing.release());
+	}
+	dispose() {
+		this.abort.abort();
+		this.guard(() => this.routing.dispose());
+	}
+};
+// packages/web/src/canvas-native.ts
+/** Engine-owned native surfaces share Core focus/generation/lifetime and never route text through keys. */
+var NativeControl = class {
+	node;
+	ui;
+	host;
+	revision;
+	abort = new AbortController();
+	unparent;
+	constructor(node, ui, parentSignal, host) {
+		this.node = node;
+		this.ui = ui;
+		this.host = host;
+		this.revision = node.control?.revision ?? 0;
+		const stop = () => {
+			try {
+				this.dispose();
+			} catch (error) {
+				ui.report(error);
+			}
+		};
+		parentSignal.addEventListener("abort", stop, { once: true });
+		this.unparent = () => parentSignal.removeEventListener("abort", stop);
+	}
+	get disposed() {
+		return this.abort.signal.aborted;
+	}
+	get live() {
+		return !this.abort.signal.aborted && !this.ui.disposed && this.node.available && this.node.control?.revision === this.revision;
+	}
+	run(task) {
+		if (!this.live) return;
+		try {
+			task();
+		} catch (error) {
+			this.ui.report(error);
+		}
+	}
+	mount() {
+		const el = this.element, signal = this.abort.signal;
+		el.className = "s-canvas-native";
+		el.addEventListener("pointerdown", () => this.run(() => this.ui.stopMotion()), { signal });
+		el.addEventListener("focus", () => this.run(() => this.ui.focus(this.node)), { signal });
+		el.addEventListener("blur", () => {
+			if (this.ui.disposed) return;
+			try {
+				if (this.ui.focusedNode === this.node) this.ui.focus();
+			} catch (error) {
+				this.ui.report(error);
+			}
+		}, { signal });
+		el.addEventListener("wheel", (e) => this.run(() => this.host.wheel(e)), {
+			signal,
+			passive: false
+		});
+	}
+	tab(event) {
+		if (event.code !== "Tab") return false;
+		if (this.host.traverse(event.shiftKey)) event.preventDefault();
+		return true;
+	}
+	dispose() {
+		if (this.abort.signal.aborted) return;
+		cleanupAll([
+			() => this.abort.abort(),
+			this.unparent,
+			() => this.node.control?.native?.end("interrupt"),
+			() => this.element.remove()
+		], "Native editor cleanup failed");
+	}
+};
+/** Native browser/OS popup supplies viewport placement, list scrolling and platform key conventions. */
+var CanvasNativeSelect = class extends NativeControl {
+	element = document.createElement("select");
+	session;
+	signature = "";
+	constructor(node, ui, signal, host) {
+		super(node, ui, signal, host);
+		this.mount();
+		const el = this.element, options = { signal: this.abort.signal };
+		const begin = (source) => {
+			const port = node.control?.native;
+			if (port?.kind === "select") this.session = port.begin(source);
+		};
+		el.addEventListener("pointerdown", (e) => this.run(() => {
+			if (node.control?.model.readOnly) {
+				e.preventDefault();
+				return;
+			}
+			begin("pointer");
+		}), options);
+		el.addEventListener("keydown", (e) => this.run(() => {
+			if (e.isComposing || e.keyCode === 229) return;
+			if (this.tab(e)) return;
+			if (e.code === "Escape") {
+				this.session?.cancel();
+				this.session = void 0;
+				this.update();
+				return;
+			}
+			if (node.control?.model.readOnly) {
+				e.preventDefault();
+				return;
+			}
+			begin("keyboard");
+		}), options);
+		el.addEventListener("input", () => this.run(() => {
+			if (!this.session?.active) begin("keyboard");
+			this.session?.update(el.selectedIndex);
+		}), options);
+		el.addEventListener("change", () => this.run(() => {
+			if (!this.session?.active) begin("keyboard");
+			this.session?.update(el.selectedIndex);
+			this.session?.commit();
+			this.session = void 0;
+			this.update();
+		}), options);
+	}
+	update(clip) {
+		const model = this.node.control?.model;
+		if (model?.kind !== "select") return;
+		const el = this.element;
+		const key = JSON.stringify(model.options.map((o) => [o.label, o.disabled]));
+		if (key !== this.signature) {
+			this.signature = key;
+			el.replaceChildren(...model.options.map((o, index) => {
+				const option = document.createElement("option");
+				option.textContent = o.label;
+				option.value = String(index);
+				option.disabled = o.disabled;
+				return option;
+			}));
+		}
+		if (!this.session?.active) el.selectedIndex = model.selectedIndex;
+		el.setAttribute("aria-label", this.node.text);
+		el.setAttribute("aria-readonly", String(model.readOnly));
+		if (clip) nativeGeometry(el, this.node, this.ui, clip);
+	}
+};
+/** Native caret, selection, clipboard and IME paint replace Canvas text only while focused. */
+var CanvasNativeText = class extends NativeControl {
+	element = document.createElement("input");
+	session;
+	composing = false;
+	source = "keyboard";
+	constructor(node, ui, signal, host) {
+		super(node, ui, signal, host);
+		const el = this.element;
+		el.type = "text";
+		el.autocomplete = "off";
+		el.spellcheck = false;
+		this.mount();
+		const options = { signal: this.abort.signal };
+		el.addEventListener("pointerdown", () => this.run(() => {
+			this.source = "pointer";
+			this.begin();
+		}), options);
+		el.addEventListener("focus", () => this.run(() => this.begin()), options);
+		el.addEventListener("compositionstart", () => this.run(() => {
+			this.composing = true;
+			this.send(true);
+		}), options);
+		el.addEventListener("compositionupdate", () => this.run(() => this.send()), options);
+		el.addEventListener("compositionend", () => this.run(() => {
+			this.composing = false;
+			this.send();
+		}), options);
+		el.addEventListener("input", () => this.run(() => this.send(true)), options);
+		for (const event of [
+			"select",
+			"keyup",
+			"pointerup"
+		]) el.addEventListener(event, () => this.run(() => this.send()), options);
+		el.addEventListener("keydown", (e) => this.run(() => {
+			if (this.composing || e.isComposing || e.keyCode === 229) return;
+			if (this.tab(e)) return;
+			if (e.code === "Escape" || e.code === "Enter") {
+				e.preventDefault();
+				e.stopPropagation();
+				if (e.code === "Escape") this.session?.cancel();
+				else {
+					this.send();
+					this.session?.commit();
+				}
+				this.session = void 0;
+				this.update();
+			} else if (node.control?.keys.includes(e.code)) {
+				e.preventDefault();
+				node.control.key(e.code);
+				this.session = void 0;
+				this.update();
+			}
+		}), options);
+	}
+	begin() {
+		if (this.session?.active) return;
+		const port = this.node.control?.native;
+		if (port?.kind === "text") this.session = port.begin(this.source);
+	}
+	send(begin = false) {
+		if (document.activeElement !== this.element) return;
+		if (begin) this.begin();
+		if (!this.session?.active) return;
+		const el = this.element;
+		this.session?.update({
+			text: el.value,
+			selectionStart: el.selectionStart ?? 0,
+			selectionEnd: el.selectionEnd ?? 0,
+			direction: el.selectionDirection ?? "none",
+			composing: this.composing
+		});
+	}
+	update(clip) {
+		const model = this.node.control?.model;
+		if (model?.kind !== "text") return;
+		const el = this.element;
+		if (!this.session?.active && el.value !== model.text) el.value = model.text;
+		el.placeholder = model.placeholder;
+		el.readOnly = model.readOnly;
+		el.inputMode = model.inputMode;
+		if (model.maxLength === void 0 || model.maxLength > 2147483647) el.removeAttribute("maxlength");
+		else el.maxLength = model.maxLength;
+		if (model.numeric) {
+			el.setAttribute("role", "spinbutton");
+			el.setAttribute("aria-valuemin", String(model.numeric.min));
+			el.setAttribute("aria-valuemax", String(model.numeric.max));
+			el.setAttribute("aria-valuenow", String(model.numeric.value));
+		}
+		el.setAttribute("aria-label", this.node.text);
+		el.setAttribute("aria-readonly", String(model.readOnly));
+		if (clip) nativeGeometry(el, this.node, this.ui, clip);
+	}
+};
+/** Keep full native geometry; clip without shifting text, selection or the IME anchor. */
+function nativeGeometry(el, node, ui, clip) {
+	const b = node.bounds, c = intersectUI(b, clip), scale = ui.scale, style = node.style;
+	el.disabled = !node.available || c.width <= 0 || c.height <= 0 || node.style.pointerEvents !== "auto";
+	const background = style.background ?? 2316622;
+	const color = `#${style.color.toString(16).padStart(6, "0")}`;
+	el.style.cssText = `left:${b.x * scale}px;top:${b.y * scale}px;width:${b.width * scale}px;height:${b.height * scale}px;padding:${style.padding * scale}px;font-family:${style.fontFamily};font-size:${style.fontSize * scale}px;--s-native-color:${color};--s-native-background:#${background.toString(16).padStart(6, "0")};color-scheme:${(background >> 16) * .2126 + (background >> 8 & 255) * .7152 + (background & 255) * .0722 > 128 ? "light" : "dark"};clip-path:inset(${Math.max(0, c.y - b.y) * scale}px ${Math.max(0, b.x + b.width - c.x - c.width) * scale}px ${Math.max(0, b.y + b.height - c.y - c.height) * scale}px ${Math.max(0, c.x - b.x) * scale}px);`;
+	if (el.disabled && document.activeElement === el) el.blur();
+}
+/** Native editors must not cover later Canvas hit surfaces or overlay scrollbars. */
+function clipNativeRegions(element, node, ui, clip, covers) {
+	let regions = [intersectUI(node.bounds, clip)];
+	for (const cover of covers) {
+		const next = [];
+		for (const region of regions) {
+			const cut = intersectUI(region, cover);
+			if (cut.width <= 0 || cut.height <= 0) {
+				next.push(region);
+				continue;
+			}
+			const right = region.x + region.width, bottom = region.y + region.height;
+			if (cut.y > region.y) next.push({
+				x: region.x,
+				y: region.y,
+				width: region.width,
+				height: cut.y - region.y
+			});
+			if (cut.y + cut.height < bottom) next.push({
+				x: region.x,
+				y: cut.y + cut.height,
+				width: region.width,
+				height: bottom - cut.y - cut.height
+			});
+			if (cut.x > region.x) next.push({
+				x: region.x,
+				y: cut.y,
+				width: cut.x - region.x,
+				height: cut.height
+			});
+			if (cut.x + cut.width < right) next.push({
+				x: cut.x + cut.width,
+				y: cut.y,
+				width: right - cut.x - cut.width,
+				height: cut.height
+			});
+		}
+		regions = next;
+		if (!regions.length) break;
+	}
+	const scale = ui.scale, b = node.bounds;
+	const path = regions.filter((r) => r.width > 0 && r.height > 0).map((r) => {
+		const x = (r.x - b.x) * scale, y = (r.y - b.y) * scale, w = r.width * scale;
+		return `M${x} ${y}h${w}v${r.height * scale}h${-w}Z`;
+	}).join(" ");
+	element.style.clipPath = path ? `path("${path}")` : "inset(100%)";
+	if (!path) {
+		element.disabled = true;
+		if (document.activeElement === element) element.blur();
+	}
+}
+// packages/web/src/canvas-visual.ts
+/** Pixi rendering and a small native focus mirror share the same resolved boxes. */
+var CanvasVisual = class {
+	ui;
+	host;
+	routing;
+	resources;
+	display = new Container();
+	element = document.createElement("div");
+	entries = /* @__PURE__ */ new Map();
+	metrics = /* @__PURE__ */ new Map();
+	dirty = true;
+	dead = false;
+	active = false;
+	mirroredFocus;
+	subscriptions = [];
+	syncs = 0;
+	constructor(ui, host, routing, resources) {
+		this.ui = ui;
+		this.host = host;
+		this.routing = routing;
+		this.resources = resources;
+		this.display.eventMode = "none";
+		this.display.zIndex = 1;
+		this.element.className = "s-canvas-accessibility";
+		this.element.setAttribute("aria-label", "Game controls");
+		const nativeEvents = new AbortController();
+		const interrupt = () => {
+			try {
+				cleanupAll([...[...this.entries.values()].filter((e) => e.native).map((entry) => () => {
+					try {
+						entry.native?.dispose();
+					} finally {
+						entry.button?.blur();
+					}
+				}), () => {
+					if (!this.ui.disposed) this.ui.focus();
+				}], "Native controls interruption failed");
+			} catch (error) {
+				this.ui.report(error);
+			} finally {
+				this.dirty = true;
+			}
+		};
+		window.addEventListener("blur", (event) => {
+			if (event.target === window) interrupt();
+		}, { signal: nativeEvents.signal });
+		document.addEventListener("visibilitychange", () => {
+			if (document.hidden) interrupt();
+		}, { signal: nativeEvents.signal });
+		this.host.addEventListener("keydown", (event) => {
+			if (!this.active || event.target !== this.host || event.code !== "Tab" || event.shiftKey || event.isComposing || event.keyCode === 229) return;
+			this.update(this.host.clientWidth, this.host.clientHeight);
+			const next = this.ui.focusNext();
+			if (next) {
+				event.preventDefault();
+				this.update(this.host.clientWidth, this.host.clientHeight);
+				this.focus(next);
+			}
+		}, { signal: nativeEvents.signal });
+		this.subscriptions.push(() => nativeEvents.abort());
+		this.subscriptions.push(ui.subscribe(() => {
+			this.dirty = true;
+		}), ui.onDispose(() => this.dispose()));
+	}
+	get diagnostics() {
+		return {
+			nodes: this.entries.size,
+			buttons: [...this.entries.values()].filter((e) => e.button).length,
+			syncs: this.syncs,
+			textMetrics: this.metrics.size
+		};
+	}
+	measure = (node, contentWidth = Infinity) => {
+		const { fontSize, fontFamily, textWrap } = node.style;
+		const content = canvasControlText(node);
+		const adornment = node.control?.model.kind === "checkbox" ? 30 : 0;
+		const key = JSON.stringify([
+			content,
+			fontSize,
+			fontFamily,
+			textWrap,
+			adornment
+		]);
+		let cache = this.metrics.get(node);
+		if (cache?.key !== key) {
+			cache = {
+				key,
+				values: /* @__PURE__ */ new Map()
+			};
+			this.metrics.set(node, cache);
+		}
+		const width = textWrap ? Math.max(0, contentWidth - adornment) : Infinity;
+		const previous = cache.values.get(width);
+		if (previous) return previous;
+		const style = new TextStyle({
+			fontSize,
+			fontFamily,
+			wordWrap: false
+		});
+		const text = Number.isFinite(width) ? wrapCanvasText(content, width, (value) => CanvasTextMetrics.measureText(value || " ", style).width) : content.replace(/\r\n?/g, "\n");
+		const measured = CanvasTextMetrics.measureText(text || " ", style);
+		const result = {
+			text,
+			width: (text ? measured.width : 0) + adornment,
+			height: measured.height
+		};
+		if (cache.values.size >= 8) cache.values.delete(cache.values.keys().next().value);
+		cache.values.set(width, result);
+		return result;
+	};
+	beforeResolutionChange() {
+		for (const entry of this.entries.values()) if (entry.text && !entry.text.destroyed) this.resources.changedText(entry.text.styleKey);
+	}
+	focus(node) {
+		if (node.available) this.entries.get(node)?.button?.focus({ preventScroll: true });
+	}
+	native(node, signal) {
+		const host = {
+			traverse: (reverse) => {
+				const next = this.ui.focusNext(reverse);
+				if (!next) return false;
+				this.update(this.host.clientWidth, this.host.clientHeight);
+				this.focus(next);
+				return true;
+			},
+			wheel: (event) => {
+				const rect = this.host.getBoundingClientRect();
+				const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? this.host.clientHeight : 1;
+				if (this.routing.scroll((event.clientX - rect.x) * this.host.clientWidth / rect.width, (event.clientY - rect.y) * this.host.clientHeight / rect.height, event.deltaX * unit, event.deltaY * unit)) event.preventDefault();
+			}
+		};
+		return node.control?.native?.kind === "select" ? new CanvasNativeSelect(node, this.ui, signal, host) : new CanvasNativeText(node, this.ui, signal, host);
+	}
+	button(node) {
+		const button = document.createElement("button");
+		button.type = "button";
+		const signal = this.entries.get(node)?.abort.signal;
+		if (!signal) throw new EngineError("INVALID_UI", "Missing Canvas button entry");
+		const options = { signal };
+		registerGameButton(button, signal);
+		const run = (task) => {
+			try {
+				task();
+			} catch (error) {
+				this.ui.report(error);
+			}
+		};
+		button.addEventListener("focus", () => run(() => {
+			this.ui.focus(node);
+		}), options);
+		button.addEventListener("blur", () => run(() => {
+			if (this.ui.focusedNode === node) this.ui.focus();
+			this.routing.releaseKeys(node);
+		}), options);
+		button.addEventListener("keydown", (event) => {
+			if (event.isComposing || event.keyCode === 229) return;
+			if (node.control?.keys.includes(event.code)) {
+				event.preventDefault();
+				run(() => {
+					this.routing.controlKey(node, event.code);
+				});
+				return;
+			}
+			if (this.ui.scrollKey(node, event.code)) {
+				event.preventDefault();
+				return;
+			}
+			if (event.code === "Tab") {
+				run(() => {
+					const next = this.ui.focusNext(event.shiftKey);
+					if (next) {
+						event.preventDefault();
+						this.update(this.host.clientWidth, this.host.clientHeight);
+						this.focus(next);
+					}
+				});
+				return;
+			}
+			if (event.code !== "Enter" && event.code !== "Space") return;
+			event.preventDefault();
+			if (!event.repeat) run(() => {
+				this.routing.key(node, event.code, true);
+			});
+		}, options);
+		button.addEventListener("keyup", (event) => {
+			if (event.isComposing || event.keyCode === 229) return;
+			if (event.code !== "Enter" && event.code !== "Space") return;
+			event.preventDefault();
+			run(() => {
+				this.routing.key(node, event.code, false);
+			});
+		}, options);
+		button.addEventListener("click", () => run(() => {
+			if (node.kind !== "hold-button" && node.available) node.activate("accessibility");
+		}), options);
+		return button;
+	}
+	updateButton(entry, node, clip) {
+		if (entry.native) {
+			entry.native.update(clip);
+			return;
+		}
+		if (!entry.button) return;
+		const button = entry.button, b = node.bounds, s = this.ui.scale, c = intersectUI(b, clip);
+		if (button.textContent !== node.text) button.textContent = node.text;
+		if (node.busy && document.activeElement === button) this.host.focus({ preventScroll: true });
+		button.disabled = !node.available || c.width <= 0 || c.height <= 0 || node.style.pointerEvents !== "auto";
+		if (node.kind === "hold-button") button.setAttribute("aria-pressed", String(node.held));
+		const model = node.control?.model;
+		if (model) {
+			button.setAttribute("role", model.kind);
+			button.setAttribute("aria-label", node.text);
+			button.setAttribute("aria-readonly", String(model.readOnly));
+			if (model.kind === "checkbox") button.setAttribute("aria-checked", String(model.checked));
+			else if (model.kind === "slider") {
+				button.setAttribute("aria-orientation", "horizontal");
+				button.setAttribute("aria-valuemin", String(model.min));
+				button.setAttribute("aria-valuemax", String(model.max));
+				button.setAttribute("aria-valuenow", String(model.value));
+			}
+		}
+		button.setAttribute("aria-busy", String(node.busy));
+		button.style.cssText = `left:${c.x * s}px;top:${c.y * s}px;width:${c.width * s}px;height:${c.height * s}px;`;
+		if (button.disabled && document.activeElement === button) button.blur();
+	}
+	update(width, height) {
+		if (this.dead || this.ui.disposed) return;
+		const layout = this.ui.layout(width, height, this.measure);
+		if (!this.active) {
+			this.host.append(this.element);
+			this.active = true;
+		}
+		if (!this.dirty && !layout) return;
+		this.dirty = false;
+		this.syncs++;
+		this.display.scale.set(this.ui.scale);
+		const visited = /* @__PURE__ */ new Set(), buttons = [];
+		const paint = [];
+		let order = 0;
+		let restoreNativeFocus;
+		this.ui.walk((node, parentClip) => {
+			const measuredText = node.kind === "panel" ? void 0 : this.measure(node, Math.max(0, node.bounds.width - node.style.padding * 2));
+			const clip = measuredText && (measuredText.width > node.bounds.width - node.style.padding * 2 || measuredText.height > node.bounds.height - node.style.padding * 2) ? intersectUI(parentClip, node.bounds) : parentClip;
+			visited.add(node);
+			let entry = this.entries.get(node);
+			if (!entry) {
+				const display = new Container(), background = new Graphics(), mask = new Graphics();
+				display.addChild(background);
+				this.display.addChild(display, mask);
+				mask.renderable = false;
+				entry = {
+					display,
+					background,
+					mask,
+					abort: new AbortController()
+				};
+				this.entries.set(node, entry);
+				if (node.interactive) {
+					if (node.control?.native) {
+						entry.native = this.native(node, entry.abort.signal);
+						entry.button = entry.native.element;
+					} else entry.button = this.button(node);
+					this.element.append(entry.button);
+				}
+				if (node.kind !== "panel") {
+					entry.text = new Text({ text: node.text });
+					display.addChild(entry.text);
+				}
+			}
+			if (entry.native && (entry.native.disposed || entry.native.revision !== node.control?.revision)) {
+				if (document.activeElement === entry.button) restoreNativeFocus = node;
+				entry.native.dispose();
+				entry.native = this.native(node, entry.abort.signal);
+				entry.button = entry.native.element;
+				this.element.append(entry.button);
+				delete entry.signature;
+			}
+			this.display.setChildIndex(entry.display, order++);
+			this.display.setChildIndex(entry.mask, order++);
+			if (node.style.pointerEvents === "auto") paint.push({
+				node,
+				box: intersectUI(node.bounds, clip),
+				...entry.native ? {
+					native: entry.native,
+					clip
+				} : {}
+			});
+			if (entry.button) buttons.push(entry.button);
+			const b = node.bounds, s = node.style;
+			let enabled = !node.busy;
+			for (let p = node; p; p = p.parent) enabled &&= p.enabled;
+			const signature = JSON.stringify([
+				node.paintRevision,
+				b.x,
+				b.y,
+				b.width,
+				b.height,
+				clip.x,
+				clip.y,
+				clip.width,
+				clip.height,
+				node.available,
+				enabled,
+				this.ui.scale,
+				canvasOpacity(node)
+			]);
+			if (entry.signature === signature) return;
+			entry.signature = signature;
+			entry.display.position.set(b.x, b.y);
+			const clipped = clip.x !== 0 || clip.y !== 0 || clip.width !== width / this.ui.scale || clip.height !== height / this.ui.scale;
+			entry.display.mask = clipped ? entry.mask : null;
+			entry.mask.renderable = clipped;
+			const maskSignature = JSON.stringify([
+				clipped,
+				clip.x,
+				clip.y,
+				clip.width,
+				clip.height
+			]);
+			if (clipped && entry.maskSignature !== maskSignature) entry.mask.clear().rect(clip.x, clip.y, clip.width, clip.height).fill(16777215);
+			entry.maskSignature = maskSignature;
+			const paintSignature = JSON.stringify([
+				node.paintRevision,
+				b.width,
+				b.height,
+				enabled
+			]);
+			if (entry.paintSignature !== paintSignature) {
+				entry.paintSignature = paintSignature;
+				entry.background.visible = s.background !== void 0 || node.interactive;
+				entry.background.clear();
+				if (s.background !== void 0 || node.interactive) {
+					entry.background.roundRect(0, 0, b.width, b.height, Math.min(s.radius, b.width / 2, b.height / 2)).fill(s.background ?? 2316622);
+					if (node.held) entry.background.roundRect(0, 0, b.width, b.height, s.radius).fill({
+						color: 16777215,
+						alpha: .18
+					});
+					else if (canvasHoverHighlight(node)) entry.background.roundRect(0, 0, b.width, b.height, s.radius).fill({
+						color: 16777215,
+						alpha: .08
+					});
+					if (node.focused) entry.background.roundRect(2, 2, Math.max(0, b.width - 4), Math.max(0, b.height - 4), s.radius).stroke({
+						color: 16765803,
+						width: 3
+					});
+				}
+				const model = node.control?.model;
+				if (model?.kind === "checkbox") {
+					const size = Math.min(20, Math.max(0, b.height - 8), Math.max(0, b.width - 8)), x = Math.min(s.padding, b.width - size), y = (b.height - size) / 2;
+					entry.background.rect(x, y, size, size).fill({
+						color: s.color,
+						alpha: .15
+					}).stroke({
+						color: s.color,
+						width: 2
+					});
+					if (model.checked) entry.background.moveTo(x + size * .2, y + size * .5).lineTo(x + size * .43, y + size * .75).lineTo(x + size * .83, y + size * .22).stroke({
+						color: s.color,
+						width: 3
+					});
+				} else if (model?.kind === "slider") {
+					const geometry = canvasSliderGeometry(node);
+					if (geometry) {
+						const t = geometry.track, thumb = geometry.thumb;
+						entry.background.rect(t.x - b.x, t.y - b.y, t.width, t.height).fill({
+							color: s.color,
+							alpha: .25
+						});
+						entry.background.rect(t.x - b.x, t.y - b.y, t.width * model.ratio, t.height).fill(s.color);
+						entry.background.circle(thumb.x - b.x + thumb.width / 2, thumb.y - b.y + thumb.height / 2, thumb.width / 2).fill(s.color);
+					}
+				}
+				if (entry.text) {
+					entry.text.visible = !entry.native || node.control?.model.kind === "text" && !node.focused;
+					const m = measuredText ?? this.measure(node);
+					if (entry.text.text !== m.text) {
+						this.resources.changedText(entry.text.styleKey);
+						entry.text.text = m.text;
+					}
+					const textStyleKey = JSON.stringify([
+						s.fontFamily,
+						s.fontSize,
+						s.color
+					]);
+					if (entry.textStyleKey !== textStyleKey) {
+						this.resources.changedText(entry.text.styleKey);
+						entry.textStyleKey = textStyleKey;
+						entry.text.style = {
+							fontFamily: s.fontFamily,
+							fontSize: s.fontSize,
+							fill: s.color
+						};
+					}
+					entry.text.position.set(model?.kind === "checkbox" ? s.padding + 30 : model?.kind === "slider" ? s.padding : node.interactive ? Math.max(s.padding, (b.width - m.width) / 2) : s.padding, model?.kind === "slider" ? s.padding : node.interactive ? Math.max(s.padding, (b.height - m.height) / 2) : s.padding);
+				}
+			}
+			const opacity = canvasOpacity(node) * (enabled ? node.control?.model.readOnly ? .7 : 1 : .45);
+			entry.display.alpha = opacity;
+			this.updateButton(entry, node, clip);
+			if (entry.native) entry.native.element.style.opacity = String(opacity);
+		}, (node, clip) => {
+			const entry = this.entries.get(node);
+			if (!entry) return;
+			const bars = canvasScrollbars(node);
+			for (const bar of bars) paint.push({ box: intersectUI(bar.track, clip) });
+			if (!entry.scrollbar && bars.length) {
+				entry.scrollbar = new Graphics();
+				entry.scrollbar.eventMode = "none";
+				this.display.addChild(entry.scrollbar);
+			}
+			const display = entry.scrollbar;
+			if (!display) return;
+			this.display.setChildIndex(display, order++);
+			display.visible = bars.length > 0;
+			display.mask = entry.display.mask;
+			const signature = JSON.stringify([
+				node.style.color,
+				clip.x,
+				clip.y,
+				clip.width,
+				clip.height,
+				...bars.map((b) => [
+					b.axis,
+					b.track,
+					b.thumb,
+					b.enabled
+				])
+			]);
+			if (entry.scrollbarSignature === signature) return;
+			entry.scrollbarSignature = signature;
+			display.clear();
+			for (const bar of bars) {
+				const t = bar.track, b = bar.thumb;
+				if (t.width <= 0 || t.height <= 0) continue;
+				display.roundRect(t.x, t.y, t.width, t.height, Math.min(4, t.width / 2, t.height / 2)).fill({
+					color: node.style.color,
+					alpha: .13
+				});
+				display.roundRect(b.x, b.y, b.width, b.height, Math.min(4, b.width / 2, b.height / 2)).fill({
+					color: node.style.color,
+					alpha: bar.enabled ? .7 : .25
+				});
+			}
+		});
+		for (let i = 0; i < paint.length; i++) {
+			const item = paint[i];
+			if (item?.native && item.node && item.clip) clipNativeRegions(item.native.element, item.node, this.ui, item.clip, paint.slice(i + 1).map((p) => p.box));
+		}
+		for (const [node, entry] of this.entries) if (!visited.has(node)) {
+			this.entries.delete(node);
+			this.metrics.delete(node);
+			this.releaseEntry(entry);
+		}
+		let anchor = null;
+		for (let i = buttons.length - 1; i >= 0; i--) {
+			const button = buttons[i];
+			if (!button) continue;
+			if (button !== document.activeElement && button.nextElementSibling !== anchor) this.element.insertBefore(button, anchor);
+			anchor = button;
+		}
+		const focused = this.ui.focusedNode;
+		if (!focused && this.mirroredFocus) {
+			const previous = this.entries.get(this.mirroredFocus)?.button;
+			if (previous && document.activeElement === previous) previous.blur();
+		}
+		const button = focused ? this.entries.get(focused)?.button : void 0;
+		if ((focused !== this.mirroredFocus || focused === restoreNativeFocus) && button && !button.disabled && document.activeElement !== button) button.focus({ preventScroll: true });
+		this.mirroredFocus = this.ui.focusedNode;
+	}
+	releaseEntry(entry) {
+		const backgroundContext = entry.background.context?.uid, maskContext = entry.mask.context?.uid;
+		const scrollbarContext = entry.scrollbar?.context?.uid;
+		const textKey = entry.text && !entry.text.destroyed ? entry.text.styleKey : void 0;
+		cleanupAll([
+			() => entry.abort.abort(),
+			() => entry.native?.dispose(),
+			() => entry.button?.remove(),
+			() => entry.background.destroy({ context: true }),
+			() => entry.scrollbar?.destroy({ context: true }),
+			() => entry.text?.destroy({ style: true }),
+			() => entry.display.destroy({ children: true }),
+			() => entry.mask.destroy({ context: true }),
+			() => this.resources.graphics(entry.background, backgroundContext),
+			() => this.resources.graphics(entry.mask, maskContext),
+			() => {
+				if (entry.scrollbar) this.resources.graphics(entry.scrollbar, scrollbarContext);
+			},
+			() => {
+				if (entry.text) this.resources.text(entry.text, textKey);
+			}
+		], "Canvas visual entry cleanup failed");
+	}
+	dispose() {
+		if (this.dead) return;
+		this.dead = true;
+		const entries = [...this.entries.values()];
+		this.entries.clear();
+		this.metrics.clear();
+		cleanupAll([
+			...this.subscriptions.splice(0),
+			...entries.map((e) => () => this.releaseEntry(e)),
+			() => this.display.destroy({ children: true }),
+			() => this.element.remove()
+		], "Canvas visual cleanup failed");
+	}
+};
+// packages/web/src/geometry-tilemap-visual.ts
+/** Visible-cell Graphics with no image/UV contract; no full Grid walk per frame. */
+var GeometryTilemapVisual = class {
+	map;
+	released;
+	display = new Container();
+	graphics = /* @__PURE__ */ new Map();
+	stats = {
+		visitedCells: 0,
+		updatedTiles: 0,
+		createdGraphics: 0,
+		destroyedGraphics: 0
+	};
+	order = 0;
+	depth = NaN;
+	disposed = false;
+	dirty = /* @__PURE__ */ new Set();
+	visibleCells = /* @__PURE__ */ new Set();
+	invalid = true;
+	boundsKey = "";
+	off;
+	offDispose;
+	constructor(map, released) {
+		this.map = map;
+		this.released = released;
+		this.off = map.onTilesChanged((index) => {
+			if (index === null) {
+				this.invalid = true;
+				this.bulk = true;
+				this.dirty.clear();
+			} else if (this.visibleCells.has(index)) this.dirty.add(index);
+		});
+		this.offDispose = map.onDispose(() => this.dispose());
+	}
+	remove(index) {
+		const g = this.graphics.get(index);
+		if (g) {
+			this.graphics.delete(index);
+			g.destroy({ context: true });
+			this.stats.destroyedGraphics++;
+		}
+	}
+	cell(x, y) {
+		this.stats.visitedCells++;
+		const index = y * this.map.width + x, color = this.map.get(x, y);
+		if (color === null) {
+			this.remove(index);
+			return;
+		}
+		let g = this.graphics.get(index);
+		if (!g) {
+			g = new Graphics();
+			this.graphics.set(index, g);
+			this.display.addChild(g);
+			this.stats.createdGraphics++;
+		}
+		g.clear().poly(this.map.geometry.vertices(x, y).flatMap((p) => [p.x, p.y]), true).fill(color);
+		this.stats.updatedTiles++;
+	}
+	render(view) {
+		if (this.disposed) return;
+		const m = this.map;
+		this.display.position.set(m.x, m.y);
+		this.display.visible = m.visible && m.enabled;
+		if (!this.display.visible) {
+			this.invalid = true;
+			this.bulk = true;
+			this.dirty.clear();
+			return;
+		}
+		const c = view.clip;
+		const bounds = {
+			x: (c.x - view.x) / view.scale,
+			y: (c.y - view.y) / view.scale,
+			width: c.width / view.scale,
+			height: c.height / view.scale
+		};
+		const key = [
+			bounds.x - m.x,
+			bounds.y - m.y,
+			bounds.width,
+			bounds.height
+		].join(",");
+		if (this.invalid || key !== this.boundsKey) {
+			this.boundsKey = key;
+			this.invalid = false;
+			const retained = /* @__PURE__ */ new Set();
+			for (const p of m.tilesInBounds(bounds)) {
+				const index = p.y * m.width + p.x;
+				retained.add(index);
+				if (!this.graphics.has(index) || this.dirty.has(index) || this.bulk) this.cell(p.x, p.y);
+			}
+			for (const index of this.graphics.keys()) if (!retained.has(index)) this.remove(index);
+			this.visibleCells = retained;
+			this.bulk = false;
+		} else for (const index of this.dirty) {
+			const x = index % m.width, y = Math.floor(index / m.width), b = m.tileBounds(x, y);
+			if (b.x <= bounds.x + bounds.width && b.x + b.width >= bounds.x && b.y <= bounds.y + bounds.height && b.y + b.height >= bounds.y) this.cell(x, y);
+		}
+		this.dirty.clear();
+	}
+	bulk = false;
+	dispose() {
+		if (this.disposed) return;
+		this.disposed = true;
+		this.stats.destroyedGraphics += this.graphics.size;
+		this.graphics.clear();
+		this.visibleCells.clear();
+		this.dirty.clear();
+		cleanupAll([
+			this.off,
+			this.offDispose,
+			() => this.display.removeFromParent(),
+			() => this.display.destroy({
+				children: true,
+				context: true
+			}),
+			this.released
+		], "Geometry tilemap cleanup failed");
+	}
+};
+// packages/web/src/pixi-ui-cleanup.ts
+function drop(hash, id, resource) {
+	if (!hash) return;
+	const value = hash.items[id];
+	if (value === null || resource?.destroyed && value === resource) delete hash.items[id];
+}
+/** Renderer-local compatibility for pinned Pixi8.22. Drop only destroyed UI owners/null bookkeeping.
+* CanvasGraphicsPipe has no GPU data for its Graphics; GCManagedHash.remove returns early there.
+* Text/style keys otherwise accumulate null entries after dynamic text updates. */
+function releaseUIGraphics(renderer, graphics, context) {
+	if (!graphics.destroyed) return;
+	const r = renderer;
+	drop(r.renderPipes.graphics?._managedGraphics, graphics.uid, graphics);
+	if (context !== void 0) drop(r.graphicsContext?._managedContexts, context);
+}
+function releaseUIText(renderer, text, key) {
+	if (!text.destroyed) return;
+	const r = renderer;
+	drop(r.renderPipes.text?._managedTexts, text.uid, text);
+	if (key !== void 0 && r.canvasText?._activeTextures?.[key] === null) delete r.canvasText._activeTextures[key];
+}
+/** Called after rendering so replaced text has released its old managed texture. Never drops a live key. */
+function pruneUITextKeys(renderer, keys) {
+	const textures = renderer.canvasText?._activeTextures;
+	for (const key of keys) {
+		if (textures?.[key] != null) continue;
+		if (textures?.[key] === null) delete textures[key];
+		keys.delete(key);
+	}
+}
+// packages/web/src/shared-images.ts
+/** Renderer-local, live-reference cache. No idle retention or process-global state. */
+var SharedImages = class {
+	load;
+	entries = /* @__PURE__ */ new Map();
+	references = 0;
+	dead = false;
+	constructor(load) {
+		this.load = load;
+	}
+	get diagnostics() {
+		let pending = 0;
+		for (const entry of this.entries.values()) if (!entry.resource) pending++;
+		return {
+			imageReferences: this.references,
+			imageEntries: this.entries.size,
+			pendingImages: pending
+		};
+	}
+	acquire(key, signal) {
+		const cancelled = () => new EngineError("GAME_DISPOSED", "Image use cancelled", { path: key });
+		if (this.dead || signal.aborted) return Promise.reject(cancelled());
+		let entry = this.entries.get(key);
+		const fresh = !entry;
+		if (!entry) {
+			entry = {
+				key,
+				controller: new AbortController(),
+				consumers: /* @__PURE__ */ new Set(),
+				frames: /* @__PURE__ */ new Map()
+			};
+			this.entries.set(key, entry);
+		}
+		const current = entry;
+		const promise = new Promise((resolve, reject) => {
+			let released = false, settled = false;
+			const release = () => {
+				if (released) return;
+				released = true;
+				signal.removeEventListener("abort", release);
+				current.consumers.delete(consumer);
+				this.references--;
+				if (!settled) {
+					settled = true;
+					reject(cancelled());
+				}
+				if (!current.consumers.size) {
+					if (this.entries.get(key) === current) this.entries.delete(key);
+					current.controller.abort();
+					const resource = current.resource;
+					delete current.resource;
+					for (const texture of current.frames.values()) texture.destroy(false);
+					current.frames.clear();
+					resource?.release();
+				}
+			};
+			const consumer = {
+				ready: (resource) => {
+					if (released || settled) return;
+					settled = true;
+					signal.removeEventListener("abort", release);
+					resolve({
+						texture: resource.texture,
+						release,
+						textureFor: (frame) => {
+							if (released) throw new EngineError("GAME_DISPOSED", "Image lease released");
+							if (!frame) return resource.texture;
+							const rect = spriteFrameBounds(frame, resource.texture.width, resource.texture.height);
+							const key = `${rect.x},${rect.y},${rect.width},${rect.height}`;
+							let texture = current.frames.get(key);
+							if (!texture) {
+								texture = new Texture({
+									source: resource.texture.source,
+									frame: new Rectangle(rect.x, rect.y, rect.width, rect.height)
+								});
+								current.frames.set(key, texture);
+							}
+							return texture;
+						}
+					});
+				},
+				fail: (error) => {
+					if (released || settled) return;
+					settled = true;
+					reject(error);
+					release();
+				},
+				release
+			};
+			this.references++;
+			current.consumers.add(consumer);
+			signal.addEventListener("abort", release, { once: true });
+			if (current.resource) consumer.ready(current.resource);
+		});
+		if (fresh) Promise.resolve().then(() => this.load(key, current.controller.signal)).then((resource) => {
+			if (!current.consumers.size) {
+				resource.release();
+				return;
+			}
+			current.resource = resource;
+			for (const consumer of current.consumers) consumer.ready(resource);
+		}, (error) => {
+			if (this.entries.get(key) === current) this.entries.delete(key);
+			for (const consumer of [...current.consumers]) consumer.fail(error);
+		});
+		return promise;
+	}
+	dispose() {
+		if (this.dead) return;
+		this.dead = true;
+		for (const entry of [...this.entries.values()]) for (const consumer of [...entry.consumers]) consumer.release();
+	}
+};
+// packages/web/src/tilemap-visual.ts
+/** Renderer-owned sparse visible set; sheet pixels are owned by SharedImages. */
+var TilemapVisual = class {
+	map;
+	changed;
+	onError;
+	released;
+	display = new Container();
+	sprites = /* @__PURE__ */ new Map();
+	order = 0;
+	depth = NaN;
+	controller = new AbortController();
+	error;
+	disposed = false;
+	stats = {
+		visitedCells: 0,
+		updatedTiles: 0,
+		createdSprites: 0,
+		destroyedSprites: 0,
+		validatedFrames: 0
+	};
+	lease;
+	textures = /* @__PURE__ */ new Map();
+	dirty = /* @__PURE__ */ new Set();
+	revision = -1;
+	range = {
+		left: -1,
+		top: -1,
+		right: -1,
+		bottom: -1
+	};
+	invalid = true;
+	off;
+	offDispose;
+	constructor(map, scene, acquire, changed, onError, released) {
+		this.map = map;
+		this.changed = changed;
+		this.onError = onError;
+		this.released = released;
+		this.off = map.onTilesChanged((index) => {
+			if (index === null) {
+				this.invalid = true;
+				this.dirty.clear();
+			} else {
+				const x = index % map.width, y = Math.floor(index / map.width), r = this.range;
+				if (x >= r.left && x < r.right && y >= r.top && y < r.bottom) this.dirty.add(index);
+			}
+		});
+		this.offDispose = map.onDispose(() => this.dispose());
+		const controller = this.controller;
+		if (!controller) throw Error("Missing tilemap request controller");
+		acquire(map.sheet.url, controller.signal).then((lease) => {
+			if (this.disposed || map.disposed || map.scene !== scene) {
+				lease.release();
+				return;
+			}
+			this.lease = lease;
+			this.sync();
+		}).catch((error) => {
+			if (!this.disposed) this.fail(error);
+		}).finally(() => {
+			this.controller = void 0;
+			changed();
+		});
+	}
+	fail(error) {
+		this.error = error;
+		try {
+			this.onError(error);
+		} catch {}
+	}
+	sync() {
+		if (!this.lease || this.disposed || this.revision === this.map.revision) return;
+		this.revision = this.map.revision;
+		this.error = void 0;
+		try {
+			for (const id of this.map.tileIds()) if (!this.textures.has(id)) {
+				this.stats.validatedFrames++;
+				this.textures.set(id, this.lease.textureFor(this.map.sheet.get(id).frame));
+			}
+		} catch (error) {
+			this.fail(error);
+		}
+	}
+	remove(index) {
+		const sprite = this.sprites.get(index);
+		if (sprite) {
+			this.sprites.delete(index);
+			sprite.destroy();
+			this.stats.destroyedSprites++;
+		}
+	}
+	cell(x, y) {
+		this.stats.visitedCells++;
+		const index = y * this.map.width + x, id = this.map.get(x, y);
+		if (id === null) {
+			this.remove(index);
+			return;
+		}
+		const texture = this.textures.get(id);
+		if (!texture) return;
+		let sprite = this.sprites.get(index);
+		if (!sprite) {
+			sprite = new Sprite(texture);
+			sprite.position.set(x * this.map.tileWidth, y * this.map.tileHeight);
+			this.sprites.set(index, sprite);
+			this.display.addChild(sprite);
+			this.stats.createdSprites++;
+		}
+		sprite.texture = texture;
+		sprite.width = this.map.tileWidth;
+		sprite.height = this.map.tileHeight;
+		this.stats.updatedTiles++;
+	}
+	render(view) {
+		if (this.disposed) return;
+		this.sync();
+		const m = this.map;
+		this.display.position.set(m.x, m.y);
+		this.display.visible = m.visible && m.enabled;
+		if (!this.display.visible) {
+			this.invalid = true;
+			return;
+		}
+		if (!this.lease || this.error) return;
+		const c = view.clip;
+		const left = Math.max(0, Math.min(m.width, Math.floor(((c.x - view.x) / view.scale - m.x) / m.tileWidth)));
+		const top = Math.max(0, Math.min(m.height, Math.floor(((c.y - view.y) / view.scale - m.y) / m.tileHeight)));
+		const right = Math.max(left, Math.min(m.width, Math.ceil(((c.x + c.width - view.x) / view.scale - m.x) / m.tileWidth)));
+		const bottom = Math.max(top, Math.min(m.height, Math.ceil(((c.y + c.height - view.y) / view.scale - m.y) / m.tileHeight)));
+		const old = this.range;
+		if (this.invalid || left !== old.left || top !== old.top || right !== old.right || bottom !== old.bottom) {
+			this.range = {
+				left,
+				top,
+				right,
+				bottom
+			};
+			this.invalid = false;
+			for (const index of this.sprites.keys()) {
+				const x = index % m.width, y = Math.floor(index / m.width);
+				if (x < left || x >= right || y < top || y >= bottom) this.remove(index);
+			}
+			for (let y = top; y < bottom; y++) for (let x = left; x < right; x++) this.cell(x, y);
+		} else for (const index of this.dirty) this.cell(index % m.width, Math.floor(index / m.width));
+		this.dirty.clear();
+	}
+	dispose() {
+		if (this.disposed) return;
+		this.disposed = true;
+		this.controller?.abort();
+		this.controller = void 0;
+		this.stats.destroyedSprites += this.sprites.size;
+		this.sprites.clear();
+		this.textures.clear();
+		this.dirty.clear();
+		const lease = this.lease;
+		this.lease = void 0;
+		cleanupAll([
+			this.off,
+			this.offDispose,
+			() => this.display.removeFromParent(),
+			() => this.display.destroy({ children: true }),
+			() => lease?.release(),
+			this.released,
+			this.changed
+		], "Tilemap presentation cleanup failed");
+	}
+};
+// packages/web/src/renderer.ts
+var PixiRenderer = class {
+	host;
+	background;
+	onError;
+	app = new Application();
+	pendingUITextKeys = /* @__PURE__ */ new Set();
+	canvasPresentations = /* @__PURE__ */ new Set();
+	get canvasDiagnostics() {
+		let nodes = 0, buttons = 0, syncs = 0, textMetrics = 0;
+		for (const p of this.canvasPresentations) {
+			const d = p.diagnostics;
+			nodes += d.nodes;
+			buttons += d.buttons;
+			syncs += d.syncs;
+			textMetrics += d.textMetrics;
+		}
+		return {
+			presentations: this.canvasPresentations.size,
+			nodes,
+			buttons,
+			syncs,
+			textMetrics
+		};
+	}
+	prepareCanvasUI(ui, routing) {
+		if (!this.ready || this.dead) throw new EngineError("RENDERER_NOT_READY", "Renderer is not available");
+		const visual = new CanvasVisual(ui, this.host, routing, {
+			graphics: (graphics, context) => releaseUIGraphics(this.app.renderer, graphics, context),
+			text: (text, key) => releaseUIText(this.app.renderer, text, key),
+			changedText: (key) => this.pendingUITextKeys.add(key)
+		});
+		this.canvasPresentations.add(visual);
+		let disposed = false;
+		const off = ui.onDispose(() => {
+			this.canvasPresentations.delete(visual);
+		});
+		return {
+			update: (width, height) => {
+				if (disposed || ui.disposed) return;
+				if (!visual.display.parent) this.app.stage.addChild(visual.display);
+				visual.update(width, height);
+			},
+			focus: (node) => visual.focus(node),
+			dispose: () => {
+				if (disposed) return;
+				disposed = true;
+				off();
+				this.canvasPresentations.delete(visual);
+				visual.dispose();
+			}
+		};
+	}
+	scenes = /* @__PURE__ */ new Set();
+	images = new SharedImages((url, signal) => this.image(url, signal));
+	tilemaps = /* @__PURE__ */ new Set();
+	get tilemapDiagnostics() {
+		let sprites = 0, visibleTiles = 0, visitedCells = 0, updatedTiles = 0, createdSprites = 0, destroyedSprites = 0, validatedFrames = 0;
+		for (const t of this.tilemaps) {
+			sprites += t.sprites.size;
+			if (t.display.visible) visibleTiles += t.sprites.size;
+			visitedCells += t.stats.visitedCells;
+			updatedTiles += t.stats.updatedTiles;
+			createdSprites += t.stats.createdSprites;
+			destroyedSprites += t.stats.destroyedSprites;
+			validatedFrames += t.stats.validatedFrames;
+		}
+		return {
+			maps: this.tilemaps.size,
+			sprites,
+			visibleTiles,
+			visitedCells,
+			updatedTiles,
+			createdSprites,
+			destroyedSprites,
+			validatedFrames
+		};
+	}
+	geometryTilemaps = /* @__PURE__ */ new Set();
+	get geometryTilemapDiagnostics() {
+		let graphics = 0, visitedCells = 0, updatedTiles = 0, createdGraphics = 0, destroyedGraphics = 0;
+		for (const t of this.geometryTilemaps) {
+			graphics += t.graphics.size;
+			visitedCells += t.stats.visitedCells;
+			updatedTiles += t.stats.updatedTiles;
+			createdGraphics += t.stats.createdGraphics;
+			destroyedGraphics += t.stats.destroyedGraphics;
+		}
+		return {
+			maps: this.geometryTilemaps.size,
+			graphics,
+			visitedCells,
+			updatedTiles,
+			createdGraphics,
+			destroyedGraphics
+		};
+	}
+	ready = false;
+	dead = false;
+	visualCount = 0;
+	textureCount = 0;
+	get diagnostics() {
+		return {
+			presentations: this.scenes.size,
+			visuals: this.visualCount,
+			textures: this.textureCount,
+			...this.images.diagnostics
+		};
+	}
+	constructor(host, background = "#101922", onError = () => {}) {
+		this.host = host;
+		this.background = background;
+		this.onError = onError;
+	}
+	async init() {
+		await this.app.init({
+			width: 800,
+			height: 450,
+			background: this.background,
+			antialias: true,
+			autoStart: false,
+			sharedTicker: false,
+			preference: "webgl",
+			resolution: 1,
+			autoDensity: true
+		});
+		this.ready = true;
+		if (this.dead) {
+			this.destroyApp();
+			throw new EngineError("GAME_DISPOSED", "Renderer disposed during initialization");
+		}
+		this.app.stage.sortableChildren = true;
+		this.app.canvas.setAttribute("aria-label", "Game world");
+		this.host.prepend(this.app.canvas);
+	}
+	async image(url, signal) {
+		const image = new Image();
+		await new Promise((resolve, reject) => {
+			const clear = () => {
+				image.onload = null;
+				image.onerror = null;
+				signal.removeEventListener("abort", abort);
+			};
+			const abort = () => {
+				clear();
+				image.src = "";
+				reject(new EngineError("GAME_DISPOSED", "Image loading cancelled", { path: url }));
+			};
+			image.onload = () => {
+				clear();
+				resolve();
+			};
+			image.onerror = () => {
+				clear();
+				reject(new EngineError("ASSET_LOAD_FAILED", "Could not load sprite", { path: url }));
+			};
+			if (signal.aborted) {
+				abort();
+				return;
+			}
+			signal.addEventListener("abort", abort, { once: true });
+			image.crossOrigin = "anonymous";
+			image.src = url;
+		});
+		if (signal.aborted) throw new EngineError("GAME_DISPOSED", "Image loading cancelled", { path: url });
+		const texture = Texture.from(image, true);
+		if (!(texture.width > 0 && texture.height > 0)) {
+			texture.destroy(true);
+			throw new EngineError("ASSET_LOAD_FAILED", "Image has no drawable dimensions", { path: url });
+		}
+		this.textureCount++;
+		let released = false;
+		return {
+			texture,
+			release: () => {
+				if (released) return;
+				released = true;
+				this.textureCount--;
+				texture.destroy(true);
+			}
+		};
+	}
+	acquireImage(url, signal) {
+		try {
+			return this.images.acquire(new URL(url, document.baseURI).href, signal);
+		} catch {
+			return Promise.reject(new EngineError("ASSET_LOAD_FAILED", "Invalid image URL", { path: url }));
+		}
+	}
+	async prepare(scene) {
+		if (!this.ready || this.dead) throw new EngineError("RENDERER_NOT_READY", "Renderer is not available");
+		const root = new Container(), world = new Container(), mask = new Graphics();
+		world.sortableChildren = true;
+		root.addChild(world, mask);
+		root.mask = mask;
+		const visuals = /* @__PURE__ */ new Map();
+		const tilemaps = /* @__PURE__ */ new Map();
+		const drawOrder = [];
+		let depthDirty = true;
+		let revision = -1, disposed = false, clipX = NaN, clipY = NaN, clipWidth = NaN, clipHeight = NaN, removeSceneCleanup;
+		const valid = (entry) => !disposed && !scene.disposed && !entry.actor.disposed && entry.actor.scene === scene && entry.actor.get(Renderable.type) === entry.component && !entry.component.disposed;
+		let wake;
+		let wakeResolve;
+		const changed = () => {
+			const resolve = wakeResolve;
+			wake = void 0;
+			wakeResolve = void 0;
+			resolve?.();
+		};
+		const cancel = (entry) => {
+			entry.generation++;
+			const controller = entry.controller;
+			delete entry.controller;
+			if (controller) controller.abort();
+		};
+		const appearance = (entry) => {
+			const { component, display, displayedSource: source } = entry;
+			if (!display || !source) return;
+			if (source.kind === "image" && display instanceof Sprite && entry.image) {
+				const texture = display.texture;
+				const size = imageSize(texture.width, texture.height, component.width, component.height, source.fit);
+				entry.scaleX = size.width / texture.width;
+				entry.scaleY = size.height / texture.height;
+				display.tint = component.color;
+			} else if (source.kind === "shape" && display instanceof Graphics) {
+				const width = component.width, height = component.height;
+				if (entry.geometryShape === source.shape && entry.geometryWidth === width && entry.geometryHeight === height && entry.geometryColor === component.color) return;
+				entry.geometryShape = source.shape;
+				entry.geometryWidth = width;
+				entry.geometryHeight = height;
+				entry.geometryColor = component.color;
+				display.clear();
+				if (source.shape === Shape.Circle) display.circle(0, 0, Math.min(width, height) / 2).fill(component.color);
+				else if (source.shape === Shape.Hexagon) display.poly([
+					0,
+					-height / 2,
+					width / 2,
+					-height / 4,
+					width / 2,
+					height / 4,
+					0,
+					height / 2,
+					-width / 2,
+					height / 4,
+					-width / 2,
+					-height / 4
+				], true).fill(component.color);
+				else if (source.shape === Shape.Triangle) display.poly([
+					0,
+					-height / 2,
+					width / 2,
+					height / 2,
+					-width / 2,
+					height / 2
+				], true).fill(component.color);
+				else display.roundRect(-width / 2, -height / 2, width, height, source.shape === Shape.Character ? Math.min(width, height) / 4 : 2).fill(component.color);
+				if (source.shape === Shape.Character) display.circle(-width / 7, -height / 10, Math.min(width, height) / 18).fill(1059880).circle(width / 7, -height / 10, Math.min(width, height) / 18).fill(1059880);
+				entry.scaleX = entry.scaleY = 1;
+			}
+		};
+		const replace = (entry, display, source) => {
+			if (entry.display !== display) {
+				entry.display?.destroy();
+				entry.display = display;
+				delete entry.geometryShape;
+				world.addChild(display);
+				depthDirty = true;
+			}
+			entry.displayedSource = source;
+		};
+		const fail = (entry, error) => {
+			entry.error = error;
+			try {
+				this.onError(error);
+			} catch {}
+		};
+		const commitImage = (entry, resource, source) => {
+			if (source.kind !== "image") return;
+			const texture = resource.textureFor(source.frame);
+			const previous = entry.image;
+			const sprite = entry.display instanceof Sprite ? entry.display : new Sprite(texture);
+			sprite.texture = texture;
+			sprite.anchor.set(.5);
+			entry.image = resource;
+			replace(entry, sprite, source);
+			appearance(entry);
+			if (previous !== resource) previous?.release();
+		};
+		const update = (entry) => {
+			const component = entry.component;
+			if (entry.revision === component.revision) return;
+			entry.revision = component.revision;
+			const source = component.source;
+			const sourceChanged = entry.requestedSource !== source;
+			entry.requestedSource = source;
+			if (source.kind === "shape") {
+				cancel(entry);
+				delete entry.requestUrl;
+				delete entry.error;
+				const previous = entry.image;
+				delete entry.image;
+				replace(entry, entry.display instanceof Graphics ? entry.display : new Graphics(), source);
+				previous?.release();
+				changed();
+			} else if (entry.requestUrl !== source.url || sourceChanged && !entry.controller && (!entry.image || entry.displayedSource?.kind !== "image" || entry.displayedSource.url !== source.url)) {
+				cancel(entry);
+				entry.requestUrl = source.url;
+				delete entry.error;
+				if (entry.image && entry.displayedSource?.kind === "image" && entry.displayedSource.url === source.url) try {
+					commitImage(entry, entry.image, source);
+				} catch (error) {
+					fail(entry, error);
+				}
+				else {
+					const controller = new AbortController(), generation = entry.generation;
+					entry.controller = controller;
+					const current = () => !entry.disposed && valid(entry) && entry.generation === generation && component.source.kind === "image" && component.source.url === source.url;
+					this.acquireImage(source.url, controller.signal).then((resource) => {
+						if (!current()) {
+							resource.release();
+							return;
+						}
+						try {
+							commitImage(entry, resource, component.source);
+						} catch (error) {
+							resource.release();
+							throw error;
+						}
+					}).catch((error) => {
+						if (current()) fail(entry, error);
+					}).finally(() => {
+						if (entry.controller === controller) delete entry.controller;
+						changed();
+					});
+				}
+				changed();
+			} else if (entry.image && entry.displayedSource?.kind === "image" && entry.displayedSource.url === source.url) {
+				if (sourceChanged) delete entry.error;
+				try {
+					commitImage(entry, entry.image, source);
+				} catch (error) {
+					fail(entry, error);
+				}
+			}
+			appearance(entry);
+		};
+		const create = (actor, component) => {
+			this.visualCount++;
+			let removeActorCleanup = () => {}, removeComponentCleanup = () => {};
+			const entry = {
+				revision: -1,
+				generation: 0,
+				disposed: false,
+				geometryWidth: NaN,
+				geometryHeight: NaN,
+				geometryColor: NaN,
+				order: 0,
+				depth: NaN,
+				scaleX: 1,
+				scaleY: 1,
+				actor,
+				component,
+				transform: actor.require(Transform.type),
+				dispose: () => {
+					if (entry.disposed) return;
+					entry.disposed = true;
+					this.visualCount--;
+					depthDirty = true;
+					drawOrder.length = 0;
+					cancel(entry);
+					changed();
+					const display = entry.display, image = entry.image;
+					delete entry.display;
+					delete entry.image;
+					cleanupAll([
+						removeActorCleanup,
+						removeComponentCleanup,
+						() => display?.destroy(),
+						() => image?.release()
+					], "Visual cleanup failed");
+				}
+			};
+			removeActorCleanup = actor.onDispose(entry.dispose);
+			removeComponentCleanup = component.onDispose(entry.dispose);
+			update(entry);
+			return entry;
+		};
+		const reconcile = () => {
+			if (disposed || scene.disposed) return;
+			if (revision === scene.revision) return;
+			revision = scene.revision;
+			depthDirty = true;
+			for (const [actor, entry] of visuals) if (!valid(entry)) {
+				entry.dispose();
+				visuals.delete(actor);
+			}
+			for (const [actor, entry] of tilemaps) if (actor.disposed || actor.scene !== scene || !(entry instanceof TilemapVisual ? actor.get(TilemapLayer.type) : actor.get(GeometryTilemapLayer.type)) || entry.disposed) {
+				entry.dispose();
+				if (entry instanceof TilemapVisual) this.tilemaps.delete(entry);
+				else this.geometryTilemaps.delete(entry);
+				tilemaps.delete(actor);
+			}
+			let order = 0;
+			for (const actor of scene.actors) {
+				const layer = actor.get(TilemapLayer.type);
+				if (layer) {
+					let tile = tilemaps.get(actor);
+					if (!tile) {
+						tile = new TilemapVisual(layer.map, scene, (url, signal) => this.acquireImage(url, signal), changed, this.onError, () => {
+							if (tile instanceof TilemapVisual) this.tilemaps.delete(tile);
+							depthDirty = true;
+						});
+						world.addChild(tile.display);
+						tilemaps.set(actor, tile);
+						this.tilemaps.add(tile);
+					}
+					tile.order = order;
+				}
+				const geometryLayer = actor.get(GeometryTilemapLayer.type);
+				if (geometryLayer) {
+					let tile = tilemaps.get(actor);
+					if (!tile) {
+						const created = new GeometryTilemapVisual(geometryLayer.map, () => {
+							this.geometryTilemaps.delete(created);
+							depthDirty = true;
+						});
+						tile = created;
+						world.addChild(tile.display);
+						tilemaps.set(actor, tile);
+						this.geometryTilemaps.add(created);
+					}
+					tile.order = order;
+				}
+				const component = actor.get(Renderable.type);
+				if (component) {
+					let entry = visuals.get(actor);
+					if (!entry) {
+						entry = create(actor, component);
+						visuals.set(actor, entry);
+					}
+					entry.order = order;
+				}
+				order++;
+			}
+		};
+		const sync = () => {
+			reconcile();
+			for (const entry of visuals.values()) update(entry);
+			for (const entry of tilemaps.values()) if (entry instanceof TilemapVisual) entry.sync();
+		};
+		const prepared = {
+			ready: async () => {
+				for (;;) {
+					if (disposed || this.dead || scene.disposed) throw new EngineError("GAME_DISPOSED", "Scene presentation has been disposed");
+					sync();
+					let pending = false;
+					for (const entry of visuals.values()) {
+						if (entry.error) throw entry.error;
+						if (entry.controller) pending = true;
+					}
+					for (const entry of tilemaps.values()) {
+						if (!(entry instanceof TilemapVisual)) continue;
+						if (entry.error) throw entry.error;
+						if (entry.controller) pending = true;
+					}
+					if (!pending) return;
+					wake ??= new Promise((resolve) => {
+						wakeResolve = resolve;
+					});
+					await wake;
+				}
+			},
+			render: (view) => {
+				if (disposed || this.dead || scene.disposed) return;
+				reconcile();
+				if (!root.parent) this.app.stage.addChild(root);
+				const c = view.clip;
+				if (c.x !== clipX || c.y !== clipY || c.width !== clipWidth || c.height !== clipHeight) {
+					clipX = c.x;
+					clipY = c.y;
+					clipWidth = c.width;
+					clipHeight = c.height;
+					mask.clear().rect(c.x, c.y, c.width, c.height).fill(16777215);
+				}
+				world.scale.set(view.scale);
+				world.position.set(view.x, view.y);
+				for (const entry of visuals.values()) {
+					update(entry);
+					if (entry.display) {
+						const t = entry.transform;
+						entry.display.visible = entry.actor.enabled && entry.component.enabled && entry.component.visible;
+						entry.display.alpha = entry.component.opacity;
+						if (entry.depth !== entry.component.zIndex) {
+							entry.depth = entry.component.zIndex;
+							depthDirty = true;
+						}
+						const x = t.x + entry.component.offsetX, y = t.y + entry.component.offsetY, rotation = t.rotation + entry.component.rotation, scaleX = entry.scaleX * t.scaleX * entry.component.scaleX, scaleY = entry.scaleY * t.scaleY * entry.component.scaleY;
+						if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(rotation) || !Number.isFinite(scaleX) || !Number.isFinite(scaleY)) throw new EngineError("INVALID_VALUE", "Composed visual transform must be finite");
+						entry.display.position.set(x, y);
+						entry.display.rotation = rotation;
+						entry.display.scale.set(scaleX, scaleY);
+					}
+				}
+				for (const entry of tilemaps.values()) {
+					entry.render(view);
+					if (entry.depth !== entry.map.zIndex) {
+						entry.depth = entry.map.zIndex;
+						depthDirty = true;
+					}
+				}
+				if (depthDirty) {
+					drawOrder.length = 0;
+					for (const entry of visuals.values()) if (entry.display) drawOrder.push({
+						display: entry.display,
+						order: entry.order,
+						zIndex: entry.component.zIndex
+					});
+					for (const entry of tilemaps.values()) drawOrder.push({
+						display: entry.display,
+						order: entry.order,
+						zIndex: entry.map.zIndex
+					});
+					drawOrder.sort((a, b) => a.zIndex - b.zIndex || a.order - b.order);
+					for (let i = 0; i < drawOrder.length; i++) {
+						const entry = drawOrder[i];
+						if (entry?.display) entry.display.zIndex = i;
+					}
+					depthDirty = false;
+				}
+				this.app.render();
+				if (this.pendingUITextKeys.size) pruneUITextKeys(this.app.renderer, this.pendingUITextKeys);
+			},
+			dispose: () => {
+				if (disposed) return;
+				disposed = true;
+				changed();
+				this.scenes.delete(prepared);
+				const entries = [...visuals.values()];
+				visuals.clear();
+				drawOrder.length = 0;
+				cleanupAll([
+					() => removeSceneCleanup?.(),
+					...entries.map((entry) => entry.dispose),
+					() => {
+						for (const entry of tilemaps.values()) {
+							entry.dispose();
+							if (entry instanceof TilemapVisual) this.tilemaps.delete(entry);
+							else this.geometryTilemaps.delete(entry);
+						}
+						tilemaps.clear();
+					},
+					() => root.destroy({
+						children: true,
+						context: true
+					})
+				], "Presentation cleanup failed");
+			}
+		};
+		removeSceneCleanup = scene.onDispose(prepared.dispose);
+		this.scenes.add(prepared);
+		try {
+			await prepared.ready?.();
+			return prepared;
+		} catch (error) {
+			prepared.dispose();
+			throw error;
+		}
+	}
+	resize(width, height, devicePixelRatio) {
+		if (!this.ready || this.dead) return;
+		if (this.app.renderer.resolution !== devicePixelRatio) for (const visual of this.canvasPresentations) visual.beforeResolutionChange();
+		this.app.renderer.resolution = devicePixelRatio;
+		this.app.renderer.resize(width, height);
+	}
+	destroyApp() {
+		if (this.ready) {
+			this.ready = false;
+			this.app.destroy({ removeView: true }, {
+				children: true,
+				context: true
+			});
+		}
+	}
+	dispose() {
+		if (this.dead) return;
+		this.dead = true;
+		const scenes = [...this.scenes];
+		this.scenes.clear();
+		cleanupAll([
+			...scenes.map((scene) => scene.dispose),
+			...[...this.canvasPresentations].map((p) => () => {
+				this.canvasPresentations.delete(p);
+				p.dispose();
+			}),
+			() => this.pendingUITextKeys.clear(),
+			() => this.images.dispose(),
+			() => this.destroyApp()
+		], "Renderer cleanup failed");
+	}
+};
+// packages/web/src/ui.ts
+var Layout = {
+	Column: "column",
+	Row: "row",
+	Grid: "grid"
+};
+var Theme = {
+	Dark: "dark",
+	Light: "light"
+};
+var Themes = {
+	dark: {
+		background: "#101922",
+		surface: "#172630",
+		text: "#eff7f6",
+		muted: "#afc4ca",
+		accent: "#73e3c0",
+		font: "system-ui, sans-serif"
+	},
+	light: {
+		background: "#eaf2ef",
+		surface: "#ffffff",
+		text: "#17332d",
+		muted: "#45645d",
+		accent: "#17654f",
+		font: "system-ui, sans-serif"
+	}
+};
+var Placement = {
+	Top: "top",
+	Center: "center",
+	Bottom: "bottom"
+};
+function textBinding(text) {
+	let value = text;
+	const listeners = /* @__PURE__ */ new Set();
+	let plan = [];
+	return {
+		get text() {
+			return value;
+		},
+		setText(next) {
+			if (next === value) return;
+			value = next;
+			const errors = [];
+			for (const listener of plan) if (listeners.has(listener)) try {
+				listener(value);
+			} catch (error) {
+				errors.push(error);
+			}
+			if (errors.length) throw new AggregateError(errors, "Text subscribers failed");
+		},
+		subscribe(listener) {
+			listeners.add(listener);
+			plan = [...listeners];
+			return () => {
+				listeners.delete(listener);
+				plan = [...listeners];
+			};
+		}
+	};
+}
+function withText(node, text) {
+	return Object.defineProperties(node, Object.getOwnPropertyDescriptors(textBinding(text)));
+}
+function Label(text, options = {}) {
+	return withText({
+		kind: "label",
+		muted: options.muted ?? false
+	}, text);
+}
+function Button(text, onClick) {
+	return withText({
+		kind: "button",
+		onClick
+	}, text);
+}
+function HoldButton(text, onHold) {
+	return withText({
+		kind: "hold-button",
+		onHold
+	}, text);
+}
+function Panel(children, options = {}) {
+	return {
+		kind: "panel",
+		children: [...children],
+		layout: options.layout ?? Layout.Column,
+		placement: options.placement ?? Placement.Top,
+		...options.title === void 0 ? {} : { title: options.title }
+	};
+}
+function mountUI(nodes, onError) {
+	const element = document.createElement("div");
+	element.className = "s-ui";
+	const controller = new AbortController(), subscriptions = [];
+	let disposed = false;
+	const report = (error) => {
+		try {
+			onError(error);
+		} catch {}
+	};
+	const render = (node) => {
+		if (node.kind === "label") {
+			const label = document.createElement("p");
+			label.textContent = node.text;
+			if (node.muted) label.className = "s-muted";
+			subscriptions.push(node.subscribe((text) => {
+				label.textContent = text;
+			}));
+			return label;
+		}
+		if (node.kind === "button" || node.kind === "hold-button") {
+			const button = document.createElement("button");
+			button.type = "button";
+			button.textContent = node.text;
+			subscriptions.push(node.subscribe((text) => {
+				button.textContent = text;
+			}));
+			const options = { signal: controller.signal };
+			registerGameButton(button, controller.signal);
+			if (node.kind === "button") {
+				let pending = false;
+				button.addEventListener("click", () => {
+					if (pending || button.disabled) return;
+					try {
+						const result = node.onClick(controller.signal);
+						if (!result || typeof result.then !== "function") return;
+						pending = true;
+						button.setAttribute("aria-disabled", "true");
+						button.setAttribute("aria-busy", "true");
+						button.tabIndex = -1;
+						Promise.resolve(result).catch((error) => {
+							if (!controller.signal.aborted) report(error);
+						}).finally(() => {
+							pending = false;
+							button.removeAttribute("aria-disabled");
+							button.removeAttribute("aria-busy");
+							button.tabIndex = 0;
+						});
+					} catch (error) {
+						if (!controller.signal.aborted) report(error);
+					}
+				}, options);
+			} else {
+				button.classList.add("s-hold");
+				button.setAttribute("aria-pressed", "false");
+				const pointers = /* @__PURE__ */ new Set(), keys = /* @__PURE__ */ new Set();
+				let held = false;
+				const update = () => {
+					const next = pointers.size > 0 || keys.size > 0;
+					if (held === next) return;
+					held = next;
+					button.setAttribute("aria-pressed", String(held));
+					try {
+						node.onHold(held);
+					} catch (error) {
+						report(error);
+					}
+				};
+				const release = () => {
+					pointers.clear();
+					keys.clear();
+					update();
+				};
+				button.addEventListener("pointerdown", (event) => {
+					if (event.button !== 0) return;
+					pointers.add(event.pointerId);
+					button.setPointerCapture(event.pointerId);
+					update();
+				}, options);
+				for (const type of [
+					"pointerup",
+					"pointercancel",
+					"lostpointercapture"
+				]) button.addEventListener(type, (event) => {
+					pointers.delete(event.pointerId);
+					update();
+				}, options);
+				button.addEventListener("keydown", (event) => {
+					if (event.isComposing || event.keyCode === 229) return;
+					if (event.code !== "Space" && event.code !== "Enter") return;
+					event.preventDefault();
+					keys.add(event.code);
+					update();
+				}, options);
+				button.addEventListener("keyup", (event) => {
+					if (event.isComposing || event.keyCode === 229) return;
+					if (event.code !== "Space" && event.code !== "Enter") return;
+					event.preventDefault();
+					keys.delete(event.code);
+					update();
+				}, options);
+				button.addEventListener("blur", () => {
+					keys.clear();
+					update();
+				}, options);
+				window.addEventListener("blur", release, options);
+				document.addEventListener("visibilitychange", () => {
+					if (document.hidden) release();
+				}, options);
+				subscriptions.push(release);
+			}
+			return button;
+		}
+		const panel = document.createElement("section");
+		panel.className = "s-panel s-" + node.layout + " s-" + node.placement;
+		if (node.title) {
+			const title = document.createElement("h2");
+			title.textContent = node.title;
+			panel.append(title);
+		}
+		panel.append(...node.children.map(render));
+		return panel;
+	};
+	const dispose = () => {
+		if (disposed) return;
+		disposed = true;
+		controller.abort();
+		const cleanup = subscriptions.splice(0).reverse();
+		cleanupAll([...cleanup, () => element.remove()], "UI cleanup failed");
+	};
+	try {
+		element.append(...nodes.map(render));
+	} catch (error) {
+		try {
+			dispose();
+		} catch (cleanupError) {
+			throw new AggregateError([error, cleanupError], "UI creation and cleanup failed");
+		}
+		throw error;
+	}
+	return {
+		element,
+		dispose
+	};
+}
+// packages/web/src/game.ts
+var Game = class {
+	engine;
+	element;
+	camera;
+	renderer;
+	keyboard;
+	pointers;
+	pointerChannels = /* @__PURE__ */ new WeakMap();
+	canvas;
+	canvasPresentation;
+	defaultCanvas;
+	get pointer() {
+		this.assertAlive();
+		return this.channelFor(this.engine.scene);
+	}
+	get pointerDiagnostics() {
+		return this.pointers.routing.diagnostics;
+	}
+	channelFor(scene) {
+		let channel = this.pointerChannels.get(scene);
+		if (!channel) {
+			channel = new ScenePointer(scene);
+			this.pointerChannels.set(scene, channel);
+		}
+		return channel;
+	}
+	observer;
+	frames;
+	options;
+	resolution;
+	aspect;
+	maxDelta;
+	fixed;
+	playback;
+	playbackScene;
+	removeReplayOwner;
+	requestedViewport;
+	projection;
+	projectionDirty = true;
+	cameraX = NaN;
+	cameraY = NaN;
+	cameraZoom = NaN;
+	width = 800;
+	height = 450;
+	ratio = 1;
+	scenes = /* @__PURE__ */ new Map();
+	pendingScenes = /* @__PURE__ */ new Map();
+	defaultUI = [];
+	ui;
+	prepared;
+	startPromise;
+	queue = Promise.resolve();
+	frame;
+	previousTime;
+	dead = false;
+	ready = false;
+	rendererReady = false;
+	rendererSized = false;
+	staging;
+	shutdown = new AbortController();
+	errorBox;
+	constructor(options = {}) {
+		this.options = options;
+		this.engine = new Engine(options.seed === void 0 ? {} : { seed: options.seed });
+		this.fixed = options.fixedStep ? new FixedStepRunner(this.engine, options.fixedStep) : void 0;
+		this.camera = options.camera ?? new Camera();
+		this.maxDelta = positive(options.maxDelta ?? .05, "maxDelta");
+		this.resolution = {
+			width: positive(options.resolution?.width ?? 800, "resolution.width"),
+			height: positive(options.resolution?.height ?? 450, "resolution.height")
+		};
+		this.aspect = options.aspect ?? Aspect.Fit;
+		this.requestedViewport = options.viewport ? { ...options.viewport } : void 0;
+		this.projection = createViewTransform({
+			viewport: this.requestedViewport ?? {
+				x: 0,
+				y: 0,
+				width: this.width,
+				height: this.height
+			},
+			resolution: this.resolution,
+			aspect: this.aspect,
+			camera: this.camera
+		});
+		if (options.pixelRatio !== void 0) positive(options.pixelRatio, "pixelRatio");
+		const theme = Themes[options.theme ?? Theme.Dark];
+		if (!theme) throw new EngineError("INVALID_THEME", "Unknown theme");
+		const tokens = {
+			...theme,
+			...options.tokens
+		};
+		this.element = document.createElement("div");
+		this.element.className = "simpludify";
+		this.element.tabIndex = 0;
+		this.element.setAttribute("aria-label", "Game. Focus this area to use movement keys.");
+		for (const [name, value] of Object.entries(tokens)) this.element.style.setProperty(`--s-${name}`, value);
+		this.errorBox = document.createElement("p");
+		this.errorBox.className = "s-error";
+		this.errorBox.setAttribute("role", "alert");
+		this.errorBox.hidden = true;
+		this.element.append(this.errorBox);
+		(options.parent ?? document.body).append(this.element);
+		try {
+			this.renderer = options.renderer?.(this.element) ?? new PixiRenderer(this.element, tokens.background, (error) => this.report(error));
+		} catch (error) {
+			this.element.remove();
+			this.engine.dispose();
+			throw error;
+		}
+		this.frames = options.frames ?? {
+			request: (callback) => requestAnimationFrame(callback),
+			cancel: (handle) => cancelAnimationFrame(handle)
+		};
+		this.keyboard = new BrowserInput(this.element, this.engine.input);
+		this.pointers = new BrowserPointer(this.element, (event) => {
+			const rect = this.element.getBoundingClientRect();
+			if (rect.width <= 0 || rect.height <= 0) throw new EngineError("VIEWPORT_UNAVAILABLE", "Game has no visible bounds");
+			const screen = screenPoint((event.clientX - rect.left) * this.width / rect.width, (event.clientY - rect.top) * this.height / rect.height);
+			return {
+				screen,
+				world: this.screenToWorld(screen),
+				view: this.view
+			};
+		}, this.report, () => this.canvasPresentation?.update(this.width, this.height));
+		document.addEventListener("visibilitychange", () => {
+			this.previousTime = void 0;
+			this.fixed?.reset();
+			this.engine.input.clear();
+		}, { signal: this.shutdown.signal });
+		this.observer = new ResizeObserver(() => {
+			try {
+				this.resize();
+			} catch (error) {
+				this.report(error);
+				this.dispose();
+			}
+		});
+		this.observer.observe(this.element);
+	}
+	assertAlive() {
+		if (this.dead) throw new EngineError("GAME_DISPOSED", "Game has been disposed");
+	}
+	get tweens() {
+		return this.engine.scene.tweens;
+	}
+	get presentationTweens() {
+		return this.engine.scene.presentationTweens;
+	}
+	get paused() {
+		return this.engine.paused;
+	}
+	pause() {
+		this.assertAlive();
+		this.pointers.release();
+		this.engine.pause();
+		this.previousTime = void 0;
+		this.fixed?.reset();
+	}
+	resume() {
+		this.assertAlive();
+		this.pointers.release();
+		this.engine.resume();
+		this.previousTime = void 0;
+		this.fixed?.reset();
+	}
+	/** Configure inside the initial Scene factory after game setup, before the first Engine step. */
+	playReplay(data, options) {
+		this.assertAlive();
+		if (options.scene !== this.engine.scene && options.scene !== this.staging) throw new EngineError("REPLAY_STATE", "Replay Scene must be current or staged by this Game");
+		if (this.playback) throw new EngineError("REPLAY_STATE", "Game already has a Replay player");
+		const player = new ReplayPlayer(this.engine, data, options);
+		this.playback = player;
+		this.playbackScene = options.scene;
+		try {
+			this.removeReplayOwner = options.scene.onDispose(() => this.stopReplay());
+		} catch (error) {
+			this.stopReplay();
+			throw error;
+		}
+		return player;
+	}
+	stopReplay() {
+		const player = this.playback, off = this.removeReplayOwner;
+		this.playback = void 0;
+		this.playbackScene = void 0;
+		this.removeReplayOwner = void 0;
+		off?.();
+		player?.dispose();
+		this.previousTime = void 0;
+		this.fixed?.reset();
+	}
+	add(actor) {
+		this.assertAlive();
+		return this.engine.scene.add(actor);
+	}
+	/** Scene-owned Actions for the current Scene. In a staged factory use context.actions. */
+	actions(actions, bindings) {
+		this.assertAlive();
+		return new ActionController(actions, {
+			scene: this.engine.scene,
+			input: this.engine.input,
+			...bindings === void 0 ? {} : { bindings }
+		});
+	}
+	remove(actor) {
+		this.assertAlive();
+		return this.engine.scene.remove(actor);
+	}
+	canvasUI(root, options = {}) {
+		this.assertAlive();
+		if (this.startPromise || this.defaultCanvas) throw new EngineError("UI_ALREADY_STARTED", "Define one default Canvas UI before run");
+		this.defaultCanvas = new CanvasUI(this.engine.scene, root, options);
+		return this.defaultCanvas;
+	}
+	uiOverlay(...nodes) {
+		this.assertAlive();
+		if (this.startPromise) throw new EngineError("UI_ALREADY_STARTED", "Define default UI before run");
+		this.defaultUI.push(...nodes);
+	}
+	scene(id, setup) {
+		this.assertAlive();
+		if (this.scenes.has(id)) throw new EngineError("DUPLICATE_SCENE", "Scene id is already registered", { sceneId: id });
+		this.scenes.set(id, setup);
+		return this;
+	}
+	wait(promise) {
+		if (this.dead) return Promise.reject(new EngineError("GAME_DISPOSED", "Game has been disposed"));
+		const signal = this.shutdown.signal;
+		return new Promise((resolve, reject) => {
+			const abort = () => {
+				signal.removeEventListener("abort", abort);
+				reject(new EngineError("GAME_DISPOSED", "Game has been disposed"));
+			};
+			signal.addEventListener("abort", abort, { once: true });
+			promise.then(resolve, reject).finally(() => signal.removeEventListener("abort", abort));
+		});
+	}
+	run(initialScene) {
+		if (this.dead) return Promise.reject(new EngineError("GAME_DISPOSED", "Game has been disposed"));
+		if (this.startPromise) return this.startPromise;
+		this.startPromise = (async () => {
+			try {
+				await this.wait(this.renderer.init());
+				this.assertAlive();
+				this.rendererReady = true;
+				if (initialScene !== void 0) await this.navigate(initialScene);
+				else await this.present(this.engine.scene, this.defaultUI, this.defaultCanvas);
+				this.assertAlive();
+				this.defaultCanvas = void 0;
+				this.defaultUI.length = 0;
+				this.ready = true;
+				this.resize();
+				this.render();
+				this.assertAlive();
+				this.frame = this.frames.request(this.tick);
+			} catch (error) {
+				this.dispose();
+				throw error;
+			}
+		})();
+		return this.startPromise;
+	}
+	goTo(id) {
+		if (this.dead) return Promise.reject(new EngineError("GAME_DISPOSED", "Game has been disposed"));
+		if (!this.ready) return Promise.reject(new EngineError("GAME_NOT_READY", "Await run before navigating"));
+		return this.navigate(id);
+	}
+	navigate(id) {
+		const setup = this.scenes.get(id);
+		if (!setup) return Promise.reject(new EngineError("SCENE_NOT_FOUND", "Unknown scene", { sceneId: id }));
+		const existing = this.pendingScenes.get(id);
+		if (existing) return existing;
+		const task = this.queue.then(async () => {
+			this.assertAlive();
+			const scene = new Scene(id), nodes = [], controller = new AbortController();
+			let canvas;
+			const pointer = this.channelFor(scene);
+			this.staging = scene;
+			scene.onDispose(() => controller.abort());
+			try {
+				await this.wait(Promise.resolve(setup({
+					scene,
+					get tweens() {
+						return scene.tweens;
+					},
+					get presentationTweens() {
+						return scene.presentationTweens;
+					},
+					signal: controller.signal,
+					add: (actor) => scene.add(actor),
+					ui: (...items) => nodes.push(...items),
+					pointer,
+					canvasUI: (root, options) => {
+						if (canvas) throw new EngineError("UI_OWNERSHIP", "A Scene has one Canvas UI root");
+						canvas = new CanvasUI(scene, root, options);
+						return canvas;
+					},
+					actions: (actions, bindings) => new ActionController(actions, {
+						scene,
+						input: this.engine.input,
+						...bindings === void 0 ? {} : { bindings }
+					}),
+					onUpdate: (callback) => scene.onUpdate(callback),
+					onActivate: (callback) => scene.onActivate(callback),
+					onDeactivate: (callback) => scene.onDeactivate(callback),
+					onDispose: (callback) => scene.onDispose(callback)
+				})));
+				this.assertAlive();
+				await this.present(scene, nodes, canvas);
+			} catch (error) {
+				try {
+					scene.dispose();
+				} catch (cleanupError) {
+					this.report(cleanupError);
+				}
+				throw error;
+			} finally {
+				if (this.staging === scene) this.staging = void 0;
+			}
+		}).finally(() => {
+			if (this.pendingScenes.get(id) === task) this.pendingScenes.delete(id);
+		});
+		this.pendingScenes.set(id, task);
+		this.queue = task.catch(() => {});
+		return task;
+	}
+	async present(scene, nodes, canvas) {
+		let prepared, ui, committed = false;
+		let canvasPresentation;
+		try {
+			const preparing = this.renderer.prepare(scene);
+			preparing.then((value) => {
+				if (this.dead || scene.disposed) try {
+					value.dispose();
+				} catch (error) {
+					this.report(error);
+				}
+			}, () => {});
+			prepared = await this.wait(preparing);
+			this.assertAlive();
+			ui = mountUI(nodes, this.report);
+			scene.onDispose(ui.dispose);
+			if (canvas) {
+				canvas.setErrorHandler(this.report);
+				const renderer = this.renderer;
+				if (!renderer.prepareCanvasUI) throw new EngineError("RENDERER_CAPABILITY", "Renderer does not support Canvas UI");
+				canvasPresentation = renderer.prepareCanvasUI(canvas, this.pointers.routing);
+				scene.onDispose(() => canvasPresentation?.dispose());
+			}
+			scene.markReady();
+			this.errorBox.hidden = true;
+			try {
+				if (this.playback && this.playbackScene !== scene) this.stopReplay();
+				this.engine.activate(scene);
+			} catch (error) {
+				if (this.engine.scene !== scene || scene.state !== SceneState.Active) throw error;
+				this.report(error);
+			}
+			this.assertAlive();
+			const oldPrepared = this.prepared, oldUI = this.ui, oldCanvas = this.canvasPresentation;
+			this.prepared = prepared;
+			this.ui = ui;
+			this.canvas = canvas;
+			this.canvasPresentation = canvasPresentation;
+			this.pointers.routing.setScene(this.channelFor(scene), canvas);
+			committed = true;
+			this.element.append(ui.element);
+			for (const cleanup of [
+				() => oldPrepared?.dispose(),
+				() => oldUI?.dispose(),
+				() => oldCanvas?.dispose()
+			]) try {
+				cleanup();
+			} catch (error) {
+				this.report(error);
+			}
+			this.assertAlive();
+			this.previousTime = void 0;
+			this.fixed?.reset();
+			this.updateProjection();
+			this.render();
+			this.assertAlive();
+		} catch (error) {
+			if (!committed) for (const cleanup of [
+				() => prepared?.dispose(),
+				() => ui?.dispose(),
+				() => canvasPresentation?.dispose()
+			]) try {
+				cleanup();
+			} catch (cleanupError) {
+				this.report(cleanupError);
+			}
+			if (committed) this.dispose();
+			throw error;
+		}
+	}
+	get viewport() {
+		this.updateProjection();
+		return this.projection.viewport;
+	}
+	get view() {
+		this.updateProjection();
+		return this.projection;
+	}
+	setViewport(viewport) {
+		this.assertAlive();
+		const next = viewport ? { ...viewport } : void 0;
+		createViewTransform({
+			viewport: next ?? {
+				x: 0,
+				y: 0,
+				width: this.width,
+				height: this.height
+			},
+			resolution: this.resolution,
+			aspect: this.aspect,
+			camera: this.camera
+		});
+		this.requestedViewport = next;
+		this.projectionDirty = true;
+		this.updateProjection();
+		if (this.ready) this.render();
+	}
+	worldToScreen(point) {
+		return worldToScreen(this.view, point);
+	}
+	screenToWorld(point) {
+		return screenToWorld(this.view, point);
+	}
+	pointerToWorld(pointer) {
+		const rect = this.element.getBoundingClientRect();
+		if (rect.width <= 0 || rect.height <= 0) throw new EngineError("VIEWPORT_UNAVAILABLE", "Game has no visible bounds");
+		return this.screenToWorld(screenPoint((pointer.clientX - rect.left) * this.width / rect.width, (pointer.clientY - rect.top) * this.height / rect.height));
+	}
+	async whenReady() {
+		if (!this.startPromise) throw new EngineError("GAME_NOT_READY", "Call run before waiting for resources");
+		await this.startPromise;
+		this.assertAlive();
+		const prepared = this.prepared;
+		this.render();
+		await this.wait(prepared?.ready?.() ?? Promise.resolve());
+		this.assertAlive();
+		if (prepared !== this.prepared) throw new EngineError("GAME_DISPOSED", "Scene presentation changed while waiting for resources");
+		this.render();
+	}
+	updateProjection() {
+		const v = this.requestedViewport, c = this.camera;
+		if (!this.projectionDirty && this.cameraX === c.x && this.cameraY === c.y && this.cameraZoom === c.zoom) return;
+		this.projectionDirty = false;
+		this.cameraX = c.x;
+		this.cameraY = c.y;
+		this.cameraZoom = c.zoom;
+		this.projection = createViewTransform({
+			viewport: v ?? {
+				x: 0,
+				y: 0,
+				width: this.width,
+				height: this.height
+			},
+			resolution: this.resolution,
+			aspect: this.aspect,
+			camera: c
+		});
+	}
+	resize() {
+		if (this.dead || !this.rendererReady) return;
+		const width = this.element.clientWidth, height = this.element.clientHeight;
+		if (width <= 0 || height <= 0) return;
+		const ratio = this.options.pixelRatio ?? Math.min(window.devicePixelRatio || 1, 2);
+		if (this.rendererSized && this.width === width && this.height === height && this.ratio === ratio) return;
+		this.rendererSized = true;
+		if (this.width !== width || this.height !== height) this.projectionDirty = true;
+		this.width = width;
+		this.height = height;
+		this.ratio = ratio;
+		this.renderer.resize(width, height, this.ratio);
+		this.updateProjection();
+		if (this.ready) this.render();
+	}
+	render() {
+		this.updateProjection();
+		this.canvasPresentation?.update(this.width, this.height);
+		this.prepared?.render(this.projection);
+	}
+	tick = (time) => {
+		if (this.dead) return;
+		try {
+			if (document.hidden) {
+				this.canvas?.stopMotion();
+				this.previousTime = void 0;
+				this.fixed?.reset();
+				this.engine.input.clear();
+			} else {
+				const elapsed = this.previousTime === void 0 ? 0 : Math.max(0, (time - this.previousTime) / 1e3);
+				this.previousTime = time;
+				if (this.playback) this.playback.advance(elapsed, this.options.fixedStep?.maxSteps ?? 8);
+				else if (this.fixed) this.fixed.advance(elapsed);
+				else this.engine.step(Math.min(this.maxDelta, elapsed));
+				if (!this.dead && !this.engine.scene.disposed) this.engine.scene.advancePresentation(Math.min(this.maxDelta, elapsed));
+				if (this.engine.paused) this.canvas?.stopMotion();
+				else this.canvas?.advance(elapsed);
+				if (this.ratio !== (this.options.pixelRatio ?? Math.min(window.devicePixelRatio || 1, 2))) this.resize();
+				this.render();
+			}
+			if (!this.dead) this.frame = this.frames.request(this.tick);
+		} catch (error) {
+			this.report(error);
+			this.dispose();
+		}
+	};
+	report = (error) => {
+		this.errorBox.textContent = error instanceof Error ? error.message : String(error);
+		this.errorBox.hidden = false;
+		try {
+			if (this.options.onError) this.options.onError(error);
+			else console.error(error);
+		} catch {}
+	};
+	dispose() {
+		if (this.dead) return;
+		this.dead = true;
+		this.shutdown.abort();
+		if (this.frame !== void 0) this.frames.cancel(this.frame);
+		for (const cleanup of [
+			() => this.stopReplay(),
+			() => this.staging?.dispose(),
+			() => this.pointers.dispose(),
+			() => this.keyboard.dispose(),
+			() => this.canvasPresentation?.dispose(),
+			() => this.canvas?.dispose(),
+			() => this.observer.disconnect(),
+			() => this.ui?.dispose(),
+			() => this.prepared?.dispose(),
+			() => this.renderer.dispose(),
+			() => this.engine.dispose(),
+			() => this.element.remove()
+		]) try {
+			cleanup();
+		} catch (error) {
+			this.report(error);
+		}
+		this.ui = void 0;
+		this.prepared = void 0;
+		this.staging = void 0;
+		this.canvas = void 0;
+		this.canvasPresentation = void 0;
+		this.defaultCanvas = void 0;
+		this.defaultUI.length = 0;
+		this.scenes.clear();
+		this.pendingScenes.clear();
+	}
+};
+export { BrowserInput, Button, CanvasButton, Game, HoldButton, Label, Layout, Panel, PixiRenderer, Placement, Theme, Themes, browserAbortSignal, mountUI };
+
+//# sourceMappingURL=index.js.map