@oxyhq/services 22.9.0 → 22.11.0

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

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
     View,
     Pressable,
@@ -17,6 +17,7 @@ import { getAccountDisplayName, getAccountFallbackHandle } from '@oxyhq/core';
 import { useAuth } from '../hooks/useAuth';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
+import { registerAccountDialogConsumerHooks } from '../navigation/accountDialogManager';
 
 const isWeb = Platform.OS === 'web';
 
@@ -65,7 +66,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 +83,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}:
@@ -102,6 +103,9 @@ export interface ProfileButtonProps {
 const ProfileButton: React.FC<ProfileButtonProps> = ({
     expanded = true,
     avatarSize,
+    onNavigateManage,
+    onAddAccount,
+    onNavigateProfile,
     className,
     style,
 }) => {
@@ -127,6 +131,17 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
         openAccountDialog('accounts');
     }, [openAccountDialog]);
 
+    useEffect(() => {
+        if (!onNavigateManage && !onAddAccount && !onNavigateProfile) {
+            return undefined;
+        }
+        return registerAccountDialogConsumerHooks({
+            onNavigateManage,
+            onAddAccount,
+            onNavigateProfile,
+        });
+    }, [onNavigateManage, onAddAccount, onNavigateProfile]);
+
     const avatarUrl = useMemo(
         () => (user?.avatar ? oxyServices.getFileDownloadUrl(user.avatar, 'thumb') : undefined),
         [user?.avatar, oxyServices],

package/src/ui/components/ProfileSummaryCard.tsx

@@ -1,11 +1,10 @@
 import type React from 'react';
 import { View, type ViewStyle } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
-import { useTheme } from '@oxyhq/bloom/theme';
 import { H4, Text } from '@oxyhq/bloom/typography';
 import { Avatar } from '@oxyhq/bloom/avatar';
 import { Card } from '@oxyhq/bloom/card';
 import { PressableScale } from '@oxyhq/bloom/pressable-scale';
+import AvatarCameraBadge from './AvatarCameraBadge';
 
 /**
  * ProfileSummaryCard — the shared "who am I" summary block rendered at the top
@@ -37,18 +36,6 @@ export interface ProfileSummaryCardProps {
     avatarAccessibilityLabel?: string;
 }
 
-const badgeStyle: ViewStyle = {
-    position: 'absolute',
-    right: 0,
-    bottom: 0,
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 2,
-};
-
 const cardStyle: ViewStyle = {
     borderRadius: 20,
     marginBottom: 16,
@@ -67,8 +54,6 @@ const ProfileSummaryCard: React.FC<ProfileSummaryCardProps> = ({
     showCameraBadge = false,
     avatarAccessibilityLabel,
 }) => {
-    const bloomTheme = useTheme();
-
     const avatar = <Avatar source={avatarUri} name={displayName} size={avatarSize} />;
 
     const avatarNode = onAvatarPress ? (
@@ -80,15 +65,7 @@ const ProfileSummaryCard: React.FC<ProfileSummaryCardProps> = ({
             className="mb-space-12"
         >
             {avatar}
-            {showCameraBadge ? (
-                <View style={badgeStyle} className="bg-fill-brand border-border-image">
-                    <Ionicons
-                        name="camera"
-                        size={14}
-                        color={bloomTheme.colors.primaryForeground}
-                    />
-                </View>
-            ) : null}
+            {showCameraBadge ? <AvatarCameraBadge /> : null}
         </PressableScale>
     ) : (
         <View className="mb-space-12">{avatar}</View>

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,28 @@
-import React, { useCallback, useEffect, useMemo, type ErrorInfo } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useCallback, useEffect, useMemo, useState, type ErrorInfo } from 'react';
+import { StyleSheet, Text, View, useWindowDimensions } from 'react-native';
 import { useStore } from 'zustand';
 import { useTheme } from '@oxyhq/bloom/theme';
+import {
+  useDialogFrame,
+  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 } 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). */
@@ -70,8 +80,8 @@ export interface SurfaceScreenProps {
   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;
+  /** Whether backdrop / Escape / back may dismiss at the root frame. Defaults to true. */
+  dismissOnBackdrop?: boolean;
 }
 
 /**
@@ -83,7 +93,11 @@ 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,
+  dismissOnBackdrop = true,
+}: SurfaceScreenProps) {
   const theme = useTheme();
   const state = useStore(navStack.store);
   const top = state.frames[state.frames.length - 1];
@@ -96,17 +110,24 @@ function SurfaceScreen({ navStack, surface, presentation }: SurfaceScreenProps)
 
   const navigate = useCallback(
     (route: RouteName, props?: Record<string, unknown>) =>
-      navigateWithinOrPresent(presentation, navStack, route, props),
-    [navStack, presentation],
+      navigateWithinOrPresent(navStack, route, props),
+    [navStack],
   );
 
   const replace = useCallback(
     (route: RouteName, props?: Record<string, unknown>) =>
-      replaceWithinOrPresent(presentation, navStack, route, props),
-    [navStack, presentation],
+      replaceWithinOrPresent(navStack, route, props),
+    [navStack],
   );
 
-  const dismiss = useCallback((result?: unknown) => navStack.requestDismiss(result), [navStack]);
+  // Screens' `dismiss(result)` resolves an active sub-flow (morphed-in avatar
+  // picker) back to its caller and pops to its entry frame; with no flow it
+  // dismisses the whole surface (a screen presented as its own surface) — the
+  // historical behaviour. `navStack.resolveFlowOrDismiss` owns that fork.
+  const dismiss = useCallback(
+    (result?: unknown) => navStack.resolveFlowOrDismiss(result),
+    [navStack],
+  );
 
   const canGoBack = useCallback(() => navStack.canGoBack(), [navStack]);
 
@@ -124,11 +145,82 @@ 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 config = useMemo(() => getSurfaceConfig(top.route, top.props), [top.route, top.props]);
+  const headerMode = config.header;
+
+  // --- Size morphing on nav-within ---------------------------------------
+  // The Dialog cannot see a drill-in from its own props (only this host
+  // re-renders when the nav stack moves), so it is told which frame is on
+  // screen. When that identity changes the surface MORPHS — the panel animates
+  // between the two frames' sizes instead of hard-cutting. A wizard step counts
+  // as a frame: it swaps the visible content inside one screen the same way.
+  // A `stacks` route opens its OWN surface (never a frame here); everything else
+  // morphs.
+  //
+  // A route may declare an EXPLICIT large morph target (`frameSize`) — the media
+  // selector's own-scroller grid, which the panel can't measure, grows the
+  // container to a near-full-height, wider card and shrinks back on exit. Resolve
+  // its viewport-relative height to px here (the Dialog clamps to the viewport).
+  const { height: viewportHeight } = useWindowDimensions();
+  const frameSize = useMemo(() => {
+    const spec = config.frameSize;
+    if (!spec) return undefined;
+    const height =
+      spec.heightRatio !== undefined ? Math.round(viewportHeight * spec.heightRatio) : undefined;
+    return { height, maxWidth: spec.maxWidth };
+  }, [config.frameSize, viewportHeight]);
+  useDialogFrame(
+    useMemo(
+      () => ({ key: `${top.route}#${top.step}`, morph: config.morph, size: frameSize }),
+      [top.route, top.step, config.morph, frameSize],
+    ),
+  );
+  // 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 +249,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>
   );
 }
 

package/src/ui/components/fileManagement/FileDetailsModal.tsx

@@ -1,62 +1,40 @@
 import type React from 'react';
 import { View, Text } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import { Dialog, type DialogControlProps } from '@oxyhq/bloom';
+import { Button } from '@oxyhq/bloom/button';
 import { useTheme } from '@oxyhq/bloom/theme';
+import { surfaces, type SurfaceControls } from '@oxyhq/bloom/surfaces';
 import type { FileMetadata } from '@oxyhq/core';
 import { useI18n } from '../../hooks/useI18n';
 import { formatFileSize, getFileIcon } from '../../utils/fileManagement';
 
 interface FileDetailsModalProps {
-    control: DialogControlProps;
-    file: FileMetadata | null;
+    /** The presenting surface's controls (from `surfaces.present`). */
+    surface: SurfaceControls;
+    file: FileMetadata;
     onDownload: (fileId: string, filename: string) => void;
     onDelete: (fileId: string, filename: string) => void;
     isOwner: boolean;
-    onClose?: () => void;
 }
 
+/**
+ * File-detail panel — a rich presented surface (NOT a yes/no confirm): a file's
+ * icon + metadata plus download / delete / cancel actions. Each action first
+ * dismisses this surface, then runs its handler, so a follow-up delete confirm
+ * stacks cleanly above whatever remains. Presented via {@link presentFileDetails}.
+ */
 export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
-    control,
+    surface,
     file,
     onDownload,
     onDelete,
     isOwner,
-    onClose,
 }) => {
     const { t } = useI18n();
     const { colors } = useTheme();
 
-    if (!file) return null;
-
-    const actions = isOwner
-        ? [
-              {
-                  label: t('fileManagement.details.download'),
-                  onPress: () => onDownload(file.id, file.filename),
-              },
-              {
-                  label: t('common.actions.delete'),
-                  color: 'destructive' as const,
-                  onPress: () => onDelete(file.id, file.filename),
-              },
-              { label: t('common.cancel'), color: 'cancel' as const },
-          ]
-        : [
-              {
-                  label: t('fileManagement.details.download'),
-                  onPress: () => onDownload(file.id, file.filename),
-              },
-              { label: t('common.cancel'), color: 'cancel' as const },
-          ];
-
     return (
-        <Dialog
-            control={control}
-            onClose={onClose}
-            label={t('fileManagement.details.title')}
-            actions={actions}
-        >
+        <View>
             <View className="bg-secondary border-border p-[18px] rounded-[14px] border items-center">
                 <View className="mb-space-16">
                     <Ionicons
@@ -110,6 +88,42 @@ export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
                     )}
                 </View>
             </View>
-        </Dialog>
+
+            <View style={{ gap: 8 }}>
+                <Button
+                    variant="primary"
+                    onPress={() => {
+                        surface.dismiss();
+                        onDownload(file.id, file.filename);
+                    }}
+                >
+                    {t('fileManagement.details.download')}
+                </Button>
+                {isOwner ? (
+                    <Button
+                        variant="destructive"
+                        onPress={() => {
+                            surface.dismiss();
+                            onDelete(file.id, file.filename);
+                        }}
+                    >
+                        {t('common.actions.delete')}
+                    </Button>
+                ) : null}
+                <Button variant="secondary" onPress={() => surface.dismiss()}>
+                    {t('common.cancel')}
+                </Button>
+            </View>
+        </View>
     );
 };
+
+/** Options accepted by {@link presentFileDetails} (everything but `surface`). */
+type PresentFileDetailsOptions = Omit<FileDetailsModalProps, 'surface'>;
+
+/** Present the file-detail panel on the shared surface stack. */
+export function presentFileDetails(options: PresentFileDetailsOptions): void {
+    void surfaces.present((surface) => (
+        <FileDetailsModal surface={surface} {...options} />
+    ));
+}

package/src/ui/components/modals/DeleteAccountModal.tsx

@@ -2,18 +2,27 @@ import type React from 'react';
 import { useState, useCallback } from 'react';
 import { View, Text, TextInput } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import { Dialog, type DialogControlProps } from '@oxyhq/bloom';
+import { Button } from '@oxyhq/bloom/button';
 import { useTheme } from '@oxyhq/bloom/theme';
+import { surfaces, type SurfaceControls } from '@oxyhq/bloom/surfaces';
 
 interface DeleteAccountModalProps {
-    control: DialogControlProps;
+    /** The presenting surface's controls (from `surfaces.present`). */
+    surface: SurfaceControls;
     username: string;
     onDelete: (confirmText: string) => Promise<void>;
     t: (key: string, params?: Record<string, string>) => string | undefined;
 }
 
+/**
+ * Delete-account confirmation — a rich presented surface (NOT a yes/no confirm):
+ * the user must retype their username, then the destructive action runs
+ * `onDelete`. On success the surface is dismissed with `true` (the presenter
+ * then signs out + closes); cancel dismisses with `false`. Presented via
+ * {@link presentDeleteAccount}.
+ */
 const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
-    control,
+    surface,
     username,
     onDelete,
     t,
@@ -33,36 +42,21 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
 
         try {
             await onDelete(confirmUsername);
-            // Dialog will be closed by parent on success
+            surface.dismiss(true);
         } catch (err: unknown) {
             setError((err instanceof Error ? err.message : null) || t('deleteAccount.error') || 'Failed to delete account');
         } finally {
             setIsDeleting(false);
         }
-    }, [isValid, confirmUsername, onDelete, t]);
+    }, [isValid, confirmUsername, onDelete, surface, t]);
 
-    const handleCleanup = useCallback(() => {
+    const handleCancel = useCallback(() => {
         if (isDeleting) return;
-        setConfirmUsername('');
-        setError(null);
-    }, [isDeleting]);
+        surface.dismiss(false);
+    }, [isDeleting, surface]);
 
     return (
-        <Dialog
-            control={control}
-            onClose={handleCleanup}
-            label="Delete Account"
-            actions={[
-                {
-                    label: t('deleteAccount.confirm') || 'Delete Forever',
-                    color: 'destructive',
-                    onPress: handleDelete,
-                    disabled: !isValid || isDeleting,
-                    shouldCloseOnPress: false,
-                },
-                { label: t('common.cancel') || 'Cancel', color: 'cancel' },
-            ]}
-        >
+        <View>
             <View className="flex-row items-center mb-4 gap-3">
                 <Ionicons name="alert-circle" size={32} color={theme.colors.error} />
                 <Text className="text-text text-xl font-bold" style={{ color: theme.colors.error }}>
@@ -92,7 +86,7 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
                 <TextInput
                     className="text-text bg-bg text-base py-3 px-4 border rounded-lg"
                     style={{
-                        borderColor: confirmUsername === username ? theme.colors.success : theme.colors.border,
+                        borderColor: isValid ? theme.colors.success : theme.colors.border,
                     }}
                     value={confirmUsername}
                     onChangeText={setConfirmUsername}
@@ -103,8 +97,35 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
                     editable={!isDeleting}
                 />
             </View>
-        </Dialog>
+
+            <View style={{ gap: 8 }}>
+                <Button
+                    variant="destructive"
+                    onPress={handleDelete}
+                    disabled={!isValid || isDeleting}
+                    loading={isDeleting}
+                >
+                    {t('deleteAccount.confirm') || 'Delete Forever'}
+                </Button>
+                <Button variant="secondary" onPress={handleCancel} disabled={isDeleting}>
+                    {t('common.cancel') || 'Cancel'}
+                </Button>
+            </View>
+        </View>
     );
 };
 
+/** Options accepted by {@link presentDeleteAccount} (everything but `surface`). */
+type PresentDeleteAccountOptions = Omit<DeleteAccountModalProps, 'surface'>;
+
+/**
+ * Present the delete-account confirmation on the shared surface stack. Resolves
+ * `true` once the account is deleted, `false` if cancelled/dismissed.
+ */
+export function presentDeleteAccount(options: PresentDeleteAccountOptions): Promise<boolean> {
+    return surfaces
+        .present<boolean>((surface) => <DeleteAccountModal surface={surface} {...options} />)
+        .then((result) => result === true);
+}
+
 export default DeleteAccountModal;