@tastic/profile 0.14.1 → 0.16.0

package/src/ProfilesManager.tsx

@@ -1,10 +1,11 @@
-import { defaultColors, useAutoPaperTheme } from '@rific/auto-paper'
+import { defaultColors, FadingScrollView, useAutoPaperTheme } from '@rific/auto-paper'
 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, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { KeyboardAvoidingView, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { Icon, Text, TextInput } from 'react-native-paper'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
@@ -242,9 +243,11 @@ export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDe
       actually keeps a focused row's own fields scrollable into view above the keyboard instead of
       stuck behind it. keyboardShouldPersistTaps='handled' on the ScrollView below is what lets
       tapping a *different* row (e.g. a color swatch, or another profile entirely) register on the
-      first tap while a field elsewhere is still focused, instead of just dismissing the keyboard. */}
+      first tap while a field elsewhere is still focused, instead of just dismissing the keyboard. The rows
+      fade out at an edge while there is more past it, the same cue as the Settings sheet and the
+      Achievements screen (Jay, 2026-10-16: every scrolling screen alike). */}
       <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.keyboardAvoiding}>
-        <ScrollView style={styles.scrollView} contentContainerStyle={[styles.content, { paddingBottom: 32 + insets.bottom }]} showsVerticalScrollIndicator={false} keyboardShouldPersistTaps='handled'>
+        <FadingScrollView style={styles.scrollView} contentContainerStyle={[styles.content, { paddingBottom: 32 + insets.bottom }]} showsVerticalScrollIndicator={false} keyboardShouldPersistTaps='handled'>
           {rows.map((row) => {
             if (row.kind === 'new') {
               if (editingId !== 'new') {
@@ -283,7 +286,7 @@ export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDe
               </TouchableRipple>
             )
           })}
-        </ScrollView>
+        </FadingScrollView>
       </KeyboardAvoidingView>
 
       {/* hud's ConfirmDialog, the one confirm card every app in the fleet uses, so this reads like the

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,5 +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'
@@ -8,8 +9,8 @@ export { createProfileExtensionSlice, type ProfileExtensionActions, type Profile
 export { createProfileSelectionSlice, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, type SelectProfilePayload } from './redux/profileSelectionSlice'
 export { type CreateProfileInput, createProfileRecord, profilesActions, profilesReducer, type UpdateProfilePayload } from './redux/profilesSlice'
 export { resolveInitialProfiles } from './redux/resolveInitialProfiles'
-export { createSeatColorsSlice, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SetLastGuestColorPayload, type SetProfileOverridePayload } from './redux/seatColorsSlice'
+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/seatColorsSlice.ts

@@ -1,4 +1,6 @@
+import { Profile } from '../types'
 import { ActionCreator, createActionCreator } from './createActionCreator'
+import { profilesActions } from './profilesSlice'
 
 // redux-persist's own REHYDRATE action-type constant, inlined as a literal rather than taking a
 // dependency on the package itself - this factory otherwise has no opinion on whether the
@@ -12,21 +14,32 @@ export interface SetLastGuestColorPayload<TSeat> {
   seat: TSeat
 }
 
-export interface SetProfileOverridePayload<TSeat> {
+// A color picked for a profile in this game: it holds while the profile keeps the color it had
+// when the pick was made (see profileSeatColor).
+export interface ProfileColorPick {
+  color: string
+  profileColor: string
+}
+
+export interface SetProfileColorPayload {
+  // The profile the pick is for, with its own color as it is now.
+  profile: Pick<Profile, 'id' | 'color'>
+  // The pick. Null, or the profile's own color, drops it, so the seat follows the profile's color
+  // again.
   color: string | null
-  seat: TSeat
 }
 
 export interface SeatColorsActions<TSeat> {
   setLastCpuColor: ActionCreator<string>
   setLastGuestColor: ActionCreator<SetLastGuestColorPayload<TSeat>>
-  setProfileOverride: ActionCreator<SetProfileOverridePayload<TSeat>>
+  setProfileColor: ActionCreator<SetProfileColorPayload>
 }
 
 export type SeatColorsState<TSeat extends string | number> = {
   lastCpuColor: string
   lastGuestColor: Record<TSeat, string>
-  profileOverride: Record<TSeat, string | null>
+  // Each profile's pick in this game, by profile id. A profile not listed shows its own color.
+  profileColors: Record<string, ProfileColorPick>
 }
 
 export interface SeatColorsSlice<TSeat extends string | number> {
@@ -34,24 +47,33 @@ export interface SeatColorsSlice<TSeat extends string | number> {
   reducer: (state: SeatColorsState<TSeat> | undefined, action: { type: string; payload?: unknown }) => SeatColorsState<TSeat>
 }
 
+function sameColor(a: string, b: string) {
+  return a.toLowerCase() === b.toLowerCase()
+}
+
+// The color a seat with `profile` selected shows: the profile's pick in this game, while the profile
+// still has the color the pick was made against, else the profile's own color. So a new color for
+// the profile itself (on any game's Profiles screen, this one or a sibling's through the shared
+// roster) replaces an older pick, while a rename or a new tag keeps it.
+export function profileSeatColor(profile: Pick<Profile, 'id' | 'color'>, profileColors: Record<string, ProfileColorPick>): string {
+  const pick = profileColors[profile.id]
+  return pick && sameColor(pick.profileColor, profile.color) ? pick.color : profile.color
+}
+
 // Which color a seat should show right now, remembered independently for three sources that must
-// never fight over one value: a guest seat's own last pick, the CPU seat's own last pick, and a
-// manual recolor/clash-swap override landing on a seat that currently has a profile selected (null
-// meaning "no override, track that profile's own saved color live"). Four @tastic games (AirHockey,
-// BoxHockey, LightCycles, Pong) each hand-rolled an identical dedicated seatColorsSlice.ts - same
-// three fields, same createSlice-based reducer, differing only in their own seat type's name
-// (Player) and default-color constants - before this factory existed; this is that shape,
-// generalized over the seat type exactly like createProfileSelectionSlice generalized per-seat
-// profile selection.
+// never fight over one value: a guest seat's own last pick, the CPU seat's own last pick, and each
+// profile's own pick in this game (`profileColors`, by profile id, read through profileSeatColor).
+// A profile's pick follows the profile, not the seat: it is kept when the seat switches to another
+// profile and back, when the profile moves to the other seat, and across relaunches, the same as
+// Solitaire's per-profile table color (2026-10-16; until then it was a per-seat `profileOverride`
+// that any profile change on the seat cleared). Picking the profile's own color drops the pick, and
+// so do a new color for the profile itself and deleting it (this package's profilesActions, which
+// this reducer also listens to). Five @tastic games (AirHockey, BoxHockey,
+// LightCycles, Pong, Snake) use this factory; the first four each hand-rolled an identical
+// dedicated seatColorsSlice.ts before it existed.
 //
-// Snake has the same three fields too, but folded directly into its own catch-all gameSlice.ts
-// alongside a dozen unrelated persisted settings (wrapEdges, cpuDifficulty, speedTier, ...) rather
-// than in a standalone slice of their own. There's no separate `seatColors` sub-state there for this
-// factory's reducer to own without restructuring gameSlice's top-level shape to nest these three
-// fields under their own key first - a real state-shape migration (and a redux-persist rehydration
-// concern, see gameSlice's own REHYDRATE extraReducer), not a drop-in swap. This factory
-// intentionally targets the standalone-slice shape the other four apps already have; Snake staying
-// hand-rolled inside gameSlice is a deliberate scope call for this pass, not an oversight.
+// A store saved before profileColors existed has a `profileOverride` key instead; REHYDRATE drops
+// it, so every profile starts on its own color once.
 //
 // `namespace` prefixes every action type (e.g. 'seatColors/loadout/setLastGuestColor') so an app
 // with more than one independent seat-colors concern never collides between them - same convention
@@ -71,26 +93,54 @@ export interface SeatColorsSlice<TSeat extends string | number> {
 export function createSeatColorsSlice<TSeat extends string | number>(namespace: string, defaultState: SeatColorsState<TSeat>, mountKey = 'seatColors'): SeatColorsSlice<TSeat> {
   const setLastCpuColor = createActionCreator<string>(`seatColors/${namespace}/setLastCpuColor`)
   const setLastGuestColor = createActionCreator<SetLastGuestColorPayload<TSeat>>(`seatColors/${namespace}/setLastGuestColor`)
-  const setProfileOverride = createActionCreator<SetProfileOverridePayload<TSeat>>(`seatColors/${namespace}/setProfileOverride`)
+  const setProfileColor = createActionCreator<SetProfileColorPayload>(`seatColors/${namespace}/setProfileColor`)
+
+  function withoutPick(state: SeatColorsState<TSeat>, id: string): SeatColorsState<TSeat> {
+    if (!state.profileColors[id]) return state
+    const profileColors = { ...state.profileColors }
+    delete profileColors[id]
+    return { ...state, profileColors }
+  }
 
   function reducer(state: SeatColorsState<TSeat> = defaultState, action: { type: string; payload?: unknown }): SeatColorsState<TSeat> {
     // redux-persist's own default stateReconciler (autoMergeLevel1) HARD-REPLACES this slice's
     // entire persisted sub-state on rehydration rather than backfilling missing fields (confirmed
     // against autoMergeLevel1's actual source: `newState[key] = inboundState[key]`, not a merge) -
-    // so a device with a blob persisted before `profileOverride` existed would otherwise rehydrate
-    // with `state.profileOverride === undefined`, and every consumer indexes into it (`profileOverride[seat]`)
-    // with no fallback, throwing. Spreading `defaultState` first, then the incoming persisted
-    // value, backfills exactly that gap - the same pattern Snake's own hand-rolled `gameSlice.ts`
-    // already uses for its equivalent (non-factory) fields via its own REHYDRATE extraReducer.
+    // so a device with a blob persisted before a field existed would otherwise rehydrate without
+    // it, and every consumer indexes into these fields with no fallback, throwing. Spreading
+    // `defaultState` first, then the incoming persisted value, backfills exactly that gap. A
+    // reducer that returns a new object here keeps autoMergeLevel1 from putting the saved blob back
+    // over it, which is what lets the old `profileOverride` key be dropped.
     if (action.type === REHYDRATE) {
       const persisted = (action.payload as Record<string, Partial<SeatColorsState<TSeat>>> | undefined)?.[mountKey]
-      return { ...defaultState, ...state, ...persisted }
+      const next: SeatColorsState<TSeat> & { profileOverride?: unknown } = { ...defaultState, ...state, ...persisted }
+      delete next.profileOverride
+      return next
     }
     if (setLastCpuColor.match(action)) return { ...state, lastCpuColor: action.payload }
     if (setLastGuestColor.match(action)) return { ...state, lastGuestColor: { ...state.lastGuestColor, [action.payload.seat]: action.payload.color } as Record<TSeat, string> }
-    if (setProfileOverride.match(action)) return { ...state, profileOverride: { ...state.profileOverride, [action.payload.seat]: action.payload.color } as Record<TSeat, string | null> }
+    if (setProfileColor.match(action)) {
+      const { profile, color } = action.payload
+      if (color === null || sameColor(color, profile.color)) return withoutPick(state, profile.id)
+      return { ...state, profileColors: { ...state.profileColors, [profile.id]: { color, profileColor: profile.color } } }
+    }
+    if (profilesActions.remove.match(action)) return withoutPick(state, action.payload)
+    // A new color for the profile itself replaces its pick: this game's Profiles screen (update), or
+    // a sibling's through the shared roster (setAll). A pick for a profile missing from the roster is
+    // left alone, like the selection's own pruneToRoster leaves stats alone.
+    if (profilesActions.update.match(action)) {
+      const { id, patch } = action.payload
+      const pick = state.profileColors[id]
+      return pick && patch.color !== undefined && !sameColor(patch.color, pick.profileColor) ? withoutPick(state, id) : state
+    }
+    if (profilesActions.setAll.match(action)) {
+      return action.payload.reduce((next, profile) => {
+        const pick = next.profileColors[profile.id]
+        return pick && !sameColor(profile.color, pick.profileColor) ? withoutPick(next, profile.id) : next
+      }, state)
+    }
     return state
   }
 
-  return { actions: { setLastCpuColor, setLastGuestColor, setProfileOverride }, reducer }
+  return { actions: { setLastCpuColor, setLastGuestColor, setProfileColor }, reducer }
 }

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)
+}