@tastic/profile 0.15.0 → 0.16.1

package/README.md

@@ -49,7 +49,9 @@ see its own doc comment for why that component is generic over your own `Profile
 - **`ProfilePicker`**: a name trigger + selection popover: pick an existing profile, fall back to a
   null/"guest" selection, or (if `onManage` is passed) navigate to a management screen. Selection
   only - creating, renaming, and deleting all live in `ProfilesManager`. Generic over your own
-  `Profile` type (see above). Placement props (all optional, see "Fake-rotated frames" below):
+  `Profile` type (see above). `takenId` disables one other seat's profile in the list; `takenIds`
+  (an array) disables several, for a lobby with more than two seats, and never disables the
+  picker's own selection, so you can pass every seated id. Placement props (all optional, see "Fake-rotated frames" below):
   `align` (force a horizontal side), `alignOverride` (substitute the whole placement result), and
   `rotation` (forwarded to the automatic measurement). `colorSection`
   (`{ value, onChange, previewValue?, swatches?, label?, caption? }`) puts a Color row at the top of
@@ -72,7 +74,7 @@ see its own doc comment for why that component is generic over your own `Profile
   `profiles`/`defaultColor`/`onCreate`/`onSave`/`onDelete` as `ProfilesManager` itself, plus
   `onBack`. Owns its own `ProfilesManagerHandle` ref internally - there's no `ref` prop here, since
   nothing outside it needs one anymore.
-- **`readSharedProfiles` / `loadSharedProfiles` / `saveSharedProfiles` / `isSharedProfileStoreAvailable`**: an *optional*
+- **`readSharedProfiles` / `loadSharedProfiles` / `saveSharedProfiles` / `subscribeSharedProfiles` / `isSharedProfileStoreAvailable`**: an *optional*
   cross-app roster, shared between multiple apps of yours via a native iOS App Group (same Apple
   Developer Team, same `"com.apple.security.application-groups"` entitlement value on every
   participating app). This only ever carries the base `Profile` shape above - a host app's own
@@ -103,9 +105,17 @@ see its own doc comment for why that component is generic over your own `Profile
   result can't replace a roster or lead to a write.
 
   Backed by a small native Expo Module (`ios/TasticProfileModule.swift`) wrapping
-  `UserDefaults(suiteName:)` - iOS only (see `expo-module.config.json`'s `"apple"`-only platform
-  list); `isSharedProfileStoreAvailable` is `false` on Android/web and on any iOS build that hasn't
-  run `expo prebuild` since adding this App Group's entitlement, so a host app always needs its own
+  `UserDefaults(suiteName:)` on iOS (see `expo-module.config.json`'s `"apple"`-only platform list),
+  and on the web by `localStorage`, under the key `<groupId>:sharedProfiles`: games served from one
+  origin (for example `games.example.com/<game>/`) share it the way apps share an App Group, while
+  games on different origins can't see each other's. The web store writes and removes a probe key
+  once at load and stays unavailable if that fails (storage blocked), and after a write that fails
+  anyway, reads fail until a write succeeds, so an older roster can't undo a local change.
+  `subscribeSharedProfiles(groupId, listener)` hands `listener` the roster another tab or game on
+  the same origin has just saved (the browser's `storage` event); it does nothing on native.
+  `useSharedProfilesSync` subscribes for you. `isSharedProfileStoreAvailable` is `false` on
+  Android, on a web page that can't write `localStorage`, and on any iOS build that hasn't run
+  `expo prebuild` since adding this App Group's entitlement, so a host app always needs its own
   local-storage fallback path regardless of platform. Requires the App Group itself to be declared
   in each consuming app's own Expo config, e.g.:
 
@@ -278,7 +288,7 @@ so a host app plugs the reducer(s) into whatever store it already has:
   Always local, like the guest/CPU/override colors below, and never part of the shared
   App Group roster, since who's selected on *this* device is naturally per-app, per-device state.
 
-## Muted profile colors (`ProfileColorProvider`)
+## Muted profile colors and drawn swatches (`ProfileColorProvider`)
 
 An app that draws profile colors through a transform (Solitaire blends them toward its muted
 card-back palette) wraps its tree once:
@@ -298,6 +308,26 @@ for free. Only what's drawn changes: saved colors, `onCreate`/`onSave` values an
 untouched. `useProfileColorPreview()` returns the provider's function (or `undefined`), and
 `useProfileDisplayColor(hex)` resolves one color. Without a provider nothing changes.
 
+`renderSwatch` (also optional, with or without `preview`) draws the fill of every round swatch this
+package draws, in place of the flat color: `ProfileChip`, the pickers' chip trigger, the Color row's
+swatch and the color page's swatches. It's called as `renderSwatch(color, size)` with the drawn
+color (after `preview`) and the circle's diameter, and its drawing is clipped to the circle, behind
+the tag, icon or check. The tag and check still take their contrast from `color`, so treat it as
+the primary color of whatever you draw. Hangman draws a pie of each color's triad:
+
+```tsx
+import { getTriadicPalette } from '@rific/auto-paper'
+import { ProfileColorProvider, type ProfileSwatchRenderer } from '@tastic/profile'
+
+const renderSwatch: ProfileSwatchRenderer = (color, size) => <TriadPie colors={getTriadicPalette(color)} size={size} />
+<ProfileColorProvider renderSwatch={renderSwatch}>{children}</ProfileColorProvider>
+```
+
+(`TriadPie` is your own component, e.g. three `react-native-svg` arcs.) Give it a stable identity
+(module level, or `useCallback`). Rows that fill with a color (a selected picker row) stay flat, and
+so do `@tastic/hud`'s `InlineColorPicker` swatches in `ProfilesManager`'s edit row, which don't read
+this provider. `useProfileSwatchRenderer()` returns it (or `undefined`).
+
 ## Per-seat color persistence
 
 A loadout/lobby screen's color for a given seat is never just "the selected profile's saved
@@ -362,11 +392,16 @@ Published to the public npm registry via tag-based CI (OIDC trusted publishing -
 ## Peer dependencies
 
 `react`, `react-native`, `react-native-paper`, `react-native-safe-area-context`, `@rific/auto-paper`
-(`getContrastColor`, `useAutoPaperTheme`), `@rific/feedback-press` (`TouchableRipple`),
-`@rific/focus-chain` (`useFocusChain`), `@rific/toaster` (`useToast`), `@tastic/hud`
-(`InlineColorPicker`, `PopoverBody`, `PopoverHost`, `useAutoAlign`, `usePopoverHost`), `@tastic/core`
-(a peer of `@tastic/hud` itself) - none of these are bundled, so use whatever versions your app
-already has.
+(`defaultColors`, `FadingScrollView`, `getContrastColor`, `useAutoPaperTheme`), `@rific/feedback-press`
+(`TouchableRipple`), `@rific/focus-chain` (`useFocusChain`), `@rific/toaster` (`useToast`),
+`@tastic/hud` >= 0.23.0 (`ConfirmDialog`, `InlineColorPicker`, `PopoverBody`, `useAutoAlign`,
+`usePopoverHost`), `@tastic/core` (a peer of `@tastic/hud` itself) - none of these are bundled, so
+use whatever versions your app already has.
+
+This package imports `@tastic/hud` only through its light `@tastic/hud/chrome` entry, never the main
+one (which also loads Skia and `@tastic/split-screen`), so an app with neither, like Hangman, can use
+every component here. That's why it needs hud 0.23.0, the first whose `./chrome` has the popover
+pieces and the color picker.
 
 `expo-modules-core` is an *optional* peer - only resolved by `loadSharedProfiles`/`saveSharedProfiles`
 for the native App Group bridge described above; safe to omit entirely on an Android/web-only

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { RefObject, ReactNode, Ref } from 'react';
-import { PopoverHost, PopoverRotation } from '@tastic/hud';
+import { PopoverHost, PopoverRotation } from '@tastic/hud/chrome';
 import { View, StyleProp, ViewStyle } from 'react-native';
 import { SeedColor } from '@rific/auto-paper';
 
@@ -30,6 +30,7 @@ interface OptionPickerOption<T extends string> {
     value: T;
     label: string;
     icon?: string;
+    color?: string;
 }
 declare function getOptionPickerContentSize(optionCount: number, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize;
 interface OptionPickerProps<T extends string> {
@@ -66,12 +67,15 @@ interface Props {
 }
 declare function ProfileChip({ profile, size, filled }: Props): react.JSX.Element;
 
+type ProfileSwatchRenderer = (color: string, size: number) => ReactNode;
 interface ProfileColorProviderProps {
-    preview: (hex: string) => string;
+    preview?: (hex: string) => string;
+    renderSwatch?: ProfileSwatchRenderer;
     children: ReactNode;
 }
-declare function ProfileColorProvider({ preview, children }: ProfileColorProviderProps): react.JSX.Element;
+declare function ProfileColorProvider({ preview, renderSwatch, children }: ProfileColorProviderProps): react.JSX.Element;
 declare function useProfileColorPreview(): ((hex: string) => string) | undefined;
+declare function useProfileSwatchRenderer(): ProfileSwatchRenderer | undefined;
 declare function useProfileDisplayColor(hex: string): string;
 
 declare function getProfilePickerContentSize(profileCount: number, hasManageRow?: boolean, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize;
@@ -81,6 +85,7 @@ interface ProfilePickerProps<P extends Profile> {
     profiles: P[];
     selectedId: string | null;
     takenId?: string | null;
+    takenIds?: readonly string[];
     color: string;
     dark: boolean;
     align?: 'left' | 'right' | 'center';
@@ -94,7 +99,7 @@ interface ProfilePickerProps<P extends Profile> {
     colorSection?: ProfilePickerColorSection;
     triggerStyle?: StyleProp<ViewStyle>;
 }
-declare function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, color, dark, align, alignOverride, rotation, guestLabel, nullLabel, nullIcon, onSelect, onManage, colorSection, triggerStyle }: ProfilePickerProps<P>): react.JSX.Element;
+declare function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, takenIds, color, dark, align, alignOverride, rotation, guestLabel, nullLabel, nullIcon, onSelect, onManage, colorSection, triggerStyle }: ProfilePickerProps<P>): react.JSX.Element;
 
 type MD3TextVariant$1 = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface ProfileEditPatch {
@@ -259,5 +264,6 @@ declare const isSharedProfileStoreAvailable: boolean;
 declare function readSharedProfiles(groupId: string): Promise<Profile[] | null>;
 declare function loadSharedProfiles(groupId: string): Promise<Profile[]>;
 declare function saveSharedProfiles(groupId: string, profiles: Profile[]): Promise<void>;
+declare function subscribeSharedProfiles(groupId: string, listener: (profiles: Profile[]) => void): () => void;
 
-export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, OptionPicker, type OptionPickerOption, type Profile, ProfileChip, type ProfileColorPick, ProfileColorProvider, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerColorSection, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileColorPayload, type SetProfileExtensionPayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, avoidSeatColorClash, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getOptionPickerContentSize, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profileSeatColor, profilesActions, profilesReducer, readSharedProfiles, resolveInitialProfiles, saveSharedProfiles, useProfileColorPreview, useProfileDisplayColor, useSharedProfilesSync };
+export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, OptionPicker, type OptionPickerOption, type Profile, ProfileChip, type ProfileColorPick, ProfileColorProvider, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerColorSection, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, type ProfileSwatchRenderer, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileColorPayload, type SetProfileExtensionPayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, avoidSeatColorClash, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getOptionPickerContentSize, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profileSeatColor, profilesActions, profilesReducer, readSharedProfiles, resolveInitialProfiles, saveSharedProfiles, subscribeSharedProfiles, useProfileColorPreview, useProfileDisplayColor, useProfileSwatchRenderer, useSharedProfilesSync };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { RefObject, ReactNode, Ref } from 'react';
-import { PopoverHost, PopoverRotation } from '@tastic/hud';
+import { PopoverHost, PopoverRotation } from '@tastic/hud/chrome';
 import { View, StyleProp, ViewStyle } from 'react-native';
 import { SeedColor } from '@rific/auto-paper';
 
@@ -30,6 +30,7 @@ interface OptionPickerOption<T extends string> {
     value: T;
     label: string;
     icon?: string;
+    color?: string;
 }
 declare function getOptionPickerContentSize(optionCount: number, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize;
 interface OptionPickerProps<T extends string> {
@@ -66,12 +67,15 @@ interface Props {
 }
 declare function ProfileChip({ profile, size, filled }: Props): react.JSX.Element;
 
+type ProfileSwatchRenderer = (color: string, size: number) => ReactNode;
 interface ProfileColorProviderProps {
-    preview: (hex: string) => string;
+    preview?: (hex: string) => string;
+    renderSwatch?: ProfileSwatchRenderer;
     children: ReactNode;
 }
-declare function ProfileColorProvider({ preview, children }: ProfileColorProviderProps): react.JSX.Element;
+declare function ProfileColorProvider({ preview, renderSwatch, children }: ProfileColorProviderProps): react.JSX.Element;
 declare function useProfileColorPreview(): ((hex: string) => string) | undefined;
+declare function useProfileSwatchRenderer(): ProfileSwatchRenderer | undefined;
 declare function useProfileDisplayColor(hex: string): string;
 
 declare function getProfilePickerContentSize(profileCount: number, hasManageRow?: boolean, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize;
@@ -81,6 +85,7 @@ interface ProfilePickerProps<P extends Profile> {
     profiles: P[];
     selectedId: string | null;
     takenId?: string | null;
+    takenIds?: readonly string[];
     color: string;
     dark: boolean;
     align?: 'left' | 'right' | 'center';
@@ -94,7 +99,7 @@ interface ProfilePickerProps<P extends Profile> {
     colorSection?: ProfilePickerColorSection;
     triggerStyle?: StyleProp<ViewStyle>;
 }
-declare function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, color, dark, align, alignOverride, rotation, guestLabel, nullLabel, nullIcon, onSelect, onManage, colorSection, triggerStyle }: ProfilePickerProps<P>): react.JSX.Element;
+declare function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, takenIds, color, dark, align, alignOverride, rotation, guestLabel, nullLabel, nullIcon, onSelect, onManage, colorSection, triggerStyle }: ProfilePickerProps<P>): react.JSX.Element;
 
 type MD3TextVariant$1 = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface ProfileEditPatch {
@@ -259,5 +264,6 @@ declare const isSharedProfileStoreAvailable: boolean;
 declare function readSharedProfiles(groupId: string): Promise<Profile[] | null>;
 declare function loadSharedProfiles(groupId: string): Promise<Profile[]>;
 declare function saveSharedProfiles(groupId: string, profiles: Profile[]): Promise<void>;
+declare function subscribeSharedProfiles(groupId: string, listener: (profiles: Profile[]) => void): () => void;
 
-export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, OptionPicker, type OptionPickerOption, type Profile, ProfileChip, type ProfileColorPick, ProfileColorProvider, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerColorSection, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileColorPayload, type SetProfileExtensionPayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, avoidSeatColorClash, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getOptionPickerContentSize, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profileSeatColor, profilesActions, profilesReducer, readSharedProfiles, resolveInitialProfiles, saveSharedProfiles, useProfileColorPreview, useProfileDisplayColor, useSharedProfilesSync };
+export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, OptionPicker, type OptionPickerOption, type Profile, ProfileChip, type ProfileColorPick, ProfileColorProvider, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerColorSection, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, type ProfileSwatchRenderer, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileColorPayload, type SetProfileExtensionPayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, avoidSeatColorClash, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getOptionPickerContentSize, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profileSeatColor, profilesActions, profilesReducer, readSharedProfiles, resolveInitialProfiles, saveSharedProfiles, subscribeSharedProfiles, useProfileColorPreview, useProfileDisplayColor, useProfileSwatchRenderer, useSharedProfilesSync };