@tastic/hud 0.12.0 → 0.14.0

package/dist/index.d.ts

@@ -1,22 +1,22 @@
 import * as react from 'react';
 import { ReactNode, RefObject } from 'react';
-import { AchievementCatalogRow } from '@tastic/achievements';
+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, TextStyle, LayoutChangeEvent } from 'react-native';
 import { SeedColor } from '@rific/auto-paper';
-import { Profile } from '@tastic/profile';
 export { SkiaGate, SkiaGateProps } from './SkiaGate.js';
 
-interface Props$e {
+interface Props$f {
     rows: AchievementCatalogRow[];
     label?: string;
     fg?: string;
     fgMuted?: string;
 }
-declare function AchievementCatalogSection({ rows, label, fg, fgMuted: fgMutedOverride }: Props$e): react.JSX.Element;
+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$d {
+interface Props$e {
     icon: string;
     title: string;
     description: string;
@@ -29,7 +29,27 @@ interface Props$d {
     fgMuted?: string;
     sectionBg?: string;
 }
-declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$d): 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;
@@ -55,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 {
@@ -296,6 +317,22 @@ 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;
@@ -361,6 +398,40 @@ interface Props$3 {
 }
 declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$3): 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 {
     onBack: () => void;
     onSettings: () => void;
@@ -437,4 +508,4 @@ declare function useQuitConfirmation(hasProgress: () => boolean, onConfirmedBack
 
 declare function useZoneClampedAlign(open: boolean, contentWidth: number, contentHeight: number, rotation?: PopoverRotation): ReturnType<typeof useAutoAlign>;
 
-export { AchievementCatalogSection, AchievementRow, 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, UpdateDialog, type UpdateDialogProps, getColorPopoverId, getCpuDifficultyPopoverId, getInlineColorPickerContentSize, getLabeledDropdownContentHeight, getOverlayCardColors, getStaggeredWordDuration, loadSkiaWeb, overlayStyles, useAutoAlign, usePopoverHost, useQuitConfirmation, useZoneClampedAlign };
+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 };