@buoy-gg/highlight-updates 2.1.9 → 2.1.11

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

@@ -1 +1,255 @@
-"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};
+/**
+ * ViewTypeMapper
+ *
+ * Maps native view class names (e.g., "RCTView", "RCTText") to their
+ * developer-friendly React Native component names (e.g., "View", "Text").
+ *
+ * This makes the render tracking UI more understandable since developers
+ * work with component names, not native class names.
+ *
+ * Sources:
+ * - React Native core: packages/react-native/Libraries/Components/*
+ * - React Native Android: ReactAndroid/src/main/java/com/facebook/react/views/*
+ * - FabricNameComponentMapping.kt
+ * - Common third-party libraries (react-native-svg, gesture-handler, etc.)
+ */
+
+"use strict";
+
+/**
+ * Mapping from native view class names to React component names.
+ *
+ * Format: { "NativeClassName": "ComponentName" }
+ */
+export const VIEW_TYPE_MAP = {
+  // ==========================================================================
+  // REACT NATIVE CORE - Views
+  // ==========================================================================
+  RCTView: "View",
+  RCTSafeAreaView: "SafeAreaView",
+  RCTModalHostView: "Modal",
+  // ==========================================================================
+  // REACT NATIVE CORE - Text
+  // ==========================================================================
+  RCTText: "Text",
+  RCTRawText: "RawText",
+  RCTVirtualText: "VirtualText",
+  RCTTextInlineImage: "TextInlineImage",
+  // ==========================================================================
+  // REACT NATIVE CORE - Images
+  // ==========================================================================
+  RCTImageView: "Image",
+  RCTImage: "Image",
+  // ==========================================================================
+  // REACT NATIVE CORE - ScrollView
+  // ==========================================================================
+  RCTScrollView: "ScrollView",
+  RCTScrollContentView: "ScrollContentView",
+  AndroidHorizontalScrollView: "HorizontalScrollView",
+  AndroidHorizontalScrollContentView: "HorizontalScrollContentView",
+  // ==========================================================================
+  // REACT NATIVE CORE - TextInput
+  // ==========================================================================
+  RCTSinglelineTextInputView: "TextInput",
+  RCTMultilineTextInputView: "TextInput (Multiline)",
+  AndroidTextInput: "TextInput",
+  RCTInputAccessoryView: "InputAccessoryView",
+  // ==========================================================================
+  // REACT NATIVE CORE - Lists (FlatList/SectionList internals)
+  // ==========================================================================
+  RCTRefreshControl: "RefreshControl",
+  AndroidSwipeRefreshLayout: "RefreshControl",
+  PullToRefreshView: "RefreshControl",
+  // ==========================================================================
+  // REACT NATIVE CORE - Buttons & Touchables
+  // ==========================================================================
+  RCTSwitch: "Switch",
+  AndroidSwitch: "Switch",
+  RCTSlider: "Slider",
+  // ==========================================================================
+  // REACT NATIVE CORE - Activity Indicators
+  // ==========================================================================
+  RCTActivityIndicatorView: "ActivityIndicator",
+  AndroidProgressBar: "ActivityIndicator",
+  // ==========================================================================
+  // REACT NATIVE CORE - Android-specific
+  // ==========================================================================
+  AndroidDrawerLayout: "DrawerLayout",
+  VirtualView: "VirtualView",
+  VirtualViewExperimental: "VirtualView",
+  // ==========================================================================
+  // REACT NATIVE CORE - Debugging & Internal
+  // ==========================================================================
+  DebuggingOverlay: "DebuggingOverlay",
+  LayoutConformance: "LayoutConformance",
+  UnimplementedNativeView: "UnimplementedView",
+  // ==========================================================================
+  // REACT NATIVE CORE - Legacy/Deprecated
+  // ==========================================================================
+  RKShimmeringView: "ShimmeringView",
+  RCTTemplateView: "TemplateView",
+  RCTAxialGradientView: "AxialGradientView",
+  // "RCTVideo": "Video",
+  RCTMap: "Map",
+  RCTWebView: "WebView",
+  RCTKeyframes: "Keyframes",
+  RCTImpressionTrackingView: "ImpressionTrackingView",
+  // ==========================================================================
+  // REACT-NATIVE-SVG
+  // ==========================================================================
+  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",
+  // ==========================================================================
+  // REACT-NATIVE-GESTURE-HANDLER
+  // ==========================================================================
+  RNGestureHandlerRootView: "GestureHandlerRootView",
+  RNGestureHandlerButton: "GestureHandlerButton",
+  // ==========================================================================
+  // REACT-NATIVE-SAFE-AREA-CONTEXT
+  // ==========================================================================
+  RNCSafeAreaProvider: "SafeAreaProvider",
+  RNCSafeAreaView: "SafeAreaView",
+  // ==========================================================================
+  // REACT-NATIVE-SCREENS (React Navigation)
+  // ==========================================================================
+  RNSScreen: "Screen",
+  RNSScreenContainer: "ScreenContainer",
+  RNSScreenStack: "ScreenStack",
+  RNSScreenStackHeaderConfig: "ScreenStackHeaderConfig",
+  RNSScreenStackHeaderSubview: "ScreenStackHeaderSubview",
+  RNSSearchBar: "SearchBar",
+  RNSFullWindowOverlay: "FullWindowOverlay",
+  RNSModalScreen: "ModalScreen",
+  // ==========================================================================
+  // REACT-NATIVE-REANIMATED
+  // ==========================================================================
+  ReanimatedView: "Animated.View",
+  // ==========================================================================
+  // EXPO MODULES
+  // ==========================================================================
+  ExpoView: "ExpoView",
+  ExpoBlurView: "BlurView",
+  ExpoLinearGradient: "LinearGradient",
+  ExpoImage: "ExpoImage",
+  ExpoVideoView: "VideoView",
+  ExpoCamera: "Camera",
+  ExpoBarCodeScannerView: "BarCodeScanner",
+  // ==========================================================================
+  // REACT-NATIVE-WEBVIEW
+  // ==========================================================================
+  RNCWebView: "WebView",
+  // ==========================================================================
+  // REACT-NATIVE-MAPS
+  // ==========================================================================
+  AIRMap: "MapView",
+  AIRMapMarker: "Marker",
+  AIRMapPolyline: "Polyline",
+  AIRMapPolygon: "Polygon",
+  AIRMapCircle: "Circle",
+  AIRMapCallout: "Callout",
+  // ==========================================================================
+  // REACT-NATIVE-VIDEO
+  // ==========================================================================
+  RCTVideo: "Video",
+  // ==========================================================================
+  // LOTTIE-REACT-NATIVE
+  // ==========================================================================
+  LottieAnimationView: "LottieView",
+  // ==========================================================================
+  // REACT-NATIVE-FAST-IMAGE
+  // ==========================================================================
+  FastImageView: "FastImage"
+};
+
+/**
+ * Get the developer-friendly component name for a native view type.
+ * Returns the original viewType if no mapping exists.
+ *
+ * @param viewType - The native view class name (e.g., "RCTView")
+ * @returns The component name (e.g., "View")
+ */
+export function getComponentDisplayName(viewType) {
+  return VIEW_TYPE_MAP[viewType] || viewType;
+}
+
+/**
+ * Get the native view class name for a component name (reverse lookup).
+ * Returns null if no mapping exists.
+ *
+ * @param componentName - The component name (e.g., "View")
+ * @returns The native view class name (e.g., "RCTView") or null
+ */
+export function getNativeViewType(componentName) {
+  for (const [native, display] of Object.entries(VIEW_TYPE_MAP)) {
+    if (display === componentName) {
+      return native;
+    }
+  }
+  return null;
+}
+
+/**
+ * Check if a view type is a known native component.
+ *
+ * @param viewType - The native view class name
+ * @returns true if it's a known component
+ */
+export function isKnownViewType(viewType) {
+  return viewType in VIEW_TYPE_MAP;
+}
+
+/**
+ * Get all known view types (useful for autocomplete/suggestions).
+ *
+ * @returns Array of all native view class names
+ */
+export function getAllNativeViewTypes() {
+  return Object.keys(VIEW_TYPE_MAP);
+}
+
+/**
+ * Get all known component names (useful for autocomplete/suggestions).
+ *
+ * @returns Array of all component display names
+ */
+export function getAllComponentNames() {
+  return [...new Set(Object.values(VIEW_TYPE_MAP))];
+}
+export default {
+  VIEW_TYPE_MAP,
+  getComponentDisplayName,
+  getNativeViewType,
+  isKnownViewType,
+  getAllNativeViewTypes,
+  getAllComponentNames
+};

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

@@ -1 +1,54 @@
-"use strict";export function generateRendersJson(e){const n={exportedAt:(new Date).toISOString(),totalComponents:e.length,totalRenders:e.reduce((e,n)=>e+n.renderCount,0),components:e.map(e=>({componentName:e.componentName||e.displayName,viewType:e.viewType,nativeTag:e.nativeTag,testID:e.testID,nativeID:e.nativeID,accessibilityLabel:e.accessibilityLabel,renderCount:e.renderCount,firstRenderTime:e.firstRenderTime,lastRenderTime:e.lastRenderTime,lastRenderCause:e.lastRenderCause?{type:e.lastRenderCause.type,componentCause:e.lastRenderCause.componentCause,changedKeys:e.lastRenderCause.changedKeys,hookChanges:e.lastRenderCause.hookChanges?.map(e=>({type:e.type,index:e.index,description:e.description}))}:null,renderHistory:e.renderHistory?.map(e=>({renderNumber:e.renderNumber,timestamp:e.timestamp,cause:{type:e.cause.type,componentCause:e.cause.componentCause,changedKeys:e.cause.changedKeys}}))}))};return JSON.stringify(n,null,2)}
+"use strict";
+
+/**
+ * Render Export Formatter
+ *
+ * Simple JSON export for render tracking data.
+ */
+
+/**
+ * Generate JSON export of all tracked renders
+ */
+export function generateRendersJson(renders) {
+  const exportData = {
+    exportedAt: new Date().toISOString(),
+    totalComponents: renders.length,
+    totalRenders: renders.reduce((sum, r) => sum + r.renderCount, 0),
+    components: renders.map(render => ({
+      // Identity
+      componentName: render.componentName || render.displayName,
+      viewType: render.viewType,
+      nativeTag: render.nativeTag,
+      // Identifiers
+      testID: render.testID,
+      nativeID: render.nativeID,
+      accessibilityLabel: render.accessibilityLabel,
+      // Render stats
+      renderCount: render.renderCount,
+      firstRenderTime: render.firstRenderTime,
+      lastRenderTime: render.lastRenderTime,
+      // Last render cause
+      lastRenderCause: render.lastRenderCause ? {
+        type: render.lastRenderCause.type,
+        componentCause: render.lastRenderCause.componentCause,
+        changedKeys: render.lastRenderCause.changedKeys,
+        hookChanges: render.lastRenderCause.hookChanges?.map(h => ({
+          type: h.type,
+          index: h.index,
+          description: h.description
+        }))
+      } : null,
+      // Render history (if available)
+      renderHistory: render.renderHistory?.map(event => ({
+        renderNumber: event.renderNumber,
+        timestamp: event.timestamp,
+        cause: {
+          type: event.cause.type,
+          componentCause: event.cause.componentCause,
+          changedKeys: event.cause.changedKeys
+        }
+      }))
+    }))
+  };
+  return JSON.stringify(exportData, null, 2);
+}

package/lib/module/index.js

@@ -1 +1,71 @@
-"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 const onRenderEvent=e=>{const{RenderTracker:t}=require("./highlight-updates/utils/RenderTracker");return t.onRenderEvent(e)};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";export{generateRendersJson}from"./highlight-updates/utils/renderExportFormatter";
+"use strict";
+
+/**
+ * @buoy-gg/highlight-updates
+ *
+ * Standalone implementation of React DevTools' "Highlight updates when components
+ * render" feature. Works without requiring DevTools to be connected.
+ *
+ * @example
+ * ```tsx
+ * // Toggle-only preset - tap to enable/disable highlights
+ * import { highlightUpdatesPreset } from '@buoy-gg/highlight-updates';
+ *
+ * <FloatingDevTools apps={[highlightUpdatesPreset]} />
+ *
+ * // Modal preset - full interface with filters and render list
+ * import { highlightUpdatesModalPreset } from '@buoy-gg/highlight-updates';
+ *
+ * <FloatingDevTools apps={[highlightUpdatesModalPreset]} />
+ *
+ * // Or use the standalone controller programmatically
+ * import { HighlightUpdatesController } from '@buoy-gg/highlight-updates';
+ *
+ * HighlightUpdatesController.toggle();
+ * HighlightUpdatesController.enable();
+ * HighlightUpdatesController.disable();
+ * ```
+ */
+
+// Preset exports for FloatingDevTools integration
+export { highlightUpdatesPreset, createHighlightUpdatesTool, highlightUpdatesModalPreset, createHighlightUpdatesModalTool } from "./preset";
+
+// Controller export for standalone usage
+export { default as HighlightUpdatesController } from "./highlight-updates/utils/HighlightUpdatesController";
+
+// Overlay component - auto-rendered by FloatingDevTools, but exported for manual usage
+export { HighlightUpdatesOverlay } from "./highlight-updates/HighlightUpdatesOverlay";
+
+// Profiler interceptor for debugging - captures what DevTools detects
+export { installProfilerInterceptor, uninstallProfilerInterceptor, setComparisonCallback, isInterceptorInstalled, enableProfilerLogging, disableProfilerLogging, isLoggingEnabled } from "./highlight-updates/utils/ProfilerInterceptor";
+
+// RenderTracker singleton for tracking render history
+export { RenderTracker } from "./highlight-updates/utils/RenderTracker";
+// Convenience export for unified events integration
+export const onRenderEvent = callback => {
+  const {
+    RenderTracker
+  } = require("./highlight-updates/utils/RenderTracker");
+  return RenderTracker.onRenderEvent(callback);
+};
+
+// RenderCauseDetector for detecting why components rendered
+export { detectRenderCause, clearRenderCauseState, removeRenderCauseState, getRenderCauseStats,
+// Snapshot capture for render history
+safeCloneForHistory, capturePropsSnapshot, captureStateSnapshot } from "./highlight-updates/utils/RenderCauseDetector";
+
+// PerformanceLogger for performance measurement and debugging
+export { PerformanceLogger } from "./highlight-updates/utils/PerformanceLogger";
+// ViewTypeMapper for translating native view names to component names
+export { VIEW_TYPE_MAP, getComponentDisplayName, getNativeViewType, isKnownViewType, getAllNativeViewTypes, getAllComponentNames } from "./highlight-updates/utils/ViewTypeMapper";
+
+// Modal components for custom integrations
+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";
+
+// Simple JSON export for renders
+export { generateRendersJson } from "./highlight-updates/utils/renderExportFormatter";

package/lib/module/preset.js

@@ -1 +1,272 @@
-"use strict";import React,{useState,useEffect,useCallback}from"react";import{HighlighterIcon,HighlightIcon as HighlightIconBase}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[i,e]=useState(()=>HighlightUpdatesController.isEnabled());return useEffect(()=>HighlightUpdatesController.subscribe(t=>{e(t)}),[]),_jsx(HighlightIconBase,{size:t,color:i?"#10b981":"#6b7280"})}function EmptyComponent(){return null}function HighlightUpdatesModalWithBadgeNavigation(t){const[i,e]=useState(null);useEffect(()=>(t.visible&&HighlightUpdatesController.setBadgePressCallback(t=>{e(t)}),()=>{t.visible||HighlightUpdatesController.setBadgePressCallback(null)}),[t.visible]);const o=useCallback(()=>{e(null)},[]);return _jsx(HighlightUpdatesModal,{...t,initialNativeTag:i,onInitialNativeTagHandled:o})}export const highlightUpdatesPreset={id:"highlight-updates",name:"TOGGLE 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 i=t?.enabledColor||"#10b981",e=t?.disabledColor||"#6b7280";return t?.autoInitialize&&setTimeout(()=>{HighlightUpdatesController.initialize()},1e3),{id:t?.id||"highlight-updates",name:t?.name||"TOGGLE 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(HighlightIconBase,{size:t,color:o?i:e})},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 i=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:i}),component:HighlightUpdatesModalWithBadgeNavigation,props:{enableSharedModalDimensions:!1}}}
+"use strict";
+
+/**
+ * Pre-configured highlight updates tool for FloatingDevTools
+ *
+ * This preset provides standalone "Highlight updates when components render"
+ * functionality. Tap the icon to toggle highlights on/off.
+ *
+ * The overlay is automatically rendered by FloatingDevTools when the
+ * @buoy-gg/highlight-updates package is installed.
+ *
+ * Two presets available:
+ * - highlightUpdatesPreset: Quick toggle (no modal)
+ * - highlightUpdatesModalPreset: Full modal with filters and render list
+ *
+ * @example
+ * ```tsx
+ * import { highlightUpdatesPreset, highlightUpdatesModalPreset } from '@buoy-gg/highlight-updates';
+ *
+ * // Toggle-only: Just tap to enable/disable highlighting
+ * <FloatingDevTools apps={[highlightUpdatesPreset]} />
+ *
+ * // Modal: Opens interface with filters, render list, and controls
+ * <FloatingDevTools apps={[highlightUpdatesModalPreset]} />
+ * ```
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { HighlighterIcon, HighlightIcon as HighlightIconBase } from "@buoy-gg/floating-tools-core";
+import HighlightUpdatesController from "./highlight-updates/utils/HighlightUpdatesController";
+import { HighlightUpdatesModal } from "./highlight-updates/components/HighlightUpdatesModal";
+
+/**
+ * Icon component that changes color based on enabled state.
+ *
+ * ⚠️ IMPORTANT - DO NOT MODIFY THIS COMPONENT ⚠️
+ * This component MUST use useState and useEffect hooks to subscribe to the controller.
+ * It is rendered as a JSX component (<IconComponent />) in FloatingMenu and DialIcon,
+ * which allows hooks to work properly.
+ *
+ * If you remove the hooks or change this to read isEnabled() directly,
+ * the icon color will NOT update when the toggle is pressed.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+function HighlightIcon({
+  size
+}) {
+  const [enabled, setEnabled] = useState(() => HighlightUpdatesController.isEnabled());
+  useEffect(() => {
+    const unsubscribe = HighlightUpdatesController.subscribe(isEnabled => {
+      setEnabled(isEnabled);
+    });
+    return unsubscribe;
+  }, []);
+  return /*#__PURE__*/_jsx(HighlightIconBase, {
+    size: size,
+    color: enabled ? "#10b981" : "#6b7280"
+  });
+}
+
+/**
+ * Empty component for toggle-only tools (no modal needed)
+ * The actual overlay is rendered by FloatingDevTools automatically
+ */
+function EmptyComponent() {
+  return null;
+}
+
+/**
+ * Wrapper component for the modal that handles badge press navigation.
+ * Registers a callback with the controller to receive badge press events
+ * and passes the target nativeTag to the modal for deep linking.
+ */
+function HighlightUpdatesModalWithBadgeNavigation(props) {
+  const [targetNativeTag, setTargetNativeTag] = useState(null);
+
+  // Register badge press callback when modal is visible
+  useEffect(() => {
+    if (props.visible) {
+      // Register callback to handle badge presses
+      HighlightUpdatesController.setBadgePressCallback(nativeTag => {
+        setTargetNativeTag(nativeTag);
+      });
+    }
+    return () => {
+      // Clear callback when modal is closed or unmounted
+      if (!props.visible) {
+        HighlightUpdatesController.setBadgePressCallback(null);
+      }
+    };
+  }, [props.visible]);
+
+  // Clear the target after it's been handled
+  const handleInitialNativeTagHandled = useCallback(() => {
+    setTargetNativeTag(null);
+  }, []);
+  return /*#__PURE__*/_jsx(HighlightUpdatesModal, {
+    ...props,
+    initialNativeTag: targetNativeTag,
+    onInitialNativeTagHandled: handleInitialNativeTagHandled
+  });
+}
+
+/**
+ * Pre-configured highlight updates tool for FloatingDevTools.
+ * Tap the icon to toggle component render highlighting on/off.
+ *
+ * Features:
+ * - Standalone implementation - no DevTools connection required
+ * - Simple direct toggle (no modal)
+ * - Icon changes color: gray when off, green when on
+ * - Overlay auto-rendered by FloatingDevTools
+ */
+export const highlightUpdatesPreset = {
+  id: "highlight-updates",
+  name: "TOGGLE HIGHLIGHT",
+  description: "Toggle component render highlights",
+  slot: "row",
+  icon: HighlightIcon,
+  component: EmptyComponent,
+  props: {},
+  launchMode: "toggle-only",
+  onPress: () => {
+    // Initialize on first press if not already initialized
+    if (!HighlightUpdatesController.isInitialized()) {
+      HighlightUpdatesController.initialize();
+    }
+    HighlightUpdatesController.toggle();
+    // Icon updates automatically via subscription in HighlightIcon component
+  }
+};
+
+/**
+ * Create a custom highlight updates tool configuration.
+ * Use this if you want to override default settings.
+ *
+ * @example
+ * ```tsx
+ * import { createHighlightUpdatesTool } from '@buoy-gg/highlight-updates';
+ *
+ * const myHighlightTool = createHighlightUpdatesTool({
+ *   name: "RENDERS",
+ *   enabledColor: "#ec4899",
+ *   disabledColor: "#9ca3af",
+ *   autoInitialize: true,
+ * });
+ * ```
+ */
+export function createHighlightUpdatesTool(options) {
+  const enabledColor = options?.enabledColor || "#10b981";
+  const disabledColor = options?.disabledColor || "#6b7280";
+
+  // Auto-initialize if requested
+  if (options?.autoInitialize) {
+    // Delay to allow DevTools to connect
+    setTimeout(() => {
+      HighlightUpdatesController.initialize();
+    }, 1000);
+  }
+
+  /**
+   * Custom icon component with hooks - rendered as JSX component.
+   *
+   * ⚠️ IMPORTANT - DO NOT MODIFY THIS COMPONENT ⚠️
+   * This component MUST use useState and useEffect hooks to subscribe to the controller.
+   * See the comment on HighlightIcon above for full explanation.
+   */
+  const CustomHighlightIcon = ({
+    size
+  }) => {
+    const [enabled, setEnabled] = useState(() => HighlightUpdatesController.isEnabled());
+    useEffect(() => {
+      const unsubscribe = HighlightUpdatesController.subscribe(isEnabled => {
+        setEnabled(isEnabled);
+      });
+      return unsubscribe;
+    }, []);
+    return /*#__PURE__*/_jsx(HighlightIconBase, {
+      size: size,
+      color: enabled ? enabledColor : disabledColor
+    });
+  };
+  return {
+    id: options?.id || "highlight-updates",
+    name: options?.name || "TOGGLE HIGHLIGHT",
+    description: options?.description || "Toggle component render highlights",
+    slot: "row",
+    icon: CustomHighlightIcon,
+    component: EmptyComponent,
+    props: {},
+    launchMode: "toggle-only",
+    onPress: () => {
+      // Initialize on first press if not already initialized
+      if (!HighlightUpdatesController.isInitialized()) {
+        HighlightUpdatesController.initialize();
+      }
+      HighlightUpdatesController.toggle();
+      // Icon updates automatically via subscription
+    }
+  };
+}
+
+/**
+ * Modal preset for highlight updates tool.
+ * Opens a full modal interface with:
+ * - List of tracked component renders
+ * - Start/Stop and Pause/Resume controls
+ * - Clear button to reset render counts
+ * - Search bar in navbar (expandable)
+ * - Filter by viewType, testID, nativeID, componentName
+ * - Tap overlay badge to jump to component detail view
+ *
+ * Use this preset when you want detailed render tracking and filtering.
+ */
+export const highlightUpdatesModalPreset = {
+  id: "highlight-updates-modal",
+  name: "HIGHLIGHT",
+  description: "View component render tracking modal",
+  slot: "both",
+  icon: ({
+    size
+  }) => /*#__PURE__*/_jsx(HighlighterIcon, {
+    size: size
+  }),
+  component: HighlightUpdatesModalWithBadgeNavigation,
+  props: {
+    enableSharedModalDimensions: false
+  }
+};
+
+/**
+ * Create a custom highlight updates modal tool configuration.
+ * Use this if you want to override default settings for the modal version.
+ *
+ * @example
+ * ```tsx
+ * import { createHighlightUpdatesModalTool } from '@buoy-gg/highlight-updates';
+ *
+ * const myRendersTool = createHighlightUpdatesModalTool({
+ *   name: "PROFILER",
+ *   enabledColor: "#8b5cf6",
+ *   disabledColor: "#9ca3af",
+ * });
+ * ```
+ */
+export function createHighlightUpdatesModalTool(options) {
+  const enabledColor = options?.enabledColor || "#10b981";
+  const disabledColor = options?.disabledColor || "#6b7280";
+
+  // Auto-initialize if requested
+  if (options?.autoInitialize) {
+    setTimeout(() => {
+      HighlightUpdatesController.initialize();
+    }, 1000);
+  }
+  return {
+    id: options?.id || "highlight-updates-modal",
+    name: options?.name || "HIGHLIGHT",
+    description: options?.description || "View component render tracking modal",
+    slot: "both",
+    icon: ({
+      size
+    }) => /*#__PURE__*/_jsx(HighlighterIcon, {
+      size: size,
+      color: enabledColor
+    }),
+    component: HighlightUpdatesModalWithBadgeNavigation,
+    props: {
+      enableSharedModalDimensions: false
+    }
+  };
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"HighlightUpdatesOverlay.d.ts","sourceRoot":"","sources":["../../../src/highlight-updates/HighlightUpdatesOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAMN,MAAM,OAAO,CAAC;AA2Bf,UAAU,4BAA4B;IACpC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,uBAAuB,CAAC,EACtC,YAAY,GACb,GAAE,4BAAiC,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA0P/D;AA2DD,eAAe,uBAAuB,CAAC"}