@oxyhq/services 22.10.0 → 22.11.0

package/lib/module/ui/components/OxyAuthChooser.js

@@ -48,35 +48,47 @@
  * that do not use NativeWind (e.g. the accounts app).
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { Fragment, useCallback, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { Linking, Platform, Pressable, TextInput, View } from 'react-native';
+import Animated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import QRCode from 'react-native-qrcode-svg';
 import { Avatar } from '@oxyhq/bloom/avatar';
+import { AvatarGroup } from '@oxyhq/bloom/avatar-group';
 import { Button } from '@oxyhq/bloom/button';
+import { PressableScale } from '@oxyhq/bloom/pressable-scale';
+import { CompositionBar } from '@oxyhq/bloom/composition-bar';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { toast } from '@oxyhq/bloom';
 import { Text } from '@oxyhq/bloom/typography';
 import { useTheme, BloomColorScope, APP_COLOR_NAMES, APP_COLOR_PRESETS } from '@oxyhq/bloom/theme';
-import { isOxyRpOrigin } from '@oxyhq/core';
+import { getNormalizedUserHandle, isOxyRpOrigin } from '@oxyhq/core';
 import { useQueryClient } from '@tanstack/react-query';
 import { useOxy } from "../context/OxyContext.js";
 import { useI18n } from "../hooks/useI18n.js";
+import { getAccountDialogConsumerHooks } from "../navigation/accountDialogManager.js";
 import { isWebBrowser } from "../utils/isWebBrowser.js";
 import { getCommonsAcquisitionUrl } from "../utils/commonsStoreLinks.js";
+import { useAccountStorageUsage } from "../hooks/queries/useServicesQueries.js";
 import { authChooserStyles as styles } from "./oxyAuthChooserStyles.js";
+import AvatarCameraBadge from "./AvatarCameraBadge.js";
 
-/** Diameter of a row avatar. */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Diameter of a row avatar (the sign-in view's account rows). */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ROW_AVATAR_SIZE = 40;
-/** Diameter of the prominent current-account avatar in the collapsed header. */
-const HEADER_AVATAR_SIZE = 48;
 /** High-contrast QR colors — intentionally fixed (NOT themed) for scan reliability. */
 const QR_PLATE_BG = '#FFFFFF';
 const QR_FOREGROUND = '#000000';
 const QR_SIZE = 196;
 /** Commons' own identity-creation deep link (mirrors the `approve`/`attest`/`card` intents). */
 const COMMONS_CREATE_IDENTITY_URL = 'oxycommons://create-identity';
+/**
+ * "Accounts by Oxy" management app — the canonical home for account settings,
+ * data export, and storage management. The account-menu rows deep-link into it
+ * (`/data`, `/storage`, or its root) the same way `getCommonsAcquisitionUrl`
+ * hands off to Commons; nothing here invents new API endpoints.
+ */
+const ACCOUNTS_APP_URL = 'https://accounts.oxy.so';
 /**
  * Resolve an account's stored color (a named Bloom preset, e.g. `'purple'`) to
  * a concrete brand hex for the row accent. Falls back to the theme primary when
@@ -107,7 +119,9 @@ const OxyAuthChooser = ({
     refreshAccounts,
     signInWithPasskey,
     registerWithPasskey,
-    oxyServices
+    oxyServices,
+    logout,
+    openAvatarPicker
   } = useOxy();
   const theme = useTheme();
   const {
@@ -161,21 +175,41 @@ const OxyAuthChooser = ({
     }
   }, [createPasskeyPending, registerWithPasskey, onComplete, t]);
 
+  // Web: auto-start "Sign in with Oxy" when the sign-in entry becomes the shown
+  // view — the QR handoff is the PRIMARY web surface, not a button behind a tap.
+  // `signInWithOxy()` tries the shared keychain first (silently, native-only)
+  // then falls to the QR handoff, which is what actually renders. Driven from the
+  // EVENTS that reach that view — the initial `subscribe` pass below (an
+  // open-to-sign-in) and the add / back-to-sign-in handlers — never a watcher
+  // effect. Guarded so it never restarts a live flow (phase must be idle) and is a
+  // no-op on native (button-driven). Reads the live snapshot at call time (an
+  // event callback, not render), so it is stable across renders.
+  const autoStartSignIn = useCallback(() => {
+    if (!controller || !isWebBrowser()) return;
+    const {
+      view: currentView,
+      signIn
+    } = controller.getSnapshot();
+    if (currentView !== 'signin' && currentView !== 'add' || signIn.phase !== 'idle') return;
+    void controller.signInWithOxy();
+  }, [controller]);
+
   // Bind the headless controller. `getSnapshot` returns a stable reference
   // between changes, so it is `useSyncExternalStore`-safe. Guard the no-provider
   // loading state (`controller` is `null`) with an inert store.
-  const subscribe = useCallback(listener => controller ? controller.subscribe(listener) : () => undefined, [controller]);
-  const getSnapshot = useCallback(() => controller ? controller.getSnapshot() : EMPTY_SNAPSHOT, [controller]);
-  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  const {
-    view
-  } = snapshot;
-
-  // Sign-in device-flow failures land on `snapshot.signIn` asynchronously (poll /
-  // socket / popup cancel). Toast at the controller notification site — never an
-  // inline banner in the QR view (owner mandate, same contract as account-switch).
-  useEffect(() => {
-    if (!controller) return;
+  //
+  // The subscribe callback ALSO carries two owner-mandated reactions to the
+  // controller. These run in the subscribe / notification callbacks — EVENT
+  // callbacks, not render/effect — so neither is a React effect hook:
+  //  1. Sign-in device-flow failures (poll / socket / popup-cancel land on
+  //     `signIn` asynchronously) are toasted at the notification site, deduped
+  //     per subscription — NEVER an inline banner in the QR view (owner mandate,
+  //     same contract as account-switch).
+  //  2. On subscribe (mount / re-subscribe — a passive effect, the SAME timing
+  //     the removed effects had) the web sign-in flow auto-starts if the opening
+  //     view is the sign-in entry.
+  const subscribe = useCallback(listener => {
+    if (!controller) return () => undefined;
     let lastToastedSignInError = null;
     const maybeToastSignInError = () => {
       const {
@@ -183,29 +217,23 @@ const OxyAuthChooser = ({
       } = controller.getSnapshot();
       if (signIn.phase === 'error' && signIn.error && signIn.error !== lastToastedSignInError) {
         lastToastedSignInError = signIn.error;
-        toast.error(signIn.error || t('accountSwitcher.toasts.signInFailed') || 'Sign-in failed. Please try again.');
-      }
-      if (signIn.phase !== 'error') {
+        toast.error(signIn.error);
+      } else if (signIn.phase !== 'error') {
         lastToastedSignInError = null;
       }
     };
     maybeToastSignInError();
-    return controller.subscribe(maybeToastSignInError);
-  }, [controller, t]);
-
-  // Web: "Sign in with Oxy" auto-starts the instant the sign-in entry is
-  // reached — no button tap needed. `signInWithOxy()` tries the shared
-  // keychain first (silently, native-only) then falls to the QR handoff,
-  // which is what actually renders: the QR is the primary web surface, not a
-  // peer button among several. Gated on `phase === 'idle'` so navigating back
-  // to this view while a flow is already active (or re-entering it) never
-  // restarts/duplicates it. Native stays fully button-driven (unchanged) —
-  // this effect is a no-op there.
-  useEffect(() => {
-    if (!controller || !isWebBrowser()) return;
-    if (view !== 'signin' && view !== 'add' || snapshot.signIn.phase !== 'idle') return;
-    void controller.signInWithOxy();
-  }, [controller, view, snapshot.signIn.phase]);
+    autoStartSignIn();
+    return controller.subscribe(() => {
+      maybeToastSignInError();
+      listener();
+    });
+  }, [controller, autoStartSignIn]);
+  const getSnapshot = useCallback(() => controller ? controller.getSnapshot() : EMPTY_SNAPSHOT, [controller]);
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const {
+    view
+  } = snapshot;
   const [switching, setSwitching] = useState(false);
   const handleSwitch = useCallback(async accountId => {
     if (!controller || switching) return;
@@ -236,15 +264,81 @@ const OxyAuthChooser = ({
   }, [controller, switching, snapshot.activeAccountId, onComplete, refreshAccounts, queryClient, t]);
   const handleManage = useCallback(() => {
     onComplete?.();
+    const hooks = getAccountDialogConsumerHooks();
+    if (hooks?.onNavigateManage) {
+      hooks.onNavigateManage();
+      return;
+    }
     showBottomSheet?.('ManageAccount');
   }, [onComplete, showBottomSheet]);
+  const handleAdd = useCallback(() => {
+    const hooks = getAccountDialogConsumerHooks();
+    if (hooks?.onAddAccount) {
+      hooks.onAddAccount();
+      return;
+    }
+    // No consumer override: enter the "add account" view and auto-start the web
+    // sign-in flow, from this handler (the event that reaches the view).
+    controller?.add();
+    autoStartSignIn();
+  }, [controller, autoStartSignIn]);
   const handlers = useMemo(() => ({
     onSwitch: accountId => {
       void handleSwitch(accountId);
     },
-    onAdd: () => controller?.add(),
-    onManage: handleManage
-  }), [handleSwitch, controller, handleManage]);
+    onAdd: handleAdd,
+    onManage: handleManage,
+    // Morphs the AccountDialog surface into `ChangeAvatar` (and back), then
+    // uploads / clears the picked photo — the single shared avatar write path.
+    onEditAvatar: () => openAvatarPicker()
+  }), [handleSwitch, handleAdd, handleManage, openAvatarPicker]);
+
+  // Real storage usage for the account menu's "Oxy storage" block. Disabled
+  // (no fetch) until a private-API session exists, so it is inert on the
+  // sign-in/QR/sign-up views; when present the block shows live used/total.
+  const storageQuery = useAccountStorageUsage();
+  const storage = useMemo(() => storageQuery.data ? {
+    usedBytes: storageQuery.data.totalUsedBytes,
+    limitBytes: storageQuery.data.totalLimitBytes
+  } : null, [storageQuery.data]);
+
+  // The account-menu rows below the switcher: storage + data + settings + help
+  // deep-link into the "Accounts by Oxy" app or open the matching in-app sheet
+  // (Help, Legal); sign-out uses the SDK's own per-account sign-out. No new
+  // endpoints — the same handoff pattern `handleManage`/`getCommonsAcquisitionUrl`
+  // already use.
+  const accountMenu = useMemo(() => {
+    const openUrl = url => {
+      void Linking.openURL(url);
+    };
+    const openSheet = config => {
+      onComplete?.();
+      showBottomSheet?.(config);
+    };
+    return {
+      onOpenSettings: () => openUrl(ACCOUNTS_APP_URL),
+      onOpenData: () => openUrl(`${ACCOUNTS_APP_URL}/data`),
+      onManageStorage: () => openUrl(`${ACCOUNTS_APP_URL}/storage`),
+      onUpgradeStorage: () => openUrl(`${ACCOUNTS_APP_URL}/storage`),
+      onHelp: () => openSheet('HelpSupport'),
+      onPrivacy: () => openSheet({
+        screen: 'LegalDocuments',
+        props: {
+          initialStep: 1
+        }
+      }),
+      onTerms: () => openSheet({
+        screen: 'LegalDocuments',
+        props: {
+          initialStep: 2
+        }
+      }),
+      onSignOut: () => {
+        void logout();
+        onComplete?.();
+      }
+    };
+  }, [onComplete, showBottomSheet, logout]);
   if (!controller) {
     return null;
   }
@@ -253,7 +347,9 @@ const OxyAuthChooser = ({
       snapshot: snapshot,
       theme: theme,
       t: t,
-      handlers: handlers
+      handlers: handlers,
+      storage: storage,
+      menu: accountMenu
     });
   }
   if (view === 'qr') {
@@ -283,7 +379,10 @@ const OxyAuthChooser = ({
       onCreateWithPasskey: handleCreateWithPasskey,
       createPending: createPasskeyPending,
       onOpenHub: () => void controller.startPasskeyHubSignIn(),
-      onBackToSignIn: () => controller.setView('signin')
+      onBackToSignIn: () => {
+        controller.setView('signin');
+        autoStartSignIn();
+      }
     });
   }
   return /*#__PURE__*/_jsx(SignInView, {
@@ -298,169 +397,541 @@ const OxyAuthChooser = ({
 };
 
 // ---------------------------------------------------------------------------
-// Accounts view
+// Accounts view — the signed-in Oxy account MENU (NativeWind)
 // ---------------------------------------------------------------------------
 
+/** Used/total storage bytes for the "Oxy storage" block, or `null` when unknown. */
+
+/** The account-menu row actions the container wires (deep-links / sheets / sign-out). */
+
 /**
- * The signed-in switcher, in the Google account-menu shape:
- *  - COLLAPSED (default): the active account is prominent at the top (avatar +
- *    name + email) with a trailing expand chevron, and a "Manage your Oxy
- *    account" outline button directly under it. Nothing else.
- *  - EXPANDED: the same header + button, then the full account list (current
- *    first with a check-circle, every other switchable account, "Add another
- *    account", and "Manage accounts on this device").
+ * Leading glyph for the rows that live in a Bloom grouped section (the MENU
+ * block) and for the storage card's cloud, which lines its title up with them.
+ * It is Bloom's OWN icon-slot size: `SettingsListItem` reserves a fixed 20px
+ * leading column and Bloom is consumed exactly as it ships, so a menu glyph
+ * larger than this would overhang into the row's title.
+ */
+const ROW_ICON_SIZE = 20;
+/**
+ * The switch card's two corner states. Collapsed it is one row and reads as a
+ * PILL; opened it is a card holding rows, on the same 16px corner the Bloom
+ * grouped section below it uses. Interpolated across the reveal, never snapped.
+ */
+const SWITCH_CARD_PILL_RADIUS = 999;
+const SWITCH_CARD_RADIUS = 16;
+/**
+ * The fraction of the reveal over which the corner resolves. The corner is a
+ * FASTER gesture than the reveal — it has to be finished before the rows read as
+ * rows, or the card still looks like a pill while a list falls out of it — so it
+ * is clamped to the reveal's opening fraction instead of tracking it end to end.
+ * Measured in a browser against the 240ms reveal: the corner reaches its card
+ * value ~120ms in, with the list only ~20% revealed, and (mirrored) the pill is
+ * back ~250ms into the close, with the list already down to ~0.
+ */
+const SWITCH_CARD_RADIUS_SETTLE = 0.2;
+/** Diameter of an account row's avatar in the switch list (own markup). */
+const SWITCH_AVATAR_SIZE = 36;
+/** Glyph inside a bordered affordance badge, sized to the avatar it stands in for. */
+const BADGE_GLYPH_SIZE = 19;
+/** The hero block's large current-account avatar. */
+const HERO_AVATAR_SIZE = 72;
+
+/**
+ * The hero's address line, shown under the "Hi, <name>!" greeting: the account's
+ * canonical `@oxy.so` email when it has one, else its normalized `@handle`. Never
+ * synthesizes a `username@oxy.so` address (the identity contract forbids it) — a
+ * non-Oxy or missing email falls back to `getNormalizedUserHandle`.
+ */
+function heroAddressLine(account) {
+  if (account.email?.toLowerCase().endsWith('@oxy.so')) {
+    return account.email;
+  }
+  const handle = getNormalizedUserHandle(account.user);
+  return handle ? `@${handle}` : null;
+}
+/** Avatars shown in the switch row's facepile before it collapses into `+N`. */
+const FACEPILE_MAX = 2;
+/** Facepile avatar diameter — one clear step down from a switch-list avatar. */
+const FACEPILE_AVATAR_SIZE = 32;
+/**
+ * Facepile overlap. Well under Bloom's `size / 3` default: the stack draws the
+ * FIRST item on top, so a deep overlap would bury the trailing `+N` chip's own
+ * label under the avatar before it.
+ */
+const FACEPILE_OVERLAP = 4;
+
+/**
+ * `bytes` → `"11.6 GB"`. Whole plan sizes read as whole numbers (`"17 GB"`, not
+ * `"17.0 GB"`), and anything ≥ 100 GB drops the decimal entirely.
+ */
+function formatStorageGb(bytes) {
+  const gb = bytes / 1024 ** 3;
+  if (gb >= 100 || Number.isInteger(gb)) return `${Math.round(gb)} GB`;
+  return `${gb.toFixed(1)} GB`;
+}
+/**
+ * A `Pressable` that appends a hover-tint NativeWind token while pointer-hovered.
+ * The Metro web pipeline here does NOT emit NativeWind `hover:` variants, so hover
+ * is driven by RN's cross-platform `onHoverIn`/`onHoverOut` (they fire only on web
+ * via react-native-web; a no-op on native) toggling a plain background token —
+ * the tint stays a NativeWind class, only the trigger is JS.
+ */
+const HoverPressable = ({
+  baseClassName,
+  hoverClassName,
+  ...rest
+}) => {
+  const [hovered, setHovered] = useState(false);
+  return /*#__PURE__*/_jsx(Pressable, {
+    ...rest,
+    className: hovered ? `${baseClassName} ${hoverClassName}` : baseClassName,
+    onHoverIn: () => setHovered(true),
+    onHoverOut: () => setHovered(false)
+  });
+};
+
+/**
+ * The signed-in Oxy account MENU — a Google-account-menu-style full menu built
+ * entirely with NativeWind `className` (the dynamic per-account accent hex is
+ * the one inline style NativeWind can't express). Structure mirrors the
+ * approved demo:
+ *  - ACCOUNT on its own distinct panel surface: a COMPACT current-account row
+ *    (avatar + name + email + expand chevron) that toggles the switch list, a
+ *    "Manage your Oxy account" pill, and — when expanded — the other switchable
+ *    accounts + "Add another account" + "Manage accounts on this device".
+ *  - OXY STORAGE: cloud + used/total + a progress bar + Upgrade / Manage chips.
+ *  - MENU rows: Your data in Oxy · Oxy settings · Help & feedback · Sign out —
+ *    Bloom's grouped section (`SettingsListGroup`/`SettingsListItem`), the same
+ *    component every other SDK settings surface uses, not a local row copy.
+ *  - FOOTER: Privacy Policy · Terms of Service.
+ *
+ * All three blocks share ONE rhythm taken from that grouped section: a 12px
+ * content inset, a 12px gap after the leading element, 16px between blocks, and
+ * a 16px trailing chevron column.
  *
- * Collapse state is a plain `useState` toggled in the header's press handler —
- * no `useEffect`, no derived-from-props sync. When there is only ONE account
- * (nothing to switch to) the chevron is hidden and the "Add another account" +
- * "Manage accounts on this device" items render inline, so those affordances
- * stay reachable without a pointless expand toggle.
+ * Collapse state is a plain `useState` toggled in the current row's press
+ * handler — no effect hook, no derived-from-props sync. With only ONE account
+ * (nothing to switch to) the chevron is hidden and the list renders inline so
+ * "Add another account" stays reachable without a pointless toggle.
  */
 const AccountsView = ({
   snapshot,
   theme,
   t,
-  handlers
+  handlers,
+  storage,
+  menu
 }) => {
   const [expanded, setExpanded] = useState(false);
+  // Measured natural height of the switch list, so the reveal animates to an
+  // exact height (and the content below reflows down smoothly) instead of a
+  // guessed max. The measuring wrapper is style-based, NOT className'd — on
+  // RN-Web `onLayout` never fires for className'd Views (see AGENTS.md).
+  const [listContentHeight, setListContentHeight] = useState(0);
+  // 0 = collapsed, 1 = expanded. Set imperatively in the toggle handler (no
+  // effect hook). On RN-Web there is no worklets plugin, so every shared value a
+  // mapper reads MUST be in its deps array or it freezes on the first frame
+  // (AGENTS.md "Reanimated (web)").
+  const listProgress = useSharedValue(0);
+  const listStyle = useAnimatedStyle(() => ({
+    height: listProgress.value * listContentHeight,
+    opacity: listProgress.value
+  }), [listProgress, listContentHeight]);
+  const chevronStyle = useAnimatedStyle(() => ({
+    transform: [{
+      rotate: `${listProgress.value * 180}deg`
+    }]
+  }), [listProgress]);
+  // Collapsed, the switch card is a single row and reads as a PILL; opened, it
+  // becomes a card holding rows and takes the grouped-section corner. The corner
+  // is driven off the SAME `listProgress` as the reveal — but clamped to its
+  // opening fraction, so it resolves early instead of trailing the rows: the
+  // card already reads as a card by the time they are visible. Collapsing is the
+  // mirror image, the pill returning over the closing tail.
+  const switchCardStyle = useAnimatedStyle(() => ({
+    borderRadius: interpolate(listProgress.value, [0, SWITCH_CARD_RADIUS_SETTLE], [SWITCH_CARD_PILL_RADIUS, SWITCH_CARD_RADIUS], Extrapolation.CLAMP)
+  }), [listProgress]);
+  // `CompositionBar` ships as an interactive breakdown: a selected segment
+  // replaces its hint line with that segment's readout. Tapping the selected one
+  // again clears it.
+  const [storageSegment, setStorageSegment] = useState(null);
+  const toggleStorageSegment = useCallback(key => setStorageSegment(previous => previous === key ? null : key), []);
+  const toggleExpanded = useCallback(() => {
+    const next = !expanded;
+    setExpanded(next);
+    listProgress.value = withTiming(next ? 1 : 0, {
+      duration: 240
+    });
+  }, [expanded, listProgress]);
   if (snapshot.loading && snapshot.accounts.length === 0) {
     return /*#__PURE__*/_jsxs(View, {
-      style: styles.centeredBlock,
+      className: "items-center justify-center gap-space-12 py-space-24",
       children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
         name: "loading",
         size: 24,
         color: theme.colors.textSecondary
       }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.mutedText, {
-          color: theme.colors.textSecondary
-        }],
-        children: t('accountSwitcher.loading') || 'Loading accounts…'
+        className: "text-body text-text-secondary text-center",
+        children: t('accountSwitcher.loading')
       })]
     });
   }
   const switchingDisabled = snapshot.switchingAccountId !== null;
   const current = snapshot.accounts.find(account => account.isCurrent) ?? snapshot.accounts[0];
-  const hasOtherAccounts = snapshot.accounts.some(account => account.accountId !== current?.accountId);
-  // Current account first, then the rest — the expanded list order.
-  const orderedAccounts = current ? [current, ...snapshot.accounts.filter(account => account.accountId !== current.accountId)] : snapshot.accounts;
-  // Multi-account: reveal the list only when expanded. Single-account: no expand
-  // affordance, so surface add/manage inline.
-  const showList = hasOtherAccounts ? expanded : true;
-  const renderAccountItem = account => {
-    const accent = resolveAccentHex(account.color, theme.colors.primary);
-    const isSwitching = snapshot.switchingAccountId === account.accountId;
-    return /*#__PURE__*/_jsx(SettingsListItem, {
-      icon: /*#__PURE__*/_jsx(View, {
-        style: [styles.avatarRing, {
-          borderColor: account.isCurrent ? accent : 'transparent'
-        }],
-        children: /*#__PURE__*/_jsx(Avatar, {
-          source: account.avatarUrl ?? undefined,
-          variant: "thumb",
-          name: account.displayName,
-          size: ROW_AVATAR_SIZE
-        })
-      }),
-      title: account.displayName,
-      description: account.email ?? undefined,
-      onPress: () => handlers.onSwitch(account.accountId),
+  const others = current ? snapshot.accounts.filter(account => account.accountId !== current.accountId) : snapshot.accounts;
+  const currentAccent = current ? resolveAccentHex(current.color, theme.colors.primary) : theme.colors.primary;
+  // The hero's address line under the greeting: the account's canonical @oxy.so
+  // email when it has one, else its normalized `@handle` (never a synthesized
+  // `username@oxy.so`, per the identity contract — `getNormalizedUserHandle`).
+  const currentAddress = current ? heroAddressLine(current) : null;
+  // The switch list repeats the CURRENT account (first, ringed) — unlike the old
+  // compact header it is not represented anywhere else once the hero moved out
+  // of the card, and the list is where you switch back to it.
+  const switchableAccounts = current ? [current, ...others] : others;
+  const facepile = switchableAccounts.map(account => ({
+    id: account.accountId,
+    uri: account.avatarUrl ?? undefined,
+    displayName: account.displayName
+  }));
+
+  // Used vs free is a two-part COMPOSITION (the parts always fill the bar), not
+  // a progress value — exactly what Bloom's `CompositionBar` models. Both colors
+  // are theme tokens, so the bar is correct in light and dark.
+  const storageCategories = storage ? [{
+    key: 'used',
+    name: t('accountMenu.storage.used'),
+    amount: storage.usedBytes,
+    color: theme.colors.primary
+  }, {
+    key: 'free',
+    name: t('accountMenu.storage.free'),
+    amount: Math.max(0, storage.limitBytes - storage.usedBytes),
+    color: theme.colors.contrast50
+  }] : [];
+  const usageLabel = storage ? t('accountMenu.storage.usage', {
+    used: formatStorageGb(storage.usedBytes),
+    total: formatStorageGb(storage.limitBytes)
+  }) : t('accountMenu.storage.unavailable');
+
+  // The switch list body, revealed under the "Switch account" row. Own markup,
+  // not a Bloom grouped section: this is not a list of settings rows and the
+  // component is not a card container. It mirrors the section's rhythm by hand —
+  // 12px content inset, 12px after the avatar, a hairline between rows — and
+  // draws those hairlines INSIDE the animated clip, so a collapsed list never
+  // strands one against the header row.
+  const listItems = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [switchableAccounts.map((account, index) => {
+      const accent = resolveAccentHex(account.color, theme.colors.primary);
+      const isSwitching = snapshot.switchingAccountId === account.accountId;
+      return /*#__PURE__*/_jsxs(Fragment, {
+        children: [index > 0 ? /*#__PURE__*/_jsx(View, {
+          className: "h-px bg-border opacity-30 ml-space-12"
+        }) : null, /*#__PURE__*/_jsxs(HoverPressable, {
+          baseClassName: `flex-row items-center gap-space-12 px-space-12 py-[10px]${switchingDisabled ? ' opacity-60' : ''}`,
+          hoverClassName: "bg-fill-secondary",
+          onPress: () => handlers.onSwitch(account.accountId),
+          disabled: switchingDisabled,
+          accessibilityRole: "button",
+          accessibilityLabel: account.displayName,
+          children: [/*#__PURE__*/_jsxs(View, {
+            children: [/*#__PURE__*/_jsx(Avatar, {
+              source: account.avatarUrl ?? undefined,
+              variant: "thumb",
+              name: account.displayName,
+              size: SWITCH_AVATAR_SIZE
+            }), account.isCurrent ? /*#__PURE__*/_jsx(View, {
+              style: [styles.currentAvatarRing, {
+                borderColor: accent
+              }],
+              pointerEvents: "none"
+            }) : null]
+          }), /*#__PURE__*/_jsxs(View, {
+            className: "flex-1 min-w-0",
+            children: [/*#__PURE__*/_jsx(Text, {
+              className: "text-body font-semibold text-text",
+              numberOfLines: 1,
+              children: account.displayName
+            }), account.email ? /*#__PURE__*/_jsx(Text, {
+              className: "text-caption text-text-secondary",
+              numberOfLines: 1,
+              children: account.email
+            }) : null]
+          }), isSwitching ? /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+            name: "loading",
+            size: 20,
+            color: accent
+          }) : null]
+        })]
+      }, account.accountId);
+    }), /*#__PURE__*/_jsx(View, {
+      className: "h-px bg-border opacity-30 ml-space-12"
+    }), /*#__PURE__*/_jsx(AccountAffordanceRow, {
+      icon: "plus",
+      label: t('accountMenu.addAnother'),
+      onPress: handlers.onAdd,
       disabled: switchingDisabled,
-      accessibilityLabel: account.displayName,
-      showChevron: false,
-      rightElement: isSwitching ? /*#__PURE__*/_jsx(MaterialCommunityIcons, {
-        name: "loading",
-        size: 20,
-        color: accent
-      }) : account.isCurrent ? /*#__PURE__*/_jsx(MaterialCommunityIcons, {
-        name: "check-circle",
-        size: 20,
-        color: accent
-      }) : undefined
-    }, account.accountId);
-  };
+      theme: theme
+    }), /*#__PURE__*/_jsx(View, {
+      className: "h-px bg-border opacity-30 ml-space-12"
+    }), /*#__PURE__*/_jsx(AccountAffordanceRow, {
+      icon: "account-multiple-outline",
+      label: t('accountSwitcher.manageOnDevice'),
+      onPress: handlers.onManage,
+      disabled: switchingDisabled,
+      theme: theme
+    })]
+  });
+  const manageLabel = t('accountMenu.manage');
+  const switchLabel = t('accountMenu.switchAccount');
   return /*#__PURE__*/_jsxs(View, {
-    style: styles.rows,
-    children: [current ? /*#__PURE__*/_jsxs(Pressable, {
-      style: styles.currentAccountRow,
-      onPress: hasOtherAccounts ? () => setExpanded(value => !value) : undefined,
-      disabled: hasOtherAccounts ? switchingDisabled : true,
-      accessibilityRole: hasOtherAccounts ? 'button' : undefined,
-      accessibilityState: hasOtherAccounts ? {
-        expanded
-      } : undefined,
-      accessibilityLabel: current.displayName,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [styles.avatarRing, {
-          borderColor: resolveAccentHex(current.color, theme.colors.primary)
-        }],
-        children: /*#__PURE__*/_jsx(Avatar, {
-          source: current.avatarUrl ?? undefined,
-          variant: "thumb",
-          name: current.displayName,
-          size: HEADER_AVATAR_SIZE
-        })
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.currentAccountMeta,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.hero,
+      children: [current ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsxs(PressableScale, {
+          onPress: handlers.onEditAvatar,
+          accessibilityRole: "button",
+          accessibilityLabel: t('editProfile.changeAvatar'),
+          style: styles.heroAvatarPressable,
+          children: [/*#__PURE__*/_jsx(Avatar, {
+            source: current.avatarUrl ?? undefined,
+            name: current.displayName,
+            size: HERO_AVATAR_SIZE
+          }), /*#__PURE__*/_jsx(View, {
+            style: [styles.heroAvatarRing, {
+              borderColor: currentAccent
+            }],
+            pointerEvents: "none"
+          }), /*#__PURE__*/_jsx(AvatarCameraBadge, {})]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.heroNameBlock,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.heroGreeting, {
+              color: theme.colors.text
+            }],
+            numberOfLines: 2,
+            children: t('accountMenu.greeting', {
+              name: current.displayName
+            })
+          }), currentAddress ? /*#__PURE__*/_jsx(Text, {
+            style: [styles.heroAddress, {
+              color: theme.colors.textSecondary
+            }],
+            numberOfLines: 1,
+            children: currentAddress
+          }) : null]
+        })]
+      }) : null, /*#__PURE__*/_jsx(Button, {
+        variant: "secondary",
+        size: "small",
+        onPress: handlers.onManage,
+        accessibilityLabel: manageLabel,
+        children: manageLabel
+      })]
+    }), /*#__PURE__*/_jsxs(Animated.View, {
+      className: "bg-fill overflow-hidden mb-space-16",
+      style: switchCardStyle,
+      children: [/*#__PURE__*/_jsxs(HoverPressable, {
+        baseClassName: `flex-row items-center gap-space-12 px-space-12 py-[10px] min-h-[44px]${switchingDisabled ? ' opacity-60' : ''}`,
+        hoverClassName: "bg-fill-secondary",
+        onPress: toggleExpanded,
+        disabled: switchingDisabled,
+        accessibilityRole: "button"
+        // The ARIA prop, not `accessibilityState`: react-native-web 0.21
+        // forwards only this one, and RN maps it to
+        // `accessibilityState.expanded` natively — so the disclosure state
+        // reaches assistive tech on BOTH platforms.
+        ,
+        "aria-expanded": expanded,
+        accessibilityLabel: switchLabel,
         children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.currentAccountName, {
-            color: theme.colors.text
-          }],
+          className: "flex-1 text-body text-text",
           numberOfLines: 1,
-          children: current.displayName
-        }), current.email ? /*#__PURE__*/_jsx(Text, {
-          style: [styles.currentAccountEmail, {
-            color: theme.colors.textSecondary
-          }],
-          numberOfLines: 1,
-          children: current.email
-        }) : null]
-      }), hasOtherAccounts ? /*#__PURE__*/_jsx(MaterialCommunityIcons, {
-        name: expanded ? 'chevron-up' : 'chevron-down',
-        size: 24,
-        color: theme.colors.textSecondary
-      }) : null]
-    }) : null, /*#__PURE__*/_jsx(Button, {
-      variant: "outline",
-      onPress: handlers.onManage,
-      style: styles.manageButton,
-      children: t('accountMenu.manage') || 'Manage your Oxy account'
-    }), showList ? /*#__PURE__*/_jsxs(SettingsListGroup, {
-      children: [hasOtherAccounts ? orderedAccounts.map(renderAccountItem) : null, /*#__PURE__*/_jsx(SettingsListItem, {
-        icon: /*#__PURE__*/_jsx(View, {
-          style: [styles.addBadge, {
-            borderColor: theme.colors.border
+          children: switchLabel
+        }), expanded ? null : /*#__PURE__*/_jsx(AvatarGroup, {
+          items: facepile,
+          layout: "stack",
+          size: FACEPILE_AVATAR_SIZE,
+          max: FACEPILE_MAX,
+          overlap: FACEPILE_OVERLAP,
+          variant: "thumb",
+          showInitials: true,
+          ringColor: theme.colors.card
+        }), /*#__PURE__*/_jsx(View, {
+          style: [styles.chevronCircle, {
+            backgroundColor: theme.colors.contrast50
           }],
+          children: /*#__PURE__*/_jsx(Animated.View, {
+            style: chevronStyle,
+            children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+              name: "chevron-down",
+              size: 20,
+              color: theme.colors.text
+            })
+          })
+        })]
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.collapse, listStyle],
+        pointerEvents: expanded ? 'auto' : 'none',
+        children: /*#__PURE__*/_jsx(View, {
+          style: styles.collapseMeasure,
+          onLayout: event => setListContentHeight(event.nativeEvent.layout.height),
+          children: /*#__PURE__*/_jsx(View, {
+            children: listItems
+          })
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      className: "bg-fill rounded-[16px] overflow-hidden mb-space-16 px-space-12 py-[10px] gap-space-12",
+      children: [/*#__PURE__*/_jsxs(View, {
+        className: "flex-row items-center gap-space-12 min-h-[24px]",
+        children: [/*#__PURE__*/_jsx(View, {
+          className: "w-[20px] items-center",
           children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
-            name: "plus",
-            size: 20,
+            name: "cloud-outline",
+            size: ROW_ICON_SIZE,
             color: theme.colors.textSecondary
           })
+        }), /*#__PURE__*/_jsx(Text, {
+          className: "flex-1 text-body font-semibold text-text",
+          numberOfLines: 1,
+          children: t('accountMenu.storage.title')
+        })]
+      }), /*#__PURE__*/_jsx(CompositionBar, {
+        categories: storageCategories,
+        selectedKey: storageSegment,
+        onSelect: toggleStorageSegment,
+        hintLabel: usageLabel,
+        formatReadout: (bytes, percent) => `${formatStorageGb(bytes)} · ${percent}%`
+      }), /*#__PURE__*/_jsxs(View, {
+        className: "flex-row gap-space-8",
+        children: [/*#__PURE__*/_jsx(StorageChip, {
+          label: t('accountMenu.storage.upgrade'),
+          onPress: menu.onUpgradeStorage
+        }), /*#__PURE__*/_jsx(StorageChip, {
+          label: t('accountMenu.storage.manage'),
+          onPress: menu.onManageStorage
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(SettingsListGroup, {
+      children: [/*#__PURE__*/_jsx(SettingsListItem, {
+        icon: /*#__PURE__*/_jsx(MenuIcon, {
+          name: "tray-arrow-down",
+          theme: theme
         }),
-        title: t('signin.addAccountTitle') || 'Add another account',
-        onPress: handlers.onAdd,
-        disabled: switchingDisabled,
-        accessibilityLabel: t('signin.addAccountTitle') || 'Add another account',
-        showChevron: false
+        title: t('accountMenu.data'),
+        onPress: menu.onOpenData
       }), /*#__PURE__*/_jsx(SettingsListItem, {
-        icon: /*#__PURE__*/_jsx(View, {
-          style: [styles.addBadge, {
-            borderColor: theme.colors.border
-          }],
-          children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
-            name: "cog-outline",
-            size: 20,
-            color: theme.colors.textSecondary
-          })
+        icon: /*#__PURE__*/_jsx(MenuIcon, {
+          name: "cog-outline",
+          theme: theme
         }),
-        title: t('accountSwitcher.manageOnDevice') || 'Manage accounts on this device',
-        onPress: handlers.onManage,
-        disabled: switchingDisabled,
-        accessibilityLabel: t('accountSwitcher.manageOnDevice') || 'Manage accounts on this device',
+        title: t('accountMenu.settings'),
+        onPress: menu.onOpenSettings
+      }), /*#__PURE__*/_jsx(SettingsListItem, {
+        icon: /*#__PURE__*/_jsx(MenuIcon, {
+          name: "help-circle-outline",
+          theme: theme
+        }),
+        title: t('accountMenu.help'),
+        onPress: menu.onHelp
+      }), /*#__PURE__*/_jsx(SettingsListItem, {
+        icon: /*#__PURE__*/_jsx(MenuIcon, {
+          name: "logout",
+          theme: theme
+        }),
+        title: t('accountMenu.signOut'),
+        onPress: menu.onSignOut,
         showChevron: false
       })]
-    }) : null]
+    }), /*#__PURE__*/_jsxs(View, {
+      className: "flex-row items-center justify-center gap-space-12 px-space-12 pb-space-8",
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        onPress: menu.onPrivacy,
+        accessibilityRole: "link",
+        children: /*#__PURE__*/_jsx(Text, {
+          className: "text-bodySmall text-text-secondary",
+          children: t('accountMenu.privacy')
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        className: "text-bodySmall text-text-tertiary",
+        children: "\xB7"
+      }), /*#__PURE__*/_jsx(Pressable, {
+        onPress: menu.onTerms,
+        accessibilityRole: "link",
+        children: /*#__PURE__*/_jsx(Text, {
+          className: "text-bodySmall text-text-secondary",
+          children: t('accountMenu.terms')
+        })
+      })]
+    })]
   });
 };
+
+// ---------------------------------------------------------------------------
+// Account-menu row building blocks (NativeWind)
+// ---------------------------------------------------------------------------
+
+/**
+ * An account-list AFFORDANCE row ("Add another account", "Manage accounts on
+ * this device") — a bordered circle sized to the avatar it stands in for, so its
+ * label lands on the same line as every account name above it. Own markup, like
+ * the account rows it closes: this list is not a Bloom grouped section.
+ */
+const AccountAffordanceRow = ({
+  icon,
+  label,
+  onPress,
+  disabled,
+  theme
+}) => /*#__PURE__*/_jsxs(HoverPressable, {
+  baseClassName: `flex-row items-center gap-space-12 px-space-12 py-[10px]${disabled ? ' opacity-60' : ''}`,
+  hoverClassName: "bg-fill-secondary",
+  onPress: onPress,
+  disabled: disabled,
+  accessibilityRole: "button",
+  accessibilityLabel: label,
+  children: [/*#__PURE__*/_jsx(View, {
+    className: "w-[36px] h-[36px] items-center justify-center rounded-radius-max border border-border",
+    children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+      name: icon,
+      size: BADGE_GLYPH_SIZE,
+      color: theme.colors.textSecondary
+    })
+  }), /*#__PURE__*/_jsx(Text, {
+    className: "flex-1 text-body font-semibold text-text",
+    numberOfLines: 1,
+    children: label
+  })]
+});
+
+/**
+ * The leading glyph for a grouped-section menu row, sized to Bloom's 20px icon
+ * column so the icons, the storage block's cloud and every row title align.
+ */
+const MenuIcon = ({
+  name,
+  theme
+}) => /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+  name: name,
+  size: ROW_ICON_SIZE,
+  color: theme.colors.textSecondary
+});
+
+/** A storage action chip — a bordered pill on the sheet background. */
+const StorageChip = ({
+  label,
+  onPress
+}) => /*#__PURE__*/_jsx(HoverPressable, {
+  baseClassName: "rounded-radius-max border border-border bg-bg py-[9px] px-[14px]",
+  hoverClassName: "bg-fill-secondary",
+  onPress: onPress,
+  accessibilityRole: "button",
+  accessibilityLabel: label,
+  children: /*#__PURE__*/_jsx(Text, {
+    className: "text-bodySmall font-semibold text-text",
+    children: label
+  })
+});
 const AccountRow = ({
   account,
   theme,
@@ -529,9 +1000,9 @@ const AccountRow = ({
 };
 
 // ---------------------------------------------------------------------------
-// Sign-in view (add / signin) — NATIVE-facing today: on web the auto-start
-// effect above moves the view to `qr` almost immediately, so this renders
-// only for a brief instant there.
+// Sign-in view (add / signin) — NATIVE-facing today: on web `autoStartSignIn`
+// (fired from the subscribe pass / the add / back-to-sign-in handlers) moves the
+// view to `qr` almost immediately, so this renders only for a brief instant there.
 // ---------------------------------------------------------------------------
 
 const SignInView = ({