@buoy-gg/highlight-updates 7.0.26 → 7.0.28

package/lib/commonjs/highlight-updates/utils/RenderTracker.js

@@ -14,6 +14,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.RenderTracker = void 0;
 var _ViewTypeMapper = require("./ViewTypeMapper");
 var _PerformanceLogger = require("./PerformanceLogger");
+var _namedComposite = require("./namedComposite");
 /**
  * Debug logging levels for render cause detection.
  * Controls verbosity of console output for debugging "Why Did You Render" feature.
@@ -72,7 +73,8 @@ class RenderTrackerSingleton {
     // Debug settings
     debugLogLevel: "off",
     // Dev tools visibility - exclude by default
-    excludeDevTools: true
+    excludeDevTools: true,
+    showHostViews: false
   };
 
   // Batch mode: defer notifyListeners until endBatch is called
@@ -421,6 +423,9 @@ class RenderTrackerSingleton {
    */
   getFilteredRenders(searchText = "") {
     let renders = this.getRenders();
+    if (!this.settings.showHostViews) {
+      renders = renders.filter(_namedComposite.isNamedComposite);
+    }
 
     // Apply search filter
     if (searchText.trim()) {

package/lib/commonjs/highlight-updates/utils/namedComposite.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isHostViewName = isHostViewName;
+exports.isNamedComposite = isNamedComposite;
+/**
+ * Host views (RCTView / View / Text) drown the Highlight Updates list.
+ * Named composites are what you actually want when asking "what re-rendered?"
+ */
+
+const HOST_NAMES = new Set(["View", "RCTView", "Text", "RCTText", "RawText", "RCTRawText", "VirtualText", "RCTVirtualText", "ScrollView", "RCTScrollView", "RCTScrollContentView", "SafeAreaView", "RCTSafeAreaView", "Pressable", "TouchableOpacity", "Image", "RCTImageView"]);
+
+/**
+ * Fiber names that look like identity but are list chrome / RN internals.
+ * Only provably-anonymous names belong here — real components (CopyButton,
+ * a user's `Copy`…) must stay visible. "Comp Copy"-style truncated
+ * placeholders are handled by the regex in isNamedComposite instead.
+ */
+const PLACEHOLDER_NAMES = new Set(["Unknown", "Anonymous", "CellRenderer", "NativeComponent"]);
+/**
+ * True when this row is a named user composite (or has a testID). Host views
+ * and anonymous "Comp Copy" wrappers return false.
+ */
+function isNamedComposite(r) {
+  if (r.testID && r.testID.trim()) return true;
+  const name = (r.componentName ?? "").trim();
+  if (!name) return false;
+  if (HOST_NAMES.has(name)) return false;
+  if (PLACEHOLDER_NAMES.has(name)) return false;
+  const view = (r.viewType ?? "").trim();
+  if (view && HOST_NAMES.has(view) && name === view) return false;
+  // "Comp Copy" / "1x" style placeholders — no real component identity.
+  if (/^comp(\s|$)/i.test(name)) return false;
+  if (name.startsWith("_")) return false;
+  return true;
+}
+function isHostViewName(name) {
+  return !!name && HOST_NAMES.has(name);
+}

package/lib/commonjs/highlight-updates/utils/screenElements.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.describeScreen = describeScreen;
 exports.tapElement = tapElement;
 var _reactNative = require("react-native");
+var _tapMatch = require("./tapMatch");
 /**
  * On-device screen element discovery + in-JS tap.
  *
@@ -499,9 +500,10 @@ async function describeScreen() {
     if (r) {
       const cx = r.x + r.width / 2;
       const cy = r.y + r.height / 2;
-      // Skip elements entirely off-screen.
+      // Drop previous Expo Router screens (centers well outside the window).
+      // Keep a 10% slack so the floating menu / home-indicator-clipped rows stay.
       if (cy < -screenH * 0.1 || cy > screenH * 1.1 || cx < -screenW * 0.1 || cx > screenW * 1.1) {
-        if (!c.testID) continue;
+        continue;
       }
       tap = {
         x: round2(cx / screenW),
@@ -554,20 +556,24 @@ function round2(n) {
 
 // --- tapElement -----------------------------------------------------------
 
+function fieldsOf(c) {
+  return {
+    nativeTag: c.nativeTag,
+    testID: c.testID,
+    label: c.label,
+    text: c.text,
+    name: c.name
+  };
+}
 function matchScore(c, params) {
-  if (params.nativeTag != null && c.nativeTag === params.nativeTag) return 1000;
-  const q = (params.query ?? params.testID ?? "").trim().toLowerCase();
-  if (!q) return 0;
-  const fields = [c.testID, c.label, c.text, c.name].filter(Boolean).map(s => s.toLowerCase());
-  let best = 0;
-  for (const f of fields) {
-    if (f === q) best = Math.max(best, 100);else if (f.startsWith(q)) best = Math.max(best, 50);else if (f.includes(q)) best = Math.max(best, 25);
-  }
-  // testID exact match should win over a fuzzy name hit.
-  if (params.testID && c.testID && c.testID.toLowerCase() === params.testID.toLowerCase()) {
-    best = Math.max(best, 200);
-  }
-  return best;
+  return (0, _tapMatch.scoreTapMatch)(fieldsOf(c), params);
+}
+function tapPoint(rect, screenW, screenH) {
+  if (!rect || !screenW || !screenH) return undefined;
+  return {
+    x: (rect.x + rect.width / 2) / screenW,
+    y: (rect.y + rect.height / 2) / screenH
+  };
 }
 function makeSyntheticPressEvent(rect) {
   const pageX = rect ? rect.x + rect.width / 2 : 0;
@@ -623,7 +629,28 @@ async function tapElement(params) {
       }))
     };
   }
-  const target = ranked.find(r => isInteractive(r.c)) ?? ranked[0];
+
+  // Measure the top matches so an on-screen DialIcon beats an off-screen nav
+  // chip whose testID happens to contain the same substring.
+  const win = _reactNative.Dimensions.get("window");
+  const screenW = win.width || 1;
+  const screenH = win.height || 1;
+  const top = ranked.slice(0, 15);
+  await Promise.all(top.map(async r => {
+    if (r.c.instance && !r.c.rect) r.c.rect = await measureInstance(r.c.instance);
+  }));
+  for (const r of top) {
+    r.score = (0, _tapMatch.scoreTapMatch)({
+      ...fieldsOf(r.c),
+      tap: tapPoint(r.c.rect, screenW, screenH)
+    }, params);
+  }
+  top.sort((a, b) => b.score - a.score);
+
+  // Fall back to the FULL ranked list for an interactive match — the top-15
+  // re-score is only a tiebreak, and on a busy screen the pressable match can
+  // sit below 15 text-score peers.
+  const target = top.find(r => isInteractive(r.c)) ?? ranked.find(r => isInteractive(r.c)) ?? top[0];
   const c = target.c;
   if (!isInteractive(c)) {
     return {
@@ -642,20 +669,18 @@ async function tapElement(params) {
 
   // Measure the target so we can decide whether to scroll it on-screen (and,
   // for a press, give the synthetic event real coordinates).
-  if (c.instance) c.rect = await measureInstance(c.instance);
+  if (c.instance && !c.rect) c.rect = await measureInstance(c.instance);
 
   // Bring it into view if it's off-screen and scrolling is wanted. The action
   // doesn't NEED this (handlers are invoked directly), but it keeps the element
   // visible for the human watching / a follow-up describe.
   let scrolled = false;
-  if (params.scrollIntoView !== false && c.instance) {
-    const win = _reactNative.Dimensions.get("window");
-    const centerY = c.rect ? c.rect.y + c.rect.height / 2 : null;
-    const offScreen = c.rect == null || centerY < 0 || centerY > win.height;
-    if (offScreen) {
-      scrolled = await scrollIntoView(c.fiber, c.instance, c.stateNode, 80);
-      if (scrolled) c.rect = await measureInstance(c.instance); // fresh coords
-    }
+  // A failed measure (rect == null) counts as off-screen: the node may be in
+  // a virtualized list that hasn't materialized it, and scrolling can help.
+  const offScreen = c.rect == null || !(0, _tapMatch.isRectCenterOnScreen)(c.rect, screenW, screenH);
+  if (offScreen && params.scrollIntoView !== false && c.instance) {
+    scrolled = await scrollIntoView(c.fiber, c.instance, c.stateNode, 80);
+    if (scrolled) c.rect = await measureInstance(c.instance); // fresh coords
   }
   const base = {
     nativeTag: c.nativeTag,

package/lib/commonjs/highlight-updates/utils/tapMatch.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isOnScreenTap = isOnScreenTap;
+exports.isRectCenterOnScreen = isRectCenterOnScreen;
+exports.scoreTapMatch = scoreTapMatch;
+/**
+ * Shared tap-target scoring for describe_screen / tap_element.
+ *
+ * Ranking used to be substring-on-testID only, so `tap: "ASSETS"` preferred
+ * `nav-assets-tool-test` (score 25) over a visible dial icon, and off-screen
+ * Expo Router screens (y > 1) stayed in the candidate list.
+ */
+
+/** True when the measured center is inside the window (10% slack for home-indicator / portal hosts). */
+function isOnScreenTap(tap) {
+  if (!tap) return false;
+  return tap.x >= -0.1 && tap.x <= 1.1 && tap.y >= -0.1 && tap.y <= 1.1;
+}
+
+/**
+ * Point-in-window test in *points* (measureInWindow coords), with slack so
+ * the floating menu and rows clipped at the home indicator still count.
+ * Previous Expo Router screens typically measure at y > 1.2× window height.
+ */
+function isRectCenterOnScreen(rect, screenW, screenH) {
+  if (!rect || screenW <= 0 || screenH <= 0) return false;
+  const cx = rect.x + rect.width / 2;
+  const cy = rect.y + rect.height / 2;
+  const slackX = screenW * 0.1;
+  const slackY = screenH * 0.1;
+  return cx >= -slackX && cx <= screenW + slackX && cy >= -slackY && cy <= screenH + slackY;
+}
+function scoreTapMatch(c, params) {
+  if (params.nativeTag != null && c.nativeTag === params.nativeTag) return 1000;
+  const q = (params.query ?? params.testID ?? "").trim().toLowerCase();
+  if (!q) return 0;
+  const fields = [c.testID, c.label, c.text, c.name].filter(Boolean).map(s => s.toLowerCase());
+  let best = 0;
+  for (const f of fields) {
+    if (f === q) best = Math.max(best, 100);else if (f.startsWith(q)) best = Math.max(best, 50);else if (f.includes(q)) best = Math.max(best, 25);
+  }
+  if (params.testID && c.testID && c.testID.toLowerCase() === params.testID.toLowerCase()) {
+    best = Math.max(best, 200);
+  }
+  if (best === 0) return 0;
+  const id = (c.testID ?? "").toLowerCase();
+  // Dial icons are the thing agents mean when they tap a tool name. (No
+  // penalties for app testID patterns — this ships in the library, and we
+  // don't know consumer apps' naming conventions.)
+  if (id.startsWith("buoy-dial-")) best += 40;
+  if (c.tap) {
+    if (isOnScreenTap(c.tap)) best += 20;else best -= 40;
+  }
+  return best;
+}

package/lib/module/highlight-updates/HighlightUpdatesOverlay.js

@@ -10,7 +10,7 @@
 
 import React, { useEffect, useState, useRef, useCallback, useLayoutEffect } from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { buoyColors } from "@buoy-gg/shared-ui";
+import { night } from "@buoy-gg/shared-ui";
 import HighlightUpdatesController from "./utils/HighlightUpdatesController";
 import { PerformanceLogger, markOverlayRendered } from "./utils/PerformanceLogger";
 import { RenderTracker } from "./utils/RenderTracker";
@@ -252,20 +252,20 @@ const styles = StyleSheet.create({
     position: "absolute",
     borderWidth: 2,
     borderStyle: "dashed",
-    borderColor: buoyColors.primary,
+    borderColor: night.color.accent,
     backgroundColor: "transparent"
   },
   spotlightLabel: {
     position: "absolute",
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderWidth: 1,
-    borderColor: buoyColors.primary,
+    borderColor: night.color.accent,
     paddingHorizontal: 8,
     paddingVertical: 3,
     borderRadius: 4
   },
   spotlightLabelText: {
-    color: buoyColors.primary,
+    color: night.color.accent,
     fontSize: 11,
     fontWeight: "600",
     fontFamily: "monospace"