@tastic/hud 0.14.2 → 0.15.0

package/dist/index.d.ts

@@ -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.js';
 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.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$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 };

package/dist/index.js

@@ -391,7 +391,7 @@ function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, chil
   ] });
 }
 var styles5 = import_react_native6.StyleSheet.create({
-  // Bold and full-contrast (fg), not the original fontless/fgMuted treatment — that read at the
+  // Bold and full-contrast (fg), not the original fontless/fgMuted treatment - that read at the
   // same visual weight as StatRow's own row labels below it (both used the identical muted color;
   // letterSpacing/variant alone didn't separate them enough to read as "this is the group header"
   // at a glance). Matches AchievementRow's own title styling (bold + fg) below it in the same list.
@@ -528,14 +528,14 @@ var styles6 = import_react_native8.StyleSheet.create({
     textAlign: "center"
   },
   // Additive on top of overlayCard's own shared `card` shape (borderRadius/borderWidth/gap/maxWidth/
-  // padding) — claims its full allowance instead of just maxWidth alone, which only caps how wide the
+  // padding) - claims its full allowance instead of just maxWidth alone, which only caps how wide the
   // card is allowed to get - without an explicit width, a flex-centered child sizes to its own content
   // instead of stretching, so the card (and therefore actions below) can end up narrower than the
   // screen actually has room for, needlessly forcing the action row to wrap sooner than it has to.
   card: {
     width: "100%"
   },
-  // Additive on top of overlayCard's own shared `overlay` backdrop — gives the card room to breathe
+  // Additive on top of overlayCard's own shared `overlay` backdrop - gives the card room to breathe
   // from the screen edges now that it reliably stretches to fill its full width allowance (see
   // card's own width comment) - without this, width: '100%' would run the card edge-to-edge on a
   // screen narrower than maxWidth's own 360.
@@ -732,7 +732,7 @@ var styles8 = import_react_native10.StyleSheet.create({
     gap: 24,
     paddingVertical: 20
   },
-  // Caps the card so it never grows past the screen — without this the dialog just keeps
+  // Caps the card so it never grows past the screen - without this the dialog just keeps
   // growing to fit its content and the overflow gets clipped by the screen edge, which is
   // what happened in landscape where there's less height to work with. Dialog.ScrollArea +
   // ScrollView below then take over and let the content scroll within that bound.
@@ -856,7 +856,7 @@ var styles9 = import_react_native11.StyleSheet.create({
   resetButton: {
     marginTop: 16
   },
-  // Bounds the ScrollView to the space `container`'s flex:1 actually gives it — without this, a
+  // Bounds the ScrollView to the space `container`'s flex:1 actually gives it - without this, a
   // ScrollView with only a contentContainerStyle isn't reliably height-constrained on native (it
   // can render at its full unclipped content height instead of the screen's), which leaves the
   // header's back button touch target unreliable underneath it.
@@ -935,7 +935,7 @@ var styles11 = import_react_native13.StyleSheet.create({
     height: 0,
     position: "absolute",
     width: 0,
-    // Explicit, not left to DOM order — the box it dips into is itself a position:'relative' view,
+    // Explicit, not left to DOM order - the box it dips into is itself a position:'relative' view,
     // which React Native Web always gives an implicit zIndex:0 (see PopoverBody's stacking-context
     // notes elsewhere in this codebase), so painting on top needs a real zIndex to beat that
     // reliably rather than relying on being the later sibling.
@@ -954,7 +954,7 @@ var styles11 = import_react_native13.StyleSheet.create({
     top: "100%"
   },
   // Stretched to the anchor's own (trigger) width, with alignItems centering the actual (usually
-  // much wider) popover box inside via plain flexbox — not `left:'50%'` plus a percentage
+  // much wider) popover box inside via plain flexbox - not `left:'50%'` plus a percentage
   // `transform`, which depends on native resolving the box's own auto width before applying the
   // transform and has proven unreliable there, visibly shifting the box off-center.
   contentCenter: {
@@ -1179,7 +1179,7 @@ var styles13 = import_react_native16.StyleSheet.create({
     position: "relative"
   },
   // React Native Web gives every position:'relative' view an explicit zIndex (0, not 'auto'),
-  // which makes each one its own stacking context — so a zIndex set only on the popover content
+  // which makes each one its own stacking context - so a zIndex set only on the popover content
   // below only wins comparisons within this anchor's own box, not against this anchor's own later
   // siblings (e.g. a Ready button), which are otherwise painted on top by DOM-order tiebreak.
   // Elevating the anchor itself, only while its popover is open, fixes that at the right level.
@@ -1206,7 +1206,7 @@ var styles13 = import_react_native16.StyleSheet.create({
     flexDirection: "row",
     gap: 8
   },
-  // Same opacity as ProfilePicker's rowDisabled / InlineColorPicker's swatchTaken — the fleet's
+  // Same opacity as ProfilePicker's rowDisabled / InlineColorPicker's swatchTaken - the fleet's
   // established "shown, not removed" treatment for another seat's own current pick.
   itemTaken: {
     opacity: 0.35
@@ -1222,7 +1222,7 @@ var styles13 = import_react_native16.StyleSheet.create({
     shadowOpacity: 0.3,
     shadowRadius: 8
   },
-  // Separate from `menu` itself — a ScrollView's own style sets the scrolling frame's bounds
+  // Separate from `menu` itself - a ScrollView's own style sets the scrolling frame's bounds
   // (including the maxHeight that actually caps it), while padding/gap belong to its
   // contentContainerStyle, which sizes to the *unclamped* content instead of the frame.
   menuContent: {
@@ -1370,7 +1370,7 @@ var styles16 = import_react_native20.StyleSheet.create({
   anchor: {
     position: "relative"
   },
-  // See SectionedDropdown's identical comment — React Native Web gives every position:'relative' view
+  // See SectionedDropdown's identical comment - React Native Web gives every position:'relative' view
   // its own stacking context, so the elevation has to live on the anchor itself, not just the
   // popover content nested inside it, to correctly paint above this anchor's own later siblings.
   anchorOpen: {
@@ -1398,12 +1398,12 @@ var styles16 = import_react_native20.StyleSheet.create({
     shadowOffset: { height: 2, width: 0 },
     shadowOpacity: 0.3,
     shadowRadius: 8
-    // width is set inline above — border-box sizing means it has to include the border too
+    // width is set inline above - border-box sizing means it has to include the border too
     // (2*SWATCHES_BORDER_WIDTH), not just padding+content, or exactly enough room goes missing that
     // the last column silently wraps to a new row. Anything wider than the exact sum just shows as
     // dead space on the right edge of each row instead.
   },
-  // Separate from `swatches` itself — see SectionedDropdown's identical menu/menuContent split.
+  // Separate from `swatches` itself - see SectionedDropdown's identical menu/menuContent split.
   // The scroll frame's own bounds (including maxHeight) live on the ScrollView; the actual grid
   // wrapping belongs to its contentContainerStyle, which sizes to the unclamped content instead.
   swatchesContent: {
@@ -1416,7 +1416,7 @@ var styles16 = import_react_native20.StyleSheet.create({
     fontWeight: "700",
     letterSpacing: 0.5
   },
-  // borderRadius/height/width come from the `size` prop instead (see render-site override) — no
+  // borderRadius/height/width come from the `size` prop instead (see render-site override) - no
   // fixed default here, since this style object is shared by every caller regardless of size.
   trigger: {
     alignItems: "center",
@@ -1424,7 +1424,7 @@ var styles16 = import_react_native20.StyleSheet.create({
     justifyContent: "center"
   },
   // Wraps just the icon/tag, inside the TouchableRipple, purely so useAutoAlign has a plain View
-  // to attach its measurement ref to — TouchableRipple itself doesn't forward a ref to a
+  // to attach its measurement ref to - TouchableRipple itself doesn't forward a ref to a
   // measurable native node. Padded horizontally so a multi-character tag doesn't butt right up
   // against the trigger's own circular edge (an icon alone doesn't need it, but this style is
   // shared by both).
@@ -1485,7 +1485,7 @@ var styles17 = import_react_native21.StyleSheet.create({
     position: "relative"
   },
   // React Native Web gives every position:'relative' view its own stacking context, so the
-  // elevation has to live on the anchor itself — see PopoverBody's own stacking-context notes.
+  // elevation has to live on the anchor itself - see PopoverBody's own stacking-context notes.
   anchorOpen: {
     zIndex: 100
   },
@@ -1606,13 +1606,13 @@ var styles19 = import_react_native23.StyleSheet.create({
     alignItems: "center",
     gap: 12
   },
-  // See SectionedDropdown's anchorOpen comment — this panel is typically a sibling of another
+  // See SectionedDropdown's anchorOpen comment - this panel is typically a sibling of another
   // panel (and/or a shared-controls row), so a popover escaping this panel's bounds needs the panel
   // itself elevated, not just the popover content, to paint above a later sibling.
   panelOpen: {
     zIndex: 100
   },
-  // Same gap as `panel`'s own vertical rhythm, reused horizontally — the color picker and (when
+  // Same gap as `panel`'s own vertical rhythm, reused horizontally - the color picker and (when
   // present) secondPicker sit side by side within this row instead of stacked in the panel's own
   // column.
   pickerRow: {
@@ -1620,10 +1620,10 @@ var styles19 = import_react_native23.StyleSheet.create({
     flexDirection: "row",
     gap: 12
   },
-  // A popover is an absolutely-positioned sibling of its own trigger — so a tall one (the color
+  // A popover is an absolutely-positioned sibling of its own trigger - so a tall one (the color
   // swatch grid) can extend down far enough to overlap the ReadyButton below, which paints on top of
   // it by default DOM order since it's a later sibling within `panel`. `panel`'s own panelOpen
-  // elevation only helps this panel paint above OTHER panels (see its own comment) — it does nothing
+  // elevation only helps this panel paint above OTHER panels (see its own comment) - it does nothing
   // for stacking *within* this panel, since React Native Web gives each View its own stacking
   // context. This is what actually fixes that: elevate pickerRow itself above its own later sibling
   // whenever one of its own popovers is open.