@oxyhq/services 22.8.3 → 22.8.5

package/lib/typescript/module/ui/screens/fileManagement/FileListSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileListSection.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/fileManagement/FileListSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIH,UAAU,EAGb,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC;AAEzD,6EAA6E;AAC7E,MAAM,WAAW,YAAY;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,MAAM,WAAW,oBAAoB;IACjC,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC;IAClD,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,MAAM,EAAE;QAAE,WAAW,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;IACnD,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,WAAW,CAAC;IACpB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,KAAK,MAAM,CAAC;IACnE,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,mEAAmE;IACnE,gBAAgB,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CAC3C;AAED;;;;GAIG;AACH,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA4EnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"FileListSection.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/fileManagement/FileListSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIH,UAAU,EAGb,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC;AAEzD,6EAA6E;AAC7E,MAAM,WAAW,YAAY;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,MAAM,WAAW,oBAAoB;IACjC,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC;IAClD,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,MAAM,EAAE;QAAE,WAAW,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;IACnD,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,WAAW,CAAC;IACpB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,KAAK,MAAM,CAAC;IACnE,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,mEAAmE;IACnE,gBAAgB,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CAC3C;AAED;;;;GAIG;AACH,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6EnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/typescript/module/ui/screens/fileManagement/PhotoPickerSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhotoPickerSection.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/fileManagement/PhotoPickerSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAejF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AA6FhD;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACjC,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,cAAc,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC1D,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,MAAM,GAAG,SAAS,CAAC;IACxD,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC7C,cAAc,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,KAAK,MAAM,CAAC;CACtE;AAyQD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA+UnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"PhotoPickerSection.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/fileManagement/PhotoPickerSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAgBjF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AA2FhD;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACjC,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,cAAc,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC1D,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,MAAM,GAAG,SAAS,CAAC;IACxD,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC7C,cAAc,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,KAAK,MAAM,CAAC;CACtE;AAmLD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqWnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/services",
-  "version": "22.8.3",
+  "version": "22.8.5",
   "description": "OxyHQ Expo/React Native SDK — UI components, screens, and native features",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -176,7 +176,7 @@
   },
   "peerDependencies": {
     "@expo/vector-icons": "^15.0.3",
-    "@oxyhq/bloom": ">=0.43.0",
+    "@oxyhq/bloom": ">=0.44.1",
     "@oxyhq/core": "^12.9.0",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/netinfo": "^11.4.1",

package/src/ui/components/BottomSheetRouter.tsx

@@ -5,6 +5,7 @@ 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,
@@ -67,6 +68,15 @@ const errorStyles = StyleSheet.create({
     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;
@@ -93,6 +103,15 @@ const BottomSheetRouter: React.FC<BottomSheetRouterProps> = ({ onScreenChange, o
         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) {
@@ -101,16 +120,19 @@ const BottomSheetRouter: React.FC<BottomSheetRouterProps> = ({ onScreenChange, o
         }
     }, [currentScreen, onScreenChange]);
 
-    // Control visibility
+    // 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) {
+        if (isOpen && !isDialogPresentation) {
             sheetRef.current.present();
         } else {
             sheetRef.current.dismiss();
         }
-    }, [isOpen]);
+    }, [isOpen, isDialogPresentation]);
 
     // Android back button
     useEffect(() => {
@@ -210,33 +232,56 @@ const BottomSheetRouter: React.FC<BottomSheetRouterProps> = ({ onScreenChange, o
         };
     }, [navigate, handleGoBack, theme.mode, currentScreen, currentStep, screenProps, handleStepChange, scrollTo]);
 
-    // Route-level sheet config (e.g. whether the sheet provides its own
-    // ScrollView or yields scrolling to a VirtualizedList inside the screen).
-    const sheetConfig = useMemo(
-        () => getSheetConfig(currentScreen, screenProps),
-        [currentScreen, screenProps],
-    );
+    // 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}
-        >
-            {ScreenComponent && currentScreen && (
-                <ScreenErrorBoundary screenName={currentScreen}>
-                    <ScreenComponent {...screenPropsValue} />
-                </ScreenErrorBoundary>
-            )}
-        </BottomSheet>
+        <>
+            <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>
+        </>
     );
 };
 
@@ -252,6 +297,14 @@ const styles = StyleSheet.create({
         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);

package/src/ui/navigation/__tests__/getSheetConfig.test.ts

@@ -0,0 +1,36 @@
+import { getSheetConfig } from '../routes';
+
+/**
+ * `getSheetConfig` drives which surface `BottomSheetRouter` mounts a route in.
+ * The flagship image picker (FileManagement in image-only select mode) resolves
+ * to `presentation: 'dialog'`; every other route stays `'sheet'`. These guard
+ * the routing contract so the ~28 sheet screens keep the in-tree BottomSheet.
+ */
+describe('getSheetConfig presentation', () => {
+    const imageOnlyPickerProps = {
+        selectMode: true,
+        disabledMimeTypes: ['video/', 'audio/', 'application/pdf'],
+    };
+
+    it('defaults every route to the in-tree sheet', () => {
+        expect(getSheetConfig('ManageAccount', {}).presentation).toBe('sheet');
+        expect(getSheetConfig('AvatarCrop', {}).presentation).toBe('sheet');
+        expect(getSheetConfig(null, {}).presentation).toBe('sheet');
+    });
+
+    it('routes the FileManagement image-only picker to the Dialog', () => {
+        expect(getSheetConfig('FileManagement', imageOnlyPickerProps).presentation).toBe('dialog');
+    });
+
+    it('keeps FileManagement on the sheet when it is not an image-only picker', () => {
+        // Browse mode (no selectMode) — the standard file manager.
+        expect(getSheetConfig('FileManagement', {}).presentation).toBe('sheet');
+        // Select mode that still allows non-image types is not the flagship picker.
+        expect(
+            getSheetConfig('FileManagement', {
+                selectMode: true,
+                disabledMimeTypes: ['video/'],
+            }).presentation,
+        ).toBe('sheet');
+    });
+});

package/src/ui/navigation/routes.ts

@@ -128,11 +128,23 @@ export const isValidRoute = (routeName: string): routeName is RouteName => {
  * remove fields without bumping the consumer surface as a breaking change.
  */
 export interface SheetRouteConfig {
+    /**
+     * Which surface hosts the route. `'sheet'` (default) renders the screen in
+     * the in-tree `BottomSheet`. `'dialog'` renders it in a responsive Bloom
+     * `<Dialog>` (bottom-sheet on narrow, centered card on `md+`) — used for the
+     * flagship image picker, which reads better as a centered panel on wide
+     * viewports than a full-width sheet. `BottomSheetRouter` keeps BOTH surfaces
+     * mounted and routes the active screen into exactly one based on this value.
+     */
+    presentation: 'sheet' | 'dialog';
     /**
      * When `false`, BottomSheet skips its internal ScrollView and lets the
      * screen own scrolling. Required for screens that render a FlatList,
      * SectionList, or any other VirtualizedList — nesting one inside a
      * plain ScrollView breaks windowing and triggers a RN warning.
+     *
+     * Ignored for `presentation: 'dialog'` routes — those don't render in the
+     * in-tree `BottomSheet` at all.
      */
     scrollable: boolean;
     /**
@@ -187,6 +199,7 @@ const isFileManagementImageOnlyPicker = (props: Record<string, unknown>): boolea
 
 /** Defaults shared across all routes — preserves the historical in-tree BS UX. */
 const DEFAULT_SHEET_CONFIG: SheetRouteConfig = {
+    presentation: 'sheet',
     scrollable: true,
     manualActivation: true,
     dynamicBackdrop: true,
@@ -203,10 +216,12 @@ export const getSheetConfig = (
 ): SheetRouteConfig => {
     if (!routeName) return DEFAULT_SHEET_CONFIG;
     if (routeName === 'FileManagement' && isFileManagementImageOnlyPicker(screenProps)) {
-        // PhotoPickerView owns its own FlatList — the sheet must not wrap a
-        // ScrollView around it. Everything else stays at the standard
-        // manualActivation + dynamicBackdrop defaults.
-        return { ...DEFAULT_SHEET_CONFIG, scrollable: false };
+        // The flagship photo picker renders in a responsive Bloom `<Dialog>`
+        // (bottom-sheet on narrow, centered card on `md+`) rather than the
+        // in-tree BottomSheet — it owns its own FlatList and reads better as a
+        // centered panel on wide viewports. The Dialog surface, not this
+        // config's `scrollable`, governs its scrolling.
+        return { ...DEFAULT_SHEET_CONFIG, presentation: 'dialog' };
     }
     return DEFAULT_SHEET_CONFIG;
 };

package/src/ui/screens/fileManagement/FileListSection.tsx

@@ -63,6 +63,7 @@ const FileListSection: React.FC<FileListSectionProps> = ({
         <ScrollView
             ref={scrollViewRef}
             className="flex-1"
+            style={{ flex: 1 }}
             contentContainerClassName="px-space-12 pt-0 pb-space-12"
             refreshControl={
                 <RefreshControl