@tastic/profile 0.14.1 → 0.16.0

package/dist/index.mjs

@@ -5,18 +5,67 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
 
+// src/PickerMenu.tsx
+import { defaultColors, FadingScrollView, getContrastColor as getContrastColor2 } from "@rific/auto-paper";
+import { TouchableRipple } from "@rific/feedback-press";
+import { PopoverBody, useAutoAlign } from "@tastic/hud/chrome";
+import { useState } from "react";
+import { StyleSheet as StyleSheet3, View as View3 } from "react-native";
+import { Icon as Icon2, Text as Text2 } from "react-native-paper";
+
 // src/IdentityChip.tsx
 import { getContrastColor } from "@rific/auto-paper";
-import { StyleSheet, View } from "react-native";
+import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
 import { Icon, Text } from "react-native-paper";
+
+// src/ProfileColorContext.tsx
+import { createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
+var ProfileColorContext = createContext({});
+function ProfileColorProvider({ preview, renderSwatch, children }) {
+  const value = useMemo(() => ({ preview, renderSwatch }), [preview, renderSwatch]);
+  return /* @__PURE__ */ jsx(ProfileColorContext.Provider, { value, children });
+}
+function useProfileColorPreview() {
+  return useContext(ProfileColorContext).preview;
+}
+function useProfileSwatchRenderer() {
+  return useContext(ProfileColorContext).renderSwatch;
+}
+function useProfileDisplayColor(hex) {
+  const preview = useProfileColorPreview();
+  return preview ? preview(hex) : hex;
+}
+
+// src/SwatchLayer.tsx
+import { StyleSheet, View } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function SwatchLayer({ render, color, size }) {
+  return /* @__PURE__ */ jsx2(View, { style: [styles.layer, { borderRadius: size / 2, height: size, width: size }], children: render(color, size) });
+}
+var styles = StyleSheet.create({
+  layer: {
+    left: 0,
+    overflow: "hidden",
+    pointerEvents: "none",
+    position: "absolute",
+    top: 0
+  }
+});
+
+// src/IdentityChip.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
 function IdentityChip({ color, tag, icon, size, filled = true }) {
+  const renderSwatch = useProfileSwatchRenderer();
   const contrastColor = getContrastColor(color);
   const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : tag && Array.from(tag).length >= 3 ? 0.32 : 0.4);
-  return /* @__PURE__ */ jsx(View, { style: [styles.chip, { borderRadius: size / 2, height: size, width: size }, filled && { backgroundColor: color }], children: tag ? /* @__PURE__ */ jsx(Text, { style: [styles.tag, { color: contrastColor, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ jsx(Icon, { source: icon, size: size * 0.6, color: contrastColor }) });
+  return /* @__PURE__ */ jsxs(View2, { style: [styles2.chip, { borderRadius: size / 2, height: size, width: size }, filled && !renderSwatch && { backgroundColor: color }], children: [
+    filled && renderSwatch && /* @__PURE__ */ jsx3(SwatchLayer, { render: renderSwatch, color, size }),
+    tag ? /* @__PURE__ */ jsx3(Text, { style: [styles2.tag, { color: contrastColor, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ jsx3(Icon, { source: icon, size: size * 0.6, color: contrastColor })
+  ] });
 }
-var styles = StyleSheet.create({
+var styles2 = StyleSheet2.create({
   chip: {
     alignItems: "center",
     justifyContent: "center"
@@ -27,36 +76,8 @@ var styles = StyleSheet.create({
   }
 });
 
-// src/ProfileColorContext.tsx
-import { createContext, useContext } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var ProfileColorContext = createContext(void 0);
-function ProfileColorProvider({ preview, children }) {
-  return /* @__PURE__ */ jsx2(ProfileColorContext.Provider, { value: preview, children });
-}
-function useProfileColorPreview() {
-  return useContext(ProfileColorContext);
-}
-function useProfileDisplayColor(hex) {
-  const preview = useProfileColorPreview();
-  return preview ? preview(hex) : hex;
-}
-
-// src/ProfileChip.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-function ProfileChip({ profile, size = 22, filled = true }) {
-  const color = useProfileDisplayColor(profile.color);
-  return /* @__PURE__ */ jsx3(IdentityChip, { color, tag: profile.tag, icon: "account", size, filled });
-}
-
-// src/ProfilePicker.tsx
-import { defaultColors, FadingScrollView, getContrastColor as getContrastColor2 } from "@rific/auto-paper";
-import { TouchableRipple } from "@rific/feedback-press";
-import { PopoverBody, useAutoAlign } from "@tastic/hud";
-import { useMemo, useState } from "react";
-import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
-import { Icon as Icon2, Text as Text2 } from "react-native-paper";
-import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+// src/PickerMenu.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var TRIGGER_HEIGHT = 28;
 var POPOVER_WIDTH = 220;
 var ROW_HEIGHT = 36;
@@ -67,6 +88,8 @@ var CHIP_SIZE = 32;
 var CHIP_TRIGGER_PADDING = 6;
 var SWATCH_SIZE = 28;
 var SWATCH_MIN_GAP = 6;
+var SWATCH_RING_WIDTH = 2;
+var COLOR_ROW_SWATCH_SIZE = 22;
 var COLOR_ROW_CAPTIONED_HEIGHT = 48;
 var COLOR_LABEL_LINE = 18;
 var COLOR_CAPTION_LINE = 16;
@@ -83,59 +106,41 @@ 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 ?? 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 = useMemo(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
-  const { width: contentWidth, height: contentHeight } = getProfilePickerContentSize(profiles.length, !!onManage, colorSection);
-  const auto = useAutoAlign(open, contentWidth, contentHeight, rotation);
+  const auto = 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 chipTrigger = !!chip;
   const [triggerWidth, setTriggerWidth] = useState(0);
   const handleAnchorLayout = chipTrigger ? (e) => setTriggerWidth(e.nativeEvent.layout.width) : void 0;
   const [colorPage, setColorPage] = 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__ */ jsxs(View2, { style: [styles2.anchor, open && styles2.anchorOpen], onLayout: handleAnchorLayout, children: [
-    /* @__PURE__ */ jsx4(TouchableRipple, { onPress: handleTriggerPress, borderless: chipTrigger, style: [styles2.trigger, chipTrigger && styles2.chipTrigger, triggerStyle], accessibilityRole: "button", accessibilityLabel: triggerLabel, children: /* @__PURE__ */ jsxs(View2, { ref: triggerRef, collapsable: false, style: chipTrigger ? styles2.chipTriggerInner : styles2.triggerInner, children: [
-      chipTrigger && /* @__PURE__ */ jsx4(IdentityChip, { color, tag: selectedProfile?.tag, icon: selectedProfile ? "account" : nullIcon, size: CHIP_SIZE }),
-      /* @__PURE__ */ jsx4(Text2, { style: [styles2.triggerLabel, { color: chipTrigger ? fg : color }], numberOfLines: 1, children: triggerLabel }),
+  const triggerLabel = label.toUpperCase();
+  const showFooter = !!footer && !showColorPage;
+  return /* @__PURE__ */ jsxs2(View3, { style: [styles3.anchor, open && styles3.anchorOpen], onLayout: handleAnchorLayout, children: [
+    /* @__PURE__ */ jsx4(TouchableRipple, { onPress: handleTriggerPress, borderless: chipTrigger, style: [styles3.trigger, chipTrigger && styles3.chipTrigger, triggerStyle], accessibilityRole: "button", accessibilityLabel: triggerLabel, children: /* @__PURE__ */ jsxs2(View3, { ref: triggerRef, collapsable: false, style: chipTrigger ? styles3.chipTriggerInner : styles3.triggerInner, children: [
+      chip && /* @__PURE__ */ jsx4(IdentityChip, { color, tag: chip.tag, icon: chip.icon, size: CHIP_SIZE }),
+      /* @__PURE__ */ jsx4(Text2, { style: [styles3.triggerLabel, { color: chipTrigger ? fg : color }], numberOfLines: 1, children: triggerLabel }),
       /* @__PURE__ */ jsx4(Icon2, { source: "menu-down", size: 16, color: chipTrigger ? fg : color })
     ] }) }),
-    /* @__PURE__ */ jsx4(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: chipTrigger ? triggerWidth : TRIGGER_HEIGHT, children: /* @__PURE__ */ jsxs(
-      View2,
+    /* @__PURE__ */ jsx4(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: chipTrigger ? triggerWidth : TRIGGER_HEIGHT, children: /* @__PURE__ */ jsxs2(
+      View3,
       {
         style: [
-          styles2.menu,
+          styles3.menu,
           {
             backgroundColor: menuBg,
             borderColor: color,
@@ -144,78 +149,88 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, d
           }
         ],
         children: [
-          /* @__PURE__ */ jsx4(FadingScrollView, { contentContainerStyle: [styles2.menuContent, manageFooter && styles2.menuContentAboveFooter], showsVerticalScrollIndicator: false, children: colorSection && colorPage ? /* @__PURE__ */ jsx4(ColorPage, { section: colorSection, profileColor: selectedProfile?.color, fg, onBack: () => setColorPage(false) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx4(FadingScrollView, { contentContainerStyle: [styles3.menuContent, showFooter && styles3.menuContentAboveFooter], showsVerticalScrollIndicator: false, children: colorSection && colorPage ? /* @__PURE__ */ jsx4(ColorPage, { section: colorSection, homeColor, fg, onBack: () => setColorPage(false) }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
             colorSection && /* @__PURE__ */ jsx4(ColorRow, { section: colorSection, fg, dividerColor: color, onPress: () => setColorPage(true) }),
-            /* @__PURE__ */ jsx4(TouchableRipple, { onPress: handleSelectGuest, style: [styles2.row, selectedId === null && { backgroundColor: color }], children: /* @__PURE__ */ jsxs(View2, { style: styles2.rowInner, children: [
-              /* @__PURE__ */ jsx4(View2, { style: styles2.guestChip, children: /* @__PURE__ */ jsx4(Icon2, { source: nullIcon, size: 13, color: selectedId === null ? getContrastColor2(color) : fg }) }),
-              /* @__PURE__ */ jsx4(Text2, { style: [styles2.rowLabel, { color: selectedId === null ? getContrastColor2(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__ */ jsx4(TouchableRipple, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [styles2.row, selected && { backgroundColor: rowColor }], children: /* @__PURE__ */ jsxs(View2, { style: [styles2.rowInner, taken && styles2.rowDisabled], children: [
-                /* @__PURE__ */ jsx4(ProfileChip, { profile, filled: !selected }),
-                /* @__PURE__ */ jsx4(
-                  Text2,
-                  {
-                    style: [
-                      styles2.rowLabel,
-                      {
-                        color: selected ? getContrastColor2(rowColor) : fg
-                      }
-                    ],
-                    numberOfLines: 1,
-                    children: profile.name
-                  }
-                )
-              ] }) }, profile.id);
-            })
-          ] }) }, colorSection && colorPage ? "color" : "list"),
-          manageFooter && /* @__PURE__ */ jsxs(View2, { style: styles2.menuFooter, children: [
-            /* @__PURE__ */ jsx4(View2, { style: [styles2.divider, { backgroundColor: color }] }),
-            /* @__PURE__ */ jsx4(TouchableRipple, { onPress: handleManage, style: styles2.row, children: /* @__PURE__ */ jsxs(View2, { style: styles2.manageRowInner, children: [
-              /* @__PURE__ */ jsx4(Icon2, { source: "account-cog-outline", size: 16, color }),
-              /* @__PURE__ */ jsx4(Text2, { style: [styles2.manageLabel, { color: fg }], children: "Manage" })
-            ] }) })
+            children
+          ] }) }, showColorPage ? "color" : "list"),
+          showFooter && /* @__PURE__ */ jsxs2(View3, { style: styles3.menuFooter, children: [
+            /* @__PURE__ */ jsx4(View3, { style: [styles3.divider, { backgroundColor: color }] }),
+            footer
           ] })
         ]
       }
     ) })
   ] });
 }
+function IconRow({ icon, label, selected, color, fg, disabled = false, onPress }) {
+  const textColor = selected ? getContrastColor2(color) : fg;
+  return /* @__PURE__ */ jsx4(TouchableRipple, { disabled, onPress, style: [pickerMenuStyles.row, selected && { backgroundColor: color }], children: /* @__PURE__ */ jsxs2(View3, { style: [pickerMenuStyles.rowInner, disabled && pickerMenuStyles.rowDisabled], children: [
+    /* @__PURE__ */ jsx4(View3, { style: styles3.iconSlot, children: /* @__PURE__ */ jsx4(Icon2, { source: icon, size: 13, color: textColor }) }),
+    /* @__PURE__ */ jsx4(Text2, { style: [pickerMenuStyles.rowLabel, { color: textColor }], numberOfLines: 1, children: label })
+  ] }) });
+}
 function ColorRow({ section, fg, dividerColor, onPress }) {
   const { value, previewValue, label = "Color", caption } = section;
+  const renderSwatch = useProfileSwatchRenderer();
   const drawn = previewValue ? previewValue(value) : value;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx4(TouchableRipple, { onPress, style: [styles2.row, { height: colorRowHeight(caption) }], accessibilityRole: "button", accessibilityLabel: caption ? `${label}, ${caption}` : label, children: /* @__PURE__ */ jsxs(View2, { style: styles2.rowInner, children: [
-      /* @__PURE__ */ jsx4(View2, { style: [styles2.colorRowSwatch, { backgroundColor: drawn }] }),
-      /* @__PURE__ */ jsxs(View2, { style: styles2.colorRowText, children: [
-        /* @__PURE__ */ jsx4(Text2, { style: [styles2.colorRowLabel, { color: fg }], numberOfLines: 1, children: label }),
-        caption ? /* @__PURE__ */ jsx4(Text2, { style: [styles2.colorRowCaption, { color: fg }], numberOfLines: 1, children: caption }) : null
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx4(TouchableRipple, { onPress, style: [pickerMenuStyles.row, { height: colorRowHeight(caption) }], accessibilityRole: "button", accessibilityLabel: caption ? `${label}, ${caption}` : label, children: /* @__PURE__ */ jsxs2(View3, { style: pickerMenuStyles.rowInner, children: [
+      /* @__PURE__ */ jsx4(View3, { style: [styles3.colorRowSwatch, !renderSwatch && { backgroundColor: drawn }], children: renderSwatch && /* @__PURE__ */ jsx4(SwatchLayer, { render: renderSwatch, color: drawn, size: COLOR_ROW_SWATCH_SIZE }) }),
+      /* @__PURE__ */ jsxs2(View3, { style: styles3.colorRowText, children: [
+        /* @__PURE__ */ jsx4(Text2, { style: [styles3.colorRowLabel, { color: fg }], numberOfLines: 1, children: label }),
+        caption ? /* @__PURE__ */ jsx4(Text2, { style: [styles3.colorRowCaption, { color: fg }], numberOfLines: 1, children: caption }) : null
       ] }),
       /* @__PURE__ */ jsx4(Icon2, { source: "chevron-right", size: 18, color: fg })
     ] }) }),
-    /* @__PURE__ */ jsx4(View2, { style: [styles2.divider, { backgroundColor: dividerColor }] })
+    /* @__PURE__ */ jsx4(View3, { style: [styles3.divider, { backgroundColor: dividerColor }] })
   ] });
 }
-function ColorPage({ section, profileColor, fg, onBack }) {
-  const { value, onChange, previewValue, swatches = defaultColors, label = "Color" } = section;
+function ColorPage({ section, homeColor, fg, onBack }) {
+  const { value, onChange, previewValue, swatches = defaultColors, label = "Color", takenValue, allowSwapTaken } = section;
+  const renderSwatch = useProfileSwatchRenderer();
   const displayFor = previewValue ?? ((hex) => hex);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx4(TouchableRipple, { onPress: onBack, style: styles2.row, accessibilityRole: "button", accessibilityLabel: "Back", children: /* @__PURE__ */ jsxs(View2, { style: styles2.rowInner, children: [
-      /* @__PURE__ */ jsx4(View2, { style: styles2.guestChip, children: /* @__PURE__ */ jsx4(Icon2, { source: "chevron-left", size: 20, color: fg }) }),
-      /* @__PURE__ */ jsx4(Text2, { style: [styles2.colorRowLabel, { color: fg }], numberOfLines: 1, children: label })
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx4(TouchableRipple, { onPress: onBack, style: pickerMenuStyles.row, accessibilityRole: "button", accessibilityLabel: "Back", children: /* @__PURE__ */ jsxs2(View3, { style: pickerMenuStyles.rowInner, children: [
+      /* @__PURE__ */ jsx4(View3, { style: styles3.iconSlot, children: /* @__PURE__ */ jsx4(Icon2, { source: "chevron-left", size: 20, color: fg }) }),
+      /* @__PURE__ */ jsx4(Text2, { style: [styles3.colorRowLabel, { color: fg }], numberOfLines: 1, children: label })
     ] }) }),
-    /* @__PURE__ */ jsx4(View2, { style: styles2.swatches, children: swatches.map((swatch) => {
+    /* @__PURE__ */ jsx4(View3, { style: styles3.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__ */ jsx4(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__ */ jsx4(Icon2, { source: "check", size: 16, color: getContrastColor2(swatchDisplay) }) : isProfileColor ? /* @__PURE__ */ jsx4(View2, { style: [styles2.profileDot, { backgroundColor: getContrastColor2(swatchDisplay) }] }) : /* @__PURE__ */ jsx4(View2, {}) }, swatch.value);
+      const contrast = getContrastColor2(swatchDisplay);
+      const accessibilityLabel = swappable ? `${swatch.label}, swap` : taken ? `${swatch.label}, taken` : isHomeColor ? `${swatch.label}, profile color` : swatch.label;
+      const mark = selected ? /* @__PURE__ */ jsx4(Icon2, { source: "check", size: 16, color: contrast }) : swappable ? /* @__PURE__ */ jsx4(Icon2, { source: "swap-horizontal", size: 16, color: contrast }) : taken ? /* @__PURE__ */ jsx4(Icon2, { source: "close", size: 16, color: contrast }) : isHomeColor ? /* @__PURE__ */ jsx4(View3, { style: [styles3.homeDot, { backgroundColor: contrast }] }) : /* @__PURE__ */ jsx4(View3, {});
+      return /* @__PURE__ */ jsx4(TouchableRipple, { disabled: taken && !swappable, onPress: () => onChange(swatch.value), borderless: true, style: [styles3.swatch, !renderSwatch && { backgroundColor: swatchDisplay }, selected && styles3.swatchSelected, taken && !swappable && styles3.swatchTaken], accessibilityRole: "button", accessibilityLabel, accessibilityState: { selected, disabled: taken && !swappable }, children: renderSwatch ? /* @__PURE__ */ jsxs2(View3, { style: styles3.swatchFace, children: [
+        /* @__PURE__ */ jsx4(SwatchLayer, { render: renderSwatch, color: swatchDisplay, size: selected ? SWATCH_SIZE - 2 * SWATCH_RING_WIDTH : SWATCH_SIZE }),
+        mark
+      ] }) : mark }, swatch.value);
     }) })
   ] });
 }
-var styles2 = StyleSheet2.create({
+var pickerMenuStyles = StyleSheet3.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 styles3 = StyleSheet3.create({
   anchor: {
     position: "relative"
   },
@@ -251,45 +266,38 @@ var styles2 = StyleSheet2.create({
   },
   // The color in effect, in the same 22pt slot as every row's chip.
   colorRowSwatch: {
-    borderRadius: 11,
-    height: 22,
-    width: 22
+    borderRadius: COLOR_ROW_SWATCH_SIZE / 2,
+    height: COLOR_ROW_SWATCH_SIZE,
+    width: COLOR_ROW_SWATCH_SIZE
   },
   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,
@@ -305,7 +313,7 @@ var styles2 = StyleSheet2.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
   },
@@ -313,30 +321,6 @@ var styles2 = StyleSheet2.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,
@@ -344,9 +328,22 @@ var styles2 = StyleSheet2.create({
     justifyContent: "center",
     width: SWATCH_SIZE
   },
+  // A drawn swatch (see ColorPage) and its mark: the whole circle inside the selected one's ring.
+  swatchFace: {
+    alignItems: "center",
+    bottom: 0,
+    justifyContent: "center",
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0
+  },
   swatchSelected: {
     borderColor: "#ffffff",
-    borderWidth: 2
+    borderWidth: SWATCH_RING_WIDTH
+  },
+  swatchTaken: {
+    opacity: 0.35
   },
   swatches: {
     columnGap: GRID_GAP,
@@ -374,15 +371,114 @@ var styles2 = StyleSheet2.create({
   }
 });
 
-// src/ProfilesManager.tsx
-import { defaultColors as defaultColors2, useAutoPaperTheme } from "@rific/auto-paper";
+// src/OptionPicker.tsx
+import { jsx as jsx5 } from "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__ */ jsx5(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__ */ jsx5(IconRow, { icon: option.icon ?? rowIcon, label: option.label, selected: option.value === value, color, fg, onPress: () => handleSelect(option) }, option.value)) });
+}
+
+// src/ProfileChip.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function ProfileChip({ profile, size = 22, filled = true }) {
+  const color = useProfileDisplayColor(profile.color);
+  return /* @__PURE__ */ jsx6(IdentityChip, { color, tag: profile.tag, icon: "account", size, filled });
+}
+
+// src/ProfilePicker.tsx
+import { getContrastColor as getContrastColor3 } from "@rific/auto-paper";
 import { TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
+import { useMemo as useMemo2 } from "react";
+import { StyleSheet as StyleSheet4, View as View4 } from "react-native";
+import { Icon as Icon3, Text as Text3 } from "react-native-paper";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function getProfilePickerContentSize(profileCount, hasManageRow = false, colorSection) {
+  return pickerContentSize(profileCount + 1 + (hasManageRow ? 1 : 0), colorSection);
+}
+function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, takenIds, 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 = useMemo2(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
+  const contentSize = getProfilePickerContentSize(profiles.length, !!onManage, colorSection);
+  const isTaken = (profileId) => profileId === takenId || profileId !== selectedId && !!takenIds?.includes(profileId);
+  const handleSelectGuest = () => {
+    onSelect(null);
+    host.close();
+  };
+  const handleSelectExisting = (profile) => {
+    if (isTaken(profile.id)) return;
+    onSelect(profile);
+    host.close();
+  };
+  const handleManage = () => {
+    host.close();
+    onManage?.();
+  };
+  const manageFooter = onManage ? /* @__PURE__ */ jsx7(TouchableRipple2, { onPress: handleManage, style: pickerMenuStyles.row, children: /* @__PURE__ */ jsxs3(View4, { style: styles4.manageRowInner, children: [
+    /* @__PURE__ */ jsx7(Icon3, { source: "account-cog-outline", size: 16, color }),
+    /* @__PURE__ */ jsx7(Text3, { style: [styles4.manageLabel, { color: fg }], children: "Manage" })
+  ] }) }) : void 0;
+  return /* @__PURE__ */ jsxs3(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__ */ jsx7(IconRow, { icon: nullIcon, label: nullLabel, selected: selectedId === null, color, 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 /* @__PURE__ */ jsx7(TouchableRipple2, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [pickerMenuStyles.row, selected && { backgroundColor: rowColor }], children: /* @__PURE__ */ jsxs3(View4, { style: [pickerMenuStyles.rowInner, taken && pickerMenuStyles.rowDisabled], children: [
+        /* @__PURE__ */ jsx7(ProfileChip, { profile, filled: !selected }),
+        /* @__PURE__ */ jsx7(
+          Text3,
+          {
+            style: [
+              pickerMenuStyles.rowLabel,
+              {
+                color: selected ? getContrastColor3(rowColor) : fg
+              }
+            ],
+            numberOfLines: 1,
+            children: profile.name
+          }
+        )
+      ] }) }, profile.id);
+    })
+  ] });
+}
+var styles4 = StyleSheet4.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
+import { defaultColors as defaultColors2, FadingScrollView as FadingScrollView2, useAutoPaperTheme } from "@rific/auto-paper";
+import { TouchableRipple as TouchableRipple3 } from "@rific/feedback-press";
 import { useFocusChain } from "@rific/focus-chain";
 import { useToast } from "@rific/toaster";
-import { ConfirmDialog, getInlineColorPickerContentSize, InlineColorPicker, usePopoverHost } from "@tastic/hud";
-import { useCallback, useEffect, useImperativeHandle, useMemo as useMemo2, useRef, useState as useState2 } from "react";
-import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet as StyleSheet3, useWindowDimensions, View as View3 } from "react-native";
-import { Icon as Icon3, Text as Text3, TextInput } from "react-native-paper";
+import { ConfirmDialog, getInlineColorPickerContentSize, InlineColorPicker, usePopoverHost } from "@tastic/hud/chrome";
+import { useCallback, useEffect, useImperativeHandle, useMemo as useMemo3, useRef, useState as useState2 } from "react";
+import { KeyboardAvoidingView, Platform, StyleSheet as StyleSheet5, useWindowDimensions, View as View5 } from "react-native";
+import { Icon as Icon4, Text as Text4, TextInput } from "react-native-paper";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 // src/profilesValidation.ts
@@ -418,7 +514,7 @@ function isValidProfile(value) {
 }
 
 // src/ProfilesManager.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var CHIP_SIZE2 = 40;
 function deriveTag(name) {
   const trimmed = name.trim();
@@ -493,40 +589,40 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
     }
     setConfirmDeleteId(null);
   }, [confirmDeleteId, editingId, onDelete]);
-  const sortedProfiles = useMemo2(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
+  const sortedProfiles = useMemo3(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
   const rows = [...sortedProfiles.map((profile) => ({ kind: "profile", profile })), { kind: "new" }];
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsxs2(View3, { style: [styles3.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsxs4(View5, { style: [styles5.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
       headerLeft,
-      /* @__PURE__ */ jsx5(Text3, { variant: titleVariant, style: [styles3.title, { color: fg }], children: "Profiles" })
+      /* @__PURE__ */ jsx8(Text4, { variant: titleVariant, style: [styles5.title, { color: fg }], children: "Profiles" })
     ] }),
-    /* @__PURE__ */ jsx5(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : void 0, style: styles3.keyboardAvoiding, children: /* @__PURE__ */ jsx5(ScrollView, { style: styles3.scrollView, contentContainerStyle: [styles3.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: rows.map((row) => {
+    /* @__PURE__ */ jsx8(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : void 0, style: styles5.keyboardAvoiding, children: /* @__PURE__ */ jsx8(FadingScrollView2, { style: styles5.scrollView, contentContainerStyle: [styles5.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: rows.map((row) => {
       if (row.kind === "new") {
         if (editingId !== "new") {
-          return /* @__PURE__ */ jsx5(TouchableRipple2, { onPress: () => startEdit("new"), style: styles3.row, children: /* @__PURE__ */ jsxs2(View3, { style: styles3.rowInner, children: [
-            /* @__PURE__ */ jsx5(View3, { style: [styles3.rowChip, styles3.newChip, { borderColor: fg }], children: /* @__PURE__ */ jsx5(Icon3, { source: "plus", size: 20, color: fg }) }),
-            /* @__PURE__ */ jsx5(Text3, { variant: "bodyLarge", style: { color: fg }, children: "New Profile" })
+          return /* @__PURE__ */ jsx8(TouchableRipple3, { onPress: () => startEdit("new"), style: styles5.row, children: /* @__PURE__ */ jsxs4(View5, { style: styles5.rowInner, children: [
+            /* @__PURE__ */ jsx8(View5, { style: [styles5.rowChip, styles5.newChip, { borderColor: fg }], children: /* @__PURE__ */ jsx8(Icon4, { source: "plus", size: 20, color: fg }) }),
+            /* @__PURE__ */ jsx8(Text4, { variant: "bodyLarge", style: { color: fg }, children: "New Profile" })
           ] }) }, "new");
         }
-        return /* @__PURE__ */ jsx5(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, autoFocus: true, fgMuted, host, dark, colorPreview, useColorPickerAlign }, "new");
+        return /* @__PURE__ */ jsx8(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__ */ jsx5(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__ */ jsx8(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__ */ jsx5(TouchableRipple2, { onPress: () => startEdit(profile), style: styles3.row, children: /* @__PURE__ */ jsxs2(View3, { style: styles3.rowInner, children: [
-        /* @__PURE__ */ jsx5(ProfileChip, { profile, size: CHIP_SIZE2 }),
-        /* @__PURE__ */ jsx5(Text3, { variant: "bodyLarge", style: [styles3.rowName, { color: fg }], numberOfLines: 1, children: profile.name })
+      return /* @__PURE__ */ jsx8(TouchableRipple3, { onPress: () => startEdit(profile), style: styles5.row, children: /* @__PURE__ */ jsxs4(View5, { style: styles5.rowInner, children: [
+        /* @__PURE__ */ jsx8(ProfileChip, { profile, size: CHIP_SIZE2 }),
+        /* @__PURE__ */ jsx8(Text4, { variant: "bodyLarge", style: [styles5.rowName, { color: fg }], numberOfLines: 1, children: profile.name })
       ] }) }, profile.id);
     }) }) }),
-    /* @__PURE__ */ jsx5(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__ */ jsx8(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 } = useWindowDimensions();
   const { width, height } = getInlineColorPickerContentSize(defaultColors2.length, windowWidth);
   const alignOverride = useAlign(props.host.openId === props.id, width, height);
-  return /* @__PURE__ */ jsx5(InlineColorPicker, { ...props, alignOverride });
+  return /* @__PURE__ */ jsx8(InlineColorPicker, { ...props, alignOverride });
 }
 function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark, colorPreview, useColorPickerAlign }) {
   const register = useFocusChain();
@@ -539,14 +635,14 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
   useEffect(() => {
     if (host.openId === "color") tagFocusRef.current();
   }, [host.openId]);
-  return /* @__PURE__ */ jsxs2(View3, { style: styles3.editRow, children: [
-    useColorPickerAlign ? /* @__PURE__ */ jsx5(AlignedColorPicker, { useAlign: useColorPickerAlign, id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }) : /* @__PURE__ */ jsx5(InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }),
-    /* @__PURE__ */ jsx5(TextInput, { ref: tag.ref, ...tag.props, value: draftTag, onChangeText: onTagChange, accessibilityLabel: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, returnKeyType: "next", style: styles3.hiddenTagInput, pointerEvents: "none" }),
-    /* @__PURE__ */ jsx5(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__ */ jsx5(TouchableRipple2, { onPress: onDelete, style: styles3.iconButton, children: /* @__PURE__ */ jsx5(Icon3, { source: "trash-can-outline", size: 18, color: fgMuted }) })
+  return /* @__PURE__ */ jsxs4(View5, { style: styles5.editRow, children: [
+    useColorPickerAlign ? /* @__PURE__ */ jsx8(AlignedColorPicker, { useAlign: useColorPickerAlign, id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }) : /* @__PURE__ */ jsx8(InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }),
+    /* @__PURE__ */ jsx8(TextInput, { ref: tag.ref, ...tag.props, value: draftTag, onChangeText: onTagChange, accessibilityLabel: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, returnKeyType: "next", style: styles5.hiddenTagInput, pointerEvents: "none" }),
+    /* @__PURE__ */ jsx8(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: styles5.nameInput }),
+    onDelete && /* @__PURE__ */ jsx8(TouchableRipple3, { onPress: onDelete, style: styles5.iconButton, children: /* @__PURE__ */ jsx8(Icon4, { source: "trash-can-outline", size: 18, color: fgMuted }) })
   ] });
 }
-var styles3 = StyleSheet3.create({
+var styles5 = StyleSheet5.create({
   content: {
     gap: 4,
     paddingHorizontal: 20
@@ -628,8 +724,8 @@ var styles3 = StyleSheet3.create({
 import { useAutoPaperTheme as useAutoPaperTheme2 } from "@rific/auto-paper";
 import { IconButton } from "@rific/feedback-press";
 import { useRef as useRef2 } from "react";
-import { StyleSheet as StyleSheet4, View as View4 } from "react-native";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet6, View as View6 } from "react-native";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, titleVariant, colorPreview, useColorPickerAlign }) {
   const { dark } = useAutoPaperTheme2();
   const managerRef = useRef2(null);
@@ -639,9 +735,9 @@ function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, on
     managerRef.current?.commitPendingEdit();
     onBack();
   };
-  return /* @__PURE__ */ jsx6(View4, { style: [styles4.container, { backgroundColor: bg }], children: /* @__PURE__ */ jsx6(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, titleVariant, colorPreview, useColorPickerAlign, headerLeft: /* @__PURE__ */ jsx6(IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
+  return /* @__PURE__ */ jsx9(View6, { style: [styles6.container, { backgroundColor: bg }], children: /* @__PURE__ */ jsx9(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, titleVariant, colorPreview, useColorPickerAlign, headerLeft: /* @__PURE__ */ jsx9(IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
 }
-var styles4 = StyleSheet4.create({
+var styles6 = StyleSheet6.create({
   container: {
     flex: 1
   }
@@ -752,6 +848,7 @@ function createProfileRecord(input) {
 }
 
 // src/sharedProfileStore.ts
+import { Platform as Platform2 } from "react-native";
 var native = null;
 try {
   const { requireOptionalNativeModule } = __require("expo-modules-core");
@@ -760,15 +857,42 @@ try {
   native = null;
 }
 var PROFILES_KEY = "sharedProfiles";
-var isSharedProfileStoreAvailable = native !== null;
-async function readSharedProfiles(groupId) {
-  if (!native) return [];
-  let json = null;
+var webKey = (groupId, key) => `${groupId}:${key}`;
+var createWebStore = () => {
+  if (Platform2.OS !== "web") return null;
   try {
-    json = await native.getSharedJSON(groupId, PROFILES_KEY);
+    const storage = globalThis.localStorage;
+    if (!storage) return null;
+    const probe = webKey("@tastic/profile", "probe");
+    storage.setItem(probe, "1");
+    storage.removeItem(probe);
+    let lastWriteFailed = false;
+    return {
+      storage,
+      store: {
+        getSharedJSON: async (groupId, key) => {
+          if (lastWriteFailed) throw new Error("The last write to the shared roster failed");
+          return storage.getItem(webKey(groupId, key));
+        },
+        setSharedJSON: async (groupId, key, value) => {
+          try {
+            storage.setItem(webKey(groupId, key), value);
+            lastWriteFailed = false;
+          } catch (error) {
+            lastWriteFailed = true;
+            throw error;
+          }
+        }
+      }
+    };
   } catch {
     return null;
   }
+};
+var web = native ? null : createWebStore();
+if (web) native = web.store;
+var isSharedProfileStoreAvailable = native !== null;
+var parseRoster = (json) => {
   if (!json) return [];
   try {
     const parsed = JSON.parse(json);
@@ -778,6 +902,16 @@ async function readSharedProfiles(groupId) {
   } catch {
     return null;
   }
+};
+async function readSharedProfiles(groupId) {
+  if (!native) return [];
+  let json = null;
+  try {
+    json = await native.getSharedJSON(groupId, PROFILES_KEY);
+  } catch {
+    return null;
+  }
+  return parseRoster(json);
 }
 async function loadSharedProfiles(groupId) {
   return await readSharedProfiles(groupId) ?? [];
@@ -789,6 +923,19 @@ async function saveSharedProfiles(groupId, profiles) {
   } catch {
   }
 }
+function subscribeSharedProfiles(groupId, listener) {
+  if (!web || typeof window === "undefined" || typeof window.addEventListener !== "function") return () => {
+  };
+  const storageKey = webKey(groupId, PROFILES_KEY);
+  const storage = web.storage;
+  const onStorage = (event) => {
+    if (event.key !== storageKey || event.storageArea !== storage || !event.newValue) return;
+    const profiles = parseRoster(event.newValue);
+    if (profiles !== null) listener(profiles);
+  };
+  window.addEventListener("storage", onStorage);
+  return () => window.removeEventListener("storage", onStorage);
+}
 
 // src/redux/resolveInitialProfiles.ts
 async function resolveInitialProfiles(groupId, localFallback) {
@@ -805,21 +952,52 @@ 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
@@ -840,9 +1018,13 @@ function useSharedProfilesSync({ groupId, onRemoteChange }) {
         if (!cancelled && shared !== null) onRemoteChangeRef.current(shared);
       });
     });
+    const unsubscribe = subscribeSharedProfiles(groupId, (shared) => {
+      if (!cancelled && !pendingWriteRef.current) onRemoteChangeRef.current(shared);
+    });
     return () => {
       cancelled = true;
       sub.remove();
+      unsubscribe();
     };
   }, [groupId]);
   const syncToShared = useCallback2(
@@ -868,6 +1050,7 @@ function avoidSeatColorClash(p1Color, p2Color, defaults) {
 export {
   MAX_PROFILE_NAME_LENGTH,
   MAX_TAG_LENGTH,
+  OptionPicker,
   ProfileChip,
   ProfileColorProvider,
   ProfilePicker,
@@ -878,17 +1061,21 @@ export {
   createProfileRecord,
   createProfileSelectionSlice,
   createSeatColorsSlice,
+  getOptionPickerContentSize,
   getProfilePickerContentSize,
   isSharedProfileStoreAvailable,
   isValidProfile,
   isValidTag,
   loadSharedProfiles,
+  profileSeatColor,
   profilesActions,
   profilesReducer,
   readSharedProfiles,
   resolveInitialProfiles,
   saveSharedProfiles,
+  subscribeSharedProfiles,
   useProfileColorPreview,
   useProfileDisplayColor,
+  useProfileSwatchRenderer,
   useSharedProfilesSync
 };