@oxy.so/services 11.14.0 → 11.16.0

package/src/ui/components/OxyProvider.tsx

@@ -1,4 +1,6 @@
-import { useEffect, useRef, useState, type FC } from 'react';
+import { OxySupportContext } from '../context/oxySupportContext';
+import { loadScreens } from '../navigation/routes';
+import { useEffect, useRef, useState, useMemo, type FC } from 'react';
 import { AppState, Platform, StyleSheet } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
@@ -20,6 +22,15 @@ import { KeyboardBoundary } from './KeyboardBoundary';
 import { ProductAnalyticsObserver } from '../analytics/productAnalytics';
 import { LanguageBridge } from './LanguageBridge';
 import { BloomLocaleBridge } from './BloomLocaleBridge';
+import { useOxy } from '../context/oxyRuntimeContext';
+import { useCurrentUser } from '../hooks/queries/useAccountQueries';
+
+/** Hydrate owner preferences after the bearer is ready, including on cold boot. */
+function AccountProfileObserver() {
+  const { canUsePrivateApi } = useOxy();
+  useCurrentUser({ enabled: canUsePrivateApi });
+  return null;
+}
 
 const bootStyles = StyleSheet.create({
   providerRoot: {
@@ -83,6 +94,10 @@ const OxyProvider: FC<OxyProviderProps> = ({
   oxyServices,
   children,
   onAuthStateChange,
+  onAskAlia,
+  documentationUrl,
+  aliaAvatar,
+  oxyOneArtwork,
   productAnalytics,
   storageKeyPrefix,
   clientId,
@@ -98,6 +113,14 @@ const OxyProvider: FC<OxyProviderProps> = ({
   backgroundSession = false,
   language,
 }) => {
+  const support = useMemo(
+    () => ({ onAskAlia, documentationUrl, aliaAvatar, oxyOneArtwork }),
+    [onAskAlia, documentationUrl, aliaAvatar, oxyOneArtwork],
+  );
+  useEffect(() => {
+    // Full entries are already registered; lean entries warm their screen chunk.
+    void loadScreens().catch(() => undefined);
+  }, []);
   // Storage + persistence wiring.
   //
   // The QueryClient exists synchronously so cache I/O can never delay the app
@@ -258,16 +281,19 @@ const OxyProvider: FC<OxyProviderProps> = ({
         accountQueries={accountQueries}
         onAuthStateChange={onAuthStateChange as OxyRuntimeProviderProps['onAuthStateChange']}
       >
+        <AccountProfileObserver />
         {productAnalytics ? <ProductAnalyticsObserver analytics={productAnalytics} /> : null}
         {language ? <LanguageBridge {...language} /> : null}
         <BloomLocaleBridge>
-          <SurfaceProvider>
-            {requireAuth === 'off' ? (
-              children
-            ) : (
-              <RequireOxyAuth prompt={requireAuth}>{children}</RequireOxyAuth>
-            )}
-          </SurfaceProvider>
+          <OxySupportContext.Provider value={support}>
+            <SurfaceProvider>
+              {requireAuth === 'off' ? (
+                children
+              ) : (
+                <RequireOxyAuth prompt={requireAuth}>{children}</RequireOxyAuth>
+              )}
+            </SurfaceProvider>
+          </OxySupportContext.Provider>
           <ToastOutlet />
         </BloomLocaleBridge>
       </OxyRuntimeProvider>

package/src/ui/components/OxySignInButton.tsx

@@ -19,7 +19,7 @@ import {
   type SocialButtonSize,
 } from '@oxy.so/bloom/social-button';
 import { toast } from '@oxy.so/bloom/toast';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 import { useI18n } from '../hooks/useI18n';
 import { subscribeToAccountDialog } from '../navigation/accountDialogManager';
 import { openAuthorizeUrlNative } from './oauthNavigation';

package/src/ui/components/ProfileButton.tsx

@@ -15,10 +15,13 @@ import {
   getNormalizedUserHandle,
 } from '@oxy.so/core';
 import { useAuth } from '../hooks/useAuth';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 import { useI18n } from '../hooks/useI18n';
 import { registerAccountDialogConsumerHooks } from '../navigation/accountDialogManager';
-import type { AccountDialogMenuItem } from '../navigation/accountDialogManager';
+import type {
+  AccountDialogMenuItem,
+  AccountDialogMenuSection,
+} from '../navigation/accountDialogManager';
 
 export interface ProfileButtonProps {
   /**
@@ -38,6 +41,8 @@ export interface ProfileButtonProps {
   onNavigateProfile?: () => void;
   /** App-owned actions rendered in the shared account menu. */
   menuItems?: readonly AccountDialogMenuItem[];
+  /** App-owned cards, in display order, below the Oxy account actions. */
+  menuSections?: readonly AccountDialogMenuSection[];
   /**
    * Retained for source compatibility. The trigger now opens the unified
    * `OxyAccountDialogScreen` (a centered / bottom-sheet modal) rather than an
@@ -62,6 +67,7 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
   onAddAccount,
   onNavigateProfile,
   menuItems,
+  menuSections,
   className,
   style,
 }) => {
@@ -77,7 +83,13 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
   }, [openAccountDialog]);
 
   useEffect(() => {
-    if (!onNavigateManage && !onAddAccount && !onNavigateProfile && !menuItems?.length) {
+    if (
+      !onNavigateManage &&
+      !onAddAccount &&
+      !onNavigateProfile &&
+      !menuItems?.length &&
+      !menuSections?.length
+    ) {
       return undefined;
     }
     return registerAccountDialogConsumerHooks({
@@ -85,8 +97,9 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
       onAddAccount,
       onNavigateProfile,
       menuItems,
+      menuSections,
     });
-  }, [onNavigateManage, onAddAccount, onNavigateProfile, menuItems]);
+  }, [onNavigateManage, onAddAccount, onNavigateProfile, menuItems, menuSections]);
 
   const avatarUrl = useMemo(
     () => (user?.avatar ? oxyServices.assets.publicUrl(user.avatar, 'thumb') : undefined),

package/src/ui/components/ProfileSummaryCard.tsx

@@ -1,34 +1,23 @@
 import type React from 'react';
-import { View, type ViewStyle } from 'react-native';
-import { H4, Text } from '@oxy.so/bloom/typography';
+import { View } from 'react-native';
 import { Avatar } from '@oxy.so/bloom/avatar';
-import { Card } from '@oxy.so/bloom/card';
-import { PressableScale } from '@oxy.so/bloom/pressable-scale';
+import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
 import AvatarCameraBadge from './AvatarCameraBadge';
 
-/**
- * ProfileSummaryCard — the shared "who am I" summary block rendered at the top
- * of {@link ManageAccountScreen} and {@link EditProfileScreen}.
- *
- * A Bloom filled {@link Card} containing a centered {@link Avatar}, the display
- * name and any number of secondary lines (handle, email, …). When
- * `onAvatarPress` is supplied the avatar becomes a {@link PressableScale} entry
- * point (used to open the avatar picker) and can render an optional camera
- * badge overlay.
- */
+/** Shared identity row; Bloom owns its material, geometry and full-row interaction. */
 export interface ProfileSummaryCardProps {
-  /** Primary display name shown under the avatar. */
+  /** Primary display name shown beside the avatar. */
   displayName: string;
   /** Resolved avatar thumbnail URL (undefined → initials fallback). */
   avatarUri?: string;
-  /** Avatar diameter in px. Defaults to 72. */
+  /** Avatar diameter in px. Defaults to 56. */
   avatarSize?: number;
   /**
    * Secondary lines rendered beneath the name (e.g. `@handle`, email).
    * Falsy entries are skipped so callers can pass conditional values inline.
    */
   lines?: Array<string | null | undefined | false>;
-  /** When provided, the avatar is pressable (e.g. opens the avatar picker). */
+  /** When provided, the summary row is pressable (e.g. opens the avatar picker). */
   onAvatarPress?: () => void;
   /** Render the camera badge overlay. Only meaningful with `onAvatarPress`. */
   showCameraBadge?: boolean;
@@ -36,64 +25,34 @@ export interface ProfileSummaryCardProps {
   avatarAccessibilityLabel?: string;
 }
 
-const cardStyle: ViewStyle = {
-  marginBottom: 16,
-};
-
-const pressableStyle: ViewStyle = {
-  position: 'relative',
-};
-
 const ProfileSummaryCard: React.FC<ProfileSummaryCardProps> = ({
   displayName,
   avatarUri,
-  avatarSize = 72,
+  avatarSize = 56,
   lines,
   onAvatarPress,
   showCameraBadge = false,
   avatarAccessibilityLabel,
-}) => {
-  const avatar = <Avatar source={avatarUri} name={displayName} size={avatarSize} />;
-
-  const avatarNode = onAvatarPress ? (
-    <PressableScale
+}) => (
+  <GroupedSection style={{ marginBottom: 16 }}>
+    <GroupedSectionItem
+      icon={
+        <View style={{ position: 'relative' }}>
+          <Avatar source={avatarUri} name={displayName} size={avatarSize} />
+          {onAvatarPress && showCameraBadge ? <AvatarCameraBadge /> : null}
+        </View>
+      }
+      title={displayName}
+      description={
+        (lines ?? [])
+          .filter((line): line is string => typeof line === 'string' && line.length > 0)
+          .join('\n') || undefined
+      }
       onPress={onAvatarPress}
-      accessibilityRole="button"
-      accessibilityLabel={avatarAccessibilityLabel}
-      style={pressableStyle}
-      className="mb-space-12"
-    >
-      {avatar}
-      {showCameraBadge ? <AvatarCameraBadge /> : null}
-    </PressableScale>
-  ) : (
-    <View className="mb-space-12">{avatar}</View>
-  );
-
-  const subtitleLines = (lines ?? []).filter(
-    (line): line is string => typeof line === 'string' && line.length > 0,
-  );
-
-  return (
-    <Card appearance="subtle" radius="radius-20" style={cardStyle}>
-      <View className="items-center px-space-20 py-space-24">
-        {avatarNode}
-        <H4 className="text-text" numberOfLines={1}>
-          {displayName}
-        </H4>
-        {subtitleLines.map((line, index) => (
-          <Text
-            // biome-ignore lint/suspicious/noArrayIndexKey: subtitle order is stable within a render; index keys are safe here.
-            key={`${index}-${line}`}
-            className="text-text-secondary text-sm mt-space-2"
-            numberOfLines={1}
-          >
-            {line}
-          </Text>
-        ))}
-      </View>
-    </Card>
-  );
-};
+      accessibilityLabel={onAvatarPress ? avatarAccessibilityLabel : undefined}
+      showChevron={false}
+    />
+  </GroupedSection>
+);
 
 export default ProfileSummaryCard;

package/src/ui/components/RequireOxyAuth.tsx

@@ -1,3 +1,6 @@
+import { Button } from '@oxy.so/bloom/button';
+import { RiCloseLine } from '@oxy.so/bloom/icons/RiCloseLine';
+import { SpinnerIcon } from '@oxy.so/bloom/loading';
 /**
  * RequireOxyAuth — the optional signed-out gate primitive (React Native).
  *
@@ -23,10 +26,10 @@
 
 import type React from 'react';
 import { useState, type ReactNode } from 'react';
-import { ActivityIndicator, Pressable, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { Text } from '@oxy.so/bloom/typography';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 import { OxySignInButton } from './OxySignInButton';
 import { LogoIcon } from './logo/LogoIcon';
 
@@ -156,23 +159,18 @@ const SoftGate: React.FC<SoftGateProps> = ({
           <Text style={[styles.bannerText, { color: theme.colors.text }]} numberOfLines={2}>
             {message}
           </Text>
-          <Pressable
-            onPress={onSignIn}
-            style={[styles.bannerCta, { backgroundColor: theme.colors.primary }]}
-            accessibilityRole="button"
-            accessibilityLabel={actionLabel}
-          >
-            <Text style={styles.bannerCtaText}>{actionLabel}</Text>
-          </Pressable>
-          <Pressable
+          <Button appearance="solid" tone="accent" size="sm" onPress={onSignIn}>
+            {actionLabel}
+          </Button>
+          <Button
+            appearance="plain"
+            tone="neutral"
+            size="sm"
+            iconOnly
             onPress={() => setDismissed(true)}
-            style={styles.bannerDismiss}
-            accessibilityRole="button"
             accessibilityLabel="Dismiss"
-            hitSlop={8}
-          >
-            <Text style={[styles.bannerDismissText, { color: theme.colors.textSecondary }]}>✕</Text>
-          </Pressable>
+            leadingIcon={RiCloseLine}
+          />
         </View>
       ) : null}
       <View style={styles.softBody}>{children}</View>
@@ -202,7 +200,7 @@ const NeutralLoading: React.FC = () => {
   const theme = useTheme();
   return (
     <View style={[styles.wallRoot, { backgroundColor: theme.colors.background }]}>
-      <ActivityIndicator color={theme.colors.primary} />
+      <SpinnerIcon color={theme.colors.primary} />
     </View>
   );
 };
@@ -226,26 +224,6 @@ const styles = StyleSheet.create({
     flex: 1,
     fontSize: 13.5,
   },
-  bannerCta: {
-    paddingVertical: 6,
-    paddingHorizontal: 14,
-    borderRadius: 999,
-  },
-  bannerCtaText: {
-    color: '#FFFFFF',
-    fontSize: 13,
-    fontWeight: '700',
-  },
-  bannerDismiss: {
-    width: 28,
-    height: 28,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  bannerDismissText: {
-    fontSize: 15,
-    fontWeight: '600',
-  },
   wallRoot: {
     flex: 1,
     alignItems: 'center',

package/src/ui/components/SettingsIcon.tsx

@@ -1,49 +1,24 @@
 import type React from 'react';
 import { memo } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { GroupedSectionIcon } from '@oxy.so/bloom/grouped-section';
 import MaterialCommunityIcons from '../icons/MaterialCommunityIcons';
-import { darkenColor } from '../utils/colorUtils';
 
 interface SettingsIconProps {
-  /** MaterialCommunityIcons icon name */
   name: React.ComponentProps<typeof MaterialCommunityIcons>['name'];
-  /** Background color for the circle */
   color: string;
-  /** Icon size (default 14, fits bloom's 20x20 container) */
   iconSize?: number;
-  /** Container size (default 20, matches bloom SettingsListItem icon slot) */
   size?: number;
 }
 
-/**
- * Compact colored-circle icon for use with bloom's SettingsListItem.
- * Renders a MaterialCommunityIcons glyph inside a tinted circle,
- * sized to fit bloom's 20x20 icon container.
- */
-const SettingsIconComponent: React.FC<SettingsIconProps> = ({
-  name,
-  color,
-  iconSize = 14,
-  size = 20,
-}) => (
-  <View
-    style={[
-      styles.circle,
-      { width: size, height: size, borderRadius: size / 2, backgroundColor: color },
-    ]}
-  >
-    <MaterialCommunityIcons name={name} size={iconSize} color={darkenColor(color)} />
-  </View>
+/** SDK glyph adapter; Bloom owns the shared icon surface and contrast. */
+const SettingsIconComponent: React.FC<SettingsIconProps> = ({ name, color, iconSize, size }) => (
+  <GroupedSectionIcon color={color} size={size} iconSize={iconSize}>
+    {({ color: foreground, size: glyphSize }) => (
+      <MaterialCommunityIcons name={name} size={glyphSize} color={foreground} />
+    )}
+  </GroupedSectionIcon>
 );
 
 SettingsIconComponent.displayName = 'SettingsIcon';
-
 export const SettingsIcon = memo(SettingsIconComponent);
 export default SettingsIcon;
-
-const styles = StyleSheet.create({
-  circle: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

package/src/ui/components/SurfaceHeaderAction.tsx

@@ -10,7 +10,7 @@ export interface SurfaceHeaderActionProps {
   disabled?: boolean;
 }
 
-/** Header actions share Bloom's sizing, surface, disabled and loading behavior. */
+/** @deprecated Declare primaryAction or actions through useSurfaceHeader so Bloom owns header composition. */
 export const SurfaceHeaderAction: React.FC<SurfaceHeaderActionProps> = ({
   label,
   onPress,

package/src/ui/components/SurfaceScreen.tsx

@@ -1,8 +1,8 @@
-import React, { Suspense, useCallback, useEffect, useMemo, useState, type ErrorInfo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, type ErrorInfo } from 'react';
 import { StyleSheet, View, useWindowDimensions } from 'react-native';
-import { Loading } from '@oxy.so/bloom/loading';
 import { Text } from '@oxy.so/bloom/typography';
 import { useStore } from 'zustand';
+import { useOverlayLayerContext, isTopmostOverlayLayer } from '@oxy.so/bloom/overlay';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { useDialogFrame, useDialogHeader, type DialogHeaderConfig } from '@oxy.so/bloom/dialog';
 import type { SurfaceControls } from '@oxy.so/bloom/surfaces';
@@ -11,12 +11,6 @@ import { getScreenComponent } from '../navigation/routes';
 import { pushSurfaceBackHandler } from '../navigation/surfaceBackBridge';
 import type { SurfaceNavStack } from '../navigation/surfaceNavStack';
 import { getSurfaceConfig } from '../navigation/surfaceRegistry';
-import {
-  closeAllRouteSurfaces,
-  navigateWithinOrPresent,
-  presentRoute,
-  replaceWithinOrPresent,
-} from '../navigation/surfaces';
 import { SurfaceHeaderContext, type SurfaceHeaderContent } from '../hooks/useSurfaceHeader';
 import { SurfaceFrameWidthContext } from '../hooks/useSurfaceFrameWidth';
 import type { BaseScreenProps } from '../types/navigation';
@@ -72,21 +66,15 @@ const errorStyles = StyleSheet.create({
   message: { fontSize: 13, textAlign: 'center' },
 });
 
-/**
- * Shown while a route's screen module is still loading. Screens are registered
- * as `lazy(() => import(...))` (see `../navigation/routes`), so the very first
- * presentation of a surface can land here for a frame; the surface chrome is
- * already on screen by then, so this fills only the body.
- */
-function ScreenPending() {
-  return (
-    <View style={errorStyles.container}>
-      <Loading variant="spinner" size="lg" />
-    </View>
-  );
+export interface SurfaceNavigationActions {
+  closeAllRouteSurfaces: typeof import('../navigation/surfaces').closeAllRouteSurfaces;
+  navigateWithinOrPresent: typeof import('../navigation/surfaces').navigateWithinOrPresent;
+  presentRoute: typeof import('../navigation/surfaces').presentRoute;
+  replaceWithinOrPresent: typeof import('../navigation/surfaces').replaceWithinOrPresent;
 }
 
 export interface SurfaceScreenProps {
+  navigation: SurfaceNavigationActions;
   /** This surface's route history (the NAV-WITHIN axis). */
   navStack: SurfaceNavStack;
   /** Bloom's per-surface controls (dismiss / present a child) — the DEPTH axis. */
@@ -104,8 +92,16 @@ export interface SurfaceScreenProps {
  * 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, dismissOnBackdrop = true }: SurfaceScreenProps) {
+function SurfaceScreen({
+  navStack,
+  surface,
+  navigation,
+  dismissOnBackdrop = true,
+}: SurfaceScreenProps) {
+  const { closeAllRouteSurfaces, navigateWithinOrPresent, presentRoute, replaceWithinOrPresent } =
+    navigation;
   const theme = useTheme();
+  const overlayLayer = useOverlayLayerContext();
   const state = useStore(navStack.store);
   const top = state.frames[state.frames.length - 1];
 
@@ -118,13 +114,13 @@ function SurfaceScreen({ navStack, surface, dismissOnBackdrop = true }: SurfaceS
   const navigate = useCallback(
     (route: RouteName, props?: Record<string, unknown>) =>
       navigateWithinOrPresent(navStack, route, props),
-    [navStack],
+    [navStack, navigateWithinOrPresent],
   );
 
   const replace = useCallback(
     (route: RouteName, props?: Record<string, unknown>) =>
       replaceWithinOrPresent(navStack, route, props),
-    [navStack],
+    [navStack, replaceWithinOrPresent],
   );
 
   // Screens' `dismiss(result)` resolves an active sub-flow (morphed-in avatar
@@ -140,34 +136,16 @@ function SurfaceScreen({ navStack, surface, dismissOnBackdrop = true }: SurfaceS
 
   const setStep = useCallback((step: number) => navStack.setStep(step), [navStack]);
 
-  // Screen-facing back: pop a frame, else step a wizard back, else dismiss the
+  // Screen-facing back: step a wizard back, else pop a frame, 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 handleSystemBack = useCallback((): boolean => {
-    if (navStack.goBack()) return true;
-    const current = navStack.getTop();
-    if (current.step > 0) {
-      navStack.setStep(current.step - 1);
-      return true;
-    }
-    if (dismissOnBackdrop) navStack.requestDismiss();
-    return true;
-  }, [navStack, dismissOnBackdrop]);
-
-  useEffect(() => pushSurfaceBackHandler(handleSystemBack), [handleSystemBack]);
-
   const present = useCallback(
     (route: RouteName, props?: Record<string, unknown>) => presentRoute(route, props).result,
-    [],
+    [presentRoute],
   );
 
   // --- Dialog nav-header wiring ------------------------------------------
@@ -214,9 +192,21 @@ function SurfaceScreen({ navStack, surface, dismissOnBackdrop = true }: SurfaceS
       () => ({
         key: `${top.route}#${top.step}#${screenWidth ?? ''}`,
         morph: config.morph,
+        colorPreset: config.colorPreset,
+        typography: config.typography,
+        direction: state.direction,
         size: frameSize,
       }),
-      [top.route, top.step, screenWidth, config.morph, frameSize],
+      [
+        top.route,
+        top.step,
+        screenWidth,
+        config.morph,
+        config.colorPreset,
+        config.typography,
+        frameSize,
+        state.direction,
+      ],
     ),
   );
   // Show a back affordance whenever the surface can navigate back — either an
@@ -237,6 +227,24 @@ function SurfaceScreen({ navStack, surface, dismissOnBackdrop = true }: SurfaceS
 
   useDialogHeader(dialogHeader);
 
+  // Hardware/browser back follows the same visible affordance, including local
+  // account/wizard history, before considering root dismissal.
+  const handleSystemBack = useCallback((): boolean => {
+    // A standalone sheet or menu above this dialog owns Back/Escape.
+    if (!isTopmostOverlayLayer(overlayLayer)) return false;
+    if (dialogHeader?.onBack) dialogHeader.onBack();
+    else if (!navStack.goBack() && dismissOnBackdrop) navStack.requestDismiss();
+    return true;
+  }, [dialogHeader?.onBack, navStack, dismissOnBackdrop, overlayLayer]);
+  useEffect(() => pushSurfaceBackHandler(handleSystemBack), [handleSystemBack]);
+
+  const closeSession = useCallback(() => {
+    // A menu-owned detached host may now contain any SDK route. Its explicit
+    // close action must dismiss that host as well as the tracked session.
+    navStack.requestDismiss();
+    closeAllRouteSurfaces();
+  }, [navStack, closeAllRouteSurfaces]);
+
   const screenProps = useMemo<BaseScreenProps>(() => {
     const { initialStep: _omitInitialStep, ...rest } = top.props;
     return {
@@ -252,8 +260,8 @@ function SurfaceScreen({ navStack, surface, dismissOnBackdrop = true }: SurfaceS
       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,
+      onClose: closeSession,
+      onAuthenticated: closeSession,
       dismiss,
       present,
       // Theme + the route's own props.
@@ -261,6 +269,7 @@ function SurfaceScreen({ navStack, surface, dismissOnBackdrop = true }: SurfaceS
       ...rest,
     };
   }, [
+    closeSession,
     navigate,
     goBack,
     replace,
@@ -280,9 +289,7 @@ function SurfaceScreen({ navStack, surface, dismissOnBackdrop = true }: SurfaceS
     <SurfaceHeaderContext.Provider value={headerContext}>
       <SurfaceFrameWidthContext.Provider value={setScreenWidth}>
         <ScreenErrorBoundary screenName={top.route}>
-          <Suspense fallback={<ScreenPending />}>
-            <ScreenComponent {...screenProps} />
-          </Suspense>
+          <ScreenComponent {...screenProps} />
         </ScreenErrorBoundary>
       </SurfaceFrameWidthContext.Provider>
     </SurfaceHeaderContext.Provider>

package/src/ui/components/__tests__/AccountInvitationAcceptance.test.tsx

@@ -6,7 +6,7 @@ const mockAccept = jest.fn();
 const mockSwitch = jest.fn();
 let mockUser: { id: string; kind: string; email: string; username: string } | null = null;
 const mockServices = { accounts: { invitations: { preview: mockPreview, accept: mockAccept } } };
-jest.mock('../../context/OxyContext', () => ({
+jest.mock('../../context/oxyRuntimeContext', () => ({
   useOxy: () => ({
     oxyServices: mockServices,
     user: mockUser,

package/src/ui/components/__tests__/BloomLocaleBridge.test.tsx

@@ -9,7 +9,7 @@ import { BloomLocaleBridge } from '../BloomLocaleBridge';
  */
 
 let mockCurrentLanguage = 'es-ES';
-jest.mock('../../context/OxyContext', () => ({
+jest.mock('../../context/oxyRuntimeContext', () => ({
   useOxy: () => ({ currentLanguage: mockCurrentLanguage }),
 }));
 

package/src/ui/components/__tests__/LanguageBridge.test.tsx

@@ -11,7 +11,7 @@ import { LanguageBridge } from '../LanguageBridge';
  */
 
 let mockCurrentLanguage = 'en-US';
-jest.mock('../../context/OxyContext', () => ({
+jest.mock('../../context/oxyRuntimeContext', () => ({
   useOxy: () => ({ currentLanguage: mockCurrentLanguage }),
 }));
 

package/src/ui/components/__tests__/followButtonAccessibility.test.tsx

@@ -50,7 +50,7 @@ jest.mock('../../hooks/useFollow', () => ({
   }),
 }));
 
-jest.mock('../../context/OxyContext', () => ({
+jest.mock('../../context/oxyRuntimeContext', () => ({
   useOxy: () => ({ oxyServices: {}, canUsePrivateApi: true, user: { id: 'viewer' } }),
 }));