@oxyhq/bloom 0.72.1 → 0.73.0

package/src/tooltip/index.tsx

@@ -18,6 +18,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useTheme } from '../theme/use-theme';
 import { atoms as a } from '../styles';
+import { OverlayRoot } from '../overlay';
 import { Portal } from '../portal';
 import {
   ARROW_HALF_SIZE,
@@ -173,13 +174,19 @@ export function TooltipContent({
 
   return (
     <Portal>
-      <Bubble
-        label={label}
-        position={position}
-        targetMeasurements={targetMeasurements}
-        requestClose={requestClose}>
-        {children}
-      </Bubble>
+      {/* `OverlayRoot` takes the tooltip's place in the open-order overlay
+          stack, so a tooltip opened over another surface paints above it (see
+          `src/overlay/stack.ts`). It mounts past the `visible` guard, so the
+          rank tracks opening. */}
+      <OverlayRoot>
+        <Bubble
+          label={label}
+          position={position}
+          targetMeasurements={targetMeasurements}
+          requestClose={requestClose}>
+          {children}
+        </Bubble>
+      </OverlayRoot>
     </Portal>
   );
 }

package/src/tooltip/index.web.tsx

@@ -3,8 +3,8 @@ import { Pressable, StyleSheet, View } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 import { atoms as a, flatten } from '../styles';
-import { Z_INDEX } from '../styles/z-index';
 import { WEB_POSITION_FIXED } from '../styles/web-view-style';
+import { Z_INDEX } from '../styles/z-index';
 import {
   ARROW_SIZE,
   BUBBLE_MAX_WIDTH,
@@ -156,6 +156,12 @@ const webStyles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    zIndex: Z_INDEX.tooltip,
+    // In-flow depth, not an overlay-ordering one: the WEB tooltip is not
+    // portaled (unlike the native one) — the bubble is absolutely positioned
+    // against its trigger and renders inline. So this only lifts the
+    // outside-press catcher over adjacent content, and stays below the bubble's
+    // own `a.z_50`. Which SURFACE is on top is never decided here; see
+    // `src/overlay/stack.ts`.
+    zIndex: Z_INDEX.floating,
   },
 });

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

@@ -36,7 +36,6 @@ import {
   ArrowRight_Stroke2_Corner0_Rounded,
   ArrowOutOfBox_Stroke2_Corner0_Rounded,
 } from '../icons';
-import { Z_INDEX } from '../styles/z-index';
 import { WEB_POSITION_FIXED, type WebCssStyle } from '../styles/web-view-style';
 import {
   getAspectRatio,
@@ -1039,14 +1038,15 @@ const styles = StyleSheet.create({
       web: {
         // Full-screen fixed overlay (web), like Bloom's Portal and Dialog.web.
         // Only ever applied on web (this is the `web` arm of Platform.select),
-        // so `WEB_POSITION_FIXED` is honest here; the fullscreen z-index token
-        // keeps the viewer above the app chrome.
+        // so `WEB_POSITION_FIXED` is honest here. The depth is NOT set here:
+        // `OverlayRoot` above assigns it from the open-order overlay stack, so
+        // a viewer opened over another surface paints above it and one opened
+        // under a later surface goes behind (see `src/overlay/stack.ts`).
         position: WEB_POSITION_FIXED,
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
-        zIndex: Z_INDEX.fullscreen,
       },
       default: {
         // Mounted through the Bloom Portal `Outlet` (which renders its content