@buoy-gg/highlight-updates 7.0.38 → 7.0.40

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/copySettingsStorage.js

@@ -1 +1,26 @@
-"use strict";import{definePersistedSetting,devToolsStorageKeys}from"@buoy-gg/shared-ui";import{DEFAULT_COPY_SETTINGS}from"../types/copySettings";const copySettings=definePersistedSetting(devToolsStorageKeys.highlightUpdates.copySettings(),DEFAULT_COPY_SETTINGS,{sanitize:(t,e)=>({...t,filterCauses:e?.filterCauses??DEFAULT_COPY_SETTINGS.filterCauses})});export async function saveCopySettings(t){await copySettings.save(t)}export async function loadCopySettings(){return copySettings.loadOrNull()}export async function clearCopySettings(){await copySettings.clear()}
+"use strict";
+
+/**
+ * Copy Settings Storage
+ *
+ * Persists the highlight-updates copy/export settings through the shared
+ * `definePersistedSetting` (merge-over-defaults, best-effort save/clear).
+ */
+
+import { definePersistedSetting, devToolsStorageKeys } from "@buoy-gg/shared-ui";
+import { DEFAULT_COPY_SETTINGS } from "../types/copySettings";
+const copySettings = definePersistedSetting(devToolsStorageKeys.highlightUpdates.copySettings(), DEFAULT_COPY_SETTINGS, {
+  sanitize: (merged, stored) => ({
+    ...merged,
+    filterCauses: stored?.filterCauses ?? DEFAULT_COPY_SETTINGS.filterCauses
+  })
+});
+export async function saveCopySettings(settings) {
+  await copySettings.save(settings);
+}
+export async function loadCopySettings() {
+  return copySettings.loadOrNull();
+}
+export async function clearCopySettings() {
+  await copySettings.clear();
+}

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

@@ -1 +1,178 @@
-"use strict";export const HIGHLIGHT_OVERLAY_COMPONENTS=new Set(["HighlightUpdatesOverlay","HighlightUpdatesModal","HighlightFilterView","RenderDetailView","RenderListItem","RenderListItemInner","RenderHistoryViewer","RenderHistoryFooter","RenderCauseBadge","TwoLevelCauseBadge","EnhancedCauseDisplay","IsolatedRenderList","IsolatedRenderListInner","StatsDisplay","StatsDisplayInner","CurrentStateView","EventStepperFooter","EventsModal","UnifiedEventList","UnifiedEventItem","UnifiedEventDetail","UnifiedEventFilters","UnifiedEventViewer","ReactQueryEventDetail","EventsCopySettingsView"]);export const HIGHLIGHT_OVERLAY_PREFIXES=["HighlightUpdates","RenderList","RenderDetail","RenderHistory","RenderCause","EventStepper","UnifiedEvent","EventsModal","EventsCopy"];export const OTHER_DEV_TOOLS_COMPONENTS=new Set(["JsModalComponent","JsModal","TypePicker","PatternInput","PatternChip","DetectedItemsSection","DetectedCategoryBadge","IdentifierBadge","CategoryBadge","AppRenderer","AppOverlay","FloatingTools","DialDevTools","DevToolsVisibilityProvider","AppHostProvider","MinimizedToolsProvider","ModalHeader","TabSelector","SectionHeader","DraggableHeader","WindowControls","TreeDiffViewer","DataViewer","SplitDiffViewer","VirtualizedDataExplorer","DiffSummary","TypeLegend","IndentGuides","IndentGuidesOverlay","CyberpunkInput","DiffView","AnswerCard","DetailsSection","DetailRow","QuickActionsSection","FilterOptionCard","SearchSection","SearchSectionInner","HeaderActions","HeaderActionsInner","MainListHeader","FilterViewHeader","DetailViewHeader","FloatingMenu","FloatingDevTools","MinimizedToolsStack","MinimizedToolsContext","GlitchToolButton","ExpandablePopover","CollapsedPeek","ExpandedWrapper","DialIcon","DialMenu","DialIconItem","OnboardingTooltip","MenuLauncherIcon","DevToolsSettingsModal","SettingsModal","ImageOverlayModal","ImageOverlayStandalone","ToolCard","ToolIcon","GripVerticalIcon","UserStatus","Divider","ChevronDown","ChevronUp","ChevronLeft","ChevronRight","ChevronDownIcon","ChevronUpIcon","ChevronLeftIcon","ChevronRightIcon","LogBox","LogBoxLog","LogBoxLogNotification","LogBoxNotificationContainer","_LogBoxNotificationContainer","LogBoxInspector","LogBoxInspectorContainer","LogBoxInspectorHeader","LogBoxInspectorBody","LogBoxInspectorFooter","LogBoxInspectorMessageHeader","LogBoxInspectorStackFrame","LogBoxInspectorSection","LogBoxButton","LogBoxMessage","PerfMonitorOverlay","PerfMonitorModal","PerfMonitorRoot","PerfHudInline","PerfDiagnostics","MetricSparkline","JsFallbackNotice","AutomationConfigView","AutomationProgressOverlay","AutomationResumer","SaveBenchmarkPrompt","SavedCasesModal","BatchBarReport","BatchReportView","PerfHudInlineInner","PerfMonitorOverlayInner","MiniMetric","MetricRow","MetricNumber","MetricSparklineInner","RecColumn","PillBody","FullBody","TargetLine","PagesSection","ProbesSection","TaskTable","TaskRow","BusySparkline"]);export const OTHER_DEV_TOOLS_PREFIXES=["JsModal","ImageOverlay","PerfMonitor","PerfHud","JsTop"];export const OTHER_DEV_TOOLS_EXACT=new Set(["VirtualizedDataExplorer","TreeDiffView","TreeDiffRow","DataViewer","DiffView","DiffSummary","FloatingDevTools","FloatingMenu","FloatingBubble","MinimizedDock","DialMenu","DialItem","ExpandableSection","ChevronIcon","GlitchText","SettingsModal","SettingsRow","OnboardingFlow","DevToolsMenu"]);let captureBuoyToolRenders=!1;export function setCaptureBuoyToolRenders(e){captureBuoyToolRenders=e}export function isCapturingBuoyToolRenders(){return captureBuoyToolRenders}const PERF_MONITOR_ALWAYS_EXCLUDED=new Set(["PerfHudInline","PerfHudInlineInner","PerfDiagnostics","MetricSparkline","MetricSparklineInner","JsFallbackNotice","AutomationConfigView","AutomationProgressOverlay","AutomationResumer","SaveBenchmarkPrompt","SavedCasesModal","BatchBarReport","BatchReportView","MiniMetric","MetricRow","MetricNumber","RecColumn","PillBody","FullBody","TargetLine","PagesSection","ProbesSection"]);export function isPerfMonitorComponentName(e){return e.startsWith("PerfMonitor")||e.startsWith("PerfHud")||PERF_MONITOR_ALWAYS_EXCLUDED.has(e)}const JS_TOP_ALWAYS_EXCLUDED=new Set(["TaskTable","TaskRow","BusySparkline"]);export function isJsTopComponentName(e){return e.startsWith("JsTop")||JS_TOP_ALWAYS_EXCLUDED.has(e)}export function isDevToolsComponentName(e){if(HIGHLIGHT_OVERLAY_COMPONENTS.has(e))return!0;for(let o=0;o<HIGHLIGHT_OVERLAY_PREFIXES.length;o++)if(e.startsWith(HIGHLIGHT_OVERLAY_PREFIXES[o]))return!0;if(captureBuoyToolRenders)return isPerfMonitorComponentName(e)||isJsTopComponentName(e);if(OTHER_DEV_TOOLS_COMPONENTS.has(e))return!0;if(OTHER_DEV_TOOLS_EXACT.has(e))return!0;for(let o=0;o<OTHER_DEV_TOOLS_PREFIXES.length;o++)if(e.startsWith(OTHER_DEV_TOOLS_PREFIXES[o]))return!0;return!1}export function isRenderLoopUnsafeName(e){if(HIGHLIGHT_OVERLAY_COMPONENTS.has(e))return!0;for(let o=0;o<HIGHLIGHT_OVERLAY_PREFIXES.length;o++)if(e.startsWith(HIGHLIGHT_OVERLAY_PREFIXES[o]))return!0;return!1}
+"use strict";
+
+// ============================================================================
+// Buoy devtools component-name sets, shared by HighlightUpdatesController's
+// per-node exclusion walk and CommitProfiler's subtree pruning.
+//
+// Extracted from HighlightUpdatesController.ts verbatim — keep the split:
+// HIGHLIGHT_* sets are ALWAYS excluded (tracking them causes infinite render
+// loops); OTHER_DEV_TOOLS_* sets are toggleable via the excludeDevTools
+// setting in the highlight flow (CommitProfiler always excludes both).
+// ============================================================================
+
+// Components that MUST always be excluded to prevent infinite loops.
+// Includes the Highlight Updates overlay AND the Events tool (which subscribes
+// to render callbacks via RenderTracker.onRenderEvent - tracking its renders
+// would create an infinite callback loop).
+export const HIGHLIGHT_OVERLAY_COMPONENTS = new Set([
+// Highlight Updates overlay components
+"HighlightUpdatesOverlay", "HighlightUpdatesModal", "HighlightFilterView", "RenderDetailView", "RenderListItem", "RenderListItemInner", "RenderHistoryViewer", "RenderHistoryFooter", "RenderCauseBadge", "TwoLevelCauseBadge", "EnhancedCauseDisplay", "IsolatedRenderList", "IsolatedRenderListInner", "StatsDisplay", "StatsDisplayInner", "CurrentStateView", "EventStepperFooter",
+// Events tool components - subscribes to onRenderEvent, tracking these causes infinite loops
+"EventsModal", "UnifiedEventList", "UnifiedEventItem", "UnifiedEventDetail", "UnifiedEventFilters", "UnifiedEventViewer", "ReactQueryEventDetail", "EventsCopySettingsView"]);
+
+// Prefixes for always-excluded components (highlight overlay + events tool)
+export const HIGHLIGHT_OVERLAY_PREFIXES = ["HighlightUpdates", "RenderList", "RenderDetail", "RenderHistory", "RenderCause", "EventStepper",
+// Events tool - subscribes to onRenderEvent, must always be excluded
+"UnifiedEvent", "EventsModal", "EventsCopy"];
+
+// Other dev tools components - can be toggled via excludeDevTools setting
+export const OTHER_DEV_TOOLS_COMPONENTS = new Set([
+// React Buoy devtools components
+"JsModalComponent", "JsModal", "TypePicker", "PatternInput", "PatternChip", "DetectedItemsSection", "DetectedCategoryBadge", "IdentifierBadge", "CategoryBadge", "AppRenderer", "AppOverlay", "FloatingTools", "DialDevTools", "DevToolsVisibilityProvider", "AppHostProvider", "MinimizedToolsProvider",
+// Shared UI components used in modals
+"ModalHeader", "TabSelector", "SectionHeader", "DraggableHeader", "WindowControls",
+// Shared UI data viewer components (JSON diff viewers, etc.)
+"TreeDiffViewer", "DataViewer", "SplitDiffViewer", "VirtualizedDataExplorer", "DiffSummary", "TypeLegend", "IndentGuides", "IndentGuidesOverlay", "CyberpunkInput", "DiffView", "AnswerCard", "DetailsSection", "DetailRow", "QuickActionsSection", "FilterOptionCard",
+// Modal header sub-components
+"SearchSection", "SearchSectionInner", "HeaderActions", "HeaderActionsInner", "MainListHeader", "FilterViewHeader", "DetailViewHeader",
+// Floating menu components (minimized tools, dial, etc.)
+"FloatingMenu", "FloatingDevTools", "MinimizedToolsStack", "MinimizedToolsContext", "GlitchToolButton", "ExpandablePopover", "CollapsedPeek", "ExpandedWrapper", "DialIcon", "DialMenu", "DialIconItem", "OnboardingTooltip", "MenuLauncherIcon", "DevToolsSettingsModal", "SettingsModal",
+// Image Overlay components
+"ImageOverlayModal", "ImageOverlayStandalone", "ToolCard", "ToolIcon", "GripVerticalIcon", "UserStatus", "Divider",
+// Shared UI icon components (Chevrons, etc.)
+"ChevronDown", "ChevronUp", "ChevronLeft", "ChevronRight", "ChevronDownIcon", "ChevronUpIcon", "ChevronLeftIcon", "ChevronRightIcon",
+// React Native LogBox components (shown on reload/errors)
+"LogBox", "LogBoxLog", "LogBoxLogNotification", "LogBoxNotificationContainer", "_LogBoxNotificationContainer", "LogBoxInspector", "LogBoxInspectorContainer", "LogBoxInspectorHeader", "LogBoxInspectorBody", "LogBoxInspectorFooter", "LogBoxInspectorMessageHeader", "LogBoxInspectorStackFrame", "LogBoxInspectorSection", "LogBoxButton", "LogBoxMessage",
+// Perf-monitor components. The HUD re-renders on every 250ms sample tick
+// during a benchmark recording, so leaving these in would dominate any
+// render-capture result. NOTE: no blanket "Perf" prefix — user benchmark
+// screens are commonly named Perf* (e.g. PerfBenchHeavy in the example app).
+"PerfMonitorOverlay", "PerfMonitorModal", "PerfMonitorRoot", "PerfHudInline", "PerfDiagnostics", "MetricSparkline", "JsFallbackNotice", "AutomationConfigView", "AutomationProgressOverlay", "AutomationResumer", "SaveBenchmarkPrompt", "SavedCasesModal", "BatchBarReport", "BatchReportView",
+// Perf HUD INNER components. The live-highlight exclusion walk climbs at
+// most 30 fiber levels from a flagged host view — the HUD's metric
+// TextInputs sit under deep TextInput/Animated wrappers, so the walk can
+// miss the PerfMonitorOverlay root; near names are what it actually hits.
+"PerfHudInlineInner", "PerfMonitorOverlayInner", "MiniMetric", "MetricRow", "MetricNumber", "MetricSparklineInner", "RecColumn", "PillBody", "FullBody", "TargetLine", "PagesSection", "ProbesSection",
+// JS TOP components without the "JsTop" prefix (which is matched
+// separately). The modal/table re-render on every 250ms snapshot tick.
+"TaskTable", "TaskRow", "BusySparkline"]);
+
+/**
+ * Other dev-tools prefixes — noise reduction, toggleable via excludeDevTools.
+ *
+ * EVERY ENTRY HERE MUST BE BUOY-NAMESPACED. These are prefix matches, and a
+ * match hides the component from render reports. Generic English words do not
+ * belong in this list, because app components share them.
+ *
+ * This list used to contain `Virtualized`, meant for Buoy's own
+ * VirtualizedDataExplorer. React Native's FlatList renders a `VirtualizedList`,
+ * so the prefix matched — and because CommitProfiler pruned the whole subtree
+ * on a match, Buoy could not see inside ANY FlatList or SectionList in ANY
+ * app. Lists are the number-one source of render problems in React Native, and
+ * the render tools were blind to all of them. `Dial` was the same trap:
+ * "Dialog".startsWith("Dial") is true, so every Dialog vanished too.
+ *
+ * Names that are generic on their own now live in OTHER_DEV_TOOLS_COMPONENTS
+ * as exact matches instead.
+ */
+export const OTHER_DEV_TOOLS_PREFIXES = ["JsModal", "ImageOverlay",
+// Perf-monitor prefixes (safe: user code is Perf*, buoy code is
+// PerfMonitor* / PerfHud*)
+"PerfMonitor", "PerfHud",
+// JS TOP (js-top package)
+"JsTop"];
+
+/**
+ * Buoy component names that were previously matched by over-broad prefixes.
+ * Exact matches only — see the warning above.
+ */
+export const OTHER_DEV_TOOLS_EXACT = new Set(["VirtualizedDataExplorer", "TreeDiffView", "TreeDiffRow", "DataViewer", "DiffView", "DiffSummary", "FloatingDevTools", "FloatingMenu", "FloatingBubble", "MinimizedDock", "DialMenu", "DialItem", "ExpandableSection", "ChevronIcon", "GlitchText", "SettingsModal", "SettingsRow", "OnboardingFlow", "DevToolsMenu"]);
+
+// ── Bench "profile our own tools" mode ──────────────────────────────────
+// When enabled (by a dedicated benchmark screen, e.g. the example app's
+// /tool-bench page), render capture INCLUDES Buoy's tool UI so we can
+// benchmark our own devtools. Two groups stay excluded regardless:
+//  - highlight overlay + events tool (tracking them = infinite render loop)
+//  - perf-monitor UI (the HUD re-renders on every 250ms sample tick while
+//    recording, so its renders would dominate any capture result)
+// Only consulted by `isDevToolsComponentName` (the CommitProfiler path) —
+// the highlight flow's own excludeDevTools walk reads the raw sets above
+// and is deliberately unaffected.
+let captureBuoyToolRenders = false;
+export function setCaptureBuoyToolRenders(enabled) {
+  captureBuoyToolRenders = enabled;
+}
+export function isCapturingBuoyToolRenders() {
+  return captureBuoyToolRenders;
+}
+
+// Perf-monitor components without the "PerfMonitor" prefix (which is
+// matched separately). Mirrors the perf entries in OTHER_DEV_TOOLS_*.
+const PERF_MONITOR_ALWAYS_EXCLUDED = new Set(["PerfHudInline", "PerfHudInlineInner", "PerfDiagnostics", "MetricSparkline", "MetricSparklineInner", "JsFallbackNotice", "AutomationConfigView", "AutomationProgressOverlay", "AutomationResumer", "SaveBenchmarkPrompt", "SavedCasesModal", "BatchBarReport", "BatchReportView",
+// HUD inner components — churn every 250ms sample tick while recording.
+"MiniMetric", "MetricRow", "MetricNumber", "RecColumn", "PillBody", "FullBody", "TargetLine", "PagesSection", "ProbesSection"]);
+
+/**
+ * True when a name belongs to the perf-monitor UI. These stay excluded
+ * even in bench "profile our own tools" mode — the HUD re-renders on
+ * every 250ms sample tick while recording, so both capture results and
+ * live highlight boxes would be dominated by it.
+ */
+export function isPerfMonitorComponentName(name) {
+  return name.startsWith("PerfMonitor") || name.startsWith("PerfHud") || PERF_MONITOR_ALWAYS_EXCLUDED.has(name);
+}
+
+// JS TOP components without the "JsTop" prefix. Mirrors the js-top entries
+// in OTHER_DEV_TOOLS_COMPONENTS.
+const JS_TOP_ALWAYS_EXCLUDED = new Set(["TaskTable", "TaskRow", "BusySparkline"]);
+
+/**
+ * True when a name belongs to the JS TOP UI. Stays excluded even in bench
+ * "profile our own tools" mode for the same reason as the perf HUD: the
+ * task table re-renders on every 250ms snapshot tick while open.
+ */
+export function isJsTopComponentName(name) {
+  return name.startsWith("JsTop") || JS_TOP_ALWAYS_EXCLUDED.has(name);
+}
+
+/**
+ * True when a component display name belongs to Buoy's own devtools UI (or
+ * RN's LogBox). Sets are checked first (O(1)), then prefixes.
+ */
+export function isDevToolsComponentName(name) {
+  // Always excluded — tracking these causes infinite render loops.
+  if (HIGHLIGHT_OVERLAY_COMPONENTS.has(name)) return true;
+  for (let i = 0; i < HIGHLIGHT_OVERLAY_PREFIXES.length; i++) {
+    if (name.startsWith(HIGHLIGHT_OVERLAY_PREFIXES[i])) return true;
+  }
+  if (captureBuoyToolRenders) {
+    // Benchmarking our own tools: capture everything except the
+    // perf-monitor and JS TOP UIs (their 250ms tick churn would drown
+    // the result).
+    return isPerfMonitorComponentName(name) || isJsTopComponentName(name);
+  }
+  if (OTHER_DEV_TOOLS_COMPONENTS.has(name)) return true;
+  if (OTHER_DEV_TOOLS_EXACT.has(name)) return true;
+  for (let i = 0; i < OTHER_DEV_TOOLS_PREFIXES.length; i++) {
+    if (name.startsWith(OTHER_DEV_TOOLS_PREFIXES[i])) return true;
+  }
+  return false;
+}
+
+/**
+ * Is this name one whose SUBTREE must be skipped, not merely the node?
+ *
+ * Only the always-excluded group qualifies: walking Buoy's own render-tracking
+ * UI feeds its own renders back in and loops. Everything else in
+ * `isDevToolsComponentName` is noise reduction — hide the row, but keep
+ * walking, because app components live underneath Buoy chrome (a tool modal
+ * renders the host app behind it) and pruning on a NAME is how one bad prefix
+ * cost us every FlatList in every app.
+ */
+export function isRenderLoopUnsafeName(name) {
+  if (HIGHLIGHT_OVERLAY_COMPONENTS.has(name)) return true;
+  for (let i = 0; i < HIGHLIGHT_OVERLAY_PREFIXES.length; i++) {
+    if (name.startsWith(HIGHLIGHT_OVERLAY_PREFIXES[i])) return true;
+  }
+  return false;
+}

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

@@ -1 +1,36 @@
-"use strict";const HOST_NAMES=new Set(["View","RCTView","Text","RCTText","RawText","RCTRawText","VirtualText","RCTVirtualText","ScrollView","RCTScrollView","RCTScrollContentView","SafeAreaView","RCTSafeAreaView","Pressable","TouchableOpacity","Image","RCTImageView"]),PLACEHOLDER_NAMES=new Set(["Unknown","Anonymous","CellRenderer","NativeComponent"]);export function isNamedComposite(e){if(e.testID&&e.testID.trim())return!0;const t=(e.componentName??"").trim();if(!t)return!1;if(HOST_NAMES.has(t))return!1;if(PLACEHOLDER_NAMES.has(t))return!1;const i=(e.viewType??"").trim();return!(i&&HOST_NAMES.has(i)&&t===i||/^comp(\s|$)/i.test(t)||t.startsWith("_"))}export function isHostViewName(e){return!!e&&HOST_NAMES.has(e)}
+"use strict";
+
+/**
+ * Host views (RCTView / View / Text) drown the Highlight Updates list.
+ * Named composites are what you actually want when asking "what re-rendered?"
+ */
+
+const HOST_NAMES = new Set(["View", "RCTView", "Text", "RCTText", "RawText", "RCTRawText", "VirtualText", "RCTVirtualText", "ScrollView", "RCTScrollView", "RCTScrollContentView", "SafeAreaView", "RCTSafeAreaView", "Pressable", "TouchableOpacity", "Image", "RCTImageView"]);
+
+/**
+ * Fiber names that look like identity but are list chrome / RN internals.
+ * Only provably-anonymous names belong here — real components (CopyButton,
+ * a user's `Copy`…) must stay visible. "Comp Copy"-style truncated
+ * placeholders are handled by the regex in isNamedComposite instead.
+ */
+const PLACEHOLDER_NAMES = new Set(["Unknown", "Anonymous", "CellRenderer", "NativeComponent"]);
+/**
+ * True when this row is a named user composite (or has a testID). Host views
+ * and anonymous "Comp Copy" wrappers return false.
+ */
+export function isNamedComposite(r) {
+  if (r.testID && r.testID.trim()) return true;
+  const name = (r.componentName ?? "").trim();
+  if (!name) return false;
+  if (HOST_NAMES.has(name)) return false;
+  if (PLACEHOLDER_NAMES.has(name)) return false;
+  const view = (r.viewType ?? "").trim();
+  if (view && HOST_NAMES.has(view) && name === view) return false;
+  // "Comp Copy" / "1x" style placeholders — no real component identity.
+  if (/^comp(\s|$)/i.test(name)) return false;
+  if (name.startsWith("_")) return false;
+  return true;
+}
+export function isHostViewName(name) {
+  return !!name && HOST_NAMES.has(name);
+}

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

@@ -1 +1,98 @@
-"use strict";const CLASS_COMPONENT=1,MAX_HOOKS_WALKED=64;function isHookList(e){return!!e&&"object"==typeof e&&("next"in e||"queue"in e||"memoizedState"in e)}export function hookStateChanged(e,t,n){if(e===t)return!1;if(n?.isClassComponent)return!0;if(!isHookList(t))return!0;let o=e,i=t;for(let e=0;null!=i&&e<64;e++){if(null!=i.queue){if(null==o)return!0;if(!Object.is(o.memoizedState,i.memoizedState))return!0}i=i.next,o=null!=o?o.next:null}return!1}export function ownStateChanged(e,t){return hookStateChanged(e?.memoizedState,t?.memoizedState,{isClassComponent:1===t?.tag})}
+"use strict";
+
+/**
+ * "Did this component's own state actually change?" — one implementation.
+ *
+ * This package classifies render causes twice, on purpose. `RenderCauseDetector`
+ * serves the overlay and rides React DevTools' `traceUpdates`, which hands it
+ * fibers at an ambiguous moment — hence its WeakMap fallbacks and fiber-swap
+ * detection. `CommitProfiler` serves Bench's render capture from inside
+ * `onCommitFiberRoot`, where `fiber` is current and `fiber.alternate` is
+ * previous by definition, and where it runs on every composite fiber of every
+ * commit and so counts allocations. Those are genuinely different problems and
+ * the two classifiers should stay separate.
+ *
+ * This ONE question is not different between them, and it is the question they
+ * both got wrong:
+ *
+ *   `prev.memoizedState !== next.memoizedState`
+ *
+ * For a function component `memoizedState` is the head of the hook linked list,
+ * and React rebuilds that list on every update — `updateWorkInProgressHook`
+ * clones each node — so the head is a fresh object whether or not a single
+ * hook's value moved. Read as "state changed" it makes "state"/"hooks" the
+ * answer for every component that uses ANY hook (a lone `useEffect` is enough)
+ * and leaves "parent" reachable only by the vanishingly rare component that
+ * uses none.
+ *
+ * That is the one distinction in either tool a developer acts on: "parent"
+ * means memoize it or lift the state, "state" means it genuinely updated and
+ * should be left alone. Backwards, it sends you to optimise the thing that was
+ * already fine — and in Bench it also silently shrank `wastedRenders`, the
+ * number that says whether there is anything to fix at all.
+ *
+ * Both tools reached that wrong line independently, which is exactly why the
+ * answer lives here now rather than in two places that happen to agree.
+ */
+
+/** React work tag for a class component — its `memoizedState` IS the state. */
+const CLASS_COMPONENT = 1;
+
+/** Guardrail on the hook-list walk; deep hook lists are pathological. */
+const MAX_HOOKS_WALKED = 64;
+
+/** Does this look like React's hook linked list rather than class state? */
+function isHookList(head) {
+  return !!head && typeof head === "object" && ("next" in head || "queue" in head || "memoizedState" in head);
+}
+
+/**
+ * True when a STATE hook's value actually moved between two hook-list heads.
+ *
+ * `queue` is the marker: `useState` and `useReducer` — and everything built on
+ * them — own one; effects, memos, callbacks and refs do not. An effect's
+ * `memoizedState` is a brand-new object on every single render, which is the
+ * specific thing that broke the identity check.
+ *
+ * Note that a `useRef` mutation is deliberately NOT a state change here. It
+ * cannot cause a render, so a render attributed to one is a render blamed on
+ * something that did not do it.
+ *
+ * Conservative where it cannot tell: a class component, or a `memoizedState`
+ * that is not a recognisable hook list, falls back to the identity comparison.
+ * There the identity IS meaningful (or is the best signal available), so the
+ * old behaviour is the right behaviour.
+ *
+ * Takes the HEADS rather than the fibers because only one of the two callers
+ * has a previous fiber to hand — the overlay may be working from a WeakMap
+ * snapshot of the previous `memoizedState` instead. Use `ownStateChanged` when
+ * you do have both fibers.
+ */
+export function hookStateChanged(prevHead, nextHead, options) {
+  if (prevHead === nextHead) return false;
+  if (options?.isClassComponent) return true;
+  if (!isHookList(nextHead)) return true;
+  let p = prevHead;
+  let n = nextHead;
+  for (let depth = 0; n != null && depth < MAX_HOOKS_WALKED; depth++) {
+    if (n.queue != null) {
+      // A hook the previous render did not have is a real change.
+      if (p == null) return true;
+      if (!Object.is(p.memoizedState, n.memoizedState)) return true;
+    }
+    n = n.next;
+    p = p != null ? p.next : null;
+  }
+  return false;
+}
+
+/**
+ * `hookStateChanged` for callers holding both fibers — the common case inside
+ * `onCommitFiberRoot`, where `fiber.alternate` is the previous fiber by
+ * definition.
+ */
+export function ownStateChanged(prev, next) {
+  return hookStateChanged(prev?.memoizedState, next?.memoizedState, {
+    isClassComponent: next?.tag === CLASS_COMPONENT
+  });
+}