@oxyhq/services 22.8.7 → 22.9.0

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.9.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.46.0",
     "@oxyhq/core": "^12.9.0",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/netinfo": "^11.4.1",

package/src/ui/components/OxyAccountDialog.tsx

@@ -1,38 +1,30 @@
 /**
- * OxyAccountDialog — the ONE unified account dialog for `@oxyhq/services`.
+ * OxyAccountDialog — the ONE unified account dialog BODY for `@oxyhq/services`.
  *
- * Bloom `<Dialog>` chrome (header, back button, placement, scroll body) around
- * the headless chooser logic, which lives in `OxyAuthChooser` — the account
- * switcher, sign-in, sign-up, and QR views are ALL there, extracted so the
- * same chooser can be mounted bare by a future host with no Dialog chrome
- * (e.g. an auth.oxy.so hub page driving the cross-origin passkey popup, b2).
- * This file owns ONLY the chrome: the title/subtitle per view, the back
- * button, and the Bloom `<Dialog>` surface itself.
+ * The 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.
  *
- * 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 `OxyAuthChooser`'s
- * `onComplete`) drive `closeAccountDialog`, which flips `open` and runs the exit
- * animation.
+ * 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 { Pressable, ScrollView, StyleSheet, View } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { Dialog } from '@oxyhq/bloom/dialog';
 import { Text } from '@oxyhq/bloom/typography';
 import { useTheme } from '@oxyhq/bloom/theme';
 import type { AccountDialogSnapshot } from '@oxyhq/core';
@@ -45,11 +37,20 @@ type Theme = ReturnType<typeof useTheme>;
 type Translate = ReturnType<typeof useI18n>['t'];
 
 /**
- * The unified account dialog. Mounted once by `OxyProvider`; opened imperatively
- * via `useOxy().openAccountDialog(view?)` or imperative `openAccountDialog('signin')`.
+ * 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 OxyAccountDialog: React.FC = () => {
-  const { accountDialogController: controller, isAccountDialogOpen, closeAccountDialog } = useOxy();
+  const { accountDialogController: controller, closeAccountDialog } = useOxy();
   const theme = useTheme();
   const { t } = useI18n();
 
@@ -75,14 +76,7 @@ const OxyAccountDialog: React.FC = () => {
     view === 'qr' || view === 'signup' || (view === 'add' && snapshot.accounts.length > 0);
 
   return (
-    <Dialog
-      open={isAccountDialogOpen}
-      onClose={closeAccountDialog}
-      placement={{ base: 'bottom', md: 'center' }}
-      dismissOnBackdrop={false}
-      maxWidth={420}
-      label={headerCopy(view, snapshot.accounts.length, t).title}
-    >
+    <>
       <DialogHeader
         snapshot={snapshot}
         theme={theme}
@@ -94,7 +88,7 @@ const OxyAccountDialog: React.FC = () => {
       <ScrollView style={styles.body} contentContainerStyle={styles.bodyContent} showsVerticalScrollIndicator={false}>
         <OxyAuthChooser onComplete={closeAccountDialog} />
       </ScrollView>
-    </Dialog>
+    </>
   );
 };
 

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/SurfaceScreen.tsx

@@ -0,0 +1,166 @@
+import React, { useCallback, useEffect, useMemo, type ErrorInfo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useStore } from 'zustand';
+import { useTheme } from '@oxyhq/bloom/theme';
+import type { SurfaceControls } from '@oxyhq/bloom/surfaces';
+import type { RouteName } from '../navigation/routes';
+import { getScreenComponent } from '../navigation/routes';
+import type { SurfaceNavStack } from '../navigation/surfaceNavStack';
+import type { SurfacePresentation } from '../navigation/surfaceRegistry';
+import {
+  closeAllRouteSurfaces,
+  navigateWithinOrPresent,
+  presentRoute,
+  replaceWithinOrPresent,
+} from '../navigation/surfaces';
+import type { BaseScreenProps } from '../types/navigation';
+
+/** Error boundary catching screen render failures (e.g. a lazy `require()` throw). */
+interface ScreenErrorBoundaryState {
+  error: Error | null;
+}
+
+class ScreenErrorBoundary extends React.Component<
+  { screenName: string; children: React.ReactNode },
+  ScreenErrorBoundaryState
+> {
+  state: ScreenErrorBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: Error): ScreenErrorBoundaryState {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo): void {
+    if (__DEV__) {
+      console.error(
+        `[SurfaceScreen] Screen "${this.props.screenName}" crashed:`,
+        error,
+        info.componentStack,
+      );
+    }
+  }
+
+  componentDidUpdate(prevProps: { screenName: string }): void {
+    if (prevProps.screenName !== this.props.screenName && this.state.error) {
+      this.setState({ error: null });
+    }
+  }
+
+  render(): React.ReactNode {
+    if (this.state.error) {
+      return (
+        <View style={errorStyles.container}>
+          <Text style={errorStyles.title}>Something went wrong</Text>
+          {__DEV__ && <Text style={errorStyles.message}>{this.state.error.message}</Text>}
+        </View>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+const errorStyles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 },
+  title: { fontSize: 16, fontWeight: '600', marginBottom: 8 },
+  message: { fontSize: 13, textAlign: 'center' },
+});
+
+export interface SurfaceScreenProps {
+  /** This surface's route history (the NAV-WITHIN axis). */
+  navStack: SurfaceNavStack;
+  /** Bloom's per-surface controls (dismiss / present a child) — the DEPTH axis. */
+  surface: SurfaceControls;
+  /** This surface's presentation, so `navigate` knows when to drill in vs. stack. */
+  presentation: SurfacePresentation;
+}
+
+/**
+ * Binds one SDK surface to its content: resolves the lazy screen for the current
+ * nav-stack frame and renders it inside the error boundary with the per-surface
+ * navigation props. Mounted by `surfaces.present` as the Bloom surface's content.
+ *
+ * Dismissal is driven through the nav stack's `closing` flag (watched in an
+ * effect) rather than a captured-controls call, so a dismiss requested before
+ * this surface mounted still resolves the Bloom surface exactly once.
+ */
+function SurfaceScreen({ navStack, surface, presentation }: SurfaceScreenProps) {
+  const theme = useTheme();
+  const state = useStore(navStack.store);
+  const top = state.frames[state.frames.length - 1];
+
+  useEffect(() => {
+    if (state.closing) surface.dismiss(state.closeResult);
+  }, [state.closing, state.closeResult, surface]);
+
+  const ScreenComponent = useMemo(() => getScreenComponent(top.route) ?? null, [top.route]);
+
+  const navigate = useCallback(
+    (route: RouteName, props?: Record<string, unknown>) =>
+      navigateWithinOrPresent(presentation, navStack, route, props),
+    [navStack, presentation],
+  );
+
+  const replace = useCallback(
+    (route: RouteName, props?: Record<string, unknown>) =>
+      replaceWithinOrPresent(presentation, navStack, route, props),
+    [navStack, presentation],
+  );
+
+  const dismiss = useCallback((result?: unknown) => navStack.requestDismiss(result), [navStack]);
+
+  const canGoBack = useCallback(() => navStack.canGoBack(), [navStack]);
+
+  const setStep = useCallback((step: number) => navStack.setStep(step), [navStack]);
+
+  // Screen-facing back: pop a frame, else step a wizard back, else dismiss the
+  // surface — the exact behaviour the single `BottomSheetRouter` had per session.
+  const goBack = useCallback((): void => {
+    if (navStack.goBack()) return;
+    const current = navStack.getTop();
+    if (current.step > 0) {
+      navStack.setStep(current.step - 1);
+      return;
+    }
+    navStack.requestDismiss();
+  }, [navStack]);
+
+  const present = useCallback(
+    (route: RouteName, props?: Record<string, unknown>) => presentRoute(route, props).result,
+    [],
+  );
+
+  const screenProps = useMemo<BaseScreenProps>(() => {
+    const { initialStep: _omitInitialStep, ...rest } = top.props;
+    return {
+      // NAV-WITHIN
+      navigate,
+      goBack,
+      replace,
+      canGoBack,
+      initialStep: top.step,
+      step: top.step,
+      onStepChange: setStep,
+      setStep,
+      currentScreen: top.route,
+      // DEPTH — `onClose`/`onAuthenticated` unwind the whole session (matching the
+      // old `closeBottomSheet`); `dismiss`/`present` are the per-surface controls.
+      onClose: closeAllRouteSurfaces,
+      onAuthenticated: closeAllRouteSurfaces,
+      dismiss,
+      present,
+      // Theme + the route's own props.
+      theme: theme.mode,
+      ...rest,
+    };
+  }, [navigate, goBack, replace, canGoBack, setStep, present, dismiss, theme.mode, top.route, top.step, top.props]);
+
+  if (!ScreenComponent) return null;
+
+  return (
+    <ScreenErrorBoundary screenName={top.route}>
+      <ScreenComponent {...screenProps} />
+    </ScreenErrorBoundary>
+  );
+}
+
+export default SurfaceScreen;

package/src/ui/context/OxyContext.tsx

@@ -45,6 +45,7 @@ import { useDeviceManagement } from '../hooks/useDeviceManagement';
 import { getStorageKeys, createPlatformStorage, type StorageInterface } from '../utils/storageHelpers';
 import type { RouteName } from '../navigation/routes';
 import { showBottomSheet as globalShowBottomSheet } from '../navigation/bottomSheetManager';
+import { presentDetached, type SurfaceInstance } from '../navigation/surfaces';
 import { useQueryClient, onlineManager } from '@tanstack/react-query';
 import { clearQueryCache } from '../hooks/queryClient';
 import { useAvatarPicker } from '../hooks/useAvatarPicker';
@@ -643,6 +644,11 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   const commitSwitchedSessionRef = useRef(commitSwitchedSession);
   commitSwitchedSessionRef.current = commitSwitchedSession;
 
+  // The live AccountDialog surface (a stacked Bloom surface), while open. Held so
+  // `openAccountDialog` can no-op when already open and `closeAccountDialog` /
+  // `onSignedIn` can dismiss it. Cleared when the surface settles.
+  const accountDialogSurfaceRef = useRef<SurfaceInstance<'AccountDialog'> | null>(null);
+
   const accountDialogControllerRef = useRef<AccountDialogController | null>(null);
   if (!accountDialogControllerRef.current) {
     accountDialogControllerRef.current = createAccountDialogController({
@@ -655,7 +661,10 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
       socketFactory: io,
       commitSession: (session) => handleWebSessionRef.current(session),
       commitSwitchedSession: (session) => commitSwitchedSessionRef.current(session),
-      onSignedIn: () => setAccountDialogOpen(false),
+      onSignedIn: () => {
+        accountDialogSurfaceRef.current?.dismiss();
+        setAccountDialogOpen(false);
+      },
       openUrl: (url) => {
         if (isWebBrowser()) {
           redirectToAuthorize(url);
@@ -680,11 +689,28 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
 
   const openAccountDialog = useCallback((view?: AccountDialogView): void => {
     accountDialogControllerRef.current?.setView(view ?? 'accounts');
+    // Present the AccountDialog surface on the shared Bloom stack the FIRST time
+    // (subsequent opens just re-point the controller's view above). `presentDetached`
+    // keeps it OUT of the `showBottomSheet` route-surface lineage, so closing the
+    // bottom-sheet session never touches the account dialog and vice-versa.
+    if (!accountDialogSurfaceRef.current) {
+      const instance = presentDetached(
+        'AccountDialog',
+        { initialView: view ?? 'accounts' },
+        { placement: { base: 'bottom', md: 'center' }, dismissOnBackdrop: false, maxWidth: 420 },
+      );
+      accountDialogSurfaceRef.current = instance;
+      instance.result.finally(() => {
+        if (accountDialogSurfaceRef.current === instance) accountDialogSurfaceRef.current = null;
+        setAccountDialogOpen(false);
+      });
+    }
     setAccountDialogOpen(true);
   }, []);
 
   const closeAccountDialog = useCallback((): void => {
     accountDialogControllerRef.current?.cancelSignIn();
+    accountDialogSurfaceRef.current?.dismiss();
     setAccountDialogOpen(false);
   }, []);
 

package/src/ui/navigation/__tests__/getSurfaceConfig.test.ts

@@ -0,0 +1,39 @@
+import { getSurfaceConfig, getSurfacePresentation } from '../surfaceRegistry';
+
+/**
+ * `getSurfaceConfig` resolves which Bloom surface a route is presented in. The
+ * flagship image picker (FileManagement in image-only select mode) upgrades to a
+ * full-bleed `'fullScreen'` surface that owns its own scrolling; every other
+ * route stays on the responsive `'sheet'`. These guard the routing contract.
+ */
+describe('getSurfaceConfig presentation', () => {
+    const imageOnlyPickerProps = {
+        selectMode: true,
+        disabledMimeTypes: ['video/', 'audio/', 'application/pdf'],
+    };
+
+    it('defaults every route to the responsive sheet', () => {
+        expect(getSurfaceConfig('ManageAccount', {}).presentation).toBe('sheet');
+        expect(getSurfaceConfig('AvatarCrop', {}).presentation).toBe('sheet');
+        expect(getSurfacePresentation('ManageAccount', {})).toBe('sheet');
+    });
+
+    it('routes the FileManagement image-only picker to a full-screen surface', () => {
+        const config = getSurfaceConfig('FileManagement', imageOnlyPickerProps);
+        expect(config.presentation).toBe('fullScreen');
+        // The full-bleed picker owns its own FlatList → the host must not wrap it.
+        expect(config.scrollable).toBe(false);
+    });
+
+    it('keeps FileManagement on the sheet when it is not an image-only picker', () => {
+        // Browse mode (no selectMode) — the standard file manager.
+        expect(getSurfaceConfig('FileManagement', {}).presentation).toBe('sheet');
+        // Select mode that still allows non-image types is not the flagship picker.
+        expect(
+            getSurfaceConfig('FileManagement', {
+                selectMode: true,
+                disabledMimeTypes: ['video/'],
+            }).presentation,
+        ).toBe('sheet');
+    });
+});

package/src/ui/navigation/bottomSheetManager.ts

@@ -1,88 +1,61 @@
 import type { RouteName } from './routes';
 import { isValidRoute } from './routes';
-import { createStore } from 'zustand/vanilla';
+import { getSurfacePresentation } from './surfaceRegistry';
+import { closeAllRouteSurfaces, presentRoute, topRouteSurface } from './surfaces';
 
 /**
- * Bottom Sheet State Manager
+ * Bottom-sheet manager — the INTERNAL adapter that keeps the historical
+ * `showBottomSheet` / `closeBottomSheet` API working on top of the new Bloom
+ * surface stack (`navigation/surfaces.ts`). The public signatures are unchanged;
+ * this file just re-expresses them as thin calls into the typed surface layer.
+ *
+ * The old single-surface store is gone: `showBottomSheet` now open-or-navigates
+ * the "base" (top-most) route surface, and cross-presentation targets (the
+ * full-bleed image picker) stack a NEW surface on top — Bloom coordinates the
+ * z-order / backdrop / dismiss so nothing clashes.
  */
 
-export interface BottomSheetState {
-    currentScreen: RouteName | null;
-    screenProps: Record<string, unknown>;
-    currentStep?: number;
-    history: Array<{ screen: RouteName; props: Record<string, unknown>; step?: number }>;
-    isOpen: boolean;
-    fullScreen: boolean;
-}
-
-const initialState: BottomSheetState = {
-    currentScreen: null,
-    screenProps: {},
-    currentStep: undefined,
-    history: [],
-    isOpen: false,
-    fullScreen: false,
-};
-
-export const bottomSheetStore = createStore<BottomSheetState>(() => initialState);
-
-export const getState = () => bottomSheetStore.getState();
-
+/**
+ * Open a bottom-sheet route. If the top-most active surface hosts the SAME
+ * presentation (the common all-sheets case) the route is drilled into it; a route
+ * with a different presentation (the image picker's full-bleed surface) is
+ * presented as a NEW surface on top. Opening with no active surface presents the
+ * first one.
+ *
+ * `fullScreen` is accepted for signature compatibility and ignored — a route's
+ * surface is now derived from its registry config, not a per-call flag.
+ */
 export const showBottomSheet = (
-    screenOrConfig: RouteName | { screen: RouteName; props?: Record<string, unknown>; fullScreen?: boolean },
+  screenOrConfig:
+    | RouteName
+    | { screen: RouteName; props?: Record<string, unknown>; fullScreen?: boolean },
 ): void => {
-    const screen = typeof screenOrConfig === 'string' ? screenOrConfig : screenOrConfig.screen;
-    const props = typeof screenOrConfig === 'string' ? {} : (screenOrConfig.props || {});
-    const fullScreen = typeof screenOrConfig === 'string' ? false : (screenOrConfig.fullScreen ?? false);
-
-    if (!isValidRoute(screen)) {
-        if (__DEV__) console.warn(`[BottomSheet] Invalid route: ${screen}`);
-        return;
-    }
-
-    const state = bottomSheetStore.getState();
-
-    // Push current screen to history if navigating to different screen
-    if (state.currentScreen && state.currentScreen !== screen) {
-        bottomSheetStore.setState({
-            history: [...state.history, {
-                screen: state.currentScreen,
-                props: state.screenProps,
-                step: state.currentStep,
-            }],
-        });
-    }
-
-    bottomSheetStore.setState({
-        currentScreen: screen,
-        screenProps: props,
-        currentStep: typeof props.initialStep === 'number' ? props.initialStep : undefined,
-        isOpen: true,
-        fullScreen,
-    });
+  const screen = typeof screenOrConfig === 'string' ? screenOrConfig : screenOrConfig.screen;
+  const props = typeof screenOrConfig === 'string' ? {} : screenOrConfig.props ?? {};
+
+  if (!isValidRoute(screen)) {
+    if (__DEV__) console.warn(`[BottomSheet] Invalid route: ${screen}`);
+    return;
+  }
+
+  const top = topRouteSurface();
+  if (top && top.presentation === getSurfacePresentation(screen, props)) {
+    top.navigate(screen, props);
+  } else {
+    presentRoute(screen, props);
+  }
 };
 
+/** Dismiss the whole bottom-sheet session (every active route surface). */
 export const closeBottomSheet = (): void => {
-    bottomSheetStore.setState(initialState);
+  closeAllRouteSurfaces();
 };
 
+/**
+ * Step back within the top-most surface's route history. Returns `true` when a
+ * frame was popped, `false` when the surface is already at its root frame.
+ */
 export const goBack = (): boolean => {
-    const { history } = bottomSheetStore.getState();
-
-    if (history.length > 0) {
-        const prev = history[history.length - 1];
-        bottomSheetStore.setState({
-            currentScreen: prev.screen,
-            screenProps: prev.props,
-            currentStep: prev.step,
-            history: history.slice(0, -1),
-        });
-        return true;
-    }
-
-    return false;
-};
-
-export const updateState = (updates: Partial<BottomSheetState>) => {
-    bottomSheetStore.setState((state) => ({ ...state, ...updates }));
+  const top = topRouteSurface();
+  return top ? top.goBack() : false;
 };