@pinagent/react-native 0.2.2 → 0.2.4

package/dist/native/inspector.d.ts

@@ -57,10 +57,46 @@ interface RawInspectorData {
     } | null;
     /** Some versions surface the resolved source straight on the payload. */
     source?: RawFiberLike | null;
-    /** The tapped host view's props — where `data-pa-loc` lands. */
+    /**
+     * NOT the tapped leaf's props. RN fills this from the nearest authored
+     * *composite owner's* FIRST host descendant (`getHostProps` →
+     * `findCurrentHostFiber`) — i.e. that component's outermost view — so a tap
+     * on a nested child surfaces its container here, not the element under the
+     * finger. Used only as a fallback; `closestPublicInstance` pins the leaf.
+     */
     props?: RawProps;
+    /**
+     * The public instance of the host view actually under the finger — the
+     * deepest hit-tested node. Fabric only; Paper passes a numeric view tag we
+     * can't bridge, so we degrade to `props`. Its fiber's `memoizedProps` carry
+     * the leaf's own `data-pa-loc`. See {@link tappedLeafLoc}.
+     */
+    closestPublicInstance?: unknown;
+}
+interface FiberLike {
+    tag?: number;
+    return?: FiberLike | null;
+    /** First child / next sibling — the render-tree walk for the measure fallback. */
+    child?: FiberLike | null;
+    sibling?: FiberLike | null;
+    stateNode?: {
+        canonical?: {
+            publicInstance?: unknown;
+        };
+    } | null;
+    /** Host fibers carry the committed props — where `data-pa-loc` rides. */
+    memoizedProps?: RawProps;
 }
 type Loc = NonNullable<PickResult['loc']>;
+/**
+ * Walk a host fiber's render-tree parent (`return`) chain, returning the first
+ * `data-pa-loc` found on a fiber's `memoizedProps` — the tapped element itself,
+ * or, when that exact host is untagged (a 3rd-party / RN-internal view), the
+ * nearest authored element enclosing it. Capped against a malformed `return`
+ * cycle. Pure over a fiber-like chain; exported for unit testing without an RN
+ * runtime.
+ */
+export declare function nearestPaLocUp(fiber: FiberLike | null): Loc | null;
 /**
  * Keep only authored React components in the breadcrumb. Two kinds of noise
  * are hidden because clicking them is meaningless — they map to no source the
@@ -104,6 +140,48 @@ export declare function crumbsOf(data: RawInspectorData): RawCrumb[];
  * stuck measure can't hang the pick).
  */
 export declare function measureFrame(measure?: (cb: RawMeasureCb) => void): Promise<Frame | null>;
+/** True when window-coordinate point (x, y) lies within frame `f`. */
+export declare function frameContains(f: Frame, x: number, y: number): boolean;
+/** A measure-resolved hit: the deepest tagged host whose frame holds the tap. */
+interface MeasuredHit {
+    fiber: FiberLike;
+    loc: Loc;
+    name: string | null;
+    frame: Frame;
+}
+/**
+ * Measure-based hit-test — the fallback for when RN's geometric
+ * `findNodeAtPoint` can't descend to the tapped element.
+ *
+ * `react-native-pager-view` (and anything that hosts content in a native
+ * container) detaches a page's *native* views from the Fabric shadow tree
+ * `findNodeAtPoint` walks, so the native hit-test bottoms out at the page
+ * wrapper and never reaches the widget. But the React **fiber** tree is intact
+ * and the widgets are on-screen, hence measurable — so we hit-test ourselves:
+ * DFS the fiber subtree under `root`, measuring each host, and keep the DEEPEST
+ * tagged host whose window frame contains the tap.
+ *
+ * Pruned like the browser's `elementFromPoint`: a host whose frame misses the
+ * point can't have a (non-overflowing) descendant that hits, so its subtree is
+ * skipped. Composite / fragment fibers carry no frame, so we always descend
+ * through them to reach their hosts. `measure` is injected so the traversal is
+ * unit-testable without an RN runtime.
+ */
+export declare function measureHitTest(root: FiberLike | null, x: number, y: number, measure: (fiber: FiberLike) => Promise<Frame | null>): Promise<MeasuredHit | null>;
+/**
+ * The chain of distinctly-located tagged hosts from `leaf` up to the root,
+ * root-first (matching {@link crumbsOf}'s order). Built from the fiber `return`
+ * chain for the measure-fallback breadcrumb. Consecutive hosts sharing a
+ * `data-pa-loc` (a forwarding wrapper re-emitting the call site) collapse to a
+ * single crumb; names come from the babel plugin's `data-pa-comp`. Pure over a
+ * fiber-like chain (capped against a malformed `return` cycle); exported for
+ * unit testing.
+ */
+export declare function taggedAncestors(leaf: FiberLike | null): {
+    name: string;
+    loc: Loc;
+    fiber: FiberLike;
+}[];
 /**
  * Resolve a tap (in window coordinates) to a {@link PickResult}.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pinagent/react-native",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "license": "Apache-2.0",
   "description": "React Native & Expo plugin for Pinagent — tap a view, leave a comment, and a coding agent fixes it with file:line + a screenshot. The native widget ships as source for Metro; the dev-server middleware and Babel source-tagging plugin are built for Node.",
   "keywords": [

package/src/native/inspector.ts

@@ -80,8 +80,21 @@ interface RawInspectorData {
   closestInstance?: { _debugSource?: RawFiberLike } | null;
   /** Some versions surface the resolved source straight on the payload. */
   source?: RawFiberLike | null;
-  /** The tapped host view's props — where `data-pa-loc` lands. */
+  /**
+   * NOT the tapped leaf's props. RN fills this from the nearest authored
+   * *composite owner's* FIRST host descendant (`getHostProps` →
+   * `findCurrentHostFiber`) — i.e. that component's outermost view — so a tap
+   * on a nested child surfaces its container here, not the element under the
+   * finger. Used only as a fallback; `closestPublicInstance` pins the leaf.
+   */
   props?: RawProps;
+  /**
+   * The public instance of the host view actually under the finger — the
+   * deepest hit-tested node. Fabric only; Paper passes a numeric view tag we
+   * can't bridge, so we degrade to `props`. Its fiber's `memoizedProps` carry
+   * the leaf's own `data-pa-loc`. See {@link tappedLeafLoc}.
+   */
+  closestPublicInstance?: unknown;
 }
 
 let cachedFn: InspectorFn | null | undefined;
@@ -127,7 +140,12 @@ const HOST_COMPONENT = 5;
 interface FiberLike {
   tag?: number;
   return?: FiberLike | null;
+  /** First child / next sibling — the render-tree walk for the measure fallback. */
+  child?: FiberLike | null;
+  sibling?: FiberLike | null;
   stateNode?: { canonical?: { publicInstance?: unknown } } | null;
+  /** Host fibers carry the committed props — where `data-pa-loc` rides. */
+  memoizedProps?: RawProps;
 }
 
 let cachedGetHandle: ((instance: unknown) => FiberLike | null) | null | undefined;
@@ -209,14 +227,63 @@ function paLocOf(props: RawProps): Loc | null {
   return parsePaLoc(props?.['data-pa-loc']);
 }
 
+/** The enclosing component name the babel plugin records as `data-pa-comp`. */
+function compOf(props: RawProps): string | null {
+  const c = props?.['data-pa-comp'];
+  return typeof c === 'string' && c.length > 0 ? c : null;
+}
+
+/**
+ * Walk a host fiber's render-tree parent (`return`) chain, returning the first
+ * `data-pa-loc` found on a fiber's `memoizedProps` — the tapped element itself,
+ * or, when that exact host is untagged (a 3rd-party / RN-internal view), the
+ * nearest authored element enclosing it. Capped against a malformed `return`
+ * cycle. Pure over a fiber-like chain; exported for unit testing without an RN
+ * runtime.
+ */
+export function nearestPaLocUp(fiber: FiberLike | null): Loc | null {
+  for (let i = 0; fiber && i < 10_000; i++) {
+    const loc = paLocOf(fiber.memoizedProps);
+    if (loc) return loc;
+    fiber = fiber.return ?? null;
+  }
+  return null;
+}
+
+/**
+ * The source of the host view actually under the finger.
+ *
+ * RN's `data.props` is NOT the tapped leaf — it's the nearest authored
+ * composite owner's first host descendant (its outer container), so a tap on a
+ * nested child resolves to its parent. To land on the leaf, start from the
+ * hit-tested host (`data.closestPublicInstance`), bridge it to its fiber, and
+ * walk the render-tree parents for the nearest `data-pa-loc`. This mirrors the
+ * web widget walking up the DOM from the clicked node.
+ *
+ * Returns null when the instance can't be bridged (Paper, which surfaces only a
+ * numeric view tag) — `pickLoc` then falls back to `data.props`.
+ */
+function tappedLeafLoc(data: RawInspectorData): Loc | null {
+  return nearestPaLocUp(getHandleFromPublicInstance(data.closestPublicInstance));
+}
+
 /**
  * Resolve the source location. Preferred path: the build-time `data-pa-loc`
- * prop our babel plugin splices on (read from the tapped host view's props,
- * then from each owner outward). Fallback: RN's legacy `_debugSource` /
- * inspector `source` field, for older RN/React where they still exist.
+ * prop our babel plugin splices on — read first from the host view actually
+ * under the finger ({@link tappedLeafLoc}), then from `data.props` and each
+ * owner outward. Fallback: RN's legacy `_debugSource` / inspector `source`
+ * field, for older RN/React where they still exist.
  */
 function pickLoc(data: RawInspectorData, projectRoot: string): Loc | null {
-  // 1. `data-pa-loc` on the directly tapped host view.
+  // 0. The host view actually under the finger. MUST come first: `data.props`
+  //    (step 1) is the nearest composite owner's first host — an outer
+  //    container — so without this a tap on a nested child resolves to its
+  //    parent (e.g. a card's content tapped, but its screen layout returned).
+  const leaf = tappedLeafLoc(data);
+  if (leaf) return leaf;
+
+  // 1. `data-pa-loc` on `data.props` — the nearest authored owner's first host.
+  //    Fallback for when the touched host can't be bridged to a fiber (Paper).
   const direct = paLocOf(data.props);
   if (direct) return direct;
 
@@ -371,6 +438,132 @@ export function measureFrame(measure?: (cb: RawMeasureCb) => void): Promise<Fram
   });
 }
 
+/** True when window-coordinate point (x, y) lies within frame `f`. */
+export function frameContains(f: Frame, x: number, y: number): boolean {
+  return x >= f.x && y >= f.y && x <= f.x + f.width && y <= f.y + f.height;
+}
+
+/** A measure-resolved hit: the deepest tagged host whose frame holds the tap. */
+interface MeasuredHit {
+  fiber: FiberLike;
+  loc: Loc;
+  name: string | null;
+  frame: Frame;
+}
+
+/**
+ * Measure a host fiber's on-screen rect via its public instance's
+ * `measureInWindow` (window coordinates). Guarded + timed-out like
+ * {@link measureFrame}; resolves null for a non-host fiber, a missing instance,
+ * or a zero-size / never-firing measure. The RN-runtime half of the measure
+ * fallback — not unit-tested (see {@link measureHitTest}, which injects this).
+ */
+function measureFiberInWindow(fiber: FiberLike): Promise<Frame | null> {
+  const inst = fiber.stateNode?.canonical?.publicInstance as
+    | { measureInWindow?: (cb: (x: number, y: number, w: number, h: number) => void) => void }
+    | undefined;
+  const measure = inst?.measureInWindow;
+  if (typeof measure !== 'function') return Promise.resolve(null);
+  return new Promise((resolve) => {
+    let settled = false;
+    const finish = (f: Frame | null) => {
+      if (!settled) {
+        settled = true;
+        resolve(f);
+      }
+    };
+    const timer = setTimeout(() => finish(null), 120);
+    try {
+      measure.call(inst, (x, y, width, height) => {
+        clearTimeout(timer);
+        finish(width > 0 || height > 0 ? { x, y, width, height } : null);
+      });
+    } catch {
+      clearTimeout(timer);
+      finish(null);
+    }
+  });
+}
+
+/**
+ * Measure-based hit-test — the fallback for when RN's geometric
+ * `findNodeAtPoint` can't descend to the tapped element.
+ *
+ * `react-native-pager-view` (and anything that hosts content in a native
+ * container) detaches a page's *native* views from the Fabric shadow tree
+ * `findNodeAtPoint` walks, so the native hit-test bottoms out at the page
+ * wrapper and never reaches the widget. But the React **fiber** tree is intact
+ * and the widgets are on-screen, hence measurable — so we hit-test ourselves:
+ * DFS the fiber subtree under `root`, measuring each host, and keep the DEEPEST
+ * tagged host whose window frame contains the tap.
+ *
+ * Pruned like the browser's `elementFromPoint`: a host whose frame misses the
+ * point can't have a (non-overflowing) descendant that hits, so its subtree is
+ * skipped. Composite / fragment fibers carry no frame, so we always descend
+ * through them to reach their hosts. `measure` is injected so the traversal is
+ * unit-testable without an RN runtime.
+ */
+export async function measureHitTest(
+  root: FiberLike | null,
+  x: number,
+  y: number,
+  measure: (fiber: FiberLike) => Promise<Frame | null>,
+): Promise<MeasuredHit | null> {
+  let best: MeasuredHit | null = null;
+  let bestDepth = -1;
+
+  async function visitChildren(parent: FiberLike, depth: number): Promise<void> {
+    let n = 0;
+    for (let node = parent.child ?? null; node && n < 100_000; node = node.sibling ?? null, n++) {
+      await visitNode(node, depth);
+    }
+  }
+
+  async function visitNode(node: FiberLike, depth: number): Promise<void> {
+    if (node.tag === HOST_COMPONENT) {
+      const frame = await measure(node);
+      // A host that doesn't contain the point prunes its whole subtree.
+      if (!frame || !frameContains(frame, x, y)) return;
+      const loc = paLocOf(node.memoizedProps);
+      // Deepest tagged host wins; on a tie the later (over-painted) sibling does.
+      if (loc && depth >= bestDepth) {
+        best = { fiber: node, loc, name: compOf(node.memoizedProps), frame };
+        bestDepth = depth;
+      }
+    }
+    await visitChildren(node, depth + 1);
+  }
+
+  if (root) await visitNode(root, 0);
+  return best;
+}
+
+/**
+ * The chain of distinctly-located tagged hosts from `leaf` up to the root,
+ * root-first (matching {@link crumbsOf}'s order). Built from the fiber `return`
+ * chain for the measure-fallback breadcrumb. Consecutive hosts sharing a
+ * `data-pa-loc` (a forwarding wrapper re-emitting the call site) collapse to a
+ * single crumb; names come from the babel plugin's `data-pa-comp`. Pure over a
+ * fiber-like chain (capped against a malformed `return` cycle); exported for
+ * unit testing.
+ */
+export function taggedAncestors(
+  leaf: FiberLike | null,
+): { name: string; loc: Loc; fiber: FiberLike }[] {
+  const out: { name: string; loc: Loc; fiber: FiberLike }[] = [];
+  const seen = new Set<string>();
+  for (let f = leaf, i = 0; f && i < 10_000; f = f.return ?? null, i++) {
+    if (f.tag !== HOST_COMPONENT) continue;
+    const loc = paLocOf(f.memoizedProps);
+    if (!loc) continue;
+    const key = `${loc.file}:${loc.line}:${loc.col}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push({ name: compOf(f.memoizedProps) ?? 'View', loc, fiber: f });
+  }
+  return out.reverse();
+}
+
 /**
  * Resolve a tap (in window coordinates) to a {@link PickResult}.
  *
@@ -408,42 +601,62 @@ export function resolvePick(
     try {
       fn(inspectedView, x, y, (data) => {
         clearTimeout(timer);
-        const frame = data.frame
-          ? {
-              x: data.frame.left,
-              y: data.frame.top,
-              width: data.frame.width,
-              height: data.frame.height,
+        void (async () => {
+          const frame = data.frame
+            ? {
+                x: data.frame.left,
+                y: data.frame.top,
+                width: data.frame.width,
+                height: data.frame.height,
+              }
+            : null;
+          const rawCrumbs = crumbsOf(data);
+          const loc = pickLoc(data, projectRoot);
+          const nameChain = nameChainOf(data);
+
+          // Measure fallback: when RN's native `findNodeAtPoint` couldn't
+          // descend to a tagged element (`tappedLeafLoc` is null — e.g.
+          // react-native-pager-view detaches its pages from the Fabric shadow
+          // tree the hit-test walks, so it bottoms out at the page wrapper),
+          // resolve the tap by measuring the still-intact fiber subtree under
+          // the touched host. Skipped entirely when the native pick already
+          // found the leaf, so every non-pager screen keeps its existing path.
+          if (!tappedLeafLoc(data)) {
+            const root = getHandleFromPublicInstance(data.closestPublicInstance);
+            const hit = root ? await measureHitTest(root, x, y, measureFiberInWindow) : null;
+            if (hit) {
+              const ancestors = taggedAncestors(hit.fiber);
+              const crumbFrames = await Promise.all(
+                ancestors.map((a) => measureFiberInWindow(a.fiber)),
+              );
+              done({
+                loc: hit.loc,
+                nameChain: ancestors.map((a) => a.name),
+                chain: ancestors.map((a, i) => ({
+                  name: a.name,
+                  loc: a.loc,
+                  frame: crumbFrames[i] ?? null,
+                })),
+                frame: hit.frame,
+              });
+              return;
             }
-          : null;
-        const rawCrumbs = crumbsOf(data);
-        const loc = pickLoc(data, projectRoot);
-        const nameChain = nameChainOf(data);
-        // Measure each crumb so pressing one can move the on-screen highlight
-        // to that ancestor. Concurrent, each guarded — adds ~one measure pass.
-        Promise.all(rawCrumbs.map((c) => measureFrame(c.measure)))
-          .then((frames) => {
-            done({
-              loc,
-              nameChain,
-              chain: rawCrumbs.map((c, i) => ({
-                name: c.name,
-                loc: c.loc,
-                frame: frames[i] ?? null,
-              })),
-              frame,
-            });
-          })
-          .catch(() => {
-            // Measuring failed wholesale — still return the pick without
-            // per-crumb frames rather than hang.
-            done({
-              loc,
-              nameChain,
-              chain: rawCrumbs.map((c) => ({ name: c.name, loc: c.loc, frame: null })),
-              frame,
-            });
+          }
+
+          // Native pick: measure each crumb so pressing one can move the
+          // on-screen highlight to that ancestor. Concurrent, each guarded.
+          const frames = await Promise.all(rawCrumbs.map((c) => measureFrame(c.measure)));
+          done({
+            loc,
+            nameChain,
+            chain: rawCrumbs.map((c, i) => ({
+              name: c.name,
+              loc: c.loc,
+              frame: frames[i] ?? null,
+            })),
+            frame,
           });
+        })().catch(() => done({ loc: null, nameChain: [], chain: [], frame: null }));
       });
     } catch {
       clearTimeout(timer);