@buoy-gg/highlight-updates 7.0.38 → 7.0.39

package/lib/module/highlight-updates/utils/HighlightUpdatesController.js

@@ -1 +1,1916 @@
-"use strict";import{installProfilerInterceptor,uninstallProfilerInterceptor,setComparisonCallback}from"./ProfilerInterceptor";import{findNodeHandle,UIManager,Dimensions,PixelRatio}from"react-native";import{RenderTracker}from"./RenderTracker";import{describeScreen}from"./screenElements";import{scoreTapMatch}from"./tapMatch";import{PerformanceLogger,markEventReceived}from"./PerformanceLogger";import{detectRenderCause,clearRenderCauseState}from"./RenderCauseDetector";import{notifySubscriberCountChange}from"@buoy-gg/shared-ui";import{HIGHLIGHT_OVERLAY_COMPONENTS,HIGHLIGHT_OVERLAY_PREFIXES,OTHER_DEV_TOOLS_COMPONENTS,OTHER_DEV_TOOLS_EXACT,OTHER_DEV_TOOLS_PREFIXES,isCapturingBuoyToolRenders,isPerfMonitorComponentName}from"./devtoolsComponentNames";let globalEnabled=!1,highlightsSuppressed=!1,backgroundTrackingEnabled=!1,initialized=!1,hook=null,highlightCallback=null,badgePressCallback=null,traceUpdatesUnsubscribe=null,isProcessing=!1,isFrozen=!1;const freezeListeners=new Set,stateListeners=new Set,nodeRenderCounts=new Map,COLORS=["#37afa9","#63b19e","#80b393","#97b488","#abb67d","#beb771","#cfb965","#dfba57","#efbb49","#febc38"],DEBUG=!1;function debugLog(e,t){}function getPublicInstance(e){if(!e)return null;const t=e;return t.canonical?.publicInstance?t.canonical.publicInstance:t.canonical&&"function"==typeof t.canonical.measure?t.canonical:"function"==typeof t.measure?t:null}function getNativeTag(e){if(null==e)return null;const t=e;if(null!=t.__nativeTag)return t.__nativeTag;if(null!=t._nativeTag)return t._nativeTag;if(null!=t.nativeTag)return t.nativeTag;if(t.canonical){if(null!=t.canonical.__nativeTag)return t.canonical.__nativeTag;if(null!=t.canonical._nativeTag)return t.canonical._nativeTag;if(null!=t.canonical.nativeTag)return t.canonical.nativeTag}return null}function extractComponentInfo(e){const t=e,n={viewType:"Unknown"};t?.canonical?.viewConfig?.uiViewClassName?n.viewType=t.canonical.viewConfig.uiViewClassName:t?.viewConfig?.uiViewClassName&&(n.viewType=t.viewConfig.uiViewClassName);const a=t?.canonical?.internalInstanceHandle||t?._internalInstanceHandle||t?._internalFiberInstanceHandleDEV,r=t?.canonical?.currentProps,i=t?.canonical?.pendingProps,o=a?.pendingProps,l=a?.memoizedProps;return n.testID=r?.testID||i?.testID||o?.testID||l?.testID||void 0,n.nativeID=r?.nativeID||i?.nativeID||o?.nativeID||l?.nativeID||void 0,n.accessibilityLabel=r?.accessibilityLabel||i?.accessibilityLabel||o?.accessibilityLabel||l?.accessibilityLabel||void 0,n.componentName=getOwningComponentName(a)||void 0,n}function describeNodeForLog(e){const t=e,n=getPublicInstance(e),a={nativeTag:(getNativeTag(e)||getNativeTag(n))??"unknown",type:t?.canonical?"Fabric":"Legacy",hasMeasure:"function"==typeof n?.measure};if(t){if(a.stateNodeKeys=Object.keys(t).slice(0,20),t.node&&(a.nodeKeys=Object.keys(t.node).slice(0,20)),t.viewConfig&&(a.viewConfig={uiViewClassName:t.viewConfig.uiViewClassName,validAttributes:t.viewConfig.validAttributes?Object.keys(t.viewConfig.validAttributes).slice(0,10):void 0}),t.canonical){const e=t.canonical;if(a.canonicalKeys=Object.keys(e).slice(0,20),e.viewConfig&&(a.canonicalViewConfig={uiViewClassName:e.viewConfig.uiViewClassName}),null!=e.nativeTag&&(a.canonicalNativeTag=e.nativeTag),e.internalInstanceHandle){const t=e.internalInstanceHandle;if(a.fiberKeys=Object.keys(t).slice(0,30),t.type&&(a.fiberType="function"==typeof t.type?t.type.name||t.type.displayName||"function":t.type),t.elementType&&(a.fiberElementType="function"==typeof t.elementType?t.elementType.name||t.elementType.displayName||"function":t.elementType),t._debugOwner){const e=t._debugOwner;a.fiberDebugOwner=e.type?.name||e.type?.displayName||e.elementType?.name||"unknown"}t._debugSource&&(a.fiberDebugSource=t._debugSource),null!=t.tag&&(a.fiberTag=t.tag),t.pendingProps&&(t.pendingProps.nativeID&&(a.fiberPendingNativeID=t.pendingProps.nativeID),t.pendingProps.testID&&(a.fiberPendingTestID=t.pendingProps.testID)),t.memoizedProps&&(t.memoizedProps.nativeID&&(a.fiberMemoizedNativeID=t.memoizedProps.nativeID),t.memoizedProps.testID&&(a.fiberMemoizedTestID=t.memoizedProps.testID))}if(e.publicInstance){const t=e.publicInstance;a.publicInstanceKeys=Object.keys(t).slice(0,20),null!=t.nativeID&&(a.nativeID=t.nativeID),null!=t._nativeID&&(a._nativeID=t._nativeID),t.props&&(a.publicInstanceProps=Object.keys(t.props).slice(0,15),t.props.nativeID&&(a.propsNativeID=t.props.nativeID),t.props.testID&&(a.propsTestID=t.props.testID),t.props.accessibilityLabel&&(a.accessibilityLabel=t.props.accessibilityLabel))}e.currentProps&&(a.currentPropsKeys=Object.keys(e.currentProps).slice(0,15),null!=e.currentProps.nativeID&&(a.currentPropsNativeID=e.currentProps.nativeID),null!=e.currentProps.testID&&(a.currentPropsTestID=e.currentProps.testID),null!=e.currentProps.accessibilityLabel&&(a.currentPropsAccessLabel=e.currentProps.accessibilityLabel)),e.pendingProps&&(a.pendingPropsKeys=Object.keys(e.pendingProps).slice(0,15),null!=e.pendingProps.nativeID&&(a.pendingPropsNativeID=e.pendingProps.nativeID),null!=e.pendingProps.testID&&(a.pendingPropsTestID=e.pendingProps.testID))}if(t._debugOwner){const e=t._debugOwner;a.debugOwnerType=e.type?.name||e.type?.displayName||typeof e.type}t._debugSource&&(a.debugSource=t._debugSource)}return a}const DEBUG_LOGGING=!1;let renderingLock=!1,renderingLockTimeout=null;const RENDER_LOCK_DURATION=350,renderedOverlayTags=new Set;function isOurOverlayTag(e){return null!=e&&renderedOverlayTags.has(e)}const HIGHLIGHT_OVERLAY_NATIVE_IDS=new Set(["highlight-updates-overlay","__rn_buoy__highlight-modal"]),OTHER_DEV_TOOLS_NATIVE_IDS=new Set(["jsmodal-root","image-overlay-standalone","logbox_inspector","logbox"]),devToolsNodeCache=new Map,CACHE_MAX_SIZE=500;function clearDevToolsCache(){devToolsNodeCache.clear()}function isHighlightOverlayNativeID(e){return!(!e||!HIGHLIGHT_OVERLAY_NATIVE_IDS.has(e)&&!e.startsWith("__highlight_"))}function isOtherDevToolsNativeID(e){if(!e)return!1;if(OTHER_DEV_TOOLS_NATIVE_IDS.has(e))return!0;const t=e.charCodeAt(0);return!(95!==t||!e.startsWith("__rn_buoy__"))||!(108!==t||!e.startsWith("logbox"))}function getComponentName(e){if(!e)return null;const t=e.type;if(t){if("string"==typeof t)return t;if(t.name)return t.name;if(t.displayName)return t.displayName}const n=e.elementType;if(n){if(n.name)return n.name;if(n.displayName)return n.displayName}return null}const INTERNAL_COMPONENT_NAMES=new Set(["View","Text","TextImpl","Image","ScrollView","FlatList","SectionList","TouchableOpacity","TouchableHighlight","TouchableWithoutFeedback","Pressable","TextInput","Switch","ActivityIndicator","Modal","StatusBar","KeyboardAvoidingView","AnimatedComponent","AnimatedComponentWrapper","ScreenContainer","ScreenStack","Screen","ScreenContentWrapper","Svg","G","Path","Rect","Circle","Line","Polygon","Polyline","Ellipse","Text as SVGText","TSpan","TextPath","Use","Symbol","Defs","ClipPath","LinearGradient","RadialGradient","Stop","Mask","Pattern","Image as SVGImage","SafeAreaProvider","SafeAreaView","SafeAreaListener","GestureHandlerRootView","GestureDetector","ReanimatedView","ReanimatedText","ReanimatedImage","ReanimatedScrollView","Fragment","Suspense","Provider","Consumer","Context","ForwardRef"]);function isInternalComponent(e){return!e||!!INTERNAL_COMPONENT_NAMES.has(e)||"Unknown"===e||"Component"===e||!!e.startsWith("Animated")}function getOwningComponentName(e){if(!e)return null;let t=e._debugOwner||e.return,n=0,a=null;for(;t&&n<30;){const e=getComponentName(t);if(e&&"string"!=typeof t.type&&(a||(a=e),!isInternalComponent(e)))return e;t=t.return,n++}return a}function isOurOverlayNode(e){const t=e,n=t?.canonical?.internalInstanceHandle||t?._internalInstanceHandle||t?._internalFiberInstanceHandleDEV,a=getNativeTag(e)||getNativeTag(t?.canonical?.publicInstance),r=isCapturingBuoyToolRenders(),i=!r&&RenderTracker.getSettings().excludeDevTools;if(null!=a&&i){const e=devToolsNodeCache.get(a);if(void 0!==e)return e}let o=!1;const l=n?.pendingProps?.nativeID||n?.memoizedProps?.nativeID||t?.canonical?.currentProps?.nativeID||null;if((isHighlightOverlayNativeID(l)||i&&isOtherDevToolsNativeID(l))&&(o=!0),!o&&n){let e=n,t=0;for(;e&&t<30;){const n=getComponentName(e);if(n){if(HIGHLIGHT_OVERLAY_COMPONENTS.has(n)){o=!0;break}for(const e of HIGHLIGHT_OVERLAY_PREFIXES)if(n.startsWith(e)){o=!0;break}if(o)break;if(r&&isPerfMonitorComponentName(n)){o=!0;break}if(i){if(OTHER_DEV_TOOLS_COMPONENTS.has(n)||OTHER_DEV_TOOLS_EXACT.has(n)){o=!0;break}for(const e of OTHER_DEV_TOOLS_PREFIXES)if(n.startsWith(e)){o=!0;break}if(o)break}}const a=e.pendingProps?.nativeID||e.memoizedProps?.nativeID;if(isHighlightOverlayNativeID(a)){o=!0;break}if(i&&isOtherDevToolsNativeID(a)){o=!0;break}e=e.return,t++}}if(o&&null!=a&&i){if(devToolsNodeCache.size>=500){const e=Array.from(devToolsNodeCache.keys());for(let t=0;t<250;t++)devToolsNodeCache.delete(e[t])}devToolsNodeCache.set(a,o)}return o}function getColorForRenderCount(e){const t=Math.min(e-1,COLORS.length-1);return COLORS[Math.max(0,t)]}function handleTraceUpdates(e){if(0===e.size)return;if(!globalEnabled&&!backgroundTrackingEnabled)return;if(RenderTracker.getState().isPaused)return;PerformanceLogger.isEnabled()&&markEventReceived();const t=RenderTracker.getBatchSize(),n=PerformanceLogger.startBatch(e.size,t),a=[];let r=0,i=0;const o=RenderTracker.hasActiveFilters();for(const t of e)if(t&&"object"==typeof t)try{if(isOurOverlayNode(t)){r++;continue}const e=getPublicInstance(t),n=getNativeTag(t)||getNativeTag(e);if(null==n)continue;const l=extractComponentInfo(t);if(o&&!RenderTracker.passesFilters(l)){i++;continue}let s,c;RenderTracker.getSettings().showRenderCount?(s=(nodeRenderCounts.get(n)||0)+1,nodeRenderCounts.set(n,s),c=getColorForRenderCount(s)):(s=0,c=COLORS[0]),a.push({node:t,color:c,count:s})}catch{}if(n.markFilteringComplete(r+i,a.length),0===a.length)return void n.finish();const l=RenderTracker.getRenderEventCallbackCount()>0;if(!highlightCallback&&!l)return void(isProcessing=!1);n.markMeasurementStart();const s=a.slice(0,4*t).map(({node:e,color:t,count:n})=>new Promise(a=>{let r=!1;const i=e=>{r||(r=!0,clearTimeout(o),a(e))},o=setTimeout(()=>i({rect:null,stateNode:e,color:t,count:n}),500),l=getPublicInstance(e),s=getNativeTag(e)||getNativeTag(l);if(null==s)return void i({rect:null,stateNode:e,color:t,count:n});const c=(a,r,o,l,c,d)=>{i(null!=c&&null!=d&&null!=o&&null!=l?{rect:{id:s,x:c,y:d,width:o,height:l,color:t,count:n},stateNode:e,color:t,count:n}:{rect:null,stateNode:e,color:t,count:n})};if(!l){const a=e.node,r=globalThis.nativeFabricUIManager;if(a&&r?.measure){try{r.measure(a,c)}catch(a){i({rect:null,stateNode:e,color:t,count:n})}return}return void i({rect:null,stateNode:e,color:t,count:n})}try{l.measure(c)}catch(a){i({rect:null,stateNode:e,color:t,count:n})}}));Promise.all(s).then(e=>{const t=e.filter(e=>null!==e.rect),a=t.map(e=>e.rect);n.markMeasurementComplete(t.length,e.length-t.length),a.length>0&&highlightCallback&&globalEnabled&&!highlightsSuppressed&&highlightCallback(a),setTimeout(()=>{try{for(const e of t)e.rect&&registerTrackedNode(e.rect.id,e.stateNode)}catch(e){debugLog("registerTrackedNode batch failed",e)}const e=RenderTracker.getSettings(),a=e.trackRenderCauses&&e.showRenderCount;let r=null;if(a){r=new Set;for(const{rect:e}of t)e&&r.add(e.id)}if(globalEnabled){RenderTracker.startBatch();for(const{rect:n,stateNode:i,color:o,count:l}of t)if(n){const t=extractComponentInfo(i);let s;if(a&&r){const t=i,a=t?.canonical?.internalInstanceHandle;s=detectRenderCause(n.id,a,r,e.debugLogLevel)}RenderTracker.trackRender({nativeTag:n.id,viewType:t.viewType,testID:t.testID,nativeID:t.nativeID,accessibilityLabel:t.accessibilityLabel,componentName:t.componentName,measurements:{x:n.x,y:n.y,width:n.width,height:n.height},color:o,count:l,renderCause:s})}RenderTracker.endBatch()}else for(const{rect:n,stateNode:i,color:o,count:l}of t)if(n){const t=extractComponentInfo(i);let s;if(a&&r){const t=i,a=t?.canonical?.internalInstanceHandle;s=detectRenderCause(n.id,a,r,e.debugLogLevel)}RenderTracker.emitRenderEvent({nativeTag:n.id,viewType:t.viewType,testID:t.testID,nativeID:t.nativeID,accessibilityLabel:t.accessibilityLabel,componentName:t.componentName,measurements:{x:n.x,y:n.y,width:n.width,height:n.height},color:o,count:l,renderCause:s})}n.markTrackingComplete(),n.markCallbackComplete(),n.finish()},0)}).catch(e=>{console.error("[HighlightUpdates] Error in measurement pipeline:",e),n.finish()})}const WeakRefCtor=globalThis.WeakRef,nodeRegistry=new Map;function registerTrackedNode(e,t){if(null!=e&&null!=t&&"object"==typeof t)try{nodeRegistry.set(e,WeakRefCtor?new WeakRefCtor(t):{deref:()=>t})}catch{nodeRegistry.set(e,{deref:()=>t})}}function derefNode(e){const t=nodeRegistry.get(e),n=t?.deref();return n||nodeRegistry.delete(e),n??null}function measureNode(e){return new Promise(t=>{try{e.measure((e,n,a,r,i,o)=>{t(null==i||null==o||null==a||null==r?null:{x:i,y:o,width:a,height:r})})}catch{t(null)}})}function getFiberFromNode(e){const t=e;return t?.canonical?.internalInstanceHandle||t?._internalInstanceHandle||t?._internalFiberInstanceHandleDEV||null}function findScrollAncestor(e){let t=getFiberFromNode(e),n=0;for(;t&&n++<200;){const e=t.stateNode;if(e&&"function"==typeof e.scrollTo){const t="function"==typeof e.getNativeScrollRef&&e.getNativeScrollRef()||null,n="function"==typeof e.getInnerViewNode&&e.getInnerViewNode()||"function"==typeof e.getScrollableNode&&e.getScrollableNode()||e;return{instance:e,nativeRef:t,innerNode:n}}t=t.return}return null}async function scrollDescendantIntoView(e,t,n){try{const a=findScrollAncestor(e);if(!a)return!1;const r=t;let i=null;const o=e=>new Promise(t=>{let n=!1;const a=e=>{n||(n=!0,t(e))},r=setTimeout(()=>a(null),600);try{e(e=>{clearTimeout(r),a(e)})}catch{clearTimeout(r),a(null)}});if(a.nativeRef&&"function"==typeof r.measureLayout&&(i=await o(e=>r.measureLayout(a.nativeRef,(t,n)=>e(n),()=>e(null)))),null==i){const e=findNodeHandle(t),n="number"==typeof a.innerNode?a.innerNode:findNodeHandle(a.innerNode);null!=e&&null!=n&&(i=await o(t=>UIManager.measureLayout(e,n,()=>t(null),(e,n)=>t(n))))}return null!=i&&(a.instance.scrollTo({y:Math.max(0,i-n),animated:!1}),await new Promise(e=>setTimeout(e,80)),!0)}catch{return!1}}function matchScore(e,t){const n=[e.testID,e.nativeID,e.accessibilityLabel,e.componentName,e.viewType,String(e.nativeTag)];let a=0;for(const e of n){if(!e)continue;const n=e.toLowerCase();if(n===t)return 3;n.startsWith(t)?a=Math.max(a,2):n.includes(t)&&(a=Math.max(a,1))}return a}async function locateComponent(e){const t=!1!==e.scrollIntoView,n="number"==typeof e.margin?e.margin:12,a=RenderTracker.getRenders();if(0===a.length){const t=await describeScreen(),n=(e.query??"").trim().toLowerCase();let a;for(const r of t.elements){if(null!=e.nativeTag&&r.nativeTag===e.nativeTag){a={el:r,score:1e3};break}const t=scoreTapMatch({nativeTag:r.nativeTag,testID:r.testID,label:r.label,text:r.text,name:r.name,tap:r.tap},{query:n||void 0,nativeTag:e.nativeTag});t<=0||(!a||t>a.score)&&(a={el:r,score:t})}if(!a?.el.frame)return{matched:!1,reason:"no-match",candidates:[]};const r=t.screen,i=a.el.frame;return{matched:!0,live:!0,rect:{x:i.x*r.width,y:i.y*r.height,width:i.width*r.width,height:i.height*r.height},scale:PixelRatio.get(),screen:{width:r.width,height:r.height},nativeTag:a.el.nativeTag??void 0,componentName:a.el.name,testID:a.el.testID}}const r=(e.query??"").trim().toLowerCase(),i=r?a.map(e=>({r:e,score:matchScore(e,r)})).filter(e=>e.score>0).sort((e,t)=>t.score-e.score||t.r.lastRenderTime-e.r.lastRenderTime):[],o=i.slice(0,8).map(({r:e})=>({nativeTag:e.nativeTag,componentName:e.componentName,testID:e.testID,nativeID:e.nativeID,viewType:e.viewType,renderCount:e.renderCount})),l=e.nativeTag??(i.length>0?i[0].r.nativeTag:void 0);if(null==l)return{matched:!1,reason:"no-match",candidates:o};const s=a.find(e=>e.nativeTag===l);let c=null,d=!1,u=!1;const g=derefNode(l);if(g){const e=getPublicInstance(g);e&&(t&&(u=await scrollDescendantIntoView(g,e,n)),c=await measureNode(e),d=!!c)}if(!c&&s?.measurements&&(c={...s.measurements}),!c)return{matched:!1,reason:"no-measurement",nativeTag:l,candidates:o};const b=PixelRatio.get(),f=Dimensions.get("window");return{matched:!0,live:d,scrolled:u,inView:c.x>=-1&&c.y>=-1&&c.x+c.width<=f.width+1&&c.y+c.height<=f.height+1,rect:c,scale:b,screen:{width:f.width,height:f.height},nativeTag:l,componentName:s?.componentName,testID:s?.testID,candidates:o}}function setTraceUpdatesOnRenderers(e){if(!hook?.rendererInterfaces)return void debugLog("No rendererInterfaces available");let t=0;if(hook.rendererInterfaces.forEach((n,a)=>{if("function"==typeof n.setTraceUpdatesEnabled)try{n.setTraceUpdatesEnabled(e),t++,debugLog(`Renderer ${a}: setTraceUpdatesEnabled(${e})`)}catch(e){debugLog(`Renderer ${a}: error setting trace updates`,e)}else debugLog(`Renderer ${a}: no setTraceUpdatesEnabled method`)}),debugLog(`Set trace updates ${e?"enabled":"disabled"} on ${t} renderer(s)`),hook.reactDevtoolsAgent?.setTraceUpdatesEnabled)try{hook.reactDevtoolsAgent.setTraceUpdatesEnabled(e),debugLog("Also set trace updates on agent")}catch(e){debugLog("Error setting trace updates on agent",e)}}function subscribeToTraceUpdates(){hook&&(traceUpdatesUnsubscribe||(debugLog("Subscribing to traceUpdates event"),"function"==typeof hook.sub?(traceUpdatesUnsubscribe=hook.sub("traceUpdates",handleTraceUpdates),debugLog("Subscribed using hook.sub()")):debugLog("hook.sub not available, traceUpdates may not work"),setTraceUpdatesOnRenderers(!0)))}function unsubscribeFromTraceUpdates(){setTraceUpdatesOnRenderers(!1),traceUpdatesUnsubscribe&&(traceUpdatesUnsubscribe(),traceUpdatesUnsubscribe=null,debugLog("Unsubscribed from traceUpdates event"))}function setHighlightCallback(e){highlightCallback=e,debugLog("Highlight callback "+(e?"set":"cleared"))}function setBadgePressCallback(e){badgePressCallback=e,debugLog("Badge press callback "+(e?"set":"cleared"))}function getBadgePressCallback(){return badgePressCallback}function handleBadgePress(e){badgePressCallback&&badgePressCallback(e)}let spotlightCallback=null,currentSpotlightTag=null;function setSpotlightCallback(e){spotlightCallback=e,e&&null!==currentSpotlightTag&&e(currentSpotlightTag)}function setSpotlight(e){remoteHandler?remoteHandler("setSpotlight",{nativeTag:e}):(currentSpotlightTag=e,spotlightCallback&&spotlightCallback(e))}let remoteHandler=null;function setRemoteHandler(e){remoteHandler=e}function replaceRemoteState(e){globalEnabled!==e.enabled&&(globalEnabled=e.enabled,notifyStateListeners()),isFrozen!==e.frozen&&(isFrozen=e.frozen,notifyFreezeListeners())}function getSpotlight(){return currentSpotlightTag}function notifyStateListeners(){stateListeners.forEach(e=>{try{e(globalEnabled)}catch(e){console.error("[HighlightUpdates] Error in state listener:",e)}})}function subscribe(e){return stateListeners.add(e),e(globalEnabled),()=>{stateListeners.delete(e)}}function initialize(){if("undefined"!=typeof __DEV__&&!__DEV__)return debugLog("Only available in development builds"),!1;if(remoteHandler)return!0;if(initialized)return!0;if(hook=window?.__REACT_DEVTOOLS_GLOBAL_HOOK__||null,!hook)return debugLog("React DevTools hook not found"),!1;if(debugLog("Hook found"),debugLog(`Hook has sub: ${"function"==typeof hook.sub}`),debugLog(`Hook has on: ${"function"==typeof hook.on}`),debugLog(`Hook has emit: ${"function"==typeof hook.emit}`),installProfilerInterceptor(),hook.rendererInterfaces&&hook.rendererInterfaces.size>0)return initialized=!0,debugLog(`Initialized with ${hook.rendererInterfaces.size} renderer(s)`),exposeGlobally(),!0;const e=setInterval(()=>{hook?.rendererInterfaces&&hook.rendererInterfaces.size>0&&(clearInterval(e),initialized=!0,debugLog(`Initialized with ${hook.rendererInterfaces.size} renderer(s) (delayed)`),exposeGlobally())},100);return setTimeout(()=>clearInterval(e),1e4),!1}function exposeGlobally(){"undefined"!=typeof window&&(window.__HIGHLIGHT_UPDATES_CONTROLLER__={enable:enable,disable:disable,toggle:toggle,isEnabled:isEnabled,setEnabled:setEnabled,subscribe:subscribe,initialize:initialize,destroy:destroy,isInitialized:()=>initialized,setHighlightCallback:setHighlightCallback})}function enable(){("undefined"==typeof __DEV__||__DEV__)&&(initialized||initialize(),highlightsSuppressed&&(highlightsSuppressed=!1),globalEnabled||(debugLog("Enabling highlights"),backgroundTrackingEnabled||subscribeToTraceUpdates(),RenderTracker.start(),globalEnabled=!0,notifyStateListeners(),notifySubscriberCountChange("render")))}function disable(){("undefined"==typeof __DEV__||__DEV__)&&globalEnabled&&(debugLog("Disabling highlights"),renderingLock=!1,isProcessing=!1,renderingLockTimeout&&(clearTimeout(renderingLockTimeout),renderingLockTimeout=null),renderedOverlayTags.clear(),devToolsNodeCache.clear(),clearRenderCauseState(),isFrozen&&(isFrozen=!1,notifyFreezeListeners()),backgroundTrackingEnabled||unsubscribeFromTraceUpdates(),RenderTracker.stop(),globalEnabled=!1,notifyStateListeners(),notifySubscriberCountChange("render"))}function enableBackgroundTracking(){("undefined"==typeof __DEV__||__DEV__)&&(backgroundTrackingEnabled||(initialized||initialize(),debugLog("Enabling background tracking"),globalEnabled||subscribeToTraceUpdates(),backgroundTrackingEnabled=!0))}function disableBackgroundTracking(){("undefined"==typeof __DEV__||__DEV__)&&backgroundTrackingEnabled&&(debugLog("Disabling background tracking"),backgroundTrackingEnabled=!1,globalEnabled||unsubscribeFromTraceUpdates())}function isBackgroundTrackingEnabled(){return backgroundTrackingEnabled}function toggle(){("undefined"==typeof __DEV__||__DEV__)&&(remoteHandler?remoteHandler("toggle"):globalEnabled?disable():enable())}function clearRenderCounts(){remoteHandler?remoteHandler("clearRenderCounts"):(nodeRenderCounts.clear(),RenderTracker.clear(),debugLog("Cleared render counts"))}function isEnabled(){return globalEnabled}function setEnabled(e){remoteHandler?remoteHandler("setEnabled",{enabled:e}):e?enable():disable()}function setHighlightsSuppressed(e){highlightsSuppressed!==e&&(highlightsSuppressed=e,e&&highlightCallback&&highlightCallback([]))}function getHighlightsSuppressed(){return highlightsSuppressed}function setSilentTracking(e){remoteHandler?remoteHandler("setSilentTracking",{enabled:e}):e?(enable(),setHighlightsSuppressed(!0)):(setHighlightsSuppressed(!1),disable())}function isInitialized(){return initialized}function notifyFreezeListeners(){freezeListeners.forEach(e=>{try{e(isFrozen)}catch(e){console.error("[HighlightUpdates] Error in freeze listener:",e)}})}function subscribeToFreeze(e){return freezeListeners.add(e),e(isFrozen),()=>{freezeListeners.delete(e)}}function freeze(){("undefined"==typeof __DEV__||__DEV__)&&(isFrozen||(isFrozen=!0,debugLog("Freeze mode enabled"),notifyFreezeListeners()))}function unfreeze(){("undefined"==typeof __DEV__||__DEV__)&&isFrozen&&(isFrozen=!1,debugLog("Freeze mode disabled"),highlightCallback&&highlightCallback([]),notifyFreezeListeners())}function toggleFreeze(){remoteHandler?remoteHandler("toggleFreeze"):isFrozen?unfreeze():freeze()}function getFrozen(){return isFrozen}function destroy(){initialized&&(unsubscribeFromTraceUpdates(),uninstallProfilerInterceptor(),setComparisonCallback(null),isFrozen=!1,freezeListeners.clear(),globalEnabled=!1,hook=null,highlightCallback=null,initialized=!1,"undefined"!=typeof window&&delete window.__HIGHLIGHT_UPDATES_CONTROLLER__,debugLog("Destroyed"))}const HighlightUpdatesController={subscribe:subscribe,enable:enable,disable:disable,toggle:toggle,isEnabled:isEnabled,setEnabled:setEnabled,initialize:initialize,destroy:destroy,isInitialized:isInitialized,setHighlightCallback:setHighlightCallback,clearRenderCounts:clearRenderCounts,freeze:freeze,unfreeze:unfreeze,toggleFreeze:toggleFreeze,getFrozen:getFrozen,subscribeToFreeze:subscribeToFreeze,setBadgePressCallback:setBadgePressCallback,getBadgePressCallback:getBadgePressCallback,handleBadgePress:handleBadgePress,setSpotlightCallback:setSpotlightCallback,setSpotlight:setSpotlight,getSpotlight:getSpotlight,clearDevToolsCache:clearDevToolsCache,enableBackgroundTracking:enableBackgroundTracking,disableBackgroundTracking:disableBackgroundTracking,isBackgroundTrackingEnabled:isBackgroundTrackingEnabled,setRemoteHandler:setRemoteHandler,replaceRemoteState:replaceRemoteState,locateComponent:locateComponent,setHighlightsSuppressed:setHighlightsSuppressed,getHighlightsSuppressed:getHighlightsSuppressed,setSilentTracking:setSilentTracking};export default HighlightUpdatesController;
+/**
+ * Highlight Updates Controller
+ *
+ * Standalone implementation that replicates React DevTools' "Highlight updates
+ * when components render" feature WITHOUT requiring DevTools to be connected.
+ *
+ * Architecture:
+ * This controller directly enables the DevTools backend's traceUpdates feature
+ * by calling setTraceUpdatesEnabled(true) on each renderer interface. This is
+ * the same function that DevTools' frontend calls when you check the
+ * "Highlight updates when components render" checkbox.
+ *
+ * Key insight: The rendererInterfaces are available on the global hook even
+ * without DevTools frontend connected. We just need to enable tracing directly.
+ *
+ * Flow:
+ * 1. User enables highlights via toggle()
+ * 2. We call rendererInterface.setTraceUpdatesEnabled(true) on all renderers
+ * 3. DevTools backend now tracks renders and emits 'traceUpdates' events
+ * 4. We subscribe to 'traceUpdates' via hook.sub()
+ * 5. When components re-render, we receive the Set of host stateNodes
+ * 6. We measure each node and render colored border highlights
+ *
+ * This gives us 100% accuracy with DevTools behavior because we're using the
+ * exact same detection code - we're just enabling it programmatically.
+ */
+
+"use strict";
+
+import { installProfilerInterceptor, uninstallProfilerInterceptor, setComparisonCallback } from "./ProfilerInterceptor";
+import { findNodeHandle, UIManager, Dimensions, PixelRatio } from "react-native";
+import { RenderTracker } from "./RenderTracker";
+import { describeScreen } from "./screenElements";
+import { scoreTapMatch } from "./tapMatch";
+import { PerformanceLogger, markEventReceived } from "./PerformanceLogger";
+import { detectRenderCause, clearRenderCauseState } from "./RenderCauseDetector";
+import { notifySubscriberCountChange } from "@buoy-gg/shared-ui";
+import { HIGHLIGHT_OVERLAY_COMPONENTS, HIGHLIGHT_OVERLAY_PREFIXES, OTHER_DEV_TOOLS_COMPONENTS, OTHER_DEV_TOOLS_EXACT, OTHER_DEV_TOOLS_PREFIXES, isCapturingBuoyToolRenders, isPerfMonitorComponentName } from "./devtoolsComponentNames";
+// State
+let globalEnabled = false; // User-controlled toggle for visual highlights
+// When true, tracking + measurement + storage all run as normal, but the
+// visual highlight boxes are NOT drawn. Lets the desktop "screenshot this
+// component" flow get the render history + measurements with no on-device
+// overlay. Independent of globalEnabled; reset whenever the visual tool is
+// enabled (the Renders tab always wants its boxes).
+let highlightsSuppressed = false;
+let backgroundTrackingEnabled = false; // Auto-enabled when event callbacks exist (Events tool)
+let initialized = false;
+let hook = null;
+let highlightCallback = null;
+let badgePressCallback = null;
+let traceUpdatesUnsubscribe = null;
+let isProcessing = false;
+
+// Freeze frame state
+let isFrozen = false;
+const freezeListeners = new Set();
+const stateListeners = new Set();
+
+// Track render counts per node (for color assignment like DevTools)
+// Map from nativeTag to render count - nativeTag is stable across re-renders
+const nodeRenderCounts = new Map();
+
+// Color palette for highlights (same as DevTools)
+// From: react-devtools-core/dist/backend.js line 6361
+const COLORS = ["#37afa9", "#63b19e", "#80b393", "#97b488", "#abb67d", "#beb771", "#cfb965", "#dfba57", "#efbb49", "#febc38"];
+
+// Set to true for verbose debugging of our implementation
+// Disabled for now to focus on profiler logs only
+const DEBUG = false;
+function debugLog(message, data) {
+  if (!DEBUG) return;
+  if (data !== undefined) {
+    console.log(`[HighlightUpdates] ${message}`, data);
+  } else {
+    console.log(`[HighlightUpdates] ${message}`);
+  }
+}
+
+/**
+ * Get the public instance from a stateNode (the node passed in traceUpdates)
+ */
+function getPublicInstance(stateNode) {
+  if (!stateNode) return null;
+  const node = stateNode;
+
+  // Fabric: stateNode.canonical.publicInstance
+  if (node.canonical?.publicInstance) {
+    return node.canonical.publicInstance;
+  }
+
+  // Legacy Fabric: stateNode.canonical with measure
+  if (node.canonical && typeof node.canonical.measure === "function") {
+    return node.canonical;
+  }
+
+  // Legacy renderer: stateNode has measure directly
+  if (typeof node.measure === "function") {
+    return node;
+  }
+  return null;
+}
+
+/**
+ * Get native tag from public instance or stateNode
+ */
+function getNativeTag(instance) {
+  if (instance == null) return null;
+  const inst = instance;
+
+  // Try direct properties
+  if (inst.__nativeTag != null) return inst.__nativeTag;
+  if (inst._nativeTag != null) return inst._nativeTag;
+  if (inst.nativeTag != null) return inst.nativeTag;
+
+  // Try canonical
+  if (inst.canonical) {
+    if (inst.canonical.__nativeTag != null) return inst.canonical.__nativeTag;
+    if (inst.canonical._nativeTag != null) return inst.canonical._nativeTag;
+    // Modern Fabric instance handles: { node, canonical: { nativeTag, ... } }.
+    // Without this shape ~99% of traced nodes were dropped on New
+    // Architecture — highlights only appeared for tap-shaped legacy nodes.
+    if (inst.canonical.nativeTag != null) return inst.canonical.nativeTag;
+  }
+  return null;
+}
+
+/**
+ * Extract component info from a stateNode for RenderTracker
+ */
+function extractComponentInfo(stateNode) {
+  const node = stateNode;
+  const info = {
+    viewType: "Unknown"
+  };
+
+  // Get viewType from viewConfig
+  if (node?.canonical?.viewConfig?.uiViewClassName) {
+    info.viewType = node.canonical.viewConfig.uiViewClassName;
+  } else if (node?.viewConfig?.uiViewClassName) {
+    info.viewType = node.viewConfig.uiViewClassName;
+  }
+
+  // Try to get props from various locations
+  // Fabric: canonical.internalInstanceHandle, Paper: _internalInstanceHandle, RN CLI DEV: _internalFiberInstanceHandleDEV
+  const fiber = node?.canonical?.internalInstanceHandle || node?._internalInstanceHandle || node?._internalFiberInstanceHandleDEV;
+  const currentProps = node?.canonical?.currentProps;
+  const pendingProps = node?.canonical?.pendingProps;
+  const fiberPendingProps = fiber?.pendingProps;
+  const fiberMemoizedProps = fiber?.memoizedProps;
+
+  // Extract testID
+  info.testID = currentProps?.testID || pendingProps?.testID || fiberPendingProps?.testID || fiberMemoizedProps?.testID || undefined;
+
+  // Extract nativeID
+  info.nativeID = currentProps?.nativeID || pendingProps?.nativeID || fiberPendingProps?.nativeID || fiberMemoizedProps?.nativeID || undefined;
+
+  // Extract accessibilityLabel
+  info.accessibilityLabel = currentProps?.accessibilityLabel || pendingProps?.accessibilityLabel || fiberPendingProps?.accessibilityLabel || fiberMemoizedProps?.accessibilityLabel || undefined;
+
+  // Extract componentName - use getOwningComponentName to get the React component
+  // that rendered this host component
+  info.componentName = getOwningComponentName(fiber) || undefined;
+  return info;
+}
+
+/**
+ * Describe a node for logging (extensive version for debugging)
+ */
+function describeNodeForLog(stateNode) {
+  const node = stateNode;
+  const publicInstance = getPublicInstance(stateNode);
+  const nativeTag = getNativeTag(stateNode) || getNativeTag(publicInstance);
+  const info = {
+    nativeTag: nativeTag ?? "unknown",
+    type: node?.canonical ? "Fabric" : "Legacy",
+    hasMeasure: typeof publicInstance?.measure === "function"
+  };
+
+  // Extract as much info as possible from the stateNode
+  if (node) {
+    // Direct properties on stateNode
+    info.stateNodeKeys = Object.keys(node).slice(0, 20);
+
+    // Check the 'node' property (might have useful info)
+    if (node.node) {
+      info.nodeKeys = Object.keys(node.node).slice(0, 20);
+    }
+
+    // Check for viewConfig (contains component type info)
+    if (node.viewConfig) {
+      info.viewConfig = {
+        uiViewClassName: node.viewConfig.uiViewClassName,
+        validAttributes: node.viewConfig.validAttributes ? Object.keys(node.viewConfig.validAttributes).slice(0, 10) : undefined
+      };
+    }
+
+    // Check canonical structure (Fabric)
+    if (node.canonical) {
+      const canonical = node.canonical;
+      info.canonicalKeys = Object.keys(canonical).slice(0, 20);
+      if (canonical.viewConfig) {
+        info.canonicalViewConfig = {
+          uiViewClassName: canonical.viewConfig.uiViewClassName
+        };
+      }
+      if (canonical.nativeTag != null) {
+        info.canonicalNativeTag = canonical.nativeTag;
+      }
+
+      // Check internalInstanceHandle (THE FIBER!)
+      if (canonical.internalInstanceHandle) {
+        const fiber = canonical.internalInstanceHandle;
+        info.fiberKeys = Object.keys(fiber).slice(0, 30);
+
+        // Component type info
+        if (fiber.type) {
+          info.fiberType = typeof fiber.type === "function" ? fiber.type.name || fiber.type.displayName || "function" : fiber.type;
+        }
+        if (fiber.elementType) {
+          info.fiberElementType = typeof fiber.elementType === "function" ? fiber.elementType.name || fiber.elementType.displayName || "function" : fiber.elementType;
+        }
+
+        // Debug info on fiber
+        if (fiber._debugOwner) {
+          const owner = fiber._debugOwner;
+          info.fiberDebugOwner = owner.type?.name || owner.type?.displayName || owner.elementType?.name || "unknown";
+        }
+        if (fiber._debugSource) {
+          info.fiberDebugSource = fiber._debugSource;
+        }
+
+        // Fiber tag (tells us what kind of fiber it is)
+        if (fiber.tag != null) {
+          info.fiberTag = fiber.tag;
+        }
+
+        // pendingProps on fiber might have testID/nativeID
+        if (fiber.pendingProps) {
+          if (fiber.pendingProps.nativeID) info.fiberPendingNativeID = fiber.pendingProps.nativeID;
+          if (fiber.pendingProps.testID) info.fiberPendingTestID = fiber.pendingProps.testID;
+        }
+        if (fiber.memoizedProps) {
+          if (fiber.memoizedProps.nativeID) info.fiberMemoizedNativeID = fiber.memoizedProps.nativeID;
+          if (fiber.memoizedProps.testID) info.fiberMemoizedTestID = fiber.memoizedProps.testID;
+        }
+      }
+
+      // Check publicInstance
+      if (canonical.publicInstance) {
+        const pub = canonical.publicInstance;
+        info.publicInstanceKeys = Object.keys(pub).slice(0, 20);
+
+        // Look for nativeID
+        if (pub.nativeID != null) info.nativeID = pub.nativeID;
+        if (pub._nativeID != null) info._nativeID = pub._nativeID;
+
+        // Look for props
+        if (pub.props) {
+          info.publicInstanceProps = Object.keys(pub.props).slice(0, 15);
+          if (pub.props.nativeID) info.propsNativeID = pub.props.nativeID;
+          if (pub.props.testID) info.propsTestID = pub.props.testID;
+          if (pub.props.accessibilityLabel) info.accessibilityLabel = pub.props.accessibilityLabel;
+        }
+      }
+
+      // Check for currentProps - log actual VALUES
+      if (canonical.currentProps) {
+        info.currentPropsKeys = Object.keys(canonical.currentProps).slice(0, 15);
+        // Log actual values of identifying props
+        if (canonical.currentProps.nativeID != null) info.currentPropsNativeID = canonical.currentProps.nativeID;
+        if (canonical.currentProps.testID != null) info.currentPropsTestID = canonical.currentProps.testID;
+        if (canonical.currentProps.accessibilityLabel != null) info.currentPropsAccessLabel = canonical.currentProps.accessibilityLabel;
+      }
+
+      // Check for pendingProps
+      if (canonical.pendingProps) {
+        info.pendingPropsKeys = Object.keys(canonical.pendingProps).slice(0, 15);
+        if (canonical.pendingProps.nativeID != null) info.pendingPropsNativeID = canonical.pendingProps.nativeID;
+        if (canonical.pendingProps.testID != null) info.pendingPropsTestID = canonical.pendingProps.testID;
+      }
+    }
+
+    // Check for fiber reference directly on node
+    if (node._debugOwner) {
+      const owner = node._debugOwner;
+      info.debugOwnerType = owner.type?.name || owner.type?.displayName || typeof owner.type;
+    }
+    if (node._debugSource) {
+      info.debugSource = node._debugSource;
+    }
+  }
+  return info;
+}
+
+// Set to true to enable debug logging
+const DEBUG_LOGGING = false;
+
+// Lock to prevent infinite loops when rendering our overlay
+let renderingLock = false;
+let renderingLockTimeout = null;
+
+// How long to ignore new events after starting a render (ms)
+// Should match HIGHLIGHT_DURATION in the overlay to prevent false triggers
+const RENDER_LOCK_DURATION = 350;
+
+// Track nativeTags of components we're currently highlighting
+// This helps us identify (and skip) our own overlay Views if they re-render
+const renderedOverlayTags = new Set();
+
+/**
+ * Check if a nativeTag belongs to our overlay (was rendered by us previously)
+ */
+function isOurOverlayTag(nativeTag) {
+  if (nativeTag == null) return false;
+  return renderedOverlayTags.has(nativeTag);
+}
+
+// ============================================================================
+// OPTIMIZED DEV TOOLS DETECTION
+// ============================================================================
+// Performance optimizations applied:
+// 1. Result caching by nativeTag (same tag = same result)
+// 2. Set-based O(1) lookups instead of multiple string comparisons
+// 3. Component name check FIRST (appears early in tree, ~depth 5-8)
+// 4. Early exit on first match
+// 5. Cached property access to avoid repeated traversal
+// ============================================================================
+
+// Component-name sets/prefixes live in devtoolsComponentNames.ts (shared with
+// CommitProfiler). Native-ID sets stay here — only the node walk uses them.
+
+// Native IDs that MUST always be excluded (highlight overlay)
+const HIGHLIGHT_OVERLAY_NATIVE_IDS = new Set(["highlight-updates-overlay", "__rn_buoy__highlight-modal"]);
+
+// Other dev tools native IDs - can be toggled
+const OTHER_DEV_TOOLS_NATIVE_IDS = new Set(["jsmodal-root", "image-overlay-standalone",
+// LogBox native IDs
+"logbox_inspector", "logbox"]);
+
+// Cache: nativeTag -> isDevTools (avoid re-walking tree for same node)
+const devToolsNodeCache = new Map();
+const CACHE_MAX_SIZE = 500;
+
+/**
+ * Clear the devtools node cache.
+ * Call this when the excludeDevTools setting changes to re-evaluate all nodes.
+ */
+function clearDevToolsCache() {
+  devToolsNodeCache.clear();
+}
+
+/**
+ * Check if a nativeID belongs to highlight overlay (always excluded)
+ */
+function isHighlightOverlayNativeID(nativeID) {
+  if (!nativeID) return false;
+  // Direct Set lookup (O(1))
+  if (HIGHLIGHT_OVERLAY_NATIVE_IDS.has(nativeID)) return true;
+  // Prefix check for highlight overlay
+  if (nativeID.startsWith("__highlight_")) return true;
+  return false;
+}
+
+/**
+ * Check if a nativeID belongs to other dev tools (optionally excluded)
+ */
+function isOtherDevToolsNativeID(nativeID) {
+  if (!nativeID) return false;
+  // Direct Set lookup (O(1))
+  if (OTHER_DEV_TOOLS_NATIVE_IDS.has(nativeID)) return true;
+  // Prefix checks for other devtools nativeIDs
+  const firstChar = nativeID.charCodeAt(0);
+  if (firstChar === 95) {
+    // '_' = 95
+    if (nativeID.startsWith("__rn_buoy__")) return true;
+  }
+  // Check for LogBox nativeIDs (start with 'l')
+  if (firstChar === 108 && nativeID.startsWith("logbox")) {
+    // 'l' = 108
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Get component name from fiber (cached property access pattern)
+ * For host components (RCTView, RCTText), returns the native type.
+ * Use getOwningComponentName to get the React component that rendered it.
+ */
+function getComponentName(fiber) {
+  if (!fiber) return null;
+  // Most common: type.name
+  const type = fiber.type;
+  if (type) {
+    if (typeof type === 'string') return type;
+    if (type.name) return type.name;
+    if (type.displayName) return type.displayName;
+  }
+  // Fallback: elementType
+  const elementType = fiber.elementType;
+  if (elementType) {
+    if (elementType.name) return elementType.name;
+    if (elementType.displayName) return elementType.displayName;
+  }
+  return null;
+}
+
+// Common React Native internal component names to skip when finding user components
+const INTERNAL_COMPONENT_NAMES = new Set([
+// React Native core
+'View', 'Text', 'TextImpl', 'Image', 'ScrollView', 'FlatList', 'SectionList', 'TouchableOpacity', 'TouchableHighlight', 'TouchableWithoutFeedback', 'Pressable', 'TextInput', 'Switch', 'ActivityIndicator', 'Modal', 'StatusBar', 'KeyboardAvoidingView',
+// Animated components
+'AnimatedComponent', 'AnimatedComponentWrapper',
+// React Navigation / Screens
+'ScreenContainer', 'ScreenStack', 'Screen', 'ScreenContentWrapper',
+// SVG components
+'Svg', 'G', 'Path', 'Rect', 'Circle', 'Line', 'Polygon', 'Polyline', 'Ellipse', 'Text as SVGText', 'TSpan', 'TextPath', 'Use', 'Symbol', 'Defs', 'ClipPath', 'LinearGradient', 'RadialGradient', 'Stop', 'Mask', 'Pattern', 'Image as SVGImage',
+// SafeArea
+'SafeAreaProvider', 'SafeAreaView', 'SafeAreaListener',
+// Gesture Handler
+'GestureHandlerRootView', 'GestureDetector',
+// Reanimated
+'ReanimatedView', 'ReanimatedText', 'ReanimatedImage', 'ReanimatedScrollView',
+// Common wrapper names
+'Fragment', 'Suspense', 'Provider', 'Consumer', 'Context', 'ForwardRef']);
+
+/**
+ * Check if a component name is an internal/wrapper component that should be skipped
+ */
+function isInternalComponent(name) {
+  if (!name) return true;
+  if (INTERNAL_COMPONENT_NAMES.has(name)) return true;
+  // Skip anonymous components and common patterns
+  if (name === 'Unknown' || name === 'Component') return true;
+  // Skip Animated.* wrappers
+  if (name.startsWith('Animated')) return true;
+  return false;
+}
+
+/**
+ * Get the owning React component name for a host fiber.
+ * Walks up the fiber tree to find the first user-defined component,
+ * skipping React Native internal components.
+ */
+function getOwningComponentName(fiber) {
+  if (!fiber) return null;
+
+  // Walk up the fiber tree looking for a user-defined component
+  let current = fiber._debugOwner || fiber.return;
+  let depth = 0;
+  let firstNonHostName = null;
+  while (current && depth < 30) {
+    const name = getComponentName(current);
+
+    // Skip host components (their type is a string like "RCTView")
+    if (name && typeof current.type !== 'string') {
+      // Remember the first non-host component as fallback
+      if (!firstNonHostName) {
+        firstNonHostName = name;
+      }
+      // Return this component if it's not an internal wrapper
+      if (!isInternalComponent(name)) {
+        return name;
+      }
+    }
+    current = current.return;
+    depth++;
+  }
+
+  // Fallback to first non-host component found (even if internal)
+  return firstNonHostName;
+}
+
+/**
+ * Check if a stateNode belongs to our dev tools.
+ *
+ * OPTIMIZED: Uses caching, O(1) Set lookups, and early exit patterns.
+ * Walks up fiber tree checking component names (fast) before nativeIDs.
+ *
+ * When excludeDevTools setting is false, only the Highlight Updates overlay
+ * is excluded (to prevent infinite loops). Other dev tools will be highlighted.
+ */
+function isOurOverlayNode(stateNode) {
+  const node = stateNode;
+  // Fabric: fiber is at canonical.internalInstanceHandle
+  // Paper/Legacy: fiber is at _internalInstanceHandle directly on stateNode
+  // RN CLI DEV: fiber is at _internalFiberInstanceHandleDEV
+  const fiber = node?.canonical?.internalInstanceHandle || node?._internalInstanceHandle || node?._internalFiberInstanceHandleDEV;
+
+  // Get nativeTag for caching
+  const nativeTag = getNativeTag(stateNode) || getNativeTag(node?.canonical?.publicInstance);
+
+  // Check if we should exclude all dev tools or just highlight overlay.
+  // Bench "profile our own tools" mode (the example app's /tool-bench page)
+  // forces this OFF so live highlight boxes flash on our tool UI too —
+  // except the perf-monitor HUD (checked separately in the walk below),
+  // whose 250ms sample-tick churn would flash constantly. Cache reads and
+  // writes are already gated on excludeDevTools, so bench mode bypasses
+  // the cache and can't poison it.
+  const benchMode = isCapturingBuoyToolRenders();
+  const excludeDevTools = !benchMode && RenderTracker.getSettings().excludeDevTools;
+
+  // Check cache first (O(1)) - but only for the current excludeDevTools setting
+  // When excludeDevTools is false, skip cache to re-evaluate all nodes
+  if (nativeTag != null && excludeDevTools) {
+    const cached = devToolsNodeCache.get(nativeTag);
+    if (cached !== undefined) {
+      return cached;
+    }
+  }
+  let result = false;
+
+  // Fast path: check direct nativeID
+  const directNativeID = fiber?.pendingProps?.nativeID || fiber?.memoizedProps?.nativeID || node?.canonical?.currentProps?.nativeID || null;
+
+  // Always check highlight overlay nativeIDs first (must always be excluded)
+  if (isHighlightOverlayNativeID(directNativeID)) {
+    result = true;
+  } else if (excludeDevTools && isOtherDevToolsNativeID(directNativeID)) {
+    // Only check other dev tools if excludeDevTools is enabled
+    result = true;
+  }
+  if (!result && fiber) {
+    // Walk up fiber tree - check component names FIRST (they appear early)
+    let current = fiber;
+    let depth = 0;
+
+    // Reduced max depth - component names appear by depth 15 typically
+    while (current && depth < 30) {
+      // Component name check FIRST (faster, appears earlier in tree)
+      const name = getComponentName(current);
+      if (name) {
+        // Always check highlight overlay components (must always be excluded)
+        if (HIGHLIGHT_OVERLAY_COMPONENTS.has(name)) {
+          result = true;
+          break;
+        }
+        // Check highlight overlay prefixes
+        for (const prefix of HIGHLIGHT_OVERLAY_PREFIXES) {
+          if (name.startsWith(prefix)) {
+            result = true;
+            break;
+          }
+        }
+        if (result) break;
+
+        // Bench mode: the perf-monitor HUD still never flashes.
+        if (benchMode && isPerfMonitorComponentName(name)) {
+          result = true;
+          break;
+        }
+
+        // Only check other dev tools if excludeDevTools is enabled
+        if (excludeDevTools) {
+          // Two sets, same meaning: COMPONENTS is the original list, EXACT
+          // holds the names that used to be matched by over-broad prefixes
+          // (the "Virtualized" that hid every FlatList, the "Dial" that hid
+          // every Dialog). Both paths must consult both, or Buoy's own chrome
+          // starts flashing highlight boxes in one of them and not the other.
+          if (OTHER_DEV_TOOLS_COMPONENTS.has(name) || OTHER_DEV_TOOLS_EXACT.has(name)) {
+            result = true;
+            break;
+          }
+          // Check other dev tools prefixes
+          for (const prefix of OTHER_DEV_TOOLS_PREFIXES) {
+            if (name.startsWith(prefix)) {
+              result = true;
+              break;
+            }
+          }
+          if (result) break;
+        }
+      }
+
+      // NativeID check (only if component name didn't match)
+      const nativeID = current.pendingProps?.nativeID || current.memoizedProps?.nativeID;
+      if (isHighlightOverlayNativeID(nativeID)) {
+        result = true;
+        break;
+      }
+      if (excludeDevTools && isOtherDevToolsNativeID(nativeID)) {
+        result = true;
+        break;
+      }
+      current = current.return;
+      depth++;
+    }
+  }
+
+  // Only cache positive results when excludeDevTools is true (default mode)
+  // Don't cache when excludeDevTools is false to avoid complex cache invalidation
+  if (result && nativeTag != null && excludeDevTools) {
+    if (devToolsNodeCache.size >= CACHE_MAX_SIZE) {
+      // Clear oldest entries (simple strategy - clear half)
+      const entries = Array.from(devToolsNodeCache.keys());
+      for (let i = 0; i < CACHE_MAX_SIZE / 2; i++) {
+        devToolsNodeCache.delete(entries[i]);
+      }
+    }
+    devToolsNodeCache.set(nativeTag, result);
+  }
+  return result;
+}
+
+/**
+ * Get color based on render count (same algorithm as DevTools)
+ * More renders = warmer color (cyan → yellow)
+ */
+function getColorForRenderCount(count) {
+  // Clamp to color array bounds
+  const index = Math.min(count - 1, COLORS.length - 1);
+  return COLORS[Math.max(0, index)];
+}
+
+/**
+ * Handle traceUpdates event from DevTools backend
+ * This is called with a Set of stateNodes that should be highlighted
+ *
+ * Strategy to prevent infinite loops:
+ * 1. Use a rendering lock while rendering highlights
+ * 2. Use an isProcessing flag to prevent concurrent processing
+ * 3. If Chrome DevTools agent is available, use native overlay (faster, no React)
+ * 4. Otherwise, use our React overlay with locks to prevent cascading renders
+ */
+function handleTraceUpdates(nodes) {
+  if (nodes.size === 0) {
+    return;
+  }
+
+  // Skip if neither visual toggle nor background tracking is enabled
+  if (!globalEnabled && !backgroundTrackingEnabled) {
+    return;
+  }
+
+  // Skip processing when paused - don't count renders or show highlights
+  const trackerState = RenderTracker.getState();
+  if (trackerState.isPaused) {
+    return;
+  }
+
+  // Mark event received for end-to-end timing
+  if (PerformanceLogger.isEnabled()) {
+    markEventReceived();
+  }
+
+  // Start performance timing
+  const batchSize = RenderTracker.getBatchSize();
+  const perfTimer = PerformanceLogger.startBatch(nodes.size, batchSize);
+
+  // NOTE: Lock-based skipping disabled - relying on nativeID filtering instead
+  // If nativeID filtering doesn't work, re-enable this:
+  //
+  // if (renderingLock || isProcessing) {
+  //   if (DEBUG_LOGGING) {
+  //     console.log(`[HighlightUpdates] SKIPPED - lock:${renderingLock} processing:${isProcessing}`);
+  //   }
+  //   return;
+  // }
+  // isProcessing = true;
+
+  // Process nodes: track render counts and assign colors
+  // Filter out our own overlay nodes to prevent infinite loop
+  // Also apply user-defined filters to both overlay AND tracking
+  const nodesToDraw = [];
+  let skippedOverlayCount = 0;
+  let skippedByFilterCount = 0;
+  const hasActiveFilters = RenderTracker.hasActiveFilters();
+  for (const stateNode of nodes) {
+    if (stateNode && typeof stateNode === "object") {
+      try {
+        // Skip our own overlay nodes (identified by nativeID)
+        if (isOurOverlayNode(stateNode)) {
+          skippedOverlayCount++;
+          continue;
+        }
+
+        // Get nativeTag for tracking render counts
+        const publicInstance = getPublicInstance(stateNode);
+        const nativeTag = getNativeTag(stateNode) || getNativeTag(publicInstance);
+        if (nativeTag == null) {
+          continue;
+        }
+
+        // Extract component info for filtering
+        const componentInfo = extractComponentInfo(stateNode);
+
+        // Apply user-defined filters - skip components that don't pass filters
+        // This affects BOTH the overlay highlights AND the render list
+        if (hasActiveFilters && !RenderTracker.passesFilters(componentInfo)) {
+          skippedByFilterCount++;
+          continue;
+        }
+
+        // Check if render counting is enabled
+        const showRenderCount = RenderTracker.getSettings().showRenderCount;
+        let newCount;
+        let color;
+        if (showRenderCount) {
+          // Get current render count and increment (using nativeTag as stable key)
+          const currentCount = nodeRenderCounts.get(nativeTag) || 0;
+          newCount = currentCount + 1;
+          nodeRenderCounts.set(nativeTag, newCount);
+          // Assign color based on render count
+          color = getColorForRenderCount(newCount);
+        } else {
+          // Skip counting - use fixed color and count of 0
+          newCount = 0;
+          color = COLORS[0]; // Use first color (cyan)
+        }
+        nodesToDraw.push({
+          node: stateNode,
+          color,
+          count: newCount
+        });
+      } catch {
+        // Skip nodes from custom renderers (e.g. React Native Skia) that have
+        // non-standard stateNode structures
+      }
+    }
+  }
+
+  // Mark filtering phase complete (includes both overlay nodes and user-filtered nodes)
+  perfTimer.markFilteringComplete(skippedOverlayCount + skippedByFilterCount, nodesToDraw.length);
+
+  // Only log if there are real updates (not just overlay re-renders)
+  if (nodesToDraw.length === 0) {
+    // All nodes were overlay nodes - silently skip
+    perfTimer.finish(); // Still log the batch even if empty
+    return;
+  }
+
+  // Log actual component updates
+  if (DEBUG_LOGGING) {
+    console.log(`[HighlightUpdates] ${nodesToDraw.length} component(s) re-rendered`);
+  }
+
+  // NOTE: We prefer our React overlay for standalone operation.
+  // The native overlay only works when Chrome DevTools profiler is actively enabled.
+  // Uncomment below to use native overlay when available:
+  //
+  // const agent = hook?.reactDevtoolsAgent;
+  // if (agent?.emit) {
+  //   if (DEBUG_LOGGING) {
+  //     console.log(`[HighlightUpdates] Using native overlay (agent available)`);
+  //   }
+  //   agent.emit("drawTraceUpdates", nodesToDraw);
+  //   isProcessing = false;
+  //   return;
+  // }
+
+  // Check if we should process - either we have a visual callback OR event callbacks
+  const hasEventCallbacks = RenderTracker.getRenderEventCallbackCount() > 0;
+  if (!highlightCallback && !hasEventCallbacks) {
+    if (DEBUG_LOGGING) {
+      console.log(`[HighlightUpdates] No highlightCallback and no event callbacks - skipping render`);
+    }
+    isProcessing = false;
+    return;
+  }
+
+  // NOTE: Lock disabled - relying on nativeID filtering instead
+
+  // Measure each node and call the highlight callback
+  // Use batch size from RenderTracker settings (default: 150)
+  // Note: batchSize already retrieved above for perfTimer
+  perfTimer.markMeasurementStart();
+  // Measure up to 4× batchSize: coalesced commits can exceed one batch and
+  // the old hard slice silently never highlighted the same tail components.
+  const measurePromises = nodesToDraw.slice(0, batchSize * 4).map(({
+    node: stateNode,
+    color,
+    count
+  }) => new Promise(resolve => {
+    // RN silently never fires measure callbacks for detached nodes;
+    // without this timeout one dead node hangs the whole batch's
+    // Promise.all (no boxes, no tracking, counts still climb).
+    let settled = false;
+    const settle = value => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timeoutId);
+      resolve(value);
+    };
+    const timeoutId = setTimeout(() => settle({
+      rect: null,
+      stateNode,
+      color,
+      count
+    }), 500);
+    const publicInstance = getPublicInstance(stateNode);
+    const nativeTag = getNativeTag(stateNode) || getNativeTag(publicInstance);
+    if (nativeTag == null) {
+      settle({
+        rect: null,
+        stateNode,
+        color,
+        count
+      });
+      return;
+    }
+    const onMeasured = (x, y, width, height, pageX, pageY) => {
+      if (pageX == null || pageY == null || width == null || height == null) {
+        settle({
+          rect: null,
+          stateNode,
+          color,
+          count
+        });
+        return;
+      }
+      settle({
+        rect: {
+          id: nativeTag,
+          x: pageX,
+          y: pageY,
+          width,
+          height,
+          color,
+          count
+        },
+        stateNode,
+        color,
+        count
+      });
+    };
+    if (!publicInstance) {
+      // New Architecture: canonical.publicInstance is often lazily
+      // ABSENT on traceUpdates wrappers — measure the wrapper's `node`
+      // (the Fabric shadow node) directly through FabricUIManager.
+      const fabricNode = stateNode.node;
+      const fabricUI = globalThis.nativeFabricUIManager;
+      if (fabricNode && fabricUI?.measure) {
+        try {
+          fabricUI.measure(fabricNode, onMeasured);
+        } catch (error) {
+          settle({
+            rect: null,
+            stateNode,
+            color,
+            count
+          });
+        }
+        return;
+      }
+      settle({
+        rect: null,
+        stateNode,
+        color,
+        count
+      });
+      return;
+    }
+    try {
+      publicInstance.measure(onMeasured);
+    } catch (error) {
+      settle({
+        rect: null,
+        stateNode,
+        color,
+        count
+      });
+    }
+  }));
+  Promise.all(measurePromises).then(results => {
+    const validResults = results.filter(r => r.rect !== null);
+    const rects = validResults.map(r => r.rect);
+
+    // Mark measurement phase complete
+    perfTimer.markMeasurementComplete(validResults.length, results.length - validResults.length);
+
+    // DRAW FIRST. With the render list open, tracking a big burst
+    // (store writes + cause detection + list row rebuilds) used to run
+    // BEFORE the highlight callback, so boxes painted ~0.7s later
+    // (user-timed: 1.3s list-closed vs 2s+ list-open, 2026-07-08).
+    // Boxes are the product — paint them, then bookkeep.
+    if (rects.length > 0 && highlightCallback && globalEnabled && !highlightsSuppressed) {
+      highlightCallback(rects);
+    }
+
+    // Tracking/list work runs in a macrotask so React commits the boxes
+    // before this heavier pass starts.
+    setTimeout(() => {
+      // Keep a live handle to each measured node so the desktop's "capture this
+      // component" flow can re-measure (and scroll to) it on demand later.
+      // Defensive: never let registration break the measurement/tracking batch.
+      try {
+        for (const r of validResults) {
+          if (r.rect) registerTrackedNode(r.rect.id, r.stateNode);
+        }
+      } catch (e) {
+        debugLog("registerTrackedNode batch failed", e);
+      }
+
+      // Track renders - behavior differs based on what's enabled:
+      // - globalEnabled (visual tool): full tracking with storage and list updates
+      // - backgroundTrackingEnabled only (Events tool): emit events only, no storage
+      const settings = RenderTracker.getSettings();
+      const trackCauses = settings.trackRenderCauses && settings.showRenderCount;
+      let batchNativeTags = null;
+      if (trackCauses) {
+        batchNativeTags = new Set();
+        for (const {
+          rect
+        } of validResults) {
+          if (rect) {
+            batchNativeTags.add(rect.id);
+          }
+        }
+      }
+      if (globalEnabled) {
+        // Visual tool is on - full tracking with storage and list notifications
+        RenderTracker.startBatch();
+        for (const {
+          rect,
+          stateNode,
+          color,
+          count
+        } of validResults) {
+          if (rect) {
+            const componentInfo = extractComponentInfo(stateNode);
+            let renderCause;
+            if (trackCauses && batchNativeTags) {
+              const node = stateNode;
+              const fiber = node?.canonical?.internalInstanceHandle;
+              renderCause = detectRenderCause(rect.id, fiber, batchNativeTags, settings.debugLogLevel);
+            }
+            RenderTracker.trackRender({
+              nativeTag: rect.id,
+              viewType: componentInfo.viewType,
+              testID: componentInfo.testID,
+              nativeID: componentInfo.nativeID,
+              accessibilityLabel: componentInfo.accessibilityLabel,
+              componentName: componentInfo.componentName,
+              measurements: {
+                x: rect.x,
+                y: rect.y,
+                width: rect.width,
+                height: rect.height
+              },
+              color,
+              count,
+              renderCause
+            });
+          }
+        }
+        RenderTracker.endBatch();
+      } else {
+        // Only background tracking (Events tool) - emit events without storage
+        for (const {
+          rect,
+          stateNode,
+          color,
+          count
+        } of validResults) {
+          if (rect) {
+            const componentInfo = extractComponentInfo(stateNode);
+            let renderCause;
+            if (trackCauses && batchNativeTags) {
+              const node = stateNode;
+              const fiber = node?.canonical?.internalInstanceHandle;
+              renderCause = detectRenderCause(rect.id, fiber, batchNativeTags, settings.debugLogLevel);
+            }
+            RenderTracker.emitRenderEvent({
+              nativeTag: rect.id,
+              viewType: componentInfo.viewType,
+              testID: componentInfo.testID,
+              nativeID: componentInfo.nativeID,
+              accessibilityLabel: componentInfo.accessibilityLabel,
+              componentName: componentInfo.componentName,
+              measurements: {
+                x: rect.x,
+                y: rect.y,
+                width: rect.width,
+                height: rect.height
+              },
+              color,
+              count,
+              renderCause
+            });
+          }
+        }
+      }
+
+      // Mark tracking phase complete
+      perfTimer.markTrackingComplete();
+
+      // Mark callback phase complete and finish timing
+      perfTimer.markCallbackComplete();
+      perfTimer.finish();
+    }, 0);
+  }).catch(error => {
+    console.error("[HighlightUpdates] Error in measurement pipeline:", error);
+    perfTimer.finish(); // Still log timing even on error
+  });
+}
+
+/* ================================================================== *
+ * Component locator — powers the desktop "screenshot this component"
+ * flow. The dashboard sends a query (testID / nativeID / name / nativeTag);
+ * we resolve it to a live native node, best-effort scroll it into view,
+ * re-measure its on-screen rectangle, and return that (plus the pixel scale
+ * and screen size) so the desktop can crop the simulator screenshot to it.
+ * ================================================================== */
+
+// nativeTag → live node, weakly held (when WeakRef exists in the runtime) so
+// unmounted views can still be GC'd. WeakRef isn't in this package's TS lib, so
+// reach it through globalThis rather than the (untyped) global.
+const WeakRefCtor = globalThis.WeakRef;
+const nodeRegistry = new Map();
+function registerTrackedNode(nativeTag, stateNode) {
+  // WeakRef throws if the target isn't an object, so guard hard — this runs in
+  // the measure pipeline and must never break tracking.
+  if (nativeTag == null || stateNode == null || typeof stateNode !== "object") {
+    return;
+  }
+  try {
+    nodeRegistry.set(nativeTag, WeakRefCtor ? new WeakRefCtor(stateNode) : {
+      deref: () => stateNode
+    });
+  } catch {
+    nodeRegistry.set(nativeTag, {
+      deref: () => stateNode
+    });
+  }
+}
+function derefNode(nativeTag) {
+  const ref = nodeRegistry.get(nativeTag);
+  const node = ref?.deref();
+  if (!node) nodeRegistry.delete(nativeTag);
+  return node ?? null;
+}
+
+/** Promisified absolute measure → on-screen rect in points (or null). */
+function measureNode(publicInstance) {
+  return new Promise(resolve => {
+    try {
+      publicInstance.measure((_x, _y, width, height, pageX, pageY) => {
+        if (pageX == null || pageY == null || width == null || height == null) {
+          resolve(null);
+        } else {
+          resolve({
+            x: pageX,
+            y: pageY,
+            width,
+            height
+          });
+        }
+      });
+    } catch {
+      resolve(null);
+    }
+  });
+}
+function getFiberFromNode(stateNode) {
+  const node = stateNode;
+  return node?.canonical?.internalInstanceHandle || node?._internalInstanceHandle || node?._internalFiberInstanceHandleDEV || null;
+}
+
+/**
+ * Walk up the fiber tree from a node to find the nearest ScrollView-like
+ * instance (anything exposing scrollTo + an inner content node).
+ */
+function findScrollAncestor(stateNode) {
+  let fiber = getFiberFromNode(stateNode);
+  let guard = 0;
+  while (fiber && guard++ < 200) {
+    const inst = fiber.stateNode;
+    if (inst && typeof inst.scrollTo === "function") {
+      // getInnerViewNode()/getScrollableNode() return a numeric node handle —
+      // only valid for the legacy UIManager.measureLayout fallback below.
+      // Fabric's ref.measureLayout requires an actual host-component ref
+      // (getNativeScrollRef()); passing it a number trips a dev warning
+      // ("ref.measureLayout must be called with a ref to a native component")
+      // and silently resolves neither callback.
+      const nativeRef = typeof inst.getNativeScrollRef === "function" && inst.getNativeScrollRef() || null;
+      const innerNode = typeof inst.getInnerViewNode === "function" && inst.getInnerViewNode() || typeof inst.getScrollableNode === "function" && inst.getScrollableNode() || inst;
+      return {
+        instance: inst,
+        nativeRef,
+        innerNode
+      };
+    }
+    fiber = fiber.return;
+  }
+  return null;
+}
+
+/**
+ * Best-effort scroll of an ancestor ScrollView so the target sits near the top
+ * of its viewport. Returns true only if a scroll was actually issued. Never
+ * throws — if anything is missing (no ScrollView, measureLayout unsupported)
+ * it quietly returns false and the caller measures wherever the node is.
+ */
+async function scrollDescendantIntoView(stateNode, publicInstance, margin) {
+  try {
+    const ancestor = findScrollAncestor(stateNode);
+    if (!ancestor) return false;
+
+    // Position of the target WITHIN the scroll content — independent of the
+    // current scroll offset (the standard RN keyboard-aware-scroll technique).
+    // Try the Fabric path (ref.measureLayout against the inner view instance)
+    // first, then fall back to the legacy UIManager.measureLayout with tags.
+    const inst = publicInstance;
+    let top = null;
+
+    // On some architectures measureLayout invokes NEITHER callback, which would
+    // hang the await forever — always race it against a short timeout.
+    const withTimeout = run => new Promise(resolve => {
+      let done = false;
+      const settle = v => {
+        if (done) return;
+        done = true;
+        resolve(v);
+      };
+      const timer = setTimeout(() => settle(null), 600);
+      try {
+        run(v => {
+          clearTimeout(timer);
+          settle(v);
+        });
+      } catch {
+        clearTimeout(timer);
+        settle(null);
+      }
+    });
+    if (ancestor.nativeRef && typeof inst.measureLayout === "function") {
+      top = await withTimeout(resolve => inst.measureLayout(ancestor.nativeRef, (_left, t) => resolve(t), () => resolve(null)));
+    }
+    if (top == null) {
+      const targetHandle = findNodeHandle(publicInstance);
+      const innerHandle = typeof ancestor.innerNode === "number" ? ancestor.innerNode : findNodeHandle(ancestor.innerNode);
+      if (targetHandle != null && innerHandle != null) {
+        top = await withTimeout(resolve => UIManager.measureLayout(targetHandle, innerHandle, () => resolve(null), (_left, t) => resolve(t)));
+      }
+    }
+    if (top == null) return false;
+    ancestor.instance.scrollTo({
+      y: Math.max(0, top - margin),
+      animated: false
+    });
+    // Let the scroll + layout settle before the caller re-measures.
+    await new Promise(r => setTimeout(r, 80));
+    return true;
+  } catch {
+    return false;
+  }
+}
+function matchScore(r, q) {
+  const fields = [r.testID, r.nativeID, r.accessibilityLabel, r.componentName, r.viewType, String(r.nativeTag)];
+  let best = 0;
+  for (const f of fields) {
+    if (!f) continue;
+    const lower = f.toLowerCase();
+    if (lower === q) return 3; // exact wins outright
+    if (lower.startsWith(q)) best = Math.max(best, 2);else if (lower.includes(q)) best = Math.max(best, 1);
+  }
+  return best;
+}
+
+/**
+ * Resolve a component query to a fresh on-screen rectangle. See
+ * LocateComponentResult for the shape. Always resolves (never rejects).
+ */
+async function locateComponent(params) {
+  const scrollIntoView = params.scrollIntoView !== false;
+  const margin = typeof params.margin === "number" ? params.margin : 12;
+  const renders = RenderTracker.getRenders();
+  if (renders.length === 0) {
+    const described = await describeScreen();
+    const q = (params.query ?? "").trim().toLowerCase();
+    let best;
+    for (const el of described.elements) {
+      if (params.nativeTag != null && el.nativeTag === params.nativeTag) {
+        best = {
+          el,
+          score: 1000
+        };
+        break;
+      }
+      const score = scoreTapMatch({
+        nativeTag: el.nativeTag,
+        testID: el.testID,
+        label: el.label,
+        text: el.text,
+        name: el.name,
+        tap: el.tap
+      }, {
+        query: q || undefined,
+        nativeTag: params.nativeTag
+      });
+      if (score <= 0) continue;
+      if (!best || score > best.score) best = {
+        el,
+        score
+      };
+    }
+    if (!best?.el.frame) {
+      return {
+        matched: false,
+        reason: "no-match",
+        candidates: []
+      };
+    }
+    const win = described.screen;
+    const f = best.el.frame;
+    return {
+      matched: true,
+      live: true,
+      rect: {
+        x: f.x * win.width,
+        y: f.y * win.height,
+        width: f.width * win.width,
+        height: f.height * win.height
+      },
+      scale: PixelRatio.get(),
+      screen: {
+        width: win.width,
+        height: win.height
+      },
+      nativeTag: best.el.nativeTag ?? undefined,
+      componentName: best.el.name,
+      testID: best.el.testID
+    };
+  }
+
+  // Rank candidates (skip ranking when an explicit nativeTag was given).
+  const q = (params.query ?? "").trim().toLowerCase();
+  const ranked = q ? renders.map(r => ({
+    r,
+    score: matchScore(r, q)
+  })).filter(x => x.score > 0).sort((a, b) => b.score - a.score || b.r.lastRenderTime - a.r.lastRenderTime) : [];
+  const candidates = ranked.slice(0, 8).map(({
+    r
+  }) => ({
+    nativeTag: r.nativeTag,
+    componentName: r.componentName,
+    testID: r.testID,
+    nativeID: r.nativeID,
+    viewType: r.viewType,
+    renderCount: r.renderCount
+  }));
+  const targetTag = params.nativeTag ?? (ranked.length > 0 ? ranked[0].r.nativeTag : undefined);
+  if (targetTag == null) {
+    return {
+      matched: false,
+      reason: "no-match",
+      candidates
+    };
+  }
+  const tracked = renders.find(r => r.nativeTag === targetTag);
+
+  // Try a live re-measure (and scroll) using the registered node.
+  let rect = null;
+  let live = false;
+  let scrolled = false;
+  const node = derefNode(targetTag);
+  if (node) {
+    const publicInstance = getPublicInstance(node);
+    if (publicInstance) {
+      if (scrollIntoView) {
+        scrolled = await scrollDescendantIntoView(node, publicInstance, margin);
+      }
+      rect = await measureNode(publicInstance);
+      live = !!rect;
+    }
+  }
+
+  // Fall back to the last synced measurement if the live path failed.
+  if (!rect && tracked?.measurements) {
+    rect = {
+      ...tracked.measurements
+    };
+  }
+  if (!rect) {
+    return {
+      matched: false,
+      reason: "no-measurement",
+      nativeTag: targetTag,
+      candidates
+    };
+  }
+  const scale = PixelRatio.get();
+  const win = Dimensions.get("window");
+  const inView = rect.x >= -1 && rect.y >= -1 && rect.x + rect.width <= win.width + 1 && rect.y + rect.height <= win.height + 1;
+  return {
+    matched: true,
+    live,
+    scrolled,
+    inView,
+    rect,
+    scale,
+    screen: {
+      width: win.width,
+      height: win.height
+    },
+    nativeTag: targetTag,
+    componentName: tracked?.componentName,
+    testID: tracked?.testID,
+    candidates
+  };
+}
+
+/**
+ * Enable or disable trace updates on all renderer interfaces.
+ * This is the key function that makes standalone tracing work!
+ *
+ * The rendererInterfaces map contains the renderer backend for each React root.
+ * Each renderer has a setTraceUpdatesEnabled function that controls whether
+ * it emits 'traceUpdates' events when components re-render.
+ *
+ * See: react-devtools-core/dist/backend.js line 15487-15489
+ */
+function setTraceUpdatesOnRenderers(enabled) {
+  if (!hook?.rendererInterfaces) {
+    debugLog("No rendererInterfaces available");
+    return;
+  }
+  let count = 0;
+  hook.rendererInterfaces.forEach((rendererInterface, rendererId) => {
+    if (typeof rendererInterface.setTraceUpdatesEnabled === "function") {
+      try {
+        rendererInterface.setTraceUpdatesEnabled(enabled);
+        count++;
+        debugLog(`Renderer ${rendererId}: setTraceUpdatesEnabled(${enabled})`);
+      } catch (error) {
+        debugLog(`Renderer ${rendererId}: error setting trace updates`, error);
+      }
+    } else {
+      debugLog(`Renderer ${rendererId}: no setTraceUpdatesEnabled method`);
+    }
+  });
+  debugLog(`Set trace updates ${enabled ? "enabled" : "disabled"} on ${count} renderer(s)`);
+
+  // Also try the agent if available (in case DevTools is connected)
+  if (hook.reactDevtoolsAgent?.setTraceUpdatesEnabled) {
+    try {
+      hook.reactDevtoolsAgent.setTraceUpdatesEnabled(enabled);
+      debugLog("Also set trace updates on agent");
+    } catch (error) {
+      debugLog("Error setting trace updates on agent", error);
+    }
+  }
+}
+
+/**
+ * Subscribe to the traceUpdates event from the hook
+ */
+function subscribeToTraceUpdates() {
+  if (!hook) return;
+  if (traceUpdatesUnsubscribe) return; // Already subscribed
+
+  debugLog("Subscribing to traceUpdates event");
+
+  // The hook uses EventEmitter pattern with 'sub' method
+  // See: react-devtools-core/dist/backend.js line 17526
+  // hook.sub('traceUpdates', agent.onTraceUpdates)
+  if (typeof hook.sub === "function") {
+    traceUpdatesUnsubscribe = hook.sub("traceUpdates", handleTraceUpdates);
+    debugLog("Subscribed using hook.sub()");
+  } else {
+    debugLog("hook.sub not available, traceUpdates may not work");
+  }
+
+  // CRITICAL: Enable trace updates on all renderers
+  // Without this, the renderers won't emit traceUpdates events
+  setTraceUpdatesOnRenderers(true);
+}
+
+/**
+ * Unsubscribe from the traceUpdates event
+ */
+function unsubscribeFromTraceUpdates() {
+  // Disable trace updates on renderers first
+  setTraceUpdatesOnRenderers(false);
+  if (traceUpdatesUnsubscribe) {
+    traceUpdatesUnsubscribe();
+    traceUpdatesUnsubscribe = null;
+    debugLog("Unsubscribed from traceUpdates event");
+  }
+}
+
+/**
+ * Set the callback for rendering highlights
+ */
+function setHighlightCallback(callback) {
+  highlightCallback = callback;
+  debugLog(`Highlight callback ${callback ? "set" : "cleared"}`);
+}
+
+/**
+ * Set the callback for when a badge is pressed.
+ * This is used to navigate to the detail view when a user taps a render count badge.
+ */
+function setBadgePressCallback(callback) {
+  badgePressCallback = callback;
+  debugLog(`Badge press callback ${callback ? "set" : "cleared"}`);
+}
+
+/**
+ * Get the current badge press callback.
+ * Used by the overlay to check if badge presses should be handled.
+ */
+function getBadgePressCallback() {
+  return badgePressCallback;
+}
+
+/**
+ * Handle a badge press event.
+ * Calls the registered callback with the nativeTag of the component.
+ */
+function handleBadgePress(nativeTag) {
+  if (badgePressCallback) {
+    badgePressCallback(nativeTag);
+  }
+}
+
+// Spotlight highlight state - for showing which component is being viewed in detail
+
+let spotlightCallback = null;
+let currentSpotlightTag = null;
+
+/**
+ * Set the callback for spotlight highlighting.
+ * Used by the overlay to show a special highlight for the component being viewed.
+ */
+function setSpotlightCallback(callback) {
+  spotlightCallback = callback;
+  // If there's an existing spotlight, notify the new callback
+  if (callback && currentSpotlightTag !== null) {
+    callback(currentSpotlightTag);
+  }
+}
+
+/**
+ * Set a spotlight highlight on a specific component.
+ * This is used when viewing a component's detail to show which one it is.
+ */
+function setSpotlight(nativeTag) {
+  if (remoteHandler) {
+    remoteHandler("setSpotlight", {
+      nativeTag
+    });
+    return;
+  }
+  currentSpotlightTag = nativeTag;
+  if (spotlightCallback) {
+    spotlightCallback(nativeTag);
+  }
+}
+
+// ============================================================================
+// REMOTE MIRROR MODE
+// ============================================================================
+
+let remoteHandler = null;
+
+/**
+ * Remote mirror mode (desktop dashboard): while a handler is set, mutations
+ * (toggle/setEnabled/toggleFreeze/clearRenderCounts/setSpotlight) forward
+ * (method, params) to the synced device instead of touching the local React
+ * internals — the resulting state comes back via replaceRemoteState(). Pass
+ * null to restore local behavior.
+ */
+function setRemoteHandler(handler) {
+  remoteHandler = handler;
+}
+
+/**
+ * Mirror the synced device's enabled/frozen flags into the local listeners
+ * (so the modal's toggle buttons reflect the device). Never patches React
+ * internals — it only updates the flags the UI reads.
+ */
+function replaceRemoteState(state) {
+  if (globalEnabled !== state.enabled) {
+    globalEnabled = state.enabled;
+    notifyStateListeners();
+  }
+  if (isFrozen !== state.frozen) {
+    isFrozen = state.frozen;
+    notifyFreezeListeners();
+  }
+}
+
+/**
+ * Get the current spotlight nativeTag.
+ */
+function getSpotlight() {
+  return currentSpotlightTag;
+}
+function notifyStateListeners() {
+  stateListeners.forEach(listener => {
+    try {
+      listener(globalEnabled);
+    } catch (error) {
+      console.error("[HighlightUpdates] Error in state listener:", error);
+    }
+  });
+}
+function subscribe(listener) {
+  stateListeners.add(listener);
+  listener(globalEnabled);
+  return () => {
+    stateListeners.delete(listener);
+  };
+}
+function initialize() {
+  if (typeof __DEV__ !== "undefined" && !__DEV__) {
+    debugLog("Only available in development builds");
+    return false;
+  }
+
+  // Remote mirror mode: initialization (DevTools hook, fiber walking)
+  // belongs to the device — pretend success so callers proceed to the
+  // forwarded toggle.
+  if (remoteHandler) {
+    return true;
+  }
+  if (initialized) {
+    return true;
+  }
+  hook = window?.__REACT_DEVTOOLS_GLOBAL_HOOK__ || null;
+  if (!hook) {
+    debugLog("React DevTools hook not found");
+    return false;
+  }
+  debugLog("Hook found");
+  debugLog(`Hook has sub: ${typeof hook.sub === "function"}`);
+  debugLog(`Hook has on: ${typeof hook.on === "function"}`);
+  debugLog(`Hook has emit: ${typeof hook.emit === "function"}`);
+
+  // Install profiler interceptor to capture what DevTools detects
+  // This allows us to compare profiler data with our detection
+  installProfilerInterceptor();
+
+  // Comparison callback available for future use when we re-enable our implementation
+  // setComparisonCallback((profilerNodes: Set<unknown>) => {
+  //   debugLog(`[COMPARISON] Profiler detected ${profilerNodes.size} nodes`);
+  // });
+
+  if (hook.rendererInterfaces && hook.rendererInterfaces.size > 0) {
+    initialized = true;
+    debugLog(`Initialized with ${hook.rendererInterfaces.size} renderer(s)`);
+    exposeGlobally();
+    return true;
+  }
+
+  // Wait for renderer to be available
+  const checkInterval = setInterval(() => {
+    if (hook?.rendererInterfaces && hook.rendererInterfaces.size > 0) {
+      clearInterval(checkInterval);
+      initialized = true;
+      debugLog(`Initialized with ${hook.rendererInterfaces.size} renderer(s) (delayed)`);
+      exposeGlobally();
+    }
+  }, 100);
+  setTimeout(() => clearInterval(checkInterval), 10000);
+  return false;
+}
+function exposeGlobally() {
+  if (typeof window !== "undefined") {
+    window.__HIGHLIGHT_UPDATES_CONTROLLER__ = {
+      enable,
+      disable,
+      toggle,
+      isEnabled,
+      setEnabled,
+      subscribe,
+      initialize,
+      destroy,
+      isInitialized: () => initialized,
+      setHighlightCallback
+    };
+  }
+}
+function enable() {
+  if (typeof __DEV__ !== "undefined" && !__DEV__) return;
+  if (!initialized) {
+    initialize();
+  }
+
+  // Enabling the VISUAL tool always means boxes should show — clear any
+  // suppression left over from a silent (screenshot-tool) session.
+  if (highlightsSuppressed) {
+    highlightsSuppressed = false;
+  }
+  if (globalEnabled) {
+    return;
+  }
+  debugLog("Enabling highlights");
+
+  // Only subscribe if not already subscribed via background tracking
+  if (!backgroundTrackingEnabled) {
+    subscribeToTraceUpdates();
+  }
+
+  // Start tracking renders
+  RenderTracker.start();
+
+  // Note: profiler logging disabled for normal operation
+  // enableProfilerLogging();
+
+  globalEnabled = true;
+  notifyStateListeners();
+  notifySubscriberCountChange('render');
+}
+function disable() {
+  if (typeof __DEV__ !== "undefined" && !__DEV__) return;
+  if (!globalEnabled) {
+    return;
+  }
+  debugLog("Disabling highlights");
+
+  // Clear any pending locks/state
+  renderingLock = false;
+  isProcessing = false;
+  if (renderingLockTimeout) {
+    clearTimeout(renderingLockTimeout);
+    renderingLockTimeout = null;
+  }
+  renderedOverlayTags.clear();
+  devToolsNodeCache.clear(); // Clear detection cache
+  clearRenderCauseState(); // Clear render cause state to prevent memory leaks
+
+  // Freeze is a view state on a LIVE overlay, and the overlay is going away:
+  // the boxes it was holding open were just cleared with the tags above. Left
+  // latched it outlived the thing it froze — switch tracking off and back on
+  // and the button still read "Unfreeze frame" on a tool with nothing frozen,
+  // while new highlights (correctly) refused to fade.
+  if (isFrozen) {
+    isFrozen = false;
+    notifyFreezeListeners();
+  }
+
+  // Only unsubscribe if background tracking doesn't need it
+  if (!backgroundTrackingEnabled) {
+    unsubscribeFromTraceUpdates();
+  }
+
+  // Stop tracking renders
+  RenderTracker.stop();
+
+  // Note: profiler logging disabled for normal operation
+  // disableProfilerLogging();
+
+  globalEnabled = false;
+  notifyStateListeners();
+  notifySubscriberCountChange('render');
+}
+
+/**
+ * Enable background render tracking (for Events tool).
+ * This enables render interception WITHOUT affecting the visual toggle state.
+ * The visual highlight toggle remains independent.
+ */
+function enableBackgroundTracking() {
+  if (typeof __DEV__ !== "undefined" && !__DEV__) return;
+  if (backgroundTrackingEnabled) {
+    return;
+  }
+  if (!initialized) {
+    initialize();
+  }
+  debugLog("Enabling background tracking");
+
+  // Only subscribe if not already subscribed via main toggle
+  if (!globalEnabled) {
+    subscribeToTraceUpdates();
+  }
+  backgroundTrackingEnabled = true;
+}
+
+/**
+ * Disable background render tracking (for Events tool).
+ * Only actually unsubscribes if the main toggle is also off.
+ */
+function disableBackgroundTracking() {
+  if (typeof __DEV__ !== "undefined" && !__DEV__) return;
+  if (!backgroundTrackingEnabled) {
+    return;
+  }
+  debugLog("Disabling background tracking");
+  backgroundTrackingEnabled = false;
+
+  // Only unsubscribe if main toggle is also off
+  if (!globalEnabled) {
+    unsubscribeFromTraceUpdates();
+  }
+}
+
+/**
+ * Check if background tracking is enabled (for debugging)
+ */
+function isBackgroundTrackingEnabled() {
+  return backgroundTrackingEnabled;
+}
+function toggle() {
+  if (typeof __DEV__ !== "undefined" && !__DEV__) return;
+  if (remoteHandler) {
+    remoteHandler("toggle");
+    return;
+  }
+  if (globalEnabled) {
+    disable();
+  } else {
+    enable();
+  }
+}
+
+/**
+ * Clear all render counts and tracked data
+ */
+function clearRenderCounts() {
+  if (remoteHandler) {
+    remoteHandler("clearRenderCounts");
+    return;
+  }
+  nodeRenderCounts.clear();
+  RenderTracker.clear();
+  debugLog("Cleared render counts");
+}
+function isEnabled() {
+  return globalEnabled;
+}
+function setEnabled(enabled) {
+  if (remoteHandler) {
+    remoteHandler("setEnabled", {
+      enabled
+    });
+    return;
+  }
+  if (enabled) enable();else disable();
+}
+
+/**
+ * Suppress (or restore) the visual highlight boxes without affecting tracking.
+ * When suppressing, any boxes currently on screen are cleared immediately.
+ */
+function setHighlightsSuppressed(suppressed) {
+  if (highlightsSuppressed === suppressed) return;
+  highlightsSuppressed = suppressed;
+  if (suppressed && highlightCallback) {
+    // Wipe whatever is currently drawn so nothing lingers.
+    highlightCallback([]);
+  }
+}
+function getHighlightsSuppressed() {
+  return highlightsSuppressed;
+}
+
+/**
+ * Silent tracking — used by the desktop "screenshot this component" flow.
+ * Turns the render tracker on (so the render list + measurements populate and
+ * sync) while keeping the visual highlight boxes hidden. Disabling restores
+ * normal state. On the desktop mirror this forwards to the device.
+ */
+function setSilentTracking(enabled) {
+  if (remoteHandler) {
+    remoteHandler("setSilentTracking", {
+      enabled
+    });
+    return;
+  }
+  if (enabled) {
+    enable(); // clears suppression as part of a visual enable...
+    setHighlightsSuppressed(true); // ...so re-suppress right after.
+  } else {
+    setHighlightsSuppressed(false);
+    disable();
+  }
+}
+function isInitialized() {
+  return initialized;
+}
+
+// ============================================================================
+// FREEZE FRAME MODE
+// ============================================================================
+
+/**
+ * Notify all freeze state listeners of a change
+ */
+function notifyFreezeListeners() {
+  freezeListeners.forEach(listener => {
+    try {
+      listener(isFrozen);
+    } catch (error) {
+      console.error("[HighlightUpdates] Error in freeze listener:", error);
+    }
+  });
+}
+
+/**
+ * Subscribe to freeze state changes
+ */
+function subscribeToFreeze(listener) {
+  freezeListeners.add(listener);
+  listener(isFrozen);
+  return () => {
+    freezeListeners.delete(listener);
+  };
+}
+
+/**
+ * Freeze highlights - prevents highlights from fading away.
+ * New renders are still captured but old highlights don't clear.
+ */
+function freeze() {
+  if (typeof __DEV__ !== "undefined" && !__DEV__) return;
+  if (isFrozen) return;
+  isFrozen = true;
+  debugLog("Freeze mode enabled");
+  notifyFreezeListeners();
+}
+
+/**
+ * Unfreeze highlights - resumes normal cleanup behavior.
+ * Clears all current highlights when unfreezing.
+ */
+function unfreeze() {
+  if (typeof __DEV__ !== "undefined" && !__DEV__) return;
+  if (!isFrozen) return;
+  isFrozen = false;
+  debugLog("Freeze mode disabled");
+
+  // Clear all current highlights when unfreezing
+  if (highlightCallback) {
+    highlightCallback([]);
+  }
+  notifyFreezeListeners();
+}
+
+/**
+ * Toggle freeze state
+ */
+function toggleFreeze() {
+  if (remoteHandler) {
+    remoteHandler("toggleFreeze");
+    return;
+  }
+  if (isFrozen) {
+    unfreeze();
+  } else {
+    freeze();
+  }
+}
+
+/**
+ * Check if freeze mode is active
+ */
+function getFrozen() {
+  return isFrozen;
+}
+function destroy() {
+  if (!initialized) return;
+  unsubscribeFromTraceUpdates();
+
+  // Uninstall profiler interceptor
+  uninstallProfilerInterceptor();
+  setComparisonCallback(null);
+
+  // Reset freeze state
+  isFrozen = false;
+  freezeListeners.clear();
+  globalEnabled = false;
+  hook = null;
+  highlightCallback = null;
+  initialized = false;
+  if (typeof window !== "undefined") {
+    delete window.__HIGHLIGHT_UPDATES_CONTROLLER__;
+  }
+  debugLog("Destroyed");
+}
+const HighlightUpdatesController = {
+  subscribe,
+  enable,
+  disable,
+  toggle,
+  isEnabled,
+  setEnabled,
+  initialize,
+  destroy,
+  isInitialized,
+  setHighlightCallback,
+  clearRenderCounts,
+  // Freeze frame mode
+  freeze,
+  unfreeze,
+  toggleFreeze,
+  getFrozen,
+  subscribeToFreeze,
+  // Badge press callback for "Click Overlay Badge → Jump to Detail"
+  setBadgePressCallback,
+  getBadgePressCallback,
+  handleBadgePress,
+  // Spotlight highlight for detail view
+  setSpotlightCallback,
+  setSpotlight,
+  getSpotlight,
+  // Cache management for excludeDevTools toggle
+  clearDevToolsCache,
+  // Background tracking for Events tool (separate from visual toggle)
+  enableBackgroundTracking,
+  disableBackgroundTracking,
+  isBackgroundTrackingEnabled,
+  // Remote mirror mode (desktop dashboard)
+  setRemoteHandler,
+  replaceRemoteState,
+  // Component locator (desktop "screenshot this component" flow)
+  locateComponent,
+  // Silent tracking (track + measure without drawing boxes)
+  setHighlightsSuppressed,
+  getHighlightsSuppressed,
+  setSilentTracking
+};
+export default HighlightUpdatesController;