@tastic/profile 0.15.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/profile",
-  "version": "0.15.0",
+  "version": "0.16.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",
@@ -69,9 +69,9 @@
     "@rific/core": "^0.3.1",
     "@rific/feedback-press": "^0.13.0",
     "@rific/focus-chain": "^0.4.8",
-    "@rific/toaster": "^0.8.1",
+    "@rific/toaster": "^0.8.2",
     "@tastic/core": "^0.14.0",
-    "@tastic/hud": "^0.20.0",
+    "@tastic/hud": "^0.23.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
@@ -79,7 +79,7 @@
     "eslint": "^9.39.4",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-native": "^5.0.0",
-    "expo-modules-core": "^58.0.21",
+    "expo-modules-core": "^58.0.22",
     "jest": "^30.4.2",
     "jest-environment-jsdom": "^30.4.1",
     "prettier": "^3.8.3",
@@ -97,7 +97,7 @@
     "@rific/focus-chain": ">=0.4.0",
     "@rific/toaster": ">=0.4.0",
     "@tastic/core": ">=0.1.0",
-    "@tastic/hud": ">=0.12.0",
+    "@tastic/hud": ">=0.23.0",
     "expo-modules-core": ">=1.0.0",
     "react": ">=19.0.0",
     "react-native": ">=0.76.0",

package/src/IdentityChip.tsx

@@ -2,6 +2,9 @@ import { getContrastColor } from '@rific/auto-paper'
 import { StyleSheet, View } from 'react-native'
 import { Icon, Text } from 'react-native-paper'
 
+import { useProfileSwatchRenderer } from './ProfileColorContext'
+import { SwatchLayer } from './SwatchLayer'
+
 // 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."
@@ -21,8 +24,10 @@ interface Props {
 
 // A filled circle with a tag (or an icon) in a contrast-safe color on top: the drawing behind
 // ProfileChip (a profile's own colors) and ProfilePicker's chip trigger (the live color in effect,
-// which may not be any profile's saved one).
+// which may not be any profile's saved one). A ProfileColorProvider `renderSwatch` draws the fill in
+// place of the flat color (a filled chip only); the tag's contrast still comes from `color`.
 export function IdentityChip({ color, tag, icon, size, filled = true }: Props) {
+  const renderSwatch = useProfileSwatchRenderer()
   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
@@ -34,7 +39,8 @@ export function IdentityChip({ color, tag, icon, size, filled = true }: Props) {
   // them off there ("D..."); 0.32 fits them, with adjustsFontSizeToFit still the backstop on native.
   const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : tag && Array.from(tag).length >= 3 ? 0.32 : 0.4)
   return (
-    <View style={[styles.chip, { borderRadius: size / 2, height: size, width: size }, filled && { backgroundColor: color }]}>
+    <View style={[styles.chip, { borderRadius: size / 2, height: size, width: size }, filled && !renderSwatch && { backgroundColor: color }]}>
+      {filled && renderSwatch && <SwatchLayer render={renderSwatch} color={color} size={size} />}
       {tag ? (
         <Text style={[styles.tag, { color: contrastColor, fontSize: tagFontSize }]} numberOfLines={1} adjustsFontSizeToFit>
           {tag}

package/src/OptionPicker.tsx

@@ -1,4 +1,4 @@
-import { PopoverHost, PopoverRotation } from '@tastic/hud'
+import type { PopoverHost, PopoverRotation } from '@tastic/hud/chrome'
 import { type StyleProp, type ViewStyle } from 'react-native'
 
 import { IconRow, pickerContentSize, PickerMenu, type ProfilePickerAlignResult, type ProfilePickerColorSection, type ProfilePickerContentSize } from './PickerMenu'

package/src/PickerMenu.tsx

@@ -1,11 +1,14 @@
 import { defaultColors, FadingScrollView, getContrastColor, type SeedColor } from '@rific/auto-paper'
 import { TouchableRipple } from '@rific/feedback-press'
-import { PopoverBody, PopoverHost, PopoverRotation, useAutoAlign } from '@tastic/hud'
+import type { PopoverHost, PopoverRotation } from '@tastic/hud/chrome'
+import { PopoverBody, useAutoAlign } from '@tastic/hud/chrome'
 import { ReactNode, RefObject, useState } from 'react'
 import { type LayoutChangeEvent, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
 import { Icon, Text } from 'react-native-paper'
 
 import { IdentityChip } from './IdentityChip'
+import { useProfileSwatchRenderer } from './ProfileColorContext'
+import { SwatchLayer } from './SwatchLayer'
 
 // The trigger and popover ProfilePicker and OptionPicker share: a name trigger (or the chip pill),
 // a bordered menu of rows, and with a `colorSection` a Color row that swaps the menu for a page of
@@ -29,6 +32,10 @@ const CHIP_TRIGGER_PADDING = 6
 // 20 colors fill 4 full rows), with the same spacing between rows.
 const SWATCH_SIZE = 28
 const SWATCH_MIN_GAP = 6
+// The selected swatch's white ring, drawn inside its SWATCH_SIZE.
+const SWATCH_RING_WIDTH = 2
+// The Color row's swatch of the color in effect, in the same 22pt slot as every row's chip.
+const COLOR_ROW_SWATCH_SIZE = 22
 // The Color row: a plain row's height, or taller with a caption line under the label.
 const COLOR_ROW_CAPTIONED_HEIGHT = 48
 const COLOR_LABEL_LINE = 18
@@ -260,12 +267,14 @@ export function IconRow({ icon, label, selected, color, fg, disabled = false, on
 // to the color page. A divider sets it apart from the selectable rows under it.
 function ColorRow({ section, fg, dividerColor, onPress }: { section: ProfilePickerColorSection; fg: string; dividerColor: string; onPress: () => void }) {
   const { value, previewValue, label = 'Color', caption } = section
+  const renderSwatch = useProfileSwatchRenderer()
   const drawn = previewValue ? previewValue(value) : value
   return (
     <>
       <TouchableRipple onPress={onPress} style={[pickerMenuStyles.row, { height: colorRowHeight(caption) }]} accessibilityRole='button' accessibilityLabel={caption ? `${label}, ${caption}` : label}>
         <View style={pickerMenuStyles.rowInner}>
-          <View style={[styles.colorRowSwatch, { backgroundColor: drawn }]} />
+          {/* A ProfileColorProvider renderSwatch draws it in place of the flat fill. */}
+          <View style={[styles.colorRowSwatch, !renderSwatch && { backgroundColor: drawn }]}>{renderSwatch && <SwatchLayer render={renderSwatch} color={drawn} size={COLOR_ROW_SWATCH_SIZE} />}</View>
           <View style={styles.colorRowText}>
             <Text style={[styles.colorRowLabel, { color: fg }]} numberOfLines={1}>
               {label}
@@ -289,9 +298,12 @@ function ColorRow({ section, fg, dividerColor, onPress }: { section: ProfilePick
 // back to it (the profile's row shows that color, but matching it to one of two similar swatches by
 // eye is guesswork). The check takes the dot's place on the swatch in effect, so the dot only shows
 // while the color in effect is another one. Another seat's color (`takenValue`) is marked with an X
-// and disabled, or a swap icon when `allowSwapTaken` lets it be picked.
+// and disabled, or a swap icon when `allowSwapTaken` lets it be picked. A ProfileColorProvider
+// `renderSwatch` draws each swatch in place of its flat fill (inside the selected one's ring), with
+// the mark's contrast still taken from the swatch's own color.
 function ColorPage({ section, homeColor, fg, onBack }: { section: ProfilePickerColorSection; homeColor?: string; fg: string; onBack: () => void }) {
   const { value, onChange, previewValue, swatches = defaultColors, label = 'Color', takenValue, allowSwapTaken } = section
+  const renderSwatch = useProfileSwatchRenderer()
   const displayFor = previewValue ?? ((hex: string) => hex)
   return (
     <>
@@ -314,11 +326,20 @@ function ColorPage({ section, homeColor, fg, onBack }: { section: ProfilePickerC
           const swatchDisplay = displayFor(swatch.value)
           const contrast = getContrastColor(swatchDisplay)
           const accessibilityLabel = swappable ? `${swatch.label}, swap` : taken ? `${swatch.label}, taken` : isHomeColor ? `${swatch.label}, profile color` : swatch.label
+          const mark = selected ? <Icon source='check' size={16} color={contrast} /> : swappable ? <Icon source='swap-horizontal' size={16} color={contrast} /> : taken ? <Icon source='close' size={16} color={contrast} /> : isHomeColor ? <View style={[styles.homeDot, { backgroundColor: contrast }]} /> : <View />
           // The same swatch as @tastic/hud's InlineColorPicker: a filled circle, the selected one
-          // ringed and checked, a taken one faded with an X.
+          // ringed and checked, a taken one faded with an X. TouchableRipple takes one child, so a
+          // drawn swatch and its mark share a face that fills the circle inside the ring.
           return (
-            <TouchableRipple key={swatch.value} disabled={taken && !swappable} onPress={() => onChange(swatch.value)} borderless style={[styles.swatch, { backgroundColor: swatchDisplay }, selected && styles.swatchSelected, taken && !swappable && styles.swatchTaken]} accessibilityRole='button' accessibilityLabel={accessibilityLabel} accessibilityState={{ selected, disabled: taken && !swappable }}>
-              {selected ? <Icon source='check' size={16} color={contrast} /> : swappable ? <Icon source='swap-horizontal' size={16} color={contrast} /> : taken ? <Icon source='close' size={16} color={contrast} /> : isHomeColor ? <View style={[styles.homeDot, { backgroundColor: contrast }]} /> : <View />}
+            <TouchableRipple key={swatch.value} disabled={taken && !swappable} onPress={() => onChange(swatch.value)} borderless style={[styles.swatch, !renderSwatch && { backgroundColor: swatchDisplay }, selected && styles.swatchSelected, taken && !swappable && styles.swatchTaken]} accessibilityRole='button' accessibilityLabel={accessibilityLabel} accessibilityState={{ selected, disabled: taken && !swappable }}>
+              {renderSwatch ? (
+                <View style={styles.swatchFace}>
+                  <SwatchLayer render={renderSwatch} color={swatchDisplay} size={selected ? SWATCH_SIZE - 2 * SWATCH_RING_WIDTH : SWATCH_SIZE} />
+                  {mark}
+                </View>
+              ) : (
+                mark
+              )}
             </TouchableRipple>
           )
         })}
@@ -385,9 +406,9 @@ const styles = StyleSheet.create({
   },
   // The color in effect, in the same 22pt slot as every row's chip.
   colorRowSwatch: {
-    borderRadius: 11,
-    height: 22,
-    width: 22
+    borderRadius: COLOR_ROW_SWATCH_SIZE / 2,
+    height: COLOR_ROW_SWATCH_SIZE,
+    width: COLOR_ROW_SWATCH_SIZE
   },
   colorRowText: {
     flex: 1
@@ -447,9 +468,19 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     width: SWATCH_SIZE
   },
+  // A drawn swatch (see ColorPage) and its mark: the whole circle inside the selected one's ring.
+  swatchFace: {
+    alignItems: 'center',
+    bottom: 0,
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0
+  },
   swatchSelected: {
     borderColor: '#ffffff',
-    borderWidth: 2
+    borderWidth: SWATCH_RING_WIDTH
   },
   swatchTaken: {
     opacity: 0.35

package/src/ProfileColorContext.tsx

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

package/src/ProfilePicker.tsx

@@ -1,6 +1,6 @@
 import { getContrastColor } from '@rific/auto-paper'
 import { TouchableRipple } from '@rific/feedback-press'
-import { PopoverHost, PopoverRotation } from '@tastic/hud'
+import type { PopoverHost, PopoverRotation } from '@tastic/hud/chrome'
 import { useMemo } from 'react'
 import { type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
 import { Icon, Text } from 'react-native-paper'
@@ -42,6 +42,10 @@ interface ProfilePickerProps<P extends Profile> {
   // game, where double-selecting one profile would double-count its stats as both winner and
   // loser) - omit if that doesn't apply.
   takenId?: string | null
+  // Every other seat's profile id, for a lobby with more than two seats: each is disabled in this
+  // list the same way as `takenId` (both may be given). This picker's own selection is never taken,
+  // so a host can pass every seated id, this seat's included.
+  takenIds?: readonly string[]
   // Tint for the trigger's own label/icon - pass the seat/context's current live color so the
   // trigger reads as one identity with whatever it's paired with.
   color: string
@@ -116,7 +120,7 @@ interface ProfilePickerProps<P extends Profile> {
 // it keeps this popover from needing its own destructive-delete confirmation. Fully prop-driven -
 // no internal profile-storage access of its own, so the host app stays the one place that reads
 // its own persistence hook.
-export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, color, dark, align, alignOverride, rotation = 0, guestLabel, nullLabel = 'Player', nullIcon = 'account-off-outline', onSelect, onManage, colorSection, triggerStyle }: ProfilePickerProps<P>) {
+export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, takenIds, color, dark, align, alignOverride, rotation = 0, guestLabel, nullLabel = 'Player', nullIcon = 'account-off-outline', onSelect, onManage, colorSection, triggerStyle }: ProfilePickerProps<P>) {
   const id = `${idPrefix}-profile`
   // A selected row fills with the profile's drawn color, the same one its ProfileChip would show.
   const colorPreview = useProfileColorPreview()
@@ -128,6 +132,8 @@ export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, sel
   const sortedProfiles = useMemo(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles])
   // Null row + each saved profile + (if passed) the manage row.
   const contentSize = getProfilePickerContentSize(profiles.length, !!onManage, colorSection)
+  // `takenId` exactly as before; a `takenIds` entry skips this picker's own selection.
+  const isTaken = (profileId: string) => profileId === takenId || (profileId !== selectedId && !!takenIds?.includes(profileId))
 
   const handleSelectGuest = () => {
     onSelect(null)
@@ -135,7 +141,7 @@ export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, sel
   }
 
   const handleSelectExisting = (profile: P) => {
-    if (profile.id === takenId) return
+    if (isTaken(profile.id)) return
     onSelect(profile)
     host.close()
   }
@@ -165,7 +171,7 @@ export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, sel
       <IconRow icon={nullIcon} label={nullLabel} selected={selectedId === null} color={color} fg={fg} onPress={handleSelectGuest} />
 
       {sortedProfiles.map((profile) => {
-        const taken = profile.id === takenId
+        const taken = isTaken(profile.id)
         const selected = selectedId === profile.id
         const rowColor = colorPreview ? colorPreview(profile.color) : profile.color
         return (

package/src/ProfilesManager.tsx

@@ -2,7 +2,8 @@ import { defaultColors, FadingScrollView, useAutoPaperTheme } from '@rific/auto-
 import { TouchableRipple } from '@rific/feedback-press'
 import { useFocusChain } from '@rific/focus-chain'
 import { useToast } from '@rific/toaster'
-import { ConfirmDialog, getInlineColorPickerContentSize, InlineColorPicker, PopoverHost, usePopoverHost } from '@tastic/hud'
+import type { PopoverHost } from '@tastic/hud/chrome'
+import { ConfirmDialog, getInlineColorPickerContentSize, InlineColorPicker, usePopoverHost } from '@tastic/hud/chrome'
 import { ComponentProps, ReactNode, Ref, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import { KeyboardAvoidingView, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { Icon, Text, TextInput } from 'react-native-paper'

package/src/SwatchLayer.tsx

@@ -0,0 +1,28 @@
+import { StyleSheet, View } from 'react-native'
+
+import { type ProfileSwatchRenderer } from './ProfileColorContext'
+
+interface Props {
+  render: ProfileSwatchRenderer
+  // The drawn color, handed to `render` as is.
+  color: string
+  // The circle's diameter: the swatch's own size, less any ring drawn inside it.
+  size: number
+}
+
+// A ProfileColorProvider `renderSwatch` drawing in place of a swatch's flat fill: absolutely placed at
+// the swatch's top left (inside any border), behind the mark drawn after it, and clipped to the circle
+// so a square drawing still reads as the round swatch. Not exported from index.ts.
+export function SwatchLayer({ render, color, size }: Props) {
+  return <View style={[styles.layer, { borderRadius: size / 2, height: size, width: size }]}>{render(color, size)}</View>
+}
+
+const styles = StyleSheet.create({
+  layer: {
+    left: 0,
+    overflow: 'hidden',
+    pointerEvents: 'none',
+    position: 'absolute',
+    top: 0
+  }
+})

package/src/index.ts

@@ -1,6 +1,6 @@
 export { getOptionPickerContentSize, OptionPicker, type OptionPickerOption } from './OptionPicker'
 export { ProfileChip } from './ProfileChip'
-export { ProfileColorProvider, useProfileColorPreview, useProfileDisplayColor } from './ProfileColorContext'
+export { ProfileColorProvider, type ProfileSwatchRenderer, useProfileColorPreview, useProfileDisplayColor, useProfileSwatchRenderer } from './ProfileColorContext'
 export { getProfilePickerContentSize, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerColorSection, type ProfilePickerContentSize } from './ProfilePicker'
 export { type ProfileEditPatch, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps } from './ProfilesManager'
 export { ProfilesScreen, type ProfilesScreenProps } from './ProfilesScreen'
@@ -12,5 +12,5 @@ export { resolveInitialProfiles } from './redux/resolveInitialProfiles'
 export { createSeatColorsSlice, type ProfileColorPick, profileSeatColor, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SetLastGuestColorPayload, type SetProfileColorPayload } from './redux/seatColorsSlice'
 export { useSharedProfilesSync, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult } from './redux/useSharedProfilesSync'
 export { avoidSeatColorClash } from './seatColorClash'
-export { isSharedProfileStoreAvailable, loadSharedProfiles, readSharedProfiles, saveSharedProfiles } from './sharedProfileStore'
+export { isSharedProfileStoreAvailable, loadSharedProfiles, readSharedProfiles, saveSharedProfiles, subscribeSharedProfiles } from './sharedProfileStore'
 export type { Profile } from './types'

package/src/redux/resolveInitialProfiles.ts

@@ -7,8 +7,9 @@ import { Profile } from '../types'
 // hand-rolled an identical version of this exact decision inline in its own useProfiles.tsx; this
 // is that logic, extracted verbatim.
 //
-// - Shared store unavailable (Android/web, or an iOS build that hasn't run `expo prebuild` since
-//   the entitlement was added): `localFallback` IS the roster, verbatim.
+// - Shared store unavailable (Android, a web page that can't write localStorage, or an iOS build
+//   that hasn't run `expo prebuild` since the entitlement was added): `localFallback` IS the
+//   roster, verbatim.
 // - Shared store available, but its roster couldn't be read (readSharedProfiles' null):
 //   `localFallback`, and nothing is written. Seeding here would overwrite every other app's
 //   profiles with this app's local snapshot.

package/src/redux/useSharedProfilesSync.ts

@@ -1,17 +1,19 @@
 import { useCallback, useEffect, useRef } from 'react'
 import { AppState } from 'react-native'
 
-import { isSharedProfileStoreAvailable, readSharedProfiles, saveSharedProfiles } from '../sharedProfileStore'
+import { isSharedProfileStoreAvailable, readSharedProfiles, saveSharedProfiles, subscribeSharedProfiles } from '../sharedProfileStore'
 import { Profile } from '../types'
 
 export interface UseSharedProfilesSyncOptions {
   groupId: string
   // Called with a freshly-read shared roster whenever the app returns to the foreground - the
-  // shared store has no cross-process change notification, so this is what catches "edited a
-  // profile in a different @tastic app, then switched back to this one." Skipped while a
-  // syncToShared write is still in flight (see pendingWriteRef below), skipped when the read fails
-  // (a failed read is not an empty roster, see readSharedProfiles), and never called at all when
-  // the shared store isn't available.
+  // App Group has no cross-process change notification, so this is what catches "edited a
+  // profile in a different @tastic app, then switched back to this one." On the web it is also
+  // called the moment another tab or game on the same origin saves the roster (the browser's
+  // `storage` event, see subscribeSharedProfiles), so two games open side by side don't overwrite
+  // each other's edits. Skipped while a syncToShared write is still in flight (see pendingWriteRef
+  // below), skipped when the read fails (a failed read is not an empty roster, see
+  // readSharedProfiles), and never called at all when the shared store isn't available.
   onRemoteChange: (profiles: Profile[]) => void
 }
 
@@ -52,9 +54,13 @@ export function useSharedProfilesSync({ groupId, onRemoteChange }: UseSharedProf
         if (!cancelled && shared !== null) onRemoteChangeRef.current(shared)
       })
     })
+    const unsubscribe = subscribeSharedProfiles(groupId, (shared) => {
+      if (!cancelled && !pendingWriteRef.current) onRemoteChangeRef.current(shared)
+    })
     return () => {
       cancelled = true
       sub.remove()
+      unsubscribe()
     }
   }, [groupId])
 

package/src/sharedProfileStore.ts

@@ -1,3 +1,5 @@
+import { Platform } from 'react-native'
+
 import { isValidProfile } from './profilesValidation'
 import { Profile } from './types'
 
@@ -9,9 +11,9 @@ interface NativeTasticProfile {
 // Lazily/optionally resolved - this package has no hard dependency on expo-modules-core (it's a
 // peer, provided by whatever Expo app consumes it), and the native module itself only registers on
 // iOS (see ios/TasticProfileModule.swift and expo-module.config.json's "apple"-only platform list).
-// Guarding both the require and the lookup means Android/web, and an iOS build that hasn't run
+// Guarding both the require and the lookup means Android, and an iOS build that hasn't run
 // `expo prebuild` since adding this package yet, both degrade to "sharing unavailable" instead of a
-// hard crash.
+// hard crash. The web has a store of its own, below.
 let native: NativeTasticProfile | null = null
 try {
   const { requireOptionalNativeModule } = require('expo-modules-core')
@@ -22,10 +24,73 @@ try {
 
 const PROFILES_KEY = 'sharedProfiles'
 
+// The App Group's suite and key, flattened into one localStorage key: `<groupId>:sharedProfiles`.
+const webKey = (groupId: string, key: string) => `${groupId}:${key}`
+
+// The web build's stand-in for the native module. Every game in the group is served from one
+// origin (games.infinitetoken.com/<game>/), so they all see the same localStorage, which plays the
+// App Group's part. It has the native module's shape, so readSharedProfiles and saveSharedProfiles
+// below don't change. Null (sharing unavailable, as before) off the web, and when localStorage
+// can't be written at all: touching it can throw (storage blocked, a sandboxed frame), and a store
+// that took every write and kept none would wipe the roster (a save fails silently, the key stays
+// missing, the next read comes back [] and the app is handed that as its roster). So it writes and
+// removes a probe once, at load. After a write that fails anyway (the storage quota), reads fail
+// until a write succeeds again, so an older roster still in storage can't undo a change the app
+// has already made locally.
+const createWebStore = (): { store: NativeTasticProfile; storage: Storage } | null => {
+  if (Platform.OS !== 'web') return null
+  try {
+    const storage = globalThis.localStorage
+    if (!storage) return null
+    const probe = webKey('@tastic/profile', 'probe')
+    storage.setItem(probe, '1')
+    storage.removeItem(probe)
+    let lastWriteFailed = false
+    return {
+      storage,
+      store: {
+        getSharedJSON: async (groupId, key) => {
+          if (lastWriteFailed) throw new Error('The last write to the shared roster failed')
+          return storage.getItem(webKey(groupId, key))
+        },
+        setSharedJSON: async (groupId, key, value) => {
+          try {
+            storage.setItem(webKey(groupId, key), value)
+            lastWriteFailed = false
+          } catch (error) {
+            lastWriteFailed = true
+            throw error
+          }
+        }
+      }
+    }
+  } catch {
+    return null
+  }
+}
+
+const web = native ? null : createWebStore()
+if (web) native = web.store
+
 // True once at module load - a consuming app uses this to decide whether to fall back to its own
 // local-only storage for the base roster too (see this package's README's App Group section).
 export const isSharedProfileStoreAvailable = native !== null
 
+// A stored roster's JSON as profiles: [] for nothing stored, null for a blob that isn't a readable
+// roster (not JSON, not an array, or entries none of which are valid). Entries that fail
+// isValidProfile are dropped individually rather than invalidating the whole roster.
+const parseRoster = (json: string | null): Profile[] | null => {
+  if (!json) return []
+  try {
+    const parsed: unknown = JSON.parse(json)
+    if (!Array.isArray(parsed)) return null
+    const profiles = parsed.filter(isValidProfile)
+    return parsed.length > 0 && profiles.length === 0 ? null : profiles
+  } catch {
+    return null
+  }
+}
+
 // Reads the shared base-identity roster out of a given App Group suite, telling a failed read
 // apart from an empty roster. Resolves to [] when nothing has been shared yet (a missing/empty
 // blob) or the store is unavailable, and to null when the store is there but its roster couldn't
@@ -47,15 +112,7 @@ export async function readSharedProfiles(groupId: string): Promise<Profile[] | n
   } catch {
     return null
   }
-  if (!json) return []
-  try {
-    const parsed: unknown = JSON.parse(json)
-    if (!Array.isArray(parsed)) return null
-    const profiles = parsed.filter(isValidProfile)
-    return parsed.length > 0 && profiles.length === 0 ? null : profiles
-  } catch {
-    return null
-  }
+  return parseRoster(json)
 }
 
 // readSharedProfiles with a failed read flattened to []: always resolves to an array, never
@@ -78,3 +135,22 @@ export async function saveSharedProfiles(groupId: string, profiles: Profile[]):
     // Best-effort - see doc comment above.
   }
 }
+
+// Calls `listener` with the roster another tab or game on this origin has just saved (the
+// browser's `storage` event, which never fires in the tab that wrote). The same parse as
+// readSharedProfiles; a roster that can't be read is skipped, and so is the key's removal (or a
+// whole-storage clear), so neither can spread a wipe. Returns the unsubscribe. Does nothing on
+// native, where the App Group has no change notification (useSharedProfilesSync re-reads when the
+// app comes back to the foreground instead), and on the web when the store isn't available.
+export function subscribeSharedProfiles(groupId: string, listener: (profiles: Profile[]) => void): () => void {
+  if (!web || typeof window === 'undefined' || typeof window.addEventListener !== 'function') return () => {}
+  const storageKey = webKey(groupId, PROFILES_KEY)
+  const storage = web.storage
+  const onStorage = (event: StorageEvent) => {
+    if (event.key !== storageKey || event.storageArea !== storage || !event.newValue) return
+    const profiles = parseRoster(event.newValue)
+    if (profiles !== null) listener(profiles)
+  }
+  window.addEventListener('storage', onStorage)
+  return () => window.removeEventListener('storage', onStorage)
+}