@tastic/hud 0.8.5 → 0.13.0

package/dist/index.d.mts

@@ -1,12 +1,22 @@
 import * as react from 'react';
 import { ReactNode, RefObject } from 'react';
+import { AchievementCatalogRow, AchievementTier } from '@tastic/achievements';
+import { Profile } from '@tastic/profile';
+import { ViewStyle, StyleProp, View, TextStyle, LayoutChangeEvent } from 'react-native';
 import { ViewRotation } from '@tastic/core';
-import { StyleProp, ViewStyle, View } from 'react-native';
 import { SeedColor } from '@rific/auto-paper';
 export { SkiaGate, SkiaGateProps } from './SkiaGate.mjs';
 
+interface Props$f {
+    rows: AchievementCatalogRow[];
+    label?: string;
+    fg?: string;
+    fgMuted?: string;
+}
+declare function AchievementCatalogSection({ rows, label, fg, fgMuted: fgMutedOverride }: Props$f): react.JSX.Element;
+
 declare const LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
-interface Props$c {
+interface Props$e {
     icon: string;
     title: string;
     description: string;
@@ -19,7 +29,37 @@ interface Props$c {
     fgMuted?: string;
     sectionBg?: string;
 }
-declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$c): react.JSX.Element;
+declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$e): react.JSX.Element;
+
+interface UnlockedAchievement {
+    id: string;
+    icon: string;
+    title: string;
+    tier: AchievementTier;
+}
+interface AchievementUnlockOwner {
+    profile?: Profile | null;
+    color: string;
+}
+interface Props$d<Seat extends number> {
+    unlocks: Partial<Record<Seat, UnlockedAchievement[]>>;
+    seats: readonly Seat[];
+    owners: Record<Seat, AchievementUnlockOwner>;
+    tierColors: Record<AchievementTier, string>;
+    fg?: string;
+    style?: ViewStyle;
+}
+declare function AchievementUnlockList<Seat extends number>({ unlocks, seats, owners, tierColors, fg: fgOverride, style }: Props$d<Seat>): react.JSX.Element | null;
+
+interface ActivityStats {
+    distinctDaysPlayed: number;
+    currentDayStreak: number;
+    bestDayStreak: number;
+}
+interface Props$c {
+    stats: ActivityStats;
+}
+declare function ActivityStatSection({ stats }: Props$c): react.JSX.Element;
 
 interface BaseSettingsDialogProps {
     visible: boolean;
@@ -35,9 +75,10 @@ interface BaseSettingsDialogProps {
     hideAppearance?: boolean;
     hideUpdateCheck?: boolean;
     onUpdateError?: (message: string) => void;
+    onShowHowToPlay?: () => void;
     children?: ReactNode;
 }
-declare function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, children }: BaseSettingsDialogProps): react.JSX.Element;
+declare function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, onShowHowToPlay, children }: BaseSettingsDialogProps): react.JSX.Element;
 
 type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface Props$b {
@@ -87,11 +128,18 @@ declare function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style
 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: react.RefObject<View | null>;
+    triggerRef: RefObject<View | null>;
     verticalAlign: PopoverVerticalAlign;
 };
 
@@ -137,6 +185,7 @@ interface Props$9 {
     onAccentColor?: string;
     dark: boolean;
     align?: 'left' | 'right' | 'center';
+    alignOverride?: AlignResult;
     rotation?: PopoverRotation;
     autoDismiss?: boolean;
     labelFontFamily?: string;
@@ -145,7 +194,7 @@ interface Props$9 {
         clear: string;
     };
 }
-declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, rotation: rotationOverride, autoDismiss, labelFontFamily, allClearLabels }: Props$9): react.JSX.Element;
+declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: forcedAlign, alignOverride, rotation: rotationOverride, autoDismiss, labelFontFamily, allClearLabels }: Props$9): react.JSX.Element;
 
 interface ControlSchemePickerProps<T extends string | number> {
     id: string;
@@ -159,9 +208,11 @@ interface ControlSchemePickerProps<T extends string | number> {
     onAccentColor?: string;
     dark: boolean;
     align?: 'left' | 'right' | 'center';
+    alignOverride?: AlignResult;
+    rotation?: PopoverRotation;
     labelFontFamily?: string;
 }
-declare function ControlSchemePicker<T extends string | number>({ id, host, value, onChange, options, takenValue, accentColor, mutedColor, onAccentColor, dark, align, labelFontFamily }: ControlSchemePickerProps<T>): react.JSX.Element | null;
+declare function ControlSchemePicker<T extends string | number>({ id, host, value, onChange, options, takenValue, accentColor, mutedColor, onAccentColor, dark, align, alignOverride, rotation, labelFontFamily }: ControlSchemePickerProps<T>): react.JSX.Element | null;
 
 interface Props$8 {
     onBack: () => void;
@@ -191,6 +242,10 @@ declare function CornerStatusBadges({ orientationMode, p1OnRight, p1, p2 }: Corn
 
 declare const MONO_FONT: string;
 
+declare function getInlineColorPickerContentSize(swatchCount: number, windowWidth: number, columns?: number): {
+    width: number;
+    height: number;
+};
 interface Props$7 {
     id: string;
     host: PopoverHost;
@@ -202,6 +257,7 @@ interface Props$7 {
     allowSwapTaken?: boolean;
     dark: boolean;
     align?: 'left' | 'right' | 'center';
+    alignOverride?: AlignResult;
     rotation?: PopoverRotation;
     icon?: string;
     tag?: string;
@@ -210,7 +266,7 @@ interface Props$7 {
     columns?: number;
     size?: number;
 }
-declare function InlineColorPicker({ id, host, value, onChange, previewValue, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, rotation: rotationOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$7): react.JSX.Element;
+declare function InlineColorPicker({ id, host, value, onChange, previewValue, swatches, takenValue, allowSwapTaken, dark, align: forcedAlign, alignOverride, rotation: rotationOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$7): react.JSX.Element;
 
 declare const LABELED_DROPDOWN_POPOVER_WIDTH = 180;
 declare function getLabeledDropdownContentHeight(optionCount: number): number;
@@ -219,13 +275,6 @@ interface LabeledDropdownOption<T extends string> {
     label: string;
     icon?: string;
 }
-interface AlignResult {
-    align: PopoverAlign;
-    verticalAlign: PopoverVerticalAlign;
-    maxHeight: number;
-    measured: boolean;
-    triggerRef: RefObject<View | null>;
-}
 interface Props$6<T extends string> {
     id: string;
     host: PopoverHost;
@@ -268,6 +317,58 @@ declare const overlayStyles: {
         top: number;
     };
 };
+declare const overlayActionStyles: {
+    actionButton: {
+        flexGrow: number;
+        minWidth: number;
+    };
+    actionButtonSingle: {
+        minWidth: number;
+    };
+    actions: {
+        flexDirection: "row";
+        flexWrap: "wrap";
+        gap: number;
+        justifyContent: "center";
+        width: "100%";
+    };
+};
+
+declare function getColorPopoverId(idPrefix: string): string;
+declare function getCpuDifficultyPopoverId(idPrefix: string): string;
+interface PlayerSetupPanelProps<C extends string = string> {
+    idPrefix: string;
+    host?: PopoverHost;
+    label?: string;
+    labelFontFamily?: string;
+    color: string;
+    onColorChange: (hex: string) => void;
+    swatches: SeedColor[];
+    takenColor?: string;
+    allowSwapTaken?: boolean;
+    colorAlignOverride?: AlignResult;
+    colorRotation?: PopoverRotation;
+    isHuman: boolean;
+    secondPicker?: ReactNode;
+    secondPickerId?: string;
+    ready?: boolean;
+    onToggleReady?: () => void;
+    dark: boolean;
+    showReadyButton?: boolean;
+    profiles?: Profile[];
+    selectedProfileId?: string | null;
+    takenProfileId?: string | null;
+    guestLabel?: string;
+    onProfileSelect?: (profile: Profile | null) => void;
+    onManageProfiles?: () => void;
+    cpuDifficulty?: C;
+    cpuDifficultyOptions?: LabeledDropdownOption<C>[];
+    onCpuDifficultyChange?: (value: C) => void;
+    cpuDifficultyAlignOverride?: AlignResult;
+    humanIcon?: string;
+    cpuIcon?: string;
+}
+declare function PlayerSetupPanel<C extends string = string>({ idPrefix, host, label, labelFontFamily, color, onColorChange, swatches, takenColor, allowSwapTaken, colorAlignOverride, colorRotation, isHuman, secondPicker, secondPickerId, ready, onToggleReady, dark, showReadyButton, profiles, selectedProfileId, takenProfileId, guestLabel, onProfileSelect, onManageProfiles, cpuDifficulty, cpuDifficultyOptions, onCpuDifficultyChange, cpuDifficultyAlignOverride, humanIcon, cpuIcon }: PlayerSetupPanelProps<C>): react.JSX.Element;
 
 interface Props$5 {
     visible: boolean;
@@ -308,6 +409,22 @@ interface Props$2 {
 }
 declare function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }: Props$2): react.JSX.Element;
 
+declare function getStaggeredWordDuration(letterCount: number): number;
+interface StaggeredWordProps {
+    word: string;
+    color: string;
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+    reducedMotion: boolean;
+    startIndex?: number;
+    fontWeight?: TextStyle['fontWeight'];
+    letterSpacing?: number;
+    style?: StyleProp<ViewStyle>;
+    onLayout?: (e: LayoutChangeEvent) => void;
+}
+declare function StaggeredWord({ word, color, fontFamily, fontSize, lineHeight, reducedMotion, startIndex, fontWeight, letterSpacing, style, onLayout }: StaggeredWordProps): react.JSX.Element;
+
 interface Props$1 {
     label: string;
     value: string;
@@ -345,4 +462,16 @@ interface UpdateDialogProps {
 }
 declare function UpdateDialog({ rotation, autoCheck, autoPrompt, onError }: UpdateDialogProps): react.JSX.Element;
 
-export { AchievementRow, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, ConfirmDialog, type ConfirmDialogProps, ContentGutter, ControlSchemePicker, type ControlSchemePickerProps, CornerActionButtons, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LOCKED_BADGE_COLOR, LabeledDropdown, type LabeledDropdownOption, MONO_FONT, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, type OverlayCardColors, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, StatRow, StatSection, TriggerGaugeHost, type TriggerGaugeProps, UpdateDialog, type UpdateDialogProps, getLabeledDropdownContentHeight, getOverlayCardColors, loadSkiaWeb, overlayStyles, useAutoAlign, usePopoverHost };
+interface QuitConfirmation {
+    /** Wire directly to <ConfirmDialog visible={...}>. */
+    confirmVisible: boolean;
+    /** Wire directly to the back button's onPress (GameActionChips/IconButton onBack/onPress). */
+    requestBack: () => void;
+    /** Wire directly to <ConfirmDialog onCancel={...}>. */
+    cancelBack: () => void;
+}
+declare function useQuitConfirmation(hasProgress: () => boolean, onConfirmedBack: () => void): QuitConfirmation;
+
+declare function useZoneClampedAlign(open: boolean, contentWidth: number, contentHeight: number, rotation?: PopoverRotation): ReturnType<typeof useAutoAlign>;
+
+export { AchievementCatalogSection, AchievementRow, AchievementUnlockList, type AchievementUnlockOwner, ActivityStatSection, type AlignResult, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, ConfirmDialog, type ConfirmDialogProps, ContentGutter, ControlSchemePicker, type ControlSchemePickerProps, CornerActionButtons, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LOCKED_BADGE_COLOR, LabeledDropdown, type LabeledDropdownOption, MONO_FONT, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, type OverlayCardColors, PlayerSetupPanel, type PlayerSetupPanelProps, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, type QuitConfirmation, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, StaggeredWord, type StaggeredWordProps, StatRow, StatSection, TriggerGaugeHost, type TriggerGaugeProps, type UnlockedAchievement, UpdateDialog, type UpdateDialogProps, getColorPopoverId, getCpuDifficultyPopoverId, getInlineColorPickerContentSize, getLabeledDropdownContentHeight, getOverlayCardColors, getStaggeredWordDuration, loadSkiaWeb, overlayActionStyles, overlayStyles, useAutoAlign, usePopoverHost, useQuitConfirmation, useZoneClampedAlign };

package/dist/index.d.ts

@@ -1,12 +1,22 @@
 import * as react from 'react';
 import { ReactNode, RefObject } from 'react';
+import { AchievementCatalogRow, AchievementTier } from '@tastic/achievements';
+import { Profile } from '@tastic/profile';
+import { ViewStyle, StyleProp, View, TextStyle, LayoutChangeEvent } from 'react-native';
 import { ViewRotation } from '@tastic/core';
-import { StyleProp, ViewStyle, View } from 'react-native';
 import { SeedColor } from '@rific/auto-paper';
 export { SkiaGate, SkiaGateProps } from './SkiaGate.js';
 
+interface Props$f {
+    rows: AchievementCatalogRow[];
+    label?: string;
+    fg?: string;
+    fgMuted?: string;
+}
+declare function AchievementCatalogSection({ rows, label, fg, fgMuted: fgMutedOverride }: Props$f): react.JSX.Element;
+
 declare const LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
-interface Props$c {
+interface Props$e {
     icon: string;
     title: string;
     description: string;
@@ -19,7 +29,37 @@ interface Props$c {
     fgMuted?: string;
     sectionBg?: string;
 }
-declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$c): react.JSX.Element;
+declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$e): react.JSX.Element;
+
+interface UnlockedAchievement {
+    id: string;
+    icon: string;
+    title: string;
+    tier: AchievementTier;
+}
+interface AchievementUnlockOwner {
+    profile?: Profile | null;
+    color: string;
+}
+interface Props$d<Seat extends number> {
+    unlocks: Partial<Record<Seat, UnlockedAchievement[]>>;
+    seats: readonly Seat[];
+    owners: Record<Seat, AchievementUnlockOwner>;
+    tierColors: Record<AchievementTier, string>;
+    fg?: string;
+    style?: ViewStyle;
+}
+declare function AchievementUnlockList<Seat extends number>({ unlocks, seats, owners, tierColors, fg: fgOverride, style }: Props$d<Seat>): react.JSX.Element | null;
+
+interface ActivityStats {
+    distinctDaysPlayed: number;
+    currentDayStreak: number;
+    bestDayStreak: number;
+}
+interface Props$c {
+    stats: ActivityStats;
+}
+declare function ActivityStatSection({ stats }: Props$c): react.JSX.Element;
 
 interface BaseSettingsDialogProps {
     visible: boolean;
@@ -35,9 +75,10 @@ interface BaseSettingsDialogProps {
     hideAppearance?: boolean;
     hideUpdateCheck?: boolean;
     onUpdateError?: (message: string) => void;
+    onShowHowToPlay?: () => void;
     children?: ReactNode;
 }
-declare function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, children }: BaseSettingsDialogProps): react.JSX.Element;
+declare function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, onShowHowToPlay, children }: BaseSettingsDialogProps): react.JSX.Element;
 
 type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface Props$b {
@@ -87,11 +128,18 @@ declare function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style
 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: react.RefObject<View | null>;
+    triggerRef: RefObject<View | null>;
     verticalAlign: PopoverVerticalAlign;
 };
 
@@ -137,6 +185,7 @@ interface Props$9 {
     onAccentColor?: string;
     dark: boolean;
     align?: 'left' | 'right' | 'center';
+    alignOverride?: AlignResult;
     rotation?: PopoverRotation;
     autoDismiss?: boolean;
     labelFontFamily?: string;
@@ -145,7 +194,7 @@ interface Props$9 {
         clear: string;
     };
 }
-declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, rotation: rotationOverride, autoDismiss, labelFontFamily, allClearLabels }: Props$9): react.JSX.Element;
+declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: forcedAlign, alignOverride, rotation: rotationOverride, autoDismiss, labelFontFamily, allClearLabels }: Props$9): react.JSX.Element;
 
 interface ControlSchemePickerProps<T extends string | number> {
     id: string;
@@ -159,9 +208,11 @@ interface ControlSchemePickerProps<T extends string | number> {
     onAccentColor?: string;
     dark: boolean;
     align?: 'left' | 'right' | 'center';
+    alignOverride?: AlignResult;
+    rotation?: PopoverRotation;
     labelFontFamily?: string;
 }
-declare function ControlSchemePicker<T extends string | number>({ id, host, value, onChange, options, takenValue, accentColor, mutedColor, onAccentColor, dark, align, labelFontFamily }: ControlSchemePickerProps<T>): react.JSX.Element | null;
+declare function ControlSchemePicker<T extends string | number>({ id, host, value, onChange, options, takenValue, accentColor, mutedColor, onAccentColor, dark, align, alignOverride, rotation, labelFontFamily }: ControlSchemePickerProps<T>): react.JSX.Element | null;
 
 interface Props$8 {
     onBack: () => void;
@@ -191,6 +242,10 @@ declare function CornerStatusBadges({ orientationMode, p1OnRight, p1, p2 }: Corn
 
 declare const MONO_FONT: string;
 
+declare function getInlineColorPickerContentSize(swatchCount: number, windowWidth: number, columns?: number): {
+    width: number;
+    height: number;
+};
 interface Props$7 {
     id: string;
     host: PopoverHost;
@@ -202,6 +257,7 @@ interface Props$7 {
     allowSwapTaken?: boolean;
     dark: boolean;
     align?: 'left' | 'right' | 'center';
+    alignOverride?: AlignResult;
     rotation?: PopoverRotation;
     icon?: string;
     tag?: string;
@@ -210,7 +266,7 @@ interface Props$7 {
     columns?: number;
     size?: number;
 }
-declare function InlineColorPicker({ id, host, value, onChange, previewValue, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, rotation: rotationOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$7): react.JSX.Element;
+declare function InlineColorPicker({ id, host, value, onChange, previewValue, swatches, takenValue, allowSwapTaken, dark, align: forcedAlign, alignOverride, rotation: rotationOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$7): react.JSX.Element;
 
 declare const LABELED_DROPDOWN_POPOVER_WIDTH = 180;
 declare function getLabeledDropdownContentHeight(optionCount: number): number;
@@ -219,13 +275,6 @@ interface LabeledDropdownOption<T extends string> {
     label: string;
     icon?: string;
 }
-interface AlignResult {
-    align: PopoverAlign;
-    verticalAlign: PopoverVerticalAlign;
-    maxHeight: number;
-    measured: boolean;
-    triggerRef: RefObject<View | null>;
-}
 interface Props$6<T extends string> {
     id: string;
     host: PopoverHost;
@@ -268,6 +317,58 @@ declare const overlayStyles: {
         top: number;
     };
 };
+declare const overlayActionStyles: {
+    actionButton: {
+        flexGrow: number;
+        minWidth: number;
+    };
+    actionButtonSingle: {
+        minWidth: number;
+    };
+    actions: {
+        flexDirection: "row";
+        flexWrap: "wrap";
+        gap: number;
+        justifyContent: "center";
+        width: "100%";
+    };
+};
+
+declare function getColorPopoverId(idPrefix: string): string;
+declare function getCpuDifficultyPopoverId(idPrefix: string): string;
+interface PlayerSetupPanelProps<C extends string = string> {
+    idPrefix: string;
+    host?: PopoverHost;
+    label?: string;
+    labelFontFamily?: string;
+    color: string;
+    onColorChange: (hex: string) => void;
+    swatches: SeedColor[];
+    takenColor?: string;
+    allowSwapTaken?: boolean;
+    colorAlignOverride?: AlignResult;
+    colorRotation?: PopoverRotation;
+    isHuman: boolean;
+    secondPicker?: ReactNode;
+    secondPickerId?: string;
+    ready?: boolean;
+    onToggleReady?: () => void;
+    dark: boolean;
+    showReadyButton?: boolean;
+    profiles?: Profile[];
+    selectedProfileId?: string | null;
+    takenProfileId?: string | null;
+    guestLabel?: string;
+    onProfileSelect?: (profile: Profile | null) => void;
+    onManageProfiles?: () => void;
+    cpuDifficulty?: C;
+    cpuDifficultyOptions?: LabeledDropdownOption<C>[];
+    onCpuDifficultyChange?: (value: C) => void;
+    cpuDifficultyAlignOverride?: AlignResult;
+    humanIcon?: string;
+    cpuIcon?: string;
+}
+declare function PlayerSetupPanel<C extends string = string>({ idPrefix, host, label, labelFontFamily, color, onColorChange, swatches, takenColor, allowSwapTaken, colorAlignOverride, colorRotation, isHuman, secondPicker, secondPickerId, ready, onToggleReady, dark, showReadyButton, profiles, selectedProfileId, takenProfileId, guestLabel, onProfileSelect, onManageProfiles, cpuDifficulty, cpuDifficultyOptions, onCpuDifficultyChange, cpuDifficultyAlignOverride, humanIcon, cpuIcon }: PlayerSetupPanelProps<C>): react.JSX.Element;
 
 interface Props$5 {
     visible: boolean;
@@ -308,6 +409,22 @@ interface Props$2 {
 }
 declare function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }: Props$2): react.JSX.Element;
 
+declare function getStaggeredWordDuration(letterCount: number): number;
+interface StaggeredWordProps {
+    word: string;
+    color: string;
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+    reducedMotion: boolean;
+    startIndex?: number;
+    fontWeight?: TextStyle['fontWeight'];
+    letterSpacing?: number;
+    style?: StyleProp<ViewStyle>;
+    onLayout?: (e: LayoutChangeEvent) => void;
+}
+declare function StaggeredWord({ word, color, fontFamily, fontSize, lineHeight, reducedMotion, startIndex, fontWeight, letterSpacing, style, onLayout }: StaggeredWordProps): react.JSX.Element;
+
 interface Props$1 {
     label: string;
     value: string;
@@ -345,4 +462,16 @@ interface UpdateDialogProps {
 }
 declare function UpdateDialog({ rotation, autoCheck, autoPrompt, onError }: UpdateDialogProps): react.JSX.Element;
 
-export { AchievementRow, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, ConfirmDialog, type ConfirmDialogProps, ContentGutter, ControlSchemePicker, type ControlSchemePickerProps, CornerActionButtons, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LOCKED_BADGE_COLOR, LabeledDropdown, type LabeledDropdownOption, MONO_FONT, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, type OverlayCardColors, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, StatRow, StatSection, TriggerGaugeHost, type TriggerGaugeProps, UpdateDialog, type UpdateDialogProps, getLabeledDropdownContentHeight, getOverlayCardColors, loadSkiaWeb, overlayStyles, useAutoAlign, usePopoverHost };
+interface QuitConfirmation {
+    /** Wire directly to <ConfirmDialog visible={...}>. */
+    confirmVisible: boolean;
+    /** Wire directly to the back button's onPress (GameActionChips/IconButton onBack/onPress). */
+    requestBack: () => void;
+    /** Wire directly to <ConfirmDialog onCancel={...}>. */
+    cancelBack: () => void;
+}
+declare function useQuitConfirmation(hasProgress: () => boolean, onConfirmedBack: () => void): QuitConfirmation;
+
+declare function useZoneClampedAlign(open: boolean, contentWidth: number, contentHeight: number, rotation?: PopoverRotation): ReturnType<typeof useAutoAlign>;
+
+export { AchievementCatalogSection, AchievementRow, AchievementUnlockList, type AchievementUnlockOwner, ActivityStatSection, type AlignResult, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, ConfirmDialog, type ConfirmDialogProps, ContentGutter, ControlSchemePicker, type ControlSchemePickerProps, CornerActionButtons, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LOCKED_BADGE_COLOR, LabeledDropdown, type LabeledDropdownOption, MONO_FONT, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, type OverlayCardColors, PlayerSetupPanel, type PlayerSetupPanelProps, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, type QuitConfirmation, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, StaggeredWord, type StaggeredWordProps, StatRow, StatSection, TriggerGaugeHost, type TriggerGaugeProps, type UnlockedAchievement, UpdateDialog, type UpdateDialogProps, getColorPopoverId, getCpuDifficultyPopoverId, getInlineColorPickerContentSize, getLabeledDropdownContentHeight, getOverlayCardColors, getStaggeredWordDuration, loadSkiaWeb, overlayActionStyles, overlayStyles, useAutoAlign, usePopoverHost, useQuitConfirmation, useZoneClampedAlign };