@oxyhq/bloom 0.72.2 → 0.73.1

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,KAA6E,MAAM,OAAO,CAAC;AAoElG,OAAO,KAAK,EAGV,0BAA0B,EAC1B,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AA87BjB,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,KAA6E,MAAM,OAAO,CAAC;AAmElG,OAAO,KAAK,EAGV,0BAA0B,EAC1B,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AA87BjB,eAAO,MAAM,oBAAoB,8GAA4B,CAAC;AA0K9D,eAAe,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.72.2",
+  "version": "0.73.1",
+  "packageManager": "bun@1.3.14",
   "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__/Button.test.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 import { render, fireEvent } from '@testing-library/react-native';
 
 import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { useTheme } from '../theme/use-theme';
+import type { ThemeColors } from '../theme/types';
 import { Button, PrimaryButton, SecondaryButton, IconButton, GhostButton, TextButton } from '../button';
 
 function renderWithTheme(ui: React.ReactElement) {
@@ -13,6 +15,71 @@ function renderWithTheme(ui: React.ReactElement) {
   );
 }
 
+type StyleEntry = Record<string, unknown>;
+
+/**
+ * Deep-flatten an RN `style` prop (nested arrays, `false`/`null` holes) into the
+ * list of style objects that actually reached the node — including the
+ * `{ $$css: true, className }` descriptor react-native-css merges in.
+ */
+function styleEntries(style: unknown, out: StyleEntry[] = []): StyleEntry[] {
+  if (!style || typeof style !== 'object') return out;
+  if (Array.isArray(style)) {
+    for (const entry of style) styleEntries(entry, out);
+    return out;
+  }
+  out.push(style as StyleEntry);
+  return out;
+}
+
+/** Every style key/value that landed on a node, later entries winning. */
+function resolvedStyle(style: unknown): StyleEntry {
+  return Object.assign({}, ...styleEntries(style)) as StyleEntry;
+}
+
+/** The class tokens react-native-css accepted for a node, in arrival order. */
+function classNamesOn(style: unknown): string[] {
+  return styleEntries(style)
+    .filter((entry) => entry.$$css === true && typeof entry.className === 'string')
+    .map((entry) => String(entry.className));
+}
+
+interface HostNode {
+  type: string;
+  props: Record<string, unknown>;
+  children: Array<HostNode | string> | null;
+}
+
+function isHostNode(value: unknown): value is HostNode {
+  return typeof value === 'object' && value !== null && typeof (value as HostNode).type === 'string';
+}
+
+/** Walk the HOST tree (composites are absent from `toJSON()`) for a testID. */
+function findHost(node: unknown, testID: string): HostNode | null {
+  if (Array.isArray(node)) {
+    for (const child of node) {
+      const hit = findHost(child, testID);
+      if (hit) return hit;
+    }
+    return null;
+  }
+  if (!isHostNode(node)) return null;
+  if (node.props.testID === testID) return node;
+  return findHost(node.children, testID);
+}
+
+/** Read the live resolved theme colors the same way `Button` does. */
+function captureThemeColors(): ThemeColors {
+  let captured: ThemeColors | undefined;
+  function Probe() {
+    captured = useTheme().colors;
+    return null;
+  }
+  renderWithTheme(<Probe />);
+  if (!captured) throw new Error('theme probe never rendered');
+  return captured;
+}
+
 describe('Button', () => {
   it('renders children as text', () => {
     const { getByText } = renderWithTheme(<Button>Click me</Button>);
@@ -95,6 +162,104 @@ describe('Button', () => {
   });
 });
 
+// Regression: the native button used to render its `Pressable` inside an
+// unstyled `Animated.View` that existed only to hold the press-scale transform.
+// That wrapper — not the pressable — was the flex child of whatever laid the
+// button out, and it hugged its content, so `className="flex-1"` (and every
+// other layout the caller expressed) applied inside a box that never grew. The
+// web fork renders one real `<button>` and has always behaved. Nothing errored;
+// consumers wrapped each Bloom `Button` in their own `<View>` to compensate.
+describe('layout: the button IS the node its parent lays out', () => {
+  it('renders the pressable as its outermost node — no wrapper in between', () => {
+    const { toJSON } = renderWithTheme(
+      <View testID="host">
+        <Button testID="btn" className="flex-1">
+          Wide
+        </Button>
+      </View>,
+    );
+    const host = findHost(toJSON(), 'host');
+    expect(host).not.toBeNull();
+    const rendered = (host?.children ?? []).filter(isHostNode);
+    expect(rendered).toHaveLength(1);
+    // The single node the parent lays out is the pressable itself — the one
+    // carrying the a11y role, the handlers and the button's own box.
+    expect(rendered[0]?.props.testID).toBe('btn');
+    expect(rendered[0]?.props.accessibilityRole).toBe('button');
+  });
+
+  it('lands the caller className on that same node, beside the button box', () => {
+    const { getByTestId } = renderWithTheme(
+      <Button testID="btn" className="flex-1">
+        Wide
+      </Button>,
+    );
+    const style = getByTestId('btn').props.style;
+    expect(classNamesOn(style)).toContain('flex-1');
+    // Same node, so a layout class and the button's visuals cannot diverge.
+    expect(resolvedStyle(style).borderRadius).toBe(999);
+  });
+
+  it('applies the press-scale transform to that node too, not to a wrapper', () => {
+    const { getByTestId } = renderWithTheme(<Button testID="btn">Press</Button>);
+    expect(resolvedStyle(getByTestId('btn').props.style).transform).toBeDefined();
+  });
+
+  it('keeps the caller style winning over the button box', () => {
+    const { getByTestId } = renderWithTheme(
+      <Button testID="btn" style={{ minHeight: 0, paddingHorizontal: 2 }}>
+        Tight
+      </Button>,
+    );
+    const style = resolvedStyle(getByTestId('btn').props.style);
+    expect(style.minHeight).toBe(0);
+    expect(style.paddingHorizontal).toBe(2);
+  });
+
+  // Regression: the icon variant used to get its chrome from a DEFAULT
+  // `className` that the caller's own `className` replaced outright, so
+  // `<IconButton className="flex-1" />` shipped transparent and borderless. It
+  // now comes from the same resolved tokens `Button.web.tsx` already used.
+  it('keeps the icon variant chrome when the caller passes a className', () => {
+    const colors = captureThemeColors();
+    const { getByTestId } = renderWithTheme(<IconButton testID="icon" className="flex-1" />);
+    const style = resolvedStyle(getByTestId('icon').props.style);
+    expect(style.backgroundColor).toBe(colors.background);
+    expect(style.borderColor).toBe(colors.border);
+    expect(style.borderWidth).toBe(1);
+    expect(classNamesOn(getByTestId('icon').props.style)).toContain('flex-1');
+  });
+});
+
+// `variant="text"` was reported as "shrinks horizontal padding on native but is
+// byte-identical to ghost on web". The padding is real and DELIBERATE — `text`
+// (and its web alias `link`) is a compact inline affordance, `ghost` is a
+// full-size button without a background — and web applies exactly the same 4/8
+// override in `Button.web.tsx`'s `containerStyle`; only the variant COLOR table
+// entry is shared with ghost there. The one genuine divergence left is
+// `minHeight`, which web clears for text/link and native deliberately keeps: a
+// finger needs the target, a cursor does not.
+describe('variant="text" geometry', () => {
+  it('is a compact affordance, not a ghost button', () => {
+    const { getByTestId } = renderWithTheme(<TextButton testID="txt">Text</TextButton>);
+    const style = resolvedStyle(getByTestId('txt').props.style);
+    expect(style.paddingVertical).toBe(4);
+    expect(style.paddingHorizontal).toBe(8);
+  });
+
+  it('ghost keeps the full size-config padding', () => {
+    const { getByTestId } = renderWithTheme(<GhostButton testID="ghost">Ghost</GhostButton>);
+    const style = resolvedStyle(getByTestId('ghost').props.style);
+    expect(style.paddingVertical).toBe(8);
+    expect(style.paddingHorizontal).toBe(16);
+  });
+
+  it('keeps the size-config minHeight so the touch target survives', () => {
+    const { getByTestId } = renderWithTheme(<TextButton testID="txt">Text</TextButton>);
+    expect(resolvedStyle(getByTestId('txt').props.style).minHeight).toBe(40);
+  });
+});
+
 describe('Button variants', () => {
   it('PrimaryButton renders without crashing', () => {
     const { getByText } = renderWithTheme(

package/src/__tests__/Button.web.test.tsx

@@ -129,6 +129,22 @@ describe('Button.web', () => {
     expect(btn).toHaveClass('custom');
   });
 
+  // Parity with the native fork's "the button IS the node its parent lays out"
+  // suite in `Button.test.tsx`. Both platforms render ONE node, so a caller's
+  // layout class reaches the box the parent actually lays out; a wrapper element
+  // added here would scope it away exactly the way native's `Animated.View` did.
+  it('renders the classed button as the outermost node — no wrapper element', () => {
+    const c = mount(
+      <div data-testid="host">
+        <Button className="flex-1">Wide</Button>
+      </div>,
+    );
+    const host = c.querySelector('[data-testid="host"]');
+    expect(host?.children).toHaveLength(1);
+    expect(host?.firstElementChild?.tagName).toBe('BUTTON');
+    expect(host?.firstElementChild).toHaveClass('flex-1');
+  });
+
   it('applies aria-label from accessibilityLabel', () => {
     const c = mount(<Button accessibilityLabel="Save changes">Save</Button>);
     expect(getByLabelText(c, 'Save changes')).toBeTruthy();

package/src/__tests__/ToastHostWebFork.test.ts

@@ -52,9 +52,17 @@ describe('ToastHost platform split', () => {
     expect(host).not.toMatch(/'fixed' as/);
   });
 
-  it('web/default host layers toasts at Z_INDEX.toast', () => {
-    const host = read('toast/ToastHost.tsx');
-    expect(host).toMatch(/zIndex: Z_INDEX\.toast/);
+  it('web/default host pins toasts above the whole overlay stack', () => {
+    const host = code('toast/ToastHost.tsx');
+    // A toast is a notification, not a modal surface: it must stay visible over
+    // whatever is open, including a surface opened AFTER it. So it opts out of
+    // the open-order stack via `OverlayRoot`'s `zIndex` prop rather than taking
+    // a rank (see `src/overlay/stack.ts`).
+    expect(host).toMatch(/<OverlayRoot zIndex=\{TOAST_LAYER_Z\}/);
+    // And it must not ALSO carry a hand-picked depth in its stylesheet: a fixed
+    // number there is exactly what left toasts stranded behind an open bottom
+    // sheet, and it would fight the prop above.
+    expect(host).not.toMatch(/zIndex: Z_INDEX\./);
   });
 
   it('native host imports neither react-native-screens nor the portal (D6)', () => {

package/src/__tests__/overlay-stack-order.test.tsx

@@ -0,0 +1,270 @@
+/**
+ * @jest-environment jsdom
+ */
+
+/**
+ * The overlay stacking rule: a surface opened LATER paints above one opened
+ * earlier.
+ *
+ * Jest cannot see the bug this guards — the losing surface renders perfectly
+ * and its styles are all valid; it is simply painted underneath. So these tests
+ * pin the two halves Jest CAN decide:
+ *
+ *   1. the authority in `src/overlay/stack.ts` hands out ascending depths, and
+ *      keeps doing so across the interleavings that actually occur;
+ *   2. every overlay surface in `src/` gets its depth FROM that authority
+ *      rather than from a constant of its own — the property whose absence
+ *      caused the bug in the first place.
+ *
+ * The hit test that proves the user-visible outcome lives in
+ * `scripts/verify-overlay-stacking.mjs`, driven against a real browser.
+ */
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+
+import { createElement } from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+// The point of the DOM half is what react-native-web actually emits, so it runs
+// against the REAL RNW — the repo-wide `react-native` mock renders no host
+// elements and would make every depth assertion below vacuous.
+jest.mock('react-native', () => jest.requireActual('react-native-web'));
+
+import { OverlayRoot } from '../overlay';
+import {
+  acquireOverlayRank,
+  layerForRank,
+  OVERLAY_STACK_BASE,
+  OVERLAY_STACK_MAX_RANK,
+  registerOverlayRank,
+  releaseOverlayRank,
+  resetOverlayStack,
+  TOAST_LAYER_Z,
+} from '../overlay/stack';
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+beforeEach(() => {
+  resetOverlayStack();
+});
+
+describe('the stacking authority', () => {
+  it('gives a later opener a higher depth than an earlier one', () => {
+    const first = layerForRank(acquireOverlayRank());
+    const second = layerForRank(acquireOverlayRank());
+    const third = layerForRank(acquireOverlayRank());
+
+    expect(second.root).toBeGreaterThan(first.root);
+    expect(third.root).toBeGreaterThan(second.root);
+  });
+
+  it('puts a surface above its OWN backdrop without reaching the next surface', () => {
+    const lower = layerForRank(acquireOverlayRank());
+    const upper = layerForRank(acquireOverlayRank());
+
+    expect(lower.surface).toBeGreaterThan(lower.backdrop);
+    // The band is what keeps a surface's own parts from colliding with the
+    // floor of the surface above it.
+    expect(lower.surface).toBeLessThan(upper.backdrop);
+  });
+
+  it('keeps ordering when surfaces close out of order', () => {
+    // A opens, B opens, A closes, C opens. C is newest and must outrank B.
+    const a = acquireOverlayRank();
+    registerOverlayRank(a);
+    const b = acquireOverlayRank();
+    registerOverlayRank(b);
+
+    releaseOverlayRank(a);
+
+    const c = acquireOverlayRank();
+    registerOverlayRank(c);
+
+    expect(layerForRank(c).root).toBeGreaterThan(layerForRank(b).root);
+  });
+
+  it('starts over once every surface has closed, so depths stay small', () => {
+    const a = acquireOverlayRank();
+    registerOverlayRank(a);
+    releaseOverlayRank(a);
+
+    expect(layerForRank(acquireOverlayRank()).root).toBe(layerForRank(a).root);
+  });
+
+  it('cannot lose a rank handed out but not yet registered', () => {
+    // The one interleaving the reset could otherwise break: a surface takes a
+    // rank during render, and before its effect registers it the last open
+    // surface unmounts and resets the counter. The newcomer must still land
+    // ABOVE the one that is on its way up.
+    const open = acquireOverlayRank();
+    registerOverlayRank(open);
+
+    const rendering = acquireOverlayRank(); // taken, effect not run yet
+    releaseOverlayRank(open); // live set empties -> reset
+    registerOverlayRank(rendering); // effect finally runs
+
+    const next = acquireOverlayRank();
+    expect(next).toBeGreaterThan(rendering);
+    expect(layerForRank(next).root).toBeGreaterThan(layerForRank(rendering).root);
+  });
+
+  it('saturates instead of climbing into the toast layer', () => {
+    const runaway = layerForRank(OVERLAY_STACK_MAX_RANK + 5_000);
+    expect(runaway.surface).toBeLessThan(TOAST_LAYER_Z);
+    expect(runaway.root).toBe(layerForRank(OVERLAY_STACK_MAX_RANK).root);
+  });
+
+  it('keeps every rank below the toast layer', () => {
+    // Toasts are notifications, not modal surfaces: they stay visible over
+    // whatever is open, including a surface opened after them.
+    expect(layerForRank(1).root).toBeGreaterThanOrEqual(OVERLAY_STACK_BASE);
+    expect(layerForRank(OVERLAY_STACK_MAX_RANK).surface).toBeLessThan(TOAST_LAYER_Z);
+  });
+});
+
+describe('OverlayRoot', () => {
+  function render(node: ReturnType<typeof createElement>): {
+    root: Root;
+    container: HTMLElement;
+  } {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+      root.render(node);
+    });
+    return { root, container };
+  }
+
+  const depthOf = (container: HTMLElement, testID: string) => {
+    const el = container.querySelector<HTMLElement>(`[data-testid="${testID}"]`);
+    if (!el) throw new Error(`no element with testID ${testID}`);
+    return Number(getComputedStyle(el).zIndex);
+  };
+
+  it('paints a surface mounted later above one mounted earlier', () => {
+    const first = render(createElement(OverlayRoot, { testID: 'first', children: null }));
+    const second = render(createElement(OverlayRoot, { testID: 'second', children: null }));
+
+    const firstZ = depthOf(first.container, 'first');
+    const secondZ = depthOf(second.container, 'second');
+
+    // Vacuity floor: both must have emitted a real depth, or "second > first"
+    // would be comparing two NaNs into a silent pass.
+    expect(Number.isFinite(firstZ)).toBe(true);
+    expect(Number.isFinite(secondZ)).toBe(true);
+    expect(secondZ).toBeGreaterThan(firstZ);
+
+    act(() => {
+      first.root.unmount();
+      second.root.unmount();
+    });
+    first.container.remove();
+    second.container.remove();
+  });
+
+  it('pins to the given depth, and takes no rank, when told to', () => {
+    const pinned = render(
+      createElement(OverlayRoot, { testID: 'pinned', zIndex: TOAST_LAYER_Z, children: null }),
+    );
+    expect(depthOf(pinned.container, 'pinned')).toBe(TOAST_LAYER_Z);
+
+    // Having opted out, it must not have consumed a rank either — the next
+    // surface to open is still the FIRST one in the stack.
+    const ranked = render(createElement(OverlayRoot, { testID: 'ranked', children: null }));
+    expect(depthOf(ranked.container, 'ranked')).toBe(layerForRank(1).root);
+
+    act(() => {
+      pinned.root.unmount();
+      ranked.root.unmount();
+    });
+    pinned.container.remove();
+    ranked.container.remove();
+  });
+});
+
+describe('no surface picks its own depth', () => {
+  const SRC = path.join(__dirname, '..');
+  const read = (rel: string) => readFileSync(path.join(SRC, rel), 'utf8');
+
+  /**
+   * Every file in `src/` that presents an overlay surface. Enumerated
+   * explicitly rather than globbed: a glob that silently stops matching is the
+   * shape of check that passes forever while covering nothing.
+   */
+  const SURFACES = [
+    'dialog/Dialog.tsx',
+    'dialog/Dialog.web.tsx',
+    'bottom-sheet/index.web.tsx',
+    'menu/index.web.tsx',
+    'select/index.web.tsx',
+    'context-menu/index.web.tsx',
+    'popover/index.web.tsx',
+    'tooltip/index.tsx',
+    'zoomable-image-gallery/ZoomableImageGallery.tsx',
+    'prompt-input/PromptInput.tsx',
+    'avatar-group/AvatarGroup.web.tsx',
+    'toast/ToastHost.tsx',
+  ];
+
+  /** Strips comments, so prose ABOUT the old constants never trips the scan. */
+  const code = (rel: string) =>
+    read(rel)
+      .replace(/\/\*[\s\S]*?\*\//g, '')
+      .replace(/^\s*\/\/.*$/gm, '')
+      .replace(/\{\s*\/\*[\s\S]*?\*\/\s*\}/g, '');
+
+  it.each(SURFACES)('%s claims no overlay-ordering constant', (rel) => {
+    const body = code(rel);
+
+    // The rungs that used to decide which SURFACE was on top. Their absence is
+    // the property that makes open order the only authority.
+    expect(body).not.toMatch(
+      /Z_INDEX\.(overlayBackdrop|overlaySurface|dropdownSurface|tooltip|toast|fullscreen|fullscreenControl|portalRoot)\b/,
+    );
+    expect(body).not.toMatch(/createOverlayZIndex|createDropdownZIndex|Z_INDEX_LAYER_STEP/);
+  });
+
+  it('the scale no longer offers an overlay-ordering rung to reach for', () => {
+    const scale = code('styles/z-index.ts');
+    for (const gone of [
+      'overlayBackdrop',
+      'overlaySurface',
+      'dropdownSurface',
+      'tooltip',
+      'toast',
+      'fullscreen',
+      'fullscreenControl',
+      'createOverlayZIndex',
+      'createDropdownZIndex',
+      'Z_INDEX_LAYER_STEP',
+    ]) {
+      expect(scale).not.toContain(gone);
+    }
+    // Vacuity floor: the module must still export the within-context scale, or
+    // the loop above would pass against an empty file.
+    expect(scale).toMatch(/export const Z_INDEX = \{/);
+    expect(scale).toMatch(/portalRoot: 999999/);
+  });
+
+  it('the WEB tooltip is deliberately NOT in this list', () => {
+    // It is the one tooltip that is not portaled: the bubble is absolutely
+    // positioned against its own trigger and renders inline, so it cannot be
+    // lifted over another surface and has no rank to take. The NATIVE tooltip
+    // does portal, and IS in the list above. If this ever starts portaling,
+    // move it into `SURFACES`.
+    expect(code('tooltip/index.web.tsx')).not.toMatch(/from '\.\.\/portal/);
+    expect(code('tooltip/index.tsx')).toMatch(/from '\.\.\/portal/);
+  });
+
+  it('every surface routes its depth through OverlayRoot', () => {
+    // `Dialog.web`'s side placement renders `SheetSurface`, which mounts its
+    // own `OverlayRoot`; the centred branch mounts one directly. Both files are
+    // covered by the membership check below.
+    const missing = SURFACES.filter((rel) => !code(rel).includes('OverlayRoot'));
+    expect(missing).toEqual([]);
+    // Vacuity floor on the list itself.
+    expect(SURFACES.length).toBeGreaterThanOrEqual(12);
+  });
+});

package/src/avatar-group/AvatarGroup.web.tsx

@@ -1,8 +1,8 @@
 import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
 
+import { OverlayRoot } from '../overlay';
 import { Portal } from '../portal';
-import { Z_INDEX } from '../styles/z-index';
 import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 import { UserHoverCard } from '../user-hover-card';
 import {
@@ -97,35 +97,40 @@ const AvatarGroupWebComponent: React.FC<AvatarGroupProps> = (props) => {
       <AvatarGroupBase {...props} hoverHandlers={hoverHandlers} />
       {hoverCard && hover && (
         <Portal>
-          {/*
-            A Pressable hosts the hover-bridge: `onHoverIn`/`onHoverOut` are
-            typed in React Native (and map to mouseenter/mouseleave on
-            react-native-web), so the card stays open while the cursor is over
-            it without any web-only DOM-prop type suppression.
-          */}
-          <Pressable
-            onHoverIn={cancelClose}
-            onHoverOut={scheduleClose}
-            accessibilityRole="none"
-            pointerEvents="auto"
-            style={[
-              webStyles.floating,
-              { top: hover.top, left: hover.left, width: CARD_WIDTH },
-            ]}
-          >
-            <UserHoverCard
-              avatar={hover.item.uri ?? undefined}
-              displayName={getItemName(hover.item)}
-              username={hover.item.username}
-              onPressProfile={
-                onPressItem
-                  ? () => onPressItem(hover.item, hover.index)
-                  : undefined
-              }
-              action={renderItemAction?.(hover.item, hover.index)}
-              style={webStyles.card}
-            />
-          </Pressable>
+          {/* The hover card stacks by when it opened, like every other Bloom
+              overlay (`src/overlay/stack.ts`). `box-none` keeps the area
+              around it click-through. */}
+          <OverlayRoot>
+            {/*
+              A Pressable hosts the hover-bridge: `onHoverIn`/`onHoverOut` are
+              typed in React Native (and map to mouseenter/mouseleave on
+              react-native-web), so the card stays open while the cursor is over
+              it without any web-only DOM-prop type suppression.
+            */}
+            <Pressable
+              onHoverIn={cancelClose}
+              onHoverOut={scheduleClose}
+              accessibilityRole="none"
+              pointerEvents="auto"
+              style={[
+                webStyles.floating,
+                { top: hover.top, left: hover.left, width: CARD_WIDTH },
+              ]}
+            >
+              <UserHoverCard
+                avatar={hover.item.uri ?? undefined}
+                displayName={getItemName(hover.item)}
+                username={hover.item.username}
+                onPressProfile={
+                  onPressItem
+                    ? () => onPressItem(hover.item, hover.index)
+                    : undefined
+                }
+                action={renderItemAction?.(hover.item, hover.index)}
+                style={webStyles.card}
+              />
+            </Pressable>
+          </OverlayRoot>
         </Portal>
       )}
     </>
@@ -135,7 +140,6 @@ const AvatarGroupWebComponent: React.FC<AvatarGroupProps> = (props) => {
 const webStyles = StyleSheet.create({
   floating: {
     position: WEB_POSITION_FIXED,
-    zIndex: Z_INDEX.tooltip,
   },
   card: {
     width: CARD_WIDTH,

package/src/bottom-sheet/index.web.tsx

@@ -4,7 +4,6 @@ import { StyleSheet } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { OverlayRoot } from '../overlay';
 import { Portal } from '../portal/index.web';
-import { Z_INDEX } from '../styles/z-index';
 import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 import {
     BottomSheetBase,
@@ -54,16 +53,22 @@ const BottomSheet = forwardRef((props: BottomSheetProps, ref: React.ForwardedRef
 BottomSheet.displayName = 'BottomSheet';
 
 const webStyles = StyleSheet.create({
+    // Fixed, full-viewport box the sheet's `StyleSheet.absoluteFill` body
+    // anchors to. The pointer-events opt-in and the STACKING both live in
+    // `OverlayRoot`.
+    //
+    // This used to also pin `zIndex: Z_INDEX.portalRoot` (999999) here. Inside
+    // the portal root that number does not mean "the portal layer" — it means
+    // "above every other portaled surface", which is how a confirm dialog
+    // opened from inside an open sheet ended up rendering underneath it,
+    // unreachable, no matter which one opened last. Stacking is the overlay
+    // stack's job now (`src/overlay/stack.ts`); do not reintroduce a constant.
     rootView: {
-        // Fixed, full-viewport box the sheet's `StyleSheet.absoluteFill` body
-        // anchors to. The pointer-events opt-in lives in `OverlayRoot`; this
-        // only adds the stacking context.
         position: WEB_POSITION_FIXED,
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
-        zIndex: Z_INDEX.portalRoot,
     },
 });