@number10/phaserjsx 4.3.0 → 4.4.0

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

@@ -16743,6 +16743,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;
@@ -16751,14 +16768,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) {
@@ -18278,6 +18302,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
@@ -18291,8 +18321,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);
@@ -18340,6 +18375,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
@@ -18360,8 +18410,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 {
@@ -19980,10 +20035,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"
@@ -20008,7 +20066,7 @@ function buildDefaultTheme(colors) {
 			size: "medium",
 			maxCount: 99,
 			disabledAlpha: .5,
-			textStyle: { fontStyle: "bold" }
+			textStyle: { fontFamily: "Arial" }
 		},
 		Tag: {
 			tone: "neutral",
@@ -20016,7 +20074,7 @@ function buildDefaultTheme(colors) {
 			size: "medium",
 			closeSize: 16,
 			disabledAlpha: .5,
-			textStyle: { fontStyle: "bold" }
+			textStyle: { fontFamily: "Arial" }
 		},
 		Popover: {
 			placement: "bottom",
@@ -20025,6 +20083,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,
@@ -20075,65 +20135,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: {
@@ -20365,64 +20586,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
@@ -20473,9 +20740,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,
@@ -22067,13 +22340,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;
@@ -22378,6 +22654,7 @@ var ThemeRegistry = class {
 				...styles
 			});
 		}
+		this.notifyListeners();
 	}
 	/**
 	* Set the entire global theme (replaces current theme)
@@ -22571,12 +22848,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];
@@ -23189,41 +23475,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
 	}
@@ -23277,7 +23563,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";
@@ -23333,13 +23620,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
 	});
@@ -23358,16 +23648,15 @@ function Tag(props) {
 			}),
 			children,
 			onRemove && /* @__PURE__ */ require_jsx_runtime.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__ */ require_jsx_runtime.jsx(Text, {
-					text: closeLabel,
-					style: resolvedTextStyle
-				})
+				label: closeLabel,
+				textStyle: resolvedTextStyle
 			})
 		]
 	});
@@ -24290,6 +24579,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
@@ -24308,50 +24628,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__ */ require_jsx_runtime.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__ */ require_jsx_runtime.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
@@ -24391,7 +24722,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";
@@ -24628,7 +24960,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),
@@ -24743,38 +25075,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__ */ require_jsx_runtime.jsx(Text, {
+		text: props.label,
+		style: themed.labelStyle,
+		alpha: disabled ? disabledAlpha : 1
+	}) : null;
+	const handleClick = () => {
+		if (disabled) return;
+		props.onClick?.();
+	};
 	return /* @__PURE__ */ require_jsx_runtime.jsxs(View, {
 		direction: "row",
 		alignItems: "center",
-		enableGestures: true,
-		onTouch: () => props.onClick?.(),
+		enableGestures: !disabled,
+		onTouch: handleClick,
 		theme: nestedTheme,
-		gap: themed.gap,
-		children: [/* @__PURE__ */ require_jsx_runtime.jsx(View, {
-			width: size,
-			height: size,
-			backgroundColor: themed.color,
-			alignItems: "center",
-			justifyContent: "center",
-			backgroundAlpha: 1,
-			padding: 0,
-			cornerRadius: outerRadius,
-			children: /* @__PURE__ */ require_jsx_runtime.jsx(View, {
-				width: innerSize,
-				height: innerSize,
-				backgroundColor: themed.selectedColor,
-				visible: props.selected ?? false,
-				cornerRadius: innerRadius
-			})
-		}), /* @__PURE__ */ require_jsx_runtime.jsx(Text, {
-			text: props.label,
-			style: themed.labelStyle
-		})]
+		gap,
+		alpha: disabled ? disabledAlpha : 1,
+		children: [
+			labelPosition === "left" && label,
+			/* @__PURE__ */ require_jsx_runtime.jsx(View, {
+				width: size,
+				height: size,
+				...indicatorFillColor !== void 0 && { backgroundColor: indicatorFillColor },
+				borderColor: activeColor,
+				borderWidth,
+				alignItems: "center",
+				justifyContent: "center",
+				padding: 0,
+				cornerRadius: outerRadius,
+				children: /* @__PURE__ */ require_jsx_runtime.jsx(View, {
+					width: innerSize,
+					height: innerSize,
+					backgroundColor: selectedColor,
+					visible: selected,
+					cornerRadius: innerRadius
+				})
+			}),
+			labelPosition !== "left" && label
+		]
 	}, props.key);
 }
 //#endregion
@@ -24789,10 +25144,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__ */ require_jsx_runtime.jsx(View, {
@@ -24801,36 +25158,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__ */ require_jsx_runtime.jsxs(View, {
-				direction: "row",
-				gap: themed.gap,
-				alignItems: "center",
-				enableGestures: true,
-				onTouch: () => handleSelect(option.value),
-				children: [/* @__PURE__ */ require_jsx_runtime.jsx(View, {
-					width: size,
-					height: size,
-					backgroundColor: themed.color,
-					alignItems: "center",
-					justifyContent: "center",
-					backgroundAlpha: 1,
-					padding: 0,
-					cornerRadius: outerRadius,
-					children: /* @__PURE__ */ require_jsx_runtime.jsx(View, {
-						width: innerSize,
-						height: innerSize,
-						backgroundColor: themed.selectedColor,
-						visible: isSelected,
-						cornerRadius: innerRadius
-					})
-				}), /* @__PURE__ */ require_jsx_runtime.jsx(Text, {
-					text: option.label,
-					style: themed.labelStyle
-				})]
+			return /* @__PURE__ */ require_jsx_runtime.jsx(RadioButton, {
+				label: option.label,
+				selected: isSelected,
+				disabled: props.disabled ?? false,
+				onClick: () => handleSelect(option.value)
 			}, option.value);
 		})
 	});
@@ -25052,6 +25384,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];
@@ -25135,7 +25492,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);
@@ -25143,12 +25501,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);
@@ -25197,7 +25561,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;
@@ -25210,18 +25574,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__ */ require_jsx_runtime.jsxs(require_jsx_runtime.Fragment, { children: [/* @__PURE__ */ require_jsx_runtime.jsx(View, {
 		...props.triggerProps ?? {},
 		ref: triggerRef,
 		enableGestures: !props.disabled,
 		onTouch: toggleOpen,
 		children: props.trigger
-	}), isOpen && /* @__PURE__ */ require_jsx_runtime.jsxs(Portal, {
+	}), presence.isPresent && /* @__PURE__ */ require_jsx_runtime.jsxs(Portal, {
 		depth,
 		blockEvents: false,
 		children: [closeOnOutside && /* @__PURE__ */ require_jsx_runtime.jsx(View, {
@@ -25232,11 +25625,6 @@ function Popover(props) {
 			onTouch: close,
 			onTouchMove: (event) => event.stopPropagation()
 		}), /* @__PURE__ */ require_jsx_runtime.jsx(View, {
-			...contentProps,
-			ref: handleContentRef,
-			x: overlayPosition.x,
-			y: overlayPosition.y,
-			...props.matchTriggerWidth || explicitContentWidth !== void 0 ? { width: contentWidth } : {},
 			direction: "column",
 			backgroundColor: themed.backgroundColor ?? 1120295,
 			borderColor: themed.borderColor ?? 3359061,
@@ -25244,6 +25632,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,
@@ -25253,7 +25646,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;
@@ -25345,7 +25739,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;
@@ -27706,18 +28101,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;
@@ -27735,14 +28136,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");
@@ -27766,13 +28167,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 () => {
@@ -27781,9 +28182,9 @@ function CharTextInput(props) {
 		};
 	}, [
 		containerRef.current,
-		props.maxLength,
-		props.disabled,
-		props.multiline,
+		inputProps.maxLength,
+		inputProps.disabled,
+		inputProps.multiline,
 		isControlled
 	]);
 	/**
@@ -27812,11 +28213,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;
 		}
@@ -27934,10 +28335,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);
 		}
 	};
 	/**
@@ -27956,12 +28357,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__ */ require_jsx_runtime.jsx(CharText, {
 		forwardRef: (r) => containerRef.current = r,
 		...viewProps,
+		...focusedViewProps,
+		...disabledViewProps,
+		theme: nestedTheme,
 		text: displayText,
+		...textStyle !== void 0 && { textStyle },
 		showCursor: isFocused,
 		cursorPosition,
 		selectionStart,
@@ -27996,10 +28416,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;
@@ -28016,15 +28437,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;
@@ -28037,6 +28464,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) {
@@ -28047,6 +28475,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;
@@ -28094,12 +28523,14 @@ function ScrollSlider(props) {
 		width: isVertical ? outer : "100%",
 		height: isVertical ? "100%" : outer,
 		backgroundColor: themed.borderColor ?? 0,
+		cornerRadius: outerRadius,
 		padding: border,
 		children: /* @__PURE__ */ require_jsx_runtime.jsxs(View, {
 			ref: sliderRef,
 			width: isVertical ? dimension : "100%",
 			height: isVertical ? "100%" : dimension,
 			backgroundColor: themed.trackColor ?? 14540253,
+			cornerRadius: trackRadius,
 			direction: "stack",
 			padding: 0,
 			children: [/* @__PURE__ */ require_jsx_runtime.jsx(View, {
@@ -28108,6 +28539,7 @@ function ScrollSlider(props) {
 				x: 0,
 				y: 0,
 				backgroundColor: themed.trackColor ?? 11184810,
+				cornerRadius: trackRadius,
 				enableGestures: true,
 				onTouch: handleBackgroundTouch
 			}), /* @__PURE__ */ require_jsx_runtime.jsx(View, {
@@ -28115,7 +28547,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
 			})]
@@ -28134,7 +28569,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
@@ -28168,9 +28604,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);
@@ -28633,7 +29069,7 @@ function ScrollView(props) {
 					visible: showHorizontalSliderActual ? true : "none",
 					children: /* @__PURE__ */ require_jsx_runtime.jsx(ScrollSlider, {
 						direction: "horizontal",
-						size: props.sliderSize,
+						size: sliderSizeVariant,
 						scrollPosition: scroll.dx,
 						viewportSize: viewportWidth,
 						contentSize: contentWidth,
@@ -28650,7 +29086,7 @@ function ScrollView(props) {
 					flex: 1,
 					children: /* @__PURE__ */ require_jsx_runtime.jsx(ScrollSlider, {
 						direction: "vertical",
-						size: props.sliderSize,
+						size: sliderSizeVariant,
 						scrollPosition: scroll.dy,
 						viewportSize: viewportHeight,
 						contentSize: effectiveContentHeight,
@@ -28667,25 +29103,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__ */ require_jsx_runtime.jsx(View, {
+		x,
+		y,
+		width,
+		height,
+		padding: 0,
+		direction: "stack",
+		...outerViewProps,
+		children: /* @__PURE__ */ require_jsx_runtime.jsx(View, {
+			x: offsetX,
+			y: offsetY,
+			width,
+			height,
+			padding: 0,
+			direction: "stack",
+			...middleViewProps,
+			children: /* @__PURE__ */ require_jsx_runtime.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__ */ require_jsx_runtime.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__ */ require_jsx_runtime.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();
 		}
 	});
 }
@@ -28721,11 +29246,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;
@@ -28738,6 +29259,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;
@@ -28748,38 +29276,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];
@@ -28792,33 +29313,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__ */ require_jsx_runtime.jsx(Text, {
@@ -28846,10 +29340,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,
@@ -28870,27 +29363,40 @@ function Dropdown(props) {
 			theme: optionNestedTheme,
 			...optionStyle,
 			children: props.renderOption ? props.renderOption(option, isSelected) : /* @__PURE__ */ require_jsx_runtime.jsxs(require_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ require_jsx_runtime.jsx(DefaultOptionIndicator, {
+					selected: isSelected,
+					multiple: props.multiple === true,
+					disabled: isDisabled,
+					color: indicatorColor ?? 16777215,
+					size: indicatorSize,
+					strokeWidth: indicatorStrokeWidth
+				}),
 				option.prefix,
 				/* @__PURE__ */ require_jsx_runtime.jsx(Text, { text: option.label }),
 				option.suffix
 			] })
 		}, String(option.value));
 	});
-	const placement = props.placement ?? "bottom";
 	const trigger = /* @__PURE__ */ require_jsx_runtime.jsxs(View, {
 		ref: triggerRef,
 		direction: "row",
 		alignItems: "center",
 		justifyContent: "space-between",
-		enableGestures: !props.disabled,
-		onTouch: (data) => handleToggle(data),
 		...triggerStyle,
 		children: [/* @__PURE__ */ require_jsx_runtime.jsx(View, {
 			flex: 1,
 			children: renderSelectedValue()
-		}), props.arrow ? props.arrow : /* @__PURE__ */ require_jsx_runtime.jsx(DefaultArrow, {
-			color: arrowConfig.color ?? 16777215,
-			size: arrowConfig.size ?? 8
+		}), /* @__PURE__ */ require_jsx_runtime.jsx(TransformOriginView, {
+			width: arrowSize,
+			height: arrowSize,
+			rotation: arrowRotation.value,
+			originX: .5,
+			originY: .5,
+			children: props.arrow ? props.arrow : /* @__PURE__ */ require_jsx_runtime.jsx(DefaultArrow, {
+				color: arrowConfig.color ?? 16777215,
+				size: arrowSize,
+				strokeWidth: arrowConfig.strokeWidth ?? 2
+			})
 		})]
 	});
 	const filterInput = props.isFilterable && /* @__PURE__ */ require_jsx_runtime.jsx(CharTextInput, {
@@ -28908,7 +29414,7 @@ function Dropdown(props) {
 		width: "fill",
 		children: /* @__PURE__ */ require_jsx_runtime.jsx(ScrollView, {
 			ref: scrollViewRef,
-			showVerticalSlider: isAnimating ? false : "auto",
+			showVerticalSlider: "auto",
 			height: "fill",
 			width: "100%",
 			onTouch: () => {
@@ -28924,33 +29430,53 @@ function Dropdown(props) {
 		})
 	});
 	const overlay = /* @__PURE__ */ require_jsx_runtime.jsx(View, {
-		height: resolvedOverlayHeight,
-		width: overlayPosition.width,
+		direction: "column",
+		width: "fill",
+		height: maxHeight,
 		overflow: "hidden",
-		children: /* @__PURE__ */ require_jsx_runtime.jsx(View, {
-			ref: overlayRef,
-			direction: "column",
-			width: "fill",
-			height: "fill",
-			visible: isOpen || resolvedOverlayHeight > .1,
-			...overlayTheme,
-			children: placement === "top" ? /* @__PURE__ */ require_jsx_runtime.jsxs(require_jsx_runtime.Fragment, { children: [optionsList, filterInput] }) : /* @__PURE__ */ require_jsx_runtime.jsxs(require_jsx_runtime.Fragment, { children: [filterInput, optionsList] })
-		})
+		theme: nestedTheme,
+		...overlayTheme,
+		children: placement === "top" ? /* @__PURE__ */ require_jsx_runtime.jsxs(require_jsx_runtime.Fragment, { children: [optionsList, filterInput] }) : /* @__PURE__ */ require_jsx_runtime.jsxs(require_jsx_runtime.Fragment, { children: [filterInput, optionsList] })
 	});
+	const popoverTheme = {
+		...nestedTheme,
+		Popover: {
+			backgroundColor: 0,
+			backgroundAlpha: 0,
+			borderWidth: 0,
+			cornerRadius: 0,
+			padding: 0,
+			gap: 0
+		}
+	};
 	return /* @__PURE__ */ require_jsx_runtime.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__ */ require_jsx_runtime.jsx(View, {
-			ref: containerRef,
-			direction: "column",
-			width: props.width,
-			theme: nestedTheme,
-			enableGestures: true,
-			onTouchOutside: handleOutsideClick,
-			children: placement === "top" ? /* @__PURE__ */ require_jsx_runtime.jsxs(require_jsx_runtime.Fragment, { children: [overlay, trigger] }) : /* @__PURE__ */ require_jsx_runtime.jsxs(require_jsx_runtime.Fragment, { children: [trigger, overlay] })
-		}, `dropdown-${placement}`)
+		children: /* @__PURE__ */ require_jsx_runtime.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
@@ -30377,14 +30903,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;
@@ -30394,8 +30927,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;
@@ -30409,9 +30948,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
 	*/
@@ -30446,10 +31010,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);
@@ -30468,9 +31032,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
@@ -30479,6 +31041,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__ */ require_jsx_runtime.jsxs(View, {
 		direction: "stack",
@@ -30486,11 +31052,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__ */ require_jsx_runtime.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__ */ require_jsx_runtime.jsx(Graphics, {
 			ref: thumbRef,
@@ -30498,12 +31077,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__ */ require_jsx_runtime.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__ */ require_jsx_runtime.jsxs(View, {
 		ref: containerRef,
@@ -30533,63 +31119,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__ */ require_jsx_runtime.jsx(View, {
-		x,
-		y,
-		width,
-		height,
-		padding: 0,
-		direction: "stack",
-		...outerViewProps,
-		children: /* @__PURE__ */ require_jsx_runtime.jsx(View, {
-			x: offsetX,
-			y: offsetY,
-			width,
-			height,
-			padding: 0,
-			direction: "stack",
-			...middleViewProps,
-			children: /* @__PURE__ */ require_jsx_runtime.jsx(View, {
-				x: -offsetX,
-				y: -offsetY,
-				width,
-				height,
-				padding: 0,
-				direction: "stack",
-				backgroundAlpha: 0,
-				children
-			})
-		})
-	});
-}
-//#endregion
 Object.defineProperty(exports, "Accordion", {
 	enumerable: true,
 	get: function() {
@@ -31809,4 +32338,4 @@ Object.defineProperty(exports, "withHooks", {
 	}
 });
 
-//# sourceMappingURL=custom-37gL0VZG.cjs.map
+//# sourceMappingURL=custom-Bnit70lx.cjs.map