@oxyhq/bloom 0.56.0 → 0.57.0

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

@@ -0,0 +1,67 @@
+/**
+ * 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.
+ *
+ * ## 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.
+ *
+ * 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';
+export interface OverlayRootProps {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Outermost node of a portaled surface. Fills the viewport and 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.
+ */
+export declare function OverlayRoot({ children, style, testID }: OverlayRootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace OverlayRoot {
+    var displayName: string;
+}
+export interface BackdropProps {
+    /** Dismiss handler. Omit (or pass `disabled`) for a backdrop that only dims. */
+    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`. */
+    style?: StyleProp<ViewStyle>;
+    /** Rendered inside the backdrop — e.g. a blur layer that must dim with it. */
+    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.
+ */
+export declare const Backdrop: import("react").NamedExoticComponent<BackdropProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/lib/typescript/commonjs/toast/ToastHost.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastHost.d.ts","sourceRoot":"","sources":["../../../../src/toast/ToastHost.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,qBAAqB,EAAE,EAAE,cAAc,2CAgB5E;yBAhBe,SAAS"}
+{"version":3,"file":"ToastHost.d.ts","sourceRoot":"","sources":["../../../../src/toast/ToastHost.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,qBAAqB,EAAE,EAAE,cAAc,2CAqB5E;yBArBe,SAAS"}

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;AAkEjF,OAAO,KAAK,EAGV,0BAA0B,EAC1B,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AA64BjB,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;AAu4BjB,eAAO,MAAM,oBAAoB,8GAA4B,CAAC;AAyK9D,eAAe,oBAAoB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/bottom-sheet/index.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAEH,KAAK,gBAAgB,EACrB,KAAK,cAAc,EAEtB,MAAM,mBAAmB,CAAC;AA8B3B,QAAA,MAAM,WAAW,yFAEf,CAAC;AAoBH,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,CAAC;AACjD,eAAe,WAAW,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/bottom-sheet/index.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAEH,KAAK,gBAAgB,EACrB,KAAK,cAAc,EAEtB,MAAM,mBAAmB,CAAC;AAoC3B,QAAA,MAAM,WAAW,yFAEf,CAAC;AAkBH,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,CAAC;AACjD,eAAe,WAAW,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,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":"AAsCA,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;AA8ZD,OAAO,EAAE,4BAA4B,EAAE,CAAC;AAkQxC;;;;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;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"}

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

@@ -0,0 +1,67 @@
+/**
+ * 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.
+ *
+ * ## 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.
+ *
+ * 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';
+export interface OverlayRootProps {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Outermost node of a portaled surface. Fills the viewport and 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.
+ */
+export declare function OverlayRoot({ children, style, testID }: OverlayRootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace OverlayRoot {
+    var displayName: string;
+}
+export interface BackdropProps {
+    /** Dismiss handler. Omit (or pass `disabled`) for a backdrop that only dims. */
+    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`. */
+    style?: StyleProp<ViewStyle>;
+    /** Rendered inside the backdrop — e.g. a blur layer that must dim with it. */
+    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.
+ */
+export declare const Backdrop: import("react").NamedExoticComponent<BackdropProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/lib/typescript/module/toast/ToastHost.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastHost.d.ts","sourceRoot":"","sources":["../../../../src/toast/ToastHost.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,qBAAqB,EAAE,EAAE,cAAc,2CAgB5E;yBAhBe,SAAS"}
+{"version":3,"file":"ToastHost.d.ts","sourceRoot":"","sources":["../../../../src/toast/ToastHost.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,qBAAqB,EAAE,EAAE,cAAc,2CAqB5E;yBArBe,SAAS"}

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;AAkEjF,OAAO,KAAK,EAGV,0BAA0B,EAC1B,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AA64BjB,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;AAu4BjB,eAAO,MAAM,oBAAoB,8GAA4B,CAAC;AAyK9D,eAAe,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.56.0",
+  "version": "0.57.0",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -148,6 +148,17 @@
         "default": "./lib/commonjs/portal/index.js"
       }
     },
+    "./overlay": {
+      "react-native": "./src/overlay/index.tsx",
+      "import": {
+        "types": "./lib/typescript/module/overlay/index.d.ts",
+        "default": "./lib/module/overlay/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/overlay/index.d.ts",
+        "default": "./lib/commonjs/overlay/index.js"
+      }
+    },
     "./dialog": {
       "react-native": "./src/dialog/index.ts",
       "browser": {

package/src/__tests__/TabBarBlur.test.tsx

@@ -76,11 +76,16 @@ function flattenStyle(style: unknown): Record<string, unknown> {
 /**
  * The bar's outermost view — `styles.root`, the absolutely-positioned
  * `box-none` layer the blur and the pill wrap are the two children of.
+ *
+ * `box-none` is matched on the PROP, not on the flattened style: react-native-web
+ * only resolves that RN-only value from the prop path, so this bar (a full-width
+ * band pinned to the bottom of every page) would silently swallow clicks if it
+ * ever moved back into the style object. See `pointer-events-style-form.test.ts`.
  */
 function barRoot(tree: RenderedTree): ReactTestRendererJSON {
   const found = hostNodes(tree).find((node) => {
     const style = flattenStyle(node.props.style);
-    return style.position === 'absolute' && style.pointerEvents === 'box-none';
+    return style.position === 'absolute' && node.props.pointerEvents === 'box-none';
   });
   if (!found) throw new Error('The bar rendered no absolute box-none root');
   return found;

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

@@ -0,0 +1,124 @@
+/**
+ * @jest-environment jsdom
+ */
+
+// The bug these tests exist for: Bloom's web `Portal` root is
+// `pointer-events: none`, so every portaled surface has to opt back in. The
+// surfaces did that with a `style={{ pointerEvents: 'box-none' }}` entry, which
+// never reached the DOM — react-native-web resolves the `pointerEvents` PROP
+// into its class pair, and the style-object form was dropped on the way
+// through. The result on production web: dialogs, bottom sheets, the image
+// viewer and toasts all rendered perfectly and were completely click-through.
+// Backdrops didn't dismiss, panels didn't press, and clicks landed on the app
+// behind the overlay.
+//
+// `OverlayRoot` / `Backdrop` encode the working contract; these tests pin it.
+
+import { createElement } from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+// The whole point is what react-native-web puts in the DOM, so this suite runs
+// against the REAL RNW — not the repo-wide `react-native` mock, which never
+// emits a class and would make every assertion below vacuous.
+jest.mock('react-native', () => jest.requireActual('react-native-web'));
+
+import { Backdrop, OverlayRoot } from '../overlay';
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT =
+  true;
+
+/** Every `pointer-events` declaration react-native-web injected for `className`. */
+function pointerEventsRulesFor(className: string): string[] {
+  const classes = className.split(/\s+/).filter(Boolean);
+  const out: string[] = [];
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules: CSSRuleList;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    for (const rule of Array.from(rules)) {
+      const text = rule.cssText ?? '';
+      if (!text.includes('pointer-events')) continue;
+      if (classes.some((c) => text.includes(`.${c}`))) out.push(text);
+    }
+  }
+  return out;
+}
+
+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 };
+}
+
+describe('overlay pointer-events contract (web)', () => {
+  it('OverlayRoot emits box-none: itself inert, its children interactive', () => {
+    const { root, container } = render(
+      createElement(OverlayRoot, { testID: 'root', children: null }),
+    );
+
+    const el = container.querySelector('[data-testid="root"]');
+    expect(el).not.toBeNull();
+    const rules = pointerEventsRulesFor(el?.className ?? '');
+
+    // The two halves of react-native-web's `box-none`: the box itself does not
+    // take events (empty gaps stay click-through), direct children do.
+    expect(rules.some((r) => /pointer-events:\s*none/.test(r) && !/>\s*\*/.test(r))).toBe(true);
+    expect(rules.some((r) => />\s*\*/.test(r) && /pointer-events:\s*auto/.test(r))).toBe(true);
+
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  it('Backdrop takes pointer events and dismisses on press', () => {
+    const onPress = jest.fn();
+    const { root, container } = render(
+      createElement(Backdrop, { onPress, testID: 'backdrop' }),
+    );
+
+    const el = container.querySelector('[data-testid="backdrop"]') as HTMLElement | null;
+    expect(el).not.toBeNull();
+
+    // Without this the element inherits the portal root's `none` and the press
+    // below can never happen in a real browser.
+    expect(
+      pointerEventsRulesFor(el?.className ?? '').some((r) =>
+        /pointer-events:\s*auto/.test(r),
+      ),
+    ).toBe(true);
+
+    act(() => {
+      el?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+    expect(onPress).toHaveBeenCalledTimes(1);
+
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  it('a disabled Backdrop dims without dismissing', () => {
+    const onPress = jest.fn();
+    const { root, container } = render(
+      createElement(Backdrop, { onPress, disabled: true, testID: 'backdrop' }),
+    );
+
+    const el = container.querySelector('[data-testid="backdrop"]') as HTMLElement | null;
+    act(() => {
+      el?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+    expect(onPress).not.toHaveBeenCalled();
+
+    act(() => root.unmount());
+    container.remove();
+  });
+});

package/src/__tests__/pointer-events-style-form.test.ts

@@ -0,0 +1,58 @@
+// A source gate for the one mistake that took every Bloom overlay down on web:
+// writing `pointerEvents: 'box-none'` (or `'box-only'`) inside a STYLE object.
+//
+// react-native-web resolves those two RN-only values in `createDOMProps`, from
+// the `pointerEvents` PROP — it maps the prop onto its own class pair
+// (`self { none !important }` + `> * { auto }`). As a style-object value it is
+// not valid CSS and is dropped, so the element silently keeps whatever it
+// inherits. Inside the web Portal (root: `pointer-events: none`) that makes the
+// entire surface click-through; outside it, a full-bleed `box-none` container
+// becomes click-CATCHING and eats presses meant for the app under it. Both
+// failure modes render perfectly and log nothing.
+//
+// `pointerEvents: 'auto' | 'none'` ARE valid CSS and stay allowed as styles —
+// only the two RN-only values are banned.
+//
+// The runtime half of this contract is asserted in `overlay-pointer-events.test.tsx`.
+
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { join } from 'node:path';
+
+const SRC = join(__dirname, '..');
+const BANNED = /pointerEvents:\s*['"](box-none|box-only)['"]/;
+
+function sourceFiles(dir: string, out: string[] = []): string[] {
+  for (const entry of readdirSync(dir)) {
+    if (entry === '__tests__' || entry === 'node_modules') continue;
+    const full = join(dir, entry);
+    if (statSync(full).isDirectory()) {
+      sourceFiles(full, out);
+    } else if (/\.tsx?$/.test(entry)) {
+      out.push(full);
+    }
+  }
+  return out;
+}
+
+describe('pointerEvents style-object form', () => {
+  const files = sourceFiles(SRC);
+
+  // Vacuity floor: a broken traversal would otherwise report a clean sweep.
+  it('scans the whole source tree', () => {
+    expect(files.length).toBeGreaterThan(200);
+    expect(files.some((f) => f.endsWith(join('overlay', 'index.tsx')))).toBe(true);
+  });
+
+  it('never uses the RN-only values as styles — pass them as the prop', () => {
+    const offenders = files
+      .flatMap((file) =>
+        readFileSync(file, 'utf8')
+          .split('\n')
+          .map((line, i) => ({ file: file.slice(SRC.length + 1), line: i + 1, text: line.trim() }))
+          .filter(({ text }) => BANNED.test(text) && !text.startsWith('*') && !text.startsWith('//')),
+      )
+      .map(({ file, line, text }) => `${file}:${line}  ${text}`);
+
+    expect(offenders).toEqual([]);
+  });
+});

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

@@ -2,6 +2,7 @@ import type React from 'react';
 import { forwardRef } from 'react';
 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';
@@ -33,9 +34,15 @@ import {
 function WebShell({ children }: BottomSheetShellProps) {
     return (
         <Portal>
-            <GestureHandlerRootView style={[webStyles.rootView, { pointerEvents: 'box-none' }]}>
-                {children}
-            </GestureHandlerRootView>
+            {/* `OverlayRoot` owns the portal-root pointer-events opt-in (see
+                `src/overlay`). It used to ride in the style array below as an
+                RN-only box-none value, which never reached the DOM — the whole
+                sheet, backdrop included, was click-through on web. */}
+            <OverlayRoot style={webStyles.rootView}>
+                <GestureHandlerRootView style={StyleSheet.absoluteFill}>
+                    {children}
+                </GestureHandlerRootView>
+            </OverlayRoot>
         </Portal>
     );
 }
@@ -48,11 +55,9 @@ BottomSheet.displayName = 'BottomSheet';
 
 const webStyles = StyleSheet.create({
     rootView: {
-        // The bloom Portal root is `position: fixed; inset: 0; pointer-events:
-        // none`; this fixed, full-viewport root re-enables pointer events for
-        // the sheet's own interactive descendants (backdrop, sheet) while empty
-        // gaps stay click-through (`box-none`). `StyleSheet.absoluteFill` from
-        // the sheet body then anchors to this box.
+        // 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,

package/src/dialog/Dialog.tsx

@@ -523,13 +523,13 @@ function SideSheet({
 
   return (
     <View
+      pointerEvents="box-none"
       style={[
         sideStyles.root,
         // Per-layer offset so a side dialog stacked on top of another (surface
         // stack) paints above it. Layer 0 → offset 0 → unchanged.
         { zIndex: Z_INDEX.fullscreen + Z_INDEX_LAYER_STEP * (layer ?? 0) },
         containerStyle,
-        { pointerEvents: 'box-none' },
       ]}
       {...(containerClassName ? ({ className: containerClassName } as Record<string, string>) : {})}
     >

package/src/dialog/Dialog.web.tsx

@@ -19,6 +19,7 @@ import {
 import Animated from 'react-native-reanimated';
 import { RemoveScrollBar } from 'react-remove-scroll-bar';
 
+import { Backdrop, OverlayRoot } from '../overlay';
 import { Portal } from '../portal/index.web';
 import { createOverlayZIndex } from '../styles/z-index';
 import { WEB_POSITION_FIXED, type WebCssStyle } from '../styles/web-view-style';
@@ -315,23 +316,21 @@ function CenterOrSideDialog({
         <Context.Provider value={context}>
           <ClosingContext.Provider value={isClosing}>
             <RemoveScrollBar />
-            <Pressable
-              onPress={dismissOnBackdrop ? () => close() : undefined}
+            {/* The press target IS the full-viewport box, so it uses
+                `Backdrop` (which opts back in from the Portal root's
+                `pointer-events: none` via the `pointerEvents` PROP — the style
+                form is dropped before it reaches the DOM, see `src/overlay`)
+                and lays the panel out inside itself. */}
+            <Backdrop
+              onPress={() => close()}
               disabled={!dismissOnBackdrop}
-              // `pointerEvents: 'auto'` opts back in from the Portal root's
-              // `pointer-events: none`, which is set so the idle portal
-              // doesn't intercept clicks on the underlying app.
+              accessibilityLabel={label ? `Dismiss ${label}` : 'Dismiss dialog'}
               style={{
                 position: WEB_POSITION_FIXED,
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
                 zIndex: dialogZIndex.backdrop,
                 alignItems: 'center',
                 justifyContent: 'center',
                 paddingHorizontal: 20,
-                pointerEvents: 'auto',
               }}
             >
               <DialogBackdrop isClosing={isClosing} />
@@ -353,7 +352,7 @@ function CenterOrSideDialog({
               >
                 {children}
               </DialogPanel>
-            </Pressable>
+            </Backdrop>
           </ClosingContext.Provider>
         </Context.Provider>
       </Portal>
@@ -685,13 +684,12 @@ function SheetSurface({
   }, [dismissOnBackdrop, onDismiss]);
 
   return (
-    <View
-      style={[sheetStyles.root, { zIndex: backdropZIndex }, containerStyle, { pointerEvents: 'box-none' }]}
+    <OverlayRoot
+      style={[sheetStyles.root, { zIndex: backdropZIndex }, containerStyle]}
       {...(containerClassName ? ({ className: containerClassName } as Record<string, string>) : {})}
     >
-      <Pressable
+      <Backdrop
         testID={testID ? `${testID}-backdrop` : DIALOG_SHEET_BACKDROP_TESTID}
-        accessibilityRole="button"
         accessibilityLabel={label ? `Dismiss ${label}` : 'Dismiss dialog'}
         onPress={handleBackdropPress}
         disabled={!dismissOnBackdrop}
@@ -776,7 +774,7 @@ function SheetSurface({
           </View>
         )}
       </View>
-    </View>
+    </OverlayRoot>
   );
 }
 

package/src/dialog/DialogHeader.tsx

@@ -534,7 +534,7 @@ export const DialogNavHeader = memo(function DialogNavHeader({
     ) : null);
 
   return (
-    <View style={[styles.overlay, style, { pointerEvents: 'box-none' }]}>
+    <View pointerEvents="box-none" style={[styles.overlay, style]}>
       {/* Opaque (surface bg) at the top → transparent at the bottom, so scrolled
           content fades out under the bar. `onImage` swaps to a dark scrim so the
           chrome reads over media. Pure NativeWind — no SVG dependency. */}
@@ -546,7 +546,7 @@ export const DialogNavHeader = memo(function DialogNavHeader({
         }
         style={[StyleSheet.absoluteFill, { height: DIALOG_HEADER_OVERLAY_HEIGHT, pointerEvents: 'none' }]}
       />
-      <View style={[styles.navRow, { pointerEvents: 'box-none' }]}>
+      <View pointerEvents="box-none" style={styles.navRow}>
         <View style={styles.side}>{left}</View>
         <Animated.View
           testID="dialog-nav-title"