@oxyhq/services 11.0.0 → 11.1.1

package/lib/commonjs/ui/screens/ProfileScreen.js

@@ -7,6 +7,9 @@ exports.default = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _theme = require("@oxyhq/bloom/theme");
+var _button = require("@oxyhq/bloom/button");
+var _typography = require("@oxyhq/bloom/typography");
+var _settingsList = require("@oxyhq/bloom/settings-list");
 var _Avatar = _interopRequireDefault(require("../components/Avatar.js"));
 var _FollowButton = _interopRequireDefault(require("../components/FollowButton.js"));
 var _useFollow = require("../hooks/useFollow.js");
@@ -17,6 +20,10 @@ var _core = require("@oxyhq/core");
 var _errorHandlers = require("../utils/errorHandlers.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const AVATAR_SIZE = 96;
+const BANNER_HEIGHT = 160;
+const AVATAR_OVERLAP = -56;
+const INFO_ICON_SIZE = 18;
 const ProfileScreen = ({
   userId,
   username,
@@ -44,7 +51,6 @@ const ProfileScreen = ({
     isLoadingCounts
   } = (0, _useFollow.useFollow)(userId);
   const bloomTheme = (0, _theme.useTheme)();
-  const styles = createStyles();
   const {
     t,
     locale
@@ -98,34 +104,8 @@ const ProfileScreen = ({
       setProfile(profileRes);
       setReputationTotal(typeof reputationRes.total === 'number' ? reputationRes.total : null);
 
-      // Extract links from profile data
-      if (profileRes.linksMetadata && Array.isArray(profileRes.linksMetadata)) {
-        const linksWithIds = profileRes.linksMetadata.map((link, index) => ({
-          ...link,
-          id: link.id || `existing-${index}`
-        }));
-        setLinks(linksWithIds);
-      } else if (Array.isArray(profileRes.links)) {
-        const simpleLinks = profileRes.links.map(l => typeof l === 'string' ? l : typeof l === 'object' && 'link' in l ? l.link : '').filter(Boolean);
-        const linksWithMetadata = simpleLinks.map((url, index) => ({
-          url,
-          title: url.replace(/^https?:\/\//, '').replace(/\/$/, ''),
-          description: `Link to ${url}`,
-          image: undefined,
-          id: `existing-${index}`
-        }));
-        setLinks(linksWithMetadata);
-      } else if (profileRes.website) {
-        setLinks([{
-          url: profileRes.website,
-          title: profileRes.website.replace(/^https?:\/\//, '').replace(/\/$/, ''),
-          description: `Link to ${profileRes.website}`,
-          image: undefined,
-          id: 'existing-0'
-        }]);
-      } else {
-        setLinks([]);
-      }
+      // Normalize profile links via the shared @oxyhq/core helper.
+      setLinks((0, _core.normalizeProfileLinks)(profileRes.linksMetadata, profileRes.links));
 
       // Follower/following counts are managed by the `useFollow` hook.
 
@@ -162,10 +142,8 @@ const ProfileScreen = ({
   }, [userId]);
   if (isLoading) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.container, {
-        justifyContent: 'center',
-        backgroundColor: bloomTheme.colors.background
-      }],
+      style: styles.centerContainer,
+      className: "bg-bg",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
         size: "large",
         color: bloomTheme.colors.primary
@@ -174,82 +152,77 @@ const ProfileScreen = ({
   }
   if (error) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [styles.container, {
-        backgroundColor: bloomTheme.colors.background
-      }],
+      style: styles.container,
+      className: "bg-bg",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [styles.errorHeader, {
-          borderBottomColor: bloomTheme.colors.border
-        }],
-        children: [goBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: styles.errorHeader,
+        className: "px-screen-margin py-space-12 border-b border-border",
+        children: [goBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+          variant: "icon",
+          size: "icon",
           onPress: goBack,
-          style: styles.backButton,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+          accessibilityLabel: t('common.back') || 'Back',
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
             name: "arrow-back",
-            size: 24,
+            size: 22,
             color: bloomTheme.colors.text
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H2, {
           style: styles.errorTitle,
-          className: "text-foreground",
-          children: "Profile Error"
+          className: "text-text",
+          children: t('profile.errorTitle') || 'Profile Error'
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.errorContent,
+        className: "px-space-32 gap-space-12",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
           name: "alert-circle",
           size: 48,
-          color: bloomTheme.colors.error,
-          style: styles.errorIcon
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          color: bloomTheme.colors.error
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
           style: styles.errorText,
-          className: "text-destructive",
+          className: "text-text",
           children: error
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
           style: styles.errorSubtext,
-          className: "text-muted-foreground",
-          children: "This could happen if the user doesn't exist or the profile service is unavailable."
+          className: "text-text-secondary",
+          children: t('profile.errorSubtext') || "This could happen if the user doesn't exist or the profile service is unavailable."
         })]
       })]
     });
   }
+  const displayName = profile ? (0, _core.getAccountDisplayName)(profile, locale) : username || '';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.container, {
-      backgroundColor: bloomTheme.colors.background
-    }],
+    style: styles.container,
+    className: "bg-bg",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
-      style: {
-        flex: 1
-      },
+      style: styles.flex,
       contentContainerStyle: styles.scrollContainer,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.bannerContainer,
-        className: "bg-primary/20",
+        className: "bg-fill-brand/20",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.bannerImage,
-          className: "bg-primary"
+          style: styles.flex,
+          className: "bg-fill-brand"
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.avatarRow,
+        className: "px-screen-margin",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.avatarWrapper,
-          className: "border-background bg-background",
+          className: "border-bg bg-bg rounded-radius-max",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
             uri: profile?.avatar ? oxyServices.getFileDownloadUrl(profile.avatar, 'thumb') : undefined,
-            name: profile ? (0, _core.getAccountDisplayName)(profile, locale) : username,
-            size: 96
+            name: displayName || username,
+            size: AVATAR_SIZE
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.actionButtonWrapper,
-          children: isOwnProfile ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            style: styles.actionButton,
-            className: "bg-background border-primary",
+          children: isOwnProfile ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+            variant: "secondary",
+            size: "small",
             onPress: () => navigate?.('ManageAccount'),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.actionButtonText,
-              className: "text-primary",
-              children: t('editProfile.title') || 'Edit Profile'
-            })
+            children: t('editProfile.title') || 'Edit Profile'
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_FollowButton.default, {
             userId: userId,
             onFollowChange: isFollowing => {
@@ -264,264 +237,192 @@ const ProfileScreen = ({
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.header,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        className: "px-screen-margin",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H2, {
           style: styles.displayName,
-          className: "text-foreground",
-          children: profile ? (0, _core.getAccountDisplayName)(profile, locale) : username || ''
-        }), profile?.username && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          className: "text-text",
+          children: displayName
+        }), profile?.username && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_typography.Text, {
           style: styles.subText,
-          className: "text-muted-foreground",
+          className: "text-text-secondary",
           children: ["@", profile.username]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
           style: styles.bio,
-          className: "text-foreground",
+          className: "text-text",
           children: profile?.bio || t('profile.noBio') || 'This user has no bio yet.'
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_settingsList.SettingsListGroup, {
+        children: [profile?.createdAt && /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+            name: "calendar-outline",
+            size: INFO_ICON_SIZE,
+            color: bloomTheme.colors.textSecondary
+          }),
+          title: t('profile.joinedOn', {
+            date: new Date(profile.createdAt).toLocaleDateString()
+          }) || `Joined ${new Date(profile.createdAt).toLocaleDateString()}`,
+          showChevron: false
+        }), profile?.location && /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+            name: "location-outline",
+            size: INFO_ICON_SIZE,
+            color: bloomTheme.colors.textSecondary
+          }),
+          title: profile.location,
+          showChevron: false
+        }), profile?.website && /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+            name: "globe-outline",
+            size: INFO_ICON_SIZE,
+            color: bloomTheme.colors.textSecondary
+          }),
+          title: profile.website,
+          showChevron: false
+        }), profile && 'company' in profile && typeof profile.company === 'string' && profile.company && /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+            name: "business-outline",
+            size: INFO_ICON_SIZE,
+            color: bloomTheme.colors.textSecondary
+          }),
+          title: profile.company,
+          showChevron: false
+        }), profile && 'jobTitle' in profile && typeof profile.jobTitle === 'string' && profile.jobTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+            name: "briefcase-outline",
+            size: INFO_ICON_SIZE,
+            color: bloomTheme.colors.textSecondary
+          }),
+          title: profile.jobTitle,
+          showChevron: false
+        }), profile && 'education' in profile && typeof profile.education === 'string' && profile.education && /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+            name: "school-outline",
+            size: INFO_ICON_SIZE,
+            color: bloomTheme.colors.textSecondary
+          }),
+          title: profile.education,
+          showChevron: false
+        }), profile && 'birthday' in profile && typeof profile.birthday === 'string' && profile.birthday && /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+            name: "gift-outline",
+            size: INFO_ICON_SIZE,
+            color: bloomTheme.colors.textSecondary
+          }),
+          title: t('profile.bornOn', {
+            date: new Date(profile.birthday).toLocaleDateString()
+          }) || `Born ${new Date(profile.birthday).toLocaleDateString()}`,
+          showChevron: false
+        }), links.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+            name: "link-outline",
+            size: INFO_ICON_SIZE,
+            color: bloomTheme.colors.textSecondary
+          }),
+          title: links[0].url,
+          value: links.length > 1 ? t('profile.more', {
+            count: links.length - 1
+          }) || `+ ${links.length - 1} more` : undefined,
+          onPress: () => navigate?.('UserLinks', {
+            userId,
+            links
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.statsRow,
+        className: "px-screen-margin",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.statItem,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+            style: styles.statAmount,
+            className: "text-text-inverse",
+            children: reputationTotal !== null && reputationTotal !== undefined ? reputationTotal : '--'
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+            style: styles.statLabel,
+            className: "text-text-secondary",
+            children: t('profile.reputation') || 'Reputation'
+          })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.infoGrid,
-          children: [profile?.createdAt && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.infoGridItem,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-              name: "calendar-outline",
-              size: 16,
-              color: bloomTheme.colors.textSecondary,
-              style: {
-                marginRight: 6
-              }
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.infoGridText,
-              className: "text-muted-foreground",
-              children: t('profile.joinedOn', {
-                date: new Date(profile.createdAt).toLocaleDateString()
-              }) || `Joined ${new Date(profile.createdAt).toLocaleDateString()}`
-            })]
-          }), profile?.location && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.infoGridItem,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-              name: "location-outline",
-              size: 16,
-              color: bloomTheme.colors.textSecondary,
-              style: {
-                marginRight: 6
-              }
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.infoGridText,
-              className: "text-muted-foreground",
-              numberOfLines: 1,
-              children: profile.location
-            })]
-          }), profile?.website && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.infoGridItem,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-              name: "globe-outline",
-              size: 16,
-              color: bloomTheme.colors.textSecondary,
-              style: {
-                marginRight: 6
-              }
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.infoGridText,
-              className: "text-muted-foreground",
-              numberOfLines: 1,
-              children: profile.website
-            })]
-          }), profile && 'company' in profile && typeof profile.company === 'string' && profile.company && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.infoGridItem,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-              name: "business-outline",
-              size: 16,
-              color: bloomTheme.colors.textSecondary,
-              style: {
-                marginRight: 6
-              }
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.infoGridText,
-              className: "text-muted-foreground",
-              numberOfLines: 1,
-              children: profile.company
-            })]
-          }), profile && 'jobTitle' in profile && typeof profile.jobTitle === 'string' && profile.jobTitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.infoGridItem,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-              name: "briefcase-outline",
-              size: 16,
-              color: bloomTheme.colors.textSecondary,
-              style: {
-                marginRight: 6
-              }
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.infoGridText,
-              className: "text-muted-foreground",
-              numberOfLines: 1,
-              children: profile.jobTitle
-            })]
-          }), profile && 'education' in profile && typeof profile.education === 'string' && profile.education && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.infoGridItem,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-              name: "school-outline",
-              size: 16,
-              color: bloomTheme.colors.textSecondary,
-              style: {
-                marginRight: 6
-              }
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.infoGridText,
-              className: "text-muted-foreground",
-              numberOfLines: 1,
-              children: profile.education
-            })]
-          }), profile && 'birthday' in profile && typeof profile.birthday === 'string' && profile.birthday && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.infoGridItem,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-              name: "gift-outline",
-              size: 16,
-              color: bloomTheme.colors.textSecondary,
-              style: {
-                marginRight: 6
-              }
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.infoGridText,
-              className: "text-muted-foreground",
-              children: t('profile.bornOn', {
-                date: new Date(profile.birthday).toLocaleDateString()
-              }) || `Born ${new Date(profile.birthday).toLocaleDateString()}`
-            })]
-          }), links.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-            style: styles.infoGridItem,
-            onPress: () => navigate?.('UserLinks', {
-              userId,
-              links
-            }),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-              name: "link-outline",
-              size: 16,
-              color: bloomTheme.colors.textSecondary,
-              style: {
-                marginRight: 6
-              }
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.infoGridText,
-              className: "text-muted-foreground",
-              numberOfLines: 1,
-              children: links[0].url
-            }), links.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.linksMore,
-              className: "text-muted-foreground",
-              children: t('profile.more', {
-                count: links.length - 1
-              }) || `+ ${links.length - 1} more`
-            })]
+          style: styles.statItem,
+          children: [isLoadingCounts ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+            size: "small",
+            color: bloomTheme.colors.text
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+            style: styles.statAmount,
+            className: "text-text",
+            children: followerCount !== null ? followerCount : '--'
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+            style: styles.statLabel,
+            className: "text-text-secondary",
+            children: t('profile.followers') || 'Followers'
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.divider,
-          className: "bg-border"
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.statsRow,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.statItem,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.statAmount,
-              className: "text-primary",
-              children: reputationTotal !== null && reputationTotal !== undefined ? reputationTotal : '--'
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.statLabel,
-              className: "text-muted-foreground",
-              children: t('profile.reputation') || 'Reputation'
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.statItem,
-            children: [isLoadingCounts ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-              size: "small",
-              color: bloomTheme.colors.text
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.statAmount,
-              className: "text-foreground",
-              children: followerCount !== null ? followerCount : '--'
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.statLabel,
-              className: "text-muted-foreground",
-              children: t('profile.followers') || 'Followers'
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.statItem,
-            children: [isLoadingCounts ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-              size: "small",
-              color: bloomTheme.colors.text
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.statAmount,
-              className: "text-foreground",
-              children: followingCount !== null ? followingCount : '--'
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.statLabel,
-              className: "text-muted-foreground",
-              children: t('profile.following') || 'Following'
-            })]
+          style: styles.statItem,
+          children: [isLoadingCounts ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+            size: "small",
+            color: bloomTheme.colors.text
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+            style: styles.statAmount,
+            className: "text-text",
+            children: followingCount !== null ? followingCount : '--'
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+            style: styles.statLabel,
+            className: "text-text-secondary",
+            children: t('profile.following') || 'Following'
           })]
         })]
       })]
     })
   });
 };
-const createStyles = () => _reactNative.StyleSheet.create({
+
+// Layout-only styles: flex, dimensions, and the measured banner/avatar overlap
+// that no token class can express. Colors, spacing, radius, and typography roles
+// live on Bloom components + NativeWind token classes.
+const styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1
   },
+  flex: {
+    flex: 1
+  },
+  centerContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
   scrollContainer: {
     alignItems: 'stretch',
     paddingBottom: 40
   },
   bannerContainer: {
-    height: 160,
+    height: BANNER_HEIGHT,
     position: 'relative',
     overflow: 'hidden'
   },
-  bannerImage: {
-    flex: 1
-  },
   avatarRow: {
     flexDirection: 'row',
     alignItems: 'flex-end',
-    marginTop: -56,
-    paddingHorizontal: 20,
+    marginTop: AVATAR_OVERLAP,
     justifyContent: 'space-between',
     zIndex: 2
   },
   avatarWrapper: {
     borderWidth: 5,
-    borderRadius: 64,
     overflow: 'hidden'
   },
   actionButtonWrapper: {
     flex: 1,
     alignItems: 'flex-end',
-    justifyContent: 'flex-end'
-  },
-  actionButton: {
-    borderWidth: 1,
-    borderRadius: 24,
-    paddingVertical: 7,
-    paddingHorizontal: 22,
-    marginBottom: 8,
-    elevation: 2,
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowOpacity: 0.08,
-    shadowRadius: 2
-  },
-  actionButtonText: {
-    fontWeight: 'bold',
-    fontSize: 16
+    justifyContent: 'flex-end',
+    paddingBottom: 8
   },
   header: {
     alignItems: 'flex-start',
     width: '100%',
-    paddingHorizontal: 20
+    marginTop: 10
   },
   displayName: {
     fontSize: 24,
-    fontWeight: 'bold',
-    marginTop: 10,
     marginBottom: 2,
     letterSpacing: 0.1
   },
@@ -532,40 +433,13 @@ const createStyles = () => _reactNative.StyleSheet.create({
   bio: {
     fontSize: 16,
     marginTop: 10,
-    marginBottom: 10,
     lineHeight: 22
   },
-  infoGrid: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 10,
-    flexWrap: 'wrap'
-  },
-  infoGridItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginRight: 24,
-    marginBottom: 4
-  },
-  infoGridText: {
-    fontSize: 15
-  },
-  divider: {
-    height: 1,
-    width: '100%',
-    marginVertical: 14
-  },
-  linksMore: {
-    fontSize: 15,
-    marginLeft: 4
-  },
   statsRow: {
     width: '100%',
-    flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
-    marginTop: 6,
-    marginBottom: 2,
+    marginTop: 14,
     justifyContent: 'space-between'
   },
   statItem: {
@@ -585,41 +459,28 @@ const createStyles = () => _reactNative.StyleSheet.create({
     textAlign: 'center',
     letterSpacing: 0.2
   },
-  // Error handling styles
+  // Error state layout
   errorHeader: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderBottomWidth: 1
-  },
-  backButton: {
-    padding: 8,
-    marginRight: 16
+    gap: 16
   },
   errorTitle: {
-    fontSize: 20,
-    fontWeight: 'bold'
+    fontSize: 20
   },
   errorContent: {
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 32
-  },
-  errorIcon: {
-    marginBottom: 16
+    alignItems: 'center'
   },
   errorText: {
     fontSize: 18,
     fontWeight: '600',
-    textAlign: 'center',
-    marginBottom: 8
+    textAlign: 'center'
   },
   errorSubtext: {
     fontSize: 14,
-    textAlign: 'center',
-    opacity: 0.7
+    textAlign: 'center'
   }
 });
 var _default = exports.default = ProfileScreen;