@tastic/hud 0.24.0 → 0.25.0

package/dist/chrome/index.js

@@ -48,6 +48,7 @@ __export(chrome_exports, {
   PopoverBody: () => PopoverBody,
   PressAwayOverlay: () => PressAwayOverlay,
   RotatedFrame: () => RotatedFrame,
+  SecondaryButton: () => SecondaryButton,
   StaggeredWord: () => StaggeredWord,
   StatRow: () => StatRow,
   StatSection: () => StatSection,
@@ -239,7 +240,7 @@ function ActivityStatSection({ stats, fg, fgMuted, sectionBg }) {
 // src/BaseSettingsDialog.tsx
 var import_auto_paper6 = require("@rific/auto-paper");
 var import_core4 = require("@rific/core");
-var import_feedback_press2 = require("@rific/feedback-press");
+var import_feedback_press3 = require("@rific/feedback-press");
 var import_updater = require("@rific/updater");
 var import_core5 = require("@tastic/core");
 var import_react6 = require("react");
@@ -249,7 +250,7 @@ var import_react_native_safe_area_context2 = require("react-native-safe-area-con
 
 // src/ConfirmDialog.tsx
 var import_auto_paper5 = require("@rific/auto-paper");
-var import_feedback_press = require("@rific/feedback-press");
+var import_feedback_press2 = require("@rific/feedback-press");
 var import_core2 = require("@tastic/core");
 var import_react3 = require("react");
 var import_react_native10 = require("react-native");
@@ -382,6 +383,14 @@ var styles6 = import_react_native8.StyleSheet.create({
   card: { overflow: "hidden" }
 });
 
+// src/SecondaryButton.tsx
+var import_feedback_press = require("@rific/feedback-press");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function SecondaryButton({ style, ...props }) {
+  const { fg } = useOverlayCardColors();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_feedback_press.Button, { mode: "outlined", textColor: fg, ...props, style: [overlayActionStyles.actionButton, style] });
+}
+
 // src/useCompactDialog.ts
 var import_core = require("@tastic/core");
 var import_react2 = require("react");
@@ -400,7 +409,7 @@ function useCompactDialog(rotation = 0) {
 }
 
 // src/ConfirmDialog.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation = 0, icon = "help-circle-outline", destructive = false }) {
   const { colors } = (0, import_auto_paper5.useAutoPaperTheme)();
   const { fg } = useOverlayCardColors();
@@ -421,12 +430,12 @@ function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onC
   const accent = destructive ? colors.danger : colors.primary;
   const onAccent = destructive ? colors.onDanger : colors.onPrimary;
   const showCancel = cancelLabel !== void 0 && onCancel !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(OverlayBackdrop, { style: styles7.overlay, onLayout, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(OverlayCard, { style: [styles7.card, (0, import_core2.toRotationStyle)(rotation)], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogHeader, { icon, title, color: accent, compact }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper6.Text, { variant: "bodyLarge", style: [styles7.body, { color: fg }], children: message }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native10.View, { style: overlayActionStyles.actions, children: [
-      showCancel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_feedback_press.Button, { mode: "outlined", onPress: onCancel, style: overlayActionStyles.actionButton, children: cancelLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_feedback_press.Button, { mode: "contained", onPress: onConfirm, style: showCancel ? overlayActionStyles.actionButton : overlayActionStyles.actionButtonSingle, buttonColor: accent, textColor: onAccent, children: confirmLabel })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(OverlayBackdrop, { style: styles7.overlay, onLayout, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(OverlayCard, { style: [styles7.card, (0, import_core2.toRotationStyle)(rotation)], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogHeader, { icon, title, color: accent, compact }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper6.Text, { variant: "bodyLarge", style: [styles7.body, { color: fg }], children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native10.View, { style: overlayActionStyles.actions, children: [
+      showCancel && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SecondaryButton, { onPress: onCancel, children: cancelLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_feedback_press2.Button, { mode: "contained", onPress: onConfirm, style: showCancel ? overlayActionStyles.actionButton : overlayActionStyles.actionButtonSingle, buttonColor: accent, textColor: onAccent, children: confirmLabel })
     ] })
   ] }) }) });
 }
@@ -457,7 +466,7 @@ var import_react4 = require("react");
 var import_react_native11 = require("react-native");
 var import_react_native_paper7 = require("react-native-paper");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function RotatedFrame({ children, rotation: rotationOverride, rotatedSafeArea = false, portalHost = false, passThrough = false, maxContentWidth }) {
   const ambientRotation = (0, import_core3.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
@@ -466,8 +475,8 @@ function RotatedFrame({ children, rotation: rotationOverride, rotatedSafeArea =
   const rawInsets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
   const insets = (0, import_react4.useMemo)(() => rotatedSafeArea ? (0, import_core3.rotateInsets)(rawInsets, rotation) : rawInsets, [rotatedSafeArea, rawInsets, rotation]);
   const cappedWidth = maxContentWidth !== void 0 && width > height ? maxContentWidth : void 0;
-  const column = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native11.View, { style: [styles8.column, cappedWidth !== void 0 && { maxWidth: cappedWidth }], pointerEvents: passThrough ? "box-none" : void 0, children });
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core3.FakeLandscapeView, { rotation, passThrough, style: styles8.root, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_safe_area_context.SafeAreaInsetsContext.Provider, { value: insets, children: portalHost ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper7.Portal.Host, { children: column }) : column }) });
+  const column = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native11.View, { style: [styles8.column, cappedWidth !== void 0 && { maxWidth: cappedWidth }], pointerEvents: passThrough ? "box-none" : void 0, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core3.FakeLandscapeView, { rotation, passThrough, style: styles8.root, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_safe_area_context.SafeAreaInsetsContext.Provider, { value: insets, children: portalHost ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper7.Portal.Host, { children: column }) : column }) });
 }
 var styles8 = import_react_native11.StyleSheet.create({
   // A centred column: full width up to `maxWidth`, so a capped frame sits in the middle of a wider window.
@@ -502,9 +511,9 @@ function useUpdateConfirmBridge() {
 }
 
 // src/BaseSettingsDialog.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function SettingIcon({ source, color, containerColor }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: [styles9.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Icon, { source, size: 18, color }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native12.View, { style: [styles9.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper8.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, onShowHowToPlay, children }) {
   const { colors } = (0, import_auto_paper6.useAutoPaperTheme)();
@@ -516,12 +525,12 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
   const insets = (0, import_core5.rotateInsets)((0, import_react_native_safe_area_context2.useSafeAreaInsets)(), rotation);
   const sheetWidth = Math.min(overlayStyles.card.maxWidth, (turned ? window.height : window.width) - 2 * Math.max(insets.left, insets.right, SHEET_GUTTER));
   const isTouchPrimary = (0, import_core5.useIsTouchPrimaryDevice)();
-  const { settings: hapticSettings, set: setHapticSettings } = (0, import_feedback_press2.useHapticSettings)();
-  const { settings: soundSettings, set: setSoundSettings } = (0, import_feedback_press2.useSoundSettings)();
+  const { settings: hapticSettings, set: setHapticSettings } = (0, import_feedback_press3.useHapticSettings)();
+  const { settings: soundSettings, set: setSoundSettings } = (0, import_feedback_press3.useSoundSettings)();
   const { settings: keepAwakeSettings, set: setKeepAwakeSettings } = (0, import_core4.useKeepAwakeSettings)();
   const expoKeepAwake = (0, import_core4.useExpoKeepAwake)();
-  const sound = (0, import_react6.useContext)(import_feedback_press2.SoundContext);
-  const { forceShort: forceHapticFeedback } = (0, import_feedback_press2.useVibration)();
+  const sound = (0, import_react6.useContext)(import_feedback_press3.SoundContext);
+  const { forceShort: forceHapticFeedback } = (0, import_feedback_press3.useVibration)();
   const { settings: themeSettings, set: setThemeSettings } = (0, import_auto_paper6.useThemeSettings)();
   const expoBlur = (0, import_auto_paper6.useBlurModule)();
   const [infoMessage, setInfoMessage] = (0, import_react6.useState)(null);
@@ -545,36 +554,36 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
   const showBlur = showAppearance && import_react_native12.Platform.OS !== "android" && expoBlur !== void 0 && expoBlur !== null;
   const showUpdateCheck = import_react_native12.Platform.OS !== "web" && !hideUpdateCheck;
   if (!opened) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(RotatedFrame, { rotation, rotatedSafeArea: true, portalHost: true, passThrough: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_auto_paper6.Dialog, { visible, onDismiss, style: [styles9.dialog, { width: sheetWidth }], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_auto_paper6.Dialog.ScrollArea, { style: styles9.scrollArea, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_auto_paper6.FadingScrollView, { contentContainerStyle: styles9.scrollContent, showsVerticalScrollIndicator: false, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogHeader, { icon: "cog", title: "Settings", compact: compactHeader }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.content, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleGroup, children: [
-            showLockOrientation && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => onLockOrientationChange(!lockOrientation), style: styles9.toggleButton, accessibilityLabel: `Lock orientation ${lockOrientation ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SettingIcon, { source: lockOrientation ? "lock" : "lock-open-variant-outline", color: lockOrientation ? colors.tertiary : colors.onSurfaceVariant, containerColor: lockOrientation ? colors.tertiaryContainer : colors.surfaceVariant }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.flexShrink, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Lock Orientation" }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Pin current layout" })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper8.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(RotatedFrame, { rotation, rotatedSafeArea: true, portalHost: true, passThrough: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_auto_paper6.Dialog, { visible, onDismiss, style: [styles9.dialog, { width: sheetWidth }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_auto_paper6.Dialog.ScrollArea, { style: styles9.scrollArea, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_auto_paper6.FadingScrollView, { contentContainerStyle: styles9.scrollContent, showsVerticalScrollIndicator: false, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogHeader, { icon: "cog", title: "Settings", compact: compactHeader }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: styles9.content, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: styles9.toggleGroup, children: [
+            showLockOrientation && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => onLockOrientationChange(!lockOrientation), style: styles9.toggleButton, accessibilityLabel: `Lock orientation ${lockOrientation ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SettingIcon, { source: lockOrientation ? "lock" : "lock-open-variant-outline", color: lockOrientation ? colors.tertiary : colors.onSurfaceVariant, containerColor: lockOrientation ? colors.tertiaryContainer : colors.surfaceVariant }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: styles9.flexShrink, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Lock Orientation" }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper8.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Pin current layout" })
               ] })
             ] }) }),
-            showEdgeGuard && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => onDeferBottomEdgeGestures(!deferBottomEdgeGestures), style: styles9.toggleButton, accessibilityLabel: `Edge guard ${deferBottomEdgeGestures ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SettingIcon, { source: deferBottomEdgeGestures ? "shield-check-outline" : "shield-off-outline", color: deferBottomEdgeGestures ? colors.tertiary : colors.onSurfaceVariant, containerColor: deferBottomEdgeGestures ? colors.tertiaryContainer : colors.surfaceVariant }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.flexShrink, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Edge Guard" }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Require second swipe" })
+            showEdgeGuard && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => onDeferBottomEdgeGestures(!deferBottomEdgeGestures), style: styles9.toggleButton, accessibilityLabel: `Edge guard ${deferBottomEdgeGestures ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SettingIcon, { source: deferBottomEdgeGestures ? "shield-check-outline" : "shield-off-outline", color: deferBottomEdgeGestures ? colors.tertiary : colors.onSurfaceVariant, containerColor: deferBottomEdgeGestures ? colors.tertiaryContainer : colors.surfaceVariant }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: styles9.flexShrink, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Edge Guard" }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper8.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Require second swipe" })
               ] })
             ] }) }),
-            showKeepAwake && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => setKeepAwakeSettings({ enabled: !keepAwakeSettings.enabled }), style: styles9.toggleButton, accessibilityLabel: `Keep awake ${keepAwakeSettings.enabled ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SettingIcon, { source: keepAwakeSettings.enabled ? "eye" : "eye-closed", color: keepAwakeSettings.enabled ? colors.tertiary : colors.onSurfaceVariant, containerColor: keepAwakeSettings.enabled ? colors.tertiaryContainer : colors.surfaceVariant }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.flexShrink, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Keep Awake" }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Stop auto-lock mid-match" })
+            showKeepAwake && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => setKeepAwakeSettings({ enabled: !keepAwakeSettings.enabled }), style: styles9.toggleButton, accessibilityLabel: `Keep awake ${keepAwakeSettings.enabled ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SettingIcon, { source: keepAwakeSettings.enabled ? "eye" : "eye-closed", color: keepAwakeSettings.enabled ? colors.tertiary : colors.onSurfaceVariant, containerColor: keepAwakeSettings.enabled ? colors.tertiaryContainer : colors.surfaceVariant }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: styles9.flexShrink, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Keep Awake" }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper8.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Stop auto-lock mid-match" })
               ] })
             ] }) }),
-            (showSound || showHaptics) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleRow, children: [
-              showSound && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                import_feedback_press2.TouchableRipple,
+            (showSound || showHaptics) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: styles9.toggleRow, children: [
+              showSound && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_feedback_press3.TouchableRipple,
                 {
                   soundDisabled: true,
                   onPress: () => {
@@ -584,14 +593,14 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
                   },
                   style: styles9.toggleButtonInRow,
                   accessibilityLabel: `Sound ${soundSettings.enabled ? "on" : "off"}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Sound" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Sound" })
                   ] })
                 }
               ),
-              showHaptics && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                import_feedback_press2.TouchableRipple,
+              showHaptics && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_feedback_press3.TouchableRipple,
                 {
                   hapticDisabled: true,
                   onPress: () => {
@@ -601,15 +610,15 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
                   },
                   style: styles9.toggleButtonInRow,
                   accessibilityLabel: `Haptics ${hapticSettings.vibrate ? "on" : "off"}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Haptics" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Haptics" })
                   ] })
                 }
               )
             ] }),
-            onShowHowToPlay && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              import_feedback_press2.TouchableRipple,
+            onShowHowToPlay && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              import_feedback_press3.TouchableRipple,
               {
                 onPress: () => {
                   onDismiss();
@@ -617,42 +626,42 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
                 },
                 style: styles9.toggleButton,
                 accessibilityLabel: "How to Play",
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SettingIcon, { source: "help-circle-outline", color: colors.secondary, containerColor: colors.secondaryContainer }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.flexShrink, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "How to Play" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Replay quick intro" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SettingIcon, { source: "help-circle-outline", color: colors.secondary, containerColor: colors.secondaryContainer }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: styles9.flexShrink, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "How to Play" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper8.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Replay quick intro" })
                   ] })
                 ] })
               }
             )
           ] }),
-          showAppearance && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.section, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "labelMedium", style: [styles9.sectionLabel, { color: colors.onSurfaceVariant }], children: "APPEARANCE" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_auto_paper6.AutoAppearancePicker, { showLabels: false }),
-            showBlur && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => setThemeSettings({ blur: !themeSettings.blur }), style: styles9.toggleButton, accessibilityLabel: `Blur ${themeSettings.blur ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SettingIcon, { source: themeSettings.blur ? "blur" : "blur-off", color: themeSettings.blur ? colors.tertiary : colors.onSurfaceVariant, containerColor: themeSettings.blur ? colors.tertiaryContainer : colors.surfaceVariant }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.flexShrink, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Blur" }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Frost behind dialogs" })
+          showAppearance && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: styles9.section, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper8.Text, { variant: "labelMedium", style: [styles9.sectionLabel, { color: colors.onSurfaceVariant }], children: "APPEARANCE" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_auto_paper6.AutoAppearancePicker, { showLabels: false }),
+            showBlur && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => setThemeSettings({ blur: !themeSettings.blur }), style: styles9.toggleButton, accessibilityLabel: `Blur ${themeSettings.blur ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SettingIcon, { source: themeSettings.blur ? "blur" : "blur-off", color: themeSettings.blur ? colors.tertiary : colors.onSurfaceVariant, containerColor: themeSettings.blur ? colors.tertiaryContainer : colors.surfaceVariant }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: styles9.flexShrink, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Blur" }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper8.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Frost behind dialogs" })
               ] })
             ] }) })
           ] }),
           children,
-          showUpdateCheck && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.section, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native_paper8.Text, { variant: "labelMedium", style: [styles9.sectionLabel, { color: colors.onSurfaceVariant }], children: [
+          showUpdateCheck && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: styles9.section, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native_paper8.Text, { variant: "labelMedium", style: [styles9.sectionLabel, { color: colors.onSurfaceVariant }], children: [
               "VERSION ",
               version,
               updateReady ? " \xB7 UPDATE READY" : ""
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press2.Button, { mode: "outlined", onPress: check, loading: checking, disabled: checking, children: "Check for Updates" })
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press3.Button, { mode: "outlined", onPress: check, loading: checking, disabled: checking, children: "Check for Updates" })
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: [overlayActionStyles.actions, styles9.footer], children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press2.Button, { mode: "contained", onPress: onDismiss, style: overlayActionStyles.actionButtonSingle, buttonColor: colors.primary, textColor: colors.onPrimary, children: "Done" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native12.View, { style: [overlayActionStyles.actions, styles9.footer], children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press3.Button, { mode: "contained", onPress: onDismiss, style: overlayActionStyles.actionButtonSingle, buttonColor: colors.primary, textColor: colors.onPrimary, children: "Done" }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ConfirmDialog, { visible: !!updateManifest, title: "Update Available", message: updateManifestDate ? `Released ${updateManifestDate.toLocaleDateString()} at ${updateManifestDate.toLocaleTimeString()}` : "", confirmLabel: "Restart", cancelLabel: "Later", icon: "update", rotation: 0, onConfirm: () => respondToUpdateConfirm(true), onCancel: () => respondToUpdateConfirm(false) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ConfirmDialog, { visible: !!infoMessage, title: infoMessage?.title ?? "", message: infoMessage?.message ?? "", confirmLabel: "OK", icon: "information-outline", rotation: 0, onConfirm: () => setInfoMessage(null), onCancel: () => setInfoMessage(null) })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ConfirmDialog, { visible: !!updateManifest, title: "Update Available", message: updateManifestDate ? `Released ${updateManifestDate.toLocaleDateString()} at ${updateManifestDate.toLocaleTimeString()}` : "", confirmLabel: "Restart", cancelLabel: "Later", icon: "update", rotation: 0, onConfirm: () => respondToUpdateConfirm(true), onCancel: () => respondToUpdateConfirm(false) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ConfirmDialog, { visible: !!infoMessage, title: infoMessage?.title ?? "", message: infoMessage?.message ?? "", confirmLabel: "OK", icon: "information-outline", rotation: 0, onConfirm: () => setInfoMessage(null), onCancel: () => setInfoMessage(null) })
   ] }) });
 }
 var SHEET_GUTTER = 24;
@@ -741,12 +750,12 @@ var styles9 = import_react_native12.StyleSheet.create({
 
 // src/BaseStatsScreen.tsx
 var import_auto_paper7 = require("@rific/auto-paper");
-var import_feedback_press3 = require("@rific/feedback-press");
+var import_feedback_press4 = require("@rific/feedback-press");
 var import_core6 = require("@tastic/core");
 var import_react7 = require("react");
 var import_react_native13 = require("react-native");
 var import_react_native_paper9 = require("react-native-paper");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", titleVariant = "headlineSmall", onBack, backLabel = "Back", hitSlop, insets, onReset, resetLabel = "Reset All Stats", resetConfirmTitle = "Reset Everything?", resetConfirmBody = "This permanently erases all stats and achievements. This cannot be undone.", fg: fgOverride, bg: bgOverride, children }) {
   const { dark, colors } = (0, import_auto_paper7.useAutoPaperTheme)();
   const ambientRotation = (0, import_core6.useRotation)();
@@ -755,16 +764,16 @@ function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", t
   const showReset = !!onReset;
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const bg = bgOverride ?? (dark ? "#000000" : "#FFFFFF");
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.View, { style: [styles10.container, { backgroundColor: bg }], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.View, { style: [styles10.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper9.Text, { variant: titleVariant, style: [styles10.title, { color: fg }], children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native13.View, { style: [styles10.container, { backgroundColor: bg }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native13.View, { style: [styles10.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_feedback_press4.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_paper9.Text, { variant: titleVariant, style: [styles10.title, { color: fg }], children: title })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_auto_paper7.FadingScrollView, { style: styles10.scrollView, contentContainerStyle: [styles10.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_auto_paper7.FadingScrollView, { style: styles10.scrollView, contentContainerStyle: [styles10.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
       children,
-      showReset && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press3.Button, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.danger, textColor: colors.onDanger, style: styles10.resetButton, children: resetLabel })
+      showReset && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_feedback_press4.Button, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.danger, textColor: colors.onDanger, style: styles10.resetButton, children: resetLabel })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       ConfirmDialog,
       {
         visible: confirmResetVisible,
@@ -817,14 +826,14 @@ var styles10 = import_react_native13.StyleSheet.create({
 // src/ContentGutter.tsx
 var import_core7 = require("@tastic/core");
 var import_react_native14 = require("react-native");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }) {
   const { width: windowWidth } = (0, import_core7.useRotatedWindowDimensions)();
   const { contentWidth, gutterWidth } = (0, import_core7.computeContentBounds)(windowWidth, maxContentWidth ?? Infinity);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native14.View, { style: [styles11.row, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native14.View, { style: [styles11.gutter, { width: gutterWidth }], children: leftGutter }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native14.View, { style: { width: contentWidth }, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native14.View, { style: [styles11.gutter, { width: gutterWidth }], children: rightGutter })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native14.View, { style: [styles11.row, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native14.View, { style: [styles11.gutter, { width: gutterWidth }], children: leftGutter }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native14.View, { style: { width: contentWidth }, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native14.View, { style: [styles11.gutter, { width: gutterWidth }], children: rightGutter })
   ] });
 }
 var styles11 = import_react_native14.StyleSheet.create({
@@ -839,13 +848,13 @@ var styles11 = import_react_native14.StyleSheet.create({
 });
 
 // src/CornerActionButtons.tsx
-var import_feedback_press4 = require("@rific/feedback-press");
+var import_feedback_press5 = require("@rific/feedback-press");
 var import_react_native15 = require("react-native");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = "arrow-left", backLabel = "Back", hitSlop }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_feedback_press4.IconButton, { icon: backIcon, iconColor: fg, size: 24, style: [styles12.back, { top: 8 + insets.top, left: 8 + insets.left }], hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_feedback_press4.IconButton, { icon: "cog", iconColor: fg, size: 24, style: [styles12.topRight, { top: 8 + insets.top, right: 8 + insets.right }], hitSlop, onPress: onSettings, accessibilityLabel: "Settings" })
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_feedback_press5.IconButton, { icon: backIcon, iconColor: fg, size: 24, style: [styles12.back, { top: 8 + insets.top, left: 8 + insets.left }], hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_feedback_press5.IconButton, { icon: "cog", iconColor: fg, size: 24, style: [styles12.topRight, { top: 8 + insets.top, right: 8 + insets.right }], hitSlop, onPress: onSettings, accessibilityLabel: "Settings" })
   ] });
 }
 var styles12 = import_react_native15.StyleSheet.create({
@@ -859,14 +868,14 @@ var styles12 = import_react_native15.StyleSheet.create({
 
 // src/InlineColorPicker.tsx
 var import_auto_paper8 = require("@rific/auto-paper");
-var import_feedback_press5 = require("@rific/feedback-press");
+var import_feedback_press6 = require("@rific/feedback-press");
 var import_core8 = require("@tastic/core");
 var import_react_native18 = require("react-native");
 var import_react_native_paper10 = require("react-native-paper");
 
 // src/PopoverBody.tsx
 var import_react_native16 = require("react-native");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var CARET_SIZE = 7;
 var CARET_RING_OFFSET = 2;
 var CARET_DIP = 1;
@@ -880,11 +889,11 @@ 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_runtime14.jsxs)(import_react_native16.View, { style: [styles13.content, alignStyle, verticalStyle], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native16.View, { style: [styles13.content, alignStyle, verticalStyle], children: [
     children,
-    caretColor && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native16.View, { style: [styles13.caret, caretOffset(ringSize), caretEdge(ringSize), { [caretFill]: caretBorderColor ?? caretColor, [caretWidthProp]: ringSize, borderLeftWidth: ringSize, borderRightWidth: ringSize }] }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native16.View, { style: [styles13.caret, caretOffset(CARET_SIZE), caretEdge(CARET_SIZE - CARET_RING_OFFSET), { [caretFill]: caretColor, [caretWidthProp]: CARET_SIZE, borderLeftWidth: CARET_SIZE, borderRightWidth: CARET_SIZE }] })
+    caretColor && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native16.View, { style: [styles13.caret, caretOffset(ringSize), caretEdge(ringSize), { [caretFill]: caretBorderColor ?? caretColor, [caretWidthProp]: ringSize, borderLeftWidth: ringSize, borderRightWidth: ringSize }] }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native16.View, { style: [styles13.caret, caretOffset(CARET_SIZE), caretEdge(CARET_SIZE - CARET_RING_OFFSET), { [caretFill]: caretColor, [caretWidthProp]: CARET_SIZE, borderLeftWidth: CARET_SIZE, borderRightWidth: CARET_SIZE }] })
     ] })
   ] });
 }
@@ -943,7 +952,7 @@ function rotateRect(x, y, width, height, rotation, windowWidth, windowHeight) {
   const [newDx, newDy, newWidth, newHeight] = rotation === 180 ? [-dx, -dy, width, height] : rotation === 90 ? [-dy, dx, height, width] : [dy, -dx, height, width];
   return { x: cx + newDx - newWidth / 2, y: cy + newDy - newHeight / 2, width: newWidth, height: newHeight };
 }
-function useAutoAlign(open, contentWidth, contentHeight, rotation = 0) {
+function useAutoAlign(open, contentWidth, contentHeight, rotation = 0, bounds) {
   const triggerRef = (0, import_react8.useRef)(null);
   const { width: windowWidth, height: windowHeight } = (0, import_react_native17.useWindowDimensions)();
   const [align, setAlign] = (0, import_react8.useState)("center");
@@ -955,34 +964,43 @@ function useAutoAlign(open, contentWidth, contentHeight, rotation = 0) {
     setPrevOpen(open);
     if (open) setMeasured(false);
   }
-  const measure = (0, import_react8.useCallback)(() => {
-    triggerRef.current?.measureInWindow((rawX, rawY, rawWidth, rawHeight) => {
+  (0, import_react8.useEffect)(() => {
+    if (!open) return;
+    const place = (limits) => (rawX, rawY, rawWidth, rawHeight) => {
       const { x, y, width: triggerWidth, height: triggerHeight } = rotateRect(rawX, rawY, rawWidth, rawHeight, rotation, windowWidth, windowHeight);
       const centerX = x + triggerWidth / 2;
-      const overflowsRight = centerX + contentWidth / 2 > windowWidth - EDGE_MARGIN;
-      const overflowsLeft = centerX - contentWidth / 2 < EDGE_MARGIN;
+      const overflowsRight = centerX + contentWidth / 2 > limits.right - EDGE_MARGIN;
+      const overflowsLeft = centerX - contentWidth / 2 < limits.left + EDGE_MARGIN;
       if (overflowsRight && !overflowsLeft) setAlign("right");
       else if (overflowsLeft && !overflowsRight) setAlign("left");
       else setAlign("center");
-      const roomBelow = windowHeight - (y + triggerHeight) - EDGE_MARGIN;
-      const roomAbove = y - EDGE_MARGIN;
+      const roomBelow = limits.bottom - (y + triggerHeight) - EDGE_MARGIN;
+      const roomAbove = y - limits.top - EDGE_MARGIN;
       const above = contentHeight > roomBelow && roomAbove > roomBelow;
       setVerticalAlign(above ? "above" : "below");
       setMaxHeight(Math.max(above ? roomAbove : roomBelow, 0));
       setMeasured(true);
+    };
+    const screen = { left: 0, top: 0, right: windowWidth, bottom: windowHeight };
+    const boundsView = bounds?.current;
+    if (!boundsView) {
+      triggerRef.current?.measureInWindow(place(screen));
+      return;
+    }
+    boundsView.measureInWindow((rawX, rawY, rawWidth, rawHeight) => {
+      const b = rotateRect(rawX, rawY, rawWidth, rawHeight, rotation, windowWidth, windowHeight);
+      triggerRef.current?.measureInWindow(place({ left: Math.max(b.x, 0), top: Math.max(b.y, 0), right: Math.min(b.x + b.width, windowWidth), bottom: Math.min(b.y + b.height, windowHeight) }));
     });
-  }, [contentWidth, contentHeight, windowWidth, windowHeight, rotation]);
-  (0, import_react8.useEffect)(() => {
-    if (open) measure();
-  }, [open, measure]);
+  }, [open, contentWidth, contentHeight, windowWidth, windowHeight, rotation, bounds]);
   return { align, maxHeight, measured, triggerRef, verticalAlign };
 }
 
 // src/InlineColorPicker.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
 var DEFAULT_SIZE = 48;
 var SWATCH_SIZE = 28;
+var SWATCH_RING_WIDTH = 2;
 var SWATCHES_PADDING = 8;
 var SWATCHES_GAP = 6;
 var SWATCHES_BORDER_WIDTH = 2;
@@ -1000,14 +1018,17 @@ function getInlineColorPickerContentSize(swatchCount, windowWidth, columns) {
   const height = SWATCHES_BORDER_WIDTH * 2 + SWATCHES_PADDING * 2 + SWATCH_SIZE * rows + SWATCHES_GAP * (rows - 1);
   return { width, height };
 }
-function InlineColorPicker({ id, host, value, onChange, previewValue, swatches = import_auto_paper8.defaultColors, takenValue, allowSwapTaken, dark, align: forcedAlign, alignOverride, rotation: rotationOverride, icon = "palette", tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }) {
+function SwatchDrawing({ size, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native18.View, { style: [styles14.drawing, { borderRadius: size / 2, height: size, width: size }], children });
+}
+function InlineColorPicker({ id, host, value, onChange, previewValue, swatches = import_auto_paper8.defaultColors, takenValue, allowSwapTaken, dark, align: forcedAlign, alignOverride, rotation: rotationOverride, icon = "palette", tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE, renderSwatch, bounds }) {
   const ambientRotation = (0, import_core8.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
   const menuBg = dark ? "#000000" : "#FFFFFF";
   const { width: windowWidth } = (0, import_react_native18.useWindowDimensions)();
   const { width: swatchesWidth, height: swatchesHeight } = getInlineColorPickerContentSize(swatches.length, windowWidth, columns);
   const open = host.openId === id;
-  const auto = useAutoAlign(open, swatchesWidth, swatchesHeight, rotation);
+  const auto = useAutoAlign(open, swatchesWidth, swatchesHeight, rotation, bounds);
   const placement = alignOverride ?? auto;
   const { maxHeight, measured, triggerRef, verticalAlign } = placement;
   const align = forcedAlign ?? placement.align;
@@ -1015,15 +1036,23 @@ function InlineColorPicker({ id, host, value, onChange, previewValue, swatches =
   const displayValue = displayFor(value);
   const contrastColor = (0, import_auto_paper8.getContrastColor)(displayValue);
   const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : 0.4);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native18.View, { style: [styles14.anchor, open && styles14.anchorOpen], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_feedback_press5.TouchableRipple, { onPress: () => host.toggle(id), borderless: true, style: [styles14.trigger, { backgroundColor: displayValue, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native18.View, { ref: triggerRef, collapsable: false, style: styles14.triggerMeasure, children: tag ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_paper10.Text, { style: [styles14.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_paper10.Icon, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: displayValue, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: size, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native18.ScrollView, { style: [styles14.swatches, { backgroundColor: menuBg, borderColor: displayValue, width: swatchesWidth, maxHeight }], contentContainerStyle: styles14.swatchesContent, showsVerticalScrollIndicator: false, children: swatches.map((swatch) => {
+  const triggerDrawing = renderSwatch?.(displayValue, size, "trigger") ?? null;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native18.View, { style: [styles14.anchor, open && styles14.anchorOpen], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_feedback_press6.TouchableRipple, { onPress: () => host.toggle(id), borderless: true, style: [styles14.trigger, triggerDrawing === null && { backgroundColor: displayValue }, { borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native18.View, { ref: triggerRef, collapsable: false, style: styles14.triggerMeasure, children: [
+      triggerDrawing !== null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SwatchDrawing, { size, children: triggerDrawing }),
+      tag ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper10.Text, { style: [styles14.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper10.Icon, { source: icon, size: size * 0.6, color: contrastColor })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: displayValue, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: size, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native18.ScrollView, { style: [styles14.swatches, { backgroundColor: menuBg, borderColor: displayValue, width: swatchesWidth, maxHeight }], contentContainerStyle: styles14.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;
       const swatchDisplay = displayFor(swatch.value);
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        import_feedback_press5.TouchableRipple,
+      const contrast = (0, import_auto_paper8.getContrastColor)(swatchDisplay);
+      const drawnSize = selected ? SWATCH_SIZE - 2 * SWATCH_RING_WIDTH : SWATCH_SIZE;
+      const drawing = renderSwatch?.(swatchDisplay, drawnSize, "swatch") ?? null;
+      const mark = selected ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper10.Icon, { source: "check", size: 16, color: contrast }) : swappable ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper10.Icon, { source: "swap-horizontal", size: 16, color: contrast }) : taken ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper10.Icon, { source: "close", size: 16, color: contrast }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native18.View, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        import_feedback_press6.TouchableRipple,
         {
           disabled: taken && !swappable,
           onPress: () => {
@@ -1031,8 +1060,11 @@ function InlineColorPicker({ id, host, value, onChange, previewValue, swatches =
             if (autoDismiss) host.close();
           },
           borderless: true,
-          style: [styles14.swatch, { backgroundColor: swatchDisplay }, selected && styles14.swatchSelected, taken && !swappable && styles14.swatchTaken],
-          children: selected ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_paper10.Icon, { source: "check", size: 16, color: (0, import_auto_paper8.getContrastColor)(swatchDisplay) }) : swappable ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_paper10.Icon, { source: "swap-horizontal", size: 16, color: (0, import_auto_paper8.getContrastColor)(swatchDisplay) }) : taken ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_paper10.Icon, { source: "close", size: 16, color: (0, import_auto_paper8.getContrastColor)(swatchDisplay) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native18.View, {})
+          style: [styles14.swatch, drawing === null && { backgroundColor: swatchDisplay }, selected && styles14.swatchSelected, taken && !swappable && styles14.swatchTaken],
+          children: drawing !== null ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native18.View, { style: styles14.swatchFace, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SwatchDrawing, { size: drawnSize, children: drawing }),
+            mark
+          ] }) : mark
         },
         swatch.value
       );
@@ -1049,6 +1081,14 @@ var styles14 = import_react_native18.StyleSheet.create({
   anchorOpen: {
     zIndex: 100
   },
+  // A renderSwatch drawing (see SwatchDrawing).
+  drawing: {
+    left: 0,
+    overflow: "hidden",
+    pointerEvents: "none",
+    position: "absolute",
+    top: 0
+  },
   swatch: {
     alignItems: "center",
     borderRadius: SWATCH_SIZE / 2,
@@ -1056,9 +1096,19 @@ var styles14 = import_react_native18.StyleSheet.create({
     justifyContent: "center",
     width: SWATCH_SIZE
   },
+  // A drawn swatch (see SwatchDrawing) and its mark: the whole circle inside the selected one's ring.
+  swatchFace: {
+    alignItems: "center",
+    bottom: 0,
+    justifyContent: "center",
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0
+  },
   swatchSelected: {
     borderColor: "#ffffff",
-    borderWidth: 2
+    borderWidth: SWATCH_RING_WIDTH
   },
   swatchTaken: {
     opacity: 0.35
@@ -1112,17 +1162,17 @@ var styles14 = import_react_native18.StyleSheet.create({
 
 // src/PressAwayOverlay.tsx
 var import_react_native19 = require("react-native");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function PressAwayOverlay({ active, onPress, style }) {
   if (!active) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [import_react_native19.StyleSheet.absoluteFill, style] });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native19.Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [import_react_native19.StyleSheet.absoluteFill, style] });
 }
 
 // src/StaggeredWord.tsx
 var import_react9 = require("react");
 var import_react_native20 = require("react-native");
 var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var STAGGER_MS = 45;
 var LETTER_DURATION_MS = 320;
 function getStaggeredWordDuration(letterCount) {
@@ -1138,10 +1188,10 @@ function AnimatedLetter({ char, index, color, reducedMotion, fontFamily, fontSiz
     opacity: progress.value,
     transform: [{ translateY: (1 - progress.value) * 12 }, { scale: 0.85 + progress.value * 0.15 }]
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_reanimated.default.Text, { allowFontScaling: false, style: [{ color, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, style], children: char });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_reanimated.default.Text, { allowFontScaling: false, style: [{ color, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, style], children: char });
 }
 function StaggeredWord({ word, color, fontFamily, fontSize, lineHeight, reducedMotion, startIndex = 0, fontWeight = "bold", letterSpacing, style, onLayout }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native20.View, { style: [styles15.row, style], onLayout, children: word.split("").map((char, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AnimatedLetter, { char, index: startIndex + i, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, i)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native20.View, { style: [styles15.row, style], onLayout, children: word.split("").map((char, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AnimatedLetter, { char, index: startIndex + i, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, i)) });
 }
 var styles15 = import_react_native20.StyleSheet.create({
   row: {
@@ -1151,12 +1201,12 @@ var styles15 = import_react_native20.StyleSheet.create({
 
 // src/UpdateDialog.tsx
 var import_updater2 = require("@rific/updater");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function UpdateDialog({ rotation = 0, autoCheck = true, autoPrompt = true, onError }) {
   const { manifest, onConfirm, respond } = useUpdateConfirmBridge();
   (0, import_updater2.useUpdater)({ autoCheck, autoPrompt, onConfirm, onError });
   const date = manifest ? new Date(manifest.createdAt) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ConfirmDialog, { visible: !!manifest, title: "Update Available", message: date ? `Released ${date.toLocaleDateString()} at ${date.toLocaleTimeString()}` : "", confirmLabel: "Restart", cancelLabel: "Later", icon: "update", rotation, onConfirm: () => respond(true), onCancel: () => respond(false) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ConfirmDialog, { visible: !!manifest, title: "Update Available", message: date ? `Released ${date.toLocaleDateString()} at ${date.toLocaleTimeString()}` : "", confirmLabel: "Restart", cancelLabel: "Later", icon: "update", rotation, onConfirm: () => respond(true), onCancel: () => respond(false) });
 }
 
 // src/usePopoverHost.ts
@@ -1189,6 +1239,7 @@ function usePopoverHost() {
   PopoverBody,
   PressAwayOverlay,
   RotatedFrame,
+  SecondaryButton,
   StaggeredWord,
   StatRow,
   StatSection,