@oxyhq/services 13.2.0 → 13.3.0

package/lib/typescript/commonjs/ui/components/ProfileButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileButton.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/ProfileButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAIH,KAAK,SAAS,EACd,KAAK,SAAS,EACjB,MAAM,cAAc,CAAC;AAiDtB,MAAM,WAAW,kBAAkB;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2DAA2D;IAC3D,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,sEAAsE;IACtE,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,gFAAgF;IAChF,qBAAqB,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACnD;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IACnC,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqT/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ProfileButton.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/ProfileButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAKH,KAAK,SAAS,EACd,KAAK,SAAS,EACjB,MAAM,cAAc,CAAC;AAiDtB,MAAM,WAAW,kBAAkB;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2DAA2D;IAC3D,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,sEAAsE;IACtE,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,gFAAgF;IAChF,qBAAqB,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACnD;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IACnC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqU/C,CAAC;AAqDF,eAAe,aAAa,CAAC"}

package/lib/typescript/commonjs/ui/components/ProfileMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileMenu.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/ProfileMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA2B/B;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAC9B,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,qFAAqF;IACrF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iFAAiF;IACjF,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yEAAyE;IACzE,MAAM,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAClC,2DAA2D;IAC3D,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,sEAAsE;IACtE,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,gFAAgF;IAChF,qBAAqB,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACtD;AAwRD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoE3C,CAAC;AAsCF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ProfileMenu.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/ProfileMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4B/B;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAC9B,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,qFAAqF;IACrF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iFAAiF;IACjF,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yEAAyE;IACzE,MAAM,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAClC,2DAA2D;IAC3D,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,sEAAsE;IACtE,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,gFAAgF;IAChF,qBAAqB,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACtD;AAiSD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsE3C,CAAC;AA0IF,eAAe,WAAW,CAAC"}

package/lib/typescript/module/ui/components/ProfileButton.d.ts

@@ -30,7 +30,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>;
@@ -48,6 +52,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

package/lib/typescript/module/ui/components/ProfileButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileButton.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/ProfileButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAIH,KAAK,SAAS,EACd,KAAK,SAAS,EACjB,MAAM,cAAc,CAAC;AAiDtB,MAAM,WAAW,kBAAkB;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2DAA2D;IAC3D,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,sEAAsE;IACtE,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,gFAAgF;IAChF,qBAAqB,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACnD;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IACnC,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqT/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ProfileButton.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/ProfileButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAKH,KAAK,SAAS,EACd,KAAK,SAAS,EACjB,MAAM,cAAc,CAAC;AAiDtB,MAAM,WAAW,kBAAkB;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2DAA2D;IAC3D,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,sEAAsE;IACtE,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,gFAAgF;IAChF,qBAAqB,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACnD;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IACnC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqU/C,CAAC;AAqDF,eAAe,aAAa,CAAC"}

package/lib/typescript/module/ui/components/ProfileMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileMenu.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/ProfileMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA2B/B;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAC9B,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,qFAAqF;IACrF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iFAAiF;IACjF,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yEAAyE;IACzE,MAAM,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAClC,2DAA2D;IAC3D,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,sEAAsE;IACtE,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,gFAAgF;IAChF,qBAAqB,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACtD;AAwRD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoE3C,CAAC;AAsCF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ProfileMenu.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/ProfileMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4B/B;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAC9B,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,qFAAqF;IACrF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iFAAiF;IACjF,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yEAAyE;IACzE,MAAM,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAClC,2DAA2D;IAC3D,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,sEAAsE;IACtE,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,gFAAgF;IAChF,qBAAqB,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACtD;AAiSD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsE3C,CAAC;AA0IF,eAAe,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/services",
-  "version": "13.2.0",
+  "version": "13.3.0",
   "description": "OxyHQ Expo/React Native SDK — UI components, screens, and native features",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

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;

package/src/ui/components/ProfileMenu.tsx

@@ -6,6 +6,7 @@ import {
     Modal,
     ScrollView,
     ActivityIndicator,
+    StyleSheet,
     Platform,
     type ViewStyle,
 } from 'react-native';
@@ -61,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.
@@ -175,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. */}
@@ -192,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}
@@ -203,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}
@@ -235,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"
@@ -250,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>
@@ -264,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={() => {
@@ -276,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={() => {
@@ -289,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={() => {
@@ -305,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>
@@ -357,6 +367,7 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({
     onBeforeSessionChange,
 }) => {
     const { t } = useI18n();
+    const { colors } = useTheme();
 
     // 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
@@ -385,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'}
                 >
@@ -421,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;