@tastic/hud 0.21.0 → 0.23.0

package/dist/chrome/index.js

@@ -40,21 +40,29 @@ __export(chrome_exports, {
   ContentGutter: () => ContentGutter,
   CornerActionButtons: () => CornerActionButtons,
   DialogHeader: () => DialogHeader,
+  InlineColorPicker: () => InlineColorPicker,
   LOCKED_BADGE_COLOR: () => LOCKED_BADGE_COLOR,
   MONO_FONT: () => MONO_FONT,
   OverlayBackdrop: () => OverlayBackdrop,
   OverlayCard: () => OverlayCard,
+  PopoverBody: () => PopoverBody,
+  PressAwayOverlay: () => PressAwayOverlay,
   RotatedFrame: () => RotatedFrame,
   StaggeredWord: () => StaggeredWord,
   StatRow: () => StatRow,
   StatSection: () => StatSection,
   UpdateDialog: () => UpdateDialog,
+  WELL_SHADOW: () => WELL_SHADOW,
+  getInlineColorPickerContentSize: () => getInlineColorPickerContentSize,
   getStaggeredWordDuration: () => getStaggeredWordDuration,
   isCompactDialogHeight: () => isCompactDialogHeight,
   overlayActionStyles: () => overlayActionStyles,
   overlayStyles: () => overlayStyles,
+  useAutoAlign: () => useAutoAlign,
   useCompactDialog: () => useCompactDialog,
-  useOverlayCardColors: () => useOverlayCardColors
+  useOverlayCardColors: () => useOverlayCardColors,
+  usePopoverHost: () => usePopoverHost,
+  useWellColors: () => useWellColors
 });
 module.exports = __toCommonJS(chrome_exports);
 
@@ -65,16 +73,25 @@ var import_react_native3 = require("react-native");
 var import_react_native_paper2 = require("react-native-paper");
 
 // src/AchievementRow.tsx
-var import_auto_paper = require("@rific/auto-paper");
 var import_react_native = require("react-native");
 var import_react_native_paper = require("react-native-paper");
+
+// src/wellSurface.ts
+var import_auto_paper = require("@rific/auto-paper");
+var WELL_SHADOW = "0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)";
+function useWellColors() {
+  const { colors } = (0, import_auto_paper.useAutoPaperTheme)();
+  return { bg: colors.surface, fg: colors.onSurface, fgMuted: colors.onSurfaceVariant };
+}
+
+// src/AchievementRow.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
 function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }) {
-  const { dark } = (0, import_auto_paper.useAutoPaperTheme)();
-  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
-  const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
-  const sectionBg = sectionBgOverride ?? (dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)");
+  const well = useWellColors();
+  const fg = fgOverride ?? well.fg;
+  const fgMuted = fgMutedOverride ?? well.fgMuted;
+  const sectionBg = sectionBgOverride ?? well.bg;
   const unlocked = unlockedLabel !== void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: [styles.row, { backgroundColor: sectionBg }], children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.badge, { backgroundColor: badgeColor }], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Icon, { source: icon, size: 20, color: unlocked ? "#000000" : fgMuted }) }),
@@ -117,6 +134,7 @@ var styles = import_react_native.StyleSheet.create({
   row: {
     alignItems: "center",
     borderRadius: 12,
+    boxShadow: WELL_SHADOW,
     flexDirection: "row",
     gap: 12,
     padding: 12
@@ -138,13 +156,13 @@ var MONO_FONT = import_react_native2.Platform.select({ ios: "Menlo", android: "m
 
 // src/AchievementCatalogSection.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function AchievementCatalogSection({ rows, label = "ALL ACHIEVEMENTS", fg, fgMuted: fgMutedOverride }) {
+function AchievementCatalogSection({ rows, label = "ALL ACHIEVEMENTS", fg, fgMuted: fgMutedOverride, sectionBg }) {
   const { dark } = (0, import_auto_paper2.useAutoPaperTheme)();
   const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
   const tierAccent = (tierColor) => dark ? tierColor : (0, import_auto_paper2.getBlendedColor)("#000000", tierColor, 0.5);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "labelMedium", style: [styles2.label, { color: fgMuted, fontFamily: MONO_FONT }], children: label }),
-    rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AchievementRow, { icon: row.icon, title: row.title, description: row.description, badgeColor: row.unlockedAt !== void 0 ? row.tierColor : LOCKED_BADGE_COLOR, checkColor: tierAccent(row.tierColor), unlockedLabel: row.unlockedLabel, progress: row.progress, deviceMarker: row.deviceMarker, fg, fgMuted: fgMutedOverride }, row.id))
+    rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AchievementRow, { icon: row.icon, title: row.title, description: row.description, badgeColor: row.unlockedAt !== void 0 ? row.tierColor : LOCKED_BADGE_COLOR, checkColor: tierAccent(row.tierColor), unlockedLabel: row.unlockedLabel, progress: row.progress, deviceMarker: row.deviceMarker, fg, fgMuted: fgMutedOverride, sectionBg }, row.id))
   ] });
 }
 var styles2 = import_react_native3.StyleSheet.create({
@@ -155,14 +173,13 @@ var styles2 = import_react_native3.StyleSheet.create({
 });
 
 // src/StatRow.tsx
-var import_auto_paper3 = require("@rific/auto-paper");
 var import_react_native4 = require("react-native");
 var import_react_native_paper3 = require("react-native-paper");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }) {
-  const { dark } = (0, import_auto_paper3.useAutoPaperTheme)();
-  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
-  const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
+  const well = useWellColors();
+  const fg = fgOverride ?? well.fg;
+  const fgMuted = fgMutedOverride ?? well.fgMuted;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: styles3.row, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodyMedium", style: { color: fgMuted }, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodyMedium", style: [styles3.value, { color: fg }], children: value })
@@ -180,14 +197,13 @@ var styles3 = import_react_native4.StyleSheet.create({
 });
 
 // src/StatSection.tsx
-var import_auto_paper4 = require("@rific/auto-paper");
 var import_react_native5 = require("react-native");
 var import_react_native_paper4 = require("react-native-paper");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }) {
-  const { dark } = (0, import_auto_paper4.useAutoPaperTheme)();
-  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
-  const sectionBg = sectionBgOverride ?? (dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)");
+  const well = useWellColors();
+  const fg = fgOverride ?? well.fg;
+  const sectionBg = sectionBgOverride ?? well.bg;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native5.View, { style: [styles4.section, { backgroundColor: sectionBg }], children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Text, { variant: "labelMedium", style: [styles4.label, { color: fg }], children: label }),
     children
@@ -204,6 +220,7 @@ var styles4 = import_react_native5.StyleSheet.create({
   },
   section: {
     borderRadius: 12,
+    boxShadow: WELL_SHADOW,
     gap: 8,
     padding: 16
   }
@@ -211,26 +228,27 @@ var styles4 = import_react_native5.StyleSheet.create({
 
 // src/ActivityStatSection.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function ActivityStatSection({ stats }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(StatSection, { label: "ACTIVITY", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatRow, { label: "Days Played", value: String(stats.distinctDaysPlayed) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatRow, { label: "Day Streak", value: String(stats.currentDayStreak) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatRow, { label: "Best Day Streak", value: String(stats.bestDayStreak) })
+function ActivityStatSection({ stats, fg, fgMuted, sectionBg }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(StatSection, { label: "ACTIVITY", fg, sectionBg, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatRow, { label: "Days Played", value: String(stats.distinctDaysPlayed), fg, fgMuted }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatRow, { label: "Day Streak", value: String(stats.currentDayStreak), fg, fgMuted }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatRow, { label: "Best Day Streak", value: String(stats.bestDayStreak), fg, fgMuted })
   ] });
 }
 
 // src/BaseSettingsDialog.tsx
-var import_auto_paper8 = require("@rific/auto-paper");
+var import_auto_paper6 = require("@rific/auto-paper");
+var import_core4 = require("@rific/core");
 var import_feedback_press2 = require("@rific/feedback-press");
 var import_updater = require("@rific/updater");
-var import_core4 = require("@tastic/core");
+var import_core5 = require("@tastic/core");
 var import_react6 = require("react");
 var import_react_native12 = require("react-native");
 var import_react_native_paper8 = require("react-native-paper");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 
 // src/ConfirmDialog.tsx
-var import_auto_paper7 = require("@rific/auto-paper");
+var import_auto_paper5 = require("@rific/auto-paper");
 var import_feedback_press = require("@rific/feedback-press");
 var import_core2 = require("@tastic/core");
 var import_react3 = require("react");
@@ -238,7 +256,7 @@ var import_react_native10 = require("react-native");
 var import_react_native_paper6 = require("react-native-paper");
 
 // src/DialogHeader.tsx
-var import_auto_paper5 = require("@rific/auto-paper");
+var import_auto_paper3 = require("@rific/auto-paper");
 var import_react_native6 = require("react-native");
 var import_react_native_paper5 = require("react-native-paper");
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -247,7 +265,7 @@ function isCompactDialogHeight(height) {
   return height < COMPACT_DIALOG_HEIGHT;
 }
 function DialogHeader({ icon, title, color, compact = false, style }) {
-  const { colors } = (0, import_auto_paper5.useAutoPaperTheme)();
+  const { colors } = (0, import_auto_paper3.useAutoPaperTheme)();
   const accent = color ?? colors.primary;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: [compact ? styles5.compact : styles5.full, style], children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper5.Icon, { source: icon, size: compact ? COMPACT_ICON_SIZE : ICON_SIZE, color: accent }),
@@ -344,11 +362,11 @@ var overlayActionStyles = import_react_native7.StyleSheet.create({
 });
 
 // src/OverlaySurface.tsx
-var import_auto_paper6 = require("@rific/auto-paper");
+var import_auto_paper4 = require("@rific/auto-paper");
 var import_react_native8 = require("react-native");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function useOverlayCardColors() {
-  const { colors } = (0, import_auto_paper6.useAutoPaperTheme)();
+  const { colors } = (0, import_auto_paper4.useAutoPaperTheme)();
   return { fg: colors.onSurface, fgMuted: colors.onSurfaceVariant, cardBorder: colors.outlineVariant, backdrop: colors.backdrop };
 }
 function OverlayBackdrop({ children, style, onLayout }) {
@@ -356,9 +374,9 @@ function OverlayBackdrop({ children, style, onLayout }) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native8.View, { onLayout, style: [overlayStyles.overlay, { backgroundColor: backdrop }, style], children });
 }
 function OverlayCard({ children, style, ...rest }) {
-  const { isV3, roundness } = (0, import_auto_paper6.useAutoPaperTheme)();
-  const blur = (0, import_auto_paper6.useBlur)();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_auto_paper6.BlurView, { blur, style: [overlayStyles.card, styles6.card, { borderRadius: (isV3 ? 7 : 1) * roundness }, style], ...rest, children });
+  const { isV3, roundness } = (0, import_auto_paper4.useAutoPaperTheme)();
+  const blur = (0, import_auto_paper4.useBlur)();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_auto_paper4.BlurView, { blur, style: [overlayStyles.card, styles6.card, { borderRadius: (isV3 ? 7 : 1) * roundness }, style], ...rest, children });
 }
 var styles6 = import_react_native8.StyleSheet.create({
   card: { overflow: "hidden" }
@@ -384,7 +402,7 @@ function useCompactDialog(rotation = 0) {
 // src/ConfirmDialog.tsx
 var import_jsx_runtime8 = 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_paper7.useAutoPaperTheme)();
+  const { colors } = (0, import_auto_paper5.useAutoPaperTheme)();
   const { fg } = useOverlayCardColors();
   const { compact, onLayout } = useCompactDialog(rotation);
   const onCancelRef = (0, import_react3.useRef)(onCancel);
@@ -488,22 +506,24 @@ var import_jsx_runtime10 = 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 }) });
 }
-function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, keepAwake, onKeepAwakeChange, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, onShowHowToPlay, children }) {
-  const { colors } = (0, import_auto_paper8.useAutoPaperTheme)();
-  const ambientRotation = (0, import_core4.useRotation)();
+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)();
+  const ambientRotation = (0, import_core5.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
   const window = (0, import_react_native12.useWindowDimensions)();
   const turned = rotation === 90 || rotation === -90;
   const compactHeader = isCompactDialogHeight(turned ? window.width : window.height);
-  const insets = (0, import_core4.rotateInsets)((0, import_react_native_safe_area_context2.useSafeAreaInsets)(), rotation);
+  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_core4.useIsTouchPrimaryDevice)();
+  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: 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 { settings: themeSettings, set: setThemeSettings } = (0, import_auto_paper8.useThemeSettings)();
-  const expoBlur = (0, import_auto_paper8.useBlurModule)();
+  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);
   const { manifest: updateManifest, onConfirm: onUpdateConfirm, respond: respondToUpdateConfirm } = useUpdateConfirmBridge();
   const { check, checking, updateReady } = (0, import_updater.useUpdater)({
@@ -518,7 +538,7 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
   if (visible && !opened) setOpened(true);
   const showLockOrientation = isTouchPrimary && lockOrientation !== void 0 && onLockOrientationChange !== void 0;
   const showEdgeGuard = import_react_native12.Platform.OS === "ios" && deferBottomEdgeGestures !== void 0 && onDeferBottomEdgeGestures !== void 0;
-  const showKeepAwake = isTouchPrimary && keepAwake !== void 0 && onKeepAwakeChange !== void 0;
+  const showKeepAwake = isTouchPrimary && expoKeepAwake !== void 0;
   const showHaptics = import_react_native12.Platform.OS !== "web" && !hideHaptics;
   const showSound = !hideSound;
   const showAppearance = !hideAppearance;
@@ -526,8 +546,8 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
   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_paper8.Dialog, { visible, onDismiss, style: [styles9.dialog, { width: sheetWidth }], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_auto_paper8.Dialog.ScrollArea, { style: styles9.scrollArea, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_auto_paper8.FadingScrollView, { contentContainerStyle: styles9.scrollContent, showsVerticalScrollIndicator: false, 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: [
@@ -545,8 +565,8 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
                 /* @__PURE__ */ (0, import_jsx_runtime10.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: () => onKeepAwakeChange(!keepAwake), style: styles9.toggleButton, accessibilityLabel: `Keep awake ${keepAwake ? "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: keepAwake ? "eye" : "eye-closed", color: keepAwake ? colors.tertiary : colors.onSurfaceVariant, containerColor: keepAwake ? colors.tertiaryContainer : colors.surfaceVariant }),
+            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" })
@@ -609,7 +629,7 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
           ] }),
           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_paper8.AutoAppearancePicker, { showLabels: false }),
+            /* @__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: [
@@ -720,16 +740,16 @@ var styles9 = import_react_native12.StyleSheet.create({
 });
 
 // src/BaseStatsScreen.tsx
-var import_auto_paper9 = require("@rific/auto-paper");
+var import_auto_paper7 = require("@rific/auto-paper");
 var import_feedback_press3 = require("@rific/feedback-press");
-var import_core5 = require("@tastic/core");
+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");
 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_paper9.useAutoPaperTheme)();
-  const ambientRotation = (0, import_core5.useRotation)();
+  const { dark, colors } = (0, import_auto_paper7.useAutoPaperTheme)();
+  const ambientRotation = (0, import_core6.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
   const [confirmResetVisible, setConfirmResetVisible] = (0, import_react7.useState)(false);
   const showReset = !!onReset;
@@ -740,7 +760,7 @@ function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", t
       /* @__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 })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_auto_paper9.FadingScrollView, { style: styles10.scrollView, contentContainerStyle: [styles10.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.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 })
     ] }),
@@ -795,12 +815,12 @@ var styles10 = import_react_native13.StyleSheet.create({
 });
 
 // src/ContentGutter.tsx
-var import_core6 = require("@tastic/core");
+var import_core7 = require("@tastic/core");
 var import_react_native14 = require("react-native");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }) {
-  const { width: windowWidth } = (0, import_core6.useRotatedWindowDimensions)();
-  const { contentWidth, gutterWidth } = (0, import_core6.computeContentBounds)(windowWidth, maxContentWidth ?? Infinity);
+  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 }),
@@ -837,11 +857,272 @@ var styles12 = import_react_native15.StyleSheet.create({
   }
 });
 
-// src/StaggeredWord.tsx
-var import_react8 = require("react");
+// src/InlineColorPicker.tsx
+var import_auto_paper8 = require("@rific/auto-paper");
+var import_feedback_press5 = 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_react_native_reanimated = __toESM(require("react-native-reanimated"));
 var import_jsx_runtime14 = require("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" ? styles13.contentLeft : align === "right" ? styles13.contentRight : styles13.contentCenter;
+  const verticalStyle = above ? styles13.contentAbove : styles13.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__ */ (0, import_jsx_runtime14.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 }] })
+    ] })
+  ] });
+}
+var styles13 = import_react_native16.StyleSheet.create({
+  caret: {
+    borderLeftColor: "transparent",
+    borderRightColor: "transparent",
+    height: 0,
+    position: "absolute",
+    width: 0,
+    // Explicit, not left to DOM order - the box it dips into is itself a position:'relative' view,
+    // which React Native Web always gives an implicit zIndex:0 (see PopoverBody's stacking-context
+    // notes elsewhere in this codebase), so painting on top needs a real zIndex to beat that
+    // reliably rather than relying on being the later sibling.
+    zIndex: 1
+  },
+  content: {
+    position: "absolute",
+    zIndex: 50
+  },
+  contentAbove: {
+    bottom: "100%",
+    marginBottom: 8
+  },
+  contentBelow: {
+    marginTop: 8,
+    top: "100%"
+  },
+  // Stretched to the anchor's own (trigger) width, with alignItems centering the actual (usually
+  // much wider) popover box inside via plain flexbox - not `left:'50%'` plus a percentage
+  // `transform`, which depends on native resolving the box's own auto width before applying the
+  // transform and has proven unreliable there, visibly shifting the box off-center.
+  contentCenter: {
+    alignItems: "center",
+    left: 0,
+    right: 0
+  },
+  contentLeft: {
+    left: 0
+  },
+  contentRight: {
+    right: 0
+  }
+});
+
+// src/useAutoAlign.ts
+var import_react8 = require("react");
+var import_react_native17 = require("react-native");
+var EDGE_MARGIN = 12;
+function rotateRect(x, y, width, height, rotation, windowWidth, windowHeight) {
+  if (rotation === 0) return { x, y, width, height };
+  const cx = windowWidth / 2;
+  const cy = windowHeight / 2;
+  const dx = x + width / 2 - cx;
+  const dy = y + height / 2 - cy;
+  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) {
+  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");
+  const [verticalAlign, setVerticalAlign] = (0, import_react8.useState)("below");
+  const [maxHeight, setMaxHeight] = (0, import_react8.useState)(contentHeight);
+  const [measured, setMeasured] = (0, import_react8.useState)(false);
+  const [prevOpen, setPrevOpen] = (0, import_react8.useState)(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (open) setMeasured(false);
+  }
+  const measure = (0, import_react8.useCallback)(() => {
+    triggerRef.current?.measureInWindow((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;
+      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 above = contentHeight > roomBelow && roomAbove > roomBelow;
+      setVerticalAlign(above ? "above" : "below");
+      setMaxHeight(Math.max(above ? roomAbove : roomBelow, 0));
+      setMeasured(true);
+    });
+  }, [contentWidth, contentHeight, windowWidth, windowHeight, rotation]);
+  (0, import_react8.useEffect)(() => {
+    if (open) measure();
+  }, [open, measure]);
+  return { align, maxHeight, measured, triggerRef, verticalAlign };
+}
+
+// src/InlineColorPicker.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
+var DEFAULT_SIZE = 48;
+var SWATCH_SIZE = 28;
+var SWATCHES_PADDING = 8;
+var SWATCHES_GAP = 6;
+var SWATCHES_BORDER_WIDTH = 2;
+var MIN_COLUMNS = 4;
+var MAX_COLUMNS = 5;
+var SCREEN_MARGIN = 40;
+function widthForColumns(columns) {
+  return SWATCHES_BORDER_WIDTH * 2 + SWATCHES_PADDING * 2 + SWATCH_SIZE * columns + SWATCHES_GAP * (columns - 1);
+}
+function getInlineColorPickerContentSize(swatchCount, windowWidth, columns) {
+  const autoColumns = (0, import_core8.clamp)(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS);
+  const resolvedColumns = columns ?? autoColumns;
+  const width = widthForColumns(resolvedColumns);
+  const rows = Math.ceil(swatchCount / resolvedColumns);
+  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 }) {
+  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 placement = alignOverride ?? auto;
+  const { maxHeight, measured, triggerRef, verticalAlign } = placement;
+  const align = forcedAlign ?? placement.align;
+  const displayFor = previewValue ?? ((hex) => hex);
+  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 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,
+        {
+          disabled: taken && !swappable,
+          onPress: () => {
+            onChange(swatch.value);
+            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, {})
+        },
+        swatch.value
+      );
+    }) }) })
+  ] });
+}
+var styles14 = import_react_native18.StyleSheet.create({
+  anchor: {
+    position: "relative"
+  },
+  // See SectionedDropdown's identical comment - React Native Web gives every position:'relative' view
+  // its own stacking context, so the elevation has to live on the anchor itself, not just the
+  // popover content nested inside it, to correctly paint above this anchor's own later siblings.
+  anchorOpen: {
+    zIndex: 100
+  },
+  swatch: {
+    alignItems: "center",
+    borderRadius: SWATCH_SIZE / 2,
+    height: SWATCH_SIZE,
+    justifyContent: "center",
+    width: SWATCH_SIZE
+  },
+  swatchSelected: {
+    borderColor: "#ffffff",
+    borderWidth: 2
+  },
+  swatchTaken: {
+    opacity: 0.35
+  },
+  swatches: {
+    borderRadius: 12,
+    borderWidth: SWATCHES_BORDER_WIDTH,
+    elevation: 8,
+    shadowColor: "#000000",
+    shadowOffset: { height: 2, width: 0 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8
+    // width is set inline above - border-box sizing means it has to include the border too
+    // (2*SWATCHES_BORDER_WIDTH), not just padding+content, or exactly enough room goes missing that
+    // the last column silently wraps to a new row. Anything wider than the exact sum just shows as
+    // dead space on the right edge of each row instead.
+  },
+  // Separate from `swatches` itself - see SectionedDropdown's identical menu/menuContent split.
+  // The scroll frame's own bounds (including maxHeight) live on the ScrollView; the actual grid
+  // wrapping belongs to its contentContainerStyle, which sizes to the unclamped content instead.
+  swatchesContent: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: SWATCHES_GAP,
+    padding: SWATCHES_PADDING
+  },
+  tagLabel: {
+    fontWeight: "700",
+    letterSpacing: 0.5
+  },
+  // borderRadius/height/width come from the `size` prop instead (see render-site override) - no
+  // fixed default here, since this style object is shared by every caller regardless of size.
+  trigger: {
+    alignItems: "center",
+    alignSelf: "flex-start",
+    justifyContent: "center"
+  },
+  // Wraps just the icon/tag, inside the TouchableRipple, purely so useAutoAlign has a plain View
+  // to attach its measurement ref to - TouchableRipple itself doesn't forward a ref to a
+  // measurable native node. Padded horizontally so a multi-character tag doesn't butt right up
+  // against the trigger's own circular edge (an icon alone doesn't need it, but this style is
+  // shared by both).
+  triggerMeasure: {
+    alignItems: "center",
+    height: "100%",
+    justifyContent: "center",
+    paddingHorizontal: 4,
+    width: "100%"
+  }
+});
+
+// src/PressAwayOverlay.tsx
+var import_react_native19 = require("react-native");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function PressAwayOverlay({ active, onPress, style }) {
+  if (!active) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_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 STAGGER_MS = 45;
 var LETTER_DURATION_MS = 320;
 function getStaggeredWordDuration(letterCount) {
@@ -849,7 +1130,7 @@ function getStaggeredWordDuration(letterCount) {
 }
 function AnimatedLetter({ char, index, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }) {
   const progress = (0, import_react_native_reanimated.useSharedValue)(reducedMotion ? 1 : 0);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (reducedMotion) return;
     progress.value = (0, import_react_native_reanimated.withDelay)(index * STAGGER_MS, (0, import_react_native_reanimated.withTiming)(1, { duration: LETTER_DURATION_MS, easing: import_react_native_reanimated.Easing.out(import_react_native_reanimated.Easing.back(1.5)) }));
   }, [reducedMotion]);
@@ -857,12 +1138,12 @@ 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_runtime14.jsx)(import_react_native_reanimated.default.Text, { allowFontScaling: false, style: [{ color, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, style], children: char });
+  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 });
 }
 function StaggeredWord({ word, color, fontFamily, fontSize, lineHeight, reducedMotion, startIndex = 0, fontWeight = "bold", letterSpacing, style, onLayout }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native16.View, { style: [styles13.row, style], onLayout, children: word.split("").map((char, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AnimatedLetter, { char, index: startIndex + i, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, i)) });
+  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)) });
 }
-var styles13 = import_react_native16.StyleSheet.create({
+var styles15 = import_react_native20.StyleSheet.create({
   row: {
     flexDirection: "row"
   }
@@ -870,12 +1151,23 @@ var styles13 = import_react_native16.StyleSheet.create({
 
 // src/UpdateDialog.tsx
 var import_updater2 = require("@rific/updater");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime18 = 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_runtime15.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_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) });
+}
+
+// src/usePopoverHost.ts
+var import_react10 = require("react");
+function usePopoverHost() {
+  const [openId, setOpenId] = (0, import_react10.useState)(null);
+  const toggle = (0, import_react10.useCallback)((id) => {
+    setOpenId((prev) => prev === id ? null : id);
+  }, []);
+  const close = (0, import_react10.useCallback)(() => setOpenId(null), []);
+  return { openId, toggle, close };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -889,19 +1181,27 @@ function UpdateDialog({ rotation = 0, autoCheck = true, autoPrompt = true, onErr
   ContentGutter,
   CornerActionButtons,
   DialogHeader,
+  InlineColorPicker,
   LOCKED_BADGE_COLOR,
   MONO_FONT,
   OverlayBackdrop,
   OverlayCard,
+  PopoverBody,
+  PressAwayOverlay,
   RotatedFrame,
   StaggeredWord,
   StatRow,
   StatSection,
   UpdateDialog,
+  WELL_SHADOW,
+  getInlineColorPickerContentSize,
   getStaggeredWordDuration,
   isCompactDialogHeight,
   overlayActionStyles,
   overlayStyles,
+  useAutoAlign,
   useCompactDialog,
-  useOverlayCardColors
+  useOverlayCardColors,
+  usePopoverHost,
+  useWellColors
 });