@tastic/hud 0.20.0 → 0.21.0

package/dist/chrome/index.js

@@ -740,7 +740,7 @@ function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", t
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper9.Text, { variant: titleVariant, style: [styles10.title, { color: fg }], children: title })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.ScrollView, { style: styles10.scrollView, contentContainerStyle: [styles10.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_auto_paper9.FadingScrollView, { style: styles10.scrollView, contentContainerStyle: [styles10.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
       children,
       showReset && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press3.Button, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.danger, textColor: colors.onDanger, style: styles10.resetButton, children: resetLabel })
     ] }),
@@ -781,7 +781,7 @@ var styles10 = import_react_native13.StyleSheet.create({
   resetButton: {
     marginTop: 16
   },
-  // Bounds the ScrollView to the space `container`'s flex:1 actually gives it - without this, a
+  // Bounds the scroller (FadingScrollView puts it on its outer box) to the space `container`'s flex:1 actually gives it - without this, a
   // ScrollView with only a contentContainerStyle isn't reliably height-constrained on native (it
   // can render at its full unclipped content height instead of the screen's), which leaves the
   // header's back button touch target unreliable underneath it.

package/dist/chrome/index.mjs

@@ -16,7 +16,7 @@ import {
   UpdateDialog,
   getStaggeredWordDuration,
   useCompactDialog
-} from "../chunk-DK3HOZC5.mjs";
+} from "../chunk-UOA35OWJ.mjs";
 import {
   COMPACT_DIALOG_HEIGHT,
   DialogHeader,

package/dist/{chunk-DK3HOZC5.mjs → chunk-UOA35OWJ.mjs}

@@ -539,11 +539,11 @@ var styles7 = StyleSheet7.create({
 });
 
 // src/BaseStatsScreen.tsx
-import { useAutoPaperTheme as useAutoPaperTheme7 } from "@rific/auto-paper";
+import { FadingScrollView as FadingScrollView2, useAutoPaperTheme as useAutoPaperTheme7 } from "@rific/auto-paper";
 import { Button as Button3, IconButton } from "@rific/feedback-press";
 import { useRotation as useRotation3 } from "@tastic/core";
 import { useState as useState4 } from "react";
-import { ScrollView, StyleSheet as StyleSheet8, View as View7 } from "react-native";
+import { StyleSheet as StyleSheet8, View as View7 } from "react-native";
 import { Text as Text7 } from "react-native-paper";
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", titleVariant = "headlineSmall", onBack, backLabel = "Back", hitSlop, insets, onReset, resetLabel = "Reset All Stats", resetConfirmTitle = "Reset Everything?", resetConfirmBody = "This permanently erases all stats and achievements. This cannot be undone.", fg: fgOverride, bg: bgOverride, children }) {
@@ -559,7 +559,7 @@ function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", t
       /* @__PURE__ */ jsx9(IconButton, { icon: "arrow-left", iconColor: fg, size: 24, hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
       /* @__PURE__ */ jsx9(Text7, { variant: titleVariant, style: [styles8.title, { color: fg }], children: title })
     ] }),
-    /* @__PURE__ */ jsxs8(ScrollView, { style: styles8.scrollView, contentContainerStyle: [styles8.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
+    /* @__PURE__ */ jsxs8(FadingScrollView2, { style: styles8.scrollView, contentContainerStyle: [styles8.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
       children,
       showReset && /* @__PURE__ */ jsx9(Button3, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.danger, textColor: colors.onDanger, style: styles8.resetButton, children: resetLabel })
     ] }),
@@ -600,7 +600,7 @@ var styles8 = StyleSheet8.create({
   resetButton: {
     marginTop: 16
   },
-  // Bounds the ScrollView to the space `container`'s flex:1 actually gives it - without this, a
+  // Bounds the scroller (FadingScrollView puts it on its outer box) to the space `container`'s flex:1 actually gives it - without this, a
   // ScrollView with only a contentContainerStyle isn't reliably height-constrained on native (it
   // can render at its full unclipped content height instead of the screen's), which leaves the
   // header's back button touch target unreliable underneath it.

package/dist/index.d.mts

@@ -178,6 +178,7 @@ declare function LabeledDropdown<T extends string>({ id, host, options, value, o
 declare function loadSkiaWeb(): Promise<void>;
 
 declare function getColorPopoverId(idPrefix: string): string;
+declare function getProfilePopoverId(idPrefix: string): string;
 declare function getCpuDifficultyPopoverId(idPrefix: string): string;
 interface PlayerSetupPanelProps<C extends string = string> {
     idPrefix: string;
@@ -189,6 +190,8 @@ interface PlayerSetupPanelProps<C extends string = string> {
     swatches: SeedColor[];
     takenColor?: string;
     allowSwapTaken?: boolean;
+    colorCaption?: string;
+    showColor?: boolean;
     colorAlignOverride?: AlignResult;
     colorRotation?: PopoverRotation;
     isHuman: boolean;
@@ -207,11 +210,10 @@ interface PlayerSetupPanelProps<C extends string = string> {
     cpuDifficulty?: C;
     cpuDifficultyOptions?: LabeledDropdownOption<C>[];
     onCpuDifficultyChange?: (value: C) => void;
-    cpuDifficultyAlignOverride?: AlignResult;
     humanIcon?: string;
     cpuIcon?: string;
 }
-declare function PlayerSetupPanel<C extends string = string>({ idPrefix, host, label, labelFontFamily, color, onColorChange, swatches, takenColor, allowSwapTaken, colorAlignOverride, colorRotation, isHuman, secondPicker, secondPickerId, ready, onToggleReady, dark, showReadyButton, profiles, selectedProfileId, takenProfileId, guestLabel, onProfileSelect, onManageProfiles, cpuDifficulty, cpuDifficultyOptions, onCpuDifficultyChange, cpuDifficultyAlignOverride, humanIcon, cpuIcon }: PlayerSetupPanelProps<C>): react.JSX.Element;
+declare function PlayerSetupPanel<C extends string = string>({ idPrefix, host, label, labelFontFamily, color, onColorChange, swatches, takenColor, allowSwapTaken, colorCaption, showColor, colorAlignOverride, colorRotation, isHuman, secondPicker, secondPickerId, ready, onToggleReady, dark, showReadyButton, profiles, selectedProfileId, takenProfileId, guestLabel, onProfileSelect, onManageProfiles, cpuDifficulty, cpuDifficultyOptions, onCpuDifficultyChange, humanIcon, cpuIcon }: PlayerSetupPanelProps<C>): react.JSX.Element;
 
 interface Props$3 {
     visible: boolean;
@@ -277,4 +279,4 @@ declare function useQuitConfirmation(hasProgress: () => boolean, onConfirmedBack
 
 declare function useZoneClampedAlign(open: boolean, contentWidth: number, contentHeight: number, rotation?: PopoverRotation): ReturnType<typeof useAutoAlign>;
 
-export { AchievementUnlockList, type AchievementUnlockOwner, type AlignResult, ControlSchemePicker, type ControlSchemePickerProps, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LabeledDropdown, type LabeledDropdownOption, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, PlayerSetupPanel, type PlayerSetupPanelProps, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, type QuitConfirmation, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, TriggerGaugeHost, type TriggerGaugeProps, type UnlockedAchievement, getColorPopoverId, getCpuDifficultyPopoverId, getInlineColorPickerContentSize, getLabeledDropdownContentHeight, loadSkiaWeb, useAutoAlign, usePopoverHost, useQuitConfirmation, useZoneClampedAlign };
+export { AchievementUnlockList, type AchievementUnlockOwner, type AlignResult, ControlSchemePicker, type ControlSchemePickerProps, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LabeledDropdown, type LabeledDropdownOption, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, PlayerSetupPanel, type PlayerSetupPanelProps, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, type QuitConfirmation, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, TriggerGaugeHost, type TriggerGaugeProps, type UnlockedAchievement, getColorPopoverId, getCpuDifficultyPopoverId, getInlineColorPickerContentSize, getLabeledDropdownContentHeight, getProfilePopoverId, loadSkiaWeb, useAutoAlign, usePopoverHost, useQuitConfirmation, useZoneClampedAlign };

package/dist/index.d.ts

@@ -178,6 +178,7 @@ declare function LabeledDropdown<T extends string>({ id, host, options, value, o
 declare function loadSkiaWeb(): Promise<void>;
 
 declare function getColorPopoverId(idPrefix: string): string;
+declare function getProfilePopoverId(idPrefix: string): string;
 declare function getCpuDifficultyPopoverId(idPrefix: string): string;
 interface PlayerSetupPanelProps<C extends string = string> {
     idPrefix: string;
@@ -189,6 +190,8 @@ interface PlayerSetupPanelProps<C extends string = string> {
     swatches: SeedColor[];
     takenColor?: string;
     allowSwapTaken?: boolean;
+    colorCaption?: string;
+    showColor?: boolean;
     colorAlignOverride?: AlignResult;
     colorRotation?: PopoverRotation;
     isHuman: boolean;
@@ -207,11 +210,10 @@ interface PlayerSetupPanelProps<C extends string = string> {
     cpuDifficulty?: C;
     cpuDifficultyOptions?: LabeledDropdownOption<C>[];
     onCpuDifficultyChange?: (value: C) => void;
-    cpuDifficultyAlignOverride?: AlignResult;
     humanIcon?: string;
     cpuIcon?: string;
 }
-declare function PlayerSetupPanel<C extends string = string>({ idPrefix, host, label, labelFontFamily, color, onColorChange, swatches, takenColor, allowSwapTaken, colorAlignOverride, colorRotation, isHuman, secondPicker, secondPickerId, ready, onToggleReady, dark, showReadyButton, profiles, selectedProfileId, takenProfileId, guestLabel, onProfileSelect, onManageProfiles, cpuDifficulty, cpuDifficultyOptions, onCpuDifficultyChange, cpuDifficultyAlignOverride, humanIcon, cpuIcon }: PlayerSetupPanelProps<C>): react.JSX.Element;
+declare function PlayerSetupPanel<C extends string = string>({ idPrefix, host, label, labelFontFamily, color, onColorChange, swatches, takenColor, allowSwapTaken, colorCaption, showColor, colorAlignOverride, colorRotation, isHuman, secondPicker, secondPickerId, ready, onToggleReady, dark, showReadyButton, profiles, selectedProfileId, takenProfileId, guestLabel, onProfileSelect, onManageProfiles, cpuDifficulty, cpuDifficultyOptions, onCpuDifficultyChange, humanIcon, cpuIcon }: PlayerSetupPanelProps<C>): react.JSX.Element;
 
 interface Props$3 {
     visible: boolean;
@@ -277,4 +279,4 @@ declare function useQuitConfirmation(hasProgress: () => boolean, onConfirmedBack
 
 declare function useZoneClampedAlign(open: boolean, contentWidth: number, contentHeight: number, rotation?: PopoverRotation): ReturnType<typeof useAutoAlign>;
 
-export { AchievementUnlockList, type AchievementUnlockOwner, type AlignResult, ControlSchemePicker, type ControlSchemePickerProps, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LabeledDropdown, type LabeledDropdownOption, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, PlayerSetupPanel, type PlayerSetupPanelProps, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, type QuitConfirmation, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, TriggerGaugeHost, type TriggerGaugeProps, type UnlockedAchievement, getColorPopoverId, getCpuDifficultyPopoverId, getInlineColorPickerContentSize, getLabeledDropdownContentHeight, loadSkiaWeb, useAutoAlign, usePopoverHost, useQuitConfirmation, useZoneClampedAlign };
+export { AchievementUnlockList, type AchievementUnlockOwner, type AlignResult, ControlSchemePicker, type ControlSchemePickerProps, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LabeledDropdown, type LabeledDropdownOption, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, PlayerSetupPanel, type PlayerSetupPanelProps, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, type QuitConfirmation, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, TriggerGaugeHost, type TriggerGaugeProps, type UnlockedAchievement, getColorPopoverId, getCpuDifficultyPopoverId, getInlineColorPickerContentSize, getLabeledDropdownContentHeight, getProfilePopoverId, loadSkiaWeb, useAutoAlign, usePopoverHost, useQuitConfirmation, useZoneClampedAlign };

package/dist/index.js

@@ -204,6 +204,7 @@ __export(index_exports, {
   getCpuDifficultyPopoverId: () => getCpuDifficultyPopoverId,
   getInlineColorPickerContentSize: () => getInlineColorPickerContentSize,
   getLabeledDropdownContentHeight: () => getLabeledDropdownContentHeight,
+  getProfilePopoverId: () => getProfilePopoverId,
   getStaggeredWordDuration: () => getStaggeredWordDuration,
   isCompactDialogHeight: () => isCompactDialogHeight,
   loadSkiaWeb: () => loadSkiaWeb,
@@ -944,7 +945,7 @@ function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", t
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_paper10.Text, { variant: titleVariant, style: [styles11.title, { color: fg }], children: title })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native14.ScrollView, { style: styles11.scrollView, contentContainerStyle: [styles11.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_auto_paper10.FadingScrollView, { style: styles11.scrollView, contentContainerStyle: [styles11.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
       children,
       showReset && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_feedback_press3.Button, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.danger, textColor: colors.onDanger, style: styles11.resetButton, children: resetLabel })
     ] }),
@@ -985,7 +986,7 @@ var styles11 = import_react_native14.StyleSheet.create({
   resetButton: {
     marginTop: 16
   },
-  // Bounds the ScrollView to the space `container`'s flex:1 actually gives it - without this, a
+  // Bounds the scroller (FadingScrollView puts it on its outer box) to the space `container`'s flex:1 actually gives it - without this, a
   // ScrollView with only a contentContainerStyle isn't reliably height-constrained on native (it
   // can render at its full unclipped content height instead of the screen's), which leaves the
   // header's back button touch target unreliable underneath it.
@@ -1668,7 +1669,7 @@ function loadSkiaWeb() {
 
 // src/PlayerSetupPanel.tsx
 var import_profile2 = require("@tastic/profile");
-var import_react_native26 = require("react-native");
+var import_react_native27 = require("react-native");
 var import_react_native_paper16 = require("react-native-paper");
 
 // src/ReadyButton.tsx
@@ -1705,32 +1706,79 @@ function usePopoverHost() {
   return { openId, toggle, close };
 }
 
+// src/useZoneClampedAlign.ts
+var import_split_screen = require("@tastic/split-screen");
+var import_react12 = require("react");
+var import_react_native26 = require("react-native");
+var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
+var EDGE_MARGIN2 = 12;
+function useZoneClampedAlign(open, contentWidth, contentHeight, rotation = 0) {
+  const auto = useAutoAlign(open, contentWidth, contentHeight, rotation);
+  const zone = (0, import_split_screen.useZoneBounds)();
+  const { height: windowHeight } = (0, import_react_native26.useWindowDimensions)();
+  const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
+  const shouldMeasure = open && auto.measured && zone !== null;
+  const [ownBounds, setOwnBounds] = (0, import_react12.useState)(null);
+  const [prevShouldMeasure, setPrevShouldMeasure] = (0, import_react12.useState)(shouldMeasure);
+  if (shouldMeasure !== prevShouldMeasure) {
+    setPrevShouldMeasure(shouldMeasure);
+    setOwnBounds(null);
+  }
+  (0, import_react12.useEffect)(() => {
+    if (!shouldMeasure) return;
+    auto.triggerRef.current?.measureInWindow((_x, y, _width, height) => {
+      const belowShared = zone.zoneSide === "belowShared";
+      const awayRoom = belowShared ? windowHeight - insets.bottom - (y + height) - EDGE_MARGIN2 : y - insets.top - EDGE_MARGIN2;
+      const towardRoom = belowShared ? y - zone.sharedEdgeY - EDGE_MARGIN2 : zone.sharedEdgeY - (y + height) - EDGE_MARGIN2;
+      const useToward = contentHeight > awayRoom && towardRoom > awayRoom;
+      let awaySide = belowShared ? "below" : "above";
+      let towardSide = belowShared ? "above" : "below";
+      if (zone.rotated) {
+        awaySide = awaySide === "above" ? "below" : "above";
+        towardSide = towardSide === "above" ? "below" : "above";
+      }
+      setOwnBounds({ maxHeight: Math.max(useToward ? towardRoom : awayRoom, 0), verticalAlign: useToward ? towardSide : awaySide });
+    });
+  }, [shouldMeasure, zone, auto.triggerRef, contentHeight, windowHeight, insets.top, insets.bottom]);
+  if (!zone) return auto;
+  if (!ownBounds) return { ...auto, measured: false };
+  return { ...auto, maxHeight: ownBounds.maxHeight, measured: auto.measured, verticalAlign: ownBounds.verticalAlign };
+}
+
 // src/PlayerSetupPanel.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function getColorPopoverId(idPrefix) {
   return `${idPrefix}-color`;
 }
+function getProfilePopoverId(idPrefix) {
+  return `${idPrefix}-profile`;
+}
 function getCpuDifficultyPopoverId(idPrefix) {
   return `${idPrefix}-difficulty`;
 }
-function PlayerSetupPanel({ 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" }) {
+function PlayerSetupPanel({ idPrefix, host, label, labelFontFamily, color, onColorChange, swatches, takenColor, allowSwapTaken, colorCaption, showColor = true, colorAlignOverride, colorRotation, isHuman, secondPicker, secondPickerId, ready, onToggleReady, dark, showReadyButton = true, profiles, selectedProfileId, takenProfileId, guestLabel, onProfileSelect, onManageProfiles, cpuDifficulty, cpuDifficultyOptions, onCpuDifficultyChange, humanIcon = "face-man", cpuIcon = "robot" }) {
   const ownHost = usePopoverHost();
   const popover = host ?? ownHost;
   const ownPopoverOpen = popover.openId?.startsWith(`${idPrefix}-`) ?? false;
   const pickerRowPopoverOpen = popover.openId === getColorPopoverId(idPrefix) || secondPickerId !== void 0 && popover.openId === secondPickerId;
   const showProfilePicker = isHuman && profiles !== void 0 && !!onProfileSelect;
   const showCpuDifficulty = !isHuman && cpuDifficulty !== void 0 && cpuDifficultyOptions !== void 0 && !!onCpuDifficultyChange;
+  const seatButton = showProfilePicker || showCpuDifficulty;
   const selectedProfile = profiles?.find((p) => p.id === selectedProfileId) ?? null;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native26.View, { style: [styles21.panel, ownPopoverOpen && styles21.panelOpen], children: [
-    showProfilePicker ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_profile2.ProfilePicker, { idPrefix, host: popover, profiles, selectedId: selectedProfileId ?? null, takenId: takenProfileId, color, dark, guestLabel: guestLabel ?? "GUEST", onSelect: (profile) => onProfileSelect?.(profile), onManage: onManageProfiles }) : showCpuDifficulty ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LabeledDropdown, { id: getCpuDifficultyPopoverId(idPrefix), host: popover, options: cpuDifficultyOptions, value: cpuDifficulty, onChange: onCpuDifficultyChange, color, dark, alignOverride: cpuDifficultyAlignOverride }) : label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native_paper16.Text, { variant: "labelSmall", style: { color, fontFamily: labelFontFamily }, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native26.View, { style: [styles21.pickerRow, pickerRowPopoverOpen && styles21.pickerRowOpen], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InlineColorPicker, { id: getColorPopoverId(idPrefix), host: popover, value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, alignOverride: colorAlignOverride, rotation: colorRotation, dark, tag: isHuman ? selectedProfile?.tag : void 0, icon: isHuman ? humanIcon : cpuIcon }),
+  const colorSection = showColor ? { value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, caption: showProfilePicker && selectedProfile ? colorCaption : void 0 } : void 0;
+  const seatPickerId = showProfilePicker ? getProfilePopoverId(idPrefix) : getCpuDifficultyPopoverId(idPrefix);
+  const seatPickerSize = showProfilePicker ? (0, import_profile2.getProfilePickerContentSize)(profiles.length, !!onManageProfiles, colorSection) : (0, import_profile2.getOptionPickerContentSize)(cpuDifficultyOptions?.length ?? 0, colorSection);
+  const seatPickerAlign = useZoneClampedAlign(seatButton && popover.openId === seatPickerId, seatPickerSize.width, seatPickerSize.height);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native27.View, { style: [styles21.panel, ownPopoverOpen && styles21.panelOpen], children: [
+    showProfilePicker ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_profile2.ProfilePicker, { idPrefix, host: popover, profiles, selectedId: selectedProfileId ?? null, takenId: takenProfileId, color, dark, guestLabel: guestLabel ?? "GUEST", onSelect: (profile) => onProfileSelect?.(profile), onManage: onManageProfiles, colorSection, alignOverride: seatPickerAlign }) : showCpuDifficulty ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_profile2.OptionPicker, { id: getCpuDifficultyPopoverId(idPrefix), host: popover, options: cpuDifficultyOptions, value: cpuDifficulty, onChange: onCpuDifficultyChange, color, dark, icon: cpuIcon, colorSection, alignOverride: seatPickerAlign }) : label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native_paper16.Text, { variant: "labelSmall", style: { color, fontFamily: labelFontFamily }, children: label }),
+    (!seatButton || secondPicker) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native27.View, { style: [styles21.pickerRow, pickerRowPopoverOpen && styles21.pickerRowOpen], children: [
+      !seatButton && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InlineColorPicker, { id: getColorPopoverId(idPrefix), host: popover, value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, alignOverride: colorAlignOverride, rotation: colorRotation, dark, tag: isHuman ? selectedProfile?.tag : void 0, icon: isHuman ? humanIcon : cpuIcon }),
       secondPicker
     ] }),
     isHuman && showReadyButton && onToggleReady && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ReadyButton, { color, ready: ready ?? false, onToggleReady })
   ] });
 }
-var styles21 = import_react_native26.StyleSheet.create({
+var styles21 = import_react_native27.StyleSheet.create({
   panel: {
     alignItems: "center",
     gap: 12
@@ -1741,9 +1789,9 @@ var styles21 = import_react_native26.StyleSheet.create({
   panelOpen: {
     zIndex: 100
   },
-  // 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.
+  // Same gap as `panel`'s own vertical rhythm, reused horizontally - the fallback color swatch and
+  // (when present) secondPicker sit side by side within this row instead of stacked in the panel's
+  // own column.
   pickerRow: {
     alignItems: "center",
     flexDirection: "row",
@@ -1762,20 +1810,20 @@ var styles21 = import_react_native26.StyleSheet.create({
 });
 
 // src/PressAwayOverlay.tsx
-var import_react_native27 = require("react-native");
+var import_react_native28 = require("react-native");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function PressAwayOverlay({ active, onPress, style }) {
   if (!active) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native27.Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [import_react_native27.StyleSheet.absoluteFill, style] });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native28.Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [import_react_native28.StyleSheet.absoluteFill, style] });
 }
 
 // src/SharedActionBand.tsx
 var import_feedback_press9 = require("@rific/feedback-press");
-var import_react_native28 = require("react-native");
+var import_react_native29 = require("react-native");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_native28.View, { style: [styles22.column, popoverOpen && styles22.columnOpen], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_native28.View, { style: styles22.actionsRow, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_native29.View, { style: [styles22.column, popoverOpen && styles22.columnOpen], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_native29.View, { style: styles22.actionsRow, children: [
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_feedback_press9.IconButton, { icon: "arrow-left", iconColor: fg, size: 20, onPress: onBack, accessibilityLabel: "Back" }),
       onRandomize && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_feedback_press9.IconButton, { icon: "dice-multiple", iconColor: fg, size: 18, onPress: onRandomize, accessibilityLabel: "Randomize match settings" }),
       onReset && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_feedback_press9.IconButton, { icon: "restore", iconColor: fg, size: 18, onPress: onReset, accessibilityLabel: "Reset match settings to defaults" }),
@@ -1784,7 +1832,7 @@ function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popove
     children
   ] });
 }
-var styles22 = import_react_native28.StyleSheet.create({
+var styles22 = import_react_native29.StyleSheet.create({
   actionsRow: {
     alignItems: "center",
     flexDirection: "row",
@@ -1800,8 +1848,8 @@ var styles22 = import_react_native28.StyleSheet.create({
 });
 
 // src/StaggeredWord.tsx
-var import_react12 = require("react");
-var import_react_native29 = require("react-native");
+var import_react13 = require("react");
+var import_react_native30 = require("react-native");
 var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"));
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var STAGGER_MS = 45;
@@ -1811,7 +1859,7 @@ function getStaggeredWordDuration(letterCount) {
 }
 function AnimatedLetter({ char, index, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }) {
   const progress = (0, import_react_native_reanimated2.useSharedValue)(reducedMotion ? 1 : 0);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (reducedMotion) return;
     progress.value = (0, import_react_native_reanimated2.withDelay)(index * STAGGER_MS, (0, import_react_native_reanimated2.withTiming)(1, { duration: LETTER_DURATION_MS, easing: import_react_native_reanimated2.Easing.out(import_react_native_reanimated2.Easing.back(1.5)) }));
   }, [reducedMotion]);
@@ -1822,9 +1870,9 @@ function AnimatedLetter({ char, index, color, reducedMotion, fontFamily, fontSiz
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native_reanimated2.default.Text, { allowFontScaling: false, style: [{ color, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, style], children: char });
 }
 function StaggeredWord({ word, color, fontFamily, fontSize, lineHeight, reducedMotion, startIndex = 0, fontWeight = "bold", letterSpacing, style, onLayout }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native29.View, { style: [styles23.row, style], onLayout, children: word.split("").map((char, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AnimatedLetter, { char, index: startIndex + i, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, i)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native30.View, { style: [styles23.row, style], onLayout, children: word.split("").map((char, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AnimatedLetter, { char, index: startIndex + i, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, i)) });
 }
-var styles23 = import_react_native29.StyleSheet.create({
+var styles23 = import_react_native30.StyleSheet.create({
   row: {
     flexDirection: "row"
   }
@@ -1841,63 +1889,24 @@ function UpdateDialog({ rotation = 0, autoCheck = true, autoPrompt = true, onErr
 }
 
 // src/useQuitConfirmation.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useQuitConfirmation(hasProgress, onConfirmedBack) {
-  const [confirmVisible, setConfirmVisible] = (0, import_react13.useState)(false);
-  const hasProgressRef = (0, import_react13.useRef)(hasProgress);
-  (0, import_react13.useEffect)(() => {
+  const [confirmVisible, setConfirmVisible] = (0, import_react14.useState)(false);
+  const hasProgressRef = (0, import_react14.useRef)(hasProgress);
+  (0, import_react14.useEffect)(() => {
     hasProgressRef.current = hasProgress;
   });
-  const onConfirmedBackRef = (0, import_react13.useRef)(onConfirmedBack);
-  (0, import_react13.useEffect)(() => {
+  const onConfirmedBackRef = (0, import_react14.useRef)(onConfirmedBack);
+  (0, import_react14.useEffect)(() => {
     onConfirmedBackRef.current = onConfirmedBack;
   });
-  const requestBack = (0, import_react13.useCallback)(() => {
+  const requestBack = (0, import_react14.useCallback)(() => {
     if (hasProgressRef.current()) setConfirmVisible(true);
     else onConfirmedBackRef.current();
   }, []);
-  const cancelBack = (0, import_react13.useCallback)(() => setConfirmVisible(false), []);
+  const cancelBack = (0, import_react14.useCallback)(() => setConfirmVisible(false), []);
   return { confirmVisible, requestBack, cancelBack };
 }
-
-// src/useZoneClampedAlign.ts
-var import_split_screen = require("@tastic/split-screen");
-var import_react14 = require("react");
-var import_react_native30 = require("react-native");
-var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
-var EDGE_MARGIN2 = 12;
-function useZoneClampedAlign(open, contentWidth, contentHeight, rotation = 0) {
-  const auto = useAutoAlign(open, contentWidth, contentHeight, rotation);
-  const zone = (0, import_split_screen.useZoneBounds)();
-  const { height: windowHeight } = (0, import_react_native30.useWindowDimensions)();
-  const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
-  const shouldMeasure = open && auto.measured && zone !== null;
-  const [ownBounds, setOwnBounds] = (0, import_react14.useState)(null);
-  const [prevShouldMeasure, setPrevShouldMeasure] = (0, import_react14.useState)(shouldMeasure);
-  if (shouldMeasure !== prevShouldMeasure) {
-    setPrevShouldMeasure(shouldMeasure);
-    setOwnBounds(null);
-  }
-  (0, import_react14.useEffect)(() => {
-    if (!shouldMeasure) return;
-    auto.triggerRef.current?.measureInWindow((_x, y, _width, height) => {
-      const belowShared = zone.zoneSide === "belowShared";
-      const awayRoom = belowShared ? windowHeight - insets.bottom - (y + height) - EDGE_MARGIN2 : y - insets.top - EDGE_MARGIN2;
-      const towardRoom = belowShared ? y - zone.sharedEdgeY - EDGE_MARGIN2 : zone.sharedEdgeY - (y + height) - EDGE_MARGIN2;
-      const useToward = contentHeight > awayRoom && towardRoom > awayRoom;
-      let awaySide = belowShared ? "below" : "above";
-      let towardSide = belowShared ? "above" : "below";
-      if (zone.rotated) {
-        awaySide = awaySide === "above" ? "below" : "above";
-        towardSide = towardSide === "above" ? "below" : "above";
-      }
-      setOwnBounds({ maxHeight: Math.max(useToward ? towardRoom : awayRoom, 0), verticalAlign: useToward ? towardSide : awaySide });
-    });
-  }, [shouldMeasure, zone, auto.triggerRef, contentHeight, windowHeight, insets.top, insets.bottom]);
-  if (!zone) return auto;
-  if (!ownBounds) return { ...auto, measured: false };
-  return { ...auto, maxHeight: ownBounds.maxHeight, measured: auto.measured, verticalAlign: ownBounds.verticalAlign };
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AchievementCatalogSection,
@@ -1937,6 +1946,7 @@ function useZoneClampedAlign(open, contentWidth, contentHeight, rotation = 0) {
   getCpuDifficultyPopoverId,
   getInlineColorPickerContentSize,
   getLabeledDropdownContentHeight,
+  getProfilePopoverId,
   getStaggeredWordDuration,
   isCompactDialogHeight,
   loadSkiaWeb,

package/dist/index.mjs

@@ -19,7 +19,7 @@ import {
   UpdateDialog,
   getStaggeredWordDuration,
   useCompactDialog
-} from "./chunk-DK3HOZC5.mjs";
+} from "./chunk-UOA35OWJ.mjs";
 import {
   COMPACT_DIALOG_HEIGHT,
   DialogHeader,
@@ -683,7 +683,7 @@ function loadSkiaWeb() {
 }
 
 // src/PlayerSetupPanel.tsx
-import { ProfilePicker } from "@tastic/profile";
+import { getOptionPickerContentSize, getProfilePickerContentSize, OptionPicker, ProfilePicker } from "@tastic/profile";
 import { StyleSheet as StyleSheet8, View as View8 } from "react-native";
 import { Text as Text6 } from "react-native-paper";
 
@@ -721,26 +721,73 @@ function usePopoverHost() {
   return { openId, toggle, close };
 }
 
+// src/useZoneClampedAlign.ts
+import { useZoneBounds } from "@tastic/split-screen";
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useWindowDimensions as useWindowDimensions3 } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+var EDGE_MARGIN2 = 12;
+function useZoneClampedAlign(open, contentWidth, contentHeight, rotation = 0) {
+  const auto = useAutoAlign(open, contentWidth, contentHeight, rotation);
+  const zone = useZoneBounds();
+  const { height: windowHeight } = useWindowDimensions3();
+  const insets = useSafeAreaInsets();
+  const shouldMeasure = open && auto.measured && zone !== null;
+  const [ownBounds, setOwnBounds] = useState3(null);
+  const [prevShouldMeasure, setPrevShouldMeasure] = useState3(shouldMeasure);
+  if (shouldMeasure !== prevShouldMeasure) {
+    setPrevShouldMeasure(shouldMeasure);
+    setOwnBounds(null);
+  }
+  useEffect2(() => {
+    if (!shouldMeasure) return;
+    auto.triggerRef.current?.measureInWindow((_x, y, _width, height) => {
+      const belowShared = zone.zoneSide === "belowShared";
+      const awayRoom = belowShared ? windowHeight - insets.bottom - (y + height) - EDGE_MARGIN2 : y - insets.top - EDGE_MARGIN2;
+      const towardRoom = belowShared ? y - zone.sharedEdgeY - EDGE_MARGIN2 : zone.sharedEdgeY - (y + height) - EDGE_MARGIN2;
+      const useToward = contentHeight > awayRoom && towardRoom > awayRoom;
+      let awaySide = belowShared ? "below" : "above";
+      let towardSide = belowShared ? "above" : "below";
+      if (zone.rotated) {
+        awaySide = awaySide === "above" ? "below" : "above";
+        towardSide = towardSide === "above" ? "below" : "above";
+      }
+      setOwnBounds({ maxHeight: Math.max(useToward ? towardRoom : awayRoom, 0), verticalAlign: useToward ? towardSide : awaySide });
+    });
+  }, [shouldMeasure, zone, auto.triggerRef, contentHeight, windowHeight, insets.top, insets.bottom]);
+  if (!zone) return auto;
+  if (!ownBounds) return { ...auto, measured: false };
+  return { ...auto, maxHeight: ownBounds.maxHeight, measured: auto.measured, verticalAlign: ownBounds.verticalAlign };
+}
+
 // src/PlayerSetupPanel.tsx
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function getColorPopoverId(idPrefix) {
   return `${idPrefix}-color`;
 }
+function getProfilePopoverId(idPrefix) {
+  return `${idPrefix}-profile`;
+}
 function getCpuDifficultyPopoverId(idPrefix) {
   return `${idPrefix}-difficulty`;
 }
-function PlayerSetupPanel({ 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" }) {
+function PlayerSetupPanel({ idPrefix, host, label, labelFontFamily, color, onColorChange, swatches, takenColor, allowSwapTaken, colorCaption, showColor = true, colorAlignOverride, colorRotation, isHuman, secondPicker, secondPickerId, ready, onToggleReady, dark, showReadyButton = true, profiles, selectedProfileId, takenProfileId, guestLabel, onProfileSelect, onManageProfiles, cpuDifficulty, cpuDifficultyOptions, onCpuDifficultyChange, humanIcon = "face-man", cpuIcon = "robot" }) {
   const ownHost = usePopoverHost();
   const popover = host ?? ownHost;
   const ownPopoverOpen = popover.openId?.startsWith(`${idPrefix}-`) ?? false;
   const pickerRowPopoverOpen = popover.openId === getColorPopoverId(idPrefix) || secondPickerId !== void 0 && popover.openId === secondPickerId;
   const showProfilePicker = isHuman && profiles !== void 0 && !!onProfileSelect;
   const showCpuDifficulty = !isHuman && cpuDifficulty !== void 0 && cpuDifficultyOptions !== void 0 && !!onCpuDifficultyChange;
+  const seatButton = showProfilePicker || showCpuDifficulty;
   const selectedProfile = profiles?.find((p) => p.id === selectedProfileId) ?? null;
+  const colorSection = showColor ? { value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, caption: showProfilePicker && selectedProfile ? colorCaption : void 0 } : void 0;
+  const seatPickerId = showProfilePicker ? getProfilePopoverId(idPrefix) : getCpuDifficultyPopoverId(idPrefix);
+  const seatPickerSize = showProfilePicker ? getProfilePickerContentSize(profiles.length, !!onManageProfiles, colorSection) : getOptionPickerContentSize(cpuDifficultyOptions?.length ?? 0, colorSection);
+  const seatPickerAlign = useZoneClampedAlign(seatButton && popover.openId === seatPickerId, seatPickerSize.width, seatPickerSize.height);
   return /* @__PURE__ */ jsxs7(View8, { style: [styles8.panel, ownPopoverOpen && styles8.panelOpen], children: [
-    showProfilePicker ? /* @__PURE__ */ jsx10(ProfilePicker, { idPrefix, host: popover, profiles, selectedId: selectedProfileId ?? null, takenId: takenProfileId, color, dark, guestLabel: guestLabel ?? "GUEST", onSelect: (profile) => onProfileSelect?.(profile), onManage: onManageProfiles }) : showCpuDifficulty ? /* @__PURE__ */ jsx10(LabeledDropdown, { id: getCpuDifficultyPopoverId(idPrefix), host: popover, options: cpuDifficultyOptions, value: cpuDifficulty, onChange: onCpuDifficultyChange, color, dark, alignOverride: cpuDifficultyAlignOverride }) : label && /* @__PURE__ */ jsx10(Text6, { variant: "labelSmall", style: { color, fontFamily: labelFontFamily }, children: label }),
-    /* @__PURE__ */ jsxs7(View8, { style: [styles8.pickerRow, pickerRowPopoverOpen && styles8.pickerRowOpen], children: [
-      /* @__PURE__ */ jsx10(InlineColorPicker, { id: getColorPopoverId(idPrefix), host: popover, value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, alignOverride: colorAlignOverride, rotation: colorRotation, dark, tag: isHuman ? selectedProfile?.tag : void 0, icon: isHuman ? humanIcon : cpuIcon }),
+    showProfilePicker ? /* @__PURE__ */ jsx10(ProfilePicker, { idPrefix, host: popover, profiles, selectedId: selectedProfileId ?? null, takenId: takenProfileId, color, dark, guestLabel: guestLabel ?? "GUEST", onSelect: (profile) => onProfileSelect?.(profile), onManage: onManageProfiles, colorSection, alignOverride: seatPickerAlign }) : showCpuDifficulty ? /* @__PURE__ */ jsx10(OptionPicker, { id: getCpuDifficultyPopoverId(idPrefix), host: popover, options: cpuDifficultyOptions, value: cpuDifficulty, onChange: onCpuDifficultyChange, color, dark, icon: cpuIcon, colorSection, alignOverride: seatPickerAlign }) : label && /* @__PURE__ */ jsx10(Text6, { variant: "labelSmall", style: { color, fontFamily: labelFontFamily }, children: label }),
+    (!seatButton || secondPicker) && /* @__PURE__ */ jsxs7(View8, { style: [styles8.pickerRow, pickerRowPopoverOpen && styles8.pickerRowOpen], children: [
+      !seatButton && /* @__PURE__ */ jsx10(InlineColorPicker, { id: getColorPopoverId(idPrefix), host: popover, value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, alignOverride: colorAlignOverride, rotation: colorRotation, dark, tag: isHuman ? selectedProfile?.tag : void 0, icon: isHuman ? humanIcon : cpuIcon }),
       secondPicker
     ] }),
     isHuman && showReadyButton && onToggleReady && /* @__PURE__ */ jsx10(ReadyButton, { color, ready: ready ?? false, onToggleReady })
@@ -757,9 +804,9 @@ var styles8 = StyleSheet8.create({
   panelOpen: {
     zIndex: 100
   },
-  // 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.
+  // Same gap as `panel`'s own vertical rhythm, reused horizontally - the fallback color swatch and
+  // (when present) secondPicker sit side by side within this row instead of stacked in the panel's
+  // own column.
   pickerRow: {
     alignItems: "center",
     flexDirection: "row",
@@ -816,15 +863,15 @@ var styles9 = StyleSheet10.create({
 });
 
 // src/useQuitConfirmation.ts
-import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
 function useQuitConfirmation(hasProgress, onConfirmedBack) {
-  const [confirmVisible, setConfirmVisible] = useState3(false);
+  const [confirmVisible, setConfirmVisible] = useState4(false);
   const hasProgressRef = useRef2(hasProgress);
-  useEffect2(() => {
+  useEffect3(() => {
     hasProgressRef.current = hasProgress;
   });
   const onConfirmedBackRef = useRef2(onConfirmedBack);
-  useEffect2(() => {
+  useEffect3(() => {
     onConfirmedBackRef.current = onConfirmedBack;
   });
   const requestBack = useCallback3(() => {
@@ -834,45 +881,6 @@ function useQuitConfirmation(hasProgress, onConfirmedBack) {
   const cancelBack = useCallback3(() => setConfirmVisible(false), []);
   return { confirmVisible, requestBack, cancelBack };
 }
-
-// src/useZoneClampedAlign.ts
-import { useZoneBounds } from "@tastic/split-screen";
-import { useEffect as useEffect3, useState as useState4 } from "react";
-import { useWindowDimensions as useWindowDimensions3 } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-var EDGE_MARGIN2 = 12;
-function useZoneClampedAlign(open, contentWidth, contentHeight, rotation = 0) {
-  const auto = useAutoAlign(open, contentWidth, contentHeight, rotation);
-  const zone = useZoneBounds();
-  const { height: windowHeight } = useWindowDimensions3();
-  const insets = useSafeAreaInsets();
-  const shouldMeasure = open && auto.measured && zone !== null;
-  const [ownBounds, setOwnBounds] = useState4(null);
-  const [prevShouldMeasure, setPrevShouldMeasure] = useState4(shouldMeasure);
-  if (shouldMeasure !== prevShouldMeasure) {
-    setPrevShouldMeasure(shouldMeasure);
-    setOwnBounds(null);
-  }
-  useEffect3(() => {
-    if (!shouldMeasure) return;
-    auto.triggerRef.current?.measureInWindow((_x, y, _width, height) => {
-      const belowShared = zone.zoneSide === "belowShared";
-      const awayRoom = belowShared ? windowHeight - insets.bottom - (y + height) - EDGE_MARGIN2 : y - insets.top - EDGE_MARGIN2;
-      const towardRoom = belowShared ? y - zone.sharedEdgeY - EDGE_MARGIN2 : zone.sharedEdgeY - (y + height) - EDGE_MARGIN2;
-      const useToward = contentHeight > awayRoom && towardRoom > awayRoom;
-      let awaySide = belowShared ? "below" : "above";
-      let towardSide = belowShared ? "above" : "below";
-      if (zone.rotated) {
-        awaySide = awaySide === "above" ? "below" : "above";
-        towardSide = towardSide === "above" ? "below" : "above";
-      }
-      setOwnBounds({ maxHeight: Math.max(useToward ? towardRoom : awayRoom, 0), verticalAlign: useToward ? towardSide : awaySide });
-    });
-  }, [shouldMeasure, zone, auto.triggerRef, contentHeight, windowHeight, insets.top, insets.bottom]);
-  if (!zone) return auto;
-  if (!ownBounds) return { ...auto, measured: false };
-  return { ...auto, maxHeight: ownBounds.maxHeight, measured: auto.measured, verticalAlign: ownBounds.verticalAlign };
-}
 export {
   AchievementCatalogSection,
   AchievementRow,
@@ -911,6 +919,7 @@ export {
   getCpuDifficultyPopoverId,
   getInlineColorPickerContentSize,
   getLabeledDropdownContentHeight,
+  getProfilePopoverId,
   getStaggeredWordDuration,
   isCompactDialogHeight,
   loadSkiaWeb,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.20.0",
+  "version": "0.21.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",
@@ -85,16 +85,16 @@
   "prettier": "@infinitetoken/eslint-config/prettier",
   "devDependencies": {
     "@infinitetoken/eslint-config": "^0.2.0",
-    "@infinitetoken/jest-config": "^0.4.0",
-    "@infinitetoken/tsconfig": "^0.5.0",
-    "@rific/auto-paper": "^0.13.2",
+    "@infinitetoken/jest-config": "^0.5.2",
+    "@infinitetoken/tsconfig": "^0.6.0",
+    "@rific/auto-paper": "^0.13.3",
     "@rific/core": "^0.3.1",
     "@rific/feedback-press": "^0.13.0",
     "@rific/updater": "^0.7.1",
-    "@shopify/react-native-skia": "^2.6.2",
+    "@shopify/react-native-skia": "^2.14.0",
     "@tastic/achievements": "^0.6.0",
     "@tastic/core": "^0.14.0",
-    "@tastic/profile": "^0.13.0",
+    "@tastic/profile": "^0.15.0",
     "@tastic/split-screen": "^0.5.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
@@ -108,10 +108,10 @@
     "prettier": "^3.8.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-native": "^0.86.3",
+    "react-native": "^0.88.0",
     "react-native-paper": "^5.15.2",
-    "react-native-reanimated": "^4.5.1",
-    "react-native-safe-area-context": "^5.10.0",
+    "react-native-reanimated": "^4.7.1",
+    "react-native-safe-area-context": "^5.10.1",
     "tsup": "^8.0.0",
     "typescript": "^6.0.3"
   },
@@ -122,7 +122,7 @@
     "@shopify/react-native-skia": ">=2.6.0",
     "@tastic/achievements": ">=0.2.0",
     "@tastic/core": ">=0.12.0",
-    "@tastic/profile": ">=0.4.0",
+    "@tastic/profile": ">=0.15.0",
     "@tastic/split-screen": ">=0.5.0",
     "react": ">=19.0.0",
     "react-native": ">=0.76.0",

package/src/BaseStatsScreen.tsx

@@ -1,8 +1,8 @@
-import { useAutoPaperTheme } from '@rific/auto-paper'
+import { FadingScrollView, useAutoPaperTheme } from '@rific/auto-paper'
 import { Button, IconButton } from '@rific/feedback-press'
 import { useRotation, type ViewRotation } from '@tastic/core'
 import { ReactNode, useState } from 'react'
-import { type Insets, ScrollView, StyleSheet, View } from 'react-native'
+import { type Insets, StyleSheet, View } from 'react-native'
 import { Text } from 'react-native-paper'
 
 import { ConfirmDialog } from './ConfirmDialog'
@@ -101,7 +101,9 @@ export function BaseStatsScreen({ rotation: rotationOverride, title = 'Achieveme
         </Text>
       </View>
 
-      <ScrollView style={styles.scrollView} contentContainerStyle={[styles.content, { paddingBottom: 32 + insets.bottom }]} showsVerticalScrollIndicator={false}>
+      {/* Fades out at an edge while there is more past it, the same cue as the Settings sheet's rows and the
+      Profiles screen's (Jay, 2026-10-16: every scrolling screen alike). */}
+      <FadingScrollView style={styles.scrollView} contentContainerStyle={[styles.content, { paddingBottom: 32 + insets.bottom }]} showsVerticalScrollIndicator={false}>
         {children}
 
         {showReset && (
@@ -109,7 +111,7 @@ export function BaseStatsScreen({ rotation: rotationOverride, title = 'Achieveme
             {resetLabel}
           </Button>
         )}
-      </ScrollView>
+      </FadingScrollView>
 
       <ConfirmDialog
         visible={confirmResetVisible}
@@ -147,7 +149,7 @@ const styles = StyleSheet.create({
   resetButton: {
     marginTop: 16
   },
-  // Bounds the ScrollView to the space `container`'s flex:1 actually gives it - without this, a
+  // Bounds the scroller (FadingScrollView puts it on its outer box) to the space `container`'s flex:1 actually gives it - without this, a
   // ScrollView with only a contentContainerStyle isn't reliably height-constrained on native (it
   // can render at its full unclipped content height instead of the screen's), which leaves the
   // header's back button touch target unreliable underneath it.

package/src/PlayerSetupPanel.tsx

@@ -1,31 +1,35 @@
 import { SeedColor } from '@rific/auto-paper'
-import { Profile, ProfilePicker } from '@tastic/profile'
+import { getOptionPickerContentSize, getProfilePickerContentSize, OptionPicker, Profile, ProfilePicker, type ProfilePickerColorSection } from '@tastic/profile'
 import { ReactNode } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Text } from 'react-native-paper'
 
 import { InlineColorPicker } from './InlineColorPicker'
-import { LabeledDropdown, LabeledDropdownOption } from './LabeledDropdown'
+import { LabeledDropdownOption } from './LabeledDropdown'
 import { ReadyButton } from './ReadyButton'
 import { AlignResult, PopoverRotation } from './useAutoAlign'
 import { PopoverHost, usePopoverHost } from './usePopoverHost'
+import { useZoneClampedAlign } from './useZoneClampedAlign'
 
-// 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
+// This panel's own internal popover ids, derived from idPrefix - exported so a caller that needs to
+// know whether one of them is currently open (e.g. to elevate the zone or row holding the panel)
+// 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
 // itself, which have no prop of their own to name their id with.
 export function getColorPopoverId(idPrefix: string): string {
   return `${idPrefix}-color`
 }
+// The seat button's dropdown on a human seat (@tastic/profile's ProfilePicker opens under
+// `${idPrefix}-profile`). A CPU seat's opens under getCpuDifficultyPopoverId.
+export function getProfilePopoverId(idPrefix: string): string {
+  return `${idPrefix}-profile`
+}
 export function getCpuDifficultyPopoverId(idPrefix: string): string {
   return `${idPrefix}-difficulty`
 }
 
 export interface PlayerSetupPanelProps<C extends string = string> {
-  // Namespaces this panel's popover ids ('color', whatever secondPickerId names, 'difficulty') so
+  // Namespaces this panel's popover ids ('profile', 'difficulty', 'color', whatever secondPickerId names) so
   // two panels can safely share one host (see `host` below) without their ids colliding.
   idPrefix: string
   // Shared popover host, when this panel's own popovers should be mutually exclusive with another
@@ -35,7 +39,7 @@ export interface PlayerSetupPanelProps<C extends string = string> {
   // real people editing at once is the point.
   host?: PopoverHost
   label?: string
-  // Applied only to the plain `label` fallback text below (ProfilePicker/LabeledDropdown render
+  // Applied only to the plain `label` fallback text below (ProfilePicker/OptionPicker render
   // 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.
@@ -44,21 +48,24 @@ export interface PlayerSetupPanelProps<C extends string = 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.
+  // removed from it entirely. Unless allowSwapTaken is set (the other seat is the CPU), which lets
+  // it be picked so the caller can swap the two - see InlineColorPicker's own doc.
   takenColor?: string
   allowSwapTaken?: boolean
-  // 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.
+  // A short line under the seat button's Color row while a profile is selected, saying where the
+  // color applies (e.g. 'Snake only': the pick is kept in this game, not on the profile). Left out
+  // for a guest or the CPU, who have no color anywhere else.
+  colorCaption?: string
+  // False leaves the Color row out of the seat button's dropdown (e.g. a CPU seat set to "None",
+  // with no second player to color). Defaults to true.
+  showColor?: boolean
+  // The fallback color swatch's placement and rotation, passed straight through to its
+  // InlineColorPicker. That swatch is only drawn on a seat with neither a profile picker nor a CPU
+  // difficulty picker (see the header below); the seat button places its own dropdown.
   colorAlignOverride?: AlignResult
-  // 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 under the seat button 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
@@ -69,7 +76,7 @@ export interface PlayerSetupPanelProps<C extends string = string> {
   secondPicker?: ReactNode
   // 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
+  // react to secondPicker's popover the same way it already does for the fallback swatch's, without
   // this component needing any opinion on what secondPicker actually renders. Omit when secondPicker
   // has no popover of its own, or isn't provided at all.
   secondPickerId?: string
@@ -82,7 +89,7 @@ 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 seat button 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
@@ -95,29 +102,30 @@ export interface PlayerSetupPanelProps<C extends string = string> {
   cpuDifficulty?: C
   cpuDifficultyOptions?: LabeledDropdownOption<C>[]
   onCpuDifficultyChange?: (value: C) => void
-  // 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
-  // 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.
+  // The icon on a non-human seat's button chip, and on the fallback color swatch for a human vs. a
+  // non-human seat (overridden there by a selected profile's own `tag`). A human seat's button chip
+  // shows the selected profile's tag, or ProfilePicker's guest icon. 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.
   humanIcon?: string
   cpuIcon?: string
 }
 
-// One panel per player slot in a local-multiplayer loadout/lobby screen: a name header (a saved
-// profile switcher for a human seat, a CPU-difficulty picker for a non-human one, or a plain label
-// when neither applies), a color picker optionally paired with a second, per-app picker (see
-// `secondPicker`'s own doc), and a Ready toggle for human seats. Ported from five apps' own
-// near-identical PlayerSetupPanel.tsx/LobbyPlayerPanel.tsx (AirHockey, BoxHockey, Pong, LightCycles,
-// Snake), which had all independently converged on this exact skeleton.
+// One panel per player slot in a local-multiplayer loadout/lobby screen: one seat button, an
+// optional second, per-app picker under it (see `secondPicker`'s own doc), and a Ready toggle for
+// human seats. A human seat's button is @tastic/profile's ProfilePicker and a CPU seat's is its
+// OptionPicker (the difficulty levels), each with the seat's color behind a Color row at the top of
+// the same dropdown: Solitaire's player button, made the fleet's seat control (Jay, 2026-10-16). It
+// used to be a profile (or difficulty) dropdown with a separate color swatch beside it, which read
+// as two unrelated things. A seat with neither picker wired keeps the plain label and the separate
+// swatch. Ported from five apps' own near-identical PlayerSetupPanel.tsx/LobbyPlayerPanel.tsx
+// (AirHockey, BoxHockey, Pong, LightCycles, 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
-// 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>) {
+// Owns its own popover host shared by its own pickers unless a `host` is 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, colorCaption, showColor = true, colorAlignOverride, colorRotation, isHuman, secondPicker, secondPickerId, ready, onToggleReady, dark, showReadyButton = true, profiles, selectedProfileId, takenProfileId, guestLabel, onProfileSelect, onManageProfiles, cpuDifficulty, cpuDifficultyOptions, onCpuDifficultyChange, 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
@@ -126,22 +134,33 @@ export function PlayerSetupPanel<C extends string = string>({ idPrefix, host, la
   // 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
-  // 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.
+  // itself (the fallback color swatch, 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
-  // profile rather than snapshotted at selection time, since a caller typically has no other
-  // editing surface for it on this same screen.
+  const seatButton = showProfilePicker || showCpuDifficulty
+  // 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
 
+  const colorSection: ProfilePickerColorSection | undefined = showColor ? { value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, caption: showProfilePicker && selectedProfile ? colorCaption : undefined } : undefined
+  // The seat button's dropdown is placed here rather than by the caller: inside a
+  // @tastic/split-screen zone (2 Player) it has to stay in that player's half, which
+  // useZoneClampedAlign does, and outside one it's useAutoAlign's own placement. Sized from the same
+  // section and rows the picker draws. Rotation 0, the same as the profile, color and difficulty
+  // dropdowns this button replaced were all placed with.
+  const seatPickerId = showProfilePicker ? getProfilePopoverId(idPrefix) : getCpuDifficultyPopoverId(idPrefix)
+  const seatPickerSize = showProfilePicker ? getProfilePickerContentSize(profiles!.length, !!onManageProfiles, colorSection) : getOptionPickerContentSize(cpuDifficultyOptions?.length ?? 0, colorSection)
+  const seatPickerAlign = useZoneClampedAlign(seatButton && popover.openId === seatPickerId, seatPickerSize.width, seatPickerSize.height)
+
   return (
     <View style={[styles.panel, ownPopoverOpen && styles.panelOpen]}>
       {showProfilePicker ? (
-        <ProfilePicker idPrefix={idPrefix} host={popover} profiles={profiles!} selectedId={selectedProfileId ?? null} takenId={takenProfileId} color={color} dark={dark} guestLabel={guestLabel ?? 'GUEST'} onSelect={(profile: Profile | null) => onProfileSelect?.(profile)} onManage={onManageProfiles} />
+        <ProfilePicker idPrefix={idPrefix} host={popover} profiles={profiles!} selectedId={selectedProfileId ?? null} takenId={takenProfileId} color={color} dark={dark} guestLabel={guestLabel ?? 'GUEST'} onSelect={(profile: Profile | null) => onProfileSelect?.(profile)} onManage={onManageProfiles} colorSection={colorSection} alignOverride={seatPickerAlign} />
       ) : showCpuDifficulty ? (
-        <LabeledDropdown id={getCpuDifficultyPopoverId(idPrefix)} host={popover} options={cpuDifficultyOptions!} value={cpuDifficulty!} onChange={onCpuDifficultyChange!} color={color} dark={dark} alignOverride={cpuDifficultyAlignOverride} />
+        <OptionPicker id={getCpuDifficultyPopoverId(idPrefix)} host={popover} options={cpuDifficultyOptions!} value={cpuDifficulty!} onChange={onCpuDifficultyChange!} color={color} dark={dark} icon={cpuIcon} colorSection={colorSection} alignOverride={seatPickerAlign} />
       ) : (
         label && (
           <Text variant='labelSmall' style={{ color, fontFamily: labelFontFamily }}>
@@ -150,14 +169,16 @@ 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
-        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} />
+      {(!seatButton || secondPicker) && (
+        <View style={[styles.pickerRow, pickerRowPopoverOpen && styles.pickerRowOpen]}>
+          {/* The fallback swatch, for a seat with no button: a human slot shows the selected
+          profile's own tag when it has one, falling back to humanIcon; a non-human slot always
+          falls back to cpuIcon. */}
+          {!seatButton && <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} />}
 
-        {secondPicker}
-      </View>
+          {secondPicker}
+        </View>
+      )}
 
       {isHuman && showReadyButton && onToggleReady && <ReadyButton color={color} ready={ready ?? false} onToggleReady={onToggleReady} />}
     </View>
@@ -175,9 +196,9 @@ const styles = StyleSheet.create({
   panelOpen: {
     zIndex: 100
   },
-  // 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.
+  // Same gap as `panel`'s own vertical rhythm, reused horizontally - the fallback color swatch and
+  // (when present) secondPicker sit side by side within this row instead of stacked in the panel's
+  // own column.
   pickerRow: {
     alignItems: 'center',
     flexDirection: 'row',

package/src/index.ts

@@ -16,7 +16,7 @@ export { getLabeledDropdownContentHeight, LABELED_DROPDOWN_POPOVER_WIDTH, Labele
 export { loadSkiaWeb } from './loadSkiaWeb'
 export { overlayActionStyles, overlayStyles } from './overlayCard'
 export { OverlayBackdrop, type OverlayBackdropProps, OverlayCard, type OverlayCardProps, type OverlayCardThemeColors, useOverlayCardColors } from './OverlaySurface'
-export { getColorPopoverId, getCpuDifficultyPopoverId, PlayerSetupPanel, type PlayerSetupPanelProps } from './PlayerSetupPanel'
+export { getColorPopoverId, getCpuDifficultyPopoverId, getProfilePopoverId, PlayerSetupPanel, type PlayerSetupPanelProps } from './PlayerSetupPanel'
 export { PopoverBody } from './PopoverBody'
 export { PressAwayOverlay } from './PressAwayOverlay'
 export { ReadyButton } from './ReadyButton'