@oxyhq/bloom 0.57.1 → 0.58.0

package/lib/typescript/commonjs/overlay/index.d.ts

@@ -2,7 +2,8 @@
  * The shared plumbing every portaled surface needs: an interactive ROOT and a
  * press-to-dismiss BACKDROP. Dialog, BottomSheet, the image gallery, menus and
  * toasts each used to hand-roll both, and each one got the web contract subtly
- * wrong in its own way.
+ * wrong in its own way — and looked different while doing it (the image viewer
+ * blurred, everything else only dimmed).
  *
  * ## The contract these two components encode
  *
@@ -26,11 +27,27 @@
  * which is what makes it look like a dismissal bug rather than a hit-testing
  * one.
  *
+ * A backdrop also only dismisses what is actually ON TOP of it: a full-screen
+ * layer rendered ABOVE the backdrop (a pager, a zoom container) receives the
+ * press first and swallows it. Either that layer opts out (`pointerEvents
+ *="box-none"`) or it owns the dismiss itself — the backdrop being present is
+ * not enough.
+ *
+ * EXPO/EXPO-ROUTER APPS ONLY for `BloomProvider` — see `src/provider`; these
+ * two components are universal.
+ *
  * Use `<OverlayRoot>` for the surface's outermost node and `<Backdrop>` for its
  * dimming layer; do not re-implement either with raw `View`s.
  */
 import { type ReactNode } from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * One blur radius for every Bloom overlay. Surfaces differ in what they show,
+ * not in how the app behind them recedes.
+ */
+export declare const BACKDROP_BLUR_INTENSITY = 40;
+/** Dim laid over the blur — the blur alone does not give enough contrast. */
+export declare const BACKDROP_DIM_OPACITY = 0.45;
 export interface OverlayRootProps {
     children?: ReactNode;
     style?: StyleProp<ViewStyle>;
@@ -51,17 +68,25 @@ export interface BackdropProps {
     onPress?: () => void;
     /** `true` keeps the dim but makes it inert — a blocking dialog, a busy state. */
     disabled?: boolean;
-    /** Extra style (dim colour, animated opacity). Rendered over `absoluteFill`. */
+    /** Blur radius behind the dim. `0` renders the dim alone. */
+    blurIntensity?: number;
+    /** Blur tint. Backdrops dim the app, so `dark` is the default on every theme. */
+    blurTint?: 'light' | 'dark' | 'default';
+    /** Dim colour over the blur. */
+    dimColor?: string;
+    /** Dim opacity, 0–1. */
+    dimOpacity?: number;
+    /** Extra style on the press target — animated opacity, insets, z-index. */
     style?: StyleProp<ViewStyle>;
-    /** Rendered inside the backdrop — e.g. a blur layer that must dim with it. */
+    /** Rendered ON TOP of the dim, inside the press target (Dialog's panel does this). */
     children?: ReactNode;
     accessibilityLabel?: string;
     testID?: string;
 }
 /**
- * Full-bleed dimming layer that dismisses the surface when pressed. Always
- * takes pointer events (that is its whole job), so it must render UNDER the
- * surface's panel in the tree, never over it.
+ * Full-bleed blur + dim that dismisses the surface when pressed. Always takes
+ * pointer events (that is its whole job), so anything that must stay pressable
+ * goes INSIDE it as `children`, never as a sibling rendered over it.
  */
 export declare const Backdrop: import("react").NamedExoticComponent<BackdropProps>;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/overlay/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/overlay/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAyC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIrG,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAMxE;yBANe,WAAW;;;AAU3B,MAAM,WAAW,aAAa;IAC5B,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,qDA0BnB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/overlay/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAItB;;;GAGG;AACH,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C,6EAA6E;AAC7E,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAMxE;yBANe,WAAW;;;AAU3B,MAAM,WAAW,aAAa;IAC5B,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IACxC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,sFAAsF;IACtF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,qDA6CnB,CAAC"}

package/lib/typescript/commonjs/provider/index.d.ts

@@ -18,6 +18,12 @@
  * Nesting extra contexts costs nothing at runtime — the win is that scope is no
  * longer a per-app decision.
  *
+ * EXPO/EXPO-ROUTER APPS ONLY. The scroll-restoration provider it mounts imports
+ * `expo-router` (its web implementation keys offsets on the focused route), so
+ * a Vite/SPA consumer that has no expo-router cannot resolve this module. Those
+ * apps keep mounting `BloomThemeProvider` (and any other piece they need)
+ * directly — that is not a lesser path, just the one without a router.
+ *
  * NOT included, on purpose — these are OUTLETS, not state, and their placement
  * in the tree is a real app decision (z-order, safe areas, and mounting a
  * second one duplicates every surface it renders):

package/lib/typescript/commonjs/provider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/provider/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAyB,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG9E,OAAO,EAAsB,KAAK,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAG5E,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,UAAU,CAAC;IACnF,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,wFAAwF;IACxF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,aAAa,EACb,OAAc,EACd,GAAG,UAAU,EACd,EAAE,kBAAkB,2CAcpB;yBAnBe,aAAa"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/provider/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAyB,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG9E,OAAO,EAAsB,KAAK,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAG5E,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,UAAU,CAAC;IACnF,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,wFAAwF;IACxF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,aAAa,EACb,OAAc,EACd,GAAG,UAAU,EACd,EAAE,kBAAkB,2CAcpB;yBAnBe,aAAa"}

package/lib/typescript/commonjs/zoomable-image-gallery/ZoomableImageGallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZoomableImageGallery.d.ts","sourceRoot":"","sources":["../../../../src/zoomable-image-gallery/ZoomableImageGallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAmEjF,OAAO,KAAK,EAGV,0BAA0B,EAC1B,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AAu4BjB,eAAO,MAAM,oBAAoB,8GAA4B,CAAC;AAyK9D,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"ZoomableImageGallery.d.ts","sourceRoot":"","sources":["../../../../src/zoomable-image-gallery/ZoomableImageGallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAmEjF,OAAO,KAAK,EAGV,0BAA0B,EAC1B,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AAs5BjB,eAAO,MAAM,oBAAoB,8GAA4B,CAAC;AAyK9D,eAAe,oBAAoB,CAAC"}

package/lib/typescript/module/bottom-sheet/BottomSheetBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetBase.d.ts","sourceRoot":"","sources":["../../../../src/bottom-sheet/BottomSheetBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAMH,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,SAAS,EACjB,MAAM,cAAc,CAAC;AAItB,OAAiB,EACb,KAAK,aAAa,EAGlB,KAAK,WAAW,EAMnB,MAAM,yBAAyB,CAAC;AAwBjC,MAAM,WAAW,cAAc;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IAC7F,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IACjH;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5C,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,gBAAgB,CAAC,EAAE,MAAM,OAAO,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;;;;;;OAUG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;OAcG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACxC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC9B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACjD;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,qBAAqB;IAClC,kEAAkE;IAClE,OAAO,EAAE,OAAO,CAAC;IACjB,gFAAgF;IAChF,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B;;;OAGG;IACH,cAAc,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC1D,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,eAAe,6FAsmB1B,CAAC"}
+{"version":3,"file":"BottomSheetBase.d.ts","sourceRoot":"","sources":["../../../../src/bottom-sheet/BottomSheetBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAMH,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,SAAS,EACjB,MAAM,cAAc,CAAC;AAItB,OAAiB,EACb,KAAK,aAAa,EAGlB,KAAK,WAAW,EAMnB,MAAM,yBAAyB,CAAC;AAyBjC,MAAM,WAAW,cAAc;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IAC7F,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IACjH;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5C,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,gBAAgB,CAAC,EAAE,MAAM,OAAO,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;;;;;;OAUG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;OAcG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACxC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC9B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACjD;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,qBAAqB;IAClC,kEAAkE;IAClE,OAAO,EAAE,OAAO,CAAC;IACjB,gFAAgF;IAChF,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B;;;OAGG;IACH,cAAc,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC1D,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;CACrD;AAID,eAAO,MAAM,eAAe,6FA4mB1B,CAAC"}

package/lib/typescript/module/dialog/Dialog.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.web.d.ts","sourceRoot":"","sources":["../../../../src/dialog/Dialog.web.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAOL,4BAA4B,EAM7B,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EACV,YAAY,EAGZ,WAAW,EACZ,MAAM,SAAS,CAAC;AAsDjB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,2CAazD;AA4ZD,OAAO,EAAE,4BAA4B,EAAE,CAAC;AAiQxC;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,2CAgBA;AAiCD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,gBAAgB,mZAK5B,CAAC"}
+{"version":3,"file":"Dialog.web.d.ts","sourceRoot":"","sources":["../../../../src/dialog/Dialog.web.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAOL,4BAA4B,EAM7B,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EACV,YAAY,EAGZ,WAAW,EACZ,MAAM,SAAS,CAAC;AA4DjB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,2CAazD;AA+ZD,OAAO,EAAE,4BAA4B,EAAE,CAAC;AAoPxC;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,2CAgBA;AAiCD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,gBAAgB,mZAK5B,CAAC"}

package/lib/typescript/module/overlay/index.d.ts

@@ -2,7 +2,8 @@
  * The shared plumbing every portaled surface needs: an interactive ROOT and a
  * press-to-dismiss BACKDROP. Dialog, BottomSheet, the image gallery, menus and
  * toasts each used to hand-roll both, and each one got the web contract subtly
- * wrong in its own way.
+ * wrong in its own way — and looked different while doing it (the image viewer
+ * blurred, everything else only dimmed).
  *
  * ## The contract these two components encode
  *
@@ -26,11 +27,27 @@
  * which is what makes it look like a dismissal bug rather than a hit-testing
  * one.
  *
+ * A backdrop also only dismisses what is actually ON TOP of it: a full-screen
+ * layer rendered ABOVE the backdrop (a pager, a zoom container) receives the
+ * press first and swallows it. Either that layer opts out (`pointerEvents
+ *="box-none"`) or it owns the dismiss itself — the backdrop being present is
+ * not enough.
+ *
+ * EXPO/EXPO-ROUTER APPS ONLY for `BloomProvider` — see `src/provider`; these
+ * two components are universal.
+ *
  * Use `<OverlayRoot>` for the surface's outermost node and `<Backdrop>` for its
  * dimming layer; do not re-implement either with raw `View`s.
  */
 import { type ReactNode } from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * One blur radius for every Bloom overlay. Surfaces differ in what they show,
+ * not in how the app behind them recedes.
+ */
+export declare const BACKDROP_BLUR_INTENSITY = 40;
+/** Dim laid over the blur — the blur alone does not give enough contrast. */
+export declare const BACKDROP_DIM_OPACITY = 0.45;
 export interface OverlayRootProps {
     children?: ReactNode;
     style?: StyleProp<ViewStyle>;
@@ -51,17 +68,25 @@ export interface BackdropProps {
     onPress?: () => void;
     /** `true` keeps the dim but makes it inert — a blocking dialog, a busy state. */
     disabled?: boolean;
-    /** Extra style (dim colour, animated opacity). Rendered over `absoluteFill`. */
+    /** Blur radius behind the dim. `0` renders the dim alone. */
+    blurIntensity?: number;
+    /** Blur tint. Backdrops dim the app, so `dark` is the default on every theme. */
+    blurTint?: 'light' | 'dark' | 'default';
+    /** Dim colour over the blur. */
+    dimColor?: string;
+    /** Dim opacity, 0–1. */
+    dimOpacity?: number;
+    /** Extra style on the press target — animated opacity, insets, z-index. */
     style?: StyleProp<ViewStyle>;
-    /** Rendered inside the backdrop — e.g. a blur layer that must dim with it. */
+    /** Rendered ON TOP of the dim, inside the press target (Dialog's panel does this). */
     children?: ReactNode;
     accessibilityLabel?: string;
     testID?: string;
 }
 /**
- * Full-bleed dimming layer that dismisses the surface when pressed. Always
- * takes pointer events (that is its whole job), so it must render UNDER the
- * surface's panel in the tree, never over it.
+ * Full-bleed blur + dim that dismisses the surface when pressed. Always takes
+ * pointer events (that is its whole job), so anything that must stay pressable
+ * goes INSIDE it as `children`, never as a sibling rendered over it.
  */
 export declare const Backdrop: import("react").NamedExoticComponent<BackdropProps>;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/overlay/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/overlay/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAyC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIrG,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAMxE;yBANe,WAAW;;;AAU3B,MAAM,WAAW,aAAa;IAC5B,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,qDA0BnB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/overlay/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAItB;;;GAGG;AACH,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C,6EAA6E;AAC7E,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAMxE;yBANe,WAAW;;;AAU3B,MAAM,WAAW,aAAa;IAC5B,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IACxC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,sFAAsF;IACtF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,qDA6CnB,CAAC"}

package/lib/typescript/module/provider/index.d.ts

@@ -18,6 +18,12 @@
  * Nesting extra contexts costs nothing at runtime — the win is that scope is no
  * longer a per-app decision.
  *
+ * EXPO/EXPO-ROUTER APPS ONLY. The scroll-restoration provider it mounts imports
+ * `expo-router` (its web implementation keys offsets on the focused route), so
+ * a Vite/SPA consumer that has no expo-router cannot resolve this module. Those
+ * apps keep mounting `BloomThemeProvider` (and any other piece they need)
+ * directly — that is not a lesser path, just the one without a router.
+ *
  * NOT included, on purpose — these are OUTLETS, not state, and their placement
  * in the tree is a real app decision (z-order, safe areas, and mounting a
  * second one duplicates every surface it renders):

package/lib/typescript/module/provider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/provider/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAyB,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG9E,OAAO,EAAsB,KAAK,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAG5E,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,UAAU,CAAC;IACnF,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,wFAAwF;IACxF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,aAAa,EACb,OAAc,EACd,GAAG,UAAU,EACd,EAAE,kBAAkB,2CAcpB;yBAnBe,aAAa"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/provider/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAyB,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG9E,OAAO,EAAsB,KAAK,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAG5E,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,UAAU,CAAC;IACnF,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,wFAAwF;IACxF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,aAAa,EACb,OAAc,EACd,GAAG,UAAU,EACd,EAAE,kBAAkB,2CAcpB;yBAnBe,aAAa"}

package/lib/typescript/module/zoomable-image-gallery/ZoomableImageGallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZoomableImageGallery.d.ts","sourceRoot":"","sources":["../../../../src/zoomable-image-gallery/ZoomableImageGallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAmEjF,OAAO,KAAK,EAGV,0BAA0B,EAC1B,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AAu4BjB,eAAO,MAAM,oBAAoB,8GAA4B,CAAC;AAyK9D,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"ZoomableImageGallery.d.ts","sourceRoot":"","sources":["../../../../src/zoomable-image-gallery/ZoomableImageGallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAmEjF,OAAO,KAAK,EAGV,0BAA0B,EAC1B,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AAs5BjB,eAAO,MAAM,oBAAoB,8GAA4B,CAAC;AAyK9D,eAAe,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.57.1",
+  "version": "0.58.0",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/__tests__/overlay-pointer-events.test.tsx

@@ -106,6 +106,23 @@ describe('overlay pointer-events contract (web)', () => {
     container.remove();
   });
 
+  // Every Bloom surface dims the app the same way: the blur is part of the
+  // shared backdrop, not something each surface opts into (it used to be — the
+  // image viewer blurred, dialogs and sheets only dimmed).
+  it('blurs by default and drops the blur layer only when asked', () => {
+    const withBlur = render(createElement(Backdrop, { onPress: () => {}, testID: 'a' }));
+    expect(withBlur.container.getElementsByTagName('blurview').length).toBe(1);
+    act(() => withBlur.root.unmount());
+    withBlur.container.remove();
+
+    const noBlur = render(
+      createElement(Backdrop, { onPress: () => {}, blurIntensity: 0, testID: 'b' }),
+    );
+    expect(noBlur.container.getElementsByTagName('blurview').length).toBe(0);
+    act(() => noBlur.root.unmount());
+    noBlur.container.remove();
+  });
+
   it('a disabled Backdrop dims without dismissing', () => {
     const onPress = jest.fn();
     const { root, container } = render(

package/src/bottom-sheet/BottomSheetBase.tsx

@@ -25,6 +25,7 @@ import Animated, {
     withTiming,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Backdrop } from '../overlay';
 import { useTheme } from '../theme/use-theme';
 
 /** Hook that returns current screen dimensions and updates on rotation/resize. */
@@ -198,6 +199,8 @@ export interface BottomSheetBaseProps extends BottomSheetProps {
     Shell: React.ComponentType<BottomSheetShellProps>;
 }
 
+const AnimatedBackdrop = Animated.createAnimatedComponent(Backdrop);
+
 export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: React.ForwardedRef<BottomSheetRef>) => {
     const {
         Shell,
@@ -783,15 +786,21 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
     return (
         <Shell visible={rendered} onRequestClose={dismiss} keyboardHeight={keyboardHeight}>
             <View style={StyleSheet.absoluteFill}>
-                <Animated.View style={[styles.backdrop, backdropStyle]}>
-                    {backdropComponent ? (
-                        backdropComponent({ onPress: handleBackdropPress })
-                    ) : (
-                        <Pressable style={styles.backdropTouchable} onPress={handleBackdropPress}>
-                            <View style={StyleSheet.absoluteFill} />
-                        </Pressable>
-                    )}
-                </Animated.View>
+                {backdropComponent ? (
+                    <Animated.View style={[StyleSheet.absoluteFill, backdropStyle]}>
+                        {backdropComponent({ onPress: handleBackdropPress })}
+                    </Animated.View>
+                ) : (
+                    // The ONE Bloom backdrop (blur + dim + press-to-dismiss).
+                    // `backdropStyle` drives the fade; the dim level rides on
+                    // `backdropOpacity`, so the shared component's own dim is
+                    // switched off here to keep a single source of dimming.
+                    <AnimatedBackdrop
+                        onPress={handleBackdropPress}
+                        dimOpacity={1}
+                        style={[styles.backdrop, backdropStyle]}
+                    />
+                )}
 
                 <GestureDetector gesture={panGesture}>
                     <Animated.View

package/src/dialog/Dialog.web.tsx

@@ -60,6 +60,12 @@ import type {
 
 const FADE_OUT_DURATION = CENTER_FADE_OUT_DURATION;
 
+/**
+ * The centered card's scrim reads darker than a sheet's because the card floats
+ * in the middle of it; the shared blur underneath is identical.
+ */
+const DIALOG_BACKDROP_DIM_OPACITY = 0.6;
+
 /**
  * The four CSS `animation` shorthands driving the centered card and its backdrop.
  * `animation` has no `ViewStyle` key at all — react-native-web forwards it to the
@@ -325,15 +331,18 @@ function CenterOrSideDialog({
               onPress={() => close()}
               disabled={!dismissOnBackdrop}
               accessibilityLabel={label ? `Dismiss ${label}` : 'Dismiss dialog'}
-              style={{
-                position: WEB_POSITION_FIXED,
-                zIndex: dialogZIndex.backdrop,
-                alignItems: 'center',
-                justifyContent: 'center',
-                paddingHorizontal: 20,
-              }}
+              dimOpacity={DIALOG_BACKDROP_DIM_OPACITY}
+              style={[
+                {
+                  position: WEB_POSITION_FIXED,
+                  zIndex: dialogZIndex.backdrop,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  paddingHorizontal: 20,
+                },
+                isClosing ? BACKDROP_FADE_OUT : BACKDROP_FADE_IN,
+              ]}
             >
-              <DialogBackdrop isClosing={isClosing} />
               <DialogPanel
                 testID={testID}
                 label={label}
@@ -693,6 +702,9 @@ function SheetSurface({
         accessibilityLabel={label ? `Dismiss ${label}` : 'Dismiss dialog'}
         onPress={handleBackdropPress}
         disabled={!dismissOnBackdrop}
+        // The dim rides on the element's own animated opacity here, so the
+        // shared component's dim layer stays fully opaque under it.
+        dimOpacity={1}
         style={[
           sheetStyles.backdrop,
           backdropTransition,
@@ -799,22 +811,6 @@ function cancelFrame(token: FrameToken): void {
   clearTimeout(token.timer);
 }
 
-function DialogBackdrop({ isClosing }: { isClosing: boolean }) {
-  const style: ViewStyle[] = [
-    {
-      position: WEB_POSITION_FIXED,
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      backgroundColor: 'rgba(0,0,0,0.8)',
-    },
-    isClosing ? BACKDROP_FADE_OUT : BACKDROP_FADE_IN,
-  ];
-
-  return <View style={style} />;
-}
-
 /**
  * Inline imperative dialog used by `alert()`. Mounts and immediately
  * presents; resolves the host's `onResolve` once the dialog has finished

package/src/overlay/index.tsx

@@ -2,7 +2,8 @@
  * The shared plumbing every portaled surface needs: an interactive ROOT and a
  * press-to-dismiss BACKDROP. Dialog, BottomSheet, the image gallery, menus and
  * toasts each used to hand-roll both, and each one got the web contract subtly
- * wrong in its own way.
+ * wrong in its own way — and looked different while doing it (the image viewer
+ * blurred, everything else only dimmed).
  *
  * ## The contract these two components encode
  *
@@ -26,14 +27,39 @@
  * which is what makes it look like a dismissal bug rather than a hit-testing
  * one.
  *
+ * A backdrop also only dismisses what is actually ON TOP of it: a full-screen
+ * layer rendered ABOVE the backdrop (a pager, a zoom container) receives the
+ * press first and swallows it. Either that layer opts out (`pointerEvents
+ *="box-none"`) or it owns the dismiss itself — the backdrop being present is
+ * not enough.
+ *
+ * EXPO/EXPO-ROUTER APPS ONLY for `BloomProvider` — see `src/provider`; these
+ * two components are universal.
+ *
  * Use `<OverlayRoot>` for the surface's outermost node and `<Backdrop>` for its
  * dimming layer; do not re-implement either with raw `View`s.
  */
 import { memo, type ReactNode } from 'react';
-import { Platform, Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { BlurView } from 'expo-blur';
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
 
 import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 
+/**
+ * One blur radius for every Bloom overlay. Surfaces differ in what they show,
+ * not in how the app behind them recedes.
+ */
+export const BACKDROP_BLUR_INTENSITY = 40;
+/** Dim laid over the blur — the blur alone does not give enough contrast. */
+export const BACKDROP_DIM_OPACITY = 0.45;
+
 export interface OverlayRootProps {
   children?: ReactNode;
   style?: StyleProp<ViewStyle>;
@@ -61,22 +87,34 @@ export interface BackdropProps {
   onPress?: () => void;
   /** `true` keeps the dim but makes it inert — a blocking dialog, a busy state. */
   disabled?: boolean;
-  /** Extra style (dim colour, animated opacity). Rendered over `absoluteFill`. */
+  /** Blur radius behind the dim. `0` renders the dim alone. */
+  blurIntensity?: number;
+  /** Blur tint. Backdrops dim the app, so `dark` is the default on every theme. */
+  blurTint?: 'light' | 'dark' | 'default';
+  /** Dim colour over the blur. */
+  dimColor?: string;
+  /** Dim opacity, 0–1. */
+  dimOpacity?: number;
+  /** Extra style on the press target — animated opacity, insets, z-index. */
   style?: StyleProp<ViewStyle>;
-  /** Rendered inside the backdrop — e.g. a blur layer that must dim with it. */
+  /** Rendered ON TOP of the dim, inside the press target (Dialog's panel does this). */
   children?: ReactNode;
   accessibilityLabel?: string;
   testID?: string;
 }
 
 /**
- * Full-bleed dimming layer that dismisses the surface when pressed. Always
- * takes pointer events (that is its whole job), so it must render UNDER the
- * surface's panel in the tree, never over it.
+ * Full-bleed blur + dim that dismisses the surface when pressed. Always takes
+ * pointer events (that is its whole job), so anything that must stay pressable
+ * goes INSIDE it as `children`, never as a sibling rendered over it.
  */
 export const Backdrop = memo(function Backdrop({
   onPress,
   disabled = false,
+  blurIntensity = BACKDROP_BLUR_INTENSITY,
+  blurTint = 'dark',
+  dimColor = '#000',
+  dimOpacity = BACKDROP_DIM_OPACITY,
   style,
   children,
   accessibilityLabel = 'Dismiss',
@@ -97,6 +135,21 @@ export const Backdrop = memo(function Backdrop({
       testID={testID}
       style={[StyleSheet.absoluteFill, style]}
     >
+      {blurIntensity > 0 ? (
+        <BlurView
+          intensity={blurIntensity}
+          tint={blurTint}
+          // Android's default blur is a no-op on many devices; this is the
+          // implementation that actually renders there.
+          experimentalBlurMethod="dimezisBlurView"
+          pointerEvents="none"
+          style={StyleSheet.absoluteFill}
+        />
+      ) : null}
+      <View
+        pointerEvents="none"
+        style={[StyleSheet.absoluteFill, { backgroundColor: dimColor, opacity: dimOpacity }]}
+      />
       {children}
     </Pressable>
   );

package/src/provider/index.tsx

@@ -18,6 +18,12 @@
  * Nesting extra contexts costs nothing at runtime — the win is that scope is no
  * longer a per-app decision.
  *
+ * EXPO/EXPO-ROUTER APPS ONLY. The scroll-restoration provider it mounts imports
+ * `expo-router` (its web implementation keys offsets on the focused route), so
+ * a Vite/SPA consumer that has no expo-router cannot resolve this module. Those
+ * apps keep mounting `BloomThemeProvider` (and any other piece they need)
+ * directly — that is not a lesser path, just the one without a router.
+ *
  * NOT included, on purpose — these are OUTLETS, not state, and their placement
  * in the tree is a real app decision (z-order, safe areas, and mounting a
  * second one duplicates every surface it renders):

package/src/zoomable-image-gallery/ZoomableImageGallery.tsx

@@ -72,8 +72,9 @@ import type {
   ZoomableImageGalleryProps,
 } from './types';
 
-const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
 const AnimatedImage = Animated.createAnimatedComponent(Image);
+// The shared overlay backdrop, driven by the viewer's open/drag progress.
+const AnimatedBackdrop = Animated.createAnimatedComponent(Backdrop);
 
 // Web-only interaction hints (no-ops on native): the zoom surfaces are
 // tap-to-dismiss (`cursor: pointer`) and must not select text or drag the
@@ -172,6 +173,8 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
   // (`handleDismiss` runs via `runOnJS` and from `Pressable.onPress`, where the
   // state closure can be stale). Kept in lockstep by `setActiveIndexBoth`.
   const activeIndexRef = useRef(0);
+  // True from the first dismiss request until the viewer is actually unmounted.
+  const dismissingRef = useRef(false);
 
   // Single writer for the current index: updates state (drives indicator + open
   // image) and the synchronous mirror together, and only when it changes.
@@ -238,6 +241,7 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
   // every dismiss path (fly-back and fade-out fallback).
   const finalizeDismiss = useCallback(() => {
     setIsOpen(false);
+    dismissingRef.current = false;
     scale.value = 1;
     translateX.value = 0;
     translateY.value = 0;
@@ -286,6 +290,12 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
   }, [finalizeDismiss, opacity, scale]);
 
   const handleDismiss = useCallback(() => {
+    // A press on the image reaches BOTH its tap gesture and the page beneath it
+    // (which owns the dismiss for the empty area around the image), so this can
+    // fire twice for one click. Latch it: a second call would start a second
+    // fly-back from an already-moving image.
+    if (dismissingRef.current) return;
+    dismissingRef.current = true;
     // Collapse the pager back to the single open-image so the fly-back animates
     // one image (the current one) rather than the whole scrolled strip.
     setPagerReady(false);
@@ -334,6 +344,7 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
   const open = useCallback(
     (nextImages: GalleryImage[], index: number, rect?: MeasuredRect) => {
       if (isOpen || nextImages.length === 0) return;
+      dismissingRef.current = false;
       const safeIndex = Math.min(Math.max(index, 0), nextImages.length - 1);
       const target = nextImages[safeIndex];
       if (!target) return;
@@ -753,18 +764,12 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
             did nothing on web while Escape still closed. `Backdrop` opts back
             in via the `pointerEvents` PROP, the only form that reaches the DOM
             (see `src/overlay`). */}
-        <Backdrop onPress={handleDismiss} accessibilityLabel="Close image viewer">
-          <AnimatedBlurView
-            intensity={80}
-            tint={theme.isDark ? 'dark' : 'light'}
-            experimentalBlurMethod="dimezisBlurView"
-            style={[StyleSheet.absoluteFill, backdropStyle]}
-          >
-            <Animated.View
-              style={[StyleSheet.absoluteFill, { backgroundColor: theme.colors.overlay }, backdropStyle]}
-            />
-          </AnimatedBlurView>
-        </Backdrop>
+        <AnimatedBackdrop
+          onPress={handleDismiss}
+          accessibilityLabel="Close image viewer"
+          dimColor={theme.colors.overlay}
+          style={backdropStyle}
+        />
 
       <GestureDetector gesture={panGesture}>
         <Animated.View
@@ -817,8 +822,16 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
                   // through the gesture, so it isn't wrapped in a Pressable.
                   if (idx === activeIndex) {
                     return (
-                      <View
+                      <Pressable
                         key={`${img.uri}-${idx}`}
+                        // The page fills the screen ON TOP of the backdrop (the
+                        // pager below it needs pointer events to swipe), so a
+                        // press on the empty area around the image can never
+                        // reach the backdrop — the page dismisses it itself.
+                        // Same outcome as tapping the image, which already
+                        // dismisses through `singleTapDismissGesture`.
+                        onPress={handleDismiss}
+                        accessibilityLabel="Close image viewer"
                         style={[styles.page, { width: SCREEN_WIDTH, height: SCREEN_HEIGHT }, webPointerStyle]}
                       >
                         <GestureDetector gesture={activePageGesture}>
@@ -833,12 +846,14 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
                             {...(Platform.OS === 'web' ? { draggable: false } : {})}
                           />
                         </GestureDetector>
-                      </View>
+                      </Pressable>
                     );
                   }
                   return (
-                    <View
+                    <Pressable
                       key={`${img.uri}-${idx}`}
+                      onPress={handleDismiss}
+                      accessibilityLabel="Close image viewer"
                       style={[styles.page, { width: SCREEN_WIDTH, height: SCREEN_HEIGHT }]}
                     >
                       <Image
@@ -848,7 +863,7 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
                         transition={0}
                         {...(Platform.OS === 'web' ? { draggable: false } : {})}
                       />
-                    </View>
+                    </Pressable>
                   );
                 })}
               </ScrollView>