@oxyhq/services 22.9.0 → 22.10.0

package/src/ui/components/{OxyAccountDialog.tsx → OxyAccountDialogScreen.tsx}

@@ -1,5 +1,5 @@
 /**
- * OxyAccountDialog — the ONE unified account dialog BODY for `@oxyhq/services`.
+ * 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,
@@ -23,17 +23,13 @@
 
 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 { Text } from '@oxyhq/bloom/typography';
-import { useTheme } from '@oxyhq/bloom/theme';
+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';
-import { LogoIcon } from './logo/LogoIcon';
 
-type Theme = ReturnType<typeof useTheme>;
 type Translate = ReturnType<typeof useI18n>['t'];
 
 /**
@@ -49,9 +45,8 @@ type Translate = ReturnType<typeof useI18n>['t'];
  * `@oxyhq/core`. Closing routes through `useOxy().closeAccountDialog`, which
  * dismisses the surface and runs its exit animation.
  */
-const OxyAccountDialog: React.FC = () => {
+const OxyAccountDialogScreen: React.FC = () => {
   const { accountDialogController: controller, closeAccountDialog } = useOxy();
-  const theme = useTheme();
   const { t } = useI18n();
 
   // A lightweight, header-only binding to the same controller `OxyAuthChooser`
@@ -67,79 +62,29 @@ const OxyAccountDialog: React.FC = () => {
   );
   const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 
-  if (!controller) {
-    return null;
-  }
-
   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);
 
-  return (
-    <>
-      <DialogHeader
-        snapshot={snapshot}
-        theme={theme}
-        t={t}
-        showBack={showBack}
-        onBack={() => controller.setView('accounts')}
-        onClose={closeAccountDialog}
-      />
-      <ScrollView style={styles.body} contentContainerStyle={styles.bodyContent} showsVerticalScrollIndicator={false}>
-        <OxyAuthChooser onComplete={closeAccountDialog} />
-      </ScrollView>
-    </>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// Header
-// ---------------------------------------------------------------------------
+  // 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,
+  });
 
-interface HeaderProps {
-  snapshot: AccountDialogSnapshot;
-  theme: Theme;
-  t: Translate;
-  showBack: boolean;
-  onBack: () => void;
-  onClose: () => void;
-}
+  if (!controller) {
+    return null;
+  }
 
-const DialogHeader: React.FC<HeaderProps> = ({ snapshot, theme, t, showBack, onBack, onClose }) => {
-  const { title, subtitle } = headerCopy(snapshot.view, snapshot.accounts.length, t);
   return (
-    <View style={styles.header}>
-      <View style={styles.headerBar}>
-        {showBack ? (
-          <Pressable
-            onPress={onBack}
-            style={[styles.iconButton, { backgroundColor: theme.colors.backgroundSecondary }]}
-            accessibilityRole="button"
-            accessibilityLabel={t('common.actions.back') || 'Back'}
-          >
-            <MaterialCommunityIcons name="chevron-left" size={22} color={theme.colors.textSecondary} />
-          </Pressable>
-        ) : (
-          <View style={styles.iconButton} />
-        )}
-        <LogoIcon height={34} color={theme.colors.primary} />
-        <Pressable
-          onPress={onClose}
-          style={[styles.iconButton, { backgroundColor: theme.colors.backgroundSecondary }]}
-          accessibilityRole="button"
-          accessibilityLabel={t('common.actions.close') || 'Close'}
-        >
-          <MaterialCommunityIcons name="close" size={20} color={theme.colors.textSecondary} />
-        </Pressable>
-      </View>
-      <Text style={[styles.title, { color: theme.colors.text }]} numberOfLines={1}>
-        {title}
-      </Text>
-      {subtitle ? (
-        <Text style={[styles.subtitle, { color: theme.colors.textSecondary }]} numberOfLines={2}>
-          {subtitle}
-        </Text>
-      ) : null}
+    <View style={styles.bodyContent}>
+      <OxyAuthChooser onComplete={closeAccountDialog} />
     </View>
   );
 };
@@ -194,44 +139,10 @@ const EMPTY_SNAPSHOT: AccountDialogSnapshot = {
 };
 
 const styles = StyleSheet.create({
-  header: {
-    alignItems: 'center',
-    marginBottom: 12,
-  },
-  headerBar: {
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 8,
-  },
-  iconButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: 22,
-    fontWeight: '800',
-    letterSpacing: -0.4,
-    textAlign: 'center',
-    marginTop: 6,
-  },
-  subtitle: {
-    fontSize: 14,
-    lineHeight: 19,
-    textAlign: 'center',
-    marginTop: 4,
-  },
-  body: {
-    width: '100%',
-  },
   bodyContent: {
     paddingTop: 4,
     paddingBottom: 4,
   },
 });
 
-export default OxyAccountDialog;
+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/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).

package/src/ui/components/SurfaceHeaderAction.tsx

@@ -0,0 +1,60 @@
+import type React from 'react';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { PressableScale } from '@oxyhq/bloom/pressable-scale';
+import { Text } from '@oxyhq/bloom/typography';
+
+export interface SurfaceHeaderActionProps {
+  /** Button label (e.g. a translated "Save"). */
+  label: string;
+  onPress: () => void;
+  /** Show a spinner instead of the label (also disables the button). */
+  loading?: boolean;
+  disabled?: boolean;
+}
+
+/**
+ * A filled pill action for a surface's nav-header right slot — the canonical
+ * "Save" affordance. Pass a memoized instance to `useSurfaceHeader({ right })`
+ * so the header does not thrash between renders.
+ */
+export const SurfaceHeaderAction: React.FC<SurfaceHeaderActionProps> = ({
+  label,
+  onPress,
+  loading,
+  disabled,
+}) => {
+  const { colors } = useTheme();
+  const isDisabled = disabled || loading;
+  return (
+    <PressableScale
+      onPress={onPress}
+      disabled={isDisabled}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      style={[styles.button, { backgroundColor: colors.primary, opacity: isDisabled ? 0.5 : 1 }]}
+    >
+      {loading ? (
+        <ActivityIndicator size="small" color={colors.primaryForeground} />
+      ) : (
+        <Text style={[styles.label, { color: colors.primaryForeground }]}>{label}</Text>
+      )}
+    </PressableScale>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    height: 36,
+    minWidth: 64,
+    paddingHorizontal: 14,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '600',
+    letterSpacing: -0.2,
+  },
+});

package/src/ui/components/SurfaceScreen.tsx

@@ -1,18 +1,24 @@
-import React, { useCallback, useEffect, useMemo, type ErrorInfo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, type ErrorInfo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useStore } from 'zustand';
 import { useTheme } from '@oxyhq/bloom/theme';
+import { useDialogHeader, type DialogHeaderConfig } from '@oxyhq/bloom/dialog';
 import type { SurfaceControls } from '@oxyhq/bloom/surfaces';
 import type { RouteName } from '../navigation/routes';
 import { getScreenComponent } from '../navigation/routes';
+import { pushSurfaceBackHandler } from '../navigation/surfaceBackBridge';
 import type { SurfaceNavStack } from '../navigation/surfaceNavStack';
-import type { SurfacePresentation } from '../navigation/surfaceRegistry';
+import { getSurfaceConfig, type SurfacePresentation } from '../navigation/surfaceRegistry';
 import {
   closeAllRouteSurfaces,
   navigateWithinOrPresent,
   presentRoute,
   replaceWithinOrPresent,
 } from '../navigation/surfaces';
+import {
+  SurfaceHeaderContext,
+  type SurfaceHeaderContent,
+} from '../hooks/useSurfaceHeader';
 import type { BaseScreenProps } from '../types/navigation';
 
 /** Error boundary catching screen render failures (e.g. a lazy `require()` throw). */
@@ -72,6 +78,8 @@ export interface SurfaceScreenProps {
   surface: SurfaceControls;
   /** This surface's presentation, so `navigate` knows when to drill in vs. stack. */
   presentation: SurfacePresentation;
+  /** Whether backdrop / Escape / back may dismiss at the root frame. Defaults to true. */
+  dismissOnBackdrop?: boolean;
 }
 
 /**
@@ -83,7 +91,12 @@ 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, presentation }: SurfaceScreenProps) {
+function SurfaceScreen({
+  navStack,
+  surface,
+  presentation,
+  dismissOnBackdrop = true,
+}: SurfaceScreenProps) {
   const theme = useTheme();
   const state = useStore(navStack.store);
   const top = state.frames[state.frames.length - 1];
@@ -124,11 +137,56 @@ function SurfaceScreen({ navStack, surface, presentation }: SurfaceScreenProps)
     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,
     [],
   );
 
+  // --- Dialog nav-header wiring ------------------------------------------
+  // Screens render NO header of their own: the Dialog owns a sticky gradient nav
+  // bar + a large collapsing title. Here the surface HOST supplies the back/close
+  // wiring and bridges the mounted screen's runtime contribution (its translated
+  // title/subtitle + any action slot, via `useSurfaceHeader`) into the Dialog's
+  // header. One writer to Bloom's header store — this merge — so back/close and
+  // the screen's content never race.
+  const [headerContent, setHeaderContent] = useState<SurfaceHeaderContent | null>(null);
+  const headerContext = useMemo(() => ({ setContent: setHeaderContent }), []);
+
+  const headerMode = useMemo(
+    () => getSurfaceConfig(top.route, top.props).header,
+    [top.route, top.props],
+  );
+  // Show a back affordance whenever the surface can navigate back — either an
+  // earlier frame in this surface's stack, or an earlier wizard step.
+  const canGoBackNow = state.frames.length > 1 || top.step > 0;
+
+  const dialogHeader = useMemo<DialogHeaderConfig | null>(() => {
+    if (!headerMode) return null;
+    return {
+      largeTitle: true,
+      ...headerContent,
+      // A screen may own its back (e.g. the account dialog's per-view back via
+      // `useSurfaceHeader({ onBack })`); otherwise the surface's nav-stack back
+      // drives it (a drilled-in frame / wizard step).
+      onBack: headerContent?.onBack ?? (canGoBackNow ? goBack : undefined),
+    };
+  }, [headerMode, headerContent, canGoBackNow, goBack]);
+
+  useDialogHeader(dialogHeader);
+
   const screenProps = useMemo<BaseScreenProps>(() => {
     const { initialStep: _omitInitialStep, ...rest } = top.props;
     return {
@@ -157,9 +215,11 @@ function SurfaceScreen({ navStack, surface, presentation }: SurfaceScreenProps)
   if (!ScreenComponent) return null;
 
   return (
-    <ScreenErrorBoundary screenName={top.route}>
-      <ScreenComponent {...screenProps} />
-    </ScreenErrorBoundary>
+    <SurfaceHeaderContext.Provider value={headerContext}>
+      <ScreenErrorBoundary screenName={top.route}>
+        <ScreenComponent {...screenProps} />
+      </ScreenErrorBoundary>
+    </SurfaceHeaderContext.Provider>
   );
 }