@mereb/app-profile 0.0.1

package/dist/src/headless.d.ts

@@ -0,0 +1,8 @@
+import type { MeProfileQuery, ProfileByHandleQuery } from '@mereb/shared-graphql';
+export { MeProfileDocument, ProfileByHandleDocument, FollowUserDocument, UnfollowUserDocument, UpdateProfileDocument } from '@mereb/shared-graphql';
+export type ViewerProfile = MeProfileQuery['me'];
+export type ProfileData = ProfileByHandleQuery['userByHandle'];
+export type ProfilePost = NonNullable<ProfileData>['posts']['edges'][number]['node'];
+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[];

package/dist/src/index.d.ts

@@ -0,0 +1,11 @@
+type AuthControls = {
+    token?: string;
+    login?: () => Promise<void>;
+    logout?: () => Promise<void>;
+};
+type ProfileScreenProps = {
+    auth?: AuthControls;
+    handle?: string;
+};
+export declare function ProfileScreen({ auth, handle }: Readonly<ProfileScreenProps>): import("react").JSX.Element;
+export {};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@mereb/app-profile",
+  "version": "0.0.1",
+  "description": "Profile experience components and hooks for Mereb apps",
+  "type": "module",
+  "main": "src/index.tsx",
+  "types": "src/index.tsx",
+  "exports": {
+    ".": {
+      "types": "./src/index.tsx",
+      "default": "./src/index.tsx"
+    },
+    "./headless": {
+      "types": "./src/headless.ts",
+      "default": "./src/headless.ts"
+    }
+  },
+  "files": [
+    "src",
+    "dist",
+    "package.json"
+  ],
+  "dependencies": {
+    "@mereb/shared-graphql": "^0.0.6",
+    "@mereb/ui-shared": "^0.0.1",
+    "@mereb/tokens": "^0.0.4"
+  },
+  "peerDependencies": {
+    "@apollo/client": ">=3.8.0",
+    "expo-router": ">=3.0.0",
+    "react": ">=18.2.0",
+    "react-native": ">=0.72.0"
+  },
+  "devDependencies": {
+    "@types/react": "~18.2.79",
+    "typescript": ">=5.3.3"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit --project tsconfig.json",
+    "build": "tsc --project tsconfig.json"
+  }
+}

package/src/headless.ts

@@ -0,0 +1,66 @@
+import type {
+  MeProfileQuery,
+  ProfileByHandleQuery
+} from '@mereb/shared-graphql';
+
+export {
+  MeProfileDocument,
+  ProfileByHandleDocument,
+  FollowUserDocument,
+  UnfollowUserDocument,
+  UpdateProfileDocument
+} from '@mereb/shared-graphql';
+
+export type ViewerProfile = MeProfileQuery['me'];
+export type ProfileData = ProfileByHandleQuery['userByHandle'];
+export type ProfilePost = NonNullable<ProfileData>['posts']['edges'][number]['node'];
+
+const MINUTE = 60 * 1000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+
+export function parseProfileTimestamp(value?: string | null): Date | null {
+  if (!value) {
+    return null;
+  }
+  const numeric = Number(value);
+  if (!Number.isNaN(numeric) && numeric > 0) {
+    const numericDate = new Date(numeric);
+    return Number.isNaN(numericDate.getTime()) ? null : numericDate;
+  }
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+export function formatRelativeProfileTimestamp(value?: string | null, now: number = Date.now()): string {
+  const parsed = parseProfileTimestamp(value);
+  if (!parsed) {
+    return 'Just now';
+  }
+
+  const diff = now - parsed.getTime();
+  if (diff < MINUTE) {
+    return 'Just now';
+  }
+  if (diff < HOUR) {
+    const mins = Math.round(diff / MINUTE);
+    return `${mins} min${mins === 1 ? '' : 's'} ago`;
+  }
+  if (diff < DAY) {
+    const hours = Math.round(diff / HOUR);
+    return `${hours} hr${hours === 1 ? '' : 's'} ago`;
+  }
+
+  return parsed.toLocaleDateString(undefined, {
+    year: parsed.getFullYear() === new Date().getFullYear() ? undefined : 'numeric',
+    month: 'short',
+    day: 'numeric'
+  });
+}
+
+export function selectProfilePosts(profile?: ProfileData | null): ProfilePost[] {
+  if (!profile?.posts?.edges?.length) {
+    return [];
+  }
+  return profile.posts.edges.map((edge) => edge.node);
+}

package/src/index.tsx

@@ -0,0 +1,734 @@
+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 {tokens} from '@mereb/tokens/native';
+import {cardRecipes, placeholderAvatarRecipe} from '@mereb/ui-shared';
+import {formatRelativeProfileTimestamp, selectProfilePosts} from './headless.js';
+
+type AuthControls = {
+    token?: string;
+    login?: () => Promise<void>;
+    logout?: () => Promise<void>;
+};
+
+type ProfileScreenProps = {
+    auth?: AuthControls;
+    handle?: string;
+};
+
+type GraphQLErrorLike = {
+    message?: string;
+};
+
+function extractGraphQLErrors(
+    error: unknown
+): GraphQLErrorLike[] | undefined {
+    if (
+        error &&
+        typeof error === 'object' &&
+        'graphQLErrors' in error &&
+        Array.isArray((error as { graphQLErrors?: unknown }).graphQLErrors)
+    ) {
+        return (error as { graphQLErrors?: GraphQLErrorLike[] }).graphQLErrors;
+    }
+    return undefined;
+}
+
+function PlaceholderAvatar() {
+    return (
+        <View style={styles.placeholderAvatar} accessible={false}>
+            <View style={styles.placeholderHead}/>
+            <View style={styles.placeholderShoulders}/>
+        </View>
+    );
+}
+
+export function ProfileScreen({auth, handle}: Readonly<ProfileScreenProps>) {
+    const token = auth?.token;
+    const viewingOwnProfile = !handle;
+    const trimmedHandle = handle?.replace(/^@/, '') ?? '';
+
+    const {
+        data: meData,
+        loading: loadingMe,
+        error: meError,
+        refetch: refetchMe
+    } = useMeProfileQuery({
+        variables: {postsLimit: 10},
+        skip: !viewingOwnProfile || !token,
+        notifyOnNetworkStatusChange: true
+    });
+
+    const {
+        data: handleData,
+        loading: loadingHandle,
+        error: handleError,
+        refetch: refetchHandle
+    } = useProfileByHandleQuery({
+        variables: {handle: trimmedHandle, postsLimit: 10},
+        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 [displayName, setDisplayName] = useState('');
+    const [bio, setBio] = useState('');
+    const [formError, setFormError] = useState<string>();
+    const [successMessage, setSuccessMessage] = useState<string>();
+    const [followError, setFollowError] = useState<string>();
+    const followMutationInFlight = followLoading || unfollowLoading;
+    const isAuthenticated = Boolean(token);
+
+    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]);
+
+    const posts = useMemo(() => selectProfilePosts(profile), [profile]);
+
+    const handleRefresh = useCallback(() => {
+        if (shouldPromptSignIn) return;
+        activeRefetch?.();
+    }, [shouldPromptSignIn, activeRefetch]);
+
+    const handleSave = useCallback(async () => {
+        if (!viewingOwnProfile) return;
+
+        const trimmedName = displayName.trim();
+        const trimmedBio = bio.trim();
+
+        if (!trimmedName) {
+            setFormError('Display name is required.');
+            return;
+        }
+
+        setFormError(undefined);
+        setSuccessMessage(undefined);
+
+        try {
+            const result = await updateProfileMutation({
+                variables: {
+                    displayName: trimmedName,
+                    bio: trimmedBio.length ? trimmedBio : null
+                }
+            });
+
+            if (result.data?.updateProfile) {
+                setSuccessMessage('Profile updated');
+                await refetchMe();
+            }
+        } catch (mutationError) {
+            console.warn('Failed to update profile', mutationError);
+            setFormError('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]);
+
+    const handleToggleFollow = useCallback(async () => {
+        if (viewingOwnProfile || !profile?.id || followMutationInFlight) return;
+
+        if (!isAuthenticated) {
+            auth?.login?.();
+            return;
+        }
+
+        setFollowError(undefined);
+
+        try {
+            if (profile.followedByMe) {
+                await unfollowUserMutation({ variables: { userId: profile.id } });
+            } else {
+                await followUserMutation({ variables: { userId: profile.id } });
+            }
+            await activeRefetch?.();
+        } catch (mutationError) {
+            console.warn('Failed to update follow status', mutationError);
+            setFollowError('We could not update the follow status. Please try again.');
+        }
+    }, [
+        viewingOwnProfile,
+        profile?.id,
+        profile?.followedByMe,
+        followMutationInFlight,
+        isAuthenticated,
+        auth,
+        unfollowUserMutation,
+        followUserMutation,
+        activeRefetch
+    ]);
+
+    // --- small renderer helpers to lower complexity ---
+    const renderNoHandle = () => (
+        <View style={styles.centeredContainer}>
+            <View style={styles.placeholderCard}>
+                <Text style={styles.placeholderTitle}>No handle provided</Text>
+                <Text style={styles.placeholderBody}>
+                    We could not determine which profile to show. Return to the feed and try again.
+                </Text>
+            </View>
+        </View>
+    );
+
+    const renderSignInPrompt = () => (
+        <View style={styles.centeredContainer}>
+            <View style={styles.placeholderCard}>
+                <Text style={styles.placeholderTitle}>Sign in to continue</Text>
+                <Text style={styles.placeholderBody}>
+                    Log in to view and edit your profile, see your recent activity, and
+                    connect with teammates.
+                </Text>
+                <TouchableOpacity
+                    style={styles.primaryButton}
+                    onPress={handleLogin}
+                    accessibilityRole="button"
+                >
+                    <Text style={styles.primaryButtonText}>Sign in</Text>
+                </TouchableOpacity>
+                {token ? (
+                    <TouchableOpacity
+                        style={styles.secondaryButton}
+                        onPress={handleLogout}
+                        accessibilityRole="button"
+                    >
+                        <Text style={styles.secondaryButtonText}>Log out</Text>
+                    </TouchableOpacity>
+                ) : null}
+            </View>
+        </View>
+    );
+
+    const renderFollowAction = () => (
+        <TouchableOpacity
+            style={[
+                styles.followActionButton,
+                profile?.followedByMe ? styles.followingButton : styles.followButton,
+                followMutationInFlight ? styles.buttonDisabled : null
+            ]}
+            onPress={handleToggleFollow}
+            disabled={followMutationInFlight}
+            accessibilityRole="button"
+        >
+            {followMutationInFlight ? (
+                <ActivityIndicator color={activityIndicatorColor} />
+            ) : (
+                <Text
+                    style={
+                        profile?.followedByMe
+                            ? styles.followingButtonText
+                            : styles.followButtonText
+                    }
+                >
+                    {followButtonLabel}
+                </Text>
+            )}
+        </TouchableOpacity>
+    );
+
+    const renderProfileHeader = () => (
+        <View style={styles.card}>
+            <View style={styles.avatarCircle}>
+                {profile?.avatarUrl ? (
+                    <Image
+                        source={{ uri: profile.avatarUrl }}
+                        style={styles.avatarImage}
+                        resizeMode="cover"
+                    />
+                ) : (
+                    <PlaceholderAvatar />
+                )}
+            </View>
+
+            <View style={styles.headerText}>
+                <Text style={styles.displayName}>
+                    {profile?.displayName ?? 'Set your display name'}
+                </Text>
+                <Text style={styles.handleText}>
+                    {profile ? `@${profile.handle}` : 'No handle yet'}
+                </Text>
+
+                <View style={styles.metricsRow}>
+                    <View style={styles.metricItem}>
+                        <Text style={styles.metricValue}>
+                            {profile?.followersCount ?? 0}
+                        </Text>
+                        <Text style={styles.metricLabel}>Followers</Text>
+                    </View>
+                    <View style={styles.metricItem}>
+                        <Text style={styles.metricValue}>
+                            {profile?.followingCount ?? 0}
+                        </Text>
+                        <Text style={styles.metricLabel}>Following</Text>
+                    </View>
+                </View>
+            </View>
+
+            {viewingOwnProfile ? (
+                <TouchableOpacity
+                    style={styles.logoutChip}
+                    onPress={handleLogout}
+                    accessibilityRole="button"
+                >
+                    <Text style={styles.logoutChipText}>Log out</Text>
+                </TouchableOpacity>
+            ) : null}
+
+            {viewingOwnProfile ? null : renderFollowAction()}
+        </View>
+    );
+
+
+    const renderEditableProfile = () => (
+        <View style={styles.card}>
+            <Text style={styles.sectionTitle}>Profile details</Text>
+
+            <View style={styles.formGroup}>
+                <Text style={styles.label}>Display name</Text>
+                <TextInput
+                    value={displayName}
+                    onChangeText={setDisplayName}
+                    placeholder="How should teammates see you?"
+                    style={styles.textInput}
+                    editable={!saving}
+                    autoCapitalize="words"
+                />
+            </View>
+
+            <View style={styles.formGroup}>
+                <Text style={styles.label}>Bio</Text>
+                <TextInput
+                    value={bio}
+                    onChangeText={setBio}
+                    placeholder="Share a short introduction"
+                    style={[styles.textInput, styles.bioInput]}
+                    multiline
+                    numberOfLines={4}
+                    textAlignVertical="top"
+                    editable={!saving}
+                />
+            </View>
+
+            {formError ? <Text style={styles.errorText}>{formError}</Text> : null}
+            {successMessage ? <Text style={styles.successText}>{successMessage}</Text> : null}
+
+            <TouchableOpacity
+                style={[styles.primaryButton, saving ? styles.buttonDisabled : null]}
+                onPress={handleSave}
+                disabled={saving}
+                accessibilityRole="button"
+            >
+                {saving ? <ActivityIndicator color="#fff" /> : <Text style={styles.primaryButtonText}>Save changes</Text>}
+            </TouchableOpacity>
+        </View>
+    );
+
+    const aboutSection = profile?.bio ? (
+        <View style={styles.card}>
+            <Text style={styles.sectionTitle}>About</Text>
+            <Text style={styles.readOnlyBio}>{profile.bio}</Text>
+        </View>
+    ) : null;
+
+    const renderRecentPosts = () => (
+        <View style={styles.card}>
+            <Text style={styles.sectionTitle}>Recent posts</Text>
+
+            {activeLoading && !profile ? <ActivityIndicator style={styles.postsLoading} /> : null}
+
+            {!activeLoading && posts.length === 0 ? (
+                <Text style={styles.placeholderBody}>
+                    {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!'}
+                </Text>
+            ) : null}
+
+            {posts.map((post) => (
+                <View key={post.id} style={styles.postCard}>
+                    <Text style={styles.postTimestamp}>
+                        {formatRelativeProfileTimestamp(post.createdAt)}
+                    </Text>
+                    <Text style={styles.postBody}>{post.body}</Text>
+                </View>
+            ))}
+        </View>
+    );
+
+    const renderActiveError = () =>
+        activeError && !unauthenticatedError ? (
+            <View style={styles.errorCard}>
+                <Text style={styles.errorTitle}>We hit a snag</Text>
+                <Text style={styles.errorBody}>
+                    Something went wrong while loading your profile. Pull to refresh or
+                    try again.
+                </Text>
+            </View>
+        ) : null;
+
+    const renderProfileNotFound = () =>
+        !activeLoading && !profile && !activeError ? (
+            <View style={styles.errorCard}>
+                <Text style={styles.errorTitle}>Profile not found</Text>
+                <Text style={styles.errorBody}>
+                    This handle does not exist or is no longer available.
+                </Text>
+            </View>
+        ) : null;
+
+    // --- top-level early returns to simplify main render ---
+    if (!viewingOwnProfile && trimmedHandle.length === 0) return renderNoHandle();
+    if (shouldPromptSignIn) return renderSignInPrompt();
+
+    return (
+        <ScrollView
+            style={styles.scroll}
+            contentContainerStyle={styles.scrollContent}
+            keyboardShouldPersistTaps="handled"
+            refreshControl={
+                <RefreshControl refreshing={activeLoading} onRefresh={handleRefresh} />
+            }
+        >
+            {renderProfileHeader()}
+
+            {!viewingOwnProfile && followError ? (
+                <Text style={styles.errorText}>{followError}</Text>
+            ) : null}
+
+            {viewingOwnProfile ? renderEditableProfile() : aboutSection}
+
+            {renderRecentPosts()}
+
+            {renderActiveError()}
+
+            {renderProfileNotFound()}
+        </ScrollView>
+    );
+}
+
+const {color, spacing, radius, shadow} = tokens;
+const profileCardRecipe = cardRecipes.surface;
+const postCardRecipe = cardRecipes.subdued;
+const placeholderPalette = placeholderAvatarRecipe;
+
+const styles = StyleSheet.create({
+    scroll: {
+        flex: 1,
+        backgroundColor: color.surfaceMuted
+    },
+    scrollContent: {
+        padding: spacing.lg,
+        gap: spacing.lg
+    },
+    centeredContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: spacing.xxl,
+        backgroundColor: color.surfaceMuted
+    },
+    placeholderCard: {
+        width: '100%',
+        maxWidth: 360,
+        backgroundColor: color[profileCardRecipe.backgroundColor],
+        borderRadius: radius[profileCardRecipe.radius],
+        padding: spacing.xxl,
+        alignItems: 'center',
+        gap: spacing.lg,
+        ...shadow[profileCardRecipe.elevation]
+    },
+    placeholderTitle: {
+        fontSize: 20,
+        fontWeight: '700',
+        color: color.text,
+        textAlign: 'center'
+    },
+    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',
+        borderWidth: 1,
+        borderColor: color.borderStrong
+    },
+    secondaryButtonText: {
+        fontSize: 15,
+        fontWeight: '600',
+        color: color.text
+    },
+    buttonDisabled: {
+        opacity: 0.65
+    },
+    card: {
+        backgroundColor: color[profileCardRecipe.backgroundColor],
+        borderRadius: radius[profileCardRecipe.radius],
+        padding: spacing[profileCardRecipe.padding],
+        gap: spacing.lg,
+        ...shadow[profileCardRecipe.elevation]
+    },
+    avatarCircle: {
+        width: 96,
+        height: 96,
+        borderRadius: 48,
+        overflow: 'hidden',
+        backgroundColor: color[placeholderPalette.container],
+        alignSelf: 'center',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    avatarImage: {
+        width: '100%',
+        height: '100%'
+    },
+    placeholderAvatar: {
+        width: '100%',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    placeholderHead: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        backgroundColor: color[placeholderPalette.head]
+    },
+    placeholderShoulders: {
+        width: 68,
+        height: 36,
+        borderRadius: 18,
+        backgroundColor: color[placeholderPalette.shoulders],
+        marginTop: spacing.sm
+    },
+    headerText: {
+        alignItems: 'center',
+        gap: spacing.xxs
+    },
+    displayName: {
+        fontSize: 22,
+        fontWeight: '700',
+        color: color.text
+    },
+    handleText: {
+        fontSize: 14,
+        color: color.textSubdued
+    },
+    metricsRow: {
+        flexDirection: 'row',
+        gap: spacing.xxl,
+        marginTop: spacing.sm
+    },
+    metricItem: {
+        alignItems: 'center'
+    },
+    metricValue: {
+        fontSize: 18,
+        fontWeight: '700',
+        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
+    },
+    logoutChipText: {
+        fontSize: 12,
+        fontWeight: '600',
+        color: color.text
+    },
+    followActionButton: {
+        marginTop: spacing.md,
+        alignSelf: 'center',
+        borderRadius: radius.pill,
+        paddingHorizontal: spacing.xxl,
+        paddingVertical: spacing.smPlus,
+        minWidth: 120,
+        alignItems: 'center'
+    },
+    followButton: {
+        backgroundColor: color.primary
+    },
+    followingButton: {
+        backgroundColor: color.surfaceSubdued
+    },
+    followButtonText: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: color.surface
+    },
+    followingButtonText: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: color.text
+    },
+    sectionTitle: {
+        fontSize: 16,
+        fontWeight: '700',
+        color: color.text
+    },
+    readOnlyBio: {
+        fontSize: 15,
+        lineHeight: 20,
+        color: color.text
+    },
+    formGroup: {
+        gap: spacing.sm
+    },
+    label: {
+        fontSize: 13,
+        fontWeight: '600',
+        color: color.text
+    },
+    textInput: {
+        borderRadius: radius.md,
+        borderWidth: 1,
+        borderColor: color.borderStrong,
+        paddingHorizontal: spacing.mdPlus,
+        paddingVertical: spacing.md,
+        fontSize: 15,
+        color: color.text,
+        backgroundColor: color.surfaceAlt
+    },
+    bioInput: {
+        minHeight: 120
+    },
+    successText: {
+        fontSize: 13,
+        color: '#1d7e1f',
+        fontWeight: '600'
+    },
+    errorText: {
+        fontSize: 13,
+        color: '#d22c2c',
+        fontWeight: '600'
+    },
+    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
+    },
+    postTimestamp: {
+        fontSize: 12,
+        color: color.textMuted
+    },
+    postBody: {
+        fontSize: 15,
+        color: color.text,
+        lineHeight: 20
+    },
+    errorCard: {
+        backgroundColor: '#fff4f4',
+        borderRadius: radius.lg,
+        padding: spacing.lg,
+        borderWidth: 1,
+        borderColor: '#f6d5d5',
+        gap: spacing.xs
+    },
+    errorTitle: {
+        fontSize: 15,
+        fontWeight: '700',
+        color: '#b11f1f'
+    },
+    errorBody: {
+        fontSize: 13,
+        color: '#7a2f2f',
+        lineHeight: 18
+    }
+});