@tastic/hud 0.4.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.4.0",
+  "version": "0.6.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",
@@ -63,14 +63,14 @@
   },
   "prettier": "@infinitetoken/eslint-config/prettier",
   "devDependencies": {
-    "@infinitetoken/eslint-config": "^0.1.8",
+    "@infinitetoken/eslint-config": "0.2.0",
     "@infinitetoken/jest-config": "^0.2.0",
-    "@infinitetoken/tsconfig": "^0.3.0",
+    "@infinitetoken/tsconfig": "^0.4.1",
     "@rific/auto-paper": "^0.10.3",
     "@rific/feedback-press": "^0.10.8",
     "@rific/updater": "^0.4.2",
     "@shopify/react-native-skia": "^2.6.2",
-    "@tastic/core": "^0.1.5",
+    "@tastic/core": "^0.2.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",

package/src/AchievementRow.tsx

@@ -32,20 +32,28 @@ interface Props {
   // 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
+  // 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.
+  fg?: string
+  fgMuted?: string
+  sectionBg?: string
 }
 
 // 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. Derives fg/fgMuted/its own section background from useAutoPaperTheme(),
-// same as StatRow/StatSection/BaseStatsScreen — see BaseStatsScreen's own doc for why. Has no
-// opinion on what an achievement actually IS (id, unlock predicate, catalog) — that stays entirely
-// app-local; this is purely the presentational row.
-export function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker }: Props) {
+// "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.
+export function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props) {
   const { dark } = useAutoPaperTheme()
-  const fg = dark ? '#FFFFFF' : '#000000'
-  const fgMuted = dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)'
-  const sectionBg = dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)'
+  const fg = fgOverride ?? (dark ? '#FFFFFF' : '#000000')
+  const fgMuted = fgMutedOverride ?? (dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)')
+  const sectionBg = sectionBgOverride ?? (dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)')
   const unlocked = unlockedLabel !== undefined
 
   return (

package/src/BaseSettingsDialog.tsx

@@ -334,25 +334,25 @@ const styles = StyleSheet.create({
   sectionLabel: {
     letterSpacing: 2
   },
-  // Negative margin cancels the padding so the icon still lines up with APPEARANCE/SOUND &
-  // HAPTICS below, while the ripple/hover highlight itself gets room to breathe on both sides
-  // instead of a flush edge-to-edge slab. overflow: 'hidden' makes sure that highlight actually
-  // clips to borderRadius instead of drawing as a plain rectangle.
+  // Used to carry marginHorizontal: -12 + paddingHorizontal: 12 (netting to the same inset as
+  // APPEARANCE/SOUND & HAPTICS below, while giving the ripple/hover highlight room to breathe
+  // into the dialog's own gutter beyond that). Removed: this dialog scrolls (Dialog.ScrollArea +
+  // ScrollView above), and on web a ScrollView's own content wrapper clips to its own bounds
+  // regardless of a child's negative margin - confirmed live, the icon's own rounded-square badge
+  // was getting its left edge sliced off by exactly that overhang. No horizontal inset of its own
+  // now - it relies purely on the same dialog padding APPEARANCE/every other row already does,
+  // which can never overflow because it's never negative.
   toggleButton: {
     borderRadius: 12,
-    marginHorizontal: -12,
     overflow: 'hidden',
-    paddingHorizontal: 12,
     paddingVertical: 10
   },
-  // Same shape as toggleButton but `flex: 1` instead of its own `marginHorizontal: -12` — two of
-  // these side by side in toggleRow would otherwise both pull inward and collide in the middle.
-  // toggleRow carries that edge-alignment margin once, for the row as a whole, instead.
+  // Same shape as toggleButton, `flex: 1` instead of its own width - two of these side by side in
+  // toggleRow share the row's own edge alignment instead of each carrying their own.
   toggleButtonInRow: {
     borderRadius: 12,
     flex: 1,
     overflow: 'hidden',
-    paddingHorizontal: 12,
     paddingVertical: 10
   },
   toggleContent: {
@@ -363,9 +363,9 @@ const styles = StyleSheet.create({
   toggleGroup: {
     gap: 4
   },
+  // No horizontal margin of its own now either - see toggleButton's identical note.
   toggleRow: {
     flexDirection: 'row',
-    gap: 4,
-    marginHorizontal: -12
+    gap: 4
   }
 })

package/src/BaseStatsScreen.tsx

@@ -4,6 +4,11 @@ import { ReactNode, useState } from 'react'
 import { ScrollView, StyleSheet, View } from 'react-native'
 import { Icon, Portal, Text } from 'react-native-paper'
 
+// 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 {
   // Live physical-hold rotation (see @tastic/split-screen's getViewRotation) — this dialog renders
   // as a centered Portal modal, unaffected by whichever screen's own FakeLandscapeView wraps its
@@ -13,6 +18,13 @@ interface Props {
   // don't wrap it in a FakeLandscapeView at all and so never have a nonzero one to give.
   rotation?: number
   title?: string
+  // '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
+  // towering over it. Any react-native-paper MD3 Text variant, not just the headline tier, for a
+  // caller that wants something else entirely.
+  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
@@ -23,38 +35,60 @@ interface Props {
   resetLabel?: string
   resetConfirmTitle?: string
   resetConfirmBody?: string
+  // Independently optional overrides for this screen's own background/text 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) passes
+  // whichever of the three it needs; cardBorder on the reset-confirm overlay stays fixed regardless,
+  // since its low alpha already reads fine against any cardBg.
+  fg?: string
+  bg?: string
+  cardBg?: string
+  // Overrides the confirm-overlay's alert icon/title, which otherwise default to auto-paper's
+  // colors.secondary. That default is tuned to read against auto-paper's OWN background role, not
+  // necessarily against a cardBg override above — a caller passing cardBg should generally pass a
+  // matching accentColor too, rather than risk colors.secondary landing close in hue/lightness to
+  // its own custom card background (this is what actually happened with a tinted felt cardBg in the
+  // app this was first overridden for). Every button on this screen (the reset trigger included)
+  // fills with colors.secondary/onSecondary as a self-contained, always-legible pair instead of
+  // relying on a text-only color read against the surrounding chrome, so none of them need this —
+  // only the bare icon/title do.
+  accentColor?: string
   children: ReactNode
 }
 
 // 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 overlay — extracted after the same header/scroll/reset-confirm shape was independently
-// built into LightCycles' own achievements.tsx. Derives its own colors from useAutoPaperTheme(),
-// same as this package's own BaseSettingsDialog, rather than taking fg/bg/cardBg/etc as props — a
-// stats screen is app-wide chrome, not a per-player surface, so there's no reason to make every
-// caller re-derive and thread through the identical dark-mode formula BaseSettingsDialog already
-// hardcodes internally. `children` is the seam for whatever isn't shared: this component has no
+// 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/cardBg 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 the smaller presentational pieces built to go inside it.
-export function BaseStatsScreen({ rotation = 0, title = 'Achievements', onBack, insets, onReset, resetLabel = 'Reset All Stats', resetConfirmTitle = 'Reset Everything?', resetConfirmBody = 'This permanently erases all stats and achievements. This cannot be undone.', children }: Props) {
+export function BaseStatsScreen({ rotation = 0, 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, cardBg: cardBgOverride, accentColor: accentColorOverride, children }: Props) {
   const { dark, colors } = useAutoPaperTheme()
   const [confirmResetVisible, setConfirmResetVisible] = useState(false)
   const showReset = !!onReset
 
-  // High-contrast retro look: literal black/white by appearance, matching every other screen in
-  // this ecosystem (title/loadout/settings all use this identical formula) rather than auto-
-  // paper's own (slightly tinted) background role — same convention BaseSettingsDialog's own
-  // fg/cardBg/cardBorder use internally.
-  const fg = dark ? '#FFFFFF' : '#000000'
-  const bg = dark ? '#000000' : '#FFFFFF'
-  const cardBg = dark ? '#111111' : '#F2F2F2'
+  // High-contrast retro look by default: literal black/white by appearance, matching every other
+  // screen in this ecosystem (title/loadout/settings all use this identical formula) rather than
+  // auto-paper's own (slightly tinted) background role — same convention BaseSettingsDialog's own
+  // fg/cardBg/cardBorder use internally. Overridable per-instance via the props above for a caller
+  // whose own chrome isn't that literal black/white convention; cardBorder has no override (see the
+  // Props doc above for why).
+  const fg = fgOverride ?? (dark ? '#FFFFFF' : '#000000')
+  const bg = bgOverride ?? (dark ? '#000000' : '#FFFFFF')
+  const cardBg = cardBgOverride ?? (dark ? '#111111' : '#F2F2F2')
   const cardBorder = dark ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.2)'
+  const accentColor = accentColorOverride ?? colors.secondary
 
   return (
     <View style={[styles.container, { backgroundColor: bg }]}>
       <View style={[styles.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }]}>
         <IconButton icon='arrow-left' iconColor={fg} size={24} onPress={onBack} />
-        <Text variant='displaySmall' style={[styles.title, { color: fg }]}>
+        <Text variant={titleVariant} style={[styles.title, { color: fg }]}>
           {title}
         </Text>
       </View>
@@ -63,7 +97,7 @@ export function BaseStatsScreen({ rotation = 0, title = 'Achievements', onBack,
         {children}
 
         {showReset && (
-          <Button mode='outlined' onPress={() => setConfirmResetVisible(true)} textColor={colors.secondary} style={styles.resetButton}>
+          <Button mode='contained' onPress={() => setConfirmResetVisible(true)} buttonColor={colors.secondary} textColor={colors.onSecondary} style={styles.resetButton}>
             {resetLabel}
           </Button>
         )}
@@ -73,8 +107,8 @@ export function BaseStatsScreen({ rotation = 0, title = 'Achievements', onBack,
         <Portal>
           <View style={[styles.overlay, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }]}>
             <View style={[styles.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }]}>
-              <Icon source='alert-outline' size={64} color={colors.secondary} />
-              <Text variant='headlineLarge' style={[styles.overlayTitle, { color: colors.secondary }]}>
+              <Icon source='alert-outline' size={64} color={accentColor} />
+              <Text variant='headlineLarge' style={[styles.overlayTitle, { color: accentColor }]}>
                 {resetConfirmTitle}
               </Text>
               <Text variant='bodyLarge' style={[styles.overlayBody, { color: fg }]}>

package/src/ContentGutter.tsx

@@ -0,0 +1,55 @@
+import { computeContentBounds } from '@tastic/core'
+import { ReactNode } from 'react'
+import { StyleProp, StyleSheet, useWindowDimensions, View, ViewStyle } from 'react-native'
+
+interface Props {
+  // Upper bound on the centered content region's width, in px. Omitted (the default) means no
+  // clamp at all - content fills the full window width and both gutters stay at 0 - the right
+  // default for a caller that wants this component's centered-content structure without ever
+  // actually capping width (e.g. a future full-bleed/"extend into safe area"-style mode: just
+  // don't pass this prop for that mode, rather than needing a separate disable flag).
+  maxContentWidth?: number
+  // Decoration for the left/right leftover space once maxContentWidth actually clamps something -
+  // e.g. a boundary wall. Each renders inside a View already sized to that side's own
+  // gutterWidth (0, and so with no room to show in, whenever nothing's clamped) - omit either/both
+  // for plain empty space, the default.
+  leftGutter?: ReactNode
+  rightGutter?: ReactNode
+  style?: StyleProp<ViewStyle>
+  children: ReactNode
+}
+
+// Caps a game's play area at maxContentWidth on a wide desktop/web window, splitting whatever's
+// left over into two equal, empty-by-default gutters instead of letting content keep stretching
+// (or drift off-center, left-anchored inside a now-much-wider parent) past the point where growing
+// any further stops being useful. Below maxContentWidth - or with it omitted entirely - this is a
+// no-op passthrough: children render at the full window width, no gutters.
+//
+// See @tastic/core's computeContentBounds for the actual clamp math this just wires up to a live
+// useWindowDimensions() read - deliberately the only geometry source this component owns itself; a
+// caller that also needs to fold in device safe-area insets or a split-screen zone boundary
+// composes those together on its own side, the same way LightCycles' useZoneClampedAlign composes
+// useAutoAlign with its own extra geometry (see that hook for the pattern this follows).
+export function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }: Props) {
+  const { width: windowWidth } = useWindowDimensions()
+  const { contentWidth, gutterWidth } = computeContentBounds(windowWidth, maxContentWidth ?? Infinity)
+
+  return (
+    <View style={[styles.row, style]}>
+      <View style={[styles.gutter, { width: gutterWidth }]}>{leftGutter}</View>
+      <View style={{ width: contentWidth }}>{children}</View>
+      <View style={[styles.gutter, { width: gutterWidth }]}>{rightGutter}</View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  // overflow:'hidden' keeps an oversized leftGutter/rightGutter from bleeding into the content
+  // column instead of clipping cleanly at its own real width.
+  gutter: {
+    overflow: 'hidden'
+  },
+  row: {
+    flexDirection: 'row'
+  }
+})

package/src/InlineColorPicker.tsx

@@ -40,6 +40,13 @@ 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`/
+  // `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
   // reads consistently for both players) but renders disabled with an X, rather than being
@@ -82,7 +89,7 @@ interface Props {
 // 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, swatches = defaultColors, takenValue, allowSwapTaken, dark, align: alignOverride, icon = 'palette', tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }: Props) {
+export function InlineColorPicker({ id, host, value, onChange, previewValue, swatches = defaultColors, takenValue, allowSwapTaken, dark, align: alignOverride, icon = 'palette', tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }: Props) {
   const menuBg = dark ? '#000000' : '#FFFFFF'
   const { width: windowWidth } = useWindowDimensions()
   const autoColumns = clamp(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS)
@@ -94,7 +101,9 @@ export function InlineColorPicker({ id, host, value, onChange, swatches = defaul
   const open = host.openId === id
   const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, swatchesWidth, swatchesHeight)
   const align = alignOverride ?? autoAlign
-  const contrastColor = getContrastColor(value)
+  const displayFor = previewValue ?? ((hex: string) => hex)
+  const displayValue = displayFor(value)
+  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
@@ -103,7 +112,7 @@ export function InlineColorPicker({ id, host, value, onChange, swatches = defaul
 
   return (
     <View style={[styles.anchor, open && styles.anchorOpen]}>
-      <TouchableRipple onPress={() => host.toggle(id)} borderless style={[styles.trigger, { backgroundColor: value, borderRadius: size / 2, height: size, width: size }]}>
+      <TouchableRipple onPress={() => host.toggle(id)} borderless style={[styles.trigger, { backgroundColor: displayValue, borderRadius: size / 2, height: size, width: size }]}>
         <View ref={triggerRef} collapsable={false} style={styles.triggerMeasure}>
           {/* Sized as a fraction of the trigger's own diameter rather than a fixed pixel size, so
           the glyph still reads as a deliberate part of the circle instead of shrinking toward its
@@ -121,18 +130,19 @@ export function InlineColorPicker({ id, host, value, onChange, swatches = defaul
       {/* 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={value} caretBorderWidth={SWATCHES_BORDER_WIDTH} triggerSize={size}>
+      <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
         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
         landscape screen with the trigger row near the top, same case SectionedDropdown's own
         ScrollView exists for. */}
-        <ScrollView style={[styles.swatches, { backgroundColor: menuBg, borderColor: value, width: swatchesWidth, maxHeight }]} contentContainerStyle={styles.swatchesContent} showsVerticalScrollIndicator={false}>
+        <ScrollView style={[styles.swatches, { backgroundColor: menuBg, borderColor: displayValue, width: swatchesWidth, maxHeight }]} contentContainerStyle={styles.swatchesContent} showsVerticalScrollIndicator={false}>
           {swatches.map((swatch) => {
             const selected = swatch.value.toLowerCase() === value.toLowerCase()
             const taken = !selected && !!takenValue && swatch.value.toLowerCase() === takenValue.toLowerCase()
             const swappable = taken && allowSwapTaken
+            const swatchDisplay = displayFor(swatch.value)
             return (
               <TouchableRipple
                 key={swatch.value}
@@ -142,9 +152,9 @@ export function InlineColorPicker({ id, host, value, onChange, swatches = defaul
                   if (autoDismiss) host.close()
                 }}
                 borderless
-                style={[styles.swatch, { backgroundColor: swatch.value }, selected && styles.swatchSelected, taken && !swappable && styles.swatchTaken]}
+                style={[styles.swatch, { backgroundColor: swatchDisplay }, selected && styles.swatchSelected, taken && !swappable && styles.swatchTaken]}
               >
-                {selected ? <Icon source='check' size={16} color={getContrastColor(swatch.value)} /> : swappable ? <Icon source='swap-horizontal' size={16} color={getContrastColor(swatch.value)} /> : taken ? <Icon source='close' size={16} color={getContrastColor(swatch.value)} /> : <View />}
+                {selected ? <Icon source='check' size={16} color={getContrastColor(swatchDisplay)} /> : swappable ? <Icon source='swap-horizontal' size={16} color={getContrastColor(swatchDisplay)} /> : taken ? <Icon source='close' size={16} color={getContrastColor(swatchDisplay)} /> : <View />}
               </TouchableRipple>
             )
           })}
@@ -200,6 +210,10 @@ const styles = StyleSheet.create({
     gap: SWATCHES_GAP,
     padding: SWATCHES_PADDING
   },
+  tagLabel: {
+    fontWeight: '700',
+    letterSpacing: 0.5
+  },
   // 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: {
@@ -218,9 +232,5 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     paddingHorizontal: 4,
     width: '100%'
-  },
-  tagLabel: {
-    fontWeight: '700',
-    letterSpacing: 0.5
   }
 })

package/src/SectionedDropdown.tsx

@@ -53,6 +53,12 @@ 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
+  // 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
+  // InlineColorPicker's own takenValue, for the same reason.
+  takenValue?: T
 }
 
 // Any number of these can be true at once — checkbox-style. Tapping a row toggles just that one and
@@ -250,12 +256,13 @@ function SingleSection({
     <>
       {section.options.map((option) => {
         const selected = option.value === section.value
+        const taken = !selected && option.value === section.takenValue
         const rowColor = selected ? onAccentColor : mutedColor
-        const itemStyle = [styles.item, selected && { backgroundColor: accentColor }]
+        const itemStyle = [styles.item, selected && { backgroundColor: accentColor }, taken && styles.itemTaken]
         const labelStyle: TextStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? 'bold' : 'normal' }
         const descriptionStyle: TextStyle = { fontFamily: labelFontFamily, color: rowColor }
         return (
-          <TouchableRipple key={option.value} onPress={() => onSelect(option.value)} style={itemStyle}>
+          <TouchableRipple key={option.value} disabled={taken} onPress={() => onSelect(option.value)} style={itemStyle}>
             <View style={styles.itemRow}>
               {option.icon && <Icon source={option.icon} size={MENU_ITEM_ICON_SIZE} color={rowColor} />}
               <View style={styles.itemLabelColumn}>
@@ -367,6 +374,11 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     gap: 8
   },
+  // 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
+  },
   menu: {
     borderRadius: 12,
     borderWidth: MENU_BORDER_WIDTH,

package/src/StatRow.tsx

@@ -5,20 +5,25 @@ 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
+  // 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).
 // Extracted from LightCycles' own achievements.tsx, where this exact row shape backed every
-// section (Overall/Vs CPU/Two Player/Activity). Derives its own colors from useAutoPaperTheme(),
-// same as BaseStatsScreen — see that component's own doc for why a stats-screen row doesn't take
-// fg/fgMuted as props. 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 }: Props) {
+// 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
+// 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) {
   const { dark } = useAutoPaperTheme()
-  const fg = dark ? '#FFFFFF' : '#000000'
-  const fgMuted = dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)'
+  const fg = fgOverride ?? (dark ? '#FFFFFF' : '#000000')
+  const fgMuted = fgMutedOverride ?? (dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)')
 
   return (
     <View style={styles.row}>

package/src/StatSection.tsx

@@ -5,22 +5,29 @@ import { Text } from 'react-native-paper'
 
 interface Props {
   label: string
+  // 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
+  sectionBg?: string
   children: ReactNode
 }
 
 // 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). Derives its own colors from useAutoPaperTheme(), same as StatRow/BaseStatsScreen — see
-// BaseStatsScreen's own doc for why. The label itself carries the section's own meaning (what it's
-// a section OF), so this component has no opinion on that beyond rendering the string it's given.
-export function StatSection({ label, children }: Props) {
+// StatRow). fg/sectionBg default to the same useAutoPaperTheme()-derived formula as
+// StatRow/BaseStatsScreen (see BaseStatsScreen's own doc for why), each independently overridable
+// via the matching prop for a caller with its own chrome palette. The label itself carries the
+// section's own meaning (what it's a section OF), so this component has no opinion on that beyond
+// rendering the string it's given.
+export function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }: Props) {
   const { dark } = useAutoPaperTheme()
-  const fgMuted = dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)'
-  const sectionBg = dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)'
+  const fg = fgOverride ?? (dark ? '#FFFFFF' : '#000000')
+  const sectionBg = sectionBgOverride ?? (dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)')
 
   return (
     <View style={[styles.section, { backgroundColor: sectionBg }]}>
-      <Text variant='labelMedium' style={[styles.label, { color: fgMuted }]}>
+      <Text variant='labelMedium' style={[styles.label, { color: fg }]}>
         {label}
       </Text>
       {children}
@@ -29,7 +36,12 @@ export function StatSection({ label, children }: Props) {
 }
 
 const styles = StyleSheet.create({
+  // 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.
   label: {
+    fontWeight: 'bold',
     letterSpacing: 2
   },
   section: {

package/src/index.ts

@@ -1,6 +1,7 @@
 export { AchievementRow, LOCKED_BADGE_COLOR } from './AchievementRow'
 export { BaseSettingsDialog, type BaseSettingsDialogProps } from './BaseSettingsDialog'
 export { BaseStatsScreen } from './BaseStatsScreen'
+export { ContentGutter } from './ContentGutter'
 export { CornerActionButtons } from './CornerActionButtons'
 export { MONO_FONT } from './fonts'
 export { InlineColorPicker } from './InlineColorPicker'