@oxyhq/services 22.8.4 → 22.8.6

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

@@ -1 +1 @@
-{"version":3,"file":"ProfileButton.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/ProfileButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAKH,KAAK,SAAS,EACd,KAAK,SAAS,EACjB,MAAM,cAAc,CAAC;AAuCtB,MAAM,WAAW,kBAAkB;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B;;;;OAIG;IACH,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IACnC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwP/C,CAAC;AAqDF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ProfileButton.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/ProfileButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAKH,KAAK,SAAS,EACd,KAAK,SAAS,EACjB,MAAM,cAAc,CAAC;AAwCtB,MAAM,WAAW,kBAAkB;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B;;;;OAIG;IACH,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IACnC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+O/C,CAAC;AAiDF,eAAe,aAAa,CAAC"}

package/lib/typescript/module/ui/navigation/routes.d.ts

@@ -9,11 +9,23 @@ export declare 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;
     /**

package/lib/typescript/module/ui/navigation/routes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"routes.d.ts","sourceRoot":"","sources":["../../../../../src/ui/navigation/routes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAqB,CAAC;AAO3D,MAAM,MAAM,SAAS,GACf,eAAe,GACf,qBAAqB,GACrB,gBAAgB,GAChB,SAAS,GACT,kBAAkB,GAClB,iBAAiB,GACjB,gBAAgB,GAChB,gBAAgB,GAChB,aAAa,GACb,KAAK,GACL,UAAU,GACV,gBAAgB,GAChB,SAAS,GACT,qBAAqB,GACrB,gBAAgB,GAChB,WAAW,GACX,aAAa,GACb,kBAAkB,GAClB,aAAa,GACb,kBAAkB,GAClB,oBAAoB,GACpB,aAAa,GACb,kBAAkB,GAClB,cAAc,GACd,YAAY,GACZ,YAAY,GACZ,UAAU,GACV,eAAe,GACf,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,iBAAiB,GACjB,YAAY,GACZ,eAAe,GACf,eAAe,GACf,aAAa,CAAC;AAkDpB,eAAO,MAAM,kBAAkB,GAAI,WAAW,SAAS,KAAG,aAAa,CAAC,eAAe,CAAC,GAAG,SAsB1F,CAAC;AAIF,eAAO,MAAM,YAAY,GAAI,WAAW,MAAM,KAAG,SAAS,IAAI,SAE7D,CAAC;AAEF;;;;GAIG;AACH,MAAM,WAAW,gBAAgB;IAC7B;;;;;OAKG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;OAUG;IACH,gBAAgB,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,SAAS,CAAC;CACrC;AA+BD;;;;GAIG;AACH,eAAO,MAAM,cAAc,GACvB,WAAW,SAAS,GAAG,IAAI,EAC3B,aAAa,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KACrC,gBASF,CAAC"}
+{"version":3,"file":"routes.d.ts","sourceRoot":"","sources":["../../../../../src/ui/navigation/routes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAqB,CAAC;AAO3D,MAAM,MAAM,SAAS,GACf,eAAe,GACf,qBAAqB,GACrB,gBAAgB,GAChB,SAAS,GACT,kBAAkB,GAClB,iBAAiB,GACjB,gBAAgB,GAChB,gBAAgB,GAChB,aAAa,GACb,KAAK,GACL,UAAU,GACV,gBAAgB,GAChB,SAAS,GACT,qBAAqB,GACrB,gBAAgB,GAChB,WAAW,GACX,aAAa,GACb,kBAAkB,GAClB,aAAa,GACb,kBAAkB,GAClB,oBAAoB,GACpB,aAAa,GACb,kBAAkB,GAClB,cAAc,GACd,YAAY,GACZ,YAAY,GACZ,UAAU,GACV,eAAe,GACf,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,iBAAiB,GACjB,YAAY,GACZ,eAAe,GACf,eAAe,GACf,aAAa,CAAC;AAkDpB,eAAO,MAAM,kBAAkB,GAAI,WAAW,SAAS,KAAG,aAAa,CAAC,eAAe,CAAC,GAAG,SAsB1F,CAAC;AAIF,eAAO,MAAM,YAAY,GAAI,WAAW,MAAM,KAAG,SAAS,IAAI,SAE7D,CAAC;AAEF;;;;GAIG;AACH,MAAM,WAAW,gBAAgB;IAC7B;;;;;;;OAOG;IACH,YAAY,EAAE,OAAO,GAAG,QAAQ,CAAC;IACjC;;;;;;;;OAQG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;OAUG;IACH,gBAAgB,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,SAAS,CAAC;CACrC;AAgCD;;;;GAIG;AACH,eAAO,MAAM,cAAc,GACvB,WAAW,SAAS,GAAG,IAAI,EAC3B,aAAa,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KACrC,gBAWF,CAAC"}

package/lib/typescript/module/ui/screens/FileManagementScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileManagementScreen.d.ts","sourceRoot":"","sources":["../../../../../src/ui/screens/FileManagementScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAkBjF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,4BAAyB,CAAC;AA2CzE,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAmoD7D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"FileManagementScreen.d.ts","sourceRoot":"","sources":["../../../../../src/ui/screens/FileManagementScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAejF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,4BAAyB,CAAC;AA4CzE,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA2/C7D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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;AAsRD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAiWnD,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.4",
+  "version": "22.8.6",
   "description": "OxyHQ Expo/React Native SDK — UI components, screens, and native features",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

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/components/ProfileButton.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { Avatar } from '@oxyhq/bloom/avatar';
+import * as Skeleton from '@oxyhq/bloom/skeleton';
 import { Text } from '@oxyhq/bloom/typography';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { getAccountDisplayName, getAccountFallbackHandle } from '@oxyhq/core';
@@ -140,16 +141,7 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
                 accessibilityElementsHidden
                 importantForAccessibility="no-hide-descendants"
             >
-                <View
-                    style={[
-                        styles.skeletonCircle,
-                        {
-                            width: resolvedAvatarSize,
-                            height: resolvedAvatarSize,
-                            backgroundColor: colors.backgroundSecondary,
-                        },
-                    ]}
-                />
+                <Skeleton.Circle size={resolvedAvatarSize} />
             </View>
         );
     }
@@ -352,10 +344,6 @@ const styles = StyleSheet.create({
     fullWidth: {
         width: '100%',
     },
-    // Neutral skeleton / signed-out avatar circle (`rounded-full`).
-    skeletonCircle: {
-        borderRadius: 9999,
-    },
     // Shared trigger row (`flex-row items-center gap-3 rounded-full px-2 py-2`).
     row: {
         flexDirection: 'row',

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

@@ -65,7 +65,7 @@ const UploadPreviewContent: React.FC<{
                     const isImage = pendingFile.type.startsWith('image/');
                     return (
                         <View
-                            key={index}
+                            key={`${pendingFile.name}-${pendingFile.size}-${index}`}
                             className="bg-secondary border-border flex-row items-center p-[12px] rounded-[12px] border mb-[12px] gap-[12px]"
                         >
                             {isImage && pendingFile.preview ? (

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/FileManagementScreen.tsx

@@ -9,15 +9,13 @@ import {
     RefreshControl,
     TextInput,
     Image,
-    Animated,
-    Easing,
     AccessibilityInfo,
-    Platform,
     useWindowDimensions,
 } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
 import type { FileManagementScreenProps } from '../types/fileManagement';
 import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
+import * as Skeleton from '@oxyhq/bloom/skeleton';
 import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
 import type { FileMetadata } from '@oxyhq/core';
 import { useFileStore, useFiles, useUploading as useUploadingStore, useUploadAggregateProgress, useDeleting as useDeletingStore } from '../stores/fileStore';
@@ -1121,193 +1119,57 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         </View>
     );
 
-    // Professional Skeleton Loading Component with Advanced Shimmer Effect
-    const SkeletonLoader = React.memo(() => {
-        const shimmerAnim = useRef(new Animated.Value(0)).current;
-        const skeletonContainerWidth = safeContainerWidth;
-
-        useEffect(() => {
-            const shimmer = Animated.loop(
-                Animated.timing(shimmerAnim, {
-                    toValue: 1,
-                    duration: 2000,
-                    easing: Easing.linear,
-                    // Web has no native animated module; forcing the native
-                    // driver there warns and falls back to JS. The shimmer only
-                    // drives a transform, so JS-driving it on web is fine.
-                    useNativeDriver: Platform.OS !== 'web',
-                })
-            );
-            shimmer.start();
-            return () => shimmer.stop();
-        }, [shimmerAnim]);
-
-        // Create a sweeping shimmer effect
-        const shimmerTranslateX = shimmerAnim.interpolate({
-            inputRange: [0, 1],
-            outputRange: [-skeletonContainerWidth * 2, skeletonContainerWidth * 2],
-        });
-
-        const SkeletonBox = ({ width, height, borderRadius = 8, style, delay = 0 }: { width: number | string; height: number; borderRadius?: number; style?: Record<string, unknown>; delay?: number }) => {
-            const delayedTranslateX = shimmerAnim.interpolate({
-                inputRange: [0, 1],
-                outputRange: [-skeletonContainerWidth * 2 + delay, skeletonContainerWidth * 2 + delay],
-            });
-
-            return (
-                <View
-                    style={[
-                        {
-                            width,
-                            height,
-                            borderRadius,
-                            backgroundColor: colors.backgroundSecondary,
-                            overflow: 'hidden',
-                            position: 'relative',
-                        },
-                        style,
-                    ]}
-                >
-                    {/* Base background */}
-                    <View
-                        style={{
-                            position: 'absolute',
-                            top: 0,
-                            left: 0,
-                            right: 0,
-                            bottom: 0,
-                            backgroundColor: colors.backgroundSecondary,
-                        }}
-                    />
-                    {/* Shimmer gradient effect */}
-                    <Animated.View
-                        style={{
-                            position: 'absolute',
-                            top: 0,
-                            left: 0,
-                            width: '100%',
-                            height: '100%',
-                            transform: [{ translateX: delayedTranslateX }],
-                        }}
-                    >
-                        <View
-                            style={{
-                                width: skeletonContainerWidth,
-                                height: '100%',
-                                backgroundColor: bloomTheme.isDark
-                                    ? 'rgba(255, 255, 255, 0.08)'
-                                    : 'rgba(255, 255, 255, 0.8)',
-                                shadowColor: bloomTheme.isDark ? '#000' : '#FFF',
-                                shadowOffset: { width: 0, height: 0 },
-                                shadowOpacity: 0.3,
-                                shadowRadius: 10,
-                            }}
-                        />
-                    </Animated.View>
-                </View>
-            );
-        };
-
-        // Skeleton file item matching SettingsListItem structure
-        const SkeletonFileItem = ({ index }: { index: number }) => (
-            <View
-                style={[
-                    {
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        paddingHorizontal: 16,
-                        paddingVertical: 12,
-                        backgroundColor: colors.background,
-                        borderBottomWidth: StyleSheet.hairlineWidth,
-                        borderBottomColor: colors.border,
-                    },
-                ]}
-            >
-                {/* Icon/Image skeleton */}
-                <SkeletonBox width={44} height={44} borderRadius={8} delay={index * 50} />
-
-                {/* Content skeleton */}
-                <View style={{ flex: 1, marginLeft: 12, justifyContent: 'center' }}>
-                    <SkeletonBox
-                        width={index % 3 === 0 ? '85%' : index % 3 === 1 ? '70%' : '90%'}
-                        height={16}
-                        style={{ marginBottom: 8 }}
-                        delay={index * 50 + 20}
-                    />
-                    <SkeletonBox
-                        width={index % 2 === 0 ? '50%' : '60%'}
-                        height={12}
-                        delay={index * 50 + 40}
-                    />
-                </View>
-            </View>
+    // Loading state — Bloom's shared `Skeleton` primitives own the shimmer, so
+    // this is pure layout: the top chrome (header / controls / search) plus a
+    // photo grid of shimmering tiles sized with the same 3-per-row geometry the
+    // real photo grid uses. No hand-rolled `Animated` shimmer.
+    if (loading) {
+        const GRID_PADDING = 10;
+        const TILE_GAP = 4;
+        const GRID_COLUMNS = 3;
+        const GRID_ROWS = 6;
+        const tileSize = Math.floor(
+            (safeContainerWidth - GRID_PADDING * 2 - TILE_GAP * (GRID_COLUMNS - 1)) / GRID_COLUMNS,
         );
 
         return (
             <View className="flex-1" style={{ backgroundColor }}>
-                {/* Header Skeleton */}
+                {/* Header */}
                 <View
-                    className="flex-row items-center justify-between px-[16px] py-[12px] relative"
+                    className="flex-row items-center justify-between px-[16px] py-[12px]"
                     style={{ borderBottomColor: colors.border, borderBottomWidth: StyleSheet.hairlineWidth }}
                 >
-                    <SkeletonBox width={44} height={44} borderRadius={12} />
-                    <View className="flex-1 items-center justify-center mx-[16px]">
-                        <SkeletonBox width={140} height={20} style={{ marginBottom: 6 }} />
-                        <SkeletonBox width={100} height={14} />
-                    </View>
-                    <SkeletonBox width={44} height={44} borderRadius={12} />
+                    <Skeleton.Box width={44} height={44} borderRadius={12} />
+                    <Skeleton.Col style={{ alignItems: 'center', marginHorizontal: 16, gap: 6 }}>
+                        <Skeleton.Box width={140} height={20} />
+                        <Skeleton.Box width={100} height={14} />
+                    </Skeleton.Col>
+                    <Skeleton.Box width={44} height={44} borderRadius={12} />
                 </View>
 
-                {/* Controls Bar Skeleton */}
-                <View className="flex-row items-center justify-between px-[12px] py-[12px] gap-[12px]">
-                    <SkeletonBox width={100} height={36} borderRadius={18} />
-                    <SkeletonBox width={44} height={44} borderRadius={22} />
-                </View>
+                {/* Controls bar */}
+                <Skeleton.Row style={{ alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 12, paddingVertical: 12 }}>
+                    <Skeleton.Box width={100} height={36} borderRadius={18} />
+                    <Skeleton.Box width={44} height={44} borderRadius={22} />
+                </Skeleton.Row>
 
-                {/* Search Bar Skeleton */}
-                <View
-                    className="flex-row items-center px-[14px] py-[10px] mx-[12px] mb-[12px] rounded-full gap-[10px]"
-                    style={{ backgroundColor: colors.card }}
-                >
-                    <SkeletonBox width="100%" height={44} borderRadius={12} />
+                {/* Search bar */}
+                <View className="mx-[12px] mb-[12px]">
+                    <Skeleton.Box width="100%" height={44} borderRadius={22} />
                 </View>
 
-                {/* Stats Container Skeleton */}
-                <View
-                    className="flex-row px-[14px] py-[10px] mx-[12px] mb-[12px] rounded-[18px]"
-                    style={{ backgroundColor: colors.card }}
-                >
-                    {[1, 2, 3].map((i) => (
-                        <View key={i} className="flex-1 items-center py-[4px]">
-                            <SkeletonBox width={50} height={20} style={{ marginBottom: 4 }} delay={i * 30} />
-                            <SkeletonBox width={40} height={14} delay={i * 30 + 15} />
-                        </View>
+                {/* Photo grid */}
+                <View style={{ padding: GRID_PADDING, gap: TILE_GAP }}>
+                    {Array.from({ length: GRID_ROWS }, (_, row) => (
+                        <Skeleton.Row key={row} style={{ gap: TILE_GAP }}>
+                            {Array.from({ length: GRID_COLUMNS }, (_, col) => (
+                                <Skeleton.Box key={col} width={tileSize} height={tileSize} borderRadius={6} />
+                            ))}
+                        </Skeleton.Row>
                     ))}
                 </View>
-
-                {/* File List Skeleton - Matching SettingsListItem */}
-                <ScrollView
-                    className="flex-1"
-                    contentContainerClassName="px-[12px] pt-0 pb-[12px]"
-                    showsVerticalScrollIndicator={false}
-                >
-                    <View style={{
-                        backgroundColor: colors.card,
-                        borderRadius: 18,
-                        overflow: 'hidden',
-                        marginTop: 8,
-                    }}>
-                        {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
-                            <SkeletonFileItem key={i} index={i} />
-                        ))}
-                    </View>
-                </ScrollView>
             </View>
         );
-    });
-
-    if (loading) {
-        return <SkeletonLoader />;
     }
 
     // Dedicated flagship-style photo picker view used in the avatar-picker

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