@tastic/profile 0.9.0 → 0.11.0

package/README.md

@@ -244,15 +244,40 @@ so a host app plugs the reducer(s) into whatever store it already has:
 - **`createProfileSelectionSlice<TSeat>(namespace, defaultState)`** — a factory for the *other*
   per-seat piece of state: which profile id each seat currently has selected (parallel to
   `createProfileExtensionSlice` above, but keyed by seat instead of by profile id). Returns a
-  `{ actions: { select, clearProfile }, reducer }` pair over a plain `Record<TSeat, string | null>`.
+  `{ actions: { select, clearProfile, pruneToRoster }, reducer }` pair over a plain
+  `Record<TSeat, string | null>`.
   Unlike `createProfileExtensionSlice`, the seat set can't be derived from `TSeat` alone (types
   don't exist at runtime), so callers pass their own `defaultState` — the same literal object (e.g.
   `{ 1: null, 2: null }`) every app already declares today. `select({ seat, profileId })` sets one
   seat's selection directly; `clearProfile(profileId)` walks every seat and nulls out any that
   currently points at that id — call it when a profile is deleted so no seat is left referencing a
-  ghost id. Always local, like the guest/CPU/override colors below — never part of the shared
+  ghost id. `pruneToRoster(ids)` nulls every seat whose id is no longer in the given roster; dispatch
+  it after both `profilesActions.setAll` paths (the initial `resolveInitialProfiles` reconcile and
+  `onRemoteChange`), since a sibling app can delete a profile without this app's own delete ever
+  running, and it returns the same state object when nothing changes.
+  Always local, like the guest/CPU/override colors below, and never part of the shared
   App Group roster, since who's selected on *this* device is naturally per-app, per-device state.
 
+## Muted profile colors (`ProfileColorProvider`)
+
+An app that draws profile colors through a transform (Solitaire blends them toward its muted
+card-back palette) wraps its tree once:
+
+```tsx
+import { ProfileColorProvider } from '@tastic/profile'
+
+const preview = useCallback((hex: string) => blendTowardCardBack(hex, dark), [dark])
+<ProfileColorProvider preview={preview}>{children}</ProfileColorProvider>
+```
+
+Every `ProfileChip` then draws `preview(profile.color)` (contrast computed against that),
+`ProfilePicker`'s selected row fills with it, and `ProfilesManager`/`ProfilesScreen` use it for
+their swatch previews unless an explicit `colorPreview` prop is passed. Components from other
+packages that render a `ProfileChip` (e.g. `@tastic/hud`'s `AchievementUnlockList`) pick it up
+for free. Only what's drawn changes: saved colors, `onCreate`/`onSave` values and selection are
+untouched. `useProfileColorPreview()` returns the provider's function (or `undefined`), and
+`useProfileDisplayColor(hex)` resolves one color. Without a provider nothing changes.
+
 ## Per-seat color persistence
 
 A loadout/lobby screen's color for a given seat is never just "the selected profile's saved

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { RefObject, ReactNode, Ref } from 'react';
+import { ReactNode, RefObject, Ref } from 'react';
 import { PopoverHost, PopoverRotation } from '@tastic/hud';
 import { View } from 'react-native';
 
@@ -19,6 +19,14 @@ interface Props {
 }
 declare function ProfileChip({ profile, size, filled }: Props): react.JSX.Element;
 
+interface ProfileColorProviderProps {
+    preview: (hex: string) => string;
+    children: ReactNode;
+}
+declare function ProfileColorProvider({ preview, children }: ProfileColorProviderProps): react.JSX.Element;
+declare function useProfileColorPreview(): ((hex: string) => string) | undefined;
+declare function useProfileDisplayColor(hex: string): string;
+
 interface ProfilePickerAlignResult {
     align: 'left' | 'right' | 'center';
     verticalAlign: 'below' | 'above';
@@ -74,7 +82,7 @@ interface ProfilesManagerProps {
     colorPreview?: (hex: string) => string;
     useColorPickerAlign?: (open: boolean, contentWidth: number, contentHeight: number) => ProfilePickerAlignResult;
 }
-declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant, colorPreview, useColorPickerAlign }: ProfilesManagerProps): react.JSX.Element;
+declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant, colorPreview: colorPreviewProp, useColorPickerAlign }: ProfilesManagerProps): react.JSX.Element;
 
 type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface ProfilesScreenProps {
@@ -133,6 +141,7 @@ interface SelectProfilePayload<TSeat> {
 }
 interface ProfileSelectionActions<TSeat> {
     clearProfile: ActionCreator<string>;
+    pruneToRoster: ActionCreator<string[]>;
     select: ActionCreator<SelectProfilePayload<TSeat>>;
 }
 type ProfileSelectionState<TSeat extends string | number> = Record<TSeat, string | null>;
@@ -207,4 +216,4 @@ declare const isSharedProfileStoreAvailable: boolean;
 declare function loadSharedProfiles(groupId: string): Promise<Profile[]>;
 declare function saveSharedProfiles(groupId: string, profiles: Profile[]): Promise<void>;
 
-export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileExtensionPayload, type SetProfileOverridePayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profilesActions, profilesReducer, resolveInitialProfiles, saveSharedProfiles, useSharedProfilesSync };
+export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, ProfileColorProvider, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileExtensionPayload, type SetProfileOverridePayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profilesActions, profilesReducer, resolveInitialProfiles, saveSharedProfiles, useProfileColorPreview, useProfileDisplayColor, useSharedProfilesSync };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { RefObject, ReactNode, Ref } from 'react';
+import { ReactNode, RefObject, Ref } from 'react';
 import { PopoverHost, PopoverRotation } from '@tastic/hud';
 import { View } from 'react-native';
 
@@ -19,6 +19,14 @@ interface Props {
 }
 declare function ProfileChip({ profile, size, filled }: Props): react.JSX.Element;
 
+interface ProfileColorProviderProps {
+    preview: (hex: string) => string;
+    children: ReactNode;
+}
+declare function ProfileColorProvider({ preview, children }: ProfileColorProviderProps): react.JSX.Element;
+declare function useProfileColorPreview(): ((hex: string) => string) | undefined;
+declare function useProfileDisplayColor(hex: string): string;
+
 interface ProfilePickerAlignResult {
     align: 'left' | 'right' | 'center';
     verticalAlign: 'below' | 'above';
@@ -74,7 +82,7 @@ interface ProfilesManagerProps {
     colorPreview?: (hex: string) => string;
     useColorPickerAlign?: (open: boolean, contentWidth: number, contentHeight: number) => ProfilePickerAlignResult;
 }
-declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant, colorPreview, useColorPickerAlign }: ProfilesManagerProps): react.JSX.Element;
+declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant, colorPreview: colorPreviewProp, useColorPickerAlign }: ProfilesManagerProps): react.JSX.Element;
 
 type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface ProfilesScreenProps {
@@ -133,6 +141,7 @@ interface SelectProfilePayload<TSeat> {
 }
 interface ProfileSelectionActions<TSeat> {
     clearProfile: ActionCreator<string>;
+    pruneToRoster: ActionCreator<string[]>;
     select: ActionCreator<SelectProfilePayload<TSeat>>;
 }
 type ProfileSelectionState<TSeat extends string | number> = Record<TSeat, string | null>;
@@ -207,4 +216,4 @@ declare const isSharedProfileStoreAvailable: boolean;
 declare function loadSharedProfiles(groupId: string): Promise<Profile[]>;
 declare function saveSharedProfiles(groupId: string, profiles: Profile[]): Promise<void>;
 
-export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileExtensionPayload, type SetProfileOverridePayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profilesActions, profilesReducer, resolveInitialProfiles, saveSharedProfiles, useSharedProfilesSync };
+export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, ProfileColorProvider, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileExtensionPayload, type SetProfileOverridePayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profilesActions, profilesReducer, resolveInitialProfiles, saveSharedProfiles, useProfileColorPreview, useProfileDisplayColor, useSharedProfilesSync };

package/dist/index.js

@@ -23,6 +23,7 @@ __export(index_exports, {
   MAX_PROFILE_NAME_LENGTH: () => MAX_PROFILE_NAME_LENGTH,
   MAX_TAG_LENGTH: () => MAX_TAG_LENGTH,
   ProfileChip: () => ProfileChip,
+  ProfileColorProvider: () => ProfileColorProvider,
   ProfilePicker: () => ProfilePicker,
   ProfilesManager: () => ProfilesManager,
   ProfilesScreen: () => ProfilesScreen,
@@ -39,6 +40,8 @@ __export(index_exports, {
   profilesReducer: () => profilesReducer,
   resolveInitialProfiles: () => resolveInitialProfiles,
   saveSharedProfiles: () => saveSharedProfiles,
+  useProfileColorPreview: () => useProfileColorPreview,
+  useProfileDisplayColor: () => useProfileDisplayColor,
   useSharedProfilesSync: () => useSharedProfilesSync
 });
 module.exports = __toCommonJS(index_exports);
@@ -47,12 +50,30 @@ module.exports = __toCommonJS(index_exports);
 var import_auto_paper = require("@rific/auto-paper");
 var import_react_native = require("react-native");
 var import_react_native_paper = require("react-native-paper");
+
+// src/ProfileColorContext.tsx
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
+var ProfileColorContext = (0, import_react.createContext)(void 0);
+function ProfileColorProvider({ preview, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.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_runtime2 = require("react/jsx-runtime");
 var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
 function ProfileChip({ profile, size = 22, filled = true }) {
-  const contrastColor = (0, import_auto_paper.getContrastColor)(profile.color);
+  const color = useProfileDisplayColor(profile.color);
+  const contrastColor = (0, import_auto_paper.getContrastColor)(color);
   const tagFontSize = size * (profile.tag && EMOJI_PATTERN.test(profile.tag) ? 0.6 : 0.4);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.chip, { borderRadius: size / 2, height: size, width: size }, filled && { backgroundColor: profile.color }], children: profile.tag ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Text, { style: [styles.tag, { color: contrastColor, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: profile.tag }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Icon, { source: "account", size: size * 0.6, color: contrastColor }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.View, { style: [styles.chip, { borderRadius: size / 2, height: size, width: size }, filled && { backgroundColor: color }], children: profile.tag ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper.Text, { style: [styles.tag, { color: contrastColor, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: profile.tag }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper.Icon, { source: "account", size: size * 0.6, color: contrastColor }) });
 }
 var styles = import_react_native.StyleSheet.create({
   chip: {
@@ -69,10 +90,10 @@ var styles = import_react_native.StyleSheet.create({
 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_react2 = require("react");
 var import_react_native2 = require("react-native");
 var import_react_native_paper2 = require("react-native-paper");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var TRIGGER_HEIGHT = 28;
 var POPOVER_WIDTH = 220;
 var ROW_HEIGHT = 36;
@@ -83,11 +104,12 @@ function getProfilePickerContentSize(profileCount, hasManageRow = false) {
 }
 function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation = 0, guestLabel, nullLabel = "Player", nullIcon = "account-off-outline", onSelect, onManage }) {
   const id = `${idPrefix}-profile`;
+  const colorPreview = useProfileColorPreview();
   const menuBg = dark ? "#000000" : "#FFFFFF";
   const fg = dark ? "#FFFFFF" : "#000000";
   const open = host.openId === id;
   const selectedProfile = profiles.find((p) => p.id === selectedId) ?? null;
-  const sortedProfiles = (0, import_react.useMemo)(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
+  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);
   const auto = (0, import_hud.useAutoAlign)(open, contentWidth, contentHeight, rotation);
   const placement = alignOverride ?? auto;
@@ -106,12 +128,12 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, d
     host.close();
     onManage?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: [styles2.anchor, open && styles2.anchorOpen], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { onPress: () => host.toggle(id), style: styles2.trigger, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { ref: triggerRef, collapsable: false, style: styles2.triggerInner, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { style: [styles2.triggerLabel, { color }], numberOfLines: 1, children: (selectedProfile?.name ?? guestLabel).toUpperCase() }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Icon, { source: "menu-down", size: 16, color })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.View, { style: [styles2.anchor, open && styles2.anchorOpen], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press.TouchableRipple, { onPress: () => host.toggle(id), style: styles2.trigger, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.View, { ref: triggerRef, collapsable: false, style: styles2.triggerInner, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper2.Text, { style: [styles2.triggerLabel, { color }], numberOfLines: 1, children: (selectedProfile?.name ?? guestLabel).toUpperCase() }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper2.Icon, { source: "menu-down", size: 16, color })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_hud.PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hud.PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       import_react_native2.ScrollView,
       {
         style: [
@@ -126,22 +148,23 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, d
         contentContainerStyle: styles2.menuContent,
         showsVerticalScrollIndicator: false,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { onPress: handleSelectGuest, style: [styles2.row, selectedId === null && { backgroundColor: color }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles2.rowInner, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles2.guestChip, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Icon, { source: nullIcon, size: 13, color: selectedId === null ? (0, import_auto_paper2.getContrastColor)(color) : fg }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { style: [styles2.rowLabel, { color: selectedId === null ? (0, import_auto_paper2.getContrastColor)(color) : fg }], children: nullLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press.TouchableRipple, { onPress: handleSelectGuest, style: [styles2.row, selectedId === null && { backgroundColor: color }], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.View, { style: styles2.rowInner, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.View, { style: styles2.guestChip, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper2.Icon, { source: nullIcon, size: 13, color: selectedId === null ? (0, import_auto_paper2.getContrastColor)(color) : fg }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.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;
-            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [styles2.row, selected && { backgroundColor: profile.color }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: [styles2.rowInner, taken && styles2.rowDisabled], children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ProfileChip, { profile, filled: !selected }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            const rowColor = colorPreview ? colorPreview(profile.color) : profile.color;
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press.TouchableRipple, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [styles2.row, selected && { backgroundColor: rowColor }], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.View, { style: [styles2.rowInner, taken && styles2.rowDisabled], children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProfileChip, { profile, filled: !selected }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 import_react_native_paper2.Text,
                 {
                   style: [
                     styles2.rowLabel,
                     {
-                      color: selected ? (0, import_auto_paper2.getContrastColor)(profile.color) : fg
+                      color: selected ? (0, import_auto_paper2.getContrastColor)(rowColor) : fg
                     }
                   ],
                   numberOfLines: 1,
@@ -150,11 +173,11 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, d
               )
             ] }) }, profile.id);
           }),
-          onManage && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [styles2.divider, { backgroundColor: color }] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { onPress: handleManage, style: styles2.row, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles2.manageRowInner, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Icon, { source: "account-cog-outline", size: 16, color }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { style: [styles2.manageLabel, { color }], children: "Manage" })
+          onManage && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.View, { style: [styles2.divider, { backgroundColor: color }] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press.TouchableRipple, { onPress: handleManage, style: styles2.row, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.View, { style: styles2.manageRowInner, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper2.Icon, { source: "account-cog-outline", size: 16, color }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper2.Text, { style: [styles2.manageLabel, { color }], children: "Manage" })
             ] }) })
           ] })
         ]
@@ -258,7 +281,7 @@ 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_react2 = require("react");
+var import_react3 = require("react");
 var import_react_native3 = require("react-native");
 var import_react_native_paper3 = require("react-native-paper");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
@@ -296,13 +319,15 @@ function isValidProfile(value) {
 }
 
 // src/ProfilesManager.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var CHIP_SIZE = 40;
 function deriveTag(name) {
   const trimmed = name.trim();
   return trimmed ? trimmed[0].toUpperCase() : "";
 }
-function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant = "headlineSmall", colorPreview, useColorPickerAlign }) {
+function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant = "headlineSmall", colorPreview: colorPreviewProp, useColorPickerAlign }) {
+  const contextColorPreview = useProfileColorPreview();
+  const colorPreview = colorPreviewProp ?? contextColorPreview;
   const { dark, colors } = (0, import_auto_paper3.useAutoPaperTheme)();
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
   const { error: showErrorToast } = (0, import_toaster.useToast)();
@@ -313,13 +338,13 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
   const cardBorder = dark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)";
   const cancelBg = dark ? "#2A2A2A" : "#E0E0E0";
   const cancelFg = dark ? "#FFFFFF" : "#000000";
-  const [editingId, setEditingId] = (0, import_react2.useState)(null);
-  const [draftName, setDraftName] = (0, import_react2.useState)("");
-  const [draftColor, setDraftColor] = (0, import_react2.useState)(defaultColor);
-  const [draftTag, setDraftTag] = (0, import_react2.useState)("");
-  const [tagManuallySet, setTagManuallySet] = (0, import_react2.useState)(false);
-  const [confirmDeleteId, setConfirmDeleteId] = (0, import_react2.useState)(null);
-  const commitEdit = (0, import_react2.useCallback)(() => {
+  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 name = draftName.trim();
     if (editingId && name) {
       const tagValid = isValidTag(draftTag);
@@ -330,13 +355,13 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
     }
     setEditingId(null);
   }, [editingId, draftName, draftColor, draftTag, onCreate, onSave, showErrorToast]);
-  const commitEditRef = (0, import_react2.useRef)(commitEdit);
-  (0, import_react2.useEffect)(() => {
+  const commitEditRef = (0, import_react3.useRef)(commitEdit);
+  (0, import_react3.useEffect)(() => {
     commitEditRef.current = commitEdit;
   });
-  (0, import_react2.useEffect)(() => () => commitEditRef.current(), []);
-  (0, import_react2.useImperativeHandle)(ref, () => ({ commitPendingEdit: () => commitEditRef.current() }), []);
-  const startEdit = (0, import_react2.useCallback)(
+  (0, import_react3.useEffect)(() => () => commitEditRef.current(), []);
+  (0, import_react3.useImperativeHandle)(ref, () => ({ commitPendingEdit: () => commitEditRef.current() }), []);
+  const startEdit = (0, import_react3.useCallback)(
     (target) => {
       commitEdit();
       if (target === "new") {
@@ -354,61 +379,61 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
     },
     [commitEdit, defaultColor]
   );
-  const handleNameChange = (0, import_react2.useCallback)(
+  const handleNameChange = (0, import_react3.useCallback)(
     (name) => {
       setDraftName(name);
       if (!tagManuallySet) setDraftTag(deriveTag(name));
     },
     [tagManuallySet]
   );
-  const handleTagChange = (0, import_react2.useCallback)((tag) => {
+  const handleTagChange = (0, import_react3.useCallback)((tag) => {
     setDraftTag((previous) => clampTag(previous, tag));
     setTagManuallySet(true);
   }, []);
   const confirmDeleteProfile = profiles.find((p) => p.id === confirmDeleteId) ?? null;
-  const handleConfirmDelete = (0, import_react2.useCallback)(() => {
+  const handleConfirmDelete = (0, import_react3.useCallback)(() => {
     if (confirmDeleteId) {
       onDelete(confirmDeleteId);
       if (editingId === confirmDeleteId) setEditingId(null);
     }
     setConfirmDeleteId(null);
   }, [confirmDeleteId, editingId, onDelete]);
-  const sortedProfiles = (0, import_react2.useMemo)(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
+  const sortedProfiles = (0, import_react3.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_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: [styles3.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: [styles3.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
       headerLeft,
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: titleVariant, style: [styles3.title, { color: fg }], children: "Profiles" })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Text, { variant: titleVariant, style: [styles3.title, { color: fg }], children: "Profiles" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.KeyboardAvoidingView, { behavior: import_react_native3.Platform.OS === "ios" ? "padding" : void 0, style: styles3.keyboardAvoiding, children: /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime4.jsx)(import_react_native3.KeyboardAvoidingView, { behavior: import_react_native3.Platform.OS === "ios" ? "padding" : void 0, style: styles3.keyboardAvoiding, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.ScrollView, { style: styles3.scrollView, contentContainerStyle: [styles3.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_runtime3.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => startEdit("new"), style: styles3.row, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: styles3.rowInner, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [styles3.rowChip, styles3.newChip, { borderColor: fg }], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Icon, { source: "plus", size: 20, color: fg }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: { color: fg }, children: "New Profile" })
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => startEdit("new"), style: styles3.row, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: styles3.rowInner, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles3.rowChip, styles3.newChip, { borderColor: fg }], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Icon, { source: "plus", size: 20, color: fg }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: { color: fg }, children: "New Profile" })
           ] }) }, "new");
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime4.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_runtime3.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_runtime4.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_runtime3.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => startEdit(profile), style: styles3.row, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: styles3.rowInner, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProfileChip, { profile, size: CHIP_SIZE }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: [styles3.rowName, { color: fg }], numberOfLines: 1, children: profile.name })
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => startEdit(profile), style: styles3.row, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: styles3.rowInner, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProfileChip, { profile, size: CHIP_SIZE }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: [styles3.rowName, { color: fg }], numberOfLines: 1, children: profile.name })
       ] }) }, profile.id);
     }) }) }),
-    confirmDeleteProfile && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: styles3.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: [styles3.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Icon, { source: "alert-outline", size: 64, color: colors.danger }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "headlineLarge", style: [styles3.overlayTitle, { color: colors.danger }], children: "Delete Profile?" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native_paper3.Text, { variant: "bodyLarge", style: [styles3.overlayBody, { color: fg }], children: [
+    confirmDeleteProfile && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: styles3.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: [styles3.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Icon, { source: "alert-outline", size: 64, color: colors.danger }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Text, { variant: "headlineLarge", style: [styles3.overlayTitle, { color: colors.danger }], children: "Delete Profile?" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native_paper3.Text, { variant: "bodyLarge", style: [styles3.overlayBody, { color: fg }], children: [
         "This permanently deletes ",
         confirmDeleteProfile.name,
         "\u2019s profile. This cannot be undone."
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Button, { mode: "contained", onPress: () => setConfirmDeleteId(null), style: styles3.overlayButton, buttonColor: cancelBg, textColor: cancelFg, children: "Cancel" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Button, { mode: "contained", onPress: handleConfirmDelete, style: styles3.overlayButton, buttonColor: colors.danger, textColor: colors.onDanger, children: "Delete" })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Button, { mode: "contained", onPress: () => setConfirmDeleteId(null), style: styles3.overlayButton, buttonColor: cancelBg, textColor: cancelFg, children: "Cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Button, { mode: "contained", onPress: handleConfirmDelete, style: styles3.overlayButton, buttonColor: colors.danger, textColor: colors.onDanger, children: "Delete" })
     ] }) }) })
   ] });
 }
@@ -416,24 +441,24 @@ 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 alignOverride = useAlign(props.host.openId === props.id, width, height);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hud2.InlineColorPicker, { ...props, alignOverride });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.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_react2.useRef)(tag.props.focus);
-  (0, import_react2.useEffect)(() => {
+  const tagFocusRef = (0, import_react3.useRef)(tag.props.focus);
+  (0, import_react3.useEffect)(() => {
     tagFocusRef.current = tag.props.focus;
   });
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (host.openId === "color") tagFocusRef.current();
   }, [host.openId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: styles3.editRow, children: [
-    useColorPickerAlign ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AlignedColorPicker, { useAlign: useColorPickerAlign, id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hud2.InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.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_runtime3.jsx)(import_feedback_press2.TouchableRipple, { onPress: onDelete, style: styles3.iconButton, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Icon, { source: "trash-can-outline", size: 18, color: fgMuted }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: styles3.editRow, children: [
+    useColorPickerAlign ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AlignedColorPicker, { useAlign: useColorPickerAlign, id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_hud2.InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_runtime4.jsx)(import_feedback_press2.TouchableRipple, { onPress: onDelete, style: styles3.iconButton, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Icon, { source: "trash-can-outline", size: 18, color: fgMuted }) })
   ] });
 }
 var styles3 = import_react_native3.StyleSheet.create({
@@ -532,19 +557,19 @@ 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_react3 = require("react");
+var import_react4 = require("react");
 var import_react_native4 = require("react-native");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, cardBg, titleVariant, colorPreview, useColorPickerAlign }) {
   const { dark } = (0, import_auto_paper4.useAutoPaperTheme)();
-  const managerRef = (0, import_react3.useRef)(null);
+  const managerRef = (0, import_react4.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_runtime4.jsx)(import_react_native4.View, { style: [styles4.container, { backgroundColor: bg }], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, cardBg, titleVariant, colorPreview, useColorPickerAlign, headerLeft: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: [styles4.container, { backgroundColor: bg }], children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, cardBg, titleVariant, colorPreview, useColorPickerAlign, headerLeft: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
 }
 var styles4 = import_react_native4.StyleSheet.create({
   container: {
@@ -582,6 +607,7 @@ var REHYDRATE = "persist/REHYDRATE";
 function createProfileSelectionSlice(namespace, defaultState, mountKey = "profileSelection") {
   const select = createActionCreator(`profileSelection/${namespace}/select`);
   const clearProfile = createActionCreator(`profileSelection/${namespace}/clearProfile`);
+  const pruneToRoster = createActionCreator(`profileSelection/${namespace}/pruneToRoster`);
   function reducer(state = defaultState, action) {
     if (action.type === REHYDRATE) {
       const persisted = action.payload?.[mountKey];
@@ -595,9 +621,22 @@ function createProfileSelectionSlice(namespace, defaultState, mountKey = "profil
       }
       return next;
     }
+    if (pruneToRoster.match(action)) {
+      const roster = new Set(action.payload);
+      const next = { ...state };
+      let changed = false;
+      for (const seat of Object.keys(state)) {
+        const profileId = state[seat];
+        if (profileId !== null && !roster.has(profileId)) {
+          next[seat] = null;
+          changed = true;
+        }
+      }
+      return changed ? next : state;
+    }
     return state;
   }
-  return { actions: { clearProfile, select }, reducer };
+  return { actions: { clearProfile, pruneToRoster, select }, reducer };
 }
 
 // src/redux/profilesSlice.ts
@@ -690,15 +729,15 @@ function createSeatColorsSlice(namespace, defaultState, mountKey = "seatColors")
 }
 
 // src/redux/useSharedProfilesSync.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_react_native5 = require("react-native");
 function useSharedProfilesSync({ groupId, onRemoteChange }) {
-  const pendingWriteRef = (0, import_react4.useRef)(false);
-  const onRemoteChangeRef = (0, import_react4.useRef)(onRemoteChange);
-  (0, import_react4.useEffect)(() => {
+  const pendingWriteRef = (0, import_react5.useRef)(false);
+  const onRemoteChangeRef = (0, import_react5.useRef)(onRemoteChange);
+  (0, import_react5.useEffect)(() => {
     onRemoteChangeRef.current = onRemoteChange;
   }, [onRemoteChange]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!isSharedProfileStoreAvailable) return;
     let cancelled = false;
     const sub = import_react_native5.AppState.addEventListener("change", (next) => {
@@ -712,7 +751,7 @@ function useSharedProfilesSync({ groupId, onRemoteChange }) {
       sub.remove();
     };
   }, [groupId]);
-  const syncToShared = (0, import_react4.useCallback)(
+  const syncToShared = (0, import_react5.useCallback)(
     (next) => {
       if (!isSharedProfileStoreAvailable) return;
       pendingWriteRef.current = true;
@@ -730,6 +769,7 @@ function useSharedProfilesSync({ groupId, onRemoteChange }) {
   MAX_PROFILE_NAME_LENGTH,
   MAX_TAG_LENGTH,
   ProfileChip,
+  ProfileColorProvider,
   ProfilePicker,
   ProfilesManager,
   ProfilesScreen,
@@ -746,5 +786,7 @@ function useSharedProfilesSync({ groupId, onRemoteChange }) {
   profilesReducer,
   resolveInitialProfiles,
   saveSharedProfiles,
+  useProfileColorPreview,
+  useProfileDisplayColor,
   useSharedProfilesSync
 });

package/dist/index.mjs

@@ -9,12 +9,30 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 import { getContrastColor } from "@rific/auto-paper";
 import { StyleSheet, View } from "react-native";
 import { Icon, Text } from "react-native-paper";
+
+// src/ProfileColorContext.tsx
+import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
+var ProfileColorContext = createContext(void 0);
+function ProfileColorProvider({ preview, children }) {
+  return /* @__PURE__ */ jsx(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 jsx2 } from "react/jsx-runtime";
 var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
 function ProfileChip({ profile, size = 22, filled = true }) {
-  const contrastColor = getContrastColor(profile.color);
+  const color = useProfileDisplayColor(profile.color);
+  const contrastColor = getContrastColor(color);
   const tagFontSize = size * (profile.tag && EMOJI_PATTERN.test(profile.tag) ? 0.6 : 0.4);
-  return /* @__PURE__ */ jsx(View, { style: [styles.chip, { borderRadius: size / 2, height: size, width: size }, filled && { backgroundColor: profile.color }], children: profile.tag ? /* @__PURE__ */ jsx(Text, { style: [styles.tag, { color: contrastColor, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: profile.tag }) : /* @__PURE__ */ jsx(Icon, { source: "account", size: size * 0.6, color: contrastColor }) });
+  return /* @__PURE__ */ jsx2(View, { style: [styles.chip, { borderRadius: size / 2, height: size, width: size }, filled && { backgroundColor: color }], children: profile.tag ? /* @__PURE__ */ jsx2(Text, { style: [styles.tag, { color: contrastColor, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: profile.tag }) : /* @__PURE__ */ jsx2(Icon, { source: "account", size: size * 0.6, color: contrastColor }) });
 }
 var styles = StyleSheet.create({
   chip: {
@@ -34,7 +52,7 @@ import { PopoverBody, useAutoAlign } from "@tastic/hud";
 import { useMemo } from "react";
 import { ScrollView, StyleSheet as StyleSheet2, View as View2 } from "react-native";
 import { Icon as Icon2, Text as Text2 } from "react-native-paper";
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
 var TRIGGER_HEIGHT = 28;
 var POPOVER_WIDTH = 220;
 var ROW_HEIGHT = 36;
@@ -45,6 +63,7 @@ function getProfilePickerContentSize(profileCount, hasManageRow = false) {
 }
 function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation = 0, guestLabel, nullLabel = "Player", nullIcon = "account-off-outline", onSelect, onManage }) {
   const id = `${idPrefix}-profile`;
+  const colorPreview = useProfileColorPreview();
   const menuBg = dark ? "#000000" : "#FFFFFF";
   const fg = dark ? "#FFFFFF" : "#000000";
   const open = host.openId === id;
@@ -69,11 +88,11 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, d
     onManage?.();
   };
   return /* @__PURE__ */ jsxs(View2, { style: [styles2.anchor, open && styles2.anchorOpen], children: [
-    /* @__PURE__ */ jsx2(TouchableRipple, { onPress: () => host.toggle(id), style: styles2.trigger, children: /* @__PURE__ */ jsxs(View2, { ref: triggerRef, collapsable: false, style: styles2.triggerInner, children: [
-      /* @__PURE__ */ jsx2(Text2, { style: [styles2.triggerLabel, { color }], numberOfLines: 1, children: (selectedProfile?.name ?? guestLabel).toUpperCase() }),
-      /* @__PURE__ */ jsx2(Icon2, { source: "menu-down", size: 16, color })
+    /* @__PURE__ */ jsx3(TouchableRipple, { onPress: () => host.toggle(id), style: styles2.trigger, children: /* @__PURE__ */ jsxs(View2, { ref: triggerRef, collapsable: false, style: styles2.triggerInner, children: [
+      /* @__PURE__ */ jsx3(Text2, { style: [styles2.triggerLabel, { color }], numberOfLines: 1, children: (selectedProfile?.name ?? guestLabel).toUpperCase() }),
+      /* @__PURE__ */ jsx3(Icon2, { source: "menu-down", size: 16, color })
     ] }) }),
-    /* @__PURE__ */ jsx2(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx3(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ jsxs(
       ScrollView,
       {
         style: [
@@ -88,22 +107,23 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, d
         contentContainerStyle: styles2.menuContent,
         showsVerticalScrollIndicator: false,
         children: [
-          /* @__PURE__ */ jsx2(TouchableRipple, { onPress: handleSelectGuest, style: [styles2.row, selectedId === null && { backgroundColor: color }], children: /* @__PURE__ */ jsxs(View2, { style: styles2.rowInner, children: [
-            /* @__PURE__ */ jsx2(View2, { style: styles2.guestChip, children: /* @__PURE__ */ jsx2(Icon2, { source: nullIcon, size: 13, color: selectedId === null ? getContrastColor2(color) : fg }) }),
-            /* @__PURE__ */ jsx2(Text2, { style: [styles2.rowLabel, { color: selectedId === null ? getContrastColor2(color) : fg }], children: nullLabel })
+          /* @__PURE__ */ jsx3(TouchableRipple, { onPress: handleSelectGuest, style: [styles2.row, selectedId === null && { backgroundColor: color }], children: /* @__PURE__ */ jsxs(View2, { style: styles2.rowInner, children: [
+            /* @__PURE__ */ jsx3(View2, { style: styles2.guestChip, children: /* @__PURE__ */ jsx3(Icon2, { source: nullIcon, size: 13, color: selectedId === null ? getContrastColor2(color) : fg }) }),
+            /* @__PURE__ */ jsx3(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;
-            return /* @__PURE__ */ jsx2(TouchableRipple, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [styles2.row, selected && { backgroundColor: profile.color }], children: /* @__PURE__ */ jsxs(View2, { style: [styles2.rowInner, taken && styles2.rowDisabled], children: [
-              /* @__PURE__ */ jsx2(ProfileChip, { profile, filled: !selected }),
-              /* @__PURE__ */ jsx2(
+            const rowColor = colorPreview ? colorPreview(profile.color) : profile.color;
+            return /* @__PURE__ */ jsx3(TouchableRipple, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [styles2.row, selected && { backgroundColor: rowColor }], children: /* @__PURE__ */ jsxs(View2, { style: [styles2.rowInner, taken && styles2.rowDisabled], children: [
+              /* @__PURE__ */ jsx3(ProfileChip, { profile, filled: !selected }),
+              /* @__PURE__ */ jsx3(
                 Text2,
                 {
                   style: [
                     styles2.rowLabel,
                     {
-                      color: selected ? getContrastColor2(profile.color) : fg
+                      color: selected ? getContrastColor2(rowColor) : fg
                     }
                   ],
                   numberOfLines: 1,
@@ -113,10 +133,10 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, d
             ] }) }, profile.id);
           }),
           onManage && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx2(View2, { style: [styles2.divider, { backgroundColor: color }] }),
-            /* @__PURE__ */ jsx2(TouchableRipple, { onPress: handleManage, style: styles2.row, children: /* @__PURE__ */ jsxs(View2, { style: styles2.manageRowInner, children: [
-              /* @__PURE__ */ jsx2(Icon2, { source: "account-cog-outline", size: 16, color }),
-              /* @__PURE__ */ jsx2(Text2, { style: [styles2.manageLabel, { color }], children: "Manage" })
+            /* @__PURE__ */ jsx3(View2, { style: [styles2.divider, { backgroundColor: color }] }),
+            /* @__PURE__ */ jsx3(TouchableRipple, { onPress: handleManage, style: styles2.row, children: /* @__PURE__ */ jsxs(View2, { style: styles2.manageRowInner, children: [
+              /* @__PURE__ */ jsx3(Icon2, { source: "account-cog-outline", size: 16, color }),
+              /* @__PURE__ */ jsx3(Text2, { style: [styles2.manageLabel, { color }], children: "Manage" })
             ] }) })
           ] })
         ]
@@ -258,13 +278,15 @@ function isValidProfile(value) {
 }
 
 // src/ProfilesManager.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var CHIP_SIZE = 40;
 function deriveTag(name) {
   const trimmed = name.trim();
   return trimmed ? trimmed[0].toUpperCase() : "";
 }
-function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant = "headlineSmall", colorPreview, useColorPickerAlign }) {
+function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant = "headlineSmall", colorPreview: colorPreviewProp, useColorPickerAlign }) {
+  const contextColorPreview = useProfileColorPreview();
+  const colorPreview = colorPreviewProp ?? contextColorPreview;
   const { dark, colors } = useAutoPaperTheme();
   const insets = useSafeAreaInsets();
   const { error: showErrorToast } = useToast();
@@ -340,37 +362,37 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsxs2(View3, { style: [styles3.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
       headerLeft,
-      /* @__PURE__ */ jsx3(Text3, { variant: titleVariant, style: [styles3.title, { color: fg }], children: "Profiles" })
+      /* @__PURE__ */ jsx4(Text3, { variant: titleVariant, style: [styles3.title, { color: fg }], children: "Profiles" })
     ] }),
-    /* @__PURE__ */ jsx3(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : void 0, style: styles3.keyboardAvoiding, children: /* @__PURE__ */ jsx3(ScrollView2, { style: styles3.scrollView, contentContainerStyle: [styles3.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: rows.map((row) => {
+    /* @__PURE__ */ jsx4(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : void 0, style: styles3.keyboardAvoiding, children: /* @__PURE__ */ jsx4(ScrollView2, { style: styles3.scrollView, contentContainerStyle: [styles3.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: rows.map((row) => {
       if (row.kind === "new") {
         if (editingId !== "new") {
-          return /* @__PURE__ */ jsx3(TouchableRipple2, { onPress: () => startEdit("new"), style: styles3.row, children: /* @__PURE__ */ jsxs2(View3, { style: styles3.rowInner, children: [
-            /* @__PURE__ */ jsx3(View3, { style: [styles3.rowChip, styles3.newChip, { borderColor: fg }], children: /* @__PURE__ */ jsx3(Icon3, { source: "plus", size: 20, color: fg }) }),
-            /* @__PURE__ */ jsx3(Text3, { variant: "bodyLarge", style: { color: fg }, children: "New Profile" })
+          return /* @__PURE__ */ jsx4(TouchableRipple2, { onPress: () => startEdit("new"), style: styles3.row, children: /* @__PURE__ */ jsxs2(View3, { style: styles3.rowInner, children: [
+            /* @__PURE__ */ jsx4(View3, { style: [styles3.rowChip, styles3.newChip, { borderColor: fg }], children: /* @__PURE__ */ jsx4(Icon3, { source: "plus", size: 20, color: fg }) }),
+            /* @__PURE__ */ jsx4(Text3, { variant: "bodyLarge", style: { color: fg }, children: "New Profile" })
           ] }) }, "new");
         }
-        return /* @__PURE__ */ jsx3(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, autoFocus: true, fgMuted, host, dark, colorPreview, useColorPickerAlign }, "new");
+        return /* @__PURE__ */ jsx4(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__ */ jsx3(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__ */ jsx4(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__ */ jsx3(TouchableRipple2, { onPress: () => startEdit(profile), style: styles3.row, children: /* @__PURE__ */ jsxs2(View3, { style: styles3.rowInner, children: [
-        /* @__PURE__ */ jsx3(ProfileChip, { profile, size: CHIP_SIZE }),
-        /* @__PURE__ */ jsx3(Text3, { variant: "bodyLarge", style: [styles3.rowName, { color: fg }], numberOfLines: 1, children: profile.name })
+      return /* @__PURE__ */ jsx4(TouchableRipple2, { onPress: () => startEdit(profile), style: styles3.row, children: /* @__PURE__ */ jsxs2(View3, { style: styles3.rowInner, children: [
+        /* @__PURE__ */ jsx4(ProfileChip, { profile, size: CHIP_SIZE }),
+        /* @__PURE__ */ jsx4(Text3, { variant: "bodyLarge", style: [styles3.rowName, { color: fg }], numberOfLines: 1, children: profile.name })
       ] }) }, profile.id);
     }) }) }),
-    confirmDeleteProfile && /* @__PURE__ */ jsx3(Portal, { children: /* @__PURE__ */ jsx3(View3, { style: styles3.overlay, children: /* @__PURE__ */ jsxs2(View3, { style: [styles3.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }], children: [
-      /* @__PURE__ */ jsx3(Icon3, { source: "alert-outline", size: 64, color: colors.danger }),
-      /* @__PURE__ */ jsx3(Text3, { variant: "headlineLarge", style: [styles3.overlayTitle, { color: colors.danger }], children: "Delete Profile?" }),
+    confirmDeleteProfile && /* @__PURE__ */ jsx4(Portal, { children: /* @__PURE__ */ jsx4(View3, { style: styles3.overlay, children: /* @__PURE__ */ jsxs2(View3, { style: [styles3.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }], children: [
+      /* @__PURE__ */ jsx4(Icon3, { source: "alert-outline", size: 64, color: colors.danger }),
+      /* @__PURE__ */ jsx4(Text3, { variant: "headlineLarge", style: [styles3.overlayTitle, { color: colors.danger }], children: "Delete Profile?" }),
       /* @__PURE__ */ jsxs2(Text3, { variant: "bodyLarge", style: [styles3.overlayBody, { color: fg }], children: [
         "This permanently deletes ",
         confirmDeleteProfile.name,
         "\u2019s profile. This cannot be undone."
       ] }),
-      /* @__PURE__ */ jsx3(Button, { mode: "contained", onPress: () => setConfirmDeleteId(null), style: styles3.overlayButton, buttonColor: cancelBg, textColor: cancelFg, children: "Cancel" }),
-      /* @__PURE__ */ jsx3(Button, { mode: "contained", onPress: handleConfirmDelete, style: styles3.overlayButton, buttonColor: colors.danger, textColor: colors.onDanger, children: "Delete" })
+      /* @__PURE__ */ jsx4(Button, { mode: "contained", onPress: () => setConfirmDeleteId(null), style: styles3.overlayButton, buttonColor: cancelBg, textColor: cancelFg, children: "Cancel" }),
+      /* @__PURE__ */ jsx4(Button, { mode: "contained", onPress: handleConfirmDelete, style: styles3.overlayButton, buttonColor: colors.danger, textColor: colors.onDanger, children: "Delete" })
     ] }) }) })
   ] });
 }
@@ -378,7 +400,7 @@ function AlignedColorPicker({ useAlign, ...props }) {
   const { width: windowWidth } = useWindowDimensions();
   const { width, height } = getInlineColorPickerContentSize(defaultColors.length, windowWidth);
   const alignOverride = useAlign(props.host.openId === props.id, width, height);
-  return /* @__PURE__ */ jsx3(InlineColorPicker, { ...props, alignOverride });
+  return /* @__PURE__ */ jsx4(InlineColorPicker, { ...props, alignOverride });
 }
 function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark, colorPreview, useColorPickerAlign }) {
   const register = useFocusChain();
@@ -392,10 +414,10 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
     if (host.openId === "color") tagFocusRef.current();
   }, [host.openId]);
   return /* @__PURE__ */ jsxs2(View3, { style: styles3.editRow, children: [
-    useColorPickerAlign ? /* @__PURE__ */ jsx3(AlignedColorPicker, { useAlign: useColorPickerAlign, id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }) : /* @__PURE__ */ jsx3(InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }),
-    /* @__PURE__ */ jsx3(TextInput, { ref: tag.ref, ...tag.props, value: draftTag, onChangeText: onTagChange, accessibilityLabel: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, returnKeyType: "next", style: styles3.hiddenTagInput, pointerEvents: "none" }),
-    /* @__PURE__ */ jsx3(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__ */ jsx3(TouchableRipple2, { onPress: onDelete, style: styles3.iconButton, children: /* @__PURE__ */ jsx3(Icon3, { source: "trash-can-outline", size: 18, color: fgMuted }) })
+    useColorPickerAlign ? /* @__PURE__ */ jsx4(AlignedColorPicker, { useAlign: useColorPickerAlign, id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }) : /* @__PURE__ */ jsx4(InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }),
+    /* @__PURE__ */ jsx4(TextInput, { ref: tag.ref, ...tag.props, value: draftTag, onChangeText: onTagChange, accessibilityLabel: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, returnKeyType: "next", style: styles3.hiddenTagInput, pointerEvents: "none" }),
+    /* @__PURE__ */ jsx4(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__ */ jsx4(TouchableRipple2, { onPress: onDelete, style: styles3.iconButton, children: /* @__PURE__ */ jsx4(Icon3, { source: "trash-can-outline", size: 18, color: fgMuted }) })
   ] });
 }
 var styles3 = StyleSheet3.create({
@@ -496,7 +518,7 @@ 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 jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, cardBg, titleVariant, colorPreview, useColorPickerAlign }) {
   const { dark } = useAutoPaperTheme2();
   const managerRef = useRef2(null);
@@ -506,7 +528,7 @@ function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, on
     managerRef.current?.commitPendingEdit();
     onBack();
   };
-  return /* @__PURE__ */ jsx4(View4, { style: [styles4.container, { backgroundColor: bg }], children: /* @__PURE__ */ jsx4(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, cardBg, titleVariant, colorPreview, useColorPickerAlign, headerLeft: /* @__PURE__ */ jsx4(IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
+  return /* @__PURE__ */ jsx5(View4, { style: [styles4.container, { backgroundColor: bg }], children: /* @__PURE__ */ jsx5(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, cardBg, titleVariant, colorPreview, useColorPickerAlign, headerLeft: /* @__PURE__ */ jsx5(IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
 }
 var styles4 = StyleSheet4.create({
   container: {
@@ -544,6 +566,7 @@ var REHYDRATE = "persist/REHYDRATE";
 function createProfileSelectionSlice(namespace, defaultState, mountKey = "profileSelection") {
   const select = createActionCreator(`profileSelection/${namespace}/select`);
   const clearProfile = createActionCreator(`profileSelection/${namespace}/clearProfile`);
+  const pruneToRoster = createActionCreator(`profileSelection/${namespace}/pruneToRoster`);
   function reducer(state = defaultState, action) {
     if (action.type === REHYDRATE) {
       const persisted = action.payload?.[mountKey];
@@ -557,9 +580,22 @@ function createProfileSelectionSlice(namespace, defaultState, mountKey = "profil
       }
       return next;
     }
+    if (pruneToRoster.match(action)) {
+      const roster = new Set(action.payload);
+      const next = { ...state };
+      let changed = false;
+      for (const seat of Object.keys(state)) {
+        const profileId = state[seat];
+        if (profileId !== null && !roster.has(profileId)) {
+          next[seat] = null;
+          changed = true;
+        }
+      }
+      return changed ? next : state;
+    }
     return state;
   }
-  return { actions: { clearProfile, select }, reducer };
+  return { actions: { clearProfile, pruneToRoster, select }, reducer };
 }
 
 // src/redux/profilesSlice.ts
@@ -691,6 +727,7 @@ export {
   MAX_PROFILE_NAME_LENGTH,
   MAX_TAG_LENGTH,
   ProfileChip,
+  ProfileColorProvider,
   ProfilePicker,
   ProfilesManager,
   ProfilesScreen,
@@ -707,5 +744,7 @@ export {
   profilesReducer,
   resolveInitialProfiles,
   saveSharedProfiles,
+  useProfileColorPreview,
+  useProfileDisplayColor,
   useSharedProfilesSync
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/profile",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Player profile identity for local-multiplayer React Native games — a saved name/color/tag a player selects per seat, with a picker, an inline-editable roster screen, and a reusable identity badge, deliberately blind to any app-specific fields (control scheme, stats) an app layers on top",
   "keywords": [
     "react-native",
@@ -97,7 +97,7 @@
     "@rific/focus-chain": ">=0.4.0",
     "@rific/toaster": ">=0.4.0",
     "@tastic/core": ">=0.1.0",
-    "@tastic/hud": ">=0.8.0",
+    "@tastic/hud": ">=0.12.0",
     "expo-modules-core": ">=1.0.0",
     "react": ">=19.0.0",
     "react-native": ">=0.76.0",

package/src/ProfileChip.tsx

@@ -2,6 +2,7 @@ import { getContrastColor } from '@rific/auto-paper'
 import { StyleSheet, View } from 'react-native'
 import { Icon, Text } from 'react-native-paper'
 
+import { useProfileDisplayColor } from './ProfileColorContext'
 import { Profile } from './types'
 
 // Presence check, not isValidTag's own full-string emoji validation (profilesValidation.ts) — this
@@ -29,14 +30,16 @@ interface Props {
 // badge for a list row (ProfilePicker's dropdown, ProfilesManager's roster) rather than an
 // interactive picker trigger.
 export function ProfileChip({ profile, size = 22, filled = true }: Props) {
-  const contrastColor = getContrastColor(profile.color)
+  // The drawn color, not necessarily the saved one — see ProfileColorProvider.
+  const color = useProfileDisplayColor(profile.color)
+  const contrastColor = getContrastColor(color)
   // An emoji glyph reads visually smaller than a bold letter at the same fontSize (the system emoji
   // font leaves more of its own em-box empty), so a plain-text ratio that looks right for "J" still
   // looks small for "🎮" at the identical size — this bumps emoji up to the icon's own ratio instead,
   // since a single emoji is closer in visual weight to an icon glyph than to a line of text.
   const tagFontSize = size * (profile.tag && EMOJI_PATTERN.test(profile.tag) ? 0.6 : 0.4)
   return (
-    <View style={[styles.chip, { borderRadius: size / 2, height: size, width: size }, filled && { backgroundColor: profile.color }]}>
+    <View style={[styles.chip, { borderRadius: size / 2, height: size, width: size }, filled && { backgroundColor: color }]}>
       {profile.tag ? (
         <Text style={[styles.tag, { color: contrastColor, fontSize: tagFontSize }]} numberOfLines={1} adjustsFontSizeToFit>
           {profile.tag}

package/src/ProfileColorContext.tsx

@@ -0,0 +1,31 @@
+import { createContext, type ReactNode, useContext } from 'react'
+
+const ProfileColorContext = createContext<((hex: string) => string) | undefined>(undefined)
+
+interface ProfileColorProviderProps {
+  // Maps a profile's saved color to the color actually drawn for it. Solitaire blends profile colors
+  // toward its card-back palette so they read muted, not as the raw swatch; a context rather than a
+  // module-level setting because that blend depends on light/dark mode.
+  preview: (hex: string) => string
+  children: ReactNode
+}
+
+// App-wide display transform for profile colors. Every ProfileChip, ProfilePicker's selected-row
+// fill and ProfilesManager's color picker previews read it, and so does anything outside this
+// package that draws a ProfileChip (@tastic/hud's AchievementUnlockList). Without a provider,
+// profile colors draw as saved.
+export function ProfileColorProvider({ preview, children }: ProfileColorProviderProps) {
+  return <ProfileColorContext.Provider value={preview}>{children}</ProfileColorContext.Provider>
+}
+
+// The provider's preview, or undefined when there's none (so a caller can tell "no transform"
+// apart from an identity one, e.g. to fall back to its own colorPreview prop).
+export function useProfileColorPreview(): ((hex: string) => string) | undefined {
+  return useContext(ProfileColorContext)
+}
+
+// Resolves one saved color to its drawn color.
+export function useProfileDisplayColor(hex: string): string {
+  const preview = useProfileColorPreview()
+  return preview ? preview(hex) : hex
+}

package/src/ProfilePicker.tsx

@@ -6,6 +6,7 @@ import { ScrollView, StyleSheet, View } from 'react-native'
 import { Icon, Text } from 'react-native-paper'
 
 import { ProfileChip } from './ProfileChip'
+import { useProfileColorPreview } from './ProfileColorContext'
 import { Profile } from './types'
 
 const TRIGGER_HEIGHT = 28
@@ -121,6 +122,8 @@ interface ProfilePickerProps<P extends Profile> {
 // its own persistence hook.
 export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation = 0, guestLabel, nullLabel = 'Player', nullIcon = 'account-off-outline', onSelect, onManage }: ProfilePickerProps<P>) {
   const id = `${idPrefix}-profile`
+  // A selected row fills with the profile's drawn color, the same one its ProfileChip would show.
+  const colorPreview = useProfileColorPreview()
   const menuBg = dark ? '#000000' : '#FFFFFF'
   const fg = dark ? '#FFFFFF' : '#000000'
 
@@ -201,8 +204,9 @@ export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, sel
           {sortedProfiles.map((profile) => {
             const taken = profile.id === takenId
             const selected = selectedId === profile.id
+            const rowColor = colorPreview ? colorPreview(profile.color) : profile.color
             return (
-              <TouchableRipple key={profile.id} disabled={taken} onPress={() => handleSelectExisting(profile)} style={[styles.row, selected && { backgroundColor: profile.color }]}>
+              <TouchableRipple key={profile.id} disabled={taken} onPress={() => handleSelectExisting(profile)} style={[styles.row, selected && { backgroundColor: rowColor }]}>
                 <View style={[styles.rowInner, taken && styles.rowDisabled]}>
                   {/* Unfilled on a selected row — its own background already fills with the
                   profile's color, so a second circle behind the tag would just be a redundant badge
@@ -212,7 +216,7 @@ export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, sel
                     style={[
                       styles.rowLabel,
                       {
-                        color: selected ? getContrastColor(profile.color) : fg
+                        color: selected ? getContrastColor(rowColor) : fg
                       }
                     ]}
                     numberOfLines={1}

package/src/ProfilesManager.tsx

@@ -9,6 +9,7 @@ import { Button, Icon, Portal, Text, TextInput } from 'react-native-paper'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { ProfileChip } from './ProfileChip'
+import { useProfileColorPreview } from './ProfileColorContext'
 import { type ProfilePickerAlignResult } from './ProfilePicker'
 import { clampTag, isValidTag, MAX_PROFILE_NAME_LENGTH } from './profilesValidation'
 import { Profile } from './types'
@@ -78,7 +79,7 @@ export interface ProfilesManagerProps {
   titleVariant?: MD3TextVariant
   // Transforms the color swatch grid's own preview per-swatch — forwarded straight to the internal
   // InlineColorPicker's identical prop (see its own doc). Leaves draftColor/onCreate/onSave's actual
-  // color value untouched; only what's rendered changes.
+  // color value untouched; only what's rendered changes. Defaults to ProfileColorProvider's preview.
   colorPreview?: (hex: string) => string
   // Substitutes the color swatch popover's own placement, for a host that renders this screen inside a
   // FAKE-rotated frame (a View turned +-90deg while the OS stays portrait-locked). @tastic/hud's
@@ -114,7 +115,11 @@ function deriveTag(name: string): string {
 // really unmounts it on a given host's router — see ProfilesManagerHandle's own doc for the
 // react-navigation-web case where it doesn't, and why a host there needs the `ref` escape hatch
 // instead of relying on the unmount fallback alone.
-export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant = 'headlineSmall', colorPreview, useColorPickerAlign }: ProfilesManagerProps) {
+export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant = 'headlineSmall', colorPreview: colorPreviewProp, useColorPickerAlign }: ProfilesManagerProps) {
+  // An explicit prop wins; otherwise the app-wide ProfileColorProvider's, so the swatch previews
+  // match the ProfileChips drawn in the list.
+  const contextColorPreview = useProfileColorPreview()
+  const colorPreview = colorPreviewProp ?? contextColorPreview
   const { dark, colors } = useAutoPaperTheme()
   const insets = useSafeAreaInsets()
   const { error: showErrorToast } = useToast()

package/src/index.ts

@@ -1,4 +1,5 @@
 export { ProfileChip } from './ProfileChip'
+export { ProfileColorProvider, useProfileColorPreview, useProfileDisplayColor } from './ProfileColorContext'
 export { getProfilePickerContentSize, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerContentSize } from './ProfilePicker'
 export { type ProfileEditPatch, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps } from './ProfilesManager'
 export { ProfilesScreen, type ProfilesScreenProps } from './ProfilesScreen'

package/src/redux/profileSelectionSlice.ts

@@ -14,6 +14,7 @@ export interface SelectProfilePayload<TSeat> {
 
 export interface ProfileSelectionActions<TSeat> {
   clearProfile: ActionCreator<string>
+  pruneToRoster: ActionCreator<string[]>
   select: ActionCreator<SelectProfilePayload<TSeat>>
 }
 
@@ -50,9 +51,15 @@ export interface ProfileSelectionSlice<TSeat extends string | number> {
 // from inside its own reducer function — only worth overriding if some future consumer ever mounts
 // this under a different key. Note `namespace` above is a different thing: it's the app's own name
 // (e.g. 'airhockey', 'boxhockey'), used only to prefix action types, not the mount key.
+//
+// `pruneToRoster(ids)` nulls every seat whose profile id is no longer in the given roster. Call it
+// after any profilesActions.setAll (initial reconcile, onRemoteChange), since a sibling app can
+// delete a profile without this app's own deleteProfile ever running. It returns the same state
+// object when nothing changes, so dispatching it on every foreground resume costs no re-render.
 export function createProfileSelectionSlice<TSeat extends string | number>(namespace: string, defaultState: ProfileSelectionState<TSeat>, mountKey = 'profileSelection'): ProfileSelectionSlice<TSeat> {
   const select = createActionCreator<SelectProfilePayload<TSeat>>(`profileSelection/${namespace}/select`)
   const clearProfile = createActionCreator<string>(`profileSelection/${namespace}/clearProfile`)
+  const pruneToRoster = createActionCreator<string[]>(`profileSelection/${namespace}/pruneToRoster`)
 
   function reducer(state: ProfileSelectionState<TSeat> = defaultState, action: { type: string; payload?: unknown }): ProfileSelectionState<TSeat> {
     // redux-persist's own default stateReconciler (autoMergeLevel1) HARD-REPLACES this slice's
@@ -74,8 +81,21 @@ export function createProfileSelectionSlice<TSeat extends string | number>(names
       }
       return next
     }
+    if (pruneToRoster.match(action)) {
+      const roster = new Set(action.payload)
+      const next = { ...state }
+      let changed = false
+      for (const seat of Object.keys(state) as TSeat[]) {
+        const profileId = state[seat]
+        if (profileId !== null && !roster.has(profileId)) {
+          next[seat] = null
+          changed = true
+        }
+      }
+      return changed ? next : state
+    }
     return state
   }
 
-  return { actions: { clearProfile, select }, reducer }
+  return { actions: { clearProfile, pruneToRoster, select }, reducer }
 }