@number10/phaserjsx 4.1.0 → 4.3.0

package/dist/{custom-C_w8D39m.js → custom-DMZASXll.js}

@@ -570,9 +570,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;
 }
@@ -584,18 +581,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
 */
@@ -620,21 +763,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 = {};
@@ -642,7 +785,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
@@ -833,7 +976,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;
@@ -845,11 +988,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);
 	}
@@ -885,8 +1030,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;
@@ -904,8 +1051,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);
 	}
@@ -16557,18 +16704,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
@@ -16948,7 +17131,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();
@@ -19812,6 +19995,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(),
@@ -20624,7 +20892,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?.();
 }
@@ -20636,7 +20904,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
@@ -20677,7 +20945,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,
@@ -20710,7 +20978,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 {
@@ -22766,6 +23034,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__ */ 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__ */ 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__ */ 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__ */ jsxs(Badge, {
+		...badgeProps,
+		tone: resolvedTone,
+		variant: resolvedVariant,
+		size: resolvedSize,
+		textStyle: resolvedTextStyle,
+		theme: nestedTheme,
+		children: [
+			label !== void 0 && /* @__PURE__ */ jsx(Text, {
+				text,
+				style: resolvedTextStyle
+			}),
+			children,
+			onRemove && /* @__PURE__ */ jsx(Button, {
+				width: themed.closeSize ?? 16,
+				height: themed.closeSize ?? 16,
+				padding: 0,
+				cornerRadius: (themed.closeSize ?? 16) / 2,
+				onClick: onRemove,
+				theme: nestedTheme,
+				children: /* @__PURE__ */ jsx(Text, {
+					text: closeLabel,
+					style: resolvedTextStyle
+				})
+			})
+		]
+	});
+}
+//#endregion
 //#region src/effects/use-effect.ts
 /**
 * Custom hook for Phaser game object effects (shake, pulse, etc.)
@@ -23748,83 +24251,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__ */ 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__ */ 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__ */ jsx(Text, {
+		text: props.label,
+		style: themed.labelStyle,
+		alpha: disabled ? disabledAlpha : 1
+	}) : null;
 	return /* @__PURE__ */ jsxs(View, {
 		direction: "row",
 		alignItems: "center",
-		enableGestures: true,
-		onTouch: () => props.onClick?.(),
+		enableGestures: !disabled,
+		onTouch: handleToggle,
 		theme: nestedTheme,
-		gap: themed.gap,
-		children: [/* @__PURE__ */ jsx(View, {
-			width: size,
-			height: size,
-			backgroundColor: themed.color,
-			alignItems: "center",
-			justifyContent: "center",
-			backgroundAlpha: 1,
-			padding: 0,
-			cornerRadius: outerRadius,
-			children: /* @__PURE__ */ jsx(View, {
-				width: innerSize,
-				height: innerSize,
-				backgroundColor: themed.selectedColor,
-				visible: props.selected ?? false,
-				cornerRadius: innerRadius
-			})
-		}), /* @__PURE__ */ 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__ */ jsx(View, {
+			...viewProps,
+			children: /* @__PURE__ */ jsx(Text, {
+				text: compactText,
+				style: valueStyle
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(View, {
+		direction: "column",
+		gap: 4,
+		...viewProps,
+		children: limitedRows.map((row) => /* @__PURE__ */ jsxs(View, {
+			direction: "row",
+			gap: 8,
+			...innerProps,
+			children: [/* @__PURE__ */ jsx(Text, {
+				text: `${row.label}:`,
+				style: rowStyle
+			}), /* @__PURE__ */ jsx(Text, {
+				text: row.value,
+				style: valueStyle
+			})]
+		}, `debug-${row.metric}`))
+	});
+}
+//#endregion
+//#region src/components/custom/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__ */ 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__ */ jsxs(View, {
+		direction: "row",
+		alignItems: "center",
+		enableGestures: true,
+		onTouch: () => props.onClick?.(),
+		theme: nestedTheme,
+		gap: themed.gap,
+		children: [/* @__PURE__ */ jsx(View, {
+			width: size,
+			height: size,
+			backgroundColor: themed.color,
+			alignItems: "center",
+			justifyContent: "center",
+			backgroundAlpha: 1,
+			padding: 0,
+			cornerRadius: outerRadius,
+			children: /* @__PURE__ */ jsx(View, {
+				width: innerSize,
+				height: innerSize,
+				backgroundColor: themed.selectedColor,
+				visible: props.selected ?? false,
+				cornerRadius: innerRadius
+			})
+		}), /* @__PURE__ */ 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) {
@@ -23965,6 +24822,501 @@ function Particles(props) {
 	return /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(View, {
+		...props.triggerProps ?? {},
+		ref: triggerRef,
+		enableGestures: !props.disabled,
+		onTouch: toggleOpen,
+		children: props.trigger
+	}), isOpen && /* @__PURE__ */ jsxs(Portal, {
+		depth,
+		blockEvents: false,
+		children: [closeOnOutside && /* @__PURE__ */ jsx(View, {
+			width: viewport.width,
+			height: viewport.height,
+			backgroundColor: 0,
+			backgroundAlpha: 0,
+			onTouch: close,
+			onTouchMove: (event) => event.stopPropagation()
+		}), /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(View, {
+						flex: 1,
+						children: /* @__PURE__ */ jsx(Text, {
+							text: item.label,
+							style: {
+								...themed.textStyle ?? {},
+								color: textColor
+							}
+						})
+					}),
+					item.suffix
+				]
+			}, item.id);
+		})
+	});
+}
+//#endregion
+//#region src/components/custom/ProgressBar.tsx
+/** @jsxImportSource ../.. */
+/**
+* ProgressBar component - determinate progress indicator for health, loading, cooldowns, and XP.
+*/
+function clampProgressValue(value, min, max) {
+	if (!Number.isFinite(value)) return min;
+	return Math.min(Math.max(value, min), max);
+}
+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__ */ jsx(Text, {
+		text,
+		style: labelStyle
+	}) : null;
+	const fillProps = orientation === "horizontal" ? {
+		width: `${percent}%`,
+		height: "fill"
+	} : {
+		width: "fill",
+		height: `${percent}%`
+	};
+	const track = /* @__PURE__ */ 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__ */ jsx(View, {
+			...fillProps,
+			backgroundColor: fillColor,
+			cornerRadius
+		}), labelPosition === "inside" && shouldShowText && /* @__PURE__ */ jsx(View, {
+			width: "fill",
+			height: "fill",
+			justifyContent: "center",
+			alignItems: "center",
+			children: labelNode
+		})]
+	});
+	return /* @__PURE__ */ 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
 /**
 * Built-in component implementations
@@ -23978,7 +25330,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", {
@@ -24051,7 +25402,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
 */
@@ -25113,132 +26464,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 ../.. */
 /**
@@ -27996,7 +29221,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,
@@ -29087,7 +30312,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,
@@ -29254,6 +30478,6 @@ function TransformOriginView({ originX = .5, originY = .5, width, height, x = 0,
 	});
 }
 //#endregion
-export { RadioButton as $, textCreator as $n, shouldComponentUpdate as $t, computed as A, midnightPreset as An, createTheme as At, DOMInputElement as B, hexToNumber as Bn, remountAll as Bt, CharText as C, defaultTextStyleTokens as Cn, graphicsCreator as Cr, createWiggleEffect as Ct, Modal as D, generateColorScale as Dn, register as Dr, useGameObjectEffect as Dt, Dialog as E, forestGreenPreset as En, nodeRegistry as Er, createZoomOutEffect as Et, SpringPhysics as F, darken as Fn, getMountStats as Ft, useSVGTextures as G, rgbToHsl as Gn, disposeCtx as Gt, releaseSVGTexture as H, lightenHex as Hn, unmountJSX as Ht, animatedSignal as I, darkenHex as In, mount as It, Particles as J, normalizeCornerRadius as Jn, getLayoutProps as Jt, svgToTexture as K, rgbToNumber as Kn, getBackgroundGraphics as Kt, isAnimatedSignal as L, ensureContrast as Ln, mountJSX as Lt, useSprings as M, presets as Mn, mergeThemes as Mt, DEFAULT_SPRING_CONFIG as N, alpha as Nn, themeRegistry as Nt, Portal as O, getPreset as On, viewCreator as Ot, SPRING_PRESETS as P, createTextStyle as Pn, createElement as Pt, RadioGroup as Q, tileSpritePatcher as Qn, shallowEqual as Qt, unwrapSignal as R, getContrastRatio as Rn, normalizeVNodeLike as Rt, CharTextInput as S, defaultSpacingTokens as Sn, imagePatcher as Sr, createTadaEffect as St, WrapText as T, applyLightMode as Tn, host as Tr, createZoomInEffect as Tt, releaseSVGTextures as U, numberToHex as Un, portalRegistry as Ut, releaseAllSVGTextures as V, lighten as Vn, unmount as Vt, useSVGTexture as W, numberToRgb as Wn, View as Wt, Text as X, normalizeGap as Xn, getLayoutSize as Xt, TileSprite as Y, normalizeEdgeInsets as Yn, getLayoutRect as Yt, Sprite as Z, tileSpriteCreator as Zn, getWorldLayoutRect as Zt, Dropdown as _, createDefaultTheme as _n, buildEmitZone as _r, createShakeEffect as _t, Tabs as a, useLayoutRect as an, spriteCreator as ar, resolveEffect as at, calculateSliderSize as b, defaultRadiusTokens as bn, nineSlicePatcher as br, createSpinEffect as bt, Sidebar as c, useRedraw as cn, particlesPatcher as cr, createFadeEffect as ct, NineSlice as d, useState as dn, applyEmitterConfig as dr, createFlipOutEffect as dt, useBackgroundGraphics as en, textPatcher as er, Graphics as et, Joystick as f, useTheme as fn, getFirstEmitter as fr, createFloatEffect as ft, Image$1 as g, getRenderContext as gn, buildDeathZonesFromLayout as gr, createPulseEffect as gt, useIconPreload as h, withHooks as hn, resolveParticlePreset as hr, createPressEffect as ht, TabPanel as i, useLayoutEffect as in, DevPresets as ir, applyEffectByName as it, useSpring as j, oceanBluePreset as jn, getThemedProps as jt, Accordion as k, getPresetWithMode as kn, viewPatcher as kt, RefOriginView as l, useRef as ln, applyDeathZone as lr, createFlashEffect as lt, createIconComponent as m, useWorldLayoutRect as mn, PARTICLE_PRESET_REGISTRY as mr, createNoneEffect as mt, Toggle as n, useEffect as nn, DebugLogger as nr, DEFAULT_EFFECT as nt, RangeSlider as o, useLayoutSize as on, spritePatcher as or, createBounceEffect as ot, Icon as p, useViewportSize as pn, isParticleEmitter as pr, createJelloEffect as pt, registerBuiltins as q, HexColor as qn, getCurrent as qt, Tab as r, useForceRedraw as rn, DevConfig as rr, EFFECT_REGISTRY as rt, Slider as s, useMemo as sn, particlesCreator as sr, createBreatheEffect as st, TransformOriginView as t, useCallback as tn, viewportRegistry as tr, Button as tt, NineSliceButton as u, useScene as un, applyEmitZone as ur, createFlipInEffect as ut, ScrollView as v, defaultTheme as vn, buildEmitZoneFromLayout as vr, createSlideInEffect as vt, AlertDialog as w, applyDarkMode as wn, graphicsPatcher as wr, createWobbleEffect as wt, Divider as x, defaultSizeTokens as xn, imageCreator as xr, createSwingEffect as xt, ScrollSlider as y, createTextStyleTokens as yn, nineSliceCreator as yr, createSlideOutEffect as yt, KeyboardInputManager as z, hex as zn, patchVNode as zt };
+export { Portal as $, getContrastRatio as $n, normalizeVNodeLike as $t, useSpring as A, withHooks as An, resolveParticlePreset as Ar, createSwingEffect as At, releaseAllSVGTextures as B, applyLightMode as Bn, host as Br, getBadgeSizeConfig as Bt, CharText as C, useRedraw as Cn, particlesPatcher as Cr, createNoneEffect as Ct, Modal as D, useTheme as Dn, getFirstEmitter as Dr, createSlideInEffect as Dt, Dialog as E, useState as En, applyEmitterConfig as Er, createShakeEffect as Et, animatedSignal as F, defaultRadiusTokens as Fn, nineSlicePatcher as Fr, createZoomOutEffect as Ft, svgToTexture as G, midnightPreset as Gn, createTheme as Gt, releaseSVGTextures as H, generateColorScale as Hn, register as Hr, resolveBadgeTextStyle as Ht, isAnimatedSignal as I, defaultSizeTokens as In, imageCreator as Ir, useGameObjectEffect as It, clampProgressValue as J, alpha as Jn, themeRegistry as Jt, registerBuiltins as K, oceanBluePreset as Kn, getThemedProps as Kt, unwrapSignal as L, defaultSpacingTokens as Ln, imagePatcher as Lr, Badge as Lt, DEFAULT_SPRING_CONFIG as M, createDefaultTheme as Mn, buildEmitZone as Mr, createWiggleEffect as Mt, SPRING_PRESETS as N, defaultTheme as Nn, buildEmitZoneFromLayout as Nr, createWobbleEffect as Nt, Accordion as O, useViewportSize as On, isParticleEmitter as Or, createSlideOutEffect as Ot, SpringPhysics as P, createTextStyleTokens as Pn, nineSliceCreator as Pr, createZoomInEffect as Pt, calculateOverlayPosition as Q, ensureContrast as Qn, mountJSX as Qt, KeyboardInputManager as R, defaultTextStyleTokens as Rn, graphicsCreator as Rr, Tag as Rt, CharTextInput as S, useMemo as Sn, particlesCreator as Sr, createJelloEffect as St, WrapText as T, useScene as Tn, applyEmitZone as Tr, createPulseEffect as Tt, useSVGTexture as U, getPreset as Un, viewCreator as Ut, releaseSVGTexture as V, forestGreenPreset as Vn, nodeRegistry as Vr, getBadgeText as Vt, useSVGTextures as W, getPresetWithMode as Wn, viewPatcher as Wt, ContextMenu as X, darken as Xn, getMountStats as Xt, getProgressRatio as Y, createTextStyle as Yn, createElement as Yt, Popover as Z, darkenHex as Zn, mount as Zt, Dropdown as _, useEffect as _n, DebugLogger as _r, createFadeEffect as _t, Tabs as a, View as an, numberToRgb as ar, RadioButton as at, calculateSliderSize as b, useLayoutRect as bn, spriteCreator as br, createFlipOutEffect as bt, Sidebar as c, getCurrent as cn, HexColor as cr, useThemeTokens as ct, NineSlice as d, getLayoutSize$1 as dn, normalizeGap as dr, DEFAULT_EFFECT as dt, patchVNode as en, hex as er, Particles as et, Joystick as f, getWorldLayoutRect as fn, tileSpriteCreator as fr, EFFECT_REGISTRY as ft, Image$1 as g, useCallback as gn, viewportRegistry as gr, createBreatheEffect as gt, useIconPreload as h, useBackgroundGraphics as hn, textPatcher as hr, createBounceEffect as ht, TabPanel as i, portalRegistry as in, numberToHex as ir, RadioGroup as it, useSprings as j, getRenderContext as jn, buildDeathZonesFromLayout as jr, createTadaEffect as jt, computed as k, useWorldLayoutRect as kn, PARTICLE_PRESET_REGISTRY as kr, createSpinEffect as kt, RefOriginView as l, getLayoutProps as ln, normalizeCornerRadius as lr, Checkbox as lt, createIconComponent as m, shouldComponentUpdate as mn, textCreator as mr, resolveEffect as mt, Toggle as n, unmount as nn, lighten as nr, Text as nt, RangeSlider as o, disposeCtx as on, rgbToHsl as or, Graphics as ot, Icon as p, shallowEqual as pn, tileSpritePatcher as pr, applyEffectByName as pt, ProgressBar as q, presets as qn, mergeThemes as qt, Tab as r, unmountJSX as rn, lightenHex as rr, Sprite as rt, Slider as s, getBackgroundGraphics as sn, rgbToNumber as sr, DebugPanel as st, TransformOriginView as t, remountAll as tn, hexToNumber as tr, TileSprite as tt, NineSliceButton as u, getLayoutRect as un, normalizeEdgeInsets as ur, Button as ut, ScrollView as v, useForceRedraw as vn, DevConfig as vr, createFlashEffect as vt, AlertDialog as w, useRef as wn, applyDeathZone as wr, createPressEffect as wt, Divider as x, useLayoutSize as xn, spritePatcher as xr, createFloatEffect as xt, ScrollSlider as y, useLayoutEffect as yn, DevPresets as yr, createFlipInEffect as yt, DOMInputElement as z, applyDarkMode as zn, graphicsPatcher as zr, formatBadgeCount as zt };
 
-//# sourceMappingURL=custom-C_w8D39m.js.map
+//# sourceMappingURL=custom-DMZASXll.js.map