@oxyhq/services 22.0.0 → 22.1.0

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

@@ -0,0 +1,878 @@
+"use strict";
+
+/**
+ * OxyAuthChooser — the account switcher + sign-in/sign-up surface, WITHOUT
+ * any dialog chrome.
+ *
+ * A thin React Native binding over the headless `AccountDialogController` in
+ * `@oxyhq/core` (bound via `useSyncExternalStore`) — the same data/state
+ * machine {@link OxyAccountDialog} renders, extracted so it can be mounted in
+ * TWO places: wrapped in Bloom's `<Dialog>` by `OxyAccountDialog` (the normal
+ * in-app surface), and mounted bare by a future auth.oxy.so hub page for the
+ * 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.
+ *
+ * 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 this renders correctly in EVERY consumer — including apps
+ * that do not use NativeWind (e.g. the accounts app).
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { Linking, Platform, Pressable, TextInput, 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 { 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 { useOxy } from "../context/OxyContext.js";
+import { useI18n } from "../hooks/useI18n.js";
+import { isWebBrowser } from "../utils/isWebBrowser.js";
+import { getCommonsAcquisitionUrl } from "../utils/commonsStoreLinks.js";
+import { authChooserStyles as styles } from "./oxyAuthChooserStyles.js";
+
+/** Diameter of a row avatar. */
+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;
+/** Commons' own identity-creation deep link (mirrors the `approve`/`attest`/`card` intents). */
+const COMMONS_CREATE_IDENTITY_URL = 'oxycommons://create-identity';
+/**
+ * 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 `OxyAccountDialog`
+ * (wrapped in Bloom's `<Dialog>`) today; mountable bare by any future host that
+ * supplies its own `onComplete`.
+ */
+const OxyAuthChooser = ({
+  onComplete
+}) => {
+  const {
+    accountDialogController: controller,
+    showBottomSheet,
+    refreshAccounts,
+    signInWithPasskey,
+    registerWithPasskey,
+    oxyServices
+  } = useOxy();
+  const theme = useTheme();
+  const {
+    t
+  } = useI18n();
+  const queryClient = useQueryClient();
+
+  // A credential minted for `oxy.so` can only be asserted there (or a loopback
+  // dev host) — this is a hard WebAuthn RP-ID boundary, not feature detection,
+  // so it is the ONLY gate on the passkey affordances. `isOxyRpOrigin()` is
+  // `false` on native by construction (no `location`), so no separate native
+  // check is needed.
+  const passkeyAvailable = useMemo(() => isOxyRpOrigin(), []);
+  const [signInPasskeyPending, setSignInPasskeyPending] = useState(false);
+  const [signInPasskeyError, setSignInPasskeyError] = useState(null);
+  const handleSignInWithPasskey = useCallback(async () => {
+    if (signInPasskeyPending) return;
+    setSignInPasskeyPending(true);
+    setSignInPasskeyError(null);
+    try {
+      await signInWithPasskey();
+      onComplete?.();
+    } catch (error) {
+      // A cancelled/failed ceremony keeps the view open so the user can retry
+      // or fall back to the QR — surface a concise message, never swallow.
+      setSignInPasskeyError(error instanceof Error && error.message ? error.message : 'Passkey sign-in failed.');
+    } finally {
+      setSignInPasskeyPending(false);
+    }
+  }, [signInPasskeyPending, signInWithPasskey, onComplete]);
+  const [createPasskeyPending, setCreatePasskeyPending] = useState(false);
+  const [createPasskeyError, setCreatePasskeyError] = useState(null);
+  const handleCreateWithPasskey = useCallback(async username => {
+    if (createPasskeyPending) return;
+    setCreatePasskeyPending(true);
+    setCreatePasskeyError(null);
+    try {
+      await registerWithPasskey({
+        username
+      });
+      onComplete?.();
+    } catch (error) {
+      setCreatePasskeyError(error instanceof Error && error.message ? error.message : 'Account creation failed.');
+    } finally {
+      setCreatePasskeyPending(false);
+    }
+  }, [createPasskeyPending, registerWithPasskey, onComplete]);
+
+  // 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;
+
+  // 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]);
+  const [switching, setSwitching] = useState(false);
+  const handleSwitch = useCallback(async accountId => {
+    if (!controller || switching) return;
+    if (accountId === snapshot.activeAccountId) {
+      onComplete?.();
+      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();
+        onComplete?.();
+      }
+    } finally {
+      setSwitching(false);
+    }
+  }, [controller, switching, snapshot.activeAccountId, onComplete, refreshAccounts, queryClient]);
+  const handleManage = useCallback(() => {
+    onComplete?.();
+    showBottomSheet?.('ManageAccount');
+  }, [onComplete, showBottomSheet]);
+  const handlers = useMemo(() => ({
+    onSwitch: accountId => {
+      void handleSwitch(accountId);
+    },
+    onAdd: () => controller?.add(),
+    onManage: handleManage
+  }), [handleSwitch, controller, handleManage]);
+  if (!controller) {
+    return null;
+  }
+  if (view === 'accounts') {
+    return /*#__PURE__*/_jsx(AccountsView, {
+      snapshot: snapshot,
+      theme: theme,
+      t: t,
+      handlers: handlers
+    });
+  }
+  if (view === 'qr') {
+    return /*#__PURE__*/_jsx(QrView, {
+      snapshot: snapshot,
+      theme: theme,
+      t: t,
+      onRetry: () => void controller.showQr(),
+      passkeyAvailable: passkeyAvailable,
+      onSignInWithPasskey: () => void handleSignInWithPasskey(),
+      passkeyPending: signInPasskeyPending,
+      passkeyError: signInPasskeyError,
+      onCreateAccount: () => controller.startSignup()
+    });
+  }
+  if (view === 'signup') {
+    return /*#__PURE__*/_jsx(SignUpView, {
+      snapshot: snapshot,
+      theme: theme,
+      t: t,
+      oxyServices: oxyServices,
+      passkeyAvailable: passkeyAvailable,
+      onCreateWithPasskey: handleCreateWithPasskey,
+      createPending: createPasskeyPending,
+      createError: createPasskeyError,
+      onBackToSignIn: () => controller.setView('signin')
+    });
+  }
+  return /*#__PURE__*/_jsx(SignInView, {
+    snapshot: snapshot,
+    theme: theme,
+    t: t,
+    handlers: handlers,
+    onSignInWithOxy: () => void controller.signInWithOxy(),
+    onScanQr: () => void controller.showQr(),
+    onCreateAccount: () => controller.startSignup()
+  });
+};
+
+// ---------------------------------------------------------------------------
+// Accounts view
+// ---------------------------------------------------------------------------
+
+/**
+ * Inline error banner for `snapshot.error` (the account-list / switch-failure
+ * error — distinct from `snapshot.signIn.error`, which `QrView` already
+ * renders). `AccountsView` and `SignInView` previously swallowed it: a
+ * blocked/failed switch left the user with no feedback outside the QR view.
+ */
+const ErrorBanner = ({
+  error,
+  theme
+}) => {
+  if (!error) return null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.errorBanner, {
+      backgroundColor: theme.colors.negativeSubtle
+    }],
+    children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+      name: "alert-circle-outline",
+      size: 18,
+      color: theme.colors.error
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [styles.errorBannerText, {
+        color: theme.colors.error
+      }],
+      children: error
+    })]
+  });
+};
+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: [/*#__PURE__*/_jsx(ErrorBanner, {
+      error: snapshot.error,
+      theme: theme
+    }), 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) — 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.
+// ---------------------------------------------------------------------------
+
+const SignInView = ({
+  snapshot,
+  theme,
+  t,
+  handlers,
+  onSignInWithOxy,
+  onScanQr,
+  onCreateAccount
+}) => /*#__PURE__*/_jsxs(View, {
+  style: styles.signInBlock,
+  children: [/*#__PURE__*/_jsx(ErrorBanner, {
+    error: snapshot.error,
+    theme: theme
+  }), 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,
+  passkeyError,
+  onCreateAccount
+}) => {
+  const {
+    signIn,
+    commonsAvailability
+  } = snapshot;
+  const [showQrAnyway, setShowQrAnyway] = useState(false);
+  const passkeyLink = passkeyAvailable && signIn.phase !== 'authorized' ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__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'
+      })
+    }), passkeyError ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.errorText, {
+        color: theme.colors.error
+      }],
+      children: passkeyError
+    }) : null]
+  }) : 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') {
+    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'
+      }), 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) {
+  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;
+        setStatus('idle'); // network/error — don't block on a stale verdict
+      });
+    }, 400);
+  }, [oxyServices]);
+  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,
+  passkeyAvailable,
+  onCreateWithPasskey,
+  createPending,
+  createError,
+  onBackToSignIn
+}) => {
+  const [username, setUsername] = useState('');
+  const {
+    status: usernameStatus,
+    check: checkUsername
+  } = useUsernameAvailability(oxyServices);
+  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 (passkeyAvailable) {
+    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
+      }), createError ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.errorText, {
+          color: theme.colors.error
+        }],
+        children: createError
+      }) : null, /*#__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: passkey creation here requires the cross-origin hub
+  // relay (b2), which has not shipped yet — an honest message beats a button
+  // that would fail.
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.centeredBlock,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: [styles.mutedText, {
+        color: theme.colors.textSecondary
+      }],
+      children: t('signup.notAvailableHere') || "Account creation isn't available in this app yet — create your identity with Commons, or visit oxy.so to sign up with a passkey."
+    }), /*#__PURE__*/_jsx(SignInFooterLink, {
+      theme: theme,
+      t: t,
+      onPress: onBackToSignIn
+    })]
+  });
+};
+
+// ---------------------------------------------------------------------------
+// Empty snapshot (no-provider loading state)
+// ---------------------------------------------------------------------------
+
+const EMPTY_SNAPSHOT = {
+  view: 'accounts',
+  accounts: [],
+  activeAccountId: null,
+  loading: false,
+  error: null,
+  switchingAccountId: null,
+  signIn: {
+    phase: 'idle',
+    authorizeCode: null,
+    qrPayload: null,
+    expiresAt: null,
+    error: null
+  },
+  commonsAvailability: 'unknown'
+};
+export default OxyAuthChooser;
+//# sourceMappingURL=OxyAuthChooser.js.map