@number10/phaserjsx 4.0.0 → 4.2.0

package/dist/{custom-oy3mBnrW.js → custom-BXDJDGOl.js}

@@ -16571,6 +16571,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
 /**
 * Applies background properties (color, alpha, corner radius, border)
@@ -16609,37 +16714,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);
 		}
 	}
 }
@@ -16856,7 +16948,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();
@@ -17410,403 +17502,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
@@ -17865,23 +17560,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
@@ -18838,12 +18523,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 = {
@@ -18851,10 +18534,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");
 	}
@@ -18872,6 +18555,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;
 }
@@ -18895,6 +18579,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;
@@ -18904,11 +18590,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, {
@@ -18916,9 +18606,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) {
@@ -20948,22 +20649,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);
@@ -22713,8 +22414,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;
@@ -22730,9 +22429,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);
@@ -22883,29 +22590,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
@@ -24361,7 +24051,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
 */
@@ -25366,6 +25056,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);
@@ -25399,6 +25092,9 @@ function Accordion(props) {
 			autoHeight && /* @__PURE__ */ jsx(View, {
 				visible: false,
 				direction: "stack",
+				headless: true,
+				width: 0,
+				height: 0,
 				children: /* @__PURE__ */ jsx(View, {
 					ref: measurementRef,
 					...contentTheme,
@@ -25407,9 +25103,9 @@ function Accordion(props) {
 			}),
 			/* @__PURE__ */ 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
 			})
@@ -26947,6 +26643,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__ */ jsx(View, {
+			...viewProps,
+			children: /* @__PURE__ */ jsx(Text, {
+				text: compactText,
+				style: valueStyle
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(View, {
+		direction: "column",
+		gap: 4,
+		...viewProps,
+		children: limitedRows.map((row) => /* @__PURE__ */ jsxs(View, {
+			direction: "row",
+			gap: 8,
+			...innerProps,
+			children: [/* @__PURE__ */ jsx(Text, {
+				text: `${row.label}:`,
+				style: rowStyle
+			}), /* @__PURE__ */ jsx(Text, {
+				text: row.value,
+				style: valueStyle
+			})]
+		}, `debug-${row.metric}`))
+	});
+}
+//#endregion
 //#region src/components/custom/Divider.tsx
 /**
 * Divider component - renders a simple line separator
@@ -27719,6 +27673,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();
@@ -27890,7 +27845,7 @@ function Dropdown(props) {
 		})
 	});
 	const overlay = /* @__PURE__ */ jsx(View, {
-		height: overlayHeight.value,
+		height: resolvedOverlayHeight,
 		width: overlayPosition.width,
 		overflow: "hidden",
 		children: /* @__PURE__ */ jsx(View, {
@@ -27898,7 +27853,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__ */ jsxs(Fragment, { children: [optionsList, filterInput] }) : /* @__PURE__ */ jsxs(Fragment, { children: [filterInput, optionsList] })
 		})
@@ -29390,7 +29345,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,
@@ -29557,6 +29511,6 @@ function TransformOriginView({ originX = .5, originY = .5, width, height, x = 0,
 	});
 }
 //#endregion
-export { RadioButton as $, textCreator as $n, shouldComponentUpdate as $t, computed as A, midnightPreset as An, createTheme as At, DOMInputElement as B, hexToNumber as Bn, remountAll as Bt, CharText as C, defaultTextStyleTokens as Cn, graphicsCreator as Cr, createWiggleEffect as Ct, Modal as D, generateColorScale as Dn, register as Dr, useGameObjectEffect as Dt, Dialog as E, forestGreenPreset as En, nodeRegistry as Er, createZoomOutEffect as Et, SpringPhysics as F, darken as Fn, getMountStats as Ft, useSVGTextures as G, rgbToHsl as Gn, disposeCtx as Gt, releaseSVGTexture as H, lightenHex as Hn, unmountJSX as Ht, animatedSignal as I, darkenHex as In, mount as It, Particles as J, normalizeCornerRadius as Jn, getLayoutProps as Jt, svgToTexture as K, rgbToNumber as Kn, getBackgroundGraphics as Kt, isAnimatedSignal as L, ensureContrast as Ln, mountJSX as Lt, useSprings as M, presets as Mn, mergeThemes as Mt, DEFAULT_SPRING_CONFIG as N, alpha as Nn, themeRegistry as Nt, Portal as O, getPreset as On, viewCreator as Ot, SPRING_PRESETS as P, createTextStyle as Pn, createElement as Pt, RadioGroup as Q, tileSpritePatcher as Qn, shallowEqual as Qt, unwrapSignal as R, getContrastRatio as Rn, normalizeVNodeLike as Rt, CharTextInput as S, defaultSpacingTokens as Sn, imagePatcher as Sr, createTadaEffect as St, WrapText as T, applyLightMode as Tn, host as Tr, createZoomInEffect as Tt, releaseSVGTextures as U, numberToHex as Un, portalRegistry as Ut, releaseAllSVGTextures as V, lighten as Vn, unmount as Vt, useSVGTexture as W, numberToRgb as Wn, View as Wt, Text as X, normalizeGap as Xn, getLayoutSize as Xt, TileSprite as Y, normalizeEdgeInsets as Yn, getLayoutRect as Yt, Sprite as Z, tileSpriteCreator as Zn, getWorldLayoutRect as Zt, Dropdown as _, createDefaultTheme as _n, buildEmitZone as _r, createShakeEffect as _t, Tabs as a, useLayoutRect as an, spriteCreator as ar, resolveEffect as at, calculateSliderSize as b, defaultRadiusTokens as bn, nineSlicePatcher as br, createSpinEffect as bt, Sidebar as c, useRedraw as cn, particlesPatcher as cr, createFadeEffect as ct, NineSlice as d, useState as dn, applyEmitterConfig as dr, createFlipOutEffect as dt, useBackgroundGraphics as en, textPatcher as er, Graphics as et, Joystick as f, useTheme as fn, getFirstEmitter as fr, createFloatEffect as ft, Image$1 as g, getRenderContext as gn, buildDeathZonesFromLayout as gr, createPulseEffect as gt, useIconPreload as h, withHooks as hn, resolveParticlePreset as hr, createPressEffect as ht, TabPanel as i, useLayoutEffect as in, DevPresets as ir, applyEffectByName as it, useSpring as j, oceanBluePreset as jn, getThemedProps as jt, Accordion as k, getPresetWithMode as kn, viewPatcher as kt, RefOriginView as l, useRef as ln, applyDeathZone as lr, createFlashEffect as lt, createIconComponent as m, useWorldLayoutRect as mn, PARTICLE_PRESET_REGISTRY as mr, createNoneEffect as mt, Toggle as n, useEffect as nn, DebugLogger as nr, DEFAULT_EFFECT as nt, RangeSlider as o, useLayoutSize as on, spritePatcher as or, createBounceEffect as ot, Icon as p, useViewportSize as pn, isParticleEmitter as pr, createJelloEffect as pt, registerBuiltins as q, HexColor as qn, getCurrent as qt, Tab as r, useForceRedraw as rn, DevConfig as rr, EFFECT_REGISTRY as rt, Slider as s, useMemo as sn, particlesCreator as sr, createBreatheEffect as st, TransformOriginView as t, useCallback as tn, viewportRegistry as tr, Button as tt, NineSliceButton as u, useScene as un, applyEmitZone as ur, createFlipInEffect as ut, ScrollView as v, defaultTheme as vn, buildEmitZoneFromLayout as vr, createSlideInEffect as vt, AlertDialog as w, applyDarkMode as wn, graphicsPatcher as wr, createWobbleEffect as wt, Divider as x, defaultSizeTokens as xn, imageCreator as xr, createSwingEffect as xt, ScrollSlider as y, createTextStyleTokens as yn, nineSliceCreator as yr, createSlideOutEffect as yt, KeyboardInputManager as z, hex as zn, patchVNode as zt };
+export { Sprite as $, tileSpriteCreator as $n, getWorldLayoutRect as $t, Portal as A, getPreset as An, viewCreator as At, unwrapSignal as B, getContrastRatio as Bn, normalizeVNodeLike as Bt, useThemeTokens as C, defaultSizeTokens as Cn, imageCreator as Cr, createSwingEffect as Ct, WrapText as D, applyLightMode as Dn, host as Dr, createZoomInEffect as Dt, AlertDialog as E, applyDarkMode as En, graphicsPatcher as Er, createWobbleEffect as Et, DEFAULT_SPRING_CONFIG as F, alpha as Fn, themeRegistry as Ft, releaseSVGTextures as G, numberToHex as Gn, portalRegistry as Gt, DOMInputElement as H, hexToNumber as Hn, remountAll as Ht, SPRING_PRESETS as I, createTextStyle as In, createElement as It, svgToTexture as J, rgbToNumber as Jn, getBackgroundGraphics as Jt, useSVGTexture as K, numberToRgb as Kn, View as Kt, SpringPhysics as L, darken as Ln, getMountStats as Lt, computed as M, midnightPreset as Mn, createTheme as Mt, useSpring as N, oceanBluePreset as Nn, getThemedProps as Nt, Dialog as O, forestGreenPreset as On, nodeRegistry as Or, createZoomOutEffect as Ot, useSprings as P, presets as Pn, mergeThemes as Pt, Text as Q, normalizeGap as Qn, getLayoutSize as Qt, animatedSignal as R, darkenHex as Rn, mount as Rt, DebugPanel as S, defaultRadiusTokens as Sn, nineSlicePatcher as Sr, createSpinEffect as St, CharText as T, defaultTextStyleTokens as Tn, graphicsCreator as Tr, createWiggleEffect as Tt, releaseAllSVGTextures as U, lighten as Un, unmount as Ut, KeyboardInputManager as V, hex as Vn, patchVNode as Vt, releaseSVGTexture as W, lightenHex as Wn, unmountJSX as Wt, Particles as X, normalizeCornerRadius as Xn, getLayoutProps as Xt, registerBuiltins as Y, HexColor as Yn, getCurrent as Yt, TileSprite as Z, normalizeEdgeInsets as Zn, getLayoutRect as Zt, Dropdown as _, withHooks as _n, resolveParticlePreset as _r, createPressEffect as _t, Tabs as a, useForceRedraw as an, DevConfig as ar, EFFECT_REGISTRY as at, calculateSliderSize as b, defaultTheme as bn, buildEmitZoneFromLayout as br, createSlideInEffect as bt, Sidebar as c, useLayoutSize as cn, spritePatcher as cr, createBounceEffect as ct, NineSlice as d, useRef as dn, applyDeathZone as dr, createFlashEffect as dt, shallowEqual as en, tileSpritePatcher as er, RadioGroup as et, Joystick as f, useScene as fn, applyEmitZone as fr, createFlipInEffect as ft, Image$1 as g, useWorldLayoutRect as gn, PARTICLE_PRESET_REGISTRY as gr, createNoneEffect as gt, useIconPreload as h, useViewportSize as hn, isParticleEmitter as hr, createJelloEffect as ht, TabPanel as i, useEffect as in, DebugLogger as ir, DEFAULT_EFFECT as it, Accordion as j, getPresetWithMode as jn, viewPatcher as jt, Modal as k, generateColorScale as kn, register as kr, useGameObjectEffect as kt, RefOriginView as l, useMemo as ln, particlesCreator as lr, createBreatheEffect as lt, createIconComponent as m, useTheme as mn, getFirstEmitter as mr, createFloatEffect as mt, Toggle as n, useBackgroundGraphics as nn, textPatcher as nr, Graphics as nt, RangeSlider as o, useLayoutEffect as on, DevPresets as or, applyEffectByName as ot, Icon as p, useState as pn, applyEmitterConfig as pr, createFlipOutEffect as pt, useSVGTextures as q, rgbToHsl as qn, disposeCtx as qt, Tab as r, useCallback as rn, viewportRegistry as rr, Button as rt, Slider as s, useLayoutRect as sn, spriteCreator as sr, resolveEffect as st, TransformOriginView as t, shouldComponentUpdate as tn, textCreator as tr, RadioButton as tt, NineSliceButton as u, useRedraw as un, particlesPatcher as ur, createFadeEffect as ut, ScrollView as v, getRenderContext as vn, buildDeathZonesFromLayout as vr, createPulseEffect as vt, CharTextInput as w, defaultSpacingTokens as wn, imagePatcher as wr, createTadaEffect as wt, Divider as x, createTextStyleTokens as xn, nineSliceCreator as xr, createSlideOutEffect as xt, ScrollSlider as y, createDefaultTheme as yn, buildEmitZone as yr, createShakeEffect as yt, isAnimatedSignal as z, ensureContrast as zn, mountJSX as zt };
 
-//# sourceMappingURL=custom-oy3mBnrW.js.map
+//# sourceMappingURL=custom-BXDJDGOl.js.map