@tastic/profile 0.14.1 → 0.15.0

package/dist/index.js

@@ -22,6 +22,7 @@ var index_exports = {};
 __export(index_exports, {
   MAX_PROFILE_NAME_LENGTH: () => MAX_PROFILE_NAME_LENGTH,
   MAX_TAG_LENGTH: () => MAX_TAG_LENGTH,
+  OptionPicker: () => OptionPicker,
   ProfileChip: () => ProfileChip,
   ProfileColorProvider: () => ProfileColorProvider,
   ProfilePicker: () => ProfilePicker,
@@ -32,11 +33,13 @@ __export(index_exports, {
   createProfileRecord: () => createProfileRecord,
   createProfileSelectionSlice: () => createProfileSelectionSlice,
   createSeatColorsSlice: () => createSeatColorsSlice,
+  getOptionPickerContentSize: () => getOptionPickerContentSize,
   getProfilePickerContentSize: () => getProfilePickerContentSize,
   isSharedProfileStoreAvailable: () => isSharedProfileStoreAvailable,
   isValidProfile: () => isValidProfile,
   isValidTag: () => isValidTag,
   loadSharedProfiles: () => loadSharedProfiles,
+  profileSeatColor: () => profileSeatColor,
   profilesActions: () => profilesActions,
   profilesReducer: () => profilesReducer,
   readSharedProfiles: () => readSharedProfiles,
@@ -48,6 +51,14 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/PickerMenu.tsx
+var import_auto_paper2 = require("@rific/auto-paper");
+var import_feedback_press = require("@rific/feedback-press");
+var import_hud = require("@tastic/hud");
+var import_react = require("react");
+var import_react_native2 = require("react-native");
+var import_react_native_paper2 = require("react-native-paper");
+
 // src/IdentityChip.tsx
 var import_auto_paper = require("@rific/auto-paper");
 var import_react_native = require("react-native");
@@ -70,36 +81,8 @@ var styles = import_react_native.StyleSheet.create({
   }
 });
 
-// src/ProfileColorContext.tsx
-var import_react = require("react");
+// src/PickerMenu.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var ProfileColorContext = (0, import_react.createContext)(void 0);
-function ProfileColorProvider({ preview, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ProfileColorContext.Provider, { value: preview, children });
-}
-function useProfileColorPreview() {
-  return (0, import_react.useContext)(ProfileColorContext);
-}
-function useProfileDisplayColor(hex) {
-  const preview = useProfileColorPreview();
-  return preview ? preview(hex) : hex;
-}
-
-// src/ProfileChip.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function ProfileChip({ profile, size = 22, filled = true }) {
-  const color = useProfileDisplayColor(profile.color);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IdentityChip, { color, tag: profile.tag, icon: "account", size, filled });
-}
-
-// src/ProfilePicker.tsx
-var import_auto_paper2 = require("@rific/auto-paper");
-var import_feedback_press = require("@rific/feedback-press");
-var import_hud = require("@tastic/hud");
-var import_react2 = require("react");
-var import_react_native2 = require("react-native");
-var import_react_native_paper2 = require("react-native-paper");
-var import_jsx_runtime4 = require("react/jsx-runtime");
 var TRIGGER_HEIGHT = 28;
 var POPOVER_WIDTH = 220;
 var ROW_HEIGHT = 36;
@@ -126,55 +109,37 @@ function colorPageHeight(swatches) {
   const rows = Math.ceil(swatches.length / GRID_COLUMNS);
   return ROW_HEIGHT + GRID_TOP + rows * SWATCH_SIZE + (rows - 1) * GRID_GAP + GRID_BOTTOM;
 }
-function getProfilePickerContentSize(profileCount, hasManageRow = false, colorSection) {
-  const rowCount = profileCount + 1 + (hasManageRow ? 1 : 0);
+function pickerContentSize(rowCount, colorSection) {
   const list = rowCount * ROW_HEIGHT + (colorSection ? colorRowHeight(colorSection.caption) + COLOR_ROW_DIVIDER : 0);
   const content = colorSection ? Math.max(list, colorPageHeight(colorSection.swatches ?? import_auto_paper2.defaultColors)) : list;
   return { width: POPOVER_WIDTH, height: LIST_PADDING * 2 + content };
 }
-function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation = 0, guestLabel, nullLabel = "Player", nullIcon = "account-off-outline", onSelect, onManage, colorSection, triggerStyle }) {
-  const id = `${idPrefix}-profile`;
-  const colorPreview = useProfileColorPreview();
+function PickerMenu({ id, host, color, dark, label, chip, colorSection, homeColor, contentSize, align: forcedAlign, alignOverride, rotation, triggerStyle, footer, children }) {
   const menuBg = dark ? "#000000" : "#FFFFFF";
   const fg = dark ? "#FFFFFF" : "#000000";
   const open = host.openId === id;
-  const selectedProfile = profiles.find((p) => p.id === selectedId) ?? null;
-  const sortedProfiles = (0, import_react2.useMemo)(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
-  const { width: contentWidth, height: contentHeight } = getProfilePickerContentSize(profiles.length, !!onManage, colorSection);
-  const auto = (0, import_hud.useAutoAlign)(open, contentWidth, contentHeight, rotation);
+  const auto = (0, import_hud.useAutoAlign)(open, contentSize.width, contentSize.height, rotation);
   const placement = alignOverride ?? auto;
   const { maxHeight, measured, triggerRef, verticalAlign } = placement;
   const align = forcedAlign ?? placement.align;
-  const handleSelectGuest = () => {
-    onSelect(null);
-    host.close();
-  };
-  const handleSelectExisting = (profile) => {
-    if (profile.id === takenId) return;
-    onSelect(profile);
-    host.close();
-  };
-  const handleManage = () => {
-    host.close();
-    onManage?.();
-  };
-  const chipTrigger = !!colorSection;
-  const [triggerWidth, setTriggerWidth] = (0, import_react2.useState)(0);
+  const chipTrigger = !!chip;
+  const [triggerWidth, setTriggerWidth] = (0, import_react.useState)(0);
   const handleAnchorLayout = chipTrigger ? (e) => setTriggerWidth(e.nativeEvent.layout.width) : void 0;
-  const [colorPage, setColorPage] = (0, import_react2.useState)(false);
+  const [colorPage, setColorPage] = (0, import_react.useState)(false);
+  const showColorPage = !!colorSection && colorPage;
   const handleTriggerPress = () => {
     setColorPage(false);
     host.toggle(id);
   };
-  const triggerLabel = (selectedProfile?.name ?? guestLabel).toUpperCase();
-  const manageFooter = !!onManage && !(colorSection && colorPage);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: [styles2.anchor, open && styles2.anchorOpen], onLayout: handleAnchorLayout, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { onPress: handleTriggerPress, borderless: chipTrigger, style: [styles2.trigger, chipTrigger && styles2.chipTrigger, triggerStyle], accessibilityRole: "button", accessibilityLabel: triggerLabel, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { ref: triggerRef, collapsable: false, style: chipTrigger ? styles2.chipTriggerInner : styles2.triggerInner, children: [
-      chipTrigger && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IdentityChip, { color, tag: selectedProfile?.tag, icon: selectedProfile ? "account" : nullIcon, size: CHIP_SIZE }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { style: [styles2.triggerLabel, { color: chipTrigger ? fg : color }], numberOfLines: 1, children: triggerLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: "menu-down", size: 16, color: chipTrigger ? fg : color })
+  const triggerLabel = label.toUpperCase();
+  const showFooter = !!footer && !showColorPage;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: [styles2.anchor, open && styles2.anchorOpen], onLayout: handleAnchorLayout, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { onPress: handleTriggerPress, borderless: chipTrigger, style: [styles2.trigger, chipTrigger && styles2.chipTrigger, triggerStyle], accessibilityRole: "button", accessibilityLabel: triggerLabel, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { ref: triggerRef, collapsable: false, style: chipTrigger ? styles2.chipTriggerInner : styles2.triggerInner, children: [
+      chip && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IdentityChip, { color, tag: chip.tag, icon: chip.icon, size: CHIP_SIZE }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { style: [styles2.triggerLabel, { color: chipTrigger ? fg : color }], numberOfLines: 1, children: triggerLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Icon, { source: "menu-down", size: 16, color: chipTrigger ? fg : color })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_hud.PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: chipTrigger ? triggerWidth : TRIGGER_HEIGHT, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_hud.PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: chipTrigger ? triggerWidth : TRIGGER_HEIGHT, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       import_react_native2.View,
       {
         style: [
@@ -187,77 +152,81 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, d
           }
         ],
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_auto_paper2.FadingScrollView, { contentContainerStyle: [styles2.menuContent, manageFooter && styles2.menuContentAboveFooter], showsVerticalScrollIndicator: false, children: colorSection && colorPage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ColorPage, { section: colorSection, profileColor: selectedProfile?.color, fg, onBack: () => setColorPage(false) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-            colorSection && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ColorRow, { section: colorSection, fg, dividerColor: color, onPress: () => setColorPage(true) }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { onPress: handleSelectGuest, style: [styles2.row, selectedId === null && { backgroundColor: color }], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: styles2.rowInner, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, { style: styles2.guestChip, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: nullIcon, size: 13, color: selectedId === null ? (0, import_auto_paper2.getContrastColor)(color) : fg }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { style: [styles2.rowLabel, { color: selectedId === null ? (0, import_auto_paper2.getContrastColor)(color) : fg }], children: nullLabel })
-            ] }) }),
-            sortedProfiles.map((profile) => {
-              const taken = profile.id === takenId;
-              const selected = selectedId === profile.id;
-              const rowColor = colorPreview ? colorPreview(profile.color) : profile.color;
-              return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [styles2.row, selected && { backgroundColor: rowColor }], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: [styles2.rowInner, taken && styles2.rowDisabled], children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProfileChip, { profile, filled: !selected }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  import_react_native_paper2.Text,
-                  {
-                    style: [
-                      styles2.rowLabel,
-                      {
-                        color: selected ? (0, import_auto_paper2.getContrastColor)(rowColor) : fg
-                      }
-                    ],
-                    numberOfLines: 1,
-                    children: profile.name
-                  }
-                )
-              ] }) }, profile.id);
-            })
-          ] }) }, colorSection && colorPage ? "color" : "list"),
-          manageFooter && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: styles2.menuFooter, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, { style: [styles2.divider, { backgroundColor: color }] }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { onPress: handleManage, style: styles2.row, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: styles2.manageRowInner, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: "account-cog-outline", size: 16, color }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { style: [styles2.manageLabel, { color: fg }], children: "Manage" })
-            ] }) })
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_auto_paper2.FadingScrollView, { contentContainerStyle: [styles2.menuContent, showFooter && styles2.menuContentAboveFooter], showsVerticalScrollIndicator: false, children: colorSection && colorPage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ColorPage, { section: colorSection, homeColor, fg, onBack: () => setColorPage(false) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+            colorSection && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ColorRow, { section: colorSection, fg, dividerColor: color, onPress: () => setColorPage(true) }),
+            children
+          ] }) }, showColorPage ? "color" : "list"),
+          showFooter && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles2.menuFooter, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [styles2.divider, { backgroundColor: color }] }),
+            footer
           ] })
         ]
       }
     ) })
   ] });
 }
+function IconRow({ icon, label, selected, color, fg, disabled = false, onPress }) {
+  const textColor = selected ? (0, import_auto_paper2.getContrastColor)(color) : fg;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { disabled, onPress, style: [pickerMenuStyles.row, selected && { backgroundColor: color }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: [pickerMenuStyles.rowInner, disabled && pickerMenuStyles.rowDisabled], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles2.iconSlot, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Icon, { source: icon, size: 13, color: textColor }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { style: [pickerMenuStyles.rowLabel, { color: textColor }], numberOfLines: 1, children: label })
+  ] }) });
+}
 function ColorRow({ section, fg, dividerColor, onPress }) {
   const { value, previewValue, label = "Color", caption } = section;
   const drawn = previewValue ? previewValue(value) : value;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { onPress, style: [styles2.row, { height: colorRowHeight(caption) }], accessibilityRole: "button", accessibilityLabel: caption ? `${label}, ${caption}` : label, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: styles2.rowInner, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, { style: [styles2.colorRowSwatch, { backgroundColor: drawn }] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: styles2.colorRowText, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { style: [styles2.colorRowLabel, { color: fg }], numberOfLines: 1, children: label }),
-        caption ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { style: [styles2.colorRowCaption, { color: fg }], numberOfLines: 1, children: caption }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { onPress, style: [pickerMenuStyles.row, { height: colorRowHeight(caption) }], accessibilityRole: "button", accessibilityLabel: caption ? `${label}, ${caption}` : label, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: pickerMenuStyles.rowInner, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [styles2.colorRowSwatch, { backgroundColor: drawn }] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles2.colorRowText, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { style: [styles2.colorRowLabel, { color: fg }], numberOfLines: 1, children: label }),
+        caption ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { style: [styles2.colorRowCaption, { color: fg }], numberOfLines: 1, children: caption }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: "chevron-right", size: 18, color: fg })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Icon, { source: "chevron-right", size: 18, color: fg })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, { style: [styles2.divider, { backgroundColor: dividerColor }] })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [styles2.divider, { backgroundColor: dividerColor }] })
   ] });
 }
-function ColorPage({ section, profileColor, fg, onBack }) {
-  const { value, onChange, previewValue, swatches = import_auto_paper2.defaultColors, label = "Color" } = section;
+function ColorPage({ section, homeColor, fg, onBack }) {
+  const { value, onChange, previewValue, swatches = import_auto_paper2.defaultColors, label = "Color", takenValue, allowSwapTaken } = section;
   const displayFor = previewValue ?? ((hex) => hex);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { onPress: onBack, style: styles2.row, accessibilityRole: "button", accessibilityLabel: "Back", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: styles2.rowInner, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, { style: styles2.guestChip, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: "chevron-left", size: 20, color: fg }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { style: [styles2.colorRowLabel, { color: fg }], numberOfLines: 1, children: label })
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { onPress: onBack, style: pickerMenuStyles.row, accessibilityRole: "button", accessibilityLabel: "Back", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: pickerMenuStyles.rowInner, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles2.iconSlot, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Icon, { source: "chevron-left", size: 20, color: fg }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { style: [styles2.colorRowLabel, { color: fg }], numberOfLines: 1, children: label })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, { style: styles2.swatches, children: swatches.map((swatch) => {
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles2.swatches, children: swatches.map((swatch) => {
       const selected = swatch.value.toLowerCase() === value.toLowerCase();
-      const isProfileColor = !!profileColor && swatch.value.toLowerCase() === profileColor.toLowerCase();
+      const isHomeColor = !!homeColor && swatch.value.toLowerCase() === homeColor.toLowerCase();
+      const taken = !selected && !!takenValue && swatch.value.toLowerCase() === takenValue.toLowerCase();
+      const swappable = taken && !!allowSwapTaken;
       const swatchDisplay = displayFor(swatch.value);
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { onPress: () => onChange(swatch.value), borderless: true, style: [styles2.swatch, { backgroundColor: swatchDisplay }, selected && styles2.swatchSelected], accessibilityRole: "button", accessibilityLabel: isProfileColor ? `${swatch.label}, profile color` : swatch.label, accessibilityState: { selected }, children: selected ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: "check", size: 16, color: (0, import_auto_paper2.getContrastColor)(swatchDisplay) }) : isProfileColor ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, { style: [styles2.profileDot, { backgroundColor: (0, import_auto_paper2.getContrastColor)(swatchDisplay) }] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, {}) }, swatch.value);
+      const contrast = (0, import_auto_paper2.getContrastColor)(swatchDisplay);
+      const accessibilityLabel = swappable ? `${swatch.label}, swap` : taken ? `${swatch.label}, taken` : isHomeColor ? `${swatch.label}, profile color` : swatch.label;
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { disabled: taken && !swappable, onPress: () => onChange(swatch.value), borderless: true, style: [styles2.swatch, { backgroundColor: swatchDisplay }, selected && styles2.swatchSelected, taken && !swappable && styles2.swatchTaken], accessibilityRole: "button", accessibilityLabel, accessibilityState: { selected, disabled: taken && !swappable }, children: selected ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Icon, { source: "check", size: 16, color: contrast }) : swappable ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Icon, { source: "swap-horizontal", size: 16, color: contrast }) : taken ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Icon, { source: "close", size: 16, color: contrast }) : isHomeColor ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [styles2.homeDot, { backgroundColor: contrast }] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, {}) }, swatch.value);
     }) })
   ] });
 }
+var pickerMenuStyles = import_react_native2.StyleSheet.create({
+  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
+  }
+});
 var styles2 = import_react_native2.StyleSheet.create({
   anchor: {
     position: "relative"
@@ -301,38 +270,31 @@ var styles2 = import_react_native2.StyleSheet.create({
   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.
+  // Separates the footer (a navigation action) and the Color row from the selectable rows - a
+  // 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: {
+  // The selected profile's own color (see ColorPage).
+  homeDot: {
+    borderRadius: 4,
+    height: 8,
+    width: 8
+  },
+  // Matches ProfileChip's own default size/shape exactly (see IconRow's own render-site comment) -
+  // no backgroundColor, unlike ProfileChip's own default: an icon row has no identity color of its
+  // own to fill it with, and the render site colors the icon directly instead.
+  iconSlot: {
     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).
-  manageRowInner: {
-    alignItems: "center",
-    flexDirection: "row",
-    gap: 6,
-    height: "100%",
-    justifyContent: "center"
-  },
   menu: {
     borderRadius: 12,
     borderWidth: MENU_BORDER_WIDTH,
@@ -348,7 +310,7 @@ var styles2 = import_react_native2.StyleSheet.create({
   menuContent: {
     padding: LIST_PADDING
   },
-  // With Manage pinned below, its own padding takes the bottom edge (same total height as before).
+  // With a footer pinned below, its own padding takes the bottom edge (same total height as before).
   menuContentAboveFooter: {
     paddingBottom: 0
   },
@@ -356,30 +318,6 @@ var styles2 = import_react_native2.StyleSheet.create({
     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,
@@ -391,6 +329,9 @@ var styles2 = import_react_native2.StyleSheet.create({
     borderColor: "#ffffff",
     borderWidth: 2
   },
+  swatchTaken: {
+    opacity: 0.35
+  },
   swatches: {
     columnGap: GRID_GAP,
     flexDirection: "row",
@@ -417,15 +358,128 @@ var styles2 = import_react_native2.StyleSheet.create({
   }
 });
 
-// src/ProfilesManager.tsx
+// src/OptionPicker.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function getOptionPickerContentSize(optionCount, colorSection) {
+  return pickerContentSize(optionCount, colorSection);
+}
+function OptionPicker({ id, host, options, value, onChange, color, dark, icon, rowIcon = icon, colorSection, align, alignOverride, rotation = 0, triggerStyle }) {
+  const fg = dark ? "#FFFFFF" : "#000000";
+  const selected = options.find((option) => option.value === value);
+  const handleSelect = (option) => {
+    onChange(option.value);
+    host.close();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PickerMenu, { id, host, color, dark, label: selected?.label ?? "", chip: { icon }, colorSection, contentSize: getOptionPickerContentSize(options.length, colorSection), align, alignOverride, rotation, triggerStyle, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconRow, { icon: option.icon ?? rowIcon, label: option.label, selected: option.value === value, color, fg, onPress: () => handleSelect(option) }, option.value)) });
+}
+
+// src/ProfileColorContext.tsx
+var import_react2 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ProfileColorContext = (0, import_react2.createContext)(void 0);
+function ProfileColorProvider({ preview, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProfileColorContext.Provider, { value: preview, children });
+}
+function useProfileColorPreview() {
+  return (0, import_react2.useContext)(ProfileColorContext);
+}
+function useProfileDisplayColor(hex) {
+  const preview = useProfileColorPreview();
+  return preview ? preview(hex) : hex;
+}
+
+// src/ProfileChip.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ProfileChip({ profile, size = 22, filled = true }) {
+  const color = useProfileDisplayColor(profile.color);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IdentityChip, { color, tag: profile.tag, icon: "account", size, filled });
+}
+
+// src/ProfilePicker.tsx
 var import_auto_paper3 = require("@rific/auto-paper");
 var import_feedback_press2 = require("@rific/feedback-press");
-var import_focus_chain = require("@rific/focus-chain");
-var import_toaster = require("@rific/toaster");
-var import_hud2 = require("@tastic/hud");
 var import_react3 = require("react");
 var import_react_native3 = require("react-native");
 var import_react_native_paper3 = require("react-native-paper");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function getProfilePickerContentSize(profileCount, hasManageRow = false, colorSection) {
+  return pickerContentSize(profileCount + 1 + (hasManageRow ? 1 : 0), colorSection);
+}
+function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, dark, align, alignOverride, rotation = 0, guestLabel, nullLabel = "Player", nullIcon = "account-off-outline", onSelect, onManage, colorSection, triggerStyle }) {
+  const id = `${idPrefix}-profile`;
+  const colorPreview = useProfileColorPreview();
+  const fg = dark ? "#FFFFFF" : "#000000";
+  const selectedProfile = profiles.find((p) => p.id === selectedId) ?? null;
+  const sortedProfiles = (0, import_react3.useMemo)(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
+  const contentSize = getProfilePickerContentSize(profiles.length, !!onManage, colorSection);
+  const handleSelectGuest = () => {
+    onSelect(null);
+    host.close();
+  };
+  const handleSelectExisting = (profile) => {
+    if (profile.id === takenId) return;
+    onSelect(profile);
+    host.close();
+  };
+  const handleManage = () => {
+    host.close();
+    onManage?.();
+  };
+  const manageFooter = onManage ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_feedback_press2.TouchableRipple, { onPress: handleManage, style: pickerMenuStyles.row, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native3.View, { style: styles3.manageRowInner, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper3.Icon, { source: "account-cog-outline", size: 16, color }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper3.Text, { style: [styles3.manageLabel, { color: fg }], children: "Manage" })
+  ] }) }) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(PickerMenu, { id, host, color, dark, label: selectedProfile?.name ?? guestLabel, chip: colorSection ? { tag: selectedProfile?.tag, icon: selectedProfile ? "account" : nullIcon } : void 0, colorSection, homeColor: selectedProfile?.color, contentSize, align, alignOverride, rotation, triggerStyle, footer: manageFooter, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconRow, { icon: nullIcon, label: nullLabel, selected: selectedId === null, color, fg, onPress: handleSelectGuest }),
+    sortedProfiles.map((profile) => {
+      const taken = profile.id === takenId;
+      const selected = selectedId === profile.id;
+      const rowColor = colorPreview ? colorPreview(profile.color) : profile.color;
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_feedback_press2.TouchableRipple, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [pickerMenuStyles.row, selected && { backgroundColor: rowColor }], children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native3.View, { style: [pickerMenuStyles.rowInner, taken && pickerMenuStyles.rowDisabled], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProfileChip, { profile, filled: !selected }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_react_native_paper3.Text,
+          {
+            style: [
+              pickerMenuStyles.rowLabel,
+              {
+                color: selected ? (0, import_auto_paper3.getContrastColor)(rowColor) : fg
+              }
+            ],
+            numberOfLines: 1,
+            children: profile.name
+          }
+        )
+      ] }) }, profile.id);
+    })
+  ] });
+}
+var styles3 = import_react_native3.StyleSheet.create({
+  manageLabel: {
+    fontSize: 13,
+    fontWeight: "700",
+    letterSpacing: 0.5
+  },
+  // 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"
+  }
+});
+
+// src/ProfilesManager.tsx
+var import_auto_paper4 = require("@rific/auto-paper");
+var import_feedback_press3 = require("@rific/feedback-press");
+var import_focus_chain = require("@rific/focus-chain");
+var import_toaster = require("@rific/toaster");
+var import_hud2 = require("@tastic/hud");
+var import_react4 = require("react");
+var import_react_native4 = require("react-native");
+var import_react_native_paper4 = require("react-native-paper");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
 
 // src/profilesValidation.ts
@@ -461,7 +515,7 @@ function isValidProfile(value) {
 }
 
 // src/ProfilesManager.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var CHIP_SIZE2 = 40;
 function deriveTag(name) {
   const trimmed = name.trim();
@@ -470,19 +524,19 @@ function deriveTag(name) {
 function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, titleVariant = "headlineSmall", colorPreview: colorPreviewProp, useColorPickerAlign }) {
   const contextColorPreview = useProfileColorPreview();
   const colorPreview = colorPreviewProp ?? contextColorPreview;
-  const { dark } = (0, import_auto_paper3.useAutoPaperTheme)();
+  const { dark } = (0, import_auto_paper4.useAutoPaperTheme)();
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
   const { error: showErrorToast } = (0, import_toaster.useToast)();
   const host = (0, import_hud2.usePopoverHost)();
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
-  const [editingId, setEditingId] = (0, import_react3.useState)(null);
-  const [draftName, setDraftName] = (0, import_react3.useState)("");
-  const [draftColor, setDraftColor] = (0, import_react3.useState)(defaultColor);
-  const [draftTag, setDraftTag] = (0, import_react3.useState)("");
-  const [tagManuallySet, setTagManuallySet] = (0, import_react3.useState)(false);
-  const [confirmDeleteId, setConfirmDeleteId] = (0, import_react3.useState)(null);
-  const commitEdit = (0, import_react3.useCallback)(() => {
+  const [editingId, setEditingId] = (0, import_react4.useState)(null);
+  const [draftName, setDraftName] = (0, import_react4.useState)("");
+  const [draftColor, setDraftColor] = (0, import_react4.useState)(defaultColor);
+  const [draftTag, setDraftTag] = (0, import_react4.useState)("");
+  const [tagManuallySet, setTagManuallySet] = (0, import_react4.useState)(false);
+  const [confirmDeleteId, setConfirmDeleteId] = (0, import_react4.useState)(null);
+  const commitEdit = (0, import_react4.useCallback)(() => {
     const name = draftName.trim();
     if (editingId && name) {
       const tagValid = isValidTag(draftTag);
@@ -493,13 +547,13 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
     }
     setEditingId(null);
   }, [editingId, draftName, draftColor, draftTag, onCreate, onSave, showErrorToast]);
-  const commitEditRef = (0, import_react3.useRef)(commitEdit);
-  (0, import_react3.useEffect)(() => {
+  const commitEditRef = (0, import_react4.useRef)(commitEdit);
+  (0, import_react4.useEffect)(() => {
     commitEditRef.current = commitEdit;
   });
-  (0, import_react3.useEffect)(() => () => commitEditRef.current(), []);
-  (0, import_react3.useImperativeHandle)(ref, () => ({ commitPendingEdit: () => commitEditRef.current() }), []);
-  const startEdit = (0, import_react3.useCallback)(
+  (0, import_react4.useEffect)(() => () => commitEditRef.current(), []);
+  (0, import_react4.useImperativeHandle)(ref, () => ({ commitPendingEdit: () => commitEditRef.current() }), []);
+  const startEdit = (0, import_react4.useCallback)(
     (target) => {
       commitEdit();
       if (target === "new") {
@@ -517,79 +571,79 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
     },
     [commitEdit, defaultColor]
   );
-  const handleNameChange = (0, import_react3.useCallback)(
+  const handleNameChange = (0, import_react4.useCallback)(
     (name) => {
       setDraftName(name);
       if (!tagManuallySet) setDraftTag(deriveTag(name));
     },
     [tagManuallySet]
   );
-  const handleTagChange = (0, import_react3.useCallback)((tag) => {
+  const handleTagChange = (0, import_react4.useCallback)((tag) => {
     setDraftTag((previous) => clampTag(previous, tag));
     setTagManuallySet(true);
   }, []);
   const confirmDeleteProfile = profiles.find((p) => p.id === confirmDeleteId) ?? null;
-  const handleConfirmDelete = (0, import_react3.useCallback)(() => {
+  const handleConfirmDelete = (0, import_react4.useCallback)(() => {
     if (confirmDeleteId) {
       onDelete(confirmDeleteId);
       if (editingId === confirmDeleteId) setEditingId(null);
     }
     setConfirmDeleteId(null);
   }, [confirmDeleteId, editingId, onDelete]);
-  const sortedProfiles = (0, import_react3.useMemo)(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
+  const sortedProfiles = (0, import_react4.useMemo)(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
   const rows = [...sortedProfiles.map((profile) => ({ kind: "profile", profile })), { kind: "new" }];
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native3.View, { style: [styles3.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native4.View, { style: [styles4.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
       headerLeft,
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper3.Text, { variant: titleVariant, style: [styles3.title, { color: fg }], children: "Profiles" })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper4.Text, { variant: titleVariant, style: [styles4.title, { color: fg }], children: "Profiles" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native3.KeyboardAvoidingView, { behavior: import_react_native3.Platform.OS === "ios" ? "padding" : void 0, style: styles3.keyboardAvoiding, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native3.ScrollView, { style: styles3.scrollView, contentContainerStyle: [styles3.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: rows.map((row) => {
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native4.KeyboardAvoidingView, { behavior: import_react_native4.Platform.OS === "ios" ? "padding" : void 0, style: styles4.keyboardAvoiding, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_auto_paper4.FadingScrollView, { style: styles4.scrollView, contentContainerStyle: [styles4.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: rows.map((row) => {
       if (row.kind === "new") {
         if (editingId !== "new") {
-          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => startEdit("new"), style: styles3.row, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native3.View, { style: styles3.rowInner, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native3.View, { style: [styles3.rowChip, styles3.newChip, { borderColor: fg }], children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper3.Icon, { source: "plus", size: 20, color: fg }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: { color: fg }, children: "New Profile" })
+          return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => startEdit("new"), style: styles4.row, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native4.View, { style: styles4.rowInner, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native4.View, { style: [styles4.rowChip, styles4.newChip, { borderColor: fg }], children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper4.Icon, { source: "plus", size: 20, color: fg }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper4.Text, { variant: "bodyLarge", style: { color: fg }, children: "New Profile" })
           ] }) }, "new");
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, autoFocus: true, fgMuted, host, dark, colorPreview, useColorPickerAlign }, "new");
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, autoFocus: true, fgMuted, host, dark, colorPreview, useColorPickerAlign }, "new");
       }
       const { profile } = row;
       if (editingId === profile.id) {
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, onDelete: () => setConfirmDeleteId(profile.id), fgMuted, host, dark, colorPreview, useColorPickerAlign }, profile.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, onDelete: () => setConfirmDeleteId(profile.id), fgMuted, host, dark, colorPreview, useColorPickerAlign }, profile.id);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => startEdit(profile), style: styles3.row, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native3.View, { style: styles3.rowInner, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProfileChip, { profile, size: CHIP_SIZE2 }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: [styles3.rowName, { color: fg }], numberOfLines: 1, children: profile.name })
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => startEdit(profile), style: styles4.row, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native4.View, { style: styles4.rowInner, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProfileChip, { profile, size: CHIP_SIZE2 }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper4.Text, { variant: "bodyLarge", style: [styles4.rowName, { color: fg }], numberOfLines: 1, children: profile.name })
       ] }) }, profile.id);
     }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_hud2.ConfirmDialog, { visible: confirmDeleteProfile !== null, title: "Delete Profile?", message: confirmDeleteProfile ? `This permanently deletes ${confirmDeleteProfile.name}\u2019s profile. This cannot be undone.` : "", confirmLabel: "Delete", cancelLabel: "Cancel", icon: "alert-outline", destructive: true, onConfirm: handleConfirmDelete, onCancel: () => setConfirmDeleteId(null) })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_hud2.ConfirmDialog, { visible: confirmDeleteProfile !== null, title: "Delete Profile?", message: confirmDeleteProfile ? `This permanently deletes ${confirmDeleteProfile.name}\u2019s profile. This cannot be undone.` : "", confirmLabel: "Delete", cancelLabel: "Cancel", icon: "alert-outline", destructive: true, onConfirm: handleConfirmDelete, onCancel: () => setConfirmDeleteId(null) })
   ] });
 }
 function AlignedColorPicker({ useAlign, ...props }) {
-  const { width: windowWidth } = (0, import_react_native3.useWindowDimensions)();
-  const { width, height } = (0, import_hud2.getInlineColorPickerContentSize)(import_auto_paper3.defaultColors.length, windowWidth);
+  const { width: windowWidth } = (0, import_react_native4.useWindowDimensions)();
+  const { width, height } = (0, import_hud2.getInlineColorPickerContentSize)(import_auto_paper4.defaultColors.length, windowWidth);
   const alignOverride = useAlign(props.host.openId === props.id, width, height);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_hud2.InlineColorPicker, { ...props, alignOverride });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_hud2.InlineColorPicker, { ...props, alignOverride });
 }
 function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark, colorPreview, useColorPickerAlign }) {
   const register = (0, import_focus_chain.useFocusChain)();
   const tag = register();
   const name = register();
-  const tagFocusRef = (0, import_react3.useRef)(tag.props.focus);
-  (0, import_react3.useEffect)(() => {
+  const tagFocusRef = (0, import_react4.useRef)(tag.props.focus);
+  (0, import_react4.useEffect)(() => {
     tagFocusRef.current = tag.props.focus;
   });
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (host.openId === "color") tagFocusRef.current();
   }, [host.openId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native3.View, { style: styles3.editRow, children: [
-    useColorPickerAlign ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AlignedColorPicker, { useAlign: useColorPickerAlign, id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_hud2.InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper3.TextInput, { ref: tag.ref, ...tag.props, value: draftTag, onChangeText: onTagChange, accessibilityLabel: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, returnKeyType: "next", style: styles3.hiddenTagInput, pointerEvents: "none" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper3.TextInput, { ref: name.ref, ...name.props, onSubmitEditing: onSubmit, mode: "outlined", dense: true, value: draftName, onChangeText: onNameChange, maxLength: MAX_PROFILE_NAME_LENGTH, placeholder: "Name", autoFocus, returnKeyType: "done", style: styles3.nameInput }),
-    onDelete && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_feedback_press2.TouchableRipple, { onPress: onDelete, style: styles3.iconButton, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper3.Icon, { source: "trash-can-outline", size: 18, color: fgMuted }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native4.View, { style: styles4.editRow, children: [
+    useColorPickerAlign ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AlignedColorPicker, { useAlign: useColorPickerAlign, id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_hud2.InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper4.TextInput, { ref: tag.ref, ...tag.props, value: draftTag, onChangeText: onTagChange, accessibilityLabel: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, returnKeyType: "next", style: styles4.hiddenTagInput, pointerEvents: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper4.TextInput, { ref: name.ref, ...name.props, onSubmitEditing: onSubmit, mode: "outlined", dense: true, value: draftName, onChangeText: onNameChange, maxLength: MAX_PROFILE_NAME_LENGTH, placeholder: "Name", autoFocus, returnKeyType: "done", style: styles4.nameInput }),
+    onDelete && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: onDelete, style: styles4.iconButton, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper4.Icon, { source: "trash-can-outline", size: 18, color: fgMuted }) })
   ] });
 }
-var styles3 = import_react_native3.StyleSheet.create({
+var styles4 = import_react_native4.StyleSheet.create({
   content: {
     gap: 4,
     paddingHorizontal: 20
@@ -668,23 +722,23 @@ var styles3 = import_react_native3.StyleSheet.create({
 });
 
 // src/ProfilesScreen.tsx
-var import_auto_paper4 = require("@rific/auto-paper");
-var import_feedback_press3 = require("@rific/feedback-press");
-var import_react4 = require("react");
-var import_react_native4 = require("react-native");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_auto_paper5 = require("@rific/auto-paper");
+var import_feedback_press4 = require("@rific/feedback-press");
+var import_react5 = require("react");
+var import_react_native5 = require("react-native");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, titleVariant, colorPreview, useColorPickerAlign }) {
-  const { dark } = (0, import_auto_paper4.useAutoPaperTheme)();
-  const managerRef = (0, import_react4.useRef)(null);
+  const { dark } = (0, import_auto_paper5.useAutoPaperTheme)();
+  const managerRef = (0, import_react5.useRef)(null);
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const bg = bgOverride ?? (dark ? "#000000" : "#FFFFFF");
   const handleBack = () => {
     managerRef.current?.commitPendingEdit();
     onBack();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.View, { style: [styles4.container, { backgroundColor: bg }], children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, titleVariant, colorPreview, useColorPickerAlign, headerLeft: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native5.View, { style: [styles5.container, { backgroundColor: bg }], children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, titleVariant, colorPreview, useColorPickerAlign, headerLeft: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_feedback_press4.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
 }
-var styles4 = import_react_native4.StyleSheet.create({
+var styles5 = import_react_native5.StyleSheet.create({
   container: {
     flex: 1
   }
@@ -848,36 +902,67 @@ async function resolveInitialProfiles(groupId, localFallback) {
 
 // src/redux/seatColorsSlice.ts
 var REHYDRATE2 = "persist/REHYDRATE";
+function sameColor(a, b) {
+  return a.toLowerCase() === b.toLowerCase();
+}
+function profileSeatColor(profile, profileColors) {
+  const pick = profileColors[profile.id];
+  return pick && sameColor(pick.profileColor, profile.color) ? pick.color : profile.color;
+}
 function createSeatColorsSlice(namespace, defaultState, mountKey = "seatColors") {
   const setLastCpuColor = createActionCreator(`seatColors/${namespace}/setLastCpuColor`);
   const setLastGuestColor = createActionCreator(`seatColors/${namespace}/setLastGuestColor`);
-  const setProfileOverride = createActionCreator(`seatColors/${namespace}/setProfileOverride`);
+  const setProfileColor = createActionCreator(`seatColors/${namespace}/setProfileColor`);
+  function withoutPick(state, id) {
+    if (!state.profileColors[id]) return state;
+    const profileColors = { ...state.profileColors };
+    delete profileColors[id];
+    return { ...state, profileColors };
+  }
   function reducer(state = defaultState, action) {
     if (action.type === REHYDRATE2) {
       const persisted = action.payload?.[mountKey];
-      return { ...defaultState, ...state, ...persisted };
+      const next = { ...defaultState, ...state, ...persisted };
+      delete next.profileOverride;
+      return next;
     }
     if (setLastCpuColor.match(action)) return { ...state, lastCpuColor: action.payload };
     if (setLastGuestColor.match(action)) return { ...state, lastGuestColor: { ...state.lastGuestColor, [action.payload.seat]: action.payload.color } };
-    if (setProfileOverride.match(action)) return { ...state, profileOverride: { ...state.profileOverride, [action.payload.seat]: action.payload.color } };
+    if (setProfileColor.match(action)) {
+      const { profile, color } = action.payload;
+      if (color === null || sameColor(color, profile.color)) return withoutPick(state, profile.id);
+      return { ...state, profileColors: { ...state.profileColors, [profile.id]: { color, profileColor: profile.color } } };
+    }
+    if (profilesActions.remove.match(action)) return withoutPick(state, action.payload);
+    if (profilesActions.update.match(action)) {
+      const { id, patch } = action.payload;
+      const pick = state.profileColors[id];
+      return pick && patch.color !== void 0 && !sameColor(patch.color, pick.profileColor) ? withoutPick(state, id) : state;
+    }
+    if (profilesActions.setAll.match(action)) {
+      return action.payload.reduce((next, profile) => {
+        const pick = next.profileColors[profile.id];
+        return pick && !sameColor(profile.color, pick.profileColor) ? withoutPick(next, profile.id) : next;
+      }, state);
+    }
     return state;
   }
-  return { actions: { setLastCpuColor, setLastGuestColor, setProfileOverride }, reducer };
+  return { actions: { setLastCpuColor, setLastGuestColor, setProfileColor }, reducer };
 }
 
 // src/redux/useSharedProfilesSync.ts
-var import_react5 = require("react");
-var import_react_native5 = require("react-native");
+var import_react6 = require("react");
+var import_react_native6 = require("react-native");
 function useSharedProfilesSync({ groupId, onRemoteChange }) {
-  const pendingWriteRef = (0, import_react5.useRef)(false);
-  const onRemoteChangeRef = (0, import_react5.useRef)(onRemoteChange);
-  (0, import_react5.useEffect)(() => {
+  const pendingWriteRef = (0, import_react6.useRef)(false);
+  const onRemoteChangeRef = (0, import_react6.useRef)(onRemoteChange);
+  (0, import_react6.useEffect)(() => {
     onRemoteChangeRef.current = onRemoteChange;
   }, [onRemoteChange]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!isSharedProfileStoreAvailable) return;
     let cancelled = false;
-    const sub = import_react_native5.AppState.addEventListener("change", (next) => {
+    const sub = import_react_native6.AppState.addEventListener("change", (next) => {
       if (next !== "active" || pendingWriteRef.current) return;
       readSharedProfiles(groupId).then((shared) => {
         if (!cancelled && shared !== null) onRemoteChangeRef.current(shared);
@@ -888,7 +973,7 @@ function useSharedProfilesSync({ groupId, onRemoteChange }) {
       sub.remove();
     };
   }, [groupId]);
-  const syncToShared = (0, import_react5.useCallback)(
+  const syncToShared = (0, import_react6.useCallback)(
     (next) => {
       if (!isSharedProfileStoreAvailable) return;
       pendingWriteRef.current = true;
@@ -912,6 +997,7 @@ function avoidSeatColorClash(p1Color, p2Color, defaults) {
 0 && (module.exports = {
   MAX_PROFILE_NAME_LENGTH,
   MAX_TAG_LENGTH,
+  OptionPicker,
   ProfileChip,
   ProfileColorProvider,
   ProfilePicker,
@@ -922,11 +1008,13 @@ function avoidSeatColorClash(p1Color, p2Color, defaults) {
   createProfileRecord,
   createProfileSelectionSlice,
   createSeatColorsSlice,
+  getOptionPickerContentSize,
   getProfilePickerContentSize,
   isSharedProfileStoreAvailable,
   isValidProfile,
   isValidTag,
   loadSharedProfiles,
+  profileSeatColor,
   profilesActions,
   profilesReducer,
   readSharedProfiles,