@oxyhq/services 22.8.7 → 22.10.0

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,14 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   const commitSwitchedSessionRef = useRef(commitSwitchedSession);
   commitSwitchedSessionRef.current = commitSwitchedSession;
 
+  // The live AccountDialog surface (a stacked Bloom surface), while open — the
+  // SINGLE source of truth for "is the account dialog open". Held so
+  // `openAccountDialog` can no-op when already open and `closeAccountDialog` /
+  // `onSignedIn` can dismiss it. Its present→settle lifecycle is what drives the
+  // reactive `accountDialogOpen` mirror below: presenting flips it true, the
+  // surface settling (`result.finally`) flips it false — no other write site.
+  const accountDialogSurfaceRef = useRef<SurfaceInstance<'AccountDialog'> | null>(null);
+
   const accountDialogControllerRef = useRef<AccountDialogController | null>(null);
   if (!accountDialogControllerRef.current) {
     accountDialogControllerRef.current = createAccountDialogController({
@@ -655,7 +664,13 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
       socketFactory: io,
       commitSession: (session) => handleWebSessionRef.current(session),
       commitSwitchedSession: (session) => commitSwitchedSessionRef.current(session),
-      onSignedIn: () => setAccountDialogOpen(false),
+      onSignedIn: () => {
+        // Dismiss the surface; its settle (`result.finally` below) is what flips
+        // `accountDialogOpen` false. The surface's present→settle lifecycle is the
+        // SINGLE source of truth for "is the account dialog open" — never a manual
+        // flip here.
+        accountDialogSurfaceRef.current?.dismiss();
+      },
       openUrl: (url) => {
         if (isWebBrowser()) {
           redirectToAuthorize(url);
@@ -680,12 +695,38 @@ 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. When a
+    // route surface (e.g. ManageAccount) is already open, this stacks the dialog
+    // ABOVE it; dismissing the dialog unwinds back to that surface.
+    if (!accountDialogSurfaceRef.current) {
+      const instance = presentDetached(
+        'AccountDialog',
+        { initialView: view ?? 'accounts' },
+        { placement: { base: 'bottom', md: 'center' }, dismissOnBackdrop: false, maxWidth: 420 },
+      );
+      accountDialogSurfaceRef.current = instance;
+      // The surface settling is the ONE place `accountDialogOpen` flips false —
+      // covering every dismiss path (close button, `onSignedIn`, programmatic
+      // `closeAccountDialog`, host unmount). So the stack owns the open state.
+      instance.result.finally(() => {
+        if (accountDialogSurfaceRef.current === instance) {
+          accountDialogSurfaceRef.current = null;
+          setAccountDialogOpen(false);
+        }
+      });
+    }
     setAccountDialogOpen(true);
   }, []);
 
   const closeAccountDialog = useCallback((): void => {
     accountDialogControllerRef.current?.cancelSignIn();
-    setAccountDialogOpen(false);
+    // Dismiss the surface; its settle (`result.finally` above) flips
+    // `accountDialogOpen` false. Do NOT flip it here — the surface lifecycle is
+    // the single source of truth, so a manual write would be a second authority.
+    accountDialogSurfaceRef.current?.dismiss();
   }, []);
 
   // Start driving the dialog on mount; tear it down on unmount.
@@ -934,7 +975,6 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     currentLanguage,
     activeSessionId,
     queryClient,
-    showBottomSheet: showBottomSheetForContext,
   });
 
   const { accounts, refreshAccounts, switchToAccount, createAccount: createAccountFn } = useOxyAccountGraph({

package/src/ui/hooks/useAvatarPicker.ts

@@ -3,10 +3,11 @@
  *
  * Extracts avatar selection logic from OxyContext for better modularity.
  *
- * Flow:
- *   1. Open the FileManagement bottom sheet in select mode for image files.
- *   2. After the user picks an image, route to the AvatarCrop screen so they
- *      can square-crop + zoom before the avatar is set.
+ * Flow (typed promises over the shared surface stack — no callback props):
+ *   1. `surfaces.present('FileManagement', …)` opens the image-only picker and
+ *      resolves with the picked file (or `undefined` if the user cancels).
+ *   2. Resolve a private-safe source URL, then `surfaces.present('AvatarCrop', …)`
+ *      opens the square-crop editor and resolves with the cropped JPEG.
  *   3. The cropped JPEG is uploaded as a NEW file via `oxyServices.assetUpload`
  *      and that file becomes the user's avatar.
  *
@@ -15,12 +16,12 @@
  */
 
 import { useCallback } from 'react';
-import type { FileMetadata, OxyServices } from '@oxyhq/core';
+import type { OxyServices } from '@oxyhq/core';
 import { translate, updateAvatarVisibility } from '@oxyhq/core';
 import type { QueryClient } from '@tanstack/react-query';
 import { toast } from '@oxyhq/bloom';
-import type { RouteName } from '../navigation/routes';
 import { updateProfileWithAvatar } from '../utils/avatarUtils';
+import { surfaces } from '../navigation/surfaces';
 import type { AvatarCropResult } from '../screens/AvatarCropScreen';
 
 interface UseAvatarPickerOptions {
@@ -28,7 +29,6 @@ interface UseAvatarPickerOptions {
   currentLanguage: string | null | undefined;
   activeSessionId: string | null;
   queryClient: QueryClient;
-  showBottomSheet: (config: { screen: RouteName; props?: Record<string, unknown> }) => void;
 }
 
 /** Upload result shape returned by oxyServices.assetUpload (single-file path). */
@@ -52,7 +52,6 @@ export function useAvatarPicker({
   currentLanguage,
   activeSessionId,
   queryClient,
-  showBottomSheet,
 }: UseAvatarPickerOptions) {
   /**
    * Final step: take the cropped JPEG, upload it as a new public file, then
@@ -99,68 +98,56 @@ export function useAvatarPicker({
     [activeSessionId, currentLanguage, oxyServices, queryClient],
   );
 
-  /**
-   * After the user picks a file in the FileManagement sheet, resolve a working
-   * source URL and route to the crop screen.
-   *
-   * The picked file is usually PRIVATE, so the synchronous
-   * `getFileDownloadUrl` (public CDN origin) would 404 and the crop screen's
-   * `Image.getSize` would fail silently. We resolve the authenticated URL via
-   * `assetGetUrl` (which throws on failure — unlike `getFileDownloadUrlAsync`,
-   * which swallows errors and falls back to the broken public URL) so a
-   * failure surfaces a real user-facing error instead of a blank crop canvas.
-   * No variant is requested — cropping needs the original.
-   */
-  const handleFilePicked = useCallback(
-    async (file: FileMetadata) => {
-      if (!file.contentType?.startsWith('image/')) {
-        toast.error(
-          translate(currentLanguage ?? undefined, 'editProfile.toasts.selectImage') ||
-            'Please select an image file',
-        );
-        return;
-      }
+  const openAvatarPicker = useCallback(async () => {
+    // 1. Present the image-only picker; it dismisses with the picked file when
+    //    the user taps one, or `undefined` if they cancel.
+    const file = await surfaces.present('FileManagement', {
+      selectMode: true,
+      multiSelect: false,
+      disabledMimeTypes: ['video/', 'audio/', 'application/pdf'],
+    });
+    if (!file) return;
 
-      let sourceUri: string;
-      try {
-        const resolved = await oxyServices.assetGetUrl(file.id);
-        if (!resolved?.url) {
-          throw new Error('No download URL returned for the selected image');
-        }
-        sourceUri = resolved.url;
-      } catch (e: unknown) {
-        const message = e instanceof Error ? e.message : undefined;
-        toast.error(
-          message ||
-            translate(currentLanguage ?? undefined, 'editProfile.toasts.cropMeasureFailed') ||
-            'Could not load the selected image',
-        );
-        return;
+    if (!file.contentType?.startsWith('image/')) {
+      toast.error(
+        translate(currentLanguage ?? undefined, 'editProfile.toasts.selectImage') ||
+          'Please select an image file',
+      );
+      return;
+    }
+
+    // 2. Resolve a working source URL. The picked file is usually PRIVATE, so
+    //    the synchronous `getFileDownloadUrl` (public CDN origin) would 404 and
+    //    the crop screen's `Image.getSize` would fail silently. `assetGetUrl`
+    //    throws on failure (unlike `getFileDownloadUrlAsync`, which swallows
+    //    errors and falls back to the broken public URL), so a failure surfaces
+    //    a real user-facing error instead of a blank crop canvas. No variant is
+    //    requested — cropping needs the original.
+    let sourceUri: string;
+    try {
+      const resolved = await oxyServices.assetGetUrl(file.id);
+      if (!resolved?.url) {
+        throw new Error('No download URL returned for the selected image');
       }
+      sourceUri = resolved.url;
+    } catch (e: unknown) {
+      const message = e instanceof Error ? e.message : undefined;
+      toast.error(
+        message ||
+          translate(currentLanguage ?? undefined, 'editProfile.toasts.cropMeasureFailed') ||
+          'Could not load the selected image',
+      );
+      return;
+    }
 
-      showBottomSheet({
-        screen: 'AvatarCrop',
-        props: {
-          imageUri: sourceUri,
-          onConfirm: finalizeCroppedAvatar,
-        },
-      });
-    },
-    [currentLanguage, finalizeCroppedAvatar, oxyServices, showBottomSheet],
-  );
+    // 3. Present the square-crop editor in place of the picker; it dismisses
+    //    with the cropped JPEG on confirm, or `undefined` if cancelled.
+    const cropped = await surfaces.present('AvatarCrop', { imageUri: sourceUri });
+    if (!cropped) return;
 
-  const openAvatarPicker = useCallback(() => {
-    showBottomSheet({
-      screen: 'FileManagement',
-      props: {
-        selectMode: true,
-        multiSelect: false,
-        disabledMimeTypes: ['video/', 'audio/', 'application/pdf'],
-        afterSelect: 'none',
-        onSelect: handleFilePicked,
-      },
-    });
-  }, [handleFilePicked, showBottomSheet]);
+    // 4. Upload + set as the user's avatar.
+    await finalizeCroppedAvatar(cropped);
+  }, [currentLanguage, finalizeCroppedAvatar, oxyServices]);
 
   return { openAvatarPicker };
 }

package/src/ui/hooks/useSurfaceHeader.ts

@@ -0,0 +1,56 @@
+import { createContext, useContext, useLayoutEffect } from 'react';
+import type { DialogHeaderConfig } from '@oxyhq/bloom/dialog';
+
+/**
+ * The header content a mounted surface screen contributes at runtime: its
+ * (translated) title/subtitle and optional slot nodes. Back/close affordances
+ * are owned by the surface host (`SurfaceScreen`) — a screen never wires them.
+ *
+ * A `right` slot is the canonical place for a screen-state action (e.g. a Save
+ * button whose disabled/loading state reflects the form). Slot nodes MUST be
+ * referentially stable (memoize them with `useMemo`) so the header does not
+ * thrash.
+ */
+export type SurfaceHeaderContent = Pick<
+  DialogHeaderConfig,
+  'title' | 'subtitle' | 'largeTitle' | 'left' | 'right' | 'onBack'
+>;
+
+interface SurfaceHeaderContextValue {
+  setContent: (content: SurfaceHeaderContent | null) => void;
+}
+
+/**
+ * Provided by {@link ../components/SurfaceScreen}. Bridges a screen's runtime
+ * header contribution up to the host, which merges it with the back/close
+ * wiring and drives the Dialog's own nav header. `null` outside a surface (or in
+ * a headerless surface), so {@link useSurfaceHeader} is a safe no-op there.
+ */
+export const SurfaceHeaderContext = createContext<SurfaceHeaderContextValue | null>(null);
+
+/**
+ * Declare the Dialog nav header's content from within a surface screen — its
+ * title/subtitle and any action slot. Merges over nothing (the host owns
+ * back/close), replaces on change, and clears on unmount. Call it unconditionally;
+ * it is a no-op outside a header-mode surface.
+ */
+export function useSurfaceHeader(content: SurfaceHeaderContent | null | undefined): void {
+  const ctx = useContext(SurfaceHeaderContext);
+  const set = ctx?.setContent;
+  // Set synchronously in the commit's layout phase so the bar/title fill in
+  // BEFORE the browser paints — no first-frame flash of an empty bar.
+  useLayoutEffect(() => {
+    if (!set) return;
+    set(content ?? null);
+    return () => set(null);
+    // Slot nodes (`left`/`right`) are compared by identity; callers memoize them.
+  }, [
+    set,
+    content?.title,
+    content?.subtitle,
+    content?.largeTitle,
+    content?.left,
+    content?.right,
+    content?.onBack,
+  ]);
+}

package/src/ui/hooks/useSwitchableAccounts.ts

@@ -32,7 +32,7 @@ const EMPTY_SNAPSHOT: AccountDialogSnapshot = {
  * real per-account name / email / avatar / color.
  *
  * This is a thin binding over the shared `AccountDialogController` in
- * `@oxyhq/core` (the SAME headless source the {@link OxyAccountDialog} renders),
+ * `@oxyhq/core` (the SAME headless source the {@link OxyAccountDialogScreen} renders),
  * so there is ONE projection (`projectSwitchableAccounts`) and one switch path
  * (`controller.switchTo`) across the whole SDK — the local duplicate projection
  * this hook used to own has been removed. Every switch routes through

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/__tests__/surfaceNavStack.test.ts

@@ -0,0 +1,68 @@
+import { createSurfaceNavStack } from '../surfaceNavStack';
+import { __resetSurfaceBackBridgeForTests, pushSurfaceBackHandler, __invokeTopSurfaceBackForTests } from '../surfaceBackBridge';
+
+describe('createSurfaceNavStack', () => {
+  it('starts with a single root frame', () => {
+    const stack = createSurfaceNavStack('ManageAccount', { foo: 1 });
+    expect(stack.getTop().route).toBe('ManageAccount');
+    expect(stack.getTop().props).toEqual({ foo: 1 });
+    expect(stack.canGoBack()).toBe(false);
+  });
+
+  it('navigate pushes frames and goBack pops them', () => {
+    const stack = createSurfaceNavStack('ManageAccount');
+    stack.navigate('EditProfile', { userId: 'u1' });
+    expect(stack.getTop().route).toBe('EditProfile');
+    expect(stack.canGoBack()).toBe(true);
+    expect(stack.goBack()).toBe(true);
+    expect(stack.getTop().route).toBe('ManageAccount');
+    expect(stack.goBack()).toBe(false);
+  });
+
+  it('replace swaps the top frame without growing history', () => {
+    const stack = createSurfaceNavStack('ManageAccount');
+    stack.navigate('EditProfile');
+    stack.replace('PrivacySettings');
+    expect(stack.getTop().route).toBe('PrivacySettings');
+    expect(stack.goBack()).toBe(true);
+    expect(stack.getTop().route).toBe('ManageAccount');
+  });
+
+  it('tracks wizard steps on the current frame', () => {
+    const stack = createSurfaceNavStack('EditProfile', { initialStep: 2 });
+    expect(stack.getTop().step).toBe(2);
+    expect(stack.canGoBack()).toBe(true);
+    stack.setStep(1);
+    expect(stack.getTop().step).toBe(1);
+  });
+
+  it('requestDismiss flips closing once', () => {
+    const stack = createSurfaceNavStack('ManageAccount');
+    stack.requestDismiss('done');
+    expect(stack.store.getState().closing).toBe(true);
+    expect(stack.store.getState().closeResult).toBe('done');
+    stack.requestDismiss('again');
+    expect(stack.store.getState().closeResult).toBe('done');
+  });
+});
+
+describe('pushSurfaceBackHandler', () => {
+  afterEach(() => {
+    __resetSurfaceBackBridgeForTests();
+  });
+
+  it('delegates to the topmost handler', () => {
+    const calls: string[] = [];
+    pushSurfaceBackHandler(() => {
+      calls.push('bottom');
+      return true;
+    });
+    pushSurfaceBackHandler(() => {
+      calls.push('top');
+      return true;
+    });
+
+    expect(__invokeTopSurfaceBackForTests()).toBe(true);
+    expect(calls).toEqual(['top']);
+  });
+});

package/src/ui/navigation/accountDialogManager.ts

@@ -1,10 +1,22 @@
 /**
- * Imperative controls for the unified {@link OxyAccountDialog}.
+ * Imperative, outside-React entry points for the unified `OxyAccountDialogScreen`.
+ *
+ * These delegate to the live handles the mounted `OxyProvider` registers via
+ * {@link registerAccountDialogControls}. Under the hood `open`/`close` present
+ * and dismiss the `AccountDialog` surface on the shared Bloom surface stack
+ * (`OxyContext.openAccountDialog` → `presentDetached('AccountDialog', …)`), so
+ * whether the dialog is open is owned by that stack — this module is only the
+ * thin bridge that reaches the provider's controller (which sets the dialog
+ * view) from a non-React call site.
  */
 
 import type { AccountDialogView } from '@oxyhq/core';
 
-/** Live open/close handles registered by the mounted provider. */
+/**
+ * Live open/close handles registered by the mounted provider. `open` presents
+ * the `AccountDialog` surface (and points its view); `close` dismisses it. Both
+ * are stack operations — this interface never carries visibility state.
+ */
 export interface AccountDialogControls {
   open: (view?: AccountDialogView) => void;
   close: () => void;

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;
 };