@oxyhq/services 22.10.0 → 22.11.0

package/lib/typescript/module/ui/utils/fileManagement.d.ts

@@ -1,7 +1,6 @@
 import type { Ionicons } from '@expo/vector-icons';
 import type { AssetUploadInput, RNFileDescriptor } from '@oxyhq/core';
 import type { ComponentProps } from 'react';
-import type { RouteName } from '../navigation/routes.js';
 /**
  * Extended File interface that includes a `uri` property for mobile preview support.
  * React Native file pickers return URI-based references that need to be preserved
@@ -52,52 +51,5 @@ export declare function convertDocumentPickerAssetToFile(doc: PickerAsset, index
  * Upload file raw - helper function for file uploads
  */
 export declare function uploadFileRaw(file: AssetUploadInput, userId: string, oxyServices: any, visibility?: 'private' | 'public' | 'unlisted'): Promise<any>;
-/**
- * Configuration for creating an avatar picker handler
- */
-export interface AvatarPickerConfig {
-    /** Navigation function from BaseScreenProps */
-    navigate?: (screen: RouteName, props?: Record<string, unknown>) => void;
-    /** OxyServices instance */
-    oxyServices: any;
-    /** TanStack Query mutation for updating profile */
-    updateProfileMutation: {
-        mutateAsync: (updates: {
-            avatar: string;
-        }) => Promise<unknown>;
-    };
-    /** Callback to update local avatar state */
-    onAvatarSelected?: (fileId: string) => void;
-    /** i18n translation function */
-    t: (key: string) => string | undefined;
-    /** Optional context name for logging (e.g., 'AccountSettings', 'WelcomeNewUser') */
-    contextName?: string;
-}
-/**
- * Creates a reusable avatar picker handler function.
- *
- * This function navigates to the FileManagement screen and handles:
- * - Image file validation
- * - File visibility update to public
- * - Profile avatar update via mutation
- * - Success/error toast notifications
- *
- * @example
- * ```tsx
- * const openAvatarPicker = createAvatarPickerHandler({
- *   navigate,
- *   oxyServices,
- *   updateProfileMutation,
- *   onAvatarSelected: setAvatarFileId,
- *   t,
- *   contextName: 'AccountSettings'
- * });
- *
- * <TouchableOpacity onPress={openAvatarPicker}>
- *   <Text>Change Avatar</Text>
- * </TouchableOpacity>
- * ```
- */
-export declare function createAvatarPickerHandler(config: AvatarPickerConfig): () => void;
 export {};
 //# sourceMappingURL=fileManagement.d.ts.map

package/lib/typescript/module/ui/utils/fileManagement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fileManagement.d.ts","sourceRoot":"","sources":["../../../../../src/ui/utils/fileManagement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAgB,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAsB,CAAC;AAGtD;;;;GAIG;AACH,UAAU,WAAY,SAAQ,IAAI;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,gBAAgB,CAO5E;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMpD;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,WAAW,EAAE,MAAM,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CASxF;AAED;;;;;;;;;;;GAWG;AACH,wBAAsB,gCAAgC,CAClD,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,MAAM,GACd,OAAO,CAAC,WAAW,GAAG,gBAAgB,GAAG,IAAI,CAAC,CA4DhD;AAED;;GAEG;AACH,wBAAsB,aAAa,CAC/B,IAAI,EAAE,gBAAgB,EACtB,MAAM,EAAE,MAAM,EAEd,WAAW,EAAE,GAAG,EAChB,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,gBAGjD;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAC/B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACxE,2BAA2B;IAE3B,WAAW,EAAE,GAAG,CAAC;IACjB,mDAAmD;IACnD,qBAAqB,EAAE;QACnB,WAAW,EAAE,CAAC,OAAO,EAAE;YAAE,MAAM,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;KAClE,CAAC;IACF,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,gCAAgC;IAChC,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACvC,oFAAoF;IACpF,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM,IAAI,CAgDhF"}
+{"version":3,"file":"fileManagement.d.ts","sourceRoot":"","sources":["../../../../../src/ui/utils/fileManagement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C;;;;GAIG;AACH,UAAU,WAAY,SAAQ,IAAI;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,gBAAgB,CAO5E;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMpD;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,WAAW,EAAE,MAAM,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CASxF;AAED;;;;;;;;;;;GAWG;AACH,wBAAsB,gCAAgC,CAClD,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,MAAM,GACd,OAAO,CAAC,WAAW,GAAG,gBAAgB,GAAG,IAAI,CAAC,CA4DhD;AAED;;GAEG;AACH,wBAAsB,aAAa,CAC/B,IAAI,EAAE,gBAAgB,EACtB,MAAM,EAAE,MAAM,EAEd,WAAW,EAAE,GAAG,EAChB,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,gBAGjD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/services",
-  "version": "22.10.0",
+  "version": "22.11.0",
   "description": "OxyHQ Expo/React Native SDK — UI components, screens, and native features",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -127,7 +127,7 @@
   },
   "dependencies": {
     "@oxyhq/contracts": "0.17.0",
-    "@oxyhq/core": "^12.9.0",
+    "@oxyhq/core": "^12.10.1",
     "@simplewebauthn/browser": "^13.3.0",
     "color": "^4.2.3"
   },
@@ -136,7 +136,7 @@
     "@commitlint/cli": "^17.6.5",
     "@commitlint/config-conventional": "^17.6.5",
     "@expo/vector-icons": "^15.0.3",
-    "@oxyhq/core": "12.10.0",
+    "@oxyhq/core": "12.10.2",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/netinfo": "^11.4.1",
     "@react-native/babel-preset": "^0.86.0",
@@ -187,14 +187,15 @@
     "@types/react": "*",
     "@types/react-native": "*",
     "expo": ">=56.0.0",
-    "expo-modules-core": "*",
     "expo-document-picker": ">=56.0.0",
     "expo-file-system": ">=56.0.0",
     "expo-font": ">=13.0.0",
     "expo-haptics": ">=56.0.0",
     "expo-image": ">=2.0.0",
     "expo-image-manipulator": ">=56.0.0",
+    "expo-image-picker": ">=56.0.0",
     "expo-linear-gradient": ">=56.0.0",
+    "expo-modules-core": "*",
     "nativewind": ">=5.0.0",
     "react": ">=18.0.0",
     "react-native": ">=0.85.0",
@@ -240,6 +241,9 @@
     },
     "@tanstack/query-sync-storage-persister": {
       "optional": true
+    },
+    "expo-image-picker": {
+      "optional": true
     }
   },
   "react-native-builder-bob": {

package/src/ui/components/AvatarCameraBadge.tsx

@@ -0,0 +1,35 @@
+import type React from 'react';
+import { View, type ViewStyle } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useTheme } from '@oxyhq/bloom/theme';
+
+/**
+ * The camera overlay badge on a pressable avatar — the "tap to change your
+ * photo" affordance. Shared verbatim by {@link ProfileSummaryCard} (ManageAccount
+ * / EditProfile) and the account-menu hero avatar (`AccountsView`), so the badge
+ * reads identically everywhere. Renders as an absolutely-positioned bottom-right
+ * overlay; the caller wraps it (with the avatar) in a `position: relative`
+ * pressable.
+ */
+const badgeStyle: ViewStyle = {
+  position: 'absolute',
+  right: 0,
+  bottom: 0,
+  width: 28,
+  height: 28,
+  borderRadius: 14,
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderWidth: 2,
+};
+
+const AvatarCameraBadge: React.FC = () => {
+  const theme = useTheme();
+  return (
+    <View style={badgeStyle} className="bg-fill-brand border-border-image">
+      <Ionicons name="camera" size={14} color={theme.colors.primaryForeground} />
+    </View>
+  );
+};
+
+export default AvatarCameraBadge;

package/src/ui/components/OxyAccountDialogScreen.tsx

@@ -28,10 +28,20 @@ import type { AccountDialogSnapshot } from '@oxyhq/core';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
+import type { BaseScreenProps } from '../types/navigation';
+import LogoText from './logo/LogoText';
 import OxyAuthChooser from './OxyAuthChooser';
 
 type Translate = ReturnType<typeof useI18n>['t'];
 
+/**
+ * The account MENU's nav bar carries the Oxy wordmark instead of a title — the
+ * surface IS the Oxy account, so naming it in prose is redundant. A module-level
+ * element: it takes no props, so its identity is stable forever and the header's
+ * identity-compared slot never thrashes.
+ */
+const NAV_LOGO = <LogoText height={20} />;
+
 /**
  * The unified account dialog BODY — the header + `OxyAuthChooser` chooser.
  *
@@ -45,7 +55,7 @@ type Translate = ReturnType<typeof useI18n>['t'];
  * `@oxyhq/core`. Closing routes through `useOxy().closeAccountDialog`, which
  * dismisses the surface and runs its exit animation.
  */
-const OxyAccountDialogScreen: React.FC = () => {
+const OxyAccountDialogScreen: React.FC<BaseScreenProps> = ({ canGoBack }) => {
   const { accountDialogController: controller, closeAccountDialog } = useOxy();
   const { t } = useI18n();
 
@@ -66,16 +76,25 @@ const OxyAccountDialogScreen: React.FC = () => {
   const showBack =
     view === 'qr' || view === 'signup' || (view === 'add' && snapshot.accounts.length > 0);
   const goToAccounts = useCallback(() => controller?.setView('accounts'), [controller]);
-  const { title, subtitle } = headerCopy(view, snapshot.accounts.length, t);
+  // An ENTRY view (accounts / signin — no in-dialog back of its own) that is
+  // MORPHED into a host surface (ManageAccount → switcher) has a frame beneath it,
+  // so its back CLOSES the dialog and reshapes back to the host — routed through
+  // `closeAccountDialog` so the pop + state teardown stay in one place. Opened
+  // cold (detached) it is the root frame → `canGoBack` is false → no back.
+  const backsToHost = !showBack && (canGoBack?.() ?? false);
+  // The account MENU is branded, not titled: its nav bar carries the Oxy
+  // wordmark and no large title. The current account is named by the HERO block
+  // `OxyAuthChooser` renders under it (email + large avatar + greeting), never
+  // by the bar. Every OTHER view keeps the SHARED Dialog nav header the rest of
+  // the SDK uses — a large in-content title/subtitle that collapses into the bar
+  // on scroll — because their copy is informative.
+  const copy = view === 'accounts' ? null : headerCopy(view, snapshot.accounts.length, t);
 
-  // The account dialog uses the SHARED Dialog nav header like every other screen
-  // (the base): the large in-content title/subtitle that collapses into the nav
-  // bar on scroll (default `largeTitle`), its per-view copy, and a per-view back
-  // that returns to the account list (the Dialog renders the frosted back/close).
   useSurfaceHeader({
-    title,
-    subtitle: subtitle ?? undefined,
-    onBack: showBack ? goToAccounts : undefined,
+    titleContent: copy ? undefined : NAV_LOGO,
+    title: copy?.title,
+    subtitle: copy?.subtitle ?? undefined,
+    onBack: showBack ? goToAccounts : backsToHost ? closeAccountDialog : undefined,
   });
 
   if (!controller) {
@@ -94,16 +113,11 @@ const OxyAccountDialogScreen: React.FC = () => {
 // ---------------------------------------------------------------------------
 
 function headerCopy(
-  view: AccountDialogSnapshot['view'],
+  view: Exclude<AccountDialogSnapshot['view'], 'accounts'>,
   accountCount: number,
   t: Translate,
 ): { title: string; subtitle: string | null } {
   switch (view) {
-    case 'accounts':
-      return {
-        title: t('accountSwitcher.sections.yourAccounts') || 'Your accounts',
-        subtitle: t('signin.chooser.subtitle') || 'Choose which account to continue with.',
-      };
     case 'qr':
       return {
         title: t('accountSwitcher.scanTitle') || 'Sign in with Oxy',
@@ -138,10 +152,19 @@ const EMPTY_SNAPSHOT: AccountDialogSnapshot = {
   commonsAvailability: 'unknown',
 };
 
+/**
+ * The screen gutter. In the Dialog's nav-header mode the surface adds NO content
+ * padding of its own — the large title and each screen own theirs — so this must
+ * match Bloom's own large-title gutter (`screen-margin`, 20px) for the body to
+ * line up with the title above it.
+ */
+const SCREEN_MARGIN = 20;
+
 const styles = StyleSheet.create({
   bodyContent: {
     paddingTop: 4,
     paddingBottom: 4,
+    paddingHorizontal: SCREEN_MARGIN,
   },
 });