@tastic/hud 0.14.2 → 0.16.0

package/src/SectionedDropdown.tsx

@@ -11,11 +11,11 @@ import { AlignResult, PopoverRotation, useAutoAlign } from './useAutoAlign'
 import { PopoverHost } from './usePopoverHost'
 
 const MENU_BORDER_WIDTH = 1
-// Matches triggerBox's own height/width below — passed to PopoverBody so its caret can point at
+// Matches triggerBox's own height/width below - passed to PopoverBody so its caret can point at
 // this trigger's actual center, not the (usually wider) menu's midpoint.
 const TRIGGER_SIZE = 44
 const MENU_MIN_WIDTH = 200
-// Fed into useAutoAlign as the popover's assumed width — a real render can come in narrower
+// Fed into useAutoAlign as the popover's assumed width - a real render can come in narrower
 // (shrink-to-fit content), but never wider, since `menu` below caps at this same value. Alignment
 // math staying in sync with the actual rendered cap is what keeps it from ever being wrong in a way
 // that lets the popover clip off-screen.
@@ -24,7 +24,7 @@ const MENU_ITEM_ICON_SIZE = 18
 // Tuned by eye: wide enough that a short one-word-ish label stays on one line, narrow enough that a
 // sentence-length description reliably wraps onto a second line instead.
 const MENU_ITEM_LABEL_MAX_WIDTH = 150
-// Estimated per-row heights fed into useAutoAlign's vertical flip — approximate (item's own
+// Estimated per-row heights fed into useAutoAlign's vertical flip - approximate (item's own
 // padding + a labelLarge line, give or take font metrics), not measured, for the same reason
 // MENU_MAX_WIDTH is a fixed cap rather than a measured value: knowing it before the popover renders
 // is what lets the flip decision happen in the same frame as opening, instead of a measure-then-
@@ -38,7 +38,7 @@ export interface MenuOption<T extends string | number> {
   value: T
   label: string
   description?: string
-  // Optional per-option icon — when every option in a single-select section has one, the trigger
+  // Optional per-option icon - when every option in a single-select section has one, the trigger
   // shows the currently selected option's icon instead of the static fallback, so the value is
   // readable at a glance without opening the dropdown. Unused by multi-select sections (there's no
   // single "the" selected option to show on the trigger).
@@ -46,7 +46,7 @@ export interface MenuOption<T extends string | number> {
   iconSize?: number
 }
 
-// Exactly one of these can be true at a time — radio-style. Tapping a row selects it; whether that
+// Exactly one of these can be true at a time - radio-style. Tapping a row selects it; whether that
 // also closes the popover is controlled by the dropdown's own `autoDismiss` prop.
 export interface SingleSelectSection<T extends string | number> {
   kind: 'single'
@@ -54,7 +54,7 @@ export interface SingleSelectSection<T extends string | number> {
   options: MenuOption<T>[]
   value: T
   onChange: (value: T) => void
-  // Another seat's currently-selected value in this section, if any — stays in `options` (so the
+  // Another seat's currently-selected value in this section, if any - stays in `options` (so the
   // trigger gauge below keeps indexing into the one list every seat shares, instead of each seat's
   // gauge landing wherever its own filtered-down list happens to put the remaining values) but
   // renders disabled and dimmed, unselectable. Same "shown, not removed" treatment as
@@ -62,7 +62,7 @@ export interface SingleSelectSection<T extends string | number> {
   takenValue?: T
 }
 
-// Any number of these can be true at once — checkbox-style. Tapping a row toggles just that one and
+// Any number of these can be true at once - checkbox-style. Tapping a row toggles just that one and
 // never closes the popover on its own (unlike a single-select row, picking one of several things
 // isn't "done" the way picking the one value in a single-select is).
 export interface MultiSelectSection<T extends string | number> {
@@ -71,7 +71,7 @@ export interface MultiSelectSection<T extends string | number> {
   options: MenuOption<T>[]
   value: T[]
   onChange: (value: T[]) => void
-  // Renders an alternating All/Clear bulk-toggle button beneath this section's rows — label reflects
+  // Renders an alternating All/Clear bulk-toggle button beneath this section's rows - label reflects
   // what tapping it would do next (every option already selected -> "Clear"; anything else -> "All").
   allClear?: boolean
 }
@@ -82,18 +82,18 @@ export type MenuSection = SingleSelectSection<any> | MultiSelectSection<any>
 interface Props {
   id: string
   host: PopoverHost
-  // Static fallback trigger icon — used whenever there isn't a single unambiguous "selected option"
+  // Static fallback trigger icon - used whenever there isn't a single unambiguous "selected option"
   // to show instead (see the trigger-icon logic below).
   icon: string
   accessibilityLabel: string
   sections: MenuSection[]
   accentColor: string
   mutedColor: string
-  // Foreground for a selected row's icon/text, painted on top of accentColor's own fill — accentColor
+  // Foreground for a selected row's icon/text, painted on top of accentColor's own fill - accentColor
   // isn't guaranteed to be a fixed brand tone (a consumer may derive it from a user-chosen color), so
   // a hardcoded black or a guessed contrast color both risk landing unreadable against it. Omit to
   // derive one automatically (getColorRoles' onColor) from accentColor against this popover's own
-  // background — pass a real design-system "on" color explicitly instead when you have one.
+  // background - pass a real design-system "on" color explicitly instead when you have one.
   onAccentColor?: string
   dark: boolean
   // Forces a specific horizontal alignment instead of letting whichever placement result applies
@@ -101,14 +101,14 @@ interface Props {
   // the trigger actually sits.
   align?: 'left' | 'right' | 'center'
   // Substitutes this package's own plain useAutoAlign-based placement wholesale (align,
-  // verticalAlign, maxHeight, measured, triggerRef) with a caller-supplied one — e.g.
+  // verticalAlign, maxHeight, measured, triggerRef) with a caller-supplied one - e.g.
   // useZoneClampedAlign's result, for a dropdown living inside a @tastic/split-screen zone, where
   // the plain window-relative decision can pick a direction that overflows into the shared row
   // instead of the zone's own boundary. Same shape LabeledDropdown's own alignOverride takes; omit
   // for the ordinary case (a popover with nothing but the screen edge to avoid).
   alignOverride?: AlignResult
   // Explicit override for the rotation a @tastic/split-screen-style FakeLandscapeView (or any other
-  // ancestor rotated the same way — a bare CSS `transform: rotate()`, not an actual OS-level
+  // ancestor rotated the same way - a bare CSS `transform: rotate()`, not an actual OS-level
   // orientation change) is currently applying. Defaults to a live ambient read via @tastic/core's
   // useRotation() when omitted, so most callers never need to pass this at all. Pass it explicitly
   // only when a caller's own reading needs to differ from the ambient one (e.g. a fading dual-zone
@@ -120,11 +120,11 @@ interface Props {
   rotation?: PopoverRotation
   // Whether picking a value in a *single-select* section closes the popover. Defaults to true
   // (the old, pre-press-away default: pick one thing, you're done). Multi-select rows never
-  // auto-close regardless of this — see MultiSelectSection's own comment. Worth setting false for a
+  // auto-close regardless of this - see MultiSelectSection's own comment. Worth setting false for a
   // dropdown with multiple sections, where picking one value while another's still being decided
   // shouldn't snap the whole thing shut; press-away (or the trigger itself) closes it instead.
   autoDismiss?: boolean
-  // Defaults to the system monospace font — pass your own game's registered font to match its UI.
+  // Defaults to the system monospace font - pass your own game's registered font to match its UI.
   labelFontFamily?: string
   allClearLabels?: { all: string; clear: string }
 }
@@ -141,19 +141,19 @@ export function SectionedDropdown({ id, host, icon, accessibilityLabel, sections
   const menuBg = dark ? '#000000' : '#FFFFFF'
   // mutedColor is translucent (fine for the icon/text tints below, each a single paint), but the
   // caret is deliberately drawn overlapping the box's own top border (PopoverBody's CARET_DIP,
-  // needed to avoid a subpixel seam between the two separately-drawn edges) — with a translucent
+  // needed to avoid a subpixel seam between the two separately-drawn edges) - with a translucent
   // color that overlap double-blends into a visibly lighter patch, unlike every other (opaque-
   // bordered) popover in the app. Flattened once against this menu's own solid background so the
   // box border and caret ring paint identically instead of compounding.
   const menuBorderColor = getBlendedColor(mutedColor, menuBg, 0.5)
   const resolvedOnAccentColor = onAccentColor ?? getColorRoles(accentColor, menuBg).onColor
-  // A bold, always-legible foreground — the trigger icon's job is category identity ("this is grid
+  // A bold, always-legible foreground - the trigger icon's job is category identity ("this is grid
   // size"), not state, so it stays as bold as any other icon on screen (a back arrow, a settings
   // gear) instead of dimmed. State lives entirely in TriggerGaugeHost's ring around it.
   const fg = dark ? '#FFFFFF' : '#000000'
 
   const open = host.openId === id
-  // Estimated, not measured — see MENU_ITEM_HEIGHT's own comment. Every row, plus a divider between
+  // Estimated, not measured - see MENU_ITEM_HEIGHT's own comment. Every row, plus a divider between
   // sections, plus a footer row for whichever multi-select sections show one.
   const estimatedHeight =
     MENU_VERTICAL_PADDING +
@@ -163,7 +163,7 @@ export function SectionedDropdown({ id, host, icon, accessibilityLabel, sections
       const divider = sectionIndex > 0 ? MENU_DIVIDER_HEIGHT : 0
       return sum + rows + footer + divider
     }, 0)
-  // Always called, even when alignOverride is supplied and this result goes unused — hooks can't be
+  // Always called, even when alignOverride is supplied and this result goes unused - hooks can't be
   // called conditionally. See LabeledDropdown's identical comment for the same tradeoff.
   const auto = useAutoAlign(open, MENU_MAX_WIDTH, estimatedHeight, rotation)
   const placement = alignOverride ?? auto
@@ -171,7 +171,7 @@ export function SectionedDropdown({ id, host, icon, accessibilityLabel, sections
   const align = forcedAlign ?? placement.align
 
   // Trigger reflects the selected option's own icon only when there's exactly one section and it's
-  // single-select — any other shape (multi-select present, or more than one section) has no single
+  // single-select - any other shape (multi-select present, or more than one section) has no single
   // unambiguous "the" value to show, so it falls back to the static icon instead.
   const onlySection = sections.length === 1 ? sections[0] : null
   const selectedOption = onlySection?.kind === 'single' ? onlySection.options.find((o) => o.value === onlySection.value) : undefined
@@ -180,14 +180,14 @@ export function SectionedDropdown({ id, host, icon, accessibilityLabel, sections
   const hasMultiSection = sections.some((s) => s.kind === 'multi')
   const anyMultiSelected = sections.some((s) => s.kind === 'multi' && s.value.length > 0)
   // A single-select trigger always has exactly one active value, so there's no "off" state for its
-  // icon to distinguish — plain fg, unconditionally. A multi-select one (powerups, say) genuinely
+  // icon to distinguish - plain fg, unconditionally. A multi-select one (powerups, say) genuinely
   // can be fully off (nothing enabled), which is different information than *which* ones are on
-  // (the gauge ring's job) — worth a real on/off read on the icon itself, especially once a section
+  // (the gauge ring's job) - worth a real on/off read on the icon itself, especially once a section
   // like this gains a combined off/few/many dimension alongside its checkboxes.
   const triggerIconColor = hasMultiSection ? (anyMultiSelected ? accentColor : fg) : fg
 
   // Unlike the trigger-icon override above (which only makes sense for a single unambiguous "the"
-  // value), the gauge ring has no such restriction — it just needs a position per option and which
+  // value), the gauge ring has no such restriction - it just needs a position per option and which
   // ones are lit, so it flattens every section's options into one combined ring instead of only
   // rendering when there's exactly one section. A two-section dropdown (say, board variant + a
   // rink toggle riding along as its own single-item multi-select) reads as one ring where the first
@@ -219,12 +219,12 @@ export function SectionedDropdown({ id, host, icon, accessibilityLabel, sections
         <IconButton icon={triggerIcon} iconColor={triggerIconColor} size={triggerIconSize} accessibilityLabel={accessibilityLabel} onPress={() => host.toggle(id)} />
       </View>
 
-      {/* Gated on `measured`, not just `open` — see useAutoAlign's own comment. Without it, the
+      {/* Gated on `measured`, not just `open` - see useAutoAlign's own comment. Without it, the
       popover mounts for one frame at whatever align/verticalAlign the *previous* open (or the
       initial center/below guess) left behind, then visibly jumps once this open's own measurement
-      lands — most noticeable near a screen edge, where the guess is furthest from correct. */}
+      lands - most noticeable near a screen edge, where the guess is furthest from correct. */}
       <PopoverBody visible={open && measured} align={align} verticalAlign={verticalAlign} caretColor={menuBg} caretBorderColor={menuBorderColor} caretBorderWidth={MENU_BORDER_WIDTH} triggerSize={TRIGGER_SIZE}>
-        {/* maxHeight is the room useAutoAlign actually found in whichever direction it picked — on
+        {/* maxHeight is the room useAutoAlign actually found in whichever direction it picked - on
         a screen tall enough for the estimated content, this never kicks in (estimatedHeight itself
         is always <= maxHeight then, so nothing scrolls); on a short landscape screen where neither
         direction has enough room, this is what keeps the menu from just running off the screen
@@ -232,7 +232,7 @@ export function SectionedDropdown({ id, host, icon, accessibilityLabel, sections
         <ScrollView style={[styles.menu, menuStyle]} contentContainerStyle={styles.menuContent} showsVerticalScrollIndicator={false}>
           {sections.map((section, sectionIndex) => (
             <View key={section.id}>
-              {/* Every section after the first gets a rule above it — the divider belongs to the
+              {/* Every section after the first gets a rule above it - the divider belongs to the
               boundary between sections, not to either section itself, so it's keyed off position
               rather than each section carrying its own "divider below me" flag. */}
               {sectionIndex > 0 && <View style={[styles.divider, dividerStyle]} />}
@@ -331,7 +331,7 @@ function MultiSection({
       {section.options.map((option, i) => {
         const selected = section.value.includes(option.value)
         const rowColor = selected ? onAccentColor : mutedColor
-        // Adjacent rows sit flush against each other (no gap — see styles.item's own lack of
+        // Adjacent rows sit flush against each other (no gap - see styles.item's own lack of
         // margin), so two selected neighbors otherwise each carve a small rounded notch out of what
         // should read as one continuous block. Squaring off just the touching edge is what makes a
         // run of several selected options look like one seamless shape instead of a stack of
@@ -372,7 +372,7 @@ const styles = 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.
@@ -399,7 +399,7 @@ const styles = 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
@@ -415,7 +415,7 @@ const styles = 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: {

package/src/SharedActionBand.tsx

@@ -6,30 +6,30 @@ interface Props {
   onBack: () => void
   onSettings: () => void
   // Optional, and expected to be passed together in practice (either a screen has both a randomize
-  // and a reset action, or neither) — kept as two independently-optional props rather than one pair
+  // and a reset action, or neither) - kept as two independently-optional props rather than one pair
   // flag so a caller with only one of the two isn't forced to fake the other.
   onRandomize?: () => void
   onReset?: () => void
   fg: string
   // Whether one of THIS band's own popovers (i.e. something rendered inside `children`) is
-  // currently open — the caller computes this (typically `host.openId !== null &&
+  // currently open - the caller computes this (typically `host.openId !== null &&
   // OWN_IDS.includes(host.openId)`), since only the caller knows which popover ids belong to its
-  // own children. Elevates the whole column above sibling panels when true — React Native Web gives
+  // own children. Elevates the whole column above sibling panels when true - React Native Web gives
   // every position:'relative' view its own stacking context, so a popover escaping `children` needs
   // this wrapper itself elevated, not just the popover content, to paint above a later sibling
   // (e.g. a player panel) rather than underneath it.
   popoverOpen: boolean
-  // The screen's own per-round option row (grid size, arena, etc.) — rendered directly below the
+  // The screen's own per-round option row (grid size, arena, etc.) - rendered directly below the
   // action row, inside the same elevating column.
   children: ReactNode
 }
 
 // The reachability fix for a two-player screen where the plain top-left/top-right corners (see
-// CornerActionButtons) would land inside one player's own rotated zone — most concretely, two-
+// CornerActionButtons) would land inside one player's own rotated zone - most concretely, two-
 // player face-to-face, where the far player's zone always covers the top half of the screen. Folds
 // back/randomize/reset/settings into one row that sits on neutral ground instead (the shared band
 // between the two players' zones), directly above the caller's own per-round option row. The
-// caller decides *when* this applies (it owns gameMode/orientationMode) — this component only
+// caller decides *when* this applies (it owns gameMode/orientationMode) - this component only
 // renders the result once that decision's already been made.
 export function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }: Props) {
   return (

package/src/SkiaGate.tsx

@@ -2,7 +2,7 @@ import type { ComponentType, ReactNode } from 'react'
 import { useEffect, useState } from 'react'
 
 export interface SkiaGateProps<P extends object> {
-  // A dynamic import, e.g. `() => import('./Board')` — hoist to module scope at the call site
+  // A dynamic import, e.g. `() => import('./Board')` - hoist to module scope at the call site
   // (never an inline closure written directly in JSX) so its identity stays stable across
   // renders; it's this component's own useEffect dependency below.
   getComponent: () => Promise<{ default: ComponentType<P> }>
@@ -11,20 +11,20 @@ export interface SkiaGateProps<P extends object> {
   fallback?: ReactNode
 }
 
-// Native Skia renders through JSI — no WASM/CanvasKit fetch to wait on — so this file just
+// Native Skia renders through JSI - no WASM/CanvasKit fetch to wait on - so this file just
 // lazily mounts whatever getComponent() resolves to, once it resolves. The .web.tsx sibling
 // (picked by Metro/webpack's own platform-extension resolution for web bundles) is a different
 // implementation entirely: a direct re-export of @shopify/react-native-skia's own WithSkiaWeb,
-// which gates the same mount behind LoadSkiaWeb() first — CanvasKit's WASM build has to actually
+// which gates the same mount behind LoadSkiaWeb() first - CanvasKit's WASM build has to actually
 // finish loading before anything that imports '@shopify/react-native-skia' can evaluate its own
 // top-level `Skia` binding without crashing (see loadSkiaWeb.web.ts's own comment).
 //
 // No React.lazy()/Suspense here, deliberately: lazy() can't be called inline during render
-// (react-hooks/static-components — a getComponent prop that isn't referentially stable would
+// (react-hooks/static-components - a getComponent prop that isn't referentially stable would
 // give a new component identity, and therefore an unwanted remount, on every render that passes
 // a fresh one) and can't be cached in a ref either (react-hooks/refs forbids reading or writing
 // ref.current during render, only inside an effect). Awaiting the import directly and setting
-// state from the resolved module sidesteps both — setState only ever runs from the promise
+// state from the resolved module sidesteps both - setState only ever runs from the promise
 // callback, never synchronously in render or in the effect body itself.
 export function SkiaGate<P extends object>({ getComponent, componentProps, fallback = null }: SkiaGateProps<P>) {
   const [Component, setComponent] = useState<ComponentType<P> | null>(null)

package/src/SkiaGate.web.tsx

@@ -1,8 +1,8 @@
-// Web needs CanvasKit's WASM loaded before any Skia <Canvas> evaluates — see loadSkiaWeb.web.ts's
+// Web needs CanvasKit's WASM loaded before any Skia <Canvas> evaluates - see loadSkiaWeb.web.ts's
 // own comment for why a plain useEffect-based loader can't fix this (it's a module-evaluation-
 // order problem, not a component-lifecycle one). Only this file (picked by Metro/webpack's
 // platform-extension resolution for web bundles) may import from
-// '@shopify/react-native-skia/src/web' — a static import of that subpath from a native-reachable
+// '@shopify/react-native-skia/src/web' - a static import of that subpath from a native-reachable
 // file pulls canvaskit-wasm's `require('fs')` into the native bundle and breaks iOS/Android
 // builds; this file vs. SkiaGate.tsx is what actually keeps it out, the same split
 // loadSkiaWeb.web.ts/loadSkiaWeb.ts already use.

package/src/StaggeredWord.tsx

@@ -7,12 +7,12 @@ const LETTER_DURATION_MS = 320
 
 // The one formula every consumer's own follow-on animation (a paddle rally, a bouncing puck, a
 // looping trail) needs in order to time its own entrance off "once the letters have mostly
-// landed" — five apps (AirHockey, BoxHockey, Pong, LightCycles, Snake) had each independently
+// landed" - five apps (AirHockey, BoxHockey, Pong, LightCycles, Snake) had each independently
 // re-derived `(letterCount - 1) * STAGGER_MS + LETTER_DURATION_MS` locally as their own
 // `TOTAL_STAGGER_MS` constant. Exported as a pure function, not a component return value, so a
 // caller can compute it once, outside render, the same way every one of those apps already did.
 // `letterCount` is the TOTAL number of letters actually animated, not necessarily a single
-// StaggeredWord's own `word.length` — see `startIndex` below for a multi-word wordmark, where a
+// StaggeredWord's own `word.length` - see `startIndex` below for a multi-word wordmark, where a
 // second word's letters continue the same overall stagger sequence.
 export function getStaggeredWordDuration(letterCount: number): number {
   return (letterCount - 1) * STAGGER_MS + LETTER_DURATION_MS
@@ -57,13 +57,13 @@ export interface StaggeredWordProps {
   fontFamily: string
   fontSize: number
   lineHeight: number
-  // Whether to skip the stagger entirely and render every letter already fully settled — wire
+  // Whether to skip the stagger entirely and render every letter already fully settled - wire
   // straight from react-native-reanimated's own useReducedMotion() at the call site rather than
   // this component calling it internally, so a caller composing several StaggeredWords (see
   // `startIndex` below) only needs the one hook call, not one per word.
   reducedMotion: boolean
   // Continues the stagger sequence from a larger overall wordmark this word is only one line/part
-  // of — this word's own first letter animates at index `startIndex`, its second at
+  // of - this word's own first letter animates at index `startIndex`, its second at
   // `startIndex + 1`, and so on. Defaults to 0 for a standalone single-word wordmark (Snake's
   // "SNAKE", Pong's "PONG"); a caller stacking multiple words (AirHockey's "AIR"/"HOCKEY",
   // BoxHockey's "BOX"/"HOCKEY", LightCycles' "Light"/"Cycles") passes the running total of letters
@@ -71,15 +71,15 @@ export interface StaggeredWordProps {
   // instead of each word restarting its own stagger from zero.
   startIndex?: number
   // Every consumer this component was extracted from hardcoded bold letters (baked into a fixed
-  // StyleSheet entry, not a prop) — kept as the default here rather than a fixed style, so the one
+  // StyleSheet entry, not a prop) - kept as the default here rather than a fixed style, so the one
   // consumer that doesn't want it (LightCycles, whose own registered display font is already
   // sufficiently bold on its own) can opt out with `fontWeight='normal'` instead of this component
   // forcing it unconditionally.
   fontWeight?: TextStyle['fontWeight']
-  // Unset by default — only AirHockey/BoxHockey/Pong's shared MONO_FONT-based letter style actually
+  // Unset by default - only AirHockey/BoxHockey/Pong's shared MONO_FONT-based letter style actually
   // wants extra tracking; Snake's/LightCycles' own theme fonts don't.
   letterSpacing?: number
-  // The wrapping row's own style — e.g. LightCycles' own vertical offset for its second word
+  // The wrapping row's own style - e.g. LightCycles' own vertical offset for its second word
   // beneath its first.
   style?: StyleProp<ViewStyle>
   // Lets a caller measure this word's own rendered box (e.g. to size/position a follow-on canvas
@@ -89,11 +89,11 @@ export interface StaggeredWordProps {
 }
 
 // One row of letters staggering in on mount (or rendered already fully settled under reduced
-// motion) — the "AnimatedLetter" building block five apps' own hero-title screens
+// motion) - the "AnimatedLetter" building block five apps' own hero-title screens
 // (AirHockey/BoxHockey/Pong/LightCycles/Snake's own HeroTitle.tsx/AnimatedHeroTitle.tsx) had each
 // hand-rolled independently, identical down to the same 45ms stagger, 320ms per-letter duration,
 // and back-ease overshoot. A single word/line on its own, or one of several stacked/side-by-side
-// words sharing one overall stagger sequence via `startIndex` — this component only ever renders
+// words sharing one overall stagger sequence via `startIndex` - this component only ever renders
 // one row of letters; a caller composing more than one word renders more than one StaggeredWord
 // (see `startIndex`'s own doc), the same way every one of those five apps' own `Word` helper
 // already did internally.

package/src/StatRow.tsx

@@ -5,19 +5,19 @@ import { Text } from 'react-native-paper'
 interface Props {
   label: string
   value: string
-  // Independently optional overrides for this row's own text colors — default to the same
+  // Independently optional overrides for this row's own text colors - default to the same
   // useAutoPaperTheme()-derived formula as BaseStatsScreen (see that component's own doc for why)
   // when omitted, so every existing caller renders identically to before.
   fg?: string
   fgMuted?: string
 }
 
-// A single labeled stat — label on the left (muted), value on the right (bold, full-contrast).
+// A single labeled stat - label on the left (muted), value on the right (bold, full-contrast).
 // Extracted from LightCycles' own achievements.tsx, where this exact row shape backed every
 // section (Overall/Vs CPU/Two Player/Activity). fg/fgMuted default to the same
 // useAutoPaperTheme()-derived formula as BaseStatsScreen (see that component's own doc for why),
 // each independently overridable via the matching prop for a caller with its own chrome palette.
-// Deliberately just label+value text, not a color swatch or profile chip — an app needing a row
+// Deliberately just label+value text, not a color swatch or profile chip - an app needing a row
 // with a leading visual builds its own on top of this same dark-mode formula (see LightCycles' own
 // ColorStatRow/ProfileRankingRow for an example), since what that visual even is varies per game.
 export function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }: Props) {

package/src/StatSection.tsx

@@ -5,7 +5,7 @@ import { Text } from 'react-native-paper'
 
 interface Props {
   label: string
-  // Independently optional overrides for this section's own label color/background — default to
+  // Independently optional overrides for this section's own label color/background - default to
   // the same useAutoPaperTheme()-derived formula as StatRow/BaseStatsScreen (see BaseStatsScreen's
   // own doc for why) when omitted, so every existing caller renders identically to before.
   fg?: string
@@ -13,7 +13,7 @@ interface Props {
   children: ReactNode
 }
 
-// A labeled, tinted-background grouping box — the "OVERALL"/"VS CPU"/"ACTIVITY"-style section
+// A labeled, tinted-background grouping box - the "OVERALL"/"VS CPU"/"ACTIVITY"-style section
 // shape from LightCycles' own achievements.tsx, generalized to any content (typically a stack of
 // StatRow). fg/sectionBg default to the same useAutoPaperTheme()-derived formula as
 // StatRow/BaseStatsScreen (see BaseStatsScreen's own doc for why), each independently overridable
@@ -36,7 +36,7 @@ export function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverrid
 }
 
 const styles = 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.