@tastic/hud 0.8.1 → 0.8.3

package/dist/index.js

@@ -72,7 +72,7 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
       if (mountProgress.value < 1) {
         const startFrac = i * MOUNT_STAGGER_MS / totalDurationMs;
         const endFrac = startFrac + MOUNT_DURATION_MS / totalDurationMs;
-        local = (0, import_core4.clamp)((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1);
+        local = (0, import_core5.clamp)((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1);
       }
       const sweep = dashAngleDeg * local;
       if (sweep <= 0) continue;
@@ -96,7 +96,7 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
         if (!isLitNow) continue;
         const startFrac = i * MOUNT_STAGGER_MS / totalDurationMs;
         const endFrac = startFrac + MOUNT_DURATION_MS / totalDurationMs;
-        local = (0, import_core4.clamp)((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1);
+        local = (0, import_core5.clamp)((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1);
       } else if (isLitNow === wasLit) {
         local = 1;
       } else if (isLitNow) {
@@ -120,19 +120,19 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
     height: canvasSize,
     width: canvasSize
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.View, { style: [styles7.container, gaugeSizeStyle], pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native_skia.Canvas, { style: canvasSizeStyle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native9.View, { style: [styles7.container, gaugeSizeStyle], pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native_skia.Canvas, { style: canvasSizeStyle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_skia.Path, { path: unlitPath, style: "stroke", strokeWidth: UNLIT_THICKNESS, strokeCap: "round", color: mutedColor, opacity: 0.35 }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_skia.Path, { path: litPath, style: "stroke", strokeWidth: LIT_THICKNESS, strokeCap: "round", color: accentColor, opacity: 1 })
   ] }) });
 }
-var import_react_native_skia, import_core4, import_react4, import_react_native8, import_react_native_reanimated, import_jsx_runtime8, UNLIT_THICKNESS, LIT_THICKNESS, DASH_GAP_PX, ARC_GAP, DEFAULT_START_DEG, MIN_DASH_ANGLE_DEG, MOUNT_DURATION_MS, MOUNT_STAGGER_MS, SELECTION_TRANSITION_DURATION_MS, styles7;
+var import_react_native_skia, import_core5, import_react4, import_react_native9, import_react_native_reanimated, import_jsx_runtime8, UNLIT_THICKNESS, LIT_THICKNESS, DASH_GAP_PX, ARC_GAP, DEFAULT_START_DEG, MIN_DASH_ANGLE_DEG, MOUNT_DURATION_MS, MOUNT_STAGGER_MS, SELECTION_TRANSITION_DURATION_MS, styles7;
 var init_TriggerGauge = __esm({
   "src/TriggerGauge.tsx"() {
     "use strict";
     import_react_native_skia = require("@shopify/react-native-skia");
-    import_core4 = require("@tastic/core");
+    import_core5 = require("@tastic/core");
     import_react4 = require("react");
-    import_react_native8 = require("react-native");
+    import_react_native9 = require("react-native");
     import_react_native_reanimated = require("react-native-reanimated");
     import_jsx_runtime8 = require("react/jsx-runtime");
     UNLIT_THICKNESS = 3;
@@ -144,7 +144,7 @@ var init_TriggerGauge = __esm({
     MOUNT_DURATION_MS = 450;
     MOUNT_STAGGER_MS = 40;
     SELECTION_TRANSITION_DURATION_MS = 260;
-    styles7 = import_react_native8.StyleSheet.create({
+    styles7 = import_react_native9.StyleSheet.create({
       container: {
         alignItems: "center",
         justifyContent: "center",
@@ -180,7 +180,9 @@ __export(index_exports, {
   StatSection: () => StatSection,
   TriggerGaugeHost: () => TriggerGaugeHost,
   getLabeledDropdownContentHeight: () => getLabeledDropdownContentHeight,
+  getOverlayCardColors: () => getOverlayCardColors,
   loadSkiaWeb: () => loadSkiaWeb,
+  overlayStyles: () => overlayStyles,
   useAutoAlign: () => useAutoAlign,
   usePopoverHost: () => usePopoverHost
 });
@@ -260,11 +262,44 @@ var import_feedback_press = require("@rific/feedback-press");
 var import_updater = require("@rific/updater");
 var import_core = require("@tastic/core");
 var import_react = require("react");
-var import_react_native2 = require("react-native");
+var import_react_native3 = require("react-native");
 var import_react_native_paper2 = require("react-native-paper");
+
+// src/overlayCard.ts
+var import_react_native2 = require("react-native");
+function getOverlayCardColors(dark) {
+  return {
+    fg: dark ? "#FFFFFF" : "#000000",
+    fgMuted: dark ? "rgba(255,255,255,0.4)" : "rgba(0,0,0,0.4)",
+    cardBg: dark ? "#111111" : "#F2F2F2",
+    cardBorder: dark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)"
+  };
+}
+var overlayStyles = import_react_native2.StyleSheet.create({
+  card: {
+    alignItems: "center",
+    borderRadius: 20,
+    borderWidth: 1,
+    gap: 16,
+    maxWidth: 360,
+    padding: 32
+  },
+  overlay: {
+    alignItems: "center",
+    backgroundColor: "rgba(0,0,0,0.72)",
+    bottom: 0,
+    justifyContent: "center",
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0
+  }
+});
+
+// src/BaseSettingsDialog.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function SettingIcon({ source, color, containerColor }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [styles2.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Icon, { source, size: 18, color }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { style: [styles2.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Icon, { source, size: 18, color }) });
 }
 function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, children }) {
   const { dark, colors } = (0, import_auto_paper2.useAutoPaperTheme)();
@@ -283,34 +318,32 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
     onInfo: (title, message) => setInfoMessage({ title, message })
   });
   const showLockOrientation = isTouchPrimary && lockOrientation !== void 0 && onLockOrientationChange !== void 0;
-  const showEdgeGuard = import_react_native2.Platform.OS === "ios" && deferBottomEdgeGestures !== void 0 && onDeferBottomEdgeGestures !== void 0;
-  const showHaptics = import_react_native2.Platform.OS !== "web" && !hideHaptics;
+  const showEdgeGuard = import_react_native3.Platform.OS === "ios" && deferBottomEdgeGestures !== void 0 && onDeferBottomEdgeGestures !== void 0;
+  const showHaptics = import_react_native3.Platform.OS !== "web" && !hideHaptics;
   const showSound = !hideSound;
   const showAppearance = !hideAppearance;
-  const showUpdateCheck = import_react_native2.Platform.OS !== "web" && !hideUpdateCheck;
-  const fg = dark ? "#FFFFFF" : "#000000";
-  const cardBg = dark ? "#111111" : "#F2F2F2";
-  const cardBorder = dark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)";
+  const showUpdateCheck = import_react_native3.Platform.OS !== "web" && !hideUpdateCheck;
+  const { fg, cardBg, cardBorder } = getOverlayCardColors(dark);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_auto_paper2.Dialog, { visible, onDismiss, style: [styles2.dialog, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_auto_paper2.Dialog, { visible, onDismiss, style: [styles2.dialog, (0, import_core.toRotationStyle)(rotation)], children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_auto_paper2.Dialog.Title, { children: "Settings" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_auto_paper2.Dialog.ScrollArea, { style: styles2.scrollArea, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.ScrollView, { contentContainerStyle: styles2.content, showsVerticalScrollIndicator: false, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles2.toggleGroup, children: [
-          showLockOrientation && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { onPress: () => onLockOrientationChange(!lockOrientation), style: styles2.toggleButton, accessibilityLabel: `Lock orientation ${lockOrientation ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles2.toggleContent, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_auto_paper2.Dialog.ScrollArea, { style: styles2.scrollArea, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.ScrollView, { contentContainerStyle: styles2.content, showsVerticalScrollIndicator: false, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles2.toggleGroup, children: [
+          showLockOrientation && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { onPress: () => onLockOrientationChange(!lockOrientation), style: styles2.toggleButton, accessibilityLabel: `Lock orientation ${lockOrientation ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles2.toggleContent, children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SettingIcon, { source: lockOrientation ? "lock" : "lock-open-variant-outline", color: lockOrientation ? colors.secondary : colors.onSurfaceVariant, containerColor: lockOrientation ? colors.secondaryContainer : colors.surfaceVariant }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles2.flexShrink, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles2.flexShrink, children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Lock Orientation" }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Pins the current layout" })
             ] })
           ] }) }),
-          showEdgeGuard && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { onPress: () => onDeferBottomEdgeGestures(!deferBottomEdgeGestures), style: styles2.toggleButton, accessibilityLabel: `Edge guard ${deferBottomEdgeGestures ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles2.toggleContent, children: [
+          showEdgeGuard && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { onPress: () => onDeferBottomEdgeGestures(!deferBottomEdgeGestures), style: styles2.toggleButton, accessibilityLabel: `Edge guard ${deferBottomEdgeGestures ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles2.toggleContent, children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SettingIcon, { source: deferBottomEdgeGestures ? "shield-check-outline" : "shield-off-outline", color: deferBottomEdgeGestures ? colors.secondary : colors.onSurfaceVariant, containerColor: deferBottomEdgeGestures ? colors.secondaryContainer : colors.surfaceVariant }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles2.flexShrink, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles2.flexShrink, children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Edge Guard" }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Requires a second swipe" })
             ] })
           ] }) }),
-          (showSound || showHaptics) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles2.toggleRow, children: [
+          (showSound || showHaptics) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles2.toggleRow, children: [
             showSound && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               import_feedback_press.TouchableRipple,
               {
@@ -322,7 +355,7 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
                 },
                 style: styles2.toggleButtonInRow,
                 accessibilityLabel: `Sound ${soundSettings.enabled ? "on" : "off"}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles2.toggleContent, children: [
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles2.toggleContent, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SettingIcon, { source: soundSettings.enabled ? "volume-high" : "volume-off", color: soundSettings.enabled ? colors.tertiary : colors.onSurfaceVariant, containerColor: soundSettings.enabled ? colors.tertiaryContainer : colors.surfaceVariant }),
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Sound" })
                 ] })
@@ -339,7 +372,7 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
                 },
                 style: styles2.toggleButtonInRow,
                 accessibilityLabel: `Haptics ${hapticSettings.vibrate ? "on" : "off"}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles2.toggleContent, children: [
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles2.toggleContent, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SettingIcon, { source: hapticSettings.vibrate ? "vibrate" : "vibrate-off", color: hapticSettings.vibrate ? colors.tertiary : colors.onSurfaceVariant, containerColor: hapticSettings.vibrate ? colors.tertiaryContainer : colors.surfaceVariant }),
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Haptics" })
                 ] })
@@ -347,12 +380,12 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
             )
           ] })
         ] }),
-        showAppearance && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles2.section, children: [
+        showAppearance && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles2.section, children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "labelMedium", style: [styles2.sectionLabel, { color: colors.onSurfaceVariant }], children: "APPEARANCE" }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_auto_paper2.AutoAppearancePicker, { showLabels: false })
         ] }),
         children,
-        showUpdateCheck && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles2.section, children: [
+        showUpdateCheck && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles2.section, children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native_paper2.Text, { variant: "labelSmall", style: [styles2.sectionLabel, { color: colors.onSurfaceVariant }], children: [
             "VERSION ",
             version,
@@ -362,7 +395,7 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
         ] })
       ] }) })
     ] }),
-    infoMessage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles2.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: [styles2.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }], children: [
+    infoMessage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { style: overlayStyles.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: [overlayStyles.card, { backgroundColor: cardBg, borderColor: cardBorder }, (0, import_core.toRotationStyle)(rotation)], children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Icon, { source: "information-outline", size: 64, color: colors.secondary }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "headlineLarge", style: [styles2.overlayTitle, { color: colors.secondary }], children: infoMessage.title }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "bodyLarge", style: [styles2.overlayBody, { color: fg }], children: infoMessage.message }),
@@ -370,7 +403,7 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
     ] }) }) })
   ] });
 }
-var styles2 = import_react_native2.StyleSheet.create({
+var styles2 = import_react_native3.StyleSheet.create({
   content: {
     gap: 24,
     paddingVertical: 20
@@ -392,26 +425,8 @@ var styles2 = import_react_native2.StyleSheet.create({
     justifyContent: "center",
     width: 36
   },
-  overlay: {
-    alignItems: "center",
-    backgroundColor: "rgba(0,0,0,0.72)",
-    bottom: 0,
-    justifyContent: "center",
-    left: 0,
-    position: "absolute",
-    right: 0,
-    top: 0
-  },
   overlayBody: { textAlign: "center" },
   overlayButton: { width: 160 },
-  overlayCard: {
-    alignItems: "center",
-    borderRadius: 20,
-    borderWidth: 1,
-    gap: 16,
-    maxWidth: 360,
-    padding: 32
-  },
   overlayTitle: { fontWeight: "bold" },
   scrollArea: {
     marginBottom: 0
@@ -459,56 +474,125 @@ var styles2 = import_react_native2.StyleSheet.create({
 });
 
 // src/BaseStatsScreen.tsx
+var import_auto_paper4 = require("@rific/auto-paper");
+var import_feedback_press3 = require("@rific/feedback-press");
+var import_core3 = require("@tastic/core");
+var import_react2 = require("react");
+var import_react_native5 = require("react-native");
+var import_react_native_paper4 = require("react-native-paper");
+
+// src/ConfirmDialog.tsx
 var import_auto_paper3 = require("@rific/auto-paper");
 var import_feedback_press2 = require("@rific/feedback-press");
 var import_core2 = require("@tastic/core");
-var import_react2 = require("react");
-var import_react_native3 = require("react-native");
+var import_react_native4 = require("react-native");
 var import_react_native_paper3 = require("react-native-paper");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", titleVariant = "headlineSmall", onBack, 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, cardBg: cardBgOverride, accentColor: accentColorOverride, children }) {
+function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation = 0, icon = "help-circle-outline", destructive = false }) {
   const { dark, colors } = (0, import_auto_paper3.useAutoPaperTheme)();
-  const ambientRotation = (0, import_core2.useRotation)();
+  if (!visible) return null;
+  const { fg, cardBg, cardBorder } = getOverlayCardColors(dark);
+  const accent = destructive ? colors.danger : colors.primary;
+  const onAccent = destructive ? colors.onDanger : colors.onPrimary;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native4.View, { style: [overlayStyles.overlay, styles3.overlay], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: [overlayStyles.card, styles3.card, { backgroundColor: cardBg, borderColor: cardBorder }, (0, import_core2.toRotationStyle)(rotation)], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Icon, { source: icon, size: 64, color: accent }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "headlineLarge", style: [styles3.title, { color: accent }], children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: [styles3.body, { color: fg }], children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: styles3.actions, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.Button, { mode: "outlined", onPress: onCancel, style: styles3.actionButton, children: cancelLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.Button, { mode: "contained", onPress: onConfirm, style: styles3.actionButton, buttonColor: accent, textColor: onAccent, children: confirmLabel })
+    ] })
+  ] }) }) });
+}
+var styles3 = import_react_native4.StyleSheet.create({
+  // flexBasis (not flex: 1's own 0%) is each button's real floor: whenever both fit side by side,
+  // flexGrow still splits any leftover width evenly beyond that floor, same visual result as the
+  // old flex: 1 on a roomy screen - but a button can never be squeezed narrower than 128, only
+  // wrap to its own row instead (see actions' flexWrap below). react-native-paper's Button
+  // hardcodes numberOfLines={1} on its label with no override, so a button squeezed under its
+  // label's natural width silently ellipsizes ("Cancel" -> "Can...") instead of wrapping - assumed
+  // fixable by just giving the row more width, until confirmed live that these two-word labels
+  // (Cancel/Reset/New Game) can still lose the truncation fight even with the extra room card's own
+  // width fix below provides, on a narrow enough screen. flexBasis is the real fix: past a certain
+  // width there's no side-by-side arrangement that fits both buttons at their natural label size,
+  // so the layout has to give (stack) rather than the label (truncate).
+  actionButton: {
+    flexBasis: 128,
+    flexGrow: 1
+  },
+  actions: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12,
+    width: "100%"
+  },
+  body: {
+    textAlign: "center"
+  },
+  // Additive on top of overlayCard's own shared `card` shape (borderRadius/borderWidth/gap/maxWidth/
+  // padding) — claims its full allowance instead of just maxWidth alone, which only caps how wide the
+  // card is allowed to get - without an explicit width, a flex-centered child sizes to its own content
+  // instead of stretching, so the card (and therefore actions below) can end up narrower than the
+  // screen actually has room for, needlessly forcing the action row to wrap sooner than it has to.
+  card: {
+    width: "100%"
+  },
+  // Additive on top of overlayCard's own shared `overlay` backdrop — gives the card room to breathe
+  // from the screen edges now that it reliably stretches to fill its full width allowance (see
+  // card's own width comment) - without this, width: '100%' would run the card edge-to-edge on a
+  // screen narrower than maxWidth's own 360.
+  overlay: {
+    paddingHorizontal: 24
+  },
+  // textAlign is load-bearing, not decorative, once `title` wraps to more than one line - centered
+  // within card's own alignItems: 'center' only centers the Text's block as a whole; each wrapped
+  // line inside that block still defaults to left-aligned without this.
+  title: {
+    fontWeight: "bold",
+    textAlign: "center"
+  }
+});
+
+// src/BaseStatsScreen.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", titleVariant = "headlineSmall", onBack, 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_paper4.useAutoPaperTheme)();
+  const ambientRotation = (0, import_core3.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
   const [confirmResetVisible, setConfirmResetVisible] = (0, import_react2.useState)(false);
   const showReset = !!onReset;
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const bg = bgOverride ?? (dark ? "#000000" : "#FFFFFF");
-  const cardBg = cardBgOverride ?? (dark ? "#111111" : "#F2F2F2");
-  const cardBorder = dark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)";
-  const accentColor = accentColorOverride ?? colors.secondary;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: [styles3.container, { backgroundColor: bg }], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: [styles3.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: onBack }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: titleVariant, style: [styles3.title, { color: fg }], children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native5.View, { style: [styles4.container, { backgroundColor: bg }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native5.View, { style: [styles4.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: onBack }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Text, { variant: titleVariant, style: [styles4.title, { color: fg }], children: title })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.ScrollView, { style: styles3.scrollView, contentContainerStyle: [styles3.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native5.ScrollView, { style: styles4.scrollView, contentContainerStyle: [styles4.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
       children,
-      showReset && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.Button, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.secondary, textColor: colors.onSecondary, style: styles3.resetButton, children: resetLabel })
+      showReset && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press3.Button, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.danger, textColor: colors.onDanger, style: styles4.resetButton, children: resetLabel })
     ] }),
-    confirmResetVisible && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [styles3.overlay, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: [styles3.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Icon, { source: "alert-outline", size: 64, color: accentColor }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "headlineLarge", style: [styles3.overlayTitle, { color: accentColor }], children: resetConfirmTitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: [styles3.overlayBody, { color: fg }], children: resetConfirmBody }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.Button, { mode: "contained", onPress: () => setConfirmResetVisible(false), style: styles3.overlayButton, children: "Cancel" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_feedback_press2.Button,
-        {
-          mode: "contained",
-          onPress: () => {
-            onReset?.();
-            setConfirmResetVisible(false);
-          },
-          style: styles3.overlayButton,
-          buttonColor: colors.secondary,
-          textColor: colors.onSecondary,
-          children: "Reset"
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ConfirmDialog,
+      {
+        visible: confirmResetVisible,
+        title: resetConfirmTitle,
+        message: resetConfirmBody,
+        confirmLabel: "Reset",
+        cancelLabel: "Cancel",
+        icon: "alert-outline",
+        destructive: true,
+        rotation,
+        onCancel: () => setConfirmResetVisible(false),
+        onConfirm: () => {
+          onReset?.();
+          setConfirmResetVisible(false);
         }
-      )
-    ] }) }) })
+      }
+    )
   ] });
 }
-var styles3 = import_react_native3.StyleSheet.create({
+var styles4 = import_react_native5.StyleSheet.create({
   container: {
     flex: 1
   },
@@ -522,30 +606,6 @@ var styles3 = import_react_native3.StyleSheet.create({
     gap: 4,
     paddingBottom: 8
   },
-  // Same overlay shape BaseSettingsDialog's own info overlay uses (backdrop + centered card),
-  // rotated in place the same way rather than via Portal-root transform for the same reason — see
-  // that component's own identical styles for the full rationale.
-  overlay: {
-    alignItems: "center",
-    backgroundColor: "rgba(0,0,0,0.72)",
-    bottom: 0,
-    justifyContent: "center",
-    left: 0,
-    position: "absolute",
-    right: 0,
-    top: 0
-  },
-  overlayBody: { textAlign: "center" },
-  overlayButton: { width: 160 },
-  overlayCard: {
-    alignItems: "center",
-    borderRadius: 20,
-    borderWidth: 1,
-    gap: 16,
-    maxWidth: 360,
-    padding: 32
-  },
-  overlayTitle: { fontWeight: "bold", marginBottom: -8 },
   resetButton: {
     marginTop: 16
   },
@@ -562,79 +622,20 @@ var styles3 = import_react_native3.StyleSheet.create({
   }
 });
 
-// src/ConfirmDialog.tsx
-var import_auto_paper4 = require("@rific/auto-paper");
-var import_feedback_press3 = require("@rific/feedback-press");
-var import_react_native4 = require("react-native");
-var import_react_native_paper4 = require("react-native-paper");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation = 0, icon = "help-circle-outline", destructive = false }) {
-  const { dark, colors } = (0, import_auto_paper4.useAutoPaperTheme)();
-  if (!visible) return null;
-  const fg = dark ? "#FFFFFF" : "#000000";
-  const cardBg = dark ? "#111111" : "#F2F2F2";
-  const cardBorder = dark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)";
-  const accent = destructive ? colors.danger : colors.primary;
-  const onAccent = destructive ? colors.onDanger : colors.onPrimary;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: styles4.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: [styles4.card, { backgroundColor: cardBg, borderColor: cardBorder }, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Icon, { source: icon, size: 64, color: accent }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Text, { variant: "headlineLarge", style: [styles4.title, { color: accent }], children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Text, { variant: "bodyLarge", style: [styles4.body, { color: fg }], children: message }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: styles4.actions, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press3.Button, { mode: "outlined", onPress: onCancel, style: styles4.actionButton, children: cancelLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press3.Button, { mode: "contained", onPress: onConfirm, style: styles4.actionButton, buttonColor: accent, textColor: onAccent, children: confirmLabel })
-    ] })
-  ] }) }) });
-}
-var styles4 = import_react_native4.StyleSheet.create({
-  actionButton: {
-    flex: 1
-  },
-  actions: {
-    flexDirection: "row",
-    gap: 12,
-    width: "100%"
-  },
-  body: {
-    textAlign: "center"
-  },
-  card: {
-    alignItems: "center",
-    borderRadius: 20,
-    borderWidth: 1,
-    gap: 16,
-    maxWidth: 360,
-    padding: 32
-  },
-  overlay: {
-    alignItems: "center",
-    backgroundColor: "rgba(0,0,0,0.72)",
-    bottom: 0,
-    justifyContent: "center",
-    left: 0,
-    position: "absolute",
-    right: 0,
-    top: 0
-  },
-  title: {
-    fontWeight: "bold"
-  }
-});
-
 // src/ContentGutter.tsx
-var import_core3 = require("@tastic/core");
-var import_react_native5 = require("react-native");
+var import_core4 = require("@tastic/core");
+var import_react_native6 = require("react-native");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }) {
-  const { width: windowWidth } = (0, import_react_native5.useWindowDimensions)();
-  const { contentWidth, gutterWidth } = (0, import_core3.computeContentBounds)(windowWidth, maxContentWidth ?? Infinity);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: [styles5.row, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style: [styles5.gutter, { width: gutterWidth }], children: leftGutter }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style: { width: contentWidth }, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style: [styles5.gutter, { width: gutterWidth }], children: rightGutter })
+  const { width: windowWidth } = (0, import_react_native6.useWindowDimensions)();
+  const { contentWidth, gutterWidth } = (0, import_core4.computeContentBounds)(windowWidth, maxContentWidth ?? Infinity);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native6.View, { style: [styles5.row, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native6.View, { style: [styles5.gutter, { width: gutterWidth }], children: leftGutter }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native6.View, { style: { width: contentWidth }, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native6.View, { style: [styles5.gutter, { width: gutterWidth }], children: rightGutter })
   ] });
 }
-var styles5 = import_react_native5.StyleSheet.create({
+var styles5 = import_react_native6.StyleSheet.create({
   // overflow:'hidden' keeps an oversized leftGutter/rightGutter from bleeding into the content
   // column instead of clipping cleanly at its own real width.
   gutter: {
@@ -646,22 +647,22 @@ var styles5 = import_react_native5.StyleSheet.create({
 });
 
 // src/ControlSchemePicker.tsx
-var import_core6 = require("@tastic/core");
-var import_react_native11 = require("react-native");
+var import_core7 = require("@tastic/core");
+var import_react_native12 = require("react-native");
 
 // src/SectionedDropdown.tsx
 var import_auto_paper5 = require("@rific/auto-paper");
 var import_feedback_press4 = require("@rific/feedback-press");
-var import_core5 = require("@tastic/core");
-var import_react_native10 = require("react-native");
+var import_core6 = require("@tastic/core");
+var import_react_native11 = require("react-native");
 var import_react_native_paper5 = require("react-native-paper");
 
 // src/fonts.ts
-var import_react_native6 = require("react-native");
-var MONO_FONT = import_react_native6.Platform.select({ ios: "Menlo", android: "monospace", default: "monospace" });
+var import_react_native7 = require("react-native");
+var MONO_FONT = import_react_native7.Platform.select({ ios: "Menlo", android: "monospace", default: "monospace" });
 
 // src/PopoverBody.tsx
-var import_react_native7 = require("react-native");
+var import_react_native8 = require("react-native");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var CARET_SIZE = 7;
 var CARET_RING_OFFSET = 2;
@@ -676,15 +677,15 @@ function PopoverBody({ visible, children, align = "center", verticalAlign = "bel
   const caretFill = above ? "borderTopColor" : "borderBottomColor";
   const caretWidthProp = above ? "borderTopWidth" : "borderBottomWidth";
   const caretEdge = (size) => above ? { bottom: -size + CARET_DIP } : { top: -size + CARET_DIP };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native7.View, { style: [styles6.content, alignStyle, verticalStyle], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native8.View, { style: [styles6.content, alignStyle, verticalStyle], children: [
     children,
     caretColor && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native7.View, { style: [styles6.caret, caretOffset(ringSize), caretEdge(ringSize), { [caretFill]: caretBorderColor ?? caretColor, [caretWidthProp]: ringSize, borderLeftWidth: ringSize, borderRightWidth: ringSize }] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native7.View, { style: [styles6.caret, caretOffset(CARET_SIZE), caretEdge(CARET_SIZE - CARET_RING_OFFSET), { [caretFill]: caretColor, [caretWidthProp]: CARET_SIZE, borderLeftWidth: CARET_SIZE, borderRightWidth: CARET_SIZE }] })
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native8.View, { style: [styles6.caret, caretOffset(ringSize), caretEdge(ringSize), { [caretFill]: caretBorderColor ?? caretColor, [caretWidthProp]: ringSize, borderLeftWidth: ringSize, borderRightWidth: ringSize }] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native8.View, { style: [styles6.caret, caretOffset(CARET_SIZE), caretEdge(CARET_SIZE - CARET_RING_OFFSET), { [caretFill]: caretColor, [caretWidthProp]: CARET_SIZE, borderLeftWidth: CARET_SIZE, borderRightWidth: CARET_SIZE }] })
     ] })
   ] });
 }
-var styles6 = import_react_native7.StyleSheet.create({
+var styles6 = import_react_native8.StyleSheet.create({
   caret: {
     borderLeftColor: "transparent",
     borderRightColor: "transparent",
@@ -753,7 +754,7 @@ function TriggerGaugeHost(props) {
 
 // src/useAutoAlign.ts
 var import_react5 = require("react");
-var import_react_native9 = require("react-native");
+var import_react_native10 = require("react-native");
 var EDGE_MARGIN = 12;
 function rotateRect(x, y, width, height, rotation, windowWidth, windowHeight) {
   if (rotation === 0) return { x, y, width, height };
@@ -766,7 +767,7 @@ function rotateRect(x, y, width, height, rotation, windowWidth, windowHeight) {
 }
 function useAutoAlign(open, contentWidth, contentHeight, rotation = 0) {
   const triggerRef = (0, import_react5.useRef)(null);
-  const { width: windowWidth, height: windowHeight } = (0, import_react_native9.useWindowDimensions)();
+  const { width: windowWidth, height: windowHeight } = (0, import_react_native10.useWindowDimensions)();
   const [align, setAlign] = (0, import_react5.useState)("center");
   const [verticalAlign, setVerticalAlign] = (0, import_react5.useState)("below");
   const [maxHeight, setMaxHeight] = (0, import_react5.useState)(contentHeight);
@@ -812,7 +813,7 @@ var MENU_ITEM_HEIGHT_WITH_DESCRIPTION = 58;
 var MENU_DIVIDER_HEIGHT = 9;
 var MENU_VERTICAL_PADDING = 12;
 function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, rotation: rotationOverride, autoDismiss = true, labelFontFamily = MONO_FONT, allClearLabels = { all: "All", clear: "Clear" } }) {
-  const ambientRotation = (0, import_core5.useRotation)();
+  const ambientRotation = (0, import_core6.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
   const menuBg = dark ? "#000000" : "#FFFFFF";
   const menuBorderColor = (0, import_auto_paper5.getBlendedColor)(mutedColor, menuBg, 0.5);
@@ -851,13 +852,13 @@ function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accen
   const anchorStyle = [styles8.anchor, open && styles8.anchorOpen];
   const menuStyle = { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight };
   const dividerStyle = { backgroundColor: menuBorderColor };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native10.View, { style: anchorStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native10.View, { ref: triggerRef, collapsable: false, style: styles8.triggerBox, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native11.View, { style: anchorStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native11.View, { ref: triggerRef, collapsable: false, style: styles8.triggerBox, children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TriggerGaugeHost, { segments: gaugeSegments, litIndices: gaugeLitIndices, size: TRIGGER_SIZE, accentColor, mutedColor }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press4.IconButton, { icon: triggerIcon, iconColor: triggerIconColor, size: triggerIconSize, accessibilityLabel, onPress: () => host.toggle(id) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native10.ScrollView, { style: [styles8.menu, menuStyle], contentContainerStyle: styles8.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native10.View, { children: [
-      sectionIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native10.View, { style: [styles8.divider, dividerStyle] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native11.ScrollView, { style: [styles8.menu, menuStyle], contentContainerStyle: styles8.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native11.View, { children: [
+      sectionIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native11.View, { style: [styles8.divider, dividerStyle] }),
       section.kind === "single" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         SingleSection,
         {
@@ -890,9 +891,9 @@ function SingleSection({
     const itemStyle = [styles8.item, selected && { backgroundColor: accentColor }, taken && styles8.itemTaken];
     const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
     const descriptionStyle = { fontFamily: labelFontFamily, color: rowColor };
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press4.TouchableRipple, { disabled: taken, onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native10.View, { style: styles8.itemRow, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press4.TouchableRipple, { disabled: taken, onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native11.View, { style: styles8.itemRow, children: [
       option.icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper5.Icon, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native10.View, { style: styles8.itemLabelColumn, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native11.View, { style: styles8.itemLabelColumn, children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper5.Text, { variant: "labelLarge", style: labelStyle, children: option.label }),
         option.description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper5.Text, { variant: "labelSmall", style: descriptionStyle, children: option.description })
       ] })
@@ -916,7 +917,7 @@ function MultiSection({
       const nextSelected = selected && i < section.options.length - 1 && section.value.includes(section.options[i + 1].value);
       const itemStyle = [styles8.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }];
       const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press4.TouchableRipple, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native10.View, { style: styles8.itemRow, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press4.TouchableRipple, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native11.View, { style: styles8.itemRow, children: [
         option.icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper5.Icon, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper5.Text, { variant: "labelLarge", style: [styles8.itemLabelFlex, labelStyle], children: option.label })
       ] }) }, option.value);
@@ -924,7 +925,7 @@ function MultiSection({
     section.allClear && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press4.TouchableRipple, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles8.item, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper5.Text, { variant: "labelLarge", style: [styles8.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })
   ] });
 }
-var styles8 = import_react_native10.StyleSheet.create({
+var styles8 = import_react_native11.StyleSheet.create({
   allClearLabel: {
     fontWeight: "bold",
     textAlign: "center"
@@ -941,7 +942,7 @@ var styles8 = import_react_native10.StyleSheet.create({
     zIndex: 100
   },
   divider: {
-    height: import_react_native10.StyleSheet.hairlineWidth,
+    height: import_react_native11.StyleSheet.hairlineWidth,
     marginVertical: 4
   },
   item: {
@@ -996,14 +997,14 @@ var styles8 = import_react_native10.StyleSheet.create({
 // src/ControlSchemePicker.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function ControlSchemePicker({ id, host, value, onChange, options, takenValue, accentColor, mutedColor, onAccentColor, dark, align, labelFontFamily }) {
-  const isTouchPrimary = (0, import_core6.useIsTouchPrimaryDevice)();
-  if (import_react_native11.Platform.OS !== "web" || isTouchPrimary) return null;
+  const isTouchPrimary = (0, import_core7.useIsTouchPrimaryDevice)();
+  if (import_react_native12.Platform.OS !== "web" || isTouchPrimary) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SectionedDropdown, { id, host, icon: "keyboard-outline", accessibilityLabel: "Control scheme", sections: [{ kind: "single", id: "controls", options, value, onChange, takenValue }], accentColor, mutedColor, onAccentColor, dark, align, labelFontFamily });
 }
 
 // src/CornerActionButtons.tsx
 var import_feedback_press5 = require("@rific/feedback-press");
-var import_react_native12 = require("react-native");
+var import_react_native13 = require("react-native");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = "arrow-left", backLabel = "Back" }) {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
@@ -1011,7 +1012,7 @@ function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = "arrow
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_feedback_press5.IconButton, { icon: "cog", iconColor: fg, size: 24, style: [styles9.topRight, { top: 8 + insets.top, right: 8 + insets.right }], onPress: onSettings, accessibilityLabel: "Settings" })
   ] });
 }
-var styles9 = import_react_native12.StyleSheet.create({
+var styles9 = import_react_native13.StyleSheet.create({
   back: {
     position: "absolute"
   },
@@ -1021,22 +1022,22 @@ var styles9 = import_react_native12.StyleSheet.create({
 });
 
 // src/CornerStatusBadges.tsx
-var import_react_native13 = require("react-native");
+var import_react_native14 = require("react-native");
 var import_react_native_paper6 = require("react-native-paper");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var BADGE_SIZE = 30;
 function StatusBadge({ icon }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native13.View, { style: styles10.badge, children: icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_paper6.Icon, { source: icon, size: 16, color: "rgba(255,255,255,0.85)" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native14.View, { style: styles10.badge, children: icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_paper6.Icon, { source: icon, size: 16, color: "rgba(255,255,255,0.85)" }) });
 }
 function CornerStatusBadges({ orientationMode, p1OnRight, p1, p2 }) {
   const p1OnRightSide = orientationMode === "sideBySide" && p1OnRight;
   const p2OnLeftSide = orientationMode === "sideBySide" && !p1OnRight;
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    p1 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native13.View, { pointerEvents: "none", style: p1OnRightSide ? styles10.bottomRight : styles10.bottomLeft, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StatusBadge, { icon: p1.icon }) }),
-    p2 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native13.View, { pointerEvents: "none", style: p2OnLeftSide ? styles10.topLeft : styles10.topRight, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StatusBadge, { icon: p2.icon }) })
+    p1 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native14.View, { pointerEvents: "none", style: p1OnRightSide ? styles10.bottomRight : styles10.bottomLeft, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StatusBadge, { icon: p1.icon }) }),
+    p2 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native14.View, { pointerEvents: "none", style: p2OnLeftSide ? styles10.topLeft : styles10.topRight, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StatusBadge, { icon: p2.icon }) })
   ] });
 }
-var styles10 = import_react_native13.StyleSheet.create({
+var styles10 = import_react_native14.StyleSheet.create({
   badge: {
     alignItems: "center",
     backgroundColor: "rgba(0,0,0,0.28)",
@@ -1057,8 +1058,8 @@ var styles10 = import_react_native13.StyleSheet.create({
 // src/InlineColorPicker.tsx
 var import_auto_paper6 = require("@rific/auto-paper");
 var import_feedback_press6 = require("@rific/feedback-press");
-var import_core7 = require("@tastic/core");
-var import_react_native14 = require("react-native");
+var import_core8 = require("@tastic/core");
+var import_react_native15 = require("react-native");
 var import_react_native_paper7 = require("react-native-paper");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
@@ -1074,11 +1075,11 @@ function widthForColumns(columns) {
   return SWATCHES_BORDER_WIDTH * 2 + SWATCHES_PADDING * 2 + SWATCH_SIZE * columns + SWATCHES_GAP * (columns - 1);
 }
 function InlineColorPicker({ id, host, value, onChange, previewValue, swatches = import_auto_paper6.defaultColors, takenValue, allowSwapTaken, dark, align: alignOverride, rotation: rotationOverride, icon = "palette", tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }) {
-  const ambientRotation = (0, import_core7.useRotation)();
+  const ambientRotation = (0, import_core8.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
   const menuBg = dark ? "#000000" : "#FFFFFF";
-  const { width: windowWidth } = (0, import_react_native14.useWindowDimensions)();
-  const autoColumns = (0, import_core7.clamp)(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS);
+  const { width: windowWidth } = (0, import_react_native15.useWindowDimensions)();
+  const autoColumns = (0, import_core8.clamp)(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS);
   const resolvedColumns = columns ?? autoColumns;
   const swatchesWidth = widthForColumns(resolvedColumns);
   const swatchRows = Math.ceil(swatches.length / resolvedColumns);
@@ -1090,9 +1091,9 @@ function InlineColorPicker({ id, host, value, onChange, previewValue, swatches =
   const displayValue = displayFor(value);
   const contrastColor = (0, import_auto_paper6.getContrastColor)(displayValue);
   const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : 0.4);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native14.View, { style: [styles11.anchor, open && styles11.anchorOpen], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_feedback_press6.TouchableRipple, { onPress: () => host.toggle(id), borderless: true, style: [styles11.trigger, { backgroundColor: displayValue, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native14.View, { ref: triggerRef, collapsable: false, style: styles11.triggerMeasure, children: tag ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper7.Text, { style: [styles11.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper7.Icon, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: displayValue, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: size, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native14.ScrollView, { style: [styles11.swatches, { backgroundColor: menuBg, borderColor: displayValue, width: swatchesWidth, maxHeight }], contentContainerStyle: styles11.swatchesContent, showsVerticalScrollIndicator: false, children: swatches.map((swatch) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native15.View, { style: [styles11.anchor, open && styles11.anchorOpen], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_feedback_press6.TouchableRipple, { onPress: () => host.toggle(id), borderless: true, style: [styles11.trigger, { backgroundColor: displayValue, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native15.View, { ref: triggerRef, collapsable: false, style: styles11.triggerMeasure, children: tag ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper7.Text, { style: [styles11.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper7.Icon, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: displayValue, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: size, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native15.ScrollView, { style: [styles11.swatches, { backgroundColor: menuBg, borderColor: displayValue, width: swatchesWidth, maxHeight }], contentContainerStyle: styles11.swatchesContent, showsVerticalScrollIndicator: false, children: swatches.map((swatch) => {
       const selected = swatch.value.toLowerCase() === value.toLowerCase();
       const taken = !selected && !!takenValue && swatch.value.toLowerCase() === takenValue.toLowerCase();
       const swappable = taken && allowSwapTaken;
@@ -1107,14 +1108,14 @@ function InlineColorPicker({ id, host, value, onChange, previewValue, swatches =
           },
           borderless: true,
           style: [styles11.swatch, { backgroundColor: swatchDisplay }, selected && styles11.swatchSelected, taken && !swappable && styles11.swatchTaken],
-          children: selected ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper7.Icon, { source: "check", size: 16, color: (0, import_auto_paper6.getContrastColor)(swatchDisplay) }) : swappable ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper7.Icon, { source: "swap-horizontal", size: 16, color: (0, import_auto_paper6.getContrastColor)(swatchDisplay) }) : taken ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper7.Icon, { source: "close", size: 16, color: (0, import_auto_paper6.getContrastColor)(swatchDisplay) }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native14.View, {})
+          children: selected ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper7.Icon, { source: "check", size: 16, color: (0, import_auto_paper6.getContrastColor)(swatchDisplay) }) : swappable ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper7.Icon, { source: "swap-horizontal", size: 16, color: (0, import_auto_paper6.getContrastColor)(swatchDisplay) }) : taken ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper7.Icon, { source: "close", size: 16, color: (0, import_auto_paper6.getContrastColor)(swatchDisplay) }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native15.View, {})
         },
         swatch.value
       );
     }) }) })
   ] });
 }
-var styles11 = import_react_native14.StyleSheet.create({
+var styles11 = import_react_native15.StyleSheet.create({
   anchor: {
     position: "relative"
   },
@@ -1188,7 +1189,7 @@ var styles11 = import_react_native14.StyleSheet.create({
 // src/LabeledDropdown.tsx
 var import_auto_paper7 = require("@rific/auto-paper");
 var import_feedback_press7 = require("@rific/feedback-press");
-var import_react_native15 = require("react-native");
+var import_react_native16 = require("react-native");
 var import_react_native_paper8 = require("react-native-paper");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var TRIGGER_HEIGHT = 28;
@@ -1213,22 +1214,22 @@ function LabeledDropdown({ id, host, options, value, onChange, color, dark, alig
     onChange(option.value);
     host.close();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native15.View, { style: [styles12.anchor, open && styles12.anchorOpen], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_feedback_press7.TouchableRipple, { onPress: () => host.toggle(id), style: styles12.trigger, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native15.View, { ref: triggerRef, collapsable: false, style: styles12.triggerInner, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native16.View, { style: [styles12.anchor, open && styles12.anchorOpen], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_feedback_press7.TouchableRipple, { onPress: () => host.toggle(id), style: styles12.trigger, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native16.View, { ref: triggerRef, collapsable: false, style: styles12.triggerInner, children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_paper8.Text, { style: [styles12.triggerLabel, { color }], numberOfLines: 1, children: (selected?.label ?? "").toUpperCase() }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_paper8.Icon, { source: "menu-down", size: 16, color })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native15.ScrollView, { style: [styles12.menu, { backgroundColor: menuBg, borderColor: color, width: POPOVER_WIDTH, maxHeight }], contentContainerStyle: styles12.menuContent, showsVerticalScrollIndicator: false, children: options.map((option) => {
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native16.ScrollView, { style: [styles12.menu, { backgroundColor: menuBg, borderColor: color, width: POPOVER_WIDTH, maxHeight }], contentContainerStyle: styles12.menuContent, showsVerticalScrollIndicator: false, children: options.map((option) => {
       const isSelected = option.value === value;
       const onColor = (0, import_auto_paper7.getContrastColor)(color);
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_feedback_press7.TouchableRipple, { onPress: () => handleSelect(option), style: [styles12.row, isSelected && { backgroundColor: color }], children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native15.View, { style: styles12.rowInner, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_feedback_press7.TouchableRipple, { onPress: () => handleSelect(option), style: [styles12.row, isSelected && { backgroundColor: color }], children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native16.View, { style: styles12.rowInner, children: [
         option.icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_paper8.Icon, { source: option.icon, size: 18, color: isSelected ? onColor : fg }),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_paper8.Text, { style: [styles12.rowLabel, { color: isSelected ? onColor : fg }], numberOfLines: 1, children: option.label })
       ] }) }, option.value);
     }) }) })
   ] });
 }
-var styles12 = import_react_native15.StyleSheet.create({
+var styles12 = import_react_native16.StyleSheet.create({
   anchor: {
     position: "relative"
   },
@@ -1286,16 +1287,16 @@ function loadSkiaWeb() {
 }
 
 // src/PressAwayOverlay.tsx
-var import_react_native16 = require("react-native");
+var import_react_native17 = require("react-native");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function PressAwayOverlay({ active, onPress, style }) {
   if (!active) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native16.Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [import_react_native16.StyleSheet.absoluteFill, style] });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native17.Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [import_react_native17.StyleSheet.absoluteFill, style] });
 }
 
 // src/ReadyButton.tsx
 var import_feedback_press8 = require("@rific/feedback-press");
-var import_react_native17 = require("react-native");
+var import_react_native18 = require("react-native");
 var import_react_native_paper9 = require("react-native-paper");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MONO_FONT }) {
@@ -1304,7 +1305,7 @@ function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MON
   const labelColorStyle = { color: ready ? "#000000" : color };
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_feedback_press8.TouchableRipple, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_paper9.Text, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
 }
-var styles13 = import_react_native17.StyleSheet.create({
+var styles13 = import_react_native18.StyleSheet.create({
   readyButton: {
     alignItems: "center",
     borderRadius: 12,
@@ -1318,11 +1319,11 @@ var styles13 = import_react_native17.StyleSheet.create({
 
 // src/SharedActionBand.tsx
 var import_feedback_press9 = require("@rific/feedback-press");
-var import_react_native18 = require("react-native");
+var import_react_native19 = require("react-native");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native18.View, { style: [styles14.column, popoverOpen && styles14.columnOpen], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native18.View, { style: styles14.actionsRow, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native19.View, { style: [styles14.column, popoverOpen && styles14.columnOpen], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native19.View, { style: styles14.actionsRow, children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_feedback_press9.IconButton, { icon: "arrow-left", iconColor: fg, size: 20, onPress: onBack, accessibilityLabel: "Back" }),
       onRandomize && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_feedback_press9.IconButton, { icon: "dice-multiple", iconColor: fg, size: 18, onPress: onRandomize, accessibilityLabel: "Randomize match settings" }),
       onReset && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_feedback_press9.IconButton, { icon: "restore", iconColor: fg, size: 18, onPress: onReset, accessibilityLabel: "Reset match settings to defaults" }),
@@ -1331,7 +1332,7 @@ function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popove
     children
   ] });
 }
-var styles14 = import_react_native18.StyleSheet.create({
+var styles14 = import_react_native19.StyleSheet.create({
   actionsRow: {
     alignItems: "center",
     flexDirection: "row",
@@ -1348,19 +1349,19 @@ var styles14 = import_react_native18.StyleSheet.create({
 
 // src/StatRow.tsx
 var import_auto_paper8 = require("@rific/auto-paper");
-var import_react_native19 = require("react-native");
+var import_react_native20 = require("react-native");
 var import_react_native_paper10 = require("react-native-paper");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }) {
   const { dark } = (0, import_auto_paper8.useAutoPaperTheme)();
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native19.View, { style: styles15.row, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native20.View, { style: styles15.row, children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native_paper10.Text, { variant: "bodyMedium", style: { color: fgMuted }, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native_paper10.Text, { variant: "bodyMedium", style: [styles15.value, { color: fg }], children: value })
   ] });
 }
-var styles15 = import_react_native19.StyleSheet.create({
+var styles15 = import_react_native20.StyleSheet.create({
   row: {
     alignItems: "center",
     flexDirection: "row",
@@ -1373,19 +1374,19 @@ var styles15 = import_react_native19.StyleSheet.create({
 
 // src/StatSection.tsx
 var import_auto_paper9 = require("@rific/auto-paper");
-var import_react_native20 = require("react-native");
+var import_react_native21 = require("react-native");
 var import_react_native_paper11 = require("react-native-paper");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }) {
   const { dark } = (0, import_auto_paper9.useAutoPaperTheme)();
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const sectionBg = sectionBgOverride ?? (dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)");
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native20.View, { style: [styles16.section, { backgroundColor: sectionBg }], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native21.View, { style: [styles16.section, { backgroundColor: sectionBg }], children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native_paper11.Text, { variant: "labelMedium", style: [styles16.label, { color: fg }], children: label }),
     children
   ] });
 }
-var styles16 = import_react_native20.StyleSheet.create({
+var styles16 = import_react_native21.StyleSheet.create({
   // Bold and full-contrast (fg), not the original fontless/fgMuted treatment — that read at the
   // same visual weight as StatRow's own row labels below it (both used the identical muted color;
   // letterSpacing/variant alone didn't separate them enough to read as "this is the group header"
@@ -1436,7 +1437,9 @@ function usePopoverHost() {
   StatSection,
   TriggerGaugeHost,
   getLabeledDropdownContentHeight,
+  getOverlayCardColors,
   loadSkiaWeb,
+  overlayStyles,
   useAutoAlign,
   usePopoverHost
 });