@oxyhq/services 22.8.7 → 22.10.0

package/lib/typescript/commonjs/ui/components/OxyAccountDialog.d.ts

@@ -1,37 +0,0 @@
-/**
- * OxyAccountDialog — the ONE unified account dialog for `@oxyhq/services`.
- *
- * Bloom `<Dialog>` chrome (header, back button, placement, scroll body) around
- * the headless chooser logic, which lives in `OxyAuthChooser` — the account
- * switcher, sign-in, sign-up, and QR views are ALL there, extracted so the
- * same chooser can be mounted bare by a future host with no Dialog chrome
- * (e.g. an auth.oxy.so hub page driving the cross-origin passkey popup, b2).
- * This file owns ONLY the chrome: the title/subtitle per view, the back
- * button, and the Bloom `<Dialog>` surface itself.
- *
- * The surface is Bloom's `<Dialog>` (`@oxyhq/bloom/dialog`) with a responsive
- * `placement` — a bottom sheet on narrow viewports, a centered card on wide ones.
- * It REPLACES the hand-rolled RN `<Modal>` + `<GestureHandlerRootView>` + manual
- * backdrop/card wrapper this component used before. That RN `<Modal>` is invisible
- * under React StrictMode on web: react-native-web's `ModalPortal` appends its host
- * node during render but removes it in an effect cleanup and never re-attaches, so
- * the dialog never paints in a dev Vite build. Bloom's `<Dialog>` renders through
- * its own Portal and has no such lifecycle hazard.
- *
- * Open/close is CONTROLLED by `isAccountDialogOpen` (the `open` prop); the Dialog
- * stays mounted whenever the controller exists so it can animate its own close.
- * Backdrop / swipe-to-dismiss is disabled (`dismissOnBackdrop={false}`) on purpose:
- * Bloom's controlled `bottom` placement does not fire `onClose` on a gesture or
- * backdrop dismissal, so allowing it would desync `isAccountDialogOpen` from the
- * sheet and block reopening. The header close button (and `OxyAuthChooser`'s
- * `onComplete`) drive `closeAccountDialog`, which flips `open` and runs the exit
- * animation.
- */
-import type React from 'react';
-/**
- * The unified account dialog. Mounted once by `OxyProvider`; opened imperatively
- * via `useOxy().openAccountDialog(view?)` or imperative `openAccountDialog('signin')`.
- */
-declare const OxyAccountDialog: React.FC;
-export default OxyAccountDialog;
-//# sourceMappingURL=OxyAccountDialog.d.ts.map

package/lib/typescript/commonjs/ui/components/OxyAccountDialog.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"OxyAccountDialog.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/OxyAccountDialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B;;;GAGG;AACH,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAgD7B,CAAC;AAgJF,eAAe,gBAAgB,CAAC"}

package/lib/typescript/module/ui/components/BottomSheet.d.ts

@@ -1,29 +0,0 @@
-import { type BottomSheetProps as BloomBottomSheetProps, type BottomSheetRef } from '@oxyhq/bloom/bottom-sheet';
-/**
- * Thin wrapper around `@oxyhq/bloom`'s `BottomSheet` (>=0.4.0).
- *
- * Bloom is the canonical bottom-sheet primitive for the Oxy ecosystem; this
- * wrapper exists only to inject service-specific defaults so the 29+ screens
- * mounted by `BottomSheetRouter` keep the exact UX they had under the
- * pre-refactor in-tree implementation:
- *
- *   - `manualActivation: true` — the body pan uses RNGH's manualActivation
- *     with scroll-handoff, the only RNGH 2.x pattern that doesn't steal
- *     vertical events from inner scrollers on Android. The previous in-tree
- *     implementation always ran in this mode.
- *   - `dynamicBackdrop: true` — backdrop dims proportionally with drag
- *     distance (iOS Photos style). The previous in-tree implementation
- *     always did this.
- *
- * Consumers (`BottomSheetRouter`, primarily) can still override either default
- * by passing the prop explicitly — for example, per-route via `getSheetConfig`.
- *
- * Public API (name + ref shape) is identical to the previous in-tree
- * implementation, so external consumers and `BottomSheetRouter` need no
- * changes beyond the new pass-through props.
- */
-export type BottomSheetProps = BloomBottomSheetProps;
-export type { BottomSheetRef };
-declare const BottomSheet: import("react").ForwardRefExoticComponent<BloomBottomSheetProps & import("react").RefAttributes<BottomSheetRef>>;
-export default BottomSheet;
-//# sourceMappingURL=BottomSheet.d.ts.map

package/lib/typescript/module/ui/components/BottomSheet.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/BottomSheet.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,KAAK,gBAAgB,IAAI,qBAAqB,EAC9C,KAAK,cAAc,EACtB,MAAM,2BAA2B,CAAC;AAEnC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC;AACrD,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B,QAAA,MAAM,WAAW,kHAUf,CAAC;AAIH,eAAe,WAAW,CAAC"}

package/lib/typescript/module/ui/components/BottomSheetRouter.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { RouteName } from '../navigation/routes.js';
-export interface BottomSheetRouterProps {
-    onScreenChange?: (screen: RouteName | null) => void;
-    onDismiss?: () => void;
-}
-declare const _default: React.NamedExoticComponent<BottomSheetRouterProps>;
-export default _default;
-//# sourceMappingURL=BottomSheetRouter.d.ts.map

package/lib/typescript/module/ui/components/BottomSheetRouter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BottomSheetRouter.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/BottomSheetRouter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAGvF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAsB,CAAC;AA4EtD,MAAM,WAAW,sBAAsB;IACnC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;;AAmOD,wBAA6C"}

package/lib/typescript/module/ui/components/Header.d.ts

@@ -1,33 +0,0 @@
-import type React from 'react';
-import { type SharedValue } from 'react-native-reanimated';
-export interface HeaderAction {
-    /** Ionicons name — rendered as a circular icon button when no `text` is set. */
-    icon?: string;
-    /** Label — rendered as a filled pill button (takes precedence over `icon`). */
-    text?: string;
-    onPress: () => void;
-    loading?: boolean;
-    disabled?: boolean;
-    /** Stable identity for lists; falls back to the array index. */
-    key?: string;
-}
-export interface HeaderProps {
-    title: string;
-    subtitle?: string;
-    onBack?: () => void;
-    onClose?: () => void;
-    /** Trailing action buttons, rendered left-to-right before the close button. */
-    actions?: HeaderAction[];
-    showBackButton?: boolean;
-    showCloseButton?: boolean;
-    variant?: 'default' | 'minimal';
-    elevation?: 'none' | 'subtle' | 'prominent';
-    subtitleVariant?: 'default' | 'small' | 'large' | 'muted';
-    titleAlignment?: 'left' | 'center' | 'right';
-    /** Shared scroll offset — enables sticky translate-up behavior on native. */
-    scrollY?: SharedValue<number>;
-}
-export declare const getHeaderHeight: (variant?: HeaderProps["variant"], safeAreaTop?: number) => number;
-declare const Header: React.FC<HeaderProps>;
-export default Header;
-//# sourceMappingURL=Header.d.ts.map

package/lib/typescript/module/ui/components/Header.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAA2B,EAAgD,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAS7H,MAAM,WAAW,YAAY;IACzB,gFAAgF;IAChF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,WAAW,CAAC;IAC5C,eAAe,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IAC1D,cAAc,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC7C,6EAA6E;IAC7E,OAAO,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CACjC;AAED,eAAO,MAAM,eAAe,GAAI,UAAS,WAAW,CAAC,SAAS,CAAa,EAAE,oBAAe,KAAG,MAK9F,CAAC;AAyBF,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAgGjC,CAAC;AAkDF,eAAe,MAAM,CAAC"}

package/lib/typescript/module/ui/components/OxyAccountDialog.d.ts

@@ -1,37 +0,0 @@
-/**
- * OxyAccountDialog — the ONE unified account dialog for `@oxyhq/services`.
- *
- * Bloom `<Dialog>` chrome (header, back button, placement, scroll body) around
- * the headless chooser logic, which lives in `OxyAuthChooser` — the account
- * switcher, sign-in, sign-up, and QR views are ALL there, extracted so the
- * same chooser can be mounted bare by a future host with no Dialog chrome
- * (e.g. an auth.oxy.so hub page driving the cross-origin passkey popup, b2).
- * This file owns ONLY the chrome: the title/subtitle per view, the back
- * button, and the Bloom `<Dialog>` surface itself.
- *
- * The surface is Bloom's `<Dialog>` (`@oxyhq/bloom/dialog`) with a responsive
- * `placement` — a bottom sheet on narrow viewports, a centered card on wide ones.
- * It REPLACES the hand-rolled RN `<Modal>` + `<GestureHandlerRootView>` + manual
- * backdrop/card wrapper this component used before. That RN `<Modal>` is invisible
- * under React StrictMode on web: react-native-web's `ModalPortal` appends its host
- * node during render but removes it in an effect cleanup and never re-attaches, so
- * the dialog never paints in a dev Vite build. Bloom's `<Dialog>` renders through
- * its own Portal and has no such lifecycle hazard.
- *
- * Open/close is CONTROLLED by `isAccountDialogOpen` (the `open` prop); the Dialog
- * stays mounted whenever the controller exists so it can animate its own close.
- * Backdrop / swipe-to-dismiss is disabled (`dismissOnBackdrop={false}`) on purpose:
- * Bloom's controlled `bottom` placement does not fire `onClose` on a gesture or
- * backdrop dismissal, so allowing it would desync `isAccountDialogOpen` from the
- * sheet and block reopening. The header close button (and `OxyAuthChooser`'s
- * `onComplete`) drive `closeAccountDialog`, which flips `open` and runs the exit
- * animation.
- */
-import type React from 'react';
-/**
- * The unified account dialog. Mounted once by `OxyProvider`; opened imperatively
- * via `useOxy().openAccountDialog(view?)` or imperative `openAccountDialog('signin')`.
- */
-declare const OxyAccountDialog: React.FC;
-export default OxyAccountDialog;
-//# sourceMappingURL=OxyAccountDialog.d.ts.map

package/lib/typescript/module/ui/components/OxyAccountDialog.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"OxyAccountDialog.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/OxyAccountDialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B;;;GAGG;AACH,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAgD7B,CAAC;AAgJF,eAAe,gBAAgB,CAAC"}

package/src/ui/components/BottomSheet.tsx

@@ -1,48 +0,0 @@
-import { forwardRef } from 'react';
-import {
-    BottomSheet as BloomBottomSheet,
-    type BottomSheetProps as BloomBottomSheetProps,
-    type BottomSheetRef,
-} from '@oxyhq/bloom/bottom-sheet';
-
-/**
- * Thin wrapper around `@oxyhq/bloom`'s `BottomSheet` (>=0.4.0).
- *
- * Bloom is the canonical bottom-sheet primitive for the Oxy ecosystem; this
- * wrapper exists only to inject service-specific defaults so the 29+ screens
- * mounted by `BottomSheetRouter` keep the exact UX they had under the
- * pre-refactor in-tree implementation:
- *
- *   - `manualActivation: true` — the body pan uses RNGH's manualActivation
- *     with scroll-handoff, the only RNGH 2.x pattern that doesn't steal
- *     vertical events from inner scrollers on Android. The previous in-tree
- *     implementation always ran in this mode.
- *   - `dynamicBackdrop: true` — backdrop dims proportionally with drag
- *     distance (iOS Photos style). The previous in-tree implementation
- *     always did this.
- *
- * Consumers (`BottomSheetRouter`, primarily) can still override either default
- * by passing the prop explicitly — for example, per-route via `getSheetConfig`.
- *
- * Public API (name + ref shape) is identical to the previous in-tree
- * implementation, so external consumers and `BottomSheetRouter` need no
- * changes beyond the new pass-through props.
- */
-export type BottomSheetProps = BloomBottomSheetProps;
-export type { BottomSheetRef };
-
-const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>((props, ref) => {
-    const { manualActivation = true, dynamicBackdrop = true, ...rest } = props;
-    return (
-        <BloomBottomSheet
-            ref={ref}
-            manualActivation={manualActivation}
-            dynamicBackdrop={dynamicBackdrop}
-            {...rest}
-        />
-    );
-});
-
-BottomSheet.displayName = 'BottomSheet';
-
-export default BottomSheet;

package/src/ui/components/BottomSheetRouter.tsx

@@ -1,310 +0,0 @@
-import React, { useRef, useEffect, useCallback, useMemo, type ErrorInfo } from 'react';
-import { BackHandler, Platform, View, StyleSheet, Text, type StyleProp, type ViewStyle } from 'react-native';
-import { useStore } from 'zustand';
-import type { RouteName } from '../navigation/routes';
-import { getScreenComponent, getSheetConfig, isValidRoute } from '../navigation/routes';
-import type { BaseScreenProps } from '../types/navigation';
-import { useTheme } from '@oxyhq/bloom/theme';
-import { Dialog } from '@oxyhq/bloom/dialog';
-import BottomSheet, { type BottomSheetRef } from './BottomSheet';
-import {
-    bottomSheetStore,
-    getState,
-    showBottomSheet,
-    closeBottomSheet,
-    goBack,
-    updateState,
-} from '../navigation/bottomSheetManager';
-
-/** Error boundary to catch screen rendering failures (e.g. lazy require() throws) */
-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(
-                `[BottomSheetRouter] 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' },
-});
-
-/**
- * Responsive placement for `presentation: 'dialog'` routes: a bottom-sheet on
- * narrow viewports, a centered card at `md+` (≥768dp). Module-scoped so the
- * object identity is stable across renders (Bloom's placement resolver memoizes
- * on it). PhotoPickerSection keys its center-vs-bottom layout off the SAME `md`
- * breakpoint — keep the two in sync if this map changes.
- */
-const DIALOG_PLACEMENT = { base: 'bottom', md: 'center' } as const;
-
-export interface BottomSheetRouterProps {
-    onScreenChange?: (screen: RouteName | null) => void;
-    onDismiss?: () => void;
-}
-
-/**
- * BottomSheetRouter - Navigation container for bottom sheet screens
- */
-const BottomSheetRouter: React.FC<BottomSheetRouterProps> = ({ onScreenChange, onDismiss }) => {
-    const sheetRef = useRef<BottomSheetRef>(null);
-    const theme = useTheme();
-    const prevScreenRef = useRef<RouteName | null>(null);
-
-    const { currentScreen, screenProps, currentStep, isOpen } = useStore(bottomSheetStore);
-
-    const ScreenComponent = useMemo(() => {
-        if (!currentScreen) return null;
-        const component = getScreenComponent(currentScreen);
-        if (__DEV__ && !component) {
-            console.error(
-                `[BottomSheetRouter] getScreenComponent("${currentScreen}") returned undefined — the screen's lazy require() likely failed.`,
-            );
-        }
-        return component ?? null;
-    }, [currentScreen]);
-
-    // Route-level sheet config (which surface hosts the route, whether the sheet
-    // provides its own ScrollView, etc.). Computed early so the visibility
-    // effect can gate the in-tree sheet on the resolved presentation.
-    const sheetConfig = useMemo(
-        () => getSheetConfig(currentScreen, screenProps),
-        [currentScreen, screenProps],
-    );
-    const isDialogPresentation = sheetConfig.presentation === 'dialog';
-
-    // Notify screen changes
-    useEffect(() => {
-        if (prevScreenRef.current !== currentScreen) {
-            onScreenChange?.(currentScreen);
-            prevScreenRef.current = currentScreen;
-        }
-    }, [currentScreen, onScreenChange]);
-
-    // Control visibility. The in-tree BottomSheet only ever presents for
-    // 'sheet'-presentation routes — 'dialog' routes render in the Bloom
-    // `<Dialog>` below, so the sheet stays dismissed for them (both surfaces
-    // remain mounted, so the pick→crop dialog→sheet handoff has no unmount jank).
-    useEffect(() => {
-        if (!sheetRef.current) return;
-
-        if (isOpen && !isDialogPresentation) {
-            sheetRef.current.present();
-        } else {
-            sheetRef.current.dismiss();
-        }
-    }, [isOpen, isDialogPresentation]);
-
-    // Android back button
-    useEffect(() => {
-        if (!isOpen) return;
-        if (Platform.OS !== 'android') return;
-        const handler = BackHandler.addEventListener('hardwareBackPress', () => {
-            handleGoBack();
-            return true;
-        });
-        return () => handler.remove();
-    }, [isOpen]);
-
-    const navigate = useCallback((screen: RouteName, props?: Record<string, unknown>) => {
-        if (!isValidRoute(screen)) {
-            if (__DEV__) console.warn(`[BottomSheetRouter] Invalid route: ${screen}`);
-            return;
-        }
-        showBottomSheet({ screen, props });
-    }, []);
-
-    const handleGoBack = useCallback(() => {
-        const state = getState();
-
-        // Try history first
-        if (state.history.length > 0) {
-            goBack();
-            return true;
-        }
-
-        // Try step back
-        const step = state.currentStep ?? 0;
-        if (step > 0) {
-            updateState({
-                currentStep: step - 1,
-                screenProps: { ...state.screenProps, initialStep: step - 1 },
-            });
-            return true;
-        }
-
-        // Close
-        closeBottomSheet();
-        return true;
-    }, []);
-
-    const canDismiss = useCallback((): boolean => {
-        const state = getState();
-        if (state.history.length > 0) return false;
-        const step = state.currentStep ?? 0;
-        return step <= 0;
-    }, []);
-
-    const handleDismissAttempt = useCallback((): boolean => {
-        if (!canDismiss()) {
-            handleGoBack();
-            return false;
-        }
-        return true;
-    }, [canDismiss, handleGoBack]);
-
-    const handleDismiss = useCallback(() => {
-        closeBottomSheet();
-        onDismiss?.();
-    }, [onDismiss]);
-
-    const handleStepChange = useCallback((step: number) => {
-        const state = getState();
-        updateState({
-            currentStep: step,
-            screenProps: { ...state.screenProps, initialStep: step },
-        });
-    }, []);
-
-    const scrollTo = useCallback((y: number, animated?: boolean) => {
-        sheetRef.current?.scrollTo(y, animated);
-    }, []);
-
-    const renderBackground = useCallback(
-        (props: { style?: StyleProp<ViewStyle> }) => (
-            <View style={[styles.background, { backgroundColor: theme.colors.background }, props.style]} />
-        ),
-        [theme.colors.background]
-    );
-
-    const screenPropsValue = useMemo((): BaseScreenProps & { scrollTo: typeof scrollTo } => {
-        const { initialStep: _, ...rest } = screenProps;
-        return {
-            navigate,
-            goBack: handleGoBack,
-            onClose: closeBottomSheet,
-            onAuthenticated: closeBottomSheet,
-            theme: theme.mode,
-            currentScreen: currentScreen ?? undefined,
-            initialStep: currentStep ?? (screenProps?.initialStep as number | undefined),
-            onStepChange: handleStepChange,
-            scrollTo,
-            ...rest,
-        };
-    }, [navigate, handleGoBack, theme.mode, currentScreen, currentStep, screenProps, handleStepChange, scrollTo]);
-
-    // The active screen, wrapped in its error boundary. Routed into EXACTLY ONE
-    // surface (the in-tree sheet OR the Dialog) based on the resolved
-    // presentation, so it never double-mounts.
-    const screenNode =
-        ScreenComponent && currentScreen ? (
-            <ScreenErrorBoundary screenName={currentScreen}>
-                <ScreenComponent {...screenPropsValue} />
-            </ScreenErrorBoundary>
-        ) : null;
-
-    return (
-        <>
-            <BottomSheet
-                ref={sheetRef}
-                enablePanDownToClose
-                enableHandlePanningGesture
-                backgroundComponent={renderBackground}
-                style={styles.container}
-                onDismiss={handleDismiss}
-                onDismissAttempt={handleDismissAttempt}
-                scrollable={sheetConfig.scrollable}
-                manualActivation={sheetConfig.manualActivation}
-                dynamicBackdrop={sheetConfig.dynamicBackdrop}
-                handleComponent={sheetConfig.handleComponent}
-            >
-                {!isDialogPresentation && screenNode}
-            </BottomSheet>
-            {/* Always-mounted responsive Dialog surface for `presentation:
-                'dialog'` routes (currently the flagship photo picker). It stays
-                inert (`open={false}`, no child) for the ~28 sheet routes, so they
-                keep byte-for-byte identical behavior. `contentPadding={0}` +
-                the full-bleed black, rounded, clipped surface let the picker
-                paint edge-to-edge; `dismissOnBackdrop={false}` keeps the
-                controlled open state authoritative (dismissal flows through the
-                store, matching OxyAccountDialog). */}
-            <Dialog
-                open={isOpen && isDialogPresentation}
-                onClose={handleDismiss}
-                placement={DIALOG_PLACEMENT}
-                dismissOnBackdrop={false}
-                contentPadding={0}
-                maxWidth={640}
-                maxHeightRatio={0.9}
-                style={styles.dialogSurface}
-                panelStyle={styles.dialogSurface}
-                label={currentScreen ?? undefined}
-            >
-                {isDialogPresentation ? screenNode : null}
-            </Dialog>
-        </>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        maxWidth: 800,
-        width: '100%',
-        alignSelf: 'center',
-        marginHorizontal: 'auto',
-    },
-    background: {
-        borderTopLeftRadius: 20,
-        borderTopRightRadius: 20,
-        overflow: 'hidden',
-    },
-    // Full-bleed black surface for `presentation: 'dialog'` routes. `overflow:
-    // 'hidden'` clips the picker's edge-to-edge black content to the panel's
-    // rounded corners (Dialog supplies the radius per placement); the black
-    // fill covers any sub-pixel gap behind the picker during entrance.
-    dialogSurface: {
-        backgroundColor: '#000000',
-        overflow: 'hidden',
-    },
-});
-
-export default React.memo(BottomSheetRouter);