@buoy-gg/highlight-updates 2.0.2

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

@@ -0,0 +1 @@
+"use strict";import{getComponentDisplayName}from"./ViewTypeMapper";import{PerformanceLogger}from"./PerformanceLogger";const MAX_TRACKED_COMPONENTS=200,DEFAULT_BATCH_SIZE=150;class RenderTrackerSingleton{renders=new Map;listeners=new Set;stateListeners=new Set;settingsListeners=new Set;filterListeners=new Set;isTracking=!1;isPaused=!1;settings={batchSize:150,showRenderCount:!0,performanceLogging:!1,trackRenderCauses:!1,enableRenderHistory:!0,maxRenderHistoryPerComponent:20,capturePropsOnRender:!1,captureStateOnRender:!1,debugLogLevel:"off",debugRawFiberLogging:!1};isBatchMode=!1;batchDirty=!1;filters={includeTestID:new Set,includeNativeID:new Set,includeViewType:new Set,includeComponent:new Set,excludeTestID:new Set,excludeNativeID:new Set,excludeViewType:new Set,excludeComponent:new Set,includePatterns:[],excludePatterns:[]};trackRender(e){if(this.isPaused)return;const t=String(e.nativeTag),s=Date.now(),i=this.renders.get(t);if(i)i.renderCount=e.count,i.lastRenderTime=s,i.color=e.color,e.measurements&&(i.measurements=e.measurements),e.testID&&!i.testID&&(i.testID=e.testID),e.nativeID&&!i.nativeID&&(i.nativeID=e.nativeID),e.accessibilityLabel&&!i.accessibilityLabel&&(i.accessibilityLabel=e.accessibilityLabel),e.componentName&&!i.componentName&&(i.componentName=e.componentName),e.renderCause&&(i.lastRenderCause=e.renderCause),this.settings.enableRenderHistory&&e.renderCause&&this.addRenderEvent(i,e.renderCause,e.capturedProps,e.capturedState);else{const i={id:t,nativeTag:e.nativeTag,viewType:e.viewType,displayName:getComponentDisplayName(e.viewType),testID:e.testID,nativeID:e.nativeID,accessibilityLabel:e.accessibilityLabel,componentName:e.componentName,renderCount:e.count,firstRenderTime:s,lastRenderTime:s,measurements:e.measurements,color:e.color,lastRenderCause:e.renderCause};if(this.settings.enableRenderHistory&&e.renderCause&&(i.renderHistory=[],this.addRenderEvent(i,e.renderCause,e.capturedProps,e.capturedState)),this.renders.set(t,i),this.renders.size>200){const e=Array.from(this.renders.values()).sort((e,t)=>e.lastRenderTime-t.lastRenderTime).slice(0,this.renders.size-200);for(const t of e)this.renders.delete(t.id)}}this.isBatchMode?this.batchDirty=!0:this.notifyListeners()}addRenderEvent(e,t,s,i){e.renderHistory||(e.renderHistory=[]);const n={id:`${e.nativeTag}-${t.timestamp}`,timestamp:t.timestamp,cause:t,renderNumber:e.renderCount,capturedProps:this.settings.capturePropsOnRender?s:void 0,capturedState:this.settings.captureStateOnRender?i:void 0};e.renderHistory.push(n);const r=Math.max(5,Math.min(50,this.settings.maxRenderHistoryPerComponent));e.renderHistory.length>r&&(e.renderHistory=e.renderHistory.slice(-r))}startBatch(){this.isBatchMode=!0,this.batchDirty=!1}endBatch(){this.isBatchMode=!1,this.batchDirty&&(this.batchDirty=!1,this.notifyListeners())}getRenders(){return Array.from(this.renders.values()).map(e=>({...e}))}passesFilters(e){if(this.filters.includePatterns.length>0&&!this.matchesAnyPatternForInfo(e,this.filters.includePatterns))return!1;if(this.filters.excludePatterns.length>0&&this.matchesAnyPatternForInfo(e,this.filters.excludePatterns))return!1;if(this.filters.includeViewType.size>0){const t=e.viewType||"",s=e.displayName||"";if(!this.matchesPattern(t,this.filters.includeViewType)&&!this.matchesPattern(s,this.filters.includeViewType))return!1}if(this.filters.includeTestID.size>0&&(!e.testID||!this.matchesPattern(e.testID,this.filters.includeTestID)))return!1;if(this.filters.includeNativeID.size>0&&(!e.nativeID||!this.matchesPattern(e.nativeID,this.filters.includeNativeID)))return!1;if(this.filters.includeComponent.size>0&&(!e.componentName||!this.matchesPattern(e.componentName,this.filters.includeComponent)))return!1;if(this.filters.excludeViewType.size>0){const t=e.viewType||"",s=e.displayName||"";if(this.matchesPattern(t,this.filters.excludeViewType)||this.matchesPattern(s,this.filters.excludeViewType))return!1}return!(this.filters.excludeTestID.size>0&&e.testID&&this.matchesPattern(e.testID,this.filters.excludeTestID)||this.filters.excludeNativeID.size>0&&e.nativeID&&this.matchesPattern(e.nativeID,this.filters.excludeNativeID)||this.filters.excludeComponent.size>0&&e.componentName&&this.matchesPattern(e.componentName,this.filters.excludeComponent))}matchesAnyPatternForInfo(e,t){for(const s of t){const t=s.value.toLowerCase();switch(s.type){case"any":if(e.viewType.toLowerCase().includes(t)||e.displayName?.toLowerCase().includes(t)||e.testID?.toLowerCase().includes(t)||e.nativeID?.toLowerCase().includes(t)||e.componentName?.toLowerCase().includes(t)||e.accessibilityLabel?.toLowerCase().includes(t))return!0;break;case"viewType":if(e.viewType.toLowerCase().includes(t)||e.displayName?.toLowerCase().includes(t))return!0;break;case"testID":if(e.testID?.toLowerCase().includes(t))return!0;break;case"nativeID":if(e.nativeID?.toLowerCase().includes(t))return!0;break;case"component":if(e.componentName?.toLowerCase().includes(t))return!0;break;case"accessibilityLabel":if(e.accessibilityLabel?.toLowerCase().includes(t))return!0}}return!1}hasActiveFilters(){return this.filters.includePatterns.length>0||this.filters.excludePatterns.length>0||this.filters.includeViewType.size>0||this.filters.includeTestID.size>0||this.filters.includeNativeID.size>0||this.filters.includeComponent.size>0||this.filters.excludeViewType.size>0||this.filters.excludeTestID.size>0||this.filters.excludeNativeID.size>0||this.filters.excludeComponent.size>0||void 0!==this.filters.minRenderCount||void 0!==this.filters.maxRenderCount}getFilteredRenders(e=""){let t=this.getRenders();if(e.trim()){const s=e.toLowerCase();t=t.filter(e=>e.viewType.toLowerCase().includes(s)||e.displayName.toLowerCase().includes(s)||e.testID?.toLowerCase().includes(s)||e.nativeID?.toLowerCase().includes(s)||e.accessibilityLabel?.toLowerCase().includes(s)||e.componentName?.toLowerCase().includes(s)||String(e.nativeTag).includes(s))}return t=t.filter(e=>this.passesFilters(e)),void 0!==this.filters.minRenderCount&&(t=t.filter(e=>e.renderCount>=this.filters.minRenderCount)),void 0!==this.filters.maxRenderCount&&(t=t.filter(e=>e.renderCount<=this.filters.maxRenderCount)),t.sort((e,t)=>t.lastRenderTime-e.lastRenderTime)}matchesPattern(e,t){const s=e.toLowerCase();for(const e of t){const t=e.toLowerCase();if(s.includes(t))return!0}return!1}getRender(e){return this.renders.get(e)}clear(){this.renders.clear(),this.notifyListeners()}resetRenderCount(e){const t=this.renders.get(e);t&&(t.renderCount=0,this.notifyListeners())}start(){this.isTracking=!0,this.isPaused=!1,this.notifyStateListeners()}stop(){this.isTracking=!1,this.isPaused=!1,this.notifyStateListeners()}pause(){this.isPaused=!0,this.notifyStateListeners()}resume(){this.isPaused=!1,this.notifyStateListeners()}togglePause(){this.isPaused=!this.isPaused,this.notifyStateListeners()}getState(){return{isTracking:this.isTracking,isPaused:this.isPaused}}getFilters(){return this.filters}setFilters(e){this.filters={...this.filters,...e},this.notifyListeners(),this.notifyFilterListeners()}addIncludePattern(e,t){const s=`include${e.charAt(0).toUpperCase()+e.slice(1)}`;this.filters[s].add(t),this.notifyListeners()}removeIncludePattern(e,t){const s=`include${e.charAt(0).toUpperCase()+e.slice(1)}`;this.filters[s].delete(t),this.notifyListeners()}addExcludePattern(e,t){const s=`exclude${e.charAt(0).toUpperCase()+e.slice(1)}`;this.filters[s].add(t),this.notifyListeners()}removeExcludePattern(e,t){const s=`exclude${e.charAt(0).toUpperCase()+e.slice(1)}`;this.filters[s].delete(t),this.notifyListeners()}clearFilters(){this.filters={includeTestID:new Set,includeNativeID:new Set,includeViewType:new Set,includeComponent:new Set,excludeTestID:new Set,excludeNativeID:new Set,excludeViewType:new Set,excludeComponent:new Set,includePatterns:[],excludePatterns:[],minRenderCount:void 0,maxRenderCount:void 0},this.notifyListeners()}getAvailableProps(){const e=new Set,t=new Set,s=new Set,i=new Set,n=new Set;for(const r of this.renders.values())r.viewType&&e.add(r.viewType),r.testID&&t.add(r.testID),r.nativeID&&s.add(r.nativeID),r.componentName&&i.add(r.componentName),r.accessibilityLabel&&n.add(r.accessibilityLabel);return{viewTypes:Array.from(e).sort(),testIDs:Array.from(t).sort(),nativeIDs:Array.from(s).sort(),componentNames:Array.from(i).sort(),accessibilityLabels:Array.from(n).sort()}}getStats(){let e=0;for(const t of this.renders.values())e+=t.renderCount;return{totalComponents:this.renders.size,totalRenders:e}}subscribe(e){return this.listeners.add(e),e(this.getRenders()),()=>{this.listeners.delete(e)}}subscribeToState(e){return this.stateListeners.add(e),e(this.getState()),()=>{this.stateListeners.delete(e)}}subscribeToSettings(e){return this.settingsListeners.add(e),e(this.settings),()=>{this.settingsListeners.delete(e)}}subscribeToFilters(e){return this.filterListeners.add(e),e(this.filters),()=>{this.filterListeners.delete(e)}}shouldShowRender(e){const t=this.filters;return!(t.includePatterns.length>0&&!this.matchesAnyPatternForInfo(e,t.includePatterns))&&(!(t.excludePatterns.length>0&&this.matchesAnyPatternForInfo(e,t.excludePatterns))&&(!((t.includeViewType.size>0||t.includeTestID.size>0||t.includeNativeID.size>0||t.includeComponent.size>0)&&!(t.includeViewType.size>0&&t.includeViewType.has(e.viewType)||t.includeTestID.size>0&&e.testID&&t.includeTestID.has(e.testID)||t.includeNativeID.size>0&&e.nativeID&&t.includeNativeID.has(e.nativeID)||t.includeComponent.size>0&&e.componentName&&t.includeComponent.has(e.componentName)))&&!(t.excludeViewType.has(e.viewType)||e.testID&&t.excludeTestID.has(e.testID)||e.nativeID&&t.excludeNativeID.has(e.nativeID)||e.componentName&&t.excludeComponent.has(e.componentName))))}getSettings(){return{...this.settings}}setSettings(e){void 0!==e.batchSize&&(e.batchSize=Math.max(10,Math.min(500,e.batchSize))),void 0!==e.maxRenderHistoryPerComponent&&(e.maxRenderHistoryPerComponent=Math.max(5,Math.min(50,e.maxRenderHistoryPerComponent))),e.enableRenderHistory&&!this.settings.trackRenderCauses&&(e.trackRenderCauses=!0),!1===e.trackRenderCauses&&this.settings.enableRenderHistory&&(e.enableRenderHistory=!1),this.settings={...this.settings,...e},void 0!==e.performanceLogging&&PerformanceLogger.setEnabled(e.performanceLogging),this.notifySettingsListeners()}clearAllRenderHistory(){for(const e of this.renders.values())e.renderHistory=[];this.notifyListeners()}clearRenderHistory(e){const t=this.renders.get(e);t&&(t.renderHistory=[],this.notifyListeners())}getRenderHistoryStats(){let e=0,t=0;for(const s of this.renders.values())s.renderHistory&&s.renderHistory.length>0&&(e+=s.renderHistory.length,t++);return{totalEvents:e,componentsWithHistory:t,averageEventsPerComponent:t>0?e/t:0}}getBatchSize(){return this.settings.batchSize}setBatchSize(e){this.setSettings({batchSize:e})}notifyListeners(){const e=this.getRenders();for(const t of this.listeners)try{t(e)}catch(e){console.error("[RenderTracker] Error in listener:",e)}}notifyStateListeners(){const e=this.getState();for(const t of this.stateListeners)try{t(e)}catch(e){console.error("[RenderTracker] Error in state listener:",e)}}notifySettingsListeners(){const e=this.getSettings();for(const t of this.settingsListeners)try{t(e)}catch(e){console.error("[RenderTracker] Error in settings listener:",e)}}notifyFilterListeners(){const e=this.getFilters();for(const t of this.filterListeners)try{t(e)}catch(e){console.error("[RenderTracker] Error in filter listener:",e)}}}export const RenderTracker=new RenderTrackerSingleton;export default RenderTracker;

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

@@ -0,0 +1 @@
+"use strict";export const VIEW_TYPE_MAP={RCTView:"View",RCTSafeAreaView:"SafeAreaView",RCTModalHostView:"Modal",RCTText:"Text",RCTRawText:"RawText",RCTVirtualText:"VirtualText",RCTTextInlineImage:"TextInlineImage",RCTImageView:"Image",RCTImage:"Image",RCTScrollView:"ScrollView",RCTScrollContentView:"ScrollContentView",AndroidHorizontalScrollView:"HorizontalScrollView",AndroidHorizontalScrollContentView:"HorizontalScrollContentView",RCTSinglelineTextInputView:"TextInput",RCTMultilineTextInputView:"TextInput (Multiline)",AndroidTextInput:"TextInput",RCTInputAccessoryView:"InputAccessoryView",RCTRefreshControl:"RefreshControl",AndroidSwipeRefreshLayout:"RefreshControl",PullToRefreshView:"RefreshControl",RCTSwitch:"Switch",AndroidSwitch:"Switch",RCTSlider:"Slider",RCTActivityIndicatorView:"ActivityIndicator",AndroidProgressBar:"ActivityIndicator",AndroidDrawerLayout:"DrawerLayout",VirtualView:"VirtualView",VirtualViewExperimental:"VirtualView",DebuggingOverlay:"DebuggingOverlay",LayoutConformance:"LayoutConformance",UnimplementedNativeView:"UnimplementedView",RKShimmeringView:"ShimmeringView",RCTTemplateView:"TemplateView",RCTAxialGradientView:"AxialGradientView",RCTMap:"Map",RCTWebView:"WebView",RCTKeyframes:"Keyframes",RCTImpressionTrackingView:"ImpressionTrackingView",RNSVGSvgView:"Svg",RNSVGGroup:"G",RNSVGPath:"Path",RNSVGText:"SvgText",RNSVGTSpan:"TSpan",RNSVGTextPath:"TextPath",RNSVGImage:"SvgImage",RNSVGCircle:"Circle",RNSVGEllipse:"Ellipse",RNSVGLine:"Line",RNSVGRect:"Rect",RNSVGClipPath:"ClipPath",RNSVGDefs:"Defs",RNSVGUse:"Use",RNSVGSymbol:"Symbol",RNSVGPattern:"Pattern",RNSVGMask:"Mask",RNSVGForeignObject:"ForeignObject",RNSVGMarker:"Marker",RNSVGLinearGradient:"LinearGradient",RNSVGRadialGradient:"RadialGradient",RNSVGFilter:"Filter",RNSVGFeBlend:"FeBlend",RNSVGFeColorMatrix:"FeColorMatrix",RNSVGFeComposite:"FeComposite",RNSVGFeFlood:"FeFlood",RNSVGFeGaussianBlur:"FeGaussianBlur",RNSVGFeMerge:"FeMerge",RNSVGFeOffset:"FeOffset",RNSVGPolygon:"Polygon",RNSVGPolyline:"Polyline",RNSVGStop:"Stop",RNGestureHandlerRootView:"GestureHandlerRootView",RNGestureHandlerButton:"GestureHandlerButton",RNCSafeAreaProvider:"SafeAreaProvider",RNCSafeAreaView:"SafeAreaView",RNSScreen:"Screen",RNSScreenContainer:"ScreenContainer",RNSScreenStack:"ScreenStack",RNSScreenStackHeaderConfig:"ScreenStackHeaderConfig",RNSScreenStackHeaderSubview:"ScreenStackHeaderSubview",RNSSearchBar:"SearchBar",RNSFullWindowOverlay:"FullWindowOverlay",RNSModalScreen:"ModalScreen",ReanimatedView:"Animated.View",ExpoView:"ExpoView",ExpoBlurView:"BlurView",ExpoLinearGradient:"LinearGradient",ExpoImage:"ExpoImage",ExpoVideoView:"VideoView",ExpoCamera:"Camera",ExpoBarCodeScannerView:"BarCodeScanner",RNCWebView:"WebView",AIRMap:"MapView",AIRMapMarker:"Marker",AIRMapPolyline:"Polyline",AIRMapPolygon:"Polygon",AIRMapCircle:"Circle",AIRMapCallout:"Callout",RCTVideo:"Video",LottieAnimationView:"LottieView",FastImageView:"FastImage"};export function getComponentDisplayName(e){return VIEW_TYPE_MAP[e]||e}export function getNativeViewType(e){for(const[i,t]of Object.entries(VIEW_TYPE_MAP))if(t===e)return i;return null}export function isKnownViewType(e){return e in VIEW_TYPE_MAP}export function getAllNativeViewTypes(){return Object.keys(VIEW_TYPE_MAP)}export function getAllComponentNames(){return[...new Set(Object.values(VIEW_TYPE_MAP))]}export default{VIEW_TYPE_MAP:VIEW_TYPE_MAP,getComponentDisplayName:getComponentDisplayName,getNativeViewType:getNativeViewType,isKnownViewType:isKnownViewType,getAllNativeViewTypes:getAllNativeViewTypes,getAllComponentNames:getAllComponentNames};

package/lib/module/index.js

@@ -0,0 +1 @@
+"use strict";export{highlightUpdatesPreset,createHighlightUpdatesTool,highlightUpdatesModalPreset,createHighlightUpdatesModalTool}from"./preset";export{default as HighlightUpdatesController}from"./highlight-updates/utils/HighlightUpdatesController";export{HighlightUpdatesOverlay}from"./highlight-updates/HighlightUpdatesOverlay";export{installProfilerInterceptor,uninstallProfilerInterceptor,setComparisonCallback,isInterceptorInstalled,enableProfilerLogging,disableProfilerLogging,isLoggingEnabled}from"./highlight-updates/utils/ProfilerInterceptor";export{RenderTracker}from"./highlight-updates/utils/RenderTracker";export{detectRenderCause,clearRenderCauseState,removeRenderCauseState,getRenderCauseStats,safeCloneForHistory,capturePropsSnapshot,captureStateSnapshot}from"./highlight-updates/utils/RenderCauseDetector";export{PerformanceLogger}from"./highlight-updates/utils/PerformanceLogger";export{VIEW_TYPE_MAP,getComponentDisplayName,getNativeViewType,isKnownViewType,getAllNativeViewTypes,getAllComponentNames}from"./highlight-updates/utils/ViewTypeMapper";export{HighlightUpdatesModal}from"./highlight-updates/components/HighlightUpdatesModal";export{RenderListItem}from"./highlight-updates/components/RenderListItem";export{RenderDetailView}from"./highlight-updates/components/RenderDetailView";export{HighlightFilterView}from"./highlight-updates/components/HighlightFilterView";export{RenderCauseBadge,TwoLevelCauseBadge,CAUSE_CONFIG,COMPONENT_CAUSE_CONFIG}from"./highlight-updates/components/RenderCauseBadge";export{RenderHistoryViewer,RenderHistoryFooter}from"./highlight-updates/components/RenderHistoryViewer";

package/lib/module/preset.js

@@ -0,0 +1 @@
+"use strict";import React,{useState,useEffect,useCallback}from"react";import{HighlighterIcon}from"@buoy-gg/floating-tools-core";import HighlightUpdatesController from"./highlight-updates/utils/HighlightUpdatesController";import{HighlightUpdatesModal}from"./highlight-updates/components/HighlightUpdatesModal";import{jsx as _jsx}from"react/jsx-runtime";function HighlightIcon({size:t}){const[e,i]=useState(()=>HighlightUpdatesController.isEnabled());return useEffect(()=>HighlightUpdatesController.subscribe(t=>{i(t)}),[]),_jsx(HighlighterIcon,{size:t,color:e?"#10b981":"#6b7280"})}function EmptyComponent(){return null}function HighlightUpdatesModalWithBadgeNavigation(t){const[e,i]=useState(null);useEffect(()=>(t.visible&&HighlightUpdatesController.setBadgePressCallback(t=>{i(t)}),()=>{t.visible||HighlightUpdatesController.setBadgePressCallback(null)}),[t.visible]);const o=useCallback(()=>{i(null)},[]);return _jsx(HighlightUpdatesModal,{...t,initialNativeTag:e,onInitialNativeTagHandled:o})}export const highlightUpdatesPreset={id:"highlight-updates",name:"HIGHLIGHT",description:"Toggle component render highlights",slot:"row",icon:HighlightIcon,component:EmptyComponent,props:{},launchMode:"toggle-only",onPress:()=>{HighlightUpdatesController.isInitialized()||HighlightUpdatesController.initialize(),HighlightUpdatesController.toggle()}};export function createHighlightUpdatesTool(t){const e=t?.enabledColor||"#10b981",i=t?.disabledColor||"#6b7280";return t?.autoInitialize&&setTimeout(()=>{HighlightUpdatesController.initialize()},1e3),{id:t?.id||"highlight-updates",name:t?.name||"HIGHLIGHT",description:t?.description||"Toggle component render highlights",slot:"row",icon:({size:t})=>{const[o,l]=useState(()=>HighlightUpdatesController.isEnabled());return useEffect(()=>HighlightUpdatesController.subscribe(t=>{l(t)}),[]),_jsx(HighlighterIcon,{size:t,color:o?e:i})},component:EmptyComponent,props:{},launchMode:"toggle-only",onPress:()=>{HighlightUpdatesController.isInitialized()||HighlightUpdatesController.initialize(),HighlightUpdatesController.toggle()}}}export const highlightUpdatesModalPreset={id:"highlight-updates-modal",name:"HIGHLIGHT",description:"View component render tracking modal",slot:"both",icon:({size:t})=>_jsx(HighlighterIcon,{size:t}),component:HighlightUpdatesModalWithBadgeNavigation,props:{enableSharedModalDimensions:!1}};export function createHighlightUpdatesModalTool(t){const e=t?.enabledColor||"#10b981";return t?.autoInitialize&&setTimeout(()=>{HighlightUpdatesController.initialize()},1e3),{id:t?.id||"highlight-updates-modal",name:t?.name||"HIGHLIGHT",description:t?.description||"View component render tracking modal",slot:"both",icon:({size:t})=>_jsx(HighlighterIcon,{size:t,color:e}),component:HighlightUpdatesModalWithBadgeNavigation,props:{enableSharedModalDimensions:!1}}}

package/lib/typescript/highlight-updates/HighlightUpdatesOverlay.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+import React from "react";
+interface HighlightUpdatesOverlayProps {
+    /**
+     * Callback when a badge is pressed.
+     * Receives the nativeTag (id) of the component whose badge was tapped.
+     */
+    onBadgePress?: (nativeTag: number) => void;
+}
+export declare function HighlightUpdatesOverlay({ onBadgePress, }?: HighlightUpdatesOverlayProps): React.ReactElement | null;
+export default HighlightUpdatesOverlay;
+//# sourceMappingURL=HighlightUpdatesOverlay.d.ts.map

package/lib/typescript/highlight-updates/components/HighlightFilterView.d.ts

@@ -0,0 +1,27 @@
+/**
+ * HighlightFilterView
+ *
+ * Simplified filter configuration for tracked component renders.
+ * Uses a badge-based approach where users select a filter type
+ * (Any, ViewType, testID, Component) then enter a value.
+ */
+import React from "react";
+import type { FilterConfig, RenderTrackerSettings } from "../utils/RenderTracker";
+type FilterViewTab = "filters" | "settings";
+interface HighlightFilterViewProps {
+    filters: FilterConfig;
+    onFilterChange: (filters: Partial<FilterConfig>) => void;
+    settings: RenderTrackerSettings;
+    onSettingsChange: (settings: Partial<RenderTrackerSettings>) => void;
+    availableProps: {
+        viewTypes: string[];
+        testIDs: string[];
+        nativeIDs: string[];
+        componentNames: string[];
+        accessibilityLabels: string[];
+    };
+    activeTab: FilterViewTab;
+}
+export declare function HighlightFilterView({ filters, onFilterChange, settings, onSettingsChange, availableProps, activeTab, }: HighlightFilterViewProps): React.JSX.Element;
+export default HighlightFilterView;
+//# sourceMappingURL=HighlightFilterView.d.ts.map

package/lib/typescript/highlight-updates/components/HighlightUpdatesModal.d.ts

@@ -0,0 +1,36 @@
+/**
+ * HighlightUpdatesModal
+ *
+ * Main modal interface for the Highlight Updates dev tool.
+ * Shows a list of tracked component renders with controls for
+ * start/stop, clear, and filtering.
+ *
+ * PERFORMANCE OPTIMIZED:
+ * - Uses isolated components to prevent parent re-renders
+ * - Stats display is isolated (StatsDisplay)
+ * - Render list is isolated (IsolatedRenderList)
+ * - Header components are memoized
+ * - Uses refs for values not displayed in UI
+ */
+import React from "react";
+interface HighlightUpdatesModalProps {
+    visible: boolean;
+    onClose: () => void;
+    onBack?: () => void;
+    onMinimize?: (modalState: any) => void;
+    enableSharedModalDimensions?: boolean;
+    /**
+     * Initial nativeTag to navigate to when modal opens.
+     * Used by "Click Overlay Badge → Jump to Detail" feature.
+     * When set, the modal will automatically show the detail view for this component.
+     */
+    initialNativeTag?: number | null;
+    /**
+     * Callback when the modal finishes handling the initial nativeTag.
+     * This allows the parent to clear the navigation state.
+     */
+    onInitialNativeTagHandled?: () => void;
+}
+export declare function HighlightUpdatesModal({ visible, onClose, onBack, onMinimize, enableSharedModalDimensions, initialNativeTag, onInitialNativeTagHandled, }: HighlightUpdatesModalProps): React.JSX.Element | null;
+export default HighlightUpdatesModal;
+//# sourceMappingURL=HighlightUpdatesModal.d.ts.map

package/lib/typescript/highlight-updates/components/IdentifierBadge.d.ts

@@ -0,0 +1,39 @@
+/**
+ * IdentifierBadge
+ *
+ * Shared badge component for displaying component identifiers.
+ * Used throughout the highlight-updates package for consistent styling.
+ */
+import React from "react";
+import { Box } from "@buoy-gg/shared-ui";
+export type IdentifierType = "viewType" | "testID" | "nativeID" | "component" | "accessibilityLabel" | "nativeTag" | "any";
+export declare const IDENTIFIER_CONFIG: Record<IdentifierType, {
+    label: string;
+    shortLabel: string;
+    color: string;
+    icon: typeof Box;
+}>;
+interface IdentifierBadgeProps {
+    type: IdentifierType;
+    value: string;
+    /** Use compact mode for list items */
+    compact?: boolean;
+    /** Show only the badge without value */
+    badgeOnly?: boolean;
+    /** Show only the value without badge */
+    valueOnly?: boolean;
+    /** Use short label */
+    shortLabel?: boolean;
+    /** Show icon in badge */
+    showIcon?: boolean;
+}
+export declare function IdentifierBadge({ type, value, compact, badgeOnly, valueOnly, shortLabel, showIcon, }: IdentifierBadgeProps): React.JSX.Element;
+interface CategoryBadgeProps {
+    type: IdentifierType;
+    count?: number;
+    isSelected?: boolean;
+    showIcon?: boolean;
+}
+export declare function CategoryBadge({ type, count, isSelected, showIcon, }: CategoryBadgeProps): React.JSX.Element;
+export default IdentifierBadge;
+//# sourceMappingURL=IdentifierBadge.d.ts.map

package/lib/typescript/highlight-updates/components/IsolatedRenderList.d.ts

@@ -0,0 +1,32 @@
+/**
+ * IsolatedRenderList
+ *
+ * Performance-optimized component that isolates the render tracking subscription
+ * to prevent parent re-renders. Only this component re-renders when new renders
+ * are tracked, keeping the modal UI stable.
+ *
+ * Following the optimization guide: move subscriptions to child components to
+ * prevent parent re-renders.
+ */
+import React from "react";
+import { type TrackedRender, type FilterConfig } from "../utils/RenderTracker";
+interface IsolatedRenderListProps {
+    searchText: string;
+    filters: FilterConfig;
+    onSelectRender: (render: TrackedRender, index: number, allRenders: TrackedRender[]) => void;
+    onStatsChange: (stats: {
+        totalComponents: number;
+        totalRenders: number;
+    }) => void;
+    onRendersChange?: (renders: TrackedRender[]) => void;
+    isTracking: boolean;
+    isPro?: boolean;
+}
+/**
+ * Isolated list component that owns the render subscription.
+ * Parent component does NOT re-render when renders change.
+ */
+declare function IsolatedRenderListInner({ searchText, filters, onSelectRender, onStatsChange, onRendersChange, isTracking, isPro, }: IsolatedRenderListProps): React.JSX.Element;
+export declare const IsolatedRenderList: React.MemoExoticComponent<typeof IsolatedRenderListInner>;
+export default IsolatedRenderList;
+//# sourceMappingURL=IsolatedRenderList.d.ts.map

package/lib/typescript/highlight-updates/components/ModalHeaderContent.d.ts

@@ -0,0 +1,68 @@
+/**
+ * ModalHeaderContent
+ *
+ * Memoized header content components for the HighlightUpdatesModal.
+ * Extracted to prevent re-renders when parent state changes unrelated to header.
+ *
+ * Following the optimization guide: extract inline JSX to memoized components.
+ */
+import React from "react";
+import { TextInput } from "react-native";
+interface SearchSectionProps {
+    isActive: boolean;
+    searchText: string;
+    onSearchChange: (text: string) => void;
+    onSearchClose: () => void;
+    searchInputRef: React.RefObject<TextInput | null>;
+}
+export declare const SearchSection: React.NamedExoticComponent<SearchSectionProps>;
+interface HeaderActionsProps {
+    onSearchToggle: () => void;
+    onFilterToggle: () => void;
+    onToggleTracking: () => void;
+    onToggleFreeze: () => void;
+    onClear: () => void;
+    copyData: string;
+    isTracking: boolean;
+    isFrozen: boolean;
+    activeFilterCount: number;
+    hasRenders: boolean;
+}
+export declare const HeaderActions: React.NamedExoticComponent<HeaderActionsProps>;
+interface MainListHeaderProps {
+    onBack?: () => void;
+    isSearchActive: boolean;
+    searchText: string;
+    onSearchChange: (text: string) => void;
+    onSearchToggle: () => void;
+    onSearchClose: () => void;
+    onFilterToggle: () => void;
+    onToggleTracking: () => void;
+    onToggleFreeze: () => void;
+    onClear: () => void;
+    copyData: string;
+    isTracking: boolean;
+    isFrozen: boolean;
+    activeFilterCount: number;
+    hasRenders: boolean;
+    searchInputRef: React.RefObject<TextInput | null>;
+}
+export declare const MainListHeader: React.NamedExoticComponent<MainListHeaderProps>;
+type FilterViewTab = "filters" | "settings";
+interface FilterViewHeaderProps {
+    onBack: () => void;
+    activeTab: FilterViewTab;
+    onTabChange: (tab: FilterViewTab) => void;
+    activeFilterCount?: number;
+}
+export declare const FilterViewHeader: React.NamedExoticComponent<FilterViewHeaderProps>;
+export type DetailViewTab = "details" | "history";
+interface DetailViewHeaderProps {
+    onBack: () => void;
+    activeTab: DetailViewTab;
+    onTabChange: (tab: DetailViewTab) => void;
+    hasHistory?: boolean;
+}
+export declare const DetailViewHeader: React.NamedExoticComponent<DetailViewHeaderProps>;
+export {};
+//# sourceMappingURL=ModalHeaderContent.d.ts.map

package/lib/typescript/highlight-updates/components/RenderCauseBadge.d.ts

@@ -0,0 +1,43 @@
+/**
+ * RenderCauseBadge
+ *
+ * Displays a colored badge indicating why a component rendered.
+ * Used in RenderListItem and RenderDetailView.
+ *
+ * TWO-LEVEL CAUSATION:
+ * Shows both the native-level cause (what props changed on the native view)
+ * and the component-level cause (why the React component re-rendered).
+ */
+import React from "react";
+import type { RenderCause, RenderCauseType, ComponentCauseType } from "../utils/RenderTracker";
+interface CauseConfig {
+    label: string;
+    color: string;
+    tip: string;
+}
+export declare const CAUSE_CONFIG: Record<RenderCauseType, CauseConfig>;
+export declare const COMPONENT_CAUSE_CONFIG: Record<ComponentCauseType, CauseConfig>;
+interface RenderCauseBadgeProps {
+    cause: RenderCause;
+    compact?: boolean;
+    showKeys?: boolean;
+    showTwoLevel?: boolean;
+}
+export declare function RenderCauseBadge({ cause, compact, showKeys, showTwoLevel, }: RenderCauseBadgeProps): React.JSX.Element;
+/**
+ * TwoLevelCauseBadge - A more detailed badge for detail views
+ * Shows: "ComponentName re-rendered due to PARENT → native PROPS [style]"
+ */
+export declare function TwoLevelCauseBadge({ cause, }: {
+    cause: RenderCause;
+}): React.JSX.Element;
+/**
+ * EnhancedCauseDisplay - Phase 5: Comprehensive cause display
+ * Shows detailed breakdown of why a component rendered with clear sections
+ */
+export declare function EnhancedCauseDisplay({ cause, nativeType, }: {
+    cause: RenderCause;
+    nativeType?: string;
+}): React.JSX.Element;
+export default RenderCauseBadge;
+//# sourceMappingURL=RenderCauseBadge.d.ts.map

package/lib/typescript/highlight-updates/components/RenderDetailView.d.ts

@@ -0,0 +1,29 @@
+/**
+ * RenderDetailView
+ *
+ * Minimal, glanceable view for render details.
+ * Design principle: Dev should understand WHY in 3 seconds.
+ *
+ * Layout:
+ * - Header: Component name + native type
+ * - Answer Card: Cause badges + hook change (THE answer)
+ * - History Row: Compact inline navigation
+ */
+import React from "react";
+import type { TrackedRender, FilterPattern } from "../utils/RenderTracker";
+interface RenderDetailViewProps {
+    render: TrackedRender;
+    /** If true, do not render the internal footer in history view */
+    disableInternalFooter?: boolean;
+    /** Selected event index for history view (controlled) */
+    selectedEventIndex?: number;
+    /** Callback when event index changes in history view */
+    onEventIndexChange?: (index: number) => void;
+    /** Callback to add a filter pattern (include or exclude) */
+    onAddFilter?: (pattern: FilterPattern, mode: "include" | "exclude") => void;
+    /** Whether the user has Pro license (enables all features) */
+    isPro?: boolean;
+}
+export declare function RenderDetailView({ render, disableInternalFooter, selectedEventIndex: externalIndex, onEventIndexChange: externalOnChange, onAddFilter, isPro, }: RenderDetailViewProps): React.JSX.Element;
+export default RenderDetailView;
+//# sourceMappingURL=RenderDetailView.d.ts.map

package/lib/typescript/highlight-updates/components/RenderHistoryViewer.d.ts

@@ -0,0 +1,36 @@
+/**
+ * RenderHistoryViewer
+ *
+ * Displays render history for a component with event stepping.
+ * Allows navigating through render events chronologically.
+ * Shows current state view or diff view between renders.
+ */
+import React from "react";
+import type { TrackedRender } from "../utils/RenderTracker";
+interface RenderHistoryViewerProps {
+    render: TrackedRender;
+    /** If true, use external footer (modal provides it) */
+    disableInternalFooter?: boolean;
+    /** Selected event index (0 = oldest) */
+    selectedEventIndex?: number;
+    /** Callback when event index changes */
+    onEventIndexChange?: (index: number) => void;
+    /** If true, show all events. Otherwise limit to FREE_TIER_EVENT_LIMIT */
+    isPro?: boolean;
+}
+/**
+ * Main RenderHistoryViewer component
+ */
+export declare function RenderHistoryViewer({ render, disableInternalFooter, selectedEventIndex: externalIndex, onEventIndexChange: externalOnChange, isPro, }: RenderHistoryViewerProps): React.JSX.Element;
+/**
+ * External footer component for modal integration
+ * Uses renderHistory for events (only available when history tracking is enabled)
+ */
+export declare function RenderHistoryFooter({ render, selectedEventIndex, onEventIndexChange, isPro, }: {
+    render: TrackedRender;
+    selectedEventIndex?: number;
+    onEventIndexChange?: (index: number) => void;
+    isPro?: boolean;
+}): React.JSX.Element | null;
+export default RenderHistoryViewer;
+//# sourceMappingURL=RenderHistoryViewer.d.ts.map

package/lib/typescript/highlight-updates/components/RenderListItem.d.ts

@@ -0,0 +1,16 @@
+/**
+ * RenderListItem
+ *
+ * Compact list item showing a tracked component render.
+ * Displays viewType, identifier (testID/nativeID/component), render count, and timing.
+ */
+import React from "react";
+import type { TrackedRender } from "../utils/RenderTracker";
+interface RenderListItemProps {
+    render: TrackedRender;
+    onPress: (render: TrackedRender) => void;
+}
+declare function RenderListItemInner({ render, onPress }: RenderListItemProps): React.JSX.Element;
+export declare const RenderListItem: React.MemoExoticComponent<typeof RenderListItemInner>;
+export default RenderListItem;
+//# sourceMappingURL=RenderListItem.d.ts.map

package/lib/typescript/highlight-updates/components/StatsDisplay.d.ts

@@ -0,0 +1,18 @@
+/**
+ * StatsDisplay
+ *
+ * Isolated component for displaying render statistics in the header.
+ * Subscribes to RenderTracker updates independently so parent header
+ * doesn't re-render when stats change.
+ *
+ * Following the optimization guide: move subscriptions to child components.
+ */
+import React from "react";
+/**
+ * Isolated stats display that owns its own subscription.
+ * Only this component re-renders when stats change.
+ */
+declare function StatsDisplayInner(): React.JSX.Element;
+export declare const StatsDisplay: React.MemoExoticComponent<typeof StatsDisplayInner>;
+export default StatsDisplay;
+//# sourceMappingURL=StatsDisplay.d.ts.map

package/lib/typescript/highlight-updates/components/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Highlight Updates Modal Components
+ */
+export { HighlightUpdatesModal } from "./HighlightUpdatesModal";
+export { RenderListItem } from "./RenderListItem";
+export { RenderDetailView } from "./RenderDetailView";
+export { HighlightFilterView } from "./HighlightFilterView";
+export { IdentifierBadge, CategoryBadge, IDENTIFIER_CONFIG, type IdentifierType, } from "./IdentifierBadge";
+export { IsolatedRenderList } from "./IsolatedRenderList";
+export { StatsDisplay } from "./StatsDisplay";
+export { MainListHeader, FilterViewHeader, DetailViewHeader, HeaderActions, SearchSection, } from "./ModalHeaderContent";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/highlight-updates/utils/HighlightUpdatesController.d.ts

@@ -0,0 +1,132 @@
+/**
+ * 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.
+ */
+interface HighlightRect {
+    id: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string;
+    count: number;
+}
+type HighlightCallback = (rects: HighlightRect[]) => void;
+type BadgePressCallback = (nativeTag: number) => void;
+/**
+ * Set the callback for rendering highlights
+ */
+declare function setHighlightCallback(callback: HighlightCallback | null): void;
+/**
+ * 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.
+ */
+declare function setBadgePressCallback(callback: BadgePressCallback | null): void;
+/**
+ * Get the current badge press callback.
+ * Used by the overlay to check if badge presses should be handled.
+ */
+declare function getBadgePressCallback(): BadgePressCallback | null;
+/**
+ * Handle a badge press event.
+ * Calls the registered callback with the nativeTag of the component.
+ */
+declare function handleBadgePress(nativeTag: number): void;
+type SpotlightCallback = (nativeTag: number | null) => void;
+/**
+ * Set the callback for spotlight highlighting.
+ * Used by the overlay to show a special highlight for the component being viewed.
+ */
+declare function setSpotlightCallback(callback: SpotlightCallback | null): void;
+/**
+ * Set a spotlight highlight on a specific component.
+ * This is used when viewing a component's detail to show which one it is.
+ */
+declare function setSpotlight(nativeTag: number | null): void;
+/**
+ * Get the current spotlight nativeTag.
+ */
+declare function getSpotlight(): number | null;
+declare function subscribe(listener: (enabled: boolean) => void): () => void;
+declare function initialize(): boolean;
+declare function enable(): void;
+declare function disable(): void;
+declare function toggle(): void;
+/**
+ * Clear all render counts and tracked data
+ */
+declare function clearRenderCounts(): void;
+declare function isEnabled(): boolean;
+declare function setEnabled(enabled: boolean): void;
+/**
+ * Subscribe to freeze state changes
+ */
+declare function subscribeToFreeze(listener: (frozen: boolean) => void): () => void;
+/**
+ * Freeze highlights - prevents highlights from fading away.
+ * New renders are still captured but old highlights don't clear.
+ */
+declare function freeze(): void;
+/**
+ * Unfreeze highlights - resumes normal cleanup behavior.
+ * Clears all current highlights when unfreezing.
+ */
+declare function unfreeze(): void;
+/**
+ * Toggle freeze state
+ */
+declare function toggleFreeze(): void;
+/**
+ * Check if freeze mode is active
+ */
+declare function getFrozen(): boolean;
+declare function destroy(): void;
+interface HighlightUpdatesControllerAPI {
+    subscribe: typeof subscribe;
+    enable: typeof enable;
+    disable: typeof disable;
+    toggle: typeof toggle;
+    isEnabled: typeof isEnabled;
+    setEnabled: typeof setEnabled;
+    initialize: typeof initialize;
+    destroy: typeof destroy;
+    isInitialized: () => boolean;
+    setHighlightCallback: typeof setHighlightCallback;
+    clearRenderCounts: typeof clearRenderCounts;
+    freeze: typeof freeze;
+    unfreeze: typeof unfreeze;
+    toggleFreeze: typeof toggleFreeze;
+    getFrozen: typeof getFrozen;
+    subscribeToFreeze: typeof subscribeToFreeze;
+    setBadgePressCallback: typeof setBadgePressCallback;
+    getBadgePressCallback: typeof getBadgePressCallback;
+    handleBadgePress: typeof handleBadgePress;
+    setSpotlightCallback: typeof setSpotlightCallback;
+    setSpotlight: typeof setSpotlight;
+    getSpotlight: typeof getSpotlight;
+}
+declare const HighlightUpdatesController: HighlightUpdatesControllerAPI;
+export default HighlightUpdatesController;
+//# sourceMappingURL=HighlightUpdatesController.d.ts.map