@number10/phaserjsx 4.0.0 → 4.1.0

package/dist/{custom-oy3mBnrW.js → custom-C_w8D39m.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);
 		}
 	}
 }
@@ -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
@@ -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
 			})
@@ -27719,6 +27415,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 +27587,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 +27595,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] })
 		})
@@ -29559,4 +29256,4 @@ 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 };
 
-//# sourceMappingURL=custom-oy3mBnrW.js.map
+//# sourceMappingURL=custom-C_w8D39m.js.map