@mereb/app-profile 0.0.2 → 0.0.4

package/dist/{src/headless.d.ts → headless.d.ts}

@@ -1,5 +1,5 @@
 import type { MeProfileQuery, ProfileByHandleQuery } from '@mereb/shared-graphql';
-export { MeProfileDocument, ProfileByHandleDocument, FollowUserDocument, UnfollowUserDocument, UpdateProfileDocument } from '@mereb/shared-graphql';
+export { MeProfileDocument, ProfileByHandleDocument, FollowUserDocument, UnfollowUserDocument, UpdateProfileDocument, RequestMediaUploadDocument, CompleteMediaUploadDocument } from '@mereb/shared-graphql';
 export type ViewerProfile = MeProfileQuery['me'];
 export type ProfileData = ProfileByHandleQuery['userByHandle'];
 export type ProfilePost = NonNullable<ProfileData>['posts']['edges'][number]['node'];

package/dist/headless.js

@@ -0,0 +1,45 @@
+export { MeProfileDocument, ProfileByHandleDocument, FollowUserDocument, UnfollowUserDocument, UpdateProfileDocument, RequestMediaUploadDocument, CompleteMediaUploadDocument } from '@mereb/shared-graphql';
+const MINUTE = 60 * 1000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+export function parseProfileTimestamp(value) {
+    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, now = Date.now()) {
+    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) {
+    if (!profile?.posts?.edges?.length) {
+        return [];
+    }
+    return profile.posts.edges.map((edge) => edge.node);
+}

package/dist/{src/index.d.ts → index.d.ts}

@@ -7,5 +7,5 @@ type ProfileScreenProps = {
     auth?: AuthControls;
     handle?: string;
 };
-export declare function ProfileScreen({ auth, handle }: Readonly<ProfileScreenProps>): import("react").JSX.Element;
+export declare function ProfileScreen({ auth, handle }: Readonly<ProfileScreenProps>): import("react/jsx-runtime.js").JSX.Element;
 export {};

package/dist/index.js

@@ -0,0 +1,432 @@
+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 { 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;
+    }
+    return undefined;
+}
+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 }) {
+    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();
+    const [successMessage, setSuccessMessage] = useState();
+    const [followError, setFollowError] = useState();
+    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 = () => (_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()] }));
+}
+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
+    }
+});

package/dist/native.d.ts

@@ -0,0 +1 @@
+export * from './index.js';

package/dist/native.js

@@ -0,0 +1 @@
+export * from './index.js';

package/package.json

@@ -1,28 +1,34 @@
 {
   "name": "@mereb/app-profile",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Profile experience components and hooks for Mereb apps",
   "type": "module",
-  "main": "src/index.tsx",
-  "types": "src/index.tsx",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.tsx",
-      "default": "./src/index.tsx"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./native": {
+      "types": "./dist/native.d.ts",
+      "import": "./dist/native.js",
+      "default": "./dist/native.js"
     },
     "./headless": {
-      "types": "./src/headless.ts",
-      "default": "./src/headless.ts"
+      "types": "./dist/headless.d.ts",
+      "import": "./dist/headless.js",
+      "default": "./dist/headless.js"
     }
   },
   "files": [
-    "src",
     "dist",
     "package.json"
   ],
   "dependencies": {
-    "@mereb/shared-graphql": "^0.0.9",
-    "@mereb/ui-shared": "^0.0.1",
+    "@mereb/shared-graphql": "^0.0.12",
+    "@mereb/ui-shared": "^0.0.3",
     "@mereb/tokens": "^0.0.4"
   },
   "peerDependencies": {
@@ -33,10 +39,16 @@
   },
   "devDependencies": {
     "@types/react": "~18.2.79",
-    "typescript": ">=5.3.3"
+    "husky": "^9.1.7",
+    "typescript": ">=5.3.3",
+    "vitest": "^3.2.4"
   },
   "scripts": {
+    "clean": "node -e \"const fs=require('node:fs'); fs.rmSync('dist',{recursive:true,force:true}); fs.rmSync('tsconfig.tsbuildinfo',{force:true});\"",
     "typecheck": "tsc --noEmit --project tsconfig.json",
-    "build": "tsc --project tsconfig.json"
+    "test": "pnpm exec vitest run --config vitest.config.ts",
+    "test:watch": "pnpm exec vitest --config vitest.config.ts",
+    "build": "pnpm run clean && tsc --project tsconfig.json",
+    "version:bump": "node ./scripts/bump-version.mjs"
   }
 }

package/src/headless.ts

@@ -1,66 +0,0 @@
-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

@@ -1,734 +0,0 @@
-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
-    }
-});