@oxyhq/services 22.8.7 → 22.10.0

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

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

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;

package/src/ui/components/oxyAuthChooserStyles.ts

@@ -4,7 +4,7 @@ import { StyleSheet } from 'react-native';
 const QR_PLATE_BG = '#FFFFFF';
 
 /**
- * Shared styles for `OxyAuthChooser`'s views. Extracted from `OxyAccountDialog`
+ * Shared styles for `OxyAuthChooser`'s views. Extracted from `OxyAccountDialogScreen`
  * so both the Dialog-wrapped host and any bare host (e.g. a future
  * auth.oxy.so hub page) render identically without duplicating a StyleSheet.
  */
@@ -42,16 +42,30 @@ export const authChooserStyles = StyleSheet.create({
     fontSize: 12.5,
     marginTop: 1,
   },
-  addRow: {
+  /** Prominent current-account header (Google-style collapsed row). */
+  currentAccountRow: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: 12,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderStyle: 'dashed',
-    borderRadius: 16,
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    marginTop: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 4,
+  },
+  currentAccountMeta: {
+    flex: 1,
+    minWidth: 0,
+  },
+  currentAccountName: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  currentAccountEmail: {
+    fontSize: 13,
+    marginTop: 2,
+  },
+  manageButton: {
+    width: '100%',
+    borderRadius: 14,
+    marginTop: 4,
   },
   addBadge: {
     width: 40,
@@ -61,10 +75,6 @@ export const authChooserStyles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  footerLinks: {
-    alignItems: 'center',
-    marginTop: 16,
-  },
   footerLink: {
     alignSelf: 'center',
     paddingVertical: 10,

package/src/ui/components/surfaces/ActionSheetSurface.tsx

@@ -0,0 +1,98 @@
+import type React from 'react';
+import { Text, View } from 'react-native';
+import { Button } from '@oxyhq/bloom/button';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { surfaces, type SurfaceControls } from '@oxyhq/bloom/surfaces';
+
+/**
+ * A single choice in an {@link ActionSheetSurface} — a labelled button that
+ * resolves the surface with `value` when pressed.
+ */
+export interface ActionSheetOption<T extends string> {
+    label: string;
+    value: T;
+    /** Render as a destructive (negative) button. */
+    destructive?: boolean;
+}
+
+export interface ActionSheetSurfaceProps<T extends string> {
+    /** The presenting surface's controls (from `surfaces.present`). */
+    surface: SurfaceControls;
+    /** Headline. */
+    title: string;
+    /** Optional supporting copy. */
+    message?: string;
+    /** The choices; each dismisses the surface with its `value`. */
+    options: ActionSheetOption<T>[];
+    /** Cancel button label — dismisses with `undefined`. */
+    cancelLabel: string;
+}
+
+const TITLE_STYLE = { fontSize: 22, fontWeight: '600' as const, lineHeight: 30 };
+const MESSAGE_STYLE = { fontSize: 16, lineHeight: 22 };
+
+/**
+ * A multi-choice action sheet rendered as a shared-stack surface — the
+ * many-option counterpart to Bloom's two-way `surfaces.confirm`. Each option
+ * button resolves the surface's `present()` promise with that option's `value`;
+ * cancel / backdrop / Escape resolve `undefined`. Presented via
+ * {@link presentActionSheet}.
+ */
+export function ActionSheetSurface<T extends string>({
+    surface,
+    title,
+    message,
+    options,
+    cancelLabel,
+}: ActionSheetSurfaceProps<T>): React.ReactElement {
+    const theme = useTheme();
+
+    return (
+        <View>
+            <Text
+                style={[
+                    TITLE_STYLE,
+                    { color: theme.colors.text, paddingBottom: message ? 4 : 16 },
+                ]}
+            >
+                {title}
+            </Text>
+            {message ? (
+                <Text
+                    style={[
+                        MESSAGE_STYLE,
+                        { color: theme.colors.textSecondary, paddingBottom: 16 },
+                    ]}
+                >
+                    {message}
+                </Text>
+            ) : null}
+            <View style={{ gap: 8 }}>
+                {options.map((option) => (
+                    <Button
+                        key={option.value}
+                        variant={option.destructive ? 'destructive' : 'primary'}
+                        onPress={() => surface.dismiss(option.value)}
+                    >
+                        {option.label}
+                    </Button>
+                ))}
+                <Button variant="secondary" onPress={() => surface.dismiss(undefined)}>
+                    {cancelLabel}
+                </Button>
+            </View>
+        </View>
+    );
+}
+
+/**
+ * Present an {@link ActionSheetSurface} on the shared stack and resolve with the
+ * chosen option `value`, or `undefined` if cancelled/dismissed.
+ */
+export function presentActionSheet<T extends string>(
+    options: Omit<ActionSheetSurfaceProps<T>, 'surface'>,
+): Promise<T | undefined> {
+    return surfaces.present<T | undefined>((surface) => (
+        <ActionSheetSurface surface={surface} {...options} />
+    ));
+}