@buoy-gg/highlight-updates 2.1.11 → 2.1.13

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

@@ -1,255 +1 @@
-/**
- * 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
-};
+"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/highlight-updates/utils/renderExportFormatter.js

@@ -1,54 +1 @@
-"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);
-}
+"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)}

package/lib/module/index.js

@@ -1,71 +1 @@
-"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";
+"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";

package/lib/module/preset.js

@@ -1,272 +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
-    }
-  };
-}
+"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}}}