@tastic/hud 0.2.0 → 0.4.0

package/dist/index.mjs

@@ -1,17 +1,85 @@
+// src/AchievementRow.tsx
+import { useAutoPaperTheme } from "@rific/auto-paper";
+import { StyleSheet, View } from "react-native";
+import { Icon, ProgressBar, Text } from "react-native-paper";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
+function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker }) {
+  const { dark } = useAutoPaperTheme();
+  const fg = dark ? "#FFFFFF" : "#000000";
+  const fgMuted = dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)";
+  const sectionBg = dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)";
+  const unlocked = unlockedLabel !== void 0;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.row, { backgroundColor: sectionBg }], children: [
+    /* @__PURE__ */ jsx(View, { style: [styles.badge, { backgroundColor: badgeColor }], children: /* @__PURE__ */ jsx(Icon, { source: icon, size: 20, color: unlocked ? "#000000" : fgMuted }) }),
+    /* @__PURE__ */ jsxs(View, { style: styles.text, children: [
+      /* @__PURE__ */ jsx(Text, { variant: "bodyLarge", style: [styles.boldText, { color: fg }], children: title }),
+      /* @__PURE__ */ jsx(Text, { variant: "bodySmall", style: { color: fgMuted }, children: description }),
+      deviceMarker && /* @__PURE__ */ jsxs(View, { style: styles.deviceMarker, children: [
+        /* @__PURE__ */ jsx(Icon, { source: "earth", size: 11, color: fgMuted }),
+        /* @__PURE__ */ jsx(Text, { variant: "labelSmall", style: { color: fgMuted }, children: "Same for every profile" })
+      ] }),
+      !unlocked && progress !== void 0 && /* @__PURE__ */ jsx(ProgressBar, { progress, color: checkColor ?? badgeColor, style: styles.progressBar })
+    ] }),
+    unlocked ? /* @__PURE__ */ jsxs(View, { style: styles.status, children: [
+      /* @__PURE__ */ jsx(Icon, { source: "check-circle", size: 20, color: checkColor ?? badgeColor }),
+      /* @__PURE__ */ jsx(Text, { variant: "labelSmall", style: { color: fgMuted }, children: unlockedLabel })
+    ] }) : /* @__PURE__ */ jsx(Icon, { source: "lock-outline", size: 20, color: fgMuted })
+  ] });
+}
+var styles = StyleSheet.create({
+  badge: {
+    alignItems: "center",
+    borderRadius: 10,
+    height: 36,
+    justifyContent: "center",
+    width: 36
+  },
+  boldText: {
+    fontWeight: "bold"
+  },
+  deviceMarker: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 4
+  },
+  progressBar: {
+    borderRadius: 4,
+    height: 6,
+    marginTop: 6
+  },
+  row: {
+    alignItems: "center",
+    borderRadius: 12,
+    flexDirection: "row",
+    gap: 12,
+    padding: 12
+  },
+  status: {
+    alignItems: "center",
+    gap: 2,
+    width: 64
+  },
+  text: {
+    flex: 1,
+    gap: 2
+  }
+});
+
 // src/BaseSettingsDialog.tsx
-import { AutoAppearancePicker, Dialog, useAutoPaperTheme } from "@rific/auto-paper";
+import { AutoAppearancePicker, Dialog, useAutoPaperTheme as useAutoPaperTheme2 } from "@rific/auto-paper";
 import { Button, SoundContext, TouchableRipple, useHapticSettings, useSoundSettings, useVibration } from "@rific/feedback-press";
 import { useUpdater } from "@rific/updater";
 import { useIsTouchPrimaryDevice } from "@tastic/core";
 import { useContext, useState } from "react";
-import { Platform, ScrollView, StyleSheet, View } from "react-native";
-import { Icon, Portal, Text } from "react-native-paper";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Platform, ScrollView, StyleSheet as StyleSheet2, View as View2 } from "react-native";
+import { Icon as Icon2, Portal, Text as Text2 } from "react-native-paper";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function SettingIcon({ source, color, containerColor }) {
-  return /* @__PURE__ */ jsx(View, { style: [styles.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ jsx(Icon, { source, size: 18, color }) });
+  return /* @__PURE__ */ jsx2(View2, { style: [styles2.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ jsx2(Icon2, { source, size: 18, color }) });
 }
 function BaseSettingsDialog({ visible, onDismiss, rotation = 0, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, children }) {
-  const { dark, colors } = useAutoPaperTheme();
+  const { dark, colors } = useAutoPaperTheme2();
   const isTouchPrimary = useIsTouchPrimaryDevice();
   const { settings: hapticSettings, set: setHapticSettings } = useHapticSettings();
   const { settings: soundSettings, set: setSoundSettings } = useSoundSettings();
@@ -33,27 +101,27 @@ function BaseSettingsDialog({ visible, onDismiss, rotation = 0, version, lockOri
   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)";
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Dialog, { visible, onDismiss, style: [styles.dialog, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }], children: [
-      /* @__PURE__ */ jsx(Dialog.Title, { children: "Settings" }),
-      /* @__PURE__ */ jsx(Dialog.ScrollArea, { style: styles.scrollArea, children: /* @__PURE__ */ jsxs(ScrollView, { contentContainerStyle: styles.content, showsVerticalScrollIndicator: false, children: [
-        /* @__PURE__ */ jsxs(View, { style: styles.toggleGroup, children: [
-          showLockOrientation && /* @__PURE__ */ jsx(TouchableRipple, { onPress: () => onLockOrientationChange(!lockOrientation), style: styles.toggleButton, accessibilityLabel: `Lock orientation ${lockOrientation ? "on" : "off"}`, children: /* @__PURE__ */ jsxs(View, { style: styles.toggleContent, children: [
-            /* @__PURE__ */ jsx(SettingIcon, { source: lockOrientation ? "lock" : "lock-open-variant-outline", color: lockOrientation ? colors.secondary : colors.onSurfaceVariant, containerColor: lockOrientation ? colors.secondaryContainer : colors.surfaceVariant }),
-            /* @__PURE__ */ jsxs(View, { style: styles.flexShrink, children: [
-              /* @__PURE__ */ jsx(Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Lock Orientation" }),
-              /* @__PURE__ */ jsx(Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Pins the current layout" })
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2(Dialog, { visible, onDismiss, style: [styles2.dialog, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }], children: [
+      /* @__PURE__ */ jsx2(Dialog.Title, { children: "Settings" }),
+      /* @__PURE__ */ jsx2(Dialog.ScrollArea, { style: styles2.scrollArea, children: /* @__PURE__ */ jsxs2(ScrollView, { contentContainerStyle: styles2.content, showsVerticalScrollIndicator: false, children: [
+        /* @__PURE__ */ jsxs2(View2, { style: styles2.toggleGroup, children: [
+          showLockOrientation && /* @__PURE__ */ jsx2(TouchableRipple, { onPress: () => onLockOrientationChange(!lockOrientation), style: styles2.toggleButton, accessibilityLabel: `Lock orientation ${lockOrientation ? "on" : "off"}`, children: /* @__PURE__ */ jsxs2(View2, { style: styles2.toggleContent, children: [
+            /* @__PURE__ */ jsx2(SettingIcon, { source: lockOrientation ? "lock" : "lock-open-variant-outline", color: lockOrientation ? colors.secondary : colors.onSurfaceVariant, containerColor: lockOrientation ? colors.secondaryContainer : colors.surfaceVariant }),
+            /* @__PURE__ */ jsxs2(View2, { style: styles2.flexShrink, children: [
+              /* @__PURE__ */ jsx2(Text2, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Lock Orientation" }),
+              /* @__PURE__ */ jsx2(Text2, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Pins the current layout" })
             ] })
           ] }) }),
-          showEdgeGuard && /* @__PURE__ */ jsx(TouchableRipple, { onPress: () => onDeferBottomEdgeGestures(!deferBottomEdgeGestures), style: styles.toggleButton, accessibilityLabel: `Edge guard ${deferBottomEdgeGestures ? "on" : "off"}`, children: /* @__PURE__ */ jsxs(View, { style: styles.toggleContent, children: [
-            /* @__PURE__ */ jsx(SettingIcon, { source: deferBottomEdgeGestures ? "shield-check-outline" : "shield-off-outline", color: deferBottomEdgeGestures ? colors.secondary : colors.onSurfaceVariant, containerColor: deferBottomEdgeGestures ? colors.secondaryContainer : colors.surfaceVariant }),
-            /* @__PURE__ */ jsxs(View, { style: styles.flexShrink, children: [
-              /* @__PURE__ */ jsx(Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Edge Guard" }),
-              /* @__PURE__ */ jsx(Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Requires a second swipe" })
+          showEdgeGuard && /* @__PURE__ */ jsx2(TouchableRipple, { onPress: () => onDeferBottomEdgeGestures(!deferBottomEdgeGestures), style: styles2.toggleButton, accessibilityLabel: `Edge guard ${deferBottomEdgeGestures ? "on" : "off"}`, children: /* @__PURE__ */ jsxs2(View2, { style: styles2.toggleContent, children: [
+            /* @__PURE__ */ jsx2(SettingIcon, { source: deferBottomEdgeGestures ? "shield-check-outline" : "shield-off-outline", color: deferBottomEdgeGestures ? colors.secondary : colors.onSurfaceVariant, containerColor: deferBottomEdgeGestures ? colors.secondaryContainer : colors.surfaceVariant }),
+            /* @__PURE__ */ jsxs2(View2, { style: styles2.flexShrink, children: [
+              /* @__PURE__ */ jsx2(Text2, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Edge Guard" }),
+              /* @__PURE__ */ jsx2(Text2, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Requires a second swipe" })
             ] })
           ] }) }),
-          (showSound || showHaptics) && /* @__PURE__ */ jsxs(View, { style: styles.toggleRow, children: [
-            showSound && /* @__PURE__ */ jsx(
+          (showSound || showHaptics) && /* @__PURE__ */ jsxs2(View2, { style: styles2.toggleRow, children: [
+            showSound && /* @__PURE__ */ jsx2(
               TouchableRipple,
               {
                 soundDisabled: true,
@@ -62,15 +130,15 @@ function BaseSettingsDialog({ visible, onDismiss, rotation = 0, version, lockOri
                   setSoundSettings({ enabled });
                   if (enabled) sound.selection?.();
                 },
-                style: styles.toggleButtonInRow,
+                style: styles2.toggleButtonInRow,
                 accessibilityLabel: `Sound ${soundSettings.enabled ? "on" : "off"}`,
-                children: /* @__PURE__ */ jsxs(View, { style: styles.toggleContent, children: [
-                  /* @__PURE__ */ jsx(SettingIcon, { source: soundSettings.enabled ? "volume-high" : "volume-off", color: soundSettings.enabled ? colors.tertiary : colors.onSurfaceVariant, containerColor: soundSettings.enabled ? colors.tertiaryContainer : colors.surfaceVariant }),
-                  /* @__PURE__ */ jsx(Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Sound" })
+                children: /* @__PURE__ */ jsxs2(View2, { style: styles2.toggleContent, children: [
+                  /* @__PURE__ */ jsx2(SettingIcon, { source: soundSettings.enabled ? "volume-high" : "volume-off", color: soundSettings.enabled ? colors.tertiary : colors.onSurfaceVariant, containerColor: soundSettings.enabled ? colors.tertiaryContainer : colors.surfaceVariant }),
+                  /* @__PURE__ */ jsx2(Text2, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Sound" })
                 ] })
               }
             ),
-            showHaptics && /* @__PURE__ */ jsx(
+            showHaptics && /* @__PURE__ */ jsx2(
               TouchableRipple,
               {
                 hapticDisabled: true,
@@ -79,40 +147,40 @@ function BaseSettingsDialog({ visible, onDismiss, rotation = 0, version, lockOri
                   setHapticSettings({ vibrate });
                   if (vibrate) forceHapticFeedback();
                 },
-                style: styles.toggleButtonInRow,
+                style: styles2.toggleButtonInRow,
                 accessibilityLabel: `Haptics ${hapticSettings.vibrate ? "on" : "off"}`,
-                children: /* @__PURE__ */ jsxs(View, { style: styles.toggleContent, children: [
-                  /* @__PURE__ */ jsx(SettingIcon, { source: hapticSettings.vibrate ? "vibrate" : "vibrate-off", color: hapticSettings.vibrate ? colors.tertiary : colors.onSurfaceVariant, containerColor: hapticSettings.vibrate ? colors.tertiaryContainer : colors.surfaceVariant }),
-                  /* @__PURE__ */ jsx(Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Haptics" })
+                children: /* @__PURE__ */ jsxs2(View2, { style: styles2.toggleContent, children: [
+                  /* @__PURE__ */ jsx2(SettingIcon, { source: hapticSettings.vibrate ? "vibrate" : "vibrate-off", color: hapticSettings.vibrate ? colors.tertiary : colors.onSurfaceVariant, containerColor: hapticSettings.vibrate ? colors.tertiaryContainer : colors.surfaceVariant }),
+                  /* @__PURE__ */ jsx2(Text2, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Haptics" })
                 ] })
               }
             )
           ] })
         ] }),
-        showAppearance && /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
-          /* @__PURE__ */ jsx(Text, { variant: "labelMedium", style: [styles.sectionLabel, { color: colors.onSurfaceVariant }], children: "APPEARANCE" }),
-          /* @__PURE__ */ jsx(AutoAppearancePicker, { showLabels: false })
+        showAppearance && /* @__PURE__ */ jsxs2(View2, { style: styles2.section, children: [
+          /* @__PURE__ */ jsx2(Text2, { variant: "labelMedium", style: [styles2.sectionLabel, { color: colors.onSurfaceVariant }], children: "APPEARANCE" }),
+          /* @__PURE__ */ jsx2(AutoAppearancePicker, { showLabels: false })
         ] }),
         children,
-        showUpdateCheck && /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
-          /* @__PURE__ */ jsxs(Text, { variant: "labelSmall", style: [styles.sectionLabel, { color: colors.onSurfaceVariant }], children: [
+        showUpdateCheck && /* @__PURE__ */ jsxs2(View2, { style: styles2.section, children: [
+          /* @__PURE__ */ jsxs2(Text2, { variant: "labelSmall", style: [styles2.sectionLabel, { color: colors.onSurfaceVariant }], children: [
             "VERSION ",
             version,
             updateReady ? " \xB7 UPDATE READY" : ""
           ] }),
-          /* @__PURE__ */ jsx(Button, { mode: "outlined", onPress: check, loading: checking, disabled: checking, children: "Check for Updates" })
+          /* @__PURE__ */ jsx2(Button, { mode: "outlined", onPress: check, loading: checking, disabled: checking, children: "Check for Updates" })
         ] })
       ] }) })
     ] }),
-    infoMessage && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(View, { style: styles.overlay, children: /* @__PURE__ */ jsxs(View, { style: [styles.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }], children: [
-      /* @__PURE__ */ jsx(Icon, { source: "information-outline", size: 64, color: colors.secondary }),
-      /* @__PURE__ */ jsx(Text, { variant: "headlineLarge", style: [styles.overlayTitle, { color: colors.secondary }], children: infoMessage.title }),
-      /* @__PURE__ */ jsx(Text, { variant: "bodyLarge", style: [styles.overlayBody, { color: fg }], children: infoMessage.message }),
-      /* @__PURE__ */ jsx(Button, { mode: "contained", onPress: () => setInfoMessage(null), style: styles.overlayButton, buttonColor: colors.primary, textColor: colors.onPrimary, children: "OK" })
+    infoMessage && /* @__PURE__ */ jsx2(Portal, { children: /* @__PURE__ */ jsx2(View2, { style: styles2.overlay, children: /* @__PURE__ */ jsxs2(View2, { style: [styles2.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }], children: [
+      /* @__PURE__ */ jsx2(Icon2, { source: "information-outline", size: 64, color: colors.secondary }),
+      /* @__PURE__ */ jsx2(Text2, { variant: "headlineLarge", style: [styles2.overlayTitle, { color: colors.secondary }], children: infoMessage.title }),
+      /* @__PURE__ */ jsx2(Text2, { variant: "bodyLarge", style: [styles2.overlayBody, { color: fg }], children: infoMessage.message }),
+      /* @__PURE__ */ jsx2(Button, { mode: "contained", onPress: () => setInfoMessage(null), style: styles2.overlayButton, buttonColor: colors.primary, textColor: colors.onPrimary, children: "OK" })
     ] }) }) })
   ] });
 }
-var styles = StyleSheet.create({
+var styles2 = StyleSheet2.create({
   content: {
     gap: 24,
     paddingVertical: 20
@@ -200,6 +268,125 @@ var styles = StyleSheet.create({
   }
 });
 
+// src/BaseStatsScreen.tsx
+import { useAutoPaperTheme as useAutoPaperTheme3 } from "@rific/auto-paper";
+import { Button as Button2, IconButton } from "@rific/feedback-press";
+import { useState as useState2 } from "react";
+import { ScrollView as ScrollView2, StyleSheet as StyleSheet3, View as View3 } from "react-native";
+import { Icon as Icon3, Portal as Portal2, Text as Text3 } from "react-native-paper";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function BaseStatsScreen({ rotation = 0, title = "Achievements", onBack, insets, onReset, resetLabel = "Reset All Stats", resetConfirmTitle = "Reset Everything?", resetConfirmBody = "This permanently erases all stats and achievements. This cannot be undone.", children }) {
+  const { dark, colors } = useAutoPaperTheme3();
+  const [confirmResetVisible, setConfirmResetVisible] = useState2(false);
+  const showReset = !!onReset;
+  const fg = dark ? "#FFFFFF" : "#000000";
+  const bg = dark ? "#000000" : "#FFFFFF";
+  const cardBg = dark ? "#111111" : "#F2F2F2";
+  const cardBorder = dark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)";
+  return /* @__PURE__ */ jsxs3(View3, { style: [styles3.container, { backgroundColor: bg }], children: [
+    /* @__PURE__ */ jsxs3(View3, { style: [styles3.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
+      /* @__PURE__ */ jsx3(IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: onBack }),
+      /* @__PURE__ */ jsx3(Text3, { variant: "displaySmall", style: [styles3.title, { color: fg }], children: title })
+    ] }),
+    /* @__PURE__ */ jsxs3(ScrollView2, { style: styles3.scrollView, contentContainerStyle: [styles3.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
+      children,
+      showReset && /* @__PURE__ */ jsx3(Button2, { mode: "outlined", onPress: () => setConfirmResetVisible(true), textColor: colors.secondary, style: styles3.resetButton, children: resetLabel })
+    ] }),
+    confirmResetVisible && /* @__PURE__ */ jsx3(Portal2, { children: /* @__PURE__ */ jsx3(View3, { style: [styles3.overlay, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }], children: /* @__PURE__ */ jsxs3(View3, { style: [styles3.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }], children: [
+      /* @__PURE__ */ jsx3(Icon3, { source: "alert-outline", size: 64, color: colors.secondary }),
+      /* @__PURE__ */ jsx3(Text3, { variant: "headlineLarge", style: [styles3.overlayTitle, { color: colors.secondary }], children: resetConfirmTitle }),
+      /* @__PURE__ */ jsx3(Text3, { variant: "bodyLarge", style: [styles3.overlayBody, { color: fg }], children: resetConfirmBody }),
+      /* @__PURE__ */ jsx3(Button2, { mode: "contained", onPress: () => setConfirmResetVisible(false), style: styles3.overlayButton, children: "Cancel" }),
+      /* @__PURE__ */ jsx3(
+        Button2,
+        {
+          mode: "contained",
+          onPress: () => {
+            onReset?.();
+            setConfirmResetVisible(false);
+          },
+          style: styles3.overlayButton,
+          buttonColor: colors.secondary,
+          textColor: colors.onSecondary,
+          children: "Reset"
+        }
+      )
+    ] }) }) })
+  ] });
+}
+var styles3 = StyleSheet3.create({
+  container: {
+    flex: 1
+  },
+  content: {
+    gap: 12,
+    paddingHorizontal: 20
+  },
+  header: {
+    alignItems: "center",
+    flexDirection: "row",
+    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
+  },
+  // Bounds the ScrollView 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.
+  scrollView: {
+    flex: 1
+  },
+  title: {
+    flexShrink: 1,
+    fontWeight: "bold"
+  }
+});
+
+// src/CornerActionButtons.tsx
+import { IconButton as IconButton2 } from "@rific/feedback-press";
+import { StyleSheet as StyleSheet4 } from "react-native";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function CornerActionButtons({ onBack, onSettings, fg, insets }) {
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx4(IconButton2, { icon: "arrow-left", iconColor: fg, size: 24, style: [styles4.back, { top: 8 + insets.top, left: 8 + insets.left }], onPress: onBack, accessibilityLabel: "Back" }),
+    /* @__PURE__ */ jsx4(IconButton2, { icon: "cog", iconColor: fg, size: 24, style: [styles4.topRight, { top: 8 + insets.top, right: 8 + insets.right }], onPress: onSettings, accessibilityLabel: "Settings" })
+  ] });
+}
+var styles4 = StyleSheet4.create({
+  back: {
+    position: "absolute"
+  },
+  topRight: {
+    position: "absolute"
+  }
+});
+
 // src/fonts.ts
 import { Platform as Platform2 } from "react-native";
 var MONO_FONT = Platform2.select({ ios: "Menlo", android: "monospace", default: "monospace" });
@@ -208,34 +395,34 @@ var MONO_FONT = Platform2.select({ ios: "Menlo", android: "monospace", default:
 import { defaultColors, getContrastColor } from "@rific/auto-paper";
 import { TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
 import { clamp } from "@tastic/core";
-import { ScrollView as ScrollView2, StyleSheet as StyleSheet3, useWindowDimensions as useWindowDimensions2, View as View4 } from "react-native";
-import { Icon as Icon2, Text as Text2 } from "react-native-paper";
+import { ScrollView as ScrollView3, StyleSheet as StyleSheet6, useWindowDimensions as useWindowDimensions2, View as View6 } from "react-native";
+import { Icon as Icon4, Text as Text4 } from "react-native-paper";
 
 // src/PopoverBody.tsx
-import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet5, View as View4 } from "react-native";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var CARET_SIZE = 7;
 var CARET_RING_OFFSET = 2;
 var CARET_DIP = 1;
 function PopoverBody({ visible, children, align = "center", verticalAlign = "below", caretColor, caretBorderColor, caretBorderWidth = 1, triggerSize = 0 }) {
   if (!visible) return null;
   const above = verticalAlign === "above";
-  const alignStyle = align === "left" ? styles2.contentLeft : align === "right" ? styles2.contentRight : styles2.contentCenter;
-  const verticalStyle = above ? styles2.contentAbove : styles2.contentBelow;
+  const alignStyle = align === "left" ? styles5.contentLeft : align === "right" ? styles5.contentRight : styles5.contentCenter;
+  const verticalStyle = above ? styles5.contentAbove : styles5.contentBelow;
   const ringSize = CARET_SIZE + caretBorderWidth;
   const caretOffset = (halfFootprint) => align === "right" ? { right: triggerSize / 2 - halfFootprint } : { left: triggerSize / 2 - halfFootprint };
   const caretFill = above ? "borderTopColor" : "borderBottomColor";
   const caretWidthProp = above ? "borderTopWidth" : "borderBottomWidth";
   const caretEdge = (size) => above ? { bottom: -size + CARET_DIP } : { top: -size + CARET_DIP };
-  return /* @__PURE__ */ jsxs2(View2, { style: [styles2.content, alignStyle, verticalStyle], children: [
+  return /* @__PURE__ */ jsxs5(View4, { style: [styles5.content, alignStyle, verticalStyle], children: [
     children,
-    caretColor && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-      /* @__PURE__ */ jsx2(View2, { style: [styles2.caret, caretOffset(ringSize), caretEdge(ringSize), { [caretFill]: caretBorderColor ?? caretColor, [caretWidthProp]: ringSize, borderLeftWidth: ringSize, borderRightWidth: ringSize }] }),
-      /* @__PURE__ */ jsx2(View2, { style: [styles2.caret, caretOffset(CARET_SIZE), caretEdge(CARET_SIZE - CARET_RING_OFFSET), { [caretFill]: caretColor, [caretWidthProp]: CARET_SIZE, borderLeftWidth: CARET_SIZE, borderRightWidth: CARET_SIZE }] })
+    caretColor && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      /* @__PURE__ */ jsx5(View4, { style: [styles5.caret, caretOffset(ringSize), caretEdge(ringSize), { [caretFill]: caretBorderColor ?? caretColor, [caretWidthProp]: ringSize, borderLeftWidth: ringSize, borderRightWidth: ringSize }] }),
+      /* @__PURE__ */ jsx5(View4, { style: [styles5.caret, caretOffset(CARET_SIZE), caretEdge(CARET_SIZE - CARET_RING_OFFSET), { [caretFill]: caretColor, [caretWidthProp]: CARET_SIZE, borderLeftWidth: CARET_SIZE, borderRightWidth: CARET_SIZE }] })
     ] })
   ] });
 }
-var styles2 = StyleSheet2.create({
+var styles5 = StyleSheet5.create({
   caret: {
     borderLeftColor: "transparent",
     borderRightColor: "transparent",
@@ -278,17 +465,17 @@ var styles2 = StyleSheet2.create({
 });
 
 // src/useAutoAlign.ts
-import { useCallback, useEffect, useRef, useState as useState2 } from "react";
+import { useCallback, useEffect, useRef, useState as useState3 } from "react";
 import { useWindowDimensions } from "react-native";
 var EDGE_MARGIN = 12;
 function useAutoAlign(open, contentWidth, contentHeight) {
   const triggerRef = useRef(null);
   const { width: windowWidth, height: windowHeight } = useWindowDimensions();
-  const [align, setAlign] = useState2("center");
-  const [verticalAlign, setVerticalAlign] = useState2("below");
-  const [maxHeight, setMaxHeight] = useState2(contentHeight);
-  const [measured, setMeasured] = useState2(false);
-  const [prevOpen, setPrevOpen] = useState2(open);
+  const [align, setAlign] = useState3("center");
+  const [verticalAlign, setVerticalAlign] = useState3("below");
+  const [maxHeight, setMaxHeight] = useState3(contentHeight);
+  const [measured, setMeasured] = useState3(false);
+  const [prevOpen, setPrevOpen] = useState3(open);
   if (open !== prevOpen) {
     setPrevOpen(open);
     if (open) setMeasured(false);
@@ -316,7 +503,7 @@ function useAutoAlign(open, contentWidth, contentHeight) {
 }
 
 // src/InlineColorPicker.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
 var DEFAULT_SIZE = 48;
 var SWATCH_SIZE = 28;
@@ -342,13 +529,13 @@ function InlineColorPicker({ id, host, value, onChange, swatches = defaultColors
   const align = alignOverride ?? autoAlign;
   const contrastColor = getContrastColor(value);
   const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : 0.4);
-  return /* @__PURE__ */ jsxs3(View4, { style: [styles3.anchor, open && styles3.anchorOpen], children: [
-    /* @__PURE__ */ jsx3(TouchableRipple2, { onPress: () => host.toggle(id), borderless: true, style: [styles3.trigger, { backgroundColor: value, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ jsx3(View4, { ref: triggerRef, collapsable: false, style: styles3.triggerMeasure, children: tag ? /* @__PURE__ */ jsx3(Text2, { style: [styles3.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ jsx3(Icon2, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
-    /* @__PURE__ */ jsx3(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: value, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: size, children: /* @__PURE__ */ jsx3(ScrollView2, { style: [styles3.swatches, { backgroundColor: menuBg, borderColor: value, width: swatchesWidth, maxHeight }], contentContainerStyle: styles3.swatchesContent, showsVerticalScrollIndicator: false, children: swatches.map((swatch) => {
+  return /* @__PURE__ */ jsxs6(View6, { style: [styles6.anchor, open && styles6.anchorOpen], children: [
+    /* @__PURE__ */ jsx6(TouchableRipple2, { onPress: () => host.toggle(id), borderless: true, style: [styles6.trigger, { backgroundColor: value, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ jsx6(View6, { ref: triggerRef, collapsable: false, style: styles6.triggerMeasure, children: tag ? /* @__PURE__ */ jsx6(Text4, { style: [styles6.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ jsx6(Icon4, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
+    /* @__PURE__ */ jsx6(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: value, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: size, children: /* @__PURE__ */ jsx6(ScrollView3, { style: [styles6.swatches, { backgroundColor: menuBg, borderColor: value, width: swatchesWidth, maxHeight }], contentContainerStyle: styles6.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;
-      return /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsx6(
         TouchableRipple2,
         {
           disabled: taken && !swappable,
@@ -357,15 +544,15 @@ function InlineColorPicker({ id, host, value, onChange, swatches = defaultColors
             if (autoDismiss) host.close();
           },
           borderless: true,
-          style: [styles3.swatch, { backgroundColor: swatch.value }, selected && styles3.swatchSelected, taken && !swappable && styles3.swatchTaken],
-          children: selected ? /* @__PURE__ */ jsx3(Icon2, { source: "check", size: 16, color: getContrastColor(swatch.value) }) : swappable ? /* @__PURE__ */ jsx3(Icon2, { source: "swap-horizontal", size: 16, color: getContrastColor(swatch.value) }) : taken ? /* @__PURE__ */ jsx3(Icon2, { source: "close", size: 16, color: getContrastColor(swatch.value) }) : /* @__PURE__ */ jsx3(View4, {})
+          style: [styles6.swatch, { backgroundColor: swatch.value }, selected && styles6.swatchSelected, taken && !swappable && styles6.swatchTaken],
+          children: selected ? /* @__PURE__ */ jsx6(Icon4, { source: "check", size: 16, color: getContrastColor(swatch.value) }) : swappable ? /* @__PURE__ */ jsx6(Icon4, { source: "swap-horizontal", size: 16, color: getContrastColor(swatch.value) }) : taken ? /* @__PURE__ */ jsx6(Icon4, { source: "close", size: 16, color: getContrastColor(swatch.value) }) : /* @__PURE__ */ jsx6(View6, {})
         },
         swatch.value
       );
     }) }) })
   ] });
 }
-var styles3 = StyleSheet3.create({
+var styles6 = StyleSheet6.create({
   anchor: {
     position: "relative"
   },
@@ -436,31 +623,126 @@ var styles3 = StyleSheet3.create({
   }
 });
 
+// src/LabeledDropdown.tsx
+import { getContrastColor as getContrastColor2 } from "@rific/auto-paper";
+import { TouchableRipple as TouchableRipple3 } from "@rific/feedback-press";
+import { ScrollView as ScrollView4, StyleSheet as StyleSheet7, View as View7 } from "react-native";
+import { Icon as Icon5, Text as Text5 } from "react-native-paper";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var TRIGGER_HEIGHT = 28;
+var POPOVER_WIDTH = 180;
+var ROW_HEIGHT = 36;
+var LIST_PADDING = 8;
+var LABELED_DROPDOWN_POPOVER_WIDTH = POPOVER_WIDTH;
+function getLabeledDropdownContentHeight(optionCount) {
+  return LIST_PADDING * 2 + optionCount * ROW_HEIGHT;
+}
+function LabeledDropdown({ id, host, options, value, onChange, color, dark, align: forcedAlign, alignOverride }) {
+  const menuBg = dark ? "#000000" : "#FFFFFF";
+  const fg = dark ? "#FFFFFF" : "#000000";
+  const open = host.openId === id;
+  const selected = options.find((o) => o.value === value) ?? null;
+  const contentHeight = LIST_PADDING * 2 + options.length * ROW_HEIGHT;
+  const auto = useAutoAlign(open, POPOVER_WIDTH, contentHeight);
+  const placement = alignOverride ?? auto;
+  const { maxHeight, measured, triggerRef, verticalAlign } = placement;
+  const align = forcedAlign ?? placement.align;
+  const handleSelect = (option) => {
+    onChange(option.value);
+    host.close();
+  };
+  return /* @__PURE__ */ jsxs7(View7, { style: [styles7.anchor, open && styles7.anchorOpen], children: [
+    /* @__PURE__ */ jsx7(TouchableRipple3, { onPress: () => host.toggle(id), style: styles7.trigger, children: /* @__PURE__ */ jsxs7(View7, { ref: triggerRef, collapsable: false, style: styles7.triggerInner, children: [
+      /* @__PURE__ */ jsx7(Text5, { style: [styles7.triggerLabel, { color }], numberOfLines: 1, children: (selected?.label ?? "").toUpperCase() }),
+      /* @__PURE__ */ jsx7(Icon5, { source: "menu-down", size: 16, color })
+    ] }) }),
+    /* @__PURE__ */ jsx7(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ jsx7(ScrollView4, { style: [styles7.menu, { backgroundColor: menuBg, borderColor: color, width: POPOVER_WIDTH, maxHeight }], contentContainerStyle: styles7.menuContent, showsVerticalScrollIndicator: false, children: options.map((option) => {
+      const isSelected = option.value === value;
+      const onColor = getContrastColor2(color);
+      return /* @__PURE__ */ jsx7(TouchableRipple3, { onPress: () => handleSelect(option), style: [styles7.row, isSelected && { backgroundColor: color }], children: /* @__PURE__ */ jsxs7(View7, { style: styles7.rowInner, children: [
+        option.icon && /* @__PURE__ */ jsx7(Icon5, { source: option.icon, size: 18, color: isSelected ? onColor : fg }),
+        /* @__PURE__ */ jsx7(Text5, { style: [styles7.rowLabel, { color: isSelected ? onColor : fg }], numberOfLines: 1, children: option.label })
+      ] }) }, option.value);
+    }) }) })
+  ] });
+}
+var styles7 = StyleSheet7.create({
+  anchor: {
+    position: "relative"
+  },
+  // React Native Web gives every position:'relative' view its own stacking context, so the
+  // elevation has to live on the anchor itself — see PopoverBody's own stacking-context notes.
+  anchorOpen: {
+    zIndex: 100
+  },
+  menu: {
+    borderRadius: 12,
+    borderWidth: 2,
+    elevation: 8,
+    shadowColor: "#000000",
+    shadowOffset: { height: 2, width: 0 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8
+  },
+  menuContent: {
+    padding: LIST_PADDING
+  },
+  row: {
+    borderRadius: 8,
+    height: ROW_HEIGHT
+  },
+  rowInner: {
+    alignItems: "center",
+    flexDirection: "row",
+    flex: 1,
+    gap: 8,
+    paddingHorizontal: 12
+  },
+  rowLabel: {
+    flex: 1,
+    fontSize: 14
+  },
+  trigger: {
+    alignSelf: "flex-start"
+  },
+  triggerInner: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 2,
+    height: TRIGGER_HEIGHT
+  },
+  triggerLabel: {
+    fontSize: 13,
+    fontWeight: "700",
+    letterSpacing: 1
+  }
+});
+
 // src/loadSkiaWeb.ts
 function loadSkiaWeb() {
   return Promise.resolve();
 }
 
 // src/PressAwayOverlay.tsx
-import { Pressable, StyleSheet as StyleSheet4 } from "react-native";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { Pressable, StyleSheet as StyleSheet8 } from "react-native";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function PressAwayOverlay({ active, onPress, style }) {
   if (!active) return null;
-  return /* @__PURE__ */ jsx4(Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [StyleSheet4.absoluteFill, style] });
+  return /* @__PURE__ */ jsx8(Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [StyleSheet8.absoluteFill, style] });
 }
 
 // src/ReadyButton.tsx
-import { TouchableRipple as TouchableRipple3 } from "@rific/feedback-press";
-import { StyleSheet as StyleSheet5 } from "react-native";
-import { Text as Text3 } from "react-native-paper";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { TouchableRipple as TouchableRipple4 } from "@rific/feedback-press";
+import { StyleSheet as StyleSheet9 } from "react-native";
+import { Text as Text6 } from "react-native-paper";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MONO_FONT }) {
-  const readyButtonStyle = [styles4.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style];
+  const readyButtonStyle = [styles8.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style];
   const labelTextStyle = { fontFamily: labelFontFamily, fontWeight: "bold" };
   const labelColorStyle = { color: ready ? "#000000" : color };
-  return /* @__PURE__ */ jsx5(TouchableRipple3, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ jsx5(Text3, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
+  return /* @__PURE__ */ jsx9(TouchableRipple4, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ jsx9(Text6, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
 }
-var styles4 = StyleSheet5.create({
+var styles8 = StyleSheet9.create({
   readyButton: {
     alignItems: "center",
     borderRadius: 12,
@@ -474,20 +756,20 @@ var styles4 = StyleSheet5.create({
 
 // src/SectionedDropdown.tsx
 import { getBlendedColor, getColorRoles } from "@rific/auto-paper";
-import { IconButton, TouchableRipple as TouchableRipple4 } from "@rific/feedback-press";
-import { ScrollView as ScrollView3, StyleSheet as StyleSheet6, View as View5 } from "react-native";
-import { Icon as Icon3, Text as Text4 } from "react-native-paper";
+import { IconButton as IconButton3, TouchableRipple as TouchableRipple5 } from "@rific/feedback-press";
+import { ScrollView as ScrollView5, StyleSheet as StyleSheet10, View as View8 } from "react-native";
+import { Icon as Icon6, Text as Text7 } from "react-native-paper";
 
 // src/TriggerGaugeHost.tsx
 import { lazy, Suspense } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var LazyTriggerGauge = lazy(() => loadSkiaWeb().then(() => import("./TriggerGauge-2OJOOF6I.mjs").then((m) => ({ default: m.TriggerGauge }))));
 function TriggerGaugeHost(props) {
-  return /* @__PURE__ */ jsx6(Suspense, { fallback: null, children: /* @__PURE__ */ jsx6(LazyTriggerGauge, { ...props }) });
+  return /* @__PURE__ */ jsx10(Suspense, { fallback: null, children: /* @__PURE__ */ jsx10(LazyTriggerGauge, { ...props }) });
 }
 
 // src/SectionedDropdown.tsx
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var MENU_BORDER_WIDTH = 1;
 var TRIGGER_SIZE = 44;
 var MENU_MIN_WIDTH = 200;
@@ -533,17 +815,17 @@ function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accen
     }
     gaugeOffset += section.options.length;
   }
-  const anchorStyle = [styles5.anchor, open && styles5.anchorOpen];
+  const anchorStyle = [styles9.anchor, open && styles9.anchorOpen];
   const menuStyle = { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight };
   const dividerStyle = { backgroundColor: menuBorderColor };
-  return /* @__PURE__ */ jsxs4(View5, { style: anchorStyle, children: [
-    /* @__PURE__ */ jsxs4(View5, { ref: triggerRef, collapsable: false, style: styles5.triggerBox, children: [
-      /* @__PURE__ */ jsx7(TriggerGaugeHost, { segments: gaugeSegments, litIndices: gaugeLitIndices, size: TRIGGER_SIZE, accentColor, mutedColor }),
-      /* @__PURE__ */ jsx7(IconButton, { icon: triggerIcon, iconColor: triggerIconColor, size: triggerIconSize, accessibilityLabel, onPress: () => host.toggle(id) })
+  return /* @__PURE__ */ jsxs8(View8, { style: anchorStyle, children: [
+    /* @__PURE__ */ jsxs8(View8, { ref: triggerRef, collapsable: false, style: styles9.triggerBox, children: [
+      /* @__PURE__ */ jsx11(TriggerGaugeHost, { segments: gaugeSegments, litIndices: gaugeLitIndices, size: TRIGGER_SIZE, accentColor, mutedColor }),
+      /* @__PURE__ */ jsx11(IconButton3, { icon: triggerIcon, iconColor: triggerIconColor, size: triggerIconSize, accessibilityLabel, onPress: () => host.toggle(id) })
     ] }),
-    /* @__PURE__ */ jsx7(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ jsx7(ScrollView3, { style: [styles5.menu, menuStyle], contentContainerStyle: styles5.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs4(View5, { children: [
-      sectionIndex > 0 && /* @__PURE__ */ jsx7(View5, { style: [styles5.divider, dividerStyle] }),
-      section.kind === "single" ? /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx11(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ jsx11(ScrollView5, { style: [styles9.menu, menuStyle], contentContainerStyle: styles9.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs8(View8, { children: [
+      sectionIndex > 0 && /* @__PURE__ */ jsx11(View8, { style: [styles9.divider, dividerStyle] }),
+      section.kind === "single" ? /* @__PURE__ */ jsx11(
         SingleSection,
         {
           section,
@@ -556,7 +838,7 @@ function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accen
             if (autoDismiss) host.close();
           }
         }
-      ) : /* @__PURE__ */ jsx7(MultiSection, { section, accentColor, onAccentColor: resolvedOnAccentColor, mutedColor, labelFontFamily, allClearLabels })
+      ) : /* @__PURE__ */ jsx11(MultiSection, { section, accentColor, onAccentColor: resolvedOnAccentColor, mutedColor, labelFontFamily, allClearLabels })
     ] }, section.id)) }) })
   ] });
 }
@@ -568,17 +850,17 @@ function SingleSection({
   labelFontFamily,
   onSelect
 }) {
-  return /* @__PURE__ */ jsx7(Fragment3, { children: section.options.map((option) => {
+  return /* @__PURE__ */ jsx11(Fragment4, { children: section.options.map((option) => {
     const selected = option.value === section.value;
     const rowColor = selected ? onAccentColor : mutedColor;
-    const itemStyle = [styles5.item, selected && { backgroundColor: accentColor }];
+    const itemStyle = [styles9.item, selected && { backgroundColor: accentColor }];
     const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
     const descriptionStyle = { fontFamily: labelFontFamily, color: rowColor };
-    return /* @__PURE__ */ jsx7(TouchableRipple4, { onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ jsxs4(View5, { style: styles5.itemRow, children: [
-      option.icon && /* @__PURE__ */ jsx7(Icon3, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
-      /* @__PURE__ */ jsxs4(View5, { style: styles5.itemLabelColumn, children: [
-        /* @__PURE__ */ jsx7(Text4, { variant: "labelLarge", style: labelStyle, children: option.label }),
-        option.description && /* @__PURE__ */ jsx7(Text4, { variant: "labelSmall", style: descriptionStyle, children: option.description })
+    return /* @__PURE__ */ jsx11(TouchableRipple5, { onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ jsxs8(View8, { style: styles9.itemRow, children: [
+      option.icon && /* @__PURE__ */ jsx11(Icon6, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
+      /* @__PURE__ */ jsxs8(View8, { style: styles9.itemLabelColumn, children: [
+        /* @__PURE__ */ jsx11(Text7, { variant: "labelLarge", style: labelStyle, children: option.label }),
+        option.description && /* @__PURE__ */ jsx11(Text7, { variant: "labelSmall", style: descriptionStyle, children: option.description })
       ] })
     ] }) }, option.value);
   }) });
@@ -592,23 +874,23 @@ function MultiSection({
   allClearLabels
 }) {
   const allSelected = section.value.length === section.options.length;
-  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
     section.options.map((option, i) => {
       const selected = section.value.includes(option.value);
       const rowColor = selected ? onAccentColor : mutedColor;
       const prevSelected = selected && i > 0 && section.value.includes(section.options[i - 1].value);
       const nextSelected = selected && i < section.options.length - 1 && section.value.includes(section.options[i + 1].value);
-      const itemStyle = [styles5.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }];
+      const itemStyle = [styles9.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__ */ jsx7(TouchableRipple4, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ jsxs4(View5, { style: styles5.itemRow, children: [
-        option.icon && /* @__PURE__ */ jsx7(Icon3, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
-        /* @__PURE__ */ jsx7(Text4, { variant: "labelLarge", style: [styles5.itemLabelFlex, labelStyle], children: option.label })
+      return /* @__PURE__ */ jsx11(TouchableRipple5, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ jsxs8(View8, { style: styles9.itemRow, children: [
+        option.icon && /* @__PURE__ */ jsx11(Icon6, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
+        /* @__PURE__ */ jsx11(Text7, { variant: "labelLarge", style: [styles9.itemLabelFlex, labelStyle], children: option.label })
       ] }) }, option.value);
     }),
-    section.allClear && /* @__PURE__ */ jsx7(TouchableRipple4, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles5.item, children: /* @__PURE__ */ jsx7(Text4, { variant: "labelLarge", style: [styles5.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })
+    section.allClear && /* @__PURE__ */ jsx11(TouchableRipple5, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles9.item, children: /* @__PURE__ */ jsx11(Text7, { variant: "labelLarge", style: [styles9.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })
   ] });
 }
-var styles5 = StyleSheet6.create({
+var styles9 = StyleSheet10.create({
   allClearLabel: {
     fontWeight: "bold",
     textAlign: "center"
@@ -625,7 +907,7 @@ var styles5 = StyleSheet6.create({
     zIndex: 100
   },
   divider: {
-    height: StyleSheet6.hairlineWidth,
+    height: StyleSheet10.hairlineWidth,
     marginVertical: 4
   },
   item: {
@@ -672,10 +954,90 @@ var styles5 = StyleSheet6.create({
   }
 });
 
+// src/SharedActionBand.tsx
+import { IconButton as IconButton4 } from "@rific/feedback-press";
+import { StyleSheet as StyleSheet11, View as View9 } from "react-native";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }) {
+  return /* @__PURE__ */ jsxs9(View9, { style: [styles10.column, popoverOpen && styles10.columnOpen], children: [
+    /* @__PURE__ */ jsxs9(View9, { style: styles10.actionsRow, children: [
+      /* @__PURE__ */ jsx12(IconButton4, { icon: "arrow-left", iconColor: fg, size: 20, onPress: onBack, accessibilityLabel: "Back" }),
+      onRandomize && /* @__PURE__ */ jsx12(IconButton4, { icon: "dice-multiple", iconColor: fg, size: 18, onPress: onRandomize, accessibilityLabel: "Randomize match settings" }),
+      onReset && /* @__PURE__ */ jsx12(IconButton4, { icon: "restore", iconColor: fg, size: 18, onPress: onReset, accessibilityLabel: "Reset match settings to defaults" }),
+      /* @__PURE__ */ jsx12(IconButton4, { icon: "cog", iconColor: fg, size: 20, onPress: onSettings, accessibilityLabel: "Settings" })
+    ] }),
+    children
+  ] });
+}
+var styles10 = StyleSheet11.create({
+  actionsRow: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 16
+  },
+  column: {
+    alignItems: "center",
+    gap: 8
+  },
+  columnOpen: {
+    zIndex: 100
+  }
+});
+
+// src/StatRow.tsx
+import { useAutoPaperTheme as useAutoPaperTheme4 } from "@rific/auto-paper";
+import { StyleSheet as StyleSheet12, View as View10 } from "react-native";
+import { Text as Text8 } from "react-native-paper";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+function StatRow({ label, value }) {
+  const { dark } = useAutoPaperTheme4();
+  const fg = dark ? "#FFFFFF" : "#000000";
+  const fgMuted = dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)";
+  return /* @__PURE__ */ jsxs10(View10, { style: styles11.row, children: [
+    /* @__PURE__ */ jsx13(Text8, { variant: "bodyMedium", style: { color: fgMuted }, children: label }),
+    /* @__PURE__ */ jsx13(Text8, { variant: "bodyMedium", style: [styles11.value, { color: fg }], children: value })
+  ] });
+}
+var styles11 = StyleSheet12.create({
+  row: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  value: {
+    fontWeight: "bold"
+  }
+});
+
+// src/StatSection.tsx
+import { useAutoPaperTheme as useAutoPaperTheme5 } from "@rific/auto-paper";
+import { StyleSheet as StyleSheet13, View as View11 } from "react-native";
+import { Text as Text9 } from "react-native-paper";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+function StatSection({ label, children }) {
+  const { dark } = useAutoPaperTheme5();
+  const fgMuted = dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)";
+  const sectionBg = dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)";
+  return /* @__PURE__ */ jsxs11(View11, { style: [styles12.section, { backgroundColor: sectionBg }], children: [
+    /* @__PURE__ */ jsx14(Text9, { variant: "labelMedium", style: [styles12.label, { color: fgMuted }], children: label }),
+    children
+  ] });
+}
+var styles12 = StyleSheet13.create({
+  label: {
+    letterSpacing: 2
+  },
+  section: {
+    borderRadius: 12,
+    gap: 8,
+    padding: 16
+  }
+});
+
 // src/usePopoverHost.ts
-import { useCallback as useCallback2, useState as useState3 } from "react";
+import { useCallback as useCallback2, useState as useState4 } from "react";
 function usePopoverHost() {
-  const [openId, setOpenId] = useState3(null);
+  const [openId, setOpenId] = useState4(null);
   const toggle = useCallback2((id) => {
     setOpenId((prev) => prev === id ? null : id);
   }, []);
@@ -683,14 +1045,24 @@ function usePopoverHost() {
   return { openId, toggle, close };
 }
 export {
+  AchievementRow,
   BaseSettingsDialog,
+  BaseStatsScreen,
+  CornerActionButtons,
   InlineColorPicker,
+  LABELED_DROPDOWN_POPOVER_WIDTH,
+  LOCKED_BADGE_COLOR,
+  LabeledDropdown,
   MONO_FONT,
   PopoverBody,
   PressAwayOverlay,
   ReadyButton,
   SectionedDropdown,
+  SharedActionBand,
+  StatRow,
+  StatSection,
   TriggerGaugeHost,
+  getLabeledDropdownContentHeight,
   loadSkiaWeb,
   useAutoAlign,
   usePopoverHost