@oxyhq/services 22.8.7 → 22.10.0

package/lib/typescript/module/ui/screens/trust/TrustFAQScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TrustFAQScreen.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/trust/TrustFAQScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAAwB,CAAC;;AAqG9D,wBAA0C"}
+{"version":3,"file":"TrustFAQScreen.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/trust/TrustFAQScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAAwB,CAAC;;AAkG9D,wBAA0C"}

package/lib/typescript/module/ui/screens/trust/TrustLeaderboardScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TrustLeaderboardScreen.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/trust/TrustLeaderboardScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAAwB,CAAC;AAa9D,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwJrD,CAAC;AA0CF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"TrustLeaderboardScreen.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/trust/TrustLeaderboardScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAAwB,CAAC;AAa9D,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsJrD,CAAC;AA0CF,eAAe,sBAAsB,CAAC"}

package/lib/typescript/module/ui/screens/trust/TrustRewardsScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TrustRewardsScreen.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/trust/TrustRewardsScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAAwB,CAAC;AA0E9D,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkYjD,CAAC;AAkIF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"TrustRewardsScreen.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/trust/TrustRewardsScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAAwB,CAAC;AA0E9D,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmXjD,CAAC;AAkIF,eAAe,kBAAkB,CAAC"}

package/lib/typescript/module/ui/screens/trust/TrustRulesScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TrustRulesScreen.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/trust/TrustRulesScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAAwB,CAAC;AAiB9D,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwF/C,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"TrustRulesScreen.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/trust/TrustRulesScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAAwB,CAAC;AAiB9D,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqF/C,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/typescript/module/ui/types/navigation.d.ts

@@ -10,6 +10,14 @@ export interface BaseScreenProps {
     goBack?: () => void;
     onClose?: () => void;
     onAuthenticated?: (payload?: unknown) => void;
+    /**
+     * Dismiss THIS surface, resolving the `present()` promise that opened it
+     * with `result`. Injected by the surface host (the P1 surface stack). Picker
+     * and crop screens use it to hand a typed result back to the awaiting
+     * `surfaces.present(...)` call instead of an untyped `onSelect`/`onConfirm`
+     * callback prop.
+     */
+    dismiss?: (result?: unknown) => void;
     theme?: 'light' | 'dark' | string;
     initialStep?: number;
     stepControllerRef?: RefObject<StepController | null>;

package/lib/typescript/module/ui/types/navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../../../src/ui/types/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAsB,CAAC;AAItD,MAAM,WAAW,cAAc;IAC3B,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,MAAM,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAE5B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACxE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAG9C,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAGlC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAGjE,aAAa,CAAC,EAAE,SAAS,CAAC;IAG1B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAGnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IAMtB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,sFAAsF;IACtF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;CACzC"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../../../src/ui/types/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAsB,CAAC;AAItD,MAAM,WAAW,cAAc;IAC3B,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,MAAM,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAE5B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACxE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAGrC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAGlC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAGjE,aAAa,CAAC,EAAE,SAAS,CAAC;IAG1B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAGnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IAMtB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,sFAAsF;IACtF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;CACzC"}

package/lib/typescript/module/ui/types/surfaceScreen.d.ts

@@ -0,0 +1,38 @@
+import type { RouteName } from '../navigation/routes.js';
+import type { SurfaceProps, SurfaceResult } from '../navigation/surfaceRegistry.js';
+/**
+ * The typed prop contract a screen receives when it is bound into an SDK surface.
+ *
+ * This is the successor to the grab-bag `BaseScreenProps`: `props` carries the
+ * route's own {@link SurfaceProps typed props}, and the navigation methods are
+ * split along the two axes the surface system models — NAV-WITHIN
+ * (`navigate`/`replace`/`goBack`/`step`) inside this surface, and DEPTH
+ * (`present`/`dismiss`) across the stack.
+ *
+ * In P1 the ~35 screens still consume the legacy `BaseScreenProps` shape (the
+ * `SurfaceScreen` binding passes a superset that satisfies both), so this type is
+ * the target contract for the per-screen migration in a later phase — it is not
+ * yet the render-time prop shape for existing screens.
+ */
+export interface SurfaceScreenProps<K extends RouteName> {
+    /** The route's typed props (from the {@link SurfaceProps registry}). */
+    props: SurfaceProps<K>;
+    /** Drill in to another route — WITHIN this surface, or a new surface if the
+     * target's presentation differs. */
+    navigate: <T extends RouteName>(route: T, props?: SurfaceProps<T>) => void;
+    /** Replace the current route in place (no history entry). */
+    replace: <T extends RouteName>(route: T, props?: SurfaceProps<T>) => void;
+    /** Pop one level; if at the root, dismiss the surface. */
+    goBack: () => void;
+    /** Whether a back is possible (a deeper route OR a prior wizard step). */
+    canGoBack: () => boolean;
+    /** Dismiss THIS surface, resolving its `present()` promise with `result`. */
+    dismiss: (result?: SurfaceResult<K>) => void;
+    /** Present a NEW surface on top of the stack (DEPTH); resolves with its result. */
+    present: <T extends RouteName>(route: T, props?: SurfaceProps<T>) => Promise<SurfaceResult<T> | undefined>;
+    /** The current wizard step of this frame. */
+    step: number;
+    /** Set the current wizard step. */
+    setStep: (step: number) => void;
+}
+//# sourceMappingURL=surfaceScreen.d.ts.map

package/lib/typescript/module/ui/types/surfaceScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"surfaceScreen.d.ts","sourceRoot":"","sources":["../../../../../src/ui/types/surfaceScreen.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAsB,CAAC;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,kCAA+B,CAAC;AAEjF;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,SAAS;IACrD,wEAAwE;IACxE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IACvB;wCACoC;IACpC,QAAQ,EAAE,CAAC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC3E,6DAA6D;IAC7D,OAAO,EAAE,CAAC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC1E,0DAA0D;IAC1D,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,0EAA0E;IAC1E,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,6EAA6E;IAC7E,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC7C,mFAAmF;IACnF,OAAO,EAAE,CAAC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;IAC3G,6CAA6C;IAC7C,IAAI,EAAE,MAAM,CAAC;IACb,mCAAmC;IACnC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/services",
-  "version": "22.8.7",
+  "version": "22.10.0",
   "description": "OxyHQ Expo/React Native SDK — UI components, screens, and native features",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -176,7 +176,7 @@
   },
   "peerDependencies": {
     "@expo/vector-icons": "^15.0.3",
-    "@oxyhq/bloom": ">=0.44.1",
+    "@oxyhq/bloom": ">=0.48.0",
     "@oxyhq/core": "^12.9.0",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/netinfo": "^11.4.1",

package/src/index.ts

@@ -236,15 +236,16 @@ export { LogoIcon } from './ui/components/logo/LogoIcon';
 export { LogoText } from './ui/components/logo/LogoText';
 
 // Sidebar account trigger. Pressing `ProfileButton` opens the unified
-// `OxyAccountDialog` (the single account switcher + sign-in surface) via
+// `OxyAccountDialogScreen` (the single account switcher + sign-in surface) via
 // `useOxy().openAccountDialog`.
 export { default as ProfileButton } from './ui/components/ProfileButton';
 export type { ProfileButtonProps } from './ui/components/ProfileButton';
 
-// The account switcher/sign-in/sign-up chooser WITHOUT dialog chrome —
-// `OxyAccountDialog` wraps this in Bloom's `<Dialog>` for the normal in-app
-// surface; exported directly so a bare host (e.g. a future auth.oxy.so hub
-// page) can mount the exact same chooser with its own completion strategy.
+// The account switcher/sign-in/sign-up chooser WITHOUT dialog chrome — the
+// surface stack presents `OxyAccountDialogScreen` (which renders this) into
+// Bloom's `<Dialog>` for the normal in-app surface; exported directly so a bare
+// host (e.g. a future auth.oxy.so hub page) can mount the exact same chooser
+// with its own completion strategy.
 export { default as OxyAuthChooser } from './ui/components/OxyAuthChooser';
 export type { OxyAuthChooserProps } from './ui/components/OxyAuthChooser';
 
@@ -275,6 +276,12 @@ export { default as AccountSettingsScreen } from './ui/screens/AccountSettingsSc
 export { showBottomSheet, closeBottomSheet } from './ui/navigation/bottomSheetManager';
 export type { RouteName } from './ui/navigation/routes';
 
+// Surface nav header — a surface screen declares its title/subtitle (+ any
+// action slot) into the Dialog's OWN navigation header. Screens render no header
+// of their own.
+export { useSurfaceHeader, type SurfaceHeaderContent } from './ui/hooks/useSurfaceHeader';
+export { SurfaceHeaderAction, type SurfaceHeaderActionProps } from './ui/components/SurfaceHeaderAction';
+
 // ---------------------------------------------------------------------------
 // Unified account dialog — imperative entry points
 // ---------------------------------------------------------------------------

package/src/ui/components/OxyAccountDialogScreen.tsx

@@ -0,0 +1,148 @@
+/**
+ * OxyAccountDialogScreen — the ONE unified account dialog BODY for `@oxyhq/services`.
+ *
+ * The header (title/subtitle per view + back button) 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
+ * header + the scroll body.
+ *
+ * It is presented as the `AccountDialog` route on the shared Bloom SURFACE STACK
+ * (`@oxyhq/bloom/surfaces`) — `OxyContext.openAccountDialog` calls
+ * `presentDetached('AccountDialog', …, { placement: { base: 'bottom', md:
+ * 'center' }, dismissOnBackdrop: false, maxWidth: 420 })`, so the STACK owns the
+ * responsive `<Dialog>` chrome and this component renders only its content. That
+ * replaces the previous standalone controlled `<Dialog open={isAccountDialogOpen}>`
+ * mount: dismissal now flows through the stack (backdrop/swipe disabled), and the
+ * header close button (and `OxyAuthChooser`'s `onComplete`) drive
+ * `useOxy().closeAccountDialog`, which dismisses the surface and runs its exit
+ * animation. The view-enum (`accounts|signin|qr|add|signup`) stays internal here,
+ * driven by the shared `AccountDialogController` in `@oxyhq/core`.
+ */
+
+import type React from 'react';
+import { useCallback, useSyncExternalStore } from 'react';
+import { StyleSheet, View } from 'react-native';
+import type { AccountDialogSnapshot } from '@oxyhq/core';
+import { useOxy } from '../context/OxyContext';
+import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
+import OxyAuthChooser from './OxyAuthChooser';
+
+type Translate = ReturnType<typeof useI18n>['t'];
+
+/**
+ * The unified account dialog BODY — the header + `OxyAuthChooser` chooser.
+ *
+ * Presented as the `AccountDialog` surface (route) on the shared Bloom surface
+ * stack; the surface owns the `<Dialog>` chrome (responsive `{ base: 'bottom',
+ * md: 'center' }` placement, `dismissOnBackdrop={false}`, `maxWidth={420}` — set
+ * by `OxyContext` when it presents this surface), so this component renders ONLY
+ * the content. Open it via `useOxy().openAccountDialog(view?)` or the imperative
+ * `openAccountDialog('signin')`; the view-enum (`accounts|signin|qr|add|signup`)
+ * stays internal here, driven by the shared `AccountDialogController` in
+ * `@oxyhq/core`. Closing routes through `useOxy().closeAccountDialog`, which
+ * dismisses the surface and runs its exit animation.
+ */
+const OxyAccountDialogScreen: React.FC = () => {
+  const { accountDialogController: controller, closeAccountDialog } = useOxy();
+  const { t } = useI18n();
+
+  // 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: () => void) => (controller ? controller.subscribe(listener) : () => undefined),
+    [controller],
+  );
+  const getSnapshot = useCallback(
+    () => (controller ? controller.getSnapshot() : EMPTY_SNAPSHOT),
+    [controller],
+  );
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+  const { view } = snapshot;
+  const showBack =
+    view === 'qr' || view === 'signup' || (view === 'add' && snapshot.accounts.length > 0);
+  const goToAccounts = useCallback(() => controller?.setView('accounts'), [controller]);
+  const { title, subtitle } = headerCopy(view, snapshot.accounts.length, t);
+
+  // The account dialog uses the SHARED Dialog nav header like every other screen
+  // (the base): the large in-content title/subtitle that collapses into the nav
+  // bar on scroll (default `largeTitle`), its per-view copy, and a per-view back
+  // that returns to the account list (the Dialog renders the frosted back/close).
+  useSurfaceHeader({
+    title,
+    subtitle: subtitle ?? undefined,
+    onBack: showBack ? goToAccounts : undefined,
+  });
+
+  if (!controller) {
+    return null;
+  }
+
+  return (
+    <View style={styles.bodyContent}>
+      <OxyAuthChooser onComplete={closeAccountDialog} />
+    </View>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Copy + helpers
+// ---------------------------------------------------------------------------
+
+function headerCopy(
+  view: AccountDialogSnapshot['view'],
+  accountCount: number,
+  t: Translate,
+): { title: string; subtitle: string | null } {
+  switch (view) {
+    case 'accounts':
+      return {
+        title: t('accountSwitcher.sections.yourAccounts') || 'Your accounts',
+        subtitle: t('signin.chooser.subtitle') || 'Choose which account to continue with.',
+      };
+    case 'qr':
+      return {
+        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
+        ? {
+            title: t('signin.addAccountTitle') || 'Add another account',
+            subtitle: t('signin.addAccountSubtitle') || 'Sign in with another account.',
+          }
+        : {
+            title: t('signin.title') || 'Sign in',
+            subtitle: t('signin.subtitle') || 'One identity for the whole ecosystem.',
+          };
+  }
+}
+
+const EMPTY_SNAPSHOT: AccountDialogSnapshot = {
+  view: 'accounts',
+  accounts: [],
+  activeAccountId: null,
+  loading: false,
+  error: null,
+  switchingAccountId: null,
+  signIn: { phase: 'idle', authorizeCode: null, qrPayload: null, expiresAt: null, error: null },
+  commonsAvailability: 'unknown',
+};
+
+const styles = StyleSheet.create({
+  bodyContent: {
+    paddingTop: 4,
+    paddingBottom: 4,
+  },
+});
+
+export default OxyAccountDialogScreen;

package/src/ui/components/OxyAuthChooser.tsx

@@ -4,8 +4,8 @@
  *
  * 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
+ * machine {@link OxyAccountDialogScreen} renders, extracted so it can be mounted in
+ * TWO places: wrapped in Bloom's `<Dialog>` by `OxyAccountDialogScreen` (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.
@@ -61,6 +61,7 @@ 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 { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { toast } from '@oxyhq/bloom';
 import { Text } from '@oxyhq/bloom/typography';
 import {
@@ -81,6 +82,8 @@ import { authChooserStyles as styles } from './oxyAuthChooserStyles';
 
 /** Diameter of a row avatar. */
 const ROW_AVATAR_SIZE = 40;
+/** Diameter of the prominent current-account avatar in the collapsed header. */
+const HEADER_AVATAR_SIZE = 48;
 /** High-contrast QR colors — intentionally fixed (NOT themed) for scan reliability. */
 const QR_PLATE_BG = '#FFFFFF';
 const QR_FOREGROUND = '#000000';
@@ -122,7 +125,7 @@ type Theme = ReturnType<typeof useTheme>;
 type Translate = ReturnType<typeof useI18n>['t'];
 
 /**
- * The account switcher + sign-in/sign-up chooser. Mounted by `OxyAccountDialog`
+ * The account switcher + sign-in/sign-up chooser. Mounted by `OxyAccountDialogScreen`
  * (wrapped in Bloom's `<Dialog>`) today; mountable bare by any future host that
  * supplies its own `onComplete`.
  */
@@ -371,7 +374,24 @@ interface AccountsViewProps {
   handlers: OxyAuthChooserHandlers;
 }
 
+/**
+ * The signed-in switcher, in the Google account-menu shape:
+ *  - COLLAPSED (default): the active account is prominent at the top (avatar +
+ *    name + email) with a trailing expand chevron, and a "Manage your Oxy
+ *    account" outline button directly under it. Nothing else.
+ *  - EXPANDED: the same header + button, then the full account list (current
+ *    first with a check-circle, every other switchable account, "Add another
+ *    account", and "Manage accounts on this device").
+ *
+ * Collapse state is a plain `useState` toggled in the header's press handler —
+ * no `useEffect`, no derived-from-props sync. When there is only ONE account
+ * (nothing to switch to) the chevron is hidden and the "Add another account" +
+ * "Manage accounts on this device" items render inline, so those affordances
+ * stay reachable without a pointless expand toggle.
+ */
 const AccountsView: React.FC<AccountsViewProps> = ({ snapshot, theme, t, handlers }) => {
+  const [expanded, setExpanded] = useState(false);
+
   if (snapshot.loading && snapshot.accounts.length === 0) {
     return (
       <View style={styles.centeredBlock}>
@@ -383,40 +403,140 @@ const AccountsView: React.FC<AccountsViewProps> = ({ snapshot, theme, t, handler
     );
   }
 
+  const switchingDisabled = snapshot.switchingAccountId !== null;
+  const current = snapshot.accounts.find((account) => account.isCurrent) ?? snapshot.accounts[0];
+  const hasOtherAccounts = snapshot.accounts.some(
+    (account) => account.accountId !== current?.accountId,
+  );
+  // Current account first, then the rest — the expanded list order.
+  const orderedAccounts = current
+    ? [current, ...snapshot.accounts.filter((account) => account.accountId !== current.accountId)]
+    : snapshot.accounts;
+  // Multi-account: reveal the list only when expanded. Single-account: no expand
+  // affordance, so surface add/manage inline.
+  const showList = hasOtherAccounts ? expanded : true;
+
+  const renderAccountItem = (account: SwitchableAccount) => {
+    const accent = resolveAccentHex(account.color, theme.colors.primary);
+    const isSwitching = snapshot.switchingAccountId === account.accountId;
+    return (
+      <SettingsListItem
+        key={account.accountId}
+        icon={
+          <View
+            style={[styles.avatarRing, { borderColor: account.isCurrent ? accent : 'transparent' }]}
+          >
+            <Avatar
+              source={account.avatarUrl ?? undefined}
+              variant="thumb"
+              name={account.displayName}
+              size={ROW_AVATAR_SIZE}
+            />
+          </View>
+        }
+        title={account.displayName}
+        description={account.email ?? undefined}
+        onPress={() => handlers.onSwitch(account.accountId)}
+        disabled={switchingDisabled}
+        accessibilityLabel={account.displayName}
+        showChevron={false}
+        rightElement={
+          isSwitching ? (
+            <MaterialCommunityIcons name="loading" size={20} color={accent} />
+          ) : account.isCurrent ? (
+            <MaterialCommunityIcons name="check-circle" size={20} color={accent} />
+          ) : undefined
+        }
+      />
+    );
+  };
+
   return (
     <View style={styles.rows}>
-      {snapshot.accounts.map((account) => (
-        <AccountRow
-          key={account.accountId}
-          account={account}
-          theme={theme}
-          switching={snapshot.switchingAccountId === account.accountId}
-          disabled={snapshot.switchingAccountId !== null}
-          onPress={() => handlers.onSwitch(account.accountId)}
-        />
-      ))}
+      {current ? (
+        <Pressable
+          style={styles.currentAccountRow}
+          onPress={hasOtherAccounts ? () => setExpanded((value) => !value) : undefined}
+          disabled={hasOtherAccounts ? switchingDisabled : true}
+          accessibilityRole={hasOtherAccounts ? 'button' : undefined}
+          accessibilityState={hasOtherAccounts ? { expanded } : undefined}
+          accessibilityLabel={current.displayName}
+        >
+          <View
+            style={[
+              styles.avatarRing,
+              { borderColor: resolveAccentHex(current.color, theme.colors.primary) },
+            ]}
+          >
+            <Avatar
+              source={current.avatarUrl ?? undefined}
+              variant="thumb"
+              name={current.displayName}
+              size={HEADER_AVATAR_SIZE}
+            />
+          </View>
+          <View style={styles.currentAccountMeta}>
+            <Text style={[styles.currentAccountName, { color: theme.colors.text }]} numberOfLines={1}>
+              {current.displayName}
+            </Text>
+            {current.email ? (
+              <Text
+                style={[styles.currentAccountEmail, { color: theme.colors.textSecondary }]}
+                numberOfLines={1}
+              >
+                {current.email}
+              </Text>
+            ) : null}
+          </View>
+          {hasOtherAccounts ? (
+            <MaterialCommunityIcons
+              name={expanded ? 'chevron-up' : 'chevron-down'}
+              size={24}
+              color={theme.colors.textSecondary}
+            />
+          ) : null}
+        </Pressable>
+      ) : null}
 
-      <Pressable
-        style={[styles.addRow, { borderColor: theme.colors.border }]}
-        onPress={handlers.onAdd}
-        accessibilityRole="button"
-        accessibilityLabel={t('signin.addAccountTitle') || 'Add another account'}
-      >
-        <View style={[styles.addBadge, { borderColor: theme.colors.border }]}>
-          <MaterialCommunityIcons name="plus" size={20} color={theme.colors.textSecondary} />
-        </View>
-        <Text style={[styles.rowName, { color: theme.colors.textSecondary }]}>
-          {t('signin.addAccountTitle') || 'Add another account'}
-        </Text>
-      </Pressable>
+      <Button variant="outline" onPress={handlers.onManage} style={styles.manageButton}>
+        {t('accountMenu.manage') || 'Manage your Oxy account'}
+      </Button>
 
-      <View style={styles.footerLinks}>
-        <Pressable onPress={handlers.onManage} accessibilityRole="button">
-          <Text style={[styles.linkText, { color: theme.colors.primary }]}>
-            {t('accountMenu.manage') || 'Manage accounts'}
-          </Text>
-        </Pressable>
-      </View>
+      {showList ? (
+        <SettingsListGroup>
+          {hasOtherAccounts ? orderedAccounts.map(renderAccountItem) : null}
+
+          <SettingsListItem
+            icon={
+              <View style={[styles.addBadge, { borderColor: theme.colors.border }]}>
+                <MaterialCommunityIcons name="plus" size={20} color={theme.colors.textSecondary} />
+              </View>
+            }
+            title={t('signin.addAccountTitle') || 'Add another account'}
+            onPress={handlers.onAdd}
+            disabled={switchingDisabled}
+            accessibilityLabel={t('signin.addAccountTitle') || 'Add another account'}
+            showChevron={false}
+          />
+
+          <SettingsListItem
+            icon={
+              <View style={[styles.addBadge, { borderColor: theme.colors.border }]}>
+                <MaterialCommunityIcons
+                  name="cog-outline"
+                  size={20}
+                  color={theme.colors.textSecondary}
+                />
+              </View>
+            }
+            title={t('accountSwitcher.manageOnDevice') || 'Manage accounts on this device'}
+            onPress={handlers.onManage}
+            disabled={switchingDisabled}
+            accessibilityLabel={t('accountSwitcher.manageOnDevice') || 'Manage accounts on this device'}
+            showChevron={false}
+          />
+        </SettingsListGroup>
+      ) : null}
     </View>
   );
 };

package/src/ui/components/OxyConsentScreen.tsx

@@ -14,7 +14,7 @@
  * and behavioral lockstep.
  *
  * Theming is `useTheme()` + a `StyleSheet` (the same approach as
- * {@link OxyAccountDialog}) so it renders correctly in EVERY consumer, including
+ * {@link OxyAccountDialogScreen}) so it renders correctly in EVERY consumer, including
  * apps that do not use NativeWind. Copy is localized through {@link useI18n}
  * under the `consent.*` keys.
  */

package/src/ui/components/OxyProvider.tsx

@@ -1,4 +1,4 @@
-import { lazy, Suspense, useEffect, useRef, useState, type ComponentType, type FC, type ReactNode } from 'react';
+import { useEffect, useRef, useState, type FC, type ReactNode } from 'react';
 import { AppState, Platform, StyleSheet, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
@@ -6,6 +6,7 @@ import type { OxyProviderProps } from '../types/navigation';
 import { OxyContextProvider, type OxyContextProviderProps } from '../context/OxyContext';
 import { QueryClientProvider, focusManager, onlineManager } from '@tanstack/react-query';
 import { BloomDialogProvider } from '@oxyhq/bloom';
+import { SurfaceProvider } from '@oxyhq/bloom/surfaces';
 import { ToastOutlet } from '@oxyhq/bloom/toast';
 import { logger as loggerUtil } from '@oxyhq/core';
 import { RequireOxyAuth } from './RequireOxyAuth';
@@ -49,35 +50,14 @@ const isWeb = Platform.OS === 'web';
 // static analyzer cannot trace this into the web bundle. Native-only.
 const KEYBOARD_CONTROLLER_MODULE = 'react-native-keyboard-controller';
 
-// Lazy-load optional components (avoids require() for ESM compatibility).
-// The .then() extracts + casts the default export so that `lazy()` sees
-// `Promise<{ default: ComponentType }>` instead of the full module namespace.
-const LazyBottomSheetRouter = lazy((): Promise<{ default: ComponentType }> =>
-    import('./BottomSheetRouter').then(
-        (mod) => ({ default: mod.default as unknown as ComponentType }),
-        (error) => {
-            if (__DEV__) {
-                loggerUtil.error('Failed to load BottomSheetRouter', error instanceof Error ? error : new Error(String(error)), { component: 'OxyProvider' });
-            }
-            return { default: (() => null) as FC };
-        },
-    ),
-);
-
-const LazyOxyAccountDialog = lazy((): Promise<{ default: ComponentType }> =>
-    import('./OxyAccountDialog').then(
-        (mod) => ({ default: mod.default as unknown as ComponentType }),
-        () => ({ default: (() => null) as FC }),
-    ),
-);
-
 /**
  * OxyProvider - Universal provider for Expo apps (native + web)
  *
  * Provides authentication, session management, query client, and UI overlays.
  * Wraps its own overlay stack in SafeAreaProvider and GestureHandlerRootView so
- * BottomSheetRouter and OxyAccountDialog can safely render even when a consuming
- * app has not mounted those providers yet.
+ * the shared Bloom SURFACE STACK (`<SurfaceProvider>` / `<SurfaceHost>`) — which
+ * hosts every SDK surface (the ~35 bottom-sheet routes + the AccountDialog) — can
+ * safely render even when a consuming app has not mounted those providers yet.
  *
  * Usage:
  * ```tsx
@@ -316,15 +296,13 @@ const OxyProvider: FC<OxyProviderProps> = ({
                     hubSync={hubSync}
                     onAuthStateChange={onAuthStateChange as OxyContextProviderProps['onAuthStateChange']}
                 >
-                    {requireAuth === 'off' ? (
-                        children
-                    ) : (
-                        <RequireOxyAuth prompt={requireAuth}>{children}</RequireOxyAuth>
-                    )}
-                    <Suspense fallback={null}>
-                        <LazyBottomSheetRouter />
-                        <LazyOxyAccountDialog />
-                    </Suspense>
+                    <SurfaceProvider>
+                        {requireAuth === 'off' ? (
+                            children
+                        ) : (
+                            <RequireOxyAuth prompt={requireAuth}>{children}</RequireOxyAuth>
+                        )}
+                    </SurfaceProvider>
                     <ToastOutlet />
                 </OxyContextProvider>
             </BloomDialogProvider>

package/src/ui/components/ProfileButton.tsx

@@ -65,7 +65,7 @@ export interface ProfileButtonProps {
     onNavigateProfile?: () => void;
     /**
      * Retained for source compatibility. The trigger now opens the unified
-     * `OxyAccountDialog` (a centered / bottom-sheet modal) rather than an
+     * `OxyAccountDialogScreen` (a centered / bottom-sheet modal) rather than an
      * anchored popover, so popover placement no longer applies.
      */
     placement?: 'up' | 'down' | 'auto';
@@ -82,7 +82,7 @@ export interface ProfileButtonProps {
 /**
  * Self-contained sidebar account trigger, modeled on Bluesky's ProfileCard and
  * the Oxy inbox's `MailboxDrawer` footer. Pressing it opens the unified
- * {@link OxyAccountDialog} — the single account switcher + sign-in surface — via
+ * {@link OxyAccountDialogScreen} — the single account switcher + sign-in surface — via
  * `useOxy().openAccountDialog`.
  *
  * Three auth states from {@link useAuth}:

package/src/ui/components/RequireOxyAuth.tsx

@@ -15,7 +15,7 @@
  * neutral loading state so the signed-out wall never flashes before the
  * device-first cold boot concludes (the documented cold-boot race).
  *
- * Styling follows the sibling `OxyAccountDialog`/`OxySignInButton` pattern —
+ * Styling follows the sibling `OxyAccountDialogScreen`/`OxySignInButton` pattern —
  * `useTheme()` + `StyleSheet` (NOT NativeWind), so the gate renders correctly in
  * EVERY consumer, including apps that do not run NativeWind (e.g. the accounts
  * app).