@tastic/hud 0.5.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.5.0",
+  "version": "0.7.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/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/ConfirmDialog.tsx

@@ -0,0 +1,104 @@
+import { useAutoPaperTheme } from '@rific/auto-paper'
+import { Button } from '@rific/feedback-press'
+import { StyleSheet, View } from 'react-native'
+import { Icon, Portal, Text } from 'react-native-paper'
+
+export interface ConfirmDialogProps {
+  visible: boolean
+  title: string
+  message: string
+  confirmLabel: string
+  cancelLabel: string
+  onConfirm: () => void
+  onCancel: () => void
+  // Live physical-hold rotation (see @tastic/split-screen's getViewRotation) - same convention as
+  // BaseSettingsDialog's own rotation prop; defaults to 0 for a caller with no per-player zone to
+  // match (a portrait-only or single-player game has nothing to stay consistent with).
+  rotation?: number
+  // Any react-native-paper Icon `source` name, shown above the title - defaults to a plain
+  // question mark, since this component has no way to know why a caller is asking.
+  icon?: string
+  // Whether the confirm button reads as destructive (the fleet's shared `danger` semantic role)
+  // instead of the default primary-colored affirmative action.
+  destructive?: boolean
+}
+
+// A themed replacement for the native Alert.alert/window.confirm two-button confirm pattern - the
+// same "retro card overlay" look BaseSettingsDialog's own update-check info messages already use
+// (see its onInfo/infoMessage), generalized here into its own reusable, exported component for any
+// caller that needs a real yes/no decision instead of a single OK dismissal. A solid backdrop +
+// centered card, not react-native-paper's own Dialog (which BaseSettingsDialog uses instead) -
+// this renders identically on every platform, including web, where react-native-web's Alert.alert
+// is a hard no-op (confirmed: its entire implementation is `static alert() {}`) and Dialog's own
+// Portal-based positioning has its own web quirks BaseSettingsDialog already works around.
+export function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation = 0, icon = 'help-circle-outline', destructive = false }: ConfirmDialogProps) {
+  const { dark, colors } = useAutoPaperTheme()
+  if (!visible) return null
+
+  // High-contrast retro look: literal black/white by appearance, not auto-paper's own (slightly
+  // tinted) background role - same convention BaseSettingsDialog's own overlay card uses.
+  const fg = dark ? '#FFFFFF' : '#000000'
+  const cardBg = dark ? '#111111' : '#F2F2F2'
+  const cardBorder = dark ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.2)'
+  const accent = destructive ? colors.danger : colors.primary
+  const onAccent = destructive ? colors.onDanger : colors.onPrimary
+
+  return (
+    <Portal>
+      <View style={styles.overlay}>
+        <View style={[styles.card, { backgroundColor: cardBg, borderColor: cardBorder }, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }]}>
+          <Icon source={icon} size={64} color={accent} />
+          <Text variant='headlineLarge' style={[styles.title, { color: accent }]}>
+            {title}
+          </Text>
+          <Text variant='bodyLarge' style={[styles.body, { color: fg }]}>
+            {message}
+          </Text>
+          <View style={styles.actions}>
+            <Button mode='outlined' onPress={onCancel} style={styles.actionButton}>
+              {cancelLabel}
+            </Button>
+            <Button mode='contained' onPress={onConfirm} style={styles.actionButton} buttonColor={accent} textColor={onAccent}>
+              {confirmLabel}
+            </Button>
+          </View>
+        </View>
+      </View>
+    </Portal>
+  )
+}
+
+const styles = StyleSheet.create({
+  actionButton: {
+    flex: 1
+  },
+  actions: {
+    flexDirection: 'row',
+    gap: 12,
+    width: '100%'
+  },
+  body: {
+    textAlign: 'center'
+  },
+  card: {
+    alignItems: 'center',
+    borderRadius: 20,
+    borderWidth: 1,
+    gap: 16,
+    maxWidth: 360,
+    padding: 32
+  },
+  overlay: {
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.72)',
+    bottom: 0,
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0
+  },
+  title: {
+    fontWeight: 'bold'
+  }
+})

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/ControlSchemePicker.tsx

@@ -0,0 +1,53 @@
+import { useIsTouchPrimaryDevice } from '@tastic/core'
+import { Platform } from 'react-native'
+
+import { MenuOption, SectionedDropdown } from './SectionedDropdown'
+import { PopoverHost } from './usePopoverHost'
+
+export interface ControlSchemePickerProps<T extends string | number> {
+  id: string
+  host: PopoverHost
+  value: T
+  onChange: (value: T) => void
+  options: MenuOption<T>[]
+  // 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
+  // wires up to prevent that.
+  takenValue?: T
+  accentColor: string
+  mutedColor: string
+  onAccentColor?: string
+  dark: boolean
+  align?: 'left' | 'right' | 'center'
+  labelFontFamily?: string
+}
+
+// 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
+// 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
+// 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
+// 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
+// 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
+// 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
+// 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, labelFontFamily }: ControlSchemePickerProps<T>) {
+  const isTouchPrimary = useIsTouchPrimaryDevice()
+  if (Platform.OS !== 'web' || isTouchPrimary) return null
+
+  return <SectionedDropdown id={id} host={host} icon='keyboard-outline' accessibilityLabel='Control scheme' sections={[{ kind: 'single', id: 'controls', options, value, onChange, takenValue }]} accentColor={accentColor} mutedColor={mutedColor} onAccentColor={onAccentColor} dark={dark} align={align} labelFontFamily={labelFontFamily} />
+}

package/src/CornerActionButtons.tsx

@@ -12,6 +12,14 @@ interface Props {
   // @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
+  // 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.
+  backIcon?: string
+  backLabel?: string
 }
 
 // Back (top-left) + Settings (top-right) icon buttons, fixed at the screen's rotated corners — the
@@ -20,10 +28,10 @@ interface Props {
 // 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
 // between based on their own game-mode/orientation state (this component has no opinion on which).
-export function CornerActionButtons({ onBack, onSettings, fg, insets }: Props) {
+export function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = 'arrow-left', backLabel = 'Back' }: Props) {
   return (
     <>
-      <IconButton icon='arrow-left' iconColor={fg} size={24} style={[styles.back, { top: 8 + insets.top, left: 8 + insets.left }]} onPress={onBack} accessibilityLabel='Back' />
+      <IconButton icon={backIcon} iconColor={fg} size={24} style={[styles.back, { top: 8 + insets.top, left: 8 + insets.left }]} onPress={onBack} accessibilityLabel={backLabel} />
       <IconButton icon='cog' iconColor={fg} size={24} style={[styles.topRight, { top: 8 + insets.top, right: 8 + insets.right }]} onPress={onSettings} accessibilityLabel='Settings' />
     </>
   )

package/src/CornerStatusBadges.tsx

@@ -0,0 +1,87 @@
+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 —
+// 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
+// via that package's own hook, never something this package reads itself.
+export type OrientationMode = 'faceToFace' | 'sideBySide'
+
+export interface CornerStatusBadgeSeat {
+  // 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.
+  icon?: string
+}
+
+export interface CornerStatusBadgesProps {
+  orientationMode: OrientationMode
+  // 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
+  // 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
+  p2?: CornerStatusBadgeSeat
+}
+
+const BADGE_SIZE = 30
+
+// 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
+// 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
+// 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.
+export function CornerStatusBadges({ orientationMode, p1OnRight, p1, p2 }: CornerStatusBadgesProps) {
+  const p1OnRightSide = orientationMode === 'sideBySide' && p1OnRight
+  const p2OnLeftSide = orientationMode === 'sideBySide' && !p1OnRight
+  return (
+    <>
+      {p1 && (
+        <View pointerEvents='none' style={p1OnRightSide ? styles.bottomRight : styles.bottomLeft}>
+          <StatusBadge icon={p1.icon} />
+        </View>
+      )}
+      {p2 && (
+        <View pointerEvents='none' style={p2OnLeftSide ? styles.topLeft : styles.topRight}>
+          <StatusBadge icon={p2.icon} />
+        </View>
+      )}
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  badge: {
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.28)',
+    borderColor: 'rgba(255,255,255,0.18)',
+    borderRadius: BADGE_SIZE / 2,
+    borderWidth: 1,
+    height: BADGE_SIZE,
+    justifyContent: 'center',
+    opacity: 0.7,
+    width: BADGE_SIZE
+  },
+  bottomLeft: { bottom: 12, left: 12, position: 'absolute' },
+  bottomRight: { bottom: 12, position: 'absolute', right: 12 },
+  topLeft: { left: 12, position: 'absolute', top: 12 },
+  topRight: { position: 'absolute', right: 12, top: 12 }
+})

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/index.ts

@@ -1,7 +1,11 @@
 export { AchievementRow, LOCKED_BADGE_COLOR } from './AchievementRow'
 export { BaseSettingsDialog, type BaseSettingsDialogProps } from './BaseSettingsDialog'
 export { BaseStatsScreen } from './BaseStatsScreen'
+export { ConfirmDialog, type ConfirmDialogProps } from './ConfirmDialog'
+export { ContentGutter } from './ContentGutter'
+export { ControlSchemePicker, type ControlSchemePickerProps } from './ControlSchemePicker'
 export { CornerActionButtons } from './CornerActionButtons'
+export { CornerStatusBadges, type CornerStatusBadgeSeat, type CornerStatusBadgesProps, type OrientationMode } from './CornerStatusBadges'
 export { MONO_FONT } from './fonts'
 export { InlineColorPicker } from './InlineColorPicker'
 export { getLabeledDropdownContentHeight, LABELED_DROPDOWN_POPOVER_WIDTH, LabeledDropdown, type LabeledDropdownOption } from './LabeledDropdown'