@number10/phaserjsx 4.3.0 → 4.4.0

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

@@ -16761,6 +16761,23 @@ function hasRenderableBackground(props) {
 	const hasBorder = (props.borderWidth ?? 0) > 0 && props.borderColor !== void 0;
 	return hasBackground || hasBorder;
 }
+function hasRoundedCorners(radius) {
+	if (typeof radius === "number") return radius !== 0;
+	return (radius.tl ?? 0) !== 0 || (radius.tr ?? 0) !== 0 || (radius.bl ?? 0) !== 0 || (radius.br ?? 0) !== 0;
+}
+function insetCornerRadius(radius, inset) {
+	const insetSingleRadius = (value) => {
+		const resolved = value ?? 0;
+		return (resolved < 0 ? -1 : 1) * Math.max(0, Math.abs(resolved) - inset);
+	};
+	if (typeof radius === "number") return insetSingleRadius(radius);
+	return {
+		tl: insetSingleRadius(radius.tl),
+		tr: insetSingleRadius(radius.tr),
+		bl: insetSingleRadius(radius.bl),
+		br: insetSingleRadius(radius.br)
+	};
+}
 function drawBackground(graphics, props, width, height) {
 	const bgColor = props.backgroundColor;
 	const bgAlpha = props.backgroundAlpha ?? 1;
@@ -16769,14 +16786,21 @@ function drawBackground(graphics, props, width, height) {
 	const borderWidth = props.borderWidth ?? 0;
 	const borderAlpha = props.borderAlpha ?? 1;
 	const hasBorder = borderWidth > 0 && borderColor !== void 0;
+	const rounded = hasRoundedCorners(cornerRadius);
 	if (bgColor !== void 0) graphics.fillStyle(bgColor, bgAlpha);
 	if (hasBorder) graphics.lineStyle(borderWidth, borderColor, borderAlpha);
-	if (cornerRadius !== 0) {
+	if (rounded) {
 		if (bgColor !== void 0) graphics.fillRoundedRect(0, 0, width, height, cornerRadius);
-		if (hasBorder) graphics.strokeRoundedRect(0, 0, width, height, cornerRadius);
+		if (hasBorder) {
+			const inset = borderWidth / 2;
+			graphics.strokeRoundedRect(inset, inset, Math.max(0, width - borderWidth), Math.max(0, height - borderWidth), insetCornerRadius(cornerRadius, inset));
+		}
 	} else {
 		if (bgColor !== void 0) graphics.fillRect(0, 0, width, height);
-		if (hasBorder) graphics.strokeRect(0, 0, width, height);
+		if (hasBorder) {
+			const inset = borderWidth / 2;
+			graphics.strokeRect(inset, inset, Math.max(0, width - borderWidth), Math.max(0, height - borderWidth));
+		}
 	}
 }
 function getSceneBackgroundTextureCache(scene) {
@@ -18288,6 +18312,12 @@ function getMargin(child) {
 	};
 	return margin ?? {};
 }
+function getHorizontalMargin$1(margin) {
+	return (margin.left ?? 0) + (margin.right ?? 0);
+}
+function getVerticalMargin$1(margin) {
+	return (margin.top ?? 0) + (margin.bottom ?? 0);
+}
 /**
 * Get effective size of a child
 * Calls __getLayoutSize if available, otherwise falls back to layoutProps or default
@@ -18301,8 +18331,13 @@ function getChildSize(child, parentSize, parentPadding) {
 	if (child.__layoutProps && (child.__layoutProps.width !== void 0 || child.__layoutProps.height !== void 0)) {
 		const layoutWidth = child.__layoutProps.width;
 		const layoutHeight = child.__layoutProps.height;
-		let width = resolveSize(parseSize(layoutWidth), parentSize?.width, child.width ?? 100, parentPadding?.horizontal);
-		let height = resolveSize(parseSize(layoutHeight), parentSize?.height, child.height ?? 20, parentPadding?.vertical);
+		const margin = getMargin(child);
+		const parsedWidth = parseSize(layoutWidth);
+		let width = resolveSize(parsedWidth, parentSize?.width, child.width ?? 100, parentPadding?.horizontal);
+		if (parsedWidth.type === "fill") width = Math.max(0, width - getHorizontalMargin$1(margin));
+		const parsedHeight = parseSize(layoutHeight);
+		let height = resolveSize(parsedHeight, parentSize?.height, child.height ?? 20, parentPadding?.vertical);
+		if (parsedHeight.type === "fill") height = Math.max(0, height - getVerticalMargin$1(margin));
 		const { minWidth, maxWidth, minHeight, maxHeight } = child.__layoutProps;
 		width = clampSize(width, minWidth, maxWidth, parentSize?.width, child.width, parentPadding?.horizontal);
 		height = clampSize(height, minHeight, maxHeight, parentSize?.height, child.height, parentPadding?.vertical);
@@ -18350,6 +18385,21 @@ function processNestedContainer(child, calculateLayoutFn, parentSize, parentPadd
 }
 //#endregion
 //#region src/layout/utils/dimension-calculator.ts
+function normalizeMargin(margin) {
+	if (typeof margin === "number") return {
+		left: margin,
+		top: margin,
+		right: margin,
+		bottom: margin
+	};
+	return margin ?? {};
+}
+function getHorizontalMargin(margin) {
+	return (margin.left ?? 0) + (margin.right ?? 0);
+}
+function getVerticalMargin(margin) {
+	return (margin.top ?? 0) + (margin.bottom ?? 0);
+}
 /**
 * Calculate final container dimensions
 * @param props - Layout properties
@@ -18370,8 +18420,13 @@ function calculateContainerSize(props, metrics, padding, direction, gap, childCo
 	}
 	const contentWidth = direction === "row" ? totalMainSizeWithGaps + padding.left + padding.right : metrics.maxWidth + padding.left + padding.right;
 	const contentHeight = direction === "row" ? metrics.maxHeight + padding.top + padding.bottom : totalMainSizeWithGaps + padding.top + padding.bottom;
-	let width = resolveSize(parseSize(props.width), parentSize?.width, contentWidth, parentPadding?.horizontal);
-	let height = resolveSize(parseSize(props.height), parentSize?.height, contentHeight, parentPadding?.vertical);
+	const parsedWidth = parseSize(props.width);
+	let width = resolveSize(parsedWidth, parentSize?.width, contentWidth, parentPadding?.horizontal);
+	const margin = normalizeMargin(props.margin);
+	if (parsedWidth.type === "fill") width = Math.max(0, width - getHorizontalMargin(margin));
+	const parsedHeight = parseSize(props.height);
+	let height = resolveSize(parsedHeight, parentSize?.height, contentHeight, parentPadding?.vertical);
+	if (parsedHeight.type === "fill") height = Math.max(0, height - getVerticalMargin(margin));
 	width = clampSize(width, props.minWidth, props.maxWidth, parentSize?.width, contentWidth, void 0);
 	height = clampSize(height, props.minHeight, props.maxHeight, parentSize?.height, contentHeight, void 0);
 	return {
@@ -19986,10 +20041,13 @@ function buildDefaultTheme(colors) {
 		},
 		RadioButton: {
 			selectedColor: colors.primary.DEFAULT.toNumber(),
-			color: colors.border.medium.toNumber(),
-			gap: 10,
-			size: 16,
-			innerSize: 16,
+			color: colors.border.dark.toNumber(),
+			borderWidth: 2,
+			gap: 8,
+			size: 18,
+			innerSize: 8,
+			disabledAlpha: .5,
+			labelPosition: "right",
 			labelStyle: {
 				color: colors.text.DEFAULT.toString(),
 				fontSize: "14px"
@@ -20014,7 +20072,7 @@ function buildDefaultTheme(colors) {
 			size: "medium",
 			maxCount: 99,
 			disabledAlpha: .5,
-			textStyle: { fontStyle: "bold" }
+			textStyle: { fontFamily: "Arial" }
 		},
 		Tag: {
 			tone: "neutral",
@@ -20022,7 +20080,7 @@ function buildDefaultTheme(colors) {
 			size: "medium",
 			closeSize: 16,
 			disabledAlpha: .5,
-			textStyle: { fontStyle: "bold" }
+			textStyle: { fontFamily: "Arial" }
 		},
 		Popover: {
 			placement: "bottom",
@@ -20031,6 +20089,8 @@ function buildDefaultTheme(colors) {
 			closeOnOutside: true,
 			closeOnEscape: true,
 			viewportPadding: 8,
+			openDuration: 120,
+			closeDuration: 100,
 			backgroundColor: colors.surface.dark.toNumber(),
 			borderColor: colors.border.medium.toNumber(),
 			borderWidth: 1,
@@ -20081,65 +20141,226 @@ function buildDefaultTheme(colors) {
 			}
 		},
 		ScrollSlider: {
-			borderColor: colors.border.dark.toNumber(),
+			borderColor: colors.border.medium.toNumber(),
 			trackColor: colors.surface.dark.toNumber(),
-			thumbColor: colors.primary.dark.toNumber(),
-			borderWidth: 2,
+			trackCornerRadius: 0,
+			thumbColor: colors.primary.DEFAULT.toNumber(),
+			thumbActiveColor: colors.primary.dark.toNumber(),
+			thumbBorderColor: colors.primary.light.toNumber(),
+			thumbBorderWidth: 1,
+			thumbCornerRadius: 0,
+			borderWidth: 1,
+			cornerRadius: 0,
 			minThumbSize: 30,
 			size: 24
 		},
 		Button: {
-			disabledColor: colors.background.DEFAULT.toNumber(),
-			iconSize: 24,
-			backgroundColor: colors.primary.DEFAULT.toNumber(),
+			variant: "primary",
+			size: "medium",
+			disabledColor: colors.surface.medium.toNumber(),
+			disabledAlpha: .48,
+			iconSize: 18,
+			minWidth: 92,
+			height: 40,
+			backgroundColor: colors.primary.medium.toNumber(),
 			backgroundAlpha: 1,
 			borderColor: colors.primary.dark.toNumber(),
 			borderWidth: 1,
-			cornerRadius: 6,
-			padding: 8,
+			cornerRadius: 8,
+			padding: {
+				top: 8,
+				bottom: 8,
+				left: 16,
+				right: 16
+			},
 			gap: 8,
 			justifyContent: "center",
 			alignItems: "center",
+			effect: "press",
+			effectConfig: {
+				intensity: .94,
+				time: 140
+			},
+			textStyle: {
+				...textStyles.medium,
+				color: "#ffffff",
+				fontStyle: "bold"
+			},
+			Text: { style: {
+				...textStyles.medium,
+				color: "#ffffff",
+				fontStyle: "bold"
+			} },
+			Icon: {
+				size: 18,
+				tint: 16777215
+			},
 			primary: {
 				backgroundColor: colors.primary.medium.toNumber(),
-				borderColor: colors.primary.dark.toNumber()
+				borderColor: colors.primary.dark.toNumber(),
+				textStyle: {
+					color: "#ffffff",
+					fontStyle: "bold"
+				},
+				Icon: { tint: 16777215 }
 			},
 			secondary: {
-				backgroundColor: colors.secondary.DEFAULT.toNumber(),
-				borderColor: colors.secondary.dark.toNumber(),
-				effect: "press",
-				effectConfig: {
-					intensity: .9,
-					time: 200
-				}
+				backgroundColor: colors.surface.lightest.toNumber(),
+				backgroundAlpha: .92,
+				borderColor: colors.border.light.toNumber(),
+				borderWidth: 1,
+				textStyle: {
+					color: colors.text.dark.toString(),
+					fontStyle: "bold"
+				},
+				Icon: { tint: colors.text.dark.toNumber() }
 			},
 			outline: {
-				backgroundColor: 0,
-				backgroundAlpha: 0,
-				borderColor: colors.accent.DEFAULT.toNumber(),
+				backgroundColor: colors.primary.dark.toNumber(),
+				backgroundAlpha: .08,
+				borderColor: colors.primary.light.toNumber(),
 				borderWidth: 2,
-				effect: "flash",
-				effectConfig: {
-					intensity: 1.15,
-					time: 200
+				textStyle: {
+					color: colors.primary.light.toString(),
+					fontStyle: "bold"
+				},
+				Icon: { tint: colors.primary.light.toNumber() }
+			},
+			ghost: {
+				backgroundColor: colors.surface.light.toNumber(),
+				backgroundAlpha: .18,
+				borderColor: colors.border.medium.toNumber(),
+				borderAlpha: .35,
+				borderWidth: 1,
+				textStyle: {
+					color: colors.text.light.toString(),
+					fontStyle: "bold"
+				},
+				Icon: { tint: colors.text.light.toNumber() }
+			},
+			danger: {
+				backgroundColor: colors.error.medium.toNumber(),
+				borderColor: colors.error.dark.toNumber(),
+				textStyle: {
+					color: "#ffffff",
+					fontStyle: "bold"
+				},
+				Icon: { tint: 16777215 }
+			},
+			variants: {
+				primary: {
+					backgroundColor: colors.primary.medium.toNumber(),
+					borderColor: colors.primary.dark.toNumber()
+				},
+				secondary: {
+					backgroundColor: colors.surface.lightest.toNumber(),
+					backgroundAlpha: .92,
+					borderColor: colors.border.light.toNumber(),
+					borderWidth: 1
+				},
+				outline: {
+					backgroundColor: colors.primary.dark.toNumber(),
+					backgroundAlpha: .08,
+					borderColor: colors.primary.light.toNumber(),
+					borderWidth: 2
+				},
+				ghost: {
+					backgroundColor: colors.surface.light.toNumber(),
+					backgroundAlpha: .18,
+					borderColor: colors.border.medium.toNumber(),
+					borderAlpha: .35,
+					borderWidth: 1
+				},
+				danger: {
+					backgroundColor: colors.error.medium.toNumber(),
+					borderColor: colors.error.dark.toNumber()
 				}
 			},
 			small: {
-				padding: 6,
-				cornerRadius: 4
+				minWidth: 72,
+				height: 32,
+				padding: {
+					top: 6,
+					bottom: 6,
+					left: 12,
+					right: 12
+				},
+				cornerRadius: 7,
+				gap: 6,
+				iconSize: 15,
+				textStyle: { fontSize: "12px" },
+				Icon: { size: 15 }
 			},
 			medium: {
-				padding: 8,
-				cornerRadius: 6
+				minWidth: 92,
+				height: 40,
+				padding: {
+					top: 8,
+					bottom: 8,
+					left: 16,
+					right: 16
+				},
+				cornerRadius: 8,
+				gap: 8,
+				iconSize: 18,
+				Icon: { size: 18 }
 			},
 			large: {
+				minWidth: 116,
+				height: 48,
 				padding: {
-					top: 12,
-					bottom: 12,
-					left: 8,
-					right: 8
+					top: 10,
+					bottom: 10,
+					left: 20,
+					right: 20
 				},
-				cornerRadius: 8
+				cornerRadius: 10,
+				gap: 10,
+				iconSize: 22,
+				textStyle: { fontSize: "18px" },
+				Icon: { size: 22 }
+			},
+			sizes: {
+				small: {
+					minWidth: 72,
+					height: 32,
+					padding: {
+						top: 6,
+						bottom: 6,
+						left: 12,
+						right: 12
+					},
+					cornerRadius: 7,
+					gap: 6,
+					iconSize: 15
+				},
+				medium: {
+					minWidth: 92,
+					height: 40,
+					padding: {
+						top: 8,
+						bottom: 8,
+						left: 16,
+						right: 16
+					},
+					cornerRadius: 8,
+					gap: 8,
+					iconSize: 18
+				},
+				large: {
+					minWidth: 116,
+					height: 48,
+					padding: {
+						top: 10,
+						bottom: 10,
+						left: 20,
+						right: 20
+					},
+					cornerRadius: 10,
+					gap: 10,
+					iconSize: 22,
+					textStyle: { fontSize: "18px" }
+				}
 			}
 		},
 		Sidebar: {
@@ -20371,64 +20592,110 @@ function buildDefaultTheme(colors) {
 			lineHeight: 1.2,
 			wordWrap: false,
 			disabledColor: colors.border.dark.toNumber(),
-			focusedBorderColor: colors.accent.lightest.toNumber(),
-			backgroundColor: colors.surface.medium.toNumber(),
+			disabledBackgroundColor: colors.surface.medium.toNumber(),
+			disabledBorderColor: colors.border.light.toNumber(),
+			disabledAlpha: .6,
+			focusedBorderColor: colors.primary.DEFAULT.toNumber(),
+			backgroundColor: colors.surface.lightest.toNumber(),
 			borderColor: colors.border.medium.toNumber(),
 			borderWidth: 1,
-			padding: 8,
-			textStyle: textStyles.DEFAULT
+			cornerRadius: 7,
+			padding: {
+				left: 10,
+				right: 10,
+				top: 8,
+				bottom: 8
+			},
+			textStyle: {
+				...textStyles.DEFAULT,
+				color: colors.text.dark.toString()
+			},
+			placeholderStyle: {
+				...textStyles.DEFAULT,
+				color: colors.text.light.toString()
+			}
 		},
 		Dropdown: {
 			trigger: {
-				backgroundColor: colors.surface.medium.toNumber(),
+				backgroundColor: colors.surface.light.toNumber(),
 				borderColor: colors.border.medium.toNumber(),
 				borderWidth: 1,
-				cornerRadius: 4,
+				cornerRadius: 7,
 				padding: {
 					left: 12,
-					right: 12,
-					top: 8,
-					bottom: 8
+					right: 10,
+					top: 9,
+					bottom: 9
 				},
-				width: "fill"
+				width: "fill",
+				gap: 8
 			},
 			triggerHover: { borderColor: colors.primary.DEFAULT.toNumber() },
 			triggerOpen: {
 				borderColor: colors.primary.DEFAULT.toNumber(),
-				backgroundColor: colors.surface.dark.toNumber()
+				borderWidth: 2,
+				backgroundColor: colors.surface.lightest.toNumber()
 			},
 			triggerDisabled: {
 				backgroundColor: colors.surface.light.toNumber(),
 				alpha: .5
 			},
 			arrow: {
-				color: colors.text.DEFAULT.toNumber(),
-				size: 12
+				color: colors.text.dark.toNumber(),
+				size: 12,
+				strokeWidth: 2
+			},
+			selectionIndicator: {
+				color: colors.primary.dark.toNumber(),
+				size: 16,
+				strokeWidth: 2
 			},
 			overlay: {
-				backgroundColor: colors.surface.medium.toNumber(),
+				backgroundColor: colors.surface.lightest.toNumber(),
 				borderColor: colors.border.medium.toNumber(),
 				borderWidth: 1,
-				cornerRadius: 4,
+				cornerRadius: 7,
 				maxHeight: 300,
-				padding: 4
+				padding: 6
+			},
+			option: {
+				padding: {
+					left: 10,
+					right: 10,
+					top: 8,
+					bottom: 8
+				},
+				cornerRadius: 5,
+				gap: 8
 			},
-			option: { padding: {
-				left: 12,
-				right: 12,
-				top: 8,
-				bottom: 8
-			} },
 			optionSelected: {
-				backgroundColor: colors.primary.light.toNumber(),
-				Text: { style: textStyles.DEFAULT }
+				backgroundColor: colors.primary.lightest.toNumber(),
+				borderColor: colors.primary.light.toNumber(),
+				borderWidth: 1,
+				backgroundAlpha: .9,
+				Text: { style: {
+					...textStyles.DEFAULT,
+					color: colors.text.dark.toString(),
+					fontStyle: "bold"
+				} }
 			},
 			optionDisabled: { alpha: .3 },
 			textStyle: textStyles.DEFAULT,
-			placeholderStyle: textStyles.DEFAULT,
+			placeholderStyle: {
+				...textStyles.DEFAULT,
+				color: colors.text.light.toString()
+			},
 			filterInput: {
 				backgroundColor: colors.surface.lightest.toNumber(),
-				borderColor: colors.border.medium.toNumber()
+				borderColor: colors.border.medium.toNumber(),
+				borderWidth: 1,
+				cornerRadius: 6,
+				padding: {
+					left: 10,
+					right: 10,
+					top: 6,
+					bottom: 6
+				}
 			},
 			animationConfig: "stiff",
 			optionGap: 2
@@ -20479,9 +20746,15 @@ function buildDefaultTheme(colors) {
 			height: 28,
 			thumbSize: 24,
 			trackColorOff: colors.surface.dark.toNumber(),
-			trackColorOn: colors.success.DEFAULT.toNumber(),
+			trackColorOn: colors.primary.DEFAULT.toNumber(),
+			trackBorderColorOff: colors.border.medium.toNumber(),
+			trackBorderColorOn: colors.primary.dark.toNumber(),
+			trackBorderWidth: 1,
 			thumbColor: colors.surface.lightest.toNumber(),
+			thumbBorderColor: colors.border.light.toNumber(),
+			thumbBorderWidth: 1,
 			disabledColor: colors.border.medium.toNumber(),
+			disabledAlpha: .5,
 			padding: 2,
 			duration: 200,
 			gap: 8,
@@ -22073,13 +22346,16 @@ function patchVNode(parent, oldV, newV) {
 			}
 			if (newV.props !== void 0) ctx.componentVNode.props = newV.props;
 			if (newV.children !== void 0) ctx.componentVNode.children = newV.children;
+			const previousTheme = ctx.theme;
 			if (newV.__theme !== void 0) ctx.theme = newV.__theme;
 			const newVWithCtx = setVNodePropSafe(newV, "__ctx", ctx);
 			const propsWithChildren = ctx.componentVNode.children?.length ? {
 				...ctx.componentVNode.props ?? {},
 				children: ctx.componentVNode.children
 			} : ctx.componentVNode.props;
-			if (!shouldComponentUpdate(ctx, propsWithChildren)) return;
+			const themeChanged = !Object.is(previousTheme, ctx.theme);
+			const propsChanged = shouldComponentUpdate(ctx, propsWithChildren);
+			if (!themeChanged && !propsChanged) return;
 			const renderedNext = normalizeVNodeLike(withHooks(ctx, () => newVWithCtx.type(propsWithChildren)));
 			if (!renderedNext) {
 				ctx.vnode = renderedNext;
@@ -22384,6 +22660,7 @@ var ThemeRegistry = class {
 				...styles
 			});
 		}
+		this.notifyListeners();
 	}
 	/**
 	* Set the entire global theme (replaces current theme)
@@ -22577,12 +22854,21 @@ function deepMergeDefined(base, override) {
 function extractNestedThemes(theme) {
 	const ownProps = { ...theme };
 	const nestedThemes = {};
+	const internalPrimitiveNames = new Set([
+		"view",
+		"text",
+		"nineslice",
+		"sprite",
+		"image",
+		"graphics",
+		"tilesprite",
+		"particles"
+	]);
 	const allComponentNames = new Set([
-		"View",
-		"Text",
-		"NineSlice",
+		...Object.keys(defaultTheme),
+		...Object.keys(themeRegistry.getGlobalTheme()),
 		...Array.from(themeRegistry.getCustomComponentNames())
-	]);
+	].filter((key) => key !== "__colorPreset" && !internalPrimitiveNames.has(key)));
 	for (const key in ownProps) if (allComponentNames.has(key)) {
 		nestedThemes[key] = ownProps[key];
 		delete ownProps[key];
@@ -23085,41 +23371,41 @@ var DEFAULT_TONES = {
 };
 var DEFAULT_SIZES = {
 	small: {
-		height: 20,
+		height: 22,
 		padding: {
-			left: 7,
-			right: 7,
-			top: 2,
-			bottom: 2
+			left: 8,
+			right: 8,
+			top: 3,
+			bottom: 3
 		},
-		fontSize: 11,
-		cornerRadius: 10,
+		fontSize: 12,
+		cornerRadius: 11,
 		gap: 5,
 		dotSize: 8
 	},
 	medium: {
-		height: 24,
+		height: 26,
 		padding: {
-			left: 9,
-			right: 9,
-			top: 3,
-			bottom: 3
+			left: 10,
+			right: 10,
+			top: 4,
+			bottom: 4
 		},
-		fontSize: 13,
-		cornerRadius: 12,
+		fontSize: 14,
+		cornerRadius: 13,
 		gap: 6,
 		dotSize: 10
 	},
 	large: {
-		height: 30,
+		height: 32,
 		padding: {
-			left: 12,
-			right: 12,
-			top: 4,
-			bottom: 4
+			left: 13,
+			right: 13,
+			top: 5,
+			bottom: 5
 		},
 		fontSize: 18,
-		cornerRadius: 15,
+		cornerRadius: 16,
 		gap: 8,
 		dotSize: 12
 	}
@@ -23173,7 +23459,8 @@ function resolveBadgeTextStyle(options) {
 }
 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 localTheme = useTheme();
+	const { props: themed, nestedTheme } = getThemedProps("Badge", theme ? mergeThemes(localTheme ?? {}, theme) : localTheme, {});
 	const tone = explicitTone ?? themed.tone ?? "neutral";
 	const variant = explicitVariant ?? themed.variant ?? "solid";
 	const size = explicitSize ?? themed.size ?? "medium";
@@ -23229,13 +23516,16 @@ function Badge(props) {
 }
 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 localTheme = useTheme();
+	const { props: themed, nestedTheme } = getThemedProps("Tag", theme ? mergeThemes(localTheme ?? {}, theme) : localTheme, {});
 	const resolvedTone = tone ?? themed.tone ?? (selected ? "primary" : "neutral");
 	const resolvedVariant = variant ?? themed.variant ?? (selected ? "solid" : "soft");
 	const resolvedSize = size ?? themed.size ?? "medium";
+	const colors = resolveBadgeColors(resolvedTone, resolvedVariant);
+	const closeSize = themed.closeSize ?? 16;
 	const resolvedTextStyle = resolveBadgeTextStyle({
 		size: resolvedSize,
-		textColor: resolveBadgeColors(resolvedTone, resolvedVariant).textColor,
+		textColor: colors.textColor,
 		themedTextStyle: themed.textStyle,
 		explicitTextStyle: textStyle
 	});
@@ -23254,16 +23544,15 @@ function Tag(props) {
 			}),
 			children,
 			onRemove && /* @__PURE__ */ jsx(Button, {
-				width: themed.closeSize ?? 16,
-				height: themed.closeSize ?? 16,
+				width: closeSize,
+				height: closeSize,
+				minWidth: closeSize,
 				padding: 0,
-				cornerRadius: (themed.closeSize ?? 16) / 2,
+				cornerRadius: closeSize / 2,
 				onClick: onRemove,
 				theme: nestedTheme,
-				children: /* @__PURE__ */ jsx(Text, {
-					text: closeLabel,
-					style: resolvedTextStyle
-				})
+				label: closeLabel,
+				textStyle: resolvedTextStyle
 			})
 		]
 	});
@@ -24186,6 +24475,37 @@ function resolveEffect(props, theme) {
 }
 //#endregion
 //#region src/components/custom/Button.tsx
+function mergeButtonTheme(base, override) {
+	return override ? {
+		...base,
+		...override
+	} : base;
+}
+function resolveButtonSlotTheme(theme, group, name) {
+	if (!name) return void 0;
+	return {
+		...theme[group]?.[name] ?? {},
+		...theme[name] ?? {}
+	};
+}
+function buildButtonContentTheme(theme) {
+	const textTheme = theme.Text ?? {};
+	const iconTheme = theme.Icon ?? {};
+	const mergedTextStyle = theme.textStyle || textTheme.style ? {
+		...textTheme.style ?? {},
+		...theme.textStyle ?? {}
+	} : void 0;
+	return {
+		Text: mergedTextStyle ? {
+			...textTheme,
+			style: mergedTextStyle
+		} : textTheme,
+		Icon: {
+			...iconTheme,
+			...theme.iconSize !== void 0 ? { size: theme.iconSize } : {}
+		}
+	};
+}
 /**
 * Generic Button component
 * Provides variant, size, and disabled state support
@@ -24204,50 +24524,61 @@ function resolveEffect(props, theme) {
 * ```
 */
 function Button(props) {
-	const { children, onClick, disabled, variant, size, width, height, ...restProps } = props;
-	const { props: themed } = getThemedProps("Button", void 0, {});
+	const { children, label, text, onClick, disabled = false, variant, size, width, height, textStyle, iconSize, disabledAlpha, alpha, theme, onTouch, ...restProps } = props;
+	const localTheme = useTheme();
+	const { props: themed, nestedTheme } = getThemedProps("Button", theme ? mergeThemes(localTheme ?? {}, theme) : localTheme, {});
 	const ref = useRef(null);
 	const { applyEffect } = useGameObjectEffect(ref);
 	const themedButton = themed;
-	let variantTheme = { ...themedButton };
-	if (variant && themedButton[variant]) {
-		const variantOverrides = themedButton[variant];
-		variantTheme = {
-			...variantTheme,
-			...variantOverrides
-		};
-	}
-	let sizeTheme = { ...variantTheme };
-	if (size && themedButton[size]) {
-		const sizeOverrides = themedButton[size];
-		sizeTheme = {
-			...sizeTheme,
-			...sizeOverrides
-		};
-	}
+	const resolvedVariant = variant ?? themedButton.variant ?? "primary";
+	const resolvedSize = size ?? themedButton.size ?? "medium";
+	const sizeTheme = mergeButtonTheme(mergeButtonTheme({ ...themedButton }, resolveButtonSlotTheme(themedButton, "variants", resolvedVariant)), resolveButtonSlotTheme(themedButton, "sizes", resolvedSize));
+	const resolvedTextStyle = sizeTheme.textStyle || textStyle ? {
+		...sizeTheme.textStyle ?? {},
+		...textStyle ?? {}
+	} : void 0;
+	const resolvedIconSize = iconSize ?? sizeTheme.iconSize;
+	const resolvedDisabledAlpha = disabledAlpha ?? sizeTheme.disabledAlpha ?? .5;
+	const contentStyleProps = {
+		...resolvedTextStyle ? { textStyle: resolvedTextStyle } : {},
+		...resolvedIconSize !== void 0 ? { iconSize: resolvedIconSize } : {}
+	};
 	const effectiveTheme = disabled ? {
 		...sizeTheme,
-		backgroundColor: themedButton.disabledColor ?? sizeTheme?.backgroundColor,
-		alpha: .5
-	} : sizeTheme;
-	const handleTouch = !disabled ? () => {
-		const resolved = resolveEffect(props, themed);
+		backgroundColor: sizeTheme.disabledColor ?? themedButton.disabledColor ?? sizeTheme.backgroundColor,
+		alpha: alpha ?? resolvedDisabledAlpha,
+		...contentStyleProps
+	} : {
+		...sizeTheme,
+		...alpha !== void 0 ? { alpha } : {},
+		...contentStyleProps
+	};
+	const handleTouch = !disabled ? (event) => {
+		const resolved = resolveEffect(props, effectiveTheme);
 		applyEffectByName(applyEffect, resolved.effect, resolved.effectConfig);
+		onTouch?.(event);
 		onClick?.();
 	} : void 0;
-	const { disabledColor: _disabledColor, effect: _effect, effectConfig: _effectConfig, primary: _primary, secondary: _secondary, outline: _outline, small: _small, medium: _medium, large: _large, ...viewThemeProps } = effectiveTheme;
+	const generatedText = label ?? text;
+	const content = children ?? (generatedText !== void 0 ? /* @__PURE__ */ jsx(Text, {
+		text: `${generatedText}`,
+		...resolvedTextStyle ? { style: resolvedTextStyle } : {}
+	}) : null);
+	const contentTheme = mergeThemes(nestedTheme, buildButtonContentTheme(effectiveTheme));
+	const { disabledColor: _disabledColor, disabledAlpha: _disabledAlpha, effect: _effect, effectConfig: _effectConfig, textStyle: _textStyle, iconSize: _iconSize, variant: _variant, size: _size, variants: _variants, sizes: _sizes, primary: _primary, secondary: _secondary, outline: _outline, ghost: _ghost, danger: _danger, small: _small, medium: _medium, large: _large, Text: _Text, Icon: _Icon, ...viewThemeProps } = effectiveTheme;
 	return /* @__PURE__ */ jsx(View, {
 		ref,
-		width,
-		height,
 		enableGestures: !disabled,
 		direction: "row",
 		alignItems: "center",
 		justifyContent: "center",
-		...handleTouch && { onTouch: handleTouch },
 		...viewThemeProps,
+		width: width ?? effectiveTheme.width,
+		height: height ?? effectiveTheme.height,
 		...restProps,
-		children
+		...handleTouch && { onTouch: handleTouch },
+		theme: contentTheme,
+		children: content
 	});
 }
 //#endregion
@@ -24287,7 +24618,8 @@ function drawDefaultIndicator(graphics, indicatorProps) {
 	}
 }
 function Checkbox(props) {
-	const { props: themed, nestedTheme } = getThemedProps("Checkbox", useTheme(), props.theme ?? {});
+	const localTheme = useTheme();
+	const { props: themed, nestedTheme } = getThemedProps("Checkbox", props.theme ? mergeThemes(localTheme ?? {}, props.theme) : localTheme, {});
 	const size = themed.size ?? 20;
 	const gap = themed.gap ?? 8;
 	const labelPosition = props.labelPosition ?? themed.labelPosition ?? "right";
@@ -24524,7 +24856,7 @@ function collectSnapshot(scene) {
 		frameMs,
 		phaserVersion: Phaser.VERSION,
 		renderer: resolveRendererName(scene),
-		viewport: `${scene.scale.width}x${scene.scale.height}`,
+		viewport: `${scene.scale.width.toFixed(0)}x${scene.scale.height.toFixed(0)}`,
 		textureCount: resolveTextureCount(scene),
 		mountsTotal: mountStats.totalMounts,
 		mountsByType: summarizeMap(mountStats.byType),
@@ -24639,38 +24971,61 @@ function Graphics(props) {
 * @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 localTheme = useTheme();
+	const { props: themed, nestedTheme } = getThemedProps("RadioButton", props.theme ? mergeThemes(localTheme ?? {}, props.theme) : localTheme, {});
+	const size = themed.size ?? 18;
+	const innerSize = themed.innerSize ?? Math.max(6, Math.round(size * .45));
 	const innerRadius = innerSize * .5;
 	const outerRadius = size * .5;
+	const borderWidth = themed.borderWidth ?? Math.max(2, Math.round(size * .11));
+	const selected = props.selected ?? false;
+	const disabled = props.disabled ?? false;
+	const disabledAlpha = themed.disabledAlpha ?? .5;
+	const labelPosition = props.labelPosition ?? themed.labelPosition ?? "right";
+	const selectedColor = themed.selectedColor ?? 2201331;
+	const idleColor = themed.color ?? 7697781;
+	const activeColor = selected ? selectedColor : idleColor;
+	const indicatorFillColor = themed.backgroundColor;
+	const gap = themed.gap ?? 8;
+	const label = labelPosition !== "none" ? /* @__PURE__ */ jsx(Text, {
+		text: props.label,
+		style: themed.labelStyle,
+		alpha: disabled ? disabledAlpha : 1
+	}) : null;
+	const handleClick = () => {
+		if (disabled) return;
+		props.onClick?.();
+	};
 	return /* @__PURE__ */ jsxs(View, {
 		direction: "row",
 		alignItems: "center",
-		enableGestures: true,
-		onTouch: () => props.onClick?.(),
+		enableGestures: !disabled,
+		onTouch: handleClick,
 		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,
+			/* @__PURE__ */ jsx(View, {
+				width: size,
+				height: size,
+				...indicatorFillColor !== void 0 && { backgroundColor: indicatorFillColor },
+				borderColor: activeColor,
+				borderWidth,
+				alignItems: "center",
+				justifyContent: "center",
+				padding: 0,
+				cornerRadius: outerRadius,
+				children: /* @__PURE__ */ jsx(View, {
+					width: innerSize,
+					height: innerSize,
+					backgroundColor: selectedColor,
+					visible: selected,
+					cornerRadius: innerRadius
+				})
+			}),
+			labelPosition !== "left" && label
+		]
 	}, props.key);
 }
 //#endregion
@@ -24685,10 +25040,12 @@ function RadioButton(props) {
 * @returns RadioGroup JSX element
 */
 function RadioGroup(props) {
-	const { props: themed, nestedTheme } = getThemedProps("RadioButton", void 0, {});
-	const [selected, setSelected] = useState(props.value ?? "");
+	const { props: themed, nestedTheme } = getThemedProps("RadioButton", useTheme(), {});
+	const [internalSelected, setInternalSelected] = useState(props.value ?? props.defaultValue ?? "");
+	const selected = props.value ?? internalSelected;
 	const handleSelect = (value) => {
-		setSelected(value);
+		if (props.disabled) return;
+		if (props.value === void 0) setInternalSelected(value);
 		props.onChange?.(value);
 	};
 	return /* @__PURE__ */ jsx(View, {
@@ -24697,36 +25054,11 @@ function RadioGroup(props) {
 		gap: themed.gap,
 		children: props.options.map((option) => {
 			const isSelected = selected === option.value;
-			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",
-				gap: themed.gap,
-				alignItems: "center",
-				enableGestures: true,
-				onTouch: () => handleSelect(option.value),
-				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: isSelected,
-						cornerRadius: innerRadius
-					})
-				}), /* @__PURE__ */ jsx(Text, {
-					text: option.label,
-					style: themed.labelStyle
-				})]
+			return /* @__PURE__ */ jsx(RadioButton, {
+				label: option.label,
+				selected: isSelected,
+				disabled: props.disabled ?? false,
+				onClick: () => handleSelect(option.value)
 			}, option.value);
 		})
 	});
@@ -24948,6 +25280,31 @@ function Portal(props) {
 	return null;
 }
 //#endregion
+//#region src/components/custom/useOverlayPresence.ts
+function useOverlayPresence(show) {
+	const [isPresent, setIsPresent] = useState(show);
+	const [phase, setPhase] = useState(show ? "entered" : "exited");
+	const previousShow = useRef(show);
+	useEffect(() => {
+		if (show) {
+			setIsPresent(true);
+			if (!previousShow.current) setPhase("entering");
+		} else if (previousShow.current) setPhase("exiting");
+		previousShow.current = show;
+	}, [show]);
+	return {
+		isPresent,
+		phase,
+		finishEnter: useCallback(() => {
+			setPhase((current) => current === "entering" ? "entered" : current);
+		}, []),
+		finishExit: useCallback(() => {
+			setIsPresent(false);
+			setPhase("exited");
+		}, [])
+	};
+}
+//#endregion
 //#region src/components/custom/Popover.tsx
 function getMainPlacement(placement) {
 	return placement.split("-")[0];
@@ -25031,7 +25388,8 @@ function assignRef(ref, value) {
 	ref.current = value;
 }
 function Popover(props) {
-	const { props: themed, nestedTheme } = getThemedProps("Popover", useTheme(), props.theme ?? {});
+	const localTheme = useTheme();
+	const { props: themed, nestedTheme } = getThemedProps("Popover", props.theme ? mergeThemes(localTheme ?? {}, props.theme) : localTheme, {});
 	const scene = useScene();
 	const triggerRef = useRef(null);
 	const contentRef = useRef(null);
@@ -25039,12 +25397,18 @@ function Popover(props) {
 	const [internalOpen, setInternalOpen] = useState(props.defaultOpen ?? false);
 	const isControlled = props.isOpen !== void 0;
 	const isOpen = isControlled ? props.isOpen === true : internalOpen;
+	const presence = useOverlayPresence(isOpen);
+	const { applyEffect: contentAnimation, stopEffects: stopContentEffects } = useGameObjectEffect(contentRef);
 	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 openEffect = props.openEffect ?? themed.openEffect ?? createFadeInEffect;
+	const closeEffect = props.closeEffect ?? themed.closeEffect ?? createFadeOutEffect;
+	const openDuration = props.openDuration ?? themed.openDuration ?? 120;
+	const closeDuration = props.closeDuration ?? themed.closeDuration ?? 100;
 	const explicitContentWidth = props.contentWidth ?? themed.contentWidth;
 	const explicitContentHeight = props.contentHeight ?? themed.contentHeight;
 	const viewport = portalRegistry.getViewportSize(scene);
@@ -25093,7 +25457,7 @@ function Popover(props) {
 		return () => window.removeEventListener("keydown", handleKeyDown);
 	}, [closeOnEscape, isOpen]);
 	useEffect(() => {
-		if (!isOpen) return;
+		if (!presence.isPresent) return;
 		DeferredLayoutQueue.defer(() => {
 			const size = getLayoutSize(contentRef.current);
 			if (size.width <= 0 || size.height <= 0) return;
@@ -25106,18 +25470,47 @@ function Popover(props) {
 			});
 		});
 	}, [
-		isOpen,
+		presence.isPresent,
 		props.children,
 		explicitContentWidth,
 		explicitContentHeight
 	]);
+	useEffect(() => {
+		const content = contentRef.current;
+		if (!content || !presence.isPresent) return;
+		if (presence.phase === "entering") {
+			if (!isPositionReady) return;
+			stopContentEffects();
+			content.setVisible(true);
+			contentAnimation(openEffect, {
+				time: openDuration,
+				onComplete: presence.finishEnter
+			});
+		} else if (presence.phase === "exiting") {
+			stopContentEffects();
+			contentAnimation(closeEffect, {
+				time: closeDuration,
+				onComplete: () => {
+					contentRef.current?.setVisible(false);
+					setMeasuredContentSize(null);
+					presence.finishExit();
+				}
+			});
+		}
+	}, [
+		presence.phase,
+		presence.isPresent,
+		isPositionReady,
+		openDuration,
+		closeDuration
+	]);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(View, {
 		...props.triggerProps ?? {},
 		ref: triggerRef,
 		enableGestures: !props.disabled,
 		onTouch: toggleOpen,
 		children: props.trigger
-	}), isOpen && /* @__PURE__ */ jsxs(Portal, {
+	}), presence.isPresent && /* @__PURE__ */ jsxs(Portal, {
 		depth,
 		blockEvents: false,
 		children: [closeOnOutside && /* @__PURE__ */ jsx(View, {
@@ -25128,11 +25521,6 @@ function Popover(props) {
 			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,
@@ -25140,6 +25528,11 @@ function Popover(props) {
 			cornerRadius: themed.cornerRadius ?? 8,
 			padding: themed.padding ?? 10,
 			gap: themed.gap ?? 8,
+			...contentProps,
+			ref: handleContentRef,
+			x: overlayPosition.x,
+			y: overlayPosition.y,
+			...props.matchTriggerWidth || explicitContentWidth !== void 0 ? { width: contentWidth } : {},
 			...isPositionReady ? contentPropsAlpha !== void 0 ? { alpha: contentPropsAlpha } : {} : { alpha: 0 },
 			onTouch: (event) => event.stopPropagation(),
 			theme: nestedTheme,
@@ -25149,7 +25542,8 @@ function Popover(props) {
 }
 function ContextMenu(props) {
 	const { items, width: explicitWidth, onSelect, isOpen: explicitOpen, defaultOpen, onOpenChange, ...popoverProps } = props;
-	const { props: themed, nestedTheme } = getThemedProps("ContextMenu", useTheme(), props.theme ?? {});
+	const localTheme = useTheme();
+	const { props: themed, nestedTheme } = getThemedProps("ContextMenu", props.theme ? mergeThemes(localTheme ?? {}, props.theme) : localTheme, {});
 	const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
 	const isControlled = explicitOpen !== void 0;
 	const isOpen = isControlled ? explicitOpen === true : internalOpen;
@@ -25241,7 +25635,8 @@ function formatDefaultValue(props) {
 }
 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 localTheme = useTheme();
+	const { props: themed, nestedTheme } = getThemedProps("ProgressBar", theme ? mergeThemes(localTheme ?? {}, theme) : localTheme, {});
 	const orientation = explicitOrientation ?? themed.orientation ?? "horizontal";
 	const ratio = getProgressRatio(value, min, max);
 	const percent = ratio * 100;
@@ -27602,18 +27997,24 @@ function CharText(props) {
 * - Scroll-to-cursor behavior on input
 */
 function CharTextInput(props) {
+	const localTheme = useTheme();
+	const { props: themed, nestedTheme } = getThemedProps("CharTextInput", props.theme ? mergeThemes(localTheme ?? {}, props.theme) : localTheme, {});
+	const inputProps = {
+		...themed,
+		...props
+	};
 	const containerRef = useRef(null);
 	const inputManagerRef = useRef(null);
 	const charTextApiRef = useRef(null);
-	const [internalValue, setInternalValue] = useState(props.value ?? "");
+	const [internalValue, setInternalValue] = useState(inputProps.value ?? "");
 	const [cursorPosition, setCursorPosition] = useState(0);
 	const [selectionAnchor, setSelectionAnchor] = useState(-1);
 	const [isFocused, setIsFocused] = useState(false);
-	const refCurrentValue = useRef(props.value ?? "");
+	const refCurrentValue = useRef(inputProps.value ?? "");
 	const refCursorPosition = useRef(0);
 	const refSelectionAnchor = useRef(-1);
-	const currentValue = props.value !== void 0 ? props.value : internalValue;
-	const isControlled = props.value !== void 0;
+	const currentValue = inputProps.value !== void 0 ? inputProps.value : internalValue;
+	const isControlled = inputProps.value !== void 0;
 	refCurrentValue.current = currentValue;
 	refCursorPosition.current = cursorPosition;
 	refSelectionAnchor.current = selectionAnchor;
@@ -27631,14 +28032,14 @@ function CharTextInput(props) {
 		if (!containerRef.current) return;
 		const container = containerRef.current;
 		inputManagerRef.current = new KeyboardInputManager(container, {
-			...props.maxLength !== void 0 && { maxLength: props.maxLength },
-			...props.disabled !== void 0 && { disabled: props.disabled },
-			debug: props.debugHtmlInput ?? false,
+			...inputProps.maxLength !== void 0 && { maxLength: inputProps.maxLength },
+			...inputProps.disabled !== void 0 && { disabled: inputProps.disabled },
+			debug: inputProps.debugHtmlInput ?? false,
 			onInput: (_value, _event) => {},
 			onKeyDown: (event) => {
-				if (event.key === "Enter") if (!props.multiline) {
+				if (event.key === "Enter") if (!inputProps.multiline) {
 					event.preventDefault();
-					props.onSubmit?.(refCurrentValue.current);
+					inputProps.onSubmit?.(refCurrentValue.current);
 				} else {
 					event.preventDefault();
 					handleCharacterInput("\n");
@@ -27662,13 +28063,13 @@ function CharTextInput(props) {
 				setIsFocused(true);
 				inputManagerRef.current?.setPointerEvents(false);
 				setCursorPosition(currentValue.length);
-				props.onFocus?.();
+				inputProps.onFocus?.();
 			},
 			onBlur: () => {
 				setIsFocused(false);
 				setSelectionAnchor(-1);
 				inputManagerRef.current?.setPointerEvents(true);
-				props.onBlur?.();
+				inputProps.onBlur?.();
 			}
 		});
 		return () => {
@@ -27677,9 +28078,9 @@ function CharTextInput(props) {
 		};
 	}, [
 		containerRef.current,
-		props.maxLength,
-		props.disabled,
-		props.multiline,
+		inputProps.maxLength,
+		inputProps.disabled,
+		inputProps.multiline,
 		isControlled
 	]);
 	/**
@@ -27708,11 +28109,11 @@ function CharTextInput(props) {
 			newValue = currentValue.slice(0, cursorPosition) + char + currentValue.slice(cursorPosition);
 			newCursorPos = cursorPosition + char.length;
 		}
-		if (props.maxLength !== void 0 && newValue.length > props.maxLength) return;
-		if (props.multiline && char === "\n" && props.maxLines !== void 0) {
-			if (newValue.split("\n").length > props.maxLines) return;
+		if (inputProps.maxLength !== void 0 && newValue.length > inputProps.maxLength) return;
+		if (inputProps.multiline && char === "\n" && inputProps.maxLines !== void 0) {
+			if (newValue.split("\n").length > inputProps.maxLines) return;
 		}
-		if (!props.multiline && charTextApiRef.current) {
+		if (!inputProps.multiline && charTextApiRef.current) {
 			const insertPosition = anchor >= 0 ? Math.min(anchor, cursorPosition) : cursorPosition;
 			if (!charTextApiRef.current.canFitChar(char, insertPosition)) return;
 		}
@@ -27830,10 +28231,10 @@ function CharTextInput(props) {
 	* Update value (controlled or uncontrolled)
 	*/
 	const updateValue = (newValue) => {
-		if (isControlled) props.onChange?.(newValue);
+		if (isControlled) inputProps.onChange?.(newValue);
 		else {
 			setInternalValue(newValue);
-			props.onChange?.(newValue);
+			inputProps.onChange?.(newValue);
 		}
 	};
 	/**
@@ -27852,12 +28253,31 @@ function CharTextInput(props) {
 			setCursorPosition(end);
 		} else setSelectionAnchor(-1);
 	};
-	const { value: _value, placeholder: _placeholder, onChange: _onChange, onFocus: _onFocus, onBlur: _onBlur, onSubmit: _onSubmit, ...viewProps } = props;
-	const displayText = currentValue || (props.placeholder && !isFocused ? props.placeholder : "");
+	const { value: _value, placeholder: _placeholder, placeholderStyle, focusedBorderColor, disabledBackgroundColor, disabledBorderColor, disabledAlpha, onChange: _onChange, onFocus: _onFocus, onBlur: _onBlur, onSubmit: _onSubmit, ...viewProps } = inputProps;
+	const isPlaceholderVisible = currentValue.length === 0 && !!inputProps.placeholder && !isFocused;
+	const displayText = currentValue || (isPlaceholderVisible ? inputProps.placeholder ?? "" : "");
+	const textStyle = isPlaceholderVisible ? {
+		...inputProps.textStyle ?? {},
+		...placeholderStyle ?? {}
+	} : inputProps.textStyle;
+	const disabled = inputProps.disabled ?? false;
+	const focusedViewProps = isFocused ? {
+		borderColor: focusedBorderColor ?? inputProps.borderColor,
+		borderWidth: Math.max(2, inputProps.borderWidth ?? 1)
+	} : {};
+	const disabledViewProps = disabled ? {
+		backgroundColor: disabledBackgroundColor ?? inputProps.backgroundColor,
+		borderColor: disabledBorderColor ?? inputProps.borderColor,
+		alpha: inputProps.alpha ?? disabledAlpha ?? .6
+	} : {};
 	return /* @__PURE__ */ jsx(CharText, {
 		forwardRef: (r) => containerRef.current = r,
 		...viewProps,
+		...focusedViewProps,
+		...disabledViewProps,
+		theme: nestedTheme,
 		text: displayText,
+		...textStyle !== void 0 && { textStyle },
 		showCursor: isFocused,
 		cursorPosition,
 		selectionStart,
@@ -27888,10 +28308,11 @@ function Divider(props) {
 /**
 * Calculate slider dimensions based on size variant and theme
 * @param size - Size variant
+* @param theme - Optional resolved ScrollSlider theme values
 * @returns Calculated dimensions
 */
-function calculateSliderSize(size) {
-	const { props: themed } = getThemedProps("ScrollSlider", void 0, {});
+function calculateSliderSize(size, theme) {
+	const themed = theme ?? getThemedProps("ScrollSlider", void 0, {}).props;
 	const sizeFactor = size === "large" ? 1.25 : size === "small" ? .75 : size === "tiny" ? .5 : size === "micro" ? .25 : size === "nano" ? .125 : 1;
 	const border = (themed.borderWidth ?? 1) * sizeFactor;
 	const outer = (themed.size ?? 24) * sizeFactor;
@@ -27908,15 +28329,21 @@ function calculateSliderSize(size) {
 */
 function ScrollSlider(props) {
 	const { direction, scrollPosition, viewportSize, contentSize, onScroll, momentum = true, onMomentumEnd } = props;
-	const { props: themed } = getThemedProps("ScrollSlider", void 0, {});
+	const { props: themed } = getThemedProps("ScrollSlider", useTheme(), {});
 	const sliderRef = useRef(null);
 	const isDraggingRef = useRef(false);
+	const [isDragging, setIsDragging] = useState(false);
 	const trackContainerRef = useRef(null);
 	const velocityRef = useRef(0);
 	const lastTimeRef = useRef(0);
 	const tweenRef = useRef(null);
 	const isVertical = direction === "vertical";
-	const { border, outer, dimension } = calculateSliderSize(props.size);
+	const { border, outer, dimension } = calculateSliderSize(props.size, themed);
+	const sizeFactor = outer / (themed.size ?? 24);
+	const thumbBorderWidth = Math.min((themed.thumbBorderWidth ?? 1) * sizeFactor, Math.max(0, dimension / 3));
+	const outerRadius = themed.cornerRadius ?? outer / 2;
+	const trackRadius = themed.trackCornerRadius ?? dimension / 2;
+	const thumbRadius = themed.thumbCornerRadius ?? dimension / 2;
 	const containerWithLayout = trackContainerRef.current;
 	const trackSizeInner = (containerWithLayout?.__getLayoutSize ? isVertical ? containerWithLayout.__getLayoutSize().height : containerWithLayout.__getLayoutSize().width : containerWithLayout && containerWithLayout.width > 0 && containerWithLayout.height > 0 ? isVertical ? containerWithLayout.height : containerWithLayout.width : 800) - border * 2;
 	const minThumbSize = themed.minThumbSize ?? 20;
@@ -27929,6 +28356,7 @@ function ScrollSlider(props) {
 		data.stopPropagation();
 		if (data.state === "start") {
 			isDraggingRef.current = true;
+			setIsDragging(true);
 			velocityRef.current = 0;
 			lastTimeRef.current = Date.now();
 			if (tweenRef.current) {
@@ -27939,6 +28367,7 @@ function ScrollSlider(props) {
 		}
 		if (data.state === "end") {
 			isDraggingRef.current = false;
+			setIsDragging(false);
 			if (momentum && Math.abs(velocityRef.current) > .1) startMomentum(scrollPosition);
 			else if (onMomentumEnd) onMomentumEnd();
 			return;
@@ -27986,12 +28415,14 @@ function ScrollSlider(props) {
 		width: isVertical ? outer : "100%",
 		height: isVertical ? "100%" : outer,
 		backgroundColor: themed.borderColor ?? 0,
+		cornerRadius: outerRadius,
 		padding: border,
 		children: /* @__PURE__ */ jsxs(View, {
 			ref: sliderRef,
 			width: isVertical ? dimension : "100%",
 			height: isVertical ? "100%" : dimension,
 			backgroundColor: themed.trackColor ?? 14540253,
+			cornerRadius: trackRadius,
 			direction: "stack",
 			padding: 0,
 			children: [/* @__PURE__ */ jsx(View, {
@@ -28000,6 +28431,7 @@ function ScrollSlider(props) {
 				x: 0,
 				y: 0,
 				backgroundColor: themed.trackColor ?? 11184810,
+				cornerRadius: trackRadius,
 				enableGestures: true,
 				onTouch: handleBackgroundTouch
 			}), /* @__PURE__ */ jsx(View, {
@@ -28007,7 +28439,10 @@ function ScrollSlider(props) {
 				height: isVertical ? thumbSize : dimension,
 				x: isVertical ? 0 : thumbPosition,
 				y: isVertical ? thumbPosition : 0,
-				backgroundColor: themed.thumbColor ?? 15658683,
+				backgroundColor: isDragging ? themed.thumbActiveColor ?? themed.thumbColor ?? 15658683 : themed.thumbColor ?? 15658683,
+				borderColor: themed.thumbBorderColor,
+				borderWidth: thumbBorderWidth,
+				cornerRadius: thumbRadius,
 				enableGestures: true,
 				onTouchMove: handleThumbTouchMove
 			})]
@@ -28022,7 +28457,8 @@ function ScrollSlider(props) {
 * @returns JSX element
 */
 function ScrollView(props) {
-	const { children, showVerticalSlider = "auto", showHorizontalSlider = "auto", scroll: initialScroll, onScrollInfoChange, snap = false, snapAlignment = "start", snapThreshold = 20, momentum = true, onSnap, ...viewProps } = props;
+	const { children, showVerticalSlider = "auto", showHorizontalSlider = "auto", scroll: initialScroll, onScrollInfoChange, snap = false, snapAlignment = "start", snapThreshold = 20, momentum = true, onSnap, onSliderSize, sliderSize: sliderSizeVariant, ...viewProps } = props;
+	const { props: sliderTheme } = getThemedProps("ScrollSlider", useTheme(), {});
 	const [scroll, setScroll] = useState({
 		dx: initialScroll?.dx ?? 0,
 		dy: initialScroll?.dy ?? 0
@@ -28056,9 +28492,9 @@ function ScrollView(props) {
 	const needsHorizontalScroll = effectiveContentWidth > viewportWidth + epsilon;
 	const showVerticalSliderActual = showVerticalSlider === true || needsVerticalScroll && showVerticalSlider === "auto";
 	const showHorizontalSliderActual = showHorizontalSlider === true || needsHorizontalScroll && showHorizontalSlider === "auto";
-	const { outer: sliderSize } = calculateSliderSize(props.sliderSize);
-	props.onSliderSize?.({
-		width: showVerticalSlider ? sliderSize : 0,
+	const { outer: sliderSize } = calculateSliderSize(sliderSizeVariant, sliderTheme);
+	onSliderSize?.({
+		width: showVerticalSliderActual ? sliderSize : 0,
 		height: showHorizontalSliderActual ? sliderSize : 0
 	});
 	const maxScrollY = Math.max(0, effectiveContentHeight - viewportHeight);
@@ -28521,7 +28957,7 @@ function ScrollView(props) {
 					visible: showHorizontalSliderActual ? true : "none",
 					children: /* @__PURE__ */ jsx(ScrollSlider, {
 						direction: "horizontal",
-						size: props.sliderSize,
+						size: sliderSizeVariant,
 						scrollPosition: scroll.dx,
 						viewportSize: viewportWidth,
 						contentSize: contentWidth,
@@ -28538,7 +28974,7 @@ function ScrollView(props) {
 					flex: 1,
 					children: /* @__PURE__ */ jsx(ScrollSlider, {
 						direction: "vertical",
-						size: props.sliderSize,
+						size: sliderSizeVariant,
 						scrollPosition: scroll.dy,
 						viewportSize: viewportHeight,
 						contentSize: effectiveContentHeight,
@@ -28555,25 +28991,114 @@ function ScrollView(props) {
 	});
 }
 //#endregion
+//#region src/components/custom/TransformOriginView.tsx
+/**
+* TransformOriginView component - declarative transforms around custom origin point
+*
+* Uses three nested Views to apply rotation/scale around configurable origin:
+* - Outer View: Defines bounding box, receives layout/position props
+* - Middle View: Positioned at origin point, receives transform/visual props
+* - Inner View: Contains content, offset to align with origin
+*
+* @param props - TransformOriginView props
+* @returns JSX element
+*/
+function TransformOriginView({ originX = .5, originY = .5, width, height, x = 0, y = 0, children, rotation, scale, scaleX, scaleY, backgroundColor, backgroundAlpha, cornerRadius, borderWidth, borderColor, borderAlpha, ...outerViewProps }) {
+	if (typeof width !== "number" || typeof height !== "number") throw new Error("TransformOriginView requires numeric width and height");
+	const offsetX = width * originX;
+	const offsetY = height * originY;
+	const middleViewProps = {};
+	if (rotation !== void 0) middleViewProps.rotation = rotation;
+	if (scale !== void 0) middleViewProps.scale = scale;
+	if (scaleX !== void 0) middleViewProps.scaleX = scaleX;
+	if (scaleY !== void 0) middleViewProps.scaleY = scaleY;
+	if (backgroundColor !== void 0) middleViewProps.backgroundColor = backgroundColor;
+	if (backgroundAlpha !== void 0) middleViewProps.backgroundAlpha = backgroundAlpha;
+	if (cornerRadius !== void 0) middleViewProps.cornerRadius = cornerRadius;
+	if (borderWidth !== void 0) middleViewProps.borderWidth = borderWidth;
+	if (borderColor !== void 0) middleViewProps.borderColor = borderColor;
+	if (borderAlpha !== void 0) middleViewProps.borderAlpha = borderAlpha;
+	return /* @__PURE__ */ jsx(View, {
+		x,
+		y,
+		width,
+		height,
+		padding: 0,
+		direction: "stack",
+		...outerViewProps,
+		children: /* @__PURE__ */ jsx(View, {
+			x: offsetX,
+			y: offsetY,
+			width,
+			height,
+			padding: 0,
+			direction: "stack",
+			...middleViewProps,
+			children: /* @__PURE__ */ jsx(View, {
+				x: -offsetX,
+				y: -offsetY,
+				width,
+				height,
+				padding: 0,
+				direction: "stack",
+				backgroundAlpha: 0,
+				children
+			})
+		})
+	});
+}
+//#endregion
 //#region src/components/custom/Dropdown.tsx
 /**
-* Default arrow component - simple Graphics triangle
+* Default arrow component - chevron indicator.
 */
 function DefaultArrow(props) {
 	const color = props.color ?? 16777215;
 	const size = props.size ?? 8;
+	const strokeWidth = props.strokeWidth ?? Math.max(2, Math.round(size * .16));
 	return /* @__PURE__ */ jsx(Graphics, {
 		width: size,
 		height: size,
 		onDraw: (g) => {
 			g.clear();
-			g.fillStyle(color, 1);
+			g.lineStyle(strokeWidth, color, 1);
 			g.beginPath();
-			g.moveTo(0, 0);
-			g.lineTo(size, 0);
-			g.lineTo(size / 2, size);
-			g.closePath();
-			g.fillPath();
+			g.moveTo(size * .18, size * .35);
+			g.lineTo(size * .5, size * .68);
+			g.lineTo(size * .82, size * .35);
+			g.strokePath();
+		}
+	});
+}
+function DefaultOptionIndicator(props) {
+	const size = props.size ?? 16;
+	const color = props.color ?? 16777215;
+	const strokeWidth = props.strokeWidth ?? 2;
+	const alpha = props.disabled ? .4 : 1;
+	return /* @__PURE__ */ jsx(Graphics, {
+		width: size,
+		height: size,
+		dependencies: [
+			props.selected,
+			props.multiple,
+			props.disabled,
+			color,
+			size,
+			strokeWidth
+		],
+		onDraw: (g) => {
+			g.clear();
+			if (props.multiple) {
+				g.lineStyle(strokeWidth, color, props.selected ? alpha : alpha * .55);
+				g.strokeRoundedRect(strokeWidth / 2, strokeWidth / 2, size - strokeWidth, size - strokeWidth, 3);
+				if (!props.selected) return;
+			} else if (!props.selected) return;
+			g.lineStyle(strokeWidth + 1, color, alpha);
+			g.beginPath();
+			g.moveTo(size * .22, size * .52);
+			g.lineTo(size * .43, size * .72);
+			g.lineTo(size * .8, size * .28);
+			g.strokePath();
 		}
 	});
 }
@@ -28609,11 +29134,7 @@ function Dropdown(props) {
 	const [isOpen, setIsOpen] = useState(false);
 	const [internalValue, setInternalValue] = useState(props.defaultValue ?? (props.multiple ? [] : ""));
 	const [filterQuery, setFilterQuery] = useState("");
-	const [isAnimating, setIsAnimating] = useState(false);
-	const shouldIgnoreNextClick = useRef(false);
 	const triggerRef = useRef(null);
-	const overlayRef = useRef(null);
-	const containerRef = useRef(null);
 	const scrollViewRef = useRef(null);
 	const { applyEffect } = useGameObjectEffect(triggerRef);
 	const isControlled = props.value !== void 0;
@@ -28626,6 +29147,13 @@ function Dropdown(props) {
 	const animationConfig = props.animationConfig ?? themed.animationConfig ?? "gentle";
 	const maxHeight = props.maxHeight ?? overlayTheme.maxHeight ?? 300;
 	const arrowConfig = themed.arrow ?? {};
+	const arrowSize = arrowConfig.size ?? 12;
+	const indicatorConfig = themed.selectionIndicator ?? {};
+	const indicatorSize = indicatorConfig.size ?? 16;
+	const indicatorColor = indicatorConfig.color ?? arrowConfig.color;
+	const indicatorStrokeWidth = indicatorConfig.strokeWidth ?? 2;
+	const placement = props.placement ?? "bottom";
+	const popoverPlacement = placement === "top" ? "top-start" : "bottom-start";
 	const getSelectedOptions = () => {
 		if (props.multiple) {
 			const values = currentValue;
@@ -28636,38 +29164,31 @@ function Dropdown(props) {
 		}
 	};
 	const selectedOptions = getSelectedOptions();
-	const [overlayHeight, setOverlayHeight] = useSpring(isOpen ? maxHeight : 0, animationConfig, () => setIsAnimating(false));
-	useForceRedraw(20, overlayHeight);
 	const [arrowRotation, setArrowRotation] = useSpring(isOpen ? Math.PI : 0, animationConfig);
 	useForceRedraw(20, arrowRotation);
-	const resolvedOverlayHeight = Math.max(0, overlayHeight.value);
-	const handleToggle = (event) => {
+	const openDropdown = () => {
 		if (props.disabled) return;
-		event?.stopPropagation();
-		if (isOpen) handleClose();
-		else {
-			setIsOpen(true);
-			setIsAnimating(true);
-			setOverlayHeight(maxHeight);
-			setArrowRotation(Math.PI);
-			setFilterQuery("");
-			props.onOpen?.();
-			shouldIgnoreNextClick.current = true;
-			const resolved = resolveEffect(props, themed);
-			applyEffectByName(applyEffect, resolved.effect, resolved.effectConfig);
-		}
+		if (isOpen) return;
+		setIsOpen(true);
+		setArrowRotation(Math.PI);
+		setFilterQuery("");
+		props.onOpen?.();
+		const resolved = resolveEffect(props, themed);
+		applyEffectByName(applyEffect, resolved.effect, resolved.effectConfig);
 	};
 	const handleClose = () => {
-		setIsAnimating(true);
+		if (!isOpen) return;
 		setIsOpen(false);
-		setOverlayHeight(0);
 		setArrowRotation(0);
 		setFilterQuery("");
 		props.onClose?.();
 	};
+	const handleOpenChange = (open) => {
+		if (open) openDropdown();
+		else handleClose();
+	};
 	const handleSelect = (value, event) => {
 		event?.stopPropagation();
-		shouldIgnoreNextClick.current = true;
 		if (props.multiple) {
 			const values = currentValue;
 			const newValues = values.includes(value) ? values.filter((v) => v !== value) : [...values, value];
@@ -28680,33 +29201,6 @@ function Dropdown(props) {
 			if (props.closeOnSelect ?? true) handleClose();
 		}
 	};
-	const handleOutsideClick = () => {
-		if (shouldIgnoreNextClick.current) {
-			shouldIgnoreNextClick.current = false;
-			return;
-		}
-		if (isOpen) handleClose();
-	};
-	const calculateOverlayPosition = () => {
-		const triggerContainer = triggerRef.current;
-		if (!triggerContainer) return {
-			x: 0,
-			y: 0,
-			width: 0
-		};
-		const triggerSize = triggerContainer.__getLayoutSize?.() ?? {
-			width: 0,
-			height: 0
-		};
-		const triggerX = triggerContainer.x ?? 0;
-		const triggerY = triggerContainer.y ?? 0;
-		const gap = 4;
-		return {
-			x: triggerX,
-			y: (props.placement ?? "bottom") === "bottom" ? triggerY + triggerSize.height + gap : triggerY - maxHeight - gap,
-			width: triggerSize.width
-		};
-	};
 	const renderSelectedValue = () => {
 		if (props.renderValue) return props.renderValue(selectedOptions.length > 0 ? selectedOptions : null);
 		if (selectedOptions.length === 0) return /* @__PURE__ */ jsx(Text, {
@@ -28734,10 +29228,9 @@ function Dropdown(props) {
 		return triggerTheme;
 	};
 	const triggerStyle = getTriggerStyle();
-	const overlayPosition = calculateOverlayPosition();
 	const renderedOptions = props.options.map((option, _index) => {
 		const isSelected = props.multiple ? currentValue.includes(option.value) : currentValue === option.value;
-		const isDisabled = (option.disabled ?? false) || isAnimating && (props.placement ?? "bottom") === "top";
+		const isDisabled = option.disabled ?? false;
 		const matchesFilter = props.isFilterable ? option.label.toLowerCase().includes(filterQuery.toLowerCase()) : true;
 		const optionStyle = {
 			...optionTheme,
@@ -28758,27 +29251,40 @@ function Dropdown(props) {
 			theme: optionNestedTheme,
 			...optionStyle,
 			children: props.renderOption ? props.renderOption(option, isSelected) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(DefaultOptionIndicator, {
+					selected: isSelected,
+					multiple: props.multiple === true,
+					disabled: isDisabled,
+					color: indicatorColor ?? 16777215,
+					size: indicatorSize,
+					strokeWidth: indicatorStrokeWidth
+				}),
 				option.prefix,
 				/* @__PURE__ */ jsx(Text, { text: option.label }),
 				option.suffix
 			] })
 		}, String(option.value));
 	});
-	const placement = props.placement ?? "bottom";
 	const trigger = /* @__PURE__ */ jsxs(View, {
 		ref: triggerRef,
 		direction: "row",
 		alignItems: "center",
 		justifyContent: "space-between",
-		enableGestures: !props.disabled,
-		onTouch: (data) => handleToggle(data),
 		...triggerStyle,
 		children: [/* @__PURE__ */ jsx(View, {
 			flex: 1,
 			children: renderSelectedValue()
-		}), props.arrow ? props.arrow : /* @__PURE__ */ jsx(DefaultArrow, {
-			color: arrowConfig.color ?? 16777215,
-			size: arrowConfig.size ?? 8
+		}), /* @__PURE__ */ jsx(TransformOriginView, {
+			width: arrowSize,
+			height: arrowSize,
+			rotation: arrowRotation.value,
+			originX: .5,
+			originY: .5,
+			children: props.arrow ? props.arrow : /* @__PURE__ */ jsx(DefaultArrow, {
+				color: arrowConfig.color ?? 16777215,
+				size: arrowSize,
+				strokeWidth: arrowConfig.strokeWidth ?? 2
+			})
 		})]
 	});
 	const filterInput = props.isFilterable && /* @__PURE__ */ jsx(CharTextInput, {
@@ -28796,7 +29302,7 @@ function Dropdown(props) {
 		width: "fill",
 		children: /* @__PURE__ */ jsx(ScrollView, {
 			ref: scrollViewRef,
-			showVerticalSlider: isAnimating ? false : "auto",
+			showVerticalSlider: "auto",
 			height: "fill",
 			width: "100%",
 			onTouch: () => {
@@ -28812,33 +29318,53 @@ function Dropdown(props) {
 		})
 	});
 	const overlay = /* @__PURE__ */ jsx(View, {
-		height: resolvedOverlayHeight,
-		width: overlayPosition.width,
+		direction: "column",
+		width: "fill",
+		height: maxHeight,
 		overflow: "hidden",
-		children: /* @__PURE__ */ jsx(View, {
-			ref: overlayRef,
-			direction: "column",
-			width: "fill",
-			height: "fill",
-			visible: isOpen || resolvedOverlayHeight > .1,
-			...overlayTheme,
-			children: placement === "top" ? /* @__PURE__ */ jsxs(Fragment, { children: [optionsList, filterInput] }) : /* @__PURE__ */ jsxs(Fragment, { children: [filterInput, optionsList] })
-		})
+		theme: nestedTheme,
+		...overlayTheme,
+		children: placement === "top" ? /* @__PURE__ */ jsxs(Fragment, { children: [optionsList, filterInput] }) : /* @__PURE__ */ jsxs(Fragment, { children: [filterInput, optionsList] })
 	});
+	const popoverTheme = {
+		...nestedTheme,
+		Popover: {
+			backgroundColor: 0,
+			backgroundAlpha: 0,
+			borderWidth: 0,
+			cornerRadius: 0,
+			padding: 0,
+			gap: 0
+		}
+	};
 	return /* @__PURE__ */ jsx(View, {
-		direction: props.stackLayout ? "stack" : "column",
+		direction: "column",
 		width: props.width || "fill",
-		height: props.stackLayout ? triggerRef.current?.height : "auto",
+		height: "auto",
 		ref: props.ref,
-		children: /* @__PURE__ */ jsx(View, {
-			ref: containerRef,
-			direction: "column",
-			width: props.width,
-			theme: nestedTheme,
-			enableGestures: true,
-			onTouchOutside: handleOutsideClick,
-			children: placement === "top" ? /* @__PURE__ */ jsxs(Fragment, { children: [overlay, trigger] }) : /* @__PURE__ */ jsxs(Fragment, { children: [trigger, overlay] })
-		}, `dropdown-${placement}`)
+		children: /* @__PURE__ */ jsx(Popover, {
+			trigger,
+			isOpen,
+			onOpenChange: handleOpenChange,
+			placement: popoverPlacement,
+			offset: 4,
+			matchTriggerWidth: true,
+			contentHeight: maxHeight,
+			contentProps: {
+				height: maxHeight,
+				backgroundAlpha: 0,
+				borderWidth: 0,
+				padding: 0,
+				gap: 0,
+				cornerRadius: 0
+			},
+			triggerProps: { width: props.width ?? "fill" },
+			closeOnOutside: true,
+			closeOnEscape: true,
+			disabled: props.disabled === true,
+			theme: popoverTheme,
+			children: overlay
+		})
 	});
 }
 //#endregion
@@ -30265,14 +30791,21 @@ function interpolateColor(color1, color2, progress) {
 * ```
 */
 function Toggle(props) {
-	const { props: themed, nestedTheme } = getThemedProps("Toggle", useTheme(), props.theme ?? {});
+	const localTheme = useTheme();
+	const { props: themed, nestedTheme } = getThemedProps("Toggle", props.theme ? mergeThemes(localTheme ?? {}, props.theme) : localTheme, {});
 	const width = useRef(themed.width ?? 50);
 	const height = useRef(themed.height ?? 28);
 	const thumbSize = useRef(themed.thumbSize ?? 24);
 	const trackColorOff = useRef(themed.trackColorOff ?? 10066329);
 	const trackColorOn = useRef(themed.trackColorOn ?? 5025616);
+	const trackBorderColorOff = useRef(themed.trackBorderColorOff ?? 7829367);
+	const trackBorderColorOn = useRef(themed.trackBorderColorOn ?? themed.trackColorOn ?? 5025616);
+	const trackBorderWidth = useRef(themed.trackBorderWidth ?? 1);
 	const thumbColor = useRef(themed.thumbColor ?? 16777215);
+	const thumbBorderColor = useRef(themed.thumbBorderColor ?? 13751771);
+	const thumbBorderWidth = useRef(themed.thumbBorderWidth ?? 1);
 	const disabledColor = useRef(themed.disabledColor ?? 6710886);
+	const disabledAlpha = useRef(themed.disabledAlpha ?? .5);
 	const padding = useRef(themed.padding ?? 2);
 	const duration = useRef(themed.duration ?? 200);
 	const gap = themed.gap ?? 8;
@@ -30282,8 +30815,14 @@ function Toggle(props) {
 	thumbSize.current = themed.thumbSize ?? 24;
 	trackColorOff.current = themed.trackColorOff ?? 10066329;
 	trackColorOn.current = themed.trackColorOn ?? 5025616;
+	trackBorderColorOff.current = themed.trackBorderColorOff ?? 7829367;
+	trackBorderColorOn.current = themed.trackBorderColorOn ?? themed.trackColorOn ?? 5025616;
+	trackBorderWidth.current = themed.trackBorderWidth ?? 1;
 	thumbColor.current = themed.thumbColor ?? 16777215;
+	thumbBorderColor.current = themed.thumbBorderColor ?? 13751771;
+	thumbBorderWidth.current = themed.thumbBorderWidth ?? 1;
 	disabledColor.current = themed.disabledColor ?? 6710886;
+	disabledAlpha.current = themed.disabledAlpha ?? .5;
 	padding.current = themed.padding ?? 2;
 	duration.current = themed.duration ?? 200;
 	const thumbRadius = thumbSize.current / 2;
@@ -30297,9 +30836,34 @@ function Toggle(props) {
 	const trackRef = useRef(null);
 	const thumbRef = useRef(null);
 	const containerRef = useRef(null);
+	const drawTrackShape = (g, color, borderColor) => {
+		const borderInset = trackBorderWidth.current / 2;
+		g.clear();
+		g.fillStyle(color, 1);
+		g.fillRoundedRect(0, 0, width.current, height.current, trackRadius);
+		if (trackBorderWidth.current > 0) {
+			g.lineStyle(trackBorderWidth.current, borderColor, 1);
+			g.strokeRoundedRect(borderInset, borderInset, width.current - trackBorderWidth.current, height.current - trackBorderWidth.current, Math.max(0, trackRadius - borderInset));
+		}
+	};
+	const getTrackColor = (targetChecked) => {
+		if (props.disabled && !targetChecked) return disabledColor.current;
+		return targetChecked ? trackColorOn.current : trackColorOff.current;
+	};
+	const getTrackBorderColor = (targetChecked) => {
+		return targetChecked ? trackBorderColorOn.current : trackBorderColorOff.current;
+	};
 	useEffect(() => {
 		if (props.checked !== void 0 && props.checked !== checked) animateToggle(props.checked);
 	}, [props.checked, checked]);
+	useEffect(() => {
+		if (!isAnimating) setThumbX(checked ? thumbOffsetOn : thumbOffsetOff);
+	}, [
+		checked,
+		thumbOffsetOn,
+		thumbOffsetOff,
+		isAnimating
+	]);
 	/**
 	* Animate toggle transition
 	*/
@@ -30334,10 +30898,10 @@ function Toggle(props) {
 			duration: duration.current,
 			ease: "Cubic.easeOut",
 			onUpdate: (tween) => {
-				const currentColor = interpolateColor(startColor, endColor, tween.getValue() ?? 0);
-				track.clear();
-				track.fillStyle(props.disabled ? disabledColor.current : currentColor, 1);
-				track.fillRoundedRect(0, 0, width.current, height.current, trackRadius);
+				const progress = tween.getValue() ?? 0;
+				const currentColor = interpolateColor(startColor, endColor, progress);
+				const currentBorderColor = interpolateColor(getTrackBorderColor(checked), getTrackBorderColor(newChecked), progress);
+				drawTrackShape(track, props.disabled && !newChecked ? disabledColor.current : currentColor, currentBorderColor);
 			}
 		});
 		setChecked(newChecked);
@@ -30356,9 +30920,7 @@ function Toggle(props) {
 	*/
 	const drawTrack = (g) => {
 		g.clear();
-		const color = props.disabled ? disabledColor.current : checked ? trackColorOn.current : trackColorOff.current;
-		g.fillStyle(color, 1);
-		g.fillRoundedRect(0, 0, width.current, height.current, trackRadius);
+		drawTrackShape(g, getTrackColor(checked), getTrackBorderColor(checked));
 	};
 	/**
 	* Draw thumb graphics
@@ -30367,6 +30929,10 @@ function Toggle(props) {
 		g.clear();
 		g.fillStyle(thumbColor.current, 1);
 		g.fillCircle(0, 0, thumbRadius);
+		if (thumbBorderWidth.current > 0) {
+			g.lineStyle(thumbBorderWidth.current, thumbBorderColor.current, 1);
+			g.strokeCircle(0, 0, Math.max(0, thumbRadius - thumbBorderWidth.current / 2));
+		}
 	};
 	const toggleElement = /* @__PURE__ */ jsxs(View, {
 		direction: "stack",
@@ -30374,11 +30940,24 @@ function Toggle(props) {
 		height: height.current,
 		enableGestures: !props.disabled,
 		onTouch: handleClick,
-		alpha: props.disabled ? .5 : 1,
+		alpha: props.disabled ? disabledAlpha.current : 1,
 		children: [/* @__PURE__ */ jsx(Graphics, {
 			ref: trackRef,
 			width: width.current,
 			height: height.current,
+			dependencies: [
+				checked,
+				width.current,
+				height.current,
+				trackColorOff.current,
+				trackColorOn.current,
+				trackBorderColorOff.current,
+				trackBorderColorOn.current,
+				trackBorderWidth.current,
+				disabledColor.current,
+				padding.current,
+				props.disabled
+			],
 			onDraw: drawTrack
 		}), /* @__PURE__ */ jsx(Graphics, {
 			ref: thumbRef,
@@ -30386,12 +30965,19 @@ function Toggle(props) {
 			height: thumbSize.current,
 			x: thumbX,
 			y: height.current / 2,
+			dependencies: [
+				thumbSize.current,
+				thumbColor.current,
+				thumbBorderColor.current,
+				thumbBorderWidth.current
+			],
 			onDraw: drawThumb
 		})]
 	});
 	const labelElement = props.label && labelPosition !== "none" ? /* @__PURE__ */ jsx(Text, {
 		text: props.label,
-		style: themed.labelStyle
+		style: themed.labelStyle,
+		alpha: props.disabled ? disabledAlpha.current : 1
 	}) : null;
 	if (!props.label || labelPosition === "none") return /* @__PURE__ */ jsxs(View, {
 		ref: containerRef,
@@ -30421,63 +31007,6 @@ function Toggle(props) {
 	});
 }
 //#endregion
-//#region src/components/custom/TransformOriginView.tsx
-/**
-* TransformOriginView component - declarative transforms around custom origin point
-*
-* Uses three nested Views to apply rotation/scale around configurable origin:
-* - Outer View: Defines bounding box, receives layout/position props
-* - Middle View: Positioned at origin point, receives transform/visual props
-* - Inner View: Contains content, offset to align with origin
-*
-* @param props - TransformOriginView props
-* @returns JSX element
-*/
-function TransformOriginView({ originX = .5, originY = .5, width, height, x = 0, y = 0, children, rotation, scale, scaleX, scaleY, backgroundColor, backgroundAlpha, cornerRadius, borderWidth, borderColor, borderAlpha, ...outerViewProps }) {
-	if (typeof width !== "number" || typeof height !== "number") throw new Error("TransformOriginView requires numeric width and height");
-	const offsetX = width * originX;
-	const offsetY = height * originY;
-	const middleViewProps = {};
-	if (rotation !== void 0) middleViewProps.rotation = rotation;
-	if (scale !== void 0) middleViewProps.scale = scale;
-	if (scaleX !== void 0) middleViewProps.scaleX = scaleX;
-	if (scaleY !== void 0) middleViewProps.scaleY = scaleY;
-	if (backgroundColor !== void 0) middleViewProps.backgroundColor = backgroundColor;
-	if (backgroundAlpha !== void 0) middleViewProps.backgroundAlpha = backgroundAlpha;
-	if (cornerRadius !== void 0) middleViewProps.cornerRadius = cornerRadius;
-	if (borderWidth !== void 0) middleViewProps.borderWidth = borderWidth;
-	if (borderColor !== void 0) middleViewProps.borderColor = borderColor;
-	if (borderAlpha !== void 0) middleViewProps.borderAlpha = borderAlpha;
-	return /* @__PURE__ */ jsx(View, {
-		x,
-		y,
-		width,
-		height,
-		padding: 0,
-		direction: "stack",
-		...outerViewProps,
-		children: /* @__PURE__ */ jsx(View, {
-			x: offsetX,
-			y: offsetY,
-			width,
-			height,
-			padding: 0,
-			direction: "stack",
-			...middleViewProps,
-			children: /* @__PURE__ */ jsx(View, {
-				x: -offsetX,
-				y: -offsetY,
-				width,
-				height,
-				padding: 0,
-				direction: "stack",
-				backgroundAlpha: 0,
-				children
-			})
-		})
-	});
-}
-//#endregion
-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 };
+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, TransformOriginView as _, useEffect as _n, DebugLogger as _r, createFadeEffect as _t, RangeSlider as a, View as an, numberToRgb as ar, RadioButton as at, calculateSliderSize as b, useLayoutRect as bn, spriteCreator as br, createFlipOutEffect as bt, RefOriginView as c, getCurrent as cn, HexColor as cr, useThemeTokens as ct, Joystick as d, getLayoutSize$1 as dn, normalizeGap as dr, DEFAULT_EFFECT as dt, patchVNode as en, hex as er, Particles as et, Icon as f, getWorldLayoutRect as fn, tileSpriteCreator as fr, EFFECT_REGISTRY as ft, Dropdown as g, useCallback as gn, viewportRegistry as gr, createBreatheEffect as gt, Image$1 as h, useBackgroundGraphics as hn, textPatcher as hr, createBounceEffect as ht, Tabs 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, NineSliceButton as l, getLayoutProps as ln, normalizeCornerRadius as lr, Checkbox as lt, useIconPreload as m, shouldComponentUpdate as mn, textCreator as mr, resolveEffect as mt, Tab as n, unmount as nn, lighten as nr, Text as nt, Slider as o, disposeCtx as on, rgbToHsl as or, Graphics as ot, createIconComponent as p, shallowEqual as pn, tileSpritePatcher as pr, applyEffectByName as pt, ProgressBar as q, presets as qn, mergeThemes as qt, TabPanel as r, unmountJSX as rn, lightenHex as rr, Sprite as rt, Sidebar as s, getBackgroundGraphics as sn, rgbToNumber as sr, DebugPanel as st, Toggle as t, remountAll as tn, hexToNumber as tr, TileSprite as tt, NineSlice 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-DMZASXll.js.map
+//# sourceMappingURL=custom-BPY0TbuS.js.map