@oxyhq/services 22.12.4 → 22.12.7

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

@@ -12,35 +12,22 @@
  * cross-origin passkey popup (b2) — same chooser, two hosts, two completion
  * strategies via the `onComplete` prop. Neither host duplicates view logic.
  *
- * Views (from `snapshot.view`):
- *  - `accounts` — the unified `SwitchableAccount[]` list. Tapping a row
- *    switches through `controller.switchTo(accountId)`, the active row is
- *    flagged, and a "+ Add account" row opens the sign-in entry.
- *  - `add` / `signin` — the sign-in entry. On WEB this auto-starts "Sign in
- *    with Oxy" (native shared-keychain silently, else the QR handoff) the
- *    instant the view is entered — the QR is the PRIMARY web surface, not a
- *    button behind a click. On NATIVE it stays button-driven (unchanged):
- *    primary "Sign in with Oxy", secondary "Scan a QR from another device".
- *    Both platforms get a footer entry into `signup`.
- *  - `signup` — account creation. Commons is ALWAYS the priority path (owner
- *    mandate) and leads everywhere it appears: native shows only "Create your
- *    identity in Commons" (or "Get Commons" first, if not installed); web on
- *    a first-party Oxy origin leads with the SAME "Get Commons" CTA, with
- *    inline passkey creation (username + `registerWithPasskey`) offered
- *    UNDERNEATH as the de-emphasized "don't want to install anything"
- *    alternative — never co-equal, never a competing button. Anywhere else (a
- *    non-Oxy web origin, before the b2 hub-relay ships) shows an honest "not
- *    available here yet" message instead of a broken button.
- *  - `qr` — the cross-device Commons handoff, and the PRIMARY web sign-in
- *    surface. On a first-party Oxy origin this ALSO carries a "No Commons?"
- *    passkey link — identity is ONE thing (Commons key or browser passkey,
- *    same Oxy ID), so there is no separate "sign in with a passkey" button
- *    anywhere in this file, but passkey is explicitly the LIGHTWEIGHT
- *    ALTERNATIVE for someone who doesn't want to install Commons, never
- *    co-equal: same small-text-link subordination, same framing, wherever it
- *    appears. Native additionally branches on `commonsAvailability`: when
- *    Commons isn't installed, this leads with a "Get Commons" CTA instead of
- *    a same-device dead-end QR.
+ * This file owns WIRING only: the controller binding, the action handlers, and
+ * which view module renders. Every view lives in `./authChooser/`, one
+ * responsibility each:
+ *
+ *  - `accounts` → `AccountsMenuView` — the signed-in Oxy account menu.
+ *  - `add` / `signin` → `SignInEntryView` — ONE primary action, "Continue with
+ *    Oxy" (issue #691, Phase 5). On WEB this view is transient: the flow
+ *    auto-starts the instant the view is reached, because the request surface
+ *    (a QR on an unknown desktop, "Check Commons on your phone" where Oxy could
+ *    deliver) IS the primary route there, never something behind a second tap.
+ *  - `qr` → `SignInRequestView` — the ACTIVE REQUEST: the controller-bound
+ *    wiring over the shared, presentational `OxySignInRequestSurface` (the same
+ *    component the auth.oxy.so IdP mounts from its OAuth-bound request). It maps
+ *    `snapshot.signIn` onto that surface's props; alternatives stay behind
+ *    "Having trouble?" until the chosen route reports `routeFailed`.
+ *  - `signup` → `SignUpView` — account creation, Commons-first.
  *
  * Per-account color re-theming uses Bloom's `APP_COLOR_PRESETS` + `BloomColorScope`
  * (same visual language auth.oxy.so uses). Base theming is `useTheme()` + a
@@ -48,21 +35,11 @@
  * that do not use NativeWind (e.g. the accounts app).
  */
 
-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 { useCallback, useMemo, useState, useSyncExternalStore } from 'react';
+import { Linking, Platform } from 'react-native';
 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 { getNormalizedUserHandle, isOxyRpOrigin } from '@oxyhq/core';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { isOxyRpOrigin } from '@oxyhq/core';
 import { useQueryClient } from '@tanstack/react-query';
 import { useOxy } from "../context/OxyContext.js";
 import { useI18n } from "../hooks/useI18n.js";
@@ -70,16 +47,11 @@ import { getAccountDialogConsumerHooks } from "../navigation/accountDialogManage
 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 (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;
-/** High-contrast QR colors — intentionally fixed (NOT themed) for scan reliability. */
-const QR_PLATE_BG = '#FFFFFF';
-const QR_FOREGROUND = '#000000';
-const QR_SIZE = 196;
+import AccountsMenuView from "./authChooser/AccountsMenuView.js";
+import SignInEntryView from "./authChooser/SignInEntryView.js";
+import SignInRequestView from "./authChooser/SignInRequestView.js";
+import SignUpView from "./authChooser/SignUpView.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 /** Commons' own identity-creation deep link (mirrors the `approve`/`attest`/`card` intents). */
 const COMMONS_CREATE_IDENTITY_URL = 'oxycommons://create-identity';
 /**
@@ -89,22 +61,6 @@ const COMMONS_CREATE_IDENTITY_URL = 'oxycommons://create-identity';
  * 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
- * the account has no color or the value is not a recognized preset, so the accent
- * renders in EVERY consumer regardless of NativeWind availability.
- */
-function resolveAccentHex(color, fallback) {
-  const preset = toPreset(color);
-  return preset ? APP_COLOR_PRESETS[preset].hex : fallback;
-}
-
-/** Narrow a stored color string to a known `AppColorName`, or `undefined`. */
-function toPreset(color) {
-  if (!color) return undefined;
-  return APP_COLOR_NAMES.includes(color) ? color : undefined;
-}
 /**
  * The account switcher + sign-in/sign-up chooser. Mounted by `OxyAccountDialogScreen`
  * (wrapped in Bloom's `<Dialog>`) today; mountable bare by any future host that
@@ -142,7 +98,6 @@ const OxyAuthChooser = ({
     if (!isWebBrowser()) return 'none';
     return isOxyRpOrigin() ? 'direct' : 'hub';
   }, []);
-  const passkeyAvailable = passkeyMode !== 'none';
   const [signInPasskeyPending, setSignInPasskeyPending] = useState(false);
   const handleSignInWithPasskey = useCallback(async () => {
     if (signInPasskeyPending) return;
@@ -154,7 +109,7 @@ const OxyAuthChooser = ({
       // A cancelled/failed ceremony keeps the view open so the user can retry
       // or fall back to the QR — surface the reason as a toast (owner mandate:
       // errors never render inline inside the dialog), never swallow.
-      toast.error(error instanceof Error && error.message ? error.message : t('accountSwitcher.toasts.passkeySignInFailed') || 'Passkey sign-in failed.');
+      toast.error(error instanceof Error && error.message ? error.message : t('accountSwitcher.toasts.passkeySignInFailed'));
     } finally {
       setSignInPasskeyPending(false);
     }
@@ -169,20 +124,21 @@ const OxyAuthChooser = ({
       });
       onComplete?.();
     } catch (error) {
-      toast.error(error instanceof Error && error.message ? error.message : t('signup.toasts.passkeyCreateFailed') || 'Account creation failed.');
+      toast.error(error instanceof Error && error.message ? error.message : t('signup.toasts.passkeyCreateFailed'));
     } finally {
       setCreatePasskeyPending(false);
     }
   }, [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.
+  // view — the request surface is the PRIMARY web route, not something behind a
+  // second tap (the user's ONE action was the sign-in button that opened this).
   // `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
+  // then falls to the device flow, whose route the controller picks. 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
+  // 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;
@@ -203,8 +159,8 @@ const OxyAuthChooser = ({
   // 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).
+  //     per subscription — NEVER an inline banner in the request 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.
@@ -252,7 +208,7 @@ const OxyAuthChooser = ({
       // re-fetches — the same side effects the context's own
       // `switchToAccount` performs.
       if (controller.getSnapshot().error) {
-        toast.error(t('accountSwitcher.toasts.switchFailed') || 'There was a problem switching accounts. Please try again.');
+        toast.error(t('accountSwitcher.toasts.switchFailed'));
         return;
       }
       void refreshAccounts();
@@ -293,9 +249,31 @@ const OxyAuthChooser = ({
     onEditAvatar: () => openAvatarPicker()
   }), [handleSwitch, handleAdd, handleManage, openAvatarPicker]);
 
+  // Everything that is NOT the surface's one primary action. Wired once here;
+  // each view picks the subset that is a genuine alternative to ITS primary
+  // surface and hides them behind "Having trouble?" (issue #691).
+  const alternatives = useMemo(() => ({
+    passkeyAvailable: passkeyMode !== 'none',
+    // The hub-popup flow reports progress through `snapshot.signIn` (already
+    // rendered by the request view) — only the DIRECT ceremony uses this
+    // component-local pending flag. A ceremony FAILURE is toasted by
+    // `handleSignInWithPasskey`, never rendered inline.
+    passkeyPending: passkeyMode === 'direct' ? signInPasskeyPending : false,
+    onSignInWithPasskey: () => {
+      if (passkeyMode === 'direct') {
+        void handleSignInWithPasskey();
+        return;
+      }
+      void controller?.startPasskeyHubSignIn();
+    },
+    onShowQr: () => void controller?.showQr(),
+    onGetCommons: () => void Linking.openURL(getCommonsAcquisitionUrl(Platform.OS)),
+    onCreateAccount: () => controller?.startSignup()
+  }), [passkeyMode, signInPasskeyPending, handleSignInWithPasskey, controller]);
+
   // 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.
+  // sign-in/request/sign-up views; when present the block shows live used/total.
   const storageQuery = useAccountStorageUsage();
   const storage = useMemo(() => storageQuery.data ? {
     usedBytes: storageQuery.data.totalUsedBytes,
@@ -343,7 +321,7 @@ const OxyAuthChooser = ({
     return null;
   }
   if (view === 'accounts') {
-    return /*#__PURE__*/_jsx(AccountsView, {
+    return /*#__PURE__*/_jsx(AccountsMenuView, {
       snapshot: snapshot,
       theme: theme,
       t: t,
@@ -353,20 +331,11 @@ const OxyAuthChooser = ({
     });
   }
   if (view === 'qr') {
-    return /*#__PURE__*/_jsx(QrView, {
+    return /*#__PURE__*/_jsx(SignInRequestView, {
       snapshot: snapshot,
-      theme: theme,
       t: t,
       onRetry: () => void controller.showQr(),
-      passkeyAvailable: passkeyAvailable,
-      onSignInWithPasskey: passkeyMode === 'direct' ? () => void handleSignInWithPasskey() : () => void controller.startPasskeyHubSignIn()
-      // The hub-popup flow's pending state is `snapshot.signIn` (already
-      // rendered elsewhere in this view) — only the DIRECT ceremony uses this
-      // component-local pending flag. A ceremony FAILURE is surfaced as a
-      // toast by `handleSignInWithPasskey`, never inline.
-      ,
-      passkeyPending: passkeyMode === 'direct' ? signInPasskeyPending : false,
-      onCreateAccount: () => controller.startSignup()
+      alternatives: alternatives
     });
   }
   if (view === 'signup') {
@@ -376,1050 +345,24 @@ const OxyAuthChooser = ({
       t: t,
       oxyServices: oxyServices,
       passkeyMode: passkeyMode,
-      onCreateWithPasskey: handleCreateWithPasskey,
+      onCreateWithPasskey: username => void handleCreateWithPasskey(username),
       createPending: createPasskeyPending,
       onOpenHub: () => void controller.startPasskeyHubSignIn(),
+      onCreateIdentityInCommons: () => void Linking.openURL(COMMONS_CREATE_IDENTITY_URL),
+      onGetCommons: alternatives.onGetCommons,
       onBackToSignIn: () => {
         controller.setView('signin');
         autoStartSignIn();
       }
     });
   }
-  return /*#__PURE__*/_jsx(SignInView, {
+  return /*#__PURE__*/_jsx(SignInEntryView, {
     snapshot: snapshot,
     theme: theme,
     t: t,
     handlers: handlers,
-    onSignInWithOxy: () => void controller.signInWithOxy(),
-    onScanQr: () => void controller.showQr(),
-    onCreateAccount: () => controller.startSignup()
-  });
-};
-
-// ---------------------------------------------------------------------------
-// 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). */
-
-/**
- * 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 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,
-  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, {
-      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, {
-        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 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,
-      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, {
-    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, {
-          className: "flex-1 text-body text-text",
-          numberOfLines: 1,
-          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: "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('accountMenu.data'),
-        onPress: menu.onOpenData
-      }), /*#__PURE__*/_jsx(SettingsListItem, {
-        icon: /*#__PURE__*/_jsx(MenuIcon, {
-          name: "cog-outline",
-          theme: theme
-        }),
-        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
-      })]
-    }), /*#__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,
-  switching,
-  disabled,
-  onPress
-}) => {
-  const accent = resolveAccentHex(account.color, theme.colors.primary);
-  const rowStyle = [styles.accountRow, {
-    borderColor: account.isCurrent ? accent : theme.colors.border,
-    backgroundColor: theme.colors.card
-  }, disabled && !switching ? styles.rowDisabled : null];
-  return /*#__PURE__*/_jsx(BloomColorScope, {
-    colorPreset: toPreset(account.color),
-    asChild: true,
-    children: /*#__PURE__*/_jsxs(Pressable, {
-      style: rowStyle,
-      onPress: onPress,
-      disabled: disabled,
-      accessibilityRole: "button",
-      accessibilityState: {
-        selected: account.isCurrent,
-        disabled
-      },
-      accessibilityLabel: account.displayName,
-      children: [/*#__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
-        })
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.rowMeta,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.rowName, {
-            color: theme.colors.text
-          }],
-          numberOfLines: 1,
-          children: account.displayName
-        }), account.email ? /*#__PURE__*/_jsx(Text, {
-          style: [styles.rowHandle, {
-            color: theme.colors.textSecondary
-          }],
-          numberOfLines: 1,
-          children: account.email
-        }) : null]
-      }), switching ? /*#__PURE__*/_jsx(MaterialCommunityIcons, {
-        name: "loading",
-        size: 20,
-        color: accent
-      }) : account.isCurrent ? /*#__PURE__*/_jsx(MaterialCommunityIcons, {
-        name: "check-circle",
-        size: 20,
-        color: accent
-      }) : /*#__PURE__*/_jsx(MaterialCommunityIcons, {
-        name: "chevron-right",
-        size: 20,
-        color: theme.colors.textSecondary
-      })]
-    })
-  });
-};
-
-// ---------------------------------------------------------------------------
-// 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 = ({
-  snapshot,
-  theme,
-  t,
-  handlers,
-  onSignInWithOxy,
-  onScanQr,
-  onCreateAccount
-}) => /*#__PURE__*/_jsxs(View, {
-  style: styles.signInBlock,
-  children: [snapshot.accounts.length > 0 ? /*#__PURE__*/_jsxs(View, {
-    style: styles.rows,
-    children: [snapshot.accounts.map(account => /*#__PURE__*/_jsx(AccountRow, {
-      account: account,
-      theme: theme,
-      switching: snapshot.switchingAccountId === account.accountId,
-      disabled: snapshot.switchingAccountId !== null,
-      onPress: () => handlers.onSwitch(account.accountId)
-    }, account.accountId)), /*#__PURE__*/_jsx(Dividerish, {
-      theme: theme,
-      label: t('signin.or') || 'or'
-    })]
-  }) : null, /*#__PURE__*/_jsx(Button, {
-    variant: "primary",
-    onPress: onSignInWithOxy,
-    style: styles.primaryButton,
-    children: t('accountSwitcher.signInWithOxy') || 'Sign in with Oxy'
-  }), /*#__PURE__*/_jsx(Button, {
-    variant: "secondary",
-    onPress: onScanQr,
-    style: styles.secondaryButton,
-    children: t('accountSwitcher.scanQr') || 'Scan a QR from another device'
-  }), /*#__PURE__*/_jsx(SignUpFooterLink, {
-    theme: theme,
-    t: t,
-    onPress: onCreateAccount
-  })]
-});
-const Dividerish = ({
-  theme,
-  label
-}) => /*#__PURE__*/_jsxs(View, {
-  style: styles.dividerRow,
-  children: [/*#__PURE__*/_jsx(View, {
-    style: [styles.dividerLine, {
-      backgroundColor: theme.colors.border
-    }]
-  }), /*#__PURE__*/_jsx(Text, {
-    style: [styles.dividerText, {
-      color: theme.colors.textSecondary
-    }],
-    children: label
-  }), /*#__PURE__*/_jsx(View, {
-    style: [styles.dividerLine, {
-      backgroundColor: theme.colors.border
-    }]
-  })]
-});
-
-/** "New to Oxy? Create one" — shared by `SignInView` and `QrView`. */
-const SignUpFooterLink = ({
-  theme,
-  t,
-  onPress
-}) => /*#__PURE__*/_jsx(Pressable, {
-  onPress: onPress,
-  accessibilityRole: "button",
-  style: styles.footerLink,
-  children: /*#__PURE__*/_jsx(Text, {
-    style: [styles.linkText, {
-      color: theme.colors.textSecondary
-    }],
-    children: t('signin.createAccountLink') || 'New to Oxy? Create one'
-  })
-});
-
-/** "Already have an account? Sign in" — used by `SignUpView`. */
-const SignInFooterLink = ({
-  theme,
-  t,
-  onPress
-}) => /*#__PURE__*/_jsx(Pressable, {
-  onPress: onPress,
-  accessibilityRole: "button",
-  style: styles.footerLink,
-  children: /*#__PURE__*/_jsx(Text, {
-    style: [styles.linkText, {
-      color: theme.colors.textSecondary
-    }],
-    children: t('signup.backToSignInLink') || 'Already have an account? Sign in'
-  })
-});
-
-// ---------------------------------------------------------------------------
-// QR view — the PRIMARY web sign-in surface, and the ONLY sign-in surface on
-// native. Commons is ALWAYS the priority path (owner mandate): the QR here
-// and the "Get Commons" CTA below are the leading content everywhere they
-// appear. The passkey link is explicitly the lightweight, de-emphasized
-// alternative for someone who doesn't want to install Commons — same visual
-// subordination (a small text link, never a button) and the same "No
-// Commons?" framing in its copy wherever it's offered.
-// ---------------------------------------------------------------------------
-
-const QrView = ({
-  snapshot,
-  theme,
-  t,
-  onRetry,
-  passkeyAvailable,
-  onSignInWithPasskey,
-  passkeyPending,
-  onCreateAccount
-}) => {
-  const {
-    signIn,
-    commonsAvailability
-  } = snapshot;
-  const [showQrAnyway, setShowQrAnyway] = useState(false);
-
-  // A ceremony FAILURE is surfaced as a toast by `handleSignInWithPasskey` — the
-  // link itself never renders an inline error (owner mandate).
-  const passkeyLink = passkeyAvailable && signIn.phase !== 'authorized' ? /*#__PURE__*/_jsx(Pressable, {
-    onPress: onSignInWithPasskey,
-    disabled: passkeyPending,
-    accessibilityRole: "button",
-    style: styles.footerLink,
-    testID: "passkey-signin-link",
-    children: /*#__PURE__*/_jsx(Text, {
-      style: [styles.linkText, {
-        color: theme.colors.textSecondary
-      }],
-      children: passkeyPending ? t('accountSwitcher.passkeySigningIn') || 'Signing in…' : t('accountSwitcher.useIdentityOnDevice') || 'No Commons? Use a passkey on this device instead'
-    })
-  }) : null;
-
-  // Native, Commons confirmed NOT installed: a same-device QR is a dead
-  // end (the user can't scan their own screen) — lead with "Get Commons"
-  // instead, and demote the QR to an explicit "I have it elsewhere" reveal.
-  if (commonsAvailability === 'unavailable' && !showQrAnyway) {
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.centeredBlock,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.mutedText, {
-          color: theme.colors.textSecondary
-        }],
-        children: t('accountSwitcher.commonsNotInstalled') || "Don't have Commons? Get the app to sign in with your Oxy ID."
-      }), /*#__PURE__*/_jsx(Button, {
-        variant: "primary",
-        onPress: () => void Linking.openURL(getCommonsAcquisitionUrl(Platform.OS)),
-        style: styles.primaryButton,
-        children: t('accountSwitcher.getCommons') || 'Get Commons'
-      }), /*#__PURE__*/_jsx(Pressable, {
-        onPress: () => setShowQrAnyway(true),
-        accessibilityRole: "button",
-        style: styles.footerLink,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.linkText, {
-            color: theme.colors.textSecondary
-          }],
-          children: t('accountSwitcher.showQrAnyway') || 'I have Commons on another device'
-        })
-      }), passkeyLink, /*#__PURE__*/_jsx(SignUpFooterLink, {
-        theme: theme,
-        t: t,
-        onPress: onCreateAccount
-      })]
-    });
-  }
-  if (signIn.phase === 'error') {
-    // The failure reason is toasted by the controller subscription above — no
-    // inline error copy here (owner mandate).
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.centeredBlock,
-      children: [/*#__PURE__*/_jsx(Button, {
-        variant: "secondary",
-        onPress: onRetry,
-        style: styles.secondaryButton,
-        children: t('common.actions.tryAgain') || 'Try again'
-      }), passkeyLink]
-    });
-  }
-  if (signIn.phase === 'starting' || signIn.phase === 'authorized' || !signIn.qrPayload) {
-    const label = signIn.phase === 'authorized' ? t('signin.status.signingIn') || 'Signing in…' : t('accountSwitcher.loading') || 'Preparing sign-in…';
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.centeredBlock,
-      children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
-        name: "loading",
-        size: 26,
-        color: theme.colors.primary
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.mutedText, {
-          color: theme.colors.textSecondary
-        }],
-        children: label
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.centeredBlock,
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: [styles.qrHeadline, {
-        color: theme.colors.text
-      }],
-      children: t('accountSwitcher.qrHeadline') || 'Sign in with your Oxy identity'
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.qrPlate,
-      children: /*#__PURE__*/_jsx(QRCode, {
-        value: signIn.qrPayload,
-        size: QR_SIZE,
-        backgroundColor: QR_PLATE_BG,
-        color: QR_FOREGROUND
-      })
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [styles.mutedText, {
-        color: theme.colors.textSecondary
-      }],
-      children: t('accountSwitcher.scanWithOxy') || 'Scan with Commons on your phone to continue.'
-    }), passkeyLink, /*#__PURE__*/_jsx(SignUpFooterLink, {
-      theme: theme,
-      t: t,
-      onPress: onCreateAccount
-    })]
-  });
-};
-
-// ---------------------------------------------------------------------------
-// Sign-up view
-// ---------------------------------------------------------------------------
-
-/** Debounced username-availability check over the existing SDK method. */
-function useUsernameAvailability(oxyServices, t) {
-  const [status, setStatus] = useState('idle');
-  const timerRef = useRef(null);
-  const requestSeqRef = useRef(0);
-  const check = useCallback(value => {
-    if (timerRef.current) clearTimeout(timerRef.current);
-    const seq = ++requestSeqRef.current;
-    if (!value || value.length < 3) {
-      setStatus('idle');
-      return;
-    }
-    setStatus('checking');
-    timerRef.current = setTimeout(() => {
-      void oxyServices.checkUsernameAvailability(value).then(result => {
-        if (seq !== requestSeqRef.current) return; // superseded by a newer check
-        setStatus(result.available ? 'available' : 'taken');
-      }).catch(() => {
-        if (seq !== requestSeqRef.current) return;
-        // Reset the (now stale) verdict rather than block on it, and surface
-        // the failure as a toast — never an inline error inside the dialog.
-        setStatus('idle');
-        toast.error(t('accounts.create.username.checkFailed') || 'Could not check availability');
-      });
-    }, 400);
-  }, [oxyServices, t]);
-  return {
-    status,
-    check
-  };
-}
-const UsernameStatusText = ({
-  status,
-  theme,
-  t
-}) => {
-  if (status === 'idle') return null;
-  if (status === 'checking') {
-    return /*#__PURE__*/_jsx(Text, {
-      style: [styles.mutedText, {
-        color: theme.colors.textSecondary
-      }],
-      children: t('signup.usernameChecking') || 'Checking…'
-    });
-  }
-  if (status === 'available') {
-    return /*#__PURE__*/_jsx(Text, {
-      style: [styles.mutedText, {
-        color: theme.colors.success
-      }],
-      children: t('signup.usernameAvailable') || 'Available'
-    });
-  }
-  return /*#__PURE__*/_jsx(Text, {
-    style: [styles.mutedText, {
-      color: theme.colors.error
-    }],
-    children: t('signup.usernameTaken') || 'This username is taken'
-  });
-};
-const SignUpView = ({
-  snapshot,
-  theme,
-  t,
-  oxyServices,
-  passkeyMode,
-  onCreateWithPasskey,
-  createPending,
-  onOpenHub,
-  onBackToSignIn
-}) => {
-  const [username, setUsername] = useState('');
-  const {
-    status: usernameStatus,
-    check: checkUsername
-  } = useUsernameAvailability(oxyServices, t);
-  const canSubmit = username.trim().length >= 3 && usernameStatus === 'available' && !createPending;
-
-  // Native — Commons owns identity creation. Mirrors the QR view's own
-  // commonsAvailability branch: deep-link straight in when installed, else
-  // lead with the same "Get Commons" fallback.
-  if (!isWebBrowser()) {
-    const commonsInstalled = snapshot.commonsAvailability === 'available';
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.centeredBlock,
-      children: [/*#__PURE__*/_jsx(Button, {
-        variant: "primary",
-        onPress: () => void Linking.openURL(commonsInstalled ? COMMONS_CREATE_IDENTITY_URL : getCommonsAcquisitionUrl(Platform.OS)),
-        style: styles.primaryButton,
-        children: commonsInstalled ? t('signup.createInCommons') || 'Create your identity in Commons' : t('accountSwitcher.getCommons') || 'Get Commons'
-      }), /*#__PURE__*/_jsx(SignInFooterLink, {
-        theme: theme,
-        t: t,
-        onPress: onBackToSignIn
-      })]
-    });
-  }
-
-  // Web, first-party Oxy origin. Commons leads (owner mandate: it's ALWAYS
-  // the priority path, everywhere the two appear) with a "Get Commons" CTA;
-  // passkey creation is the de-emphasized alternative underneath for someone
-  // who doesn't want to install anything — secondary button, introduced by
-  // its own "No Commons?" framing, same subordination as the QR view's link.
-  if (passkeyMode === 'direct') {
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.signInBlock,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.qrHeadline, {
-          color: theme.colors.text
-        }],
-        children: t('signup.commonsHeadline') || 'Create your identity in Commons'
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.mutedText, {
-          color: theme.colors.textSecondary
-        }],
-        children: t('signup.commonsExplainer') || 'Commons is your full self-custody Oxy identity — one app, works everywhere.'
-      }), /*#__PURE__*/_jsx(Button, {
-        variant: "primary",
-        onPress: () => void Linking.openURL(getCommonsAcquisitionUrl(Platform.OS)),
-        style: styles.primaryButton,
-        children: t('accountSwitcher.getCommons') || 'Get Commons'
-      }), /*#__PURE__*/_jsx(Dividerish, {
-        theme: theme,
-        label: t('signin.or') || 'or'
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.mutedText, {
-          color: theme.colors.textSecondary
-        }],
-        children: t('signup.passkeyAlternative') || "No Commons? Create a passkey on this device instead"
-      }), /*#__PURE__*/_jsx(TextInput, {
-        style: [styles.usernameInput, {
-          borderColor: theme.colors.border,
-          color: theme.colors.text
-        }],
-        placeholder: t('signup.usernamePlaceholder') || 'Choose a username',
-        placeholderTextColor: theme.colors.textSecondary,
-        value: username,
-        autoCapitalize: "none",
-        autoCorrect: false,
-        autoComplete: "username",
-        onChangeText: value => {
-          setUsername(value);
-          checkUsername(value.trim());
-        },
-        testID: "signup-username-input"
-      }), /*#__PURE__*/_jsx(UsernameStatusText, {
-        status: usernameStatus,
-        theme: theme,
-        t: t
-      }), /*#__PURE__*/_jsx(Button, {
-        variant: "secondary",
-        onPress: () => void onCreateWithPasskey(username.trim()),
-        disabled: !canSubmit,
-        style: styles.secondaryButton,
-        testID: "signup-create-button",
-        children: createPending ? t('signup.creating') || 'Creating…' : t('signup.createAccount') || 'Create account'
-      }), /*#__PURE__*/_jsx(SignInFooterLink, {
-        theme: theme,
-        t: t,
-        onPress: onBackToSignIn
-      })]
-    });
-  }
-
-  // Web, non-Oxy origin (b2): passkey creation can't run locally here — the
-  // same WebAuthn RP-ID boundary as sign-in — so this opens the SAME
-  // auth.oxy.so passkey hub popup `QrView`'s "No Commons?" link uses.
-  // Completing EITHER a sign-in OR a fresh sign-up there relays the resulting
-  // session back via the SAME poll/socket engine `showQr` drives.
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.centeredBlock,
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: [styles.mutedText, {
-        color: theme.colors.textSecondary
-      }],
-      children: t('signup.hubExplainer') || 'Create your Oxy ID in a secure window, then come right back.'
-    }), /*#__PURE__*/_jsx(Button, {
-      variant: "primary",
-      onPress: onOpenHub,
-      style: styles.primaryButton,
-      children: t('signup.continueInWindow') || 'Continue in a new window'
-    }), /*#__PURE__*/_jsx(SignInFooterLink, {
-      theme: theme,
-      t: t,
-      onPress: onBackToSignIn
-    })]
+    onContinueWithOxy: () => void controller.signInWithOxy(),
+    alternatives: alternatives
   });
 };
 
@@ -1439,7 +382,12 @@ const EMPTY_SNAPSHOT = {
     authorizeCode: null,
     qrPayload: null,
     expiresAt: null,
-    error: null
+    error: null,
+    route: null,
+    routeFailed: false,
+    pushSentAt: null,
+    openedAt: null,
+    progress: 'idle'
   },
   commonsAvailability: 'unknown'
 };