@tastic/hud 0.14.1 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "description": "Visual component kit for local-multiplayer React Native games: inline (non-modal) popovers, dropdowns, color pickers, gauges, ready buttons, and dialogs, built to stay scoped to one player's own zone on a shared screen",
   "keywords": [
     "react-native",
@@ -34,6 +34,13 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
+    "./chrome": {
+      "react-native": "./src/chrome/index.ts",
+      "browser": "./src/chrome/index.ts",
+      "types": "./dist/chrome/index.d.ts",
+      "import": "./dist/chrome/index.mjs",
+      "require": "./dist/chrome/index.js"
+    },
     "./guide": {
       "react-native": "./src/guide/index.ts",
       "browser": "./src/guide/index.ts",

package/src/AchievementCatalogSection.tsx

@@ -8,7 +8,7 @@ import { AchievementRow, LOCKED_BADGE_COLOR } from './AchievementRow'
 import { MONO_FONT } from './fonts'
 
 // AchievementCatalogRow now comes straight from @tastic/achievements' own getAchievementCatalogRows
-// (added in the same 2026-09-18 achievements-scaffolding pass this component belongs to) — no
+// (added in the same 2026-09-18 achievements-scaffolding pass this component belongs to) - no
 // longer duplicated locally now that package has actually published the export (confirmed the two
 // shapes match exactly before wiring this real, type-only peer dependency).
 

package/src/AchievementRow.tsx

@@ -2,7 +2,7 @@ import { useAutoPaperTheme } from '@rific/auto-paper'
 import { StyleSheet, View } from 'react-native'
 import { Icon, ProgressBar, Text } from 'react-native-paper'
 
-// A neutral gray for a locked badge's own background — exported so a caller computing its own
+// A neutral gray for a locked badge's own background - exported so a caller computing its own
 // badge color (unlocked ? tierColor : LOCKED_BADGE_COLOR, matching LightCycles' own achievements.tsx)
 // doesn't need to invent or duplicate this exact tone.
 export const LOCKED_BADGE_COLOR = 'rgba(128,128,128,0.3)'
@@ -11,28 +11,28 @@ interface Props {
   icon: string
   title: string
   description: string
-  // The badge's own background — pass the achievement's tier color when unlocked, or
+  // The badge's own background - pass the achievement's tier color when unlocked, or
   // LOCKED_BADGE_COLOR (this package's own export, above) when it isn't; this component doesn't
   // infer that from unlockedLabel itself, since a locked-vs-unlocked badge color scheme is a
   // caller-level design choice (see checkColor below for the identical reasoning on the status
   // icon's own color).
   badgeColor: string
   // undefined = locked. A precomputed display string (e.g. "Unlocked 2 days ago"), not a raw
-  // timestamp — this component has no opinion on date formatting or streak conventions, which vary
+  // timestamp - this component has no opinion on date formatting or streak conventions, which vary
   // per app (see LightCycles' own calendar-day-difference convention in its achievements.tsx).
   unlockedLabel?: string
-  // Color for the unlocked check-circle icon/badge glyph — typically the same tier color passed to
+  // Color for the unlocked check-circle icon/badge glyph - typically the same tier color passed to
   // badgeColor, kept as its own prop rather than reused internally so a caller can special-case it
   // independently if its own tier scheme ever needs to (matching LightCycles' own call site, which
   // does pass the identical value to both today).
   checkColor?: string
-  // Only rendered while locked (unlockedLabel is undefined) — 0..1.
+  // Only rendered while locked (unlockedLabel is undefined) - 0..1.
   progress?: number
   // The "Same for every profile" note LightCycles shows for a device-scoped achievement viewed
-  // from a specific profile's own tab — optional since only an app with per-profile stat views has
+  // from a specific profile's own tab - optional since only an app with per-profile stat views has
   // this concept at all.
   deviceMarker?: boolean
-  // Independently optional overrides for this row's own text/background colors — each defaults to
+  // Independently optional overrides for this row's own text/background colors - each defaults to
   // the same dark-mode-derived formula as StatRow/StatSection/BaseStatsScreen (see that component's
   // own doc for why) when omitted, so every existing caller renders identically to before. A caller
   // with its own app-wide chrome palette passes whichever of the three it needs.
@@ -41,14 +41,14 @@ interface Props {
   sectionBg?: string
 }
 
-// One row per achievement — a tier-colored (or locked-gray) badge, title/description, an optional
+// One row per achievement - a tier-colored (or locked-gray) badge, title/description, an optional
 // progress bar while locked, and either an unlocked check-mark+label or a lock icon. Extracted
 // verbatim from LightCycles' own achievements.tsx, where this exact row shape backed its entire
 // "ALL ACHIEVEMENTS" list. fg/fgMuted/its own section background default to the same
 // useAutoPaperTheme()-derived formula as StatRow/StatSection/BaseStatsScreen (see BaseStatsScreen's
 // own doc for why), each independently overridable via the matching prop for a caller with its own
 // chrome palette. Has no opinion on what an achievement actually IS (id, unlock predicate, catalog)
-// — that stays entirely app-local; this is purely the presentational row.
+// - that stays entirely app-local; this is purely the presentational row.
 export function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props) {
   const { dark } = useAutoPaperTheme()
   const fg = fgOverride ?? (dark ? '#FFFFFF' : '#000000')

package/src/BaseSettingsDialog.tsx

@@ -16,9 +16,11 @@ interface SettingIconProps {
   containerColor: string
 }
 
-// Small colored badge per row (icon tinted on its own MD3 container color) — echoes the
+// Small colored badge per row (icon tinted on its own MD3 container color) - echoes the
 // primary/secondary/tertiary triad that's already each consuming app's own identity, so the
-// settings list picks up that same palette instead of introducing new colors of its own.
+// settings list picks up that same palette instead of introducing new colors of its own. Every
+// on/off row (Lock Orientation, Edge Guard, Sound, Haptics) is tertiary while on, and an app adding
+// its own toggle rows should match; secondary is for the always-on action row (How to Play).
 function SettingIcon({ source, color, containerColor }: SettingIconProps) {
   return (
     <View style={[styles.iconBadge, { backgroundColor: containerColor }]}>
@@ -36,50 +38,50 @@ export interface BaseSettingsDialogProps {
   // Defaults to a live ambient read via useRotation() when omitted. Pass 0 when the dialog already
   // renders under a Portal.Host inside a turned frame of the caller's own (Solitaire's screens).
   rotation?: ViewRotation
-  // Each app's own OTA version (e.g. release.otaVersion) — not something this package can read
+  // Each app's own OTA version (e.g. release.otaVersion) - not something this package can read
   // itself, since every consuming app tracks its own release.ts independently. Accepts a number too
   // since that's what release.otaVersion actually is in most apps (a bare incrementing counter, not
-  // a formatted string) — this just interpolates it into the VERSION label same as the original
+  // a formatted string) - this just interpolates it into the VERSION label same as the original
   // inline JSX did.
   version: string | number
-  // Optional, and always passed as a pair — omit both entirely for a game that's portrait-only (or
+  // Optional, and always passed as a pair - omit both entirely for a game that's portrait-only (or
   // otherwise has no orientation-based reflow at all), where there's nothing to lock against.
   lockOrientation?: boolean
   onLockOrientationChange?: (value: boolean) => void
-  // Optional, and always passed as a pair — omit both entirely for a game with no full-screen edge-
+  // Optional, and always passed as a pair - omit both entirely for a game with no full-screen edge-
   // anchored swipe controls (nothing to guard). iOS-only regardless of whether the pair is passed:
   // @tastic/edge-guard's own swizzle is a no-op on every other platform.
   deferBottomEdgeGestures?: boolean
   onDeferBottomEdgeGestures?: (value: boolean) => void
   // Explicit opt-outs for the rows that pull their own state straight from @rific/feedback-press,
   // @rific/auto-paper, and @rific/updater's own shared contexts/hooks rather than from anything the
-  // caller passes in — unlike Lock Orientation/Edge Guard above, there's no "value" to omit for
+  // caller passes in - unlike Lock Orientation/Edge Guard above, there's no "value" to omit for
   // these, so hiding one takes its own explicit flag instead. All default to shown, matching every
   // app's existing behavior before this prop existed.
   hideSound?: boolean
-  // Haptics is already native-only (see the row's own Platform.OS check) — this hides it even
+  // Haptics is already native-only (see the row's own Platform.OS check) - this hides it even
   // there, for a game that's deliberately silent on vibration.
   hideHaptics?: boolean
   hideAppearance?: boolean
-  // Check for Updates is already native-only (a web build has no OTA update concept at all) — this
+  // Check for Updates is already native-only (a web build has no OTA update concept at all) - this
   // hides it even there, for a native app that isn't wired up for EAS/OTA updates at all.
   hideUpdateCheck?: boolean
-  // Surfaces a failed update check (e.g. via @rific/toaster's error()) — omit for an app with no
+  // Surfaces a failed update check (e.g. via @rific/toaster's error()) - omit for an app with no
   // toast system wired up; the check itself still runs and still reports success/no-update through
   // the ordinary info overlay either way. Meaningless (never called) when hideUpdateCheck is set.
   onUpdateError?: (message: string) => void
   // Omit to hide the row entirely (a game with no how-to-play flow, or a screen where replaying one
-  // would be disruptive — e.g. over a live match). Called AFTER this dialog's own onDismiss, so the
+  // would be disruptive - e.g. over a live match). Called AFTER this dialog's own onDismiss, so the
   // two overlays never stack: wire it straight to @tastic/hud/guide's `useGuide().open`.
   onShowHowToPlay?: () => void
   // App-specific extra settings sections (board options, CPU difficulty, stats backup, ...),
-  // rendered between Appearance and Check for Updates — this component only owns the settings
+  // rendered between Appearance and Check for Updates - this component only owns the settings
   // every game shares, never anything about how a particular game plays.
   children?: ReactNode
 }
 
-// The settings shell every @tastic game shares — orientation lock, the optional edge-guard toggle,
-// sound/haptics, appearance, and update checking — extracted after the same six rows were
+// The settings shell every @tastic game shares - orientation lock, the optional edge-guard toggle,
+// sound/haptics, appearance, and update checking - extracted after the same six rows were
 // independently copied into LightCycles, AirHockey, BoxHockey, Pong, and Snake and then needed
 // hand-editing in every one of them, twice, for what were meant to be identical fixes. `children`
 // is the seam for whatever isn't shared: a game with its own board/difficulty settings (or a stats
@@ -89,7 +91,7 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
   const { colors } = useAutoPaperTheme()
   const ambientRotation = useRotation()
   const rotation = rotationOverride ?? ambientRotation
-  // Also gates the Lock Orientation row below (alongside showLockOrientation itself) — true
+  // Also gates the Lock Orientation row below (alongside showLockOrientation itself) - true
   // unconditionally on native (see the hook's own doc), so this only actually excludes a
   // desktop/laptop browser, where a mouse-driven window has no physical orientation to lock
   // against; a resize there would just make the setting silently stop reflowing the layout instead
@@ -98,21 +100,21 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
   const { settings: hapticSettings, set: setHapticSettings } = useHapticSettings()
   const { settings: soundSettings, set: setSoundSettings } = useSoundSettings()
   // Sound/Haptics toggle themselves: the ripple's automatic press feedback fires on onPressIn,
-  // before onPress applies the toggle, so it reflects the OLD enabled value — backwards from what
+  // before onPress applies the toggle, so it reflects the OLD enabled value - backwards from what
   // a settings toggle should confirm (turning off would click/buzz, turning on would go silent).
   // Both rows disable their own automatic channel below (soundDisabled/hapticDisabled) and fire it
   // manually here instead, gated on the NEW value so it only plays when switching that channel on.
   const sound = useContext(SoundContext)
   const { forceShort: forceHapticFeedback } = useVibration()
   // Covers check()'s three purely-informational cases (dev-mode disabled, web unsupported, no
-  // update found) via onInfo below — a retro card overlay instead of the native Alert.alert those
+  // update found) via onInfo below - a retro card overlay instead of the native Alert.alert those
   // cases fall back to by default.
   const [infoMessage, setInfoMessage] = useState<{ title: string; message: string } | null>(null)
-  // autoCheck: false — every consuming app's own root layout already runs the background check via
+  // autoCheck: false - every consuming app's own root layout already runs the background check via
   // its own useUpdater() instance; a second instance with autoCheck's default (true) would set up a
   // second AppState listener and double every foreground-resume update check. This instance only
   // ever checks on an explicit tap of the button below. Deliberately its own useUpdater() instance
-  // rather than rendering UpdateDialog directly here, for the same reason — UpdateDialog owns a
+  // rather than rendering UpdateDialog directly here, for the same reason - UpdateDialog owns a
   // second AppState listener of its own.
   const { manifest: updateManifest, onConfirm: onUpdateConfirm, respond: respondToUpdateConfirm } = useUpdateConfirmBridge()
   const { check, checking, updateReady } = useUpdater({
@@ -156,24 +158,24 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
         <Dialog visible={visible} onDismiss={onDismiss} style={styles.dialog}>
           <Dialog.Title>Settings</Dialog.Title>
           {/* react-native-paper's Dialog.ScrollArea has a fixed 24px marginBottom baked in (meant to
-            reserve room for a Dialog.Actions row below it) — overridden to 0 since this dialog has
+            reserve room for a Dialog.Actions row below it) - overridden to 0 since this dialog has
             no actions row, and that gap otherwise reads as unexplained empty footer space. */}
           <Dialog.ScrollArea style={styles.scrollArea}>
             <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
               {/* Grouped tightly together (styles.toggleGroup's small internal gap, not the 24px gap
-                between sections below) — same bare-row shape for all of them, no segmented control
+                between sections below) - same bare-row shape for all of them, no segmented control
                 and no section heading (each row's own label already says what it is). Haptics only
-                joins on native — there's nothing for it to control on web. */}
+                joins on native - there's nothing for it to control on web. */}
               <View style={styles.toggleGroup}>
                 {/* Omitted entirely for a portrait-only game (no lockOrientation/onLockOrientationChange
-                  passed at all — nothing to lock), and hidden (not just disabled) on a desktop/laptop
-                  browser even when they are — see isTouchPrimary's own doc above. Still shown on
+                  passed at all - nothing to lock), and hidden (not just disabled) on a desktop/laptop
+                  browser even when they are - see isTouchPrimary's own doc above. Still shown on
                   native and on a touch-capable mobile browser, where a rotated window really does
                   reflect a rotated device. */}
                 {showLockOrientation && (
                   <TouchableRipple onPress={() => onLockOrientationChange!(!lockOrientation)} style={styles.toggleButton} accessibilityLabel={`Lock orientation ${lockOrientation ? 'on' : 'off'}`}>
                     <View style={styles.toggleContent}>
-                      <SettingIcon source={lockOrientation ? 'lock' : 'lock-open-variant-outline'} color={lockOrientation ? colors.secondary : colors.onSurfaceVariant} containerColor={lockOrientation ? colors.secondaryContainer : colors.surfaceVariant} />
+                      <SettingIcon source={lockOrientation ? 'lock' : 'lock-open-variant-outline'} color={lockOrientation ? colors.tertiary : colors.onSurfaceVariant} containerColor={lockOrientation ? colors.tertiaryContainer : colors.surfaceVariant} />
                       <View style={styles.flexShrink}>
                         <Text variant='bodyLarge' style={{ color: colors.onSurface }}>
                           Lock Orientation
@@ -186,8 +188,8 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
                   </TouchableRipple>
                 )}
 
-                {/* iOS only — mirrors into UserDefaults for @tastic/edge-guard's own config plugin
-                  swizzle to read. Guards both edges — the top (Notification Center/Control Center)
+                {/* iOS only - mirrors into UserDefaults for @tastic/edge-guard's own config plugin
+                  swizzle to read. Guards both edges - the top (Notification Center/Control Center)
                   and the bottom (home-indicator swipe, incidentally Reachability too), per that
                   package's own doc. Off by default: a deliberate opt-in for whoever's actually hit an
                   accidental-swipe-near-an-edge problem mid-game and come looking for a fix, not a
@@ -195,7 +197,7 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
                 {showEdgeGuard && (
                   <TouchableRipple onPress={() => onDeferBottomEdgeGestures!(!deferBottomEdgeGestures)} style={styles.toggleButton} accessibilityLabel={`Edge guard ${deferBottomEdgeGestures ? 'on' : 'off'}`}>
                     <View style={styles.toggleContent}>
-                      <SettingIcon source={deferBottomEdgeGestures ? 'shield-check-outline' : 'shield-off-outline'} color={deferBottomEdgeGestures ? colors.secondary : colors.onSurfaceVariant} containerColor={deferBottomEdgeGestures ? colors.secondaryContainer : colors.surfaceVariant} />
+                      <SettingIcon source={deferBottomEdgeGestures ? 'shield-check-outline' : 'shield-off-outline'} color={deferBottomEdgeGestures ? colors.tertiary : colors.onSurfaceVariant} containerColor={deferBottomEdgeGestures ? colors.tertiaryContainer : colors.surfaceVariant} />
                       <View style={styles.flexShrink}>
                         <Text variant='bodyLarge' style={{ color: colors.onSurface }}>
                           Edge Guard
@@ -208,12 +210,12 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
                   </TouchableRipple>
                 )}
 
-                {/* Side by side, not stacked — neither needs a full row's width (single-line label,
+                {/* Side by side, not stacked - neither needs a full row's width (single-line label,
                   no description under it the way Lock Orientation has), so sharing one row reads
                   just as clearly and takes half the vertical space. toggleRow carries the same
                   edge-alignment negative margin toggleButton normally carries itself; the buttons
                   inside it use toggleButtonInRow (flex: 1) instead so the two don't double up on it.
-                  The row itself only renders when at least one of the two will — an empty flex row
+                  The row itself only renders when at least one of the two will - an empty flex row
                   still eats its own gap/margin otherwise. */}
                 {(showSound || showHaptics) && (
                   <View style={styles.toggleRow}>
@@ -237,7 +239,7 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
                       </TouchableRipple>
                     )}
 
-                    {/* Already native-only (see showHaptics's own definition) — hideHaptics can hide
+                    {/* Already native-only (see showHaptics's own definition) - hideHaptics can hide
                       it there too, for a game that's deliberately silent on vibration. */}
                     {showHaptics && (
                       <TouchableRipple
@@ -262,7 +264,7 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
                 )}
 
                 {/* Not a toggle, but it reads like one of the rows above and belongs with them rather than
-                  down in `children` (which sits below Appearance) — this is the "replay the intro"
+                  down in `children` (which sits below Appearance) - this is the "replay the intro"
                   entry point every game's own how-to-play flow shares. Dismisses this dialog first so
                   the guide's own overlay never opens on top of a still-visible Settings card. */}
                 {onShowHowToPlay && (
@@ -301,7 +303,7 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
               {children}
 
               {/* Native only (a web build has no OTA update concept at all, desktop or mobile browser
-                alike) — hideUpdateCheck can hide it there too, for a native app that isn't wired up
+                alike) - hideUpdateCheck can hide it there too, for a native app that isn't wired up
                 for EAS/OTA updates at all. */}
               {showUpdateCheck && (
                 <View style={styles.section}>
@@ -329,7 +331,7 @@ const styles = 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.

package/src/BaseStatsScreen.tsx

@@ -7,22 +7,22 @@ import { Text } from 'react-native-paper'
 
 import { ConfirmDialog } from './ConfirmDialog'
 
-// react-native-paper's own MD3 Text variant names — mirrored locally rather than importing its
+// react-native-paper's own MD3 Text variant names - mirrored locally rather than importing its
 // internal VariantProp/MD3TypescaleKey (not exported from the package's public entry point) just
 // to type one optional prop.
 type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall'
 
 interface Props {
-  // Explicit override for the live physical-hold rotation (see @tastic/core's useRotation) — only
+  // Explicit override for the live physical-hold rotation (see @tastic/core's useRotation) - only
   // affects this component's own Portal-rendered reset-confirm dialog (via ConfirmDialog's own
   // rotation prop), which (like any Portal content) is unaffected by whichever screen's own
   // FakeLandscapeView wraps the trigger and so has to rotate itself. Defaults to a live ambient
-  // read via useRotation() when omitted — note this does NOT make the header/scrollable content
+  // read via useRotation() when omitted - note this does NOT make the header/scrollable content
   // below rotate; the caller's own screen still needs its own FakeLandscapeView wrap for that
   // (this component has no transform on its own main body).
   rotation?: ViewRotation
   title?: string
-  // 'headlineSmall' (this screen's own default, below) — was originally 'displaySmall' (the full
+  // 'headlineSmall' (this screen's own default, below) - was originally 'displaySmall' (the full
   // display tier's own smallest step), then 'headlineLarge', both still read as oversized for a
   // header that's paired with a small 24px back-button glyph rather than standing alone the way a
   // title screen's own wordmark does; headlineSmall sits close to that icon's own size instead of
@@ -31,7 +31,7 @@ interface Props {
   titleVariant?: MD3TextVariant
   onBack: () => void
   insets: { top: number; left: number; bottom: number; right: number }
-  // Optional, and always passed as a pair — a caller with nothing resettable (or that deliberately
+  // Optional, and always passed as a pair - a caller with nothing resettable (or that deliberately
   // doesn't want a reset action on this screen) omits both rather than one alone. Confirmation copy
   // is caller-owned since "erases all stats and achievements" is only accurate for a caller that
   // actually tracks both; a caller with only high scores, say, would want its own wording.
@@ -39,7 +39,7 @@ interface Props {
   resetLabel?: string
   resetConfirmTitle?: string
   resetConfirmBody?: string
-  // Independently optional overrides for this screen's own header/background colors — each
+  // Independently optional overrides for this screen's own header/background colors - each
   // defaults to the literal-black/white-by-appearance formula described below when omitted, so
   // every existing caller (none of which pass these) renders identically to before. A caller with
   // its own app-wide chrome palette (e.g. a tinted background rather than neutral black/white)
@@ -49,10 +49,10 @@ interface Props {
   // reset-confirm dialog's own icon/title/card. Both are gone: the reset-confirm step used to be a
   // hand-rolled lookalike of ConfirmDialog with its own copy of the overlay/card/button styling,
   // which is exactly how it drifted from ConfirmDialog's real look in the first place (different
-  // button layout, different Cancel styling, and — via cardBg — a different, caller-tintable card
+  // button layout, different Cancel styling, and - via cardBg - a different, caller-tintable card
   // background no other ConfirmDialog in the fleet has). It now renders a real ConfirmDialog
   // instance below instead of its own copy, which by construction can never drift from every other
-  // confirm prompt in the app again — at the cost of losing that per-caller tinting, which is the
+  // confirm prompt in the app again - at the cost of losing that per-caller tinting, which is the
   // right trade: a "you're about to erase everything" prompt should look and read identically
   // everywhere, not take on whichever screen happened to trigger it.
   fg?: string
@@ -60,15 +60,15 @@ interface Props {
   children: ReactNode
 }
 
-// The stats/achievements screen shell every @tastic game shares — back button + title header,
+// The stats/achievements screen shell every @tastic game shares - back button + title header,
 // scrollable content area, and an optional reset-everything action with its own confirm-before-
-// destroying dialog — extracted after the same header/scroll/reset-confirm shape was independently
+// destroying dialog - extracted after the same header/scroll/reset-confirm shape was independently
 // built into LightCycles' own achievements.tsx. Colors default to the same literal-black/white-by-
 // appearance formula BaseSettingsDialog hardcodes internally (same as this package's own
-// BaseSettingsDialog) — zero-config for every existing caller — but fg/bg are each independently
+// BaseSettingsDialog) - zero-config for every existing caller - but fg/bg are each independently
 // overridable for a caller whose own app-wide chrome palette isn't that literal black/white
 // convention. `children` is the seam for whatever isn't shared: this component has no opinion on
-// what a "stat" is or how achievements are catalogued — see StatRow/StatSection/AchievementRow for
+// what a "stat" is or how achievements are catalogued - see StatRow/StatSection/AchievementRow for
 // the smaller presentational pieces built to go inside it.
 export function BaseStatsScreen({ rotation: rotationOverride, title = 'Achievements', titleVariant = 'headlineSmall', onBack, insets, onReset, resetLabel = 'Reset All Stats', resetConfirmTitle = 'Reset Everything?', resetConfirmBody = 'This permanently erases all stats and achievements. This cannot be undone.', fg: fgOverride, bg: bgOverride, children }: Props) {
   const { dark, colors } = useAutoPaperTheme()
@@ -139,7 +139,7 @@ const styles = 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.

package/src/ConfirmDialog.tsx

@@ -76,14 +76,14 @@ const styles = 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.

package/src/ControlSchemePicker.tsx

@@ -11,7 +11,7 @@ export interface ControlSchemePickerProps<T extends string | number> {
   value: T
   onChange: (value: T) => void
   options: MenuOption<T>[]
-  // Another seat's currently-selected scheme, if any — passed straight through as the underlying
+  // Another seat's currently-selected scheme, if any - passed straight through as the underlying
   // section's own takenValue (see SectionedDropdown's own doc: stays in the list, shown disabled,
   // rather than filtered out). Two local seats sharing one physical keyboard (and, depending on your
   // own option set, one mouse) can't both be assigned the same scheme at once; this is what a caller
@@ -22,11 +22,11 @@ export interface ControlSchemePickerProps<T extends string | number> {
   onAccentColor?: string
   dark: boolean
   align?: 'left' | 'right' | 'center'
-  // Passed straight through to the underlying SectionedDropdown — see that component's own
+  // Passed straight through to the underlying SectionedDropdown - see that component's own
   // `alignOverride` doc. Lets a caller inside a @tastic/split-screen zone substitute
   // useZoneClampedAlign's result for this picker's own popover placement.
   alignOverride?: AlignResult
-  // Passed straight through to the underlying SectionedDropdown — see that component's own
+  // Passed straight through to the underlying SectionedDropdown - see that component's own
   // `rotation` doc. Defaults to a live ambient useRotation() read when omitted, same as
   // SectionedDropdown itself.
   rotation?: PopoverRotation
@@ -35,23 +35,23 @@ export interface ControlSchemePickerProps<T extends string | number> {
 
 // A single-select SectionedDropdown, opinionated for exactly one job: letting a local seat pick
 // which physical input drives it in a couch-multiplayer game. Fixes the trigger icon and
-// accessibility label so every game's control-scheme picker looks and reads the same, and — the
+// accessibility label so every game's control-scheme picker looks and reads the same, and - the
 // actual reason this exists as its own component rather than a usage snippet in each app's own
-// docs — bakes in the "does this even mean anything right now" gate every consumer was independently
+// docs - bakes in the "does this even mean anything right now" gate every consumer was independently
 // re-deriving: a physical keyboard scheme has no meaning on a touch-primary device (there's nothing
 // to pick a *keyboard* layout for), and this repo's own components target React Native Web, where
 // `Platform.OS !== 'web'` means native/touch already, so keying off `useIsTouchPrimaryDevice` alone
-// isn't enough on its own — a native touch device still needs the `Platform.OS` check to be excluded
+// isn't enough on its own - a native touch device still needs the `Platform.OS` check to be excluded
 // the same way a desktop browser needs the touch check. Renders nothing at all when either
 // condition fails, rather than a disabled/empty picker, so a caller can mount this unconditionally
 // inside its own per-seat layout (a `View` row alongside a color picker, say) without its own
-// `Platform`/`useIsTouchPrimaryDevice` branch — an always-rendered-but-sometimes-null child is a
+// `Platform`/`useIsTouchPrimaryDevice` branch - an always-rendered-but-sometimes-null child is a
 // no-op in a flex layout, so the surrounding row collapses to just its other children automatically.
 //
 // Deliberately generic over `T` (matching SectionedDropdown's own `MenuOption<T>`) rather than
-// hardcoding a fixed scheme union: this repo has no opinion on which schemes exist — the raw
+// hardcoding a fixed scheme union: this repo has no opinion on which schemes exist - the raw
 // physical-key layouts (wasd/arrows/ijkl/numpad) live in `@tastic/input`, and any extra values with
-// no keys of their own (a "keep using pointer input" option, say) are purely a per-app label — so a
+// no keys of their own (a "keep using pointer input" option, say) are purely a per-app label - so a
 // caller always supplies its own `options` (and typically its own `T`) rather than this component
 // importing `@tastic/input` and choosing a set for every consumer.
 export function ControlSchemePicker<T extends string | number>({ id, host, value, onChange, options, takenValue, accentColor, mutedColor, onAccentColor, dark, align, alignOverride, rotation, labelFontFamily }: ControlSchemePickerProps<T>) {

package/src/CornerActionButtons.tsx

@@ -4,29 +4,29 @@ import { StyleSheet } from 'react-native'
 interface Props {
   onBack: () => void
   onSettings: () => void
-  // Full-contrast foreground — same convention as every other component keying off a `dark` prop
+  // Full-contrast foreground - same convention as every other component keying off a `dark` prop
   // (BaseSettingsDialog, SectionedDropdown, etc.), just resolved by the caller since this component
   // never reads theme state itself.
   fg: string
   // Safe-area insets already remapped onto the screen's real visual edges (see
-  // @tastic/split-screen's rotateInsets) — this component just adds the fixed 8px margin on top,
+  // @tastic/split-screen's rotateInsets) - this component just adds the fixed 8px margin on top,
   // it doesn't know anything about physical device orientation itself.
   insets: { top: number; left: number; right: number }
   // Overrides the top-left button's icon (a react-native-paper/MaterialCommunityIcons name) and its
-  // accessibility label — default 'arrow-left'/'Back'. Not every screen's top-left control is
+  // accessibility label - default 'arrow-left'/'Back'. Not every screen's top-left control is
   // actually "undo the last navigation": a flat menu/detail screen with nothing deeper to pop back
   // through often wants a literal home/menu affordance driving an absolute navigation instead (see
   // e.g. Solitaire's GameChrome, whose onBack navigates straight to its root route). Pass both
-  // together — an icon without a matching label (or vice versa) misleads screen readers/tooltips.
+  // together - an icon without a matching label (or vice versa) misleads screen readers/tooltips.
   backIcon?: string
   backLabel?: string
 }
 
-// Back (top-left) + Settings (top-right) icon buttons, fixed at the screen's rotated corners — the
+// Back (top-left) + Settings (top-right) icon buttons, fixed at the screen's rotated corners - the
 // default reachability answer for a two-player screen: correct any time both players share one
 // screen but only one of them (or neither, in vs-CPU) is on the far side of a rotated zone. Not the
 // right answer for a screen where the top corners themselves fall *inside* one player's own rotated
-// zone (two-player face-to-face) — see SharedActionBand for that case instead, which callers select
+// zone (two-player face-to-face) - see SharedActionBand for that case instead, which callers select
 // between based on their own game-mode/orientation state (this component has no opinion on which).
 export function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = 'arrow-left', backLabel = 'Back' }: Props) {
   return (

package/src/CornerStatusBadges.tsx

@@ -1,7 +1,7 @@
 import { StyleSheet, View } from 'react-native'
 import { Icon } from 'react-native-paper'
 
-// Mirrors @tastic/split-screen's own type of the same name, duplicated here rather than imported —
+// Mirrors @tastic/split-screen's own type of the same name, duplicated here rather than imported -
 // this package has never taken a dependency on @tastic/split-screen; every orientation/rotation-
 // derived value it touches (ConfirmDialog's and BaseSettingsDialog's own `rotation` props, this
 // component's orientationMode/p1OnRight below) is always a plain value the caller already resolved
@@ -9,7 +9,7 @@ import { Icon } from 'react-native-paper'
 export type OrientationMode = 'faceToFace' | 'sideBySide'
 
 export interface CornerStatusBadgeSeat {
-  // Any react-native-paper Icon `source` name. Omit to still render the badge itself, empty — a
+  // Any react-native-paper Icon `source` name. Omit to still render the badge itself, empty - a
   // seat with nothing to show right now is different from no seat at all (see `p1`/`p2` on
   // CornerStatusBadgesProps below), and the empty badge is itself the answer ("nothing"), not a
   // reason to hide the corner.
@@ -18,11 +18,11 @@ export interface CornerStatusBadgeSeat {
 
 export interface CornerStatusBadgesProps {
   orientationMode: OrientationMode
-  // Same "is this seat on the right" convention as @tastic/split-screen's own p1OnRight — only
+  // Same "is this seat on the right" convention as @tastic/split-screen's own p1OnRight - only
   // meaningful when orientationMode is 'sideBySide'; ignored in 'faceToFace', where seat 1 always
   // owns the bottom half of a shared screen and seat 2 the top half, regardless of physical rotation.
   p1OnRight: boolean
-  // Independently optional — omit a seat entirely to skip rendering its badge at all (e.g. a solo
+  // Independently optional - omit a seat entirely to skip rendering its badge at all (e.g. a solo
   // mode with no second seat to show anything for). Pass an object (even `{}`) to render that
   // seat's badge with nothing in it.
   p1?: CornerStatusBadgeSeat
@@ -31,21 +31,21 @@ export interface CornerStatusBadgesProps {
 
 const BADGE_SIZE = 30
 
-// Deliberately understated (small, low-opacity, no per-seat color) — a quiet corner landmark, not
+// Deliberately understated (small, low-opacity, no per-seat color) - a quiet corner landmark, not
 // something that should compete for attention with whatever's on screen underneath it.
 function StatusBadge({ icon }: { icon?: string }) {
   return <View style={styles.badge}>{icon && <Icon source={icon} size={16} color='rgba(255,255,255,0.85)' />}</View>
 }
 
 // Generic per-seat corner status badge: at most one caller-supplied icon per seat (or none), each
-// pinned to that seat's own screen corner. Has zero opinion on what the icon means — originally
+// pinned to that seat's own screen corner. Has zero opinion on what the icon means - originally
 // extracted from LightCycles' PowerupHud.tsx and Snake's SnakePowerupHud.tsx, which both used this
 // exact positioning and styling to reveal a held power-up, but this component only ever sees a
 // resolved icon name (or undefined) per seat, never the domain value behind it, so it's equally
 // suited to any other per-seat status a caller wants glanceable in a screen corner (connection
 // state, a turn-order marker, anything that's a single icon or nothing). Corner picked per seat
-// from orientationMode/p1OnRight — the same "is this seat on the right" convention
-// @tastic/split-screen's own consumers already use for zone/rotation decisions — so each badge
+// from orientationMode/p1OnRight - the same "is this seat on the right" convention
+// @tastic/split-screen's own consumers already use for zone/rotation decisions - so each badge
 // always sits in that seat's own zone rather than a side fixed regardless of which way the device
 // is being held. In 'faceToFace', column doesn't matter (each seat's zone spans the full width):
 // seat 1 stays bottom, seat 2 stays top, regardless of p1OnRight.