@tastic/hud 0.22.0 → 0.24.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)}
     />
   )
@@ -628,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`, `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
@@ -646,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
@@ -657,6 +668,64 @@ type-checks hud's source and needs it installed. `AchievementUnlockList` isn't h
 Metro resolves both entries to the same source files, so an app that imports some components from here and
 others from `@tastic/hud` still bundles each module once.
 
+## Skia on web (`@tastic/hud/skia`)
+
+On web, Skia draws through CanvasKit, a WASM file fetched at runtime. `@shopify/react-native-skia` builds
+its `Skia` object from CanvasKit when the module is first evaluated, so a component that imports Skia can't
+even be imported until CanvasKit has loaded. On native there is nothing to wait for.
+
+Every app in the fleet loads Skia the same way, with a host pair: two small files per Skia component, side
+by side, that Metro picks between by platform.
+
+```tsx
+// BoardHost.tsx: native renders the board directly, on the first frame
+import { Board, type BoardProps } from './Board'
+
+export default function BoardHost(props: BoardProps) {
+  return <Board {...props} />
+}
+```
+
+```tsx
+// BoardHost.web.tsx: web imports the board only once CanvasKit has loaded
+import { loadSkiaWeb } from '@tastic/hud/skia'
+import { lazy, Suspense } from 'react'
+
+import type { BoardProps } from './Board'
+
+const LazyBoard = lazy(() => loadSkiaWeb().then(() => import('./Board').then((m) => ({ default: m.Board }))))
+
+export default function BoardHost(props: BoardProps) {
+  return (
+    <Suspense fallback={null}>
+      <LazyBoard {...props} />
+    </Suspense>
+  )
+}
+```
+
+- Import the host, never `Board` itself, everywhere else in the app.
+- Keep `lazy()` at module scope, as above, so the component is created once.
+- Import from `@tastic/hud/skia` (also exported from `@tastic/hud`). It carries none of the main entry's
+  heavier peers, so it works in every app.
+- A test that imports a native host imports Skia, which throws under Jest (no native bindings). Mock the
+  host, or don't import the screen that uses it.
+
+`loadSkiaWeb()` fetches the app's `public/canvaskit.wasm` from `<baseUrl>/canvaskit.wasm`: under the Expo base
+URL (`experiments.baseUrl`, e.g. `/snake/canvaskit.wasm`) when the app has one, and `/canvaskit.wasm` when it
+doesn't. There's nothing to wire up: babel-preset-expo inlines `process.env.EXPO_BASE_URL` into hud's source
+when Metro bundles it, the same as in the app's own code. It's idempotent, so every host can call it.
+
+That rule is `locateSkiaWebFile(file: string): string`, also exported from `@tastic/hud/skia`, for code that
+calls Skia's own `LoadSkiaWeb` or `WithSkiaWeb` (`opts={{ locateFile: locateSkiaWebFile }}`). Without it,
+canvaskit looks for the file next to the running script or the page, which under a base URL is the wrong
+place: from `/snake` (no trailing slash) it asks for `/canvaskit.wasm`, and a static-output app can end up
+asking under `/_expo/static/js/web/`. `LoadSkiaWeb` also keeps its first call's result, a failed load
+included, for the rest of the page's life.
+
+`TriggerGaugeHost` uses the web half on both platforms: the main entry can't import Skia up front, since every
+app that imports `@tastic/hud` would then load Skia, including in its tests.
+
 ## Install
 
 Published to the public npm registry as `@tastic/hud`. Everything described above, including the
@@ -693,10 +762,11 @@ 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` |
-| `@shopify/react-native-skia` | >=2.6.0, optional | `TriggerGaugeHost`'s gauge (lazy-loaded behind `SkiaGate`) and `./skia-gate` |
+| `@shopify/react-native-skia` | >=2.6.0, optional | `TriggerGaugeHost`'s gauge (loaded when one mounts) and `./skia` |
 | `@tastic/achievements` | >=0.2.0, optional | `AchievementCatalogSection`, `AchievementUnlockList`, type-only (`AchievementCatalogRow`, first exported in 0.2.0; `AchievementTier`); `./chrome` needs it installed only to type-check |

package/dist/chrome/index.d.mts

@@ -1,20 +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, sectionBg }: 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;
@@ -27,20 +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, fg, fgMuted, sectionBg }: Props$5): react.JSX.Element;
+declare function ActivityStatSection({ stats, fg, fgMuted, sectionBg }: Props$8): react.JSX.Element;
 
 interface BaseSettingsDialogProps {
     visible: boolean;
@@ -51,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;
@@ -61,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;
@@ -85,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;
@@ -101,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;
@@ -123,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;
@@ -138,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";
@@ -195,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
@@ -282,4 +351,4 @@ interface WellColors {
 }
 declare function useWellColors(): WellColors;
 
-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, WELL_SHADOW, type WellColors, getStaggeredWordDuration, isCompactDialogHeight, overlayActionStyles, overlayStyles, useCompactDialog, useOverlayCardColors, useWellColors };
+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,20 +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, sectionBg }: 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;
@@ -27,20 +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, fg, fgMuted, sectionBg }: Props$5): react.JSX.Element;
+declare function ActivityStatSection({ stats, fg, fgMuted, sectionBg }: Props$8): react.JSX.Element;
 
 interface BaseSettingsDialogProps {
     visible: boolean;
@@ -51,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;
@@ -61,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;
@@ -85,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;
@@ -101,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;
@@ -123,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;
@@ -138,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";
@@ -195,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
@@ -282,4 +351,4 @@ interface WellColors {
 }
 declare function useWellColors(): WellColors;
 
-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, WELL_SHADOW, type WellColors, getStaggeredWordDuration, isCompactDialogHeight, overlayActionStyles, overlayStyles, useCompactDialog, useOverlayCardColors, useWellColors };
+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 };