@tastic/profile 0.12.0 → 0.14.0

package/src/IdentityChip.tsx

@@ -0,0 +1,58 @@
+import { getContrastColor } from '@rific/auto-paper'
+import { StyleSheet, View } from 'react-native'
+import { Icon, Text } from 'react-native-paper'
+
+// Presence check, not isValidTag's own full-string emoji validation (profilesValidation.ts) - this
+// only decides a font-size ratio, so it doesn't need that check's ZWJ/variation-selector precision,
+// just "does this tag contain a pictograph at all."
+const EMOJI_PATTERN = /\p{Extended_Pictographic}/u
+
+interface Props {
+  // The color drawn, exactly as given (no ProfileColorProvider transform: the caller has already
+  // decided what is drawn).
+  color: string
+  // Shown when non-empty, else `icon`.
+  tag?: string
+  icon: string
+  size: number
+  // See ProfileChip's `filled`.
+  filled?: boolean
+}
+
+// A filled circle with a tag (or an icon) in a contrast-safe color on top: the drawing behind
+// ProfileChip (a profile's own colors) and ProfilePicker's chip trigger (the live color in effect,
+// which may not be any profile's saved one).
+export function IdentityChip({ color, tag, icon, size, filled = true }: Props) {
+  const contrastColor = getContrastColor(color)
+  // 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 "J" still
+  // looks small for "🎮" at the identical size - this bumps emoji up to the icon's own ratio instead,
+  // since a single emoji is closer in visual weight to an icon glyph than to a line of text.
+  //
+  // Three letters don't fit across the circle at 0.4 in a wide bold face (DAD in Solitaire's DejaVu
+  // Serif Bold is a whole chip wide), and the web build ignores adjustsFontSizeToFit, so it cut
+  // them off there ("D..."); 0.32 fits them, with adjustsFontSizeToFit still the backstop on native.
+  const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : tag && Array.from(tag).length >= 3 ? 0.32 : 0.4)
+  return (
+    <View style={[styles.chip, { borderRadius: size / 2, height: size, width: size }, filled && { backgroundColor: color }]}>
+      {tag ? (
+        <Text style={[styles.tag, { color: contrastColor, fontSize: tagFontSize }]} numberOfLines={1} adjustsFontSizeToFit>
+          {tag}
+        </Text>
+      ) : (
+        <Icon source={icon} size={size * 0.6} color={contrastColor} />
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  chip: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  tag: {
+    fontWeight: '700',
+    paddingHorizontal: 2
+  }
+})

package/src/ProfileChip.tsx

@@ -1,15 +1,7 @@
-import { getContrastColor } from '@rific/auto-paper'
-import { StyleSheet, View } from 'react-native'
-import { Icon, Text } from 'react-native-paper'
-
+import { IdentityChip } from './IdentityChip'
 import { useProfileDisplayColor } from './ProfileColorContext'
 import { Profile } from './types'
 
-// Presence check, not isValidTag's own full-string emoji validation (profilesValidation.ts) - this
-// only decides a font-size ratio, so it doesn't need that check's ZWJ/variation-selector precision,
-// just "does this tag contain a pictograph at all."
-const EMOJI_PATTERN = /\p{Extended_Pictographic}/u
-
 interface Props {
   profile: Profile
   size?: number
@@ -32,32 +24,5 @@ interface Props {
 export function ProfileChip({ profile, size = 22, filled = true }: Props) {
   // The drawn color, not necessarily the saved one - see ProfileColorProvider.
   const color = useProfileDisplayColor(profile.color)
-  const contrastColor = getContrastColor(color)
-  // 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 "J" still
-  // looks small for "🎮" at the identical size - this bumps emoji up to the icon's own ratio instead,
-  // since a single emoji is closer in visual weight to an icon glyph than to a line of text.
-  const tagFontSize = size * (profile.tag && EMOJI_PATTERN.test(profile.tag) ? 0.6 : 0.4)
-  return (
-    <View style={[styles.chip, { borderRadius: size / 2, height: size, width: size }, filled && { backgroundColor: color }]}>
-      {profile.tag ? (
-        <Text style={[styles.tag, { color: contrastColor, fontSize: tagFontSize }]} numberOfLines={1} adjustsFontSizeToFit>
-          {profile.tag}
-        </Text>
-      ) : (
-        <Icon source='account' size={size * 0.6} color={contrastColor} />
-      )}
-    </View>
-  )
+  return <IdentityChip color={color} tag={profile.tag} icon='account' size={size} filled={filled} />
 }
-
-const styles = StyleSheet.create({
-  chip: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  tag: {
-    fontWeight: '700',
-    paddingHorizontal: 2
-  }
-})

package/src/ProfilePicker.tsx

@@ -1,10 +1,11 @@
-import { getContrastColor } from '@rific/auto-paper'
+import { defaultColors, FadingScrollView, getContrastColor, type SeedColor } from '@rific/auto-paper'
 import { TouchableRipple } from '@rific/feedback-press'
 import { PopoverBody, PopoverHost, PopoverRotation, useAutoAlign } from '@tastic/hud'
-import { RefObject, useMemo } from 'react'
-import { ScrollView, StyleSheet, View } from 'react-native'
+import { RefObject, useMemo, useState } from 'react'
+import { type LayoutChangeEvent, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
 import { Icon, Text } from 'react-native-paper'
 
+import { IdentityChip } from './IdentityChip'
 import { ProfileChip } from './ProfileChip'
 import { useProfileColorPreview } from './ProfileColorContext'
 import { Profile } from './types'
@@ -13,6 +14,58 @@ const TRIGGER_HEIGHT = 28
 const POPOVER_WIDTH = 220
 const ROW_HEIGHT = 36
 const LIST_PADDING = 8
+const MENU_BORDER_WIDTH = 2
+// A row's own inset from the list's padded edge (`rowInner`'s paddingHorizontal); the color page
+// lines its swatches up with it.
+const ROW_INSET = 12
+// The chip trigger (see `colorSection`): a CHIP_SIZE circle inside a pill padded by CHIP_TRIGGER_PADDING.
+const CHIP_SIZE = 32
+const CHIP_TRIGGER_PADDING = 6
+
+// The color row and page (see `colorSection`). Every height here is fixed (explicit line heights),
+// so getProfilePickerContentSize can size them exactly. Swatches are the same 28pt circles as
+// @tastic/hud's InlineColorPicker, spread to span exactly the rows' content width (5 across, so
+// 20 colors fill 4 full rows), with the same spacing between rows.
+const SWATCH_SIZE = 28
+const SWATCH_MIN_GAP = 6
+// The Color row: a plain row's height, or taller with a caption line under the label.
+const COLOR_ROW_CAPTIONED_HEIGHT = 48
+const COLOR_LABEL_LINE = 18
+const COLOR_CAPTION_LINE = 16
+// The divider under the Color row: 1pt plus 4pt above and below, the same as the Manage divider.
+const COLOR_ROW_DIVIDER = 9
+// The color page: a back row, then the grid with this much space above and below it.
+const GRID_TOP = 4
+const GRID_BOTTOM = 8
+const GRID_WIDTH = POPOVER_WIDTH - 2 * MENU_BORDER_WIDTH - 2 * LIST_PADDING - 2 * ROW_INSET
+const GRID_COLUMNS = Math.floor((GRID_WIDTH + SWATCH_MIN_GAP) / (SWATCH_SIZE + SWATCH_MIN_GAP))
+const GRID_GAP = (GRID_WIDTH - GRID_COLUMNS * SWATCH_SIZE) / (GRID_COLUMNS - 1)
+
+// A color choice behind a row at the top of the popover (see ProfilePicker's `colorSection`).
+export interface ProfilePickerColorSection {
+  // The raw seed color in effect - matched against each swatch's own value for the checkmark.
+  value: string
+  onChange: (hex: string) => void
+  // Transforms only what's drawn (each swatch's fill), leaving `value` and what `onChange` commits
+  // untouched - the same contract as @tastic/hud's InlineColorPicker `previewValue`, for a host
+  // that mutes or tints the seed before using it.
+  previewValue?: (hex: string) => string
+  swatches?: SeedColor[]
+  // The row's label, and the color page's heading. Defaults to 'Color'.
+  label?: string
+  // One short line under the row's label, e.g. where the color applies.
+  caption?: string
+}
+
+function colorRowHeight(caption: string | undefined) {
+  return caption ? COLOR_ROW_CAPTIONED_HEIGHT : ROW_HEIGHT
+}
+
+// The color page's content: the back row and the grid.
+function colorPageHeight(swatches: SeedColor[]) {
+  const rows = Math.ceil(swatches.length / GRID_COLUMNS)
+  return ROW_HEIGHT + GRID_TOP + rows * SWATCH_SIZE + (rows - 1) * GRID_GAP + GRID_BOTTOM
+}
 
 // A complete placement decision for the popover: which way it opens, how tall it may grow, whether
 // this open's measurement has landed yet, and the ref attached to the measured trigger.
@@ -35,16 +88,21 @@ export interface ProfilePickerContentSize {
 
 // The popover's content footprint for a given roster size: always POPOVER_WIDTH wide, tall enough
 // for the null/"guest" row + one row per profile + (when `hasManageRow`, i.e. when the picker is
-// given an `onManage`) the trailing Manage row, plus the list's own padding. This is the size
+// given an `onManage`) the trailing Manage row, plus the list's own padding. With a
+// `colorSection` (the same object handed to the picker works), it's the taller of the popover's
+// two pages, exactly: the list with the Color row and its divider on top, or the color page (a
+// back row and the swatches), so one placement fits whichever page is showing. This is the size
 // ProfilePicker hands to `useAutoAlign` - the ONE formula, used by the component itself (it leaves
 // out the menu's 2pt border and the Manage divider, ~13pt in all, so treat it as a placement
 // estimate, not a pixel-exact measurement) - exported
 // so a host supplying its own placement through `alignOverride` can size that placement hook (its
 // own useAutoAlign/useZoneClampedAlign call) to match the popover it is actually positioning,
 // instead of copying these constants and drifting whenever they change here.
-export function getProfilePickerContentSize(profileCount: number, hasManageRow = false): ProfilePickerContentSize {
+export function getProfilePickerContentSize(profileCount: number, hasManageRow = false, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize {
   const rowCount = profileCount + 1 + (hasManageRow ? 1 : 0)
-  return { width: POPOVER_WIDTH, height: LIST_PADDING * 2 + rowCount * ROW_HEIGHT }
+  const list = rowCount * ROW_HEIGHT + (colorSection ? colorRowHeight(colorSection.caption) + COLOR_ROW_DIVIDER : 0)
+  const content = colorSection ? Math.max(list, colorPageHeight(colorSection.swatches ?? defaultColors)) : list
+  return { width: POPOVER_WIDTH, height: LIST_PADDING * 2 + content }
 }
 
 interface ProfilePickerProps<P extends Profile> {
@@ -102,6 +160,21 @@ interface ProfilePickerProps<P extends Profile> {
   // entirely. This component never manages profiles itself (see ProfilesManager for that); this is
   // selection-only.
   onManage?: () => void
+  // Puts a Color row at the top of the popover, above the profile rows, and turns the trigger into
+  // one button that leads with a chip: a circle in `color` (the color in effect) with the selected
+  // profile's tag (`nullIcon` for the null selection), then the name and the chevron. For a host
+  // where the player's color and their profile are one control (Solitaire's Home), instead of a
+  // separate color trigger beside the name that read as a different thing. The Color row swaps the
+  // popover's contents for the color page (a back row, then the swatches); picking a swatch calls
+  // `onChange` and stays on that page, so the change can be seen behind it and another tried. A
+  // press away closes the whole popover, and the next open starts on the list again. The selected
+  // profile's own color, when it's one of the swatches, carries a small dot while another color is
+  // in effect, as the way back to it. Omit for the plain name trigger and a rows-only popover,
+  // exactly as before.
+  colorSection?: ProfilePickerColorSection
+  // Extra style for the trigger (its pressable box) - e.g. a background behind the chip trigger's
+  // pill. The chip trigger already pads itself and rounds into a pill.
+  triggerStyle?: StyleProp<ViewStyle>
 }
 
 // Generic over P (an app's own Profile type, richer than this package's base Profile) so that a
@@ -120,7 +193,7 @@ interface ProfilePickerProps<P extends Profile> {
 // it keeps this popover from needing its own destructive-delete confirmation. Fully prop-driven -
 // no internal profile-storage access of its own, so the host app stays the one place that reads
 // its own persistence hook.
-export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation = 0, guestLabel, nullLabel = 'Player', nullIcon = 'account-off-outline', onSelect, onManage }: ProfilePickerProps<P>) {
+export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation = 0, guestLabel, nullLabel = 'Player', nullIcon = 'account-off-outline', onSelect, onManage, colorSection, triggerStyle }: ProfilePickerProps<P>) {
   const id = `${idPrefix}-profile`
   // A selected row fills with the profile's drawn color, the same one its ProfileChip would show.
   const colorPreview = useProfileColorPreview()
@@ -133,7 +206,7 @@ export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, sel
   // most from staying scannable once there are more than a handful of saved profiles.
   const sortedProfiles = useMemo(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles])
   // Null row + each saved profile + (if passed) the manage row.
-  const { width: contentWidth, height: contentHeight } = getProfilePickerContentSize(profiles.length, !!onManage)
+  const { width: contentWidth, height: contentHeight } = getProfilePickerContentSize(profiles.length, !!onManage, colorSection)
   // Always called, even when `alignOverride` is supplied and this result goes unused - hooks can't
   // be conditional (see @tastic/hud's InlineColorPicker for the identical pattern). With an
   // override its triggerRef is never attached, so this hook's own measurement is a no-op.
@@ -158,20 +231,42 @@ export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, sel
     onManage?.()
   }
 
+  // The chip trigger is a whole pill, so the caret points at its middle: PopoverBody places the
+  // caret half a `triggerSize` in from the side the popover is aligned to, so the pill's own width
+  // centers it whichever way the popover opens. The plain trigger keeps TRIGGER_HEIGHT, as before.
+  const chipTrigger = !!colorSection
+  const [triggerWidth, setTriggerWidth] = useState(0)
+  const handleAnchorLayout = chipTrigger ? (e: LayoutChangeEvent) => setTriggerWidth(e.nativeEvent.layout.width) : undefined
+  // Which page the popover shows. Reset on every press of the trigger, so an open always starts on
+  // the list (a press away closes the popover without coming back through here).
+  const [colorPage, setColorPage] = useState(false)
+  const handleTriggerPress = () => {
+    setColorPage(false)
+    host.toggle(id)
+  }
+  const triggerLabel = (selectedProfile?.name ?? guestLabel).toUpperCase()
+
   return (
-    <View style={[styles.anchor, open && styles.anchorOpen]}>
-      <TouchableRipple onPress={() => host.toggle(id)} style={styles.trigger}>
-        <View ref={triggerRef} collapsable={false} style={styles.triggerInner}>
-          <Text style={[styles.triggerLabel, { color }]} numberOfLines={1}>
-            {(selectedProfile?.name ?? guestLabel).toUpperCase()}
+    <View style={[styles.anchor, open && styles.anchorOpen]} onLayout={handleAnchorLayout}>
+      <TouchableRipple onPress={handleTriggerPress} borderless={chipTrigger} style={[styles.trigger, chipTrigger && styles.chipTrigger, triggerStyle]} accessibilityRole='button' accessibilityLabel={triggerLabel}>
+        <View ref={triggerRef} collapsable={false} style={chipTrigger ? styles.chipTriggerInner : styles.triggerInner}>
+          {chipTrigger && <IdentityChip color={color} tag={selectedProfile?.tag} icon={selectedProfile ? 'account' : nullIcon} size={CHIP_SIZE} />}
+          {/* The chip trigger's name and chevron are plain fg: the chip carries the color, and a muted
+          color on the host's pill read dim. The plain trigger keeps the color, which is what tells a
+          multi-seat game's seats apart. */}
+          <Text style={[styles.triggerLabel, { color: chipTrigger ? fg : color }]} numberOfLines={1}>
+            {triggerLabel}
           </Text>
-          <Icon source='menu-down' size={16} color={color} />
+          <Icon source='menu-down' size={16} color={chipTrigger ? fg : color} />
         </View>
       </TouchableRipple>
 
       {/* Gated on `measured`, not just `open` - see InlineColorPicker's identical fix. */}
-      <PopoverBody visible={open && measured} align={align} verticalAlign={verticalAlign} caretColor={menuBg} caretBorderColor={color} caretBorderWidth={2} triggerSize={TRIGGER_HEIGHT}>
-        <ScrollView
+      <PopoverBody visible={open && measured} align={align} verticalAlign={verticalAlign} caretColor={menuBg} caretBorderColor={color} caretBorderWidth={MENU_BORDER_WIDTH} triggerSize={chipTrigger ? triggerWidth : TRIGGER_HEIGHT}>
+        {/* The box (background, border, max height) is a plain View around the scroller, so
+        FadingScrollView's edge fade - the same cue as a dialog's scrolling rows - masks only the
+        rows, never the menu's own border or background. */}
+        <View
           style={[
             styles.menu,
             {
@@ -181,73 +276,149 @@ export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, sel
               maxHeight
             }
           ]}
-          contentContainerStyle={styles.menuContent}
-          showsVerticalScrollIndicator={false}
         >
-          {/* Selected row's own background fills entirely with its identity color (this seat's own
-          accent for the null row, the profile's own saved color otherwise) - matching how a
-          selected row reads elsewhere (see @tastic/hud's SectionedDropdown) rather than a checkmark
-          bolted onto an otherwise-plain row. */}
-          <TouchableRipple onPress={handleSelectGuest} style={[styles.row, selectedId === null && { backgroundColor: color }]}>
-            <View style={styles.rowInner}>
-              {/* Unfilled, matching a selected profile row's own ProfileChip treatment - no
-              background circle, but still the same fixed-size slot every row's icon/chip sits in
-              (see ProfileChip's own doc), so this row's icon stays lined up with every other row
-              regardless of selection. */}
-              <View style={styles.guestChip}>
-                <Icon source={nullIcon} size={13} color={selectedId === null ? getContrastColor(color) : fg} />
-              </View>
-              <Text style={[styles.rowLabel, { color: selectedId === null ? getContrastColor(color) : fg }]}>{nullLabel}</Text>
-            </View>
-          </TouchableRipple>
+          {/* Keyed by page, so swapping pages starts the new one scrolled to its top. */}
+          <FadingScrollView key={colorSection && colorPage ? 'color' : 'list'} contentContainerStyle={styles.menuContent} showsVerticalScrollIndicator={false}>
+            {colorSection && colorPage ? (
+              <ColorPage section={colorSection} profileColor={selectedProfile?.color} fg={fg} onBack={() => setColorPage(false)} />
+            ) : (
+              <>
+                {colorSection && <ColorRow section={colorSection} fg={fg} dividerColor={color} onPress={() => setColorPage(true)} />}
+                {/* Selected row's own background fills entirely with its identity color (this seat's own
+                accent for the null row, the profile's own saved color otherwise) - matching how a
+                selected row reads elsewhere (see @tastic/hud's SectionedDropdown) rather than a checkmark
+                bolted onto an otherwise-plain row. */}
+                <TouchableRipple onPress={handleSelectGuest} style={[styles.row, selectedId === null && { backgroundColor: color }]}>
+                  <View style={styles.rowInner}>
+                    {/* Unfilled, matching a selected profile row's own ProfileChip treatment - no
+                    background circle, but still the same fixed-size slot every row's icon/chip sits in
+                    (see ProfileChip's own doc), so this row's icon stays lined up with every other row
+                    regardless of selection. */}
+                    <View style={styles.guestChip}>
+                      <Icon source={nullIcon} size={13} color={selectedId === null ? getContrastColor(color) : fg} />
+                    </View>
+                    <Text style={[styles.rowLabel, { color: selectedId === null ? getContrastColor(color) : fg }]}>{nullLabel}</Text>
+                  </View>
+                </TouchableRipple>
 
-          {sortedProfiles.map((profile) => {
-            const taken = profile.id === takenId
-            const selected = selectedId === profile.id
-            const rowColor = colorPreview ? colorPreview(profile.color) : profile.color
-            return (
-              <TouchableRipple key={profile.id} disabled={taken} onPress={() => handleSelectExisting(profile)} style={[styles.row, selected && { backgroundColor: rowColor }]}>
-                <View style={[styles.rowInner, taken && styles.rowDisabled]}>
-                  {/* Unfilled on a selected row - its own background already fills with the
-                  profile's color, so a second circle behind the tag would just be a redundant badge
-                  where every other selected row in the app has plain icon+text instead. */}
-                  <ProfileChip profile={profile} filled={!selected} />
-                  <Text
-                    style={[
-                      styles.rowLabel,
-                      {
-                        color: selected ? getContrastColor(rowColor) : fg
-                      }
-                    ]}
-                    numberOfLines={1}
-                  >
-                    {profile.name}
-                  </Text>
-                </View>
-              </TouchableRipple>
-            )
-          })}
+                {sortedProfiles.map((profile) => {
+                  const taken = profile.id === takenId
+                  const selected = selectedId === profile.id
+                  const rowColor = colorPreview ? colorPreview(profile.color) : profile.color
+                  return (
+                    <TouchableRipple key={profile.id} disabled={taken} onPress={() => handleSelectExisting(profile)} style={[styles.row, selected && { backgroundColor: rowColor }]}>
+                      <View style={[styles.rowInner, taken && styles.rowDisabled]}>
+                        {/* Unfilled on a selected row - its own background already fills with the
+                        profile's color, so a second circle behind the tag would just be a redundant badge
+                        where every other selected row in the app has plain icon+text instead. */}
+                        <ProfileChip profile={profile} filled={!selected} />
+                        <Text
+                          style={[
+                            styles.rowLabel,
+                            {
+                              color: selected ? getContrastColor(rowColor) : fg
+                            }
+                          ]}
+                          numberOfLines={1}
+                        >
+                          {profile.name}
+                        </Text>
+                      </View>
+                    </TouchableRipple>
+                  )
+                })}
 
-          {onManage && (
-            <>
-              <View style={[styles.divider, { backgroundColor: color }]} />
-              {/* Tertiary - a navigation action, not another selectable identity in the list above
-              it, so it reads more like @tastic/hud's SectionedDropdown All/Clear footer button
-              (centered, bold, accent-colored) than a normal row. */}
-              <TouchableRipple onPress={handleManage} style={styles.row}>
-                <View style={styles.manageRowInner}>
-                  <Icon source='account-cog-outline' size={16} color={color} />
-                  <Text style={[styles.manageLabel, { color }]}>Manage</Text>
-                </View>
-              </TouchableRipple>
-            </>
-          )}
-        </ScrollView>
+                {onManage && (
+                  <>
+                    <View style={[styles.divider, { backgroundColor: color }]} />
+                    {/* Tertiary - a navigation action, not another selectable identity in the list above
+                    it, so it reads more like @tastic/hud's SectionedDropdown All/Clear footer button
+                    (centered, bold) than a normal row. The accent is on the icon only: a muted accent
+                    label on the menu's black read dim, almost disabled (2026-10-16). */}
+                    <TouchableRipple onPress={handleManage} style={styles.row}>
+                      <View style={styles.manageRowInner}>
+                        <Icon source='account-cog-outline' size={16} color={color} />
+                        <Text style={[styles.manageLabel, { color: fg }]}>Manage</Text>
+                      </View>
+                    </TouchableRipple>
+                  </>
+                )}
+              </>
+            )}
+          </FadingScrollView>
+        </View>
       </PopoverBody>
     </View>
   )
 }
 
+// The color section's heading, caption and swatch grid, then a divider before the profile rows.
+// The list page's top row: a swatch of the color in effect, the label (and caption), and a chevron
+// to the color page. A divider sets it apart from the selectable rows under it.
+function ColorRow({ section, fg, dividerColor, onPress }: { section: ProfilePickerColorSection; fg: string; dividerColor: string; onPress: () => void }) {
+  const { value, previewValue, label = 'Color', caption } = section
+  const drawn = previewValue ? previewValue(value) : value
+  return (
+    <>
+      <TouchableRipple onPress={onPress} style={[styles.row, { height: colorRowHeight(caption) }]} accessibilityRole='button' accessibilityLabel={caption ? `${label}, ${caption}` : label}>
+        <View style={styles.rowInner}>
+          <View style={[styles.colorRowSwatch, { backgroundColor: drawn }]} />
+          <View style={styles.colorRowText}>
+            <Text style={[styles.colorRowLabel, { color: fg }]} numberOfLines={1}>
+              {label}
+            </Text>
+            {caption ? (
+              <Text style={[styles.colorRowCaption, { color: fg }]} numberOfLines={1}>
+                {caption}
+              </Text>
+            ) : null}
+          </View>
+          <Icon source='chevron-right' size={18} color={fg} />
+        </View>
+      </TouchableRipple>
+      <View style={[styles.divider, { backgroundColor: dividerColor }]} />
+    </>
+  )
+}
+
+// The color page: a back row to the list, then the swatches. `profileColor` is the selected
+// profile's own color: its swatch carries a dot, so a player who has picked something else can find
+// their way back to it (the profile's row shows that color, but matching it to one of two similar
+// swatches by eye is guesswork). The check takes the dot's place on the swatch in effect, so the
+// dot only shows while the color in effect is another one.
+function ColorPage({ section, profileColor, fg, onBack }: { section: ProfilePickerColorSection; profileColor?: string; fg: string; onBack: () => void }) {
+  const { value, onChange, previewValue, swatches = defaultColors, label = 'Color' } = section
+  const displayFor = previewValue ?? ((hex: string) => hex)
+  return (
+    <>
+      <TouchableRipple onPress={onBack} style={styles.row} accessibilityRole='button' accessibilityLabel='Back'>
+        <View style={styles.rowInner}>
+          <View style={styles.guestChip}>
+            <Icon source='chevron-left' size={20} color={fg} />
+          </View>
+          <Text style={[styles.colorRowLabel, { color: fg }]} numberOfLines={1}>
+            {label}
+          </Text>
+        </View>
+      </TouchableRipple>
+      <View style={styles.swatches}>
+        {swatches.map((swatch) => {
+          const selected = swatch.value.toLowerCase() === value.toLowerCase()
+          const isProfileColor = !!profileColor && swatch.value.toLowerCase() === profileColor.toLowerCase()
+          const swatchDisplay = displayFor(swatch.value)
+          // The same swatch as @tastic/hud's InlineColorPicker: a filled circle, the selected one
+          // ringed and checked.
+          return (
+            <TouchableRipple key={swatch.value} onPress={() => onChange(swatch.value)} borderless style={[styles.swatch, { backgroundColor: swatchDisplay }, selected && styles.swatchSelected]} accessibilityRole='button' accessibilityLabel={isProfileColor ? `${swatch.label}, profile color` : swatch.label} accessibilityState={{ selected }}>
+              {selected ? <Icon source='check' size={16} color={getContrastColor(swatchDisplay)} /> : isProfileColor ? <View style={[styles.profileDot, { backgroundColor: getContrastColor(swatchDisplay) }]} /> : <View />}
+            </TouchableRipple>
+          )
+        })}
+      </View>
+    </>
+  )
+}
+
 const styles = StyleSheet.create({
   anchor: {
     position: 'relative'
@@ -257,6 +428,40 @@ const styles = StyleSheet.create({
   anchorOpen: {
     zIndex: 100
   },
+  // The pill, rounded at both ends. The host adds its own background through `triggerStyle`.
+  chipTrigger: {
+    borderRadius: (CHIP_SIZE + 2 * CHIP_TRIGGER_PADDING) / 2
+  },
+  // The padding lives on the measured view, not the pressable around it, so the placement measures
+  // the pill's real edge: measured from inside the padding, a popover opening toward a screen edge
+  // was sized as if the pill were 6pt further from it, and ran 2pt past that edge.
+  chipTriggerInner: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 8,
+    height: CHIP_SIZE + 2 * CHIP_TRIGGER_PADDING,
+    paddingLeft: CHIP_TRIGGER_PADDING,
+    paddingRight: CHIP_TRIGGER_PADDING + 8
+  },
+  colorRowCaption: {
+    fontSize: 12,
+    lineHeight: COLOR_CAPTION_LINE,
+    opacity: 0.6
+  },
+  // A row's label, with a line height so the captioned Color row's height is exact.
+  colorRowLabel: {
+    fontSize: 14,
+    lineHeight: COLOR_LABEL_LINE
+  },
+  // The color in effect, in the same 22pt slot as every row's chip.
+  colorRowSwatch: {
+    borderRadius: 11,
+    height: 22,
+    width: 22
+  },
+  colorRowText: {
+    flex: 1
+  },
   // Separates Manage (a navigation action) from the selectable rows above it - different kind of
   // action, not just another row in the same list. Tinted with the seat's own color (passed in as
   // backgroundColor) rather than a flat gray, matching the border/caret's own accent-tinted look.
@@ -291,7 +496,7 @@ const styles = StyleSheet.create({
   },
   menu: {
     borderRadius: 12,
-    borderWidth: 2,
+    borderWidth: MENU_BORDER_WIDTH,
     elevation: 8,
     shadowColor: '#000000',
     shadowOffset: { height: 2, width: 0 },
@@ -304,6 +509,12 @@ const styles = StyleSheet.create({
   menuContent: {
     padding: LIST_PADDING
   },
+  // The selected profile's own color (see ColorSection).
+  profileDot: {
+    borderRadius: 4,
+    height: 8,
+    width: 8
+  },
   row: {
     borderRadius: 8,
     height: ROW_HEIGHT
@@ -316,12 +527,33 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     flex: 1,
     gap: 8,
-    paddingHorizontal: 12
+    paddingHorizontal: ROW_INSET
   },
   rowLabel: {
     flex: 1,
     fontSize: 14
   },
+  swatch: {
+    alignItems: 'center',
+    borderRadius: SWATCH_SIZE / 2,
+    height: SWATCH_SIZE,
+    justifyContent: 'center',
+    width: SWATCH_SIZE
+  },
+  swatchSelected: {
+    borderColor: '#ffffff',
+    borderWidth: 2
+  },
+  swatches: {
+    columnGap: GRID_GAP,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginBottom: GRID_BOTTOM,
+    marginHorizontal: ROW_INSET,
+    marginTop: GRID_TOP,
+    rowGap: GRID_GAP,
+    width: GRID_WIDTH
+  },
   trigger: {
     alignSelf: 'flex-start'
   },