@tastic/hud 0.20.0 → 0.22.0

package/dist/index.js

@@ -200,10 +200,12 @@ __export(index_exports, {
   StatSection: () => StatSection,
   TriggerGaugeHost: () => TriggerGaugeHost,
   UpdateDialog: () => UpdateDialog,
+  WELL_SHADOW: () => WELL_SHADOW,
   getColorPopoverId: () => getColorPopoverId,
   getCpuDifficultyPopoverId: () => getCpuDifficultyPopoverId,
   getInlineColorPickerContentSize: () => getInlineColorPickerContentSize,
   getLabeledDropdownContentHeight: () => getLabeledDropdownContentHeight,
+  getProfilePopoverId: () => getProfilePopoverId,
   getStaggeredWordDuration: () => getStaggeredWordDuration,
   isCompactDialogHeight: () => isCompactDialogHeight,
   loadSkiaWeb: () => loadSkiaWeb,
@@ -214,6 +216,7 @@ __export(index_exports, {
   useOverlayCardColors: () => useOverlayCardColors,
   usePopoverHost: () => usePopoverHost,
   useQuitConfirmation: () => useQuitConfirmation,
+  useWellColors: () => useWellColors,
   useZoneClampedAlign: () => useZoneClampedAlign
 });
 module.exports = __toCommonJS(index_exports);
@@ -225,16 +228,25 @@ var import_react_native3 = require("react-native");
 var import_react_native_paper2 = require("react-native-paper");
 
 // src/AchievementRow.tsx
-var import_auto_paper = require("@rific/auto-paper");
 var import_react_native = require("react-native");
 var import_react_native_paper = require("react-native-paper");
+
+// src/wellSurface.ts
+var import_auto_paper = require("@rific/auto-paper");
+var WELL_SHADOW = "0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)";
+function useWellColors() {
+  const { colors } = (0, import_auto_paper.useAutoPaperTheme)();
+  return { bg: colors.surface, fg: colors.onSurface, fgMuted: colors.onSurfaceVariant };
+}
+
+// src/AchievementRow.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
 function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }) {
-  const { dark } = (0, import_auto_paper.useAutoPaperTheme)();
-  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
-  const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
-  const sectionBg = sectionBgOverride ?? (dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)");
+  const well = useWellColors();
+  const fg = fgOverride ?? well.fg;
+  const fgMuted = fgMutedOverride ?? well.fgMuted;
+  const sectionBg = sectionBgOverride ?? well.bg;
   const unlocked = unlockedLabel !== void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: [styles.row, { backgroundColor: sectionBg }], children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.badge, { backgroundColor: badgeColor }], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Icon, { source: icon, size: 20, color: unlocked ? "#000000" : fgMuted }) }),
@@ -277,6 +289,7 @@ var styles = import_react_native.StyleSheet.create({
   row: {
     alignItems: "center",
     borderRadius: 12,
+    boxShadow: WELL_SHADOW,
     flexDirection: "row",
     gap: 12,
     padding: 12
@@ -298,13 +311,13 @@ var MONO_FONT = import_react_native2.Platform.select({ ios: "Menlo", android: "m
 
 // src/AchievementCatalogSection.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function AchievementCatalogSection({ rows, label = "ALL ACHIEVEMENTS", fg, fgMuted: fgMutedOverride }) {
+function AchievementCatalogSection({ rows, label = "ALL ACHIEVEMENTS", fg, fgMuted: fgMutedOverride, sectionBg }) {
   const { dark } = (0, import_auto_paper2.useAutoPaperTheme)();
   const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
   const tierAccent = (tierColor) => dark ? tierColor : (0, import_auto_paper2.getBlendedColor)("#000000", tierColor, 0.5);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "labelMedium", style: [styles2.label, { color: fgMuted, fontFamily: MONO_FONT }], children: label }),
-    rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AchievementRow, { icon: row.icon, title: row.title, description: row.description, badgeColor: row.unlockedAt !== void 0 ? row.tierColor : LOCKED_BADGE_COLOR, checkColor: tierAccent(row.tierColor), unlockedLabel: row.unlockedLabel, progress: row.progress, deviceMarker: row.deviceMarker, fg, fgMuted: fgMutedOverride }, row.id))
+    rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AchievementRow, { icon: row.icon, title: row.title, description: row.description, badgeColor: row.unlockedAt !== void 0 ? row.tierColor : LOCKED_BADGE_COLOR, checkColor: tierAccent(row.tierColor), unlockedLabel: row.unlockedLabel, progress: row.progress, deviceMarker: row.deviceMarker, fg, fgMuted: fgMutedOverride, sectionBg }, row.id))
   ] });
 }
 var styles2 = import_react_native3.StyleSheet.create({
@@ -359,14 +372,13 @@ var styles3 = import_react_native4.StyleSheet.create({
 });
 
 // src/StatRow.tsx
-var import_auto_paper4 = require("@rific/auto-paper");
 var import_react_native5 = require("react-native");
 var import_react_native_paper4 = require("react-native-paper");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }) {
-  const { dark } = (0, import_auto_paper4.useAutoPaperTheme)();
-  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
-  const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
+  const well = useWellColors();
+  const fg = fgOverride ?? well.fg;
+  const fgMuted = fgMutedOverride ?? well.fgMuted;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native5.View, { style: styles4.row, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Text, { variant: "bodyMedium", style: { color: fgMuted }, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Text, { variant: "bodyMedium", style: [styles4.value, { color: fg }], children: value })
@@ -384,14 +396,13 @@ var styles4 = import_react_native5.StyleSheet.create({
 });
 
 // src/StatSection.tsx
-var import_auto_paper5 = require("@rific/auto-paper");
 var import_react_native6 = require("react-native");
 var import_react_native_paper5 = require("react-native-paper");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }) {
-  const { dark } = (0, import_auto_paper5.useAutoPaperTheme)();
-  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
-  const sectionBg = sectionBgOverride ?? (dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)");
+  const well = useWellColors();
+  const fg = fgOverride ?? well.fg;
+  const sectionBg = sectionBgOverride ?? well.bg;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native6.View, { style: [styles5.section, { backgroundColor: sectionBg }], children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper5.Text, { variant: "labelMedium", style: [styles5.label, { color: fg }], children: label }),
     children
@@ -408,6 +419,7 @@ var styles5 = import_react_native6.StyleSheet.create({
   },
   section: {
     borderRadius: 12,
+    boxShadow: WELL_SHADOW,
     gap: 8,
     padding: 16
   }
@@ -415,16 +427,16 @@ var styles5 = import_react_native6.StyleSheet.create({
 
 // src/ActivityStatSection.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function ActivityStatSection({ stats }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(StatSection, { label: "ACTIVITY", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatRow, { label: "Days Played", value: String(stats.distinctDaysPlayed) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatRow, { label: "Day Streak", value: String(stats.currentDayStreak) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatRow, { label: "Best Day Streak", value: String(stats.bestDayStreak) })
+function ActivityStatSection({ stats, fg, fgMuted, sectionBg }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(StatSection, { label: "ACTIVITY", fg, sectionBg, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatRow, { label: "Days Played", value: String(stats.distinctDaysPlayed), fg, fgMuted }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatRow, { label: "Day Streak", value: String(stats.currentDayStreak), fg, fgMuted }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatRow, { label: "Best Day Streak", value: String(stats.bestDayStreak), fg, fgMuted })
   ] });
 }
 
 // src/BaseSettingsDialog.tsx
-var import_auto_paper9 = require("@rific/auto-paper");
+var import_auto_paper7 = require("@rific/auto-paper");
 var import_feedback_press2 = require("@rific/feedback-press");
 var import_updater = require("@rific/updater");
 var import_core4 = require("@tastic/core");
@@ -434,7 +446,7 @@ var import_react_native_paper9 = require("react-native-paper");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 
 // src/ConfirmDialog.tsx
-var import_auto_paper8 = require("@rific/auto-paper");
+var import_auto_paper6 = require("@rific/auto-paper");
 var import_feedback_press = require("@rific/feedback-press");
 var import_core2 = require("@tastic/core");
 var import_react3 = require("react");
@@ -442,7 +454,7 @@ var import_react_native11 = require("react-native");
 var import_react_native_paper7 = require("react-native-paper");
 
 // src/DialogHeader.tsx
-var import_auto_paper6 = require("@rific/auto-paper");
+var import_auto_paper4 = require("@rific/auto-paper");
 var import_react_native7 = require("react-native");
 var import_react_native_paper6 = require("react-native-paper");
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -451,7 +463,7 @@ function isCompactDialogHeight(height) {
   return height < COMPACT_DIALOG_HEIGHT;
 }
 function DialogHeader({ icon, title, color, compact = false, style }) {
-  const { colors } = (0, import_auto_paper6.useAutoPaperTheme)();
+  const { colors } = (0, import_auto_paper4.useAutoPaperTheme)();
   const accent = color ?? colors.primary;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: [compact ? styles6.compact : styles6.full, style], children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper6.Icon, { source: icon, size: compact ? COMPACT_ICON_SIZE : ICON_SIZE, color: accent }),
@@ -548,11 +560,11 @@ var overlayActionStyles = import_react_native8.StyleSheet.create({
 });
 
 // src/OverlaySurface.tsx
-var import_auto_paper7 = require("@rific/auto-paper");
+var import_auto_paper5 = require("@rific/auto-paper");
 var import_react_native9 = require("react-native");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function useOverlayCardColors() {
-  const { colors } = (0, import_auto_paper7.useAutoPaperTheme)();
+  const { colors } = (0, import_auto_paper5.useAutoPaperTheme)();
   return { fg: colors.onSurface, fgMuted: colors.onSurfaceVariant, cardBorder: colors.outlineVariant, backdrop: colors.backdrop };
 }
 function OverlayBackdrop({ children, style, onLayout }) {
@@ -560,9 +572,9 @@ function OverlayBackdrop({ children, style, onLayout }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native9.View, { onLayout, style: [overlayStyles.overlay, { backgroundColor: backdrop }, style], children });
 }
 function OverlayCard({ children, style, ...rest }) {
-  const { isV3, roundness } = (0, import_auto_paper7.useAutoPaperTheme)();
-  const blur = (0, import_auto_paper7.useBlur)();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_auto_paper7.BlurView, { blur, style: [overlayStyles.card, styles7.card, { borderRadius: (isV3 ? 7 : 1) * roundness }, style], ...rest, children });
+  const { isV3, roundness } = (0, import_auto_paper5.useAutoPaperTheme)();
+  const blur = (0, import_auto_paper5.useBlur)();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_auto_paper5.BlurView, { blur, style: [overlayStyles.card, styles7.card, { borderRadius: (isV3 ? 7 : 1) * roundness }, style], ...rest, children });
 }
 var styles7 = import_react_native9.StyleSheet.create({
   card: { overflow: "hidden" }
@@ -588,7 +600,7 @@ function useCompactDialog(rotation = 0) {
 // src/ConfirmDialog.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation = 0, icon = "help-circle-outline", destructive = false }) {
-  const { colors } = (0, import_auto_paper8.useAutoPaperTheme)();
+  const { colors } = (0, import_auto_paper6.useAutoPaperTheme)();
   const { fg } = useOverlayCardColors();
   const { compact, onLayout } = useCompactDialog(rotation);
   const onCancelRef = (0, import_react3.useRef)(onCancel);
@@ -693,7 +705,7 @@ function SettingIcon({ source, color, containerColor }) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native13.View, { style: [styles10.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper9.Icon, { source, size: 18, color }) });
 }
 function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, keepAwake, onKeepAwakeChange, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, onShowHowToPlay, children }) {
-  const { colors } = (0, import_auto_paper9.useAutoPaperTheme)();
+  const { colors } = (0, import_auto_paper7.useAutoPaperTheme)();
   const ambientRotation = (0, import_core4.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
   const window = (0, import_react_native13.useWindowDimensions)();
@@ -706,8 +718,8 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
   const { settings: soundSettings, set: setSoundSettings } = (0, import_feedback_press2.useSoundSettings)();
   const sound = (0, import_react6.useContext)(import_feedback_press2.SoundContext);
   const { forceShort: forceHapticFeedback } = (0, import_feedback_press2.useVibration)();
-  const { settings: themeSettings, set: setThemeSettings } = (0, import_auto_paper9.useThemeSettings)();
-  const expoBlur = (0, import_auto_paper9.useBlurModule)();
+  const { settings: themeSettings, set: setThemeSettings } = (0, import_auto_paper7.useThemeSettings)();
+  const expoBlur = (0, import_auto_paper7.useBlurModule)();
   const [infoMessage, setInfoMessage] = (0, import_react6.useState)(null);
   const { manifest: updateManifest, onConfirm: onUpdateConfirm, respond: respondToUpdateConfirm } = useUpdateConfirmBridge();
   const { check, checking, updateReady } = (0, import_updater.useUpdater)({
@@ -730,8 +742,8 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
   const showUpdateCheck = import_react_native13.Platform.OS !== "web" && !hideUpdateCheck;
   if (!opened) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(RotatedFrame, { rotation, rotatedSafeArea: true, portalHost: true, passThrough: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_auto_paper9.Dialog, { visible, onDismiss, style: [styles10.dialog, { width: sheetWidth }], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_auto_paper9.Dialog.ScrollArea, { style: styles10.scrollArea, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_auto_paper9.FadingScrollView, { contentContainerStyle: styles10.scrollContent, showsVerticalScrollIndicator: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_auto_paper7.Dialog, { visible, onDismiss, style: [styles10.dialog, { width: sheetWidth }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_auto_paper7.Dialog.ScrollArea, { style: styles10.scrollArea, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_auto_paper7.FadingScrollView, { contentContainerStyle: styles10.scrollContent, showsVerticalScrollIndicator: false, children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogHeader, { icon: "cog", title: "Settings", compact: compactHeader }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.View, { style: styles10.content, children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.View, { style: styles10.toggleGroup, children: [
@@ -813,7 +825,7 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
           ] }),
           showAppearance && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.View, { style: styles10.section, children: [
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper9.Text, { variant: "labelMedium", style: [styles10.sectionLabel, { color: colors.onSurfaceVariant }], children: "APPEARANCE" }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_auto_paper9.AutoAppearancePicker, { showLabels: false }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_auto_paper7.AutoAppearancePicker, { showLabels: false }),
             showBlur && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => setThemeSettings({ blur: !themeSettings.blur }), style: styles10.toggleButton, accessibilityLabel: `Blur ${themeSettings.blur ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.View, { style: styles10.toggleContent, children: [
               /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SettingIcon, { source: themeSettings.blur ? "blur" : "blur-off", color: themeSettings.blur ? colors.tertiary : colors.onSurfaceVariant, containerColor: themeSettings.blur ? colors.tertiaryContainer : colors.surfaceVariant }),
               /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.View, { style: styles10.flexShrink, children: [
@@ -924,7 +936,7 @@ var styles10 = import_react_native13.StyleSheet.create({
 });
 
 // src/BaseStatsScreen.tsx
-var import_auto_paper10 = require("@rific/auto-paper");
+var import_auto_paper8 = require("@rific/auto-paper");
 var import_feedback_press3 = require("@rific/feedback-press");
 var import_core5 = require("@tastic/core");
 var import_react7 = require("react");
@@ -932,7 +944,7 @@ var import_react_native14 = require("react-native");
 var import_react_native_paper10 = require("react-native-paper");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", titleVariant = "headlineSmall", onBack, backLabel = "Back", hitSlop, insets, onReset, resetLabel = "Reset All Stats", resetConfirmTitle = "Reset Everything?", resetConfirmBody = "This permanently erases all stats and achievements. This cannot be undone.", fg: fgOverride, bg: bgOverride, children }) {
-  const { dark, colors } = (0, import_auto_paper10.useAutoPaperTheme)();
+  const { dark, colors } = (0, import_auto_paper8.useAutoPaperTheme)();
   const ambientRotation = (0, import_core5.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
   const [confirmResetVisible, setConfirmResetVisible] = (0, import_react7.useState)(false);
@@ -944,7 +956,7 @@ function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", t
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_paper10.Text, { variant: titleVariant, style: [styles11.title, { color: fg }], children: title })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native14.ScrollView, { style: styles11.scrollView, contentContainerStyle: [styles11.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_auto_paper8.FadingScrollView, { style: styles11.scrollView, contentContainerStyle: [styles11.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
       children,
       showReset && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_feedback_press3.Button, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.danger, textColor: colors.onDanger, style: styles11.resetButton, children: resetLabel })
     ] }),
@@ -985,7 +997,7 @@ var styles11 = import_react_native14.StyleSheet.create({
   resetButton: {
     marginTop: 16
   },
-  // Bounds the ScrollView to the space `container`'s flex:1 actually gives it - without this, a
+  // Bounds the scroller (FadingScrollView puts it on its outer box) to the space `container`'s flex:1 actually gives it - without this, a
   // ScrollView with only a contentContainerStyle isn't reliably height-constrained on native (it
   // can render at its full unclipped content height instead of the screen's), which leaves the
   // header's back button touch target unreliable underneath it.
@@ -1027,7 +1039,7 @@ var import_core9 = require("@tastic/core");
 var import_react_native20 = require("react-native");
 
 // src/SectionedDropdown.tsx
-var import_auto_paper11 = require("@rific/auto-paper");
+var import_auto_paper9 = require("@rific/auto-paper");
 var import_feedback_press4 = require("@rific/feedback-press");
 var import_core8 = require("@tastic/core");
 var import_react_native19 = require("react-native");
@@ -1188,8 +1200,8 @@ function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accen
   const ambientRotation = (0, import_core8.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
   const menuBg = dark ? "#000000" : "#FFFFFF";
-  const menuBorderColor = (0, import_auto_paper11.getBlendedColor)(mutedColor, menuBg, 0.5);
-  const resolvedOnAccentColor = onAccentColor ?? (0, import_auto_paper11.getColorRoles)(accentColor, menuBg).onColor;
+  const menuBorderColor = (0, import_auto_paper9.getBlendedColor)(mutedColor, menuBg, 0.5);
+  const resolvedOnAccentColor = onAccentColor ?? (0, import_auto_paper9.getColorRoles)(accentColor, menuBg).onColor;
   const fg = dark ? "#FFFFFF" : "#000000";
   const open = host.openId === id;
   const estimatedHeight = MENU_VERTICAL_PADDING + sections.reduce((sum, section, sectionIndex) => {
@@ -1430,7 +1442,7 @@ var styles17 = import_react_native22.StyleSheet.create({
 });
 
 // src/InlineColorPicker.tsx
-var import_auto_paper12 = require("@rific/auto-paper");
+var import_auto_paper10 = require("@rific/auto-paper");
 var import_feedback_press6 = require("@rific/feedback-press");
 var import_core10 = require("@tastic/core");
 var import_react_native23 = require("react-native");
@@ -1456,7 +1468,7 @@ function getInlineColorPickerContentSize(swatchCount, windowWidth, columns) {
   const height = SWATCHES_BORDER_WIDTH * 2 + SWATCHES_PADDING * 2 + SWATCH_SIZE * rows + SWATCHES_GAP * (rows - 1);
   return { width, height };
 }
-function InlineColorPicker({ id, host, value, onChange, previewValue, swatches = import_auto_paper12.defaultColors, takenValue, allowSwapTaken, dark, align: forcedAlign, alignOverride, rotation: rotationOverride, icon = "palette", tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }) {
+function InlineColorPicker({ id, host, value, onChange, previewValue, swatches = import_auto_paper10.defaultColors, takenValue, allowSwapTaken, dark, align: forcedAlign, alignOverride, rotation: rotationOverride, icon = "palette", tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }) {
   const ambientRotation = (0, import_core10.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
   const menuBg = dark ? "#000000" : "#FFFFFF";
@@ -1469,7 +1481,7 @@ function InlineColorPicker({ id, host, value, onChange, previewValue, swatches =
   const align = forcedAlign ?? placement.align;
   const displayFor = previewValue ?? ((hex) => hex);
   const displayValue = displayFor(value);
-  const contrastColor = (0, import_auto_paper12.getContrastColor)(displayValue);
+  const contrastColor = (0, import_auto_paper10.getContrastColor)(displayValue);
   const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : 0.4);
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native23.View, { style: [styles18.anchor, open && styles18.anchorOpen], children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_feedback_press6.TouchableRipple, { onPress: () => host.toggle(id), borderless: true, style: [styles18.trigger, { backgroundColor: displayValue, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native23.View, { ref: triggerRef, collapsable: false, style: styles18.triggerMeasure, children: tag ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_paper13.Text, { style: [styles18.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_paper13.Icon, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
@@ -1488,7 +1500,7 @@ function InlineColorPicker({ id, host, value, onChange, previewValue, swatches =
           },
           borderless: true,
           style: [styles18.swatch, { backgroundColor: swatchDisplay }, selected && styles18.swatchSelected, taken && !swappable && styles18.swatchTaken],
-          children: selected ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_paper13.Icon, { source: "check", size: 16, color: (0, import_auto_paper12.getContrastColor)(swatchDisplay) }) : swappable ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_paper13.Icon, { source: "swap-horizontal", size: 16, color: (0, import_auto_paper12.getContrastColor)(swatchDisplay) }) : taken ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_paper13.Icon, { source: "close", size: 16, color: (0, import_auto_paper12.getContrastColor)(swatchDisplay) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native23.View, {})
+          children: selected ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_paper13.Icon, { source: "check", size: 16, color: (0, import_auto_paper10.getContrastColor)(swatchDisplay) }) : swappable ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_paper13.Icon, { source: "swap-horizontal", size: 16, color: (0, import_auto_paper10.getContrastColor)(swatchDisplay) }) : taken ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_paper13.Icon, { source: "close", size: 16, color: (0, import_auto_paper10.getContrastColor)(swatchDisplay) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native23.View, {})
         },
         swatch.value
       );
@@ -1567,7 +1579,7 @@ var styles18 = import_react_native23.StyleSheet.create({
 });
 
 // src/LabeledDropdown.tsx
-var import_auto_paper13 = require("@rific/auto-paper");
+var import_auto_paper11 = require("@rific/auto-paper");
 var import_feedback_press7 = require("@rific/feedback-press");
 var import_react_native24 = require("react-native");
 var import_react_native_paper14 = require("react-native-paper");
@@ -1601,7 +1613,7 @@ function LabeledDropdown({ id, host, options, value, onChange, color, dark, alig
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native24.ScrollView, { style: [styles19.menu, { backgroundColor: menuBg, borderColor: color, width: POPOVER_WIDTH, maxHeight }], contentContainerStyle: styles19.menuContent, showsVerticalScrollIndicator: false, children: options.map((option) => {
       const isSelected = option.value === value;
-      const onColor = (0, import_auto_paper13.getContrastColor)(color);
+      const onColor = (0, import_auto_paper11.getContrastColor)(color);
       return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_feedback_press7.TouchableRipple, { onPress: () => handleSelect(option), style: [styles19.row, isSelected && { backgroundColor: color }], children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native24.View, { style: styles19.rowInner, children: [
         option.icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_paper14.Icon, { source: option.icon, size: 18, color: isSelected ? onColor : fg }),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_paper14.Text, { style: [styles19.rowLabel, { color: isSelected ? onColor : fg }], numberOfLines: 1, children: option.label })
@@ -1668,7 +1680,7 @@ function loadSkiaWeb() {
 
 // src/PlayerSetupPanel.tsx
 var import_profile2 = require("@tastic/profile");
-var import_react_native26 = require("react-native");
+var import_react_native27 = require("react-native");
 var import_react_native_paper16 = require("react-native-paper");
 
 // src/ReadyButton.tsx
@@ -1705,32 +1717,79 @@ function usePopoverHost() {
   return { openId, toggle, close };
 }
 
+// src/useZoneClampedAlign.ts
+var import_split_screen = require("@tastic/split-screen");
+var import_react12 = require("react");
+var import_react_native26 = require("react-native");
+var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
+var EDGE_MARGIN2 = 12;
+function useZoneClampedAlign(open, contentWidth, contentHeight, rotation = 0) {
+  const auto = useAutoAlign(open, contentWidth, contentHeight, rotation);
+  const zone = (0, import_split_screen.useZoneBounds)();
+  const { height: windowHeight } = (0, import_react_native26.useWindowDimensions)();
+  const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
+  const shouldMeasure = open && auto.measured && zone !== null;
+  const [ownBounds, setOwnBounds] = (0, import_react12.useState)(null);
+  const [prevShouldMeasure, setPrevShouldMeasure] = (0, import_react12.useState)(shouldMeasure);
+  if (shouldMeasure !== prevShouldMeasure) {
+    setPrevShouldMeasure(shouldMeasure);
+    setOwnBounds(null);
+  }
+  (0, import_react12.useEffect)(() => {
+    if (!shouldMeasure) return;
+    auto.triggerRef.current?.measureInWindow((_x, y, _width, height) => {
+      const belowShared = zone.zoneSide === "belowShared";
+      const awayRoom = belowShared ? windowHeight - insets.bottom - (y + height) - EDGE_MARGIN2 : y - insets.top - EDGE_MARGIN2;
+      const towardRoom = belowShared ? y - zone.sharedEdgeY - EDGE_MARGIN2 : zone.sharedEdgeY - (y + height) - EDGE_MARGIN2;
+      const useToward = contentHeight > awayRoom && towardRoom > awayRoom;
+      let awaySide = belowShared ? "below" : "above";
+      let towardSide = belowShared ? "above" : "below";
+      if (zone.rotated) {
+        awaySide = awaySide === "above" ? "below" : "above";
+        towardSide = towardSide === "above" ? "below" : "above";
+      }
+      setOwnBounds({ maxHeight: Math.max(useToward ? towardRoom : awayRoom, 0), verticalAlign: useToward ? towardSide : awaySide });
+    });
+  }, [shouldMeasure, zone, auto.triggerRef, contentHeight, windowHeight, insets.top, insets.bottom]);
+  if (!zone) return auto;
+  if (!ownBounds) return { ...auto, measured: false };
+  return { ...auto, maxHeight: ownBounds.maxHeight, measured: auto.measured, verticalAlign: ownBounds.verticalAlign };
+}
+
 // src/PlayerSetupPanel.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function getColorPopoverId(idPrefix) {
   return `${idPrefix}-color`;
 }
+function getProfilePopoverId(idPrefix) {
+  return `${idPrefix}-profile`;
+}
 function getCpuDifficultyPopoverId(idPrefix) {
   return `${idPrefix}-difficulty`;
 }
-function PlayerSetupPanel({ idPrefix, host, label, labelFontFamily, color, onColorChange, swatches, takenColor, allowSwapTaken, colorAlignOverride, colorRotation, isHuman, secondPicker, secondPickerId, ready, onToggleReady, dark, showReadyButton = true, profiles, selectedProfileId, takenProfileId, guestLabel, onProfileSelect, onManageProfiles, cpuDifficulty, cpuDifficultyOptions, onCpuDifficultyChange, cpuDifficultyAlignOverride, humanIcon = "face-man", cpuIcon = "robot" }) {
+function PlayerSetupPanel({ idPrefix, host, label, labelFontFamily, color, onColorChange, swatches, takenColor, allowSwapTaken, colorCaption, showColor = true, colorAlignOverride, colorRotation, isHuman, secondPicker, secondPickerId, ready, onToggleReady, dark, showReadyButton = true, profiles, selectedProfileId, takenProfileId, guestLabel, onProfileSelect, onManageProfiles, cpuDifficulty, cpuDifficultyOptions, onCpuDifficultyChange, humanIcon = "face-man", cpuIcon = "robot" }) {
   const ownHost = usePopoverHost();
   const popover = host ?? ownHost;
   const ownPopoverOpen = popover.openId?.startsWith(`${idPrefix}-`) ?? false;
   const pickerRowPopoverOpen = popover.openId === getColorPopoverId(idPrefix) || secondPickerId !== void 0 && popover.openId === secondPickerId;
   const showProfilePicker = isHuman && profiles !== void 0 && !!onProfileSelect;
   const showCpuDifficulty = !isHuman && cpuDifficulty !== void 0 && cpuDifficultyOptions !== void 0 && !!onCpuDifficultyChange;
+  const seatButton = showProfilePicker || showCpuDifficulty;
   const selectedProfile = profiles?.find((p) => p.id === selectedProfileId) ?? null;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native26.View, { style: [styles21.panel, ownPopoverOpen && styles21.panelOpen], children: [
-    showProfilePicker ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_profile2.ProfilePicker, { idPrefix, host: popover, profiles, selectedId: selectedProfileId ?? null, takenId: takenProfileId, color, dark, guestLabel: guestLabel ?? "GUEST", onSelect: (profile) => onProfileSelect?.(profile), onManage: onManageProfiles }) : showCpuDifficulty ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LabeledDropdown, { id: getCpuDifficultyPopoverId(idPrefix), host: popover, options: cpuDifficultyOptions, value: cpuDifficulty, onChange: onCpuDifficultyChange, color, dark, alignOverride: cpuDifficultyAlignOverride }) : label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native_paper16.Text, { variant: "labelSmall", style: { color, fontFamily: labelFontFamily }, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native26.View, { style: [styles21.pickerRow, pickerRowPopoverOpen && styles21.pickerRowOpen], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InlineColorPicker, { id: getColorPopoverId(idPrefix), host: popover, value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, alignOverride: colorAlignOverride, rotation: colorRotation, dark, tag: isHuman ? selectedProfile?.tag : void 0, icon: isHuman ? humanIcon : cpuIcon }),
+  const colorSection = showColor ? { value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, caption: showProfilePicker && selectedProfile ? colorCaption : void 0 } : void 0;
+  const seatPickerId = showProfilePicker ? getProfilePopoverId(idPrefix) : getCpuDifficultyPopoverId(idPrefix);
+  const seatPickerSize = showProfilePicker ? (0, import_profile2.getProfilePickerContentSize)(profiles.length, !!onManageProfiles, colorSection) : (0, import_profile2.getOptionPickerContentSize)(cpuDifficultyOptions?.length ?? 0, colorSection);
+  const seatPickerAlign = useZoneClampedAlign(seatButton && popover.openId === seatPickerId, seatPickerSize.width, seatPickerSize.height);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native27.View, { style: [styles21.panel, ownPopoverOpen && styles21.panelOpen], children: [
+    showProfilePicker ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_profile2.ProfilePicker, { idPrefix, host: popover, profiles, selectedId: selectedProfileId ?? null, takenId: takenProfileId, color, dark, guestLabel: guestLabel ?? "GUEST", onSelect: (profile) => onProfileSelect?.(profile), onManage: onManageProfiles, colorSection, alignOverride: seatPickerAlign }) : showCpuDifficulty ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_profile2.OptionPicker, { id: getCpuDifficultyPopoverId(idPrefix), host: popover, options: cpuDifficultyOptions, value: cpuDifficulty, onChange: onCpuDifficultyChange, color, dark, icon: cpuIcon, colorSection, alignOverride: seatPickerAlign }) : label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native_paper16.Text, { variant: "labelSmall", style: { color, fontFamily: labelFontFamily }, children: label }),
+    (!seatButton || secondPicker) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native27.View, { style: [styles21.pickerRow, pickerRowPopoverOpen && styles21.pickerRowOpen], children: [
+      !seatButton && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InlineColorPicker, { id: getColorPopoverId(idPrefix), host: popover, value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, alignOverride: colorAlignOverride, rotation: colorRotation, dark, tag: isHuman ? selectedProfile?.tag : void 0, icon: isHuman ? humanIcon : cpuIcon }),
       secondPicker
     ] }),
     isHuman && showReadyButton && onToggleReady && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ReadyButton, { color, ready: ready ?? false, onToggleReady })
   ] });
 }
-var styles21 = import_react_native26.StyleSheet.create({
+var styles21 = import_react_native27.StyleSheet.create({
   panel: {
     alignItems: "center",
     gap: 12
@@ -1741,9 +1800,9 @@ var styles21 = import_react_native26.StyleSheet.create({
   panelOpen: {
     zIndex: 100
   },
-  // Same gap as `panel`'s own vertical rhythm, reused horizontally - the color picker and (when
-  // present) secondPicker sit side by side within this row instead of stacked in the panel's own
-  // column.
+  // Same gap as `panel`'s own vertical rhythm, reused horizontally - the fallback color swatch and
+  // (when present) secondPicker sit side by side within this row instead of stacked in the panel's
+  // own column.
   pickerRow: {
     alignItems: "center",
     flexDirection: "row",
@@ -1762,20 +1821,20 @@ var styles21 = import_react_native26.StyleSheet.create({
 });
 
 // src/PressAwayOverlay.tsx
-var import_react_native27 = require("react-native");
+var import_react_native28 = require("react-native");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function PressAwayOverlay({ active, onPress, style }) {
   if (!active) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native27.Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [import_react_native27.StyleSheet.absoluteFill, style] });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native28.Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [import_react_native28.StyleSheet.absoluteFill, style] });
 }
 
 // src/SharedActionBand.tsx
 var import_feedback_press9 = require("@rific/feedback-press");
-var import_react_native28 = require("react-native");
+var import_react_native29 = require("react-native");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_native28.View, { style: [styles22.column, popoverOpen && styles22.columnOpen], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_native28.View, { style: styles22.actionsRow, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_native29.View, { style: [styles22.column, popoverOpen && styles22.columnOpen], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_native29.View, { style: styles22.actionsRow, children: [
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_feedback_press9.IconButton, { icon: "arrow-left", iconColor: fg, size: 20, onPress: onBack, accessibilityLabel: "Back" }),
       onRandomize && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_feedback_press9.IconButton, { icon: "dice-multiple", iconColor: fg, size: 18, onPress: onRandomize, accessibilityLabel: "Randomize match settings" }),
       onReset && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_feedback_press9.IconButton, { icon: "restore", iconColor: fg, size: 18, onPress: onReset, accessibilityLabel: "Reset match settings to defaults" }),
@@ -1784,7 +1843,7 @@ function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popove
     children
   ] });
 }
-var styles22 = import_react_native28.StyleSheet.create({
+var styles22 = import_react_native29.StyleSheet.create({
   actionsRow: {
     alignItems: "center",
     flexDirection: "row",
@@ -1800,8 +1859,8 @@ var styles22 = import_react_native28.StyleSheet.create({
 });
 
 // src/StaggeredWord.tsx
-var import_react12 = require("react");
-var import_react_native29 = require("react-native");
+var import_react13 = require("react");
+var import_react_native30 = require("react-native");
 var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"));
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var STAGGER_MS = 45;
@@ -1811,7 +1870,7 @@ function getStaggeredWordDuration(letterCount) {
 }
 function AnimatedLetter({ char, index, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }) {
   const progress = (0, import_react_native_reanimated2.useSharedValue)(reducedMotion ? 1 : 0);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (reducedMotion) return;
     progress.value = (0, import_react_native_reanimated2.withDelay)(index * STAGGER_MS, (0, import_react_native_reanimated2.withTiming)(1, { duration: LETTER_DURATION_MS, easing: import_react_native_reanimated2.Easing.out(import_react_native_reanimated2.Easing.back(1.5)) }));
   }, [reducedMotion]);
@@ -1822,9 +1881,9 @@ function AnimatedLetter({ char, index, color, reducedMotion, fontFamily, fontSiz
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native_reanimated2.default.Text, { allowFontScaling: false, style: [{ color, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, style], children: char });
 }
 function StaggeredWord({ word, color, fontFamily, fontSize, lineHeight, reducedMotion, startIndex = 0, fontWeight = "bold", letterSpacing, style, onLayout }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native29.View, { style: [styles23.row, style], onLayout, children: word.split("").map((char, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AnimatedLetter, { char, index: startIndex + i, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, i)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native30.View, { style: [styles23.row, style], onLayout, children: word.split("").map((char, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AnimatedLetter, { char, index: startIndex + i, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, i)) });
 }
-var styles23 = import_react_native29.StyleSheet.create({
+var styles23 = import_react_native30.StyleSheet.create({
   row: {
     flexDirection: "row"
   }
@@ -1841,63 +1900,24 @@ function UpdateDialog({ rotation = 0, autoCheck = true, autoPrompt = true, onErr
 }
 
 // src/useQuitConfirmation.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useQuitConfirmation(hasProgress, onConfirmedBack) {
-  const [confirmVisible, setConfirmVisible] = (0, import_react13.useState)(false);
-  const hasProgressRef = (0, import_react13.useRef)(hasProgress);
-  (0, import_react13.useEffect)(() => {
+  const [confirmVisible, setConfirmVisible] = (0, import_react14.useState)(false);
+  const hasProgressRef = (0, import_react14.useRef)(hasProgress);
+  (0, import_react14.useEffect)(() => {
     hasProgressRef.current = hasProgress;
   });
-  const onConfirmedBackRef = (0, import_react13.useRef)(onConfirmedBack);
-  (0, import_react13.useEffect)(() => {
+  const onConfirmedBackRef = (0, import_react14.useRef)(onConfirmedBack);
+  (0, import_react14.useEffect)(() => {
     onConfirmedBackRef.current = onConfirmedBack;
   });
-  const requestBack = (0, import_react13.useCallback)(() => {
+  const requestBack = (0, import_react14.useCallback)(() => {
     if (hasProgressRef.current()) setConfirmVisible(true);
     else onConfirmedBackRef.current();
   }, []);
-  const cancelBack = (0, import_react13.useCallback)(() => setConfirmVisible(false), []);
+  const cancelBack = (0, import_react14.useCallback)(() => setConfirmVisible(false), []);
   return { confirmVisible, requestBack, cancelBack };
 }
-
-// src/useZoneClampedAlign.ts
-var import_split_screen = require("@tastic/split-screen");
-var import_react14 = require("react");
-var import_react_native30 = require("react-native");
-var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
-var EDGE_MARGIN2 = 12;
-function useZoneClampedAlign(open, contentWidth, contentHeight, rotation = 0) {
-  const auto = useAutoAlign(open, contentWidth, contentHeight, rotation);
-  const zone = (0, import_split_screen.useZoneBounds)();
-  const { height: windowHeight } = (0, import_react_native30.useWindowDimensions)();
-  const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
-  const shouldMeasure = open && auto.measured && zone !== null;
-  const [ownBounds, setOwnBounds] = (0, import_react14.useState)(null);
-  const [prevShouldMeasure, setPrevShouldMeasure] = (0, import_react14.useState)(shouldMeasure);
-  if (shouldMeasure !== prevShouldMeasure) {
-    setPrevShouldMeasure(shouldMeasure);
-    setOwnBounds(null);
-  }
-  (0, import_react14.useEffect)(() => {
-    if (!shouldMeasure) return;
-    auto.triggerRef.current?.measureInWindow((_x, y, _width, height) => {
-      const belowShared = zone.zoneSide === "belowShared";
-      const awayRoom = belowShared ? windowHeight - insets.bottom - (y + height) - EDGE_MARGIN2 : y - insets.top - EDGE_MARGIN2;
-      const towardRoom = belowShared ? y - zone.sharedEdgeY - EDGE_MARGIN2 : zone.sharedEdgeY - (y + height) - EDGE_MARGIN2;
-      const useToward = contentHeight > awayRoom && towardRoom > awayRoom;
-      let awaySide = belowShared ? "below" : "above";
-      let towardSide = belowShared ? "above" : "below";
-      if (zone.rotated) {
-        awaySide = awaySide === "above" ? "below" : "above";
-        towardSide = towardSide === "above" ? "below" : "above";
-      }
-      setOwnBounds({ maxHeight: Math.max(useToward ? towardRoom : awayRoom, 0), verticalAlign: useToward ? towardSide : awaySide });
-    });
-  }, [shouldMeasure, zone, auto.triggerRef, contentHeight, windowHeight, insets.top, insets.bottom]);
-  if (!zone) return auto;
-  if (!ownBounds) return { ...auto, measured: false };
-  return { ...auto, maxHeight: ownBounds.maxHeight, measured: auto.measured, verticalAlign: ownBounds.verticalAlign };
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AchievementCatalogSection,
@@ -1933,10 +1953,12 @@ function useZoneClampedAlign(open, contentWidth, contentHeight, rotation = 0) {
   StatSection,
   TriggerGaugeHost,
   UpdateDialog,
+  WELL_SHADOW,
   getColorPopoverId,
   getCpuDifficultyPopoverId,
   getInlineColorPickerContentSize,
   getLabeledDropdownContentHeight,
+  getProfilePopoverId,
   getStaggeredWordDuration,
   isCompactDialogHeight,
   loadSkiaWeb,
@@ -1947,5 +1969,6 @@ function useZoneClampedAlign(open, contentWidth, contentHeight, rotation = 0) {
   useOverlayCardColors,
   usePopoverHost,
   useQuitConfirmation,
+  useWellColors,
   useZoneClampedAlign
 });