@oxyhq/services 17.0.0 → 18.0.0

package/README.md

@@ -1,12 +1,10 @@
 # @oxyhq/services
 
-A comprehensive TypeScript UI library for the Oxy API providing authentication, user management, and UI components for React Native and Expo applications.
+A comprehensive TypeScript UI library for the Oxy API providing authentication, user management, and UI components for React Native, Expo, and web (React Native Web) applications.
 
-**Current published version: 6.10.6**
-
-> **For web apps (Vite, Next.js, CRA):** Use [`@oxyhq/auth`](../auth) for authentication and [`@oxyhq/core`](../core) for types and services.
+> **For web apps (Vite + React Native Web):** Use this same package — `OxyProvider` is universal. See the [Platform Guide](./PLATFORM_GUIDE.md).
 >
-> **For backend / Node.js:** Use [`@oxyhq/core`](../core) only.
+> **For backend / Node.js:** Use [`@oxyhq/core`](../core) only (`@oxyhq/core/server` for auth middleware).
 >
 > **For the full platform guide:** See [PLATFORM_GUIDE.md](./PLATFORM_GUIDE.md).
 
@@ -28,8 +26,8 @@ A comprehensive TypeScript UI library for the Oxy API providing authentication,
 ## Features
 
 - **Zero-Config Authentication**: Automatic token management and refresh
-- **Cross-Domain SSO**: Sign in once, authenticated everywhere (FedCM, popup, redirect)
-- **Universal Provider**: Single `OxyProvider` works on iOS, Android, and Expo Web
+- **Device-First Sessions**: Sign in once per device; every Oxy app on the device restores silently and syncs account changes live over Socket.IO
+- **Universal Provider**: Single `OxyProvider` works on iOS, Android, Expo Web, and React Native Web
 - **UI Components**: Pre-built components for auth, profiles, and more
 - **Inter Font Included**: Default Oxy ecosystem font with automatic loading
 - **Cross-Platform**: Works in Expo and React Native (iOS, Android, Web)
@@ -44,11 +42,11 @@ The OxyHQ SDK is split into three packages:
 
 | Package | Use Case | Dependencies |
 |---------|----------|--------------|
-| `@oxyhq/services` | Expo / React Native apps | Full (RN, Expo) |
-| `@oxyhq/auth` | Web apps (Vite, Next.js) | React only |
-| `@oxyhq/core` | All platforms (types, API client, crypto) | None |
+| `@oxyhq/services` | Expo / React Native / Web (React Native Web) | Full (RN, Expo) |
+| `@oxyhq/core` | All platforms (types, API client, crypto, server middleware) | None |
+| `@oxyhq/contracts` | Shared API schemas (Zod) | zod only |
 
-This package (`@oxyhq/services`) is for **Expo and React Native** applications. It provides `OxyProvider`, UI components, screens, bottom sheet routing, fonts, and hooks.
+This package (`@oxyhq/services`) is the **single UI SDK** for every React surface. It provides `OxyProvider`, the unified account dialog, UI components, screens, bottom sheet routing, fonts, and hooks.
 
 See [PLATFORM_GUIDE.md](./PLATFORM_GUIDE.md) for the complete architecture guide.
 
@@ -95,7 +93,10 @@ import { OxyProvider, useAuth } from '@oxyhq/services';
 
 function App() {
   return (
-    <OxyProvider baseURL="https://api.oxy.so">
+    <OxyProvider
+      baseURL="https://api.oxy.so"
+      clientId={process.env.EXPO_PUBLIC_OXY_CLIENT_ID}
+    >
       <YourApp />
     </OxyProvider>
   );
@@ -246,7 +247,7 @@ import { OxyProvider } from '@oxyhq/services';
 
 function App() {
   return (
-    <OxyProvider baseURL="https://cloud.oxy.so">
+    <OxyProvider baseURL="https://api.oxy.so">
       <YourApp />
     </OxyProvider>
   );
@@ -384,22 +385,24 @@ const {
   user,
   isAuthenticated,
   isLoading,
+  canUsePrivateApi,   // Gate private API calls on this
+  isPrivateApiPending,
   error,
 
-  // Identity management (Public Key Authentication)
-  createIdentity,     // Create new identity with recovery phrase
-  importIdentity,     // Import identity from recovery phrase
+  // Identity (public-key auth; identities are created in Commons by Oxy)
   signIn,             // Sign in with stored identity
   hasIdentity,        // Check if identity exists on device
   getPublicKey,       // Get stored public key
 
-  // Session management
-  logout,
+  // Account dialog (switcher + sign-in)
+  openAccountDialog,
+  closeAccountDialog,
 
   // Session management
+  logout,
   sessions,
   activeSessionId,
-  switchSession,
+  switchToAccount,    // Switch active account (device session + account graph)
   removeSession
 } = useOxy();
 ```
@@ -410,7 +413,8 @@ const {
 
 ```typescript
 <OxyProvider
-  baseURL="https://api.oxy.so"           // API base URL
+  baseURL="https://api.oxy.so"            // API base URL
+  clientId="oxy_dk_..."                   // Registered Application credential (Oxy Console)
   storageKeyPrefix="oxy_session"          // Storage key prefix
   onAuthStateChange={(user) => {}}        // Auth state callback
   onError={(error) => {}}                 // Error callback
@@ -424,6 +428,7 @@ const {
 ```bash
 # .env
 EXPO_PUBLIC_API_URL=https://api.oxy.so
+EXPO_PUBLIC_OXY_CLIENT_ID=oxy_dk_...
 ```
 
 ### Custom Configuration
@@ -432,46 +437,33 @@ EXPO_PUBLIC_API_URL=https://api.oxy.so
 import { OxyServices } from '@oxyhq/core';
 
 const oxy = new OxyServices({
-  baseURL: process.env.OXY_API_URL || 'https://cloud.oxy.so'
+  baseURL: process.env.OXY_API_URL || 'https://api.oxy.so'
 });
 ```
 
 ## Authentication
 
-Oxy supports **public/private key cryptography** (ECDSA secp256k1) as the primary identity system, with optional password-based accounts for the web gateway. Users manage their cryptographic identity in the **Oxy Accounts** app, and other apps can integrate "Sign in with Oxy" for seamless authentication.
-
-### Public Key Authentication
-
-```typescript
-import { useOxy } from '@oxyhq/services';
+Oxy supports **public/private key cryptography** (ECDSA secp256k1) as the primary identity system, with optional password-based accounts. Users create and manage their cryptographic identity in the **Commons by Oxy** app (the native identity vault); every app integrates the same **"Sign in with Oxy"** surface.
 
-function AuthScreen() {
-  const { createIdentity, importIdentity, signIn, hasIdentity } = useOxy();
+### How it works (device-first)
 
-  // Create new identity (in Oxy Accounts app)
-  const handleCreate = async () => {
-    const { user, recoveryPhrase } = await createIdentity('username', 'email');
-    // Show recoveryPhrase to user - they must save it!
-  };
+- **Cold boot is silent.** On mount, `OxyProvider` restores the ambient device session — the server-side `DeviceSession` records which accounts are signed in on this device and which one is active. No redirects, no browser identity APIs, no UI. See [device sessions](../../docs/auth/device-session.md).
+- **Interactive sign-in is a dialog.** `useAuth().signIn()` or `useOxy().openAccountDialog('signin')` opens the unified account dialog (Bloom Dialog — bottom sheet on phones, centered on desktop): account switcher, Sign in with Oxy via the Oxy app (QR on web, deep link / shared keychain on native), and a collapsed password form.
+- **Cross-app sync.** Adding, switching, or signing out an account bumps the device-session revision and is pushed over the `session_state` socket event to every Oxy app on the device.
 
-  // Import existing identity
-  const handleImport = async (phrase: string) => {
-    const user = await importIdentity(phrase, 'username', 'email');
-  };
+```tsx
+import { useAuth } from '@oxyhq/services';
 
-  // Sign in with stored identity
-  const handleSignIn = async () => {
-    const user = await signIn();
-  };
-
-  // Check if identity exists
-  const hasStoredIdentity = await hasIdentity();
+function SignInCTA() {
+  const { isAuthenticated, signIn } = useAuth();
+  if (isAuthenticated) return null;
+  return <Button title="Sign in" onPress={() => signIn()} />; // opens the dialog
 }
 ```
 
-### Password Authentication (Web Gateway)
+### Password Authentication
 
-For web gateway flows, Oxy also supports password sign-in (email/username + password). Use the auth gateway (`/login`, `/signup`, `/recover`) for browser-based flows, or call the API directly:
+Oxy also supports password sign-in (email/username + password) — shown collapsed inside the account dialog, or callable directly:
 
 ```typescript
 import { oxyClient } from '@oxyhq/core';
@@ -482,9 +474,9 @@ const session2 = await oxyClient.signIn('username-or-email', 'password');
 
 ### Cross-App Authentication (Sign in with Oxy)
 
-For third-party apps that want to allow users to sign in with their Oxy identity:
+`OxySignInButton` resolves your registered Application (`GET /auth/oauth/client/:clientId`) and picks the right flow:
 
-```typescript
+```tsx
 import { OxySignInButton } from '@oxyhq/services';
 
 function LoginScreen() {
@@ -492,11 +484,10 @@ function LoginScreen() {
 }
 ```
 
-This displays:
-- A QR code that users can scan with Oxy Accounts
-- A button to open Oxy Accounts directly via deep link
+- **Official Oxy apps** (`isOfficial` / first-party types): opens the in-app account dialog.
+- **Third-party apps** (`type: 'third_party'`): starts the standard OAuth 2.0 Authorization Code + PKCE redirect to `auth.oxy.so` (the SDK generates `state` + PKCE via `@oxyhq/core`). Pass `oauthRedirectUri`; on native handle `onOAuthResult` to complete the token exchange.
 
-Web fallback: send users to the auth gateway at `https://accounts.oxy.so/authorize?token=...` to approve the session.
+See the [integration guide](../../docs/auth/integration-guide.md) for Console registration, OAuth endpoints, and backend verification, and [AUTHENTICATION.md](../../docs/AUTHENTICATION.md) for the full model.
 
 ### Documentation
 
@@ -533,9 +524,30 @@ const styles = StyleSheet.create({
 });
 ```
 
+### Account Dialog (auth + switcher)
+
+Sign-in and account switching do **not** use the bottom sheet — they live in the unified account dialog:
+
+```typescript
+import { useOxy } from '@oxyhq/services';
+
+function MyComponent() {
+  const { openAccountDialog } = useOxy();
+
+  return (
+    <Button
+      onPress={() => openAccountDialog('signin')}
+      title="Sign in with Oxy"
+    />
+  );
+}
+```
+
+Views: `'accounts'` (switcher, default), `'signin'`, `'qr'`, `'add'`. The exported `ProfileButton` component opens it for you.
+
 ### Bottom Sheet Routing System
 
-The bottom sheet routing system provides a clean, professional way to display authentication screens, account management, and other UI flows within a modal bottom sheet.
+The bottom sheet routing system provides a clean, professional way to display account management and other non-auth UI flows within a modal bottom sheet.
 
 **Quick Example:**
 
@@ -547,8 +559,8 @@ function MyComponent() {
 
   return (
     <Button
-      onPress={() => showBottomSheet('OxyAuth')}
-      title="Sign in with Oxy"
+      onPress={() => showBottomSheet('ManageAccount')}
+      title="Manage account"
     />
   );
 }
@@ -563,41 +575,10 @@ function MyComponent() {
 - 25+ pre-built screens available
 
 **Available Screens:**
-- `OxyAuth` (Sign in with Oxy - for third-party apps)
-- `ManageAccount`, `CreateManagedAccount`
-- `Profile`, `SessionManagement`, `PaymentGateway`, `TrustCenter`
-- And many more...
-
-**Documentation:**
-For complete documentation, see [Bottom Sheet Routing Guide](./docs/BOTTOM_SHEET_ROUTING.md).
-
-### Using OxyRouter Standalone
-
-If you need to embed the router in your own modal or container instead of using `showBottomSheet()`:
-
-```typescript
-import { Modal } from 'react-native';
-import { useOxy, OxyRouter } from '@oxyhq/services';
-
-function AuthModal({ visible, onRequestClose }: { visible: boolean; onRequestClose: () => void }) {
-  const { oxyServices } = useOxy();
-
-  if (!visible || !oxyServices) return null;
-
-  return (
-    <Modal visible onRequestClose={onRequestClose} animationType="slide">
-      <OxyRouter
-        oxyServices={oxyServices}
-        initialScreen="OxyAuth"
-        onClose={onRequestClose}
-        onAuthenticated={onRequestClose}
-        theme="light"
-        containerWidth={360}
-      />
-    </Modal>
-  );
-}
-```
+- `ManageAccount`, `AccountSettings`, `AccountMembers`, `CreateAccount`
+- `Profile`, `EditProfile`, `PaymentGateway`, `TrustCenter`, `ConnectedApps`
+- `FileManagement`, `LanguageSelector`, `PrivacySettings`, `Preferences`
+- And many more (see `RouteName` in `src/ui/navigation/routes.ts`)
 
 ## Internationalization (i18n)
 
@@ -676,7 +657,7 @@ import { OxyProvider } from '@oxyhq/services';
 
 function App() {
   return (
-    <OxyProvider baseURL="https://cloud.oxy.so">
+    <OxyProvider baseURL="https://api.oxy.so">
       <YourApp />
     </OxyProvider>
   );
@@ -745,10 +726,6 @@ Typed returns are defined in `ui/hooks/queries/paymentTypes.ts` (`Subscription`,
 
 `@oxyhq/core` `OxyServices.verifyChallenge()` plants `setTokens(accessToken, refreshToken ?? '')` internally before returning. `useAuthOperations.performSignIn` no longer needs to hand-plant the token or call a session-token fallback — just await `verifyChallenge` and proceed.
 
-## Silent SSO Run-Once Guard
-
-The cross-page-load deduplication guard lives in the consumer hooks, NOT in `@oxyhq/core`. A core module-level singleton was tried and reverted because it re-evaluates in the Metro web bundle and the guard did not hold. `useWebSSO` in this package owns a module-level `silentSSOAttempted` Set + `ssoSignature(origin|baseURL)` key for cross-mount deduplication, plus a per-instance `hasCheckedRef` fast-path. Do NOT move this guard into a core module-level singleton.
-
 ## Requirements
 
 - **React Native**: 0.76+ (for mobile components)
@@ -775,7 +752,7 @@ import { OxyProvider } from '@oxyhq/services';
 
 function App() {
   return (
-    <OxyProvider baseURL="https://cloud.oxy.so">
+    <OxyProvider baseURL="https://api.oxy.so">
       <UserDashboard />
     </OxyProvider>
   );
@@ -830,7 +807,9 @@ Comprehensive documentation is available in the `/docs` directory:
 
 - **[Getting Started](./GET_STARTED.md)** - Quick start guide for new developers
 - **[Platform Guide](./PLATFORM_GUIDE.md)** - Platform-specific setup guide
-- **[CROSS_DOMAIN_AUTH.md](../../docs/CROSS_DOMAIN_AUTH.md)** - SSO deep dive
+- **[AUTHENTICATION.md](../../docs/AUTHENTICATION.md)** - Authentication model (device-first sessions)
+- **[Device sessions](../../docs/auth/device-session.md)** - DeviceSession API, socket events, multi-account
+- **[Integration guide](../../docs/auth/integration-guide.md)** - Sign in with Oxy for third-party apps
 
 ---
 

package/lib/commonjs/index.js

@@ -69,12 +69,30 @@ Object.defineProperty(exports, "NotificationsScreen", {
     return _NotificationsScreen.default;
   }
 });
+Object.defineProperty(exports, "OXY_OAUTH_CODE_VERIFIER_STORAGE_KEY", {
+  enumerable: true,
+  get: function () {
+    return _OxySignInButton.OXY_OAUTH_CODE_VERIFIER_STORAGE_KEY;
+  }
+});
+Object.defineProperty(exports, "OXY_OAUTH_STATE_STORAGE_KEY", {
+  enumerable: true,
+  get: function () {
+    return _OxySignInButton.OXY_OAUTH_STATE_STORAGE_KEY;
+  }
+});
 Object.defineProperty(exports, "OxyAuthPrompt", {
   enumerable: true,
   get: function () {
     return _OxyAuthPrompt.OxyAuthPrompt;
   }
 });
+Object.defineProperty(exports, "OxyConsentScreen", {
+  enumerable: true,
+  get: function () {
+    return _OxyConsentScreen.OxyConsentScreen;
+  }
+});
 Object.defineProperty(exports, "OxyLogo", {
   enumerable: true,
   get: function () {
@@ -601,6 +619,7 @@ var _Avatar = _interopRequireDefault(require("./ui/components/Avatar.js"));
 var _OxySignInButton = require("./ui/components/OxySignInButton.js");
 var _OxyAuthPrompt = require("./ui/components/OxyAuthPrompt.js");
 var _OxyLogo = _interopRequireDefault(require("./ui/components/OxyLogo.js"));
+var _OxyConsentScreen = require("./ui/components/OxyConsentScreen.js");
 var _RequireOxyAuth = require("./ui/components/RequireOxyAuth.js");
 var _FollowButton = _interopRequireDefault(require("./ui/components/FollowButton.js"));
 var _LogoIcon = require("./ui/components/logo/LogoIcon.js");

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_core","require","_reactNative","_OxyProvider","_interopRequireDefault","_OxyContext","_useAuth","_FontLoader","_authStore","_assetStore","_useAssets","_useFileDownloadUrl","_useFollow","_useAccountQueries","_useServicesQueries","_useSecurityQueries","_usePaymentQueries","_useAccountMutations","_useServicesMutations","_mutationFactory","_mutationKeys","_queryKeys","_useMutationStatus","_useOnlineStatus","_errorHandlers","_useFileFiltering","_Avatar","_OxySignInButton","_OxyAuthPrompt","_OxyLogo","_RequireOxyAuth","_FollowButton","_LogoIcon","_LogoText","_ProfileButton","_useSwitchableAccounts","_ManageAccountScreen","_NotificationsScreen","_PreferencesScreen","_ConnectedAppsScreen","_CreateAccountScreen","_AccountMembersScreen","_AccountSettingsScreen","_bottomSheetManager","_accountDialogManager","e","__esModule","default","setPlatformOS","Platform","OS"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAMA,IAAAE,YAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AAEA,IAAAK,QAAA,GAAAL,OAAA;AAMA,IAAAM,WAAA,GAAAN,OAAA;AAKA,IAAAO,UAAA,GAAAP,OAAA;AACA,IAAAQ,WAAA,GAAAR,OAAA;AAgBA,IAAAS,UAAA,GAAAT,OAAA;AACA,IAAAU,mBAAA,GAAAV,OAAA;AACA,IAAAW,UAAA,GAAAX,OAAA;AAKA,IAAAY,kBAAA,GAAAZ,OAAA;AAUA,IAAAa,mBAAA,GAAAb,OAAA;AAQA,IAAAc,mBAAA,GAAAd,OAAA;AAKA,IAAAe,kBAAA,GAAAf,OAAA;AAyBA,IAAAgB,oBAAA,GAAAhB,OAAA;AAUA,IAAAiB,qBAAA,GAAAjB,OAAA;AAOA,IAAAkB,gBAAA,GAAAlB,OAAA;AAUA,IAAAmB,aAAA,GAAAnB,OAAA;AAQA,IAAAoB,UAAA,GAAApB,OAAA;AAcA,IAAAqB,kBAAA,GAAArB,OAAA;AAEA,IAAAsB,gBAAA,GAAAtB,OAAA;AAKA,IAAAuB,cAAA,GAAAvB,OAAA;AAWA,IAAAwB,iBAAA,GAAAxB,OAAA;AAMA,IAAAyB,OAAA,GAAAtB,sBAAA,CAAAH,OAAA;AAEA,IAAA0B,gBAAA,GAAA1B,OAAA;AACA,IAAA2B,cAAA,GAAA3B,OAAA;AAEA,IAAA4B,QAAA,GAAAzB,sBAAA,CAAAH,OAAA;AAOA,IAAA6B,eAAA,GAAA7B,OAAA;AAGA,IAAA8B,aAAA,GAAA3B,sBAAA,CAAAH,OAAA;AAEA,IAAA+B,SAAA,GAAA/B,OAAA;AACA,IAAAgC,SAAA,GAAAhC,OAAA;AAKA,IAAAiC,cAAA,GAAA9B,sBAAA,CAAAH,OAAA;AASA,IAAAkC,sBAAA,GAAAlC,OAAA;AAIA,IAAAmC,oBAAA,GAAAhC,sBAAA,CAAAH,OAAA;AACA,IAAAoC,oBAAA,GAAAjC,sBAAA,CAAAH,OAAA;AACA,IAAAqC,kBAAA,GAAAlC,sBAAA,CAAAH,OAAA;AACA,IAAAsC,oBAAA,GAAAnC,sBAAA,CAAAH,OAAA;AAGA,IAAAuC,oBAAA,GAAApC,sBAAA,CAAAH,OAAA;AACA,IAAAwC,qBAAA,GAAArC,sBAAA,CAAAH,OAAA;AACA,IAAAyC,sBAAA,GAAAtC,sBAAA,CAAAH,OAAA;AAKA,IAAA0C,mBAAA,GAAA1C,OAAA;AASA,IAAA2C,qBAAA,GAAA3C,OAAA;AAAwF,SAAAG,uBAAAyC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AA1PxF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAIA,IAAAG,mBAAa,EAACC,qBAAQ,CAACC,EAAgB,CAAC;;AAExC;AACA;AACA;;AAOA;AACA;AACA;;AAGA;AACA;AACA;;AAeA;AACA;AACA;;AAKA;AACA;AACA;;AA+BA;;AAeA;AACA;AACA;;AA2BA;;AAGA;AACA;AACA;AACA;AACA;AACA;;AAcA;;AAKA;AACA;AACA;;AASA;AACA;AACA;;AAIA;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;;AASA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;;AAIA;;AAMA;;AAKA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}
+{"version":3,"names":["_core","require","_reactNative","_OxyProvider","_interopRequireDefault","_OxyContext","_useAuth","_FontLoader","_authStore","_assetStore","_useAssets","_useFileDownloadUrl","_useFollow","_useAccountQueries","_useServicesQueries","_useSecurityQueries","_usePaymentQueries","_useAccountMutations","_useServicesMutations","_mutationFactory","_mutationKeys","_queryKeys","_useMutationStatus","_useOnlineStatus","_errorHandlers","_useFileFiltering","_Avatar","_OxySignInButton","_OxyAuthPrompt","_OxyLogo","_OxyConsentScreen","_RequireOxyAuth","_FollowButton","_LogoIcon","_LogoText","_ProfileButton","_useSwitchableAccounts","_ManageAccountScreen","_NotificationsScreen","_PreferencesScreen","_ConnectedAppsScreen","_CreateAccountScreen","_AccountMembersScreen","_AccountSettingsScreen","_bottomSheetManager","_accountDialogManager","e","__esModule","default","setPlatformOS","Platform","OS"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"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","ignoreList":[]}

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

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
-var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _vectorIcons = require("@expo/vector-icons");
 var _reactNativeQrcodeSvg = _interopRequireDefault(require("react-native-qrcode-svg"));
 var _avatar = require("@oxyhq/bloom/avatar");
 var _button = require("@oxyhq/bloom/button");
+var _dialog = require("@oxyhq/bloom/dialog");
 var _typography = require("@oxyhq/bloom/typography");
 var _theme = require("@oxyhq/bloom/theme");
 var _reactQuery = require("@tanstack/react-query");
@@ -43,8 +43,24 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * 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). Modal contents are wrapped
- * in `<GestureHandlerRootView>` because RN's `Modal` renders into its own window.
+ * that do not use NativeWind (e.g. the accounts app).
+ *
+ * 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.
+ * It REPLACES the hand-rolled RN `<Modal>` + `<GestureHandlerRootView>` + manual
+ * backdrop/card wrapper this component used before. That RN `<Modal>` is invisible
+ * under React StrictMode on web: react-native-web's `ModalPortal` appends its host
+ * node during render but removes it in an effect cleanup and never re-attaches, so
+ * the dialog never paints in a dev Vite build. Bloom's `<Dialog>` renders through
+ * its own Portal and has no such lifecycle hazard.
+ *
+ * Open/close is CONTROLLED by `isAccountDialogOpen` (the `open` prop); the Dialog
+ * stays mounted whenever the controller exists so it can animate its own close.
+ * 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.
  */
 
 /** Diameter of a row avatar. */const ROW_AVATAR_SIZE = 40;
@@ -134,71 +150,56 @@ const OxyAccountDialog = () => {
     onManage: handleManage,
     onClose: closeAccountDialog
   }), [handleSwitch, controller, handleManage, closeAccountDialog]);
-  if (!isAccountDialogOpen || !controller) {
+  if (!controller) {
     return null;
   }
   const {
     view
   } = snapshot;
   const showBack = view === 'qr' || view === 'add' && snapshot.accounts.length > 0;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
-    visible: true,
-    transparent: true,
-    animationType: isWeb ? 'fade' : 'slide',
-    statusBarTranslucent: true,
-    onRequestClose: closeAccountDialog,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureHandlerRootView, {
-      style: styles.root,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [styles.backdrop, {
-          backgroundColor: theme.colors.overlay
-        }],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-          style: _reactNative.StyleSheet.absoluteFill,
-          onPress: closeAccountDialog,
-          accessibilityLabel: t('common.actions.close') || 'Close',
-          accessibilityRole: "button"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [styles.card, isWeb ? styles.cardCentered : styles.cardSheet, {
-            backgroundColor: theme.colors.card,
-            borderColor: theme.colors.border
-          }],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DialogHeader, {
-            snapshot: snapshot,
-            theme: theme,
-            t: t,
-            showBack: showBack,
-            onBack: () => controller.setView('accounts'),
-            onClose: closeAccountDialog
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-            style: styles.body,
-            contentContainerStyle: styles.bodyContent,
-            showsVerticalScrollIndicator: false,
-            children: view === 'accounts' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AccountsView, {
-              snapshot: snapshot,
-              theme: theme,
-              t: t,
-              handlers: handlers
-            }) : view === 'qr' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(QrView, {
-              snapshot: snapshot,
-              theme: theme,
-              t: t,
-              onRetry: () => void controller.showQr()
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(SignInView, {
-              snapshot: snapshot,
-              theme: theme,
-              t: t,
-              handlers: handlers,
-              onSignInWithOxy: () => void controller.signInWithOxy(),
-              onScanQr: () => void controller.showQr(),
-              onUsePassword: () => controller.openPasswordAtOxyAuth({
-                returnUrl: isWeb ? currentHref() : undefined
-              })
-            })
-          })]
-        })]
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_dialog.Dialog, {
+    open: isAccountDialogOpen,
+    onClose: closeAccountDialog,
+    placement: {
+      base: 'bottom',
+      md: 'center'
+    },
+    dismissOnBackdrop: false,
+    maxWidth: 420,
+    label: headerCopy(view, snapshot.accounts.length, t).title,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DialogHeader, {
+      snapshot: snapshot,
+      theme: theme,
+      t: t,
+      showBack: showBack,
+      onBack: () => controller.setView('accounts'),
+      onClose: closeAccountDialog
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      style: styles.body,
+      contentContainerStyle: styles.bodyContent,
+      showsVerticalScrollIndicator: false,
+      children: view === 'accounts' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AccountsView, {
+        snapshot: snapshot,
+        theme: theme,
+        t: t,
+        handlers: handlers
+      }) : view === 'qr' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(QrView, {
+        snapshot: snapshot,
+        theme: theme,
+        t: t,
+        onRetry: () => void controller.showQr()
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(SignInView, {
+        snapshot: snapshot,
+        theme: theme,
+        t: t,
+        handlers: handlers,
+        onSignInWithOxy: () => void controller.signInWithOxy(),
+        onScanQr: () => void controller.showQr(),
+        onUsePassword: () => controller.openPasswordAtOxyAuth({
+          returnUrl: isWeb ? currentHref() : undefined
+        })
       })
-    })
+    })]
   });
 };
 
@@ -587,29 +588,6 @@ const EMPTY_SNAPSHOT = {
   }
 };
 const styles = _reactNative.StyleSheet.create({
-  root: {
-    flex: 1
-  },
-  backdrop: {
-    flex: 1,
-    justifyContent: isWeb ? 'center' : 'flex-end',
-    alignItems: 'center'
-  },
-  card: {
-    width: '100%',
-    maxWidth: 420,
-    borderWidth: _reactNative.StyleSheet.hairlineWidth,
-    paddingHorizontal: 20,
-    paddingTop: 16,
-    paddingBottom: 24
-  },
-  cardCentered: {
-    borderRadius: 28
-  },
-  cardSheet: {
-    borderTopLeftRadius: 28,
-    borderTopRightRadius: 28
-  },
   header: {
     alignItems: 'center',
     marginBottom: 12