@tastic/hud 0.14.2 → 0.16.0

package/src/InlineColorPicker.tsx

@@ -9,7 +9,7 @@ import { PopoverBody } from './PopoverBody'
 import { AlignResult, PopoverRotation, useAutoAlign } from './useAutoAlign'
 import { PopoverHost } from './usePopoverHost'
 
-// Presence check, not a full-string "is this exactly one emoji" validation — this only decides a
+// Presence check, not a full-string "is this exactly one emoji" validation - this only decides a
 // font-size ratio for the trigger's own `tag`, so it doesn't need that precision, just "does this
 // tag contain a pictograph at all."
 const EMOJI_PATTERN = /\p{Extended_Pictographic}/u
@@ -19,14 +19,14 @@ const SWATCH_SIZE = 28
 const SWATCHES_PADDING = 8
 const SWATCHES_GAP = 6
 const SWATCHES_BORDER_WIDTH = 2
-// Clamped to exactly 4 or 5, not a wider 3-6 range — `defaultColors` (this component's own default
+// Clamped to exactly 4 or 5, not a wider 3-6 range - `defaultColors` (this component's own default
 // `swatches`, and what every consumer actually ends up passing) is exactly 20 colors, so 4 or 5
 // columns are the only counts that fill every row completely (4x5 or 5x4) instead of leaving a
 // ragged, off-center last row. A caller passing a custom, non-20-length `swatches` list still gets
-// a reasonable grid either way — just not guaranteed to be a full rectangle.
+// a reasonable grid either way - just not guaranteed to be a full rectangle.
 const MIN_COLUMNS = 4
 const MAX_COLUMNS = 5
-// How much screen width the grid leaves alone on either side when computing how many columns fit —
+// How much screen width the grid leaves alone on either side when computing how many columns fit -
 // this trigger can sit anywhere (including flush against a player's own screen edge in split-screen
 // mode), so the budget is against the whole window, not this trigger's own local space.
 const SCREEN_MARGIN = 40
@@ -35,13 +35,13 @@ function widthForColumns(columns: number) {
   return SWATCHES_BORDER_WIDTH * 2 + SWATCHES_PADDING * 2 + SWATCH_SIZE * columns + SWATCHES_GAP * (columns - 1)
 }
 
-// Exported so a caller that needs to independently compute this popover's own content size — to
+// Exported so a caller that needs to independently compute this popover's own content size - to
 // feed useZoneClampedAlign's contentWidth/contentHeight params with, ahead of producing a
-// colorAlignOverride for a picker living inside a @tastic/split-screen zone — can match this
+// colorAlignOverride for a picker living inside a @tastic/split-screen zone - can match this
 // component's real rendered size exactly, rather than re-deriving or hardcoding its internal
 // column/row math. Same job as LabeledDropdown's own getLabeledDropdownContentHeight, but this
 // picker's size also depends on window width (via the auto-column clamp below), so windowWidth is
-// a required parameter here rather than an ambient useWindowDimensions() read — a caller computing
+// a required parameter here rather than an ambient useWindowDimensions() read - a caller computing
 // this ahead of render (to decide alignment before the picker itself has even mounted) has no
 // component instance to read that hook from, so it has to pass the value in instead. The component
 // below calls this same function with its own live useWindowDimensions() read, so there is exactly
@@ -60,20 +60,20 @@ interface Props {
   host: PopoverHost
   value: string
   onChange: (hex: string) => void
-  // Transforms only what's *rendered* — trigger fill, swatch fill, and the contrast/caret/border
-  // colors derived from them — leaving `value`/`swatch.value` themselves untouched for `selected`/
+  // Transforms only what's *rendered* - trigger fill, swatch fill, and the contrast/caret/border
+  // colors derived from them - leaving `value`/`swatch.value` themselves untouched for `selected`/
   // `taken` matching and for what onChange actually commits. For a host whose own theme mutes or
   // tints a raw seed color before it's actually used elsewhere (e.g. blending it toward a base
   // palette for a card-back tint), so the picker can preview that real result per-swatch instead of
   // the too-vibrant seed hue, without changing what gets stored.
   previewValue?: (hex: string) => string
   swatches?: SeedColor[]
-  // The other player's current color, if any — stays visible in the grid (so the full palette
+  // The other player's current color, if any - stays visible in the grid (so the full palette
   // reads consistently for both players) but renders disabled with an X, rather than being
-  // silently removed from the list. Unless allowSwapTaken is set — see that prop.
+  // silently removed from the list. Unless allowSwapTaken is set - see that prop.
   takenValue?: string
   // Lets a tap on the taken swatch swap the two colors (this picker takes it, the other slot takes
-  // this picker's old color) instead of being disabled — useful when the "other" slot is CPU-
+  // this picker's old color) instead of being disabled - useful when the "other" slot is CPU-
   // controlled, not a second real person's choice to step on. Leave unset when the other slot is a
   // human player: swapping their color out from under them without their input isn't the same
   // tradeoff.
@@ -83,41 +83,41 @@ interface Props {
   // (see alignOverride below) decide.
   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 picker 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/SectionedDropdown'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
-  // equivalent) ancestor is currently applying — see SectionedDropdown's identical prop for the
+  // equivalent) ancestor is currently applying - see SectionedDropdown's identical prop for the
   // full reasoning. Defaults to a live ambient read via @tastic/core's useRotation() when omitted.
   rotation?: PopoverRotation
-  // Trigger glyph — defaults to a plain palette. Pass a distinct icon per slot (e.g. a face for a
+  // Trigger glyph - defaults to a plain palette. Pass a distinct icon per slot (e.g. a face for a
   // human, a robot for CPU) to convey identity through the icon itself. Overridden by `tag` below
   // when present.
   icon?: string
   // A short identity mark (an initial, an emoji, a couple of characters) shown as text on the
-  // trigger instead of `icon` — e.g. a saved player profile's own tag. Falls back to `icon` when
+  // trigger instead of `icon` - e.g. a saved player profile's own tag. Falls back to `icon` when
   // empty/omitted, same as a seat with no such identity selected.
   tag?: string
-  // Same convention as SectionedDropdown/ReadyButton's identical prop — defaults to this package's
+  // Same convention as SectionedDropdown/ReadyButton's identical prop - defaults to this package's
   // own MONO_FONT rather than inheriting whatever font the host app's theme happens to be using,
   // so this trigger's tag reads consistently with the rest of this package's own chrome text.
   labelFontFamily?: string
-  // Whether picking a swatch closes the popover. Defaults to true — a color pick is a single,
+  // Whether picking a swatch closes the popover. Defaults to true - a color pick is a single,
   // complete choice the same way a single-select dropdown row is (see SectionedDropdown's identical
   // prop), so press-away isn't the only way out, but doesn't have to be either.
   autoDismiss?: boolean
   // Overrides the auto-computed column count (see MIN_COLUMNS/MAX_COLUMNS/SCREEN_MARGIN above).
   columns?: number
-  // Trigger circle's diameter — defaults to DEFAULT_SIZE. Overridable so a caller sharing a row
+  // Trigger circle's diameter - defaults to DEFAULT_SIZE. Overridable so a caller sharing a row
   // with other fixed-size elements can line this trigger up with them instead of standing out at a
   // mismatched size.
   size?: number
 }
 
-// Renders inline rather than as a full-screen modal, scoped to its own panel — a modal color
+// Renders inline rather than as a full-screen modal, scoped to its own panel - a modal color
 // picker would block the whole screen for one player while another can't touch their own panel at
 // the same time, which defeats the point of a split-screen lobby.
 export function InlineColorPicker({ id, host, value, onChange, previewValue, swatches = defaultColors, takenValue, allowSwapTaken, dark, align: forcedAlign, alignOverride, rotation: rotationOverride, icon = 'palette', tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }: Props) {
@@ -128,7 +128,7 @@ export function InlineColorPicker({ id, host, value, onChange, previewValue, swa
   const { width: swatchesWidth, height: swatchesHeight } = getInlineColorPickerContentSize(swatches.length, windowWidth, columns)
 
   const open = host.openId === id
-  // 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, swatchesWidth, swatchesHeight, rotation)
   const placement = alignOverride ?? auto
@@ -139,7 +139,7 @@ export function InlineColorPicker({ id, host, value, onChange, previewValue, swa
   const contrastColor = getContrastColor(displayValue)
   // An emoji glyph reads visually smaller than a bold letter at the same fontSize (the system emoji
   // font leaves more of its own em-box empty), so a plain-text ratio that looks right for an initial
-  // still looks small for an emoji tag at the identical size — this bumps emoji up to the icon's own
+  // still looks small for an emoji tag at the identical size - this bumps emoji up to the icon's own
   // ratio instead, since a single emoji is closer in visual weight to an icon glyph than to text.
   const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : 0.4)
 
@@ -160,14 +160,14 @@ export function InlineColorPicker({ id, host, value, onChange, previewValue, swa
         </View>
       </TouchableRipple>
 
-      {/* Gated on `measured`, not just `open` — see useAutoAlign's own comment and
+      {/* Gated on `measured`, not just `open` - see useAutoAlign's own comment and
       SectionedDropdown's identical fix: without it, the popover mounts for one frame at a stale or
       guessed alignment and visibly jumps once this open's own measurement lands. */}
       <PopoverBody visible={open && measured} align={align} verticalAlign={verticalAlign} caretColor={menuBg} caretBorderColor={displayValue} caretBorderWidth={SWATCHES_BORDER_WIDTH} triggerSize={size}>
-        {/* Border matches this trigger's own current color (not a neutral gray) — two triggers can
+        {/* Border matches this trigger's own current color (not a neutral gray) - two triggers can
         sit close together, so the popover needs a clear visual tie back to which one opened it,
         not just its screen position. maxHeight (see useAutoAlign) only actually clamps on a screen
-        short enough that the full grid can't fit above or below the trigger either way — a short
+        short enough that the full grid can't fit above or below the trigger either way - a short
         landscape screen with the trigger row near the top, same case SectionedDropdown's own
         ScrollView exists for. */}
         <ScrollView style={[styles.swatches, { backgroundColor: menuBg, borderColor: displayValue, width: swatchesWidth, maxHeight }]} contentContainerStyle={styles.swatchesContent} showsVerticalScrollIndicator={false}>
@@ -201,7 +201,7 @@ const styles = 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: {
@@ -229,12 +229,12 @@ const styles = 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: {
@@ -247,7 +247,7 @@ const styles = 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',
@@ -255,7 +255,7 @@ const styles = 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).

package/src/LabeledDropdown.tsx

@@ -12,8 +12,8 @@ const POPOVER_WIDTH = 180
 const ROW_HEIGHT = 36
 const LIST_PADDING = 8
 
-// Exported so a caller that needs to independently compute this popover's own placement — to feed
-// alignOverride with, say, a @tastic/split-screen-zone-aware hook's result — can match its real
+// Exported so a caller that needs to independently compute this popover's own placement - to feed
+// alignOverride with, say, a @tastic/split-screen-zone-aware hook's result - can match its real
 // content dimensions exactly, rather than hardcoding or re-deriving this component's own internal
 // sizing (which alignOverride itself deliberately doesn't take a dependency on any particular
 // zone-awareness package to compute).
@@ -40,7 +40,7 @@ interface Props<T extends string> {
   // (see alignOverride below) decide. Matches PopoverBody's own align prop meaning.
   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. a popover
+  // verticalAlign, maxHeight, measured, triggerRef) with a caller-supplied one - e.g. a popover
   // 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 actual zone boundary. Omit for the
   // ordinary case (a popover with nothing but the screen edge to avoid).
@@ -48,8 +48,8 @@ interface Props<T extends string> {
 }
 
 // A name-trigger + selection popover in the same visual style as @tastic/profile's own
-// ProfilePicker trigger — an uppercase text label + chevron, opening a list whose selected row
-// fills entirely with the seat's own accent color — rather than this package's own
+// ProfilePicker trigger - an uppercase text label + chevron, opening a list whose selected row
+// fills entirely with the seat's own accent color - rather than this package's own
 // SectionedDropdown, whose trigger is a fixed icon with a gauge ring around it. For a choice that
 // reads more like "who/what you're playing" than "a game setting" (a CPU seat's own difficulty,
 // occupying the same slot a human seat's ProfilePicker would), the always-visible text label
@@ -61,7 +61,7 @@ export function LabeledDropdown<T extends string>({ id, host, options, value, on
   const open = host.openId === id
   const selected = options.find((o) => o.value === value) ?? null
   const contentHeight = LIST_PADDING * 2 + options.length * ROW_HEIGHT
-  // 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. A caller passing alignOverride (e.g. this package's own
   // useZoneClampedAlign, which already wraps this same hook) does end up measuring the trigger
   // twice; an acceptable tradeoff for keeping this component's own hook usage unconditional and
@@ -87,7 +87,7 @@ export function LabeledDropdown<T extends string>({ id, host, options, value, on
         </View>
       </TouchableRipple>
 
-      {/* Gated on `measured`, not just `open` — see InlineColorPicker's identical fix. */}
+      {/* Gated on `measured`, not just `open` - see InlineColorPicker's identical fix. */}
       <PopoverBody visible={open && measured} align={align} verticalAlign={verticalAlign} caretColor={menuBg} caretBorderColor={color} caretBorderWidth={2} triggerSize={TRIGGER_HEIGHT}>
         <ScrollView style={[styles.menu, { backgroundColor: menuBg, borderColor: color, width: POPOVER_WIDTH, maxHeight }]} contentContainerStyle={styles.menuContent} showsVerticalScrollIndicator={false}>
           {options.map((option) => {
@@ -115,7 +115,7 @@ const styles = 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
   },

package/src/PlayerSetupPanel.tsx

@@ -10,12 +10,12 @@ import { ReadyButton } from './ReadyButton'
 import { AlignResult, PopoverRotation } from './useAutoAlign'
 import { PopoverHost, usePopoverHost } from './usePopoverHost'
 
-// This panel's own internal color/CPU-difficulty popover ids, derived from idPrefix — exported so a
+// This panel's own internal color/CPU-difficulty popover ids, derived from idPrefix - exported so a
 // caller that needs to know whether one of them is currently open (e.g. to compute the `open`
 // argument useZoneClampedAlign's own first parameter needs, ahead of handing its result to
 // colorAlignOverride/cpuDifficultyAlignOverride below) doesn't have to hardcode or guess this
 // panel's own internal naming convention. Matches secondPickerId's own job for a caller's own
-// externally-constructed picker — this is the equivalent for the two pickers this panel owns
+// externally-constructed picker - this is the equivalent for the two pickers this panel owns
 // itself, which have no prop of their own to name their id with.
 export function getColorPopoverId(idPrefix: string): string {
   return `${idPrefix}-color`
@@ -31,43 +31,43 @@ export interface PlayerSetupPanelProps<C extends string = string> {
   // Shared popover host, when this panel's own popovers should be mutually exclusive with another
   // panel's or a shared-controls row's (e.g. vs-CPU: only one human is ever driving both slots, so
   // having both YOU's and CPU's pickers open at once is just clutter, not a useful simultaneous-edit
-  // case). Omit to fall back to this panel's own independent host — the two-player case, where two
+  // case). Omit to fall back to this panel's own independent host - the two-player case, where two
   // real people editing at once is the point.
   host?: PopoverHost
   label?: string
   // Applied only to the plain `label` fallback text below (ProfilePicker/LabeledDropdown render
-  // their own fixed chrome regardless of this prop) — omit to inherit whichever font the calling
+  // their own fixed chrome regardless of this prop) - omit to inherit whichever font the calling
   // screen's own theme resolves for a labelSmall Text, rather than this package forcing its own
   // MONO_FONT onto what's really the host app's own copy.
   labelFontFamily?: string
   color: string
   onColorChange: (hex: string) => void
   swatches: SeedColor[]
-  // The other player's current color — stays visible in the swatch grid but disabled, rather than
-  // removed from it entirely. Unless allowSwapTaken is set — see InlineColorPicker's own doc.
+  // The other player's current color - stays visible in the swatch grid but disabled, rather than
+  // removed from it entirely. Unless allowSwapTaken is set - see InlineColorPicker's own doc.
   takenColor?: string
   allowSwapTaken?: boolean
-  // Passed straight through to the internal InlineColorPicker's own `alignOverride` — this panel
+  // Passed straight through to the internal InlineColorPicker's own `alignOverride` - this panel
   // has no way for a caller to reach that picker directly (it's not a ReactNode slot the way
   // secondPicker is, see that prop's own doc), so a caller inside a @tastic/split-screen zone
   // needs this to substitute useZoneClampedAlign's result for the color picker's own popover.
   colorAlignOverride?: AlignResult
-  // Passed straight through to the internal InlineColorPicker's own `rotation` — same reasoning as
+  // Passed straight through to the internal InlineColorPicker's own `rotation` - same reasoning as
   // colorAlignOverride above (no other way for a caller to reach that picker directly), for a
   // caller whose own rotation reading needs to differ from InlineColorPicker's default ambient
   // useRotation() read (see that component's own `rotation` doc for when that's worth doing).
   colorRotation?: PopoverRotation
   isHuman: boolean
-  // Whatever sits beside the color picker in pickerRow, if anything — a ControlSchemePicker, a raw
+  // Whatever sits beside the color picker in pickerRow, if anything - a ControlSchemePicker, a raw
   // SectionedDropdown, or nothing at all. The five apps this component was extracted from each
   // duplicated this entire panel and differed only in what (if anything) occupied this one slot,
   // each wanting a genuinely different concept there (which physical input drives a seat, vs. a
   // pull/push "feel" preference, vs. no such concept at all for a game with no per-seat setting to
-  // pick) — a ReactNode slot the caller renders its own picker into is what actually generalizes
+  // pick) - a ReactNode slot the caller renders its own picker into is what actually generalizes
   // across all of them, rather than this component baking in one shape (e.g. ControlSchemePicker's
   // own prop set) that most of its consumers don't need at all.
   secondPicker?: ReactNode
-  // The popover id secondPicker opens under, if it opens one at all — lets pickerRow's own
+  // The popover id secondPicker opens under, if it opens one at all - lets pickerRow's own
   // "elevate above later siblings while one of my own popovers is open" logic (see pickerRowOpen)
   // react to secondPicker's popover the same way it already does for the color picker's, without
   // this component needing any opinion on what secondPicker actually renders. Omit when secondPicker
@@ -82,24 +82,24 @@ export interface PlayerSetupPanelProps<C extends string = string> {
   profiles?: Profile[]
   selectedProfileId?: string | null
   takenProfileId?: string | null
-  // What the name trigger shows before any profile's selected — this seat's own 'P1'/'P2' (see
+  // What the name trigger shows before any profile's selected - this seat's own 'P1'/'P2' (see
   // ProfilePicker's own doc for why it's never "Player"). Required whenever profiles is provided,
   // since the trigger always needs some idle text.
   guestLabel?: string
   onProfileSelect?: (profile: Profile | null) => void
-  // Navigates to a profile-management screen — typically only ever wired up for one seat (a rotated
+  // Navigates to a profile-management screen - typically only ever wired up for one seat (a rotated
   // second zone often can't host a working text keyboard).
   onManageProfiles?: () => void
   // Generic over the calling app's own CPU-difficulty union, matching LabeledDropdownOption<T>'s own
-  // genericness — this package has no opinion on what difficulties exist.
+  // genericness - this package has no opinion on what difficulties exist.
   cpuDifficulty?: C
   cpuDifficultyOptions?: LabeledDropdownOption<C>[]
   onCpuDifficultyChange?: (value: C) => void
-  // Passed straight through to the internal LabeledDropdown's own `alignOverride` — same reasoning
+  // Passed straight through to the internal LabeledDropdown's own `alignOverride` - same reasoning
   // as colorAlignOverride above, for the CPU-difficulty picker instead of the color picker.
   cpuDifficultyAlignOverride?: AlignResult
   // InlineColorPicker's own `icon` for a human vs. a non-human seat (overridden by a selected
-  // profile's own `tag`, same precedence InlineColorPicker itself applies) — defaults match every
+  // profile's own `tag`, same precedence InlineColorPicker itself applies) - defaults match every
   // consumer's own convention. A caller with its own extra CPU states (e.g. a "no CPU" slot) computes
   // its own icon string and passes it through cpuIcon rather than this component needing any opinion
   // on what those states are.
@@ -115,23 +115,23 @@ export interface PlayerSetupPanelProps<C extends string = string> {
 // Snake), which had all independently converged on this exact skeleton.
 //
 // Owns its own popover host shared by its own color/profile/difficulty pickers unless a `host` is
-// passed in to share with another panel (or a shared-controls row) instead — same convention as
+// passed in to share with another panel (or a shared-controls row) instead - same convention as
 // every popover-hosting component in this package.
 export function PlayerSetupPanel<C extends string = string>({ idPrefix, host, label, labelFontFamily, color, onColorChange, swatches, takenColor, allowSwapTaken, colorAlignOverride, colorRotation, isHuman, secondPicker, secondPickerId, ready, onToggleReady, dark, showReadyButton = true, profiles, selectedProfileId, takenProfileId, guestLabel, onProfileSelect, onManageProfiles, cpuDifficulty, cpuDifficultyOptions, onCpuDifficultyChange, cpuDifficultyAlignOverride, humanIcon = 'face-man', cpuIcon = 'robot' }: PlayerSetupPanelProps<C>) {
   const ownHost = usePopoverHost()
   const popover = host ?? ownHost
-  // Checking *this panel's own* ids, not just "is anything open on the host" — when `host` is
+  // Checking *this panel's own* ids, not just "is anything open on the host" - when `host` is
   // shared, another panel's (or a shared-controls row's) popovers also live on it, and elevating
   // this panel for those too would tie it with whichever of them actually has the open popover,
   // letting DOM order (wrongly) decide which one paints on top.
   const ownPopoverOpen = popover.openId?.startsWith(`${idPrefix}-`) ?? false
-  // Narrower than ownPopoverOpen on purpose — only true for a popover actually inside pickerRow
+  // Narrower than ownPopoverOpen on purpose - only true for a popover actually inside pickerRow
   // itself (color, or secondPicker's own popover when it has one and secondPickerId names it). See
   // pickerRowOpen's own style comment for why pickerRow needs this in addition to panelOpen above.
   const pickerRowPopoverOpen = popover.openId === getColorPopoverId(idPrefix) || (secondPickerId !== undefined && popover.openId === secondPickerId)
   const showProfilePicker = isHuman && profiles !== undefined && !!onProfileSelect
   const showCpuDifficulty = !isHuman && cpuDifficulty !== undefined && cpuDifficultyOptions !== undefined && !!onCpuDifficultyChange
-  // The color button's own tag display (see InlineColorPicker) — read live from the selected
+  // The color button's own tag display (see InlineColorPicker) - read live from the selected
   // profile rather than snapshotted at selection time, since a caller typically has no other
   // editing surface for it on this same screen.
   const selectedProfile = profiles?.find((p) => p.id === selectedProfileId) ?? null
@@ -152,7 +152,7 @@ export function PlayerSetupPanel<C extends string = string>({ idPrefix, host, la
 
       <View style={[styles.pickerRow, pickerRowPopoverOpen && styles.pickerRowOpen]}>
         {/* Human slots show the selected profile's own tag when it has one, falling back to
-        humanIcon; a non-human slot always falls back to cpuIcon — this is what actually
+        humanIcon; a non-human slot always falls back to cpuIcon - this is what actually
         distinguishes "you" from "the CPU" now, not a fixed icon. */}
         <InlineColorPicker id={getColorPopoverId(idPrefix)} host={popover} value={color} onChange={onColorChange} swatches={swatches} takenValue={takenColor} allowSwapTaken={allowSwapTaken} alignOverride={colorAlignOverride} rotation={colorRotation} dark={dark} tag={isHuman ? selectedProfile?.tag : undefined} icon={isHuman ? humanIcon : cpuIcon} />
 
@@ -169,13 +169,13 @@ const styles = 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: {
@@ -183,10 +183,10 @@ const styles = 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.

package/src/PopoverBody.tsx

@@ -3,27 +3,27 @@ import { StyleSheet, View, ViewStyle } from 'react-native'
 
 const CARET_SIZE = 7
 // How far the fill triangle's base sits past the border triangle's own base, producing the ring of
-// caretBorderColor around it — kept fixed regardless of caretBorderWidth; tuned by eye.
+// caretBorderColor around it - kept fixed regardless of caretBorderWidth; tuned by eye.
 const CARET_RING_OFFSET = 2
 // How far both triangles dip past the box's own edge (top edge when below the trigger, bottom edge
-// when above it — see verticalAlign). The caret renders after (on top of) the box, so this overlap
-// lets it paint over the box's own border there instead of butting up against it — a seam shows if
+// when above it - see verticalAlign). The caret renders after (on top of) the box, so this overlap
+// lets it paint over the box's own border there instead of butting up against it - a seam shows if
 // the two edges only touch, since neither is guaranteed to land on the exact same subpixel.
 const CARET_DIP = 1
 
 interface Props {
   visible: boolean
   children: ReactNode
-  // Which edge of the trigger the popover aligns to — 'center' (default) centers the popover
+  // Which edge of the trigger the popover aligns to - 'center' (default) centers the popover
   // under/over its trigger regardless of either one's width; 'left'/'right' instead align that
   // edge flush with the trigger's matching edge, growing away from it. A trigger sitting right at
   // the screen's edge (e.g. the rightmost of a row of icons, or a right-side player's panel) needs
-  // an explicit 'left' or 'right' — centering alone can still overflow there — to guarantee which
+  // an explicit 'left' or 'right' - centering alone can still overflow there - to guarantee which
   // direction it grows.
   align?: 'left' | 'right' | 'center'
-  // Whether the popover opens below the trigger (default — the usual case) or above it. Flips both
+  // Whether the popover opens below the trigger (default - the usual case) or above it. Flips both
   // the content's own position and the caret's direction, so it still reads as pointing back at the
-  // trigger either way. Meant for a trigger that doesn't have enough room below it to fit — a short
+  // trigger either way. Meant for a trigger that doesn't have enough room below it to fit - a short
   // landscape screen with the trigger row near the top is the case this actually shows up in.
   verticalAlign?: 'below' | 'above'
   // Small triangle pointing back at the trigger, reinforcing the visual link beyond just position
@@ -31,22 +31,22 @@ interface Props {
   // caretColor (a solid, borderless caret) when only caretColor is given.
   caretColor?: string
   caretBorderColor?: string
-  // Must match the popover box's own borderWidth — a fixed ring thickness would only happen to
+  // Must match the popover box's own borderWidth - a fixed ring thickness would only happen to
   // match whichever box first used it, and look like a mismatched outline on any other consumer.
   caretBorderWidth?: number
-  // The trigger's own width, in px — required whenever a caret is shown, so the caret can be pinned
+  // The trigger's own width, in px - required whenever a caret is shown, so the caret can be pinned
   // to the trigger's actual center via a fixed offset rather than the (usually much wider) content
   // box's own midpoint, which only coincides with the trigger's center by coincidence, if at all.
   triggerSize?: number
 }
 
 // Rendered inline as an absolutely-positioned sibling of its own trigger (never via Portal), so it
-// inherits any rotation transform the trigger's zone applies — a Portal-based popover renders at
+// inherits any rotation transform the trigger's zone applies - a Portal-based popover renders at
 // the app root, outside that transform, and would end up upside-down relative to its own trigger
 // once a face-to-face zone gets flipped 180°. Positioned via percentage (`top:'100%'`/`bottom:'100%'`)
 // against the trigger's own wrapper rather than a measured pixel rect, so no onLayout/measurement
 // plumbing is needed here and it resolves correctly regardless of how deep the trigger sits in the
-// tree — the caller (useAutoAlign) is the one that actually measures, to decide which side to grow
+// tree - the caller (useAutoAlign) is the one that actually measures, to decide which side to grow
 // toward in the first place.
 export function PopoverBody({ visible, children, align = 'center', verticalAlign = 'below', caretColor, caretBorderColor, caretBorderWidth = 1, triggerSize = 0 }: Props) {
   if (!visible) return null
@@ -60,13 +60,13 @@ export function PopoverBody({ visible, children, align = 'center', verticalAlign
   // pinning its *center* at some offset means placing its own `left`/`right` half a footprint short
   // of that offset. Every align pins one edge of `content` flush with the matching edge of the
   // trigger-sized anchor (contentCenter stretches left:0/right:0 to do this too, rather than
-  // centering via a percentage `transform` — those need the child's own auto-resolved width fed
+  // centering via a percentage `transform` - those need the child's own auto-resolved width fed
   // back into the transform, which native has been unreliable about; plain flexbox centering
   // doesn't), so triggerSize/2 from that shared edge always lands on the trigger's true center,
   // however much wider the actual popover box grows.
   const caretOffset = (halfFootprint: number): ViewStyle => (align === 'right' ? { right: triggerSize / 2 - halfFootprint } : { left: triggerSize / 2 - halfFootprint })
   // Below the trigger: caret sits at content's top edge, apex pointing up (a filled border-bottom
-  // makes an apex-up triangle), dipping upward past that edge. Above the trigger: mirrored — caret
+  // makes an apex-up triangle), dipping upward past that edge. Above the trigger: mirrored - caret
   // sits at content's bottom edge, apex pointing down (filled border-top), dipping downward past it.
   const caretFill = above ? 'borderTopColor' : 'borderBottomColor'
   const caretWidthProp = above ? 'borderTopWidth' : 'borderBottomWidth'
@@ -75,7 +75,7 @@ export function PopoverBody({ visible, children, align = 'center', verticalAlign
   return (
     <View style={[styles.content, alignStyle, verticalStyle]}>
       {children}
-      {/* Painted after (on top of) the box above, dipping into its edge — see CARET_DIP — so it
+      {/* Painted after (on top of) the box above, dipping into its edge - see CARET_DIP - so it
       reads as one continuous outline flowing from the trigger into the box, not a separate chip
       butted up against it. */}
       {caretColor && (
@@ -95,7 +95,7 @@ const styles = 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.
@@ -114,7 +114,7 @@ const styles = 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: {

package/src/PressAwayOverlay.tsx

@@ -3,13 +3,13 @@ import { Pressable, StyleProp, StyleSheet, ViewStyle } from 'react-native'
 interface Props {
   active: boolean
   onPress: () => void
-  // Defaults to filling the parent entirely — pass a narrower rect (e.g. just one player's half of
+  // Defaults to filling the parent entirely - pass a narrower rect (e.g. just one player's half of
   // the screen) to scope how far "away" reaches for that player's own popovers.
   style?: StyleProp<ViewStyle>
 }
 
 // Invisible full-bleed tap catcher for "press away to close." Render one per popover host (or per
-// player's own screen zone — see the package README for the split-screen wiring pattern), as an
+// player's own screen zone - see the package README for the split-screen wiring pattern), as an
 // early sibling of that zone's real content: plain paint order then keeps every real control
 // directly tappable (later siblings paint on top of this), while a tap on genuinely empty space
 // falls through to this and closes whatever's open. Unmounts entirely rather than always rendering

package/src/ReadyButton.tsx

@@ -10,15 +10,15 @@ interface Props {
   onToggleReady: () => void
   // Lets a caller fade/hide a standalone Ready button (e.g. while a popover is open elsewhere on
   // screen, so it doesn't visually collide with the popover's own positioning) without reflowing
-  // layout around it — pass `{ opacity: 0, pointerEvents: 'none' }` rather than conditionally
+  // layout around it - pass `{ opacity: 0, pointerEvents: 'none' }` rather than conditionally
   // unmounting.
   style?: StyleProp<ViewStyle>
-  // 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
 }
 
 // Standalone toggle so it can render either embedded in a per-player panel or centered on its own
-// below a shared row — e.g. a vs-CPU mode with only one human player needs just one Ready toggle,
+// below a shared row - e.g. a vs-CPU mode with only one human player needs just one Ready toggle,
 // not one tucked under each slot.
 export function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MONO_FONT }: Props) {
   const readyButtonStyle = [styles.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style]