@mereb/app-profile 0.0.7 → 0.0.9

package/dist/headless.d.ts

@@ -6,3 +6,4 @@ export type ProfilePost = NonNullable<ProfileData>['posts']['edges'][number]['no
 export declare function parseProfileTimestamp(value?: string | null): Date | null;
 export declare function formatRelativeProfileTimestamp(value?: string | null, now?: number): string;
 export declare function selectProfilePosts(profile?: ProfileData | null): ProfilePost[];
+export declare function normalizeUserSearchQuery(value?: string | null): string;

package/dist/headless.js

@@ -43,3 +43,6 @@ export function selectProfilePosts(profile) {
     }
     return profile.posts.edges.map((edge) => edge.node);
 }
+export function normalizeUserSearchQuery(value) {
+    return value?.trim().replace(/^@/, '') ?? '';
+}

package/dist/index.d.ts

@@ -6,6 +6,25 @@ type AuthControls = {
 type ProfileScreenProps = {
     auth?: AuthControls;
     handle?: string;
+    onMessageUser?: (user: {
+        id: string;
+        handle: string;
+        displayName: string;
+    }) => void;
+    onSearchUsers?: () => void;
+    onSelectUser?: (handle: string) => void;
+    onOpenPrivacyPolicy?: () => void;
+    onOpenSupport?: () => void;
 };
-export declare function ProfileScreen({ auth, handle }: Readonly<ProfileScreenProps>): import("react/jsx-runtime.js").JSX.Element;
+type PeopleScreenProps = {
+    onSelectUser?: (handle: string) => void;
+    onMessageUser?: (user: {
+        id: string;
+        handle: string;
+        displayName: string;
+    }) => void;
+};
+export declare function ProfileScreen({ auth, handle, onMessageUser, onSearchUsers, onSelectUser, onOpenPrivacyPolicy, onOpenSupport }: Readonly<ProfileScreenProps>): import("react/jsx-runtime").JSX.Element;
+export declare function PeopleScreen({ onSelectUser, onMessageUser }: Readonly<PeopleScreenProps>): import("react/jsx-runtime").JSX.Element;
+export declare function UserSearchScreen(props: Readonly<PeopleScreenProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.js

@@ -1,258 +1,394 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { ActivityIndicator, Image, RefreshControl, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
-import { useFollowUserMutation, useMeProfileQuery, useProfileByHandleQuery, useUnfollowUserMutation, useUpdateProfileMutation } from '@mereb/shared-graphql';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useDeferredValue, useEffect, useMemo, useState } from 'react';
+import { ActivityIndicator, Image, Pressable, RefreshControl, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
+import * as ImagePicker from 'expo-image-picker';
+import { MediaUploadKind, useCompleteMediaUploadMutation, useDiscoverUsersQuery, useFollowUserMutation, useMeProfileQuery, useProfileByHandleQuery, useRequestMediaUploadMutation, useSearchUsersQuery, useUnfollowUserMutation, useUpdateProfileMutation } from '@mereb/shared-graphql';
 import { tokens } from '@mereb/tokens/native';
-import { cardRecipes, placeholderAvatarRecipe } from '@mereb/ui-shared';
-import { formatRelativeProfileTimestamp, selectProfilePosts } from './headless.js';
-function extractGraphQLErrors(error) {
-    if (error &&
-        typeof error === 'object' &&
-        'graphQLErrors' in error &&
-        Array.isArray(error.graphQLErrors)) {
-        return error.graphQLErrors;
+import { resolveMediaUploadErrorMessage } from '@mereb/ui-shared';
+import { formatRelativeProfileTimestamp, normalizeUserSearchQuery, selectProfilePosts } from './headless';
+const MAX_UPLOAD_BYTES = 10 * 1024 * 1024;
+const ALLOWED_IMAGE_TYPES = new Set(['image/jpeg', 'image/png', 'image/webp']);
+const COMPLETE_UPLOAD_RETRY_DELAYS_MS = [300, 800, 1500];
+const INLINE_SEARCH_RESULT_LIMIT = 6;
+const DISCOVER_RESULT_LIMIT = 8;
+const MIN_SEARCH_QUERY_LENGTH = 2;
+function describeClientError(error, fallback) {
+    const message = error instanceof Error ? error.message.trim() : typeof error === 'string' ? error.trim() : '';
+    if (!message || message === 'Subgraph errors redacted') {
+        return fallback;
     }
-    return undefined;
+    return __DEV__ ? `${fallback} (${message})` : fallback;
+}
+function sleep(ms) {
+    return new Promise((resolve) => globalThis.setTimeout(resolve, ms));
+}
+async function completeUploadWithRetry(execute) {
+    let lastError;
+    for (let attempt = 0; attempt <= COMPLETE_UPLOAD_RETRY_DELAYS_MS.length; attempt += 1) {
+        try {
+            const completed = await execute();
+            if (completed) {
+                return completed;
+            }
+            lastError = new Error('MEDIA_UPLOAD_COMPLETE_FAILED');
+        }
+        catch (error) {
+            lastError = error;
+        }
+        if (attempt < COMPLETE_UPLOAD_RETRY_DELAYS_MS.length) {
+            await sleep(COMPLETE_UPLOAD_RETRY_DELAYS_MS[attempt]);
+        }
+    }
+    throw lastError ?? new Error('MEDIA_UPLOAD_COMPLETE_FAILED');
+}
+async function uploadAvatarImage(asset, requestUpload, completeUpload) {
+    const filename = asset.fileName?.trim() || `avatar-${Date.now()}.jpg`;
+    const mimeType = asset.mimeType?.trim() || 'image/jpeg';
+    if (!ALLOWED_IMAGE_TYPES.has(mimeType)) {
+        throw new Error('UNSUPPORTED_MEDIA_TYPE');
+    }
+    if (asset.fileSize && asset.fileSize > MAX_UPLOAD_BYTES) {
+        throw new Error('MEDIA_TOO_LARGE');
+    }
+    const requestResult = await requestUpload({
+        variables: {
+            filename,
+            contentType: mimeType,
+            kind: MediaUploadKind.Avatar
+        }
+    });
+    const uploadRequest = requestResult.data?.requestMediaUpload;
+    if (!uploadRequest?.assetId || !uploadRequest.putUrl) {
+        throw new Error('MEDIA_UPLOAD_REQUEST_FAILED');
+    }
+    const localResponse = await fetch(asset.uri);
+    const blob = await localResponse.blob();
+    const putResponse = await fetch(uploadRequest.putUrl, {
+        method: 'PUT',
+        headers: {
+            'Content-Type': mimeType
+        },
+        body: blob
+    });
+    if (!putResponse.ok) {
+        throw new Error(`MEDIA_UPLOAD_TRANSFER_FAILED_${putResponse.status}`);
+    }
+    const completed = await completeUploadWithRetry(async () => {
+        const result = await completeUpload({
+            variables: {
+                assetId: uploadRequest.assetId
+            }
+        });
+        return result.data?.completeMediaUpload ?? null;
+    });
+    return {
+        id: completed.id,
+        url: completed.url
+    };
+}
+function EmptyState({ title, body }) {
+    return (_jsx(View, { style: styles.centeredContainer, children: _jsxs(View, { style: styles.placeholderCard, children: [_jsx(Text, { style: styles.placeholderTitle, children: title }), _jsx(Text, { style: styles.placeholderBody, children: body })] }) }));
 }
 function PlaceholderAvatar() {
     return (_jsxs(View, { style: styles.placeholderAvatar, accessible: false, children: [_jsx(View, { style: styles.placeholderHead }), _jsx(View, { style: styles.placeholderShoulders })] }));
 }
-export function ProfileScreen({ auth, handle }) {
+function UserAvatar({ displayName, handle, avatarUrl }) {
+    const fallback = (displayName || handle).trim().charAt(0).toUpperCase() || '?';
+    return (_jsx(View, { style: styles.searchAvatarShell, children: avatarUrl ? (_jsx(Image, { source: { uri: avatarUrl }, style: styles.searchAvatarImage, resizeMode: "cover" })) : (_jsx(Text, { style: styles.searchAvatarFallback, children: fallback })) }));
+}
+function UserRow({ user, onSelect, actionLabel, onAction }) {
+    return (_jsxs(View, { style: styles.userRow, children: [_jsx(UserAvatar, { displayName: user.displayName, handle: user.handle, avatarUrl: user.avatarUrl }), _jsxs(Pressable, { accessibilityRole: "button", onPress: onSelect, style: styles.flexSpacer, children: [_jsx(Text, { style: styles.cardTitle, children: user.displayName }), _jsxs(Text, { style: styles.mutedText, children: ["@", user.handle] })] }), actionLabel && onAction ? (_jsx(Pressable, { accessibilityRole: "button", onPress: onAction, style: styles.secondaryButton, children: _jsx(Text, { style: styles.secondaryButtonText, children: actionLabel }) })) : null] }));
+}
+function SearchResultsSection({ query, canSearch, loading, error, results, onSelectUser, onMessageUser }) {
+    if (!query.length) {
+        return null;
+    }
+    return (_jsxs(View, { style: styles.card, children: [_jsx(Text, { style: styles.sectionTitle, children: "Search results" }), !canSearch ? (_jsx(Text, { style: styles.mutedText, children: "Type at least two characters to search." })) : error ? (_jsx(Text, { style: styles.errorText, children: describeClientError(error, 'We could not search for users right now.') })) : loading ? (_jsx(View, { style: styles.inlineState, children: _jsx(ActivityIndicator, {}) })) : results.length === 0 ? (_jsx(Text, { style: styles.mutedText, children: "No matching users found." })) : (results.map((user) => (_jsx(UserRow, { user: user, onSelect: () => onSelectUser?.(user.handle), actionLabel: onMessageUser ? 'Message' : undefined, onAction: onMessageUser
+                    ? () => onMessageUser({
+                        id: user.id,
+                        handle: user.handle,
+                        displayName: user.displayName
+                    })
+                    : undefined }, user.id))))] }));
+}
+function DiscoverPeopleSection({ users, loading, error, loadingUserId, onSelectUser, onToggleFollow }) {
+    return (_jsxs(View, { style: styles.card, children: [_jsx(Text, { style: styles.sectionTitle, children: "Discover people" }), _jsx(Text, { style: styles.sectionBody, children: "Follow active members to improve the relevance of your feed and uncover more conversations." }), error ? (_jsx(Text, { style: styles.errorText, children: describeClientError(error, 'We could not load suggested people right now.') })) : loading && users.length === 0 ? (_jsx(View, { style: styles.inlineState, children: _jsx(ActivityIndicator, {}) })) : users.length === 0 ? (_jsx(Text, { style: styles.mutedText, children: "No suggestions available yet." })) : (users.map((user) => (_jsx(UserRow, { user: user, onSelect: () => onSelectUser?.(user.handle), actionLabel: loadingUserId === user.id ? 'Saving…' : user.followedByMe ? 'Following' : 'Follow', onAction: () => void onToggleFollow(user) }, user.id))))] }));
+}
+export function ProfileScreen({ auth, handle, onMessageUser, onSearchUsers, onSelectUser, onOpenPrivacyPolicy, onOpenSupport }) {
     const token = auth?.token;
     const viewingOwnProfile = !handle;
     const trimmedHandle = handle?.replace(/^@/, '') ?? '';
-    const { data: meData, loading: loadingMe, error: meError, refetch: refetchMe } = useMeProfileQuery({
-        variables: { postsLimit: 10 },
+    const meQuery = useMeProfileQuery({
+        variables: { postsLimit: 10, followersLimit: 8, followingLimit: 8 },
         skip: !viewingOwnProfile || !token,
-        notifyOnNetworkStatusChange: true
+        notifyOnNetworkStatusChange: true,
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
     });
-    const { data: handleData, loading: loadingHandle, error: handleError, refetch: refetchHandle } = useProfileByHandleQuery({
-        variables: { handle: trimmedHandle, postsLimit: 10 },
+    const publicQuery = useProfileByHandleQuery({
+        variables: { handle: trimmedHandle, postsLimit: 10, followersLimit: 8, followingLimit: 8 },
         skip: viewingOwnProfile || trimmedHandle.length === 0,
         notifyOnNetworkStatusChange: true
     });
-    const activeError = viewingOwnProfile ? meError : handleError;
-    const activeLoading = viewingOwnProfile ? loadingMe : loadingHandle;
-    const activeRefetch = viewingOwnProfile ? refetchMe : refetchHandle;
-    const profile = viewingOwnProfile ? meData?.me : handleData?.userByHandle;
-    const followButtonLabel = profile?.followedByMe ? 'Following' : 'Follow';
-    const activityIndicatorColor = profile?.followedByMe ? '#0f172a' : '#fff';
-    const unauthenticatedError = viewingOwnProfile
-        ? Boolean(extractGraphQLErrors(meError)?.some((graphError) => graphError.message?.toUpperCase().includes('UNAUTHENTICATED')))
-        : false;
-    const shouldPromptSignIn = viewingOwnProfile && (!token || unauthenticatedError);
-    const [updateProfileMutation, { loading: saving }] = useUpdateProfileMutation();
-    const [followUserMutation, { loading: followLoading }] = useFollowUserMutation();
-    const [unfollowUserMutation, { loading: unfollowLoading }] = useUnfollowUserMutation();
+    const profile = viewingOwnProfile ? meQuery.data?.me : publicQuery.data?.userByHandle;
+    const loading = viewingOwnProfile ? meQuery.loading : publicQuery.loading;
+    const error = viewingOwnProfile ? meQuery.error : publicQuery.error;
+    const refetch = viewingOwnProfile ? meQuery.refetch : publicQuery.refetch;
+    const [updateProfile] = useUpdateProfileMutation();
+    const [followUser, followState] = useFollowUserMutation();
+    const [unfollowUser, unfollowState] = useUnfollowUserMutation();
+    const [requestUpload] = useRequestMediaUploadMutation();
+    const [completeUpload] = useCompleteMediaUploadMutation();
     const [displayName, setDisplayName] = useState('');
     const [bio, setBio] = useState('');
     const [formError, setFormError] = useState();
-    const [successMessage, setSuccessMessage] = useState();
-    const [followError, setFollowError] = useState();
-    const followMutationInFlight = followLoading || unfollowLoading;
-    const isAuthenticated = Boolean(token);
+    const [formSuccess, setFormSuccess] = useState();
+    const [avatarError, setAvatarError] = useState();
+    const [uploadingAvatar, setUploadingAvatar] = useState(false);
+    const [actionError, setActionError] = useState();
     useEffect(() => {
         if (viewingOwnProfile && profile) {
             setDisplayName(profile.displayName);
             setBio(profile.bio ?? '');
         }
-    }, [viewingOwnProfile, profile?.id, profile?.displayName, profile?.bio]);
-    useEffect(() => {
-        if (!successMessage) {
-            return;
-        }
-        const timeout = setTimeout(() => setSuccessMessage(undefined), 2500);
-        return () => clearTimeout(timeout);
-    }, [successMessage]);
-    useEffect(() => {
-        setFollowError(undefined);
-    }, [profile?.id]);
+    }, [profile, viewingOwnProfile]);
     const posts = useMemo(() => selectProfilePosts(profile), [profile]);
-    const handleRefresh = useCallback(() => {
-        if (shouldPromptSignIn)
+    const followers = profile?.followers?.edges.map((edge) => edge.node) ?? [];
+    const following = profile?.following?.edges.map((edge) => edge.node) ?? [];
+    const followLoading = followState.loading || unfollowState.loading;
+    const refresh = useCallback(async () => {
+        if (viewingOwnProfile && !token) {
             return;
-        activeRefetch?.();
-    }, [shouldPromptSignIn, activeRefetch]);
+        }
+        try {
+            await refetch?.();
+            setActionError(undefined);
+        }
+        catch (error) {
+            setActionError(describeClientError(error, 'We could not refresh this profile right now.'));
+        }
+    }, [refetch, token, viewingOwnProfile]);
     const handleSave = useCallback(async () => {
-        if (!viewingOwnProfile)
+        if (!viewingOwnProfile) {
             return;
+        }
         const trimmedName = displayName.trim();
-        const trimmedBio = bio.trim();
         if (!trimmedName) {
             setFormError('Display name is required.');
             return;
         }
         setFormError(undefined);
-        setSuccessMessage(undefined);
+        setFormSuccess(undefined);
         try {
-            const result = await updateProfileMutation({
+            await updateProfile({
                 variables: {
                     displayName: trimmedName,
-                    bio: trimmedBio.length ? trimmedBio : null
+                    bio: bio.trim() || null
                 }
             });
-            if (result.data?.updateProfile) {
-                setSuccessMessage('Profile updated');
-                await refetchMe();
-            }
+            setFormSuccess('Profile updated.');
+            setActionError(undefined);
+            await meQuery.refetch();
         }
-        catch (mutationError) {
-            console.warn('Failed to update profile', mutationError);
-            setFormError('We could not update your profile. Please try again.');
+        catch (nextError) {
+            console.warn('Failed to update profile', nextError);
+            setFormError(describeClientError(nextError, 'We could not update your profile. Please try again.'));
         }
-    }, [viewingOwnProfile, displayName, bio, updateProfileMutation, refetchMe]);
-    const handleLogin = useCallback(() => {
-        auth?.login?.();
-    }, [auth]);
-    const handleLogout = useCallback(() => {
-        auth?.logout?.();
-    }, [auth]);
+    }, [bio, displayName, meQuery, updateProfile, viewingOwnProfile]);
     const handleToggleFollow = useCallback(async () => {
-        if (viewingOwnProfile || !profile?.id || followMutationInFlight)
+        if (!profile?.id || viewingOwnProfile || followLoading) {
             return;
-        if (!isAuthenticated) {
-            auth?.login?.();
+        }
+        if (!token) {
+            await auth?.login?.();
             return;
         }
-        setFollowError(undefined);
         try {
             if (profile.followedByMe) {
-                await unfollowUserMutation({ variables: { userId: profile.id } });
+                await unfollowUser({ variables: { userId: profile.id } });
             }
             else {
-                await followUserMutation({ variables: { userId: profile.id } });
+                await followUser({ variables: { userId: profile.id } });
             }
-            await activeRefetch?.();
+            setActionError(undefined);
+            await refetch?.();
         }
-        catch (mutationError) {
-            console.warn('Failed to update follow status', mutationError);
-            setFollowError('We could not update the follow status. Please try again.');
+        catch (error) {
+            setActionError(describeClientError(error, 'We could not update this follow relationship.'));
         }
-    }, [
-        viewingOwnProfile,
-        profile?.id,
-        profile?.followedByMe,
-        followMutationInFlight,
-        isAuthenticated,
-        auth,
-        unfollowUserMutation,
-        followUserMutation,
-        activeRefetch
-    ]);
-    // --- small renderer helpers to lower complexity ---
-    const renderNoHandle = () => (_jsx(View, { style: styles.centeredContainer, children: _jsxs(View, { style: styles.placeholderCard, children: [_jsx(Text, { style: styles.placeholderTitle, children: "No handle provided" }), _jsx(Text, { style: styles.placeholderBody, children: "We could not determine which profile to show. Return to the feed and try again." })] }) }));
-    const renderSignInPrompt = () => (_jsx(View, { style: styles.centeredContainer, children: _jsxs(View, { style: styles.placeholderCard, children: [_jsx(Text, { style: styles.placeholderTitle, children: "Sign in to continue" }), _jsx(Text, { style: styles.placeholderBody, children: "Log in to view and edit your profile, see your recent activity, and connect with teammates." }), _jsx(TouchableOpacity, { style: styles.primaryButton, onPress: handleLogin, accessibilityRole: "button", children: _jsx(Text, { style: styles.primaryButtonText, children: "Sign in" }) }), token ? (_jsx(TouchableOpacity, { style: styles.secondaryButton, onPress: handleLogout, accessibilityRole: "button", children: _jsx(Text, { style: styles.secondaryButtonText, children: "Log out" }) })) : null] }) }));
-    const renderFollowAction = () => (_jsx(TouchableOpacity, { style: [
-            styles.followActionButton,
-            profile?.followedByMe ? styles.followingButton : styles.followButton,
-            followMutationInFlight ? styles.buttonDisabled : null
-        ], onPress: handleToggleFollow, disabled: followMutationInFlight, accessibilityRole: "button", children: followMutationInFlight ? (_jsx(ActivityIndicator, { color: activityIndicatorColor })) : (_jsx(Text, { style: profile?.followedByMe
-                ? styles.followingButtonText
-                : styles.followButtonText, children: followButtonLabel })) }));
-    const renderProfileHeader = () => (_jsxs(View, { style: styles.card, children: [_jsx(View, { style: styles.avatarCircle, children: profile?.avatarUrl ? (_jsx(Image, { source: { uri: profile.avatarUrl }, style: styles.avatarImage, resizeMode: "cover" })) : (_jsx(PlaceholderAvatar, {})) }), _jsxs(View, { style: styles.headerText, children: [_jsx(Text, { style: styles.displayName, children: profile?.displayName ?? 'Set your display name' }), _jsx(Text, { style: styles.handleText, children: profile ? `@${profile.handle}` : 'No handle yet' }), _jsxs(View, { style: styles.metricsRow, children: [_jsxs(View, { style: styles.metricItem, children: [_jsx(Text, { style: styles.metricValue, children: profile?.followersCount ?? 0 }), _jsx(Text, { style: styles.metricLabel, children: "Followers" })] }), _jsxs(View, { style: styles.metricItem, children: [_jsx(Text, { style: styles.metricValue, children: profile?.followingCount ?? 0 }), _jsx(Text, { style: styles.metricLabel, children: "Following" })] })] })] }), viewingOwnProfile ? (_jsx(TouchableOpacity, { style: styles.logoutChip, onPress: handleLogout, accessibilityRole: "button", children: _jsx(Text, { style: styles.logoutChipText, children: "Log out" }) })) : null, viewingOwnProfile ? null : renderFollowAction()] }));
-    const renderEditableProfile = () => (_jsxs(View, { style: styles.card, children: [_jsx(Text, { style: styles.sectionTitle, children: "Profile details" }), _jsxs(View, { style: styles.formGroup, children: [_jsx(Text, { style: styles.label, children: "Display name" }), _jsx(TextInput, { value: displayName, onChangeText: setDisplayName, placeholder: "How should teammates see you?", style: styles.textInput, editable: !saving, autoCapitalize: "words" })] }), _jsxs(View, { style: styles.formGroup, children: [_jsx(Text, { style: styles.label, children: "Bio" }), _jsx(TextInput, { value: bio, onChangeText: setBio, placeholder: "Share a short introduction", style: [styles.textInput, styles.bioInput], multiline: true, numberOfLines: 4, textAlignVertical: "top", editable: !saving })] }), formError ? _jsx(Text, { style: styles.errorText, children: formError }) : null, successMessage ? _jsx(Text, { style: styles.successText, children: successMessage }) : null, _jsx(TouchableOpacity, { style: [styles.primaryButton, saving ? styles.buttonDisabled : null], onPress: handleSave, disabled: saving, accessibilityRole: "button", children: saving ? _jsx(ActivityIndicator, { color: "#fff" }) : _jsx(Text, { style: styles.primaryButtonText, children: "Save changes" }) })] }));
-    const aboutSection = profile?.bio ? (_jsxs(View, { style: styles.card, children: [_jsx(Text, { style: styles.sectionTitle, children: "About" }), _jsx(Text, { style: styles.readOnlyBio, children: profile.bio })] })) : null;
-    const renderRecentPosts = () => (_jsxs(View, { style: styles.card, children: [_jsx(Text, { style: styles.sectionTitle, children: "Recent posts" }), activeLoading && !profile ? _jsx(ActivityIndicator, { style: styles.postsLoading }) : null, !activeLoading && posts.length === 0 ? (_jsx(Text, { style: styles.placeholderBody, children: viewingOwnProfile
-                    ? 'You have not shared anything yet. Post from the feed to see it listed here.'
-                    : 'No recent posts to show yet. Check back later!' })) : null, posts.map((post) => (_jsxs(View, { style: styles.postCard, children: [_jsx(Text, { style: styles.postTimestamp, children: formatRelativeProfileTimestamp(post.createdAt) }), _jsx(Text, { style: styles.postBody, children: post.body })] }, post.id)))] }));
-    const renderActiveError = () => activeError && !unauthenticatedError ? (_jsxs(View, { style: styles.errorCard, children: [_jsx(Text, { style: styles.errorTitle, children: "We hit a snag" }), _jsx(Text, { style: styles.errorBody, children: "Something went wrong while loading your profile. Pull to refresh or try again." })] })) : null;
-    const renderProfileNotFound = () => !activeLoading && !profile && !activeError ? (_jsxs(View, { style: styles.errorCard, children: [_jsx(Text, { style: styles.errorTitle, children: "Profile not found" }), _jsx(Text, { style: styles.errorBody, children: "This handle does not exist or is no longer available." })] })) : null;
-    // --- top-level early returns to simplify main render ---
-    if (!viewingOwnProfile && trimmedHandle.length === 0)
-        return renderNoHandle();
-    if (shouldPromptSignIn)
-        return renderSignInPrompt();
-    return (_jsxs(ScrollView, { style: styles.scroll, contentContainerStyle: styles.scrollContent, keyboardShouldPersistTaps: "handled", refreshControl: _jsx(RefreshControl, { refreshing: activeLoading, onRefresh: handleRefresh }), children: [renderProfileHeader(), !viewingOwnProfile && followError ? (_jsx(Text, { style: styles.errorText, children: followError })) : null, viewingOwnProfile ? renderEditableProfile() : aboutSection, renderRecentPosts(), renderActiveError(), renderProfileNotFound()] }));
+    }, [auth, followLoading, followUser, profile, refetch, token, unfollowUser, viewingOwnProfile]);
+    const handleUploadAvatar = useCallback(async () => {
+        const result = await ImagePicker.launchImageLibraryAsync({
+            allowsEditing: true,
+            quality: 0.85,
+            mediaTypes: ['images']
+        });
+        if (result.canceled || !result.assets[0]) {
+            return;
+        }
+        setUploadingAvatar(true);
+        setAvatarError(undefined);
+        try {
+            const avatar = await uploadAvatarImage(result.assets[0], requestUpload, completeUpload);
+            await updateProfile({
+                variables: {
+                    displayName: displayName.trim() || profile?.displayName || '',
+                    bio: bio.trim() || null,
+                    avatarAssetId: avatar.id
+                }
+            });
+            setActionError(undefined);
+            await meQuery.refetch();
+            setFormSuccess('Avatar updated.');
+        }
+        catch (nextError) {
+            console.warn('Failed to upload avatar', nextError);
+            setAvatarError(resolveMediaUploadErrorMessage(nextError, describeClientError(nextError, 'We could not upload your avatar. Please try again.')));
+        }
+        finally {
+            setUploadingAvatar(false);
+        }
+    }, [bio, completeUpload, displayName, meQuery, profile?.displayName, requestUpload, updateProfile]);
+    if (viewingOwnProfile && !token) {
+        return (_jsx(EmptyState, { title: "Sign in to continue", body: "Log in to view and edit your profile, manage your avatar, and see your connections." }));
+    }
+    if (!viewingOwnProfile && !trimmedHandle) {
+        return _jsx(EmptyState, { title: "No profile selected", body: "Return to the feed and choose a user profile to inspect." });
+    }
+    if (error) {
+        return (_jsx(EmptyState, { title: "Profile unavailable", body: describeClientError(error, 'The requested profile could not be loaded.') }));
+    }
+    if (!profile && loading) {
+        return (_jsx(View, { style: styles.centeredContainer, children: _jsx(ActivityIndicator, {}) }));
+    }
+    if (!profile) {
+        return (_jsx(EmptyState, { title: viewingOwnProfile ? 'Profile unavailable' : 'User not found', body: viewingOwnProfile
+                ? 'Your session is active, but the API did not return your profile. Refresh the screen or sign out and log in again.'
+                : 'The requested profile could not be found.' }));
+    }
+    return (_jsxs(ScrollView, { contentContainerStyle: styles.screen, refreshControl: _jsx(RefreshControl, { refreshing: loading, onRefresh: () => void refresh() }), children: [_jsxs(View, { style: styles.card, children: [_jsxs(View, { style: styles.headerRow, children: [_jsx(View, { style: styles.avatarCircle, children: profile?.avatarUrl ? (_jsx(Image, { source: { uri: profile.avatarUrl }, style: styles.avatarImage, resizeMode: "cover" })) : (_jsx(PlaceholderAvatar, {})) }), _jsxs(View, { style: styles.flexSpacer, children: [_jsx(Text, { style: styles.displayName, children: profile?.displayName ?? 'Unknown user' }), _jsxs(Text, { style: styles.handleText, children: ["@", profile?.handle ?? 'unknown'] }), _jsxs(Text, { style: styles.metaCopy, children: ["Joined ", formatRelativeProfileTimestamp(profile?.createdAt)] })] })] }), _jsxs(View, { style: styles.metricsRow, children: [_jsxs(View, { style: styles.metricItem, children: [_jsx(Text, { style: styles.metricValue, children: profile?.followersCount ?? 0 }), _jsx(Text, { style: styles.metricLabel, children: "Followers" })] }), _jsxs(View, { style: styles.metricItem, children: [_jsx(Text, { style: styles.metricValue, children: profile?.followingCount ?? 0 }), _jsx(Text, { style: styles.metricLabel, children: "Following" })] })] }), profile?.bio ? _jsx(Text, { style: styles.bioText, children: profile.bio }) : null, _jsx(View, { style: styles.actionsRow, children: viewingOwnProfile ? (_jsxs(_Fragment, { children: [_jsx(Pressable, { accessibilityRole: "button", onPress: () => void handleUploadAvatar(), style: styles.secondaryButton, children: _jsx(Text, { style: styles.secondaryButtonText, children: uploadingAvatar ? 'Uploading…' : 'Update avatar' }) }), onSearchUsers ? (_jsx(Pressable, { accessibilityRole: "button", onPress: onSearchUsers, style: styles.secondaryButton, children: _jsx(Text, { style: styles.secondaryButtonText, children: "Find people" }) })) : null, _jsx(Pressable, { accessibilityRole: "button", onPress: () => void auth?.logout?.(), style: styles.secondaryButton, children: _jsx(Text, { style: styles.secondaryButtonText, children: "Log out" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Pressable, { accessibilityRole: "button", disabled: followLoading, onPress: () => void handleToggleFollow(), style: styles.primaryButton, children: _jsx(Text, { style: styles.primaryButtonText, children: followLoading ? 'Saving…' : profile?.followedByMe ? 'Following' : 'Follow' }) }), onMessageUser && profile ? (_jsx(Pressable, { accessibilityRole: "button", onPress: () => onMessageUser({
+                                        id: profile.id,
+                                        handle: profile.handle,
+                                        displayName: profile.displayName
+                                    }), style: styles.secondaryButton, children: _jsx(Text, { style: styles.secondaryButtonText, children: "Message" }) })) : null] })) }), avatarError ? _jsx(Text, { style: styles.errorText, children: avatarError }) : null, actionError ? _jsx(Text, { style: styles.errorText, children: actionError }) : null] }), viewingOwnProfile ? (_jsxs(View, { style: styles.card, children: [_jsx(Text, { style: styles.sectionTitle, children: "Account settings" }), _jsxs(View, { style: styles.formGroup, children: [_jsx(Text, { style: styles.label, children: "Display name" }), _jsx(TextInput, { value: displayName, onChangeText: setDisplayName, style: styles.input, autoCapitalize: "words" })] }), _jsxs(View, { style: styles.formGroup, children: [_jsx(Text, { style: styles.label, children: "Bio" }), _jsx(TextInput, { value: bio, onChangeText: setBio, style: [styles.input, styles.multilineInput], multiline: true })] }), formError ? _jsx(Text, { style: styles.errorText, children: formError }) : null, formSuccess ? _jsx(Text, { style: styles.successText, children: formSuccess }) : null, _jsxs(View, { style: styles.actionsRow, children: [_jsx(View, { style: styles.flexSpacer }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => void handleSave(), style: styles.primaryButton, children: _jsx(Text, { style: styles.primaryButtonText, children: "Save changes" }) })] })] })) : null, viewingOwnProfile && (onOpenSupport || onOpenPrivacyPolicy) ? (_jsxs(View, { style: styles.card, children: [_jsx(Text, { style: styles.sectionTitle, children: "Help and privacy" }), _jsx(Text, { style: styles.sectionBody, children: "Review support guidance and the latest privacy policy before sharing this beta build more broadly." }), _jsxs(View, { style: styles.actionsRow, children: [onOpenSupport ? (_jsx(Pressable, { accessibilityRole: "button", onPress: onOpenSupport, style: styles.secondaryButton, children: _jsx(Text, { style: styles.secondaryButtonText, children: "Support" }) })) : null, onOpenPrivacyPolicy ? (_jsx(Pressable, { accessibilityRole: "button", onPress: onOpenPrivacyPolicy, style: styles.secondaryButton, children: _jsx(Text, { style: styles.secondaryButtonText, children: "Privacy policy" }) })) : null] })] })) : null, _jsxs(View, { style: styles.card, children: [_jsx(Text, { style: styles.sectionTitle, children: "Followers" }), followers.length === 0 ? (_jsx(Text, { style: styles.mutedText, children: "No followers to show yet." })) : (followers.map((user) => (_jsx(UserRow, { user: user, onSelect: () => onSelectUser?.(user.handle) }, user.id))))] }), _jsxs(View, { style: styles.card, children: [_jsx(Text, { style: styles.sectionTitle, children: "Following" }), following.length === 0 ? (_jsx(Text, { style: styles.mutedText, children: "Not following anyone yet." })) : (following.map((user) => (_jsx(UserRow, { user: user, onSelect: () => onSelectUser?.(user.handle) }, user.id))))] }), _jsxs(View, { style: styles.card, children: [_jsx(Text, { style: styles.sectionTitle, children: "Recent posts" }), posts.length === 0 ? (_jsx(Text, { style: styles.mutedText, children: "No recent posts yet." })) : (posts.map((post) => (_jsxs(View, { style: styles.postRow, children: [_jsx(Text, { style: styles.postBody, children: post.body }), _jsx(Text, { style: styles.mutedText, children: formatRelativeProfileTimestamp(post.createdAt) })] }, post.id))))] })] }));
+}
+export function PeopleScreen({ onSelectUser, onMessageUser }) {
+    const [query, setQuery] = useState('');
+    const deferredQuery = useDeferredValue(query);
+    const normalizedQuery = normalizeUserSearchQuery(deferredQuery);
+    const canSearch = normalizedQuery.length >= MIN_SEARCH_QUERY_LENGTH;
+    const discoverQuery = useDiscoverUsersQuery({
+        variables: {
+            limit: DISCOVER_RESULT_LIMIT
+        },
+        notifyOnNetworkStatusChange: true
+    });
+    const searchQuery = useSearchUsersQuery({
+        variables: {
+            query: normalizedQuery,
+            limit: INLINE_SEARCH_RESULT_LIMIT
+        },
+        skip: !canSearch,
+        notifyOnNetworkStatusChange: true
+    });
+    const [followUser] = useFollowUserMutation();
+    const [unfollowUser] = useUnfollowUserMutation();
+    const [discoverActionUserId, setDiscoverActionUserId] = useState();
+    const [actionError, setActionError] = useState();
+    const results = searchQuery.data?.searchUsers ?? [];
+    const discoverUsers = discoverQuery.data?.discoverUsers ?? [];
+    const refreshing = discoverQuery.loading || searchQuery.loading;
+    const refresh = useCallback(async () => {
+        try {
+            const tasks = [discoverQuery.refetch()];
+            if (canSearch) {
+                tasks.push(searchQuery.refetch());
+            }
+            await Promise.all(tasks);
+            setActionError(undefined);
+        }
+        catch (error) {
+            setActionError(describeClientError(error, 'We could not refresh people right now.'));
+        }
+    }, [canSearch, discoverQuery, searchQuery]);
+    const handleToggleFollow = useCallback(async (user) => {
+        setDiscoverActionUserId(user.id);
+        try {
+            if (user.followedByMe) {
+                await unfollowUser({ variables: { userId: user.id } });
+            }
+            else {
+                await followUser({ variables: { userId: user.id } });
+            }
+            setActionError(undefined);
+            await discoverQuery.refetch();
+        }
+        catch (error) {
+            setActionError(describeClientError(error, 'We could not update this follow relationship.'));
+        }
+        finally {
+            setDiscoverActionUserId(undefined);
+        }
+    }, [discoverQuery, followUser, unfollowUser]);
+    return (_jsxs(ScrollView, { contentContainerStyle: styles.screen, refreshControl: _jsx(RefreshControl, { refreshing: refreshing, onRefresh: () => void refresh() }), children: [_jsxs(View, { style: styles.card, children: [_jsx(Text, { style: styles.sectionTitle, children: "People" }), _jsx(Text, { style: styles.sectionBody, children: "Search users by name or handle, or browse suggested people to follow." }), _jsx(TextInput, { value: query, onChangeText: setQuery, placeholder: "Search users by name or handle", style: styles.input })] }), actionError ? _jsx(Text, { style: styles.errorText, children: actionError }) : null, _jsx(SearchResultsSection, { query: normalizedQuery, canSearch: canSearch, loading: searchQuery.loading, error: searchQuery.error, results: results, onSelectUser: onSelectUser, onMessageUser: onMessageUser }), normalizedQuery.length === 0 ? (_jsx(DiscoverPeopleSection, { users: discoverUsers, loading: discoverQuery.loading, error: discoverQuery.error, loadingUserId: discoverActionUserId, onSelectUser: onSelectUser, onToggleFollow: handleToggleFollow })) : null] }));
 }
-const { color, spacing, radius, shadow } = tokens;
-const profileCardRecipe = cardRecipes.surface;
-const postCardRecipe = cardRecipes.subdued;
-const placeholderPalette = placeholderAvatarRecipe;
+export function UserSearchScreen(props) {
+    return _jsx(PeopleScreen, { ...props });
+}
+const { color, radius, shadow, spacing } = tokens;
 const styles = StyleSheet.create({
-    scroll: {
-        flex: 1,
-        backgroundColor: color.surfaceMuted
-    },
-    scrollContent: {
+    screen: {
+        flexGrow: 1,
         padding: spacing.lg,
-        gap: spacing.lg
+        gap: spacing.md,
+        backgroundColor: color.surfaceAlt
     },
     centeredContainer: {
         flex: 1,
         alignItems: 'center',
         justifyContent: 'center',
         padding: spacing.xxl,
-        backgroundColor: color.surfaceMuted
+        backgroundColor: color.surfaceAlt
     },
     placeholderCard: {
         width: '100%',
-        maxWidth: 360,
-        backgroundColor: color[profileCardRecipe.backgroundColor],
-        borderRadius: radius[profileCardRecipe.radius],
-        padding: spacing.xxl,
-        alignItems: 'center',
-        gap: spacing.lg,
-        ...shadow[profileCardRecipe.elevation]
+        borderRadius: radius.xl,
+        padding: spacing.xl,
+        backgroundColor: color.surface,
+        borderWidth: 1,
+        borderColor: color.border,
+        gap: spacing.sm,
+        ...shadow.sm
     },
     placeholderTitle: {
         fontSize: 20,
         fontWeight: '700',
-        color: color.text,
-        textAlign: 'center'
+        color: color.text
     },
     placeholderBody: {
-        fontSize: 14,
         color: color.textMuted,
-        textAlign: 'center',
         lineHeight: 20
     },
-    primaryButton: {
-        width: '100%',
-        backgroundColor: color.primary,
-        borderRadius: radius.pill,
-        paddingVertical: spacing.mdPlus,
-        paddingHorizontal: spacing.xxl,
-        alignItems: 'center',
-        justifyContent: 'center',
-        ...shadow.md,
-        shadowColor: color.primary
-    },
-    primaryButtonText: {
-        fontSize: 16,
-        fontWeight: '600',
-        color: color.surface
-    },
-    secondaryButton: {
-        width: '100%',
-        borderRadius: radius.pill,
-        paddingVertical: spacing.md,
-        alignItems: 'center',
-        justifyContent: 'center',
+    card: {
+        borderRadius: radius.xl,
+        padding: spacing.lg,
+        backgroundColor: color.surface,
         borderWidth: 1,
-        borderColor: color.borderStrong
-    },
-    secondaryButtonText: {
-        fontSize: 15,
-        fontWeight: '600',
-        color: color.text
-    },
-    buttonDisabled: {
-        opacity: 0.65
+        borderColor: color.border,
+        gap: spacing.sm,
+        ...shadow.sm
     },
-    card: {
-        backgroundColor: color[profileCardRecipe.backgroundColor],
-        borderRadius: radius[profileCardRecipe.radius],
-        padding: spacing[profileCardRecipe.padding],
-        gap: spacing.lg,
-        ...shadow[profileCardRecipe.elevation]
+    headerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.md
     },
     avatarCircle: {
-        width: 96,
-        height: 96,
-        borderRadius: 48,
+        width: 84,
+        height: 84,
+        borderRadius: 42,
         overflow: 'hidden',
-        backgroundColor: color[placeholderPalette.container],
-        alignSelf: 'center',
+        backgroundColor: color.surfaceAlt,
         alignItems: 'center',
         justifyContent: 'center'
     },
@@ -261,44 +397,40 @@ const styles = StyleSheet.create({
         height: '100%'
     },
     placeholderAvatar: {
-        width: '100%',
-        height: '100%',
         alignItems: 'center',
-        justifyContent: 'center'
+        gap: spacing.xs
     },
     placeholderHead: {
-        width: 44,
-        height: 44,
-        borderRadius: 22,
-        backgroundColor: color[placeholderPalette.head]
+        width: 28,
+        height: 28,
+        borderRadius: 14,
+        backgroundColor: color.borderStrong
     },
     placeholderShoulders: {
-        width: 68,
-        height: 36,
-        borderRadius: 18,
-        backgroundColor: color[placeholderPalette.shoulders],
-        marginTop: spacing.sm
-    },
-    headerText: {
-        alignItems: 'center',
-        gap: spacing.xxs
+        width: 48,
+        height: 18,
+        borderRadius: 999,
+        backgroundColor: color.border
     },
     displayName: {
-        fontSize: 22,
+        fontSize: 24,
         fontWeight: '700',
         color: color.text
     },
     handleText: {
-        fontSize: 14,
-        color: color.textSubdued
+        color: color.textMuted,
+        fontSize: 15
+    },
+    metaCopy: {
+        color: color.textSubdued,
+        fontSize: 12
     },
     metricsRow: {
         flexDirection: 'row',
-        gap: spacing.xxl,
-        marginTop: spacing.sm
+        gap: spacing.xl
     },
     metricItem: {
-        alignItems: 'center'
+        gap: spacing.xxs
     },
     metricValue: {
         fontSize: 18,
@@ -306,127 +438,124 @@ const styles = StyleSheet.create({
         color: color.text
     },
     metricLabel: {
-        fontSize: 12,
-        color: color.textMuted,
-        textTransform: 'uppercase',
-        letterSpacing: 0.6
-    },
-    logoutChip: {
-        alignSelf: 'center',
-        borderRadius: radius.pill,
-        borderWidth: 1,
-        borderColor: color.borderStrong,
-        paddingHorizontal: spacing.lg,
-        paddingVertical: spacing.sm
+        color: color.textMuted
     },
-    logoutChipText: {
-        fontSize: 12,
-        fontWeight: '600',
-        color: color.text
+    bioText: {
+        color: color.text,
+        lineHeight: 22
     },
-    followActionButton: {
-        marginTop: spacing.md,
-        alignSelf: 'center',
-        borderRadius: radius.pill,
-        paddingHorizontal: spacing.xxl,
-        paddingVertical: spacing.smPlus,
-        minWidth: 120,
+    actionsRow: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: spacing.sm,
         alignItems: 'center'
     },
-    followButton: {
-        backgroundColor: color.primary
+    primaryButton: {
+        borderRadius: 999,
+        backgroundColor: color.primary,
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm
     },
-    followingButton: {
-        backgroundColor: color.surfaceSubdued
+    primaryButtonText: {
+        color: '#ffffff',
+        fontWeight: '600'
     },
-    followButtonText: {
-        fontSize: 14,
-        fontWeight: '600',
-        color: color.surface
+    secondaryButton: {
+        borderRadius: 999,
+        borderWidth: 1,
+        borderColor: color.borderStrong,
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        backgroundColor: color.surface
     },
-    followingButtonText: {
-        fontSize: 14,
-        fontWeight: '600',
-        color: color.text
+    secondaryButtonText: {
+        color: color.text,
+        fontWeight: '600'
     },
     sectionTitle: {
-        fontSize: 16,
+        fontSize: 18,
         fontWeight: '700',
         color: color.text
     },
-    readOnlyBio: {
-        fontSize: 15,
-        lineHeight: 20,
-        color: color.text
+    sectionBody: {
+        color: color.textMuted,
+        lineHeight: 20
     },
     formGroup: {
-        gap: spacing.sm
+        gap: spacing.xs
     },
     label: {
         fontSize: 13,
         fontWeight: '600',
         color: color.text
     },
-    textInput: {
-        borderRadius: radius.md,
+    input: {
         borderWidth: 1,
         borderColor: color.borderStrong,
-        paddingHorizontal: spacing.mdPlus,
-        paddingVertical: spacing.md,
-        fontSize: 15,
-        color: color.text,
-        backgroundColor: color.surfaceAlt
-    },
-    bioInput: {
-        minHeight: 120
+        borderRadius: radius.md,
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        backgroundColor: color.surfaceAlt,
+        color: color.text
     },
-    successText: {
-        fontSize: 13,
-        color: '#1d7e1f',
-        fontWeight: '600'
+    multilineInput: {
+        minHeight: 88
     },
     errorText: {
-        fontSize: 13,
-        color: '#d22c2c',
-        fontWeight: '600'
+        color: '#d22c2c'
     },
-    postsLoading: {
-        marginTop: spacing.md
-    },
-    postCard: {
-        borderRadius: radius[postCardRecipe.radius],
-        borderWidth: postCardRecipe.borderColor ? 1 : 0,
-        borderColor: postCardRecipe.borderColor ? color[postCardRecipe.borderColor] : undefined,
-        padding: spacing[postCardRecipe.padding],
-        gap: spacing.sm,
-        backgroundColor: color[postCardRecipe.backgroundColor],
-        marginTop: spacing.md
+    successText: {
+        color: '#17663a'
     },
-    postTimestamp: {
-        fontSize: 12,
+    mutedText: {
         color: color.textMuted
     },
+    postRow: {
+        gap: spacing.xs,
+        borderTopWidth: 1,
+        borderTopColor: color.border,
+        paddingTop: spacing.sm
+    },
     postBody: {
-        fontSize: 15,
         color: color.text,
         lineHeight: 20
     },
-    errorCard: {
-        backgroundColor: '#fff4f4',
-        borderRadius: radius.lg,
-        padding: spacing.lg,
-        borderWidth: 1,
-        borderColor: '#f6d5d5',
-        gap: spacing.xs
+    userRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.md,
+        borderTopWidth: 1,
+        borderTopColor: color.border,
+        paddingTop: spacing.sm
+    },
+    searchAvatarShell: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        backgroundColor: color.primary
     },
-    errorTitle: {
+    searchAvatarImage: {
+        width: '100%',
+        height: '100%'
+    },
+    searchAvatarFallback: {
+        color: '#ffffff',
+        fontSize: 16,
+        fontWeight: '700'
+    },
+    cardTitle: {
         fontSize: 15,
-        fontWeight: '700',
-        color: '#b11f1f'
+        fontWeight: '600',
+        color: color.text
     },
-    errorBody: {
-        fontSize: 13,
-        color: '#7a2f2f',
-        lineHeight: 18
+    inlineState: {
+        alignItems: 'center',
+        paddingVertical: spacing.lg
+    },
+    flexSpacer: {
+        flex: 1
     }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mereb/app-profile",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "Profile experience components and hooks for Mereb apps",
   "type": "module",
   "main": "dist/index.js",
@@ -27,12 +27,13 @@
     "package.json"
   ],
   "dependencies": {
-    "@mereb/shared-graphql": "^0.0.15",
-    "@mereb/ui-shared": "^0.0.4",
-    "@mereb/tokens": "^0.0.4"
+    "@mereb/shared-graphql": "^0.0.17",
+    "@mereb/ui-shared": "^0.0.7",
+    "@mereb/tokens": "^0.0.9"
   },
   "peerDependencies": {
     "@apollo/client": ">=4.0.0",
+    "expo-image-picker": ">=15.0.0",
     "expo-router": ">=3.0.0",
     "react": ">=18.2.0",
     "react-native": ">=0.72.0"