@oxyhq/services 19.0.1 → 19.1.0

package/src/ui/components/OxyAccountDialog.tsx

@@ -2,12 +2,8 @@
  * OxyAccountDialog — the ONE unified account dialog for `@oxyhq/services`.
  *
  * A thin React Native binding over the headless `AccountDialogController` in
- * `@oxyhq/core` (bound via `useSyncExternalStore`), presented as a bottom-sheet
- * modal. It REPLACES the five drifting device/account surfaces the SDK shipped
- * before (`ProfileMenu`, `AccountMenu`, `AccountSwitcher`, `SignInAccountChooser`,
- * and `SignInModal`) with a single implementation whose data + state machine live
- * in core, so the RN and web (auth-sdk) bindings render the SAME list from the
- * SAME logic and cannot diverge.
+ * `@oxyhq/core` (bound via `useSyncExternalStore`), presented as a Bloom `<Dialog>`.
+ * One surface for account switching and sign-in — data and state machine live in core.
  *
  * Views (from `snapshot.view`):
  *  - `accounts` — the unified `SwitchableAccount[]` list (device sign-ins ∪ graph
@@ -70,7 +66,7 @@ import type { SwitchableAccount, AccountDialogSnapshot } from '@oxyhq/core';
 import { useQueryClient } from '@tanstack/react-query';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
-import OxyLogo from './OxyLogo';
+import { LogoIcon } from './logo/LogoIcon';
 
 /** Diameter of a row avatar. */
 const ROW_AVATAR_SIZE = 40;
@@ -109,7 +105,7 @@ interface OxyAccountDialogHandlers {
 
 /**
  * The unified account dialog. Mounted once by `OxyProvider`; opened imperatively
- * via `useOxy().openAccountDialog(view?)` (or the back-compat `showSignInModal`).
+ * via `useOxy().openAccountDialog(view?)` or imperative `openAccountDialog('signin')`.
  */
 const OxyAccountDialog: React.FC = () => {
   const {
@@ -198,7 +194,17 @@ const OxyAccountDialog: React.FC = () => {
     <Dialog
       open={isAccountDialogOpen}
       onClose={closeAccountDialog}
-      placement={{ base: 'bottom', md: 'center' }}
+      // On web ALWAYS use the centered placement. Bloom's `bottom` placement
+      // routes through its `BottomSheet`, which on web is built on
+      // react-native-web's `Modal`. That `Modal` creates its `ModalPortal` host
+      // node as a side effect during render and removes it in an effect cleanup;
+      // under React 19 concurrent rendering (and StrictMode's dev double-invoke)
+      // the host is orphaned and never re-attached, so the sheet never paints on
+      // narrow web viewports (reproduced on console.oxy.so / auth.oxy.so, Pixel-7
+      // width). The `center` placement uses Bloom's react-dom Portal (no RN
+      // Modal) and paints reliably at every width. Native keeps the real bottom
+      // sheet on narrow screens.
+      placement={isWeb ? 'center' : { base: 'bottom', md: 'center' }}
       dismissOnBackdrop={false}
       maxWidth={420}
       label={headerCopy(view, snapshot.accounts.length, t).title}
@@ -228,11 +234,7 @@ const OxyAccountDialog: React.FC = () => {
             handlers={handlers}
             onSignInWithOxy={() => void controller.signInWithOxy()}
             onScanQr={() => void controller.showQr()}
-            onUsePassword={() =>
-              controller.openPasswordAtOxyAuth({
-                returnUrl: isWeb ? currentHref() : undefined,
-              })
-            }
+            onUsePassword={() => void controller.openPasswordAtOxyAuth()}
           />
         )}
       </ScrollView>
@@ -273,7 +275,7 @@ const DialogHeader: React.FC<HeaderProps> = ({ snapshot, theme, t, showBack, onB
         ) : (
           <View style={styles.iconButton} />
         )}
-        <OxyLogo variant="icon" size={34} fillColor={theme.colors.primary} />
+        <LogoIcon height={34} color={theme.colors.primary} />
         <Pressable
           onPress={onClose}
           style={[styles.iconButton, { backgroundColor: theme.colors.backgroundSecondary }]}
@@ -387,7 +389,7 @@ const AccountRow: React.FC<AccountRowProps> = ({ account, theme, switching, disa
       >
         <View style={[styles.avatarRing, { borderColor: account.isCurrent ? accent : 'transparent' }]}>
           <Avatar
-            source={account.user.avatar ?? undefined}
+            source={account.avatarUrl ?? undefined}
             variant="thumb"
             name={account.displayName}
             size={ROW_AVATAR_SIZE}

package/src/ui/components/OxyConsentScreen.tsx

@@ -26,7 +26,7 @@ import { Button } from '@oxyhq/bloom/button';
 import { Text } from '@oxyhq/bloom/typography';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useI18n } from '../hooks/useI18n';
-import OxyLogo from './OxyLogo';
+import { LogoIcon } from './logo/LogoIcon';
 
 /** The requesting application, resolved by the caller (never user-supplied raw). */
 export interface OxyConsentApplication {
@@ -185,7 +185,7 @@ export function OxyConsentScreen({
             <View style={[styles.dot, { backgroundColor: theme.colors.border }]} />
           </View>
           <View style={[styles.logoBadge, { backgroundColor: theme.colors.backgroundSecondary ?? theme.colors.card }]}>
-            <OxyLogo variant="icon" size={30} fillColor={theme.colors.primary} />
+            <LogoIcon height={30} color={theme.colors.primary} />
           </View>
         </View>
         <Text style={[styles.title, { color: theme.colors.text }]}>

package/src/ui/components/OxyOAuthCallback.tsx

@@ -0,0 +1,38 @@
+import { ActivityIndicator, View } from 'react-native';
+import { useEffect } from 'react';
+import { useAuth } from '../hooks/useAuth';
+import { isWebBrowser } from '../utils/isWebBrowser';
+
+export interface OxyOAuthCallbackProps {
+  /** Where to navigate after OAuth exchange completes. @default '/' */
+  redirectTo?: string;
+}
+
+/**
+ * Optional dedicated OAuth callback route for apps using `/oauth/callback`.
+ * `OxyProvider` cold boot handles `?code=` on any route; mount this on the
+ * callback path for a Clerk-style loading shell while auth resolves.
+ */
+export function OxyOAuthCallback({ redirectTo = '/' }: OxyOAuthCallbackProps) {
+  const { isAuthResolved, isAuthenticated } = useAuth();
+
+  useEffect(() => {
+    if (!isAuthResolved) return;
+    if (!isWebBrowser()) return;
+    const location = (globalThis as { location?: Location }).location;
+    if (!location) return;
+    const params = new URLSearchParams(location.search);
+    if (!params.has('code') && !params.has('error')) return;
+
+    const target = isAuthenticated ? redirectTo : redirectTo;
+    if (location.pathname + location.search !== target) {
+      window.location.replace(target);
+    }
+  }, [isAuthResolved, isAuthenticated, redirectTo]);
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <ActivityIndicator />
+    </View>
+  );
+}

package/src/ui/components/OxyPayButton.tsx

@@ -1,9 +1,9 @@
 import type React from 'react';
-import { useState } from 'react';
-import { TouchableOpacity, Text, View, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, type LayoutChangeEvent } from 'react-native';
+import { type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
 import { useTheme } from '@oxyhq/bloom/theme';
+import { Button } from '@oxyhq/bloom/button';
 import type { PaymentItem, PaymentGatewayResult } from '../screens/PaymentGatewayScreen';
-import OxyLogo from './OxyLogo';
+import { LogoIcon } from './logo/LogoIcon';
 
 export interface OxyPayButtonProps {
     style?: StyleProp<ViewStyle>;
@@ -34,48 +34,28 @@ const OxyPayButton: React.FC<OxyPayButtonProps> = ({
     textStyle,
     text = 'Pay',
     disabled = false,
-    amount,
-    currency = 'FAIR',
-    paymentItems,
-    description,
-    onPaymentResult,
     color,
     variant = 'white',
 }) => {
     const theme = useTheme();
-    const [buttonHeight, setButtonHeight] = useState<number>(52);
     const handlePress = () => {
         console.warn('OxyPayButton: The bottom sheet payment flow has been removed. Provide a custom onPress handler.');
     };
     // Determine background and text color
     const backgroundColor = color || (variant === 'black' ? theme.colors.text : theme.colors.background);
     const textColor = variant === 'black' || (color && isColorDark(color)) ? theme.colors.background : '#1b1f0a';
-    // Responsive sizing
-    const logoWidth = Math.round(buttonHeight * 0.5); // 50% of button height
-    const logoHeight = Math.round(buttonHeight * 0.25); // 25% of button height
-    const fontSize = Math.round(buttonHeight * 0.35); // 35% of button height
-    const handleLayout = (e: LayoutChangeEvent) => {
-        const h = e.nativeEvent.layout.height;
-        if (h && Math.abs(h - buttonHeight) > 1) setButtonHeight(h);
-    };
+
     return (
-        <TouchableOpacity
-            style={[styles.button, { backgroundColor, borderColor: textColor, borderWidth: 1 }, disabled && styles.buttonDisabled, style]}
+        <Button
+            variant="inverse"
             onPress={handlePress}
             disabled={disabled}
-            activeOpacity={0.85}
-            onLayout={handleLayout}
+            style={[{ backgroundColor, borderColor: textColor, borderWidth: 1 }, style]}
+            textStyle={[{ color: textColor, fontWeight: '700' }, textStyle]}
+            icon={<LogoIcon height={16} color={textColor} style={{ marginRight: 6 }} />}
         >
-            <View style={styles.buttonContent}>
-                <OxyLogo
-                    variant="icon"
-                    size={logoHeight}
-                    style={{ marginRight: logoHeight * 0.2, marginTop: (fontSize - logoHeight) / 2 }}
-                    fillColor={textColor}
-                />
-                <Text style={[styles.text, { color: textColor, fontSize }, textStyle]}>{text}</Text>
-            </View>
-        </TouchableOpacity>
+            {text}
+        </Button>
     );
 };
 
@@ -91,33 +71,4 @@ function isColorDark(hex: string) {
     return (0.299 * r + 0.587 * g + 0.114 * b) < 150;
 }
 
-const styles = StyleSheet.create({
-    button: {
-        padding: 14,
-        borderRadius: 35,
-        alignItems: 'center',
-        justifyContent: 'center',
-        flexDirection: 'row',
-        minHeight: 52,
-    },
-    buttonDisabled: {
-        opacity: 0.6,
-    },
-    buttonContent: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    oxyLogo: {
-        // marginRight is set dynamically
-    },
-    centeredItem: {
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    text: {
-        fontWeight: '700',
-    },
-});
-
 export default OxyPayButton;

package/src/ui/components/OxyProvider.tsx

@@ -8,10 +8,10 @@ import { QueryClientProvider, focusManager, onlineManager } from '@tanstack/reac
 import { BloomDialogProvider } from '@oxyhq/bloom';
 import { ToastOutlet } from '@oxyhq/bloom/toast';
 import { logger as loggerUtil } from '@oxyhq/core';
-import { setupFonts } from './FontLoader';
 import { RequireOxyAuth } from './RequireOxyAuth';
 import { attachQueryPersistence, createQueryClient } from '../hooks/queryClient';
 import { createPlatformStorage, type StorageInterface } from '../utils/storageHelpers';
+import { setupFonts } from './FontLoader';
 
 /**
  * Background color shown for the brief window between mount and the
@@ -116,7 +116,7 @@ const OxyProvider: FC<OxyProviderProps> = ({
     authRedirectUri,
     queryClient: providedQueryClient,
     requireAuth = 'off',
-    coldBoot = true,
+    hubSync = true,
 }) => {
 
     // Dynamic KeyboardProvider for native. Uses variable indirection
@@ -311,7 +311,7 @@ const OxyProvider: FC<OxyProviderProps> = ({
                     authRedirectUri={authRedirectUri}
                     storageKeyPrefix={storageKeyPrefix}
                     clientId={clientId}
-                    coldBoot={coldBoot}
+                    hubSync={hubSync}
                     onAuthStateChange={onAuthStateChange as OxyContextProviderProps['onAuthStateChange']}
                 >
                     {requireAuth === 'off' ? (

package/src/ui/components/OxySignInButton.tsx

@@ -1,35 +1,25 @@
 import type React from 'react';
-import { useCallback, useState, useEffect, useMemo, useRef } from 'react';
-import { TouchableOpacity, Text, View, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, Platform } from 'react-native';
+import { useCallback, useState, useEffect, useRef } from 'react';
+import { type ViewStyle, type TextStyle, type StyleProp, Platform } from 'react-native';
 import {
     logger,
     generatePkcePair,
     generateOAuthState,
     buildOAuthAuthorizeUrl,
+    OXY_OAUTH_STATE_STORAGE_KEY,
+    OXY_OAUTH_CODE_VERIFIER_STORAGE_KEY,
+    persistOAuthHandshake,
     type PublicApplication,
 } from '@oxyhq/core';
 import { useAuthStore } from '../stores/authStore';
 import { useShallow } from 'zustand/react/shallow';
 import { useTheme } from '@oxyhq/bloom/theme';
+import { Button, type ButtonVariant } from '@oxyhq/bloom/button';
 import { useOxy } from '../context/OxyContext';
-import OxyLogo from './OxyLogo';
-import { subscribeToSignInModal } from '../navigation/accountDialogManager';
+import { LogoIcon } from './logo/LogoIcon';
+import { subscribeToAccountDialog } from '../navigation/accountDialogManager';
 import { redirectToAuthorize, openAuthorizeUrlNative } from './oauthNavigation';
 
-/**
- * `sessionStorage` keys under which a third-party "Sign in with Oxy" OAuth flow
- * persists its CSRF `state` and PKCE `code_verifier` across the authorize
- * redirect. The Relying Party's redirect-URI callback reads them back to
- * validate the returned `state` and replay the verifier on the token exchange.
- *
- * Web only: a browser RP navigates away to `auth.oxy.so` and back, so the
- * handshake must survive a full-page redirect. Native completes the flow inside
- * a single `WebBrowser` auth session and surfaces the handshake via
- * {@link OxySignInButtonProps.onOAuthResult} instead.
- */
-export const OXY_OAUTH_STATE_STORAGE_KEY = 'oxy_oauth_state';
-export const OXY_OAUTH_CODE_VERIFIER_STORAGE_KEY = 'oxy_oauth_code_verifier';
-
 /**
  * The OAuth handshake surfaced to a NATIVE third-party RP via
  * {@link OxySignInButtonProps.onOAuthResult} so it can finish the code exchange
@@ -52,21 +42,8 @@ export interface OxyOAuthResult {
  * `QuotaExceededError`, e.g. Safari private mode) — so the caller aborts the
  * flow cleanly rather than redirect to a callback that cannot validate `state`.
  */
-function persistOAuthHandshake(state: string, codeVerifier: string): boolean {
-    const store = (globalThis as { sessionStorage?: Storage }).sessionStorage;
-    try {
-        if (!store) throw new Error('sessionStorage is unavailable');
-        store.setItem(OXY_OAUTH_STATE_STORAGE_KEY, state);
-        store.setItem(OXY_OAUTH_CODE_VERIFIER_STORAGE_KEY, codeVerifier);
-        return true;
-    } catch (error) {
-        logger.warn(
-            'OxySignInButton: could not persist the OAuth handshake to sessionStorage; aborting third-party sign-in',
-            { component: 'OxySignInButton' },
-            error,
-        );
-        return false;
-    }
+function persistOAuthHandshakeForButton(state: string, codeVerifier: string): boolean {
+    return persistOAuthHandshake(state, codeVerifier);
 }
 
 export interface OxySignInButtonProps {
@@ -187,7 +164,7 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
     // change regardless of platform or what opened/closed it.
     const [isModalOpen, setIsModalOpen] = useState(false);
 
-    useEffect(() => subscribeToSignInModal(setIsModalOpen), []);
+    useEffect(() => subscribeToAccountDialog(setIsModalOpen), []);
 
     // The application's public identity is resolved lazily on first press and its
     // promise cached, so rapid taps share one in-flight resolve. The cache is
@@ -256,7 +233,7 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
                 // Persist the handshake for the RP callback, then hand the
                 // top-level document to the IdP. Without storage the callback
                 // cannot validate `state`, so abort cleanly rather than redirect.
-                if (!persistOAuthHandshake(state, pkce.codeVerifier)) {
+                if (!persistOAuthHandshakeForButton(state, pkce.codeVerifier)) {
                     return;
                 }
                 redirectToAuthorize(authorizeUrl);
@@ -321,116 +298,40 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
         void routeSignIn();
     }, [onPress, routeSignIn]);
 
-    const themedStyles = useMemo(() => StyleSheet.create({
-        button: {
-            padding: 14,
-            borderRadius: 35,
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        buttonDefault: {
-            backgroundColor: theme.colors.card,
-            borderWidth: 1,
-            borderColor: theme.colors.borderLight,
-            ...Platform.select({
-                web: {
-                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-                },
-                default: {
-                    shadowColor: '#000000',
-                    shadowOffset: { width: 0, height: 2 },
-                    shadowOpacity: 0.1,
-                    shadowRadius: 4,
-                    elevation: 2,
-                }
-            }),
-        },
-        buttonOutline: {
-            backgroundColor: 'transparent',
-            borderWidth: 1,
-            borderColor: theme.colors.primary,
-        },
-        buttonContained: {
-            backgroundColor: theme.colors.primary,
-        },
-        buttonDisabled: {
-            opacity: 0.6,
-        },
-        buttonContent: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        text: {
-            // Bloom's BloomThemeProvider sets the default font via Text.defaultProps,
-            // so we intentionally do NOT set fontFamily here. Setting it would defeat
-            // the theme-wide font.
-            fontWeight: Platform.OS === 'web' ? '600' : undefined,
-            fontSize: 16,
-            marginLeft: 10,
-        },
-        textDefault: {
-            color: theme.colors.text,
-        },
-        textOutline: {
-            color: theme.colors.primary,
-        },
-        textContained: {
-            color: '#FFFFFF',
-        },
-        textDisabled: {
-            color: theme.colors.textTertiary,
-        },
-    }), [theme]);
-
     // Don't show the button if already authenticated (unless explicitly overridden)
     if (isAuthenticated && !showWhenAuthenticated) return null;
 
     const isButtonDisabled = disabled || isLoading || isModalOpen;
 
-    // Determine the button style based on the variant
-    const getButtonStyle = () => {
-        switch (variant) {
-            case 'outline':
-                return [themedStyles.buttonOutline, style];
-            case 'contained':
-                return [themedStyles.buttonContained, style];
-            default:
-                return [themedStyles.buttonDefault, style];
-        }
-    };
+    // Map the public `variant` API onto Bloom's Button variants:
+    //   contained → primary (filled), outline → outline, default → secondary.
+    const buttonVariant: ButtonVariant =
+        variant === 'contained' ? 'primary' : variant === 'outline' ? 'outline' : 'secondary';
 
-    // Determine the text style based on the variant
-    const getTextStyle = () => {
-        switch (variant) {
-            case 'outline':
-                return [themedStyles.textOutline, textStyle];
-            case 'contained':
-                return [themedStyles.textContained, textStyle];
-            default:
-                return [themedStyles.textDefault, textStyle];
-        }
-    };
+    // The Oxy mark reads white-on-primary for the filled (contained) button and
+    // primary-on-transparent for the outline / default surfaces.
+    const isContained = variant === 'contained';
+    const logoColor = isContained ? '#ffffff' : theme.colors.primary;
+    const logoLetterColor = isContained ? theme.colors.primary : '#ffffff';
 
     return (
-        <TouchableOpacity
-            style={[themedStyles.button, getButtonStyle(), isButtonDisabled && themedStyles.buttonDisabled]}
+        <Button
+            variant={buttonVariant}
             onPress={handlePress}
             disabled={isButtonDisabled}
-        >
-            <View style={themedStyles.buttonContent}>
-                <OxyLogo
-                    variant="icon"
-                    size={20}
-                    fillColor={variant === 'contained' ? 'white' : theme.colors.primary}
-                    innerFillColor={variant === 'contained' ? theme.colors.primary : undefined}
-                    style={isButtonDisabled ? { opacity: 0.6 } : undefined}
+            style={style}
+            textStyle={[Platform.OS === 'web' ? { fontWeight: '600' } : null, textStyle]}
+            icon={
+                <LogoIcon
+                    height={20}
+                    color={logoColor}
+                    letterColor={logoLetterColor}
+                    style={{ marginRight: 10 }}
                 />
-                <Text style={[themedStyles.text, getTextStyle(), isButtonDisabled && themedStyles.textDisabled]}>
-                    {isLoading || isModalOpen ? 'Signing in...' : text}
-                </Text>
-            </View>
-        </TouchableOpacity>
+            }
+        >
+            {isLoading || isModalOpen ? 'Signing in...' : text}
+        </Button>
     );
 };
 

package/src/ui/components/ProfileButton.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import {
     View,
     Pressable,
@@ -111,7 +111,7 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
         isPrivateApiPending,
         signIn,
     } = useAuth();
-    const { openAccountDialog } = useOxy();
+    const { openAccountDialog, oxyServices } = useOxy();
     const { colors } = useTheme();
     const { t, locale } = useI18n();
 
@@ -126,6 +126,11 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
         openAccountDialog('accounts');
     }, [openAccountDialog]);
 
+    const avatarUrl = useMemo(
+        () => (user?.avatar ? oxyServices.getFileDownloadUrl(user.avatar, 'thumb') : undefined),
+        [user?.avatar, oxyServices],
+    );
+
     // ── Undetermined: skeleton circle, no interaction. ──────────────────────
     if (!isAuthResolved || isPrivateApiPending) {
         return (
@@ -195,7 +200,7 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
 
     const avatarNode = (
         <Avatar
-            source={user.avatar ?? undefined}
+            source={avatarUrl}
             variant="thumb"
             name={displayName}
             size={resolvedAvatarSize}

package/src/ui/components/ProfileSummaryCard.tsx

@@ -0,0 +1,123 @@
+import type React from 'react';
+import { View, type ViewStyle } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { H4, Text } from '@oxyhq/bloom/typography';
+import { Avatar } from '@oxyhq/bloom/avatar';
+import { Card } from '@oxyhq/bloom/card';
+import { PressableScale } from '@oxyhq/bloom/pressable-scale';
+
+/**
+ * ProfileSummaryCard — the shared "who am I" summary block rendered at the top
+ * of {@link ManageAccountScreen} and {@link EditProfileScreen}.
+ *
+ * A Bloom filled {@link Card} containing a centered {@link Avatar}, the display
+ * name and any number of secondary lines (handle, email, …). When
+ * `onAvatarPress` is supplied the avatar becomes a {@link PressableScale} entry
+ * point (used to open the avatar picker) and can render an optional camera
+ * badge overlay.
+ */
+export interface ProfileSummaryCardProps {
+    /** Primary display name shown under the avatar. */
+    displayName: string;
+    /** Resolved avatar thumbnail URL (undefined → initials fallback). */
+    avatarUri?: string;
+    /** Avatar diameter in px. Defaults to 72. */
+    avatarSize?: number;
+    /**
+     * Secondary lines rendered beneath the name (e.g. `@handle`, email).
+     * Falsy entries are skipped so callers can pass conditional values inline.
+     */
+    lines?: Array<string | null | undefined | false>;
+    /** When provided, the avatar is pressable (e.g. opens the avatar picker). */
+    onAvatarPress?: () => void;
+    /** Render the camera badge overlay. Only meaningful with `onAvatarPress`. */
+    showCameraBadge?: boolean;
+    /** Accessibility label for the pressable avatar. */
+    avatarAccessibilityLabel?: string;
+}
+
+const badgeStyle: ViewStyle = {
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 2,
+};
+
+const cardStyle: ViewStyle = {
+    borderRadius: 20,
+    marginBottom: 16,
+};
+
+const pressableStyle: ViewStyle = {
+    position: 'relative',
+};
+
+const ProfileSummaryCard: React.FC<ProfileSummaryCardProps> = ({
+    displayName,
+    avatarUri,
+    avatarSize = 72,
+    lines,
+    onAvatarPress,
+    showCameraBadge = false,
+    avatarAccessibilityLabel,
+}) => {
+    const bloomTheme = useTheme();
+
+    const avatar = <Avatar source={avatarUri} name={displayName} size={avatarSize} />;
+
+    const avatarNode = onAvatarPress ? (
+        <PressableScale
+            onPress={onAvatarPress}
+            accessibilityRole="button"
+            accessibilityLabel={avatarAccessibilityLabel}
+            style={pressableStyle}
+            className="mb-space-12"
+        >
+            {avatar}
+            {showCameraBadge ? (
+                <View style={badgeStyle} className="bg-fill-brand border-border-image">
+                    <Ionicons
+                        name="camera"
+                        size={14}
+                        color={bloomTheme.colors.primaryForeground}
+                    />
+                </View>
+            ) : null}
+        </PressableScale>
+    ) : (
+        <View className="mb-space-12">{avatar}</View>
+    );
+
+    const subtitleLines = (lines ?? []).filter(
+        (line): line is string => typeof line === 'string' && line.length > 0,
+    );
+
+    return (
+        <Card variant="filled" style={cardStyle}>
+            <View className="items-center px-space-20 py-space-24">
+                {avatarNode}
+                <H4 className="text-text" numberOfLines={1}>
+                    {displayName}
+                </H4>
+                {subtitleLines.map((line, index) => (
+                    <Text
+                        // Subtitle order is stable within a render; index keys are safe here.
+                        key={`${index}-${line}`}
+                        className="text-text-secondary text-sm mt-space-2"
+                        numberOfLines={1}
+                    >
+                        {line}
+                    </Text>
+                ))}
+            </View>
+        </Card>
+    );
+};
+
+export default ProfileSummaryCard;