@tastic/profile 0.14.1 → 0.16.0

package/src/ProfileColorContext.tsx

@@ -1,27 +1,49 @@
-import { createContext, type ReactNode, useContext } from 'react'
+import { createContext, type ReactNode, useContext, useMemo } from 'react'
 
-const ProfileColorContext = createContext<((hex: string) => string) | undefined>(undefined)
+// Draws one color's swatch fill: a circle `size` across, standing in for the flat fill. `color` is the
+// drawn color (after `preview`), and it stays the primary one: the tag, icon, check or dot on top of
+// the swatch takes its contrast from it.
+export type ProfileSwatchRenderer = (color: string, size: number) => ReactNode
+
+interface ProfileColorContextValue {
+  preview?: (hex: string) => string
+  renderSwatch?: ProfileSwatchRenderer
+}
+
+const ProfileColorContext = createContext<ProfileColorContextValue>({})
 
 interface ProfileColorProviderProps {
   // Maps a profile's saved color to the color actually drawn for it. Solitaire blends profile colors
   // toward its card-back palette so they read muted, not as the raw swatch; a context rather than a
   // module-level setting because that blend depends on light/dark mode.
-  preview: (hex: string) => string
+  preview?: (hex: string) => string
+  // Replaces the flat fill of every round swatch this package draws: IdentityChip (ProfileChip and the
+  // pickers' chip trigger), the pickers' Color row swatch and their color page swatches. Hangman draws
+  // a pie of each color's triad. The renderer is drawn behind the swatch's mark, clipped to the circle.
+  // Rows that fill with a color (a selected picker row) stay flat, and so does hud's InlineColorPicker
+  // (ProfilesManager's color trigger and swatches), which doesn't read this context.
+  renderSwatch?: ProfileSwatchRenderer
   children: ReactNode
 }
 
 // App-wide display transform for profile colors. Every ProfileChip, ProfilePicker's selected-row
 // fill and ProfilesManager's color picker previews read it, and so does anything outside this
-// package that draws a ProfileChip (@tastic/hud's AchievementUnlockList). Without a provider,
-// profile colors draw as saved.
-export function ProfileColorProvider({ preview, children }: ProfileColorProviderProps) {
-  return <ProfileColorContext.Provider value={preview}>{children}</ProfileColorContext.Provider>
+// package that draws a ProfileChip (@tastic/hud's AchievementUnlockList). Without a provider (or
+// with neither prop), profile colors draw as saved, in flat swatches.
+export function ProfileColorProvider({ preview, renderSwatch, children }: ProfileColorProviderProps) {
+  const value = useMemo(() => ({ preview, renderSwatch }), [preview, renderSwatch])
+  return <ProfileColorContext.Provider value={value}>{children}</ProfileColorContext.Provider>
 }
 
 // The provider's preview, or undefined when there's none (so a caller can tell "no transform"
 // apart from an identity one, e.g. to fall back to its own colorPreview prop).
 export function useProfileColorPreview(): ((hex: string) => string) | undefined {
-  return useContext(ProfileColorContext)
+  return useContext(ProfileColorContext).preview
+}
+
+// The provider's swatch renderer, or undefined for the flat fill.
+export function useProfileSwatchRenderer(): ProfileSwatchRenderer | undefined {
+  return useContext(ProfileColorContext).renderSwatch
 }
 
 // Resolves one saved color to its drawn color.

package/src/ProfilePicker.tsx

@@ -1,90 +1,16 @@
-import { defaultColors, FadingScrollView, getContrastColor, type SeedColor } from '@rific/auto-paper'
+import { getContrastColor } from '@rific/auto-paper'
 import { TouchableRipple } from '@rific/feedback-press'
-import { PopoverBody, PopoverHost, PopoverRotation, useAutoAlign } from '@tastic/hud'
-import { RefObject, useMemo, useState } from 'react'
-import { type LayoutChangeEvent, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
+import type { PopoverHost, PopoverRotation } from '@tastic/hud/chrome'
+import { useMemo } from 'react'
+import { type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
 import { Icon, Text } from 'react-native-paper'
 
-import { IdentityChip } from './IdentityChip'
+import { IconRow, pickerContentSize, PickerMenu, pickerMenuStyles, type ProfilePickerAlignResult, type ProfilePickerColorSection, type ProfilePickerContentSize } from './PickerMenu'
 import { ProfileChip } from './ProfileChip'
 import { useProfileColorPreview } from './ProfileColorContext'
 import { Profile } from './types'
 
-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.
-// Structurally identical to @tastic/hud's own `AlignResult` (exported from hud >= 0.12.0, and the
-// same shape `useAutoAlign` itself returns) - declared here rather than imported so this package's
-// public types don't start requiring a newer @tastic/hud than its peer range already admits. A
-// hud `AlignResult` (e.g. from `useZoneClampedAlign`) is assignable to this as-is.
-export interface ProfilePickerAlignResult {
-  align: 'left' | 'right' | 'center'
-  verticalAlign: 'below' | 'above'
-  maxHeight: number
-  measured: boolean
-  triggerRef: RefObject<View | null>
-}
-
-export interface ProfilePickerContentSize {
-  width: number
-  height: number
-}
+export type { ProfilePickerAlignResult, ProfilePickerColorSection, ProfilePickerContentSize } from './PickerMenu'
 
 // 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
@@ -99,10 +25,7 @@ export interface ProfilePickerContentSize {
 // 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, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize {
-  const rowCount = profileCount + 1 + (hasManageRow ? 1 : 0)
-  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 }
+  return pickerContentSize(profileCount + 1 + (hasManageRow ? 1 : 0), colorSection)
 }
 
 interface ProfilePickerProps<P extends Profile> {
@@ -119,6 +42,10 @@ interface ProfilePickerProps<P extends Profile> {
   // game, where double-selecting one profile would double-count its stats as both winner and
   // loser) - omit if that doesn't apply.
   takenId?: string | null
+  // Every other seat's profile id, for a lobby with more than two seats: each is disabled in this
+  // list the same way as `takenId` (both may be given). This picker's own selection is never taken,
+  // so a host can pass every seated id, this seat's included.
+  takenIds?: readonly string[]
   // Tint for the trigger's own label/icon - pass the seat/context's current live color so the
   // trigger reads as one identity with whatever it's paired with.
   color: string
@@ -193,27 +120,20 @@ 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, colorSection, triggerStyle }: ProfilePickerProps<P>) {
+export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, takenIds, color, dark, align, 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()
-  const menuBg = dark ? '#000000' : '#FFFFFF'
   const fg = dark ? '#FFFFFF' : '#000000'
 
-  const open = host.openId === id
   const selectedProfile = profiles.find((p) => p.id === selectedId) ?? null
   // Alphabetical - this is the list that sees the most real use, so it's the one that benefits
   // 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, 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.
-  const auto = useAutoAlign(open, contentWidth, contentHeight, rotation)
-  const placement = alignOverride ?? auto
-  const { maxHeight, measured, triggerRef, verticalAlign } = placement
-  const align = forcedAlign ?? placement.align
+  const contentSize = getProfilePickerContentSize(profiles.length, !!onManage, colorSection)
+  // `takenId` exactly as before; a `takenIds` entry skips this picker's own selection.
+  const isTaken = (profileId: string) => profileId === takenId || (profileId !== selectedId && !!takenIds?.includes(profileId))
 
   const handleSelectGuest = () => {
     onSelect(null)
@@ -221,7 +141,7 @@ export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, sel
   }
 
   const handleSelectExisting = (profile: P) => {
-    if (profile.id === takenId) return
+    if (isTaken(profile.id)) return
     onSelect(profile)
     host.close()
   }
@@ -231,353 +151,68 @@ 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()
-  // Shown on the list page only (see the footer below).
-  const manageFooter = !!onManage && !(colorSection && colorPage)
-
-  return (
-    <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={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={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,
-            {
-              backgroundColor: menuBg,
-              borderColor: color,
-              width: POPOVER_WIDTH,
-              maxHeight
-            }
-          ]}
-        >
-          {/* Keyed by page, so swapping pages starts the new one scrolled to its top. */}
-          <FadingScrollView key={colorSection && colorPage ? 'color' : 'list'} contentContainerStyle={[styles.menuContent, manageFooter && styles.menuContentAboveFooter]} 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>
-                  )
-                })}
-              </>
-            )}
-          </FadingScrollView>
-          {/* Manage is pinned below the scrolling rows, the way a dialog's Done sits below its rows:
-          always reachable, with the rows fading out above its divider while there are more below
-          (2026-10-16; it used to be the list's last row and scrolled away with it). 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. Not on the color page, which only has the back row and the swatches. */}
-          {manageFooter && (
-            <View style={styles.menuFooter}>
-              <View style={[styles.divider, { backgroundColor: color }]} />
-              <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>
-            </View>
-          )}
-        </View>
-      </PopoverBody>
-    </View>
-  )
-}
+  // Manage is pinned below the scrolling rows, the way a dialog's Done sits below its rows: always
+  // reachable, with the rows fading out above its divider while there are more below (2026-10-16;
+  // it used to be the list's last row and scrolled away with it). 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.
+  const manageFooter = onManage ? (
+    <TouchableRipple onPress={handleManage} style={pickerMenuStyles.row}>
+      <View style={styles.manageRowInner}>
+        <Icon source='account-cog-outline' size={16} color={color} />
+        <Text style={[styles.manageLabel, { color: fg }]}>Manage</Text>
+      </View>
+    </TouchableRipple>
+  ) : undefined
 
-// 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}
+    <PickerMenu id={id} host={host} color={color} dark={dark} label={selectedProfile?.name ?? guestLabel} chip={colorSection ? { tag: selectedProfile?.tag, icon: selectedProfile ? 'account' : nullIcon } : undefined} colorSection={colorSection} homeColor={selectedProfile?.color} contentSize={contentSize} align={align} alignOverride={alignOverride} rotation={rotation} triggerStyle={triggerStyle} footer={manageFooter}>
+      <IconRow icon={nullIcon} label={nullLabel} selected={selectedId === null} color={color} fg={fg} onPress={handleSelectGuest} />
+
+      {sortedProfiles.map((profile) => {
+        const taken = isTaken(profile.id)
+        const selected = selectedId === profile.id
+        const rowColor = colorPreview ? colorPreview(profile.color) : profile.color
+        return (
+          <TouchableRipple key={profile.id} disabled={taken} onPress={() => handleSelectExisting(profile)} style={[pickerMenuStyles.row, selected && { backgroundColor: rowColor }]}>
+            <View style={[pickerMenuStyles.rowInner, taken && pickerMenuStyles.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={[
+                  pickerMenuStyles.rowLabel,
+                  {
+                    color: selected ? getContrastColor(rowColor) : fg
+                  }
+                ]}
+                numberOfLines={1}
+              >
+                {profile.name}
               </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>
-    </>
+            </View>
+          </TouchableRipple>
+        )
+      })}
+    </PickerMenu>
   )
 }
 
 const styles = StyleSheet.create({
-  anchor: {
-    position: 'relative'
-  },
-  // See InlineColorPicker's identical comment - React Native Web gives every position:'relative'
-  // view its own stacking context, so the elevation has to live on the anchor itself.
-  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.
-  divider: {
-    height: 1,
-    marginVertical: 4,
-    opacity: 0.25
-  },
-  // Matches ProfileChip's own default size/shape exactly (see this row's own render-site comment)
-  // - no backgroundColor, unlike ProfileChip's own default: this row has no identity color of its
-  // own to fill it with, and the render site now colors the icon directly instead.
-  guestChip: {
-    alignItems: 'center',
-    borderRadius: 11,
-    height: 22,
-    justifyContent: 'center',
-    width: 22
-  },
   manageLabel: {
     fontSize: 13,
     fontWeight: '700',
     letterSpacing: 0.5
   },
-  // Centered rather than left-aligned like a normal row - see this row's own render-site comment
-  // for why (a footer action, not another selectable identity).
+  // Centered rather than left-aligned like a normal row - see the footer's own comment for why (a
+  // footer action, not another selectable identity).
   manageRowInner: {
     alignItems: 'center',
     flexDirection: 'row',
     gap: 6,
     height: '100%',
     justifyContent: 'center'
-  },
-  menu: {
-    borderRadius: 12,
-    borderWidth: MENU_BORDER_WIDTH,
-    elevation: 8,
-    shadowColor: '#000000',
-    shadowOffset: { height: 2, width: 0 },
-    shadowOpacity: 0.3,
-    shadowRadius: 8
-  },
-  // Padded on every side (not just top/bottom) - a selected row's own full-color background (see
-  // `row`'s borderRadius) needs real margin from the menu's own straight edges to read as a rounded
-  // pill instead of looking clipped against them.
-  menuContent: {
-    padding: LIST_PADDING
-  },
-  // With Manage pinned below, its own padding takes the bottom edge (same total height as before).
-  menuContentAboveFooter: {
-    paddingBottom: 0
-  },
-  menuFooter: {
-    paddingBottom: LIST_PADDING,
-    paddingHorizontal: LIST_PADDING
-  },
-  // The selected profile's own color (see ColorSection).
-  profileDot: {
-    borderRadius: 4,
-    height: 8,
-    width: 8
-  },
-  row: {
-    borderRadius: 8,
-    height: ROW_HEIGHT
-  },
-  rowDisabled: {
-    opacity: 0.35
-  },
-  rowInner: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    flex: 1,
-    gap: 8,
-    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'
-  },
-  triggerInner: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    gap: 2,
-    height: TRIGGER_HEIGHT
-  },
-  triggerLabel: {
-    fontSize: 13,
-    fontWeight: '700',
-    letterSpacing: 1
   }
 })