@oxyhq/bloom 0.89.0 → 1.0.1

package/lib/commonjs/motion/ScreenTransition.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SLIDE_EASING","Easing","out","exp","WEB_FADE_DURATION","ScreenTransition","direction","enabledWeb","style","children","isWeb","Platform","OS","entering","FadeIn","duration","undefined","SlideInRight","SlideInLeft","easing","exiting","FadeOut","jsx","View","displayName"],"sourceRoot":"../../../src","sources":["motion/ScreenTransition.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,sBAAA,GAAAC,uBAAA,CAAAH,OAAA;AAMiC,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAG,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAAA,SAAAP,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAK,UAAA,GAAAL,CAAA,KAAAU,OAAA,EAAAV,CAAA;AAEjC;;AAmBA;AACA,MAAMmB,YAAY,GAAGC,6BAAM,CAACC,GAAG,CAACD,6BAAM,CAACE,GAAG,CAAC;AAC3C;AACA,MAAMC,iBAAiB,GAAG,EAAE;;AAE5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,gBAAgBA,CAAC;EAC/BC,SAAS;EACTC,UAAU;EACVC,KAAK;EACLC;AACqB,CAAC,EAAE;EACxB,MAAMC,KAAK,GAAGC,qBAAQ,CAACC,EAAE,KAAK,KAAK;EAEnC,MAAMC,QAAQ,GAAGH,KAAK,GAClBH,UAAU,GACRO,6BAAM,CAACC,QAAQ,CAACX,iBAAiB,CAAC,GAClCY,SAAS,GACX,CAACV,SAAS,KAAK,SAAS,GAAGW,mCAAY,GAAGC,kCAAW,EAAEC,MAAM,CAACnB,YAAY,CAAC;EAE/E,MAAMoB,OAAO,GAAGV,KAAK,GACjBH,UAAU,GACRc,8BAAO,CAACN,QAAQ,CAACX,iBAAiB,CAAC,GACnCY,SAAS,GACXK,8BAAO,CAACN,QAAQ,CAACX,iBAAiB,CAAC;EAEvC,oBACE,IAAAxB,WAAA,CAAA0C,GAAA,EAAC5C,sBAAA,CAAAa,OAAQ,CAACgC,IAAI;IAACV,QAAQ,EAAEA,QAAS;IAACO,OAAO,EAAEA,OAAQ;IAACZ,KAAK,EAAEA,KAAM;IAAAC,QAAA,EAC/DA;EAAQ,CACI,CAAC;AAEpB;AAEAJ,gBAAgB,CAACmB,WAAW,GAAG,kBAAkB","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SLIDE_EASING","Easing","out","exp","WEB_FADE_DURATION","ScreenTransition","direction","enabledWeb","style","children","isWeb","Platform","OS","entering","FadeIn","duration","undefined","SlideInRight","SlideInLeft","easing","exiting","FadeOut","jsx","View","displayName"],"sourceRoot":"../../../src","sources":["motion/ScreenTransition.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,sBAAA,GAAAC,uBAAA,CAAAH,OAAA;AAMiC,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAG,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAAA,SAAAP,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAK,UAAA,GAAAL,CAAA,KAAAU,OAAA,EAAAV,CAAA;AAGjC;AACA,MAAMmB,YAAY,GAAGC,6BAAM,CAACC,GAAG,CAACD,6BAAM,CAACE,GAAG,CAAC;AAC3C;AACA,MAAMC,iBAAiB,GAAG,EAAE;;AAE5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,gBAAgBA,CAAC;EAC/BC,SAAS;EACTC,UAAU;EACVC,KAAK;EACLC;AACqB,CAAC,EAAE;EACxB,MAAMC,KAAK,GAAGC,qBAAQ,CAACC,EAAE,KAAK,KAAK;EAEnC,MAAMC,QAAQ,GAAGH,KAAK,GAClBH,UAAU,GACRO,6BAAM,CAACC,QAAQ,CAACX,iBAAiB,CAAC,GAClCY,SAAS,GACX,CAACV,SAAS,KAAK,SAAS,GAAGW,mCAAY,GAAGC,kCAAW,EAAEC,MAAM,CAACnB,YAAY,CAAC;EAE/E,MAAMoB,OAAO,GAAGV,KAAK,GACjBH,UAAU,GACRc,8BAAO,CAACN,QAAQ,CAACX,iBAAiB,CAAC,GACnCY,SAAS,GACXK,8BAAO,CAACN,QAAQ,CAACX,iBAAiB,CAAC;EAEvC,oBACE,IAAAxB,WAAA,CAAA0C,GAAA,EAAC5C,sBAAA,CAAAa,OAAQ,CAACgC,IAAI;IAACV,QAAQ,EAAEA,QAAS;IAACO,OAAO,EAAEA,OAAQ;IAACZ,KAAK,EAAEA,KAAM;IAAAC,QAAA,EAC/DA;EAAQ,CACI,CAAC;AAEpB;AAEAJ,gBAAgB,CAACmB,WAAW,GAAG,kBAAkB","ignoreList":[]}

package/lib/commonjs/motion/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/lib/commonjs/motion/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["motion/types.ts"],"mappings":"","ignoreList":[]}

package/lib/commonjs/overlay/Overlay.js

@@ -0,0 +1,400 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Backdrop = exports.BACKDROP_DIM_OPACITY = exports.BACKDROP_BLUR_INTENSITY = void 0;
+exports.OverlayRoot = OverlayRoot;
+exports.useOverlayLayerContext = useOverlayLayerContext;
+var _react = require("react");
+var _expoBlur = require("expo-blur");
+var _blurTarget = require("../glass/blur-target.js");
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _webViewStyle = require("../styles/web-view-style.js");
+var _styledPrimitives = require("../styles/styled-primitives.js");
+var _stack = require("./stack.js");
+var _useOverlayLayer = require("./use-overlay-layer.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * 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 — and looked different while doing it (the image viewer
+ * blurred, everything else only dimmed).
+ *
+ * ## The contract these two components encode
+ *
+ * Bloom's web `Portal` renders into `#bloom-portal-root`, which is
+ * `position: fixed; inset: 0; pointer-events: none` — an idle portal must let
+ * clicks reach the app underneath. `pointer-events` INHERITS in CSS, so every
+ * portaled descendant starts out click-through and has to opt back in.
+ *
+ * The opt-in only works through the `pointerEvents` **prop**. Passing it inside
+ * a `style` object (`style={{ pointerEvents: 'box-none' }}`) does NOT reach the
+ * DOM: react-native-web resolves the RN-only `box-none`/`box-only` values in
+ * `createDOMProps`, mapping the PROP onto its own class pair
+ * (`self { none !important }` + `> * { auto }`), while a style-object value is
+ * not valid CSS and is dropped. `pointerEvents: 'auto'`/`'none'` do survive as
+ * styles, which is what makes this so easy to get wrong — the two RN-only
+ * values silently do nothing. The symptom is brutal and silent: the whole
+ * surface — backdrop AND panel — renders perfectly and is completely
+ * click-through. Backdrop taps don't dismiss, buttons don't press, and the
+ * clicks land on whatever is behind the overlay (so a tap "through" a viewer
+ * navigates the page underneath). Only keyboard paths (Escape) keep working,
+ * 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.
+ */
+
+const AnimatedBlurView = _reactNativeReanimated.default.createAnimatedComponent(_expoBlur.BlurView);
+
+/**
+ * The z-indices of the nearest enclosing `OverlayRoot`. Descendants that order
+ * themselves within a surface (a dialog's panel above its own backdrop) read
+ * this instead of picking their own numbers.
+ *
+ * The default is the first rank rather than 0, so a surface part rendered
+ * outside any `OverlayRoot` still lands in the overlay band instead of behind
+ * the app.
+ */
+const OverlayLayerContext = /*#__PURE__*/(0, _react.createContext)((0, _stack.layerForRank)(1));
+OverlayLayerContext.displayName = 'BloomOverlayLayerContext';
+
+/** Z-indices of the enclosing overlay surface. See `OverlayRoot`. */
+function useOverlayLayerContext() {
+  return (0, _react.useContext)(OverlayLayerContext);
+}
+
+/**
+ * One blur radius for every Bloom overlay. Surfaces differ in what they show,
+ * not in how the app behind them recedes.
+ */
+const BACKDROP_BLUR_INTENSITY = exports.BACKDROP_BLUR_INTENSITY = 80;
+/**
+ * Extra dim laid OVER the blur. The blur already paints its own tint wash
+ * (`rgba(25,25,25,~0.62)` at the intensity above), so this is what takes the
+ * total to roughly 0.72 — dark enough to read a panel against, still clearly
+ * see-through. Every surface uses this one value: with each of them picking its
+ * own, menus landed at ~0.83 and read as solid black next to the image viewer's
+ * ~0.72.
+ */
+const BACKDROP_DIM_OPACITY = exports.BACKDROP_DIM_OPACITY = 0.28;
+
+/**
+ * Outermost node of a portaled surface. Three jobs:
+ *
+ *  - Fills the viewport.
+ *  - Re-enables pointer events for its own children while empty gaps stay
+ *    click-through (`box-none`), so a surface that only covers part of the
+ *    screen never steals clicks from the app behind it.
+ *  - Takes this surface's place in the overlay stack, so a surface opened later
+ *    paints above one opened earlier (see `./stack.ts`).
+ *
+ * Because the rank is taken on MOUNT, this must be rendered inside whatever
+ * guard makes the surface appear (`if (!isOpen) return null`), which is where
+ * every Bloom surface already puts it. Descendants that need to order
+ * themselves within the surface read `useOverlayLayerContext()`.
+ */
+function OverlayRoot({
+  children,
+  className,
+  style,
+  testID,
+  zIndex
+}) {
+  // Split into two components rather than branching on the hook: a pinned root
+  // must not CONSUME a rank either. The toast host is pinned and mounts for the
+  // whole life of the app, so holding a rank would keep the live set permanently
+  // non-empty — the counter would never reset and depths would climb for the
+  // rest of the session.
+  return zIndex === undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StackedOverlayRoot, {
+    className: className,
+    style: style,
+    testID: testID,
+    children: children
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(PinnedOverlayRoot, {
+    zIndex: zIndex,
+    className: className,
+    style: style,
+    testID: testID,
+    children: children
+  });
+}
+function StackedOverlayRoot({
+  children,
+  className,
+  style,
+  testID
+}) {
+  const layer = (0, _useOverlayLayer.useOverlayLayer)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(OverlayRootView, {
+    layer: layer,
+    className: className,
+    style: style,
+    testID: testID,
+    children: children
+  });
+}
+function PinnedOverlayRoot({
+  children,
+  className,
+  style,
+  testID,
+  zIndex
+}) {
+  // Outside the stack, so descendants must not read stack depths from it
+  // either — every slot is the pinned depth.
+  const layer = (0, _react.useMemo)(() => ({
+    root: zIndex,
+    backdrop: zIndex,
+    surface: zIndex
+  }), [zIndex]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(OverlayRootView, {
+    layer: layer,
+    className: className,
+    style: style,
+    testID: testID,
+    children: children
+  });
+}
+function OverlayRootView({
+  children,
+  className,
+  style,
+  testID,
+  layer
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(OverlayLayerContext.Provider, {
+    value: layer,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledPrimitives.StyledView, {
+      pointerEvents: "box-none",
+      className: className,
+      style: [styles.root, {
+        zIndex: layer.root
+      }, style],
+      testID: testID,
+      children: children
+    })
+  });
+}
+OverlayRoot.displayName = 'OverlayRoot';
+/**
+ * Layers fading under a shared value. Reanimated owns the opacity on both, so
+ * the fade runs off the JS thread and the caller never has to animate an
+ * ancestor (which would erase the blur — see `BackdropProps['style']`).
+ */
+function AnimatedBackdropLayers({
+  blurTarget,
+  progress,
+  blurIntensity,
+  blurTint,
+  dimColor,
+  dimOpacity,
+  staticOpacity,
+  layerStyle
+}) {
+  // The fade lives on each LAYER, never on their shared ancestor.
+  const blurFade = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    opacity: progress.value * staticOpacity
+  }), [progress, staticOpacity]);
+  const dimFade = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    opacity: progress.value * staticOpacity * dimOpacity
+  }), [progress, staticOpacity, dimOpacity]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [blurIntensity > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedBlurView, {
+      intensity: blurIntensity,
+      tint: blurTint
+      // A blur method ONLY alongside a target. Without one expo-blur
+      // falls back to "none" and warns twice per mount, and WITH one in the
+      // wrong window it segfaults — so the two props travel together or not
+      // at all. `glass/blur-target.tsx` is what guarantees this is
+      // `undefined` anywhere it would be unsafe.
+      ,
+      ...(blurTarget ? {
+        blurMethod: 'dimezisBlurView',
+        blurTarget
+      } : null),
+      pointerEvents: "none",
+      style: [_reactNative.StyleSheet.absoluteFill, layerStyle, blurFade]
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+      pointerEvents: "none",
+      style: [_reactNative.StyleSheet.absoluteFill, {
+        backgroundColor: dimColor
+      }, layerStyle, dimFade]
+    })]
+  });
+}
+
+/**
+ * Layers with no shared value driving them: the opacity is whatever the caller
+ * asked for, and a caller that still wants movement hands a CSS transition down
+ * through `layerStyle` — which is exactly what the web side sheet does, flipping
+ * its own `opacity` between 0 and 1 and letting the browser interpolate.
+ *
+ * These MUST stay plain, non-reanimated components. On web, an animated
+ * component whose style carries `transitionProperty` is routed through
+ * reanimated's CSS transitions manager, which assigns straight into
+ * `element.style` — where `element` is whatever ref the wrapped component
+ * exposes. expo-blur's web `BlurView` exposes a `useImperativeHandle` object
+ * carrying only `setNativeProps`, so there is no `.style` on it and opening the
+ * surface throws `Cannot set properties of undefined (setting
+ * 'transitionProperty')`. A plain layer puts the transition on the DOM node
+ * itself, which is both where it belongs and the only place it works.
+ */
+function StaticBackdropLayers({
+  blurTarget,
+  blurIntensity,
+  blurTint,
+  dimColor,
+  dimOpacity,
+  staticOpacity,
+  layerStyle
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [blurIntensity > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoBlur.BlurView, {
+      intensity: blurIntensity,
+      tint: blurTint
+      // Blur method and target travel together — see the animated pair.
+      ,
+      ...(blurTarget ? {
+        blurMethod: 'dimezisBlurView',
+        blurTarget
+      } : null),
+      pointerEvents: "none"
+      // Opacity last, as in the animated pair: the level this component
+      // resolved wins over anything `layerStyle` happens to carry.
+      ,
+      style: [_reactNative.StyleSheet.absoluteFill, layerStyle, {
+        opacity: staticOpacity
+      }]
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      pointerEvents: "none",
+      style: [_reactNative.StyleSheet.absoluteFill, {
+        backgroundColor: dimColor
+      }, layerStyle, {
+        opacity: staticOpacity * dimOpacity
+      }]
+    })]
+  });
+}
+
+/**
+ * Full-bleed blur + dim that dismisses the surface when pressed.
+ *
+ * The dismiss target is a hit box that fills this component and sits BEHIND
+ * `children`, never around them. It used to wrap them, which read fine on
+ * native but is invalid on web: the hit box carries `accessibilityRole="button"`,
+ * so react-native-web renders it as a real `<button>` — and every control inside
+ * any Bloom surface (a dialog's own buttons, a menu's rows) became a nested
+ * `<button>`. React reports that as a hydration error, and the nested control's
+ * activation behaviour is undefined per the HTML spec.
+ *
+ * Hit testing is unchanged: the hit box still covers the whole area, `children`
+ * render above it and take their own presses, and a press that lands on empty
+ * space falls through to the hit box. Layout styles passed via `style` stay on
+ * the outer box, so a caller that centres its panel with this component (the
+ * centred dialog) keeps doing so.
+ */
+const Backdrop = exports.Backdrop = /*#__PURE__*/(0, _react.memo)(function Backdrop({
+  onPress,
+  progress,
+  disabled = false,
+  blurIntensity = BACKDROP_BLUR_INTENSITY,
+  blurTint = 'dark',
+  dimColor = '#000',
+  dimOpacity = BACKDROP_DIM_OPACITY,
+  style,
+  layerStyle,
+  children,
+  accessibilityLabel = 'Dismiss',
+  testID
+}) {
+  const inert = disabled || !onPress;
+  // `undefined` unless this backdrop is inside a declared separate native
+  // window. On Android that is the difference between a real blur and a crash.
+  const blurTarget = (0, _blurTarget.useWindowedBlurTarget)();
+
+  // The press target must stay a pure hit box. Two things a caller's `style`
+  // can carry would break the visuals if honoured there:
+  //   - `opacity`, because `backdrop-filter` samples nothing under an ancestor
+  //     that composites in isolation, so the fade would erase the blur;
+  //   - `backgroundColor`, which would paint an opaque sheet UNDER the blur —
+  //     a second backdrop, and the reason menus and sheets rendered solid black
+  //     while the image viewer (which passed no background) looked right.
+  // Both are hoisted onto the layers, where they mean what the caller intended.
+  const flat = _reactNative.StyleSheet.flatten(style) ?? {};
+  const {
+    opacity: styleOpacity,
+    backgroundColor: styleBackground,
+    ...rootStyle
+  } = flat;
+  const staticOpacity = typeof styleOpacity === 'number' ? styleOpacity : 1;
+  const resolvedDimColor = typeof styleBackground === 'string' ? styleBackground : dimColor;
+  const layerProps = {
+    blurTarget,
+    blurIntensity,
+    blurTint,
+    dimColor: resolvedDimColor,
+    dimOpacity,
+    staticOpacity,
+    layerStyle
+  };
+  return (
+    /*#__PURE__*/
+    // `box-none` so this box never takes a press itself: the hit box below and
+    // `children` above are what receive them.
+    (0, _jsxRuntime.jsxs)(_reactNative.View, {
+      pointerEvents: "box-none",
+      style: [_reactNative.StyleSheet.absoluteFill, rootStyle],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        pointerEvents: "auto",
+        onPress: inert ? undefined : onPress,
+        disabled: inert
+        // A dimming layer is not a focus stop on web: Escape and the panel's own
+        // controls are the keyboard paths out. It stays labelled for screen
+        // readers that surface it as the dismiss affordance.
+        ,
+        focusable: false,
+        accessibilityRole: inert ? undefined : 'button',
+        accessibilityLabel: inert ? undefined : accessibilityLabel,
+        testID: testID,
+        style: _reactNative.StyleSheet.absoluteFill,
+        children: progress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedBackdropLayers, {
+          progress: progress,
+          ...layerProps
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(StaticBackdropLayers, {
+          ...layerProps
+        })
+      }), children]
+    })
+  );
+});
+Backdrop.displayName = 'Backdrop';
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    // Web: the portal root is `fixed; inset: 0`, but a plain absolute child of
+    // it anchors to the document flow in some browsers once the page scrolls —
+    // pin this box to the viewport itself. Native: absolute fill inside the
+    // Outlet, which is already full-screen.
+    // `absoluteFillObject` was removed in RN 0.85 — the inset is written out.
+    position: _reactNative.Platform.OS === 'web' ? _webViewStyle.WEB_POSITION_FIXED : 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  }
+});
+//# sourceMappingURL=Overlay.js.map

package/lib/commonjs/overlay/Overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_expoBlur","_blurTarget","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_webViewStyle","_styledPrimitives","_stack","_useOverlayLayer","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AnimatedBlurView","Animated","createAnimatedComponent","BlurView","OverlayLayerContext","createContext","layerForRank","displayName","useOverlayLayerContext","useContext","BACKDROP_BLUR_INTENSITY","exports","BACKDROP_DIM_OPACITY","OverlayRoot","children","className","style","testID","zIndex","undefined","jsx","StackedOverlayRoot","PinnedOverlayRoot","layer","useOverlayLayer","OverlayRootView","useMemo","root","backdrop","surface","Provider","value","StyledView","pointerEvents","styles","AnimatedBackdropLayers","blurTarget","progress","blurIntensity","blurTint","dimColor","dimOpacity","staticOpacity","layerStyle","blurFade","useAnimatedStyle","opacity","dimFade","jsxs","Fragment","intensity","tint","blurMethod","StyleSheet","absoluteFill","View","backgroundColor","StaticBackdropLayers","Backdrop","memo","onPress","disabled","accessibilityLabel","inert","useWindowedBlurTarget","flat","flatten","styleOpacity","styleBackground","rootStyle","resolvedDimColor","layerProps","Pressable","focusable","accessibilityRole","create","position","Platform","OS","WEB_POSITION_FIXED","top","left","right","bottom"],"sourceRoot":"../../../src","sources":["overlay/Overlay.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/overlay/dropdown-placement.js

@@ -6,8 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.resolveDropdownPlacement = resolveDropdownPlacement;
 /**
  * Placement arithmetic for a portaled dropdown surface — shared by the web
- * `Menu` and `ContextMenu` forks, which anchor differently (a trigger's rect
- * vs. a right-click point) but need the same fit / flip / clamp decision.
+ * `Menu`, `ContextMenu`, `Select`, `Popover` and SUBMENU forks, which anchor
+ * differently (a trigger's rect, a right-click point, a menu row) but need the
+ * same fit / flip / clamp decision.
+ *
+ * BOTH AXES GO THROUGH ONE RESOLVER. `side` names the axis: `'bottom'`/`'top'`
+ * make the surface fit-flip-clamp vertically and ALIGN horizontally, and
+ * `'right'`/`'left'` (a submenu flying out beside its row) do the same thing
+ * with the two axes swapped. They are not two code paths — the same pair of
+ * helpers is called with the anchor's edges in the other order, which is the
+ * whole reason a submenu did not need a second positioner with its own,
+ * differently-wrong clamp.
  *
  * Internal: deliberately NOT re-exported from `overlay/index.ts`. The web forks
  * import it directly, the same way `dialog/SheetShell` is shared without
@@ -20,6 +29,8 @@ exports.resolveDropdownPlacement = resolveDropdownPlacement;
 
 /** Viewport-relative box the surface is positioned against. A right-click point is a zero-area anchor. */
 
+/** The four sides a surface can prefer. `'left'`/`'right'` make the main axis horizontal. */
+
 /**
  * Clamp into `[min, max]`, resolving an inverted range to `min`.
  *
@@ -32,12 +43,56 @@ function clamp(value, min, max) {
   return Math.max(min, Math.min(value, max));
 }
 
+/**
+ * The MAIN axis: sit on the preferred side of the anchor when the surface fits
+ * there, else flip to the other side, else clamp the preferred position into the
+ * viewport.
+ *
+ * Written against a generic axis — `nearEdge`/`farEdge` are the anchor's
+ * `top`/`bottom` for a vertical side and its `left`/`right` for a horizontal
+ * one — so `'top'`, `'bottom'`, `'left'` and `'right'` are one implementation
+ * rather than two that can drift apart.
+ */
+function resolveMainAxis({
+  nearEdge,
+  farEdge,
+  extent,
+  viewportExtent,
+  offset,
+  gutter,
+  prefersNear
+}) {
+  const near = nearEdge - offset - extent;
+  const far = farEdge + offset;
+  const fitsNear = near >= gutter;
+  const fitsFar = far + extent <= viewportExtent - gutter;
+  const preferred = prefersNear ? near : far;
+  const fitsPreferred = prefersNear ? fitsNear : fitsFar;
+  const alternative = prefersNear ? far : near;
+  const fitsAlternative = prefersNear ? fitsFar : fitsNear;
+  if (fitsPreferred) return preferred;
+  if (fitsAlternative) return alternative;
+  return clamp(preferred, gutter, viewportExtent - gutter - extent);
+}
+
+/** The CROSS axis: align against the anchor, then clamp into the viewport. */
+function resolveCrossAxis({
+  startEdge,
+  endEdge,
+  extent,
+  viewportExtent,
+  gutter,
+  align
+}) {
+  const preferred = align === 'end' ? endEdge - extent : align === 'center' ? (startEdge + endEdge) / 2 - extent / 2 : startEdge;
+  return clamp(preferred, gutter, viewportExtent - gutter - extent);
+}
+
 /**
  * Resolve the viewport-relative `top`/`left` for a dropdown surface.
  *
- * Vertical: sit below the anchor when it fits, else flip above it, else clamp
- * into the viewport. Horizontal: align per `align`, then clamp into the
- * viewport.
+ * `side` picks which axis is which: a vertical side fit-flip-clamps the surface
+ * top-to-bottom and aligns it left-to-right, a horizontal one does the reverse.
  */
 function resolveDropdownPlacement({
   anchor,
@@ -45,18 +100,33 @@ function resolveDropdownPlacement({
   viewport,
   offset,
   gutter,
-  align
+  align,
+  side
 }) {
-  const below = anchor.bottom + offset;
-  const above = anchor.top - offset - size.height;
-  const fitsBelow = below + size.height <= viewport.height - gutter;
-  const fitsAbove = above >= gutter;
-  const top = fitsBelow ? below : fitsAbove ? above : clamp(below, gutter, viewport.height - gutter - size.height);
-  const preferredLeft = align === 'end' ? anchor.right - size.width : anchor.left;
-  const left = clamp(preferredLeft, gutter, viewport.width - gutter - size.width);
-  return {
-    top,
-    left
+  const vertical = side === 'top' || side === 'bottom';
+  const main = resolveMainAxis({
+    nearEdge: vertical ? anchor.top : anchor.left,
+    farEdge: vertical ? anchor.bottom : anchor.right,
+    extent: vertical ? size.height : size.width,
+    viewportExtent: vertical ? viewport.height : viewport.width,
+    offset,
+    gutter,
+    prefersNear: side === 'top' || side === 'left'
+  });
+  const cross = resolveCrossAxis({
+    startEdge: vertical ? anchor.left : anchor.top,
+    endEdge: vertical ? anchor.right : anchor.bottom,
+    extent: vertical ? size.width : size.height,
+    viewportExtent: vertical ? viewport.width : viewport.height,
+    gutter,
+    align
+  });
+  return vertical ? {
+    top: main,
+    left: cross
+  } : {
+    top: cross,
+    left: main
   };
 }
 //# sourceMappingURL=dropdown-placement.js.map

package/lib/commonjs/overlay/dropdown-placement.js.map

@@ -1 +1 @@
-{"version":3,"names":["clamp","value","min","max","Math","resolveDropdownPlacement","anchor","size","viewport","offset","gutter","align","below","bottom","above","top","height","fitsBelow","fitsAbove","preferredLeft","right","width","left"],"sourceRoot":"../../../src","sources":["overlay/dropdown-placement.ts"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AA8BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,KAAKA,CAACC,KAAa,EAAEC,GAAW,EAAEC,GAAW,EAAU;EAC9D,OAAOC,IAAI,CAACD,GAAG,CAACD,GAAG,EAAEE,IAAI,CAACF,GAAG,CAACD,KAAK,EAAEE,GAAG,CAAC,CAAC;AAC5C;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,wBAAwBA,CAAC;EACvCC,MAAM;EACNC,IAAI;EACJC,QAAQ;EACRC,MAAM;EACNC,MAAM;EACNC;AACsB,CAAC,EAAqB;EAC5C,MAAMC,KAAK,GAAGN,MAAM,CAACO,MAAM,GAAGJ,MAAM;EACpC,MAAMK,KAAK,GAAGR,MAAM,CAACS,GAAG,GAAGN,MAAM,GAAGF,IAAI,CAACS,MAAM;EAE/C,MAAMC,SAAS,GAAGL,KAAK,GAAGL,IAAI,CAACS,MAAM,IAAIR,QAAQ,CAACQ,MAAM,GAAGN,MAAM;EACjE,MAAMQ,SAAS,GAAGJ,KAAK,IAAIJ,MAAM;EAEjC,MAAMK,GAAG,GAAGE,SAAS,GACjBL,KAAK,GACLM,SAAS,GACPJ,KAAK,GACLd,KAAK,CAACY,KAAK,EAAEF,MAAM,EAAEF,QAAQ,CAACQ,MAAM,GAAGN,MAAM,GAAGH,IAAI,CAACS,MAAM,CAAC;EAElE,MAAMG,aAAa,GAAGR,KAAK,KAAK,KAAK,GAAGL,MAAM,CAACc,KAAK,GAAGb,IAAI,CAACc,KAAK,GAAGf,MAAM,CAACgB,IAAI;EAC/E,MAAMA,IAAI,GAAGtB,KAAK,CAACmB,aAAa,EAAET,MAAM,EAAEF,QAAQ,CAACa,KAAK,GAAGX,MAAM,GAAGH,IAAI,CAACc,KAAK,CAAC;EAE/E,OAAO;IAAEN,GAAG;IAAEO;EAAK,CAAC;AACtB","ignoreList":[]}
+{"version":3,"names":["clamp","value","min","max","Math","resolveMainAxis","nearEdge","farEdge","extent","viewportExtent","offset","gutter","prefersNear","near","far","fitsNear","fitsFar","preferred","fitsPreferred","alternative","fitsAlternative","resolveCrossAxis","startEdge","endEdge","align","resolveDropdownPlacement","anchor","size","viewport","side","vertical","main","top","left","bottom","right","height","width","cross"],"sourceRoot":"../../../src","sources":["overlay/dropdown-placement.ts"],"mappings":"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","ignoreList":[]}