@tastic/profile 0.11.0 → 0.13.0

package/dist/index.js

@@ -27,6 +27,7 @@ __export(index_exports, {
   ProfilePicker: () => ProfilePicker,
   ProfilesManager: () => ProfilesManager,
   ProfilesScreen: () => ProfilesScreen,
+  avoidSeatColorClash: () => avoidSeatColorClash,
   createProfileExtensionSlice: () => createProfileExtensionSlice,
   createProfileRecord: () => createProfileRecord,
   createProfileSelectionSlice: () => createProfileSelectionSlice,
@@ -38,6 +39,7 @@ __export(index_exports, {
   loadSharedProfiles: () => loadSharedProfiles,
   profilesActions: () => profilesActions,
   profilesReducer: () => profilesReducer,
+  readSharedProfiles: () => readSharedProfiles,
   resolveInitialProfiles: () => resolveInitialProfiles,
   saveSharedProfiles: () => saveSharedProfiles,
   useProfileColorPreview: () => useProfileColorPreview,
@@ -189,12 +191,12 @@ var styles2 = import_react_native2.StyleSheet.create({
   anchor: {
     position: "relative"
   },
-  // See InlineColorPicker's identical comment — React Native Web gives every position:'relative'
+  // See InlineColorPicker's identical comment - React Native Web gives every position:'relative'
   // view its own stacking context, so the elevation has to live on the anchor itself.
   anchorOpen: {
     zIndex: 100
   },
-  // Separates Manage (a navigation action) from the selectable rows above it — different kind of
+  // Separates Manage (a navigation action) from the selectable rows above it - different kind of
   // action, not just another row in the same list. Tinted with the seat's own color (passed in as
   // backgroundColor) rather than a flat gray, matching the border/caret's own accent-tinted look.
   divider: {
@@ -203,7 +205,7 @@ var styles2 = import_react_native2.StyleSheet.create({
     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
+  // - no backgroundColor, unlike ProfileChip's own default: this row has no identity color of its
   // own to fill it with, and the render site now colors the icon directly instead.
   guestChip: {
     alignItems: "center",
@@ -217,7 +219,7 @@ var styles2 = import_react_native2.StyleSheet.create({
     fontWeight: "700",
     letterSpacing: 0.5
   },
-  // Centered rather than left-aligned like a normal row — see this row's own render-site comment
+  // 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",
@@ -235,7 +237,7 @@ var styles2 = import_react_native2.StyleSheet.create({
     shadowOpacity: 0.3,
     shadowRadius: 8
   },
-  // Padded on every side (not just top/bottom) — a selected row's own full-color background (see
+  // Padded on every side (not just top/bottom) - a selected row's own full-color background (see
   // `row`'s borderRadius) needs real margin from the menu's own straight edges to read as a rounded
   // pill instead of looking clipped against them.
   menuContent: {
@@ -325,19 +327,15 @@ 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: colorPreviewProp, useColorPickerAlign }) {
+function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, titleVariant = "headlineSmall", colorPreview: colorPreviewProp, useColorPickerAlign }) {
   const contextColorPreview = useProfileColorPreview();
   const colorPreview = colorPreviewProp ?? contextColorPreview;
-  const { dark, colors } = (0, import_auto_paper3.useAutoPaperTheme)();
+  const { dark } = (0, import_auto_paper3.useAutoPaperTheme)();
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
   const { error: showErrorToast } = (0, import_toaster.useToast)();
   const host = (0, import_hud2.usePopoverHost)();
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
-  const cardBg = cardBgOverride ?? (dark ? "#111111" : "#F2F2F2");
-  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_react3.useState)(null);
   const [draftName, setDraftName] = (0, import_react3.useState)("");
   const [draftColor, setDraftColor] = (0, import_react3.useState)(defaultColor);
@@ -424,17 +422,7 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
         /* @__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_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_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" })
-    ] }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_hud2.ConfirmDialog, { visible: confirmDeleteProfile !== null, title: "Delete Profile?", message: confirmDeleteProfile ? `This permanently deletes ${confirmDeleteProfile.name}\u2019s profile. This cannot be undone.` : "", confirmLabel: "Delete", cancelLabel: "Cancel", icon: "alert-outline", destructive: true, onConfirm: handleConfirmDelete, onCancel: () => setConfirmDeleteId(null) })
   ] });
 }
 function AlignedColorPicker({ useAlign, ...props }) {
@@ -478,7 +466,7 @@ var styles3 = import_react_native3.StyleSheet.create({
     gap: 4,
     paddingBottom: 8
   },
-  // 1x1 and fully transparent — there's nothing to see here on purpose (see EditRow's own comment
+  // 1x1 and fully transparent - there's nothing to see here on purpose (see EditRow's own comment
   // above the field this styles). position: 'absolute' pulls it out of editRow's flex flow
   // entirely, so it doesn't reserve a gap in the row the way a normal flex sibling would.
   hiddenTagInput: {
@@ -505,27 +493,6 @@ var styles3 = import_react_native3.StyleSheet.create({
     borderStyle: "dashed",
     borderWidth: 2
   },
-  overlay: {
-    alignItems: "center",
-    backgroundColor: "rgba(0,0,0,0.72)",
-    bottom: 0,
-    justifyContent: "center",
-    left: 0,
-    position: "absolute",
-    right: 0,
-    top: 0
-  },
-  overlayBody: { textAlign: "center" },
-  overlayButton: { width: 160 },
-  overlayCard: {
-    alignItems: "center",
-    borderRadius: 20,
-    borderWidth: 1,
-    gap: 16,
-    maxWidth: 360,
-    padding: 32
-  },
-  overlayTitle: { fontWeight: "bold", marginBottom: -8 },
   row: {
     borderRadius: 8,
     paddingVertical: 8
@@ -560,7 +527,7 @@ var import_feedback_press3 = require("@rific/feedback-press");
 var import_react4 = require("react");
 var import_react_native4 = require("react-native");
 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 }) {
+function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, titleVariant, colorPreview, useColorPickerAlign }) {
   const { dark } = (0, import_auto_paper4.useAutoPaperTheme)();
   const managerRef = (0, import_react4.useRef)(null);
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
@@ -569,7 +536,7 @@ function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, on
     managerRef.current?.commitPendingEdit();
     onBack();
   };
-  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" }) }) });
+  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, 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: {
@@ -611,9 +578,27 @@ function createProfileSelectionSlice(namespace, defaultState, mountKey = "profil
   function reducer(state = defaultState, action) {
     if (action.type === REHYDRATE) {
       const persisted = action.payload?.[mountKey];
-      return { ...defaultState, ...state, ...persisted };
+      const merged = { ...defaultState, ...state, ...persisted };
+      const seen = /* @__PURE__ */ new Set();
+      for (const seat of Object.keys(merged)) {
+        const profileId = merged[seat];
+        if (profileId === null) continue;
+        if (seen.has(profileId)) merged[seat] = null;
+        else seen.add(profileId);
+      }
+      return merged;
+    }
+    if (select.match(action)) {
+      const { profileId, seat } = action.payload;
+      const previous = state[seat] ?? null;
+      const next = { ...state, [seat]: profileId };
+      if (profileId !== null) {
+        for (const other of Object.keys(state)) {
+          if (String(other) !== String(seat) && state[other] === profileId) next[other] = previous === profileId ? null : previous;
+        }
+      }
+      return next;
     }
-    if (select.match(action)) return { ...state, [action.payload.seat]: action.payload.profileId };
     if (clearProfile.match(action)) {
       const next = { ...state };
       for (const seat of Object.keys(state)) {
@@ -673,22 +658,27 @@ try {
 }
 var PROFILES_KEY = "sharedProfiles";
 var isSharedProfileStoreAvailable = native !== null;
-async function loadSharedProfiles(groupId) {
+async function readSharedProfiles(groupId) {
   if (!native) return [];
   let json = null;
   try {
     json = await native.getSharedJSON(groupId, PROFILES_KEY);
   } catch {
-    return [];
+    return null;
   }
   if (!json) return [];
   try {
     const parsed = JSON.parse(json);
-    return Array.isArray(parsed) ? parsed.filter(isValidProfile) : [];
+    if (!Array.isArray(parsed)) return null;
+    const profiles = parsed.filter(isValidProfile);
+    return parsed.length > 0 && profiles.length === 0 ? null : profiles;
   } catch {
-    return [];
+    return null;
   }
 }
+async function loadSharedProfiles(groupId) {
+  return await readSharedProfiles(groupId) ?? [];
+}
 async function saveSharedProfiles(groupId, profiles) {
   if (!native) return;
   try {
@@ -700,7 +690,8 @@ async function saveSharedProfiles(groupId, profiles) {
 // src/redux/resolveInitialProfiles.ts
 async function resolveInitialProfiles(groupId, localFallback) {
   if (!isSharedProfileStoreAvailable) return localFallback;
-  const shared = await loadSharedProfiles(groupId);
+  const shared = await readSharedProfiles(groupId);
+  if (shared === null) return localFallback;
   if (shared.length === 0 && localFallback.length > 0) {
     saveSharedProfiles(groupId, localFallback).catch(() => {
     });
@@ -742,8 +733,8 @@ function useSharedProfilesSync({ groupId, onRemoteChange }) {
     let cancelled = false;
     const sub = import_react_native5.AppState.addEventListener("change", (next) => {
       if (next !== "active" || pendingWriteRef.current) return;
-      loadSharedProfiles(groupId).then((shared) => {
-        if (!cancelled) onRemoteChangeRef.current(shared);
+      readSharedProfiles(groupId).then((shared) => {
+        if (!cancelled && shared !== null) onRemoteChangeRef.current(shared);
       });
     });
     return () => {
@@ -764,6 +755,13 @@ function useSharedProfilesSync({ groupId, onRemoteChange }) {
   );
   return { syncToShared };
 }
+
+// src/seatColorClash.ts
+function avoidSeatColorClash(p1Color, p2Color, defaults) {
+  if (p2Color.toLowerCase() !== p1Color.toLowerCase()) return p2Color;
+  const [p1Default, p2Default] = defaults;
+  return p2Color.toLowerCase() === p1Default.toLowerCase() ? p2Default : p1Default;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   MAX_PROFILE_NAME_LENGTH,
@@ -773,6 +771,7 @@ function useSharedProfilesSync({ groupId, onRemoteChange }) {
   ProfilePicker,
   ProfilesManager,
   ProfilesScreen,
+  avoidSeatColorClash,
   createProfileExtensionSlice,
   createProfileRecord,
   createProfileSelectionSlice,
@@ -784,6 +783,7 @@ function useSharedProfilesSync({ groupId, onRemoteChange }) {
   loadSharedProfiles,
   profilesActions,
   profilesReducer,
+  readSharedProfiles,
   resolveInitialProfiles,
   saveSharedProfiles,
   useProfileColorPreview,

package/dist/index.mjs

@@ -148,12 +148,12 @@ var styles2 = StyleSheet2.create({
   anchor: {
     position: "relative"
   },
-  // See InlineColorPicker's identical comment — React Native Web gives every position:'relative'
+  // See InlineColorPicker's identical comment - React Native Web gives every position:'relative'
   // view its own stacking context, so the elevation has to live on the anchor itself.
   anchorOpen: {
     zIndex: 100
   },
-  // Separates Manage (a navigation action) from the selectable rows above it — different kind of
+  // Separates Manage (a navigation action) from the selectable rows above it - different kind of
   // action, not just another row in the same list. Tinted with the seat's own color (passed in as
   // backgroundColor) rather than a flat gray, matching the border/caret's own accent-tinted look.
   divider: {
@@ -162,7 +162,7 @@ var styles2 = StyleSheet2.create({
     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
+  // - no backgroundColor, unlike ProfileChip's own default: this row has no identity color of its
   // own to fill it with, and the render site now colors the icon directly instead.
   guestChip: {
     alignItems: "center",
@@ -176,7 +176,7 @@ var styles2 = StyleSheet2.create({
     fontWeight: "700",
     letterSpacing: 0.5
   },
-  // Centered rather than left-aligned like a normal row — see this row's own render-site comment
+  // 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",
@@ -194,7 +194,7 @@ var styles2 = StyleSheet2.create({
     shadowOpacity: 0.3,
     shadowRadius: 8
   },
-  // Padded on every side (not just top/bottom) — a selected row's own full-color background (see
+  // Padded on every side (not just top/bottom) - a selected row's own full-color background (see
   // `row`'s borderRadius) needs real margin from the menu's own straight edges to read as a rounded
   // pill instead of looking clipped against them.
   menuContent: {
@@ -239,10 +239,10 @@ import { defaultColors, useAutoPaperTheme } from "@rific/auto-paper";
 import { TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
 import { useFocusChain } from "@rific/focus-chain";
 import { useToast } from "@rific/toaster";
-import { getInlineColorPickerContentSize, InlineColorPicker, usePopoverHost } from "@tastic/hud";
+import { ConfirmDialog, getInlineColorPickerContentSize, InlineColorPicker, usePopoverHost } from "@tastic/hud";
 import { useCallback, useEffect, useImperativeHandle, useMemo as useMemo2, useRef, useState } from "react";
 import { KeyboardAvoidingView, Platform, ScrollView as ScrollView2, StyleSheet as StyleSheet3, useWindowDimensions, View as View3 } from "react-native";
-import { Button, Icon as Icon3, Portal, Text as Text3, TextInput } from "react-native-paper";
+import { Icon as Icon3, Text as Text3, TextInput } from "react-native-paper";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 // src/profilesValidation.ts
@@ -284,19 +284,15 @@ 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: colorPreviewProp, useColorPickerAlign }) {
+function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, titleVariant = "headlineSmall", colorPreview: colorPreviewProp, useColorPickerAlign }) {
   const contextColorPreview = useProfileColorPreview();
   const colorPreview = colorPreviewProp ?? contextColorPreview;
-  const { dark, colors } = useAutoPaperTheme();
+  const { dark } = useAutoPaperTheme();
   const insets = useSafeAreaInsets();
   const { error: showErrorToast } = useToast();
   const host = usePopoverHost();
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
-  const cardBg = cardBgOverride ?? (dark ? "#111111" : "#F2F2F2");
-  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] = useState(null);
   const [draftName, setDraftName] = useState("");
   const [draftColor, setDraftColor] = useState(defaultColor);
@@ -383,17 +379,7 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
         /* @__PURE__ */ jsx4(Text3, { variant: "bodyLarge", style: [styles3.rowName, { color: fg }], numberOfLines: 1, children: profile.name })
       ] }) }, profile.id);
     }) }) }),
-    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__ */ 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" })
-    ] }) }) })
+    /* @__PURE__ */ jsx4(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 }) {
@@ -437,7 +423,7 @@ var styles3 = StyleSheet3.create({
     gap: 4,
     paddingBottom: 8
   },
-  // 1x1 and fully transparent — there's nothing to see here on purpose (see EditRow's own comment
+  // 1x1 and fully transparent - there's nothing to see here on purpose (see EditRow's own comment
   // above the field this styles). position: 'absolute' pulls it out of editRow's flex flow
   // entirely, so it doesn't reserve a gap in the row the way a normal flex sibling would.
   hiddenTagInput: {
@@ -464,27 +450,6 @@ var styles3 = StyleSheet3.create({
     borderStyle: "dashed",
     borderWidth: 2
   },
-  overlay: {
-    alignItems: "center",
-    backgroundColor: "rgba(0,0,0,0.72)",
-    bottom: 0,
-    justifyContent: "center",
-    left: 0,
-    position: "absolute",
-    right: 0,
-    top: 0
-  },
-  overlayBody: { textAlign: "center" },
-  overlayButton: { width: 160 },
-  overlayCard: {
-    alignItems: "center",
-    borderRadius: 20,
-    borderWidth: 1,
-    gap: 16,
-    maxWidth: 360,
-    padding: 32
-  },
-  overlayTitle: { fontWeight: "bold", marginBottom: -8 },
   row: {
     borderRadius: 8,
     paddingVertical: 8
@@ -519,7 +484,7 @@ 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 jsx5 } from "react/jsx-runtime";
-function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, cardBg, titleVariant, colorPreview, useColorPickerAlign }) {
+function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, titleVariant, colorPreview, useColorPickerAlign }) {
   const { dark } = useAutoPaperTheme2();
   const managerRef = useRef2(null);
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
@@ -528,7 +493,7 @@ function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, on
     managerRef.current?.commitPendingEdit();
     onBack();
   };
-  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" }) }) });
+  return /* @__PURE__ */ jsx5(View4, { style: [styles4.container, { backgroundColor: bg }], children: /* @__PURE__ */ jsx5(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, titleVariant, colorPreview, useColorPickerAlign, headerLeft: /* @__PURE__ */ jsx5(IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
 }
 var styles4 = StyleSheet4.create({
   container: {
@@ -570,9 +535,27 @@ function createProfileSelectionSlice(namespace, defaultState, mountKey = "profil
   function reducer(state = defaultState, action) {
     if (action.type === REHYDRATE) {
       const persisted = action.payload?.[mountKey];
-      return { ...defaultState, ...state, ...persisted };
+      const merged = { ...defaultState, ...state, ...persisted };
+      const seen = /* @__PURE__ */ new Set();
+      for (const seat of Object.keys(merged)) {
+        const profileId = merged[seat];
+        if (profileId === null) continue;
+        if (seen.has(profileId)) merged[seat] = null;
+        else seen.add(profileId);
+      }
+      return merged;
+    }
+    if (select.match(action)) {
+      const { profileId, seat } = action.payload;
+      const previous = state[seat] ?? null;
+      const next = { ...state, [seat]: profileId };
+      if (profileId !== null) {
+        for (const other of Object.keys(state)) {
+          if (String(other) !== String(seat) && state[other] === profileId) next[other] = previous === profileId ? null : previous;
+        }
+      }
+      return next;
     }
-    if (select.match(action)) return { ...state, [action.payload.seat]: action.payload.profileId };
     if (clearProfile.match(action)) {
       const next = { ...state };
       for (const seat of Object.keys(state)) {
@@ -632,22 +615,27 @@ try {
 }
 var PROFILES_KEY = "sharedProfiles";
 var isSharedProfileStoreAvailable = native !== null;
-async function loadSharedProfiles(groupId) {
+async function readSharedProfiles(groupId) {
   if (!native) return [];
   let json = null;
   try {
     json = await native.getSharedJSON(groupId, PROFILES_KEY);
   } catch {
-    return [];
+    return null;
   }
   if (!json) return [];
   try {
     const parsed = JSON.parse(json);
-    return Array.isArray(parsed) ? parsed.filter(isValidProfile) : [];
+    if (!Array.isArray(parsed)) return null;
+    const profiles = parsed.filter(isValidProfile);
+    return parsed.length > 0 && profiles.length === 0 ? null : profiles;
   } catch {
-    return [];
+    return null;
   }
 }
+async function loadSharedProfiles(groupId) {
+  return await readSharedProfiles(groupId) ?? [];
+}
 async function saveSharedProfiles(groupId, profiles) {
   if (!native) return;
   try {
@@ -659,7 +647,8 @@ async function saveSharedProfiles(groupId, profiles) {
 // src/redux/resolveInitialProfiles.ts
 async function resolveInitialProfiles(groupId, localFallback) {
   if (!isSharedProfileStoreAvailable) return localFallback;
-  const shared = await loadSharedProfiles(groupId);
+  const shared = await readSharedProfiles(groupId);
+  if (shared === null) return localFallback;
   if (shared.length === 0 && localFallback.length > 0) {
     saveSharedProfiles(groupId, localFallback).catch(() => {
     });
@@ -701,8 +690,8 @@ function useSharedProfilesSync({ groupId, onRemoteChange }) {
     let cancelled = false;
     const sub = AppState.addEventListener("change", (next) => {
       if (next !== "active" || pendingWriteRef.current) return;
-      loadSharedProfiles(groupId).then((shared) => {
-        if (!cancelled) onRemoteChangeRef.current(shared);
+      readSharedProfiles(groupId).then((shared) => {
+        if (!cancelled && shared !== null) onRemoteChangeRef.current(shared);
       });
     });
     return () => {
@@ -723,6 +712,13 @@ function useSharedProfilesSync({ groupId, onRemoteChange }) {
   );
   return { syncToShared };
 }
+
+// src/seatColorClash.ts
+function avoidSeatColorClash(p1Color, p2Color, defaults) {
+  if (p2Color.toLowerCase() !== p1Color.toLowerCase()) return p2Color;
+  const [p1Default, p2Default] = defaults;
+  return p2Color.toLowerCase() === p1Default.toLowerCase() ? p2Default : p1Default;
+}
 export {
   MAX_PROFILE_NAME_LENGTH,
   MAX_TAG_LENGTH,
@@ -731,6 +727,7 @@ export {
   ProfilePicker,
   ProfilesManager,
   ProfilesScreen,
+  avoidSeatColorClash,
   createProfileExtensionSlice,
   createProfileRecord,
   createProfileSelectionSlice,
@@ -742,6 +739,7 @@ export {
   loadSharedProfiles,
   profilesActions,
   profilesReducer,
+  readSharedProfiles,
   resolveInitialProfiles,
   saveSharedProfiles,
   useProfileColorPreview,

package/ios/TasticProfileModule.swift

@@ -1,9 +1,9 @@
 import ExpoModulesCore
 
 // Generic group/key -> JSON-string bridge onto a native iOS App Group's shared UserDefaults suite
-// — the mechanism that actually lets two separate apps (same Apple Developer Team, both declaring
+// - the mechanism that actually lets two separate apps (same Apple Developer Team, both declaring
 // the same "com.apple.security.application-groups" entitlement) read and write one common blob of
-// data. Nothing here is @tastic/profile-specific — see src/sharedProfileStore.ts, the one caller,
+// data. Nothing here is @tastic/profile-specific - see src/sharedProfileStore.ts, the one caller,
 // for the profile-roster-shaped API built on top of this. Android/web never register this module
 // at all (see expo-module.config.json's "apple"-only platform list), so a consuming app has to
 // treat "module not present" as a normal, expected case rather than an error.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tastic/profile",
-  "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",
+  "version": "0.13.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",
     "expo",
@@ -65,13 +65,13 @@
     "@infinitetoken/eslint-config": "0.2.0",
     "@infinitetoken/jest-config": "^0.4.0",
     "@infinitetoken/tsconfig": "^0.5.0",
-    "@rific/auto-paper": "^0.12.0",
-    "@rific/core": "^0.2.0",
-    "@rific/feedback-press": "^0.12.0",
-    "@rific/focus-chain": "^0.4.7",
-    "@rific/toaster": "^0.7.0",
-    "@tastic/core": "^0.9.0",
-    "@tastic/hud": "^0.12.0",
+    "@rific/auto-paper": "^0.13.2",
+    "@rific/core": "^0.3.1",
+    "@rific/feedback-press": "^0.13.0",
+    "@rific/focus-chain": "^0.4.8",
+    "@rific/toaster": "^0.8.0",
+    "@tastic/core": "^0.14.0",
+    "@tastic/hud": "^0.19.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
@@ -85,7 +85,7 @@
     "prettier": "^3.8.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-native": "^0.85.3",
+    "react-native": "^0.86.3",
     "react-native-paper": "^5.15.2",
     "react-native-safe-area-context": "^5.0.0",
     "tsup": "^8.0.0",

package/src/ProfileChip.tsx

@@ -5,7 +5,7 @@ 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
+// Presence check, not isValidTag's own full-string emoji validation (profilesValidation.ts) - this
 // only decides a font-size ratio, so it doesn't need that check's ZWJ/variation-selector precision,
 // just "does this tag contain a pictograph at all."
 const EMOJI_PATTERN = /\p{Extended_Pictographic}/u
@@ -14,7 +14,7 @@ interface Props {
   profile: Profile
   size?: number
   // False on a selected row, whose own background already fills with the profile's color (see
-  // ProfilePicker's own selected-row handling) — a second circle behind the tag there would either
+  // ProfilePicker's own selected-row handling) - a second circle behind the tag there would either
   // double up decoratively or, filled some other flat color, look like a stray badge next to the
   // plain icon+text every other selected row in the app uses. Contrast is still computed against
   // the profile's own color either way (that's what's actually behind the glyph whether this chip
@@ -24,18 +24,18 @@ interface Props {
   filled?: boolean
 }
 
-// A profile's identity at a glance — its own color as a filled circle, with its tag (or a generic
+// A profile's identity at a glance - its own color as a filled circle, with its tag (or a generic
 // fallback icon, for a profile with none set) in a contrast-safe color on top. The same combination
 // @tastic/hud's InlineColorPicker trigger shows for live color selection, just as a small static
 // 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) {
-  // The drawn color, not necessarily the saved one — see ProfileColorProvider.
+  // 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,
+  // 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 (