@oxyhq/services 22.0.0 → 22.1.0

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

@@ -3,24 +3,13 @@
 /**
  * OxyAccountDialog — the ONE unified account dialog for `@oxyhq/services`.
  *
- * A thin React Native binding over the headless `AccountDialogController` in
- * `@oxyhq/core` (bound via `useSyncExternalStore`), presented as a Bloom `<Dialog>`.
- * One surface for account switching and sign-in — data and state machine live in core.
- *
- * Views (from `snapshot.view`):
- *  - `accounts` — the unified `SwitchableAccount[]` list (device sign-ins ∪ graph
- *    accounts). Tapping a row switches through `controller.switchTo(accountId)`
- *    (the uniform switch), the active row is flagged, and a "+ Add account" row
- *    opens the sign-in entry. This is what `ProfileButton` opens.
- *  - `add` / `signin` — the sign-in entry: primary "Sign in with Oxy" (device
- *    flow), "Scan a QR", and a secondary "Use a password" hand-off that opens
- *    auth.oxy.so (password + 2FA are NOT in the SDK).
- *  - `qr` — the cross-device QR handoff + its waiting state.
- *
- * Per-account color re-theming uses Bloom's `APP_COLOR_PRESETS` + `BloomColorScope`
- * (same visual language auth.oxy.so uses). Base theming is `useTheme()` + a
- * `StyleSheet`, so the dialog renders correctly in EVERY consumer — including apps
- * that do not use NativeWind (e.g. the accounts app).
+ * Bloom `<Dialog>` chrome (header, back button, placement, scroll body) around
+ * the headless chooser logic, which lives in `OxyAuthChooser` — the account
+ * switcher, sign-in, sign-up, and QR views are ALL there, extracted so the
+ * same chooser can be mounted bare by a future host with no Dialog chrome
+ * (e.g. an auth.oxy.so hub page driving the cross-origin passkey popup, b2).
+ * This file owns ONLY the chrome: the title/subtitle per view, the back
+ * button, and the Bloom `<Dialog>` surface itself.
  *
  * The surface is Bloom's `<Dialog>` (`@oxyhq/bloom/dialog`) with a responsive
  * `placement` — a bottom sheet on narrow viewports, a centered card on wide ones.
@@ -36,50 +25,22 @@
  * Backdrop / swipe-to-dismiss is disabled (`dismissOnBackdrop={false}`) on purpose:
  * Bloom's controlled `bottom` placement does not fire `onClose` on a gesture or
  * backdrop dismissal, so allowing it would desync `isAccountDialogOpen` from the
- * sheet and block reopening. The header close button (and a successful switch)
- * drive `closeAccountDialog`, which flips `open` and runs the exit animation.
+ * sheet and block reopening. The header close button (and `OxyAuthChooser`'s
+ * `onComplete`) drive `closeAccountDialog`, which flips `open` and runs the exit
+ * animation.
  */
 
-import { useCallback, useMemo, useState, useSyncExternalStore } from 'react';
+import { useCallback, useSyncExternalStore } from 'react';
 import { Pressable, ScrollView, StyleSheet, View } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import QRCode from 'react-native-qrcode-svg';
-import { Avatar } from '@oxyhq/bloom/avatar';
-import { Button } from '@oxyhq/bloom/button';
 import { Dialog } from '@oxyhq/bloom/dialog';
 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 { useQueryClient } from '@tanstack/react-query';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from "../context/OxyContext.js";
 import { useI18n } from "../hooks/useI18n.js";
-import { isWebBrowser } from "../utils/isWebBrowser.js";
+import OxyAuthChooser from "./OxyAuthChooser.js";
 import { LogoIcon } from "./logo/LogoIcon.js";
-
-/** Diameter of a row avatar. */
 import { jsx as _jsx, jsxs as _jsxs } 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;
-
-/**
- * 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 unified account dialog. Mounted once by `OxyProvider`; opened imperatively
  * via `useOxy().openAccountDialog(view?)` or imperative `openAccountDialog('signin')`.
@@ -88,93 +49,26 @@ const OxyAccountDialog = () => {
   const {
     accountDialogController: controller,
     isAccountDialogOpen,
-    closeAccountDialog,
-    showBottomSheet,
-    logoutAll,
-    refreshAccounts,
-    signInWithPasskey
+    closeAccountDialog
   } = useOxy();
   const theme = useTheme();
   const {
     t
   } = useI18n();
-  const queryClient = useQueryClient();
 
-  // Passkey sign-in is offered ONLY on a first-party Oxy web origin (a credential
-  // minted for `oxy.so` can only be asserted there or on a loopback dev host).
-  // Off the web / on a non-Oxy origin the button is hidden entirely (a hub popup
-  // for arbitrary web origins is a later phase). This is environment-static.
-  const passkeyAvailable = useMemo(() => isWebBrowser() && isOxyRpOrigin(), []);
-  const [passkeyPending, setPasskeyPending] = useState(false);
-  const [passkeyError, setPasskeyError] = useState(null);
-  const handleSignInWithPasskey = useCallback(async () => {
-    if (passkeyPending) return;
-    setPasskeyPending(true);
-    setPasskeyError(null);
-    try {
-      await signInWithPasskey();
-      closeAccountDialog();
-    } catch (error) {
-      // A cancelled/failed ceremony keeps the dialog open so the user can retry
-      // or fall back to another method — surface a concise message, never swallow.
-      setPasskeyError(error instanceof Error && error.message ? error.message : 'Passkey sign-in failed.');
-    } finally {
-      setPasskeyPending(false);
-    }
-  }, [passkeyPending, signInWithPasskey, closeAccountDialog]);
-
-  // 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.
+  // A lightweight, header-only binding to the same controller `OxyAuthChooser`
+  // binds independently — cheap, and the established pattern here (
+  // `useSwitchableAccounts` also binds to this controller on its own).
   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 [switching, setSwitching] = useState(false);
-  const handleSwitch = useCallback(async accountId => {
-    if (!controller || switching) return;
-    if (accountId === snapshot.activeAccountId) {
-      closeAccountDialog();
-      return;
-    }
-    setSwitching(true);
-    try {
-      await controller.switchTo(accountId);
-      // A switch succeeds unless the controller recorded an error. On success
-      // reload the app's account graph and drop cached account-scoped data so
-      // the new active identity re-fetches — the same side effects the
-      // context's own `switchToAccount` performs.
-      if (!controller.getSnapshot().error) {
-        void refreshAccounts();
-        queryClient.invalidateQueries();
-        closeAccountDialog();
-      }
-    } finally {
-      setSwitching(false);
-    }
-  }, [controller, switching, snapshot.activeAccountId, closeAccountDialog, refreshAccounts, queryClient]);
-  const handleManage = useCallback(() => {
-    closeAccountDialog();
-    showBottomSheet?.('ManageAccount');
-  }, [closeAccountDialog, showBottomSheet]);
-  const handleSignOutAll = useCallback(() => {
-    closeAccountDialog();
-    void logoutAll();
-  }, [closeAccountDialog, logoutAll]);
-  const handlers = useMemo(() => ({
-    onSwitch: accountId => {
-      void handleSwitch(accountId);
-    },
-    onAdd: () => controller?.add(),
-    onManage: handleManage,
-    onClose: closeAccountDialog
-  }), [handleSwitch, controller, handleManage, closeAccountDialog]);
   if (!controller) {
     return null;
   }
   const {
     view
   } = snapshot;
-  const showBack = view === 'qr' || view === 'add' && snapshot.accounts.length > 0;
+  const showBack = view === 'qr' || view === 'signup' || view === 'add' && snapshot.accounts.length > 0;
   return /*#__PURE__*/_jsxs(Dialog, {
     open: isAccountDialogOpen,
     onClose: closeAccountDialog,
@@ -196,26 +90,8 @@ const OxyAccountDialog = () => {
       style: styles.body,
       contentContainerStyle: styles.bodyContent,
       showsVerticalScrollIndicator: false,
-      children: view === 'accounts' ? /*#__PURE__*/_jsx(AccountsView, {
-        snapshot: snapshot,
-        theme: theme,
-        t: t,
-        handlers: handlers
-      }) : view === 'qr' ? /*#__PURE__*/_jsx(QrView, {
-        snapshot: snapshot,
-        theme: theme,
-        t: t,
-        onRetry: () => void controller.showQr()
-      }) : /*#__PURE__*/_jsx(SignInView, {
-        snapshot: snapshot,
-        theme: theme,
-        t: t,
-        handlers: handlers,
-        onSignInWithOxy: () => void controller.signInWithOxy(),
-        onScanQr: () => void controller.showQr(),
-        onSignInWithPasskey: passkeyAvailable ? () => void handleSignInWithPasskey() : undefined,
-        passkeyPending: passkeyPending,
-        passkeyError: passkeyError
+      children: /*#__PURE__*/_jsx(OxyAuthChooser, {
+        onComplete: closeAccountDialog
       })
     })]
   });
@@ -287,280 +163,6 @@ const DialogHeader = ({
   });
 };
 
-// ---------------------------------------------------------------------------
-// Accounts view
-// ---------------------------------------------------------------------------
-
-const AccountsView = ({
-  snapshot,
-  theme,
-  t,
-  handlers
-}) => {
-  if (snapshot.loading && snapshot.accounts.length === 0) {
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.centeredBlock,
-      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…'
-      })]
-    });
-  }
-  return /*#__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__*/_jsxs(Pressable, {
-      style: [styles.addRow, {
-        borderColor: theme.colors.border
-      }],
-      onPress: handlers.onAdd,
-      accessibilityRole: "button",
-      accessibilityLabel: t('signin.addAccountTitle') || 'Add another account',
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [styles.addBadge, {
-          borderColor: theme.colors.border
-        }],
-        children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
-          name: "plus",
-          size: 20,
-          color: theme.colors.textSecondary
-        })
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.rowName, {
-          color: theme.colors.textSecondary
-        }],
-        children: t('signin.addAccountTitle') || 'Add another account'
-      })]
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.footerLinks,
-      children: /*#__PURE__*/_jsx(Pressable, {
-        onPress: handlers.onManage,
-        accessibilityRole: "button",
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.linkText, {
-            color: theme.colors.primary
-          }],
-          children: t('accountMenu.manage') || 'Manage accounts'
-        })
-      })
-    })]
-  });
-};
-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)
-// ---------------------------------------------------------------------------
-
-const SignInView = ({
-  snapshot,
-  theme,
-  t,
-  handlers,
-  onSignInWithOxy,
-  onScanQr,
-  onSignInWithPasskey,
-  passkeyPending,
-  passkeyError
-}) => /*#__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: "Sign in with Oxy"
-  }), onSignInWithPasskey ? /*#__PURE__*/_jsx(Button, {
-    variant: "secondary",
-    onPress: onSignInWithPasskey,
-    disabled: passkeyPending,
-    style: styles.secondaryButton,
-    testID: "passkey-signin-button",
-    children: passkeyPending ? t('accountSwitcher.passkeySigningIn') || 'Signing in…' : t('accountSwitcher.signInWithPasskey') || 'Sign in with a passkey'
-  }) : null, passkeyError ? /*#__PURE__*/_jsx(Text, {
-    style: [styles.errorText, {
-      color: theme.colors.error
-    }],
-    children: passkeyError
-  }) : null, /*#__PURE__*/_jsx(Button, {
-    variant: "secondary",
-    onPress: onScanQr,
-    style: styles.secondaryButton,
-    children: t('accountSwitcher.scanQr') || 'Scan a QR from another device'
-  })]
-});
-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
-    }]
-  })]
-});
-
-// ---------------------------------------------------------------------------
-// QR view
-// ---------------------------------------------------------------------------
-
-const QrView = ({
-  snapshot,
-  theme,
-  t,
-  onRetry
-}) => {
-  const {
-    signIn
-  } = snapshot;
-  if (signIn.phase === 'error') {
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.centeredBlock,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.errorText, {
-          color: theme.colors.error
-        }],
-        children: signIn.error || 'Sign-in failed. Please try again.'
-      }), /*#__PURE__*/_jsx(Button, {
-        variant: "secondary",
-        onPress: onRetry,
-        style: styles.secondaryButton,
-        children: t('common.actions.tryAgain') || 'Try again'
-      })]
-    });
-  }
-  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(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 any Oxy app and approve.'
-    })]
-  });
-};
-
 // ---------------------------------------------------------------------------
 // Copy + helpers
 // ---------------------------------------------------------------------------
@@ -574,8 +176,13 @@ function headerCopy(view, accountCount, t) {
       };
     case 'qr':
       return {
-        title: t('accountSwitcher.scanTitle') || 'Scan with Oxy',
-        subtitle: t('accountSwitcher.scanSubtitle') || 'Approve from your phone.'
+        title: t('accountSwitcher.scanTitle') || 'Sign in with Oxy',
+        subtitle: t('accountSwitcher.scanSubtitle') || 'Scan with Commons on your phone.'
+      };
+    case 'signup':
+      return {
+        title: t('signup.title') || 'Create your account',
+        subtitle: t('signup.subtitle') || 'One identity for the whole ecosystem.'
       };
     default:
       return accountCount > 0 ? {
@@ -587,12 +194,6 @@ function headerCopy(view, accountCount, t) {
       };
   }
 }
-
-/** Current document URL on web; `undefined` where `location` is absent. */
-function currentHref() {
-  const location = globalThis.location;
-  return typeof location?.href === 'string' ? location.href : undefined;
-}
 const EMPTY_SNAPSHOT = {
   view: 'accounts',
   accounts: [],
@@ -606,7 +207,8 @@ const EMPTY_SNAPSHOT = {
     qrPayload: null,
     expiresAt: null,
     error: null
-  }
+  },
+  commonsAvailability: 'unknown'
 };
 const styles = StyleSheet.create({
   header: {
@@ -646,112 +248,6 @@ const styles = StyleSheet.create({
   bodyContent: {
     paddingTop: 4,
     paddingBottom: 4
-  },
-  rows: {
-    width: '100%',
-    gap: 8
-  },
-  accountRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 12,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderRadius: 16,
-    paddingVertical: 10,
-    paddingHorizontal: 12
-  },
-  rowDisabled: {
-    opacity: 0.6
-  },
-  avatarRing: {
-    borderRadius: 9999,
-    borderWidth: 2,
-    padding: 1
-  },
-  rowMeta: {
-    flex: 1,
-    minWidth: 0
-  },
-  rowName: {
-    fontSize: 15,
-    fontWeight: '600'
-  },
-  rowHandle: {
-    fontSize: 12.5,
-    marginTop: 1
-  },
-  addRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 12,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderStyle: 'dashed',
-    borderRadius: 16,
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    marginTop: 8
-  },
-  addBadge: {
-    width: ROW_AVATAR_SIZE,
-    height: ROW_AVATAR_SIZE,
-    borderRadius: 9999,
-    borderWidth: StyleSheet.hairlineWidth,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  footerLinks: {
-    alignItems: 'center',
-    marginTop: 16
-  },
-  linkText: {
-    fontSize: 14,
-    fontWeight: '600'
-  },
-  signInBlock: {
-    width: '100%'
-  },
-  primaryButton: {
-    width: '100%',
-    borderRadius: 14,
-    marginTop: 8
-  },
-  secondaryButton: {
-    width: '100%',
-    borderRadius: 14,
-    marginTop: 10
-  },
-  dividerRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    width: '100%',
-    marginVertical: 14
-  },
-  dividerLine: {
-    flex: 1,
-    height: StyleSheet.hairlineWidth
-  },
-  dividerText: {
-    marginHorizontal: 12,
-    fontSize: 13
-  },
-  centeredBlock: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 12,
-    paddingVertical: 24
-  },
-  mutedText: {
-    fontSize: 14,
-    textAlign: 'center'
-  },
-  errorText: {
-    fontSize: 14,
-    textAlign: 'center'
-  },
-  qrPlate: {
-    padding: 16,
-    borderRadius: 16,
-    backgroundColor: QR_PLATE_BG
   }
 });
 export default OxyAccountDialog;