@number10/phaserjsx 4.1.0 → 4.3.0

package/dist/{custom-Dp3yAJdU.cjs → custom-37gL0VZG.cjs}

@@ -549,9 +549,6 @@ var nineSlicePatcher = (node, prev, next) => {
 };
 //#endregion
 //#region src/particles/emit-zone.ts
-/**
-* Emit zone helpers for particle emitters
-*/
 function resolveNumericSize(value) {
 	return typeof value === "number" ? value : void 0;
 }
@@ -563,18 +560,164 @@ function resolveZoneSize(zone, fallback) {
 	if (height !== void 0) size.height = height;
 	return size;
 }
+function withPoint(point, x, y) {
+	if (point) {
+		point.x = x;
+		point.y = y;
+		return point;
+	}
+	return {
+		x,
+		y
+	};
+}
+function createRectSource(x, y, width, height) {
+	return {
+		x,
+		y,
+		width,
+		height,
+		contains: (px, py) => px >= x && px <= x + width && py >= y && py <= y + height,
+		getRandomPoint: (point) => withPoint(point, x + Math.random() * width, y + Math.random() * height),
+		getPoints: (quantity = 1) => {
+			const count = Math.max(1, quantity);
+			return Array.from({ length: count }, (_, index) => {
+				const distance = (count === 1 ? 0 : index / (count - 1)) * (2 * (width + height));
+				if (distance <= width) return {
+					x: x + distance,
+					y
+				};
+				if (distance <= width + height) return {
+					x: x + width,
+					y: y + distance - width
+				};
+				if (distance <= width * 2 + height) return {
+					x: x + width - (distance - width - height),
+					y: y + height
+				};
+				return {
+					x,
+					y: y + height - (distance - width * 2 - height)
+				};
+			});
+		}
+	};
+}
+function createCircleSource(x, y, radius) {
+	return {
+		x,
+		y,
+		radius,
+		contains: (px, py) => {
+			const dx = px - x;
+			const dy = py - y;
+			return dx * dx + dy * dy <= radius * radius;
+		},
+		getRandomPoint: (point) => {
+			const angle = Math.random() * Math.PI * 2;
+			const distance = Math.sqrt(Math.random()) * radius;
+			return withPoint(point, x + Math.cos(angle) * distance, y + Math.sin(angle) * distance);
+		},
+		getPoints: (quantity = 1) => {
+			const count = Math.max(1, quantity);
+			return Array.from({ length: count }, (_, index) => {
+				const angle = index / count * Math.PI * 2;
+				return {
+					x: x + Math.cos(angle) * radius,
+					y: y + Math.sin(angle) * radius
+				};
+			});
+		}
+	};
+}
+function createEllipseSource(x, y, width, height) {
+	const radiusX = width / 2;
+	const radiusY = height / 2;
+	return {
+		x,
+		y,
+		width,
+		height,
+		contains: (px, py) => {
+			const dx = (px - x) / radiusX;
+			const dy = (py - y) / radiusY;
+			return dx * dx + dy * dy <= 1;
+		},
+		getRandomPoint: (point) => {
+			const angle = Math.random() * Math.PI * 2;
+			const distance = Math.sqrt(Math.random());
+			return withPoint(point, x + Math.cos(angle) * radiusX * distance, y + Math.sin(angle) * radiusY * distance);
+		},
+		getPoints: (quantity = 1) => {
+			const count = Math.max(1, quantity);
+			return Array.from({ length: count }, (_, index) => {
+				const angle = index / count * Math.PI * 2;
+				return {
+					x: x + Math.cos(angle) * radiusX,
+					y: y + Math.sin(angle) * radiusY
+				};
+			});
+		}
+	};
+}
+function createLineSource(x, y, endX, endY) {
+	return {
+		x,
+		y,
+		contains: (px, py) => {
+			const lengthSquared = (endX - x) ** 2 + (endY - y) ** 2;
+			if (lengthSquared === 0) return px === x && py === y;
+			const progress = Math.max(0, Math.min(1, ((px - x) * (endX - x) + (py - y) * (endY - y)) / lengthSquared));
+			const closestX = x + progress * (endX - x);
+			const closestY = y + progress * (endY - y);
+			return Math.hypot(px - closestX, py - closestY) <= .5;
+		},
+		getRandomPoint: (point) => {
+			const progress = Math.random();
+			return withPoint(point, x + (endX - x) * progress, y + (endY - y) * progress);
+		},
+		getPoints: (quantity = 1) => {
+			const count = Math.max(1, quantity);
+			return Array.from({ length: count }, (_, index) => {
+				const progress = count === 1 ? 0 : index / (count - 1);
+				return {
+					x: x + (endX - x) * progress,
+					y: y + (endY - y) * progress
+				};
+			});
+		}
+	};
+}
 function buildZoneSource(zone, fallbackSize) {
 	const baseX = zone.x ?? 0;
 	const baseY = zone.y ?? 0;
 	const { width, height } = resolveZoneSize(zone, fallbackSize);
 	switch (zone.shape) {
-		case "rect": return new phaser.Geom.Rectangle(baseX, baseY, width ?? 1, height ?? 1);
-		case "circle": return new phaser.Geom.Circle(baseX, baseY, zone.radius ?? 1);
-		case "ellipse": return new phaser.Geom.Ellipse(baseX, baseY, width ?? 1, height ?? 1);
-		case "line": return new phaser.Geom.Line(baseX, baseY, zone.endX ?? baseX + (width ?? 1), zone.endY ?? baseY + (height ?? 1));
+		case "rect": return createRectSource(baseX, baseY, width ?? 1, height ?? 1);
+		case "circle": return createCircleSource(baseX, baseY, zone.radius ?? 1);
+		case "ellipse": return createEllipseSource(baseX, baseY, width ?? 1, height ?? 1);
+		case "line": return createLineSource(baseX, baseY, zone.endX ?? baseX + (width ?? 1), zone.endY ?? baseY + (height ?? 1));
 		default: return;
 	}
 }
+function getTransformOwner(value) {
+	if (!value || typeof value !== "object") return void 0;
+	if (typeof value.getWorldTransformMatrix !== "function") return;
+	return value;
+}
+function createLocalDeathZoneSource(source, owner) {
+	const transformOwner = getTransformOwner(owner);
+	if (!transformOwner) return source;
+	return {
+		...source,
+		contains: (worldX, worldY) => {
+			const matrix = transformOwner.getWorldTransformMatrix?.();
+			if (!matrix) return source.contains(worldX, worldY);
+			const localPoint = matrix.applyInverse(worldX, worldY);
+			return source.contains(localPoint.x, localPoint.y);
+		}
+	};
+}
 /**
 * Build a Phaser emitZone config from a lightweight zone definition
 */
@@ -599,21 +742,21 @@ function buildEmitZoneFromLayout(zone, width, height) {
 	return buildEmitZone(zone, fallback);
 }
 /**
-* Build a Phaser deathZone config from a lightweight exclusion definition
+* Build a Phaser deathZone config from a lightweight death zone definition
 */
-function buildDeathZone(zone, fallbackSize = {}) {
+function buildDeathZone(zone, fallbackSize = {}, owner) {
 	const type = zone.mode ?? "onEnter";
 	const source = buildZoneSource(zone, fallbackSize);
 	if (!source) return void 0;
 	return {
 		type,
-		source
+		source: createLocalDeathZoneSource(source, owner)
 	};
 }
 /**
 * Create death zones using layout size as a fallback
 */
-function buildDeathZonesFromLayout(zones, width, height) {
+function buildDeathZonesFromLayout(zones, width, height, owner) {
 	if (!zones) return void 0;
 	const list = Array.isArray(zones) ? zones : [zones];
 	const fallback = {};
@@ -621,7 +764,7 @@ function buildDeathZonesFromLayout(zones, width, height) {
 	const resolvedHeight = resolveNumericSize(height);
 	if (resolvedWidth !== void 0) fallback.width = resolvedWidth;
 	if (resolvedHeight !== void 0) fallback.height = resolvedHeight;
-	const deathZones = list.map((zone) => buildDeathZone(zone, fallback)).filter((zone) => Boolean(zone));
+	const deathZones = list.map((zone) => buildDeathZone(zone, fallback, owner)).filter((zone) => Boolean(zone));
 	return deathZones.length > 0 ? deathZones : void 0;
 }
 //#endregion
@@ -812,7 +955,7 @@ function mergeDeathZones(base, extra) {
 function applyParticlesProps(manager, prev, next) {
 	if (!manager) return;
 	if ((prev.texture !== next.texture || prev.frame !== next.frame) && next.texture && "setTexture" in manager && manager.setTexture) manager.setTexture(next.texture, next.frame);
-	if (prev.preset !== next.preset || prev.config !== next.config || prev.zone !== next.zone || prev.excludeZones !== next.excludeZones || prev.width !== next.width || prev.height !== next.height) {
+	if (prev.preset !== next.preset || prev.config !== next.config || prev.emitZone !== next.emitZone || prev.zone !== next.zone || prev.deathZones !== next.deathZones || prev.excludeZones !== next.excludeZones || prev.width !== next.width || prev.height !== next.height) {
 		const resolvedConfig = resolveParticlePreset(next.preset, next.config);
 		let emitter;
 		if (isParticleEmitter(manager)) emitter = manager;
@@ -824,11 +967,13 @@ function applyParticlesProps(manager, prev, next) {
 		}
 		if (!emitter) return;
 		applyEmitterConfig(emitter, resolvedConfig);
-		if (next.zone) {
-			const emitZone = buildEmitZoneFromLayout(next.zone, next.width, next.height);
+		const emitZoneProps = next.emitZone ?? next.zone;
+		const deathZoneProps = next.deathZones ?? next.excludeZones;
+		if (emitZoneProps) {
+			const emitZone = buildEmitZoneFromLayout(emitZoneProps, next.width, next.height);
 			if (emitZone) applyEmitZone(emitter, emitZone);
 		}
-		const deathZones = buildDeathZonesFromLayout(next.excludeZones, next.width, next.height);
+		const deathZones = buildDeathZonesFromLayout(deathZoneProps, next.width, next.height, manager);
 		const combined = mergeDeathZones(resolvedConfig.deathZone, deathZones);
 		applyDeathZone(emitter, combined);
 	}
@@ -864,8 +1009,10 @@ function createParticlesLayout(particles, props) {
 */
 var particlesCreator = (scene, props) => {
 	const resolvedConfig = { ...resolveParticlePreset(props.preset, props.config) };
-	if (props.zone) {
-		const emitZone = buildEmitZoneFromLayout(props.zone, props.width, props.height);
+	const emitZoneProps = props.emitZone ?? props.zone;
+	const deathZoneProps = props.deathZones ?? props.excludeZones;
+	if (emitZoneProps) {
+		const emitZone = buildEmitZoneFromLayout(emitZoneProps, props.width, props.height);
 		if (emitZone) {
 			const configWithZone = resolvedConfig;
 			configWithZone.emitZone = emitZone;
@@ -883,8 +1030,8 @@ var particlesCreator = (scene, props) => {
 	createTransform(particles, props);
 	createPhaser(particles, props);
 	createParticlesLayout(particles, props);
-	if (props.excludeZones && emitter) {
-		const deathZones = buildDeathZonesFromLayout(props.excludeZones, props.width, props.height);
+	if (deathZoneProps && emitter) {
+		const deathZones = buildDeathZonesFromLayout(deathZoneProps, props.width, props.height, particles);
 		const combinedDeathZones = mergeDeathZones(resolvedConfig.deathZone, deathZones);
 		if (combinedDeathZones) applyDeathZone(emitter, combinedDeathZones);
 	}
@@ -16539,18 +16686,54 @@ var textPatcher = (node, prev, next) => {
 //#endregion
 //#region src/components/primitives/tilesprite.ts
 /**
-* TileSprite creator - NOT IMPLEMENTED YET
-* @throws Error indicating component is not implemented
+* Creates layout infrastructure for TileSprite.
 */
-var tileSpriteCreator = (_scene, _props) => {
-	throw new Error("TileSprite component not implemented yet. This is a placeholder for architecture planning.");
+function createTileSpriteLayout(tileSprite, props) {
+	tileSprite.__layoutProps = props;
+	tileSprite.__getLayoutSize = () => {
+		if (tileSprite.__layoutProps?.headless) return {
+			width: .01,
+			height: .01
+		};
+		return {
+			width: tileSprite.width,
+			height: tileSprite.height
+		};
+	};
+}
+function applyTileSpriteProps(tileSprite, prev, next) {
+	if ((prev.texture !== next.texture || prev.frame !== next.frame) && next.texture) tileSprite.setTexture(next.texture, next.frame);
+	if ((prev.width !== next.width || prev.height !== next.height) && typeof next.width === "number" && typeof next.height === "number") tileSprite.setSize(next.width, next.height);
+	if (prev.tilePositionX !== next.tilePositionX && typeof next.tilePositionX === "number") tileSprite.tilePositionX = next.tilePositionX;
+	if (prev.tilePositionY !== next.tilePositionY && typeof next.tilePositionY === "number") tileSprite.tilePositionY = next.tilePositionY;
+	if (prev.tileScaleX !== next.tileScaleX && typeof next.tileScaleX === "number") tileSprite.tileScaleX = next.tileScaleX;
+	if (prev.tileScaleY !== next.tileScaleY && typeof next.tileScaleY === "number") tileSprite.tileScaleY = next.tileScaleY;
+	if (prev.tint !== next.tint) if (typeof next.tint === "number") tileSprite.setTint(next.tint);
+	else tileSprite.clearTint();
+	if (prev.originX !== next.originX || prev.originY !== next.originY) tileSprite.setOrigin(next.originX ?? tileSprite.originX, next.originY ?? tileSprite.originY);
+}
+/**
+* TileSprite creator - creates a Phaser TileSprite object.
+*/
+var tileSpriteCreator = (scene, props) => {
+	const tileSprite = scene.add.tileSprite(props.x ?? 0, props.y ?? 0, props.width, props.height, props.texture, props.frame);
+	tileSprite.setOrigin(props.originX ?? 0, props.originY ?? 0);
+	createTransform(tileSprite, props);
+	createPhaser(tileSprite, props);
+	applyTileSpriteProps(tileSprite, {}, props);
+	createTileSpriteLayout(tileSprite, props);
+	props.onReady?.(tileSprite);
+	return tileSprite;
 };
 /**
-* TileSprite patcher - NOT IMPLEMENTED YET
-* @throws Error indicating component is not implemented
+* TileSprite patcher - updates texture, size, tiling and shared display props.
 */
-var tileSpritePatcher = (_node, _prev, _next) => {
-	throw new Error("TileSprite component not implemented yet. This is a placeholder for architecture planning.");
+var tileSpritePatcher = (node, prev, next) => {
+	applyTransformProps(node, prev, next);
+	applyPhaserProps(node, prev, next);
+	applyTileSpriteProps(node, prev, next);
+	const tileSprite = node;
+	if (tileSprite.__layoutProps) tileSprite.__layoutProps = next;
 };
 //#endregion
 //#region src/components/backgroundImage.ts
@@ -16938,7 +17121,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();
@@ -19806,6 +19989,91 @@ function buildDefaultTheme(colors) {
 				fontSize: "14px"
 			}
 		},
+		Checkbox: {
+			checkedColor: colors.primary.DEFAULT.toNumber(),
+			indeterminateColor: colors.primary.medium.toNumber(),
+			color: colors.border.medium.toNumber(),
+			gap: 10,
+			size: 20,
+			disabledAlpha: .5,
+			labelPosition: "right",
+			labelStyle: {
+				color: colors.text.DEFAULT.toString(),
+				fontSize: "14px"
+			}
+		},
+		Badge: {
+			tone: "neutral",
+			variant: "solid",
+			size: "medium",
+			maxCount: 99,
+			disabledAlpha: .5,
+			textStyle: { fontStyle: "bold" }
+		},
+		Tag: {
+			tone: "neutral",
+			variant: "soft",
+			size: "medium",
+			closeSize: 16,
+			disabledAlpha: .5,
+			textStyle: { fontStyle: "bold" }
+		},
+		Popover: {
+			placement: "bottom",
+			offset: 8,
+			depth: 1100,
+			closeOnOutside: true,
+			closeOnEscape: true,
+			viewportPadding: 8,
+			backgroundColor: colors.surface.dark.toNumber(),
+			borderColor: colors.border.medium.toNumber(),
+			borderWidth: 1,
+			cornerRadius: 8,
+			padding: 10,
+			gap: 8
+		},
+		ContextMenu: {
+			width: 220,
+			itemHeight: 34,
+			itemGap: 8,
+			itemPadding: {
+				left: 10,
+				right: 10,
+				top: 6,
+				bottom: 6
+			},
+			itemCornerRadius: 5,
+			backgroundColor: colors.surface.dark.toNumber(),
+			borderColor: colors.border.medium.toNumber(),
+			borderWidth: 1,
+			cornerRadius: 8,
+			padding: 6,
+			gap: 2,
+			textStyle: {
+				...textStyles.small,
+				color: colors.text.medium.toString()
+			},
+			disabledTextColor: colors.text.lightest.toString(),
+			dangerTextColor: colors.error.darkest.toString(),
+			dangerBackgroundColor: colors.error.dark.toNumber()
+		},
+		ProgressBar: {
+			width: 240,
+			height: 22,
+			orientation: "horizontal",
+			labelPosition: "right",
+			trackColor: colors.surface.dark.toNumber(),
+			fillColor: colors.success.DEFAULT.toNumber(),
+			borderColor: colors.border.medium.toNumber(),
+			borderWidth: 1,
+			cornerRadius: 11,
+			gap: 8,
+			disabledAlpha: .5,
+			labelStyle: {
+				color: colors.text.DEFAULT.toString(),
+				fontSize: "13px"
+			}
+		},
 		ScrollSlider: {
 			borderColor: colors.border.dark.toNumber(),
 			trackColor: colors.surface.dark.toNumber(),
@@ -20618,7 +20886,7 @@ function useViewportSize() {
 * @param container - Phaser container with layout
 * @returns Layout size or undefined if container has no layout
 */
-function getLayoutSize(container) {
+function getLayoutSize$1(container) {
 	if (!container) return void 0;
 	return container.__getLayoutSize?.();
 }
@@ -20630,7 +20898,7 @@ function getLayoutSize(container) {
 * @returns Current layout size or undefined
 */
 function useLayoutSize(ref) {
-	return getLayoutSize(ref.current);
+	return getLayoutSize$1(ref.current);
 }
 /**
 * Utility function to get layout props from a container
@@ -20671,7 +20939,7 @@ function useBackgroundGraphics(ref) {
 */
 function getLayoutRect(container) {
 	if (!container) return void 0;
-	const size = getLayoutSize(container);
+	const size = getLayoutSize$1(container);
 	if (!size) return void 0;
 	return {
 		x: container.x,
@@ -20704,7 +20972,7 @@ function useLayoutRect(ref) {
 */
 function getWorldLayoutRect(container) {
 	if (!container) return void 0;
-	const size = getLayoutSize(container);
+	const size = getLayoutSize$1(container);
 	if (!size) return void 0;
 	const matrix = container.getWorldTransformMatrix();
 	return {
@@ -22870,6 +23138,241 @@ var viewPatcher = (node, prev, next) => {
 	applyLayoutProps(container, normalizedPrev, normalizedNext);
 };
 //#endregion
+//#region src/components/custom/Badge.tsx
+/** @jsxImportSource ../.. */
+/**
+* Badge and Tag components - compact labels for counts, status, filters, and inventory metadata.
+*/
+var DEFAULT_TONES = {
+	neutral: {
+		backgroundColor: 4674921,
+		softBackgroundColor: 1976635,
+		borderColor: 6583435,
+		textColor: "#ffffff",
+		outlineTextColor: "#cbd5e1"
+	},
+	primary: {
+		backgroundColor: 2450411,
+		softBackgroundColor: 1981066,
+		borderColor: 6333946,
+		textColor: "#ffffff",
+		outlineTextColor: "#93c5fd"
+	},
+	success: {
+		backgroundColor: 1483594,
+		softBackgroundColor: 1332013,
+		borderColor: 4906624,
+		textColor: "#ffffff",
+		outlineTextColor: "#86efac"
+	},
+	warning: {
+		backgroundColor: 16096779,
+		softBackgroundColor: 7877903,
+		borderColor: 16498468,
+		textColor: "#111827",
+		outlineTextColor: "#fde68a"
+	},
+	danger: {
+		backgroundColor: 14427686,
+		softBackgroundColor: 8330525,
+		borderColor: 16281969,
+		textColor: "#ffffff",
+		outlineTextColor: "#fecaca"
+	},
+	info: {
+		backgroundColor: 561586,
+		softBackgroundColor: 1461859,
+		borderColor: 2282478,
+		textColor: "#ffffff",
+		outlineTextColor: "#a5f3fc"
+	}
+};
+var DEFAULT_SIZES = {
+	small: {
+		height: 20,
+		padding: {
+			left: 7,
+			right: 7,
+			top: 2,
+			bottom: 2
+		},
+		fontSize: 11,
+		cornerRadius: 10,
+		gap: 5,
+		dotSize: 8
+	},
+	medium: {
+		height: 24,
+		padding: {
+			left: 9,
+			right: 9,
+			top: 3,
+			bottom: 3
+		},
+		fontSize: 13,
+		cornerRadius: 12,
+		gap: 6,
+		dotSize: 10
+	},
+	large: {
+		height: 30,
+		padding: {
+			left: 12,
+			right: 12,
+			top: 4,
+			bottom: 4
+		},
+		fontSize: 18,
+		cornerRadius: 15,
+		gap: 8,
+		dotSize: 12
+	}
+};
+function formatBadgeCount({ count, maxCount = 99 }) {
+	if (!Number.isFinite(count)) return "0";
+	const normalizedCount = Math.max(0, Math.floor(count ?? 0));
+	const normalizedMax = Math.max(0, Math.floor(maxCount));
+	return normalizedCount > normalizedMax ? `${normalizedMax}+` : `${normalizedCount}`;
+}
+function getBadgeText(props) {
+	if (props.count !== void 0) return formatBadgeCount(props);
+	if (props.label !== void 0) return `${props.label}`;
+	return "";
+}
+function resolveBadgeColors(tone, variant) {
+	const toneColors = DEFAULT_TONES[tone];
+	if (variant === "outline") return {
+		backgroundColor: 0,
+		backgroundAlpha: 0,
+		borderColor: toneColors.borderColor,
+		borderWidth: 1,
+		textColor: toneColors.outlineTextColor
+	};
+	if (variant === "soft") return {
+		backgroundColor: toneColors.softBackgroundColor,
+		backgroundAlpha: 1,
+		borderColor: toneColors.borderColor,
+		borderWidth: 1,
+		textColor: toneColors.outlineTextColor
+	};
+	return {
+		backgroundColor: toneColors.backgroundColor,
+		backgroundAlpha: 1,
+		borderColor: toneColors.borderColor,
+		borderWidth: 0,
+		textColor: toneColors.textColor
+	};
+}
+function getBadgeSizeConfig(size) {
+	return DEFAULT_SIZES[size];
+}
+function resolveBadgeTextStyle(options) {
+	const sizeConfig = getBadgeSizeConfig(options.size);
+	return {
+		color: options.textColor,
+		fontSize: `${sizeConfig.fontSize}px`,
+		...options.themedTextStyle ?? {},
+		...options.explicitTextStyle ?? {}
+	};
+}
+function Badge(props) {
+	const { children, label, count, maxCount, dot = false, tone: explicitTone, variant: explicitVariant, size: explicitSize, textStyle: explicitTextStyle, disabled = false, disabledAlpha: explicitDisabledAlpha, theme, width, height, padding, gap, cornerRadius, backgroundColor, backgroundAlpha, borderColor, borderWidth, alpha, ...viewProps } = props;
+	const { props: themed, nestedTheme } = getThemedProps("Badge", useTheme(), theme ?? {});
+	const tone = explicitTone ?? themed.tone ?? "neutral";
+	const variant = explicitVariant ?? themed.variant ?? "solid";
+	const size = explicitSize ?? themed.size ?? "medium";
+	const sizeConfig = getBadgeSizeConfig(size);
+	const colors = resolveBadgeColors(tone, variant);
+	const disabledAlpha = explicitDisabledAlpha ?? themed.disabledAlpha ?? .5;
+	const effectiveAlpha = disabled ? disabledAlpha : alpha;
+	const resolvedMaxCount = maxCount ?? themed.maxCount ?? 99;
+	const text = count !== void 0 ? formatBadgeCount({
+		count,
+		maxCount: resolvedMaxCount
+	}) : label !== void 0 ? `${label}` : "";
+	const resolvedTextStyle = resolveBadgeTextStyle({
+		size,
+		textColor: colors.textColor,
+		themedTextStyle: themed.textStyle,
+		explicitTextStyle
+	});
+	const dotSize = themed.dotSize ?? sizeConfig.dotSize;
+	if (dot) return /* @__PURE__ */ require_jsx_runtime.jsx(View, {
+		...viewProps,
+		width: width ?? dotSize,
+		height: height ?? dotSize,
+		backgroundColor: backgroundColor ?? themed.backgroundColor ?? colors.backgroundColor,
+		backgroundAlpha: backgroundAlpha ?? themed.backgroundAlpha ?? colors.backgroundAlpha,
+		borderColor: borderColor ?? themed.borderColor ?? colors.borderColor,
+		borderWidth: borderWidth ?? themed.borderWidth ?? colors.borderWidth,
+		cornerRadius: cornerRadius ?? themed.cornerRadius ?? dotSize / 2,
+		...effectiveAlpha !== void 0 ? { alpha: effectiveAlpha } : {},
+		theme: nestedTheme
+	});
+	return /* @__PURE__ */ require_jsx_runtime.jsx(View, {
+		...viewProps,
+		width: width ?? themed.width ?? "auto",
+		height: height ?? themed.height ?? sizeConfig.height,
+		direction: "row",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: gap ?? themed.gap ?? sizeConfig.gap,
+		padding: padding ?? themed.padding ?? sizeConfig.padding,
+		backgroundColor: backgroundColor ?? themed.backgroundColor ?? colors.backgroundColor,
+		backgroundAlpha: backgroundAlpha ?? themed.backgroundAlpha ?? colors.backgroundAlpha,
+		borderColor: borderColor ?? themed.borderColor ?? colors.borderColor,
+		borderWidth: borderWidth ?? themed.borderWidth ?? colors.borderWidth,
+		cornerRadius: cornerRadius ?? themed.cornerRadius ?? sizeConfig.cornerRadius,
+		...effectiveAlpha !== void 0 ? { alpha: effectiveAlpha } : {},
+		theme: nestedTheme,
+		children: children ?? /* @__PURE__ */ require_jsx_runtime.jsx(Text, {
+			text,
+			style: resolvedTextStyle
+		})
+	});
+}
+function Tag(props) {
+	const { selected = false, onRemove, closeLabel = "x", tone, variant, size, theme, children, label, textStyle, ...badgeProps } = props;
+	const { props: themed, nestedTheme } = getThemedProps("Tag", useTheme(), theme ?? {});
+	const resolvedTone = tone ?? themed.tone ?? (selected ? "primary" : "neutral");
+	const resolvedVariant = variant ?? themed.variant ?? (selected ? "solid" : "soft");
+	const resolvedSize = size ?? themed.size ?? "medium";
+	const resolvedTextStyle = resolveBadgeTextStyle({
+		size: resolvedSize,
+		textColor: resolveBadgeColors(resolvedTone, resolvedVariant).textColor,
+		themedTextStyle: themed.textStyle,
+		explicitTextStyle: textStyle
+	});
+	const text = label !== void 0 ? `${label}` : "";
+	return /* @__PURE__ */ require_jsx_runtime.jsxs(Badge, {
+		...badgeProps,
+		tone: resolvedTone,
+		variant: resolvedVariant,
+		size: resolvedSize,
+		textStyle: resolvedTextStyle,
+		theme: nestedTheme,
+		children: [
+			label !== void 0 && /* @__PURE__ */ require_jsx_runtime.jsx(Text, {
+				text,
+				style: resolvedTextStyle
+			}),
+			children,
+			onRemove && /* @__PURE__ */ require_jsx_runtime.jsx(Button, {
+				width: themed.closeSize ?? 16,
+				height: themed.closeSize ?? 16,
+				padding: 0,
+				cornerRadius: (themed.closeSize ?? 16) / 2,
+				onClick: onRemove,
+				theme: nestedTheme,
+				children: /* @__PURE__ */ require_jsx_runtime.jsx(Text, {
+					text: closeLabel,
+					style: resolvedTextStyle
+				})
+			})
+		]
+	});
+}
+//#endregion
 //#region src/effects/use-effect.ts
 /**
 * Custom hook for Phaser game object effects (shake, pulse, etc.)
@@ -23852,83 +24355,437 @@ function Button(props) {
 	});
 }
 //#endregion
-//#region src/components/custom/Graphics.tsx
-/**
-* Graphics component
-* Renders custom vector shapes via imperative drawing API
-*
-* @example
-* ```tsx
-* <Graphics
-*   onDraw={(g) => {
-*     g.fillStyle(0xff0000, 1)
-*     g.fillCircle(50, 50, 50)
-*   }}
-* />
-* ```
-*/
-function Graphics(props) {
-	const { props: themed, nestedTheme } = getThemedProps("Graphics", useTheme(), props);
-	return /* @__PURE__ */ require_jsx_runtime.jsx("graphics", {
-		...themed,
-		theme: nestedTheme
-	});
+//#region src/components/custom/Checkbox.tsx
+function getNextCheckedState(checked, tristate) {
+	if (!tristate) return checked === true ? false : true;
+	if (checked === false) return true;
+	if (checked === true) return "indeterminate";
+	return false;
 }
-//#endregion
-//#region src/components/custom/RadioButton.tsx
-/** @jsxImportSource ../.. */
-/**
-* RadioButton component - Selectable option with circle indicator and label
-*/
-/**
-* RadioButton component - displays a selectable circle with label
-* @param props - RadioButton properties
-* @returns RadioButton JSX element
-*/
-function RadioButton(props) {
-	const { props: themed, nestedTheme } = getThemedProps("RadioButton", void 0, {});
-	const size = themed.size ?? 16;
-	const innerSize = themed.innerSize ?? size * .75;
-	const innerRadius = innerSize * .5;
-	const outerRadius = size * .5;
+function normalizeCheckedState(checked, tristate) {
+	return checked === "indeterminate" && !tristate ? false : checked;
+}
+function drawDefaultIndicator(graphics, indicatorProps) {
+	const { checked, disabled, size, color, checkedColor, indeterminateColor } = indicatorProps;
+	const borderWidth = Math.max(2, Math.round(size * .1));
+	const inset = Math.max(4, Math.round(size * .22));
+	const radius = Math.max(2, Math.round(size * .15));
+	const alpha = disabled ? .45 : 1;
+	graphics.clear();
+	graphics.lineStyle(borderWidth, checked === false ? color : checkedColor, alpha);
+	graphics.strokeRoundedRect(borderWidth / 2, borderWidth / 2, size - borderWidth, size - borderWidth, radius);
+	if (checked === true) {
+		graphics.lineStyle(borderWidth + 1, checkedColor, alpha);
+		graphics.beginPath();
+		graphics.moveTo(inset, size * .52);
+		graphics.lineTo(size * .43, size - inset);
+		graphics.lineTo(size - inset, inset);
+		graphics.strokePath();
+	}
+	if (checked === "indeterminate") {
+		graphics.lineStyle(borderWidth + 1, indeterminateColor, alpha);
+		graphics.beginPath();
+		graphics.moveTo(inset, size / 2);
+		graphics.lineTo(size - inset, size / 2);
+		graphics.strokePath();
+	}
+}
+function Checkbox(props) {
+	const { props: themed, nestedTheme } = getThemedProps("Checkbox", useTheme(), props.theme ?? {});
+	const size = themed.size ?? 20;
+	const gap = themed.gap ?? 8;
+	const labelPosition = props.labelPosition ?? themed.labelPosition ?? "right";
+	const disabled = props.disabled ?? false;
+	const disabledAlpha = themed.disabledAlpha ?? .5;
+	const tristate = props.tristate ?? false;
+	const [checked, setChecked] = useState(normalizeCheckedState(props.checked ?? props.defaultChecked ?? false, tristate));
+	useEffect(() => {
+		if (props.checked !== void 0) setChecked(normalizeCheckedState(props.checked, tristate));
+	}, [props.checked, tristate]);
+	const indicatorProps = {
+		checked,
+		disabled,
+		size,
+		color: themed.color ?? 7829367,
+		checkedColor: themed.checkedColor ?? 5025616,
+		indeterminateColor: themed.indeterminateColor ?? themed.checkedColor ?? 5025616
+	};
+	const handleToggle = () => {
+		if (disabled) return;
+		const nextChecked = getNextCheckedState(checked, tristate);
+		if (props.checked === void 0) setChecked(nextChecked);
+		props.onChange?.(nextChecked);
+	};
+	const indicator = props.indicator ?? props.renderIndicator?.(indicatorProps) ?? /* @__PURE__ */ require_jsx_runtime.jsx(Graphics, {
+		width: size,
+		height: size,
+		headless: false,
+		dependencies: [
+			indicatorProps.checked,
+			indicatorProps.disabled,
+			indicatorProps.size,
+			indicatorProps.color,
+			indicatorProps.checkedColor,
+			indicatorProps.indeterminateColor
+		],
+		onDraw: (graphics) => drawDefaultIndicator(graphics, indicatorProps)
+	});
+	const label = props.label && labelPosition !== "none" ? /* @__PURE__ */ require_jsx_runtime.jsx(Text, {
+		text: props.label,
+		style: themed.labelStyle,
+		alpha: disabled ? disabledAlpha : 1
+	}) : null;
 	return /* @__PURE__ */ require_jsx_runtime.jsxs(View, {
 		direction: "row",
 		alignItems: "center",
-		enableGestures: true,
-		onTouch: () => props.onClick?.(),
+		enableGestures: !disabled,
+		onTouch: handleToggle,
 		theme: nestedTheme,
-		gap: themed.gap,
-		children: [/* @__PURE__ */ require_jsx_runtime.jsx(View, {
-			width: size,
-			height: size,
-			backgroundColor: themed.color,
-			alignItems: "center",
-			justifyContent: "center",
-			backgroundAlpha: 1,
-			padding: 0,
-			cornerRadius: outerRadius,
-			children: /* @__PURE__ */ require_jsx_runtime.jsx(View, {
-				width: innerSize,
-				height: innerSize,
-				backgroundColor: themed.selectedColor,
-				visible: props.selected ?? false,
-				cornerRadius: innerRadius
-			})
-		}), /* @__PURE__ */ require_jsx_runtime.jsx(Text, {
-			text: props.label,
-			style: themed.labelStyle
-		})]
+		gap,
+		alpha: disabled ? disabledAlpha : 1,
+		children: [
+			labelPosition === "left" && label,
+			indicator,
+			labelPosition !== "left" && label
+		]
 	}, props.key);
 }
 //#endregion
-//#region src/components/custom/RadioGroup.tsx
-/** @jsxImportSource ../.. */
+//#region src/design-tokens/use-theme-tokens.ts
 /**
-* RadioGroup component - Manages a group of radio buttons with single-selection logic
+* Hook to access complete design token system
+* Combines colors with text styles, spacing, sizes, and radius tokens
 */
 /**
-* RadioGroup component - displays a group of radio buttons with single-selection
-* @param props - RadioGroup properties
+* 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/Graphics.tsx
+/**
+* Graphics component
+* Renders custom vector shapes via imperative drawing API
+*
+* @example
+* ```tsx
+* <Graphics
+*   onDraw={(g) => {
+*     g.fillStyle(0xff0000, 1)
+*     g.fillCircle(50, 50, 50)
+*   }}
+* />
+* ```
+*/
+function Graphics(props) {
+	const { props: themed, nestedTheme } = getThemedProps("Graphics", useTheme(), props);
+	return /* @__PURE__ */ require_jsx_runtime.jsx("graphics", {
+		...themed,
+		theme: nestedTheme
+	});
+}
+//#endregion
+//#region src/components/custom/RadioButton.tsx
+/** @jsxImportSource ../.. */
+/**
+* RadioButton component - Selectable option with circle indicator and label
+*/
+/**
+* RadioButton component - displays a selectable circle with label
+* @param props - RadioButton properties
+* @returns RadioButton JSX element
+*/
+function RadioButton(props) {
+	const { props: themed, nestedTheme } = getThemedProps("RadioButton", void 0, {});
+	const size = themed.size ?? 16;
+	const innerSize = themed.innerSize ?? size * .75;
+	const innerRadius = innerSize * .5;
+	const outerRadius = size * .5;
+	return /* @__PURE__ */ require_jsx_runtime.jsxs(View, {
+		direction: "row",
+		alignItems: "center",
+		enableGestures: true,
+		onTouch: () => props.onClick?.(),
+		theme: nestedTheme,
+		gap: themed.gap,
+		children: [/* @__PURE__ */ require_jsx_runtime.jsx(View, {
+			width: size,
+			height: size,
+			backgroundColor: themed.color,
+			alignItems: "center",
+			justifyContent: "center",
+			backgroundAlpha: 1,
+			padding: 0,
+			cornerRadius: outerRadius,
+			children: /* @__PURE__ */ require_jsx_runtime.jsx(View, {
+				width: innerSize,
+				height: innerSize,
+				backgroundColor: themed.selectedColor,
+				visible: props.selected ?? false,
+				cornerRadius: innerRadius
+			})
+		}), /* @__PURE__ */ require_jsx_runtime.jsx(Text, {
+			text: props.label,
+			style: themed.labelStyle
+		})]
+	}, props.key);
+}
+//#endregion
+//#region src/components/custom/RadioGroup.tsx
+/** @jsxImportSource ../.. */
+/**
+* RadioGroup component - Manages a group of radio buttons with single-selection logic
+*/
+/**
+* RadioGroup component - displays a group of radio buttons with single-selection
+* @param props - RadioGroup properties
 * @returns RadioGroup JSX element
 */
 function RadioGroup(props) {
@@ -24031,42 +24888,537 @@ function Text(props) {
 	});
 }
 //#endregion
-//#region src/components/custom/TileSprite.tsx
+//#region src/components/custom/TileSprite.tsx
+/**
+* TileSprite component
+* Displays repeating texture patterns for backgrounds and effects
+*
+* @example
+* ```tsx
+* // Scrolling background
+* <TileSprite
+*   texture="clouds"
+*   width={800}
+*   height={200}
+*   tilePositionX={scrollOffset}
+* />
+*
+* // Scaled tiles
+* <TileSprite
+*   texture="pattern"
+*   width={400}
+*   height={400}
+*   tileScaleX={2}
+*   tileScaleY={2}
+* />
+* ```
+*/
+function TileSprite(props) {
+	const { props: themed, nestedTheme } = getThemedProps("TileSprite", useTheme(), props);
+	return /* @__PURE__ */ require_jsx_runtime.jsx("tilesprite", {
+		...themed,
+		theme: nestedTheme
+	});
+}
+//#endregion
+//#region src/components/custom/Particles.tsx
+function Particles(props) {
+	return /* @__PURE__ */ require_jsx_runtime.jsx("particles", { ...props });
+}
+//#endregion
+//#region src/components/custom/Portal.tsx
+/** @jsxImportSource ../.. */
+/**
+* Portal component - renders children into a separate tree at specified depth
+* Enables overlays, modals, tooltips without affecting parent tree layout
+*/
+/**
+* Portal component
+* Renders child VNode into a separate container tree at specified depth.
+* Automatically injects event blockers to prevent click-through and scrolling.
+*
+* @example
+* ```tsx
+* // Basic portal (automatically blocks events in content area)
+* <Portal depth={1000}>
+*   <View>Overlay content</View>
+* </Portal>
+*
+* // Non-blocking portal (allows click-through)
+* <Portal depth={500} blockEvents={false}>
+*   <View>Info overlay - clickable background</View>
+* </Portal>
+*
+* // Portal with custom event handling (original handlers are preserved)
+* <Portal depth={1000}>
+*   <View onTouch={(e) => console.log('clicked')}>
+*     Content
+*   </View>
+* </Portal>
+* ```
+*/
+function Portal(props) {
+	const portalId = useMemo(() => props.id ?? portalRegistry.generateId(), [props.id]);
+	const depth = props.depth ?? 1e3;
+	const scene = useScene();
+	const blockEvents = props.blockEvents ?? true;
+	const mountedNodesRef = useRef([]);
+	const previousChildrenRef = useRef([]);
+	const normalizeChildren = (children) => {
+		if (!children) return [];
+		return (Array.isArray(children) ? children.flat(Infinity) : [children]).filter((child) => !!child && typeof child === "object" && "type" in child);
+	};
+	useEffect(() => {
+		const portalContainer = portalRegistry.register(portalId, depth, scene, {
+			type: "View",
+			props: {},
+			children: []
+		}, scene.add.container(0, 0));
+		let blockerContainer = null;
+		if (blockEvents) {
+			blockerContainer = scene.add.container(0, 0);
+			portalContainer.add(blockerContainer);
+			blockerContainer.setDepth(-1);
+		}
+		const children = normalizeChildren(props.children);
+		const mountedNodes = [];
+		for (const child of children) if (child) {
+			const mountedNode = mount(portalContainer, child);
+			if (mountedNode) {
+				portalContainer.add(mountedNode);
+				mountedNodes.push(mountedNode);
+			}
+		}
+		mountedNodesRef.current = mountedNodes;
+		previousChildrenRef.current = children;
+		const gestureManager = getGestureManager(scene);
+		if (blockEvents && blockerContainer) {
+			const blocker = blockerContainer;
+			DeferredLayoutQueue.defer(() => {
+				const firstChild = portalContainer.getAt(1);
+				if (!firstChild) return;
+				const { width, height } = firstChild.__cachedLayoutSize ? firstChild.__cachedLayoutSize : firstChild.__getLayoutSize ? firstChild.__getLayoutSize() : (() => {
+					const bounds = firstChild.getBounds();
+					return {
+						width: bounds.width,
+						height: bounds.height
+					};
+				})();
+				const x = firstChild.x;
+				const y = firstChild.y;
+				blocker.setPosition(x, y);
+				const hitArea = new phaser.Geom.Rectangle(0, 0, width, height);
+				gestureManager.registerContainer(blocker, {
+					onTouch: (e) => {
+						e.stopPropagation();
+					},
+					onTouchMove: (e) => {
+						e.stopPropagation();
+					}
+				}, hitArea);
+			});
+		}
+		return () => {
+			if (blockEvents && blockerContainer) gestureManager.unregisterContainer(blockerContainer);
+			portalRegistry.unregister(portalId);
+		};
+	}, [
+		portalId,
+		depth,
+		scene,
+		blockEvents
+	]);
+	useEffect(() => {
+		const portal = portalRegistry.get(portalId);
+		if (!portal) return;
+		const portalContainer = portal.container;
+		const newChildren = normalizeChildren(props.children);
+		const oldChildren = previousChildrenRef.current;
+		const maxLen = Math.max(oldChildren.length, newChildren.length);
+		for (let i = 0; i < maxLen; i++) {
+			const oldChild = oldChildren[i];
+			const newChild = newChildren[i];
+			if (oldChild && newChild) patchVNode(portalContainer, oldChild, newChild);
+			else if (!oldChild && newChild) {
+				const mountedNode = mount(portalContainer, newChild);
+				if (mountedNode) {
+					portalContainer.add(mountedNode);
+					mountedNodesRef.current.push(mountedNode);
+				}
+			} else if (oldChild && !newChild) unmount(oldChild);
+		}
+		previousChildrenRef.current = newChildren;
+	}, [props.children, portalId]);
+	return null;
+}
+//#endregion
+//#region src/components/custom/Popover.tsx
+function getMainPlacement(placement) {
+	return placement.split("-")[0];
+}
+function getCrossPlacement(placement) {
+	return placement.split("-")[1] ?? "center";
+}
+function calculateOverlayPosition(options) {
+	const { anchor, content, placement, offset } = options;
+	const main = getMainPlacement(placement);
+	const cross = getCrossPlacement(placement);
+	let x;
+	let y;
+	if (main === "top" || main === "bottom") {
+		y = main === "top" ? anchor.y - content.height - offset : anchor.y + anchor.height + offset;
+		if (cross === "start") x = anchor.x;
+		else if (cross === "end") x = anchor.x + anchor.width - content.width;
+		else x = anchor.x + (anchor.width - content.width) / 2;
+	} else {
+		x = main === "left" ? anchor.x - content.width - offset : anchor.x + anchor.width + offset;
+		if (cross === "start") y = anchor.y;
+		else if (cross === "end") y = anchor.y + anchor.height - content.height;
+		else y = anchor.y + (anchor.height - content.height) / 2;
+	}
+	const viewport = options.viewport;
+	if (viewport) {
+		const padding = options.viewportPadding ?? 8;
+		x = Math.min(Math.max(padding, x), Math.max(padding, viewport.width - content.width - padding));
+		y = Math.min(Math.max(padding, y), Math.max(padding, viewport.height - content.height - padding));
+	}
+	return {
+		x,
+		y,
+		placement
+	};
+}
+function getLayoutSize(container) {
+	const withLayout = container;
+	return withLayout?.__getLayoutSize?.() ?? withLayout?.__cachedLayoutSize ?? {
+		width: 0,
+		height: 0
+	};
+}
+function getWorldPosition(container) {
+	const matrix = container.getWorldTransformMatrix?.();
+	if (matrix) return {
+		x: matrix.tx,
+		y: matrix.ty
+	};
+	return {
+		x: container.x ?? 0,
+		y: container.y ?? 0
+	};
+}
+function getAnchorRect(container) {
+	if (!container) return {
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	};
+	const size = getLayoutSize(container);
+	const position = getWorldPosition(container);
+	return {
+		x: position.x,
+		y: position.y,
+		width: size.width,
+		height: size.height
+	};
+}
+var FALLBACK_CONTENT_SIZE = {
+	width: 220,
+	height: 120
+};
+function assignRef(ref, value) {
+	if (!ref) return;
+	if (typeof ref === "function") {
+		ref(value);
+		return;
+	}
+	ref.current = value;
+}
+function Popover(props) {
+	const { props: themed, nestedTheme } = getThemedProps("Popover", useTheme(), props.theme ?? {});
+	const scene = useScene();
+	const triggerRef = useRef(null);
+	const contentRef = useRef(null);
+	const [measuredContentSize, setMeasuredContentSize] = useState(null);
+	const [internalOpen, setInternalOpen] = useState(props.defaultOpen ?? false);
+	const isControlled = props.isOpen !== void 0;
+	const isOpen = isControlled ? props.isOpen === true : internalOpen;
+	const placement = props.placement ?? themed.placement ?? "bottom";
+	const offset = props.offset ?? themed.offset ?? 8;
+	const depth = props.depth ?? themed.depth ?? 1100;
+	const closeOnOutside = props.closeOnOutside ?? themed.closeOnOutside ?? true;
+	const closeOnEscape = props.closeOnEscape ?? themed.closeOnEscape ?? true;
+	const viewportPadding = props.viewportPadding ?? themed.viewportPadding ?? 8;
+	const explicitContentWidth = props.contentWidth ?? themed.contentWidth;
+	const explicitContentHeight = props.contentHeight ?? themed.contentHeight;
+	const viewport = portalRegistry.getViewportSize(scene);
+	const anchor = getAnchorRect(triggerRef.current);
+	const measuredWidth = measuredContentSize?.width ?? FALLBACK_CONTENT_SIZE.width;
+	const measuredHeight = measuredContentSize?.height ?? FALLBACK_CONTENT_SIZE.height;
+	const isPositionReady = !(explicitContentWidth === void 0 || explicitContentHeight === void 0) || measuredContentSize !== null;
+	const contentWidth = props.matchTriggerWidth ? Math.max(anchor.width, explicitContentWidth ?? measuredWidth) : explicitContentWidth ?? measuredWidth;
+	const overlayPosition = calculateOverlayPosition({
+		anchor,
+		content: {
+			width: contentWidth,
+			height: explicitContentHeight ?? measuredHeight
+		},
+		placement,
+		offset,
+		viewport,
+		viewportPadding
+	});
+	const setOpen = (open) => {
+		if (props.disabled && open) return;
+		if (!isControlled) setInternalOpen(open);
+		props.onOpenChange?.(open);
+	};
+	const toggleOpen = (event) => {
+		event.stopPropagation();
+		setOpen(!isOpen);
+	};
+	const close = (event) => {
+		event?.stopPropagation();
+		setOpen(false);
+	};
+	const contentProps = props.contentProps ?? {};
+	const contentPropsRef = contentProps.ref;
+	const contentPropsAlpha = contentProps.alpha;
+	const handleContentRef = (container) => {
+		contentRef.current = container;
+		assignRef(contentPropsRef, container);
+	};
+	useEffect(() => {
+		if (!closeOnEscape || !isOpen) return;
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") setOpen(false);
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [closeOnEscape, isOpen]);
+	useEffect(() => {
+		if (!isOpen) return;
+		DeferredLayoutQueue.defer(() => {
+			const size = getLayoutSize(contentRef.current);
+			if (size.width <= 0 || size.height <= 0) return;
+			setMeasuredContentSize((current) => {
+				if (current?.width === size.width && current?.height === size.height) return current;
+				return {
+					width: size.width,
+					height: size.height
+				};
+			});
+		});
+	}, [
+		isOpen,
+		props.children,
+		explicitContentWidth,
+		explicitContentHeight
+	]);
+	return /* @__PURE__ */ require_jsx_runtime.jsxs(require_jsx_runtime.Fragment, { children: [/* @__PURE__ */ require_jsx_runtime.jsx(View, {
+		...props.triggerProps ?? {},
+		ref: triggerRef,
+		enableGestures: !props.disabled,
+		onTouch: toggleOpen,
+		children: props.trigger
+	}), isOpen && /* @__PURE__ */ require_jsx_runtime.jsxs(Portal, {
+		depth,
+		blockEvents: false,
+		children: [closeOnOutside && /* @__PURE__ */ require_jsx_runtime.jsx(View, {
+			width: viewport.width,
+			height: viewport.height,
+			backgroundColor: 0,
+			backgroundAlpha: 0,
+			onTouch: close,
+			onTouchMove: (event) => event.stopPropagation()
+		}), /* @__PURE__ */ require_jsx_runtime.jsx(View, {
+			...contentProps,
+			ref: handleContentRef,
+			x: overlayPosition.x,
+			y: overlayPosition.y,
+			...props.matchTriggerWidth || explicitContentWidth !== void 0 ? { width: contentWidth } : {},
+			direction: "column",
+			backgroundColor: themed.backgroundColor ?? 1120295,
+			borderColor: themed.borderColor ?? 3359061,
+			borderWidth: themed.borderWidth ?? 1,
+			cornerRadius: themed.cornerRadius ?? 8,
+			padding: themed.padding ?? 10,
+			gap: themed.gap ?? 8,
+			...isPositionReady ? contentPropsAlpha !== void 0 ? { alpha: contentPropsAlpha } : {} : { alpha: 0 },
+			onTouch: (event) => event.stopPropagation(),
+			theme: nestedTheme,
+			children: props.children
+		})]
+	})] });
+}
+function ContextMenu(props) {
+	const { items, width: explicitWidth, onSelect, isOpen: explicitOpen, defaultOpen, onOpenChange, ...popoverProps } = props;
+	const { props: themed, nestedTheme } = getThemedProps("ContextMenu", useTheme(), props.theme ?? {});
+	const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+	const isControlled = explicitOpen !== void 0;
+	const isOpen = isControlled ? explicitOpen === true : internalOpen;
+	const width = explicitWidth ?? themed.width ?? 220;
+	const itemHeight = themed.itemHeight ?? 34;
+	const setOpen = (open) => {
+		if (!isControlled) setInternalOpen(open);
+		onOpenChange?.(open);
+	};
+	const handleSelect = (item) => {
+		if (item.disabled) return;
+		item.onSelect?.();
+		onSelect?.(item);
+		setOpen(false);
+	};
+	return /* @__PURE__ */ require_jsx_runtime.jsx(Popover, {
+		...popoverProps,
+		isOpen,
+		onOpenChange: setOpen,
+		contentWidth: width,
+		contentHeight: Math.max(1, items.length) * itemHeight + 20,
+		contentProps: {
+			padding: themed.padding ?? 6,
+			gap: themed.gap ?? 2,
+			backgroundColor: themed.backgroundColor,
+			borderColor: themed.borderColor,
+			borderWidth: themed.borderWidth,
+			cornerRadius: themed.cornerRadius,
+			theme: nestedTheme
+		},
+		children: items.map((item) => {
+			const textColor = item.disabled ? themed.disabledTextColor ?? "#64748b" : item.danger ? themed.dangerTextColor ?? "#fecaca" : themed.textStyle?.color ?? "#f8fafc";
+			return /* @__PURE__ */ require_jsx_runtime.jsxs(View, {
+				width: "fill",
+				height: itemHeight,
+				direction: "row",
+				alignItems: "center",
+				gap: themed.itemGap ?? 8,
+				padding: themed.itemPadding ?? {
+					left: 10,
+					right: 10,
+					top: 6,
+					bottom: 6
+				},
+				cornerRadius: themed.itemCornerRadius ?? 5,
+				backgroundColor: item.danger ? themed.dangerBackgroundColor ?? 2042167 : 0,
+				backgroundAlpha: item.danger ? .35 : 0,
+				enableGestures: !item.disabled,
+				onTouch: (event) => {
+					event.stopPropagation();
+					handleSelect(item);
+				},
+				children: [
+					item.prefix,
+					/* @__PURE__ */ require_jsx_runtime.jsx(View, {
+						flex: 1,
+						children: /* @__PURE__ */ require_jsx_runtime.jsx(Text, {
+							text: item.label,
+							style: {
+								...themed.textStyle ?? {},
+								color: textColor
+							}
+						})
+					}),
+					item.suffix
+				]
+			}, item.id);
+		})
+	});
+}
+//#endregion
+//#region src/components/custom/ProgressBar.tsx
+/** @jsxImportSource ../.. */
 /**
-* TileSprite component
-* Displays repeating texture patterns for backgrounds and effects
-*
-* @example
-* ```tsx
-* // Scrolling background
-* <TileSprite
-*   texture="clouds"
-*   width={800}
-*   height={200}
-*   tilePositionX={scrollOffset}
-* />
-*
-* // Scaled tiles
-* <TileSprite
-*   texture="pattern"
-*   width={400}
-*   height={400}
-*   tileScaleX={2}
-*   tileScaleY={2}
-* />
-* ```
+* ProgressBar component - determinate progress indicator for health, loading, cooldowns, and XP.
 */
-function TileSprite(props) {
-	const { props: themed, nestedTheme } = getThemedProps("TileSprite", useTheme(), props);
-	return /* @__PURE__ */ require_jsx_runtime.jsx("tilesprite", {
-		...themed,
-		theme: nestedTheme
-	});
+function clampProgressValue(value, min, max) {
+	if (!Number.isFinite(value)) return min;
+	return Math.min(Math.max(value, min), max);
 }
-//#endregion
-//#region src/components/custom/Particles.tsx
-function Particles(props) {
-	return /* @__PURE__ */ require_jsx_runtime.jsx("particles", { ...props });
+function getProgressRatio(value, min, max) {
+	if (!Number.isFinite(min) || !Number.isFinite(max) || min === max) return 0;
+	const normalizedMin = Math.min(min, max);
+	const normalizedMax = Math.max(min, max);
+	return (clampProgressValue(value, normalizedMin, normalizedMax) - normalizedMin) / (normalizedMax - normalizedMin);
+}
+function formatDefaultValue(props) {
+	return `${Math.round(props.percent)}%`;
+}
+function ProgressBar(props) {
+	const { value, min = 0, max = 100, orientation: explicitOrientation, label, showValue, labelPosition: explicitLabelPosition, formatValue, trackColor: explicitTrackColor, fillColor: explicitFillColor, borderColor: explicitBorderColor, borderWidth: explicitBorderWidth, cornerRadius: explicitCornerRadius, labelStyle: explicitLabelStyle, disabled = false, disabledAlpha: explicitDisabledAlpha, theme, width, height, alpha, ...viewProps } = props;
+	const { props: themed, nestedTheme } = getThemedProps("ProgressBar", useTheme(), theme ?? {});
+	const orientation = explicitOrientation ?? themed.orientation ?? "horizontal";
+	const ratio = getProgressRatio(value, min, max);
+	const percent = ratio * 100;
+	const labelPosition = explicitLabelPosition ?? themed.labelPosition ?? (showValue || label ? "right" : "none");
+	const shouldShowText = labelPosition !== "none" && Boolean(showValue || label);
+	const text = shouldShowText ? [label, showValue ? (formatValue ?? themed.formatValue ?? formatDefaultValue)({
+		value,
+		min,
+		max,
+		ratio,
+		percent
+	}) : void 0].filter(Boolean).join(" ") : "";
+	const resolvedWidth = width ?? themed.width ?? (orientation === "horizontal" ? 240 : 24);
+	const resolvedHeight = height ?? themed.height ?? (orientation === "horizontal" ? 22 : 160);
+	const trackColor = explicitTrackColor ?? themed.trackColor ?? 2042167;
+	const fillColor = explicitFillColor ?? themed.fillColor ?? 2278750;
+	const borderColor = explicitBorderColor ?? themed.borderColor ?? 3359061;
+	const borderWidth = explicitBorderWidth ?? themed.borderWidth ?? 1;
+	const cornerRadius = explicitCornerRadius ?? themed.cornerRadius ?? (orientation === "horizontal" ? 11 : 8);
+	const labelStyle = explicitLabelStyle ?? themed.labelStyle ?? {
+		color: "#ffffff",
+		fontSize: "12px"
+	};
+	const disabledAlpha = explicitDisabledAlpha ?? themed.disabledAlpha ?? .5;
+	const effectiveAlpha = disabled ? disabledAlpha : alpha;
+	const rootDirection = labelPosition === "left" || labelPosition === "right" ? "row" : labelPosition === "top" || labelPosition === "bottom" ? "column" : "column";
+	const labelNode = shouldShowText ? /* @__PURE__ */ require_jsx_runtime.jsx(Text, {
+		text,
+		style: labelStyle
+	}) : null;
+	const fillProps = orientation === "horizontal" ? {
+		width: `${percent}%`,
+		height: "fill"
+	} : {
+		width: "fill",
+		height: `${percent}%`
+	};
+	const track = /* @__PURE__ */ require_jsx_runtime.jsxs(View, {
+		width: resolvedWidth,
+		height: resolvedHeight,
+		direction: orientation === "horizontal" ? "stack" : "column",
+		justifyContent: orientation === "vertical" ? "end" : "start",
+		backgroundColor: trackColor,
+		borderColor,
+		borderWidth,
+		cornerRadius,
+		overflow: "hidden",
+		theme: nestedTheme,
+		children: [/* @__PURE__ */ require_jsx_runtime.jsx(View, {
+			...fillProps,
+			backgroundColor: fillColor,
+			cornerRadius
+		}), labelPosition === "inside" && shouldShowText && /* @__PURE__ */ require_jsx_runtime.jsx(View, {
+			width: "fill",
+			height: "fill",
+			justifyContent: "center",
+			alignItems: "center",
+			children: labelNode
+		})]
+	});
+	return /* @__PURE__ */ require_jsx_runtime.jsxs(View, {
+		...viewProps,
+		direction: rootDirection,
+		alignItems: "center",
+		gap: themed.gap ?? 8,
+		...effectiveAlpha !== void 0 ? { alpha: effectiveAlpha } : {},
+		theme: nestedTheme,
+		children: [
+			labelPosition === "top" || labelPosition === "left" ? labelNode : null,
+			track,
+			labelPosition !== "inside" && (labelPosition === "bottom" || labelPosition === "right") ? labelNode : null
+		]
+	});
 }
 //#endregion
 //#region src/components/index.ts
@@ -24082,7 +25434,6 @@ function Particles(props) {
 /**
 * Registers all built-in components with the host
 * This should be called during library initialization
-* Note: TileSprite is currently dummy (throws on use)
 */
 function registerBuiltins() {
 	register("view", {
@@ -24155,7 +25506,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
 */
@@ -25217,132 +26568,6 @@ function Accordion(props) {
 	}, props.key);
 }
 //#endregion
-//#region src/components/custom/Portal.tsx
-/** @jsxImportSource ../.. */
-/**
-* Portal component - renders children into a separate tree at specified depth
-* Enables overlays, modals, tooltips without affecting parent tree layout
-*/
-/**
-* Portal component
-* Renders child VNode into a separate container tree at specified depth.
-* Automatically injects event blockers to prevent click-through and scrolling.
-*
-* @example
-* ```tsx
-* // Basic portal (automatically blocks events in content area)
-* <Portal depth={1000}>
-*   <View>Overlay content</View>
-* </Portal>
-*
-* // Non-blocking portal (allows click-through)
-* <Portal depth={500} blockEvents={false}>
-*   <View>Info overlay - clickable background</View>
-* </Portal>
-*
-* // Portal with custom event handling (original handlers are preserved)
-* <Portal depth={1000}>
-*   <View onTouch={(e) => console.log('clicked')}>
-*     Content
-*   </View>
-* </Portal>
-* ```
-*/
-function Portal(props) {
-	const portalId = useMemo(() => props.id ?? portalRegistry.generateId(), [props.id]);
-	const depth = props.depth ?? 1e3;
-	const scene = useScene();
-	const blockEvents = props.blockEvents ?? true;
-	const mountedNodesRef = useRef([]);
-	const previousChildrenRef = useRef([]);
-	const normalizeChildren = (children) => {
-		if (!children) return [];
-		return (Array.isArray(children) ? children.flat(Infinity) : [children]).filter((child) => !!child && typeof child === "object" && "type" in child);
-	};
-	useEffect(() => {
-		const portalContainer = portalRegistry.register(portalId, depth, scene, {
-			type: "View",
-			props: {},
-			children: []
-		}, scene.add.container(0, 0));
-		let blockerContainer = null;
-		if (blockEvents) {
-			blockerContainer = scene.add.container(0, 0);
-			portalContainer.add(blockerContainer);
-			blockerContainer.setDepth(-1);
-		}
-		const children = normalizeChildren(props.children);
-		const mountedNodes = [];
-		for (const child of children) if (child) {
-			const mountedNode = mount(portalContainer, child);
-			if (mountedNode) {
-				portalContainer.add(mountedNode);
-				mountedNodes.push(mountedNode);
-			}
-		}
-		mountedNodesRef.current = mountedNodes;
-		previousChildrenRef.current = children;
-		const gestureManager = getGestureManager(scene);
-		if (blockEvents && blockerContainer) {
-			const blocker = blockerContainer;
-			DeferredLayoutQueue.defer(() => {
-				const firstChild = portalContainer.getAt(1);
-				if (!firstChild) return;
-				const { width, height } = firstChild.__cachedLayoutSize ? firstChild.__cachedLayoutSize : firstChild.__getLayoutSize ? firstChild.__getLayoutSize() : (() => {
-					const bounds = firstChild.getBounds();
-					return {
-						width: bounds.width,
-						height: bounds.height
-					};
-				})();
-				const x = firstChild.x;
-				const y = firstChild.y;
-				blocker.setPosition(x, y);
-				const hitArea = new phaser.Geom.Rectangle(0, 0, width, height);
-				gestureManager.registerContainer(blocker, {
-					onTouch: (e) => {
-						e.stopPropagation();
-					},
-					onTouchMove: (e) => {
-						e.stopPropagation();
-					}
-				}, hitArea);
-			});
-		}
-		return () => {
-			if (blockEvents && blockerContainer) gestureManager.unregisterContainer(blockerContainer);
-			portalRegistry.unregister(portalId);
-		};
-	}, [
-		portalId,
-		depth,
-		scene,
-		blockEvents
-	]);
-	useEffect(() => {
-		const portal = portalRegistry.get(portalId);
-		if (!portal) return;
-		const portalContainer = portal.container;
-		const newChildren = normalizeChildren(props.children);
-		const oldChildren = previousChildrenRef.current;
-		const maxLen = Math.max(oldChildren.length, newChildren.length);
-		for (let i = 0; i < maxLen; i++) {
-			const oldChild = oldChildren[i];
-			const newChild = newChildren[i];
-			if (oldChild && newChild) patchVNode(portalContainer, oldChild, newChild);
-			else if (!oldChild && newChild) {
-				const mountedNode = mount(portalContainer, newChild);
-				if (mountedNode) {
-					portalContainer.add(mountedNode);
-					mountedNodesRef.current.push(mountedNode);
-				}
-			} else if (oldChild && !newChild) unmount(oldChild);
-		}
-		previousChildrenRef.current = newChildren;
-	}, [props.children, portalId]);
-	return null;
-}
-//#endregion
 //#region src/components/custom/Modal.tsx
 /** @jsxImportSource ../.. */
 /**
@@ -28108,7 +29333,7 @@ function Joystick(props) {
 		y: 0
 	});
 	useLayoutEffect(() => {
-		const size = getLayoutSize(outerRef.current);
+		const size = getLayoutSize$1(outerRef.current);
 		if (size != null) {
 			const newCenter = {
 				x: size.width / 2,
@@ -29199,7 +30424,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,
@@ -29378,6 +30602,12 @@ Object.defineProperty(exports, "AlertDialog", {
 		return AlertDialog;
 	}
 });
+Object.defineProperty(exports, "Badge", {
+	enumerable: true,
+	get: function() {
+		return Badge;
+	}
+});
 Object.defineProperty(exports, "Button", {
 	enumerable: true,
 	get: function() {
@@ -29396,6 +30626,18 @@ Object.defineProperty(exports, "CharTextInput", {
 		return CharTextInput;
 	}
 });
+Object.defineProperty(exports, "Checkbox", {
+	enumerable: true,
+	get: function() {
+		return Checkbox;
+	}
+});
+Object.defineProperty(exports, "ContextMenu", {
+	enumerable: true,
+	get: function() {
+		return ContextMenu;
+	}
+});
 Object.defineProperty(exports, "DEFAULT_EFFECT", {
 	enumerable: true,
 	get: function() {
@@ -29420,6 +30662,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() {
@@ -29522,12 +30770,24 @@ Object.defineProperty(exports, "Particles", {
 		return Particles;
 	}
 });
+Object.defineProperty(exports, "Popover", {
+	enumerable: true,
+	get: function() {
+		return Popover;
+	}
+});
 Object.defineProperty(exports, "Portal", {
 	enumerable: true,
 	get: function() {
 		return Portal;
 	}
 });
+Object.defineProperty(exports, "ProgressBar", {
+	enumerable: true,
+	get: function() {
+		return ProgressBar;
+	}
+});
 Object.defineProperty(exports, "RadioButton", {
 	enumerable: true,
 	get: function() {
@@ -29612,6 +30872,12 @@ Object.defineProperty(exports, "Tabs", {
 		return Tabs;
 	}
 });
+Object.defineProperty(exports, "Tag", {
+	enumerable: true,
+	get: function() {
+		return Tag;
+	}
+});
 Object.defineProperty(exports, "Text", {
 	enumerable: true,
 	get: function() {
@@ -29714,12 +30980,24 @@ Object.defineProperty(exports, "buildEmitZoneFromLayout", {
 		return buildEmitZoneFromLayout;
 	}
 });
+Object.defineProperty(exports, "calculateOverlayPosition", {
+	enumerable: true,
+	get: function() {
+		return calculateOverlayPosition;
+	}
+});
 Object.defineProperty(exports, "calculateSliderSize", {
 	enumerable: true,
 	get: function() {
 		return calculateSliderSize;
 	}
 });
+Object.defineProperty(exports, "clampProgressValue", {
+	enumerable: true,
+	get: function() {
+		return clampProgressValue;
+	}
+});
 Object.defineProperty(exports, "createBounceEffect", {
 	enumerable: true,
 	get: function() {
@@ -29942,6 +31220,12 @@ Object.defineProperty(exports, "forestGreenPreset", {
 		return forestGreenPreset;
 	}
 });
+Object.defineProperty(exports, "formatBadgeCount", {
+	enumerable: true,
+	get: function() {
+		return formatBadgeCount;
+	}
+});
 Object.defineProperty(exports, "generateColorScale", {
 	enumerable: true,
 	get: function() {
@@ -29954,6 +31238,18 @@ Object.defineProperty(exports, "getBackgroundGraphics", {
 		return getBackgroundGraphics;
 	}
 });
+Object.defineProperty(exports, "getBadgeSizeConfig", {
+	enumerable: true,
+	get: function() {
+		return getBadgeSizeConfig;
+	}
+});
+Object.defineProperty(exports, "getBadgeText", {
+	enumerable: true,
+	get: function() {
+		return getBadgeText;
+	}
+});
 Object.defineProperty(exports, "getContrastRatio", {
 	enumerable: true,
 	get: function() {
@@ -29987,7 +31283,7 @@ Object.defineProperty(exports, "getLayoutRect", {
 Object.defineProperty(exports, "getLayoutSize", {
 	enumerable: true,
 	get: function() {
-		return getLayoutSize;
+		return getLayoutSize$1;
 	}
 });
 Object.defineProperty(exports, "getMountStats", {
@@ -30008,6 +31304,12 @@ Object.defineProperty(exports, "getPresetWithMode", {
 		return getPresetWithMode;
 	}
 });
+Object.defineProperty(exports, "getProgressRatio", {
+	enumerable: true,
+	get: function() {
+		return getProgressRatio;
+	}
+});
 Object.defineProperty(exports, "getRenderContext", {
 	enumerable: true,
 	get: function() {
@@ -30242,6 +31544,12 @@ Object.defineProperty(exports, "remountAll", {
 		return remountAll;
 	}
 });
+Object.defineProperty(exports, "resolveBadgeTextStyle", {
+	enumerable: true,
+	get: function() {
+		return resolveBadgeTextStyle;
+	}
+});
 Object.defineProperty(exports, "resolveEffect", {
 	enumerable: true,
 	get: function() {
@@ -30458,6 +31766,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() {
@@ -30495,4 +31809,4 @@ Object.defineProperty(exports, "withHooks", {
 	}
 });
 
-//# sourceMappingURL=custom-Dp3yAJdU.cjs.map
+//# sourceMappingURL=custom-37gL0VZG.cjs.map