@number10/phaserjsx 4.0.0 → 4.2.0

package/dist/{custom-BN31OAJq.cjs → custom-DTd4LxDn.cjs}

@@ -1,29 +1,7 @@
-//#region \0rolldown/runtime.js
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-//#endregion
+const require_chunk = require("./chunk-C2EiDwsr.cjs");
 const require_jsx_runtime = require("./jsx-runtime.cjs");
 let phaser = require("phaser");
-phaser = __toESM(phaser, 1);
+phaser = require_chunk.__toESM(phaser, 1);
 let _preact_signals_core = require("@preact/signals-core");
 //#region src/utils/phaser-guards.ts
 /**
@@ -1135,8 +1113,8 @@ var spritePatcher = (node, prev, next) => {
 	applySpriteLayout(node, prev, next);
 };
 //#endregion
-//#region src/utils/fast-deep-equal.ts
-var import_fast_deep_equal = /* @__PURE__ */ __toESM((/* @__PURE__ */ __commonJSMin(((exports, module) => {
+//#region ../../node_modules/.pnpm/fast-deep-equal@3.1.3/node_modules/fast-deep-equal/index.js
+var require_fast_deep_equal = /* @__PURE__ */ require_chunk.__commonJSMin(((exports, module) => {
 	module.exports = function equal(a, b) {
 		if (a === b) return true;
 		if (a && b && typeof a == "object" && typeof b == "object") {
@@ -1163,7 +1141,10 @@ var import_fast_deep_equal = /* @__PURE__ */ __toESM((/* @__PURE__ */ __commonJS
 		}
 		return a !== a && b !== b;
 	};
-})))(), 1);
+}));
+//#endregion
+//#region src/utils/fast-deep-equal.ts
+var import_fast_deep_equal = /* @__PURE__ */ require_chunk.__toESM(require_fast_deep_equal(), 1);
 var equal = typeof import_fast_deep_equal === "function" ? import_fast_deep_equal : import_fast_deep_equal.default;
 /**
 * @license
@@ -1175,7 +1156,7 @@ var equal = typeof import_fast_deep_equal === "function" ? import_fast_deep_equa
 */
 //#endregion
 //#region src/dev-config.ts
-var import_lodash = (/* @__PURE__ */ __commonJSMin(((exports, module) => {
+var import_lodash = (/* @__PURE__ */ require_chunk.__commonJSMin(((exports, module) => {
 	(function() {
 		/** Used as a safe reference for `undefined` in pre-ES5 environments. */
 		var undefined;
@@ -16572,6 +16553,111 @@ var tileSpritePatcher = (_node, _prev, _next) => {
 	throw new Error("TileSprite component not implemented yet. This is a placeholder for architecture planning.");
 };
 //#endregion
+//#region src/components/backgroundImage.ts
+var sceneBackgroundTextureCaches = /* @__PURE__ */ new WeakMap();
+function hasRenderableBackground(props) {
+	const hasBackground = props.backgroundColor !== void 0;
+	const hasBorder = (props.borderWidth ?? 0) > 0 && props.borderColor !== void 0;
+	return hasBackground || hasBorder;
+}
+function drawBackground(graphics, props, width, height) {
+	const bgColor = props.backgroundColor;
+	const bgAlpha = props.backgroundAlpha ?? 1;
+	const cornerRadius = props.cornerRadius ?? 0;
+	const borderColor = props.borderColor;
+	const borderWidth = props.borderWidth ?? 0;
+	const borderAlpha = props.borderAlpha ?? 1;
+	const hasBorder = borderWidth > 0 && borderColor !== void 0;
+	if (bgColor !== void 0) graphics.fillStyle(bgColor, bgAlpha);
+	if (hasBorder) graphics.lineStyle(borderWidth, borderColor, borderAlpha);
+	if (cornerRadius !== 0) {
+		if (bgColor !== void 0) graphics.fillRoundedRect(0, 0, width, height, cornerRadius);
+		if (hasBorder) graphics.strokeRoundedRect(0, 0, width, height, cornerRadius);
+	} else {
+		if (bgColor !== void 0) graphics.fillRect(0, 0, width, height);
+		if (hasBorder) graphics.strokeRect(0, 0, width, height);
+	}
+}
+function getSceneBackgroundTextureCache(scene) {
+	let cache = sceneBackgroundTextureCaches.get(scene);
+	if (!cache) {
+		cache = /* @__PURE__ */ new Map();
+		sceneBackgroundTextureCaches.set(scene, cache);
+	}
+	return cache;
+}
+function hashCacheKey(value) {
+	let hash = 2166136261;
+	for (let i = 0; i < value.length; i++) {
+		hash ^= value.charCodeAt(i);
+		hash = Math.imul(hash, 16777619);
+	}
+	return (hash >>> 0).toString(36);
+}
+function normalizeCornerRadius$1(radius) {
+	if (typeof radius === "number") return String(radius);
+	if (!radius) return "0";
+	return `${radius.tl ?? 0},${radius.tr ?? 0},${radius.bl ?? 0},${radius.br ?? 0}`;
+}
+function getBackgroundImageCacheKey(props, width, height) {
+	return [
+		Math.max(1, Math.ceil(width)),
+		Math.max(1, Math.ceil(height)),
+		props.backgroundColor ?? "none",
+		props.backgroundAlpha ?? 1,
+		normalizeCornerRadius$1(props.cornerRadius),
+		props.borderWidth ?? 0,
+		props.borderColor ?? "none",
+		props.borderAlpha ?? 1
+	].join("|");
+}
+function createBackgroundImage(scene, props, width, height) {
+	if (!hasRenderableBackground(props)) return;
+	const textureWidth = Math.max(1, Math.ceil(width));
+	const textureHeight = Math.max(1, Math.ceil(height));
+	const cacheKey = getBackgroundImageCacheKey(props, textureWidth, textureHeight);
+	const textureKey = `__phaserjsx_bg_${hashCacheKey(cacheKey)}`;
+	const cache = getSceneBackgroundTextureCache(scene);
+	let entry = cache.get(cacheKey);
+	if (!entry || !scene.textures.exists(entry.textureKey)) {
+		const graphics = scene.add.graphics();
+		drawBackground(graphics, props, textureWidth, textureHeight);
+		graphics.generateTexture(textureKey, textureWidth, textureHeight);
+		graphics.destroy();
+		entry = {
+			textureKey,
+			refs: 0
+		};
+		cache.set(cacheKey, entry);
+	}
+	entry.refs++;
+	const background = scene.add.image(0, 0, entry.textureKey);
+	background.setOrigin(0, 0);
+	background.__isBackground = true;
+	background.__backgroundCacheKey = cacheKey;
+	background.__backgroundTextureKey = entry.textureKey;
+	background.once("destroy", () => releaseBackgroundImageTexture(background));
+	return background;
+}
+function releaseBackgroundImageTexture(background) {
+	if (background.__backgroundTextureReleased) return;
+	const scene = background.scene;
+	const cacheKey = background.__backgroundCacheKey;
+	background.__backgroundTextureReleased = true;
+	if (!scene || !cacheKey) return;
+	const cache = sceneBackgroundTextureCaches.get(scene);
+	const entry = cache?.get(cacheKey);
+	if (!cache || !entry) return;
+	entry.refs--;
+	if (entry.refs <= 0) {
+		if (scene.textures.exists(entry.textureKey)) scene.textures.remove(entry.textureKey);
+		cache.delete(cacheKey);
+	}
+}
+function destroyBackgroundImage(background) {
+	background.destroy();
+}
+//#endregion
 //#region src/components/appliers/applyBackground.ts
 /**
 * Shared property appliers for component patching
@@ -16614,37 +16700,24 @@ function applyBackgroundProps(container, prev, next) {
 	const nextHasGraphics = nextBgColor !== void 0 || nextHasBorder;
 	if (prevHasGraphics && !nextHasGraphics) {
 		if (container.__background) {
-			container.__background.destroy();
+			destroyBackgroundImage(container.__background);
 			delete container.__background;
 		}
 	} else if (!prevHasGraphics && nextHasGraphics) {
 		if (container.scene) {
-			const background = container.scene.add.graphics();
-			if (nextBgColor !== void 0) background.fillStyle(nextBgColor, nextBgAlpha);
-			if (nextHasBorder) background.lineStyle(nextBorderWidth, nextBorderColor, nextBorderAlpha);
-			if (nextCornerRadius !== 0) {
-				if (nextBgColor !== void 0) background.fillRoundedRect(0, 0, nextWidth, nextHeight, nextCornerRadius);
-				if (nextHasBorder) background.strokeRoundedRect(0, 0, nextWidth, nextHeight, nextCornerRadius);
-			} else {
-				if (nextBgColor !== void 0) background.fillRect(0, 0, nextWidth, nextHeight);
-				if (nextHasBorder) background.strokeRect(0, 0, nextWidth, nextHeight);
-			}
+			const background = createBackgroundImage(container.scene, next, nextWidth, nextHeight);
+			if (!background) return;
 			container.addAt(background, 0);
 			container.__background = background;
-			background.__isBackground = true;
 		}
 	} else if (container.__background && nextHasGraphics) {
 		if (prevBgColor !== nextBgColor || prevBgAlpha !== nextBgAlpha || prevWidth !== nextWidth || prevHeight !== nextHeight || prevCornerRadius !== nextCornerRadius || prevBorderWidth !== nextBorderWidth || prevBorderColor !== nextBorderColor || prevBorderAlpha !== nextBorderAlpha) {
-			container.__background.clear();
-			if (nextBgColor !== void 0) container.__background.fillStyle(nextBgColor, nextBgAlpha);
-			if (nextHasBorder) container.__background.lineStyle(nextBorderWidth, nextBorderColor, nextBorderAlpha);
-			if (nextCornerRadius !== 0) {
-				if (nextBgColor !== void 0) container.__background.fillRoundedRect(0, 0, nextWidth, nextHeight, nextCornerRadius);
-				if (nextHasBorder) container.__background.strokeRoundedRect(0, 0, nextWidth, nextHeight, nextCornerRadius);
-			} else {
-				if (nextBgColor !== void 0) container.__background.fillRect(0, 0, nextWidth, nextHeight);
-				if (nextHasBorder) container.__background.strokeRect(0, 0, nextWidth, nextHeight);
-			}
+			const oldBackground = container.__background;
+			const background = createBackgroundImage(container.scene, next, nextWidth, nextHeight);
+			if (!background) return;
+			container.addAt(background, 0);
+			container.__background = background;
+			destroyBackgroundImage(oldBackground);
 		}
 	}
 }
@@ -16865,7 +16938,7 @@ var GestureManager = class {
 	/**
 	* Handle global pointer down event
 	* Registers all containers that were hit for move event tracking
-	* Only the topmost gets touch/longpress callbacks
+	* Only the topmost gets touch/long-press callbacks
 	*/
 	handlePointerDown(pointer) {
 		const hitContainers = /* @__PURE__ */ new Set();
@@ -17419,403 +17492,6 @@ function applyGesturesProps(scene, container, prev, next) {
 	}
 }
 //#endregion
-//#region src/clip/stencil-clip.ts
-/**
-* WebGL stencil-buffer clip for Phaser 4 Containers.
-*
-* Supports arbitrary nesting via the INCR/DECR model: each clip level
-* increments the stencil on enter and decrements on exit, so child clips are
-* automatically intersected with their parent clips at the hardware level.
-*
-* Shape variants:
-*   - Plain rectangle   (cornerRadius omitted or 0)
-*   - Rounded rectangle (uniform radius or per-corner object)
-*
-* A single SDF-based shader handles both variants.  For plain rectangles
-* u_radii is vec4(0) and the `discard` branch never fires — no overhead
-* compared to a rectangle-only shader.
-*
-* Transforms (translate, scale, rotation) are fully supported: the quad
-* corners are transformed through `container.getWorldTransformMatrix()` at
-* render time, so no per-layout world-position tracking is needed.
-*/
-/**
-* Shared depth counter per GL context.
-* Incremented before each clip's INCR pass, decremented after the DECR pass.
-* Reset to 0 at the start of every frame via a `prerender` hook.
-*/
-var _depthByGl = /* @__PURE__ */ new WeakMap();
-function getDepth(gl) {
-	let d = _depthByGl.get(gl);
-	if (!d) {
-		d = { value: 0 };
-		_depthByGl.set(gl, d);
-	}
-	return d;
-}
-var _prerenderHooked = /* @__PURE__ */ new WeakSet();
-/**
-* Registers a per-frame `prerender` listener that resets the depth counter.
-* Registered at most once per Phaser.Game instance.
-*/
-function ensurePrerenderReset(gl, game) {
-	if (_prerenderHooked.has(game)) return;
-	_prerenderHooked.add(game);
-	game.events.on("prerender", () => {
-		const d = _depthByGl.get(gl);
-		if (d) d.value = 0;
-		const fbo = _fboPatchByGl.get(gl);
-		if (fbo) {
-			fbo.current = null;
-			fbo.saved = null;
-		}
-	});
-}
-var _fboPatchByGl = /* @__PURE__ */ new WeakMap();
-/**
-* Patches `gl.bindFramebuffer` once per GL context so that the stencil test
-* is automatically disabled when Phaser switches to an off-screen FBO (for
-* PostFX / RenderTexture rendering) and restored when switching back.
-*
-* Without this, a PostFX child rendered inside a stencil-clipped container
-* would be invisible: the FBO's stencil buffer starts at 0 while the active
-* stencil test requires `EQUAL(myDepth + 1)`, causing every fragment to fail.
-*
-* The patch is installed once per GL context and remains active for the
-* lifetime of the renderer.  It is a no-op when no stencil clip is active.
-*/
-function ensureFboPatch(gl) {
-	if (_fboPatchByGl.has(gl)) return;
-	const state = {
-		current: null,
-		saved: null
-	};
-	_fboPatchByGl.set(gl, state);
-	const origBind = gl.bindFramebuffer.bind(gl);
-	gl.bindFramebuffer = (target, fb) => {
-		const wasMain = state.current === null;
-		const willBeMain = fb === null;
-		const enteringOffscreen = wasMain && !willBeMain;
-		const leavingOffscreen = !wasMain && willBeMain;
-		if (enteringOffscreen && gl.getParameter(gl.STENCIL_TEST)) {
-			state.saved = {
-				func: gl.getParameter(gl.STENCIL_FUNC),
-				ref: gl.getParameter(gl.STENCIL_REF),
-				valueMask: gl.getParameter(gl.STENCIL_VALUE_MASK),
-				fail: gl.getParameter(gl.STENCIL_FAIL),
-				zfail: gl.getParameter(gl.STENCIL_PASS_DEPTH_FAIL),
-				zpass: gl.getParameter(gl.STENCIL_PASS_DEPTH_PASS),
-				writeMask: gl.getParameter(gl.STENCIL_WRITEMASK)
-			};
-			gl.disable(gl.STENCIL_TEST);
-		}
-		origBind(target, fb);
-		state.current = fb;
-		if (leavingOffscreen && state.saved) {
-			gl.enable(gl.STENCIL_TEST);
-			gl.stencilFunc(state.saved.func, state.saved.ref, state.saved.valueMask);
-			gl.stencilOp(state.saved.fail, state.saved.zfail, state.saved.zpass);
-			gl.stencilMask(state.saved.writeMask);
-			state.saved = null;
-		}
-	};
-}
-/**
-* Vertex attributes:
-*   a_ndc  vec2 — NDC clip-space position (CPU-computed from world transform)
-*   a_loc  vec2 — position relative to the clip rect's center (for SDF)
-*
-* All four corners are pre-transformed on the CPU so the vertex shader is a
-* pure pass-through.  This correctly handles translation, scale, and rotation
-* without a matrix uniform.
-*/
-var VERT_SRC = `
-attribute vec2 a_ndc;
-attribute vec2 a_loc;
-varying vec2 v_loc;
-void main(){gl_Position=vec4(a_ndc,0.,1.);v_loc=a_loc;}
-`;
-/**
-* SDF rounded-rectangle fragment shader.
-*
-* sdRoundedBox uses the IQ per-corner-radius technique:
-*   r.xy = p.x > 0 ? r.yz : r.xw   (right → tr/br, left → tl/bl)
-*   r.x  = p.y > 0 ? r.y  : r.x    (bottom or top within that pair)
-*
-* u_radii layout: (tl, tr, br, bl).
-*
-* For plain rectangles u_radii = vec4(0.0) and sdRoundedBox returns ≤ 0 for
-* all fragments inside the quad, so `discard` is never executed.
-*/
-var FRAG_SRC = `
-precision mediump float;
-varying vec2 v_loc;
-uniform vec2 u_halfSize;
-uniform vec4 u_radii;
-float sdRoundedBox(vec2 p,vec2 b,vec4 r){
-  r.xy=p.x>0.?r.yz:r.xw;
-  r.x =p.y>0.?r.y :r.x;
-  vec2 q=abs(p)-b+r.x;
-  return length(max(q,0.))+min(max(q.x,q.y),0.)-r.x;
-}
-void main(){
-  if(sdRoundedBox(v_loc,u_halfSize,u_radii)>0.)discard;
-  gl_FragColor=vec4(0.);
-}
-`;
-var _progByGl = /* @__PURE__ */ new WeakMap();
-/**
-* Returns (or lazily creates) the SDF stencil shader program for a GL context.
-* @param gl - The WebGL context.
-* @returns Compiled and linked WebGLProgram.
-*/
-function getStencilProg(gl) {
-	let prog = _progByGl.get(gl);
-	if (prog) return prog;
-	const vs = gl.createShader(gl.VERTEX_SHADER);
-	gl.shaderSource(vs, VERT_SRC);
-	gl.compileShader(vs);
-	const fs = gl.createShader(gl.FRAGMENT_SHADER);
-	gl.shaderSource(fs, FRAG_SRC);
-	gl.compileShader(fs);
-	prog = gl.createProgram();
-	gl.attachShader(prog, vs);
-	gl.attachShader(prog, fs);
-	gl.linkProgram(prog);
-	_progByGl.set(gl, prog);
-	return prog;
-}
-var _locsByProg = /* @__PURE__ */ new WeakMap();
-/**
-* Returns (or resolves and caches) the attribute/uniform locations for a program.
-* @param gl - The WebGL context.
-* @param prog - The shader program.
-* @returns Cached locations.
-*/
-function getShaderLocs(gl, prog) {
-	let l = _locsByProg.get(prog);
-	if (!l) {
-		l = {
-			ndc: gl.getAttribLocation(prog, "a_ndc"),
-			loc: gl.getAttribLocation(prog, "a_loc"),
-			halfSize: gl.getUniformLocation(prog, "u_halfSize"),
-			radii: gl.getUniformLocation(prog, "u_radii")
-		};
-		_locsByProg.set(prog, l);
-	}
-	return l;
-}
-/**
-* Resolves the `cornerRadius` field to `[tl, tr, br, bl]` order matching the
-* `u_radii` vec4 uniform layout.
-* @param r - Raw corner radius value from the clip shape.
-* @returns Tuple `[tl, tr, br, bl]`.
-*/
-function resolveRadii(r) {
-	if (!r) return [
-		0,
-		0,
-		0,
-		0
-	];
-	if (typeof r === "number") return [
-		r,
-		r,
-		r,
-		r
-	];
-	return [
-		r.tl ?? 0,
-		r.tr ?? 0,
-		r.br ?? 0,
-		r.bl ?? 0
-	];
-}
-/** Stride in bytes: 4 floats × 4 bytes. */
-var STRIDE = 16;
-/**
-* Transforms the four clip-rect corners through the container's world matrix,
-* uploads them to the vertex buffer, and draws the quad into the stencil.
-*
-* Vertex buffer layout (16 floats / 4 vertices, TRIANGLE_FAN, TL→TR→BR→BL):
-*   [ndcX, ndcY, locX, locY] × 4
-*   where locX/Y is the position relative to the clip rect's center (for SDF).
-*
-* The three GL states tracked by Phaser's `WebGLGlobalWrapper`
-* (`CURRENT_PROGRAM`, `ARRAY_BUFFER_BINDING`, `VERTEX_ARRAY_BINDING`) are
-* saved and restored so its internal caches stay consistent.
-*
-* @param gl - The (VAO-polyfilled) WebGL context.
-* @param matrix - Container's current world transform matrix.
-* @param offsetX - Top-left X of the clip rect in local space.
-* @param offsetY - Top-left Y of the clip rect in local space.
-* @param w - Clip rect width in local units.
-* @param h - Clip rect height in local units.
-* @param logW - Logical game width (`renderer.width`).
-* @param logH - Logical game height (`renderer.height`).
-* @param radii - Per-corner radii tuple `[tl, tr, br, bl]`.
-* @param vertBuf - Persistent WebGLBuffer (64 bytes, DYNAMIC_DRAW).
-* @param verts - Reusable Float32Array(16) to avoid per-frame allocation.
-*/
-function drawMaskShape(gl, matrix, offsetX, offsetY, w, h, logW, logH, radii, vertBuf, verts) {
-	const { a, b, c, d, tx, ty } = matrix;
-	const hw = w / 2;
-	const hh = h / 2;
-	const cx = offsetX + hw;
-	const cy = offsetY + hh;
-	const corners = [
-		[cx - hw, cy - hh],
-		[cx + hw, cy - hh],
-		[cx + hw, cy + hh],
-		[cx - hw, cy + hh]
-	];
-	for (let i = 0; i < 4; i++) {
-		const corner = corners[i];
-		const lx = corner[0];
-		const ly = corner[1];
-		const wx = a * lx + c * ly + tx;
-		const wy = b * lx + d * ly + ty;
-		verts[i * 4 + 0] = wx / logW * 2 - 1;
-		verts[i * 4 + 1] = 1 - wy / logH * 2;
-		verts[i * 4 + 2] = lx - cx;
-		verts[i * 4 + 3] = ly - cy;
-	}
-	const prevProg = gl.getParameter(gl.CURRENT_PROGRAM);
-	const prevBuf = gl.getParameter(gl.ARRAY_BUFFER_BINDING);
-	const prevVAO = gl.getParameter(34229);
-	gl.bindVertexArray(null);
-	gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf);
-	gl.bufferSubData(gl.ARRAY_BUFFER, 0, verts);
-	const prog = getStencilProg(gl);
-	gl.useProgram(prog);
-	const locs = getShaderLocs(gl, prog);
-	gl.enableVertexAttribArray(locs.ndc);
-	gl.vertexAttribPointer(locs.ndc, 2, gl.FLOAT, false, STRIDE, 0);
-	gl.enableVertexAttribArray(locs.loc);
-	gl.vertexAttribPointer(locs.loc, 2, gl.FLOAT, false, STRIDE, 8);
-	gl.uniform2f(locs.halfSize, hw, hh);
-	gl.uniform4f(locs.radii, radii[0], radii[1], radii[2], radii[3]);
-	gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
-	gl.disableVertexAttribArray(locs.ndc);
-	gl.disableVertexAttribArray(locs.loc);
-	gl.bindBuffer(gl.ARRAY_BUFFER, prevBuf);
-	gl.useProgram(prevProg);
-	gl.bindVertexArray(prevVAO);
-}
-var STENCIL_HANDLE = Symbol("stencilClipHandle");
-/**
-* Applies a WebGL stencil-buffer clip to a Phaser 4 Container.
-*
-* The clip rectangle is expressed in the container's **local coordinate
-* space**.  `offsetX`/`offsetY` mark the top-left corner (default 0/0), so
-* a container whose visual area starts at its local origin can be clipped with
-* `applyStencilClip(container, { width, height })`.
-*
-* **Nesting** is handled transparently: each clip level occupies one stencil
-* value (0 = no clip, 1 = depth 0, 2 = depth 1, …).  Child clips are always
-* the intersection of their own shape and all ancestor shapes.
-*
-* **Transforms** (translate, scale, rotation) are re-evaluated from
-* `container.getWorldTransformMatrix()` on every frame, so animated or
-* scroll-driven containers clip correctly without any manual update call.
-*
-* If a stencil clip is already attached to the container, calling this
-* function again calls `handle.update(shape)` on the existing handle and
-* returns it.
-*
-* @param container - The container to clip.
-* @param shape - Clip rect geometry in local units.
-* @returns A handle to modify dimensions / corner radii or remove the clip.
-*/
-function applyStencilClip(container, shape) {
-	const obj = container;
-	if (obj[STENCIL_HANDLE]) {
-		obj[STENCIL_HANDLE].update(shape);
-		return obj[STENCIL_HANDLE];
-	}
-	if (container.scene.renderer.type !== phaser.WEBGL) return {
-		update() {},
-		destroy() {}
-	};
-	const gl = container.scene.renderer.gl;
-	ensurePrerenderReset(gl, container.scene.game);
-	ensureFboPatch(gl);
-	const vertBuf = gl.createBuffer();
-	gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf);
-	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(16), gl.DYNAMIC_DRAW);
-	gl.bindBuffer(gl.ARRAY_BUFFER, null);
-	const verts = new Float32Array(16);
-	let clipW = shape.width;
-	let clipH = shape.height;
-	let clipOffsetX = shape.offsetX ?? 0;
-	let clipOffsetY = shape.offsetY ?? 0;
-	let radii = resolveRadii(shape.cornerRadius);
-	let destroyed = false;
-	const wrapper = (webglRenderer, go, drawingContext, parentMatrix, renderStep = 0, displayList, displayListIndex) => {
-		const renderNext = () => {
-			go.renderWebGLStep(webglRenderer, go, drawingContext, parentMatrix, renderStep + 1, displayList, displayListIndex);
-		};
-		if (destroyed) {
-			renderNext();
-			return;
-		}
-		const matrix = container.getWorldTransformMatrix();
-		const rn = webglRenderer.renderNodes;
-		const depth = getDepth(gl);
-		const myDepth = depth.value++;
-		const logW = webglRenderer.width;
-		const logH = webglRenderer.height;
-		rn.finishBatch();
-		if (myDepth === 0) gl.enable(gl.STENCIL_TEST);
-		gl.colorMask(false, false, false, false);
-		gl.stencilMask(255);
-		gl.stencilFunc(gl.EQUAL, myDepth, 255);
-		gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR);
-		drawMaskShape(gl, matrix, clipOffsetX, clipOffsetY, clipW, clipH, logW, logH, radii, vertBuf, verts);
-		gl.colorMask(true, true, true, true);
-		gl.stencilFunc(gl.EQUAL, myDepth + 1, 255);
-		gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
-		gl.stencilMask(0);
-		renderNext();
-		rn.finishBatch();
-		gl.colorMask(false, false, false, false);
-		gl.stencilMask(255);
-		gl.stencilFunc(gl.EQUAL, myDepth + 1, 255);
-		gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR);
-		drawMaskShape(gl, matrix, clipOffsetX, clipOffsetY, clipW, clipH, logW, logH, radii, vertBuf, verts);
-		gl.colorMask(true, true, true, true);
-		depth.value--;
-		if (myDepth === 0) {
-			gl.disable(gl.STENCIL_TEST);
-			gl.stencilMask(255);
-		} else {
-			gl.stencilFunc(gl.EQUAL, myDepth, 255);
-			gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
-			gl.stencilMask(0);
-		}
-	};
-	const handle = {
-		update(s) {
-			if (s.width !== void 0) clipW = s.width;
-			if (s.height !== void 0) clipH = s.height;
-			if (s.offsetX !== void 0) clipOffsetX = s.offsetX;
-			if (s.offsetY !== void 0) clipOffsetY = s.offsetY;
-			if ("cornerRadius" in s) radii = resolveRadii(s.cornerRadius);
-		},
-		destroy() {
-			if (destroyed) return;
-			destroyed = true;
-			gl.deleteBuffer(vertBuf);
-			const index = obj._renderSteps.indexOf(wrapper);
-			if (index !== -1) obj._renderSteps.splice(index, 1);
-			delete obj[STENCIL_HANDLE];
-		}
-	};
-	obj.addRenderStep(wrapper, 0);
-	obj[STENCIL_HANDLE] = handle;
-	return handle;
-}
-//#endregion
 //#region src/core-props.ts
 /**
 * Normalize edge insets - converts number to all-sides object
@@ -17874,23 +17550,13 @@ function updateBackground(container, width, height) {
 	if (background) {
 		const layoutProps = container.__layoutProps;
 		if (layoutProps) {
-			const bgColor = layoutProps.backgroundColor;
-			const bgAlpha = layoutProps.backgroundAlpha ?? 1;
-			const cornerRadius = layoutProps.cornerRadius ?? 0;
-			const borderWidth = layoutProps.borderWidth ?? 0;
-			const borderColor = layoutProps.borderColor;
-			const borderAlpha = layoutProps.borderAlpha ?? 1;
-			const hasBorder = borderWidth > 0 && borderColor !== void 0;
-			background.clear();
-			if (bgColor !== void 0) background.fillStyle(bgColor, bgAlpha);
-			if (hasBorder) background.lineStyle(borderWidth, borderColor, borderAlpha);
-			if (cornerRadius !== 0) {
-				if (bgColor !== void 0) background.fillRoundedRect(0, 0, width, height, cornerRadius);
-				if (hasBorder) background.strokeRoundedRect(0, 0, width, height, cornerRadius);
-			} else {
-				if (bgColor !== void 0) background.fillRect(0, 0, width, height);
-				if (hasBorder) background.strokeRect(0, 0, width, height);
-			}
+			const cacheKey = getBackgroundImageCacheKey(layoutProps, width, height);
+			if (background.__backgroundCacheKey === cacheKey) return;
+			const nextBackground = createBackgroundImage(container.scene, layoutProps, width, height);
+			if (!nextBackground) return;
+			container.addAt(nextBackground, 0);
+			container.__background = nextBackground;
+			destroyBackgroundImage(background);
 			DebugLogger.log("layout", "Background redrawn to:", {
 				width,
 				height
@@ -18851,12 +18517,10 @@ function applyOverflowMask(container, containerProps, width, height) {
 			height
 		};
 		if (containerProps.cornerRadius !== void 0) shapeBase.cornerRadius = containerProps.cornerRadius;
-		const handle = applyStencilClip(container, shapeBase);
+		container.setStencilClip(shapeBase);
+		const handle = container.getStencilClipHandle();
+		if (!handle) return;
 		ext.__overflowClip = handle;
-		container.once("destroy", () => {
-			handle.destroy();
-			delete ext.__overflowClip;
-		});
 		DebugLogger.log("overflowMask", "Created stencil clip");
 	} else {
 		const update = {
@@ -18864,10 +18528,10 @@ function applyOverflowMask(container, containerProps, width, height) {
 			height,
 			cornerRadius: containerProps.cornerRadius ?? 0
 		};
-		ext.__overflowClip.update(update);
+		container.updateStencilClip(update);
 	}
 	else if (ext.__overflowClip) {
-		ext.__overflowClip.destroy();
+		container.clearStencilClip();
 		delete ext.__overflowClip;
 		DebugLogger.log("overflowMask", "Removed stencil clip");
 	}
@@ -18885,6 +18549,7 @@ var LAYOUT_CYCLE_TIME_MS = 20;
 var LAYOUT_CYCLE_MAX = 5;
 var LAYOUT_MAX_SIZE = 2e5;
 var layoutCycleGuard = /* @__PURE__ */ new WeakMap();
+var deferredParentInvalidations = /* @__PURE__ */ new WeakSet();
 function isCloseSize(a, b, epsilon) {
 	return Math.abs(a.width - b.width) < epsilon && Math.abs(a.height - b.height) < epsilon;
 }
@@ -18908,6 +18573,8 @@ function invalidateParentLayoutIfNeeded(container, oldSize, newWidth, newHeight)
 		height: newHeight
 	};
 	const now = Date.now();
+	const parent = container.parentContainer;
+	if (!parent || !parent.__layoutProps) return;
 	const guard = layoutCycleGuard.get(container);
 	if (guard) {
 		if ((guard.prev ? isCloseSize(guard.prev, newSize, LAYOUT_CYCLE_EPSILON) : false) && now - guard.lastTime < LAYOUT_CYCLE_TIME_MS) guard.count += 1;
@@ -18917,11 +18584,15 @@ function invalidateParentLayoutIfNeeded(container, oldSize, newWidth, newHeight)
 		guard.lastTime = now;
 		layoutCycleGuard.set(container, guard);
 		if (guard.count >= LAYOUT_CYCLE_MAX) {
-			DebugLogger.warn("layout", "Layout cycle detected, skipping parent invalidation", {
+			DebugLogger.log("layout", "Layout cycle detected, deferring parent invalidation", {
 				container,
 				oldSize,
 				newSize
 			});
+			guard.count = 0;
+			guard.lastTime = 0;
+			layoutCycleGuard.set(container, guard);
+			deferParentLayoutInvalidation(container);
 			return;
 		}
 	} else layoutCycleGuard.set(container, {
@@ -18929,9 +18600,20 @@ function invalidateParentLayoutIfNeeded(container, oldSize, newWidth, newHeight)
 		count: 0,
 		lastTime: now
 	});
+	DebugLogger.log("layout", "Container size changed, invalidating parent:", `${oldSize.width}x${oldSize.height} -> ${newWidth}x${newHeight}`);
+	invalidateParentLayout(container);
+}
+function deferParentLayoutInvalidation(container) {
+	if (deferredParentInvalidations.has(container)) return;
+	deferredParentInvalidations.add(container);
+	DeferredLayoutQueue.defer(() => {
+		deferredParentInvalidations.delete(container);
+		invalidateParentLayout(container);
+	});
+}
+function invalidateParentLayout(container) {
 	const parent = container.parentContainer;
 	if (!parent || !parent.__layoutProps) return;
-	DebugLogger.log("layout", "Container size changed, invalidating parent:", `${oldSize.width}x${oldSize.height} -> ${newWidth}x${newHeight}`);
 	const grandParent = parent.parentContainer;
 	let grandParentSize;
 	if (grandParent && grandParent.__getLayoutSize) {
@@ -20961,22 +20643,22 @@ function getLayoutProps(container) {
 	return container.__layoutProps;
 }
 /**
-* Utility function to get background graphics from a container
-* Returns the Graphics object used for backgroundColor, border, cornerRadius
+* Utility function to get background object from a container
+* Returns the Image object used for backgroundColor, border, cornerRadius
 * Useful for custom animations or modifications
 * @param container - Phaser container with background
-* @returns Graphics object or undefined if container has no background
+* @returns Background image or undefined if container has no background
 */
 function getBackgroundGraphics(container) {
 	if (!container) return void 0;
 	return container.__background;
 }
 /**
-* Hook to get background graphics from a ref
-* Returns the Graphics object used for rendering the background
+* Hook to get background image from a ref
+* Returns the Image object used for rendering the background
 * Useful for animating background properties (tint, alpha, etc.)
 * @param ref - Ref to a Phaser container
-* @returns Graphics object or undefined
+* @returns Background image or undefined
 */
 function useBackgroundGraphics(ref) {
 	return getBackgroundGraphics(ref.current);
@@ -22730,8 +22412,6 @@ function showTooltip(scene, container, config) {
 	const textHeight = text.height;
 	const bgWidth = textWidth + paddingX * 2;
 	const bgHeight = textHeight + paddingY * 2;
-	const cornerRadius = tooltipTheme.cornerRadius ?? 6;
-	const graphics = scene.add.graphics();
 	const bg = bgColor ?? "#000000dd";
 	let fillColor = 0;
 	let fillAlpha = .87;
@@ -22747,9 +22427,17 @@ function showTooltip(scene, container, config) {
 			}
 		}
 	}
-	graphics.fillStyle(fillColor, fillAlpha);
-	graphics.fillRoundedRect(-bgWidth / 2, -bgHeight / 2, bgWidth, bgHeight, cornerRadius);
-	const tooltipContainer = scene.add.container(0, 0, [graphics, text]);
+	const background = createBackgroundImage(scene, {
+		backgroundColor: fillColor,
+		backgroundAlpha: fillAlpha,
+		cornerRadius: tooltipTheme.cornerRadius ?? 6
+	}, bgWidth, bgHeight);
+	if (!background) {
+		text.destroy();
+		return;
+	}
+	background.setOrigin(.5, .5);
+	const tooltipContainer = scene.add.container(0, 0, [background, text]);
 	tooltipContainer.setDepth(1e4);
 	const textBounds = tooltipContainer.getBounds();
 	const pos = calculateTooltipPosition(targetBounds, position, offset, textBounds.width, textBounds.height);
@@ -22900,29 +22588,12 @@ function applyTooltip(scene, container, nextCallback, existingOnHoverStart, exis
 */
 function createBackground(scene, container, props) {
 	const hasBackground = props.backgroundColor !== void 0;
-	const hasBorder = props.borderColor !== void 0;
+	const hasBorder = (props.borderWidth ?? 0) > 0 && props.borderColor !== void 0;
 	if (hasBackground || hasBorder) {
-		const width = typeof props.width === "number" ? props.width : 100;
-		const height = typeof props.height === "number" ? props.height : 100;
-		const bgColor = props.backgroundColor;
-		const bgAlpha = props.backgroundAlpha ?? 1;
-		const cornerRadius = props.cornerRadius ?? 0;
-		const borderColor = props.borderColor;
-		const borderWidth = props.borderWidth ?? 0;
-		const borderAlpha = props.borderAlpha ?? 1;
-		const background = scene.add.graphics();
-		if (bgColor !== void 0) background.fillStyle(bgColor, bgAlpha);
-		if (borderWidth > 0 && borderColor !== void 0) background.lineStyle(borderWidth, borderColor, borderAlpha);
-		if (cornerRadius !== 0) {
-			if (bgColor !== void 0) background.fillRoundedRect(0, 0, width, height, cornerRadius);
-			if (borderWidth > 0 && borderColor !== void 0) background.strokeRoundedRect(0, 0, width, height, cornerRadius);
-		} else {
-			if (bgColor !== void 0) background.fillRect(0, 0, width, height);
-			if (borderWidth > 0 && borderColor !== void 0) background.strokeRect(0, 0, width, height);
-		}
+		const background = createBackgroundImage(scene, props, typeof props.width === "number" ? props.width : 100, typeof props.height === "number" ? props.height : 100);
+		if (!background) return;
 		container.addAt(background, 0);
 		container.__background = background;
-		background.__isBackground = true;
 	}
 }
 //#endregion
@@ -24484,7 +24155,7 @@ function registerBuiltins() {
 /**
 * Preprocesses SVG string to ensure tinting works correctly
 * Replaces fill/stroke="currentColor" and other colors with white (#FFFFFF)
-* This allows Phaser's tint to work multiplicatively (white × tint = tint color)
+* This allows Phaser's tint to work by multiplication (white × tint = tint color)
 * @param svg - Raw SVG string
 * @returns Preprocessed SVG string with white fills/strokes
 */
@@ -25489,6 +25160,9 @@ function Accordion(props) {
 	}, [isOpen, autoHeight]);
 	const [contentHeight, setContentHeight] = useSpring(animated ? isOpen ? autoHeight ? measuredHeight : maxHeight : 0 : isOpen ? autoHeight ? measuredHeight : maxHeight : 0, animationConfig, props.onAnimationEnd);
 	if (animated) useForceRedraw(20, contentHeight);
+	const animatedContentHeight = Math.max(0, contentHeight.value);
+	const resolvedContentHeight = animated ? animatedContentHeight : isOpen ? void 0 : 0;
+	const resolvedContentVisible = animated ? animatedContentHeight > .5 : isOpen;
 	const handleToggle = () => {
 		const newState = !isOpen;
 		setInternalOpen(newState);
@@ -25522,6 +25196,9 @@ function Accordion(props) {
 			autoHeight && /* @__PURE__ */ require_jsx_runtime.jsx(View, {
 				visible: false,
 				direction: "stack",
+				headless: true,
+				width: 0,
+				height: 0,
 				children: /* @__PURE__ */ require_jsx_runtime.jsx(View, {
 					ref: measurementRef,
 					...contentTheme,
@@ -25530,9 +25207,9 @@ function Accordion(props) {
 			}),
 			/* @__PURE__ */ require_jsx_runtime.jsx(View, {
 				direction: "column",
-				height: animated ? contentHeight.value : isOpen ? void 0 : 0,
+				height: resolvedContentHeight,
 				overflow: "hidden",
-				visible: animated ? contentHeight.value > .5 : isOpen,
+				visible: resolvedContentVisible,
 				...contentTheme,
 				children: props.children
 			})
@@ -27070,6 +26747,264 @@ function CharTextInput(props) {
 	});
 }
 //#endregion
+//#region src/design-tokens/use-theme-tokens.ts
+/**
+* Hook to access complete design token system
+* Combines colors with text styles, spacing, sizes, and radius tokens
+*/
+/**
+* Hook to access complete design token system from theme context
+* Provides colors, text styles, spacing, sizes, and radius tokens
+* Automatically updates when color mode or preset changes
+* @returns Current DesignTokens or undefined
+* @example
+* ```typescript
+* function MyComponent() {
+*   const tokens = useThemeTokens()
+*
+*   if (!tokens) return null
+*
+*   return (
+*     <View
+*       backgroundColor={tokens.colors.surface.DEFAULT}
+*       padding={tokens.spacing.lg}
+*       cornerRadius={tokens.radius.md}
+*     >
+*       <Text text="Title" style={tokens.textStyles.title} />
+*       <Text text="Body text" style={tokens.textStyles.DEFAULT} />
+*     </View>
+*   )
+* }
+* ```
+*/
+function useThemeTokens() {
+	const localTheme = useTheme();
+	const getInitialTokens = () => {
+		if (localTheme?.__colorPreset) {
+			const preset = getPresetWithMode(localTheme.__colorPreset.name, localTheme.__colorPreset.mode ?? "light");
+			return {
+				colors: preset.colors,
+				textStyles: createTextStyleTokens(preset.colors.text.DEFAULT.toString()),
+				spacing: defaultSpacingTokens,
+				sizes: defaultSizeTokens,
+				radius: defaultRadiusTokens
+			};
+		}
+		const colors = themeRegistry.getColorTokens();
+		if (!colors) return void 0;
+		return {
+			colors,
+			textStyles: createTextStyleTokens(colors.text.DEFAULT.toString()),
+			spacing: defaultSpacingTokens,
+			sizes: defaultSizeTokens,
+			radius: defaultRadiusTokens
+		};
+	};
+	const [tokens, setTokens] = useState(getInitialTokens());
+	const [, forceUpdate] = useState(0);
+	useEffect(() => {
+		return themeRegistry.subscribe(() => {
+			if (localTheme?.__colorPreset) {
+				const currentMode = themeRegistry.getColorMode();
+				const preset = getPresetWithMode(localTheme.__colorPreset.name, currentMode);
+				setTokens({
+					colors: preset.colors,
+					textStyles: createTextStyleTokens(preset.colors.text.DEFAULT.toString()),
+					spacing: defaultSpacingTokens,
+					sizes: defaultSizeTokens,
+					radius: defaultRadiusTokens
+				});
+			} else {
+				const colors = themeRegistry.getColorTokens();
+				if (colors) setTokens({
+					colors,
+					textStyles: createTextStyleTokens(colors.text.DEFAULT.toString()),
+					spacing: defaultSpacingTokens,
+					sizes: defaultSizeTokens,
+					radius: defaultRadiusTokens
+				});
+			}
+			forceUpdate((n) => n + 1);
+		});
+	}, [localTheme]);
+	return tokens;
+}
+//#endregion
+//#region src/components/custom/DebugPanel.tsx
+/** @jsxImportSource ../.. */
+/**
+* DebugPanel component - lightweight runtime diagnostics for Phaser + PhaserJSX
+* Renders selected metrics as text rows or a compact single-line summary.
+*/
+var PRESET_METRICS = {
+	fps: ["fps", "frameMs"],
+	perf: [
+		"fps",
+		"frameMs",
+		"renderer",
+		"viewport"
+	],
+	vdom: [
+		"mountsTotal",
+		"mountsByType",
+		"mountsByParent",
+		"mountsByKey"
+	],
+	textures: ["textureCount"],
+	full: [
+		"fps",
+		"frameMs",
+		"phaserVersion",
+		"renderer",
+		"viewport",
+		"textureCount",
+		"mountsTotal",
+		"mountsByType",
+		"mountsByParent",
+		"mountsByKey",
+		"debugFlags"
+	]
+};
+var DEFAULT_LABELS = {
+	fps: "FPS",
+	frameMs: "Frame ms",
+	phaserVersion: "Phaser",
+	renderer: "Renderer",
+	viewport: "Viewport",
+	textureCount: "Textures",
+	mountsTotal: "Mounts",
+	mountsByType: "Mounts/type",
+	mountsByParent: "Mounts/parent",
+	mountsByKey: "Mounts/key",
+	debugFlags: "Debug flags"
+};
+function resolveRendererName(scene) {
+	const renderer = scene.renderer;
+	const canvasType = phaser.CANVAS;
+	if (renderer.type === phaser.WEBGL) return "WebGL";
+	if (canvasType !== void 0 && renderer.type === canvasType) return "Canvas";
+	if (renderer.constructor?.name) return renderer.constructor.name;
+	if (typeof renderer.type === "number") return `Type ${renderer.type}`;
+	return "Unknown";
+}
+function resolveTextureCount(scene) {
+	const manager = scene.textures;
+	const keys = typeof manager.getTextureKeys === "function" ? manager.getTextureKeys() : Object.keys(manager.list ?? {});
+	const internalKeys = new Set([
+		"__DEFAULT",
+		"__MISSING",
+		"__NORMAL",
+		"__WHITE"
+	]);
+	return keys.filter((key) => !internalKeys.has(key.toUpperCase())).length;
+}
+function resolveFrameStats(scene) {
+	const loop = scene.game.loop;
+	const rawFps = loop?.actualFps ?? loop?.fps ?? 0;
+	const rawFrameMs = loop?.delta ?? loop?.frameDelta ?? 0;
+	return {
+		fps: Number.isFinite(rawFps) ? Number(rawFps.toFixed(1)) : 0,
+		frameMs: Number.isFinite(rawFrameMs) ? Number(rawFrameMs.toFixed(2)) : 0
+	};
+}
+function summarizeMap(map, maxEntries = 3) {
+	return Array.from(map.entries()).sort((a, b) => b[1] - a[1]).slice(0, maxEntries).map(([key, value]) => `${String(key)}:${value}`).join(" | ") || "-";
+}
+function resolveDebugFlags() {
+	const debugConfig = DevConfig.debug;
+	if (!debugConfig.enabled) return "off";
+	const enabledFlags = Object.entries(debugConfig).filter(([key, value]) => key !== "enabled" && value).map(([key]) => key);
+	return enabledFlags.length ? enabledFlags.join(",") : "enabled";
+}
+function collectSnapshot(scene) {
+	const { fps, frameMs } = resolveFrameStats(scene);
+	const mountStats = getMountStats();
+	return {
+		fps,
+		frameMs,
+		phaserVersion: phaser.VERSION,
+		renderer: resolveRendererName(scene),
+		viewport: `${scene.scale.width}x${scene.scale.height}`,
+		textureCount: resolveTextureCount(scene),
+		mountsTotal: mountStats.totalMounts,
+		mountsByType: summarizeMap(mountStats.byType),
+		mountsByParent: summarizeMap(mountStats.byParent),
+		mountsByKey: summarizeMap(mountStats.byKey),
+		debugFlags: resolveDebugFlags()
+	};
+}
+function formatDefault(value) {
+	return typeof value === "number" ? String(value) : value;
+}
+/**
+* DebugPanel component
+* Shows selected diagnostics from Phaser + PhaserJSX as overlay-ready content.
+*/
+function DebugPanel(props) {
+	const scene = useScene();
+	const { preset = "fps", metrics, intervalMs = 250, compact = false, maxRows, labels, formatters, innerProps, ...viewProps } = props;
+	const selectedMetrics = useMemo(() => {
+		const source = metrics && metrics.length > 0 ? metrics : PRESET_METRICS[preset];
+		return Array.from(new Set(source));
+	}, [metrics, preset]);
+	const [snapshot, setSnapshot] = useState(collectSnapshot(scene));
+	useEffect(() => {
+		const delay = Math.max(50, intervalMs);
+		setSnapshot(collectSnapshot(scene));
+		const timer = window.setInterval(() => {
+			setSnapshot(collectSnapshot(scene));
+		}, delay);
+		return () => {
+			window.clearInterval(timer);
+		};
+	}, [
+		scene,
+		intervalMs,
+		selectedMetrics
+	]);
+	const tokens = useThemeTokens();
+	const rowStyle = tokens?.textStyles.small;
+	const valueStyle = tokens?.textStyles.small;
+	const rows = selectedMetrics.map((metric) => {
+		const rawValue = snapshot[metric];
+		const label = labels?.[metric] ?? DEFAULT_LABELS[metric];
+		const formatter = formatters?.[metric];
+		return {
+			metric,
+			label,
+			value: formatter ? formatter(rawValue) : formatDefault(rawValue)
+		};
+	});
+	const limitedRows = typeof maxRows === "number" ? rows.slice(0, Math.max(1, maxRows)) : rows;
+	if (compact) {
+		const compactText = limitedRows.map((row) => `${row.label} ${row.value}`).join(" | ");
+		return /* @__PURE__ */ require_jsx_runtime.jsx(View, {
+			...viewProps,
+			children: /* @__PURE__ */ require_jsx_runtime.jsx(Text, {
+				text: compactText,
+				style: valueStyle
+			})
+		});
+	}
+	return /* @__PURE__ */ require_jsx_runtime.jsx(View, {
+		direction: "column",
+		gap: 4,
+		...viewProps,
+		children: limitedRows.map((row) => /* @__PURE__ */ require_jsx_runtime.jsxs(View, {
+			direction: "row",
+			gap: 8,
+			...innerProps,
+			children: [/* @__PURE__ */ require_jsx_runtime.jsx(Text, {
+				text: `${row.label}:`,
+				style: rowStyle
+			}), /* @__PURE__ */ require_jsx_runtime.jsx(Text, {
+				text: row.value,
+				style: valueStyle
+			})]
+		}, `debug-${row.metric}`))
+	});
+}
+//#endregion
 //#region src/components/custom/Divider.tsx
 /**
 * Divider component - renders a simple line separator
@@ -27850,6 +27785,7 @@ function Dropdown(props) {
 	useForceRedraw(20, overlayHeight);
 	const [arrowRotation, setArrowRotation] = useSpring(isOpen ? Math.PI : 0, animationConfig);
 	useForceRedraw(20, arrowRotation);
+	const resolvedOverlayHeight = Math.max(0, overlayHeight.value);
 	const handleToggle = (event) => {
 		if (props.disabled) return;
 		event?.stopPropagation();
@@ -28021,7 +27957,7 @@ function Dropdown(props) {
 		})
 	});
 	const overlay = /* @__PURE__ */ require_jsx_runtime.jsx(View, {
-		height: overlayHeight.value,
+		height: resolvedOverlayHeight,
 		width: overlayPosition.width,
 		overflow: "hidden",
 		children: /* @__PURE__ */ require_jsx_runtime.jsx(View, {
@@ -28029,7 +27965,7 @@ function Dropdown(props) {
 			direction: "column",
 			width: "fill",
 			height: "fill",
-			visible: isOpen || Math.abs(overlayHeight.value) > .1,
+			visible: isOpen || resolvedOverlayHeight > .1,
 			...overlayTheme,
 			children: placement === "top" ? /* @__PURE__ */ require_jsx_runtime.jsxs(require_jsx_runtime.Fragment, { children: [optionsList, filterInput] }) : /* @__PURE__ */ require_jsx_runtime.jsxs(require_jsx_runtime.Fragment, { children: [filterInput, optionsList] })
 		})
@@ -29521,7 +29457,6 @@ function Toggle(props) {
 		setIsAnimating(true);
 		const endX = newChecked ? thumbOffsetOn : thumbOffsetOff;
 		const startX = thumbX;
-		console.log("Duration:", duration.current);
 		scene.tweens.addCounter({
 			from: 0,
 			to: 1,
@@ -29742,6 +29677,12 @@ Object.defineProperty(exports, "DebugLogger", {
 		return DebugLogger;
 	}
 });
+Object.defineProperty(exports, "DebugPanel", {
+	enumerable: true,
+	get: function() {
+		return DebugPanel;
+	}
+});
 Object.defineProperty(exports, "DevConfig", {
 	enumerable: true,
 	get: function() {
@@ -29970,12 +29911,6 @@ Object.defineProperty(exports, "WrapText", {
 		return WrapText;
 	}
 });
-Object.defineProperty(exports, "__toESM", {
-	enumerable: true,
-	get: function() {
-		return __toESM;
-	}
-});
 Object.defineProperty(exports, "alpha", {
 	enumerable: true,
 	get: function() {
@@ -30786,6 +30721,12 @@ Object.defineProperty(exports, "useTheme", {
 		return useTheme;
 	}
 });
+Object.defineProperty(exports, "useThemeTokens", {
+	enumerable: true,
+	get: function() {
+		return useThemeTokens;
+	}
+});
 Object.defineProperty(exports, "useViewportSize", {
 	enumerable: true,
 	get: function() {
@@ -30823,4 +30764,4 @@ Object.defineProperty(exports, "withHooks", {
 	}
 });
 
-//# sourceMappingURL=custom-BN31OAJq.cjs.map
+//# sourceMappingURL=custom-DTd4LxDn.cjs.map