@tastic/hud 0.14.2 → 0.15.0

package/dist/guide/index.mjs

@@ -156,7 +156,7 @@ var styles2 = StyleSheet2.create({
   body: {
     textAlign: "center"
   },
-  // Additive on top of overlayCard's own shared `card` shape — its default 32px padding is tighter
+  // Additive on top of overlayCard's own shared `card` shape - its default 32px padding is tighter
   // here (a paged card wants more width for its art) and the shared 16px gap is right.
   card: {
     padding: CARD_PADDING
@@ -334,7 +334,7 @@ var styles4 = StyleSheet4.create({
   label: {
     fontWeight: "bold"
   },
-  // A wash of the seat color behind its own label rather than an rgba() fill — the theme's colors
+  // A wash of the seat color behind its own label rather than an rgba() fill - the theme's colors
   // aren't guaranteed to be 6-digit hex, so an opacity layer is the only alpha that always works.
   tint: {
     opacity: 0.2
@@ -394,7 +394,7 @@ var styles5 = StyleSheet5.create({
     justifyContent: "space-between"
   },
   // Centered on the whole path (not on the dots row alone) by the container's own alignItems/
-  // justifyContent, then pushed along the axis by its own animated translate — absolute so it never
+  // justifyContent, then pushed along the axis by its own animated translate - absolute so it never
   // takes space from the dots and arrowhead it's drawn over.
   finger: {
     borderRadius: FINGER_SIZE / 2,

package/dist/index.d.mts

@@ -1,36 +1,13 @@
+export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, BaseSettingsDialogProps, BaseStatsScreen, ConfirmDialog, ConfirmDialogProps, ContentGutter, CornerActionButtons, LOCKED_BADGE_COLOR, MONO_FONT, OverlayCardColors, RotatedFrame, RotatedFrameProps, StaggeredWord, StaggeredWordProps, StatRow, StatSection, UpdateDialog, UpdateDialogProps, getOverlayCardColors, getStaggeredWordDuration, overlayActionStyles, overlayStyles } from './chrome/index.mjs';
 import * as react from 'react';
-import { ReactNode, RefObject } from 'react';
-import { AchievementCatalogRow, AchievementTier } from '@tastic/achievements';
+import { RefObject, ReactNode } from 'react';
+import { AchievementTier } from '@tastic/achievements';
 import { Profile } from '@tastic/profile';
-import { ViewStyle, StyleProp, View, TextStyle, LayoutChangeEvent } from 'react-native';
+import { ViewStyle, View, StyleProp } from 'react-native';
 import { ViewRotation } from '@tastic/core';
 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$e {
-    icon: string;
-    title: string;
-    description: string;
-    badgeColor: string;
-    unlockedLabel?: string;
-    checkColor?: string;
-    progress?: number;
-    deviceMarker?: boolean;
-    fg?: string;
-    fgMuted?: string;
-    sectionBg?: string;
-}
-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;
@@ -41,7 +18,7 @@ interface AchievementUnlockOwner {
     profile?: Profile | null;
     color: string;
 }
-interface Props$d<Seat extends number> {
+interface Props$7<Seat extends number> {
     unlocks: Partial<Record<Seat, UnlockedAchievement[]>>;
     seats: readonly Seat[];
     owners: Record<Seat, AchievementUnlockOwner>;
@@ -49,81 +26,7 @@ interface Props$d<Seat extends number> {
     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;
-    onDismiss: () => void;
-    rotation?: ViewRotation;
-    version: string | number;
-    lockOrientation?: boolean;
-    onLockOrientationChange?: (value: boolean) => void;
-    deferBottomEdgeGestures?: boolean;
-    onDeferBottomEdgeGestures?: (value: boolean) => void;
-    hideSound?: boolean;
-    hideHaptics?: boolean;
-    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, 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$b {
-    rotation?: ViewRotation;
-    title?: string;
-    titleVariant?: MD3TextVariant;
-    onBack: () => void;
-    insets: {
-        top: number;
-        left: number;
-        bottom: number;
-        right: number;
-    };
-    onReset?: () => void;
-    resetLabel?: string;
-    resetConfirmTitle?: string;
-    resetConfirmBody?: string;
-    fg?: string;
-    bg?: string;
-    children: ReactNode;
-}
-declare function BaseStatsScreen({ rotation: rotationOverride, title, titleVariant, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, children }: Props$b): react.JSX.Element;
-
-interface ConfirmDialogProps {
-    visible: boolean;
-    title: string;
-    message: ReactNode;
-    confirmLabel: string;
-    cancelLabel?: string;
-    onConfirm: () => void;
-    onCancel?: () => void;
-    rotation?: ViewRotation;
-    icon?: string;
-    destructive?: boolean;
-}
-declare function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation, icon, destructive }: ConfirmDialogProps): react.JSX.Element | null;
-
-interface Props$a {
-    maxContentWidth?: number;
-    leftGutter?: ReactNode;
-    rightGutter?: ReactNode;
-    style?: StyleProp<ViewStyle>;
-    children: ReactNode;
-}
-declare function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }: Props$a): react.JSX.Element;
+declare function AchievementUnlockList<Seat extends number>({ unlocks, seats, owners, tierColors, fg: fgOverride, style }: Props$7<Seat>): react.JSX.Element | null;
 
 type PopoverAlign = 'left' | 'right' | 'center';
 type PopoverVerticalAlign = 'below' | 'above';
@@ -174,7 +77,7 @@ interface MultiSelectSection<T extends string | number> {
     allClear?: boolean;
 }
 type MenuSection = SingleSelectSection<any> | MultiSelectSection<any>;
-interface Props$9 {
+interface Props$6 {
     id: string;
     host: PopoverHost;
     icon: string;
@@ -194,7 +97,7 @@ interface Props$9 {
         clear: string;
     };
 }
-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;
+declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: forcedAlign, alignOverride, rotation: rotationOverride, autoDismiss, labelFontFamily, allClearLabels }: Props$6): react.JSX.Element;
 
 interface ControlSchemePickerProps<T extends string | number> {
     id: string;
@@ -214,20 +117,6 @@ interface ControlSchemePickerProps<T extends string | number> {
 }
 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;
-    onSettings: () => void;
-    fg: string;
-    insets: {
-        top: number;
-        left: number;
-        right: number;
-    };
-    backIcon?: string;
-    backLabel?: string;
-}
-declare function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon, backLabel }: Props$8): react.JSX.Element;
-
 type OrientationMode = 'faceToFace' | 'sideBySide';
 interface CornerStatusBadgeSeat {
     icon?: string;
@@ -240,13 +129,11 @@ interface CornerStatusBadgesProps {
 }
 declare function CornerStatusBadges({ orientationMode, p1OnRight, p1, p2 }: CornerStatusBadgesProps): react.JSX.Element;
 
-declare const MONO_FONT: string;
-
 declare function getInlineColorPickerContentSize(swatchCount: number, windowWidth: number, columns?: number): {
     width: number;
     height: number;
 };
-interface Props$7 {
+interface Props$5 {
     id: string;
     host: PopoverHost;
     value: string;
@@ -266,7 +153,7 @@ interface Props$7 {
     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$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$5): react.JSX.Element;
 
 declare const LABELED_DROPDOWN_POPOVER_WIDTH = 180;
 declare function getLabeledDropdownContentHeight(optionCount: number): number;
@@ -275,7 +162,7 @@ interface LabeledDropdownOption<T extends string> {
     label: string;
     icon?: string;
 }
-interface Props$6<T extends string> {
+interface Props$4<T extends string> {
     id: string;
     host: PopoverHost;
     options: LabeledDropdownOption<T>[];
@@ -286,54 +173,10 @@ interface Props$6<T extends string> {
     align?: 'left' | 'right' | 'center';
     alignOverride?: AlignResult;
 }
-declare function LabeledDropdown<T extends string>({ id, host, options, value, onChange, color, dark, align: forcedAlign, alignOverride }: Props$6<T>): react.JSX.Element;
+declare function LabeledDropdown<T extends string>({ id, host, options, value, onChange, color, dark, align: forcedAlign, alignOverride }: Props$4<T>): react.JSX.Element;
 
 declare function loadSkiaWeb(): Promise<void>;
 
-interface OverlayCardColors {
-    fg: string;
-    fgMuted: string;
-    cardBg: string;
-    cardBorder: string;
-}
-declare function getOverlayCardColors(dark: boolean): OverlayCardColors;
-declare const overlayStyles: {
-    card: {
-        alignItems: "center";
-        borderRadius: number;
-        borderWidth: number;
-        gap: number;
-        maxWidth: number;
-        padding: number;
-    };
-    overlay: {
-        alignItems: "center";
-        backgroundColor: string;
-        bottom: number;
-        justifyContent: "center";
-        left: number;
-        position: "absolute";
-        right: number;
-        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> {
@@ -370,7 +213,7 @@ interface PlayerSetupPanelProps<C extends string = 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 {
+interface Props$3 {
     visible: boolean;
     children: ReactNode;
     align?: 'left' | 'right' | 'center';
@@ -380,59 +223,25 @@ interface Props$5 {
     caretBorderWidth?: number;
     triggerSize?: number;
 }
-declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$5): react.JSX.Element | null;
+declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$3): react.JSX.Element | null;
 
-interface Props$4 {
+interface Props$2 {
     active: boolean;
     onPress: () => void;
     style?: StyleProp<ViewStyle>;
 }
-declare function PressAwayOverlay({ active, onPress, style }: Props$4): react.JSX.Element | null;
+declare function PressAwayOverlay({ active, onPress, style }: Props$2): react.JSX.Element | null;
 
-interface Props$3 {
+interface Props$1 {
     color: string;
     ready: boolean;
     onToggleReady: () => void;
     style?: StyleProp<ViewStyle>;
     labelFontFamily?: string;
 }
-declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$3): react.JSX.Element;
+declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$1): react.JSX.Element;
 
-interface RotatedFrameProps {
-    children: ReactNode;
-    /** The angle to turn the frame by. Defaults to the live physical hold (@tastic/core's useRotation); pass it
-     * when the caller already has the exact angle it wants, e.g. a dialog handed its caller's rotation, or 0 for
-     * one that already sits inside a turned frame. */
-    rotation?: ViewRotation;
-    /** Give everything inside the frame the safe-area insets already remapped onto the frame's own edges (see
-     * @tastic/core's rotateInsets), so a component that reads `useSafeAreaInsets()` itself (a library screen,
-     * Paper's Modal, a toaster) lands on the right edge when the frame is turned. Leave it off for content that
-     * rotates the insets itself, which would otherwise rotate them twice. */
-    rotatedSafeArea?: boolean;
-    /** Mount a Paper Portal.Host INSIDE the frame, so a dialog (Paper's Portal otherwise mounts at the app root,
-     * outside the frame) is laid out against the frame's footprint and turned with it. The dialog must then be
-     * told `rotation={0}`. */
-    portalHost?: boolean;
-    /** Let touches fall through the frame to whatever is beneath it, so only its children claim them. For a frame
-     * laid OVER other content (a dialog layer, a root-level overlay); a screen that owns the window leaves it off. */
-    passThrough?: boolean;
-    /** Cap on the content column's width in the WIDE layout only (the rotated footprint is landscape), centred: a
-     * stats list or a roster stretched across an 874pt-wide landscape screen reads badly. Portrait is never capped,
-     * so a portrait iPad or desktop window keeps its full width. Omit for no cap. */
-    maxContentWidth?: number;
-}
-/** A frame turned to follow the phone while the OS stays portrait-locked (see @tastic/core's FakeLandscapeView),
- * sized to the turned footprint so its content lays out against the short edge at +/-90. The tree is IDENTICAL
- * at every angle, so a rotation never remounts what is inside: `FakeLandscapeView > SafeArea provider >
- * [Portal.Host] > column`. `rotation`, `rotatedSafeArea`, `passThrough` and `maxContentWidth` only change styles
- * and values, but `portalHost` adds or removes the Portal.Host element, so it must be STATIC per call site
- * (flipping it at runtime would remount everything inside).
- *
- * Safe for tap-driven content only: react-native-gesture-handler's translation deltas are untransformed, so
- * never put a gesture-tracked game board inside it. */
-declare function RotatedFrame({ children, rotation: rotationOverride, rotatedSafeArea, portalHost, passThrough, maxContentWidth }: RotatedFrameProps): react.JSX.Element;
-
-interface Props$2 {
+interface Props {
     onBack: () => void;
     onSettings: () => void;
     onRandomize?: () => void;
@@ -441,39 +250,7 @@ interface Props$2 {
     popoverOpen: boolean;
     children: ReactNode;
 }
-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;
-    fg?: string;
-    fgMuted?: string;
-}
-declare function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }: Props$1): react.JSX.Element;
-
-interface Props {
-    label: string;
-    fg?: string;
-    sectionBg?: string;
-    children: ReactNode;
-}
-declare function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }: Props): react.JSX.Element;
+declare function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }: Props): react.JSX.Element;
 
 interface TriggerGaugeProps {
     segments: number;
@@ -488,14 +265,6 @@ interface TriggerGaugeProps {
 
 declare function TriggerGaugeHost(props: TriggerGaugeProps): react.JSX.Element;
 
-interface UpdateDialogProps {
-    rotation?: ViewRotation;
-    autoCheck?: boolean;
-    autoPrompt?: boolean;
-    onError?: (message: string) => void;
-}
-declare function UpdateDialog({ rotation, autoCheck, autoPrompt, onError }: UpdateDialogProps): react.JSX.Element;
-
 interface QuitConfirmation {
     /** Wire directly to <ConfirmDialog visible={...}>. */
     confirmVisible: boolean;
@@ -508,4 +277,4 @@ declare function useQuitConfirmation(hasProgress: () => boolean, onConfirmedBack
 
 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, RotatedFrame, type RotatedFrameProps, 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 };
+export { AchievementUnlockList, type AchievementUnlockOwner, type AlignResult, ControlSchemePicker, type ControlSchemePickerProps, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LabeledDropdown, type LabeledDropdownOption, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, PlayerSetupPanel, type PlayerSetupPanelProps, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, type QuitConfirmation, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, TriggerGaugeHost, type TriggerGaugeProps, type UnlockedAchievement, getColorPopoverId, getCpuDifficultyPopoverId, getInlineColorPickerContentSize, getLabeledDropdownContentHeight, loadSkiaWeb, useAutoAlign, usePopoverHost, useQuitConfirmation, useZoneClampedAlign };