@oxyhq/services 13.2.0 → 14.0.0

package/src/ui/components/AccountSwitcher.tsx

@@ -17,13 +17,11 @@ import { Ionicons } from '@expo/vector-icons';
 import { toast, useDialogControl, Dialog } from '@oxyhq/bloom';
 import { Divider } from '@oxyhq/bloom/divider';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { getAccountDisplayName, isDev, logger as loggerUtil } from '@oxyhq/core';
-import type { AccountNode } from '@oxyhq/core';
+import { isDev, logger as loggerUtil } from '@oxyhq/core';
 import Avatar from './Avatar';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
-import { buildAccountRows, type AccountRow } from './accountMenuRows';
-import { useDeviceAccounts } from '../hooks/useDeviceAccounts';
+import { useSwitchableAccounts, type SwitchableAccount } from '../hooks/useSwitchableAccounts';
 import type { AccountMenuAnchor } from './AccountMenu';
 
 const isWeb = Platform.OS === 'web';
@@ -50,18 +48,18 @@ export interface AccountSwitcherActions {
 }
 
 interface TreeEntry {
-    root: AccountNode;
-    children: AccountNode[];
+    root: SwitchableAccount;
+    children: SwitchableAccount[];
 }
 
 /**
- * Group flat account nodes into a 2-level tree (org → direct children). A node
- * whose parent is not in the set is treated as a root; any deeper node not
+ * Group flat account rows into a 2-level tree (org → direct children). A row
+ * whose parent is not in the set is treated as a root; any deeper row not
  * captured under a root is promoted to its own root row so nothing is hidden.
  */
-function toTree(nodes: AccountNode[]): TreeEntry[] {
+function toTree(nodes: SwitchableAccount[]): TreeEntry[] {
     const byId = new Map(nodes.map((node) => [node.accountId, node]));
-    const childrenOf = new Map<string, AccountNode[]>();
+    const childrenOf = new Map<string, SwitchableAccount[]>();
     for (const node of nodes) {
         if (node.parentAccountId && byId.has(node.parentAccountId)) {
             const arr = childrenOf.get(node.parentAccountId) ?? [];
@@ -91,14 +89,14 @@ function toTree(nodes: AccountNode[]): TreeEntry[] {
 /**
  * The presentational, chrome-agnostic body of the unified account switcher.
  *
- * Two levels, relationship-aware:
- *  - Section A — accounts signed in on THIS device (independent sign-ins). Tap
- *    to switch session; per-row sign-out; "Add another account".
- *  - Section B — the account GRAPH under the active sign-in: "Your accounts"
+ * Two levels, relationship-aware, both sourced from the single
+ * {@link useSwitchableAccounts} hook and switched through the SINGLE
+ * `switchToAccount(accountId)` path:
+ *  - Section A — accounts signed in on THIS device (`onDevice` rows). Tap to
+ *    switch; per-row sign-out; "Add another account".
+ *  - Section B — the account GRAPH not yet signed in here: "Your accounts"
  *    (self / owned) and "Shared with you" (member). 2-level tree (org →
- *    children), role badge, search, one-tap to act-as.
- *
- * Reads everything from `useOxy()` / `useDeviceAccounts()`.
+ *    children), role badge, search, one-tap to switch.
  */
 export const AccountSwitcherView: React.FC<AccountSwitcherActions> = ({
     onClose,
@@ -109,22 +107,16 @@ export const AccountSwitcherView: React.FC<AccountSwitcherActions> = ({
     onBeforeSessionChange,
 }) => {
     const {
-        activeSessionId,
-        switchSession,
         switchToAccount,
         removeSession,
         logout,
         logoutAll,
-        accounts,
-        user,
-        oxyServices,
     } = useOxy();
-    const { t, locale } = useI18n();
+    const { t } = useI18n();
     const { colors } = useTheme();
 
-    const { accounts: deviceAccounts } = useDeviceAccounts();
+    const { accounts } = useSwitchableAccounts();
 
-    const [busySessionId, setBusySessionId] = useState<string | null>(null);
     const [switchingAccountId, setSwitchingAccountId] = useState<string | null>(null);
     const [removingSessionId, setRemovingSessionId] = useState<string | null>(null);
     const [signingOut, setSigningOut] = useState(false);
@@ -134,65 +126,58 @@ export const AccountSwitcherView: React.FC<AccountSwitcherActions> = ({
     const signOutDialog = useDialogControl();
     const signOutAllDialog = useDialogControl();
 
-    const deviceRows = useMemo<AccountRow[]>(() => {
-        const built = buildAccountRows({ accounts: deviceAccounts });
-        const current = built.filter((row) => row.isActive);
-        const others = built.filter((row) => !row.isActive);
+    // Section A — accounts signed in on THIS device, current one first.
+    const deviceRows = useMemo<SwitchableAccount[]>(() => {
+        const onDevice = accounts.filter((account) => account.onDevice);
+        const current = onDevice.filter((account) => account.isCurrent);
+        const others = onDevice.filter((account) => !account.isCurrent);
         return [...current, ...others];
-    }, [deviceAccounts]);
-
-    const isSwitching = busySessionId !== null || switchingAccountId !== null;
-    const actionDisabled = isSwitching || signingOut || signingOutAll;
-
-    // Account ids that are already signed in as REAL device sessions. After a
-    // `switchToAccount` the target becomes a device session (and the personal
-    // account always is one), so it would otherwise appear BOTH as a device row
-    // (Section A) and a graph row (Section B). We dedupe by hiding such accounts
-    // from the graph — they show in Section A, where the active one is flagged
-    // current.
-    const deviceUserIds = useMemo<Set<string>>(
-        () => new Set(deviceAccounts.map((account) => account.user.id).filter((id): id is string => Boolean(id))),
-        [deviceAccounts],
+    }, [accounts]);
+
+    // Section B — linked graph accounts NOT already signed in on this device.
+    // (An account switched into becomes a device session, so it moves to Section
+    // A automatically — the unified hook already deduped it there.)
+    const graphAccounts = useMemo<SwitchableAccount[]>(
+        () => accounts.filter((account) => !account.onDevice),
+        [accounts],
     );
 
-    // --- Account graph (Section B) ---
-    // The switchable graph minus accounts that are already device sessions
-    // (deduped into Section A). This is the set Section B renders and searches.
-    const graphAccounts = useMemo<AccountNode[]>(
-        () => accounts.filter((node) => !deviceUserIds.has(node.accountId)),
-        [accounts, deviceUserIds],
-    );
+    const isSwitching = switchingAccountId !== null;
+    const actionDisabled = isSwitching || signingOut || signingOutAll;
 
-    const filtered = useMemo<AccountNode[]>(() => {
+    const filtered = useMemo<SwitchableAccount[]>(() => {
         const q = query.trim().toLowerCase();
         if (!q) return graphAccounts;
-        return graphAccounts.filter((node) => {
-            const name = getAccountDisplayName(node.account, locale).toLowerCase();
-            const username = (node.account?.username ?? '').toLowerCase();
+        return graphAccounts.filter((account) => {
+            const name = account.displayName.toLowerCase();
+            const username = (account.user?.username ?? '').toLowerCase();
             return name.includes(q) || username.includes(q);
         });
-    }, [graphAccounts, query, locale]);
+    }, [graphAccounts, query]);
 
     const yourAccounts = useMemo(
-        () => toTree(filtered.filter((node) => node.relationship !== 'member')),
+        () => toTree(filtered.filter((account) => account.relationship !== 'member')),
         [filtered],
     );
     const sharedAccounts = useMemo(
-        () => toTree(filtered.filter((node) => node.relationship === 'member')),
+        () => toTree(filtered.filter((account) => account.relationship === 'member')),
         [filtered],
     );
 
-    const handleSwitchDevice = useCallback(async (sessionId: string) => {
-        if (busySessionId) return;
-        // Tapping the already-active sign-in just closes — it IS the current account.
-        if (sessionId === activeSessionId) {
+    // The ONE uniform switch path. Device rows AND graph rows both switch by
+    // account id: `switchToAccount` reuses an existing device session (no mint)
+    // and mints a real session only on the FIRST entry into a graph account.
+    const handleSwitch = useCallback(async (account: SwitchableAccount) => {
+        if (switchingAccountId) return;
+        // Tapping the already-active account just closes — it IS the current one.
+        if (account.isCurrent) {
             onClose();
             return;
         }
-        setBusySessionId(sessionId);
+        setSwitchingAccountId(account.accountId);
         try {
             await onBeforeSessionChange?.();
-            await switchSession(sessionId);
+            await switchToAccount(account.accountId);
             toast.success(t('accountSwitcher.toasts.switchSuccess') || 'Switched account');
             onClose();
         } catch (error) {
@@ -201,12 +186,12 @@ export const AccountSwitcherView: React.FC<AccountSwitcherActions> = ({
             }
             toast.error(t('accountSwitcher.toasts.switchFailed') || 'Failed to switch account');
         } finally {
-            setBusySessionId(null);
+            setSwitchingAccountId(null);
         }
-    }, [activeSessionId, busySessionId, switchSession, t, onClose, onBeforeSessionChange]);
+    }, [switchingAccountId, switchToAccount, t, onClose, onBeforeSessionChange]);
 
     const handleRemoveDevice = useCallback(async (sessionId: string) => {
-        if (sessionId === activeSessionId || removingSessionId) return;
+        if (removingSessionId) return;
         setRemovingSessionId(sessionId);
         try {
             await removeSession(sessionId);
@@ -217,7 +202,7 @@ export const AccountSwitcherView: React.FC<AccountSwitcherActions> = ({
         } finally {
             setRemovingSessionId(null);
         }
-    }, [activeSessionId, removingSessionId, removeSession, t]);
+    }, [removingSessionId, removeSession, t]);
 
     const performSignOut = useCallback(async () => {
         if (signingOut) return;
@@ -251,57 +236,26 @@ export const AccountSwitcherView: React.FC<AccountSwitcherActions> = ({
         }
     }, [signingOutAll, logoutAll, t, onClose, onBeforeSessionChange]);
 
-    const handleSelectAccount = useCallback(async (node: AccountNode) => {
-        if (switchingAccountId) return;
-        // Already the active account → just close (it would also be deduped from
-        // the graph, but guard defensively).
-        if (node.accountId === user?.id) {
-            onClose();
-            return;
-        }
-        setSwitchingAccountId(node.accountId);
-        try {
-            await onBeforeSessionChange?.();
-            // Switching INTO a graph account is a REAL session switch — the whole
-            // app becomes that account (no delegation header).
-            await switchToAccount(node.accountId);
-            toast.success(t('accountSwitcher.toasts.switchSuccess') || 'Switched account');
-            onClose();
-        } catch (error) {
-            if (!isDev()) {
-                loggerUtil.warn('Switch account failed', { component: 'AccountSwitcher' }, error as unknown);
-            }
-            toast.error(t('accountSwitcher.toasts.switchFailed') || 'Failed to switch account');
-        } finally {
-            setSwitchingAccountId(null);
-        }
-    }, [switchingAccountId, user?.id, switchToAccount, t, onClose, onBeforeSessionChange]);
-
-    const renderAccountNode = useCallback((node: AccountNode, isChild: boolean) => {
-        const displayName = getAccountDisplayName(node.account, locale);
-        const username = node.account?.username ? `@${node.account.username}` : null;
-        // Current account = the active session's user. After a real-session
-        // switch `user` IS this account (such accounts are normally deduped out of
-        // the graph, but the check stays correct/defensive if one lingers).
-        const active = node.accountId === user?.id;
-        const isNodeSwitching = switchingAccountId === node.accountId;
-        const role = node.callerMembership?.role;
-        const avatarUri = node.account?.avatar
-            ? oxyServices.getFileDownloadUrl(node.account.avatar, 'thumb')
-            : undefined;
-        const permissions = node.callerMembership?.permissions ?? [];
-        const canManage = node.relationship !== 'member'
+    const renderAccountNode = useCallback((account: SwitchableAccount, isChild: boolean) => {
+        const displayName = account.displayName;
+        const secondary = account.email;
+        const active = account.isCurrent;
+        const isNodeSwitching = switchingAccountId === account.accountId;
+        const role = account.callerMembership?.role;
+        const avatarUri = account.avatarUrl;
+        const permissions = account.callerMembership?.permissions ?? [];
+        const canManage = account.relationship !== 'member'
             || permissions.includes('account:update')
             || permissions.includes('members:read');
-        const showSettings = node.relationship !== 'self' && !!onOpenAccountSettings && canManage;
+        const showSettings = account.relationship !== 'self' && !!onOpenAccountSettings && canManage;
 
         return (
             <TouchableOpacity
-                key={`node-${node.accountId}`}
+                key={`node-${account.accountId}`}
                 accessibilityRole="menuitem"
                 accessibilityLabel={displayName}
                 accessibilityState={{ selected: active }}
-                onPress={() => handleSelectAccount(node)}
+                onPress={() => handleSwitch(account)}
                 disabled={isSwitching}
                 activeOpacity={0.6}
                 style={[
@@ -325,9 +279,9 @@ export const AccountSwitcherView: React.FC<AccountSwitcherActions> = ({
                             </View>
                         ) : null}
                     </View>
-                    {username ? (
+                    {secondary ? (
                         <Text style={[styles.accountEmail, { color: colors.textSecondary }]} numberOfLines={1}>
-                            {username}
+                            {secondary}
                         </Text>
                     ) : null}
                 </View>
@@ -335,7 +289,7 @@ export const AccountSwitcherView: React.FC<AccountSwitcherActions> = ({
                     <TouchableOpacity
                         accessibilityRole="button"
                         accessibilityLabel={t('accounts.settings.title') || 'Account settings'}
-                        onPress={() => onOpenAccountSettings?.(node.accountId)}
+                        onPress={() => onOpenAccountSettings?.(account.accountId)}
                         hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
                         style={styles.settingsButton}
                     >
@@ -349,7 +303,7 @@ export const AccountSwitcherView: React.FC<AccountSwitcherActions> = ({
                 ) : null}
             </TouchableOpacity>
         );
-    }, [user?.id, switchingAccountId, isSwitching, colors, handleSelectAccount, locale, onOpenAccountSettings, oxyServices, t]);
+    }, [switchingAccountId, isSwitching, colors, handleSwitch, onOpenAccountSettings, t]);
 
     const renderTree = useCallback((entries: TreeEntry[]) => (
         entries.map((entry) => (
@@ -371,38 +325,39 @@ export const AccountSwitcherView: React.FC<AccountSwitcherActions> = ({
             <Text style={[styles.sectionLabel, { color: colors.textSecondary }]}>
                 {t('accountSwitcher.sections.thisDevice') || 'On this device'}
             </Text>
-            {deviceRows.map((row) => {
-                const isBusy = busySessionId === row.sessionId;
-                const isRemoving = removingSessionId === row.sessionId;
+            {deviceRows.map((account) => {
+                const sessionId = account.sessionId;
+                const isBusy = switchingAccountId === account.accountId;
+                const isRemoving = sessionId ? removingSessionId === sessionId : false;
                 // The active device session IS the current account — there is no
-                // separate acting-as concept; switching makes `user` that account.
-                const isCurrentAccount = row.isActive;
+                // separate acting-as concept; switching makes it the whole app.
+                const isCurrentAccount = account.isCurrent;
                 return (
                     <TouchableOpacity
-                        key={`device-${row.sessionId}`}
+                        key={`device-${account.accountId}`}
                         accessibilityRole="menuitem"
-                        accessibilityLabel={row.displayName}
+                        accessibilityLabel={account.displayName}
                         accessibilityState={{ selected: isCurrentAccount }}
-                        onPress={() => handleSwitchDevice(row.sessionId)}
+                        onPress={() => handleSwitch(account)}
                         disabled={isCurrentAccount || isBusy || isSwitching}
                         activeOpacity={0.6}
                         style={[
                             styles.accountRow,
                             isCurrentAccount && { backgroundColor: colors.primarySubtle },
-                            isSwitching && !row.isActive && styles.rowDisabled,
+                            isSwitching && !isCurrentAccount && styles.rowDisabled,
                         ]}
                     >
-                        <Avatar uri={row.avatarUri} name={row.displayName} size={row.isActive ? 40 : 32} />
+                        <Avatar uri={account.avatarUrl} name={account.displayName} size={isCurrentAccount ? 40 : 32} />
                         <View style={styles.accountInfo}>
                             <Text
-                                style={[styles.accountName, { color: colors.text }, row.isActive && styles.accountNameActive]}
+                                style={[styles.accountName, { color: colors.text }, isCurrentAccount && styles.accountNameActive]}
                                 numberOfLines={1}
                             >
-                                {row.displayName}
+                                {account.displayName}
                             </Text>
-                            {row.secondary ? (
+                            {account.email ? (
                                 <Text style={[styles.accountEmail, { color: colors.textSecondary }]} numberOfLines={1}>
-                                    {row.secondary}
+                                    {account.email}
                                 </Text>
                             ) : null}
                         </View>
@@ -412,21 +367,21 @@ export const AccountSwitcherView: React.FC<AccountSwitcherActions> = ({
                             <Ionicons name="checkmark" size={20} color={colors.primary} />
                         ) : isRemoving ? (
                             <ActivityIndicator color={colors.textSecondary} size="small" />
-                        ) : (
+                        ) : sessionId ? (
                             <TouchableOpacity
                                 accessibilityRole="button"
                                 accessibilityLabel={
-                                    t('accountMenu.signOutAccount', { name: row.displayName })
-                                    || `Sign out ${row.displayName}`
+                                    t('accountMenu.signOutAccount', { name: account.displayName })
+                                    || `Sign out ${account.displayName}`
                                 }
-                                onPress={() => handleRemoveDevice(row.sessionId)}
+                                onPress={() => handleRemoveDevice(sessionId)}
                                 disabled={isSwitching || removingSessionId !== null}
                                 hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
                                 style={styles.settingsButton}
                             >
                                 <Ionicons name="log-out-outline" size={18} color={colors.textSecondary} />
                             </TouchableOpacity>
-                        )}
+                        ) : null}
                     </TouchableOpacity>
                 );
             })}
@@ -594,7 +549,6 @@ export interface AccountSwitcherProps extends AccountSwitcherActions {
 /**
  * Unified account switcher presented as a popover (web) / bottom-sheet style
  * modal (native). The canonical entry point opened by {@link AccountMenuButton}.
- * Supersedes `AccountMenu` (which remains exported as the device-only switcher).
  */
 const AccountSwitcher: React.FC<AccountSwitcherProps> = ({ open, anchor, ...actions }) => {
     const { t } = useI18n();

package/src/ui/components/ProfileButton.tsx

@@ -3,6 +3,7 @@ import { useCallback, useRef, useState } from 'react';
 import {
     View,
     Pressable,
+    StyleSheet,
     Platform,
     type StyleProp,
     type ViewStyle,
@@ -85,7 +86,11 @@ export interface ProfileButtonProps {
      * Native (bottom-sheet) is unaffected — this only influences the web popover.
      */
     placement?: 'up' | 'down' | 'auto';
-    /** Extra className applied to the outer trigger. */
+    /**
+     * Extra className applied to the outer trigger. Kept for NativeWind consumers
+     * that layer utility classes on top; the component's own layout is driven by
+     * `StyleSheet` so it renders correctly with or without NativeWind.
+     */
     className?: string;
     /** Extra style applied to the outer trigger. */
     style?: StyleProp<ViewStyle>;
@@ -104,6 +109,12 @@ export interface ProfileButtonProps {
  *    against the measured trigger, or as a bottom sheet (native).
  *  - **Signed out**: a "Sign in" row that calls `useAuth().signIn()`.
  *
+ * Styling uses react-native `StyleSheet` + the Bloom theme (via `useTheme`) so
+ * the layout renders identically in EVERY consumer — including apps that do not
+ * use NativeWind (e.g. the accounts app). Only the web hover animation keeps
+ * dynamic inline `style` (the CSS transition/transform values), which is what
+ * the `react-native-web-style.d.ts` augmentation exists for.
+ *
  * All display strings resolve through `@oxyhq/core`'s
  * `getAccountDisplayName` / `getAccountFallbackHandle` — no hand-rolled name
  * fallbacks. Avatars pass the bare file id as `source` + `variant="thumb"`, so
@@ -208,8 +219,14 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
                 importantForAccessibility="no-hide-descendants"
             >
                 <View
-                    className="rounded-full bg-secondary"
-                    style={{ width: resolvedAvatarSize, height: resolvedAvatarSize }}
+                    style={[
+                        styles.skeletonCircle,
+                        {
+                            width: resolvedAvatarSize,
+                            height: resolvedAvatarSize,
+                            backgroundColor: colors.backgroundSecondary,
+                        },
+                    ]}
                 />
             </View>
         );
@@ -220,15 +237,21 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
         const signInLabel = t('common.actions.signIn') || 'Sign in';
         return (
             <Pressable
-                className={`${expanded ? 'w-full ' : ''}flex-row items-center gap-3 rounded-full px-2 py-2 ${className ?? ''}`}
-                style={style}
+                className={className}
+                style={[styles.row, expanded && styles.rowExpanded, style]}
                 onPress={() => { void signIn(); }}
                 accessibilityRole="button"
                 accessibilityLabel={signInLabel}
             >
                 <View
-                    className="items-center justify-center rounded-full bg-secondary"
-                    style={{ width: resolvedAvatarSize, height: resolvedAvatarSize }}
+                    style={[
+                        styles.avatarBadge,
+                        {
+                            width: resolvedAvatarSize,
+                            height: resolvedAvatarSize,
+                            backgroundColor: colors.backgroundSecondary,
+                        },
+                    ]}
                 >
                     <MaterialCommunityIcons
                         name="login"
@@ -238,7 +261,7 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
                 </View>
                 {expanded ? (
                     <Text
-                        className="flex-1 font-semibold text-foreground"
+                        style={[styles.signInLabel, { color: colors.text }]}
                         numberOfLines={1}
                     >
                         {signInLabel}
@@ -296,8 +319,7 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
             <View className={className} style={style}>
                 <Pressable
                     ref={triggerRef}
-                    className="rounded-full"
-                    style={collapsedBgStyle}
+                    style={[styles.collapsedTrigger, collapsedBgStyle]}
                     onPress={openMenu}
                     accessibilityRole="button"
                     accessibilityLabel={accountLabel}
@@ -329,7 +351,7 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
     // Slide the shrunk avatar left so its visual left edge stays put as it
     // contracts. The avatar loses `size * (1 - scale)` of width; half of that
     // (the left half, since scale is centered) is the offset, plus the row's
-    // left padding (px-2 = 8px) so it hugs the row edge like Bluesky's.
+    // left padding (8px) so it hugs the row edge like Bluesky's.
     const activeAvatarTranslateX =
         -(resolvedAvatarSize * (1 - ACTIVE_AVATAR_SCALE)) / 2 - 8;
 
@@ -378,23 +400,28 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
         : undefined;
 
     return (
-        <View className={`w-full ${className ?? ''}`} style={style}>
+        <View className={className} style={[styles.fullWidth, style]}>
             <Pressable
                 ref={triggerRef}
-                className="w-full flex-row items-center gap-3 rounded-full px-2 py-2"
-                style={rowStyle}
+                style={[styles.row, styles.rowExpanded, rowStyle]}
                 onPress={openMenu}
                 accessibilityRole="button"
                 accessibilityLabel={accountLabel}
                 {...webInteractionProps}
             >
                 <View style={avatarWrapperStyle}>{avatarNode}</View>
-                <View className="min-w-0 flex-1" style={identityStyle}>
-                    <Text className="font-bold text-foreground" numberOfLines={1}>
+                <View style={[styles.identity, identityStyle]}>
+                    <Text
+                        style={[styles.displayName, { color: colors.text }]}
+                        numberOfLines={1}
+                    >
                         {displayName}
                     </Text>
                     {handleLine ? (
-                        <Text className="text-xs text-muted-foreground" numberOfLines={1}>
+                        <Text
+                            style={[styles.handle, { color: colors.textSecondary }]}
+                            numberOfLines={1}
+                        >
                             {handleLine}
                         </Text>
                     ) : null}
@@ -420,4 +447,55 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
     );
 };
 
+const styles = StyleSheet.create({
+    fullWidth: {
+        width: '100%',
+    },
+    // Neutral skeleton / signed-out avatar circle (`rounded-full`).
+    skeletonCircle: {
+        borderRadius: 9999,
+    },
+    // Shared trigger row (`flex-row items-center gap-3 rounded-full px-2 py-2`).
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        borderRadius: 9999,
+        paddingHorizontal: 8,
+        paddingVertical: 8,
+    },
+    // `w-full` on the expanded row + its signed-out variant.
+    rowExpanded: {
+        width: '100%',
+    },
+    // Signed-out login badge (`items-center justify-center rounded-full`).
+    avatarBadge: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 9999,
+    },
+    // Signed-out label (`flex-1 font-semibold`).
+    signInLabel: {
+        flex: 1,
+        fontWeight: '600',
+    },
+    // Collapsed avatar-only trigger (`rounded-full`).
+    collapsedTrigger: {
+        borderRadius: 9999,
+    },
+    // Identity block (`min-w-0 flex-1`).
+    identity: {
+        flex: 1,
+        minWidth: 0,
+    },
+    // Display name (`font-bold`).
+    displayName: {
+        fontWeight: '700',
+    },
+    // Handle line (`text-xs`).
+    handle: {
+        fontSize: 12,
+    },
+});
+
 export default ProfileButton;