@tastic/hud 0.21.0 → 0.23.0

package/README.md

@@ -209,12 +209,16 @@ its own `useGameSettings()` hook internally instead of taking it as props. Snake
 the fleet with real Redux Toolkit state - reads `lockOrientation`/`deferBottomEdgeGestures` via
 `useSelector` and writes them back via `dispatch(gameActions.setLockOrientation(...))` directly
 inside the adapter, with nothing threaded through props at all. `BaseSettingsDialog` doesn't care
-which of these an app uses: sound, haptics, appearance, and update-checking are identical across
-every app and live entirely inside this package now, so `lockOrientation`/`onLockOrientationChange`,
-`deferBottomEdgeGestures`/`onDeferBottomEdgeGestures` and `keepAwake`/`onKeepAwakeChange` are the only
-settings an adapter actually needs to source itself, however it does that. Each pair is optional: omit
-one and its row doesn't show. The Keep Awake row only toggles the value; the app keeps the screen awake
-itself while it's on (for example with `expo-keep-awake` on its match screen).
+which of these an app uses: sound, haptics, appearance, update-checking and Keep Awake are identical
+across every app and read their own shared settings, so `lockOrientation`/`onLockOrientationChange`
+and `deferBottomEdgeGestures`/`onDeferBottomEdgeGestures` are the only settings an adapter actually
+needs to source itself, however it does that. Each pair is optional: omit one and its row doesn't show.
+
+The Keep Awake row reads `@rific/core`'s Keep Awake setting (`useKeepAwakeSettings()`), the same way
+the Sound row reads `@rific/feedback-press`. It shows on touch-first devices (where Lock Orientation
+shows) in any app whose `KeepAwakeProvider` was given `expo-keep-awake` (`useExpoKeepAwake()` returns
+it), and is hidden otherwise. The app opts in once at its root and calls `useKeepAwake('game')` on the
+screen that should stay awake; see `@rific/core`'s README for the bridge.
 
 Every adapter also passes `version={release.otaVersion}` (so the dialog's own update-check button
 knows what it's currently running) and `onUpdateError`, wired to a real `useToast()` call. Wire this
@@ -239,8 +243,6 @@ export function SettingsDialog({ visible, onDismiss, rotation = 0, settings, set
       onLockOrientationChange={(value) => setSettings({ lockOrientation: value })}
       deferBottomEdgeGestures={settings.deferBottomEdgeGestures}
       onDeferBottomEdgeGestures={(value) => setSettings({ deferBottomEdgeGestures: value })}
-      keepAwake={settings.keepAwake}
-      onKeepAwakeChange={(value) => setSettings({ keepAwake: value })}
       onUpdateError={(message) => error('Update check failed', message)}
     />
   )
@@ -483,6 +485,7 @@ interface AchievementCatalogSectionProps {
   label?: string // default 'ALL ACHIEVEMENTS'
   fg?: string
   fgMuted?: string
+  sectionBg?: string // passed to every row
 }
 ```
 
@@ -495,9 +498,17 @@ stats object with these three fields satisfies it:
 ```ts
 interface ActivityStatSectionProps {
   stats: { distinctDaysPlayed: number; currentDayStreak: number; bestDayStreak: number }
+  fg?: string
+  fgMuted?: string
+  sectionBg?: string
 }
 ```
 
+**Wells.** Every `StatSection` and `AchievementRow` is a well: the theme's `surface` (the same surface as the dialogs)
+on MD3's level-1 shadow, with `onSurface`/`onSurfaceVariant` text. `useWellColors()` returns those colors and
+`WELL_SHADOW` the shadow, for an app's own cards (a menu tile) to match. Each component's `fg`/`fgMuted`/`sectionBg`
+props still override them.
+
 Composing both with `@tastic/achievements`' own row computation:
 
 ```tsx
@@ -619,17 +630,26 @@ const { open } = useGuide()
 
 ## Fleet chrome without the heavy peers (`@tastic/hud/chrome`)
 
-The shared dialogs, stats screen pieces, corner buttons and style tokens, from a standalone entry that never
-touches the main barrel. It's for an app that has `@tastic/core` and `@rific/updater` but none of Skia,
-`@tastic/profile` or `@tastic/split-screen` (Hangman). It exports, with their props types:
+The shared dialogs, stats screen pieces, corner buttons, popover primitives, color picker and style tokens,
+from a standalone entry that never touches the main barrel. It's for an app that has `@tastic/core` and
+`@rific/updater` but none of Skia, `@tastic/profile` or `@tastic/split-screen` (Hangman). It exports, with
+their props types:
 
 - Dialogs: `BaseSettingsDialog`, `ConfirmDialog`, `UpdateDialog`, `RotatedFrame`
 - Stats: `BaseStatsScreen`, `StatSection`, `StatRow`, `AchievementRow`, `LOCKED_BADGE_COLOR`,
-  `AchievementCatalogSection`, `ActivityStatSection`
+  `AchievementCatalogSection`, `ActivityStatSection`, `useWellColors`, `WELL_SHADOW`
 - Chrome: `CornerActionButtons`, `ContentGutter`, `StaggeredWord`, `getStaggeredWordDuration`
 - Overlay cards: `OverlayCard`, `OverlayBackdrop`, `useOverlayCardColors`, `DialogHeader`, `useCompactDialog`, `isCompactDialogHeight`, `COMPACT_DIALOG_HEIGHT`
+- Popovers (0.23.0+): `PopoverBody`, `PressAwayOverlay`, `usePopoverHost` (and its `PopoverHost` type),
+  `useAutoAlign` (and its `AlignResult`, `PopoverAlign`, `PopoverRotation` and `PopoverVerticalAlign`
+  types), `InlineColorPicker`, `getInlineColorPickerContentSize`
 - Style tokens: `overlayStyles`, `overlayActionStyles`, `MONO_FONT`
 
+The popovers are here for `@tastic/profile`: from 0.16 its `ProfilePicker`, `ProfilesScreen` and the rest
+import them (and `ConfirmDialog`) from this entry instead of the main barrel, so a Skia-free app can use
+them. That's why `@tastic/profile` 0.16 needs hud 0.23.0 or later. `useZoneClampedAlign` (it needs `@tastic/split-screen`), `SectionedDropdown` (its trigger gauge
+loads Skia) and `PlayerSetupPanel` (it renders `@tastic/profile`'s pickers) stay main-entry only.
+
 Each is the same component the main entry exports and is documented above. Only the import path changes:
 
 ```tsx
@@ -637,8 +657,8 @@ import { BaseSettingsDialog, ConfirmDialog, CornerActionButtons } from '@tastic/
 ```
 
 It pulls in only `react`, `react-native`, `react-native-paper`, `react-native-reanimated`,
-`react-native-safe-area-context`, `@rific/auto-paper`, `@rific/feedback-press`, `@rific/updater` and
-`@tastic/core`. `AchievementCatalogSection` uses `@tastic/achievements` for types only, so nothing loads it at
+`react-native-safe-area-context`, `@rific/auto-paper`, `@rific/core`, `@rific/feedback-press`,
+`@rific/updater` and `@tastic/core`. `AchievementCatalogSection` uses `@tastic/achievements` for types only, so nothing loads it at
 runtime, but an app whose TypeScript resolves the `react-native` export condition (the fleet's tsconfig does)
 type-checks hud's source and needs it installed. `AchievementUnlockList` isn't here because it renders
 `@tastic/profile`'s `ProfileChip`. A test (`src/__tests__/chromeImports.test.ts`) walks the import graph from
@@ -684,8 +704,9 @@ resolve module".
 | `react-native-reanimated` | >=3.0.0 | main entry (`StaggeredWord`), `./guide`, `./chrome` (`StaggeredWord`) |
 | `@rific/auto-paper` | >=0.12.2 | main entry (`BaseSettingsDialog` needs the nested `Portal.Host` first shipped in 0.12.2; `OverlayCard` uses `BlurView` and `useBlur`, and `BaseSettingsDialog`'s Blur row uses `useBlurModule` and `useThemeSettings`, all in 0.12.2), `./guide`, `./chrome` |
 | `@rific/feedback-press` | >=0.10.2 | main entry (`useSoundSettings` first shipped in 0.10.2), `./guide`, `./chrome` |
+| `@rific/core` | >=0.4.0 | main entry and `./chrome`: `BaseSettingsDialog`'s Keep Awake row (`useKeepAwakeSettings`, `useExpoKeepAwake`, first shipped in 0.4.0) |
 | `react-native-safe-area-context` | >=5.0.0 | main entry (`useZoneClampedAlign`), `./chrome` (`RotatedFrame`, `BaseSettingsDialog`) |
-| `@tastic/core` | >=0.12.0, optional | main entry: `useRotation()` and most dialogs; `RotatedFrame` and `BaseSettingsDialog` need `FakeLandscapeView`'s `rotation`/`passThrough`, first shipped in 0.12.0; `./chrome` (the same dialogs) |
+| `@tastic/core` | >=0.12.0, optional | main entry: `useRotation()` and most dialogs; `RotatedFrame` and `BaseSettingsDialog` need `FakeLandscapeView`'s `rotation`/`passThrough`, first shipped in 0.12.0; `./chrome` (the same dialogs, and `InlineColorPicker`) |
 | `@rific/updater` | >=0.4.0, optional | main entry and `./chrome`: `BaseSettingsDialog`, `UpdateDialog` |
 | `@tastic/profile` | >=0.4.0, optional | main entry: `PlayerSetupPanel`, `AchievementUnlockList` (`ProfileChip`) |
 | `@tastic/split-screen` | >=0.5.0, optional | main entry: `useZoneClampedAlign` |

package/dist/chrome/index.d.mts

@@ -1,19 +1,21 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
 import { AchievementCatalogRow } from '@tastic/achievements';
 import { ViewRotation } from '@tastic/core';
-import { Insets, StyleProp, ViewStyle, LayoutChangeEvent, TextStyle } from 'react-native';
+import { Insets, StyleProp, ViewStyle, View, LayoutChangeEvent, TextStyle } from 'react-native';
+import { SeedColor } from '@rific/auto-paper';
 
-interface Props$7 {
+interface Props$a {
     rows: AchievementCatalogRow[];
     label?: string;
     fg?: string;
     fgMuted?: string;
+    sectionBg?: string;
 }
-declare function AchievementCatalogSection({ rows, label, fg, fgMuted: fgMutedOverride }: Props$7): react.JSX.Element;
+declare function AchievementCatalogSection({ rows, label, fg, fgMuted: fgMutedOverride, sectionBg }: Props$a): react.JSX.Element;
 
 declare const LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
-interface Props$6 {
+interface Props$9 {
     icon: string;
     title: string;
     description: string;
@@ -26,17 +28,20 @@ interface Props$6 {
     fgMuted?: string;
     sectionBg?: string;
 }
-declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$6): react.JSX.Element;
+declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$9): react.JSX.Element;
 
 interface ActivityStats {
     distinctDaysPlayed: number;
     currentDayStreak: number;
     bestDayStreak: number;
 }
-interface Props$5 {
+interface Props$8 {
     stats: ActivityStats;
+    fg?: string;
+    fgMuted?: string;
+    sectionBg?: string;
 }
-declare function ActivityStatSection({ stats }: Props$5): react.JSX.Element;
+declare function ActivityStatSection({ stats, fg, fgMuted, sectionBg }: Props$8): react.JSX.Element;
 
 interface BaseSettingsDialogProps {
     visible: boolean;
@@ -47,8 +52,6 @@ interface BaseSettingsDialogProps {
     onLockOrientationChange?: (value: boolean) => void;
     deferBottomEdgeGestures?: boolean;
     onDeferBottomEdgeGestures?: (value: boolean) => void;
-    keepAwake?: boolean;
-    onKeepAwakeChange?: (value: boolean) => void;
     hideSound?: boolean;
     hideHaptics?: boolean;
     hideAppearance?: boolean;
@@ -57,10 +60,10 @@ interface BaseSettingsDialogProps {
     onShowHowToPlay?: () => void;
     children?: ReactNode;
 }
-declare function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, keepAwake, onKeepAwakeChange, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, onShowHowToPlay, children }: BaseSettingsDialogProps): react.JSX.Element | null;
+declare function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, onShowHowToPlay, children }: BaseSettingsDialogProps): react.JSX.Element | null;
 
 type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
-interface Props$4 {
+interface Props$7 {
     rotation?: ViewRotation;
     title?: string;
     titleVariant?: MD3TextVariant;
@@ -81,7 +84,7 @@ interface Props$4 {
     bg?: string;
     children: ReactNode;
 }
-declare function BaseStatsScreen({ rotation: rotationOverride, title, titleVariant, onBack, backLabel, hitSlop, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, children }: Props$4): react.JSX.Element;
+declare function BaseStatsScreen({ rotation: rotationOverride, title, titleVariant, onBack, backLabel, hitSlop, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, children }: Props$7): react.JSX.Element;
 
 interface ConfirmDialogProps {
     visible: boolean;
@@ -97,16 +100,16 @@ interface ConfirmDialogProps {
 }
 declare function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation, icon, destructive }: ConfirmDialogProps): react.JSX.Element | null;
 
-interface Props$3 {
+interface Props$6 {
     maxContentWidth?: number;
     leftGutter?: ReactNode;
     rightGutter?: ReactNode;
     style?: StyleProp<ViewStyle>;
     children: ReactNode;
 }
-declare function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }: Props$3): react.JSX.Element;
+declare function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }: Props$6): react.JSX.Element;
 
-interface Props$2 {
+interface Props$5 {
     onBack: () => void;
     onSettings: () => void;
     fg: string;
@@ -119,7 +122,7 @@ interface Props$2 {
     backLabel?: string;
     hitSlop?: number | Insets;
 }
-declare function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon, backLabel, hitSlop }: Props$2): react.JSX.Element;
+declare function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon, backLabel, hitSlop }: Props$5): react.JSX.Element;
 
 declare const COMPACT_DIALOG_HEIGHT = 528;
 declare function isCompactDialogHeight(height: number): boolean;
@@ -134,6 +137,57 @@ declare function DialogHeader({ icon, title, color, compact, style }: DialogHead
 
 declare const MONO_FONT: string;
 
+type PopoverAlign = 'left' | 'right' | 'center';
+type PopoverVerticalAlign = 'below' | 'above';
+type PopoverRotation = ViewRotation;
+interface AlignResult {
+    align: PopoverAlign;
+    verticalAlign: PopoverVerticalAlign;
+    maxHeight: number;
+    measured: boolean;
+    triggerRef: RefObject<View | null>;
+}
+declare function useAutoAlign(open: boolean, contentWidth: number, contentHeight: number, rotation?: PopoverRotation): {
+    align: PopoverAlign;
+    maxHeight: number;
+    measured: boolean;
+    triggerRef: RefObject<View | null>;
+    verticalAlign: PopoverVerticalAlign;
+};
+
+interface PopoverHost {
+    openId: string | null;
+    toggle: (id: string) => void;
+    close: () => void;
+}
+declare function usePopoverHost(): PopoverHost;
+
+declare function getInlineColorPickerContentSize(swatchCount: number, windowWidth: number, columns?: number): {
+    width: number;
+    height: number;
+};
+interface Props$4 {
+    id: string;
+    host: PopoverHost;
+    value: string;
+    onChange: (hex: string) => void;
+    previewValue?: (hex: string) => string;
+    swatches?: SeedColor[];
+    takenValue?: string;
+    allowSwapTaken?: boolean;
+    dark: boolean;
+    align?: 'left' | 'right' | 'center';
+    alignOverride?: AlignResult;
+    rotation?: PopoverRotation;
+    icon?: string;
+    tag?: string;
+    labelFontFamily?: string;
+    autoDismiss?: boolean;
+    columns?: number;
+    size?: number;
+}
+declare function InlineColorPicker({ id, host, value, onChange, previewValue, swatches, takenValue, allowSwapTaken, dark, align: forcedAlign, alignOverride, rotation: rotationOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$4): react.JSX.Element;
+
 declare const overlayStyles: {
     card: {
         alignItems: "center";
@@ -191,6 +245,25 @@ interface OverlayCardProps {
 }
 declare function OverlayCard({ children, style, ...rest }: OverlayCardProps): react.JSX.Element;
 
+interface Props$3 {
+    visible: boolean;
+    children: ReactNode;
+    align?: 'left' | 'right' | 'center';
+    verticalAlign?: 'below' | 'above';
+    caretColor?: string;
+    caretBorderColor?: string;
+    caretBorderWidth?: number;
+    triggerSize?: number;
+}
+declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$3): react.JSX.Element | null;
+
+interface Props$2 {
+    active: boolean;
+    onPress: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+declare function PressAwayOverlay({ active, onPress, style }: Props$2): react.JSX.Element | null;
+
 interface RotatedFrameProps {
     children: ReactNode;
     /** The angle to turn the frame by. Defaults to the live physical hold (@tastic/core's useRotation); pass it
@@ -270,4 +343,12 @@ declare function useCompactDialog(rotation?: ViewRotation): {
     onLayout: (e: LayoutChangeEvent) => void;
 };
 
-export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, COMPACT_DIALOG_HEIGHT, ConfirmDialog, type ConfirmDialogProps, ContentGutter, CornerActionButtons, DialogHeader, type DialogHeaderProps, LOCKED_BADGE_COLOR, MONO_FONT, OverlayBackdrop, type OverlayBackdropProps, OverlayCard, type OverlayCardProps, type OverlayCardThemeColors, RotatedFrame, type RotatedFrameProps, StaggeredWord, type StaggeredWordProps, StatRow, StatSection, UpdateDialog, type UpdateDialogProps, getStaggeredWordDuration, isCompactDialogHeight, overlayActionStyles, overlayStyles, useCompactDialog, useOverlayCardColors };
+declare const WELL_SHADOW = "0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)";
+interface WellColors {
+    bg: string;
+    fg: string;
+    fgMuted: string;
+}
+declare function useWellColors(): WellColors;
+
+export { AchievementCatalogSection, AchievementRow, ActivityStatSection, type AlignResult, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, COMPACT_DIALOG_HEIGHT, ConfirmDialog, type ConfirmDialogProps, ContentGutter, CornerActionButtons, DialogHeader, type DialogHeaderProps, InlineColorPicker, LOCKED_BADGE_COLOR, MONO_FONT, OverlayBackdrop, type OverlayBackdropProps, OverlayCard, type OverlayCardProps, type OverlayCardThemeColors, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, RotatedFrame, type RotatedFrameProps, StaggeredWord, type StaggeredWordProps, StatRow, StatSection, UpdateDialog, type UpdateDialogProps, WELL_SHADOW, type WellColors, getInlineColorPickerContentSize, getStaggeredWordDuration, isCompactDialogHeight, overlayActionStyles, overlayStyles, useAutoAlign, useCompactDialog, useOverlayCardColors, usePopoverHost, useWellColors };

package/dist/chrome/index.d.ts

@@ -1,19 +1,21 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
 import { AchievementCatalogRow } from '@tastic/achievements';
 import { ViewRotation } from '@tastic/core';
-import { Insets, StyleProp, ViewStyle, LayoutChangeEvent, TextStyle } from 'react-native';
+import { Insets, StyleProp, ViewStyle, View, LayoutChangeEvent, TextStyle } from 'react-native';
+import { SeedColor } from '@rific/auto-paper';
 
-interface Props$7 {
+interface Props$a {
     rows: AchievementCatalogRow[];
     label?: string;
     fg?: string;
     fgMuted?: string;
+    sectionBg?: string;
 }
-declare function AchievementCatalogSection({ rows, label, fg, fgMuted: fgMutedOverride }: Props$7): react.JSX.Element;
+declare function AchievementCatalogSection({ rows, label, fg, fgMuted: fgMutedOverride, sectionBg }: Props$a): react.JSX.Element;
 
 declare const LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
-interface Props$6 {
+interface Props$9 {
     icon: string;
     title: string;
     description: string;
@@ -26,17 +28,20 @@ interface Props$6 {
     fgMuted?: string;
     sectionBg?: string;
 }
-declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$6): react.JSX.Element;
+declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$9): react.JSX.Element;
 
 interface ActivityStats {
     distinctDaysPlayed: number;
     currentDayStreak: number;
     bestDayStreak: number;
 }
-interface Props$5 {
+interface Props$8 {
     stats: ActivityStats;
+    fg?: string;
+    fgMuted?: string;
+    sectionBg?: string;
 }
-declare function ActivityStatSection({ stats }: Props$5): react.JSX.Element;
+declare function ActivityStatSection({ stats, fg, fgMuted, sectionBg }: Props$8): react.JSX.Element;
 
 interface BaseSettingsDialogProps {
     visible: boolean;
@@ -47,8 +52,6 @@ interface BaseSettingsDialogProps {
     onLockOrientationChange?: (value: boolean) => void;
     deferBottomEdgeGestures?: boolean;
     onDeferBottomEdgeGestures?: (value: boolean) => void;
-    keepAwake?: boolean;
-    onKeepAwakeChange?: (value: boolean) => void;
     hideSound?: boolean;
     hideHaptics?: boolean;
     hideAppearance?: boolean;
@@ -57,10 +60,10 @@ interface BaseSettingsDialogProps {
     onShowHowToPlay?: () => void;
     children?: ReactNode;
 }
-declare function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, keepAwake, onKeepAwakeChange, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, onShowHowToPlay, children }: BaseSettingsDialogProps): react.JSX.Element | null;
+declare function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, onShowHowToPlay, children }: BaseSettingsDialogProps): react.JSX.Element | null;
 
 type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
-interface Props$4 {
+interface Props$7 {
     rotation?: ViewRotation;
     title?: string;
     titleVariant?: MD3TextVariant;
@@ -81,7 +84,7 @@ interface Props$4 {
     bg?: string;
     children: ReactNode;
 }
-declare function BaseStatsScreen({ rotation: rotationOverride, title, titleVariant, onBack, backLabel, hitSlop, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, children }: Props$4): react.JSX.Element;
+declare function BaseStatsScreen({ rotation: rotationOverride, title, titleVariant, onBack, backLabel, hitSlop, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, children }: Props$7): react.JSX.Element;
 
 interface ConfirmDialogProps {
     visible: boolean;
@@ -97,16 +100,16 @@ interface ConfirmDialogProps {
 }
 declare function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation, icon, destructive }: ConfirmDialogProps): react.JSX.Element | null;
 
-interface Props$3 {
+interface Props$6 {
     maxContentWidth?: number;
     leftGutter?: ReactNode;
     rightGutter?: ReactNode;
     style?: StyleProp<ViewStyle>;
     children: ReactNode;
 }
-declare function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }: Props$3): react.JSX.Element;
+declare function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }: Props$6): react.JSX.Element;
 
-interface Props$2 {
+interface Props$5 {
     onBack: () => void;
     onSettings: () => void;
     fg: string;
@@ -119,7 +122,7 @@ interface Props$2 {
     backLabel?: string;
     hitSlop?: number | Insets;
 }
-declare function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon, backLabel, hitSlop }: Props$2): react.JSX.Element;
+declare function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon, backLabel, hitSlop }: Props$5): react.JSX.Element;
 
 declare const COMPACT_DIALOG_HEIGHT = 528;
 declare function isCompactDialogHeight(height: number): boolean;
@@ -134,6 +137,57 @@ declare function DialogHeader({ icon, title, color, compact, style }: DialogHead
 
 declare const MONO_FONT: string;
 
+type PopoverAlign = 'left' | 'right' | 'center';
+type PopoverVerticalAlign = 'below' | 'above';
+type PopoverRotation = ViewRotation;
+interface AlignResult {
+    align: PopoverAlign;
+    verticalAlign: PopoverVerticalAlign;
+    maxHeight: number;
+    measured: boolean;
+    triggerRef: RefObject<View | null>;
+}
+declare function useAutoAlign(open: boolean, contentWidth: number, contentHeight: number, rotation?: PopoverRotation): {
+    align: PopoverAlign;
+    maxHeight: number;
+    measured: boolean;
+    triggerRef: RefObject<View | null>;
+    verticalAlign: PopoverVerticalAlign;
+};
+
+interface PopoverHost {
+    openId: string | null;
+    toggle: (id: string) => void;
+    close: () => void;
+}
+declare function usePopoverHost(): PopoverHost;
+
+declare function getInlineColorPickerContentSize(swatchCount: number, windowWidth: number, columns?: number): {
+    width: number;
+    height: number;
+};
+interface Props$4 {
+    id: string;
+    host: PopoverHost;
+    value: string;
+    onChange: (hex: string) => void;
+    previewValue?: (hex: string) => string;
+    swatches?: SeedColor[];
+    takenValue?: string;
+    allowSwapTaken?: boolean;
+    dark: boolean;
+    align?: 'left' | 'right' | 'center';
+    alignOverride?: AlignResult;
+    rotation?: PopoverRotation;
+    icon?: string;
+    tag?: string;
+    labelFontFamily?: string;
+    autoDismiss?: boolean;
+    columns?: number;
+    size?: number;
+}
+declare function InlineColorPicker({ id, host, value, onChange, previewValue, swatches, takenValue, allowSwapTaken, dark, align: forcedAlign, alignOverride, rotation: rotationOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$4): react.JSX.Element;
+
 declare const overlayStyles: {
     card: {
         alignItems: "center";
@@ -191,6 +245,25 @@ interface OverlayCardProps {
 }
 declare function OverlayCard({ children, style, ...rest }: OverlayCardProps): react.JSX.Element;
 
+interface Props$3 {
+    visible: boolean;
+    children: ReactNode;
+    align?: 'left' | 'right' | 'center';
+    verticalAlign?: 'below' | 'above';
+    caretColor?: string;
+    caretBorderColor?: string;
+    caretBorderWidth?: number;
+    triggerSize?: number;
+}
+declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$3): react.JSX.Element | null;
+
+interface Props$2 {
+    active: boolean;
+    onPress: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+declare function PressAwayOverlay({ active, onPress, style }: Props$2): react.JSX.Element | null;
+
 interface RotatedFrameProps {
     children: ReactNode;
     /** The angle to turn the frame by. Defaults to the live physical hold (@tastic/core's useRotation); pass it
@@ -270,4 +343,12 @@ declare function useCompactDialog(rotation?: ViewRotation): {
     onLayout: (e: LayoutChangeEvent) => void;
 };
 
-export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, COMPACT_DIALOG_HEIGHT, ConfirmDialog, type ConfirmDialogProps, ContentGutter, CornerActionButtons, DialogHeader, type DialogHeaderProps, LOCKED_BADGE_COLOR, MONO_FONT, OverlayBackdrop, type OverlayBackdropProps, OverlayCard, type OverlayCardProps, type OverlayCardThemeColors, RotatedFrame, type RotatedFrameProps, StaggeredWord, type StaggeredWordProps, StatRow, StatSection, UpdateDialog, type UpdateDialogProps, getStaggeredWordDuration, isCompactDialogHeight, overlayActionStyles, overlayStyles, useCompactDialog, useOverlayCardColors };
+declare const WELL_SHADOW = "0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)";
+interface WellColors {
+    bg: string;
+    fg: string;
+    fgMuted: string;
+}
+declare function useWellColors(): WellColors;
+
+export { AchievementCatalogSection, AchievementRow, ActivityStatSection, type AlignResult, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, COMPACT_DIALOG_HEIGHT, ConfirmDialog, type ConfirmDialogProps, ContentGutter, CornerActionButtons, DialogHeader, type DialogHeaderProps, InlineColorPicker, LOCKED_BADGE_COLOR, MONO_FONT, OverlayBackdrop, type OverlayBackdropProps, OverlayCard, type OverlayCardProps, type OverlayCardThemeColors, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, RotatedFrame, type RotatedFrameProps, StaggeredWord, type StaggeredWordProps, StatRow, StatSection, UpdateDialog, type UpdateDialogProps, WELL_SHADOW, type WellColors, getInlineColorPickerContentSize, getStaggeredWordDuration, isCompactDialogHeight, overlayActionStyles, overlayStyles, useAutoAlign, useCompactDialog, useOverlayCardColors, usePopoverHost, useWellColors };