@oxyhq/services 13.1.7 → 13.3.0

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,
@@ -73,7 +74,23 @@ export interface ProfileButtonProps {
     onNavigateProfile?: () => void;
     /** Called before the active identity changes so apps can clear scoped state. */
     onBeforeSessionChange?: () => void | Promise<void>;
-    /** Extra className applied to the outer trigger. */
+    /**
+     * Web-only popover direction relative to the trigger:
+     *  - `'up'` (default): the menu opens UPWARD, for a trigger placed at the
+     *    BOTTOM of a sidebar (the footer pattern). Pixel-identical to prior
+     *    behavior.
+     *  - `'down'`: the menu opens DOWNWARD, for a trigger placed at the TOP of a
+     *    sidebar (the accounts app pattern).
+     *  - `'auto'`: opens downward when there is more room below the trigger than
+     *    above, otherwise upward.
+     * Native (bottom-sheet) is unaffected — this only influences the web popover.
+     */
+    placement?: 'up' | 'down' | 'auto';
+    /**
+     * 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>;
@@ -92,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
@@ -104,6 +127,7 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
     onAddAccount,
     onNavigateProfile,
     onBeforeSessionChange,
+    placement = 'up',
     className,
     style,
 }) => {
@@ -143,7 +167,7 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
             setMenuOpen(true);
             return;
         }
-        node.measure((_x, _y, _w, _h, pageX, pageY) => {
+        node.measure((_x, _y, _w, height, pageX, pageY) => {
             if (typeof pageX !== 'number' || typeof pageY !== 'number') {
                 setAnchor(null);
             } else {
@@ -153,17 +177,33 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
                     window.innerWidth - MENU_WIDTH - VIEWPORT_GUTTER,
                 );
                 const left = Math.min(Math.max(VIEWPORT_GUTTER, pageX), maxLeft);
-                // Anchor the panel's BOTTOM edge just above the trigger top so
-                // the menu opens upward from this footer button.
-                const bottom = Math.max(
-                    VIEWPORT_GUTTER,
-                    window.innerHeight - pageY + VIEWPORT_GUTTER,
-                );
-                setAnchor({ left, bottom });
+                // Bottom edge of the trigger in page coordinates. `height` is a
+                // number for host views; guard defensively for non-web shims.
+                const triggerBottom = pageY + (typeof height === 'number' ? height : 0);
+                // Resolve `'auto'` by comparing the room below the trigger with
+                // the room above it; pick whichever direction has more space.
+                const openDown =
+                    placement === 'down' ||
+                    (placement === 'auto' &&
+                        window.innerHeight - triggerBottom > pageY);
+                if (openDown) {
+                    // Anchor the panel's TOP edge just below the trigger bottom so
+                    // the menu opens downward from a top-of-sidebar trigger.
+                    const top = Math.max(VIEWPORT_GUTTER, triggerBottom + VIEWPORT_GUTTER);
+                    setAnchor({ left, top });
+                } else {
+                    // Anchor the panel's BOTTOM edge just above the trigger top so
+                    // the menu opens upward from this footer button.
+                    const bottom = Math.max(
+                        VIEWPORT_GUTTER,
+                        window.innerHeight - pageY + VIEWPORT_GUTTER,
+                    );
+                    setAnchor({ left, bottom });
+                }
             }
             setMenuOpen(true);
         });
-    }, []);
+    }, [placement]);
 
     const handleClose = useCallback(() => {
         setMenuOpen(false);
@@ -179,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>
         );
@@ -191,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"
@@ -209,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}
@@ -267,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}
@@ -300,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;
 
@@ -349,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}
@@ -391,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;

package/src/ui/components/ProfileMenu.tsx

@@ -6,6 +6,7 @@ import {
     Modal,
     ScrollView,
     ActivityIndicator,
+    StyleSheet,
     Platform,
     type ViewStyle,
 } from 'react-native';
@@ -26,15 +27,20 @@ const isWeb = Platform.OS === 'web';
 const MENU_WIDTH = 300;
 
 /**
- * Web-only anchor. `ProfileButton` measures its trigger and anchors the panel's
- * BOTTOM-LEFT corner so the menu opens UPWARD from the sidebar footer. Native
- * ignores the anchor and docks the panel to the bottom as a sheet.
+ * Web-only anchor. `ProfileButton` measures its trigger and anchors the panel to
+ * one corner so the menu opens either UPWARD (footer trigger) or DOWNWARD (a
+ * trigger at the top of a sidebar). Exactly ONE vertical edge is pinned:
+ *  - `bottom` set → the panel's BOTTOM edge is anchored, so it opens UPWARD.
+ *  - `top` set → the panel's TOP edge is anchored, so it opens DOWNWARD.
+ * Native ignores the anchor and docks the panel to the bottom as a sheet.
  */
 export interface ProfileMenuAnchor {
     /** Distance from the viewport left, for the panel's LEFT edge. */
     left: number;
     /** Distance from the viewport bottom, for the panel's BOTTOM edge (opens upward). */
-    bottom: number;
+    bottom?: number;
+    /** Distance from the viewport top, for the panel's TOP edge (opens downward). */
+    top?: number;
 }
 
 export interface ProfileMenuProps {
@@ -56,8 +62,9 @@ export interface ProfileMenuProps {
 type ProfileMenuContentProps = Omit<ProfileMenuProps, 'open'>;
 
 /**
- * Clean device-account switcher, modeled on the inbox `AccountMenu` but written
- * fresh with NativeWind classNames + Bloom primitives. Lists every account
+ * Clean device-account switcher, modeled on the inbox `AccountMenu` and styled
+ * with react-native `StyleSheet` + the Bloom theme (via `useTheme`) so it
+ * renders in EVERY consumer regardless of NativeWind. Lists every account
  * signed in on this device (from {@link useDeviceAccounts}); tapping a row
  * switches, and each inactive row carries a sign-out icon. Below the list:
  * Add account, Manage account, optional View profile, and Sign out of all.
@@ -170,8 +177,8 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
     return (
         <>
             <ScrollView
-                className="grow-0"
-                contentContainerClassName="py-1"
+                style={styles.scroll}
+                contentContainerStyle={styles.scrollContent}
                 showsVerticalScrollIndicator={false}
             >
                 {/* 1) Device accounts — active first (checkmark), others switchable. */}
@@ -187,9 +194,11 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
                             accessibilityState={{ selected: isActive }}
                             onPress={() => handleSwitch(account.sessionId)}
                             disabled={isActive || isBusy || isSwitching}
-                            className={`flex-row items-center gap-3 px-4 py-2.5 ${
-                                isActive ? 'bg-secondary' : ''
-                            } ${isSwitching && !isActive ? 'opacity-40' : ''}`}
+                            style={[
+                                styles.accountRow,
+                                isActive && { backgroundColor: colors.backgroundSecondary },
+                                isSwitching && !isActive && styles.rowDimmed,
+                            ]}
                         >
                             <Avatar
                                 source={account.user.avatar ?? undefined}
@@ -198,16 +207,19 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
                                 name={account.displayName}
                                 size={isActive ? 40 : 32}
                             />
-                            <View className="min-w-0 flex-1">
+                            <View style={styles.accountInfo}>
                                 <Text
-                                    className={`text-foreground ${isActive ? 'font-semibold' : 'font-medium'}`}
+                                    style={[
+                                        isActive ? styles.accountNameActive : styles.accountName,
+                                        { color: colors.text },
+                                    ]}
                                     numberOfLines={1}
                                 >
                                     {account.displayName}
                                 </Text>
                                 {account.email ? (
                                     <Text
-                                        className="text-xs text-muted-foreground"
+                                        style={[styles.accountEmail, { color: colors.textSecondary }]}
                                         numberOfLines={1}
                                     >
                                         {account.email}
@@ -230,7 +242,7 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
                                     onPress={() => handleRemove(account.sessionId)}
                                     disabled={actionDisabled}
                                     hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-                                    className="h-7 w-7 items-center justify-center rounded-full opacity-60"
+                                    style={styles.rowSignOutButton}
                                 >
                                     <MaterialCommunityIcons
                                         name="logout"
@@ -245,9 +257,9 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
 
                 {/* 2) Switching indicator. */}
                 {isSwitching ? (
-                    <View className="flex-row items-center justify-center gap-2 py-2">
+                    <View style={styles.switchingRow}>
                         <ActivityIndicator color={colors.textSecondary} size="small" />
-                        <Text className="text-xs font-medium text-muted-foreground">
+                        <Text style={[styles.switchingText, { color: colors.textSecondary }]}>
                             {t('accountMenu.switching') || 'Switching account…'}
                         </Text>
                     </View>
@@ -259,6 +271,7 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
                 <ActionRow
                     icon="account-plus-outline"
                     iconColor={colors.icon}
+                    textColor={colors.text}
                     label={t('accountMenu.addAnother') || 'Add another account'}
                     disabled={actionDisabled}
                     onPress={() => {
@@ -271,6 +284,7 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
                 <ActionRow
                     icon="cog-outline"
                     iconColor={colors.icon}
+                    textColor={colors.text}
                     label={t('accountMenu.manage') || 'Manage your Oxy Account'}
                     disabled={actionDisabled}
                     onPress={() => {
@@ -284,6 +298,7 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
                     <ActionRow
                         icon="account-outline"
                         iconColor={colors.icon}
+                        textColor={colors.text}
                         label={t('accountMenu.viewProfile') || 'View profile'}
                         disabled={actionDisabled}
                         onPress={() => {
@@ -300,14 +315,14 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
                     accessibilityLabel={t('accountMenu.signOutAll') || 'Sign out of all accounts'}
                     onPress={() => signOutAllDialog.open()}
                     disabled={actionDisabled}
-                    className={`flex-row items-center gap-3 px-4 py-3 ${actionDisabled ? 'opacity-40' : ''}`}
+                    style={[styles.signOutAllRow, actionDisabled && styles.rowDimmed]}
                 >
                     {signingOutAll ? (
                         <ActivityIndicator color={colors.error} size="small" />
                     ) : (
                         <MaterialCommunityIcons name="logout" size={18} color={colors.error} />
                     )}
-                    <Text className="font-medium" style={{ color: colors.error }}>
+                    <Text style={[styles.actionText, { color: colors.error }]}>
                         {t('accountMenu.signOutAll') || 'Sign out of all accounts'}
                     </Text>
                 </Pressable>
@@ -352,16 +367,21 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({
     onBeforeSessionChange,
 }) => {
     const { t } = useI18n();
+    const { colors } = useTheme();
 
-    // Web: anchor the panel's bottom-left corner to the measured trigger, falling
-    // back to a bottom-left placement when no anchor was captured. Native ignores
-    // this (the panel docks to the bottom via the overlay's flex-end).
+    // Web: anchor the panel to the measured trigger. When the anchor pins `top`
+    // the panel opens DOWNWARD from the trigger; otherwise it pins `bottom` and
+    // opens UPWARD (the default footer behavior). With no anchor captured, fall
+    // back to a bottom-left placement. Native ignores this (the panel docks to
+    // the bottom via the overlay's flex-end).
     const panelAnchorStyle: ViewStyle | undefined = isWeb
         ? {
             position: 'absolute',
             width: MENU_WIDTH,
             left: anchor?.left ?? 8,
-            bottom: anchor?.bottom ?? 8,
+            ...(typeof anchor?.top === 'number'
+                ? { top: anchor.top }
+                : { bottom: anchor?.bottom ?? 8 }),
         }
         : undefined;
 
@@ -376,19 +396,20 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({
                 accessibilityRole="button"
                 accessibilityLabel={t('common.actions.close') || 'Close'}
                 onPress={onClose}
-                className={isWeb ? 'flex-1 relative' : 'flex-1 justify-end'}
-                style={!isWeb ? styles.nativeScrim : undefined}
+                style={isWeb ? styles.webOverlay : styles.nativeOverlay}
             >
                 <Pressable
                     // Swallow taps inside the panel so they never reach the overlay's
                     // outside-tap-to-close handler.
                     onPress={() => undefined}
-                    className={
-                        isWeb
-                            ? 'overflow-hidden rounded-2xl border border-border bg-background'
-                            : 'overflow-hidden rounded-t-3xl bg-background pb-3'
-                    }
-                    style={[panelAnchorStyle, { maxHeight: '85%' }, styles.shadow]}
+                    style={[
+                        isWeb ? styles.panelWeb : styles.panelNative,
+                        { backgroundColor: colors.background },
+                        isWeb && { borderColor: colors.border },
+                        panelAnchorStyle,
+                        styles.panelBounds,
+                        styles.shadow,
+                    ]}
                     accessibilityRole="menu"
                     accessibilityLabel={t('accountMenu.label') || 'Account menu'}
                 >
@@ -412,36 +433,136 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({
 const ActionRow: React.FC<{
     icon: React.ComponentProps<typeof MaterialCommunityIcons>['name'];
     iconColor: string;
+    textColor: string;
     label: string;
     disabled: boolean;
     onPress: () => void;
-}> = ({ icon, iconColor, label, disabled, onPress }) => (
+}> = ({ icon, iconColor, textColor, label, disabled, onPress }) => (
     <Pressable
         accessibilityRole="menuitem"
         accessibilityLabel={label}
         onPress={onPress}
         disabled={disabled}
-        className={`flex-row items-center gap-3 px-4 py-3 ${disabled ? 'opacity-40' : ''}`}
+        style={[styles.actionRow, disabled && styles.rowDimmed]}
     >
         <MaterialCommunityIcons name={icon} size={20} color={iconColor} />
-        <Text className="font-medium text-foreground">{label}</Text>
+        <Text style={[styles.actionText, { color: textColor }]}>{label}</Text>
     </Pressable>
 );
 
-// The panel's drop shadow and the native scrim are the only values with no
-// NativeWind class equivalent in this package (dynamic elevation + rgba scrim),
-// so they stay as small inline objects rather than raw class-replaceable styles.
-const styles = {
+const styles = StyleSheet.create({
+    // Overlay (`flex-1 relative` web / `flex-1 justify-end` + scrim native).
+    webOverlay: {
+        flex: 1,
+        position: 'relative',
+    },
+    nativeOverlay: {
+        flex: 1,
+        justifyContent: 'flex-end',
+        backgroundColor: 'rgba(0,0,0,0.32)',
+    },
+    // Panel shell — web popover (`overflow-hidden rounded-2xl border`).
+    panelWeb: {
+        overflow: 'hidden',
+        borderRadius: 16,
+        borderWidth: 1,
+    },
+    // Panel shell — native bottom sheet (`overflow-hidden rounded-t-3xl pb-3`).
+    panelNative: {
+        overflow: 'hidden',
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+        paddingBottom: 12,
+    },
+    // Shared `maxHeight: '85%'` cap applied to both panel variants.
+    panelBounds: {
+        maxHeight: '85%',
+    },
+    // The panel's drop shadow — dynamic elevation with no class equivalent.
     shadow: {
         shadowColor: '#000',
         shadowOpacity: 0.18,
         shadowRadius: 24,
         shadowOffset: { width: 0, height: 8 },
         elevation: 12,
-    } satisfies ViewStyle,
-    nativeScrim: {
-        backgroundColor: 'rgba(0,0,0,0.32)',
-    } satisfies ViewStyle,
-};
+    },
+    // Scroll region (`grow-0` + `py-1` content).
+    scroll: {
+        flexGrow: 0,
+    },
+    scrollContent: {
+        paddingVertical: 4,
+    },
+    // Account row (`flex-row items-center gap-3 px-4 py-2.5`).
+    accountRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        paddingHorizontal: 16,
+        paddingVertical: 10,
+    },
+    // `opacity-40` dim applied to disabled / non-active-while-switching rows.
+    rowDimmed: {
+        opacity: 0.4,
+    },
+    // Identity block (`min-w-0 flex-1`).
+    accountInfo: {
+        flex: 1,
+        minWidth: 0,
+    },
+    // Inactive account name (`font-medium`).
+    accountName: {
+        fontWeight: '500',
+    },
+    // Active account name (`font-semibold`).
+    accountNameActive: {
+        fontWeight: '600',
+    },
+    // Secondary email line (`text-xs`).
+    accountEmail: {
+        fontSize: 12,
+    },
+    // Per-row sign-out button (`h-7 w-7 items-center justify-center rounded-full opacity-60`).
+    rowSignOutButton: {
+        width: 28,
+        height: 28,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 9999,
+        opacity: 0.6,
+    },
+    // Switching indicator (`flex-row items-center justify-center gap-2 py-2`).
+    switchingRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+        paddingVertical: 8,
+    },
+    switchingText: {
+        fontSize: 12,
+        fontWeight: '500',
+    },
+    // Bottom action rows (`flex-row items-center gap-3 px-4 py-3`).
+    actionRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+    },
+    // Sign-out-of-all row shares the action-row geometry.
+    signOutAllRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+    },
+    // Action / sign-out label (`font-medium`).
+    actionText: {
+        fontWeight: '500',
+    },
+});
 
 export default ProfileMenu;