@userflow-tech/react-native 0.2.0 → 0.3.0

package/src/authoring/hitTest.ts

@@ -1,9 +1,36 @@
-import { autoAnchorRegistry, type AutoAnchorInstance } from '../anchors/AutoAnchorRegistry';
-import { fiberFromPublicInstance } from '../anchors/fiber/fiberInternals';
+import type { SemanticRole } from '@userflow-tech/protocol';
+import { Dimensions } from 'react-native';
+
+import {
+  autoAnchorRegistry,
+  roleForKind,
+  type AutoAnchorInstance,
+} from '../anchors/AutoAnchorRegistry';
+import { fiberScanRoot } from '../anchors/fiber/FiberScanRoot';
+import {
+  type AnyFiber,
+  MAX_ANCESTOR_WALK,
+  getAlternate,
+  getLiveHostProps,
+  getReturn,
+  isHostFiber,
+} from '../anchors/fiber/fiberInternals';
+import { createLazyHostFiberIndex, lookupHostFiber } from '../anchors/fiber/indexHostFibers';
 import { measureHostFiber } from '../anchors/fiber/measureHostFiber';
+import { readHostText } from '../anchors/fiber/readHostContent';
+import {
+  clipToScrollViewports,
+  fiberIsUnder,
+  topmostVisibleModalHost,
+  type VisibleRect,
+} from '../anchors/fiber/visibleRect';
 import { isFiberOnVisibleScreen } from '../anchors/fiber/visibleScreens';
+import { walkVisibleFibers } from '../anchors/fiber/walkVisibleFibers';
+import { createVisibleInstanceFilter } from '../anchors/isInstanceOnVisibleScreen';
 import { pointInRect } from '../anchors/targetPressMonitor';
 
+import { hostAtPoint } from './hostAtPoint';
+
 export interface HitRect {
   x: number;
   y: number;
@@ -11,17 +38,58 @@ export interface HitRect {
   height: number;
 }
 
+/** What the picker knows about a host the Babel plugin never registered. */
+export interface FiberTargetDescriptor {
+  kind: string;
+  role: SemanticRole;
+  isPressable: boolean;
+  testID?: string;
+  nativeID?: string;
+  accessibilityLabel?: string;
+  childText?: string;
+}
+
+export type PickTarget =
+  | { source: 'registry'; instance: AutoAnchorInstance }
+  | { source: 'fiber'; fiber: AnyFiber; descriptor: FiberTargetDescriptor };
+
 export interface HitCandidate {
-  instance: AutoAnchorInstance;
+  target: PickTarget;
   rect: HitRect;
   area: number;
 }
 
 export type MeasureInstance = (inst: AutoAnchorInstance) => Promise<HitRect | null>;
 export type InstanceFilter = (inst: AutoAnchorInstance) => boolean;
+export type HostAtPoint = (x: number, y: number) => Promise<AnyFiber | null>;
 
 const MEASURE_TIMEOUT_MS = 400;
 
+/**
+ * Scroll hosts carry responder handlers (`onResponderRelease`, …) for drag
+ * tracking. They are containers, never the thing a tap means to pick.
+ */
+const SCROLL_HOST_TYPES = new Set([
+  'RCTScrollView',
+  'RCTScrollContentView',
+  'AndroidHorizontalScrollView',
+  'AndroidHorizontalScrollContentView',
+]);
+
+/** A pressable ancestor bigger than this share of the window is a container, not a control. */
+const MAX_DEFAULT_PRESSABLE_WINDOW_SHARE = 0.5;
+
+const INTERACTIVE_ROLES = new Set([
+  'button',
+  'tab',
+  'link',
+  'switch',
+  'checkbox',
+  'menuitem',
+  'radio',
+  'togglebutton',
+]);
+
 type MeasureInWindowCallback = (x: number, y: number, width: number, height: number) => void;
 
 interface MeasurableNode {
@@ -40,10 +108,12 @@ function areaOf(rect: HitRect): number {
   return rect.width * rect.height;
 }
 
-function isInstanceOnVisibleScreen(inst: AutoAnchorInstance): boolean {
-  const fiber = fiberFromPublicInstance(inst.ref.current);
-  if (!fiber) return true;
-  return isFiberOnVisibleScreen(fiber);
+function fiberFromPublicInstanceSafe(node: unknown): AnyFiber | null {
+  try {
+    return lookupHostFiber(createLazyHostFiberIndex(), node);
+  } catch {
+    return null;
+  }
 }
 
 function measureWithTimeout(
@@ -87,7 +157,7 @@ export function measureInstanceRect(inst: AutoAnchorInstance): Promise<HitRect |
       node.measureInWindow(callback);
     });
   }
-  const fiber = fiberFromPublicInstance(node);
+  const fiber = fiberFromPublicInstanceSafe(node);
   if (fiber) {
     return measureWithTimeout((callback) => {
       measureHostFiber(fiber, callback);
@@ -96,9 +166,193 @@ export function measureInstanceRect(inst: AutoAnchorInstance): Promise<HitRect |
   return Promise.resolve(null);
 }
 
+function stringProp(value: unknown): string | undefined {
+  return typeof value === 'string' && value.trim() ? value.trim() : undefined;
+}
+
+function hostKind(fiber: AnyFiber): string {
+  const type = fiber?.type;
+  if (typeof type === 'string' && type.length > 0) return type;
+  return 'View';
+}
+
+/**
+ * A library-rendered host worth offering as a pick: it has a developer id, a
+ * label, an interactive role, or a press handler. Plain layout views are not.
+ */
+export function fiberTargetDescriptor(fiber: AnyFiber): FiberTargetDescriptor | null {
+  if (!isHostFiber(fiber)) return null;
+  let props: Record<string, unknown> | undefined;
+  try {
+    props = getLiveHostProps(fiber);
+  } catch {
+    props = undefined;
+  }
+  if (!props) return null;
+
+  const testID = stringProp(props.testID);
+  const nativeID = stringProp(props.nativeID);
+  const usableNativeID = nativeID && !nativeID.startsWith('uf_') ? nativeID : undefined;
+  const accessibilityLabel =
+    stringProp(props.accessibilityLabel) ?? stringProp(props['aria-label']);
+  const kind = hostKind(fiber);
+  const isScrollHost = SCROLL_HOST_TYPES.has(kind);
+  const a11yRole = stringProp(props.accessibilityRole) ?? stringProp(props.role);
+  const interactiveRole = a11yRole !== undefined && INTERACTIVE_ROLES.has(a11yRole.toLowerCase());
+  // Pressability puts `onClick` on the host for every Pressable / Touchable.
+  // Responder handlers alone are not a press signal: scroll views have them.
+  const hasPress =
+    !isScrollHost && (typeof props.onPress === 'function' || typeof props.onClick === 'function');
+  if (!testID && !usableNativeID && !accessibilityLabel && !interactiveRole && !hasPress) {
+    return null;
+  }
+
+  const isPressable = !isScrollHost && (interactiveRole || hasPress);
+  let childText: string | undefined;
+  try {
+    childText = readHostText(fiber);
+  } catch {
+    childText = undefined;
+  }
+  return {
+    kind,
+    role: isPressable ? 'Action' : roleForKind(kind),
+    isPressable,
+    ...(testID ? { testID } : {}),
+    ...(usableNativeID ? { nativeID: usableNativeID } : {}),
+    ...(accessibilityLabel ? { accessibilityLabel } : {}),
+    ...(childText ? { childText } : {}),
+  };
+}
+
+function registryMap(instances: AutoAnchorInstance[]): Map<AnyFiber, AutoAnchorInstance> {
+  const map = new Map<AnyFiber, AutoAnchorInstance>();
+  const getIndex = createLazyHostFiberIndex();
+  for (const inst of instances) {
+    let fiber: AnyFiber | null = null;
+    try {
+      fiber = lookupHostFiber(getIndex, inst.ref.current);
+    } catch {
+      fiber = null;
+    }
+    if (!fiber) continue;
+    map.set(fiber, inst);
+    const alternate = getAlternate(fiber);
+    if (alternate) map.set(alternate, inst);
+  }
+  return map;
+}
+
+function targetForHost(
+  fiber: AnyFiber,
+  byFiber: Map<AnyFiber, AutoAnchorInstance>,
+): PickTarget | null {
+  const registered = byFiber.get(fiber) ?? byFiber.get(getAlternate(fiber) as AnyFiber);
+  if (registered) return { source: 'registry', instance: registered };
+  const descriptor = fiberTargetDescriptor(fiber);
+  if (!descriptor) return null;
+  return { source: 'fiber', fiber, descriptor };
+}
+
+/**
+ * Innermost host first, then each identifiable ancestor up to the
+ * {@link FiberScanRoot}. Hosts above it (the provider's own wrappers) are never
+ * resolvable at play time. Empty when `host` is on a covered screen: its
+ * ancestors above the navigator are not what was tapped.
+ */
+export function candidateChain(
+  host: AnyFiber,
+  byFiber: Map<AnyFiber, AutoAnchorInstance>,
+): PickTarget[] {
+  const chain: PickTarget[] = [];
+  if (!isFiberOnVisibleScreen(host)) return chain;
+  const scanRoot = fiberScanRoot.getFiber();
+  const scanRootAlternate = scanRoot ? getAlternate(scanRoot) : null;
+  const seenInstances = new Set<string>();
+  const seenFibers = new Set<AnyFiber>();
+  let current: AnyFiber | null = host;
+  for (let depth = 0; current && depth < MAX_ANCESTOR_WALK; depth += 1) {
+    if (scanRoot && (current === scanRoot || current === scanRootAlternate)) break;
+    const target = isHostFiber(current) ? targetForHost(current, byFiber) : null;
+    if (target?.source === 'registry' && !seenInstances.has(target.instance.instanceId)) {
+      seenInstances.add(target.instance.instanceId);
+      chain.push(target);
+    } else if (target?.source === 'fiber' && !seenFibers.has(target.fiber)) {
+      seenFibers.add(target.fiber);
+      chain.push(target);
+    }
+    current = getReturn(current);
+  }
+  return chain;
+}
+
+function measureFiberRect(fiber: AnyFiber): Promise<HitRect | null> {
+  return measureWithTimeout((callback) => {
+    measureHostFiber(fiber, callback);
+  });
+}
+
+async function candidatesFromChain(
+  chain: PickTarget[],
+  measure: MeasureInstance,
+): Promise<HitCandidate[]> {
+  const measured = await Promise.all(
+    chain.map(async (target) => {
+      const rect =
+        target.source === 'registry'
+          ? await measure(target.instance)
+          : await measureFiberRect(target.fiber);
+      if (!rect) return null;
+      return { target, rect, area: areaOf(rect) };
+    }),
+  );
+  return measured.filter((c): c is HitCandidate => c != null);
+}
+
+function windowArea(): number {
+  try {
+    const { width, height } = Dimensions.get('window');
+    if (width > 0 && height > 0) return width * height;
+  } catch {
+    // Tests and odd hosts: no cap.
+  }
+  return Infinity;
+}
+
 /**
- * Hit-test window coordinates against visible auto-anchor instances.
- * Returns containing candidates sorted by area ascending (smallest / deepest first).
+ * First control-sized pressable in an innermost-first list, else 0. A
+ * screen-sized pressable ancestor would select an invisible full-screen rect.
+ */
+export function defaultCandidateIndex(candidates: HitCandidate[]): number {
+  const cap = windowArea() * MAX_DEFAULT_PRESSABLE_WINDOW_SHARE;
+  const index = candidates.findIndex((candidate) => {
+    const pressable =
+      candidate.target.source === 'registry'
+        ? candidate.target.instance.isPressable
+        : candidate.target.descriptor.isPressable;
+    return pressable && candidate.area <= cap;
+  });
+  return index >= 0 ? index : 0;
+}
+
+async function clipCandidate(candidate: HitCandidate): Promise<HitCandidate | null> {
+  const fiber =
+    candidate.target.source === 'fiber'
+      ? candidate.target.fiber
+      : fiberFromPublicInstanceSafe(candidate.target.instance.ref.current);
+  const clipped = await clipToScrollViewports(fiber, candidate.rect as VisibleRect);
+  if (!clipped) return null;
+  return { ...candidate, rect: clipped, area: areaOf(clipped) };
+}
+
+/**
+ * Hit-test window coordinates.
+ *
+ * Prefers the native topmost host and walks out to identifiable ancestors.
+ * Falls back to clipped geometry when native hit-testing is unavailable or
+ * lands on a covered screen. A visible native hit with no identifiable
+ * ancestor returns no candidates: geometry ignores stacking order and would
+ * offer whatever lies underneath the tap.
  */
 export async function hitTestAt(
   x: number,
@@ -107,19 +361,73 @@ export async function hitTestAt(
     instanceFilter?: InstanceFilter;
     measure?: MeasureInstance;
     instances?: AutoAnchorInstance[];
+    hostAtPoint?: HostAtPoint;
   },
 ): Promise<HitCandidate[]> {
-  const filter = opts?.instanceFilter ?? isInstanceOnVisibleScreen;
+  const filter = opts?.instanceFilter ?? createVisibleInstanceFilter();
   const measure = opts?.measure ?? measureInstanceRect;
   const pool = (opts?.instances ?? autoAnchorRegistry.allInstances()).filter(filter);
   autoAnchorRegistry.refreshLiveContent(pool);
 
+  const injected = opts?.hostAtPoint;
+  const locate = injected ?? (opts?.measure === undefined ? hostAtPoint : null);
+  if (locate) {
+    try {
+      const host = await locate(x, y);
+      if (host && isFiberOnVisibleScreen(host)) {
+        const chain = candidateChain(host, registryMap(pool));
+        return chain.length > 0 ? candidatesFromChain(chain, measure) : [];
+      }
+    } catch {
+      // Native hit-testing is optional; geometry still runs.
+    }
+  }
+
+  return geometryHits(x, y, pool, measure);
+}
+
+async function geometryHits(
+  x: number,
+  y: number,
+  pool: AutoAnchorInstance[],
+  measure: MeasureInstance,
+): Promise<HitCandidate[]> {
+  const root = fiberScanRoot.getFiber();
+  const modal = root ? topmostVisibleModalHost(root) : null;
+  const byFiber = registryMap(pool);
+
+  const scoped = modal
+    ? pool.filter((inst) => {
+        const fiber = fiberFromPublicInstanceSafe(inst.ref.current);
+        if (!fiber) return true;
+        return fiberIsUnder(fiber, modal);
+      })
+    : pool;
+
+  const targets: PickTarget[] = scoped.map((instance) => ({ source: 'registry', instance }));
+  if (root) {
+    const scanRoot = modal ?? root;
+    walkVisibleFibers(scanRoot, (fiber) => {
+      if (!isHostFiber(fiber)) return;
+      if (byFiber.has(fiber)) return;
+      const descriptor = fiberTargetDescriptor(fiber);
+      if (!descriptor) return;
+      if (modal && !fiberIsUnder(fiber, modal)) return;
+      targets.push({ source: 'fiber', fiber, descriptor });
+    });
+  }
+
   const measured = await Promise.all(
-    pool.map(async (instance) => {
-      const rect = await measure(instance);
-      if (!rect) return null;
-      if (!pointInRect(x, y, rect)) return null;
-      return { instance, rect, area: areaOf(rect) };
+    targets.map(async (target) => {
+      const raw =
+        target.source === 'registry'
+          ? await measure(target.instance)
+          : await measureFiberRect(target.fiber);
+      if (!raw) return null;
+      const clipped = await clipCandidate({ target, rect: raw, area: areaOf(raw) });
+      if (!clipped) return null;
+      if (!pointInRect(x, y, clipped.rect)) return null;
+      return clipped;
     }),
   );
 

package/src/authoring/hostAtPoint.ts

@@ -0,0 +1,247 @@
+/**
+ * Topmost host fiber under a window point.
+ *
+ * Spike (RN 0.86 source, not a device run):
+ * - `findNodeAtPoint` is registered unconditionally in `UIManagerBinding.cpp`,
+ *   and `ReactFabric-prod.js` already calls `nativeFabricUIManager`. The DEV
+ *   inspector is the only JS caller, but the native method is present in
+ *   release builds. Call it directly and feature-detect.
+ * - `pointerEvents="none"` fails `canBeTouchTarget` and
+ *   `canChildrenBeTouchTarget`, so a decorative backdrop is not returned
+ *   (see `FindNodeAtPointTest.overlappingViewsWithParentPointerEventsNone`).
+ * - Scroll views subtract `contentOffset` in `getContentOriginOffset`, so
+ *   content scrolled out of the viewport is not a hit.
+ * - Modal content lives under `ModalHostView` in the same shadow tree, but
+ *   its frame is relative to the modal window. If the root hit misses the
+ *   visible modal's subtree, retry rooted at that modal.
+ * - Screens a navigator covers stay laid out in the shadow tree, on top of the
+ *   visible one, and react-native-screens clears their zIndex, so the
+ *   last-mounted sibling wins. After visiting a later tab, a tap on an earlier
+ *   one lands on the hidden tab. Retry rooted at the visible screen.
+ */
+import { UIManager } from 'react-native';
+
+import { fiberScanRoot } from '../anchors/fiber/FiberScanRoot';
+import {
+  type AnyFiber,
+  coerceToFiber,
+  getStateNode,
+  isReactFiber,
+  nativeTagFromHostFiber,
+  resolveCurrentFiber,
+} from '../anchors/fiber/fiberInternals';
+import { nearestHostDescendant } from '../anchors/fiber/findAnchorFiber';
+import { createHostFiberIndex } from '../anchors/fiber/indexHostFibers';
+import { measureHostFiber } from '../anchors/fiber/measureHostFiber';
+import { fiberIsUnder, topmostVisibleModalHost } from '../anchors/fiber/visibleRect';
+import { isFiberOnVisibleScreen, screensCoveringFiber } from '../anchors/fiber/visibleScreens';
+
+const HIT_TIMEOUT_MS = 400;
+
+/** Re-hits allowed while a hit keeps landing on a covered screen (one per nesting level). */
+const MAX_COVERED_SCREEN_RETRIES = 4;
+
+interface FabricHitManager {
+  findNodeAtPoint: (
+    node: unknown,
+    locationX: number,
+    locationY: number,
+    callback: (instanceHandle: unknown) => void,
+  ) => void;
+  measure?: (
+    node: unknown,
+    callback: (
+      x: number,
+      y: number,
+      width: number,
+      height: number,
+      pageX: number,
+      pageY: number,
+    ) => void,
+  ) => void;
+}
+
+interface PaperHitManager {
+  findSubviewIn: (
+    reactTag: number,
+    point: [number, number],
+    callback: (
+      nativeViewTag: number,
+      left: number,
+      top: number,
+      width: number,
+      height: number,
+    ) => void,
+  ) => void;
+}
+
+function fabricManager(): FabricHitManager | null {
+  const manager = (globalThis as { nativeFabricUIManager?: FabricHitManager })
+    .nativeFabricUIManager;
+  if (!manager || typeof manager.findNodeAtPoint !== 'function') return null;
+  return manager;
+}
+
+function paperManager(): PaperHitManager | null {
+  const manager = UIManager as unknown as PaperHitManager;
+  if (!manager || typeof manager.findSubviewIn !== 'function') return null;
+  return manager;
+}
+
+function shadowNodeFromHost(fiber: AnyFiber): unknown {
+  const stateNode = getStateNode(fiber);
+  if (!stateNode || typeof stateNode !== 'object') return null;
+  const node = stateNode as { node?: unknown; canonical?: { node?: unknown } };
+  return node.node ?? node.canonical?.node ?? null;
+}
+
+function fiberFromInstanceHandle(handle: unknown): AnyFiber | null {
+  if (isReactFiber(handle)) {
+    try {
+      return resolveCurrentFiber(handle);
+    } catch {
+      return handle;
+    }
+  }
+  const coerced = coerceToFiber(handle);
+  if (coerced) return coerced;
+  if (!handle || typeof handle !== 'object') return null;
+  const record = handle as {
+    stateNode?: { canonical?: { internalInstanceHandle?: unknown } };
+  };
+  const nested = record.stateNode?.canonical?.internalInstanceHandle;
+  if (isReactFiber(nested)) return resolveCurrentFiber(nested);
+  return coerceToFiber(nested);
+}
+
+function withTimeout<T>(run: (settle: (value: T) => void) => void, fallback: T): Promise<T> {
+  return new Promise((resolve) => {
+    let settled = false;
+    const timer = setTimeout(() => {
+      if (settled) return;
+      settled = true;
+      resolve(fallback);
+    }, HIT_TIMEOUT_MS);
+    const settle = (value: T) => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timer);
+      resolve(value);
+    };
+    try {
+      run(settle);
+    } catch {
+      settle(fallback);
+    }
+  });
+}
+
+function measureOrigin(fiber: AnyFiber): Promise<{ x: number; y: number } | null> {
+  return withTimeout<{ x: number; y: number } | null>((settle) => {
+    measureHostFiber(fiber, (x, y, width, height) => {
+      if (width <= 0 && height <= 0 && x === 0 && y === 0) {
+        settle(null);
+        return;
+      }
+      settle({ x, y });
+    });
+  }, null);
+}
+
+/**
+ * `node`'s origin within its parent. `findNodeAtPoint` tests the point against
+ * `node`'s own frame, which is in parent coordinates. Zero when `measure` is
+ * unavailable, which is exact for a node at its parent's origin.
+ */
+function originInParent(
+  manager: FabricHitManager,
+  node: unknown,
+): Promise<{ x: number; y: number }> {
+  const measure = manager.measure;
+  const none = { x: 0, y: 0 };
+  if (typeof measure !== 'function') return Promise.resolve(none);
+  return withTimeout<{ x: number; y: number }>((settle) => {
+    measure.call(manager, node, (x, y) => {
+      settle(Number.isFinite(x) && Number.isFinite(y) ? { x, y } : none);
+    });
+  }, none);
+}
+
+async function hitFabric(rootHost: AnyFiber, x: number, y: number): Promise<AnyFiber | null> {
+  const manager = fabricManager();
+  const node = shadowNodeFromHost(rootHost);
+  if (!manager || node == null) return null;
+  const origin = await measureOrigin(rootHost);
+  if (!origin) return null;
+  const inParent = await originInParent(manager, node);
+  const handle = await withTimeout<unknown>((settle) => {
+    manager.findNodeAtPoint(node, x - origin.x + inParent.x, y - origin.y + inParent.y, settle);
+  }, null);
+  if (!handle) return null;
+  return fiberFromInstanceHandle(handle);
+}
+
+async function hitPaper(rootHost: AnyFiber, x: number, y: number): Promise<AnyFiber | null> {
+  const manager = paperManager();
+  const tag = nativeTagFromHostFiber(rootHost);
+  if (!manager || tag === undefined) return null;
+  // `findSubviewIn` hit-tests in the view's own coordinates (iOS `hitTest:`,
+  // Android `TouchTargetHelper`). The window root sits at the window origin; a
+  // nested screen does not. Unmeasurable falls back to the window point.
+  const origin = (await measureOrigin(rootHost)) ?? { x: 0, y: 0 };
+  const nativeTag = await withTimeout<number | null>((settle) => {
+    manager.findSubviewIn(tag, [x - origin.x, y - origin.y], (found) => {
+      settle(typeof found === 'number' ? found : null);
+    });
+  }, null);
+  if (nativeTag == null) return null;
+  const index = createHostFiberIndex(fiberScanRoot.getFiber());
+  return index.byNativeTag.get(nativeTag) ?? null;
+}
+
+async function hitUnder(rootHost: AnyFiber, x: number, y: number): Promise<AnyFiber | null> {
+  const fabric = await hitFabric(rootHost, x, y);
+  if (fabric) return fabric;
+  return hitPaper(rootHost, x, y);
+}
+
+/** {@link hitUnder}, re-hit from the visible screen while the hit lands on a covered one. */
+async function hitOnVisibleScreen(
+  rootHost: AnyFiber,
+  x: number,
+  y: number,
+): Promise<AnyFiber | null> {
+  let hit = await hitUnder(rootHost, x, y);
+  for (let attempt = 0; hit && attempt < MAX_COVERED_SCREEN_RETRIES; attempt += 1) {
+    const screens = screensCoveringFiber(hit);
+    if (screens.length === 0) return hit;
+    let next: AnyFiber | null = null;
+    for (const screen of screens) {
+      next = await hitUnder(screen, x, y);
+      if (next) break;
+    }
+    hit = next;
+  }
+  // Still on a covered screen: report no hit so the caller uses geometry.
+  return hit && isFiberOnVisibleScreen(hit) ? hit : null;
+}
+
+/**
+ * Host fiber drawn on top at window coordinates, or null when neither Fabric
+ * nor Paper hit-testing is available.
+ */
+export async function hostAtPoint(x: number, y: number): Promise<AnyFiber | null> {
+  const root = fiberScanRoot.getFiber();
+  if (!root) return null;
+  const rootHost = nearestHostDescendant(root);
+  if (!rootHost) return null;
+
+  let hit = await hitOnVisibleScreen(rootHost, x, y);
+  const modal = topmostVisibleModalHost(root);
+  const modalHost = modal ? nearestHostDescendant(modal) : null;
+  if (modalHost && (!hit || !fiberIsUnder(hit, modal))) {
+    const modalHit = await hitOnVisibleScreen(modalHost, x, y);
+    if (modalHit) hit = modalHit;
+  }
+  return hit;
+}