@buoy-gg/highlight-updates 7.0.41 → 7.0.43

package/README.md

@@ -1,87 +1,27 @@
-# @buoy-gg/highlight-updates
+<div align="center">
 
-[![npm version](https://img.shields.io/npm/v/@buoy-gg/highlight-updates?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/highlight-updates) [![npm downloads](https://img.shields.io/npm/dm/@buoy-gg/highlight-updates?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/highlight-updates)
+# @buoy-gg/highlight-updates
 
 Highlight observed React component updates in development builds and inspect the available render details.
 
-Part of [Buoy](https://github.com/Buoy-gg/buoy). Install the package, complete account setup, and follow the integration steps below.
+<a href="https://buoy.gg/buoy/latest/docs/tools/highlight-updates"><b>Highlight Updates guide</b></a> &nbsp;·&nbsp; <a href="https://buoy.gg">buoy.gg</a> &nbsp;·&nbsp; <a href="https://github.com/Buoy-gg/buoy">All tools</a>
 
-## Install
+[![npm version](https://img.shields.io/npm/v/@buoy-gg/highlight-updates?style=flat-square&labelColor=10302a&color=2a9d78)](https://www.npmjs.com/package/@buoy-gg/highlight-updates) [![npm downloads](https://img.shields.io/npm/dm/@buoy-gg/highlight-updates?style=flat-square&labelColor=10302a&color=2a9d78&label=downloads%2Fmonth)](https://www.npmjs.com/package/@buoy-gg/highlight-updates)
 
-```bash
-npm install @buoy-gg/core @buoy-gg/highlight-updates
-```
+<a href="https://buoy.gg/buoy/latest/docs/tools/highlight-updates"><img src="https://raw.githubusercontent.com/Buoy-gg/buoy/main/.github/readme/tools/highlight-updates.png" alt="Watch the Highlight Updates film on buoy.gg" width="640" /></a>
 
-## Before you start
+</div>
 
-Use a development build with `@buoy-gg/core` and a Free or Pro Buoy account key. From your app’s directory, sign in:
+## Install
 
 ```bash
-npx --package=@buoy-gg/core buoy login
-```
-
-For Expo, initialize Buoy before rendering the menu:
-
-```tsx
-import { Buoy } from "@buoy-gg/core";
-
-Buoy.init({ licenseKey: process.env.EXPO_PUBLIC_BUOY_KEY });
-```
-
-The login command writes the Expo key to `.env.local`. For React Native CLI, pass the key from your app’s environment configuration; React Native does not load `.env.local` automatically. Mount `FloatingDevTools` inside the same providers as your screens and restart the development server after installation. The [Quick Start](https://buoy.gg/buoy/latest/docs/quick-start) shows the complete root component setup.
-
-## Quick start
-
-```tsx
-import { FloatingDevTools } from "@buoy-gg/core";
-
-export default function App() {
-  return (
-    <>
-      <YourApp />
-      <FloatingDevTools />
-    </>
-  );
-}
-```
-
-That's it — the Render Highlighter appears in the floating menu. It's a standalone implementation: no React DevTools connection, no Chrome tab, no Flipper required.
-
-Prefer to drive it yourself?
-
-```tsx
-import { HighlightUpdatesController } from "@buoy-gg/highlight-updates";
-
-HighlightUpdatesController.toggle();
+npm install @buoy-gg/core @buoy-gg/highlight-updates
 ```
 
-## Check the integration
-
-In a development build, open the tool and update a visible component’s state. Confirm that an update is highlighted. Capture depends on React’s development hooks; Pro does not make those hooks available in a release build.
-
-## What you get
+It appears in the menu once installed. You don't need a React DevTools connection.
 
-- **Render overlays with the cause** — observed updates flash a bounding box with the available mount, state, props, or parent-update classification.
-- **Hook value tracking** — when state caused the render, see the before → after values of the exact `useState` or `useReducer` that changed.
-- **Overlay mode** — lightweight real-time highlights while you interact with the app; perfect for spotting unnecessary re-renders.
-- **Modal mode** — full inspector with render history, filtering, and detailed per-render cause breakdowns for deep debugging sessions.
-- **Powers Bench's render capture** — with [`@buoy-gg/perf-monitor`](https://www.npmjs.com/package/@buoy-gg/perf-monitor) installed, benchmark recordings capture per-component render counts and durations.
-- **Filters out the framework noise** — you see your components, not `View`/`Text` internals.
-
-## Desktop & AI
-
-To connect a React Native app to [Buoy Desktop](https://github.com/Buoy-gg/Buoy-Desktop) or MCP, install `@buoy-gg/external-sync` and follow the [Desktop connection guide](https://buoy.gg/buoy/latest/docs/desktop). Sign in to Desktop separately. [MCP setup](https://buoy.gg/buoy/latest/docs/mcp) also requires a process account and Pro access. Available remote actions depend on the tool and app integration.
-
-## Account and plan requirements
-
-Use a Free or Pro Buoy account. History limits and paid features vary by tool; see [pricing](https://buoy.gg/pricing). Production access requires Pro where supported. Development-only hooks and actions remain unavailable in release builds.
+The [Highlight Updates guide](https://buoy.gg/buoy/latest/docs/tools/highlight-updates) covers setup, what it captures and its limits. New to Buoy? Start with the [Quick start](https://buoy.gg/buoy/latest/docs/quick-start).
 
 ---
 
-📚 [Full docs](https://buoy.gg/buoy/latest/docs/tools/highlight-updates) · [All Buoy tools](https://github.com/Buoy-gg/buoy)
-
-Proprietary software. © Buoy LLC. [Terms](https://buoy.gg/terms)
-
-## Web support (unreleased)
-
-Import @buoy-gg/core/web/register before React DOM to capture roots and renders. The shared inspector measures DOM elements. The browser build is available in this checkout and has not been published yet. See the [web setup guide](https://buoy.gg/buoy/latest/docs/web-preview) for registration, dependencies, and browser boundaries.
+<sub>Part of <a href="https://buoy.gg">Buoy</a>, developer tools that live inside your app. Proprietary software. © Buoy LLC. <a href="https://buoy.gg/terms">Terms</a></sub>

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

@@ -1,281 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.HighlightUpdatesOverlay = HighlightUpdatesOverlay;
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _HighlightUpdatesController = _interopRequireDefault(require("./utils/HighlightUpdatesController"));
-var _PerformanceLogger = require("./utils/PerformanceLogger");
-var _RenderTracker = require("./utils/RenderTracker");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * HighlightUpdatesOverlay
- *
- * Renders colored highlight rectangles for components that have updated.
- * Uses View-based rendering (similar to debug-borders) instead of the
- * native DebuggingOverlay component for better compatibility.
- */
-
-// Declare performance API available in React Native's JavaScript environment
-
-// How long highlights stay visible (ms)
-const HIGHLIGHT_DURATION = 1000;
-function HighlightUpdatesOverlay({
-  onBadgePress
-} = {}) {
-  const [highlights, setHighlights] = (0, _react.useState)([]);
-  const [isFrozen, setIsFrozen] = (0, _react.useState)(() => _HighlightUpdatesController.default.getFrozen());
-  const [spotlightTag, setSpotlightTag] = (0, _react.useState)(null);
-  const cleanupTimerRef = (0, _react.useRef)(null);
-  const renderStartTimeRef = (0, _react.useRef)(0);
-  const highlightCountRef = (0, _react.useRef)(0);
-  const frozenRef = (0, _react.useRef)(isFrozen);
-
-  // Keep ref in sync with state for use in interval callback
-  frozenRef.current = isFrozen;
-
-  // Track render start time
-  if (_PerformanceLogger.PerformanceLogger.isEnabled()) {
-    renderStartTimeRef.current = performance.now();
-    highlightCountRef.current = highlights.length;
-  }
-
-  // Measure render completion time using useLayoutEffect (runs after DOM mutations)
-  (0, _react.useLayoutEffect)(() => {
-    if (_PerformanceLogger.PerformanceLogger.isEnabled() && renderStartTimeRef.current > 0 && highlightCountRef.current > 0) {
-      const renderTime = performance.now() - renderStartTimeRef.current;
-      // Mark end-to-end timing (for benchmark recording only - no console logs)
-      (0, _PerformanceLogger.markOverlayRendered)(highlightCountRef.current, renderTime);
-    }
-  });
-
-  // Subscribe to freeze state changes
-  (0, _react.useEffect)(() => {
-    const unsubscribe = _HighlightUpdatesController.default.subscribeToFreeze(frozen => {
-      setIsFrozen(frozen);
-    });
-    return unsubscribe;
-  }, []);
-
-  // Subscribe to filter changes - refresh frozen highlights when filters change
-  (0, _react.useEffect)(() => {
-    const unsubscribe = _RenderTracker.RenderTracker.subscribeToFilters(() => {
-      // When filters change, filter out highlights that no longer match
-      setHighlights(prev => {
-        return prev.filter(highlight => {
-          // Look up the render by nativeTag
-          const render = _RenderTracker.RenderTracker.getRender(String(highlight.id));
-          if (!render) {
-            // If render not found, keep the highlight (it might be from a different source)
-            return true;
-          }
-          // Check if the render should still be shown based on new filters
-          return _RenderTracker.RenderTracker.shouldShowRender(render);
-        });
-      });
-    });
-    return unsubscribe;
-  }, []);
-
-  // Subscribe to spotlight changes - show which component is being viewed in detail
-  (0, _react.useEffect)(() => {
-    _HighlightUpdatesController.default.setSpotlightCallback(tag => {
-      setSpotlightTag(tag);
-    });
-    return () => {
-      _HighlightUpdatesController.default.setSpotlightCallback(null);
-    };
-  }, []);
-
-  // Callback to add new highlights
-  const addHighlights = (0, _react.useCallback)(newRects => {
-    const now = Date.now();
-    const timestampedRects = newRects.map(rect => ({
-      ...rect,
-      timestamp: now
-    }));
-    setHighlights(prev => {
-      // Merge new highlights, replacing any with same id
-      const updated = [...prev];
-      for (const newRect of timestampedRects) {
-        const existingIndex = updated.findIndex(r => r.id === newRect.id);
-        if (existingIndex >= 0) {
-          updated[existingIndex] = newRect;
-        } else {
-          updated.push(newRect);
-        }
-      }
-      return updated;
-    });
-  }, []);
-
-  // Register the callback with the controller
-  (0, _react.useEffect)(() => {
-    _HighlightUpdatesController.default.setHighlightCallback(addHighlights);
-
-    // Cleanup timer to remove old highlights
-    // When frozen, skip cleanup to keep highlights visible indefinitely
-    cleanupTimerRef.current = setInterval(() => {
-      // Check frozen state via ref (doesn't cause re-subscription)
-      if (frozenRef.current) {
-        return; // Skip cleanup when frozen
-      }
-      const now = Date.now();
-      setHighlights(prev => prev.filter(rect => now - rect.timestamp < HIGHLIGHT_DURATION));
-    }, 50);
-    return () => {
-      _HighlightUpdatesController.default.setHighlightCallback(null);
-      if (cleanupTimerRef.current) {
-        clearInterval(cleanupTimerRef.current);
-      }
-    };
-  }, [addHighlights]);
-
-  // Check if badge press handling is enabled (via props or controller)
-  const hasBadgePressHandler = onBadgePress || _HighlightUpdatesController.default.getBadgePressCallback();
-
-  // Handle badge press - navigate to detail view for this component
-  const handleBadgePress = (0, _react.useCallback)(nativeTag => {
-    // First try the prop callback
-    if (onBadgePress) {
-      onBadgePress(nativeTag);
-    } else {
-      // Fall back to controller callback
-      _HighlightUpdatesController.default.handleBadgePress(nativeTag);
-    }
-  }, [onBadgePress]);
-
-  // Get spotlight render info if we have a spotlight active
-  const spotlightRender = spotlightTag ? _RenderTracker.RenderTracker.getRender(String(spotlightTag)) : null;
-
-  // Render nothing if no highlights and no spotlight
-  if (highlights.length === 0 && !spotlightRender?.measurements) {
-    return null;
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.overlay,
-    pointerEvents: "box-none",
-    nativeID: "highlight-updates-overlay",
-    children: [spotlightRender?.measurements && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        pointerEvents: "none",
-        nativeID: "__spotlight_highlight__",
-        style: [styles.spotlightHighlight, {
-          // Offset by border width so border renders outside the component bounds
-          left: spotlightRender.measurements.x - 3,
-          top: spotlightRender.measurements.y - 3,
-          width: spotlightRender.measurements.width + 6,
-          height: spotlightRender.measurements.height + 6
-        }]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        pointerEvents: "none",
-        style: [styles.spotlightLabel, {
-          left: spotlightRender.measurements.x,
-          top: spotlightRender.measurements.y + spotlightRender.measurements.height + 4
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.spotlightLabelText,
-          children: spotlightRender.componentName || spotlightRender.displayName || spotlightRender.viewType
-        })
-      })]
-    }), highlights.map(rect => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      pointerEvents: "box-none",
-      nativeID: `__highlight_rect_${rect.id}__`,
-      style: [styles.highlight, {
-        left: rect.x,
-        top: rect.y,
-        width: rect.width,
-        height: rect.height,
-        borderColor: rect.color
-      }],
-      children: rect.count > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.badge, {
-          backgroundColor: rect.color
-        }],
-        nativeID: `__highlight_badge_${rect.id}__`,
-        pointerEvents: hasBadgePressHandler ? "auto" : "none",
-        hitSlop: {
-          top: 8,
-          bottom: 8,
-          left: 8,
-          right: 8
-        },
-        onStartShouldSetResponder: () => !!hasBadgePressHandler
-        // Fire on touch-DOWN: on churning screens the badge views are
-        // torn down and recreated between finger-down and finger-up
-        // (every highlight event rebuilds the boxes), which kills the
-        // responder before a release can fire. Grant fires immediately.
-        ,
-        onResponderGrant: () => handleBadgePress(rect.id),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.badgeText,
-          nativeID: `__highlight_text_${rect.id}__`,
-          children: rect.count
-        })
-      })
-    }, `highlight-${rect.id}`))]
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  overlay: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 999999,
-    elevation: 999999,
-    borderWidth: 0
-  },
-  highlight: {
-    position: "absolute",
-    borderWidth: 2,
-    borderStyle: "solid",
-    backgroundColor: "transparent"
-  },
-  badge: {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    height: 14,
-    borderRadius: 0,
-    justifyContent: "center",
-    alignItems: "center",
-    paddingHorizontal: 2
-  },
-  badgeText: {
-    color: "#000",
-    fontSize: 9,
-    fontWeight: "bold"
-  },
-  // Spotlight highlight styles
-  spotlightHighlight: {
-    position: "absolute",
-    borderWidth: 2,
-    borderStyle: "dashed",
-    borderColor: _sharedUi.night.color.accent,
-    backgroundColor: "transparent"
-  },
-  spotlightLabel: {
-    position: "absolute",
-    backgroundColor: _sharedUi.night.color.surface,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.accent,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4
-  },
-  spotlightLabelText: {
-    color: _sharedUi.night.color.accent,
-    fontSize: 11,
-    fontWeight: "600",
-    fontFamily: _sharedUi.monoFont
-  }
-});
-var _default = exports.default = HighlightUpdatesOverlay;
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.HighlightUpdatesOverlay=HighlightUpdatesOverlay;exports.default=void 0;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _HighlightUpdatesController=_interopRequireDefault(require("./utils/HighlightUpdatesController"));var _PerformanceLogger=require("./utils/PerformanceLogger");var _RenderTracker=require("./utils/RenderTracker");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(n){return n&&n.__esModule?n:{default:n}}function _interopRequireWildcard(n,d){if("function"==typeof WeakMap)var h=new WeakMap,f=new WeakMap;return(_interopRequireWildcard=function(t,c){if(!c&&t&&t.__esModule)return t;var s,l,i={__proto__:null,default:t};if(null===t||"object"!=typeof t&&"function"!=typeof t)return i;if(s=c?f:h){if(s.has(t))return s.get(t);s.set(t,i)}for(const o in t)"default"!==o&&{}.hasOwnProperty.call(t,o)&&((l=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(t,o))&&(l.get||l.set)?s(i,o,l):i[o]=t[o]);return i})(n,d)}const HIGHLIGHT_DURATION=1e3;function HighlightUpdatesOverlay({onBadgePress:n}={}){const[d,h]=(0,_react.useState)([]);const[f,t]=(0,_react.useState)(()=>_HighlightUpdatesController.default.getFrozen());const[c,s]=(0,_react.useState)(null);const l=(0,_react.useRef)(null);const i=(0,_react.useRef)(0);const o=(0,_react.useRef)(0);const m=(0,_react.useRef)(f);m.current=f;if(_PerformanceLogger.PerformanceLogger.isEnabled()){i.current=performance.now();o.current=d.length}(0,_react.useLayoutEffect)(()=>{if(_PerformanceLogger.PerformanceLogger.isEnabled()&&i.current>0&&o.current>0){const e=performance.now()-i.current;(0,_PerformanceLogger.markOverlayRendered)(o.current,e)}});(0,_react.useEffect)(()=>{const e=_HighlightUpdatesController.default.subscribeToFreeze(a=>{t(a)});return e},[]);(0,_react.useEffect)(()=>{const e=_RenderTracker.RenderTracker.subscribeToFilters(()=>{h(a=>{return a.filter(g=>{const u=_RenderTracker.RenderTracker.getRender(String(g.id));if(!u){return true}return _RenderTracker.RenderTracker.shouldShowRender(u)})})});return e},[]);(0,_react.useEffect)(()=>{_HighlightUpdatesController.default.setSpotlightCallback(e=>{s(e)});return()=>{_HighlightUpdatesController.default.setSpotlightCallback(null)}},[]);const _=(0,_react.useCallback)(e=>{const a=Date.now();const g=e.map(u=>({...u,timestamp:a}));h(u=>{const p=[...u];for(const b of g){const y=p.findIndex(R=>R.id===b.id);if(y>=0){p[y]=b}else{p.push(b)}}return p})},[]);(0,_react.useEffect)(()=>{_HighlightUpdatesController.default.setHighlightCallback(_);l.current=setInterval(()=>{if(m.current){return}const e=Date.now();h(a=>a.filter(g=>e-g.timestamp<HIGHLIGHT_DURATION))},50);return()=>{_HighlightUpdatesController.default.setHighlightCallback(null);if(l.current){clearInterval(l.current)}}},[_]);const v=n||_HighlightUpdatesController.default.getBadgePressCallback();const x=(0,_react.useCallback)(e=>{if(n){n(e)}else{_HighlightUpdatesController.default.handleBadgePress(e)}},[n]);const r=c?_RenderTracker.RenderTracker.getRender(String(c)):null;if(d.length===0&&!r?.measurements){return null}return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.overlay,pointerEvents:"box-none",nativeID:"highlight-updates-overlay",children:[r?.measurements&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",nativeID:"__spotlight_highlight__",style:[styles.spotlightHighlight,{left:r.measurements.x-3,top:r.measurements.y-3,width:r.measurements.width+6,height:r.measurements.height+6}]}),(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[styles.spotlightLabel,{left:r.measurements.x,top:r.measurements.y+r.measurements.height+4}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.spotlightLabelText,children:r.componentName||r.displayName||r.viewType})})]}),d.map(e=>(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"box-none",nativeID:`__highlight_rect_${e.id}__`,style:[styles.highlight,{left:e.x,top:e.y,width:e.width,height:e.height,borderColor:e.color}],children:e.count>0&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.badge,{backgroundColor:e.color}],nativeID:`__highlight_badge_${e.id}__`,pointerEvents:v?"auto":"none",hitSlop:{top:8,bottom:8,left:8,right:8},onStartShouldSetResponder:()=>!!v,onResponderGrant:()=>x(e.id),children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.badgeText,nativeID:`__highlight_text_${e.id}__`,children:e.count})})},`highlight-${e.id}`))]})}const styles=_reactNative.StyleSheet.create({overlay:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:999999,elevation:999999,borderWidth:0},highlight:{position:"absolute",borderWidth:2,borderStyle:"solid",backgroundColor:"transparent"},badge:{position:"absolute",top:0,right:0,height:14,borderRadius:0,justifyContent:"center",alignItems:"center",paddingHorizontal:2},badgeText:{color:"#000",fontSize:9,fontWeight:"bold"},spotlightHighlight:{position:"absolute",borderWidth:2,borderStyle:"dashed",borderColor:_sharedUi.night.color.accent,backgroundColor:"transparent"},spotlightLabel:{position:"absolute",backgroundColor:_sharedUi.night.color.surface,borderWidth:1,borderColor:_sharedUi.night.color.accent,paddingHorizontal:8,paddingVertical:3,borderRadius:4},spotlightLabelText:{color:_sharedUi.night.color.accent,fontSize:11,fontWeight:"600",fontFamily:_sharedUi.monoFont}});var _default=exports.default=HighlightUpdatesOverlay;