@tastic/profile 0.3.8 → 0.7.0

package/dist/index.js

@@ -25,11 +25,20 @@ __export(index_exports, {
   ProfileChip: () => ProfileChip,
   ProfilePicker: () => ProfilePicker,
   ProfilesManager: () => ProfilesManager,
+  ProfilesScreen: () => ProfilesScreen,
+  createProfileExtensionSlice: () => createProfileExtensionSlice,
+  createProfileRecord: () => createProfileRecord,
+  createProfileSelectionSlice: () => createProfileSelectionSlice,
+  createSeatColorsSlice: () => createSeatColorsSlice,
   isSharedProfileStoreAvailable: () => isSharedProfileStoreAvailable,
   isValidProfile: () => isValidProfile,
   isValidTag: () => isValidTag,
   loadSharedProfiles: () => loadSharedProfiles,
-  saveSharedProfiles: () => saveSharedProfiles
+  profilesActions: () => profilesActions,
+  profilesReducer: () => profilesReducer,
+  resolveInitialProfiles: () => resolveInitialProfiles,
+  saveSharedProfiles: () => saveSharedProfiles,
+  useSharedProfilesSync: () => useSharedProfilesSync
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -508,6 +517,101 @@ var styles3 = import_react_native3.StyleSheet.create({
   }
 });
 
+// src/ProfilesScreen.tsx
+var import_auto_paper4 = require("@rific/auto-paper");
+var import_feedback_press3 = require("@rific/feedback-press");
+var import_react3 = require("react");
+var import_react_native4 = require("react-native");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, cardBg, titleVariant, colorPreview }) {
+  const { dark } = (0, import_auto_paper4.useAutoPaperTheme)();
+  const managerRef = (0, import_react3.useRef)(null);
+  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
+  const bg = bgOverride ?? (dark ? "#000000" : "#FFFFFF");
+  const handleBack = () => {
+    managerRef.current?.commitPendingEdit();
+    onBack();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: [styles4.container, { backgroundColor: bg }], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, cardBg, titleVariant, colorPreview, headerLeft: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
+}
+var styles4 = import_react_native4.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/redux/createActionCreator.ts
+function createActionCreator(type) {
+  const creator = ((payload) => ({ payload, type }));
+  creator.type = type;
+  creator.match = (action) => action.type === type;
+  return creator;
+}
+
+// src/redux/profileExtensionSlice.ts
+function createProfileExtensionSlice(namespace) {
+  const set = createActionCreator(`profileExtension/${namespace}/set`);
+  const remove2 = createActionCreator(`profileExtension/${namespace}/remove`);
+  function reducer(state = {}, action) {
+    if (set.match(action)) return { ...state, [action.payload.id]: action.payload.extension };
+    if (remove2.match(action)) {
+      if (!(action.payload in state)) return state;
+      const next = { ...state };
+      delete next[action.payload];
+      return next;
+    }
+    return state;
+  }
+  return { actions: { remove: remove2, set }, reducer };
+}
+
+// src/redux/profileSelectionSlice.ts
+var REHYDRATE = "persist/REHYDRATE";
+function createProfileSelectionSlice(namespace, defaultState, mountKey = "profileSelection") {
+  const select = createActionCreator(`profileSelection/${namespace}/select`);
+  const clearProfile = createActionCreator(`profileSelection/${namespace}/clearProfile`);
+  function reducer(state = defaultState, action) {
+    if (action.type === REHYDRATE) {
+      const persisted = action.payload?.[mountKey];
+      return { ...defaultState, ...state, ...persisted };
+    }
+    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)) {
+        if (next[seat] === action.payload) next[seat] = null;
+      }
+      return next;
+    }
+    return state;
+  }
+  return { actions: { clearProfile, select }, reducer };
+}
+
+// src/redux/profilesSlice.ts
+var setAll = createActionCreator("profiles/setAll");
+var add = createActionCreator("profiles/add");
+var update = createActionCreator("profiles/update");
+var remove = createActionCreator("profiles/remove");
+var profilesActions = { add, remove, setAll, update };
+function profilesReducer(state = [], action) {
+  if (setAll.match(action)) return action.payload;
+  if (add.match(action)) return [...state, action.payload];
+  if (update.match(action)) {
+    const { id, patch } = action.payload;
+    return state.map((p) => p.id === id ? { ...p, ...patch, updatedAt: Date.now() } : p);
+  }
+  if (remove.match(action)) return state.filter((p) => p.id !== action.payload);
+  return state;
+}
+function generateProfileId() {
+  return `profile-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+function createProfileRecord(input) {
+  const now = Date.now();
+  return { color: input.color, createdAt: now, id: generateProfileId(), name: input.name, tag: input.tag, updatedAt: now };
+}
+
 // src/sharedProfileStore.ts
 var native = null;
 try {
@@ -541,6 +645,74 @@ async function saveSharedProfiles(groupId, profiles) {
   } catch {
   }
 }
+
+// src/redux/resolveInitialProfiles.ts
+async function resolveInitialProfiles(groupId, localFallback) {
+  if (!isSharedProfileStoreAvailable) return localFallback;
+  const shared = await loadSharedProfiles(groupId);
+  if (shared.length === 0 && localFallback.length > 0) {
+    saveSharedProfiles(groupId, localFallback).catch(() => {
+    });
+    return localFallback;
+  }
+  return shared;
+}
+
+// src/redux/seatColorsSlice.ts
+var REHYDRATE2 = "persist/REHYDRATE";
+function createSeatColorsSlice(namespace, defaultState, mountKey = "seatColors") {
+  const setLastCpuColor = createActionCreator(`seatColors/${namespace}/setLastCpuColor`);
+  const setLastGuestColor = createActionCreator(`seatColors/${namespace}/setLastGuestColor`);
+  const setProfileOverride = createActionCreator(`seatColors/${namespace}/setProfileOverride`);
+  function reducer(state = defaultState, action) {
+    if (action.type === REHYDRATE2) {
+      const persisted = action.payload?.[mountKey];
+      return { ...defaultState, ...state, ...persisted };
+    }
+    if (setLastCpuColor.match(action)) return { ...state, lastCpuColor: action.payload };
+    if (setLastGuestColor.match(action)) return { ...state, lastGuestColor: { ...state.lastGuestColor, [action.payload.seat]: action.payload.color } };
+    if (setProfileOverride.match(action)) return { ...state, profileOverride: { ...state.profileOverride, [action.payload.seat]: action.payload.color } };
+    return state;
+  }
+  return { actions: { setLastCpuColor, setLastGuestColor, setProfileOverride }, reducer };
+}
+
+// src/redux/useSharedProfilesSync.ts
+var import_react4 = require("react");
+var import_react_native5 = require("react-native");
+function useSharedProfilesSync({ groupId, onRemoteChange }) {
+  const pendingWriteRef = (0, import_react4.useRef)(false);
+  const onRemoteChangeRef = (0, import_react4.useRef)(onRemoteChange);
+  (0, import_react4.useEffect)(() => {
+    onRemoteChangeRef.current = onRemoteChange;
+  }, [onRemoteChange]);
+  (0, import_react4.useEffect)(() => {
+    if (!isSharedProfileStoreAvailable) return;
+    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);
+      });
+    });
+    return () => {
+      cancelled = true;
+      sub.remove();
+    };
+  }, [groupId]);
+  const syncToShared = (0, import_react4.useCallback)(
+    (next) => {
+      if (!isSharedProfileStoreAvailable) return;
+      pendingWriteRef.current = true;
+      saveSharedProfiles(groupId, next).catch(() => {
+      }).finally(() => {
+        pendingWriteRef.current = false;
+      });
+    },
+    [groupId]
+  );
+  return { syncToShared };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   MAX_PROFILE_NAME_LENGTH,
@@ -548,9 +720,18 @@ async function saveSharedProfiles(groupId, profiles) {
   ProfileChip,
   ProfilePicker,
   ProfilesManager,
+  ProfilesScreen,
+  createProfileExtensionSlice,
+  createProfileRecord,
+  createProfileSelectionSlice,
+  createSeatColorsSlice,
   isSharedProfileStoreAvailable,
   isValidProfile,
   isValidTag,
   loadSharedProfiles,
-  saveSharedProfiles
+  profilesActions,
+  profilesReducer,
+  resolveInitialProfiles,
+  saveSharedProfiles,
+  useSharedProfilesSync
 });

package/dist/index.mjs

@@ -480,6 +480,101 @@ var styles3 = StyleSheet3.create({
   }
 });
 
+// src/ProfilesScreen.tsx
+import { useAutoPaperTheme as useAutoPaperTheme2 } from "@rific/auto-paper";
+import { IconButton } from "@rific/feedback-press";
+import { useRef as useRef2 } from "react";
+import { StyleSheet as StyleSheet4, View as View4 } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, cardBg, titleVariant, colorPreview }) {
+  const { dark } = useAutoPaperTheme2();
+  const managerRef = useRef2(null);
+  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
+  const bg = bgOverride ?? (dark ? "#000000" : "#FFFFFF");
+  const handleBack = () => {
+    managerRef.current?.commitPendingEdit();
+    onBack();
+  };
+  return /* @__PURE__ */ jsx4(View4, { style: [styles4.container, { backgroundColor: bg }], children: /* @__PURE__ */ jsx4(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, cardBg, titleVariant, colorPreview, headerLeft: /* @__PURE__ */ jsx4(IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
+}
+var styles4 = StyleSheet4.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/redux/createActionCreator.ts
+function createActionCreator(type) {
+  const creator = ((payload) => ({ payload, type }));
+  creator.type = type;
+  creator.match = (action) => action.type === type;
+  return creator;
+}
+
+// src/redux/profileExtensionSlice.ts
+function createProfileExtensionSlice(namespace) {
+  const set = createActionCreator(`profileExtension/${namespace}/set`);
+  const remove2 = createActionCreator(`profileExtension/${namespace}/remove`);
+  function reducer(state = {}, action) {
+    if (set.match(action)) return { ...state, [action.payload.id]: action.payload.extension };
+    if (remove2.match(action)) {
+      if (!(action.payload in state)) return state;
+      const next = { ...state };
+      delete next[action.payload];
+      return next;
+    }
+    return state;
+  }
+  return { actions: { remove: remove2, set }, reducer };
+}
+
+// src/redux/profileSelectionSlice.ts
+var REHYDRATE = "persist/REHYDRATE";
+function createProfileSelectionSlice(namespace, defaultState, mountKey = "profileSelection") {
+  const select = createActionCreator(`profileSelection/${namespace}/select`);
+  const clearProfile = createActionCreator(`profileSelection/${namespace}/clearProfile`);
+  function reducer(state = defaultState, action) {
+    if (action.type === REHYDRATE) {
+      const persisted = action.payload?.[mountKey];
+      return { ...defaultState, ...state, ...persisted };
+    }
+    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)) {
+        if (next[seat] === action.payload) next[seat] = null;
+      }
+      return next;
+    }
+    return state;
+  }
+  return { actions: { clearProfile, select }, reducer };
+}
+
+// src/redux/profilesSlice.ts
+var setAll = createActionCreator("profiles/setAll");
+var add = createActionCreator("profiles/add");
+var update = createActionCreator("profiles/update");
+var remove = createActionCreator("profiles/remove");
+var profilesActions = { add, remove, setAll, update };
+function profilesReducer(state = [], action) {
+  if (setAll.match(action)) return action.payload;
+  if (add.match(action)) return [...state, action.payload];
+  if (update.match(action)) {
+    const { id, patch } = action.payload;
+    return state.map((p) => p.id === id ? { ...p, ...patch, updatedAt: Date.now() } : p);
+  }
+  if (remove.match(action)) return state.filter((p) => p.id !== action.payload);
+  return state;
+}
+function generateProfileId() {
+  return `profile-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+function createProfileRecord(input) {
+  const now = Date.now();
+  return { color: input.color, createdAt: now, id: generateProfileId(), name: input.name, tag: input.tag, updatedAt: now };
+}
+
 // src/sharedProfileStore.ts
 var native = null;
 try {
@@ -513,15 +608,92 @@ async function saveSharedProfiles(groupId, profiles) {
   } catch {
   }
 }
+
+// src/redux/resolveInitialProfiles.ts
+async function resolveInitialProfiles(groupId, localFallback) {
+  if (!isSharedProfileStoreAvailable) return localFallback;
+  const shared = await loadSharedProfiles(groupId);
+  if (shared.length === 0 && localFallback.length > 0) {
+    saveSharedProfiles(groupId, localFallback).catch(() => {
+    });
+    return localFallback;
+  }
+  return shared;
+}
+
+// src/redux/seatColorsSlice.ts
+var REHYDRATE2 = "persist/REHYDRATE";
+function createSeatColorsSlice(namespace, defaultState, mountKey = "seatColors") {
+  const setLastCpuColor = createActionCreator(`seatColors/${namespace}/setLastCpuColor`);
+  const setLastGuestColor = createActionCreator(`seatColors/${namespace}/setLastGuestColor`);
+  const setProfileOverride = createActionCreator(`seatColors/${namespace}/setProfileOverride`);
+  function reducer(state = defaultState, action) {
+    if (action.type === REHYDRATE2) {
+      const persisted = action.payload?.[mountKey];
+      return { ...defaultState, ...state, ...persisted };
+    }
+    if (setLastCpuColor.match(action)) return { ...state, lastCpuColor: action.payload };
+    if (setLastGuestColor.match(action)) return { ...state, lastGuestColor: { ...state.lastGuestColor, [action.payload.seat]: action.payload.color } };
+    if (setProfileOverride.match(action)) return { ...state, profileOverride: { ...state.profileOverride, [action.payload.seat]: action.payload.color } };
+    return state;
+  }
+  return { actions: { setLastCpuColor, setLastGuestColor, setProfileOverride }, reducer };
+}
+
+// src/redux/useSharedProfilesSync.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef3 } from "react";
+import { AppState } from "react-native";
+function useSharedProfilesSync({ groupId, onRemoteChange }) {
+  const pendingWriteRef = useRef3(false);
+  const onRemoteChangeRef = useRef3(onRemoteChange);
+  useEffect2(() => {
+    onRemoteChangeRef.current = onRemoteChange;
+  }, [onRemoteChange]);
+  useEffect2(() => {
+    if (!isSharedProfileStoreAvailable) return;
+    let cancelled = false;
+    const sub = AppState.addEventListener("change", (next) => {
+      if (next !== "active" || pendingWriteRef.current) return;
+      loadSharedProfiles(groupId).then((shared) => {
+        if (!cancelled) onRemoteChangeRef.current(shared);
+      });
+    });
+    return () => {
+      cancelled = true;
+      sub.remove();
+    };
+  }, [groupId]);
+  const syncToShared = useCallback2(
+    (next) => {
+      if (!isSharedProfileStoreAvailable) return;
+      pendingWriteRef.current = true;
+      saveSharedProfiles(groupId, next).catch(() => {
+      }).finally(() => {
+        pendingWriteRef.current = false;
+      });
+    },
+    [groupId]
+  );
+  return { syncToShared };
+}
 export {
   MAX_PROFILE_NAME_LENGTH,
   MAX_TAG_LENGTH,
   ProfileChip,
   ProfilePicker,
   ProfilesManager,
+  ProfilesScreen,
+  createProfileExtensionSlice,
+  createProfileRecord,
+  createProfileSelectionSlice,
+  createSeatColorsSlice,
   isSharedProfileStoreAvailable,
   isValidProfile,
   isValidTag,
   loadSharedProfiles,
-  saveSharedProfiles
+  profilesActions,
+  profilesReducer,
+  resolveInitialProfiles,
+  saveSharedProfiles,
+  useSharedProfilesSync
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/profile",
-  "version": "0.3.8",
+  "version": "0.7.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",
@@ -63,14 +63,15 @@
   "prettier": "@infinitetoken/eslint-config/prettier",
   "devDependencies": {
     "@infinitetoken/eslint-config": "0.2.0",
-    "@infinitetoken/jest-config": "^0.2.4",
-    "@infinitetoken/tsconfig": "^0.4.1",
-    "@rific/auto-paper": "^0.10.3",
-    "@rific/feedback-press": "^0.10.8",
+    "@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.6.3",
-    "@tastic/core": "^0.2.0",
-    "@tastic/hud": "^0.6.0",
+    "@tastic/core": "^0.8.0",
+    "@tastic/hud": "^0.8.5",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",

package/src/ProfilesManager.tsx

@@ -21,7 +21,10 @@ const CHIP_SIZE = 40
 // as @tastic/hud's BaseStatsScreen does for its own identical titleVariant prop.
 type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall'
 
-interface ProfileEditPatch {
+// Exported (not just used internally) so a host composing a screen around this component — e.g.
+// @tastic/profile's own ProfilesScreen — can reference this exact shape in its own onCreate/onSave
+// prop types without redeclaring it.
+export interface ProfileEditPatch {
   name: string
   color: string
   tag: string

package/src/ProfilesScreen.tsx

@@ -0,0 +1,83 @@
+import { useAutoPaperTheme } from '@rific/auto-paper'
+import { IconButton } from '@rific/feedback-press'
+import { useRef } from 'react'
+import { StyleSheet, View } from 'react-native'
+
+import { ProfileEditPatch, ProfilesManager, ProfilesManagerHandle } from './ProfilesManager'
+import { Profile } from './types'
+
+// react-native-paper's own MD3 Text variant names — mirrored locally rather than importing its
+// internal VariantProp/MD3TypescaleKey (not exported from the package's public entry point), same
+// as ProfilesManager's own identical titleVariant prop does.
+type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall'
+
+export interface ProfilesScreenProps {
+  profiles: Profile[]
+  // Same reasoning as ProfilesManager's own defaultColor: this component has no opinion on the
+  // host's palette, so it stays required rather than defaulted. Callers already differ here today
+  // (most apps pass @rific/auto-paper's defaultColors[0].value; one passes its own local
+  // DEFAULT_P1_COLOR constant instead) — this prop is exactly what lets both keep working unchanged.
+  defaultColor: string
+  // Same ProfileEditPatch shape ProfilesManager's own onCreate/onSave already take — deliberately
+  // NOT widened to accept a host's own richer CreateProfileInput. A host whose profile shape has
+  // extra required fields (e.g. a control/key scheme) composes those in its own closure at the call
+  // site, exactly as it already does calling <ProfilesManager> today.
+  onCreate: (patch: ProfileEditPatch) => void
+  onSave: (id: string, patch: ProfileEditPatch) => void
+  // Irreversible, same as ProfilesManager's own onDelete — fires once, after this component's
+  // internal confirmation card. If the host tracks anything else keyed by profile id (stats,
+  // achievement-unlock history), clear that on its own side inside this callback, same as every
+  // current app's `(id) => { deleteProfile(id); removeProfileStats(id) }`.
+  onDelete: (id: string) => void
+  onBack: () => void
+  // Independently optional overrides, each defaulting to the same literal-black/white-by-appearance
+  // formula every current caller renders with unchanged (none of them pass these today) — same
+  // convention as BaseStatsScreen's and ProfilesManager's own fg/bg-shaped overrides. fg/fgMuted/
+  // cardBg/titleVariant/colorPreview are forwarded straight through to the internal ProfilesManager.
+  fg?: string
+  fgMuted?: string
+  bg?: string
+  cardBg?: string
+  titleVariant?: MD3TextVariant
+  colorPreview?: (hex: string) => string
+}
+
+// The routed profiles-roster screen shell every app in this fleet hand-rolls around ProfilesManager
+// today: the container View + theme-derived bg/fg + back button + commit-pending-edit-before-
+// navigate composition. Lives here rather than in @tastic/hud since it has zero generic/non-profile
+// UI content — it's one layer up from ProfilesManager, not a different kind of thing. Deliberately
+// still doesn't call useProfiles()/useGameStats() (or any host-specific hook) itself — those two
+// hooks' shapes are genuinely app-specific (different CreateProfileInput/GameStatsContextValue per
+// app), so this stays props-in/callbacks-out, exactly like ProfilesManager itself.
+export function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, cardBg, titleVariant, colorPreview }: ProfilesScreenProps) {
+  const { dark } = useAutoPaperTheme()
+  // Owns the ref itself — nothing outside this component ever needs it, since this is now the one
+  // thing that both renders ProfilesManager AND owns the only navigation trigger next to it.
+  const managerRef = useRef<ProfilesManagerHandle>(null)
+  // Same literal-black/white-by-appearance formula as ProfilesManager's own fg default, resolved
+  // here (rather than left to ProfilesManager) so this component's own headerLeft IconButton and
+  // ProfilesManager's title always share the identical color.
+  const fg = fgOverride ?? (dark ? '#FFFFFF' : '#000000')
+  const bg = bgOverride ?? (dark ? '#000000' : '#FFFFFF')
+
+  // Folds in the exact 2-line composition every app hand-rolls today: a hardware back gesture or
+  // swipe-back unmounts ProfilesManager (which flushes on its own), but a host router that keeps a
+  // popped screen mounted-but-hidden instead of unmounting it (expo-router's web renderer) needs
+  // this explicit flush before navigating away, or an in-progress edit is silently lost.
+  const handleBack = () => {
+    managerRef.current?.commitPendingEdit()
+    onBack()
+  }
+
+  return (
+    <View style={[styles.container, { backgroundColor: bg }]}>
+      <ProfilesManager ref={managerRef} profiles={profiles} defaultColor={defaultColor} onCreate={onCreate} onSave={onSave} onDelete={onDelete} fg={fg} fgMuted={fgMuted} cardBg={cardBg} titleVariant={titleVariant} colorPreview={colorPreview} headerLeft={<IconButton icon='arrow-left' iconColor={fg} size={24} onPress={handleBack} accessibilityLabel='Back' />} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+})

package/src/index.ts

@@ -1,6 +1,13 @@
 export { ProfileChip } from './ProfileChip'
 export { ProfilePicker } from './ProfilePicker'
-export { ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps } from './ProfilesManager'
+export { type ProfileEditPatch, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps } from './ProfilesManager'
+export { ProfilesScreen, type ProfilesScreenProps } from './ProfilesScreen'
 export { isValidProfile, isValidTag, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH } from './profilesValidation'
+export { createProfileExtensionSlice, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, type SetProfileExtensionPayload } from './redux/profileExtensionSlice'
+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 { useSharedProfilesSync, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult } from './redux/useSharedProfilesSync'
 export { isSharedProfileStoreAvailable, loadSharedProfiles, saveSharedProfiles } from './sharedProfileStore'
 export type { Profile } from './types'

package/src/redux/createActionCreator.ts

@@ -0,0 +1,21 @@
+export interface ReduxAction<P> {
+  payload: P
+  type: string
+}
+
+export type ActionCreator<P> = ((payload: P) => ReduxAction<P>) & {
+  type: string
+  match: (action: { type: string }) => action is ReduxAction<P>
+}
+
+// Same low-level shape @rific/core's createSettingsSlice gives every other slice in the fleet
+// (namespaced type string, .type, .match). Shared internally between profilesSlice.ts and
+// profileExtensionSlice.ts rather than each hand-rolling its own copy — not exported from
+// index.ts, since it's an implementation detail of how this package's own reducers are built, not
+// something a consuming app needs.
+export function createActionCreator<P>(type: string): ActionCreator<P> {
+  const creator = ((payload: P) => ({ payload, type })) as ActionCreator<P>
+  creator.type = type
+  creator.match = (action: { type: string }): action is ReduxAction<P> => action.type === type
+  return creator
+}

package/src/redux/profileExtensionSlice.ts

@@ -0,0 +1,55 @@
+import { ActionCreator, createActionCreator } from './createActionCreator'
+
+export interface SetProfileExtensionPayload<TExtension> {
+  extension: TExtension
+  id: string
+}
+
+export interface ProfileExtensionActions<TExtension> {
+  remove: ActionCreator<string>
+  set: ActionCreator<SetProfileExtensionPayload<TExtension>>
+}
+
+export type ProfileExtensionState<TExtension> = Record<string, TExtension>
+
+export interface ProfileExtensionSlice<TExtension> {
+  actions: ProfileExtensionActions<TExtension>
+  reducer: (state: ProfileExtensionState<TExtension> | undefined, action: { type: string }) => ProfileExtensionState<TExtension>
+}
+
+// A per-profile extension is any app-specific field that doesn't belong on the shared base Profile
+// type (a control scheme, a key-binding preference, a difficulty setting, ...) but still needs to
+// travel WITH a specific profile id, entirely locally — never synced to the shared App Group
+// roster (a profile created on a sibling @tastic game has no idea this extension exists at all,
+// same as this package's own README describes for any app-specific field). Two real @tastic games
+// (BoxHockey's controlScheme, LightCycles' keyScheme) each hand-rolled an almost-identical
+// Record<profileId, TExtension> reducer before this factory existed; this is that shape,
+// generalized over the extension's own type so a future game's own per-profile preference doesn't
+// need a third copy.
+//
+// `namespace` prefixes every action type (e.g. 'profileExtension/controlScheme/set') so an app with
+// more than one independent per-profile extension never collides between them — same convention
+// @rific/core's createSettingsSlice uses its own namespace argument for.
+//
+// Deliberately NOT auto-cleared when the base `profiles` slice removes an id — this stays a plain,
+// self-contained reducer rather than importing profilesActions.remove's action type to listen for.
+// An app already dispatches multiple independent actions when deleting a profile (profilesActions.
+// remove, and typically its own local selection-slice cleanup); calling this slice's own `remove`
+// alongside those is one more such dispatch, not new cross-slice wiring.
+export function createProfileExtensionSlice<TExtension>(namespace: string): ProfileExtensionSlice<TExtension> {
+  const set = createActionCreator<SetProfileExtensionPayload<TExtension>>(`profileExtension/${namespace}/set`)
+  const remove = createActionCreator<string>(`profileExtension/${namespace}/remove`)
+
+  function reducer(state: ProfileExtensionState<TExtension> = {}, action: { type: string }): ProfileExtensionState<TExtension> {
+    if (set.match(action)) return { ...state, [action.payload.id]: action.payload.extension }
+    if (remove.match(action)) {
+      if (!(action.payload in state)) return state
+      const next = { ...state }
+      delete next[action.payload]
+      return next
+    }
+    return state
+  }
+
+  return { actions: { remove, set }, reducer }
+}